From f3b49378e4939fe91b0d14a80720c2d5aed83379 Mon Sep 17 00:00:00 2001 From: Victor Berchet Date: Tue, 9 Jun 2015 12:33:40 +0200 Subject: [PATCH] feat(Directive): Have a single Directive.host which mimics HTML fixes #2268 BREAKING CHANGE: Before @Directive({ hostListeners: {'event': 'statement'}, hostProperties: {'expression': 'hostProp'}, hostAttributes: {'attr': 'value'}, hostActions: {'action': 'statement'} }) After @Directive({ host: { '(event)': 'statement', '[hostProp]': 'expression' // k & v swapped 'attr': 'value', '@action': 'statement' } }) --- .../src/core/annotations_impl/annotations.ts | 41 +++------ .../src/core/compiler/element_injector.ts | 11 +-- .../directives/checkbox_value_accessor.ts | 21 ++--- .../directives/default_value_accessor.ts | 26 +++--- .../forms/directives/form_model_directive.ts | 6 +- .../select_control_value_accessor.ts | 26 +++--- .../template_driven_form_directive.ts | 4 +- modules/angular2/src/render/api.ts | 90 +++++++++++++++++-- .../render/dom/compiler/directive_parser.ts | 36 ++++---- modules/angular2/src/render/dom/convert.ts | 8 +- .../src/render/dom/view/proto_view_builder.ts | 4 +- modules/angular2/src/router/router_link.ts | 2 +- .../test/core/compiler/compiler_spec.ts | 6 +- .../compiler/dynamic_component_loader_spec.ts | 2 +- .../core/compiler/element_injector_spec.ts | 2 +- .../test/core/compiler/integration_spec.ts | 26 +++--- .../core/compiler/proto_view_factory_spec.ts | 16 ++-- .../angular2/test/forms/integration_spec.ts | 3 +- modules/angular2/test/render/api_spec.ts | 26 ++++++ .../dom/compiler/compiler_common_tests.ts | 4 +- .../dom/compiler/directive_parser_spec.ts | 38 ++++---- .../angular2/test/render/dom/convert_spec.ts | 33 ++++--- .../dom/dom_renderer_integration_spec.ts | 6 +- .../shadow_dom_emulation_integration_spec.ts | 26 +++--- .../src/components/button/button.ts | 3 +- .../src/components/checkbox/checkbox.ts | 12 +-- .../src/components/dialog/dialog.ts | 4 +- .../src/components/grid_list/grid_list.ts | 16 ++-- .../src/components/input/input.ts | 13 +-- .../progress-linear/progress_linear.ts | 10 +-- .../src/components/radio/radio_button.ts | 28 +++--- .../src/components/switcher/switch.ts | 9 +- 32 files changed, 316 insertions(+), 242 deletions(-) create mode 100644 modules/angular2/test/render/api_spec.ts diff --git a/modules/angular2/src/core/annotations_impl/annotations.ts b/modules/angular2/src/core/annotations_impl/annotations.ts index b79e842924..7b0257d0da 100644 --- a/modules/angular2/src/core/annotations_impl/annotations.ts +++ b/modules/angular2/src/core/annotations_impl/annotations.ts @@ -585,6 +585,8 @@ export class Directive extends Injectable { */ events: List; + // TODO(vicb): doc + /** * Specifies which DOM hostListeners a directive listens to. * @@ -643,9 +645,6 @@ export class Directive extends Injectable { * 'change' event. * */ - hostListeners: StringMap; - - /** * Specifies which DOM properties a directives updates. * @@ -667,8 +666,6 @@ export class Directive extends Injectable { * the host element. * ``` */ - hostProperties: StringMap; - /** * Specifies static attributes that should be propagated to a host element. Attributes specified * in `hostAttributes` @@ -691,8 +688,6 @@ export class Directive extends Injectable { * will ensure that this element will get the "button" role. * ``` */ - hostAttributes: StringMap; - /** * Specifies which DOM methods a directive can invoke. * @@ -719,7 +714,8 @@ export class Directive extends Injectable { * element. * ``` */ - hostActions: StringMap; + + host: StringMap; /** * Specifies which lifecycle should be notified to the directive. @@ -795,16 +791,13 @@ export class Directive extends Injectable { exportAs: string; constructor({ - selector, properties, events, hostListeners, hostProperties, hostAttributes, - hostActions, lifecycle, hostInjector, exportAs, compileChildren = true, + selector, properties, events, host, lifecycle, hostInjector, exportAs, + compileChildren = true, }: { selector?: string, properties?: List, events?: List, - hostListeners?: StringMap, - hostProperties?: StringMap, - hostAttributes?: StringMap, - hostActions?: StringMap, + host?: StringMap, lifecycle?: List, hostInjector?: List, exportAs?: string, @@ -814,10 +807,7 @@ export class Directive extends Injectable { this.selector = selector; this.properties = properties; this.events = events; - this.hostListeners = hostListeners; - this.hostProperties = hostProperties; - this.hostAttributes = hostAttributes; - this.hostActions = hostActions; + this.host = host; this.exportAs = exportAs; this.lifecycle = lifecycle; this.compileChildren = compileChildren; @@ -1022,16 +1012,12 @@ export class Component extends Directive { */ viewInjector: List; - constructor({selector, properties, events, hostListeners, hostProperties, hostAttributes, - hostActions, exportAs, appInjector, lifecycle, hostInjector, viewInjector, - changeDetection = DEFAULT, compileChildren = true}: { + constructor({selector, properties, events, host, exportAs, appInjector, lifecycle, hostInjector, + viewInjector, changeDetection = DEFAULT, compileChildren = true}: { selector?: string, properties?: List, events?: List, - hostListeners?: StringMap, - hostProperties?: StringMap, - hostAttributes?: StringMap, - hostActions?: StringMap, + host?: StringMap, exportAs?: string, appInjector?: List, lifecycle?: List, @@ -1044,10 +1030,7 @@ export class Component extends Directive { selector: selector, properties: properties, events: events, - hostListeners: hostListeners, - hostProperties: hostProperties, - hostAttributes: hostAttributes, - hostActions: hostActions, + host: host, exportAs: exportAs, hostInjector: hostInjector, lifecycle: lifecycle, diff --git a/modules/angular2/src/core/compiler/element_injector.ts b/modules/angular2/src/core/compiler/element_injector.ts index 0e0e6279ab..1ca28cbf6e 100644 --- a/modules/angular2/src/core/compiler/element_injector.ts +++ b/modules/angular2/src/core/compiler/element_injector.ts @@ -293,21 +293,14 @@ export class DirectiveBinding extends ResolvedBinding { var resolvedViewInjectables = ann instanceof Component && isPresent(ann.viewInjector) ? resolveBindings(ann.viewInjector) : []; - var metadata = new DirectiveMetadata({ + var metadata = DirectiveMetadata.create({ id: stringify(rb.key.token), type: ann instanceof Component ? DirectiveMetadata.COMPONENT_TYPE : DirectiveMetadata.DIRECTIVE_TYPE, selector: ann.selector, compileChildren: ann.compileChildren, events: ann.events, - hostListeners: - isPresent(ann.hostListeners) ? MapWrapper.createFromStringMap(ann.hostListeners) : null, - hostProperties: - isPresent(ann.hostProperties) ? MapWrapper.createFromStringMap(ann.hostProperties) : null, - hostAttributes: - isPresent(ann.hostAttributes) ? MapWrapper.createFromStringMap(ann.hostAttributes) : null, - hostActions: isPresent(ann.hostActions) ? MapWrapper.createFromStringMap(ann.hostActions) : - null, + host: isPresent(ann.host) ? MapWrapper.createFromStringMap(ann.host) : null, properties: ann.properties, readAttributes: DirectiveBinding._readAttributes(deps), diff --git a/modules/angular2/src/forms/directives/checkbox_value_accessor.ts b/modules/angular2/src/forms/directives/checkbox_value_accessor.ts index c4980adcb6..eae241828b 100644 --- a/modules/angular2/src/forms/directives/checkbox_value_accessor.ts +++ b/modules/angular2/src/forms/directives/checkbox_value_accessor.ts @@ -16,15 +16,16 @@ import {ControlValueAccessor} from './control_value_accessor'; @Directive({ selector: 'input[type=checkbox][ng-control],input[type=checkbox][ng-form-control],input[type=checkbox][ng-model]', - hostListeners: {'change': 'onChange($event.target.checked)', 'blur': 'onTouched()'}, - hostProperties: { - 'checked': 'checked', - 'cd.control?.untouched == true': 'class.ng-untouched', - 'cd.control?.touched == true': 'class.ng-touched', - 'cd.control?.pristine == true': 'class.ng-pristine', - 'cd.control?.dirty == true': 'class.ng-dirty', - 'cd.control?.valid == true': 'class.ng-valid', - 'cd.control?.valid == false': 'class.ng-invalid' + host: { + '(change)': 'onChange($event.target.checked)', + '(blur)': 'onTouched()', + '[checked]': 'checked', + '[class.ng-untouched]': 'cd.control?.untouched == true', + '[class.ng-touched]': 'cd.control?.touched == true', + '[class.ng-pristine]': 'cd.control?.pristine == true', + '[class.ng-dirty]': 'cd.control?.dirty == true', + '[class.ng-valid]': 'cd.control?.valid == true', + '[class.ng-invalid]': 'cd.control?.valid == false' } }) export class CheckboxControlValueAccessor implements ControlValueAccessor { @@ -42,4 +43,4 @@ export class CheckboxControlValueAccessor implements ControlValueAccessor { registerOnChange(fn): void { this.onChange = fn; } registerOnTouched(fn): void { this.onTouched = fn; } -} \ No newline at end of file +} diff --git a/modules/angular2/src/forms/directives/default_value_accessor.ts b/modules/angular2/src/forms/directives/default_value_accessor.ts index 98c6a9ad18..d940902323 100644 --- a/modules/angular2/src/forms/directives/default_value_accessor.ts +++ b/modules/angular2/src/forms/directives/default_value_accessor.ts @@ -19,19 +19,17 @@ import {isBlank} from 'angular2/src/facade/lang'; @Directive({ selector: 'input:not([type=checkbox])[ng-control],textarea[ng-control],input:not([type=checkbox])[ng-form-control],textarea[ng-form-control],input:not([type=checkbox])[ng-model],textarea[ng-model]', - hostListeners: { - 'change': 'onChange($event.target.value)', - 'input': 'onChange($event.target.value)', - 'blur': 'onTouched()' - }, - hostProperties: { - 'value': 'value', - 'cd.control?.untouched == true': 'class.ng-untouched', - 'cd.control?.touched == true': 'class.ng-touched', - 'cd.control?.pristine == true': 'class.ng-pristine', - 'cd.control?.dirty == true': 'class.ng-dirty', - 'cd.control?.valid == true': 'class.ng-valid', - 'cd.control?.valid == false': 'class.ng-invalid' + host: { + '(change)': 'onChange($event.target.value)', + '(input)': 'onChange($event.target.value)', + '(blur)': 'onTouched()', + '[value]': 'value', + '[class.ng-untouched]': 'cd.control?.untouched == true', + '[class.ng-touched]': 'cd.control?.touched == true', + '[class.ng-pristine]': 'cd.control?.pristine == true', + '[class.ng-dirty]': 'cd.control?.dirty == true', + '[class.ng-valid]': 'cd.control?.valid == true', + '[class.ng-invalid]': 'cd.control?.valid == false' } }) export class DefaultValueAccessor implements ControlValueAccessor { @@ -50,4 +48,4 @@ export class DefaultValueAccessor implements ControlValueAccessor { registerOnChange(fn): void { this.onChange = fn; } registerOnTouched(fn): void { this.onTouched = fn; } -} \ No newline at end of file +} diff --git a/modules/angular2/src/forms/directives/form_model_directive.ts b/modules/angular2/src/forms/directives/form_model_directive.ts index 35f3865d91..512a95e4bd 100644 --- a/modules/angular2/src/forms/directives/form_model_directive.ts +++ b/modules/angular2/src/forms/directives/form_model_directive.ts @@ -60,8 +60,8 @@ const formDirectiveBinding = CONST_EXPR( hostInjector: [formDirectiveBinding], properties: ['form: ng-form-model'], lifecycle: [onChange], - hostListeners: { - 'submit': 'onSubmit()', + host: { + '(submit)': 'onSubmit()', }, events: ['ngSubmit'], exportAs: 'form' @@ -113,4 +113,4 @@ export class FormModelDirective extends ControlContainerDirective implements For dir.valueAccessor.writeValue(c.value); }); } -} \ No newline at end of file +} diff --git a/modules/angular2/src/forms/directives/select_control_value_accessor.ts b/modules/angular2/src/forms/directives/select_control_value_accessor.ts index e424b5ebb1..1673414218 100644 --- a/modules/angular2/src/forms/directives/select_control_value_accessor.ts +++ b/modules/angular2/src/forms/directives/select_control_value_accessor.ts @@ -17,19 +17,17 @@ import {ControlValueAccessor} from './control_value_accessor'; */ @Directive({ selector: 'select[ng-control],select[ng-form-control],select[ng-model]', - hostListeners: { - 'change': 'onChange($event.target.value)', - 'input': 'onChange($event.target.value)', - 'blur': 'onTouched()' - }, - hostProperties: { - 'value': 'value', - 'cd.control?.untouched == true': 'class.ng-untouched', - 'cd.control?.touched == true': 'class.ng-touched', - 'cd.control?.pristine == true': 'class.ng-pristine', - 'cd.control?.dirty == true': 'class.ng-dirty', - 'cd.control?.valid == true': 'class.ng-valid', - 'cd.control?.valid == false': 'class.ng-invalid' + host: { + '(change)': 'onChange($event.target.value)', + '(input)': 'onChange($event.target.value)', + '(blur)': 'onTouched()', + '[value]': 'value', + '[class.ng-untouched]': 'cd.control?.untouched == true', + '[class.ng-touched]': 'cd.control?.touched == true', + '[class.ng-pristine]': 'cd.control?.pristine == true', + '[class.ng-dirty]': 'cd.control?.dirty == true', + '[class.ng-valid]': 'cd.control?.valid == true', + '[class.ng-invalid]': 'cd.control?.valid == false' } }) export class SelectControlValueAccessor implements ControlValueAccessor { @@ -48,4 +46,4 @@ export class SelectControlValueAccessor implements ControlValueAccessor { registerOnChange(fn): void { this.onChange = fn; } registerOnTouched(fn): void { this.onTouched = fn; } -} \ No newline at end of file +} diff --git a/modules/angular2/src/forms/directives/template_driven_form_directive.ts b/modules/angular2/src/forms/directives/template_driven_form_directive.ts index b2e49739c9..de8bd0816c 100644 --- a/modules/angular2/src/forms/directives/template_driven_form_directive.ts +++ b/modules/angular2/src/forms/directives/template_driven_form_directive.ts @@ -16,8 +16,8 @@ const formDirectiveBinding = CONST_EXPR(new Binding( @Directive({ selector: 'form:not([ng-no-form]):not([ng-form-model]),ng-form,[ng-form]', hostInjector: [formDirectiveBinding], - hostListeners: { - 'submit': 'onSubmit()', + host: { + '(submit)': 'onSubmit()', }, events: ['ngSubmit'], exportAs: 'form' diff --git a/modules/angular2/src/render/api.ts b/modules/angular2/src/render/api.ts index fb38f4a204..bf6af639af 100644 --- a/modules/angular2/src/render/api.ts +++ b/modules/angular2/src/render/api.ts @@ -1,6 +1,6 @@ -import {isPresent} from 'angular2/src/facade/lang'; +import {isPresent, isBlank, RegExpWrapper} from 'angular2/src/facade/lang'; import {Promise} from 'angular2/src/facade/async'; -import {List, Map} from 'angular2/src/facade/collection'; +import {List, Map, MapWrapper, StringMap, StringMapWrapper} from 'angular2/src/facade/collection'; import {ASTWithSource} from 'angular2/change_detection'; /** @@ -123,6 +123,11 @@ export class ProtoViewDto { } } +// group 1: property from "[property]" +// group 2: event from "(event)" +// group 3: action from "@action" +var hostRegExp = RegExpWrapper.create('^(?:(?:\\[([^\\]]+)\\])|(?:\\(([^\\)]+)\\))|(?:@(.+)))$'); + export class DirectiveMetadata { static get DIRECTIVE_TYPE() { return 0; } static get COMPONENT_TYPE() { return 1; } @@ -130,10 +135,6 @@ export class DirectiveMetadata { selector: string; compileChildren: boolean; events: List; - hostListeners: Map; - hostProperties: Map; - hostAttributes: Map; - hostActions: Map; properties: List; readAttributes: List; type: number; @@ -144,6 +145,11 @@ export class DirectiveMetadata { callOnAllChangesDone: boolean; changeDetection: string; exportAs: string; + hostListeners: Map; + hostProperties: Map; + hostAttributes: Map; + hostActions: Map; + constructor({id, selector, compileChildren, events, hostListeners, hostProperties, hostAttributes, hostActions, properties, readAttributes, type, callOnDestroy, callOnChange, callOnCheck, callOnInit, callOnAllChangesDone, changeDetection, exportAs}: { @@ -171,8 +177,8 @@ export class DirectiveMetadata { this.compileChildren = isPresent(compileChildren) ? compileChildren : true; this.events = events; this.hostListeners = hostListeners; - this.hostProperties = hostProperties; this.hostAttributes = hostAttributes; + this.hostProperties = hostProperties; this.hostActions = hostActions; this.properties = properties; this.readAttributes = readAttributes; @@ -185,6 +191,76 @@ export class DirectiveMetadata { this.changeDetection = changeDetection; this.exportAs = exportAs; } + + static create({id, selector, compileChildren, events, host, properties, readAttributes, type, + callOnDestroy, callOnChange, callOnCheck, callOnInit, callOnAllChangesDone, + changeDetection, exportAs}: { + id?: string, + selector?: string, + compileChildren?: boolean, + events?: List, + host?: Map, + properties?: List, + readAttributes?: List, + type?: number, + callOnDestroy?: boolean, + callOnChange?: boolean, + callOnCheck?: boolean, + callOnInit?: boolean, + callOnAllChangesDone?: boolean, + changeDetection?: string, + exportAs?: string + }) { + let hostConfig = DirectiveMetadata.parseHostConfig(host); + + return new DirectiveMetadata({ + id: id, + selector: selector, + compileChildren: compileChildren, + events: events, + hostListeners: StringMapWrapper.get(hostConfig, 'hostListeners'), + hostProperties: StringMapWrapper.get(hostConfig, 'hostProperties'), + hostAttributes: StringMapWrapper.get(hostConfig, 'hostAttributes'), + hostActions: StringMapWrapper.get(hostConfig, 'hostActions'), + properties: properties, + readAttributes: readAttributes, + type: type, + callOnDestroy: callOnDestroy, + callOnChange: callOnChange, + callOnCheck: callOnCheck, + callOnInit: callOnInit, + callOnAllChangesDone: callOnAllChangesDone, + changeDetection: changeDetection, + exportAs: exportAs + }); + } + + static parseHostConfig(host?: Map): StringMap> { + let hostListeners = MapWrapper.create(); + let hostProperties = MapWrapper.create(); + let hostAttributes = MapWrapper.create(); + let hostActions = MapWrapper.create(); + + if (isPresent(host)) { + MapWrapper.forEach(host, (value: string, key: string) => { + var matches = RegExpWrapper.firstMatch(hostRegExp, key); + if (isBlank(matches)) { + MapWrapper.set(hostAttributes, key, value); + } else if (isPresent(matches[1])) { + MapWrapper.set(hostProperties, matches[1], value); + } else if (isPresent(matches[2])) { + MapWrapper.set(hostListeners, matches[2], value); + } else if (isPresent(matches[3])) { + MapWrapper.set(hostActions, matches[3], value); + } + }); + } + + return { + hostListeners: hostListeners, hostProperties: hostProperties, hostAttributes: hostAttributes, + hostActions: hostActions + } + } } // An opaque reference to a DomProtoView diff --git a/modules/angular2/src/render/dom/compiler/directive_parser.ts b/modules/angular2/src/render/dom/compiler/directive_parser.ts index aae3b6df98..4000743411 100644 --- a/modules/angular2/src/render/dom/compiler/directive_parser.ts +++ b/modules/angular2/src/render/dom/compiler/directive_parser.ts @@ -85,37 +85,36 @@ import { } }); ListWrapper.forEach(foundDirectiveIndices, (directiveIndex) => { - var directive = this._directives[directiveIndex]; + var dirMetadata = this._directives[directiveIndex]; var directiveBinderBuilder = elementBinder.bindDirective(directiveIndex); - current.compileChildren = current.compileChildren && directive.compileChildren; - if (isPresent(directive.properties)) { - ListWrapper.forEach(directive.properties, (bindConfig) => { + current.compileChildren = current.compileChildren && dirMetadata.compileChildren; + if (isPresent(dirMetadata.properties)) { + ListWrapper.forEach(dirMetadata.properties, (bindConfig) => { this._bindDirectiveProperty(bindConfig, current, directiveBinderBuilder); }); } - if (isPresent(directive.hostListeners)) { - MapWrapper.forEach(directive.hostListeners, (action, eventName) => { + if (isPresent(dirMetadata.hostListeners)) { + MapWrapper.forEach(dirMetadata.hostListeners, (action, eventName) => { this._bindDirectiveEvent(eventName, action, current, directiveBinderBuilder); }); } - if (isPresent(directive.hostActions)) { - MapWrapper.forEach(directive.hostActions, (action, actionName) => { + if (isPresent(dirMetadata.hostActions)) { + MapWrapper.forEach(dirMetadata.hostActions, (action, actionName) => { this._bindHostAction(actionName, action, current, directiveBinderBuilder); }); } - if (isPresent(directive.hostProperties)) { - MapWrapper.forEach(directive.hostProperties, (hostPropertyName, directivePropertyName) => { - this._bindHostProperty(hostPropertyName, directivePropertyName, current, - directiveBinderBuilder); + if (isPresent(dirMetadata.hostProperties)) { + MapWrapper.forEach(dirMetadata.hostProperties, (expression, hostPropertyName) => { + this._bindHostProperty(hostPropertyName, expression, current, directiveBinderBuilder); }); } - if (isPresent(directive.hostAttributes)) { - MapWrapper.forEach(directive.hostAttributes, (hostAttrValue, hostAttrName) => { + if (isPresent(dirMetadata.hostAttributes)) { + MapWrapper.forEach(dirMetadata.hostAttributes, (hostAttrValue, hostAttrName) => { this._addHostAttribute(hostAttrName, hostAttrValue, current); }); } - if (isPresent(directive.readAttributes)) { - ListWrapper.forEach(directive.readAttributes, + if (isPresent(dirMetadata.readAttributes)) { + ListWrapper.forEach(dirMetadata.readAttributes, (attrName) => { elementBinder.readAttribute(attrName); }); } }); @@ -176,9 +175,8 @@ import { directiveBinderBuilder.bindHostAction(actionName, actionExpression, ast); } - _bindHostProperty(hostPropertyName, directivePropertyName, compileElement, - directiveBinderBuilder) { - var ast = this._parser.parseBinding(directivePropertyName, + _bindHostProperty(hostPropertyName, expression, compileElement, directiveBinderBuilder) { + var ast = this._parser.parseBinding(expression, `hostProperties of ${compileElement.elementDescription}`); directiveBinderBuilder.bindHostProperty(hostPropertyName, ast); } diff --git a/modules/angular2/src/render/dom/convert.ts b/modules/angular2/src/render/dom/convert.ts index 87471dae23..60c331fd3a 100644 --- a/modules/angular2/src/render/dom/convert.ts +++ b/modules/angular2/src/render/dom/convert.ts @@ -11,10 +11,10 @@ export function directiveMetadataToMap(meta: DirectiveMetadata): Map): DirectiveMetada id:MapWrapper.get(map, 'id'), selector:MapWrapper.get(map, 'selector'), compileChildren:MapWrapper.get(map, 'compileChildren'), - hostListeners:>_cloneIfPresent(MapWrapper.get(map, 'hostListeners')), hostProperties:>_cloneIfPresent(MapWrapper.get(map, 'hostProperties')), + hostListeners:>_cloneIfPresent(MapWrapper.get(map, 'hostListeners')), hostActions:>_cloneIfPresent(MapWrapper.get(map, 'hostActions')), hostAttributes:>_cloneIfPresent(MapWrapper.get(map, 'hostAttributes')), properties:>_cloneIfPresent(MapWrapper.get(map, 'properties')), @@ -57,7 +57,7 @@ export function directiveMetadataFromMap(map: Map): DirectiveMetada /** * Clones the [List] or [Map] `o` if it is present. */ -function _cloneIfPresent(o) { +function _cloneIfPresent(o): any { if (!isPresent(o)) return null; return ListWrapper.isList(o) ? ListWrapper.clone(o) : MapWrapper.clone(o); } diff --git a/modules/angular2/src/render/dom/view/proto_view_builder.ts b/modules/angular2/src/render/dom/view/proto_view_builder.ts index d2fee7ce8f..68fb3e549f 100644 --- a/modules/angular2/src/render/dom/view/proto_view_builder.ts +++ b/modules/angular2/src/render/dom/view/proto_view_builder.ts @@ -48,11 +48,11 @@ export class ProtoViewBuilder { var apiElementBinders = []; var transitiveContentTagCount = 0; - ListWrapper.forEach(this.elements, (ebb) => { + ListWrapper.forEach(this.elements, (ebb: ElementBinderBuilder) => { var propertySetters = MapWrapper.create(); var hostActions = MapWrapper.create(); - var apiDirectiveBinders = ListWrapper.map(ebb.directives, (dbb) => { + var apiDirectiveBinders = ListWrapper.map(ebb.directives, (dbb: DirectiveBuilder) => { ebb.eventBuilder.merge(dbb.eventBuilder); MapWrapper.forEach(dbb.hostPropertyBindings, (_, hostPropertyName) => { diff --git a/modules/angular2/src/router/router_link.ts b/modules/angular2/src/router/router_link.ts index 75337a92ea..486f6d33b2 100644 --- a/modules/angular2/src/router/router_link.ts +++ b/modules/angular2/src/router/router_link.ts @@ -34,7 +34,7 @@ import {Location} from './location'; selector: '[router-link]', properties: ['route: routerLink', 'params: routerParams'], lifecycle: [onAllChangesDone], - hostListeners: {'^click': 'onClick()'} + host: {'(^click)': 'onClick()'} }) export class RouterLink { private _domEl; diff --git a/modules/angular2/test/core/compiler/compiler_spec.ts b/modules/angular2/test/core/compiler/compiler_spec.ts index 674f90773b..b75346d92f 100644 --- a/modules/angular2/test/core/compiler/compiler_spec.ts +++ b/modules/angular2/test/core/compiler/compiler_spec.ts @@ -210,7 +210,7 @@ export function main() { captureDirective(DirectiveWithProperties) .then((renderDir) => { expect(renderDir.hostProperties) - .toEqual(MapWrapper.createFromStringMap({'someField': 'someProp'})); + .toEqual(MapWrapper.createFromStringMap({'someProp': 'someExp'})); async.done(); }); })); @@ -470,11 +470,11 @@ class SomeDirective { class IgnoreChildrenDirective { } -@Directive({hostListeners: {'someEvent': 'someAction'}}) +@Directive({host: {'(someEvent)': 'someAction'}}) class DirectiveWithEvents { } -@Directive({hostProperties: {'someField': 'someProp'}}) +@Directive({host: {'[someProp]': 'someExp'}}) class DirectiveWithProperties { } diff --git a/modules/angular2/test/core/compiler/dynamic_component_loader_spec.ts b/modules/angular2/test/core/compiler/dynamic_component_loader_spec.ts index e913240544..6fedaead39 100644 --- a/modules/angular2/test/core/compiler/dynamic_component_loader_spec.ts +++ b/modules/angular2/test/core/compiler/dynamic_component_loader_spec.ts @@ -303,7 +303,7 @@ class DynamicallyLoaded { class DynamicallyLoaded2 { } -@Component({selector: 'dummy', hostProperties: {'id': 'id'}}) +@Component({selector: 'dummy', host: {'[id]': 'id'}}) @View({template: "DynamicallyLoadedWithHostProps;"}) class DynamicallyLoadedWithHostProps { id: string; diff --git a/modules/angular2/test/core/compiler/element_injector_spec.ts b/modules/angular2/test/core/compiler/element_injector_spec.ts index 1e7396c0d8..0584e3cf46 100644 --- a/modules/angular2/test/core/compiler/element_injector_spec.ts +++ b/modules/angular2/test/core/compiler/element_injector_spec.ts @@ -432,7 +432,7 @@ export function main() { it('should return a list of hostAction accessors', () => { var binding = DirectiveBinding.createFromType( - HasEventEmitter, new dirAnn.Directive({hostActions: {'hostActionName': 'onAction'}})); + HasEventEmitter, new dirAnn.Directive({host: {'@hostActionName': 'onAction'}})); var inj = createPei(null, 0, [binding]); expect(inj.hostActionAccessors.length).toEqual(1); diff --git a/modules/angular2/test/core/compiler/integration_spec.ts b/modules/angular2/test/core/compiler/integration_spec.ts index fcc123b61e..47b13ec10e 100644 --- a/modules/angular2/test/core/compiler/integration_spec.ts +++ b/modules/angular2/test/core/compiler/integration_spec.ts @@ -1432,12 +1432,12 @@ class DirectiveEmitingEvent { fireEvent(msg: string) { ObservableWrapper.callNext(this.event, msg); } } -@Directive({selector: '[update-host-attributes]', hostAttributes: {'role': 'button'}}) +@Directive({selector: '[update-host-attributes]', host: {'role': 'button'}}) @Injectable() class DirectiveUpdatingHostAttributes { } -@Directive({selector: '[update-host-properties]', hostProperties: {'id': 'id'}}) +@Directive({selector: '[update-host-properties]', host: {'[id]': 'id'}}) @Injectable() class DirectiveUpdatingHostProperties { id: string; @@ -1447,7 +1447,7 @@ class DirectiveUpdatingHostProperties { @Directive({ selector: '[update-host-actions]', - hostActions: {'setAttr': 'setAttribute("key", $action["attrValue"])'} + host: {'@setAttr': 'setAttribute("key", $action["attrValue"])'} }) @Injectable() class DirectiveUpdatingHostActions { @@ -1458,7 +1458,7 @@ class DirectiveUpdatingHostActions { triggerSetAttr(attrValue) { ObservableWrapper.callNext(this.setAttr, {'attrValue': attrValue}); } } -@Directive({selector: '[listener]', hostListeners: {'event': 'onEvent($event)'}}) +@Directive({selector: '[listener]', host: {'(event)': 'onEvent($event)'}}) @Injectable() class DirectiveListeningEvent { msg: string; @@ -1470,11 +1470,11 @@ class DirectiveListeningEvent { @Directive({ selector: '[listener]', - hostListeners: { - 'domEvent': 'onEvent($event.type)', - 'window:domEvent': 'onWindowEvent($event.type)', - 'document:domEvent': 'onDocumentEvent($event.type)', - 'body:domEvent': 'onBodyEvent($event.type)' + host: { + '(domEvent)': 'onEvent($event.type)', + '(window:domEvent)': 'onWindowEvent($event.type)', + '(document:domEvent)': 'onDocumentEvent($event.type)', + '(body:domEvent)': 'onBodyEvent($event.type)' } }) @Injectable() @@ -1489,7 +1489,7 @@ class DirectiveListeningDomEvent { var globalCounter = 0; @Directive( - {selector: '[listenerother]', hostListeners: {'window:domEvent': 'onEvent($event.type)'}}) + {selector: '[listenerother]', host: {'(window:domEvent)': 'onEvent($event.type)'}}) @Injectable() class DirectiveListeningDomEventOther { eventType: string; @@ -1501,13 +1501,13 @@ class DirectiveListeningDomEventOther { } } -@Directive({selector: '[listenerprevent]', hostListeners: {'click': 'onEvent($event)'}}) +@Directive({selector: '[listenerprevent]', host: {'(click)': 'onEvent($event)'}}) @Injectable() class DirectiveListeningDomEventPrevent { onEvent(event) { return false; } } -@Directive({selector: '[listenernoprevent]', hostListeners: {'click': 'onEvent($event)'}}) +@Directive({selector: '[listenernoprevent]', host: {'(click)': 'onEvent($event)'}}) @Injectable() class DirectiveListeningDomEventNoPrevent { onEvent(event) { return true; } @@ -1749,4 +1749,4 @@ class SomeImperativeViewport { @Directive({selector: '[export-dir]', exportAs: 'dir'}) class ExportDir { -} \ No newline at end of file +} diff --git a/modules/angular2/test/core/compiler/proto_view_factory_spec.ts b/modules/angular2/test/core/compiler/proto_view_factory_spec.ts index ce84060f2f..9e72ebf6a3 100644 --- a/modules/angular2/test/core/compiler/proto_view_factory_spec.ts +++ b/modules/angular2/test/core/compiler/proto_view_factory_spec.ts @@ -76,9 +76,9 @@ export function main() { {variableBindings: MapWrapper.createFromStringMap({"exportName": "templateName"})}), [ directiveBinding( - {metadata: new renderApi.DirectiveMetadata({exportAs: 'exportName'})}), + {metadata: renderApi.DirectiveMetadata.create({exportAs: 'exportName'})}), directiveBinding( - {metadata: new renderApi.DirectiveMetadata({exportAs: 'otherName'})}) + {metadata: renderApi.DirectiveMetadata.create({exportAs: 'otherName'})}) ]); expect(dvbs).toEqual(MapWrapper.createFromStringMap({"templateName": 0})); @@ -90,7 +90,7 @@ export function main() { {variableBindings: MapWrapper.createFromStringMap({"$implicit": "templateName"})}), [ directiveBinding({ - metadata: new renderApi.DirectiveMetadata( + metadata: renderApi.DirectiveMetadata.create( {exportAs: null, type: renderApi.DirectiveMetadata.COMPONENT_TYPE}) }) ]); @@ -107,7 +107,7 @@ export function main() { }), [ directiveBinding( - {metadata: new renderApi.DirectiveMetadata({exportAs: 'exportName'})}) + {metadata: renderApi.DirectiveMetadata.create({exportAs: 'exportName'})}) ]); }).toThrowError(new RegExp("Cannot find directive with exportAs = 'someInvalidName'")); }); @@ -120,9 +120,9 @@ export function main() { }), [ directiveBinding( - {metadata: new renderApi.DirectiveMetadata({exportAs: 'exportName'})}), + {metadata: renderApi.DirectiveMetadata.create({exportAs: 'exportName'})}), directiveBinding( - {metadata: new renderApi.DirectiveMetadata({exportAs: 'exportName'})}) + {metadata: renderApi.DirectiveMetadata.create({exportAs: 'exportName'})}) ]); }).toThrowError(new RegExp("More than one directive have exportAs = 'exportName'")); }); @@ -132,9 +132,9 @@ export function main() { createDirectiveVariableBindings( new renderApi.ElementBinder({variableBindings: MapWrapper.create()}), [ directiveBinding( - {metadata: new renderApi.DirectiveMetadata({exportAs: 'exportName'})}), + {metadata: renderApi.DirectiveMetadata.create({exportAs: 'exportName'})}), directiveBinding( - {metadata: new renderApi.DirectiveMetadata({exportAs: 'exportName'})}) + {metadata: renderApi.DirectiveMetadata.create({exportAs: 'exportName'})}) ]); }).not.toThrow(); }); diff --git a/modules/angular2/test/forms/integration_spec.ts b/modules/angular2/test/forms/integration_spec.ts index 008d9e7412..07e21f89f7 100644 --- a/modules/angular2/test/forms/integration_spec.ts +++ b/modules/angular2/test/forms/integration_spec.ts @@ -733,8 +733,7 @@ export function main() { @Directive({ selector: '[wrapped-value]', - hostListeners: {'change': 'handleOnChange($event.target.value)'}, - hostProperties: {'value': 'value'} + host: {'(change)': 'handleOnChange($event.target.value)', '[value]': 'value'} }) class WrappedValue implements ControlValueAccessor { value; diff --git a/modules/angular2/test/render/api_spec.ts b/modules/angular2/test/render/api_spec.ts new file mode 100644 index 0000000000..44774ee08d --- /dev/null +++ b/modules/angular2/test/render/api_spec.ts @@ -0,0 +1,26 @@ +import {DirectiveMetadata} from 'angular2/src/render/api'; + +import {MapWrapper} from 'angular2/src/facade/collection'; +import {ddescribe, describe, expect, it} from 'angular2/test_lib'; + +export function main() { + describe('Metadata', () => { + describe('host', () => { + it('should parse host configuration', () => { + var md = DirectiveMetadata.create({ + host: MapWrapper.createFromPairs([ + ['(event)', 'eventVal'], + ['[prop]', 'propVal'], + ['@action', 'actionVal'], + ['attr', 'attrVal'] + ]) + }); + + expect(md.hostListeners).toEqual(MapWrapper.createFromPairs([['event', 'eventVal']])); + expect(md.hostProperties).toEqual(MapWrapper.createFromPairs([['prop', 'propVal']])); + expect(md.hostActions).toEqual(MapWrapper.createFromPairs([['action', 'actionVal']])); + expect(md.hostAttributes).toEqual(MapWrapper.createFromPairs([['attr', 'attrVal']])); + }); + }); + }); +} diff --git a/modules/angular2/test/render/dom/compiler/compiler_common_tests.ts b/modules/angular2/test/render/dom/compiler/compiler_common_tests.ts index 4fd1074f1d..9b8db2f5a7 100644 --- a/modules/angular2/test/render/dom/compiler/compiler_common_tests.ts +++ b/modules/angular2/test/render/dom/compiler/compiler_common_tests.ts @@ -62,7 +62,7 @@ export function runCompilerCommonTests() { current.inheritedProtoView.bindVariable('b', 'a'); }); - var dirMetadata = new DirectiveMetadata( + var dirMetadata = DirectiveMetadata.create( {id: 'id', selector: 'CUSTOM', type: DirectiveMetadata.COMPONENT_TYPE}); compiler.compileHost(dirMetadata) .then((protoView) => { @@ -218,5 +218,5 @@ class FakeTemplateLoader extends TemplateLoader { } } -var someComponent = new DirectiveMetadata( +var someComponent = DirectiveMetadata.create( {selector: 'some-comp', id: 'someComponent', type: DirectiveMetadata.COMPONENT_TYPE}); diff --git a/modules/angular2/test/render/dom/compiler/directive_parser_spec.ts b/modules/angular2/test/render/dom/compiler/directive_parser_spec.ts index 20fe8f521c..97bf556ad4 100644 --- a/modules/angular2/test/render/dom/compiler/directive_parser_spec.ts +++ b/modules/angular2/test/render/dom/compiler/directive_parser_spec.ts @@ -111,7 +111,7 @@ export function main() { var directiveBinding = results[0].directives[0]; - var ast = MapWrapper.get(directiveBinding.hostPropertyBindings, 'hostProperty'); + var ast = MapWrapper.get(directiveBinding.hostPropertyBindings, 'hostProp'); expect(ast.source).toEqual('dirProp'); }); @@ -211,63 +211,63 @@ class MockStep implements CompileStep { } } -var someComponent = new DirectiveMetadata( +var someComponent = DirectiveMetadata.create( {selector: 'some-comp', id: 'someComponent', type: DirectiveMetadata.COMPONENT_TYPE}); -var someComponentDup = new DirectiveMetadata( +var someComponentDup = DirectiveMetadata.create( {selector: 'some-comp', id: 'someComponentDup', type: DirectiveMetadata.COMPONENT_TYPE}); -var someComponent2 = new DirectiveMetadata( +var someComponent2 = DirectiveMetadata.create( {selector: 'some-comp2', id: 'someComponent2', type: DirectiveMetadata.COMPONENT_TYPE}); -var someDirective = new DirectiveMetadata( +var someDirective = DirectiveMetadata.create( {selector: '[some-decor]', id: 'someDirective', type: DirectiveMetadata.DIRECTIVE_TYPE}); -var someDirectiveIgnoringChildren = new DirectiveMetadata({ +var someDirectiveIgnoringChildren = DirectiveMetadata.create({ selector: '[some-decor-ignoring-children]', compileChildren: false, type: DirectiveMetadata.DIRECTIVE_TYPE }); -var decoratorWithMultipleAttrs = new DirectiveMetadata({ +var decoratorWithMultipleAttrs = DirectiveMetadata.create({ selector: 'input[type=text][control]', id: 'decoratorWithMultipleAttrs', type: DirectiveMetadata.DIRECTIVE_TYPE }); -var someDirectiveWithProps = new DirectiveMetadata({ +var someDirectiveWithProps = DirectiveMetadata.create({ selector: '[some-decor-props]', properties: ['dirProp: elProp', 'doubleProp: elProp | double'], readAttributes: ['some-attr'] }); -var someDirectiveWithHostProperties = new DirectiveMetadata({ +var someDirectiveWithHostProperties = DirectiveMetadata.create({ selector: '[some-decor-with-host-props]', - hostProperties: MapWrapper.createFromStringMap({'dirProp': 'hostProperty'}) + host: MapWrapper.createFromStringMap({'[hostProp]' : 'dirProp'}) }); -var someDirectiveWithHostAttributes = new DirectiveMetadata({ +var someDirectiveWithHostAttributes = DirectiveMetadata.create({ selector: '[some-decor-with-host-attrs]', - hostAttributes: MapWrapper.createFromStringMap({'attr_name': 'attr_val', 'class': 'foo bar'}) + host: MapWrapper.createFromStringMap({'attr_name': 'attr_val', 'class': 'foo bar'}) }); -var someDirectiveWithEvents = new DirectiveMetadata({ +var someDirectiveWithEvents = DirectiveMetadata.create({ selector: '[some-decor-events]', - hostListeners: MapWrapper.createFromStringMap({'click': 'doIt()'}) + host: MapWrapper.createFromStringMap({'(click)': 'doIt()'}) }); -var someDirectiveWithHostActions = new DirectiveMetadata({ +var someDirectiveWithHostActions = DirectiveMetadata.create({ selector: '[some-decor-host-actions]', - hostActions: MapWrapper.createFromStringMap({'focus': 'focus()'}) + host: MapWrapper.createFromStringMap({'@focus': 'focus()'}) }); -var someDirectiveWithGlobalEvents = new DirectiveMetadata({ +var someDirectiveWithGlobalEvents = DirectiveMetadata.create({ selector: '[some-decor-globalevents]', - hostListeners: MapWrapper.createFromStringMap({'window:resize': 'doItGlobal()'}) + host: MapWrapper.createFromStringMap({'(window:resize)': 'doItGlobal()'}) }); -var componentWithNonElementSelector = new DirectiveMetadata({ +var componentWithNonElementSelector = DirectiveMetadata.create({ id: 'componentWithNonElementSelector', selector: '[attr]', type: DirectiveMetadata.COMPONENT_TYPE diff --git a/modules/angular2/test/render/dom/convert_spec.ts b/modules/angular2/test/render/dom/convert_spec.ts index 8b924c35a1..a880ec96ef 100644 --- a/modules/angular2/test/render/dom/convert_spec.ts +++ b/modules/angular2/test/render/dom/convert_spec.ts @@ -8,9 +8,10 @@ export function main() { it('directiveMetadataToMap', () => { var someComponent = new DirectiveMetadata({ compileChildren: false, - hostListeners: MapWrapper.createFromPairs([['listenKey', 'listenVal']]), - hostProperties: MapWrapper.createFromPairs([['hostPropKey', 'hostPropVal']]), - hostActions: MapWrapper.createFromPairs([['hostActionKey', 'hostActionVal']]), + hostListeners: MapWrapper.createFromPairs([['LKey', 'LVal']]), + hostProperties: MapWrapper.createFromPairs([['PKey', 'PVal']]), + hostActions: MapWrapper.createFromPairs([['AcKey', 'AcVal']]), + hostAttributes: MapWrapper.createFromPairs([['AtKey', 'AtVal']]), id: 'someComponent', properties: ['propKey: propVal'], readAttributes: ['read1', 'read2'], @@ -25,12 +26,10 @@ export function main() { }); var map = directiveMetadataToMap(someComponent); expect(MapWrapper.get(map, 'compileChildren')).toEqual(false); - expect(MapWrapper.get(map, 'hostListeners')) - .toEqual(MapWrapper.createFromPairs([['listenKey', 'listenVal']])); - expect(MapWrapper.get(map, 'hostProperties')) - .toEqual(MapWrapper.createFromPairs([['hostPropKey', 'hostPropVal']])); - expect(MapWrapper.get(map, 'hostActions')) - .toEqual(MapWrapper.createFromPairs([['hostActionKey', 'hostActionVal']])); + expect(MapWrapper.get(map, 'hostListeners')).toEqual(MapWrapper.createFromPairs([['LKey', 'LVal']])); + expect(MapWrapper.get(map, 'hostProperties')).toEqual(MapWrapper.createFromPairs([['PKey', 'PVal']])); + expect(MapWrapper.get(map, 'hostActions')).toEqual(MapWrapper.createFromPairs([['AcKey', 'AcVal']])); + expect(MapWrapper.get(map, 'hostAttributes')).toEqual(MapWrapper.createFromPairs([['AtKey', 'AtVal']])); expect(MapWrapper.get(map, 'id')).toEqual('someComponent'); expect(MapWrapper.get(map, 'properties')).toEqual(['propKey: propVal']); expect(MapWrapper.get(map, 'readAttributes')).toEqual(['read1', 'read2']); @@ -47,9 +46,10 @@ export function main() { it('mapToDirectiveMetadata', () => { var map = MapWrapper.createFromPairs([ ['compileChildren', false], - ['hostListeners', MapWrapper.createFromPairs([['testKey', 'testVal']])], - ['hostProperties', MapWrapper.createFromPairs([['hostPropKey', 'hostPropVal']])], - ['hostActions', MapWrapper.createFromPairs([['hostActionKey', 'hostActionVal']])], + ['hostProperties', MapWrapper.createFromPairs([['PKey', 'testVal']])], + ['hostListeners', MapWrapper.createFromPairs([['LKey', 'testVal']])], + ['hostActions', MapWrapper.createFromPairs([['AcKey', 'testVal']])], + ['hostAttributes', MapWrapper.createFromPairs([['AtKey', 'testVal']])], ['id', 'testId'], ['properties', ['propKey: propVal']], ['readAttributes', ['readTest1', 'readTest2']], @@ -64,11 +64,10 @@ export function main() { ]); var meta = directiveMetadataFromMap(map); expect(meta.compileChildren).toEqual(false); - expect(meta.hostListeners).toEqual(MapWrapper.createFromPairs([['testKey', 'testVal']])); - expect(meta.hostProperties) - .toEqual(MapWrapper.createFromPairs([['hostPropKey', 'hostPropVal']])); - expect(meta.hostActions) - .toEqual(MapWrapper.createFromPairs([['hostActionKey', 'hostActionVal']])); + expect(meta.hostProperties).toEqual(MapWrapper.createFromPairs([['PKey', 'testVal']])); + expect(meta.hostListeners).toEqual(MapWrapper.createFromPairs([['LKey', 'testVal']])); + expect(meta.hostActions).toEqual(MapWrapper.createFromPairs([['AcKey', 'testVal']])); + expect(meta.hostAttributes).toEqual(MapWrapper.createFromPairs([['AtKey', 'testVal']])); expect(meta.id).toEqual('testId'); expect(meta.properties).toEqual(['propKey: propVal']); expect(meta.readAttributes).toEqual(['readTest1', 'readTest2']); diff --git a/modules/angular2/test/render/dom/dom_renderer_integration_spec.ts b/modules/angular2/test/render/dom/dom_renderer_integration_spec.ts index 51d479d835..508af8bf97 100644 --- a/modules/angular2/test/render/dom/dom_renderer_integration_spec.ts +++ b/modules/angular2/test/render/dom/dom_renderer_integration_spec.ts @@ -180,12 +180,12 @@ export function main() { }); } -var someComponent = new DirectiveMetadata( +var someComponent = DirectiveMetadata.create( {id: 'someComponent', type: DirectiveMetadata.COMPONENT_TYPE, selector: 'some-comp'}); -var directiveWithHostActions = new DirectiveMetadata({ +var directiveWithHostActions = DirectiveMetadata.create({ id: 'withHostActions', type: DirectiveMetadata.DIRECTIVE_TYPE, selector: '[with-host-actions]', - hostActions: MapWrapper.createFromStringMap({'setValue': 'value = "val"'}) + host: MapWrapper.createFromStringMap({'@setValue': 'value = "val"'}) }); diff --git a/modules/angular2/test/render/dom/shadow_dom_emulation_integration_spec.ts b/modules/angular2/test/render/dom/shadow_dom_emulation_integration_spec.ts index 60dfc6f6c3..172db28914 100644 --- a/modules/angular2/test/render/dom/shadow_dom_emulation_integration_spec.ts +++ b/modules/angular2/test/render/dom/shadow_dom_emulation_integration_spec.ts @@ -399,52 +399,52 @@ export function main() { var mainDir = - new DirectiveMetadata({selector: 'main', id: 'main', type: DirectiveMetadata.COMPONENT_TYPE}); + DirectiveMetadata.create({selector: 'main', id: 'main', type: DirectiveMetadata.COMPONENT_TYPE}); -var simple = new DirectiveMetadata( +var simple = DirectiveMetadata.create( {selector: 'simple', id: 'simple', type: DirectiveMetadata.COMPONENT_TYPE}); var empty = - new DirectiveMetadata({selector: 'empty', id: 'empty', type: DirectiveMetadata.COMPONENT_TYPE}); + DirectiveMetadata.create({selector: 'empty', id: 'empty', type: DirectiveMetadata.COMPONENT_TYPE}); -var dynamicComponent = new DirectiveMetadata( +var dynamicComponent = DirectiveMetadata.create( {selector: 'dynamic', id: 'dynamic', type: DirectiveMetadata.COMPONENT_TYPE}); -var multipleContentTagsComponent = new DirectiveMetadata({ +var multipleContentTagsComponent = DirectiveMetadata.create({ selector: 'multiple-content-tags', id: 'multiple-content-tags', type: DirectiveMetadata.COMPONENT_TYPE }); -var manualViewportDirective = new DirectiveMetadata( +var manualViewportDirective = DirectiveMetadata.create( {selector: '[manual]', id: 'manual', type: DirectiveMetadata.DIRECTIVE_TYPE}); -var outerWithIndirectNestedComponent = new DirectiveMetadata({ +var outerWithIndirectNestedComponent = DirectiveMetadata.create({ selector: 'outer-with-indirect-nested', id: 'outer-with-indirect-nested', type: DirectiveMetadata.COMPONENT_TYPE }); var outerComponent = - new DirectiveMetadata({selector: 'outer', id: 'outer', type: DirectiveMetadata.COMPONENT_TYPE}); + DirectiveMetadata.create({selector: 'outer', id: 'outer', type: DirectiveMetadata.COMPONENT_TYPE}); var innerComponent = - new DirectiveMetadata({selector: 'inner', id: 'inner', type: DirectiveMetadata.COMPONENT_TYPE}); + DirectiveMetadata.create({selector: 'inner', id: 'inner', type: DirectiveMetadata.COMPONENT_TYPE}); -var innerInnerComponent = new DirectiveMetadata( +var innerInnerComponent = DirectiveMetadata.create( {selector: 'innerinner', id: 'innerinner', type: DirectiveMetadata.COMPONENT_TYPE}); -var conditionalContentComponent = new DirectiveMetadata({ +var conditionalContentComponent = DirectiveMetadata.create({ selector: 'conditional-content', id: 'conditional-content', type: DirectiveMetadata.COMPONENT_TYPE }); -var autoViewportDirective = new DirectiveMetadata( +var autoViewportDirective = DirectiveMetadata.create( {selector: '[auto]', id: '[auto]', type: DirectiveMetadata.DIRECTIVE_TYPE}); var tabComponent = - new DirectiveMetadata({selector: 'tab', id: 'tab', type: DirectiveMetadata.COMPONENT_TYPE}); + DirectiveMetadata.create({selector: 'tab', id: 'tab', type: DirectiveMetadata.COMPONENT_TYPE}); var simpleTemplate = new ViewDefinition( {componentId: 'simple', template: 'SIMPLE()', directives: []}); diff --git a/modules/angular2_material/src/components/button/button.ts b/modules/angular2_material/src/components/button/button.ts index d44eadbeb1..e86cbe18bd 100644 --- a/modules/angular2_material/src/components/button/button.ts +++ b/modules/angular2_material/src/components/button/button.ts @@ -12,8 +12,7 @@ export class MdButton { @Component({ selector: '[md-button][href]', properties: ['disabled'], - hostListeners: {'click': 'onClick($event)'}, - hostProperties: {'tabIndex': 'tabIndex'}, + host: {'(click)': 'onClick($event)', '[tabIndex]': 'tabIndex'}, lifecycle: [onChange] }) @View({templateUrl: 'angular2_material/src/components/button/button.html'}) diff --git a/modules/angular2_material/src/components/checkbox/checkbox.ts b/modules/angular2_material/src/components/checkbox/checkbox.ts index 465d0cc502..332ef3b882 100644 --- a/modules/angular2_material/src/components/checkbox/checkbox.ts +++ b/modules/angular2_material/src/components/checkbox/checkbox.ts @@ -7,12 +7,12 @@ import {NumberWrapper} from 'angular2/src/facade/lang'; @Component({ selector: 'md-checkbox', properties: ['checked', 'disabled'], - hostListeners: {'keydown': 'onKeydown($event)'}, - hostProperties: { - 'tabindex': 'tabindex', - 'role': 'attr.role', - 'checked': 'attr.aria-checked', - 'disabled': 'attr.aria-disabled' + host: { + '(keydown)': 'onKeydown($event)', + '[tabindex]': 'tabindex', + '[attr.role]': 'role', + '[attr.aria-checked]': 'checked', + '[attr.aria-disabled]': 'disabled' } }) @View({templateUrl: 'angular2_material/src/components/checkbox/checkbox.html', directives: []}) diff --git a/modules/angular2_material/src/components/dialog/dialog.ts b/modules/angular2_material/src/components/dialog/dialog.ts index b49188e38c..d014f09c99 100644 --- a/modules/angular2_material/src/components/dialog/dialog.ts +++ b/modules/angular2_material/src/components/dialog/dialog.ts @@ -209,7 +209,7 @@ export class MdDialogConfig { */ @Component({ selector: 'md-dialog-container', - hostListeners: {'body:^keydown': 'documentKeypress($event)'}, + host: {'(body:^keydown)': 'documentKeypress($event)'}, }) @View({ templateUrl: 'angular2_material/src/components/dialog/dialog.html', @@ -253,7 +253,7 @@ class MdDialogContent { /** Component for the dialog "backdrop", a transparent overlay over the rest of the page. */ @Component({ selector: 'md-backdrop', - hostListeners: {'click': 'onClick()'}, + host: {'(click)': 'onClick()'}, }) @View({template: ''}) class MdBackdrop { diff --git a/modules/angular2_material/src/components/grid_list/grid_list.ts b/modules/angular2_material/src/components/grid_list/grid_list.ts index ed8a6b8d7e..76303ee271 100644 --- a/modules/angular2_material/src/components/grid_list/grid_list.ts +++ b/modules/angular2_material/src/components/grid_list/grid_list.ts @@ -218,14 +218,14 @@ export class MdGridList { @Component({ selector: 'md-grid-tile', properties: ['rowspan', 'colspan'], - hostProperties: { - 'styleHeight': 'style.height', - 'styleWidth': 'style.width', - 'styleTop': 'style.top', - 'styleLeft': 'style.left', - 'styleMarginTop': 'style.marginTop', - 'stylePaddingTop': 'style.paddingTop', - 'role': 'role' + host: { + '[style.height]': 'styleHeight', + '[style.width]': 'styleWidth', + '[style.top]': 'styleTop', + '[style.left]': 'styleLeft', + '[style.marginTop]': 'styleMarginTop', + '[style.paddingTop]': 'stylePaddingTop', + '[role]': 'role' }, lifecycle: [onDestroy, onChange] }) diff --git a/modules/angular2_material/src/components/input/input.ts b/modules/angular2_material/src/components/input/input.ts index 20b7b00286..9e33c8a2a5 100644 --- a/modules/angular2_material/src/components/input/input.ts +++ b/modules/angular2_material/src/components/input/input.ts @@ -10,8 +10,8 @@ import {ObservableWrapper, EventEmitter} from 'angular2/src/facade/async'; @Directive({ selector: 'md-input-container', lifecycle: [onAllChangesDone], - hostProperties: - {'inputHasValue': 'class.md-input-has-value', 'inputHasFocus': 'class.md-input-focused'} + host: + {'[class.md-input-has-value]': 'inputHasValue', '[class.md-input-focused]': 'inputHasFocus'} }) export class MdInputContainer { // The MdInput or MdTextarea inside of this container. @@ -57,9 +57,12 @@ export class MdInputContainer { @Directive({ selector: 'md-input-container input', events: ['mdChange', 'mdFocusChange'], - hostProperties: {'yes': 'class.md-input'}, - hostListeners: - {'input': 'updateValue($event)', 'focus': 'setHasFocus(true)', 'blur': 'setHasFocus(false)'} + host: { + '[class.md-input]': 'yes', + '(input)': 'updateValue($event)', + '(focus)': 'setHasFocus(true)', + '(blur)': 'setHasFocus(false)' + } }) export class MdInput { value: string; diff --git a/modules/angular2_material/src/components/progress-linear/progress_linear.ts b/modules/angular2_material/src/components/progress-linear/progress_linear.ts index 0bd780db99..bafc51599d 100644 --- a/modules/angular2_material/src/components/progress-linear/progress_linear.ts +++ b/modules/angular2_material/src/components/progress-linear/progress_linear.ts @@ -7,11 +7,11 @@ import {Math} from 'angular2/src/facade/math'; selector: 'md-progress-linear', lifecycle: [onChange], properties: ['value', 'bufferValue'], - hostProperties: { - 'role': 'attr.role', - 'ariaValuemin': 'attr.aria-valuemin', - 'ariaValuemax': 'attr.aria-valuemax', - 'value': 'attr.aria-valuenow' + host: { + '[attr.role]': 'role', + '[attr.aria-valuemin]': 'ariaValuemin', + '[attr.aria-valuemax]': 'ariaValuemax', + '[attr.aria-valuenow]': 'value' } }) @View({ diff --git a/modules/angular2_material/src/components/radio/radio_button.ts b/modules/angular2_material/src/components/radio/radio_button.ts index 30dfd56144..93b249bd62 100644 --- a/modules/angular2_material/src/components/radio/radio_button.ts +++ b/modules/angular2_material/src/components/radio/radio_button.ts @@ -27,15 +27,13 @@ var _uniqueIdCounter: number = 0; lifecycle: [onChange], events: ['change'], properties: ['disabled', 'value'], - hostListeners: { + host: { // TODO(jelbourn): Remove ^ when event retargeting is fixed. - '^keydown': 'onKeydown($event)' - }, - hostProperties: { - 'tabindex': 'tabindex', - 'role': 'attr.role', - 'disabled': 'attr.aria-disabled', - 'activedescendant': 'attr.aria-activedescendant' + '(^keydown)': 'onKeydown($event)', + '[tabindex]': 'tabindex', + '[attr.role]': 'role', + '[attr.aria-disabled]': 'disabled', + '[attr.aria-activedescendant]': 'activedescendant' } }) @View({templateUrl: 'angular2_material/src/components/radio/radio_group.html'}) @@ -187,13 +185,13 @@ export class MdRadioGroup { selector: 'md-radio-button', lifecycle: [onChange], properties: ['id', 'name', 'value', 'checked', 'disabled'], - hostListeners: {'keydown': 'onKeydown($event)'}, - hostProperties: { - 'id': 'id', - 'tabindex': 'tabindex', - 'role': 'attr.role', - 'checked': 'attr.aria-checked', - 'disabled': 'attr.aria-disabled' + host: { + '(keydown)': 'onKeydown($event)', + '[id]': 'id', + '[tabindex]': 'tabindex', + '[attr.role]': 'role', + '[attr.aria-checked]': 'checked', + '[attr.aria-disabled]': 'disabled' } }) @View({templateUrl: 'angular2_material/src/components/radio/radio_button.html', directives: []}) diff --git a/modules/angular2_material/src/components/switcher/switch.ts b/modules/angular2_material/src/components/switcher/switch.ts index 501e3a6d52..2ac91a2ce2 100644 --- a/modules/angular2_material/src/components/switcher/switch.ts +++ b/modules/angular2_material/src/components/switcher/switch.ts @@ -9,9 +9,12 @@ import {NumberWrapper} from 'angular2/src/facade/lang'; @Component({ selector: 'md-switch', properties: ['checked', 'disabled'], - hostListeners: {'keydown': 'onKeydown($event)'}, - hostProperties: - {'checked': 'attr.aria-checked', 'disabled_': 'attr.aria-disabled', 'role': 'attr.role'} + host: { + '(keydown)': 'onKeydown($event)', + '[attr.aria-checked]': 'checked', + '[attr.aria-disabled]': 'disabled_', + '[attr.role]': 'role' + } }) @View({templateUrl: 'angular2_material/src/components/switcher/switch.html', directives: []}) export class MdSwitch {