@planeasyinc/le-angular 0.0.1 → 0.0.3

package/dist/fesm2022/planeasyinc-le-angular.mjs

@@ -1,7 +1,7 @@
 import * as i0 from '@angular/core';
 import { InjectionToken, inject, signal, Injectable, computed, Directive, input, ChangeDetectionStrategy, Component, output, forwardRef, effect, untracked, ViewContainerRef, Renderer2, ElementRef, DestroyRef, viewChild } from '@angular/core';
 import { HttpContextToken, HttpClient, HttpContext, HttpRequest, HttpEventType } from '@angular/common/http';
-import { map, filter, distinctUntilChanged, BehaviorSubject, Subject, firstValueFrom, of, tap, catchError, from, concatMap, finalize } from 'rxjs';
+import { map, filter, distinctUntilChanged, BehaviorSubject, Subject, firstValueFrom, of, tap, catchError, from, concatMap, finalize, fromEvent, takeUntil, startWith } from 'rxjs';
 import { decodeJwt, UrlFragmentBuilder, normalizeConfig } from '@planeasyinc/le-core';
 import { CdkDrag } from '@angular/cdk/drag-drop';
 import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
@@ -16,7 +16,10 @@ import { adaptSections } from '@planeasyinc/fe-adapters-sections';
 import { createEngine } from '@planeasyinc/fe-core';
 import { FeFieldHost } from '@planeasyinc/fe-angular';
 import { Overlay } from '@angular/cdk/overlay';
-import { ComponentPortal } from '@angular/cdk/portal';
+import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
+import { SelectionModel } from '@angular/cdk/collections';
+import * as i1 from '@angular/forms';
+import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 
 const IS_LIBRARY_REQUEST = new HttpContextToken(() => false);
 
@@ -220,6 +223,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
             type: Injectable
         }] });
 
+class LEFiltersService {
+    _shown = signal(false);
+    _options = signal([], {
+        equal: (a, b) => this.isEqual(a, b),
+    });
+    _selection = signal({}, {
+        equal: (a, b) => this.isEqual(a, b),
+    });
+    shown = this._shown.asReadonly();
+    options = this._options.asReadonly();
+    selection = this._selection.asReadonly();
+    open() {
+        this._shown.set(true);
+    }
+    close() {
+        this._shown.set(false);
+    }
+    updateSelection(value) {
+        this._selection.set(this.filterValues(value));
+    }
+    setOptions(options) {
+        this._options.set(options);
+    }
+    filterValues(value) {
+        const clone = Object.assign({}, value);
+        for (const key in clone) {
+            if (!clone[key]) {
+                delete clone[key];
+            }
+        }
+        return clone;
+    }
+    isEqual(a, b) {
+        return JSON.stringify(a) === JSON.stringify(b);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LEFiltersService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LEFiltersService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LEFiltersService, decorators: [{
+            type: Injectable
+        }] });
+
 class DrawerContentDirective {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: DrawerContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: DrawerContentDirective, isStandalone: true, selector: "[leDrawerContent]", host: { properties: { "class.le-drawer-content": "true" } }, ngImport: i0 });
@@ -254,6 +299,7 @@ class LeDrawerDirective {
     opened = input(false);
     width = input(DRAWER_OPENED_WIDTH);
     hideOnClose = input(false);
+    type = input('side');
     _width = computed(() => {
         if (this.opened()) {
             return this.width();
@@ -263,8 +309,11 @@ class LeDrawerDirective {
         }
         return DRAWER_CLOSED_WIDTH;
     });
+    _position = computed(() => {
+        return this.type() === 'over' ? 'absolute' : 'relative';
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeDrawerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: LeDrawerDirective, isStandalone: true, selector: "[leDrawer]", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hideOnClose: { classPropertyName: "hideOnClose", publicName: "hideOnClose", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.le-drawer": "true", "class.le-drawer--open": "opened()", "style.width.px": "_width()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.2.21", type: LeDrawerDirective, isStandalone: true, selector: "[leDrawer]", inputs: { opened: { classPropertyName: "opened", publicName: "opened", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, hideOnClose: { classPropertyName: "hideOnClose", publicName: "hideOnClose", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.le-drawer": "true", "class.le-drawer--open": "opened()", "style.width.px": "_width()", "style.position": "_position()", "style.min-height": "\"100%\"", "style.left": "0", "style.top": "0" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeDrawerDirective, decorators: [{
             type: Directive,
@@ -273,7 +322,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                     host: {
                         '[class.le-drawer]': 'true',
                         '[class.le-drawer--open]': 'opened()',
-                        '[style.width.px]': '_width()'
+                        '[style.width.px]': '_width()',
+                        '[style.position]': '_position()',
+                        '[style.min-height]': '"100%"',
+                        '[style.left]': '0',
+                        '[style.top]': '0',
                     },
                 }]
         }] });
@@ -302,21 +355,32 @@ const sort = {
     ]
 };
 
+const close = {
+    name: 'close',
+    viewBox: '0 -960 960 960',
+    content: [
+        'm256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z',
+    ],
+};
+
 const ICONS_MAP = {
-    'chevron': chevron,
+    chevron: chevron,
     'arrow-down': arrowDown,
-    'sort': sort
+    sort: sort,
+    close: close,
 };
 
 class LeIconComponent {
     name = input.required();
     size = input(24);
-    icon = computed(() => ({
-        ...ICONS_MAP[this.name()],
-        size: coerceNumberProperty(this.size()),
-    }));
+    icon = computed(() => {
+        return {
+            ...ICONS_MAP[this.name()],
+            size: coerceNumberProperty(this.size()),
+        };
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: LeIconComponent, isStandalone: true, selector: "le-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width.px": "size()", "style.height.px": "size()", "style.display": "\"block\"" } }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: LeIconComponent, isStandalone: true, selector: "le-icon", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width.px": "size()", "style.height.px": "size()", "style.display": "\"flex\"" } }, ngImport: i0, template: `
     @if (icon(); as icon) {
       <svg
         [attr.viewBox]="icon.viewBox"
@@ -353,7 +417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                     host: {
                         '[style.width.px]': 'size()',
                         '[style.height.px]': 'size()',
-                        '[style.display]': '"block"',
+                        '[style.display]': '"flex"',
                     }
                 }]
         }] });
@@ -424,7 +488,7 @@ class SidebarComponent {
         element.style.transform = 'none';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SidebarComponent, isStandalone: true, selector: "le-sidebar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<div leDrawerContainer>\n  <aside leDrawer [opened]=\"isDrawerOpen()\" [width]=\"width()\" [hideOnClose]=\"isSmallScreen()\">\n    <h3 class=\"le-sidebar-title\">\n      <button\n        class=\"le-sidebar-toggle\"\n        (click)=\"onDrawerToggleClick($event)\"\n        (keydown.enter)=\"onDrawerToggleClick($event)\"\n      >\n        @if (isDrawerOpen()) {\n          {{ config().title }}\n        }\n\n        <le-icon name=\"chevron\"></le-icon>\n      </button>\n    </h3>\n\n    @if (isDrawerOpen()) {\n      <menu>\n        @for (item of menu(); track item) {\n          @if (isSection(item)) {\n            <a\n              class=\"le-menu-item\"\n              tabindex=\"0\"\n              [class.le-menu-item--expanded]=\"expanded().has(item)\"\n              (click)=\"toggleExpanded($event, item)\"\n              (keydown.enter)=\"toggleExpanded($event, item)\"\n            >\n              <div class=\"le-menu-title\">\n                {{ item.title }}\n              </div>\n\n              <le-icon class=\"le-menu-chevron\" name=\"chevron\"></le-icon>\n            </a>\n\n            <div class=\"le-menu-group\" [class.le-menu-group--expanded]=\"expanded().has(item)\">\n              @for (child of item.children; track child) {\n                <a\n                  [tabindex]=\"expanded().has(item) ? 0 : -1\"\n                  class=\"le-menu-item\"\n                  [class.le-menu-item--selected]=\"view().id === child.id\"\n                  (click)=\"onSidebarItemClick($event, child)\"\n                  (keydown.enter)=\"onSidebarItemClick($event, child)\"\n                >\n                  <div class=\"le-menu-title\">\n                    {{ child.title }}\n                  </div>\n                </a>\n              }\n            </div>\n          } @else {\n            <a\n              tabindex=\"0\"\n              class=\"le-menu-item\"\n              [class.le-menu-item--selected]=\"view().id === item.id\"\n              (click)=\"onSidebarItemClick($event, item)\"\n              (keydown.enter)=\"onSidebarItemClick($event, item)\"\n            >\n              <div class=\"le-menu-title\">\n                {{ item.title }}\n              </div>\n            </a>\n          }\n        }\n      </menu>\n\n      <div class=\"le-drawer-resizer\" cdkDrag (cdkDragMoved)=\"onDragMoved($event)\">\n        <span class=\"le-drag-icon\">\u283F</span>\n      </div>\n    }\n  </aside>\n\n  <main leDrawerContent>\n    <ng-content></ng-content>\n  </main>\n</div>\n", dependencies: [{ kind: "directive", type: DrawerContentDirective, selector: "[leDrawerContent]" }, { kind: "directive", type: DrawerContainerDirective, selector: "[leDrawerContainer]" }, { kind: "directive", type: LeDrawerDirective, selector: "[leDrawer]", inputs: ["opened", "width", "hideOnClose"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: LeIconComponent, selector: "le-icon", inputs: ["name", "size"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: SidebarComponent, isStandalone: true, selector: "le-sidebar", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, view: { classPropertyName: "view", publicName: "view", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { selectionChange: "selectionChange" }, ngImport: i0, template: "<div leDrawerContainer>\n  <aside leDrawer [opened]=\"isDrawerOpen()\" [width]=\"width()\" [hideOnClose]=\"isSmallScreen()\">\n    <h3 class=\"le-sidebar-title\">\n      <button\n        class=\"le-sidebar-toggle\"\n        (click)=\"onDrawerToggleClick($event)\"\n        (keydown.enter)=\"onDrawerToggleClick($event)\"\n      >\n        @if (isDrawerOpen()) {\n          {{ config().title }}\n        }\n\n        <le-icon name=\"chevron\"></le-icon>\n      </button>\n    </h3>\n\n    @if (isDrawerOpen()) {\n      <menu>\n        @for (item of menu(); track item) {\n          @if (isSection(item)) {\n            <a\n              class=\"le-menu-item\"\n              tabindex=\"0\"\n              [class.le-menu-item--expanded]=\"expanded().has(item)\"\n              (click)=\"toggleExpanded($event, item)\"\n              (keydown.enter)=\"toggleExpanded($event, item)\"\n            >\n              <div class=\"le-menu-title\">\n                {{ item.title }}\n              </div>\n\n              <le-icon class=\"le-menu-chevron\" name=\"chevron\"></le-icon>\n            </a>\n\n            <div class=\"le-menu-group\" [class.le-menu-group--expanded]=\"expanded().has(item)\">\n              @for (child of item.children; track child) {\n                <a\n                  [tabindex]=\"expanded().has(item) ? 0 : -1\"\n                  class=\"le-menu-item\"\n                  [class.le-menu-item--selected]=\"view().id === child.id\"\n                  (click)=\"onSidebarItemClick($event, child)\"\n                  (keydown.enter)=\"onSidebarItemClick($event, child)\"\n                >\n                  <div class=\"le-menu-title\">\n                    {{ child.title }}\n                  </div>\n                </a>\n              }\n            </div>\n          } @else {\n            <a\n              tabindex=\"0\"\n              class=\"le-menu-item\"\n              [class.le-menu-item--selected]=\"view().id === item.id\"\n              (click)=\"onSidebarItemClick($event, item)\"\n              (keydown.enter)=\"onSidebarItemClick($event, item)\"\n            >\n              <div class=\"le-menu-title\">\n                {{ item.title }}\n              </div>\n            </a>\n          }\n        }\n      </menu>\n\n      <div class=\"le-drawer-resizer\" cdkDrag (cdkDragMoved)=\"onDragMoved($event)\">\n        <span class=\"le-drag-icon\">\u283F</span>\n      </div>\n    }\n  </aside>\n\n  <main leDrawerContent>\n    <ng-content></ng-content>\n  </main>\n</div>\n", dependencies: [{ kind: "directive", type: DrawerContentDirective, selector: "[leDrawerContent]" }, { kind: "directive", type: DrawerContainerDirective, selector: "[leDrawerContainer]" }, { kind: "directive", type: LeDrawerDirective, selector: "[leDrawer]", inputs: ["opened", "width", "hideOnClose", "type"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: LeIconComponent, selector: "le-icon", inputs: ["name", "size"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: SidebarComponent, decorators: [{
             type: Component,
@@ -444,11 +508,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 class GridComponent {
     node = input.required();
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: GridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: GridComponent, isStandalone: true, selector: "grid-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\"></le-node>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: GridComponent, isStandalone: true, selector: "grid-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.le-gird-view": "true", "style.grid-template-columns": "node().layout.columns ?? 1" } }, ngImport: i0, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\"></le-node>\n}\n", dependencies: [{ kind: "component", type: i0.forwardRef(() => NodeComponent), selector: "le-node", inputs: ["node"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'grid-view', imports: [forwardRef(() => NodeComponent)], template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\"></le-node>\n}\n" }]
+            args: [{ selector: 'grid-view', imports: [forwardRef(() => NodeComponent)], host: {
+                        '[class.le-gird-view]': 'true',
+                        '[style.grid-template-columns]': 'node().layout.columns ?? 1',
+                    }, template: "@for (child of node().children; track child.id) {\n  <le-node [node]=\"child\"></le-node>\n}\n" }]
         }] });
 
 class TableDataSource extends DataSource {
@@ -776,6 +843,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
 class TableViewComponent {
     apiService = inject(LEApiService);
     dataService = inject(LEDataService);
+    filtersService = inject(LEFiltersService);
     node = input.required();
     _columns = signal([]);
     _data = signal(new TableDataSource());
@@ -809,6 +877,7 @@ class TableViewComponent {
     hasRowClickAction = computed(() => {
         return !!this.node()?.actions?.onRowClick?.length;
     });
+    filters = this.filtersService.options;
     constructor() {
         this.setEffects();
     }
@@ -832,6 +901,10 @@ class TableViewComponent {
             return new Map(sortMap);
         });
     }
+    onFiltersClick(event) {
+        event.stopPropagation();
+        this.filtersService.open();
+    }
     onToolbarActionClick({ actions }) {
         actions.forEach((action) => this.processTableAction(action));
     }
@@ -887,6 +960,7 @@ class TableViewComponent {
         this._data.set(new TableDataSource(response.rows));
         this._total.set(response.total ?? response.rows.length);
         this._isLoading.set(false);
+        this.filtersService.setOptions(this.getFilters(response.columns));
     }
     handleTableDataErrorResponse(error) {
         console.error(error);
@@ -894,6 +968,15 @@ class TableViewComponent {
         this._data.set(new TableDataSource());
         this._total.set(0);
         this._isLoading.set(false);
+        // this.filtersService.setOptions(this.getFilters([]));
+    }
+    getFilters(columns) {
+        return columns.reduce((acc, column) => {
+            if (column.filters) {
+                acc.push(column.filters);
+            }
+            return acc;
+        }, []);
     }
     interpolateRowValues(body, row = {}) {
         const result = {};
@@ -913,22 +996,27 @@ class TableViewComponent {
     setEffects() {
         effect(() => {
             const node = this.node();
-            this.setPagination(node.ui?.pagination);
-            this._sortConfig.set(node?.ui?.sort ?? null);
-            this._sortMap.set(mapSortStringListToSortMap(node?.ui?.sort?.default ?? []));
+            untracked(() => {
+                this.filtersService.updateSelection({});
+                this.filtersService.setOptions([]);
+                this.setPagination(node.ui?.pagination);
+                this._sortConfig.set(node?.ui?.sort ?? null);
+                this._sortMap.set(mapSortStringListToSortMap(node?.ui?.sort?.default ?? []));
+            });
         });
         effect(() => {
             const node = this.node();
             const pageSize = this.pageSize();
             const pageIndex = this.pageIndex();
             const sort = this._sortMap();
+            const filters = this.filtersService.selection();
             untracked(() => {
                 if (node?.dataSource) {
                     const ctx = buildRequestContext({
                         pageSize,
                         pageIndex,
                         sort: mapSortMapToSortStringList(sort),
-                        // filters,
+                        filters,
                     }, {
                         isSortable: this.isSortingEnabled(),
                         hasPagination: !!this.pageSize(),
@@ -949,7 +1037,7 @@ class TableViewComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TableViewComponent, isStandalone: true, selector: "table-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"le-toolbar\">\n  @if (node(); as node) {\n    <h2>{{ node?.title }}</h2>\n\n    @if (node.actions?.tableActions) {\n      <table-view-actions\n        [actions]=\"node.actions!.tableActions\"\n        (actionClicked)=\"onToolbarActionClick($event)\"\n      ></table-view-actions>\n    }\n  }\n</div>\n\n@if (pageSize()) {\n  <table-view-pagination\n    [pageSize]=\"pageSize()\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n    [entriesCount]=\"entriesCount()\"\n    (pageChange)=\"onPageChange($event)\"\n  ></table-view-pagination>\n}\n\n<div class=\"le-table-container\">\n  @if (displayedColumns().length) {\n    <table cdk-table [dataSource]=\"data()\" class=\"le-table\" [class.le-table--loading]=\"isLoading()\">\n      @for (column of columns(); track column) {\n        <ng-container [cdkColumnDef]=\"column.key\">\n          <th\n            class=\"le-table-header-cell\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [tabindex]=\"sortColumnKeys().has(column.key) ? 0 : -1\"\n            [class.le-table-header-cell--sortable]=\"sortColumnKeys().has(column.key)\"\n            (click)=\"sortColumnKeys().has(column.key) && onSortClick($event, column)\"\n          >\n            <div class=\"le-cell-content\">\n              <ng-template\n                tableViewCell\n                [data]=\"column.label\"\n                [type]=\"column.column_format?.headerTemplate\"\n              ></ng-template>\n\n              @if (sortColumnKeys().has(column.key)) {\n                <div class=\"le-sort-container\">\n                  @if (sortMap().has(column.key)) {\n                    <div class=\"le-sort-icon\">\n                      <i\n                        class=\"le-sort-arrow\"\n                        [class.le-sort-arrow--asc]=\"sortMap().get(column.key) === 'asc'\"\n                        [class.le-sort-arrow--desc]=\"sortMap().get(column.key) === 'desc'\"\n                      ></i>\n                    </div>\n\n                    <div class=\"le-sort-order\">\n                      @if (sortOrder().has(column.key)) {\n                        <span>\n                          {{ sortOrder().get(column.key) }}\n                        </span>\n                      }\n                    </div>\n                  } @else {\n<!--                    <div class=\"le-sort-icon le-sort-icon&#45;&#45;unfold\">-->\n<!--                      <span>&#8645;</span>-->\n<!--                    </div>-->\n\n                    <le-icon name=\"sort\" class=\"le-sort-icon le-sort-icon--unfold\"></le-icon>\n                  }\n                </div>\n              }\n            </div>\n          </th>\n\n          <td class=\"le-table-cell\" cdk-cell *cdkCellDef=\"let row\">\n            <ng-template\n              tableViewCell\n              [data]=\"row[column.key]\"\n              [type]=\"column.column_format?.cellTemplate\"\n            ></ng-template>\n          </td>\n        </ng-container>\n      }\n\n      <tr cdk-header-row class=\"le-header-row\" *cdkHeaderRowDef=\"displayedColumns()\"></tr>\n      <tr\n        cdk-row\n        class=\"le-table-row\"\n        [tabindex]=\"0\"\n        [class.le-table-row--clickable]=\"hasRowClickAction()\"\n        *cdkRowDef=\"let row; columns: displayedColumns()\"\n        (click)=\"onRowClick(row)\"\n      ></tr>\n    </table>\n  }\n</div>\n\n@if (data().count === 0) {\n  @if (isLoading()) {\n    <app-loading-view [headerHeight]=\"65\" [rowCount]=\"pageSize() || 10\"></app-loading-view>\n  } @else {\n    <div class=\"no-entities\">\n      <span>No Entities</span>\n    </div>\n  }\n}\n", dependencies: [{ kind: "component", type: CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "directive", type: CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "component", type: CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "component", type: TableViewPaginationComponent, selector: "table-view-pagination", inputs: ["pageSize", "pageSizeOptions", "entriesCount"], outputs: ["pageChange"] }, { kind: "component", type: LoadingViewComponent, selector: "app-loading-view", inputs: ["headerHeight", "rowHeight", "rowCount"] }, { kind: "component", type: TableViewActions, selector: "table-view-actions", inputs: ["actions"], outputs: ["actionClicked"] }, { kind: "directive", type: TableViewCellDirective, selector: "[tableViewCell]", inputs: ["type", "data"] }, { kind: "component", type: LeIconComponent, selector: "le-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: TableViewComponent, isStandalone: true, selector: "table-view", inputs: { node: { classPropertyName: "node", publicName: "node", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"le-toolbar\">\n  @if (node(); as node) {\n    <h2>{{ node?.title }}</h2>\n\n\n    <span class=\"spacer\"></span>\n\n    @if (filters().length) {\n      <button class=\"le-button\" (click)=\"onFiltersClick($event)\">Filters</button>\n    }\n\n    @if (node.actions?.tableActions) {\n      <table-view-actions\n        [actions]=\"node.actions!.tableActions\"\n        (actionClicked)=\"onToolbarActionClick($event)\"\n      ></table-view-actions>\n    }\n  }\n</div>\n\n@if (pageSize()) {\n  <table-view-pagination\n    [pageSize]=\"pageSize()\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n    [entriesCount]=\"entriesCount()\"\n    (pageChange)=\"onPageChange($event)\"\n  ></table-view-pagination>\n}\n\n<div class=\"le-table-container\">\n  @if (displayedColumns().length) {\n    <table cdk-table [dataSource]=\"data()\" class=\"le-table\" [class.le-table--loading]=\"isLoading()\">\n      @for (column of columns(); track column) {\n        <ng-container [cdkColumnDef]=\"column.key\">\n          <th\n            class=\"le-table-header-cell\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [tabindex]=\"sortColumnKeys().has(column.key) ? 0 : -1\"\n            [class.le-table-header-cell--sortable]=\"sortColumnKeys().has(column.key)\"\n            (click)=\"sortColumnKeys().has(column.key) && onSortClick($event, column)\"\n          >\n            <div class=\"le-cell-content\">\n              <ng-template\n                tableViewCell\n                [data]=\"column.label\"\n                [type]=\"column.column_format?.headerTemplate\"\n              ></ng-template>\n\n              @if (sortColumnKeys().has(column.key)) {\n                <div class=\"le-sort-container\">\n                  @if (sortMap().has(column.key)) {\n                    <div class=\"le-sort-icon\">\n                      <i\n                        class=\"le-sort-arrow\"\n                        [class.le-sort-arrow--asc]=\"sortMap().get(column.key) === 'asc'\"\n                        [class.le-sort-arrow--desc]=\"sortMap().get(column.key) === 'desc'\"\n                      ></i>\n                    </div>\n\n                    <div class=\"le-sort-order\">\n                      @if (sortOrder().has(column.key)) {\n                        <span>\n                          {{ sortOrder().get(column.key) }}\n                        </span>\n                      }\n                    </div>\n                  } @else {\n<!--                    <div class=\"le-sort-icon le-sort-icon&#45;&#45;unfold\">-->\n<!--                      <span>&#8645;</span>-->\n<!--                    </div>-->\n\n                    <le-icon name=\"sort\" class=\"le-sort-icon le-sort-icon--unfold\"></le-icon>\n                  }\n                </div>\n              }\n            </div>\n          </th>\n\n          <td class=\"le-table-cell\" cdk-cell *cdkCellDef=\"let row\">\n            <ng-template\n              tableViewCell\n              [data]=\"row[column.key]\"\n              [type]=\"column.column_format?.cellTemplate\"\n            ></ng-template>\n          </td>\n        </ng-container>\n      }\n\n      <tr cdk-header-row class=\"le-header-row\" *cdkHeaderRowDef=\"displayedColumns()\"></tr>\n      <tr\n        cdk-row\n        class=\"le-table-row\"\n        [tabindex]=\"0\"\n        [class.le-table-row--clickable]=\"hasRowClickAction()\"\n        *cdkRowDef=\"let row; columns: displayedColumns()\"\n        (click)=\"onRowClick(row)\"\n      ></tr>\n    </table>\n  }\n</div>\n\n@if (data().count === 0) {\n  @if (isLoading()) {\n    <app-loading-view [headerHeight]=\"65\" [rowCount]=\"pageSize() || 10\"></app-loading-view>\n  } @else {\n    <div class=\"no-entities\">\n      <span>No Entities</span>\n    </div>\n  }\n}\n", dependencies: [{ kind: "component", type: CdkTable, selector: "cdk-table, table[cdk-table]", inputs: ["trackBy", "dataSource", "multiTemplateDataRows", "fixedLayout"], outputs: ["contentChanged"], exportAs: ["cdkTable"] }, { kind: "directive", type: CdkColumnDef, selector: "[cdkColumnDef]", inputs: ["cdkColumnDef", "sticky", "stickyEnd"] }, { kind: "directive", type: CdkHeaderCell, selector: "cdk-header-cell, th[cdk-header-cell]" }, { kind: "directive", type: CdkHeaderCellDef, selector: "[cdkHeaderCellDef]" }, { kind: "directive", type: CdkCell, selector: "cdk-cell, td[cdk-cell]" }, { kind: "directive", type: CdkCellDef, selector: "[cdkCellDef]" }, { kind: "directive", type: CdkHeaderRowDef, selector: "[cdkHeaderRowDef]", inputs: ["cdkHeaderRowDef", "cdkHeaderRowDefSticky"] }, { kind: "component", type: CdkHeaderRow, selector: "cdk-header-row, tr[cdk-header-row]" }, { kind: "component", type: CdkRow, selector: "cdk-row, tr[cdk-row]" }, { kind: "directive", type: CdkRowDef, selector: "[cdkRowDef]", inputs: ["cdkRowDefColumns", "cdkRowDefWhen"] }, { kind: "component", type: TableViewPaginationComponent, selector: "table-view-pagination", inputs: ["pageSize", "pageSizeOptions", "entriesCount"], outputs: ["pageChange"] }, { kind: "component", type: LoadingViewComponent, selector: "app-loading-view", inputs: ["headerHeight", "rowHeight", "rowCount"] }, { kind: "component", type: TableViewActions, selector: "table-view-actions", inputs: ["actions"], outputs: ["actionClicked"] }, { kind: "directive", type: TableViewCellDirective, selector: "[tableViewCell]", inputs: ["type", "data"] }, { kind: "component", type: LeIconComponent, selector: "le-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: TableViewComponent, decorators: [{
             type: Component,
@@ -969,7 +1057,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         TableViewActions,
                         TableViewCellDirective,
                         LeIconComponent,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"le-toolbar\">\n  @if (node(); as node) {\n    <h2>{{ node?.title }}</h2>\n\n    @if (node.actions?.tableActions) {\n      <table-view-actions\n        [actions]=\"node.actions!.tableActions\"\n        (actionClicked)=\"onToolbarActionClick($event)\"\n      ></table-view-actions>\n    }\n  }\n</div>\n\n@if (pageSize()) {\n  <table-view-pagination\n    [pageSize]=\"pageSize()\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n    [entriesCount]=\"entriesCount()\"\n    (pageChange)=\"onPageChange($event)\"\n  ></table-view-pagination>\n}\n\n<div class=\"le-table-container\">\n  @if (displayedColumns().length) {\n    <table cdk-table [dataSource]=\"data()\" class=\"le-table\" [class.le-table--loading]=\"isLoading()\">\n      @for (column of columns(); track column) {\n        <ng-container [cdkColumnDef]=\"column.key\">\n          <th\n            class=\"le-table-header-cell\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [tabindex]=\"sortColumnKeys().has(column.key) ? 0 : -1\"\n            [class.le-table-header-cell--sortable]=\"sortColumnKeys().has(column.key)\"\n            (click)=\"sortColumnKeys().has(column.key) && onSortClick($event, column)\"\n          >\n            <div class=\"le-cell-content\">\n              <ng-template\n                tableViewCell\n                [data]=\"column.label\"\n                [type]=\"column.column_format?.headerTemplate\"\n              ></ng-template>\n\n              @if (sortColumnKeys().has(column.key)) {\n                <div class=\"le-sort-container\">\n                  @if (sortMap().has(column.key)) {\n                    <div class=\"le-sort-icon\">\n                      <i\n                        class=\"le-sort-arrow\"\n                        [class.le-sort-arrow--asc]=\"sortMap().get(column.key) === 'asc'\"\n                        [class.le-sort-arrow--desc]=\"sortMap().get(column.key) === 'desc'\"\n                      ></i>\n                    </div>\n\n                    <div class=\"le-sort-order\">\n                      @if (sortOrder().has(column.key)) {\n                        <span>\n                          {{ sortOrder().get(column.key) }}\n                        </span>\n                      }\n                    </div>\n                  } @else {\n<!--                    <div class=\"le-sort-icon le-sort-icon&#45;&#45;unfold\">-->\n<!--                      <span>&#8645;</span>-->\n<!--                    </div>-->\n\n                    <le-icon name=\"sort\" class=\"le-sort-icon le-sort-icon--unfold\"></le-icon>\n                  }\n                </div>\n              }\n            </div>\n          </th>\n\n          <td class=\"le-table-cell\" cdk-cell *cdkCellDef=\"let row\">\n            <ng-template\n              tableViewCell\n              [data]=\"row[column.key]\"\n              [type]=\"column.column_format?.cellTemplate\"\n            ></ng-template>\n          </td>\n        </ng-container>\n      }\n\n      <tr cdk-header-row class=\"le-header-row\" *cdkHeaderRowDef=\"displayedColumns()\"></tr>\n      <tr\n        cdk-row\n        class=\"le-table-row\"\n        [tabindex]=\"0\"\n        [class.le-table-row--clickable]=\"hasRowClickAction()\"\n        *cdkRowDef=\"let row; columns: displayedColumns()\"\n        (click)=\"onRowClick(row)\"\n      ></tr>\n    </table>\n  }\n</div>\n\n@if (data().count === 0) {\n  @if (isLoading()) {\n    <app-loading-view [headerHeight]=\"65\" [rowCount]=\"pageSize() || 10\"></app-loading-view>\n  } @else {\n    <div class=\"no-entities\">\n      <span>No Entities</span>\n    </div>\n  }\n}\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"le-toolbar\">\n  @if (node(); as node) {\n    <h2>{{ node?.title }}</h2>\n\n\n    <span class=\"spacer\"></span>\n\n    @if (filters().length) {\n      <button class=\"le-button\" (click)=\"onFiltersClick($event)\">Filters</button>\n    }\n\n    @if (node.actions?.tableActions) {\n      <table-view-actions\n        [actions]=\"node.actions!.tableActions\"\n        (actionClicked)=\"onToolbarActionClick($event)\"\n      ></table-view-actions>\n    }\n  }\n</div>\n\n@if (pageSize()) {\n  <table-view-pagination\n    [pageSize]=\"pageSize()\"\n    [pageSizeOptions]=\"pageSizeOptions()\"\n    [entriesCount]=\"entriesCount()\"\n    (pageChange)=\"onPageChange($event)\"\n  ></table-view-pagination>\n}\n\n<div class=\"le-table-container\">\n  @if (displayedColumns().length) {\n    <table cdk-table [dataSource]=\"data()\" class=\"le-table\" [class.le-table--loading]=\"isLoading()\">\n      @for (column of columns(); track column) {\n        <ng-container [cdkColumnDef]=\"column.key\">\n          <th\n            class=\"le-table-header-cell\"\n            cdk-header-cell\n            *cdkHeaderCellDef\n            [tabindex]=\"sortColumnKeys().has(column.key) ? 0 : -1\"\n            [class.le-table-header-cell--sortable]=\"sortColumnKeys().has(column.key)\"\n            (click)=\"sortColumnKeys().has(column.key) && onSortClick($event, column)\"\n          >\n            <div class=\"le-cell-content\">\n              <ng-template\n                tableViewCell\n                [data]=\"column.label\"\n                [type]=\"column.column_format?.headerTemplate\"\n              ></ng-template>\n\n              @if (sortColumnKeys().has(column.key)) {\n                <div class=\"le-sort-container\">\n                  @if (sortMap().has(column.key)) {\n                    <div class=\"le-sort-icon\">\n                      <i\n                        class=\"le-sort-arrow\"\n                        [class.le-sort-arrow--asc]=\"sortMap().get(column.key) === 'asc'\"\n                        [class.le-sort-arrow--desc]=\"sortMap().get(column.key) === 'desc'\"\n                      ></i>\n                    </div>\n\n                    <div class=\"le-sort-order\">\n                      @if (sortOrder().has(column.key)) {\n                        <span>\n                          {{ sortOrder().get(column.key) }}\n                        </span>\n                      }\n                    </div>\n                  } @else {\n<!--                    <div class=\"le-sort-icon le-sort-icon&#45;&#45;unfold\">-->\n<!--                      <span>&#8645;</span>-->\n<!--                    </div>-->\n\n                    <le-icon name=\"sort\" class=\"le-sort-icon le-sort-icon--unfold\"></le-icon>\n                  }\n                </div>\n              }\n            </div>\n          </th>\n\n          <td class=\"le-table-cell\" cdk-cell *cdkCellDef=\"let row\">\n            <ng-template\n              tableViewCell\n              [data]=\"row[column.key]\"\n              [type]=\"column.column_format?.cellTemplate\"\n            ></ng-template>\n          </td>\n        </ng-container>\n      }\n\n      <tr cdk-header-row class=\"le-header-row\" *cdkHeaderRowDef=\"displayedColumns()\"></tr>\n      <tr\n        cdk-row\n        class=\"le-table-row\"\n        [tabindex]=\"0\"\n        [class.le-table-row--clickable]=\"hasRowClickAction()\"\n        *cdkRowDef=\"let row; columns: displayedColumns()\"\n        (click)=\"onRowClick(row)\"\n      ></tr>\n    </table>\n  }\n</div>\n\n@if (data().count === 0) {\n  @if (isLoading()) {\n    <app-loading-view [headerHeight]=\"65\" [rowCount]=\"pageSize() || 10\"></app-loading-view>\n  } @else {\n    <div class=\"no-entities\">\n      <span>No Entities</span>\n    </div>\n  }\n}\n" }]
         }], ctorParameters: () => [] });
 
 const isSectionsSchema = (raw) => {
@@ -1064,6 +1152,9 @@ const mapResponseToRequestBody = (bodyModel = {}, values = {}) => {
             if (value !== null && value !== undefined && value !== '') {
                 result[key] = value;
             }
+            else {
+                result[key] = null;
+            }
         }
         else {
             result[key] = placeholder;
@@ -1556,6 +1647,192 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (node(); as node) {\n  @switch (node.type) {\n    @case ('section') {\n      <section-view [node]=\"node\"></section-view>\n    }\n    @case ('grid') {\n      <grid-view [node]=\"node\"></grid-view>\n    }\n    @case ('grid_col') {\n      <grid-col-view [node]=\"node\"></grid-col-view>\n    }\n    @case ('table') {\n      <table-view [node]=\"node\"></table-view>\n    }\n    @case ('chart') {\n      <chart-view [node]=\"node\"></chart-view>\n    }\n    @case ('form') {\n      <form-view [node]=\"node\"></form-view>\n    }\n  }\n}\n" }]
         }] });
 
+class FiltersComponent {
+    filtersService = inject(LEFiltersService);
+    overlay = inject(Overlay);
+    viewContainerRef = inject(ViewContainerRef);
+    _filteredOptions = signal([]);
+    _isDropdownOpened = signal(false);
+    overlayRef = null;
+    destroy$ = new Subject();
+    isOpened = this.filtersService.shown;
+    options = this.filtersService.options;
+    filteredOptions = this._filteredOptions.asReadonly();
+    isDropdownOpened = this._isDropdownOpened.asReadonly();
+    inputEl = viewChild('inputEl');
+    inputContainerEl = viewChild('inputContainerEl');
+    dropdownTpl = viewChild('autocompleteDropdownTpl');
+    contentTpl = viewChild('contentEl');
+    search = new FormControl();
+    selectedFilters = new SelectionModel(true);
+    filtersForm = new FormGroup({});
+    constructor() {
+        this.initFilters();
+        this.listenSearchChanges();
+        this.listenSelectionChanges();
+        this.listenDropdownState();
+    }
+    ngAfterViewInit() {
+        fromEvent(this.contentTpl().nativeElement, 'click')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe({
+            next: () => this.filtersService.close()
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    onApplyClick(event) {
+        event.stopPropagation();
+        this.filtersService.updateSelection(this.filtersForm.getRawValue());
+    }
+    onResetClick(event) {
+        event.stopPropagation();
+        this.clearSelection();
+    }
+    onCloseClick(event) {
+        event.stopPropagation();
+        this.closeDropdown();
+        this.filtersService.close();
+    }
+    onInput(event) {
+        event.stopPropagation();
+        this.search.setValue(event.target.value);
+    }
+    onInputClearClick(event) {
+        event.stopPropagation();
+        this.search.setValue('');
+    }
+    onFocus(event) {
+        event.stopPropagation();
+        this.showDropdown();
+    }
+    onBlur(event) {
+        event.stopPropagation();
+    }
+    onOptionClick(control) {
+        this.selectedFilters.toggle(control);
+        this.closeDropdown();
+        this.search.setValue('');
+    }
+    onFilterRemoveClick(control) {
+        this.selectedFilters.toggle(control);
+    }
+    closePanel() {
+        this.overlayRef?.detach();
+        this.overlayRef?.dispose();
+        this.overlayRef = null;
+    }
+    openPanel() {
+        if (this.overlayRef !== null)
+            return;
+        const positionStrategy = this.overlay
+            .position()
+            .flexibleConnectedTo(this.inputContainerEl())
+            .withPositions([
+            { originX: 'start', originY: 'bottom', overlayX: 'start', overlayY: 'top', offsetY: 4 },
+            { originX: 'start', originY: 'top', overlayX: 'start', overlayY: 'bottom', offsetY: -4 },
+        ])
+            .withPush(false);
+        this.overlayRef = this.overlay.create({
+            positionStrategy,
+            scrollStrategy: this.overlay.scrollStrategies.reposition(),
+            width: this.inputContainerEl().nativeElement.offsetWidth,
+            hasBackdrop: false,
+        });
+        this.overlayRef.attach(new TemplatePortal(this.dropdownTpl(), this.viewContainerRef));
+        this.overlayRef
+            .outsidePointerEvents()
+            .pipe(takeUntil(this.destroy$))
+            .subscribe((event) => {
+            if (!this.inputContainerEl().nativeElement.contains(event.target)) {
+                this.closeDropdown();
+            }
+        });
+    }
+    showDropdown() {
+        this._isDropdownOpened.set(true);
+    }
+    closeDropdown() {
+        this._isDropdownOpened.set(false);
+    }
+    clearSelection() {
+        this.selectedFilters.clear();
+        this.filtersService.updateSelection({});
+    }
+    initFilters() {
+        effect(() => {
+            const options = this.options();
+            untracked(() => {
+                this._filteredOptions.set(options);
+                this.selectedFilters.clear();
+            });
+        });
+    }
+    listenSearchChanges() {
+        this.search.valueChanges
+            .pipe(startWith(''), map((value) => this.filter(value)), takeUntilDestroyed())
+            .subscribe((filters) => {
+            this._filteredOptions.set(filters);
+            console.log(filters);
+        });
+    }
+    listenSelectionChanges() {
+        this.selectedFilters.changed.pipe(takeUntilDestroyed()).subscribe(({ added, removed }) => {
+            added.forEach((option) => {
+                this.filtersForm.addControl(option.key, new FormControl(''));
+            });
+            removed.forEach((option) => {
+                this.filtersForm.removeControl(option.key);
+            });
+        });
+    }
+    listenDropdownState() {
+        effect(() => {
+            const isDropdownOpened = this.isDropdownOpened();
+            untracked(() => {
+                if (isDropdownOpened) {
+                    this.openPanel();
+                }
+                else {
+                    this.closePanel();
+                }
+            });
+        });
+    }
+    filter(value) {
+        const options = this.options();
+        try {
+            const filterValue = value.toLowerCase();
+            return options.reduce((acc, option) => {
+                const filters = option.filters.filter((filter) => {
+                    return filter.control.label.toLowerCase().includes(filterValue.toLowerCase());
+                });
+                if (filters.length) {
+                    acc.push({ ...option, filters });
+                }
+                return acc;
+            }, []);
+        }
+        catch {
+            return options;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: FiltersComponent, isStandalone: true, selector: "le-filters", viewQueries: [{ propertyName: "inputEl", first: true, predicate: ["inputEl"], descendants: true, isSignal: true }, { propertyName: "inputContainerEl", first: true, predicate: ["inputContainerEl"], descendants: true, isSignal: true }, { propertyName: "dropdownTpl", first: true, predicate: ["autocompleteDropdownTpl"], descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: ["contentEl"], descendants: true, isSignal: true }], ngImport: i0, template: "<div leDrawerContainer>\n  <div leDrawer type=\"over\" [opened]=\"isOpened()\" [width]=\"320\" [hideOnClose]=\"true\" [style.z-index]=\"100\">\n    <div class=\"le-filters-container\">\n      <div class=\"le-filters-title\">Filters</div>\n\n      <div class=\"le-divider le-divider-horizontal\"></div>\n\n      <div class=\"le-filters-actions\">\n        <button class=\"le-button le-button-flat le-button--success\" (click)=\"onApplyClick($event)\">Apply</button>\n\n        <button class=\"le-button le-button-basic\" (click)=\"onResetClick($event)\">Reset</button>\n\n        <button class=\"le-button le-button-basic\" (click)=\"onCloseClick($event)\">Close</button>\n      </div>\n\n      <div #inputContainerEl class=\"le-autocomplete-container\">\n        <input\n          #inputEl\n          class=\"le-autocomplete-input\"\n          type=\"text\"\n          placeholder=\"Select filters\"\n          [value]=\"search.value\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\"\n          autocomplete=\"off\"\n          role=\"combobox\"\n          [attr.aria-expanded]=\"isDropdownOpened()\"\n          aria-haspopup=\"listbox\"\n          aria-autocomplete=\"list\"\n        >\n\n        <button type=\"button\" class=\"le-button-icon\" (click)=\"onInputClearClick($event)\">\n          <le-icon size=\"16\" class=\"le-icon-clear\" name=\"close\"></le-icon>\n        </button>\n      </div>\n\n      <div>\n        <form [formGroup]=\"filtersForm\" class=\"le-filters-list\">\n          @for (control of selectedFilters.selected; track control.key) {\n            <div class=\"le-filters-list-item\">\n              <label class=\"le-filters-list-label\" [for]=\"control.key\">{{control.label}}</label>\n\n              <div class=\"le-filters-list-input\">\n                @switch (control.type) {\n                  @case ('single_select') {\n                    <select [id]=\"control.key\" [formControlName]=\"control.key\">\n                      @for (option of control.options; track option) {\n                        <option [value]=\"option\">{{option}}</option>\n                      }\n                    </select>\n                  }\n                  @case ('multi_select') {\n                    <select [id]=\"control.key\" [formControlName]=\"control.key\" multiple>\n                      @for (option of control.options; track option) {\n                        <option [value]=\"option\">{{option}}</option>\n                      }\n                    </select>\n                  }\n                  @case ('dateTime') {\n                    <input type=\"datetime-local\" [id]=\"control.key\" [formControlName]=\"control.key\">\n                  }\n                  @case ('date') {\n                    <input type=\"date\" [id]=\"control.key\"  [formControlName]=\"control.key\">\n                  }\n                  @default {\n                    <input\n                      type=\"text\"\n                      [id]=\"control.key\"\n                      [formControlName]=\"control.key\"\n                      (keydown.enter)=\"onApplyClick($event)\"\n                    >\n                  }\n                }\n\n                <button type=\"button\" class=\"le-button-icon\" (click)=\"onFilterRemoveClick(control)\">\n                  <le-icon size=\"16\" class=\"le-icon-clear\" name=\"close\"></le-icon>\n                </button>\n              </div>\n            </div>\n          }\n        </form>\n      </div>\n    </div>\n  </div>\n\n  <div #contentEl leDrawerContent>\n    <ng-content></ng-content>\n  </div>\n</div>\n\n\n<ng-template #autocompleteDropdownTpl>\n  <div class=\"le-autocomplete-panel\" role=\"listbox\">\n    @for (option of filteredOptions(); track option) {\n      <div class=\"le-autocomplete-label\">{{option.label}}</div>\n\n      <div>\n        @for (item of option.filters; track item) {\n          <div\n            role=\"option\"\n            class=\"le-autocomplete-option\"\n            [class.le-autocomplete-option--selected]=\"selectedFilters.isSelected(item.control)\"\n            [attr.aria-selected]=\"selectedFilters.isSelected(item.control)\"\n            (click)=\"onOptionClick(item.control)\"\n          >{{item.control.label}}</div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: DrawerContentDirective, selector: "[leDrawerContent]" }, { kind: "directive", type: DrawerContainerDirective, selector: "[leDrawerContainer]" }, { kind: "directive", type: LeDrawerDirective, selector: "[leDrawer]", inputs: ["opened", "width", "hideOnClose", "type"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: LeIconComponent, selector: "le-icon", inputs: ["name", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: FiltersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'le-filters', imports: [
+                        DrawerContentDirective,
+                        DrawerContainerDirective,
+                        LeDrawerDirective,
+                        ReactiveFormsModule,
+                        LeIconComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div leDrawerContainer>\n  <div leDrawer type=\"over\" [opened]=\"isOpened()\" [width]=\"320\" [hideOnClose]=\"true\" [style.z-index]=\"100\">\n    <div class=\"le-filters-container\">\n      <div class=\"le-filters-title\">Filters</div>\n\n      <div class=\"le-divider le-divider-horizontal\"></div>\n\n      <div class=\"le-filters-actions\">\n        <button class=\"le-button le-button-flat le-button--success\" (click)=\"onApplyClick($event)\">Apply</button>\n\n        <button class=\"le-button le-button-basic\" (click)=\"onResetClick($event)\">Reset</button>\n\n        <button class=\"le-button le-button-basic\" (click)=\"onCloseClick($event)\">Close</button>\n      </div>\n\n      <div #inputContainerEl class=\"le-autocomplete-container\">\n        <input\n          #inputEl\n          class=\"le-autocomplete-input\"\n          type=\"text\"\n          placeholder=\"Select filters\"\n          [value]=\"search.value\"\n          (input)=\"onInput($event)\"\n          (focus)=\"onFocus($event)\"\n          (blur)=\"onBlur($event)\"\n          autocomplete=\"off\"\n          role=\"combobox\"\n          [attr.aria-expanded]=\"isDropdownOpened()\"\n          aria-haspopup=\"listbox\"\n          aria-autocomplete=\"list\"\n        >\n\n        <button type=\"button\" class=\"le-button-icon\" (click)=\"onInputClearClick($event)\">\n          <le-icon size=\"16\" class=\"le-icon-clear\" name=\"close\"></le-icon>\n        </button>\n      </div>\n\n      <div>\n        <form [formGroup]=\"filtersForm\" class=\"le-filters-list\">\n          @for (control of selectedFilters.selected; track control.key) {\n            <div class=\"le-filters-list-item\">\n              <label class=\"le-filters-list-label\" [for]=\"control.key\">{{control.label}}</label>\n\n              <div class=\"le-filters-list-input\">\n                @switch (control.type) {\n                  @case ('single_select') {\n                    <select [id]=\"control.key\" [formControlName]=\"control.key\">\n                      @for (option of control.options; track option) {\n                        <option [value]=\"option\">{{option}}</option>\n                      }\n                    </select>\n                  }\n                  @case ('multi_select') {\n                    <select [id]=\"control.key\" [formControlName]=\"control.key\" multiple>\n                      @for (option of control.options; track option) {\n                        <option [value]=\"option\">{{option}}</option>\n                      }\n                    </select>\n                  }\n                  @case ('dateTime') {\n                    <input type=\"datetime-local\" [id]=\"control.key\" [formControlName]=\"control.key\">\n                  }\n                  @case ('date') {\n                    <input type=\"date\" [id]=\"control.key\"  [formControlName]=\"control.key\">\n                  }\n                  @default {\n                    <input\n                      type=\"text\"\n                      [id]=\"control.key\"\n                      [formControlName]=\"control.key\"\n                      (keydown.enter)=\"onApplyClick($event)\"\n                    >\n                  }\n                }\n\n                <button type=\"button\" class=\"le-button-icon\" (click)=\"onFilterRemoveClick(control)\">\n                  <le-icon size=\"16\" class=\"le-icon-clear\" name=\"close\"></le-icon>\n                </button>\n              </div>\n            </div>\n          }\n        </form>\n      </div>\n    </div>\n  </div>\n\n  <div #contentEl leDrawerContent>\n    <ng-content></ng-content>\n  </div>\n</div>\n\n\n<ng-template #autocompleteDropdownTpl>\n  <div class=\"le-autocomplete-panel\" role=\"listbox\">\n    @for (option of filteredOptions(); track option) {\n      <div class=\"le-autocomplete-label\">{{option.label}}</div>\n\n      <div>\n        @for (item of option.filters; track item) {\n          <div\n            role=\"option\"\n            class=\"le-autocomplete-option\"\n            [class.le-autocomplete-option--selected]=\"selectedFilters.isSelected(item.control)\"\n            [attr.aria-selected]=\"selectedFilters.isSelected(item.control)\"\n            (click)=\"onOptionClick(item.control)\"\n          >{{item.control.label}}</div>\n        }\n      </div>\n    }\n  </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [] });
+
 class LeContainerComponent {
     auth = inject(LEAuthService);
     dataService = inject(LEDataService);
@@ -1571,12 +1848,13 @@ class LeContainerComponent {
         };
     });
     constructor() {
-        this.setEffects();
+        this.listenAuthState();
+        this.listenPageInit();
     }
     onSelectionChange(view) {
         this.dataService.setView(view);
     }
-    setEffects() {
+    listenAuthState() {
         effect(() => {
             const token = this.auth.token();
             const isGuest = this.auth.isGuest();
@@ -1586,6 +1864,8 @@ class LeContainerComponent {
                 this.dataService.requestConfig();
             });
         });
+    }
+    listenPageInit() {
         effect(() => {
             const parentMenu = this.dataService.parentMenu();
             const sidebar = this.sidebar();
@@ -1597,11 +1877,11 @@ class LeContainerComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: LeContainerComponent, isStandalone: true, selector: "le-container", providers: [LEDataService, LEApiService], viewQueries: [{ propertyName: "sidebar", first: true, predicate: SidebarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (data(); as data) {\n  <le-sidebar\n    [config]=\"data.config\"\n    [view]=\"data.view\"\n    (selectionChange)=\"onSelectionChange($event)\"\n  >\n    <le-node [node]=\"data.view\"></le-node>\n  </le-sidebar>\n}\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "le-sidebar", inputs: ["config", "view"], outputs: ["selectionChange"] }, { kind: "component", type: NodeComponent, selector: "le-node", inputs: ["node"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", type: LeContainerComponent, isStandalone: true, selector: "le-container", providers: [LEDataService, LEApiService, LEFiltersService], viewQueries: [{ propertyName: "sidebar", first: true, predicate: SidebarComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (data(); as data) {\n  <le-sidebar\n    [config]=\"data.config\"\n    [view]=\"data.view\"\n    (selectionChange)=\"onSelectionChange($event)\"\n  >\n    <le-filters>\n      <le-node [node]=\"data.view\"></le-node>\n    </le-filters>\n  </le-sidebar>\n}\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "le-sidebar", inputs: ["config", "view"], outputs: ["selectionChange"] }, { kind: "component", type: NodeComponent, selector: "le-node", inputs: ["node"] }, { kind: "component", type: FiltersComponent, selector: "le-filters" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: LeContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'le-container', imports: [SidebarComponent, NodeComponent], providers: [LEDataService, LEApiService], template: "@if (data(); as data) {\n  <le-sidebar\n    [config]=\"data.config\"\n    [view]=\"data.view\"\n    (selectionChange)=\"onSelectionChange($event)\"\n  >\n    <le-node [node]=\"data.view\"></le-node>\n  </le-sidebar>\n}\n" }]
+            args: [{ selector: 'le-container', imports: [SidebarComponent, NodeComponent, FiltersComponent], providers: [LEDataService, LEApiService, LEFiltersService], template: "@if (data(); as data) {\n  <le-sidebar\n    [config]=\"data.config\"\n    [view]=\"data.view\"\n    (selectionChange)=\"onSelectionChange($event)\"\n  >\n    <le-filters>\n      <le-node [node]=\"data.view\"></le-node>\n    </le-filters>\n  </le-sidebar>\n}\n" }]
         }], ctorParameters: () => [] });
 
 const provideConfig = (config) => {