@smartbit4all/ng-client 7.0.0 → 7.0.1

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, 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';
@@ -8236,6 +8236,7 @@ class UiActionToolbarComponent {
     }
     async onActionClicked(event, entry) {
         // event.stopPropagation();
+        this.menuService.closeAllMenus();
         if (entry.model.uiAction.disabled) {
             return;
         }
@@ -8322,11 +8323,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 }]
@@ -12433,7 +12434,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 +12498,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 +18343,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: [{
@@ -21008,7 +21041,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,
@@ -21179,11 +21212,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 +21732,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 +21761,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 +21776,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 +21789,7 @@ class SmartFilterExpressionItemComponent {
                 });
             }
             else {
-                service.peformWidgetAction({
+                await service.peformWidgetAction({
                     code: 'SELECT_FIELD',
                     params: {
                         model: this.item,
@@ -21785,23 +21819,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 +21910,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 +22013,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 +22058,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 +22116,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 +22193,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 +22274,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: [{
@@ -23129,5 +23317,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