@smartbit4all/ng-client 7.3.5 → 7.3.6

package/fesm2022/smartbit4all-ng-client.mjs

@@ -3704,6 +3704,77 @@ function isMacPlatform() {
     return /mac|iphone|ipad|ipod/i.test(platform ?? '');
 }
 
+/**
+ * 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.
+ */
+/**
+ * How the grid shows the rowState of its rows: as the style of the row (the sm-grid-row-* classes), as an icon in a column of its own before the other columns, or both. The column is not a column of the descriptor: it is not editable and not offered by the column chooser.
+ */
+var GridRowStateDisplay;
+(function (GridRowStateDisplay) {
+    GridRowStateDisplay["STYLE"] = "STYLE";
+    GridRowStateDisplay["COLUMN"] = "COLUMN";
+    GridRowStateDisplay["BOTH"] = "BOTH";
+})(GridRowStateDisplay || (GridRowStateDisplay = {}));
+
+/**
+ * The class that shows what an editing session did to a row. The state is the backend's own
+ * code, so an application specific state gets a class of its own without the client knowing
+ * it; a row the session left alone carries no state and gets no class.
+ */
+function gridRowStateClass(row) {
+    return rowStateClass(row?.rowState);
+}
+/** The class of a row state on whatever shows it: a grid row, or the tab of an object. */
+function rowStateClass(rowState) {
+    return rowState ? `sm-grid-row-${gridRowStateName(rowState)}` : undefined;
+}
+/** The state code in the form of a class name: `CONTAINS_CHANGE` is `contains-change`. */
+function gridRowStateName(rowState) {
+    return rowState.toLowerCase().replace(/_/g, '-');
+}
+/** Whether the row states show as the classes of the rows; a grid that says nothing does. */
+function showsRowStateStyle(display) {
+    return display !== GridRowStateDisplay.COLUMN;
+}
+/** Whether the row states show as icons in a column of their own, before the other columns. */
+function showsRowStateColumn(display) {
+    return display === GridRowStateDisplay.COLUMN || display === GridRowStateDisplay.BOTH;
+}
+/** The id of the column of the row states; no property of a row is named so. */
+const ROW_STATE_COLUMN = 'sm-row-state';
+/** The icons of the states the platform sends; an application specific state has none. */
+const ROW_STATE_ICONS = {
+    NEW: 'add',
+    MODIFIED: 'edit',
+    DELETED: 'delete',
+    MOVED: 'swap_vert',
+    CONTAINS_CHANGE: 'fiber_manual_record',
+};
+/** The icon of the state of the row in the column of the row states. */
+function gridRowStateIcon(row) {
+    return row?.rowState ? ROW_STATE_ICONS[row.rowState] : undefined;
+}
+/** The class of the icon of the state of the row, so each state has a colour of its own. */
+function gridRowStateIconClass(row) {
+    return row?.rowState ? `sm-grid-row-state-icon-${gridRowStateName(row.rowState)}` : undefined;
+}
+/**
+ * The tooltip of the state of the row: the label the server sent for the state in the locale of
+ * the session; a state without a label has none.
+ */
+function gridRowStateLabel(row, labels) {
+    return row?.rowState ? labels?.[row.rowState] : undefined;
+}
+
 class UiActionButtonComponent {
     constructor() {
         this.changeDetector = inject(ChangeDetectorRef);
@@ -3718,6 +3789,12 @@ class UiActionButtonComponent {
         ...(ngDevMode ? [undefined, { debugName: "identifier" }] : /* istanbul ignore next */ []));
         this.viewActivated = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "viewActivated" }] : /* istanbul ignore next */ []));
+        /** Whether the button is a tab of a toolbar drawn as tabs; the activated one is the selected. */
+        this.tab = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tab" }] : /* istanbul ignore next */ []));
+        /** The row state of the object the action stands for; a tab shows it as a grid row does. */
+        this.rowState = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "rowState" }] : /* istanbul ignore next */ []));
         this.addedCssClass = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "addedCssClass" }] : /* istanbul ignore next */ []));
         this.addBasicClasses = input(true, /* @ts-ignore */
@@ -3879,7 +3956,10 @@ class UiActionButtonComponent {
             'sb4-view-activated': viewActivated === true,
             'sb4-view-not-activated': viewActivated === false,
         };
-        return { ...typeObj, ...styleClasses, ...activationClasses };
+        const tab = this.tab();
+        const rowStateCls = tab ? rowStateClass(this.rowState()) : undefined;
+        const tabClasses = { 'sb4-tab': tab, ...(rowStateCls ? { [rowStateCls]: true } : {}) };
+        return { ...typeObj, ...styleClasses, ...activationClasses, ...tabClasses };
     }
     renderPre() {
         const descriptor = this.effectiveDescriptor();
@@ -3933,12 +4013,12 @@ class UiActionButtonComponent {
         return null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionButtonComponent, isStandalone: true, selector: "ui-action-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, descriptor: { classPropertyName: "descriptor", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, viewActivated: { classPropertyName: "viewActivated", publicName: "viewActivated", isSignal: true, isRequired: false, transformFunction: null }, addedCssClass: { classPropertyName: "addedCssClass", publicName: "addedCssClass", isSignal: true, isRequired: false, transformFunction: null }, addBasicClasses: { classPropertyName: "addBasicClasses", publicName: "addBasicClasses", isSignal: true, isRequired: false, transformFunction: null }, iconPlaceholder: { classPropertyName: "iconPlaceholder", publicName: "iconPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, chords: { classPropertyName: "chords", publicName: "chords", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", actionDoubleClick: "actionDoubleClick" }, ngImport: i0, template: "@if (effectiveDescriptor().type === 'SEPARATOR') {\n  <div class=\"separator\">\n    @if (effectiveDescriptor().title) {\n      <span class=\"separator-label\" [style.color]=\"getSeparatorColor()\">\n        {{ effectiveDescriptor().title }}\n      </span>\n    }\n    <hr class=\"separator-line\" [style.border-top-color]=\"getSeparatorColor()\" />\n  </div>\n} @else {\n  <ng-container *ngTemplateOutlet=\"buttonWithBadge\"></ng-container>\n}\n\n<ng-template #buttonWithBadge>\n  @if (effectiveDescriptor() && effectiveDescriptor().badge) {\n    <ui-badge [descriptor]=\"effectiveDescriptor().badge\">\n      <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n    </ui-badge>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #buttonTemplate>\n  <button\n    mat-button\n    [smartTooltip]=\"tooltip()\"\n    [color]=\"effectiveDescriptor().color\"\n    [disabled]=\"!!disabled()\"\n    (click)=\"onActionClicked($event, mainActionModel())\"\n    (dblclick)=\"onActionDoubleClicked($event)\"\n    [ngStyle]=\"calcStyle(effectiveDescriptor().style)\"\n    [ngClass]=\"getCombinedClasses()\"\n    [style.justify-content]=\"getJustifyContent()\"\n    class=\"{{ getbtnClass() }} {{ addedCssClass() }}\"\n    type=\"button\"\n    [attr.data-testid]=\"code() ?? null\"\n    [attr.data-testid2]=\"getDataTestId()\"\n    [attr.aria-label]=\"getAriaLabel()\"\n    [attr.aria-keyshortcuts]=\"getAriaKeyShortcuts()\"\n    >\n    @if (isOnlyIcon()) {\n      @if (renderPlaceholderPre() || renderPlaceholderPost()) {\n        <smart-icon></smart-icon>\n      } @else if (effectiveDescriptor().iconResource) {\n        <smart-icon\n          [imageResource]=\"effectiveDescriptor().iconResource\"\n          [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n        ></smart-icon>\n      } @else {\n        <smart-icon\n          [icon]=\"effectiveDescriptor().icon\"\n          [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n        ></smart-icon>\n      }\n    } @else {\n      @if (renderPre() || renderPlaceholderPre()) {\n        <ng-container *ngTemplateOutlet=\"buttonIcon\" />\n      }\n      {{ effectiveDescriptor().title }}\n      @if (renderPost() || renderPlaceholderPost()) {\n        <ng-container *ngTemplateOutlet=\"buttonIcon\" />\n      }\n    }\n  </button>\n</ng-template>\n\n\n<ng-template #buttonIcon>\n  @if (renderPlaceholderPre() || renderPlaceholderPost()) {\n    <smart-icon></smart-icon>\n  } @else if (effectiveDescriptor().iconResource) {\n    <smart-icon\n      [imageResource]=\"effectiveDescriptor().iconResource\"\n      [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n    ></smart-icon>\n  } @else {\n    <smart-icon\n      [icon]=\"effectiveDescriptor().icon\"\n      [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n    ></smart-icon>\n  }\n</ng-template>\n", styles: [":host{--text-color: var(--color-text, #132033)}:host ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center;line-height:1;padding:.75rem 1rem}:host{height:fit-content;width:fit-content;padding:unset;margin:unset}:host ::ng-deep .mdc-button__label{display:flex;flex-direction:row;gap:1rem;align-items:center;justify-content:center;white-space:nowrap}:host ::ng-deep .mdc-button{height:fit-content;min-height:var(--mat-button-text-container-height)}:host ::ng-deep .mat-mdc-icon-button ::ng-deep img{width:unset;height:unset}.separator{display:flex;flex-direction:column;padding:0 .5rem;width:100%}.separator-label{font-size:.7rem;color:var(--color-text-muted, #68778e);padding-bottom:.15rem}.separator-line{border:none;border-top:1px solid var(--color-border, #e4eaf2);margin:0}:host ::ng-deep button.sb4-view-activated{background:var(--sb4-view-activated-bg, var(--primary-color, #384372));border-color:var(--sb4-view-activated-border-color, transparent);font-weight:var(--sb4-view-activated-font-weight, 600)}:host ::ng-deep button.sb4-view-activated,:host ::ng-deep button.sb4-view-activated *{color:var( --sb4-view-activated-color, var(--primary-color-text, var(--primary-text-color, #ffffff)) )!important}:host ::ng-deep button.sb4-view-activated:hover{background:var(--sb4-view-activated-bg, var(--primary-color, #384372))!important;box-shadow:var( --sb4-view-activated-hover-shadow, 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12) )}:host ::ng-deep button.sm-crumb-ahead{opacity:.6}:host ::ng-deep button.sm-crumb-current{opacity:1;font-weight:600;color:var(--color-text, #132033)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UiBadgeComponent, selector: "ui-badge", inputs: ["descriptor", "inputValue"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: UiActionButtonComponent, isStandalone: true, selector: "ui-action-button", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, descriptor: { classPropertyName: "descriptor", publicName: "descriptor", isSignal: true, isRequired: true, transformFunction: null }, code: { classPropertyName: "code", publicName: "code", isSignal: true, isRequired: false, transformFunction: null }, identifier: { classPropertyName: "identifier", publicName: "identifier", isSignal: true, isRequired: false, transformFunction: null }, viewActivated: { classPropertyName: "viewActivated", publicName: "viewActivated", isSignal: true, isRequired: false, transformFunction: null }, tab: { classPropertyName: "tab", publicName: "tab", isSignal: true, isRequired: false, transformFunction: null }, rowState: { classPropertyName: "rowState", publicName: "rowState", isSignal: true, isRequired: false, transformFunction: null }, addedCssClass: { classPropertyName: "addedCssClass", publicName: "addedCssClass", isSignal: true, isRequired: false, transformFunction: null }, addBasicClasses: { classPropertyName: "addBasicClasses", publicName: "addBasicClasses", isSignal: true, isRequired: false, transformFunction: null }, iconPlaceholder: { classPropertyName: "iconPlaceholder", publicName: "iconPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, chords: { classPropertyName: "chords", publicName: "chords", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", actionDoubleClick: "actionDoubleClick" }, ngImport: i0, template: "@if (effectiveDescriptor().type === 'SEPARATOR') {\n  <div class=\"separator\">\n    @if (effectiveDescriptor().title) {\n      <span class=\"separator-label\" [style.color]=\"getSeparatorColor()\">\n        {{ effectiveDescriptor().title }}\n      </span>\n    }\n    <hr class=\"separator-line\" [style.border-top-color]=\"getSeparatorColor()\" />\n  </div>\n} @else {\n  <ng-container *ngTemplateOutlet=\"buttonWithBadge\"></ng-container>\n}\n\n<ng-template #buttonWithBadge>\n  @if (effectiveDescriptor() && effectiveDescriptor().badge) {\n    <ui-badge [descriptor]=\"effectiveDescriptor().badge\">\n      <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n    </ui-badge>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #buttonTemplate>\n  <button\n    mat-button\n    [smartTooltip]=\"tooltip()\"\n    [color]=\"effectiveDescriptor().color\"\n    [disabled]=\"!!disabled()\"\n    (click)=\"onActionClicked($event, mainActionModel())\"\n    (dblclick)=\"onActionDoubleClicked($event)\"\n    [ngStyle]=\"calcStyle(effectiveDescriptor().style)\"\n    [ngClass]=\"getCombinedClasses()\"\n    [style.justify-content]=\"getJustifyContent()\"\n    class=\"{{ getbtnClass() }} {{ addedCssClass() }}\"\n    type=\"button\"\n    [attr.data-testid]=\"code() ?? null\"\n    [attr.data-testid2]=\"getDataTestId()\"\n    [attr.aria-label]=\"getAriaLabel()\"\n    [attr.aria-keyshortcuts]=\"getAriaKeyShortcuts()\"\n    [attr.role]=\"tab() ? 'tab' : null\"\n    [attr.aria-selected]=\"tab() ? viewActivated() === true : null\"\n    >\n    @if (isOnlyIcon()) {\n      @if (renderPlaceholderPre() || renderPlaceholderPost()) {\n        <smart-icon></smart-icon>\n      } @else if (effectiveDescriptor().iconResource) {\n        <smart-icon\n          [imageResource]=\"effectiveDescriptor().iconResource\"\n          [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n        ></smart-icon>\n      } @else {\n        <smart-icon\n          [icon]=\"effectiveDescriptor().icon\"\n          [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n        ></smart-icon>\n      }\n    } @else {\n      @if (renderPre() || renderPlaceholderPre()) {\n        <ng-container *ngTemplateOutlet=\"buttonIcon\" />\n      }\n      {{ effectiveDescriptor().title }}\n      @if (renderPost() || renderPlaceholderPost()) {\n        <ng-container *ngTemplateOutlet=\"buttonIcon\" />\n      }\n    }\n  </button>\n</ng-template>\n\n\n<ng-template #buttonIcon>\n  @if (renderPlaceholderPre() || renderPlaceholderPost()) {\n    <smart-icon></smart-icon>\n  } @else if (effectiveDescriptor().iconResource) {\n    <smart-icon\n      [imageResource]=\"effectiveDescriptor().iconResource\"\n      [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n    ></smart-icon>\n  } @else {\n    <smart-icon\n      [icon]=\"effectiveDescriptor().icon\"\n      [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n    ></smart-icon>\n  }\n</ng-template>\n", styles: [":host{--text-color: var(--color-text, #132033)}:host ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center;line-height:1;padding:.75rem 1rem}:host{height:fit-content;width:fit-content;padding:unset;margin:unset}:host ::ng-deep .mdc-button__label{display:flex;flex-direction:row;gap:1rem;align-items:center;justify-content:center;white-space:nowrap}:host ::ng-deep .mdc-button{height:fit-content;min-height:var(--mat-button-text-container-height)}:host ::ng-deep .mat-mdc-icon-button ::ng-deep img{width:unset;height:unset}.separator{display:flex;flex-direction:column;padding:0 .5rem;width:100%}.separator-label{font-size:.7rem;color:var(--color-text-muted, #68778e);padding-bottom:.15rem}.separator-line{border:none;border-top:1px solid var(--color-border, #e4eaf2);margin:0}:host ::ng-deep button.sb4-view-activated{background:var(--sb4-view-activated-bg, var(--primary-color, #384372));border-color:var(--sb4-view-activated-border-color, transparent);font-weight:var(--sb4-view-activated-font-weight, 600)}:host ::ng-deep button.sb4-view-activated,:host ::ng-deep button.sb4-view-activated *{color:var( --sb4-view-activated-color, var(--primary-color-text, var(--primary-text-color, #ffffff)) )!important}:host ::ng-deep button.sb4-view-activated:hover{background:var(--sb4-view-activated-bg, var(--primary-color, #384372))!important;box-shadow:var( --sb4-view-activated-hover-shadow, 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12) )}:host ::ng-deep button.sm-crumb-ahead{opacity:.6}:host ::ng-deep button.sm-crumb-current{opacity:1;font-weight:600;color:var(--color-text, #132033)}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: UiBadgeComponent, selector: "ui-badge", inputs: ["descriptor", "inputValue"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: SmartTooltipDirective, selector: "[smartTooltip]", inputs: ["smartTooltip"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionButtonComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ui-action-button', imports: [NgTemplateOutlet, UiBadgeComponent, MatButton, SmartTooltipDirective, NgStyle, NgClass, SmartIconComponent], template: "@if (effectiveDescriptor().type === 'SEPARATOR') {\n  <div class=\"separator\">\n    @if (effectiveDescriptor().title) {\n      <span class=\"separator-label\" [style.color]=\"getSeparatorColor()\">\n        {{ effectiveDescriptor().title }}\n      </span>\n    }\n    <hr class=\"separator-line\" [style.border-top-color]=\"getSeparatorColor()\" />\n  </div>\n} @else {\n  <ng-container *ngTemplateOutlet=\"buttonWithBadge\"></ng-container>\n}\n\n<ng-template #buttonWithBadge>\n  @if (effectiveDescriptor() && effectiveDescriptor().badge) {\n    <ui-badge [descriptor]=\"effectiveDescriptor().badge\">\n      <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n    </ui-badge>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #buttonTemplate>\n  <button\n    mat-button\n    [smartTooltip]=\"tooltip()\"\n    [color]=\"effectiveDescriptor().color\"\n    [disabled]=\"!!disabled()\"\n    (click)=\"onActionClicked($event, mainActionModel())\"\n    (dblclick)=\"onActionDoubleClicked($event)\"\n    [ngStyle]=\"calcStyle(effectiveDescriptor().style)\"\n    [ngClass]=\"getCombinedClasses()\"\n    [style.justify-content]=\"getJustifyContent()\"\n    class=\"{{ getbtnClass() }} {{ addedCssClass() }}\"\n    type=\"button\"\n    [attr.data-testid]=\"code() ?? null\"\n    [attr.data-testid2]=\"getDataTestId()\"\n    [attr.aria-label]=\"getAriaLabel()\"\n    [attr.aria-keyshortcuts]=\"getAriaKeyShortcuts()\"\n    >\n    @if (isOnlyIcon()) {\n      @if (renderPlaceholderPre() || renderPlaceholderPost()) {\n        <smart-icon></smart-icon>\n      } @else if (effectiveDescriptor().iconResource) {\n        <smart-icon\n          [imageResource]=\"effectiveDescriptor().iconResource\"\n          [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n        ></smart-icon>\n      } @else {\n        <smart-icon\n          [icon]=\"effectiveDescriptor().icon\"\n          [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n        ></smart-icon>\n      }\n    } @else {\n      @if (renderPre() || renderPlaceholderPre()) {\n        <ng-container *ngTemplateOutlet=\"buttonIcon\" />\n      }\n      {{ effectiveDescriptor().title }}\n      @if (renderPost() || renderPlaceholderPost()) {\n        <ng-container *ngTemplateOutlet=\"buttonIcon\" />\n      }\n    }\n  </button>\n</ng-template>\n\n\n<ng-template #buttonIcon>\n  @if (renderPlaceholderPre() || renderPlaceholderPost()) {\n    <smart-icon></smart-icon>\n  } @else if (effectiveDescriptor().iconResource) {\n    <smart-icon\n      [imageResource]=\"effectiveDescriptor().iconResource\"\n      [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n    ></smart-icon>\n  } @else {\n    <smart-icon\n      [icon]=\"effectiveDescriptor().icon\"\n      [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n    ></smart-icon>\n  }\n</ng-template>\n", styles: [":host{--text-color: var(--color-text, #132033)}:host ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center;line-height:1;padding:.75rem 1rem}:host{height:fit-content;width:fit-content;padding:unset;margin:unset}:host ::ng-deep .mdc-button__label{display:flex;flex-direction:row;gap:1rem;align-items:center;justify-content:center;white-space:nowrap}:host ::ng-deep .mdc-button{height:fit-content;min-height:var(--mat-button-text-container-height)}:host ::ng-deep .mat-mdc-icon-button ::ng-deep img{width:unset;height:unset}.separator{display:flex;flex-direction:column;padding:0 .5rem;width:100%}.separator-label{font-size:.7rem;color:var(--color-text-muted, #68778e);padding-bottom:.15rem}.separator-line{border:none;border-top:1px solid var(--color-border, #e4eaf2);margin:0}:host ::ng-deep button.sb4-view-activated{background:var(--sb4-view-activated-bg, var(--primary-color, #384372));border-color:var(--sb4-view-activated-border-color, transparent);font-weight:var(--sb4-view-activated-font-weight, 600)}:host ::ng-deep button.sb4-view-activated,:host ::ng-deep button.sb4-view-activated *{color:var( --sb4-view-activated-color, var(--primary-color-text, var(--primary-text-color, #ffffff)) )!important}:host ::ng-deep button.sb4-view-activated:hover{background:var(--sb4-view-activated-bg, var(--primary-color, #384372))!important;box-shadow:var( --sb4-view-activated-hover-shadow, 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12) )}:host ::ng-deep button.sm-crumb-ahead{opacity:.6}:host ::ng-deep button.sm-crumb-current{opacity:1;font-weight:600;color:var(--color-text, #132033)}\n"] }]
-        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], descriptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptor", required: true }] }], code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: false }] }], identifier: [{ type: i0.Input, args: [{ isSignal: true, alias: "identifier", required: false }] }], viewActivated: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActivated", required: false }] }], addedCssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "addedCssClass", required: false }] }], addBasicClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "addBasicClasses", required: false }] }], iconPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPlaceholder", required: false }] }], chords: [{ type: i0.Input, args: [{ isSignal: true, alias: "chords", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], actionDoubleClick: [{ type: i0.Output, args: ["actionDoubleClick"] }] } });
+            args: [{ selector: 'ui-action-button', imports: [NgTemplateOutlet, UiBadgeComponent, MatButton, SmartTooltipDirective, NgStyle, NgClass, SmartIconComponent], template: "@if (effectiveDescriptor().type === 'SEPARATOR') {\n  <div class=\"separator\">\n    @if (effectiveDescriptor().title) {\n      <span class=\"separator-label\" [style.color]=\"getSeparatorColor()\">\n        {{ effectiveDescriptor().title }}\n      </span>\n    }\n    <hr class=\"separator-line\" [style.border-top-color]=\"getSeparatorColor()\" />\n  </div>\n} @else {\n  <ng-container *ngTemplateOutlet=\"buttonWithBadge\"></ng-container>\n}\n\n<ng-template #buttonWithBadge>\n  @if (effectiveDescriptor() && effectiveDescriptor().badge) {\n    <ui-badge [descriptor]=\"effectiveDescriptor().badge\">\n      <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n    </ui-badge>\n  } @else {\n    <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n  }\n</ng-template>\n\n<ng-template #buttonTemplate>\n  <button\n    mat-button\n    [smartTooltip]=\"tooltip()\"\n    [color]=\"effectiveDescriptor().color\"\n    [disabled]=\"!!disabled()\"\n    (click)=\"onActionClicked($event, mainActionModel())\"\n    (dblclick)=\"onActionDoubleClicked($event)\"\n    [ngStyle]=\"calcStyle(effectiveDescriptor().style)\"\n    [ngClass]=\"getCombinedClasses()\"\n    [style.justify-content]=\"getJustifyContent()\"\n    class=\"{{ getbtnClass() }} {{ addedCssClass() }}\"\n    type=\"button\"\n    [attr.data-testid]=\"code() ?? null\"\n    [attr.data-testid2]=\"getDataTestId()\"\n    [attr.aria-label]=\"getAriaLabel()\"\n    [attr.aria-keyshortcuts]=\"getAriaKeyShortcuts()\"\n    [attr.role]=\"tab() ? 'tab' : null\"\n    [attr.aria-selected]=\"tab() ? viewActivated() === true : null\"\n    >\n    @if (isOnlyIcon()) {\n      @if (renderPlaceholderPre() || renderPlaceholderPost()) {\n        <smart-icon></smart-icon>\n      } @else if (effectiveDescriptor().iconResource) {\n        <smart-icon\n          [imageResource]=\"effectiveDescriptor().iconResource\"\n          [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n        ></smart-icon>\n      } @else {\n        <smart-icon\n          [icon]=\"effectiveDescriptor().icon\"\n          [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n        ></smart-icon>\n      }\n    } @else {\n      @if (renderPre() || renderPlaceholderPre()) {\n        <ng-container *ngTemplateOutlet=\"buttonIcon\" />\n      }\n      {{ effectiveDescriptor().title }}\n      @if (renderPost() || renderPlaceholderPost()) {\n        <ng-container *ngTemplateOutlet=\"buttonIcon\" />\n      }\n    }\n  </button>\n</ng-template>\n\n\n<ng-template #buttonIcon>\n  @if (renderPlaceholderPre() || renderPlaceholderPost()) {\n    <smart-icon></smart-icon>\n  } @else if (effectiveDescriptor().iconResource) {\n    <smart-icon\n      [imageResource]=\"effectiveDescriptor().iconResource\"\n      [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n    ></smart-icon>\n  } @else {\n    <smart-icon\n      [icon]=\"effectiveDescriptor().icon\"\n      [color]=\"effectiveDescriptor().iconColor || effectiveDescriptor().color\"\n    ></smart-icon>\n  }\n</ng-template>\n", styles: [":host{--text-color: var(--color-text, #132033)}:host ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center;line-height:1;padding:.75rem 1rem}:host{height:fit-content;width:fit-content;padding:unset;margin:unset}:host ::ng-deep .mdc-button__label{display:flex;flex-direction:row;gap:1rem;align-items:center;justify-content:center;white-space:nowrap}:host ::ng-deep .mdc-button{height:fit-content;min-height:var(--mat-button-text-container-height)}:host ::ng-deep .mat-mdc-icon-button ::ng-deep img{width:unset;height:unset}.separator{display:flex;flex-direction:column;padding:0 .5rem;width:100%}.separator-label{font-size:.7rem;color:var(--color-text-muted, #68778e);padding-bottom:.15rem}.separator-line{border:none;border-top:1px solid var(--color-border, #e4eaf2);margin:0}:host ::ng-deep button.sb4-view-activated{background:var(--sb4-view-activated-bg, var(--primary-color, #384372));border-color:var(--sb4-view-activated-border-color, transparent);font-weight:var(--sb4-view-activated-font-weight, 600)}:host ::ng-deep button.sb4-view-activated,:host ::ng-deep button.sb4-view-activated *{color:var( --sb4-view-activated-color, var(--primary-color-text, var(--primary-text-color, #ffffff)) )!important}:host ::ng-deep button.sb4-view-activated:hover{background:var(--sb4-view-activated-bg, var(--primary-color, #384372))!important;box-shadow:var( --sb4-view-activated-hover-shadow, 0 2px 4px -1px rgba(0, 0, 0, .2), 0 4px 5px 0 rgba(0, 0, 0, .14), 0 1px 10px 0 rgba(0, 0, 0, .12) )}:host ::ng-deep button.sm-crumb-ahead{opacity:.6}:host ::ng-deep button.sm-crumb-current{opacity:1;font-weight:600;color:var(--color-text, #132033)}\n"] }]
+        }], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], descriptor: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptor", required: true }] }], code: [{ type: i0.Input, args: [{ isSignal: true, alias: "code", required: false }] }], identifier: [{ type: i0.Input, args: [{ isSignal: true, alias: "identifier", required: false }] }], viewActivated: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewActivated", required: false }] }], tab: [{ type: i0.Input, args: [{ isSignal: true, alias: "tab", required: false }] }], rowState: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowState", required: false }] }], addedCssClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "addedCssClass", required: false }] }], addBasicClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "addBasicClasses", required: false }] }], iconPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconPlaceholder", required: false }] }], chords: [{ type: i0.Input, args: [{ isSignal: true, alias: "chords", required: false }] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], actionDoubleClick: [{ type: i0.Output, args: ["actionDoubleClick"] }] } });
 
 class MessageDialogComponent {
     get messageData() {
@@ -4068,7 +4148,7 @@ class MessageDialogComponent {
         return this.messageData.textType === MessageTextType.HTML;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MessageDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MessageDialogComponent, isStandalone: true, selector: "app-message-dialog", ngImport: i0, template: "@if (messageData) {\n  <div class=\"taskDialogContainer\">\n    <h2 class=\"{{ messageData.type }}\">\n      {{ messageData.header }}\n    </h2>\n    @if (!isHtmlText()) {\n      <p class=\"{{ messageData.type }}\">{{ messageData.text }}</p>\n    }\n    @if (isHtmlText()) {\n      <div [innerHTML]=\"messageData.text\"></div>\n    }\n    <div class=\"buttonsContainer\">\n      @for (button of buttons; track button) {\n        <ui-action-button\n          class=\"taskDialogButton\"\n          [descriptor]=\"button\"\n          [code]=\"button.code\"\n          [attr.cdkFocusInitial]=\"button.code === initialFocusCode ? '' : null\"\n          (actionClick)=\"button.action()\"\n          />\n      }\n    </div>\n  </div>\n}\n", styles: [".taskDialogContainer{min-width:30vw;display:flex;flex-direction:column;gap:.5rem}.spacer{flex:1}.buttonsContainer{display:flex;flex-direction:row;gap:.5rem;justify-content:flex-end}h2,p{margin:0!important}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: MessageDialogComponent, isStandalone: true, selector: "app-message-dialog", ngImport: i0, template: "@if (messageData) {\n  <div class=\"taskDialogContainer\">\n    <h2 class=\"{{ messageData.type }}\">\n      {{ messageData.header }}\n    </h2>\n    @if (!isHtmlText()) {\n      <p class=\"{{ messageData.type }}\">{{ messageData.text }}</p>\n    }\n    @if (isHtmlText()) {\n      <div [innerHTML]=\"messageData.text\"></div>\n    }\n    <div class=\"buttonsContainer\">\n      @for (button of buttons; track button) {\n        <ui-action-button\n          class=\"taskDialogButton\"\n          [descriptor]=\"button\"\n          [code]=\"button.code\"\n          [attr.cdkFocusInitial]=\"button.code === initialFocusCode ? '' : null\"\n          (actionClick)=\"button.action()\"\n          />\n      }\n    </div>\n  </div>\n}\n", styles: [".taskDialogContainer{min-width:30vw;display:flex;flex-direction:column;gap:.5rem}.spacer{flex:1}.buttonsContainer{display:flex;flex-direction:row;gap:.5rem;justify-content:flex-end}h2,p{margin:0!important}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: MessageDialogComponent, decorators: [{
             type: Component,
@@ -5094,6 +5174,26 @@ var ToolbarAlignment;
     ToolbarAlignment["END"] = "END";
 })(ToolbarAlignment || (ToolbarAlignment = {}));
 
+/**
+ * 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.
+ */
+/**
+ * How the toolbar draws its actions.  BUTTONS — every action is a button. TABS    — an action that takes part in view-activation (viewActivated is not null) is a           tab, the activated one is the selected tab; any other action is a button in the           same row. The row follows the direction and the scrollable setting of the           toolbar. A client that does not know the value draws buttons.
+ */
+var ToolbarAppearance;
+(function (ToolbarAppearance) {
+    ToolbarAppearance["BUTTONS"] = "BUTTONS";
+    ToolbarAppearance["TABS"] = "TABS";
+})(ToolbarAppearance || (ToolbarAppearance = {}));
+
 /**
  * Form layout definition
  * Contains form layout definition objects.
@@ -5332,7 +5432,7 @@ class ThemeSelectorComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ThemeSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ThemeSelectorComponent, isStandalone: true, selector: "theme-selector", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (themeDescriptor) {\n  <ui-action-button\n    [descriptor]=\"themeDescriptor.descriptor!\"\n    [code]=\"themeDescriptor.name\"\n    (actionClick)=\"onActionClicked($event, themeDescriptor)\"\n  >\n  </ui-action-button>\n} @else if (action()) {\n  <!-- <ui-tiered-menu\n    #menu\n    [triggerAction]=\"action()!\"\n    [subActions]=\"action()?.subActions ?? []\"\n    (actionClick)=\"onActionClicked($event, model())\"\n  ></ui-tiered-menu> -->\n}\n", styles: [""], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ThemeSelectorComponent, isStandalone: true, selector: "theme-selector", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (themeDescriptor) {\n  <ui-action-button\n    [descriptor]=\"themeDescriptor.descriptor!\"\n    [code]=\"themeDescriptor.name\"\n    (actionClick)=\"onActionClicked($event, themeDescriptor)\"\n  >\n  </ui-action-button>\n} @else if (action()) {\n  <!-- <ui-tiered-menu\n    #menu\n    [triggerAction]=\"action()!\"\n    [subActions]=\"action()?.subActions ?? []\"\n    (actionClick)=\"onActionClicked($event, model())\"\n  ></ui-tiered-menu> -->\n}\n", styles: [""], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ThemeSelectorComponent, decorators: [{
             type: Component,
@@ -5654,7 +5754,7 @@ class HoverMenuComponent {
         return IconPosition;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HoverMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HoverMenuComponent, isStandalone: true, selector: "ui-hover-menu", inputs: { triggerAction: { classPropertyName: "triggerAction", publicName: "triggerAction", isSignal: true, isRequired: true, transformFunction: null }, isSubmenu: { classPropertyName: "isSubmenu", publicName: "isSubmenu", isSignal: true, isRequired: false, transformFunction: null }, menuOpenDirection: { classPropertyName: "menuOpenDirection", publicName: "menuOpenDirection", isSignal: true, isRequired: false, transformFunction: null }, toolbarId: { classPropertyName: "toolbarId", publicName: "toolbarId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", submenuOpened: "submenuOpened" }, host: { listeners: { "click": "onMenuClick($event)", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "submenuComponents", predicate: ["submenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isSubmenu()) {\n  <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\n    <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\n    <smart-icon class=\"sb4-menu-indicator\" [icon]=\"icon\" color=\"black\"></smart-icon>\n  </div>\n} @else {\n  <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\n}\n\n<ng-template #menuTemplate>\n  <ul class=\"ui-hover-menu sb4-menu-panel\">\n    @for (action of subActions; track action) {\n      <li\n        class=\"hoverEffect\"\n        [class.disabled]=\"action.disabled\"\n        [class.sb4-post-icon]=\"action.descriptor?.iconPosition === iconPosition().POST\"\n        (mouseenter)=\"closeSiblingSubmenus(action)\"\n        >\n        @if (action.subActions && action.subActions.length > 0) {\n          <ui-hover-menu\n            #submenu\n            [triggerAction]=\"action\"\n            [isSubmenu]=\"true\"\n            [menuOpenDirection]=\"$safeNavigationMigration(triggerAction().descriptor?.menu?.openDirection)\"\n            (actionClick)=\"actionClick.emit($event)\"\n            (submenuOpened)=\"onSubmenuOpened(submenu)\"\n          ></ui-hover-menu>\n        } @else {\n          <ui-action-button\n            [descriptor]=\"action.descriptor!\"\n            [code]=\"action.code\"\n            [identifier]=\"action.identifier\"\n            [disabled]=\"!!action.disabled\"\n            [viewActivated]=\"action.viewActivated\"\n          [iconPlaceholder]=\"\n            action.descriptor?.icon || action.descriptor?.iconResource\n              ? undefined\n              : computedIconPlaceholder\n          \"\n            (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\n          ></ui-action-button>\n          @if (hasSubActionSiblings) {\n            <smart-icon\n              class=\"sb4-menu-placeholder\"\n              (click)=\"!action.disabled && !action.subActions?.length && onActionClick(action)\"\n            ></smart-icon>\n          }\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #triggerTempalte>\n  <ui-action-button\n    [descriptor]=\"triggerAction().descriptor!\"\n    [code]=\"triggerAction().code\"\n    [identifier]=\"triggerAction().identifier\"\n    [disabled]=\"!!triggerAction().disabled\"\n    [viewActivated]=\"triggerAction().viewActivated\"\n    (mouseenter)=\"openMenu($event)\"\n    (actionClick)=\"onActionClick(triggerAction())\"\n    [class.submenuTrigger]=\"isSubmenu()\"\n    >\n  </ui-action-button>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}li{display:flex}.ui-hover-menu{--sb4-panel-bg-color: var(--color-surface, #ffffff);--sb4-panel-hover-bg-color: var(--color-surface-alt, #f4f6fb)}ul,.ui-hover-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:var(--sb4-panel-bg-color);width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-hover-menu ::ng-deep button{background-color:var(--sb4-panel-bg-color);box-shadow:unset;border:unset;border-radius:unset;color:var(--color-text, #132033);width:100%;justify-content:flex-start}.ui-hover-menu .sb4-post-icon ::ng-deep button{justify-content:flex-end}.ui-hover-menu ::ng-deep ui-action-button,.ui-hover-menu ::ng-deep ui-badge{width:100%}.ui-hover-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:var(--color-text-muted, #68778e);cursor:not-allowed}.ui-hover-menu ui-hover-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect.activeSubmenu,.hoverEffect:hover,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep .submenuTrigger,.sb4-menu-panel .hoverEffect:hover ::ng-deep .submenuTrigger,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep button,.sb4-menu-panel .hoverEffect:hover ::ng-deep button{background-color:var(--sb4-panel-hover-bg-color)!important;transition:none!important}.sb4-menu-panel ::ng-deep button{background-color:unset!important;border-color:unset!important;transition:none!important}.sb4-menu-panel ::ng-deep button .mdc-button__ripple:before,.sb4-menu-panel ::ng-deep button:before{background-color:transparent!important;opacity:0!important}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel ::ng-deep button.sb4-view-activated *{color:var( --sb4-view-activated-menu-color, var(--sb4-view-activated-bg, var(--primary-color, #384372)) )!important;font-weight:var(--sb4-view-activated-font-weight, 600)}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel .hoverEffect:hover ::ng-deep button.sb4-view-activated{background-color:var( --sb4-view-activated-menu-bg, rgb(from var(--primary-color, #384372) r g b / .12) )!important}\n"], dependencies: [{ kind: "component", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection", "toolbarId"], outputs: ["actionClick", "submenuOpened"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: HoverMenuComponent, isStandalone: true, selector: "ui-hover-menu", inputs: { triggerAction: { classPropertyName: "triggerAction", publicName: "triggerAction", isSignal: true, isRequired: true, transformFunction: null }, isSubmenu: { classPropertyName: "isSubmenu", publicName: "isSubmenu", isSignal: true, isRequired: false, transformFunction: null }, menuOpenDirection: { classPropertyName: "menuOpenDirection", publicName: "menuOpenDirection", isSignal: true, isRequired: false, transformFunction: null }, toolbarId: { classPropertyName: "toolbarId", publicName: "toolbarId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", submenuOpened: "submenuOpened" }, host: { listeners: { "click": "onMenuClick($event)", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "submenuComponents", predicate: ["submenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isSubmenu()) {\n  <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\n    <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\n    <smart-icon class=\"sb4-menu-indicator\" [icon]=\"icon\" color=\"black\"></smart-icon>\n  </div>\n} @else {\n  <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\n}\n\n<ng-template #menuTemplate>\n  <ul class=\"ui-hover-menu sb4-menu-panel\">\n    @for (action of subActions; track action) {\n      <li\n        class=\"hoverEffect\"\n        [class.disabled]=\"action.disabled\"\n        [class.sb4-post-icon]=\"action.descriptor?.iconPosition === iconPosition().POST\"\n        (mouseenter)=\"closeSiblingSubmenus(action)\"\n        >\n        @if (action.subActions && action.subActions.length > 0) {\n          <ui-hover-menu\n            #submenu\n            [triggerAction]=\"action\"\n            [isSubmenu]=\"true\"\n            [menuOpenDirection]=\"$safeNavigationMigration(triggerAction().descriptor?.menu?.openDirection)\"\n            (actionClick)=\"actionClick.emit($event)\"\n            (submenuOpened)=\"onSubmenuOpened(submenu)\"\n          ></ui-hover-menu>\n        } @else {\n          <ui-action-button\n            [descriptor]=\"action.descriptor!\"\n            [code]=\"action.code\"\n            [identifier]=\"action.identifier\"\n            [disabled]=\"!!action.disabled\"\n            [viewActivated]=\"action.viewActivated\"\n          [iconPlaceholder]=\"\n            action.descriptor?.icon || action.descriptor?.iconResource\n              ? undefined\n              : computedIconPlaceholder\n          \"\n            (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\n          ></ui-action-button>\n          @if (hasSubActionSiblings) {\n            <smart-icon\n              class=\"sb4-menu-placeholder\"\n              (click)=\"!action.disabled && !action.subActions?.length && onActionClick(action)\"\n            ></smart-icon>\n          }\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #triggerTempalte>\n  <ui-action-button\n    [descriptor]=\"triggerAction().descriptor!\"\n    [code]=\"triggerAction().code\"\n    [identifier]=\"triggerAction().identifier\"\n    [disabled]=\"!!triggerAction().disabled\"\n    [viewActivated]=\"triggerAction().viewActivated\"\n    (mouseenter)=\"openMenu($event)\"\n    (actionClick)=\"onActionClick(triggerAction())\"\n    [class.submenuTrigger]=\"isSubmenu()\"\n    >\n  </ui-action-button>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}li{display:flex}.ui-hover-menu{--sb4-panel-bg-color: var(--color-surface, #ffffff);--sb4-panel-hover-bg-color: var(--color-surface-alt, #f4f6fb)}ul,.ui-hover-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:var(--sb4-panel-bg-color);width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-hover-menu ::ng-deep button{background-color:var(--sb4-panel-bg-color);box-shadow:unset;border:unset;border-radius:unset;color:var(--color-text, #132033);width:100%;justify-content:flex-start}.ui-hover-menu .sb4-post-icon ::ng-deep button{justify-content:flex-end}.ui-hover-menu ::ng-deep ui-action-button,.ui-hover-menu ::ng-deep ui-badge{width:100%}.ui-hover-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:var(--color-text-muted, #68778e);cursor:not-allowed}.ui-hover-menu ui-hover-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect.activeSubmenu,.hoverEffect:hover,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep .submenuTrigger,.sb4-menu-panel .hoverEffect:hover ::ng-deep .submenuTrigger,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep button,.sb4-menu-panel .hoverEffect:hover ::ng-deep button{background-color:var(--sb4-panel-hover-bg-color)!important;transition:none!important}.sb4-menu-panel ::ng-deep button{background-color:unset!important;border-color:unset!important;transition:none!important}.sb4-menu-panel ::ng-deep button .mdc-button__ripple:before,.sb4-menu-panel ::ng-deep button:before{background-color:transparent!important;opacity:0!important}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel ::ng-deep button.sb4-view-activated *{color:var( --sb4-view-activated-menu-color, var(--sb4-view-activated-bg, var(--primary-color, #384372)) )!important;font-weight:var(--sb4-view-activated-font-weight, 600)}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel .hoverEffect:hover ::ng-deep button.sb4-view-activated{background-color:var( --sb4-view-activated-menu-bg, rgb(from var(--primary-color, #384372) r g b / .12) )!important}\n"], dependencies: [{ kind: "component", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection", "toolbarId"], outputs: ["actionClick", "submenuOpened"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: HoverMenuComponent, decorators: [{
             type: Component,
@@ -5924,7 +6024,7 @@ class ClickMenuComponent {
         return IconPosition;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ClickMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ClickMenuComponent, isStandalone: true, selector: "ui-tiered-menu", inputs: { triggerAction: { classPropertyName: "triggerAction", publicName: "triggerAction", isSignal: true, isRequired: true, transformFunction: null }, isSubmenu: { classPropertyName: "isSubmenu", publicName: "isSubmenu", isSignal: true, isRequired: false, transformFunction: null }, menuOpenDirection: { classPropertyName: "menuOpenDirection", publicName: "menuOpenDirection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", submenuOpened: "submenuOpened" }, host: { listeners: { "click": "onMenuClick($event)", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "submenuComponents", predicate: ["submenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isSubmenu()) {\n  <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\n    <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\n    <smart-icon class=\"sb4-menu-indicator\" [icon]=\"icon\" color=\"black\"></smart-icon>\n  </div>\n} @else {\n  <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\n}\n\n<ng-template #menuTemplate>\n  <ul class=\"ui-tiered-menu sb4-menu-panel\">\n    @for (action of subActions; track action) {\n      <li\n        class=\"hoverEffect\"\n        [class.disabled]=\"action.disabled\"\n        [class.sb4-post-icon]=\"action.descriptor?.iconPosition === iconPosition().POST\"\n        (mouseenter)=\"closeSiblingSubmenus(action)\"\n        >\n        @if (action.subActions && action.subActions.length > 0) {\n          <ui-tiered-menu\n            #submenu\n            [triggerAction]=\"action\"\n            [isSubmenu]=\"true\"\n            [menuOpenDirection]=\"$safeNavigationMigration(triggerAction().descriptor?.menu?.openDirection)\"\n            (actionClick)=\"actionClick.emit($event)\"\n            (submenuOpened)=\"onSubmenuOpened(submenu)\"\n          ></ui-tiered-menu>\n        } @else {\n          <ui-action-button\n            [descriptor]=\"action.descriptor!\"\n            [code]=\"action.code\"\n            [identifier]=\"action.identifier\"\n            [disabled]=\"!!action.disabled\"\n            [viewActivated]=\"action.viewActivated\"\n          [iconPlaceholder]=\"\n            action.descriptor?.icon || action.descriptor?.iconResource\n              ? undefined\n              : computedIconPlaceholder\n          \"\n            (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\n          ></ui-action-button>\n          @if (hasSubActionSiblings) {\n            <smart-icon\n              class=\"sb4-menu-placeholder\"\n              (click)=\"!action.disabled && !action.subActions?.length && onActionClick(action)\"\n            ></smart-icon>\n          }\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #triggerTempalte>\n  <ui-action-button\n    [descriptor]=\"triggerAction().descriptor!\"\n    [code]=\"triggerAction().code\"\n    [identifier]=\"triggerAction().identifier\"\n    [disabled]=\"!!triggerAction().disabled\"\n    [viewActivated]=\"triggerAction().viewActivated\"\n    (actionClick)=\"toggleMenu($event.event)\"\n    [class.submenuTrigger]=\"isSubmenu()\"\n    >\n  </ui-action-button>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}.ui-tiered-menu{--sb4-panel-bg-color: var(--color-surface, #ffffff);--sb4-panel-hover-bg-color: var(--color-surface-alt, #f4f6fb)}li{display:flex}ul,.ui-tiered-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:var(--sb4-panel-bg-color);width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-tiered-menu ::ng-deep button{background-color:var(--sb4-panel-bg-color);box-shadow:unset;border:unset;border-radius:unset;color:var(--color-text, #132033);width:100%;justify-content:flex-start}.ui-tiered-menu .sb4-post-icon ::ng-deep button{justify-content:flex-end}.hoverEffect:hover,.hoverEffect ::ng-deep button:hover{background-color:var(--sb4-panel-hover-bg-color)!important}.hoverEffect.activeSubmenu,.hoverEffect.activeSubmenu ::ng-deep button{background-color:var(--sb4-panel-hover-bg-color)!important}.ui-tiered-menu ::ng-deep ui-action-button,.ui-tiered-menu ::ng-deep ui-badge{width:100%}.ui-tiered-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:var(--color-text-muted, #68778e);cursor:not-allowed}.ui-tiered-menu ui-tiered-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect.activeSubmenu,.hoverEffect:hover,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep button,.sb4-menu-panel .hoverEffect:hover ::ng-deep button{background-color:var(--sb4-panel-hover-bg-color)!important;transition:none!important}.sb4-menu-panel ::ng-deep button{background-color:unset!important;border-color:unset!important;transition:none!important}.sb4-menu-panel ::ng-deep button .mdc-button__ripple:before,.sb4-menu-panel ::ng-deep button:before{background-color:transparent!important;opacity:0!important}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel ::ng-deep button.sb4-view-activated *{color:var( --sb4-view-activated-menu-color, var(--sb4-view-activated-bg, var(--primary-color, #384372)) )!important;font-weight:var(--sb4-view-activated-font-weight, 600)}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel .hoverEffect:hover ::ng-deep button.sb4-view-activated{background-color:var( --sb4-view-activated-menu-bg, rgb(from var(--primary-color, #384372) r g b / .12) )!important}\n"], dependencies: [{ kind: "component", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection"], outputs: ["actionClick", "submenuOpened"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ClickMenuComponent, isStandalone: true, selector: "ui-tiered-menu", inputs: { triggerAction: { classPropertyName: "triggerAction", publicName: "triggerAction", isSignal: true, isRequired: true, transformFunction: null }, isSubmenu: { classPropertyName: "isSubmenu", publicName: "isSubmenu", isSignal: true, isRequired: false, transformFunction: null }, menuOpenDirection: { classPropertyName: "menuOpenDirection", publicName: "menuOpenDirection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionClick: "actionClick", submenuOpened: "submenuOpened" }, host: { listeners: { "click": "onMenuClick($event)", "document:click": "onDocumentClick($event)" } }, viewQueries: [{ propertyName: "menuTemplate", first: true, predicate: ["menuTemplate"], descendants: true }, { propertyName: "submenuComponents", predicate: ["submenu"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (isSubmenu()) {\n  <div class=\"submenu hoverEffect\" [class.activeSubmenu]=\"isOpen\" (mouseenter)=\"openMenu($event)\">\n    <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\n    <smart-icon class=\"sb4-menu-indicator\" [icon]=\"icon\" color=\"black\"></smart-icon>\n  </div>\n} @else {\n  <ng-container *ngTemplateOutlet=\"triggerTempalte\"></ng-container>\n}\n\n<ng-template #menuTemplate>\n  <ul class=\"ui-tiered-menu sb4-menu-panel\">\n    @for (action of subActions; track action) {\n      <li\n        class=\"hoverEffect\"\n        [class.disabled]=\"action.disabled\"\n        [class.sb4-post-icon]=\"action.descriptor?.iconPosition === iconPosition().POST\"\n        (mouseenter)=\"closeSiblingSubmenus(action)\"\n        >\n        @if (action.subActions && action.subActions.length > 0) {\n          <ui-tiered-menu\n            #submenu\n            [triggerAction]=\"action\"\n            [isSubmenu]=\"true\"\n            [menuOpenDirection]=\"$safeNavigationMigration(triggerAction().descriptor?.menu?.openDirection)\"\n            (actionClick)=\"actionClick.emit($event)\"\n            (submenuOpened)=\"onSubmenuOpened(submenu)\"\n          ></ui-tiered-menu>\n        } @else {\n          <ui-action-button\n            [descriptor]=\"action.descriptor!\"\n            [code]=\"action.code\"\n            [identifier]=\"action.identifier\"\n            [disabled]=\"!!action.disabled\"\n            [viewActivated]=\"action.viewActivated\"\n          [iconPlaceholder]=\"\n            action.descriptor?.icon || action.descriptor?.iconResource\n              ? undefined\n              : computedIconPlaceholder\n          \"\n            (actionClick)=\"!action.subActions?.length && onActionClick(action)\"\n          ></ui-action-button>\n          @if (hasSubActionSiblings) {\n            <smart-icon\n              class=\"sb4-menu-placeholder\"\n              (click)=\"!action.disabled && !action.subActions?.length && onActionClick(action)\"\n            ></smart-icon>\n          }\n        }\n      </li>\n    }\n  </ul>\n</ng-template>\n\n<ng-template #triggerTempalte>\n  <ui-action-button\n    [descriptor]=\"triggerAction().descriptor!\"\n    [code]=\"triggerAction().code\"\n    [identifier]=\"triggerAction().identifier\"\n    [disabled]=\"!!triggerAction().disabled\"\n    [viewActivated]=\"triggerAction().viewActivated\"\n    (actionClick)=\"toggleMenu($event.event)\"\n    [class.submenuTrigger]=\"isSubmenu()\"\n    >\n  </ui-action-button>\n</ng-template>\n", styles: [":host{display:inline-block;position:relative}.ui-tiered-menu{--sb4-panel-bg-color: var(--color-surface, #ffffff);--sb4-panel-hover-bg-color: var(--color-surface-alt, #f4f6fb)}li{display:flex}ul,.ui-tiered-menu{top:100%;left:0;list-style:none;padding-left:0;margin:0;background:var(--sb4-panel-bg-color);width:fit-content;box-shadow:2px 2px 8px #0003;z-index:1000;border-radius:5px;padding:.1rem}.submenuTrigger,.ui-tiered-menu ::ng-deep button{background-color:var(--sb4-panel-bg-color);box-shadow:unset;border:unset;border-radius:unset;color:var(--color-text, #132033);width:100%;justify-content:flex-start}.ui-tiered-menu .sb4-post-icon ::ng-deep button{justify-content:flex-end}.hoverEffect:hover,.hoverEffect ::ng-deep button:hover{background-color:var(--sb4-panel-hover-bg-color)!important}.hoverEffect.activeSubmenu,.hoverEffect.activeSubmenu ::ng-deep button{background-color:var(--sb4-panel-hover-bg-color)!important}.ui-tiered-menu ::ng-deep ui-action-button,.ui-tiered-menu ::ng-deep ui-badge{width:100%}.ui-tiered-menu>li{position:relative}.submenu{display:flex;flex-direction:row;justify-content:space-between;align-items:center}.submenu ::ng-deep ui-action-button{flex:1}.disabled{color:var(--color-text-muted, #68778e);cursor:not-allowed}.ui-tiered-menu ui-tiered-menu{width:100%}smart-icon{align-content:center}.sb4-menu-placeholder{cursor:pointer}.sb4-menu-panel:has(.separator) .sb4-menu-placeholder{display:none}.hoverEffect:hover:has(.separator){background-color:unset!important}.hoverEffect.activeSubmenu,.hoverEffect:hover,.sb4-menu-panel .hoverEffect.activeSubmenu ::ng-deep button,.sb4-menu-panel .hoverEffect:hover ::ng-deep button{background-color:var(--sb4-panel-hover-bg-color)!important;transition:none!important}.sb4-menu-panel ::ng-deep button{background-color:unset!important;border-color:unset!important;transition:none!important}.sb4-menu-panel ::ng-deep button .mdc-button__ripple:before,.sb4-menu-panel ::ng-deep button:before{background-color:transparent!important;opacity:0!important}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel ::ng-deep button.sb4-view-activated *{color:var( --sb4-view-activated-menu-color, var(--sb4-view-activated-bg, var(--primary-color, #384372)) )!important;font-weight:var(--sb4-view-activated-font-weight, 600)}.sb4-menu-panel ::ng-deep button.sb4-view-activated,.sb4-menu-panel .hoverEffect:hover ::ng-deep button.sb4-view-activated{background-color:var( --sb4-view-activated-menu-bg, rgb(from var(--primary-color, #384372) r g b / .12) )!important}\n"], dependencies: [{ kind: "component", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection"], outputs: ["actionClick", "submenuOpened"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ClickMenuComponent, decorators: [{
             type: Component,
@@ -6089,7 +6189,9 @@ class UiActionToolbarComponent {
         }
         const toolbarPropertes = this.toolbarPropertes();
         if (toolbarPropertes) {
-            this.scrollOnWrap = toolbarPropertes.scrollable ?? false;
+            // A vertical row of tabs scrolls natively inside the height its holder gives it.
+            this.scrollOnWrap =
+                (toolbarPropertes.scrollable ?? false) && !(this.isTabs && this.isVertical);
         }
     }
     ngAfterViewInit() {
@@ -6279,15 +6381,19 @@ class UiActionToolbarComponent {
     get isAlignedEnd() {
         return this.toolbarPropertes()?.alignment === ToolbarAlignment.END;
     }
+    /** Whether the actions that take part in view-activation are drawn as tabs. */
+    get isTabs() {
+        return this.toolbarPropertes()?.appearance === ToolbarAppearance.TABS;
+    }
     get triggerType() {
         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 } }, outputs: { actionFired: "actionFired" }, 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        [chords]=\"entry.chords\"\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", "chords"], 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 } }, outputs: { actionFired: "actionFired" }, 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    'sb4-tabs': isTabs,\n  }\"\n  [attr.role]=\"isTabs ? 'tablist' : null\"\n  [attr.aria-orientation]=\"isTabs ? (isVertical ? 'vertical' : 'horizontal') : null\"\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        [tab]=\"isTabs && entry.model.uiAction.viewActivated != null\"\n        [rowState]=\"entry.model.uiAction.rowState\"\n        [chords]=\"entry.chords\"\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}.sb4-tabs{gap:var(--sb4-tab-gap, .25rem);align-items:flex-end;border-bottom:1px solid var(--sb4-tab-row-border-color, var(--color-border, #e4eaf2))}.sb4-tabs.scrollableContent{padding:0}.sb4-tabs.verticalToolbar{flex-wrap:nowrap;align-items:stretch;overflow-y:auto;border-bottom:none;border-inline-end:1px solid var(--sb4-tab-row-border-color, var(--color-border, #e4eaf2))}.sb4-tabs ::ng-deep button.sb4-tab{background:var(--sb4-tab-bg, transparent);border:0 solid transparent;border-bottom-width:var(--sb4-tab-indicator-width, 2px);border-radius:0;box-shadow:none;font-weight:var(--sb4-tab-font-weight, 400)}.sb4-tabs.verticalToolbar ::ng-deep button.sb4-tab{border-bottom-width:0;border-inline-end-width:var(--sb4-tab-indicator-width, 2px);justify-content:flex-start}.sb4-tabs ::ng-deep button.sb4-tab,.sb4-tabs ::ng-deep button.sb4-tab *{color:var(--sb4-tab-color, var(--color-text-muted, #68778e))!important}.sb4-tabs ::ng-deep button.sb4-tab:hover{background:var( --sb4-tab-hover-bg, rgb(from var(--primary-color, #384372) r g b / .08) )!important;box-shadow:none}.sb4-tabs ::ng-deep button.sb4-tab.sb4-view-activated{background:var(--sb4-tab-selected-bg, var(--sb4-tab-bg, transparent));border-color:transparent;border-bottom-color:var( --sb4-tab-indicator-color, var(--sb4-tab-selected-color, var(--primary-color, #384372)) );font-weight:var(--sb4-tab-selected-font-weight, 600)}.sb4-tabs.verticalToolbar ::ng-deep button.sb4-tab.sb4-view-activated{border-bottom-color:transparent;border-inline-end-color:var( --sb4-tab-indicator-color, var(--sb4-tab-selected-color, var(--primary-color, #384372)) )}.sb4-tabs ::ng-deep button.sb4-tab.sb4-view-activated,.sb4-tabs ::ng-deep button.sb4-tab.sb4-view-activated *{color:var(--sb4-tab-selected-color, var(--primary-color, #384372))!important}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-new,.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-new *{color:var(--success-color, #16a34a)!important;font-style:italic}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-modified,.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-modified *{color:var(--accent-color, #20b6a8)!important;font-weight:600}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-deleted,.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-deleted *{color:var(--color-text-muted, #68778e)!important}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-deleted .mdc-button__label{text-decoration:line-through}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-moved{font-style:italic}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-contains-change,.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-contains-change *{color:var(--accent-color, #20b6a8)!important}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], 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  (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        [chords]=\"entry.chords\"\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    'sb4-tabs': isTabs,\n  }\"\n  [attr.role]=\"isTabs ? 'tablist' : null\"\n  [attr.aria-orientation]=\"isTabs ? (isVertical ? 'vertical' : 'horizontal') : null\"\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        [tab]=\"isTabs && entry.model.uiAction.viewActivated != null\"\n        [rowState]=\"entry.model.uiAction.rowState\"\n        [chords]=\"entry.chords\"\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}.sb4-tabs{gap:var(--sb4-tab-gap, .25rem);align-items:flex-end;border-bottom:1px solid var(--sb4-tab-row-border-color, var(--color-border, #e4eaf2))}.sb4-tabs.scrollableContent{padding:0}.sb4-tabs.verticalToolbar{flex-wrap:nowrap;align-items:stretch;overflow-y:auto;border-bottom:none;border-inline-end:1px solid var(--sb4-tab-row-border-color, var(--color-border, #e4eaf2))}.sb4-tabs ::ng-deep button.sb4-tab{background:var(--sb4-tab-bg, transparent);border:0 solid transparent;border-bottom-width:var(--sb4-tab-indicator-width, 2px);border-radius:0;box-shadow:none;font-weight:var(--sb4-tab-font-weight, 400)}.sb4-tabs.verticalToolbar ::ng-deep button.sb4-tab{border-bottom-width:0;border-inline-end-width:var(--sb4-tab-indicator-width, 2px);justify-content:flex-start}.sb4-tabs ::ng-deep button.sb4-tab,.sb4-tabs ::ng-deep button.sb4-tab *{color:var(--sb4-tab-color, var(--color-text-muted, #68778e))!important}.sb4-tabs ::ng-deep button.sb4-tab:hover{background:var( --sb4-tab-hover-bg, rgb(from var(--primary-color, #384372) r g b / .08) )!important;box-shadow:none}.sb4-tabs ::ng-deep button.sb4-tab.sb4-view-activated{background:var(--sb4-tab-selected-bg, var(--sb4-tab-bg, transparent));border-color:transparent;border-bottom-color:var( --sb4-tab-indicator-color, var(--sb4-tab-selected-color, var(--primary-color, #384372)) );font-weight:var(--sb4-tab-selected-font-weight, 600)}.sb4-tabs.verticalToolbar ::ng-deep button.sb4-tab.sb4-view-activated{border-bottom-color:transparent;border-inline-end-color:var( --sb4-tab-indicator-color, var(--sb4-tab-selected-color, var(--primary-color, #384372)) )}.sb4-tabs ::ng-deep button.sb4-tab.sb4-view-activated,.sb4-tabs ::ng-deep button.sb4-tab.sb4-view-activated *{color:var(--sb4-tab-selected-color, var(--primary-color, #384372))!important}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-new,.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-new *{color:var(--success-color, #16a34a)!important;font-style:italic}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-modified,.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-modified *{color:var(--accent-color, #20b6a8)!important;font-weight:600}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-deleted,.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-deleted *{color:var(--color-text-muted, #68778e)!important}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-deleted .mdc-button__label{text-decoration:line-through}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-moved{font-style:italic}.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-contains-change,.sb4-tabs ::ng-deep button.sb4-tab.sm-grid-row-contains-change *{color:var(--accent-color, #20b6a8)!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { containerRef: [{
                 type: ViewChild,
                 args: ['container', { static: false }]
@@ -6360,7 +6466,7 @@ class UiActionConfirmDialogComponent {
         this.service.cancel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionConfirmDialogComponent, isStandalone: true, selector: "app-ui-action-confirm-dialog", ngImport: i0, template: "@if(descriptor){\n<div class=\"folderNameDialogContainer\">\n  <div class=\"headerContainer\">\n    <h3 class=\"color-accent-700\">\n      {{ getTitle() }}\n    </h3>\n    <button mat-icon-button (click)=\"cancel()\">\n      <smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\n    </button>\n  </div>\n  <p>\n    {{ getText() }}\n  </p>\n  <div class=\"folderNameDialogButtonsContainer\">\n    <ui-action-button\n      [descriptor]=\"getCancelButton()\"\n      [addedCssClass]=\"getCancelCssClass()\"\n      [code]=\"'confirm-cancel'\"\n      (actionClick)=\"cancel()\"\n    ></ui-action-button>\n    <ui-action-button\n      [descriptor]=\"getActionButton()\"\n      [addedCssClass]=\"getActionCssClass()\"\n      [code]=\"'confirm-action'\"\n      (actionClick)=\"doAction()\"\n    >\n    </ui-action-button>\n  </div>\n</div>\n}\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem;padding:.5rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-top:1rem}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { 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", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionConfirmDialogComponent, isStandalone: true, selector: "app-ui-action-confirm-dialog", ngImport: i0, template: "@if(descriptor){\n<div class=\"folderNameDialogContainer\">\n  <div class=\"headerContainer\">\n    <h3 class=\"color-accent-700\">\n      {{ getTitle() }}\n    </h3>\n    <button mat-icon-button (click)=\"cancel()\">\n      <smart-icon [color]=\"'primary'\" [icon]=\"'X'\"></smart-icon>\n    </button>\n  </div>\n  <p>\n    {{ getText() }}\n  </p>\n  <div class=\"folderNameDialogButtonsContainer\">\n    <ui-action-button\n      [descriptor]=\"getCancelButton()\"\n      [addedCssClass]=\"getCancelCssClass()\"\n      [code]=\"'confirm-cancel'\"\n      (actionClick)=\"cancel()\"\n    ></ui-action-button>\n    <ui-action-button\n      [descriptor]=\"getActionButton()\"\n      [addedCssClass]=\"getActionCssClass()\"\n      [code]=\"'confirm-action'\"\n      (actionClick)=\"doAction()\"\n    >\n    </ui-action-button>\n  </div>\n</div>\n}\n", styles: [".folderNameDialogContainer{width:25rem;display:flex;flex-direction:column;gap:1rem;padding:.5rem}.headerContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-top:1rem}.headerContainer h3{margin:0}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}\n"], dependencies: [{ kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionConfirmDialogComponent, decorators: [{
             type: Component,
@@ -7925,7 +8031,7 @@ 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($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", "chords"], 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", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], 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,
@@ -8121,7 +8227,7 @@ class PhotoCaptureWidgetComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PhotoCaptureWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: PhotoCaptureWidgetComponent, isStandalone: true, selector: "photo-capture-widget", inputs: { maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { photoCaptured: "photoCaptured" }, viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true }, { propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"photoWidgetContainer\">\n  @if (!isMobile()) {\n    <video #video autoplay [hidden]=\"isCaptured || !cameraActive\"></video>\n    <canvas #canvas [hidden]=\"!isCaptured || cameraActive\"></canvas>\n    @if (!cameraActive && !isCaptured) {\n      <p class=\"message\">Kapcsolja be a kamer\u00E1t a k\u00E9p k\u00E9sz\u00EDt\u00E9s\u00E9hez!</p>\n    }\n    <div class=\"controls\">\n      <!-- START CAMERA -->\n      <ui-action-button [descriptor]=\"toggleCameraButton\" (actionClick)=\"toggleCamera()\">\n      </ui-action-button>\n      <!-- CAPTURE CAMERA -->\n      <ui-action-button\n        [disabled]=\"!cameraActive\"\n        [descriptor]=\"captureButton\"\n        (actionClick)=\"capturePhoto()\"\n        >\n      </ui-action-button>\n    </div>\n  }\n\n  @if (isMobile()) {\n    <div class=\"controls\">\n      <input\n        #fileInput\n        type=\"file\"\n        accept=\"image/*\"\n        capture=\"environment\"\n        (change)=\"onFileSelected($event)\"\n        style=\"display: none\"\n        />\n      <ui-action-button [descriptor]=\"captureButton\" (actionClick)=\"fileInput.click()\">\n      </ui-action-button>\n    </div>\n  }\n</div>\n", styles: [".photoWidgetContainer{border-radius:5px;width:100%;max-width:100%;display:flex;flex-direction:column;justify-content:center;border:1px solid #dee2e6}.message{text-align:center;color:#6b7280}video,canvas{border-top-right-radius:5px;border-top-left-radius:5px;width:100%}.controls{padding:.5rem;display:flex;gap:1rem;flex-direction:row;justify-content:center;background:#f8f9fa;border-top:1px solid #dee2e6;border-bottom-right-radius:5px;border-bottom-left-radius:5px}.controls ::ng-deep button{border-radius:3px}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: PhotoCaptureWidgetComponent, isStandalone: true, selector: "photo-capture-widget", inputs: { maxFileSize: { classPropertyName: "maxFileSize", publicName: "maxFileSize", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { photoCaptured: "photoCaptured" }, viewQueries: [{ propertyName: "videoRef", first: true, predicate: ["video"], descendants: true }, { propertyName: "canvasRef", first: true, predicate: ["canvas"], descendants: true }, { propertyName: "fileInputRef", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"photoWidgetContainer\">\n  @if (!isMobile()) {\n    <video #video autoplay [hidden]=\"isCaptured || !cameraActive\"></video>\n    <canvas #canvas [hidden]=\"!isCaptured || cameraActive\"></canvas>\n    @if (!cameraActive && !isCaptured) {\n      <p class=\"message\">Kapcsolja be a kamer\u00E1t a k\u00E9p k\u00E9sz\u00EDt\u00E9s\u00E9hez!</p>\n    }\n    <div class=\"controls\">\n      <!-- START CAMERA -->\n      <ui-action-button [descriptor]=\"toggleCameraButton\" (actionClick)=\"toggleCamera()\">\n      </ui-action-button>\n      <!-- CAPTURE CAMERA -->\n      <ui-action-button\n        [disabled]=\"!cameraActive\"\n        [descriptor]=\"captureButton\"\n        (actionClick)=\"capturePhoto()\"\n        >\n      </ui-action-button>\n    </div>\n  }\n\n  @if (isMobile()) {\n    <div class=\"controls\">\n      <input\n        #fileInput\n        type=\"file\"\n        accept=\"image/*\"\n        capture=\"environment\"\n        (change)=\"onFileSelected($event)\"\n        style=\"display: none\"\n        />\n      <ui-action-button [descriptor]=\"captureButton\" (actionClick)=\"fileInput.click()\">\n      </ui-action-button>\n    </div>\n  }\n</div>\n", styles: [".photoWidgetContainer{border-radius:5px;width:100%;max-width:100%;display:flex;flex-direction:column;justify-content:center;border:1px solid #dee2e6}.message{text-align:center;color:#6b7280}video,canvas{border-top-right-radius:5px;border-top-left-radius:5px;width:100%}.controls{padding:.5rem;display:flex;gap:1rem;flex-direction:row;justify-content:center;background:#f8f9fa;border-top:1px solid #dee2e6;border-bottom-right-radius:5px;border-bottom-left-radius:5px}.controls ::ng-deep button{border-radius:3px}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PhotoCaptureWidgetComponent, decorators: [{
             type: Component,
@@ -8367,7 +8473,7 @@ class VoiceRecordWidgetComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VoiceRecordWidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: VoiceRecordWidgetComponent, isStandalone: true, selector: "voice-record-widget", inputs: { openDirection: { classPropertyName: "openDirection", publicName: "openDirection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordingSaved: "recordingSaved" }, viewQueries: [{ propertyName: "waveformRef", first: true, predicate: ["waveform"], descendants: true }, { propertyName: "mainButton", first: true, predicate: ["mainButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"recorderContainer\"\n  [class.direction-left]=\"isLeftDirection\"\n  [class.direction-right]=\"!isLeftDirection\"\n  [class.active]=\"isWaveformOpen || isRecording || !!recordedBlob\"\n  [class.isRecording]=\"isRecording\"\n  [class.hasRecording]=\"recordedBlob\"\n  >\n  <div class=\"recorderMain\">\n    <div class=\"recorderToolbar\">\n      <!-- Start Recording -->\n      @if (!isRecording) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"micButton\"\n          (actionClick)=\"startRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Stop Recording -->\n      @if (isRecording) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"stopButton\"\n          (actionClick)=\"stopRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Save Recording -->\n      @if (recordedBlob) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"saveButton\"\n          (actionClick)=\"saveRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Start Play  -->\n      @if (recordedBlob && !isPlaying) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"playButton\"\n          (actionClick)=\"replayRecording()\"\n        ></ui-action-button>\n      }\n\n      <!-- Stop Play  -->\n      @if (recordedBlob && isPlaying) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"stopPlaybackButton\"\n          (actionClick)=\"replayRecording()\"\n        ></ui-action-button>\n      }\n\n      @if (isRecording) {\n        <div class=\"progress\">{{ time }}</div>\n      }\n    </div>\n\n    <div class=\"waveformBand\" [class.open]=\"isWaveformOpen || isRecording || !!recordedBlob\">\n      <div class=\"waveformGrid\"></div>\n      <div class=\"waveform\" #waveform></div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}:host ::ng-deep .waveform{height:unset!important}.recorderContainer{display:flex;flex-direction:row;justify-content:space-between;width:100%;min-width:0;align-items:center;gap:.5rem}.active ::ng-deep .recorderToolbar{border:1px solid #e5e7eb;border-radius:.5rem}.isRecording ::ng-deep .recorderToolbar{padding-right:1rem}.recorderToolbar ::ng-deep .sb4-red,.recorderToolbar ::ng-deep .sb4-primary{border:1px solid #e5e7eb;box-shadow:unset}.active ::ng-deep .recorderToolbar ::ng-deep .sb4-red,.active ::ng-deep .recorderToolbar ::ng-deep .sb4-primary{border:unset}.mainButton ::ng-deep .sb4-red,.mainButton ::ng-deep .sb4-primary{padding:.5rem .75rem}.recorderMain{display:flex;align-items:center;min-width:0;flex:1}.direction-right .recorderMain{flex-direction:row}.direction-left .recorderMain{flex-direction:row-reverse}.waveform{width:100%;height:45px}.waveformBand{position:relative;display:grid;align-items:center;width:0;max-width:0;min-width:0;opacity:0;overflow:hidden;border-radius:5px;flex:1 1 0;transform:scaleX(.96);will-change:opacity,transform,margin;transition:max-width .22s ease,opacity .18s ease,margin .22s ease,transform .22s ease}.waveformBand.open{min-width:35px;max-width:100%;opacity:1;transform:scaleX(1)}.direction-right .waveformBand{margin-left:0}.direction-left .waveformBand{margin-right:0}.direction-right .waveformBand.open{margin-left:.45rem}.direction-left .waveformBand.open{margin-right:.45rem}.waveformGrid{position:absolute;inset:0;border:1px solid #e5e7eb;border-radius:.5rem;background:repeating-linear-gradient(to right,rgba(148,163,184,.35) 0,rgba(148,163,184,.35) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,#94a3b814,#94a3b805);pointer-events:none}.recorderToolbar{background-color:transparent;display:flex;flex-direction:row;align-items:center}.progress{align-content:center;font-size:1rem;height:100%;color:#6b7280}.hasRecording ::ng-deep .recorderToolbar ui-action-button{border-right:1px solid #e5e7eb}.hasRecording ::ng-deep .recorderToolbar ui-action-button:last-child{border-right:unset}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: VoiceRecordWidgetComponent, isStandalone: true, selector: "voice-record-widget", inputs: { openDirection: { classPropertyName: "openDirection", publicName: "openDirection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { recordingSaved: "recordingSaved" }, viewQueries: [{ propertyName: "waveformRef", first: true, predicate: ["waveform"], descendants: true }, { propertyName: "mainButton", first: true, predicate: ["mainButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  class=\"recorderContainer\"\n  [class.direction-left]=\"isLeftDirection\"\n  [class.direction-right]=\"!isLeftDirection\"\n  [class.active]=\"isWaveformOpen || isRecording || !!recordedBlob\"\n  [class.isRecording]=\"isRecording\"\n  [class.hasRecording]=\"recordedBlob\"\n  >\n  <div class=\"recorderMain\">\n    <div class=\"recorderToolbar\">\n      <!-- Start Recording -->\n      @if (!isRecording) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"micButton\"\n          (actionClick)=\"startRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Stop Recording -->\n      @if (isRecording) {\n        <ui-action-button\n          class=\"mainButton\"\n          #mainButton\n          [descriptor]=\"stopButton\"\n          (actionClick)=\"stopRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Save Recording -->\n      @if (recordedBlob) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"saveButton\"\n          (actionClick)=\"saveRecording()\"\n          >\n        </ui-action-button>\n      }\n\n      <!-- Start Play  -->\n      @if (recordedBlob && !isPlaying) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"playButton\"\n          (actionClick)=\"replayRecording()\"\n        ></ui-action-button>\n      }\n\n      <!-- Stop Play  -->\n      @if (recordedBlob && isPlaying) {\n        <ui-action-button\n          class=\"mainButton\"\n          [descriptor]=\"stopPlaybackButton\"\n          (actionClick)=\"replayRecording()\"\n        ></ui-action-button>\n      }\n\n      @if (isRecording) {\n        <div class=\"progress\">{{ time }}</div>\n      }\n    </div>\n\n    <div class=\"waveformBand\" [class.open]=\"isWaveformOpen || isRecording || !!recordedBlob\">\n      <div class=\"waveformGrid\"></div>\n      <div class=\"waveform\" #waveform></div>\n    </div>\n  </div>\n</div>\n", styles: [":host{display:block;width:100%;min-width:0}:host ::ng-deep .waveform{height:unset!important}.recorderContainer{display:flex;flex-direction:row;justify-content:space-between;width:100%;min-width:0;align-items:center;gap:.5rem}.active ::ng-deep .recorderToolbar{border:1px solid #e5e7eb;border-radius:.5rem}.isRecording ::ng-deep .recorderToolbar{padding-right:1rem}.recorderToolbar ::ng-deep .sb4-red,.recorderToolbar ::ng-deep .sb4-primary{border:1px solid #e5e7eb;box-shadow:unset}.active ::ng-deep .recorderToolbar ::ng-deep .sb4-red,.active ::ng-deep .recorderToolbar ::ng-deep .sb4-primary{border:unset}.mainButton ::ng-deep .sb4-red,.mainButton ::ng-deep .sb4-primary{padding:.5rem .75rem}.recorderMain{display:flex;align-items:center;min-width:0;flex:1}.direction-right .recorderMain{flex-direction:row}.direction-left .recorderMain{flex-direction:row-reverse}.waveform{width:100%;height:45px}.waveformBand{position:relative;display:grid;align-items:center;width:0;max-width:0;min-width:0;opacity:0;overflow:hidden;border-radius:5px;flex:1 1 0;transform:scaleX(.96);will-change:opacity,transform,margin;transition:max-width .22s ease,opacity .18s ease,margin .22s ease,transform .22s ease}.waveformBand.open{min-width:35px;max-width:100%;opacity:1;transform:scaleX(1)}.direction-right .waveformBand{margin-left:0}.direction-left .waveformBand{margin-right:0}.direction-right .waveformBand.open{margin-left:.45rem}.direction-left .waveformBand.open{margin-right:.45rem}.waveformGrid{position:absolute;inset:0;border:1px solid #e5e7eb;border-radius:.5rem;background:repeating-linear-gradient(to right,rgba(148,163,184,.35) 0,rgba(148,163,184,.35) 2px,transparent 2px,transparent 8px),linear-gradient(to bottom,#94a3b814,#94a3b805);pointer-events:none}.recorderToolbar{background-color:transparent;display:flex;flex-direction:row;align-items:center}.progress{align-content:center;font-size:1rem;height:100%;color:#6b7280}.hasRecording ::ng-deep .recorderToolbar ui-action-button{border-right:1px solid #e5e7eb}.hasRecording ::ng-deep .recorderToolbar ui-action-button:last-child{border-right:unset}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: VoiceRecordWidgetComponent, decorators: [{
             type: Component,
@@ -8600,7 +8706,7 @@ class SmartFileEditorComponent {
                 useExisting: forwardRef(() => SmartFileEditorComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "@if (widgetInstance && widgetInstance.fileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warninig-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else if (!widgetInstance.value || fileToChange) {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\n        [isMultiple]=\"false\"\n        [isDisabled]=\"widgetInstance.isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: widgetInstance.isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      <div class=\"uploadedFile\">\n        <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n\n        <div class=\"fileData\">\n          <div class=\"fileDataContainer\">\n            <span class=\"fileName\">{{ widgetInstance.value?.fileName }}</span>\n            <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(widgetInstance.value?.size)) }}</span>\n          </div>\n        </div>\n\n        <div class=\"fileActions\">\n          <smart-ui-action-toolbar [id]=\"widgetInstance.toolbarId\"></smart-ui-action-toolbar>\n\n          @if (!fileToChange) {\n            <ui-action-button\n              class=\"changeButton\"\n              (actionClick)=\"change(widgetInstance.value)\"\n              [disabled]=\"widgetInstance.isDisabled\"\n              [descriptor]=\"changeButton\"\n              >\n            </ui-action-button>\n          } @else {\n            <ui-action-button\n              class=\"removeIcon\"\n              (actionClick)=\"cancelChange()\"\n              [descriptor]=\"removeButton\"\n            ></ui-action-button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.fileEditorComponent:has(::ng-deep smartfileuploader) ::ng-deep .uploadedFile{border-top:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warninig-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warninig-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 12px,#f1f1f1 12px 24px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+        ], ngImport: i0, template: "@if (widgetInstance && widgetInstance.fileUploaderProperties) {\n  @if (widgetInstance.showLabel) {\n    <h4\n      class=\"labelContainer {{ widgetInstance.cssLabelClass ?? '' }}\"\n      [ngClass]=\"getLabelNgClass()\"\n      [ngStyle]=\"getLabelStyle()\"\n      >\n      {{ widgetInstance.label }}\n    </h4>\n  }\n\n  <div class=\"fileEditorComponent\">\n    @if (widgetInstance.value && !isTypeSupported(widgetInstance.value)) {\n      <div class=\"errorMessage\">\n        <smart-icon [icon]=\"errorIcon\" [color]=\"'var(--warninig-color)'\"></smart-icon>\n        <span> Unsupported widgetInstance.value type for this widget.</span>\n      </div>\n    } @else if (!widgetInstance.value || fileToChange) {\n      <smart-upload-widget\n        class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n        [ngClass]=\"getNgClass()\"\n        [ngStyle]=\"getStyle()\"\n        [uploadDescriptor]=\"widgetInstance.fileUploaderProperties.uploadDescriptor!\"\n        [isMultiple]=\"false\"\n        [isDisabled]=\"widgetInstance.isDisabled\"\n        (uploadFilesEvent)=\"upload($event)\"\n        />\n    }\n\n    <div\n      [ngClass]=\"{ disabledWidget: widgetInstance.isDisabled }\"\n      class=\"uploadedFileContainer\"\n      [style.display]=\"\n        widgetInstance.value && isTypeSupported(widgetInstance.value) ? 'block' : 'none'\n      \"\n      >\n      <div class=\"uploadedFile\">\n        <smart-icon class=\"uploadedFileIcon\" [icon]=\"fileIcon\"></smart-icon>\n\n        <div class=\"fileData\">\n          <div class=\"fileDataContainer\">\n            <span class=\"fileName\">{{ widgetInstance.value?.fileName }}</span>\n            <span class=\"fileSize\">{{ formatSize($safeNavigationMigration(widgetInstance.value?.size)) }}</span>\n          </div>\n        </div>\n\n        <div class=\"fileActions\">\n          <smart-ui-action-toolbar [id]=\"widgetInstance.toolbarId\"></smart-ui-action-toolbar>\n\n          @if (!fileToChange) {\n            <ui-action-button\n              class=\"changeButton\"\n              (actionClick)=\"change(widgetInstance.value)\"\n              [disabled]=\"widgetInstance.isDisabled\"\n              [descriptor]=\"changeButton\"\n              >\n            </ui-action-button>\n          } @else {\n            <ui-action-button\n              class=\"removeIcon\"\n              (actionClick)=\"cancelChange()\"\n              [descriptor]=\"removeButton\"\n            ></ui-action-button>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n}\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem;width:100%}.fileEditorComponent{border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileEditorComponent ::ng-deep smartfileuploader ::ng-deep .container{border:unset;border-radius:unset}.uploadedFileContainer{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;gap:1rem}.fileEditorComponent:has(::ng-deep smartfileuploader) ::ng-deep .uploadedFile{border-top:1px solid #e0e0e0}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.fileActions ::ng-deep button{border:unset}.fileActions ::ng-deep button:hover{border:unset}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.uploadedFileIcon{width:3rem;display:flex;justify-content:center}.fileEditorComponent:has(::ng-deep .errorMessage){border-color:var(--warninig-color)}.errorMessage{padding:1rem;font-size:1.5rem;color:var(--warninig-color);display:flex;flex-direction:row;align-items:center;gap:1rem}:host ::ng-deep .disabledWidget ::ng-deep .changeButton *,:host ::ng-deep .disabledWidget ::ng-deep .fileData *{opacity:.7}:host ::ng-deep smartfileuploader ::ng-deep .uploadedFile{background:repeating-linear-gradient(45deg,#fafafa,#fafafa 12px,#f1f1f1 12px 24px)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFileEditorComponent, decorators: [{
             type: Component,
@@ -10805,7 +10911,7 @@ 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 (\n    widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible\n  ) {\n    <div\n      [ngClass]=\"widgetInstance.cssClass ?? ''\"\n      [class.sb4-widget-required]=\"isRequired()\"\n      class=\"container\"\n    >\n      @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\n        <div [attr.data-testid]=\"widgetInstance.key\" [ngClass]=\"getDirection()\">\n          @for (widget of visibleChildren; track widget) {\n            <smartformwidget\n              [form]=\"form()\"\n              [widgetInstance]=\"widget\"\n              class=\"container-item\"\n              [ngClass]=\"widget.cssClass ?? ''\"\n              [onBlur]=\"onBlur()\"\n              [onValueChange]=\"onValueChange\"\n              [sophisticatedValueChange]=\"sophisticatedValueChange()\"\n              [blurSophisticatedValueChange]=\"blurSophisticatedValueChange()\"\n              class=\"{{ widget.key }}\"\n              [labelColor]=\"labelColor()\"\n            ></smartformwidget>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD) {\n        <div (capsLock)=\"capsOn = $event\" class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input textField widgetContent {{\n              widgetInstance.cssClass ?? ''\n            }}\"\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\n                    ? widgetInstance.inputMode.toLocaleLowerCase()\n                    : '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=\"{{\n                  widgetInstance.isPassword\n                    ? hidePassword\n                      ? 'password'\n                      : 'text'\n                    : ''\n                }}\"\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>{{\n                  hidePassword ? \"visibility_off\" : \"visibility\"\n                }}</mat-icon>\n              </button>\n            }\n            <mat-autocomplete #textFieldAuto=\"matAutocomplete\">\n              @for (option of filteredOptions | async; track option) {\n                <mat-option [value]=\"option.label\">\n                  <span\n                    [innerHTML]=\"option.label | highlight: toHighlight\"\n                  ></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]=\"\n                    widgetInstance.capsLockWarningIcon ?? 'keyboard_capslock'\n                  \"\n                  color=\"warn\"\n                ></smart-icon>\n              }\n              @if (\n                widgetInstance.icon && widgetInstance.iconPosition === \"PRE\"\n              ) {\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 ||\n                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)=\"\n                  widgetInstance.textFieldButton.callback(widgetInstance)\n                \"\n              >\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().PRE &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.textFieldButton.icon\"\n                    [color]=\"widgetInstance.textFieldButton.iconColor\"\n                  >\n                  </smart-icon>\n                }\n                {{ widgetInstance.textFieldButton.label }}\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().POST &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\">\n                  </smart-icon>\n                }\n              </button>\n            }\n            @if (\n              widgetInstance.showCharacterLimitSuffix &&\n              widgetInstance.maxLength\n            ) {\n              <mat-hint matSuffix align=\"end\">{{\n                widgetInstance.maxLength -\n                  form().controls[widgetInstance.key].value.length\n              }}</mat-hint>\n            }\n          </mat-form-field>\n          @if (\n            !widgetInstance?.hint ||\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input textField widgetContent {{\n              widgetInstance.cssClass ?? ''\n            }}\"\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> </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)=\"\n                  widgetInstance.textFieldButton.callback(widgetInstance)\n                \"\n              >\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().PRE &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\">\n                  </smart-icon>\n                }\n                {{ widgetInstance.textFieldButton.label }}\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().POST &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\">\n                  </smart-icon>\n                }\n              </button>\n            }\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label\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 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 (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label\n                class=\"label\"\n                [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-chip-grid\n              #chipListLookup\n              aria-label=\"{{ widgetInstance.label }}\"\n            >\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 (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label\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]=\"\n                widgetInstance.textBoxProperties?.minRows ?? 1\n              \"\n              [cdkAutosizeMaxRows]=\"\n                widgetInstance.textBoxProperties?.maxRows ?? undefined\n              \"\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 (\n              widgetInstance.showCharacterLimitSuffix &&\n              widgetInstance.maxLength\n            ) {\n              <mat-hint matSuffix align=\"end\">{{\n                widgetInstance.maxLength -\n                  form().controls[widgetInstance.key].value.length\n              }}</mat-hint>\n            }\n          </mat-form-field>\n          @if (\n            !widgetInstance.hint ||\n            widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\n        <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div\n            class=\"input checkbox widgetContent {{\n              widgetInstance.cssClass ?? ''\n            }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"radioLabel\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\n              <div class=\"checkbox-item-container\">\n                <mat-checkbox\n                  class=\"selecatbleObject\"\n                  formControlName=\"{{ widgetInstance.key }}\"\n                  (change)=\"onValueChange?.next(widgetInstance)\"\n                  (change)=\"onBlur()?.next(widgetInstance)\"\n                >\n                  {{ widgetInstance.label }}\n                </mat-checkbox>\n              </div>\n              <div class=\"radio-error\">\n                <span class=\"mat-error\">\n                  {{ widgetInstance.error }}\n                </span>\n                @if (widgetInstance.error && widgetInstance.errorIcon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.errorIcon\"\n                    [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  ></smart-icon>\n                }\n              </div>\n            </section>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX_2) {\n        <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div\n            class=\"input checkbox widgetContent {{\n              widgetInstance.cssClass ?? ''\n            }}\"\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 (\n                checkbox of widgetInstance.valueList;\n                track checkbox;\n                let i = $index\n              ) {\n                <div class=\"checkbox-item-container\">\n                  @if (checkbox.imageUrl) {\n                    <img\n                      title=\"{{ widgetInstance.key }}\"\n                      class=\"checkbox-item-image\"\n                      [src]=\"checkbox.imageUrl\"\n                    />\n                  }\n                  <mat-checkbox\n                    class=\"selecatbleObject\"\n                    formControlName=\"{{\n                      widgetInstance.key + '.' + checkbox.key\n                    }}\"\n                    [value]=\"checkbox.value\"\n                    (change)=\"onValueChange?.next(checkbox)\"\n                    [disabled]=\"widgetInstance.isDisabled!\"\n                  >\n                    {{ checkbox.label }}\n                  </mat-checkbox>\n                </div>\n              }\n              <div class=\"radio-error\">\n                <span class=\"mat-error\">\n                  {{ widgetInstance.error }}\n                </span>\n                @if (widgetInstance.error && widgetInstance.errorIcon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.errorIcon\"\n                    [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  ></smart-icon>\n                }\n              </div>\n            </section>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.RADIO_BUTTON) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-radio-group\n            class=\"input radio-section widgetContent {{\n              widgetInstance.cssClass ?? ''\n            }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            [attr.data-testid]=\"widgetInstance.key\"\n            aria-label=\"{{ widgetInstance.label }}\"\n            appearance=\"outline\"\n            formControlName=\"{{ widgetInstance.key }}\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"radioLabel\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <div [ngClass]=\"getDirection()\">\n              @for (radio of widgetInstance.valueList; track radio) {\n                <div class=\"radio-item-container\">\n                  @if (radio.imageUrl) {\n                    <img\n                      title=\"{{ widgetInstance.key }}\"\n                      class=\"radio-item-image\"\n                      [src]=\"radio.imageUrl\"\n                    />\n                  }\n                  <mat-radio-button\n                    class=\"selecatbleObject\"\n                    value=\"{{ radio.value }}\"\n                    [ngClass]=\"getDirection()\"\n                    (change)=\"onValueChange?.next(radio.value)\"\n                    [disabled]=\"widgetInstance.isDisabled\"\n                  >\n                    {{ radio.label }}\n                  </mat-radio-button>\n                </div>\n              }\n              <div class=\"radio-error\">\n                <span class=\"mat-error\">\n                  {{ widgetInstance.error }}\n                </span>\n                @if (widgetInstance.error && widgetInstance.errorIcon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.errorIcon\"\n                    [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  ></smart-icon>\n                }\n              </div>\n              <div class=\"radio-icon\">\n                @if (widgetInstance.icon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.icon\"\n                    [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                  >\n                  </smart-icon>\n                }\n              </div>\n            </div>\n          </mat-radio-group>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DATE_PICKER) {\n        <div class=\"datePicker widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label\n                class=\"label\"\n                [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-datepicker-toggle\n              matSuffix\n              [for]=\"picker\"\n            ></mat-datepicker-toggle>\n            <mat-datepicker\n              #picker\n              (closed)=\"handleBlurEvent(widgetInstance)\"\n            ></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]=\"\n                convertToLocalDateTime(\n                  widgetInstance.dateFieldProperties?.minDate ?? null\n                )\n              \"\n              [max]=\"\n                convertToLocalDateTime(\n                  widgetInstance.dateFieldProperties?.maxDate ?? null\n                )\n              \"\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 ||\n                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 (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <lib-smart-month-picker\n            [attr.data-testid]=\"widgetInstance.key\"\n            [widgetInstance]=\"widgetInstance\"\n            (valueChange)=\"handleYearMonthPicked($event)\"\n          ></lib-smart-month-picker>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <div\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </div>\n              @if (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div class=\"dateTimePickerContainer\">\n            <mat-form-field\n              class=\"input widgetContent date {{\n                widgetInstance.cssClass ?? ''\n              }}\"\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\n                matSuffix\n                [for]=\"picker\"\n              ></mat-datepicker-toggle>\n              <mat-datepicker\n                #picker\n                (closed)=\"handleBlurEvent(widgetInstance)\"\n              ></mat-datepicker>\n              <input\n                #dateInput\n                matInput\n                [formControlName]=\"widgetInstance.key\"\n                [attr.data-testid]=\"widgetInstance.key\"\n                [min]=\"\n                  convertToLocalDateTime(\n                    widgetInstance.dateFieldProperties?.minDate ?? null\n                  )\n                \"\n                [max]=\"\n                  convertToLocalDateTime(\n                    widgetInstance.dateFieldProperties?.maxDate ?? null\n                  )\n                \"\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 ||\n                  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 (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label\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\n                  ? compareItems\n                  : widgetInstance.compareWith\n              \"\n              placeholder=\"{{\n                widgetInstance.placeholder ? widgetInstance.placeholder : ''\n              }}\"\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 (\n                        innerOption of option.valueList;\n                        track innerOption\n                      ) {\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 ||\n                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>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label\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\n                  ? compareItems\n                  : widgetInstance.compareWith\n              \"\n              placeholder=\"{{\n                widgetInstance.placeholder ? widgetInstance.placeholder : ''\n              }}\"\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 (\n                        innerOption of option.valueList;\n                        track innerOption\n                      ) {\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>{{ widgetInstance.hint?.text }}</mat-hint>\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\n            class=\"label-title labelContainer\"\n            [ngClass]=\"widgetInstance.cssClass ?? ''\"\n          >\n            <h4\n              class=\"{{ labelColor() }} smart-form-widget-label {{\n                widgetInstance.cssClass ?? ''\n              }}\"\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 (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent time {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label\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 (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div\n            class=\"widgetContent  {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n          >\n            <mat-slide-toggle\n              formControlName=\"{{ widgetInstance.key }}\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              (change)=\"onValueChange?.next($event)\"\n              [labelPosition]=\"widgetInstance.toggleLabelPosition ?? 'before'\"\n              >{{\n                !widgetInstance.showLabel ? widgetInstance.label : \"\"\n              }}</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 {{\n                widgetInstance.cssLabelClass ?? ''\n              }}\"\n              [ngClass]=\"getLabelNgClass()\"\n              [ngStyle]=\"getLabelStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          <div class=\"smartIndicator widgetContent\">\n            <div\n              class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\"\n              [ngClass]=\"getNgClass()\"\n            >\n              @for (item of indicatorItems; track item; let i = $index) {\n                <div\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() }} {{\n                widgetInstance.cssLabelClass ?? ''\n              }}\"\n              [ngClass]=\"getLabelNgClass()\"\n              [ngStyle]=\"getLabelStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          @if (widgetInstance.imageProperties?.image) {\n            <smart-icon\n              [imageResource]=\"\n                $safeNavigationMigration(widgetInstance.imageProperties?.image)\n              \"\n              class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\n              alt=\"Image\"\n              title=\"{{ widgetInstance.key }}\"\n              [ngClass]=\"getNgClass()\"\n              [ngStyle]=\"getStyle()\"\n            ></smart-icon>\n          } @else if (widgetInstance.value) {\n            <smart-icon\n              [(ngModel)]=\"widgetInstance.value\"\n              [imageResource]=\"widgetInstance.value\"\n              class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\n              alt=\"Image\"\n              title=\"{{ widgetInstance.key }}\"\n              [ngClass]=\"getNgClass()\"\n              [ngStyle]=\"getStyle()\"\n            ></smart-icon>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DIV) {\n        <div\n          class=\"smartDiv\"\n          [innerHTML]=\"sanitizeHtml(getWidgetLabel(widgetInstance))\"\n          [ngClass]=\"getNgClass()\"\n          [class.clickable]=\"!!widgetInstance.divProperties?.onClick\"\n          [ngStyle]=\"getStyle()\"\n          (click)=\"onDivClick()\"\n        ></div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.HTML) {\n        <smart-html-widget\n          [widgetInstance]=\"widgetInstance\"\n          [ngClass]=\"getNgClass()\"\n          [ngStyle]=\"getStyle()\"\n        ></smart-html-widget>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.SVG) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <h4\n              class=\"labelContainer {{ labelColor() }} {{\n                widgetInstance.cssLabelClass ?? ''\n              }}\"\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() }} {{\n                widgetInstance.cssLabelClass ?? ''\n              }}\"\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]=\"\n                $safeNavigationMigration(\n                  widgetInstance.uiActionDescriptor?.color\n                )\n              \"\n              (click)=\"onButtonClicked(widgetInstance)\"\n            >\n              @if (isOnlyIcon(widgetInstance.uiActionDescriptor)) {\n                @if (widgetInstance.uiActionDescriptor?.icon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n                    [color]=\"\n                      widgetInstance.uiActionDescriptor?.iconColor ??\n                      widgetInstance.uiActionDescriptor?.color\n                    \"\n                  ></smart-icon>\n                }\n              } @else {\n                @if (\n                  widgetInstance.uiActionDescriptor?.icon &&\n                  widgetInstance.uiActionDescriptor?.iconPosition === \"PRE\"\n                ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n                    [color]=\"\n                      widgetInstance.uiActionDescriptor?.iconColor ??\n                      widgetInstance.uiActionDescriptor?.color\n                    \"\n                  ></smart-icon>\n                }\n                {{ widgetInstance.uiActionDescriptor?.title }}\n                @if (\n                  widgetInstance.uiActionDescriptor?.icon &&\n                  widgetInstance.uiActionDescriptor?.iconPosition === \"POST\"\n                ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n                    [color]=\"\n                      widgetInstance.uiActionDescriptor?.iconColor ??\n                      widgetInstance.uiActionDescriptor?.color\n                    \"\n                  ></smart-icon>\n                }\n              }\n            </button>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.COMPONENT) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <h4 class=\"labelContainer {{ labelColor() }}\">\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          <div class=\"widgetContent\">\n            <ng-template #customComponent></ng-template>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.RICH_TEXT) {\n        <div class=\"widgetContainer\">\n          <div class=\"labelContainer\">\n            @if (widgetInstance.showLabel) {\n              <h4 class=\"{{ labelColor() }}\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n            }\n            @if (\n              widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n            ) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <div class=\"widgetContent\">\n            <quill-editor\n              #quillEditor\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [modules]=\"\n                widgetInstance.isDisabled\n                  ? emptyQuillToolbar\n                  : widgetInstance.quillModules\n              \"\n              [placeholder]=\"widgetInstance.placeholder ?? ''\"\n              [readOnly]=\"widgetInstance.isReadonly ?? false\"\n              [maxLength]=\"widgetInstance.maxLength ?? 0\"\n              (onContentChanged)=\"onRichTextEditorContentChanged($event)\"\n            ></quill-editor>\n            @if (\n              !widgetInstance?.hint ||\n              widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n            ) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n            @if (\n              widgetInstance.showCharacterLimitSuffix &&\n              widgetInstance.maxLength\n            ) {\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 (\n              widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n            ) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <div class=\"widgetContent\">\n            <lib-sortable-widget\n              [formControlName]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [widgetInstance]=\"widgetInstance\"\n            ></lib-sortable-widget>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.MATRIX) {\n        <div class=\"widgetContainer\">\n          <div class=\"labelContainer\">\n            @if (widgetInstance.showLabel) {\n              <h4 class=\"{{ labelColor() }}\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n            }\n            @if (\n              widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n            ) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <table class=\"matrixTable widgetContent\">\n            <tr>\n              <th></th>\n              @for (option of widgetInstance.value.columns; track option) {\n                <th class=\"optionLabel\">\n                  {{ option.displayValue }}\n                </th>\n              }\n            </tr>\n            @for (\n              question of widgetInstance.value.rows;\n              track question;\n              let i = $index\n            ) {\n              <tr>\n                <th class=\"questionLabel\">\n                  <label>{{ question.displayValue }}</label>\n                </th>\n                @for (\n                  option of widgetInstance.value.columns;\n                  track option;\n                  let j = $index\n                ) {\n                  <td class=\"selectTd\">\n                    @if (!widgetInstance.isMultiple) {\n                      <mat-radio-group\n                        [formControlName]=\"\n                          widgetInstance.key + '.' + question.code\n                        \"\n                        [name]=\"'q' + i\"\n                      >\n                        <mat-radio-button [value]=\"option.code\">\n                        </mat-radio-button>\n                      </mat-radio-group>\n                    }\n                    @if (widgetInstance.isMultiple) {\n                      <div>\n                        <mat-checkbox\n                          [formControlName]=\"\n                            widgetInstance.key +\n                            '.data.' +\n                            question.code +\n                            '.' +\n                            option.code\n                          \"\n                          [value]=\"\n                            widgetInstance.value['data'][question.code][\n                              option.code\n                            ]\n                          \"\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 (\n              widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n            ) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <youtube-player\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            videoId=\"{{ widgetInstance.videoId }}\"\n            [width]=\"widgetInstance.width\"\n            [height]=\"widgetInstance.height\"\n            [startSeconds]=\"widgetInstance.startSeconds\"\n            [endSeconds]=\"widgetInstance.endSeconds\"\n          ></youtube-player>\n          @if (\n            !widgetInstance?.hint ||\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}.ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media(pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow,.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:\"\";display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label:before,.ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label:before,.ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0;content:\"Save\";padding-right:0}.ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}.ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}.ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}.checkbox-section,.radio-section{display:flex;flex-direction:column}.input{width:100%}.direction-col,.toggle-col{display:flex;flex-direction:column;gap:.5em}.toggle-col>label{font-size:.75rem;color:#6b7280;padding-left:.5em}.direction-row{display:flex;flex-direction:row;align-items:center;gap:.5em}.selecatbleObject{margin:.5em}.radioLabel{color:var(--primary-color);text-align:left!important}.container{height:100%}.input{height:100%;display:flex;flex-direction:column}.checkbox{flex-direction:column}.mat-form-field-wrapper{padding-bottom:0!important}.input .mat-mdc-standard-chip.mat-chip-with-trailing-icon{padding-right:12px}.time-picker{display:flex;flex-direction:row;height:100%;border:solid 2px lightgrey;padding:1em;border-radius:4px}.time-picker:hover{border-color:#000}::ng-deep .mat-h4 .mat-body-1 .mat-typography h4{margin:0}.label{margin:28px 0 8px}.smartIndicator{display:flex;flex-direction:column;gap:.25rem;width:-moz-fit-content;width:fit-content}.indicatorItems{display:flex;flex-direction:row;gap:.25rem}.indicatorItem{width:3rem;height:.25rem;background-color:#d3d3d3;border-radius:.5rem}.radio-error{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:row;gap:.5rem}.mat-calendar-previous-button,.mat-calendar-next-button{padding:0;min-width:0;width:40px!important;height:40px!important;flex-shrink:0;line-height:40px;border-radius:50%}.mat-calendar-arrow{height:36px!important;display:flex!important;flex-direction:column!important;justify-content:center}.radio-item-container,.checkbox-item-container{display:flex;flex-direction:column}.widgetContent::ng-deep .ql-container{height:200px;width:460px}.dateTimePickerContainer{display:flex;flex-direction:row;gap:.25rem}.dateTimePickerContainer mat-form-field{flex:1}.date,.time{width:100%}.date .mat-form-field-infix,.time .mat-form-field-infix{width:inherit!important}::ng-deep .mat-icon.mat-drag-indicator{--drag-indicator: #3b3b3b;color:var(--drag-indicator)}.matrixTable{width:100%;border-spacing:0 1rem}.matrixTable th{padding:.25rem}.matrixTable .optionLabel,.matrixTable td{text-align:center}.example-month-picker .mat-calendar-period-button{pointer-events:none}.example-month-picker .mat-calendar-arrow{display:none}.textFieldContainer{display:flex;flex-direction:row}.textFieldContainer{align-content:center;border:1px solid #cbd5e1;border-radius:3px;background-color:#fff}.textFieldContainer input{border:unset}.textFieldContainer:focus-within:not(:has(input:disabled)){outline:0 none;outline-offset:0;box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3}.textFieldContainer:has(input:disabled) .clearButton{cursor:not-allowed;opacity:.6}.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", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: SmartMonthPickerComponent, selector: "lib-smart-month-picker", inputs: ["widgetInstance"], outputs: ["valueChange"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: SmartVoiceRecorderComponent, selector: "smart-voice-recorder", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: SmartFileEditorComponent, selector: "smart-file-editor", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: SmartMultiFileEditorComponent, selector: "smart-multi-file-editor", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent", "fileEvent"] }, { kind: "component", type: SmartHtmlWidgetComponent, selector: "smart-html-widget", inputs: ["widgetInstance"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: SortableWidgetComponent, selector: "lib-sortable-widget", inputs: ["widgetInstance"] }, { kind: "component", type: YouTubePlayer, selector: "youtube-player", inputs: ["videoId", "height", "width", "startSeconds", "endSeconds", "suggestedQuality", "playerVars", "disableCookies", "loadApi", "disablePlaceholder", "showBeforeIframeApiLoads", "placeholderButtonLabel", "placeholderImageQuality"], outputs: ["ready", "stateChange", "error", "apiChange", "playbackQualityChange", "playbackRateChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    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 (\n    widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible\n  ) {\n    <div\n      [ngClass]=\"widgetInstance.cssClass ?? ''\"\n      [class.sb4-widget-required]=\"isRequired()\"\n      class=\"container\"\n    >\n      @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\n        <div [attr.data-testid]=\"widgetInstance.key\" [ngClass]=\"getDirection()\">\n          @for (widget of visibleChildren; track widget) {\n            <smartformwidget\n              [form]=\"form()\"\n              [widgetInstance]=\"widget\"\n              class=\"container-item\"\n              [ngClass]=\"widget.cssClass ?? ''\"\n              [onBlur]=\"onBlur()\"\n              [onValueChange]=\"onValueChange\"\n              [sophisticatedValueChange]=\"sophisticatedValueChange()\"\n              [blurSophisticatedValueChange]=\"blurSophisticatedValueChange()\"\n              class=\"{{ widget.key }}\"\n              [labelColor]=\"labelColor()\"\n            ></smartformwidget>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD) {\n        <div (capsLock)=\"capsOn = $event\" class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input textField widgetContent {{\n              widgetInstance.cssClass ?? ''\n            }}\"\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\n                    ? widgetInstance.inputMode.toLocaleLowerCase()\n                    : '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=\"{{\n                  widgetInstance.isPassword\n                    ? hidePassword\n                      ? 'password'\n                      : 'text'\n                    : ''\n                }}\"\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>{{\n                  hidePassword ? \"visibility_off\" : \"visibility\"\n                }}</mat-icon>\n              </button>\n            }\n            <mat-autocomplete #textFieldAuto=\"matAutocomplete\">\n              @for (option of filteredOptions | async; track option) {\n                <mat-option [value]=\"option.label\">\n                  <span\n                    [innerHTML]=\"option.label | highlight: toHighlight\"\n                  ></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]=\"\n                    widgetInstance.capsLockWarningIcon ?? 'keyboard_capslock'\n                  \"\n                  color=\"warn\"\n                ></smart-icon>\n              }\n              @if (\n                widgetInstance.icon && widgetInstance.iconPosition === \"PRE\"\n              ) {\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 ||\n                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)=\"\n                  widgetInstance.textFieldButton.callback(widgetInstance)\n                \"\n              >\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().PRE &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.textFieldButton.icon\"\n                    [color]=\"widgetInstance.textFieldButton.iconColor\"\n                  >\n                  </smart-icon>\n                }\n                {{ widgetInstance.textFieldButton.label }}\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().POST &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\">\n                  </smart-icon>\n                }\n              </button>\n            }\n            @if (\n              widgetInstance.showCharacterLimitSuffix &&\n              widgetInstance.maxLength\n            ) {\n              <mat-hint matSuffix align=\"end\">{{\n                widgetInstance.maxLength -\n                  form().controls[widgetInstance.key].value.length\n              }}</mat-hint>\n            }\n          </mat-form-field>\n          @if (\n            !widgetInstance?.hint ||\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input textField widgetContent {{\n              widgetInstance.cssClass ?? ''\n            }}\"\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> </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)=\"\n                  widgetInstance.textFieldButton.callback(widgetInstance)\n                \"\n              >\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().PRE &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\">\n                  </smart-icon>\n                }\n                {{ widgetInstance.textFieldButton.label }}\n                @if (\n                  widgetInstance.textFieldButton.iconPosition ===\n                    smartFormTextFieldButtonIconPosition().POST &&\n                  widgetInstance.textFieldButton.icon\n                ) {\n                  <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\">\n                  </smart-icon>\n                }\n              </button>\n            }\n          </mat-form-field>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label\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 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 (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label\n                class=\"label\"\n                [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-chip-grid\n              #chipListLookup\n              aria-label=\"{{ widgetInstance.label }}\"\n            >\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 (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label\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]=\"\n                widgetInstance.textBoxProperties?.minRows ?? 1\n              \"\n              [cdkAutosizeMaxRows]=\"\n                widgetInstance.textBoxProperties?.maxRows ?? undefined\n              \"\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 (\n              widgetInstance.showCharacterLimitSuffix &&\n              widgetInstance.maxLength\n            ) {\n              <mat-hint matSuffix align=\"end\">{{\n                widgetInstance.maxLength -\n                  form().controls[widgetInstance.key].value.length\n              }}</mat-hint>\n            }\n          </mat-form-field>\n          @if (\n            !widgetInstance.hint ||\n            widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\n        <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div\n            class=\"input checkbox widgetContent {{\n              widgetInstance.cssClass ?? ''\n            }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"radioLabel\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\n              <div class=\"checkbox-item-container\">\n                <mat-checkbox\n                  class=\"selecatbleObject\"\n                  formControlName=\"{{ widgetInstance.key }}\"\n                  (change)=\"onValueChange?.next(widgetInstance)\"\n                  (change)=\"onBlur()?.next(widgetInstance)\"\n                >\n                  {{ widgetInstance.label }}\n                </mat-checkbox>\n              </div>\n              <div class=\"radio-error\">\n                <span class=\"mat-error\">\n                  {{ widgetInstance.error }}\n                </span>\n                @if (widgetInstance.error && widgetInstance.errorIcon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.errorIcon\"\n                    [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  ></smart-icon>\n                }\n              </div>\n            </section>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX_2) {\n        <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div\n            class=\"input checkbox widgetContent {{\n              widgetInstance.cssClass ?? ''\n            }}\"\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 (\n                checkbox of widgetInstance.valueList;\n                track checkbox;\n                let i = $index\n              ) {\n                <div class=\"checkbox-item-container\">\n                  @if (checkbox.imageUrl) {\n                    <img\n                      title=\"{{ widgetInstance.key }}\"\n                      class=\"checkbox-item-image\"\n                      [src]=\"checkbox.imageUrl\"\n                    />\n                  }\n                  <mat-checkbox\n                    class=\"selecatbleObject\"\n                    formControlName=\"{{\n                      widgetInstance.key + '.' + checkbox.key\n                    }}\"\n                    [value]=\"checkbox.value\"\n                    (change)=\"onValueChange?.next(checkbox)\"\n                    [disabled]=\"widgetInstance.isDisabled!\"\n                  >\n                    {{ checkbox.label }}\n                  </mat-checkbox>\n                </div>\n              }\n              <div class=\"radio-error\">\n                <span class=\"mat-error\">\n                  {{ widgetInstance.error }}\n                </span>\n                @if (widgetInstance.error && widgetInstance.errorIcon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.errorIcon\"\n                    [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  ></smart-icon>\n                }\n              </div>\n            </section>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.RADIO_BUTTON) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-radio-group\n            class=\"input radio-section widgetContent {{\n              widgetInstance.cssClass ?? ''\n            }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            [attr.data-testid]=\"widgetInstance.key\"\n            aria-label=\"{{ widgetInstance.label }}\"\n            appearance=\"outline\"\n            formControlName=\"{{ widgetInstance.key }}\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label class=\"radioLabel\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <div [ngClass]=\"getDirection()\">\n              @for (radio of widgetInstance.valueList; track radio) {\n                <div class=\"radio-item-container\">\n                  @if (radio.imageUrl) {\n                    <img\n                      title=\"{{ widgetInstance.key }}\"\n                      class=\"radio-item-image\"\n                      [src]=\"radio.imageUrl\"\n                    />\n                  }\n                  <mat-radio-button\n                    class=\"selecatbleObject\"\n                    value=\"{{ radio.value }}\"\n                    [ngClass]=\"getDirection()\"\n                    (change)=\"onValueChange?.next(radio.value)\"\n                    [disabled]=\"widgetInstance.isDisabled\"\n                  >\n                    {{ radio.label }}\n                  </mat-radio-button>\n                </div>\n              }\n              <div class=\"radio-error\">\n                <span class=\"mat-error\">\n                  {{ widgetInstance.error }}\n                </span>\n                @if (widgetInstance.error && widgetInstance.errorIcon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.errorIcon\"\n                    [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\n                  ></smart-icon>\n                }\n              </div>\n              <div class=\"radio-icon\">\n                @if (widgetInstance.icon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.icon\"\n                    [color]=\"widgetInstance.iconColor ?? 'primary'\"\n                  >\n                  </smart-icon>\n                }\n              </div>\n            </div>\n          </mat-radio-group>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DATE_PICKER) {\n        <div class=\"datePicker widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label\n                class=\"label\"\n                [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </mat-label>\n            }\n            <mat-datepicker-toggle\n              matSuffix\n              [for]=\"picker\"\n            ></mat-datepicker-toggle>\n            <mat-datepicker\n              #picker\n              (closed)=\"handleBlurEvent(widgetInstance)\"\n            ></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]=\"\n                convertToLocalDateTime(\n                  widgetInstance.dateFieldProperties?.minDate ?? null\n                )\n              \"\n              [max]=\"\n                convertToLocalDateTime(\n                  widgetInstance.dateFieldProperties?.maxDate ?? null\n                )\n              \"\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 ||\n                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 (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <lib-smart-month-picker\n            [attr.data-testid]=\"widgetInstance.key\"\n            [widgetInstance]=\"widgetInstance\"\n            (valueChange)=\"handleYearMonthPicked($event)\"\n          ></lib-smart-month-picker>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <div\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </div>\n              @if (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div class=\"dateTimePickerContainer\">\n            <mat-form-field\n              class=\"input widgetContent date {{\n                widgetInstance.cssClass ?? ''\n              }}\"\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\n                matSuffix\n                [for]=\"picker\"\n              ></mat-datepicker-toggle>\n              <mat-datepicker\n                #picker\n                (closed)=\"handleBlurEvent(widgetInstance)\"\n              ></mat-datepicker>\n              <input\n                #dateInput\n                matInput\n                [formControlName]=\"widgetInstance.key\"\n                [attr.data-testid]=\"widgetInstance.key\"\n                [min]=\"\n                  convertToLocalDateTime(\n                    widgetInstance.dateFieldProperties?.minDate ?? null\n                  )\n                \"\n                [max]=\"\n                  convertToLocalDateTime(\n                    widgetInstance.dateFieldProperties?.maxDate ?? null\n                  )\n                \"\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 ||\n                  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 (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label\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\n                  ? compareItems\n                  : widgetInstance.compareWith\n              \"\n              placeholder=\"{{\n                widgetInstance.placeholder ? widgetInstance.placeholder : ''\n              }}\"\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 (\n                        innerOption of option.valueList;\n                        track innerOption\n                      ) {\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 ||\n                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>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <div class=\"labelContainer\">\n              <h4\n                class=\"{{ labelColor() }} smart-form-widget-label {{\n                  widgetInstance.cssLabelClass ?? ''\n                }}\"\n                [ngClass]=\"getLabelNgClass()\"\n                [ngStyle]=\"getLabelStyle()\"\n              >\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n              @if (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label\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\n                  ? compareItems\n                  : widgetInstance.compareWith\n              \"\n              placeholder=\"{{\n                widgetInstance.placeholder ? widgetInstance.placeholder : ''\n              }}\"\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 (\n                        innerOption of option.valueList;\n                        track innerOption\n                      ) {\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>{{ widgetInstance.hint?.text }}</mat-hint>\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\n            class=\"label-title labelContainer\"\n            [ngClass]=\"widgetInstance.cssClass ?? ''\"\n          >\n            <h4\n              class=\"{{ labelColor() }} smart-form-widget-label {{\n                widgetInstance.cssClass ?? ''\n              }}\"\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 (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <mat-form-field\n            class=\"input widgetContent time {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            appearance=\"outline\"\n          >\n            @if (!widgetInstance.showLabel) {\n              <mat-label\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 (\n                widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n              ) {\n                <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n              }\n            </div>\n          }\n          <div\n            class=\"widgetContent  {{ widgetInstance.cssClass ?? '' }}\"\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n          >\n            <mat-slide-toggle\n              formControlName=\"{{ widgetInstance.key }}\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              (change)=\"onValueChange?.next($event)\"\n              [labelPosition]=\"widgetInstance.toggleLabelPosition ?? 'before'\"\n              >{{\n                !widgetInstance.showLabel ? widgetInstance.label : \"\"\n              }}</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 {{\n                widgetInstance.cssLabelClass ?? ''\n              }}\"\n              [ngClass]=\"getLabelNgClass()\"\n              [ngStyle]=\"getLabelStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          <div class=\"smartIndicator widgetContent\">\n            <div\n              class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\"\n              [ngClass]=\"getNgClass()\"\n            >\n              @for (item of indicatorItems; track item; let i = $index) {\n                <div\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() }} {{\n                widgetInstance.cssLabelClass ?? ''\n              }}\"\n              [ngClass]=\"getLabelNgClass()\"\n              [ngStyle]=\"getLabelStyle()\"\n            >\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          @if (widgetInstance.imageProperties?.image) {\n            <smart-icon\n              [imageResource]=\"\n                $safeNavigationMigration(widgetInstance.imageProperties?.image)\n              \"\n              class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\n              alt=\"Image\"\n              title=\"{{ widgetInstance.key }}\"\n              [ngClass]=\"getNgClass()\"\n              [ngStyle]=\"getStyle()\"\n            ></smart-icon>\n          } @else if (widgetInstance.value) {\n            <smart-icon\n              [(ngModel)]=\"widgetInstance.value\"\n              [imageResource]=\"widgetInstance.value\"\n              class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\n              alt=\"Image\"\n              title=\"{{ widgetInstance.key }}\"\n              [ngClass]=\"getNgClass()\"\n              [ngStyle]=\"getStyle()\"\n            ></smart-icon>\n          }\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.DIV) {\n        <div\n          class=\"smartDiv\"\n          [innerHTML]=\"sanitizeHtml(getWidgetLabel(widgetInstance))\"\n          [ngClass]=\"getNgClass()\"\n          [class.clickable]=\"!!widgetInstance.divProperties?.onClick\"\n          [ngStyle]=\"getStyle()\"\n          (click)=\"onDivClick()\"\n        ></div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.HTML) {\n        <smart-html-widget\n          [widgetInstance]=\"widgetInstance\"\n          [ngClass]=\"getNgClass()\"\n          [ngStyle]=\"getStyle()\"\n        ></smart-html-widget>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.SVG) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <h4\n              class=\"labelContainer {{ labelColor() }} {{\n                widgetInstance.cssLabelClass ?? ''\n              }}\"\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() }} {{\n                widgetInstance.cssLabelClass ?? ''\n              }}\"\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]=\"\n                $safeNavigationMigration(\n                  widgetInstance.uiActionDescriptor?.color\n                )\n              \"\n              (click)=\"onButtonClicked(widgetInstance)\"\n            >\n              @if (isOnlyIcon(widgetInstance.uiActionDescriptor)) {\n                @if (widgetInstance.uiActionDescriptor?.icon) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n                    [color]=\"\n                      widgetInstance.uiActionDescriptor?.iconColor ??\n                      widgetInstance.uiActionDescriptor?.color\n                    \"\n                  ></smart-icon>\n                }\n              } @else {\n                @if (\n                  widgetInstance.uiActionDescriptor?.icon &&\n                  widgetInstance.uiActionDescriptor?.iconPosition === \"PRE\"\n                ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n                    [color]=\"\n                      widgetInstance.uiActionDescriptor?.iconColor ??\n                      widgetInstance.uiActionDescriptor?.color\n                    \"\n                  ></smart-icon>\n                }\n                {{ widgetInstance.uiActionDescriptor?.title }}\n                @if (\n                  widgetInstance.uiActionDescriptor?.icon &&\n                  widgetInstance.uiActionDescriptor?.iconPosition === \"POST\"\n                ) {\n                  <smart-icon\n                    [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\n                    [color]=\"\n                      widgetInstance.uiActionDescriptor?.iconColor ??\n                      widgetInstance.uiActionDescriptor?.color\n                    \"\n                  ></smart-icon>\n                }\n              }\n            </button>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.COMPONENT) {\n        <div class=\"widgetContainer\">\n          @if (widgetInstance.showLabel) {\n            <h4 class=\"labelContainer {{ labelColor() }}\">\n              {{ getWidgetLabel(widgetInstance) }}\n            </h4>\n          }\n          <div class=\"widgetContent\">\n            <ng-template #customComponent></ng-template>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.RICH_TEXT) {\n        <div class=\"widgetContainer\">\n          <div class=\"labelContainer\">\n            @if (widgetInstance.showLabel) {\n              <h4 class=\"{{ labelColor() }}\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n            }\n            @if (\n              widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n            ) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <div class=\"widgetContent\">\n            <quill-editor\n              #quillEditor\n              [formControlName]=\"widgetInstance.key\"\n              [id]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [modules]=\"\n                widgetInstance.isDisabled\n                  ? emptyQuillToolbar\n                  : widgetInstance.quillModules\n              \"\n              [placeholder]=\"widgetInstance.placeholder ?? ''\"\n              [readOnly]=\"widgetInstance.isReadonly ?? false\"\n              [maxLength]=\"widgetInstance.maxLength ?? 0\"\n              (onContentChanged)=\"onRichTextEditorContentChanged($event)\"\n            ></quill-editor>\n            @if (\n              !widgetInstance?.hint ||\n              widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n            ) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n            @if (\n              widgetInstance.showCharacterLimitSuffix &&\n              widgetInstance.maxLength\n            ) {\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 (\n              widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n            ) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <div class=\"widgetContent\">\n            <lib-sortable-widget\n              [formControlName]=\"widgetInstance.key\"\n              [attr.data-testid]=\"widgetInstance.key\"\n              [widgetInstance]=\"widgetInstance\"\n            ></lib-sortable-widget>\n          </div>\n        </div>\n      }\n      @if (widgetInstance.type === smartFormWidgetType.MATRIX) {\n        <div class=\"widgetContainer\">\n          <div class=\"labelContainer\">\n            @if (widgetInstance.showLabel) {\n              <h4 class=\"{{ labelColor() }}\">\n                {{ getWidgetLabel(widgetInstance) }}\n              </h4>\n            }\n            @if (\n              widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n            ) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <table class=\"matrixTable widgetContent\">\n            <tr>\n              <th></th>\n              @for (option of widgetInstance.value.columns; track option) {\n                <th class=\"optionLabel\">\n                  {{ option.displayValue }}\n                </th>\n              }\n            </tr>\n            @for (\n              question of widgetInstance.value.rows;\n              track question;\n              let i = $index\n            ) {\n              <tr>\n                <th class=\"questionLabel\">\n                  <label>{{ question.displayValue }}</label>\n                </th>\n                @for (\n                  option of widgetInstance.value.columns;\n                  track option;\n                  let j = $index\n                ) {\n                  <td class=\"selectTd\">\n                    @if (!widgetInstance.isMultiple) {\n                      <mat-radio-group\n                        [formControlName]=\"\n                          widgetInstance.key + '.' + question.code\n                        \"\n                        [name]=\"'q' + i\"\n                      >\n                        <mat-radio-button [value]=\"option.code\">\n                        </mat-radio-button>\n                      </mat-radio-group>\n                    }\n                    @if (widgetInstance.isMultiple) {\n                      <div>\n                        <mat-checkbox\n                          [formControlName]=\"\n                            widgetInstance.key +\n                            '.data.' +\n                            question.code +\n                            '.' +\n                            option.code\n                          \"\n                          [value]=\"\n                            widgetInstance.value['data'][question.code][\n                              option.code\n                            ]\n                          \"\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 (\n              widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\n            ) {\n              <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n            }\n          </div>\n          <youtube-player\n            [ngClass]=\"getNgClass()\"\n            [ngStyle]=\"getStyle()\"\n            videoId=\"{{ widgetInstance.videoId }}\"\n            [width]=\"widgetInstance.width\"\n            [height]=\"widgetInstance.height\"\n            [startSeconds]=\"widgetInstance.startSeconds\"\n            [endSeconds]=\"widgetInstance.endSeconds\"\n          ></youtube-player>\n          @if (\n            !widgetInstance?.hint ||\n            widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\n          ) {\n            <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\n          }\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [".ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}.ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media(pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow,.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:\"\";display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label:before,.ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label:before,.ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0;content:\"Save\";padding-right:0}.ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}.ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}.ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}.checkbox-section,.radio-section{display:flex;flex-direction:column}.input{width:100%}.direction-col,.toggle-col{display:flex;flex-direction:column;gap:.5em}.toggle-col>label{font-size:.75rem;color:#6b7280;padding-left:.5em}.direction-row{display:flex;flex-direction:row;align-items:center;gap:.5em}.selecatbleObject{margin:.5em}.radioLabel{color:var(--primary-color);text-align:left!important}.container{height:100%}.input{height:100%;display:flex;flex-direction:column}.checkbox{flex-direction:column}.mat-form-field-wrapper{padding-bottom:0!important}.input .mat-mdc-standard-chip.mat-chip-with-trailing-icon{padding-right:12px}.time-picker{display:flex;flex-direction:row;height:100%;border:solid 2px lightgrey;padding:1em;border-radius:4px}.time-picker:hover{border-color:#000}::ng-deep .mat-h4 .mat-body-1 .mat-typography h4{margin:0}.label{margin:28px 0 8px}.smartIndicator{display:flex;flex-direction:column;gap:.25rem;width:-moz-fit-content;width:fit-content}.indicatorItems{display:flex;flex-direction:row;gap:.25rem}.indicatorItem{width:3rem;height:.25rem;background-color:#d3d3d3;border-radius:.5rem}.radio-error{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:row;gap:.5rem}.mat-calendar-previous-button,.mat-calendar-next-button{padding:0;min-width:0;width:40px!important;height:40px!important;flex-shrink:0;line-height:40px;border-radius:50%}.mat-calendar-arrow{height:36px!important;display:flex!important;flex-direction:column!important;justify-content:center}.radio-item-container,.checkbox-item-container{display:flex;flex-direction:column}.widgetContent::ng-deep .ql-container{height:200px;width:460px}.dateTimePickerContainer{display:flex;flex-direction:row;gap:.25rem}.dateTimePickerContainer mat-form-field{flex:1}.date,.time{width:100%}.date .mat-form-field-infix,.time .mat-form-field-infix{width:inherit!important}::ng-deep .mat-icon.mat-drag-indicator{--drag-indicator: #3b3b3b;color:var(--drag-indicator)}.matrixTable{width:100%;border-spacing:0 1rem}.matrixTable th{padding:.25rem}.matrixTable .optionLabel,.matrixTable td{text-align:center}.example-month-picker .mat-calendar-period-button{pointer-events:none}.example-month-picker .mat-calendar-arrow{display:none}.textFieldContainer{display:flex;flex-direction:row}.textFieldContainer{align-content:center;border:1px solid #cbd5e1;border-radius:3px;background-color:#fff}.textFieldContainer input{border:unset}.textFieldContainer:focus-within:not(:has(input:disabled)){outline:0 none;outline-offset:0;box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3}.textFieldContainer:has(input:disabled) .clearButton{cursor:not-allowed;opacity:.6}.textFieldButtons{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.clearButton .mat-mdc-raised-button,.clearButton button{background-color:unset!important;border:unset;color:#6b7280!important;box-shadow:unset;font-size:1rem!important}.clearButton .mat-icon.mat-primary{color:#6b7280!important}.clearButton .mat-mdc-raised-button:hover,.clearButton button:hover{color:#6b7280cc!important;background-color:unset;border:unset;box-shadow:unset;font-size:1rem!important}.mat-mdc-form-field-infix{display:flex;flex-direction:row}textarea:not(:placeholder-shown)~label{top:-.75em!important;font-size:12px!important}.disabledEditor *{-webkit-user-modify:read-only;-moz-user-modify:read-only;user-modify:read-only}.sb4-textarea{--sb4-textarea-line-height: 20px;line-height:var(--sb4-textarea-line-height);overflow-y:auto!important}.widgetContainer .imageIcon{max-width:unset!important;height:unset!important}.material .sb4-textarea{resize:vertical!important}.material .smart-form-widget-label{font-weight:700}.material .mat-mdc-form-field-subscript-wrapper{display:none}.label-right{display:flex;gap:.5rem;flex-direction:row-reverse}.label-left{display:flex;gap:.5rem;flex-direction:row}.label-top{display:flex;gap:.5rem;flex-direction:column}.label-bottom{display:flex;gap:.5rem;flex-direction:column-reverse}.smartDiv{width:100%}.clickable{cursor:pointer}\n/*!\n * Quill Editor v2.0.3\n * https://quilljs.com\n * Copyright (c) 2017-2024, Slab\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */\n"], dependencies: [{ kind: "component", type: SmartformwidgetComponent, selector: "smartformwidget", inputs: ["form", "widgetInstance", "onBlur", "onValueChange", "labelColor", "sophisticatedValueChange", "blurSophisticatedValueChange"], outputs: ["valueCleared"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TrackCapsDirective, selector: "[capsLock]", outputs: ["capsLock"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "typeFromDecimals", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix", "defaultValueOnBlur", "value", "disabled", "touched"], outputs: ["valueChange", "touchedChange", "maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: SmartMonthPickerComponent, selector: "lib-smart-month-picker", inputs: ["widgetInstance"], outputs: ["valueChange"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: SmartVoiceRecorderComponent, selector: "smart-voice-recorder", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: SmartFileEditorComponent, selector: "smart-file-editor", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: SmartMultiFileEditorComponent, selector: "smart-multi-file-editor", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent", "fileEvent"] }, { kind: "component", type: SmartHtmlWidgetComponent, selector: "smart-html-widget", inputs: ["widgetInstance"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: SortableWidgetComponent, selector: "lib-sortable-widget", inputs: ["widgetInstance"] }, { kind: "component", type: YouTubePlayer, selector: "youtube-player", inputs: ["videoId", "height", "width", "startSeconds", "endSeconds", "suggestedQuality", "playerVars", "disableCookies", "loadApi", "disablePlaceholder", "showBeforeIframeApiLoads", "placeholderButtonLabel", "placeholderImageQuality"], outputs: ["ready", "stateChange", "error", "apiChange", "playbackQualityChange", "playbackRateChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartformwidgetComponent, decorators: [{
             type: Component,
@@ -13759,73 +13865,6 @@ var GridColumnContentType;
     GridColumnContentType["HTML"] = "html";
 })(GridColumnContentType || (GridColumnContentType = {}));
 
-/**
- * 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.
- */
-/**
- * How the grid shows the rowState of its rows: as the style of the row (the sm-grid-row-* classes), as an icon in a column of its own before the other columns, or both. The column is not a column of the descriptor: it is not editable and not offered by the column chooser.
- */
-var GridRowStateDisplay;
-(function (GridRowStateDisplay) {
-    GridRowStateDisplay["STYLE"] = "STYLE";
-    GridRowStateDisplay["COLUMN"] = "COLUMN";
-    GridRowStateDisplay["BOTH"] = "BOTH";
-})(GridRowStateDisplay || (GridRowStateDisplay = {}));
-
-/**
- * The class that shows what an editing session did to a row. The state is the backend's own
- * code, so an application specific state gets a class of its own without the client knowing
- * it; a row the session left alone carries no state and gets no class.
- */
-function gridRowStateClass(row) {
-    return row?.rowState ? `sm-grid-row-${gridRowStateName(row.rowState)}` : undefined;
-}
-/** The state code in the form of a class name: `CONTAINS_CHANGE` is `contains-change`. */
-function gridRowStateName(rowState) {
-    return rowState.toLowerCase().replace(/_/g, '-');
-}
-/** Whether the row states show as the classes of the rows; a grid that says nothing does. */
-function showsRowStateStyle(display) {
-    return display !== GridRowStateDisplay.COLUMN;
-}
-/** Whether the row states show as icons in a column of their own, before the other columns. */
-function showsRowStateColumn(display) {
-    return display === GridRowStateDisplay.COLUMN || display === GridRowStateDisplay.BOTH;
-}
-/** The id of the column of the row states; no property of a row is named so. */
-const ROW_STATE_COLUMN = 'sm-row-state';
-/** The icons of the states the platform sends; an application specific state has none. */
-const ROW_STATE_ICONS = {
-    NEW: 'add',
-    MODIFIED: 'edit',
-    DELETED: 'delete',
-    MOVED: 'swap_vert',
-    CONTAINS_CHANGE: 'fiber_manual_record',
-};
-/** The icon of the state of the row in the column of the row states. */
-function gridRowStateIcon(row) {
-    return row?.rowState ? ROW_STATE_ICONS[row.rowState] : undefined;
-}
-/** The class of the icon of the state of the row, so each state has a colour of its own. */
-function gridRowStateIconClass(row) {
-    return row?.rowState ? `sm-grid-row-state-icon-${gridRowStateName(row.rowState)}` : undefined;
-}
-/**
- * The tooltip of the state of the row: the label the server sent for the state in the locale of
- * the session; a state without a label has none.
- */
-function gridRowStateLabel(row, labels) {
-    return row?.rowState ? labels?.[row.rowState] : undefined;
-}
-
 /**
  * Grid api
  * The grid api is resposible for the grid components that shows a list of item.
@@ -14791,7 +14830,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 
 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 [trackBy]=\"trackRow\">\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n  <caption class=\"captionTitle\">\n    {{ smartTable.title }}\n  </caption>\n  }\n\n  <!-- The row states: first, one icon wide, no header text; not a column of the descriptor. -->\n  <ng-container [matColumnDef]=\"rowStateColumn\">\n    <th mat-header-cell *matHeaderCellDef class=\"sm-grid-row-state-cell\" [attr.aria-label]=\"rowStateColumnLabel\"\n      [attr.data-testid]=\"rowStateColumn\"></th>\n    <td mat-cell *matCellDef=\"let element\" class=\"sm-grid-row-state-cell\">\n      @if (rowStateIcon(element); as icon) {\n      <smart-icon class=\"sm-grid-row-state-icon\" [ngClass]=\"rowStateIconClass(element) ?? ''\" [icon]=\"icon\" color=\"\"\n        role=\"img\" [attr.aria-label]=\"rowStateLabel(element)\" [matTooltip]=\"rowStateLabel(element) ?? ''\"></smart-icon>\n      }\n    </td>\n  </ng-container>\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        @for (control of treeGridControls; track control) {\n        <ui-action-button (actionClick)=\"performTreeGridControl(control)\"\n          [descriptor]=\"treeGridControlDescriptor(control)\"\n          [disabled]=\"isTreeGridControlDisabled(control)\"\n          [attr.data-testid]=\"'tree-grid-' + control\">\n        </ui-action-button>\n        }\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 class=\"smart-table-cell-text\">\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 class=\"smart-table-cell-text\">\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 class=\"smart-table-cell-text\">\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 }\"\n                  (actionFired)=\"onRowActionFired(element, $event)\"></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 }\"\n                  (actionFired)=\"onRowActionFired(element, $event)\"></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 class=\"smart-table-cell-text\">\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 class=\"smart-table-cell-text\">{{ getValue(element, header) }}</div>\n          } @else {\n          <div class=\"smart-table-cell-text\" [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]=\"displayedColumns.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=\"displayedColumns; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: displayedColumns\">\n    <tr mat-row class=\"smart-table-row\" [class.smart-table-row-expanded]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\" [ngStyle]=\"getRowStyles(element)\" (click)=\"handleOnRowClick($event, 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:var(--color-surface-alt, #f4f6fb)}tr.smart-table-row:not(.smart-table-row-expanded):active{background:var(--color-border, #e4eaf2)}tr.smart-table-row.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}tr.smart-table-row.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}tr.smart-table-row.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}tr.smart-table-row.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}tr.smart-table-row.sm-grid-row-moved{font-style:italic}tr.smart-table-row.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-cell{width:24px;padding:0 4px 0 8px}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}tr.smart-table-row.selected{color:inherit}tr.smart-table-row.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) )}tr.smart-table-row.sm-grid-row-open>td{background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint))}tr.smart-table-row.sm-grid-row-open>td:first-child{box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}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, var(--color-text-muted, #68778e))}.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, var(--color-surface-alt, #f4f6fb))}.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}.menu-button ::ng-deep .uiActionButtonsContainer{flex-wrap:nowrap}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid var(--color-border, #e4eaf2);border-bottom:1px solid var(--color-border, #e4eaf2);background:var(--color-surface-alt, #f4f6fb)}.tree-grid-actions,.mat-cell-content{display:flex;flex-direction:row;align-items:center}.tree-grid-actions{gap:2px}.tree-grid-actions ::ng-deep button.mat-mdc-icon-button{min-width:0;width:28px;height:28px;padding:0;line-height:28px}.tree-grid-actions ::ng-deep .mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.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"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], 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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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" }] }); }
+    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 [trackBy]=\"trackRow\">\n  <!-- Column Descriptor -->\n  @if (smartTable.title) {\n  <caption class=\"captionTitle\">\n    {{ smartTable.title }}\n  </caption>\n  }\n\n  <!-- The row states: first, one icon wide, no header text; not a column of the descriptor. -->\n  <ng-container [matColumnDef]=\"rowStateColumn\">\n    <th mat-header-cell *matHeaderCellDef class=\"sm-grid-row-state-cell\" [attr.aria-label]=\"rowStateColumnLabel\"\n      [attr.data-testid]=\"rowStateColumn\"></th>\n    <td mat-cell *matCellDef=\"let element\" class=\"sm-grid-row-state-cell\">\n      @if (rowStateIcon(element); as icon) {\n      <smart-icon class=\"sm-grid-row-state-icon\" [ngClass]=\"rowStateIconClass(element) ?? ''\" [icon]=\"icon\" color=\"\"\n        role=\"img\" [attr.aria-label]=\"rowStateLabel(element)\" [matTooltip]=\"rowStateLabel(element) ?? ''\"></smart-icon>\n      }\n    </td>\n  </ng-container>\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        @for (control of treeGridControls; track control) {\n        <ui-action-button (actionClick)=\"performTreeGridControl(control)\"\n          [descriptor]=\"treeGridControlDescriptor(control)\"\n          [disabled]=\"isTreeGridControlDisabled(control)\"\n          [attr.data-testid]=\"'tree-grid-' + control\">\n        </ui-action-button>\n        }\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 class=\"smart-table-cell-text\">\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 class=\"smart-table-cell-text\">\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 class=\"smart-table-cell-text\">\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 }\"\n                  (actionFired)=\"onRowActionFired(element, $event)\"></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 }\"\n                  (actionFired)=\"onRowActionFired(element, $event)\"></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 class=\"smart-table-cell-text\">\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 class=\"smart-table-cell-text\">{{ getValue(element, header) }}</div>\n          } @else {\n          <div class=\"smart-table-cell-text\" [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]=\"displayedColumns.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=\"displayedColumns; sticky: true\"></tr>\n  <ng-container *matRowDef=\"let element; columns: displayedColumns\">\n    <tr mat-row class=\"smart-table-row\" [class.smart-table-row-expanded]=\"expandedElement === element\"\n      [ngClass]=\"getRowClasses(element)\" [ngStyle]=\"getRowStyles(element)\" (click)=\"handleOnRowClick($event, 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:var(--color-surface-alt, #f4f6fb)}tr.smart-table-row:not(.smart-table-row-expanded):active{background:var(--color-border, #e4eaf2)}tr.smart-table-row.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}tr.smart-table-row.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}tr.smart-table-row.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}tr.smart-table-row.sm-grid-row-deleted .smart-table-cell-text{text-decoration:line-through}tr.smart-table-row.sm-grid-row-moved{font-style:italic}tr.smart-table-row.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}.sm-grid-row-state-cell{width:24px;padding:0 4px 0 8px}.sm-grid-row-state-icon ::ng-deep .mat-icon{font-size:18px;width:18px;height:18px;line-height:18px;color:var(--accent-color, #20b6a8)}.sm-grid-row-state-icon-new ::ng-deep .mat-icon{color:var(--success-color, #16a34a)}.sm-grid-row-state-icon-deleted ::ng-deep .mat-icon{color:var(--color-text-muted, #68778e)}.sm-grid-row-state-icon-contains-change ::ng-deep .mat-icon{font-size:10px;width:18px;text-align:center;color:var(--color-text-muted, #68778e)}tr.smart-table-row.selected{color:inherit}tr.smart-table-row.sm-grid-row-open{--sm-grid-open-row-tint: var( --grid-open-row-background, color-mix(in srgb, var(--accent-color, #20b6a8) 10%, transparent) )}tr.smart-table-row.sm-grid-row-open>td{background-image:linear-gradient(var(--sm-grid-open-row-tint),var(--sm-grid-open-row-tint))}tr.smart-table-row.sm-grid-row-open>td:first-child{box-shadow:inset 3px 0 0 var(--grid-open-row-bar, var(--accent-color, #20b6a8))}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, var(--color-text-muted, #68778e))}.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, var(--color-surface-alt, #f4f6fb))}.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}.menu-button ::ng-deep .uiActionButtonsContainer{flex-wrap:nowrap}.captionTitle{font-size:1.5rem;align-content:center;padding:.5rem .75rem;text-align:start;border-top:1px solid var(--color-border, #e4eaf2);border-bottom:1px solid var(--color-border, #e4eaf2);background:var(--color-surface-alt, #f4f6fb)}.tree-grid-actions,.mat-cell-content{display:flex;flex-direction:row;align-items:center}.tree-grid-actions{gap:2px}.tree-grid-actions ::ng-deep button.mat-mdc-icon-button{min-width:0;width:28px;height:28px;padding:0;line-height:28px}.tree-grid-actions ::ng-deep .mat-icon{font-size:20px;width:20px;height:20px;line-height:20px}.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"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: 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: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { 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,
@@ -14977,7 +15016,7 @@ class SmartViewContextErrorDialogComponent {
         this.service.closeDialog();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartViewContextErrorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartViewContextErrorDialogComponent, isStandalone: true, selector: "lib-smart-view-context-error-dialog", ngImport: i0, template: "@if (smartViewContextApiError) {\n  <div class=\"container\">\n    <h3 class=\"color-accent-700\">\n      {{ smartViewContextApiError.dialogTitle }}\n    </h3>\n    <div class=\"content\">\n      <p>\n        {{ smartViewContextApiError.message }}\n      </p>\n    </div>\n    <div class=\"buttonContainer\">\n      <ui-action-button [descriptor]=\"buttonDescriptor\" (actionClick)=\"onActionClick()\">\n      </ui-action-button>\n    </div>\n  </div>\n}\n", styles: [".container{display:flex;flex-direction:column;gap:1em;min-width:25rem;max-width:50vw;height:auto;max-height:75vh}.content{flex:1;overflow:auto}.buttonContainer{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartViewContextErrorDialogComponent, isStandalone: true, selector: "lib-smart-view-context-error-dialog", ngImport: i0, template: "@if (smartViewContextApiError) {\n  <div class=\"container\">\n    <h3 class=\"color-accent-700\">\n      {{ smartViewContextApiError.dialogTitle }}\n    </h3>\n    <div class=\"content\">\n      <p>\n        {{ smartViewContextApiError.message }}\n      </p>\n    </div>\n    <div class=\"buttonContainer\">\n      <ui-action-button [descriptor]=\"buttonDescriptor\" (actionClick)=\"onActionClick()\">\n      </ui-action-button>\n    </div>\n  </div>\n}\n", styles: [".container{display:flex;flex-direction:column;gap:1em;min-width:25rem;max-width:50vw;height:auto;max-height:75vh}.content{flex:1;overflow:auto}.buttonContainer{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartViewContextErrorDialogComponent, decorators: [{
             type: Component,
@@ -21524,7 +21563,7 @@ 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: "cardDefaultActionsMenu", first: true, predicate: DefaultActionsPopupComponent, descendants: true }, { 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]=\"calcRowClasses(row)\"\n        [ngStyle]=\"calcStyle(row.style)\"\n        [class.clickable-row]=\"isCardSelectable(row) || hasCardDefaultAction(row)\"\n        [class.selected]=\"!!row.selected && !!rowLayoutOf(row)\"\n        (click)=\"onCardClick(row, $event)\" (dblclick)=\"onCardDoubleClick(row, $event)\" [item]=\"row\"\n        [layout]=\"rowLayoutOf(row)\" [smartGrid]=\"smartGrid\"\n        [parentLayoutComponent]=\"parentLayoutComponent()\"></app-smart-grid-card>\n      }\n      @if (cardMenuRow(); as menuRow) {\n      <lib-default-actions-popup [buttons]=\"cardMenuButtons()\" [row]=\"menuRow\"></lib-default-actions-popup>\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:rgb(from var(--color-text, #132033) r g b / .2)}.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, var(--color-text-muted, #68778e))}.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, var(--primary-color, #384372))}.smartGrid-card-container.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.smartGrid-card-container.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.smartGrid-card-container.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.smartGrid-card-container.sm-grid-row-moved{font-style:italic}.smartGrid-card-container.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}:host-context(.sm-nav-list) .smartGrid-container{padding-top:0}:host-context(.sm-nav-list) .smart-grid-toolbar:not(:has(ui-action-button,theme-selector,ui-hover-menu,ui-tiered-menu)){display:none}\n"], dependencies: [{ kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], 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: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { 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: "cardDefaultActionsMenu", first: true, predicate: DefaultActionsPopupComponent, descendants: true }, { 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]=\"calcRowClasses(row)\"\n        [ngStyle]=\"calcStyle(row.style)\"\n        [class.clickable-row]=\"isCardSelectable(row) || hasCardDefaultAction(row)\"\n        [class.selected]=\"!!row.selected && !!rowLayoutOf(row)\"\n        (click)=\"onCardClick(row, $event)\" (dblclick)=\"onCardDoubleClick(row, $event)\" [item]=\"row\"\n        [layout]=\"rowLayoutOf(row)\" [smartGrid]=\"smartGrid\"\n        [parentLayoutComponent]=\"parentLayoutComponent()\"></app-smart-grid-card>\n      }\n      @if (cardMenuRow(); as menuRow) {\n      <lib-default-actions-popup [buttons]=\"cardMenuButtons()\" [row]=\"menuRow\"></lib-default-actions-popup>\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:rgb(from var(--color-text, #132033) r g b / .2)}.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, var(--color-text-muted, #68778e))}.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, var(--primary-color, #384372))}.smartGrid-card-container.sm-grid-row-new{color:var(--success-color, #16a34a);font-style:italic}.smartGrid-card-container.sm-grid-row-modified{color:var(--accent-color, #20b6a8);font-weight:600}.smartGrid-card-container.sm-grid-row-deleted{color:var(--color-text-muted, #68778e)}.smartGrid-card-container.sm-grid-row-moved{font-style:italic}.smartGrid-card-container.sm-grid-row-contains-change{color:var(--accent-color, #20b6a8)}:host-context(.sm-nav-list) .smartGrid-container{padding-top:0}:host-context(.sm-nav-list) .smart-grid-toolbar:not(:has(ui-action-button,theme-selector,ui-hover-menu,ui-tiered-menu)){display:none}\n"], dependencies: [{ kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], 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: DefaultActionsPopupComponent, selector: "lib-default-actions-popup", inputs: ["buttons", "row", "colIdx"] }, { 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,
@@ -25745,11 +25784,11 @@ class SmartComponentLayoutComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartComponentLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartComponentLayoutComponent, isStandalone: true, selector: "smart-component-layout", inputs: { smartComponentLayout: "smartComponentLayout", parentLayoutComponent: "parentLayoutComponent", gridRow: "gridRow" }, host: { properties: { "attr.data-testid": "this.testId", "class.horizontal": "this.isHorizontal", "class.vertical": "this.isVertical" } }, viewQueries: [{ propertyName: "embeddedSlotVcRefSetter", first: true, predicate: ["embeddedSlot"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "@if (smartComponentLayout?.expandable) {\n  @if (expandableSection) {\n    <smart-expandable-section\n      [data]=\"expandableSection\"\n    ></smart-expandable-section>\n  }\n} @else {\n  @if (smartComponentLayout?.type === type().CONTAINER) {\n    <!--\n      Tracked by position, not by identity: the backend hands back new layout objects on every\n      model refresh, so `track layout` recreated the whole subtree each time (NG0956). Position\n      is sound here because a child rebuilds from its input in `setUp()` regardless of which\n      component instance lands on which definition, and its own `deepEqual` guard then decides\n      whether anything actually changed. `identifier` is not usable as a key \u2014 the platform's\n      LayoutBuilder sets it conditionally, so a sibling list is overwhelmingly all-`undefined`\n      (NG0955). See A20 / ADR-0007 decision 5.\n    -->\n    @for (layout of smartComponentLayout?.components; track $index) {\n      <smart-component-layout\n        [parentLayoutComponent]=\"this\"\n        [smartComponentLayout]=\"layout\"\n        [gridRow]=\"gridRow\"\n      ></smart-component-layout>\n    }\n  }\n  @if (smartForm) {\n    <smartform [smartForm]=\"smartForm\"></smartform>\n  }\n  @if (smartGrid) {\n    <smart-grid\n      [smartGrid]=\"smartGrid\"\n      [uuid]=\"uuid!\"\n      [parentLayoutComponent]=\"this\"\n    ></smart-grid>\n  }\n  @if (!!uuid && !!mapId) {\n    <smart-map [uuid]=\"uuid\" [identifier]=\"mapId\"></smart-map>\n  }\n  @if (!!uuid && !!smartDiagramId) {\n    <smart-diagram [uuid]=\"uuid\" [identifier]=\"smartDiagramId\"></smart-diagram>\n  }\n  @if (!!uuid && !!filterId) {\n    <smart-filter-widget [uuid]=\"uuid\" [identifier]=\"filterId\"></smart-filter-widget>\n  }\n  @if (treeService) {\n    <smart-tree [treeService]=\"treeService!\"></smart-tree>\n  }\n  @if (!!toolbarId) {\n    <smart-ui-action-toolbar\n      [id]=\"toolbarId\"\n      [toolbarPropertes]=\"toolbarPropertes\"\n    ></smart-ui-action-toolbar>\n  }\n  @if (embeddedSlotActive) {\n    <ng-container #embeddedSlot></ng-container>\n  }\n}\n\n\n", styles: [":host(.horizontal){display:flex;flex-direction:row}:host(.vertical){display:flex;flex-direction:column}:host(.horizontal) smart-component-layout{display:flex}:host(.horizontal) smartform{flex:1;display:flex}:host(.sm-nav-view){gap:.75rem;padding:.75rem 1rem}:host(.sm-nav-pane) ::ng-deep .sm-nav-view,:host(.sm-nav-slot) ::ng-deep .sm-nav-view{padding:0}:host(.sm-nav-caption) ::ng-deep .label{margin:0}:host(.sm-nav-caption) ::ng-deep .smart-form-widget-label{margin:0;font-size:1.35rem;font-weight:600;color:var(--color-text, #132033)}:host(.sm-nav-header){align-items:center;justify-content:space-between;gap:.5rem}:host(.sm-nav-section){gap:.5rem;flex:1 1 0;min-width:0;margin-top:.5rem}:host(.sm-nav-section-title) ::ng-deep .label{margin:0}:host(.sm-nav-section-title) ::ng-deep .smart-form-widget-label{margin:0;font-size:1.1rem;font-weight:600;color:var(--color-text, #132033)}:host(.sm-nav-list),:host(.sm-nav-pane){display:flex;flex-direction:column;flex:1 1 0;min-width:0}:host(.sm-nav-pane){margin-left:1rem;padding-left:1rem;border-left:1px solid var(--color-border, #e4eaf2)}:host(.sm-nav-pane.sm-slot-empty){flex:0 0 0;margin:0;padding:0;border:0}:host(.sm-nav-tree){flex:0 0 320px;align-self:stretch;min-height:60vh;min-width:0;padding:.5rem 0;background-color:var(--color-surface, #ffffff);border-right:1px solid var(--color-border, #e4eaf2)}:host(.sm-nav-slot){display:flex;flex-direction:column;flex:1 1 0;min-width:0;padding:.75rem 1rem}:host(.sm-nav-crumbs){padding-bottom:.25rem;border-bottom:1px solid var(--color-border, #e4eaf2)}\n"], dependencies: [{ kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "gridRow"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "parentLayoutComponent", "dev"] }, { kind: "component", type: SmartMapComponent, selector: "smart-map", inputs: ["uuid", "identifier"] }, { kind: "component", type: SmartDiagramComponent, selector: "smart-diagram", inputs: ["uuid", "identifier", "diagramModel", "options", "plugins"], outputs: ["elementSelect", "canvasClick", "dataClick"] }, { kind: "component", type: SmartFilterWidgetComponent, selector: "smart-filter-widget", inputs: ["identifier", "uuid"] }, { kind: "component", type: SmartTreeComponent, selector: "smart-tree", inputs: ["treeStyle", "treeService"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartComponentLayoutComponent, isStandalone: true, selector: "smart-component-layout", inputs: { smartComponentLayout: "smartComponentLayout", parentLayoutComponent: "parentLayoutComponent", gridRow: "gridRow" }, host: { properties: { "attr.data-testid": "this.testId", "class.horizontal": "this.isHorizontal", "class.vertical": "this.isVertical" } }, viewQueries: [{ propertyName: "embeddedSlotVcRefSetter", first: true, predicate: ["embeddedSlot"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "@if (smartComponentLayout?.expandable) {\n  @if (expandableSection) {\n    <smart-expandable-section\n      [data]=\"expandableSection\"\n    ></smart-expandable-section>\n  }\n} @else {\n  @if (smartComponentLayout?.type === type().CONTAINER) {\n    <!--\n      Tracked by position, not by identity: the backend hands back new layout objects on every\n      model refresh, so `track layout` recreated the whole subtree each time (NG0956). Position\n      is sound here because a child rebuilds from its input in `setUp()` regardless of which\n      component instance lands on which definition, and its own `deepEqual` guard then decides\n      whether anything actually changed. `identifier` is not usable as a key \u2014 the platform's\n      LayoutBuilder sets it conditionally, so a sibling list is overwhelmingly all-`undefined`\n      (NG0955). See A20 / ADR-0007 decision 5.\n    -->\n    @for (layout of smartComponentLayout?.components; track $index) {\n      <smart-component-layout\n        [parentLayoutComponent]=\"this\"\n        [smartComponentLayout]=\"layout\"\n        [gridRow]=\"gridRow\"\n      ></smart-component-layout>\n    }\n  }\n  @if (smartForm) {\n    <smartform [smartForm]=\"smartForm\"></smartform>\n  }\n  @if (smartGrid) {\n    <smart-grid\n      [smartGrid]=\"smartGrid\"\n      [uuid]=\"uuid!\"\n      [parentLayoutComponent]=\"this\"\n    ></smart-grid>\n  }\n  @if (!!uuid && !!mapId) {\n    <smart-map [uuid]=\"uuid\" [identifier]=\"mapId\"></smart-map>\n  }\n  @if (!!uuid && !!smartDiagramId) {\n    <smart-diagram [uuid]=\"uuid\" [identifier]=\"smartDiagramId\"></smart-diagram>\n  }\n  @if (!!uuid && !!filterId) {\n    <smart-filter-widget [uuid]=\"uuid\" [identifier]=\"filterId\"></smart-filter-widget>\n  }\n  @if (treeService) {\n    <smart-tree [treeService]=\"treeService!\"></smart-tree>\n  }\n  @if (!!toolbarId) {\n    <smart-ui-action-toolbar\n      [id]=\"toolbarId\"\n      [toolbarPropertes]=\"toolbarPropertes\"\n    ></smart-ui-action-toolbar>\n  }\n  @if (embeddedSlotActive) {\n    <ng-container #embeddedSlot></ng-container>\n  }\n}\n\n\n", styles: [":host(.horizontal){display:flex;flex-direction:row}:host(.vertical){display:flex;flex-direction:column}:host(.horizontal) smart-component-layout{display:flex}:host(.horizontal) smartform{flex:1;display:flex}:host(.sm-view-tabs){min-height:0}:host(.sm-nav-view){gap:.75rem;padding:.75rem 1rem}:host(.sm-nav-pane) ::ng-deep .sm-nav-view,:host(.sm-nav-slot) ::ng-deep .sm-nav-view{padding:0}:host(.sm-nav-caption) ::ng-deep .label{margin:0}:host(.sm-nav-caption) ::ng-deep .smart-form-widget-label{margin:0;font-size:1.35rem;font-weight:600;color:var(--color-text, #132033)}:host(.sm-nav-header){align-items:center;justify-content:space-between;gap:.5rem}:host(.sm-nav-section){gap:.5rem;flex:1 1 0;min-width:0;margin-top:.5rem}:host(.sm-nav-section-title) ::ng-deep .label{margin:0}:host(.sm-nav-section-title) ::ng-deep .smart-form-widget-label{margin:0;font-size:1.1rem;font-weight:600;color:var(--color-text, #132033)}:host(.sm-nav-list),:host(.sm-nav-pane){display:flex;flex-direction:column;flex:1 1 0;min-width:0}:host(.sm-nav-pane){margin-left:1rem;padding-left:1rem;border-left:1px solid var(--color-border, #e4eaf2)}:host(.sm-nav-pane.sm-slot-empty){flex:0 0 0;margin:0;padding:0;border:0}:host(.sm-nav-tree){flex:0 0 320px;align-self:stretch;min-height:60vh;min-width:0;padding:.5rem 0;background-color:var(--color-surface, #ffffff);border-right:1px solid var(--color-border, #e4eaf2)}:host(.sm-nav-slot){display:flex;flex-direction:column;flex:1 1 0;min-width:0;padding:.75rem 1rem}:host(.sm-nav-crumbs){padding-bottom:.25rem;border-bottom:1px solid var(--color-border, #e4eaf2)}\n"], dependencies: [{ kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "gridRow"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "parentLayoutComponent", "dev"] }, { kind: "component", type: SmartMapComponent, selector: "smart-map", inputs: ["uuid", "identifier"] }, { kind: "component", type: SmartDiagramComponent, selector: "smart-diagram", inputs: ["uuid", "identifier", "diagramModel", "options", "plugins"], outputs: ["elementSelect", "canvasClick", "dataClick"] }, { kind: "component", type: SmartFilterWidgetComponent, selector: "smart-filter-widget", inputs: ["identifier", "uuid"] }, { kind: "component", type: SmartTreeComponent, selector: "smart-tree", inputs: ["treeStyle", "treeService"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartComponentLayoutComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-component-layout', imports: [ExpandableSectionComponent, SmartformComponent, SmartGridComponent, SmartMapComponent, SmartDiagramComponent, SmartFilterWidgetComponent, SmartTreeComponent, UiActionToolbarComponent], template: "@if (smartComponentLayout?.expandable) {\n  @if (expandableSection) {\n    <smart-expandable-section\n      [data]=\"expandableSection\"\n    ></smart-expandable-section>\n  }\n} @else {\n  @if (smartComponentLayout?.type === type().CONTAINER) {\n    <!--\n      Tracked by position, not by identity: the backend hands back new layout objects on every\n      model refresh, so `track layout` recreated the whole subtree each time (NG0956). Position\n      is sound here because a child rebuilds from its input in `setUp()` regardless of which\n      component instance lands on which definition, and its own `deepEqual` guard then decides\n      whether anything actually changed. `identifier` is not usable as a key \u2014 the platform's\n      LayoutBuilder sets it conditionally, so a sibling list is overwhelmingly all-`undefined`\n      (NG0955). See A20 / ADR-0007 decision 5.\n    -->\n    @for (layout of smartComponentLayout?.components; track $index) {\n      <smart-component-layout\n        [parentLayoutComponent]=\"this\"\n        [smartComponentLayout]=\"layout\"\n        [gridRow]=\"gridRow\"\n      ></smart-component-layout>\n    }\n  }\n  @if (smartForm) {\n    <smartform [smartForm]=\"smartForm\"></smartform>\n  }\n  @if (smartGrid) {\n    <smart-grid\n      [smartGrid]=\"smartGrid\"\n      [uuid]=\"uuid!\"\n      [parentLayoutComponent]=\"this\"\n    ></smart-grid>\n  }\n  @if (!!uuid && !!mapId) {\n    <smart-map [uuid]=\"uuid\" [identifier]=\"mapId\"></smart-map>\n  }\n  @if (!!uuid && !!smartDiagramId) {\n    <smart-diagram [uuid]=\"uuid\" [identifier]=\"smartDiagramId\"></smart-diagram>\n  }\n  @if (!!uuid && !!filterId) {\n    <smart-filter-widget [uuid]=\"uuid\" [identifier]=\"filterId\"></smart-filter-widget>\n  }\n  @if (treeService) {\n    <smart-tree [treeService]=\"treeService!\"></smart-tree>\n  }\n  @if (!!toolbarId) {\n    <smart-ui-action-toolbar\n      [id]=\"toolbarId\"\n      [toolbarPropertes]=\"toolbarPropertes\"\n    ></smart-ui-action-toolbar>\n  }\n  @if (embeddedSlotActive) {\n    <ng-container #embeddedSlot></ng-container>\n  }\n}\n\n\n", styles: [":host(.horizontal){display:flex;flex-direction:row}:host(.vertical){display:flex;flex-direction:column}:host(.horizontal) smart-component-layout{display:flex}:host(.horizontal) smartform{flex:1;display:flex}:host(.sm-nav-view){gap:.75rem;padding:.75rem 1rem}:host(.sm-nav-pane) ::ng-deep .sm-nav-view,:host(.sm-nav-slot) ::ng-deep .sm-nav-view{padding:0}:host(.sm-nav-caption) ::ng-deep .label{margin:0}:host(.sm-nav-caption) ::ng-deep .smart-form-widget-label{margin:0;font-size:1.35rem;font-weight:600;color:var(--color-text, #132033)}:host(.sm-nav-header){align-items:center;justify-content:space-between;gap:.5rem}:host(.sm-nav-section){gap:.5rem;flex:1 1 0;min-width:0;margin-top:.5rem}:host(.sm-nav-section-title) ::ng-deep .label{margin:0}:host(.sm-nav-section-title) ::ng-deep .smart-form-widget-label{margin:0;font-size:1.1rem;font-weight:600;color:var(--color-text, #132033)}:host(.sm-nav-list),:host(.sm-nav-pane){display:flex;flex-direction:column;flex:1 1 0;min-width:0}:host(.sm-nav-pane){margin-left:1rem;padding-left:1rem;border-left:1px solid var(--color-border, #e4eaf2)}:host(.sm-nav-pane.sm-slot-empty){flex:0 0 0;margin:0;padding:0;border:0}:host(.sm-nav-tree){flex:0 0 320px;align-self:stretch;min-height:60vh;min-width:0;padding:.5rem 0;background-color:var(--color-surface, #ffffff);border-right:1px solid var(--color-border, #e4eaf2)}:host(.sm-nav-slot){display:flex;flex-direction:column;flex:1 1 0;min-width:0;padding:.75rem 1rem}:host(.sm-nav-crumbs){padding-bottom:.25rem;border-bottom:1px solid var(--color-border, #e4eaf2)}\n"] }]
+            args: [{ selector: 'smart-component-layout', imports: [ExpandableSectionComponent, SmartformComponent, SmartGridComponent, SmartMapComponent, SmartDiagramComponent, SmartFilterWidgetComponent, SmartTreeComponent, UiActionToolbarComponent], template: "@if (smartComponentLayout?.expandable) {\n  @if (expandableSection) {\n    <smart-expandable-section\n      [data]=\"expandableSection\"\n    ></smart-expandable-section>\n  }\n} @else {\n  @if (smartComponentLayout?.type === type().CONTAINER) {\n    <!--\n      Tracked by position, not by identity: the backend hands back new layout objects on every\n      model refresh, so `track layout` recreated the whole subtree each time (NG0956). Position\n      is sound here because a child rebuilds from its input in `setUp()` regardless of which\n      component instance lands on which definition, and its own `deepEqual` guard then decides\n      whether anything actually changed. `identifier` is not usable as a key \u2014 the platform's\n      LayoutBuilder sets it conditionally, so a sibling list is overwhelmingly all-`undefined`\n      (NG0955). See A20 / ADR-0007 decision 5.\n    -->\n    @for (layout of smartComponentLayout?.components; track $index) {\n      <smart-component-layout\n        [parentLayoutComponent]=\"this\"\n        [smartComponentLayout]=\"layout\"\n        [gridRow]=\"gridRow\"\n      ></smart-component-layout>\n    }\n  }\n  @if (smartForm) {\n    <smartform [smartForm]=\"smartForm\"></smartform>\n  }\n  @if (smartGrid) {\n    <smart-grid\n      [smartGrid]=\"smartGrid\"\n      [uuid]=\"uuid!\"\n      [parentLayoutComponent]=\"this\"\n    ></smart-grid>\n  }\n  @if (!!uuid && !!mapId) {\n    <smart-map [uuid]=\"uuid\" [identifier]=\"mapId\"></smart-map>\n  }\n  @if (!!uuid && !!smartDiagramId) {\n    <smart-diagram [uuid]=\"uuid\" [identifier]=\"smartDiagramId\"></smart-diagram>\n  }\n  @if (!!uuid && !!filterId) {\n    <smart-filter-widget [uuid]=\"uuid\" [identifier]=\"filterId\"></smart-filter-widget>\n  }\n  @if (treeService) {\n    <smart-tree [treeService]=\"treeService!\"></smart-tree>\n  }\n  @if (!!toolbarId) {\n    <smart-ui-action-toolbar\n      [id]=\"toolbarId\"\n      [toolbarPropertes]=\"toolbarPropertes\"\n    ></smart-ui-action-toolbar>\n  }\n  @if (embeddedSlotActive) {\n    <ng-container #embeddedSlot></ng-container>\n  }\n}\n\n\n", styles: [":host(.horizontal){display:flex;flex-direction:row}:host(.vertical){display:flex;flex-direction:column}:host(.horizontal) smart-component-layout{display:flex}:host(.horizontal) smartform{flex:1;display:flex}:host(.sm-view-tabs){min-height:0}:host(.sm-nav-view){gap:.75rem;padding:.75rem 1rem}:host(.sm-nav-pane) ::ng-deep .sm-nav-view,:host(.sm-nav-slot) ::ng-deep .sm-nav-view{padding:0}:host(.sm-nav-caption) ::ng-deep .label{margin:0}:host(.sm-nav-caption) ::ng-deep .smart-form-widget-label{margin:0;font-size:1.35rem;font-weight:600;color:var(--color-text, #132033)}:host(.sm-nav-header){align-items:center;justify-content:space-between;gap:.5rem}:host(.sm-nav-section){gap:.5rem;flex:1 1 0;min-width:0;margin-top:.5rem}:host(.sm-nav-section-title) ::ng-deep .label{margin:0}:host(.sm-nav-section-title) ::ng-deep .smart-form-widget-label{margin:0;font-size:1.1rem;font-weight:600;color:var(--color-text, #132033)}:host(.sm-nav-list),:host(.sm-nav-pane){display:flex;flex-direction:column;flex:1 1 0;min-width:0}:host(.sm-nav-pane){margin-left:1rem;padding-left:1rem;border-left:1px solid var(--color-border, #e4eaf2)}:host(.sm-nav-pane.sm-slot-empty){flex:0 0 0;margin:0;padding:0;border:0}:host(.sm-nav-tree){flex:0 0 320px;align-self:stretch;min-height:60vh;min-width:0;padding:.5rem 0;background-color:var(--color-surface, #ffffff);border-right:1px solid var(--color-border, #e4eaf2)}:host(.sm-nav-slot){display:flex;flex-direction:column;flex:1 1 0;min-width:0;padding:.75rem 1rem}:host(.sm-nav-crumbs){padding-bottom:.25rem;border-bottom:1px solid var(--color-border, #e4eaf2)}\n"] }]
         }], propDecorators: { smartComponentLayout: [{
                 type: Input
             }], parentLayoutComponent: [{
@@ -26009,7 +26048,7 @@ class UiActionFileUploadDialogComponent {
         this.service.cancel();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionFileUploadDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionFileUploadDialogComponent, isStandalone: true, selector: "lib-ui-action-file-upload-dialog", ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\n  <div class=\"headerContainer\">\n    <h3 class=\"color-accent-700\">\n      {{ getTitle() }}\n    </h3>\n  </div>\n\n  @if(getText()){\n  <p>\n    {{ getText() }}\n  </p>\n  } @if(descriptor){\n  <smart-upload-widget\n    [uploadDescriptor]=\"descriptor.upload\"\n    [isMultiple]=\"isMultiple ?? true\"\n    (uploadFilesEvent)=\"upload($event)\"\n  />\n  }\n\n  <div class=\"folderNameDialogButtonsContainer\">\n    <ui-action-button [descriptor]=\"cancelButton\" (actionClick)=\"cancel()\"></ui-action-button>\n  </div>\n</div>\n", styles: [".folderNameDialogContainer{display:flex;flex-direction:column;justify-content:center;gap:1rem;min-width:30vw}photo-capture-widget{width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center}.headerContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-top:.5rem}.headerContainer ::ng-deep button{color:var(--primary-color);border:unset}.headerContainer h3{margin:0;font-size:1.5rem}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-start;gap:.5rem}.message{text-align:center;color:#6b7280}.uploadField{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem;padding:1rem}.folderNameDialogButtonsContainer ::ng-deep button:hover{background-color:rgba(from var(--primary-color) r g b/.8)}.headerContainer ::ng-deep button:hover{background-color:rgba(from var(--primary-color) r g b/.1)}@media(max-width:900px){.folderNameDialogContainer{width:100%}}.fileSize{padding-left:1rem;display:flex;justify-content:flex-end}.fileData{display:flex;flex-direction:column;justify-content:flex-end;padding-right:1rem}\n"], dependencies: [{ kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionFileUploadDialogComponent, isStandalone: true, selector: "lib-ui-action-file-upload-dialog", ngImport: i0, template: "<div class=\"folderNameDialogContainer\">\n  <div class=\"headerContainer\">\n    <h3 class=\"color-accent-700\">\n      {{ getTitle() }}\n    </h3>\n  </div>\n\n  @if(getText()){\n  <p>\n    {{ getText() }}\n  </p>\n  } @if(descriptor){\n  <smart-upload-widget\n    [uploadDescriptor]=\"descriptor.upload\"\n    [isMultiple]=\"isMultiple ?? true\"\n    (uploadFilesEvent)=\"upload($event)\"\n  />\n  }\n\n  <div class=\"folderNameDialogButtonsContainer\">\n    <ui-action-button [descriptor]=\"cancelButton\" (actionClick)=\"cancel()\"></ui-action-button>\n  </div>\n</div>\n", styles: [".folderNameDialogContainer{display:flex;flex-direction:column;justify-content:center;gap:1rem;min-width:30vw}photo-capture-widget{width:100%;max-width:100%;overflow:hidden;display:flex;flex-direction:column;align-items:center}.headerContainer{display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-top:.5rem}.headerContainer ::ng-deep button{color:var(--primary-color);border:unset}.headerContainer h3{margin:0;font-size:1.5rem}.folderNameDialogButtonsContainer{display:flex;flex-direction:row;justify-content:flex-start;gap:.5rem}.message{text-align:center;color:#6b7280}.uploadField{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem;padding:1rem}.folderNameDialogButtonsContainer ::ng-deep button:hover{background-color:rgba(from var(--primary-color) r g b/.8)}.headerContainer ::ng-deep button:hover{background-color:rgba(from var(--primary-color) r g b/.1)}@media(max-width:900px){.folderNameDialogContainer{width:100%}}.fileSize{padding-left:1rem;display:flex;justify-content:flex-end}.fileData{display:flex;flex-direction:column;justify-content:flex-end;padding-right:1rem}\n"], dependencies: [{ kind: "component", type: UploadWidgetComponent, selector: "smart-upload-widget", inputs: ["uploadDescriptor", "isMultiple", "isDisabled"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionFileUploadDialogComponent, decorators: [{
             type: Component,
@@ -26879,5 +26918,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, ApiModule$4 as ApiModule, ApiQueueService, BASE_PATH$7 as BASE_PATH, COLLECTION_FORMATS$7 as COLLECTION_FORMATS, CUSTOM_DIAGRAM_OPTIONS, CloseResult, ComponentFactoryService, ComponentType, ComponentWidgetType, Configuration$7 as Configuration, DEFAULT_ROW_LAYOUT, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultChartOptionsProvider, DefaultUiActionCode_CLOSE, DrawTime, EMPTY_PARAMS, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, FilterExpressionBoolOperator$1 as FilterExpressionBoolOperator, FilterExpressionBuilderGroupBuilderGroupKindEnum, FilterExpressionBuilderUiModelTypeEnum, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderByOrderEnum, GenericPageComponent, GeoMapDataLoadingMode, GeoMapDataSourceType, GeoMapItemKind, GeoMapOperationMode, GeoMapSelectionMode, GeoMapTextType, GridColumnContentType, GridDataAccessConfigKindEnum, GridDefaultRowActionTrigger, GridRowStateDisplay, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptorKindEnum, HighlightPipe, IS_ASYNC_PARAM_NAME, IconPosition, ImageResourceKindEnum, InvalidSmartlinkComponent, LayoutDirection, LinkTargetEnum, MAP_ENGINE, MapEngine, MenuOpenDirection, MenuTriggerType, MessageOptionType, MessageTextType, MessageType, NAMED_VALIDATOR, NamedValidatorOperationEnum, NamedValidatorService, NoPermissionPageComponent, PageExportFieldScope, PageExportSelectionKind, PageExportValueType, PageExportValuesSource, REUSE_ROUTER_SLOT_COMPONENT, ROOT_CONTAINER_UUID, ROUTER_SLOT_ID, RecordingUploaderPropertiesOpenDirectionEnum, SMART_DATE_FORMATS, SMART_DEFAULT_VIEW_COMPONENTS, SMART_NG_CLIENT_CONFIG, SMART_ROW_LAYOUT_COMPONENT, SearchPageComponent, SelectionDefinitionTypeEnum, SelectionDefinitionValueSetValueTypeEnum, ServerRequestType, SessionAPIS, SessionErrorBehaviour, SessionService, SmartActionHost, SmartActionType, SmartBackendBootstrapService, SmartComponent, SmartComponentApiClient, SmartComponentDetachedDirective, SmartComponentHost, SmartComponentLayoutComponent, SmartDateFnsAdapter, SmartDatePipe, SmartDateTimePipe, SmartDefaultErrorUiService, SmartDiagramComponent, SmartDialog, SmartEmbeddedSlotDirective, SmartExpandableSectionService, SmartFileEditorComponent, SmartFilterComponent, SmartFilterEditorContentComponent, SmartFilterEditorService, SmartFilterExpressionFieldComponent, SmartFilterPosition, SmartFilterType, SmartFilterWidgetComponent, SmartFormInputMode, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridService, SmartGridType, SmartIconComponent, SmartIconService, SmartKeybindingService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkMigrationStatusStatusEnum, SmartLinkUuidVariableInPath, SmartMapComponent, SmartMultiFileEditorComponent, SmartNavbarComponent, SmartNavbarService, SmartNavigationService, SmartNgClientFeatureKind, SmartService, SmartSessionService, SmartSessionTimerComponent, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTooltipDirective, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidatorName, SmartViewContextService, SmartViewRedirect, SmartVoiceRecorderComponent, SmartWidgetHintPosition, SmartWidgetHintPositionEnum, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmarttreeGenericService, SmarttreeService, SubjectSelectorComponent, ThemeService, ToggleLabelPosition, ToolbarAlignment, ToolbarDirection, TreeArrowPosition, TreeGridControl, USE_ADVANCED_FILTER, UiActionButtonComponent, UiActionButtonType, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogButtonComponent, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, UiActionTooltipTooltipPositionEnum, UiBadgeComponent, UiBadgeDirective, UploadWidgetType, ValidationResultPageComponent, ValueChangeMode, ViewContextRebuiltError, ViewEventHandlerViewEventTypeEnum, ViewService, ViewState, ViewType, barChart, bubbleChart, createBasicOptions, doughnutChart, formatChord, horizontalBarChart, horizontalStackedBarChart, injectSmartComponent, isMacPlatform, matches, multiAxisLineChart, parseChord, pieChart, polarAreaChart, provideSmartNgClient, radarChart, registerSmartWidget, resolveDateLocale, resolveSlot, resolveSmartNgClientConfig, resolveViewHandler, scatterChart, stackedBarChart, transformDataToBarLikeDataSet, transformDataToBasicDataSets, transformDataToBubble, transformDataToScatter, withSmartDiagram, withSmartMap };
+export { ACLEntry, APIS$5 as APIS, AclEditingViewComponent, ApiModule$4 as ApiModule, ApiQueueService, BASE_PATH$7 as BASE_PATH, COLLECTION_FORMATS$7 as COLLECTION_FORMATS, CUSTOM_DIAGRAM_OPTIONS, CloseResult, ComponentFactoryService, ComponentType, ComponentWidgetType, Configuration$7 as Configuration, DEFAULT_ROW_LAYOUT, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultChartOptionsProvider, DefaultUiActionCode_CLOSE, DrawTime, EMPTY_PARAMS, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, FilterExpressionBoolOperator$1 as FilterExpressionBoolOperator, FilterExpressionBuilderGroupBuilderGroupKindEnum, FilterExpressionBuilderUiModelTypeEnum, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderByOrderEnum, GenericPageComponent, GeoMapDataLoadingMode, GeoMapDataSourceType, GeoMapItemKind, GeoMapOperationMode, GeoMapSelectionMode, GeoMapTextType, GridColumnContentType, GridDataAccessConfigKindEnum, GridDefaultRowActionTrigger, GridRowStateDisplay, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptorKindEnum, HighlightPipe, IS_ASYNC_PARAM_NAME, IconPosition, ImageResourceKindEnum, InvalidSmartlinkComponent, LayoutDirection, LinkTargetEnum, MAP_ENGINE, MapEngine, MenuOpenDirection, MenuTriggerType, MessageOptionType, MessageTextType, MessageType, NAMED_VALIDATOR, NamedValidatorOperationEnum, NamedValidatorService, NoPermissionPageComponent, PageExportFieldScope, PageExportSelectionKind, PageExportValueType, PageExportValuesSource, REUSE_ROUTER_SLOT_COMPONENT, ROOT_CONTAINER_UUID, ROUTER_SLOT_ID, RecordingUploaderPropertiesOpenDirectionEnum, SMART_DATE_FORMATS, SMART_DEFAULT_VIEW_COMPONENTS, SMART_NG_CLIENT_CONFIG, SMART_ROW_LAYOUT_COMPONENT, SearchPageComponent, SelectionDefinitionTypeEnum, SelectionDefinitionValueSetValueTypeEnum, ServerRequestType, SessionAPIS, SessionErrorBehaviour, SessionService, SmartActionHost, SmartActionType, SmartBackendBootstrapService, SmartComponent, SmartComponentApiClient, SmartComponentDetachedDirective, SmartComponentHost, SmartComponentLayoutComponent, SmartDateFnsAdapter, SmartDatePipe, SmartDateTimePipe, SmartDefaultErrorUiService, SmartDiagramComponent, SmartDialog, SmartEmbeddedSlotDirective, SmartExpandableSectionService, SmartFileEditorComponent, SmartFilterComponent, SmartFilterEditorContentComponent, SmartFilterEditorService, SmartFilterExpressionFieldComponent, SmartFilterPosition, SmartFilterType, SmartFilterWidgetComponent, SmartFormInputMode, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridService, SmartGridType, SmartIconComponent, SmartIconService, SmartKeybindingService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkMigrationStatusStatusEnum, SmartLinkUuidVariableInPath, SmartMapComponent, SmartMultiFileEditorComponent, SmartNavbarComponent, SmartNavbarService, SmartNavigationService, SmartNgClientFeatureKind, SmartService, SmartSessionService, SmartSessionTimerComponent, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTooltipDirective, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidatorName, SmartViewContextService, SmartViewRedirect, SmartVoiceRecorderComponent, SmartWidgetHintPosition, SmartWidgetHintPositionEnum, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmarttreeGenericService, SmarttreeService, SubjectSelectorComponent, ThemeService, ToggleLabelPosition, ToolbarAlignment, ToolbarAppearance, ToolbarDirection, TreeArrowPosition, TreeGridControl, USE_ADVANCED_FILTER, UiActionButtonComponent, UiActionButtonType, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogButtonComponent, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, UiActionTooltipTooltipPositionEnum, UiBadgeComponent, UiBadgeDirective, UploadWidgetType, ValidationResultPageComponent, ValueChangeMode, ViewContextRebuiltError, ViewEventHandlerViewEventTypeEnum, ViewService, ViewState, ViewType, barChart, bubbleChart, createBasicOptions, doughnutChart, formatChord, horizontalBarChart, horizontalStackedBarChart, injectSmartComponent, isMacPlatform, matches, multiAxisLineChart, parseChord, pieChart, polarAreaChart, provideSmartNgClient, radarChart, registerSmartWidget, resolveDateLocale, resolveSlot, resolveSmartNgClientConfig, resolveViewHandler, scatterChart, stackedBarChart, transformDataToBarLikeDataSet, transformDataToBasicDataSets, transformDataToBubble, transformDataToScatter, withSmartDiagram, withSmartMap };
 //# sourceMappingURL=smartbit4all-ng-client.mjs.map