= [
- {
- heading: 'Single',
- ts: require('!!prismjs?lang=typescript!./select/single-demo.ts'),
- html: require('!!prismjs?lang=markup!./select/single-demo.html')
- },
- {
- heading: 'Multiple',
- ts: require('!!prismjs?lang=typescript!./select/multiple-demo.ts'),
- html: require('!!prismjs?lang=markup!./select/multiple-demo.html')
- },
- {
- heading: 'Children',
- ts: require('!!prismjs?lang=typescript!./select/children-demo.ts'),
- html: require('!!prismjs?lang=markup!./select/children-demo.html')
- },
- {
- heading: 'Rich',
- ts: require('!!prismjs?lang=typescript!./select/rich-demo.ts'),
- html: require('!!prismjs?lang=markup!./select/rich-demo.html')
- }
-];
-
-let tabsContent:string = ``;
-tabDesc.forEach(desc => {
- tabsContent += `
-
- <${desc.heading.toLowerCase()}-demo>
- ${desc.heading.toLowerCase()}-demo>
-
-{{ currentHeading }}
-
-
-
- `;
-});
-
-@Component({
- selector: 'select-section',
- template: `
-
-
-
-
- ${tabsContent}
-
-
-
-
-
-
- `,
- directives: [SingleDemo, MultipleDemo, ChildrenDemo, RichDemo, TAB_DIRECTIVES, CORE_DIRECTIVES]
-})
-export class SelectSection {
- public currentHeading:string = 'Single';
-
- public select_zzz(e:any) {
- if (e.heading) {
- this.currentHeading = e.heading;
- }
- }
-}
diff --git a/demo/components/select/rich-demo.ts b/demo/components/select/rich-demo.ts
deleted file mode 100644
index 677cac04..00000000
--- a/demo/components/select/rich-demo.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-import {
- Component,
- OnInit,
- ViewEncapsulation
-} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
-import {ButtonCheckbox} from 'ng2-bootstrap/ng2-bootstrap';
-
-import {SELECT_DIRECTIVES} from '../../../ng2-select';
-
-const COLORS = [
- { 'name': 'Blue 10', 'hex': '#C0E6FF' },
- { 'name': 'Blue 20', 'hex': '#7CC7FF' },
- { 'name': 'Blue 30', 'hex': '#5AAAFA' },
- { 'name': 'Blue 40', 'hex': '#5596E6' },
- { 'name': 'Blue 50', 'hex': '#4178BE' },
- { 'name': 'Blue 60', 'hex': '#325C80' },
- { 'name': 'Blue 70', 'hex': '#264A60' },
- { 'name': 'Blue 80', 'hex': '#1D3649' },
- { 'name': 'Blue 90', 'hex': '#152935' },
- { 'name': 'Blue 100', 'hex': '#010205' },
- { 'name': 'Green 10', 'hex': '#C8F08F' },
- { 'name': 'Green 20', 'hex': '#B4E051' },
- { 'name': 'Green 30', 'hex': '#8CD211' },
- { 'name': 'Green 40', 'hex': '#5AA700' },
- { 'name': 'Green 50', 'hex': '#4B8400' },
- { 'name': 'Green 60', 'hex': '#2D660A' },
- { 'name': 'Green 70', 'hex': '#144D14' },
- { 'name': 'Green 80', 'hex': '#0A3C02' },
- { 'name': 'Green 90', 'hex': '#0C2808' },
- { 'name': 'Green 100', 'hex': '#010200' },
- { 'name': 'Red 10', 'hex': '#FFD2DD' },
- { 'name': 'Red 20', 'hex': '#FFA5B4' },
- { 'name': 'Red 30', 'hex': '#FF7D87' },
- { 'name': 'Red 40', 'hex': '#FF5050' },
- { 'name': 'Red 50', 'hex': '#E71D32' },
- { 'name': 'Red 60', 'hex': '#AD1625' },
- { 'name': 'Red 70', 'hex': '#8C101C' },
- { 'name': 'Red 80', 'hex': '#6E0A1E' },
- { 'name': 'Red 90', 'hex': '#4C0A17' },
- { 'name': 'Red 100', 'hex': '#040001' },
- { 'name': 'Yellow 10', 'hex': '#FDE876' },
- { 'name': 'Yellow 20', 'hex': '#FDD600' },
- { 'name': 'Yellow 30', 'hex': '#EFC100' },
- { 'name': 'Yellow 40', 'hex': '#BE9B00' },
- { 'name': 'Yellow 50', 'hex': '#8C7300' },
- { 'name': 'Yellow 60', 'hex': '#735F00' },
- { 'name': 'Yellow 70', 'hex': '#574A00' },
- { 'name': 'Yellow 80', 'hex': '#3C3200' },
- { 'name': 'Yellow 90', 'hex': '#281E00' },
- { 'name': 'Yellow 100', 'hex': '#020100' }
-];
-
-// webpack html imports
-let template = require('./rich-demo.html');
-
-@Component({
- selector: 'rich-demo',
- template: template,
- styles: [`colorbox,.colorbox { display:inline-block; height:14px; width:14px;margin-right:4px; border:1px solid #000;}`],
- directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox],
- encapsulation: ViewEncapsulation.None // Enable dynamic HTML styles
-})
-export class RichDemo implements OnInit {
- private value:any = {};
- private _disabledV:string = '0';
- private disabled:boolean = false;
- private items:Array = [];
-
- ngOnInit() {
- COLORS.forEach( c => {
- this.items.push( {
- id : c.hex,
- text: `${c.name} (${c.hex})`
- });
- });
- }
-
- private get disabledV():string {
- return this._disabledV;
- }
-
- private set disabledV(value:string) {
- this._disabledV = value;
- this.disabled = this._disabledV === '1';
- }
-
- private selected(value:any) {
- console.log('Selected value is: ', value);
- }
-
- private removed(value:any) {
- console.log('Removed value is: ', value);
- }
-
- private typed(value:any) {
- console.log('New search input: ', value);
- }
-
- private refreshValue(value:any) {
- this.value = value;
- }
-}
-
diff --git a/demo/index.ts b/demo/index.ts
deleted file mode 100644
index 0c7142af..00000000
--- a/demo/index.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import {bootstrap} from 'angular2/platform/browser';
-import {Component} from 'angular2/core';
-import {NgClass} from 'angular2/common';
-
-import {SelectSection} from './components/select-section';
-
-let gettingStarted = require('./getting-started.md');
-
-@Component({
- selector: 'app',
- template: `
-
-
-
-
-
-
-
-
-
- `,
- directives: [
- NgClass,
- SelectSection
- ]
-})
-export class Demo {
-}
-
-bootstrap(Demo);
diff --git a/demo/src/app/app.component.ts b/demo/src/app/app.component.ts
new file mode 100644
index 00000000..dafe080a
--- /dev/null
+++ b/demo/src/app/app.component.ts
@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+
+let gettingStarted = require('html-loader!markdown-loader!../getting-started.md');
+
+@Component({
+ selector: 'demo-app',
+ template: `
+
+
+
+
+
+
+
+
+
+ `
+})
+export class AppComponent {
+ public gettingStarted:string = gettingStarted;
+ public ngAfterContentInit(): any {
+ setTimeout(()=>{
+ if (typeof PR !== 'undefined') {
+ // google code-prettify
+ PR.prettyPrint();
+ }
+ }, 150);
+ }
+}
diff --git a/demo/src/app/app.module.ts b/demo/src/app/app.module.ts
new file mode 100644
index 00000000..408e0023
--- /dev/null
+++ b/demo/src/app/app.module.ts
@@ -0,0 +1,38 @@
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { BrowserModule } from '@angular/platform-browser';
+import { CommonModule } from '@angular/common';
+import { TabsModule, ButtonsModule } from 'ngx-bootstrap';
+
+import { SelectModule } from 'ng2-select';
+import { AppComponent } from './app.component';
+import { SelectSectionComponent } from './components/select-section';
+import { ChildrenDemoComponent } from './components/select/children-demo';
+import { MultipleDemoComponent } from './components/select/multiple-demo';
+import { RichDemoComponent } from './components/select/rich-demo';
+import { SingleDemoComponent } from './components/select/single-demo';
+import { SampleSectionComponent } from './components/sample-section.component';
+
+@NgModule({
+ declarations: [
+ AppComponent,
+ SampleSectionComponent,
+ SelectSectionComponent,
+ ChildrenDemoComponent,
+ MultipleDemoComponent,
+ RichDemoComponent,
+ SingleDemoComponent
+ ],
+ imports: [
+ BrowserModule,
+ FormsModule,
+ SelectModule,
+ TabsModule.forRoot(),
+ ButtonsModule.forRoot(),
+ CommonModule
+ ],
+ bootstrap: [AppComponent]
+})
+
+export class AppModule {
+}
diff --git a/demo/src/app/components/sample-section.component.html b/demo/src/app/components/sample-section.component.html
new file mode 100644
index 00000000..f2759f9e
--- /dev/null
+++ b/demo/src/app/components/sample-section.component.html
@@ -0,0 +1,18 @@
+
+
diff --git a/demo/src/app/components/sample-section.component.ts b/demo/src/app/components/sample-section.component.ts
new file mode 100644
index 00000000..31768ac9
--- /dev/null
+++ b/demo/src/app/components/sample-section.component.ts
@@ -0,0 +1,9 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+ selector: 'sample-section',
+ templateUrl: './sample-section.component.html'
+})
+export class SampleSectionComponent{
+ @Input() public desc:any;
+}
diff --git a/demo/src/app/components/select-section.ts b/demo/src/app/components/select-section.ts
new file mode 100644
index 00000000..aa4d2f1c
--- /dev/null
+++ b/demo/src/app/components/select-section.ts
@@ -0,0 +1,63 @@
+import { Component } from '@angular/core';
+
+let doc = require('html-loader!markdown-loader!../../doc.md');
+
+let tabDesc: any = {
+ single: {
+ heading: 'Single',
+ ts: require('!!raw-loader?lang=typescript!./select/single-demo.ts'),
+ html: require('!!raw-loader?lang=markup!./select/single-demo.html')
+ }
+ ,
+ multiple: {
+ heading: 'Multiple',
+ ts: require('!!raw-loader?lang=typescript!./select/multiple-demo.ts'),
+ html: require('!!raw-loader?lang=markup!./select/multiple-demo.html')
+ }
+ ,
+ children: {
+ heading: 'Children',
+ ts: require('!!raw-loader?lang=typescript!./select/children-demo.ts'),
+ html: require('!!raw-loader?lang=markup!./select/children-demo.html')
+ }
+ ,
+ rich: {
+ heading: 'Rich',
+ ts: require('!!raw-loader?lang=typescript!./select/rich-demo.ts'),
+ html: require('!!raw-loader?lang=markup!./select/rich-demo.html')
+ }
+};
+
+@Component({
+ selector: 'select-section',
+ template: `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ `
+})
+export class SelectSectionComponent {
+ public currentHeading: string = 'Single';
+ public tabDesc: any = tabDesc;
+ public doc: string = doc;
+}
diff --git a/demo/components/select/children-demo.html b/demo/src/app/components/select/children-demo.html
similarity index 92%
rename from demo/components/select/children-demo.html
rename to demo/src/app/components/select/children-demo.html
index e38dade4..6107c790 100644
--- a/demo/components/select/children-demo.html
+++ b/demo/src/app/components/select/children-demo.html
@@ -14,7 +14,7 @@ Select a city by country
diff --git a/demo/components/select/children-demo.ts b/demo/src/app/components/select/children-demo.ts
similarity index 83%
rename from demo/components/select/children-demo.ts
rename to demo/src/app/components/select/children-demo.ts
index a825a5b6..f277a295 100644
--- a/demo/components/select/children-demo.ts
+++ b/demo/src/app/components/select/children-demo.ts
@@ -1,22 +1,11 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
-import {ButtonCheckbox} from 'ng2-bootstrap/ng2-bootstrap';
-
-import {SELECT_DIRECTIVES} from '../../../ng2-select';
-
-// webpack html imports
-let template = require('./children-demo.html');
+import { Component } from '@angular/core';
@Component({
selector: 'children-demo',
- template: template,
- directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox]
+ templateUrl: './children-demo.html'
})
-export class ChildrenDemo {
- private value:any = {};
- private _disabledV:string = '0';
- private disabled:boolean = false;
- private items:Array = [
+export class ChildrenDemoComponent {
+ public items:Array = [
{
text: 'Austria',
children: [
@@ -192,25 +181,28 @@ export class ChildrenDemo {
]
}
];
+ public value:any = {};
+ public _disabledV:string = '0';
+ public disabled:boolean = false;
- private get disabledV():string {
+ public get disabledV():string {
return this._disabledV;
}
- private set disabledV(value:string) {
+ public set disabledV(value:string) {
this._disabledV = value;
this.disabled = this._disabledV === '1';
}
- private selected(value:any) {
+ public selected(value:any):void {
console.log('Selected value is: ', value);
}
- private removed(value:any) {
+ public removed(value:any):void {
console.log('Removed value is: ', value);
}
- private refreshValue(value:any) {
+ public refreshValue(value:any):void {
this.value = value;
}
}
diff --git a/demo/components/select/multiple-demo.html b/demo/src/app/components/select/multiple-demo.html
similarity index 83%
rename from demo/components/select/multiple-demo.html
rename to demo/src/app/components/select/multiple-demo.html
index 84a08a72..9345fc79 100644
--- a/demo/components/select/multiple-demo.html
+++ b/demo/src/app/components/select/multiple-demo.html
@@ -1,7 +1,6 @@
Select multiple cities
- Select multiple cities
diff --git a/demo/components/select/multiple-demo.ts b/demo/src/app/components/select/multiple-demo.ts
similarity index 51%
rename from demo/components/select/multiple-demo.ts
rename to demo/src/app/components/select/multiple-demo.ts
index c0877d31..2870ee8c 100644
--- a/demo/components/select/multiple-demo.ts
+++ b/demo/src/app/components/select/multiple-demo.ts
@@ -1,22 +1,11 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
-import {ButtonCheckbox} from 'ng2-bootstrap/ng2-bootstrap';
-
-import {SELECT_DIRECTIVES} from '../../../ng2-select';
-
-// webpack html imports
-let template = require('./multiple-demo.html');
+import { Component } from '@angular/core';
@Component({
selector: 'multiple-demo',
- template: template,
- directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox]
+ templateUrl: './multiple-demo.html'
})
-export class MultipleDemo {
- private value:any = ['Athens'];
- private _disabledV:string = '0';
- private disabled:boolean = false;
- private items:Array = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona',
+export class MultipleDemoComponent {
+ public items:Array = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona',
'Berlin', 'Birmingham', 'Bradford', 'Bremen', 'Brussels', 'Bucharest',
'Budapest', 'Cologne', 'Copenhagen', 'Dortmund', 'Dresden', 'Dublin', 'Düsseldorf',
'Essen', 'Frankfurt', 'Genoa', 'Glasgow', 'Gothenburg', 'Hamburg', 'Hannover',
@@ -26,31 +15,35 @@ export class MultipleDemo {
'Sofia', 'Stockholm', 'Stuttgart', 'The Hague', 'Turin', 'Valencia', 'Vienna',
'Vilnius', 'Warsaw', 'Wrocław', 'Zagreb', 'Zaragoza'];
- private get disabledV():string {
+ public value:any = ['Athens'];
+ public _disabledV:string = '0';
+ public disabled:boolean = false;
+
+ public get disabledV():string {
return this._disabledV;
}
- private set disabledV(value:string) {
+ public set disabledV(value:string) {
this._disabledV = value;
this.disabled = this._disabledV === '1';
}
- private selected(value:any) {
+ public selected(value:any):void {
console.log('Selected value is: ', value);
}
- private removed(value:any) {
+ public removed(value:any):void {
console.log('Removed value is: ', value);
}
- private refreshValue(value:any) {
+ public refreshValue(value:any):void {
this.value = value;
}
- private itemsToString(value:Array = []) {
+ public itemsToString(value:Array = []):string {
return value
- .map(item => {
- return item.text;
- }).join(',');
+ .map((item:any) => {
+ return item.text;
+ }).join(',');
}
}
diff --git a/demo/components/select/rich-demo.html b/demo/src/app/components/select/rich-demo.html
similarity index 92%
rename from demo/components/select/rich-demo.html
rename to demo/src/app/components/select/rich-demo.html
index 927711e1..021b8aa5 100644
--- a/demo/components/select/rich-demo.html
+++ b/demo/src/app/components/select/rich-demo.html
@@ -15,7 +15,7 @@ Select a color
diff --git a/demo/src/app/components/select/rich-demo.ts b/demo/src/app/components/select/rich-demo.ts
new file mode 100644
index 00000000..1c1e97e2
--- /dev/null
+++ b/demo/src/app/components/select/rich-demo.ts
@@ -0,0 +1,91 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+const COLORS = [
+ {'name': 'Blue 10', 'hex': '#C0E6FF'},
+ {'name': 'Blue 20', 'hex': '#7CC7FF'},
+ {'name': 'Blue 30', 'hex': '#5AAAFA'},
+ {'name': 'Blue 40', 'hex': '#5596E6'},
+ {'name': 'Blue 50', 'hex': '#4178BE'},
+ {'name': 'Blue 60', 'hex': '#325C80'},
+ {'name': 'Blue 70', 'hex': '#264A60'},
+ {'name': 'Blue 80', 'hex': '#1D3649'},
+ {'name': 'Blue 90', 'hex': '#152935'},
+ {'name': 'Blue 100', 'hex': '#010205'},
+ {'name': 'Green 10', 'hex': '#C8F08F'},
+ {'name': 'Green 20', 'hex': '#B4E051'},
+ {'name': 'Green 30', 'hex': '#8CD211'},
+ {'name': 'Green 40', 'hex': '#5AA700'},
+ {'name': 'Green 50', 'hex': '#4B8400'},
+ {'name': 'Green 60', 'hex': '#2D660A'},
+ {'name': 'Green 70', 'hex': '#144D14'},
+ {'name': 'Green 80', 'hex': '#0A3C02'},
+ {'name': 'Green 90', 'hex': '#0C2808'},
+ {'name': 'Green 100', 'hex': '#010200'},
+ {'name': 'Red 10', 'hex': '#FFD2DD'},
+ {'name': 'Red 20', 'hex': '#FFA5B4'},
+ {'name': 'Red 30', 'hex': '#FF7D87'},
+ {'name': 'Red 40', 'hex': '#FF5050'},
+ {'name': 'Red 50', 'hex': '#E71D32'},
+ {'name': 'Red 60', 'hex': '#AD1625'},
+ {'name': 'Red 70', 'hex': '#8C101C'},
+ {'name': 'Red 80', 'hex': '#6E0A1E'},
+ {'name': 'Red 90', 'hex': '#4C0A17'},
+ {'name': 'Red 100', 'hex': '#040001'},
+ {'name': 'Yellow 10', 'hex': '#FDE876'},
+ {'name': 'Yellow 20', 'hex': '#FDD600'},
+ {'name': 'Yellow 30', 'hex': '#EFC100'},
+ {'name': 'Yellow 40', 'hex': '#BE9B00'},
+ {'name': 'Yellow 50', 'hex': '#8C7300'},
+ {'name': 'Yellow 60', 'hex': '#735F00'},
+ {'name': 'Yellow 70', 'hex': '#574A00'},
+ {'name': 'Yellow 80', 'hex': '#3C3200'},
+ {'name': 'Yellow 90', 'hex': '#281E00'},
+ {'name': 'Yellow 100', 'hex': '#020100'}
+];
+
+@Component({
+ selector: 'rich-demo',
+ templateUrl: './rich-demo.html',
+ styles: [`colorbox,.colorbox { display:inline-block; height:14px; width:14px;margin-right:4px; border:1px solid #000;}`],
+ encapsulation: ViewEncapsulation.None // Enable dynamic HTML styles
+})
+export class RichDemoComponent implements OnInit {
+ public value:any = {};
+ public _disabledV:string = '0';
+ public disabled:boolean = false;
+ public items:Array = [];
+
+ public ngOnInit():any {
+ COLORS.forEach((color:{name:string, hex:string}) => {
+ this.items.push({
+ id: color.hex,
+ text: `${color.name} (${color.hex})`
+ });
+ });
+ }
+
+ public get disabledV():string {
+ return this._disabledV;
+ }
+
+ public set disabledV(value:string) {
+ this._disabledV = value;
+ this.disabled = this._disabledV === '1';
+ }
+
+ public selected(value:any):void {
+ console.log('Selected value is: ', value);
+ }
+
+ public removed(value:any):void {
+ console.log('Removed value is: ', value);
+ }
+
+ public typed(value:any):void {
+ console.log('New search input: ', value);
+ }
+
+ public refreshValue(value:any):void {
+ this.value = value;
+ }
+}
diff --git a/demo/components/select/single-demo.html b/demo/src/app/components/select/single-demo.html
similarity index 92%
rename from demo/components/select/single-demo.html
rename to demo/src/app/components/select/single-demo.html
index 7c610da5..fabfd27f 100644
--- a/demo/components/select/single-demo.html
+++ b/demo/src/app/components/select/single-demo.html
@@ -15,7 +15,7 @@ Select a single city
diff --git a/demo/components/select/single-demo.ts b/demo/src/app/components/select/single-demo.ts
similarity index 54%
rename from demo/components/select/single-demo.ts
rename to demo/src/app/components/select/single-demo.ts
index 3da0ad80..f7dfd565 100644
--- a/demo/components/select/single-demo.ts
+++ b/demo/src/app/components/select/single-demo.ts
@@ -1,22 +1,11 @@
-import {Component} from 'angular2/core';
-import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass} from 'angular2/common';
-import {ButtonCheckbox} from 'ng2-bootstrap/ng2-bootstrap';
-
-import {SELECT_DIRECTIVES} from '../../../ng2-select';
-
-// webpack html imports
-let template = require('./single-demo.html');
+import { Component } from '@angular/core';
@Component({
selector: 'single-demo',
- template: template,
- directives: [SELECT_DIRECTIVES, NgClass, CORE_DIRECTIVES, FORM_DIRECTIVES, ButtonCheckbox]
+ templateUrl: './single-demo.html'
})
-export class SingleDemo {
- private value:any = {};
- private _disabledV:string = '0';
- private disabled:boolean = false;
- private items:Array = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona',
+export class SingleDemoComponent {
+ public items:Array = ['Amsterdam', 'Antwerp', 'Athens', 'Barcelona',
'Berlin', 'Birmingham', 'Bradford', 'Bremen', 'Brussels', 'Bucharest',
'Budapest', 'Cologne', 'Copenhagen', 'Dortmund', 'Dresden', 'Dublin',
'Düsseldorf', 'Essen', 'Frankfurt', 'Genoa', 'Glasgow', 'Gothenburg',
@@ -27,28 +16,32 @@ export class SingleDemo {
'The Hague', 'Turin', 'Valencia', 'Vienna', 'Vilnius', 'Warsaw', 'Wrocław',
'Zagreb', 'Zaragoza', 'Łódź'];
- private get disabledV():string {
+ public value:any = {};
+ public _disabledV:string = '0';
+ public disabled:boolean = false;
+
+ public get disabledV():string {
return this._disabledV;
}
- private set disabledV(value:string) {
+ public set disabledV(value:string) {
this._disabledV = value;
this.disabled = this._disabledV === '1';
}
- private selected(value:any) {
+ public selected(value:any):void {
console.log('Selected value is: ', value);
}
- private removed(value:any) {
+ public removed(value:any):void {
console.log('Removed value is: ', value);
}
- private typed(value:any) {
+ public typed(value:any):void {
console.log('New search input: ', value);
}
- private refreshValue(value:any) {
+ public refreshValue(value:any):void {
this.value = value;
}
}
diff --git a/demo/src/app/index.ts b/demo/src/app/index.ts
new file mode 100644
index 00000000..875bdb2f
--- /dev/null
+++ b/demo/src/app/index.ts
@@ -0,0 +1,2 @@
+export * from './app.component';
+export * from './app.module';
diff --git a/demo/assets/css/glyphicons.css b/demo/src/assets/css/glyphicons.css
similarity index 100%
rename from demo/assets/css/glyphicons.css
rename to demo/src/assets/css/glyphicons.css
diff --git a/components/css/ng2-select.css b/demo/src/assets/css/ng2-select.css
similarity index 100%
rename from components/css/ng2-select.css
rename to demo/src/assets/css/ng2-select.css
diff --git a/demo/src/assets/css/prettify-angulario.css b/demo/src/assets/css/prettify-angulario.css
new file mode 100644
index 00000000..77facd04
--- /dev/null
+++ b/demo/src/assets/css/prettify-angulario.css
@@ -0,0 +1,217 @@
+.prettyprint {
+ white-space: pre-wrap;
+ background: #F5F6F7;
+ font-family: Monaco,"Lucida Console",monospace;
+ color: #5C707A;
+ width: auto;
+ overflow: auto;
+ position: relative;
+ padding: 0;
+ font-size: 13px;
+ line-height: 24px;
+ margin-bottom: 24px;
+ border-radius: 4px;
+ padding: 16px 32px
+}
+
+.prettyprint.linenums,.prettyprint[class^="linenums:"],.prettyprint[class*=" linenums:"] {
+ padding: 0
+}
+
+.prettyprint.is-showcase {
+ border: 4px solid #0273D4
+}
+
+.prettyprint code {
+ background: none;
+ font-size: 13px;
+ padding: 0
+}
+
+.prettyprint ol {
+ background: #F5F6F7;
+ padding: 16px 32px 16px 56px;
+ margin: 0;
+ overflow: auto;
+ font-size: 13px
+}
+
+.prettyprint ol li,.prettyprint .tag {
+ color: #7a8b94;
+ background: none;
+ margin-bottom: 5px;
+ line-height: normal;
+ list-style-type: decimal;
+ font-size: 12px
+}
+
+.prettyprint ol li:last-child {
+ margin-bottom: 0
+}
+
+.prettyprint ol li code {
+ background: none;
+ font-size: 13px
+}
+
+.prettyprint .pnk,.prettyprint .blk {
+ border-radius: 4px;
+ padding: 2px 4px
+}
+
+.prettyprint .pnk {
+ background: #CFD8DC;
+ color: #5C707A
+}
+
+.prettyprint .blk {
+ background: #E0E0E0
+}
+
+.prettyprint .otl {
+ outline: 1px solid rgba(169,169,169,0.56)
+}
+
+.prettyprint .kwd {
+ color: #D43669
+}
+
+.prettyprint .typ,.prettyprint .tag {
+ color: #D43669
+}
+
+.prettyprint .str,.prettyprint .atv {
+ color: #647f11
+}
+
+.prettyprint .atn {
+ /*color: #647f11*/
+ color: #31708f
+}
+
+.prettyprint .com {
+ color: #647f11
+}
+
+.prettyprint .lit {
+ color: #647f11
+}
+
+.prettyprint .pun {
+ color: #7a8b94
+}
+
+.prettyprint .pln {
+ color: #5C707A
+ /*color: #8a6d3b*/
+}
+
+.prettyprint .dec {
+ color: #647f11
+}
+
+@media print {
+ .prettyprint {
+ background: #F5F6F7;
+ border: none;
+ box-shadow: none
+ }
+
+ .prettyprint ol {
+ background: #F5F6F7
+ }
+
+ .prettyprint .kwd {
+ color: #D43669
+ }
+
+ .prettyprint .typ,.prettyprint .tag {
+ color: #D43669
+ }
+
+ .prettyprint .str,.prettyprint .atv {
+ color: #647f11
+ }
+
+ .prettyprint .atn {
+ /*color: #647f11*/
+ color: #31708f
+ }
+
+ .prettyprint .com {
+ color: #647f11
+ }
+
+ .prettyprint .lit {
+ color: #647f11
+ }
+
+ .prettyprint .pun {
+ color: #7a8b94
+ }
+
+ .prettyprint .pln {
+ color: #5C707A
+ }
+
+ .prettyprint .dec {
+ color: #647f11
+ }
+}
+
+h1 .prettyprint,h2 .prettyprint,h3 .prettyprint,h4 .prettyprint {
+ background: none;
+ font-family: Monaco,"Lucida Console",monospace;
+ color: #253238;
+ overflow: hidden;
+ position: relative;
+ font-size: 15px;
+ font-weight: 600;
+ line-height: 24px;
+ margin: 0;
+ border: none;
+ box-shadow: none;
+ padding: 0
+}
+
+h1 .prettyprint code,h2 .prettyprint code,h3 .prettyprint code,h4 .prettyprint code {
+ background: none;
+ font-size: 15px;
+ padding: 0
+}
+
+h1 .prettyprint .kwd,h2 .prettyprint .kwd,h3 .prettyprint .kwd,h4 .prettyprint .kwd {
+ color: #253238
+}
+
+h1 .prettyprint .typ,h1 .prettyprint .tag,h2 .prettyprint .typ,h2 .prettyprint .tag,h3 .prettyprint .typ,h3 .prettyprint .tag,h4 .prettyprint .typ,h4 .prettyprint .tag {
+ color: #B52E31
+}
+
+h1 .prettyprint .str,h1 .prettyprint .atv,h2 .prettyprint .str,h2 .prettyprint .atv,h3 .prettyprint .str,h3 .prettyprint .atv,h4 .prettyprint .str,h4 .prettyprint .atv {
+ color: #9d8d00
+}
+
+h1 .prettyprint .atn,h2 .prettyprint .atn,h3 .prettyprint .atn,h4 .prettyprint .atn {
+ color: #71a436
+}
+
+h1 .prettyprint .com,h2 .prettyprint .com,h3 .prettyprint .com,h4 .prettyprint .com {
+ color: #AFBEC5
+}
+
+h1 .prettyprint .lit,h2 .prettyprint .lit,h3 .prettyprint .lit,h4 .prettyprint .lit {
+ color: #9d8d00
+}
+
+h1 .prettyprint .pun,h2 .prettyprint .pun,h3 .prettyprint .pun,h4 .prettyprint .pun {
+ color: #000
+}
+
+h1 .prettyprint .pln,h2 .prettyprint .pln,h3 .prettyprint .pln,h4 .prettyprint .pln {
+ color: #000
+}
+
+h1 .prettyprint .dec,h2 .prettyprint .dec,h3 .prettyprint .dec,h4 .prettyprint .dec {
+ color: #8762c6
+}
diff --git a/demo/assets/css/style.css b/demo/src/assets/css/style.css
similarity index 100%
rename from demo/assets/css/style.css
rename to demo/src/assets/css/style.css
diff --git a/demo/assets/fonts/glyphicons-halflings-regular.eot b/demo/src/assets/fonts/glyphicons-halflings-regular.eot
similarity index 100%
rename from demo/assets/fonts/glyphicons-halflings-regular.eot
rename to demo/src/assets/fonts/glyphicons-halflings-regular.eot
diff --git a/demo/assets/fonts/glyphicons-halflings-regular.svg b/demo/src/assets/fonts/glyphicons-halflings-regular.svg
similarity index 100%
rename from demo/assets/fonts/glyphicons-halflings-regular.svg
rename to demo/src/assets/fonts/glyphicons-halflings-regular.svg
diff --git a/demo/assets/fonts/glyphicons-halflings-regular.ttf b/demo/src/assets/fonts/glyphicons-halflings-regular.ttf
similarity index 100%
rename from demo/assets/fonts/glyphicons-halflings-regular.ttf
rename to demo/src/assets/fonts/glyphicons-halflings-regular.ttf
diff --git a/demo/assets/fonts/glyphicons-halflings-regular.woff b/demo/src/assets/fonts/glyphicons-halflings-regular.woff
similarity index 100%
rename from demo/assets/fonts/glyphicons-halflings-regular.woff
rename to demo/src/assets/fonts/glyphicons-halflings-regular.woff
diff --git a/demo/assets/fonts/glyphicons-halflings-regular.woff2 b/demo/src/assets/fonts/glyphicons-halflings-regular.woff2
similarity index 100%
rename from demo/assets/fonts/glyphicons-halflings-regular.woff2
rename to demo/src/assets/fonts/glyphicons-halflings-regular.woff2
diff --git a/demo/src/assets/js/prettify.min.js b/demo/src/assets/js/prettify.min.js
new file mode 100644
index 00000000..e83633dd
--- /dev/null
+++ b/demo/src/assets/js/prettify.min.js
@@ -0,0 +1,36 @@
+!function () { var q = null; window.PR_SHOULD_USE_CONTINUATION = !0;
+ (function () { function S(a) { function d(e) { var b = e.charCodeAt(0); if (b !== 92) return b; var a = e.charAt(1); return (b = r[a]) ? b : '0' <= a && a <= '7' ? parseInt(e.substring(1), 8) : a === 'u' || a === 'x' ? parseInt(e.substring(2), 16) : e.charCodeAt(1); } function g(e) { if (e < 32) return (e < 16 ? '\\x0' : '\\x') + e.toString(16); e = String.fromCharCode(e); return e === '\\' || e === '-' || e === ']' || e === '^' ? '\\' + e : e; } function b(e) { var b = e.substring(1, e.length - 1).match(/\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\[0-3][0-7]{0,2}|\\[0-7]{1,2}|\\[\S\s]|[^\\]/g), e = [], a =
+b[0] === '^', c = ['[']; a && c.push('^'); for (var a = a ? 1 : 0, f = b.length; a < f; ++a) { var h = b[a]; if (/\\[bdsw]/i.test(h))c.push(h); else { var h = d(h), l; a + 2 < f && '-' === b[a + 1] ? (l = d(b[a + 2]), a += 2) : l = h; e.push([h, l]); l < 65 || h > 122 || (l < 65 || h > 90 || e.push([Math.max(65, h) | 32, Math.min(l, 90) | 32]), l < 97 || h > 122 || e.push([Math.max(97, h) & -33, Math.min(l, 122) & -33])); } }e.sort(function (e, a) { return e[0] - a[0] || a[1] - e[1]; }); b = []; f = []; for (a = 0; a < e.length; ++a)h = e[a], h[0] <= f[1] + 1 ? f[1] = Math.max(f[1], h[1]) : b.push(f = h); for (a = 0; a < b.length; ++a)h = b[a], c.push(g(h[0])),
+h[1] > h[0] && (h[1] + 1 > h[0] && c.push('-'), c.push(g(h[1]))); c.push(']'); return c.join(''); } function s(e) { for (var a = e.source.match(/\[(?:[^\\\]]|\\[\S\s])*]|\\u[\dA-Fa-f]{4}|\\x[\dA-Fa-f]{2}|\\\d+|\\[^\dux]|\(\?[!:=]|[()^]|[^()[\\^]+/g), c = a.length, d = [], f = 0, h = 0; f < c; ++f) { var l = a[f]; l === '(' ? ++h : '\\' === l.charAt(0) && (l = +l.substring(1)) && (l <= h ? d[l] = -1 : a[f] = g(l)); } for (f = 1; f < d.length; ++f)-1 === d[f] && (d[f] = ++x); for (h = f = 0; f < c; ++f)l = a[f], l === '(' ? (++h, d[h] || (a[f] = '(?:')) : '\\' === l.charAt(0) && (l = +l.substring(1)) && l <= h &&
+(a[f] = '\\' + d[l]); for (f = 0; f < c; ++f)'^' === a[f] && '^' !== a[f + 1] && (a[f] = ''); if (e.ignoreCase && m) for (f = 0; f < c; ++f)l = a[f], e = l.charAt(0), l.length >= 2 && e === '[' ? a[f] = b(l) : e !== '\\' && (a[f] = l.replace(/[A-Za-z]/g, function (a) { a = a.charCodeAt(0); return '[' + String.fromCharCode(a & -33, a | 32) + ']'; })); return a.join(''); } for (var x = 0, m = !1, j = !1, k = 0, c = a.length; k < c; ++k) { var i = a[k]; if (i.ignoreCase)j = !0; else if (/[a-z]/i.test(i.source.replace(/\\u[\da-f]{4}|\\x[\da-f]{2}|\\[^UXux]/gi, ''))) { m = !0; j = !1; break; } } for (var r = {
+ b: 8, t: 9, n: 10, v: 11,
+ f: 12, r: 13
+ }, n = [], k = 0, c = a.length; k < c; ++k) { i = a[k]; if (i.global || i.multiline) throw Error('' + i); n.push('(?:' + s(i) + ')'); } return RegExp(n.join('|'), j ? 'gi' : 'g'); } function T(a, d) { function g(a) { var c = a.nodeType; if (c == 1) { if (!b.test(a.className)) { for (c = a.firstChild; c; c = c.nextSibling)g(c); c = a.nodeName.toLowerCase(); if ('br' === c || 'li' === c)s[j] = '\n', m[j << 1] = x++, m[j++ << 1 | 1] = a; } } else if (c == 3 || c == 4)c = a.nodeValue, c.length && (c = d ? c.replace(/\r\n?/g, '\n') : c.replace(/[\t\n\r ]+/g, ' '), s[j] = c, m[j << 1] = x, x += c.length, m[j++ << 1 | 1] =
+a); } var b = /(?:^|\s)nocode(?:\s|$)/, s = [], x = 0, m = [], j = 0; g(a); return {a: s.join('').replace(/\n$/, ''), d: m}; } function H(a, d, g, b) { d && (a = {a: d, e: a}, g(a), b.push.apply(b, a.g)); } function U(a) { for (var d = void 0, g = a.firstChild; g; g = g.nextSibling) var b = g.nodeType, d = b === 1 ? d ? a : g : b === 3 ? V.test(g.nodeValue) ? a : d : d; return d === a ? void 0 : d; } function C(a, d) { function g(a) { for (var j = a.e, k = [j, 'pln'], c = 0, i = a.a.match(s) || [], r = {}, n = 0, e = i.length; n < e; ++n) { var z = i[n], w = r[z], t = void 0, f; if (typeof w === 'string')f = !1; else { var h = b[z.charAt(0)];
+ if (h)t = z.match(h[1]), w = h[0]; else { for (f = 0; f < x; ++f) if (h = d[f], t = z.match(h[1])) { w = h[0]; break; }t || (w = 'pln'); } if ((f = w.length >= 5 && 'lang-' === w.substring(0, 5)) && !(t && typeof t[1] === 'string'))f = !1, w = 'src'; f || (r[z] = w); }h = c; c += z.length; if (f) { f = t[1]; var l = z.indexOf(f), B = l + f.length; t[2] && (B = z.length - t[2].length, l = B - f.length); w = w.substring(5); H(j + h, z.substring(0, l), g, k); H(j + h + l, f, I(w, f), k); H(j + h + B, z.substring(B), g, k); } else k.push(j + h, w); }a.g = k; } var b = {}, s; (function () { for (var g = a.concat(d), j = [], k = {}, c = 0, i = g.length; c < i; ++c) { var r =
+g[c], n = r[3]; if (n) for (var e = n.length; --e >= 0;)b[n.charAt(e)] = r; r = r[1]; n = '' + r; k.hasOwnProperty(n) || (j.push(r), k[n] = q); }j.push(/[\S\s]/); s = S(j); })(); var x = d.length; return g; } function v(a) { var d = [], g = []; a.tripleQuotedStrings ? d.push(['str', /^(?:'''(?:[^'\\]|\\[\S\s]|''?(?=[^']))*(?:'''|$)|"""(?:[^"\\]|\\[\S\s]|""?(?=[^"]))*(?:"""|$)|'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$))/, q, '\'"']) : a.multiLineStrings ? d.push(['str', /^(?:'(?:[^'\\]|\\[\S\s])*(?:'|$)|"(?:[^"\\]|\\[\S\s])*(?:"|$)|`(?:[^\\`]|\\[\S\s])*(?:`|$))/,
+q, '\'"`']) : d.push(['str', /^(?:'(?:[^\n\r'\\]|\\.)*(?:'|$)|"(?:[^\n\r"\\]|\\.)*(?:"|$))/, q, '"\'']); a.verbatimStrings && g.push(['str', /^@"(?:[^"]|"")*(?:"|$)/, q]); var b = a.hashComments; b && (a.cStyleComments ? (b > 1 ? d.push(['com', /^#(?:##(?:[^#]|#(?!##))*(?:###|$)|.*)/, q, '#']) : d.push(['com', /^#(?:(?:define|e(?:l|nd)if|else|error|ifn?def|include|line|pragma|undef|warning)\b|[^\n\r]*)/, q, '#']), g.push(['str', /^<(?:(?:(?:\.\.\/)*|\/?)(?:[\w-]+(?:\/[\w-]+)+)?[\w-]+\.h(?:h|pp|\+\+)?|[a-z]\w*)>/, q])) : d.push(['com',
+/^#[^\n\r]*/, q, '#'])); a.cStyleComments && (g.push(['com', /^\/\/[^\n\r]*/, q]), g.push(['com', /^\/\*[\S\s]*?(?:\*\/|$)/, q])); if (b = a.regexLiterals) { var s = (b = b > 1 ? '' : '\n\r') ? '.' : '[\\S\\s]'; g.push(['lang-regex', RegExp('^(?:^^\\.?|[+-]|[!=]=?=?|\\#|%=?|&&?=?|\\(|\\*=?|[+\\-]=|->|\\/=?|::?|<=?|>>?>?=?|,|;|\\?|@|\\[|~|{|\\^\\^?=?|\\|\\|?=?|break|case|continue|delete|do|else|finally|instanceof|return|throw|try|typeof)\\s*(' + ('/(?=[^/*' + b + '])(?:[^/\\x5B\\x5C' + b + ']|\\x5C' + s + '|\\x5B(?:[^\\x5C\\x5D' + b + ']|\\x5C' +
+s + ')*(?:\\x5D|$))+/') + ')')]); }(b = a.types) && g.push(['typ', b]); b = ('' + a.keywords).replace(/^ | $/g, ''); b.length && g.push(['kwd', RegExp('^(?:' + b.replace(/[\s,]+/g, '|') + ')\\b'), q]); d.push(['pln', /^\s+/, q, ' \r\n\t\u00a0']); b = '^.[^\\s\\w.$@\'"`/\\\\]*'; a.regexLiterals && (b += '(?!s*/)'); g.push(['lit', /^@[$_a-z][\w$@]*/i, q], ['typ', /^(?:[@_]?[A-Z]+[a-z][\w$@]*|\w+_t\b)/, q], ['pln', /^[$_a-z][\w$@]*/i, q], ['lit', /^(?:0x[\da-f]+|(?:\d(?:_\d+)*\d*(?:\.\d*)?|\.\d\+)(?:e[+-]?\d+)?)[a-z]*/i, q, '0123456789'], ['pln', /^\\[\S\s]?/,
+q], ['pun', RegExp(b), q]); return C(d, g); } function J(a, d, g) { function b(a) { var c = a.nodeType; if (c == 1 && !x.test(a.className)) if ('br' === a.nodeName)s(a), a.parentNode && a.parentNode.removeChild(a); else for (a = a.firstChild; a; a = a.nextSibling)b(a); else if ((c == 3 || c == 4) && g) { var d = a.nodeValue, i = d.match(m); if (i)c = d.substring(0, i.index), a.nodeValue = c, (d = d.substring(i.index + i[0].length)) && a.parentNode.insertBefore(j.createTextNode(d), a.nextSibling), s(a), c || a.parentNode.removeChild(a); } } function s(a) { function b(a, c) { var d =
+c ? a.cloneNode(!1) : a, e = a.parentNode; if (e) { var e = b(e, 1), g = a.nextSibling; e.appendChild(d); for (var i = g; i; i = g)g = i.nextSibling, e.appendChild(i); } return d; } for (;!a.nextSibling;) if (a = a.parentNode, !a) return; for (var a = b(a.nextSibling, 0), d; (d = a.parentNode) && d.nodeType === 1;)a = d; c.push(a); } for (var x = /(?:^|\s)nocode(?:\s|$)/, m = /\r\n?|\n/, j = a.ownerDocument, k = j.createElement('li'); a.firstChild;)k.appendChild(a.firstChild); for (var c = [k], i = 0; i < c.length; ++i)b(c[i]); d === (d | 0) && c[0].setAttribute('value', d); var r = j.createElement('ol');
+ r.className = 'linenums'; for (var d = Math.max(0, d - 1 | 0) || 0, i = 0, n = c.length; i < n; ++i)k = c[i], k.className = 'L' + (i + d) % 10, k.firstChild || k.appendChild(j.createTextNode('\u00a0')), r.appendChild(k); a.appendChild(r); } function p(a, d) { for (var g = d.length; --g >= 0;) { var b = d[g]; F.hasOwnProperty(b) ? D.console && console.warn('cannot override language handler %s', b) : F[b] = a; } } function I(a, d) { if (!a || !F.hasOwnProperty(a))a = /^\s*= l && (b += 2); g >= B && (r += 2); } } finally { if (f)f.style.display = h; } } catch (u) { D.console && console.log(u && u.stack || u); } } var D = window, y = ['break,continue,do,else,for,if,return,while'], E = [[y, 'auto,case,char,const,default,double,enum,extern,float,goto,inline,int,long,register,short,signed,sizeof,static,struct,switch,typedef,union,unsigned,void,volatile'],
+'catch,class,delete,false,import,new,operator,private,protected,public,this,throw,true,try,typeof'], M = [E, 'alignof,align_union,asm,axiom,bool,concept,concept_map,const_cast,constexpr,decltype,delegate,dynamic_cast,explicit,export,friend,generic,late_check,mutable,namespace,nullptr,property,reinterpret_cast,static_assert,static_cast,template,typeid,typename,using,virtual,where'], N = [E, 'abstract,assert,boolean,byte,extends,final,finally,implements,import,instanceof,interface,null,native,package,strictfp,super,synchronized,throws,transient'],
+ O = [N, 'as,base,by,checked,decimal,delegate,descending,dynamic,event,fixed,foreach,from,group,implicit,in,internal,into,is,let,lock,object,out,override,orderby,params,partial,readonly,ref,sbyte,sealed,stackalloc,string,select,uint,ulong,unchecked,unsafe,ushort,var,virtual,where'], E = [E, 'debugger,eval,export,function,get,null,set,undefined,var,with,Infinity,NaN'], P = [y, 'and,as,assert,class,def,del,elif,except,exec,finally,from,global,import,in,is,lambda,nonlocal,not,or,pass,print,raise,try,with,yield,False,True,None'],
+ Q = [y, 'alias,and,begin,case,class,def,defined,elsif,end,ensure,false,in,module,next,nil,not,or,redo,rescue,retry,self,super,then,true,undef,unless,until,when,yield,BEGIN,END'], W = [y, 'as,assert,const,copy,drop,enum,extern,fail,false,fn,impl,let,log,loop,match,mod,move,mut,priv,pub,pure,ref,self,static,struct,true,trait,type,unsafe,use'], y = [y, 'case,done,elif,esac,eval,fi,function,in,local,set,then,until'], R = /^(DIR|FILE|vector|(de|priority_)?queue|list|stack|(const_)?iterator|(multi)?(set|map)|bitset|u?(int|float)\d*)\b/,
+ V = /\S/, X = v({keywords: [M, O, E, 'caller,delete,die,do,dump,elsif,eval,exit,foreach,for,goto,if,import,last,local,my,next,no,our,print,package,redo,require,sub,undef,unless,until,use,wantarray,while,BEGIN,END', P, Q, y], hashComments: !0, cStyleComments: !0, multiLineStrings: !0, regexLiterals: !0}), F = {}; p(X, ['default-code']); p(C([], [['pln', /^[^]+/], ['dec', /^]*(?:>|$)/], ['com', /^<\!--[\S\s]*?(?:--\>|$)/], ['lang-', /^<\?([\S\s]+?)(?:\?>|$)/], ['lang-', /^<%([\S\s]+?)(?:%>|$)/], ['pun', /^(?:<[%?]|[%?]>)/], ['lang-',
+/^]*>([\S\s]+?)<\/xmp\b[^>]*>/i], ['lang-js', /^
+