@smartbit4all/ng-client 7.3.47 → 7.3.49

package/fesm2022/smartbit4all-ng-client.mjs

@@ -10754,6 +10754,11 @@ class SmartFileEditorComponent {
         this.cdr = inject(ChangeDetectorRef);
         this.previewLoader = new FilePreviewLoader();
         this.uploadFilesEvent = output();
+        /**
+         * The clear and undo-clear actions of the widget, sent by the smart form like the multi-file
+         * editor's actions.
+         */
+        this.fileEvent = output();
         // ---- ControlValueAccessor implementation ----
         this.onChange = (value) => { };
         this.onTouched = () => { };
@@ -10819,12 +10824,22 @@ class SmartFileEditorComponent {
         this._widgetInstance.value = null;
         this.requestPreview();
         this.onChange(null);
+        this.emitFileAction(this._widgetInstance.fileUploaderProperties?.clearAction);
     }
     undoClear() {
         this._widgetInstance.value = this.clearedFile;
         this.requestPreview();
         this.onChange(this.clearedFile);
         this.clearedFile = undefined;
+        this.emitFileAction(this._widgetInstance.fileUploaderProperties?.undoClearAction);
+    }
+    /** Sends the action, if the page set one, with the model and the widget's key as its path. */
+    emitFileAction(action) {
+        if (action) {
+            this.fileEvent.emit({
+                uiAction: { ...action, model: true, path: action.path ?? this._widgetInstance.key },
+            });
+        }
     }
     change(file) {
         this.fileToChange = file;
@@ -10945,7 +10960,7 @@ class SmartFileEditorComponent {
         return 'error';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFileEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFileEditorComponent, isStandalone: true, selector: "smart-file-editor", inputs: { widgetInstance: "widgetInstance" }, outputs: { uploadFilesEvent: "uploadFilesEvent" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFileEditorComponent, isStandalone: true, selector: "smart-file-editor", inputs: { widgetInstance: "widgetInstance" }, outputs: { uploadFilesEvent: "uploadFilesEvent", fileEvent: "fileEvent" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => SmartFileEditorComponent),
@@ -10964,7 +10979,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     ], imports: [NgClass, NgStyle, SmartIconComponent, UploadWidgetComponent, UiActionToolbarComponent, UiActionButtonComponent], template: "@if (widgetInstance && widgetInstance.fileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warn-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else if (!widgetInstance.value || fileToChange) {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\n        [sources]=\"widgetInstance.fileUploaderProperties.sources\"\n        [capture]=\"widgetInstance.fileUploaderProperties.capture\"\n        [isMultiple]=\"false\"\n        [isDisabled]=\"isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n      @if (clearedFile && !isDisabled) {\n        <div class=\"undoClearContainer\">\n          <ui-action-button\n            class=\"removeIcon undoClearButton\"\n            (actionClick)=\"undoClear()\"\n            [descriptor]=\"removeButton\"\n          ></ui-action-button>\n        </div>\n      }\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      @if (preview; as filePreview) {\n        <div class=\"filePreview\">\n          @switch (filePreview.kind) {\n            @case ('image') {\n              <img [src]=\"filePreview.url\" [alt]=\"widgetInstance.value?.fileName\" />\n            }\n            @case ('video') {\n              <video\n                controls\n                [src]=\"filePreview.url\"\n                (loadedmetadata)=\"onPreviewMetadata($event)\"\n              ></video>\n            }\n            @case ('audio') {\n              <audio controls [src]=\"filePreview.url\"></audio>\n            }\n          }\n        </div>\n      }\n      <div class=\"uploadedFile\">\n        @if (!preview) {\n          <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n        }\n\n        <div class=\"fileData\">\n          <div class=\"fileDataContainer\">\n            <span class=\"fileName\">{{ widgetInstance.value?.fileName }}</span>\n            <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(widgetInstance.value?.size)) }}</span>\n          </div>\n        </div>\n\n        <div class=\"fileActions\">\n          <smart-ui-action-toolbar [id]=\"widgetInstance.toolbarId\"></smart-ui-action-toolbar>\n\n          @if (!fileToChange) {\n            <ui-action-button\n              class=\"changeButton\"\n              (actionClick)=\"change(widgetInstance.value)\"\n              [disabled]=\"isDisabled\"\n              [descriptor]=\"changeButton\"\n              >\n            </ui-action-button>\n            @if (!isDisabled && isClearEnabled) {\n              <ui-action-button\n                class=\"deleteButton\"\n                (actionClick)=\"clear()\"\n                [descriptor]=\"deleteButton\"\n              ></ui-action-button>\n            }\n          } @else {\n            <ui-action-button\n              class=\"removeIcon\"\n              (actionClick)=\"cancelChange()\"\n              [descriptor]=\"removeButton\"\n            ></ui-action-button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.fileEditorComponent:has(::ng-deep smartfileuploader) ::ng-deep .uploadedFile{border-top:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button,.undoClearContainer ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover,.undoClearContainer ::ng-deep button:hover{border:unset}.undoClearContainer{display:flex;justify-content:flex-end;padding:0 1rem .5rem}.removeIcon ::ng-deep mat-icon{color:var(--warn-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.filePreview{padding:.75rem 1rem 0}.filePreview img,.filePreview video{display:block;width:100%;max-height:200px;object-fit:contain;background:var(--color-surface-alt);border-radius:4px}.filePreview audio{display:block;width:100%}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warn-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warn-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 12px,#f1f1f1 12px 24px)}\n"] }]
         }], propDecorators: { widgetInstance: [{
                 type: Input
-            }], uploadFilesEvent: [{ type: i0.Output, args: ["uploadFilesEvent"] }] } });
+            }], uploadFilesEvent: [{ type: i0.Output, args: ["uploadFilesEvent"] }], fileEvent: [{ type: i0.Output, args: ["fileEvent"] }] } });
 
 /**
  * Turns every toolbar slot (`[data-sb4-toolbar]`) under the container into a live toolbar
@@ -13599,7 +13614,7 @@ class SmartformwidgetComponent {
         this.refocusSelectFilter(select);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartformwidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartformwidgetComponent, isStandalone: true, selector: "smartformwidget", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, widgetInstance: { classPropertyName: "widgetInstance", publicName: "widgetInstance", isSignal: false, isRequired: false, transformFunction: null }, onBlur: { classPropertyName: "onBlur", publicName: "onBlur", isSignal: true, isRequired: false, transformFunction: null }, onValueChange: { classPropertyName: "onValueChange", publicName: "onValueChange", isSignal: false, isRequired: false, transformFunction: null }, labelColor: { classPropertyName: "labelColor", publicName: "labelColor", isSignal: true, isRequired: false, transformFunction: null }, sophisticatedValueChange: { classPropertyName: "sophisticatedValueChange", publicName: "sophisticatedValueChange", isSignal: true, isRequired: true, transformFunction: null }, blurSophisticatedValueChange: { classPropertyName: "blurSophisticatedValueChange", publicName: "blurSophisticatedValueChange", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { valueCleared: "valueCleared" }, viewQueries: [{ propertyName: "selectFilterInput", first: true, predicate: ["selectFilterInput"], descendants: true, isSignal: true }, { propertyName: "chipInputChild", first: true, predicate: ["chipInput"], descendants: true }, { propertyName: "customComponentVcRef", first: true, predicate: ["customComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "quill", first: true, predicate: ["quillEditor"], descendants: true }, { propertyName: "sb4Textarea", first: true, predicate: ["sb4Textarea"], descendants: true }, { propertyName: "dateInputChild", first: true, predicate: ["dateInput"], descendants: true }, { propertyName: "timeInputChild", first: true, predicate: ["timeInput"], descendants: true }], ngImport: i0, template: "<div class=\"container material\" [formGroup]=\"form()\">\n  @if (widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible) {\n    <div\n      [ngClass]=\"widgetInstance.cssClass ?? ''\"\n      [class.sb4-widget-required]=\"isRequired()\"\n      class=\"container\"\n    >\n      @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\n        <div [attr.data-testid]=\"widgetInstance.key\" [ngClass]=\"getDirection()\">\n          @for (widget of visibleChildren; track widget) {\n            <smartformwidget\n              [form]=\"form()\"\n              [widgetInstance]=\"widget\"\n              class=\"container-item\"\n              [ngClass]=\"widget.cssClass ?? ''\"\n              [onBlur]=\"onBlur()\"\n              [onValueChange]=\"onValueChange\"\n              [sophisticatedValueChange]=\"sophisticatedValueChange()\"\n              [blurSophisticatedValueChange]=\"blurSophisticatedValueChange()\"\n              class=\"{{ widget.key }}\"\n              [labelColor]=\"labelColor()\"\n            ></smartformwidget>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD) {\n        <div (capsLock)=\"capsOn = $event\" class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input textField widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            @if (!widgetInstance.selection) {\n              <input\n                [formControlName]=\"widgetInstance.key\"\n                [id]=\"widgetInstance.key\"\n                [attr.data-testid]=\"widgetInstance.key\"\n                [attr.inputmode]=\"\n                  widgetInstance.inputMode ? widgetInstance.inputMode.toLocaleLowerCase() : 'text'\n                \"\n                [type]=\"'string'\"\n                [value]=\"widgetInstance.value\"\n                [readonly]=\"widgetInstance.isReadonly\"\n                placeholder=\"{{ widgetInstance.placeholder }}\"\n                matInput\n                (change)=\"handleBlurEvent($event)\"\n                (input)=\"onValueChange?.next($event)\"\n                type=\"{{ widgetInstance.isPassword ? (hidePassword ? 'password' : 'text') : '' }}\"\n                (keydown.enter)=\"onKeydown()\"\n                maxlength=\"{{ widgetInstance.maxLength }}\"\n                [mask]=\"widgetInstance.mask\"\n              />\n            }\n            <!-- [mask]=\"widgetInstance.mask ?? ''\" -->\n            @if (widgetInstance.selection) {\n              <input\n                [formControlName]=\"widgetInstance.key\"\n                [id]=\"widgetInstance.key\"\n                [attr.data-testid]=\"widgetInstance.key\"\n                [type]=\"'string'\"\n                [value]=\"widgetInstance.value\"\n                [readonly]=\"widgetInstance.isReadonly\"\n                placeholder=\"{{ widgetInstance.placeholder }}\"\n                matInput\n                (change)=\"handleBlurEvent($event)\"\n                (input)=\"onValueChange?.next($event)\"\n                (click)=\"onValueChange?.next($event)\"\n                type=\"{{ widgetInstance.isPassword ? 'password' : '' }}\"\n                [matAutocomplete]=\"textFieldAuto\"\n                (keydown.enter)=\"onKeydown()\"\n              />\n            }\n            @if (widgetInstance.isPassword) {\n              <button mat-icon-button matSuffix (click)=\"togglePasswordVisibility($event)\">\n                <mat-icon fontSet=\"material-symbols-outlined\">{{\n                  hidePassword ? 'visibility_off' : 'visibility'\n                }}</mat-icon>\n              </button>\n            }\n            <mat-autocomplete #textFieldAuto=\"matAutocomplete\">\n              @for (option of filteredOptions | async; track option) {\n                <mat-option [value]=\"option.label\">\n                  <span [innerHTML]=\"option.label | highlight: toHighlight\"></span>\n                </mat-option>\n              }\n            </mat-autocomplete>\n            @if (capsOn && widgetInstance.isPassword) {\n              <span class=\"mat-error\">\n                {{ widgetInstance.capsLockWarning }}\n              </span>\n            }\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            <span matPrefix>\n              @if (capsOn && widgetInstance.isPassword) {\n                <smart-icon\n                  [icon]=\"widgetInstance.capsLockWarningIcon ?? 'keyboard_capslock'\"\n                  color=\"warn\"\n                ></smart-icon>\n              }\n              @if (widgetInstance.icon && widgetInstance.iconPosition === 'PRE') {\n                <smart-icon\n                  [icon]=\"widgetInstance.icon\"\n                  [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                ></smart-icon>\n              }\n              {{ widgetInstance.prefix }}\n            </span>\n            <span matSuffix>\n              {{ widgetInstance.suffix }}\n            </span>\n            @if (\n              widgetInstance.icon &&\n              (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n            ) {\n              <smart-icon\n                [icon]=\"widgetInstance.icon\"\n                [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                matSuffix\n              ></smart-icon>\n            }\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            <div class=\"textFieldButtons\">\n              @if (widgetInstance.textFieldProperties?.clearable) {\n                <ui-action-button\n                  class=\"clearButton\"\n                  [addBasicClasses]=\"false\"\n                  [descriptor]=\"clearButtonDescriptor\"\n                  (actionClick)=\"clearField(widgetInstance.key)\"\n                />\n              }\n            </div>\n            @if (isToolbarPresent()) {\n              <smart-ui-action-toolbar\n                class=\"textFieldToolbar\"\n                matSuffix\n                [id]=\"widgetInstance.toolbarId\"\n              ></smart-ui-action-toolbar>\n            }\n            @if (widgetInstance.textFieldButton) {\n              <button\n                matSuffix\n                mat-button\n                color=\"{{ widgetInstance.textFieldButton.color }}\"\n                (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\n              >\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().PRE &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.textFieldButton.icon\"\n                    [color]=\"widgetInstance.textFieldButton.iconColor\"\n                  >\n                  </smart-icon>\n                }\n                {{ widgetInstance.textFieldButton.label }}\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().POST &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\n                }\n              </button>\n            }\n            @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n              <mat-hint matSuffix align=\"end\">{{\n                widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n              }}</mat-hint>\n            }\n          </mat-form-field>\n          @if (\n            !widgetInstance?.hint ||\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input textField widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <input\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [value]=\"widgetInstance.value\"\n              [readonly]=\"widgetInstance.isReadonly\"\n              [type]=\"'number'\"\n              placeholder=\"{{ widgetInstance.placeholder }}\"\n              [min]=\"widgetInstance.minValues ?? null\"\n              [max]=\"widgetInstance.maxValues ?? null\"\n              matInput\n              (change)=\"handleBlurEvent($event)\"\n              (input)=\"onValueChange?.next($event)\"\n            />\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            <span matPrefix>\n              {{ widgetInstance.prefix }}\n            </span>\n            <span matSuffix>\n              {{ widgetInstance.suffix }}\n            </span>\n            @if (widgetInstance.icon) {\n              <smart-icon [icon]=\"widgetInstance.icon\" matSuffix> </smart-icon>\n            }\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            @if (widgetInstance.textFieldButton) {\n              <button\n                matSuffix\n                mat-button\n                color=\"{{ widgetInstance.textFieldButton.color }}\"\n                (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\n              >\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().PRE &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\n                }\n                {{ widgetInstance.textFieldButton.label }}\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().POST &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\n                }\n              </button>\n            }\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-chip-grid #chipList aria-label=\"{{ widgetInstance.label }}\">\n              @for (value of widgetInstance.value; track value) {\n                <mat-chip-row [disabled]=\"widgetInstance.isDisabled\" (removed)=\"remove(value)\">\n                  {{ value }}\n                  <button matChipRemove>\n                    <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n                  </button>\n                </mat-chip-row>\n              }\n              <input\n                #chipInput\n                [attr.data-testid]=\"widgetInstance.key\"\n                placeholder=\"{{ widgetInstance.placeholder }}\"\n                [matChipInputFor]=\"chipList\"\n                [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                [matChipInputAddOnBlur]=\"addOnBlur\"\n                [readonly]=\"widgetInstance.isReadonly\"\n                [matAutocomplete]=\"chipAuto\"\n                (matChipInputTokenEnd)=\"add($event)\"\n                (change)=\"handleBlurEvent($event)\"\n                (input)=\"onValueChange?.next($event)\"\n                [disabled]=\"widgetInstance.isDisabled\"\n              />\n              <mat-autocomplete\n                #chipAuto=\"matAutocomplete\"\n                (optionSelected)=\"selected($event, widgetInstance)\"\n              >\n                @for (item of widgetInstance.valueList; track item) {\n                  <mat-option [disabled]=\"widgetInstance.isDisabled\" [value]=\"item.value\">\n                    {{ item.label }}\n                  </mat-option>\n                }\n              </mat-autocomplete>\n            </mat-chip-grid>\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_LOOKUP) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-chip-grid #chipListLookup aria-label=\"{{ widgetInstance.label }}\">\n              @for (value of widgetInstance.value; track value) {\n                <mat-chip [disabled]=\"widgetInstance.isDisabled\" (removed)=\"remove(value)\">\n                  {{ getChipsValue(value) }}\n                  <button matChipRemove>\n                    <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n                  </button>\n                </mat-chip>\n              }\n              <input\n                [attr.data-testid]=\"widgetInstance.key\"\n                placeholder=\"{{ widgetInstance.placeholder }}\"\n                [matChipInputFor]=\"chipListLookup\"\n                [matChipInputSeparatorKeyCodes]=\"emptySeparatorKeysCodes\"\n                [matChipInputAddOnBlur]=\"false\"\n                [readonly]=\"true\"\n                [disabled]=\"widgetInstance.isDisabled\"\n              />\n            </mat-chip-grid>\n            @if (isToolbarPresent()) {\n              <smart-ui-action-toolbar\n                matSuffix\n                [id]=\"widgetInstance.toolbarId\"\n              ></smart-ui-action-toolbar>\n            }\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_BOX) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <textarea\n              class=\"sb4-textarea\"\n              #sb4Textarea\n              cols=\"30\"\n              cdkTextareaAutosize\n              [cdkAutosizeMinRows]=\"widgetInstance.textBoxProperties?.minRows ?? 1\"\n              [cdkAutosizeMaxRows]=\"widgetInstance.textBoxProperties?.maxRows ?? undefined\"\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [type]=\"'string'\"\n              [value]=\"widgetInstance.value\"\n              [readonly]=\"widgetInstance.isReadonly\"\n              placeholder=\"{{ widgetInstance.placeholder }}\"\n              matInput\n              (change)=\"handleBlurEvent($event)\"\n              maxlength=\"{{ widgetInstance.maxLength }}\"\n            ></textarea>\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n              <mat-hint matSuffix align=\"end\">{{\n                widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n              }}</mat-hint>\n            }\n          </mat-form-field>\n          @if (\n            !widgetInstance.hint || widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\n        <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div\n            class=\"input checkbox widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"radioLabel\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\n              <div class=\"checkbox-item-container\">\n                <mat-checkbox\n                  class=\"selecatbleObject\"\n                  formControlName=\"{{ widgetInstance.key }}\"\n                  (change)=\"onValueChange?.next(widgetInstance)\"\n                  (change)=\"onBlur()?.next(widgetInstance)\"\n                >\n                  {{ widgetInstance.label }}\n                </mat-checkbox>\n              </div>\n              <div class=\"radio-error\">\n                <span class=\"mat-error\">\n                  {{ widgetInstance.error }}\n                </span>\n                @if (widgetInstance.error && widgetInstance.errorIcon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.errorIcon\"\n                    [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  ></smart-icon>\n                }\n              </div>\n            </section>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX_2) {\n        <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div\n            class=\"input checkbox widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"radioLabel\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\n              @for (checkbox of widgetInstance.valueList; track checkbox; let i = $index) {\n                <div class=\"checkbox-item-container\">\n                  @if (checkbox.imageUrl) {\n                    <img\n                      title=\"{{ widgetInstance.key }}\"\n                      class=\"checkbox-item-image\"\n                      [src]=\"checkbox.imageUrl\"\n                    />\n                  }\n                  <mat-checkbox\n                    class=\"selecatbleObject\"\n                    formControlName=\"{{ widgetInstance.key + '.' + checkbox.key }}\"\n                    [value]=\"checkbox.value\"\n                    (change)=\"onValueChange?.next(checkbox)\"\n                    [disabled]=\"widgetInstance.isDisabled!\"\n                  >\n                    {{ checkbox.label }}\n                  </mat-checkbox>\n                </div>\n              }\n              <div class=\"radio-error\">\n                <span class=\"mat-error\">\n                  {{ widgetInstance.error }}\n                </span>\n                @if (widgetInstance.error && widgetInstance.errorIcon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.errorIcon\"\n                    [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  ></smart-icon>\n                }\n              </div>\n            </section>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.RADIO_BUTTON) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-radio-group\n            class=\"input radio-section widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            [attr.data-testid]=\"widgetInstance.key\"\n            aria-label=\"{{ widgetInstance.label }}\"\n            appearance=\"outline\"\n            formControlName=\"{{ widgetInstance.key }}\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"radioLabel\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <div [ngClass]=\"getDirection()\">\n              @for (radio of widgetInstance.valueList; track radio) {\n                <div class=\"radio-item-container\">\n                  @if (radio.imageUrl) {\n                    <img\n                      title=\"{{ widgetInstance.key }}\"\n                      class=\"radio-item-image\"\n                      [src]=\"radio.imageUrl\"\n                    />\n                  }\n                  <mat-radio-button\n                    class=\"selecatbleObject\"\n                    value=\"{{ radio.value }}\"\n                    [ngClass]=\"getDirection()\"\n                    (change)=\"onValueChange?.next(radio.value)\"\n                    [disabled]=\"widgetInstance.isDisabled\"\n                  >\n                    {{ radio.label }}\n                  </mat-radio-button>\n                </div>\n              }\n              <div class=\"radio-error\">\n                <span class=\"mat-error\">\n                  {{ widgetInstance.error }}\n                </span>\n                @if (widgetInstance.error && widgetInstance.errorIcon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.errorIcon\"\n                    [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  ></smart-icon>\n                }\n              </div>\n              <div class=\"radio-icon\">\n                @if (widgetInstance.icon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.icon\"\n                    [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                  >\n                  </smart-icon>\n                }\n              </div>\n            </div>\n          </mat-radio-group>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DATE_PICKER) {\n        <div class=\"datePicker widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker (closed)=\"handleBlurEvent(widgetInstance)\"></mat-datepicker>\n            <input\n              matInput\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [value]=\"widgetInstance.value\"\n              [min]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.minDate ?? null)\"\n              [max]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.maxDate ?? null)\"\n              placeholder=\"{{ widgetInstance.placeholder }}\"\n              [matDatepicker]=\"picker\"\n              (change)=\"handleBlurEvent(widgetInstance)\"\n              (dateChange)=\"onValueChange?.next(widgetInstance)\"\n              [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\n            />\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            <span matSuffix>\n              {{ widgetInstance.suffix }}\n            </span>\n            @if (\n              widgetInstance.icon &&\n              (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n            ) {\n              <smart-icon\n                [icon]=\"widgetInstance.icon\"\n                [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                matSuffix\n              ></smart-icon>\n            }\n            <mat-hint>\n              {{ widgetInstance.dateFormatHint }}\n            </mat-hint>\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.MONTH_PICKER) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <div class=\"{{ labelColor() }} smart-form-widget-label\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </div>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <lib-smart-month-picker\n            [attr.data-testid]=\"widgetInstance.key\"\n            [widgetInstance]=\"widgetInstance\"\n            [control]=\"form().controls[widgetInstance.key]\"\n            (valueChange)=\"handleYearMonthPicked($event)\"\n          ></lib-smart-month-picker>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <div\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </div>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div class=\"dateTimePickerContainer\">\n            <mat-form-field\n              class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\n              [ngClass]=\"getNgClass()\"\n              [ngStyle]=\"getStyle()\"\n              appearance=\"outline\"\n            >\n              @if (!widgetInstance.showLabel) {\n                <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                  {{ getWidgetLabel(widgetInstance) }}\n                </mat-label>\n              }\n              <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n              <mat-datepicker #picker (closed)=\"handleBlurEvent(widgetInstance)\"></mat-datepicker>\n              <input\n                #dateInput\n                matInput\n                [formControlName]=\"widgetInstance.key\"\n                [attr.data-testid]=\"widgetInstance.key\"\n                [min]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.minDate ?? null)\"\n                [max]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.maxDate ?? null)\"\n                [id]=\"widgetInstance.key\"\n                [value]=\"widgetInstance.value\"\n                placeholder=\"{{ widgetInstance.placeholder }}\"\n                [matDatepicker]=\"picker\"\n                (blur)=\"onDatePickerBlur($event)\"\n                (dateChange)=\"onValueChange?.next(widgetInstance)\"\n                [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\n              />\n              @if (widgetInstance.error && widgetInstance.errorIcon) {\n                <smart-icon\n                  [icon]=\"widgetInstance.errorIcon\"\n                  [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  matSuffix\n                ></smart-icon>\n              }\n              <span matSuffix>\n                {{ widgetInstance.suffix }}\n              </span>\n              @if (\n                widgetInstance.icon &&\n                (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n              ) {\n                <smart-icon\n                  [icon]=\"widgetInstance.icon\"\n                  [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                  matSuffix\n                ></smart-icon>\n              }\n              <mat-hint>\n                {{ widgetInstance.dateFormatHint }}\n              </mat-hint>\n            </mat-form-field>\n            @if (hasCreated) {\n              <mat-form-field\n                class=\"input widgetContent time\"\n                [ngClass]=\"widgetInstance.cssClass ?? ''\"\n                [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\n                appearance=\"outline\"\n              >\n                <input\n                  #timeInput\n                  [formControlName]=\"widgetInstance.key + '-time'\"\n                  [attr.data-testid]=\"widgetInstance.key + '-time'\"\n                  [id]=\"widgetInstance.key\"\n                  [type]=\"'time'\"\n                  placeholder=\"{{ widgetInstance.placeholder }}\"\n                  (blur)=\"onTimePickerBlur($event)\"\n                  matInput\n                />\n              </mat-form-field>\n            }\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.SELECT) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <div\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </div>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-select\n              #select\n              [formControlName]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              (selectionChange)=\"onValueChange?.next($event.value)\"\n              (opened)=\"focusSelectFilter()\"\n              (closed)=\"handleBlurEvent(widgetInstance); clearSelectFilter()\"\n              [disabled]=\"widgetInstance.isDisabled!\"\n              [compareWith]=\"\n                widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\n              \"\n              placeholder=\"{{ selectionPlaceholder }}\"\n            >\n              @if (hasSelectFilter()) {\n                <div class=\"comboBoxFilter\">\n                  <mat-icon fontSet=\"material-symbols-outlined\">search</mat-icon>\n                  <input\n                    #selectFilterInput\n                    type=\"text\"\n                    autocomplete=\"off\"\n                    [value]=\"selectFilter()\"\n                    [placeholder]=\"selectFilterPlaceholder\"\n                    (input)=\"onSelectFilterInput(select, $any($event.target).value)\"\n                    (keydown)=\"onSelectFilterKeydown(select, $event)\"\n                  />\n                </div>\n              }\n              @for (option of selectOptions(); track option) {\n                <div>\n                  @if (option.type === getType().ITEM_GROUP) {\n                    <mat-optgroup [label]=\"option.label\" [disabled]=\"option.isDisabled\">\n                      @for (innerOption of option.valueList; track innerOption) {\n                        <mat-option [value]=\"innerOption.value\" [disabled]=\"innerOption.isDisabled\">\n                          @if (innerOption.icon) {\n                            <smart-icon\n                              [icon]=\"innerOption.icon\"\n                              [color]=\"innerOption.iconColor\"\n                            ></smart-icon>\n                          }\n                          {{ innerOption.label }}\n                        </mat-option>\n                      }\n                    </mat-optgroup>\n                  }\n                  @if (option.type === getType().ITEM) {\n                    <mat-option [value]=\"option.value\" [disabled]=\"option.isDisabled\">\n                      @if (option.icon) {\n                        <smart-icon [icon]=\"option.icon\" [color]=\"option.iconColor\"></smart-icon>\n                      }\n                      {{ option.label }}</mat-option\n                    >\n                  }\n                </div>\n              }\n            </mat-select>\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            <span matSuffix>\n              {{ widgetInstance.suffix }}\n            </span>\n            @if (\n              widgetInstance.icon &&\n              (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n            ) {\n              <smart-icon\n                [icon]=\"widgetInstance.icon\"\n                [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                matSuffix\n              ></smart-icon>\n            }\n            @if (widgetInstance.selectProperties?.clearable) {\n              <span matSuffix class=\"textFieldButtons\" (click)=\"$event.stopPropagation()\">\n                <ui-action-button\n                  class=\"clearButton\"\n                  [addBasicClasses]=\"false\"\n                  [descriptor]=\"clearButtonDescriptor\"\n                  (actionClick)=\"clearSelect(widgetInstance.key)\"\n                />\n              </span>\n            }\n            @if (isToolbarPresent()) {\n              <smart-ui-action-toolbar\n                class=\"textFieldToolbar\"\n                matSuffix\n                [id]=\"widgetInstance.toolbarId\"\n              ></smart-ui-action-toolbar>\n            }\n          </mat-form-field>\n          @if (\n            !widgetInstance?.hint ||\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-select\n              #select\n              [formControlName]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              multiple\n              (selectionChange)=\"onValueChange?.next($event.value); refocusSelectFilter(select)\"\n              (opened)=\"focusSelectFilter()\"\n              (closed)=\"handleBlurEvent(widgetInstance); clearSelectFilter()\"\n              [disabled]=\"widgetInstance.isDisabled!\"\n              [compareWith]=\"\n                widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\n              \"\n              placeholder=\"{{ selectionPlaceholder }}\"\n            >\n              @if (hasSelectFilter()) {\n                <div class=\"comboBoxFilter\">\n                  <mat-icon fontSet=\"material-symbols-outlined\">search</mat-icon>\n                  <input\n                    #selectFilterInput\n                    type=\"text\"\n                    autocomplete=\"off\"\n                    [value]=\"selectFilter()\"\n                    [placeholder]=\"selectFilterPlaceholder\"\n                    (input)=\"onSelectFilterInput(select, $any($event.target).value)\"\n                    (keydown)=\"onSelectFilterKeydown(select, $event)\"\n                  />\n                </div>\n              }\n              @if (hasSelectAll()) {\n                <div class=\"comboBoxSelectAll\" (keydown)=\"$event.stopPropagation()\">\n                  <mat-checkbox\n                    [checked]=\"selectAllState() === 'all'\"\n                    [indeterminate]=\"selectAllState() === 'some'\"\n                    (change)=\"toggleSelectAll(select)\"\n                    >{{ selectAllLabel }}</mat-checkbox\n                  >\n                </div>\n              }\n              @for (option of selectOptions(); track option) {\n                <div>\n                  @if (option.type === getType().ITEM_GROUP) {\n                    <mat-optgroup [label]=\"option.label\" [disabled]=\"option.isDisabled\">\n                      @for (innerOption of option.valueList; track innerOption) {\n                        <mat-option [value]=\"innerOption.value\" [disabled]=\"innerOption.isDisabled\">\n                          @if (innerOption.icon) {\n                            <smart-icon\n                              [icon]=\"innerOption.icon\"\n                              [color]=\"innerOption.iconColor\"\n                            ></smart-icon>\n                          }\n                          {{ innerOption.label }}</mat-option\n                        >\n                      }\n                    </mat-optgroup>\n                  }\n                  @if (option.type === getType().ITEM) {\n                    <mat-option [value]=\"option.value\" [disabled]=\"option.isDisabled\">\n                      @if (option.icon) {\n                        <smart-icon [icon]=\"option.icon\" [color]=\"option.iconColor\"></smart-icon>\n                      }\n                      {{ option.label }}</mat-option\n                    >\n                  }\n                </div>\n              }\n            </mat-select>\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            @if (isToolbarPresent()) {\n              <smart-ui-action-toolbar\n                class=\"textFieldToolbar\"\n                matSuffix\n                [id]=\"widgetInstance.toolbarId\"\n              ></smart-ui-action-toolbar>\n            }\n          </mat-form-field>\n          @if (\n            !widgetInstance?.hint ||\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.LABEL) {\n        <div class=\"label widgetContainer\" [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\">\n          <div class=\"label-title labelContainer\" [ngClass]=\"widgetInstance.cssClass ?? ''\">\n            <h4\n              class=\"{{ labelColor() }} smart-form-widget-label {{ widgetInstance.cssClass ?? '' }}\"\n              [ngClass]=\"getNgClass()\"\n              [ngStyle]=\"getStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n            @if (widgetInstance.widgetDescription) {\n              <p>{{ widgetInstance.widgetDescription }}</p>\n            }\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TIME) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent time {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <input\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [type]=\"'time'\"\n              placeholder=\"{{ widgetInstance.placeholder }}\"\n              matInput\n              (change)=\"handleBlurEvent(widgetInstance)\"\n            />\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TOGGLE) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div\n            class=\"widgetContent  {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n          >\n            <mat-slide-toggle\n              formControlName=\"{{ widgetInstance.key }}\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              (change)=\"onValueChange?.next($event)\"\n              [labelPosition]=\"widgetInstance.toggleLabelPosition ?? 'before'\"\n              >{{ !widgetInstance.showLabel ? widgetInstance.label : '' }}</mat-slide-toggle\n            ><span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n              ></smart-icon>\n            }\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.INDICATOR) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <h4\n              class=\"{{ labelColor() }} labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n              [ngClass]=\"getLabelNgClass()\"\n              [ngStyle]=\"getLabelStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          <div class=\"smartIndicator widgetContent\">\n            <div\n              class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\"\n              [ngClass]=\"getNgClass()\"\n            >\n              @for (item of indicatorItems; track item; let i = $index) {\n                <div class=\"indicatorItem\" [ngClass]=\"getIndicatorItemClass(i)\"></div>\n              }\n            </div>\n            <p [ngClass]=\"getIndicatorStatusLabelColor()\">\n              {{ getIndicatorStatusLabel() }}\n            </p>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.RECORDING_UPLOADER) {\n        <div class=\"widgetContainer\">\n          <div class=\"widgetItemContainer\">\n            <smart-voice-recorder\n              [formControlName]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [widgetInstance]=\"widgetInstance\"\n              (uploadFilesEvent)=\"upload($event)\"\n            />\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.FILE_UPLOADER) {\n        <div class=\"widgetContainer\">\n          <smart-file-editor\n            [formControlName]=\"widgetInstance.key\"\n            [attr.data-testid]=\"widgetInstance.key\"\n            [widgetInstance]=\"widgetInstance\"\n            (uploadFilesEvent)=\"upload($event)\"\n          />\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.MULTI_FILE_UPLOADER) {\n        <div class=\"widgetContainer\">\n          <smart-multi-file-editor\n            [formControlName]=\"widgetInstance.key\"\n            [attr.data-testid]=\"widgetInstance.key\"\n            [widgetInstance]=\"widgetInstance\"\n            (uploadFilesEvent)=\"upload($event)\"\n            (fileEvent)=\"executeUiAction($event.uiAction)\"\n          />\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.IMAGE) {\n        <div class=\"widgetContainer imageContainer\">\n          @if (widgetInstance.showLabel && getWidgetLabel(widgetInstance)) {\n            <h4\n              class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\n              [ngClass]=\"getLabelNgClass()\"\n              [ngStyle]=\"getLabelStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          @if (widgetInstance.imageProperties?.image) {\n            <smart-icon\n              [imageResource]=\"$safeNavigationMigration(widgetInstance.imageProperties?.image)\"\n              class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\n              alt=\"Image\"\n              title=\"{{ widgetInstance.key }}\"\n              [ngClass]=\"getNgClass()\"\n              [ngStyle]=\"getStyle()\"\n            ></smart-icon>\n          } @else if (widgetInstance.value) {\n            <smart-icon\n              [(ngModel)]=\"widgetInstance.value\"\n              [imageResource]=\"widgetInstance.value\"\n              class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\n              alt=\"Image\"\n              title=\"{{ widgetInstance.key }}\"\n              [ngClass]=\"getNgClass()\"\n              [ngStyle]=\"getStyle()\"\n            ></smart-icon>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DIV) {\n        <div\n          class=\"smartDiv\"\n          [innerHTML]=\"sanitizeHtml(getWidgetLabel(widgetInstance))\"\n          [ngClass]=\"getNgClass()\"\n          [class.clickable]=\"!!widgetInstance.divProperties?.onClick\"\n          [ngStyle]=\"getStyle()\"\n          (click)=\"onDivClick()\"\n        ></div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.HTML) {\n        <smart-html-widget\n          [widgetInstance]=\"widgetInstance\"\n          [ngClass]=\"getNgClass()\"\n          [ngStyle]=\"getStyle()\"\n        ></smart-html-widget>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.SVG) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <h4\n              class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\n              [ngClass]=\"getLabelNgClass()\"\n              [ngStyle]=\"getLabelStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          <div\n            class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [innerHTML]=\"sanitizeHtml(widgetInstance.value)\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n          ></div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DIVIDER) {\n        <div class=\"widgetContainer\">\n          <hr\n            class=\"smartDivider {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n          />\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.BUTTON) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <h4\n              class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\n              [ngClass]=\"getLabelNgClass()\"\n              [ngStyle]=\"getLabelStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          <div\n            class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n          >\n            <button\n              mat-button\n              [attr.data-testid]=\"widgetInstance.key\"\n              [ngClass]=\"getButtonType(widgetInstance.uiActionDescriptor)\"\n              [color]=\"$safeNavigationMigration(widgetInstance.uiActionDescriptor?.color)\"\n              (click)=\"onButtonClicked(widgetInstance)\"\n            >\n              @if (isOnlyIcon(widgetInstance.uiActionDescriptor)) {\n                @if (widgetInstance.uiActionDescriptor?.icon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n                    [color]=\"\n                      widgetInstance.uiActionDescriptor?.iconColor ??\n                      widgetInstance.uiActionDescriptor?.color\n                    \"\n                  ></smart-icon>\n                }\n              } @else {\n                @if (\n                  widgetInstance.uiActionDescriptor?.icon &&\n                  widgetInstance.uiActionDescriptor?.iconPosition === 'PRE'\n                ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n                    [color]=\"\n                      widgetInstance.uiActionDescriptor?.iconColor ??\n                      widgetInstance.uiActionDescriptor?.color\n                    \"\n                  ></smart-icon>\n                }\n                {{ widgetInstance.uiActionDescriptor?.title }}\n                @if (\n                  widgetInstance.uiActionDescriptor?.icon &&\n                  widgetInstance.uiActionDescriptor?.iconPosition === 'POST'\n                ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n                    [color]=\"\n                      widgetInstance.uiActionDescriptor?.iconColor ??\n                      widgetInstance.uiActionDescriptor?.color\n                    \"\n                  ></smart-icon>\n                }\n              }\n            </button>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.COMPONENT) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <h4 class=\"labelContainer {{ labelColor() }}\">\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          <div class=\"widgetContent\">\n            <ng-template #customComponent></ng-template>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.RICH_TEXT) {\n        <div class=\"widgetContainer\">\n          <div class=\"labelContainer\">\n            @if (widgetInstance.showLabel) {\n              <h4 class=\"{{ labelColor() }}\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n            }\n            @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <div class=\"widgetContent\">\n            <quill-editor\n              #quillEditor\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [modules]=\"\n                widgetInstance.isDisabled ? emptyQuillToolbar : widgetInstance.quillModules\n              \"\n              [placeholder]=\"widgetInstance.placeholder ?? ''\"\n              [readOnly]=\"widgetInstance.isReadonly ?? false\"\n              [maxLength]=\"widgetInstance.maxLength ?? 0\"\n              (onContentChanged)=\"onRichTextEditorContentChanged($event)\"\n            ></quill-editor>\n            @if (\n              !widgetInstance?.hint ||\n              widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n            ) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n            @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n              <mat-hint matSuffix align=\"end\" class=\"rich-text-editor-leeway-counter\">{{\n                getRichTextEditorLengthLeeway()\n              }}</mat-hint>\n            }\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.SORTABLE) {\n        <div class=\"widgetContainer\">\n          <div class=\"labelContainer\">\n            @if (widgetInstance.showLabel) {\n              <h4 class=\"{{ labelColor() }}\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n            }\n            @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <div class=\"widgetContent\">\n            <lib-sortable-widget\n              [formControlName]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [widgetInstance]=\"widgetInstance\"\n            ></lib-sortable-widget>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.MATRIX) {\n        <div class=\"widgetContainer\">\n          <div class=\"labelContainer\">\n            @if (widgetInstance.showLabel) {\n              <h4 class=\"{{ labelColor() }}\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n            }\n            @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <table class=\"matrixTable widgetContent\">\n            <tr>\n              <th></th>\n              @for (option of widgetInstance.value.columns; track option) {\n                <th class=\"optionLabel\">\n                  {{ option.displayValue }}\n                </th>\n              }\n            </tr>\n            @for (question of widgetInstance.value.rows; track question; let i = $index) {\n              <tr>\n                <th class=\"questionLabel\">\n                  <label>{{ question.displayValue }}</label>\n                </th>\n                @for (option of widgetInstance.value.columns; track option; let j = $index) {\n                  <td class=\"selectTd\">\n                    @if (!widgetInstance.isMultiple) {\n                      <mat-radio-group\n                        [formControlName]=\"widgetInstance.key + '.' + question.code\"\n                        [name]=\"'q' + i\"\n                      >\n                        <mat-radio-button [value]=\"option.code\"> </mat-radio-button>\n                      </mat-radio-group>\n                    }\n                    @if (widgetInstance.isMultiple) {\n                      <div>\n                        <mat-checkbox\n                          [formControlName]=\"\n                            widgetInstance.key + '.data.' + question.code + '.' + option.code\n                          \"\n                          [value]=\"widgetInstance.value['data'][question.code][option.code]\"\n                          [checked]=\"true\"\n                        ></mat-checkbox>\n                      </div>\n                    }\n                  </td>\n                }\n                <br />\n                @if (widgetInstance.button) {\n                  <button mat-icon-button (click)=\"removeMatrixRow(question)\">\n                    <smart-icon icon=\"close\"></smart-icon>\n                  </button>\n                }\n              </tr>\n            }\n          </table>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.YOUTUBE_PLAYER) {\n        <div class=\"widgetContainer\">\n          <div class=\"labelContainer\">\n            @if (widgetInstance.showLabel) {\n              <h4\n                class=\"{{ labelColor() }} {{ widgetInstance.cssLabelClass }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n            }\n            @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <youtube-player\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            videoId=\"{{ widgetInstance.videoId }}\"\n            [width]=\"widgetInstance.width\"\n            [height]=\"widgetInstance.height\"\n            [startSeconds]=\"widgetInstance.startSeconds\"\n            [endSeconds]=\"widgetInstance.endSeconds\"\n          ></youtube-player>\n          @if (\n            !widgetInstance?.hint ||\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\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}.comboBoxFilter{display:flex;flex-direction:row;align-items:center;gap:.5rem;min-height:48px;padding:0 1rem;border-bottom:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.comboBoxFilter:focus-within{border-bottom-color:var(--mat-sys-primary, #3f51b5)}.comboBoxFilter .mat-icon{flex:0 0 auto;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .54))}.comboBoxFilter input{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;font:inherit;color:inherit}.comboBoxSelectAll{display:flex;align-items:center;min-height:48px;padding:0 .25rem;border-bottom:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.textFieldButtons{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.clearButton .mat-mdc-raised-button,.clearButton button{background-color:unset!important;border:unset;color:#6b7280!important;box-shadow:unset;font-size:1rem!important}.clearButton .mat-icon.mat-primary{color:#6b7280!important}.clearButton .mat-mdc-raised-button:hover,.clearButton button:hover{color:#6b7280cc!important;background-color:unset;border:unset;box-shadow:unset;font-size:1rem!important}.mat-mdc-form-field-infix{display:flex;flex-direction:row}textarea:not(:placeholder-shown)~label{top:-.75em!important;font-size:12px!important}.disabledEditor *{-webkit-user-modify:read-only;-moz-user-modify:read-only;user-modify:read-only}.sb4-textarea{--sb4-textarea-line-height: 20px;line-height:var(--sb4-textarea-line-height);overflow-y:auto!important}.widgetContainer .imageIcon{max-width:unset!important;height:unset!important}.material .sb4-textarea{resize:vertical!important}.material .smart-form-widget-label{font-weight:700}.material .mat-mdc-form-field-subscript-wrapper{display:none}.label-right{display:flex;gap:.5rem;flex-direction:row-reverse}.label-left{display:flex;gap:.5rem;flex-direction:row}.label-top{display:flex;gap:.5rem;flex-direction:column}.label-bottom{display:flex;gap:.5rem;flex-direction:column-reverse}.smartDiv{width:100%}.clickable{cursor:pointer}\n/*!\n * Quill Editor v2.0.3\n * https://quilljs.com\n * Copyright (c) 2017-2024, Slab\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */\n"], dependencies: [{ kind: "component", type: SmartformwidgetComponent, selector: "smartformwidget", inputs: ["form", "widgetInstance", "onBlur", "onValueChange", "labelColor", "sophisticatedValueChange", "blurSophisticatedValueChange"], outputs: ["valueCleared"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TrackCapsDirective, selector: "[capsLock]", outputs: ["capsLock"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "typeFromDecimals", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix", "defaultValueOnBlur", "value", "disabled", "touched"], outputs: ["valueChange", "touchedChange", "maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: SmartMonthPickerComponent, selector: "lib-smart-month-picker", inputs: ["widgetInstance", "control"], outputs: ["valueChange"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: SmartVoiceRecorderComponent, selector: "smart-voice-recorder", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: SmartFileEditorComponent, selector: "smart-file-editor", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: SmartMultiFileEditorComponent, selector: "smart-multi-file-editor", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent", "fileEvent"] }, { kind: "component", type: SmartHtmlWidgetComponent, selector: "smart-html-widget", inputs: ["widgetInstance"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: SortableWidgetComponent, selector: "lib-sortable-widget", inputs: ["widgetInstance"] }, { kind: "component", type: YouTubePlayer, selector: "youtube-player", inputs: ["videoId", "height", "width", "startSeconds", "endSeconds", "suggestedQuality", "playerVars", "disableCookies", "loadApi", "disablePlaceholder", "showBeforeIframeApiLoads", "placeholderButtonLabel", "placeholderImageQuality"], outputs: ["ready", "stateChange", "error", "apiChange", "playbackQualityChange", "playbackRateChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartformwidgetComponent, isStandalone: true, selector: "smartformwidget", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, widgetInstance: { classPropertyName: "widgetInstance", publicName: "widgetInstance", isSignal: false, isRequired: false, transformFunction: null }, onBlur: { classPropertyName: "onBlur", publicName: "onBlur", isSignal: true, isRequired: false, transformFunction: null }, onValueChange: { classPropertyName: "onValueChange", publicName: "onValueChange", isSignal: false, isRequired: false, transformFunction: null }, labelColor: { classPropertyName: "labelColor", publicName: "labelColor", isSignal: true, isRequired: false, transformFunction: null }, sophisticatedValueChange: { classPropertyName: "sophisticatedValueChange", publicName: "sophisticatedValueChange", isSignal: true, isRequired: true, transformFunction: null }, blurSophisticatedValueChange: { classPropertyName: "blurSophisticatedValueChange", publicName: "blurSophisticatedValueChange", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { valueCleared: "valueCleared" }, viewQueries: [{ propertyName: "selectFilterInput", first: true, predicate: ["selectFilterInput"], descendants: true, isSignal: true }, { propertyName: "chipInputChild", first: true, predicate: ["chipInput"], descendants: true }, { propertyName: "customComponentVcRef", first: true, predicate: ["customComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "quill", first: true, predicate: ["quillEditor"], descendants: true }, { propertyName: "sb4Textarea", first: true, predicate: ["sb4Textarea"], descendants: true }, { propertyName: "dateInputChild", first: true, predicate: ["dateInput"], descendants: true }, { propertyName: "timeInputChild", first: true, predicate: ["timeInput"], descendants: true }], ngImport: i0, template: "<div class=\"container material\" [formGroup]=\"form()\">\n  @if (widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible) {\n    <div\n      [ngClass]=\"widgetInstance.cssClass ?? ''\"\n      [class.sb4-widget-required]=\"isRequired()\"\n      class=\"container\"\n    >\n      @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\n        <div [attr.data-testid]=\"widgetInstance.key\" [ngClass]=\"getDirection()\">\n          @for (widget of visibleChildren; track widget) {\n            <smartformwidget\n              [form]=\"form()\"\n              [widgetInstance]=\"widget\"\n              class=\"container-item\"\n              [ngClass]=\"widget.cssClass ?? ''\"\n              [onBlur]=\"onBlur()\"\n              [onValueChange]=\"onValueChange\"\n              [sophisticatedValueChange]=\"sophisticatedValueChange()\"\n              [blurSophisticatedValueChange]=\"blurSophisticatedValueChange()\"\n              class=\"{{ widget.key }}\"\n              [labelColor]=\"labelColor()\"\n            ></smartformwidget>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD) {\n        <div (capsLock)=\"capsOn = $event\" class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input textField widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            @if (!widgetInstance.selection) {\n              <input\n                [formControlName]=\"widgetInstance.key\"\n                [id]=\"widgetInstance.key\"\n                [attr.data-testid]=\"widgetInstance.key\"\n                [attr.inputmode]=\"\n                  widgetInstance.inputMode ? widgetInstance.inputMode.toLocaleLowerCase() : 'text'\n                \"\n                [type]=\"'string'\"\n                [value]=\"widgetInstance.value\"\n                [readonly]=\"widgetInstance.isReadonly\"\n                placeholder=\"{{ widgetInstance.placeholder }}\"\n                matInput\n                (change)=\"handleBlurEvent($event)\"\n                (input)=\"onValueChange?.next($event)\"\n                type=\"{{ widgetInstance.isPassword ? (hidePassword ? 'password' : 'text') : '' }}\"\n                (keydown.enter)=\"onKeydown()\"\n                maxlength=\"{{ widgetInstance.maxLength }}\"\n                [mask]=\"widgetInstance.mask\"\n              />\n            }\n            <!-- [mask]=\"widgetInstance.mask ?? ''\" -->\n            @if (widgetInstance.selection) {\n              <input\n                [formControlName]=\"widgetInstance.key\"\n                [id]=\"widgetInstance.key\"\n                [attr.data-testid]=\"widgetInstance.key\"\n                [type]=\"'string'\"\n                [value]=\"widgetInstance.value\"\n                [readonly]=\"widgetInstance.isReadonly\"\n                placeholder=\"{{ widgetInstance.placeholder }}\"\n                matInput\n                (change)=\"handleBlurEvent($event)\"\n                (input)=\"onValueChange?.next($event)\"\n                (click)=\"onValueChange?.next($event)\"\n                type=\"{{ widgetInstance.isPassword ? 'password' : '' }}\"\n                [matAutocomplete]=\"textFieldAuto\"\n                (keydown.enter)=\"onKeydown()\"\n              />\n            }\n            @if (widgetInstance.isPassword) {\n              <button mat-icon-button matSuffix (click)=\"togglePasswordVisibility($event)\">\n                <mat-icon fontSet=\"material-symbols-outlined\">{{\n                  hidePassword ? 'visibility_off' : 'visibility'\n                }}</mat-icon>\n              </button>\n            }\n            <mat-autocomplete #textFieldAuto=\"matAutocomplete\">\n              @for (option of filteredOptions | async; track option) {\n                <mat-option [value]=\"option.label\">\n                  <span [innerHTML]=\"option.label | highlight: toHighlight\"></span>\n                </mat-option>\n              }\n            </mat-autocomplete>\n            @if (capsOn && widgetInstance.isPassword) {\n              <span class=\"mat-error\">\n                {{ widgetInstance.capsLockWarning }}\n              </span>\n            }\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            <span matPrefix>\n              @if (capsOn && widgetInstance.isPassword) {\n                <smart-icon\n                  [icon]=\"widgetInstance.capsLockWarningIcon ?? 'keyboard_capslock'\"\n                  color=\"warn\"\n                ></smart-icon>\n              }\n              @if (widgetInstance.icon && widgetInstance.iconPosition === 'PRE') {\n                <smart-icon\n                  [icon]=\"widgetInstance.icon\"\n                  [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                ></smart-icon>\n              }\n              {{ widgetInstance.prefix }}\n            </span>\n            <span matSuffix>\n              {{ widgetInstance.suffix }}\n            </span>\n            @if (\n              widgetInstance.icon &&\n              (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n            ) {\n              <smart-icon\n                [icon]=\"widgetInstance.icon\"\n                [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                matSuffix\n              ></smart-icon>\n            }\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            <div class=\"textFieldButtons\">\n              @if (widgetInstance.textFieldProperties?.clearable) {\n                <ui-action-button\n                  class=\"clearButton\"\n                  [addBasicClasses]=\"false\"\n                  [descriptor]=\"clearButtonDescriptor\"\n                  (actionClick)=\"clearField(widgetInstance.key)\"\n                />\n              }\n            </div>\n            @if (isToolbarPresent()) {\n              <smart-ui-action-toolbar\n                class=\"textFieldToolbar\"\n                matSuffix\n                [id]=\"widgetInstance.toolbarId\"\n              ></smart-ui-action-toolbar>\n            }\n            @if (widgetInstance.textFieldButton) {\n              <button\n                matSuffix\n                mat-button\n                color=\"{{ widgetInstance.textFieldButton.color }}\"\n                (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\n              >\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().PRE &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.textFieldButton.icon\"\n                    [color]=\"widgetInstance.textFieldButton.iconColor\"\n                  >\n                  </smart-icon>\n                }\n                {{ widgetInstance.textFieldButton.label }}\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().POST &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\n                }\n              </button>\n            }\n            @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n              <mat-hint matSuffix align=\"end\">{{\n                widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n              }}</mat-hint>\n            }\n          </mat-form-field>\n          @if (\n            !widgetInstance?.hint ||\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input textField widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <input\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [value]=\"widgetInstance.value\"\n              [readonly]=\"widgetInstance.isReadonly\"\n              [type]=\"'number'\"\n              placeholder=\"{{ widgetInstance.placeholder }}\"\n              [min]=\"widgetInstance.minValues ?? null\"\n              [max]=\"widgetInstance.maxValues ?? null\"\n              matInput\n              (change)=\"handleBlurEvent($event)\"\n              (input)=\"onValueChange?.next($event)\"\n            />\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            <span matPrefix>\n              {{ widgetInstance.prefix }}\n            </span>\n            <span matSuffix>\n              {{ widgetInstance.suffix }}\n            </span>\n            @if (widgetInstance.icon) {\n              <smart-icon [icon]=\"widgetInstance.icon\" matSuffix> </smart-icon>\n            }\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            @if (widgetInstance.textFieldButton) {\n              <button\n                matSuffix\n                mat-button\n                color=\"{{ widgetInstance.textFieldButton.color }}\"\n                (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\n              >\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().PRE &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\n                }\n                {{ widgetInstance.textFieldButton.label }}\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().POST &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\n                }\n              </button>\n            }\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-chip-grid #chipList aria-label=\"{{ widgetInstance.label }}\">\n              @for (value of widgetInstance.value; track value) {\n                <mat-chip-row [disabled]=\"widgetInstance.isDisabled\" (removed)=\"remove(value)\">\n                  {{ value }}\n                  <button matChipRemove>\n                    <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n                  </button>\n                </mat-chip-row>\n              }\n              <input\n                #chipInput\n                [attr.data-testid]=\"widgetInstance.key\"\n                placeholder=\"{{ widgetInstance.placeholder }}\"\n                [matChipInputFor]=\"chipList\"\n                [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                [matChipInputAddOnBlur]=\"addOnBlur\"\n                [readonly]=\"widgetInstance.isReadonly\"\n                [matAutocomplete]=\"chipAuto\"\n                (matChipInputTokenEnd)=\"add($event)\"\n                (change)=\"handleBlurEvent($event)\"\n                (input)=\"onValueChange?.next($event)\"\n                [disabled]=\"widgetInstance.isDisabled\"\n              />\n              <mat-autocomplete\n                #chipAuto=\"matAutocomplete\"\n                (optionSelected)=\"selected($event, widgetInstance)\"\n              >\n                @for (item of widgetInstance.valueList; track item) {\n                  <mat-option [disabled]=\"widgetInstance.isDisabled\" [value]=\"item.value\">\n                    {{ item.label }}\n                  </mat-option>\n                }\n              </mat-autocomplete>\n            </mat-chip-grid>\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_LOOKUP) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-chip-grid #chipListLookup aria-label=\"{{ widgetInstance.label }}\">\n              @for (value of widgetInstance.value; track value) {\n                <mat-chip [disabled]=\"widgetInstance.isDisabled\" (removed)=\"remove(value)\">\n                  {{ getChipsValue(value) }}\n                  <button matChipRemove>\n                    <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n                  </button>\n                </mat-chip>\n              }\n              <input\n                [attr.data-testid]=\"widgetInstance.key\"\n                placeholder=\"{{ widgetInstance.placeholder }}\"\n                [matChipInputFor]=\"chipListLookup\"\n                [matChipInputSeparatorKeyCodes]=\"emptySeparatorKeysCodes\"\n                [matChipInputAddOnBlur]=\"false\"\n                [readonly]=\"true\"\n                [disabled]=\"widgetInstance.isDisabled\"\n              />\n            </mat-chip-grid>\n            @if (isToolbarPresent()) {\n              <smart-ui-action-toolbar\n                matSuffix\n                [id]=\"widgetInstance.toolbarId\"\n              ></smart-ui-action-toolbar>\n            }\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_BOX) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <textarea\n              class=\"sb4-textarea\"\n              #sb4Textarea\n              cols=\"30\"\n              cdkTextareaAutosize\n              [cdkAutosizeMinRows]=\"widgetInstance.textBoxProperties?.minRows ?? 1\"\n              [cdkAutosizeMaxRows]=\"widgetInstance.textBoxProperties?.maxRows ?? undefined\"\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [type]=\"'string'\"\n              [value]=\"widgetInstance.value\"\n              [readonly]=\"widgetInstance.isReadonly\"\n              placeholder=\"{{ widgetInstance.placeholder }}\"\n              matInput\n              (change)=\"handleBlurEvent($event)\"\n              maxlength=\"{{ widgetInstance.maxLength }}\"\n            ></textarea>\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n              <mat-hint matSuffix align=\"end\">{{\n                widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n              }}</mat-hint>\n            }\n          </mat-form-field>\n          @if (\n            !widgetInstance.hint || widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\n        <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div\n            class=\"input checkbox widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"radioLabel\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\n              <div class=\"checkbox-item-container\">\n                <mat-checkbox\n                  class=\"selecatbleObject\"\n                  formControlName=\"{{ widgetInstance.key }}\"\n                  (change)=\"onValueChange?.next(widgetInstance)\"\n                  (change)=\"onBlur()?.next(widgetInstance)\"\n                >\n                  {{ widgetInstance.label }}\n                </mat-checkbox>\n              </div>\n              <div class=\"radio-error\">\n                <span class=\"mat-error\">\n                  {{ widgetInstance.error }}\n                </span>\n                @if (widgetInstance.error && widgetInstance.errorIcon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.errorIcon\"\n                    [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  ></smart-icon>\n                }\n              </div>\n            </section>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX_2) {\n        <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div\n            class=\"input checkbox widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"radioLabel\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\n              @for (checkbox of widgetInstance.valueList; track checkbox; let i = $index) {\n                <div class=\"checkbox-item-container\">\n                  @if (checkbox.imageUrl) {\n                    <img\n                      title=\"{{ widgetInstance.key }}\"\n                      class=\"checkbox-item-image\"\n                      [src]=\"checkbox.imageUrl\"\n                    />\n                  }\n                  <mat-checkbox\n                    class=\"selecatbleObject\"\n                    formControlName=\"{{ widgetInstance.key + '.' + checkbox.key }}\"\n                    [value]=\"checkbox.value\"\n                    (change)=\"onValueChange?.next(checkbox)\"\n                    [disabled]=\"widgetInstance.isDisabled!\"\n                  >\n                    {{ checkbox.label }}\n                  </mat-checkbox>\n                </div>\n              }\n              <div class=\"radio-error\">\n                <span class=\"mat-error\">\n                  {{ widgetInstance.error }}\n                </span>\n                @if (widgetInstance.error && widgetInstance.errorIcon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.errorIcon\"\n                    [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  ></smart-icon>\n                }\n              </div>\n            </section>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.RADIO_BUTTON) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-radio-group\n            class=\"input radio-section widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            [attr.data-testid]=\"widgetInstance.key\"\n            aria-label=\"{{ widgetInstance.label }}\"\n            appearance=\"outline\"\n            formControlName=\"{{ widgetInstance.key }}\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"radioLabel\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <div [ngClass]=\"getDirection()\">\n              @for (radio of widgetInstance.valueList; track radio) {\n                <div class=\"radio-item-container\">\n                  @if (radio.imageUrl) {\n                    <img\n                      title=\"{{ widgetInstance.key }}\"\n                      class=\"radio-item-image\"\n                      [src]=\"radio.imageUrl\"\n                    />\n                  }\n                  <mat-radio-button\n                    class=\"selecatbleObject\"\n                    value=\"{{ radio.value }}\"\n                    [ngClass]=\"getDirection()\"\n                    (change)=\"onValueChange?.next(radio.value)\"\n                    [disabled]=\"widgetInstance.isDisabled\"\n                  >\n                    {{ radio.label }}\n                  </mat-radio-button>\n                </div>\n              }\n              <div class=\"radio-error\">\n                <span class=\"mat-error\">\n                  {{ widgetInstance.error }}\n                </span>\n                @if (widgetInstance.error && widgetInstance.errorIcon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.errorIcon\"\n                    [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  ></smart-icon>\n                }\n              </div>\n              <div class=\"radio-icon\">\n                @if (widgetInstance.icon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.icon\"\n                    [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                  >\n                  </smart-icon>\n                }\n              </div>\n            </div>\n          </mat-radio-group>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DATE_PICKER) {\n        <div class=\"datePicker widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker (closed)=\"handleBlurEvent(widgetInstance)\"></mat-datepicker>\n            <input\n              matInput\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [value]=\"widgetInstance.value\"\n              [min]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.minDate ?? null)\"\n              [max]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.maxDate ?? null)\"\n              placeholder=\"{{ widgetInstance.placeholder }}\"\n              [matDatepicker]=\"picker\"\n              (change)=\"handleBlurEvent(widgetInstance)\"\n              (dateChange)=\"onValueChange?.next(widgetInstance)\"\n              [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\n            />\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            <span matSuffix>\n              {{ widgetInstance.suffix }}\n            </span>\n            @if (\n              widgetInstance.icon &&\n              (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n            ) {\n              <smart-icon\n                [icon]=\"widgetInstance.icon\"\n                [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                matSuffix\n              ></smart-icon>\n            }\n            <mat-hint>\n              {{ widgetInstance.dateFormatHint }}\n            </mat-hint>\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.MONTH_PICKER) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <div class=\"{{ labelColor() }} smart-form-widget-label\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </div>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <lib-smart-month-picker\n            [attr.data-testid]=\"widgetInstance.key\"\n            [widgetInstance]=\"widgetInstance\"\n            [control]=\"form().controls[widgetInstance.key]\"\n            (valueChange)=\"handleYearMonthPicked($event)\"\n          ></lib-smart-month-picker>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <div\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </div>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div class=\"dateTimePickerContainer\">\n            <mat-form-field\n              class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\n              [ngClass]=\"getNgClass()\"\n              [ngStyle]=\"getStyle()\"\n              appearance=\"outline\"\n            >\n              @if (!widgetInstance.showLabel) {\n                <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                  {{ getWidgetLabel(widgetInstance) }}\n                </mat-label>\n              }\n              <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n              <mat-datepicker #picker (closed)=\"handleBlurEvent(widgetInstance)\"></mat-datepicker>\n              <input\n                #dateInput\n                matInput\n                [formControlName]=\"widgetInstance.key\"\n                [attr.data-testid]=\"widgetInstance.key\"\n                [min]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.minDate ?? null)\"\n                [max]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.maxDate ?? null)\"\n                [id]=\"widgetInstance.key\"\n                [value]=\"widgetInstance.value\"\n                placeholder=\"{{ widgetInstance.placeholder }}\"\n                [matDatepicker]=\"picker\"\n                (blur)=\"onDatePickerBlur($event)\"\n                (dateChange)=\"onValueChange?.next(widgetInstance)\"\n                [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\n              />\n              @if (widgetInstance.error && widgetInstance.errorIcon) {\n                <smart-icon\n                  [icon]=\"widgetInstance.errorIcon\"\n                  [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  matSuffix\n                ></smart-icon>\n              }\n              <span matSuffix>\n                {{ widgetInstance.suffix }}\n              </span>\n              @if (\n                widgetInstance.icon &&\n                (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n              ) {\n                <smart-icon\n                  [icon]=\"widgetInstance.icon\"\n                  [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                  matSuffix\n                ></smart-icon>\n              }\n              <mat-hint>\n                {{ widgetInstance.dateFormatHint }}\n              </mat-hint>\n            </mat-form-field>\n            @if (hasCreated) {\n              <mat-form-field\n                class=\"input widgetContent time\"\n                [ngClass]=\"widgetInstance.cssClass ?? ''\"\n                [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\n                appearance=\"outline\"\n              >\n                <input\n                  #timeInput\n                  [formControlName]=\"widgetInstance.key + '-time'\"\n                  [attr.data-testid]=\"widgetInstance.key + '-time'\"\n                  [id]=\"widgetInstance.key\"\n                  [type]=\"'time'\"\n                  placeholder=\"{{ widgetInstance.placeholder }}\"\n                  (blur)=\"onTimePickerBlur($event)\"\n                  matInput\n                />\n              </mat-form-field>\n            }\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.SELECT) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <div\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </div>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-select\n              #select\n              [formControlName]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              (selectionChange)=\"onValueChange?.next($event.value)\"\n              (opened)=\"focusSelectFilter()\"\n              (closed)=\"handleBlurEvent(widgetInstance); clearSelectFilter()\"\n              [disabled]=\"widgetInstance.isDisabled!\"\n              [compareWith]=\"\n                widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\n              \"\n              placeholder=\"{{ selectionPlaceholder }}\"\n            >\n              @if (hasSelectFilter()) {\n                <div class=\"comboBoxFilter\">\n                  <mat-icon fontSet=\"material-symbols-outlined\">search</mat-icon>\n                  <input\n                    #selectFilterInput\n                    type=\"text\"\n                    autocomplete=\"off\"\n                    [value]=\"selectFilter()\"\n                    [placeholder]=\"selectFilterPlaceholder\"\n                    (input)=\"onSelectFilterInput(select, $any($event.target).value)\"\n                    (keydown)=\"onSelectFilterKeydown(select, $event)\"\n                  />\n                </div>\n              }\n              @for (option of selectOptions(); track option) {\n                <div>\n                  @if (option.type === getType().ITEM_GROUP) {\n                    <mat-optgroup [label]=\"option.label\" [disabled]=\"option.isDisabled\">\n                      @for (innerOption of option.valueList; track innerOption) {\n                        <mat-option [value]=\"innerOption.value\" [disabled]=\"innerOption.isDisabled\">\n                          @if (innerOption.icon) {\n                            <smart-icon\n                              [icon]=\"innerOption.icon\"\n                              [color]=\"innerOption.iconColor\"\n                            ></smart-icon>\n                          }\n                          {{ innerOption.label }}\n                        </mat-option>\n                      }\n                    </mat-optgroup>\n                  }\n                  @if (option.type === getType().ITEM) {\n                    <mat-option [value]=\"option.value\" [disabled]=\"option.isDisabled\">\n                      @if (option.icon) {\n                        <smart-icon [icon]=\"option.icon\" [color]=\"option.iconColor\"></smart-icon>\n                      }\n                      {{ option.label }}</mat-option\n                    >\n                  }\n                </div>\n              }\n            </mat-select>\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            <span matSuffix>\n              {{ widgetInstance.suffix }}\n            </span>\n            @if (\n              widgetInstance.icon &&\n              (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n            ) {\n              <smart-icon\n                [icon]=\"widgetInstance.icon\"\n                [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                matSuffix\n              ></smart-icon>\n            }\n            @if (widgetInstance.selectProperties?.clearable) {\n              <span matSuffix class=\"textFieldButtons\" (click)=\"$event.stopPropagation()\">\n                <ui-action-button\n                  class=\"clearButton\"\n                  [addBasicClasses]=\"false\"\n                  [descriptor]=\"clearButtonDescriptor\"\n                  (actionClick)=\"clearSelect(widgetInstance.key)\"\n                />\n              </span>\n            }\n            @if (isToolbarPresent()) {\n              <smart-ui-action-toolbar\n                class=\"textFieldToolbar\"\n                matSuffix\n                [id]=\"widgetInstance.toolbarId\"\n              ></smart-ui-action-toolbar>\n            }\n          </mat-form-field>\n          @if (\n            !widgetInstance?.hint ||\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-select\n              #select\n              [formControlName]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              multiple\n              (selectionChange)=\"onValueChange?.next($event.value); refocusSelectFilter(select)\"\n              (opened)=\"focusSelectFilter()\"\n              (closed)=\"handleBlurEvent(widgetInstance); clearSelectFilter()\"\n              [disabled]=\"widgetInstance.isDisabled!\"\n              [compareWith]=\"\n                widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\n              \"\n              placeholder=\"{{ selectionPlaceholder }}\"\n            >\n              @if (hasSelectFilter()) {\n                <div class=\"comboBoxFilter\">\n                  <mat-icon fontSet=\"material-symbols-outlined\">search</mat-icon>\n                  <input\n                    #selectFilterInput\n                    type=\"text\"\n                    autocomplete=\"off\"\n                    [value]=\"selectFilter()\"\n                    [placeholder]=\"selectFilterPlaceholder\"\n                    (input)=\"onSelectFilterInput(select, $any($event.target).value)\"\n                    (keydown)=\"onSelectFilterKeydown(select, $event)\"\n                  />\n                </div>\n              }\n              @if (hasSelectAll()) {\n                <div class=\"comboBoxSelectAll\" (keydown)=\"$event.stopPropagation()\">\n                  <mat-checkbox\n                    [checked]=\"selectAllState() === 'all'\"\n                    [indeterminate]=\"selectAllState() === 'some'\"\n                    (change)=\"toggleSelectAll(select)\"\n                    >{{ selectAllLabel }}</mat-checkbox\n                  >\n                </div>\n              }\n              @for (option of selectOptions(); track option) {\n                <div>\n                  @if (option.type === getType().ITEM_GROUP) {\n                    <mat-optgroup [label]=\"option.label\" [disabled]=\"option.isDisabled\">\n                      @for (innerOption of option.valueList; track innerOption) {\n                        <mat-option [value]=\"innerOption.value\" [disabled]=\"innerOption.isDisabled\">\n                          @if (innerOption.icon) {\n                            <smart-icon\n                              [icon]=\"innerOption.icon\"\n                              [color]=\"innerOption.iconColor\"\n                            ></smart-icon>\n                          }\n                          {{ innerOption.label }}</mat-option\n                        >\n                      }\n                    </mat-optgroup>\n                  }\n                  @if (option.type === getType().ITEM) {\n                    <mat-option [value]=\"option.value\" [disabled]=\"option.isDisabled\">\n                      @if (option.icon) {\n                        <smart-icon [icon]=\"option.icon\" [color]=\"option.iconColor\"></smart-icon>\n                      }\n                      {{ option.label }}</mat-option\n                    >\n                  }\n                </div>\n              }\n            </mat-select>\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            @if (isToolbarPresent()) {\n              <smart-ui-action-toolbar\n                class=\"textFieldToolbar\"\n                matSuffix\n                [id]=\"widgetInstance.toolbarId\"\n              ></smart-ui-action-toolbar>\n            }\n          </mat-form-field>\n          @if (\n            !widgetInstance?.hint ||\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.LABEL) {\n        <div class=\"label widgetContainer\" [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\">\n          <div class=\"label-title labelContainer\" [ngClass]=\"widgetInstance.cssClass ?? ''\">\n            <h4\n              class=\"{{ labelColor() }} smart-form-widget-label {{ widgetInstance.cssClass ?? '' }}\"\n              [ngClass]=\"getNgClass()\"\n              [ngStyle]=\"getStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n            @if (widgetInstance.widgetDescription) {\n              <p>{{ widgetInstance.widgetDescription }}</p>\n            }\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TIME) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent time {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <input\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [type]=\"'time'\"\n              placeholder=\"{{ widgetInstance.placeholder }}\"\n              matInput\n              (change)=\"handleBlurEvent(widgetInstance)\"\n            />\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TOGGLE) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div\n            class=\"widgetContent  {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n          >\n            <mat-slide-toggle\n              formControlName=\"{{ widgetInstance.key }}\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              (change)=\"onValueChange?.next($event)\"\n              [labelPosition]=\"widgetInstance.toggleLabelPosition ?? 'before'\"\n              >{{ !widgetInstance.showLabel ? widgetInstance.label : '' }}</mat-slide-toggle\n            ><span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n              ></smart-icon>\n            }\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.INDICATOR) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <h4\n              class=\"{{ labelColor() }} labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n              [ngClass]=\"getLabelNgClass()\"\n              [ngStyle]=\"getLabelStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          <div class=\"smartIndicator widgetContent\">\n            <div\n              class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\"\n              [ngClass]=\"getNgClass()\"\n            >\n              @for (item of indicatorItems; track item; let i = $index) {\n                <div class=\"indicatorItem\" [ngClass]=\"getIndicatorItemClass(i)\"></div>\n              }\n            </div>\n            <p [ngClass]=\"getIndicatorStatusLabelColor()\">\n              {{ getIndicatorStatusLabel() }}\n            </p>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.RECORDING_UPLOADER) {\n        <div class=\"widgetContainer\">\n          <div class=\"widgetItemContainer\">\n            <smart-voice-recorder\n              [formControlName]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [widgetInstance]=\"widgetInstance\"\n              (uploadFilesEvent)=\"upload($event)\"\n            />\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.FILE_UPLOADER) {\n        <div class=\"widgetContainer\">\n          <smart-file-editor\n            [formControlName]=\"widgetInstance.key\"\n            [attr.data-testid]=\"widgetInstance.key\"\n            [widgetInstance]=\"widgetInstance\"\n            (uploadFilesEvent)=\"upload($event)\"\n            (fileEvent)=\"executeUiAction($event.uiAction)\"\n          />\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.MULTI_FILE_UPLOADER) {\n        <div class=\"widgetContainer\">\n          <smart-multi-file-editor\n            [formControlName]=\"widgetInstance.key\"\n            [attr.data-testid]=\"widgetInstance.key\"\n            [widgetInstance]=\"widgetInstance\"\n            (uploadFilesEvent)=\"upload($event)\"\n            (fileEvent)=\"executeUiAction($event.uiAction)\"\n          />\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.IMAGE) {\n        <div class=\"widgetContainer imageContainer\">\n          @if (widgetInstance.showLabel && getWidgetLabel(widgetInstance)) {\n            <h4\n              class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\n              [ngClass]=\"getLabelNgClass()\"\n              [ngStyle]=\"getLabelStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          @if (widgetInstance.imageProperties?.image) {\n            <smart-icon\n              [imageResource]=\"$safeNavigationMigration(widgetInstance.imageProperties?.image)\"\n              class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\n              alt=\"Image\"\n              title=\"{{ widgetInstance.key }}\"\n              [ngClass]=\"getNgClass()\"\n              [ngStyle]=\"getStyle()\"\n            ></smart-icon>\n          } @else if (widgetInstance.value) {\n            <smart-icon\n              [(ngModel)]=\"widgetInstance.value\"\n              [imageResource]=\"widgetInstance.value\"\n              class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\n              alt=\"Image\"\n              title=\"{{ widgetInstance.key }}\"\n              [ngClass]=\"getNgClass()\"\n              [ngStyle]=\"getStyle()\"\n            ></smart-icon>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DIV) {\n        <div\n          class=\"smartDiv\"\n          [innerHTML]=\"sanitizeHtml(getWidgetLabel(widgetInstance))\"\n          [ngClass]=\"getNgClass()\"\n          [class.clickable]=\"!!widgetInstance.divProperties?.onClick\"\n          [ngStyle]=\"getStyle()\"\n          (click)=\"onDivClick()\"\n        ></div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.HTML) {\n        <smart-html-widget\n          [widgetInstance]=\"widgetInstance\"\n          [ngClass]=\"getNgClass()\"\n          [ngStyle]=\"getStyle()\"\n        ></smart-html-widget>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.SVG) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <h4\n              class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\n              [ngClass]=\"getLabelNgClass()\"\n              [ngStyle]=\"getLabelStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          <div\n            class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [innerHTML]=\"sanitizeHtml(widgetInstance.value)\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n          ></div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DIVIDER) {\n        <div class=\"widgetContainer\">\n          <hr\n            class=\"smartDivider {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n          />\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.BUTTON) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <h4\n              class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\n              [ngClass]=\"getLabelNgClass()\"\n              [ngStyle]=\"getLabelStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          <div\n            class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n          >\n            <button\n              mat-button\n              [attr.data-testid]=\"widgetInstance.key\"\n              [ngClass]=\"getButtonType(widgetInstance.uiActionDescriptor)\"\n              [color]=\"$safeNavigationMigration(widgetInstance.uiActionDescriptor?.color)\"\n              (click)=\"onButtonClicked(widgetInstance)\"\n            >\n              @if (isOnlyIcon(widgetInstance.uiActionDescriptor)) {\n                @if (widgetInstance.uiActionDescriptor?.icon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n                    [color]=\"\n                      widgetInstance.uiActionDescriptor?.iconColor ??\n                      widgetInstance.uiActionDescriptor?.color\n                    \"\n                  ></smart-icon>\n                }\n              } @else {\n                @if (\n                  widgetInstance.uiActionDescriptor?.icon &&\n                  widgetInstance.uiActionDescriptor?.iconPosition === 'PRE'\n                ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n                    [color]=\"\n                      widgetInstance.uiActionDescriptor?.iconColor ??\n                      widgetInstance.uiActionDescriptor?.color\n                    \"\n                  ></smart-icon>\n                }\n                {{ widgetInstance.uiActionDescriptor?.title }}\n                @if (\n                  widgetInstance.uiActionDescriptor?.icon &&\n                  widgetInstance.uiActionDescriptor?.iconPosition === 'POST'\n                ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n                    [color]=\"\n                      widgetInstance.uiActionDescriptor?.iconColor ??\n                      widgetInstance.uiActionDescriptor?.color\n                    \"\n                  ></smart-icon>\n                }\n              }\n            </button>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.COMPONENT) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <h4 class=\"labelContainer {{ labelColor() }}\">\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          <div class=\"widgetContent\">\n            <ng-template #customComponent></ng-template>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.RICH_TEXT) {\n        <div class=\"widgetContainer\">\n          <div class=\"labelContainer\">\n            @if (widgetInstance.showLabel) {\n              <h4 class=\"{{ labelColor() }}\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n            }\n            @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <div class=\"widgetContent\">\n            <quill-editor\n              #quillEditor\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [modules]=\"\n                widgetInstance.isDisabled ? emptyQuillToolbar : widgetInstance.quillModules\n              \"\n              [placeholder]=\"widgetInstance.placeholder ?? ''\"\n              [readOnly]=\"widgetInstance.isReadonly ?? false\"\n              [maxLength]=\"widgetInstance.maxLength ?? 0\"\n              (onContentChanged)=\"onRichTextEditorContentChanged($event)\"\n            ></quill-editor>\n            @if (\n              !widgetInstance?.hint ||\n              widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n            ) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n            @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n              <mat-hint matSuffix align=\"end\" class=\"rich-text-editor-leeway-counter\">{{\n                getRichTextEditorLengthLeeway()\n              }}</mat-hint>\n            }\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.SORTABLE) {\n        <div class=\"widgetContainer\">\n          <div class=\"labelContainer\">\n            @if (widgetInstance.showLabel) {\n              <h4 class=\"{{ labelColor() }}\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n            }\n            @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <div class=\"widgetContent\">\n            <lib-sortable-widget\n              [formControlName]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [widgetInstance]=\"widgetInstance\"\n            ></lib-sortable-widget>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.MATRIX) {\n        <div class=\"widgetContainer\">\n          <div class=\"labelContainer\">\n            @if (widgetInstance.showLabel) {\n              <h4 class=\"{{ labelColor() }}\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n            }\n            @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <table class=\"matrixTable widgetContent\">\n            <tr>\n              <th></th>\n              @for (option of widgetInstance.value.columns; track option) {\n                <th class=\"optionLabel\">\n                  {{ option.displayValue }}\n                </th>\n              }\n            </tr>\n            @for (question of widgetInstance.value.rows; track question; let i = $index) {\n              <tr>\n                <th class=\"questionLabel\">\n                  <label>{{ question.displayValue }}</label>\n                </th>\n                @for (option of widgetInstance.value.columns; track option; let j = $index) {\n                  <td class=\"selectTd\">\n                    @if (!widgetInstance.isMultiple) {\n                      <mat-radio-group\n                        [formControlName]=\"widgetInstance.key + '.' + question.code\"\n                        [name]=\"'q' + i\"\n                      >\n                        <mat-radio-button [value]=\"option.code\"> </mat-radio-button>\n                      </mat-radio-group>\n                    }\n                    @if (widgetInstance.isMultiple) {\n                      <div>\n                        <mat-checkbox\n                          [formControlName]=\"\n                            widgetInstance.key + '.data.' + question.code + '.' + option.code\n                          \"\n                          [value]=\"widgetInstance.value['data'][question.code][option.code]\"\n                          [checked]=\"true\"\n                        ></mat-checkbox>\n                      </div>\n                    }\n                  </td>\n                }\n                <br />\n                @if (widgetInstance.button) {\n                  <button mat-icon-button (click)=\"removeMatrixRow(question)\">\n                    <smart-icon icon=\"close\"></smart-icon>\n                  </button>\n                }\n              </tr>\n            }\n          </table>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.YOUTUBE_PLAYER) {\n        <div class=\"widgetContainer\">\n          <div class=\"labelContainer\">\n            @if (widgetInstance.showLabel) {\n              <h4\n                class=\"{{ labelColor() }} {{ widgetInstance.cssLabelClass }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n            }\n            @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <youtube-player\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            videoId=\"{{ widgetInstance.videoId }}\"\n            [width]=\"widgetInstance.width\"\n            [height]=\"widgetInstance.height\"\n            [startSeconds]=\"widgetInstance.startSeconds\"\n            [endSeconds]=\"widgetInstance.endSeconds\"\n          ></youtube-player>\n          @if (\n            !widgetInstance?.hint ||\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\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}.comboBoxFilter{display:flex;flex-direction:row;align-items:center;gap:.5rem;min-height:48px;padding:0 1rem;border-bottom:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.comboBoxFilter:focus-within{border-bottom-color:var(--mat-sys-primary, #3f51b5)}.comboBoxFilter .mat-icon{flex:0 0 auto;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .54))}.comboBoxFilter input{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;font:inherit;color:inherit}.comboBoxSelectAll{display:flex;align-items:center;min-height:48px;padding:0 .25rem;border-bottom:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.textFieldButtons{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.clearButton .mat-mdc-raised-button,.clearButton button{background-color:unset!important;border:unset;color:#6b7280!important;box-shadow:unset;font-size:1rem!important}.clearButton .mat-icon.mat-primary{color:#6b7280!important}.clearButton .mat-mdc-raised-button:hover,.clearButton button:hover{color:#6b7280cc!important;background-color:unset;border:unset;box-shadow:unset;font-size:1rem!important}.mat-mdc-form-field-infix{display:flex;flex-direction:row}textarea:not(:placeholder-shown)~label{top:-.75em!important;font-size:12px!important}.disabledEditor *{-webkit-user-modify:read-only;-moz-user-modify:read-only;user-modify:read-only}.sb4-textarea{--sb4-textarea-line-height: 20px;line-height:var(--sb4-textarea-line-height);overflow-y:auto!important}.widgetContainer .imageIcon{max-width:unset!important;height:unset!important}.material .sb4-textarea{resize:vertical!important}.material .smart-form-widget-label{font-weight:700}.material .mat-mdc-form-field-subscript-wrapper{display:none}.label-right{display:flex;gap:.5rem;flex-direction:row-reverse}.label-left{display:flex;gap:.5rem;flex-direction:row}.label-top{display:flex;gap:.5rem;flex-direction:column}.label-bottom{display:flex;gap:.5rem;flex-direction:column-reverse}.smartDiv{width:100%}.clickable{cursor:pointer}\n/*!\n * Quill Editor v2.0.3\n * https://quilljs.com\n * Copyright (c) 2017-2024, Slab\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */\n"], dependencies: [{ kind: "component", type: SmartformwidgetComponent, selector: "smartformwidget", inputs: ["form", "widgetInstance", "onBlur", "onValueChange", "labelColor", "sophisticatedValueChange", "blurSophisticatedValueChange"], outputs: ["valueCleared"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TrackCapsDirective, selector: "[capsLock]", outputs: ["capsLock"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "typeFromDecimals", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix", "defaultValueOnBlur", "value", "disabled", "touched"], outputs: ["valueChange", "touchedChange", "maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: SmartMonthPickerComponent, selector: "lib-smart-month-picker", inputs: ["widgetInstance", "control"], outputs: ["valueChange"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: SmartVoiceRecorderComponent, selector: "smart-voice-recorder", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: SmartFileEditorComponent, selector: "smart-file-editor", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent", "fileEvent"] }, { kind: "component", type: SmartMultiFileEditorComponent, selector: "smart-multi-file-editor", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent", "fileEvent"] }, { kind: "component", type: SmartHtmlWidgetComponent, selector: "smart-html-widget", inputs: ["widgetInstance"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: SortableWidgetComponent, selector: "lib-sortable-widget", inputs: ["widgetInstance"] }, { kind: "component", type: YouTubePlayer, selector: "youtube-player", inputs: ["videoId", "height", "width", "startSeconds", "endSeconds", "suggestedQuality", "playerVars", "disableCookies", "loadApi", "disablePlaceholder", "showBeforeIframeApiLoads", "placeholderButtonLabel", "placeholderImageQuality"], outputs: ["ready", "stateChange", "error", "apiChange", "playbackQualityChange", "playbackRateChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartformwidgetComponent, decorators: [{
             type: Component,
@@ -13650,7 +13665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         YouTubePlayer,
                         AsyncPipe,
                         HighlightPipe,
-                    ], template: "<div class=\"container material\" [formGroup]=\"form()\">\n  @if (widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible) {\n    <div\n      [ngClass]=\"widgetInstance.cssClass ?? ''\"\n      [class.sb4-widget-required]=\"isRequired()\"\n      class=\"container\"\n    >\n      @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\n        <div [attr.data-testid]=\"widgetInstance.key\" [ngClass]=\"getDirection()\">\n          @for (widget of visibleChildren; track widget) {\n            <smartformwidget\n              [form]=\"form()\"\n              [widgetInstance]=\"widget\"\n              class=\"container-item\"\n              [ngClass]=\"widget.cssClass ?? ''\"\n              [onBlur]=\"onBlur()\"\n              [onValueChange]=\"onValueChange\"\n              [sophisticatedValueChange]=\"sophisticatedValueChange()\"\n              [blurSophisticatedValueChange]=\"blurSophisticatedValueChange()\"\n              class=\"{{ widget.key }}\"\n              [labelColor]=\"labelColor()\"\n            ></smartformwidget>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD) {\n        <div (capsLock)=\"capsOn = $event\" class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input textField widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            @if (!widgetInstance.selection) {\n              <input\n                [formControlName]=\"widgetInstance.key\"\n                [id]=\"widgetInstance.key\"\n                [attr.data-testid]=\"widgetInstance.key\"\n                [attr.inputmode]=\"\n                  widgetInstance.inputMode ? widgetInstance.inputMode.toLocaleLowerCase() : 'text'\n                \"\n                [type]=\"'string'\"\n                [value]=\"widgetInstance.value\"\n                [readonly]=\"widgetInstance.isReadonly\"\n                placeholder=\"{{ widgetInstance.placeholder }}\"\n                matInput\n                (change)=\"handleBlurEvent($event)\"\n                (input)=\"onValueChange?.next($event)\"\n                type=\"{{ widgetInstance.isPassword ? (hidePassword ? 'password' : 'text') : '' }}\"\n                (keydown.enter)=\"onKeydown()\"\n                maxlength=\"{{ widgetInstance.maxLength }}\"\n                [mask]=\"widgetInstance.mask\"\n              />\n            }\n            <!-- [mask]=\"widgetInstance.mask ?? ''\" -->\n            @if (widgetInstance.selection) {\n              <input\n                [formControlName]=\"widgetInstance.key\"\n                [id]=\"widgetInstance.key\"\n                [attr.data-testid]=\"widgetInstance.key\"\n                [type]=\"'string'\"\n                [value]=\"widgetInstance.value\"\n                [readonly]=\"widgetInstance.isReadonly\"\n                placeholder=\"{{ widgetInstance.placeholder }}\"\n                matInput\n                (change)=\"handleBlurEvent($event)\"\n                (input)=\"onValueChange?.next($event)\"\n                (click)=\"onValueChange?.next($event)\"\n                type=\"{{ widgetInstance.isPassword ? 'password' : '' }}\"\n                [matAutocomplete]=\"textFieldAuto\"\n                (keydown.enter)=\"onKeydown()\"\n              />\n            }\n            @if (widgetInstance.isPassword) {\n              <button mat-icon-button matSuffix (click)=\"togglePasswordVisibility($event)\">\n                <mat-icon fontSet=\"material-symbols-outlined\">{{\n                  hidePassword ? 'visibility_off' : 'visibility'\n                }}</mat-icon>\n              </button>\n            }\n            <mat-autocomplete #textFieldAuto=\"matAutocomplete\">\n              @for (option of filteredOptions | async; track option) {\n                <mat-option [value]=\"option.label\">\n                  <span [innerHTML]=\"option.label | highlight: toHighlight\"></span>\n                </mat-option>\n              }\n            </mat-autocomplete>\n            @if (capsOn && widgetInstance.isPassword) {\n              <span class=\"mat-error\">\n                {{ widgetInstance.capsLockWarning }}\n              </span>\n            }\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            <span matPrefix>\n              @if (capsOn && widgetInstance.isPassword) {\n                <smart-icon\n                  [icon]=\"widgetInstance.capsLockWarningIcon ?? 'keyboard_capslock'\"\n                  color=\"warn\"\n                ></smart-icon>\n              }\n              @if (widgetInstance.icon && widgetInstance.iconPosition === 'PRE') {\n                <smart-icon\n                  [icon]=\"widgetInstance.icon\"\n                  [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                ></smart-icon>\n              }\n              {{ widgetInstance.prefix }}\n            </span>\n            <span matSuffix>\n              {{ widgetInstance.suffix }}\n            </span>\n            @if (\n              widgetInstance.icon &&\n              (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n            ) {\n              <smart-icon\n                [icon]=\"widgetInstance.icon\"\n                [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                matSuffix\n              ></smart-icon>\n            }\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            <div class=\"textFieldButtons\">\n              @if (widgetInstance.textFieldProperties?.clearable) {\n                <ui-action-button\n                  class=\"clearButton\"\n                  [addBasicClasses]=\"false\"\n                  [descriptor]=\"clearButtonDescriptor\"\n                  (actionClick)=\"clearField(widgetInstance.key)\"\n                />\n              }\n            </div>\n            @if (isToolbarPresent()) {\n              <smart-ui-action-toolbar\n                class=\"textFieldToolbar\"\n                matSuffix\n                [id]=\"widgetInstance.toolbarId\"\n              ></smart-ui-action-toolbar>\n            }\n            @if (widgetInstance.textFieldButton) {\n              <button\n                matSuffix\n                mat-button\n                color=\"{{ widgetInstance.textFieldButton.color }}\"\n                (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\n              >\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().PRE &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.textFieldButton.icon\"\n                    [color]=\"widgetInstance.textFieldButton.iconColor\"\n                  >\n                  </smart-icon>\n                }\n                {{ widgetInstance.textFieldButton.label }}\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().POST &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\n                }\n              </button>\n            }\n            @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n              <mat-hint matSuffix align=\"end\">{{\n                widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n              }}</mat-hint>\n            }\n          </mat-form-field>\n          @if (\n            !widgetInstance?.hint ||\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input textField widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <input\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [value]=\"widgetInstance.value\"\n              [readonly]=\"widgetInstance.isReadonly\"\n              [type]=\"'number'\"\n              placeholder=\"{{ widgetInstance.placeholder }}\"\n              [min]=\"widgetInstance.minValues ?? null\"\n              [max]=\"widgetInstance.maxValues ?? null\"\n              matInput\n              (change)=\"handleBlurEvent($event)\"\n              (input)=\"onValueChange?.next($event)\"\n            />\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            <span matPrefix>\n              {{ widgetInstance.prefix }}\n            </span>\n            <span matSuffix>\n              {{ widgetInstance.suffix }}\n            </span>\n            @if (widgetInstance.icon) {\n              <smart-icon [icon]=\"widgetInstance.icon\" matSuffix> </smart-icon>\n            }\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            @if (widgetInstance.textFieldButton) {\n              <button\n                matSuffix\n                mat-button\n                color=\"{{ widgetInstance.textFieldButton.color }}\"\n                (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\n              >\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().PRE &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\n                }\n                {{ widgetInstance.textFieldButton.label }}\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().POST &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\n                }\n              </button>\n            }\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-chip-grid #chipList aria-label=\"{{ widgetInstance.label }}\">\n              @for (value of widgetInstance.value; track value) {\n                <mat-chip-row [disabled]=\"widgetInstance.isDisabled\" (removed)=\"remove(value)\">\n                  {{ value }}\n                  <button matChipRemove>\n                    <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n                  </button>\n                </mat-chip-row>\n              }\n              <input\n                #chipInput\n                [attr.data-testid]=\"widgetInstance.key\"\n                placeholder=\"{{ widgetInstance.placeholder }}\"\n                [matChipInputFor]=\"chipList\"\n                [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                [matChipInputAddOnBlur]=\"addOnBlur\"\n                [readonly]=\"widgetInstance.isReadonly\"\n                [matAutocomplete]=\"chipAuto\"\n                (matChipInputTokenEnd)=\"add($event)\"\n                (change)=\"handleBlurEvent($event)\"\n                (input)=\"onValueChange?.next($event)\"\n                [disabled]=\"widgetInstance.isDisabled\"\n              />\n              <mat-autocomplete\n                #chipAuto=\"matAutocomplete\"\n                (optionSelected)=\"selected($event, widgetInstance)\"\n              >\n                @for (item of widgetInstance.valueList; track item) {\n                  <mat-option [disabled]=\"widgetInstance.isDisabled\" [value]=\"item.value\">\n                    {{ item.label }}\n                  </mat-option>\n                }\n              </mat-autocomplete>\n            </mat-chip-grid>\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_LOOKUP) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-chip-grid #chipListLookup aria-label=\"{{ widgetInstance.label }}\">\n              @for (value of widgetInstance.value; track value) {\n                <mat-chip [disabled]=\"widgetInstance.isDisabled\" (removed)=\"remove(value)\">\n                  {{ getChipsValue(value) }}\n                  <button matChipRemove>\n                    <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n                  </button>\n                </mat-chip>\n              }\n              <input\n                [attr.data-testid]=\"widgetInstance.key\"\n                placeholder=\"{{ widgetInstance.placeholder }}\"\n                [matChipInputFor]=\"chipListLookup\"\n                [matChipInputSeparatorKeyCodes]=\"emptySeparatorKeysCodes\"\n                [matChipInputAddOnBlur]=\"false\"\n                [readonly]=\"true\"\n                [disabled]=\"widgetInstance.isDisabled\"\n              />\n            </mat-chip-grid>\n            @if (isToolbarPresent()) {\n              <smart-ui-action-toolbar\n                matSuffix\n                [id]=\"widgetInstance.toolbarId\"\n              ></smart-ui-action-toolbar>\n            }\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_BOX) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <textarea\n              class=\"sb4-textarea\"\n              #sb4Textarea\n              cols=\"30\"\n              cdkTextareaAutosize\n              [cdkAutosizeMinRows]=\"widgetInstance.textBoxProperties?.minRows ?? 1\"\n              [cdkAutosizeMaxRows]=\"widgetInstance.textBoxProperties?.maxRows ?? undefined\"\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [type]=\"'string'\"\n              [value]=\"widgetInstance.value\"\n              [readonly]=\"widgetInstance.isReadonly\"\n              placeholder=\"{{ widgetInstance.placeholder }}\"\n              matInput\n              (change)=\"handleBlurEvent($event)\"\n              maxlength=\"{{ widgetInstance.maxLength }}\"\n            ></textarea>\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n              <mat-hint matSuffix align=\"end\">{{\n                widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n              }}</mat-hint>\n            }\n          </mat-form-field>\n          @if (\n            !widgetInstance.hint || widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\n        <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div\n            class=\"input checkbox widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"radioLabel\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\n              <div class=\"checkbox-item-container\">\n                <mat-checkbox\n                  class=\"selecatbleObject\"\n                  formControlName=\"{{ widgetInstance.key }}\"\n                  (change)=\"onValueChange?.next(widgetInstance)\"\n                  (change)=\"onBlur()?.next(widgetInstance)\"\n                >\n                  {{ widgetInstance.label }}\n                </mat-checkbox>\n              </div>\n              <div class=\"radio-error\">\n                <span class=\"mat-error\">\n                  {{ widgetInstance.error }}\n                </span>\n                @if (widgetInstance.error && widgetInstance.errorIcon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.errorIcon\"\n                    [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  ></smart-icon>\n                }\n              </div>\n            </section>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX_2) {\n        <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div\n            class=\"input checkbox widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"radioLabel\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\n              @for (checkbox of widgetInstance.valueList; track checkbox; let i = $index) {\n                <div class=\"checkbox-item-container\">\n                  @if (checkbox.imageUrl) {\n                    <img\n                      title=\"{{ widgetInstance.key }}\"\n                      class=\"checkbox-item-image\"\n                      [src]=\"checkbox.imageUrl\"\n                    />\n                  }\n                  <mat-checkbox\n                    class=\"selecatbleObject\"\n                    formControlName=\"{{ widgetInstance.key + '.' + checkbox.key }}\"\n                    [value]=\"checkbox.value\"\n                    (change)=\"onValueChange?.next(checkbox)\"\n                    [disabled]=\"widgetInstance.isDisabled!\"\n                  >\n                    {{ checkbox.label }}\n                  </mat-checkbox>\n                </div>\n              }\n              <div class=\"radio-error\">\n                <span class=\"mat-error\">\n                  {{ widgetInstance.error }}\n                </span>\n                @if (widgetInstance.error && widgetInstance.errorIcon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.errorIcon\"\n                    [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  ></smart-icon>\n                }\n              </div>\n            </section>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.RADIO_BUTTON) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-radio-group\n            class=\"input radio-section widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            [attr.data-testid]=\"widgetInstance.key\"\n            aria-label=\"{{ widgetInstance.label }}\"\n            appearance=\"outline\"\n            formControlName=\"{{ widgetInstance.key }}\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"radioLabel\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <div [ngClass]=\"getDirection()\">\n              @for (radio of widgetInstance.valueList; track radio) {\n                <div class=\"radio-item-container\">\n                  @if (radio.imageUrl) {\n                    <img\n                      title=\"{{ widgetInstance.key }}\"\n                      class=\"radio-item-image\"\n                      [src]=\"radio.imageUrl\"\n                    />\n                  }\n                  <mat-radio-button\n                    class=\"selecatbleObject\"\n                    value=\"{{ radio.value }}\"\n                    [ngClass]=\"getDirection()\"\n                    (change)=\"onValueChange?.next(radio.value)\"\n                    [disabled]=\"widgetInstance.isDisabled\"\n                  >\n                    {{ radio.label }}\n                  </mat-radio-button>\n                </div>\n              }\n              <div class=\"radio-error\">\n                <span class=\"mat-error\">\n                  {{ widgetInstance.error }}\n                </span>\n                @if (widgetInstance.error && widgetInstance.errorIcon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.errorIcon\"\n                    [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  ></smart-icon>\n                }\n              </div>\n              <div class=\"radio-icon\">\n                @if (widgetInstance.icon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.icon\"\n                    [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                  >\n                  </smart-icon>\n                }\n              </div>\n            </div>\n          </mat-radio-group>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DATE_PICKER) {\n        <div class=\"datePicker widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker (closed)=\"handleBlurEvent(widgetInstance)\"></mat-datepicker>\n            <input\n              matInput\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [value]=\"widgetInstance.value\"\n              [min]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.minDate ?? null)\"\n              [max]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.maxDate ?? null)\"\n              placeholder=\"{{ widgetInstance.placeholder }}\"\n              [matDatepicker]=\"picker\"\n              (change)=\"handleBlurEvent(widgetInstance)\"\n              (dateChange)=\"onValueChange?.next(widgetInstance)\"\n              [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\n            />\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            <span matSuffix>\n              {{ widgetInstance.suffix }}\n            </span>\n            @if (\n              widgetInstance.icon &&\n              (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n            ) {\n              <smart-icon\n                [icon]=\"widgetInstance.icon\"\n                [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                matSuffix\n              ></smart-icon>\n            }\n            <mat-hint>\n              {{ widgetInstance.dateFormatHint }}\n            </mat-hint>\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.MONTH_PICKER) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <div class=\"{{ labelColor() }} smart-form-widget-label\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </div>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <lib-smart-month-picker\n            [attr.data-testid]=\"widgetInstance.key\"\n            [widgetInstance]=\"widgetInstance\"\n            [control]=\"form().controls[widgetInstance.key]\"\n            (valueChange)=\"handleYearMonthPicked($event)\"\n          ></lib-smart-month-picker>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <div\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </div>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div class=\"dateTimePickerContainer\">\n            <mat-form-field\n              class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\n              [ngClass]=\"getNgClass()\"\n              [ngStyle]=\"getStyle()\"\n              appearance=\"outline\"\n            >\n              @if (!widgetInstance.showLabel) {\n                <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                  {{ getWidgetLabel(widgetInstance) }}\n                </mat-label>\n              }\n              <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n              <mat-datepicker #picker (closed)=\"handleBlurEvent(widgetInstance)\"></mat-datepicker>\n              <input\n                #dateInput\n                matInput\n                [formControlName]=\"widgetInstance.key\"\n                [attr.data-testid]=\"widgetInstance.key\"\n                [min]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.minDate ?? null)\"\n                [max]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.maxDate ?? null)\"\n                [id]=\"widgetInstance.key\"\n                [value]=\"widgetInstance.value\"\n                placeholder=\"{{ widgetInstance.placeholder }}\"\n                [matDatepicker]=\"picker\"\n                (blur)=\"onDatePickerBlur($event)\"\n                (dateChange)=\"onValueChange?.next(widgetInstance)\"\n                [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\n              />\n              @if (widgetInstance.error && widgetInstance.errorIcon) {\n                <smart-icon\n                  [icon]=\"widgetInstance.errorIcon\"\n                  [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  matSuffix\n                ></smart-icon>\n              }\n              <span matSuffix>\n                {{ widgetInstance.suffix }}\n              </span>\n              @if (\n                widgetInstance.icon &&\n                (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n              ) {\n                <smart-icon\n                  [icon]=\"widgetInstance.icon\"\n                  [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                  matSuffix\n                ></smart-icon>\n              }\n              <mat-hint>\n                {{ widgetInstance.dateFormatHint }}\n              </mat-hint>\n            </mat-form-field>\n            @if (hasCreated) {\n              <mat-form-field\n                class=\"input widgetContent time\"\n                [ngClass]=\"widgetInstance.cssClass ?? ''\"\n                [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\n                appearance=\"outline\"\n              >\n                <input\n                  #timeInput\n                  [formControlName]=\"widgetInstance.key + '-time'\"\n                  [attr.data-testid]=\"widgetInstance.key + '-time'\"\n                  [id]=\"widgetInstance.key\"\n                  [type]=\"'time'\"\n                  placeholder=\"{{ widgetInstance.placeholder }}\"\n                  (blur)=\"onTimePickerBlur($event)\"\n                  matInput\n                />\n              </mat-form-field>\n            }\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.SELECT) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <div\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </div>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-select\n              #select\n              [formControlName]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              (selectionChange)=\"onValueChange?.next($event.value)\"\n              (opened)=\"focusSelectFilter()\"\n              (closed)=\"handleBlurEvent(widgetInstance); clearSelectFilter()\"\n              [disabled]=\"widgetInstance.isDisabled!\"\n              [compareWith]=\"\n                widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\n              \"\n              placeholder=\"{{ selectionPlaceholder }}\"\n            >\n              @if (hasSelectFilter()) {\n                <div class=\"comboBoxFilter\">\n                  <mat-icon fontSet=\"material-symbols-outlined\">search</mat-icon>\n                  <input\n                    #selectFilterInput\n                    type=\"text\"\n                    autocomplete=\"off\"\n                    [value]=\"selectFilter()\"\n                    [placeholder]=\"selectFilterPlaceholder\"\n                    (input)=\"onSelectFilterInput(select, $any($event.target).value)\"\n                    (keydown)=\"onSelectFilterKeydown(select, $event)\"\n                  />\n                </div>\n              }\n              @for (option of selectOptions(); track option) {\n                <div>\n                  @if (option.type === getType().ITEM_GROUP) {\n                    <mat-optgroup [label]=\"option.label\" [disabled]=\"option.isDisabled\">\n                      @for (innerOption of option.valueList; track innerOption) {\n                        <mat-option [value]=\"innerOption.value\" [disabled]=\"innerOption.isDisabled\">\n                          @if (innerOption.icon) {\n                            <smart-icon\n                              [icon]=\"innerOption.icon\"\n                              [color]=\"innerOption.iconColor\"\n                            ></smart-icon>\n                          }\n                          {{ innerOption.label }}\n                        </mat-option>\n                      }\n                    </mat-optgroup>\n                  }\n                  @if (option.type === getType().ITEM) {\n                    <mat-option [value]=\"option.value\" [disabled]=\"option.isDisabled\">\n                      @if (option.icon) {\n                        <smart-icon [icon]=\"option.icon\" [color]=\"option.iconColor\"></smart-icon>\n                      }\n                      {{ option.label }}</mat-option\n                    >\n                  }\n                </div>\n              }\n            </mat-select>\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            <span matSuffix>\n              {{ widgetInstance.suffix }}\n            </span>\n            @if (\n              widgetInstance.icon &&\n              (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n            ) {\n              <smart-icon\n                [icon]=\"widgetInstance.icon\"\n                [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                matSuffix\n              ></smart-icon>\n            }\n            @if (widgetInstance.selectProperties?.clearable) {\n              <span matSuffix class=\"textFieldButtons\" (click)=\"$event.stopPropagation()\">\n                <ui-action-button\n                  class=\"clearButton\"\n                  [addBasicClasses]=\"false\"\n                  [descriptor]=\"clearButtonDescriptor\"\n                  (actionClick)=\"clearSelect(widgetInstance.key)\"\n                />\n              </span>\n            }\n            @if (isToolbarPresent()) {\n              <smart-ui-action-toolbar\n                class=\"textFieldToolbar\"\n                matSuffix\n                [id]=\"widgetInstance.toolbarId\"\n              ></smart-ui-action-toolbar>\n            }\n          </mat-form-field>\n          @if (\n            !widgetInstance?.hint ||\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-select\n              #select\n              [formControlName]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              multiple\n              (selectionChange)=\"onValueChange?.next($event.value); refocusSelectFilter(select)\"\n              (opened)=\"focusSelectFilter()\"\n              (closed)=\"handleBlurEvent(widgetInstance); clearSelectFilter()\"\n              [disabled]=\"widgetInstance.isDisabled!\"\n              [compareWith]=\"\n                widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\n              \"\n              placeholder=\"{{ selectionPlaceholder }}\"\n            >\n              @if (hasSelectFilter()) {\n                <div class=\"comboBoxFilter\">\n                  <mat-icon fontSet=\"material-symbols-outlined\">search</mat-icon>\n                  <input\n                    #selectFilterInput\n                    type=\"text\"\n                    autocomplete=\"off\"\n                    [value]=\"selectFilter()\"\n                    [placeholder]=\"selectFilterPlaceholder\"\n                    (input)=\"onSelectFilterInput(select, $any($event.target).value)\"\n                    (keydown)=\"onSelectFilterKeydown(select, $event)\"\n                  />\n                </div>\n              }\n              @if (hasSelectAll()) {\n                <div class=\"comboBoxSelectAll\" (keydown)=\"$event.stopPropagation()\">\n                  <mat-checkbox\n                    [checked]=\"selectAllState() === 'all'\"\n                    [indeterminate]=\"selectAllState() === 'some'\"\n                    (change)=\"toggleSelectAll(select)\"\n                    >{{ selectAllLabel }}</mat-checkbox\n                  >\n                </div>\n              }\n              @for (option of selectOptions(); track option) {\n                <div>\n                  @if (option.type === getType().ITEM_GROUP) {\n                    <mat-optgroup [label]=\"option.label\" [disabled]=\"option.isDisabled\">\n                      @for (innerOption of option.valueList; track innerOption) {\n                        <mat-option [value]=\"innerOption.value\" [disabled]=\"innerOption.isDisabled\">\n                          @if (innerOption.icon) {\n                            <smart-icon\n                              [icon]=\"innerOption.icon\"\n                              [color]=\"innerOption.iconColor\"\n                            ></smart-icon>\n                          }\n                          {{ innerOption.label }}</mat-option\n                        >\n                      }\n                    </mat-optgroup>\n                  }\n                  @if (option.type === getType().ITEM) {\n                    <mat-option [value]=\"option.value\" [disabled]=\"option.isDisabled\">\n                      @if (option.icon) {\n                        <smart-icon [icon]=\"option.icon\" [color]=\"option.iconColor\"></smart-icon>\n                      }\n                      {{ option.label }}</mat-option\n                    >\n                  }\n                </div>\n              }\n            </mat-select>\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            @if (isToolbarPresent()) {\n              <smart-ui-action-toolbar\n                class=\"textFieldToolbar\"\n                matSuffix\n                [id]=\"widgetInstance.toolbarId\"\n              ></smart-ui-action-toolbar>\n            }\n          </mat-form-field>\n          @if (\n            !widgetInstance?.hint ||\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.LABEL) {\n        <div class=\"label widgetContainer\" [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\">\n          <div class=\"label-title labelContainer\" [ngClass]=\"widgetInstance.cssClass ?? ''\">\n            <h4\n              class=\"{{ labelColor() }} smart-form-widget-label {{ widgetInstance.cssClass ?? '' }}\"\n              [ngClass]=\"getNgClass()\"\n              [ngStyle]=\"getStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n            @if (widgetInstance.widgetDescription) {\n              <p>{{ widgetInstance.widgetDescription }}</p>\n            }\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TIME) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent time {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <input\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [type]=\"'time'\"\n              placeholder=\"{{ widgetInstance.placeholder }}\"\n              matInput\n              (change)=\"handleBlurEvent(widgetInstance)\"\n            />\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TOGGLE) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div\n            class=\"widgetContent  {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n          >\n            <mat-slide-toggle\n              formControlName=\"{{ widgetInstance.key }}\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              (change)=\"onValueChange?.next($event)\"\n              [labelPosition]=\"widgetInstance.toggleLabelPosition ?? 'before'\"\n              >{{ !widgetInstance.showLabel ? widgetInstance.label : '' }}</mat-slide-toggle\n            ><span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n              ></smart-icon>\n            }\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.INDICATOR) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <h4\n              class=\"{{ labelColor() }} labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n              [ngClass]=\"getLabelNgClass()\"\n              [ngStyle]=\"getLabelStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          <div class=\"smartIndicator widgetContent\">\n            <div\n              class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\"\n              [ngClass]=\"getNgClass()\"\n            >\n              @for (item of indicatorItems; track item; let i = $index) {\n                <div class=\"indicatorItem\" [ngClass]=\"getIndicatorItemClass(i)\"></div>\n              }\n            </div>\n            <p [ngClass]=\"getIndicatorStatusLabelColor()\">\n              {{ getIndicatorStatusLabel() }}\n            </p>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.RECORDING_UPLOADER) {\n        <div class=\"widgetContainer\">\n          <div class=\"widgetItemContainer\">\n            <smart-voice-recorder\n              [formControlName]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [widgetInstance]=\"widgetInstance\"\n              (uploadFilesEvent)=\"upload($event)\"\n            />\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.FILE_UPLOADER) {\n        <div class=\"widgetContainer\">\n          <smart-file-editor\n            [formControlName]=\"widgetInstance.key\"\n            [attr.data-testid]=\"widgetInstance.key\"\n            [widgetInstance]=\"widgetInstance\"\n            (uploadFilesEvent)=\"upload($event)\"\n          />\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.MULTI_FILE_UPLOADER) {\n        <div class=\"widgetContainer\">\n          <smart-multi-file-editor\n            [formControlName]=\"widgetInstance.key\"\n            [attr.data-testid]=\"widgetInstance.key\"\n            [widgetInstance]=\"widgetInstance\"\n            (uploadFilesEvent)=\"upload($event)\"\n            (fileEvent)=\"executeUiAction($event.uiAction)\"\n          />\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.IMAGE) {\n        <div class=\"widgetContainer imageContainer\">\n          @if (widgetInstance.showLabel && getWidgetLabel(widgetInstance)) {\n            <h4\n              class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\n              [ngClass]=\"getLabelNgClass()\"\n              [ngStyle]=\"getLabelStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          @if (widgetInstance.imageProperties?.image) {\n            <smart-icon\n              [imageResource]=\"$safeNavigationMigration(widgetInstance.imageProperties?.image)\"\n              class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\n              alt=\"Image\"\n              title=\"{{ widgetInstance.key }}\"\n              [ngClass]=\"getNgClass()\"\n              [ngStyle]=\"getStyle()\"\n            ></smart-icon>\n          } @else if (widgetInstance.value) {\n            <smart-icon\n              [(ngModel)]=\"widgetInstance.value\"\n              [imageResource]=\"widgetInstance.value\"\n              class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\n              alt=\"Image\"\n              title=\"{{ widgetInstance.key }}\"\n              [ngClass]=\"getNgClass()\"\n              [ngStyle]=\"getStyle()\"\n            ></smart-icon>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DIV) {\n        <div\n          class=\"smartDiv\"\n          [innerHTML]=\"sanitizeHtml(getWidgetLabel(widgetInstance))\"\n          [ngClass]=\"getNgClass()\"\n          [class.clickable]=\"!!widgetInstance.divProperties?.onClick\"\n          [ngStyle]=\"getStyle()\"\n          (click)=\"onDivClick()\"\n        ></div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.HTML) {\n        <smart-html-widget\n          [widgetInstance]=\"widgetInstance\"\n          [ngClass]=\"getNgClass()\"\n          [ngStyle]=\"getStyle()\"\n        ></smart-html-widget>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.SVG) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <h4\n              class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\n              [ngClass]=\"getLabelNgClass()\"\n              [ngStyle]=\"getLabelStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          <div\n            class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [innerHTML]=\"sanitizeHtml(widgetInstance.value)\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n          ></div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DIVIDER) {\n        <div class=\"widgetContainer\">\n          <hr\n            class=\"smartDivider {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n          />\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.BUTTON) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <h4\n              class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\n              [ngClass]=\"getLabelNgClass()\"\n              [ngStyle]=\"getLabelStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          <div\n            class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n          >\n            <button\n              mat-button\n              [attr.data-testid]=\"widgetInstance.key\"\n              [ngClass]=\"getButtonType(widgetInstance.uiActionDescriptor)\"\n              [color]=\"$safeNavigationMigration(widgetInstance.uiActionDescriptor?.color)\"\n              (click)=\"onButtonClicked(widgetInstance)\"\n            >\n              @if (isOnlyIcon(widgetInstance.uiActionDescriptor)) {\n                @if (widgetInstance.uiActionDescriptor?.icon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n                    [color]=\"\n                      widgetInstance.uiActionDescriptor?.iconColor ??\n                      widgetInstance.uiActionDescriptor?.color\n                    \"\n                  ></smart-icon>\n                }\n              } @else {\n                @if (\n                  widgetInstance.uiActionDescriptor?.icon &&\n                  widgetInstance.uiActionDescriptor?.iconPosition === 'PRE'\n                ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n                    [color]=\"\n                      widgetInstance.uiActionDescriptor?.iconColor ??\n                      widgetInstance.uiActionDescriptor?.color\n                    \"\n                  ></smart-icon>\n                }\n                {{ widgetInstance.uiActionDescriptor?.title }}\n                @if (\n                  widgetInstance.uiActionDescriptor?.icon &&\n                  widgetInstance.uiActionDescriptor?.iconPosition === 'POST'\n                ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n                    [color]=\"\n                      widgetInstance.uiActionDescriptor?.iconColor ??\n                      widgetInstance.uiActionDescriptor?.color\n                    \"\n                  ></smart-icon>\n                }\n              }\n            </button>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.COMPONENT) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <h4 class=\"labelContainer {{ labelColor() }}\">\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          <div class=\"widgetContent\">\n            <ng-template #customComponent></ng-template>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.RICH_TEXT) {\n        <div class=\"widgetContainer\">\n          <div class=\"labelContainer\">\n            @if (widgetInstance.showLabel) {\n              <h4 class=\"{{ labelColor() }}\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n            }\n            @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <div class=\"widgetContent\">\n            <quill-editor\n              #quillEditor\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [modules]=\"\n                widgetInstance.isDisabled ? emptyQuillToolbar : widgetInstance.quillModules\n              \"\n              [placeholder]=\"widgetInstance.placeholder ?? ''\"\n              [readOnly]=\"widgetInstance.isReadonly ?? false\"\n              [maxLength]=\"widgetInstance.maxLength ?? 0\"\n              (onContentChanged)=\"onRichTextEditorContentChanged($event)\"\n            ></quill-editor>\n            @if (\n              !widgetInstance?.hint ||\n              widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n            ) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n            @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n              <mat-hint matSuffix align=\"end\" class=\"rich-text-editor-leeway-counter\">{{\n                getRichTextEditorLengthLeeway()\n              }}</mat-hint>\n            }\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.SORTABLE) {\n        <div class=\"widgetContainer\">\n          <div class=\"labelContainer\">\n            @if (widgetInstance.showLabel) {\n              <h4 class=\"{{ labelColor() }}\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n            }\n            @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <div class=\"widgetContent\">\n            <lib-sortable-widget\n              [formControlName]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [widgetInstance]=\"widgetInstance\"\n            ></lib-sortable-widget>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.MATRIX) {\n        <div class=\"widgetContainer\">\n          <div class=\"labelContainer\">\n            @if (widgetInstance.showLabel) {\n              <h4 class=\"{{ labelColor() }}\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n            }\n            @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <table class=\"matrixTable widgetContent\">\n            <tr>\n              <th></th>\n              @for (option of widgetInstance.value.columns; track option) {\n                <th class=\"optionLabel\">\n                  {{ option.displayValue }}\n                </th>\n              }\n            </tr>\n            @for (question of widgetInstance.value.rows; track question; let i = $index) {\n              <tr>\n                <th class=\"questionLabel\">\n                  <label>{{ question.displayValue }}</label>\n                </th>\n                @for (option of widgetInstance.value.columns; track option; let j = $index) {\n                  <td class=\"selectTd\">\n                    @if (!widgetInstance.isMultiple) {\n                      <mat-radio-group\n                        [formControlName]=\"widgetInstance.key + '.' + question.code\"\n                        [name]=\"'q' + i\"\n                      >\n                        <mat-radio-button [value]=\"option.code\"> </mat-radio-button>\n                      </mat-radio-group>\n                    }\n                    @if (widgetInstance.isMultiple) {\n                      <div>\n                        <mat-checkbox\n                          [formControlName]=\"\n                            widgetInstance.key + '.data.' + question.code + '.' + option.code\n                          \"\n                          [value]=\"widgetInstance.value['data'][question.code][option.code]\"\n                          [checked]=\"true\"\n                        ></mat-checkbox>\n                      </div>\n                    }\n                  </td>\n                }\n                <br />\n                @if (widgetInstance.button) {\n                  <button mat-icon-button (click)=\"removeMatrixRow(question)\">\n                    <smart-icon icon=\"close\"></smart-icon>\n                  </button>\n                }\n              </tr>\n            }\n          </table>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.YOUTUBE_PLAYER) {\n        <div class=\"widgetContainer\">\n          <div class=\"labelContainer\">\n            @if (widgetInstance.showLabel) {\n              <h4\n                class=\"{{ labelColor() }} {{ widgetInstance.cssLabelClass }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n            }\n            @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <youtube-player\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            videoId=\"{{ widgetInstance.videoId }}\"\n            [width]=\"widgetInstance.width\"\n            [height]=\"widgetInstance.height\"\n            [startSeconds]=\"widgetInstance.startSeconds\"\n            [endSeconds]=\"widgetInstance.endSeconds\"\n          ></youtube-player>\n          @if (\n            !widgetInstance?.hint ||\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\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}.comboBoxFilter{display:flex;flex-direction:row;align-items:center;gap:.5rem;min-height:48px;padding:0 1rem;border-bottom:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.comboBoxFilter:focus-within{border-bottom-color:var(--mat-sys-primary, #3f51b5)}.comboBoxFilter .mat-icon{flex:0 0 auto;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .54))}.comboBoxFilter input{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;font:inherit;color:inherit}.comboBoxSelectAll{display:flex;align-items:center;min-height:48px;padding:0 .25rem;border-bottom:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.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"] }]
+                    ], template: "<div class=\"container material\" [formGroup]=\"form()\">\n  @if (widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible) {\n    <div\n      [ngClass]=\"widgetInstance.cssClass ?? ''\"\n      [class.sb4-widget-required]=\"isRequired()\"\n      class=\"container\"\n    >\n      @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\n        <div [attr.data-testid]=\"widgetInstance.key\" [ngClass]=\"getDirection()\">\n          @for (widget of visibleChildren; track widget) {\n            <smartformwidget\n              [form]=\"form()\"\n              [widgetInstance]=\"widget\"\n              class=\"container-item\"\n              [ngClass]=\"widget.cssClass ?? ''\"\n              [onBlur]=\"onBlur()\"\n              [onValueChange]=\"onValueChange\"\n              [sophisticatedValueChange]=\"sophisticatedValueChange()\"\n              [blurSophisticatedValueChange]=\"blurSophisticatedValueChange()\"\n              class=\"{{ widget.key }}\"\n              [labelColor]=\"labelColor()\"\n            ></smartformwidget>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD) {\n        <div (capsLock)=\"capsOn = $event\" class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input textField widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            @if (!widgetInstance.selection) {\n              <input\n                [formControlName]=\"widgetInstance.key\"\n                [id]=\"widgetInstance.key\"\n                [attr.data-testid]=\"widgetInstance.key\"\n                [attr.inputmode]=\"\n                  widgetInstance.inputMode ? widgetInstance.inputMode.toLocaleLowerCase() : 'text'\n                \"\n                [type]=\"'string'\"\n                [value]=\"widgetInstance.value\"\n                [readonly]=\"widgetInstance.isReadonly\"\n                placeholder=\"{{ widgetInstance.placeholder }}\"\n                matInput\n                (change)=\"handleBlurEvent($event)\"\n                (input)=\"onValueChange?.next($event)\"\n                type=\"{{ widgetInstance.isPassword ? (hidePassword ? 'password' : 'text') : '' }}\"\n                (keydown.enter)=\"onKeydown()\"\n                maxlength=\"{{ widgetInstance.maxLength }}\"\n                [mask]=\"widgetInstance.mask\"\n              />\n            }\n            <!-- [mask]=\"widgetInstance.mask ?? ''\" -->\n            @if (widgetInstance.selection) {\n              <input\n                [formControlName]=\"widgetInstance.key\"\n                [id]=\"widgetInstance.key\"\n                [attr.data-testid]=\"widgetInstance.key\"\n                [type]=\"'string'\"\n                [value]=\"widgetInstance.value\"\n                [readonly]=\"widgetInstance.isReadonly\"\n                placeholder=\"{{ widgetInstance.placeholder }}\"\n                matInput\n                (change)=\"handleBlurEvent($event)\"\n                (input)=\"onValueChange?.next($event)\"\n                (click)=\"onValueChange?.next($event)\"\n                type=\"{{ widgetInstance.isPassword ? 'password' : '' }}\"\n                [matAutocomplete]=\"textFieldAuto\"\n                (keydown.enter)=\"onKeydown()\"\n              />\n            }\n            @if (widgetInstance.isPassword) {\n              <button mat-icon-button matSuffix (click)=\"togglePasswordVisibility($event)\">\n                <mat-icon fontSet=\"material-symbols-outlined\">{{\n                  hidePassword ? 'visibility_off' : 'visibility'\n                }}</mat-icon>\n              </button>\n            }\n            <mat-autocomplete #textFieldAuto=\"matAutocomplete\">\n              @for (option of filteredOptions | async; track option) {\n                <mat-option [value]=\"option.label\">\n                  <span [innerHTML]=\"option.label | highlight: toHighlight\"></span>\n                </mat-option>\n              }\n            </mat-autocomplete>\n            @if (capsOn && widgetInstance.isPassword) {\n              <span class=\"mat-error\">\n                {{ widgetInstance.capsLockWarning }}\n              </span>\n            }\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            <span matPrefix>\n              @if (capsOn && widgetInstance.isPassword) {\n                <smart-icon\n                  [icon]=\"widgetInstance.capsLockWarningIcon ?? 'keyboard_capslock'\"\n                  color=\"warn\"\n                ></smart-icon>\n              }\n              @if (widgetInstance.icon && widgetInstance.iconPosition === 'PRE') {\n                <smart-icon\n                  [icon]=\"widgetInstance.icon\"\n                  [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                ></smart-icon>\n              }\n              {{ widgetInstance.prefix }}\n            </span>\n            <span matSuffix>\n              {{ widgetInstance.suffix }}\n            </span>\n            @if (\n              widgetInstance.icon &&\n              (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n            ) {\n              <smart-icon\n                [icon]=\"widgetInstance.icon\"\n                [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                matSuffix\n              ></smart-icon>\n            }\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            <div class=\"textFieldButtons\">\n              @if (widgetInstance.textFieldProperties?.clearable) {\n                <ui-action-button\n                  class=\"clearButton\"\n                  [addBasicClasses]=\"false\"\n                  [descriptor]=\"clearButtonDescriptor\"\n                  (actionClick)=\"clearField(widgetInstance.key)\"\n                />\n              }\n            </div>\n            @if (isToolbarPresent()) {\n              <smart-ui-action-toolbar\n                class=\"textFieldToolbar\"\n                matSuffix\n                [id]=\"widgetInstance.toolbarId\"\n              ></smart-ui-action-toolbar>\n            }\n            @if (widgetInstance.textFieldButton) {\n              <button\n                matSuffix\n                mat-button\n                color=\"{{ widgetInstance.textFieldButton.color }}\"\n                (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\n              >\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().PRE &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.textFieldButton.icon\"\n                    [color]=\"widgetInstance.textFieldButton.iconColor\"\n                  >\n                  </smart-icon>\n                }\n                {{ widgetInstance.textFieldButton.label }}\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().POST &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\n                }\n              </button>\n            }\n            @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n              <mat-hint matSuffix align=\"end\">{{\n                widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n              }}</mat-hint>\n            }\n          </mat-form-field>\n          @if (\n            !widgetInstance?.hint ||\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input textField widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <input\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [value]=\"widgetInstance.value\"\n              [readonly]=\"widgetInstance.isReadonly\"\n              [type]=\"'number'\"\n              placeholder=\"{{ widgetInstance.placeholder }}\"\n              [min]=\"widgetInstance.minValues ?? null\"\n              [max]=\"widgetInstance.maxValues ?? null\"\n              matInput\n              (change)=\"handleBlurEvent($event)\"\n              (input)=\"onValueChange?.next($event)\"\n            />\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            <span matPrefix>\n              {{ widgetInstance.prefix }}\n            </span>\n            <span matSuffix>\n              {{ widgetInstance.suffix }}\n            </span>\n            @if (widgetInstance.icon) {\n              <smart-icon [icon]=\"widgetInstance.icon\" matSuffix> </smart-icon>\n            }\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            @if (widgetInstance.textFieldButton) {\n              <button\n                matSuffix\n                mat-button\n                color=\"{{ widgetInstance.textFieldButton.color }}\"\n                (click)=\"widgetInstance.textFieldButton.callback(widgetInstance)\"\n              >\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().PRE &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\n                }\n                {{ widgetInstance.textFieldButton.label }}\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().POST &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\"> </smart-icon>\n                }\n              </button>\n            }\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-chip-grid #chipList aria-label=\"{{ widgetInstance.label }}\">\n              @for (value of widgetInstance.value; track value) {\n                <mat-chip-row [disabled]=\"widgetInstance.isDisabled\" (removed)=\"remove(value)\">\n                  {{ value }}\n                  <button matChipRemove>\n                    <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n                  </button>\n                </mat-chip-row>\n              }\n              <input\n                #chipInput\n                [attr.data-testid]=\"widgetInstance.key\"\n                placeholder=\"{{ widgetInstance.placeholder }}\"\n                [matChipInputFor]=\"chipList\"\n                [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n                [matChipInputAddOnBlur]=\"addOnBlur\"\n                [readonly]=\"widgetInstance.isReadonly\"\n                [matAutocomplete]=\"chipAuto\"\n                (matChipInputTokenEnd)=\"add($event)\"\n                (change)=\"handleBlurEvent($event)\"\n                (input)=\"onValueChange?.next($event)\"\n                [disabled]=\"widgetInstance.isDisabled\"\n              />\n              <mat-autocomplete\n                #chipAuto=\"matAutocomplete\"\n                (optionSelected)=\"selected($event, widgetInstance)\"\n              >\n                @for (item of widgetInstance.valueList; track item) {\n                  <mat-option [disabled]=\"widgetInstance.isDisabled\" [value]=\"item.value\">\n                    {{ item.label }}\n                  </mat-option>\n                }\n              </mat-autocomplete>\n            </mat-chip-grid>\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_LOOKUP) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-chip-grid #chipListLookup aria-label=\"{{ widgetInstance.label }}\">\n              @for (value of widgetInstance.value; track value) {\n                <mat-chip [disabled]=\"widgetInstance.isDisabled\" (removed)=\"remove(value)\">\n                  {{ getChipsValue(value) }}\n                  <button matChipRemove>\n                    <mat-icon fontSet=\"material-symbols-outlined\">cancel</mat-icon>\n                  </button>\n                </mat-chip>\n              }\n              <input\n                [attr.data-testid]=\"widgetInstance.key\"\n                placeholder=\"{{ widgetInstance.placeholder }}\"\n                [matChipInputFor]=\"chipListLookup\"\n                [matChipInputSeparatorKeyCodes]=\"emptySeparatorKeysCodes\"\n                [matChipInputAddOnBlur]=\"false\"\n                [readonly]=\"true\"\n                [disabled]=\"widgetInstance.isDisabled\"\n              />\n            </mat-chip-grid>\n            @if (isToolbarPresent()) {\n              <smart-ui-action-toolbar\n                matSuffix\n                [id]=\"widgetInstance.toolbarId\"\n              ></smart-ui-action-toolbar>\n            }\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_BOX) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <textarea\n              class=\"sb4-textarea\"\n              #sb4Textarea\n              cols=\"30\"\n              cdkTextareaAutosize\n              [cdkAutosizeMinRows]=\"widgetInstance.textBoxProperties?.minRows ?? 1\"\n              [cdkAutosizeMaxRows]=\"widgetInstance.textBoxProperties?.maxRows ?? undefined\"\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [type]=\"'string'\"\n              [value]=\"widgetInstance.value\"\n              [readonly]=\"widgetInstance.isReadonly\"\n              placeholder=\"{{ widgetInstance.placeholder }}\"\n              matInput\n              (change)=\"handleBlurEvent($event)\"\n              maxlength=\"{{ widgetInstance.maxLength }}\"\n            ></textarea>\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n              <mat-hint matSuffix align=\"end\">{{\n                widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n              }}</mat-hint>\n            }\n          </mat-form-field>\n          @if (\n            !widgetInstance.hint || widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\n        <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div\n            class=\"input checkbox widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"radioLabel\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\n              <div class=\"checkbox-item-container\">\n                <mat-checkbox\n                  class=\"selecatbleObject\"\n                  formControlName=\"{{ widgetInstance.key }}\"\n                  (change)=\"onValueChange?.next(widgetInstance)\"\n                  (change)=\"onBlur()?.next(widgetInstance)\"\n                >\n                  {{ widgetInstance.label }}\n                </mat-checkbox>\n              </div>\n              <div class=\"radio-error\">\n                <span class=\"mat-error\">\n                  {{ widgetInstance.error }}\n                </span>\n                @if (widgetInstance.error && widgetInstance.errorIcon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.errorIcon\"\n                    [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  ></smart-icon>\n                }\n              </div>\n            </section>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX_2) {\n        <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div\n            class=\"input checkbox widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"radioLabel\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\n              @for (checkbox of widgetInstance.valueList; track checkbox; let i = $index) {\n                <div class=\"checkbox-item-container\">\n                  @if (checkbox.imageUrl) {\n                    <img\n                      title=\"{{ widgetInstance.key }}\"\n                      class=\"checkbox-item-image\"\n                      [src]=\"checkbox.imageUrl\"\n                    />\n                  }\n                  <mat-checkbox\n                    class=\"selecatbleObject\"\n                    formControlName=\"{{ widgetInstance.key + '.' + checkbox.key }}\"\n                    [value]=\"checkbox.value\"\n                    (change)=\"onValueChange?.next(checkbox)\"\n                    [disabled]=\"widgetInstance.isDisabled!\"\n                  >\n                    {{ checkbox.label }}\n                  </mat-checkbox>\n                </div>\n              }\n              <div class=\"radio-error\">\n                <span class=\"mat-error\">\n                  {{ widgetInstance.error }}\n                </span>\n                @if (widgetInstance.error && widgetInstance.errorIcon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.errorIcon\"\n                    [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  ></smart-icon>\n                }\n              </div>\n            </section>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.RADIO_BUTTON) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-radio-group\n            class=\"input radio-section widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            [attr.data-testid]=\"widgetInstance.key\"\n            aria-label=\"{{ widgetInstance.label }}\"\n            appearance=\"outline\"\n            formControlName=\"{{ widgetInstance.key }}\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"radioLabel\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <div [ngClass]=\"getDirection()\">\n              @for (radio of widgetInstance.valueList; track radio) {\n                <div class=\"radio-item-container\">\n                  @if (radio.imageUrl) {\n                    <img\n                      title=\"{{ widgetInstance.key }}\"\n                      class=\"radio-item-image\"\n                      [src]=\"radio.imageUrl\"\n                    />\n                  }\n                  <mat-radio-button\n                    class=\"selecatbleObject\"\n                    value=\"{{ radio.value }}\"\n                    [ngClass]=\"getDirection()\"\n                    (change)=\"onValueChange?.next(radio.value)\"\n                    [disabled]=\"widgetInstance.isDisabled\"\n                  >\n                    {{ radio.label }}\n                  </mat-radio-button>\n                </div>\n              }\n              <div class=\"radio-error\">\n                <span class=\"mat-error\">\n                  {{ widgetInstance.error }}\n                </span>\n                @if (widgetInstance.error && widgetInstance.errorIcon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.errorIcon\"\n                    [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  ></smart-icon>\n                }\n              </div>\n              <div class=\"radio-icon\">\n                @if (widgetInstance.icon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.icon\"\n                    [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                  >\n                  </smart-icon>\n                }\n              </div>\n            </div>\n          </mat-radio-group>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DATE_PICKER) {\n        <div class=\"datePicker widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n            <mat-datepicker #picker (closed)=\"handleBlurEvent(widgetInstance)\"></mat-datepicker>\n            <input\n              matInput\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [value]=\"widgetInstance.value\"\n              [min]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.minDate ?? null)\"\n              [max]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.maxDate ?? null)\"\n              placeholder=\"{{ widgetInstance.placeholder }}\"\n              [matDatepicker]=\"picker\"\n              (change)=\"handleBlurEvent(widgetInstance)\"\n              (dateChange)=\"onValueChange?.next(widgetInstance)\"\n              [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\n            />\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            <span matSuffix>\n              {{ widgetInstance.suffix }}\n            </span>\n            @if (\n              widgetInstance.icon &&\n              (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n            ) {\n              <smart-icon\n                [icon]=\"widgetInstance.icon\"\n                [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                matSuffix\n              ></smart-icon>\n            }\n            <mat-hint>\n              {{ widgetInstance.dateFormatHint }}\n            </mat-hint>\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.MONTH_PICKER) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <div class=\"{{ labelColor() }} smart-form-widget-label\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </div>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <lib-smart-month-picker\n            [attr.data-testid]=\"widgetInstance.key\"\n            [widgetInstance]=\"widgetInstance\"\n            [control]=\"form().controls[widgetInstance.key]\"\n            (valueChange)=\"handleYearMonthPicked($event)\"\n          ></lib-smart-month-picker>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <div\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </div>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div class=\"dateTimePickerContainer\">\n            <mat-form-field\n              class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\n              [ngClass]=\"getNgClass()\"\n              [ngStyle]=\"getStyle()\"\n              appearance=\"outline\"\n            >\n              @if (!widgetInstance.showLabel) {\n                <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                  {{ getWidgetLabel(widgetInstance) }}\n                </mat-label>\n              }\n              <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\n              <mat-datepicker #picker (closed)=\"handleBlurEvent(widgetInstance)\"></mat-datepicker>\n              <input\n                #dateInput\n                matInput\n                [formControlName]=\"widgetInstance.key\"\n                [attr.data-testid]=\"widgetInstance.key\"\n                [min]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.minDate ?? null)\"\n                [max]=\"convertToLocalDateTime(widgetInstance.dateFieldProperties?.maxDate ?? null)\"\n                [id]=\"widgetInstance.key\"\n                [value]=\"widgetInstance.value\"\n                placeholder=\"{{ widgetInstance.placeholder }}\"\n                [matDatepicker]=\"picker\"\n                (blur)=\"onDatePickerBlur($event)\"\n                (dateChange)=\"onValueChange?.next(widgetInstance)\"\n                [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\n              />\n              @if (widgetInstance.error && widgetInstance.errorIcon) {\n                <smart-icon\n                  [icon]=\"widgetInstance.errorIcon\"\n                  [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  matSuffix\n                ></smart-icon>\n              }\n              <span matSuffix>\n                {{ widgetInstance.suffix }}\n              </span>\n              @if (\n                widgetInstance.icon &&\n                (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n              ) {\n                <smart-icon\n                  [icon]=\"widgetInstance.icon\"\n                  [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                  matSuffix\n                ></smart-icon>\n              }\n              <mat-hint>\n                {{ widgetInstance.dateFormatHint }}\n              </mat-hint>\n            </mat-form-field>\n            @if (hasCreated) {\n              <mat-form-field\n                class=\"input widgetContent time\"\n                [ngClass]=\"widgetInstance.cssClass ?? ''\"\n                [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\n                appearance=\"outline\"\n              >\n                <input\n                  #timeInput\n                  [formControlName]=\"widgetInstance.key + '-time'\"\n                  [attr.data-testid]=\"widgetInstance.key + '-time'\"\n                  [id]=\"widgetInstance.key\"\n                  [type]=\"'time'\"\n                  placeholder=\"{{ widgetInstance.placeholder }}\"\n                  (blur)=\"onTimePickerBlur($event)\"\n                  matInput\n                />\n              </mat-form-field>\n            }\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.SELECT) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <div\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </div>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-select\n              #select\n              [formControlName]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              (selectionChange)=\"onValueChange?.next($event.value)\"\n              (opened)=\"focusSelectFilter()\"\n              (closed)=\"handleBlurEvent(widgetInstance); clearSelectFilter()\"\n              [disabled]=\"widgetInstance.isDisabled!\"\n              [compareWith]=\"\n                widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\n              \"\n              placeholder=\"{{ selectionPlaceholder }}\"\n            >\n              @if (hasSelectFilter()) {\n                <div class=\"comboBoxFilter\">\n                  <mat-icon fontSet=\"material-symbols-outlined\">search</mat-icon>\n                  <input\n                    #selectFilterInput\n                    type=\"text\"\n                    autocomplete=\"off\"\n                    [value]=\"selectFilter()\"\n                    [placeholder]=\"selectFilterPlaceholder\"\n                    (input)=\"onSelectFilterInput(select, $any($event.target).value)\"\n                    (keydown)=\"onSelectFilterKeydown(select, $event)\"\n                  />\n                </div>\n              }\n              @for (option of selectOptions(); track option) {\n                <div>\n                  @if (option.type === getType().ITEM_GROUP) {\n                    <mat-optgroup [label]=\"option.label\" [disabled]=\"option.isDisabled\">\n                      @for (innerOption of option.valueList; track innerOption) {\n                        <mat-option [value]=\"innerOption.value\" [disabled]=\"innerOption.isDisabled\">\n                          @if (innerOption.icon) {\n                            <smart-icon\n                              [icon]=\"innerOption.icon\"\n                              [color]=\"innerOption.iconColor\"\n                            ></smart-icon>\n                          }\n                          {{ innerOption.label }}\n                        </mat-option>\n                      }\n                    </mat-optgroup>\n                  }\n                  @if (option.type === getType().ITEM) {\n                    <mat-option [value]=\"option.value\" [disabled]=\"option.isDisabled\">\n                      @if (option.icon) {\n                        <smart-icon [icon]=\"option.icon\" [color]=\"option.iconColor\"></smart-icon>\n                      }\n                      {{ option.label }}</mat-option\n                    >\n                  }\n                </div>\n              }\n            </mat-select>\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            <span matSuffix>\n              {{ widgetInstance.suffix }}\n            </span>\n            @if (\n              widgetInstance.icon &&\n              (!widgetInstance.iconPosition || widgetInstance.iconPosition === 'POST')\n            ) {\n              <smart-icon\n                [icon]=\"widgetInstance.icon\"\n                [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                matSuffix\n              ></smart-icon>\n            }\n            @if (widgetInstance.selectProperties?.clearable) {\n              <span matSuffix class=\"textFieldButtons\" (click)=\"$event.stopPropagation()\">\n                <ui-action-button\n                  class=\"clearButton\"\n                  [addBasicClasses]=\"false\"\n                  [descriptor]=\"clearButtonDescriptor\"\n                  (actionClick)=\"clearSelect(widgetInstance.key)\"\n                />\n              </span>\n            }\n            @if (isToolbarPresent()) {\n              <smart-ui-action-toolbar\n                class=\"textFieldToolbar\"\n                matSuffix\n                [id]=\"widgetInstance.toolbarId\"\n              ></smart-ui-action-toolbar>\n            }\n          </mat-form-field>\n          @if (\n            !widgetInstance?.hint ||\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-select\n              #select\n              [formControlName]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              multiple\n              (selectionChange)=\"onValueChange?.next($event.value); refocusSelectFilter(select)\"\n              (opened)=\"focusSelectFilter()\"\n              (closed)=\"handleBlurEvent(widgetInstance); clearSelectFilter()\"\n              [disabled]=\"widgetInstance.isDisabled!\"\n              [compareWith]=\"\n                widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\n              \"\n              placeholder=\"{{ selectionPlaceholder }}\"\n            >\n              @if (hasSelectFilter()) {\n                <div class=\"comboBoxFilter\">\n                  <mat-icon fontSet=\"material-symbols-outlined\">search</mat-icon>\n                  <input\n                    #selectFilterInput\n                    type=\"text\"\n                    autocomplete=\"off\"\n                    [value]=\"selectFilter()\"\n                    [placeholder]=\"selectFilterPlaceholder\"\n                    (input)=\"onSelectFilterInput(select, $any($event.target).value)\"\n                    (keydown)=\"onSelectFilterKeydown(select, $event)\"\n                  />\n                </div>\n              }\n              @if (hasSelectAll()) {\n                <div class=\"comboBoxSelectAll\" (keydown)=\"$event.stopPropagation()\">\n                  <mat-checkbox\n                    [checked]=\"selectAllState() === 'all'\"\n                    [indeterminate]=\"selectAllState() === 'some'\"\n                    (change)=\"toggleSelectAll(select)\"\n                    >{{ selectAllLabel }}</mat-checkbox\n                  >\n                </div>\n              }\n              @for (option of selectOptions(); track option) {\n                <div>\n                  @if (option.type === getType().ITEM_GROUP) {\n                    <mat-optgroup [label]=\"option.label\" [disabled]=\"option.isDisabled\">\n                      @for (innerOption of option.valueList; track innerOption) {\n                        <mat-option [value]=\"innerOption.value\" [disabled]=\"innerOption.isDisabled\">\n                          @if (innerOption.icon) {\n                            <smart-icon\n                              [icon]=\"innerOption.icon\"\n                              [color]=\"innerOption.iconColor\"\n                            ></smart-icon>\n                          }\n                          {{ innerOption.label }}</mat-option\n                        >\n                      }\n                    </mat-optgroup>\n                  }\n                  @if (option.type === getType().ITEM) {\n                    <mat-option [value]=\"option.value\" [disabled]=\"option.isDisabled\">\n                      @if (option.icon) {\n                        <smart-icon [icon]=\"option.icon\" [color]=\"option.iconColor\"></smart-icon>\n                      }\n                      {{ option.label }}</mat-option\n                    >\n                  }\n                </div>\n              }\n            </mat-select>\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n            @if (isToolbarPresent()) {\n              <smart-ui-action-toolbar\n                class=\"textFieldToolbar\"\n                matSuffix\n                [id]=\"widgetInstance.toolbarId\"\n              ></smart-ui-action-toolbar>\n            }\n          </mat-form-field>\n          @if (\n            !widgetInstance?.hint ||\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.LABEL) {\n        <div class=\"label widgetContainer\" [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\">\n          <div class=\"label-title labelContainer\" [ngClass]=\"widgetInstance.cssClass ?? ''\">\n            <h4\n              class=\"{{ labelColor() }} smart-form-widget-label {{ widgetInstance.cssClass ?? '' }}\"\n              [ngClass]=\"getNgClass()\"\n              [ngStyle]=\"getStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n            @if (widgetInstance.widgetDescription) {\n              <p>{{ widgetInstance.widgetDescription }}</p>\n            }\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TIME) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent time {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"label\" [ngClass]=\"widgetInstance.cssLabelClass ?? ''\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <input\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [type]=\"'time'\"\n              placeholder=\"{{ widgetInstance.placeholder }}\"\n              matInput\n              (change)=\"handleBlurEvent(widgetInstance)\"\n            />\n            <span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                matSuffix\n              ></smart-icon>\n            }\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TOGGLE) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div\n            class=\"widgetContent  {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n          >\n            <mat-slide-toggle\n              formControlName=\"{{ widgetInstance.key }}\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              (change)=\"onValueChange?.next($event)\"\n              [labelPosition]=\"widgetInstance.toggleLabelPosition ?? 'before'\"\n              >{{ !widgetInstance.showLabel ? widgetInstance.label : '' }}</mat-slide-toggle\n            ><span class=\"mat-error\">\n              {{ widgetInstance.error }}\n            </span>\n            @if (widgetInstance.error && widgetInstance.errorIcon) {\n              <smart-icon\n                [icon]=\"widgetInstance.errorIcon\"\n                [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n              ></smart-icon>\n            }\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.INDICATOR) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <h4\n              class=\"{{ labelColor() }} labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n              [ngClass]=\"getLabelNgClass()\"\n              [ngStyle]=\"getLabelStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          <div class=\"smartIndicator widgetContent\">\n            <div\n              class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\"\n              [ngClass]=\"getNgClass()\"\n            >\n              @for (item of indicatorItems; track item; let i = $index) {\n                <div class=\"indicatorItem\" [ngClass]=\"getIndicatorItemClass(i)\"></div>\n              }\n            </div>\n            <p [ngClass]=\"getIndicatorStatusLabelColor()\">\n              {{ getIndicatorStatusLabel() }}\n            </p>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.RECORDING_UPLOADER) {\n        <div class=\"widgetContainer\">\n          <div class=\"widgetItemContainer\">\n            <smart-voice-recorder\n              [formControlName]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [widgetInstance]=\"widgetInstance\"\n              (uploadFilesEvent)=\"upload($event)\"\n            />\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.FILE_UPLOADER) {\n        <div class=\"widgetContainer\">\n          <smart-file-editor\n            [formControlName]=\"widgetInstance.key\"\n            [attr.data-testid]=\"widgetInstance.key\"\n            [widgetInstance]=\"widgetInstance\"\n            (uploadFilesEvent)=\"upload($event)\"\n            (fileEvent)=\"executeUiAction($event.uiAction)\"\n          />\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.MULTI_FILE_UPLOADER) {\n        <div class=\"widgetContainer\">\n          <smart-multi-file-editor\n            [formControlName]=\"widgetInstance.key\"\n            [attr.data-testid]=\"widgetInstance.key\"\n            [widgetInstance]=\"widgetInstance\"\n            (uploadFilesEvent)=\"upload($event)\"\n            (fileEvent)=\"executeUiAction($event.uiAction)\"\n          />\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.IMAGE) {\n        <div class=\"widgetContainer imageContainer\">\n          @if (widgetInstance.showLabel && getWidgetLabel(widgetInstance)) {\n            <h4\n              class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\n              [ngClass]=\"getLabelNgClass()\"\n              [ngStyle]=\"getLabelStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          @if (widgetInstance.imageProperties?.image) {\n            <smart-icon\n              [imageResource]=\"$safeNavigationMigration(widgetInstance.imageProperties?.image)\"\n              class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\n              alt=\"Image\"\n              title=\"{{ widgetInstance.key }}\"\n              [ngClass]=\"getNgClass()\"\n              [ngStyle]=\"getStyle()\"\n            ></smart-icon>\n          } @else if (widgetInstance.value) {\n            <smart-icon\n              [(ngModel)]=\"widgetInstance.value\"\n              [imageResource]=\"widgetInstance.value\"\n              class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\n              alt=\"Image\"\n              title=\"{{ widgetInstance.key }}\"\n              [ngClass]=\"getNgClass()\"\n              [ngStyle]=\"getStyle()\"\n            ></smart-icon>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DIV) {\n        <div\n          class=\"smartDiv\"\n          [innerHTML]=\"sanitizeHtml(getWidgetLabel(widgetInstance))\"\n          [ngClass]=\"getNgClass()\"\n          [class.clickable]=\"!!widgetInstance.divProperties?.onClick\"\n          [ngStyle]=\"getStyle()\"\n          (click)=\"onDivClick()\"\n        ></div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.HTML) {\n        <smart-html-widget\n          [widgetInstance]=\"widgetInstance\"\n          [ngClass]=\"getNgClass()\"\n          [ngStyle]=\"getStyle()\"\n        ></smart-html-widget>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.SVG) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <h4\n              class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\n              [ngClass]=\"getLabelNgClass()\"\n              [ngStyle]=\"getLabelStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          <div\n            class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [innerHTML]=\"sanitizeHtml(widgetInstance.value)\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n          ></div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DIVIDER) {\n        <div class=\"widgetContainer\">\n          <hr\n            class=\"smartDivider {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n          />\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.BUTTON) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <h4\n              class=\"labelContainer {{ labelColor() }} {{ widgetInstance.cssLabelClass ?? '' }}\"\n              [ngClass]=\"getLabelNgClass()\"\n              [ngStyle]=\"getLabelStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          <div\n            class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n          >\n            <button\n              mat-button\n              [attr.data-testid]=\"widgetInstance.key\"\n              [ngClass]=\"getButtonType(widgetInstance.uiActionDescriptor)\"\n              [color]=\"$safeNavigationMigration(widgetInstance.uiActionDescriptor?.color)\"\n              (click)=\"onButtonClicked(widgetInstance)\"\n            >\n              @if (isOnlyIcon(widgetInstance.uiActionDescriptor)) {\n                @if (widgetInstance.uiActionDescriptor?.icon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n                    [color]=\"\n                      widgetInstance.uiActionDescriptor?.iconColor ??\n                      widgetInstance.uiActionDescriptor?.color\n                    \"\n                  ></smart-icon>\n                }\n              } @else {\n                @if (\n                  widgetInstance.uiActionDescriptor?.icon &&\n                  widgetInstance.uiActionDescriptor?.iconPosition === 'PRE'\n                ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n                    [color]=\"\n                      widgetInstance.uiActionDescriptor?.iconColor ??\n                      widgetInstance.uiActionDescriptor?.color\n                    \"\n                  ></smart-icon>\n                }\n                {{ widgetInstance.uiActionDescriptor?.title }}\n                @if (\n                  widgetInstance.uiActionDescriptor?.icon &&\n                  widgetInstance.uiActionDescriptor?.iconPosition === 'POST'\n                ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n                    [color]=\"\n                      widgetInstance.uiActionDescriptor?.iconColor ??\n                      widgetInstance.uiActionDescriptor?.color\n                    \"\n                  ></smart-icon>\n                }\n              }\n            </button>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.COMPONENT) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <h4 class=\"labelContainer {{ labelColor() }}\">\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          <div class=\"widgetContent\">\n            <ng-template #customComponent></ng-template>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.RICH_TEXT) {\n        <div class=\"widgetContainer\">\n          <div class=\"labelContainer\">\n            @if (widgetInstance.showLabel) {\n              <h4 class=\"{{ labelColor() }}\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n            }\n            @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <div class=\"widgetContent\">\n            <quill-editor\n              #quillEditor\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [modules]=\"\n                widgetInstance.isDisabled ? emptyQuillToolbar : widgetInstance.quillModules\n              \"\n              [placeholder]=\"widgetInstance.placeholder ?? ''\"\n              [readOnly]=\"widgetInstance.isReadonly ?? false\"\n              [maxLength]=\"widgetInstance.maxLength ?? 0\"\n              (onContentChanged)=\"onRichTextEditorContentChanged($event)\"\n            ></quill-editor>\n            @if (\n              !widgetInstance?.hint ||\n              widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n            ) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n            @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n              <mat-hint matSuffix align=\"end\" class=\"rich-text-editor-leeway-counter\">{{\n                getRichTextEditorLengthLeeway()\n              }}</mat-hint>\n            }\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.SORTABLE) {\n        <div class=\"widgetContainer\">\n          <div class=\"labelContainer\">\n            @if (widgetInstance.showLabel) {\n              <h4 class=\"{{ labelColor() }}\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n            }\n            @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <div class=\"widgetContent\">\n            <lib-sortable-widget\n              [formControlName]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [widgetInstance]=\"widgetInstance\"\n            ></lib-sortable-widget>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.MATRIX) {\n        <div class=\"widgetContainer\">\n          <div class=\"labelContainer\">\n            @if (widgetInstance.showLabel) {\n              <h4 class=\"{{ labelColor() }}\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n            }\n            @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <table class=\"matrixTable widgetContent\">\n            <tr>\n              <th></th>\n              @for (option of widgetInstance.value.columns; track option) {\n                <th class=\"optionLabel\">\n                  {{ option.displayValue }}\n                </th>\n              }\n            </tr>\n            @for (question of widgetInstance.value.rows; track question; let i = $index) {\n              <tr>\n                <th class=\"questionLabel\">\n                  <label>{{ question.displayValue }}</label>\n                </th>\n                @for (option of widgetInstance.value.columns; track option; let j = $index) {\n                  <td class=\"selectTd\">\n                    @if (!widgetInstance.isMultiple) {\n                      <mat-radio-group\n                        [formControlName]=\"widgetInstance.key + '.' + question.code\"\n                        [name]=\"'q' + i\"\n                      >\n                        <mat-radio-button [value]=\"option.code\"> </mat-radio-button>\n                      </mat-radio-group>\n                    }\n                    @if (widgetInstance.isMultiple) {\n                      <div>\n                        <mat-checkbox\n                          [formControlName]=\"\n                            widgetInstance.key + '.data.' + question.code + '.' + option.code\n                          \"\n                          [value]=\"widgetInstance.value['data'][question.code][option.code]\"\n                          [checked]=\"true\"\n                        ></mat-checkbox>\n                      </div>\n                    }\n                  </td>\n                }\n                <br />\n                @if (widgetInstance.button) {\n                  <button mat-icon-button (click)=\"removeMatrixRow(question)\">\n                    <smart-icon icon=\"close\"></smart-icon>\n                  </button>\n                }\n              </tr>\n            }\n          </table>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.YOUTUBE_PLAYER) {\n        <div class=\"widgetContainer\">\n          <div class=\"labelContainer\">\n            @if (widgetInstance.showLabel) {\n              <h4\n                class=\"{{ labelColor() }} {{ widgetInstance.cssLabelClass }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n            }\n            @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <youtube-player\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            videoId=\"{{ widgetInstance.videoId }}\"\n            [width]=\"widgetInstance.width\"\n            [height]=\"widgetInstance.height\"\n            [startSeconds]=\"widgetInstance.startSeconds\"\n            [endSeconds]=\"widgetInstance.endSeconds\"\n          ></youtube-player>\n          @if (\n            !widgetInstance?.hint ||\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\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}.comboBoxFilter{display:flex;flex-direction:row;align-items:center;gap:.5rem;min-height:48px;padding:0 1rem;border-bottom:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.comboBoxFilter:focus-within{border-bottom-color:var(--mat-sys-primary, #3f51b5)}.comboBoxFilter .mat-icon{flex:0 0 auto;color:var(--mat-sys-on-surface-variant, rgba(0, 0, 0, .54))}.comboBoxFilter input{flex:1 1 auto;min-width:0;border:none;outline:none;background:transparent;font:inherit;color:inherit}.comboBoxSelectAll{display:flex;align-items:center;min-height:48px;padding:0 .25rem;border-bottom:1px solid var(--mat-sys-outline-variant, rgba(0, 0, 0, .12))}.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: { selectFilterInput: [{ type: i0.ViewChild, args: ['selectFilterInput', { isSignal: true }] }], 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: [{
@@ -19631,11 +19646,11 @@ class SmartTreeComponent {
         return `${cssClass}-${plusProperty}`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartTreeComponent, isStandalone: true, selector: "smart-tree", inputs: { treeStyle: { classPropertyName: "treeStyle", publicName: "treeStyle", isSignal: true, isRequired: false, transformFunction: null }, treeService: { classPropertyName: "treeService", publicName: "treeService", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-testid": "this.testId" } }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true }, { propertyName: "trigger", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"smartTreeContainer\">\n  @if (uiActionModels.length) {\n    <smart-ui-action-toolbar\n      [uiActionModels]=\"uiActionModels\"\n      [executor]=\"executor\"\n    ></smart-ui-action-toolbar>\n  }\n  @if (treeData) {\n    <mat-tree\n      #tree\n      [dataSource]=\"dataSource\"\n      [treeControl]=\"treeControl\"\n      [trackBy]=\"trackByIdentifier\"\n      class=\"sm-tree\"\n    >\n      <mat-nested-tree-node\n        *matTreeNodeDef=\"let node; when: hasChild\"\n        matTreeNodeToggle\n        [ngClass]=\"getClassesForTreeNode(node)\"\n        [ngStyle]=\"getNodeStyle(node)\"\n      >\n        <div\n          [ngStyle]=\"getNodePadding(node)\"\n          [ngClass]=\"getInnerClassesForTreeNode(node)\"\n          class=\"mat-tree-node sm-tree-node\"\n          (click)=\"onNodeClick($event, node)\"\n        >\n          <button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.name\">\n            <mat-icon\n              fontSet=\"material-symbols-outlined\"\n              class=\"mat-icon-rtl-mirror\"\n              (click)=\"onOpenNode($event, node)\"\n            >\n              @if (hasChild(node.level, node)) {\n                <div>\n                  {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n                </div>\n              }\n            </mat-icon>\n          </button>\n          @if (node.tooltip) {\n            <smart-icon\n              [icon]=\"node.icon\"\n              [smartTooltip]=\"createTooltip(node.tooltip)\"\n              smartTooltipClass=\"sm-tree-tooltip\"\n            ></smart-icon>\n          } @else {\n            <smart-icon [icon]=\"node.icon\"></smart-icon>\n          }\n          <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\n            @let captionTooltipText = getCaptionTooltipText(node);\n            @if (captionTooltipText) {\n              <div\n                class=\"sm-tree-row-caption\"\n                [smartTooltip]=\"createTooltip(captionTooltipText)\"\n                smartTooltipClass=\"sm-tree-tooltip\"\n              >\n                {{ node.caption }}\n              </div>\n            } @else {\n              <div class=\"sm-tree-row-caption\">{{ node.caption }}</div>\n            }\n            <div class=\"sm-shortDescription-spacer\"></div>\n            <div class=\"sm-tree-row-shortDescription\">\n              {{ node.shortDescription }}\n            </div>\n            <div class=\"sm-shortDescription-button-spacer\"></div>\n            @if (node.button) {\n              <div class=\"sm-tree-node-button\">\n                @switch (node.button.type) {\n                  @case (smartTreeNodeButtonType.ICON) {\n                    <button (click)=\"customButtonClicked($event, node.button)\" mat-icon-button>\n                      <smart-icon\n                        title=\"{{ node.button.icon }}\"\n                        [icon]=\"node.button.icon\"\n                      ></smart-icon>\n                    </button>\n                  }\n                  @case (smartTreeNodeButtonType.MENU) {\n                    <div>\n                      <button\n                        mat-button\n                        [matMenuTriggerFor]=\"menu\"\n                        (click)=\"customButtonClicked($event, node.button, true)\"\n                      >\n                        @if (node.button.icon) {\n                          <smart-icon [icon]=\"node.button.icon\"></smart-icon>\n                        }\n                        {{ node.button.label }}\n                      </button>\n                      <mat-menu #menu=\"matMenu\">\n                        @for (button of node.button.menuItemButtons; track button.code ?? $index) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, true)\"\n                            mat-menu-item\n                            [attr.data-testid]=\"button.code ?? null\"\n                          >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                      </mat-menu>\n                    </div>\n                  }\n                  @case (smartTreeNodeButtonType.NORMAL) {\n                    <button (click)=\"customButtonClicked($event, node.button)\" mat-raised-button>\n                      @if (node.button.icon) {\n                        <smart-icon [icon]=\"node.button.icon\"></smart-icon>\n                      }\n                      {{ node.button.icon }}\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n        </div>\n        <div\n          [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\n          [ngClass]=\"getClassesForTreeNodeChildren(node)\"\n          role=\"group\"\n        >\n          <ng-container matTreeNodeOutlet></ng-container>\n        </div>\n      </mat-nested-tree-node>\n    </mat-tree>\n  }\n  @if (!treeData) {\n    <div class=\"tree-loading\">\n      <mat-spinner diameter=\"24\" color=\"primary\"></mat-spinner>\n    </div>\n  }\n</div>\n", styles: [".smartTreeContainer{display:flex;flex-direction:column;gap:.5rem}.sm-tree-invisible{display:none}.sm-tree ul,.sm-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.sm-tree div[role=group]>.mat-tree-node{padding-left:40px}.sm-tee-node{padding-left:40px}.sm-tree-node-name{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tree-node-name-row{padding-left:15px;padding-top:15px;display:flex;flex-direction:row;justify-content:space-between}.sm-tree-node-name-col{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tee-node-id{font-weight:lighter}.mat-tree-node:hover{cursor:pointer}.sm-tree-node-selected{background-color:var(--tree-active-background, var(--accent-color, #20b6a8));color:var(--tree-active-color, #ffffff)}::ng-deep .mat-icon-rtl-mirror{display:flex;flex-direction:row}.sm-tree-row{display:flex;flex-direction:row;flex:1;align-items:center}.sm-shortDescription-spacer{flex:1}.sm-tree-row.sm-tree-branch-new,.sm-tree-row.sm-tree-branch-new *{color:var(--success-color, #16a34a)}.sm-tree-row.sm-tree-branch-new .sm-tree-row-caption{font-style:italic}.sm-tree-row.sm-tree-branch-modified,.sm-tree-row.sm-tree-branch-modified *{color:var(--accent-color, #20b6a8)}.sm-tree-row.sm-tree-branch-modified .sm-tree-row-caption{font-weight:600}.sm-tree-row.sm-tree-branch-deleted,.sm-tree-row.sm-tree-branch-deleted *{color:var(--color-text-muted, #68778e)}.sm-tree-row.sm-tree-branch-deleted .sm-tree-row-caption{text-decoration:line-through}.sm-tree-row.sm-tree-branch-contains-change,.sm-tree-row.sm-tree-branch-contains-change *{color:var(--accent-color, #20b6a8)}.sm-tree-row.sm-tree-branch-foreign,.sm-tree-row.sm-tree-branch-own-other-view-context{border-left:3px solid;padding-left:6px}.sm-tree-row.sm-tree-branch-foreign{border-left-color:var(--warning-color, #d97706)}.sm-tree-row.sm-tree-branch-own-other-view-context{border-left-color:var(--info-color, #64748b)}.sm-tree-row.sm-tree-branch-foreign .sm-tree-row-caption,.sm-tree-row.sm-tree-branch-own-other-view-context .sm-tree-row-caption{font-style:italic}.sm-tree-row.sm-tree-branch-foreign .sm-tree-row-shortDescription,.sm-tree-row.sm-tree-branch-own-other-view-context .sm-tree-row-shortDescription{display:none}.sm-tree-row.sm-tree-record-unavailable,.sm-tree-row.sm-tree-record-unavailable *,.sm-tree-node:not(.sm-tree-node-selected):has(>.sm-tree-row.sm-tree-record-unavailable)>smart-icon{color:var(--color-text-muted, #68778e)}.sm-tree-row.sm-tree-record-unavailable .sm-tree-row-caption{font-style:italic}::ng-deep .sm-tree-tooltip .mdc-tooltip__surface{white-space:pre-line}.sm-tree-node-selected .sm-tree-row,.sm-tree-node-selected .sm-tree-row-caption,.sm-tree-node-selected .sm-tree-row-shortDescription{color:inherit}.tree-loading{display:flex;justify-content:center;align-items:center;min-height:200px;width:100%}\n"], dependencies: [{ kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip", "smartTooltipClass"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartTreeComponent, isStandalone: true, selector: "smart-tree", inputs: { treeStyle: { classPropertyName: "treeStyle", publicName: "treeStyle", isSignal: true, isRequired: false, transformFunction: null }, treeService: { classPropertyName: "treeService", publicName: "treeService", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-testid": "this.testId" } }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true }, { propertyName: "trigger", predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<div class=\"smartTreeContainer\">\n  @if (uiActionModels.length) {\n    <smart-ui-action-toolbar\n      [uiActionModels]=\"uiActionModels\"\n      [executor]=\"executor\"\n    ></smart-ui-action-toolbar>\n  }\n  @if (treeData) {\n    <mat-tree\n      #tree\n      [dataSource]=\"dataSource\"\n      [treeControl]=\"treeControl\"\n      [trackBy]=\"trackByIdentifier\"\n      class=\"sm-tree\"\n    >\n      <mat-nested-tree-node\n        *matTreeNodeDef=\"let node; when: hasChild\"\n        matTreeNodeToggle\n        [ngClass]=\"getClassesForTreeNode(node)\"\n        [ngStyle]=\"getNodeStyle(node)\"\n      >\n        <div\n          [ngStyle]=\"getNodePadding(node)\"\n          [ngClass]=\"getInnerClassesForTreeNode(node)\"\n          class=\"mat-tree-node sm-tree-node\"\n          (click)=\"onNodeClick($event, node)\"\n        >\n          <button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.caption\">\n            <mat-icon\n              fontSet=\"material-symbols-outlined\"\n              class=\"mat-icon-rtl-mirror\"\n              (click)=\"onOpenNode($event, node)\"\n            >\n              @if (hasChild(node.level, node)) {\n                <div>\n                  {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n                </div>\n              }\n            </mat-icon>\n          </button>\n          @if (node.tooltip) {\n            <smart-icon\n              [icon]=\"node.icon\"\n              [smartTooltip]=\"createTooltip(node.tooltip)\"\n              smartTooltipClass=\"sm-tree-tooltip\"\n            ></smart-icon>\n          } @else {\n            <smart-icon [icon]=\"node.icon\"></smart-icon>\n          }\n          <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\n            @let captionTooltipText = getCaptionTooltipText(node);\n            @if (captionTooltipText) {\n              <div\n                class=\"sm-tree-row-caption\"\n                [smartTooltip]=\"createTooltip(captionTooltipText)\"\n                smartTooltipClass=\"sm-tree-tooltip\"\n              >\n                {{ node.caption }}\n              </div>\n            } @else {\n              <div class=\"sm-tree-row-caption\">{{ node.caption }}</div>\n            }\n            <div class=\"sm-shortDescription-spacer\"></div>\n            <div class=\"sm-tree-row-shortDescription\">\n              {{ node.shortDescription }}\n            </div>\n            <div class=\"sm-shortDescription-button-spacer\"></div>\n            @if (node.button) {\n              <div class=\"sm-tree-node-button\">\n                @switch (node.button.type) {\n                  @case (smartTreeNodeButtonType.ICON) {\n                    <button (click)=\"customButtonClicked($event, node.button)\" mat-icon-button>\n                      <smart-icon\n                        title=\"{{ node.button.icon }}\"\n                        [icon]=\"node.button.icon\"\n                      ></smart-icon>\n                    </button>\n                  }\n                  @case (smartTreeNodeButtonType.MENU) {\n                    <div>\n                      <button\n                        mat-button\n                        [matMenuTriggerFor]=\"menu\"\n                        (click)=\"customButtonClicked($event, node.button, true)\"\n                      >\n                        @if (node.button.icon) {\n                          <smart-icon [icon]=\"node.button.icon\"></smart-icon>\n                        }\n                        {{ node.button.label }}\n                      </button>\n                      <mat-menu #menu=\"matMenu\">\n                        @for (button of node.button.menuItemButtons; track button.code ?? $index) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, true)\"\n                            mat-menu-item\n                            [attr.data-testid]=\"button.code ?? null\"\n                          >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                      </mat-menu>\n                    </div>\n                  }\n                  @case (smartTreeNodeButtonType.NORMAL) {\n                    <button (click)=\"customButtonClicked($event, node.button)\" mat-raised-button>\n                      @if (node.button.icon) {\n                        <smart-icon [icon]=\"node.button.icon\"></smart-icon>\n                      }\n                      {{ node.button.icon }}\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n        </div>\n        <div\n          [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\n          [ngClass]=\"getClassesForTreeNodeChildren(node)\"\n          role=\"group\"\n        >\n          <ng-container matTreeNodeOutlet></ng-container>\n        </div>\n      </mat-nested-tree-node>\n    </mat-tree>\n  }\n  @if (!treeData) {\n    <div class=\"tree-loading\">\n      <mat-spinner diameter=\"24\" color=\"primary\"></mat-spinner>\n    </div>\n  }\n</div>\n", styles: [".smartTreeContainer{display:flex;flex-direction:column;gap:.5rem}.sm-tree-invisible{display:none}.sm-tree ul,.sm-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.sm-tree div[role=group]>.mat-tree-node{padding-left:40px}.sm-tee-node{padding-left:40px}.sm-tree-node-name{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tree-node-name-row{padding-left:15px;padding-top:15px;display:flex;flex-direction:row;justify-content:space-between}.sm-tree-node-name-col{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tee-node-id{font-weight:lighter}.mat-tree-node:hover{cursor:pointer}.sm-tree-node-selected{background-color:var(--tree-active-background, var(--accent-color, #20b6a8));color:var(--tree-active-color, #ffffff)}::ng-deep .mat-icon-rtl-mirror{display:flex;flex-direction:row}.sm-tree-row{display:flex;flex-direction:row;flex:1;align-items:center}.sm-shortDescription-spacer{flex:1}.sm-tree-row.sm-tree-branch-new,.sm-tree-row.sm-tree-branch-new *{color:var(--success-color, #16a34a)}.sm-tree-row.sm-tree-branch-new .sm-tree-row-caption{font-style:italic}.sm-tree-row.sm-tree-branch-modified,.sm-tree-row.sm-tree-branch-modified *{color:var(--accent-color, #20b6a8)}.sm-tree-row.sm-tree-branch-modified .sm-tree-row-caption{font-weight:600}.sm-tree-row.sm-tree-branch-deleted,.sm-tree-row.sm-tree-branch-deleted *{color:var(--color-text-muted, #68778e)}.sm-tree-row.sm-tree-branch-deleted .sm-tree-row-caption{text-decoration:line-through}.sm-tree-row.sm-tree-branch-contains-change,.sm-tree-row.sm-tree-branch-contains-change *{color:var(--accent-color, #20b6a8)}.sm-tree-row.sm-tree-branch-foreign,.sm-tree-row.sm-tree-branch-own-other-view-context{border-left:3px solid;padding-left:6px}.sm-tree-row.sm-tree-branch-foreign{border-left-color:var(--warning-color, #d97706)}.sm-tree-row.sm-tree-branch-own-other-view-context{border-left-color:var(--info-color, #64748b)}.sm-tree-row.sm-tree-branch-foreign .sm-tree-row-caption,.sm-tree-row.sm-tree-branch-own-other-view-context .sm-tree-row-caption{font-style:italic}.sm-tree-row.sm-tree-branch-foreign .sm-tree-row-shortDescription,.sm-tree-row.sm-tree-branch-own-other-view-context .sm-tree-row-shortDescription{display:none}.sm-tree-row.sm-tree-record-unavailable,.sm-tree-row.sm-tree-record-unavailable *,.sm-tree-node:not(.sm-tree-node-selected):has(>.sm-tree-row.sm-tree-record-unavailable)>smart-icon{color:var(--color-text-muted, #68778e)}.sm-tree-row.sm-tree-record-unavailable .sm-tree-row-caption{font-style:italic}::ng-deep .sm-tree-tooltip .mdc-tooltip__surface{white-space:pre-line}.sm-tree-node-selected .sm-tree-row,.sm-tree-node-selected .sm-tree-row-caption,.sm-tree-node-selected .sm-tree-row-shortDescription{color:inherit}.tree-loading{display:flex;justify-content:center;align-items:center;min-height:200px;width:100%}\n"], dependencies: [{ kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatNestedTreeNode, selector: "mat-nested-tree-node", inputs: ["matNestedTreeNode", "disabled", "tabIndex"], outputs: ["activation", "expandedChange"], exportAs: ["matNestedTreeNode"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "directive", type: MatTreeNodeOutlet, selector: "[matTreeNodeOutlet]" }, { kind: "component", type: MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip", "smartTooltipClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartTreeComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-tree', imports: [UiActionToolbarComponent, MatTree, MatTreeNodeDef, MatNestedTreeNode, MatTreeNodeToggle, NgClass, NgStyle, MatIconButton, MatIcon, SmartIconComponent, MatButton, MatMenuTrigger, MatMenu, MatMenuItem, MatTreeNodeOutlet, MatProgressSpinner, SmartTooltipDirective], template: "<div class=\"smartTreeContainer\">\n  @if (uiActionModels.length) {\n    <smart-ui-action-toolbar\n      [uiActionModels]=\"uiActionModels\"\n      [executor]=\"executor\"\n    ></smart-ui-action-toolbar>\n  }\n  @if (treeData) {\n    <mat-tree\n      #tree\n      [dataSource]=\"dataSource\"\n      [treeControl]=\"treeControl\"\n      [trackBy]=\"trackByIdentifier\"\n      class=\"sm-tree\"\n    >\n      <mat-nested-tree-node\n        *matTreeNodeDef=\"let node; when: hasChild\"\n        matTreeNodeToggle\n        [ngClass]=\"getClassesForTreeNode(node)\"\n        [ngStyle]=\"getNodeStyle(node)\"\n      >\n        <div\n          [ngStyle]=\"getNodePadding(node)\"\n          [ngClass]=\"getInnerClassesForTreeNode(node)\"\n          class=\"mat-tree-node sm-tree-node\"\n          (click)=\"onNodeClick($event, node)\"\n        >\n          <button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.name\">\n            <mat-icon\n              fontSet=\"material-symbols-outlined\"\n              class=\"mat-icon-rtl-mirror\"\n              (click)=\"onOpenNode($event, node)\"\n            >\n              @if (hasChild(node.level, node)) {\n                <div>\n                  {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n                </div>\n              }\n            </mat-icon>\n          </button>\n          @if (node.tooltip) {\n            <smart-icon\n              [icon]=\"node.icon\"\n              [smartTooltip]=\"createTooltip(node.tooltip)\"\n              smartTooltipClass=\"sm-tree-tooltip\"\n            ></smart-icon>\n          } @else {\n            <smart-icon [icon]=\"node.icon\"></smart-icon>\n          }\n          <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\n            @let captionTooltipText = getCaptionTooltipText(node);\n            @if (captionTooltipText) {\n              <div\n                class=\"sm-tree-row-caption\"\n                [smartTooltip]=\"createTooltip(captionTooltipText)\"\n                smartTooltipClass=\"sm-tree-tooltip\"\n              >\n                {{ node.caption }}\n              </div>\n            } @else {\n              <div class=\"sm-tree-row-caption\">{{ node.caption }}</div>\n            }\n            <div class=\"sm-shortDescription-spacer\"></div>\n            <div class=\"sm-tree-row-shortDescription\">\n              {{ node.shortDescription }}\n            </div>\n            <div class=\"sm-shortDescription-button-spacer\"></div>\n            @if (node.button) {\n              <div class=\"sm-tree-node-button\">\n                @switch (node.button.type) {\n                  @case (smartTreeNodeButtonType.ICON) {\n                    <button (click)=\"customButtonClicked($event, node.button)\" mat-icon-button>\n                      <smart-icon\n                        title=\"{{ node.button.icon }}\"\n                        [icon]=\"node.button.icon\"\n                      ></smart-icon>\n                    </button>\n                  }\n                  @case (smartTreeNodeButtonType.MENU) {\n                    <div>\n                      <button\n                        mat-button\n                        [matMenuTriggerFor]=\"menu\"\n                        (click)=\"customButtonClicked($event, node.button, true)\"\n                      >\n                        @if (node.button.icon) {\n                          <smart-icon [icon]=\"node.button.icon\"></smart-icon>\n                        }\n                        {{ node.button.label }}\n                      </button>\n                      <mat-menu #menu=\"matMenu\">\n                        @for (button of node.button.menuItemButtons; track button.code ?? $index) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, true)\"\n                            mat-menu-item\n                            [attr.data-testid]=\"button.code ?? null\"\n                          >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                      </mat-menu>\n                    </div>\n                  }\n                  @case (smartTreeNodeButtonType.NORMAL) {\n                    <button (click)=\"customButtonClicked($event, node.button)\" mat-raised-button>\n                      @if (node.button.icon) {\n                        <smart-icon [icon]=\"node.button.icon\"></smart-icon>\n                      }\n                      {{ node.button.icon }}\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n        </div>\n        <div\n          [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\n          [ngClass]=\"getClassesForTreeNodeChildren(node)\"\n          role=\"group\"\n        >\n          <ng-container matTreeNodeOutlet></ng-container>\n        </div>\n      </mat-nested-tree-node>\n    </mat-tree>\n  }\n  @if (!treeData) {\n    <div class=\"tree-loading\">\n      <mat-spinner diameter=\"24\" color=\"primary\"></mat-spinner>\n    </div>\n  }\n</div>\n", styles: [".smartTreeContainer{display:flex;flex-direction:column;gap:.5rem}.sm-tree-invisible{display:none}.sm-tree ul,.sm-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.sm-tree div[role=group]>.mat-tree-node{padding-left:40px}.sm-tee-node{padding-left:40px}.sm-tree-node-name{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tree-node-name-row{padding-left:15px;padding-top:15px;display:flex;flex-direction:row;justify-content:space-between}.sm-tree-node-name-col{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tee-node-id{font-weight:lighter}.mat-tree-node:hover{cursor:pointer}.sm-tree-node-selected{background-color:var(--tree-active-background, var(--accent-color, #20b6a8));color:var(--tree-active-color, #ffffff)}::ng-deep .mat-icon-rtl-mirror{display:flex;flex-direction:row}.sm-tree-row{display:flex;flex-direction:row;flex:1;align-items:center}.sm-shortDescription-spacer{flex:1}.sm-tree-row.sm-tree-branch-new,.sm-tree-row.sm-tree-branch-new *{color:var(--success-color, #16a34a)}.sm-tree-row.sm-tree-branch-new .sm-tree-row-caption{font-style:italic}.sm-tree-row.sm-tree-branch-modified,.sm-tree-row.sm-tree-branch-modified *{color:var(--accent-color, #20b6a8)}.sm-tree-row.sm-tree-branch-modified .sm-tree-row-caption{font-weight:600}.sm-tree-row.sm-tree-branch-deleted,.sm-tree-row.sm-tree-branch-deleted *{color:var(--color-text-muted, #68778e)}.sm-tree-row.sm-tree-branch-deleted .sm-tree-row-caption{text-decoration:line-through}.sm-tree-row.sm-tree-branch-contains-change,.sm-tree-row.sm-tree-branch-contains-change *{color:var(--accent-color, #20b6a8)}.sm-tree-row.sm-tree-branch-foreign,.sm-tree-row.sm-tree-branch-own-other-view-context{border-left:3px solid;padding-left:6px}.sm-tree-row.sm-tree-branch-foreign{border-left-color:var(--warning-color, #d97706)}.sm-tree-row.sm-tree-branch-own-other-view-context{border-left-color:var(--info-color, #64748b)}.sm-tree-row.sm-tree-branch-foreign .sm-tree-row-caption,.sm-tree-row.sm-tree-branch-own-other-view-context .sm-tree-row-caption{font-style:italic}.sm-tree-row.sm-tree-branch-foreign .sm-tree-row-shortDescription,.sm-tree-row.sm-tree-branch-own-other-view-context .sm-tree-row-shortDescription{display:none}.sm-tree-row.sm-tree-record-unavailable,.sm-tree-row.sm-tree-record-unavailable *,.sm-tree-node:not(.sm-tree-node-selected):has(>.sm-tree-row.sm-tree-record-unavailable)>smart-icon{color:var(--color-text-muted, #68778e)}.sm-tree-row.sm-tree-record-unavailable .sm-tree-row-caption{font-style:italic}::ng-deep .sm-tree-tooltip .mdc-tooltip__surface{white-space:pre-line}.sm-tree-node-selected .sm-tree-row,.sm-tree-node-selected .sm-tree-row-caption,.sm-tree-node-selected .sm-tree-row-shortDescription{color:inherit}.tree-loading{display:flex;justify-content:center;align-items:center;min-height:200px;width:100%}\n"] }]
+            args: [{ selector: 'smart-tree', imports: [UiActionToolbarComponent, MatTree, MatTreeNodeDef, MatNestedTreeNode, MatTreeNodeToggle, NgClass, NgStyle, MatIconButton, MatIcon, SmartIconComponent, MatButton, MatMenuTrigger, MatMenu, MatMenuItem, MatTreeNodeOutlet, MatProgressSpinner, SmartTooltipDirective], template: "<div class=\"smartTreeContainer\">\n  @if (uiActionModels.length) {\n    <smart-ui-action-toolbar\n      [uiActionModels]=\"uiActionModels\"\n      [executor]=\"executor\"\n    ></smart-ui-action-toolbar>\n  }\n  @if (treeData) {\n    <mat-tree\n      #tree\n      [dataSource]=\"dataSource\"\n      [treeControl]=\"treeControl\"\n      [trackBy]=\"trackByIdentifier\"\n      class=\"sm-tree\"\n    >\n      <mat-nested-tree-node\n        *matTreeNodeDef=\"let node; when: hasChild\"\n        matTreeNodeToggle\n        [ngClass]=\"getClassesForTreeNode(node)\"\n        [ngStyle]=\"getNodeStyle(node)\"\n      >\n        <div\n          [ngStyle]=\"getNodePadding(node)\"\n          [ngClass]=\"getInnerClassesForTreeNode(node)\"\n          class=\"mat-tree-node sm-tree-node\"\n          (click)=\"onNodeClick($event, node)\"\n        >\n          <button mat-icon-button matTreeNodeToggle [attr.aria-label]=\"'Toggle ' + node.caption\">\n            <mat-icon\n              fontSet=\"material-symbols-outlined\"\n              class=\"mat-icon-rtl-mirror\"\n              (click)=\"onOpenNode($event, node)\"\n            >\n              @if (hasChild(node.level, node)) {\n                <div>\n                  {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n                </div>\n              }\n            </mat-icon>\n          </button>\n          @if (node.tooltip) {\n            <smart-icon\n              [icon]=\"node.icon\"\n              [smartTooltip]=\"createTooltip(node.tooltip)\"\n              smartTooltipClass=\"sm-tree-tooltip\"\n            ></smart-icon>\n          } @else {\n            <smart-icon [icon]=\"node.icon\"></smart-icon>\n          }\n          <div class=\"sm-tree-row\" [ngClass]=\"node.classes\">\n            @let captionTooltipText = getCaptionTooltipText(node);\n            @if (captionTooltipText) {\n              <div\n                class=\"sm-tree-row-caption\"\n                [smartTooltip]=\"createTooltip(captionTooltipText)\"\n                smartTooltipClass=\"sm-tree-tooltip\"\n              >\n                {{ node.caption }}\n              </div>\n            } @else {\n              <div class=\"sm-tree-row-caption\">{{ node.caption }}</div>\n            }\n            <div class=\"sm-shortDescription-spacer\"></div>\n            <div class=\"sm-tree-row-shortDescription\">\n              {{ node.shortDescription }}\n            </div>\n            <div class=\"sm-shortDescription-button-spacer\"></div>\n            @if (node.button) {\n              <div class=\"sm-tree-node-button\">\n                @switch (node.button.type) {\n                  @case (smartTreeNodeButtonType.ICON) {\n                    <button (click)=\"customButtonClicked($event, node.button)\" mat-icon-button>\n                      <smart-icon\n                        title=\"{{ node.button.icon }}\"\n                        [icon]=\"node.button.icon\"\n                      ></smart-icon>\n                    </button>\n                  }\n                  @case (smartTreeNodeButtonType.MENU) {\n                    <div>\n                      <button\n                        mat-button\n                        [matMenuTriggerFor]=\"menu\"\n                        (click)=\"customButtonClicked($event, node.button, true)\"\n                      >\n                        @if (node.button.icon) {\n                          <smart-icon [icon]=\"node.button.icon\"></smart-icon>\n                        }\n                        {{ node.button.label }}\n                      </button>\n                      <mat-menu #menu=\"matMenu\">\n                        @for (button of node.button.menuItemButtons; track button.code ?? $index) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, true)\"\n                            mat-menu-item\n                            [attr.data-testid]=\"button.code ?? null\"\n                          >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                      </mat-menu>\n                    </div>\n                  }\n                  @case (smartTreeNodeButtonType.NORMAL) {\n                    <button (click)=\"customButtonClicked($event, node.button)\" mat-raised-button>\n                      @if (node.button.icon) {\n                        <smart-icon [icon]=\"node.button.icon\"></smart-icon>\n                      }\n                      {{ node.button.icon }}\n                    </button>\n                  }\n                }\n              </div>\n            }\n          </div>\n        </div>\n        <div\n          [class.sm-tree-invisible]=\"!treeControl.isExpanded(node)\"\n          [ngClass]=\"getClassesForTreeNodeChildren(node)\"\n          role=\"group\"\n        >\n          <ng-container matTreeNodeOutlet></ng-container>\n        </div>\n      </mat-nested-tree-node>\n    </mat-tree>\n  }\n  @if (!treeData) {\n    <div class=\"tree-loading\">\n      <mat-spinner diameter=\"24\" color=\"primary\"></mat-spinner>\n    </div>\n  }\n</div>\n", styles: [".smartTreeContainer{display:flex;flex-direction:column;gap:.5rem}.sm-tree-invisible{display:none}.sm-tree ul,.sm-tree li{margin-top:0;margin-bottom:0;list-style-type:none}.sm-tree div[role=group]>.mat-tree-node{padding-left:40px}.sm-tee-node{padding-left:40px}.sm-tree-node-name{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tree-node-name-row{padding-left:15px;padding-top:15px;display:flex;flex-direction:row;justify-content:space-between}.sm-tree-node-name-col{padding-left:15px;padding-top:15px;display:flex;flex-direction:column}.sm-tee-node-id{font-weight:lighter}.mat-tree-node:hover{cursor:pointer}.sm-tree-node-selected{background-color:var(--tree-active-background, var(--accent-color, #20b6a8));color:var(--tree-active-color, #ffffff)}::ng-deep .mat-icon-rtl-mirror{display:flex;flex-direction:row}.sm-tree-row{display:flex;flex-direction:row;flex:1;align-items:center}.sm-shortDescription-spacer{flex:1}.sm-tree-row.sm-tree-branch-new,.sm-tree-row.sm-tree-branch-new *{color:var(--success-color, #16a34a)}.sm-tree-row.sm-tree-branch-new .sm-tree-row-caption{font-style:italic}.sm-tree-row.sm-tree-branch-modified,.sm-tree-row.sm-tree-branch-modified *{color:var(--accent-color, #20b6a8)}.sm-tree-row.sm-tree-branch-modified .sm-tree-row-caption{font-weight:600}.sm-tree-row.sm-tree-branch-deleted,.sm-tree-row.sm-tree-branch-deleted *{color:var(--color-text-muted, #68778e)}.sm-tree-row.sm-tree-branch-deleted .sm-tree-row-caption{text-decoration:line-through}.sm-tree-row.sm-tree-branch-contains-change,.sm-tree-row.sm-tree-branch-contains-change *{color:var(--accent-color, #20b6a8)}.sm-tree-row.sm-tree-branch-foreign,.sm-tree-row.sm-tree-branch-own-other-view-context{border-left:3px solid;padding-left:6px}.sm-tree-row.sm-tree-branch-foreign{border-left-color:var(--warning-color, #d97706)}.sm-tree-row.sm-tree-branch-own-other-view-context{border-left-color:var(--info-color, #64748b)}.sm-tree-row.sm-tree-branch-foreign .sm-tree-row-caption,.sm-tree-row.sm-tree-branch-own-other-view-context .sm-tree-row-caption{font-style:italic}.sm-tree-row.sm-tree-branch-foreign .sm-tree-row-shortDescription,.sm-tree-row.sm-tree-branch-own-other-view-context .sm-tree-row-shortDescription{display:none}.sm-tree-row.sm-tree-record-unavailable,.sm-tree-row.sm-tree-record-unavailable *,.sm-tree-node:not(.sm-tree-node-selected):has(>.sm-tree-row.sm-tree-record-unavailable)>smart-icon{color:var(--color-text-muted, #68778e)}.sm-tree-row.sm-tree-record-unavailable .sm-tree-row-caption{font-style:italic}::ng-deep .sm-tree-tooltip .mdc-tooltip__surface{white-space:pre-line}.sm-tree-node-selected .sm-tree-row,.sm-tree-node-selected .sm-tree-row-caption,.sm-tree-node-selected .sm-tree-row-shortDescription{color:inherit}.tree-loading{display:flex;justify-content:center;align-items:center;min-height:200px;width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { trigger: [{
                 type: ViewChildren,
                 args: [MatMenuTrigger]
@@ -20960,9 +20975,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }] }] });
 
 class SmarttreeGenericService extends SmarttreeService {
-    constructor(inject, pageName, treeId) {
+    constructor(inject, pageName, treeId, resolveViewUuid) {
         super();
         this.pageName = pageName;
+        this.resolveViewUuid = resolveViewUuid;
         this.uiActionDescriptors = new Map();
         /**
          * The node objects of the last sync by identifier. Not read from `smartTreeModel`: an expansion
@@ -21010,7 +21026,7 @@ class SmarttreeGenericService extends SmarttreeService {
         }
     }
     async downloadTree() {
-        let uuid = this.viewContext.getUuidOfPage(this.pageName);
+        let uuid = this.viewUuid();
         const rootNodes = await this.viewContext.handlePerformActionResponse(await this.service.getRootNodes2(uuid, this.treeId).toPromise(), uuid);
         const uiActions = await this.viewContext.handlePerformActionResponse(await this.service.getMainActions2(uuid, this.treeId).toPromise(), uuid);
         if (uiActions) {
@@ -21026,7 +21042,7 @@ class SmarttreeGenericService extends SmarttreeService {
         return rootNodes ?? [];
     }
     async downloadChildren(parentNode) {
-        let uuid = this.viewContext.getUuidOfPage(this.pageName);
+        let uuid = this.viewUuid();
         const children = await this.viewContext.handlePerformActionResponse(await this.service.getChildrenNodes2(uuid, this.treeId, parentNode.identifier).toPromise(), uuid);
         if (!children) {
             throw new Error(`Node with identifier ${parentNode.identifier} does not have children.`);
@@ -21034,7 +21050,7 @@ class SmarttreeGenericService extends SmarttreeService {
         return children;
     }
     async onTreeNodeOpen(treeNode) {
-        let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
+        let viewUuid = this.viewUuid();
         if (treeNode?.expanded) {
             let tempTreeNode = await this.viewContext.handlePerformActionResponse(await this.service.collapseNode2(viewUuid, this.treeId, treeNode.identifier).toPromise(), viewUuid);
             treeNode = tempTreeNode;
@@ -21052,7 +21068,7 @@ class SmarttreeGenericService extends SmarttreeService {
         this.selectFolder(treeNode.identifier, treeNode);
     }
     async selectFolder(folderUri, treeNode) {
-        let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
+        let viewUuid = this.viewUuid();
         let updatedTreeNode = await this.viewContext.handlePerformActionResponse(await this.viewContext.withModelSync({}, (request) => this.service.selectNode2(viewUuid, this.treeId, treeNode.identifier, request).toPromise()), viewUuid);
         if (this.selectedNode) {
             this.selectedNode.selected = false;
@@ -21071,7 +21087,14 @@ class SmarttreeGenericService extends SmarttreeService {
     }
     isDownloadedForAnotherView() {
         return (this.downloadedViewUuid !== undefined &&
-            this.downloadedViewUuid !== this.viewContext.getUuidOfPage(this.pageName));
+            this.downloadedViewUuid !== this.viewUuid());
+    }
+    /**
+     * The page client hands its own view's uuid, which inside a dialog is the dialog's: the
+     * page-name entry may point at another view of the same page.
+     */
+    viewUuid() {
+        return this.resolveViewUuid?.() ?? this.viewContext.getUuidOfPage(this.pageName);
     }
     async updateTreeOnTheFly() {
         await this.initialize();
@@ -21266,17 +21289,17 @@ class SmarttreeGenericService extends SmarttreeService {
     async performNodeUiActionRequest(uiActionRequest) {
         let nodeId = uiActionRequest.params['nodeUuid'];
         delete uiActionRequest.params['nodeUuid'];
-        let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
+        let viewUuid = this.viewUuid();
         this.treeFromBackend = await this.viewContext.handlePerformActionResponse(await this.viewContext.withModelSync(uiActionRequest, (request) => this.service.performAction2(viewUuid, this.treeId, nodeId, request).toPromise()), viewUuid);
     }
     async performMainUiActionRequest(uiActionRequest) {
-        let viewUuid = this.viewContext.getUuidOfPage(this.pageName);
+        let viewUuid = this.viewUuid();
         this.treeFromBackend = await this.viewContext.handlePerformActionResponse(await this.viewContext.withModelSync(uiActionRequest, (request) => this.service.performMainAction2(viewUuid, this.treeId, request).toPromise()), viewUuid);
     }
     handleSpecificDemandsAsynchronously(uiAction, uiActionRequest) {
         throw new Error('Method not implemented.');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmarttreeGenericService, deps: [{ token: i0.Injector }, { token: 'pageName' }, { token: 'treeId' }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmarttreeGenericService, deps: [{ token: i0.Injector }, { token: 'pageName' }, { token: 'treeId' }, { token: 'viewUuid', optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmarttreeGenericService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmarttreeGenericService, decorators: [{
@@ -21290,6 +21313,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }] }, { type: undefined, decorators: [{
                     type: Inject,
                     args: ['treeId']
+                }] }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: ['viewUuid']
                 }] }] });
 
 /*
@@ -21701,10 +21729,7 @@ class SmartComponentApiClient {
     }
     async load() {
         this.componentModelLoaded = false;
-        // Slot-hosted views (NORMAL/EMBEDDED) get their uuid injected at creation. DIALOG views
-        // are not slot-hosted: they read it from the dialog data, and fall back to the
-        // pageName -> getUuidOfPage shim only when the dialog was opened without one.
-        const uuid = this.uuid ?? this.readDialogDataUuid() ?? this.viewContext.getUuidOfPage(this.pageName);
+        const uuid = this.resolveViewUuid();
         // console.log('[Embedded] load()', {
         //   pageName: this.pageName,
         //   _uuid: this._uuid,
@@ -21888,7 +21913,7 @@ class SmartComponentApiClient {
     createTreeService(treeId) {
         // The tree registers itself with this component through DI, keyed by its treeId, so
         // nothing has to be recorded here. (ADR-0005)
-        return new SmarttreeGenericService(this.inject, this.pageName, treeId);
+        return new SmarttreeGenericService(this.inject, this.pageName, treeId, () => this.resolveViewUuid());
     }
     addFileUploader(uiActionCode, fileFormats, maxSizeMb, isMultiple) {
         return {
@@ -21899,6 +21924,14 @@ class SmartComponentApiClient {
             maxSizeMb,
         };
     }
+    /**
+     * Slot-hosted views (NORMAL/EMBEDDED) get their uuid injected at creation. DIALOG views are
+     * not slot-hosted: they read it from the dialog data, and fall back to the pageName ->
+     * getUuidOfPage shim only when the dialog was opened without one.
+     */
+    resolveViewUuid() {
+        return (this.uuid ?? this.readDialogDataUuid() ?? this.viewContext.getUuidOfPage(this.pageName));
+    }
     /**
      * For dialog-hosted default components, the view uuid is passed through the
      * dialog data (MAT_DIALOG_DATA). Returns undefined for slot-hosted