@smartsoft001/crud-shell-angular 2.124.0 → 2.126.0

package/fesm2022/smartsoft001-crud-shell-angular.mjs

@@ -1,57 +1,26 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, ElementRef, Component, input, Directive, computed, signal, InjectionToken, Pipe, NgModule, viewChild, viewChildren, output, ChangeDetectorRef, effect, Injector } from '@angular/core';
-import { NgrxStoreService, PaginationMode, BaseComponent as BaseComponent$1, PopoverService, StyleService, ButtonComponent, MenuService, FormComponent, ListComponent as ListComponent$1, SharedModule, DetailsComponent, AuthService, CreateDynamicComponent, DynamicComponentLoader, ToastService, DetailsService, DynamicContentDirective, HardwareService, ListMode, FILE_SERVICE_CONFIG } from '@smartsoft001/angular';
-import { toSignal } from '@angular/core/rxjs-interop';
+import { Injectable, inject, ElementRef, Injector, Directive, ChangeDetectionStrategy, Component, InjectionToken, DestroyRef, signal, input, computed, Pipe, NgModule, ChangeDetectorRef, viewChild, viewChildren, output, effect } from '@angular/core';
+import { toSignal, toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { map, first, filter, take } from 'rxjs/operators';
+import { NgrxStoreService, PaginationMode, BaseComponent as BaseComponent$1, PopoverService, StyleService, ButtonComponent, DateEditComponent, InputFlagComponent, InputIntComponent, InputRadioComponent, InputTextComponent, MenuService, FormComponent, ListComponent as ListComponent$1, IModelLabelProvider, SharedModule, DetailsComponent, AuthService, CreateDynamicComponent, DynamicComponentLoader, ToastService, DetailsService, DynamicContentDirective, PageComponent, HardwareService, ListMode, FILE_SERVICE_CONFIG } from '@smartsoft001/angular';
+import 'reflect-metadata';
 import * as i1 from '@ngrx/store';
 import { createFeatureSelector, createSelector, select as select$1 } from '@ngrx/store';
-import { map, first } from 'rxjs/operators';
+import { HttpClient } from '@angular/common/http';
+import { firstValueFrom, Subscription, BehaviorSubject, combineLatest, Subject } from 'rxjs';
 import { FieldType, getModelOptions, getModelFieldsWithOptions } from '@smartsoft001/models';
 import { TranslateService, TranslatePipe } from '@ngx-translate/core';
 import { __decorate, __metadata } from 'tslib';
+import * as i1$1 from '@angular/forms';
+import { UntypedFormControl, FormsModule, ReactiveFormsModule, UntypedFormGroup, UntypedFormArray } from '@angular/forms';
 import { Debounce, debounce } from 'lodash-decorators';
-import { FormsModule, UntypedFormControl, UntypedFormGroup, UntypedFormArray } from '@angular/forms';
 import moment from 'moment';
-import { GuidService, SpecificationService } from '@smartsoft001/utils';
-import { Subscription, firstValueFrom, BehaviorSubject, combineLatest, Subject } from 'rxjs';
-import { NgComponentOutlet, NgClass, CommonModule, NgTemplateOutlet, Location } from '@angular/common';
 import * as _ from 'lodash';
+import { NgComponentOutlet, CommonModule, NgTemplateOutlet, Location } from '@angular/common';
 import { DynamicIoDirective, DynamicIoModule } from 'ng-dynamic-component';
-import { HttpClient } from '@angular/common/http';
-import 'reflect-metadata';
 import * as i3 from '@angular/router';
 import { Router, ActivatedRoute, RouterModule } from '@angular/router';
-
-class CrudConfig {
-    apiUrl;
-    entity;
-    type;
-    reducerFactory;
-    baseQuery;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudConfig });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudConfig, decorators: [{
-            type: Injectable
-        }] });
-class CrudFullConfig extends CrudConfig {
-    title;
-    details;
-    edit;
-    add;
-    remove;
-    search;
-    export;
-    pagination;
-    sort;
-    list;
-    buttons;
-    inputComponents;
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudFullConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudFullConfig });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudFullConfig, decorators: [{
-            type: Injectable
-        }] });
+import { SpecificationService } from '@smartsoft001/utils';
 
 /*
  * Create
@@ -277,6 +246,42 @@ const deleteFailure = function (entity, id, error) {
     };
 };
 
+class CrudConfig {
+    apiUrl;
+    entity;
+    type;
+    reducerFactory;
+    baseQuery;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudConfig });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudConfig, decorators: [{
+            type: Injectable
+        }] });
+class CrudFullConfig extends CrudConfig {
+    title;
+    details;
+    edit;
+    add;
+    remove;
+    search;
+    export;
+    pagination;
+    sort;
+    list;
+    buttons;
+    inputComponents;
+    // Declarative tier-2 styling surface (FRA-293 Faza 2).
+    // Deep threading into IListOptions/IPageOptions lands in Phase 3.
+    cssClass;
+    variant;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudFullConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudFullConfig });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudFullConfig, decorators: [{
+            type: Injectable
+        }] });
+
 const getCrudState = (entity) => createFeatureSelector(entity);
 const getCrudSelected = (entity) => createSelector(getCrudState(entity), (state) => state.selected);
 const getCrudMultiSelected = (entity) => createSelector(getCrudState(entity), (state) => state.multiSelected);
@@ -287,108 +292,418 @@ const getCrudLoaded = (entity) => createSelector(getCrudState(entity), (state) =
 const getCrudFilter = (entity) => createSelector(getCrudState(entity), (state) => state?.filter);
 const getCrudError = (entity) => createSelector(getCrudState(entity), (state) => state?.error);
 
-class CrudFacade {
-    store;
-    config;
-    loaded;
-    loading;
-    selected;
-    multiSelected;
-    list;
-    filter;
-    totalCount;
-    links;
-    error;
-    constructor(store, config) {
-        this.store = store;
-        this.config = config;
-        if (NgrxStoreService.store) {
-            this.store = NgrxStoreService.store;
-        }
-        // Initialize all signals in the constructor (injection context)
-        this.loaded = toSignal(this.store.pipe(select$1(getCrudLoaded(this.config.entity))));
-        this.loading = toSignal(this.store.pipe(select$1(getCrudLoaded(this.config.entity)), map((l) => !l)));
-        this.selected = toSignal(this.store.pipe(select$1(getCrudSelected(this.config.entity))));
-        this.multiSelected = toSignal(this.store.pipe(select$1(getCrudMultiSelected(this.config.entity))));
-        this.list = toSignal(this.store.pipe(select$1(getCrudList(this.config.entity))));
-        this.filter = toSignal(this.store.pipe(select$1(getCrudFilter(this.config.entity))));
-        this.totalCount = toSignal(this.store.pipe(select$1(getCrudTotalCount(this.config.entity))));
-        this.links = toSignal(this.store.pipe(select$1(getCrudLinks(this.config.entity))));
-        this.error = toSignal(this.store.pipe(select$1(getCrudError(this.config.entity))));
-    }
+// NOTE: Restored 1:1 from the legacy library (FRA-293 / GAP-01).
+// This is an inert stub: both classes are empty injectables. The original
+// real-time implementation never existed as live code — the constructor below
+// (which would have extended ngx-socket-io's `Socket`) was always commented out.
+// `NotSocketService` is the null-object fallback used when `options.socket` is off.
+class SocketService {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SocketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SocketService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: SocketService, decorators: [{
+            type: Injectable
+        }] });
+class NotSocketService {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NotSocketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NotSocketService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: NotSocketService, decorators: [{
+            type: Injectable
+        }] });
+
+class CrudService {
+    config = inject((CrudConfig));
+    http = inject(HttpClient);
+    socket = inject((SocketService), { optional: true });
+    // changes(criteria: { id?: string } = {}): Observable<ItemChangedData> {
+    //   this.socket.emit('changes', criteria);
+    //   return this.socket.fromEvent('changes');
+    // }
+    _formatMap = {
+        csv: 'text/csv',
+        xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    };
     create(item) {
-        this.store.dispatch(create(this.config.entity, item));
+        return firstValueFrom(this.http
+            .post(this.config.apiUrl, item, { observe: 'response' })
+            .pipe(map((response) => {
+            const location = response.headers['Location'];
+            if (!location)
+                return null;
+            const array = location.split('/');
+            return array[array.length - 1];
+        })));
     }
     createMany(items, options) {
-        this.store.dispatch(createMany(this.config.entity, { items, options }));
-    }
-    read(filter = {}) {
-        let baseQuery = [];
-        if (this.config.baseQuery) {
-            baseQuery = this.config.baseQuery;
-        }
-        const fullFilter = {
-            ...(filter ? filter : {}),
-            query: filter && filter.query ? filter.query : baseQuery,
-        };
-        this.store.dispatch(read(this.config.entity, fullFilter));
-    }
-    clear() {
-        this.store.dispatch(clear(this.config.entity));
+        return firstValueFrom(this.http.post(this.config.apiUrl + '/bulk?mode=' + options.mode, items));
     }
-    select(id) {
-        this.store.dispatch(select(this.config.entity, id));
+    getById(id) {
+        return firstValueFrom(this.http.get(this.config.apiUrl + '/' + id));
     }
-    unselect() {
-        this.store.dispatch(unselect(this.config.entity));
+    getList(filter = null) {
+        return firstValueFrom(this.http.get(this.config.apiUrl + this.getQuery(filter)));
     }
-    multiSelect(items) {
-        this.store.dispatch(multiSelect(this.config.entity, items));
+    exportList(filter = null, format) {
+        if (!format) {
+            format = 'csv';
+        }
+        if (format === 'xlsx') {
+            return firstValueFrom(this.http
+                .get(this.config.apiUrl + this.getQuery(filter), {
+                headers: {
+                    'Content-Type': this._formatMap[format],
+                },
+                observe: 'response',
+                reportProgress: false,
+                responseType: 'blob',
+            })
+                .pipe(map((res) => {
+                const downloadLink = document.createElement('a');
+                const blob = res.body;
+                downloadLink.href = URL.createObjectURL(blob);
+                downloadLink.download = 'data.' + format;
+                document.body.appendChild(downloadLink);
+                downloadLink.click();
+                document.body.removeChild(downloadLink);
+            })));
+        }
+        return firstValueFrom(this.http
+            .get(this.config.apiUrl + this.getQuery(filter), {
+            headers: {
+                'Content-Type': this._formatMap[format],
+            },
+            responseType: 'text',
+        })
+            .pipe(map((res) => {
+            const downloadLink = document.createElement('a');
+            const blob = new Blob(['\ufeff', res]);
+            downloadLink.href = URL.createObjectURL(blob);
+            downloadLink.download = 'data.' + format;
+            document.body.appendChild(downloadLink);
+            downloadLink.click();
+            document.body.removeChild(downloadLink);
+        })));
     }
     update(item) {
-        this.getStore().dispatch(update(this.config.entity, item));
-    }
-    export(filter = {}, format) {
-        this.getStore().dispatch(exportList(this.config.entity, filter, format));
+        return firstValueFrom(this.http.put(this.config.apiUrl + '/' + item.id, item));
     }
     updatePartial(item) {
-        this.getStore().dispatch(updatePartial(this.config.entity, item));
+        return firstValueFrom(this.http.patch(this.config.apiUrl + '/' + item.id, item));
     }
     updatePartialMany(items) {
-        this.getStore().dispatch(updatePartialMany(this.config.entity, items));
+        const updatePromises = items.map((item) => {
+            return this.updatePartial(item);
+        });
+        return Promise.all(updatePromises);
     }
     delete(id) {
-        this.getStore().dispatch(deleteItem(this.config.entity, id));
+        return firstValueFrom(this.http.delete(this.config.apiUrl + '/' + id));
     }
-    getStore() {
-        if (NgrxStoreService.store)
-            return NgrxStoreService.store;
-        return this.store;
+    getQuery(filter) {
+        let query = '';
+        if (filter && filter.searchText) {
+            query += '&$search=' + filter.searchText;
+        }
+        if (filter && filter.limit) {
+            query += `&limit=${filter.limit}&offset=${filter.offset ? filter.offset : 0}`;
+        }
+        if (filter && filter.sortBy) {
+            query += `&sort=${(filter.sortDesc ? '-' : '') + filter.sortBy}`;
+        }
+        if (filter && filter.query) {
+            filter.query.forEach((q) => {
+                if (q.value &&
+                    typeof q.value === 'string' &&
+                    q.value.match(/^-?\d+$/) &&
+                    q.value[0] !== "'" &&
+                    q.value[0] !== '"') {
+                    query += '&' + q.key + q.type + `'${q.value}'`;
+                }
+                else {
+                    query += '&' + q.key + q.type + q.value;
+                }
+            });
+        }
+        return query ? '?' + query.replace('&', '') : '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudFacade, deps: [{ token: i1.Store }, { token: CrudConfig }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudFacade });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudFacade, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1.Store }, { type: CrudConfig }] });
+        }] });
 
-const initialState = {
-    loaded: false,
-};
-const crudReducer = (state, action, entity) => {
-    if (!state) {
-        state = { ...initialState };
-    }
-    switch (action.type) {
-        case `[${entity}] Create`:
-            return {
-                ...state,
-                loaded: false,
-                error: null,
-            };
-        case `[${entity}] Create Success`:
-            return {
-                ...state,
+class CrudEffects {
+    actions$;
+    service;
+    config;
+    store;
+    state;
+    constructor(actions$, service, config, store, state) {
+        this.actions$ = actions$;
+        this.service = service;
+        this.config = config;
+        this.store = store;
+        this.state = state;
+    }
+    init() {
+        const metadata = Reflect.getMetadata(this.config.entity, CrudEffects);
+        if (metadata)
+            return;
+        Reflect.defineMetadata(this.config.entity, true, CrudEffects);
+        this.actions$.subscribe((action) => {
+            switch (action.type) {
+                case `[${this.config.entity}] Create`:
+                    this.service
+                        .create(action.item)
+                        .then(() => this.store.dispatch(createSuccess(this.config.entity, action.item)))
+                        .catch((error) => {
+                        this.store.dispatch(createFailure(this.config.entity, action.item, error));
+                    });
+                    break;
+                case `[${this.config.entity}] Create Success`: {
+                    const createState = this.state.getValue()[this.config.entity];
+                    this.store.dispatch(read(this.config.entity, createState?.filter ? { ...createState.filter, offset: 0 } : null));
+                    break;
+                }
+                case `[${this.config.entity}] Create Many`:
+                    this.service
+                        .createMany(action.data.items, action.data.options)
+                        .then(() => this.store.dispatch(createManySuccess(this.config.entity, {
+                        items: action.data.items,
+                        options: action.data.options,
+                    })))
+                        .catch((error) => {
+                        this.store.dispatch(createManyFailure(this.config.entity, {
+                            items: action.data.items,
+                            options: action.data.options,
+                        }, error));
+                    });
+                    break;
+                case `[${this.config.entity}] Create Many Success`: {
+                    const createManyState = this.state.getValue()[this.config.entity];
+                    this.store.dispatch(read(this.config.entity, createManyState?.filter
+                        ? { ...createManyState.filter, offset: 0 }
+                        : null));
+                    break;
+                }
+                case `[${this.config.entity}] Read`:
+                    this.service
+                        .getList(action?.filter)
+                        .then((result) => this.store.dispatch(readSuccess(this.config.entity, action?.filter, result)))
+                        .catch((error) => {
+                        this.store.dispatch(readFailure(this.config.entity, action?.filter, error));
+                    });
+                    break;
+                case `[${this.config.entity}] Export`:
+                    this.service
+                        .exportList(action?.filter, action.format)
+                        .then(() => this.store.dispatch(exportListSuccess(this.config.entity, action?.filter)))
+                        .catch((error) => {
+                        this.store.dispatch(exportListFailure(this.config.entity, action?.filter, error));
+                    });
+                    break;
+                case `[${this.config.entity}] Select`:
+                    this.service
+                        .getById(action.id)
+                        .then((result) => this.store.dispatch(selectSuccess(this.config.entity, action.id, result)))
+                        .catch((error) => {
+                        this.store.dispatch(selectFailure(this.config.entity, action.id, error));
+                    });
+                    break;
+                case `[${this.config.entity}] Update`:
+                    this.service
+                        .updatePartial(action.item)
+                        .then(() => this.store.dispatch(updateSuccess(this.config.entity, action.item)))
+                        .catch((error) => {
+                        this.store.dispatch(updateFailure(this.config.entity, action.item, error));
+                        this.store.dispatch(read(this.config.entity));
+                    });
+                    break;
+                case `[${this.config.entity}] Update Success`:
+                    this.store
+                        .pipe(select$1(getCrudFilter(this.config.entity)), first())
+                        .subscribe((filter) => {
+                        this.store.dispatch(read(this.config.entity, {
+                            ...filter,
+                            offset: 0,
+                        }));
+                        this.store.dispatch(select(this.config.entity, action.item.id));
+                    });
+                    break;
+                case `[${this.config.entity}] Update partial`:
+                    this.service
+                        .updatePartial(action.item)
+                        .then(() => this.store.dispatch(updatePartialSuccess(this.config.entity, action.item)))
+                        .catch((error) => {
+                        this.store.dispatch(updatePartialFailure(this.config.entity, action.item, error));
+                        this.store.dispatch(read(this.config.entity));
+                    });
+                    break;
+                case `[${this.config.entity}] Update partial Success`:
+                    this.store
+                        .pipe(select$1(getCrudFilter(this.config.entity)), first())
+                        .subscribe((filter) => {
+                        this.store.dispatch(read(this.config.entity, {
+                            ...filter,
+                            offset: 0,
+                        }));
+                        this.store.dispatch(select(this.config.entity, action.item.id));
+                    });
+                    break;
+                case `[${this.config.entity}] Update partial many`:
+                    this.service
+                        .updatePartialMany(action.items)
+                        .then(() => this.store.dispatch(updatePartialManySuccess(this.config.entity, action.items)))
+                        .catch((error) => {
+                        this.store.dispatch(updatePartialManyFailure(this.config.entity, action.items, error));
+                        this.store.dispatch(read(this.config.entity));
+                    });
+                    break;
+                case `[${this.config.entity}] Update partial many Success`:
+                    this.store
+                        .pipe(select$1(getCrudFilter(this.config.entity)), first())
+                        .subscribe((filter) => {
+                        this.store.dispatch(read(this.config.entity, {
+                            ...filter,
+                            offset: 0,
+                        }));
+                    });
+                    break;
+                case `[${this.config.entity}] Delete`:
+                    this.service
+                        .delete(action.id)
+                        .then(() => this.store.dispatch(deleteSuccess(this.config.entity, action.id)))
+                        .catch((error) => {
+                        this.store.dispatch(deleteFailure(this.config.entity, action.id, error));
+                    });
+                    break;
+                case `[${this.config.entity}] Delete Success`:
+                    this.store
+                        .pipe(select$1(getCrudFilter(this.config.entity)), first())
+                        .subscribe((filter) => {
+                        this.store.dispatch(read(this.config.entity, {
+                            ...filter,
+                            offset: 0,
+                        }));
+                    });
+                    break;
+                default:
+                    console.warn(`No effect for action type ${action.type} in entity ${this.config.entity}`);
+                    break;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudEffects, deps: [{ token: i1.ActionsSubject }, { token: CrudService }, { token: CrudConfig }, { token: i1.Store }, { token: i1.State }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudEffects });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudEffects, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.ActionsSubject }, { type: CrudService }, { type: CrudConfig }, { type: i1.Store }, { type: i1.State }] });
+
+class CrudFacade {
+    store;
+    config;
+    loaded;
+    loading;
+    selected;
+    multiSelected;
+    list;
+    filter;
+    totalCount;
+    links;
+    error;
+    constructor(store, config) {
+        this.store = store;
+        this.config = config;
+        if (NgrxStoreService.store) {
+            this.store = NgrxStoreService.store;
+        }
+        // Initialize all signals in the constructor (injection context)
+        this.loaded = toSignal(this.store.pipe(select$1(getCrudLoaded(this.config.entity))));
+        this.loading = toSignal(this.store.pipe(select$1(getCrudLoaded(this.config.entity)), map((l) => !l)));
+        this.selected = toSignal(this.store.pipe(select$1(getCrudSelected(this.config.entity))));
+        this.multiSelected = toSignal(this.store.pipe(select$1(getCrudMultiSelected(this.config.entity))));
+        this.list = toSignal(this.store.pipe(select$1(getCrudList(this.config.entity))));
+        this.filter = toSignal(this.store.pipe(select$1(getCrudFilter(this.config.entity))));
+        this.totalCount = toSignal(this.store.pipe(select$1(getCrudTotalCount(this.config.entity))));
+        this.links = toSignal(this.store.pipe(select$1(getCrudLinks(this.config.entity))));
+        this.error = toSignal(this.store.pipe(select$1(getCrudError(this.config.entity))));
+    }
+    create(item) {
+        this.store.dispatch(create(this.config.entity, item));
+    }
+    createMany(items, options) {
+        this.store.dispatch(createMany(this.config.entity, { items, options }));
+    }
+    read(filter = {}) {
+        let baseQuery = [];
+        if (this.config.baseQuery) {
+            baseQuery = this.config.baseQuery;
+        }
+        const fullFilter = {
+            ...(filter ? filter : {}),
+            query: filter && filter.query ? filter.query : baseQuery,
+        };
+        this.store.dispatch(read(this.config.entity, fullFilter));
+    }
+    clear() {
+        this.store.dispatch(clear(this.config.entity));
+    }
+    select(id) {
+        this.store.dispatch(select(this.config.entity, id));
+    }
+    unselect() {
+        this.store.dispatch(unselect(this.config.entity));
+    }
+    multiSelect(items) {
+        this.store.dispatch(multiSelect(this.config.entity, items));
+    }
+    update(item) {
+        this.getStore().dispatch(update(this.config.entity, item));
+    }
+    export(filter = {}, format) {
+        this.getStore().dispatch(exportList(this.config.entity, filter, format));
+    }
+    updatePartial(item) {
+        this.getStore().dispatch(updatePartial(this.config.entity, item));
+    }
+    updatePartialMany(items) {
+        this.getStore().dispatch(updatePartialMany(this.config.entity, items));
+    }
+    delete(id) {
+        this.getStore().dispatch(deleteItem(this.config.entity, id));
+    }
+    getStore() {
+        if (NgrxStoreService.store)
+            return NgrxStoreService.store;
+        return this.store;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudFacade, deps: [{ token: i1.Store }, { token: CrudConfig }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudFacade });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudFacade, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.Store }, { type: CrudConfig }] });
+
+const initialState = {
+    loaded: false,
+};
+const crudReducer = (state, action, entity) => {
+    if (!state) {
+        state = { ...initialState };
+    }
+    switch (action.type) {
+        case `[${entity}] Create`:
+            return {
+                ...state,
+                loaded: false,
+                error: null,
+            };
+        case `[${entity}] Create Success`:
+            return {
+                ...state,
                 loaded: true,
                 error: null,
             };
@@ -586,11 +901,12 @@ function getReducer(entity) {
     };
 }
 
-class ExportComponent extends BaseComponent$1 {
+class ExportBaseComponent extends BaseComponent$1 {
     facade = inject((CrudFacade));
     popoverService = inject(PopoverService);
     styleService = inject(StyleService);
     elementRef = inject(ElementRef);
+    injector = inject(Injector);
     buttonExportCsvOptions = this.initButtonExportOptions('csv');
     buttonExportXlsxOptions = this.initButtonExportOptions('xlsx');
     ngOnInit() {
@@ -604,14 +920,21 @@ class ExportComponent extends BaseComponent$1 {
                     offset: undefined,
                     limit: undefined,
                 }, format);
-                const loading = this.facade.loading();
-                if (loading)
-                    return;
-                this.popoverService.close().then();
+                toObservable(this.facade.loaded, { injector: this.injector })
+                    .pipe(filter((l) => !!l), take(1))
+                    .subscribe(() => this.popoverService.close().then());
             },
             loading: this.facade.loading,
         };
     }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ExportBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: ExportBaseComponent, isStandalone: true, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ExportBaseComponent, decorators: [{
+            type: Directive
+        }] });
+
+class ExportComponent extends ExportBaseComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ExportComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.1", type: ExportComponent, isStandalone: true, selector: "smart-crud-export", usesInheritance: true, ngImport: i0, template: `
     <div class="smart:p-5">
@@ -630,7 +953,7 @@ class ExportComponent extends BaseComponent$1 {
         >
       </p>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "smart-button", inputs: ["options", "disabled", "class"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "smart-button", inputs: ["options", "disabled", "class"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ExportComponent, decorators: [{
             type: Component,
@@ -655,17 +978,88 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
     </div>
   `,
                     imports: [ButtonComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
+/**
+ * @deprecated - please, use IModelPossibilitiesProvider from @smartsoft001/angular
+ */
+class ICrudModelPossibilitiesProvider {
+}
+/**
+ * @deprecated - please, use MODEL_POSSIBILITIES_PROVIDER from @smartsoft001/angular
+ */
+const CRUD_MODEL_POSSIBILITIES_PROVIDER = new InjectionToken('CRUD_MODEL_POSSIBILITIES_PROVIDER');
+
 class BaseComponent {
     facade = inject((CrudFacade));
     translateService = inject(TranslateService);
+    config = inject((CrudConfig));
+    modelPossibilitiesProvider = inject(CRUD_MODEL_POSSIBILITIES_PROVIDER, { optional: true });
+    injector = inject(Injector);
+    destroyRef = inject(DestroyRef);
+    _model;
+    /**
+     * Local, mutation-free working copy of the last filter this component pushed
+     * to `facade.read(...)`. The store-bound `filter()` input is frozen under
+     * NgRx `strictStateImmutability`, so refresh/clear operate on a clone; the
+     * read getters (`value`, `minValue`, `maxValue`, `hasValue`, …) prefer this
+     * pending copy until the real store update flows back through the input.
+     */
+    _pendingFilter = signal(undefined, ...(ngDevMode ? [{ debugName: "_pendingFilter" }] : []));
+    /** Snapshot of `filter()` that `_pendingFilter` was derived from. */
+    _pendingFilterSource;
     possibilities;
     item = input(...(ngDevMode ? [undefined, { debugName: "item" }] : []));
     filter = input(...(ngDevMode ? [undefined, { debugName: "filter" }] : []));
+    /**
+     * The filter the component should read from: the pending working copy when it
+     * is still in sync with the current input, otherwise the raw input. Once the
+     * store update arrives (a new `filter()` reference), the pending copy is
+     * considered stale and the fresh input wins.
+     */
+    effectiveFilter = computed(() => {
+        const source = this.filter();
+        const pending = this._pendingFilter();
+        if (pending && source === this._pendingFilterSource)
+            return pending;
+        return source;
+    }, ...(ngDevMode ? [{ debugName: "effectiveFilter" }] : []));
+    /**
+     * OnPush-safe replacement for `@if (value)` in templates (partial GAP-19).
+     * True when filter().query has a matching entry (key + type) with a
+     * non-empty value.
+     */
+    hasValue = computed(() => {
+        const filter = this.effectiveFilter();
+        const item = this.item();
+        if (!filter || !item || !filter.query)
+            return false;
+        const query = filter.query.find((q) => q.key === item.key && q.type === item.type);
+        if (!query)
+            return false;
+        const val = query.value;
+        return val !== null && val !== undefined && val !== '';
+    }, ...(ngDevMode ? [{ debugName: "hasValue" }] : []));
+    /**
+     * OnPush-safe replacement for `@if (minValue)` in templates (partial
+     * GAP-19). True when filter().query has a matching `>=` entry (range "from")
+     * with a non-empty value.
+     */
+    hasMinValue = computed(() => this.hasQueryValue('>='), ...(ngDevMode ? [{ debugName: "hasMinValue" }] : []));
+    /**
+     * OnPush-safe replacement for `@if (maxValue)` in templates (partial
+     * GAP-19). True when filter().query has a matching `<=` entry (range "to")
+     * with a non-empty value.
+     */
+    hasMaxValue = computed(() => this.hasQueryValue('<='), ...(ngDevMode ? [{ debugName: "hasMaxValue" }] : []));
+    /** Lazily-built model instance used to derive field options/labels. */
+    get model() {
+        return (this._model ??= new this.config.type());
+    }
     get value() {
-        const filter = this.filter();
+        const filter = this.effectiveFilter();
         const item = this.item();
         if (!filter || !item || !filter.query)
             return null;
@@ -681,7 +1075,7 @@ class BaseComponent {
         this.refresh(val);
     }
     get minValue() {
-        const filter = this.filter();
+        const filter = this.effectiveFilter();
         const item = this.item();
         if (!filter || !item || !filter.query)
             return null;
@@ -697,7 +1091,7 @@ class BaseComponent {
         this.refresh(val, '>=');
     }
     get maxValue() {
-        const filter = this.filter();
+        const filter = this.effectiveFilter();
         const item = this.item();
         if (!filter || !item || !filter.query)
             return null;
@@ -715,8 +1109,51 @@ class BaseComponent {
     get lang() {
         return this.translateService.currentLang;
     }
+    /**
+     * Returns a filter object safe to mutate. The store-bound `filter()` input is
+     * frozen under NgRx `strictStateImmutability`, so when (any part of) the
+     * source is frozen we hand back a deep-enough clone — object + query array +
+     * query entries — leaving the store untouched. When the source is a plain,
+     * extensible object (no immutability checks active) we keep operating on it in
+     * place so consumers that hold the same reference still observe the change.
+     */
+    cloneFilter() {
+        const source = this.effectiveFilter();
+        if (!source)
+            return undefined;
+        if (!this.isMutationSafe(source)) {
+            return {
+                ...source,
+                query: source.query ? source.query.map((q) => ({ ...q })) : [],
+            };
+        }
+        return source;
+    }
+    /**
+     * True when `filter` (and its query array + entries) can be mutated directly,
+     * i.e. nothing is frozen.
+     */
+    isMutationSafe(filter) {
+        if (Object.isFrozen(filter))
+            return false;
+        const query = filter.query;
+        if (!query)
+            return true;
+        if (Object.isFrozen(query))
+            return false;
+        return query.every((q) => !Object.isFrozen(q));
+    }
+    /**
+     * Records the mutated clone as the pending working copy (so read getters
+     * reflect it immediately) and dispatches it through the facade.
+     */
+    commitFilter(filter) {
+        this._pendingFilterSource = this.filter();
+        this._pendingFilter.set(filter);
+        this.facade.read(filter);
+    }
     refresh(val, type = null) {
-        const filter = this.filter();
+        const filter = this.cloneFilter();
         const item = this.item();
         if (!filter || !item)
             return;
@@ -726,7 +1163,7 @@ class BaseComponent {
             filter.query = [];
         filter.offset = 0;
         if (this.isArrayType()) {
-            this.refreshForArray(val, type);
+            this.refreshForArray(filter, val, type);
             return;
         }
         let query = filter.query.find((q) => q.key === item.key && q.type === type);
@@ -737,7 +1174,7 @@ class BaseComponent {
                     filter.query.splice(index, 1);
                 }
             }
-            this.facade.read(filter);
+            this.commitFilter(filter);
             return;
         }
         if (!query) {
@@ -750,32 +1187,99 @@ class BaseComponent {
         }
         query.value = val;
         query.label = item.label;
-        this.facade.read(filter);
+        this.commitFilter(filter);
+    }
+    /**
+     * Builds the `InputOptions` consumed by shared `smart-input-*` components for
+     * a single reactive control. When `withPossibilities` is true (radio/select
+     * style filters) the base `possibilities` signal is mapped into the
+     * `{ id, text, checked }` shape the shared inputs expect; otherwise it is
+     * omitted (text/flag filters do not need possibilities).
+     */
+    buildInputOptions(control, withPossibilities = false) {
+        const options = {
+            treeLevel: 0,
+            control,
+            model: this.model,
+            fieldKey: this.item()?.key ?? '',
+        };
+        if (withPossibilities) {
+            const source = this.possibilities ? this.possibilities() : [];
+            options.possibilities = signal(source.map(({ id, text }) => ({ id, text, checked: false })), ...(ngDevMode ? [{ debugName: "possibilities" }] : []));
+        }
+        return options;
+    }
+    /**
+     * Creates a reactive control bridged to the legacy filter state for a given
+     * query slot: seeded from the current query value for that slot (`null` ->
+     * `value` / `item.type`, `'>='` -> `minValue`, `'<='` -> `maxValue`), and
+     * wired so every change re-runs the (debounced) `refresh` for that slot.
+     */
+    bindControl(type = null) {
+        const seed = type === '>='
+            ? this.minValue
+            : type === '<='
+                ? this.maxValue
+                : this.value;
+        const control = new UntypedFormControl(seed);
+        control.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe((v) => this.refresh(v, type));
+        // TODO(GAP-19): re-sync control when filter() changes externally
+        return control;
+    }
+    /**
+     * Creates a reactive control bridged to the default (`value` / `item.type`)
+     * query slot.
+     */
+    bindValueControl() {
+        return this.bindControl(null);
     }
     clear() {
-        const filter = this.filter();
+        const filter = this.cloneFilter();
         const item = this.item();
         if (!filter || !item || !filter.query)
             return;
         filter.query = filter.query?.filter((q) => q.key !== item.key);
         filter.offset = 0;
-        this.facade.read(filter);
+        this.commitFilter(filter);
     }
     ngOnInit() {
         this.initPossibilities();
     }
     initPossibilities() {
         const item = this.item();
-        if (item?.possibilities) {
-            this.possibilities = item.possibilities;
+        if (!item)
+            return;
+        let possibilities = item.possibilities;
+        if (this.modelPossibilitiesProvider) {
+            const fromProvider = this.modelPossibilitiesProvider.get(this.config.type);
+            if (fromProvider && fromProvider[item.key]) {
+                possibilities = toSignal(fromProvider[item.key], {
+                    initialValue: [],
+                    injector: this.injector,
+                });
+            }
         }
+        if (possibilities)
+            this.possibilities = possibilities;
+    }
+    hasQueryValue(type) {
+        const filter = this.effectiveFilter();
+        const item = this.item();
+        if (!filter || !item || !filter.query)
+            return false;
+        const query = filter.query.find((q) => q.key === item.key && q.type === type);
+        if (!query)
+            return false;
+        const val = query.value;
+        return val !== null && val !== undefined && val !== '';
     }
     isArrayType() {
         const item = this.item();
         return item?.fieldType === FieldType.check;
     }
-    refreshForArray(vals, type) {
-        const filter = this.filter();
+    refreshForArray(filter, vals, type) {
         const item = this.item();
         if (!filter || !item)
             return;
@@ -789,7 +1293,7 @@ class BaseComponent {
             }
         });
         if (vals === null || vals === undefined || !vals.length) {
-            this.facade.read(filter);
+            this.commitFilter(filter);
             return;
         }
         vals.forEach((val) => {
@@ -800,7 +1304,7 @@ class BaseComponent {
             };
             filter.query.push(query);
         });
-        this.facade.read(filter);
+        this.commitFilter(filter);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
     static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: BaseComponent, isStandalone: true, inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
@@ -815,101 +1319,115 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             type: Directive
         }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], refresh: [] } });
 
+// TODO(FRA-293 GAP-19): re-sync rendered checked state when filter() changes
+// externally (the `value` getter already reads the reactive filter() signal,
+// so the `list` computed stays OnPush-safe).
 class FilterCheckComponent extends BaseComponent {
     list;
-    ngAfterContentInit() {
+    hasCheckedValues = computed(() => {
+        const v = this.value;
+        return Array.isArray(v) && v.length > 0;
+    }, ...(ngDevMode ? [{ debugName: "hasCheckedValues" }] : []));
+    ngOnInit() {
+        super.ngOnInit();
         this.list = computed(() => {
-            const possibilities = this.possibilities();
+            const possibilities = this.possibilities ? this.possibilities() : [];
+            const v = this.value ?? [];
             return possibilities.map((pos) => ({
                 value: pos,
-                isCheck: this.value.some((r) => r === pos.id),
+                isCheck: v.some((r) => r === pos.id),
             }));
         }, ...(ngDevMode ? [{ debugName: "list" }] : []));
     }
     onCheckChange(checked, entry) {
-        if (checked && !this.value.some((r) => r === entry.value.id)) {
-            this.value = [...this.value, entry.value.id];
+        if (checked && !(this.value ?? []).some((r) => r === entry.value.id)) {
+            this.value = [...(this.value ?? []), entry.value.id];
         }
-        if (!checked && this.value.some((r) => r === entry.value.id)) {
+        if (!checked && (this.value ?? []).some((r) => r === entry.value.id)) {
             this.value = this.value?.filter((r) => r !== entry.value.id);
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterCheckComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterCheckComponent, isStandalone: true, selector: "smart-crud-filter-check", usesInheritance: true, ngImport: i0, template: `
-    <!--    <ion-row>-->
-    <!--      <ion-col>-->
-    <!--        <ion-item-divider class="text-xl font-light">-->
-    <!--          <ion-icon class="mr-6 text-2xl" slot="start" name="filter-outline"></ion-icon>-->
-    <!--          <ion-label>-->
-    {{ item()?.label || '' | translate }}
-    <!--          </ion-label>-->
-    @if (value?.length) {
-      <!--            <ion-button-->
-      <!--              slot="end"-->
-      <!--              color="danger"-->
-      <!--              (click)="refresh([])"-->
-      <!--              class="square-button m-0 p-0 text-lg h-9 w-9"-->
-      <!--            >-->
-      <!--              <ion-icon class="text-2xl m-0 p-0" slot="icon-only" name="close-outline"></ion-icon>-->
-      <!--            </ion-button>-->
-    }
-    <!--        </ion-item-divider>-->
-
-    @for (entry of list(); track entry) {
-      <!--          <ion-item>-->
-      <!--<ion-label>-->{{ entry.value.text | translate
-      }}<!--</ion-label>-->
-      <!--            <ion-checkbox-->
-      <!--              slot="end"-->
-      <!--              [checked]="entry.isCheck"-->
-      <!--              (ionChange)="onCheckChange($event.detail.checked, entry)"-->
-      <!--            ></ion-checkbox>-->
-      <!--          </ion-item>-->
-    }
-    <!--      </ion-col>-->
-    <!--    </ion-row>-->
-  `, isInline: true, styles: [":host{width:100%;margin-bottom:1.2rem}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterCheckComponent, isStandalone: true, selector: "smart-crud-filter-check", host: { classAttribute: "smart:block smart:w-full" }, usesInheritance: true, ngImport: i0, template: `
+    <fieldset class="smart:w-full">
+      <legend
+        class="smart:flex smart:items-center smart:justify-between smart:text-sm smart:font-medium smart:text-gray-900"
+      >
+        <span>{{ item()?.label || '' | translate }}</span>
+        @if (hasCheckedValues()) {
+          <button
+            type="button"
+            (click)="refresh([])"
+            aria-label="clear"
+            class="smart:rounded smart:px-2 smart:py-1 smart:text-red-600 smart:hover:bg-red-50"
+          >
+            ×
+          </button>
+        }
+      </legend>
+      <div class="smart:mt-2 smart:space-y-2">
+        @for (entry of list(); track entry.value.id) {
+          <label class="smart:flex smart:items-center smart:gap-x-2">
+            <input
+              type="checkbox"
+              [checked]="entry.isCheck"
+              (change)="onCheckChange($any($event.target).checked, entry)"
+              class="smart:h-4 smart:w-4 smart:rounded smart:border-gray-300 smart:text-indigo-600 smart:focus:ring-indigo-500"
+            />
+            <span class="smart:text-sm smart:text-gray-900">{{
+              entry.value.text | translate
+            }}</span>
+          </label>
+        }
+      </div>
+    </fieldset>
+  `, isInline: true, dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterCheckComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-crud-filter-check', template: `
-    <!--    <ion-row>-->
-    <!--      <ion-col>-->
-    <!--        <ion-item-divider class="text-xl font-light">-->
-    <!--          <ion-icon class="mr-6 text-2xl" slot="start" name="filter-outline"></ion-icon>-->
-    <!--          <ion-label>-->
-    {{ item()?.label || '' | translate }}
-    <!--          </ion-label>-->
-    @if (value?.length) {
-      <!--            <ion-button-->
-      <!--              slot="end"-->
-      <!--              color="danger"-->
-      <!--              (click)="refresh([])"-->
-      <!--              class="square-button m-0 p-0 text-lg h-9 w-9"-->
-      <!--            >-->
-      <!--              <ion-icon class="text-2xl m-0 p-0" slot="icon-only" name="close-outline"></ion-icon>-->
-      <!--            </ion-button>-->
-    }
-    <!--        </ion-item-divider>-->
-
-    @for (entry of list(); track entry) {
-      <!--          <ion-item>-->
-      <!--<ion-label>-->{{ entry.value.text | translate
-      }}<!--</ion-label>-->
-      <!--            <ion-checkbox-->
-      <!--              slot="end"-->
-      <!--              [checked]="entry.isCheck"-->
-      <!--              (ionChange)="onCheckChange($event.detail.checked, entry)"-->
-      <!--            ></ion-checkbox>-->
-      <!--          </ion-item>-->
-    }
-    <!--      </ion-col>-->
-    <!--    </ion-row>-->
-  `, imports: [TranslatePipe], styles: [":host{width:100%;margin-bottom:1.2rem}\n"] }]
+            args: [{
+                    selector: 'smart-crud-filter-check',
+                    host: { class: 'smart:block smart:w-full' },
+                    template: `
+    <fieldset class="smart:w-full">
+      <legend
+        class="smart:flex smart:items-center smart:justify-between smart:text-sm smart:font-medium smart:text-gray-900"
+      >
+        <span>{{ item()?.label || '' | translate }}</span>
+        @if (hasCheckedValues()) {
+          <button
+            type="button"
+            (click)="refresh([])"
+            aria-label="clear"
+            class="smart:rounded smart:px-2 smart:py-1 smart:text-red-600 smart:hover:bg-red-50"
+          >
+            ×
+          </button>
+        }
+      </legend>
+      <div class="smart:mt-2 smart:space-y-2">
+        @for (entry of list(); track entry.value.id) {
+          <label class="smart:flex smart:items-center smart:gap-x-2">
+            <input
+              type="checkbox"
+              [checked]="entry.isCheck"
+              (change)="onCheckChange($any($event.target).checked, entry)"
+              class="smart:h-4 smart:w-4 smart:rounded smart:border-gray-300 smart:text-indigo-600 smart:focus:ring-indigo-500"
+            />
+            <span class="smart:text-sm smart:text-gray-900">{{
+              entry.value.text | translate
+            }}</span>
+          </label>
+        }
+      </div>
+    </fieldset>
+  `,
+                    imports: [TranslatePipe],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
         }] });
 
 class FilterDateComponent extends BaseComponent {
-    id = GuidService.create();
     get allowAdvanced() {
         const item = this.item();
         return item?.type === '=';
@@ -945,150 +1463,437 @@ class FilterDateComponent extends BaseComponent {
         return this.maxValue;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterDateComponent, isStandalone: true, selector: "smart-crud-filter-date", usesInheritance: true, ngImport: i0, template: "<!--<ion-row>-->\n<!--  <ion-col>-->\n<!--    <ion-label>-->\n{{ item()?.label || '' | translate }}\n<!--    </ion-label>-->\n<!--    <ion-item button=\"true\" id=\"open-date-input-{{ id }}\" color=\"primary\">-->\n<!--      <ion-text>-->\n{{ customValue ? customValue : ('select' | translate) }}\n<!--      </ion-text>-->\n<!--      <ion-popover trigger=\"open-date-input-{{ id }}\" show-backdrop=\"false\">-->\n<ng-template>\n  <!--          <ion-datetime-->\n  <!--            displayFormat=\"YYYY-MM-DD\"-->\n  <!--            pickerFormat=\"YYYY-MM-DD\"-->\n  <!--            [(ngModel)]=\"customValue\"-->\n  <!--            presentation=\"date\"-->\n  <!--          ></ion-datetime>-->\n</ng-template>\n<!--      </ion-popover>-->\n<!--    </ion-item>-->\n<!--  </ion-col>-->\n\n@if (value) {\n  <!--    <ion-col size=\"auto\">-->\n  <!--      <ion-button color=\"danger\" (click)=\"refresh(null)\" class=\"square-button m-3\">-->\n  <!--        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>-->\n  <!--      </ion-button>-->\n  <!--    </ion-col>-->\n}\n<!--</ion-row>-->\n", styles: [":host{width:100%}:host .square-button{height:var(--smart-button-height)!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterDateComponent, isStandalone: true, selector: "smart-crud-filter-date", host: { classAttribute: "smart:block smart:w-full" }, usesInheritance: true, ngImport: i0, template: `
+    <label class="smart:mb-1 smart:block smart:text-sm smart:font-medium">
+      {{ item()?.label || '' | translate }}
+    </label>
+    <div class="smart:flex smart:w-full smart:items-end smart:gap-2">
+      <smart-date-edit
+        class="smart:flex-1"
+        [ngModel]="customValue || ''"
+        (ngModelChange)="customValue = $event"
+      ></smart-date-edit>
+      @if (hasValue()) {
+        <button
+          type="button"
+          (click)="refresh(null)"
+          aria-label="clear"
+          class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+        >
+          ×
+        </button>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: DateEditComponent, selector: "smart-date-edit", inputs: ["variant", "class", "ngModel"], outputs: ["ngModelChange", "validChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterDateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-crud-filter-date', imports: [FormsModule, TranslatePipe], template: "<!--<ion-row>-->\n<!--  <ion-col>-->\n<!--    <ion-label>-->\n{{ item()?.label || '' | translate }}\n<!--    </ion-label>-->\n<!--    <ion-item button=\"true\" id=\"open-date-input-{{ id }}\" color=\"primary\">-->\n<!--      <ion-text>-->\n{{ customValue ? customValue : ('select' | translate) }}\n<!--      </ion-text>-->\n<!--      <ion-popover trigger=\"open-date-input-{{ id }}\" show-backdrop=\"false\">-->\n<ng-template>\n  <!--          <ion-datetime-->\n  <!--            displayFormat=\"YYYY-MM-DD\"-->\n  <!--            pickerFormat=\"YYYY-MM-DD\"-->\n  <!--            [(ngModel)]=\"customValue\"-->\n  <!--            presentation=\"date\"-->\n  <!--          ></ion-datetime>-->\n</ng-template>\n<!--      </ion-popover>-->\n<!--    </ion-item>-->\n<!--  </ion-col>-->\n\n@if (value) {\n  <!--    <ion-col size=\"auto\">-->\n  <!--      <ion-button color=\"danger\" (click)=\"refresh(null)\" class=\"square-button m-3\">-->\n  <!--        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>-->\n  <!--      </ion-button>-->\n  <!--    </ion-col>-->\n}\n<!--</ion-row>-->\n", styles: [":host{width:100%}:host .square-button{height:var(--smart-button-height)!important}\n"] }]
+            args: [{
+                    selector: 'smart-crud-filter-date',
+                    host: { class: 'smart:block smart:w-full' },
+                    // TODO(FRA-293 GAP-19): re-sync picker when filter() changes externally
+                    template: `
+    <label class="smart:mb-1 smart:block smart:text-sm smart:font-medium">
+      {{ item()?.label || '' | translate }}
+    </label>
+    <div class="smart:flex smart:w-full smart:items-end smart:gap-2">
+      <smart-date-edit
+        class="smart:flex-1"
+        [ngModel]="customValue || ''"
+        (ngModelChange)="customValue = $event"
+      ></smart-date-edit>
+      @if (hasValue()) {
+        <button
+          type="button"
+          (click)="refresh(null)"
+          aria-label="clear"
+          class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+        >
+          ×
+        </button>
+      }
+    </div>
+  `,
+                    imports: [DateEditComponent, FormsModule, TranslatePipe],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
         }] });
 
 class FilterDateTimeComponent extends FilterDateComponent {
-    _subscriptions = new Subscription();
-    id = GuidService.create();
-    // @ViewChild(IonDatetime, { read: IonDatetime, static: false })
-    // dateTimePicker: IonDatetime;
-    ngOnInit() {
-        super.ngOnInit();
-        // if (this.dateTimePicker) {
-        //   this._subscriptions.add(
-        //     this.dateTimePicker.ionChange.subscribe((val: CustomEvent) => {
-        //       this.customValue = val.detail.value;
-        //     }),
-        //   );
-        // } else {
-        //   console.error('dateTimePicker not found!');
-        // }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterDateTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterDateTimeComponent, isStandalone: true, selector: "smart-crud-filter-date-time", host: { classAttribute: "smart:block smart:w-full" }, usesInheritance: true, ngImport: i0, template: `
+    <label class="smart:mb-1 smart:block smart:text-sm smart:font-medium">
+      {{ item()?.label || '' | translate }}
+    </label>
+    <div class="smart:flex smart:w-full smart:flex-col smart:gap-2">
+      <div class="smart:flex smart:w-full smart:items-end smart:gap-2">
+        <label class="smart:text-sm">{{ 'from' | translate }}</label>
+        <input
+          type="datetime-local"
+          class="smart:flex-1 smart:rounded smart:border smart:border-gray-300 smart:px-2 smart:py-1"
+          [ngModel]="customMinValue || ''"
+          (ngModelChange)="customMinValue = $event"
+        />
+        @if (hasMinValue()) {
+          <button
+            type="button"
+            (click)="refresh(null, '>=')"
+            aria-label="clear-from"
+            class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+          >
+            ×
+          </button>
+        }
+      </div>
+      <div class="smart:flex smart:w-full smart:items-end smart:gap-2">
+        <label class="smart:text-sm">{{ 'to' | translate }}</label>
+        <input
+          type="datetime-local"
+          class="smart:flex-1 smart:rounded smart:border smart:border-gray-300 smart:px-2 smart:py-1"
+          [ngModel]="customMaxValue || ''"
+          (ngModelChange)="customMaxValue = $event"
+        />
+        @if (hasMaxValue()) {
+          <button
+            type="button"
+            (click)="refresh(null, '<=')"
+            aria-label="clear-to"
+            class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+          >
+            ×
+          </button>
+        }
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterDateTimeComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'smart-crud-filter-date-time',
+                    host: { class: 'smart:block smart:w-full' },
+                    // TODO(FRA-293 GAP-19): re-sync picker when filter() changes externally
+                    template: `
+    <label class="smart:mb-1 smart:block smart:text-sm smart:font-medium">
+      {{ item()?.label || '' | translate }}
+    </label>
+    <div class="smart:flex smart:w-full smart:flex-col smart:gap-2">
+      <div class="smart:flex smart:w-full smart:items-end smart:gap-2">
+        <label class="smart:text-sm">{{ 'from' | translate }}</label>
+        <input
+          type="datetime-local"
+          class="smart:flex-1 smart:rounded smart:border smart:border-gray-300 smart:px-2 smart:py-1"
+          [ngModel]="customMinValue || ''"
+          (ngModelChange)="customMinValue = $event"
+        />
+        @if (hasMinValue()) {
+          <button
+            type="button"
+            (click)="refresh(null, '>=')"
+            aria-label="clear-from"
+            class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+          >
+            ×
+          </button>
+        }
+      </div>
+      <div class="smart:flex smart:w-full smart:items-end smart:gap-2">
+        <label class="smart:text-sm">{{ 'to' | translate }}</label>
+        <input
+          type="datetime-local"
+          class="smart:flex-1 smart:rounded smart:border smart:border-gray-300 smart:px-2 smart:py-1"
+          [ngModel]="customMaxValue || ''"
+          (ngModelChange)="customMaxValue = $event"
+        />
+        @if (hasMaxValue()) {
+          <button
+            type="button"
+            (click)="refresh(null, '<=')"
+            aria-label="clear-to"
+            class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+          >
+            ×
+          </button>
+        }
+      </div>
+    </div>
+  `,
+                    imports: [TranslatePipe, FormsModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }] });
+
+class FilterDateWithEditComponent extends FilterDateComponent {
+    advanced = signal(false, ...(ngDevMode ? [{ debugName: "advanced" }] : []));
+    toggleAdvanced() {
+        this.advanced.update((val) => !val);
+        if (this.advanced()) {
+            this.value = null;
+        }
     }
-    ngOnDestroy() {
-        if (this._subscriptions) {
-            this._subscriptions.unsubscribe();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterDateWithEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterDateWithEditComponent, isStandalone: true, selector: "smart-crud-filter-date-with-edit", host: { classAttribute: "smart:block smart:w-full" }, usesInheritance: true, ngImport: i0, template: `
+    <label class="smart:mb-1 smart:block smart:text-sm smart:font-medium">
+      {{ item()?.label || '' | translate }}
+    </label>
+
+    @if (!advanced()) {
+      <div class="smart:flex smart:w-full smart:items-end smart:gap-2">
+        <smart-date-edit
+          class="smart:flex-1"
+          [ngModel]="customValue || ''"
+          (ngModelChange)="customValue = $event"
+        ></smart-date-edit>
+        @if (allowAdvanced) {
+          <button
+            type="button"
+            (click)="toggleAdvanced()"
+            aria-label="advanced"
+            class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:hover:bg-gray-100"
+          >
+            ⚙
+          </button>
+        }
+        @if (hasValue()) {
+          <button
+            type="button"
+            (click)="refresh(null)"
+            aria-label="clear"
+            class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+          >
+            ×
+          </button>
         }
+      </div>
+    } @else if (allowAdvanced) {
+      <button
+        type="button"
+        (click)="toggleAdvanced()"
+        aria-label="advanced"
+        class="smart:mb-2 smart:rounded smart:px-2 smart:py-2 smart:hover:bg-gray-100"
+      >
+        ⚙
+      </button>
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterDateTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterDateTimeComponent, isStandalone: true, selector: "smart-crud-filter-date-time", usesInheritance: true, ngImport: i0, template: "<!--<ion-row>-->\n<!--  <ion-col>-->\n<!--    <ion-label>-->\n{{ item()?.label || '' | translate }}\n<!--    </ion-label>-->\n<!--  </ion-col>-->\n@if (value || minValue || maxValue) {\n  <!--    <ion-col size=\"auto\">-->\n  <!--      <ion-button color=\"danger\" (click)=\"clear()\" class=\"square-button m-3\">-->\n  <!--        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>-->\n  <!--      </ion-button>-->\n  <!--    </ion-col>-->\n}\n<!--</ion-row>-->\n<!--<ion-row>-->\n<!--  <ion-col>-->\n<!--    <ion-item>-->\n<!--      <ion-label>-->\n{{ 'from' | translate }}\n<!--      </ion-label>-->\n<!--      <ion-input-->\n<!--        placeholder=\"YYYY-MM-DD HH:mm:ss\"-->\n<!--        [(ngModel)]=\"customMinValue\"-->\n<!--        pattern=\"^[0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}$\"-->\n<!--      ></ion-input>-->\n<!--    </ion-item>-->\n<!--  </ion-col>-->\n@if (customMinValue) {\n  <!--    <ion-col size=\"auto\">-->\n  <!--      <ion-button-->\n  <!--        color=\"danger\"-->\n  <!--        (click)=\"refresh(null, '>=')\"-->\n  <!--        class=\"square-button m-3\"-->\n  <!--      >-->\n  <!--        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>-->\n  <!--      </ion-button>-->\n  <!--    </ion-col>-->\n}\n<!--  <ion-col>-->\n<!--    <ion-item>-->\n<!--      <ion-label>-->\n{{ 'to' | translate }}\n<!--      </ion-label>-->\n<!--      <ion-input-->\n<!--        placeholder=\"YYYY-MM-DD HH:mm:ss\"-->\n<!--        [(ngModel)]=\"customMaxValue\"-->\n<!--        pattern=\"^[0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}$\"-->\n<!--      ></ion-input>-->\n<!--    </ion-item>-->\n<!--  </ion-col>-->\n@if (customMaxValue) {\n  <!--    <ion-col size=\"auto\">-->\n  <!--      <ion-button-->\n  <!--        color=\"danger\"-->\n  <!--        (click)=\"refresh(null, '<=')\"-->\n  <!--        class=\"square-button m-3\"-->\n  <!--      >-->\n  <!--        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>-->\n  <!--      </ion-button>-->\n  <!--    </ion-col>-->\n}\n<!--</ion-row>-->\n", styles: [":host{width:100%}:host .square-button{height:var(--smart-button-height)!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+
+    @if ((advanced() || hasMinValue() || hasMaxValue()) && allowAdvanced) {
+      <div class="smart:flex smart:w-full smart:flex-col smart:gap-2">
+        <div class="smart:flex smart:w-full smart:items-end smart:gap-2">
+          <label class="smart:text-sm">{{ 'from' | translate }}</label>
+          <smart-date-edit
+            class="smart:flex-1"
+            [ngModel]="customMinValue || ''"
+            (ngModelChange)="customMinValue = $event"
+          ></smart-date-edit>
+          @if (hasMinValue()) {
+            <button
+              type="button"
+              (click)="refresh(null, '>=')"
+              aria-label="clear-from"
+              class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+            >
+              ×
+            </button>
+          }
+        </div>
+        <div class="smart:flex smart:w-full smart:items-end smart:gap-2">
+          <label class="smart:text-sm">{{ 'to' | translate }}</label>
+          <smart-date-edit
+            class="smart:flex-1"
+            [ngModel]="customMaxValue || ''"
+            (ngModelChange)="customMaxValue = $event"
+          ></smart-date-edit>
+          @if (hasMaxValue()) {
+            <button
+              type="button"
+              (click)="refresh(null, '<=')"
+              aria-label="clear-to"
+              class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+            >
+              ×
+            </button>
+          }
+        </div>
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: DateEditComponent, selector: "smart-date-edit", inputs: ["variant", "class", "ngModel"], outputs: ["ngModelChange", "validChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterDateTimeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterDateWithEditComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-crud-filter-date-time', imports: [TranslatePipe, FormsModule], template: "<!--<ion-row>-->\n<!--  <ion-col>-->\n<!--    <ion-label>-->\n{{ item()?.label || '' | translate }}\n<!--    </ion-label>-->\n<!--  </ion-col>-->\n@if (value || minValue || maxValue) {\n  <!--    <ion-col size=\"auto\">-->\n  <!--      <ion-button color=\"danger\" (click)=\"clear()\" class=\"square-button m-3\">-->\n  <!--        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>-->\n  <!--      </ion-button>-->\n  <!--    </ion-col>-->\n}\n<!--</ion-row>-->\n<!--<ion-row>-->\n<!--  <ion-col>-->\n<!--    <ion-item>-->\n<!--      <ion-label>-->\n{{ 'from' | translate }}\n<!--      </ion-label>-->\n<!--      <ion-input-->\n<!--        placeholder=\"YYYY-MM-DD HH:mm:ss\"-->\n<!--        [(ngModel)]=\"customMinValue\"-->\n<!--        pattern=\"^[0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}$\"-->\n<!--      ></ion-input>-->\n<!--    </ion-item>-->\n<!--  </ion-col>-->\n@if (customMinValue) {\n  <!--    <ion-col size=\"auto\">-->\n  <!--      <ion-button-->\n  <!--        color=\"danger\"-->\n  <!--        (click)=\"refresh(null, '>=')\"-->\n  <!--        class=\"square-button m-3\"-->\n  <!--      >-->\n  <!--        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>-->\n  <!--      </ion-button>-->\n  <!--    </ion-col>-->\n}\n<!--  <ion-col>-->\n<!--    <ion-item>-->\n<!--      <ion-label>-->\n{{ 'to' | translate }}\n<!--      </ion-label>-->\n<!--      <ion-input-->\n<!--        placeholder=\"YYYY-MM-DD HH:mm:ss\"-->\n<!--        [(ngModel)]=\"customMaxValue\"-->\n<!--        pattern=\"^[0-9]{4}-[0-9]{2}-[0-9]{2} [0-9]{2}:[0-9]{2}:[0-9]{2}$\"-->\n<!--      ></ion-input>-->\n<!--    </ion-item>-->\n<!--  </ion-col>-->\n@if (customMaxValue) {\n  <!--    <ion-col size=\"auto\">-->\n  <!--      <ion-button-->\n  <!--        color=\"danger\"-->\n  <!--        (click)=\"refresh(null, '<=')\"-->\n  <!--        class=\"square-button m-3\"-->\n  <!--      >-->\n  <!--        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>-->\n  <!--      </ion-button>-->\n  <!--    </ion-col>-->\n}\n<!--</ion-row>-->\n", styles: [":host{width:100%}:host .square-button{height:var(--smart-button-height)!important}\n"] }]
+            args: [{
+                    selector: 'smart-crud-filter-date-with-edit',
+                    host: { class: 'smart:block smart:w-full' },
+                    // TODO(FRA-293 GAP-19): re-sync picker when filter() changes externally
+                    template: `
+    <label class="smart:mb-1 smart:block smart:text-sm smart:font-medium">
+      {{ item()?.label || '' | translate }}
+    </label>
+
+    @if (!advanced()) {
+      <div class="smart:flex smart:w-full smart:items-end smart:gap-2">
+        <smart-date-edit
+          class="smart:flex-1"
+          [ngModel]="customValue || ''"
+          (ngModelChange)="customValue = $event"
+        ></smart-date-edit>
+        @if (allowAdvanced) {
+          <button
+            type="button"
+            (click)="toggleAdvanced()"
+            aria-label="advanced"
+            class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:hover:bg-gray-100"
+          >
+            ⚙
+          </button>
+        }
+        @if (hasValue()) {
+          <button
+            type="button"
+            (click)="refresh(null)"
+            aria-label="clear"
+            class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+          >
+            ×
+          </button>
+        }
+      </div>
+    } @else if (allowAdvanced) {
+      <button
+        type="button"
+        (click)="toggleAdvanced()"
+        aria-label="advanced"
+        class="smart:mb-2 smart:rounded smart:px-2 smart:py-2 smart:hover:bg-gray-100"
+      >
+        ⚙
+      </button>
+    }
+
+    @if ((advanced() || hasMinValue() || hasMaxValue()) && allowAdvanced) {
+      <div class="smart:flex smart:w-full smart:flex-col smart:gap-2">
+        <div class="smart:flex smart:w-full smart:items-end smart:gap-2">
+          <label class="smart:text-sm">{{ 'from' | translate }}</label>
+          <smart-date-edit
+            class="smart:flex-1"
+            [ngModel]="customMinValue || ''"
+            (ngModelChange)="customMinValue = $event"
+          ></smart-date-edit>
+          @if (hasMinValue()) {
+            <button
+              type="button"
+              (click)="refresh(null, '>=')"
+              aria-label="clear-from"
+              class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+            >
+              ×
+            </button>
+          }
+        </div>
+        <div class="smart:flex smart:w-full smart:items-end smart:gap-2">
+          <label class="smart:text-sm">{{ 'to' | translate }}</label>
+          <smart-date-edit
+            class="smart:flex-1"
+            [ngModel]="customMaxValue || ''"
+            (ngModelChange)="customMaxValue = $event"
+          ></smart-date-edit>
+          @if (hasMaxValue()) {
+            <button
+              type="button"
+              (click)="refresh(null, '<=')"
+              aria-label="clear-to"
+              class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+            >
+              ×
+            </button>
+          }
+        </div>
+      </div>
+    }
+  `,
+                    imports: [DateEditComponent, FormsModule, TranslatePipe],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
         }] });
 
-class FilterDateWithEditComponent extends FilterDateComponent {
-    _subscriptions = new Subscription();
-    advanced = signal(false, ...(ngDevMode ? [{ debugName: "advanced" }] : []));
-    id = GuidService.create();
-    // @ViewChild(IonDatetime, { read: IonDatetime, static: false })
-    // dateTimePicker: IonDatetime;
-    toggleAdvanced() {
-        this.advanced.update((val) => !val);
-        if (this.advanced()) {
-            this.value = null;
-        }
-    }
+class FilterFlagComponent extends BaseComponent {
+    inputOptions = signal(undefined, ...(ngDevMode ? [{ debugName: "inputOptions" }] : []));
+    fieldOptions = signal(undefined, ...(ngDevMode ? [{ debugName: "fieldOptions" }] : []));
     ngOnInit() {
         super.ngOnInit();
-        // if (this.dateTimePicker) {
-        //   this._subscriptions.add(
-        //     this.dateTimePicker.ionChange.subscribe((val: CustomEvent) => {
-        //       this.customValue = val.detail.value;
-        //     }),
-        //   );
-        // } else {
-        //   console.error('dateTimePicker not found!');
-        // }
+        const control = this.bindValueControl();
+        this.inputOptions.set(this.buildInputOptions(control));
     }
-    ngOnDestroy() {
-        if (this._subscriptions) {
-            this._subscriptions.unsubscribe();
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterFlagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterFlagComponent, isStandalone: true, selector: "smart-crud-filter-flag", host: { classAttribute: "smart:block smart:w-full" }, usesInheritance: true, ngImport: i0, template: `
+    @if (inputOptions()) {
+      <div class="smart:flex smart:w-full smart:items-center smart:gap-2">
+        <smart-input-flag
+          class="smart:flex-1"
+          [options]="inputOptions()!"
+          [fieldOptions]="fieldOptions()"
+        ></smart-input-flag>
+        @if (value === true || value === false) {
+          <button
+            type="button"
+            (click)="refresh(null)"
+            aria-label="clear"
+            class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+          >
+            ×
+          </button>
         }
+      </div>
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterDateWithEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterDateWithEditComponent, isStandalone: true, selector: "smart-crud-filter-date-with-edit", usesInheritance: true, ngImport: i0, template: "<!--<ion-row>-->\n<!--  <ion-col>-->\n<!--    <ion-label>-->\n{{ item()?.label || '' | translate }}\n<!--    </ion-label>-->\n\n@if (!advanced()) {\n  <!--      <ion-input-->\n  <!--        placeholder=\"YYYY-MM-DD\"-->\n  <!--        [(ngModel)]=\"customValue\"-->\n  <!--        [pattern]=\"'([12]\\\\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\\\d|3[01]))'\"-->\n  <!--      ></ion-input>-->\n}\n<!--  </ion-col>-->\n\n@if (!advanced()) {\n  <!--    <ion-col size=\"auto\">-->\n  <!--      <ion-button id=\"open-date-input-{{ id }}\" class=\"square-button m-3\">-->\n  <!--        <ion-icon slot=\"icon-only\" name=\"calendar-outline\"></ion-icon>-->\n  <!--        <ion-popover trigger=\"open-date-input-{{ id }}\" show-backdrop=\"false\">-->\n  <ng-template>\n    <!--            <ion-datetime-->\n    <!--              displayFormat=\"YYYY-MM-DD\"-->\n    <!--              pickerFormat=\"YYYY-MM-DD\"-->\n    <!--              [(ngModel)]=\"customValue\"-->\n    <!--              presentation=\"date\"-->\n    <!--              first-day-of-week=\"1\"-->\n    <!--              locale=\"{{ lang }}\"-->\n    <!--            ></ion-datetime>-->\n  </ng-template>\n  <!--        </ion-popover>-->\n  <!--      </ion-button>-->\n  <!--    </ion-col>-->\n}\n@if (allowAdvanced) {\n  <!--    <ion-col size=\"auto\">-->\n  <!--      <ion-button-->\n  <!--        (click)=\"toggleAdvanced()\"-->\n  <!--        class=\"square-button m-3\"-->\n  <!--        [disabled]=\"minValue || maxValue\"-->\n  <!--      >-->\n  @if (!advanced()) {\n    <!--          <ion-icon slot=\"icon-only\" name=\"settings-outline\"></ion-icon>-->\n  } @else {\n    <!--          <ion-icon slot=\"icon-only\" name=\"settings\"></ion-icon>-->\n  }\n  <!--      </ion-button>-->\n  <!--    </ion-col>-->\n}\n@if (value || minValue || maxValue) {\n  <!--    <ion-col size=\"auto\">-->\n  <!--      <ion-button color=\"danger\" (click)=\"clear()\" class=\"square-button m-3\">-->\n  <!--        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>-->\n  <!--      </ion-button>-->\n  <!--    </ion-col>-->\n}\n<!--</ion-row>-->\n\n@if ((advanced() || minValue || maxValue) && allowAdvanced) {\n  <!--  <ion-row>-->\n  <!--    <ion-col>-->\n  <!--      <ion-item>-->\n  <!--        <ion-label>-->\n  {{ 'from' | translate }}\n  <!--        </ion-label>-->\n  <!--        <ion-input-->\n  <!--          placeholder=\"YYYY-MM-DD\"-->\n  <!--          [(ngModel)]=\"customMinValue\"-->\n  <!--          [pattern]=\"'([12]\\\\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\\\d|3[01]))'\"-->\n  <!--        ></ion-input>-->\n  <!--      </ion-item>-->\n  <!--    </ion-col>-->\n  @if (customMinValue) {\n    <!--      <ion-col size=\"auto\">-->\n    <!--        <ion-button-->\n    <!--          color=\"danger\"-->\n    <!--          (click)=\"refresh(null, '>=')\"-->\n    <!--          class=\"square-button m-3\"-->\n    <!--        >-->\n    <!--          <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>-->\n    <!--        </ion-button>-->\n    <!--      </ion-col>-->\n  }\n  <!--    <ion-col>-->\n  <!--      <ion-item>-->\n  <!--        <ion-label>-->\n  {{ 'to' | translate }}\n  <!--        </ion-label>-->\n  <!--        <ion-input-->\n  <!--          placeholder=\"YYYY-MM-DD\"-->\n  <!--          [(ngModel)]=\"customMaxValue\"-->\n  <!--          [pattern]=\"'([12]\\\\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\\\d|3[01]))'\"-->\n  <!--        ></ion-input>-->\n  <!--      </ion-item>-->\n  <!--    </ion-col>-->\n\n  @if (customMaxValue) {\n    <!--      <ion-col size=\"auto\">-->\n    <!--        <ion-button-->\n    <!--          color=\"danger\"-->\n    <!--          (click)=\"refresh(null, '<=')\"-->\n    <!--          class=\"square-button m-3\"-->\n    <!--        >-->\n    <!--          <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>-->\n    <!--        </ion-button>-->\n    <!--      </ion-col>-->\n  }\n  <!--  </ion-row>-->\n}\n", styles: [":host{width:100%}:host .square-button{height:var(--smart-button-height)!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterDateWithEditComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'smart-crud-filter-date-with-edit', imports: [TranslatePipe, FormsModule], template: "<!--<ion-row>-->\n<!--  <ion-col>-->\n<!--    <ion-label>-->\n{{ item()?.label || '' | translate }}\n<!--    </ion-label>-->\n\n@if (!advanced()) {\n  <!--      <ion-input-->\n  <!--        placeholder=\"YYYY-MM-DD\"-->\n  <!--        [(ngModel)]=\"customValue\"-->\n  <!--        [pattern]=\"'([12]\\\\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\\\d|3[01]))'\"-->\n  <!--      ></ion-input>-->\n}\n<!--  </ion-col>-->\n\n@if (!advanced()) {\n  <!--    <ion-col size=\"auto\">-->\n  <!--      <ion-button id=\"open-date-input-{{ id }}\" class=\"square-button m-3\">-->\n  <!--        <ion-icon slot=\"icon-only\" name=\"calendar-outline\"></ion-icon>-->\n  <!--        <ion-popover trigger=\"open-date-input-{{ id }}\" show-backdrop=\"false\">-->\n  <ng-template>\n    <!--            <ion-datetime-->\n    <!--              displayFormat=\"YYYY-MM-DD\"-->\n    <!--              pickerFormat=\"YYYY-MM-DD\"-->\n    <!--              [(ngModel)]=\"customValue\"-->\n    <!--              presentation=\"date\"-->\n    <!--              first-day-of-week=\"1\"-->\n    <!--              locale=\"{{ lang }}\"-->\n    <!--            ></ion-datetime>-->\n  </ng-template>\n  <!--        </ion-popover>-->\n  <!--      </ion-button>-->\n  <!--    </ion-col>-->\n}\n@if (allowAdvanced) {\n  <!--    <ion-col size=\"auto\">-->\n  <!--      <ion-button-->\n  <!--        (click)=\"toggleAdvanced()\"-->\n  <!--        class=\"square-button m-3\"-->\n  <!--        [disabled]=\"minValue || maxValue\"-->\n  <!--      >-->\n  @if (!advanced()) {\n    <!--          <ion-icon slot=\"icon-only\" name=\"settings-outline\"></ion-icon>-->\n  } @else {\n    <!--          <ion-icon slot=\"icon-only\" name=\"settings\"></ion-icon>-->\n  }\n  <!--      </ion-button>-->\n  <!--    </ion-col>-->\n}\n@if (value || minValue || maxValue) {\n  <!--    <ion-col size=\"auto\">-->\n  <!--      <ion-button color=\"danger\" (click)=\"clear()\" class=\"square-button m-3\">-->\n  <!--        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>-->\n  <!--      </ion-button>-->\n  <!--    </ion-col>-->\n}\n<!--</ion-row>-->\n\n@if ((advanced() || minValue || maxValue) && allowAdvanced) {\n  <!--  <ion-row>-->\n  <!--    <ion-col>-->\n  <!--      <ion-item>-->\n  <!--        <ion-label>-->\n  {{ 'from' | translate }}\n  <!--        </ion-label>-->\n  <!--        <ion-input-->\n  <!--          placeholder=\"YYYY-MM-DD\"-->\n  <!--          [(ngModel)]=\"customMinValue\"-->\n  <!--          [pattern]=\"'([12]\\\\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\\\d|3[01]))'\"-->\n  <!--        ></ion-input>-->\n  <!--      </ion-item>-->\n  <!--    </ion-col>-->\n  @if (customMinValue) {\n    <!--      <ion-col size=\"auto\">-->\n    <!--        <ion-button-->\n    <!--          color=\"danger\"-->\n    <!--          (click)=\"refresh(null, '>=')\"-->\n    <!--          class=\"square-button m-3\"-->\n    <!--        >-->\n    <!--          <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>-->\n    <!--        </ion-button>-->\n    <!--      </ion-col>-->\n  }\n  <!--    <ion-col>-->\n  <!--      <ion-item>-->\n  <!--        <ion-label>-->\n  {{ 'to' | translate }}\n  <!--        </ion-label>-->\n  <!--        <ion-input-->\n  <!--          placeholder=\"YYYY-MM-DD\"-->\n  <!--          [(ngModel)]=\"customMaxValue\"-->\n  <!--          [pattern]=\"'([12]\\\\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\\\d|3[01]))'\"-->\n  <!--        ></ion-input>-->\n  <!--      </ion-item>-->\n  <!--    </ion-col>-->\n\n  @if (customMaxValue) {\n    <!--      <ion-col size=\"auto\">-->\n    <!--        <ion-button-->\n    <!--          color=\"danger\"-->\n    <!--          (click)=\"refresh(null, '<=')\"-->\n    <!--          class=\"square-button m-3\"-->\n    <!--        >-->\n    <!--          <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>-->\n    <!--        </ion-button>-->\n    <!--      </ion-col>-->\n  }\n  <!--  </ion-row>-->\n}\n", styles: [":host{width:100%}:host .square-button{height:var(--smart-button-height)!important}\n"] }]
-        }] });
-
-class FilterFlagComponent extends BaseComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterFlagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterFlagComponent, isStandalone: true, selector: "smart-crud-filter-flag", usesInheritance: true, ngImport: i0, template: `
-    <!--    <ion-row>-->
-    <!--      <ion-col>-->
-    <div
-      class="flag-container w-full flex flex-row flex-nowrap justify-between pr-5"
-    >
-      <!--          <ion-label class="align-middle my-6" position="static">-->
-      {{ item()?.label || '' | translate }}
-      <!--          </ion-label>-->
-      <!--          <ion-checkbox [(ngModel)]="value" slot="end"></ion-checkbox>-->
-    </div>
-    <!--      </ion-col>-->
-    @if (typeof value === 'boolean') {
-      <!--        <ion-col size="auto">-->
-      <!--          <ion-button-->
-      <!--            color="danger"-->
-      <!--            (click)="refresh(null)"-->
-      <!--            class="square-button m-3"-->
-      <!--          >-->
-      <!--            <ion-icon slot="icon-only" name="close-outline"></ion-icon>-->
-      <!--          </ion-button>-->
-      <!--        </ion-col>-->
-    }
-    <!--    </ion-row>-->
-  `, isInline: true, styles: [":host{width:100%}:host .square-button{height:var(--smart-button-height)!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: InputFlagComponent, selector: "smart-input-flag" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterFlagComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-crud-filter-flag', template: `
-    <!--    <ion-row>-->
-    <!--      <ion-col>-->
-    <div
-      class="flag-container w-full flex flex-row flex-nowrap justify-between pr-5"
-    >
-      <!--          <ion-label class="align-middle my-6" position="static">-->
-      {{ item()?.label || '' | translate }}
-      <!--          </ion-label>-->
-      <!--          <ion-checkbox [(ngModel)]="value" slot="end"></ion-checkbox>-->
-    </div>
-    <!--      </ion-col>-->
-    @if (typeof value === 'boolean') {
-      <!--        <ion-col size="auto">-->
-      <!--          <ion-button-->
-      <!--            color="danger"-->
-      <!--            (click)="refresh(null)"-->
-      <!--            class="square-button m-3"-->
-      <!--          >-->
-      <!--            <ion-icon slot="icon-only" name="close-outline"></ion-icon>-->
-      <!--          </ion-button>-->
-      <!--        </ion-col>-->
-    }
-    <!--    </ion-row>-->
-  `, imports: [TranslatePipe, FormsModule], styles: [":host{width:100%}:host .square-button{height:var(--smart-button-height)!important}\n"] }]
+            args: [{
+                    selector: 'smart-crud-filter-flag',
+                    host: { class: 'smart:block smart:w-full' },
+                    template: `
+    @if (inputOptions()) {
+      <div class="smart:flex smart:w-full smart:items-center smart:gap-2">
+        <smart-input-flag
+          class="smart:flex-1"
+          [options]="inputOptions()!"
+          [fieldOptions]="fieldOptions()"
+        ></smart-input-flag>
+        @if (value === true || value === false) {
+          <button
+            type="button"
+            (click)="refresh(null)"
+            aria-label="clear"
+            class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+          >
+            ×
+          </button>
+        }
+      </div>
+    }
+  `,
+                    imports: [InputFlagComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
         }] });
 
+// TODO(FRA-293 GAP-19): the advanced range controls (minControl/maxControl)
+// are not re-synced when filter() changes externally; see bindControl().
 class FilterIntComponent extends BaseComponent {
-    _subscriptions = new Subscription();
+    valueOptions = signal(undefined, ...(ngDevMode ? [{ debugName: "valueOptions" }] : []));
+    valueFieldOptions = signal(undefined, ...(ngDevMode ? [{ debugName: "valueFieldOptions" }] : []));
     advanced = signal(false, ...(ngDevMode ? [{ debugName: "advanced" }] : []));
+    minControl;
+    maxControl;
     get allowAdvanced() {
         return this.item()?.type === '=';
     }
     ngOnInit() {
         super.ngOnInit();
-    }
-    ngOnDestroy() {
-        if (this._subscriptions) {
-            this._subscriptions.unsubscribe();
-        }
+        const valueControl = this.bindControl(null);
+        this.minControl = this.bindControl('>=');
+        this.maxControl = this.bindControl('<=');
+        this.valueOptions.set(this.buildInputOptions(valueControl));
+        this.valueFieldOptions.set(undefined);
     }
     toggleAdvanced() {
         this.advanced.update((val) => !val);
@@ -1096,129 +1901,319 @@ class FilterIntComponent extends BaseComponent {
             this.value = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterIntComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterIntComponent, isStandalone: true, selector: "smart-crud-filter-int", usesInheritance: true, ngImport: i0, template: "<!--<ion-row>-->\n<!--  <ion-col>-->\n<!--    <ion-label>-->\n{{ item()?.label || '' | translate }}\n<!--    </ion-label>-->\n@if (!advanced()) {\n  <!--      <ion-input [(ngModel)]=\"value\" type=\"number\" step=\"1\"></ion-input>-->\n}\n<!--  </ion-col>-->\n@if (allowAdvanced) {\n  <!--    <ion-col size=\"auto\">-->\n  <!--      <ion-button-->\n  <!--        (click)=\"toggleAdvanced()\"-->\n  <!--        class=\"square-button m-3\"-->\n  <!--        [disabled]=\"minValue || maxValue\"-->\n  <!--      >-->\n  @if (!advanced()) {\n    <!--          <ion-icon slot=\"icon-only\" name=\"settings-outline\"></ion-icon>-->\n  } @else {\n    <!--          <ion-icon slot=\"icon-only\" name=\"settings\"></ion-icon>-->\n  }\n  <!--      </ion-button>-->\n  <!--    </ion-col>-->\n}\n@if (value || minValue || maxValue) {\n  <!--    <ion-col size=\"auto\">-->\n  <!--      <ion-button color=\"danger\" (click)=\"clear()\" class=\"square-button m-3\">-->\n  <!--        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>-->\n  <!--      </ion-button>-->\n  <!--    </ion-col>-->\n}\n<!--</ion-row>-->\n@if ((advanced() || minValue || maxValue) && allowAdvanced) {\n  <!--  <ion-row>-->\n  <!--    <ion-col>-->\n  <!--      <ion-item>-->\n  <!--        <ion-label>-->\n  {{ 'from' | translate }}\n  <!--        </ion-label>-->\n  <!--        <ion-input [(ngModel)]=\"minValue\" type=\"number\" step=\"1\"></ion-input>-->\n  <!--      </ion-item>-->\n  <!--    </ion-col>-->\n  @if (minValue) {\n    <!--      <ion-col size=\"auto\">-->\n    <!--        <ion-button-->\n    <!--          color=\"danger\"-->\n    <!--          (click)=\"refresh(null, '>=')\"-->\n    <!--          class=\"square-button m-3\"-->\n    <!--        >-->\n    <!--          <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>-->\n    <!--        </ion-button>-->\n    <!--      </ion-col>-->\n  }\n  <!--    <ion-col>-->\n  <!--      <ion-item>-->\n  <!--        <ion-label>-->\n  {{ 'to' | translate }}\n  <!--        </ion-label>-->\n  <!--        <ion-input [(ngModel)]=\"maxValue\" type=\"number\" step=\"1\"></ion-input>-->\n  <!--      </ion-item>-->\n  <!--    </ion-col>-->\n  @if (maxValue) {\n    <!--      <ion-col size=\"auto\">-->\n    <!--        <ion-button-->\n    <!--          color=\"danger\"-->\n    <!--          (click)=\"refresh(null, '<=')\"-->\n    <!--          class=\"square-button m-3\"-->\n    <!--        >-->\n    <!--          <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>-->\n    <!--        </ion-button>-->\n    <!--      </ion-col>-->\n  }\n  <!--  </ion-row>-->\n}\n", styles: [":host{width:100%}:host .square-button{height:var(--smart-button-height)!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterIntComponent, isStandalone: true, selector: "smart-crud-filter-int", host: { classAttribute: "smart:block smart:w-full" }, usesInheritance: true, ngImport: i0, template: `
+    @if (valueOptions()) {
+      <div class="smart:flex smart:w-full smart:items-end smart:gap-2">
+        @if (!advanced()) {
+          <smart-input-int
+            class="smart:flex-1"
+            [options]="valueOptions()!"
+            [fieldOptions]="valueFieldOptions()"
+          ></smart-input-int>
+        }
+
+        @if (allowAdvanced) {
+          <button
+            type="button"
+            (click)="toggleAdvanced()"
+            [disabled]="hasMinValue() || hasMaxValue()"
+            aria-label="settings"
+            class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-gray-600 smart:hover:bg-gray-100 smart:disabled:opacity-40"
+          >
+            ⚙
+          </button>
+        }
+
+        @if (hasValue() || hasMinValue() || hasMaxValue()) {
+          <button
+            type="button"
+            (click)="clear()"
+            aria-label="clear"
+            class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+          >
+            ×
+          </button>
+        }
+      </div>
+
+      @if ((advanced() || hasMinValue() || hasMaxValue()) && allowAdvanced) {
+        <div
+          class="smart:mt-2 smart:flex smart:w-full smart:items-end smart:gap-2"
+        >
+          <div class="smart:flex-1">
+            <label
+              class="smart:block smart:text-sm/6 smart:font-medium smart:text-gray-900 smart:dark:text-white"
+            >
+              {{ 'from' | translate }}
+            </label>
+            <input
+              type="number"
+              step="1"
+              [formControl]="minControl"
+              class="smart:mt-2 smart:block smart:w-full smart:rounded-md smart:bg-white smart:px-3 smart:py-1.5 smart:text-base smart:text-gray-900 smart:outline-1 -outline-offset-1 smart:outline-gray-300 smart:focus:outline-2 smart:focus:outline-offset-2 smart:focus:outline-indigo-600 smart:dark:bg-white/5 smart:dark:text-white smart:dark:outline-white/10"
+            />
+          </div>
+          @if (hasMinValue()) {
+            <button
+              type="button"
+              (click)="refresh(null, '>=')"
+              aria-label="clear-from"
+              class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+            >
+              ×
+            </button>
+          }
+
+          <div class="smart:flex-1">
+            <label
+              class="smart:block smart:text-sm/6 smart:font-medium smart:text-gray-900 smart:dark:text-white"
+            >
+              {{ 'to' | translate }}
+            </label>
+            <input
+              type="number"
+              step="1"
+              [formControl]="maxControl"
+              class="smart:mt-2 smart:block smart:w-full smart:rounded-md smart:bg-white smart:px-3 smart:py-1.5 smart:text-base smart:text-gray-900 smart:outline-1 -outline-offset-1 smart:outline-gray-300 smart:focus:outline-2 smart:focus:outline-offset-2 smart:focus:outline-indigo-600 smart:dark:bg-white/5 smart:dark:text-white smart:dark:outline-white/10"
+            />
+          </div>
+          @if (hasMaxValue()) {
+            <button
+              type="button"
+              (click)="refresh(null, '<=')"
+              aria-label="clear-to"
+              class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+            >
+              ×
+            </button>
+          }
+        </div>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: InputIntComponent, selector: "smart-input-int" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.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$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterIntComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-crud-filter-int', imports: [TranslatePipe, FormsModule], template: "<!--<ion-row>-->\n<!--  <ion-col>-->\n<!--    <ion-label>-->\n{{ item()?.label || '' | translate }}\n<!--    </ion-label>-->\n@if (!advanced()) {\n  <!--      <ion-input [(ngModel)]=\"value\" type=\"number\" step=\"1\"></ion-input>-->\n}\n<!--  </ion-col>-->\n@if (allowAdvanced) {\n  <!--    <ion-col size=\"auto\">-->\n  <!--      <ion-button-->\n  <!--        (click)=\"toggleAdvanced()\"-->\n  <!--        class=\"square-button m-3\"-->\n  <!--        [disabled]=\"minValue || maxValue\"-->\n  <!--      >-->\n  @if (!advanced()) {\n    <!--          <ion-icon slot=\"icon-only\" name=\"settings-outline\"></ion-icon>-->\n  } @else {\n    <!--          <ion-icon slot=\"icon-only\" name=\"settings\"></ion-icon>-->\n  }\n  <!--      </ion-button>-->\n  <!--    </ion-col>-->\n}\n@if (value || minValue || maxValue) {\n  <!--    <ion-col size=\"auto\">-->\n  <!--      <ion-button color=\"danger\" (click)=\"clear()\" class=\"square-button m-3\">-->\n  <!--        <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>-->\n  <!--      </ion-button>-->\n  <!--    </ion-col>-->\n}\n<!--</ion-row>-->\n@if ((advanced() || minValue || maxValue) && allowAdvanced) {\n  <!--  <ion-row>-->\n  <!--    <ion-col>-->\n  <!--      <ion-item>-->\n  <!--        <ion-label>-->\n  {{ 'from' | translate }}\n  <!--        </ion-label>-->\n  <!--        <ion-input [(ngModel)]=\"minValue\" type=\"number\" step=\"1\"></ion-input>-->\n  <!--      </ion-item>-->\n  <!--    </ion-col>-->\n  @if (minValue) {\n    <!--      <ion-col size=\"auto\">-->\n    <!--        <ion-button-->\n    <!--          color=\"danger\"-->\n    <!--          (click)=\"refresh(null, '>=')\"-->\n    <!--          class=\"square-button m-3\"-->\n    <!--        >-->\n    <!--          <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>-->\n    <!--        </ion-button>-->\n    <!--      </ion-col>-->\n  }\n  <!--    <ion-col>-->\n  <!--      <ion-item>-->\n  <!--        <ion-label>-->\n  {{ 'to' | translate }}\n  <!--        </ion-label>-->\n  <!--        <ion-input [(ngModel)]=\"maxValue\" type=\"number\" step=\"1\"></ion-input>-->\n  <!--      </ion-item>-->\n  <!--    </ion-col>-->\n  @if (maxValue) {\n    <!--      <ion-col size=\"auto\">-->\n    <!--        <ion-button-->\n    <!--          color=\"danger\"-->\n    <!--          (click)=\"refresh(null, '<=')\"-->\n    <!--          class=\"square-button m-3\"-->\n    <!--        >-->\n    <!--          <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>-->\n    <!--        </ion-button>-->\n    <!--      </ion-col>-->\n  }\n  <!--  </ion-row>-->\n}\n", styles: [":host{width:100%}:host .square-button{height:var(--smart-button-height)!important}\n"] }]
+            args: [{
+                    selector: 'smart-crud-filter-int',
+                    host: { class: 'smart:block smart:w-full' },
+                    template: `
+    @if (valueOptions()) {
+      <div class="smart:flex smart:w-full smart:items-end smart:gap-2">
+        @if (!advanced()) {
+          <smart-input-int
+            class="smart:flex-1"
+            [options]="valueOptions()!"
+            [fieldOptions]="valueFieldOptions()"
+          ></smart-input-int>
+        }
+
+        @if (allowAdvanced) {
+          <button
+            type="button"
+            (click)="toggleAdvanced()"
+            [disabled]="hasMinValue() || hasMaxValue()"
+            aria-label="settings"
+            class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-gray-600 smart:hover:bg-gray-100 smart:disabled:opacity-40"
+          >
+            ⚙
+          </button>
+        }
+
+        @if (hasValue() || hasMinValue() || hasMaxValue()) {
+          <button
+            type="button"
+            (click)="clear()"
+            aria-label="clear"
+            class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+          >
+            ×
+          </button>
+        }
+      </div>
+
+      @if ((advanced() || hasMinValue() || hasMaxValue()) && allowAdvanced) {
+        <div
+          class="smart:mt-2 smart:flex smart:w-full smart:items-end smart:gap-2"
+        >
+          <div class="smart:flex-1">
+            <label
+              class="smart:block smart:text-sm/6 smart:font-medium smart:text-gray-900 smart:dark:text-white"
+            >
+              {{ 'from' | translate }}
+            </label>
+            <input
+              type="number"
+              step="1"
+              [formControl]="minControl"
+              class="smart:mt-2 smart:block smart:w-full smart:rounded-md smart:bg-white smart:px-3 smart:py-1.5 smart:text-base smart:text-gray-900 smart:outline-1 -outline-offset-1 smart:outline-gray-300 smart:focus:outline-2 smart:focus:outline-offset-2 smart:focus:outline-indigo-600 smart:dark:bg-white/5 smart:dark:text-white smart:dark:outline-white/10"
+            />
+          </div>
+          @if (hasMinValue()) {
+            <button
+              type="button"
+              (click)="refresh(null, '>=')"
+              aria-label="clear-from"
+              class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+            >
+              ×
+            </button>
+          }
+
+          <div class="smart:flex-1">
+            <label
+              class="smart:block smart:text-sm/6 smart:font-medium smart:text-gray-900 smart:dark:text-white"
+            >
+              {{ 'to' | translate }}
+            </label>
+            <input
+              type="number"
+              step="1"
+              [formControl]="maxControl"
+              class="smart:mt-2 smart:block smart:w-full smart:rounded-md smart:bg-white smart:px-3 smart:py-1.5 smart:text-base smart:text-gray-900 smart:outline-1 -outline-offset-1 smart:outline-gray-300 smart:focus:outline-2 smart:focus:outline-offset-2 smart:focus:outline-indigo-600 smart:dark:bg-white/5 smart:dark:text-white smart:dark:outline-white/10"
+            />
+          </div>
+          @if (hasMaxValue()) {
+            <button
+              type="button"
+              (click)="refresh(null, '<=')"
+              aria-label="clear-to"
+              class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+            >
+              ×
+            </button>
+          }
+        </div>
+      }
+    }
+  `,
+                    imports: [InputIntComponent, ReactiveFormsModule, TranslatePipe],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
         }] });
 
 class FilterRadioComponent extends BaseComponent {
+    inputOptions = signal(undefined, ...(ngDevMode ? [{ debugName: "inputOptions" }] : []));
+    fieldOptions = signal(undefined, ...(ngDevMode ? [{ debugName: "fieldOptions" }] : []));
+    ngOnInit() {
+        super.ngOnInit();
+        const control = this.bindControl(null);
+        this.inputOptions.set(this.buildInputOptions(control, true));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterRadioComponent, isStandalone: true, selector: "smart-crud-filter-radio", usesInheritance: true, ngImport: i0, template: `
-    <!--    <ion-row>-->
-    <!--      <ion-col>-->
-    <!--        <ion-radio-group [(ngModel)]="value">-->
-    <!--          <ion-item-divider class="font-light text-xl">-->
-    <!--            <ion-icon class="mr-6 text-2xl" slot="start" name="filter-outline"></ion-icon>-->
-    <!--            <ion-label>-->
-    {{ item()?.label || '' | translate }}
-    <!--            </ion-label>-->
-    @if (value || value === false) {
-      <!--              <ion-button-->
-      <!--                slot="end"-->
-      <!--                color="danger"-->
-      <!--                (click)="refresh(null)"-->
-      <!--                class="square-button m-0 text-lg h-9 w-9 p-0"-->
-      <!--              >-->
-      <!--                <ion-icon class="mr-6 text-2xl m-0 p-0" slot="icon-only" name="close-outline"></ion-icon>-->
-      <!--              </ion-button>-->
-    }
-    <!--          </ion-item-divider>-->
-
-    @for (item of possibilities(); track item) {
-      <!--            <ion-item>-->
-      <!--              <ion-label>{{ item.text | translate }}</ion-label>-->
-      <!--              <ion-radio class="mr-10" [value]="item.id"></ion-radio>-->
-      <!--            </ion-item>-->
-    }
-    <!--        </ion-radio-group>-->
-    <!--      </ion-col>-->
-    <!--    </ion-row>-->
-  `, isInline: true, styles: [":host{width:100%;margin-bottom:1.2rem}:host ion-item-divider{//--padding-end: .8rem;//--ion-background-color: linear-gradient(// 90deg,// transparent,// var(--ion-color-light) //)}:host ion-item-divider ion-icon{//--color: var(--ion-color-primary)}:host ion-item-divider ion-label{//--padding: var(--smart-button-padding-left) / 2 // var(--smart-button-padding-top) / 2 var(--smart-button-padding-right) / // 2 var(--smart-button-padding-bottom) / 2}:host ion-item-divider .square-button{//--padding-start: .2em;//--padding-end: .2em}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterRadioComponent, isStandalone: true, selector: "smart-crud-filter-radio", host: { classAttribute: "smart:mb-5 smart:block smart:w-full" }, usesInheritance: true, ngImport: i0, template: `
+    @if (inputOptions()) {
+      <div class="smart:flex smart:w-full smart:items-start smart:gap-2">
+        <smart-input-radio
+          class="smart:flex-1"
+          [options]="inputOptions()!"
+          [fieldOptions]="fieldOptions()"
+        ></smart-input-radio>
+        @if (value || value === false) {
+          <button
+            type="button"
+            (click)="refresh(null)"
+            aria-label="clear"
+            class="smart:shrink-0 smart:rounded smart:px-2 smart:py-1 smart:text-red-600 smart:hover:bg-red-50"
+          >
+            ×
+          </button>
+        }
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: InputRadioComponent, selector: "smart-input-radio" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterRadioComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-crud-filter-radio', template: `
-    <!--    <ion-row>-->
-    <!--      <ion-col>-->
-    <!--        <ion-radio-group [(ngModel)]="value">-->
-    <!--          <ion-item-divider class="font-light text-xl">-->
-    <!--            <ion-icon class="mr-6 text-2xl" slot="start" name="filter-outline"></ion-icon>-->
-    <!--            <ion-label>-->
-    {{ item()?.label || '' | translate }}
-    <!--            </ion-label>-->
-    @if (value || value === false) {
-      <!--              <ion-button-->
-      <!--                slot="end"-->
-      <!--                color="danger"-->
-      <!--                (click)="refresh(null)"-->
-      <!--                class="square-button m-0 text-lg h-9 w-9 p-0"-->
-      <!--              >-->
-      <!--                <ion-icon class="mr-6 text-2xl m-0 p-0" slot="icon-only" name="close-outline"></ion-icon>-->
-      <!--              </ion-button>-->
-    }
-    <!--          </ion-item-divider>-->
-
-    @for (item of possibilities(); track item) {
-      <!--            <ion-item>-->
-      <!--              <ion-label>{{ item.text | translate }}</ion-label>-->
-      <!--              <ion-radio class="mr-10" [value]="item.id"></ion-radio>-->
-      <!--            </ion-item>-->
-    }
-    <!--        </ion-radio-group>-->
-    <!--      </ion-col>-->
-    <!--    </ion-row>-->
-  `, imports: [TranslatePipe, FormsModule], styles: [":host{width:100%;margin-bottom:1.2rem}:host ion-item-divider{//--padding-end: .8rem;//--ion-background-color: linear-gradient(// 90deg,// transparent,// var(--ion-color-light) //)}:host ion-item-divider ion-icon{//--color: var(--ion-color-primary)}:host ion-item-divider ion-label{//--padding: var(--smart-button-padding-left) / 2 // var(--smart-button-padding-top) / 2 var(--smart-button-padding-right) / // 2 var(--smart-button-padding-bottom) / 2}:host ion-item-divider .square-button{//--padding-start: .2em;//--padding-end: .2em}\n"] }]
+            args: [{
+                    selector: 'smart-crud-filter-radio',
+                    host: { class: 'smart:mb-5 smart:block smart:w-full' },
+                    template: `
+    @if (inputOptions()) {
+      <div class="smart:flex smart:w-full smart:items-start smart:gap-2">
+        <smart-input-radio
+          class="smart:flex-1"
+          [options]="inputOptions()!"
+          [fieldOptions]="fieldOptions()"
+        ></smart-input-radio>
+        @if (value || value === false) {
+          <button
+            type="button"
+            (click)="refresh(null)"
+            aria-label="clear"
+            class="smart:shrink-0 smart:rounded smart:px-2 smart:py-1 smart:text-red-600 smart:hover:bg-red-50"
+          >
+            ×
+          </button>
+        }
+      </div>
+    }
+  `,
+                    imports: [InputRadioComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
         }] });
 
 class FilterTextComponent extends BaseComponent {
+    inputOptions = signal(undefined, ...(ngDevMode ? [{ debugName: "inputOptions" }] : []));
+    fieldOptions = signal(undefined, ...(ngDevMode ? [{ debugName: "fieldOptions" }] : []));
+    ngOnInit() {
+        super.ngOnInit();
+        const control = this.bindValueControl();
+        this.inputOptions.set(this.buildInputOptions(control));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterTextComponent, isStandalone: true, selector: "smart-crud-filter-text", usesInheritance: true, ngImport: i0, template: `
-    <!--    <ion-row>-->
-    <!--      <ion-col>-->
-    <!--        <ion-label position="floating">-->
-    {{ item()?.label || '' | translate }}
-    <!--        </ion-label>-->
-    <!--        <ion-input [(ngModel)]="value"></ion-input>-->
-    <!--      </ion-col>-->
-    @if (value) {
-      <!--        <ion-col size="auto">-->
-      <!--          <ion-button-->
-      <!--            color="danger"-->
-      <!--            (click)="refresh(null)"-->
-      <!--            class="square-button m-3"-->
-      <!--          >-->
-      <!--            <ion-icon slot="icon-only" name="close-outline"></ion-icon>-->
-      <!--          </ion-button>-->
-      <!--        </ion-col>-->
-    }
-    <!--    </ion-row>-->
-  `, isInline: true, styles: [":host{width:100%}:host .square-button{height:var(--smart-button-height)!important}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterTextComponent, isStandalone: true, selector: "smart-crud-filter-text", host: { classAttribute: "smart:block smart:w-full" }, usesInheritance: true, ngImport: i0, template: `
+    @if (inputOptions()) {
+      <div class="smart:flex smart:w-full smart:items-end smart:gap-2">
+        <smart-input-text
+          class="smart:flex-1"
+          [options]="inputOptions()!"
+          [fieldOptions]="fieldOptions()"
+        ></smart-input-text>
+        @if (hasValue()) {
+          <button
+            type="button"
+            (click)="refresh(null)"
+            aria-label="clear"
+            class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+          >
+            ×
+          </button>
+        }
+      </div>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: InputTextComponent, selector: "smart-input-text" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterTextComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-crud-filter-text', template: `
-    <!--    <ion-row>-->
-    <!--      <ion-col>-->
-    <!--        <ion-label position="floating">-->
-    {{ item()?.label || '' | translate }}
-    <!--        </ion-label>-->
-    <!--        <ion-input [(ngModel)]="value"></ion-input>-->
-    <!--      </ion-col>-->
-    @if (value) {
-      <!--        <ion-col size="auto">-->
-      <!--          <ion-button-->
-      <!--            color="danger"-->
-      <!--            (click)="refresh(null)"-->
-      <!--            class="square-button m-3"-->
-      <!--          >-->
-      <!--            <ion-icon slot="icon-only" name="close-outline"></ion-icon>-->
-      <!--          </ion-button>-->
-      <!--        </ion-col>-->
-    }
-    <!--    </ion-row>-->
-  `, imports: [TranslatePipe, FormsModule], styles: [":host{width:100%}:host .square-button{height:var(--smart-button-height)!important}\n"] }]
+            args: [{
+                    selector: 'smart-crud-filter-text',
+                    host: { class: 'smart:block smart:w-full' },
+                    template: `
+    @if (inputOptions()) {
+      <div class="smart:flex smart:w-full smart:items-end smart:gap-2">
+        <smart-input-text
+          class="smart:flex-1"
+          [options]="inputOptions()!"
+          [fieldOptions]="fieldOptions()"
+        ></smart-input-text>
+        @if (hasValue()) {
+          <button
+            type="button"
+            (click)="refresh(null)"
+            aria-label="clear"
+            class="smart:shrink-0 smart:rounded smart:px-2 smart:py-2 smart:text-red-600 smart:hover:bg-red-50"
+          >
+            ×
+          </button>
+        }
+      </div>
+    }
+  `,
+                    imports: [InputTextComponent],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
         }] });
 
 class FilterComponent {
@@ -1226,7 +2221,7 @@ class FilterComponent {
     item = input(...(ngDevMode ? [undefined, { debugName: "item" }] : []));
     filter = input(...(ngDevMode ? [undefined, { debugName: "filter" }] : []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterComponent, isStandalone: true, selector: "smart-crud-filter", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<!--<ion-item>-->\n@switch (item()?.fieldType) {\n  @case (FieldType.date) {\n    <smart-crud-filter-date\n      [item]=\"item()\"\n      [filter]=\"filter()\"\n    ></smart-crud-filter-date>\n  }\n  @case (FieldType.dateWithEdit) {\n    <smart-crud-filter-date-with-edit\n      [item]=\"item()\"\n      [filter]=\"filter()\"\n    ></smart-crud-filter-date-with-edit>\n  }\n  @case (FieldType.dateTime) {\n    <smart-crud-filter-date-time\n      [item]=\"item()\"\n      [filter]=\"filter()\"\n    ></smart-crud-filter-date-time>\n  }\n  @case (FieldType.radio) {\n    <smart-crud-filter-radio\n      [item]=\"item()\"\n      [filter]=\"filter()\"\n    ></smart-crud-filter-radio>\n  }\n  @case (FieldType.check) {\n    <smart-crud-filter-check\n      [item]=\"item()\"\n      [filter]=\"filter()\"\n    ></smart-crud-filter-check>\n  }\n  @case (FieldType.flag) {\n    <smart-crud-filter-flag\n      [item]=\"item()\"\n      [filter]=\"filter()\"\n    ></smart-crud-filter-flag>\n  }\n  @case (FieldType.int) {\n    <smart-crud-filter-int\n      [item]=\"item()\"\n      [filter]=\"filter()\"\n    ></smart-crud-filter-int>\n  }\n  @default {\n    <smart-crud-filter-text\n      [item]=\"item()\"\n      [filter]=\"filter()\"\n    ></smart-crud-filter-text>\n  }\n}\n<!--</ion-item>-->\n", dependencies: [{ kind: "component", type: FilterTextComponent, selector: "smart-crud-filter-text" }, { kind: "component", type: FilterIntComponent, selector: "smart-crud-filter-int" }, { kind: "component", type: FilterFlagComponent, selector: "smart-crud-filter-flag" }, { kind: "component", type: FilterCheckComponent, selector: "smart-crud-filter-check" }, { kind: "component", type: FilterRadioComponent, selector: "smart-crud-filter-radio" }, { kind: "component", type: FilterDateTimeComponent, selector: "smart-crud-filter-date-time" }, { kind: "component", type: FilterDateWithEditComponent, selector: "smart-crud-filter-date-with-edit" }, { kind: "component", type: FilterDateComponent, selector: "smart-crud-filter-date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FilterComponent, isStandalone: true, selector: "smart-crud-filter", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: false, transformFunction: null }, filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"smart:py-1\">\n  @switch (item()?.fieldType) {\n    @case (FieldType.date) {\n      <smart-crud-filter-date\n        [item]=\"item()\"\n        [filter]=\"filter()\"\n      ></smart-crud-filter-date>\n    }\n    @case (FieldType.dateWithEdit) {\n      <smart-crud-filter-date-with-edit\n        [item]=\"item()\"\n        [filter]=\"filter()\"\n      ></smart-crud-filter-date-with-edit>\n    }\n    @case (FieldType.dateTime) {\n      <smart-crud-filter-date-time\n        [item]=\"item()\"\n        [filter]=\"filter()\"\n      ></smart-crud-filter-date-time>\n    }\n    @case (FieldType.radio) {\n      <smart-crud-filter-radio\n        [item]=\"item()\"\n        [filter]=\"filter()\"\n      ></smart-crud-filter-radio>\n    }\n    @case (FieldType.check) {\n      <smart-crud-filter-check\n        [item]=\"item()\"\n        [filter]=\"filter()\"\n      ></smart-crud-filter-check>\n    }\n    @case (FieldType.flag) {\n      <smart-crud-filter-flag\n        [item]=\"item()\"\n        [filter]=\"filter()\"\n      ></smart-crud-filter-flag>\n    }\n    @case (FieldType.int) {\n      <smart-crud-filter-int\n        [item]=\"item()\"\n        [filter]=\"filter()\"\n      ></smart-crud-filter-int>\n    }\n    @default {\n      <smart-crud-filter-text\n        [item]=\"item()\"\n        [filter]=\"filter()\"\n      ></smart-crud-filter-text>\n    }\n  }\n</div>\n", dependencies: [{ kind: "component", type: FilterTextComponent, selector: "smart-crud-filter-text" }, { kind: "component", type: FilterIntComponent, selector: "smart-crud-filter-int" }, { kind: "component", type: FilterFlagComponent, selector: "smart-crud-filter-flag" }, { kind: "component", type: FilterCheckComponent, selector: "smart-crud-filter-check" }, { kind: "component", type: FilterRadioComponent, selector: "smart-crud-filter-radio" }, { kind: "component", type: FilterDateTimeComponent, selector: "smart-crud-filter-date-time" }, { kind: "component", type: FilterDateWithEditComponent, selector: "smart-crud-filter-date-with-edit" }, { kind: "component", type: FilterDateComponent, selector: "smart-crud-filter-date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FilterComponent, decorators: [{
             type: Component,
@@ -1239,9 +2234,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         FilterDateTimeComponent,
                         FilterDateWithEditComponent,
                         FilterDateComponent,
-                    ], template: "<!--<ion-item>-->\n@switch (item()?.fieldType) {\n  @case (FieldType.date) {\n    <smart-crud-filter-date\n      [item]=\"item()\"\n      [filter]=\"filter()\"\n    ></smart-crud-filter-date>\n  }\n  @case (FieldType.dateWithEdit) {\n    <smart-crud-filter-date-with-edit\n      [item]=\"item()\"\n      [filter]=\"filter()\"\n    ></smart-crud-filter-date-with-edit>\n  }\n  @case (FieldType.dateTime) {\n    <smart-crud-filter-date-time\n      [item]=\"item()\"\n      [filter]=\"filter()\"\n    ></smart-crud-filter-date-time>\n  }\n  @case (FieldType.radio) {\n    <smart-crud-filter-radio\n      [item]=\"item()\"\n      [filter]=\"filter()\"\n    ></smart-crud-filter-radio>\n  }\n  @case (FieldType.check) {\n    <smart-crud-filter-check\n      [item]=\"item()\"\n      [filter]=\"filter()\"\n    ></smart-crud-filter-check>\n  }\n  @case (FieldType.flag) {\n    <smart-crud-filter-flag\n      [item]=\"item()\"\n      [filter]=\"filter()\"\n    ></smart-crud-filter-flag>\n  }\n  @case (FieldType.int) {\n    <smart-crud-filter-int\n      [item]=\"item()\"\n      [filter]=\"filter()\"\n    ></smart-crud-filter-int>\n  }\n  @default {\n    <smart-crud-filter-text\n      [item]=\"item()\"\n      [filter]=\"filter()\"\n    ></smart-crud-filter-text>\n  }\n}\n<!--</ion-item>-->\n" }]
+                    ], template: "<div class=\"smart:py-1\">\n  @switch (item()?.fieldType) {\n    @case (FieldType.date) {\n      <smart-crud-filter-date\n        [item]=\"item()\"\n        [filter]=\"filter()\"\n      ></smart-crud-filter-date>\n    }\n    @case (FieldType.dateWithEdit) {\n      <smart-crud-filter-date-with-edit\n        [item]=\"item()\"\n        [filter]=\"filter()\"\n      ></smart-crud-filter-date-with-edit>\n    }\n    @case (FieldType.dateTime) {\n      <smart-crud-filter-date-time\n        [item]=\"item()\"\n        [filter]=\"filter()\"\n      ></smart-crud-filter-date-time>\n    }\n    @case (FieldType.radio) {\n      <smart-crud-filter-radio\n        [item]=\"item()\"\n        [filter]=\"filter()\"\n      ></smart-crud-filter-radio>\n    }\n    @case (FieldType.check) {\n      <smart-crud-filter-check\n        [item]=\"item()\"\n        [filter]=\"filter()\"\n      ></smart-crud-filter-check>\n    }\n    @case (FieldType.flag) {\n      <smart-crud-filter-flag\n        [item]=\"item()\"\n        [filter]=\"filter()\"\n      ></smart-crud-filter-flag>\n    }\n    @case (FieldType.int) {\n      <smart-crud-filter-int\n        [item]=\"item()\"\n        [filter]=\"filter()\"\n      ></smart-crud-filter-int>\n    }\n    @default {\n      <smart-crud-filter-text\n        [item]=\"item()\"\n        [filter]=\"filter()\"\n      ></smart-crud-filter-text>\n    }\n  }\n</div>\n" }]
         }], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: false }] }], filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }] } });
 
+// Rendered by an OnPush concrete (FiltersComponent). The base exposes signals
+// (`list()`, `filter()`) and is therefore OnPush-compatible.
+class FiltersBaseComponent {
+    menuService = inject(MenuService);
+    config = inject((CrudConfig));
+    facade = inject((CrudFacade));
+    styleService = inject(StyleService);
+    elementRef = inject(ElementRef);
+    list;
+    filter;
+    /**
+     * Hide menu used only from MenuService
+     */
+    hideMenu = input(false, ...(ngDevMode ? [{ debugName: "hideMenu" }] : []));
+    async onClose() {
+        await this.menuService.closeEnd();
+    }
+    ngOnInit() {
+        this.styleService.init(this.elementRef);
+        this.list = signal([], ...(ngDevMode ? [{ debugName: "list" }] : []));
+        const modelFilters = getModelOptions(this.config.type)?.filters;
+        this.list.set([
+            ...(modelFilters
+                ? modelFilters.map((item) => {
+                    if (!item.label) {
+                        item.label = 'MODEL.' + item.key;
+                    }
+                    return item;
+                })
+                : []),
+            ...getModelFieldsWithOptions(new this.config.type())
+                .filter((item) => item.options?.list?.filter)
+                .map((item) => ({
+                key: item.key,
+                type: item.options.type === FieldType.text ||
+                    item.options.type === FieldType.longText
+                    ? '~='
+                    : '=',
+                label: 'MODEL.' + item.key,
+                fieldType: item.options.type,
+            })),
+        ]);
+        this.filter = this.facade.filter;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FiltersBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: FiltersBaseComponent, isStandalone: true, inputs: { hideMenu: { classPropertyName: "hideMenu", publicName: "hideMenu", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FiltersBaseComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { hideMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideMenu", required: false }] }] } });
+
 /**
  * This component is only to use in crud module
  * @requires CrudModule
@@ -1297,97 +2343,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
     })
  body: string;
  */
-class FiltersComponent {
-    menuService = inject(MenuService);
-    config = inject((CrudConfig));
-    facade = inject((CrudFacade));
-    styleService = inject(StyleService);
-    elementRef = inject(ElementRef);
-    list;
-    filter;
-    /**
-     * Hide menu used only from MenuService
-     */
-    hideMenu = input(false, ...(ngDevMode ? [{ debugName: "hideMenu" }] : []));
-    async onClose() {
-        await this.menuService.closeEnd();
-    }
-    ngOnInit() {
-        this.styleService.init(this.elementRef);
-        this.list = signal([], ...(ngDevMode ? [{ debugName: "list" }] : []));
-        const modelFilters = getModelOptions(this.config.type)?.filters;
-        this.list.set([
-            ...(modelFilters
-                ? modelFilters.map((item) => {
-                    if (!item.label) {
-                        item.label = 'MODEL.' + item.key;
-                    }
-                    return item;
-                })
-                : []),
-            ...getModelFieldsWithOptions(new this.config.type())
-                .filter((item) => item.options?.list?.filter)
-                .map((item) => ({
-                key: item.key,
-                type: item.options.type === FieldType.text ||
-                    item.options.type === FieldType.longText
-                    ? '~='
-                    : '=',
-                label: 'MODEL.' + item.key,
-                fieldType: item.options.type,
-            })),
-        ]);
-        this.filter = this.facade.filter;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FiltersComponent, isStandalone: true, selector: "smart-crud-filters", inputs: { hideMenu: { classPropertyName: "hideMenu", publicName: "hideMenu", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: `
-    <!--<ion-header [hidden]="hideMenu()">-->
-    <!--  <ion-toolbar>-->
-    <!--    <ion-buttons slot="end">-->
-    <!--      <ion-button (click)="onClose()">-->
-    <!--        <ion-icon slot="icon-only" name="close"> </ion-icon>-->
-    <!--      </ion-button>-->
-    <!--    </ion-buttons>-->
-    <!--    <ion-title>{{ 'filters' | translate }}</ion-title>-->
-    <!--  </ion-toolbar>-->
-    <!--</ion-header>-->
-    <!--<ion-content style="height: 100vh">-->
-    <!--  <ion-list>-->
-    @for (item of list(); track item) {
-      <smart-crud-filter [item]="item" [filter]="filter()"></smart-crud-filter>
-    }
-    <!--  </ion-list>-->
-    <div class="h-20">&nbsp;</div>
-    <!--</ion-content>-->
-  `, isInline: true, dependencies: [{ kind: "component", type: FilterComponent, selector: "smart-crud-filter", inputs: ["item", "filter"] }] });
+class FiltersComponent extends FiltersBaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FiltersComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FiltersComponent, isStandalone: true, selector: "smart-crud-filters", usesInheritance: true, ngImport: i0, template: `
+    <div class="smart:flex smart:h-full smart:flex-col">
+      @if (!hideMenu()) {
+        <header
+          class="smart:flex smart:items-center smart:justify-between smart:border-b smart:border-gray-200 smart:px-4 smart:py-3"
+        >
+          <h2 class="smart:text-lg smart:font-semibold smart:text-gray-900">
+            {{ 'filters' | translate }}
+          </h2>
+          <button
+            type="button"
+            (click)="onClose()"
+            aria-label="close"
+            class="smart:rounded smart:p-1 smart:text-gray-500 smart:hover:bg-gray-100"
+          >
+            ✕
+          </button>
+        </header>
+      }
+      <div
+        class="smart:flex-1 smart:space-y-4 smart:overflow-y-auto smart:px-4 smart:py-3"
+      >
+        @for (item of list(); track item.key) {
+          <smart-crud-filter
+            [item]="item"
+            [filter]="filter()"
+          ></smart-crud-filter>
+        }
+      </div>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: FilterComponent, selector: "smart-crud-filter", inputs: ["item", "filter"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FiltersComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'smart-crud-filters',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <!--<ion-header [hidden]="hideMenu()">-->
-    <!--  <ion-toolbar>-->
-    <!--    <ion-buttons slot="end">-->
-    <!--      <ion-button (click)="onClose()">-->
-    <!--        <ion-icon slot="icon-only" name="close"> </ion-icon>-->
-    <!--      </ion-button>-->
-    <!--    </ion-buttons>-->
-    <!--    <ion-title>{{ 'filters' | translate }}</ion-title>-->
-    <!--  </ion-toolbar>-->
-    <!--</ion-header>-->
-    <!--<ion-content style="height: 100vh">-->
-    <!--  <ion-list>-->
-    @for (item of list(); track item) {
-      <smart-crud-filter [item]="item" [filter]="filter()"></smart-crud-filter>
-    }
-    <!--  </ion-list>-->
-    <div class="h-20">&nbsp;</div>
-    <!--</ion-content>-->
+    <div class="smart:flex smart:h-full smart:flex-col">
+      @if (!hideMenu()) {
+        <header
+          class="smart:flex smart:items-center smart:justify-between smart:border-b smart:border-gray-200 smart:px-4 smart:py-3"
+        >
+          <h2 class="smart:text-lg smart:font-semibold smart:text-gray-900">
+            {{ 'filters' | translate }}
+          </h2>
+          <button
+            type="button"
+            (click)="onClose()"
+            aria-label="close"
+            class="smart:rounded smart:p-1 smart:text-gray-500 smart:hover:bg-gray-100"
+          >
+            ✕
+          </button>
+        </header>
+      }
+      <div
+        class="smart:flex-1 smart:space-y-4 smart:overflow-y-auto smart:px-4 smart:py-3"
+      >
+        @for (item of list(); track item.key) {
+          <smart-crud-filter
+            [item]="item"
+            [filter]="filter()"
+          ></smart-crud-filter>
+        }
+      </div>
+    </div>
   `,
-                    imports: [FilterComponent],
+                    imports: [FilterComponent, TranslatePipe],
                 }]
-        }], propDecorators: { hideMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideMenu", required: false }] }] } });
+        }] });
 
 class FiltersConfigComponent {
     facade = inject((CrudFacade));
@@ -1414,55 +2442,121 @@ class FiltersConfigComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FiltersConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: FiltersConfigComponent, isStandalone: true, selector: "smart-crud-filters-config", ngImport: i0, template: `
     @let query = this.query();
-    @if (query && query?.length) {
-      <!--  <ion-toolbar>-->
-      @for (item of query; track item) {
-        <!--      <ion-chip (click)="onRemoveQuery(item)" color="medium" outline="true">-->
-        <!--        <ion-icon name="filter-circle-outline" color="primary"></ion-icon>-->
-        <!--        <ion-label>-->
-        {{ 'MODEL.' + item.key | translate }} {{ item.type }}
-        {{ item.value | translate }}
-        <!--        </ion-label>-->
-        <!--        <ion-icon name="close" color="danger"></ion-icon>-->
-        <!--      </ion-chip>-->
-      }
-      <!--  </ion-toolbar>-->
+    @if (query && query.length) {
+      <div class="smart:flex smart:flex-wrap smart:gap-2 smart:px-4 smart:py-2">
+        @for (item of query; track item) {
+          <button
+            type="button"
+            (click)="onRemoveQuery(item)"
+            class="smart:inline-flex smart:items-center smart:gap-1 smart:rounded-full smart:border smart:border-gray-300 smart:bg-gray-50 smart:px-3 smart:py-1 smart:text-sm smart:text-gray-700 smart:hover:bg-gray-100"
+            [attr.aria-label]="
+              ('remove' | translate) + ' ' + ('MODEL.' + item.key | translate)
+            "
+          >
+            <span
+              >{{ 'MODEL.' + item.key | translate }} {{ item.type }}
+              {{ item.value | translate }}</span
+            >
+            <span aria-hidden="true" class="smart:text-red-600">✕</span>
+          </button>
+        }
+      </div>
     }
-  `, isInline: true, styles: [":host ion-label{font-size:var(--small-font-size)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: FiltersConfigComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-crud-filters-config', template: `
+            args: [{
+                    selector: 'smart-crud-filters-config',
+                    template: `
     @let query = this.query();
-    @if (query && query?.length) {
-      <!--  <ion-toolbar>-->
-      @for (item of query; track item) {
-        <!--      <ion-chip (click)="onRemoveQuery(item)" color="medium" outline="true">-->
-        <!--        <ion-icon name="filter-circle-outline" color="primary"></ion-icon>-->
-        <!--        <ion-label>-->
-        {{ 'MODEL.' + item.key | translate }} {{ item.type }}
-        {{ item.value | translate }}
-        <!--        </ion-label>-->
-        <!--        <ion-icon name="close" color="danger"></ion-icon>-->
-        <!--      </ion-chip>-->
-      }
-      <!--  </ion-toolbar>-->
+    @if (query && query.length) {
+      <div class="smart:flex smart:flex-wrap smart:gap-2 smart:px-4 smart:py-2">
+        @for (item of query; track item) {
+          <button
+            type="button"
+            (click)="onRemoveQuery(item)"
+            class="smart:inline-flex smart:items-center smart:gap-1 smart:rounded-full smart:border smart:border-gray-300 smart:bg-gray-50 smart:px-3 smart:py-1 smart:text-sm smart:text-gray-700 smart:hover:bg-gray-100"
+            [attr.aria-label]="
+              ('remove' | translate) + ' ' + ('MODEL.' + item.key | translate)
+            "
+          >
+            <span
+              >{{ 'MODEL.' + item.key | translate }} {{ item.type }}
+              {{ item.value | translate }}</span
+            >
+            <span aria-hidden="true" class="smart:text-red-600">✕</span>
+          </button>
+        }
+      </div>
     }
-  `, imports: [TranslatePipe], styles: [":host ion-label{font-size:var(--small-font-size)}\n"] }]
+  `,
+                    imports: [TranslatePipe],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
         }] });
 
-/**
- * @deprecated - please, use IModelPossibilitiesProvider from @smartsoft001/angular
- */
-class ICrudModelPossibilitiesProvider {
+class MultiselectBaseComponent {
+    facade = inject((CrudFacade));
+    config = inject((CrudFullConfig));
+    menuService = inject(MenuService);
+    _list;
+    _changes;
+    item;
+    valid;
+    buttonOptions = {
+        click: async () => {
+            const result = this._list.map((item) => {
+                return {
+                    ...this._changes,
+                    id: item.id,
+                };
+            });
+            this.facade.updatePartialMany(result);
+            await this.menuService.closeEnd();
+        },
+        confirm: true,
+    };
+    lock;
+    showForm = false;
+    list;
+    constructor() {
+        this.list = computed(() => {
+            const list = this.facade.multiSelected() || [];
+            this.lock = true;
+            const model = new this.config.type();
+            const fieldsWithOptions = getModelFieldsWithOptions(model)?.filter((f) => f.options.update?.multi);
+            this.showForm = !!fieldsWithOptions.length;
+            fieldsWithOptions.forEach(({ key }) => {
+                const uniques = _.uniq(list.map((i) => i[key]));
+                if (uniques.length === 1) {
+                    model[key] = uniques[0];
+                }
+            });
+            this.item = model;
+            return list;
+        }, ...(ngDevMode ? [{ debugName: "list" }] : []));
+    }
+    async onClose() {
+        await this.menuService.closeEnd();
+    }
+    onPartialChange(changes, list) {
+        this.lock = false;
+        this._list = list;
+        this._changes = changes;
+    }
+    onValidChange(valid) {
+        this.valid = valid;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MultiselectBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.1", type: MultiselectBaseComponent, isStandalone: true, ngImport: i0 });
 }
-/**
- * @deprecated - please, use MODEL_POSSIBILITIES_PROVIDER from @smartsoft001/angular
- */
-const CRUD_MODEL_POSSIBILITIES_PROVIDER = new InjectionToken('CRUD_MODEL_POSSIBILITIES_PROVIDER');
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MultiselectBaseComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
 
 class FormOptionsPipe {
-    modelPossibilitiesProvider = inject(CRUD_MODEL_POSSIBILITIES_PROVIDER);
+    modelPossibilitiesProvider = inject(CRUD_MODEL_POSSIBILITIES_PROVIDER, { optional: true });
     transform(item, mode, type, uniqueProvider, inputComponents) {
         if (!mode || !type)
             return null;
@@ -1520,60 +2614,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                 }]
         }] });
 
-class MultiselectComponent {
-    facade = inject((CrudFacade));
-    config = inject((CrudFullConfig));
-    menuService = inject(MenuService);
-    _list;
-    _changes;
-    item;
-    valid;
-    buttonOptions = {
-        click: async () => {
-            const result = this._list.map((item) => {
-                return {
-                    ...this._changes,
-                    id: item.id,
-                };
-            });
-            this.facade.updatePartialMany(result);
-            await this.menuService.closeEnd();
-        },
-        confirm: true,
-    };
-    lock;
-    showForm = false;
-    list;
-    constructor() {
-        this.list = computed(() => {
-            const list = this.facade.multiSelected() || [];
-            this.lock = true;
-            const model = new this.config.type();
-            const fieldsWithOptions = getModelFieldsWithOptions(model)?.filter((f) => f.options.update?.multi);
-            this.showForm = !!fieldsWithOptions.length;
-            fieldsWithOptions.forEach(({ key }) => {
-                const uniques = _.uniq(list.map((i) => i[key]));
-                if (uniques.length === 1) {
-                    model[key] = uniques[0];
-                }
-            });
-            this.item = model;
-            return list;
-        }, ...(ngDevMode ? [{ debugName: "list" }] : []));
-    }
-    async onClose() {
-        await this.menuService.closeEnd();
-    }
-    onPartialChange(changes, list) {
-        this.lock = false;
-        this._list = list;
-        this._changes = changes;
-    }
-    onValidChange(valid) {
-        this.valid = valid;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MultiselectComponent, isStandalone: true, selector: "smart-crud-multiselect", ngImport: i0, template: "@let list = this.list();\n@if (list) {\n  <!--  <ion-header>-->\n  <!--    <ion-toolbar>-->\n  <!--      <ion-buttons slot=\"end\">-->\n  <!--        <ion-button (click)=\"onClose()\">-->\n  <!--          <ion-icon slot=\"icon-only\" name=\"close\"> </ion-icon>-->\n  <!--        </ion-button>-->\n  <!--      </ion-buttons>-->\n  <!--<ion-title>-->{{ 'selected' | translate }}: {{ list?.length\n  }}<!--</ion-title>-->\n  <!--    </ion-toolbar>-->\n  <!--  </ion-header>-->\n\n  @if (config?.list?.components?.multi) {\n    <div>\n      <ng-template\n        [ngComponentOutlet]=\"config?.list?.components?.multi\"\n        [ndcDynamicInputs]=\"{ items: list }\"\n      ></ng-template>\n    </div>\n  }\n\n  @if (showForm && item) {\n    <div>\n      <smart-form\n        [options]=\"item | smartFormOptions: 'multiUpdate' : config.type\"\n        (valuePartialChange)=\"onPartialChange($event, list)\"\n        (validChange)=\"onValidChange($event)\"\n      ></smart-form>\n\n      <smart-button\n        class=\"smart:float-right\"\n        [disabled]=\"lock || !valid\"\n        [options]=\"buttonOptions\"\n      >\n        {{ 'change' | translate }}\n      </smart-button>\n    </div>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: DynamicIoDirective, selector: "[ndcDynamicInputs],[ndcDynamicOutputs]", inputs: ["ndcDynamicInputs", "ndcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "component", type: FormComponent, selector: "smart-form", inputs: ["options", "class"], outputs: ["invokeSubmit", "valueChange", "valuePartialChange", "validChange"] }, { kind: "component", type: ButtonComponent, selector: "smart-button", inputs: ["options", "disabled", "class"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FormOptionsPipe, name: "smartFormOptions" }] });
+class MultiselectComponent extends MultiselectBaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MultiselectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: MultiselectComponent, isStandalone: true, selector: "smart-crud-multiselect", usesInheritance: true, ngImport: i0, template: "@let list = this.list();\n@if (list) {\n  <header\n    class=\"smart:flex smart:items-center smart:justify-between smart:border-b smart:border-gray-200 smart:px-4 smart:py-3\"\n  >\n    <h2 class=\"smart:text-lg smart:font-semibold smart:text-gray-900\">\n      {{ 'selected' | translate }}: {{ list.length }}\n    </h2>\n    <button\n      type=\"button\"\n      (click)=\"onClose()\"\n      aria-label=\"close\"\n      class=\"smart:rounded smart:p-1 smart:text-gray-500 smart:hover:bg-gray-100\"\n    >\n      \u2715\n    </button>\n  </header>\n\n  @if (config?.list?.components?.multi) {\n    <div>\n      <ng-template\n        [ngComponentOutlet]=\"config?.list?.components?.multi\"\n        [ndcDynamicInputs]=\"{ items: list }\"\n      ></ng-template>\n    </div>\n  }\n\n  @if (showForm && item) {\n    <div>\n      <smart-form\n        [options]=\"item | smartFormOptions: 'multiUpdate' : config.type\"\n        (valuePartialChange)=\"onPartialChange($event, list)\"\n        (validChange)=\"onValidChange($event)\"\n      ></smart-form>\n\n      <smart-button\n        class=\"smart:float-right\"\n        [disabled]=\"lock || !valid\"\n        [options]=\"buttonOptions\"\n      >\n        {{ 'change' | translate }}\n      </smart-button>\n    </div>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: DynamicIoDirective, selector: "[ndcDynamicInputs],[ndcDynamicOutputs]", inputs: ["ndcDynamicInputs", "ndcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "component", type: FormComponent, selector: "smart-form", inputs: ["options", "class"], outputs: ["invokeSubmit", "valueChange", "valuePartialChange", "validChange"] }, { kind: "component", type: ButtonComponent, selector: "smart-button", inputs: ["options", "disabled", "class"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FormOptionsPipe, name: "smartFormOptions" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
@@ -1584,8 +2627,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         FormOptionsPipe,
                         FormComponent,
                         ButtonComponent,
-                    ], template: "@let list = this.list();\n@if (list) {\n  <!--  <ion-header>-->\n  <!--    <ion-toolbar>-->\n  <!--      <ion-buttons slot=\"end\">-->\n  <!--        <ion-button (click)=\"onClose()\">-->\n  <!--          <ion-icon slot=\"icon-only\" name=\"close\"> </ion-icon>-->\n  <!--        </ion-button>-->\n  <!--      </ion-buttons>-->\n  <!--<ion-title>-->{{ 'selected' | translate }}: {{ list?.length\n  }}<!--</ion-title>-->\n  <!--    </ion-toolbar>-->\n  <!--  </ion-header>-->\n\n  @if (config?.list?.components?.multi) {\n    <div>\n      <ng-template\n        [ngComponentOutlet]=\"config?.list?.components?.multi\"\n        [ndcDynamicInputs]=\"{ items: list }\"\n      ></ng-template>\n    </div>\n  }\n\n  @if (showForm && item) {\n    <div>\n      <smart-form\n        [options]=\"item | smartFormOptions: 'multiUpdate' : config.type\"\n        (valuePartialChange)=\"onPartialChange($event, list)\"\n        (validChange)=\"onValidChange($event)\"\n      ></smart-form>\n\n      <smart-button\n        class=\"smart:float-right\"\n        [disabled]=\"lock || !valid\"\n        [options]=\"buttonOptions\"\n      >\n        {{ 'change' | translate }}\n      </smart-button>\n    </div>\n  }\n}\n" }]
-        }], ctorParameters: () => [] });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@let list = this.list();\n@if (list) {\n  <header\n    class=\"smart:flex smart:items-center smart:justify-between smart:border-b smart:border-gray-200 smart:px-4 smart:py-3\"\n  >\n    <h2 class=\"smart:text-lg smart:font-semibold smart:text-gray-900\">\n      {{ 'selected' | translate }}: {{ list.length }}\n    </h2>\n    <button\n      type=\"button\"\n      (click)=\"onClose()\"\n      aria-label=\"close\"\n      class=\"smart:rounded smart:p-1 smart:text-gray-500 smart:hover:bg-gray-100\"\n    >\n      \u2715\n    </button>\n  </header>\n\n  @if (config?.list?.components?.multi) {\n    <div>\n      <ng-template\n        [ngComponentOutlet]=\"config?.list?.components?.multi\"\n        [ndcDynamicInputs]=\"{ items: list }\"\n      ></ng-template>\n    </div>\n  }\n\n  @if (showForm && item) {\n    <div>\n      <smart-form\n        [options]=\"item | smartFormOptions: 'multiUpdate' : config.type\"\n        (valuePartialChange)=\"onPartialChange($event, list)\"\n        (validChange)=\"onValidChange($event)\"\n      ></smart-form>\n\n      <smart-button\n        class=\"smart:float-right\"\n        [disabled]=\"lock || !valid\"\n        [options]=\"buttonOptions\"\n      >\n        {{ 'change' | translate }}\n      </smart-button>\n    </div>\n  }\n}\n" }]
+        }] });
 
 class CrudListGroupService {
     facade = inject((CrudFacade));
@@ -1643,10 +2686,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
             type: Injectable
         }], propDecorators: { refresh: [] } });
 
-class GroupComponent extends BaseComponent$1 {
+class GroupBaseComponent extends BaseComponent$1 {
     styleService = inject(StyleService);
     elementRef = inject(ElementRef);
     groupService = inject((CrudListGroupService));
+    cd = inject(ChangeDetectorRef);
     groups = input(null, ...(ngDevMode ? [{ debugName: "groups" }] : []));
     listOptions = input(null, ...(ngDevMode ? [{ debugName: "listOptions" }] : []));
     change(val, item, force = false) {
@@ -1659,7 +2703,16 @@ class GroupComponent extends BaseComponent$1 {
             });
         }
         this.groupService.change(val, item, force);
-        item.show = val;
+        if (val) {
+            setTimeout(() => {
+                item.show = val;
+                this.cd.detectChanges();
+            });
+        }
+        else {
+            item.show = val;
+            this.cd.detectChanges();
+        }
     }
     ngOnInit() {
         this.styleService.init(this.elementRef);
@@ -1671,292 +2724,175 @@ class GroupComponent extends BaseComponent$1 {
         }
         super.ngOnDestroy();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: GroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: GroupComponent, isStandalone: true, selector: "smart-crud-group", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, listOptions: { classPropertyName: "listOptions", publicName: "listOptions", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
-    <!-- TODO: AccordionComponent moved to @smartsoft001-pro/angular (FRA-101)
-    @for (item of groups(); track item.key) {
-      <smart-accordion
-        [show]="item.show || false"
-        (showChange)="change($event, item)"
-      >
-        <smart-accordion-header [ngClass]="{ 'font-bold': item.show }">
-          {{ item.text | translate }}
-        </smart-accordion-header>
-        <smart-accordion-body>
-          @if (item.show && !item.children && listOptions()) {
-            <smart-list [options]="listOptions()!"></smart-list>
-          }
-          @if (item.children) {
-            <div style="margin-left: 50px">
-              <smart-crud-group
-                [groups]="item.children"
-                [listOptions]="listOptions()"
-              ></smart-crud-group>
-            </div>
-          }
-        </smart-accordion-body>
-      </smart-accordion>
-    }
-    -->
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: GroupBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.1", type: GroupBaseComponent, isStandalone: true, inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, listOptions: { classPropertyName: "listOptions", publicName: "listOptions", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: GroupBaseComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], listOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "listOptions", required: false }] }] } });
 
-    <!-- TODO: remove this template after moving to @smartsoft001-pro/angular (FRA-101) -->
+class GroupComponent extends GroupBaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: GroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: GroupComponent, isStandalone: true, selector: "smart-crud-group", usesInheritance: true, ngImport: i0, template: `
     @for (item of groups(); track item.key) {
-      <div (click)="change(!item.show, item)">
-        {{ item.text | translate }}
+      <div class="smart:border-b smart:border-gray-200">
+        <button
+          type="button"
+          (click)="change(!item.show, item)"
+          [attr.aria-expanded]="item.show || false"
+          [attr.aria-controls]="'smart-crud-group-' + item.key"
+          class="smart:flex smart:w-full smart:items-center smart:justify-between smart:py-3 smart:text-left smart:text-sm"
+          [class.smart:font-bold]="item.show"
+        >
+          <span>{{ item.text | translate }}</span>
+          <span aria-hidden="true" class="smart:text-gray-500">{{
+            item.show ? '▾' : '▸'
+          }}</span>
+        </button>
+        @if (item.show) {
+          <div [id]="'smart-crud-group-' + item.key" class="smart:pb-3">
+            @if (!item.children && listOptions()) {
+              <smart-list [options]="listOptions()!"></smart-list>
+            }
+            @if (item.children) {
+              <div class="smart:ml-12">
+                <smart-crud-group
+                  [groups]="item.children"
+                  [listOptions]="listOptions()"
+                ></smart-crud-group>
+              </div>
+            }
+          </div>
+        }
       </div>
-      @if (item.show && !item.children && listOptions()) {
-        <smart-list [options]="listOptions()!"></smart-list>
-      }
-      @if (item.children) {
-        <div style="margin-left: 50px">
-          <smart-crud-group
-            [groups]="item.children"
-            [listOptions]="listOptions()"
-          ></smart-crud-group>
-        </div>
-      }
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: GroupComponent, selector: "smart-crud-group", inputs: ["groups", "listOptions"] }, { kind: "component", type: 
-                // TODO: AccordionComponent moved to @smartsoft001-pro/angular (FRA-101)
-                // AccordionComponent,
-                // AccordionHeaderComponent,
-                // AccordionBodyComponent,
-                ListComponent$1, selector: "smart-list", inputs: ["options", "class"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: GroupComponent, selector: "smart-crud-group" }, { kind: "component", type: ListComponent$1, selector: "smart-list", inputs: ["options", "class"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: GroupComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'smart-crud-group',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
-    <!-- TODO: AccordionComponent moved to @smartsoft001-pro/angular (FRA-101)
-    @for (item of groups(); track item.key) {
-      <smart-accordion
-        [show]="item.show || false"
-        (showChange)="change($event, item)"
-      >
-        <smart-accordion-header [ngClass]="{ 'font-bold': item.show }">
-          {{ item.text | translate }}
-        </smart-accordion-header>
-        <smart-accordion-body>
-          @if (item.show && !item.children && listOptions()) {
-            <smart-list [options]="listOptions()!"></smart-list>
-          }
-          @if (item.children) {
-            <div style="margin-left: 50px">
-              <smart-crud-group
-                [groups]="item.children"
-                [listOptions]="listOptions()"
-              ></smart-crud-group>
-            </div>
-          }
-        </smart-accordion-body>
-      </smart-accordion>
-    }
-    -->
-
-    <!-- TODO: remove this template after moving to @smartsoft001-pro/angular (FRA-101) -->
     @for (item of groups(); track item.key) {
-      <div (click)="change(!item.show, item)">
-        {{ item.text | translate }}
+      <div class="smart:border-b smart:border-gray-200">
+        <button
+          type="button"
+          (click)="change(!item.show, item)"
+          [attr.aria-expanded]="item.show || false"
+          [attr.aria-controls]="'smart-crud-group-' + item.key"
+          class="smart:flex smart:w-full smart:items-center smart:justify-between smart:py-3 smart:text-left smart:text-sm"
+          [class.smart:font-bold]="item.show"
+        >
+          <span>{{ item.text | translate }}</span>
+          <span aria-hidden="true" class="smart:text-gray-500">{{
+            item.show ? '▾' : '▸'
+          }}</span>
+        </button>
+        @if (item.show) {
+          <div [id]="'smart-crud-group-' + item.key" class="smart:pb-3">
+            @if (!item.children && listOptions()) {
+              <smart-list [options]="listOptions()!"></smart-list>
+            }
+            @if (item.children) {
+              <div class="smart:ml-12">
+                <smart-crud-group
+                  [groups]="item.children"
+                  [listOptions]="listOptions()"
+                ></smart-crud-group>
+              </div>
+            }
+          </div>
+        }
       </div>
-      @if (item.show && !item.children && listOptions()) {
-        <smart-list [options]="listOptions()!"></smart-list>
-      }
-      @if (item.children) {
-        <div style="margin-left: 50px">
-          <smart-crud-group
-            [groups]="item.children"
-            [listOptions]="listOptions()"
-          ></smart-crud-group>
-        </div>
-      }
     }
   `,
-                    imports: [
-                        // TODO: AccordionComponent moved to @smartsoft001-pro/angular (FRA-101)
-                        // AccordionComponent,
-                        // AccordionHeaderComponent,
-                        // AccordionBodyComponent,
-                        ListComponent$1,
-                        NgClass,
-                        TranslatePipe,
-                    ],
+                    imports: [ListComponent$1, TranslatePipe],
                 }]
-        }], propDecorators: { groups: [{ type: i0.Input, args: [{ isSignal: true, alias: "groups", required: false }] }], listOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "listOptions", required: false }] }] } });
+        }] });
 
 class CrudListPaginationFactory {
     facade = inject((CrudFacade));
+    injector = inject(Injector);
     async create(options) {
         return {
             mode: options.mode,
-            limit: options.limit,
-            loadNextPage: () => {
-                if (!options.provider.getLinks() || !options.provider.getLinks().next)
-                    return Promise.resolve(false);
-                return new Promise((res) => {
-                    if (this.facade.loaded()) {
-                        setTimeout(() => {
-                            res(options.provider.getLinks() && options.provider.getLinks().next);
-                        });
-                    }
-                    const filter = options.provider.getFilter();
-                    this.facade.read({
-                        ...filter,
-                        offset: (filter.offset || 0) + (filter.limit || 0),
-                    });
-                });
-            },
-            loadPrevPage: () => {
-                if (!options.provider.getLinks() || !options.provider.getLinks().prev)
-                    return Promise.resolve(false);
-                return new Promise((res) => {
-                    const loaded = this.facade.loaded();
-                    if (loaded) {
-                        setTimeout(() => {
-                            res(options.provider.getLinks() && options.provider.getLinks().prev);
-                        });
-                    }
-                    const filter = options.provider.getFilter();
-                    this.facade.read({
-                        ...filter,
-                        offset: (filter.offset || 0) - (filter.limit || 0),
-                    });
-                });
-            },
-            page: computed(() => {
-                const f = this.facade.filter();
-                return f?.limit ? (f.offset || 0) / f.limit + 1 : 0;
-            }),
-            totalPages: computed(() => {
-                const filter = this.facade.filter();
-                const totalCount = this.facade.totalCount();
-                return filter?.limit && totalCount
-                    ? Math.ceil(totalCount / filter.limit)
-                    : 0;
-            }),
-        };
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudListPaginationFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudListPaginationFactory });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudListPaginationFactory, decorators: [{
-            type: Injectable
-        }] });
-
-class CrudService {
-    config = inject((CrudConfig));
-    http = inject(HttpClient);
-    _formatMap = {
-        csv: 'text/csv',
-        xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
-    };
-    create(item) {
-        return firstValueFrom(this.http
-            .post(this.config.apiUrl, item, { observe: 'response' })
-            .pipe(map((response) => {
-            const location = response.headers['Location'];
-            if (!location)
-                return null;
-            const array = location.split('/');
-            return array[array.length - 1];
-        })));
-    }
-    createMany(items, options) {
-        return firstValueFrom(this.http.post(this.config.apiUrl + '/bulk?mode=' + options.mode, items));
-    }
-    getById(id) {
-        return firstValueFrom(this.http.get(this.config.apiUrl + '/' + id));
-    }
-    getList(filter = null) {
-        return firstValueFrom(this.http.get(this.config.apiUrl + this.getQuery(filter)));
-    }
-    exportList(filter = null, format) {
-        if (!format) {
-            format = 'csv';
-        }
-        if (format === 'xlsx') {
-            return firstValueFrom(this.http
-                .get(this.config.apiUrl + this.getQuery(filter), {
-                headers: {
-                    'Content-Type': this._formatMap[format],
-                },
-                observe: 'response',
-                reportProgress: false,
-                responseType: 'blob',
-            })
-                .pipe(map((res) => {
-                const downloadLink = document.createElement('a');
-                const blob = res.body;
-                downloadLink.href = URL.createObjectURL(blob);
-                downloadLink.download = 'data.' + format;
-                document.body.appendChild(downloadLink);
-                downloadLink.click();
-                document.body.removeChild(downloadLink);
-            })));
-        }
-        return firstValueFrom(this.http
-            .get(this.config.apiUrl + this.getQuery(filter), {
-            headers: {
-                'Content-Type': this._formatMap[format],
-            },
-            responseType: 'text',
-        })
-            .pipe(map((res) => {
-            const downloadLink = document.createElement('a');
-            const blob = new Blob(['\ufeff', res]);
-            downloadLink.href = URL.createObjectURL(blob);
-            downloadLink.download = 'data.' + format;
-            document.body.appendChild(downloadLink);
-            downloadLink.click();
-            document.body.removeChild(downloadLink);
-        })));
-    }
-    update(item) {
-        return firstValueFrom(this.http.put(this.config.apiUrl + '/' + item.id, item));
-    }
-    updatePartial(item) {
-        return firstValueFrom(this.http.patch(this.config.apiUrl + '/' + item.id, item));
-    }
-    updatePartialMany(items) {
-        const updatePromises = items.map((item) => {
-            return this.updatePartial(item);
-        });
-        return Promise.all(updatePromises);
-    }
-    delete(id) {
-        return firstValueFrom(this.http.delete(this.config.apiUrl + '/' + id));
-    }
-    getQuery(filter) {
-        let query = '';
-        if (filter && filter.searchText) {
-            query += '&$search=' + filter.searchText;
-        }
-        if (filter && filter.limit) {
-            query += `&limit=${filter.limit}&offset=${filter.offset ? filter.offset : 0}`;
-        }
-        if (filter && filter.sortBy) {
-            query += `&sort=${(filter.sortDesc ? '-' : '') + filter.sortBy}`;
-        }
-        if (filter && filter.query) {
-            filter.query.forEach((q) => {
-                if (q.value &&
-                    typeof q.value === 'string' &&
-                    q.value.match(/^-?\d+$/) &&
-                    q.value[0] !== "'" &&
-                    q.value[0] !== '"') {
-                    query += '&' + q.key + q.type + `'${q.value}'`;
-                }
-                else {
-                    query += '&' + q.key + q.type + q.value;
-                }
-            });
-        }
-        return query ? '?' + query.replace('&', '') : '';
+            limit: options.limit,
+            loadNextPage: () => {
+                if (!options.provider.getLinks() || !options.provider.getLinks().next)
+                    return Promise.resolve(false);
+                return new Promise((res) => {
+                    toObservable(this.facade.loaded, { injector: this.injector })
+                        .pipe(filter((l) => !!l), take(1))
+                        .subscribe(() => {
+                        setTimeout(() => {
+                            res(options.provider.getLinks() &&
+                                options.provider.getLinks().next);
+                        });
+                    });
+                    const currentFilter = options.provider.getFilter();
+                    this.facade.read({
+                        ...currentFilter,
+                        offset: (currentFilter.offset || 0) + (currentFilter.limit || 0),
+                    });
+                });
+            },
+            loadPrevPage: () => {
+                if (!options.provider.getLinks() || !options.provider.getLinks().prev)
+                    return Promise.resolve(false);
+                return new Promise((res) => {
+                    toObservable(this.facade.loaded, { injector: this.injector })
+                        .pipe(filter((l) => !!l), take(1))
+                        .subscribe(() => {
+                        setTimeout(() => {
+                            res(options.provider.getLinks() &&
+                                options.provider.getLinks().prev);
+                        });
+                    });
+                    const currentFilter = options.provider.getFilter();
+                    this.facade.read({
+                        ...currentFilter,
+                        offset: (currentFilter.offset || 0) - (currentFilter.limit || 0),
+                    });
+                });
+            },
+            page: computed(() => {
+                const f = this.facade.filter();
+                return f?.limit ? (f.offset || 0) / f.limit + 1 : 0;
+            }),
+            totalPages: computed(() => {
+                const filter = this.facade.filter();
+                const totalCount = this.facade.totalCount();
+                return filter?.limit && totalCount
+                    ? Math.ceil(totalCount / filter.limit)
+                    : 0;
+            }),
+        };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudListPaginationFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudListPaginationFactory });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudListPaginationFactory, decorators: [{
+            type: Injectable
+        }] });
+
+class CrudModelLabelProvider extends IModelLabelProvider {
+    translateService = inject(TranslateService);
+    // Delegate to an app-level provider if one exists higher in the injector tree;
+    // otherwise fall back to translating 'MODEL.<key>'. (FRA-293 GAP / belt-and-suspenders.)
+    parent = inject(IModelLabelProvider, {
+        optional: true,
+        skipSelf: true,
+    });
+    get(options) {
+        if (this.parent)
+            return this.parent.get(options);
+        return signal(this.translateService.instant('MODEL.' + options.key));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudModelLabelProvider, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudModelLabelProvider });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudModelLabelProvider, decorators: [{
             type: Injectable
         }] });
 
@@ -2009,7 +2945,13 @@ class CrudComponentsModule {
             FilterIntComponent,
             MultiselectComponent,
             GroupComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudComponentsModule, providers: [CrudService, CrudFacade, CrudListPaginationFactory], imports: [ExportComponent,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudComponentsModule, providers: [
+            CrudService,
+            CrudFacade,
+            SocketService,
+            CrudListPaginationFactory,
+            { provide: IModelLabelProvider, useClass: CrudModelLabelProvider },
+        ], imports: [ExportComponent,
             FilterComponent,
             FilterTextComponent,
             FilterDateComponent,
@@ -2038,178 +2980,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         DynamicIoModule,
                     ],
                     exports: [CrudPipesModule, ...COMPONENTS],
-                    providers: [CrudService, CrudFacade, CrudListPaginationFactory],
+                    providers: [
+                        CrudService,
+                        CrudFacade,
+                        SocketService,
+                        CrudListPaginationFactory,
+                        { provide: IModelLabelProvider, useClass: CrudModelLabelProvider },
+                    ],
                 }]
         }] });
 
-class CrudEffects {
-    actions$;
-    service;
-    config;
-    store;
-    state;
-    constructor(actions$, service, config, store, state) {
-        this.actions$ = actions$;
-        this.service = service;
-        this.config = config;
-        this.store = store;
-        this.state = state;
-    }
-    init() {
-        const metadata = Reflect.getMetadata(this.config.entity, CrudEffects);
-        if (metadata)
-            return;
-        Reflect.defineMetadata(this.config.entity, true, CrudEffects);
-        this.actions$.subscribe((action) => {
-            switch (action.type) {
-                case `[${this.config.entity}] Create`:
-                    this.service
-                        .create(action.item)
-                        .then(() => this.store.dispatch(createSuccess(this.config.entity, action.item)))
-                        .catch((error) => {
-                        this.store.dispatch(createFailure(this.config.entity, action.item, error));
-                    });
-                    break;
-                case `[${this.config.entity}] Create Success`: {
-                    const createState = this.state.getValue()[this.config.entity];
-                    this.store.dispatch(read(this.config.entity, createState?.filter ? { ...createState.filter, offset: 0 } : null));
-                    break;
-                }
-                case `[${this.config.entity}] Create Many`:
-                    this.service
-                        .createMany(action.data.items, action.data.options)
-                        .then(() => this.store.dispatch(createManySuccess(this.config.entity, {
-                        items: action.data.items,
-                        options: action.data.options,
-                    })))
-                        .catch((error) => {
-                        this.store.dispatch(createManyFailure(this.config.entity, {
-                            items: action.data.items,
-                            options: action.data.options,
-                        }, error));
-                    });
-                    break;
-                case `[${this.config.entity}] Create Many Success`: {
-                    const createManyState = this.state.getValue()[this.config.entity];
-                    this.store.dispatch(read(this.config.entity, createManyState?.filter
-                        ? { ...createManyState.filter, offset: 0 }
-                        : null));
-                    break;
-                }
-                case `[${this.config.entity}] Read`:
-                    this.service
-                        .getList(action?.filter)
-                        .then((result) => this.store.dispatch(readSuccess(this.config.entity, action?.filter, result)))
-                        .catch((error) => {
-                        this.store.dispatch(readFailure(this.config.entity, action?.filter, error));
-                    });
-                    break;
-                case `[${this.config.entity}] Export`:
-                    this.service
-                        .exportList(action?.filter, action.format)
-                        .then(() => this.store.dispatch(exportListSuccess(this.config.entity, action?.filter)))
-                        .catch((error) => {
-                        this.store.dispatch(exportListFailure(this.config.entity, action?.filter, error));
-                    });
-                    break;
-                case `[${this.config.entity}] Select`:
-                    this.service
-                        .getById(action.id)
-                        .then((result) => this.store.dispatch(selectSuccess(this.config.entity, action.id, result)))
-                        .catch((error) => {
-                        this.store.dispatch(selectFailure(this.config.entity, action.id, error));
-                    });
-                    break;
-                case `[${this.config.entity}] Update`:
-                    this.service
-                        .updatePartial(action.item)
-                        .then(() => this.store.dispatch(updateSuccess(this.config.entity, action.item)))
-                        .catch((error) => {
-                        this.store.dispatch(updateFailure(this.config.entity, action.item, error));
-                        this.store.dispatch(read(this.config.entity));
-                    });
-                    break;
-                case `[${this.config.entity}] Update Success`:
-                    this.store
-                        .pipe(select$1(getCrudFilter(this.config.entity)), first())
-                        .subscribe((filter) => {
-                        this.store.dispatch(read(this.config.entity, {
-                            ...filter,
-                            offset: 0,
-                        }));
-                        this.store.dispatch(select(this.config.entity, action.item.id));
-                    });
-                    break;
-                case `[${this.config.entity}] Update partial`:
-                    this.service
-                        .updatePartial(action.item)
-                        .then(() => this.store.dispatch(updatePartialSuccess(this.config.entity, action.item)))
-                        .catch((error) => {
-                        this.store.dispatch(updatePartialFailure(this.config.entity, action.item, error));
-                        this.store.dispatch(read(this.config.entity));
-                    });
-                    break;
-                case `[${this.config.entity}] Update partial Success`:
-                    this.store
-                        .pipe(select$1(getCrudFilter(this.config.entity)), first())
-                        .subscribe((filter) => {
-                        this.store.dispatch(read(this.config.entity, {
-                            ...filter,
-                            offset: 0,
-                        }));
-                        this.store.dispatch(select(this.config.entity, action.item.id));
-                    });
-                    break;
-                case `[${this.config.entity}] Update partial many`:
-                    this.service
-                        .updatePartialMany(action.items)
-                        .then(() => this.store.dispatch(updatePartialManySuccess(this.config.entity, action.items)))
-                        .catch((error) => {
-                        this.store.dispatch(updatePartialManyFailure(this.config.entity, action.items, error));
-                        this.store.dispatch(read(this.config.entity));
-                    });
-                    break;
-                case `[${this.config.entity}] Update partial many Success`:
-                    this.store
-                        .pipe(select$1(getCrudFilter(this.config.entity)), first())
-                        .subscribe((filter) => {
-                        this.store.dispatch(read(this.config.entity, {
-                            ...filter,
-                            offset: 0,
-                        }));
-                    });
-                    break;
-                case `[${this.config.entity}] Delete`:
-                    this.service
-                        .delete(action.id)
-                        .then(() => this.store.dispatch(deleteSuccess(this.config.entity, action.id)))
-                        .catch((error) => {
-                        this.store.dispatch(deleteFailure(this.config.entity, action.id, error));
-                    });
-                    break;
-                case `[${this.config.entity}] Delete Success`:
-                    this.store
-                        .pipe(select$1(getCrudFilter(this.config.entity)), first())
-                        .subscribe((filter) => {
-                        this.store.dispatch(read(this.config.entity, {
-                            ...filter,
-                            offset: 0,
-                        }));
-                    });
-                    break;
-                default:
-                    console.warn(`No effect for action type ${action.type} in entity ${this.config.entity}`);
-                    break;
-            }
-        });
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudEffects, deps: [{ token: i1.ActionsSubject }, { token: CrudService }, { token: CrudConfig }, { token: i1.Store }, { token: i1.State }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudEffects });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: CrudEffects, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1.ActionsSubject }, { type: CrudService }, { type: CrudConfig }, { type: i1.Store }, { type: i1.State }] });
-
 class CrudItemPageBaseComponent extends BaseComponent$1 {
     config = inject((CrudFullConfig));
     facade = inject((CrudFacade));
@@ -2351,6 +3131,7 @@ class ItemComponent extends CreateDynamicComponent('crud-item-page') {
     _mode;
     pageOptions = signal({
         title: '',
+        variant: this.config.variant,
         showBackButton: true,
         hideMenuButton: true,
     }, ...(ngDevMode ? [{ debugName: "pageOptions" }] : []));
@@ -2370,7 +3151,6 @@ class ItemComponent extends CreateDynamicComponent('crud-item-page') {
     }
     selected;
     standardComponents = viewChildren(ItemStandardComponent, ...(ngDevMode ? [{ debugName: "standardComponents" }] : []));
-    // @ViewChild(IonContent, { static: true }) content: IonContent; //TODO: rewrite when rewriting ionic
     contentTpl = viewChild('contentTpl', ...(ngDevMode ? [{ debugName: "contentTpl" }] : []));
     topTpl = viewChild('topTpl', ...(ngDevMode ? [{ debugName: "topTpl" }] : []));
     bottomTpl = viewChild('bottomTpl', ...(ngDevMode ? [{ debugName: "bottomTpl" }] : []));
@@ -2666,54 +3446,54 @@ class ItemComponent extends CreateDynamicComponent('crud-item-page') {
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ItemComponent, isStandalone: true, selector: "smart-crud-item-page", viewQueries: [{ propertyName: "standardComponents", predicate: ItemStandardComponent, descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }, { propertyName: "topTpl", first: true, predicate: ["topTpl"], descendants: true, isSignal: true }, { propertyName: "bottomTpl", first: true, predicate: ["bottomTpl"], descendants: true, isSignal: true }, { propertyName: "dynamicContents", predicate: DynamicContentDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <!--    <smart-page [options]="pageOptions()">-->
-    <div #topTpl class="text-xl py-2.5 separator"></div>
-    @if (template() === 'default') {
-      <smart-crud-item-standard-page
-        [detailsOptions]="detailsOptions()"
-        [mode]="mode"
-        [uniqueProvider]="uniqueProvider()"
-        (onPartialChange)="onPartialChange($event)"
-        (onChange)="onChange($event)"
-        (onValidChange)="onValidChange($event)"
-      >
-        <ng-container [ngTemplateOutlet]="contentTpl"></ng-container>
-      </smart-crud-item-standard-page>
-    }
-    <ng-template #contentTpl>
-      <ng-content></ng-content>
-    </ng-template>
-    <div class="dynamic-content"></div>
-    <div #bottomTpl class="text-xl py-2.5 separator"></div>
-    <!--    </smart-page>-->
-  `, isInline: true, dependencies: [{ kind: "component", type: /*PageComponent,*/ ItemStandardComponent, selector: "smart-crud-item-standard-page" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+    <smart-page [options]="pageOptions()" [class]="config.cssClass || ''">
+      <div #topTpl class="text-xl py-2.5 separator"></div>
+      @if (template() === 'default') {
+        <smart-crud-item-standard-page
+          [detailsOptions]="detailsOptions()"
+          [mode]="mode"
+          [uniqueProvider]="uniqueProvider()"
+          (onPartialChange)="onPartialChange($event)"
+          (onChange)="onChange($event)"
+          (onValidChange)="onValidChange($event)"
+        >
+          <ng-container [ngTemplateOutlet]="contentTpl"></ng-container>
+        </smart-crud-item-standard-page>
+      }
+      <ng-template #contentTpl>
+        <ng-content></ng-content>
+      </ng-template>
+      <div class="dynamic-content"></div>
+      <div #bottomTpl class="text-xl py-2.5 separator"></div>
+    </smart-page>
+  `, isInline: true, dependencies: [{ kind: "component", type: PageComponent, selector: "smart-page", inputs: ["options", "class"] }, { kind: "component", type: ItemStandardComponent, selector: "smart-crud-item-standard-page" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ItemComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'smart-crud-item-page',
-                    imports: [/*PageComponent,*/ ItemStandardComponent, NgTemplateOutlet],
+                    imports: [PageComponent, ItemStandardComponent, NgTemplateOutlet],
                     template: `
-    <!--    <smart-page [options]="pageOptions()">-->
-    <div #topTpl class="text-xl py-2.5 separator"></div>
-    @if (template() === 'default') {
-      <smart-crud-item-standard-page
-        [detailsOptions]="detailsOptions()"
-        [mode]="mode"
-        [uniqueProvider]="uniqueProvider()"
-        (onPartialChange)="onPartialChange($event)"
-        (onChange)="onChange($event)"
-        (onValidChange)="onValidChange($event)"
-      >
-        <ng-container [ngTemplateOutlet]="contentTpl"></ng-container>
-      </smart-crud-item-standard-page>
-    }
-    <ng-template #contentTpl>
-      <ng-content></ng-content>
-    </ng-template>
-    <div class="dynamic-content"></div>
-    <div #bottomTpl class="text-xl py-2.5 separator"></div>
-    <!--    </smart-page>-->
+    <smart-page [options]="pageOptions()" [class]="config.cssClass || ''">
+      <div #topTpl class="text-xl py-2.5 separator"></div>
+      @if (template() === 'default') {
+        <smart-crud-item-standard-page
+          [detailsOptions]="detailsOptions()"
+          [mode]="mode"
+          [uniqueProvider]="uniqueProvider()"
+          (onPartialChange)="onPartialChange($event)"
+          (onChange)="onChange($event)"
+          (onValidChange)="onValidChange($event)"
+        >
+          <ng-container [ngTemplateOutlet]="contentTpl"></ng-container>
+        </smart-crud-item-standard-page>
+      }
+      <ng-template #contentTpl>
+        <ng-content></ng-content>
+      </ng-template>
+      <div class="dynamic-content"></div>
+      <div #bottomTpl class="text-xl py-2.5 separator"></div>
+    </smart-page>
   `,
                 }]
         }], ctorParameters: () => [], propDecorators: { standardComponents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => ItemStandardComponent), { isSignal: true }] }], contentTpl: [{ type: i0.ViewChild, args: ['contentTpl', { isSignal: true }] }], topTpl: [{ type: i0.ViewChild, args: ['topTpl', { isSignal: true }] }], bottomTpl: [{ type: i0.ViewChild, args: ['bottomTpl', { isSignal: true }] }], dynamicContents: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => DynamicContentDirective), { isSignal: true }] }] } });
@@ -2750,7 +3530,7 @@ class ListStandardComponent extends CrudListPageBaseComponent {
         [listOptions]="listOptions() || null"
       ></smart-crud-group>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: FiltersConfigComponent, selector: "smart-crud-filters-config" }, { kind: "component", type: ListComponent$1, selector: "smart-list", inputs: ["options", "class"] }, { kind: "component", type: GroupComponent, selector: "smart-crud-group", inputs: ["groups", "listOptions"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: FiltersConfigComponent, selector: "smart-crud-filters-config" }, { kind: "component", type: ListComponent$1, selector: "smart-list", inputs: ["options", "class"] }, { kind: "component", type: GroupComponent, selector: "smart-crud-group" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ListStandardComponent, decorators: [{
             type: Component,
@@ -2843,7 +3623,7 @@ class ListComponent extends CreateDynamicComponent('crud-list-page') {
         if (this.config.list?.resetQuery === 'beforeInit') {
             newFilter = {
                 query: this.config.baseQuery ? [...this.config.baseQuery] : [],
-                paginationMode: this.config.list.paginationMode,
+                paginationMode: this.config.list?.paginationMode,
                 limit: this.config.pagination
                     ? this.config.pagination.limit
                     : undefined,
@@ -2862,7 +3642,7 @@ class ListComponent extends CreateDynamicComponent('crud-list-page') {
         }
         else {
             newFilter = {
-                paginationMode: this.config.list.paginationMode,
+                paginationMode: this.config.list?.paginationMode,
                 limit: this.searchService.filter?.limit
                     ? this.searchService.filter.limit
                     : this.config.pagination
@@ -2892,6 +3672,7 @@ class ListComponent extends CreateDynamicComponent('crud-list-page') {
         const endButtons = this.getEndButtons();
         this.pageOptions.set({
             title: this.config.title || '',
+            variant: this.config.variant,
             search: this.config.search
                 ? {
                     text: computed(() => this.filter()?.searchText ?? ''),
@@ -3008,8 +3789,8 @@ class ListComponent extends CreateDynamicComponent('crud-list-page') {
                 }
                 : undefined,
             pagination: await this.paginationFacade.create({
-                mode: this.config.list.paginationMode,
-                limit: this.config.pagination.limit,
+                mode: this.config.list?.paginationMode,
+                limit: this.config.pagination?.limit ?? 0,
                 provider: {
                     getFilter: () => {
                         return this.filter() || {};
@@ -3125,42 +3906,42 @@ class ListComponent extends CreateDynamicComponent('crud-list-page') {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.1", type: ListComponent, isStandalone: true, selector: "smart-crud-list-page", viewQueries: [{ propertyName: "topTpl", first: true, predicate: ["topTpl"], descendants: true, isSignal: true }, { propertyName: "contentTpl", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }, { propertyName: "dynamicContents", predicate: DynamicContentDirective, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
     @if (filter() && pageOptions()) {
-      <!--      <smart-page [options]="pageOptions()">-->
-      <div #topTpl></div>
+      <smart-page [options]="pageOptions()" [class]="config.cssClass || ''">
+        <div #topTpl></div>
 
-      @if (template() === 'default' && listOptions()) {
-        <smart-crud-list-standard-page [listOptions]="listOptions()">
-          <ng-container [ngTemplateOutlet]="contentTpl"></ng-container>
-        </smart-crud-list-standard-page>
-      }
-      <ng-template #contentTpl>
-        <ng-content></ng-content>
-      </ng-template>
-      <div class="dynamic-content"></div>
-      <!--      </smart-page>-->
+        @if (template() === 'default' && listOptions()) {
+          <smart-crud-list-standard-page [listOptions]="listOptions()">
+            <ng-container [ngTemplateOutlet]="contentTpl"></ng-container>
+          </smart-crud-list-standard-page>
+        }
+        <ng-template #contentTpl>
+          <ng-content></ng-content>
+        </ng-template>
+        <div class="dynamic-content"></div>
+      </smart-page>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: ListStandardComponent, selector: "smart-crud-list-standard-page" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: PageComponent, selector: "smart-page", inputs: ["options", "class"] }, { kind: "component", type: ListStandardComponent, selector: "smart-crud-list-standard-page" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImport: i0, type: ListComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'smart-crud-list-page',
-                    imports: [ListStandardComponent, NgTemplateOutlet],
+                    imports: [PageComponent, ListStandardComponent, NgTemplateOutlet],
                     template: `
     @if (filter() && pageOptions()) {
-      <!--      <smart-page [options]="pageOptions()">-->
-      <div #topTpl></div>
+      <smart-page [options]="pageOptions()" [class]="config.cssClass || ''">
+        <div #topTpl></div>
 
-      @if (template() === 'default' && listOptions()) {
-        <smart-crud-list-standard-page [listOptions]="listOptions()">
-          <ng-container [ngTemplateOutlet]="contentTpl"></ng-container>
-        </smart-crud-list-standard-page>
-      }
-      <ng-template #contentTpl>
-        <ng-content></ng-content>
-      </ng-template>
-      <div class="dynamic-content"></div>
-      <!--      </smart-page>-->
+        @if (template() === 'default' && listOptions()) {
+          <smart-crud-list-standard-page [listOptions]="listOptions()">
+            <ng-container [ngTemplateOutlet]="contentTpl"></ng-container>
+          </smart-crud-list-standard-page>
+        }
+        <ng-template #contentTpl>
+          <ng-content></ng-content>
+        </ng-template>
+        <div class="dynamic-content"></div>
+      </smart-page>
     }
   `,
                 }]
@@ -3255,7 +4036,9 @@ class CrudCoreModule {
             CrudEffects,
             PageService,
             CrudFacade,
+            SocketService,
             CrudListPaginationFactory,
+            { provide: IModelLabelProvider, useClass: CrudModelLabelProvider },
         ], imports: [SharedModule,
             CrudPipesModule,
             FormsModule,
@@ -3279,7 +4062,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
                         CrudEffects,
                         PageService,
                         CrudFacade,
+                        SocketService,
                         CrudListPaginationFactory,
+                        { provide: IModelLabelProvider, useClass: CrudModelLabelProvider },
                     ],
                 }]
         }], ctorParameters: () => [{ type: CrudConfig }, { type: CrudEffects }] });
@@ -3294,6 +4079,9 @@ class CrudModule {
                     provide: FILE_SERVICE_CONFIG,
                     useValue: { apiUrl: options.config.apiUrl },
                 },
+                ...(options.socket
+                    ? [SocketService]
+                    : [{ provide: SocketService, useClass: NotSocketService }]),
             ],
         };
     }
@@ -3332,5 +4120,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CRUD_MODEL_POSSIBILITIES_PROVIDER, CrudComponentsModule, CrudConfig, CrudCoreModule, CrudFacade, CrudFullConfig, CrudFullModule, CrudItemPageBaseComponent, CrudListPageBaseComponent, CrudListPaginationFactory, CrudModule, CrudPipesModule, CrudSearchService, CrudService, ExportComponent, FilterCheckComponent, FilterComponent, FilterDateComponent, FilterDateTimeComponent, FilterDateWithEditComponent, FilterFlagComponent, FilterIntComponent, FilterRadioComponent, FilterTextComponent, FiltersComponent, FiltersConfigComponent, FormOptionsPipe, GroupComponent, ICrudModelPossibilitiesProvider, ItemComponent, ItemStandardComponent, ListComponent, ListStandardComponent, MultiselectComponent, PAGES, PageService, getCrudError, getCrudFilter, getCrudLinks, getCrudList, getCrudLoaded, getCrudMultiSelected, getCrudSelected, getCrudState, getCrudTotalCount, getReducer, initialState };
+export { CRUD_MODEL_POSSIBILITIES_PROVIDER, CrudComponentsModule, CrudConfig, CrudCoreModule, CrudEffects, CrudFacade, CrudFullConfig, CrudFullModule, CrudItemPageBaseComponent, CrudListPageBaseComponent, CrudListPaginationFactory, CrudModelLabelProvider, CrudModule, CrudPipesModule, CrudSearchService, CrudService, ExportBaseComponent, ExportComponent, FilterCheckComponent, FilterComponent, FilterDateComponent, FilterDateTimeComponent, FilterDateWithEditComponent, FilterFlagComponent, FilterIntComponent, FilterRadioComponent, FilterTextComponent, FiltersBaseComponent, FiltersComponent, FiltersConfigComponent, FormOptionsPipe, GroupBaseComponent, GroupComponent, ICrudModelPossibilitiesProvider, ItemComponent, ItemStandardComponent, ListComponent, ListStandardComponent, MultiselectBaseComponent, MultiselectComponent, PAGES, PageService, clear, create, createFailure, createMany, createManyFailure, createManySuccess, createSuccess, deleteFailure, deleteItem, deleteSuccess, exportList, exportListFailure, exportListSuccess, getCrudError, getCrudFilter, getCrudLinks, getCrudList, getCrudLoaded, getCrudMultiSelected, getCrudSelected, getCrudState, getCrudTotalCount, getReducer, initialState, multiSelect, read, readFailure, readSuccess, select, selectFailure, selectSuccess, unselect, update, updateFailure, updatePartial, updatePartialFailure, updatePartialMany, updatePartialManyFailure, updatePartialManySuccess, updatePartialSuccess, updateSuccess };
 //# sourceMappingURL=smartsoft001-crud-shell-angular.mjs.map