<!DOCTYPE html>
<html>
  <head>
    <title>@baumi/agular2-select</title>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.0.0/typescript.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.6.12/zone.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.36/system.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

    <!-- Load Bundle from Asset Host -->
    <script src="https://material-plunker.firebaseapp.com/HEAD_bundle.js?sha=882835"></script>
    
    <!-- Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
    <script>
      System
        .import('app/main.ts')
        .catch(console.error.bind(console));
    </script>
    
    <!-- Load the core.css stylesheet manually (temporary) -->
    <link href="https://npmcdn.com/@angular2-material/core@latest/style/core.css">
    
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>

</html>

<!--  
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
-->
/** Add Transpiler for Typescript */
System.config({
  transpiler: 'typescript',
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  packages: {
    '.': {
      defaultExtension: 'ts'
    }
  }
});

/** Angular Material 2 Components */
var components = [
  'all',
  'button',
  'card',
  'checkbox',
  'dialog',
  'grid-list',
  'icon',
  'input',
  'list',
  'menu',
  'progress-bar',
  'progress-circle',
  'radio',
  'sidenav',
  'slider',
  'slide-toggle',
  'button-toggle',
  'tabs',
  'toolbar',
  'tooltip'
];

/** Default Packages to be mapped to an index file */
var barrels = [
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/forms',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
  'rxjs'
];

/** Default Mappings */
var _map = {
  '@angular2-material/core': 'core',
  '@angular': 'vendor/@angular',
  'rxjs': "https://unpkg.com/rxjs@5.0.0-beta.11", 
  'main': 'main.js',
  'angular2-select': 'https://unpkg.com/@baumi/angular2-select@2.1.4/angular2-select.js'
};

var _packages = {
  '@angular2-material/core': {
      main: 'core',
  }
}

/**Generate Mappings and Packages from specified packages. */
components.forEach(function (name) { 
  _map["@angular2-material/" + name] = "components/" + name; 
});

components.forEach(function (name) {
    _packages[("@angular2-material/" + name)] = {
        main: name ,
        defaultExtension: 'js'
    };
});

barrels.forEach(function (barrelName) {
    _packages[barrelName] = { main: 'index' };
});

System.config({
  map: _map, 
  packages: _packages
});

/*
 Copyright 2016 Google Inc. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://angular.io/license
 */
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}
// The browser platform with a compiler
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

// The app module
import { AppModule } from './app.module';

// Compile and launch the module
platformBrowserDynamic().bootstrapModule(AppModule);


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/
import { BrowserModule }                from "@angular/platform-browser";
import { NgModule }                     from "@angular/core";
import { FormsModule,
         ReactiveFormsModule }          from '@angular/forms';
import { AppComponent }                 from "./app.component";
import { Angular2SelectModule }         from "angular2-select";

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        Angular2SelectModule
    ],
    declarations: [ AppComponent ],
    bootstrap: [ AppComponent ]
})
export class AppModule {
}
import { Component,
         OnInit }                       from '@angular/core';
import { FormGroup,
         FormControl,
         Validators }                   from '@angular/forms';
 import { Observable }                  from 'rxjs/Observable';
 import 'rxjs/add/observable/from';
 import 'rxjs/add/operator/delay';

export class Option {
    value: string;
    name: string;
    selected?: boolean;
    disabled?: boolean;
}

@Component({
    selector: 'my-app',
    styles: [`
        div.selector-container {
            width:200px;
            margin:20px;
            float:left;
        }
        div.notifications {
            position: fixed;
            bottom:0;
            padding:40px;
        }
        div.error {
            color: red;
        }
        div.divider {
            clear:both;
            margin:20px;
        }
    `],
    template: `
    <div>
        <h2>angular2-select</h2>
        <div class="selector-container">
            <h4>Simple selector:</h4>
            <bm-ng2-select
                placeholder="Select a country"
                (selectionChanged)="onSelectionChange('Country', $event);">
                <bm-ng2-option value="PL">Poland</bm-ng2-option>
                <bm-ng2-option value="US" disabled="true">USA</bm-ng2-option>
                <bm-ng2-option value="DK" selected="true">Denmark</bm-ng2-option>
                <bm-ng2-option value="FR">France</bm-ng2-option>
            </bm-ng2-select>
        </div>
        <div class="selector-container">
            <h4>Asynchronously loaded:</h4>
            <bm-ng2-select
                placeholder="Select an item"
                (selectionChanged)="onSelectionChange('Item', $event);">
                <bm-ng2-option
                    *ngFor="let item of selectorOptions"
                    value="{{item.value}}"
                    selected="{{item.selected}}"
                    disabled="{{item.disabled}}">{{item.name}}</bm-ng2-option>
            </bm-ng2-select>
        </div>
        <div class="divider"></div>
        <div class="selector-container">
            <form [formGroup]="demoForm">
                <h4>Model driven form:</h4>
                <bm-ng2-select
                    formControlName="person"
                    placeholder="Select person"
                    required=true
                    (selectionChanged)="onSelectionChange('Name', $event);">
                    <bm-ng2-option value="ANNA">Anna</bm-ng2-option>
                    <bm-ng2-option value="NATALIA">Natalia</bm-ng2-option>
                    <bm-ng2-option value="KASIA">Kasia</bm-ng2-option>
                </bm-ng2-select>
            </form>
            <div class="error" *ngIf="!demoForm.controls.person.valid">
                This field is required
            </div>
        </div>
        <div class="selector-container">
            <form #f="ngForm">
                <h4>Template driven form:</h4>
                <bm-ng2-select
                    [(ngModel)]="formName"
                    name="color"
                    placeholder="Select color"
                    (selectionChanged)="onSelectionChange('Color', $event);">
                    <bm-ng2-option value="RED">Red</bm-ng2-option>
                    <bm-ng2-option value="BLACK">Black</bm-ng2-option>
                    <bm-ng2-option value="YELLOW">Yellow</bm-ng2-option>
                </bm-ng2-select>
            </form>
        </div>
        <div class="notifications">
            Notifications: {{ message }}
        </div>
    </div>
  `,
})
export class AppComponent implements OnInit {
    private message: string;
    private messageClearTimeout: any;
    private demoForm: FormGroup;
    private selectorOptions: Option[] = [];
    private formName: string = 'YELLOW';

    constructor() {

    }
    ngOnInit() {
        this.demoForm = new FormGroup({
            person: new FormControl('')
        });

        this.getAsynchronously();
    }

    getAsynchronously() {
        let options: Option[] = [{
            value: 'SOFA',
            name: 'Sofa'
        }, {
            value: 'TV',
            name: 'TV',
            selected: true
        }, {
            value: 'TABLE',
            name: 'Table',
            disabled: true
        }];

        let subscription = Observable.from(options).delay(1000).subscribe(
            option => {
                this.selectorOptions.push(option);
            },
            err => {
                console.log(err);
            },
            () => {
                this.setMessage('Content of selector asynchronously loaded!');
            }
        );

    }

    setMessage(msg: string) {
        this.message = msg;
        this.clearMessage();
    }
    clearMessage() {
        if (this.messageClearTimeout)
            clearTimeout(this.messageClearTimeout);

        this.messageClearTimeout = setTimeout(() => { this.message = null; }, 2000);
    }

    onSelectionChange(selector: string, value: string) {
        this.setMessage('Selector ' + selector + ' value has changed to: ' + value);
    }
}
@baumi/angular2-select demo