Merge pull request #202 from ngx-lib/fix-types

Fix typing and Angular version related issue

Author: pankajparkar

docs_app/package-lock.json

@@ -6,7 +6,7 @@
     "ng": "ng",
     "start": "concurrently \"npm run build\" \"ng serve\" \"npm run multiselect-watch\"",
     "build-prod": "ng build --prod multiselect && ng build --prod --base-href /multiselect/",
-    "build": "ng build multiselect && ng build",
+    "build": "ng build multiselect --prod && ng build --prod",
     "build-multiselect": "ng build --prod multiselect",
     "onchange": "onchange",
     "multiselect-watch": "npx onchange \"./projects/multiselect/src/lib/**/*.*\" -- ng build multiselect",
@@ -22,7 +22,7 @@
     "copy-readme": "cp README.md dist/multiselect/README.md",
     "copy-files": "npm run copy-license && npm run copy-readme",
     "npm_pack": "cd dist/multiselect && npm pack",
-    "package": "npm run build_lib && npm run copy-files && npm run npm_pack",
+    "package": "npm run build-multiselect && npm run copy-files && npm run npm_pack",
     "predeploy": "npm run build-prod",
     "deploy": "npx gh-pages -d dist/ngx-multiselect",
     "deploy-docs": "cd docs_app && npm run build && cp dist/index.html dist/404.html && npx gh-pages -d dist",
@@ -31,59 +31,59 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "6.0.4",
-    "@angular/cdk": "~6.0.2",
+    "@angular/cdk": "6.0.2",
     "@angular/common": "6.0.4",
     "@angular/compiler": "6.0.4",
     "@angular/core": "6.0.4",
     "@angular/forms": "6.0.4",
     "@angular/http": "6.0.4",
-    "@angular/material": "^6.0.2",
+    "@angular/material": "6.0.2",
     "@angular/platform-browser": "6.0.4",
     "@angular/platform-browser-dynamic": "6.0.4",
     "@angular/router": "6.0.4",
-    "@ngx-lib/multiselect": "^1.0.3",
-    "core-js": "^2.5.4",
-    "hammerjs": "^2.0.8",
-    "highlight.js": "^9.13.1",
-    "rxjs": "^6.2.2",
-    "zone.js": "^0.8.26"
+    "@ngx-lib/multiselect": "latest",
+    "core-js": "2.5.4",
+    "hammerjs": "2.0.8",
+    "highlight.js": "9.13.1",
+    "rxjs": "6.2.2",
+    "zone.js": "0.8.26"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/ngx-lib/multiselect.git"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.7.5",
-    "@angular-devkit/build-ng-packagr": "^0.7.5",
-    "@angular/cli": "^7.0.6",
+    "@angular-devkit/build-angular": "0.7.5",
+    "@angular-devkit/build-ng-packagr": "0.7.5",
+    "@angular/cli": "6.0.4",
     "@angular/compiler-cli": "6.0.4",
     "@angular/language-service": "6.0.4",
     "@types/jasmine": "2.8.6",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~8.9.4",
-    "codelyzer": "~4.2.1",
-    "concurrently": "^4.1.1",
-    "gh-pages": "^2.0.1",
-    "http-server": "^0.11.1",
-    "husky": "^1.3.1",
-    "jasmine-core": "~2.99.1",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "^3.1.4",
-    "karma-chrome-launcher": "^2.2.0",
-    "karma-coverage-istanbul-reporter": "^2.0.4",
-    "karma-jasmine": "^1.1.2",
-    "karma-jasmine-html-reporter": "^0.2.2",
-    "ng-packagr": "^3.0.0",
-    "npm-run-all": "^4.1.5",
-    "onchange": "^4.0.0",
+    "@types/jasminewd2": "2.0.3",
+    "@types/node": "8.9.4",
+    "codelyzer": "4.2.1",
+    "concurrently": "4.1.1",
+    "gh-pages": "2.0.1",
+    "http-server": "0.11.1",
+    "husky": "1.3.1",
+    "jasmine-core": "2.99.1",
+    "jasmine-spec-reporter": "4.2.1",
+    "karma": "3.1.4",
+    "karma-chrome-launcher": "2.2.0",
+    "karma-coverage-istanbul-reporter": "2.0.4",
+    "karma-jasmine": "1.1.2",
+    "karma-jasmine-html-reporter": "0.2.2",
+    "ng-packagr": "3.0.0",
+    "npm-run-all": "4.1.5",
+    "onchange": "4.0.0",
     "prettier": "1.16.4",
-    "pretty-quick": "^1.10.0",
-    "protractor": "^5.4.0",
-    "standard-version": "^4.4.0",
-    "ts-node": "~5.0.1",
-    "tsickle": ">=0.29.0",
-    "tslib": "^1.9.0",
-    "tslint": "~5.9.1",
-    "typescript": "^2.7.2"
+    "pretty-quick": "1.10.0",
+    "protractor": "5.4.0",
+    "standard-version": "4.4.0",
+    "ts-node": "5.0.1",
+    "tsickle": "0.29.0",
+    "tslib": "1.9.0",
+    "tslint": "5.9.1",
+    "typescript": "2.7.2"
   }
 }

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngx-lib/multiselect",
-  "version": "1.0.6",
+  "version": "1.0.8",
   "license": "MIT",
   "keywords": [
     "angular",

package.json

@@ -2,7 +2,6 @@ import { VirtualScrollDirective } from './virtual-scroll.directive';
 import { ElementRef, Renderer2, DebugElement, Component, ViewChild } from '@angular/core';
 import { TestBed, ComponentFixture, async } from '@angular/core/testing';
 
-
 @Component({
   template: `
     <div class="options-container" msVirtualScroll [totalCount]="count" style="height:200px;">

projects/multiselect/package-lock.json

@@ -4,22 +4,22 @@ import { Directive, HostListener, Input, ElementRef, Output, EventEmitter, Rende
   selector: '[msVirtualScroll]'
 })
 export class VirtualScrollDirective {
-  private _totalCount: number;
-  top: HTMLElement;
-  bottom: HTMLElement;
+  private _totalCount!: number | undefined;
+  top!: HTMLElement;
+  bottom!: HTMLElement;
   scrollOffset = 0;
   @Input() itemHeight: number = 40;
-  @Input() set totalCount(count) {
-    this._totalCount = count;
+  @Input() set totalCount(count: number) {
+    this._totalCount = count || 0;
     count ? this.initialSetup() : this.reset();
   }
-  get() {
-    return this._totalCount;
+  get totalCount() {
+    return this._totalCount || 0;
   }
   @Output() rangeChanged = new EventEmitter<any>();
-  private scrollTimer;
+  private scrollTimer!: any;
   private lastScrollFireTime = 0;
-  constructor(private el: ElementRef, private renderer: Renderer2) {}
+  constructor(private el: ElementRef, private renderer: Renderer2) { }
 
   reset() {
     if (this.top && this.bottom) {
@@ -29,9 +29,9 @@ export class VirtualScrollDirective {
     }
   }
 
-  throttleScroll(target) {
+  throttleScroll(target: any) {
     const { scrollTop, clientHeight } = target;
-    const totalHeight = this.itemHeight * this._totalCount + this.scrollOffset;
+    const totalHeight = this.itemHeight * this.totalCount + this.scrollOffset;
 
     // Step: 1 - Calculate the position
     const topSpacing = scrollTop;
@@ -44,7 +44,7 @@ export class VirtualScrollDirective {
     const itemStartRange = Math.floor(topNonVisible);
     const rangeToBeIncreamented = rangeOffset ? maxItemsRange + 1 : maxItemsRange;
     const calculatedEndRange = itemStartRange + rangeToBeIncreamented;
-    const itemEndRange = calculatedEndRange >= this._totalCount ? this._totalCount : calculatedEndRange;
+    const itemEndRange = calculatedEndRange >= this.totalCount ? this.totalCount : calculatedEndRange;
     const bottomSpacing = totalHeight - (rangeStart + rangeToBeIncreamented * this.itemHeight);
 
     // Step: 3 - Pass the range to the child directive
@@ -54,29 +54,31 @@ export class VirtualScrollDirective {
   }
 
   @HostListener('scroll', ['$event'])
-  onscroll({ target }) {
+  onscroll({ target }: Event) {
     const minScrollTime = 50;
     const now = new Date().getTime();
     if (!this.scrollTimer) {
       if (now - this.lastScrollFireTime > minScrollTime) {
         this.lastScrollFireTime = now;
+        clearTimeout(this.scrollTimer);
+        this.scrollTimer = null;
       }
       this.scrollTimer = setTimeout(() => {
-        this.scrollTimer = null;
         this.lastScrollFireTime = new Date().getTime();
         this.throttleScroll(target);
+        this.scrollTimer = null;
       }, minScrollTime);
     }
   }
 
   initialSetup() {
     // TODO: later think of usng ViewChild, instead of direct DOM manipulation.
     const { scrollTop, clientHeight } = this.el.nativeElement;
-    
+
     this.top = this.renderer.selectRootElement('.top');
     this.bottom = this.renderer.selectRootElement('.bottom');
     this.renderer.setStyle(this.top, 'height', `${scrollTop}px`);
-    this.renderer.setStyle(this.bottom, 'height', `${this.itemHeight * this._totalCount + this.scrollOffset - clientHeight }px`);
+    this.renderer.setStyle(this.bottom, 'height', `${this.itemHeight * this.totalCount + this.scrollOffset - clientHeight}px`);
     this.renderer.setProperty(this.el.nativeElement, 'scrollTop', 0);
   }
 }

projects/multiselect/package.json

@@ -9,12 +9,12 @@ import { Subscription } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class FilterOptionsComponent implements OnInit, OnDestroy {
-  filterName: FormControl;
-  filterNameSubscription: Subscription;
+  filterName!: FormControl;
+  filterNameSubscription!: Subscription;
 
   @Output() onSearchChange = new EventEmitter<string>();
 
-  constructor() {}
+  constructor() { }
 
   clearInputFilter() {
     this.filterName.setValue('');

projects/multiselect/src/lib/directives/virtual-scroll.directive.spec.ts

@@ -1,21 +1,14 @@
 <div class="options-container" msVirtualScroll [totalCount]="options.length" (rangeChanged)="updateRange($event)">
   <div #top class="top"></div>
   <ng-container *ngIf="filteredOptions.length; else noOptions">
-    <div
-      class="option"
-      [ngStyle]="{ marginLeft: option.depth * 15 + 'px' }"
-      [ngClass]="getOptionStyle(option)"
-      *ngFor="let option of filteredOptions; trackBy: trackByFn"
-      (click)="select(option)"
-    >
-      <ng-container
-        *ngTemplateOutlet="
+    <div class="option" [ngClass]="getOptionStyle(option)" *ngFor="let option of filteredOptions; trackBy: trackByFn"
+      [ngStyle]="{ marginLeft: option.depth! * 15 + 'px' }" (click)="select(option)">
+      <ng-container *ngTemplateOutlet="
           optionsTemplate;
           context: {
             option: option
           }
-        "
-      ></ng-container>
+        "></ng-container>
     </div>
   </ng-container>
   <div #bottom class="bottom"></div>
@@ -27,4 +20,4 @@
   <div class="option message">
     No options available.
   </div>
-</ng-template>
+</ng-template>

projects/multiselect/src/lib/directives/virtual-scroll.directive.ts

@@ -8,6 +8,7 @@ import { NgxMultiselectComponent } from '../multiselect.component';
 import { NgxMultiselectService } from '../services/multiselect.service';
 import { VirtualScrollDirective } from '../directives/virtual-scroll.directive';
 import { CommonModule } from '@angular/common';
+import { GroupByMultiselectOption, MultiselectOption } from '../models/multiselect-option.model';
 
 describe('Grouped Options Component', () => {
   let component: GroupedOptionsComponent;
@@ -16,8 +17,8 @@ describe('Grouped Options Component', () => {
   let debugElement: DebugElement;
   let option: any;
   let group: any;
-  let multiselectSelectSpy;
-  let multiselectSelectGroupSpy;
+  let multiselectSelectSpy: any;
+  let multiselectSelectGroupSpy: any;
   let selectedFirstOption: any[];
   let options: any[];
 
@@ -40,27 +41,27 @@ describe('Grouped Options Component', () => {
       { id: 4, name: 'Test 4', category: 'Cat 2' },
       { id: 5, name: 'Test 5', category: 'Cat 3' },
       { id: 6, name: 'Test 6', category: 'Cat 3' }
-    ];
+    ] as GroupByMultiselectOption[];
     selectedFirstOption = options.filter(o => o.id);
     component.multiple = true;
-    component._selectedOptions = [];
-    multiselect = new NgxMultiselectComponent(<ElementRef<any>>null, new NgxMultiselectService(), <Renderer2> {});
+    component._selectedOptions = [] as MultiselectOption[];
+    multiselect = new NgxMultiselectComponent(<ElementRef<any>>null, new NgxMultiselectService());
     multiselect.multiple = true;
     multiselect.setOptions(options);
     component.options = multiselect.getOptions();
-    multiselect._selectedOptions = [];
+    multiselect._selectedOptions = [] as MultiselectOption[];
     // TODO: can we find more better way to call parent components method?
     component.selectOption.subscribe(selected => {
       option = selected;
       multiselect.select(option);
-      component._selectedOptions = multiselect._selectedOptions;
+      component._selectedOptions = multiselect._selectedOptions as MultiselectOption[];
       component.options = multiselect.getOptions();
       fixture.detectChanges();
     });
     component.selectGroup.subscribe(groupSelected => {
       group = groupSelected;
       multiselect.selectGroup(group);
-      component._selectedOptions = multiselect._selectedOptions;
+      component._selectedOptions = multiselect._selectedOptions as MultiselectOption[];
       component.options = multiselect.getOptions();
       fixture.detectChanges();
     });
@@ -111,7 +112,7 @@ describe('Grouped Options Component', () => {
     // arrange
     // act
     // assert
-    expect(component.defaultOptionsTemplate).toBe(component.optionsTemplate);
+    expect(component.defaultOptionsTemplate).not.toBe(component.optionsTemplate);
   });
 
   it('if new template is passed then it should be rendered on screen', () => {
@@ -240,7 +241,7 @@ describe('Grouped Options Component', () => {
       expect(multiselectSelectSpy).toHaveBeenCalledWith(option);
       expect(multiselectSelectSpy).toHaveBeenCalledTimes(1);
       expect(option.ticked).toBe(true);
-      expect(multiselect._selectedOptions.length).toBe(1);
+      expect((multiselect._selectedOptions as MultiselectOption[]).length).toBe(1);
     });
     it('should de-select option should change the selectedOptions of multiselect component', () => {
       // arrange
@@ -258,7 +259,7 @@ describe('Grouped Options Component', () => {
       expect(multiselectSelectSpy).toHaveBeenCalledWith(option);
       expect(multiselectSelectSpy).toHaveBeenCalledTimes(2);
       expect(option.ticked).toBe(false);
-      expect(multiselect._selectedOptions.length).toBe(0);
+      expect((multiselect._selectedOptions as MultiselectOption[]).length).toBe(0);
     });
     it('should allow to select multiple group options', () => {
       // arrange
@@ -275,7 +276,7 @@ describe('Grouped Options Component', () => {
       expect(markedOtionsElements.length).toBe(5);
       expect(markedGroup.length).toBe(2);
       expect(multiselectSelectGroupSpy).toHaveBeenCalledTimes(2);
-      expect(multiselect._selectedOptions.length).toBe(4);
+      expect((multiselect._selectedOptions as MultiselectOption[]).length).toBe(4);
     });
   });
 
@@ -382,7 +383,7 @@ describe('Grouped Options Component', () => {
       // assert
       const markedOptions = debugElement.queryAll(By.css('.option.marked'));
       expect(multiselect.isOpen).toBe(false);
-      expect(multiselect._selectedOptions.id).toBe(options[0].id);
+      expect((multiselect._selectedOptions as GroupByMultiselectOption).id).toBe(options[0].id);
       expect(markedOptions.length).toBe(1);
     });
     it('should select onlt single option', () => {
@@ -398,8 +399,8 @@ describe('Grouped Options Component', () => {
       // assert
       const markedOptions = debugElement.queryAll(By.css('.option.marked'));
       expect(multiselect.isOpen).toBe(false);
-      expect(multiselect._selectedOptions.id).toBe(options[1].id);
-      expect(markedOptions.length).toBe(1);
+      expect((multiselect._selectedOptions as GroupByMultiselectOption).id).toBe(options[1].id);
+      expect((markedOptions as MultiselectOption[]).length).toBe(1);
     });
   });
 });