@smartbit4all/ng-client 7.1.1 → 7.2.0

package/fesm2022/smartbit4all-ng-client.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, reflectComponentType, Injectable, inject, DOCUMENT, PLATFORM_ID, Optional, Inject, RendererStyleFlags2, input, computed, Component, HostListener, HostBinding, Directive, ViewContainerRef, ElementRef, Renderer2, ChangeDetectorRef, Input, output, signal, Injector, ViewChild, ViewChildren, effect, afterNextRender, NgZone, forwardRef, Pipe, ChangeDetectionStrategy, ViewEncapsulation, SkipSelf, NgModule, EnvironmentInjector, EventEmitter, Output, ApplicationRef, viewChild, makeEnvironmentProviders, importProvidersFrom } from '@angular/core';
+import { InjectionToken, reflectComponentType, Injectable, inject, DOCUMENT, PLATFORM_ID, Optional, Inject, RendererStyleFlags2, input, computed, Component, HostListener, HostBinding, Directive, ViewContainerRef, ElementRef, Renderer2, ChangeDetectorRef, Input, output, signal, Injector, ViewChild, ViewChildren, effect, afterNextRender, NgZone, forwardRef, createComponent, CSP_NONCE, EnvironmentInjector, ApplicationRef, untracked, DestroyRef, ChangeDetectionStrategy, ViewEncapsulation, Pipe, SkipSelf, NgModule, EventEmitter, Output, viewChild, makeEnvironmentProviders, importProvidersFrom } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpContext, HttpErrorResponse, HttpParams, provideHttpClient, withInterceptors, withInterceptorsFromDi } from '@angular/common/http';
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
@@ -23,7 +23,7 @@ import { Validators, UntypedFormGroup, UntypedFormControl, NG_VALUE_ACCESSOR, Fo
 import { ENTER, COMMA } from '@angular/cdk/keycodes';
 import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autocomplete';
 import { MatChipGrid, MatChipRow, MatChipRemove, MatChipInput, MatChip } from '@angular/material/chips';
-import { set } from 'date-fns';
+import { parseISO, isValid, format, set } from 'date-fns';
 import { Overlay, OverlayPositionBuilder, ScrollDispatcher } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { MatLabel, MatFormField, MatSuffix, MatHint, MatPrefix } from '@angular/material/form-field';
@@ -6160,6 +6160,18 @@ const APIS$4 = [DefaultService$1];
  * Do not edit the class manually.
  */
 
+/**
+ * Form layout definition
+ * Contains form layout definition objects.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+
 var RecordingUploaderPropertiesOpenDirectionEnum;
 (function (RecordingUploaderPropertiesOpenDirectionEnum) {
     RecordingUploaderPropertiesOpenDirectionEnum["RIGHT"] = "RIGHT";
@@ -6267,6 +6279,7 @@ var SmartFormWidgetType;
     SmartFormWidgetType["SVG"] = "SVG";
     SmartFormWidgetType["DIV"] = "DIV";
     SmartFormWidgetType["RECORDING_UPLOADER"] = "RECORDING_UPLOADER";
+    SmartFormWidgetType["HTML"] = "HTML";
 })(SmartFormWidgetType || (SmartFormWidgetType = {}));
 
 /**
@@ -6420,6 +6433,31 @@ function registerSmartWidget(client, registration) {
     });
 }
 
+/**
+ * The key and display property of a valueSet's values: the preferred name if the values carry it,
+ * then the GenericValue name (`uri` / `name`), then the Value name (`objectUri` / `displayValue`).
+ * With no sample value to look at the preferred name is assumed to exist.
+ */
+function valueSetKeyProperty(values, preferred) {
+    return firstExisting(values, [preferred ?? 'objectUri', 'uri', 'objectUri']);
+}
+function valueSetDisplayProperty(values, preferred) {
+    return firstExisting(values, [preferred ?? 'displayValue', 'name', 'displayValue']);
+}
+/** The label of a code in a valueSet, or undefined when the valueSet does not know the code. */
+function valueSetLabelOf(valueSet, code) {
+    const values = valueSet.valueSetData?.values ?? [];
+    const keyProperty = valueSetKeyProperty(values, valueSet.valueSetData?.keyProperty);
+    const hit = values.find((value) => String(value[keyProperty]) === String(code));
+    return hit?.[valueSetDisplayProperty(values)];
+}
+function firstExisting(values, candidates) {
+    if (!values?.length) {
+        return candidates[0];
+    }
+    return candidates.find((c) => c in values[0]) ?? candidates[candidates.length - 1];
+}
+
 const EMPTY_PARAMS = {};
 const NAMED_VALIDATOR = new InjectionToken('Named validator factory');
 
@@ -6582,7 +6620,8 @@ class SmartFormService {
             if (w.type !== SmartFormWidgetType.CONTAINER &&
                 w.type !== SmartFormWidgetType.LABEL &&
                 w.type !== SmartFormWidgetType.CHECK_BOX_2 &&
-                w.type !== SmartFormWidgetType.YOUTUBE_PLAYER) {
+                w.type !== SmartFormWidgetType.YOUTUBE_PLAYER &&
+                w.type !== SmartFormWidgetType.HTML) {
                 keys.push(w.key);
             }
             if (w.type === SmartFormWidgetType.TEXT_FIELD_CHIPS ||
@@ -6718,7 +6757,8 @@ class SmartFormService {
                         widget.type !== SmartFormWidgetType.DIVIDER &&
                         widget.type !== SmartFormWidgetType.BUTTON &&
                         widget.type !== SmartFormWidgetType.COMPONENT &&
-                        widget.type !== SmartFormWidgetType.YOUTUBE_PLAYER) {
+                        widget.type !== SmartFormWidgetType.YOUTUBE_PLAYER &&
+                        widget.type !== SmartFormWidgetType.HTML) {
                         widget.value = value;
                         if (widget.showLabel === undefined && smartForm.showLabel) {
                             widget.showLabel = true;
@@ -6762,23 +6802,10 @@ class SmartFormService {
                     let valueSetData = valueSet.valueSetData;
                     let values = valueSetData.values;
                     let selectionDefinition = widget.selection;
-                    let displayProperty = selectionDefinition?.displayProperty ?? 'displayValue';
-                    // check is displayProperty exists, fallback for common display properties
-                    if (!this.checkProperty(values, displayProperty)) {
-                        displayProperty = 'name'; // GenericValue.name
-                        if (!this.checkProperty(values, displayProperty)) {
-                            displayProperty = 'displayValue'; // Value.displayValue
-                        }
-                    }
+                    let displayProperty = valueSetDisplayProperty(values, selectionDefinition?.displayProperty);
                     if (widget.selection.type === SelectionDefinitionTypeEnum.PROPERTY &&
                         !widget.selection.mapping.length) {
-                        let keyProperty = selectionDefinition?.keyProperty ?? valueSetData?.keyProperty ?? 'objectUri';
-                        if (!this.checkProperty(values, keyProperty)) {
-                            keyProperty = 'uri'; // GenericValue.uri
-                            if (!this.checkProperty(values, keyProperty)) {
-                                keyProperty = 'objectUri'; // Value.objectUri
-                            }
-                        }
+                        let keyProperty = valueSetKeyProperty(values, selectionDefinition?.keyProperty ?? valueSetData?.keyProperty);
                         widget.valueList = values.map((value) => {
                             return {
                                 key: value[keyProperty],
@@ -6805,13 +6832,6 @@ class SmartFormService {
             }
         }
     }
-    checkProperty(values, property) {
-        if (!values?.length) {
-            // no sample data, assume existance
-            return true;
-        }
-        return property in values[0];
-    }
     toFormGroup() {
         this.createFormControls(this.smartForm.widgets);
         if (this.formGroup) {
@@ -6835,6 +6855,7 @@ class SmartFormService {
                 widget.type !== SmartFormWidgetType.IMAGE &&
                 widget.type !== SmartFormWidgetType.SVG &&
                 widget.type !== SmartFormWidgetType.DIV &&
+                widget.type !== SmartFormWidgetType.HTML &&
                 widget.type !== SmartFormWidgetType.DIVIDER &&
                 widget.type !== SmartFormWidgetType.BUTTON &&
                 widget.type !== SmartFormWidgetType.CHECK_BOX_2 &&
@@ -6941,6 +6962,7 @@ class SmartFormService {
                 widget.type !== SmartFormWidgetType.IMAGE &&
                 widget.type !== SmartFormWidgetType.SVG &&
                 widget.type !== SmartFormWidgetType.DIV &&
+                widget.type !== SmartFormWidgetType.HTML &&
                 widget.type !== SmartFormWidgetType.BUTTON &&
                 widget.type !== SmartFormWidgetType.DIVIDER &&
                 widget.type !== SmartFormWidgetType.CHECK_BOX_2 &&
@@ -7015,6 +7037,7 @@ class SmartFormService {
                         widget.type !== SmartFormWidgetType.IMAGE &&
                         widget.type !== SmartFormWidgetType.SVG &&
                         widget.type !== SmartFormWidgetType.DIV &&
+                        widget.type !== SmartFormWidgetType.HTML &&
                         widget.type !== SmartFormWidgetType.DIVIDER &&
                         widget.type !== SmartFormWidgetType.BUTTON &&
                         widget.type !== SmartFormWidgetType.COMPONENT &&
@@ -7199,6 +7222,81 @@ function coerceToTypeOf(reference, value) {
  * Public API Surface of component-factory-service
  */
 
+/**
+ * The execution context of a subtree: a nearer source for the toolbars inside it than the
+ * screen component they would otherwise pull from.
+ *
+ * It exists for the one case a template cannot express. A toolbar gets its entries from an
+ * explicit `[uiActionModels]` binding, or — having an `id` — by pulling the list of the client
+ * above it (ADR-0006, decision 1). A layout the backend defined for a single grid row has
+ * neither: its toolbars carry the ids the backend chose, and no template in this library can
+ * bind a list on them, because a general layout knows nothing about grid rows. The component
+ * that owns such a subtree provides this class instead and writes the row's actions into it.
+ *
+ * What it leaves `undefined` falls back to the chain that was there before, which is what
+ * makes providing it unconditionally safe: `undefined` is "I have no list of my own", not an
+ * empty list, so a toolbar under a host nobody filled keeps pulling from the client exactly as
+ * it did.
+ *
+ * Only `actionModels` ships today. The class is named for the whole execution context — the
+ * `executor`, `widgetId`, `nodeId` and `actionParams` of ADR-0006 decision 2 belong here too —
+ * so that ending the per-entry `serviceToUse` leak in 7.1 is an addition rather than a rename.
+ */
+class SmartActionHost {
+    constructor() {
+        /** The entries the toolbars of this subtree render, or `undefined` for "not my business". */
+        this.actionModels = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionModels" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartActionHost, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartActionHost }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartActionHost, decorators: [{
+            type: Injectable
+        }] });
+
+/**
+ * The one way an offered action gets executed, shared by everything that offers one: the
+ * toolbar and the action trigger of server-sent HTML. Call from an injection context.
+ */
+function injectUiActionExecution() {
+    const service = inject(UiActionService);
+    const descriptors = inject(UiActionDescriptorService);
+    const actionHost = inject(SmartActionHost, { optional: true });
+    const smartComponent = injectSmartComponent();
+    const running = new Set();
+    return {
+        entries: () => actionHost?.actionModels() ?? smartComponent?.actionModels(),
+        fire: async (entry, overrides) => {
+            const uiAction = entry.uiAction;
+            const key = `${uiAction.code}#${uiAction.identifier ?? ''}`;
+            if (uiAction.disabled || running.has(key)) {
+                return;
+            }
+            running.add(key);
+            try {
+                const params = overrides?.actionParams;
+                // Merging the params here rather than when the entry is built keeps `UiActionService`
+                // untouched, so the ordering against its empty-params branch is unchanged.
+                await service.execute({
+                    ...entry,
+                    descriptor: overrides?.descriptor ?? descriptors.getActionDescriptor(uiAction),
+                    serviceToUse: overrides?.executor ?? smartComponent ?? entry.serviceToUse,
+                    uiAction: params
+                        ? { ...uiAction, params: { ...uiAction.params, ...params } }
+                        : uiAction,
+                }, {
+                    nodeId: entry.nodeId ?? overrides?.nodeId,
+                    widgetId: entry.widgetId ?? overrides?.widgetId,
+                });
+            }
+            finally {
+                running.delete(key);
+            }
+        },
+    };
+}
+
 /**
  * Custom HttpParameterCodec
  * Workaround for https://github.com/angular/angular/issues/18261
@@ -8213,39 +8311,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 args: ['document:click', ['$event']]
             }] } });
 
-/**
- * The execution context of a subtree: a nearer source for the toolbars inside it than the
- * screen component they would otherwise pull from.
- *
- * It exists for the one case a template cannot express. A toolbar gets its entries from an
- * explicit `[uiActionModels]` binding, or — having an `id` — by pulling the list of the client
- * above it (ADR-0006, decision 1). A layout the backend defined for a single grid row has
- * neither: its toolbars carry the ids the backend chose, and no template in this library can
- * bind a list on them, because a general layout knows nothing about grid rows. The component
- * that owns such a subtree provides this class instead and writes the row's actions into it.
- *
- * What it leaves `undefined` falls back to the chain that was there before, which is what
- * makes providing it unconditionally safe: `undefined` is "I have no list of my own", not an
- * empty list, so a toolbar under a host nobody filled keeps pulling from the client exactly as
- * it did.
- *
- * Only `actionModels` ships today. The class is named for the whole execution context — the
- * `executor`, `widgetId`, `nodeId` and `actionParams` of ADR-0006 decision 2 belong here too —
- * so that ending the per-entry `serviceToUse` leak in 7.1 is an addition rather than a rename.
- */
-class SmartActionHost {
-    constructor() {
-        /** The entries the toolbars of this subtree render, or `undefined` for "not my business". */
-        this.actionModels = signal(undefined, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "actionModels" }] : /* istanbul ignore next */ []));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartActionHost, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartActionHost }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartActionHost, decorators: [{
-            type: Injectable
-        }] });
-
 class UiActionToolbarComponent {
     /** The list a template hands this toolbar explicitly; that binding is then the source. */
     set uiActionModels(models) {
@@ -8269,12 +8334,11 @@ class UiActionToolbarComponent {
         return this.isScrollableState();
     }
     constructor() {
-        this.service = inject(UiActionService);
+        this.execution = injectUiActionExecution();
         this.inject = inject(Injector);
         this.menuService = inject(UiMenuService);
         this.changeDetector = inject(ChangeDetectorRef);
         this._destroy$ = new Subject();
-        this.pressedButtonActive = true;
         /**
          * `null` while no template binds the list — that is what lets the toolbar pull instead.
          * A template that binds the input owns the list even when the value is `undefined`.
@@ -8473,56 +8537,35 @@ class UiActionToolbarComponent {
             this.schedules.set(uiAction.code, sub);
         });
     }
+    /**
+     * Fires the entry with this toolbar's execution context: its inputs and the descriptor it
+     * resolved. The descriptor travels here rather than in the entry (which is frozen); its one
+     * reader outside this component is `UiActionService`'s snackbar feedback.
+     */
     async fireAction(entry) {
-        if (entry.model.uiAction.disabled) {
-            return;
-        }
-        let options = {
-            nodeId: entry.model.nodeId ?? this.nodeId(),
-            widgetId: entry.model.widgetId ?? this.widgetId(),
-        };
-        await this.service.execute(this.forExecution(entry), options);
+        await this.execution.fire(entry.model, {
+            executor: this.executor(),
+            widgetId: this.widgetId(),
+            nodeId: this.nodeId(),
+            actionParams: this.actionParams(),
+            descriptor: entry.descriptor,
+        });
     }
     /** The same entry, offering a different action — a sub-action, or a scheduled firing. */
     withAction(entry, uiAction) {
         return { ...entry, model: { ...entry.model, uiAction } };
     }
-    /**
-     * The entry as it is executed: this toolbar's executor, the descriptor it resolved and its
-     * extra params applied on top of what the entry describes. The entry's own `serviceToUse`
-     * is the last resort — it is the deprecated way of saying the same thing.
-     *
-     * The descriptor travels here rather than in the entry (which is frozen); its one reader
-     * outside this component is `UiActionService`'s snackbar feedback.
-     *
-     * Merging the params here rather than when the entry is built keeps `UiActionService`
-     * untouched, so the ordering against its empty-params branch is unchanged.
-     */
-    forExecution(entry) {
-        const params = this.actionParams();
-        const uiAction = entry.model.uiAction;
-        return {
-            ...entry.model,
-            descriptor: entry.descriptor,
-            serviceToUse: this.executor() ?? this.smartComponent ?? entry.model.serviceToUse,
-            uiAction: params ? { ...uiAction, params: { ...uiAction.params, ...params } } : uiAction,
-        };
-    }
     async onActionClicked(event, entry) {
         // event.stopPropagation();
         this.menuService.closeAllMenus();
         if (entry.model.uiAction.disabled) {
             return;
         }
-        if (this.pressedButtonActive) {
-            this.pressedButtonActive = false;
-            // ui-tiered-menu emits a full UiAction (no 'event' property),
-            // ui-action-button emits { event: MouseEvent, code, descriptor }.
-            // Use the emitted UiAction only for tiered-menu sub-actions.
-            const subAction = !event.event && event.code ? event : undefined;
-            await this.fireAction(subAction ? this.withAction(entry, subAction) : entry);
-            this.pressedButtonActive = true;
-        }
+        // ui-tiered-menu emits a full UiAction (no 'event' property),
+        // ui-action-button emits { event: MouseEvent, code, descriptor }.
+        // Use the emitted UiAction only for tiered-menu sub-actions.
+        const subAction = !event.event && event.code ? event : undefined;
+        await this.fireAction(subAction ? this.withAction(entry, subAction) : entry);
     }
     onActionDoubleClicked(event, entry) {
         // event.stopPropagation();
@@ -8597,11 +8640,11 @@ class UiActionToolbarComponent {
         return MenuTriggerType;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionToolbarComponent, isStandalone: true, selector: "smart-ui-action-toolbar", inputs: { uiActionModels: { classPropertyName: "uiActionModels", publicName: "uiActionModels", isSignal: false, isRequired: false, transformFunction: null }, uiActionDescriptorService: { classPropertyName: "uiActionDescriptorService", publicName: "uiActionDescriptorService", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, executor: { classPropertyName: "executor", publicName: "executor", isSignal: true, isRequired: false, transformFunction: null }, widgetId: { classPropertyName: "widgetId", publicName: "widgetId", isSignal: true, isRequired: false, transformFunction: null }, nodeId: { classPropertyName: "nodeId", publicName: "nodeId", isSignal: true, isRequired: false, transformFunction: null }, actionParams: { classPropertyName: "actionParams", publicName: "actionParams", isSignal: true, isRequired: false, transformFunction: null }, scrollOnWrap: { classPropertyName: "scrollOnWrap", publicName: "scrollOnWrap", isSignal: false, isRequired: false, transformFunction: null }, toolbarPropertes: { classPropertyName: "toolbarPropertes", publicName: "toolbarPropertes", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "@if (isScrollable && scrollOnWrap) {\n  <ui-action-button\n    [disabled]=\"!isScrollable\"\n    [descriptor]=\"buttonLeft\"\n    (actionClick)=\"scrollLeft()\"\n    (mousedown)=\"scrollStart('left')\"\n    (mouseup)=\"stopScroll()\"\n    (mouseleave)=\"stopScroll()\"\n    (touchstart)=\"scrollStart('left')\"\n    (touchend)=\"stopScroll()\"\n    />\n}\n\n<div\n  #container\n  class=\"uiActionButtonsContainer\"\n  (click)=\"$event.stopPropagation()\"\n  [ngClass]=\"{\n    scrollableContent: scrollOnWrap,\n    verticalToolbar: isVertical,\n    horizontalToolbar: isHorizontal,\n    alignedStart: isAlignedStart,\n    alignedEnd: isAlignedEnd,\n  }\"\n  >\n  <!--\n    Tracked by a synthesized key \u2014 the action code plus its ordinal among the entries with\n    the same code \u2014 because a code is not unique inside a toolbar. Unique by construction,\n    and a button's DOM node follows its action across reordering and insertion. See A14.\n  -->\n  @for (entry of entries(); track entry.key) {\n    @if (entry.model.uiAction.code === 'themeSelector') {\n      <theme-selector [model]=\"entry.model\"></theme-selector>\n    } @else if (entry.model.uiAction.subActions && entry.model.uiAction.subActions.length > 0) {\n      <ng-container *ngTemplateOutlet=\"menuTypes; context: { entry: entry }\"></ng-container>\n    } @else {\n      <ui-action-button\n        (mouseenter)=\"onHover()\"\n        [descriptor]=\"entry.descriptor!\"\n        [code]=\"entry.model.uiAction.code\"\n        [identifier]=\"entry.model.uiAction.identifier\"\n        [disabled]=\"!!entry.model.uiAction.disabled\"\n        [addedCssClass]=\"entry.model.cssClass\"\n        [viewActivated]=\"entry.model.uiAction.viewActivated\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n        (actionDoubleClick)=\"onActionDoubleClicked($event, entry)\"\n        >\n      </ui-action-button>\n    }\n  }\n</div>\n\n@if (isScrollable && scrollOnWrap) {\n  <ui-action-button\n    [disabled]=\"!isScrollable\"\n    [descriptor]=\"buttonRight\"\n    (actionClick)=\"scrollRight()\"\n    (mousedown)=\"scrollStart('right')\"\n    (mouseup)=\"stopScroll()\"\n    (mouseleave)=\"stopScroll()\"\n    (touchstart)=\"scrollStart('right')\"\n    (touchend)=\"stopScroll()\"\n    />\n}\n\n<ng-template #menuTypes let-entry=\"entry\">\n  @switch ($safeNavigationMigration(entry?.model?.uiAction?.descriptor?.menu?.triggerType)) {\n    @case (triggerType.HOVER) {\n      <ui-hover-menu\n        #menu\n        [toolbarId]=\"id\"\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-hover-menu>\n    }\n    @case (triggerType.CLICK) {\n      <ui-tiered-menu\n        #menu\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-tiered-menu>\n    }\n    @default {\n      <ui-tiered-menu\n        #menu\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-tiered-menu>\n    }\n  }\n</ng-template>\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}:host:has(.verticalToolbar){height:100%}:host:has(.horizontalToolbar.alignedEnd){width:100%}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column;height:100%}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%}.alignedStart{justify-content:flex-start}.alignedEnd{justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThemeSelectorComponent, selector: "theme-selector", inputs: ["model"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection", "toolbarId"], outputs: ["actionClick", "submenuOpened"] }, { kind: "component", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection"], outputs: ["actionClick", "submenuOpened"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionToolbarComponent, isStandalone: true, selector: "smart-ui-action-toolbar", inputs: { uiActionModels: { classPropertyName: "uiActionModels", publicName: "uiActionModels", isSignal: false, isRequired: false, transformFunction: null }, uiActionDescriptorService: { classPropertyName: "uiActionDescriptorService", publicName: "uiActionDescriptorService", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, executor: { classPropertyName: "executor", publicName: "executor", isSignal: true, isRequired: false, transformFunction: null }, widgetId: { classPropertyName: "widgetId", publicName: "widgetId", isSignal: true, isRequired: false, transformFunction: null }, nodeId: { classPropertyName: "nodeId", publicName: "nodeId", isSignal: true, isRequired: false, transformFunction: null }, actionParams: { classPropertyName: "actionParams", publicName: "actionParams", isSignal: true, isRequired: false, transformFunction: null }, scrollOnWrap: { classPropertyName: "scrollOnWrap", publicName: "scrollOnWrap", isSignal: false, isRequired: false, transformFunction: null }, toolbarPropertes: { classPropertyName: "toolbarPropertes", publicName: "toolbarPropertes", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "@if (isScrollable && scrollOnWrap) {\n  <ui-action-button\n    [disabled]=\"!isScrollable\"\n    [descriptor]=\"buttonLeft\"\n    (actionClick)=\"scrollLeft()\"\n    (mousedown)=\"scrollStart('left')\"\n    (mouseup)=\"stopScroll()\"\n    (mouseleave)=\"stopScroll()\"\n    (touchstart)=\"scrollStart('left')\"\n    (touchend)=\"stopScroll()\"\n    />\n}\n\n<div\n  #container\n  class=\"uiActionButtonsContainer\"\n  (click)=\"$event.stopPropagation()\"\n  (dblclick)=\"$event.stopPropagation()\"\n  [ngClass]=\"{\n    scrollableContent: scrollOnWrap,\n    verticalToolbar: isVertical,\n    horizontalToolbar: isHorizontal,\n    alignedStart: isAlignedStart,\n    alignedEnd: isAlignedEnd,\n  }\"\n  >\n  <!--\n    Tracked by a synthesized key \u2014 the action code plus its ordinal among the entries with\n    the same code \u2014 because a code is not unique inside a toolbar. Unique by construction,\n    and a button's DOM node follows its action across reordering and insertion. See A14.\n  -->\n  @for (entry of entries(); track entry.key) {\n    @if (entry.model.uiAction.code === 'themeSelector') {\n      <theme-selector [model]=\"entry.model\"></theme-selector>\n    } @else if (entry.model.uiAction.subActions && entry.model.uiAction.subActions.length > 0) {\n      <ng-container *ngTemplateOutlet=\"menuTypes; context: { entry: entry }\"></ng-container>\n    } @else {\n      <ui-action-button\n        (mouseenter)=\"onHover()\"\n        [descriptor]=\"entry.descriptor!\"\n        [code]=\"entry.model.uiAction.code\"\n        [identifier]=\"entry.model.uiAction.identifier\"\n        [disabled]=\"!!entry.model.uiAction.disabled\"\n        [addedCssClass]=\"entry.model.cssClass\"\n        [viewActivated]=\"entry.model.uiAction.viewActivated\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n        (actionDoubleClick)=\"onActionDoubleClicked($event, entry)\"\n        >\n      </ui-action-button>\n    }\n  }\n</div>\n\n@if (isScrollable && scrollOnWrap) {\n  <ui-action-button\n    [disabled]=\"!isScrollable\"\n    [descriptor]=\"buttonRight\"\n    (actionClick)=\"scrollRight()\"\n    (mousedown)=\"scrollStart('right')\"\n    (mouseup)=\"stopScroll()\"\n    (mouseleave)=\"stopScroll()\"\n    (touchstart)=\"scrollStart('right')\"\n    (touchend)=\"stopScroll()\"\n    />\n}\n\n<ng-template #menuTypes let-entry=\"entry\">\n  @switch ($safeNavigationMigration(entry?.model?.uiAction?.descriptor?.menu?.triggerType)) {\n    @case (triggerType.HOVER) {\n      <ui-hover-menu\n        #menu\n        [toolbarId]=\"id\"\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-hover-menu>\n    }\n    @case (triggerType.CLICK) {\n      <ui-tiered-menu\n        #menu\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-tiered-menu>\n    }\n    @default {\n      <ui-tiered-menu\n        #menu\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-tiered-menu>\n    }\n  }\n</ng-template>\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}:host:has(.verticalToolbar){height:100%}:host:has(.horizontalToolbar.alignedEnd){width:100%}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column;height:100%}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%}.alignedStart{justify-content:flex-start}.alignedEnd{justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThemeSelectorComponent, selector: "theme-selector", inputs: ["model"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection", "toolbarId"], outputs: ["actionClick", "submenuOpened"] }, { kind: "component", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection"], outputs: ["actionClick", "submenuOpened"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-ui-action-toolbar', imports: [UiActionButtonComponent, NgClass, ThemeSelectorComponent, NgTemplateOutlet, HoverMenuComponent, ClickMenuComponent], template: "@if (isScrollable && scrollOnWrap) {\n  <ui-action-button\n    [disabled]=\"!isScrollable\"\n    [descriptor]=\"buttonLeft\"\n    (actionClick)=\"scrollLeft()\"\n    (mousedown)=\"scrollStart('left')\"\n    (mouseup)=\"stopScroll()\"\n    (mouseleave)=\"stopScroll()\"\n    (touchstart)=\"scrollStart('left')\"\n    (touchend)=\"stopScroll()\"\n    />\n}\n\n<div\n  #container\n  class=\"uiActionButtonsContainer\"\n  (click)=\"$event.stopPropagation()\"\n  [ngClass]=\"{\n    scrollableContent: scrollOnWrap,\n    verticalToolbar: isVertical,\n    horizontalToolbar: isHorizontal,\n    alignedStart: isAlignedStart,\n    alignedEnd: isAlignedEnd,\n  }\"\n  >\n  <!--\n    Tracked by a synthesized key \u2014 the action code plus its ordinal among the entries with\n    the same code \u2014 because a code is not unique inside a toolbar. Unique by construction,\n    and a button's DOM node follows its action across reordering and insertion. See A14.\n  -->\n  @for (entry of entries(); track entry.key) {\n    @if (entry.model.uiAction.code === 'themeSelector') {\n      <theme-selector [model]=\"entry.model\"></theme-selector>\n    } @else if (entry.model.uiAction.subActions && entry.model.uiAction.subActions.length > 0) {\n      <ng-container *ngTemplateOutlet=\"menuTypes; context: { entry: entry }\"></ng-container>\n    } @else {\n      <ui-action-button\n        (mouseenter)=\"onHover()\"\n        [descriptor]=\"entry.descriptor!\"\n        [code]=\"entry.model.uiAction.code\"\n        [identifier]=\"entry.model.uiAction.identifier\"\n        [disabled]=\"!!entry.model.uiAction.disabled\"\n        [addedCssClass]=\"entry.model.cssClass\"\n        [viewActivated]=\"entry.model.uiAction.viewActivated\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n        (actionDoubleClick)=\"onActionDoubleClicked($event, entry)\"\n        >\n      </ui-action-button>\n    }\n  }\n</div>\n\n@if (isScrollable && scrollOnWrap) {\n  <ui-action-button\n    [disabled]=\"!isScrollable\"\n    [descriptor]=\"buttonRight\"\n    (actionClick)=\"scrollRight()\"\n    (mousedown)=\"scrollStart('right')\"\n    (mouseup)=\"stopScroll()\"\n    (mouseleave)=\"stopScroll()\"\n    (touchstart)=\"scrollStart('right')\"\n    (touchend)=\"stopScroll()\"\n    />\n}\n\n<ng-template #menuTypes let-entry=\"entry\">\n  @switch ($safeNavigationMigration(entry?.model?.uiAction?.descriptor?.menu?.triggerType)) {\n    @case (triggerType.HOVER) {\n      <ui-hover-menu\n        #menu\n        [toolbarId]=\"id\"\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-hover-menu>\n    }\n    @case (triggerType.CLICK) {\n      <ui-tiered-menu\n        #menu\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-tiered-menu>\n    }\n    @default {\n      <ui-tiered-menu\n        #menu\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-tiered-menu>\n    }\n  }\n</ng-template>\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}:host:has(.verticalToolbar){height:100%}:host:has(.horizontalToolbar.alignedEnd){width:100%}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column;height:100%}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%}.alignedStart{justify-content:flex-start}.alignedEnd{justify-content:flex-end}\n"] }]
+            args: [{ selector: 'smart-ui-action-toolbar', imports: [UiActionButtonComponent, NgClass, ThemeSelectorComponent, NgTemplateOutlet, HoverMenuComponent, ClickMenuComponent], template: "@if (isScrollable && scrollOnWrap) {\n  <ui-action-button\n    [disabled]=\"!isScrollable\"\n    [descriptor]=\"buttonLeft\"\n    (actionClick)=\"scrollLeft()\"\n    (mousedown)=\"scrollStart('left')\"\n    (mouseup)=\"stopScroll()\"\n    (mouseleave)=\"stopScroll()\"\n    (touchstart)=\"scrollStart('left')\"\n    (touchend)=\"stopScroll()\"\n    />\n}\n\n<div\n  #container\n  class=\"uiActionButtonsContainer\"\n  (click)=\"$event.stopPropagation()\"\n  (dblclick)=\"$event.stopPropagation()\"\n  [ngClass]=\"{\n    scrollableContent: scrollOnWrap,\n    verticalToolbar: isVertical,\n    horizontalToolbar: isHorizontal,\n    alignedStart: isAlignedStart,\n    alignedEnd: isAlignedEnd,\n  }\"\n  >\n  <!--\n    Tracked by a synthesized key \u2014 the action code plus its ordinal among the entries with\n    the same code \u2014 because a code is not unique inside a toolbar. Unique by construction,\n    and a button's DOM node follows its action across reordering and insertion. See A14.\n  -->\n  @for (entry of entries(); track entry.key) {\n    @if (entry.model.uiAction.code === 'themeSelector') {\n      <theme-selector [model]=\"entry.model\"></theme-selector>\n    } @else if (entry.model.uiAction.subActions && entry.model.uiAction.subActions.length > 0) {\n      <ng-container *ngTemplateOutlet=\"menuTypes; context: { entry: entry }\"></ng-container>\n    } @else {\n      <ui-action-button\n        (mouseenter)=\"onHover()\"\n        [descriptor]=\"entry.descriptor!\"\n        [code]=\"entry.model.uiAction.code\"\n        [identifier]=\"entry.model.uiAction.identifier\"\n        [disabled]=\"!!entry.model.uiAction.disabled\"\n        [addedCssClass]=\"entry.model.cssClass\"\n        [viewActivated]=\"entry.model.uiAction.viewActivated\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n        (actionDoubleClick)=\"onActionDoubleClicked($event, entry)\"\n        >\n      </ui-action-button>\n    }\n  }\n</div>\n\n@if (isScrollable && scrollOnWrap) {\n  <ui-action-button\n    [disabled]=\"!isScrollable\"\n    [descriptor]=\"buttonRight\"\n    (actionClick)=\"scrollRight()\"\n    (mousedown)=\"scrollStart('right')\"\n    (mouseup)=\"stopScroll()\"\n    (mouseleave)=\"stopScroll()\"\n    (touchstart)=\"scrollStart('right')\"\n    (touchend)=\"stopScroll()\"\n    />\n}\n\n<ng-template #menuTypes let-entry=\"entry\">\n  @switch ($safeNavigationMigration(entry?.model?.uiAction?.descriptor?.menu?.triggerType)) {\n    @case (triggerType.HOVER) {\n      <ui-hover-menu\n        #menu\n        [toolbarId]=\"id\"\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-hover-menu>\n    }\n    @case (triggerType.CLICK) {\n      <ui-tiered-menu\n        #menu\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-tiered-menu>\n    }\n    @default {\n      <ui-tiered-menu\n        #menu\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-tiered-menu>\n    }\n  }\n</ng-template>\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}:host:has(.verticalToolbar){height:100%}:host:has(.horizontalToolbar.alignedEnd){width:100%}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column;height:100%}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%}.alignedStart{justify-content:flex-start}.alignedEnd{justify-content:flex-end}\n"] }]
         }], ctorParameters: () => [], propDecorators: { containerRef: [{
                 type: ViewChild,
                 args: ['container', { static: false }]
@@ -8772,7 +8815,10 @@ class SmartfileuploaderComponent {
     remove(index) {
         this.files.splice(index, 1);
     }
-    uploadFile() {
+    uploadFile(event) {
+        // The button sits inside a clickable host (a grid card, a row): the click must not
+        // reach it as well.
+        event?.event.stopPropagation();
         this.uploadCallback()(this.files);
     }
     formatSize(bytes) {
@@ -8832,11 +8878,11 @@ class SmartfileuploaderComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartfileuploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartfileuploaderComponent, isStandalone: true, selector: "smartfileuploader", inputs: { uploadCallback: { classPropertyName: "uploadCallback", publicName: "uploadCallback", isSignal: true, isRequired: true, transformFunction: null }, fileFormats: { classPropertyName: "fileFormats", publicName: "fileFormats", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: false, isRequired: false, transformFunction: null }, useIconButton: { classPropertyName: "useIconButton", publicName: "useIconButton", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled() }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n  >\n  <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n    <input\n      #fileInput\n      id=\"addFile\"\n      placeholder=\"fileInput\"\n      type=\"file\"\n      (change)=\"getFile($event)\"\n      class=\"file\"\n      accept=\"{{ fileFormats()?.join(', ') }}\"\n      [size]=\"maxSizeMb()\"\n      [multiple]=\"isMultiple()\"\n      [disabled]=\"isDisabled()\"\n      style=\"display: none\"\n      />\n    <div class=\"fileUploadContentContainer\">\n      <div class=\"icon\">\n        @if (useIconButton()) {\n          <mat-label class=\"addFileButton\">\n            <mat-icon color=\"primary\" class=\"addCircle\">add_circle</mat-icon>\n          </mat-label>\n        }\n        @if (!useIconButton()) {\n          <button mat-raised-button color=\"primary\" class=\"addFileButton\">\n            {{ i18n!.addFile }}\n          </button>\n        }\n      </div>\n      <div class=\"labels\">\n        @if (useIconButton()) {\n          <mat-label class=\"label primary title\">\n            {{ i18n!.addFile }}\n          </mat-label>\n        }\n        <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n      </div>\n      @if (files.length) {\n        <div class=\"uploadButton\">\n          <ui-action-button\n            (actionClick)=\"uploadFile()\"\n            [code]=\"'default-upload'\"\n            [descriptor]=\"uploadButton\"\n          >\n          </ui-action-button>\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (errors.length) {\n    <div class=\"errorMessage\">\n      <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n      <div class=\"errors\">\n        @for (error of errors; track error) {\n          <span>{{ error }}</span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (files.length) {\n    <div class=\"uploadedFilesContainer\">\n      @for (file of files; track file; let i = $index) {\n        <div class=\"uploadedFile\">\n          @if (filePreviewUrl(file)) {\n            <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n          } @else {\n            <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n          }\n          <div class=\"fileData\">\n            <div class=\"fileDataContainer\">\n              <span class=\"fileName\">{{ file.name }}</span>\n              <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n            </div>\n          </div>\n          <div class=\"fileActions\">\n            <smart-icon\n              class=\"downloadIcon\"\n              icon=\"download\"\n              (click)=\"downloadFile(file)\"\n              [attr.data-testid]=\"'default_download'\"\n            ></smart-icon>\n            <smart-icon\n              class=\"removeIcon\"\n              icon=\"delete\"\n              [attr.data-testid]=\"'default_remove'\"\n              (click)=\"remove(i)\"\n            ></smart-icon>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warninig-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warninig-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.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}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartfileuploaderComponent, isStandalone: true, selector: "smartfileuploader", inputs: { uploadCallback: { classPropertyName: "uploadCallback", publicName: "uploadCallback", isSignal: true, isRequired: true, transformFunction: null }, fileFormats: { classPropertyName: "fileFormats", publicName: "fileFormats", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: false, isRequired: false, transformFunction: null }, useIconButton: { classPropertyName: "useIconButton", publicName: "useIconButton", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled() }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n  >\n  <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n    <input\n      #fileInput\n      id=\"addFile\"\n      placeholder=\"fileInput\"\n      type=\"file\"\n      (change)=\"getFile($event)\"\n      class=\"file\"\n      accept=\"{{ fileFormats()?.join(', ') }}\"\n      [size]=\"maxSizeMb()\"\n      [multiple]=\"isMultiple()\"\n      [disabled]=\"isDisabled()\"\n      style=\"display: none\"\n      />\n    <div class=\"fileUploadContentContainer\">\n      <div class=\"icon\">\n        @if (useIconButton()) {\n          <mat-label class=\"addFileButton\">\n            <mat-icon color=\"primary\" class=\"addCircle\">add_circle</mat-icon>\n          </mat-label>\n        }\n        @if (!useIconButton()) {\n          <button mat-raised-button color=\"primary\" class=\"addFileButton\">\n            {{ i18n!.addFile }}\n          </button>\n        }\n      </div>\n      <div class=\"labels\">\n        @if (useIconButton()) {\n          <mat-label class=\"label primary title\">\n            {{ i18n!.addFile }}\n          </mat-label>\n        }\n        <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n      </div>\n      @if (files.length) {\n        <div class=\"uploadButton\">\n          <ui-action-button\n            (actionClick)=\"uploadFile($event)\"\n            [code]=\"'default-upload'\"\n            [descriptor]=\"uploadButton\"\n          >\n          </ui-action-button>\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (errors.length) {\n    <div class=\"errorMessage\">\n      <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n      <div class=\"errors\">\n        @for (error of errors; track error) {\n          <span>{{ error }}</span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (files.length) {\n    <div class=\"uploadedFilesContainer\">\n      @for (file of files; track file; let i = $index) {\n        <div class=\"uploadedFile\">\n          @if (filePreviewUrl(file)) {\n            <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n          } @else {\n            <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n          }\n          <div class=\"fileData\">\n            <div class=\"fileDataContainer\">\n              <span class=\"fileName\">{{ file.name }}</span>\n              <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n            </div>\n          </div>\n          <div class=\"fileActions\">\n            <smart-icon\n              class=\"downloadIcon\"\n              icon=\"download\"\n              (click)=\"downloadFile(file)\"\n              [attr.data-testid]=\"'default_download'\"\n            ></smart-icon>\n            <smart-icon\n              class=\"removeIcon\"\n              icon=\"delete\"\n              [attr.data-testid]=\"'default_remove'\"\n              (click)=\"remove(i)\"\n            ></smart-icon>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warninig-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warninig-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.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}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartfileuploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smartfileuploader', imports: [NgClass, MatLabel, MatIcon, MatButton, UiActionButtonComponent, SmartIconComponent], template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled() }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n  >\n  <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n    <input\n      #fileInput\n      id=\"addFile\"\n      placeholder=\"fileInput\"\n      type=\"file\"\n      (change)=\"getFile($event)\"\n      class=\"file\"\n      accept=\"{{ fileFormats()?.join(', ') }}\"\n      [size]=\"maxSizeMb()\"\n      [multiple]=\"isMultiple()\"\n      [disabled]=\"isDisabled()\"\n      style=\"display: none\"\n      />\n    <div class=\"fileUploadContentContainer\">\n      <div class=\"icon\">\n        @if (useIconButton()) {\n          <mat-label class=\"addFileButton\">\n            <mat-icon color=\"primary\" class=\"addCircle\">add_circle</mat-icon>\n          </mat-label>\n        }\n        @if (!useIconButton()) {\n          <button mat-raised-button color=\"primary\" class=\"addFileButton\">\n            {{ i18n!.addFile }}\n          </button>\n        }\n      </div>\n      <div class=\"labels\">\n        @if (useIconButton()) {\n          <mat-label class=\"label primary title\">\n            {{ i18n!.addFile }}\n          </mat-label>\n        }\n        <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n      </div>\n      @if (files.length) {\n        <div class=\"uploadButton\">\n          <ui-action-button\n            (actionClick)=\"uploadFile()\"\n            [code]=\"'default-upload'\"\n            [descriptor]=\"uploadButton\"\n          >\n          </ui-action-button>\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (errors.length) {\n    <div class=\"errorMessage\">\n      <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n      <div class=\"errors\">\n        @for (error of errors; track error) {\n          <span>{{ error }}</span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (files.length) {\n    <div class=\"uploadedFilesContainer\">\n      @for (file of files; track file; let i = $index) {\n        <div class=\"uploadedFile\">\n          @if (filePreviewUrl(file)) {\n            <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n          } @else {\n            <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n          }\n          <div class=\"fileData\">\n            <div class=\"fileDataContainer\">\n              <span class=\"fileName\">{{ file.name }}</span>\n              <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n            </div>\n          </div>\n          <div class=\"fileActions\">\n            <smart-icon\n              class=\"downloadIcon\"\n              icon=\"download\"\n              (click)=\"downloadFile(file)\"\n              [attr.data-testid]=\"'default_download'\"\n            ></smart-icon>\n            <smart-icon\n              class=\"removeIcon\"\n              icon=\"delete\"\n              [attr.data-testid]=\"'default_remove'\"\n              (click)=\"remove(i)\"\n            ></smart-icon>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warninig-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warninig-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.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}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'smartfileuploader', imports: [NgClass, MatLabel, MatIcon, MatButton, UiActionButtonComponent, SmartIconComponent], template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled() }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n  >\n  <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n    <input\n      #fileInput\n      id=\"addFile\"\n      placeholder=\"fileInput\"\n      type=\"file\"\n      (change)=\"getFile($event)\"\n      class=\"file\"\n      accept=\"{{ fileFormats()?.join(', ') }}\"\n      [size]=\"maxSizeMb()\"\n      [multiple]=\"isMultiple()\"\n      [disabled]=\"isDisabled()\"\n      style=\"display: none\"\n      />\n    <div class=\"fileUploadContentContainer\">\n      <div class=\"icon\">\n        @if (useIconButton()) {\n          <mat-label class=\"addFileButton\">\n            <mat-icon color=\"primary\" class=\"addCircle\">add_circle</mat-icon>\n          </mat-label>\n        }\n        @if (!useIconButton()) {\n          <button mat-raised-button color=\"primary\" class=\"addFileButton\">\n            {{ i18n!.addFile }}\n          </button>\n        }\n      </div>\n      <div class=\"labels\">\n        @if (useIconButton()) {\n          <mat-label class=\"label primary title\">\n            {{ i18n!.addFile }}\n          </mat-label>\n        }\n        <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n      </div>\n      @if (files.length) {\n        <div class=\"uploadButton\">\n          <ui-action-button\n            (actionClick)=\"uploadFile($event)\"\n            [code]=\"'default-upload'\"\n            [descriptor]=\"uploadButton\"\n          >\n          </ui-action-button>\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (errors.length) {\n    <div class=\"errorMessage\">\n      <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n      <div class=\"errors\">\n        @for (error of errors; track error) {\n          <span>{{ error }}</span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (files.length) {\n    <div class=\"uploadedFilesContainer\">\n      @for (file of files; track file; let i = $index) {\n        <div class=\"uploadedFile\">\n          @if (filePreviewUrl(file)) {\n            <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n          } @else {\n            <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n          }\n          <div class=\"fileData\">\n            <div class=\"fileDataContainer\">\n              <span class=\"fileName\">{{ file.name }}</span>\n              <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n            </div>\n          </div>\n          <div class=\"fileActions\">\n            <smart-icon\n              class=\"downloadIcon\"\n              icon=\"download\"\n              (click)=\"downloadFile(file)\"\n              [attr.data-testid]=\"'default_download'\"\n            ></smart-icon>\n            <smart-icon\n              class=\"removeIcon\"\n              icon=\"delete\"\n              [attr.data-testid]=\"'default_remove'\"\n              (click)=\"remove(i)\"\n            ></smart-icon>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warninig-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warninig-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.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}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"] }]
         }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -9522,6 +9568,743 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }], uploadFilesEvent: [{ type: i0.Output, args: ["uploadFilesEvent"] }] } });
 
+/**
+ * Turns every toolbar slot (`[data-sb4-toolbar]`) under the container into a live toolbar
+ * rendered into the marker element itself. Only the address and the looks are set: the toolbar
+ * pulls its entries and its executor through the element injector, exactly as one written into
+ * the owner's template would. The caller owns the returned refs and must destroy them before
+ * the container's html is rewritten — rewriting alone leaks them.
+ */
+function hydrateToolbars(container, ctx) {
+    const refs = [];
+    container.querySelectorAll('[data-sb4-toolbar]').forEach((marker) => {
+        const id = marker.getAttribute('data-sb4-toolbar');
+        if (!id) {
+            ctx.warn('a toolbar slot with an empty data-sb4-toolbar is skipped');
+            return;
+        }
+        const ref = createComponent(UiActionToolbarComponent, {
+            hostElement: marker,
+            elementInjector: ctx.elementInjector,
+            environmentInjector: ctx.environmentInjector,
+        });
+        ref.setInput('id', id);
+        ref.setInput('toolbarPropertes', toolbarProperties(marker, ctx));
+        // Without a zone nothing else would ever refresh a view that is in no template.
+        ctx.appRef.attachView(ref.hostView);
+        ref.changeDetectorRef.detectChanges();
+        refs.push(ref);
+    });
+    return refs;
+}
+function toolbarProperties(marker, ctx) {
+    return {
+        direction: enumAttribute(marker, 'data-sb4-toolbar-direction', ToolbarDirection, ctx),
+        alignment: enumAttribute(marker, 'data-sb4-toolbar-alignment', ToolbarAlignment, ctx),
+        scrollable: marker.hasAttribute('data-sb4-toolbar-scrollable'),
+    };
+}
+function enumAttribute(marker, name, values, ctx) {
+    const value = marker.getAttribute(name);
+    if (!value) {
+        return undefined;
+    }
+    if (!Object.values(values).includes(value)) {
+        ctx.warn(`${name}="${value}" is not one of ${Object.values(values).join(', ')}, ignored`);
+        return undefined;
+    }
+    return value;
+}
+
+/** Pipes that must have an argument, and pipes that must not; the Java scanner checks the same. */
+const PIPES_REQUIRING_ARGUMENT = ['label'];
+const PIPES_WITHOUT_ARGUMENT = ['upper', 'lower'];
+/**
+ * The closed set of formatting pipes; HTML-WIDGET.md is the reference and the Java
+ * HtmlTemplateScanner.PIPES mirrors the names. An empty value passes through every pipe but
+ * `default` untouched, so a missing field stays a silent empty string.
+ */
+const PIPES = {
+    date: (v, arg, ctx) => formatDate(v, arg ?? 'yyyy.MM.dd', ctx),
+    datetime: (v, arg, ctx) => formatDate(v, arg ?? 'yyyy.MM.dd H:mm', ctx),
+    time: (v, arg, ctx) => formatDate(v, arg ?? 'H:mm', ctx),
+    number: (v, arg, ctx) => formatNumber(v, arg ?? '1.0-3', ctx),
+    label: (v, arg, ctx) => {
+        const valueSet = ctx.valueSets?.[arg];
+        if (isEmpty(v) || !valueSet) {
+            return v;
+        }
+        return valueSetLabelOf(valueSet, v) ?? v;
+    },
+    default: (v, arg) => (isEmpty(v) ? (arg ?? '') : v),
+    upper: (v, _arg, ctx) => (isEmpty(v) ? v : String(v).toLocaleUpperCase(locales(ctx))),
+    lower: (v, _arg, ctx) => (isEmpty(v) ? v : String(v).toLocaleLowerCase(locales(ctx))),
+};
+function isEmpty(v) {
+    return v === undefined || v === null || v === '';
+}
+// The backend may name the locale the Java way (hu_HU), which Intl rejects.
+function locales(ctx) {
+    return ctx.locale?.replace('_', '-');
+}
+const TIME_ONLY = /^\d{2}:\d{2}/;
+function formatDate(v, pattern, ctx) {
+    if (isEmpty(v)) {
+        return v;
+    }
+    // A LocalTime travels without a date, which parseISO does not take.
+    const date = typeof v === 'string' ? parseISO(TIME_ONLY.test(v) ? `1970-01-01T${v}` : v) : undefined;
+    if (!date || !isValid(date)) {
+        ctx.warn(`not an ISO date: ${JSON.stringify(v)}`);
+        return v;
+    }
+    try {
+        return format(date, pattern);
+    }
+    catch (e) {
+        // date-fns throws on the protected tokens (YYYY, DD) and on unknown ones.
+        ctx.warn(`invalid date format '${pattern}': ${e.message}`);
+        return v;
+    }
+}
+// Angular's digitsInfo: {minInteger}.{minFraction}-{maxFraction}
+const DIGITS_INFO = /^(\d+)?\.((\d+)(-(\d+))?)?$/;
+function formatNumber(v, digitsInfo, ctx) {
+    if (isEmpty(v)) {
+        return v;
+    }
+    const n = typeof v === 'number' ? v : typeof v === 'string' && v.trim() !== '' ? +v : NaN;
+    if (isNaN(n)) {
+        ctx.warn(`not a number: ${JSON.stringify(v)}`);
+        return v;
+    }
+    const parts = DIGITS_INFO.exec(digitsInfo);
+    if (!parts) {
+        ctx.warn(`invalid digitsInfo '${digitsInfo}'`);
+        return v;
+    }
+    const minimumFractionDigits = +(parts[3] ?? 0);
+    return new Intl.NumberFormat(locales(ctx), {
+        minimumIntegerDigits: +(parts[1] ?? 1),
+        minimumFractionDigits,
+        maximumFractionDigits: Math.max(+(parts[5] ?? 3), minimumFractionDigits),
+    }).format(n);
+}
+
+const IDENTIFIER = '[A-Za-z_][A-Za-z0-9_]*';
+const PATH = new RegExp(`^((?:\\.\\./)*)(${IDENTIFIER}(?:\\.${IDENTIFIER})*)$`);
+const PIPE_NAME = new RegExp(IDENTIFIER, 'y');
+function resolveTemplate(template, scope, ctx) {
+    let nodes;
+    try {
+        nodes = parse(template);
+    }
+    catch (e) {
+        return { html: template, errors: [e.message] };
+    }
+    const out = [];
+    render(nodes, [scope], ctx, out);
+    return { html: out.join(''), errors: [] };
+}
+/** Walks a dot-path; a missing, null or non-object step anywhere gives undefined. */
+function lookupPath(scope, path) {
+    let current = scope;
+    for (const segment of path.split('.')) {
+        if (current === null || typeof current !== 'object') {
+            return undefined;
+        }
+        current = current[segment];
+    }
+    return current;
+}
+/**
+ * The scope a root gives: the object it names in the data, the data itself without a root.
+ * `undefined` when that is no object — a list, a single value or nothing at all.
+ */
+function rootScope(data, root) {
+    const scope = root ? lookupPath(data, root) : data;
+    return scope !== null && typeof scope === 'object' && !Array.isArray(scope) ? scope : undefined;
+}
+function parse(template) {
+    const root = [];
+    // Open sections; the last one receives the nodes.
+    const open = [];
+    const target = () => (open.length ? open[open.length - 1].children : root);
+    let pos = 0;
+    while (true) {
+        const start = template.indexOf('{{', pos);
+        if (start < 0) {
+            break;
+        }
+        const end = template.indexOf('}}', start + 2);
+        if (end < 0) {
+            throw new Error(`Unterminated placeholder: ${template.substring(start)}`);
+        }
+        const tag = template.substring(start, end + 2);
+        if (template[start + 2] === '{' || template[start + 2] === '&') {
+            throw new Error(`Raw placeholders are not supported: ${tag}`);
+        }
+        const content = template.substring(start + 2, end).trim();
+        if (!content) {
+            throw new Error(`Empty placeholder: ${tag}`);
+        }
+        if (start > pos) {
+            target().push({ kind: 'text', text: template.substring(pos, start) });
+        }
+        const sigil = content[0];
+        if (sigil === '#' || sigil === '?' || sigil === '^') {
+            const path = content.substring(1).trim();
+            if (path.includes('|')) {
+                throw new Error(`A section tag cannot have pipes: ${tag}`);
+            }
+            const section = {
+                kind: 'section',
+                sigil,
+                source: path,
+                ...parsePath(path, tag, open),
+                children: [],
+            };
+            target().push(section);
+            open.push(section);
+        }
+        else if (sigil === '/') {
+            const path = content.substring(1).trim();
+            const section = open.pop();
+            if (!section) {
+                throw new Error(`Closing tag without an open section: ${tag}`);
+            }
+            if (section.source !== path) {
+                throw new Error(`Closing tag does not match the open section {{/${section.source}}}: ${tag}`);
+            }
+        }
+        else {
+            const pipe = content.indexOf('|');
+            const path = (pipe < 0 ? content : content.substring(0, pipe)).trim();
+            target().push({
+                kind: 'value',
+                ...(path === '.' ? { parents: 0, path } : parsePath(path, tag, open)),
+                pipes: pipe < 0 ? [] : parsePipes(content.substring(pipe + 1), tag),
+                tag,
+            });
+        }
+        pos = end + 2;
+    }
+    if (open.length) {
+        throw new Error(`Section is not closed: {{/${open[open.length - 1].source}}} is missing`);
+    }
+    if (pos < template.length) {
+        root.push({ kind: 'text', text: template.substring(pos) });
+    }
+    return root;
+}
+/** Only an entering section is a level for `../`: guards never moved the scope. */
+function parsePath(path, tag, open) {
+    const match = PATH.exec(path);
+    if (!match) {
+        throw new Error(`Invalid path '${path}' in ${tag}`);
+    }
+    const parents = match[1].length / '../'.length;
+    if (parents > open.filter((section) => section.sigil === '#').length) {
+        throw new Error(`Path '${path}' goes above the root in ${tag}`);
+    }
+    return { parents, path: match[2] };
+}
+/**
+ * The pipe chain after the path: `name` or `name:'literal'`, separated by `|`. The literal is
+ * single-quoted with `\'` and `\\` escapes; it is the only place a `|` may appear without starting
+ * the next pipe.
+ */
+function parsePipes(chain, tag) {
+    const pipes = [];
+    let i = 0;
+    while (true) {
+        i = skipSpaces(chain, i);
+        PIPE_NAME.lastIndex = i;
+        const name = PIPE_NAME.exec(chain)?.[0];
+        if (!name) {
+            throw new Error(`Missing pipe name in ${tag}`);
+        }
+        i = skipSpaces(chain, i + name.length);
+        let arg;
+        if (chain[i] === ':') {
+            i = skipSpaces(chain, i + 1);
+            if (chain[i] !== "'") {
+                throw new Error(`Pipe argument must be a single-quoted literal in ${tag}`);
+            }
+            arg = '';
+            i++;
+            while (i < chain.length && chain[i] !== "'") {
+                if (chain[i] === '\\' && i + 1 < chain.length) {
+                    i++;
+                }
+                arg += chain[i];
+                i++;
+            }
+            if (i >= chain.length) {
+                throw new Error(`Unterminated pipe argument in ${tag}`);
+            }
+            i = skipSpaces(chain, i + 1);
+        }
+        if (PIPES_REQUIRING_ARGUMENT.includes(name) && arg === undefined) {
+            throw new Error(`Pipe '${name}' requires an argument in ${tag}`);
+        }
+        if (PIPES_WITHOUT_ARGUMENT.includes(name) && arg !== undefined) {
+            throw new Error(`Pipe '${name}' does not take an argument in ${tag}`);
+        }
+        pipes.push({ name, arg });
+        if (i >= chain.length) {
+            return pipes;
+        }
+        if (chain[i] !== '|') {
+            throw new Error(`Unexpected '${chain[i]}' after pipe '${name}' in ${tag}`);
+        }
+        i++;
+    }
+}
+function skipSpaces(s, i) {
+    while (i < s.length && /\s/.test(s[i])) {
+        i++;
+    }
+    return i;
+}
+/**
+ * `scopes` holds one entry per open entering section above the root scope, the innermost last;
+ * the parser has already checked that no `../` reaches below its bottom.
+ */
+function render(nodes, scopes, ctx, out) {
+    const scope = scopes[scopes.length - 1];
+    for (const node of nodes) {
+        if (node.kind === 'text') {
+            out.push(node.text);
+        }
+        else if (node.kind === 'value') {
+            out.push(renderValue(node, scopes, ctx));
+        }
+        else {
+            const value = lookup(scopes, node);
+            if (node.sigil === '^') {
+                if (!truthy(value)) {
+                    render(node.children, scopes, ctx, out);
+                }
+            }
+            else if (!truthy(value)) {
+                continue;
+            }
+            else if (node.sigil === '?') {
+                render(node.children, scopes, ctx, out);
+            }
+            else if (Array.isArray(value)) {
+                value.forEach((item) => render(node.children, [...scopes, item], ctx, out));
+            }
+            else if (typeof value === 'object') {
+                render(node.children, [...scopes, value], ctx, out);
+            }
+            else {
+                ctx.warn(`{{#${node.source}}} entered a single value; use {{?${node.source}}} to guard on it`);
+                // Still a level, so `../` inside counts the same as the server's field derivation does.
+                render(node.children, [...scopes, scope], ctx, out);
+            }
+        }
+    }
+}
+function lookup(scopes, path) {
+    return lookupPath(scopes[scopes.length - 1 - path.parents], path.path);
+}
+function renderValue(node, scopes, ctx) {
+    let value = node.path === '.' ? scopes[scopes.length - 1] : lookup(scopes, node);
+    for (const pipe of node.pipes) {
+        // Own names only: `constructor` and the like must not reach Object.prototype.
+        if (Object.prototype.hasOwnProperty.call(PIPES, pipe.name)) {
+            value = PIPES[pipe.name](value, pipe.arg, ctx);
+        }
+        else {
+            ctx.warn(`unknown pipe '${pipe.name}' in ${node.tag}, the value is left unformatted`);
+        }
+    }
+    if (value === undefined || value === null) {
+        return '';
+    }
+    if (typeof value === 'object') {
+        ctx.warn(`${node.tag} names an object or a list, rendered empty`);
+        return '';
+    }
+    return escapeHtml(String(value));
+}
+/** False: undefined, null, false, '' and the empty list. Zero is true, unlike in Mustache. */
+function truthy(value) {
+    return !(value === undefined ||
+        value === null ||
+        value === false ||
+        value === '' ||
+        (Array.isArray(value) && value.length === 0));
+}
+const ESCAPES = {
+    '&': '&amp;',
+    '<': '&lt;',
+    '>': '&gt;',
+    '"': '&quot;',
+    "'": '&#39;',
+};
+function escapeHtml(s) {
+    return s.replace(/[&<>"']/g, (c) => ESCAPES[c]);
+}
+
+/**
+ * The style sheets of server-sent HTML (`HtmlProperties.css`): one `<style>` element in the
+ * document head per distinct text, however many widgets, cards or cells use it, removed when the
+ * last of them lets it go. See HTML-WIDGET.md.
+ */
+class SmartHtmlStyles {
+    constructor() {
+        this.document = inject(DOCUMENT);
+        // A host with a strict style-src passes its nonce this way; the sheet is inline otherwise.
+        this.nonce = inject(CSP_NONCE, { optional: true });
+        this.sheets = new Map();
+    }
+    /** Adds the sheet unless it is there already; the returned function lets it go, once. */
+    acquire(css) {
+        let sheet = this.sheets.get(css);
+        if (!sheet) {
+            const element = this.document.createElement('style');
+            element.setAttribute('data-sb4-html-css', '');
+            if (this.nonce) {
+                element.setAttribute('nonce', this.nonce);
+            }
+            element.textContent = css;
+            this.document.head.appendChild(element);
+            sheet = { element, users: 0 };
+            this.sheets.set(css, sheet);
+        }
+        const used = sheet;
+        used.users++;
+        let released = false;
+        return () => {
+            if (released) {
+                return;
+            }
+            released = true;
+            used.users--;
+            if (used.users === 0) {
+                used.element.remove();
+                this.sheets.delete(css);
+            }
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartHtmlStyles, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartHtmlStyles, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartHtmlStyles, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+const TRIGGER = '[data-sb4-action]';
+/** Elements the browser already makes focusable and fires a click on from the keyboard. */
+const NATIVE = 'button, a[href], input, select, textarea';
+/**
+ * The action triggers of a container: any element carrying `data-sb4-action` (and optionally
+ * `data-sb4-action-identifier`) fires the action of that address from the nearest action list,
+ * whichever toolbar it is addressed to. One delegated listener per event on the container, so it
+ * survives the html being rewritten; the action is looked up when the click happens.
+ */
+function attachActionTriggers(container, execution, warn) {
+    // What mark() added, so that it takes back only its own and never the author's attributes.
+    const added = new WeakMap();
+    const warned = new WeakSet();
+    const resolve = (element) => {
+        const code = element.getAttribute('data-sb4-action');
+        const identifier = element.getAttribute('data-sb4-action-identifier') || undefined;
+        const hits = (execution.entries() ?? []).filter(
+        // using equality is a must here, undefined and null should be equal
+        (entry) => entry.uiAction.code === code && entry.uiAction.identifier == identifier);
+        if (hits.length !== 1 && !warned.has(element)) {
+            warned.add(element);
+            const address = `'${code}'${identifier ? ` (identifier '${identifier}')` : ''}`;
+            warn(hits.length
+                ? `action ${address} is offered ${hits.length} times, the first one is fired`
+                : `action ${address} is not offered here, its trigger is inert`);
+        }
+        return hits[0];
+    };
+    /** The innermost trigger at or above the event target whose action is offered. */
+    const triggerOf = (event) => {
+        let element = event.target?.closest?.(TRIGGER) ?? null;
+        while (element && container.contains(element)) {
+            const entry = resolve(element);
+            if (entry) {
+                return { element, entry };
+            }
+            element = element.parentElement?.closest(TRIGGER) ?? null;
+        }
+        return undefined;
+    };
+    const onClick = (event) => {
+        const trigger = triggerOf(event);
+        if (!trigger) {
+            return;
+        }
+        // The trigger is the whole reaction to this click: neither the card around it nor the link
+        // it may sit on gets one.
+        event.stopPropagation();
+        if (trigger.element.matches('a[href]')) {
+            event.preventDefault();
+        }
+        execution.fire(trigger.entry);
+    };
+    const onDoubleClick = (event) => {
+        if (triggerOf(event)) {
+            event.stopPropagation();
+        }
+    };
+    const onKeydown = (event) => {
+        if (event.key !== 'Enter' && event.key !== ' ') {
+            return;
+        }
+        const trigger = triggerOf(event);
+        if (!trigger || trigger.element !== event.target || trigger.element.matches(NATIVE)) {
+            return;
+        }
+        event.stopPropagation();
+        event.preventDefault();
+        execution.fire(trigger.entry);
+    };
+    container.addEventListener('click', onClick);
+    container.addEventListener('dblclick', onDoubleClick);
+    container.addEventListener('keydown', onKeydown);
+    return {
+        mark: () => {
+            container.querySelectorAll(TRIGGER).forEach((element) => {
+                const entry = resolve(element);
+                const own = added.get(element) ?? { role: false, tabindex: false };
+                added.set(element, own);
+                const interactive = !!entry && !element.matches(NATIVE);
+                own.role = ownAttribute(element, 'role', 'button', interactive, own.role);
+                own.tabindex = ownAttribute(element, 'tabindex', '0', interactive, own.tabindex);
+                const disabled = !!entry?.uiAction.disabled;
+                element.classList.toggle('sb4-action-disabled', disabled);
+                element.classList.toggle('sb4-action-inert', !entry);
+                if (disabled) {
+                    element.setAttribute('aria-disabled', 'true');
+                }
+                else {
+                    element.removeAttribute('aria-disabled');
+                }
+            });
+        },
+        dispose: () => {
+            container.removeEventListener('click', onClick);
+            container.removeEventListener('dblclick', onDoubleClick);
+            container.removeEventListener('keydown', onKeydown);
+        },
+    };
+}
+/** Sets or takes back an attribute this module owns; an attribute the author wrote stays. */
+function ownAttribute(element, name, value, wanted, owned) {
+    if (wanted && !element.hasAttribute(name)) {
+        element.setAttribute(name, value);
+        return true;
+    }
+    if (!wanted && owned) {
+        element.removeAttribute(name);
+        return false;
+    }
+    return owned;
+}
+
+/**
+ * The class the container carries while the html on screen is about to be replaced. A style sheet
+ * that gives it an animation or transition plays that before the new html is written; without one
+ * the html is written at once. See HTML-WIDGET.md.
+ */
+const LEAVING_CLASS = 'sb4-html-leaving';
+/** The longest a leave animation may hold the new html back, an endless one included. */
+const LEAVE_TIMEOUT_MS = 600;
+/** Call from an injection context; registers dispose() on the DestroyRef. */
+function injectSmartHtmlRenderer(container) {
+    const session = inject(SmartSessionService);
+    const styles = inject(SmartHtmlStyles);
+    const execution = injectUiActionExecution();
+    const hydration = {
+        appRef: inject(ApplicationRef),
+        elementInjector: inject(Injector),
+        environmentInjector: inject(EnvironmentInjector),
+        warn,
+    };
+    let current;
+    // The html waiting for the leave animation of the one on screen, and the leave it belongs to.
+    let pending;
+    let leave = 0;
+    let disposed = false;
+    let template = '';
+    let refs = [];
+    let css;
+    let releaseCss = () => { };
+    // A card re-resolves on every model change; one line per distinct problem is enough.
+    const reported = new Set();
+    function warn(message) {
+        report(message, console.warn);
+    }
+    function report(message, log) {
+        if (!reported.has(message)) {
+            reported.add(message);
+            log(`smart-html: ${message} — in ${template.substring(0, 80)}`);
+        }
+    }
+    function locale() {
+        try {
+            return session.getLocale();
+        }
+        catch {
+            return undefined;
+        }
+    }
+    const triggers = attachActionTriggers(container, execution, warn);
+    // The list may change without the html changing: an action gets disabled, or arrives later.
+    const marking = effect(() => {
+        execution.entries();
+        untracked(() => triggers.mark());
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "marking" }] : /* istanbul ignore next */ []));
+    const destroyToolbars = () => {
+        refs.forEach((ref) => ref.destroy());
+        refs = [];
+    };
+    const write = (html) => {
+        current = html;
+        // Rewriting the html does not destroy the toolbars hydrated into it.
+        destroyToolbars();
+        // Trusted as authored by the backend; every value the resolver put in is escaped.
+        container.innerHTML = html;
+        refs = hydrateToolbars(container, hydration);
+        triggers.mark();
+    };
+    const cancelLeave = () => {
+        leave++;
+        pending = undefined;
+        container.classList.remove(LEAVING_CLASS);
+    };
+    /** Plays what the style sheets give the leaving class, then writes the latest pending html. */
+    const leaveThenWrite = (html) => {
+        // Only what the class starts counts; an entry or endless animation already running does not.
+        const running = new Set(container.getAnimations({ subtree: true }));
+        container.classList.add(LEAVING_CLASS);
+        const leaving = container
+            .getAnimations({ subtree: true })
+            .filter((animation) => !running.has(animation));
+        if (!leaving.length) {
+            container.classList.remove(LEAVING_CLASS);
+            write(html);
+            return;
+        }
+        pending = html;
+        const token = ++leave;
+        Promise.race([
+            Promise.allSettled(leaving.map((animation) => animation.finished)),
+            new Promise((resolve) => setTimeout(resolve, LEAVE_TIMEOUT_MS)),
+        ]).then(() => {
+            if (disposed || token !== leave) {
+                return;
+            }
+            const next = pending;
+            cancelLeave();
+            write(next);
+        });
+    };
+    const renderer = {
+        // Untracked: a caller rendering from an effect depends on its own inputs only, not on
+        // the action list the triggers read.
+        render: (newTemplate, context) => untracked(() => {
+            template = newTemplate;
+            const { html, errors } = resolveTemplate(template, context.data, {
+                valueSets: context.valueSets,
+                locale: locale(),
+                warn,
+            });
+            errors.forEach((error) => report(`the html is left unresolved: ${error}`, console.error));
+            if (pending !== undefined) {
+                // Mid-leave the latest html wins; back to the one on screen, nothing leaves after all.
+                if (html === current) {
+                    cancelLeave();
+                }
+                else {
+                    pending = html;
+                }
+                return;
+            }
+            if (html === current) {
+                return;
+            }
+            if (current === undefined) {
+                write(html);
+                return;
+            }
+            leaveThenWrite(html);
+        }),
+        useCss: (newCss) => {
+            const next = newCss || undefined;
+            if (next === css) {
+                return;
+            }
+            releaseCss();
+            releaseCss = next ? styles.acquire(next) : () => { };
+            css = next;
+        },
+        dispose: () => {
+            disposed = true;
+            releaseCss();
+            marking.destroy();
+            destroyToolbars();
+            triggers.dispose();
+        },
+    };
+    inject(DestroyRef).onDestroy(() => renderer.dispose());
+    return renderer;
+}
+
+/**
+ * The HTML widget: server-sent HTML whose client placeholders are resolved against the model of
+ * the form it sits on, the widget's `root` applied. It has no control, no label and no value of
+ * its own; it follows the form's revision and re-resolves, which rewrites the html only when the
+ * result differs. See HTML-WIDGET.md.
+ */
+class SmartHtmlWidgetComponent {
+    constructor() {
+        this.service = inject(SmartFormService);
+        this.renderer = injectSmartHtmlRenderer(inject(ElementRef).nativeElement);
+        this.widgetInstance = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "widgetInstance" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            this.service.revision();
+            const properties = this.widgetInstance().htmlProperties;
+            const model = this.service.smartForm?.componentModel;
+            this.renderer.useCss(properties?.css);
+            this.renderer.render(properties?.html ?? '', {
+                data: this.scope(model?.data, properties?.root, properties?.html),
+                valueSets: model?.valueSets,
+            });
+        });
+    }
+    /** The object the root names; anything else leaves every placeholder empty. */
+    scope(data, root, html) {
+        const scope = rootScope(data, root);
+        if (scope !== undefined) {
+            return scope;
+        }
+        if (root && this.warnedRoot !== root) {
+            this.warnedRoot = root;
+            console.warn(`smart-html: root '${root}' does not name an object, every placeholder is left empty` +
+                ` — in ${html?.substring(0, 80)}`);
+        }
+        return undefined;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartHtmlWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: SmartHtmlWidgetComponent, isStandalone: true, selector: "smart-html-widget", inputs: { widgetInstance: { classPropertyName: "widgetInstance", publicName: "widgetInstance", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: '', isInline: true, styles: ["smart-html-widget{display:block}smart-html-widget [data-sb4-action]{cursor:pointer}smart-html-widget [data-sb4-action].sb4-action-inert{cursor:inherit}smart-html-widget [data-sb4-action].sb4-action-disabled{cursor:default;opacity:.5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartHtmlWidgetComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-html-widget', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["smart-html-widget{display:block}smart-html-widget [data-sb4-action]{cursor:pointer}smart-html-widget [data-sb4-action].sb4-action-inert{cursor:inherit}smart-html-widget [data-sb4-action].sb4-action-disabled{cursor:default;opacity:.5}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { widgetInstance: [{ type: i0.Input, args: [{ isSignal: true, alias: "widgetInstance", required: true }] }] } });
+
 class SmartMultiFileEditorComponent {
     constructor() {
         this.cdr = inject(ChangeDetectorRef);
@@ -10434,6 +11217,7 @@ class SmartformwidgetComponent {
             widget.type !== SmartFormWidgetType.IMAGE &&
             widget.type !== SmartFormWidgetType.SVG &&
             widget.type !== SmartFormWidgetType.DIV &&
+            widget.type !== SmartFormWidgetType.HTML &&
             widget.type !== SmartFormWidgetType.DIVIDER &&
             widget.type !== SmartFormWidgetType.BUTTON &&
             widget.type !== SmartFormWidgetType.COMPONENT) {
@@ -10459,6 +11243,7 @@ class SmartformwidgetComponent {
             this.widgetInstance.type !== SmartFormWidgetType.IMAGE &&
             this.widgetInstance.type !== SmartFormWidgetType.SVG &&
             this.widgetInstance.type !== SmartFormWidgetType.DIV &&
+            this.widgetInstance.type !== SmartFormWidgetType.HTML &&
             this.widgetInstance.type !== SmartFormWidgetType.DIVIDER &&
             this.widgetInstance.type !== SmartFormWidgetType.BUTTON &&
             this.widgetInstance.type !== SmartFormWidgetType.COMPONENT &&
@@ -10513,6 +11298,7 @@ class SmartformwidgetComponent {
             widgetInstance.type !== SmartFormWidgetType.IMAGE &&
             widgetInstance.type !== SmartFormWidgetType.SVG &&
             widgetInstance.type !== SmartFormWidgetType.DIV &&
+            widgetInstance.type !== SmartFormWidgetType.HTML &&
             widgetInstance.type !== SmartFormWidgetType.DIVIDER &&
             widgetInstance.type !== SmartFormWidgetType.BUTTON &&
             widgetInstance.type !== SmartFormWidgetType.COMPONENT &&
@@ -10803,11 +11589,11 @@ class SmartformwidgetComponent {
         }
     }
     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: "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=\"container\"\n      >\n      @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\n        <div\n          [attr.data-testid]=\"widgetInstance.key\"\n          [ngClass]=\"getDirection()\"\n          >\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\n          (capsLock)=\"capsOn = $event\"\n          class=\"widgetContainer\"\n          >\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>{{\n                  widgetInstance.hint?.text\n                }}</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\n                class=\"label\"\n                [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                >\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\n                mat-icon-button\n                matSuffix\n                (click)=\"togglePasswordVisibility($event)\"\n                >\n                <mat-icon>{{ hidePassword ? 'visibility_off' : 'visibility' }}</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 && 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 && widgetInstance.textFieldButton.icon\n                  ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.textFieldButton.icon\"\n                    >\n                  </smart-icon>\n                }\n              </button>\n            }\n            @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n              <mat-hint\n                matSuffix\n                align=\"end\"\n                >{{\n                widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n                }}</mat-hint\n                >\n              }\n            </mat-form-field>\n            @if (\n              !widgetInstance?.hint ||\n              widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n              ) {\n              <mat-hint\n                >{{ widgetInstance.hint?.text }}</mat-hint\n                >\n              }\n            </div>\n          }\n          @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\n            <div\n              class=\"widgetContainer\"\n              >\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>{{\n                      widgetInstance.hint?.text\n                    }}</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\n                    class=\"label\"\n                    [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                    >\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>\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                @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 && widgetInstance.textFieldButton.icon\n                      ) {\n                      <smart-icon\n                        [icon]=\"widgetInstance.textFieldButton.icon\"\n                        >\n                      </smart-icon>\n                    }\n                    {{ widgetInstance.textFieldButton.label }}\n                    @if (\n                      widgetInstance.textFieldButton.iconPosition ===\n                      smartFormTextFieldButtonIconPosition().POST && widgetInstance.textFieldButton.icon\n                      ) {\n                      <smart-icon\n                        [icon]=\"widgetInstance.textFieldButton.icon\"\n                        >\n                      </smart-icon>\n                    }\n                  </button>\n                }\n              </mat-form-field>\n            </div>\n          }\n          @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\n            <div\n              class=\"widgetContainer\"\n              >\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>{{\n                      widgetInstance.hint?.text\n                    }}</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\n                    class=\"label\"\n                    [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                    >\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\n                      [disabled]=\"widgetInstance.isDisabled\"\n                      (removed)=\"remove(value)\"\n                      >\n                      {{ value }}\n                      <button matChipRemove>\n                        <mat-icon>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\n                        [disabled]=\"widgetInstance.isDisabled\"\n                        [value]=\"item.value\"\n                        >\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\n              class=\"widgetContainer\"\n              >\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>{{\n                      widgetInstance.hint?.text\n                    }}</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\n                    class=\"label\"\n                    [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                    >\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\n                      [disabled]=\"widgetInstance.isDisabled\"\n                      (removed)=\"remove(value)\"\n                      >\n                      {{ getChipsValue(value) }}\n                      <button matChipRemove>\n                        <mat-icon>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>{{\n                      widgetInstance.hint?.text\n                    }}</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\n                    class=\"label\"\n                    [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                    >\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\n                    matSuffix\n                    align=\"end\"\n                    >{{\n                    widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n                    }}</mat-hint\n                    >\n                  }\n                </mat-form-field>\n                @if (\n                  !widgetInstance.hint || widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\n                  ) {\n                  <mat-hint\n                    >{{ widgetInstance.hint?.text }}</mat-hint\n                    >\n                  }\n                </div>\n              }\n              @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\n                <div\n                  [attr.data-testid]=\"widgetInstance.key\"\n                  class=\"widgetContainer\"\n                  >\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>{{\n                          widgetInstance.hint?.text\n                        }}</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\n                  [attr.data-testid]=\"widgetInstance.key\"\n                  class=\"widgetContainer\"\n                  >\n                  @if (widgetInstance.showLabel) {\n                    <div class=\"labelContainer\">\n                      <h4\n                        class=\"{{ labelColor() }} smart-form-widget-label {{ widgetInstance.cssLabelClass }}\"\n                        [ngClass]=\"getLabelNgClass()\"\n                        [ngStyle]=\"getLabelStyle()\"\n                        >\n                        {{ getWidgetLabel(widgetInstance) }}\n                      </h4>\n                      @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                        <mat-hint>{{\n                          widgetInstance.hint?.text\n                        }}</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\n                          class=\"checkbox-item-container\"\n                          >\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 {{ widgetInstance.cssLabelClass }}\"\n                        [ngClass]=\"getLabelNgClass()\"\n                        [ngStyle]=\"getLabelStyle()\"\n                        >\n                        {{ getWidgetLabel(widgetInstance) }}\n                      </h4>\n                      @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                        <mat-hint>{{\n                          widgetInstance.hint?.text\n                        }}</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\n                  class=\"datePicker widgetContainer\"\n                  >\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>{{\n                          widgetInstance.hint?.text\n                        }}</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\n                        class=\"label\"\n                        [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                        >\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>{{\n                        widgetInstance.hint?.text\n                      }}</mat-hint>\n                    }\n                  </div>\n                }\n                <lib-smart-month-picker\n                  [attr.data-testid]=\"widgetInstance.key\"\n                  [widgetInstance]=\"widgetInstance\"\n                  (valueChange)=\"handleYearMonthPicked($event)\"\n                ></lib-smart-month-picker>\n              </div>\n            }\n            @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\n              <div\n                class=\"widgetContainer\"\n                >\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>{{\n                        widgetInstance.hint?.text\n                      }}</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\n                        class=\"label\"\n                        [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                        >\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>{{\n                        widgetInstance.hint?.text\n                      }}</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\n                      class=\"label\"\n                      [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                      >\n                      {{ getWidgetLabel(widgetInstance) }}\n                    </mat-label>\n                  }\n                  <mat-select\n                    [formControlName]=\"widgetInstance.key\"\n                    [attr.data-testid]=\"widgetInstance.key\"\n                    (selectionChange)=\"onValueChange?.next($event.value)\"\n                    (closed)=\"handleBlurEvent(widgetInstance)\"\n                    [disabled]=\"widgetInstance.isDisabled!\"\n          [compareWith]=\"\n            widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\n          \"\n                    placeholder=\"{{ widgetInstance.placeholder ? widgetInstance.placeholder : '' }}\"\n                    >\n                    @for (option of widgetInstance.valueList; track option) {\n                      <div>\n                        @if (option.type === getType().ITEM_GROUP) {\n                          <mat-optgroup\n                            [label]=\"option.label\"\n                            [disabled]=\"option.isDisabled\"\n                            >\n                            @for (innerOption of option.valueList; track innerOption) {\n                              <mat-option\n                                [value]=\"innerOption.value\"\n                                [disabled]=\"innerOption.isDisabled\"\n                                >\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\n                            [value]=\"option.value\"\n                            [disabled]=\"option.isDisabled\"\n                            >\n                            @if (option.icon) {\n                              <smart-icon\n                                [icon]=\"option.icon\"\n                                [color]=\"option.iconColor\"\n                                ></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 (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\n                          >{{ widgetInstance.hint?.text }}</mat-hint\n                          >\n                        }\n                      </div>\n                    }\n                    @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\n                      <div\n                        class=\"widgetContainer\"\n                        >\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>{{\n                                widgetInstance.hint?.text\n                              }}</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\n                              class=\"label\"\n                              [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                              >\n                              {{ getWidgetLabel(widgetInstance) }}\n                            </mat-label>\n                          }\n                          <mat-select\n                            [formControlName]=\"widgetInstance.key\"\n                            [attr.data-testid]=\"widgetInstance.key\"\n                            multiple\n                            (selectionChange)=\"onValueChange?.next($event.value)\"\n                            (closed)=\"handleBlurEvent(widgetInstance)\"\n                            [disabled]=\"widgetInstance.isDisabled!\"\n          [compareWith]=\"\n            widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\n          \"\n                            placeholder=\"{{ widgetInstance.placeholder ? widgetInstance.placeholder : '' }}\"\n                            >\n                            @for (option of widgetInstance.valueList; track option) {\n                              <div>\n                                @if (option.type === getType().ITEM_GROUP) {\n                                  <mat-optgroup\n                                    [label]=\"option.label\"\n                                    [disabled]=\"option.isDisabled\"\n                                    >\n                                    @for (innerOption of option.valueList; track innerOption) {\n                                      <mat-option\n                                        [value]=\"innerOption.value\"\n                                        [disabled]=\"innerOption.isDisabled\"\n                                        >\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\n                                          [value]=\"option.value\"\n                                          [disabled]=\"option.isDisabled\"\n                                          >\n                                          @if (option.icon) {\n                                            <smart-icon\n                                              [icon]=\"option.icon\"\n                                              [color]=\"option.iconColor\"\n                                              ></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\n                                        >{{ widgetInstance.hint?.text }}</mat-hint\n                                        >\n                                      }\n                                    </div>\n                                  }\n                                  @if (widgetInstance.type === smartFormWidgetType.LABEL) {\n                                    <div\n                                      class=\"label widgetContainer\"\n                                      [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\n                                      >\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>{{\n                                              widgetInstance.hint?.text\n                                            }}</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\n                                            class=\"label\"\n                                            [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                                            >\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>{{\n                                              widgetInstance.hint?.text\n                                            }}</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 class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\" [ngClass]=\"getNgClass()\">\n                                          @for (item of indicatorItems; track item; let i = $index) {\n                                            <div\n                                              class=\"indicatorItem\"\n                                              [ngClass]=\"getIndicatorItemClass(i)\"\n                                            ></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                                      >\n                                    </div>\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\n                                          class=\"labelContainer {{ labelColor() }}\"\n                                          >\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>{{\n                                            widgetInstance.hint?.text\n                                          }}</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]=\"widgetInstance.isDisabled ? emptyQuillToolbar : widgetInstance.quillModules\"\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\n                                            >{{ widgetInstance.hint?.text }}</mat-hint\n                                            >\n                                          }\n                                          @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n                                            <mat-hint\n                                              matSuffix\n                                              align=\"end\"\n                                              class=\"rich-text-editor-leeway-counter\"\n                                              >{{ getRichTextEditorLengthLeeway() }}</mat-hint\n                                              >\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>{{\n                                                widgetInstance.hint?.text\n                                              }}</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>{{\n                                                widgetInstance.hint?.text\n                                              }}</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>{{\n                                                widgetInstance.hint?.text\n                                              }}</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 || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n                                            ) {\n                                            <mat-hint\n                                              >{{ widgetInstance.hint?.text }}</mat-hint\n                                              >\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}.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", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: SmartMonthPickerComponent, selector: "lib-smart-month-picker", inputs: ["widgetInstance"], outputs: ["valueChange"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: SmartVoiceRecorderComponent, selector: "smart-voice-recorder", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: SmartFileEditorComponent, selector: "smart-file-editor", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: SmartMultiFileEditorComponent, selector: "smart-multi-file-editor", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent", "fileEvent"] }, { kind: "component", type: 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: "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=\"container\"\n      >\n      @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\n        <div\n          [attr.data-testid]=\"widgetInstance.key\"\n          [ngClass]=\"getDirection()\"\n          >\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\n          (capsLock)=\"capsOn = $event\"\n          class=\"widgetContainer\"\n          >\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>{{\n                  widgetInstance.hint?.text\n                }}</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\n                class=\"label\"\n                [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                >\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\n                mat-icon-button\n                matSuffix\n                (click)=\"togglePasswordVisibility($event)\"\n                >\n                <mat-icon>{{ hidePassword ? 'visibility_off' : 'visibility' }}</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 && 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 && widgetInstance.textFieldButton.icon\n                  ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.textFieldButton.icon\"\n                    >\n                  </smart-icon>\n                }\n              </button>\n            }\n            @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n              <mat-hint\n                matSuffix\n                align=\"end\"\n                >{{\n                widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n                }}</mat-hint\n                >\n              }\n            </mat-form-field>\n            @if (\n              !widgetInstance?.hint ||\n              widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n              ) {\n              <mat-hint\n                >{{ widgetInstance.hint?.text }}</mat-hint\n                >\n              }\n            </div>\n          }\n          @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\n            <div\n              class=\"widgetContainer\"\n              >\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>{{\n                      widgetInstance.hint?.text\n                    }}</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\n                    class=\"label\"\n                    [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                    >\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>\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                @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 && widgetInstance.textFieldButton.icon\n                      ) {\n                      <smart-icon\n                        [icon]=\"widgetInstance.textFieldButton.icon\"\n                        >\n                      </smart-icon>\n                    }\n                    {{ widgetInstance.textFieldButton.label }}\n                    @if (\n                      widgetInstance.textFieldButton.iconPosition ===\n                      smartFormTextFieldButtonIconPosition().POST && widgetInstance.textFieldButton.icon\n                      ) {\n                      <smart-icon\n                        [icon]=\"widgetInstance.textFieldButton.icon\"\n                        >\n                      </smart-icon>\n                    }\n                  </button>\n                }\n              </mat-form-field>\n            </div>\n          }\n          @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\n            <div\n              class=\"widgetContainer\"\n              >\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>{{\n                      widgetInstance.hint?.text\n                    }}</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\n                    class=\"label\"\n                    [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                    >\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\n                      [disabled]=\"widgetInstance.isDisabled\"\n                      (removed)=\"remove(value)\"\n                      >\n                      {{ value }}\n                      <button matChipRemove>\n                        <mat-icon>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\n                        [disabled]=\"widgetInstance.isDisabled\"\n                        [value]=\"item.value\"\n                        >\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\n              class=\"widgetContainer\"\n              >\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>{{\n                      widgetInstance.hint?.text\n                    }}</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\n                    class=\"label\"\n                    [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                    >\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\n                      [disabled]=\"widgetInstance.isDisabled\"\n                      (removed)=\"remove(value)\"\n                      >\n                      {{ getChipsValue(value) }}\n                      <button matChipRemove>\n                        <mat-icon>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>{{\n                      widgetInstance.hint?.text\n                    }}</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\n                    class=\"label\"\n                    [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                    >\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\n                    matSuffix\n                    align=\"end\"\n                    >{{\n                    widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n                    }}</mat-hint\n                    >\n                  }\n                </mat-form-field>\n                @if (\n                  !widgetInstance.hint || widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\n                  ) {\n                  <mat-hint\n                    >{{ widgetInstance.hint?.text }}</mat-hint\n                    >\n                  }\n                </div>\n              }\n              @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\n                <div\n                  [attr.data-testid]=\"widgetInstance.key\"\n                  class=\"widgetContainer\"\n                  >\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>{{\n                          widgetInstance.hint?.text\n                        }}</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\n                  [attr.data-testid]=\"widgetInstance.key\"\n                  class=\"widgetContainer\"\n                  >\n                  @if (widgetInstance.showLabel) {\n                    <div class=\"labelContainer\">\n                      <h4\n                        class=\"{{ labelColor() }} smart-form-widget-label {{ widgetInstance.cssLabelClass }}\"\n                        [ngClass]=\"getLabelNgClass()\"\n                        [ngStyle]=\"getLabelStyle()\"\n                        >\n                        {{ getWidgetLabel(widgetInstance) }}\n                      </h4>\n                      @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                        <mat-hint>{{\n                          widgetInstance.hint?.text\n                        }}</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\n                          class=\"checkbox-item-container\"\n                          >\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 {{ widgetInstance.cssLabelClass }}\"\n                        [ngClass]=\"getLabelNgClass()\"\n                        [ngStyle]=\"getLabelStyle()\"\n                        >\n                        {{ getWidgetLabel(widgetInstance) }}\n                      </h4>\n                      @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                        <mat-hint>{{\n                          widgetInstance.hint?.text\n                        }}</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\n                  class=\"datePicker widgetContainer\"\n                  >\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>{{\n                          widgetInstance.hint?.text\n                        }}</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\n                        class=\"label\"\n                        [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                        >\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>{{\n                        widgetInstance.hint?.text\n                      }}</mat-hint>\n                    }\n                  </div>\n                }\n                <lib-smart-month-picker\n                  [attr.data-testid]=\"widgetInstance.key\"\n                  [widgetInstance]=\"widgetInstance\"\n                  (valueChange)=\"handleYearMonthPicked($event)\"\n                ></lib-smart-month-picker>\n              </div>\n            }\n            @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\n              <div\n                class=\"widgetContainer\"\n                >\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>{{\n                        widgetInstance.hint?.text\n                      }}</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\n                        class=\"label\"\n                        [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                        >\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>{{\n                        widgetInstance.hint?.text\n                      }}</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\n                      class=\"label\"\n                      [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                      >\n                      {{ getWidgetLabel(widgetInstance) }}\n                    </mat-label>\n                  }\n                  <mat-select\n                    [formControlName]=\"widgetInstance.key\"\n                    [attr.data-testid]=\"widgetInstance.key\"\n                    (selectionChange)=\"onValueChange?.next($event.value)\"\n                    (closed)=\"handleBlurEvent(widgetInstance)\"\n                    [disabled]=\"widgetInstance.isDisabled!\"\n          [compareWith]=\"\n            widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\n          \"\n                    placeholder=\"{{ widgetInstance.placeholder ? widgetInstance.placeholder : '' }}\"\n                    >\n                    @for (option of widgetInstance.valueList; track option) {\n                      <div>\n                        @if (option.type === getType().ITEM_GROUP) {\n                          <mat-optgroup\n                            [label]=\"option.label\"\n                            [disabled]=\"option.isDisabled\"\n                            >\n                            @for (innerOption of option.valueList; track innerOption) {\n                              <mat-option\n                                [value]=\"innerOption.value\"\n                                [disabled]=\"innerOption.isDisabled\"\n                                >\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\n                            [value]=\"option.value\"\n                            [disabled]=\"option.isDisabled\"\n                            >\n                            @if (option.icon) {\n                              <smart-icon\n                                [icon]=\"option.icon\"\n                                [color]=\"option.iconColor\"\n                                ></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 (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\n                          >{{ widgetInstance.hint?.text }}</mat-hint\n                          >\n                        }\n                      </div>\n                    }\n                    @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\n                      <div\n                        class=\"widgetContainer\"\n                        >\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>{{\n                                widgetInstance.hint?.text\n                              }}</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\n                              class=\"label\"\n                              [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                              >\n                              {{ getWidgetLabel(widgetInstance) }}\n                            </mat-label>\n                          }\n                          <mat-select\n                            [formControlName]=\"widgetInstance.key\"\n                            [attr.data-testid]=\"widgetInstance.key\"\n                            multiple\n                            (selectionChange)=\"onValueChange?.next($event.value)\"\n                            (closed)=\"handleBlurEvent(widgetInstance)\"\n                            [disabled]=\"widgetInstance.isDisabled!\"\n          [compareWith]=\"\n            widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\n          \"\n                            placeholder=\"{{ widgetInstance.placeholder ? widgetInstance.placeholder : '' }}\"\n                            >\n                            @for (option of widgetInstance.valueList; track option) {\n                              <div>\n                                @if (option.type === getType().ITEM_GROUP) {\n                                  <mat-optgroup\n                                    [label]=\"option.label\"\n                                    [disabled]=\"option.isDisabled\"\n                                    >\n                                    @for (innerOption of option.valueList; track innerOption) {\n                                      <mat-option\n                                        [value]=\"innerOption.value\"\n                                        [disabled]=\"innerOption.isDisabled\"\n                                        >\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\n                                          [value]=\"option.value\"\n                                          [disabled]=\"option.isDisabled\"\n                                          >\n                                          @if (option.icon) {\n                                            <smart-icon\n                                              [icon]=\"option.icon\"\n                                              [color]=\"option.iconColor\"\n                                              ></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\n                                        >{{ widgetInstance.hint?.text }}</mat-hint\n                                        >\n                                      }\n                                    </div>\n                                  }\n                                  @if (widgetInstance.type === smartFormWidgetType.LABEL) {\n                                    <div\n                                      class=\"label widgetContainer\"\n                                      [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\n                                      >\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>{{\n                                              widgetInstance.hint?.text\n                                            }}</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\n                                            class=\"label\"\n                                            [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                                            >\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>{{\n                                              widgetInstance.hint?.text\n                                            }}</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 class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\" [ngClass]=\"getNgClass()\">\n                                          @for (item of indicatorItems; track item; let i = $index) {\n                                            <div\n                                              class=\"indicatorItem\"\n                                              [ngClass]=\"getIndicatorItemClass(i)\"\n                                            ></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                                      >\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\n                                          class=\"labelContainer {{ labelColor() }}\"\n                                          >\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>{{\n                                            widgetInstance.hint?.text\n                                          }}</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]=\"widgetInstance.isDisabled ? emptyQuillToolbar : widgetInstance.quillModules\"\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\n                                            >{{ widgetInstance.hint?.text }}</mat-hint\n                                            >\n                                          }\n                                          @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n                                            <mat-hint\n                                              matSuffix\n                                              align=\"end\"\n                                              class=\"rich-text-editor-leeway-counter\"\n                                              >{{ getRichTextEditorLengthLeeway() }}</mat-hint\n                                              >\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>{{\n                                                widgetInstance.hint?.text\n                                              }}</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>{{\n                                                widgetInstance.hint?.text\n                                              }}</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>{{\n                                                widgetInstance.hint?.text\n                                              }}</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 || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n                                            ) {\n                                            <mat-hint\n                                              >{{ widgetInstance.hint?.text }}</mat-hint\n                                              >\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}.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", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: SmartMonthPickerComponent, selector: "lib-smart-month-picker", inputs: ["widgetInstance"], outputs: ["valueChange"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: SmartVoiceRecorderComponent, selector: "smart-voice-recorder", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: SmartFileEditorComponent, selector: "smart-file-editor", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: SmartMultiFileEditorComponent, selector: "smart-multi-file-editor", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent", "fileEvent"] }, { kind: "component", type: SmartHtmlWidgetComponent, selector: "smart-html-widget", inputs: ["widgetInstance"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: SortableWidgetComponent, selector: "lib-sortable-widget", inputs: ["widgetInstance"] }, { kind: "component", type: YouTubePlayer, selector: "youtube-player", inputs: ["videoId", "height", "width", "startSeconds", "endSeconds", "suggestedQuality", "playerVars", "disableCookies", "loadApi", "disablePlaceholder", "showBeforeIframeApiLoads", "placeholderButtonLabel", "placeholderImageQuality"], outputs: ["ready", "stateChange", "error", "apiChange", "playbackQualityChange", "playbackRateChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartformwidgetComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smartformwidget', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule, NgClass, TrackCapsDirective, NgStyle, MatHint, MatFormField, MatLabel, MatInput, NgxMaskDirective, MatAutocompleteTrigger, MatIconButton, MatSuffix, MatIcon, MatAutocomplete, MatOption, MatPrefix, SmartIconComponent, UiActionButtonComponent, UiActionToolbarComponent, MatButton, MatChipGrid, MatChipRow, MatChipRemove, MatChipInput, MatChip, CdkTextareaAutosize, MatCheckbox, MatRadioGroup, MatRadioButton, MatDatepickerToggle, MatDatepicker, MatDatepickerInput, SmartMonthPickerComponent, MatSelect, MatOptgroup, MatSlideToggle, SmartVoiceRecorderComponent, SmartFileEditorComponent, SmartMultiFileEditorComponent, QuillEditorComponent, SortableWidgetComponent, 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=\"container\"\n      >\n      @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\n        <div\n          [attr.data-testid]=\"widgetInstance.key\"\n          [ngClass]=\"getDirection()\"\n          >\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\n          (capsLock)=\"capsOn = $event\"\n          class=\"widgetContainer\"\n          >\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>{{\n                  widgetInstance.hint?.text\n                }}</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\n                class=\"label\"\n                [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                >\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\n                mat-icon-button\n                matSuffix\n                (click)=\"togglePasswordVisibility($event)\"\n                >\n                <mat-icon>{{ hidePassword ? 'visibility_off' : 'visibility' }}</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 && 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 && widgetInstance.textFieldButton.icon\n                  ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.textFieldButton.icon\"\n                    >\n                  </smart-icon>\n                }\n              </button>\n            }\n            @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n              <mat-hint\n                matSuffix\n                align=\"end\"\n                >{{\n                widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n                }}</mat-hint\n                >\n              }\n            </mat-form-field>\n            @if (\n              !widgetInstance?.hint ||\n              widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n              ) {\n              <mat-hint\n                >{{ widgetInstance.hint?.text }}</mat-hint\n                >\n              }\n            </div>\n          }\n          @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\n            <div\n              class=\"widgetContainer\"\n              >\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>{{\n                      widgetInstance.hint?.text\n                    }}</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\n                    class=\"label\"\n                    [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                    >\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>\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                @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 && widgetInstance.textFieldButton.icon\n                      ) {\n                      <smart-icon\n                        [icon]=\"widgetInstance.textFieldButton.icon\"\n                        >\n                      </smart-icon>\n                    }\n                    {{ widgetInstance.textFieldButton.label }}\n                    @if (\n                      widgetInstance.textFieldButton.iconPosition ===\n                      smartFormTextFieldButtonIconPosition().POST && widgetInstance.textFieldButton.icon\n                      ) {\n                      <smart-icon\n                        [icon]=\"widgetInstance.textFieldButton.icon\"\n                        >\n                      </smart-icon>\n                    }\n                  </button>\n                }\n              </mat-form-field>\n            </div>\n          }\n          @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\n            <div\n              class=\"widgetContainer\"\n              >\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>{{\n                      widgetInstance.hint?.text\n                    }}</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\n                    class=\"label\"\n                    [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                    >\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\n                      [disabled]=\"widgetInstance.isDisabled\"\n                      (removed)=\"remove(value)\"\n                      >\n                      {{ value }}\n                      <button matChipRemove>\n                        <mat-icon>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\n                        [disabled]=\"widgetInstance.isDisabled\"\n                        [value]=\"item.value\"\n                        >\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\n              class=\"widgetContainer\"\n              >\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>{{\n                      widgetInstance.hint?.text\n                    }}</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\n                    class=\"label\"\n                    [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                    >\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\n                      [disabled]=\"widgetInstance.isDisabled\"\n                      (removed)=\"remove(value)\"\n                      >\n                      {{ getChipsValue(value) }}\n                      <button matChipRemove>\n                        <mat-icon>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>{{\n                      widgetInstance.hint?.text\n                    }}</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\n                    class=\"label\"\n                    [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                    >\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\n                    matSuffix\n                    align=\"end\"\n                    >{{\n                    widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n                    }}</mat-hint\n                    >\n                  }\n                </mat-form-field>\n                @if (\n                  !widgetInstance.hint || widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\n                  ) {\n                  <mat-hint\n                    >{{ widgetInstance.hint?.text }}</mat-hint\n                    >\n                  }\n                </div>\n              }\n              @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\n                <div\n                  [attr.data-testid]=\"widgetInstance.key\"\n                  class=\"widgetContainer\"\n                  >\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>{{\n                          widgetInstance.hint?.text\n                        }}</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\n                  [attr.data-testid]=\"widgetInstance.key\"\n                  class=\"widgetContainer\"\n                  >\n                  @if (widgetInstance.showLabel) {\n                    <div class=\"labelContainer\">\n                      <h4\n                        class=\"{{ labelColor() }} smart-form-widget-label {{ widgetInstance.cssLabelClass }}\"\n                        [ngClass]=\"getLabelNgClass()\"\n                        [ngStyle]=\"getLabelStyle()\"\n                        >\n                        {{ getWidgetLabel(widgetInstance) }}\n                      </h4>\n                      @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                        <mat-hint>{{\n                          widgetInstance.hint?.text\n                        }}</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\n                          class=\"checkbox-item-container\"\n                          >\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 {{ widgetInstance.cssLabelClass }}\"\n                        [ngClass]=\"getLabelNgClass()\"\n                        [ngStyle]=\"getLabelStyle()\"\n                        >\n                        {{ getWidgetLabel(widgetInstance) }}\n                      </h4>\n                      @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                        <mat-hint>{{\n                          widgetInstance.hint?.text\n                        }}</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\n                  class=\"datePicker widgetContainer\"\n                  >\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>{{\n                          widgetInstance.hint?.text\n                        }}</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\n                        class=\"label\"\n                        [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                        >\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>{{\n                        widgetInstance.hint?.text\n                      }}</mat-hint>\n                    }\n                  </div>\n                }\n                <lib-smart-month-picker\n                  [attr.data-testid]=\"widgetInstance.key\"\n                  [widgetInstance]=\"widgetInstance\"\n                  (valueChange)=\"handleYearMonthPicked($event)\"\n                ></lib-smart-month-picker>\n              </div>\n            }\n            @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\n              <div\n                class=\"widgetContainer\"\n                >\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>{{\n                        widgetInstance.hint?.text\n                      }}</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\n                        class=\"label\"\n                        [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                        >\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>{{\n                        widgetInstance.hint?.text\n                      }}</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\n                      class=\"label\"\n                      [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                      >\n                      {{ getWidgetLabel(widgetInstance) }}\n                    </mat-label>\n                  }\n                  <mat-select\n                    [formControlName]=\"widgetInstance.key\"\n                    [attr.data-testid]=\"widgetInstance.key\"\n                    (selectionChange)=\"onValueChange?.next($event.value)\"\n                    (closed)=\"handleBlurEvent(widgetInstance)\"\n                    [disabled]=\"widgetInstance.isDisabled!\"\n          [compareWith]=\"\n            widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\n          \"\n                    placeholder=\"{{ widgetInstance.placeholder ? widgetInstance.placeholder : '' }}\"\n                    >\n                    @for (option of widgetInstance.valueList; track option) {\n                      <div>\n                        @if (option.type === getType().ITEM_GROUP) {\n                          <mat-optgroup\n                            [label]=\"option.label\"\n                            [disabled]=\"option.isDisabled\"\n                            >\n                            @for (innerOption of option.valueList; track innerOption) {\n                              <mat-option\n                                [value]=\"innerOption.value\"\n                                [disabled]=\"innerOption.isDisabled\"\n                                >\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\n                            [value]=\"option.value\"\n                            [disabled]=\"option.isDisabled\"\n                            >\n                            @if (option.icon) {\n                              <smart-icon\n                                [icon]=\"option.icon\"\n                                [color]=\"option.iconColor\"\n                                ></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 (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\n                          >{{ widgetInstance.hint?.text }}</mat-hint\n                          >\n                        }\n                      </div>\n                    }\n                    @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\n                      <div\n                        class=\"widgetContainer\"\n                        >\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>{{\n                                widgetInstance.hint?.text\n                              }}</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\n                              class=\"label\"\n                              [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                              >\n                              {{ getWidgetLabel(widgetInstance) }}\n                            </mat-label>\n                          }\n                          <mat-select\n                            [formControlName]=\"widgetInstance.key\"\n                            [attr.data-testid]=\"widgetInstance.key\"\n                            multiple\n                            (selectionChange)=\"onValueChange?.next($event.value)\"\n                            (closed)=\"handleBlurEvent(widgetInstance)\"\n                            [disabled]=\"widgetInstance.isDisabled!\"\n          [compareWith]=\"\n            widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\n          \"\n                            placeholder=\"{{ widgetInstance.placeholder ? widgetInstance.placeholder : '' }}\"\n                            >\n                            @for (option of widgetInstance.valueList; track option) {\n                              <div>\n                                @if (option.type === getType().ITEM_GROUP) {\n                                  <mat-optgroup\n                                    [label]=\"option.label\"\n                                    [disabled]=\"option.isDisabled\"\n                                    >\n                                    @for (innerOption of option.valueList; track innerOption) {\n                                      <mat-option\n                                        [value]=\"innerOption.value\"\n                                        [disabled]=\"innerOption.isDisabled\"\n                                        >\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\n                                          [value]=\"option.value\"\n                                          [disabled]=\"option.isDisabled\"\n                                          >\n                                          @if (option.icon) {\n                                            <smart-icon\n                                              [icon]=\"option.icon\"\n                                              [color]=\"option.iconColor\"\n                                              ></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\n                                        >{{ widgetInstance.hint?.text }}</mat-hint\n                                        >\n                                      }\n                                    </div>\n                                  }\n                                  @if (widgetInstance.type === smartFormWidgetType.LABEL) {\n                                    <div\n                                      class=\"label widgetContainer\"\n                                      [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\n                                      >\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>{{\n                                              widgetInstance.hint?.text\n                                            }}</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\n                                            class=\"label\"\n                                            [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                                            >\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>{{\n                                              widgetInstance.hint?.text\n                                            }}</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 class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\" [ngClass]=\"getNgClass()\">\n                                          @for (item of indicatorItems; track item; let i = $index) {\n                                            <div\n                                              class=\"indicatorItem\"\n                                              [ngClass]=\"getIndicatorItemClass(i)\"\n                                            ></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                                      >\n                                    </div>\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\n                                          class=\"labelContainer {{ labelColor() }}\"\n                                          >\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>{{\n                                            widgetInstance.hint?.text\n                                          }}</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]=\"widgetInstance.isDisabled ? emptyQuillToolbar : widgetInstance.quillModules\"\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\n                                            >{{ widgetInstance.hint?.text }}</mat-hint\n                                            >\n                                          }\n                                          @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n                                            <mat-hint\n                                              matSuffix\n                                              align=\"end\"\n                                              class=\"rich-text-editor-leeway-counter\"\n                                              >{{ getRichTextEditorLengthLeeway() }}</mat-hint\n                                              >\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>{{\n                                                widgetInstance.hint?.text\n                                              }}</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>{{\n                                                widgetInstance.hint?.text\n                                              }}</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>{{\n                                                widgetInstance.hint?.text\n                                              }}</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 || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n                                            ) {\n                                            <mat-hint\n                                              >{{ widgetInstance.hint?.text }}</mat-hint\n                                              >\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}.textFieldButtons{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.clearButton .mat-mdc-raised-button,.clearButton button{background-color:unset!important;border:unset;color:#6b7280!important;box-shadow:unset;font-size:1rem!important}.clearButton .mat-icon.mat-primary{color:#6b7280!important}.clearButton .mat-mdc-raised-button:hover,.clearButton button:hover{color:#6b7280cc!important;background-color:unset;border:unset;box-shadow:unset;font-size:1rem!important}.mat-mdc-form-field-infix{display:flex;flex-direction:row}textarea:not(:placeholder-shown)~label{top:-.75em!important;font-size:12px!important}.disabledEditor *{-webkit-user-modify:read-only;-moz-user-modify:read-only;user-modify:read-only}.sb4-textarea{--sb4-textarea-line-height: 20px;line-height:var(--sb4-textarea-line-height);overflow-y:auto!important}.widgetContainer .imageIcon{max-width:unset!important;height:unset!important}.material .sb4-textarea{resize:vertical!important}.material .smart-form-widget-label{font-weight:700}.material .mat-mdc-form-field-subscript-wrapper{display:none}.label-right{display:flex;gap:.5rem;flex-direction:row-reverse}.label-left{display:flex;gap:.5rem;flex-direction:row}.label-top{display:flex;gap:.5rem;flex-direction:column}.label-bottom{display:flex;gap:.5rem;flex-direction:column-reverse}.smartDiv{width:100%}.clickable{cursor:pointer}\n/*!\n * Quill Editor v2.0.3\n * https://quilljs.com\n * Copyright (c) 2017-2024, Slab\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */\n"] }]
+            args: [{ selector: 'smartformwidget', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [FormsModule, ReactiveFormsModule, NgClass, TrackCapsDirective, NgStyle, MatHint, MatFormField, MatLabel, MatInput, NgxMaskDirective, MatAutocompleteTrigger, MatIconButton, MatSuffix, MatIcon, MatAutocomplete, MatOption, MatPrefix, SmartIconComponent, UiActionButtonComponent, UiActionToolbarComponent, MatButton, MatChipGrid, MatChipRow, MatChipRemove, MatChipInput, MatChip, CdkTextareaAutosize, MatCheckbox, MatRadioGroup, MatRadioButton, MatDatepickerToggle, MatDatepicker, MatDatepickerInput, SmartMonthPickerComponent, MatSelect, MatOptgroup, MatSlideToggle, SmartVoiceRecorderComponent, SmartFileEditorComponent, SmartMultiFileEditorComponent, SmartHtmlWidgetComponent, QuillEditorComponent, SortableWidgetComponent, YouTubePlayer, AsyncPipe, HighlightPipe], template: "<div class=\"container material\" [formGroup]=\"form()\">\n  @if (widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible) {\n    <div\n      [ngClass]=\"widgetInstance.cssClass ?? ''\"\n      class=\"container\"\n      >\n      @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\n        <div\n          [attr.data-testid]=\"widgetInstance.key\"\n          [ngClass]=\"getDirection()\"\n          >\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\n          (capsLock)=\"capsOn = $event\"\n          class=\"widgetContainer\"\n          >\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>{{\n                  widgetInstance.hint?.text\n                }}</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\n                class=\"label\"\n                [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                >\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\n                mat-icon-button\n                matSuffix\n                (click)=\"togglePasswordVisibility($event)\"\n                >\n                <mat-icon>{{ hidePassword ? 'visibility_off' : 'visibility' }}</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 && 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 && widgetInstance.textFieldButton.icon\n                  ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.textFieldButton.icon\"\n                    >\n                  </smart-icon>\n                }\n              </button>\n            }\n            @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n              <mat-hint\n                matSuffix\n                align=\"end\"\n                >{{\n                widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n                }}</mat-hint\n                >\n              }\n            </mat-form-field>\n            @if (\n              !widgetInstance?.hint ||\n              widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n              ) {\n              <mat-hint\n                >{{ widgetInstance.hint?.text }}</mat-hint\n                >\n              }\n            </div>\n          }\n          @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\n            <div\n              class=\"widgetContainer\"\n              >\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>{{\n                      widgetInstance.hint?.text\n                    }}</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\n                    class=\"label\"\n                    [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                    >\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>\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                @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 && widgetInstance.textFieldButton.icon\n                      ) {\n                      <smart-icon\n                        [icon]=\"widgetInstance.textFieldButton.icon\"\n                        >\n                      </smart-icon>\n                    }\n                    {{ widgetInstance.textFieldButton.label }}\n                    @if (\n                      widgetInstance.textFieldButton.iconPosition ===\n                      smartFormTextFieldButtonIconPosition().POST && widgetInstance.textFieldButton.icon\n                      ) {\n                      <smart-icon\n                        [icon]=\"widgetInstance.textFieldButton.icon\"\n                        >\n                      </smart-icon>\n                    }\n                  </button>\n                }\n              </mat-form-field>\n            </div>\n          }\n          @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\n            <div\n              class=\"widgetContainer\"\n              >\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>{{\n                      widgetInstance.hint?.text\n                    }}</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\n                    class=\"label\"\n                    [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                    >\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\n                      [disabled]=\"widgetInstance.isDisabled\"\n                      (removed)=\"remove(value)\"\n                      >\n                      {{ value }}\n                      <button matChipRemove>\n                        <mat-icon>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\n                        [disabled]=\"widgetInstance.isDisabled\"\n                        [value]=\"item.value\"\n                        >\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\n              class=\"widgetContainer\"\n              >\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>{{\n                      widgetInstance.hint?.text\n                    }}</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\n                    class=\"label\"\n                    [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                    >\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\n                      [disabled]=\"widgetInstance.isDisabled\"\n                      (removed)=\"remove(value)\"\n                      >\n                      {{ getChipsValue(value) }}\n                      <button matChipRemove>\n                        <mat-icon>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>{{\n                      widgetInstance.hint?.text\n                    }}</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\n                    class=\"label\"\n                    [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                    >\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\n                    matSuffix\n                    align=\"end\"\n                    >{{\n                    widgetInstance.maxLength - form().controls[widgetInstance.key].value.length\n                    }}</mat-hint\n                    >\n                  }\n                </mat-form-field>\n                @if (\n                  !widgetInstance.hint || widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\n                  ) {\n                  <mat-hint\n                    >{{ widgetInstance.hint?.text }}</mat-hint\n                    >\n                  }\n                </div>\n              }\n              @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\n                <div\n                  [attr.data-testid]=\"widgetInstance.key\"\n                  class=\"widgetContainer\"\n                  >\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>{{\n                          widgetInstance.hint?.text\n                        }}</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\n                  [attr.data-testid]=\"widgetInstance.key\"\n                  class=\"widgetContainer\"\n                  >\n                  @if (widgetInstance.showLabel) {\n                    <div class=\"labelContainer\">\n                      <h4\n                        class=\"{{ labelColor() }} smart-form-widget-label {{ widgetInstance.cssLabelClass }}\"\n                        [ngClass]=\"getLabelNgClass()\"\n                        [ngStyle]=\"getLabelStyle()\"\n                        >\n                        {{ getWidgetLabel(widgetInstance) }}\n                      </h4>\n                      @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                        <mat-hint>{{\n                          widgetInstance.hint?.text\n                        }}</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\n                          class=\"checkbox-item-container\"\n                          >\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 {{ widgetInstance.cssLabelClass }}\"\n                        [ngClass]=\"getLabelNgClass()\"\n                        [ngStyle]=\"getLabelStyle()\"\n                        >\n                        {{ getWidgetLabel(widgetInstance) }}\n                      </h4>\n                      @if (widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL) {\n                        <mat-hint>{{\n                          widgetInstance.hint?.text\n                        }}</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\n                  class=\"datePicker widgetContainer\"\n                  >\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>{{\n                          widgetInstance.hint?.text\n                        }}</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\n                        class=\"label\"\n                        [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                        >\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>{{\n                        widgetInstance.hint?.text\n                      }}</mat-hint>\n                    }\n                  </div>\n                }\n                <lib-smart-month-picker\n                  [attr.data-testid]=\"widgetInstance.key\"\n                  [widgetInstance]=\"widgetInstance\"\n                  (valueChange)=\"handleYearMonthPicked($event)\"\n                ></lib-smart-month-picker>\n              </div>\n            }\n            @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\n              <div\n                class=\"widgetContainer\"\n                >\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>{{\n                        widgetInstance.hint?.text\n                      }}</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\n                        class=\"label\"\n                        [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                        >\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>{{\n                        widgetInstance.hint?.text\n                      }}</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\n                      class=\"label\"\n                      [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                      >\n                      {{ getWidgetLabel(widgetInstance) }}\n                    </mat-label>\n                  }\n                  <mat-select\n                    [formControlName]=\"widgetInstance.key\"\n                    [attr.data-testid]=\"widgetInstance.key\"\n                    (selectionChange)=\"onValueChange?.next($event.value)\"\n                    (closed)=\"handleBlurEvent(widgetInstance)\"\n                    [disabled]=\"widgetInstance.isDisabled!\"\n          [compareWith]=\"\n            widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\n          \"\n                    placeholder=\"{{ widgetInstance.placeholder ? widgetInstance.placeholder : '' }}\"\n                    >\n                    @for (option of widgetInstance.valueList; track option) {\n                      <div>\n                        @if (option.type === getType().ITEM_GROUP) {\n                          <mat-optgroup\n                            [label]=\"option.label\"\n                            [disabled]=\"option.isDisabled\"\n                            >\n                            @for (innerOption of option.valueList; track innerOption) {\n                              <mat-option\n                                [value]=\"innerOption.value\"\n                                [disabled]=\"innerOption.isDisabled\"\n                                >\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\n                            [value]=\"option.value\"\n                            [disabled]=\"option.isDisabled\"\n                            >\n                            @if (option.icon) {\n                              <smart-icon\n                                [icon]=\"option.icon\"\n                                [color]=\"option.iconColor\"\n                                ></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 (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\n                          >{{ widgetInstance.hint?.text }}</mat-hint\n                          >\n                        }\n                      </div>\n                    }\n                    @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\n                      <div\n                        class=\"widgetContainer\"\n                        >\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>{{\n                                widgetInstance.hint?.text\n                              }}</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\n                              class=\"label\"\n                              [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                              >\n                              {{ getWidgetLabel(widgetInstance) }}\n                            </mat-label>\n                          }\n                          <mat-select\n                            [formControlName]=\"widgetInstance.key\"\n                            [attr.data-testid]=\"widgetInstance.key\"\n                            multiple\n                            (selectionChange)=\"onValueChange?.next($event.value)\"\n                            (closed)=\"handleBlurEvent(widgetInstance)\"\n                            [disabled]=\"widgetInstance.isDisabled!\"\n          [compareWith]=\"\n            widgetInstance.compareWith == null ? compareItems : widgetInstance.compareWith\n          \"\n                            placeholder=\"{{ widgetInstance.placeholder ? widgetInstance.placeholder : '' }}\"\n                            >\n                            @for (option of widgetInstance.valueList; track option) {\n                              <div>\n                                @if (option.type === getType().ITEM_GROUP) {\n                                  <mat-optgroup\n                                    [label]=\"option.label\"\n                                    [disabled]=\"option.isDisabled\"\n                                    >\n                                    @for (innerOption of option.valueList; track innerOption) {\n                                      <mat-option\n                                        [value]=\"innerOption.value\"\n                                        [disabled]=\"innerOption.isDisabled\"\n                                        >\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\n                                          [value]=\"option.value\"\n                                          [disabled]=\"option.isDisabled\"\n                                          >\n                                          @if (option.icon) {\n                                            <smart-icon\n                                              [icon]=\"option.icon\"\n                                              [color]=\"option.iconColor\"\n                                              ></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\n                                        >{{ widgetInstance.hint?.text }}</mat-hint\n                                        >\n                                      }\n                                    </div>\n                                  }\n                                  @if (widgetInstance.type === smartFormWidgetType.LABEL) {\n                                    <div\n                                      class=\"label widgetContainer\"\n                                      [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\n                                      >\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>{{\n                                              widgetInstance.hint?.text\n                                            }}</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\n                                            class=\"label\"\n                                            [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n                                            >\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>{{\n                                              widgetInstance.hint?.text\n                                            }}</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 class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\" [ngClass]=\"getNgClass()\">\n                                          @for (item of indicatorItems; track item; let i = $index) {\n                                            <div\n                                              class=\"indicatorItem\"\n                                              [ngClass]=\"getIndicatorItemClass(i)\"\n                                            ></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                                      >\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\n                                          class=\"labelContainer {{ labelColor() }}\"\n                                          >\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>{{\n                                            widgetInstance.hint?.text\n                                          }}</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]=\"widgetInstance.isDisabled ? emptyQuillToolbar : widgetInstance.quillModules\"\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\n                                            >{{ widgetInstance.hint?.text }}</mat-hint\n                                            >\n                                          }\n                                          @if (widgetInstance.showCharacterLimitSuffix && widgetInstance.maxLength) {\n                                            <mat-hint\n                                              matSuffix\n                                              align=\"end\"\n                                              class=\"rich-text-editor-leeway-counter\"\n                                              >{{ getRichTextEditorLengthLeeway() }}</mat-hint\n                                              >\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>{{\n                                                widgetInstance.hint?.text\n                                              }}</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>{{\n                                                widgetInstance.hint?.text\n                                              }}</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>{{\n                                                widgetInstance.hint?.text\n                                              }}</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 || widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n                                            ) {\n                                            <mat-hint\n                                              >{{ widgetInstance.hint?.text }}</mat-hint\n                                              >\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}.textFieldButtons{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.clearButton .mat-mdc-raised-button,.clearButton button{background-color:unset!important;border:unset;color:#6b7280!important;box-shadow:unset;font-size:1rem!important}.clearButton .mat-icon.mat-primary{color:#6b7280!important}.clearButton .mat-mdc-raised-button:hover,.clearButton button:hover{color:#6b7280cc!important;background-color:unset;border:unset;box-shadow:unset;font-size:1rem!important}.mat-mdc-form-field-infix{display:flex;flex-direction:row}textarea:not(:placeholder-shown)~label{top:-.75em!important;font-size:12px!important}.disabledEditor *{-webkit-user-modify:read-only;-moz-user-modify:read-only;user-modify:read-only}.sb4-textarea{--sb4-textarea-line-height: 20px;line-height:var(--sb4-textarea-line-height);overflow-y:auto!important}.widgetContainer .imageIcon{max-width:unset!important;height:unset!important}.material .sb4-textarea{resize:vertical!important}.material .smart-form-widget-label{font-weight:700}.material .mat-mdc-form-field-subscript-wrapper{display:none}.label-right{display:flex;gap:.5rem;flex-direction:row-reverse}.label-left{display:flex;gap:.5rem;flex-direction:row}.label-top{display:flex;gap:.5rem;flex-direction:column}.label-bottom{display:flex;gap:.5rem;flex-direction:column-reverse}.smartDiv{width:100%}.clickable{cursor:pointer}\n/*!\n * Quill Editor v2.0.3\n * https://quilljs.com\n * Copyright (c) 2017-2024, Slab\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */\n"] }]
         }], ctorParameters: () => [], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], widgetInstance: [{
                 type: Input
             }], onBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "onBlur", required: false }] }], onValueChange: [{
@@ -10989,6 +11775,7 @@ class SmartformComponent {
                         widget.type !== SmartFormWidgetType.RECORDING_UPLOADER &&
                         widget.type !== SmartFormWidgetType.IMAGE &&
                         widget.type !== SmartFormWidgetType.DIV &&
+                        widget.type !== SmartFormWidgetType.HTML &&
                         widget.type !== SmartFormWidgetType.SVG &&
                         widget.type !== SmartFormWidgetType.DIVIDER &&
                         widget.type !== SmartFormWidgetType.BUTTON &&
@@ -11369,8 +12156,19 @@ class SmartObjectUtility {
 
 class SmartGridToolbarActionsUtil {
     static { this.defaultActionToolbarId = 'toolbarDefaultActionColumn'; }
-    static showMenu(row, orderedColumns) {
-        if (!row.columnActions && row.actions && row.actions.length > 0) {
+    /** The toolbar address of a trigger-only action (`UiActions.NO_TOOLBAR` on the backend). */
+    static { this.noToolbar = '_none'; }
+    /**
+     * The row actions a row menu may offer. A trigger-only action never, and with column templates
+     * in the table no action addressed to a toolbar either: that one belongs to a toolbar slot of
+     * a template. Without templates an addressed action stays in the menu, as it always did.
+     */
+    static menuCandidates(row, columnTemplates = false) {
+        return (row.actions ?? []).filter((action) => action.toolbar !== this.noToolbar && !(columnTemplates && action.toolbar));
+    }
+    static showMenu(row, orderedColumns, columnTemplates = false) {
+        const actions = this.menuCandidates(row, columnTemplates);
+        if (!row.columnActions && actions.length > 0) {
             return true;
         }
         var _columnsToFilter = [
@@ -11383,9 +12181,7 @@ class SmartGridToolbarActionsUtil {
             acc[key] = row.columnActions[key];
             return acc;
         }, {});
-        return (row.actions &&
-            row.actions.length > 0 &&
-            Object.values(filteredActionColumns).flat().length !== row.actions.length);
+        return (actions.length > 0 && Object.values(filteredActionColumns).flat().length !== actions.length);
     }
     static showToolbar(row, columnName) {
         return !!row.actions && row.actions.length > 0 && !!row.columnActions?.[columnName];
@@ -11407,7 +12203,7 @@ class SmartGridToolbarActionsUtil {
         return cellToActionMap;
     }
     // ##### MENU ACTIONS
-    static calculateMenuActions(row, orderedColumns) {
+    static calculateMenuActions(row, orderedColumns, columnTemplates = false) {
         var _columnsToFilter = [
             ...orderedColumns.map((col) => col.startsWith('data.') ? col.substring('data.'.length) : col),
             this.defaultActionToolbarId,
@@ -11416,10 +12212,10 @@ class SmartGridToolbarActionsUtil {
             .filter((key) => _columnsToFilter.includes(key))
             .map((key) => row.columnActions[key])
             .flat();
-        return row.actions?.filter((action) => !columnCodes.includes(action.code)) ?? [];
+        return this.menuCandidates(row, columnTemplates).filter((action) => !columnCodes.includes(action.code));
     }
-    static calculateMenuActionModels(row, orderedColumns) {
-        return this.calculateMenuActions(row, orderedColumns).map((uiAction) => this.toActionModel(uiAction));
+    static calculateMenuActionModels(row, orderedColumns, columnTemplates = false) {
+        return this.calculateMenuActions(row, orderedColumns, columnTemplates).map((uiAction) => this.toActionModel(uiAction));
     }
     static getActionModelsFromMap(cellToActionMap, row, header) {
         let key = row.id + header;
@@ -11436,6 +12232,26 @@ class SmartGridToolbarActionsUtil {
     }
 }
 
+/**
+ * Grid api
+ * The grid api is resposible for the grid components that shows a list of item.
+ *
+ * The version of the OpenAPI document: 1.0.0
+ * Contact: info@it4all.hu
+ *
+ * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
+ * https://openapi-generator.tech
+ * Do not edit the class manually.
+ */
+/**
+ * The rendering of a table cell value. A missing value behaves as html, the rendering tables always had: sanitized innerHTML, no hydration. Text escapes the value; recommended for data that has to be escaped. Sorting runs on the server on the raw value, so an html column needs a sortOrderPropertyName.
+ */
+var GridColumnContentType;
+(function (GridColumnContentType) {
+    GridColumnContentType["TEXT"] = "text";
+    GridColumnContentType["HTML"] = "html";
+})(GridColumnContentType || (GridColumnContentType = {}));
+
 /** Id of the detail row's collapse animation, so a second leave call can find the running one. */
 const DETAIL_COLLAPSE = 'smart-table-detail-collapse';
 class Table {
@@ -11890,7 +12706,7 @@ class Table {
     }
     showMenuButton(element, button) {
         let headers = this.smartTable.tableHeaders.map((header) => this.originalProperty(header));
-        let showMenu = SmartGridToolbarActionsUtil.showMenu(element, headers);
+        let showMenu = SmartGridToolbarActionsUtil.showMenu(element, headers, this.hasColumnTemplates);
         if (!showMenu) {
             return false;
         }
@@ -11911,6 +12727,18 @@ class Table {
     getValue(element, header) {
         return SmartObjectUtility.getValueByPath(element, header);
     }
+    /** The column template of the i-th column; it takes the place of every value rendering. */
+    columnTemplate(i) {
+        return this.smartTable.customSmartTableHeaders?.[i]?.htmlProperties;
+    }
+    /** The i-th column renders its value escaped; any other content type is sanitized html. */
+    isTextContent(i) {
+        return this.smartTable.customSmartTableHeaders?.[i]?.contentType === GridColumnContentType.TEXT;
+    }
+    /** With column templates in the table, an action addressed to a toolbar stays out of the row menu. */
+    get hasColumnTemplates() {
+        return !!this.smartTable.customSmartTableHeaders?.some((header) => header.htmlProperties);
+    }
     showButton(button, element) {
         if (button.showButtonIf) {
             return button.showButtonIf(element);
@@ -11996,7 +12824,7 @@ class Table {
         return SmartGridToolbarActionsUtil.showToolbar(row, this.originalProperty(columnName));
     }
     getRowMenuActionModel(element) {
-        const leftoverActions = SmartGridToolbarActionsUtil.calculateMenuActionModels(element, this.smartTable.tableHeaders);
+        const leftoverActions = SmartGridToolbarActionsUtil.calculateMenuActionModels(element, this.smartTable.tableHeaders, this.hasColumnTemplates);
         const menuUiAction = {
             code: 'rowMenu',
             descriptor: {
@@ -12020,7 +12848,7 @@ class Table {
         return arr;
     }
     shouldShowMenuButton(row) {
-        return SmartGridToolbarActionsUtil.showMenu(row, this.smartTable.tableHeaders);
+        return SmartGridToolbarActionsUtil.showMenu(row, this.smartTable.tableHeaders, this.hasColumnTemplates);
     }
     initializeExpandedRows(rows) {
         if (this.treeInitialized) {
@@ -12217,22 +13045,82 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             args: [{ name: 'smartTime' }]
         }] });
 
+/**
+ * The entries a row offers to what renders inside it — a card's row layout, a cell's column
+ * template — through their `SmartActionHost`. Each action carries the row as its model and is
+ * scoped to the grid and the row, because nothing there binds a scope on the toolbars.
+ */
+function rowActionModels(row, gridIdentifier, serviceToUse) {
+    return (row.actions ?? []).map((uiAction) => ({
+        serviceToUse,
+        uiAction: { ...uiAction, params: { ...uiAction.params, model: row } },
+        widgetId: gridIdentifier,
+        nodeId: row.id,
+    }));
+}
+
+/**
+ * A table cell rendered from a column template: server-sent HTML whose client placeholders are
+ * resolved against the row's data, the template's `root` applied. The toolbar slots and action
+ * triggers in it offer the row's actions, the way a card's row layout does.
+ *
+ * The cell provides the action host itself rather than the row: the table creates its cells
+ * from templates declared in the table, so they inject from there, never from the row element.
+ * See HTML-WIDGET.md.
+ */
+class SmartHtmlCellComponent {
+    constructor() {
+        this.actionHost = inject(SmartActionHost);
+        this.smartComponent = injectSmartComponent();
+        this.renderer = injectSmartHtmlRenderer(inject(ElementRef).nativeElement);
+    }
+    ngOnChanges() {
+        this.actionHost.actionModels.set(rowActionModels(this.row, this.gridIdentifier));
+        const { html, root, css } = this.template;
+        const scope = rootScope(this.row.data, root);
+        if (scope === undefined && root && this.warnedRoot !== root) {
+            this.warnedRoot = root;
+            console.warn(`smart-html: root '${root}' does not name an object, every placeholder is left empty` +
+                ` — in ${html?.substring(0, 80)}`);
+        }
+        this.renderer.useCss(css);
+        this.renderer.render(html ?? '', {
+            data: scope,
+            valueSets: this.smartComponent?.model?.valueSets,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartHtmlCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: SmartHtmlCellComponent, isStandalone: true, selector: "smart-html-cell", inputs: { row: "row", template: "template", gridIdentifier: "gridIdentifier" }, providers: [SmartActionHost], usesOnChanges: true, ngImport: i0, template: '', isInline: true, styles: ["smart-html-cell{display:block}smart-html-cell [data-sb4-action]{cursor:pointer}smart-html-cell [data-sb4-action].sb4-action-inert{cursor:inherit}smart-html-cell [data-sb4-action].sb4-action-disabled{cursor:default;opacity:.5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartHtmlCellComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-html-cell', template: '', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [SmartActionHost], styles: ["smart-html-cell{display:block}smart-html-cell [data-sb4-action]{cursor:pointer}smart-html-cell [data-sb4-action].sb4-action-inert{cursor:inherit}smart-html-cell [data-sb4-action].sb4-action-disabled{cursor:default;opacity:.5}\n"] }]
+        }], propDecorators: { row: [{
+                type: Input,
+                args: [{ required: true }]
+            }], template: [{
+                type: Input,
+                args: [{ required: true }]
+            }], gridIdentifier: [{
+                type: Input
+            }] } });
+
 class MaterialTableComponent extends Table {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MaterialTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MaterialTableComponent, isStandalone: true, selector: "lib-material-table", usesInheritance: true, ngImport: i0, template: "<table #myTable mat-table [dataSource]=\"isTreeGrid ? visibleRows : smartTable.tableRows\" class=\"full-width\"\n  multiTemplateDataRows>\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n  <caption class=\"captionTitle\">\n    {{ smartTable.title }}\n  </caption>\n  }\n\n  @for (header of smartTable.tableHeaders; track header; let i = $index) {\n\n  <ng-container matColumnDef=\"{{ header }}\">\n    <!-- my_menu is the implicit action column present on all tables: -->\n    @if ('my_menu' === header) {\n    <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n\n      <!-- ==================== TREE ACTIONS ==================== -->\n      @if ( isTreeGrid) {\n      <div class=\"tree-grid-actions\">\n\n        <ui-action-button (actionClick)=\"expandOneLevel()\" [descriptor]=\"expandTreeGridLevel\">\n        </ui-action-button>\n\n\n        <ui-action-button (actionClick)=\"collapseOneLevel()\" [descriptor]=\"closeTreeGridLevel\">\n        </ui-action-button>\n      </div>\n      }\n      <!-- ==================== TREE ACTIONS ==================== -->\n\n      <smart-ui-action-toolbar [id]=\"headerToolbarId\"></smart-ui-action-toolbar>\n    </th>\n    } @else {\n    <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n      @if (\n      header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n      ) {\n      <div></div>\n      }\n      @if (header === 'select') {\n      <div>\n        @if (smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n        <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n          [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n          [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\n        </mat-checkbox>\n        }\n        @if (!smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n        <div>\n          {{ smartTable.customTableHeaders[i] }}\n        </div>\n        }\n      </div>\n      }\n      @if (\n      header !== 'icon' &&\n      header !== 'img' &&\n      header !== 'options' &&\n      header !== 'button' &&\n      header !== 'select' &&\n      header !== 'expand' &&\n      header !== 'actions'\n      ) {\n      <div>\n        @if (smartTable.sortable) {\n        @if (smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])) {\n        <button (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\" mat-button\n          class=\"sortableHeaderButton\">\n          {{ smartTable.customTableHeaders[i] }}\n          @if (getSortIcon(header)) {\n          <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortIcon(header)!\"></smart-icon>\n          }\n          @if (hasSortNumIcon(header)) {\n          <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortNumIcon(header)\"></smart-icon>\n          }\n        </button>\n        }\n        } @else {\n        {{ smartTable.customTableHeaders[i] }}\n        }\n      </div>\n      }\n    </th>\n    }\n\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n      <div class=\"mat-cell-content\">\n\n\n        <!-- ==================== TREE TOGGLE ==================== -->\n        @if (isTreeGrid && i === 0) {\n        <div class=\"tree-grid-first-column\" [style.padding-left.px]=\"(element.level ?? 0) * 24\">\n          @if (hasChildren(element)) {\n          <button mat-icon-button type=\"button\" (click)=\"toggleRowExpansion(element, $event)\">\n            <smart-icon [icon]=\"\n            isRowExpanded(element)\n              ? 'keyboard_arrow_down'\n              : 'keyboard_arrow_right'\n          \"></smart-icon>\n          </button>\n          } @else {\n          <span class=\"tree-grid-spacer\"></span>\n          }\n\n        </div>\n        }\n        <!-- ==================== TREE TOGGLE ==================== -->\n\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n        !isDisabled(element)\n        ) {\n        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \" [disabled]=\"isDisabled(element)\" [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \" [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \">\n        </mat-checkbox>\n        }\n        @if (\n        smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n        ) {\n        <div>\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n          <div>\n            {{\n            getValue(element, header)\n            | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n            }}\n          </div>\n          }\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n          <div>\n            {{\n            getValue(element, header)\n            | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n            }}\n          </div>\n          }\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n          <div>\n            {{\n            getValue(element, header)\n            | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n            }}\n          </div>\n          }\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n          <div>\n            <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n          </div>\n          }\n          @if (\n          smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n          smartTable.customSmartTableHeaders[i].properties?.icons?.length\n          ) {\n          <div>\n            <smart-icon [smartTooltip]=\"getToolTip(element, i)\" [icon]=\"getIcon(getValue(element, header), i)!\"\n              [color]=\"getColor(getValue(element, header), i)\">\n            </smart-icon>\n          </div>\n          }\n        </div>\n        }\n        <div class=\"smart-table-icon-container\">\n          @for (ir of getImageResourceIcons(element, header); track ir) {\n          <div>\n            <smart-icon [imageResource]=\"ir\"> </smart-icon>\n          </div>\n          }\n        </div>\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n        <div class=\"smart-table-buttons-col\">\n          @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n          <div>\n            @if (showButton(button, element)) {\n            <div>\n              @switch (button.type) {\n              @case (smartTableButtonType.ICON) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-icon-button color=\"{{ button.color }}\">\n                <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n              </button>\n              }\n              @case (smartTableButtonType.NORMAL) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-button color=\"{{ button.color }}\">\n                @if (button.icon) {\n                <smart-icon [icon]=\"button.icon\"></smart-icon>\n                }\n                {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n              </button>\n              }\n              @case (smartTableButtonType.RAISED) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-raised-button\n                color=\"{{ button.color }}\">\n                @if (button.icon) {\n                <smart-icon [icon]=\"button.icon\"></smart-icon>\n                }\n                {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n              </button>\n              }\n              <!------ MENU ------>\n              @case (smartTableButtonType.MENU) {\n              <div class=\"menu-button\">\n                <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                  [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n                  [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n                <!------ GENERIC HAMBURGER ------>\n                <!------ TOOLBAR ------>\n                @if (shouldShowMenuButton(element)) {\n                <smart-ui-action-toolbar [uiActionModels]=\"getMenuActions(element)\" [widgetId]=\"smartTable.getGridId()\"\n                  [nodeId]=\"element.id\" [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n                }\n              </div>\n              }\n              <!------ MENU ------>\n              }\n            </div>\n            }\n          </div>\n          }\n        </div>\n        }\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n        <div>\n          @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n          <smart-icon [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n            [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n            [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\">\n          </smart-icon>\n          }\n        </div>\n        }\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].translator !== undefined\n        ) {\n        <div>\n          {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n        </div>\n        }\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n        ) {\n        <button mat-icon-button aria-label=\"expand row\" (click)=\"onToggle(element, $event)\">\n          @if (expandedElement !== element) {\n          <smart-icon [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n          }\n          @if (expandedElement === element) {\n          <smart-icon [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n          }\n        </button>\n        }\n        @if (\n        !smartTable.customSmartTableHeaders ||\n        (smartTable.customSmartTableHeaders &&\n        !smartTable.customSmartTableHeaders[i].properties &&\n        !smartTable.customSmartTableHeaders[i].icon &&\n        !smartTable.customSmartTableHeaders[i].buttons &&\n        !smartTable.customSmartTableHeaders[i].translator &&\n        !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n        !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n        ) {\n        <div>\n          @if (header === 'icon') {\n          <smart-icon [icon]=\"getValue(element, header)!\"> </smart-icon>\n          }\n          @if (header === 'img') {\n          <img [src]=\"getValue(element, header)\" alt=\"\" class=\"smarttableImg\" />\n          }\n          <!------ TOOLBAR ------>\n          @if (showCellToolbar(element, header)) {\n          <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, header)\"\n            [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n            [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n          }\n          <!------ TOOLBAR ------>\n          @if (\n          header !== 'icon' &&\n          header !== 'img' &&\n          header !== 'option' &&\n          header !== 'button' &&\n          !isImageResource(element, header)\n          ) {\n          <div [innerHtml]=\"getValue(element, header)\"></div>\n          }\n        </div>\n        }\n\n      </div>\n    </td>\n  </ng-container>\n  }\n\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n  @if (smartTable.expandable) {\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\n      <div class=\"smart-table-detail\" animate.enter=\"smart-table-detail-enter\">\n        <div class=\"smart-table-detail-content\">\n          <ng-template #expandedArea></ng-template>\n        </div>\n      </div>\n    </td>\n  </ng-container>\n  }\n\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\n    <tr mat-row class=\"smart-table-row\" [class.smart-table-row-expanded]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\" [ngStyle]=\"getRowStyles(element)\" (click)=\"handleOnRowClick(element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\" [attr.data-testid]=\"element?.id ?? null\"></tr>\n\n    @if (smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0) {\n    <lib-default-actions-popup #defaultActionMenu [buttons]=\"getDefaultActionsForRow(element)!\"\n      [row]=\"element\"></lib-default-actions-popup>\n    }\n  </ng-container>\n  <!-- Only the expanded row has a detail row; no host style can give a collapsed one a height. -->\n  @if (smartTable.expandable) {\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\" class=\"smart-table-detail-row\"\n    (animate.leave)=\"onDetailRowLeave($event)\"></tr>\n  }\n</table>", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.smart-table-row:not(.smart-table-row-expanded):hover{background:#f5f5f5}tr.smart-table-row:not(.smart-table-row-expanded):active{background:#efefef}tr.smart-table-row-expanded td{border-bottom-width:0}tr.smart-table-detail-row{height:0}.smart-table-detail{display:grid;grid-template-rows:1fr}.smart-table-detail-enter{animation:smart-table-detail-expand 225ms cubic-bezier(.4,0,.2,1)}.smart-table-detail-content{min-height:0;overflow:hidden}@keyframes smart-table-detail-expand{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}.tree-grid-actions,.mat-cell-content{display:flex;flex-direction:row;align-items:center}.mat-column-my_menu,.tree-grid-column{width:0}.tree-grid-cell{display:flex;align-items:center;min-height:48px}.tree-grid-expand-button{flex:0 0 auto}.tree-grid-spacer{display:inline-block;width:40px;flex:0 0 40px}.tree-grid-label{min-width:0}\n"], dependencies: [{ kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { 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: "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: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MaterialTableComponent, isStandalone: true, selector: "lib-material-table", usesInheritance: true, ngImport: i0, template: "<table #myTable mat-table [dataSource]=\"isTreeGrid ? visibleRows : smartTable.tableRows\" class=\"full-width\"\n  multiTemplateDataRows>\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n  <caption class=\"captionTitle\">\n    {{ smartTable.title }}\n  </caption>\n  }\n\n  @for (header of smartTable.tableHeaders; track header; let i = $index) {\n\n  <ng-container matColumnDef=\"{{ header }}\">\n    <!-- my_menu is the implicit action column present on all tables: -->\n    @if ('my_menu' === header) {\n    <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n\n      <!-- ==================== TREE ACTIONS ==================== -->\n      @if ( isTreeGrid) {\n      <div class=\"tree-grid-actions\">\n\n        <ui-action-button (actionClick)=\"expandOneLevel()\" [descriptor]=\"expandTreeGridLevel\">\n        </ui-action-button>\n\n\n        <ui-action-button (actionClick)=\"collapseOneLevel()\" [descriptor]=\"closeTreeGridLevel\">\n        </ui-action-button>\n      </div>\n      }\n      <!-- ==================== TREE ACTIONS ==================== -->\n\n      <smart-ui-action-toolbar [id]=\"headerToolbarId\"></smart-ui-action-toolbar>\n    </th>\n    } @else {\n    <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n      @if (\n      header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n      ) {\n      <div></div>\n      }\n      @if (header === 'select') {\n      <div>\n        @if (smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n        <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n          [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n          [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\n        </mat-checkbox>\n        }\n        @if (!smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n        <div>\n          {{ smartTable.customTableHeaders[i] }}\n        </div>\n        }\n      </div>\n      }\n      @if (\n      header !== 'icon' &&\n      header !== 'img' &&\n      header !== 'options' &&\n      header !== 'button' &&\n      header !== 'select' &&\n      header !== 'expand' &&\n      header !== 'actions'\n      ) {\n      <div>\n        @if (smartTable.sortable) {\n        @if (smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])) {\n        <button (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\" mat-button\n          class=\"sortableHeaderButton\">\n          {{ smartTable.customTableHeaders[i] }}\n          @if (getSortIcon(header)) {\n          <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortIcon(header)!\"></smart-icon>\n          }\n          @if (hasSortNumIcon(header)) {\n          <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortNumIcon(header)\"></smart-icon>\n          }\n        </button>\n        }\n        } @else {\n        {{ smartTable.customTableHeaders[i] }}\n        }\n      </div>\n      }\n    </th>\n    }\n\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n      <div class=\"mat-cell-content\">\n\n\n        <!-- ==================== TREE TOGGLE ==================== -->\n        @if (isTreeGrid && i === 0) {\n        <div class=\"tree-grid-first-column\" [style.padding-left.px]=\"(element.level ?? 0) * 24\">\n          @if (hasChildren(element)) {\n          <button mat-icon-button type=\"button\" (click)=\"toggleRowExpansion(element, $event)\">\n            <smart-icon [icon]=\"\n            isRowExpanded(element)\n              ? 'keyboard_arrow_down'\n              : 'keyboard_arrow_right'\n          \"></smart-icon>\n          </button>\n          } @else {\n          <span class=\"tree-grid-spacer\"></span>\n          }\n\n        </div>\n        }\n        <!-- ==================== TREE TOGGLE ==================== -->\n\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n        !isDisabled(element)\n        ) {\n        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \" [disabled]=\"isDisabled(element)\" [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \" [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \">\n        </mat-checkbox>\n        }\n        @if (\n        smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\n        !columnTemplate(i)\n        ) {\n        <div>\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n          <div>\n            {{\n            getValue(element, header)\n            | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n            }}\n          </div>\n          }\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n          <div>\n            {{\n            getValue(element, header)\n            | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n            }}\n          </div>\n          }\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n          <div>\n            {{\n            getValue(element, header)\n            | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n            }}\n          </div>\n          }\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n          <div>\n            <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n          </div>\n          }\n          @if (\n          smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n          smartTable.customSmartTableHeaders[i].properties?.icons?.length\n          ) {\n          <div>\n            <smart-icon [smartTooltip]=\"getToolTip(element, i)\" [icon]=\"getIcon(getValue(element, header), i)!\"\n              [color]=\"getColor(getValue(element, header), i)\">\n            </smart-icon>\n          </div>\n          }\n        </div>\n        }\n        <div class=\"smart-table-icon-container\">\n          @for (ir of getImageResourceIcons(element, header); track ir) {\n          <div>\n            <smart-icon [imageResource]=\"ir\"> </smart-icon>\n          </div>\n          }\n        </div>\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n        <div class=\"smart-table-buttons-col\">\n          @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n          <div>\n            @if (showButton(button, element)) {\n            <div>\n              @switch (button.type) {\n              @case (smartTableButtonType.ICON) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-icon-button color=\"{{ button.color }}\">\n                <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n              </button>\n              }\n              @case (smartTableButtonType.NORMAL) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-button color=\"{{ button.color }}\">\n                @if (button.icon) {\n                <smart-icon [icon]=\"button.icon\"></smart-icon>\n                }\n                {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n              </button>\n              }\n              @case (smartTableButtonType.RAISED) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-raised-button\n                color=\"{{ button.color }}\">\n                @if (button.icon) {\n                <smart-icon [icon]=\"button.icon\"></smart-icon>\n                }\n                {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n              </button>\n              }\n              <!------ MENU ------>\n              @case (smartTableButtonType.MENU) {\n              <div class=\"menu-button\">\n                <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                  [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n                  [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n                <!------ GENERIC HAMBURGER ------>\n                <!------ TOOLBAR ------>\n                @if (shouldShowMenuButton(element)) {\n                <smart-ui-action-toolbar [uiActionModels]=\"getMenuActions(element)\" [widgetId]=\"smartTable.getGridId()\"\n                  [nodeId]=\"element.id\" [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n                }\n              </div>\n              }\n              <!------ MENU ------>\n              }\n            </div>\n            }\n          </div>\n          }\n        </div>\n        }\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n        <div>\n          @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n          <smart-icon [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n            [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n            [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\">\n          </smart-icon>\n          }\n        </div>\n        }\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].translator !== undefined\n        ) {\n        <div>\n          {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n        </div>\n        }\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n        ) {\n        <button mat-icon-button aria-label=\"expand row\" (click)=\"onToggle(element, $event)\">\n          @if (expandedElement !== element) {\n          <smart-icon [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n          }\n          @if (expandedElement === element) {\n          <smart-icon [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n          }\n        </button>\n        }\n        @if (\n        !smartTable.customSmartTableHeaders ||\n        (smartTable.customSmartTableHeaders &&\n        (!smartTable.customSmartTableHeaders[i].properties || columnTemplate(i)) &&\n        !smartTable.customSmartTableHeaders[i].icon &&\n        !smartTable.customSmartTableHeaders[i].buttons &&\n        !smartTable.customSmartTableHeaders[i].translator &&\n        !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n        !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n        ) {\n        <div>\n          @if (header === 'icon') {\n          <smart-icon [icon]=\"getValue(element, header)!\"> </smart-icon>\n          }\n          @if (header === 'img') {\n          <img [src]=\"getValue(element, header)\" alt=\"\" class=\"smarttableImg\" />\n          }\n          <!------ TOOLBAR ------>\n          @if (showCellToolbar(element, header)) {\n          <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, header)\"\n            [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n            [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n          }\n          <!------ TOOLBAR ------>\n          @if (columnTemplate(i); as template) {\n          <smart-html-cell [row]=\"element\" [template]=\"template\"\n            [gridIdentifier]=\"smartTable.getGridId()\"></smart-html-cell>\n          } @else if (\n          header !== 'icon' &&\n          header !== 'img' &&\n          header !== 'option' &&\n          header !== 'button' &&\n          !isImageResource(element, header)\n          ) {\n          @if (isTextContent(i)) {\n          <div>{{ getValue(element, header) }}</div>\n          } @else {\n          <div [innerHtml]=\"getValue(element, header)\"></div>\n          }\n          }\n        </div>\n        }\n\n      </div>\n    </td>\n  </ng-container>\n  }\n\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n  @if (smartTable.expandable) {\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\n      <div class=\"smart-table-detail\" animate.enter=\"smart-table-detail-enter\">\n        <div class=\"smart-table-detail-content\">\n          <ng-template #expandedArea></ng-template>\n        </div>\n      </div>\n    </td>\n  </ng-container>\n  }\n\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\n    <tr mat-row class=\"smart-table-row\" [class.smart-table-row-expanded]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\" [ngStyle]=\"getRowStyles(element)\" (click)=\"handleOnRowClick(element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\" [attr.data-testid]=\"element?.id ?? null\"></tr>\n\n    @if (smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0) {\n    <lib-default-actions-popup #defaultActionMenu [buttons]=\"getDefaultActionsForRow(element)!\"\n      [row]=\"element\"></lib-default-actions-popup>\n    }\n  </ng-container>\n  <!-- Only the expanded row has a detail row; no host style can give a collapsed one a height. -->\n  @if (smartTable.expandable) {\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\" class=\"smart-table-detail-row\"\n    (animate.leave)=\"onDetailRowLeave($event)\"></tr>\n  }\n</table>", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.smart-table-row:not(.smart-table-row-expanded):hover{background:#f5f5f5}tr.smart-table-row:not(.smart-table-row-expanded):active{background:#efefef}tr.smart-table-row-expanded td{border-bottom-width:0}tr.smart-table-detail-row{height:0}.smart-table-detail{display:grid;grid-template-rows:1fr}.smart-table-detail-enter{animation:smart-table-detail-expand 225ms cubic-bezier(.4,0,.2,1)}.smart-table-detail-content{min-height:0;overflow:hidden}@keyframes smart-table-detail-expand{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}.tree-grid-actions,.mat-cell-content{display:flex;flex-direction:row;align-items:center}.mat-column-my_menu,.tree-grid-column{width:0}.tree-grid-cell{display:flex;align-items:center;min-height:48px}.tree-grid-expand-button{flex:0 0 auto}.tree-grid-spacer{display:inline-block;width:40px;flex:0 0 40px}.tree-grid-label{min-width:0}\n"], dependencies: [{ kind: "component", type: MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { kind: "directive", type: MatColumnDef, selector: "[matColumnDef]", inputs: ["matColumnDef"] }, { kind: "directive", type: MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { kind: "directive", type: MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { 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: "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: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: MatCellDef, selector: "[matCellDef]" }, { kind: "directive", type: MatCell, selector: "mat-cell, td[mat-cell]" }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { kind: "component", type: MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { kind: "directive", type: MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { kind: "component", type: MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { kind: "component", type: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { kind: "component", type: SmartHtmlCellComponent, selector: "smart-html-cell", inputs: ["row", "template", "gridIdentifier"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MaterialTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-material-table', imports: [MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, NgClass, NgStyle, UiActionToolbarComponent, UiActionButtonComponent, MatCheckbox, MatButton, SmartIconComponent, MatCellDef, MatCell, SmartTooltipDirective, MatIconButton, MatMenuTrigger, MatMenu, MatMenuItem, MatDivider, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, DefaultActionsPopupComponent, SmartDateTimePipe, SmartDatePipe, SmartTimePipe], template: "<table #myTable mat-table [dataSource]=\"isTreeGrid ? visibleRows : smartTable.tableRows\" class=\"full-width\"\n  multiTemplateDataRows>\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n  <caption class=\"captionTitle\">\n    {{ smartTable.title }}\n  </caption>\n  }\n\n  @for (header of smartTable.tableHeaders; track header; let i = $index) {\n\n  <ng-container matColumnDef=\"{{ header }}\">\n    <!-- my_menu is the implicit action column present on all tables: -->\n    @if ('my_menu' === header) {\n    <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n\n      <!-- ==================== TREE ACTIONS ==================== -->\n      @if ( isTreeGrid) {\n      <div class=\"tree-grid-actions\">\n\n        <ui-action-button (actionClick)=\"expandOneLevel()\" [descriptor]=\"expandTreeGridLevel\">\n        </ui-action-button>\n\n\n        <ui-action-button (actionClick)=\"collapseOneLevel()\" [descriptor]=\"closeTreeGridLevel\">\n        </ui-action-button>\n      </div>\n      }\n      <!-- ==================== TREE ACTIONS ==================== -->\n\n      <smart-ui-action-toolbar [id]=\"headerToolbarId\"></smart-ui-action-toolbar>\n    </th>\n    } @else {\n    <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n      @if (\n      header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n      ) {\n      <div></div>\n      }\n      @if (header === 'select') {\n      <div>\n        @if (smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n        <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n          [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n          [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\n        </mat-checkbox>\n        }\n        @if (!smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n        <div>\n          {{ smartTable.customTableHeaders[i] }}\n        </div>\n        }\n      </div>\n      }\n      @if (\n      header !== 'icon' &&\n      header !== 'img' &&\n      header !== 'options' &&\n      header !== 'button' &&\n      header !== 'select' &&\n      header !== 'expand' &&\n      header !== 'actions'\n      ) {\n      <div>\n        @if (smartTable.sortable) {\n        @if (smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])) {\n        <button (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\" mat-button\n          class=\"sortableHeaderButton\">\n          {{ smartTable.customTableHeaders[i] }}\n          @if (getSortIcon(header)) {\n          <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortIcon(header)!\"></smart-icon>\n          }\n          @if (hasSortNumIcon(header)) {\n          <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortNumIcon(header)\"></smart-icon>\n          }\n        </button>\n        }\n        } @else {\n        {{ smartTable.customTableHeaders[i] }}\n        }\n      </div>\n      }\n    </th>\n    }\n\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n      <div class=\"mat-cell-content\">\n\n\n        <!-- ==================== TREE TOGGLE ==================== -->\n        @if (isTreeGrid && i === 0) {\n        <div class=\"tree-grid-first-column\" [style.padding-left.px]=\"(element.level ?? 0) * 24\">\n          @if (hasChildren(element)) {\n          <button mat-icon-button type=\"button\" (click)=\"toggleRowExpansion(element, $event)\">\n            <smart-icon [icon]=\"\n            isRowExpanded(element)\n              ? 'keyboard_arrow_down'\n              : 'keyboard_arrow_right'\n          \"></smart-icon>\n          </button>\n          } @else {\n          <span class=\"tree-grid-spacer\"></span>\n          }\n\n        </div>\n        }\n        <!-- ==================== TREE TOGGLE ==================== -->\n\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n        !isDisabled(element)\n        ) {\n        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \" [disabled]=\"isDisabled(element)\" [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \" [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \">\n        </mat-checkbox>\n        }\n        @if (\n        smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n        ) {\n        <div>\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n          <div>\n            {{\n            getValue(element, header)\n            | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n            }}\n          </div>\n          }\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n          <div>\n            {{\n            getValue(element, header)\n            | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n            }}\n          </div>\n          }\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n          <div>\n            {{\n            getValue(element, header)\n            | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n            }}\n          </div>\n          }\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n          <div>\n            <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n          </div>\n          }\n          @if (\n          smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n          smartTable.customSmartTableHeaders[i].properties?.icons?.length\n          ) {\n          <div>\n            <smart-icon [smartTooltip]=\"getToolTip(element, i)\" [icon]=\"getIcon(getValue(element, header), i)!\"\n              [color]=\"getColor(getValue(element, header), i)\">\n            </smart-icon>\n          </div>\n          }\n        </div>\n        }\n        <div class=\"smart-table-icon-container\">\n          @for (ir of getImageResourceIcons(element, header); track ir) {\n          <div>\n            <smart-icon [imageResource]=\"ir\"> </smart-icon>\n          </div>\n          }\n        </div>\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n        <div class=\"smart-table-buttons-col\">\n          @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n          <div>\n            @if (showButton(button, element)) {\n            <div>\n              @switch (button.type) {\n              @case (smartTableButtonType.ICON) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-icon-button color=\"{{ button.color }}\">\n                <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n              </button>\n              }\n              @case (smartTableButtonType.NORMAL) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-button color=\"{{ button.color }}\">\n                @if (button.icon) {\n                <smart-icon [icon]=\"button.icon\"></smart-icon>\n                }\n                {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n              </button>\n              }\n              @case (smartTableButtonType.RAISED) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-raised-button\n                color=\"{{ button.color }}\">\n                @if (button.icon) {\n                <smart-icon [icon]=\"button.icon\"></smart-icon>\n                }\n                {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n              </button>\n              }\n              <!------ MENU ------>\n              @case (smartTableButtonType.MENU) {\n              <div class=\"menu-button\">\n                <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                  [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n                  [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n                <!------ GENERIC HAMBURGER ------>\n                <!------ TOOLBAR ------>\n                @if (shouldShowMenuButton(element)) {\n                <smart-ui-action-toolbar [uiActionModels]=\"getMenuActions(element)\" [widgetId]=\"smartTable.getGridId()\"\n                  [nodeId]=\"element.id\" [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n                }\n              </div>\n              }\n              <!------ MENU ------>\n              }\n            </div>\n            }\n          </div>\n          }\n        </div>\n        }\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n        <div>\n          @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n          <smart-icon [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n            [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n            [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\">\n          </smart-icon>\n          }\n        </div>\n        }\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].translator !== undefined\n        ) {\n        <div>\n          {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n        </div>\n        }\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n        ) {\n        <button mat-icon-button aria-label=\"expand row\" (click)=\"onToggle(element, $event)\">\n          @if (expandedElement !== element) {\n          <smart-icon [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n          }\n          @if (expandedElement === element) {\n          <smart-icon [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n          }\n        </button>\n        }\n        @if (\n        !smartTable.customSmartTableHeaders ||\n        (smartTable.customSmartTableHeaders &&\n        !smartTable.customSmartTableHeaders[i].properties &&\n        !smartTable.customSmartTableHeaders[i].icon &&\n        !smartTable.customSmartTableHeaders[i].buttons &&\n        !smartTable.customSmartTableHeaders[i].translator &&\n        !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n        !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n        ) {\n        <div>\n          @if (header === 'icon') {\n          <smart-icon [icon]=\"getValue(element, header)!\"> </smart-icon>\n          }\n          @if (header === 'img') {\n          <img [src]=\"getValue(element, header)\" alt=\"\" class=\"smarttableImg\" />\n          }\n          <!------ TOOLBAR ------>\n          @if (showCellToolbar(element, header)) {\n          <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, header)\"\n            [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n            [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n          }\n          <!------ TOOLBAR ------>\n          @if (\n          header !== 'icon' &&\n          header !== 'img' &&\n          header !== 'option' &&\n          header !== 'button' &&\n          !isImageResource(element, header)\n          ) {\n          <div [innerHtml]=\"getValue(element, header)\"></div>\n          }\n        </div>\n        }\n\n      </div>\n    </td>\n  </ng-container>\n  }\n\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n  @if (smartTable.expandable) {\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\n      <div class=\"smart-table-detail\" animate.enter=\"smart-table-detail-enter\">\n        <div class=\"smart-table-detail-content\">\n          <ng-template #expandedArea></ng-template>\n        </div>\n      </div>\n    </td>\n  </ng-container>\n  }\n\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\n    <tr mat-row class=\"smart-table-row\" [class.smart-table-row-expanded]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\" [ngStyle]=\"getRowStyles(element)\" (click)=\"handleOnRowClick(element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\" [attr.data-testid]=\"element?.id ?? null\"></tr>\n\n    @if (smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0) {\n    <lib-default-actions-popup #defaultActionMenu [buttons]=\"getDefaultActionsForRow(element)!\"\n      [row]=\"element\"></lib-default-actions-popup>\n    }\n  </ng-container>\n  <!-- Only the expanded row has a detail row; no host style can give a collapsed one a height. -->\n  @if (smartTable.expandable) {\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\" class=\"smart-table-detail-row\"\n    (animate.leave)=\"onDetailRowLeave($event)\"></tr>\n  }\n</table>", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.smart-table-row:not(.smart-table-row-expanded):hover{background:#f5f5f5}tr.smart-table-row:not(.smart-table-row-expanded):active{background:#efefef}tr.smart-table-row-expanded td{border-bottom-width:0}tr.smart-table-detail-row{height:0}.smart-table-detail{display:grid;grid-template-rows:1fr}.smart-table-detail-enter{animation:smart-table-detail-expand 225ms cubic-bezier(.4,0,.2,1)}.smart-table-detail-content{min-height:0;overflow:hidden}@keyframes smart-table-detail-expand{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}.tree-grid-actions,.mat-cell-content{display:flex;flex-direction:row;align-items:center}.mat-column-my_menu,.tree-grid-column{width:0}.tree-grid-cell{display:flex;align-items:center;min-height:48px}.tree-grid-expand-button{flex:0 0 auto}.tree-grid-spacer{display:inline-block;width:40px;flex:0 0 40px}.tree-grid-label{min-width:0}\n"] }]
+            args: [{ selector: 'lib-material-table', imports: [MatTable, MatColumnDef, MatHeaderCellDef, MatHeaderCell, NgClass, NgStyle, UiActionToolbarComponent, UiActionButtonComponent, MatCheckbox, MatButton, SmartIconComponent, MatCellDef, MatCell, SmartTooltipDirective, MatIconButton, MatHeaderRowDef, MatHeaderRow, MatRowDef, MatRow, DefaultActionsPopupComponent, SmartDateTimePipe, SmartDatePipe, SmartTimePipe, SmartHtmlCellComponent], template: "<table #myTable mat-table [dataSource]=\"isTreeGrid ? visibleRows : smartTable.tableRows\" class=\"full-width\"\n  multiTemplateDataRows>\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n  <caption class=\"captionTitle\">\n    {{ smartTable.title }}\n  </caption>\n  }\n\n  @for (header of smartTable.tableHeaders; track header; let i = $index) {\n\n  <ng-container matColumnDef=\"{{ header }}\">\n    <!-- my_menu is the implicit action column present on all tables: -->\n    @if ('my_menu' === header) {\n    <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n\n      <!-- ==================== TREE ACTIONS ==================== -->\n      @if ( isTreeGrid) {\n      <div class=\"tree-grid-actions\">\n\n        <ui-action-button (actionClick)=\"expandOneLevel()\" [descriptor]=\"expandTreeGridLevel\">\n        </ui-action-button>\n\n\n        <ui-action-button (actionClick)=\"collapseOneLevel()\" [descriptor]=\"closeTreeGridLevel\">\n        </ui-action-button>\n      </div>\n      }\n      <!-- ==================== TREE ACTIONS ==================== -->\n\n      <smart-ui-action-toolbar [id]=\"headerToolbarId\"></smart-ui-action-toolbar>\n    </th>\n    } @else {\n    <th mat-header-cell *matHeaderCellDef [ngClass]=\"getColumnClasses(smartTable.customSmartTableHeaders![i])\"\n      [ngStyle]=\"getColumnStyles(smartTable.customSmartTableHeaders![i])\"\n      [attr.data-testid]=\"smartTable.customSmartTableHeaders![i].propertyName\">\n      @if (\n      header === 'icon' || header === 'img' || header === 'options' || header === 'button'\n      ) {\n      <div></div>\n      }\n      @if (header === 'select') {\n      <div>\n        @if (smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n        <mat-checkbox (change)=\"$event ? toggleAllRows() : null\"\n          [checked]=\"smartTable.selection!.hasValue() && isAllSelected()\"\n          [indeterminate]=\"smartTable.selection!.hasValue() && !isAllSelected()\" [aria-label]=\"checkboxLabel()\">\n        </mat-checkbox>\n        }\n        @if (!smartTable.customSmartTableHeaders![i].showCheckboxInHeader) {\n        <div>\n          {{ smartTable.customTableHeaders[i] }}\n        </div>\n        }\n      </div>\n      }\n      @if (\n      header !== 'icon' &&\n      header !== 'img' &&\n      header !== 'options' &&\n      header !== 'button' &&\n      header !== 'select' &&\n      header !== 'expand' &&\n      header !== 'actions'\n      ) {\n      <div>\n        @if (smartTable.sortable) {\n        @if (smartTable.sortable && isSortable(smartTable.customSmartTableHeaders![i])) {\n        <button (click)=\"sortButtonClicked($event, smartTable.customSmartTableHeaders![i])\" mat-button\n          class=\"sortableHeaderButton\">\n          {{ smartTable.customTableHeaders[i] }}\n          @if (getSortIcon(header)) {\n          <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortIcon(header)!\"></smart-icon>\n          }\n          @if (hasSortNumIcon(header)) {\n          <smart-icon class=\"sortableHeaderButtonIcon\" title=\"sort\" [icon]=\"getSortNumIcon(header)\"></smart-icon>\n          }\n        </button>\n        }\n        } @else {\n        {{ smartTable.customTableHeaders[i] }}\n        }\n      </div>\n      }\n    </th>\n    }\n\n    <td mat-cell *matCellDef=\"let element\" [ngClass]=\"isDisabled(element) ? 'disabledRow' : ''\">\n      <div class=\"mat-cell-content\">\n\n\n        <!-- ==================== TREE TOGGLE ==================== -->\n        @if (isTreeGrid && i === 0) {\n        <div class=\"tree-grid-first-column\" [style.padding-left.px]=\"(element.level ?? 0) * 24\">\n          @if (hasChildren(element)) {\n          <button mat-icon-button type=\"button\" (click)=\"toggleRowExpansion(element, $event)\">\n            <smart-icon [icon]=\"\n            isRowExpanded(element)\n              ? 'keyboard_arrow_down'\n              : 'keyboard_arrow_right'\n          \"></smart-icon>\n          </button>\n          } @else {\n          <span class=\"tree-grid-spacer\"></span>\n          }\n\n        </div>\n        }\n        <!-- ==================== TREE TOGGLE ==================== -->\n\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].propertyName === 'select' &&\n        !isDisabled(element)\n        ) {\n        <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n                  : element\n              )\n            : null\n        \" [disabled]=\"isDisabled(element)\" [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \" [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(element, smartTable.selectionProperty)\n              : element\n          )\n        \">\n        </mat-checkbox>\n        }\n        @if (\n        smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\n        !columnTemplate(i)\n        ) {\n        <div>\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n          <div>\n            {{\n            getValue(element, header)\n            | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n            }}\n          </div>\n          }\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n          <div>\n            {{\n            getValue(element, header)\n            | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n            }}\n          </div>\n          }\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n          <div>\n            {{\n            getValue(element, header)\n            | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n            }}\n          </div>\n          }\n          @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n          <div>\n            <mat-checkbox [disabled]=\"true\" [checked]=\"getValue(element, header)\"></mat-checkbox>\n          </div>\n          }\n          @if (\n          smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n          smartTable.customSmartTableHeaders[i].properties?.icons?.length\n          ) {\n          <div>\n            <smart-icon [smartTooltip]=\"getToolTip(element, i)\" [icon]=\"getIcon(getValue(element, header), i)!\"\n              [color]=\"getColor(getValue(element, header), i)\">\n            </smart-icon>\n          </div>\n          }\n        </div>\n        }\n        <div class=\"smart-table-icon-container\">\n          @for (ir of getImageResourceIcons(element, header); track ir) {\n          <div>\n            <smart-icon [imageResource]=\"ir\"> </smart-icon>\n          </div>\n          }\n        </div>\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n        <div class=\"smart-table-buttons-col\">\n          @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n          <div>\n            @if (showButton(button, element)) {\n            <div>\n              @switch (button.type) {\n              @case (smartTableButtonType.ICON) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-icon-button color=\"{{ button.color }}\">\n                <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n              </button>\n              }\n              @case (smartTableButtonType.NORMAL) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-button color=\"{{ button.color }}\">\n                @if (button.icon) {\n                <smart-icon [icon]=\"button.icon\"></smart-icon>\n                }\n                {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n              </button>\n              }\n              @case (smartTableButtonType.RAISED) {\n              <button (click)=\"customButtonClicked($event, button, element)\" mat-raised-button\n                color=\"{{ button.color }}\">\n                @if (button.icon) {\n                <smart-icon [icon]=\"button.icon\"></smart-icon>\n                }\n                {{ button.label ?? (button.translator ? button.translator(element).title : '') }}\n              </button>\n              }\n              <!------ MENU ------>\n              @case (smartTableButtonType.MENU) {\n              <div class=\"menu-button\">\n                <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                  [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n                  [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n                <!------ GENERIC HAMBURGER ------>\n                <!------ TOOLBAR ------>\n                @if (shouldShowMenuButton(element)) {\n                <smart-ui-action-toolbar [uiActionModels]=\"getMenuActions(element)\" [widgetId]=\"smartTable.getGridId()\"\n                  [nodeId]=\"element.id\" [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n                }\n              </div>\n              }\n              <!------ MENU ------>\n              }\n            </div>\n            }\n          </div>\n          }\n        </div>\n        }\n        @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n        <div>\n          @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n          <smart-icon [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n            [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n            [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\">\n          </smart-icon>\n          }\n        </div>\n        }\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].translator !== undefined\n        ) {\n        <div>\n          {{ smartTable.customSmartTableHeaders[i].translator!(getValue(element, header)) }}\n        </div>\n        }\n        @if (\n        smartTable.customSmartTableHeaders &&\n        smartTable.customSmartTableHeaders[i].propertyName === 'expand'\n        ) {\n        <button mat-icon-button aria-label=\"expand row\" (click)=\"onToggle(element, $event)\">\n          @if (expandedElement !== element) {\n          <smart-icon [icon]=\"'keyboard_arrow_down'\"></smart-icon>\n          }\n          @if (expandedElement === element) {\n          <smart-icon [icon]=\"'keyboard_arrow_up'\"></smart-icon>\n          }\n        </button>\n        }\n        @if (\n        !smartTable.customSmartTableHeaders ||\n        (smartTable.customSmartTableHeaders &&\n        (!smartTable.customSmartTableHeaders[i].properties || columnTemplate(i)) &&\n        !smartTable.customSmartTableHeaders[i].icon &&\n        !smartTable.customSmartTableHeaders[i].buttons &&\n        !smartTable.customSmartTableHeaders[i].translator &&\n        !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n        !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n        ) {\n        <div>\n          @if (header === 'icon') {\n          <smart-icon [icon]=\"getValue(element, header)!\"> </smart-icon>\n          }\n          @if (header === 'img') {\n          <img [src]=\"getValue(element, header)\" alt=\"\" class=\"smarttableImg\" />\n          }\n          <!------ TOOLBAR ------>\n          @if (showCellToolbar(element, header)) {\n          <smart-ui-action-toolbar [uiActionModels]=\"getRowColumnAction(element, header)\"\n            [widgetId]=\"smartTable.getGridId()\" [nodeId]=\"element.id\"\n            [actionParams]=\"{ model: element }\"></smart-ui-action-toolbar>\n          }\n          <!------ TOOLBAR ------>\n          @if (columnTemplate(i); as template) {\n          <smart-html-cell [row]=\"element\" [template]=\"template\"\n            [gridIdentifier]=\"smartTable.getGridId()\"></smart-html-cell>\n          } @else if (\n          header !== 'icon' &&\n          header !== 'img' &&\n          header !== 'option' &&\n          header !== 'button' &&\n          !isImageResource(element, header)\n          ) {\n          @if (isTextContent(i)) {\n          <div>{{ getValue(element, header) }}</div>\n          } @else {\n          <div [innerHtml]=\"getValue(element, header)\"></div>\n          }\n          }\n        </div>\n        }\n\n      </div>\n    </td>\n  </ng-container>\n  }\n\n  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->\n  @if (smartTable.expandable) {\n  <ng-container matColumnDef=\"expandedDetail\">\n    <td mat-cell *matCellDef=\"let element\" [attr.colspan]=\"smartTable.tableHeaders.length\">\n      <div class=\"smart-table-detail\" animate.enter=\"smart-table-detail-enter\">\n        <div class=\"smart-table-detail-content\">\n          <ng-template #expandedArea></ng-template>\n        </div>\n      </div>\n    </td>\n  </ng-container>\n  }\n\n  <tr mat-header-row *matHeaderRowDef=\"smartTable.tableHeaders; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: smartTable.tableHeaders\">\n    <tr mat-row class=\"smart-table-row\" [class.smart-table-row-expanded]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\" [ngStyle]=\"getRowStyles(element)\" (click)=\"handleOnRowClick(element)\"\n      (dblclick)=\"handleOnRowDoubleClick($event, element)\" [attr.data-testid]=\"element?.id ?? null\"></tr>\n\n    @if (smartTable.defaultActionCodes && smartTable.defaultActionCodes.length > 0) {\n    <lib-default-actions-popup #defaultActionMenu [buttons]=\"getDefaultActionsForRow(element)!\"\n      [row]=\"element\"></lib-default-actions-popup>\n    }\n  </ng-container>\n  <!-- Only the expanded row has a detail row; no host style can give a collapsed one a height. -->\n  @if (smartTable.expandable) {\n  <tr mat-row *matRowDef=\"let row; columns: ['expandedDetail']; when: isExpandedRow\" class=\"smart-table-detail-row\"\n    (animate.leave)=\"onDetailRowLeave($event)\"></tr>\n  }\n</table>", styles: [".full-width{width:100%}.smarttableImg{width:25px}.smartTableRowHover:hover{cursor:pointer}tr.smart-table-row:not(.smart-table-row-expanded):hover{background:#f5f5f5}tr.smart-table-row:not(.smart-table-row-expanded):active{background:#efefef}tr.smart-table-row-expanded td{border-bottom-width:0}tr.smart-table-detail-row{height:0}.smart-table-detail{display:grid;grid-template-rows:1fr}.smart-table-detail-enter{animation:smart-table-detail-expand 225ms cubic-bezier(.4,0,.2,1)}.smart-table-detail-content{min-height:0;overflow:hidden}@keyframes smart-table-detail-expand{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}.disabledRow{color:var(--disabled)}.disabledRow:hover{cursor:default}.smart-table-buttons-col{display:flex;flex-direction:row;justify-content:flex-end}.sortableHeaderButton{margin:0!important;padding:0!important;text-align:left!important}.selected{background-color:var(--primary-light-color)}.smart-table-icon-container{display:flex;flex-direction:row;justify-content:space-between;white-space:initial}.reversed{flex-direction:row-reverse;gap:1rem}:host ::ng-deep .mat-mdc-menu-item{line-height:normal!important}.mat-mdc-menu-item[disabled]{cursor:default!important}.menu-button{display:flex;flex-direction:row;justify-content:flex-end;text-align:-webkit-right;align-items:center}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid rgba(0,0,0,.12);border-bottom:1px solid rgba(0,0,0,.12);background:#f5f5f5}.tree-grid-actions,.mat-cell-content{display:flex;flex-direction:row;align-items:center}.mat-column-my_menu,.tree-grid-column{width:0}.tree-grid-cell{display:flex;align-items:center;min-height:48px}.tree-grid-expand-button{flex:0 0 auto}.tree-grid-spacer{display:inline-block;width:40px;flex:0 0 40px}.tree-grid-label{min-width:0}\n"] }]
         }] });
 
 class MobileTableComponent extends Table {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MobileTableComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MobileTableComponent, isStandalone: true, selector: "lib-mobile-table", usesInheritance: true, ngImport: i0, template: "<div class=\"mobileTable\">\n  @for (row of smartTable.tableRows; track row) {\n    <div\n      class=\"mobileTableRow\"\n      [ngClass]=\"getRowClasses(row)\"\n      [ngStyle]=\"getRowStyles(row)\"\n      [attr.data-testid]=\"row?.id ?? null\"\n      >\n      @for (header of smartTable.customSmartTableHeaders; track header; let i = $index) {\n        <div\n          class=\"mobileTableCell\"\n          (click)=\"handleOnRowClick(row)\"\n          (dblclick)=\"handleOnRowDoubleClick($event, row)\"\n          >\n          <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\n            {{ header.label }}\n          </div>\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].propertyName === 'select'\n            ) {\n            <mat-checkbox\n              (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n                  : row\n              )\n            : null\n        \"\n              [disabled]=\"isDisabled(row)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n              >\n            </mat-checkbox>\n          }\n          @if (\n            smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n            ) {\n            <div\n              >\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n                <div>\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n                <div>\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n                <div>\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n                <div>\n                  <mat-checkbox\n                    [disabled]=\"true\"\n                    [checked]=\"getValue(row, header.propertyName)\"\n                  ></mat-checkbox>\n                </div>\n              }\n              @if (\n                smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n                smartTable.customSmartTableHeaders[i].properties?.icons?.length\n                ) {\n                <div\n                  >\n                  <smart-icon\n                    [smartTooltip]=\"getToolTip(row, i)\"\n                    [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\n                    [color]=\"getColor(getValue(row, header.propertyName), i)\"\n                    >\n                  </smart-icon>\n                </div>\n              }\n            </div>\n          }\n          @if (isImageResource(row, header.propertyName)) {\n            <div>\n              <smart-icon\n                [icon]=\"getImageResourceIcon(row, header.propertyName)\"\n                [color]=\"getImageResourceColor(row, header.propertyName)\"\n                >\n              </smart-icon>\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n            <div\n              class=\"smart-table-buttons-col\"\n              >\n              @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n                <div>\n                  @if (showButton(button, row)) {\n                    <div>\n                      @switch (button.type) {\n                        @case (smartTableButtonType.ICON) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-icon-button\n                            color=\"{{ button.color }}\"\n                            >\n                            <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n                          </button>\n                        }\n                        @case (smartTableButtonType.NORMAL) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        @case (smartTableButtonType.RAISED) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-raised-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        <!------ MENU ------>\n                        @case (smartTableButtonType.MENU) {\n                          <div class=\"menu-button\">\n                            <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                            <smart-ui-action-toolbar\n                              [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                              [widgetId]=\"smartTable.getGridId()\"\n                              [nodeId]=\"element.id\"\n                              [actionParams]=\"{ model: element }\"\n                            ></smart-ui-action-toolbar>\n                            <!------ GENERIC HAMBURGER ------>\n                            @if (shouldShowMenuButton(element)) {\n                              <smart-ui-action-toolbar\n                                [uiActionModels]=\"getMenuActions(element)\"\n                                [widgetId]=\"smartTable.getGridId()\"\n                                [nodeId]=\"element.id\"\n                                [actionParams]=\"{ model: element }\"\n                              ></smart-ui-action-toolbar>\n                            }\n                            <!------ MENU ------>\n                          </div>\n                        }\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n            <div>\n              @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n                <smart-icon\n                  [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n                  [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n                  [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n                  >\n                </smart-icon>\n              }\n            </div>\n          }\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].translator !== undefined\n            ) {\n            <div\n              >\n              {{ smartTable.customSmartTableHeaders[i].translator!(getValue(row, header.propertyName)) }}\n            </div>\n          }\n          @if (\n            !smartTable.customSmartTableHeaders ||\n            (smartTable.customSmartTableHeaders &&\n            !smartTable.customSmartTableHeaders[i].properties &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n            ) {\n            <div\n              >\n              @if (header.propertyName === 'icon') {\n                <smart-icon\n                  [icon]=\"getValue(row, header.propertyName)!\"\n                  >\n                </smart-icon>\n              }\n              @if (header.propertyName === 'img') {\n                <img\n                  [src]=\"getValue(row, header.propertyName)\"\n                  alt=\"\"\n                  class=\"smarttableImg\"\n                  />\n              }\n              @if (\n                header.propertyName !== 'icon' &&\n                header.propertyName !== 'img' &&\n                header.propertyName !== 'option' &&\n                header.propertyName !== 'button'\n                ) {\n                <div\n                  [innerHtml]=\"getValue(row, header.propertyName)\"\n                ></div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid #ccc;padding:.5rem;gap:.5rem}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color)}.selected{background-color:var(--primary-light-color)}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MobileTableComponent, isStandalone: true, selector: "lib-mobile-table", usesInheritance: true, ngImport: i0, template: "<div class=\"mobileTable\">\n  @for (row of smartTable.tableRows; track row) {\n    <div\n      class=\"mobileTableRow\"\n      [ngClass]=\"getRowClasses(row)\"\n      [ngStyle]=\"getRowStyles(row)\"\n      [attr.data-testid]=\"row?.id ?? null\"\n      >\n      @for (header of smartTable.customSmartTableHeaders; track header; let i = $index) {\n        <div\n          class=\"mobileTableCell\"\n          (click)=\"handleOnRowClick(row)\"\n          (dblclick)=\"handleOnRowDoubleClick($event, row)\"\n          >\n          <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\n            {{ header.label }}\n          </div>\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].propertyName === 'select'\n            ) {\n            <mat-checkbox\n              (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n                  : row\n              )\n            : null\n        \"\n              [disabled]=\"isDisabled(row)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n              >\n            </mat-checkbox>\n          }\n          @if (\n            smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\n            !columnTemplate(i)\n            ) {\n            <div\n              >\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n                <div>\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n                <div>\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n                <div>\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n                <div>\n                  <mat-checkbox\n                    [disabled]=\"true\"\n                    [checked]=\"getValue(row, header.propertyName)\"\n                  ></mat-checkbox>\n                </div>\n              }\n              @if (\n                smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n                smartTable.customSmartTableHeaders[i].properties?.icons?.length\n                ) {\n                <div\n                  >\n                  <smart-icon\n                    [smartTooltip]=\"getToolTip(row, i)\"\n                    [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\n                    [color]=\"getColor(getValue(row, header.propertyName), i)\"\n                    >\n                  </smart-icon>\n                </div>\n              }\n            </div>\n          }\n          @if (isImageResource(row, header.propertyName)) {\n            <div>\n              <smart-icon\n                [icon]=\"getImageResourceIcon(row, header.propertyName)\"\n                [color]=\"getImageResourceColor(row, header.propertyName)\"\n                >\n              </smart-icon>\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n            <div\n              class=\"smart-table-buttons-col\"\n              >\n              @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n                <div>\n                  @if (showButton(button, row)) {\n                    <div>\n                      @switch (button.type) {\n                        @case (smartTableButtonType.ICON) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-icon-button\n                            color=\"{{ button.color }}\"\n                            >\n                            <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n                          </button>\n                        }\n                        @case (smartTableButtonType.NORMAL) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        @case (smartTableButtonType.RAISED) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-raised-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        <!------ MENU ------>\n                        @case (smartTableButtonType.MENU) {\n                          <div class=\"menu-button\">\n                            <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                            <smart-ui-action-toolbar\n                              [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                              [widgetId]=\"smartTable.getGridId()\"\n                              [nodeId]=\"element.id\"\n                              [actionParams]=\"{ model: element }\"\n                            ></smart-ui-action-toolbar>\n                            <!------ GENERIC HAMBURGER ------>\n                            @if (shouldShowMenuButton(element)) {\n                              <smart-ui-action-toolbar\n                                [uiActionModels]=\"getMenuActions(element)\"\n                                [widgetId]=\"smartTable.getGridId()\"\n                                [nodeId]=\"element.id\"\n                                [actionParams]=\"{ model: element }\"\n                              ></smart-ui-action-toolbar>\n                            }\n                            <!------ MENU ------>\n                          </div>\n                        }\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n            <div>\n              @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n                <smart-icon\n                  [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n                  [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n                  [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n                  >\n                </smart-icon>\n              }\n            </div>\n          }\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].translator !== undefined\n            ) {\n            <div\n              >\n              {{ smartTable.customSmartTableHeaders[i].translator!(getValue(row, header.propertyName)) }}\n            </div>\n          }\n          @if (\n            !smartTable.customSmartTableHeaders ||\n            (smartTable.customSmartTableHeaders &&\n            (!smartTable.customSmartTableHeaders[i].properties || columnTemplate(i)) &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n            ) {\n            <div\n              >\n              @if (header.propertyName === 'icon') {\n                <smart-icon\n                  [icon]=\"getValue(row, header.propertyName)!\"\n                  >\n                </smart-icon>\n              }\n              @if (header.propertyName === 'img') {\n                <img\n                  [src]=\"getValue(row, header.propertyName)\"\n                  alt=\"\"\n                  class=\"smarttableImg\"\n                  />\n              }\n              @if (\n                header.propertyName !== 'icon' &&\n                header.propertyName !== 'img' &&\n                header.propertyName !== 'option' &&\n                header.propertyName !== 'button'\n                ) {\n                @if (columnTemplate(i); as template) {\n                  <smart-html-cell\n                    [row]=\"row\"\n                    [template]=\"template\"\n                    [gridIdentifier]=\"smartTable.getGridId()\"\n                  ></smart-html-cell>\n                } @else if (isTextContent(i)) {\n                  <div>{{ getValue(row, header.propertyName) }}</div>\n                } @else {\n                  <div\n                    [innerHtml]=\"getValue(row, header.propertyName)\"\n                  ></div>\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid #ccc;padding:.5rem;gap:.5rem}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color)}.selected{background-color:var(--primary-light-color)}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: SmartHtmlCellComponent, selector: "smart-html-cell", inputs: ["row", "template", "gridIdentifier"] }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartTimePipe, name: "smartTime" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MobileTableComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-mobile-table', imports: [NgClass, NgStyle, MatCheckbox, SmartIconComponent, SmartTooltipDirective, MatIconButton, MatButton, UiActionToolbarComponent, SmartDateTimePipe, SmartDatePipe, SmartTimePipe], template: "<div class=\"mobileTable\">\n  @for (row of smartTable.tableRows; track row) {\n    <div\n      class=\"mobileTableRow\"\n      [ngClass]=\"getRowClasses(row)\"\n      [ngStyle]=\"getRowStyles(row)\"\n      [attr.data-testid]=\"row?.id ?? null\"\n      >\n      @for (header of smartTable.customSmartTableHeaders; track header; let i = $index) {\n        <div\n          class=\"mobileTableCell\"\n          (click)=\"handleOnRowClick(row)\"\n          (dblclick)=\"handleOnRowDoubleClick($event, row)\"\n          >\n          <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\n            {{ header.label }}\n          </div>\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].propertyName === 'select'\n            ) {\n            <mat-checkbox\n              (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n                  : row\n              )\n            : null\n        \"\n              [disabled]=\"isDisabled(row)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n              >\n            </mat-checkbox>\n          }\n          @if (\n            smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties\n            ) {\n            <div\n              >\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n                <div>\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n                <div>\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n                <div>\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n                <div>\n                  <mat-checkbox\n                    [disabled]=\"true\"\n                    [checked]=\"getValue(row, header.propertyName)\"\n                  ></mat-checkbox>\n                </div>\n              }\n              @if (\n                smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n                smartTable.customSmartTableHeaders[i].properties?.icons?.length\n                ) {\n                <div\n                  >\n                  <smart-icon\n                    [smartTooltip]=\"getToolTip(row, i)\"\n                    [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\n                    [color]=\"getColor(getValue(row, header.propertyName), i)\"\n                    >\n                  </smart-icon>\n                </div>\n              }\n            </div>\n          }\n          @if (isImageResource(row, header.propertyName)) {\n            <div>\n              <smart-icon\n                [icon]=\"getImageResourceIcon(row, header.propertyName)\"\n                [color]=\"getImageResourceColor(row, header.propertyName)\"\n                >\n              </smart-icon>\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n            <div\n              class=\"smart-table-buttons-col\"\n              >\n              @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n                <div>\n                  @if (showButton(button, row)) {\n                    <div>\n                      @switch (button.type) {\n                        @case (smartTableButtonType.ICON) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-icon-button\n                            color=\"{{ button.color }}\"\n                            >\n                            <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n                          </button>\n                        }\n                        @case (smartTableButtonType.NORMAL) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        @case (smartTableButtonType.RAISED) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-raised-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        <!------ MENU ------>\n                        @case (smartTableButtonType.MENU) {\n                          <div class=\"menu-button\">\n                            <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                            <smart-ui-action-toolbar\n                              [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                              [widgetId]=\"smartTable.getGridId()\"\n                              [nodeId]=\"element.id\"\n                              [actionParams]=\"{ model: element }\"\n                            ></smart-ui-action-toolbar>\n                            <!------ GENERIC HAMBURGER ------>\n                            @if (shouldShowMenuButton(element)) {\n                              <smart-ui-action-toolbar\n                                [uiActionModels]=\"getMenuActions(element)\"\n                                [widgetId]=\"smartTable.getGridId()\"\n                                [nodeId]=\"element.id\"\n                                [actionParams]=\"{ model: element }\"\n                              ></smart-ui-action-toolbar>\n                            }\n                            <!------ MENU ------>\n                          </div>\n                        }\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n            <div>\n              @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n                <smart-icon\n                  [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n                  [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n                  [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n                  >\n                </smart-icon>\n              }\n            </div>\n          }\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].translator !== undefined\n            ) {\n            <div\n              >\n              {{ smartTable.customSmartTableHeaders[i].translator!(getValue(row, header.propertyName)) }}\n            </div>\n          }\n          @if (\n            !smartTable.customSmartTableHeaders ||\n            (smartTable.customSmartTableHeaders &&\n            !smartTable.customSmartTableHeaders[i].properties &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n            ) {\n            <div\n              >\n              @if (header.propertyName === 'icon') {\n                <smart-icon\n                  [icon]=\"getValue(row, header.propertyName)!\"\n                  >\n                </smart-icon>\n              }\n              @if (header.propertyName === 'img') {\n                <img\n                  [src]=\"getValue(row, header.propertyName)\"\n                  alt=\"\"\n                  class=\"smarttableImg\"\n                  />\n              }\n              @if (\n                header.propertyName !== 'icon' &&\n                header.propertyName !== 'img' &&\n                header.propertyName !== 'option' &&\n                header.propertyName !== 'button'\n                ) {\n                <div\n                  [innerHtml]=\"getValue(row, header.propertyName)\"\n                ></div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid #ccc;padding:.5rem;gap:.5rem}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color)}.selected{background-color:var(--primary-light-color)}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"] }]
+            args: [{ selector: 'lib-mobile-table', imports: [NgClass, NgStyle, MatCheckbox, SmartIconComponent, SmartTooltipDirective, MatIconButton, MatButton, UiActionToolbarComponent, SmartDateTimePipe, SmartDatePipe, SmartTimePipe, SmartHtmlCellComponent], template: "<div class=\"mobileTable\">\n  @for (row of smartTable.tableRows; track row) {\n    <div\n      class=\"mobileTableRow\"\n      [ngClass]=\"getRowClasses(row)\"\n      [ngStyle]=\"getRowStyles(row)\"\n      [attr.data-testid]=\"row?.id ?? null\"\n      >\n      @for (header of smartTable.customSmartTableHeaders; track header; let i = $index) {\n        <div\n          class=\"mobileTableCell\"\n          (click)=\"handleOnRowClick(row)\"\n          (dblclick)=\"handleOnRowDoubleClick($event, row)\"\n          >\n          <div class=\"mobileTableCellHeader\" [attr.data-testid]=\"header.propertyName\">\n            {{ header.label }}\n          </div>\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].propertyName === 'select'\n            ) {\n            <mat-checkbox\n              (click)=\"$event.stopPropagation()\"\n        (change)=\"\n          $event\n            ? setSelection(\n                smartTable.selectionProperty\n                  ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n                  : row\n              )\n            : null\n        \"\n              [disabled]=\"isDisabled(row)\"\n        [checked]=\"\n          smartTable.selection!.isSelected(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n        [aria-label]=\"\n          checkboxLabel(\n            smartTable.selectionProperty\n              ? smartTable.getValueDeeply(row, smartTable.selectionProperty)\n              : row\n          )\n        \"\n              >\n            </mat-checkbox>\n          }\n          @if (\n            smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].properties &&\n            !columnTemplate(i)\n            ) {\n            <div\n              >\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATETIME) {\n                <div>\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDateTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().DATE) {\n                <div>\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartDate: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().TIME) {\n                <div>\n                  {{\n                  getValue(row, header.propertyName)\n                  | smartTime: $safeNavigationMigration(smartTable.customSmartTableHeaders[i].properties?.dateFormat)\n                  }}\n                </div>\n              }\n              @if (smartTable.customSmartTableHeaders[i].properties?.type === type().CHECKBOX) {\n                <div>\n                  <mat-checkbox\n                    [disabled]=\"true\"\n                    [checked]=\"getValue(row, header.propertyName)\"\n                  ></mat-checkbox>\n                </div>\n              }\n              @if (\n                smartTable.customSmartTableHeaders[i].properties?.type === type().ICON &&\n                smartTable.customSmartTableHeaders[i].properties?.icons?.length\n                ) {\n                <div\n                  >\n                  <smart-icon\n                    [smartTooltip]=\"getToolTip(row, i)\"\n                    [icon]=\"getIcon(getValue(row, header.propertyName), i)!\"\n                    [color]=\"getColor(getValue(row, header.propertyName), i)\"\n                    >\n                  </smart-icon>\n                </div>\n              }\n            </div>\n          }\n          @if (isImageResource(row, header.propertyName)) {\n            <div>\n              <smart-icon\n                [icon]=\"getImageResourceIcon(row, header.propertyName)\"\n                [color]=\"getImageResourceColor(row, header.propertyName)\"\n                >\n              </smart-icon>\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].buttons) {\n            <div\n              class=\"smart-table-buttons-col\"\n              >\n              @for (button of smartTable.customSmartTableHeaders[i].buttons; track button) {\n                <div>\n                  @if (showButton(button, row)) {\n                    <div>\n                      @switch (button.type) {\n                        @case (smartTableButtonType.ICON) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-icon-button\n                            color=\"{{ button.color }}\"\n                            >\n                            <smart-icon title=\"{{ button.label }}\" [icon]=\"button.icon!\"></smart-icon>\n                          </button>\n                        }\n                        @case (smartTableButtonType.NORMAL) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        @case (smartTableButtonType.RAISED) {\n                          <button\n                            (click)=\"customButtonClicked($event, button, row)\"\n                            mat-raised-button\n                            color=\"{{ button.color }}\"\n                            >\n                            @if (button.icon) {\n                              <smart-icon [icon]=\"button.icon\"></smart-icon>\n                            }\n                            {{ button.label }}\n                          </button>\n                        }\n                        <!------ MENU ------>\n                        @case (smartTableButtonType.MENU) {\n                          <div class=\"menu-button\">\n                            <!------ DEFAULT_ACTION_COLUMN ID TOOLBAR ------>\n                            <smart-ui-action-toolbar\n                              [uiActionModels]=\"getRowColumnAction(element, defaultActionToolbarId)\"\n                              [widgetId]=\"smartTable.getGridId()\"\n                              [nodeId]=\"element.id\"\n                              [actionParams]=\"{ model: element }\"\n                            ></smart-ui-action-toolbar>\n                            <!------ GENERIC HAMBURGER ------>\n                            @if (shouldShowMenuButton(element)) {\n                              <smart-ui-action-toolbar\n                                [uiActionModels]=\"getMenuActions(element)\"\n                                [widgetId]=\"smartTable.getGridId()\"\n                                [nodeId]=\"element.id\"\n                                [actionParams]=\"{ model: element }\"\n                              ></smart-ui-action-toolbar>\n                            }\n                            <!------ MENU ------>\n                          </div>\n                        }\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n          @if (smartTable.customSmartTableHeaders && smartTable.customSmartTableHeaders[i].icon) {\n            <div>\n              @if (smartTable.customSmartTableHeaders[i].icon?.icon) {\n                <smart-icon\n                  [ngClass]=\"smartTable.customSmartTableHeaders[i].icon?.cssClass ?? ''\"\n                  [color]=\"$safeNavigationMigration(smartTable.customSmartTableHeaders[i].icon?.color)\"\n                  [icon]=\"smartTable.customSmartTableHeaders[i].icon!.icon\"\n                  >\n                </smart-icon>\n              }\n            </div>\n          }\n          @if (\n            smartTable.customSmartTableHeaders &&\n            smartTable.customSmartTableHeaders[i].translator !== undefined\n            ) {\n            <div\n              >\n              {{ smartTable.customSmartTableHeaders[i].translator!(getValue(row, header.propertyName)) }}\n            </div>\n          }\n          @if (\n            !smartTable.customSmartTableHeaders ||\n            (smartTable.customSmartTableHeaders &&\n            (!smartTable.customSmartTableHeaders[i].properties || columnTemplate(i)) &&\n            !smartTable.customSmartTableHeaders[i].icon &&\n            !smartTable.customSmartTableHeaders[i].buttons &&\n            !smartTable.customSmartTableHeaders[i].translator &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'select') &&\n            !(smartTable.customSmartTableHeaders[i].propertyName === 'expand'))\n            ) {\n            <div\n              >\n              @if (header.propertyName === 'icon') {\n                <smart-icon\n                  [icon]=\"getValue(row, header.propertyName)!\"\n                  >\n                </smart-icon>\n              }\n              @if (header.propertyName === 'img') {\n                <img\n                  [src]=\"getValue(row, header.propertyName)\"\n                  alt=\"\"\n                  class=\"smarttableImg\"\n                  />\n              }\n              @if (\n                header.propertyName !== 'icon' &&\n                header.propertyName !== 'img' &&\n                header.propertyName !== 'option' &&\n                header.propertyName !== 'button'\n                ) {\n                @if (columnTemplate(i); as template) {\n                  <smart-html-cell\n                    [row]=\"row\"\n                    [template]=\"template\"\n                    [gridIdentifier]=\"smartTable.getGridId()\"\n                  ></smart-html-cell>\n                } @else if (isTextContent(i)) {\n                  <div>{{ getValue(row, header.propertyName) }}</div>\n                } @else {\n                  <div\n                    [innerHtml]=\"getValue(row, header.propertyName)\"\n                  ></div>\n                }\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".mobileTable{display:flex;flex-direction:column}.mobileTableRow{display:flex;flex-direction:column;border-bottom:1px solid #ccc;padding:.5rem;gap:.5rem}.mobileTableCell{display:flex;flex-direction:column;gap:.25rem}.mobileTableCellHeader{font-weight:700;color:var(--primary-color)}.selected{background-color:var(--primary-light-color)}.mat-mdc-menu-item[disabled]{cursor:default!important}\n"] }]
         }] });
 
 class SmarttableComponent {
@@ -13000,6 +13888,8 @@ class SmartformLayoutDefinitionService {
                 return this.createSvg(config.layoutDefinition);
             case SmartFormWidgetType.DIV:
                 return this.createDiv(config.layoutDefinition);
+            case SmartFormWidgetType.HTML:
+                return this.createHtml(config.layoutDefinition);
             case SmartFormWidgetType.BUTTON:
                 return this.createButton(config);
             case SmartFormWidgetType.DIVIDER:
@@ -13548,6 +14438,17 @@ class SmartformLayoutDefinitionService {
         };
         return widget;
     }
+    createHtml(layoutDefinition) {
+        let widget = {
+            type: SmartFormWidgetType.HTML,
+            key: layoutDefinition.key,
+            label: layoutDefinition.label,
+            cssClass: layoutDefinition.cssClass,
+            style: layoutDefinition.style,
+            htmlProperties: layoutDefinition.properties?.['HTML_properties'],
+        };
+        return widget;
+    }
     createButton(config) {
         let uiAction = config.uiActions?.find((uiAction) => uiAction.code === config.layoutDefinition?.key);
         let widget = {
@@ -16595,6 +17496,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     args: ['pageName']
                 }] }] });
 
+/** The reserved key of the default row layout in a grid view's `rowLayouts` (Layouts.DEFAULT_LAYOUT). */
+const DEFAULT_ROW_LAYOUT = 'default';
 var GridUiActionType;
 (function (GridUiActionType) {
     GridUiActionType[GridUiActionType["POPUP_MENU"] = 0] = "POPUP_MENU";
@@ -17273,23 +18176,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 
 const APIS$2 = [GridService];
 
-/**
- * Grid api
- * The grid api is resposible for the grid components that shows a list of item.
- *
- * The version of the OpenAPI document: 1.0.0
- * Contact: info@it4all.hu
- *
- * NOTE: This class is auto generated by OpenAPI Generator (https://openapi-generator.tech).
- * https://openapi-generator.tech
- * Do not edit the class manually.
- */
-var GridColumnContentType;
-(function (GridColumnContentType) {
-    GridColumnContentType["TEXT"] = "text";
-    GridColumnContentType["HTML"] = "html";
-})(GridColumnContentType || (GridColumnContentType = {}));
-
 /**
  * Grid api
  * The grid api is resposible for the grid components that shows a list of item.
@@ -17794,6 +18680,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 args: ['headerComponent', { read: ViewContainerRef }]
             }] } });
 
+/**
+ * The component a grid card renders a row layout with: `SmartComponentLayoutComponent`, provided
+ * by `provideSmartNgClient()`. A token because the card cannot import that class without closing
+ * the card -> layout -> grid -> card import cycle.
+ */
+const SMART_ROW_LAYOUT_COMPONENT = new InjectionToken('SMART_ROW_LAYOUT_COMPONENT');
+
 class SmartGridCardComponent {
     constructor() {
         this.cfService = inject(ComponentFactoryService);
@@ -17813,16 +18706,19 @@ class SmartGridCardComponent {
          * below never looks like the root of an embedded-view tree — a layout with no
          * `parentLayoutComponent` detaches every embedded view of its view (#28870). Typed `any`:
          * this component cannot name the layout class without closing the
-         * card -> layout -> grid -> card import cycle.
+         * card -> layout -> grid -> card import cycle; the class itself arrives through
+         * {@link SMART_ROW_LAYOUT_COMPONENT} for the same reason.
          */
         this.parentLayoutComponent = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "parentLayoutComponent" }] : /* istanbul ignore next */ []));
         /**
-         * The layout the backend described for this row, if it described one. Its presence is what
-         * decides between the host-registered card component and a layout rendered from the model.
+         * The row layout of this row, as the grid resolved it (`SmartGridComponent.rowLayoutOf`). Its
+         * presence is what decides between the host-registered card component and a layout rendered
+         * from the model.
          */
-        this.layout = computed(() => this.item().layoutDescriptor?.componentLayouts?.['GRID_ROW_LAYOUT'], /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+        this.layout = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "layout" }] : /* istanbul ignore next */ []));
+        this.layoutComponent = inject(SMART_ROW_LAYOUT_COMPONENT, { optional: true });
         this.uiActionModels = [];
         this.envInjector = inject(EnvironmentInjector);
     }
@@ -17840,19 +18736,7 @@ class SmartGridCardComponent {
         this.vcRef?.clear();
     }
     constructUiActionModels() {
-        this.uiActionModels = this.item().actions.map((_uiAction) => {
-            let uiAction = { ..._uiAction };
-            uiAction.params = {
-                ...uiAction.params,
-                model: this.item(),
-            };
-            return {
-                serviceToUse: this.smartGrid().serviceToUse,
-                uiAction,
-                widgetId: this.smartGrid().gridIdentifier,
-                nodeId: this.item().id,
-            };
-        });
+        this.uiActionModels = rowActionModels(this.item(), this.smartGrid().gridIdentifier, this.smartGrid().serviceToUse);
     }
     constructComponent() {
         const smartGrid = this.smartGrid();
@@ -17874,9 +18758,7 @@ class SmartGridCardComponent {
         // nothing bound on them, so they pull — and this is what they must find. Written before
         // the layout exists, so the first resolution is already the row's own actions.
         this.actionHost.actionModels.set(this.uiActionModels);
-        // The layout class travels on the grid model rather than being imported here; see
-        // `parentLayoutComponent` above for the cycle.
-        this.componentRef = this.cfService.createComponent(this.vcRef, smartGrid.layoutComponent, new Map([
+        this.componentRef = this.cfService.createComponent(this.vcRef, this.layoutComponent, new Map([
             ['smartComponentLayout', layout],
             ['parentLayoutComponent', this.parentLayoutComponent()],
             ['gridRow', this.item()],
@@ -17887,7 +18769,7 @@ class SmartGridCardComponent {
         this.renderer.addClass(this.componentRef.location.nativeElement, 'gridCardLayout');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartGridCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: SmartGridCardComponent, isStandalone: true, selector: "app-smart-grid-card", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, smartGrid: { classPropertyName: "smartGrid", publicName: "smartGrid", isSignal: true, isRequired: true, transformFunction: null }, parentLayoutComponent: { classPropertyName: "parentLayoutComponent", publicName: "parentLayoutComponent", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-testid": "this.testId" } }, providers: [SmartActionHost], viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["customCardComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"smart-grid-card-template\">\n  <ng-template #customCardComponent></ng-template>\n</div>\n", styles: [".smart-grid-card-template{display:flex}:host ::ng-deep .gridCardLayout{display:flex;flex:1}\n"] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: SmartGridCardComponent, isStandalone: true, selector: "app-smart-grid-card", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, smartGrid: { classPropertyName: "smartGrid", publicName: "smartGrid", isSignal: true, isRequired: true, transformFunction: null }, parentLayoutComponent: { classPropertyName: "parentLayoutComponent", publicName: "parentLayoutComponent", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-testid": "this.testId" } }, providers: [SmartActionHost], viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["customCardComponent"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"smart-grid-card-template\">\n  <ng-template #customCardComponent></ng-template>\n</div>\n", styles: [".smart-grid-card-template{display:flex}:host ::ng-deep .gridCardLayout{display:flex;flex:1}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartGridCardComponent, decorators: [{
             type: Component,
@@ -17898,7 +18780,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
             }], vcRef: [{
                 type: ViewChild,
                 args: ['customCardComponent', { read: ViewContainerRef }]
-            }] } });
+            }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }] } });
 
 class SmartGridComponent {
     get testId() {
@@ -18033,6 +18915,8 @@ class SmartGridComponent {
             row.level = level;
             return row;
         };
+        //#region Row layouts of a cards grid
+        this.warnedRowLayouts = new Set();
         registerSmartWidget(this.smartComponent, {
             identifier: () => this.smartGrid?.gridIdentifier,
             reload: () => this.refresh(),
@@ -18578,6 +19462,8 @@ class SmartGridComponent {
                 orderNumber,
                 properties,
                 style: descColumn.style,
+                contentType: descColumn.contentType,
+                htmlProperties: descColumn.htmlProperties,
             };
         });
         let complement = this.smartGrid.tableConfig?.customSmartTableHeaders?.filter((tableHeader) => !header.some((tH) => tH.propertyName.includes(tableHeader.propertyName)));
@@ -18720,18 +19606,78 @@ class SmartGridComponent {
         this.handleOnClick(gridRow);
     }
     handleOnClick(gridRow) {
-        let defaultRowAction;
-        if (this.service.gridModel?.defaultRowActions) {
-            for (let index = 0; index < this.service.gridModel.defaultRowActions.length; index++) {
-                const defaultRowActionCode = this.service.gridModel.defaultRowActions[index];
-                defaultRowAction = gridRow.actions.find((uiAction) => uiAction.code === defaultRowActionCode);
-                if (defaultRowAction) {
-                    this.execute([], gridRow, defaultRowAction);
-                    return;
-                }
+        const defaultRowAction = this.defaultRowActionOf(gridRow);
+        if (defaultRowAction) {
+            this.execute([], gridRow, defaultRowAction);
+        }
+    }
+    /** The first default row action of the grid that this row offers. */
+    defaultRowActionOf(gridRow) {
+        for (const code of this.service.gridModel?.defaultRowActions ?? []) {
+            const defaultRowAction = gridRow.actions.find((uiAction) => uiAction.code === code);
+            if (defaultRowAction) {
+                return defaultRowAction;
+            }
+        }
+        return undefined;
+    }
+    /**
+     * The row layout a card renders this row with: the row's own
+     * `layoutDescriptor.GRID_ROW_LAYOUT`, then the grid view's `rowLayouts` entry the row names,
+     * then the default row layout (the `default` key, or the only entry). `undefined` leaves the
+     * row to the host-registered card component. A key the grid does not know falls back to the
+     * default with a warning, so a mistyped key shows instead of making the card disappear.
+     */
+    rowLayoutOf(row) {
+        const own = row.layoutDescriptor?.componentLayouts?.['GRID_ROW_LAYOUT'];
+        if (own) {
+            return own;
+        }
+        const descriptor = this.smartGrid?.gridModel.view?.descriptor;
+        const rowLayouts = descriptor?.rowLayouts;
+        const keys = Object.keys(rowLayouts ?? {});
+        if (!rowLayouts || !keys.length || descriptor.kind !== GridViewDescriptorKindEnum.CARDS) {
+            return undefined;
+        }
+        const named = row.rowLayout ? rowLayouts[row.rowLayout] : undefined;
+        if (named) {
+            return named;
+        }
+        const fallback = rowLayouts[DEFAULT_ROW_LAYOUT] ?? (keys.length === 1 ? rowLayouts[keys[0]] : undefined);
+        if (row.rowLayout || !fallback) {
+            const warning = `grid ${this.smartGrid?.gridIdentifier}, row ${row.id}: ` +
+                (row.rowLayout ? `unknown row layout '${row.rowLayout}'` : 'the row names no row layout') +
+                (fallback ? ', the default is used' : ' and there is no default');
+            if (!this.warnedRowLayouts.has(warning)) {
+                this.warnedRowLayouts.add(warning);
+                console.warn(warning);
             }
         }
+        return fallback;
+    }
+    /** Whether a click on the card of this row toggles its selection. */
+    isCardSelectable(row) {
+        const selectionMode = this.smartGrid?.gridModel.view?.descriptor?.selectionMode;
+        return (!!this.rowLayoutOf(row) &&
+            !!selectionMode &&
+            selectionMode !== GridSelectionMode.NONE &&
+            row.selectable !== false);
     }
+    /** Whether a double click on the card of this row fires its default row action. */
+    hasCardDefaultAction(row) {
+        return !!this.rowLayoutOf(row) && !!this.defaultRowActionOf(row);
+    }
+    onCardClick(row) {
+        if (this.isCardSelectable(row)) {
+            this.onSelect(row.id);
+        }
+    }
+    onCardDoubleClick(row) {
+        if (this.hasCardDefaultAction(row)) {
+            this.onDoubleClick(row);
+        }
+    }
+    //#endregion
     async onSelect(rowId) {
         this.isBlocked = true;
         const row = this.service.gridModel.page.rows?.find((gridRow) => gridRow.id === rowId);
@@ -18771,6 +19717,12 @@ class SmartGridComponent {
         };
         this.dialog.open(TableLayoutDefinerComponent, { data: dialogData });
     }
+    calcStyle(style) {
+        return SmartStyleUtility.getNgStyles(style);
+    }
+    calcClasses(style) {
+        return SmartStyleUtility.getNgClasses(style);
+    }
     get showEditColumns() {
         return {
             title: '',
@@ -18781,11 +19733,11 @@ class SmartGridComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartGridComponent, isStandalone: true, selector: "smart-grid", inputs: { smartGrid: { classPropertyName: "smartGrid", publicName: "smartGrid", isSignal: false, isRequired: false, transformFunction: null }, uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: false, isRequired: false, transformFunction: null }, parentLayoutComponent: { classPropertyName: "parentLayoutComponent", publicName: "parentLayoutComponent", isSignal: true, isRequired: false, transformFunction: null }, dev: { classPropertyName: "dev", publicName: "dev", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-testid": "this.testId" } }, providers: [SmartGridService], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }, { propertyName: "expandedRowsComps", predicate: ExpandedRowRendererComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (smartGrid) {\n<div class=\"smartGrid-container\">\n  <div class=\"smart-grid-toolbar\">\n    <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\n    @if (smartGrid.showEditColumns) {\n    <ui-action-button (actionClick)=\"editColumns()\" [descriptor]=\"showEditColumns\">\n    </ui-action-button>\n    }\n  </div>\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\n  <div class=\"smartGridContent\">\n    <div>\n      @if (smartGrid.showResultCount) {\n      <div>\n        <div class=\"smartGrid-data-number\">\n          {{ smartGrid.gridModel.totalRowCount }}\n        </div>\n      </div>\n      }\n    </div>\n    <div class=\"smart-grid-table-container\">\n      <ng-template #table></ng-template>\n    </div>\n    @if (smartGrid.layoutDef === layoutDef().EXPANDABLE) {\n    <div>\n      @for (expandableSection of expandableSections; track expandableSection) {\n      <smart-expandable-section #gridExpandableSection [data]=\"expandableSection\"></smart-expandable-section>\n      }\n    </div>\n    }\n    @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\n    <div class=\"cards-container\" [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\">\n      @for (row of smartGrid.gridModel.page.rows; track row.id) {\n      <app-smart-grid-card class=\"smartGrid-card-container\" [class.clickable-row]=\"row.layoutDescriptor\"\n        (click)=\"row.layoutDescriptor && onClick(row)\" [item]=\"row\" [smartGrid]=\"smartGrid\"\n        [parentLayoutComponent]=\"parentLayoutComponent()\"></app-smart-grid-card>\n      }\n    </div>\n    }\n    @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\n    <div class=\"tree-container\" [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\">\n      <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding matTreeNodePaddingIndent=\"24\">\n          <button mat-icon-button disabled class=\"tree-button\"></button>\n          <mat-checkbox class=\"checklist-leaf-node\"\n            [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n            (change)=\"treeNodeSelectionToggle(node)\">{{ getTreeItem(node) }}</mat-checkbox>\n        </mat-tree-node>\n        <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding matTreeNodePaddingIndent=\"24\">\n          <button mat-icon-button matTreeNodeToggle class=\"tree-button\" [attr.aria-label]=\"'Toggle ' + node.item\">\n            <mat-icon class=\"mat-icon-rtl-mirror\">\n              {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <mat-checkbox [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n            [indeterminate]=\"descendantsPartiallySelected(node)\" (change)=\"treeNodeSelectionToggle(node)\">{{\n            getTreeItem(node) }}</mat-checkbox>\n        </mat-tree-node>\n      </mat-tree>\n    </div>\n    }\n  </div>\n  @if (smartGrid.paginator) {\n  <div class=\"paginator-row-material\">\n    @if (smartGrid.gridModel.refreshEnabled) {\n    <button mat-icon-button type=\"button\" matTooltip=\"Friss\u00EDt\u00E9s\" (click)=\"refreshPartialResults()\">\n      <mat-icon>refresh</mat-icon>\n    </button>\n    }\n    @if (smartGrid.paginator && !treeControl) {\n    <mat-paginator #paginator [length]=\"length\" [pageIndex]=\"pageIndex\" [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\" (page)=\"onChangePage($event)\"></mat-paginator>\n    }\n  </div>\n  }\n</div>\n}", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}\n"], dependencies: [{ kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid", "parentLayoutComponent"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "directive", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartGridComponent, isStandalone: true, selector: "smart-grid", inputs: { smartGrid: { classPropertyName: "smartGrid", publicName: "smartGrid", isSignal: false, isRequired: false, transformFunction: null }, uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: false, isRequired: false, transformFunction: null }, parentLayoutComponent: { classPropertyName: "parentLayoutComponent", publicName: "parentLayoutComponent", isSignal: true, isRequired: false, transformFunction: null }, dev: { classPropertyName: "dev", publicName: "dev", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-testid": "this.testId" } }, providers: [SmartGridService], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }, { propertyName: "expandedRowsComps", predicate: ExpandedRowRendererComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (smartGrid) {\n<div class=\"smartGrid-container\">\n  <div class=\"smart-grid-toolbar\">\n    <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\n    @if (smartGrid.showEditColumns) {\n    <ui-action-button (actionClick)=\"editColumns()\" [descriptor]=\"showEditColumns\">\n    </ui-action-button>\n    }\n  </div>\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\n  <div class=\"smartGridContent\">\n    <div>\n      @if (smartGrid.showResultCount) {\n      <div>\n        <div class=\"smartGrid-data-number\">\n          {{ smartGrid.gridModel.totalRowCount }}\n        </div>\n      </div>\n      }\n    </div>\n    <div class=\"smart-grid-table-container\">\n      <ng-template #table></ng-template>\n    </div>\n    @if (smartGrid.layoutDef === layoutDef().EXPANDABLE) {\n    <div>\n      @for (expandableSection of expandableSections; track expandableSection) {\n      <smart-expandable-section #gridExpandableSection [data]=\"expandableSection\"></smart-expandable-section>\n      }\n    </div>\n    }\n    @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\n    <div class=\"cards-container\" [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\">\n      @for (row of smartGrid.gridModel.page.rows; track row.id) {\n\n      <app-smart-grid-card class=\"smartGrid-card-container\" [ngClass]=\"calcClasses(row.style)\"\n        [ngStyle]=\"calcStyle(row.style)\"\n        [class.clickable-row]=\"isCardSelectable(row) || hasCardDefaultAction(row)\"\n        [class.selected]=\"!!row.selected && !!rowLayoutOf(row)\"\n        (click)=\"onCardClick(row)\" (dblclick)=\"onCardDoubleClick(row)\" [item]=\"row\"\n        [layout]=\"rowLayoutOf(row)\" [smartGrid]=\"smartGrid\"\n        [parentLayoutComponent]=\"parentLayoutComponent()\"></app-smart-grid-card>\n      }\n    </div>\n    }\n    @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\n    <div class=\"tree-container\" [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\">\n      <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding matTreeNodePaddingIndent=\"24\">\n          <button mat-icon-button disabled class=\"tree-button\"></button>\n          <mat-checkbox class=\"checklist-leaf-node\"\n            [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n            (change)=\"treeNodeSelectionToggle(node)\">{{ getTreeItem(node) }}</mat-checkbox>\n        </mat-tree-node>\n        <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding matTreeNodePaddingIndent=\"24\">\n          <button mat-icon-button matTreeNodeToggle class=\"tree-button\" [attr.aria-label]=\"'Toggle ' + node.item\">\n            <mat-icon class=\"mat-icon-rtl-mirror\">\n              {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <mat-checkbox [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n            [indeterminate]=\"descendantsPartiallySelected(node)\" (change)=\"treeNodeSelectionToggle(node)\">{{\n            getTreeItem(node) }}</mat-checkbox>\n        </mat-tree-node>\n      </mat-tree>\n    </div>\n    }\n  </div>\n  @if (smartGrid.paginator) {\n  <div class=\"paginator-row-material\">\n    @if (smartGrid.gridModel.refreshEnabled) {\n    <button mat-icon-button type=\"button\" matTooltip=\"Friss\u00EDt\u00E9s\" (click)=\"refreshPartialResults()\">\n      <mat-icon>refresh</mat-icon>\n    </button>\n    }\n    @if (smartGrid.paginator && !treeControl) {\n    <mat-paginator #paginator [length]=\"length\" [pageIndex]=\"pageIndex\" [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\" (page)=\"onChangePage($event)\"></mat-paginator>\n    }\n  </div>\n  }\n</div>\n}", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}.smartGrid-card-container.selected{outline:2px solid var(--mat-sys-primary, currentColor)}\n"], dependencies: [{ kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid", "parentLayoutComponent", "layout"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "directive", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-grid', providers: [SmartGridService], imports: [UiActionToolbarComponent, UiActionButtonComponent, MatMiniFabButton, MatIcon, ExpandableSectionComponent, NgStyle, SmartGridCardComponent, MatTree, MatTreeNodeDef, MatTreeNode, MatTreeNodeToggle, MatTreeNodePadding, MatIconButton, MatCheckbox, MatTooltip, MatPaginator], template: "@if (smartGrid) {\n<div class=\"smartGrid-container\">\n  <div class=\"smart-grid-toolbar\">\n    <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\n    @if (smartGrid.showEditColumns) {\n    <ui-action-button (actionClick)=\"editColumns()\" [descriptor]=\"showEditColumns\">\n    </ui-action-button>\n    }\n  </div>\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\n  <div class=\"smartGridContent\">\n    <div>\n      @if (smartGrid.showResultCount) {\n      <div>\n        <div class=\"smartGrid-data-number\">\n          {{ smartGrid.gridModel.totalRowCount }}\n        </div>\n      </div>\n      }\n    </div>\n    <div class=\"smart-grid-table-container\">\n      <ng-template #table></ng-template>\n    </div>\n    @if (smartGrid.layoutDef === layoutDef().EXPANDABLE) {\n    <div>\n      @for (expandableSection of expandableSections; track expandableSection) {\n      <smart-expandable-section #gridExpandableSection [data]=\"expandableSection\"></smart-expandable-section>\n      }\n    </div>\n    }\n    @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\n    <div class=\"cards-container\" [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\">\n      @for (row of smartGrid.gridModel.page.rows; track row.id) {\n      <app-smart-grid-card class=\"smartGrid-card-container\" [class.clickable-row]=\"row.layoutDescriptor\"\n        (click)=\"row.layoutDescriptor && onClick(row)\" [item]=\"row\" [smartGrid]=\"smartGrid\"\n        [parentLayoutComponent]=\"parentLayoutComponent()\"></app-smart-grid-card>\n      }\n    </div>\n    }\n    @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\n    <div class=\"tree-container\" [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\">\n      <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding matTreeNodePaddingIndent=\"24\">\n          <button mat-icon-button disabled class=\"tree-button\"></button>\n          <mat-checkbox class=\"checklist-leaf-node\"\n            [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n            (change)=\"treeNodeSelectionToggle(node)\">{{ getTreeItem(node) }}</mat-checkbox>\n        </mat-tree-node>\n        <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding matTreeNodePaddingIndent=\"24\">\n          <button mat-icon-button matTreeNodeToggle class=\"tree-button\" [attr.aria-label]=\"'Toggle ' + node.item\">\n            <mat-icon class=\"mat-icon-rtl-mirror\">\n              {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <mat-checkbox [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n            [indeterminate]=\"descendantsPartiallySelected(node)\" (change)=\"treeNodeSelectionToggle(node)\">{{\n            getTreeItem(node) }}</mat-checkbox>\n        </mat-tree-node>\n      </mat-tree>\n    </div>\n    }\n  </div>\n  @if (smartGrid.paginator) {\n  <div class=\"paginator-row-material\">\n    @if (smartGrid.gridModel.refreshEnabled) {\n    <button mat-icon-button type=\"button\" matTooltip=\"Friss\u00EDt\u00E9s\" (click)=\"refreshPartialResults()\">\n      <mat-icon>refresh</mat-icon>\n    </button>\n    }\n    @if (smartGrid.paginator && !treeControl) {\n    <mat-paginator #paginator [length]=\"length\" [pageIndex]=\"pageIndex\" [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\" (page)=\"onChangePage($event)\"></mat-paginator>\n    }\n  </div>\n  }\n</div>\n}", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}\n"] }]
+            args: [{ selector: 'smart-grid', providers: [SmartGridService], imports: [UiActionToolbarComponent, UiActionButtonComponent, MatMiniFabButton, MatIcon, ExpandableSectionComponent, NgStyle, NgClass, SmartGridCardComponent, MatTree, MatTreeNodeDef, MatTreeNode, MatTreeNodeToggle, MatTreeNodePadding, MatIconButton, MatCheckbox, MatTooltip, MatPaginator], template: "@if (smartGrid) {\n<div class=\"smartGrid-container\">\n  <div class=\"smart-grid-toolbar\">\n    <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\n    @if (smartGrid.showEditColumns) {\n    <ui-action-button (actionClick)=\"editColumns()\" [descriptor]=\"showEditColumns\">\n    </ui-action-button>\n    }\n  </div>\n  <!-- <div [ngClass]=\"isBlocked ? 'blocked' : ''\"></div> -->\n  <div class=\"smartGridContent\">\n    <div>\n      @if (smartGrid.showResultCount) {\n      <div>\n        <div class=\"smartGrid-data-number\">\n          {{ smartGrid.gridModel.totalRowCount }}\n        </div>\n      </div>\n      }\n    </div>\n    <div class=\"smart-grid-table-container\">\n      <ng-template #table></ng-template>\n    </div>\n    @if (smartGrid.layoutDef === layoutDef().EXPANDABLE) {\n    <div>\n      @for (expandableSection of expandableSections; track expandableSection) {\n      <smart-expandable-section #gridExpandableSection [data]=\"expandableSection\"></smart-expandable-section>\n      }\n    </div>\n    }\n    @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\n    <div class=\"cards-container\" [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\">\n      @for (row of smartGrid.gridModel.page.rows; track row.id) {\n\n      <app-smart-grid-card class=\"smartGrid-card-container\" [ngClass]=\"calcClasses(row.style)\"\n        [ngStyle]=\"calcStyle(row.style)\"\n        [class.clickable-row]=\"isCardSelectable(row) || hasCardDefaultAction(row)\"\n        [class.selected]=\"!!row.selected && !!rowLayoutOf(row)\"\n        (click)=\"onCardClick(row)\" (dblclick)=\"onCardDoubleClick(row)\" [item]=\"row\"\n        [layout]=\"rowLayoutOf(row)\" [smartGrid]=\"smartGrid\"\n        [parentLayoutComponent]=\"parentLayoutComponent()\"></app-smart-grid-card>\n      }\n    </div>\n    }\n    @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\n    <div class=\"tree-container\" [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\">\n      <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\n        <mat-tree-node *matTreeNodeDef=\"let node\" matTreeNodeToggle matTreeNodePadding matTreeNodePaddingIndent=\"24\">\n          <button mat-icon-button disabled class=\"tree-button\"></button>\n          <mat-checkbox class=\"checklist-leaf-node\"\n            [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n            (change)=\"treeNodeSelectionToggle(node)\">{{ getTreeItem(node) }}</mat-checkbox>\n        </mat-tree-node>\n        <mat-tree-node *matTreeNodeDef=\"let node; when: hasChild\" matTreeNodePadding matTreeNodePaddingIndent=\"24\">\n          <button mat-icon-button matTreeNodeToggle class=\"tree-button\" [attr.aria-label]=\"'Toggle ' + node.item\">\n            <mat-icon class=\"mat-icon-rtl-mirror\">\n              {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n            </mat-icon>\n          </button>\n          <mat-checkbox [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n            [indeterminate]=\"descendantsPartiallySelected(node)\" (change)=\"treeNodeSelectionToggle(node)\">{{\n            getTreeItem(node) }}</mat-checkbox>\n        </mat-tree-node>\n      </mat-tree>\n    </div>\n    }\n  </div>\n  @if (smartGrid.paginator) {\n  <div class=\"paginator-row-material\">\n    @if (smartGrid.gridModel.refreshEnabled) {\n    <button mat-icon-button type=\"button\" matTooltip=\"Friss\u00EDt\u00E9s\" (click)=\"refreshPartialResults()\">\n      <mat-icon>refresh</mat-icon>\n    </button>\n    }\n    @if (smartGrid.paginator && !treeControl) {\n    <mat-paginator #paginator [length]=\"length\" [pageIndex]=\"pageIndex\" [pageSize]=\"pageSize\"\n      [pageSizeOptions]=\"pageSizeOptions\" (page)=\"onChangePage($event)\"></mat-paginator>\n    }\n  </div>\n  }\n</div>\n}", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}.smartGrid-card-container.selected{outline:2px solid var(--mat-sys-primary, currentColor)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { smartGrid: [{
                 type: Input
             }], uuid: [{
@@ -22592,12 +23544,13 @@ class SmartComponentLayoutComponent {
             layoutDefinitions: this.smartComponentLayout?.form,
         });
         const gridRow = this.gridRow;
-        if (gridRow && !gridRow.valueSets) {
-            gridRow.valueSets = this.smartComponent?.model?.valueSets;
-        }
         this.smartForm = {
             direction: this.getFormLayout(),
-            componentModel: gridRow ? gridRow : this.smartComponent?.model,
+            // A row gets an envelope rather than being written into: its `data` stays the row's own
+            // object, and the valueSets of the page come along by reference.
+            componentModel: gridRow
+                ? { ...gridRow, valueSets: gridRow.valueSets ?? this.smartComponent?.model?.valueSets }
+                : this.smartComponent?.model,
             widgets,
         };
     }
@@ -22620,9 +23573,6 @@ class SmartComponentLayoutComponent {
             },
             layoutDef: SmartLayoutDef.TABLE,
             paginator: false,
-            // What a card of this grid instantiates for a row that carries a layoutDescriptor.
-            // The grid model is the only way across: the card cannot import this class.
-            layoutComponent: SmartComponentLayoutComponent,
         };
     }
     constructMap() {
@@ -22839,8 +23789,6 @@ class SearchPageComponent extends SmartComponent {
             options: {
                 rowUiActionType: GridUiActionType.POPUP_MENU,
             },
-            // Card grids render the row's own layout with this class (see SmartGridCardComponent).
-            layoutComponent: SmartComponentLayoutComponent,
         };
     }
     isShowNoResultText() {
@@ -23040,6 +23988,8 @@ function provideSmartNgClient(config = {}, ...features) {
         SmartErrorCatchingInterceptor,
         SmartHeaderMaintainerInterceptor,
         { provide: DIALOG_DISABLE_CLOSE, useValue: resolved.dialogDisableClose },
+        // What a grid card renders a row layout with; the card cannot import the class itself.
+        { provide: SMART_ROW_LAYOUT_COMPONENT, useValue: SmartComponentLayoutComponent },
         // The ui-action dialog services, reachable through tokens because service and dialog
         // component import each other (see dialog-service.tokens.ts).
         { provide: UI_ACTION_CONFIRM_DIALOG_SERVICE, useClass: UiActionConfirmDialogService },
@@ -23804,5 +24754,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ACLEntry, APIS$5 as APIS, AclEditingViewComponent, ApiQueueService, BASE_PATH$7 as BASE_PATH, COLLECTION_FORMATS$7 as COLLECTION_FORMATS, CUSTOM_DIAGRAM_OPTIONS, CloseResult, ComponentFactoryService, ComponentType, ComponentWidgetType, Configuration$7 as Configuration, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultChartOptionsProvider, DefaultUiActionCode_CLOSE, DrawTime, EMPTY_PARAMS, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, FilterExpressionBoolOperator$1 as FilterExpressionBoolOperator, FilterExpressionBuilderGroupBuilderGroupKindEnum, FilterExpressionBuilderUiModelTypeEnum, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderByOrderEnum, GenericPageComponent, GeoMapDataLoadingMode, GeoMapDataSourceType, GeoMapItemKind, GeoMapOperationMode, GeoMapSelectionMode, GeoMapTextType, GridColumnContentType, GridDataAccessConfigKindEnum, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptorKindEnum, HighlightPipe, IS_ASYNC_PARAM_NAME, IconPosition, ImageResourceKindEnum, InvalidSmartlinkComponent, LayoutDirection, LinkTargetEnum, MAP_ENGINE, MapEngine, MenuOpenDirection, MenuTriggerType, MessageOptionType, MessageTextType, MessageType, NAMED_VALIDATOR, NamedValidatorOperationEnum, NamedValidatorService, NoPermissionPageComponent, REUSE_ROUTER_SLOT_COMPONENT, ROOT_CONTAINER_UUID, ROUTER_SLOT_ID, RecordingUploaderPropertiesOpenDirectionEnum, SMART_DATE_FORMATS, SMART_DEFAULT_VIEW_COMPONENTS, SMART_NG_CLIENT_CONFIG, SearchPageComponent, SelectionDefinitionTypeEnum, SelectionDefinitionValueSetValueTypeEnum, ServerRequestType, SessionAPIS, SessionErrorBehaviour, SessionService, SmartActionHost, SmartActionType, SmartBackendBootstrapService, SmartComponent, SmartComponentApiClient, SmartComponentDetachedDirective, SmartComponentHost, SmartComponentLayoutComponent, SmartDateFnsAdapter, SmartDatePipe, SmartDateTimePipe, SmartDefaultErrorUiService, SmartDiagramComponent, SmartDialog, SmartEmbeddedSlotDirective, SmartExpandableSectionService, SmartFileEditorComponent, SmartFilterComponent, SmartFilterEditorContentComponent, SmartFilterEditorService, SmartFilterExpressionFieldComponent, SmartFilterPosition, SmartFilterType, SmartFilterWidgetComponent, SmartFormInputMode, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridService, SmartGridType, SmartIconComponent, SmartIconService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkMigrationStatusStatusEnum, SmartLinkUuidVariableInPath, SmartMapComponent, SmartMultiFileEditorComponent, SmartNavbarComponent, SmartNavbarService, SmartNavigationService, SmartNgClientFeatureKind, SmartService, SmartSessionService, SmartSessionTimerComponent, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTooltipDirective, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidatorName, SmartViewContextService, SmartViewRedirect, SmartVoiceRecorderComponent, SmartWidgetHintPosition, SmartWidgetHintPositionEnum, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmarttreeGenericService, SmarttreeService, SubjectSelectorComponent, ThemeService, ToggleLabelPosition, ToolbarAlignment, ToolbarDirection, TreeArrowPosition, USE_ADVANCED_FILTER, UiActionButtonComponent, UiActionButtonType, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogButtonComponent, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, UiActionTooltipTooltipPositionEnum, UiBadgeComponent, UiBadgeDirective, UploadWidgetType, ValidationResultPageComponent, ValueChangeMode, ViewContextRebuiltError, ViewEventHandlerViewEventTypeEnum, ViewService, ViewState, ViewType, barChart, bubbleChart, createBasicOptions, doughnutChart, horizontalBarChart, horizontalStackedBarChart, injectSmartComponent, multiAxisLineChart, pieChart, polarAreaChart, provideSmartNgClient, radarChart, registerSmartWidget, resolveDateLocale, resolveSlot, resolveSmartNgClientConfig, resolveViewHandler, scatterChart, stackedBarChart, transformDataToBarLikeDataSet, transformDataToBasicDataSets, transformDataToBubble, transformDataToScatter, withSmartDiagram, withSmartMap };
+export { ACLEntry, APIS$5 as APIS, AclEditingViewComponent, ApiQueueService, BASE_PATH$7 as BASE_PATH, COLLECTION_FORMATS$7 as COLLECTION_FORMATS, CUSTOM_DIAGRAM_OPTIONS, CloseResult, ComponentFactoryService, ComponentType, ComponentWidgetType, Configuration$7 as Configuration, DEFAULT_ROW_LAYOUT, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultChartOptionsProvider, DefaultUiActionCode_CLOSE, DrawTime, EMPTY_PARAMS, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, FilterExpressionBoolOperator$1 as FilterExpressionBoolOperator, FilterExpressionBuilderGroupBuilderGroupKindEnum, FilterExpressionBuilderUiModelTypeEnum, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderByOrderEnum, GenericPageComponent, GeoMapDataLoadingMode, GeoMapDataSourceType, GeoMapItemKind, GeoMapOperationMode, GeoMapSelectionMode, GeoMapTextType, GridColumnContentType, GridDataAccessConfigKindEnum, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptorKindEnum, HighlightPipe, IS_ASYNC_PARAM_NAME, IconPosition, ImageResourceKindEnum, InvalidSmartlinkComponent, LayoutDirection, LinkTargetEnum, MAP_ENGINE, MapEngine, MenuOpenDirection, MenuTriggerType, MessageOptionType, MessageTextType, MessageType, NAMED_VALIDATOR, NamedValidatorOperationEnum, NamedValidatorService, NoPermissionPageComponent, REUSE_ROUTER_SLOT_COMPONENT, ROOT_CONTAINER_UUID, ROUTER_SLOT_ID, RecordingUploaderPropertiesOpenDirectionEnum, SMART_DATE_FORMATS, SMART_DEFAULT_VIEW_COMPONENTS, SMART_NG_CLIENT_CONFIG, SMART_ROW_LAYOUT_COMPONENT, SearchPageComponent, SelectionDefinitionTypeEnum, SelectionDefinitionValueSetValueTypeEnum, ServerRequestType, SessionAPIS, SessionErrorBehaviour, SessionService, SmartActionHost, SmartActionType, SmartBackendBootstrapService, SmartComponent, SmartComponentApiClient, SmartComponentDetachedDirective, SmartComponentHost, SmartComponentLayoutComponent, SmartDateFnsAdapter, SmartDatePipe, SmartDateTimePipe, SmartDefaultErrorUiService, SmartDiagramComponent, SmartDialog, SmartEmbeddedSlotDirective, SmartExpandableSectionService, SmartFileEditorComponent, SmartFilterComponent, SmartFilterEditorContentComponent, SmartFilterEditorService, SmartFilterExpressionFieldComponent, SmartFilterPosition, SmartFilterType, SmartFilterWidgetComponent, SmartFormInputMode, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridService, SmartGridType, SmartIconComponent, SmartIconService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkMigrationStatusStatusEnum, SmartLinkUuidVariableInPath, SmartMapComponent, SmartMultiFileEditorComponent, SmartNavbarComponent, SmartNavbarService, SmartNavigationService, SmartNgClientFeatureKind, SmartService, SmartSessionService, SmartSessionTimerComponent, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTooltipDirective, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidatorName, SmartViewContextService, SmartViewRedirect, SmartVoiceRecorderComponent, SmartWidgetHintPosition, SmartWidgetHintPositionEnum, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmarttreeGenericService, SmarttreeService, SubjectSelectorComponent, ThemeService, ToggleLabelPosition, ToolbarAlignment, ToolbarDirection, TreeArrowPosition, USE_ADVANCED_FILTER, UiActionButtonComponent, UiActionButtonType, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogButtonComponent, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, UiActionTooltipTooltipPositionEnum, UiBadgeComponent, UiBadgeDirective, UploadWidgetType, ValidationResultPageComponent, ValueChangeMode, ViewContextRebuiltError, ViewEventHandlerViewEventTypeEnum, ViewService, ViewState, ViewType, barChart, bubbleChart, createBasicOptions, doughnutChart, horizontalBarChart, horizontalStackedBarChart, injectSmartComponent, multiAxisLineChart, pieChart, polarAreaChart, provideSmartNgClient, radarChart, registerSmartWidget, resolveDateLocale, resolveSlot, resolveSmartNgClientConfig, resolveViewHandler, scatterChart, stackedBarChart, transformDataToBarLikeDataSet, transformDataToBasicDataSets, transformDataToBubble, transformDataToScatter, withSmartDiagram, withSmartMap };
 //# sourceMappingURL=smartbit4all-ng-client.mjs.map