From 474279b3548eb11ec17a3a359147deaca6f29b16 Mon Sep 17 00:00:00 2001 From: Esteban Marin Date: Wed, 23 Jan 2019 21:07:52 +0100 Subject: [PATCH 1/2] #101: show no entries found when inside mat-option --- CHANGELOG.md | 6 ++++++ package-lock.json | 2 +- package.json | 2 +- .../mat-select-search.component.html | 2 +- .../mat-select-search.component.ts | 14 ++++++++++++++ 5 files changed, 23 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3f3c51e..727d4a3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,11 @@ # Changelog +## 1.5.2 +* Bugfix: Show "no entries found" message when placing `` inside a `` element + [#101](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/101) + + Thanks to @mstawick for reporting + ## 1.5.1 * Bugfix: Hide checkbox when placing `` inside a `` element and with `` [#98](https://github.com/bithost-gmbh/ngx-mat-select-search/issues/98) diff --git a/package-lock.json b/package-lock.json index 2de0338..f3c47c8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "ngx-mat-select-search", - "version": "1.5.1", + "version": "1.5.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 07baa75..7c478a9 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "ngx-mat-select-search", "description": "Library that provides an angular component providing an input field for searching / filtering MatSelect options of the Angular Material library.", - "version": "1.5.1", + "version": "1.5.2", "license": "MIT", "scripts": { "ng": "ng", diff --git a/src/app/mat-select-search/mat-select-search.component.html b/src/app/mat-select-search/mat-select-search.component.html index 34d15e3..b122a59 100755 --- a/src/app/mat-select-search/mat-select-search.component.html +++ b/src/app/mat-select-search/mat-select-search.component.html @@ -27,7 +27,7 @@ -
{{noEntriesFoundLabel}}
diff --git a/src/app/mat-select-search/mat-select-search.component.ts b/src/app/mat-select-search/mat-select-search.component.ts index 4dd7689..cfeee17 100755 --- a/src/app/mat-select-search/mat-select-search.component.ts +++ b/src/app/mat-select-search/mat-select-search.component.ts @@ -455,4 +455,18 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni } } + /** + * Returns whether the "no entries found" message should be displayed + */ + public _noEntriesFound(): boolean { + if (!this._options) { + return; + } + if (this.matOption) { + return this.noEntriesFoundLabel && this.value && this._options.length === 1; + } else { + return this.noEntriesFoundLabel && this.value && this._options.length === 0; + } + } + } From bf23a03cea8c9207dd69cd473c4f79041feb0931 Mon Sep 17 00:00:00 2001 From: Esteban Marin Date: Thu, 24 Jan 2019 07:39:22 +0100 Subject: [PATCH 2/2] #101: show no entries found and fix styling when inside mat-option --- .../mat-select-search.component.scss | 18 ++++++++++++++++++ .../mat-select-search.component.ts | 19 ++++++++++++++++++- 2 files changed, 36 insertions(+), 1 deletion(-) diff --git a/src/app/mat-select-search/mat-select-search.component.scss b/src/app/mat-select-search/mat-select-search.component.scss index 15ec2bd..4fd1975 100755 --- a/src/app/mat-select-search/mat-select-search.component.scss +++ b/src/app/mat-select-search/mat-select-search.component.scss @@ -8,6 +8,7 @@ $mat-menu-side-padding: 16px !default; $clear-button-width: 20px; $multiple-check-width: 33px; +$mat-option-height: 3em; .mat-select-search-hidden { visibility: hidden; @@ -56,6 +57,20 @@ $multiple-check-width: 33px; right: 4px; top: 5px; } + +/** override styling when inside a mat-option */ +:host.mat-select-search-inside-mat-option { + .mat-select-search-input { + padding-top: 0px; + padding-bottom: 0px; + height: $mat-option-height; + line-height: $mat-option-height; + } + .mat-select-search-clear { + top: 3px; + } +} + /deep/ .cdk-overlay-pane-select-search { &.cdk-overlay-pane-select-search-with-offset{ /* correct offsetY so that the selected option is at the position of the select box when opening */ @@ -73,4 +88,7 @@ $multiple-check-width: 33px; .mat-option-pseudo-checkbox { display: none; } + &.mat-select-search-no-entries-found { + height: 2 * $mat-option-height; + } } diff --git a/src/app/mat-select-search/mat-select-search.component.ts b/src/app/mat-select-search/mat-select-search.component.ts index cfeee17..feedfe5 100755 --- a/src/app/mat-select-search/mat-select-search.component.ts +++ b/src/app/mat-select-search/mat-select-search.component.ts @@ -10,7 +10,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, EventEmitter, forwardRef, Inject, Input, OnDestroy, OnInit, QueryList, ViewChild, - ContentChild, Optional + ContentChild, Optional, HostBinding } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; import { MatOption, MatSelect } from '@angular/material'; @@ -141,6 +141,11 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni /** Reference to custom search input clear icon */ @ContentChild(MatSelectSearchClearDirective) clearIcon: MatSelectSearchClearDirective; + @HostBinding('class.mat-select-search-inside-mat-option') + get isInsideMatOption(): boolean { + return !!this.matOption; + } + /** Current search value */ get value(): string { return this._value; @@ -226,11 +231,23 @@ export class MatSelectSearchComponent implements OnInit, OnDestroy, AfterViewIni .subscribe(() => { const keyManager = this.matSelect._keyManager; if (keyManager && this.matSelect.panelOpen) { + // avoid "expression has been changed" error setTimeout(() => { + // set first item active and input width keyManager.setFirstItemActive(); this.getWidth(); + + // set no entries found class on mat option + if (this.matOption) { + if (this._noEntriesFound()) { + this.matOption._getHostElement().classList.add('mat-select-search-no-entries-found'); + } else { + this.matOption._getHostElement().classList.remove('mat-select-search-no-entries-found'); + } + } }, 1); + } }); });