Merge pull request #4 from Zefling/master

Update for angular

.gitignore

@@ -65,3 +65,6 @@ dist
 !*.config.js
 !**/*-*.js
 !**/*-*.css
+
+# Netbeans
+/nbproject/

demo/angular/index.ts

@@ -3,129 +3,8 @@ import "core-js/es7/reflect";
 import "zone.js/dist/zone";
 
 import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
-import { enableProdMode, ChangeDetectionStrategy } from "@angular/core";
-
-enableProdMode();
-
-import { Component } from "@angular/core";
-
-import { data1, data2, data3, data5 } from "../common";
-
-@Component({
-    selector: "app",
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    template: `
-    <div style="width: 500px;">
-        <a href="https://github.com/plantain-00/select2-component/tree/master/demo/angular/index.ts" target="_blank">the source code of the demo</a>
-        <h3>options in group ({{value1}})</h3>
-        <select2 [data]="data1"
-            [value]="value1"
-            (update)="update1($event)">
-        </select2>
-        <h3>options ({{value2}})</h3>
-        <select2 [data]="data2"
-            [value]="value2"
-            (update)="update2($event)">
-        </select2>
-        <h3>less options ({{value3}})</h3>
-        <select2 [data]="data3"
-            [value]="value3"
-            (update)="update3($event)">
-        </select2>
-        <h3>disabled ({{value4}})</h3>
-        <select2 [data]="data4"
-            [value]="value4"
-            [disabled]="true">
-        </select2>
-        <h3>hide search box ({{value5}})</h3>
-        <select2 [data]="data5"
-            [value]="value5"
-            [minCountForSearch]="minCountForSearch"
-            (update)="update5($event)">
-        </select2>
-        <h3>placeholder ({{value6}})</h3>
-        <select2 [data]="data6"
-            placeholder="select an item"
-            (update)="update6($event)">
-        </select2>
-        <h3>open and search event ({{value7}})</h3>
-        <select2 [data]="data7"
-            customSearchEnabled="true"
-            (open)="open7()"
-            (search)="search7($event)"
-            (update)="update7($event)">
-        </select2>
-        <h3>multiple ({{value9}})</h3>
-        <select2 [data]="data9"
-            [value]="value9"
-            multiple="true"
-            (update)="update9($event)">
-        </select2>
-    </div>
-    `,
-})
-export class MainComponent {
-    data1 = data1;
-    data2 = data2;
-    data3 = data3;
-    data4: Select2Data = JSON.parse(JSON.stringify(data3));
-    data5 = data5;
-    data6: Select2Data = JSON.parse(JSON.stringify(data3));
-    data7: Select2Option[] = [];
-    data9: Select2Data = JSON.parse(JSON.stringify(data1));
-
-    minCountForSearch = Infinity;
-
-    value1 = "CA";
-    value2 = "CA";
-    value3 = "foo";
-    value4 = "bar";
-    value5 = "foo3";
-    value6 = "";
-    value7 = "";
-    value9: string[] = [];
-
-    update1(value: string) {
-        this.value1 = value;
-    }
-    update2(value: string) {
-        this.value2 = value;
-    }
-    update3(value: string) {
-        this.value3 = value;
-    }
-    update5(value: string) {
-        this.value5 = value;
-    }
-    update6(value: string) {
-        this.value6 = value;
-    }
-    open7() {
-        this.data7 = JSON.parse(JSON.stringify(data2));
-    }
-    update7(value: string) {
-        this.value7 = value;
-    }
-    search7(text: string) {
-        this.data7 = text
-            ? (JSON.parse(JSON.stringify(data2)) as Select2Option[]).filter(option => option.label.toLowerCase().indexOf(text.toLowerCase()) > -1)
-            : JSON.parse(JSON.stringify(data2));
-    }
-    update9(value: string[]) {
-        this.value9 = value;
-    }
-}
-
-import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
-import { FormsModule } from "@angular/forms";
-import { Select2Component, Select2Option, Select2Data } from "../../dist/angular";
-
-@NgModule({
-    imports: [BrowserModule, FormsModule],
-    declarations: [MainComponent, Select2Component],
-    bootstrap: [MainComponent],
-})
-class MainModule { }
+import { enableProdMode } from "@angular/core";
+import { MainModule } from "./main.module";
 
 platformBrowserDynamic().bootstrapModule(MainModule);
+enableProdMode();

demo/angular/main.module.ts

@@ -0,0 +1,26 @@
+import { NgModule, ApplicationRef } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { BrowserModule } from "@angular/platform-browser";
+import { FormsModule, ReactiveFormsModule } from "@angular/forms";
+
+import { Select2Module } from "../../dist/angular";
+import { MainComponent } from "./main";
+
+@NgModule({
+    declarations: [
+        MainComponent,
+    ],
+    imports: [
+        CommonModule,
+        BrowserModule,
+        FormsModule,
+        ReactiveFormsModule,
+        Select2Module,
+    ],
+    bootstrap: [MainComponent],
+})
+export class MainModule {
+    constructor(
+        public appRef: ApplicationRef,
+    ) { }
+}

demo/angular/main.ts

@@ -0,0 +1,138 @@
+import { Component, ChangeDetectionStrategy } from "@angular/core";
+import { Validators, FormControl, FormBuilder, FormGroup } from "@angular/forms";
+
+import { Select2Option, Select2Data } from "../../dist/angular";
+import { data1, data2, data3, data5 } from "../common";
+
+@Component({
+    selector: "app",
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    template: `
+    <div style="width: 500px;">
+        <a href="https://github.com/plantain-00/select2-component/tree/master/demo/angular/index.ts" target="_blank">the source code of the demo</a>
+        <h2>Standard</h2>
+        <h3>options in group ({{value1}})</h3>
+        <select2 [data]="data1"
+            [value]="value1"
+            (update)="update1($event)">
+        </select2>
+        <h3>options ({{value2}})</h3>
+        <select2 [data]="data2"
+            [value]="value2"
+            (update)="update2($event)">
+        </select2>
+        <h3>less options ({{value3}})</h3>
+        <select2 [data]="data3"
+            [value]="value3"
+            (update)="update3($event)">
+        </select2>
+        <h3>disabled ({{value4}})</h3>
+        <select2 [data]="data4"
+            [value]="value4"
+            [disabled]="true">
+        </select2>
+        <h3>hide search box ({{value5}})</h3>
+        <select2 [data]="data5"
+            [value]="value5"
+            [minCountForSearch]="minCountForSearch"
+            (update)="update5($event)">
+        </select2>
+        <h3>placeholder ({{value6}})</h3>
+        <select2 [data]="data6"
+            placeholder="select an item"
+            (update)="update6($event)">
+        </select2>
+        <h3>open and search event ({{value7}})</h3>
+        <select2 [data]="data7"
+            customSearchEnabled="true"
+            (open)="open7()"
+            (search)="search7($event)"
+            (update)="update7($event)">
+        </select2>
+        <h3>multiple ({{value9}})</h3>
+        <select2 [data]="data9"
+            [value]="value9"
+            multiple="true"
+            (update)="update9($event)">
+        </select2>
+        <h2>Material</h2>
+        <h3>options in group ({{value1}})</h3>
+        <select2 [data]="data1"
+            [value]="value1"
+            (update)="update1($event)"
+            material>
+        </select2>
+        <h3>in form ({{value10}})</h3>
+        <form [formGroup]="ctrlForm">
+            <select2
+                [(ngModel)]="value10"
+                [data]="data10"
+                formControlName="test10"
+                placeholder="Select a state"
+                material
+                ></select2>
+        </form>
+    </div>
+    `,
+})
+export class MainComponent {
+    data1 = data1;
+    data2 = data2;
+    data3 = data3;
+    data4: Select2Data = JSON.parse(JSON.stringify(data3));
+    data5 = data5;
+    data6: Select2Data = JSON.parse(JSON.stringify(data3));
+    data7: Select2Option[] = [];
+    data9: Select2Data = JSON.parse(JSON.stringify(data1));
+    data10: Select2Data = JSON.parse(JSON.stringify(data1));
+
+    minCountForSearch = Infinity;
+
+    ctrlForm: FormGroup;
+
+    value1 = "CA";
+    value2 = "CA";
+    value3 = "foo";
+    value4 = "bar";
+    value5 = "foo3";
+    value6 = "";
+    value7 = "";
+    value9: string[] = [];
+    value10 = "";
+
+    constructor(private fb: FormBuilder) {
+        this.ctrlForm = this.fb.group({
+            test10: new FormControl(null, Validators.required),
+        });
+    }
+
+    update1(value: string) {
+        this.value1 = value;
+    }
+    update2(value: string) {
+        this.value2 = value;
+    }
+    update3(value: string) {
+        this.value3 = value;
+    }
+    update5(value: string) {
+        this.value5 = value;
+    }
+    update6(value: string) {
+        this.value6 = value;
+    }
+    open7() {
+        this.data7 = JSON.parse(JSON.stringify(data2));
+    }
+    update7(value: string) {
+        this.value7 = value;
+    }
+    search7(text: string) {
+        this.data7 = text
+            ? (JSON.parse(JSON.stringify(data2)) as Select2Option[]).filter(option => option.label.toLowerCase().indexOf(text.toLowerCase()) > -1)
+            : JSON.parse(JSON.stringify(data2));
+    }
+    update9(value: string[]) {
+        this.value9 = value;
+    }
+}

package.json

@@ -21,12 +21,12 @@
   },
   "homepage": "https://github.com/plantain-00/select2-component#readme",
   "devDependencies": {
-    "@angular/common": "4.3.2",
-    "@angular/compiler": "4.3.2",
-    "@angular/core": "4.3.2",
-    "@angular/forms": "4.3.2",
-    "@angular/platform-browser": "4.3.2",
-    "@angular/platform-browser-dynamic": "4.3.2",
+    "@angular/common": "4.3.3",
+    "@angular/compiler": "4.3.3",
+    "@angular/core": "4.3.3",
+    "@angular/forms": "4.3.3",
+    "@angular/platform-browser": "4.3.3",
+    "@angular/platform-browser-dynamic": "4.3.3",
     "@types/jasmine": "2.5.53",
     "@types/react": "15.6.0",
     "@types/react-dom": "15.5.1",

src/angular-variables.ts

@@ -1 +1 @@
-export const angularTemplateHtml = `<div [class]="containerStyle"><div class="selection" (click)="toggleOpenAndClose()"><div [class]="selectionStyle" role="combobox"><span *ngIf="!multiple" class="select2-selection__rendered" [title]="option ? option.label : ''"><ng-container *ngIf="option">{{option.label}}</ng-container><span *ngIf="!option" class="select2-selection__placeholder">{{placeholder}}</span></span><span *ngIf="!multiple" class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span><ul *ngIf="multiple" class="select2-selection__rendered"><li *ngFor="let op of option" class="select2-selection__choice" [title]="op.label"><span (click)="removeSelection($event, op)" class="select2-selection__choice__remove" role="presentation">×</span>{{op.label}}</li></ul></div></div><div [class]="dropdownStyle"><div class="select2-dropdown select2-dropdown--below"><div [class]="searchStyle"><input #searchInput [(ngModel)]="searchText" (keydown)="keyDown($event)" (focusout)="focusout()" class="select2-search__field" type="search" role="textbox" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></div><div class="select2-results"><ul #results class="select2-results__options" role="tree" tabindex="-1" (keydown)="keyDown($event)" (focusout)="focusout()"><ng-container *ngFor="let groupOrOption of filteredData"><li *ngIf="groupOrOption.options" class="select2-results__option" role="group"><strong class="select2-results__group">{{groupOrOption.label}}</strong><ul class="select2-results__options select2-results__options--nested"><li *ngFor="let option of groupOrOption.options" [class]="getOptionStyle(option.value)" role="treeitem" [attr.aria-selected]="isSelected(option)" [attr.aria-disabled]="isDisabled(option)" (mouseenter)="mouseenter(option)" (click)="click(option)">{{option.label}}</li></ul></li><li *ngIf="!groupOrOption.options" [class]="getOptionStyle(groupOrOption.value)" role="treeitem" [attr.aria-selected]="isSelected(groupOrOption)" [attr.aria-disabled]="isDisabled(groupOrOption)" (mouseenter)="mouseenter(groupOrOption)" (click)="click(groupOrOption)">{{groupOrOption.label}}</li></ng-container></ul></div></div></div></div>`;
+export const angularTemplateHtml = `<div [class]="containerStyle"><div class="selection" #selection [attr.tabindex]="!this.isOpen ? tabIndex : '-1'" (click)="toggleOpenAndClose()" (focus)="focusin()" (blur)="focusout('base')" (keydown)="openKey($event)" [class.select2-focused]="focused"><div [class]="selectionStyle" role="combobox"><span *ngIf="!multiple" class="select2-selection__rendered" [title]="option ? option.label : ''"><span *ngIf="!option">&nbsp;</span><ng-container *ngIf="option">{{option.label}}</ng-container><span [class.select2-selection__placeholder__option]="option" class="select2-selection__placeholder">{{placeholder}}</span></span><span *ngIf="!multiple" class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span><ul *ngIf="multiple" class="select2-selection__rendered"><span [class.select2-selection__placeholder__option]="option?.length > 0" class="select2-selection__placeholder">{{placeholder}}</span><li *ngFor="let op of option" class="select2-selection__choice" [title]="op.label"><span (click)="removeSelection($event, op)" class="select2-selection__choice__remove" role="presentation">×</span>{{op.label}}</li></ul></div><div class="select2-subscript-wrapper"><ng-content select="select2-hint"></ng-content></div></div><div [class]="dropdownStyle"><div class="select2-dropdown select2-dropdown--below"><div [class]="searchStyle"><input #searchInput [id]="id + '-search-field'" [(value)]="searchText" (keydown)="keyDown($event)" (keyup)="searchUpdate($event)" (focusout)="focusout('searchInput')" (focus)="focuskeeper()" class="select2-search__field" type="search" role="textbox" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" [attr.tabindex]="this.isOpen ? tabIndex : '-1'"></div><div class="select2-results"><ul #results class="select2-results__options" role="tree" tabindex="-1" (keydown)="keyDown($event)" (focusout)="focusout('option')"><ng-template ngFor [ngForOf]="filteredData" let-groupOrOption><li *ngIf="groupOrOption.options" class="select2-results__option" role="group"><strong [attr.class]="'select2-results__group' + (groupOrOption.classes ? ' ' + groupOrOption.classes : '')">{{groupOrOption.label}}</strong><ul class="select2-results__options select2-results__options--nested"><li *ngFor="let option of groupOrOption.options" [class]="getOptionStyle(option)" role="treeitem" [attr.aria-selected]="isSelected(option)" [attr.aria-disabled]="isDisabled(option)" (mouseenter)="mouseenter(option)" (click)="click(option)">{{option.label}}</li></ul></li><li *ngIf="!groupOrOption.options" [class]="getOptionStyle(groupOrOption)" role="treeitem" [attr.aria-selected]="isSelected(groupOrOption)" [attr.aria-disabled]="isDisabled(groupOrOption)" (mouseenter)="mouseenter(groupOrOption)" (click)="click(groupOrOption)">{{groupOrOption.label}}</li></ng-template></ul></div></div></div></div>`;