@smartsoft001/crud-shell-angular 1.1.748 → 1.1.752

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

@@ -17,8 +17,10 @@ import { FormsModule, FormControl, FormGroup, FormArray } from '@angular/forms';
 import * as i3$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i4 from '@ngx-translate/core';
-import { Subscription, combineLatest, forkJoin, of, BehaviorSubject } from 'rxjs';
+import { Subscription, combineLatest, forkJoin, of, BehaviorSubject, Subject } from 'rxjs';
 import * as _ from 'lodash';
+import * as i6 from 'ng-dynamic-component';
+import { DynamicIoModule } from 'ng-dynamic-component';
 import * as i2$1 from '@angular/common/http';
 import 'reflect-metadata';
 import * as i1$2 from '@angular/router';
@@ -885,11 +887,13 @@ class MultiselectComponent {
             },
             confirm: true
         };
+        this.showForm = false;
         this.list$ = this.facade.multiSelected$.pipe(tap(list => {
             this.lock = true;
             const model = new this.config.type();
             const fieldsWithOptions = getModelFieldsWithOptions(model)
                 .filter(f => f.options.update?.multi);
+            this.showForm = !!fieldsWithOptions.length;
             fieldsWithOptions.forEach(({ key }) => {
                 const uniques = _.uniq(list.map(i => i[key]));
                 if (uniques.length === 1) {
@@ -913,12 +917,12 @@ class MultiselectComponent {
     ngOnInit() {
     }
 }
-/** @nocollapse */ /** @nocollapse */ MultiselectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MultiselectComponent, deps: [{ token: CrudFacade }, { token: CrudConfig }, { token: i3.MenuService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ /** @nocollapse */ MultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: MultiselectComponent, selector: "smart-crud-multiselect", ngImport: i0, template: "<ng-container *ngIf=\"list$ | async; let list\">\n    <ion-header>\n        <ion-toolbar>\n            <ion-buttons slot=\"end\">\n                <ion-button (click)=\"onClose()\">\n                    <ion-icon slot=\"icon-only\" name=\"close\"> </ion-icon>\n                </ion-button>\n            </ion-buttons>\n            <ion-title>{{ 'selected' | translate }}: {{ list?.length }}</ion-title>\n        </ion-toolbar>\n    </ion-header>\n\n    <div *ngIf=\"item\">\n        <smart-form [options]=\"item | smartFormOptions : 'multiUpdate' : config.type\" (valuePartialChange)=\"onPartialChange($event, list)\" (validChange)=\"onValidChange($event)\"></smart-form>\n\n        <smart-button style=\"float: right\" [disabled]=\"lock || !valid\" [options]=\"buttonOptions\">{{ 'change' | translate }}</smart-button>\n    </div>\n</ng-container>", styles: [":host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){:host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}}@media only screen and (max-width: 420px){:host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}}:host ion-toolbar.ios{height:4.6rem;--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){:host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}:host ion-toolbar.ios ion-title{text-align:left;padding-left:5.2rem}:host ion-toolbar.ios ion-icon{color:var(--ion-color-light)}}@media only screen and (max-width: 420px){:host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}:host ion-toolbar.ios ion-title{text-align:left;padding-left:5.2rem}:host ion-toolbar.ios ion-icon{color:var(--ion-color-light)}}.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-title{text-align:left;padding-left:1.2rem}.modal-wrapper :host ion-toolbar.ios ion-icon{color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-buttons{margin:0}}@media only screen and (max-width: 420px){.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-title{text-align:left;padding-left:1.2rem}.modal-wrapper :host ion-toolbar.ios ion-icon{color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-buttons{margin:0}}:host ion-toolbar ion-menu-button{color:var(--ion-color-light)}:host ion-toolbar ion-buttons.ios{height:var(--smart-button-height);margin:0}\n"], components: [{ type: i1$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i1$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i1$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i1$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { type: i1$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i3.FormComponent, selector: "smart-form", inputs: ["options"], outputs: ["invokeSubmit", "valueChange", "valuePartialChange", "validChange"] }, { type: i3.ButtonComponent, selector: "smart-button", inputs: ["options", "disabled"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i3$1.AsyncPipe, "translate": i4.TranslatePipe, "smartFormOptions": FormOptionsPipe } });
+/** @nocollapse */ /** @nocollapse */ MultiselectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MultiselectComponent, deps: [{ token: CrudFacade }, { token: CrudFullConfig }, { token: i3.MenuService }], target: i0.ɵɵFactoryTarget.Component });
+/** @nocollapse */ /** @nocollapse */ MultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.7", type: MultiselectComponent, selector: "smart-crud-multiselect", ngImport: i0, template: "<ng-container *ngIf=\"list$ | async; let list\">\n    <ion-header>\n        <ion-toolbar>\n            <ion-buttons slot=\"end\">\n                <ion-button (click)=\"onClose()\">\n                    <ion-icon slot=\"icon-only\" name=\"close\"> </ion-icon>\n                </ion-button>\n            </ion-buttons>\n            <ion-title>{{ 'selected' | translate }}: {{ list?.length }}</ion-title>\n        </ion-toolbar>\n    </ion-header>\n\n    <div *ngIf=\"config?.list?.components?.multi\">\n        <ng-template [ngComponentOutlet]=\"config?.list?.components?.multi\"\n                     [ndcDynamicInputs]=\"{ items: list }\"\n        ></ng-template>\n    </div>\n\n    <div *ngIf=\"showForm && item\">\n        <smart-form [options]=\"item | smartFormOptions : 'multiUpdate' : config.type\" (valuePartialChange)=\"onPartialChange($event, list)\" (validChange)=\"onValidChange($event)\"></smart-form>\n\n        <smart-button style=\"float: right\" [disabled]=\"lock || !valid\" [options]=\"buttonOptions\">{{ 'change' | translate }}</smart-button>\n    </div>\n</ng-container>", styles: [":host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){:host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}}@media only screen and (max-width: 420px){:host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}}:host ion-toolbar.ios{height:4.6rem;--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){:host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}:host ion-toolbar.ios ion-title{text-align:left;padding-left:5.2rem}:host ion-toolbar.ios ion-icon{color:var(--ion-color-light)}}@media only screen and (max-width: 420px){:host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}:host ion-toolbar.ios ion-title{text-align:left;padding-left:5.2rem}:host ion-toolbar.ios ion-icon{color:var(--ion-color-light)}}.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-title{text-align:left;padding-left:1.2rem}.modal-wrapper :host ion-toolbar.ios ion-icon{color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-buttons{margin:0}}@media only screen and (max-width: 420px){.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-title{text-align:left;padding-left:1.2rem}.modal-wrapper :host ion-toolbar.ios ion-icon{color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-buttons{margin:0}}:host ion-toolbar ion-menu-button{color:var(--ion-color-light)}:host ion-toolbar ion-buttons.ios{height:var(--smart-button-height);margin:0}\n"], components: [{ type: i1$1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { type: i1$1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }, { type: i1$1.IonButtons, selector: "ion-buttons", inputs: ["collapse"] }, { type: i1$1.IonButton, selector: "ion-button", inputs: ["buttonType", "color", "disabled", "download", "expand", "fill", "href", "mode", "rel", "routerAnimation", "routerDirection", "shape", "size", "strong", "target", "type"] }, { type: i1$1.IonIcon, selector: "ion-icon", inputs: ["color", "flipRtl", "icon", "ios", "lazy", "md", "mode", "name", "sanitize", "size", "src"] }, { type: i1$1.IonTitle, selector: "ion-title", inputs: ["color", "size"] }, { type: i3.FormComponent, selector: "smart-form", inputs: ["options"], outputs: ["invokeSubmit", "valueChange", "valuePartialChange", "validChange"] }, { type: i3.ButtonComponent, selector: "smart-button", inputs: ["options", "disabled"] }], directives: [{ type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i3$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }, { type: i6.ComponentOutletInjectorDirective, selector: "[ngComponentOutlet]", exportAs: ["ndcComponentOutletInjector"] }, { type: i6.DynamicIoDirective, selector: "[ndcDynamicInputs],[ndcDynamicOutputs],[ngComponentOutletNdcDynamicInputs],[ngComponentOutletNdcDynamicOutputs]", inputs: ["ndcDynamicInputs", "ngComponentOutletNdcDynamicInputs", "ndcDynamicOutputs", "ngComponentOutletNdcDynamicOutputs"] }], pipes: { "async": i3$1.AsyncPipe, "translate": i4.TranslatePipe, "smartFormOptions": FormOptionsPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: MultiselectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'smart-crud-multiselect', template: "<ng-container *ngIf=\"list$ | async; let list\">\n    <ion-header>\n        <ion-toolbar>\n            <ion-buttons slot=\"end\">\n                <ion-button (click)=\"onClose()\">\n                    <ion-icon slot=\"icon-only\" name=\"close\"> </ion-icon>\n                </ion-button>\n            </ion-buttons>\n            <ion-title>{{ 'selected' | translate }}: {{ list?.length }}</ion-title>\n        </ion-toolbar>\n    </ion-header>\n\n    <div *ngIf=\"item\">\n        <smart-form [options]=\"item | smartFormOptions : 'multiUpdate' : config.type\" (valuePartialChange)=\"onPartialChange($event, list)\" (validChange)=\"onValidChange($event)\"></smart-form>\n\n        <smart-button style=\"float: right\" [disabled]=\"lock || !valid\" [options]=\"buttonOptions\">{{ 'change' | translate }}</smart-button>\n    </div>\n</ng-container>", styles: [":host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){:host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}}@media only screen and (max-width: 420px){:host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}}:host ion-toolbar.ios{height:4.6rem;--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){:host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}:host ion-toolbar.ios ion-title{text-align:left;padding-left:5.2rem}:host ion-toolbar.ios ion-icon{color:var(--ion-color-light)}}@media only screen and (max-width: 420px){:host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}:host ion-toolbar.ios ion-title{text-align:left;padding-left:5.2rem}:host ion-toolbar.ios ion-icon{color:var(--ion-color-light)}}.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-title{text-align:left;padding-left:1.2rem}.modal-wrapper :host ion-toolbar.ios ion-icon{color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-buttons{margin:0}}@media only screen and (max-width: 420px){.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-title{text-align:left;padding-left:1.2rem}.modal-wrapper :host ion-toolbar.ios ion-icon{color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-buttons{margin:0}}:host ion-toolbar ion-menu-button{color:var(--ion-color-light)}:host ion-toolbar ion-buttons.ios{height:var(--smart-button-height);margin:0}\n"] }]
-        }], ctorParameters: function () { return [{ type: CrudFacade }, { type: CrudConfig }, { type: i3.MenuService }]; } });
+            args: [{ selector: 'smart-crud-multiselect', template: "<ng-container *ngIf=\"list$ | async; let list\">\n    <ion-header>\n        <ion-toolbar>\n            <ion-buttons slot=\"end\">\n                <ion-button (click)=\"onClose()\">\n                    <ion-icon slot=\"icon-only\" name=\"close\"> </ion-icon>\n                </ion-button>\n            </ion-buttons>\n            <ion-title>{{ 'selected' | translate }}: {{ list?.length }}</ion-title>\n        </ion-toolbar>\n    </ion-header>\n\n    <div *ngIf=\"config?.list?.components?.multi\">\n        <ng-template [ngComponentOutlet]=\"config?.list?.components?.multi\"\n                     [ndcDynamicInputs]=\"{ items: list }\"\n        ></ng-template>\n    </div>\n\n    <div *ngIf=\"showForm && item\">\n        <smart-form [options]=\"item | smartFormOptions : 'multiUpdate' : config.type\" (valuePartialChange)=\"onPartialChange($event, list)\" (validChange)=\"onValidChange($event)\"></smart-form>\n\n        <smart-button style=\"float: right\" [disabled]=\"lock || !valid\" [options]=\"buttonOptions\">{{ 'change' | translate }}</smart-button>\n    </div>\n</ng-container>", styles: [":host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){:host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}}@media only screen and (max-width: 420px){:host ion-toolbar{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}}:host ion-toolbar.ios{height:4.6rem;--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){:host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}:host ion-toolbar.ios ion-title{text-align:left;padding-left:5.2rem}:host ion-toolbar.ios ion-icon{color:var(--ion-color-light)}}@media only screen and (max-width: 420px){:host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-primary), var(--ion-color-tertiary));--color: var(--ion-color-light)}:host ion-toolbar.ios ion-title{text-align:left;padding-left:5.2rem}:host ion-toolbar.ios ion-icon{color:var(--ion-color-light)}}.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));--color: var(--ion-color-dark)}@media only screen and (max-width: 992px){.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-title{text-align:left;padding-left:1.2rem}.modal-wrapper :host ion-toolbar.ios ion-icon{color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-buttons{margin:0}}@media only screen and (max-width: 420px){.modal-wrapper :host ion-toolbar.ios{--background: linear-gradient(33deg, var(--ion-color-light), var(--ion-color-light-shade));color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-title{text-align:left;padding-left:1.2rem}.modal-wrapper :host ion-toolbar.ios ion-icon{color:var(--ion-color-dark)}.modal-wrapper :host ion-toolbar.ios ion-buttons{margin:0}}:host ion-toolbar ion-menu-button{color:var(--ion-color-light)}:host ion-toolbar ion-buttons.ios{height:var(--smart-button-height);margin:0}\n"] }]
+        }], ctorParameters: function () { return [{ type: CrudFacade }, { type: CrudFullConfig }, { type: i3.MenuService }]; } });
 
 class CrudListGroupService {
     constructor(facade) {
@@ -1446,7 +1450,8 @@ class CrudComponentsModule {
         SharedModule,
         CrudPipesModule,
         FormsModule,
-        CommonModule], exports: [CrudPipesModule, ExportComponent,
+        CommonModule,
+        DynamicIoModule], exports: [CrudPipesModule, ExportComponent,
         FilterComponent,
         FilterTextComponent,
         FiltersConfigComponent,
@@ -1471,7 +1476,8 @@ class CrudComponentsModule {
             SharedModule,
             CrudPipesModule,
             FormsModule,
-            CommonModule
+            CommonModule,
+            DynamicIoModule
         ], CrudPipesModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImport: i0, type: CrudComponentsModule, decorators: [{
             type: NgModule,
@@ -1485,7 +1491,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.7", ngImpor
                         SharedModule,
                         CrudPipesModule,
                         FormsModule,
-                        CommonModule
+                        CommonModule,
+                        DynamicIoModule
                     ],
                     exports: [
                         CrudPipesModule,
@@ -1840,6 +1847,7 @@ class ListComponent extends CreateDynamicComponent('crud-list-page') {
         this.searchService = searchService;
         this.moduleRef = moduleRef;
         this.componentFactoryResolver = componentFactoryResolver;
+        this._cleanMultiSelected$ = new Subject();
         this.filter$ = this.facade.filter$.pipe(tap((filter) => {
             this.filter = filter;
         }));
@@ -1944,6 +1952,7 @@ class ListComponent extends CreateDynamicComponent('crud-list-page') {
                 },
                 list$: this.facade.list$,
                 loading$: this.facade.loaded$.pipe(map((l) => !l)),
+                onCleanMultiSelected$: this._cleanMultiSelected$
             },
             cellPipe: this.config.list ? this.config.list.cellPipe : null,
             mode: this.config.list?.mode,
@@ -2024,26 +2033,30 @@ class ListComponent extends CreateDynamicComponent('crud-list-page') {
         const fieldsWithOptions = getModelFieldsWithOptions(new this.config.type());
         const modelOptions = getModelOptions(this.config.type);
         const showFilters = fieldsWithOptions.some((x) => x.options?.list?.filter) || modelOptions?.filters?.length;
-        const showMultiEdit = this.config.edit &&
-            fieldsWithOptions.some((x) => x.options?.update?.multi) &&
-            !this.hardwareService.isMobile &&
-            (!this.config?.list?.mode ||
-                this.config?.list?.mode === ListMode.desktop);
+        const showMultiEdit = this.config.list?.components?.multi ||
+            (this.config.edit &&
+                fieldsWithOptions.some((x) => x.options?.update?.multi) &&
+                !this.hardwareService.isMobile &&
+                (!this.config?.list?.mode ||
+                    this.config?.list?.mode === ListMode.desktop));
         return [
             ...(showMultiEdit
                 ? [
                     {
                         icon: "checkbox-outline",
                         text: "multi",
-                        handler: async () => {
-                            this.listOptions = {
-                                ...this.listOptions,
-                                select: this.listOptions.select === "multi" ? null : "multi",
-                            };
+                        handler: () => {
                             this.facade.multiSelect([]);
-                            if (this.menuService.openedEnd)
-                                await this.menuService.closeEnd();
-                            this.cd.detectChanges();
+                            this._cleanMultiSelected$.next();
+                            setTimeout(async () => {
+                                this.listOptions = {
+                                    ...this.listOptions,
+                                    select: this.listOptions.select === "multi" ? null : "multi",
+                                };
+                                if (this.menuService.openedEnd)
+                                    await this.menuService.closeEnd();
+                                this.cd.detectChanges();
+                            });
                         },
                     },
                 ]
@@ -2237,7 +2250,7 @@ class ItemComponent extends CreateDynamicComponent('crud-item-page') {
         this.detailsService.init();
         this.styleService.init(this.elementRef);
         this.pageService.checkPermissions();
-        if (this.router.routerState.snapshot.url.endsWith("/add")) {
+        if (this.router.routerState.snapshot.url.split('?')[0].endsWith("/add")) {
             this.mode = "create";
             await this.generateComponents('add');
         }