@smartbit4all/ng-client 7.0.0 → 7.0.2

package/fesm2022/smartbit4all-ng-client.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, reflectComponentType, Injectable, inject, DOCUMENT, PLATFORM_ID, Optional, Inject, RendererStyleFlags2, input, computed, Component, HostListener, HostBinding, Directive, ViewContainerRef, ElementRef, Renderer2, ChangeDetectorRef, Input, output, signal, Injector, ViewChild, ViewChildren, effect, afterNextRender, NgZone, forwardRef, Pipe, ChangeDetectionStrategy, ViewEncapsulation, ApplicationRef, makeEnvironmentProviders, importProvidersFrom } from '@angular/core';
+import { InjectionToken, reflectComponentType, Injectable, inject, DOCUMENT, PLATFORM_ID, Optional, Inject, RendererStyleFlags2, input, computed, Component, HostListener, HostBinding, Directive, ViewContainerRef, ElementRef, Renderer2, ChangeDetectorRef, Input, output, signal, Injector, ViewChild, ViewChildren, effect, afterNextRender, NgZone, forwardRef, Pipe, ChangeDetectionStrategy, ViewEncapsulation, ApplicationRef, EventEmitter, Output, viewChild, makeEnvironmentProviders, importProvidersFrom } from '@angular/core';
 import * as i1 from '@angular/common/http';
 import { HttpHeaders, HttpContext, HttpErrorResponse, HttpParams, provideHttpClient, withInterceptors, withInterceptorsFromDi } from '@angular/common/http';
 import { DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
@@ -7,7 +7,7 @@ import { NgxMaskDirective, provideNgxMask } from 'ngx-mask';
 import { QuillEditorComponent, QuillModule } from 'ngx-quill';
 import { DateFnsAdapter } from '@angular/material-date-fns-adapter';
 import { enUS, hu } from 'date-fns/locale';
-import { isPlatformBrowser, NgClass, NgTemplateOutlet, NgStyle, AsyncPipe, KeyValuePipe, DatePipe, Location, NgIf } from '@angular/common';
+import { isPlatformBrowser, NgClass, NgTemplateOutlet, NgStyle, AsyncPipe, KeyValuePipe, DatePipe, Location, NgIf, NgForOf } from '@angular/common';
 import { Subject, lastValueFrom, tap, takeUntil, throwError, from, interval, startWith, map, distinctUntilChanged, catchError as catchError$1 } from 'rxjs';
 import { catchError, switchMap, takeUntil as takeUntil$1 } from 'rxjs/operators';
 import { MatButton, MatIconButton, MatMiniFabButton } from '@angular/material/button';
@@ -24,7 +24,7 @@ import { MatAutocompleteTrigger, MatAutocomplete } from '@angular/material/autoc
 import { MatChipGrid, MatChipRow, MatChipRemove, MatChipInput, MatChip } from '@angular/material/chips';
 import { deepEqual } from 'fast-equals';
 import { set } from 'date-fns';
-import { Overlay, OverlayPositionBuilder } from '@angular/cdk/overlay';
+import { Overlay, OverlayPositionBuilder, ScrollDispatcher } from '@angular/cdk/overlay';
 import { TemplatePortal } from '@angular/cdk/portal';
 import { MatLabel, MatFormField, MatSuffix, MatHint, MatPrefix } from '@angular/material/form-field';
 import WaveSurfer from 'wavesurfer.js';
@@ -5288,7 +5288,7 @@ class UiActionService {
         }
         else if (uiAction.submit || uiAction.model) {
             if (options?.widgetId && options?.nodeId) {
-                uiActionRequest.params['clientPageModel'] = executor.getModel();
+                uiActionRequest.params['clientPageModel'] = { data: executor.getModel() };
             }
             else {
                 uiActionRequest.params['model'] = executor.getModel();
@@ -7474,6 +7474,7 @@ class HoverMenuComponent {
         this.overlay = inject(Overlay);
         this.viewContainerRef = inject(ViewContainerRef);
         this.overlayPositionBuilder = inject(OverlayPositionBuilder);
+        this.scrollDispatcher = inject(ScrollDispatcher);
         /**
          * The open menu's overlay, and with it {@link isOpen}. A signal because the menu is also
          * closed from outside a template event — `UiMenuService`'s close signal — and the trigger
@@ -7495,6 +7496,10 @@ class HoverMenuComponent {
         this.submenuOpenMap = new Map();
         this.subActions = [];
         this.hasCheckedChildren = false;
+        this.lastScrollContainer = null;
+        this.onContainerScroll = () => {
+            this.overlayRef?.updatePosition();
+        };
         this.icon = 'chevron_right';
     }
     ngOnInit() {
@@ -7562,6 +7567,11 @@ class HoverMenuComponent {
     }
     closeMenu() {
         if (this.overlayRef) {
+            const container = this.lastScrollContainer;
+            if (container) {
+                container.removeEventListener('scroll', this.onContainerScroll);
+                this.lastScrollContainer = null;
+            }
             this.overlayRef.dispose();
             this.overlayRef = null;
             this.hasCheckedChildren = false;
@@ -7598,19 +7608,42 @@ class HoverMenuComponent {
         var positions = isSubmenu
             ? getSubmenuPositions(this.menuOpenDirection())
             : getMenuPositions(triggerAction?.descriptor?.menu?.openDirection);
+        const scrollContainer = this.getScrollContainer(triggerElement);
         let positionStrategy = this.overlayPositionBuilder
             .flexibleConnectedTo(triggerElement)
             .withFlexibleDimensions(false)
             .withPush(true)
-            .withPositions(positions);
+            .withPositions(positions)
+            .withScrollableContainers(this.scrollDispatcher.getAncestorScrollContainers(triggerElement));
         this.overlayRef = this.overlay.create({
             positionStrategy,
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
             hasBackdrop: false,
         });
+        if (scrollContainer) {
+            this.lastScrollContainer = scrollContainer;
+            scrollContainer.addEventListener('scroll', this.onContainerScroll, { passive: true });
+        }
         let portal = new TemplatePortal(this.menuTemplate, this.viewContainerRef);
         this.overlayRef.attach(portal);
     }
+    /**
+     * The nearest scrolling ancestor of the trigger, if any. The CDK only knows about
+     * `cdkScrollable` containers; a plain overflow container (a dialog body, a page section)
+     * would otherwise scroll away under an open menu.
+     */
+    getScrollContainer(el) {
+        let parent = el.parentElement;
+        while (parent) {
+            const style = window.getComputedStyle(parent);
+            const overflow = style.overflow + style.overflowY;
+            if (/auto|scroll/.test(overflow) && parent.scrollHeight > parent.clientHeight) {
+                return parent;
+            }
+            parent = parent.parentElement;
+        }
+        return null;
+    }
     toggleMenu(event) {
         if (!this.isOpen) {
             this.openMenu(event);
@@ -7714,6 +7747,7 @@ class ClickMenuComponent {
         this.overlay = inject(Overlay);
         this.viewContainerRef = inject(ViewContainerRef);
         this.overlayPositionBuilder = inject(OverlayPositionBuilder);
+        this.scrollDispatcher = inject(ScrollDispatcher);
         /**
          * The open menu's overlay, and with it {@link isOpen}. A signal because the menu is also
          * closed from outside a template event — `UiMenuService`'s close signal — and the trigger
@@ -7733,6 +7767,10 @@ class ClickMenuComponent {
         this.submenuOpenMap = new Map();
         this.subActions = [];
         this.hasCheckedChildren = false;
+        this.lastScrollContainer = null;
+        this.onContainerScroll = () => {
+            this.overlayRef?.updatePosition();
+        };
         this.icon = 'chevron_right';
     }
     ngOnInit() {
@@ -7800,6 +7838,11 @@ class ClickMenuComponent {
     }
     closeMenu() {
         if (this.overlayRef) {
+            const container = this.lastScrollContainer;
+            if (container) {
+                container.removeEventListener('scroll', this.onContainerScroll);
+                this.lastScrollContainer = null;
+            }
             this.overlayRef.dispose();
             this.overlayRef = null;
             this.hasCheckedChildren = false;
@@ -7835,19 +7878,42 @@ class ClickMenuComponent {
         var positions = isSubmenu
             ? getSubmenuPositions(this.menuOpenDirection())
             : getMenuPositions(triggerAction?.descriptor?.menu?.openDirection);
+        const scrollContainer = this.getScrollContainer(triggerElement);
         let positionStrategy = this.overlayPositionBuilder
             .flexibleConnectedTo(triggerElement)
             .withFlexibleDimensions(false)
             .withPush(true)
-            .withPositions(positions);
+            .withPositions(positions)
+            .withScrollableContainers(this.scrollDispatcher.getAncestorScrollContainers(triggerElement));
         this.overlayRef = this.overlay.create({
             positionStrategy,
             scrollStrategy: this.overlay.scrollStrategies.reposition(),
             hasBackdrop: false,
         });
+        if (scrollContainer) {
+            this.lastScrollContainer = scrollContainer;
+            scrollContainer.addEventListener('scroll', this.onContainerScroll, { passive: true });
+        }
         let portal = new TemplatePortal(this.menuTemplate, this.viewContainerRef);
         this.overlayRef.attach(portal);
     }
+    /**
+     * The nearest scrolling ancestor of the trigger, if any. The CDK only knows about
+     * `cdkScrollable` containers; a plain overflow container (a dialog body, a page section)
+     * would otherwise scroll away under an open menu.
+     */
+    getScrollContainer(el) {
+        let parent = el.parentElement;
+        while (parent) {
+            const style = window.getComputedStyle(parent);
+            const overflow = style.overflow + style.overflowY;
+            if (/auto|scroll/.test(overflow) && parent.scrollHeight > parent.clientHeight) {
+                return parent;
+            }
+            parent = parent.parentElement;
+        }
+        return null;
+    }
     toggleMenu(event) {
         if (!this.isOpen) {
             this.openMenu(event);
@@ -8236,6 +8302,7 @@ class UiActionToolbarComponent {
     }
     async onActionClicked(event, entry) {
         // event.stopPropagation();
+        this.menuService.closeAllMenus();
         if (entry.model.uiAction.disabled) {
             return;
         }
@@ -8322,11 +8389,11 @@ class UiActionToolbarComponent {
         return MenuTriggerType;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionToolbarComponent, isStandalone: true, selector: "smart-ui-action-toolbar", inputs: { uiActionModels: { classPropertyName: "uiActionModels", publicName: "uiActionModels", isSignal: false, isRequired: false, transformFunction: null }, uiActionDescriptorService: { classPropertyName: "uiActionDescriptorService", publicName: "uiActionDescriptorService", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, executor: { classPropertyName: "executor", publicName: "executor", isSignal: true, isRequired: false, transformFunction: null }, widgetId: { classPropertyName: "widgetId", publicName: "widgetId", isSignal: true, isRequired: false, transformFunction: null }, nodeId: { classPropertyName: "nodeId", publicName: "nodeId", isSignal: true, isRequired: false, transformFunction: null }, actionParams: { classPropertyName: "actionParams", publicName: "actionParams", isSignal: true, isRequired: false, transformFunction: null }, scrollOnWrap: { classPropertyName: "scrollOnWrap", publicName: "scrollOnWrap", isSignal: false, isRequired: false, transformFunction: null }, toolbarPropertes: { classPropertyName: "toolbarPropertes", publicName: "toolbarPropertes", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "@if (isScrollable && scrollOnWrap) {\n  <ui-action-button\n    [disabled]=\"!isScrollable\"\n    [descriptor]=\"buttonLeft\"\n    (actionClick)=\"scrollLeft()\"\n    (mousedown)=\"scrollStart('left')\"\n    (mouseup)=\"stopScroll()\"\n    (mouseleave)=\"stopScroll()\"\n    (touchstart)=\"scrollStart('left')\"\n    (touchend)=\"stopScroll()\"\n    />\n}\n\n<div\n  #container\n  class=\"uiActionButtonsContainer\"\n  [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        [disabled]=\"!!entry.model.uiAction.disabled\"\n        [addedCssClass]=\"entry.model.cssClass\"\n        [viewActivated]=\"entry.model.uiAction.viewActivated\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n        (actionDoubleClick)=\"onActionDoubleClicked($event, entry)\"\n        >\n      </ui-action-button>\n    }\n  }\n</div>\n\n@if (isScrollable && scrollOnWrap) {\n  <ui-action-button\n    [disabled]=\"!isScrollable\"\n    [descriptor]=\"buttonRight\"\n    (actionClick)=\"scrollRight()\"\n    (mousedown)=\"scrollStart('right')\"\n    (mouseup)=\"stopScroll()\"\n    (mouseleave)=\"stopScroll()\"\n    (touchstart)=\"scrollStart('right')\"\n    (touchend)=\"stopScroll()\"\n    />\n}\n\n<ng-template #menuTypes let-entry=\"entry\">\n  @switch ($safeNavigationMigration(entry?.model?.uiAction?.descriptor?.menu?.triggerType)) {\n    @case (triggerType.HOVER) {\n      <ui-hover-menu\n        #menu\n        [toolbarId]=\"id\"\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-hover-menu>\n    }\n    @case (triggerType.CLICK) {\n      <ui-tiered-menu\n        #menu\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-tiered-menu>\n    }\n    @default {\n      <ui-tiered-menu\n        #menu\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-tiered-menu>\n    }\n  }\n</ng-template>\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}:host:has(.verticalToolbar){height:100%}:host:has(.horizontalToolbar.alignedEnd){width:100%}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column;height:100%}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%}.alignedStart{justify-content:flex-start}.alignedEnd{justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThemeSelectorComponent, selector: "theme-selector", inputs: ["model"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection", "toolbarId"], outputs: ["actionClick", "submenuOpened"] }, { kind: "component", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection"], outputs: ["actionClick", "submenuOpened"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: UiActionToolbarComponent, isStandalone: true, selector: "smart-ui-action-toolbar", inputs: { uiActionModels: { classPropertyName: "uiActionModels", publicName: "uiActionModels", isSignal: false, isRequired: false, transformFunction: null }, uiActionDescriptorService: { classPropertyName: "uiActionDescriptorService", publicName: "uiActionDescriptorService", isSignal: true, isRequired: false, transformFunction: null }, id: { classPropertyName: "id", publicName: "id", isSignal: false, isRequired: false, transformFunction: null }, executor: { classPropertyName: "executor", publicName: "executor", isSignal: true, isRequired: false, transformFunction: null }, widgetId: { classPropertyName: "widgetId", publicName: "widgetId", isSignal: true, isRequired: false, transformFunction: null }, nodeId: { classPropertyName: "nodeId", publicName: "nodeId", isSignal: true, isRequired: false, transformFunction: null }, actionParams: { classPropertyName: "actionParams", publicName: "actionParams", isSignal: true, isRequired: false, transformFunction: null }, scrollOnWrap: { classPropertyName: "scrollOnWrap", publicName: "scrollOnWrap", isSignal: false, isRequired: false, transformFunction: null }, toolbarPropertes: { classPropertyName: "toolbarPropertes", publicName: "toolbarPropertes", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onResize()" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "@if (isScrollable && scrollOnWrap) {\n  <ui-action-button\n    [disabled]=\"!isScrollable\"\n    [descriptor]=\"buttonLeft\"\n    (actionClick)=\"scrollLeft()\"\n    (mousedown)=\"scrollStart('left')\"\n    (mouseup)=\"stopScroll()\"\n    (mouseleave)=\"stopScroll()\"\n    (touchstart)=\"scrollStart('left')\"\n    (touchend)=\"stopScroll()\"\n    />\n}\n\n<div\n  #container\n  class=\"uiActionButtonsContainer\"\n  (click)=\"$event.stopPropagation()\"\n  [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        [disabled]=\"!!entry.model.uiAction.disabled\"\n        [addedCssClass]=\"entry.model.cssClass\"\n        [viewActivated]=\"entry.model.uiAction.viewActivated\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n        (actionDoubleClick)=\"onActionDoubleClicked($event, entry)\"\n        >\n      </ui-action-button>\n    }\n  }\n</div>\n\n@if (isScrollable && scrollOnWrap) {\n  <ui-action-button\n    [disabled]=\"!isScrollable\"\n    [descriptor]=\"buttonRight\"\n    (actionClick)=\"scrollRight()\"\n    (mousedown)=\"scrollStart('right')\"\n    (mouseup)=\"stopScroll()\"\n    (mouseleave)=\"stopScroll()\"\n    (touchstart)=\"scrollStart('right')\"\n    (touchend)=\"stopScroll()\"\n    />\n}\n\n<ng-template #menuTypes let-entry=\"entry\">\n  @switch ($safeNavigationMigration(entry?.model?.uiAction?.descriptor?.menu?.triggerType)) {\n    @case (triggerType.HOVER) {\n      <ui-hover-menu\n        #menu\n        [toolbarId]=\"id\"\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-hover-menu>\n    }\n    @case (triggerType.CLICK) {\n      <ui-tiered-menu\n        #menu\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-tiered-menu>\n    }\n    @default {\n      <ui-tiered-menu\n        #menu\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-tiered-menu>\n    }\n  }\n</ng-template>\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}:host:has(.verticalToolbar){height:100%}:host:has(.horizontalToolbar.alignedEnd){width:100%}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column;height:100%}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%}.alignedStart{justify-content:flex-start}.alignedEnd{justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: ThemeSelectorComponent, selector: "theme-selector", inputs: ["model"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: HoverMenuComponent, selector: "ui-hover-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection", "toolbarId"], outputs: ["actionClick", "submenuOpened"] }, { kind: "component", type: ClickMenuComponent, selector: "ui-tiered-menu", inputs: ["triggerAction", "isSubmenu", "menuOpenDirection"], outputs: ["actionClick", "submenuOpened"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: UiActionToolbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-ui-action-toolbar', imports: [UiActionButtonComponent, NgClass, ThemeSelectorComponent, NgTemplateOutlet, HoverMenuComponent, ClickMenuComponent], template: "@if (isScrollable && scrollOnWrap) {\n  <ui-action-button\n    [disabled]=\"!isScrollable\"\n    [descriptor]=\"buttonLeft\"\n    (actionClick)=\"scrollLeft()\"\n    (mousedown)=\"scrollStart('left')\"\n    (mouseup)=\"stopScroll()\"\n    (mouseleave)=\"stopScroll()\"\n    (touchstart)=\"scrollStart('left')\"\n    (touchend)=\"stopScroll()\"\n    />\n}\n\n<div\n  #container\n  class=\"uiActionButtonsContainer\"\n  [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        [disabled]=\"!!entry.model.uiAction.disabled\"\n        [addedCssClass]=\"entry.model.cssClass\"\n        [viewActivated]=\"entry.model.uiAction.viewActivated\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n        (actionDoubleClick)=\"onActionDoubleClicked($event, entry)\"\n        >\n      </ui-action-button>\n    }\n  }\n</div>\n\n@if (isScrollable && scrollOnWrap) {\n  <ui-action-button\n    [disabled]=\"!isScrollable\"\n    [descriptor]=\"buttonRight\"\n    (actionClick)=\"scrollRight()\"\n    (mousedown)=\"scrollStart('right')\"\n    (mouseup)=\"stopScroll()\"\n    (mouseleave)=\"stopScroll()\"\n    (touchstart)=\"scrollStart('right')\"\n    (touchend)=\"stopScroll()\"\n    />\n}\n\n<ng-template #menuTypes let-entry=\"entry\">\n  @switch ($safeNavigationMigration(entry?.model?.uiAction?.descriptor?.menu?.triggerType)) {\n    @case (triggerType.HOVER) {\n      <ui-hover-menu\n        #menu\n        [toolbarId]=\"id\"\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-hover-menu>\n    }\n    @case (triggerType.CLICK) {\n      <ui-tiered-menu\n        #menu\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-tiered-menu>\n    }\n    @default {\n      <ui-tiered-menu\n        #menu\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-tiered-menu>\n    }\n  }\n</ng-template>\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}:host:has(.verticalToolbar){height:100%}:host:has(.horizontalToolbar.alignedEnd){width:100%}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column;height:100%}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%}.alignedStart{justify-content:flex-start}.alignedEnd{justify-content:flex-end}\n"] }]
+            args: [{ selector: 'smart-ui-action-toolbar', imports: [UiActionButtonComponent, NgClass, ThemeSelectorComponent, NgTemplateOutlet, HoverMenuComponent, ClickMenuComponent], template: "@if (isScrollable && scrollOnWrap) {\n  <ui-action-button\n    [disabled]=\"!isScrollable\"\n    [descriptor]=\"buttonLeft\"\n    (actionClick)=\"scrollLeft()\"\n    (mousedown)=\"scrollStart('left')\"\n    (mouseup)=\"stopScroll()\"\n    (mouseleave)=\"stopScroll()\"\n    (touchstart)=\"scrollStart('left')\"\n    (touchend)=\"stopScroll()\"\n    />\n}\n\n<div\n  #container\n  class=\"uiActionButtonsContainer\"\n  (click)=\"$event.stopPropagation()\"\n  [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        [disabled]=\"!!entry.model.uiAction.disabled\"\n        [addedCssClass]=\"entry.model.cssClass\"\n        [viewActivated]=\"entry.model.uiAction.viewActivated\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n        (actionDoubleClick)=\"onActionDoubleClicked($event, entry)\"\n        >\n      </ui-action-button>\n    }\n  }\n</div>\n\n@if (isScrollable && scrollOnWrap) {\n  <ui-action-button\n    [disabled]=\"!isScrollable\"\n    [descriptor]=\"buttonRight\"\n    (actionClick)=\"scrollRight()\"\n    (mousedown)=\"scrollStart('right')\"\n    (mouseup)=\"stopScroll()\"\n    (mouseleave)=\"stopScroll()\"\n    (touchstart)=\"scrollStart('right')\"\n    (touchend)=\"stopScroll()\"\n    />\n}\n\n<ng-template #menuTypes let-entry=\"entry\">\n  @switch ($safeNavigationMigration(entry?.model?.uiAction?.descriptor?.menu?.triggerType)) {\n    @case (triggerType.HOVER) {\n      <ui-hover-menu\n        #menu\n        [toolbarId]=\"id\"\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-hover-menu>\n    }\n    @case (triggerType.CLICK) {\n      <ui-tiered-menu\n        #menu\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-tiered-menu>\n    }\n    @default {\n      <ui-tiered-menu\n        #menu\n        (mouseenter)=\"onHover()\"\n        [triggerAction]=\"entry.model.uiAction\"\n        (actionClick)=\"onActionClicked($event, entry)\"\n      ></ui-tiered-menu>\n    }\n  }\n</ng-template>\n", styles: [":host:has(.uiActionButtonsContainer.scrollableContent){display:flex;flex-direction:row;justify-content:space-between;gap:.5rem;width:100%;align-items:center}:host:has(.verticalToolbar){height:100%}:host:has(.horizontalToolbar.alignedEnd){width:100%}.uiActionButtonsContainer{display:flex;flex-direction:row;gap:1rem;flex-wrap:wrap}.uiActionButtonsContainer ::ng-deep button{display:flex;gap:1rem;align-items:center;justify-content:center}.uiActionButtonsContainer ::ng-deep .buttonWrapper{position:relative;width:fit-content;height:fit-content}.scrollableContent{flex:1;flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;display:flex;scrollbar-width:none;padding:.5rem 0;align-items:center}.scrollableContent::-webkit-scrollbar{display:none!important}.verticalToolbar{display:flex;flex-direction:column;height:100%}.verticalToolbar ::ng-deep ui-action-button,.verticalToolbar ::ng-deep button{width:100%}.alignedStart{justify-content:flex-start}.alignedEnd{justify-content:flex-end}\n"] }]
         }], ctorParameters: () => [], propDecorators: { containerRef: [{
                 type: ViewChild,
                 args: ['container', { static: false }]
@@ -8557,11 +8624,11 @@ class SmartfileuploaderComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartfileuploaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartfileuploaderComponent, isStandalone: true, selector: "smartfileuploader", inputs: { uploadCallback: { classPropertyName: "uploadCallback", publicName: "uploadCallback", isSignal: true, isRequired: true, transformFunction: null }, fileFormats: { classPropertyName: "fileFormats", publicName: "fileFormats", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: false, isRequired: false, transformFunction: null }, useIconButton: { classPropertyName: "useIconButton", publicName: "useIconButton", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled() }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n  >\n  <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n    <input\n      #fileInput\n      id=\"addFile\"\n      placeholder=\"fileInput\"\n      type=\"file\"\n      (change)=\"getFile($event)\"\n      class=\"file\"\n      accept=\"{{ fileFormats()?.join(', ') }}\"\n      [size]=\"maxSizeMb()\"\n      [multiple]=\"isMultiple()\"\n      [disabled]=\"isDisabled()\"\n      style=\"display: none\"\n      />\n    <div class=\"fileUploadContentContainer\">\n      <div class=\"icon\">\n        @if (useIconButton()) {\n          <mat-label class=\"addFileButton\">\n            <mat-icon color=\"primary\" class=\"addCircle\">add_circle</mat-icon>\n          </mat-label>\n        }\n        @if (!useIconButton()) {\n          <button mat-raised-button color=\"primary\" class=\"addFileButton\">\n            {{ i18n!.addFile }}\n          </button>\n        }\n      </div>\n      <div class=\"labels\">\n        @if (useIconButton()) {\n          <mat-label class=\"label primary title\">\n            {{ i18n!.addFile }}\n          </mat-label>\n        }\n        <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n      </div>\n      @if (files.length) {\n        <div class=\"uploadButton\">\n          <ui-action-button (actionClick)=\"uploadFile()\" [descriptor]=\"uploadButton\">\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 class=\"downloadIcon\" icon=\"download\" (click)=\"downloadFile(file)\"></smart-icon>\n            <smart-icon class=\"removeIcon\" icon=\"delete\" (click)=\"remove(i)\"></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", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartfileuploaderComponent, isStandalone: true, selector: "smartfileuploader", inputs: { uploadCallback: { classPropertyName: "uploadCallback", publicName: "uploadCallback", isSignal: true, isRequired: true, transformFunction: null }, fileFormats: { classPropertyName: "fileFormats", publicName: "fileFormats", isSignal: true, isRequired: false, transformFunction: null }, maxSizeMb: { classPropertyName: "maxSizeMb", publicName: "maxSizeMb", isSignal: true, isRequired: false, transformFunction: null }, i18n: { classPropertyName: "i18n", publicName: "i18n", isSignal: false, isRequired: false, transformFunction: null }, useIconButton: { classPropertyName: "useIconButton", publicName: "useIconButton", isSignal: true, isRequired: false, transformFunction: null }, isMultiple: { classPropertyName: "isMultiple", publicName: "isMultiple", isSignal: true, isRequired: false, transformFunction: null }, autoUpload: { classPropertyName: "autoUpload", publicName: "autoUpload", isSignal: true, isRequired: false, transformFunction: null }, isDisabled: { classPropertyName: "isDisabled", publicName: "isDisabled", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled() }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n  >\n  <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n    <input\n      #fileInput\n      id=\"addFile\"\n      placeholder=\"fileInput\"\n      type=\"file\"\n      (change)=\"getFile($event)\"\n      class=\"file\"\n      accept=\"{{ fileFormats()?.join(', ') }}\"\n      [size]=\"maxSizeMb()\"\n      [multiple]=\"isMultiple()\"\n      [disabled]=\"isDisabled()\"\n      style=\"display: none\"\n      />\n    <div class=\"fileUploadContentContainer\">\n      <div class=\"icon\">\n        @if (useIconButton()) {\n          <mat-label class=\"addFileButton\">\n            <mat-icon color=\"primary\" class=\"addCircle\">add_circle</mat-icon>\n          </mat-label>\n        }\n        @if (!useIconButton()) {\n          <button mat-raised-button color=\"primary\" class=\"addFileButton\">\n            {{ i18n!.addFile }}\n          </button>\n        }\n      </div>\n      <div class=\"labels\">\n        @if (useIconButton()) {\n          <mat-label class=\"label primary title\">\n            {{ i18n!.addFile }}\n          </mat-label>\n        }\n        <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n      </div>\n      @if (files.length) {\n        <div class=\"uploadButton\">\n          <ui-action-button\n            (actionClick)=\"uploadFile()\"\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", "viewActivated", "addedCssClass", "addBasicClasses", "iconPlaceholder"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartfileuploaderComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smartfileuploader', imports: [NgClass, MatLabel, MatIcon, MatButton, UiActionButtonComponent, SmartIconComponent], template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled() }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n  >\n  <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n    <input\n      #fileInput\n      id=\"addFile\"\n      placeholder=\"fileInput\"\n      type=\"file\"\n      (change)=\"getFile($event)\"\n      class=\"file\"\n      accept=\"{{ fileFormats()?.join(', ') }}\"\n      [size]=\"maxSizeMb()\"\n      [multiple]=\"isMultiple()\"\n      [disabled]=\"isDisabled()\"\n      style=\"display: none\"\n      />\n    <div class=\"fileUploadContentContainer\">\n      <div class=\"icon\">\n        @if (useIconButton()) {\n          <mat-label class=\"addFileButton\">\n            <mat-icon color=\"primary\" class=\"addCircle\">add_circle</mat-icon>\n          </mat-label>\n        }\n        @if (!useIconButton()) {\n          <button mat-raised-button color=\"primary\" class=\"addFileButton\">\n            {{ i18n!.addFile }}\n          </button>\n        }\n      </div>\n      <div class=\"labels\">\n        @if (useIconButton()) {\n          <mat-label class=\"label primary title\">\n            {{ i18n!.addFile }}\n          </mat-label>\n        }\n        <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n      </div>\n      @if (files.length) {\n        <div class=\"uploadButton\">\n          <ui-action-button (actionClick)=\"uploadFile()\" [descriptor]=\"uploadButton\">\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 class=\"downloadIcon\" icon=\"download\" (click)=\"downloadFile(file)\"></smart-icon>\n            <smart-icon class=\"removeIcon\" icon=\"delete\" (click)=\"remove(i)\"></smart-icon>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warninig-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warninig-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"] }]
+            args: [{ selector: 'smartfileuploader', imports: [NgClass, MatLabel, MatIcon, MatButton, UiActionButtonComponent, SmartIconComponent], template: "<div\n  class=\"container\"\n  [ngClass]=\"{ disabledWidget: isDisabled() }\"\n  (dragover)=\"onDragOver($event)\"\n  (dragleave)=\"onDragLeave($event)\"\n  (drop)=\"onDrop($event)\"\n  [class.dragover]=\"isDragOver\"\n  >\n  <div class=\"fileContainer\" (click)=\"fileInput.click()\">\n    <input\n      #fileInput\n      id=\"addFile\"\n      placeholder=\"fileInput\"\n      type=\"file\"\n      (change)=\"getFile($event)\"\n      class=\"file\"\n      accept=\"{{ fileFormats()?.join(', ') }}\"\n      [size]=\"maxSizeMb()\"\n      [multiple]=\"isMultiple()\"\n      [disabled]=\"isDisabled()\"\n      style=\"display: none\"\n      />\n    <div class=\"fileUploadContentContainer\">\n      <div class=\"icon\">\n        @if (useIconButton()) {\n          <mat-label class=\"addFileButton\">\n            <mat-icon color=\"primary\" class=\"addCircle\">add_circle</mat-icon>\n          </mat-label>\n        }\n        @if (!useIconButton()) {\n          <button mat-raised-button color=\"primary\" class=\"addFileButton\">\n            {{ i18n!.addFile }}\n          </button>\n        }\n      </div>\n      <div class=\"labels\">\n        @if (useIconButton()) {\n          <mat-label class=\"label primary title\">\n            {{ i18n!.addFile }}\n          </mat-label>\n        }\n        <mat-label class=\"label secondary\"> {{ i18n!.browseOrDrag }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.maxSize }} </mat-label>\n        <mat-label class=\"subLabel primary\"> {{ i18n!.formats }} </mat-label>\n      </div>\n      @if (files.length) {\n        <div class=\"uploadButton\">\n          <ui-action-button\n            (actionClick)=\"uploadFile()\"\n            [code]=\"'default-upload'\"\n            [descriptor]=\"uploadButton\"\n          >\n          </ui-action-button>\n        </div>\n      }\n    </div>\n  </div>\n\n  @if (errors.length) {\n    <div class=\"errorMessage\">\n      <smart-icon [icon]=\"'error'\" [color]=\"'warn'\"></smart-icon>\n      <div class=\"errors\">\n        @for (error of errors; track error) {\n          <span>{{ error }}</span>\n        }\n      </div>\n    </div>\n  }\n\n  @if (files.length) {\n    <div class=\"uploadedFilesContainer\">\n      @for (file of files; track file; let i = $index) {\n        <div class=\"uploadedFile\">\n          @if (filePreviewUrl(file)) {\n            <img [src]=\"filePreviewUrl(file)\" [alt]=\"file.name\" width=\"50\" height=\"50\" />\n          } @else {\n            <smart-icon [icon]=\"'insert_drive_file'\"></smart-icon>\n          }\n          <div class=\"fileData\">\n            <div class=\"fileDataContainer\">\n              <span class=\"fileName\">{{ file.name }}</span>\n              <span class=\"fileSize\">{{ formatSize(file.size) }}</span>\n            </div>\n          </div>\n          <div class=\"fileActions\">\n            <smart-icon\n              class=\"downloadIcon\"\n              icon=\"download\"\n              (click)=\"downloadFile(file)\"\n              [attr.data-testid]=\"'default_download'\"\n            ></smart-icon>\n            <smart-icon\n              class=\"removeIcon\"\n              icon=\"delete\"\n              [attr.data-testid]=\"'default_remove'\"\n              (click)=\"remove(i)\"\n            ></smart-icon>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: [":host{--border-color: #a6aabd60;--warninig-color: #be2d2e;--def-border-radius: .5rem}.container{display:flex;flex-direction:column;border:2px dashed var(--border-color);border-radius:var(--def-border-radius)}.fileContainer{cursor:pointer;padding:1rem;display:flex;flex-direction:column}.fileContainer:hover{background-color:rgb(from var(--border-color) r g b / .1)}.disabledWidget ::ng-deep .fileContainer:hover{background-color:unset;cursor:unset}.disabledWidget ::ng-deep *{opacity:.85}.dragover{background-color:rgb(from var(--border-color) r g b / .1)}.fileUploadContentContainer{display:flex;flex-direction:row;gap:1rem}.icon mat-icon{font-size:3rem;width:unset;height:unset}.icon{align-content:center}.labels{flex:1;display:flex;flex-direction:column;justify-content:center;width:fit-content}.uploadButton{align-content:center}.primary{color:var(--primary-color)}.secondary{color:var(--gray)}.label{margin:unset}.subLabel{font-size:smaller}.title{padding-bottom:.3rem}.errorMessage,.uploadedFilesContainer{border-top:2px solid var(--border-color)}.errorMessage{display:flex;flex-direction:row;align-items:center;color:var(--warninig-color);padding:.5rem 1rem;gap:1rem}.errorMessage ::ng-deep mat-icon{color:var(--warninig-color)}.errors{display:flex;flex-direction:column}.uploadedFile{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;padding:1rem;border-bottom:1px solid #e0e0e0;gap:1rem}.uploadedFile:last-child{border-bottom:none}.fileSize{display:flex;flex-direction:row;font-size:smaller}.fileData{flex:1;display:flex;flex-direction:column}.fileDataContainer{display:flex;flex-direction:column;justify-content:flex-end;width:fit-content}.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}smart-icon ::ng-deep mat-icon{font-size:3rem;width:unset;height:unset}.fileActions{display:flex;flex-direction:row;justify-content:flex-end;gap:.5rem}.removeIcon ::ng-deep i,.removeIcon ::ng-deep mat-icon{color:var(--warninig-color)}.removeIcon ::ng-deep mat-icon,.downloadIcon ::ng-deep mat-icon{font-size:2rem}.removeIcon:hover,.downloadIcon:hover{cursor:pointer}smart-icon{display:flex;align-items:center}\n"] }]
         }], propDecorators: { fileInput: [{
                 type: ViewChild,
                 args: ['fileInput']
@@ -12433,7 +12500,25 @@ class SmartFilterEditorService {
     constructor() {
         this.service = inject(FilterService);
         this.viewCtxService = inject(SmartViewContextService);
+        /** Signal-backed so template gates (ours and the hosts') re-evaluate under zoneless CD. */
+        this.modelState = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "modelState" }] : /* istanbul ignore next */ []));
         this.modelChanged = new Subject();
+        this.itemSelected = new Subject();
+        this.toolbars = [];
+    }
+    get model() {
+        return this.modelState();
+    }
+    set model(model) {
+        this.modelState.set(model);
+    }
+    getComplexToolbars() {
+        return [...this.toolbars];
+    }
+    setComplexToolbars(toolbars) {
+        this.toolbars = [...toolbars];
+        this.parentSmartComponent?.initActions();
     }
     async load() {
         if (this.config.uuid) {
@@ -12479,6 +12564,20 @@ class SmartFilterEditorService {
     getAdditionalParams(uiAction) {
         throw new Error('Method not implemented.');
     }
+    async bulkUpdateFilterExpression(operationType, item) {
+        if (!this.model?.readOnly) {
+            if (item) {
+                item.expressionData.boolOperator = operationType;
+            }
+            await this.peformWidgetAction({
+                code: 'BULK_UPDATE_FILTER_EXPRESSION',
+                params: {
+                    model: item,
+                    operator: operationType,
+                },
+            });
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterEditorService }); }
 }
@@ -18310,11 +18409,11 @@ class SmartGridComponent {
         this.dialog.open(TableLayoutDefinerComponent, { data: dialogData });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartGridComponent, isStandalone: true, selector: "smart-grid", inputs: { smartGrid: { classPropertyName: "smartGrid", publicName: "smartGrid", isSignal: false, isRequired: false, transformFunction: null }, uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: false, isRequired: false, transformFunction: null }, parentLayoutComponent: { classPropertyName: "parentLayoutComponent", publicName: "parentLayoutComponent", isSignal: true, isRequired: false, transformFunction: null }, dev: { classPropertyName: "dev", publicName: "dev", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-testid": "this.testId" } }, providers: [SmartGridService], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }, { propertyName: "expandedRowsComps", predicate: ExpandedRowRendererComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (smartGrid) {\n  <div class=\"smartGrid-container\">\n    <div class=\"smart-grid-toolbar\">\n      <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\n      @if (smartGrid.showEditColumns) {\n        <button\n          (click)=\"editColumns()\"\n          mat-mini-fab\n          color=\"text-primary\"\n          >\n          <mat-icon aria-hidden=\"false\" aria-label=\"Columns\" class=\"smart-grid-edit-icon\"\n            >view_columns</mat-icon\n            >\n          </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\n                #gridExpandableSection\n                [data]=\"expandableSection\"\n              ></smart-expandable-section>\n            }\n          </div>\n        }\n        @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\n          <div\n            class=\"cards-container\"\n      [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\"\n            >\n            @for (row of smartGrid.gridModel.page.rows; track row) {\n              <app-smart-grid-card\n                class=\"smartGrid-card-container\"\n                [class.clickable-row]=\"row.layoutDescriptor\"\n                (click)=\"row.layoutDescriptor && onClick(row)\"\n                [item]=\"row\"\n                [smartGrid]=\"smartGrid\"\n                [parentLayoutComponent]=\"parentLayoutComponent()\"\n              ></app-smart-grid-card>\n            }\n          </div>\n        }\n        @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\n          <div\n            class=\"tree-container\"\n      [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\"\n            >\n            <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\n              <mat-tree-node\n                *matTreeNodeDef=\"let node\"\n                matTreeNodeToggle\n                matTreeNodePadding\n                matTreeNodePaddingIndent=\"24\"\n                >\n                <button mat-icon-button disabled class=\"tree-button\"></button>\n                <mat-checkbox\n                  class=\"checklist-leaf-node\"\n                  [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n                  (change)=\"treeNodeSelectionToggle(node)\"\n                  >{{ getTreeItem(node) }}</mat-checkbox\n                  >\n                </mat-tree-node>\n                <mat-tree-node\n                  *matTreeNodeDef=\"let node; when: hasChild\"\n                  matTreeNodePadding\n                  matTreeNodePaddingIndent=\"24\"\n                  >\n                  <button\n                    mat-icon-button\n                    matTreeNodeToggle\n                    class=\"tree-button\"\n                    [attr.aria-label]=\"'Toggle ' + node.item\"\n                    >\n                    <mat-icon class=\"mat-icon-rtl-mirror\">\n                      {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n                    </mat-icon>\n                  </button>\n                  <mat-checkbox\n                    [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n                    [indeterminate]=\"descendantsPartiallySelected(node)\"\n                    (change)=\"treeNodeSelectionToggle(node)\"\n                    >{{ getTreeItem(node) }}</mat-checkbox\n                    >\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\n                  #paginator\n                  [length]=\"length\"\n                  [pageIndex]=\"pageIndex\"\n                  [pageSize]=\"pageSize\"\n                  [pageSizeOptions]=\"pageSizeOptions\"\n                  (page)=\"onChangePage($event)\"\n                ></mat-paginator>\n              }\n            </div>\n          }\n        </div>\n      }\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}\n"], dependencies: [{ kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid", "parentLayoutComponent"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "directive", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartGridComponent, isStandalone: true, selector: "smart-grid", inputs: { smartGrid: { classPropertyName: "smartGrid", publicName: "smartGrid", isSignal: false, isRequired: false, transformFunction: null }, uuid: { classPropertyName: "uuid", publicName: "uuid", isSignal: false, isRequired: false, transformFunction: null }, parentLayoutComponent: { classPropertyName: "parentLayoutComponent", publicName: "parentLayoutComponent", isSignal: true, isRequired: false, transformFunction: null }, dev: { classPropertyName: "dev", publicName: "dev", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.data-testid": "this.testId" } }, providers: [SmartGridService], viewQueries: [{ propertyName: "vcRefTable", first: true, predicate: ["table"], descendants: true, read: ViewContainerRef }, { propertyName: "expandedRowsComps", predicate: ExpandedRowRendererComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (smartGrid) {\n  <div class=\"smartGrid-container\">\n    <div class=\"smart-grid-toolbar\">\n      <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\n      @if (smartGrid.showEditColumns) {\n        <button\n          (click)=\"editColumns()\"\n          mat-mini-fab\n          color=\"text-primary\"\n          >\n          <mat-icon aria-hidden=\"false\" aria-label=\"Columns\" class=\"smart-grid-edit-icon\"\n            >view_columns</mat-icon\n            >\n          </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\n                #gridExpandableSection\n                [data]=\"expandableSection\"\n              ></smart-expandable-section>\n            }\n          </div>\n        }\n        @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\n          <div\n            class=\"cards-container\"\n      [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\"\n            >\n            @for (row of smartGrid.gridModel.page.rows; track row.id) {\n              <app-smart-grid-card\n                class=\"smartGrid-card-container\"\n                [class.clickable-row]=\"row.layoutDescriptor\"\n                (click)=\"row.layoutDescriptor && onClick(row)\"\n                [item]=\"row\"\n                [smartGrid]=\"smartGrid\"\n                [parentLayoutComponent]=\"parentLayoutComponent()\"\n              ></app-smart-grid-card>\n            }\n          </div>\n        }\n        @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\n          <div\n            class=\"tree-container\"\n      [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\"\n            >\n            <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\n              <mat-tree-node\n                *matTreeNodeDef=\"let node\"\n                matTreeNodeToggle\n                matTreeNodePadding\n                matTreeNodePaddingIndent=\"24\"\n                >\n                <button mat-icon-button disabled class=\"tree-button\"></button>\n                <mat-checkbox\n                  class=\"checklist-leaf-node\"\n                  [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n                  (change)=\"treeNodeSelectionToggle(node)\"\n                  >{{ getTreeItem(node) }}</mat-checkbox\n                  >\n                </mat-tree-node>\n                <mat-tree-node\n                  *matTreeNodeDef=\"let node; when: hasChild\"\n                  matTreeNodePadding\n                  matTreeNodePaddingIndent=\"24\"\n                  >\n                  <button\n                    mat-icon-button\n                    matTreeNodeToggle\n                    class=\"tree-button\"\n                    [attr.aria-label]=\"'Toggle ' + node.item\"\n                    >\n                    <mat-icon class=\"mat-icon-rtl-mirror\">\n                      {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n                    </mat-icon>\n                  </button>\n                  <mat-checkbox\n                    [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n                    [indeterminate]=\"descendantsPartiallySelected(node)\"\n                    (change)=\"treeNodeSelectionToggle(node)\"\n                    >{{ getTreeItem(node) }}</mat-checkbox\n                    >\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\n                  #paginator\n                  [length]=\"length\"\n                  [pageIndex]=\"pageIndex\"\n                  [pageSize]=\"pageSize\"\n                  [pageSizeOptions]=\"pageSizeOptions\"\n                  (page)=\"onChangePage($event)\"\n                ></mat-paginator>\n              }\n            </div>\n          }\n        </div>\n      }\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}\n"], dependencies: [{ kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: ExpandableSectionComponent, selector: "smart-expandable-section", inputs: ["data", "index"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: SmartGridCardComponent, selector: "app-smart-grid-card", inputs: ["item", "smartGrid", "parentLayoutComponent"] }, { kind: "component", type: MatTree, selector: "mat-tree", exportAs: ["matTree"] }, { kind: "directive", type: MatTreeNodeDef, selector: "[matTreeNodeDef]", inputs: ["matTreeNodeDefWhen", "matTreeNode"] }, { kind: "directive", type: MatTreeNode, selector: "mat-tree-node", inputs: ["tabIndex", "disabled"], outputs: ["activation", "expandedChange"], exportAs: ["matTreeNode"] }, { kind: "directive", type: MatTreeNodeToggle, selector: "[matTreeNodeToggle]", inputs: ["matTreeNodeToggleRecursive"] }, { kind: "directive", type: MatTreeNodePadding, selector: "[matTreeNodePadding]", inputs: ["matTreeNodePadding", "matTreeNodePaddingIndent"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-grid', providers: [SmartGridService], imports: [UiActionToolbarComponent, MatMiniFabButton, MatIcon, ExpandableSectionComponent, NgStyle, SmartGridCardComponent, MatTree, MatTreeNodeDef, MatTreeNode, MatTreeNodeToggle, MatTreeNodePadding, MatIconButton, MatCheckbox, MatTooltip, MatPaginator], template: "@if (smartGrid) {\n  <div class=\"smartGrid-container\">\n    <div class=\"smart-grid-toolbar\">\n      <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\n      @if (smartGrid.showEditColumns) {\n        <button\n          (click)=\"editColumns()\"\n          mat-mini-fab\n          color=\"text-primary\"\n          >\n          <mat-icon aria-hidden=\"false\" aria-label=\"Columns\" class=\"smart-grid-edit-icon\"\n            >view_columns</mat-icon\n            >\n          </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\n                #gridExpandableSection\n                [data]=\"expandableSection\"\n              ></smart-expandable-section>\n            }\n          </div>\n        }\n        @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\n          <div\n            class=\"cards-container\"\n      [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\"\n            >\n            @for (row of smartGrid.gridModel.page.rows; track row) {\n              <app-smart-grid-card\n                class=\"smartGrid-card-container\"\n                [class.clickable-row]=\"row.layoutDescriptor\"\n                (click)=\"row.layoutDescriptor && onClick(row)\"\n                [item]=\"row\"\n                [smartGrid]=\"smartGrid\"\n                [parentLayoutComponent]=\"parentLayoutComponent()\"\n              ></app-smart-grid-card>\n            }\n          </div>\n        }\n        @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\n          <div\n            class=\"tree-container\"\n      [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\"\n            >\n            <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\n              <mat-tree-node\n                *matTreeNodeDef=\"let node\"\n                matTreeNodeToggle\n                matTreeNodePadding\n                matTreeNodePaddingIndent=\"24\"\n                >\n                <button mat-icon-button disabled class=\"tree-button\"></button>\n                <mat-checkbox\n                  class=\"checklist-leaf-node\"\n                  [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n                  (change)=\"treeNodeSelectionToggle(node)\"\n                  >{{ getTreeItem(node) }}</mat-checkbox\n                  >\n                </mat-tree-node>\n                <mat-tree-node\n                  *matTreeNodeDef=\"let node; when: hasChild\"\n                  matTreeNodePadding\n                  matTreeNodePaddingIndent=\"24\"\n                  >\n                  <button\n                    mat-icon-button\n                    matTreeNodeToggle\n                    class=\"tree-button\"\n                    [attr.aria-label]=\"'Toggle ' + node.item\"\n                    >\n                    <mat-icon class=\"mat-icon-rtl-mirror\">\n                      {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n                    </mat-icon>\n                  </button>\n                  <mat-checkbox\n                    [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n                    [indeterminate]=\"descendantsPartiallySelected(node)\"\n                    (change)=\"treeNodeSelectionToggle(node)\"\n                    >{{ getTreeItem(node) }}</mat-checkbox\n                    >\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\n                  #paginator\n                  [length]=\"length\"\n                  [pageIndex]=\"pageIndex\"\n                  [pageSize]=\"pageSize\"\n                  [pageSizeOptions]=\"pageSizeOptions\"\n                  (page)=\"onChangePage($event)\"\n                ></mat-paginator>\n              }\n            </div>\n          }\n        </div>\n      }\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}\n"] }]
+            args: [{ selector: 'smart-grid', providers: [SmartGridService], imports: [UiActionToolbarComponent, MatMiniFabButton, MatIcon, ExpandableSectionComponent, NgStyle, SmartGridCardComponent, MatTree, MatTreeNodeDef, MatTreeNode, MatTreeNodeToggle, MatTreeNodePadding, MatIconButton, MatCheckbox, MatTooltip, MatPaginator], template: "@if (smartGrid) {\n  <div class=\"smartGrid-container\">\n    <div class=\"smart-grid-toolbar\">\n      <smart-ui-action-toolbar [id]=\"toolbarId\"></smart-ui-action-toolbar>\n      @if (smartGrid.showEditColumns) {\n        <button\n          (click)=\"editColumns()\"\n          mat-mini-fab\n          color=\"text-primary\"\n          >\n          <mat-icon aria-hidden=\"false\" aria-label=\"Columns\" class=\"smart-grid-edit-icon\"\n            >view_columns</mat-icon\n            >\n          </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\n                #gridExpandableSection\n                [data]=\"expandableSection\"\n              ></smart-expandable-section>\n            }\n          </div>\n        }\n        @if (smartGrid.layoutDef === layoutDef().CARD && smartGrid.dataLayoutDef) {\n          <div\n            class=\"cards-container\"\n      [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\"\n            >\n            @for (row of smartGrid.gridModel.page.rows; track row.id) {\n              <app-smart-grid-card\n                class=\"smartGrid-card-container\"\n                [class.clickable-row]=\"row.layoutDescriptor\"\n                (click)=\"row.layoutDescriptor && onClick(row)\"\n                [item]=\"row\"\n                [smartGrid]=\"smartGrid\"\n                [parentLayoutComponent]=\"parentLayoutComponent()\"\n              ></app-smart-grid-card>\n            }\n          </div>\n        }\n        @if (smartGrid.layoutDef === layoutDef().TREE && treeControl) {\n          <div\n            class=\"tree-container\"\n      [ngStyle]=\"{\n        'grid-template-columns':\n          smartGrid.numberOfColumn !== undefined\n            ? 'repeat(' + smartGrid.numberOfColumn + ', 1fr)'\n            : '',\n      }\"\n            >\n            <mat-tree [dataSource]=\"treeDataSource!\" [treeControl]=\"treeControl!\">\n              <mat-tree-node\n                *matTreeNodeDef=\"let node\"\n                matTreeNodeToggle\n                matTreeNodePadding\n                matTreeNodePaddingIndent=\"24\"\n                >\n                <button mat-icon-button disabled class=\"tree-button\"></button>\n                <mat-checkbox\n                  class=\"checklist-leaf-node\"\n                  [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n                  (change)=\"treeNodeSelectionToggle(node)\"\n                  >{{ getTreeItem(node) }}</mat-checkbox\n                  >\n                </mat-tree-node>\n                <mat-tree-node\n                  *matTreeNodeDef=\"let node; when: hasChild\"\n                  matTreeNodePadding\n                  matTreeNodePaddingIndent=\"24\"\n                  >\n                  <button\n                    mat-icon-button\n                    matTreeNodeToggle\n                    class=\"tree-button\"\n                    [attr.aria-label]=\"'Toggle ' + node.item\"\n                    >\n                    <mat-icon class=\"mat-icon-rtl-mirror\">\n                      {{ treeControl!.isExpanded(node) ? 'expand_more' : 'chevron_right' }}\n                    </mat-icon>\n                  </button>\n                  <mat-checkbox\n                    [checked]=\"$safeNavigationMigration(treeChecklistSelection?.isSelected(node))\"\n                    [indeterminate]=\"descendantsPartiallySelected(node)\"\n                    (change)=\"treeNodeSelectionToggle(node)\"\n                    >{{ getTreeItem(node) }}</mat-checkbox\n                    >\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\n                  #paginator\n                  [length]=\"length\"\n                  [pageIndex]=\"pageIndex\"\n                  [pageSize]=\"pageSize\"\n                  [pageSizeOptions]=\"pageSizeOptions\"\n                  (page)=\"onChangePage($event)\"\n                ></mat-paginator>\n              }\n            </div>\n          }\n        </div>\n      }\n", styles: [".smartGrid-container{position:relative;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.smartGrid-data-number{padding-bottom:1rem}.cards-container{display:grid;gap:1rem;padding:1rem}.smartGrid-container ::ng-deep .mat-form-field-appearance-legacy .mat-form-field-underline{bottom:0}.smartGridContent{width:100%;flex:1;overflow:auto}.blocked{position:absolute;width:calc(100% - 3rem);height:calc(100% - 3rem);z-index:110;background-color:#0003}.smart-grid-table-container{display:flex;flex-direction:column;gap:1rem}.smart-grid-toolbar{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.smart-grid-toolbar smart-ui-action-toolbar{width:100%}.smart-grid-edit-icon{color:var(--light-gray)}.tree-button{width:24px!important;height:24px!important}.paginator-row-material{display:flex;align-items:center;align-self:flex-end;gap:.25rem}.clickable-row{cursor:pointer}\n"] }]
         }], ctorParameters: () => [], propDecorators: { smartGrid: [{
                 type: Input
             }], uuid: [{
@@ -20981,7 +21080,7 @@ class SmartComponentLayoutComponent {
             layoutDefinitions: this.smartComponentLayout?.form,
         });
         const gridRow = this.gridRow;
-        if (gridRow && !gridRow.valueSet) {
+        if (gridRow && !gridRow.valueSets) {
             gridRow.valueSets = this.smartComponent?.model?.valueSets;
         }
         this.smartForm = {
@@ -21008,7 +21107,7 @@ class SmartComponentLayoutComponent {
                 rowUiActionType: GridUiActionType.POPUP_MENU,
             },
             layoutDef: SmartLayoutDef.TABLE,
-            paginator: true,
+            paginator: false,
             // What a card of this grid instantiates for a row that carries a layoutDescriptor.
             // The grid model is the only way across: the card cannot import this class.
             layoutComponent: SmartComponentLayoutComponent,
@@ -21152,11 +21251,11 @@ class GenericPageComponent extends SmartComponent {
         return false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GenericPageComponent, deps: [{ token: i0.Injector }, { token: SMART_GENERIC_PAGE_NAME }, { token: SMART_GENERIC_COMPONENT_NAME }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: GenericPageComponent, isStandalone: true, selector: "app-generic-page", usesInheritance: true, ngImport: i0, template: "<div class=\"generic-page-container\">\n  @if (componentLayout) {\n    <smart-component-layout\n      class=\"generic-page-layout\"\n      [smartComponentLayout]=\"componentLayout\"\n    ></smart-component-layout>\n  }\n  <smart-ui-action-toolbar\n    class=\"generic-page-toolbar\"\n    [uiActionModels]=\"uiActionModels\"\n  ></smart-ui-action-toolbar>\n</div>\n@if (showRouterOutlet()) {\n  <div>\n    <ng-container [smartEmbeddedSlot]=\"'router-outlet'\" [containerUuid]=\"uuid\"></ng-container>\n  </div>\n}\n", styles: [".generic-page-container{display:flex;flex-direction:column;gap:1rem}:host{min-width:200px;width:40vw}\n"], dependencies: [{ kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "gridRow"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "directive", type: SmartEmbeddedSlotDirective, selector: "[smartEmbeddedSlot]", inputs: ["smartEmbeddedSlot", "containerUuid"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: GenericPageComponent, isStandalone: true, selector: "app-generic-page", usesInheritance: true, ngImport: i0, template: "<div class=\"generic-page-container\">\n  @if (componentLayout) {\n    <smart-component-layout\n      class=\"generic-page-layout\"\n      [smartComponentLayout]=\"componentLayout\"\n    ></smart-component-layout>\n  }\n  <smart-ui-action-toolbar\n    class=\"generic-page-toolbar\"\n    [uiActionModels]=\"uiActionModels\"\n  ></smart-ui-action-toolbar>\n</div>\n@if (showRouterOutlet()) {\n  <div>\n    <ng-container [smartEmbeddedSlot]=\"'router-outlet'\" [containerUuid]=\"uuid\"></ng-container>\n  </div>\n}\n", styles: [".generic-page-container{display:flex;flex-direction:column;gap:1rem}\n"], dependencies: [{ kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "gridRow"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "directive", type: SmartEmbeddedSlotDirective, selector: "[smartEmbeddedSlot]", inputs: ["smartEmbeddedSlot", "containerUuid"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GenericPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-generic-page', imports: [SmartComponentLayoutComponent, UiActionToolbarComponent, SmartEmbeddedSlotDirective], template: "<div class=\"generic-page-container\">\n  @if (componentLayout) {\n    <smart-component-layout\n      class=\"generic-page-layout\"\n      [smartComponentLayout]=\"componentLayout\"\n    ></smart-component-layout>\n  }\n  <smart-ui-action-toolbar\n    class=\"generic-page-toolbar\"\n    [uiActionModels]=\"uiActionModels\"\n  ></smart-ui-action-toolbar>\n</div>\n@if (showRouterOutlet()) {\n  <div>\n    <ng-container [smartEmbeddedSlot]=\"'router-outlet'\" [containerUuid]=\"uuid\"></ng-container>\n  </div>\n}\n", styles: [".generic-page-container{display:flex;flex-direction:column;gap:1rem}:host{min-width:200px;width:40vw}\n"] }]
+            args: [{ selector: 'app-generic-page', imports: [SmartComponentLayoutComponent, UiActionToolbarComponent, SmartEmbeddedSlotDirective], template: "<div class=\"generic-page-container\">\n  @if (componentLayout) {\n    <smart-component-layout\n      class=\"generic-page-layout\"\n      [smartComponentLayout]=\"componentLayout\"\n    ></smart-component-layout>\n  }\n  <smart-ui-action-toolbar\n    class=\"generic-page-toolbar\"\n    [uiActionModels]=\"uiActionModels\"\n  ></smart-ui-action-toolbar>\n</div>\n@if (showRouterOutlet()) {\n  <div>\n    <ng-container [smartEmbeddedSlot]=\"'router-outlet'\" [containerUuid]=\"uuid\"></ng-container>\n  </div>\n}\n", styles: [".generic-page-container{display:flex;flex-direction:column;gap:1rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SMART_GENERIC_PAGE_NAME]
@@ -21179,11 +21278,11 @@ class SmartFilterParamComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterParamComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterParamComponent, isStandalone: true, selector: "app-target-group-filter-param", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"targetGroupFilterParamContainer\">\n  @for (data of data()?.group; track data) {\n    <div\n      class=\"targetGroupFilterItem\"\n      (click)=\"onItemClick(data)\"\n      >\n      <smart-icon icon=\"Ic24_Chevron_Right\" color=\"gray\"></smart-icon>\n      <div class=\"mat-caption\">\n        {{ data.label }}\n      </div>\n    </div>\n  }\n</div>\n", styles: [".targetGroupFilterParamContainer{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterItem{padding:.75rem;border-radius:.25rem;display:flex;flex-direction:row;gap:.5rem;cursor:pointer}.targetGroupFilterItem .mat-caption{margin:auto 0}\n"], dependencies: [{ 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: SmartFilterParamComponent, isStandalone: true, selector: "app-target-group-filter-param", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"targetGroupFilterParamContainer\">\n  @for (data of data()?.group; track data) {\n    <div\n      class=\"targetGroupFilterItem\"\n      (click)=\"onItemClick(data)\"\n      >\n      <smart-icon icon=\"chevron_right\" color=\"gray\"></smart-icon>\n      <div class=\"mat-caption\">\n        {{ data.label }}\n      </div>\n    </div>\n  }\n</div>\n", styles: [".targetGroupFilterParamContainer{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterItem{padding:.75rem;border-radius:.25rem;display:flex;flex-direction:row;gap:.5rem;cursor:pointer}.targetGroupFilterItem .mat-caption{margin:auto 0}\n"], dependencies: [{ kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterParamComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-target-group-filter-param', imports: [SmartIconComponent], template: "<div class=\"targetGroupFilterParamContainer\">\n  @for (data of data()?.group; track data) {\n    <div\n      class=\"targetGroupFilterItem\"\n      (click)=\"onItemClick(data)\"\n      >\n      <smart-icon icon=\"Ic24_Chevron_Right\" color=\"gray\"></smart-icon>\n      <div class=\"mat-caption\">\n        {{ data.label }}\n      </div>\n    </div>\n  }\n</div>\n", styles: [".targetGroupFilterParamContainer{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterItem{padding:.75rem;border-radius:.25rem;display:flex;flex-direction:row;gap:.5rem;cursor:pointer}.targetGroupFilterItem .mat-caption{margin:auto 0}\n"] }]
+            args: [{ selector: 'app-target-group-filter-param', imports: [SmartIconComponent], template: "<div class=\"targetGroupFilterParamContainer\">\n  @for (data of data()?.group; track data) {\n    <div\n      class=\"targetGroupFilterItem\"\n      (click)=\"onItemClick(data)\"\n      >\n      <smart-icon icon=\"chevron_right\" color=\"gray\"></smart-icon>\n      <div class=\"mat-caption\">\n        {{ data.label }}\n      </div>\n    </div>\n  }\n</div>\n", styles: [".targetGroupFilterParamContainer{display:flex;flex-direction:column;gap:.25rem}.targetGroupFilterItem{padding:.75rem;border-radius:.25rem;display:flex;flex-direction:row;gap:.5rem;cursor:pointer}.targetGroupFilterItem .mat-caption{margin:auto 0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }] } });
 
 class SmartFilterParamsComponent {
@@ -21699,6 +21798,8 @@ var FilterExpressionBuilderApiActions;
     FilterExpressionBuilderApiActions["SAVE_EXPRESSION_FIELD_LIST"] = "SAVE_EXPRESSION_FIELD_LIST";
 })(FilterExpressionBuilderApiActions || (FilterExpressionBuilderApiActions = {}));
 
+const USE_ADVANCED_FILTER = new InjectionToken('USE_ADVANCED_FILTER');
+
 /**
  * Filter API 2
  * Filter API 2
@@ -21726,8 +21827,7 @@ class SmartFilterExpressionItemComponent {
         this.boolOperatorType = FilterExpressionBoolOperator;
     }
     ngOnInit() {
-        this.isSelected =
-            JSON.stringify(this.service().model?.selectedField) === JSON.stringify(this.item);
+        this.isSelected = this.service().model?.selectedField?.id === this.item.id;
     }
     setOperatorTo(event, operationType) {
         event?.stopPropagation();
@@ -21742,12 +21842,12 @@ class SmartFilterExpressionItemComponent {
             });
         }
     }
-    select(event, item) {
+    async select(event, item) {
         event?.stopPropagation();
         const service = this.service();
         if (!service.model?.readOnly) {
             if (!this.isSelected) {
-                service.peformWidgetAction({
+                await service.peformWidgetAction({
                     code: 'SELECT_FIELD',
                     params: {
                         model: this.item,
@@ -21755,7 +21855,7 @@ class SmartFilterExpressionItemComponent {
                 });
             }
             else {
-                service.peformWidgetAction({
+                await service.peformWidgetAction({
                     code: 'SELECT_FIELD',
                     params: {
                         model: this.item,
@@ -21785,23 +21885,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 type: Input
             }], hasNext: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasNext", required: true }] }], service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: true }] }] } });
 
-class SmartFilterExpressionItemsComponent {
-    get isSelected() {
-        return this.isSelectedState();
+class AdvancedRelationButtonComponent {
+    constructor() {
+        this.boolOperatorChanged = new EventEmitter();
+        this.boolOperatorType = FilterExpressionBoolOperator;
     }
-    set isSelected(isSelected) {
-        this.isSelectedState.set(isSelected);
+    toggle(event) {
+        this.boolOperatorChanged.emit(this.boolOperator === FilterExpressionBoolOperator.AND
+            ? FilterExpressionBoolOperator.OR
+            : FilterExpressionBoolOperator.AND);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AdvancedRelationButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AdvancedRelationButtonComponent, isStandalone: true, selector: "lib-advanced-relation-button", inputs: { boolOperator: "boolOperator" }, outputs: { boolOperatorChanged: "boolOperatorChanged" }, ngImport: i0, template: "<div class=\"relationItemBubble\">\n  <button\n    mat-button\n    (click)=\"toggle($event)\"\n    class=\"mat-raised-button\"\n    [ngClass]=\"boolOperator === boolOperatorType.AND ? 'and-oeprator' : 'or-operator'\"\n    color=\"black\"\n  >\n    {{ boolOperator === boolOperatorType.AND ? '\u00C9S' : 'VAGY' }}\n  </button>\n</div>\n", styles: [".relationItemBubble .mat-mdc-button{border-radius:1.5rem;height:100%;margin:auto 0;padding-top:.75em;padding-bottom:.75em}.relationItemBubble{display:flex;flex-direction:row;border-radius:1.5rem;border:1px solid #cdcdcd;padding:.25rem;max-height:42px;height:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AdvancedRelationButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-advanced-relation-button', imports: [NgClass, MatButton], template: "<div class=\"relationItemBubble\">\n  <button\n    mat-button\n    (click)=\"toggle($event)\"\n    class=\"mat-raised-button\"\n    [ngClass]=\"boolOperator === boolOperatorType.AND ? 'and-oeprator' : 'or-operator'\"\n    color=\"black\"\n  >\n    {{ boolOperator === boolOperatorType.AND ? '\u00C9S' : 'VAGY' }}\n  </button>\n</div>\n", styles: [".relationItemBubble .mat-mdc-button{border-radius:1.5rem;height:100%;margin:auto 0;padding-top:.75em;padding-bottom:.75em}.relationItemBubble{display:flex;flex-direction:row;border-radius:1.5rem;border:1px solid #cdcdcd;padding:.25rem;max-height:42px;height:100%}\n"] }]
+        }], propDecorators: { boolOperator: [{
+                type: Input
+            }], boolOperatorChanged: [{
+                type: Output
+            }] } });
+
+class AdvancedSmartFilterExpressionItemComponent extends SmartFilterExpressionItemComponent {
+    async onOperatorChanged(operator) {
+        await this.service().bulkUpdateFilterExpression(operator, this.item);
+    }
+    async select(event, item) {
+        await super.select(event, item);
+        this.service().itemSelected.next(item);
+    }
+    deleteItem($event) {
+        $event.stopPropagation();
+        this.service().peformWidgetAction({
+            code: 'REMOVE_FILTER_EXPRESSION',
+            params: {
+                model: this.item,
+            },
+        });
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AdvancedSmartFilterExpressionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AdvancedSmartFilterExpressionItemComponent, isStandalone: true, selector: "app-advanced-expression-item", usesInheritance: true, ngImport: i0, template: "<div class=\"expressionItemContainer\">\n  <div\n    class=\"expressionItemInnerContainer\"\n    [ngClass]=\"\n      item.expressionData?.currentOperation === 'EXPRESSION'\n        ? isSelected\n          ? 'selectedExpressionContainer'\n          : 'expressionContainer'\n        : ''\n    \"\n  >\n    <div\n      *ngIf=\"\n        item.expressionData?.currentOperation === 'EXPRESSION';\n        then expression;\n        else simpleItem\n      \"\n    ></div>\n    <ng-template #expression>\n      <div class=\"sub-expression-container\" (click)=\"select($event, item)\">\n        <div\n          class=\"expressionItemBubble expression sub-expression-start\"\n          (click)=\"select($event, item)\"\n        ></div>\n        <div class=\"sub-expression-items\">\n          <app-advanced-expression-item\n            [item]=\"subItem\"\n            [service]=\"service()\"\n            [hasNext]=\"i < (item.subFieldList?.filters)!.length - 1\"\n            *ngFor=\"let subItem of item.subFieldList?.filters; let i = index\"\n          ></app-advanced-expression-item>\n        </div>\n        <lib-advanced-relation-button\n          [boolOperator]=\"item.subFieldList?.defaultOperation\"\n          (boolOperatorChanged)=\"onOperatorChanged($event)\"\n        ></lib-advanced-relation-button>\n        <div class=\"expressionItemBubble expression sub-expression-end\"></div>\n      </div>\n    </ng-template>\n    <ng-template #simpleItem>\n      <div>\n        <div\n          (click)=\"select($event, item)\"\n          class=\"expressionItemBubble simpleItem\"\n          [ngClass]=\"isSelected ? 'selectedSimpleItem' : ''\"\n        >\n          <button mat-button class=\"mat-raised-button delete-button\" (click)=\"deleteItem($event)\"\n            >x</button\n          >\n\n          {{ item.label }}:\n          <div *ngIf=\"item.expressionData?.currentOperation !== 'BETWEEN'\">\n            <div *ngIf=\"item.widgetType === 'DATE'\">\n              <b>{{ item.expressionData!.operand2!.valueAsString! | smartDate }}</b>\n            </div>\n            <div *ngIf=\"item.widgetType === 'DATE_TIME'\">\n              <b>{{ item.expressionData!.operand2!.valueAsString! | smartDateTime }}</b>\n            </div>\n            <div *ngIf=\"item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE'\">\n              <b>{{ getDisplayValue(item.expressionData!.operand2!.valueAsString!) }}</b>\n            </div>\n          </div>\n          <div *ngIf=\"item.expressionData?.currentOperation === 'IN'\">\n            <b *ngFor=\"let value of item.expressionData?.operand2?.selectedValues; let last = last\">\n              {{ getDisplayValue(value) }} <b *ngIf=\"!last\">,</b>\n            </b>\n          </div>\n          <div class=\"expressionValues\" *ngIf=\"item.expressionData?.currentOperation === 'BETWEEN'\">\n            <div *ngIf=\"item.widgetType === 'DATE'\">\n              <b>{{ item.expressionData!.operand2!.valueAsString! | smartDate }}</b>\n            </div>\n            <div *ngIf=\"item.widgetType === 'DATE_TIME'\">\n              <b>{{ item.expressionData!.operand2!.valueAsString! | smartDateTime }}</b>\n            </div>\n            <div *ngIf=\"item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE'\">\n              <b>{{ item.expressionData?.operand2?.valueAsString }}</b>\n            </div>\n            <b>-</b>\n            <div *ngIf=\"item.widgetType === 'DATE'\">\n              <b>{{ item.expressionData!.operand3!.valueAsString! | smartDate }}</b>\n            </div>\n            <div *ngIf=\"item.widgetType === 'DATE_TIME'\">\n              <b>{{ item.expressionData!.operand3!.valueAsString! | smartDateTime }}</b>\n            </div>\n            <div *ngIf=\"item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE'\">\n              <b>{{ item.expressionData?.operand3?.valueAsString }}</b>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [".expressionItemContainer{display:flex;flex-direction:row;gap:.75rem}.expressionItemInnerContainer{display:flex;flex-direction:row;grid-area:.75rem;padding:.25rem;border-radius:.25rem}.expressionContainer{border:1px dashed var(--primary-lighter-gray-color);cursor:pointer}.selectedExpressionContainer{border:2px dashed var(--primary-color)}.expressionItemBubble,.relationItemBubble{display:flex;flex-direction:row;border-radius:1.5rem}.expressionItemBubble{padding:.75rem}.expression{background-color:var(--inner-container);font-weight:600;margin:auto 0}.simpleItem{background-color:#c6ddff;cursor:pointer}.relationItemBubble{border:1px solid #cdcdcd;padding:.25rem;max-height:42px;margin-top:.25rem}.relationItemBubble .mat-mdc-button{border-radius:1.5rem;height:100%;margin:auto 0}.expressionValues{display:flex;flex-direction:row;gap:.5rem}.sub-expression-container{display:flex;align-items:stretch}.sub-expression-start{padding:5px;height:100%;border-left:2px solid black;border-top:2px solid black;border-bottom:2px solid black;border-radius:0}.sub-expression-end{padding:5px;height:100%;border-right:2px solid black;border-top:2px solid black;border-bottom:2px solid black;border-radius:0}.sub-expression-items{display:flex;flex-wrap:wrap}lib-advanced-relation-button{margin-top:.25rem;margin-bottom:.25rem}.delete-button{min-width:10px;top:-7px;height:20px;padding:5px;border-radius:1.5rem}\n"], dependencies: [{ kind: "component", type: AdvancedSmartFilterExpressionItemComponent, selector: "app-advanced-expression-item" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdvancedRelationButtonComponent, selector: "lib-advanced-relation-button", inputs: ["boolOperator"], outputs: ["boolOperatorChanged"] }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AdvancedSmartFilterExpressionItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-advanced-expression-item', imports: [
+                        NgClass,
+                        NgIf,
+                        NgForOf,
+                        MatButton,
+                        SmartDatePipe,
+                        SmartDateTimePipe,
+                        AdvancedRelationButtonComponent,
+                    ], template: "<div class=\"expressionItemContainer\">\n  <div\n    class=\"expressionItemInnerContainer\"\n    [ngClass]=\"\n      item.expressionData?.currentOperation === 'EXPRESSION'\n        ? isSelected\n          ? 'selectedExpressionContainer'\n          : 'expressionContainer'\n        : ''\n    \"\n  >\n    <div\n      *ngIf=\"\n        item.expressionData?.currentOperation === 'EXPRESSION';\n        then expression;\n        else simpleItem\n      \"\n    ></div>\n    <ng-template #expression>\n      <div class=\"sub-expression-container\" (click)=\"select($event, item)\">\n        <div\n          class=\"expressionItemBubble expression sub-expression-start\"\n          (click)=\"select($event, item)\"\n        ></div>\n        <div class=\"sub-expression-items\">\n          <app-advanced-expression-item\n            [item]=\"subItem\"\n            [service]=\"service()\"\n            [hasNext]=\"i < (item.subFieldList?.filters)!.length - 1\"\n            *ngFor=\"let subItem of item.subFieldList?.filters; let i = index\"\n          ></app-advanced-expression-item>\n        </div>\n        <lib-advanced-relation-button\n          [boolOperator]=\"item.subFieldList?.defaultOperation\"\n          (boolOperatorChanged)=\"onOperatorChanged($event)\"\n        ></lib-advanced-relation-button>\n        <div class=\"expressionItemBubble expression sub-expression-end\"></div>\n      </div>\n    </ng-template>\n    <ng-template #simpleItem>\n      <div>\n        <div\n          (click)=\"select($event, item)\"\n          class=\"expressionItemBubble simpleItem\"\n          [ngClass]=\"isSelected ? 'selectedSimpleItem' : ''\"\n        >\n          <button mat-button class=\"mat-raised-button delete-button\" (click)=\"deleteItem($event)\"\n            >x</button\n          >\n\n          {{ item.label }}:\n          <div *ngIf=\"item.expressionData?.currentOperation !== 'BETWEEN'\">\n            <div *ngIf=\"item.widgetType === 'DATE'\">\n              <b>{{ item.expressionData!.operand2!.valueAsString! | smartDate }}</b>\n            </div>\n            <div *ngIf=\"item.widgetType === 'DATE_TIME'\">\n              <b>{{ item.expressionData!.operand2!.valueAsString! | smartDateTime }}</b>\n            </div>\n            <div *ngIf=\"item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE'\">\n              <b>{{ getDisplayValue(item.expressionData!.operand2!.valueAsString!) }}</b>\n            </div>\n          </div>\n          <div *ngIf=\"item.expressionData?.currentOperation === 'IN'\">\n            <b *ngFor=\"let value of item.expressionData?.operand2?.selectedValues; let last = last\">\n              {{ getDisplayValue(value) }} <b *ngIf=\"!last\">,</b>\n            </b>\n          </div>\n          <div class=\"expressionValues\" *ngIf=\"item.expressionData?.currentOperation === 'BETWEEN'\">\n            <div *ngIf=\"item.widgetType === 'DATE'\">\n              <b>{{ item.expressionData!.operand2!.valueAsString! | smartDate }}</b>\n            </div>\n            <div *ngIf=\"item.widgetType === 'DATE_TIME'\">\n              <b>{{ item.expressionData!.operand2!.valueAsString! | smartDateTime }}</b>\n            </div>\n            <div *ngIf=\"item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE'\">\n              <b>{{ item.expressionData?.operand2?.valueAsString }}</b>\n            </div>\n            <b>-</b>\n            <div *ngIf=\"item.widgetType === 'DATE'\">\n              <b>{{ item.expressionData!.operand3!.valueAsString! | smartDate }}</b>\n            </div>\n            <div *ngIf=\"item.widgetType === 'DATE_TIME'\">\n              <b>{{ item.expressionData!.operand3!.valueAsString! | smartDateTime }}</b>\n            </div>\n            <div *ngIf=\"item.widgetType !== 'DATE_TIME' && item.widgetType !== 'DATE'\">\n              <b>{{ item.expressionData?.operand3?.valueAsString }}</b>\n            </div>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n  </div>\n</div>\n", styles: [".expressionItemContainer{display:flex;flex-direction:row;gap:.75rem}.expressionItemInnerContainer{display:flex;flex-direction:row;grid-area:.75rem;padding:.25rem;border-radius:.25rem}.expressionContainer{border:1px dashed var(--primary-lighter-gray-color);cursor:pointer}.selectedExpressionContainer{border:2px dashed var(--primary-color)}.expressionItemBubble,.relationItemBubble{display:flex;flex-direction:row;border-radius:1.5rem}.expressionItemBubble{padding:.75rem}.expression{background-color:var(--inner-container);font-weight:600;margin:auto 0}.simpleItem{background-color:#c6ddff;cursor:pointer}.relationItemBubble{border:1px solid #cdcdcd;padding:.25rem;max-height:42px;margin-top:.25rem}.relationItemBubble .mat-mdc-button{border-radius:1.5rem;height:100%;margin:auto 0}.expressionValues{display:flex;flex-direction:row;gap:.5rem}.sub-expression-container{display:flex;align-items:stretch}.sub-expression-start{padding:5px;height:100%;border-left:2px solid black;border-top:2px solid black;border-bottom:2px solid black;border-radius:0}.sub-expression-end{padding:5px;height:100%;border-right:2px solid black;border-top:2px solid black;border-bottom:2px solid black;border-radius:0}.sub-expression-items{display:flex;flex-wrap:wrap}lib-advanced-relation-button{margin-top:.25rem;margin-bottom:.25rem}.delete-button{min-width:10px;top:-7px;height:20px;padding:5px;border-radius:1.5rem}\n"] }]
+        }] });
+
+class SmartFilterExpressionItemsComponent {
     constructor() {
         this._destroy$ = new Subject();
         this.items = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         this.service = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "service" }] : /* istanbul ignore next */ []));
+        this.useAdvancedFilter = inject(USE_ADVANCED_FILTER, { optional: true });
         /** Written from the editor service's `modelChanged`, never from a template event. */
         this.isSelectedState = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isSelectedState" }] : /* istanbul ignore next */ []));
     }
+    get isSelected() {
+        return this.isSelectedState();
+    }
+    set isSelected(isSelected) {
+        this.isSelectedState.set(isSelected);
+    }
     ngOnInit() {
         this.service().modelChanged.subscribe(() => {
             const service = this.service();
@@ -21820,13 +21976,83 @@ class SmartFilterExpressionItemsComponent {
     drop(event) {
         moveItemInArray(this.items(), event.previousIndex, event.currentIndex);
     }
+    async onOperatorChanged($event) {
+        await this.service().bulkUpdateFilterExpression($event);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterExpressionItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterExpressionItemsComponent, isStandalone: true, selector: "app-expression-items", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div\n  cdkDropList\n  cdkDropListOrientation=\"horizontal\"\n  (cdkDropListDropped)=\"drop($event)\"\n  class=\"expressionsContainer example-list\"\n  [ngClass]=\"isSelected ? 'selected' : ''\"\n  >\n  @for (item of items(); track item; let i = $index) {\n    <div cdkDrag class=\"expressionItem\">\n      <app-expression-item\n        [item]=\"item\"\n        [hasNext]=\"i < items().length - 1\"\n        [service]=\"service()\"\n      ></app-expression-item>\n    </div>\n  }\n</div>\n", styles: [".expressionsContainer{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;border:1px dashed var(--primary-lighter-gray-color);padding:.25rem;border-radius:.25rem}.selected{border:2px dashed var(--primary-darker-color)}.expressionItem{margin:auto 0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.example-custom-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SmartFilterExpressionItemComponent, selector: "app-expression-item", inputs: ["item", "hasNext", "service"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterExpressionItemsComponent, isStandalone: true, selector: "app-expression-items", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, service: { classPropertyName: "service", publicName: "service", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if (useAdvancedFilter) {\n  <div class=\"advanced-expression-builder-container\">\n    <div\n      cdkDropList\n      cdkDropListOrientation=\"horizontal\"\n      (cdkDropListDropped)=\"drop($event)\"\n      class=\"expressionsContainer example-list\"\n      [ngClass]=\"isSelected ? 'selected' : ''\"\n      >\n      @for (item of items(); track item; let i = $index) {\n        <div\n          cdkDrag\n          class=\"expressionItem\"\n          [ngClass]=\"item.expressionData?.currentOperation == 'EXPRESSION' ? 'non-flex' : ''\"\n          >\n          <app-advanced-expression-item\n            [item]=\"item\"\n            [hasNext]=\"i < items().length - 1\"\n            [service]=\"service()\"\n          ></app-advanced-expression-item>\n        </div>\n      }\n    </div>\n\n    <div class=\"relationItemBubble\">\n      <lib-advanced-relation-button\n        [boolOperator]=\"service().model?.model?.workplaceList?.defaultOperation\"\n        (boolOperatorChanged)=\"onOperatorChanged($event)\"\n      ></lib-advanced-relation-button>\n    </div>\n  </div>\n} @else {\n  <div\n    cdkDropList\n    cdkDropListOrientation=\"horizontal\"\n    (cdkDropListDropped)=\"drop($event)\"\n    class=\"expressionsContainer example-list\"\n    [ngClass]=\"isSelected ? 'selected' : ''\"\n    >\n    @for (item of items(); track item; let i = $index) {\n      <div cdkDrag class=\"expressionItem\">\n        <app-expression-item\n          [item]=\"item\"\n          [hasNext]=\"i < items().length - 1\"\n          [service]=\"service()\"\n        ></app-expression-item>\n      </div>\n    }\n  </div>\n}\n", styles: [".expressionsContainer{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;border:1px dashed var(--primary-lighter-gray-color);padding:.25rem;border-radius:.25rem}.selected{border:2px dashed var(--primary-darker-color)}.expressionItem{margin:auto 0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.example-custom-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.non-flex{flex:0 0 100%}lib-advanced-relation-button{margin-top:.25rem;margin-bottom:.25rem}:host{display:flex}.advanced-expression-builder-container{display:inline-flex}.relationItemBubble{padding:.5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SmartFilterExpressionItemComponent, selector: "app-expression-item", inputs: ["item", "hasNext", "service"] }, { kind: "component", type: AdvancedSmartFilterExpressionItemComponent, selector: "app-advanced-expression-item" }, { kind: "component", type: AdvancedRelationButtonComponent, selector: "lib-advanced-relation-button", inputs: ["boolOperator"], outputs: ["boolOperatorChanged"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterExpressionItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-expression-items', imports: [NgClass, SmartFilterExpressionItemComponent], template: "<div\n  cdkDropList\n  cdkDropListOrientation=\"horizontal\"\n  (cdkDropListDropped)=\"drop($event)\"\n  class=\"expressionsContainer example-list\"\n  [ngClass]=\"isSelected ? 'selected' : ''\"\n  >\n  @for (item of items(); track item; let i = $index) {\n    <div cdkDrag class=\"expressionItem\">\n      <app-expression-item\n        [item]=\"item\"\n        [hasNext]=\"i < items().length - 1\"\n        [service]=\"service()\"\n      ></app-expression-item>\n    </div>\n  }\n</div>\n", styles: [".expressionsContainer{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;border:1px dashed var(--primary-lighter-gray-color);padding:.25rem;border-radius:.25rem}.selected{border:2px dashed var(--primary-darker-color)}.expressionItem{margin:auto 0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.example-custom-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: true }] }] } });
+            args: [{ selector: 'app-expression-items', imports: [
+                        NgClass,
+                        SmartFilterExpressionItemComponent,
+                        AdvancedSmartFilterExpressionItemComponent,
+                        AdvancedRelationButtonComponent,
+                    ], template: "@if (useAdvancedFilter) {\n  <div class=\"advanced-expression-builder-container\">\n    <div\n      cdkDropList\n      cdkDropListOrientation=\"horizontal\"\n      (cdkDropListDropped)=\"drop($event)\"\n      class=\"expressionsContainer example-list\"\n      [ngClass]=\"isSelected ? 'selected' : ''\"\n      >\n      @for (item of items(); track item; let i = $index) {\n        <div\n          cdkDrag\n          class=\"expressionItem\"\n          [ngClass]=\"item.expressionData?.currentOperation == 'EXPRESSION' ? 'non-flex' : ''\"\n          >\n          <app-advanced-expression-item\n            [item]=\"item\"\n            [hasNext]=\"i < items().length - 1\"\n            [service]=\"service()\"\n          ></app-advanced-expression-item>\n        </div>\n      }\n    </div>\n\n    <div class=\"relationItemBubble\">\n      <lib-advanced-relation-button\n        [boolOperator]=\"service().model?.model?.workplaceList?.defaultOperation\"\n        (boolOperatorChanged)=\"onOperatorChanged($event)\"\n      ></lib-advanced-relation-button>\n    </div>\n  </div>\n} @else {\n  <div\n    cdkDropList\n    cdkDropListOrientation=\"horizontal\"\n    (cdkDropListDropped)=\"drop($event)\"\n    class=\"expressionsContainer example-list\"\n    [ngClass]=\"isSelected ? 'selected' : ''\"\n    >\n    @for (item of items(); track item; let i = $index) {\n      <div cdkDrag class=\"expressionItem\">\n        <app-expression-item\n          [item]=\"item\"\n          [hasNext]=\"i < items().length - 1\"\n          [service]=\"service()\"\n        ></app-expression-item>\n      </div>\n    }\n  </div>\n}\n", styles: [".expressionsContainer{display:flex;flex-direction:row;flex-wrap:wrap;gap:.75rem;border:1px dashed var(--primary-lighter-gray-color);padding:.25rem;border-radius:.25rem}.selected{border:2px dashed var(--primary-darker-color)}.expressionItem{margin:auto 0}.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.example-custom-placeholder{background:#ccc;border:dotted 3px #999;min-height:60px;transition:transform .25s cubic-bezier(0,0,.2,1)}.non-flex{flex:0 0 100%}lib-advanced-relation-button{margin-top:.25rem;margin-bottom:.25rem}:host{display:flex}.advanced-expression-builder-container{display:inline-flex}.relationItemBubble{padding:.5rem}\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: true }] }], service: [{ type: i0.Input, args: [{ isSignal: true, alias: "service", required: true }] }] } });
+
+class ExpressionEditorDialogComponent {
+    constructor() {
+        this.service = inject(ExpressionEditorDialogService);
+        this.smartForm = this.service.form;
+    }
+    cancel() {
+        this.service.closeDialog(false);
+    }
+    save() {
+        let submittedForm = this.formComponent.submitForm();
+        this.service.onSave(submittedForm.componentModel.data);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExpressionEditorDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: ExpressionEditorDialogComponent, isStandalone: true, selector: "lib-expression-editor-dialog", viewQueries: [{ propertyName: "formComponent", first: true, predicate: ["form"], descendants: true, read: SmartformComponent }], ngImport: i0, template: "<smartform #form [smartForm]=\"smartForm\"></smartform>\n<div class=\"button-container\">\n  <button (click)=\"save()\" mat-raised-button color=\"primary\">Ment\u00E9s</button>\n  <button (click)=\"cancel()\" mat-raised-button color=\"secondary\">M\u00E9gsem</button>\n</div>\n", styles: [".button-container{display:flex;justify-content:flex-end;gap:1rem}:host{display:flex;flex-direction:column;padding:1rem}:host::ng-deep h4{margin:0}:host::ng-deep .mat-mdc-form-field-infix:has(input){padding:0}\n"], dependencies: [{ kind: "component", type: SmartformComponent, selector: "smartform", inputs: ["smartForm"] }, { 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExpressionEditorDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'lib-expression-editor-dialog', imports: [SmartformComponent, MatButton], template: "<smartform #form [smartForm]=\"smartForm\"></smartform>\n<div class=\"button-container\">\n  <button (click)=\"save()\" mat-raised-button color=\"primary\">Ment\u00E9s</button>\n  <button (click)=\"cancel()\" mat-raised-button color=\"secondary\">M\u00E9gsem</button>\n</div>\n", styles: [".button-container{display:flex;justify-content:flex-end;gap:1rem}:host{display:flex;flex-direction:column;padding:1rem}:host::ng-deep h4{margin:0}:host::ng-deep .mat-mdc-form-field-infix:has(input){padding:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { formComponent: [{
+                type: ViewChild,
+                args: ['form', { read: SmartformComponent }]
+            }] } });
+
+class ExpressionEditorDialogService extends SmartdialogService {
+    constructor() {
+        const dialog = inject(MatDialog);
+        const inject$1 = inject(Injector);
+        super(dialog, inject$1);
+        this._destroy$ = new Subject();
+        this.saveEvent = new Subject();
+    }
+    setDataAndOpenDialog(form) {
+        this.form = form;
+        console.log(this.form);
+        this.openDialog();
+    }
+    openDialog() {
+        const dialogData = {
+            content: {
+                title: '',
+            },
+            size: {},
+            customComponent: ExpressionEditorDialogComponent,
+        };
+        this.createDialog(dialogData, ExpressionEditorDialogComponent);
+    }
+    onSave(data) {
+        this.saveEvent.next(data);
+        // this.onAction.complete();
+        this.closeDialog();
+        // this.onAction = new SmartSubject(this._destroy$);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExpressionEditorDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExpressionEditorDialogService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExpressionEditorDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
 
 class SmartFilterEditorContentComponent {
     get uiActionModels() {
@@ -21853,6 +22079,8 @@ class SmartFilterEditorContentComponent {
         this.type = FilterExpressionBuilderUiModelTypeEnum;
         /** The screen component this filter belongs to; the source of its uuid. (ADR-0005) */
         this.smartComponent = injectSmartComponent();
+        this.expressionEditorDialogService = inject(ExpressionEditorDialogService);
+        this.useAdvancedFilter = inject(USE_ADVANCED_FILTER, { optional: true });
         registerSmartWidget(this.smartComponent, {
             identifier: () => this.service?.config?.identifier,
             reload: () => this.service.load(),
@@ -21896,6 +22124,19 @@ class SmartFilterEditorContentComponent {
         }
         this.service.modelChanged.pipe(takeUntil(this._destroy$)).subscribe(() => this.setUp());
         this.service.load();
+        if (this.useAdvancedFilter) {
+            this.service.itemSelected.pipe(takeUntil(this._destroy$)).subscribe((item) => {
+                if (item.expressionData?.currentOperation !== 'EXPRESSION') {
+                    this.expressionEditorDialogService.setDataAndOpenDialog(this.createFilterEditorForm());
+                }
+            });
+            this.expressionEditorDialogService.saveEvent
+                .pipe(takeUntil(this._destroy$))
+                .subscribe((data) => {
+                this.service.model.selectedField = data;
+                this.updateFilterExpression();
+            });
+        }
     }
     ngOnDestroy() {
         this._destroy$.next();
@@ -21941,8 +22182,8 @@ class SmartFilterEditorContentComponent {
         let smartForm = {
             direction: SmartFormWidgetDirection.ROW,
             componentModel: { data: model },
-            useOnValueChangeEvent: true,
-            useOnBlurEvent: true,
+            useOnValueChangeEvent: !this.useAdvancedFilter,
+            useOnBlurEvent: !this.useAdvancedFilter,
             widgets,
         };
         if (this.simpleFilterRef?.instance) {
@@ -22018,26 +22259,32 @@ class SmartFilterEditorContentComponent {
         }
     }
     constructForm() {
+        this.smartForm = this.createFilterEditorForm();
         this.vcRef?.clear();
         this.formCompRef?.destroy();
         if (!this.vcRef) {
             return;
         }
+        this.formCompRef = this.cfService.createComponent(this.vcRef, SmartformComponent, new Map([['smartForm', this.smartForm]]));
+        this.subscribeEditorFormChildrenEvents();
+    }
+    createFilterEditorForm() {
         let generatedWidgets = this.layoutService.render({
             layoutDefinitions: this.service.model?.selectedFieldEditor?.layoutDef?.widgets,
         });
-        this.smartForm = {
+        return {
             direction: SmartFormWidgetDirection.ROW,
             useOnBlurEvent: true,
             useOnValueChangeEvent: true,
             componentModel: { data: this.service.model?.selectedField },
             widgets: generatedWidgets,
         };
-        this.formCompRef = this.cfService.createComponent(this.vcRef, SmartformComponent, new Map([['smartForm', this.smartForm]]));
-        this.subscribeEditorFormChildrenEvents();
     }
     save() {
         this.formCompRef?.instance?.submitForm(false);
+        this.updateFilterExpression();
+    }
+    updateFilterExpression() {
         this.service.peformWidgetAction({
             code: 'UPDATE_FILTER_EXPRESSION',
             params: {
@@ -22093,12 +22340,19 @@ class SmartFilterEditorContentComponent {
         };
         return widget;
     }
+    async unSelectItems(event) {
+        event.stopPropagation();
+        await this.service.peformWidgetAction({
+            code: 'SELECT_FIELD',
+            params: {},
+        });
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterEditorContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterEditorContentComponent, isStandalone: true, selector: "smart-filter-expression-editor", inputs: { service: "service" }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["form"], descendants: true, read: ViewContainerRef }, { propertyName: "simpleFilterVcRef", first: true, predicate: ["simpleFilterFromChild"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"smart-filter-editor-container\" *ngIf=\"service.model\">\n  @if (service.model.model?.label) {\n    <h3 class=\"smart-filter-editor-title\">{{ service.model.model?.label }}</h3>\n  }\n\n  <div *ngIf=\"service.model?.type === type.SIMPLE; then simpleFilter; else complexFilter\"></div>\n\n  <ng-template #simpleFilter>\n    <div class=\"smart-filter-editor-expressionsContainer\">\n      <ng-template #simpleFilterFromChild></ng-template>\n      <!-- #simpleFilterFromChild [smartForm]=\"simpleFilterForm\"></smartform> -->\n    </div>\n  </ng-template>\n  <ng-template #complexFilter>\n    <div class=\"smart-filter-editor-uiActionsBar\" *ngIf=\"!service.model?.readOnly\">\n      <smart-ui-action-toolbar\n        [uiActionModels]=\"uiActionModels\"\n        [executor]=\"service\"\n      ></smart-ui-action-toolbar>\n    </div>\n    <div\n      *ngIf=\"\n        service?.model?.model?.workplaceList?.filters?.length;\n        then withParameters;\n        else withoutParameters\n      \"\n    ></div>\n    <ng-template #withoutParameters>\n      <div class=\"smart-filter-editor-withoutParametersContainer\">\n        <span class=\"mat-body\"> M\u00E9g nincs megadva param\u00E9ter </span>\n      </div>\n    </ng-template>\n    <ng-template #withParameters>\n      <div class=\"smart-filter-editor-withParametersContainer\">\n        <div\n          class=\"smart-filter-editor-expressionsContainer\"\n          *ngIf=\"service?.model?.model?.workplaceList?.filters?.length\"\n        >\n          <app-expression-items\n            [items]=\"(service.model.model?.workplaceList)!.filters\"\n            [service]=\"service\"\n          ></app-expression-items>\n        </div>\n        <div class=\"smart-filter-editor-expressionEditorContainer\">\n          <!-- <smartform #form [smartForm]=\"smartForm\"></smartform> -->\n          <ng-template #form></ng-template>\n          <div *ngIf=\"smartForm\">\n            <button (click)=\"remove()\" mat-raised-button color=\"primary\">T\u00F6rl\u00E9s</button>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n</div>\n", styles: [".smart-filter-editor-container{display:flex;flex-direction:column;overflow:auto;position:relative}.targetGroupContentContainer h3{margin:0;font-weight:600}.smart-filter-editor-uiActionsBar{padding:1.5rem;border-radius:.25rem;background-color:var(--container-color);display:flex;flex-direction:row;gap:1rem}.smart-filter-editor-withoutParametersContainer{display:flex;flex-direction:column;background-color:var(--container-color)}.withoutParametersContainer .mat-body{font-weight:600;text-align:center}.smart-filter-editor-withParametersContainer{display:flex;flex-direction:column;background-color:var(--container-color)}.smart-filter-editor-expressionEditorContainer{display:flex;flex-direction:column;gap:.75rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: SmartFilterExpressionItemsComponent, selector: "app-expression-items", inputs: ["items", "service"] }, { 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"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartFilterEditorContentComponent, isStandalone: true, selector: "smart-filter-expression-editor", inputs: { service: "service" }, viewQueries: [{ propertyName: "vcRef", first: true, predicate: ["form"], descendants: true, read: ViewContainerRef }, { propertyName: "simpleFilterVcRef", first: true, predicate: ["simpleFilterFromChild"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div class=\"smart-filter-editor-container\" *ngIf=\"service.model\">\n  @if (service.model.model?.label) {\n    <h3 class=\"smart-filter-editor-title\">{{ service.model.model?.label }}</h3>\n  }\n\n  <div *ngIf=\"service.model.type === type.SIMPLE; then simpleFilter; else complexFilter\"></div>\n\n  <ng-template #simpleFilter>\n    <div class=\"smart-filter-editor-expressionsContainer\">\n      <ng-template #simpleFilterFromChild></ng-template>\n      <!-- #simpleFilterFromChild [smartForm]=\"simpleFilterForm\"></smartform> -->\n    </div>\n  </ng-template>\n  <ng-template #complexFilter>\n    <div class=\"smart-filter-editor-uiActionsBar\" *ngIf=\"!service.model?.readOnly\">\n      <smart-ui-action-toolbar\n        [uiActionModels]=\"uiActionModels\"\n        [executor]=\"service\"\n      ></smart-ui-action-toolbar>\n    </div>\n    <div\n      *ngIf=\"\n        service.model?.model?.workplaceList?.filters?.length;\n        then withParameters;\n        else withoutParameters\n      \"\n    ></div>\n    <ng-template #withoutParameters>\n      <div class=\"smart-filter-editor-withoutParametersContainer\">\n        <span class=\"mat-body\"> M\u00E9g nincs megadva param\u00E9ter </span>\n      </div>\n    </ng-template>\n    <ng-template #withParameters>\n      <div class=\"smart-filter-editor-withParametersContainer\">\n        <div\n          class=\"smart-filter-editor-expressionsContainer\"\n          *ngIf=\"service.model?.model?.workplaceList?.filters?.length\"\n          (click)=\"unSelectItems($event)\"\n        >\n          <app-expression-items\n            [items]=\"(service.model?.model?.workplaceList)!.filters\"\n            [service]=\"service\"\n          ></app-expression-items>\n        </div>\n        <div\n          *ngIf=\"\n            !useAdvancedFilter ||\n            service.model?.selectedField?.expressionData?.currentOperation === 'EXPRESSION'\n          \"\n          class=\"smart-filter-editor-expressionEditorContainer\"\n        >\n          <!-- <smartform #form [smartForm]=\"smartForm\"></smartform> -->\n          <ng-template #form></ng-template>\n          <div *ngIf=\"smartForm\">\n            <button (click)=\"remove()\" mat-raised-button color=\"primary\">T\u00F6rl\u00E9s</button>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n</div>\n", styles: [".smart-filter-editor-container{display:flex;flex-direction:column;overflow:auto;position:relative}.targetGroupContentContainer h3{margin:0;font-weight:600}.smart-filter-editor-uiActionsBar{padding:1.5rem;border-radius:.25rem;background-color:var(--container-color);display:flex;flex-direction:row;gap:1rem}.smart-filter-editor-withoutParametersContainer{display:flex;flex-direction:column;background-color:var(--container-color)}.withoutParametersContainer .mat-body{font-weight:600;text-align:center}.smart-filter-editor-withParametersContainer{display:flex;flex-direction:column;background-color:var(--container-color)}.smart-filter-editor-expressionEditorContainer{display:flex;flex-direction:column;gap:.75rem}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: SmartFilterExpressionItemsComponent, selector: "app-expression-items", inputs: ["items", "service"] }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartFilterEditorContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-filter-expression-editor', imports: [NgIf, UiActionToolbarComponent, SmartFilterExpressionItemsComponent, MatButton], template: "<div class=\"smart-filter-editor-container\" *ngIf=\"service.model\">\n  @if (service.model.model?.label) {\n    <h3 class=\"smart-filter-editor-title\">{{ service.model.model?.label }}</h3>\n  }\n\n  <div *ngIf=\"service.model?.type === type.SIMPLE; then simpleFilter; else complexFilter\"></div>\n\n  <ng-template #simpleFilter>\n    <div class=\"smart-filter-editor-expressionsContainer\">\n      <ng-template #simpleFilterFromChild></ng-template>\n      <!-- #simpleFilterFromChild [smartForm]=\"simpleFilterForm\"></smartform> -->\n    </div>\n  </ng-template>\n  <ng-template #complexFilter>\n    <div class=\"smart-filter-editor-uiActionsBar\" *ngIf=\"!service.model?.readOnly\">\n      <smart-ui-action-toolbar\n        [uiActionModels]=\"uiActionModels\"\n        [executor]=\"service\"\n      ></smart-ui-action-toolbar>\n    </div>\n    <div\n      *ngIf=\"\n        service?.model?.model?.workplaceList?.filters?.length;\n        then withParameters;\n        else withoutParameters\n      \"\n    ></div>\n    <ng-template #withoutParameters>\n      <div class=\"smart-filter-editor-withoutParametersContainer\">\n        <span class=\"mat-body\"> M\u00E9g nincs megadva param\u00E9ter </span>\n      </div>\n    </ng-template>\n    <ng-template #withParameters>\n      <div class=\"smart-filter-editor-withParametersContainer\">\n        <div\n          class=\"smart-filter-editor-expressionsContainer\"\n          *ngIf=\"service?.model?.model?.workplaceList?.filters?.length\"\n        >\n          <app-expression-items\n            [items]=\"(service.model.model?.workplaceList)!.filters\"\n            [service]=\"service\"\n          ></app-expression-items>\n        </div>\n        <div class=\"smart-filter-editor-expressionEditorContainer\">\n          <!-- <smartform #form [smartForm]=\"smartForm\"></smartform> -->\n          <ng-template #form></ng-template>\n          <div *ngIf=\"smartForm\">\n            <button (click)=\"remove()\" mat-raised-button color=\"primary\">T\u00F6rl\u00E9s</button>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n</div>\n", styles: [".smart-filter-editor-container{display:flex;flex-direction:column;overflow:auto;position:relative}.targetGroupContentContainer h3{margin:0;font-weight:600}.smart-filter-editor-uiActionsBar{padding:1.5rem;border-radius:.25rem;background-color:var(--container-color);display:flex;flex-direction:row;gap:1rem}.smart-filter-editor-withoutParametersContainer{display:flex;flex-direction:column;background-color:var(--container-color)}.withoutParametersContainer .mat-body{font-weight:600;text-align:center}.smart-filter-editor-withParametersContainer{display:flex;flex-direction:column;background-color:var(--container-color)}.smart-filter-editor-expressionEditorContainer{display:flex;flex-direction:column;gap:.75rem}\n"] }]
+            args: [{ selector: 'smart-filter-expression-editor', imports: [NgIf, UiActionToolbarComponent, SmartFilterExpressionItemsComponent, MatButton], template: "<div class=\"smart-filter-editor-container\" *ngIf=\"service.model\">\n  @if (service.model.model?.label) {\n    <h3 class=\"smart-filter-editor-title\">{{ service.model.model?.label }}</h3>\n  }\n\n  <div *ngIf=\"service.model.type === type.SIMPLE; then simpleFilter; else complexFilter\"></div>\n\n  <ng-template #simpleFilter>\n    <div class=\"smart-filter-editor-expressionsContainer\">\n      <ng-template #simpleFilterFromChild></ng-template>\n      <!-- #simpleFilterFromChild [smartForm]=\"simpleFilterForm\"></smartform> -->\n    </div>\n  </ng-template>\n  <ng-template #complexFilter>\n    <div class=\"smart-filter-editor-uiActionsBar\" *ngIf=\"!service.model?.readOnly\">\n      <smart-ui-action-toolbar\n        [uiActionModels]=\"uiActionModels\"\n        [executor]=\"service\"\n      ></smart-ui-action-toolbar>\n    </div>\n    <div\n      *ngIf=\"\n        service.model?.model?.workplaceList?.filters?.length;\n        then withParameters;\n        else withoutParameters\n      \"\n    ></div>\n    <ng-template #withoutParameters>\n      <div class=\"smart-filter-editor-withoutParametersContainer\">\n        <span class=\"mat-body\"> M\u00E9g nincs megadva param\u00E9ter </span>\n      </div>\n    </ng-template>\n    <ng-template #withParameters>\n      <div class=\"smart-filter-editor-withParametersContainer\">\n        <div\n          class=\"smart-filter-editor-expressionsContainer\"\n          *ngIf=\"service.model?.model?.workplaceList?.filters?.length\"\n          (click)=\"unSelectItems($event)\"\n        >\n          <app-expression-items\n            [items]=\"(service.model?.model?.workplaceList)!.filters\"\n            [service]=\"service\"\n          ></app-expression-items>\n        </div>\n        <div\n          *ngIf=\"\n            !useAdvancedFilter ||\n            service.model?.selectedField?.expressionData?.currentOperation === 'EXPRESSION'\n          \"\n          class=\"smart-filter-editor-expressionEditorContainer\"\n        >\n          <!-- <smartform #form [smartForm]=\"smartForm\"></smartform> -->\n          <ng-template #form></ng-template>\n          <div *ngIf=\"smartForm\">\n            <button (click)=\"remove()\" mat-raised-button color=\"primary\">T\u00F6rl\u00E9s</button>\n          </div>\n        </div>\n      </div>\n    </ng-template>\n  </ng-template>\n</div>\n", styles: [".smart-filter-editor-container{display:flex;flex-direction:column;overflow:auto;position:relative}.targetGroupContentContainer h3{margin:0;font-weight:600}.smart-filter-editor-uiActionsBar{padding:1.5rem;border-radius:.25rem;background-color:var(--container-color);display:flex;flex-direction:row;gap:1rem}.smart-filter-editor-withoutParametersContainer{display:flex;flex-direction:column;background-color:var(--container-color)}.withoutParametersContainer .mat-body{font-weight:600;text-align:center}.smart-filter-editor-withParametersContainer{display:flex;flex-direction:column;background-color:var(--container-color)}.smart-filter-editor-expressionEditorContainer{display:flex;flex-direction:column;gap:.75rem}\n"] }]
         }], ctorParameters: () => [], propDecorators: { service: [{
                 type: Input
             }], vcRef: [{
@@ -22125,6 +22379,13 @@ class SearchPageComponent extends SmartComponent {
         /** Written from `dataChanged`, so a signal. */
         this.layoutState = signal(undefined, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "layoutState" }] : /* istanbul ignore next */ []));
+        /**
+         * The page's own layout, handed to the grid so that the row layouts of a card grid never
+         * look like the root of an embedded-view tree (#28870). A signal query: the template binds
+         * it, and the layout is only rendered once the model arrives.
+         */
+        this.layoutComponent = viewChild(SmartComponentLayoutComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "layoutComponent" }] : /* istanbul ignore next */ []));
         this.setupGrid();
         this.sendModelOnWidgetAction = true;
         // uuid is set in onUuidResolved — it is not known at construction for
@@ -22164,17 +22425,19 @@ class SearchPageComponent extends SmartComponent {
             options: {
                 rowUiActionType: GridUiActionType.POPUP_MENU,
             },
+            // Card grids render the row's own layout with this class (see SmartGridCardComponent).
+            layoutComponent: SmartComponentLayoutComponent,
         };
     }
     isShowNoResultText() {
         return this.data?.noResultText !== undefined && this.data?.noResultText !== null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SearchPageComponent, deps: [{ token: i0.Injector }, { token: SmartFilterEditorService }, { token: SMART_SEARCH_PAGE_NAME }, { token: SMART_SEARCH_COMPONENT_NAME }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SearchPageComponent, isStandalone: true, selector: "search-page", providers: [SmartFilterEditorService], viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"searchPageContainer\" [ngClass]=\"$safeNavigationMigration(data?.cssClassOfPage)\">\n  <h1 class=\"search-page-title\"> {{ data?.pageTitle }} </h1>\n  <!-- <div class=\"filterContainer\">\n  <smart-filter [filter]=\"filter\"></smart-filter>\n</div> -->\n<smart-ui-action-toolbar [uiActionModels]=\"uiActionModels\"></smart-ui-action-toolbar>\n@if (filterService.model) {\n  <div class=\"filter-editor-container\">\n    <smart-filter-group-params [service]=\"filterService\"></smart-filter-group-params>\n    <smart-filter-expression-editor [service]=\"filterService\"></smart-filter-expression-editor>\n  </div>\n}\n@if (layout) {\n  <smart-component-layout\n    [smartComponentLayout]=\"layout\"\n  ></smart-component-layout>\n}\n<div class=\"gridContainer\">\n  @if (isShowNoResultText()) {\n    <h2 class=\"noResultText\">\n      {{ data?.noResultText }}\n    </h2>\n  }\n  @if (!isShowNoResultText()) {\n    <smart-grid\n      #grid\n      [smartGrid]=\"smartGrid\"\n      [uuid]=\"uuid!\"\n    ></smart-grid>\n  }\n</div>\n</div>\n", styles: [".searchPageContainer{display:flex;flex-direction:column;gap:1.5rem}.filterContainer{display:flex;flex-direction:row;gap:1rem}.gridContainer{flex-grow:1}.filter-editor-container{display:flex;flex-direction:row}.noResultText{width:100%;text-align:center;padding-top:2rem;padding-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: SmartFilterParamsComponent, selector: "smart-filter-group-params", inputs: ["service"] }, { kind: "component", type: SmartFilterEditorContentComponent, selector: "smart-filter-expression-editor", inputs: ["service"] }, { kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "gridRow"] }, { kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "parentLayoutComponent", "dev"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SearchPageComponent, isStandalone: true, selector: "search-page", providers: [SmartFilterEditorService], viewQueries: [{ propertyName: "layoutComponent", first: true, predicate: SmartComponentLayoutComponent, descendants: true, isSignal: true }, { propertyName: "grid", first: true, predicate: ["grid"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"searchPageContainer\" [ngClass]=\"$safeNavigationMigration(data?.cssClassOfPage)\">\n  @if (data?.showTitle) {\n    <h1 class=\"search-page-title\"> {{ data?.pageTitle }} </h1>\n  }\n  <!-- <div class=\"filterContainer\">\n  <smart-filter [filter]=\"filter\"></smart-filter>\n</div> -->\n@if (data?.showToolbar) {\n  <smart-ui-action-toolbar [uiActionModels]=\"uiActionModels\"></smart-ui-action-toolbar>\n}\n@if (data?.showFilter && filterService.model) {\n  <div class=\"filter-editor-container\">\n    <smart-filter-group-params [service]=\"filterService\"></smart-filter-group-params>\n    <smart-filter-expression-editor [service]=\"filterService\"></smart-filter-expression-editor>\n  </div>\n}\n@if (data?.showLayout && layout) {\n  <smart-component-layout\n    [smartComponentLayout]=\"layout\"\n  ></smart-component-layout>\n}\n@if (data?.showGrid) {\n  <div class=\"gridContainer\">\n    @if (isShowNoResultText()) {\n      <h2 class=\"noResultText\">\n        {{ data?.noResultText }}\n      </h2>\n    }\n    @if (!isShowNoResultText()) {\n      <smart-grid\n        #grid\n        [smartGrid]=\"smartGrid\"\n        [uuid]=\"uuid!\"\n        [parentLayoutComponent]=\"layoutComponent()\"\n      ></smart-grid>\n    }\n  </div>\n}\n</div>\n", styles: [".searchPageContainer{display:flex;flex-direction:column;gap:1.5rem}.filterContainer{display:flex;flex-direction:row;gap:1rem}.gridContainer{flex-grow:1}.filter-editor-container{display:flex;flex-direction:row}.noResultText{width:100%;text-align:center;padding-top:2rem;padding-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"] }, { kind: "component", type: SmartFilterParamsComponent, selector: "smart-filter-group-params", inputs: ["service"] }, { kind: "component", type: SmartFilterEditorContentComponent, selector: "smart-filter-expression-editor", inputs: ["service"] }, { kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "gridRow"] }, { kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "parentLayoutComponent", "dev"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SearchPageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'search-page', providers: [SmartFilterEditorService], imports: [NgClass, UiActionToolbarComponent, SmartFilterParamsComponent, SmartFilterEditorContentComponent, SmartComponentLayoutComponent, SmartGridComponent], template: "<div class=\"searchPageContainer\" [ngClass]=\"$safeNavigationMigration(data?.cssClassOfPage)\">\n  <h1 class=\"search-page-title\"> {{ data?.pageTitle }} </h1>\n  <!-- <div class=\"filterContainer\">\n  <smart-filter [filter]=\"filter\"></smart-filter>\n</div> -->\n<smart-ui-action-toolbar [uiActionModels]=\"uiActionModels\"></smart-ui-action-toolbar>\n@if (filterService.model) {\n  <div class=\"filter-editor-container\">\n    <smart-filter-group-params [service]=\"filterService\"></smart-filter-group-params>\n    <smart-filter-expression-editor [service]=\"filterService\"></smart-filter-expression-editor>\n  </div>\n}\n@if (layout) {\n  <smart-component-layout\n    [smartComponentLayout]=\"layout\"\n  ></smart-component-layout>\n}\n<div class=\"gridContainer\">\n  @if (isShowNoResultText()) {\n    <h2 class=\"noResultText\">\n      {{ data?.noResultText }}\n    </h2>\n  }\n  @if (!isShowNoResultText()) {\n    <smart-grid\n      #grid\n      [smartGrid]=\"smartGrid\"\n      [uuid]=\"uuid!\"\n    ></smart-grid>\n  }\n</div>\n</div>\n", styles: [".searchPageContainer{display:flex;flex-direction:column;gap:1.5rem}.filterContainer{display:flex;flex-direction:row;gap:1rem}.gridContainer{flex-grow:1}.filter-editor-container{display:flex;flex-direction:row}.noResultText{width:100%;text-align:center;padding-top:2rem;padding-bottom:2rem}\n"] }]
+            args: [{ selector: 'search-page', providers: [SmartFilterEditorService], imports: [NgClass, UiActionToolbarComponent, SmartFilterParamsComponent, SmartFilterEditorContentComponent, SmartComponentLayoutComponent, SmartGridComponent], template: "<div class=\"searchPageContainer\" [ngClass]=\"$safeNavigationMigration(data?.cssClassOfPage)\">\n  @if (data?.showTitle) {\n    <h1 class=\"search-page-title\"> {{ data?.pageTitle }} </h1>\n  }\n  <!-- <div class=\"filterContainer\">\n  <smart-filter [filter]=\"filter\"></smart-filter>\n</div> -->\n@if (data?.showToolbar) {\n  <smart-ui-action-toolbar [uiActionModels]=\"uiActionModels\"></smart-ui-action-toolbar>\n}\n@if (data?.showFilter && filterService.model) {\n  <div class=\"filter-editor-container\">\n    <smart-filter-group-params [service]=\"filterService\"></smart-filter-group-params>\n    <smart-filter-expression-editor [service]=\"filterService\"></smart-filter-expression-editor>\n  </div>\n}\n@if (data?.showLayout && layout) {\n  <smart-component-layout\n    [smartComponentLayout]=\"layout\"\n  ></smart-component-layout>\n}\n@if (data?.showGrid) {\n  <div class=\"gridContainer\">\n    @if (isShowNoResultText()) {\n      <h2 class=\"noResultText\">\n        {{ data?.noResultText }}\n      </h2>\n    }\n    @if (!isShowNoResultText()) {\n      <smart-grid\n        #grid\n        [smartGrid]=\"smartGrid\"\n        [uuid]=\"uuid!\"\n        [parentLayoutComponent]=\"layoutComponent()\"\n      ></smart-grid>\n    }\n  </div>\n}\n</div>\n", styles: [".searchPageContainer{display:flex;flex-direction:column;gap:1.5rem}.filterContainer{display:flex;flex-direction:row;gap:1rem}.gridContainer{flex-grow:1}.filter-editor-container{display:flex;flex-direction:row}.noResultText{width:100%;text-align:center;padding-top:2rem;padding-bottom:2rem}\n"] }]
         }], ctorParameters: () => [{ type: i0.Injector }, { type: SmartFilterEditorService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [SMART_SEARCH_PAGE_NAME]
@@ -22184,7 +22447,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                 }] }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { grid: [{
                 type: ViewChild,
                 args: ['grid']
-            }] } });
+            }], layoutComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SmartComponentLayoutComponent), { isSignal: true }] }] } });
 
 class UiActionFileUploadDialogComponent {
     constructor() {
@@ -23129,5 +23392,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ACLEntry, APIS$5 as APIS, AclEditingViewComponent, ApiQueueService, BASE_PATH$7 as BASE_PATH, COLLECTION_FORMATS$7 as COLLECTION_FORMATS, CUSTOM_DIAGRAM_OPTIONS, CloseResult, ComponentFactoryService, ComponentType, ComponentWidgetType, Configuration$7 as Configuration, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultChartOptionsProvider, DefaultUiActionCode_CLOSE, DrawTime, EMPTY_PARAMS, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, FilterExpressionBoolOperator$1 as FilterExpressionBoolOperator, FilterExpressionBuilderGroupBuilderGroupKindEnum, FilterExpressionBuilderUiModelTypeEnum, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderByOrderEnum, GenericPageComponent, GeoMapDataLoadingMode, GeoMapDataSourceType, GeoMapItemKind, GeoMapOperationMode, GeoMapSelectionMode, GeoMapTextType, GridColumnContentType, GridDataAccessConfigKindEnum, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptorKindEnum, HighlightPipe, IS_ASYNC_PARAM_NAME, IconPosition, ImageResourceKindEnum, InvalidSmartlinkComponent, LayoutDirection, LinkTargetEnum, MAP_ENGINE, MapEngine, MenuOpenDirection, MenuTriggerType, MessageOptionType, MessageTextType, MessageType, NAMED_VALIDATOR, NamedValidatorOperationEnum, NamedValidatorService, NoPermissionPageComponent, REUSE_ROUTER_SLOT_COMPONENT, ROOT_CONTAINER_UUID, ROUTER_SLOT_ID, RecordingUploaderPropertiesOpenDirectionEnum, SMART_DATE_FORMATS, SMART_DEFAULT_VIEW_COMPONENTS, SMART_NG_CLIENT_CONFIG, SearchPageComponent, SelectionDefinitionTypeEnum, SelectionDefinitionValueSetValueTypeEnum, ServerRequestType, SessionAPIS, SessionErrorBehaviour, SessionService, SmartActionHost, SmartActionType, SmartBackendBootstrapService, SmartComponent, SmartComponentApiClient, SmartComponentDetachedDirective, SmartComponentHost, SmartComponentLayoutComponent, SmartDateFnsAdapter, SmartDatePipe, SmartDateTimePipe, SmartDefaultErrorUiService, SmartDiagramComponent, SmartDialog, SmartEmbeddedSlotDirective, SmartExpandableSectionService, SmartFileEditorComponent, SmartFilterComponent, SmartFilterEditorContentComponent, SmartFilterEditorService, SmartFilterExpressionFieldComponent, SmartFilterPosition, SmartFilterType, SmartFormInputMode, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridService, SmartGridType, SmartIconComponent, SmartIconService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkMigrationStatusStatusEnum, SmartLinkUuidVariableInPath, SmartMapComponent, SmartMultiFileEditorComponent, SmartNavbarComponent, SmartNavbarService, SmartNavigationService, SmartNgClientFeatureKind, SmartService, SmartSessionService, SmartSessionTimerComponent, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTooltipDirective, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidatorName, SmartViewContextService, SmartViewRedirect, SmartVoiceRecorderComponent, SmartWidgetHintPosition, SmartWidgetHintPositionEnum, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmarttreeGenericService, SmarttreeService, SubjectSelectorComponent, ThemeService, ToggleLabelPosition, ToolbarAlignment, ToolbarDirection, TreeArrowPosition, UiActionButtonComponent, UiActionButtonType, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogButtonComponent, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, UiActionTooltipTooltipPositionEnum, UiBadgeComponent, UiBadgeDirective, UploadWidgetType, ValidationResultPageComponent, ValueChangeMode, ViewContextRebuiltError, ViewEventHandlerViewEventTypeEnum, ViewService, ViewState, ViewType, barChart, bubbleChart, createBasicOptions, doughnutChart, horizontalBarChart, horizontalStackedBarChart, injectSmartComponent, multiAxisLineChart, pieChart, polarAreaChart, provideSmartNgClient, radarChart, registerSmartWidget, resolveDateLocale, resolveSlot, resolveSmartNgClientConfig, resolveViewHandler, scatterChart, stackedBarChart, transformDataToBarLikeDataSet, transformDataToBasicDataSets, transformDataToBubble, transformDataToScatter, withSmartDiagram, withSmartMap };
+export { ACLEntry, APIS$5 as APIS, AclEditingViewComponent, ApiQueueService, BASE_PATH$7 as BASE_PATH, COLLECTION_FORMATS$7 as COLLECTION_FORMATS, CUSTOM_DIAGRAM_OPTIONS, CloseResult, ComponentFactoryService, ComponentType, ComponentWidgetType, Configuration$7 as Configuration, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultChartOptionsProvider, DefaultUiActionCode_CLOSE, DrawTime, EMPTY_PARAMS, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, FilterExpressionBoolOperator$1 as FilterExpressionBoolOperator, FilterExpressionBuilderGroupBuilderGroupKindEnum, FilterExpressionBuilderUiModelTypeEnum, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderByOrderEnum, GenericPageComponent, GeoMapDataLoadingMode, GeoMapDataSourceType, GeoMapItemKind, GeoMapOperationMode, GeoMapSelectionMode, GeoMapTextType, GridColumnContentType, GridDataAccessConfigKindEnum, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptorKindEnum, HighlightPipe, IS_ASYNC_PARAM_NAME, IconPosition, ImageResourceKindEnum, InvalidSmartlinkComponent, LayoutDirection, LinkTargetEnum, MAP_ENGINE, MapEngine, MenuOpenDirection, MenuTriggerType, MessageOptionType, MessageTextType, MessageType, NAMED_VALIDATOR, NamedValidatorOperationEnum, NamedValidatorService, NoPermissionPageComponent, REUSE_ROUTER_SLOT_COMPONENT, ROOT_CONTAINER_UUID, ROUTER_SLOT_ID, RecordingUploaderPropertiesOpenDirectionEnum, SMART_DATE_FORMATS, SMART_DEFAULT_VIEW_COMPONENTS, SMART_NG_CLIENT_CONFIG, SearchPageComponent, SelectionDefinitionTypeEnum, SelectionDefinitionValueSetValueTypeEnum, ServerRequestType, SessionAPIS, SessionErrorBehaviour, SessionService, SmartActionHost, SmartActionType, SmartBackendBootstrapService, SmartComponent, SmartComponentApiClient, SmartComponentDetachedDirective, SmartComponentHost, SmartComponentLayoutComponent, SmartDateFnsAdapter, SmartDatePipe, SmartDateTimePipe, SmartDefaultErrorUiService, SmartDiagramComponent, SmartDialog, SmartEmbeddedSlotDirective, SmartExpandableSectionService, SmartFileEditorComponent, SmartFilterComponent, SmartFilterEditorContentComponent, SmartFilterEditorService, SmartFilterExpressionFieldComponent, SmartFilterPosition, SmartFilterType, SmartFormInputMode, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridService, SmartGridType, SmartIconComponent, SmartIconService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkMigrationStatusStatusEnum, SmartLinkUuidVariableInPath, SmartMapComponent, SmartMultiFileEditorComponent, SmartNavbarComponent, SmartNavbarService, SmartNavigationService, SmartNgClientFeatureKind, SmartService, SmartSessionService, SmartSessionTimerComponent, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTooltipDirective, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidatorName, SmartViewContextService, SmartViewRedirect, SmartVoiceRecorderComponent, SmartWidgetHintPosition, SmartWidgetHintPositionEnum, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmarttreeGenericService, SmarttreeService, SubjectSelectorComponent, ThemeService, ToggleLabelPosition, ToolbarAlignment, ToolbarDirection, TreeArrowPosition, USE_ADVANCED_FILTER, UiActionButtonComponent, UiActionButtonType, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogButtonComponent, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, UiActionTooltipTooltipPositionEnum, UiBadgeComponent, UiBadgeDirective, UploadWidgetType, ValidationResultPageComponent, ValueChangeMode, ViewContextRebuiltError, ViewEventHandlerViewEventTypeEnum, ViewService, ViewState, ViewType, barChart, bubbleChart, createBasicOptions, doughnutChart, horizontalBarChart, horizontalStackedBarChart, injectSmartComponent, multiAxisLineChart, pieChart, polarAreaChart, provideSmartNgClient, radarChart, registerSmartWidget, resolveDateLocale, resolveSlot, resolveSmartNgClientConfig, resolveViewHandler, scatterChart, stackedBarChart, transformDataToBarLikeDataSet, transformDataToBasicDataSets, transformDataToBubble, transformDataToScatter, withSmartDiagram, withSmartMap };
 //# sourceMappingURL=smartbit4all-ng-client.mjs.map