@smartsoft001/crud-shell-angular 1.1.733 → 1.1.737

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

@@ -0,0 +1,2568 @@
+import * as i1 from '@ngrx/store';
+import { createFeatureSelector, createSelector, select as select$1, StoreModule } from '@ngrx/store';
+import * as i0 from '@angular/core';
+import { Injectable, Component, InjectionToken, Directive, Optional, Inject, Input, ViewChild, Pipe, NgModule, ViewContainerRef, QueryList, TemplateRef, ViewChildren, EventEmitter, Output } from '@angular/core';
+import * as i3 from '@smartsoft001/angular';
+import { NgrxStoreService, BaseComponent as BaseComponent$1, SharedModule, PaginationMode, CreateDynamicComponent, ListMode, DynamicContentDirective, FormComponent, NgrxSharedModule, FILE_SERVICE_CONFIG } from '@smartsoft001/angular';
+import { map, tap, first, catchError } from 'rxjs/operators';
+import { FieldType, getModelOptions, getModelFieldsWithOptions } from '@smartsoft001/models';
+import * as i1$1 from '@ionic/angular';
+import { IonDatetime, IonContent } from '@ionic/angular';
+import * as moment from 'moment';
+import { __decorate, __metadata, __awaiter } from 'tslib';
+import { Debounce, debounce } from 'lodash-decorators';
+import * as i2 from '@angular/forms';
+import { FormsModule, FormControl, FormGroup, FormArray } from '@angular/forms';
+import * as i3$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i4 from '@ngx-translate/core';
+import { Subscription, combineLatest, forkJoin, of, BehaviorSubject } from 'rxjs';
+import { GuidService } from '@smartsoft001/utils';
+import * as _ from 'lodash';
+import * as i2$1 from '@angular/common/http';
+import 'reflect-metadata';
+import * as i1$2 from '@angular/router';
+import { RouterModule } from '@angular/router';
+
+const getCrudState = (entity) => createFeatureSelector(entity);
+const getCrudSelected = (entity) => createSelector(getCrudState(entity), (state) => state.selected);
+const getCrudMultiSelected = (entity) => createSelector(getCrudState(entity), (state) => state.multiSelected);
+const getCrudList = (entity) => createSelector(getCrudState(entity), (state) => state.list);
+const getCrudTotalCount = (entity) => createSelector(getCrudState(entity), (state) => state.totalCount);
+const getCrudLinks = (entity) => createSelector(getCrudState(entity), (state) => state.links);
+const getCrudLoaded = (entity) => createSelector(getCrudState(entity), (state) => state.loaded);
+const getCrudFilter = (entity) => createSelector(getCrudState(entity), (state) => state.filter);
+const getCrudError = (entity) => createSelector(getCrudState(entity), (state) => state.error);
+
+/*
+ * Create
+ */
+const create = function (entity, item) {
+    return {
+        type: `[${entity}] Create`,
+        item
+    };
+};
+const createSuccess = function (entity, item) {
+    return {
+        type: `[${entity}] Create Success`,
+        item
+    };
+};
+const createFailure = function (entity, item, error) {
+    return {
+        type: `[${entity}] Create Failure`,
+        item,
+        error
+    };
+};
+/*
+ * Create many
+ */
+const createMany = function (entity, data) {
+    return {
+        type: `[${entity}] Create Many`,
+        data
+    };
+};
+const createManySuccess = function (entity, data) {
+    return {
+        type: `[${entity}] Create Many Success`,
+        data
+    };
+};
+const createManyFailure = function (entity, data, error) {
+    return {
+        type: `[${entity}] Create Many Failure`,
+        data,
+        error
+    };
+};
+/*
+ * Read
+ */
+const read = function (entity, filter = null) {
+    return {
+        type: `[${entity}] Read`,
+        filter
+    };
+};
+const readSuccess = function (entity, filter, result) {
+    return {
+        type: `[${entity}] Read Success`,
+        result,
+        filter
+    };
+};
+const readFailure = function (entity, filter, error) {
+    return {
+        type: `[${entity}] Read Failure`,
+        filter,
+        error
+    };
+};
+/*
+ * Export
+ */
+const exportList = function (entity, filter = null, format) {
+    return {
+        type: `[${entity}] Export`,
+        filter,
+        format
+    };
+};
+const exportListSuccess = function (entity, filter) {
+    return {
+        type: `[${entity}] Export Success`,
+        filter
+    };
+};
+const exportListFailure = function (entity, filter, error) {
+    return {
+        type: `[${entity}] Export Failure`,
+        filter,
+        error
+    };
+};
+/*
+ * Select
+ */
+const select = function (entity, id) {
+    return {
+        type: `[${entity}] Select`,
+        id
+    };
+};
+const selectSuccess = function (entity, id, item) {
+    return {
+        type: `[${entity}] Select Success`,
+        id,
+        item
+    };
+};
+const selectFailure = function (entity, id, error) {
+    return {
+        type: `[${entity}] Select Failure`,
+        id,
+        error
+    };
+};
+const unselect = function (entity) {
+    return {
+        type: `[${entity}] Unselect`
+    };
+};
+/*
+ * MultiSelect
+ */
+const multiSelect = function (entity, items) {
+    return {
+        type: `[${entity}] MultiSelect`,
+        items
+    };
+};
+/*
+ * Update
+ */
+const update = function (entity, item) {
+    return {
+        type: `[${entity}] Update`,
+        item
+    };
+};
+const updateSuccess = function (entity, item) {
+    return {
+        type: `[${entity}] Update Success`,
+        item
+    };
+};
+const updateFailure = function (entity, item, error) {
+    return {
+        type: `[${entity}] Update Failure`,
+        item,
+        error
+    };
+};
+/*
+ * Update partial
+ */
+const updatePartial = function (entity, item) {
+    return {
+        type: `[${entity}] Update partial`,
+        item
+    };
+};
+const updatePartialSuccess = function (entity, item) {
+    return {
+        type: `[${entity}] Update partial Success`,
+        item
+    };
+};
+const updatePartialFailure = function (entity, item, error) {
+    return {
+        type: `[${entity}] Update partial Failure`,
+        item,
+        error
+    };
+};
+/*
+ * Update partial many
+ */
+const updatePartialMany = function (entity, items) {
+    return {
+        type: `[${entity}] Update partial many`,
+        items
+    };
+};
+const updatePartialManySuccess = function (entity, items) {
+    return {
+        type: `[${entity}] Update partial many Success`,
+        items
+    };
+};
+const updatePartialManyFailure = function (entity, items, error) {
+    return {
+        type: `[${entity}] Update partial many Failure`,
+        items,
+        error
+    };
+};
+/*
+ * Delete
+ */
+const deleteItem = function (entity, id) {
+    return {
+        type: `[${entity}] Delete`,
+        id
+    };
+};
+const deleteSuccess = function (entity, id) {
+    return {
+        type: `[${entity}] Delete Success`,
+        id
+    };
+};
+const deleteFailure = function (entity, id, error) {
+    return {
+        type: `[${entity}] Delete Failure`,
+        id,
+        error
+    };
+};
+
+class CrudConfig {
+}
+/** @nocollapse */ /** @nocollapse */ CrudConfig.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudConfig, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ CrudConfig.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudConfig });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudConfig, decorators: [{
+            type: Injectable
+        }] });
+class CrudFullConfig extends CrudConfig {
+}
+/** @nocollapse */ /** @nocollapse */ CrudFullConfig.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudFullConfig, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ CrudFullConfig.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudFullConfig });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudFullConfig, decorators: [{
+            type: Injectable
+        }] });
+
+class CrudFacade {
+    constructor(store, config) {
+        this.store = store;
+        this.config = config;
+        this.loaded$ = this.store.pipe(select$1(getCrudLoaded(this.config.entity)));
+        this.loading$ = this.store.pipe(select$1(getCrudLoaded(this.config.entity)), map(l => !l));
+        this.selected$ = this.store.pipe(select$1(getCrudSelected(this.config.entity)), tap(s => {
+            this.selected = s;
+        }));
+        this.multiSelected$ = this.store.pipe(select$1(getCrudMultiSelected(this.config.entity)), tap(s => {
+            this.multiSelected = s;
+        }));
+        this.list$ = this.store.pipe(select$1(getCrudList(this.config.entity)), tap(l => {
+            this.list = l;
+        }));
+        this.filter$ = this.store.pipe(select$1(getCrudFilter(this.config.entity)), tap(f => {
+            this.filter = f;
+        }));
+        this.totalCount$ = this.store.pipe(select$1(getCrudTotalCount(this.config.entity)));
+        this.links$ = this.store.pipe(select$1(getCrudLinks(this.config.entity)));
+        this.error$ = this.store.pipe(select$1(getCrudError(this.config.entity)));
+        if (NgrxStoreService.store) {
+            this.store = NgrxStoreService.store;
+        }
+    }
+    create(item) {
+        this.store.dispatch(create(this.config.entity, item));
+    }
+    createMany(items, options) {
+        this.store.dispatch(createMany(this.config.entity, { items, options }));
+    }
+    read(filter = null) {
+        let baseQuery = [];
+        if (this.config.baseQuery) {
+            baseQuery = this.config.baseQuery;
+        }
+        const fullFilter = Object.assign(Object.assign({}, (filter ? filter : {})), { query: filter && filter.query ? filter.query : baseQuery });
+        this.store.dispatch(read(this.config.entity, fullFilter));
+    }
+    select(id) {
+        this.store.dispatch(select(this.config.entity, id));
+    }
+    unselect() {
+        this.store.dispatch(unselect(this.config.entity));
+    }
+    multiSelect(items) {
+        this.store.dispatch(multiSelect(this.config.entity, items));
+    }
+    update(item) {
+        this.getStore().dispatch(update(this.config.entity, item));
+    }
+    export(filter = null, format = null) {
+        this.getStore().dispatch(exportList(this.config.entity, filter, format));
+    }
+    updatePartial(item) {
+        this.getStore().dispatch(updatePartial(this.config.entity, item));
+    }
+    updatePartialMany(items) {
+        this.getStore().dispatch(updatePartialMany(this.config.entity, items));
+    }
+    delete(id) {
+        this.getStore().dispatch(deleteItem(this.config.entity, id));
+    }
+    getStore() {
+        if (NgrxStoreService.store)
+            return NgrxStoreService.store;
+        return this.store;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ CrudFacade.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudFacade, deps: [{ token: i1.Store }, { token: CrudConfig }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ CrudFacade.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudFacade });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudFacade, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: CrudConfig }]; } });
+
+class ExportComponent extends BaseComponent$1 {
+    constructor(facade, popoverService, styleService, elementRef) {
+        super();
+        this.facade = facade;
+        this.popoverService = popoverService;
+        this.styleService = styleService;
+        this.elementRef = elementRef;
+        this.buttonExportCsvOptions = this.initButtonExportOptions('csv');
+        this.buttonExportXlsxOptions = this.initButtonExportOptions('xlsx');
+        this.loading$ = this.facade.loading$;
+    }
+    ngOnInit() {
+        this.styleService.init(this.elementRef);
+    }
+    initButtonExportOptions(format) {
+        return {
+            click: () => {
+                this.facade.export(Object.assign(Object.assign({}, this.facade.filter), { offset: null, limit: null }), format);
+                const subscription = this.facade.loaded$.subscribe(val => {
+                    if (!val)
+                        return;
+                    this.popoverService.close();
+                    subscription.unsubscribe();
+                });
+            },
+            loading$: this.facade.loading$,
+            expand: 'block'
+        };
+    }
+}
+/** @nocollapse */ /** @nocollapse */ ExportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ExportComponent, deps: [{ token: CrudFacade }, { token: i3.PopoverService }, { token: i3.StyleService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ ExportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ExportComponent, selector: "smart-crud-export", usesInheritance: true, ngImport: i0, template: "<div class=\"smart-content\">\n    <p>\n        <smart-button [options]=\"buttonExportCsvOptions\">CSV</smart-button>\n    </p>\n    <p>\n        <smart-button [options]=\"buttonExportXlsxOptions\">XLSX</smart-button>\n    </p>\n</div>", styles: [".smart-content{padding:1.2rem}.smart-content p{margin:.6rem 0}.smart-content smart-button{width:100%;display:block}\n"], components: [{ type: i3.ButtonComponent, selector: "smart-button", inputs: ["options", "disabled"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ExportComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-crud-export', template: "<div class=\"smart-content\">\n    <p>\n        <smart-button [options]=\"buttonExportCsvOptions\">CSV</smart-button>\n    </p>\n    <p>\n        <smart-button [options]=\"buttonExportXlsxOptions\">XLSX</smart-button>\n    </p>\n</div>", styles: [".smart-content{padding:1.2rem}.smart-content p{margin:.6rem 0}.smart-content smart-button{width:100%;display:block}\n"] }]
+        }], ctorParameters: function () { return [{ type: CrudFacade }, { type: i3.PopoverService }, { type: i3.StyleService }, { type: i0.ElementRef }]; } });
+
+/**
+ * @deprecated - please, use IModelPossibilitiesProvider from @smartsoft001/angular
+ */
+class ICrudModelPossibilitiesProvider {
+}
+/**
+ * @deprecated - please, use MODEL_POSSIBILITIES_PROVIDER from @smartsoft001/angular
+ */
+const CRUD_MODEL_POSSIBILITIES_PROVIDER = new InjectionToken("CRUD_MODEL_POSSIBILITIES_PROVIDER");
+
+class BaseComponent {
+    constructor(facade, config, modelPossibilitiesProvider) {
+        this.facade = facade;
+        this.config = config;
+        this.modelPossibilitiesProvider = modelPossibilitiesProvider;
+    }
+    get value() {
+        if (this.isArrayType()) {
+            return this.filter.query
+                .filter((q) => q.key === this.item.key && q.type === this.item.type)
+                .map(q => q.value);
+        }
+        const query = this.filter.query.find((q) => q.key === this.item.key && q.type === this.item.type);
+        return query === null || query === void 0 ? void 0 : query.value;
+    }
+    set value(val) {
+        this.refresh(val);
+    }
+    get minValue() {
+        if (this.isArrayType()) {
+            return this.filter.query
+                .filter((q) => q.key === this.item.key && q.type === ">=")
+                .map(q => q.value);
+        }
+        const query = this.filter.query.find((q) => q.key === this.item.key && q.type === ">=");
+        return query === null || query === void 0 ? void 0 : query.value;
+    }
+    set minValue(val) {
+        this.refresh(val, ">=");
+    }
+    get maxValue() {
+        if (this.isArrayType()) {
+            return this.filter.query
+                .filter((q) => q.key === this.item.key && q.type === "<=")
+                .map(q => q.value);
+        }
+        const query = this.filter.query.find((q) => q.key === this.item.key && q.type === "<=");
+        return query === null || query === void 0 ? void 0 : query.value;
+    }
+    set maxValue(val) {
+        this.refresh(val, "<=");
+    }
+    refresh(val, type = null) {
+        if (!type)
+            type = this.item.type;
+        if (this.isArrayType()) {
+            this.refreshForArray(val, type);
+            return;
+        }
+        let query = this.filter.query.find((q) => q.key === this.item.key && q.type === type);
+        if (val === null || val === undefined || val === '') {
+            const index = this.filter.query.indexOf(query);
+            if (index > -1) {
+                this.filter.query.splice(index, 1);
+            }
+            this.facade.read(this.filter);
+            return;
+        }
+        if (!query) {
+            query = {
+                key: this.item.key,
+                type: type,
+                value: null,
+            };
+            this.filter.query.push(query);
+        }
+        query.value = val;
+        query.label = this.item.label;
+        this.facade.read(this.filter);
+    }
+    ngOnInit() {
+        this.initPossibilities();
+    }
+    initPossibilities() {
+        let possibilities = this.item.possibilities$;
+        if (this.modelPossibilitiesProvider) {
+            const possibilitiesFromProvider = this.modelPossibilitiesProvider.get(this.config.type);
+            if (possibilitiesFromProvider && possibilitiesFromProvider[this.item.key])
+                possibilities = possibilitiesFromProvider[this.item.key];
+        }
+        this.possibilities$ = possibilities;
+    }
+    isArrayType() {
+        var _a;
+        return (((_a = this.item) === null || _a === void 0 ? void 0 : _a.fieldType) === FieldType.check);
+    }
+    refreshForArray(vals, type) {
+        const queries = this.filter.query.filter((q) => q.key === this.item.key && q.type === type);
+        queries.forEach(query => {
+            const index = this.filter.query.indexOf(query);
+            if (index > -1) {
+                this.filter.query.splice(index, 1);
+            }
+        });
+        if (vals === null || vals === undefined || !vals.length) {
+            this.facade.read(this.filter);
+            return;
+        }
+        vals.forEach(val => {
+            const query = {
+                key: this.item.key,
+                type: type,
+                value: val,
+            };
+            this.filter.query.push(query);
+        });
+        this.facade.read(this.filter);
+    }
+}
+/** @nocollapse */ /** @nocollapse */ BaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: BaseComponent, deps: [{ token: CrudFacade }, { token: CrudConfig }, { token: CRUD_MODEL_POSSIBILITIES_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ BaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: BaseComponent, inputs: { item: "item", filter: "filter" }, 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: "13.2.7", ngImport: i0, type: BaseComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () {
+        return [{ type: CrudFacade }, { type: CrudConfig }, { type: ICrudModelPossibilitiesProvider, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [CRUD_MODEL_POSSIBILITIES_PROVIDER]
+                    }] }];
+    }, propDecorators: { item: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }], refresh: [] } });
+
+class FilterDateComponent extends BaseComponent {
+    get allowAdvanced() {
+        var _a;
+        return ((_a = this.item) === null || _a === void 0 ? void 0 : _a.type) === '=';
+    }
+    set customValue(val) {
+        const momentDate = moment(val);
+        this.value = (val === null || val === void 0 ? void 0 : 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 === null || val === void 0 ? void 0 : 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 === null || val === void 0 ? void 0 : val.length) >= 10 && momentDate.isValid() ? momentDate.format('YYYY-MM-DD') : val;
+    }
+    get customMaxValue() {
+        return this.maxValue;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ FilterDateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilterDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ FilterDateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FilterDateComponent, selector: "smart-crud-filter-date", usesInheritance: true, ngImport: i0, template: "<ion-row>\n    <ion-col>\n        <ion-label position=\"floating\">\n            {{ item.label | translate }}\n        </ion-label>\n        <ion-datetime displayFormat=\"YYYY-MM-DD\"\n                      pickerFormat=\"YYYY-MM-DD\"\n                      [(ngModel)]=\"customValue\"></ion-datetime>\n    </ion-col>\n    <ion-col size=\"auto\" *ngIf=\"value\">\n        <ion-button color=\"danger\" (click)=\"refresh(null)\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col>\n</ion-row>", styles: [":host{width:100%}:host .squere-button{height:var(--smart-button-height)!important;margin:.8rem}\n"], components: [{ type: i1$1.IonRow, selector: "ion-row" }, { type: i1$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i1$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i1$1.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "hourCycle", "hourValues", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "value", "yearValues"] }, { type: i1$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], directives: [{ type: i1$1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i4.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilterDateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-crud-filter-date', template: "<ion-row>\n    <ion-col>\n        <ion-label position=\"floating\">\n            {{ item.label | translate }}\n        </ion-label>\n        <ion-datetime displayFormat=\"YYYY-MM-DD\"\n                      pickerFormat=\"YYYY-MM-DD\"\n                      [(ngModel)]=\"customValue\"></ion-datetime>\n    </ion-col>\n    <ion-col size=\"auto\" *ngIf=\"value\">\n        <ion-button color=\"danger\" (click)=\"refresh(null)\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col>\n</ion-row>", styles: [":host{width:100%}:host .squere-button{height:var(--smart-button-height)!important;margin:.8rem}\n"] }]
+        }] });
+
+class FilterDateWithEditComponent extends FilterDateComponent {
+    constructor() {
+        super(...arguments);
+        this._subscriptions = new Subscription();
+        this.advanced = false;
+        this.id = GuidService.create();
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        if (this.dateTimePicker) {
+            this._subscriptions.add(this.dateTimePicker.ionChange.subscribe((val) => {
+                this.customValue = val.detail.value;
+            }));
+        }
+        else {
+            console.error('dateTimePicker not found!');
+        }
+    }
+    ngOnDestroy() {
+        if (this._subscriptions) {
+            this._subscriptions.unsubscribe();
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ FilterDateWithEditComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilterDateWithEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ FilterDateWithEditComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FilterDateWithEditComponent, selector: "smart-crud-filter-date-with-edit", viewQueries: [{ propertyName: "dateTimePicker", first: true, predicate: IonDatetime, descendants: true, read: IonDatetime }], usesInheritance: true, ngImport: i0, template: "<ion-row>\n    <ion-col>\n        <ion-label>\n            {{ item.label | translate }}\n        </ion-label>\n\n        <ion-input 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    </ion-col>\n    <ion-col size=\"auto\">\n        <ion-button id=\"open-date-input-{{ id }}\" class=\"squere-button\">\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 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-button>\n    </ion-col>\n    <ion-col size=\"auto\" *ngIf=\"allowAdvanced\">\n        <ion-button (click)=\"advanced = !advanced\" class=\"squere-button\" [disabled]=\"minValue || maxValue\">\n            <ion-icon *ngIf=\"!advanced\" slot=\"icon-only\" name=\"settings-outline\"></ion-icon>\n            <ion-icon *ngIf=\"advanced\" slot=\"icon-only\" name=\"settings\"></ion-icon>\n        </ion-button>\n    </ion-col>\n    <ion-col size=\"auto\" *ngIf=\"value\">\n        <ion-button color=\"danger\" (click)=\"refresh(null)\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col>\n</ion-row>\n<ion-row *ngIf=\"(advanced || minValue || maxValue) && allowAdvanced\">\n    <ion-col>\n        <ion-item>\n            <ion-label>\n                {{ 'from' | translate }}\n            </ion-label>\n            <ion-input 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    <ion-col size=\"auto\" *ngIf=\"customMinValue\">\n        <ion-button color=\"danger\" (click)=\"refresh(null, '>=')\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col>\n    <ion-col>\n        <ion-item>\n            <ion-label>\n                {{ 'to' | translate }}\n            </ion-label>\n            <ion-input 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    <ion-col size=\"auto\" *ngIf=\"customMaxValue\">\n        <ion-button color=\"danger\" (click)=\"refresh(null, '<=')\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col>\n</ion-row>", styles: [":host{width:100%}:host .squere-button{height:var(--smart-button-height)!important;margin:.8rem}\n"], components: [{ type: i1$1.IonRow, selector: "ion-row" }, { type: i1$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i1$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i1$1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step", "type", "value"] }, { type: i1$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { type: i1$1.IonPopover, selector: "ion-popover", inputs: ["alignment", "animated", "arrow", "backdropDismiss", "cssClass", "dismissOnSelect", "enterAnimation", "event", "isOpen", "keyboardClose", "leaveAnimation", "mode", "showBackdrop", "translucent", "trigger", "triggerAction", "reference", "size", "side"] }, { type: i1$1.IonDatetime, selector: "ion-datetime", inputs: ["cancelText", "clearText", "color", "dayValues", "disabled", "doneText", "firstDayOfWeek", "hourCycle", "hourValues", "locale", "max", "min", "minuteValues", "mode", "monthValues", "name", "presentation", "readonly", "showClearButton", "showDefaultButtons", "showDefaultTimeLabel", "showDefaultTitle", "size", "value", "yearValues"] }, { type: i1$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }], directives: [{ type: i1$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i1$1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i4.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilterDateWithEditComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-crud-filter-date-with-edit', template: "<ion-row>\n    <ion-col>\n        <ion-label>\n            {{ item.label | translate }}\n        </ion-label>\n\n        <ion-input 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    </ion-col>\n    <ion-col size=\"auto\">\n        <ion-button id=\"open-date-input-{{ id }}\" class=\"squere-button\">\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 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-button>\n    </ion-col>\n    <ion-col size=\"auto\" *ngIf=\"allowAdvanced\">\n        <ion-button (click)=\"advanced = !advanced\" class=\"squere-button\" [disabled]=\"minValue || maxValue\">\n            <ion-icon *ngIf=\"!advanced\" slot=\"icon-only\" name=\"settings-outline\"></ion-icon>\n            <ion-icon *ngIf=\"advanced\" slot=\"icon-only\" name=\"settings\"></ion-icon>\n        </ion-button>\n    </ion-col>\n    <ion-col size=\"auto\" *ngIf=\"value\">\n        <ion-button color=\"danger\" (click)=\"refresh(null)\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col>\n</ion-row>\n<ion-row *ngIf=\"(advanced || minValue || maxValue) && allowAdvanced\">\n    <ion-col>\n        <ion-item>\n            <ion-label>\n                {{ 'from' | translate }}\n            </ion-label>\n            <ion-input 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    <ion-col size=\"auto\" *ngIf=\"customMinValue\">\n        <ion-button color=\"danger\" (click)=\"refresh(null, '>=')\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col>\n    <ion-col>\n        <ion-item>\n            <ion-label>\n                {{ 'to' | translate }}\n            </ion-label>\n            <ion-input 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    <ion-col size=\"auto\" *ngIf=\"customMaxValue\">\n        <ion-button color=\"danger\" (click)=\"refresh(null, '<=')\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col>\n</ion-row>", styles: [":host{width:100%}:host .squere-button{height:var(--smart-button-height)!important;margin:.8rem}\n"] }]
+        }], propDecorators: { dateTimePicker: [{
+                type: ViewChild,
+                args: [IonDatetime, { read: IonDatetime, static: false }]
+            }] } });
+
+class FilterRadioComponent extends BaseComponent {
+}
+/** @nocollapse */ /** @nocollapse */ FilterRadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilterRadioComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ FilterRadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FilterRadioComponent, selector: "smart-crud-filter-radio", usesInheritance: true, ngImport: i0, template: "<ion-row>\n    <ion-col>\n        <ion-radio-group [(ngModel)]=\"value\">\n            <ion-item-divider>\n                <ion-icon slot=\"start\" name=\"filter-outline\"></ion-icon>\n                <ion-label>\n                    {{ item.label | translate }}\n                </ion-label>\n                <ion-button *ngIf=\"value\" slot=\"end\" color=\"danger\" (click)=\"refresh(null)\" class=\"squere-button\">\n                    <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n                </ion-button>\n            </ion-item-divider>\n\n            <ion-item *ngFor=\"let item of possibilities$ | async\">\n                <ion-label>{{ item.text | translate }}</ion-label>\n                <ion-radio [value]=\"item.id\"></ion-radio>\n            </ion-item>\n        </ion-radio-group>\n    </ion-col>\n    <!-- <ion-col size=\"auto\" *ngIf=\"value\">\n        <ion-button color=\"danger\" (click)=\"refresh(null)\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col> -->\n</ion-row>", styles: [":host{width:100%;margin-bottom:1.2rem}:host ion-radio{margin-right:2.4rem}:host ion-item-divider{font-weight:300;--padding-end: .8rem;font-size:1.2rem;--ion-background-color: linear-gradient(90deg, transparent, var(--ion-color-light))}:host ion-item-divider ion-icon{margin-right:1.6rem;font-size:1.6rem;--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 .squere-button{margin:0;font-size:18px;height:36px;width:36px;padding:0;--padding-start: .2em;--padding-end: .2em}:host ion-item-divider .squere-button ion-icon{margin:0;padding:0}\n"], components: [{ type: i1$1.IonRow, selector: "ion-row" }, { type: i1$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i1$1.IonRadioGroup, selector: "ion-radio-group", inputs: ["allowEmptySelection", "name", "value"] }, { type: i1$1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { type: i1$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i1$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i1$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i1$1.IonRadio, selector: "ion-radio", inputs: ["color", "disabled", "mode", "name", "value"] }], directives: [{ type: i1$1.SelectValueAccessor, selector: "ion-range, ion-select, ion-radio-group, ion-segment, ion-datetime" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.RadioValueAccessor, selector: "ion-radio" }], pipes: { "translate": i4.TranslatePipe, "async": i3$1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilterRadioComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-crud-filter-radio', template: "<ion-row>\n    <ion-col>\n        <ion-radio-group [(ngModel)]=\"value\">\n            <ion-item-divider>\n                <ion-icon slot=\"start\" name=\"filter-outline\"></ion-icon>\n                <ion-label>\n                    {{ item.label | translate }}\n                </ion-label>\n                <ion-button *ngIf=\"value\" slot=\"end\" color=\"danger\" (click)=\"refresh(null)\" class=\"squere-button\">\n                    <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n                </ion-button>\n            </ion-item-divider>\n\n            <ion-item *ngFor=\"let item of possibilities$ | async\">\n                <ion-label>{{ item.text | translate }}</ion-label>\n                <ion-radio [value]=\"item.id\"></ion-radio>\n            </ion-item>\n        </ion-radio-group>\n    </ion-col>\n    <!-- <ion-col size=\"auto\" *ngIf=\"value\">\n        <ion-button color=\"danger\" (click)=\"refresh(null)\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col> -->\n</ion-row>", styles: [":host{width:100%;margin-bottom:1.2rem}:host ion-radio{margin-right:2.4rem}:host ion-item-divider{font-weight:300;--padding-end: .8rem;font-size:1.2rem;--ion-background-color: linear-gradient(90deg, transparent, var(--ion-color-light))}:host ion-item-divider ion-icon{margin-right:1.6rem;font-size:1.6rem;--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 .squere-button{margin:0;font-size:18px;height:36px;width:36px;padding:0;--padding-start: .2em;--padding-end: .2em}:host ion-item-divider .squere-button ion-icon{margin:0;padding:0}\n"] }]
+        }] });
+
+class FilterCheckComponent extends BaseComponent {
+    ngAfterContentInit() {
+        this.list$ = combineLatest([this.possibilities$, this.facade.filter$]).pipe((map(([possibilities]) => {
+            return possibilities.map(pos => ({
+                value: pos,
+                isCheck: this.value.some(r => r === pos.id)
+            }));
+        })));
+    }
+    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);
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ FilterCheckComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilterCheckComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ FilterCheckComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FilterCheckComponent, selector: "smart-crud-filter-check", usesInheritance: true, ngImport: i0, template: "<ion-row>\n    <ion-col>\n        <ion-item-divider>\n            <ion-icon slot=\"start\" name=\"filter-outline\"></ion-icon>\n            <ion-label>\n                {{ item.label | translate }}\n            </ion-label>\n            <ion-button *ngIf=\"value && value.length\" slot=\"end\" color=\"danger\" (click)=\"refresh([])\" class=\"squere-button\">\n                <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n            </ion-button>\n        </ion-item-divider>\n        <ion-item *ngFor=\"let entry of list$ | async\">\n            <ion-label>{{entry.value.text | translate}}</ion-label>\n            <ion-checkbox slot=\"end\" [checked]=\"entry.isCheck\" (ionChange)=\"onCheckChange($event.detail.checked, entry)\"></ion-checkbox>\n        </ion-item>\n    </ion-col>\n    <!-- <ion-col size=\"auto\" *ngIf=\"value\">\n        <ion-button color=\"danger\" (click)=\"refresh(null)\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col> -->\n</ion-row>", styles: [":host{width:100%;margin-bottom:1.2rem}:host ion-radio{margin-right:2.4rem}:host ion-item-divider{font-weight:300;--padding-end: .8rem;font-size:1.2rem;--ion-background-color: linear-gradient(90deg, transparent, var(--ion-color-light))}:host ion-item-divider ion-icon{margin-right:1.6rem;font-size:1.6rem;--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 .squere-button{margin:0;font-size:18px;height:36px;width:36px;padding:0;--padding-start: .2em;--padding-end: .2em}:host ion-item-divider .squere-button ion-icon{margin:0;padding:0}\n"], components: [{ type: i1$1.IonRow, selector: "ion-row" }, { type: i1$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i1$1.IonItemDivider, selector: "ion-item-divider", inputs: ["color", "mode", "sticky"] }, { type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { type: i1$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i1$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i1$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: i1$1.IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "mode", "name", "value"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1$1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }], pipes: { "translate": i4.TranslatePipe, "async": i3$1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilterCheckComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-crud-filter-check', template: "<ion-row>\n    <ion-col>\n        <ion-item-divider>\n            <ion-icon slot=\"start\" name=\"filter-outline\"></ion-icon>\n            <ion-label>\n                {{ item.label | translate }}\n            </ion-label>\n            <ion-button *ngIf=\"value && value.length\" slot=\"end\" color=\"danger\" (click)=\"refresh([])\" class=\"squere-button\">\n                <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n            </ion-button>\n        </ion-item-divider>\n        <ion-item *ngFor=\"let entry of list$ | async\">\n            <ion-label>{{entry.value.text | translate}}</ion-label>\n            <ion-checkbox slot=\"end\" [checked]=\"entry.isCheck\" (ionChange)=\"onCheckChange($event.detail.checked, entry)\"></ion-checkbox>\n        </ion-item>\n    </ion-col>\n    <!-- <ion-col size=\"auto\" *ngIf=\"value\">\n        <ion-button color=\"danger\" (click)=\"refresh(null)\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col> -->\n</ion-row>", styles: [":host{width:100%;margin-bottom:1.2rem}:host ion-radio{margin-right:2.4rem}:host ion-item-divider{font-weight:300;--padding-end: .8rem;font-size:1.2rem;--ion-background-color: linear-gradient(90deg, transparent, var(--ion-color-light))}:host ion-item-divider ion-icon{margin-right:1.6rem;font-size:1.6rem;--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 .squere-button{margin:0;font-size:18px;height:36px;width:36px;padding:0;--padding-start: .2em;--padding-end: .2em}:host ion-item-divider .squere-button ion-icon{margin:0;padding:0}\n"] }]
+        }] });
+
+class FilterFlagComponent extends BaseComponent {
+}
+/** @nocollapse */ /** @nocollapse */ FilterFlagComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilterFlagComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ FilterFlagComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FilterFlagComponent, selector: "smart-crud-filter-flag", usesInheritance: true, ngImport: i0, template: "<ion-row>\n    <ion-col>\n        <div class=\"flag-container\">\n            <ion-label position=\"static\">\n                {{ item.label | translate }}\n            </ion-label>\n            <ion-checkbox [(ngModel)]=\"value\" slot=\"end\"></ion-checkbox>\n        </div>\n    </ion-col>\n    <ion-col size=\"auto\" *ngIf=\"value\">\n        <ion-button color=\"danger\" (click)=\"refresh(null)\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col>\n</ion-row>", styles: [":host{width:100%}:host .flag-container{width:100%;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;padding:0 1.2rem 0 0}:host .flag-container ion-label{--color: var(--smart-color-dark);vertical-align:middle;padding:1.6rem 0}:host .squere-button{height:var(--smart-button-height)!important;margin:.8rem}\n"], components: [{ type: i1$1.IonRow, selector: "ion-row" }, { type: i1$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i1$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i1$1.IonCheckbox, selector: "ion-checkbox", inputs: ["checked", "color", "disabled", "indeterminate", "mode", "name", "value"] }, { type: i1$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], directives: [{ type: i1$1.BooleanValueAccessor, selector: "ion-checkbox,ion-toggle" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i4.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilterFlagComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-crud-filter-flag', template: "<ion-row>\n    <ion-col>\n        <div class=\"flag-container\">\n            <ion-label position=\"static\">\n                {{ item.label | translate }}\n            </ion-label>\n            <ion-checkbox [(ngModel)]=\"value\" slot=\"end\"></ion-checkbox>\n        </div>\n    </ion-col>\n    <ion-col size=\"auto\" *ngIf=\"value\">\n        <ion-button color=\"danger\" (click)=\"refresh(null)\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col>\n</ion-row>", styles: [":host{width:100%}:host .flag-container{width:100%;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between;padding:0 1.2rem 0 0}:host .flag-container ion-label{--color: var(--smart-color-dark);vertical-align:middle;padding:1.6rem 0}:host .squere-button{height:var(--smart-button-height)!important;margin:.8rem}\n"] }]
+        }] });
+
+class FilterIntComponent extends BaseComponent {
+    constructor() {
+        super(...arguments);
+        this._subscriptions = new Subscription();
+        this.advanced = false;
+    }
+    get allowAdvanced() {
+        var _a;
+        return ((_a = this.item) === null || _a === void 0 ? void 0 : _a.type) === '=';
+    }
+    ngOnInit() {
+        super.ngOnInit();
+    }
+    ngOnDestroy() {
+        if (this._subscriptions) {
+            this._subscriptions.unsubscribe();
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ FilterIntComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilterIntComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ FilterIntComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FilterIntComponent, 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        <ion-input [(ngModel)]=\"value\" type=\"number\" step=\"1\"></ion-input>\n    </ion-col>\n    <ion-col size=\"auto\" *ngIf=\"allowAdvanced\">\n        <ion-button (click)=\"advanced = !advanced\" class=\"squere-button\" [disabled]=\"minValue || maxValue\">\n            <ion-icon *ngIf=\"!advanced\" slot=\"icon-only\" name=\"settings-outline\"></ion-icon>\n            <ion-icon *ngIf=\"advanced\" slot=\"icon-only\" name=\"settings\"></ion-icon>\n        </ion-button>\n    </ion-col>\n    <ion-col size=\"auto\" *ngIf=\"value\">\n        <ion-button color=\"danger\" (click)=\"refresh(null)\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col>\n</ion-row>\n<ion-row *ngIf=\"(advanced || minValue || maxValue) && allowAdvanced\">\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    <ion-col size=\"auto\" *ngIf=\"minValue\">\n        <ion-button color=\"danger\" (click)=\"refresh(null, '>=')\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col>\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    <ion-col size=\"auto\" *ngIf=\"maxValue\">\n        <ion-button color=\"danger\" (click)=\"refresh(null, '<=')\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col>\n</ion-row>", styles: [":host{width:100%}:host .squere-button{height:var(--smart-button-height)!important;margin:.8rem}\n"], components: [{ type: i1$1.IonRow, selector: "ion-row" }, { type: i1$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i1$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i1$1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step", "type", "value"] }, { type: i1$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { type: i1$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }], directives: [{ type: i1$1.NumericValueAccessor, selector: "ion-input[type=number]" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i4.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilterIntComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-crud-filter-int', template: "<ion-row>\n    <ion-col>\n        <ion-label>\n            {{ item.label | translate }}\n        </ion-label>\n        <ion-input [(ngModel)]=\"value\" type=\"number\" step=\"1\"></ion-input>\n    </ion-col>\n    <ion-col size=\"auto\" *ngIf=\"allowAdvanced\">\n        <ion-button (click)=\"advanced = !advanced\" class=\"squere-button\" [disabled]=\"minValue || maxValue\">\n            <ion-icon *ngIf=\"!advanced\" slot=\"icon-only\" name=\"settings-outline\"></ion-icon>\n            <ion-icon *ngIf=\"advanced\" slot=\"icon-only\" name=\"settings\"></ion-icon>\n        </ion-button>\n    </ion-col>\n    <ion-col size=\"auto\" *ngIf=\"value\">\n        <ion-button color=\"danger\" (click)=\"refresh(null)\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col>\n</ion-row>\n<ion-row *ngIf=\"(advanced || minValue || maxValue) && allowAdvanced\">\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    <ion-col size=\"auto\" *ngIf=\"minValue\">\n        <ion-button color=\"danger\" (click)=\"refresh(null, '>=')\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col>\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    <ion-col size=\"auto\" *ngIf=\"maxValue\">\n        <ion-button color=\"danger\" (click)=\"refresh(null, '<=')\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col>\n</ion-row>", styles: [":host{width:100%}:host .squere-button{height:var(--smart-button-height)!important;margin:.8rem}\n"] }]
+        }] });
+
+class FilterTextComponent extends BaseComponent {
+}
+/** @nocollapse */ /** @nocollapse */ FilterTextComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilterTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ FilterTextComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FilterTextComponent, selector: "smart-crud-filter-text", usesInheritance: true, ngImport: i0, template: "<ion-row>\n    <ion-col>\n        <ion-label position=\"floating\">\n            {{ item.label | translate }}\n        </ion-label>\n        <ion-input [(ngModel)]=\"value\"></ion-input>\n    </ion-col>\n    <ion-col size=\"auto\" *ngIf=\"value\">\n        <ion-button color=\"danger\" (click)=\"refresh(null)\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col>\n</ion-row>", styles: [":host{width:100%}:host .squere-button{height:var(--smart-button-height)!important;margin:.8rem}\n"], components: [{ type: i1$1.IonRow, selector: "ion-row" }, { type: i1$1.IonCol, selector: "ion-col", inputs: ["offset", "offsetLg", "offsetMd", "offsetSm", "offsetXl", "offsetXs", "pull", "pullLg", "pullMd", "pullSm", "pullXl", "pullXs", "push", "pushLg", "pushMd", "pushSm", "pushXl", "pushXs", "size", "sizeLg", "sizeMd", "sizeSm", "sizeXl", "sizeXs"] }, { type: i1$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }, { type: i1$1.IonInput, selector: "ion-input", inputs: ["accept", "autocapitalize", "autocomplete", "autocorrect", "autofocus", "clearInput", "clearOnEdit", "color", "debounce", "disabled", "enterkeyhint", "inputmode", "max", "maxlength", "min", "minlength", "mode", "multiple", "name", "pattern", "placeholder", "readonly", "required", "size", "spellcheck", "step", "type", "value"] }, { type: i1$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }], directives: [{ type: i1$1.TextValueAccessor, selector: "ion-input:not([type=number]),ion-textarea,ion-searchbar" }, { type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i4.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilterTextComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-crud-filter-text', template: "<ion-row>\n    <ion-col>\n        <ion-label position=\"floating\">\n            {{ item.label | translate }}\n        </ion-label>\n        <ion-input [(ngModel)]=\"value\"></ion-input>\n    </ion-col>\n    <ion-col size=\"auto\" *ngIf=\"value\">\n        <ion-button color=\"danger\" (click)=\"refresh(null)\" class=\"squere-button\">\n            <ion-icon slot=\"icon-only\" name=\"close-outline\"></ion-icon>\n        </ion-button>\n    </ion-col>\n</ion-row>", styles: [":host{width:100%}:host .squere-button{height:var(--smart-button-height)!important;margin:.8rem}\n"] }]
+        }] });
+
+class FilterComponent {
+    constructor() {
+        this.FieldType = FieldType;
+    }
+    ngOnInit() { }
+}
+/** @nocollapse */ /** @nocollapse */ FilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ FilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FilterComponent, selector: "smart-crud-filter", inputs: { item: "item", filter: "filter" }, ngImport: i0, template: "<ion-item [ngSwitch]=\"item.fieldType\">\n  <smart-crud-filter-date\n          *ngSwitchCase=\"FieldType.date\"\n          [item]=\"item\"\n          [filter]=\"filter\"\n  ></smart-crud-filter-date>\n\n  <smart-crud-filter-date-with-edit\n          *ngSwitchCase=\"FieldType.dateWithEdit\"\n          [item]=\"item\"\n          [filter]=\"filter\"\n  ></smart-crud-filter-date-with-edit>\n\n  <smart-crud-filter-radio\n          *ngSwitchCase=\"FieldType.radio\"\n          [item]=\"item\"\n          [filter]=\"filter\"\n  ></smart-crud-filter-radio>\n\n  <smart-crud-filter-check\n          *ngSwitchCase=\"FieldType.check\"\n          [item]=\"item\"\n          [filter]=\"filter\"\n  ></smart-crud-filter-check>\n\n  <smart-crud-filter-flag\n          *ngSwitchCase=\"FieldType.flag\"\n          [item]=\"item\"\n          [filter]=\"filter\"\n  ></smart-crud-filter-flag>\n\n  <smart-crud-filter-int\n          *ngSwitchCase=\"FieldType.int\"\n          [item]=\"item\"\n          [filter]=\"filter\"\n  ></smart-crud-filter-int>\n\n  <smart-crud-filter-text\n    *ngSwitchDefault\n    [item]=\"item\"\n    [filter]=\"filter\"\n  ></smart-crud-filter-text>\n</ion-item>\n", styles: [""], components: [{ type: i1$1.IonItem, selector: "ion-item", inputs: ["button", "color", "counter", "detail", "detailIcon", "disabled", "download", "fill", "href", "lines", "mode", "rel", "routerAnimation", "routerDirection", "shape", "target", "type"] }, { type: FilterDateComponent, selector: "smart-crud-filter-date" }, { type: FilterDateWithEditComponent, selector: "smart-crud-filter-date-with-edit" }, { type: FilterRadioComponent, selector: "smart-crud-filter-radio" }, { type: FilterCheckComponent, selector: "smart-crud-filter-check" }, { type: FilterFlagComponent, selector: "smart-crud-filter-flag" }, { type: FilterIntComponent, selector: "smart-crud-filter-int" }, { type: FilterTextComponent, selector: "smart-crud-filter-text" }], directives: [{ type: i3$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i3$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i3$1.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "smart-crud-filter", template: "<ion-item [ngSwitch]=\"item.fieldType\">\n  <smart-crud-filter-date\n          *ngSwitchCase=\"FieldType.date\"\n          [item]=\"item\"\n          [filter]=\"filter\"\n  ></smart-crud-filter-date>\n\n  <smart-crud-filter-date-with-edit\n          *ngSwitchCase=\"FieldType.dateWithEdit\"\n          [item]=\"item\"\n          [filter]=\"filter\"\n  ></smart-crud-filter-date-with-edit>\n\n  <smart-crud-filter-radio\n          *ngSwitchCase=\"FieldType.radio\"\n          [item]=\"item\"\n          [filter]=\"filter\"\n  ></smart-crud-filter-radio>\n\n  <smart-crud-filter-check\n          *ngSwitchCase=\"FieldType.check\"\n          [item]=\"item\"\n          [filter]=\"filter\"\n  ></smart-crud-filter-check>\n\n  <smart-crud-filter-flag\n          *ngSwitchCase=\"FieldType.flag\"\n          [item]=\"item\"\n          [filter]=\"filter\"\n  ></smart-crud-filter-flag>\n\n  <smart-crud-filter-int\n          *ngSwitchCase=\"FieldType.int\"\n          [item]=\"item\"\n          [filter]=\"filter\"\n  ></smart-crud-filter-int>\n\n  <smart-crud-filter-text\n    *ngSwitchDefault\n    [item]=\"item\"\n    [filter]=\"filter\"\n  ></smart-crud-filter-text>\n</ion-item>\n", styles: [""] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { item: [{
+                type: Input
+            }], filter: [{
+                type: Input
+            }] } });
+
+/**
+ * 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 {
+    constructor(menuService, config, facade, styleService, elementRef) {
+        this.menuService = menuService;
+        this.config = config;
+        this.facade = facade;
+        this.styleService = styleService;
+        this.elementRef = elementRef;
+    }
+    onClose() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.menuService.closeEnd();
+        });
+    }
+    ngOnInit() {
+        this.styleService.init(this.elementRef);
+        const modelFilters = getModelOptions(this.config.type).filters;
+        this.list = [
+            ...(modelFilters ? modelFilters.map(item => {
+                if (!item.label) {
+                    item.label = 'MODEL.' + item.key;
+                }
+                return item;
+            }) : []),
+            ...getModelFieldsWithOptions(new this.config.type())
+                .filter(item => { var _a, _b; return (_b = (_a = item.options) === null || _a === void 0 ? void 0 : _a.list) === null || _b === void 0 ? void 0 : _b.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$;
+    }
+}
+/** @nocollapse */ /** @nocollapse */ FiltersComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FiltersComponent, deps: [{ token: i3.MenuService }, { token: CrudConfig }, { token: CrudFacade }, { token: i3.StyleService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ FiltersComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FiltersComponent, selector: "smart-crud-filters", inputs: { hideMenu: "hideMenu" }, ngImport: i0, template: "<ion-header [hidden]=\"hideMenu\">\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>{{ 'filters' | translate }}</ion-title>\n    </ion-toolbar>\n</ion-header>\n<div class=\"filter-content\">\n    <ng-container *ngIf=\"filter$ | async; let filter\">\n        <ng-container *ngFor=\"let item of list\">\n            <smart-crud-filter [item]=\"item\" [filter]=\"filter\"></smart-crud-filter>\n        </ng-container>\n    </ng-container>\n    <div class=\"menu-bottom-space\">\n        &nbsp;\n    </div>\n</div>", styles: [":host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}ion-modal :host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){:host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}ion-modal :host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));color:var(--ion-color-dark)}}@media only screen and (max-width: 420px){:host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}ion-modal :host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));color:var(--ion-color-dark)}}:host ion-toolbar.ios{height:4.6rem;--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){:host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}:host ion-toolbar.ios ion-title{text-align:left;padding-left:5.2rem}:host ion-toolbar.ios ion-icon{color:var(--ion-color-light)}}@media only screen and (max-width: 420px){:host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}:host ion-toolbar.ios ion-title{text-align:left;padding-left:5.2rem}:host ion-toolbar.ios ion-icon{color:var(--ion-color-light)}}.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-title{text-align:left;padding-left:1.2rem}.modal-wrapper :host ion-toolbar.ios ion-icon{color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-buttons{margin:0}}@media only screen and (max-width: 420px){.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-title{text-align:left;padding-left:1.2rem}.modal-wrapper :host ion-toolbar.ios ion-icon{color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-buttons{margin:0}}:host ion-toolbar.ios.toolbar-searchbar ion-buttons{height:var(--smart-button-height);margin:.4rem}:host ion-toolbar ion-menu-button{color:var(--ion-color-light)}:host ion-toolbar ion-buttons.ios{height:var(--smart-button-height);margin:0}:host .filter-content{display:block;overflow:auto;overflow-x:hidden}:host .menu-bottom-space{height:75px}\n"], components: [{ type: i1$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i1$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i1$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i1$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { type: i1$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: FilterComponent, selector: "smart-crud-filter", inputs: ["item", "filter"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i4.TranslatePipe, "async": i3$1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FiltersComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-crud-filters', template: "<ion-header [hidden]=\"hideMenu\">\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>{{ 'filters' | translate }}</ion-title>\n    </ion-toolbar>\n</ion-header>\n<div class=\"filter-content\">\n    <ng-container *ngIf=\"filter$ | async; let filter\">\n        <ng-container *ngFor=\"let item of list\">\n            <smart-crud-filter [item]=\"item\" [filter]=\"filter\"></smart-crud-filter>\n        </ng-container>\n    </ng-container>\n    <div class=\"menu-bottom-space\">\n        &nbsp;\n    </div>\n</div>", styles: [":host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}ion-modal :host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){:host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}ion-modal :host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));color:var(--ion-color-dark)}}@media only screen and (max-width: 420px){:host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}ion-modal :host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));color:var(--ion-color-dark)}}:host ion-toolbar.ios{height:4.6rem;--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){:host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}:host ion-toolbar.ios ion-title{text-align:left;padding-left:5.2rem}:host ion-toolbar.ios ion-icon{color:var(--ion-color-light)}}@media only screen and (max-width: 420px){:host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}:host ion-toolbar.ios ion-title{text-align:left;padding-left:5.2rem}:host ion-toolbar.ios ion-icon{color:var(--ion-color-light)}}.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-title{text-align:left;padding-left:1.2rem}.modal-wrapper :host ion-toolbar.ios ion-icon{color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-buttons{margin:0}}@media only screen and (max-width: 420px){.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-title{text-align:left;padding-left:1.2rem}.modal-wrapper :host ion-toolbar.ios ion-icon{color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-buttons{margin:0}}:host ion-toolbar.ios.toolbar-searchbar ion-buttons{height:var(--smart-button-height);margin:.4rem}:host ion-toolbar ion-menu-button{color:var(--ion-color-light)}:host ion-toolbar ion-buttons.ios{height:var(--smart-button-height);margin:0}:host .filter-content{display:block;overflow:auto;overflow-x:hidden}:host .menu-bottom-space{height:75px}\n"] }]
+        }], ctorParameters: function () { return [{ type: i3.MenuService }, { type: CrudConfig }, { type: CrudFacade }, { type: i3.StyleService }, { type: i0.ElementRef }]; }, propDecorators: { hideMenu: [{
+                type: Input
+            }] } });
+
+class FiltersConfigComponent {
+    constructor(facade, styleService, elementRef) {
+        this.facade = facade;
+        this.styleService = styleService;
+        this.elementRef = elementRef;
+    }
+    onRemoveQuery(item) {
+        const index = this.facade.filter.query.indexOf(item);
+        if (index > -1) {
+            this.facade.filter.query.splice(index, 1);
+        }
+        this.facade.read(this.facade.filter);
+    }
+    ngOnInit() {
+        this.styleService.init(this.elementRef);
+        this.query$ = this.facade.filter$.pipe(map(filter => {
+            var _a;
+            return (_a = filter === null || filter === void 0 ? void 0 : filter.query) === null || _a === void 0 ? void 0 : _a.filter(i => !i.hidden);
+        }));
+    }
+}
+/** @nocollapse */ /** @nocollapse */ FiltersConfigComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FiltersConfigComponent, deps: [{ token: CrudFacade }, { token: i3.StyleService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ FiltersConfigComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: FiltersConfigComponent, selector: "smart-crud-filters-config", ngImport: i0, template: " <ng-container *ngIf=\"query$ | async; let query\">\n    <ion-toolbar *ngIf=\"query?.length\">\n        <ion-chip *ngFor=\"let item of query\" (click)=\"onRemoveQuery(item)\" color=\"medium\" outline=\"true\">\n            <ion-icon name=\"filter-circle-outline\" color=\"primary\"></ion-icon>\n            <ion-label>{{ 'MODEL.' + item.key | translate }} {{ item.type }} {{ item.value | translate }}</ion-label>\n            <ion-icon name=\"close\" color=\"danger\"></ion-icon>\n        </ion-chip>\n    </ion-toolbar>\n</ng-container>", styles: [":host ion-label{font-size:calc(var(--default-font-size) - 2px)}\n"], components: [{ type: i1$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i1$1.IonChip, selector: "ion-chip", inputs: ["color", "disabled", "mode", "outline"] }, { type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { type: i1$1.IonLabel, selector: "ion-label", inputs: ["color", "mode", "position"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "async": i3$1.AsyncPipe, "translate": i4.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FiltersConfigComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-crud-filters-config', template: " <ng-container *ngIf=\"query$ | async; let query\">\n    <ion-toolbar *ngIf=\"query?.length\">\n        <ion-chip *ngFor=\"let item of query\" (click)=\"onRemoveQuery(item)\" color=\"medium\" outline=\"true\">\n            <ion-icon name=\"filter-circle-outline\" color=\"primary\"></ion-icon>\n            <ion-label>{{ 'MODEL.' + item.key | translate }} {{ item.type }} {{ item.value | translate }}</ion-label>\n            <ion-icon name=\"close\" color=\"danger\"></ion-icon>\n        </ion-chip>\n    </ion-toolbar>\n</ng-container>", styles: [":host ion-label{font-size:calc(var(--default-font-size) - 2px)}\n"] }]
+        }], ctorParameters: function () { return [{ type: CrudFacade }, { type: i3.StyleService }, { type: i0.ElementRef }]; } });
+
+class FormOptionsPipe {
+    constructor(modelPossibilitiesProvider) {
+        this.modelPossibilitiesProvider = modelPossibilitiesProvider;
+    }
+    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(),
+            };
+        }
+        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,
+            };
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ FormOptionsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormOptionsPipe, deps: [{ token: CRUD_MODEL_POSSIBILITIES_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Pipe });
+/** @nocollapse */ /** @nocollapse */ FormOptionsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormOptionsPipe, name: "smartFormOptions" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: FormOptionsPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: "smartFormOptions",
+                }]
+        }], ctorParameters: function () {
+        return [{ type: ICrudModelPossibilitiesProvider, decorators: [{
+                        type: Optional
+                    }, {
+                        type: Inject,
+                        args: [CRUD_MODEL_POSSIBILITIES_PROVIDER]
+                    }] }];
+    } });
+
+class MultiselectComponent {
+    constructor(facade, config, menuService) {
+        this.facade = facade;
+        this.config = config;
+        this.menuService = menuService;
+        this.buttonOptions = {
+            click: () => __awaiter(this, void 0, void 0, function* () {
+                const result = this._list.map(item => {
+                    return Object.assign(Object.assign({}, this._changes), { id: item.id });
+                });
+                this.facade.updatePartialMany(result);
+                yield this.menuService.closeEnd();
+            }),
+            confirm: true
+        };
+        this.list$ = this.facade.multiSelected$.pipe(tap(list => {
+            this.lock = true;
+            const model = new this.config.type();
+            const fieldsWithOptions = getModelFieldsWithOptions(model)
+                .filter(f => { var _a; return (_a = f.options.update) === null || _a === void 0 ? void 0 : _a.multi; });
+            fieldsWithOptions.forEach(({ key }) => {
+                const uniques = _.uniq(list.map(i => i[key]));
+                if (uniques.length === 1) {
+                    model[key] = uniques[0];
+                }
+            });
+            this.item = model;
+        }));
+    }
+    onClose() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.menuService.closeEnd();
+        });
+    }
+    onPartialChange(changes, list) {
+        this.lock = false;
+        this._list = list;
+        this._changes = changes;
+    }
+    onValidChange(valid) {
+        this.valid = valid;
+    }
+    ngOnInit() {
+    }
+}
+/** @nocollapse */ /** @nocollapse */ MultiselectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MultiselectComponent, deps: [{ token: CrudFacade }, { token: CrudConfig }, { token: i3.MenuService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ MultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: MultiselectComponent, selector: "smart-crud-multiselect", ngImport: i0, template: "<ng-container *ngIf=\"list$ | async; let 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 }}</ion-title>\n        </ion-toolbar>\n    </ion-header>\n\n    <div *ngIf=\"item\">\n        <smart-form [options]=\"item | smartFormOptions : 'multiUpdate' : config.type\" (valuePartialChange)=\"onPartialChange($event, list)\" (validChange)=\"onValidChange($event)\"></smart-form>\n\n        <smart-button style=\"float: right\" [disabled]=\"lock || !valid\" [options]=\"buttonOptions\">{{ 'change' | translate }}</smart-button>\n    </div>\n</ng-container>", styles: [":host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){:host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}}@media only screen and (max-width: 420px){:host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}}:host ion-toolbar.ios{height:4.6rem;--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){:host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}:host ion-toolbar.ios ion-title{text-align:left;padding-left:5.2rem}:host ion-toolbar.ios ion-icon{color:var(--ion-color-light)}}@media only screen and (max-width: 420px){:host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}:host ion-toolbar.ios ion-title{text-align:left;padding-left:5.2rem}:host ion-toolbar.ios ion-icon{color:var(--ion-color-light)}}.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-title{text-align:left;padding-left:1.2rem}.modal-wrapper :host ion-toolbar.ios ion-icon{color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-buttons{margin:0}}@media only screen and (max-width: 420px){.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-title{text-align:left;padding-left:1.2rem}.modal-wrapper :host ion-toolbar.ios ion-icon{color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-buttons{margin:0}}:host ion-toolbar ion-menu-button{color:var(--ion-color-light)}:host ion-toolbar ion-buttons.ios{height:var(--smart-button-height);margin:0}\n"], components: [{ type: i1$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i1$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i1$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i1$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { type: i1$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i3.FormComponent, selector: "smart-form", inputs: ["options"], outputs: ["invokeSubmit", "valueChange", "valuePartialChange", "validChange"] }, { type: i3.ButtonComponent, selector: "smart-button", inputs: ["options", "disabled"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3$1.AsyncPipe, "translate": i4.TranslatePipe, "smartFormOptions": FormOptionsPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MultiselectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-crud-multiselect', template: "<ng-container *ngIf=\"list$ | async; let 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 }}</ion-title>\n        </ion-toolbar>\n    </ion-header>\n\n    <div *ngIf=\"item\">\n        <smart-form [options]=\"item | smartFormOptions : 'multiUpdate' : config.type\" (valuePartialChange)=\"onPartialChange($event, list)\" (validChange)=\"onValidChange($event)\"></smart-form>\n\n        <smart-button style=\"float: right\" [disabled]=\"lock || !valid\" [options]=\"buttonOptions\">{{ 'change' | translate }}</smart-button>\n    </div>\n</ng-container>", styles: [":host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){:host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}}@media only screen and (max-width: 420px){:host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}}:host ion-toolbar.ios{height:4.6rem;--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){:host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}:host ion-toolbar.ios ion-title{text-align:left;padding-left:5.2rem}:host ion-toolbar.ios ion-icon{color:var(--ion-color-light)}}@media only screen and (max-width: 420px){:host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}:host ion-toolbar.ios ion-title{text-align:left;padding-left:5.2rem}:host ion-toolbar.ios ion-icon{color:var(--ion-color-light)}}.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-title{text-align:left;padding-left:1.2rem}.modal-wrapper :host ion-toolbar.ios ion-icon{color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-buttons{margin:0}}@media only screen and (max-width: 420px){.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-title{text-align:left;padding-left:1.2rem}.modal-wrapper :host ion-toolbar.ios ion-icon{color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-buttons{margin:0}}:host ion-toolbar ion-menu-button{color:var(--ion-color-light)}:host ion-toolbar ion-buttons.ios{height:var(--smart-button-height);margin:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: CrudFacade }, { type: CrudConfig }, { type: i3.MenuService }]; } });
+
+class CrudListGroupService {
+    constructor(facade) {
+        this.facade = facade;
+        this._destroyed = [];
+    }
+    change(val, item, groups, force) {
+        if (val || force) {
+            item.changed = true;
+            let current = this.facade.filter.query.find(q => q.key === item.key && q.type === '=');
+            if (!current) {
+                current = {
+                    key: item.key,
+                    type: "=",
+                    value: null
+                };
+                this.facade.filter.query.push(current);
+            }
+            current.value = item.value;
+            current.hidden = true;
+            this.facade.read(Object.assign(Object.assign({}, 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 newQuery = this.facade.filter.query.filter(q => !list.some(i => q.key === i.key));
+        this.facade.read(Object.assign(Object.assign({}, this.facade.filter), { query: newQuery }));
+    }
+}
+/** @nocollapse */ /** @nocollapse */ CrudListGroupService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudListGroupService, deps: [{ token: CrudFacade }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ CrudListGroupService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", 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: "13.2.7", ngImport: i0, type: CrudListGroupService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: CrudFacade }]; }, propDecorators: { refresh: [] } });
+
+class GroupComponent extends BaseComponent$1 {
+    constructor(styleService, elementRef, facade, cd, groupService) {
+        super();
+        this.styleService = styleService;
+        this.elementRef = elementRef;
+        this.facade = facade;
+        this.cd = cd;
+        this.groupService = groupService;
+    }
+    change(val, item, force = false) {
+        this.groups.filter(i => i.value !== item.value || i.key !== item.key).forEach(i => {
+            i.show = false;
+        });
+        this.groupService.change(val, item, this.groups, force);
+        if (val) {
+            setTimeout(() => {
+                item.show = val;
+                this.cd.detectChanges();
+            });
+        }
+        else {
+            item.show = val;
+            this.cd.detectChanges();
+        }
+    }
+    ngOnInit() {
+        this.styleService.init(this.elementRef);
+    }
+    ngOnDestroy() {
+        this.groupService.destroy(this.groups);
+        super.ngOnDestroy();
+    }
+}
+/** @nocollapse */ /** @nocollapse */ GroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: GroupComponent, deps: [{ token: i3.StyleService }, { token: i0.ElementRef }, { token: CrudFacade }, { token: i0.ChangeDetectorRef }, { token: CrudListGroupService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ GroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: GroupComponent, selector: "smart-crud-group", inputs: { groups: "groups", listOptions: "listOptions" }, usesInheritance: true, ngImport: i0, template: "<smart-accordion *ngFor=\"let item of groups\" [(show)]=\"item.show\" (showChange)=\"change($event, item)\">\n    <smart-accordion-header [ngClass]=\"{ 'accordion-show': item.show }\">{{ item.text | translate }}</smart-accordion-header>\n    <smart-accordion-body>\n        <smart-list *ngIf=\"item.show && !item.children && listOptions\" [options]=\"listOptions\"></smart-list>\n        <div *ngIf=\"item.children\" style=\"margin-left: 50px\">\n            <smart-crud-group [groups]=\"item.children\" [listOptions]=\"listOptions\"></smart-crud-group>\n        </div>\n    </smart-accordion-body>\n</smart-accordion>\n<br/><br/><br/>", styles: [".accordion-show{font-weight:bolder}\n"], components: [{ type: i3.AccordionComponent, selector: "smart-accordion", inputs: ["show"], outputs: ["showChange"] }, { type: i3.AccordionHeaderComponent, selector: "smart-accordion-header" }, { type: i3.AccordionBodyComponent, selector: "smart-accordion-body" }, { type: i3.ListComponent, selector: "smart-list", inputs: ["options"] }, { type: GroupComponent, selector: "smart-crud-group", inputs: ["groups", "listOptions"] }], directives: [{ type: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i3$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i4.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: GroupComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'smart-crud-group', template: "<smart-accordion *ngFor=\"let item of groups\" [(show)]=\"item.show\" (showChange)=\"change($event, item)\">\n    <smart-accordion-header [ngClass]=\"{ 'accordion-show': item.show }\">{{ item.text | translate }}</smart-accordion-header>\n    <smart-accordion-body>\n        <smart-list *ngIf=\"item.show && !item.children && listOptions\" [options]=\"listOptions\"></smart-list>\n        <div *ngIf=\"item.children\" style=\"margin-left: 50px\">\n            <smart-crud-group [groups]=\"item.children\" [listOptions]=\"listOptions\"></smart-crud-group>\n        </div>\n    </smart-accordion-body>\n</smart-accordion>\n<br/><br/><br/>", styles: [".accordion-show{font-weight:bolder}\n"] }]
+        }], ctorParameters: function () { return [{ type: i3.StyleService }, { type: i0.ElementRef }, { type: CrudFacade }, { type: i0.ChangeDetectorRef }, { type: CrudListGroupService }]; }, propDecorators: { groups: [{
+                type: Input
+            }], listOptions: [{
+                type: Input
+            }] } });
+
+class SocketService {
+}
+/** @nocollapse */ /** @nocollapse */ SocketService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SocketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ SocketService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SocketService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: SocketService, decorators: [{
+            type: Injectable
+        }] });
+class NotSocketService {
+}
+/** @nocollapse */ /** @nocollapse */ NotSocketService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NotSocketService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ NotSocketService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NotSocketService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: NotSocketService, decorators: [{
+            type: Injectable
+        }] });
+
+class CrudPipesModule {
+}
+/** @nocollapse */ /** @nocollapse */ CrudPipesModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ CrudPipesModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudPipesModule, declarations: [FormOptionsPipe], exports: [FormOptionsPipe] });
+/** @nocollapse */ /** @nocollapse */ CrudPipesModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudPipesModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudPipesModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        FormOptionsPipe
+                    ],
+                    exports: [
+                        FormOptionsPipe
+                    ]
+                }]
+        }] });
+
+class CrudService {
+    constructor(config, http, socket) {
+        this.config = config;
+        this.http = http;
+        this.socket = socket;
+        this._formatMap = {
+            csv: "text/csv",
+            xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        };
+    }
+    // changes(criteria: { id?: string } = {}): Observable<ItemChangedData> {
+    //   this.socket.emit("changes", criteria);
+    //   return this.socket.fromEvent("changes");
+    // }
+    // TODO : Location is null
+    create(item) {
+        return 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 this.http.post(this.config.apiUrl + "/bulk?mode=" + options.mode, items);
+    }
+    getById(id) {
+        return this.http.get(this.config.apiUrl + "/" + id);
+    }
+    getList(filter = null) {
+        return this.http.get(this.config.apiUrl + this.getQuery(filter));
+    }
+    exportList(filter = null, format) {
+        if (!format) {
+            format = "csv";
+        }
+        if (format === "xlsx") {
+            return 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;
+                const url = URL.createObjectURL(blob);
+                downloadLink.href = url;
+                downloadLink.download = "data." + format;
+                document.body.appendChild(downloadLink);
+                downloadLink.click();
+                document.body.removeChild(downloadLink);
+            }));
+        }
+        return 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]);
+            const url = URL.createObjectURL(blob);
+            downloadLink.href = url;
+            downloadLink.download = "data." + format;
+            document.body.appendChild(downloadLink);
+            downloadLink.click();
+            document.body.removeChild(downloadLink);
+        }));
+    }
+    update(item) {
+        return this.http.put(this.config.apiUrl + "/" + item.id, item);
+    }
+    updatePartial(item) {
+        return this.http.patch(this.config.apiUrl + "/" + item.id, item);
+    }
+    updatePartialMany(items) {
+        return forkJoin(items.map(item => {
+            return this.updatePartial(item);
+        }));
+    }
+    delete(id) {
+        return 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("&", "") : "";
+    }
+}
+/** @nocollapse */ /** @nocollapse */ CrudService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudService, deps: [{ token: CrudConfig }, { token: i2$1.HttpClient }, { token: SocketService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ CrudService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () {
+        return [{ type: CrudConfig }, { type: i2$1.HttpClient }, { type: SocketService, decorators: [{
+                        type: Optional
+                    }] }];
+    } });
+
+class CrudEffects {
+    constructor(actions$, service, config, store, state) {
+        this.actions$ = actions$;
+        this.service = service;
+        this.config = config;
+        this.store = store;
+        this.state = state;
+    }
+    init() {
+        const metadata = Reflect.getMetadata(this.config.entity, CrudEffects);
+        if (metadata)
+            return;
+        Reflect.defineMetadata(this.config.entity, true, CrudEffects);
+        this.actions$.subscribe((action) => {
+            switch (action.type) {
+                case `[${this.config.entity}] Create`:
+                    this.service
+                        .create(action.item)
+                        .pipe(tap(() => this.store.dispatch(createSuccess(this.config.entity, action.item))), catchError((error) => {
+                        this.store.dispatch(createFailure(this.config.entity, action.item, error));
+                        return of();
+                    }))
+                        .subscribe();
+                    break;
+                case `[${this.config.entity}] Create Success`:
+                    const createState = this.state.getValue()[this.config.entity];
+                    this.store.dispatch(read(this.config.entity, createState.filter ? Object.assign(Object.assign({}, createState.filter), { offset: 0 }) : null));
+                    break;
+                case `[${this.config.entity}] Create Many`:
+                    this.service
+                        .createMany(action.data.items, action.data.options)
+                        .pipe(tap(() => this.store.dispatch(createManySuccess(this.config.entity, {
+                        items: action.data.items,
+                        options: action.data.options,
+                    }))), catchError((error) => {
+                        this.store.dispatch(createManyFailure(this.config.entity, {
+                            items: action.data.items,
+                            options: action.data.options,
+                        }, error));
+                        return of();
+                    }))
+                        .subscribe();
+                    break;
+                case `[${this.config.entity}] Create Many Success`:
+                    const createManyState = this.state.getValue()[this.config.entity];
+                    this.store.dispatch(read(this.config.entity, createManyState.filter
+                        ? Object.assign(Object.assign({}, createManyState.filter), { offset: 0 }) : null));
+                    break;
+                case `[${this.config.entity}] Read`:
+                    this.service
+                        .getList(action.filter)
+                        .pipe(tap((result) => this.store.dispatch(readSuccess(this.config.entity, action.filter, result))), catchError((error) => {
+                        this.store.dispatch(readFailure(this.config.entity, action.filter, error));
+                        return of();
+                    }))
+                        .subscribe();
+                    break;
+                case `[${this.config.entity}] Export`:
+                    this.service
+                        .exportList(action.filter, action.format)
+                        .pipe(tap((result) => this.store.dispatch(exportListSuccess(this.config.entity, action.filter))), catchError((error) => {
+                        this.store.dispatch(exportListFailure(this.config.entity, action.filter, error));
+                        return of();
+                    }))
+                        .subscribe();
+                    break;
+                case `[${this.config.entity}] Select`:
+                    this.service
+                        .getById(action.id)
+                        .pipe(tap((result) => this.store.dispatch(selectSuccess(this.config.entity, action.id, result))), catchError((error) => {
+                        this.store.dispatch(selectFailure(this.config.entity, action.id, error));
+                        return of();
+                    }))
+                        .subscribe();
+                    break;
+                case `[${this.config.entity}] Update`:
+                    this.service
+                        .updatePartial(action.item)
+                        .pipe(tap(() => this.store.dispatch(updateSuccess(this.config.entity, action.item))), catchError((error) => {
+                        this.store.dispatch(updateFailure(this.config.entity, action.item, error));
+                        this.store.dispatch(read(this.config.entity));
+                        return of();
+                    }))
+                        .subscribe();
+                    break;
+                case `[${this.config.entity}] Update Success`:
+                    this.store
+                        .pipe(select$1(getCrudFilter(this.config.entity)), first())
+                        .subscribe((filter) => {
+                        this.store.dispatch(read(this.config.entity, Object.assign(Object.assign({}, filter), { offset: 0 })));
+                        this.store.dispatch(select(this.config.entity, action.item.id));
+                    });
+                    break;
+                case `[${this.config.entity}] Update partial`:
+                    this.service
+                        .updatePartial(action.item)
+                        .pipe(tap(() => this.store.dispatch(updatePartialSuccess(this.config.entity, action.item))), catchError((error) => {
+                        this.store.dispatch(updatePartialFailure(this.config.entity, action.item, error));
+                        this.store.dispatch(read(this.config.entity));
+                        return of();
+                    }))
+                        .subscribe();
+                    break;
+                case `[${this.config.entity}] Update partial Success`:
+                    this.store
+                        .pipe(select$1(getCrudFilter(this.config.entity)), first())
+                        .subscribe((filter) => {
+                        this.store.dispatch(read(this.config.entity, Object.assign(Object.assign({}, filter), { offset: 0 })));
+                        this.store.dispatch(select(this.config.entity, action.item.id));
+                    });
+                    break;
+                case `[${this.config.entity}] Update partial many`:
+                    this.service
+                        .updatePartialMany(action.items)
+                        .pipe(tap(() => this.store.dispatch(updatePartialManySuccess(this.config.entity, action.items))), catchError((error) => {
+                        this.store.dispatch(updatePartialManyFailure(this.config.entity, action.items, error));
+                        this.store.dispatch(read(this.config.entity));
+                        return of();
+                    }))
+                        .subscribe();
+                    break;
+                case `[${this.config.entity}] Update partial many Success`:
+                    this.store
+                        .pipe(select$1(getCrudFilter(this.config.entity)), first())
+                        .subscribe((filter) => {
+                        this.store.dispatch(read(this.config.entity, Object.assign(Object.assign({}, filter), { offset: 0 })));
+                    });
+                    break;
+                case `[${this.config.entity}] Delete`:
+                    this.service
+                        .delete(action.id)
+                        .pipe(tap(() => this.store.dispatch(deleteSuccess(this.config.entity, action.id))), catchError((error) => {
+                        this.store.dispatch(deleteFailure(this.config.entity, action.id, error));
+                        return of();
+                    }))
+                        .subscribe();
+                    break;
+                case `[${this.config.entity}] Delete Success`:
+                    this.store
+                        .pipe(select$1(getCrudFilter(this.config.entity)), first())
+                        .subscribe((filter) => {
+                        this.store.dispatch(read(this.config.entity, Object.assign(Object.assign({}, filter), { offset: 0 })));
+                    });
+                    break;
+                default:
+                    break;
+            }
+        });
+    }
+}
+/** @nocollapse */ /** @nocollapse */ CrudEffects.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudEffects, deps: [{ token: i1.ActionsSubject }, { token: CrudService }, { token: CrudConfig }, { token: i1.Store }, { token: i1.State }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ CrudEffects.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudEffects });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudEffects, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i1.ActionsSubject }, { type: CrudService }, { type: CrudConfig }, { type: i1.Store }, { type: i1.State }]; } });
+
+class CrudListPaginationFactory {
+    constructor(facade) {
+        this.facade = facade;
+    }
+    create(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return {
+                mode: options.mode,
+                limit: options.limit,
+                loadNextPage: () => {
+                    if (!options.provider.getLinks() || !options.provider.getLinks().next)
+                        return Promise.resolve(false);
+                    return new Promise((res) => {
+                        const sub = this.facade.loaded$.subscribe((l) => {
+                            if (l) {
+                                // if (sub && !sub.closed) sub.unsubscribe();
+                                setTimeout(() => {
+                                    res(options.provider.getLinks() &&
+                                        options.provider.getLinks().next);
+                                });
+                            }
+                        });
+                        this.facade.read(Object.assign(Object.assign({}, options.provider.getFilter()), { offset: options.provider.getFilter().offset +
+                                options.provider.getFilter().limit }));
+                    });
+                },
+                loadPrevPage: () => {
+                    if (!options.provider.getLinks() || !options.provider.getLinks().prev)
+                        return Promise.resolve(false);
+                    return new Promise((res) => {
+                        const sub = this.facade.loaded$.subscribe((l) => {
+                            if (l) {
+                                // if (sub && !sub.closed) sub.unsubscribe();
+                                setTimeout(() => {
+                                    res(options.provider.getLinks() &&
+                                        options.provider.getLinks().prev);
+                                });
+                            }
+                        });
+                        this.facade.read(Object.assign(Object.assign({}, options.provider.getFilter()), { offset: options.provider.getFilter().offset -
+                                options.provider.getFilter().limit }));
+                    });
+                },
+                page$: this.facade.filter$.pipe(map((f) => {
+                    return (f === null || f === void 0 ? void 0 : f.limit) ? f.offset / f.limit + 1 : 0;
+                })),
+                totalPages$: combineLatest(this.facade.filter$, this.facade.totalCount$).pipe(map(([filter, totalCount]) => {
+                    return (filter === null || filter === void 0 ? void 0 : filter.limit) ? Math.ceil(totalCount / filter.limit) : 0;
+                })),
+            };
+        });
+    }
+}
+/** @nocollapse */ /** @nocollapse */ CrudListPaginationFactory.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudListPaginationFactory, deps: [{ token: CrudFacade }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ CrudListPaginationFactory.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudListPaginationFactory });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudListPaginationFactory, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: CrudFacade }]; } });
+
+const COMPONENTS = [
+    ExportComponent,
+    FilterComponent,
+    FilterTextComponent,
+    FiltersConfigComponent,
+    FilterDateComponent,
+    FilterDateWithEditComponent,
+    FilterRadioComponent,
+    FiltersComponent,
+    FilterFlagComponent,
+    FilterCheckComponent,
+    FilterIntComponent,
+    MultiselectComponent,
+    GroupComponent
+];
+class CrudComponentsModule {
+}
+/** @nocollapse */ /** @nocollapse */ CrudComponentsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudComponentsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ CrudComponentsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudComponentsModule, declarations: [ExportComponent,
+        FilterComponent,
+        FilterTextComponent,
+        FiltersConfigComponent,
+        FilterDateComponent,
+        FilterDateWithEditComponent,
+        FilterRadioComponent,
+        FiltersComponent,
+        FilterFlagComponent,
+        FilterCheckComponent,
+        FilterIntComponent,
+        MultiselectComponent,
+        GroupComponent], imports: [
+        //AuthSharedModule,
+        StoreModule,
+        SharedModule,
+        CrudPipesModule,
+        FormsModule,
+        CommonModule
+    ], exports: [CrudPipesModule, ExportComponent,
+        FilterComponent,
+        FilterTextComponent,
+        FiltersConfigComponent,
+        FilterDateComponent,
+        FilterDateWithEditComponent,
+        FilterRadioComponent,
+        FiltersComponent,
+        FilterFlagComponent,
+        FilterCheckComponent,
+        FilterIntComponent,
+        MultiselectComponent,
+        GroupComponent] });
+/** @nocollapse */ /** @nocollapse */ CrudComponentsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudComponentsModule, providers: [
+        CrudService,
+        CrudEffects,
+        CrudFacade,
+        SocketService,
+        CrudListPaginationFactory,
+    ], imports: [[
+            //AuthSharedModule,
+            StoreModule,
+            SharedModule,
+            CrudPipesModule,
+            FormsModule,
+            CommonModule
+        ], CrudPipesModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudComponentsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ...COMPONENTS
+                    ],
+                    imports: [
+                        //AuthSharedModule,
+                        StoreModule,
+                        SharedModule,
+                        CrudPipesModule,
+                        FormsModule,
+                        CommonModule
+                    ],
+                    exports: [
+                        CrudPipesModule,
+                        ...COMPONENTS
+                    ],
+                    providers: [
+                        CrudService,
+                        CrudEffects,
+                        CrudFacade,
+                        SocketService,
+                        CrudListPaginationFactory,
+                    ]
+                }]
+        }] });
+
+const initialState = {
+    loaded: false
+};
+const crudReducer = (state = initialState, action, entity) => {
+    switch (action.type) {
+        case `[${entity}] Create`:
+            return Object.assign(Object.assign({}, state), { loaded: false, error: null });
+        case `[${entity}] Create Success`:
+            return Object.assign(Object.assign({}, state), { loaded: true, error: null });
+        case `[${entity}] Create Failure`:
+            return Object.assign(Object.assign({}, state), { loaded: true, error: action.error });
+        case `[${entity}] Create Many`:
+            return Object.assign(Object.assign({}, state), { loaded: false, error: null });
+        case `[${entity}] Create Many Success`:
+            return Object.assign(Object.assign({}, state), { loaded: true, error: null });
+        case `[${entity}] Create Many Failure`:
+            return Object.assign(Object.assign({}, state), { loaded: true, error: action.error });
+        case `[${entity}] Export`:
+            return Object.assign(Object.assign({}, state), { loaded: false });
+        case `[${entity}] Export Success`:
+            return Object.assign(Object.assign({}, state), { loaded: true });
+        case `[${entity}] Export Failure`:
+            return Object.assign(Object.assign({}, state), { loaded: true });
+        case `[${entity}] Read`:
+            return Object.assign(Object.assign({}, state), { loaded: false, filter: action.filter, error: null, totalCount: null, links: null });
+        case `[${entity}] Read Success`:
+            let list = [];
+            if (action.filter
+                && action.filter.offset
+                && state.list
+                && action.filter.paginationMode !== PaginationMode.singlePage) {
+                state.list.forEach(i => {
+                    list.push(i);
+                });
+                list = [
+                    ...list,
+                    ...action.result.data
+                ];
+            }
+            else {
+                list = action.result.data;
+            }
+            return Object.assign(Object.assign({}, state), { loaded: true, list, totalCount: action.result.totalCount, links: action.result.links, error: null });
+        case `[${entity}] Read Failure`:
+            return Object.assign(Object.assign({}, state), { loaded: true, error: action.error });
+        case `[${entity}] Select`:
+            return Object.assign(Object.assign({}, state), { loaded: false, selected: null, error: null });
+        case `[${entity}] Select Success`:
+            return Object.assign(Object.assign({}, state), { loaded: true, selected: action.item, error: null });
+        case `[${entity}] Select Failure`:
+            return Object.assign(Object.assign({}, state), { loaded: true, error: action.error });
+        case `[${entity}] MultiSelect`:
+            return Object.assign(Object.assign({}, state), { multiSelected: [...action.items] });
+        case `[${entity}] Unselect`:
+            return Object.assign(Object.assign({}, state), { loaded: true, selected: null, error: null });
+        case `[${entity}] Update`:
+            return Object.assign(Object.assign({}, state), { loaded: false, error: null });
+        case `[${entity}] Update Success`:
+            return Object.assign(Object.assign({}, state), { loaded: true, error: null });
+        case `[${entity}] Update Failure`:
+            return Object.assign(Object.assign({}, state), { loaded: true, error: action.error });
+        case `[${entity}] Update partial`:
+            return Object.assign(Object.assign({}, state), { loaded: false, error: null });
+        case `[${entity}] Update partial Success`:
+            return Object.assign(Object.assign({}, state), { loaded: true, error: null });
+        case `[${entity}] Update partial Failure`:
+            return Object.assign(Object.assign({}, state), { loaded: true, error: action.error });
+        case `[${entity}] Update partial many`:
+            return Object.assign(Object.assign({}, state), { loaded: false, error: null });
+        case `[${entity}] Update partial many Success`:
+            return Object.assign(Object.assign({}, state), { multiSelected: [], loaded: true, error: null });
+        case `[${entity}] Update partial many Failure`:
+            return Object.assign(Object.assign({}, state), { loaded: true, error: action.error });
+        case `[${entity}] Delete`:
+            return Object.assign(Object.assign({}, state), { loaded: false, error: null });
+        case `[${entity}] Delete Success`:
+            return Object.assign(Object.assign({}, state), { loaded: true, error: null });
+        case `[${entity}] Delete Failure`:
+            return Object.assign(Object.assign({}, state), { loaded: true, error: action.error });
+        default:
+            return state;
+    }
+};
+function getReducer(entity) {
+    return (state, action) => {
+        return crudReducer(state, action, entity);
+    };
+}
+
+class PageService {
+    constructor(authService, config) {
+        this.authService = authService;
+        this.config = config;
+    }
+    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;
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ PageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PageService, deps: [{ token: i3.AuthService }, { token: CrudFullConfig }], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ PageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PageService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: PageService, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i3.AuthService }, { type: CrudFullConfig }]; } });
+
+class CrudSearchService {
+    constructor() {
+        this._filterSource = new BehaviorSubject(null);
+        this._enabledSource = new BehaviorSubject(false);
+        this.enabled$ = this._enabledSource.asObservable();
+        this.filter$ = combineLatest([
+            this._filterSource.asObservable(), this.enabled$
+        ]).pipe(map(([filter, enabled]) => {
+            if (!enabled)
+                return {};
+            return filter;
+        }));
+    }
+    get filter() {
+        if (!this._enabledSource.value)
+            return {};
+        return this._filterSource.value;
+    }
+    get enabled() {
+        return this._enabledSource.value;
+    }
+    setFilter(val) {
+        this._filterSource.next(val);
+    }
+    setEnabled(val) {
+        this._enabledSource.next(val);
+    }
+}
+/** @nocollapse */ /** @nocollapse */ CrudSearchService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudSearchService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+/** @nocollapse */ /** @nocollapse */ CrudSearchService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudSearchService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudSearchService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class CrudListPageBaseComponent extends BaseComponent$1 {
+    constructor(config) {
+        super();
+        this.config = config;
+    }
+}
+CrudListPageBaseComponent.smartType = "crud-list-page";
+/** @nocollapse */ /** @nocollapse */ CrudListPageBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudListPageBaseComponent, deps: [{ token: CrudFullConfig }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ CrudListPageBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: CrudListPageBaseComponent, inputs: { listOptions: "listOptions" }, viewQueries: [{ propertyName: "contentTpl", first: true, predicate: ["contentTpl"], descendants: true, read: ViewContainerRef, static: true }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudListPageBaseComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: CrudFullConfig }]; }, propDecorators: { contentTpl: [{
+                type: ViewChild,
+                args: ["contentTpl", { read: ViewContainerRef, static: true }]
+            }], listOptions: [{
+                type: Input
+            }] } });
+
+class ListStandardComponent extends CrudListPageBaseComponent {
+    constructor(facade, config) {
+        super(config);
+        this.facade = facade;
+        this.config = config;
+        this.isSearch$ = this.facade.filter$.pipe(map(filter => {
+            return !!(filter === null || filter === void 0 ? void 0 : filter.searchText);
+        }));
+    }
+}
+/** @nocollapse */ /** @nocollapse */ ListStandardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ListStandardComponent, deps: [{ token: CrudFacade }, { token: CrudFullConfig }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ ListStandardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ListStandardComponent, selector: "smart-crud-list-standard-page", providers: [
+        CrudListGroupService
+    ], usesInheritance: true, ngImport: i0, template: "<smart-crud-filters-config></smart-crud-filters-config>\n<smart-list *ngIf=\"listOptions\"\n            [hidden]=\"!(!config.list?.groups || (isSearch$ | async))\"\n            [options]=\"listOptions\"\n></smart-list>\n<smart-crud-group *ngIf=\"config.list?.groups && !(isSearch$ | async)\"\n                  [groups]=\"config.list?.groups\"\n                  [listOptions]=\"listOptions\"\n>\n</smart-crud-group>", styles: [""], components: [{ type: FiltersConfigComponent, selector: "smart-crud-filters-config" }, { type: i3.ListComponent, selector: "smart-list", inputs: ["options"] }, { type: GroupComponent, selector: "smart-crud-group", inputs: ["groups", "listOptions"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3$1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ListStandardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "smart-crud-list-standard-page", providers: [
+                        CrudListGroupService
+                    ], template: "<smart-crud-filters-config></smart-crud-filters-config>\n<smart-list *ngIf=\"listOptions\"\n            [hidden]=\"!(!config.list?.groups || (isSearch$ | async))\"\n            [options]=\"listOptions\"\n></smart-list>\n<smart-crud-group *ngIf=\"config.list?.groups && !(isSearch$ | async)\"\n                  [groups]=\"config.list?.groups\"\n                  [listOptions]=\"listOptions\"\n>\n</smart-crud-group>", styles: [""] }]
+        }], ctorParameters: function () { return [{ type: CrudFacade }, { type: CrudFullConfig }]; } });
+
+class ListComponent extends CreateDynamicComponent('crud-list-page') {
+    constructor(facade, router, dynamicComponentLoader, injector, cd, menuService, hardwareService, paginationFacade, styleService, elementRef, pageService, config, searchService, moduleRef, componentFactoryResolver) {
+        super(cd, moduleRef, componentFactoryResolver);
+        this.facade = facade;
+        this.router = router;
+        this.dynamicComponentLoader = dynamicComponentLoader;
+        this.injector = injector;
+        this.cd = cd;
+        this.menuService = menuService;
+        this.hardwareService = hardwareService;
+        this.paginationFacade = paginationFacade;
+        this.styleService = styleService;
+        this.elementRef = elementRef;
+        this.pageService = pageService;
+        this.config = config;
+        this.searchService = searchService;
+        this.moduleRef = moduleRef;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.filter$ = this.facade.filter$.pipe(tap((filter) => {
+            this.filter = filter;
+        }));
+        this.dynamicContents = new QueryList();
+        this.facade.links$.pipe(this.takeUntilDestroy).subscribe((links) => {
+            this.links = links;
+        });
+    }
+    refreshProperties() {
+        this.baseInstance.listOptions = this.listOptions;
+    }
+    ngOnInit() {
+        var _a, _b, _c, _d, _e, _f, _g;
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.pageService.checkPermissions();
+            let newFilter = null;
+            if (((_a = this.config.list) === null || _a === void 0 ? void 0 : _a.resetQuery) === 'beforeInit') {
+                newFilter = Object.assign({ query: this.config.baseQuery ? [...this.config.baseQuery] : [], paginationMode: this.config.list.paginationMode, limit: this.config.pagination ? this.config.pagination.limit : null, offset: this.config.pagination ? 0 : null, sortBy: this.config.sort ? this.config.sort["default"] : null, sortDesc: this.config.sort ? this.config.sort["defaultDesc"] : null }, this.searchService.filter);
+            }
+            else if (this.filter) {
+                newFilter = this.filter;
+            }
+            else {
+                newFilter = Object.assign({ paginationMode: this.config.list.paginationMode, limit: ((_b = this.searchService.filter) === null || _b === void 0 ? void 0 : _b.limit) ? this.searchService.filter.limit : this.config.pagination
+                        ? this.config.pagination.limit : null, offset: ((_c = this.searchService.filter) === null || _c === void 0 ? void 0 : _c.offset) || ((_d = this.searchService.filter) === null || _d === void 0 ? void 0 : _d.offset) === 0
+                        ? this.searchService.filter.offset : this.config.pagination ? 0 : null, sortBy: ((_e = this.searchService.filter) === null || _e === void 0 ? void 0 : _e.sortBy) ? this.searchService.filter.sortBy : this.config.sort
+                        ? this.config.sort["default"] : null, sortDesc: ((_f = this.searchService.filter) === null || _f === void 0 ? void 0 : _f.sortDesc) ? this.searchService.filter.sortDesc : this.config.sort
+                        ? this.config.sort["defaultDesc"] : null, query: this.config.baseQuery ? [...this.config.baseQuery] : [] }, this.searchService.filter);
+            }
+            this.facade.read(newFilter);
+            const endButtons = this.getEndButtons();
+            this.pageOptions = {
+                title: this.config.title,
+                search: this.config.search
+                    ? {
+                        text$: this.filter$.pipe(map((f) => (f ? f.searchText : null))),
+                        set: (txt) => {
+                            if (txt !== this.filter.searchText)
+                                this.facade.read(Object.assign(Object.assign({}, this.filter), { searchText: txt, offset: 0 }));
+                        },
+                    }
+                    : null,
+                endButtons: endButtons,
+            };
+            const compiledComponents = yield 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.config.list &&
+                        this.config.list["components"] &&
+                        this.config.list["components"].top
+                        ? [this.config.list["components"].top]
+                        : []),
+                ],
+            });
+            this.listOptions = {
+                provider: {
+                    getData: (filter) => {
+                        const global = Object.assign(Object.assign({}, this.filter), filter);
+                        this.facade.read(global);
+                    },
+                    onChangeMultiSelected: (list) => __awaiter(this, void 0, void 0, function* () {
+                        if (list.length && !this.menuService.openedEnd) {
+                            yield this.menuService.openEnd({
+                                injector: this.injector,
+                                component: MultiselectComponent,
+                            });
+                        }
+                        else if (!list.length && this.menuService.openedEnd) {
+                            yield this.menuService.closeEnd();
+                        }
+                        this.facade.multiSelect(list);
+                    }),
+                    list$: this.facade.list$,
+                    loading$: this.facade.loaded$.pipe(map((l) => !l)),
+                },
+                cellPipe: this.config.list ? this.config.list.cellPipe : null,
+                mode: (_g = this.config.list) === null || _g === void 0 ? void 0 : _g.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.loaded$.pipe(map((l) => !l)),
+                        },
+                        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
+                                : null,
+                            bottom: this.config.details &&
+                                this.config.details["components"] &&
+                                this.config.details["components"].bottom
+                                ? compiledComponents.find((cc) => cc.component ===
+                                    this.config.details["components"].bottom).factory
+                                : null,
+                        },
+                    }
+                    : null,
+                item: !!this.config.edit || this.config.details
+                    ? {
+                        options: {
+                            routingPrefix: "/" + this.router.routerState.snapshot.url + "/",
+                            edit: !!this.config.edit,
+                        },
+                    }
+                    : null,
+                remove: this.config.remove
+                    ? {
+                        provider: {
+                            invoke: (id) => this.facade.delete(id),
+                        },
+                    }
+                    : null,
+                pagination: yield 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(() => __awaiter(this, void 0, void 0, function* () {
+            yield this.clear();
+        }));
+    }
+    clear() {
+        return __awaiter(this, void 0, void 0, function* () {
+            yield this.menuService.closeEnd();
+            this.listOptions = Object.assign(Object.assign({}, this.listOptions), { select: null });
+            this.facade.multiSelect([]);
+        });
+    }
+    getEndButtons() {
+        var _a, _b, _c, _d, _e;
+        const fieldsWithOptions = getModelFieldsWithOptions(new this.config.type());
+        const modelOptions = getModelOptions(this.config.type);
+        const showFilters = fieldsWithOptions.some((x) => { var _a, _b; return (_b = (_a = x.options) === null || _a === void 0 ? void 0 : _a.list) === null || _b === void 0 ? void 0 : _b.filter; }) || ((_a = modelOptions === null || modelOptions === void 0 ? void 0 : modelOptions.filters) === null || _a === void 0 ? void 0 : _a.length);
+        const showMultiEdit = this.config.edit &&
+            fieldsWithOptions.some((x) => { var _a, _b; return (_b = (_a = x.options) === null || _a === void 0 ? void 0 : _a.update) === null || _b === void 0 ? void 0 : _b.multi; }) &&
+            !this.hardwareService.isMobile &&
+            (!((_c = (_b = this.config) === null || _b === void 0 ? void 0 : _b.list) === null || _c === void 0 ? void 0 : _c.mode) ||
+                ((_e = (_d = this.config) === null || _d === void 0 ? void 0 : _d.list) === null || _e === void 0 ? void 0 : _e.mode) === ListMode.desktop);
+        return [
+            ...(showMultiEdit
+                ? [
+                    {
+                        icon: "checkbox-outline",
+                        text: "multi",
+                        handler: () => __awaiter(this, void 0, void 0, function* () {
+                            this.listOptions = Object.assign(Object.assign({}, this.listOptions), { select: this.listOptions.select === "multi" ? null : "multi" });
+                            this.facade.multiSelect([]);
+                            if (this.menuService.openedEnd)
+                                yield this.menuService.closeEnd();
+                            this.cd.detectChanges();
+                        }),
+                    },
+                ]
+                : []),
+            ...(showFilters
+                ? [
+                    {
+                        icon: "filter-outline",
+                        text: "filters",
+                        handler: () => __awaiter(this, void 0, void 0, function* () {
+                            yield 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 &&
+            this.config.list["components"] &&
+            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);
+            }
+        });
+    }
+}
+/** @nocollapse */ /** @nocollapse */ ListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ListComponent, deps: [{ token: CrudFacade }, { token: i1$2.Router }, { token: i3.DynamicComponentLoader }, { token: i0.Injector }, { token: i0.ChangeDetectorRef }, { token: i3.MenuService }, { token: i3.HardwareService }, { token: CrudListPaginationFactory }, { token: i3.StyleService }, { token: i0.ElementRef }, { token: PageService }, { token: CrudFullConfig }, { token: CrudSearchService }, { token: i0.NgModuleRef }, { token: i0.ComponentFactoryResolver }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ ListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ListComponent, selector: "smart-crud-list-page", viewQueries: [{ propertyName: "topTpl", first: true, predicate: ["topTpl"], descendants: true, read: ViewContainerRef }, { propertyName: "contentTpl", first: true, predicate: ["contentTpl"], descendants: true, read: TemplateRef }, { propertyName: "dynamicContents", predicate: DynamicContentDirective, descendants: true, read: DynamicContentDirective }], usesInheritance: true, ngImport: i0, template: `
+    <smart-page [options]="pageOptions" *ngIf="filter$ | async">
+      <div #topTpl></div>
+      <smart-crud-list-standard-page *ngIf="template === 'default'" [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, components: [{ type: i3.PageComponent, selector: "smart-page", inputs: ["options"] }, { type: ListStandardComponent, selector: "smart-crud-list-standard-page" }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.DynamicContentDirective, selector: ".dynamic-content" }], pipes: { "async": i3$1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ListComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "smart-crud-list-page",
+                    template: `
+    <smart-page [options]="pageOptions" *ngIf="filter$ | async">
+      <div #topTpl></div>
+      <smart-crud-list-standard-page *ngIf="template === 'default'" [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: function () { return [{ type: CrudFacade }, { type: i1$2.Router }, { type: i3.DynamicComponentLoader }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i3.MenuService }, { type: i3.HardwareService }, { type: CrudListPaginationFactory }, { type: i3.StyleService }, { type: i0.ElementRef }, { type: PageService }, { type: CrudFullConfig }, { type: CrudSearchService }, { type: i0.NgModuleRef }, { type: i0.ComponentFactoryResolver }]; }, propDecorators: { topTpl: [{
+                type: ViewChild,
+                args: ["topTpl", { read: ViewContainerRef, static: false }]
+            }], contentTpl: [{
+                type: ViewChild,
+                args: ["contentTpl", { read: TemplateRef, static: false }]
+            }], dynamicContents: [{
+                type: ViewChildren,
+                args: [DynamicContentDirective, { read: DynamicContentDirective }]
+            }] } });
+
+class CrudItemPageBaseComponent extends BaseComponent$1 {
+    constructor(config, facade) {
+        super();
+        this.config = config;
+        this.facade = facade;
+        this.formComponents = new QueryList();
+        this.onPartialChange = new EventEmitter();
+        this.onChange = new EventEmitter();
+        this.onValidChange = new EventEmitter();
+        this.selected$ = facade.selected$;
+    }
+}
+CrudItemPageBaseComponent.smartType = "crud-item-page";
+/** @nocollapse */ /** @nocollapse */ CrudItemPageBaseComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudItemPageBaseComponent, deps: [{ token: CrudFullConfig }, { token: CrudFacade }], target: i0.ɵɵFactoryTarget.Directive });
+/** @nocollapse */ /** @nocollapse */ CrudItemPageBaseComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.2.7", type: CrudItemPageBaseComponent, inputs: { detailsOptions: "detailsOptions", mode: "mode", uniqueProvider: "uniqueProvider" }, outputs: { onPartialChange: "onPartialChange", onChange: "onChange", onValidChange: "onValidChange" }, viewQueries: [{ propertyName: "contentTpl", first: true, predicate: ["contentTpl"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "formComponents", predicate: FormComponent, descendants: true, read: FormComponent }], usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudItemPageBaseComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: CrudFullConfig }, { type: CrudFacade }]; }, propDecorators: { contentTpl: [{
+                type: ViewChild,
+                args: ["contentTpl", { read: ViewContainerRef, static: true }]
+            }], formComponents: [{
+                type: ViewChildren,
+                args: [FormComponent, { read: FormComponent }]
+            }], detailsOptions: [{
+                type: Input
+            }], mode: [{
+                type: Input
+            }], uniqueProvider: [{
+                type: Input
+            }], onPartialChange: [{
+                type: Output
+            }], onChange: [{
+                type: Output
+            }], onValidChange: [{
+                type: Output
+            }] } });
+
+class ItemStandardComponent extends CrudItemPageBaseComponent {
+}
+/** @nocollapse */ /** @nocollapse */ ItemStandardComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ItemStandardComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ ItemStandardComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ItemStandardComponent, selector: "smart-crud-item-standard-page", usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"mode === 'details'; else editTpl\">\n    <smart-details *ngIf=\"detailsOptions\" [options]='detailsOptions'></smart-details>\n</ng-container>\n\n<ng-template #editTpl>\n    <smart-form\n            [options]=\"\n          (selected$ | async)\n          | smartFormOptions : mode:config?.type:uniqueProvider : config.inputComponents\n        \"\n            (valuePartialChange)=\"onPartialChange.emit($event)\"\n            (valueChange)=\"onChange.emit($event)\"\n            (validChange)=\"onValidChange.emit($event)\"\n    ></smart-form>\n</ng-template>\n\n<br/><br/>", styles: [""], components: [{ type: i3.DetailsComponent, selector: "smart-details", inputs: ["options"] }, { type: i3.FormComponent, selector: "smart-form", inputs: ["options"], outputs: ["invokeSubmit", "valueChange", "valuePartialChange", "validChange"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "smartFormOptions": FormOptionsPipe, "async": i3$1.AsyncPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ItemStandardComponent, decorators: [{
+            type: Component,
+            args: [{ selector: "smart-crud-item-standard-page", template: "<ng-container *ngIf=\"mode === 'details'; else editTpl\">\n    <smart-details *ngIf=\"detailsOptions\" [options]='detailsOptions'></smart-details>\n</ng-container>\n\n<ng-template #editTpl>\n    <smart-form\n            [options]=\"\n          (selected$ | async)\n          | smartFormOptions : mode:config?.type:uniqueProvider : config.inputComponents\n        \"\n            (valuePartialChange)=\"onPartialChange.emit($event)\"\n            (valueChange)=\"onChange.emit($event)\"\n            (validChange)=\"onValidChange.emit($event)\"\n    ></smart-form>\n</ng-template>\n\n<br/><br/>", styles: [""] }]
+        }] });
+
+class ItemComponent extends CreateDynamicComponent('crud-item-page') {
+    constructor(router, activeRoute, facade, service, route, dynamicComponentLoader, translateService, config, location, cd, authService, styleService, elementRef, toastService, pageService, moduleRef, componentFactoryResolver, detailsService) {
+        super(cd, moduleRef, componentFactoryResolver);
+        this.router = router;
+        this.activeRoute = activeRoute;
+        this.facade = facade;
+        this.service = service;
+        this.route = route;
+        this.dynamicComponentLoader = dynamicComponentLoader;
+        this.translateService = translateService;
+        this.config = config;
+        this.location = location;
+        this.cd = cd;
+        this.styleService = styleService;
+        this.elementRef = elementRef;
+        this.toastService = toastService;
+        this.pageService = pageService;
+        this.moduleRef = moduleRef;
+        this.componentFactoryResolver = componentFactoryResolver;
+        this.detailsService = detailsService;
+        this.pageOptions = {
+            title: "",
+            showBackButton: true,
+            hideMenuButton: true,
+        };
+        this.formValid = false;
+        this.standardComponents = new QueryList();
+        this.dynamicContents = new QueryList();
+        this.selected$ = this.facade.selected$;
+    }
+    set mode(val) {
+        this._mode = val;
+        this.refreshDynamicInstance();
+    }
+    get mode() {
+        return this._mode;
+    }
+    refreshProperties() {
+        this.baseInstance.detailsOptions = this.detailsOptions;
+        this.baseInstance.mode = this.mode;
+        this.baseInstance.uniqueProvider = this.uniqueProvider;
+        this.baseInstance.onPartialChange.pipe(this.takeUntilDestroy).subscribe(val => this.onPartialChange(val));
+        this.baseInstance.onChange.pipe(this.takeUntilDestroy).subscribe(val => this.onChange(val));
+        this.baseInstance.onValidChange.pipe(this.takeUntilDestroy).subscribe(val => this.onValidChange(val));
+    }
+    ngOnInit() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.detailsService.init();
+            this.styleService.init(this.elementRef);
+            this.pageService.checkPermissions();
+            if (this.router.routerState.snapshot.url.endsWith("/add")) {
+                this.mode = "create";
+                yield this.generateComponents('add');
+            }
+            else {
+                this.mode = this.config.details ? "details" : "update";
+                if (this.mode === 'update') {
+                    yield 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 = (values) => __awaiter(this, void 0, void 0, function* () {
+                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 } = yield this.service.getList(filter).toPromise();
+                return !totalCount;
+            });
+            if (this.config.details) {
+                const compiledComponents = yield 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 = {
+                    type: this.config.type,
+                    item$: this.facade.selected$,
+                    cellPipe: this.config.details ? this.config.details.cellPipe : null,
+                    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
+                            : null,
+                        bottom: this.config.details &&
+                            this.config.details["components"] &&
+                            this.config.details["components"].bottom
+                            ? compiledComponents.find((cc) => cc.component === this.config.details["components"].bottom).factory
+                            : null,
+                    },
+                };
+            }
+            this.initPageOptions();
+            this.facade.selected$.pipe(this.takeUntilDestroy).subscribe(item => {
+                this.item = item;
+                this.initPageOptions();
+                this.cd.detectChanges();
+            });
+            this.refreshDynamicInstance();
+        });
+    }
+    generateComponents(mode) {
+        var _a, _b;
+        return __awaiter(this, void 0, void 0, function* () {
+            const compiledComponents = yield 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 = (_a = compiledComponents.find((cc) => { var _a; return cc.component === ((_a = this.config[mode]["components"]) === null || _a === void 0 ? void 0 : _a.top); })) === null || _a === void 0 ? void 0 : _a.factory;
+            const bottomComponentFactory = (_b = compiledComponents.find((cc) => { var _a; return cc.component === ((_a = this.config[mode]["components"]) === null || _a === void 0 ? void 0 : _a.bottom); })) === null || _b === void 0 ? void 0 : _b.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 = Object.assign(Object.assign({}, this.pageOptions), { title: this.getTitle(), endButtons: this.getButtons() });
+    }
+    getButtons() {
+        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
+                    ? [
+                        {
+                            icon: "create",
+                            text: "edit",
+                            handler: () => {
+                                this.mode = "update";
+                                this.generateComponents('edit');
+                                this.initPageOptions();
+                            },
+                            disabled$: new BehaviorSubject(false),
+                        },
+                    ]
+                    : [];
+        }
+    }
+    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");
+        }
+    }
+    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.first.formComponents.first.form
+            : this.baseInstance.formComponents.first.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) {
+        var _a;
+        if (control.valid)
+            return;
+        const field = key ? baseField + ' > ' + this.translateService.instant('MODEL.' + key) : baseField;
+        if ((_a = control.errors) === null || _a === void 0 ? void 0 : _a.customMessage) {
+            invalidFields.push(field + ` (${control.errors.customMessage})`);
+            return;
+        }
+        if (control instanceof FormControl) {
+            invalidFields.push(field);
+        }
+        if (control instanceof FormGroup) {
+            Object.keys(control.controls).forEach(groupKey => {
+                this.getInvalidFields(control.controls[groupKey], invalidFields, field, groupKey);
+            });
+        }
+        if (control instanceof FormArray) {
+            control.controls.forEach((c, index) => {
+                this.getInvalidFields(c, invalidFields, field + `(${index + 1})`);
+            });
+        }
+    }
+}
+/** @nocollapse */ /** @nocollapse */ ItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ItemComponent, deps: [{ token: i1$2.Router }, { token: i1$2.ActivatedRoute }, { token: CrudFacade }, { token: CrudService }, { token: i1$2.ActivatedRoute }, { token: i3.DynamicComponentLoader }, { token: i4.TranslateService }, { token: CrudFullConfig }, { token: i3$1.Location }, { token: i0.ChangeDetectorRef }, { token: i3.AuthService }, { token: i3.StyleService }, { token: i0.ElementRef }, { token: i3.ToastService }, { token: PageService }, { token: i0.NgModuleRef }, { token: i0.ComponentFactoryResolver }, { token: i3.DetailsService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ ItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: ItemComponent, selector: "smart-crud-item-page", viewQueries: [{ propertyName: "content", first: true, predicate: IonContent, descendants: true, static: true }, { propertyName: "contentTpl", first: true, predicate: ["contentTpl"], descendants: true, read: TemplateRef }, { propertyName: "topTpl", first: true, predicate: ["topTpl"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "bottomTpl", first: true, predicate: ["bottomTpl"], descendants: true, read: ViewContainerRef, static: true }, { propertyName: "standardComponents", predicate: ItemStandardComponent, descendants: true, read: ItemStandardComponent }, { propertyName: "dynamicContents", predicate: DynamicContentDirective, descendants: true, read: DynamicContentDirective }], usesInheritance: true, ngImport: i0, template: `
+    <smart-page [options]="pageOptions">
+      <div #topTpl class="top-content"></div>
+      <smart-crud-item-standard-page *ngIf="template === 'default'"
+                                     [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="bottom-content"></div>
+    </smart-page>
+  `, isInline: true, components: [{ type: i3.PageComponent, selector: "smart-page", inputs: ["options"] }, { type: ItemStandardComponent, selector: "smart-crud-item-standard-page" }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i3.DynamicContentDirective, selector: ".dynamic-content" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: ItemComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: "smart-crud-item-page",
+                    template: `
+    <smart-page [options]="pageOptions">
+      <div #topTpl class="top-content"></div>
+      <smart-crud-item-standard-page *ngIf="template === 'default'"
+                                     [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="bottom-content"></div>
+    </smart-page>
+  `
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.Router }, { type: i1$2.ActivatedRoute }, { type: CrudFacade }, { type: CrudService }, { type: i1$2.ActivatedRoute }, { type: i3.DynamicComponentLoader }, { type: i4.TranslateService }, { type: CrudFullConfig }, { type: i3$1.Location }, { type: i0.ChangeDetectorRef }, { type: i3.AuthService }, { type: i3.StyleService }, { type: i0.ElementRef }, { type: i3.ToastService }, { type: PageService }, { type: i0.NgModuleRef }, { type: i0.ComponentFactoryResolver }, { type: i3.DetailsService }]; }, propDecorators: { standardComponents: [{
+                type: ViewChildren,
+                args: [ItemStandardComponent, { read: ItemStandardComponent }]
+            }], content: [{
+                type: ViewChild,
+                args: [IonContent, { static: true }]
+            }], contentTpl: [{
+                type: ViewChild,
+                args: ["contentTpl", { read: TemplateRef, static: false }]
+            }], topTpl: [{
+                type: ViewChild,
+                args: ["topTpl", { read: ViewContainerRef, static: true }]
+            }], bottomTpl: [{
+                type: ViewChild,
+                args: ["bottomTpl", { read: ViewContainerRef, static: true }]
+            }], dynamicContents: [{
+                type: ViewChildren,
+                args: [DynamicContentDirective, { read: DynamicContentDirective }]
+            }] } });
+
+const PAGES = [
+    ItemComponent,
+    ListComponent,
+    ListStandardComponent,
+    ItemStandardComponent
+];
+class CrudFullModule {
+    constructor(store, config, effects) {
+        NgrxStoreService.addReducer(config.entity, config.reducerFactory
+            ? config.reducerFactory()
+            : getReducer(config.entity));
+        effects.init();
+    }
+}
+/** @nocollapse */ /** @nocollapse */ CrudFullModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudFullModule, deps: [{ token: i1.Store }, { token: CrudConfig }, { token: CrudEffects }], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ CrudFullModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudFullModule, declarations: [ItemComponent,
+        ListComponent,
+        ListStandardComponent,
+        ItemStandardComponent], imports: [StoreModule,
+        SharedModule,
+        CrudPipesModule, i1$2.RouterModule, FormsModule,
+        CommonModule,
+        CrudComponentsModule], exports: [ItemComponent,
+        ListComponent,
+        ListStandardComponent,
+        ItemStandardComponent, CrudComponentsModule] });
+/** @nocollapse */ /** @nocollapse */ CrudFullModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudFullModule, providers: [
+        CrudService,
+        CrudListGroupService,
+        PageService,
+        CrudEffects,
+        CrudFacade,
+        CrudListPaginationFactory,
+    ], imports: [[
+            StoreModule,
+            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: "13.2.7", ngImport: i0, type: CrudFullModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ...PAGES
+                    ],
+                    imports: [
+                        StoreModule,
+                        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,
+                        CrudEffects,
+                        CrudFacade,
+                        CrudListPaginationFactory,
+                    ]
+                }]
+        }], ctorParameters: function () { return [{ type: i1.Store }, { type: CrudConfig }, { type: CrudEffects }]; } });
+
+class CrudCoreModule {
+    constructor(config, effects) {
+        NgrxStoreService.addReducer(config.entity, config.reducerFactory
+            ? config.reducerFactory()
+            : getReducer(config.entity));
+        effects.init();
+    }
+}
+/** @nocollapse */ /** @nocollapse */ CrudCoreModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudCoreModule, deps: [{ token: CrudConfig }, { token: CrudEffects }], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ CrudCoreModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudCoreModule, imports: [
+        //AuthSharedModule,
+        StoreModule,
+        SharedModule,
+        CrudPipesModule,
+        FormsModule,
+        CommonModule,
+        CrudComponentsModule,
+        NgrxSharedModule
+    ], exports: [CrudComponentsModule] });
+/** @nocollapse */ /** @nocollapse */ CrudCoreModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudCoreModule, providers: [
+        CrudService,
+        CrudListGroupService,
+        PageService,
+        CrudEffects,
+        CrudFacade,
+        SocketService,
+        CrudListPaginationFactory,
+    ], imports: [[
+            //AuthSharedModule,
+            StoreModule,
+            SharedModule,
+            CrudPipesModule,
+            FormsModule,
+            CommonModule,
+            CrudComponentsModule,
+            NgrxSharedModule,
+        ], CrudComponentsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudCoreModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        //AuthSharedModule,
+                        StoreModule,
+                        SharedModule,
+                        CrudPipesModule,
+                        FormsModule,
+                        CommonModule,
+                        CrudComponentsModule,
+                        NgrxSharedModule,
+                    ],
+                    exports: [CrudComponentsModule],
+                    providers: [
+                        CrudService,
+                        CrudListGroupService,
+                        PageService,
+                        CrudEffects,
+                        CrudFacade,
+                        SocketService,
+                        CrudListPaginationFactory,
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: CrudConfig }, { type: CrudEffects }]; } });
+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 },
+                },
+                ...(options.socket
+                    ? [SocketService]
+                    : [{ provide: SocketService, useClass: NotSocketService }]),
+            ],
+        };
+    }
+}
+/** @nocollapse */ /** @nocollapse */ CrudModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+/** @nocollapse */ /** @nocollapse */ CrudModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudModule });
+/** @nocollapse */ /** @nocollapse */ CrudModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudModule, decorators: [{
+            type: NgModule,
+            args: [{}]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CRUD_MODEL_POSSIBILITIES_PROVIDER, CrudComponentsModule, CrudConfig, CrudCoreModule, CrudEffects, CrudFacade, CrudFullConfig, CrudFullModule, CrudItemPageBaseComponent, CrudListPageBaseComponent, CrudListPaginationFactory, CrudModule, CrudPipesModule, CrudSearchService, CrudService, ExportComponent, FilterCheckComponent, FilterComponent, FilterDateComponent, FilterDateWithEditComponent, FilterFlagComponent, FilterIntComponent, FilterRadioComponent, FilterTextComponent, FiltersComponent, FiltersConfigComponent, FormOptionsPipe, GroupComponent, ICrudModelPossibilitiesProvider, ItemComponent, ItemStandardComponent, ListComponent, ListStandardComponent, MultiselectComponent, PAGES, PageService, create, createFailure, createMany, createManyFailure, createManySuccess, createSuccess, deleteFailure, deleteItem, deleteSuccess, exportList, exportListFailure, exportListSuccess, getCrudError, getCrudFilter, getCrudLinks, getCrudList, getCrudLoaded, getCrudMultiSelected, getCrudSelected, getCrudState, getCrudTotalCount, getReducer, initialState, multiSelect, read, readFailure, readSuccess, select, selectFailure, selectSuccess, unselect, update, updateFailure, updatePartial, updatePartialFailure, updatePartialMany, updatePartialManyFailure, updatePartialManySuccess, updatePartialSuccess, updateSuccess };
+//# sourceMappingURL=smartsoft001-crud-shell-angular.mjs.map