@smartsoft001/crud-shell-angular 2.81.0 → 2.82.0

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

@@ -1,9 +1,9 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, computed, ElementRef, Component, input, Directive, signal, InjectionToken, Pipe, NgModule, viewChild, viewChildren, output, ChangeDetectorRef, effect, Injector } from '@angular/core';
-import { PaginationMode, BaseComponent as BaseComponent$1, PopoverService, StyleService, ButtonComponent, MenuService, FormComponent, AccordionComponent, AccordionHeaderComponent, AccordionBodyComponent, ListComponent as ListComponent$1, SharedModule, DetailsComponent, AuthService, CreateDynamicComponent, DynamicComponentLoader, ToastService, DetailsService, DynamicContentDirective, PageComponent, HardwareService, ListMode, FILE_SERVICE_CONFIG } from '@smartsoft001/angular';
-import { patchState, signalStore, withState, withComputed, withMethods } from '@ngrx/signals';
-import { HttpClient } from '@angular/common/http';
-import { firstValueFrom, Subscription, BehaviorSubject, combineLatest, Subject } from 'rxjs';
+import { Injectable, inject, ElementRef, Component, input, Directive, computed, signal, InjectionToken, Pipe, NgModule, viewChild, viewChildren, output, ChangeDetectorRef, effect, Injector } from '@angular/core';
+import { NgrxStoreService, BaseComponent as BaseComponent$1, PopoverService, StyleService, ButtonComponent, MenuService, FormComponent, AccordionComponent, AccordionHeaderComponent, AccordionBodyComponent, ListComponent as ListComponent$1, SharedModule, DetailsComponent, AuthService, CreateDynamicComponent, DynamicComponentLoader, ToastService, DetailsService, DynamicContentDirective, PageComponent, HardwareService, ListMode, FILE_SERVICE_CONFIG } from '@smartsoft001/angular';
+import { toSignal } from '@angular/core/rxjs-interop';
+import * as i1 from '@ngrx/store';
+import { createFeatureSelector, createSelector, select as select$1 } from '@ngrx/store';
 import { map } from 'rxjs/operators';
 import { FieldType, getModelOptions, getModelFieldsWithOptions } from '@smartsoft001/models';
 import { TranslateService, TranslatePipe } from '@ngx-translate/core';
@@ -12,10 +12,12 @@ import { Debounce, debounce } from 'lodash-decorators';
 import { FormsModule, UntypedFormControl, UntypedFormGroup, UntypedFormArray } from '@angular/forms';
 import * as moment from 'moment';
 import { GuidService, SpecificationService } from '@smartsoft001/utils';
+import { Subscription, firstValueFrom, BehaviorSubject, combineLatest, Subject } from 'rxjs';
 import { NgComponentOutlet, NgClass, CommonModule, NgTemplateOutlet, Location } from '@angular/common';
 import * as _ from 'lodash';
 import { DynamicIoDirective, DynamicIoModule } from 'ng-dynamic-component';
-import * as i1 from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+import * as i1$1 from '@angular/router';
 import { Router, ActivatedRoute, RouterModule } from '@angular/router';
 
 class CrudConfig {
@@ -50,376 +52,284 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
             type: Injectable
         }] });
 
-class CrudService {
-    config = inject((CrudConfig));
-    http = inject(HttpClient);
-    _formatMap = {
-        csv: 'text/csv',
-        xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+/*
+ * Create
+ */
+const create = function (entity, item) {
+    return {
+        type: `[${entity}] Create`,
+        item,
     };
-    create(item) {
-        return firstValueFrom(this.http
-            .post(this.config.apiUrl, item, { observe: 'response' })
-            .pipe(map((response) => {
-            const location = response.headers['Location'];
-            if (!location)
-                return null;
-            const array = location.split('/');
-            return array[array.length - 1];
-        })));
+};
+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) {
+    return {
+        type: `[${entity}] Read`,
+        filter: 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,
+    };
+};
+/*
+ * Clear
+ */
+const clear = function (entity) {
+    return {
+        type: `[${entity}] Clear`,
+    };
+};
+/*
+ * Export
+ */
+const exportList = function (entity, filter = null, format) {
+    return {
+        type: `[${entity}] Export`,
+        filter: 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,
+    };
+};
+
+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);
+
+class CrudFacade {
+    store;
+    config;
+    constructor(store, config) {
+        this.store = store;
+        this.config = config;
+        if (NgrxStoreService.store) {
+            this.store = NgrxStoreService.store;
+        }
     }
-    createMany(items, options) {
-        return firstValueFrom(this.http.post(this.config.apiUrl + '/bulk?mode=' + options.mode, items));
+    get loaded() {
+        return toSignal(this.store.pipe(select$1(getCrudLoaded(this.config.entity))));
     }
-    getById(id) {
-        return firstValueFrom(this.http.get(this.config.apiUrl + '/' + id));
+    get loading() {
+        return toSignal(this.store.pipe(select$1(getCrudLoaded(this.config.entity)), map((l) => !l)));
     }
-    getList(filter = null) {
-        return firstValueFrom(this.http.get(this.config.apiUrl + this.getQuery(filter)));
+    get selected() {
+        return toSignal(this.store.pipe(select$1(getCrudSelected(this.config.entity))));
     }
-    exportList(filter = null, format) {
-        if (!format) {
-            format = 'csv';
-        }
-        if (format === 'xlsx') {
-            return firstValueFrom(this.http
-                .get(this.config.apiUrl + this.getQuery(filter), {
-                headers: {
-                    'Content-Type': this._formatMap[format],
-                },
-                observe: 'response',
-                reportProgress: false,
-                responseType: 'blob',
-            })
-                .pipe(map((res) => {
-                const downloadLink = document.createElement('a');
-                const blob = res.body;
-                downloadLink.href = URL.createObjectURL(blob);
-                downloadLink.download = 'data.' + format;
-                document.body.appendChild(downloadLink);
-                downloadLink.click();
-                document.body.removeChild(downloadLink);
-            })));
-        }
-        return firstValueFrom(this.http
-            .get(this.config.apiUrl + this.getQuery(filter), {
-            headers: {
-                'Content-Type': this._formatMap[format],
-            },
-            responseType: 'text',
-        })
-            .pipe(map((res) => {
-            const downloadLink = document.createElement('a');
-            const blob = new Blob(['\ufeff', res]);
-            downloadLink.href = URL.createObjectURL(blob);
-            downloadLink.download = 'data.' + format;
-            document.body.appendChild(downloadLink);
-            downloadLink.click();
-            document.body.removeChild(downloadLink);
-        })));
+    get multiSelected() {
+        return toSignal(this.store.pipe(select$1(getCrudMultiSelected(this.config.entity))));
     }
-    update(item) {
-        return firstValueFrom(this.http.put(this.config.apiUrl + '/' + item.id, item));
+    get list() {
+        return toSignal(this.store.pipe(select$1(getCrudList(this.config.entity))));
     }
-    updatePartial(item) {
-        return firstValueFrom(this.http.patch(this.config.apiUrl + '/' + item.id, item));
+    get filter() {
+        return toSignal(this.store.pipe(select$1(getCrudFilter(this.config.entity))));
     }
-    updatePartialMany(items) {
-        const updatePromises = items.map((item) => {
-            return this.updatePartial(item);
-        });
-        return Promise.all(updatePromises);
+    get totalCount() {
+        return toSignal(this.store.pipe(select$1(getCrudTotalCount(this.config.entity))));
     }
-    delete(id) {
-        return firstValueFrom(this.http.delete(this.config.apiUrl + '/' + id));
+    get links() {
+        return toSignal(this.store.pipe(select$1(getCrudLinks(this.config.entity))));
     }
-    getQuery(filter) {
-        let query = '';
-        if (filter && filter.searchText) {
-            query += '&$search=' + filter.searchText;
-        }
-        if (filter && filter.limit) {
-            query += `&limit=${filter.limit}&offset=${filter.offset ? filter.offset : 0}`;
-        }
-        if (filter && filter.sortBy) {
-            query += `&sort=${(filter.sortDesc ? '-' : '') + filter.sortBy}`;
-        }
-        if (filter && filter.query) {
-            filter.query.forEach((q) => {
-                if (q.value &&
-                    typeof q.value === 'string' &&
-                    q.value.match(/^-?\d+$/) &&
-                    q.value[0] !== "'" &&
-                    q.value[0] !== '"') {
-                    query += '&' + q.key + q.type + `'${q.value}'`;
-                }
-                else {
-                    query += '&' + q.key + q.type + q.value;
-                }
-            });
-        }
-        return query ? '?' + query.replace('&', '') : '';
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudService });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudService, decorators: [{
-            type: Injectable
-        }] });
-
-// "Actions, Reducers, Effects" in a normal store
-function CrudMethodsFactory() {
-    return (store, crudService = inject((CrudService))) => {
-        const methods = {
-            async create(item) {
-                patchState(store, {
-                    loaded: false,
-                    error: null,
-                });
-                try {
-                    await crudService.create(item);
-                    await this.createSuccess();
-                }
-                catch (error) {
-                    methods.defaultFailure(error);
-                }
-            },
-            async createSuccess() {
-                patchState(store, {
-                    loaded: true,
-                    error: null,
-                });
-                await methods.read(store.filter ? { ...store.filter, offset: 0 } : null);
-            },
-            async createMany(data) {
-                patchState(store, {
-                    loaded: false,
-                    error: null,
-                });
-                try {
-                    await crudService.createMany(data.items, data.options);
-                    await methods.createManySuccess();
-                }
-                catch (e) {
-                    methods.defaultFailure(e);
-                }
-            },
-            async createManySuccess() {
-                patchState(store, {
-                    loaded: true,
-                    error: null,
-                });
-                await methods.read(store.filter ? { ...store.filter, offset: 0 } : null);
-            },
-            async export(filter, format) {
-                patchState(store, {
-                    loaded: false,
-                });
-                try {
-                    await crudService.exportList(filter, format);
-                    methods.exportSuccess();
-                }
-                catch (e) {
-                    methods.defaultFailure(e);
-                }
-            },
-            exportSuccess() {
-                patchState(store, {
-                    loaded: true,
-                });
-            },
-            async read(filter) {
-                patchState(store, {
-                    loaded: false,
-                    filter,
-                    error: null,
-                    totalCount: null,
-                    links: null,
-                });
-                try {
-                    const result = await crudService.getList(filter);
-                    methods.readSuccess({
-                        list: result.data,
-                        filter,
-                        totalCount: result.totalCount,
-                        links: result.links,
-                    });
-                }
-                catch (error) {
-                    methods.defaultFailure(error);
-                }
-            },
-            readSuccess(data) {
-                let list = [];
-                if (data.filter?.offset &&
-                    store.list() &&
-                    data.filter.paginationMode !== PaginationMode.singlePage) {
-                    list = [...store.list(), ...data.list];
-                }
-                else {
-                    list = data.list;
-                }
-                patchState(store, {
-                    loaded: true,
-                    list,
-                    totalCount: data.totalCount,
-                    links: data.links,
-                    error: null,
-                });
-            },
-            clear() {
-                store.set(() => ({ ...initialState }));
-            },
-            async select(id) {
-                patchState(store, {
-                    loaded: false,
-                    selected: null,
-                    error: null,
-                });
-                try {
-                    const result = await crudService.getById(id);
-                    methods.selectSuccess(result);
-                }
-                catch (e) {
-                    methods.defaultFailure(e);
-                }
-            },
-            selectSuccess(selected) {
-                patchState(store, {
-                    loaded: true,
-                    selected,
-                    error: null,
-                });
-            },
-            unselect() {
-                patchState(store, {
-                    loaded: true,
-                    selected: null,
-                    error: null,
-                });
-            },
-            multiSelect(items) {
-                patchState(store, {
-                    multiSelected: [...items],
-                });
-            },
-            async update(item) {
-                patchState(store, {
-                    loaded: false,
-                    error: null,
-                });
-                try {
-                    await crudService.updatePartial(item);
-                    await methods.updateSuccess(item.id);
-                }
-                catch (e) {
-                    methods.defaultFailure(e);
-                }
-            },
-            async updateSuccess(id) {
-                await methods.read({ ...store.filter, offset: 0 });
-                await methods.select(id);
-            },
-            async updatePartial(item) {
-                patchState(store, {
-                    loaded: false,
-                    error: null,
-                });
-                try {
-                    await crudService.updatePartial(item);
-                    await methods.updatePartialSuccess(item.id);
-                }
-                catch (e) {
-                    methods.defaultFailure(e);
-                }
-            },
-            async updatePartialSuccess(id) {
-                await methods.read({ ...store.filter, offset: 0 });
-                await methods.select(id);
-            },
-            async updatePartialMany(items) {
-                patchState(store, {
-                    loaded: false,
-                    error: null,
-                });
-                try {
-                    await crudService.updatePartialMany(items);
-                    await methods.updatePartialManySuccess();
-                }
-                catch (e) {
-                    methods.defaultFailure(e);
-                }
-            },
-            async updatePartialManySuccess() {
-                await methods.read({ ...store.filter, offset: 0 });
-            },
-            async delete(id) {
-                patchState(store, {
-                    loaded: false,
-                    error: null,
-                });
-                try {
-                    await crudService.delete(id);
-                    await methods.deleteSuccess();
-                }
-                catch (e) {
-                    methods.defaultFailure(e);
-                }
-            },
-            async deleteSuccess() {
-                await methods.read({ ...store.filter, offset: 0 });
-            },
-            defaultFailure(error) {
-                patchState(store, {
-                    loaded: true,
-                    error,
-                });
-            },
-        };
-        return methods;
-    };
-}
-
-const initialState = {
-    loaded: false,
-};
-function createCrudFeatureStore() {
-    return signalStore({ providedIn: 'root' }, withState(initialState), withComputed((store) => {
-        return {
-            getError: computed(() => (store.error ? store.error() : null)),
-            getLoaded: computed(() => store.loaded()),
-            getSelected: computed(() => store.selected ? store.selected() : undefined),
-            getMultiSelected: computed(() => store.multiSelected ? store.multiSelected() : undefined),
-            getList: computed(() => (store.list ? store.list() : undefined)),
-            getTotalCount: computed(() => store.totalCount ? store.totalCount() : undefined),
-            getLinks: computed(() => (store.links ? store.links() : undefined)),
-            getFilter: computed(() => (store.filter ? store.filter() : undefined)),
-        };
-    }), withMethods(CrudMethodsFactory()));
-}
-
-class CrudFacade {
-    config;
-    store = createCrudFeatureStore();
-    loaded = this.store.getLoaded;
-    loading = computed(() => !this.store.getLoaded(), ...(ngDevMode ? [{ debugName: "loading" }] : []));
-    selected = this.store.getSelected;
-    multiSelected = this.store.getMultiSelected;
-    list = this.store.getList;
-    filter = this.store.getFilter;
-    totalCount = this.store.getTotalCount;
-    links = this.store.getLinks;
-    error = this.store.getError;
-    constructor(config) {
-        this.config = config;
+    get error() {
+        return toSignal(this.store.pipe(select$1(getCrudError(this.config.entity))));
     }
     create(item) {
-        this.store.create(item);
+        this.store.dispatch(create(this.config.entity, item));
     }
     createMany(items, options) {
-        this.store.createMany({ items, options });
+        this.store.dispatch(createMany(this.config.entity, { items, options }));
     }
-    read(filter = null) {
+    read(filter = {}) {
         let baseQuery = [];
         if (this.config.baseQuery) {
             baseQuery = this.config.baseQuery;
@@ -428,41 +338,46 @@ class CrudFacade {
             ...(filter ? filter : {}),
             query: filter && filter.query ? filter.query : baseQuery,
         };
-        this.store.read(fullFilter);
+        this.store.dispatch(read(this.config.entity, fullFilter));
     }
     clear() {
-        this.store.clear();
+        this.store.dispatch(clear(this.config.entity));
     }
     select(id) {
-        this.store.select(id);
+        this.store.dispatch(select(this.config.entity, id));
     }
     unselect() {
-        this.store.unselect();
+        this.store.dispatch(unselect(this.config.entity));
     }
     multiSelect(items) {
-        this.store.multiSelect(items);
+        this.store.dispatch(multiSelect(this.config.entity, items));
     }
     update(item) {
-        this.store.update(item);
+        this.getStore().dispatch(update(this.config.entity, item));
     }
-    export(filter = null, format = null) {
-        this.store.export(filter || {}, format);
+    export(filter = {}, format) {
+        this.getStore().dispatch(exportList(this.config.entity, filter, format));
     }
     updatePartial(item) {
-        this.store.updatePartial(item);
+        this.getStore().dispatch(updatePartial(this.config.entity, item));
     }
     updatePartialMany(items) {
-        this.store.updatePartialMany(items);
+        this.getStore().dispatch(updatePartialMany(this.config.entity, items));
     }
     delete(id) {
-        this.store.delete(id);
+        this.getStore().dispatch(deleteItem(this.config.entity, id));
+    }
+    getStore() {
+        if (NgrxStoreService.store)
+            return NgrxStoreService.store;
+        return this.store;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudFacade, deps: [{ token: CrudConfig }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudFacade, deps: [{ token: i1.Store }, { token: CrudConfig }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudFacade });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudFacade, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: CrudConfig }] });
+        }], ctorParameters: () => [{ type: i1.Store }, { type: CrudConfig }] });
 
 class ExportComponent extends BaseComponent$1 {
     facade = inject((CrudFacade));
@@ -485,7 +400,7 @@ class ExportComponent extends BaseComponent$1 {
                 const loading = this.facade.loading();
                 if (loading)
                     return;
-                this.popoverService.close();
+                this.popoverService.close().then();
             },
             loading: this.facade.loading,
             expand: 'block',
@@ -1230,11 +1145,13 @@ class FiltersComponent {
     <!--  </ion-list>-->
     <div class="h-20">&nbsp;</div>
     <!--</ion-content>-->
-  `, isInline: true, styles: [":host ion-toolbar.ios{height:4.6rem}:host ion-toolbar ion-buttons.ios{height:var(--smart-button-height);margin:0}\n"], dependencies: [{ kind: "component", type: FilterComponent, selector: "smart-crud-filter", inputs: ["item", "filter"] }] });
+  `, isInline: true, dependencies: [{ kind: "component", type: FilterComponent, selector: "smart-crud-filter", inputs: ["item", "filter"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: FiltersComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-crud-filters', template: `
+            args: [{
+                    selector: 'smart-crud-filters',
+                    template: `
     <!--<ion-header [hidden]="hideMenu()">-->
     <!--  <ion-toolbar>-->
     <!--    <ion-buttons slot="end">-->
@@ -1253,7 +1170,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
     <!--  </ion-list>-->
     <div class="h-20">&nbsp;</div>
     <!--</ion-content>-->
-  `, imports: [FilterComponent, TranslatePipe], styles: [":host ion-toolbar.ios{height:4.6rem}:host ion-toolbar ion-buttons.ios{height:var(--smart-button-height);margin:0}\n"] }]
+  `,
+                    imports: [FilterComponent],
+                }]
         }] });
 
 class FiltersConfigComponent {
@@ -1440,7 +1359,7 @@ class MultiselectComponent {
         this.valid = valid;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: MultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: MultiselectComponent, isStandalone: true, selector: "smart-crud-multiselect", ngImport: i0, template: "@let list = this.list();\n@if (list) {\n  <!--  <ion-header>-->\n  <!--    <ion-toolbar>-->\n  <!--      <ion-buttons slot=\"end\">-->\n  <!--        <ion-button (click)=\"onClose()\">-->\n  <!--          <ion-icon slot=\"icon-only\" name=\"close\"> </ion-icon>-->\n  <!--        </ion-button>-->\n  <!--      </ion-buttons>-->\n  <!--<ion-title>-->{{ 'selected' | translate }}: {{ list?.length\n  }}<!--</ion-title>-->\n  <!--    </ion-toolbar>-->\n  <!--  </ion-header>-->\n\n  @if (config?.list?.components?.multi) {\n    <div>\n      <ng-template\n        [ngComponentOutlet]=\"config?.list?.components?.multi\"\n        [ndcDynamicInputs]=\"{ items: list }\"\n      ></ng-template>\n    </div>\n  }\n\n  @if (showForm && item) {\n    <div>\n      <smart-form\n        [options]=\"item | smartFormOptions: 'multiUpdate' : config.type\"\n        (valuePartialChange)=\"onPartialChange($event, list)\"\n        (validChange)=\"onValidChange($event)\"\n      ></smart-form>\n\n      <smart-button\n        style=\"float: right\"\n        [disabled]=\"lock || !valid\"\n        [options]=\"buttonOptions\"\n      >\n        {{ 'change' | translate }}\n      </smart-button>\n    </div>\n  }\n}\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: DynamicIoDirective, selector: "[ndcDynamicInputs],[ndcDynamicOutputs]", inputs: ["ndcDynamicInputs", "ndcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "component", type: FormComponent, selector: "smart-form", inputs: ["options"], outputs: ["invokeSubmit", "valueChange", "valuePartialChange", "validChange"] }, { kind: "component", type: ButtonComponent, selector: "smart-button", inputs: ["options", "disabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FormOptionsPipe, name: "smartFormOptions" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.0", type: MultiselectComponent, isStandalone: true, selector: "smart-crud-multiselect", ngImport: i0, template: "@let list = this.list();\n@if (list) {\n  <!--  <ion-header>-->\n  <!--    <ion-toolbar>-->\n  <!--      <ion-buttons slot=\"end\">-->\n  <!--        <ion-button (click)=\"onClose()\">-->\n  <!--          <ion-icon slot=\"icon-only\" name=\"close\"> </ion-icon>-->\n  <!--        </ion-button>-->\n  <!--      </ion-buttons>-->\n  <!--<ion-title>-->{{ 'selected' | translate }}: {{ list?.length\n  }}<!--</ion-title>-->\n  <!--    </ion-toolbar>-->\n  <!--  </ion-header>-->\n\n  @if (config?.list?.components?.multi) {\n    <div>\n      <ng-template\n        [ngComponentOutlet]=\"config?.list?.components?.multi\"\n        [ndcDynamicInputs]=\"{ items: list }\"\n      ></ng-template>\n    </div>\n  }\n\n  @if (showForm && item) {\n    <div>\n      <smart-form\n        [options]=\"item | smartFormOptions: 'multiUpdate' : config.type\"\n        (valuePartialChange)=\"onPartialChange($event, list)\"\n        (validChange)=\"onValidChange($event)\"\n      ></smart-form>\n\n      <smart-button\n        style=\"float: right\"\n        [disabled]=\"lock || !valid\"\n        [options]=\"buttonOptions\"\n      >\n        {{ 'change' | translate }}\n      </smart-button>\n    </div>\n  }\n}\n", dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: DynamicIoDirective, selector: "[ndcDynamicInputs],[ndcDynamicOutputs]", inputs: ["ndcDynamicInputs", "ndcDynamicOutputs"], exportAs: ["ndcDynamicIo"] }, { kind: "component", type: FormComponent, selector: "smart-form", inputs: ["options"], outputs: ["invokeSubmit", "valueChange", "valuePartialChange", "validChange"] }, { kind: "component", type: ButtonComponent, selector: "smart-button", inputs: ["options", "disabled"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "pipe", type: FormOptionsPipe, name: "smartFormOptions" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
@@ -1666,6 +1585,123 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImpor
             type: Injectable
         }] });
 
+class CrudService {
+    config = inject((CrudConfig));
+    http = inject(HttpClient);
+    _formatMap = {
+        csv: 'text/csv',
+        xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+    };
+    create(item) {
+        return firstValueFrom(this.http
+            .post(this.config.apiUrl, item, { observe: 'response' })
+            .pipe(map((response) => {
+            const location = response.headers['Location'];
+            if (!location)
+                return null;
+            const array = location.split('/');
+            return array[array.length - 1];
+        })));
+    }
+    createMany(items, options) {
+        return firstValueFrom(this.http.post(this.config.apiUrl + '/bulk?mode=' + options.mode, items));
+    }
+    getById(id) {
+        return firstValueFrom(this.http.get(this.config.apiUrl + '/' + id));
+    }
+    getList(filter = null) {
+        return firstValueFrom(this.http.get(this.config.apiUrl + this.getQuery(filter)));
+    }
+    exportList(filter = null, format) {
+        if (!format) {
+            format = 'csv';
+        }
+        if (format === 'xlsx') {
+            return firstValueFrom(this.http
+                .get(this.config.apiUrl + this.getQuery(filter), {
+                headers: {
+                    'Content-Type': this._formatMap[format],
+                },
+                observe: 'response',
+                reportProgress: false,
+                responseType: 'blob',
+            })
+                .pipe(map((res) => {
+                const downloadLink = document.createElement('a');
+                const blob = res.body;
+                downloadLink.href = URL.createObjectURL(blob);
+                downloadLink.download = 'data.' + format;
+                document.body.appendChild(downloadLink);
+                downloadLink.click();
+                document.body.removeChild(downloadLink);
+            })));
+        }
+        return firstValueFrom(this.http
+            .get(this.config.apiUrl + this.getQuery(filter), {
+            headers: {
+                'Content-Type': this._formatMap[format],
+            },
+            responseType: 'text',
+        })
+            .pipe(map((res) => {
+            const downloadLink = document.createElement('a');
+            const blob = new Blob(['\ufeff', res]);
+            downloadLink.href = URL.createObjectURL(blob);
+            downloadLink.download = 'data.' + format;
+            document.body.appendChild(downloadLink);
+            downloadLink.click();
+            document.body.removeChild(downloadLink);
+        })));
+    }
+    update(item) {
+        return firstValueFrom(this.http.put(this.config.apiUrl + '/' + item.id, item));
+    }
+    updatePartial(item) {
+        return firstValueFrom(this.http.patch(this.config.apiUrl + '/' + item.id, item));
+    }
+    updatePartialMany(items) {
+        const updatePromises = items.map((item) => {
+            return this.updatePartial(item);
+        });
+        return Promise.all(updatePromises);
+    }
+    delete(id) {
+        return firstValueFrom(this.http.delete(this.config.apiUrl + '/' + id));
+    }
+    getQuery(filter) {
+        let query = '';
+        if (filter && filter.searchText) {
+            query += '&$search=' + filter.searchText;
+        }
+        if (filter && filter.limit) {
+            query += `&limit=${filter.limit}&offset=${filter.offset ? filter.offset : 0}`;
+        }
+        if (filter && filter.sortBy) {
+            query += `&sort=${(filter.sortDesc ? '-' : '') + filter.sortBy}`;
+        }
+        if (filter && filter.query) {
+            filter.query.forEach((q) => {
+                if (q.value &&
+                    typeof q.value === 'string' &&
+                    q.value.match(/^-?\d+$/) &&
+                    q.value[0] !== "'" &&
+                    q.value[0] !== '"') {
+                    query += '&' + q.key + q.type + `'${q.value}'`;
+                }
+                else {
+                    query += '&' + q.key + q.type + q.value;
+                }
+            });
+        }
+        return query ? '?' + query.replace('&', '') : '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.0", ngImport: i0, type: CrudService, decorators: [{
+            type: Injectable
+        }] });
+
 const COMPONENTS = [
     ExportComponent,
     FilterComponent,
@@ -2720,7 +2756,7 @@ class CrudFullModule {
             ListComponent,
             ListStandardComponent,
             ItemStandardComponent, SharedModule,
-            CrudPipesModule, i1.RouterModule, FormsModule,
+            CrudPipesModule, i1$1.RouterModule, FormsModule,
             CommonModule,
             CrudComponentsModule], exports: [ItemComponent,
             ListComponent,