Update to Angular 7 and add label

- add Label - ajust css - fix tslin - change key detection - add example 14
Harvest-Dev · Dec 5, 2018 · 3939d1d · 3939d1d
1 parent c2a6c31
commit 3939d1d
Show file tree

Hide file tree

Showing 10 changed files with 116 additions and 45 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,17 @@
 # Changelog of ng-select2
 
+## V7.0.0 (2018-12-05)
+
+### Changes
+
+- update to Angular 7
+- add Label with `<select2-label>` tag
+
+### Corrections
+
+- ajust CSS
+- change the key detection
+
 ## V6.0.3 (2018-10-29)
 
 ### Correction

diff --git a/package.json b/package.json
@@ -14,30 +14,30 @@
   },
   "private": false,
   "dependencies": {
-    "@angular/common": "^6.0.3",
-    "@angular/core": "^6.0.3",
-    "@angular/compiler": "^6.0.3",
-    "@angular/animations": "^6.0.3",
-    "@angular/forms": "^6.0.3",
-    "@angular/http": "^6.0.3",
-    "@angular/platform-browser": "^6.0.3",
-    "@angular/platform-browser-dynamic": "^6.0.3",
-    "@angular/router": "^6.0.3",
+    "@angular/common": "^7.0.0",
+    "@angular/core": "^7.0.0",
+    "@angular/compiler": "^7.0.0",
+    "@angular/animations": "^7.0.0",
+    "@angular/forms": "^7.0.0",
+    "@angular/http": "^7.0.0",
+    "@angular/platform-browser": "^7.0.0",
+    "@angular/platform-browser-dynamic": "^7.0.0",
+    "@angular/router": "^7.0.0",
     "core-js": "^2.5.4",
-    "rxjs": "^6.0.0",
+    "rxjs": "^6.3.0",
     "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular/compiler-cli": "^6.0.3",
+    "@angular/compiler-cli": "^7.0.0",
     "@angular-devkit/build-ng-packagr": "~0.6.8",
     "@angular-devkit/build-angular": "~0.6.8",
     "ng-packagr": "^3.0.0-rc.2",
     "tsickle": ">=0.25.5",
     "tslib": "^1.7.1",
-    "typescript": "~2.7.2",
-    "@angular/cli": "~6.0.8",
+    "typescript": "~3.1.0",
+    "@angular/cli": "^7.0.0",
     "@angular/language-service": "^6.0.3",
-    "@types/jasmine": "~2.8.6",
+    "@types/jasmine": "~3.3.1",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
     "codelyzer": "~4.2.1",
@@ -50,6 +50,6 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.3.0",
     "ts-node": "~5.0.1",
-    "tslint": "~5.9.1"
+    "tslint": "~5.11.0"
   }
-}
+}
diff --git a/projects/ng-select2-component/src/lib/select2-label.component.ts b/projects/ng-select2-component/src/lib/select2-label.component.ts
@@ -0,0 +1,4 @@
+import { Directive } from '@angular/core';
+
+@Directive({ selector: 'select2-label' })
+export class Select2Label { }
diff --git a/projects/ng-select2-component/src/lib/select2.component.html b/projects/ng-select2-component/src/lib/select2.component.html
@@ -1,3 +1,7 @@
+<div class="select2-lalel"
+     (click)="toggleOpenAndClose()">
+    <ng-content select="select2-label"></ng-content>
+</div>
 <div [class]="containerStyle">
     <div class="selection"
          #selection

diff --git a/projects/ng-select2-component/src/lib/select2.component.scss b/projects/ng-select2-component/src/lib/select2.component.scss
@@ -8,6 +8,7 @@
 
     .select2-container-dropdown {
         position: absolute;
+        width: 0px;
     }
 
     .select2-selection--single {
@@ -95,6 +96,10 @@
     }
 }
 
+.select2-container.select2-container-dropdown.select2-container--open {
+    width: 100%;
+}
+
 .select2-container--open .select2-dropdown {
     left: 0;
 }

diff --git a/projects/ng-select2-component/src/lib/select2.component.ts b/projects/ng-select2-component/src/lib/select2.component.ts
@@ -427,32 +427,32 @@ export class Select2 implements ControlValueAccessor, OnInit, OnDestroy, DoCheck
   }
 
   keyDown(e: KeyboardEvent) {
-    if (e.keyCode === 40) {
+    if (this._testKey(e, ['ArrowDown', 40])) {
       this.moveDown();
       e.preventDefault();
-    } else if (e.keyCode === 38) {
+    } else if (this._testKey(e, ['ArrowUp', 38])) {
       this.moveUp();
       e.preventDefault();
-    } else if (e.keyCode === 13) {
+    } else if (this._testKey(e, ['Enter', 13])) {
       this.selectByEnter();
       e.preventDefault();
-    } else if (e.keyCode === 9 && this.isOpen) {
+    } else if (this._testKey(e, ['Escape', 'Tab', 9, 27]) && this.isOpen) {
       this.toggleOpenAndClose();
       this.focused = false;
     }
   }
 
   openKey(e: KeyboardEvent) {
-    if (e.keyCode === 40 || e.keyCode === 38 || e.keyCode === 13) {
+    if (this._testKey(e, ['ArrowDown', 'ArrowUp', 'Enter', 40, 38, 13])) {
       this.toggleOpenAndClose();
       e.preventDefault();
-    } else if (e.keyCode === 9) {
+    } else if (this._testKey(e, ['Escape', 9])) {
       this.focused = false;
       this._onTouched();
     }
   }
 
-  trackBy(index: number, item: Select2Option): any {
+  trackBy(_index: number, item: Select2Option): any {
     return item.value;
   }
 
@@ -471,19 +471,19 @@ export class Select2 implements ControlValueAccessor, OnInit, OnDestroy, DoCheck
   removeSelection(e: MouseEvent, option: Select2Option) {
     Select2Utils.removeSelection(this.option, option);
 
-      const value = (this.option as Select2Option[]).map(op => op.value);
-      if (this._control) {
-          this._onChange(value);
-      }
-      this.update.emit(value);
+    const value = (this.option as Select2Option[]).map(op => op.value);
+    if (this._control) {
+      this._onChange(value);
+    }
+    this.update.emit(value);
 
 
     e.preventDefault();
     e.stopPropagation();
 
     if (this.isOpen) {
       this.focusSearchboxOrResultsElement();
-      }
+    }
   }
 
   /**
@@ -534,6 +534,33 @@ export class Select2 implements ControlValueAccessor, OnInit, OnDestroy, DoCheck
     return !!(isInvalid && (isTouched || isSubmitted));
   }
 
+  private _testKey(event: KeyboardEvent, refs: (number | string)[] = []): boolean {
+    return this._isKey(this._getKey(event), refs);
+  }
+
+
+  private _getKey(event: KeyboardEvent): number | string {
+    let code: number | string;
+
+    if (event.key !== undefined) {
+      code = event.key;
+    } else if (event['keyIdentifier'] !== undefined) {
+      code = event['keyIdentifier'];
+    } else if (event['keyCode'] !== undefined) {
+      code = event['keyCode'];
+    } else {
+      event.preventDefault();
+    }
+
+    return code;
+  }
+
+  private _isKey(code: number | string, refs: (number | string)[] = []): boolean {
+    return refs && refs.length > 0
+      ? refs.indexOf(code) !== -1
+      : false;
+  }
+
   /**
    * Sets the selected option based on a value. If no option can be
    * found with the designated value, the select trigger is cleared.
@@ -554,8 +581,8 @@ export class Select2 implements ControlValueAccessor, OnInit, OnDestroy, DoCheck
             );
           }
         } else {
-            this.select(Select2Utils.getOptionByValue(this.data, value));
-          }
+          this.select(Select2Utils.getOptionByValue(this.data, value));
+        }
       } else if (this._control) {
         this._control.viewToModelUpdate(value);
       }

diff --git a/projects/ng-select2-component/src/lib/select2.module.ts b/projects/ng-select2-component/src/lib/select2.module.ts
@@ -3,6 +3,7 @@ import { CommonModule } from '@angular/common';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { Select2 } from './select2.component';
 import { Select2Hint } from './select2-hint.component';
+import { Select2Label } from './select2-label.component';
 
 @NgModule({
   imports: [
@@ -12,12 +13,14 @@ import { Select2Hint } from './select2-hint.component';
   ],
   declarations: [
     Select2Hint,
+    Select2Label,
     Select2
   ],
   exports: [
     FormsModule,
     ReactiveFormsModule,
     Select2Hint,
+    Select2Label,
     Select2
   ]
 })

diff --git a/projects/ng-select2-component/src/public_api.ts b/projects/ng-select2-component/src/public_api.ts
@@ -4,5 +4,6 @@
 
 export * from './lib/select2.component';
 export * from './lib/select2-hint.component';
+export * from './lib/select2-label.component';
 export * from './lib/select2-utils';
 export * from './lib/select2.module';
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -79,10 +79,19 @@ <h3>12. boolean value ({{value12}})</h3>
   </select2>
   <h3>13. FormControl</h3>
   <form [formGroup]="fg">
-    <select2 [data]="data9"  multiple="true" id="selec2-10" formControlName="state">
+    <select2 [data]="data9"
+             multiple="true"
+             id="selec2-10"
+             formControlName="state">
     </select2>
     <button (click)="print()">Log Selected</button>
     <button (click)="resetForm()">Reset Form</button>
   </form>
-
+  <h3>14. with label ({{value14}})</h3>
+  <select2 [data]="data14"
+           [value]="value14"
+           (update)="update14($event)"
+           id="selec2-14">
+    <select2-label>Select a state</select2-label>
+  </select2>
 </div>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -22,6 +22,7 @@ export class AppComponent {
   data10: Select2Data = JSON.parse(JSON.stringify(data1));
   data11: Select2Data = JSON.parse(JSON.stringify(data1));
   data12 = data12;
+  data14 = data2;
 
   minCountForSearch = Infinity;
 
@@ -38,17 +39,18 @@ export class AppComponent {
   value10 = 'CA';
   value11 = 'CA';
   value12 = true;
+  value14 = '';
 
   fg: FormGroup = new FormGroup({
-      state: new FormControl()
+    state: new FormControl()
   });
 
   constructor(private fb: FormBuilder) {
     this.ctrlForm = this.fb.group({
       test10: new FormControl(null, Validators.required)
     });
 
-      this.fg.patchValue(this.formData());
+    this.fg.patchValue(this.formData());
   }
 
   update1(value: string) {
@@ -116,16 +118,20 @@ export class AppComponent {
     this.value12 = value;
   }
 
+  update14(value: string) {
+    this.value14 = value;
+  }
+
   resetForm() {
-      this.fg.reset(this.formData());
-    }
-    print() {
-        console.log('FormControl', this.fg.value);
-    }
+    this.fg.reset(this.formData());
+  }
+  print() {
+    console.log('FormControl', this.fg.value);
+  }
 
-    formData() {
-        return {
-            state: ['CA', 'NV']
-        };
-    }
+  formData() {
+    return {
+      state: ['CA', 'NV']
+    };
+  }
 }