@eui/ecl 15.0.0-rc.19 → 15.0.0-rc.20

package/fesm2020/eui-ecl.mjs

@@ -8599,12 +8599,14 @@ class EclMultiselectComponent extends ECLBaseDirective {
         this.differs = differs;
         this.translate = translate;
         this.isInvalid = false;
-        this._disabled = false;
-        this.eclSize = 'm';
         this.eclChange = new EventEmitter();
+        this.eclSize = 'm';
+        this._disabled = false;
         this.multiSelectOptions = [];
         this.selectedValues = [];
         this.destroy$ = new Subject();
+        this.NO_RESULTS_FOUND_TEXT = 'No results found';
+        this.CLASS_NO_RESULTS_FOUND = 'ecl-select__multiple-no-results';
         this.propagateChange = (_) => {
         };
         this.propagateTouched = () => {
@@ -8615,6 +8617,11 @@ class EclMultiselectComponent extends ECLBaseDirective {
         }
         this.bindCallbacks();
     }
+    get cssClasses() {
+        return [
+            super.getCssClasses('ecl-select'),
+        ].join(' ').trim();
+    }
     set eclPlaceholder(value) {
         this._eclPlaceholder = value;
         if (this.multiSelectInput) {
@@ -8630,11 +8637,6 @@ class EclMultiselectComponent extends ECLBaseDirective {
         }
     }
     set disabled(value) { this._disabled = coerceBooleanProperty(value); }
-    get cssClasses() {
-        return [
-            super.getCssClasses('ecl-select'),
-        ].join(' ').trim();
-    }
     ngOnInit() {
         this.hostEl = this.getHostElement();
         this.hostParentEl = this.getHostParentElement(this.hostEl);
@@ -8642,6 +8644,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
         this.selectIconContainerEl = this.createIconContainer();
         this.multiselectWrapper = this.createWrapperMultiselect();
         this.multiselectContainer = this.createSelectContainerMultiselect();
+        this.noResultsFound = this.createNoResultsFound();
         if (this.hostParentEl != null) {
             this.hideOriginalSelectComponent();
             this.createHtmlElements();
@@ -8716,6 +8719,14 @@ class EclMultiselectComponent extends ECLBaseDirective {
             });
         }));
     }
+    createNoResultsFound() {
+        const noResultsDiv = document.createElement('div');
+        noResultsDiv.classList.add('ecl-select__multiple-no-results');
+        const textSpan = document.createElement('span');
+        textSpan.innerHTML = this.NO_RESULTS_FOUND_TEXT;
+        noResultsDiv.appendChild(textSpan);
+        return noResultsDiv;
+    }
     hideOriginalSelectComponent() {
         this.hostParentEl.replaceChild(this.hostWrapperEl, this.hostEl);
         this.hostWrapperEl.appendChild(this.hostEl);
@@ -8917,7 +8928,9 @@ class EclMultiselectComponent extends ECLBaseDirective {
     }
     onSearchOptions(evt) {
         const keyword = evt.target.value;
+        let isMatchFound = false;
         if (keyword === '') {
+            isMatchFound = true;
             this.multiSelectOptions.forEach(item => {
                 item.style.display = 'flex';
             });
@@ -8927,9 +8940,17 @@ class EclMultiselectComponent extends ECLBaseDirective {
                 item.style.display = 'none';
             }
             else {
+                isMatchFound = true;
                 item.style.display = 'flex';
             }
         });
+        const noResultsFoundExists = this.multiDropdown.lastChild.classList.contains(this.CLASS_NO_RESULTS_FOUND);
+        if (!isMatchFound && !noResultsFoundExists) {
+            this.multiDropdown.appendChild(this.noResultsFound);
+        }
+        else if (isMatchFound && noResultsFoundExists) {
+            this.multiDropdown.removeChild(this.noResultsFound);
+        }
         this.handleSelectAllDisableStatus();
     }
     handleSelectAllDisableStatus() {
@@ -8948,11 +8969,14 @@ class EclMultiselectComponent extends ECLBaseDirective {
         this.multiSelectInput.value = null;
     }
     handleTranslations() {
+        const SELECT_ALL_KEY = 'ecl.multiselect.SELECT-ALL';
+        const NO_RESULTS_FOUND_KEY = 'ecl.multiselect.NO-RESULTS-FOUND';
         this.translate
-            .stream('ecl.multiselect.SELECT-ALL')
+            .stream([SELECT_ALL_KEY, NO_RESULTS_FOUND_KEY])
             .pipe(takeUntil(this.destroy$)).subscribe((translation) => {
+            this.NO_RESULTS_FOUND_TEXT = translation[NO_RESULTS_FOUND_KEY];
             if (this.checkboxLabel) {
-                this.checkboxLabel.lastElementChild.textContent = translation;
+                this.checkboxLabel.lastElementChild.textContent = translation[SELECT_ALL_KEY];
             }
         });
     }
@@ -9157,7 +9181,7 @@ class EclMultiselectComponent extends ECLBaseDirective {
     }
 }
 /** @nocollapse */ EclMultiselectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.0", ngImport: i0, type: EclMultiselectComponent, deps: [{ token: i1$1.NgControl, optional: true, self: true }, { token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.IterableDiffers }, { token: i2.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-/** @nocollapse */ EclMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: EclMultiselectComponent, selector: "select[eclMultiselect]", inputs: { isInvalid: "isInvalid", eclPlaceholder: "eclPlaceholder", disabled: "disabled", eclSize: "eclSize" }, outputs: { eclChange: "eclChange" }, host: { listeners: { "document:keyup.escape": "onEscapeKey($event)", "document:click": "onKeyUp($event)" }, properties: { "attr.disabled": "this.disabled", "class": "this.cssClasses" } }, queries: [{ propertyName: "eclOptionItems", predicate: EclMultiselectOptionDirective }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>" });
+/** @nocollapse */ EclMultiselectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.0", type: EclMultiselectComponent, selector: "select[eclMultiselect]", inputs: { isInvalid: "isInvalid", eclPlaceholder: "eclPlaceholder", eclSize: "eclSize", disabled: "disabled" }, outputs: { eclChange: "eclChange" }, host: { listeners: { "document:keyup.escape": "onEscapeKey($event)", "document:click": "onKeyUp($event)" }, properties: { "class": "this.cssClasses", "attr.disabled": "this.disabled" } }, queries: [{ propertyName: "eclOptionItems", predicate: EclMultiselectOptionDirective }], usesInheritance: true, ngImport: i0, template: "<ng-content></ng-content>" });
 __decorate([
     coerceBoolean
 ], EclMultiselectComponent.prototype, "isInvalid", void 0);
@@ -9173,20 +9197,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.0", ngImpor
                 args: [EclMultiselectOptionDirective]
             }], isInvalid: [{
                 type: Input
+            }], cssClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], eclChange: [{
+                type: Output
             }], eclPlaceholder: [{
                 type: Input
+            }], eclSize: [{
+                type: Input
             }], disabled: [{
                 type: Input
             }, {
                 type: HostBinding,
                 args: ['attr.disabled']
-            }], eclSize: [{
-                type: Input
-            }], cssClasses: [{
-                type: HostBinding,
-                args: ['class']
-            }], eclChange: [{
-                type: Output
             }], onEscapeKey: [{
                 type: HostListener,
                 args: ['document:keyup.escape', ['$event']]