@smartbit4all/ng-client 7.2.10 → 7.2.12

package/fesm2022/smartbit4all-ng-client.mjs

@@ -52,6 +52,7 @@ import { MatExpansionPanel, MatExpansionPanelHeader, MatExpansionPanelTitle } fr
 import { Chart, registerables } from 'chart.js';
 import AnnotationPlugin from 'chartjs-plugin-annotation';
 import ZoomPlugin from 'chartjs-plugin-zoom';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { MatToolbar } from '@angular/material/toolbar';
 
 /**
@@ -7622,7 +7623,7 @@ var ToolbarDirection;
     ToolbarDirection["VERTICAL"] = "VERTICAL";
 })(ToolbarDirection || (ToolbarDirection = {}));
 
-let ApiModule$1 = class ApiModule {
+let ApiModule$3 = class ApiModule {
     static forRoot(configurationFactory) {
         return {
             ngModule: ApiModule,
@@ -7642,7 +7643,7 @@ let ApiModule$1 = class ApiModule {
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: ApiModule }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule }); }
 };
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule$1, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule$3, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -7650,7 +7651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     exports: [],
                     providers: []
                 }]
-        }], ctorParameters: () => [{ type: ApiModule$1, decorators: [{
+        }], ctorParameters: () => [{ type: ApiModule$3, decorators: [{
                     type: Optional
                 }, {
                     type: SkipSelf
@@ -10923,7 +10924,7 @@ class SmartformwidgetComponent {
         this.valueCleared = output();
         this.smartFormWidgetType = SmartFormWidgetType;
         this.hasError = false;
-        this.toHighlight = '';
+        this.toHighlight = "";
         this.isEnterPressed = false;
         this.isDatePickerRequired = false;
         this.SmartWidgetHintPosition = SmartWidgetHintPositionEnum;
@@ -10959,10 +10960,14 @@ class SmartformwidgetComponent {
             : [];
     }
     ngOnInit() {
-        this.form().valueChanges.pipe(takeUntil(this._destroy$)).subscribe(() => {
+        this.form()
+            .valueChanges.pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
             this.getErrorMessage(this.widgetInstance);
         });
-        this.onBlur()?.pipe(takeUntil(this._destroy$)).subscribe(() => {
+        this.onBlur()
+            ?.pipe(takeUntil(this._destroy$))
+            .subscribe(() => {
             this.getErrorMessage(this.widgetInstance);
         });
         // handle initial error message from server
@@ -10972,8 +10977,8 @@ class SmartformwidgetComponent {
             if (this.widgetInstance.indicator?.indicatorLength) {
                 this.indicatorItems = new Array(this.widgetInstance.indicator.indicatorLength);
             }
-            this.form().controls[this.widgetInstance.indicator.indicateProperty].valueChanges
-                .pipe(takeUntil(this._destroy$))
+            this.form()
+                .controls[this.widgetInstance.indicator.indicateProperty].valueChanges.pipe(takeUntil(this._destroy$))
                 .subscribe((value) => {
                 if (this.widgetInstance.type === SmartFormWidgetType.INDICATOR) {
                     this.widgetInstance.indicator.indicatorValue =
@@ -10986,20 +10991,21 @@ class SmartformwidgetComponent {
             if (this.onValueChange == undefined) {
                 this.onValueChange = new Subject();
             }
-            this.filteredOptions = this.onValueChange.pipe(startWith(''), map((value) => this._filter(value || '')), takeUntil(this._destroy$));
+            this.filteredOptions = this.onValueChange.pipe(startWith(""), map((value) => this._filter(value || "")), takeUntil(this._destroy$));
         }
         if (this.widgetInstance.type === SmartFormWidgetType.YOUTUBE_PLAYER) {
             let videoId = this.parseYoutubeUrl(this.widgetInstance.link);
             if (videoId)
                 this.widgetInstance.videoId = videoId;
-            const tag = document.createElement('script');
-            tag.src = 'https://www.youtube.com/iframe_api';
+            const tag = document.createElement("script");
+            tag.src = "https://www.youtube.com/iframe_api";
             document.body.appendChild(tag);
         }
-        let formControls = Object.keys(this.form().controls).filter((key) => key === this.widgetInstance.key || key.startsWith(`${this.widgetInstance.key}.`));
+        let formControls = Object.keys(this.form().controls).filter((key) => key === this.widgetInstance.key ||
+            key.startsWith(`${this.widgetInstance.key}.`));
         formControls.map((key) => {
-            this.form().controls[key].valueChanges
-                .pipe(distinctUntilChanged(), takeUntil(this._destroy$))
+            this.form()
+                .controls[key].valueChanges.pipe(distinctUntilChanged(), takeUntil(this._destroy$))
                 .subscribe((value) => {
                 if (this.widgetInstance.type !== SmartFormWidgetType.TEXT_FIELD_CHIPS &&
                     this.widgetInstance.type !== SmartFormWidgetType.TEXT_FIELD_LOOKUP) {
@@ -11017,11 +11023,11 @@ class SmartformwidgetComponent {
         return this.widgetInstance.type === SmartFormWidgetType.SELECT ||
             this.widgetInstance.type === SmartFormWidgetType.SELECT_MULTIPLE ||
             this.widgetInstance.type === SmartFormWidgetType.RADIO_BUTTON
-            ? 'selection'
-            : 'basic';
+            ? "selection"
+            : "basic";
     }
     parseYoutubeUrl(url) {
-        url = url.replace('/shorts/', '/watch?v=');
+        url = url.replace("/shorts/", "/watch?v=");
         var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/;
         var match = url.match(regExp);
         return match && match[7].length == 11 ? match[7] : false;
@@ -11054,13 +11060,13 @@ class SmartformwidgetComponent {
         if (this.widgetInstance.type === SmartFormWidgetType.DATE_TIME_PICKER) {
             this.isDatePickerRequired = !!this.widgetInstance.validators?.some((smartValidator) => smartValidator.validator === Validators.required);
             this.hasCreated = true;
-            this.form().controls[this.widgetInstance.key].valueChanges
-                .pipe(takeUntil(this._destroy$))
+            this.form()
+                .controls[this.widgetInstance.key].valueChanges.pipe(takeUntil(this._destroy$))
                 .subscribe((_date) => {
                 this.handleDateChanged(_date);
             });
-            this.form().controls[`${this.widgetInstance.key}-time`].valueChanges
-                .pipe(takeUntil(this._destroy$))
+            this.form()
+                .controls[`${this.widgetInstance.key}-time`].valueChanges.pipe(takeUntil(this._destroy$))
                 .subscribe((timeValue) => {
                 this.handleTimeChanged(timeValue);
             });
@@ -11075,15 +11081,15 @@ class SmartformwidgetComponent {
             timeFormControl.hasValidator(Validators.required) &&
             !_date) {
             timeFormControl.removeValidators(Validators.required);
-            timeFormControl.setValue('');
+            timeFormControl.setValue("");
         }
         else if (!this.isDatePickerRequired &&
             !timeFormControl.hasValidator(Validators.required) &&
             _date) {
             timeFormControl.addValidators(Validators.required);
-            if (timeFormControl.value === '') {
+            if (timeFormControl.value === "") {
                 const now = new Date();
-                timeFormControl.setValue(now.getHours() + ':' + now.getMinutes());
+                timeFormControl.setValue(now.getHours() + ":" + now.getMinutes());
                 timeFormControl.markAsUntouched();
             }
         }
@@ -11094,7 +11100,7 @@ class SmartformwidgetComponent {
             this.hasJustChanged = false;
             return;
         }
-        const timeValue = timeFormControl.value || '00:00';
+        const timeValue = timeFormControl.value || "00:00";
         this.hasJustChanged = true;
         if (this.widgetInstance.type === SmartFormWidgetType.DATE_TIME_PICKER) {
             this.setDateFormControl(dateFormControl, _date, timeValue);
@@ -11109,7 +11115,7 @@ class SmartformwidgetComponent {
             dateFormControl.hasValidator(Validators.required) &&
             !timeValue) {
             dateFormControl.removeValidators(Validators.required);
-            dateFormControl.setValue(dateFormControl.value ?? '');
+            dateFormControl.setValue(dateFormControl.value ?? "");
         }
         else if (!this.isDatePickerRequired &&
             !dateFormControl.hasValidator(Validators.required) &&
@@ -11181,19 +11187,21 @@ class SmartformwidgetComponent {
                 style: {},
             };
         }
-        if (!('width' in this.widgetInstance.style.style) && 'minWidth' in this.widgetInstance) {
-            this.widgetInstance.style.style['width'] = `${this.widgetInstance.minWidth}px`;
+        if (!("width" in this.widgetInstance.style.style) &&
+            "minWidth" in this.widgetInstance) {
+            this.widgetInstance.style.style["width"] =
+                `${this.widgetInstance.minWidth}px`;
         }
         return SmartStyleUtility.getNgStyles(this.widgetInstance.style);
     }
     getLabelNgClass() {
-        if ('labelStyle' in this.widgetInstance) {
+        if ("labelStyle" in this.widgetInstance) {
             return SmartStyleUtility.getNgClasses(this.widgetInstance.labelStyle);
         }
         return {};
     }
     getLabelStyle() {
-        if ('labelStyle' in this.widgetInstance) {
+        if ("labelStyle" in this.widgetInstance) {
             return SmartStyleUtility.getNgStyles(this.widgetInstance.labelStyle);
         }
         return {};
@@ -11220,7 +11228,7 @@ class SmartformwidgetComponent {
         }
         const insertOpCount = change.delta.ops?.filter((it) => !!it.insert).length ?? 0;
         if (insertOpCount > 0) {
-            this.quill?.quillEditor.setContents(change.oldDelta, 'silent');
+            this.quill?.quillEditor.setContents(change.oldDelta, "silent");
         }
     }
     /**
@@ -11250,18 +11258,18 @@ class SmartformwidgetComponent {
             return maxLength - this.quill.quillEditor.getText().length;
         }
         // fallback to the raw HTML content:
-        return maxLength - this.form().controls[this.widgetInstance.key].value.length;
+        return (maxLength - this.form().controls[this.widgetInstance.key].value.length);
     }
     add(event) {
         if (this.widgetInstance.type !== SmartFormWidgetType.TEXT_FIELD_CHIPS) {
             return;
         }
-        const value = (event.value || '').trim();
+        const value = (event.value || "").trim();
         if (this.setTextFieldChipsValue(value)) {
             const valueChange = {
                 key: this.widgetInstance.key,
                 value: this.form().controls[this.widgetInstance.key].value,
-                kind: 'selection',
+                kind: "selection",
             };
             this.sophisticatedValueChange().next(valueChange);
         }
@@ -11279,7 +11287,7 @@ class SmartformwidgetComponent {
                 const valueChange = {
                     key: this.widgetInstance.key,
                     value: this.form().controls[this.widgetInstance.key].value,
-                    kind: 'selection',
+                    kind: "selection",
                 };
                 this.sophisticatedValueChange().next(valueChange);
             }
@@ -11293,7 +11301,7 @@ class SmartformwidgetComponent {
                 const valueChange = {
                     key: widgetInstance.key,
                     value: this.form().controls[widgetInstance.key].value,
-                    kind: 'selection',
+                    kind: "selection",
                 };
                 this.sophisticatedValueChange().next(valueChange);
             }
@@ -11324,16 +11332,16 @@ class SmartformwidgetComponent {
         if (this.widgetInstance.type !== SmartFormWidgetType.CONTAINER &&
             this.widgetInstance.type !== SmartFormWidgetType.CHECK_BOX &&
             this.widgetInstance.type !== SmartFormWidgetType.RADIO_BUTTON) {
-            return '';
+            return "";
         }
         if (this.widgetInstance.direction === undefined) {
-            return 'direction-row';
+            return "direction-row";
         }
         else if (this.widgetInstance.direction === SmartFormWidgetDirection.COL) {
-            return 'direction-col';
+            return "direction-col";
         }
         else {
-            return 'direction-row';
+            return "direction-row";
         }
     }
     smartFormTextFieldButtonIconPosition() {
@@ -11344,9 +11352,9 @@ class SmartformwidgetComponent {
     }
     getWidgetLabel(widget) {
         if (widget.type === SmartFormWidgetType.CONTAINER) {
-            return '';
+            return "";
         }
-        if (widget.label === '') {
+        if (widget.label === "") {
             return widget.label;
         }
         let isRequired = false;
@@ -11362,15 +11370,17 @@ class SmartformwidgetComponent {
             widget.type !== SmartFormWidgetType.DIVIDER &&
             widget.type !== SmartFormWidgetType.BUTTON &&
             widget.type !== SmartFormWidgetType.COMPONENT) {
-            isRequired = widget.validators?.length ? this.fieldIsRequired() && !!widget.showLabel : false;
+            isRequired = widget.validators?.length
+                ? this.fieldIsRequired() && !!widget.showLabel
+                : false;
         }
         else if (widget.type === SmartFormWidgetType.LABEL) {
             isRequired = widget.markAsRequired ? true : false;
         }
-        return `${widget.label}${isRequired ? ' *' : ''}`;
+        return `${widget.label}${isRequired ? " *" : ""}`;
     }
     sanitizeHtml(value) {
-        let safeValue = value ?? '';
+        let safeValue = value ?? "";
         return this.sanitizer.bypassSecurityTrustHtml(safeValue);
     }
     isRequired() {
@@ -11451,7 +11461,8 @@ class SmartformwidgetComponent {
             widgetInstance.type !== SmartFormWidgetType.COMPONENT &&
             widgetInstance.type !== SmartFormWidgetType.YOUTUBE_PLAYER) {
             const form = this.form();
-            if (form.controls[widgetInstance.key] && form.controls[widgetInstance.key].errors) {
+            if (form.controls[widgetInstance.key] &&
+                form.controls[widgetInstance.key].errors) {
                 if (this.errorKey &&
                     !Object.keys(form.controls[widgetInstance.key].errors).includes(this.errorKey)) {
                     this.errorKey = undefined;
@@ -11496,11 +11507,11 @@ class SmartformwidgetComponent {
                 return `smart-indicator-${index}`;
             }
         }
-        return '';
+        return "";
     }
     getIndicatorStatusLabelColor() {
         if (this.widgetInstance.type !== SmartFormWidgetType.INDICATOR) {
-            return '';
+            return "";
         }
         let value = Math.floor(this.widgetInstance.indicator.indicatorValue);
         if (value > this.widgetInstance.indicator.indicatorLength - 1) {
@@ -11510,7 +11521,7 @@ class SmartformwidgetComponent {
     }
     getIndicatorStatusLabel() {
         if (this.widgetInstance.type !== SmartFormWidgetType.INDICATOR) {
-            return '';
+            return "";
         }
         let value = Math.floor(this.widgetInstance.indicator.indicatorValue);
         if (value > this.widgetInstance.indicator.indicatorLength - 1) {
@@ -11528,41 +11539,44 @@ class SmartformwidgetComponent {
         let params = {
             ...event.uiAction.params,
             _files: event.files,
-            param: '_files',
+            param: "_files",
         };
         event.uiAction.params = params;
         this.smartComponent.executeUiAction(event.uiAction);
     }
     executeUiAction(uiAction) {
         let type = this.widgetInstance.type;
-        if (type !== SmartFormWidgetType.MULTI_FILE_UPLOADER && type !== SmartFormWidgetType.DIV) {
+        if (type !== SmartFormWidgetType.MULTI_FILE_UPLOADER &&
+            type !== SmartFormWidgetType.DIV) {
             return;
         }
         this.smartComponent.executeUiAction(uiAction);
     }
     getButtonType(descriptor) {
         switch (descriptor.type) {
-            case 'NORMAL':
-                return 'mat-mdc-button';
-            case 'FLAT':
-                return 'mat-mdc-flat-button';
-            case 'RAISED':
-                return 'mat-mdc-raised-button';
-            case 'STROKED':
-                return 'mat-mdc-stroked-button';
-            case 'ICON':
-                return 'mat-mdc-icon-button';
-            case 'MINI_FAB':
-                return 'mat-mdc-mini-fab';
-            case 'FAB':
-                return 'mat-mdc-fab';
+            case "NORMAL":
+                return "mat-mdc-button";
+            case "FLAT":
+                return "mat-mdc-flat-button";
+            case "RAISED":
+                return "mat-mdc-raised-button";
+            case "STROKED":
+                return "mat-mdc-stroked-button";
+            case "ICON":
+                return "mat-mdc-icon-button";
+            case "MINI_FAB":
+                return "mat-mdc-mini-fab";
+            case "FAB":
+                return "mat-mdc-fab";
             default:
                 console.log(`Unhandled action button type case: ${descriptor.type}`);
                 return `mat-button`;
         }
     }
     isOnlyIcon(descriptor) {
-        return (descriptor.type === 'ICON' || descriptor.type === 'MINI_FAB' || descriptor.type === 'FAB');
+        return (descriptor.type === "ICON" ||
+            descriptor.type === "MINI_FAB" ||
+            descriptor.type === "FAB");
     }
     onButtonClicked(instance) {
         if (instance.uiAction) {
@@ -11576,7 +11590,7 @@ class SmartformwidgetComponent {
         let filterValue = value.target?.value;
         this.toHighlight = filterValue;
         if (!filterValue) {
-            filterValue = '';
+            filterValue = "";
             this.toHighlight = filterValue;
         }
         filterValue = filterValue.toLowerCase();
@@ -11609,12 +11623,12 @@ class SmartformwidgetComponent {
         });
     }
     handleYearMonthPicked(yearMonthValue) {
-        this.setDateFormControl(this.form().controls[this.widgetInstance.key], yearMonthValue, '00:00');
+        this.setDateFormControl(this.form().controls[this.widgetInstance.key], yearMonthValue, "00:00");
     }
     compareItems(o1, o2) {
         function convert(obj) {
-            if (obj && typeof obj === 'string') {
-                return obj.replace(/\.v[0-9]+$/, '');
+            if (obj && typeof obj === "string") {
+                return obj.replace(/\.v[0-9]+$/, "");
             }
             return obj;
         }
@@ -11625,8 +11639,8 @@ class SmartformwidgetComponent {
         return deepEqual(v1, v2);
     }
     truncateUri(uri) {
-        if (uri && typeof uri === 'string') {
-            return uri.replace(/\.v[0-9]+$/, '');
+        if (uri && typeof uri === "string") {
+            return uri.replace(/\.v[0-9]+$/, "");
         }
         return uri;
     }
@@ -11645,7 +11659,8 @@ class SmartformwidgetComponent {
         // Only seven of the widget interfaces declare the field, so the union does not.
         const toolbarId = this.widgetInstance.toolbarId;
         const present = toolbarId !== undefined && toolbarId !== null;
-        if (present && !TYPES_WITH_TOOLBAR_SLOT.includes(this.widgetInstance.type)) {
+        if (present &&
+            !TYPES_WITH_TOOLBAR_SLOT.includes(this.widgetInstance.type)) {
             // Diagnostic, not a rule: the rule is the toolbarId. This says the widget's template
             // has nowhere to put it — where it should go is the 7.1 widget breakup's question.
             console.warn(`Widget '${this.widgetInstance.key}' of type ${this.widgetInstance.type} has a ` +
@@ -11654,12 +11669,12 @@ class SmartformwidgetComponent {
         return present;
     }
     getChipsValue(value) {
-        if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
-            if ('name' in value) {
-                return value['name'];
+        if (typeof value === "object" && !Array.isArray(value) && value !== null) {
+            if ("name" in value) {
+                return value["name"];
             }
-            if ('displayValue' in value) {
-                return value['displayValue'];
+            if ("displayValue" in value) {
+                return value["displayValue"];
             }
         }
         return value;
@@ -11680,15 +11695,15 @@ class SmartformwidgetComponent {
     }
     get clearButtonDescriptor() {
         return {
-            title: '',
-            color: 'primary',
+            title: "",
+            color: "primary",
             type: UiActionButtonType.RAISED,
-            icon: 'close',
+            icon: "close",
             iconPosition: IconPosition.PRE,
         };
     }
     clearField(key) {
-        this.form().controls[key].setValue('');
+        this.form().controls[key].setValue("");
         this.onBlur()?.next(this.widgetInstance);
     }
     onTextareaChange(value) {
@@ -11699,7 +11714,7 @@ class SmartformwidgetComponent {
             return;
         }
         requestAnimationFrame(() => {
-            ta.style.height = 'auto';
+            ta.style.height = "auto";
             ta.style.height = `${ta.scrollHeight}px`;
         });
     }
@@ -11716,7 +11731,7 @@ class SmartformwidgetComponent {
             return null;
         let parsed = new Date(value);
         if (isNaN(parsed.getTime())) {
-            console.error('Invalid Date:', value);
+            console.error("Invalid Date:", value);
             return null;
         }
         return new Date(parsed.getFullYear(), parsed.getMonth(), parsed.getDate(), parsed.getHours(), parsed.getMinutes(), parsed.getSeconds());
@@ -11740,29 +11755,76 @@ class SmartformwidgetComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartformwidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smartformwidget', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule, NgClass, TrackCapsDirective, NgStyle, MatHint, MatFormField, MatLabel, MatInput, NgxMaskDirective, MatAutocompleteTrigger, MatIconButton, MatSuffix, MatIcon, MatAutocomplete, MatOption, MatPrefix, SmartIconComponent, UiActionButtonComponent, UiActionToolbarComponent, MatButton, MatChipGrid, MatChipRow, MatChipRemove, MatChipInput, MatChip, CdkTextareaAutosize, MatCheckbox, MatRadioGroup, MatRadioButton, MatDatepickerToggle, MatDatepicker, MatDatepickerInput, SmartMonthPickerComponent, MatSelect, MatOptgroup, MatSlideToggle, SmartVoiceRecorderComponent, SmartFileEditorComponent, SmartMultiFileEditorComponent, SmartHtmlWidgetComponent, QuillEditorComponent, SortableWidgetComponent, YouTubePlayer, AsyncPipe, HighlightPipe], 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"] }]
+            args: [{ selector: "smartformwidget", encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        NgClass,
+                        TrackCapsDirective,
+                        NgStyle,
+                        MatHint,
+                        MatFormField,
+                        MatLabel,
+                        MatInput,
+                        NgxMaskDirective,
+                        MatAutocompleteTrigger,
+                        MatIconButton,
+                        MatSuffix,
+                        MatIcon,
+                        MatAutocomplete,
+                        MatOption,
+                        MatPrefix,
+                        SmartIconComponent,
+                        UiActionButtonComponent,
+                        UiActionToolbarComponent,
+                        MatButton,
+                        MatChipGrid,
+                        MatChipRow,
+                        MatChipRemove,
+                        MatChipInput,
+                        MatChip,
+                        CdkTextareaAutosize,
+                        MatCheckbox,
+                        MatRadioGroup,
+                        MatRadioButton,
+                        MatDatepickerToggle,
+                        MatDatepicker,
+                        MatDatepickerInput,
+                        SmartMonthPickerComponent,
+                        MatSelect,
+                        MatOptgroup,
+                        MatSlideToggle,
+                        SmartVoiceRecorderComponent,
+                        SmartFileEditorComponent,
+                        SmartMultiFileEditorComponent,
+                        SmartHtmlWidgetComponent,
+                        QuillEditorComponent,
+                        SortableWidgetComponent,
+                        YouTubePlayer,
+                        AsyncPipe,
+                        HighlightPipe,
+                    ], 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"] }]
         }], ctorParameters: () => [], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], widgetInstance: [{
                 type: Input
             }], onBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "onBlur", required: false }] }], onValueChange: [{
                 type: Input
             }], labelColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelColor", required: false }] }], sophisticatedValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "sophisticatedValueChange", required: true }] }], blurSophisticatedValueChange: [{ type: i0.Input, args: [{ isSignal: true, alias: "blurSophisticatedValueChange", required: true }] }], valueCleared: [{ type: i0.Output, args: ["valueCleared"] }], chipInputChild: [{
                 type: ViewChild,
-                args: ['chipInput']
+                args: ["chipInput"]
             }], customComponentVcRef: [{
                 type: ViewChild,
-                args: ['customComponent', { read: ViewContainerRef }]
+                args: ["customComponent", { read: ViewContainerRef }]
             }], quill: [{
                 type: ViewChild,
-                args: ['quillEditor']
+                args: ["quillEditor"]
             }], sb4Textarea: [{
                 type: ViewChild,
-                args: ['sb4Textarea']
+                args: ["sb4Textarea"]
             }], dateInputChild: [{
                 type: ViewChild,
-                args: ['dateInput']
+                args: ["dateInput"]
             }], timeInputChild: [{
                 type: ViewChild,
-                args: ['timeInput']
+                args: ["timeInput"]
             }] } });
 
 class SmartformComponent {
@@ -18405,7 +18467,7 @@ var GridViewDescriptorKindEnum;
 })(GridViewDescriptorKindEnum || (GridViewDescriptorKindEnum = {}));
 ;
 
-class ApiModule {
+let ApiModule$2 = class ApiModule {
     static forRoot(configurationFactory) {
         return {
             ngModule: ApiModule,
@@ -18424,8 +18486,8 @@ class ApiModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule, deps: [{ token: ApiModule, optional: true, skipSelf: true }, { token: i1.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
     static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: ApiModule }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule, decorators: [{
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule$2, decorators: [{
             type: NgModule,
             args: [{
                     imports: [],
@@ -18433,7 +18495,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     exports: [],
                     providers: []
                 }]
-        }], ctorParameters: () => [{ type: ApiModule, decorators: [{
+        }], ctorParameters: () => [{ type: ApiModule$2, decorators: [{
                     type: Optional
                 }, {
                     type: SkipSelf
@@ -20553,6 +20615,42 @@ var GeoMapTextType;
     GeoMapTextType["HTML"] = "HTML";
 })(GeoMapTextType || (GeoMapTextType = {}));
 
+let ApiModule$1 = class ApiModule {
+    static forRoot(configurationFactory) {
+        return {
+            ngModule: ApiModule,
+            providers: [{ provide: Configuration$1, useFactory: configurationFactory }]
+        };
+    }
+    constructor(parentModule, http) {
+        if (parentModule) {
+            throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
+        }
+        if (!http) {
+            throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
+                'See also https://github.com/angular/angular/issues/20575');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule, deps: [{ token: ApiModule, optional: true, skipSelf: true }, { token: i1.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: ApiModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule }); }
+};
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule$1, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [],
+                    exports: [],
+                    providers: []
+                }]
+        }], ctorParameters: () => [{ type: ApiModule$1, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }, { type: i1.HttpClient, decorators: [{
+                    type: Optional
+                }] }] });
+
 class AbstractMap {
     constructor(el, cd, itemFactory) {
         this.el = el;
@@ -21799,6 +21897,42 @@ const DrawTime = {
     AfterDraw: 'afterDraw'
 };
 
+class ApiModule {
+    static forRoot(configurationFactory) {
+        return {
+            ngModule: ApiModule,
+            providers: [{ provide: Configuration, useFactory: configurationFactory }]
+        };
+    }
+    constructor(parentModule, http) {
+        if (parentModule) {
+            throw new Error('ApiModule is already loaded. Import in your base AppModule only.');
+        }
+        if (!http) {
+            throw new Error('You need to import the HttpClientModule in your AppModule! \n' +
+                'See also https://github.com/angular/angular/issues/20575');
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule, deps: [{ token: ApiModule, optional: true, skipSelf: true }, { token: i1.HttpClient, optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: ApiModule }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ApiModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [],
+                    declarations: [],
+                    exports: [],
+                    providers: []
+                }]
+        }], ctorParameters: () => [{ type: ApiModule, decorators: [{
+                    type: Optional
+                }, {
+                    type: SkipSelf
+                }] }, { type: i1.HttpClient, decorators: [{
+                    type: Optional
+                }] }] });
+
 function deepMerge(target, source) {
     for (const key of Object.keys(source)) {
         if (source[key] instanceof Object && target[key]) {
@@ -22137,7 +22271,7 @@ class SmartDiagramComponent {
         this.elementSelect = output();
         this.canvasClick = output();
         this.dataClick = output();
-        this.aspectClass = 'default-aspect-ratio';
+        this.aspectClass = "default-aspect-ratio";
         this.viewInitialized = false;
         /** The screen component this diagram belongs to; the source of its uuid. (ADR-0005) */
         this.smartComponent = injectSmartComponent();
@@ -22158,14 +22292,16 @@ class SmartDiagramComponent {
         Chart.register(...registerables);
         Chart.register(AnnotationPlugin);
         Chart.register(ZoomPlugin);
+        Chart.register(ChartDataLabels);
+        Chart.defaults.set("plugins.datalabels", { display: false });
     }
     ngOnChanges(changes) {
-        if (changes['diagramModel']) {
-            this.diagramModel = changes['diagramModel'].currentValue;
+        if (changes["diagramModel"]) {
+            this.diagramModel = changes["diagramModel"].currentValue;
             this.setUp();
         }
-        if (changes['uuid'] && this.uuid !== changes['uuid'].currentValue) {
-            this.uuid = changes['uuid'].currentValue;
+        if (changes["uuid"] && this.uuid !== changes["uuid"].currentValue) {
+            this.uuid = changes["uuid"].currentValue;
             this.load();
         }
     }
@@ -22199,7 +22335,9 @@ class SmartDiagramComponent {
             return;
         }
         let options = undefined;
-        const type = !!this.diagramModel.descriptor?.type ? this.diagramModel.descriptor.type : '';
+        const type = !!this.diagramModel.descriptor?.type
+            ? this.diagramModel.descriptor.type
+            : "";
         const factory = this.diagramOptionProvider.getFactory(type);
         this.type = factory.chartJsType;
         options = factory.createOptions(this.diagramModel.diagramData);
@@ -22237,10 +22375,14 @@ class SmartDiagramComponent {
     }
     onCanvasClick(event) {
         if (this.chart) {
-            const element = this.chart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, false);
-            const dataset = this.chart.getElementsAtEventForMode(event, 'dataset', { intersect: true }, false);
+            const element = this.chart.getElementsAtEventForMode(event, "nearest", { intersect: true }, false);
+            const dataset = this.chart.getElementsAtEventForMode(event, "dataset", { intersect: true }, false);
             if (element && element[0] && dataset) {
-                this.onDataSelect({ originalEvent: event, element: element[0], dataset: dataset });
+                this.onDataSelect({
+                    originalEvent: event,
+                    element: element[0],
+                    dataset: dataset,
+                });
             }
         }
         this.handleChartClick(event);
@@ -22253,17 +22395,30 @@ class SmartDiagramComponent {
                 legend: {
                     display: descriptor.showLegendForChart ?? true,
                 },
+                datalabels: {
+                    display: descriptor.showDataLabels ?? true,
+                    anchor: "end",
+                    align: "end",
+                    clamp: true,
+                    formatter: (value) => {
+                        // scatter/bubble values are objects {x, y}
+                        if (value !== null && typeof value === "object") {
+                            return value.y ?? value.r ?? "";
+                        }
+                        return value;
+                    },
+                },
                 ...(descriptor.title
                     ? {
                         title: {
                             display: true,
-                            text: descriptor.title.content ?? '',
+                            text: descriptor.title.content ?? "",
                             color: descriptor.title.color
                                 ? `rgba(${descriptor.title.color.red ?? 0},
                        ${descriptor.title.color.green ?? 0},
                        ${descriptor.title.color.blue ?? 0},
                        ${descriptor.title.color.alpha ?? 1})`
-                                : '#000000ff',
+                                : "#000000ff",
                             font: {
                                 size: descriptor.title.size ?? undefined,
                                 weight: descriptor.title.weight ?? undefined,
@@ -22273,6 +22428,26 @@ class SmartDiagramComponent {
                         },
                     }
                     : {}),
+                ...(descriptor.subTitle
+                    ? {
+                        subtitle: {
+                            display: true,
+                            text: descriptor.subTitle.content ?? "",
+                            color: descriptor.subTitle.color
+                                ? `rgba(${descriptor.subTitle.color.red ?? 0},
+                     ${descriptor.subTitle.color.green ?? 0},
+                     ${descriptor.subTitle.color.blue ?? 0},
+                     ${descriptor.subTitle.color.alpha ?? 1})`
+                                : "#000000ff",
+                            font: {
+                                size: descriptor.subTitle.size ?? undefined,
+                                weight: descriptor.subTitle.weight ?? undefined,
+                                style: descriptor.subTitle.style ?? undefined,
+                                family: descriptor.subTitle.family ?? undefined,
+                            },
+                        },
+                    }
+                    : {}),
             },
             scales: {},
         };
@@ -22312,7 +22487,8 @@ class SmartDiagramComponent {
         if (descriptor.shapes) {
             descriptor.shapes.forEach((shape, index) => {
                 options.plugins.annotation = options.plugins.annotation || {};
-                options.plugins.annotation.annotations = options.plugins.annotation.annotations || {};
+                options.plugins.annotation.annotations =
+                    options.plugins.annotation.annotations || {};
                 let borderColor = `rgba(
          ${shape.borderColor?.red ?? 0},
          ${shape.borderColor?.green ?? 0},
@@ -22336,7 +22512,7 @@ class SmartDiagramComponent {
                     borderDash = undefined;
                 }
                 const baseAnnotation = {
-                    type: shape.shapeType ?? 'line',
+                    type: shape.shapeType ?? "line",
                     backgroundColor: backgroundColor ?? undefined,
                     borderColor: borderColor ?? undefined,
                     borderWidth: shape.borderWidth ?? 1,
@@ -22344,9 +22520,9 @@ class SmartDiagramComponent {
                     drawTime: shape.drawTime ?? undefined,
                 };
                 switch (shape.shapeType) {
-                    case 'box':
-                    case 'line':
-                    case 'ellipse':
+                    case "box":
+                    case "line":
+                    case "ellipse":
                         options.plugins.annotation.annotations[`shape${index}`] = {
                             ...baseAnnotation,
                             xMin: shape.xMin ?? undefined,
@@ -22355,7 +22531,7 @@ class SmartDiagramComponent {
                             yMax: shape.yMax ?? undefined,
                         };
                         break;
-                    case 'label':
+                    case "label":
                         options.plugins.annotation.annotations[`shape${index}`] = {
                             ...baseAnnotation,
                             xValue: shape.xMin ?? undefined,
@@ -22368,12 +22544,12 @@ class SmartDiagramComponent {
                                 weight: shape.labelText?.weight ?? undefined,
                                 style: shape.labelText?.style ?? undefined,
                             },
-                            backgroundColor: 'transparent',
-                            borderColor: 'transparent',
+                            backgroundColor: "transparent",
+                            borderColor: "transparent",
                         };
                         break;
-                    case 'point':
-                    case 'polygon':
+                    case "point":
+                    case "polygon":
                         options.plugins.annotation.annotations[`shape${index}`] = {
                             ...baseAnnotation,
                             xValue: shape.xMin ?? undefined,
@@ -22393,13 +22569,13 @@ class SmartDiagramComponent {
         ${descriptor.backgroundColor?.green ?? 0},
         ${descriptor.backgroundColor?.blue ?? 0},
         ${descriptor.backgroundColor?.alpha ?? 1})`;
-            let id = 'customCanvasBackgroundColor';
+            let id = "customCanvasBackgroundColor";
             const plugin = {
                 id: id,
                 beforeDraw: (chart, args, options) => {
                     const { ctx, chartArea } = chart;
                     ctx.save();
-                    ctx.globalCompositeOperation = 'destination-over';
+                    ctx.globalCompositeOperation = "destination-over";
                     ctx.fillStyle = backgroundColor;
                     ctx.fillRect(chartArea.left, chartArea.top, chartArea.right - chartArea.left, chartArea.bottom - chartArea.top);
                     ctx.restore();
@@ -22424,7 +22600,7 @@ class SmartDiagramComponent {
         const canvas = event.target;
         const chart = Chart.getChart(canvas);
         if (chart) {
-            const elements = chart.getElementsAtEventForMode(event, 'nearest', { intersect: true }, false);
+            const elements = chart.getElementsAtEventForMode(event, "nearest", { intersect: true }, false);
             if (elements.length === 0) {
                 return;
             }
@@ -22482,14 +22658,14 @@ class SmartDiagramComponent {
     }
     applyChartClass() {
         switch (this.type) {
-            case 'pie':
-            case 'doughnut':
-            case 'polarArea':
-            case 'radar':
-                this.aspectClass = 'pie-aspect-ratio';
+            case "pie":
+            case "doughnut":
+            case "polarArea":
+            case "radar":
+                this.aspectClass = "pie-aspect-ratio";
                 break;
             default:
-                this.aspectClass = 'default-aspect-ratio';
+                this.aspectClass = "default-aspect-ratio";
         }
     }
     calcStyle(style) {
@@ -22500,10 +22676,10 @@ class SmartDiagramComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartDiagramComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-diagram', imports: [NgStyle], template: "<div\r\n  class=\"chart-host\"\r\n  [class]=\"aspectClass\"\r\n  [ngStyle]=\"calcStyle($safeNavigationMigration(diagramModel?.descriptor?.style))\"\r\n>\r\n  <div class=\"chart-container\">\r\n    <canvas #chartCanvas role=\"img\" (click)=\"onCanvasClick($event)\"></canvas>\r\n  </div>\r\n</div>\r\n", styles: [".chart-host{display:flex}.chart-container{position:relative}.default-aspect-ratio .chart-container{width:100%;aspect-ratio:1.78}.pie-aspect-ratio .chart-container{width:100%;aspect-ratio:1}\n"] }]
+            args: [{ selector: "smart-diagram", imports: [NgStyle], template: "<div\r\n  class=\"chart-host\"\r\n  [class]=\"aspectClass\"\r\n  [ngStyle]=\"calcStyle($safeNavigationMigration(diagramModel?.descriptor?.style))\"\r\n>\r\n  <div class=\"chart-container\">\r\n    <canvas #chartCanvas role=\"img\" (click)=\"onCanvasClick($event)\"></canvas>\r\n  </div>\r\n</div>\r\n", styles: [".chart-host{display:flex}.chart-container{position:relative}.default-aspect-ratio .chart-container{width:100%;aspect-ratio:1.78}.pie-aspect-ratio .chart-container{width:100%;aspect-ratio:1}\n"] }]
         }], ctorParameters: () => [], propDecorators: { chartCanvas: [{
                 type: ViewChild,
-                args: ['chartCanvas']
+                args: ["chartCanvas"]
             }], uuid: [{
                 type: Input
             }], identifier: [{ type: i0.Input, args: [{ isSignal: true, alias: "identifier", required: true }] }], diagramModel: [{
@@ -23256,13 +23432,21 @@ class ExpressionEditorDialogComponent {
         });
     }
     ngAfterViewInit() {
-        this.formComponent.sophisticatedValueChange
+        // this.formComponent.sophisticatedValueChange
+        //   .pipe(takeUntil(this._destroy$))
+        //   .subscribe((change) => {
+        //     if (change.key === "expressionData.currentOperation") {
+        //       const submittedForm = this.formComponent.submitForm(false);
+        //       this.service.onSave(submittedForm.componentModel.data);
+        //     }
+        //   });
+        this.formComponent.blurSophisticatedValueChange
             .pipe(takeUntil(this._destroy$))
             .subscribe((change) => {
-            if (change.key === 'expressionData.currentOperation') {
-                const submittedForm = this.formComponent.submitForm(false);
-                this.service.onSave(submittedForm.componentModel.data);
-            }
+            // if (change.key === "expressionData.currentOperation") {
+            const submittedForm = this.formComponent.submitForm(false);
+            this.service.onSave(submittedForm.componentModel.data);
+            // }
         });
     }
     ngOnDestroy() {
@@ -23270,6 +23454,8 @@ class ExpressionEditorDialogComponent {
         this._destroy$.complete();
     }
     cancel() {
+        const submittedForm = this.formComponent.submitForm(false);
+        this.service.onSave(submittedForm.componentModel.data);
         this.service.closeDialog(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExpressionEditorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -23277,10 +23463,10 @@ class ExpressionEditorDialogComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExpressionEditorDialogComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-expression-editor-dialog', imports: [SmartformComponent, MatButton], template: "<smartform #form [smartForm]=\"smartForm\"></smartform>\r\n<div class=\"button-container\">\r\n  <button (click)=\"cancel()\" mat-raised-button color=\"secondary\">Bez\u00E1r\u00E1s</button>\r\n</div>", styles: [".button-container{display:flex;justify-content:flex-end;gap:1rem}:host{display:flex;flex-direction:column;padding:1rem}:host::ng-deep h4{margin:0}:host::ng-deep .mat-mdc-form-field-infix:has(input){padding:0}\n"] }]
+            args: [{ selector: "lib-expression-editor-dialog", imports: [SmartformComponent, MatButton], template: "<smartform #form [smartForm]=\"smartForm\"></smartform>\r\n<div class=\"button-container\">\r\n  <button (click)=\"cancel()\" mat-raised-button color=\"secondary\">Bez\u00E1r\u00E1s</button>\r\n</div>", styles: [".button-container{display:flex;justify-content:flex-end;gap:1rem}:host{display:flex;flex-direction:column;padding:1rem}:host::ng-deep h4{margin:0}:host::ng-deep .mat-mdc-form-field-infix:has(input){padding:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { formComponent: [{
                 type: ViewChild,
-                args: ['form', { read: SmartformComponent }]
+                args: ["form", { read: SmartformComponent }]
             }] } });
 
 class ExpressionEditorDialogService extends SmartdialogService {