@eui/mobile-core 16.7.0-snapshot-1709561696755 → 16.7.0-snapshot-1709715271617

package/fesm2022/eui-mobile-core.mjs

@@ -697,6 +697,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['class']
             }] } });
 
+/**
+*  @deprecated It is removed. Use {@link euim-sidebar} instead.
+*/
 class EuimMenuComponent {
     constructor(navCtrl) {
         this.navCtrl = navCtrl;
@@ -1091,6 +1094,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['class']
             }] } });
 
+/**
+* @deprecated It will be removed on v17 release. Use {@link ion-list-header} instead.
+*/
 class EuimListHeaderDirective {
     constructor() {
         this.className = 'euim-list-divider';
@@ -1131,6 +1137,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+/**
+* @deprecated It will be removed on v17 release. Use {@link euimDivider} instead if there is a case with no separator. For all othere cases ion-item-divider will be used.
+*/
 class EuimItemDividerDirective {
     constructor() {
         this.className = 'euim-item-divider';
@@ -1782,6 +1791,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+/**
+*  @deprecated It was removed in v16. Use {@link euim-slider-info-screen} instead.
+*/
 class EuimInfoScreenComponent {
     constructor() {
         this.className = 'euim-info-screen';
@@ -2811,6 +2823,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+/**
+*  @deprecated It was removed in v16. Use {@link euim-slider-info-screen} instead.
+*/
 class EuimSliderComponent {
     constructor(renderer, gestureCtrl, sliderElement, cdr) {
         this.renderer = renderer;
@@ -3416,7 +3431,9 @@ class EuimChipSelectorComponent {
         this.updateChipsAndFilters();
     }
     ngOnChanges(changes) {
-        if (this.euimChipSelectorItemComponent && this.euimChipSelectorItemComponent.length > 0) {
+        if (this.euimChipSelectorItemComponent && this.euimChipSelectorItemComponent.length > 0 &&
+            changes.selectedChips.currentValue && changes.selectedChips.currentValue.length === 1 &&
+            changes.selectedChips.currentValue.every((value, index) => value === '0')) {
             this.clearFiltersAndSelectAll();
         }
     }
@@ -3804,9 +3821,14 @@ class EuimMultiselectComponent {
     constructor(ref) {
         this.ref = ref;
         this.className = 'euim-multiselect';
+        this.euimKeepSelection = false;
         this.numberOfSelected = 0;
     }
     ngOnInit() {
+        if (this.euimKeepSelection) {
+            this.currentDataProvider =
+                [...this.currentDataProvider]?.map((obj, index) => ({ ...obj, _id: index + 1 }));
+        }
         this.initialDataProvider = this.currentDataProvider;
     }
     selectAllItems() {
@@ -3824,7 +3846,15 @@ class EuimMultiselectComponent {
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     selectedItems() {
-        return this.currentDataProvider?.filter(item => item.selected);
+        if (this.euimKeepSelection) {
+            const filteredItemsWithoutId = this.currentDataProvider
+                ?.filter(item => item.selected)
+                .map(({ _id, ...rest }) => rest);
+            return filteredItemsWithoutId;
+        }
+        else {
+            return this.currentDataProvider?.filter(item => item.selected);
+        }
     }
     selectByIndex(index, state = true) {
         if (index < this.currentDataProvider?.length) {
@@ -3838,12 +3868,19 @@ class EuimMultiselectComponent {
         if (changes.currentDataProvider &&
             changes.currentDataProvider.currentValue
             && changes.currentDataProvider.previousValue === null) {
+            if (this.euimKeepSelection) {
+                this.currentDataProvider =
+                    [...this.currentDataProvider]?.map((obj, index) => ({ ...obj, _id: index + 1 }));
+            }
             this.initialDataProvider = changes.currentDataProvider.currentValue;
         }
     }
     /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimMultiselectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimMultiselectComponent, selector: "euim-multiselect", inputs: { currentDataProvider: "currentDataProvider", toolbarTitle: "toolbarTitle" }, host: { properties: { "class": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<ion-header>\n    <ion-toolbar color=\"light\" class=\"euim-multiselect__toolbar\">\n        <ng-content select=\"euim-multiselect-toolbar\"></ng-content>\n        <ion-toolbar color=\"light\">\n            <ng-content select=\"euim-multiselect-filter\"></ng-content>\n        </ion-toolbar>\n    </ion-toolbar>\n</ion-header>\n\n<ng-container *ngIf=\"currentDataProvider?.length > 0\">\n    <ng-content select=\"euim-multiselect-list\">\n\n    </ng-content>\n</ng-container>\n\n<ng-container *ngIf=\"currentDataProvider?.length === 0\">\n    <ng-content select=\"euim-empty-list-placeholder\">\n    </ng-content>\n</ng-container>\n\n\n\n", styles: [".euim-multiselect__toolbar{color:var(--eui-base-color-grey-100)}.euim-multiselect__toolbar--title{font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family);font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EuimMultiselectComponent, selector: "euim-multiselect", inputs: { currentDataProvider: "currentDataProvider", toolbarTitle: "toolbarTitle", euimKeepSelection: "euimKeepSelection" }, host: { properties: { "class": "this.className" } }, usesOnChanges: true, ngImport: i0, template: "<ion-header>\n    <ion-toolbar color=\"light\" class=\"euim-multiselect__toolbar\">\n        <ng-content select=\"euim-multiselect-toolbar\"></ng-content>\n        <ion-toolbar color=\"light\">\n            <ng-content select=\"euim-multiselect-filter\"></ng-content>\n        </ion-toolbar>\n    </ion-toolbar>\n</ion-header>\n\n<ng-container *ngIf=\"currentDataProvider?.length > 0\">\n    <ng-content select=\"euim-multiselect-list\">\n\n    </ng-content>\n</ng-container>\n\n<ng-container *ngIf=\"currentDataProvider?.length === 0\">\n    <ng-content select=\"euim-empty-list-placeholder\">\n    </ng-content>\n</ng-container>\n\n\n\n", styles: [".euim-multiselect__toolbar{color:var(--eui-base-color-grey-100)}.euim-multiselect__toolbar--title{font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family);font-weight:700}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i1.IonHeader, selector: "ion-header", inputs: ["collapse", "mode", "translucent"] }, { kind: "component", type: i1.IonToolbar, selector: "ion-toolbar", inputs: ["color", "mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
+__decorate([
+    coerceBoolean
+], EuimMultiselectComponent.prototype, "euimKeepSelection", void 0);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EuimMultiselectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'euim-multiselect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ion-header>\n    <ion-toolbar color=\"light\" class=\"euim-multiselect__toolbar\">\n        <ng-content select=\"euim-multiselect-toolbar\"></ng-content>\n        <ion-toolbar color=\"light\">\n            <ng-content select=\"euim-multiselect-filter\"></ng-content>\n        </ion-toolbar>\n    </ion-toolbar>\n</ion-header>\n\n<ng-container *ngIf=\"currentDataProvider?.length > 0\">\n    <ng-content select=\"euim-multiselect-list\">\n\n    </ng-content>\n</ng-container>\n\n<ng-container *ngIf=\"currentDataProvider?.length === 0\">\n    <ng-content select=\"euim-empty-list-placeholder\">\n    </ng-content>\n</ng-container>\n\n\n\n", styles: [".euim-multiselect__toolbar{color:var(--eui-base-color-grey-100)}.euim-multiselect__toolbar--title{font:normal normal 400 1.25rem/1.5rem var(--eui-base-font-family);font-weight:700}\n"] }]
@@ -3854,6 +3891,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], toolbarTitle: [{
                 type: Input
+            }], euimKeepSelection: [{
+                type: Input
             }] } });
 
 class EuimMultiselectFilterComponent {
@@ -3864,12 +3903,20 @@ class EuimMultiselectFilterComponent {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     handleChange(event) {
         const query = event.detail.value.toLowerCase();
-        this.multiselect.selectAll = false;
-        this.multiselect.indeterminate = false;
-        this.multiselect.currentDataProvider?.forEach((item) => (item.selected = false));
+        if (!this.multiselect.euimKeepSelection) {
+            this.multiselect.selectAll = false;
+            this.multiselect.indeterminate = false;
+            this.multiselect.currentDataProvider?.forEach((item) => (item.selected = false));
+        }
         if (query === '') {
-            this.multiselect.currentDataProvider =
-                this.multiselect.initialDataProvider;
+            if (!this.multiselect.euimKeepSelection) {
+                this.multiselect.currentDataProvider =
+                    this.multiselect.initialDataProvider;
+            }
+            else {
+                this.multiselect.currentDataProvider =
+                    this.multiselect.initialDataProvider;
+            }
         }
         else {
             this.multiselect.currentDataProvider =
@@ -3899,9 +3946,15 @@ class EuimMultiselectAllDirective {
         this.euimMulti.indeterminate = false;
         if (event.detail.checked) {
             this.euimMulti.numberOfSelected = this.euimMulti.currentDataProvider?.length;
+            if (this.euimMulti.euimKeepSelection) {
+                this.euimMulti.initialDataProvider?.forEach((item) => (item.selected = true));
+            }
         }
         else {
             this.euimMulti.numberOfSelected = 0;
+            if (this.euimMulti.euimKeepSelection) {
+                this.euimMulti.initialDataProvider?.forEach((item) => (item.selected = false));
+            }
         }
     }
     get indeterminate() {
@@ -3955,6 +4008,12 @@ class EuimMultiselectSelectFieldDirective {
     }
     onIonChange(event) {
         this.item.selected = event.detail.checked;
+        if (this.euimMulti.euimKeepSelection) {
+            const foundItem = this.euimMulti.initialDataProvider.find(item => item._id === this.item);
+            if (foundItem) {
+                foundItem._id = event.detail.checked;
+            }
+        }
         const isSelectAll = this.euimMulti.currentDataProvider?.every((item) => item.selected);
         this.euimMulti.indeterminate = !isSelectAll && this.euimMulti.currentDataProvider?.some((item) => item.selected);
         if (!this.euimMulti.indeterminate) {