@smartsoft001/crud-shell-angular 1.1.595 → 1.1.602

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

@@ -1,6 +1,6 @@
 import { createFeatureSelector, createSelector, select as select$1, Store, ActionsSubject, State, StoreModule } from '@ngrx/store';
-import { Injectable, Component, ElementRef, Input, InjectionToken, Directive, Optional, Inject, ViewChild, ChangeDetectorRef, Pipe, NgModule, Injector, ViewContainerRef, QueryList, ViewChildren } from '@angular/core';
-import { NgrxStoreService, BaseComponent as BaseComponent$1, PopoverService, StyleService, MenuService, AuthService, ListMode, DynamicComponentLoader, HardwareService, ToastService, FormComponent, SharedModule, NgrxSharedModule, FILE_SERVICE_CONFIG } from '@smartsoft001/angular';
+import { Injectable, Component, ElementRef, Input, InjectionToken, Directive, Optional, Inject, ViewChild, ChangeDetectorRef, Pipe, NgModule, Injector, NgModuleRef, ComponentFactoryResolver, ViewContainerRef, QueryList, ViewChildren } from '@angular/core';
+import { NgrxStoreService, BaseComponent as BaseComponent$1, PopoverService, StyleService, MenuService, SharedModule, AuthService, CreateDynamicComponent, ListMode, DynamicComponentLoader, HardwareService, FormComponent, ToastService, NgrxSharedModule, FILE_SERVICE_CONFIG } from '@smartsoft001/angular';
 import { map, tap, first, catchError } from 'rxjs/operators';
 import { FieldType, getModelOptions, getModelFieldsWithOptions } from '@smartsoft001/models';
 import * as moment from 'moment';
@@ -9,10 +9,10 @@ import { Debounce } from 'lodash-decorators';
 import { IonDatetime, IonContent } from '@ionic/angular';
 import { Subscription, combineLatest, forkJoin, of, BehaviorSubject } from 'rxjs';
 import * as _ from 'lodash';
-import { FormControl, FormGroup, FormArray, FormsModule } from '@angular/forms';
-import { Location, CommonModule } from '@angular/common';
-import 'reflect-metadata';
+import { FormsModule, FormControl, FormGroup, FormArray } from '@angular/forms';
+import { CommonModule, Location } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
+import 'reflect-metadata';
 import { Router, ActivatedRoute, RouterModule } from '@angular/router';
 import { TranslateService } from '@ngx-translate/core';
 
@@ -961,6 +961,74 @@ NotSocketService.decorators = [
     { type: Injectable }
 ];
 
+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,
+            };
+        }
+    }
+}
+/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+FormOptionsPipe.decorators = [
+    { type: Pipe, args: [{
+                name: "smartFormOptions",
+            },] }
+];
+/**
+ * @type {function(): !Array<(null|{
+ *   type: ?,
+ *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+ * })>}
+ * @nocollapse
+ */
+FormOptionsPipe.ctorParameters = () => [
+    { type: ICrudModelPossibilitiesProvider, decorators: [{ type: Optional }, { type: Inject, args: [CRUD_MODEL_POSSIBILITIES_PROVIDER,] }] }
+];
+
+class CrudPipesModule {
+}
+/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+CrudPipesModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    FormOptionsPipe
+                ],
+                exports: [
+                    FormOptionsPipe
+                ]
+            },] }
+];
+
 class CrudService {
     constructor(config, http, socket) {
         this.config = config;
@@ -1258,6 +1326,120 @@ CrudEffects.ctorParameters = () => [
     { type: State }
 ];
 
+class CrudListPaginationFactory {
+    constructor(facade) {
+        this.facade = facade;
+    }
+    create(options) {
+        return __awaiter(this, void 0, void 0, function* () {
+            return {
+                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;
+                })),
+            };
+        });
+    }
+}
+/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+CrudListPaginationFactory.decorators = [
+    { type: Injectable }
+];
+/**
+ * @type {function(): !Array<(null|{
+ *   type: ?,
+ *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+ * })>}
+ * @nocollapse
+ */
+CrudListPaginationFactory.ctorParameters = () => [
+    { type: CrudFacade }
+];
+
+const COMPONENTS = [
+    ExportComponent,
+    FilterComponent,
+    FilterTextComponent,
+    FiltersConfigComponent,
+    FilterDateComponent,
+    FilterDateWithEditComponent,
+    FilterRadioComponent,
+    FiltersComponent,
+    FilterFlagComponent,
+    FilterCheckComponent,
+    MultiselectComponent,
+    GroupComponent
+];
+class CrudComponentsModule {
+}
+/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+CrudComponentsModule.decorators = [
+    { type: NgModule, args: [{
+                declarations: [
+                    ...COMPONENTS
+                ],
+                entryComponents: [
+                    ...COMPONENTS
+                ],
+                imports: [
+                    //AuthSharedModule,
+                    StoreModule,
+                    SharedModule,
+                    CrudPipesModule,
+                    FormsModule,
+                    CommonModule
+                ],
+                exports: [
+                    CrudPipesModule,
+                    ...COMPONENTS
+                ],
+                providers: [
+                    CrudService,
+                    CrudEffects,
+                    CrudFacade,
+                    SocketService,
+                    CrudListPaginationFactory,
+                ],
+            },] }
+];
+
 const initialState = {
     loaded: false
 };
@@ -1345,86 +1527,13 @@ function getReducer(entity) {
     };
 }
 
-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,
-            };
-        }
-    }
-}
-/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-FormOptionsPipe.decorators = [
-    { type: Pipe, args: [{
-                name: "smartFormOptions",
-            },] }
-];
-/**
- * @type {function(): !Array<(null|{
- *   type: ?,
- *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
- * })>}
- * @nocollapse
- */
-FormOptionsPipe.ctorParameters = () => [
-    { type: ICrudModelPossibilitiesProvider, decorators: [{ type: Optional }, { type: Inject, args: [CRUD_MODEL_POSSIBILITIES_PROVIDER,] }] }
-];
-
-class CrudPipesModule {
-}
-/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-CrudPipesModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    FormOptionsPipe
-                ],
-                exports: [
-                    FormOptionsPipe
-                ]
-            },] }
-];
-
-class PageBaseComponent extends BaseComponent$1 {
+class PageService {
     constructor(authService, config) {
-        super();
         this.authService = authService;
         this.config = config;
     }
-    ngOnInit() {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.checkPermissions(this.config);
-        });
-    }
-    checkPermissions(val) {
+    checkPermissions() {
+        const val = this.config;
         const modelOptions = getModelOptions(val.type);
         if (val.add &&
             modelOptions.create &&
@@ -1447,8 +1556,8 @@ class PageBaseComponent extends BaseComponent$1 {
     }
 }
 /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-PageBaseComponent.decorators = [
-    { type: Directive }
+PageService.decorators = [
+    { type: Injectable }
 ];
 /**
  * @type {function(): !Array<(null|{
@@ -1457,81 +1566,14 @@ PageBaseComponent.decorators = [
  * })>}
  * @nocollapse
  */
-PageBaseComponent.ctorParameters = () => [
+PageService.ctorParameters = () => [
     { type: AuthService },
     { type: CrudFullConfig }
 ];
 
-class CrudListPaginationFactory {
-    constructor(facade) {
-        this.facade = facade;
-    }
-    create(options) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return {
-                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;
-                })),
-            };
-        });
-    }
-}
-/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-CrudListPaginationFactory.decorators = [
-    { type: Injectable }
-];
-/**
- * @type {function(): !Array<(null|{
- *   type: ?,
- *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
- * })>}
- * @nocollapse
- */
-CrudListPaginationFactory.ctorParameters = () => [
-    { type: CrudFacade }
-];
-
-class ListComponent extends PageBaseComponent {
-    constructor(facade, router, dynamicComponentLoader, injector, cd, menuService, hardwareService, paginationFacade, styleService, elementRef, config, authService) {
-        super(authService, config);
+class ListComponent extends CreateDynamicComponent('crud-list-page') {
+    constructor(facade, router, dynamicComponentLoader, injector, cd, menuService, hardwareService, paginationFacade, styleService, elementRef, pageService, config, moduleRef, componentFactoryResolver) {
+        super(cd, moduleRef, componentFactoryResolver);
         this.facade = facade;
         this.router = router;
         this.dynamicComponentLoader = dynamicComponentLoader;
@@ -1542,7 +1584,10 @@ class ListComponent extends PageBaseComponent {
         this.paginationFacade = paginationFacade;
         this.styleService = styleService;
         this.elementRef = elementRef;
+        this.pageService = pageService;
         this.config = config;
+        this.moduleRef = moduleRef;
+        this.componentFactoryResolver = componentFactoryResolver;
         this.filter$ = this.facade.filter$.pipe(tap((filter) => {
             this.filter = filter;
         }));
@@ -1550,13 +1595,13 @@ class ListComponent extends PageBaseComponent {
             this.links = links;
         });
     }
+    refreshProperties() {
+        this.baseInstance.listOptions = this.listOptions;
+    }
     ngOnInit() {
-        const _super = Object.create(null, {
-            ngOnInit: { get: () => super.ngOnInit }
-        });
         var _a;
         return __awaiter(this, void 0, void 0, function* () {
-            yield _super.ngOnInit.call(this);
+            yield this.pageService.checkPermissions();
             this.facade.read({
                 limit: this.config.pagination ? this.config.pagination.limit : null,
                 offset: this.config.pagination ? 0 : null,
@@ -1674,6 +1719,7 @@ class ListComponent extends PageBaseComponent {
             this.cd.detectChanges();
             this.initCloseMenu();
             this.initTopComponent(compiledComponents);
+            this.refreshDynamicInstance();
         });
     }
     initCloseMenu() {
@@ -1771,8 +1817,18 @@ class ListComponent extends PageBaseComponent {
 ListComponent.decorators = [
     { type: Component, args: [{
                 selector: "smart-crud-list-page",
-                template: "<smart-page [options]=\"pageOptions\" *ngIf=\"filter$ | async\">\n    <div #topTpl></div>\n    <smart-crud-filters-config></smart-crud-filters-config>\n    <smart-list *ngIf=\"listOptions\" [hidden]=\"config.list?.groups\" [options]=\"listOptions\"></smart-list>\n    <smart-crud-group *ngIf=\"config.list?.groups\" [groups]=\"config.list?.groups\" [listOptions]=\"listOptions\">\n    </smart-crud-group>\n</smart-page>\n",
-                styles: [""]
+                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 #customTpl></div>
+    </smart-page>
+  `
             },] }
 ];
 /**
@@ -1793,17 +1849,67 @@ ListComponent.ctorParameters = () => [
     { type: CrudListPaginationFactory },
     { type: StyleService },
     { type: ElementRef },
+    { type: PageService },
     { type: CrudFullConfig },
-    { type: AuthService }
+    { type: NgModuleRef },
+    { type: ComponentFactoryResolver }
 ];
 /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
 ListComponent.propDecorators = {
     topTpl: [{ type: ViewChild, args: ["topTpl", { read: ViewContainerRef, static: false },] }]
 };
 
-class ItemComponent extends PageBaseComponent {
-    constructor(router, activeRoute, facade, service, route, dynamicComponentLoader, translateService, config, location, cd, authService, styleService, elementRef, toastService) {
-        super(authService, config);
+class CrudItemPageBaseComponent extends BaseComponent$1 {
+    constructor(config, facade) {
+        super();
+        this.config = config;
+        this.facade = facade;
+        this.formComponents = new QueryList();
+        this.selected$ = facade.selected$;
+    }
+}
+CrudItemPageBaseComponent.smartType = "crud-item-page";
+/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+CrudItemPageBaseComponent.decorators = [
+    { type: Directive }
+];
+/**
+ * @type {function(): !Array<(null|{
+ *   type: ?,
+ *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+ * })>}
+ * @nocollapse
+ */
+CrudItemPageBaseComponent.ctorParameters = () => [
+    { type: CrudFullConfig },
+    { type: CrudFacade }
+];
+/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
+CrudItemPageBaseComponent.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: Input }],
+    onChange: [{ type: Input }],
+    onValidChange: [{ type: Input }]
+};
+
+class ItemStandardComponent extends CrudItemPageBaseComponent {
+}
+/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+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($event)\"\n            (valueChange)=\"onChange($event)\"\n            (validChange)=\"onValidChange($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) {
+        super(cd, moduleRef, componentFactoryResolver);
         this.router = router;
         this.activeRoute = activeRoute;
         this.facade = facade;
@@ -1817,22 +1923,37 @@ class ItemComponent extends PageBaseComponent {
         this.styleService = styleService;
         this.elementRef = elementRef;
         this.toastService = toastService;
+        this.pageService = pageService;
+        this.moduleRef = moduleRef;
+        this.componentFactoryResolver = componentFactoryResolver;
         this.pageOptions = {
             title: "",
             showBackButton: true,
             hideMenuButton: true,
         };
         this.formValid = false;
-        this.formComponents = new QueryList();
+        this.standardComponents = 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 = this.onPartialChange;
+        this.baseInstance.onChange = this.onChange;
+        this.baseInstance.onValidChange = this.onValidChange;
+    }
     ngOnInit() {
-        const _super = Object.create(null, {
-            ngOnInit: { get: () => super.ngOnInit }
-        });
         return __awaiter(this, void 0, void 0, function* () {
             this.styleService.init(this.elementRef);
-            yield _super.ngOnInit.call(this);
+            this.pageService.checkPermissions();
             if (this.router.routerState.snapshot.url.endsWith("/add")) {
                 this.mode = "create";
             }
@@ -1905,6 +2026,7 @@ class ItemComponent extends PageBaseComponent {
                 this.initPageOptions();
                 this.cd.detectChanges();
             });
+            this.refreshDynamicInstance();
         });
     }
     onPartialChange(val) {
@@ -2006,7 +2128,9 @@ class ItemComponent extends PageBaseComponent {
         return item.innerHTML;
     }
     checkFirstInvalid() {
-        const form = this.formComponents.first.form;
+        const form = this.template === 'default'
+            ? this.standardComponents.first.formComponents.first.form
+            : this.baseInstance.formComponents.first.form;
         if (form.valid)
             return false;
         const invalidFields = [];
@@ -2040,8 +2164,25 @@ class ItemComponent extends PageBaseComponent {
 ItemComponent.decorators = [
     { type: Component, args: [{
                 selector: "smart-crud-item-page",
-                template: "<smart-page [options]=\"pageOptions\">\n\n  <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($event)\"\n        (valueChange)=\"onChange($event)\"\n        (validChange)=\"onValidChange($event)\"\n      ></smart-form>\n  </ng-template>\n\n    <br/><br/>\n</smart-page>\n",
-                styles: [""]
+                template: `
+    <smart-page [options]="pageOptions">
+      <div #topTpl></div>
+      <smart-crud-item-standard-page *ngIf="template === 'default'"
+                                     [detailsOptions]="detailsOptions"
+                                     [mode]="mode"
+                                     [uniqueProvider]="uniqueProvider"
+                                     [onPartialChange]="onPartialChange"
+                                     [onChange]="onPartialChange"
+                                     [onValidChange]="onValidChange"
+      >
+        <ng-container [ngTemplateOutlet]="contentTpl"></ng-container>
+      </smart-crud-item-standard-page>
+      <ng-template #contentTpl>
+        <ng-content></ng-content>
+      </ng-template>
+      <div #customTpl></div>
+    </smart-page>
+  `
             },] }
 ];
 /**
@@ -2065,64 +2206,60 @@ ItemComponent.ctorParameters = () => [
     { type: AuthService },
     { type: StyleService },
     { type: ElementRef },
-    { type: ToastService }
+    { type: ToastService },
+    { type: PageService },
+    { type: NgModuleRef },
+    { type: ComponentFactoryResolver }
 ];
 /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
 ItemComponent.propDecorators = {
-    formComponents: [{ type: ViewChildren, args: [FormComponent, { read: FormComponent },] }],
+    standardComponents: [{ type: ViewChildren, args: [ItemStandardComponent, { read: ItemStandardComponent },] }],
     content: [{ type: ViewChild, args: [IonContent, { static: true },] }]
 };
 
-const COMPONENTS = [
-    ExportComponent,
-    FilterComponent,
-    FilterTextComponent,
-    FiltersConfigComponent,
-    FilterDateComponent,
-    FilterDateWithEditComponent,
-    FilterRadioComponent,
-    FiltersComponent,
-    FilterFlagComponent,
-    FilterCheckComponent,
-    MultiselectComponent,
-    GroupComponent
+class CrudListPageBaseComponent extends BaseComponent$1 {
+    constructor(config) {
+        super();
+        this.config = config;
+    }
+}
+CrudListPageBaseComponent.smartType = "crud-list-page";
+/** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+CrudListPageBaseComponent.decorators = [
+    { type: Directive }
 ];
-class CrudComponentsModule {
+/**
+ * @type {function(): !Array<(null|{
+ *   type: ?,
+ *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+ * })>}
+ * @nocollapse
+ */
+CrudListPageBaseComponent.ctorParameters = () => [
+    { type: CrudFullConfig }
+];
+/** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
+CrudListPageBaseComponent.propDecorators = {
+    contentTpl: [{ type: ViewChild, args: ["contentTpl", { read: ViewContainerRef, static: true },] }],
+    listOptions: [{ type: Input }]
+};
+
+class ListStandardComponent extends CrudListPageBaseComponent {
 }
 /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-CrudComponentsModule.decorators = [
-    { type: NgModule, args: [{
-                declarations: [
-                    ...COMPONENTS
-                ],
-                entryComponents: [
-                    ...COMPONENTS
-                ],
-                imports: [
-                    //AuthSharedModule,
-                    StoreModule,
-                    SharedModule,
-                    CrudPipesModule,
-                    FormsModule,
-                    CommonModule
-                ],
-                exports: [
-                    CrudPipesModule,
-                    ...COMPONENTS
-                ],
-                providers: [
-                    CrudService,
-                    CrudEffects,
-                    CrudFacade,
-                    SocketService,
-                    CrudListPaginationFactory,
-                ],
+ListStandardComponent.decorators = [
+    { type: Component, args: [{
+                selector: "smart-crud-list-standard-page",
+                template: "<smart-crud-filters-config></smart-crud-filters-config>\n<smart-list *ngIf=\"listOptions\" [hidden]=\"config.list?.groups\" [options]=\"listOptions\"></smart-list>\n<smart-crud-group *ngIf=\"config.list?.groups\" [groups]=\"config.list?.groups\" [listOptions]=\"listOptions\">\n</smart-crud-group>",
+                styles: [""]
             },] }
 ];
 
 const PAGES = [
     ItemComponent,
-    ListComponent
+    ListComponent,
+    ListStandardComponent,
+    ItemStandardComponent
 ];
 class CrudFullModule {
     constructor(store, config, effects) {
@@ -2155,10 +2292,12 @@ CrudFullModule.decorators = [
                     CrudComponentsModule
                 ],
                 exports: [
-                    ...PAGES
+                    ...PAGES,
+                    CrudComponentsModule
                 ],
                 providers: [
                     CrudService,
+                    PageService,
                     CrudEffects,
                     CrudFacade,
                     CrudListPaginationFactory,
@@ -2202,6 +2341,7 @@ CrudCoreModule.decorators = [
                 exports: [CrudComponentsModule],
                 providers: [
                     CrudService,
+                    PageService,
                     CrudEffects,
                     CrudFacade,
                     SocketService,
@@ -2247,5 +2387,5 @@ CrudModule.decorators = [
  * Generated bundle index. Do not edit.
  */
 
-export { CRUD_MODEL_POSSIBILITIES_PROVIDER, CrudConfig, CrudCoreModule, CrudEffects, CrudFacade, CrudFullConfig, CrudListPaginationFactory, CrudModule, CrudPipesModule, CrudService, ExportComponent, FilterCheckComponent, FilterComponent, FilterDateComponent, FilterDateWithEditComponent, FilterFlagComponent, FilterRadioComponent, FilterTextComponent, FiltersComponent, FiltersConfigComponent, FormOptionsPipe, GroupComponent, ICrudModelPossibilitiesProvider, MultiselectComponent, 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, ɵ0, CrudPipesModule as ɵa, FormOptionsPipe as ɵb, CrudComponentsModule as ɵc, ExportComponent as ɵd, FilterComponent as ɵe, FilterTextComponent as ɵf, FiltersConfigComponent as ɵg, FilterDateComponent as ɵh, FilterDateWithEditComponent as ɵi, FilterRadioComponent as ɵj, FiltersComponent as ɵk, FilterFlagComponent as ɵl, FilterCheckComponent as ɵm, MultiselectComponent as ɵn, GroupComponent as ɵo, SocketService as ɵp, NotSocketService as ɵq, CrudFullModule as ɵr, ItemComponent as ɵs, PageBaseComponent as ɵt, ListComponent as ɵu };
+export { CRUD_MODEL_POSSIBILITIES_PROVIDER, CrudComponentsModule, CrudConfig, CrudCoreModule, CrudEffects, CrudFacade, CrudFullConfig, CrudItemPageBaseComponent, CrudListPageBaseComponent, CrudListPaginationFactory, CrudModule, CrudPipesModule, CrudService, ExportComponent, FilterCheckComponent, FilterComponent, FilterDateComponent, FilterDateWithEditComponent, FilterFlagComponent, FilterRadioComponent, FilterTextComponent, FiltersComponent, FiltersConfigComponent, FormOptionsPipe, GroupComponent, ICrudModelPossibilitiesProvider, MultiselectComponent, 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, ɵ0, CrudPipesModule as ɵa, FormOptionsPipe as ɵb, CrudComponentsModule as ɵc, ExportComponent as ɵd, FilterComponent as ɵe, FilterTextComponent as ɵf, FiltersConfigComponent as ɵg, FilterDateComponent as ɵh, FilterDateWithEditComponent as ɵi, FilterRadioComponent as ɵj, FiltersComponent as ɵk, FilterFlagComponent as ɵl, FilterCheckComponent as ɵm, MultiselectComponent as ɵn, GroupComponent as ɵo, SocketService as ɵp, NotSocketService as ɵq, CrudFullModule as ɵr, ItemComponent as ɵs, ItemStandardComponent as ɵt, CrudItemPageBaseComponent as ɵu, ListComponent as ɵv, ListStandardComponent as ɵw, CrudListPageBaseComponent as ɵx };
 //# sourceMappingURL=smartsoft001-crud-shell-angular.js.map