ISSUE-43, fix(documents): Loading Options does not work correctly wit…

…h hasSearchBox Input

.gitignore

@@ -49,4 +49,5 @@ Thumbs.db
 
 
 # NgDoc files
-.ng-doc
+.ng-doc
+/demo

src/app/ngx-mat-select/component/fetch-options/ngx-mat-select-fetch-options-client-side.directive.ts

@@ -16,12 +16,14 @@ export class NgxMatSelectFetchOptionsClientSideDirective extends NgxMatSelectFet
    * the options that we want to pick up an item or items from them
    */
   @Input()
-  get options() {
+  get options(): unknown[] | null | undefined {
     return this._options;
   }
 
-  set options(options: unknown[]) {
+  set options(options: unknown[] | undefined | null) {
     this._options = options || [];
+    this.host.searchBoxComponent?.clear();
+    this.search('');
     this.checkOptionsType();
     this.syncValueAndOptions();
   }
@@ -33,14 +35,14 @@ export class NgxMatSelectFetchOptionsClientSideDirective extends NgxMatSelectFet
    * you can use this, when the options are loading for the very first time
    * @param value
    */
-  @Input() set loading(value: boolean) {
-    this.loading$.next(value);
+  @Input() set loading(value: boolean | undefined | null) {
+    this.loading$.next(value || false);
   }
 
   /**
    * a search comparison function, that will be applied on filtering of the options when the client searches
    */
-  @Input() searchComparison?: (searchTerm: string, option: unknown) => boolean;
+  @Input() searchComparison?: (searchTerm: string, option: any) => boolean;
 
   constructor(host: NgxMatSelectComponent, changeDetectorRef: ChangeDetectorRef) {
     super(host, changeDetectorRef);
@@ -67,7 +69,9 @@ export class NgxMatSelectFetchOptionsClientSideDirective extends NgxMatSelectFet
       return true;
     };
 
-    this.filteredOptions$.next(this.options.filter(comparisonFn).slice());
+    if (!isNullOrUndefined(this.options)) {
+      this.filteredOptions$.next(this.options.filter(comparisonFn).slice());
+    }
   };
 
   /**
@@ -76,7 +80,7 @@ export class NgxMatSelectFetchOptionsClientSideDirective extends NgxMatSelectFet
    */
   protected sortValues = () => {
     if (this.host.multiple) {
-      const options = this.options;
+      const options = this.options || [];
 
       this.host.selectionModel?.sort((a, b) => {
         return this.sortComparator ? this.sortComparator(a, b, options) : options.indexOf(a) - options.indexOf(b);
@@ -95,11 +99,11 @@ export class NgxMatSelectFetchOptionsClientSideDirective extends NgxMatSelectFet
       const compareWithFn = this.host._getCompareWithFn();
 
       if (!isNullOrUndefined(value)) {
-        if (this.options.length > 0 && value.length > 0) {
-          const selected: {value: any; option: any}[] = [];
+        if (this._options.length > 0 && value.length > 0) {
+          const selected: { value: any; option: any }[] = [];
 
           value.forEach((value: any) => {
-            this.options.some((option: any) => {
+            this._options.some((option: any) => {
               if (compareWithFn(option, value)) {
                 selected.push({option, value});
 
@@ -112,27 +116,25 @@ export class NgxMatSelectFetchOptionsClientSideDirective extends NgxMatSelectFet
 
           this.host.selectionModel.setSelection(...selected.map(s => s.option));
           const selectedValue = selected.map(s => s.value);
+          this.host.setValue(this.host._toFlat(selectedValue), false, true);
 
-          if (value.length !== selectedValue.length) {
-            const flatValue = this.host._toFlat(selectedValue);
-            this.host.setValue(flatValue, false, true);
-          }
-        } else {
+        } else if (!this.loading$.getValue()) {
           this.host.selectionModel.clear();
-          this.host._onChange(null);
+          this.host.setValue(null, false, true);
         }
       } else {
         const isThereAnyNullOrUndefinedInOptions =
-          this.options.filter(o => compareWithFn(o, undefined) || compareWithFn(o, null)).length > 0;
+          this._options.filter(o => compareWithFn(o, undefined) || compareWithFn(o, null)).length > 0;
 
-        if (this.options.length > 0 && isThereAnyNullOrUndefinedInOptions) {
+        if (this._options.length > 0 && isThereAnyNullOrUndefinedInOptions) {
           this.host.selectionModel.setSelection(value);
         } else {
           this.host.selectionModel.clear();
         }
       }
 
       this._changeDetectorRef.markForCheck();
+      this.host.stateChanges.next();
     }
   };
 }

src/app/ngx-mat-select/component/fetch-options/ngx-mat-select-fetch-options-server-side.directive.ts

@@ -182,6 +182,7 @@ export class NgxMatSelectFetchOptionsServerSideDirective
     }
 
     this._changeDetectorRef.markForCheck();
+    this.host.stateChanges.next();
   };
 
   /**

src/app/ngx-mat-select/component/fetch-options/ngx-mat-select-fetch-options.ts

@@ -41,7 +41,7 @@ export abstract class NgxMatSelectFetchOptionsDirective
    * if it's true the search-box will appear inside the panel
    */
   @Input()
-  get hasSearchBox() {
+  get hasSearchBox(): boolean | undefined | null {
     return this._hasSearchBox;
   }
 
@@ -85,7 +85,7 @@ export abstract class NgxMatSelectFetchOptionsDirective
    * all the options which are provided up to now
    * @protected
    */
-  protected abstract options: unknown[];
+  protected abstract options: unknown[] | undefined | null;
 
   /**
    * an observable to manage destroying the other observables
@@ -161,7 +161,7 @@ export abstract class NgxMatSelectFetchOptionsDirective
    */
   protected checkOptionsType() {
     const options = this.options;
-    if (options.length > 0) {
+    if (!isNullOrUndefined(options) && options.length > 0) {
       if (options[0] && typeof options[0] === 'object') {
         this.optionType = 'object';
       } else {

src/app/ngx-mat-select/component/panel/ngx-mat-select-panel.component.html

@@ -15,7 +15,7 @@
   <div
     class="ngx-mat-select-panel mdc-menu-surface mdc-menu-surface--open {{ theme }}"
     [ngClass]="panelClass"
-    [style.height.px]="height"
+    [style.height.px]="viewType === 'Default'? height: ''"
     role="listbox"
     [@transformPanel]="(isOpen$ | async) ? 'showing' : ''"
   >

src/app/ngx-mat-select/component/panel/ngx-mat-select-panel.component.ts

@@ -123,11 +123,17 @@ export class NgxMatSelectPanelComponent implements OnDestroy, OnInit, AfterViewI
    */
   @Input() height: number | null | undefined = 350;
 
+  get viewType() {
+    return this._viewType;
+  }
+
   /**
    * how to show the panel, it can be 'BottomSheet', 'FullScreen' and 'Default'
    * @param value
    */
-  @Input() set viewType(value: NgxMatSelectViewType | undefined) {
+  @Input() set viewType(value: NgxMatSelectViewType | undefined | null) {
+    this._viewType = value;
+
     let css = '';
 
     switch (value) {
@@ -143,9 +149,12 @@ export class NgxMatSelectPanelComponent implements OnDestroy, OnInit, AfterViewI
         break;
     }
 
-    this.overlayClassViewType = `ngx-mat-select-${css}-view-type`;
+    this.overlayClassViewType = `ngx-mat-select-panel-${css}-view-type`;
   }
 
+  private _viewType: NgxMatSelectViewType | undefined | null
+    = 'Default';
+
   overlayClassViewType = 'ngx-mat-select-default-view-type';
 
   /**

src/app/ngx-mat-select/select.scss

@@ -253,15 +253,15 @@ ngx-mat-select-panel {
 }
 
 
-.ngx-mat-select-panel-sheet-view-type {
+.ngx-mat-select-panel-bottom-sheet-view-type {
   left: 0 !important;
   right: 0 !important;
   width: 100% !important;
   top: 20% !important;
-  bottom: 0;
+  bottom: 0 !important;
 }
 
-.ngx-mat-select-panel-screen-view-type {
+.ngx-mat-select-panel-full-screen-view-type {
   top: 0 !important;
   bottom: 0 !important;
   left: 0 !important;

src/app/ngx-mat-select/select.ts

@@ -710,7 +710,7 @@ export class NgxMatSelectComponent
   }
 
   /** The currently selected option. */
-  get selected(): unknown | unknown[] {
+  get selected(): any | any[] {
     return this.multiple ? this.selectionModel?.selected || [] : this.selectionModel?.selected[0];
   }