var WjMenuSeparator = (function (_super) {
__extends(WjMenuSeparator, _super);
function WjMenuSeparator(elRef, injector, viewContainerRef, appViewManager, domRenderer) {
_super.call(this, elRef, injector, viewContainerRef, appViewManager, domRenderer);
}
// patch, don't remove
WjMenuSeparator.prototype.ngOnInit = function () {
};
WjMenuSeparator = __decorate([
wijmo_angular2_directiveBase_1.WjComponent({
//wjIsDirective: true,
wjMetadataId: 'MenuSeparator',
wjParentDirectives: [WjMenu],
wjSiblingDirectiveId: 'menuItemDir',
selector: 'wj-menu-separator',
}),
core_1.View({
//template: `<div><div class="wj-state-disabled" style="width:100%;height:1px;background-color:lightgray"></div></div>`,
template: "<template [wjMenuItemTemplateDir]><div class=\"wj-state-disabled\" style=\"width:100%;height:1px;background-color:lightgray\"></div></template>",
directives: [core_2.forwardRef(function () { return WjMenuItemTemplateDir; })]
}),
__param(0, core_3.Inject(core_2.ElementRef)),
__param(1, core_3.Inject(core_2.Injector)),
__param(2, core_3.Inject(core_2.ViewContainerRef)),
__param(3, core_3.Inject(core_2.AppViewManager)),
__param(4, core_3.Inject(core_2.Renderer))
], WjMenuSeparator);
return WjMenuSeparator;
})(WjMenuItem);
var MdDialogContainer = (function () {
function MdDialogContainer() {
this.contentRef = null;
this.dialogRef = null;
}
MdDialogContainer.prototype.wrapFocus = function () {
};
MdDialogContainer.prototype.documentKeypress = function (event) {
if (event.keyCode == key_codes_1.KeyCodes.ESCAPE) {
this.dialogRef.close();
}
};
MdDialogContainer = __decorate([
core_1.Component({
selector: 'md-dialog-container',
encapsulation: core_1.ViewEncapsulation.None,
template: "\n <md-dialog-content></md-dialog-content>\n <div tabindex=\"0\" (focus)=\"wrapFocus()\"></div>",
directives: [core_1.forwardRef(function () { return MdDialogContent; })],
host: {
'class': 'md-dialog',
'tabindex': '0',
'(body:keydown)': 'documentKeypress($event)',
},
}),
__metadata('design:paramtypes', [])
], MdDialogContainer);
return MdDialogContainer;
}());
var Door = (function () {
function Door(lock) {
this.lock = lock;
}
Door = __decorate([
__param(0, core_1.Inject(core_1.forwardRef(function () { return Lock; })))
], Door);
return Door;
})();
var WjMenuItem = (function () {
function WjMenuItem(
//@Inject(ViewContainerRef) public viewContainerRef: ViewContainerRef,
//@Inject(TemplateRef) @Optional() public templateRef: TemplateRef,
elRef, injector, viewContainerRef, appViewManager, domRenderer) {
this.elRef = elRef;
this.viewContainerRef = viewContainerRef;
this.appViewManager = appViewManager;
this.domRenderer = domRenderer;
var behavior = wijmo_angular2_directiveBase_1.WjDirectiveBehavior.attach(this, elRef, injector);
this._ownerMenu = behavior.parentBehavior.directive;
}
// patch, don't remove
WjMenuItem.prototype.ngOnInit = function () {
};
WjMenuItem.prototype.wjAfterParentInit = function () {
var ownerMenu = this._ownerMenu;
if (ownerMenu.itemsSource.length == 1 && ownerMenu.selectedIndex < 0) {
ownerMenu.selectedIndex = 0;
}
if (!ownerMenu.displayMemberPath) {
ownerMenu.displayMemberPath = 'header';
}
if (!ownerMenu.selectedValuePath) {
ownerMenu.selectedValuePath = 'value';
}
if (!ownerMenu.commandPath) {
ownerMenu.commandPath = 'cmd';
}
if (!ownerMenu.commandParameterPath) {
ownerMenu.commandParameterPath = 'cmdParam';
}
//ownerMenu.invalidate();
};
WjMenuItem.prototype.ngAfterContentInit = function () {
};
WjMenuItem = __decorate([
wijmo_angular2_directiveBase_1.WjComponent({
//wjIsDirective: true,
wjMetadataId: 'MenuItem',
wjParentDirectives: [WjMenu],
wjSiblingDirectiveId: 'menuItemDir',
selector: 'wj-menu-item',
}),
core_1.View({
//template: '<div><ng-content></ng-content></div>',
template: "<template [wjMenuItemTemplateDir]><ng-content></ng-content></template>",
directives: [core_2.forwardRef(function () { return WjMenuItemTemplateDir; })]
}),
__param(0, core_3.Inject(core_2.ElementRef)),
__param(1, core_3.Inject(core_2.Injector)),
__param(2, core_3.Inject(core_2.ViewContainerRef)),
__param(3, core_3.Inject(core_2.AppViewManager)),
__param(4, core_3.Inject(core_2.Renderer))
], WjMenuItem);
return WjMenuItem;
})();
var UITreeNode = (function () {
function UITreeNode(tree) {
this.tree = tree;
this.hover = false;
this.expanded = false;
}
UITreeNode.prototype.getIcon = function () {
var icon;
if (this.node.icon)
icon = this.node.icon;
else
icon = this.expanded ? this.node.expandedIcon : this.node.collapsedIcon;
return UITreeNode.ICON_CLASS + ' ' + icon;
};
UITreeNode.prototype.isLeaf = function () {
return this.node.leaf == false ? false : !(this.node.children && this.node.children.length);
};
UITreeNode.prototype.toggle = function (event) {
if (this.expanded)
this.tree.onNodeCollapse.emit({ originalEvent: event, node: this.node });
else
this.tree.onNodeExpand.emit({ originalEvent: event, node: this.node });
this.expanded = !this.expanded;
};
UITreeNode.prototype.onNodeClick = function (event) {
this.tree.onNodeClick(event, this.node);
};
UITreeNode.prototype.isSelected = function () {
return this.tree.isSelected(this.node);
};
UITreeNode.ICON_CLASS = 'ui-treenode-icon fa fa-fw';
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], UITreeNode.prototype, "node", void 0);
UITreeNode = __decorate([
core_1.Component({
selector: 'p-treeNode',
template: "\n <li class=\"ui-treenode\" *ngIf=\"node\">\n <div class=\"ui-treenode-content\" [ngClass]=\"{'ui-treenode-selectable': tree.selectionMode}\" \n (mouseenter)=\"hover=true\" (mouseleave)=\"hover=false\" (click)=\"onNodeClick($event)\">\n <span class=\"ui-tree-toggler fa fa-fw\" [ngClass]=\"{'fa-caret-right':!expanded,'fa-caret-down':expanded}\" *ngIf=\"!isLeaf()\"\n (click)=\"toggle($event)\"></span\n ><span class=\"ui-treenode-leaf-icon\" *ngIf=\"isLeaf()\"></span\n ><span [class]=\"getIcon()\" *ngIf=\"node.icon||node.expandedIcon||node.collapsedIcon\"></span\n ><span class=\"ui-treenode-label ui-corner-all\" \n [ngClass]=\"{'ui-state-hover':hover&&tree.selectionMode,'ui-state-highlight':isSelected()}\">\n <span *ngIf=\"!tree.template\">{{node.label}}</span>\n <p-treeNodeTemplateLoader [node]=\"node\" [template]=\"tree.template\" *ngIf=\"tree.template\"></p-treeNodeTemplateLoader>\n </span>\n </div>\n <ul class=\"ui-treenode-children\" style=\"display: none;\" *ngIf=\"node.children\" [style.display]=\"expanded ? 'block' : 'none'\">\n <p-treeNode *ngFor=\"let childNode of node.children\" [node]=\"childNode\"></p-treeNode>\n </ul>\n </li>\n ",
directives: [UITreeNode, treenodetemplateloader_1.TreeNodeTemplateLoader]
}),
__param(0, core_1.Inject(core_1.forwardRef(function () { return tree_1.Tree; }))),
__metadata('design:paramtypes', [tree_1.Tree])
], UITreeNode);
return UITreeNode;
}());
var UITreeRow = (function () {
function UITreeRow(treeTable) {
this.treeTable = treeTable;
this.level = 0;
this.expanded = false;
}
UITreeRow.prototype.toggle = function (event) {
if (this.expanded)
this.treeTable.onNodeCollapse.emit({ originalEvent: event, node: this.node });
else
this.treeTable.onNodeExpand.emit({ originalEvent: event, node: this.node });
this.expanded = !this.expanded;
};
UITreeRow.prototype.isLeaf = function () {
return this.node.leaf == false ? false : !(this.node.children && this.node.children.length);
};
UITreeRow.prototype.isSelected = function () {
return this.treeTable.isSelected(this.node);
};
UITreeRow.prototype.onRowClick = function (event) {
this.treeTable.onRowClick(event, this.node);
};
__decorate([
core_1.Input(),
__metadata('design:type', Object)
], UITreeRow.prototype, "node", void 0);
__decorate([
core_1.Input(),
__metadata('design:type', Number)
], UITreeRow.prototype, "level", void 0);
UITreeRow = __decorate([
core_1.Component({
selector: '[pTreeRow]',
template: "\n <div class=\"ui-treetable-row\" [ngClass]=\"{'ui-state-hover':hover&&treeTable.selectionMode,'ui-state-highlight':isSelected(node)}\">\n <td *ngFor=\"let col of treeTable.columns; #i=index\" [attr.style]=\"col.style\" [class]=\"col.styleClass\"\n (mouseenter)=\"hover=true\" (mouseleave)=\"hover=false\" (click)=\"onRowClick($event)\">\n <span *ngIf=\"i==0\" class=\"ui-treetable-toggler fa fa-fw ui-c\" [ngClass]=\"{'fa-caret-down':expanded,'fa-caret-right':!expanded}\"\n [ngStyle]=\"{'margin-left':level*16 + 'px','visibility': isLeaf() ? 'hidden' : 'visible'}\"\n (click)=\"toggle($event)\"></span>\n <span *ngIf=\"!col.template\">{{node.data[col.field]}}</span>\n <p-columnTemplateLoader [column]=\"col\" [rowData]=\"node\" *ngIf=\"col.template\"></p-columnTemplateLoader>\n </td>\n </div>\n <div *ngIf=\"node.children\" class=\"ui-treetable-row\" [style.display]=\"expanded ? 'table-row' : 'none'\">\n <td [attr.colspan]=\"treeTable.columns.length\" class=\"ui-treetable-child-table-container\">\n <table>\n <tbody pTreeRow *ngFor=\"let childNode of node.children\" [node]=\"childNode\" [level]=\"level+1\"></tbody>\n </table>\n </td>\n </div>\n ",
directives: [UITreeRow, columntemplateloader_1.ColumnTemplateLoader]
}),
__param(0, core_1.Inject(core_1.forwardRef(function () { return treetable_1.TreeTable; }))),
__metadata('design:paramtypes', [treetable_1.TreeTable])
], UITreeRow);
return UITreeRow;
}());
selector: '[required][ngControl],[required][ngFormControl],[required][ngModel]',
providers: [REQUIRED_VALIDATOR]
}),
__metadata('design:paramtypes', [])
], RequiredValidator);
return RequiredValidator;
}());
exports.RequiredValidator = RequiredValidator;
/**
* Provivder which adds {@link MinLengthValidator} to {@link NG_VALIDATORS}.
*
* ## Example:
*
* {@example common/forms/ts/validators/validators.ts region='min'}
*/
var MIN_LENGTH_VALIDATOR = lang_1.CONST_EXPR(new core_1.Provider(validators_1.NG_VALIDATORS, { useExisting: core_1.forwardRef(function () { return MinLengthValidator; }), multi: true }));
/**
* A directive which installs the {@link MinLengthValidator} for any `ngControl`,
* `ngFormControl`, or control with `ngModel` that also has a `minlength` attribute.
*/
var MinLengthValidator = (function () {
function MinLengthValidator(minLength) {
this._validator = validators_1.Validators.minLength(lang_2.NumberWrapper.parseInt(minLength, 10));
}
MinLengthValidator.prototype.validate = function (c) { return this._validator(c); };
MinLengthValidator = __decorate([
core_1.Directive({
selector: '[minlength][ngControl],[minlength][ngFormControl],[minlength][ngModel]',
providers: [MIN_LENGTH_VALIDATOR]
}),
__param(0, core_1.Attribute("minlength")),
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
import { Directive, Optional, Inject, Host, SkipSelf, forwardRef, Provider, Self } from 'angular2/core';
import { CONST_EXPR } from 'angular2/src/facade/lang';
import { ControlContainer } from './control_container';
import { controlPath, composeValidators, composeAsyncValidators } from './shared';
import { NG_VALIDATORS, NG_ASYNC_VALIDATORS } from '../validators';
const controlGroupProvider = CONST_EXPR(new Provider(ControlContainer, { useExisting: forwardRef(() => NgControlGroup) }));
/**
* Creates and binds a control group to a DOM element.
*
* This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}.
*
* ### Example ([live demo](http://plnkr.co/edit/7EJ11uGeaggViYM6T5nq?p=preview))
*
* ```typescript
* @Component({
* selector: 'my-app',
* directives: [FORM_DIRECTIVES],
* })
* @View({
* template: `
* <div>
'use strict';var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('angular2/core');
var control_value_accessor_1 = require('./control_value_accessor');
var lang_1 = require('angular2/src/facade/lang');
var CHECKBOX_VALUE_ACCESSOR = lang_1.CONST_EXPR(new core_1.Provider(control_value_accessor_1.NG_VALUE_ACCESSOR, { useExisting: core_1.forwardRef(function () { return CheckboxControlValueAccessor; }), multi: true }));
/**
* The accessor for writing a value and listening to changes on a checkbox input element.
*
* ### Example
* ```
* <input type="checkbox" ngControl="rememberLogin">
* ```
*/
var CheckboxControlValueAccessor = (function () {
function CheckboxControlValueAccessor(_renderer, _elementRef) {
this._renderer = _renderer;
this._elementRef = _elementRef;
this.onChange = function (_) { };
this.onTouched = function () { };
}
CheckboxControlValueAccessor.prototype.writeValue = function (value) {
this._renderer.setElementProperty(this._elementRef.nativeElement, 'checked', value);
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Directive, ElementRef, Renderer, forwardRef, Provider } from 'angular2/core';
import { NG_VALUE_ACCESSOR } from './control_value_accessor';
import { CONST_EXPR, NumberWrapper } from 'angular2/src/facade/lang';
const NUMBER_VALUE_ACCESSOR = CONST_EXPR(new Provider(NG_VALUE_ACCESSOR, { useExisting: forwardRef(() => NumberValueAccessor), multi: true }));
/**
* The accessor for writing a number value and listening to changes that is used by the
* {@link NgModel}, {@link NgFormControl}, and {@link NgControlName} directives.
*
* ### Example
* ```
* <input type="number" [(ngModel)]="age">
* ```
*/
export let NumberValueAccessor = class NumberValueAccessor {
constructor(_renderer, _elementRef) {
this._renderer = _renderer;
this._elementRef = _elementRef;
this.onChange = (_) => { };
this.onTouched = () => { };
}
writeValue(value) {
this._renderer.setElementProperty(this._elementRef.nativeElement, 'value', value);
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
import { Inject, ReflectiveInjector, forwardRef, resolveForwardRef } from 'angular2/core';
// #docregion forward_ref_fn
var ref = forwardRef(() => Lock);
// #enddocregion
// #docregion forward_ref
class Door {
constructor(lock) {
this.lock = lock;
}
}
Door = __decorate([
__param(0, Inject(forwardRef(() => Lock))),
__metadata('design:paramtypes', [Lock])
], Door);
// Only at this point Lock is defined.
class Lock {
}
var injector = ReflectiveInjector.resolveAndCreate([Door, Lock]);
var door = injector.get(Door);
var MdDataTableTr = (function () {
function MdDataTableTr(table, _element) {
this.table = table;
this._element = _element;
this.isInHeader = false;
this.isActive = false;
this.thDisplayed = false;
this.tdDisplayed = false;
}
MdDataTableTr.prototype.change = function () {
this.isActive = !this.isActive;
this.table.toggleActivity(this);
};
MdDataTableTr.prototype._initListeners = function () {
var _this = this;
if (this.isInHeader === true) {
this.table.onSelectableChange
.map(function (event) { return event.allSelected; })
.subscribe(function (newActiveStatus) { return _this.isActive = newActiveStatus; });
}
else {
this.table.onSelectableChange
.map(function (event) {
return event.values !== undefined &&
event.values.length &&
(event.values.findIndex(function (value) { return value === _this.selectableValue; })) !== -1;
})
.subscribe(function (newActiveStatus) { return _this.isActive = newActiveStatus; });
}
};
MdDataTableTr.prototype.ngAfterContentInit = function () {
if (null !== this.table && undefined !== this.table) {
var element = this._element.nativeElement;
this.isInHeader = element.parentElement.localName === 'thead';
this._initListeners();
this.thDisplayed = this.table.selectable && this.isInHeader;
this.tdDisplayed = this.table.selectable && !this.isInHeader;
if (this.isInHeader === false && this.selectableValue === undefined) {
this.selectableValue = Array.prototype.indexOf.call(element.parentNode.children, element).toString();
}
}
};
__decorate([
core_1.Input(),
__metadata('design:type', String)
], MdDataTableTr.prototype, "selectableValue", void 0);
MdDataTableTr = __decorate([
core_1.Component({
selector: 'tr',
template: "\n <template [ngIf]=\"thDisplayed\">\n <th>\n <md-checkbox #check (click)=\"change()\" [checked]=\"isActive\"></md-checkbox>\n </th>\n </template>\n <template [ngIf]=\"tdDisplayed\">\n <td>\n <md-checkbox #check [checked]=\"isActive\"></md-checkbox>\n </td>\n </template>\n <ng-content></ng-content>\n ",
directives: [checkbox_1.MdCheckbox],
host: {
'[class.active]': 'isActive',
'(click)': 'table?.selectable && !thDisplayed && change()'
}
}),
__param(0, core_1.Optional()),
__param(0, core_1.Inject(core_1.forwardRef(function () { return data_table_1.MdDataTable; }))),
__metadata('design:paramtypes', [data_table_1.MdDataTable, core_1.ElementRef])
], MdDataTableTr);
return MdDataTableTr;
}());
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('angular2/core');
var inputtext_1 = require('../inputtext/inputtext');
var domhandler_1 = require('../dom/domhandler');
var common_1 = require('angular2/common');
var SPINNER_VALUE_ACCESSOR = new core_1.Provider(common_1.NG_VALUE_ACCESSOR, {
useExisting: core_1.forwardRef(function () { return Spinner; }),
multi: true
});
var Spinner = (function () {
function Spinner(el, domHandler) {
this.el = el;
this.domHandler = domHandler;
this.onChange = new core_1.EventEmitter();
this.step = 1;
this.onModelChange = function () { };
this.onModelTouched = function () { };
}
Spinner.prototype.ngAfterViewInit = function () {
if (Math.floor(this.step) === 0) {
this.precision = this.step.toString().split(/[,]|[.]/)[1].length;
}
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('angular2/core');
var common_1 = require('angular2/common');
var lang_1 = require('angular2/src/facade/lang');
var RADIO_VALUE_ACCESSOR = lang_1.CONST_EXPR(new core_1.Provider(common_1.NG_VALUE_ACCESSOR, {
useExisting: core_1.forwardRef(function () { return RadioButton; }),
multi: true
}));
var RadioButton = (function () {
function RadioButton() {
this.click = new core_1.EventEmitter();
this.onModelChange = function () { };
this.onModelTouched = function () { };
}
RadioButton.prototype.onclick = function () {
this.click.emit(null);
this.checked = true;
this.onModelChange(this.value);
};
RadioButton.prototype.writeValue = function (model) {
this.model = model;
this.checked = (this.model == this.value);
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('angular2/core');
var common_1 = require('angular2/common');
var list_1 = require('../list/list');
var util_1 = require('../../util/util');
var RADIO_VALUE_ACCESSOR = new core_1.Provider(common_1.NG_VALUE_ACCESSOR, { useExisting: core_1.forwardRef(function () { return RadioGroup; }), multi: true });
/**
* @name RadioGroup
* @description
* A radio group is a group of radio button components, and its value
* comes from the checked radio button's value. Selecting a radio
* button in the group unchecks all others in the group.
*
* See the [Angular 2 Docs](https://angular.io/docs/ts/latest/guide/forms.html)
* for more info on forms and inputs.
*
* @usage
* ```html
* <ion-list radio-group [(ngModel)]="autoManufacturers">
*
* <ion-list-header>
* Auto Manufacturers
* </ion-list-header>
"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('angular2/core');
var common_1 = require('angular2/common');
var RATING_VALUE_ACCESSOR = new core_1.Provider(common_1.NG_VALUE_ACCESSOR, {
useExisting: core_1.forwardRef(function () { return Rating; }),
multi: true
});
var Rating = (function () {
function Rating() {
this.stars = 5;
this.cancel = true;
this.onRate = new core_1.EventEmitter();
this.onCancel = new core_1.EventEmitter();
this.onModelChange = function () { };
this.onModelTouched = function () { };
}
Rating.prototype.ngOnInit = function () {
this.starsArray = [];
for (var i = 0; i < this.stars; i++) {
this.starsArray[i] = i;
}
};
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
var async_1 = require('angular2/src/facade/async');
var collection_1 = require('angular2/src/facade/collection');
var lang_1 = require('angular2/src/facade/lang');
var core_1 = require('angular2/core');
var control_container_1 = require('./control_container');
var model_1 = require('../model');
var shared_1 = require('./shared');
var validators_1 = require('../validators');
var formDirectiveProvider = lang_1.CONST_EXPR(new core_1.Provider(control_container_1.ControlContainer, { useExisting: core_1.forwardRef(function () { return NgForm; }) }));
/**
* If `NgForm` is bound in a component, `<form>` elements in that component will be
* upgraded to use the Angular form system.
*
* ### Typical Use
*
* Include `FORM_DIRECTIVES` in the `directives` section of a {@link View} annotation
* to use `NgForm` and its associated controls.
*
* ### Structure
*
* An Angular form is a collection of `Control`s in some hierarchy.
* `Control`s can be at the top level or can be organized in `ControlGroup`s
* or `ControlArray`s. This hierarchy is reflected in the form's `value`, a
* JSON object that mirrors the form structure.
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Directive, Renderer, ElementRef, forwardRef, Provider } from 'angular2/core';
import { NG_VALUE_ACCESSOR } from './control_value_accessor';
import { CONST_EXPR } from 'angular2/src/facade/lang';
const CHECKBOX_VALUE_ACCESSOR = CONST_EXPR(new Provider(NG_VALUE_ACCESSOR, { useExisting: forwardRef(() => CheckboxControlValueAccessor), multi: true }));
/**
* The accessor for writing a value and listening to changes on a checkbox input element.
*
* ### Example
* ```
* <input type="checkbox" ngControl="rememberLogin">
* ```
*/
export let CheckboxControlValueAccessor = class {
constructor(_renderer, _elementRef) {
this._renderer = _renderer;
this._elementRef = _elementRef;
this.onChange = (_) => { };
this.onTouched = () => { };
}
writeValue(value) {
this._renderer.setElementProperty(this._elementRef, 'checked', value);
}
};
RequiredValidator = __decorate([
Directive({
selector: '[required][ngControl],[required][ngFormControl],[required][ngModel]',
providers: [REQUIRED_VALIDATOR]
}),
__metadata('design:paramtypes', [])
], RequiredValidator);
/**
* Provivder which adds {@link MinLengthValidator} to {@link NG_VALIDATORS}.
*
* ## Example:
*
* {@example common/forms/ts/validators/validators.ts region='min'}
*/
const MIN_LENGTH_VALIDATOR = CONST_EXPR(new Provider(NG_VALIDATORS, { useExisting: forwardRef(() => MinLengthValidator), multi: true }));
/**
* A directive which installs the {@link MinLengthValidator} for any `ngControl`,
* `ngFormControl`, or control with `ngModel` that also has a `minlength` attribute.
*/
export let MinLengthValidator = class {
constructor(minLength) {
this._validator = Validators.minLength(NumberWrapper.parseInt(minLength, 10));
}
validate(c) { return this._validator(c); }
};
MinLengthValidator = __decorate([
Directive({
selector: '[minlength][ngControl],[minlength][ngFormControl],[minlength][ngModel]',
providers: [MIN_LENGTH_VALIDATOR]
}),
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
import { Directive, Renderer, forwardRef, Provider, ElementRef, Input, Host, Optional } from 'angular2/core';
import { NG_VALUE_ACCESSOR } from './control_value_accessor';
import { CONST_EXPR, StringWrapper, isPrimitive, isPresent, isBlank, looseIdentical } from 'angular2/src/facade/lang';
import { MapWrapper } from 'angular2/src/facade/collection';
const SELECT_VALUE_ACCESSOR = CONST_EXPR(new Provider(NG_VALUE_ACCESSOR, { useExisting: forwardRef(() => SelectControlValueAccessor), multi: true }));
function _buildValueString(id, value) {
if (isBlank(id))
return `${value}`;
if (!isPrimitive(value))
value = "Object";
return StringWrapper.slice(`${id}: ${value}`, 0, 50);
}
function _extractId(valueString) {
return valueString.split(":")[0];
}
/**
* The accessor for writing a value and listening to changes on a select element.
*
* Note: We have to listen to the 'change' event because 'input' events aren't fired
* for selects in Firefox and IE:
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
import { CONST_EXPR } from 'angular2/src/facade/lang';
import { EventEmitter, ObservableWrapper } from 'angular2/src/facade/async';
import { Directive, forwardRef, Host, SkipSelf, Provider, Inject, Optional, Self } from 'angular2/core';
import { ControlContainer } from './control_container';
import { NgControl } from './ng_control';
import { NG_VALUE_ACCESSOR } from './control_value_accessor';
import { controlPath, composeValidators, composeAsyncValidators, isPropertyUpdated, selectValueAccessor } from './shared';
import { NG_VALIDATORS, NG_ASYNC_VALIDATORS } from '../validators';
const controlNameBinding = CONST_EXPR(new Provider(NgControl, { useExisting: forwardRef(() => NgControlName) }));
/**
* Creates and binds a control with a specified name to a DOM element.
*
* This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}.
* ### Example
*
* In this example, we create the login and password controls.
* We can work with each control separately: check its validity, get its value, listen to its
* changes.
*
* ```
* @Component({
* selector: "login-comp",
* directives: [FORM_DIRECTIVES],
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('angular2/core');
var control_value_accessor_1 = require('angular2/src/common/forms/directives/control_value_accessor');
var lang_1 = require('angular2/src/facade/lang');
var base_value_accessor_1 = require('./base-value-accessor');
var SELECTED_INDEX_VALUE_ACCESSOR = core_1.provide(control_value_accessor_1.NG_VALUE_ACCESSOR, { useExisting: core_1.forwardRef(function () { return SelectedIndexValueAccessor; }), multi: true });
/**
* The accessor for setting a selectedIndex and listening to changes that is used by the
* {@link NgModel} directives.
*
* ### Example
* ```
* <SegmentedBar [(ngModel)]='model.test'>
* ```
*/
var SelectedIndexValueAccessor = (function (_super) {
__extends(SelectedIndexValueAccessor, _super);
function SelectedIndexValueAccessor(elementRef) {
_super.call(this, elementRef.nativeElement);
this.onTouched = function () { };
}
'use strict';var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('angular2/core');
var control_value_accessor_1 = require('./control_value_accessor');
var lang_1 = require('angular2/src/facade/lang');
var NUMBER_VALUE_ACCESSOR = lang_1.CONST_EXPR(new core_1.Provider(control_value_accessor_1.NG_VALUE_ACCESSOR, { useExisting: core_1.forwardRef(function () { return NumberValueAccessor; }), multi: true }));
/**
* The accessor for writing a number value and listening to changes that is used by the
* {@link NgModel}, {@link NgFormControl}, and {@link NgControlName} directives.
*
* ### Example
* ```
* <input type="number" [(ngModel)]="age">
* ```
*/
var NumberValueAccessor = (function () {
function NumberValueAccessor(_renderer, _elementRef) {
this._renderer = _renderer;
this._elementRef = _elementRef;
this.onChange = function (_) { };
this.onTouched = function () { };
}
NumberValueAccessor.prototype.writeValue = function (value) {
this._renderer.setElementProperty(this._elementRef.nativeElement, 'value', value);
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Directive, ElementRef, Renderer, forwardRef, Provider, Input, Injector, Injectable } from 'angular2/core';
import { NG_VALUE_ACCESSOR } from 'angular2/src/common/forms/directives/control_value_accessor';
import { NgControl } from 'angular2/src/common/forms/directives/ng_control';
import { CONST_EXPR, isPresent } from 'angular2/src/facade/lang';
import { ListWrapper } from 'angular2/src/facade/collection';
const RADIO_VALUE_ACCESSOR = CONST_EXPR(new Provider(NG_VALUE_ACCESSOR, { useExisting: forwardRef(() => RadioControlValueAccessor), multi: true }));
/**
* Internal class used by Angular to uncheck radio buttons with the matching name.
*/
export let RadioControlRegistry = class RadioControlRegistry {
constructor() {
this._accessors = [];
}
add(control, accessor) {
this._accessors.push([control, accessor]);
}
remove(accessor) {
var indexToRemove = -1;
for (var i = 0; i < this._accessors.length; ++i) {
if (this._accessors[i][1] === accessor) {
indexToRemove = i;
}
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('angular2/core');
var control_value_accessor_1 = require('angular2/src/common/forms/directives/control_value_accessor');
var lang_1 = require('angular2/src/facade/lang');
var base_value_accessor_1 = require('./base-value-accessor');
var DATE_VALUE_ACCESSOR = core_1.provide(control_value_accessor_1.NG_VALUE_ACCESSOR, { useExisting: core_1.forwardRef(function () { return DateValueAccessor; }), multi: true });
/**
* The accessor for setting a date and listening to changes that is used by the
* {@link NgModel} directives.
*
* ### Example
* ```
* <DatePicker [(ngModel)]='model.test'>
* ```
*/
var DateValueAccessor = (function (_super) {
__extends(DateValueAccessor, _super);
function DateValueAccessor(elementRef) {
_super.call(this, elementRef.nativeElement);
this.onTouched = function () { };
}
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
var lang_1 = require('angular2/src/facade/lang');
var async_1 = require('angular2/src/facade/async');
var core_1 = require('angular2/core');
var control_container_1 = require('./control_container');
var ng_control_1 = require('./ng_control');
var control_value_accessor_1 = require('./control_value_accessor');
var shared_1 = require('./shared');
var validators_1 = require('../validators');
var controlNameBinding = lang_1.CONST_EXPR(new core_1.Provider(ng_control_1.NgControl, { useExisting: core_1.forwardRef(function () { return NgControlName; }) }));
/**
* Creates and binds a control with a specified name to a DOM element.
*
* This directive can only be used as a child of {@link NgForm} or {@link NgFormModel}.
* ### Example
*
* In this example, we create the login and password controls.
* We can work with each control separately: check its validity, get its value, listen to its
* changes.
*
* ```
* @Component({
* selector: "login-comp",
* directives: [FORM_DIRECTIVES],
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
import { PromiseWrapper, ObservableWrapper, EventEmitter } from 'angular2/src/facade/async';
import { ListWrapper } from 'angular2/src/facade/collection';
import { isPresent, CONST_EXPR } from 'angular2/src/facade/lang';
import { Directive, forwardRef, Provider, Optional, Inject, Self } from 'angular2/core';
import { ControlContainer } from './control_container';
import { ControlGroup, Control } from '../model';
import { setUpControl, setUpControlGroup, composeValidators, composeAsyncValidators } from './shared';
import { NG_VALIDATORS, NG_ASYNC_VALIDATORS } from '../validators';
const formDirectiveProvider = CONST_EXPR(new Provider(ControlContainer, { useExisting: forwardRef(() => NgForm) }));
/**
* If `NgForm` is bound in a component, `<form>` elements in that component will be
* upgraded to use the Angular form system.
*
* ### Typical Use
*
* Include `FORM_DIRECTIVES` in the `directives` section of a {@link View} annotation
* to use `NgForm` and its associated controls.
*
* ### Structure
*
* An Angular form is a collection of `Control`s in some hierarchy.
* `Control`s can be at the top level or can be organized in `ControlGroup`s
* or `ControlArray`s. This hierarchy is reflected in the form's `value`, a
* JSON object that mirrors the form structure.
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { Directive, ElementRef, Renderer, forwardRef, Provider } from 'angular2/core';
import { NG_VALUE_ACCESSOR } from './control_value_accessor';
import { isBlank, CONST_EXPR } from 'angular2/src/facade/lang';
const DEFAULT_VALUE_ACCESSOR = CONST_EXPR(new Provider(NG_VALUE_ACCESSOR, { useExisting: forwardRef(() => DefaultValueAccessor), multi: true }));
/**
* The default accessor for writing a value and listening to changes that is used by the
* {@link NgModel}, {@link NgFormControl}, and {@link NgControlName} directives.
*
* ### Example
* ```
* <input type="text" ngControl="searchQuery">
* ```
*/
export let DefaultValueAccessor = class {
constructor(_renderer, _elementRef) {
this._renderer = _renderer;
this._elementRef = _elementRef;
this.onChange = (_) => { };
this.onTouched = () => { };
}
writeValue(value) {
var normalizedValue = isBlank(value) ? '' : value;
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var core_1 = require('angular2/core');
var inputtext_1 = require('../inputtext/inputtext');
var button_1 = require('../button/button');
var domhandler_1 = require('../dom/domhandler');
var common_1 = require('angular2/common');
var AUTOCOMPLETE_VALUE_ACCESSOR = new core_1.Provider(common_1.NG_VALUE_ACCESSOR, {
useExisting: core_1.forwardRef(function () { return AutoComplete; }),
multi: true
});
var AutoComplete = (function () {
function AutoComplete(el, domHandler, differs, renderer) {
this.el = el;
this.domHandler = domHandler;
this.renderer = renderer;
this.minLength = 3;
this.delay = 300;
this.completeMethod = new core_1.EventEmitter();
this.onSelect = new core_1.EventEmitter();
this.onUnselect = new core_1.EventEmitter();
this.onDropdownClick = new core_1.EventEmitter();
this.scrollHeight = '200px';
this.onModelChange = function () { };
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __param = (this && this.__param) || function (paramIndex, decorator) {
return function (target, key) { decorator(target, key, paramIndex); }
};
import { CONST_EXPR } from 'angular2/src/facade/lang';
import { StringMapWrapper } from 'angular2/src/facade/collection';
import { EventEmitter, ObservableWrapper } from 'angular2/src/facade/async';
import { Directive, forwardRef, Provider, Inject, Optional, Self } from 'angular2/core';
import { NgControl } from './ng_control';
import { NG_VALIDATORS, NG_ASYNC_VALIDATORS } from '../validators';
import { NG_VALUE_ACCESSOR } from './control_value_accessor';
import { setUpControl, composeValidators, composeAsyncValidators, isPropertyUpdated, selectValueAccessor } from './shared';
const formControlBinding = CONST_EXPR(new Provider(NgControl, { useExisting: forwardRef(() => NgFormControl) }));
/**
* Binds an existing {@link Control} to a DOM element.
*
* ### Example ([live demo](http://plnkr.co/edit/jcQlZ2tTh22BZZ2ucNAT?p=preview))
*
* In this example, we bind the control to an input element. When the value of the input element
* changes, the value of the control will reflect that change. Likewise, if the value of the
* control changes, the input element reflects that change.
*
* ```typescript
* @Component({
* selector: 'my-app',
* template: `
* <div>
* <h2>NgFormControl Example</h2>