@smartsoft001/crud-shell-angular 1.1.595 → 1.1.602

package/bundles/smartsoft001-crud-shell-angular.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@ngrx/store'), require('@angular/core'), require('@smartsoft001/angular'), require('rxjs/operators'), require('@smartsoft001/models'), require('moment'), require('lodash-decorators'), require('@ionic/angular'), require('rxjs'), require('lodash'), require('@angular/forms'), require('@angular/common'), require('reflect-metadata'), require('@angular/common/http'), require('@angular/router'), require('@ngx-translate/core')) :
-    typeof define === 'function' && define.amd ? define('@smartsoft001/crud-shell-angular', ['exports', '@ngrx/store', '@angular/core', '@smartsoft001/angular', 'rxjs/operators', '@smartsoft001/models', 'moment', 'lodash-decorators', '@ionic/angular', 'rxjs', 'lodash', '@angular/forms', '@angular/common', 'reflect-metadata', '@angular/common/http', '@angular/router', '@ngx-translate/core'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.smartsoft001 = global.smartsoft001 || {}, global.smartsoft001["crud-shell-angular"] = {}), global.store, global.ng.core, global.angular, global.rxjs.operators, global.models, global.moment, global.lodashDecorators, global.angular$1, global.rxjs, global._, global.ng.forms, global.ng.common, null, global.ng.common.http, global.ng.router, global.core$1));
-})(this, (function (exports, store, core, angular, operators, models, moment, lodashDecorators, angular$1, rxjs, _, forms, common, reflectMetadata, http, router, core$1) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@ngrx/store'), require('@angular/core'), require('@smartsoft001/angular'), require('rxjs/operators'), require('@smartsoft001/models'), require('moment'), require('lodash-decorators'), require('@ionic/angular'), require('rxjs'), require('lodash'), require('@angular/forms'), require('@angular/common'), require('@angular/common/http'), require('reflect-metadata'), require('@angular/router'), require('@ngx-translate/core')) :
+    typeof define === 'function' && define.amd ? define('@smartsoft001/crud-shell-angular', ['exports', '@ngrx/store', '@angular/core', '@smartsoft001/angular', 'rxjs/operators', '@smartsoft001/models', 'moment', 'lodash-decorators', '@ionic/angular', 'rxjs', 'lodash', '@angular/forms', '@angular/common', '@angular/common/http', 'reflect-metadata', '@angular/router', '@ngx-translate/core'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.smartsoft001 = global.smartsoft001 || {}, global.smartsoft001["crud-shell-angular"] = {}), global.store, global.ng.core, global.angular, global.rxjs.operators, global.models, global.moment, global.lodashDecorators, global.angular$1, global.rxjs, global._, global.ng.forms, global.ng.common, global.ng.common.http, null, global.ng.router, global.core$1));
+})(this, (function (exports, store, core, angular, operators, models, moment, lodashDecorators, angular$1, rxjs, _, forms, common, http, reflectMetadata, router, core$1) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -1389,6 +1389,78 @@
         { type: core.Injectable }
     ];
 
+    var FormOptionsPipe = /** @class */ (function () {
+        function FormOptionsPipe(modelPossibilitiesProvider) {
+            this.modelPossibilitiesProvider = modelPossibilitiesProvider;
+        }
+        FormOptionsPipe.prototype.transform = function (item, mode, type, uniqueProvider, inputComponents) {
+            if (!mode || !type)
+                return null;
+            var possibilities = {};
+            if (type && this.modelPossibilitiesProvider) {
+                possibilities = this.modelPossibilitiesProvider.get(type);
+            }
+            if (mode === "create") {
+                return {
+                    mode: "create",
+                    possibilities: possibilities,
+                    inputComponents: inputComponents,
+                    uniqueProvider: uniqueProvider,
+                    model: new type(),
+                };
+            }
+            else {
+                var model_1 = new type();
+                if (item) {
+                    Object.keys(item).forEach(function (key) {
+                        model_1[key] = item[key];
+                    });
+                }
+                return {
+                    mode: mode,
+                    uniqueProvider: uniqueProvider,
+                    possibilities: possibilities,
+                    inputComponents: inputComponents,
+                    model: model_1,
+                };
+            }
+        };
+        return FormOptionsPipe;
+    }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+    FormOptionsPipe.decorators = [
+        { type: core.Pipe, args: [{
+                    name: "smartFormOptions",
+                },] }
+    ];
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
+    FormOptionsPipe.ctorParameters = function () { return [
+        { type: ICrudModelPossibilitiesProvider, decorators: [{ type: core.Optional }, { type: core.Inject, args: [CRUD_MODEL_POSSIBILITIES_PROVIDER,] }] }
+    ]; };
+
+    var CrudPipesModule = /** @class */ (function () {
+        function CrudPipesModule() {
+        }
+        return CrudPipesModule;
+    }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+    CrudPipesModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: [
+                        FormOptionsPipe
+                    ],
+                    exports: [
+                        FormOptionsPipe
+                    ]
+                },] }
+    ];
+
     var CrudService = /** @class */ (function () {
         function CrudService(config, http, socket) {
             this.config = config;
@@ -1692,6 +1764,123 @@
         { type: store.State }
     ]; };
 
+    var CrudListPaginationFactory = /** @class */ (function () {
+        function CrudListPaginationFactory(facade) {
+            this.facade = facade;
+        }
+        CrudListPaginationFactory.prototype.create = function (options) {
+            return __awaiter(this, void 0, void 0, function () {
+                var _this = this;
+                return __generator(this, function (_a) {
+                    return [2 /*return*/, {
+                            limit: options.limit,
+                            loadNextPage: function () {
+                                if (!options.provider.getLinks() || !options.provider.getLinks().next)
+                                    return Promise.resolve(false);
+                                return new Promise(function (res) {
+                                    var sub = _this.facade.loaded$.subscribe(function (l) {
+                                        if (l) {
+                                            // if (sub && !sub.closed) sub.unsubscribe();
+                                            setTimeout(function () {
+                                                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: function () {
+                                if (!options.provider.getLinks() || !options.provider.getLinks().prev)
+                                    return Promise.resolve(false);
+                                return new Promise(function (res) {
+                                    var sub = _this.facade.loaded$.subscribe(function (l) {
+                                        if (l) {
+                                            // if (sub && !sub.closed) sub.unsubscribe();
+                                            setTimeout(function () {
+                                                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(operators.map(function (f) {
+                                return (f === null || f === void 0 ? void 0 : f.limit) ? f.offset / f.limit + 1 : 0;
+                            })),
+                            totalPages$: rxjs.combineLatest(this.facade.filter$, this.facade.totalCount$).pipe(operators.map(function (_a) {
+                                var _b = __read(_a, 2), filter = _b[0], totalCount = _b[1];
+                                return (filter === null || filter === void 0 ? void 0 : filter.limit) ? Math.ceil(totalCount / filter.limit) : 0;
+                            })),
+                        }];
+                });
+            });
+        };
+        return CrudListPaginationFactory;
+    }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+    CrudListPaginationFactory.decorators = [
+        { type: core.Injectable }
+    ];
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
+    CrudListPaginationFactory.ctorParameters = function () { return [
+        { type: CrudFacade }
+    ]; };
+
+    var COMPONENTS = [
+        ExportComponent,
+        FilterComponent,
+        FilterTextComponent,
+        FiltersConfigComponent,
+        FilterDateComponent,
+        FilterDateWithEditComponent,
+        FilterRadioComponent,
+        FiltersComponent,
+        FilterFlagComponent,
+        FilterCheckComponent,
+        MultiselectComponent,
+        GroupComponent
+    ];
+    var CrudComponentsModule = /** @class */ (function () {
+        function CrudComponentsModule() {
+        }
+        return CrudComponentsModule;
+    }());
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+    CrudComponentsModule.decorators = [
+        { type: core.NgModule, args: [{
+                    declarations: __spreadArray([], __read(COMPONENTS)),
+                    entryComponents: __spreadArray([], __read(COMPONENTS)),
+                    imports: [
+                        //AuthSharedModule,
+                        store.StoreModule,
+                        angular.SharedModule,
+                        CrudPipesModule,
+                        forms.FormsModule,
+                        common.CommonModule
+                    ],
+                    exports: __spreadArray([
+                        CrudPipesModule
+                    ], __read(COMPONENTS)),
+                    providers: [
+                        CrudService,
+                        CrudEffects,
+                        CrudFacade,
+                        SocketService,
+                        CrudListPaginationFactory,
+                    ],
+                },] }
+    ];
+
     var initialState = {
         loaded: false
     };
@@ -1777,95 +1966,13 @@
         };
     }
 
-    var FormOptionsPipe = /** @class */ (function () {
-        function FormOptionsPipe(modelPossibilitiesProvider) {
-            this.modelPossibilitiesProvider = modelPossibilitiesProvider;
-        }
-        FormOptionsPipe.prototype.transform = function (item, mode, type, uniqueProvider, inputComponents) {
-            if (!mode || !type)
-                return null;
-            var possibilities = {};
-            if (type && this.modelPossibilitiesProvider) {
-                possibilities = this.modelPossibilitiesProvider.get(type);
-            }
-            if (mode === "create") {
-                return {
-                    mode: "create",
-                    possibilities: possibilities,
-                    inputComponents: inputComponents,
-                    uniqueProvider: uniqueProvider,
-                    model: new type(),
-                };
-            }
-            else {
-                var model_1 = new type();
-                if (item) {
-                    Object.keys(item).forEach(function (key) {
-                        model_1[key] = item[key];
-                    });
-                }
-                return {
-                    mode: mode,
-                    uniqueProvider: uniqueProvider,
-                    possibilities: possibilities,
-                    inputComponents: inputComponents,
-                    model: model_1,
-                };
-            }
-        };
-        return FormOptionsPipe;
-    }());
-    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-    FormOptionsPipe.decorators = [
-        { type: core.Pipe, args: [{
-                    name: "smartFormOptions",
-                },] }
-    ];
-    /**
-     * @type {function(): !Array<(null|{
-     *   type: ?,
-     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
-     * })>}
-     * @nocollapse
-     */
-    FormOptionsPipe.ctorParameters = function () { return [
-        { type: ICrudModelPossibilitiesProvider, decorators: [{ type: core.Optional }, { type: core.Inject, args: [CRUD_MODEL_POSSIBILITIES_PROVIDER,] }] }
-    ]; };
-
-    var CrudPipesModule = /** @class */ (function () {
-        function CrudPipesModule() {
-        }
-        return CrudPipesModule;
-    }());
-    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-    CrudPipesModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: [
-                        FormOptionsPipe
-                    ],
-                    exports: [
-                        FormOptionsPipe
-                    ]
-                },] }
-    ];
-
-    var PageBaseComponent = /** @class */ (function (_super) {
-        __extends(PageBaseComponent, _super);
-        function PageBaseComponent(authService, config) {
-            var _this = _super.call(this) || this;
-            _this.authService = authService;
-            _this.config = config;
-            return _this;
+    var PageService = /** @class */ (function () {
+        function PageService(authService, config) {
+            this.authService = authService;
+            this.config = config;
         }
-        PageBaseComponent.prototype.ngOnInit = function () {
-            return __awaiter(this, void 0, void 0, function () {
-                return __generator(this, function (_a) {
-                    this.checkPermissions(this.config);
-                    return [2 /*return*/];
-                });
-            });
-        };
-        PageBaseComponent.prototype.checkPermissions = function (val) {
+        PageService.prototype.checkPermissions = function () {
+            var val = this.config;
             var modelOptions = models.getModelOptions(val.type);
             if (val.add &&
                 modelOptions.create &&
@@ -1886,83 +1993,10 @@
                 val.remove = false;
             }
         };
-        return PageBaseComponent;
-    }(angular.BaseComponent));
-    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-    PageBaseComponent.decorators = [
-        { type: core.Directive }
-    ];
-    /**
-     * @type {function(): !Array<(null|{
-     *   type: ?,
-     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
-     * })>}
-     * @nocollapse
-     */
-    PageBaseComponent.ctorParameters = function () { return [
-        { type: angular.AuthService },
-        { type: CrudFullConfig }
-    ]; };
-
-    var CrudListPaginationFactory = /** @class */ (function () {
-        function CrudListPaginationFactory(facade) {
-            this.facade = facade;
-        }
-        CrudListPaginationFactory.prototype.create = function (options) {
-            return __awaiter(this, void 0, void 0, function () {
-                var _this = this;
-                return __generator(this, function (_a) {
-                    return [2 /*return*/, {
-                            limit: options.limit,
-                            loadNextPage: function () {
-                                if (!options.provider.getLinks() || !options.provider.getLinks().next)
-                                    return Promise.resolve(false);
-                                return new Promise(function (res) {
-                                    var sub = _this.facade.loaded$.subscribe(function (l) {
-                                        if (l) {
-                                            // if (sub && !sub.closed) sub.unsubscribe();
-                                            setTimeout(function () {
-                                                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: function () {
-                                if (!options.provider.getLinks() || !options.provider.getLinks().prev)
-                                    return Promise.resolve(false);
-                                return new Promise(function (res) {
-                                    var sub = _this.facade.loaded$.subscribe(function (l) {
-                                        if (l) {
-                                            // if (sub && !sub.closed) sub.unsubscribe();
-                                            setTimeout(function () {
-                                                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(operators.map(function (f) {
-                                return (f === null || f === void 0 ? void 0 : f.limit) ? f.offset / f.limit + 1 : 0;
-                            })),
-                            totalPages$: rxjs.combineLatest(this.facade.filter$, this.facade.totalCount$).pipe(operators.map(function (_a) {
-                                var _b = __read(_a, 2), filter = _b[0], totalCount = _b[1];
-                                return (filter === null || filter === void 0 ? void 0 : filter.limit) ? Math.ceil(totalCount / filter.limit) : 0;
-                            })),
-                        }];
-                });
-            });
-        };
-        return CrudListPaginationFactory;
+        return PageService;
     }());
     /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-    CrudListPaginationFactory.decorators = [
+    PageService.decorators = [
         { type: core.Injectable }
     ];
     /**
@@ -1972,14 +2006,15 @@
      * })>}
      * @nocollapse
      */
-    CrudListPaginationFactory.ctorParameters = function () { return [
-        { type: CrudFacade }
+    PageService.ctorParameters = function () { return [
+        { type: angular.AuthService },
+        { type: CrudFullConfig }
     ]; };
 
-    var ListComponent = /** @class */ (function (_super_1) {
-        __extends(ListComponent, _super_1);
-        function ListComponent(facade, router, dynamicComponentLoader, injector, cd, menuService, hardwareService, paginationFacade, styleService, elementRef, config, authService) {
-            var _this = _super_1.call(this, authService, config) || this;
+    var ListComponent = /** @class */ (function (_super) {
+        __extends(ListComponent, _super);
+        function ListComponent(facade, router, dynamicComponentLoader, injector, cd, menuService, hardwareService, paginationFacade, styleService, elementRef, pageService, config, moduleRef, componentFactoryResolver) {
+            var _this = _super.call(this, cd, moduleRef, componentFactoryResolver) || this;
             _this.facade = facade;
             _this.router = router;
             _this.dynamicComponentLoader = dynamicComponentLoader;
@@ -1990,7 +2025,10 @@
             _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(operators.tap(function (filter) {
                 _this.filter = filter;
             }));
@@ -1999,17 +2037,17 @@
             });
             return _this;
         }
+        ListComponent.prototype.refreshProperties = function () {
+            this.baseInstance.listOptions = this.listOptions;
+        };
         ListComponent.prototype.ngOnInit = function () {
-            var _super = Object.create(null, {
-                ngOnInit: { get: function () { return _super_1.prototype.ngOnInit; } }
-            });
             var _a;
             return __awaiter(this, void 0, void 0, function () {
                 var endButtons, compiledComponents, _f, _g;
                 var _this = this;
                 return __generator(this, function (_h) {
                     switch (_h.label) {
-                        case 0: return [4 /*yield*/, _super.ngOnInit.call(this)];
+                        case 0: return [4 /*yield*/, this.pageService.checkPermissions()];
                         case 1:
                             _h.sent();
                             this.facade.read({
@@ -2143,6 +2181,7 @@
                             this.cd.detectChanges();
                             this.initCloseMenu();
                             this.initTopComponent(compiledComponents);
+                            this.refreshDynamicInstance();
                             return [2 /*return*/];
                     }
                 });
@@ -2267,13 +2306,12 @@
             });
         };
         return ListComponent;
-    }(PageBaseComponent));
+    }(angular.CreateDynamicComponent('crud-list-page')));
     /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     ListComponent.decorators = [
         { type: core.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: "\n    <smart-page [options]=\"pageOptions\" *ngIf=\"filter$ | async\">\n      <div #topTpl></div>\n      <smart-crud-list-standard-page *ngIf=\"template === 'default'\" [listOptions]=\"listOptions\">\n      <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n      </smart-crud-list-standard-page>\n      <ng-template #contentTpl>\n        <ng-content></ng-content>\n      </ng-template>\n      <div #customTpl></div>\n    </smart-page>\n  "
                 },] }
     ];
     /**
@@ -2294,18 +2332,76 @@
         { type: CrudListPaginationFactory },
         { type: angular.StyleService },
         { type: core.ElementRef },
+        { type: PageService },
         { type: CrudFullConfig },
-        { type: angular.AuthService }
+        { type: core.NgModuleRef },
+        { type: core.ComponentFactoryResolver }
     ]; };
     /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     ListComponent.propDecorators = {
         topTpl: [{ type: core.ViewChild, args: ["topTpl", { read: core.ViewContainerRef, static: false },] }]
     };
 
-    var ItemComponent = /** @class */ (function (_super_1) {
-        __extends(ItemComponent, _super_1);
-        function ItemComponent(router, activeRoute, facade, service, route, dynamicComponentLoader, translateService, config, location, cd, authService, styleService, elementRef, toastService) {
-            var _this = _super_1.call(this, authService, config) || this;
+    var CrudItemPageBaseComponent = /** @class */ (function (_super) {
+        __extends(CrudItemPageBaseComponent, _super);
+        function CrudItemPageBaseComponent(config, facade) {
+            var _this = _super.call(this) || this;
+            _this.config = config;
+            _this.facade = facade;
+            _this.formComponents = new core.QueryList();
+            _this.selected$ = facade.selected$;
+            return _this;
+        }
+        return CrudItemPageBaseComponent;
+    }(angular.BaseComponent));
+    CrudItemPageBaseComponent.smartType = "crud-item-page";
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+    CrudItemPageBaseComponent.decorators = [
+        { type: core.Directive }
+    ];
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
+    CrudItemPageBaseComponent.ctorParameters = function () { return [
+        { type: CrudFullConfig },
+        { type: CrudFacade }
+    ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
+    CrudItemPageBaseComponent.propDecorators = {
+        contentTpl: [{ type: core.ViewChild, args: ["contentTpl", { read: core.ViewContainerRef, static: true },] }],
+        formComponents: [{ type: core.ViewChildren, args: [angular.FormComponent, { read: angular.FormComponent },] }],
+        detailsOptions: [{ type: core.Input }],
+        mode: [{ type: core.Input }],
+        uniqueProvider: [{ type: core.Input }],
+        onPartialChange: [{ type: core.Input }],
+        onChange: [{ type: core.Input }],
+        onValidChange: [{ type: core.Input }]
+    };
+
+    var ItemStandardComponent = /** @class */ (function (_super) {
+        __extends(ItemStandardComponent, _super);
+        function ItemStandardComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return ItemStandardComponent;
+    }(CrudItemPageBaseComponent));
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+    ItemStandardComponent.decorators = [
+        { type: core.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: [""]
+                },] }
+    ];
+
+    var ItemComponent = /** @class */ (function (_super) {
+        __extends(ItemComponent, _super);
+        function ItemComponent(router, activeRoute, facade, service, route, dynamicComponentLoader, translateService, config, location, cd, authService, styleService, elementRef, toastService, pageService, moduleRef, componentFactoryResolver) {
+            var _this = _super.call(this, cd, moduleRef, componentFactoryResolver) || this;
             _this.router = router;
             _this.activeRoute = activeRoute;
             _this.facade = facade;
@@ -2319,20 +2415,39 @@
             _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 core.QueryList();
+            _this.standardComponents = new core.QueryList();
             _this.selected$ = _this.facade.selected$;
             return _this;
         }
+        Object.defineProperty(ItemComponent.prototype, "mode", {
+            get: function () {
+                return this._mode;
+            },
+            set: function (val) {
+                this._mode = val;
+                this.refreshDynamicInstance();
+            },
+            enumerable: false,
+            configurable: true
+        });
+        ItemComponent.prototype.refreshProperties = function () {
+            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;
+        };
         ItemComponent.prototype.ngOnInit = function () {
-            var _super = Object.create(null, {
-                ngOnInit: { get: function () { return _super_1.prototype.ngOnInit; } }
-            });
             return __awaiter(this, void 0, void 0, function () {
                 var compiledComponents;
                 var _this = this;
@@ -2340,9 +2455,7 @@
                     switch (_a.label) {
                         case 0:
                             this.styleService.init(this.elementRef);
-                            return [4 /*yield*/, _super.ngOnInit.call(this)];
-                        case 1:
-                            _a.sent();
+                            this.pageService.checkPermissions();
                             if (this.router.routerState.snapshot.url.endsWith("/add")) {
                                 this.mode = "create";
                             }
@@ -2386,7 +2499,7 @@
                                     }
                                 });
                             }); };
-                            if (!this.config.details) return [3 /*break*/, 3];
+                            if (!this.config.details) return [3 /*break*/, 2];
                             return [4 /*yield*/, this.dynamicComponentLoader.getComponentsWithFactories({
                                     components: __spreadArray(__spreadArray([], __read((this.config.details &&
                                         this.config.details["components"] &&
@@ -2398,7 +2511,7 @@
                                         ? [this.config.details["components"].bottom]
                                         : []))),
                                 })];
-                        case 2:
+                        case 1:
                             compiledComponents = _a.sent();
                             this.detailsOptions = {
                                 type: this.config.type,
@@ -2417,14 +2530,15 @@
                                         : null,
                                 },
                             };
-                            _a.label = 3;
-                        case 3:
+                            _a.label = 2;
+                        case 2:
                             this.initPageOptions();
                             this.facade.selected$.pipe(this.takeUntilDestroy).subscribe(function (item) {
                                 _this.item = item;
                                 _this.initPageOptions();
                                 _this.cd.detectChanges();
                             });
+                            this.refreshDynamicInstance();
                             return [2 /*return*/];
                     }
                 });
@@ -2529,7 +2643,9 @@
             return item.innerHTML;
         };
         ItemComponent.prototype.checkFirstInvalid = function () {
-            var form = this.formComponents.first.form;
+            var form = this.template === 'default'
+                ? this.standardComponents.first.formComponents.first.form
+                : this.baseInstance.formComponents.first.form;
             if (form.valid)
                 return false;
             var invalidFields = [];
@@ -2561,13 +2677,12 @@
             }
         };
         return ItemComponent;
-    }(PageBaseComponent));
+    }(angular.CreateDynamicComponent('crud-item-page')));
     /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
     ItemComponent.decorators = [
         { type: core.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: "\n    <smart-page [options]=\"pageOptions\">\n      <div #topTpl></div>\n      <smart-crud-item-standard-page *ngIf=\"template === 'default'\"\n                                     [detailsOptions]=\"detailsOptions\"\n                                     [mode]=\"mode\"\n                                     [uniqueProvider]=\"uniqueProvider\"\n                                     [onPartialChange]=\"onPartialChange\"\n                                     [onChange]=\"onPartialChange\"\n                                     [onValidChange]=\"onValidChange\"\n      >\n        <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n      </smart-crud-item-standard-page>\n      <ng-template #contentTpl>\n        <ng-content></ng-content>\n      </ng-template>\n      <div #customTpl></div>\n    </smart-page>\n  "
                 },] }
     ];
     /**
@@ -2591,62 +2706,68 @@
         { type: angular.AuthService },
         { type: angular.StyleService },
         { type: core.ElementRef },
-        { type: angular.ToastService }
+        { type: angular.ToastService },
+        { type: PageService },
+        { type: core.NgModuleRef },
+        { type: core.ComponentFactoryResolver }
     ]; };
     /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
     ItemComponent.propDecorators = {
-        formComponents: [{ type: core.ViewChildren, args: [angular.FormComponent, { read: angular.FormComponent },] }],
+        standardComponents: [{ type: core.ViewChildren, args: [ItemStandardComponent, { read: ItemStandardComponent },] }],
         content: [{ type: core.ViewChild, args: [angular$1.IonContent, { static: true },] }]
     };
 
-    var COMPONENTS = [
-        ExportComponent,
-        FilterComponent,
-        FilterTextComponent,
-        FiltersConfigComponent,
-        FilterDateComponent,
-        FilterDateWithEditComponent,
-        FilterRadioComponent,
-        FiltersComponent,
-        FilterFlagComponent,
-        FilterCheckComponent,
-        MultiselectComponent,
-        GroupComponent
+    var CrudListPageBaseComponent = /** @class */ (function (_super) {
+        __extends(CrudListPageBaseComponent, _super);
+        function CrudListPageBaseComponent(config) {
+            var _this = _super.call(this) || this;
+            _this.config = config;
+            return _this;
+        }
+        return CrudListPageBaseComponent;
+    }(angular.BaseComponent));
+    CrudListPageBaseComponent.smartType = "crud-list-page";
+    /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
+    CrudListPageBaseComponent.decorators = [
+        { type: core.Directive }
     ];
-    var CrudComponentsModule = /** @class */ (function () {
-        function CrudComponentsModule() {
+    /**
+     * @type {function(): !Array<(null|{
+     *   type: ?,
+     *   decorators: (undefined|!Array<{type: !Function, args: (undefined|!Array<?>)}>),
+     * })>}
+     * @nocollapse
+     */
+    CrudListPageBaseComponent.ctorParameters = function () { return [
+        { type: CrudFullConfig }
+    ]; };
+    /** @type {!Object<string, !Array<{type: !Function, args: (undefined|!Array<?>)}>>} */
+    CrudListPageBaseComponent.propDecorators = {
+        contentTpl: [{ type: core.ViewChild, args: ["contentTpl", { read: core.ViewContainerRef, static: true },] }],
+        listOptions: [{ type: core.Input }]
+    };
+
+    var ListStandardComponent = /** @class */ (function (_super) {
+        __extends(ListStandardComponent, _super);
+        function ListStandardComponent() {
+            return _super !== null && _super.apply(this, arguments) || this;
         }
-        return CrudComponentsModule;
-    }());
+        return ListStandardComponent;
+    }(CrudListPageBaseComponent));
     /** @type {!Array<{type: !Function, args: (undefined|!Array<?>)}>} */
-    CrudComponentsModule.decorators = [
-        { type: core.NgModule, args: [{
-                    declarations: __spreadArray([], __read(COMPONENTS)),
-                    entryComponents: __spreadArray([], __read(COMPONENTS)),
-                    imports: [
-                        //AuthSharedModule,
-                        store.StoreModule,
-                        angular.SharedModule,
-                        CrudPipesModule,
-                        forms.FormsModule,
-                        common.CommonModule
-                    ],
-                    exports: __spreadArray([
-                        CrudPipesModule
-                    ], __read(COMPONENTS)),
-                    providers: [
-                        CrudService,
-                        CrudEffects,
-                        CrudFacade,
-                        SocketService,
-                        CrudListPaginationFactory,
-                    ],
+    ListStandardComponent.decorators = [
+        { type: core.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: [""]
                 },] }
     ];
 
     var PAGES = [
         ItemComponent,
-        ListComponent
+        ListComponent,
+        ListStandardComponent,
+        ItemStandardComponent
     ];
     var CrudFullModule = /** @class */ (function () {
         function CrudFullModule(store, config, effects) {
@@ -2675,9 +2796,12 @@
                         common.CommonModule,
                         CrudComponentsModule
                     ],
-                    exports: __spreadArray([], __read(PAGES)),
+                    exports: __spreadArray(__spreadArray([], __read(PAGES)), [
+                        CrudComponentsModule
+                    ]),
                     providers: [
                         CrudService,
+                        PageService,
                         CrudEffects,
                         CrudFacade,
                         CrudListPaginationFactory,
@@ -2722,6 +2846,7 @@
                     exports: [CrudComponentsModule],
                     providers: [
                         CrudService,
+                        PageService,
                         CrudEffects,
                         CrudFacade,
                         SocketService,
@@ -2770,11 +2895,14 @@
      */
 
     exports.CRUD_MODEL_POSSIBILITIES_PROVIDER = CRUD_MODEL_POSSIBILITIES_PROVIDER;
+    exports.CrudComponentsModule = CrudComponentsModule;
     exports.CrudConfig = CrudConfig;
     exports.CrudCoreModule = CrudCoreModule;
     exports.CrudEffects = CrudEffects;
     exports.CrudFacade = CrudFacade;
     exports.CrudFullConfig = CrudFullConfig;
+    exports.CrudItemPageBaseComponent = CrudItemPageBaseComponent;
+    exports.CrudListPageBaseComponent = CrudListPageBaseComponent;
     exports.CrudListPaginationFactory = CrudListPaginationFactory;
     exports.CrudModule = CrudModule;
     exports.CrudPipesModule = CrudPipesModule;
@@ -2793,6 +2921,7 @@
     exports.GroupComponent = GroupComponent;
     exports.ICrudModelPossibilitiesProvider = ICrudModelPossibilitiesProvider;
     exports.MultiselectComponent = MultiselectComponent;
+    exports.PageService = PageService;
     exports.create = create;
     exports.createFailure = createFailure;
     exports.createMany = createMany;
@@ -2853,8 +2982,11 @@
     exports["ɵq"] = NotSocketService;
     exports["ɵr"] = CrudFullModule;
     exports["ɵs"] = ItemComponent;
-    exports["ɵt"] = PageBaseComponent;
-    exports["ɵu"] = ListComponent;
+    exports["ɵt"] = ItemStandardComponent;
+    exports["ɵu"] = CrudItemPageBaseComponent;
+    exports["ɵv"] = ListComponent;
+    exports["ɵw"] = ListStandardComponent;
+    exports["ɵx"] = CrudListPageBaseComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });