@smartsoft001/crud-shell-angular 2.76.0 → 2.80.0

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

@@ -0,0 +1,2840 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, computed, ElementRef, Component, input, Directive, signal, InjectionToken, Pipe, NgModule, viewChild, viewChildren, output, ChangeDetectorRef, effect, Injector } from '@angular/core';
+import { PaginationMode, BaseComponent as BaseComponent$1, PopoverService, StyleService, ButtonComponent, MenuService, FormComponent, AccordionComponent, AccordionHeaderComponent, AccordionBodyComponent, ListComponent as ListComponent$1, SharedModule, DetailsComponent, AuthService, CreateDynamicComponent, DynamicComponentLoader, ToastService, DetailsService, DynamicContentDirective, PageComponent, HardwareService, ListMode, FILE_SERVICE_CONFIG } from '@smartsoft001/angular';
+import { patchState, signalStore, withState, withComputed, withMethods } from '@ngrx/signals';
+import { HttpClient } from '@angular/common/http';
+import { firstValueFrom, Subscription, BehaviorSubject, combineLatest, Subject } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { FieldType, getModelOptions, getModelFieldsWithOptions } from '@smartsoft001/models';
+import { TranslateService, TranslatePipe } from '@ngx-translate/core';
+import { __decorate, __metadata } from 'tslib';
+import { Debounce, debounce } from 'lodash-decorators';
+import { FormsModule, UntypedFormControl, UntypedFormGroup, UntypedFormArray } from '@angular/forms';
+import * as moment from 'moment';
+import { GuidService, SpecificationService } from '@smartsoft001/utils';
+import { NgComponentOutlet, NgClass, CommonModule, NgTemplateOutlet, Location } from '@angular/common';
+import * as _ from 'lodash';
+import { DynamicIoDirective, DynamicIoModule } from 'ng-dynamic-component';
+import * as i1 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: "20.1.0", ngImport: i0, type: CrudConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudConfig });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", 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: "20.1.0", ngImport: i0, type: CrudFullConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudFullConfig });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudFullConfig, 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('&', '') : '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudService, decorators: [{
+            type: Injectable
+        }] });
+
+// "Actions, Reducers, Effects" in a normal store
+function CrudMethodsFactory() {
+    return (store, crudService = inject((CrudService))) => {
+        const methods = {
+            async create(item) {
+                patchState(store, {
+                    loaded: false,
+                    error: null,
+                });
+                try {
+                    await crudService.create(item);
+                    await this.createSuccess();
+                }
+                catch (error) {
+                    methods.defaultFailure(error);
+                }
+            },
+            async createSuccess() {
+                patchState(store, {
+                    loaded: true,
+                    error: null,
+                });
+                await methods.read(store.filter ? { ...store.filter, offset: 0 } : null);
+            },
+            async createMany(data) {
+                patchState(store, {
+                    loaded: false,
+                    error: null,
+                });
+                try {
+                    await crudService.createMany(data.items, data.options);
+                    await methods.createManySuccess();
+                }
+                catch (e) {
+                    methods.defaultFailure(e);
+                }
+            },
+            async createManySuccess() {
+                patchState(store, {
+                    loaded: true,
+                    error: null,
+                });
+                await methods.read(store.filter ? { ...store.filter, offset: 0 } : null);
+            },
+            async export(filter, format) {
+                patchState(store, {
+                    loaded: false,
+                });
+                try {
+                    await crudService.exportList(filter, format);
+                    methods.exportSuccess();
+                }
+                catch (e) {
+                    methods.defaultFailure(e);
+                }
+            },
+            exportSuccess() {
+                patchState(store, {
+                    loaded: true,
+                });
+            },
+            async read(filter) {
+                patchState(store, {
+                    loaded: false,
+                    filter,
+                    error: null,
+                    totalCount: null,
+                    links: null,
+                });
+                try {
+                    const result = await crudService.getList(filter);
+                    methods.readSuccess({
+                        list: result.data,
+                        filter,
+                        totalCount: result.totalCount,
+                        links: result.links,
+                    });
+                }
+                catch (error) {
+                    methods.defaultFailure(error);
+                }
+            },
+            readSuccess(data) {
+                let list = [];
+                if (data.filter?.offset &&
+                    store.list() &&
+                    data.filter.paginationMode !== PaginationMode.singlePage) {
+                    list = [...store.list(), ...data.list];
+                }
+                else {
+                    list = data.list;
+                }
+                patchState(store, {
+                    loaded: true,
+                    list,
+                    totalCount: data.totalCount,
+                    links: data.links,
+                    error: null,
+                });
+            },
+            clear() {
+                store.set(() => ({ ...initialState }));
+            },
+            async select(id) {
+                patchState(store, {
+                    loaded: false,
+                    selected: null,
+                    error: null,
+                });
+                try {
+                    const result = await crudService.getById(id);
+                    methods.selectSuccess(result);
+                }
+                catch (e) {
+                    methods.defaultFailure(e);
+                }
+            },
+            selectSuccess(selected) {
+                patchState(store, {
+                    loaded: true,
+                    selected,
+                    error: null,
+                });
+            },
+            unselect() {
+                patchState(store, {
+                    loaded: true,
+                    selected: null,
+                    error: null,
+                });
+            },
+            multiSelect(items) {
+                patchState(store, {
+                    multiSelected: [...items],
+                });
+            },
+            async update(item) {
+                patchState(store, {
+                    loaded: false,
+                    error: null,
+                });
+                try {
+                    await crudService.updatePartial(item);
+                    await methods.updateSuccess(item.id);
+                }
+                catch (e) {
+                    methods.defaultFailure(e);
+                }
+            },
+            async updateSuccess(id) {
+                await methods.read({ ...store.filter, offset: 0 });
+                await methods.select(id);
+            },
+            async updatePartial(item) {
+                patchState(store, {
+                    loaded: false,
+                    error: null,
+                });
+                try {
+                    await crudService.updatePartial(item);
+                    await methods.updatePartialSuccess(item.id);
+                }
+                catch (e) {
+                    methods.defaultFailure(e);
+                }
+            },
+            async updatePartialSuccess(id) {
+                await methods.read({ ...store.filter, offset: 0 });
+                await methods.select(id);
+            },
+            async updatePartialMany(items) {
+                patchState(store, {
+                    loaded: false,
+                    error: null,
+                });
+                try {
+                    await crudService.updatePartialMany(items);
+                    await methods.updatePartialManySuccess();
+                }
+                catch (e) {
+                    methods.defaultFailure(e);
+                }
+            },
+            async updatePartialManySuccess() {
+                await methods.read({ ...store.filter, offset: 0 });
+            },
+            async delete(id) {
+                patchState(store, {
+                    loaded: false,
+                    error: null,
+                });
+                try {
+                    await crudService.delete(id);
+                    await methods.deleteSuccess();
+                }
+                catch (e) {
+                    methods.defaultFailure(e);
+                }
+            },
+            async deleteSuccess() {
+                await methods.read({ ...store.filter, offset: 0 });
+            },
+            defaultFailure(error) {
+                patchState(store, {
+                    loaded: true,
+                    error,
+                });
+            },
+        };
+        return methods;
+    };
+}
+
+const initialState = {
+    loaded: false,
+};
+function createCrudFeatureStore() {
+    return signalStore({ providedIn: 'root' }, withState(initialState), withComputed((store) => {
+        return {
+            getError: computed(() => (store.error ? store.error() : null)),
+            getLoaded: computed(() => store.loaded()),
+            getSelected: computed(() => store.selected ? store.selected() : undefined),
+            getMultiSelected: computed(() => store.multiSelected ? store.multiSelected() : undefined),
+            getList: computed(() => (store.list ? store.list() : undefined)),
+            getTotalCount: computed(() => store.totalCount ? store.totalCount() : undefined),
+            getLinks: computed(() => (store.links ? store.links() : undefined)),
+            getFilter: computed(() => (store.filter ? store.filter() : undefined)),
+        };
+    }), withMethods(CrudMethodsFactory()));
+}
+
+class CrudFacade {
+    config;
+    store = createCrudFeatureStore();
+    loaded = this.store.getLoaded;
+    loading = computed(() => !this.store.getLoaded(), ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    selected = this.store.getSelected;
+    multiSelected = this.store.getMultiSelected;
+    list = this.store.getList;
+    filter = this.store.getFilter;
+    totalCount = this.store.getTotalCount;
+    links = this.store.getLinks;
+    error = this.store.getError;
+    constructor(config) {
+        this.config = config;
+    }
+    create(item) {
+        this.store.create(item);
+    }
+    createMany(items, options) {
+        this.store.createMany({ items, options });
+    }
+    read(filter = null) {
+        let baseQuery = [];
+        if (this.config.baseQuery) {
+            baseQuery = this.config.baseQuery;
+        }
+        const fullFilter = {
+            ...(filter ? filter : {}),
+            query: filter && filter.query ? filter.query : baseQuery,
+        };
+        this.store.read(fullFilter);
+    }
+    clear() {
+        this.store.clear();
+    }
+    select(id) {
+        this.store.select(id);
+    }
+    unselect() {
+        this.store.unselect();
+    }
+    multiSelect(items) {
+        this.store.multiSelect(items);
+    }
+    update(item) {
+        this.store.update(item);
+    }
+    export(filter = null, format = null) {
+        this.store.export(filter || {}, format);
+    }
+    updatePartial(item) {
+        this.store.updatePartial(item);
+    }
+    updatePartialMany(items) {
+        this.store.updatePartialMany(items);
+    }
+    delete(id) {
+        this.store.delete(id);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudFacade, deps: [{ token: CrudConfig }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudFacade });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudFacade, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: CrudConfig }] });
+
+class ExportComponent extends BaseComponent$1 {
+    facade = inject((CrudFacade));
+    popoverService = inject(PopoverService);
+    styleService = inject(StyleService);
+    elementRef = inject(ElementRef);
+    buttonExportCsvOptions = this.initButtonExportOptions('csv');
+    buttonExportXlsxOptions = this.initButtonExportOptions('xlsx');
+    ngOnInit() {
+        this.styleService.init(this.elementRef);
+    }
+    initButtonExportOptions(format) {
+        return {
+            click: () => {
+                this.facade.export({
+                    ...this.facade.filter(),
+                    offset: undefined,
+                    limit: undefined,
+                }, format);
+                const loading = this.facade.loading();
+                if (loading)
+                    return;
+                this.popoverService.close();
+            },
+            loading: this.facade.loading,
+            expand: 'block',
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ExportComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.0", type: ExportComponent, isStandalone: true, selector: "smart-crud-export", usesInheritance: true, ngImport: i0, template: `
+    <div class="p-5">
+      <p class="my-2.5 mx-0">
+        <smart-button [options]="buttonExportCsvOptions" class="w-full block"
+          >CSV</smart-button
+        >
+      </p>
+      <p>
+        <smart-button [options]="buttonExportXlsxOptions" class="w-full block"
+          >XLSX</smart-button
+        >
+      </p>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "component", type: ButtonComponent, selector: "smart-button", inputs: ["options", "disabled"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ExportComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'smart-crud-export',
+                    template: `
+    <div class="p-5">
+      <p class="my-2.5 mx-0">
+        <smart-button [options]="buttonExportCsvOptions" class="w-full block"
+          >CSV</smart-button
+        >
+      </p>
+      <p>
+        <smart-button [options]="buttonExportXlsxOptions" class="w-full block"
+          >XLSX</smart-button
+        >
+      </p>
+    </div>
+  `,
+                    imports: [ButtonComponent],
+                }]
+        }] });
+
+class BaseComponent {
+    facade = inject((CrudFacade));
+    translateService = inject(TranslateService);
+    possibilities;
+    item = input(...(ngDevMode ? [undefined, { debugName: "item" }] : []));
+    filter = input(...(ngDevMode ? [undefined, { debugName: "filter" }] : []));
+    get value() {
+        const filter = this.filter();
+        const item = this.item();
+        if (!filter || !item || !filter.query)
+            return null;
+        if (this.isArrayType()) {
+            return filter.query
+                .filter((q) => q.key === item.key && q.type === item.type)
+                .map((q) => q.value);
+        }
+        const query = filter.query.find((q) => q.key === item.key && q.type === item.type);
+        return query?.value;
+    }
+    set value(val) {
+        this.refresh(val);
+    }
+    get minValue() {
+        const filter = this.filter();
+        const item = this.item();
+        if (!filter || !item || !filter.query)
+            return null;
+        if (this.isArrayType()) {
+            return filter.query
+                .filter((q) => q.key === item.key && q.type === '>=')
+                .map((q) => q.value);
+        }
+        const query = filter.query.find((q) => q.key === item.key && q.type === '>=');
+        return query?.value;
+    }
+    set minValue(val) {
+        this.refresh(val, '>=');
+    }
+    get maxValue() {
+        const filter = this.filter();
+        const item = this.item();
+        if (!filter || !item || !filter.query)
+            return null;
+        if (this.isArrayType()) {
+            return filter.query
+                .filter((q) => q.key === item.key && q.type === '<=')
+                .map((q) => q.value);
+        }
+        const query = filter.query.find((q) => q.key === item.key && q.type === '<=');
+        return query?.value;
+    }
+    set maxValue(val) {
+        this.refresh(val, '<=');
+    }
+    get lang() {
+        return this.translateService.currentLang;
+    }
+    refresh(val, type = null) {
+        const filter = this.filter();
+        const item = this.item();
+        if (!filter || !item)
+            return;
+        if (!type)
+            type = item.type;
+        if (!filter.query)
+            filter.query = [];
+        filter.offset = 0;
+        if (this.isArrayType()) {
+            this.refreshForArray(val, type);
+            return;
+        }
+        let query = filter.query.find((q) => q.key === item.key && q.type === type);
+        if (val === null || val === undefined || val === '') {
+            if (query) {
+                const index = filter.query.indexOf(query);
+                if (index > -1) {
+                    filter.query.splice(index, 1);
+                }
+            }
+            this.facade.read(filter);
+            return;
+        }
+        if (!query) {
+            query = {
+                key: item.key,
+                type: type,
+                value: null,
+            };
+            filter.query.push(query);
+        }
+        query.value = val;
+        query.label = item.label;
+        this.facade.read(filter);
+    }
+    clear() {
+        const filter = this.filter();
+        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);
+    }
+    ngOnInit() {
+        this.initPossibilities();
+    }
+    initPossibilities() {
+        const item = this.item();
+        if (item?.possibilities) {
+            this.possibilities = item.possibilities;
+        }
+    }
+    isArrayType() {
+        const item = this.item();
+        return item?.fieldType === FieldType.check;
+    }
+    refreshForArray(vals, type) {
+        const filter = this.filter();
+        const item = this.item();
+        if (!filter || !item)
+            return;
+        if (!filter.query)
+            filter.query = [];
+        const queries = filter.query.filter((q) => q.key === item.key && q.type === type);
+        queries.forEach((query) => {
+            const index = filter.query.indexOf(query);
+            if (index > -1) {
+                filter.query.splice(index, 1);
+            }
+        });
+        if (vals === null || vals === undefined || !vals.length) {
+            this.facade.read(filter);
+            return;
+        }
+        vals.forEach((val) => {
+            const query = {
+                key: item.key,
+                type: type,
+                value: val,
+            };
+            filter.query.push(query);
+        });
+        this.facade.read(filter);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.1.0", 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 });
+}
+__decorate([
+    Debounce(500),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object, Object]),
+    __metadata("design:returntype", void 0)
+], BaseComponent.prototype, "refresh", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: BaseComponent, decorators: [{
+            type: Directive
+        }], propDecorators: { refresh: [] } });
+
+class FilterCheckComponent extends BaseComponent {
+    list;
+    ngAfterContentInit() {
+        this.list = computed(() => {
+            const possibilities = this.possibilities();
+            return possibilities.map((pos) => ({
+                value: pos,
+                isCheck: this.value.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.filter((r) => r !== entry.value.id);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FilterCheckComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", 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"] }]
+        }] });
+
+class FilterDateComponent extends BaseComponent {
+    id = GuidService.create();
+    get allowAdvanced() {
+        const item = this.item();
+        return item?.type === '=';
+    }
+    set customValue(val) {
+        const momentDate = moment(val);
+        this.value =
+            val?.length >= 10 && momentDate.isValid()
+                ? momentDate.format('YYYY-MM-DD')
+                : val;
+    }
+    get customValue() {
+        return this.value;
+    }
+    set customMinValue(val) {
+        const momentDate = moment(val);
+        this.minValue =
+            val?.length >= 10 && momentDate.isValid()
+                ? momentDate.format('YYYY-MM-DD')
+                : val;
+    }
+    get customMinValue() {
+        return this.minValue;
+    }
+    set customMaxValue(val) {
+        const momentDate = moment(val);
+        this.maxValue =
+            val?.length >= 10 && momentDate.isValid()
+                ? momentDate.format('YYYY-MM-DD')
+                : val;
+    }
+    get customMaxValue() {
+        return this.maxValue;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FilterDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", 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"] }]
+        }] });
+
+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!');
+        // }
+    }
+    ngOnDestroy() {
+        if (this._subscriptions) {
+            this._subscriptions.unsubscribe();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FilterDateTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FilterDateTimeComponent, 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"] }]
+        }] });
+
+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;
+        }
+    }
+    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!');
+        // }
+    }
+    ngOnDestroy() {
+        if (this._subscriptions) {
+            this._subscriptions.unsubscribe();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FilterDateWithEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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: "20.1.0", 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: "20.1.0", ngImport: i0, type: FilterFlagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", 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"] }]
+        }] });
+
+class FilterIntComponent extends BaseComponent {
+    _subscriptions = new Subscription();
+    advanced = signal(false, ...(ngDevMode ? [{ debugName: "advanced" }] : []));
+    get allowAdvanced() {
+        return this.item()?.type === '=';
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        if (this._subscriptions) {
+            this._subscriptions.unsubscribe();
+        }
+    }
+    toggleAdvanced() {
+        this.advanced.update((val) => !val);
+        if (this.advanced())
+            this.value = null;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FilterIntComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", 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"] }]
+        }] });
+
+class FilterRadioComponent extends BaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FilterRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", 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"] }]
+        }] });
+
+class FilterTextComponent extends BaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FilterTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", 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"] }]
+        }] });
+
+class FilterComponent {
+    FieldType = FieldType;
+    item = input(...(ngDevMode ? [undefined, { debugName: "item" }] : []));
+    filter = input(...(ngDevMode ? [undefined, { debugName: "filter" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-crud-filter', imports: [
+                        FilterTextComponent,
+                        FilterIntComponent,
+                        FilterFlagComponent,
+                        FilterCheckComponent,
+                        FilterRadioComponent,
+                        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" }]
+        }] });
+
+/**
+ * This component is only to use in crud module
+ * @requires CrudModule
+ * @example
+ *
+ * html: <smart-crud-filters></smart-crud-filters>
+ *
+ * use on the model:
+ * @Model({
+    titleKey: 'body',
+    filters: [
+        {
+            label: 'testNegation',
+            key: 'body',
+            type: '!=',
+        },
+        {
+            label: 'fromDate',
+            key: 'createDate',
+            type: '<=',
+            fieldType: FieldType.dateWithEdit
+        },
+        {
+            label: 'select',
+            key: 'type',
+            type: '=',
+            fieldType: FieldType.radio,
+            possibilities$: of([
+                {
+                    id: 1, text: 'Test 1'
+                },
+                {
+                    id: 2, text: 'Test 2'
+                }
+            ])
+        }
+    ]
+})
+ *
+ * use on the field (list.filter property):
+ * @Field({
+        create: modifyMetdata,
+        update: {
+            ...modifyMetdata,
+            multi: true
+        },
+        type: FieldType.longText,
+        details: true,
+        list: {
+            order: 2,
+            filter: true
+        }
+    })
+ 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: "20.1.0", ngImport: i0, type: FiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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, styles: [":host ion-toolbar.ios{height:4.6rem}:host ion-toolbar ion-buttons.ios{height:var(--smart-button-height);margin:0}\n"], dependencies: [{ kind: "component", type: FilterComponent, selector: "smart-crud-filter", inputs: ["item", "filter"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FiltersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-crud-filters', 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>-->
+  `, imports: [FilterComponent, TranslatePipe], styles: [":host ion-toolbar.ios{height:4.6rem}:host ion-toolbar ion-buttons.ios{height:var(--smart-button-height);margin:0}\n"] }]
+        }] });
+
+class FiltersConfigComponent {
+    facade = inject((CrudFacade));
+    styleService = inject(StyleService);
+    elementRef = inject(ElementRef);
+    query;
+    onRemoveQuery(item) {
+        const filter = this.facade.filter();
+        if (filter?.query) {
+            const index = filter.query.indexOf(item);
+            if (index > -1) {
+                filter.query.splice(index, 1);
+            }
+        }
+        this.facade.read(this.facade.filter());
+    }
+    ngOnInit() {
+        this.styleService.init(this.elementRef);
+        this.query = computed(() => {
+            const filter = this.facade.filter();
+            return filter?.query?.filter((i) => !i.hidden) || [];
+        }, ...(ngDevMode ? [{ debugName: "query" }] : []));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FiltersConfigComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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>-->
+    }
+  `, isInline: true, styles: [":host ion-label{font-size:var(--small-font-size)}\n"], dependencies: [{ kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FiltersConfigComponent, decorators: [{
+            type: Component,
+            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>-->
+    }
+  `, imports: [TranslatePipe], styles: [":host ion-label{font-size:var(--small-font-size)}\n"] }]
+        }] });
+
+/**
+ * @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 FormOptionsPipe {
+    modelPossibilitiesProvider = inject(CRUD_MODEL_POSSIBILITIES_PROVIDER);
+    transform(item, mode, type, uniqueProvider, inputComponents) {
+        if (!mode || !type)
+            return null;
+        let possibilities = {};
+        if (type && this.modelPossibilitiesProvider) {
+            possibilities = this.modelPossibilitiesProvider.get(type);
+        }
+        if (mode === 'create') {
+            return {
+                mode: 'create',
+                possibilities,
+                inputComponents,
+                uniqueProvider,
+                model: new type(),
+                show: true,
+            };
+        }
+        else {
+            const model = new type();
+            if (item) {
+                Object.keys(item).forEach((key) => {
+                    model[key] = item[key];
+                });
+            }
+            return {
+                mode: mode,
+                uniqueProvider,
+                possibilities: possibilities,
+                inputComponents,
+                model: model,
+                show: true,
+            };
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FormOptionsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.1.0", ngImport: i0, type: FormOptionsPipe, isStandalone: true, name: "smartFormOptions" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FormOptionsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'smartFormOptions',
+                }]
+        }] });
+
+class CrudPipesModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.0", ngImport: i0, type: CrudPipesModule, imports: [FormOptionsPipe], exports: [FormOptionsPipe] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudPipesModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudPipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [FormOptionsPipe],
+                    imports: [FormOptionsPipe],
+                }]
+        }] });
+
+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: "20.1.0", ngImport: i0, type: MultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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        style=\"float: right\"\n        [disabled]=\"lock || !valid\"\n        [options]=\"buttonOptions\"\n      >\n        {{ 'change' | translate }}\n      </smart-button>\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: DynamicIoDirective, selector: "[ndcDynamicInputs],[ndcDynamicOutputs]", inputs: ["ndcDynamicInputs", "ndcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "component", type: FormComponent, selector: "smart-form", inputs: ["options"], outputs: ["invokeSubmit", "valueChange", "valuePartialChange", "validChange"] }, { kind: "component", type: ButtonComponent, selector: "smart-button", inputs: ["options", "disabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FormOptionsPipe, name: "smartFormOptions" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: MultiselectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-crud-multiselect', imports: [
+                        TranslatePipe,
+                        NgComponentOutlet,
+                        DynamicIoDirective,
+                        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        style=\"float: right\"\n        [disabled]=\"lock || !valid\"\n        [options]=\"buttonOptions\"\n      >\n        {{ 'change' | translate }}\n      </smart-button>\n    </div>\n  }\n}\n" }]
+        }], ctorParameters: () => [] });
+
+class CrudListGroupService {
+    facade = inject((CrudFacade));
+    _destroyed = [];
+    change(val, item, force = false) {
+        if (val || force) {
+            item.changed = true;
+            const filter = this.facade.filter();
+            let current = filter?.query?.find((q) => q.key === item.key && q.type === '=');
+            if (!current) {
+                current = {
+                    key: item.key,
+                    type: '=',
+                    value: null,
+                };
+                if (filter?.query) {
+                    filter.query.push(current);
+                }
+            }
+            current.value = item.value;
+            current.hidden = true;
+            this.facade.read({
+                ...this.facade.filter(),
+                offset: 0,
+            });
+        }
+    }
+    destroy(groups) {
+        this._destroyed = [
+            ...(this._destroyed ? this._destroyed : []),
+            ...groups.filter((g) => g.changed),
+        ];
+        this.refresh();
+    }
+    refresh() {
+        const list = this._destroyed;
+        this._destroyed = [];
+        const filter = this.facade.filter();
+        const newQuery = filter?.query?.filter((q) => !list.some((i) => q.key === i.key)) || [];
+        this.facade.read({
+            ...this.facade.filter(),
+            query: newQuery,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudListGroupService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudListGroupService });
+}
+__decorate([
+    debounce(250),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", void 0)
+], CrudListGroupService.prototype, "refresh", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudListGroupService, decorators: [{
+            type: Injectable
+        }], propDecorators: { refresh: [] } });
+
+class GroupComponent extends BaseComponent$1 {
+    styleService = inject(StyleService);
+    elementRef = inject(ElementRef);
+    groupService = inject((CrudListGroupService));
+    groups = input(...(ngDevMode ? [undefined, { debugName: "groups" }] : []));
+    listOptions = input(...(ngDevMode ? [undefined, { debugName: "listOptions" }] : []));
+    change(val, item, force = false) {
+        const groups = this.groups();
+        if (groups) {
+            groups
+                .filter((i) => i.value !== item.value || i.key !== item.key)
+                .forEach((i) => {
+                i.show = false;
+            });
+        }
+        this.groupService.change(val, item, force);
+        item.show = val;
+    }
+    ngOnInit() {
+        this.styleService.init(this.elementRef);
+    }
+    ngOnDestroy() {
+        const groups = this.groups();
+        if (groups) {
+            this.groupService.destroy(groups);
+        }
+        super.ngOnDestroy();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: GroupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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: `
+    @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>
+    }
+    <br /><br /><br />
+  `, isInline: true, dependencies: [{ kind: "component", type: GroupComponent, selector: "smart-crud-group", inputs: ["groups", "listOptions"] }, { kind: "component", type: AccordionComponent, selector: "smart-accordion", inputs: ["show"], outputs: ["showChange"] }, { kind: "component", type: AccordionHeaderComponent, selector: "smart-accordion-header" }, { kind: "component", type: AccordionBodyComponent, selector: "smart-accordion-body" }, { kind: "component", type: ListComponent$1, selector: "smart-list", inputs: ["options"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: GroupComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'smart-crud-group',
+                    template: `
+    @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>
+    }
+    <br /><br /><br />
+  `,
+                    imports: [
+                        AccordionComponent,
+                        AccordionHeaderComponent,
+                        AccordionBodyComponent,
+                        ListComponent$1,
+                        NgClass,
+                        TranslatePipe,
+                    ],
+                }]
+        }] });
+
+class CrudListPaginationFactory {
+    facade = inject((CrudFacade));
+    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: "20.1.0", ngImport: i0, type: CrudListPaginationFactory, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudListPaginationFactory });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudListPaginationFactory, decorators: [{
+            type: Injectable
+        }] });
+
+const COMPONENTS = [
+    ExportComponent,
+    FilterComponent,
+    FilterTextComponent,
+    FiltersConfigComponent,
+    FilterDateComponent,
+    FilterDateWithEditComponent,
+    FilterDateTimeComponent,
+    FilterRadioComponent,
+    FiltersComponent,
+    FilterFlagComponent,
+    FilterCheckComponent,
+    FilterIntComponent,
+    MultiselectComponent,
+    GroupComponent,
+];
+class CrudComponentsModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.0", ngImport: i0, type: CrudComponentsModule, imports: [ExportComponent,
+            FilterComponent,
+            FilterTextComponent,
+            FiltersConfigComponent,
+            FilterDateComponent,
+            FilterDateWithEditComponent,
+            FilterDateTimeComponent,
+            FilterRadioComponent,
+            FiltersComponent,
+            FilterFlagComponent,
+            FilterCheckComponent,
+            FilterIntComponent,
+            MultiselectComponent,
+            GroupComponent, SharedModule,
+            CrudPipesModule,
+            FormsModule,
+            CommonModule,
+            DynamicIoModule], exports: [CrudPipesModule, ExportComponent,
+            FilterComponent,
+            FilterTextComponent,
+            FiltersConfigComponent,
+            FilterDateComponent,
+            FilterDateWithEditComponent,
+            FilterDateTimeComponent,
+            FilterRadioComponent,
+            FiltersComponent,
+            FilterFlagComponent,
+            FilterCheckComponent,
+            FilterIntComponent,
+            MultiselectComponent,
+            GroupComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudComponentsModule, providers: [CrudService, CrudFacade, CrudListPaginationFactory], imports: [ExportComponent,
+            FilterComponent,
+            FilterTextComponent,
+            FilterDateComponent,
+            FilterDateWithEditComponent,
+            FilterDateTimeComponent,
+            FilterRadioComponent,
+            FiltersComponent,
+            FilterFlagComponent,
+            FilterIntComponent,
+            MultiselectComponent,
+            GroupComponent, SharedModule,
+            CrudPipesModule,
+            FormsModule,
+            CommonModule,
+            DynamicIoModule, CrudPipesModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudComponentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        ...COMPONENTS,
+                        SharedModule,
+                        CrudPipesModule,
+                        FormsModule,
+                        CommonModule,
+                        DynamicIoModule,
+                    ],
+                    exports: [CrudPipesModule, ...COMPONENTS],
+                    providers: [CrudService, CrudFacade, CrudListPaginationFactory],
+                }]
+        }] });
+
+class CrudItemPageBaseComponent extends BaseComponent$1 {
+    config = inject((CrudFullConfig));
+    facade = inject((CrudFacade));
+    static smartType = 'crud-item-page';
+    selected;
+    contentTpl = viewChild('contentTpl', ...(ngDevMode ? [{ debugName: "contentTpl" }] : []));
+    formComponents = viewChildren(FormComponent, ...(ngDevMode ? [{ debugName: "formComponents" }] : []));
+    detailsOptions = input(...(ngDevMode ? [undefined, { debugName: "detailsOptions" }] : []));
+    mode = input(...(ngDevMode ? [undefined, { debugName: "mode" }] : []));
+    uniqueProvider = input(...(ngDevMode ? [undefined, { debugName: "uniqueProvider" }] : []));
+    onPartialChange = output();
+    onChange = output();
+    onValidChange = output();
+    constructor() {
+        super();
+        this.selected = this.facade.selected;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudItemPageBaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.1.0", type: CrudItemPageBaseComponent, isStandalone: true, inputs: { detailsOptions: { classPropertyName: "detailsOptions", publicName: "detailsOptions", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, uniqueProvider: { classPropertyName: "uniqueProvider", publicName: "uniqueProvider", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onPartialChange: "onPartialChange", onChange: "onChange", onValidChange: "onValidChange" }, viewQueries: [{ propertyName: "contentTpl", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }, { propertyName: "formComponents", predicate: FormComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudItemPageBaseComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: () => [] });
+
+class ItemStandardComponent extends CrudItemPageBaseComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ItemStandardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: ItemStandardComponent, isStandalone: true, selector: "smart-crud-item-standard-page", usesInheritance: true, ngImport: i0, template: `
+    @if (mode() === 'details') {
+      @if (detailsOptions()) {
+        <smart-details [options]="detailsOptions()"></smart-details>
+      }
+    } @else {
+      <ng-container [ngTemplateOutlet]="editTpl"></ng-container>
+    }
+
+    <ng-template #editTpl>
+      <smart-form
+        [options]="
+          selected()
+            | smartFormOptions
+              : mode()
+              : config?.type
+              : uniqueProvider()
+              : config.inputComponents
+        "
+        (valuePartialChange)="onPartialChange.emit($event)"
+        (valueChange)="onChange.emit($event)"
+        (validChange)="onValidChange.emit($event)"
+      ></smart-form>
+    </ng-template>
+
+    <br /><br />
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: DetailsComponent, selector: "smart-details", inputs: ["options"] }, { kind: "component", type: FormComponent, selector: "smart-form", inputs: ["options"], outputs: ["invokeSubmit", "valueChange", "valuePartialChange", "validChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: FormOptionsPipe, name: "smartFormOptions" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ItemStandardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-crud-item-standard-page', template: `
+    @if (mode() === 'details') {
+      @if (detailsOptions()) {
+        <smart-details [options]="detailsOptions()"></smart-details>
+      }
+    } @else {
+      <ng-container [ngTemplateOutlet]="editTpl"></ng-container>
+    }
+
+    <ng-template #editTpl>
+      <smart-form
+        [options]="
+          selected()
+            | smartFormOptions
+              : mode()
+              : config?.type
+              : uniqueProvider()
+              : config.inputComponents
+        "
+        (valuePartialChange)="onPartialChange.emit($event)"
+        (valueChange)="onChange.emit($event)"
+        (validChange)="onValidChange.emit($event)"
+      ></smart-form>
+    </ng-template>
+
+    <br /><br />
+  `, imports: [
+                        DetailsComponent,
+                        FormComponent,
+                        FormOptionsPipe,
+                        NgTemplateOutlet,
+                        FormComponent,
+                    ] }]
+        }] });
+
+class PageService {
+    authService = inject(AuthService);
+    config = inject((CrudFullConfig));
+    checkPermissions() {
+        const val = this.config;
+        const modelOptions = getModelOptions(val.type);
+        if (val.add &&
+            modelOptions.create &&
+            modelOptions.create.permissions &&
+            !this.authService.expectPermissions(modelOptions.create.permissions)) {
+            val.add = false;
+        }
+        if (val.edit &&
+            modelOptions.update &&
+            modelOptions.update.permissions &&
+            !this.authService.expectPermissions(modelOptions.update.permissions)) {
+            val.edit = false;
+        }
+        if (val.remove &&
+            modelOptions.remove &&
+            modelOptions.remove.permissions &&
+            !this.authService.expectPermissions(modelOptions.remove.permissions)) {
+            val.remove = false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: PageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: PageService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: PageService, decorators: [{
+            type: Injectable
+        }] });
+
+class ItemComponent extends CreateDynamicComponent('crud-item-page') {
+    router = inject(Router);
+    activeRoute = inject(ActivatedRoute);
+    facade = inject((CrudFacade));
+    service = inject((CrudService));
+    dynamicComponentLoader = inject((DynamicComponentLoader));
+    translateService = inject(TranslateService);
+    config = inject((CrudFullConfig));
+    location = inject(Location);
+    cd = inject(ChangeDetectorRef);
+    styleService = inject(StyleService);
+    elementRef = inject(ElementRef);
+    toastService = inject(ToastService);
+    pageService = inject((PageService));
+    detailsService = inject(DetailsService);
+    _mode;
+    pageOptions = signal({
+        title: '',
+        showBackButton: true,
+        hideMenuButton: true,
+    }, ...(ngDevMode ? [{ debugName: "pageOptions" }] : []));
+    detailsOptions;
+    id;
+    formValue;
+    formValid = false;
+    item;
+    formPartialValue;
+    uniqueProvider;
+    set mode(val) {
+        this._mode = signal(val, ...(ngDevMode ? [{ debugName: "_mode" }] : []));
+        this.refreshDynamicInstance();
+    }
+    get mode() {
+        return this._mode();
+    }
+    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" }] : []));
+    dynamicContents = viewChildren(DynamicContentDirective, ...(ngDevMode ? [{ debugName: "dynamicContents" }] : []));
+    subscription = new Subscription();
+    constructor() {
+        super();
+        this.selected = this.facade.selected;
+    }
+    refreshProperties() {
+        this.baseComponentRef.setInput('detailsOptions', this.detailsOptions());
+        this.baseComponentRef.setInput('mode', this.mode);
+        this.baseComponentRef.setInput('uniqueProvider', this.uniqueProvider());
+        this.subscription.add(this.baseInstance.onPartialChange.subscribe((val) => this.onPartialChange(val)));
+        this.subscription.add(this.baseInstance.onChange.subscribe((val) => this.onChange(val)));
+        this.subscription.add(this.baseInstance.onValidChange.subscribe((val) => this.onValidChange(val)));
+    }
+    async ngOnInit() {
+        this.detailsService.init();
+        this.styleService.init(this.elementRef);
+        this.pageService.checkPermissions();
+        if (this.router.routerState.snapshot.url.split('?')[0].endsWith('/add')) {
+            this.mode = 'create';
+            await this.generateComponents('add');
+        }
+        else {
+            this.mode = this.config.details ? 'details' : 'update';
+            if (this.mode === 'update') {
+                await this.generateComponents('edit');
+            }
+            this.activeRoute.params
+                .pipe(this.takeUntilDestroy)
+                .subscribe(({ id }) => {
+                this.facade.select(id);
+                this.id = id;
+            });
+            this.activeRoute.queryParams
+                .pipe(this.takeUntilDestroy)
+                .subscribe(({ edit }) => {
+                if (edit) {
+                    this.mode = 'update';
+                    this.generateComponents('edit');
+                }
+            });
+        }
+        this.uniqueProvider.set(async (values) => {
+            const filter = {
+                query: [],
+            };
+            Object.keys(values).forEach((key) => {
+                filter.query.push({
+                    key: key,
+                    value: values[key],
+                    type: '=',
+                });
+            });
+            if (this.id) {
+                filter.query.push({
+                    key: 'id',
+                    value: this.id,
+                    type: '!=',
+                });
+            }
+            const { totalCount } = await this.service.getList(filter);
+            return !totalCount;
+        });
+        if (this.config.details) {
+            const compiledComponents = await this.dynamicComponentLoader.getComponentsWithFactories({
+                components: [
+                    ...(this.config.details &&
+                        this.config.details['components'] &&
+                        this.config.details['components'].top
+                        ? [this.config.details['components'].top]
+                        : []),
+                    ...(this.config.details &&
+                        this.config.details['components'] &&
+                        this.config.details['components'].bottom
+                        ? [this.config.details['components'].bottom]
+                        : []),
+                ],
+            });
+            this.detailsOptions.set({
+                type: this.config.type,
+                item: this.facade.selected,
+                cellPipe: this.config.details
+                    ? this.config.details.cellPipe
+                    : undefined,
+                componentFactories: {
+                    top: this.config.details &&
+                        this.config.details['components'] &&
+                        this.config.details['components'].top
+                        ? compiledComponents.find((cc) => cc.component ===
+                            this.config.details['components'].top)?.factory
+                        : undefined,
+                    bottom: this.config.details &&
+                        this.config.details['components'] &&
+                        this.config.details['components'].bottom
+                        ? compiledComponents.find((cc) => cc.component ===
+                            this.config.details['components'].bottom)?.factory
+                        : undefined,
+                },
+            });
+        }
+        this.initPageOptions();
+        effect(() => {
+            this.item = this.facade.selected();
+            this.initPageOptions();
+            this.cd.detectChanges();
+        });
+        this.refreshDynamicInstance();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.subscription.unsubscribe();
+    }
+    async generateComponents(mode) {
+        const compiledComponents = await this.dynamicComponentLoader.getComponentsWithFactories({
+            components: [
+                ...(this.config[mode] &&
+                    this.config[mode]['components'] &&
+                    this.config[mode]['components'].top
+                    ? [this.config[mode]['components'].top]
+                    : []),
+                ...(this.config[mode] &&
+                    this.config[mode]['components'] &&
+                    this.config[mode]['components'].bottom
+                    ? [this.config[mode]['components'].bottom]
+                    : []),
+            ],
+        });
+        const topComponentFactory = compiledComponents.find((cc) => cc.component === this.config[mode]['components']?.top)?.factory;
+        const bottomComponentFactory = compiledComponents.find((cc) => cc.component === this.config[mode]['components']?.bottom)?.factory;
+        if (!this.topTpl()?.get(0) && topComponentFactory) {
+            this.topTpl()?.createComponent(topComponentFactory);
+        }
+        if (!this.bottomTpl()?.get(0) && bottomComponentFactory) {
+            this.bottomTpl()?.createComponent(bottomComponentFactory);
+        }
+    }
+    onPartialChange(val) {
+        this.formPartialValue = val;
+    }
+    onChange(val) {
+        this.formValue = val;
+    }
+    onValidChange(val) {
+        this.formValid = val;
+    }
+    initPageOptions() {
+        this.pageOptions.set({
+            ...this.pageOptions(),
+            title: this.getTitle() || '',
+            endButtons: this.getButtons(),
+        });
+    }
+    getButtons() {
+        const options = getModelOptions(this.config.type);
+        switch (this.mode) {
+            case 'create':
+                return [
+                    {
+                        icon: 'add',
+                        text: 'add',
+                        handler: () => {
+                            if (this.checkFirstInvalid()) {
+                                return;
+                            }
+                            this.facade.create(this.formValue);
+                            this.location.back();
+                        },
+                    },
+                ];
+            case 'update':
+                return [
+                    ...(this.config.details
+                        ? [
+                            {
+                                icon: 'close',
+                                text: 'cancel',
+                                handler: () => {
+                                    this.mode = 'details';
+                                    this.initPageOptions();
+                                    this.topTpl()?.clear();
+                                    this.bottomTpl()?.clear();
+                                },
+                                disabled$: new BehaviorSubject(false),
+                            },
+                        ]
+                        : []),
+                    {
+                        icon: 'save',
+                        text: 'save',
+                        handler: () => {
+                            if (this.checkFirstInvalid()) {
+                                return;
+                            }
+                            this.formPartialValue.id = this.id;
+                            this.facade.updatePartial(this.formPartialValue);
+                            if (this.config.details) {
+                                this.mode = 'details';
+                                this.initPageOptions();
+                            }
+                            else {
+                                this.location.back();
+                            }
+                        },
+                    },
+                ];
+            case 'details':
+                return this.config.edit &&
+                    (!options?.update?.enabled ||
+                        SpecificationService.valid(this.item, options?.update?.enabled))
+                    ? [
+                        {
+                            icon: 'create',
+                            text: 'edit',
+                            handler: () => {
+                                this.mode = 'update';
+                                this.generateComponents('edit');
+                                this.initPageOptions();
+                            },
+                            disabled$: new BehaviorSubject(false),
+                        },
+                    ]
+                    : [];
+            default:
+                return undefined;
+        }
+    }
+    getTitle() {
+        const options = getModelOptions(this.config.type);
+        const prefix = options.titleKey && this.item
+            ? this.removeParagraph(this.item[options.titleKey]) + ' - '
+            : '';
+        switch (this.mode) {
+            case 'create':
+                return 'add';
+            case 'update':
+                return prefix + this.translateService.instant('change');
+            case 'details':
+                return prefix + this.translateService.instant('details');
+            default:
+                return undefined;
+        }
+    }
+    removeParagraph(val) {
+        if (!val || val.indexOf('<p>') !== 0)
+            return val;
+        const div = document.createElement('div');
+        div.innerHTML = val;
+        const item = div.querySelectorAll('p').item(0);
+        return item.innerHTML;
+    }
+    checkFirstInvalid() {
+        this.cd.detectChanges();
+        const form = this.template() === 'default'
+            ? this.standardComponents()?.[0]?.formComponents?.[0]?.form
+            : this.baseInstance.formComponents()[0].form;
+        this.cd.detectChanges();
+        if (form.valid)
+            return false;
+        const invalidFields = [];
+        this.getInvalidFields(form, invalidFields, '');
+        this.toastService.info({
+            title: this.translateService.instant('INPUT.ERRORS.requires'),
+            message: invalidFields.slice(0, 3).join('<br/>'),
+        });
+        return true;
+    }
+    getInvalidFields(control, invalidFields, baseField, key = null) {
+        if (control.valid)
+            return;
+        const field = key
+            ? baseField + ' > ' + this.translateService.instant('MODEL.' + key)
+            : baseField;
+        if (control.errors?.['customMessage']) {
+            invalidFields.push(field + ` (${control.errors['customMessage']})`);
+            return;
+        }
+        if (control instanceof UntypedFormControl) {
+            invalidFields.push(field);
+        }
+        if (control instanceof UntypedFormGroup) {
+            Object.keys(control.controls).forEach((groupKey) => {
+                this.getInvalidFields(control.controls[groupKey], invalidFields, field, groupKey);
+            });
+        }
+        if (control instanceof UntypedFormArray) {
+            control.controls.forEach((c, index) => {
+                this.getInvalidFields(c, invalidFields, field + `(${index + 1})`);
+            });
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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, selector: "smart-page", inputs: ["options"] }, { 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: "20.1.0", ngImport: i0, type: ItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'smart-crud-item-page',
+                    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>
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+class CrudListPageBaseComponent extends BaseComponent$1 {
+    config = inject((CrudFullConfig));
+    static smartType = 'crud-list-page';
+    contentTpl = viewChild('contentTpl', ...(ngDevMode ? [{ debugName: "contentTpl" }] : []));
+    listOptions = input(...(ngDevMode ? [undefined, { debugName: "listOptions" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudListPageBaseComponent, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.2.0", version: "20.1.0", type: CrudListPageBaseComponent, isStandalone: true, inputs: { listOptions: { classPropertyName: "listOptions", publicName: "listOptions", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "contentTpl", first: true, predicate: ["contentTpl"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudListPageBaseComponent, decorators: [{
+            type: Directive
+        }] });
+
+class ListStandardComponent extends CrudListPageBaseComponent {
+    facade = inject((CrudFacade));
+    config = inject((CrudFullConfig));
+    isSearch = computed(() => !!this.facade.filter()?.searchText, ...(ngDevMode ? [{ debugName: "isSearch" }] : []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ListStandardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: ListStandardComponent, isStandalone: true, selector: "smart-crud-list-standard-page", providers: [CrudListGroupService], usesInheritance: true, ngImport: i0, template: `
+    <smart-crud-filters-config></smart-crud-filters-config>
+    @let groups = config.list?.groups;
+    @if (listOptions()) {
+      <smart-list
+        [hidden]="groups && !isSearch()"
+        [options]="listOptions()!"
+      ></smart-list>
+    }
+    @if (groups && !isSearch()) {
+      <smart-crud-group
+        [groups]="groups"
+        [listOptions]="listOptions()"
+      ></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"] }, { kind: "component", type: GroupComponent, selector: "smart-crud-group", inputs: ["groups", "listOptions"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ListStandardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'smart-crud-list-standard-page',
+                    template: `
+    <smart-crud-filters-config></smart-crud-filters-config>
+    @let groups = config.list?.groups;
+    @if (listOptions()) {
+      <smart-list
+        [hidden]="groups && !isSearch()"
+        [options]="listOptions()!"
+      ></smart-list>
+    }
+    @if (groups && !isSearch()) {
+      <smart-crud-group
+        [groups]="groups"
+        [listOptions]="listOptions()"
+      ></smart-crud-group>
+    }
+  `,
+                    imports: [FiltersConfigComponent, ListComponent$1, GroupComponent],
+                    providers: [CrudListGroupService],
+                }]
+        }] });
+
+class CrudSearchService {
+    _filterSource = new BehaviorSubject({});
+    _enabledSource = new BehaviorSubject(false);
+    get filter() {
+        if (!this._enabledSource.value)
+            return {};
+        return this._filterSource.value || {};
+    }
+    get enabled() {
+        return this._enabledSource.value;
+    }
+    enabled$ = this._enabledSource.asObservable();
+    filter$ = combineLatest([
+        this._filterSource.asObservable(),
+        this.enabled$,
+    ]).pipe(map(([filter, enabled]) => {
+        if (!enabled)
+            return {};
+        return filter;
+    }));
+    setFilter(val) {
+        this._filterSource.next(val);
+    }
+    setEnabled(val) {
+        this._enabledSource.next(val);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudSearchService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudSearchService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudSearchService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class ListComponent extends CreateDynamicComponent('crud-list-page') {
+    facade = inject((CrudFacade));
+    router = inject(Router);
+    dynamicComponentLoader = inject((DynamicComponentLoader));
+    injector = inject(Injector);
+    cd = inject(ChangeDetectorRef);
+    menuService = inject(MenuService);
+    hardwareService = inject(HardwareService);
+    paginationFacade = inject((CrudListPaginationFactory));
+    pageService = inject((PageService));
+    config = inject((CrudFullConfig));
+    searchService = inject(CrudSearchService);
+    _cleanMultiSelected$ = new Subject();
+    pageOptions;
+    listOptions;
+    links;
+    filter = this.facade.filter;
+    topTpl = viewChild('topTpl', ...(ngDevMode ? [{ debugName: "topTpl" }] : []));
+    contentTpl = viewChild('contentTpl', ...(ngDevMode ? [{ debugName: "contentTpl" }] : []));
+    dynamicContents = viewChildren(DynamicContentDirective, ...(ngDevMode ? [{ debugName: "dynamicContents" }] : []));
+    constructor() {
+        super();
+        this.links = this.facade.links();
+    }
+    refreshProperties() {
+        this.baseComponentRef.setInput('listOptions', this.listOptions());
+    }
+    async ngOnInit() {
+        this.pageService.checkPermissions();
+        const options = getModelOptions(this.config.type);
+        let newFilter = null;
+        if (this.config.list?.resetQuery === 'beforeInit') {
+            newFilter = {
+                query: this.config.baseQuery ? [...this.config.baseQuery] : [],
+                paginationMode: this.config.list.paginationMode,
+                limit: this.config.pagination
+                    ? this.config.pagination.limit
+                    : undefined,
+                offset: this.config.pagination ? 0 : undefined,
+                sortBy: this.config.sort
+                    ? this.config.sort['default']
+                    : undefined,
+                sortDesc: this.config.sort
+                    ? this.config.sort['defaultDesc']
+                    : undefined,
+                ...this.searchService.filter,
+            };
+        }
+        else if (this.filter()) {
+            newFilter = this.filter();
+        }
+        else {
+            newFilter = {
+                paginationMode: this.config.list.paginationMode,
+                limit: this.searchService.filter?.limit
+                    ? this.searchService.filter.limit
+                    : this.config.pagination
+                        ? this.config.pagination.limit
+                        : undefined,
+                offset: this.searchService.filter?.offset ||
+                    this.searchService.filter?.offset === 0
+                    ? this.searchService.filter.offset
+                    : this.config.pagination
+                        ? 0
+                        : undefined,
+                sortBy: this.searchService.filter?.sortBy
+                    ? this.searchService.filter.sortBy
+                    : this.config.sort
+                        ? this.config.sort['default']
+                        : undefined,
+                sortDesc: this.searchService.filter?.sortDesc
+                    ? this.searchService.filter.sortDesc
+                    : this.config.sort
+                        ? this.config.sort['defaultDesc']
+                        : undefined,
+                query: this.config.baseQuery ? [...this.config.baseQuery] : [],
+                ...this.searchService.filter,
+            };
+        }
+        this.facade.read(newFilter);
+        const endButtons = this.getEndButtons();
+        this.pageOptions = computed(() => ({
+            title: this.config.title || '',
+            search: this.config.search
+                ? {
+                    text: computed(() => this.filter()?.searchText ?? ''),
+                    set: (txt) => {
+                        if (txt !== this.filter()?.searchText)
+                            this.facade.read({
+                                ...this.filter(),
+                                searchText: txt,
+                                offset: 0,
+                            });
+                    },
+                }
+                : undefined,
+            endButtons: endButtons,
+        }), ...(ngDevMode ? [{ debugName: "pageOptions" }] : []));
+        const compiledComponents = await this.dynamicComponentLoader.getComponentsWithFactories({
+            components: [
+                ...(this.config.details &&
+                    typeof this.config.details === 'object' &&
+                    'components' in this.config.details &&
+                    this.config.details.components?.top
+                    ? [this.config.details.components.top]
+                    : []),
+                ...(this.config.details &&
+                    typeof this.config.details === 'object' &&
+                    'components' in this.config.details &&
+                    this.config.details.components?.bottom
+                    ? [this.config.details.components.bottom]
+                    : []),
+                ...(this.config.list &&
+                    typeof this.config.list === 'object' &&
+                    'components' in this.config.list &&
+                    this.config.list.components?.top
+                    ? [this.config.list.components.top]
+                    : []),
+            ],
+        });
+        this.listOptions.set({
+            provider: {
+                getData: (filter) => {
+                    const global = {
+                        ...this.filter(),
+                        ...filter,
+                    };
+                    this.facade.read(global);
+                },
+                onChangeMultiSelected: async (list) => {
+                    if (list.length && !this.menuService.openedEnd) {
+                        await this.menuService.openEnd({
+                            injector: this.injector,
+                            component: MultiselectComponent,
+                        });
+                    }
+                    else if (!list.length && this.menuService.openedEnd) {
+                        await this.menuService.closeEnd();
+                    }
+                    this.facade.multiSelect(list);
+                },
+                list: computed(() => this.facade.list() || []),
+                loading: this.facade.loading,
+                onCleanMultiSelected$: this._cleanMultiSelected$,
+            },
+            cellPipe: this.config.list ? this.config.list.cellPipe : undefined,
+            mode: this.config.list?.mode,
+            type: this.config.type,
+            details: this.config.details
+                ? {
+                    provider: {
+                        getData: (id) => {
+                            this.facade.select(id);
+                        },
+                        clearData: () => {
+                            this.facade.unselect();
+                        },
+                        item: this.facade.selected,
+                        loading: this.facade.loading,
+                    },
+                    componentFactories: {
+                        top: this.config.details &&
+                            typeof this.config.details === 'object' &&
+                            'components' in this.config.details &&
+                            this.config.details.components?.top
+                            ? compiledComponents.find((cc) => cc.component ===
+                                this.config.details.components.top)?.factory
+                            : undefined,
+                        bottom: this.config.details &&
+                            typeof this.config.details === 'object' &&
+                            'components' in this.config.details &&
+                            this.config.details.components?.bottom
+                            ? compiledComponents.find((cc) => cc.component ===
+                                this.config.details.components.bottom)?.factory
+                            : undefined,
+                    },
+                }
+                : undefined,
+            item: !!this.config.edit || this.config.details
+                ? {
+                    options: {
+                        routingPrefix: '/' + this.router.routerState.snapshot.url + '/',
+                        edit: !!this.config.edit,
+                    },
+                }
+                : undefined,
+            remove: this.config.remove
+                ? {
+                    provider: {
+                        invoke: (id) => this.facade.delete(id),
+                        check: (item) => {
+                            return options?.remove?.enabled
+                                ? SpecificationService.valid(item, options?.remove?.enabled)
+                                : true;
+                        },
+                    },
+                }
+                : undefined,
+            pagination: await this.paginationFacade.create({
+                mode: this.config.list.paginationMode,
+                limit: this.config.pagination.limit,
+                provider: {
+                    getFilter: () => {
+                        return this.filter() || {};
+                    },
+                    getLinks: () => this.links,
+                },
+            }),
+            sort: this.config.sort,
+        });
+        this.cd.detectChanges();
+        this.initCloseMenu();
+        this.initTopComponent(compiledComponents);
+        this.refreshDynamicInstance();
+    }
+    initCloseMenu() {
+        this.router.events.pipe(this.takeUntilDestroy).subscribe(async () => {
+            await this.clear();
+        });
+    }
+    async clear() {
+        await this.menuService.closeEnd();
+        this.listOptions.update((val) => ({
+            ...val,
+            select: undefined,
+        }));
+        this.facade.multiSelect([]);
+    }
+    getEndButtons() {
+        const fieldsWithOptions = getModelFieldsWithOptions(new this.config.type());
+        const modelOptions = getModelOptions(this.config.type);
+        const showFilters = fieldsWithOptions.some((x) => x.options?.list?.filter) || modelOptions?.filters?.length;
+        const showMultiEdit = this.config.list?.components?.multi ||
+            (this.config.edit &&
+                fieldsWithOptions.some((x) => x.options?.update?.multi) &&
+                !this.hardwareService.isMobile &&
+                (!this.config?.list?.mode ||
+                    this.config?.list?.mode === ListMode.desktop));
+        return [
+            ...(showMultiEdit
+                ? [
+                    {
+                        icon: 'checkbox-outline',
+                        text: 'multi',
+                        handler: () => {
+                            this.facade.multiSelect([]);
+                            this._cleanMultiSelected$.next();
+                            setTimeout(async () => {
+                                this.listOptions.update((val) => ({
+                                    ...val,
+                                    select: val.select === 'multi' ? undefined : 'multi',
+                                }));
+                                if (this.menuService.openedEnd)
+                                    await this.menuService.closeEnd();
+                                this.cd.detectChanges();
+                            });
+                        },
+                    },
+                ]
+                : []),
+            ...(showFilters
+                ? [
+                    {
+                        icon: 'filter-outline',
+                        text: 'filters',
+                        handler: async () => {
+                            await this.menuService.openEnd({
+                                injector: this.injector,
+                                component: FiltersComponent,
+                            });
+                        },
+                    },
+                ]
+                : []),
+            ...(this.config.add
+                ? [
+                    {
+                        icon: 'add',
+                        text: 'add',
+                        handler: () => {
+                            this.router.navigate([
+                                '/' + this.router.routerState.snapshot.url + '/add',
+                            ]);
+                        },
+                    },
+                ]
+                : []),
+            ...(this.config.export
+                ? [
+                    {
+                        text: 'export',
+                        icon: 'download-outline',
+                        type: 'popover',
+                        component: ExportComponent,
+                    },
+                ]
+                : []),
+            ...(this.config.buttons ? this.config.buttons : []),
+        ];
+    }
+    initTopComponent(compiledComponents) {
+        const factory = this.config.list &&
+            typeof this.config.list === 'object' &&
+            'components' in this.config.list &&
+            this.config.list.components?.top
+            ? compiledComponents.find((cc) => cc.component === this.config.list.components.top)?.factory
+            : null;
+        setTimeout(() => {
+            if (factory && !this.topTpl()?.get(0)) {
+                this.topTpl()?.createComponent(factory);
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: ListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", 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()) {
+      <smart-page [options]="pageOptions()">
+        <div #topTpl></div>
+
+        @if (template() === 'default') {
+          <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: PageComponent, selector: "smart-page", inputs: ["options"] }, { 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: "20.1.0", ngImport: i0, type: ListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'smart-crud-list-page',
+                    imports: [PageComponent, ListStandardComponent, NgTemplateOutlet],
+                    template: `
+    @if (filter()) {
+      <smart-page [options]="pageOptions()">
+        <div #topTpl></div>
+
+        @if (template() === 'default') {
+          <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>
+    }
+  `,
+                }]
+        }], ctorParameters: () => [] });
+
+const PAGES = [
+    ItemComponent,
+    ListComponent,
+    ListStandardComponent,
+    ItemStandardComponent,
+];
+class CrudFullModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudFullModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.0", ngImport: i0, type: CrudFullModule, imports: [ItemComponent,
+            ListComponent,
+            ListStandardComponent,
+            ItemStandardComponent, SharedModule,
+            CrudPipesModule, i1.RouterModule, FormsModule,
+            CommonModule,
+            CrudComponentsModule], exports: [ItemComponent,
+            ListComponent,
+            ListStandardComponent,
+            ItemStandardComponent, CrudComponentsModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudFullModule, providers: [
+            CrudService,
+            CrudListGroupService,
+            PageService,
+            CrudFacade,
+            CrudListPaginationFactory,
+        ], imports: [PAGES, SharedModule,
+            CrudPipesModule,
+            RouterModule.forChild([
+                { path: '', component: ListComponent },
+                { path: 'add', component: ItemComponent },
+                { path: ':id', component: ItemComponent },
+            ]),
+            FormsModule,
+            CommonModule,
+            CrudComponentsModule, CrudComponentsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudFullModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        ...PAGES,
+                        SharedModule,
+                        CrudPipesModule,
+                        RouterModule.forChild([
+                            { path: '', component: ListComponent },
+                            { path: 'add', component: ItemComponent },
+                            { path: ':id', component: ItemComponent },
+                        ]),
+                        FormsModule,
+                        CommonModule,
+                        CrudComponentsModule,
+                    ],
+                    exports: [...PAGES, CrudComponentsModule],
+                    providers: [
+                        CrudService,
+                        CrudListGroupService,
+                        PageService,
+                        CrudFacade,
+                        CrudListPaginationFactory,
+                    ],
+                }]
+        }] });
+
+class CrudCoreModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudCoreModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.0", ngImport: i0, type: CrudCoreModule, imports: [SharedModule,
+            CrudPipesModule,
+            FormsModule,
+            CommonModule,
+            CrudComponentsModule], exports: [CrudComponentsModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudCoreModule, providers: [
+            CrudService,
+            CrudListGroupService,
+            PageService,
+            CrudFacade,
+            CrudListPaginationFactory,
+        ], imports: [SharedModule,
+            CrudPipesModule,
+            FormsModule,
+            CommonModule,
+            CrudComponentsModule, CrudComponentsModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudCoreModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        SharedModule,
+                        CrudPipesModule,
+                        FormsModule,
+                        CommonModule,
+                        CrudComponentsModule,
+                    ],
+                    exports: [CrudComponentsModule],
+                    providers: [
+                        CrudService,
+                        CrudListGroupService,
+                        PageService,
+                        CrudFacade,
+                        CrudListPaginationFactory,
+                    ],
+                }]
+        }] });
+class CrudModule {
+    static forFeature(options) {
+        return {
+            ngModule: options.routing ? CrudFullModule : CrudCoreModule,
+            providers: [
+                { provide: CrudConfig, useValue: options.config },
+                { provide: CrudFullConfig, useValue: options.config },
+                {
+                    provide: FILE_SERVICE_CONFIG,
+                    useValue: { apiUrl: options.config.apiUrl },
+                },
+            ],
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.0", ngImport: i0, type: CrudModule });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudModule });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudModule, decorators: [{
+            type: NgModule,
+            args: [{}]
+        }] });
+
+/**
+ * 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 };
+//# sourceMappingURL=smartsoft001-crud-shell-angular.mjs.map