@angular/core 2.0.0-rc.1 → 2.0.0-rc.2

package/esm/src/metadata/directives.d.ts

@@ -1,7 +1,8 @@
-import { Type } from '../../src/facade/lang';
+import { AnimationEntryMetadata } from '../animation/metadata';
+import { ChangeDetectionStrategy } from '../change_detection/constants';
 import { InjectableMetadata } from '../di/metadata';
+import { Type } from '../facade/lang';
 import { ViewEncapsulation } from './view';
-import { ChangeDetectionStrategy } from '../change_detection/constants';
 /**
  * Directives allow you to attach behavior to elements in the DOM.
  *
@@ -380,6 +381,7 @@ import { ChangeDetectionStrategy } from '../change_detection/constants';
  * the instantiated
  * view occurs on the second `<li></li>` which is a sibling to the `<template>` element.
  * @ts2dart_const
+ * @stable
  */
 export declare class DirectiveMetadata extends InjectableMetadata {
     /**
@@ -463,6 +465,11 @@ export declare class DirectiveMetadata extends InjectableMetadata {
      *
      */
     readonly inputs: string[];
+    /**
+     * Use `inputs` instead
+     *
+     * @deprecated
+     */
     readonly properties: string[];
     private _inputs;
     private _properties;
@@ -512,6 +519,11 @@ export declare class DirectiveMetadata extends InjectableMetadata {
      *
      */
     readonly outputs: string[];
+    /**
+     * Use `outputs` instead
+     *
+     * @deprecated
+     */
     readonly events: string[];
     private _outputs;
     private _events;
@@ -641,7 +653,7 @@ export declare class DirectiveMetadata extends InjectableMetadata {
      *
      * @Directive({
      *   selector: 'greet',
-     *   bindings: [
+     *   providers: [
      *     Greeter
      *   ]
      * })
@@ -655,10 +667,7 @@ export declare class DirectiveMetadata extends InjectableMetadata {
      * ```
      */
     readonly providers: any[];
-    /** @deprecated */
-    readonly bindings: any[];
     private _providers;
-    private _bindings;
     /**
      * Defines the name that can be used in the template to assign this directive to a variable.
      *
@@ -718,17 +727,16 @@ export declare class DirectiveMetadata extends InjectableMetadata {
     queries: {
         [key: string]: any;
     };
-    constructor({selector, inputs, outputs, properties, events, host, bindings, providers, exportAs, queries}?: {
+    constructor({selector, inputs, outputs, properties, events, host, providers, exportAs, queries}?: {
         selector?: string;
         inputs?: string[];
         outputs?: string[];
-        properties?: string[];
-        events?: string[];
+        /** @deprecated */ properties?: string[];
+        /** @deprecated */ events?: string[];
         host?: {
             [key: string]: string;
         };
         providers?: any[];
-        /** @deprecated */ bindings?: any[];
         exportAs?: string;
         queries?: {
             [key: string]: any;
@@ -761,6 +769,7 @@ export declare class DirectiveMetadata extends InjectableMetadata {
  *
  * {@example core/ts/metadata/metadata.ts region='component'}
  * @ts2dart_const
+ * @stable
  */
 export declare class ComponentMetadata extends DirectiveMetadata {
     /**
@@ -812,14 +821,15 @@ export declare class ComponentMetadata extends DirectiveMetadata {
      * ```
      */
     readonly viewProviders: any[];
-    readonly viewBindings: any[];
     private _viewProviders;
-    private _viewBindings;
     /**
      * The module id of the module that contains the component.
      * Needed to be able to resolve relative urls for templates and styles.
+     * In CommonJS, this can always be set to `module.id`, similarly SystemJS exposes `__moduleName`
+     * variable within each module.
+     *
      * In Dart, this can be determined automatically and does not need to be set.
-     * In CommonJS, this can always be set to `module.id`.
+  
      *
      * ## Simple Example
      *
@@ -838,23 +848,93 @@ export declare class ComponentMetadata extends DirectiveMetadata {
     template: string;
     styleUrls: string[];
     styles: string[];
+    /**
+     * Animations are defined on components via an animation-like DSL. This DSL approach to describing
+     * animations allows for a flexibility that both benefits developers and the framework.
+     *
+     * Animations work by listening on state changes that occur on an element within
+     * the template. When a state change occurs, Angular can then take advantage and animate the
+     * arc in between. This works similar to how CSS transitions work, however, by having a
+     * programmatic DSL, animations are not limited to environments that are DOM-specific.
+     * (Angular can also perform optimizations behind the scenes to make animations more performant.)
+     *
+     * For animations to be available for use, animation state changes are placed within
+     * {@link trigger animation triggers} which are housed inside of the `animations` annotation
+     * metadata. Within a trigger both {@link state state} and {@link transition transition} entries
+     * can be placed.
+     *
+     * ```typescript
+     * @Component({
+     *   selector: 'animation-cmp',
+     *   templateUrl: 'animation-cmp.html',
+     *   animations: [
+     *     // this here is our animation trigger that
+     *     // will contain our state change animations.
+     *     trigger('myTriggerName', [
+     *       // the styles defined for the `on` and `off`
+     *       // states declared below are persisted on the
+     *       // element once the animation completes.
+     *       state('on', style({ opacity: 1 }),
+     *       state('off', style({ opacity: 0 }),
+     *
+     *       // this here is our animation that kicks off when
+     *       // this state change jump is true
+     *       transition('on => off', [
+     *         animate("1s")
+     *       ])
+     *     ])
+     *   ]
+     * })
+     * ```
+     *
+     * As depicted in the code above, a group of related animation states are all contained within
+     * an animation `trigger` (the code example above called the trigger `myTriggerName`).
+     * When a trigger is created then it can be bound onto an element within the component's
+     * template via a property prefixed by an `@` symbol followed by trigger name and an expression
+     * that
+     * is used to determine the state value for that trigger.
+     *
+     * ```html
+     * <!-- animation-cmp.html -->
+     * <div @myTriggerName="expression">...</div>
+     * ```
+     *
+     * For state changes to be executed, the `expression` value must change value from its existing
+     * value
+     * to something that we have set an animation to animate on (in the example above we are listening
+     * to a change of state between `on` and `off`). The `expression` value attached to the trigger
+     * must be something that can be evaluated with the template/component context.
+     *
+     * ### DSL Animation Functions
+     *
+     * Please visit each of the animation DSL functions listed below to gain a better understanding
+     * of how and why they are used for crafting animations in Angular2:
+     *
+     * - {@link trigger trigger()}
+     * - {@link state state()}
+     * - {@link transition transition()}
+     * - {@link group group()}
+     * - {@link sequence sequence()}
+     * - {@link style style()}
+     * - {@link animate animate()}
+     * - {@link keyframes keyframes()}
+     */
+    animations: AnimationEntryMetadata[];
     directives: Array<Type | any[]>;
     pipes: Array<Type | any[]>;
     encapsulation: ViewEncapsulation;
-    constructor({selector, inputs, outputs, properties, events, host, exportAs, moduleId, bindings, providers, viewBindings, viewProviders, changeDetection, queries, templateUrl, template, styleUrls, styles, directives, pipes, encapsulation}?: {
+    constructor({selector, inputs, outputs, properties, events, host, exportAs, moduleId, providers, viewProviders, changeDetection, queries, templateUrl, template, styleUrls, styles, animations, directives, pipes, encapsulation}?: {
         selector?: string;
         inputs?: string[];
         outputs?: string[];
-        properties?: string[];
-        events?: string[];
+        /** @deprecated */ properties?: string[];
+        /** @deprecated */ events?: string[];
         host?: {
             [key: string]: string;
         };
-        /** @deprecated */ bindings?: any[];
         providers?: any[];
         exportAs?: string;
         moduleId?: string;
-        /** @deprecated */ viewBindings?: any[];
         viewProviders?: any[];
         queries?: {
             [key: string]: any;
@@ -864,6 +944,7 @@ export declare class ComponentMetadata extends DirectiveMetadata {
         template?: string;
         styleUrls?: string[];
         styles?: string[];
+        animations?: AnimationEntryMetadata[];
         directives?: Array<Type | any[]>;
         pipes?: Array<Type | any[]>;
         encapsulation?: ViewEncapsulation;
@@ -880,11 +961,10 @@ export declare class ComponentMetadata extends DirectiveMetadata {
  *
  * {@example core/ts/metadata/metadata.ts region='pipe'}
  * @ts2dart_const
+ * @stable
  */
 export declare class PipeMetadata extends InjectableMetadata {
     name: string;
-    /** @internal */
-    _pure: boolean;
     constructor({name, pure}: {
         name: string;
         pure?: boolean;
@@ -932,6 +1012,7 @@ export declare class PipeMetadata extends InjectableMetadata {
  * bootstrap(App);
  * ```
  * @ts2dart_const
+ * @stable
  */
 export declare class InputMetadata {
     /**
@@ -985,6 +1066,7 @@ export declare class InputMetadata {
  * bootstrap(App);
  * ```
  * @ts2dart_const
+ * @stable
  */
 export declare class OutputMetadata {
     bindingPropertyName: string;
@@ -1025,6 +1107,7 @@ export declare class OutputMetadata {
  * bootstrap(App);
  * ```
  * @ts2dart_const
+ * @stable
  */
 export declare class HostBindingMetadata {
     hostPropertyName: string;
@@ -1064,6 +1147,7 @@ export declare class HostBindingMetadata {
  * bootstrap(App);
  * ```
  * @ts2dart_const
+ * @stable
  */
 export declare class HostListenerMetadata {
     eventName: string;

package/esm/src/metadata/directives.js

@@ -1,6 +1,6 @@
-import { isPresent } from '../../src/facade/lang';
-import { InjectableMetadata } from '../di/metadata';
 import { ChangeDetectionStrategy } from '../change_detection/constants';
+import { InjectableMetadata } from '../di/metadata';
+import { isPresent } from '../facade/lang';
 /**
  * Directives allow you to attach behavior to elements in the DOM.
  *
@@ -379,9 +379,10 @@ import { ChangeDetectionStrategy } from '../change_detection/constants';
  * the instantiated
  * view occurs on the second `<li></li>` which is a sibling to the `<template>` element.
  * @ts2dart_const
+ * @stable
  */
 export class DirectiveMetadata extends InjectableMetadata {
-    constructor({ selector, inputs, outputs, properties, events, host, bindings, providers, exportAs, queries } = {}) {
+    constructor({ selector, inputs, outputs, properties, events, host, providers, exportAs, queries } = {}) {
         super();
         this.selector = selector;
         this._inputs = inputs;
@@ -392,7 +393,6 @@ export class DirectiveMetadata extends InjectableMetadata {
         this.exportAs = exportAs;
         this.queries = queries;
         this._providers = providers;
-        this._bindings = bindings;
     }
     /**
      * Enumerates the set of data-bound input properties for a directive
@@ -445,6 +445,11 @@ export class DirectiveMetadata extends InjectableMetadata {
         return isPresent(this._properties) && this._properties.length > 0 ? this._properties :
             this._inputs;
     }
+    /**
+     * Use `inputs` instead
+     *
+     * @deprecated
+     */
     get properties() { return this.inputs; }
     /**
      * Enumerates the set of event-bound output properties.
@@ -494,6 +499,11 @@ export class DirectiveMetadata extends InjectableMetadata {
     get outputs() {
         return isPresent(this._events) && this._events.length > 0 ? this._events : this._outputs;
     }
+    /**
+     * Use `outputs` instead
+     *
+     * @deprecated
+     */
     get events() { return this.outputs; }
     /**
      * Defines the set of injectable objects that are visible to a Directive and its light DOM
@@ -512,7 +522,7 @@ export class DirectiveMetadata extends InjectableMetadata {
      *
      * @Directive({
      *   selector: 'greet',
-     *   bindings: [
+     *   providers: [
      *     Greeter
      *   ]
      * })
@@ -525,12 +535,7 @@ export class DirectiveMetadata extends InjectableMetadata {
      * }
      * ```
      */
-    get providers() {
-        return isPresent(this._bindings) && this._bindings.length > 0 ? this._bindings :
-            this._providers;
-    }
-    /** @deprecated */
-    get bindings() { return this.providers; }
+    get providers() { return this._providers; }
 }
 /**
  * Declare reusable UI building blocks for an application.
@@ -558,9 +563,10 @@ export class DirectiveMetadata extends InjectableMetadata {
  *
  * {@example core/ts/metadata/metadata.ts region='component'}
  * @ts2dart_const
+ * @stable
  */
 export class ComponentMetadata extends DirectiveMetadata {
-    constructor({ selector, inputs, outputs, properties, events, host, exportAs, moduleId, bindings, providers, viewBindings, viewProviders, changeDetection = ChangeDetectionStrategy.Default, queries, templateUrl, template, styleUrls, styles, directives, pipes, encapsulation } = {}) {
+    constructor({ selector, inputs, outputs, properties, events, host, exportAs, moduleId, providers, viewProviders, changeDetection = ChangeDetectionStrategy.Default, queries, templateUrl, template, styleUrls, styles, animations, directives, pipes, encapsulation } = {}) {
         super({
             selector: selector,
             inputs: inputs,
@@ -569,13 +575,11 @@ export class ComponentMetadata extends DirectiveMetadata {
             events: events,
             host: host,
             exportAs: exportAs,
-            bindings: bindings,
             providers: providers,
             queries: queries
         });
         this.changeDetection = changeDetection;
         this._viewProviders = viewProviders;
-        this._viewBindings = viewBindings;
         this.templateUrl = templateUrl;
         this.template = template;
         this.styleUrls = styleUrls;
@@ -584,6 +588,7 @@ export class ComponentMetadata extends DirectiveMetadata {
         this.pipes = pipes;
         this.encapsulation = encapsulation;
         this.moduleId = moduleId;
+        this.animations = animations;
     }
     /**
      * Defines the set of injectable objects that are visible to its view DOM children.
@@ -623,11 +628,7 @@ export class ComponentMetadata extends DirectiveMetadata {
      *
      * ```
      */
-    get viewProviders() {
-        return isPresent(this._viewBindings) && this._viewBindings.length > 0 ? this._viewBindings :
-            this._viewProviders;
-    }
-    get viewBindings() { return this.viewProviders; }
+    get viewProviders() { return this._viewProviders; }
 }
 /**
  * Declare reusable pipe function.
@@ -640,6 +641,7 @@ export class ComponentMetadata extends DirectiveMetadata {
  *
  * {@example core/ts/metadata/metadata.ts region='pipe'}
  * @ts2dart_const
+ * @stable
  */
 export class PipeMetadata extends InjectableMetadata {
     constructor({ name, pure }) {
@@ -690,6 +692,7 @@ export class PipeMetadata extends InjectableMetadata {
  * bootstrap(App);
  * ```
  * @ts2dart_const
+ * @stable
  */
 export class InputMetadata {
     constructor(
@@ -741,6 +744,7 @@ export class InputMetadata {
  * bootstrap(App);
  * ```
  * @ts2dart_const
+ * @stable
  */
 export class OutputMetadata {
     constructor(bindingPropertyName) {
@@ -782,6 +786,7 @@ export class OutputMetadata {
  * bootstrap(App);
  * ```
  * @ts2dart_const
+ * @stable
  */
 export class HostBindingMetadata {
     constructor(hostPropertyName) {
@@ -822,6 +827,7 @@ export class HostBindingMetadata {
  * bootstrap(App);
  * ```
  * @ts2dart_const
+ * @stable
  */
 export class HostListenerMetadata {
     constructor(eventName, args) {

package/esm/src/metadata/directives.js.map

@@ -1 +1 @@
-{"version":3,"file":"directives.js","sourceRoot":"","sources":["../../../../../../modules/@angular/core/src/metadata/directives.ts"],"names":[],"mappings":"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","sourcesContent":["interface DecoratorInvocation {\n    type: Function;\n    args?: any[];\n  }\n  import {isPresent, Type} from '../../src/facade/lang';\nimport {InjectableMetadata} from '../di/metadata';\nimport {ViewEncapsulation} from './view';\nimport {ChangeDetectionStrategy} from '../change_detection/constants';\n\n/**\n * Directives allow you to attach behavior to elements in the DOM.\n *\n * {@link DirectiveMetadata}s with an embedded view are called {@link ComponentMetadata}s.\n *\n * A directive consists of a single directive annotation and a controller class. When the\n * directive's `selector` matches\n * elements in the DOM, the following steps occur:\n *\n * 1. For each directive, the `ElementInjector` attempts to resolve the directive's constructor\n * arguments.\n * 2. Angular instantiates directives for each matched element using `ElementInjector` in a\n * depth-first order,\n *    as declared in the HTML.\n *\n * ## Understanding How Injection Works\n *\n * There are three stages of injection resolution.\n * - *Pre-existing Injectors*:\n *   - The terminal {@link Injector} cannot resolve dependencies. It either throws an error or, if\n * the dependency was\n *     specified as `@Optional`, returns `null`.\n *   - The platform injector resolves browser singleton resources, such as: cookies, title,\n * location, and others.\n * - *Component Injectors*: Each component instance has its own {@link Injector}, and they follow\n * the same parent-child hierarchy\n *     as the component instances in the DOM.\n * - *Element Injectors*: Each component instance has a Shadow DOM. Within the Shadow DOM each\n * element has an `ElementInjector`\n *     which follow the same parent-child hierarchy as the DOM elements themselves.\n *\n * When a template is instantiated, it also must instantiate the corresponding directives in a\n * depth-first order. The\n * current `ElementInjector` resolves the constructor dependencies for each directive.\n *\n * Angular then resolves dependencies as follows, according to the order in which they appear in the\n * {@link ViewMetadata}:\n *\n * 1. Dependencies on the current element\n * 2. Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary\n * 3. Dependencies on component injectors and their parents until it encounters the root component\n * 4. Dependencies on pre-existing injectors\n *\n *\n * The `ElementInjector` can inject other directives, element-specific special objects, or it can\n * delegate to the parent\n * injector.\n *\n * To inject other directives, declare the constructor parameter as:\n * - `directive:DirectiveType`: a directive on the current element only\n * - `@Host() directive:DirectiveType`: any directive that matches the type between the current\n * element and the\n *    Shadow DOM root.\n * - `@Query(DirectiveType) query:QueryList<DirectiveType>`: A live collection of direct child\n * directives.\n * - `@QueryDescendants(DirectiveType) query:QueryList<DirectiveType>`: A live collection of any\n * child directives.\n *\n * To inject element-specific special objects, declare the constructor parameter as:\n * - `element: ElementRef` to obtain a reference to logical element in the view.\n * - `viewContainer: ViewContainerRef` to control child template instantiation, for\n * {@link DirectiveMetadata} directives only\n * - `bindingPropagation: BindingPropagation` to control change detection in a more granular way.\n *\n * ### Example\n *\n * The following example demonstrates how dependency injection resolves constructor arguments in\n * practice.\n *\n *\n * Assume this HTML template:\n *\n * ```\n * <div dependency=\"1\">\n *   <div dependency=\"2\">\n *     <div dependency=\"3\" my-directive>\n *       <div dependency=\"4\">\n *         <div dependency=\"5\"></div>\n *       </div>\n *       <div dependency=\"6\"></div>\n *     </div>\n *   </div>\n * </div>\n * ```\n *\n * With the following `dependency` decorator and `SomeService` injectable class.\n *\n * ```\n * @Injectable()\n * class SomeService {\n * }\n *\n * @Directive({\n *   selector: '[dependency]',\n *   inputs: [\n *     'id: dependency'\n *   ]\n * })\n * class Dependency {\n *   id:string;\n * }\n * ```\n *\n * Let's step through the different ways in which `MyDirective` could be declared...\n *\n *\n * ### No injection\n *\n * Here the constructor is declared with no arguments, therefore nothing is injected into\n * `MyDirective`.\n *\n * ```\n * @Directive({ selector: '[my-directive]' })\n * class MyDirective {\n *   constructor() {\n *   }\n * }\n * ```\n *\n * This directive would be instantiated with no dependencies.\n *\n *\n * ### Component-level injection\n *\n * Directives can inject any injectable instance from the closest component injector or any of its\n * parents.\n *\n * Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type\n * from the parent\n * component's injector.\n * ```\n * @Directive({ selector: '[my-directive]' })\n * class MyDirective {\n *   constructor(someService: SomeService) {\n *   }\n * }\n * ```\n *\n * This directive would be instantiated with a dependency on `SomeService`.\n *\n *\n * ### Injecting a directive from the current element\n *\n * Directives can inject other directives declared on the current element.\n *\n * ```\n * @Directive({ selector: '[my-directive]' })\n * class MyDirective {\n *   constructor(dependency: Dependency) {\n *     expect(dependency.id).toEqual(3);\n *   }\n * }\n * ```\n * This directive would be instantiated with `Dependency` declared at the same element, in this case\n * `dependency=\"3\"`.\n *\n * ### Injecting a directive from any ancestor elements\n *\n * Directives can inject other directives declared on any ancestor element (in the current Shadow\n * DOM), i.e. on the current element, the\n * parent element, or its parents.\n * ```\n * @Directive({ selector: '[my-directive]' })\n * class MyDirective {\n *   constructor(@Host() dependency: Dependency) {\n *     expect(dependency.id).toEqual(2);\n *   }\n * }\n * ```\n *\n * `@Host` checks the current element, the parent, as well as its parents recursively. If\n * `dependency=\"2\"` didn't\n * exist on the direct parent, this injection would\n * have returned\n * `dependency=\"1\"`.\n *\n *\n * ### Injecting a live collection of direct child directives\n *\n *\n * A directive can also query for other child directives. Since parent directives are instantiated\n * before child directives, a directive can't simply inject the list of child directives. Instead,\n * the directive injects a {@link QueryList}, which updates its contents as children are added,\n * removed, or moved by a directive that uses a {@link ViewContainerRef} such as a `ngFor`, an\n * `ngIf`, or an `ngSwitch`.\n *\n * ```\n * @Directive({ selector: '[my-directive]' })\n * class MyDirective {\n *   constructor(@Query(Dependency) dependencies:QueryList<Dependency>) {\n *   }\n * }\n * ```\n *\n * This directive would be instantiated with a {@link QueryList} which contains `Dependency` 4 and\n * `Dependency` 6. Here, `Dependency` 5 would not be included, because it is not a direct child.\n *\n * ### Injecting a live collection of descendant directives\n *\n * By passing the descendant flag to `@Query` above, we can include the children of the child\n * elements.\n *\n * ```\n * @Directive({ selector: '[my-directive]' })\n * class MyDirective {\n *   constructor(@Query(Dependency, {descendants: true}) dependencies:QueryList<Dependency>) {\n *   }\n * }\n * ```\n *\n * This directive would be instantiated with a Query which would contain `Dependency` 4, 5 and 6.\n *\n * ### Optional injection\n *\n * The normal behavior of directives is to return an error when a specified dependency cannot be\n * resolved. If you\n * would like to inject `null` on unresolved dependency instead, you can annotate that dependency\n * with `@Optional()`.\n * This explicitly permits the author of a template to treat some of the surrounding directives as\n * optional.\n *\n * ```\n * @Directive({ selector: '[my-directive]' })\n * class MyDirective {\n *   constructor(@Optional() dependency:Dependency) {\n *   }\n * }\n * ```\n *\n * This directive would be instantiated with a `Dependency` directive found on the current element.\n * If none can be\n * found, the injector supplies `null` instead of throwing an error.\n *\n * ### Example\n *\n * Here we use a decorator directive to simply define basic tool-tip behavior.\n *\n * ```\n * @Directive({\n *   selector: '[tooltip]',\n *   inputs: [\n *     'text: tooltip'\n *   ],\n *   host: {\n *     '(mouseenter)': 'onMouseEnter()',\n *     '(mouseleave)': 'onMouseLeave()'\n *   }\n * })\n * class Tooltip{\n *   text:string;\n *   overlay:Overlay; // NOT YET IMPLEMENTED\n *   overlayManager:OverlayManager; // NOT YET IMPLEMENTED\n *\n *   constructor(overlayManager:OverlayManager) {\n *     this.overlay = overlay;\n *   }\n *\n *   onMouseEnter() {\n *     // exact signature to be determined\n *     this.overlay = this.overlayManager.open(text, ...);\n *   }\n *\n *   onMouseLeave() {\n *     this.overlay.close();\n *     this.overlay = null;\n *   }\n * }\n * ```\n * In our HTML template, we can then add this behavior to a `<div>` or any other element with the\n * `tooltip` selector,\n * like so:\n *\n * ```\n * <div tooltip=\"some text here\"></div>\n * ```\n *\n * Directives can also control the instantiation, destruction, and positioning of inline template\n * elements:\n *\n * A directive uses a {@link ViewContainerRef} to instantiate, insert, move, and destroy views at\n * runtime.\n * The {@link ViewContainerRef} is created as a result of `<template>` element, and represents a\n * location in the current view\n * where these actions are performed.\n *\n * Views are always created as children of the current {@link ViewMetadata}, and as siblings of the\n * `<template>` element. Thus a\n * directive in a child view cannot inject the directive that created it.\n *\n * Since directives that create views via ViewContainers are common in Angular, and using the full\n * `<template>` element syntax is wordy, Angular\n * also supports a shorthand notation: `<li *foo=\"bar\">` and `<li template=\"foo: bar\">` are\n * equivalent.\n *\n * Thus,\n *\n * ```\n * <ul>\n *   <li *foo=\"bar\" title=\"text\"></li>\n * </ul>\n * ```\n *\n * Expands in use to:\n *\n * ```\n * <ul>\n *   <template [foo]=\"bar\">\n *     <li title=\"text\"></li>\n *   </template>\n * </ul>\n * ```\n *\n * Notice that although the shorthand places `*foo=\"bar\"` within the `<li>` element, the binding for\n * the directive\n * controller is correctly instantiated on the `<template>` element rather than the `<li>` element.\n *\n * ## Lifecycle hooks\n *\n * When the directive class implements some {@link ../../guide/lifecycle-hooks.html} the callbacks\n * are called by the change detection at defined points in time during the life of the directive.\n *\n * ### Example\n *\n * Let's suppose we want to implement the `unless` behavior, to conditionally include a template.\n *\n * Here is a simple directive that triggers on an `unless` selector:\n *\n * ```\n * @Directive({\n *   selector: '[unless]',\n *   inputs: ['unless']\n * })\n * export class Unless {\n *   viewContainer: ViewContainerRef;\n *   templateRef: TemplateRef;\n *   prevCondition: boolean;\n *\n *   constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef) {\n *     this.viewContainer = viewContainer;\n *     this.templateRef = templateRef;\n *     this.prevCondition = null;\n *   }\n *\n *   set unless(newCondition) {\n *     if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) {\n *       this.prevCondition = true;\n *       this.viewContainer.clear();\n *     } else if (!newCondition && (isBlank(this.prevCondition) || this.prevCondition)) {\n *       this.prevCondition = false;\n *       this.viewContainer.create(this.templateRef);\n *     }\n *   }\n * }\n * ```\n *\n * We can then use this `unless` selector in a template:\n * ```\n * <ul>\n *   <li *unless=\"expr\"></li>\n * </ul>\n * ```\n *\n * Once the directive instantiates the child view, the shorthand notation for the template expands\n * and the result is:\n *\n * ```\n * <ul>\n *   <template [unless]=\"exp\">\n *     <li></li>\n *   </template>\n *   <li></li>\n * </ul>\n * ```\n *\n * Note also that although the `<li></li>` template still exists inside the `<template></template>`,\n * the instantiated\n * view occurs on the second `<li></li>` which is a sibling to the `<template>` element.\n * @ts2dart_const\n */\nexport class DirectiveMetadata extends InjectableMetadata {\n  /**\n   * The CSS selector that triggers the instantiation of a directive.\n   *\n   * Angular only allows directives to trigger on CSS selectors that do not cross element\n   * boundaries.\n   *\n   * `selector` may be declared as one of the following:\n   *\n   * - `element-name`: select by element name.\n   * - `.class`: select by class name.\n   * - `[attribute]`: select by attribute name.\n   * - `[attribute=value]`: select by attribute name and value.\n   * - `:not(sub_selector)`: select only if the element does not match the `sub_selector`.\n   * - `selector1, selector2`: select if either `selector1` or `selector2` matches.\n   *\n   *\n   * ### Example\n   *\n   * Suppose we have a directive with an `input[type=text]` selector.\n   *\n   * And the following HTML:\n   *\n   * ```html\n   * <form>\n   *   <input type=\"text\">\n   *   <input type=\"radio\">\n   * <form>\n   * ```\n   *\n   * The directive would only be instantiated on the `<input type=\"text\">` element.\n   *\n   */\n  selector: string;\n\n  /**\n   * Enumerates the set of data-bound input properties for a directive\n   *\n   * Angular automatically updates input properties during change detection.\n   *\n   * The `inputs` property defines a set of `directiveProperty` to `bindingProperty`\n   * configuration:\n   *\n   * - `directiveProperty` specifies the component property where the value is written.\n   * - `bindingProperty` specifies the DOM property where the value is read from.\n   *\n   * When `bindingProperty` is not provided, it is assumed to be equal to `directiveProperty`.\n   *\n   * ### Example ([live demo](http://plnkr.co/edit/ivhfXY?p=preview))\n   *\n   * The following example creates a component with two data-bound properties.\n   *\n   * ```typescript\n   * @Component({\n   *   selector: 'bank-account',\n   *   inputs: ['bankName', 'id: account-id'],\n   *   template: `\n   *     Bank Name: {{bankName}}\n   *     Account Id: {{id}}\n   *   `\n   * })\n   * class BankAccount {\n   *   bankName: string;\n   *   id: string;\n   *\n   *   // this property is not bound, and won't be automatically updated by Angular\n   *   normalizedBankName: string;\n   * }\n   *\n   * @Component({\n   *   selector: 'app',\n   *   template: `\n   *     <bank-account bank-name=\"RBC\" account-id=\"4747\"></bank-account>\n   *   `,\n   *   directives: [BankAccount]\n   * })\n   * class App {}\n   *\n   * bootstrap(App);\n   * ```\n   *\n   */\n  get inputs(): string[] {\n    return isPresent(this._properties) && this._properties.length > 0 ? this._properties :\n                                                                        this._inputs;\n  }\n  get properties(): string[] { return this.inputs; }\n  private _inputs: string[];\n  private _properties: string[];\n\n  /**\n   * Enumerates the set of event-bound output properties.\n   *\n   * When an output property emits an event, an event handler attached to that event\n   * the template is invoked.\n   *\n   * The `outputs` property defines a set of `directiveProperty` to `bindingProperty`\n   * configuration:\n   *\n   * - `directiveProperty` specifies the component property that emits events.\n   * - `bindingProperty` specifies the DOM property the event handler is attached to.\n   *\n   * ### Example ([live demo](http://plnkr.co/edit/d5CNq7?p=preview))\n   *\n   * ```typescript\n   * @Directive({\n   *   selector: 'interval-dir',\n   *   outputs: ['everySecond', 'five5Secs: everyFiveSeconds']\n   * })\n   * class IntervalDir {\n   *   everySecond = new EventEmitter();\n   *   five5Secs = new EventEmitter();\n   *\n   *   constructor() {\n   *     setInterval(() => this.everySecond.emit(\"event\"), 1000);\n   *     setInterval(() => this.five5Secs.emit(\"event\"), 5000);\n   *   }\n   * }\n   *\n   * @Component({\n   *   selector: 'app',\n   *   template: `\n   *     <interval-dir (everySecond)=\"everySecond()\" (everyFiveSeconds)=\"everyFiveSeconds()\">\n   *     </interval-dir>\n   *   `,\n   *   directives: [IntervalDir]\n   * })\n   * class App {\n   *   everySecond() { console.log('second'); }\n   *   everyFiveSeconds() { console.log('five seconds'); }\n   * }\n   * bootstrap(App);\n   * ```\n   *\n   */\n  get outputs(): string[] {\n    return isPresent(this._events) && this._events.length > 0 ? this._events : this._outputs;\n  }\n  get events(): string[] { return this.outputs; }\n  private _outputs: string[];\n  private _events: string[];\n\n  /**\n   * Specify the events, actions, properties and attributes related to the host element.\n   *\n   * ## Host Listeners\n   *\n   * Specifies which DOM events a directive listens to via a set of `(event)` to `method`\n   * key-value pairs:\n   *\n   * - `event`: the DOM event that the directive listens to.\n   * - `statement`: the statement to execute when the event occurs.\n   * If the evaluation of the statement returns `false`, then `preventDefault`is applied on the DOM\n   * event.\n   *\n   * To listen to global events, a target must be added to the event name.\n   * The target can be `window`, `document` or `body`.\n   *\n   * When writing a directive event binding, you can also refer to the $event local variable.\n   *\n   * ### Example ([live demo](http://plnkr.co/edit/DlA5KU?p=preview))\n   *\n   * The following example declares a directive that attaches a click listener to the button and\n   * counts clicks.\n   *\n   * ```typescript\n   * @Directive({\n   *   selector: 'button[counting]',\n   *   host: {\n   *     '(click)': 'onClick($event.target)'\n   *   }\n   * })\n   * class CountClicks {\n   *   numberOfClicks = 0;\n   *\n   *   onClick(btn) {\n   *     console.log(\"button\", btn, \"number of clicks:\", this.numberOfClicks++);\n   *   }\n   * }\n   *\n   * @Component({\n   *   selector: 'app',\n   *   template: `<button counting>Increment</button>`,\n   *   directives: [CountClicks]\n   * })\n   * class App {}\n   *\n   * bootstrap(App);\n   * ```\n   *\n   * ## Host Property Bindings\n   *\n   * Specifies which DOM properties a directive updates.\n   *\n   * Angular automatically checks host property bindings during change detection.\n   * If a binding changes, it will update the host element of the directive.\n   *\n   * ### Example ([live demo](http://plnkr.co/edit/gNg0ED?p=preview))\n   *\n   * The following example creates a directive that sets the `valid` and `invalid` classes\n   * on the DOM element that has ngModel directive on it.\n   *\n   * ```typescript\n   * @Directive({\n   *   selector: '[ngModel]',\n   *   host: {\n   *     '[class.valid]': 'valid',\n   *     '[class.invalid]': 'invalid'\n   *   }\n   * })\n   * class NgModelStatus {\n   *   constructor(public control:NgModel) {}\n   *   get valid { return this.control.valid; }\n   *   get invalid { return this.control.invalid; }\n   * }\n   *\n   * @Component({\n   *   selector: 'app',\n   *   template: `<input [(ngModel)]=\"prop\">`,\n   *   directives: [FORM_DIRECTIVES, NgModelStatus]\n   * })\n   * class App {\n   *   prop;\n   * }\n   *\n   * bootstrap(App);\n   * ```\n   *\n   * ## Attributes\n   *\n   * Specifies static attributes that should be propagated to a host element.\n   *\n   * ### Example\n   *\n   * In this example using `my-button` directive (ex.: `<div my-button></div>`) on a host element\n   * (here: `<div>` ) will ensure that this element will get the \"button\" role.\n   *\n   * ```typescript\n   * @Directive({\n   *   selector: '[my-button]',\n   *   host: {\n   *     'role': 'button'\n   *   }\n   * })\n   * class MyButton {\n   * }\n   * ```\n   */\n  host: {[key: string]: string};\n\n  /**\n   * Defines the set of injectable objects that are visible to a Directive and its light DOM\n   * children.\n   *\n   * ## Simple Example\n   *\n   * Here is an example of a class that can be injected:\n   *\n   * ```\n   * class Greeter {\n   *    greet(name:string) {\n   *      return 'Hello ' + name + '!';\n   *    }\n   * }\n   *\n   * @Directive({\n   *   selector: 'greet',\n   *   bindings: [\n   *     Greeter\n   *   ]\n   * })\n   * class HelloWorld {\n   *   greeter:Greeter;\n   *\n   *   constructor(greeter:Greeter) {\n   *     this.greeter = greeter;\n   *   }\n   * }\n   * ```\n   */\n  get providers(): any[] {\n    return isPresent(this._bindings) && this._bindings.length > 0 ? this._bindings :\n                                                                    this._providers;\n  }\n  /** @deprecated */\n  get bindings(): any[] { return this.providers; }\n  private _providers: any[];\n  private _bindings: any[];\n\n  /**\n   * Defines the name that can be used in the template to assign this directive to a variable.\n   *\n   * ## Simple Example\n   *\n   * ```\n   * @Directive({\n   *   selector: 'child-dir',\n   *   exportAs: 'child'\n   * })\n   * class ChildDir {\n   * }\n   *\n   * @Component({\n   *   selector: 'main',\n   *   template: `<child-dir #c=\"child\"></child-dir>`,\n   *   directives: [ChildDir]\n   * })\n   * class MainComponent {\n   * }\n   *\n   * ```\n   */\n  exportAs: string;\n\n  // TODO: add an example after ContentChildren and ViewChildren are in master\n  /**\n   * Configures the queries that will be injected into the directive.\n   *\n   * Content queries are set before the `ngAfterContentInit` callback is called.\n   * View queries are set before the `ngAfterViewInit` callback is called.\n   *\n   * ### Example\n   *\n   * ```\n   * @Component({\n   *   selector: 'someDir',\n   *   queries: {\n   *     contentChildren: new ContentChildren(ChildDirective),\n   *     viewChildren: new ViewChildren(ChildDirective)\n   *   },\n   *   template: '<child-directive></child-directive>',\n   *   directives: [ChildDirective]\n   * })\n   * class SomeDir {\n   *   contentChildren: QueryList<ChildDirective>,\n   *   viewChildren: QueryList<ChildDirective>\n   *\n   *   ngAfterContentInit() {\n   *     // contentChildren is set\n   *   }\n   *\n   *   ngAfterViewInit() {\n   *     // viewChildren is set\n   *   }\n   * }\n   * ```\n   */\n  queries: {[key: string]: any};\n\n  constructor({selector, inputs, outputs, properties, events, host, bindings, providers, exportAs,\n               queries}: {\n    selector?: string,\n    inputs?: string[],\n    outputs?: string[],\n    properties?: string[],\n    events?: string[],\n    host?: {[key: string]: string},\n    providers?: any[],\n    /** @deprecated */ bindings?: any[],\n    exportAs?: string,\n    queries?: {[key: string]: any}\n  } = {}) {\n    super();\n    this.selector = selector;\n    this._inputs = inputs;\n    this._properties = properties;\n    this._outputs = outputs;\n    this._events = events;\n    this.host = host;\n    this.exportAs = exportAs;\n    this.queries = queries;\n    this._providers = providers;\n    this._bindings = bindings;\n  }\n}\n\n/**\n * Declare reusable UI building blocks for an application.\n *\n * Each Angular component requires a single `@Component` annotation. The\n * `@Component`\n * annotation specifies when a component is instantiated, and which properties and hostListeners it\n * binds to.\n *\n * When a component is instantiated, Angular\n * - creates a shadow DOM for the component.\n * - loads the selected template into the shadow DOM.\n * - creates all the injectable objects configured with `providers` and `viewProviders`.\n *\n * All template expressions and statements are then evaluated against the component instance.\n *\n * For details on the `@View` annotation, see {@link ViewMetadata}.\n *\n * ## Lifecycle hooks\n *\n * When the component class implements some {@link ../../guide/lifecycle-hooks.html} the callbacks\n * are called by the change detection at defined points in time during the life of the component.\n *\n * ### Example\n *\n * {@example core/ts/metadata/metadata.ts region='component'}\n * @ts2dart_const\n */\nexport class ComponentMetadata extends DirectiveMetadata {\n  /**\n   * Defines the used change detection strategy.\n   *\n   * When a component is instantiated, Angular creates a change detector, which is responsible for\n   * propagating the component's bindings.\n   *\n   * The `changeDetection` property defines, whether the change detection will be checked every time\n   * or only when the component tells it to do so.\n   */\n  changeDetection: ChangeDetectionStrategy;\n\n  /**\n   * Defines the set of injectable objects that are visible to its view DOM children.\n   *\n   * ## Simple Example\n   *\n   * Here is an example of a class that can be injected:\n   *\n   * ```\n   * class Greeter {\n   *    greet(name:string) {\n   *      return 'Hello ' + name + '!';\n   *    }\n   * }\n   *\n   * @Directive({\n   *   selector: 'needs-greeter'\n   * })\n   * class NeedsGreeter {\n   *   greeter:Greeter;\n   *\n   *   constructor(greeter:Greeter) {\n   *     this.greeter = greeter;\n   *   }\n   * }\n   *\n   * @Component({\n   *   selector: 'greet',\n   *   viewProviders: [\n   *     Greeter\n   *   ],\n   *   template: `<needs-greeter></needs-greeter>`,\n   *   directives: [NeedsGreeter]\n   * })\n   * class HelloWorld {\n   * }\n   *\n   * ```\n   */\n  get viewProviders(): any[] {\n    return isPresent(this._viewBindings) && this._viewBindings.length > 0 ? this._viewBindings :\n                                                                            this._viewProviders;\n  }\n  get viewBindings(): any[] { return this.viewProviders; }\n  private _viewProviders: any[];\n  private _viewBindings: any[];\n\n  /**\n   * The module id of the module that contains the component.\n   * Needed to be able to resolve relative urls for templates and styles.\n   * In Dart, this can be determined automatically and does not need to be set.\n   * In CommonJS, this can always be set to `module.id`.\n   *\n   * ## Simple Example\n   *\n   * ```\n   * @Directive({\n   *   selector: 'someDir',\n   *   moduleId: module.id\n   * })\n   * class SomeDir {\n   * }\n   *\n   * ```\n   */\n  moduleId: string;\n\n  templateUrl: string;\n\n  template: string;\n\n  styleUrls: string[];\n\n  styles: string[];\n\n  directives: Array<Type | any[]>;\n\n  pipes: Array<Type | any[]>;\n\n  encapsulation: ViewEncapsulation;\n\n  constructor({selector, inputs, outputs, properties, events, host, exportAs, moduleId, bindings,\n               providers, viewBindings, viewProviders,\n               changeDetection = ChangeDetectionStrategy.Default, queries, templateUrl, template,\n               styleUrls, styles, directives, pipes, encapsulation}: {\n    selector?: string,\n    inputs?: string[],\n    outputs?: string[],\n    properties?: string[],\n    events?: string[],\n    host?: {[key: string]: string},\n    /** @deprecated */ bindings?: any[],\n    providers?: any[],\n    exportAs?: string,\n    moduleId?: string,\n    /** @deprecated */ viewBindings?: any[],\n    viewProviders?: any[],\n    queries?: {[key: string]: any},\n    changeDetection?: ChangeDetectionStrategy,\n    templateUrl?: string,\n    template?: string,\n    styleUrls?: string[],\n    styles?: string[],\n    directives?: Array<Type | any[]>,\n    pipes?: Array<Type | any[]>,\n    encapsulation?: ViewEncapsulation\n  } = {}) {\n    super({\n      selector: selector,\n      inputs: inputs,\n      outputs: outputs,\n      properties: properties,\n      events: events,\n      host: host,\n      exportAs: exportAs,\n      bindings: bindings,\n      providers: providers,\n      queries: queries\n    });\n\n    this.changeDetection = changeDetection;\n    this._viewProviders = viewProviders;\n    this._viewBindings = viewBindings;\n    this.templateUrl = templateUrl;\n    this.template = template;\n    this.styleUrls = styleUrls;\n    this.styles = styles;\n    this.directives = directives;\n    this.pipes = pipes;\n    this.encapsulation = encapsulation;\n    this.moduleId = moduleId;\n  }\n}\n\n/**\n * Declare reusable pipe function.\n *\n * A \"pure\" pipe is only re-evaluated when either the input or any of the arguments change.\n *\n * When not specified, pipes default to being pure.\n *\n * ### Example\n *\n * {@example core/ts/metadata/metadata.ts region='pipe'}\n * @ts2dart_const\n */\nexport class PipeMetadata extends InjectableMetadata {\n  name: string;\n  /** @internal */\n  _pure: boolean;\n\n  constructor({name, pure}: {name: string, pure?: boolean}) {\n    super();\n    this.name = name;\n    this._pure = pure;\n  }\n\n  get pure(): boolean { return isPresent(this._pure) ? this._pure : true; }\n}\n\n/**\n * Declares a data-bound input property.\n *\n * Angular automatically updates data-bound properties during change detection.\n *\n * `InputMetadata` takes an optional parameter that specifies the name\n * used when instantiating a component in the template. When not provided,\n * the name of the decorated property is used.\n *\n * ### Example\n *\n * The following example creates a component with two input properties.\n *\n * ```typescript\n * @Component({\n *   selector: 'bank-account',\n *   template: `\n *     Bank Name: {{bankName}}\n *     Account Id: {{id}}\n *   `\n * })\n * class BankAccount {\n *   @Input() bankName: string;\n *   @Input('account-id') id: string;\n *\n *   // this property is not bound, and won't be automatically updated by Angular\n *   normalizedBankName: string;\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `\n *     <bank-account bank-name=\"RBC\" account-id=\"4747\"></bank-account>\n *   `,\n *   directives: [BankAccount]\n * })\n * class App {}\n *\n * bootstrap(App);\n * ```\n * @ts2dart_const\n */\nexport class InputMetadata {\n  constructor(\n      /**\n       * Name used when instantiating a component in the template.\n       */\n      public bindingPropertyName?: string) {}\n}\n\n/**\n * Declares an event-bound output property.\n *\n * When an output property emits an event, an event handler attached to that event\n * the template is invoked.\n *\n * `OutputMetadata` takes an optional parameter that specifies the name\n * used when instantiating a component in the template. When not provided,\n * the name of the decorated property is used.\n *\n * ### Example\n *\n * ```typescript\n * @Directive({\n *   selector: 'interval-dir',\n * })\n * class IntervalDir {\n *   @Output() everySecond = new EventEmitter();\n *   @Output('everyFiveSeconds') five5Secs = new EventEmitter();\n *\n *   constructor() {\n *     setInterval(() => this.everySecond.emit(\"event\"), 1000);\n *     setInterval(() => this.five5Secs.emit(\"event\"), 5000);\n *   }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `\n *     <interval-dir (everySecond)=\"everySecond()\" (everyFiveSeconds)=\"everyFiveSeconds()\">\n *     </interval-dir>\n *   `,\n *   directives: [IntervalDir]\n * })\n * class App {\n *   everySecond() { console.log('second'); }\n *   everyFiveSeconds() { console.log('five seconds'); }\n * }\n * bootstrap(App);\n * ```\n * @ts2dart_const\n */\nexport class OutputMetadata {\n  constructor(public bindingPropertyName?: string) {}\n}\n\n/**\n * Declares a host property binding.\n *\n * Angular automatically checks host property bindings during change detection.\n * If a binding changes, it will update the host element of the directive.\n *\n * `HostBindingMetadata` takes an optional parameter that specifies the property\n * name of the host element that will be updated. When not provided,\n * the class property name is used.\n *\n * ### Example\n *\n * The following example creates a directive that sets the `valid` and `invalid` classes\n * on the DOM element that has ngModel directive on it.\n *\n * ```typescript\n * @Directive({selector: '[ngModel]'})\n * class NgModelStatus {\n *   constructor(public control:NgModel) {}\n *   @HostBinding('class.valid') get valid { return this.control.valid; }\n *   @HostBinding('class.invalid') get invalid { return this.control.invalid; }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `<input [(ngModel)]=\"prop\">`,\n *   directives: [FORM_DIRECTIVES, NgModelStatus]\n * })\n * class App {\n *   prop;\n * }\n *\n * bootstrap(App);\n * ```\n * @ts2dart_const\n */\nexport class HostBindingMetadata {\n  constructor(public hostPropertyName?: string) {}\n}\n\n/**\n * Declares a host listener.\n *\n * Angular will invoke the decorated method when the host element emits the specified event.\n *\n * If the decorated method returns `false`, then `preventDefault` is applied on the DOM\n * event.\n *\n * ### Example\n *\n * The following example declares a directive that attaches a click listener to the button and\n * counts clicks.\n *\n * ```typescript\n * @Directive({selector: 'button[counting]'})\n * class CountClicks {\n *   numberOfClicks = 0;\n *\n *   @HostListener('click', ['$event.target'])\n *   onClick(btn) {\n *     console.log(\"button\", btn, \"number of clicks:\", this.numberOfClicks++);\n *   }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `<button counting>Increment</button>`,\n *   directives: [CountClicks]\n * })\n * class App {}\n *\n * bootstrap(App);\n * ```\n * @ts2dart_const\n */\nexport class HostListenerMetadata {\n  constructor(public eventName: string, public args?: string[]) {}\n}\n"]}
+{"version":3,"file":"directives.js","sourceRoot":"","sources":["../../../../../../modules/@angular/core/src/metadata/directives.ts"],"names":[],"mappings":"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","sourcesContent":["import {AnimationEntryMetadata} from '../animation/metadata';\nimport {ChangeDetectionStrategy} from '../change_detection/constants';\nimport {InjectableMetadata} from '../di/metadata';\nimport {Type, isPresent} from '../facade/lang';\n\nimport {ViewEncapsulation} from './view';\n\n\n/**\n * Directives allow you to attach behavior to elements in the DOM.\n *\n * {@link DirectiveMetadata}s with an embedded view are called {@link ComponentMetadata}s.\n *\n * A directive consists of a single directive annotation and a controller class. When the\n * directive's `selector` matches\n * elements in the DOM, the following steps occur:\n *\n * 1. For each directive, the `ElementInjector` attempts to resolve the directive's constructor\n * arguments.\n * 2. Angular instantiates directives for each matched element using `ElementInjector` in a\n * depth-first order,\n *    as declared in the HTML.\n *\n * ## Understanding How Injection Works\n *\n * There are three stages of injection resolution.\n * - *Pre-existing Injectors*:\n *   - The terminal {@link Injector} cannot resolve dependencies. It either throws an error or, if\n * the dependency was\n *     specified as `@Optional`, returns `null`.\n *   - The platform injector resolves browser singleton resources, such as: cookies, title,\n * location, and others.\n * - *Component Injectors*: Each component instance has its own {@link Injector}, and they follow\n * the same parent-child hierarchy\n *     as the component instances in the DOM.\n * - *Element Injectors*: Each component instance has a Shadow DOM. Within the Shadow DOM each\n * element has an `ElementInjector`\n *     which follow the same parent-child hierarchy as the DOM elements themselves.\n *\n * When a template is instantiated, it also must instantiate the corresponding directives in a\n * depth-first order. The\n * current `ElementInjector` resolves the constructor dependencies for each directive.\n *\n * Angular then resolves dependencies as follows, according to the order in which they appear in the\n * {@link ViewMetadata}:\n *\n * 1. Dependencies on the current element\n * 2. Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary\n * 3. Dependencies on component injectors and their parents until it encounters the root component\n * 4. Dependencies on pre-existing injectors\n *\n *\n * The `ElementInjector` can inject other directives, element-specific special objects, or it can\n * delegate to the parent\n * injector.\n *\n * To inject other directives, declare the constructor parameter as:\n * - `directive:DirectiveType`: a directive on the current element only\n * - `@Host() directive:DirectiveType`: any directive that matches the type between the current\n * element and the\n *    Shadow DOM root.\n * - `@Query(DirectiveType) query:QueryList<DirectiveType>`: A live collection of direct child\n * directives.\n * - `@QueryDescendants(DirectiveType) query:QueryList<DirectiveType>`: A live collection of any\n * child directives.\n *\n * To inject element-specific special objects, declare the constructor parameter as:\n * - `element: ElementRef` to obtain a reference to logical element in the view.\n * - `viewContainer: ViewContainerRef` to control child template instantiation, for\n * {@link DirectiveMetadata} directives only\n * - `bindingPropagation: BindingPropagation` to control change detection in a more granular way.\n *\n * ### Example\n *\n * The following example demonstrates how dependency injection resolves constructor arguments in\n * practice.\n *\n *\n * Assume this HTML template:\n *\n * ```\n * <div dependency=\"1\">\n *   <div dependency=\"2\">\n *     <div dependency=\"3\" my-directive>\n *       <div dependency=\"4\">\n *         <div dependency=\"5\"></div>\n *       </div>\n *       <div dependency=\"6\"></div>\n *     </div>\n *   </div>\n * </div>\n * ```\n *\n * With the following `dependency` decorator and `SomeService` injectable class.\n *\n * ```\n * @Injectable()\n * class SomeService {\n * }\n *\n * @Directive({\n *   selector: '[dependency]',\n *   inputs: [\n *     'id: dependency'\n *   ]\n * })\n * class Dependency {\n *   id:string;\n * }\n * ```\n *\n * Let's step through the different ways in which `MyDirective` could be declared...\n *\n *\n * ### No injection\n *\n * Here the constructor is declared with no arguments, therefore nothing is injected into\n * `MyDirective`.\n *\n * ```\n * @Directive({ selector: '[my-directive]' })\n * class MyDirective {\n *   constructor() {\n *   }\n * }\n * ```\n *\n * This directive would be instantiated with no dependencies.\n *\n *\n * ### Component-level injection\n *\n * Directives can inject any injectable instance from the closest component injector or any of its\n * parents.\n *\n * Here, the constructor declares a parameter, `someService`, and injects the `SomeService` type\n * from the parent\n * component's injector.\n * ```\n * @Directive({ selector: '[my-directive]' })\n * class MyDirective {\n *   constructor(someService: SomeService) {\n *   }\n * }\n * ```\n *\n * This directive would be instantiated with a dependency on `SomeService`.\n *\n *\n * ### Injecting a directive from the current element\n *\n * Directives can inject other directives declared on the current element.\n *\n * ```\n * @Directive({ selector: '[my-directive]' })\n * class MyDirective {\n *   constructor(dependency: Dependency) {\n *     expect(dependency.id).toEqual(3);\n *   }\n * }\n * ```\n * This directive would be instantiated with `Dependency` declared at the same element, in this case\n * `dependency=\"3\"`.\n *\n * ### Injecting a directive from any ancestor elements\n *\n * Directives can inject other directives declared on any ancestor element (in the current Shadow\n * DOM), i.e. on the current element, the\n * parent element, or its parents.\n * ```\n * @Directive({ selector: '[my-directive]' })\n * class MyDirective {\n *   constructor(@Host() dependency: Dependency) {\n *     expect(dependency.id).toEqual(2);\n *   }\n * }\n * ```\n *\n * `@Host` checks the current element, the parent, as well as its parents recursively. If\n * `dependency=\"2\"` didn't\n * exist on the direct parent, this injection would\n * have returned\n * `dependency=\"1\"`.\n *\n *\n * ### Injecting a live collection of direct child directives\n *\n *\n * A directive can also query for other child directives. Since parent directives are instantiated\n * before child directives, a directive can't simply inject the list of child directives. Instead,\n * the directive injects a {@link QueryList}, which updates its contents as children are added,\n * removed, or moved by a directive that uses a {@link ViewContainerRef} such as a `ngFor`, an\n * `ngIf`, or an `ngSwitch`.\n *\n * ```\n * @Directive({ selector: '[my-directive]' })\n * class MyDirective {\n *   constructor(@Query(Dependency) dependencies:QueryList<Dependency>) {\n *   }\n * }\n * ```\n *\n * This directive would be instantiated with a {@link QueryList} which contains `Dependency` 4 and\n * `Dependency` 6. Here, `Dependency` 5 would not be included, because it is not a direct child.\n *\n * ### Injecting a live collection of descendant directives\n *\n * By passing the descendant flag to `@Query` above, we can include the children of the child\n * elements.\n *\n * ```\n * @Directive({ selector: '[my-directive]' })\n * class MyDirective {\n *   constructor(@Query(Dependency, {descendants: true}) dependencies:QueryList<Dependency>) {\n *   }\n * }\n * ```\n *\n * This directive would be instantiated with a Query which would contain `Dependency` 4, 5 and 6.\n *\n * ### Optional injection\n *\n * The normal behavior of directives is to return an error when a specified dependency cannot be\n * resolved. If you\n * would like to inject `null` on unresolved dependency instead, you can annotate that dependency\n * with `@Optional()`.\n * This explicitly permits the author of a template to treat some of the surrounding directives as\n * optional.\n *\n * ```\n * @Directive({ selector: '[my-directive]' })\n * class MyDirective {\n *   constructor(@Optional() dependency:Dependency) {\n *   }\n * }\n * ```\n *\n * This directive would be instantiated with a `Dependency` directive found on the current element.\n * If none can be\n * found, the injector supplies `null` instead of throwing an error.\n *\n * ### Example\n *\n * Here we use a decorator directive to simply define basic tool-tip behavior.\n *\n * ```\n * @Directive({\n *   selector: '[tooltip]',\n *   inputs: [\n *     'text: tooltip'\n *   ],\n *   host: {\n *     '(mouseenter)': 'onMouseEnter()',\n *     '(mouseleave)': 'onMouseLeave()'\n *   }\n * })\n * class Tooltip{\n *   text:string;\n *   overlay:Overlay; // NOT YET IMPLEMENTED\n *   overlayManager:OverlayManager; // NOT YET IMPLEMENTED\n *\n *   constructor(overlayManager:OverlayManager) {\n *     this.overlay = overlay;\n *   }\n *\n *   onMouseEnter() {\n *     // exact signature to be determined\n *     this.overlay = this.overlayManager.open(text, ...);\n *   }\n *\n *   onMouseLeave() {\n *     this.overlay.close();\n *     this.overlay = null;\n *   }\n * }\n * ```\n * In our HTML template, we can then add this behavior to a `<div>` or any other element with the\n * `tooltip` selector,\n * like so:\n *\n * ```\n * <div tooltip=\"some text here\"></div>\n * ```\n *\n * Directives can also control the instantiation, destruction, and positioning of inline template\n * elements:\n *\n * A directive uses a {@link ViewContainerRef} to instantiate, insert, move, and destroy views at\n * runtime.\n * The {@link ViewContainerRef} is created as a result of `<template>` element, and represents a\n * location in the current view\n * where these actions are performed.\n *\n * Views are always created as children of the current {@link ViewMetadata}, and as siblings of the\n * `<template>` element. Thus a\n * directive in a child view cannot inject the directive that created it.\n *\n * Since directives that create views via ViewContainers are common in Angular, and using the full\n * `<template>` element syntax is wordy, Angular\n * also supports a shorthand notation: `<li *foo=\"bar\">` and `<li template=\"foo: bar\">` are\n * equivalent.\n *\n * Thus,\n *\n * ```\n * <ul>\n *   <li *foo=\"bar\" title=\"text\"></li>\n * </ul>\n * ```\n *\n * Expands in use to:\n *\n * ```\n * <ul>\n *   <template [foo]=\"bar\">\n *     <li title=\"text\"></li>\n *   </template>\n * </ul>\n * ```\n *\n * Notice that although the shorthand places `*foo=\"bar\"` within the `<li>` element, the binding for\n * the directive\n * controller is correctly instantiated on the `<template>` element rather than the `<li>` element.\n *\n * ## Lifecycle hooks\n *\n * When the directive class implements some {@link ../../guide/lifecycle-hooks.html} the callbacks\n * are called by the change detection at defined points in time during the life of the directive.\n *\n * ### Example\n *\n * Let's suppose we want to implement the `unless` behavior, to conditionally include a template.\n *\n * Here is a simple directive that triggers on an `unless` selector:\n *\n * ```\n * @Directive({\n *   selector: '[unless]',\n *   inputs: ['unless']\n * })\n * export class Unless {\n *   viewContainer: ViewContainerRef;\n *   templateRef: TemplateRef;\n *   prevCondition: boolean;\n *\n *   constructor(viewContainer: ViewContainerRef, templateRef: TemplateRef) {\n *     this.viewContainer = viewContainer;\n *     this.templateRef = templateRef;\n *     this.prevCondition = null;\n *   }\n *\n *   set unless(newCondition) {\n *     if (newCondition && (isBlank(this.prevCondition) || !this.prevCondition)) {\n *       this.prevCondition = true;\n *       this.viewContainer.clear();\n *     } else if (!newCondition && (isBlank(this.prevCondition) || this.prevCondition)) {\n *       this.prevCondition = false;\n *       this.viewContainer.create(this.templateRef);\n *     }\n *   }\n * }\n * ```\n *\n * We can then use this `unless` selector in a template:\n * ```\n * <ul>\n *   <li *unless=\"expr\"></li>\n * </ul>\n * ```\n *\n * Once the directive instantiates the child view, the shorthand notation for the template expands\n * and the result is:\n *\n * ```\n * <ul>\n *   <template [unless]=\"exp\">\n *     <li></li>\n *   </template>\n *   <li></li>\n * </ul>\n * ```\n *\n * Note also that although the `<li></li>` template still exists inside the `<template></template>`,\n * the instantiated\n * view occurs on the second `<li></li>` which is a sibling to the `<template>` element.\n * @ts2dart_const\n * @stable\n */\nexport class DirectiveMetadata extends InjectableMetadata {\n  /**\n   * The CSS selector that triggers the instantiation of a directive.\n   *\n   * Angular only allows directives to trigger on CSS selectors that do not cross element\n   * boundaries.\n   *\n   * `selector` may be declared as one of the following:\n   *\n   * - `element-name`: select by element name.\n   * - `.class`: select by class name.\n   * - `[attribute]`: select by attribute name.\n   * - `[attribute=value]`: select by attribute name and value.\n   * - `:not(sub_selector)`: select only if the element does not match the `sub_selector`.\n   * - `selector1, selector2`: select if either `selector1` or `selector2` matches.\n   *\n   *\n   * ### Example\n   *\n   * Suppose we have a directive with an `input[type=text]` selector.\n   *\n   * And the following HTML:\n   *\n   * ```html\n   * <form>\n   *   <input type=\"text\">\n   *   <input type=\"radio\">\n   * <form>\n   * ```\n   *\n   * The directive would only be instantiated on the `<input type=\"text\">` element.\n   *\n   */\n  selector: string;\n\n  /**\n   * Enumerates the set of data-bound input properties for a directive\n   *\n   * Angular automatically updates input properties during change detection.\n   *\n   * The `inputs` property defines a set of `directiveProperty` to `bindingProperty`\n   * configuration:\n   *\n   * - `directiveProperty` specifies the component property where the value is written.\n   * - `bindingProperty` specifies the DOM property where the value is read from.\n   *\n   * When `bindingProperty` is not provided, it is assumed to be equal to `directiveProperty`.\n   *\n   * ### Example ([live demo](http://plnkr.co/edit/ivhfXY?p=preview))\n   *\n   * The following example creates a component with two data-bound properties.\n   *\n   * ```typescript\n   * @Component({\n   *   selector: 'bank-account',\n   *   inputs: ['bankName', 'id: account-id'],\n   *   template: `\n   *     Bank Name: {{bankName}}\n   *     Account Id: {{id}}\n   *   `\n   * })\n   * class BankAccount {\n   *   bankName: string;\n   *   id: string;\n   *\n   *   // this property is not bound, and won't be automatically updated by Angular\n   *   normalizedBankName: string;\n   * }\n   *\n   * @Component({\n   *   selector: 'app',\n   *   template: `\n   *     <bank-account bank-name=\"RBC\" account-id=\"4747\"></bank-account>\n   *   `,\n   *   directives: [BankAccount]\n   * })\n   * class App {}\n   *\n   * bootstrap(App);\n   * ```\n   *\n   */\n  get inputs(): string[] {\n    return isPresent(this._properties) && this._properties.length > 0 ? this._properties :\n                                                                        this._inputs;\n  }\n  /**\n   * Use `inputs` instead\n   *\n   * @deprecated\n   */\n  get properties(): string[] { return this.inputs; }\n  private _inputs: string[];\n  private _properties: string[];\n\n  /**\n   * Enumerates the set of event-bound output properties.\n   *\n   * When an output property emits an event, an event handler attached to that event\n   * the template is invoked.\n   *\n   * The `outputs` property defines a set of `directiveProperty` to `bindingProperty`\n   * configuration:\n   *\n   * - `directiveProperty` specifies the component property that emits events.\n   * - `bindingProperty` specifies the DOM property the event handler is attached to.\n   *\n   * ### Example ([live demo](http://plnkr.co/edit/d5CNq7?p=preview))\n   *\n   * ```typescript\n   * @Directive({\n   *   selector: 'interval-dir',\n   *   outputs: ['everySecond', 'five5Secs: everyFiveSeconds']\n   * })\n   * class IntervalDir {\n   *   everySecond = new EventEmitter();\n   *   five5Secs = new EventEmitter();\n   *\n   *   constructor() {\n   *     setInterval(() => this.everySecond.emit(\"event\"), 1000);\n   *     setInterval(() => this.five5Secs.emit(\"event\"), 5000);\n   *   }\n   * }\n   *\n   * @Component({\n   *   selector: 'app',\n   *   template: `\n   *     <interval-dir (everySecond)=\"everySecond()\" (everyFiveSeconds)=\"everyFiveSeconds()\">\n   *     </interval-dir>\n   *   `,\n   *   directives: [IntervalDir]\n   * })\n   * class App {\n   *   everySecond() { console.log('second'); }\n   *   everyFiveSeconds() { console.log('five seconds'); }\n   * }\n   * bootstrap(App);\n   * ```\n   *\n   */\n  get outputs(): string[] {\n    return isPresent(this._events) && this._events.length > 0 ? this._events : this._outputs;\n  }\n  /**\n   * Use `outputs` instead\n   *\n   * @deprecated\n   */\n  get events(): string[] { return this.outputs; }\n  private _outputs: string[];\n  private _events: string[];\n\n  /**\n   * Specify the events, actions, properties and attributes related to the host element.\n   *\n   * ## Host Listeners\n   *\n   * Specifies which DOM events a directive listens to via a set of `(event)` to `method`\n   * key-value pairs:\n   *\n   * - `event`: the DOM event that the directive listens to.\n   * - `statement`: the statement to execute when the event occurs.\n   * If the evaluation of the statement returns `false`, then `preventDefault`is applied on the DOM\n   * event.\n   *\n   * To listen to global events, a target must be added to the event name.\n   * The target can be `window`, `document` or `body`.\n   *\n   * When writing a directive event binding, you can also refer to the $event local variable.\n   *\n   * ### Example ([live demo](http://plnkr.co/edit/DlA5KU?p=preview))\n   *\n   * The following example declares a directive that attaches a click listener to the button and\n   * counts clicks.\n   *\n   * ```typescript\n   * @Directive({\n   *   selector: 'button[counting]',\n   *   host: {\n   *     '(click)': 'onClick($event.target)'\n   *   }\n   * })\n   * class CountClicks {\n   *   numberOfClicks = 0;\n   *\n   *   onClick(btn) {\n   *     console.log(\"button\", btn, \"number of clicks:\", this.numberOfClicks++);\n   *   }\n   * }\n   *\n   * @Component({\n   *   selector: 'app',\n   *   template: `<button counting>Increment</button>`,\n   *   directives: [CountClicks]\n   * })\n   * class App {}\n   *\n   * bootstrap(App);\n   * ```\n   *\n   * ## Host Property Bindings\n   *\n   * Specifies which DOM properties a directive updates.\n   *\n   * Angular automatically checks host property bindings during change detection.\n   * If a binding changes, it will update the host element of the directive.\n   *\n   * ### Example ([live demo](http://plnkr.co/edit/gNg0ED?p=preview))\n   *\n   * The following example creates a directive that sets the `valid` and `invalid` classes\n   * on the DOM element that has ngModel directive on it.\n   *\n   * ```typescript\n   * @Directive({\n   *   selector: '[ngModel]',\n   *   host: {\n   *     '[class.valid]': 'valid',\n   *     '[class.invalid]': 'invalid'\n   *   }\n   * })\n   * class NgModelStatus {\n   *   constructor(public control:NgModel) {}\n   *   get valid { return this.control.valid; }\n   *   get invalid { return this.control.invalid; }\n   * }\n   *\n   * @Component({\n   *   selector: 'app',\n   *   template: `<input [(ngModel)]=\"prop\">`,\n   *   directives: [FORM_DIRECTIVES, NgModelStatus]\n   * })\n   * class App {\n   *   prop;\n   * }\n   *\n   * bootstrap(App);\n   * ```\n   *\n   * ## Attributes\n   *\n   * Specifies static attributes that should be propagated to a host element.\n   *\n   * ### Example\n   *\n   * In this example using `my-button` directive (ex.: `<div my-button></div>`) on a host element\n   * (here: `<div>` ) will ensure that this element will get the \"button\" role.\n   *\n   * ```typescript\n   * @Directive({\n   *   selector: '[my-button]',\n   *   host: {\n   *     'role': 'button'\n   *   }\n   * })\n   * class MyButton {\n   * }\n   * ```\n   */\n  host: {[key: string]: string};\n\n  /**\n   * Defines the set of injectable objects that are visible to a Directive and its light DOM\n   * children.\n   *\n   * ## Simple Example\n   *\n   * Here is an example of a class that can be injected:\n   *\n   * ```\n   * class Greeter {\n   *    greet(name:string) {\n   *      return 'Hello ' + name + '!';\n   *    }\n   * }\n   *\n   * @Directive({\n   *   selector: 'greet',\n   *   providers: [\n   *     Greeter\n   *   ]\n   * })\n   * class HelloWorld {\n   *   greeter:Greeter;\n   *\n   *   constructor(greeter:Greeter) {\n   *     this.greeter = greeter;\n   *   }\n   * }\n   * ```\n   */\n  get providers(): any[] { return this._providers; }\n  private _providers: any[];\n\n  /**\n   * Defines the name that can be used in the template to assign this directive to a variable.\n   *\n   * ## Simple Example\n   *\n   * ```\n   * @Directive({\n   *   selector: 'child-dir',\n   *   exportAs: 'child'\n   * })\n   * class ChildDir {\n   * }\n   *\n   * @Component({\n   *   selector: 'main',\n   *   template: `<child-dir #c=\"child\"></child-dir>`,\n   *   directives: [ChildDir]\n   * })\n   * class MainComponent {\n   * }\n   *\n   * ```\n   */\n  exportAs: string;\n\n  // TODO: add an example after ContentChildren and ViewChildren are in master\n  /**\n   * Configures the queries that will be injected into the directive.\n   *\n   * Content queries are set before the `ngAfterContentInit` callback is called.\n   * View queries are set before the `ngAfterViewInit` callback is called.\n   *\n   * ### Example\n   *\n   * ```\n   * @Component({\n   *   selector: 'someDir',\n   *   queries: {\n   *     contentChildren: new ContentChildren(ChildDirective),\n   *     viewChildren: new ViewChildren(ChildDirective)\n   *   },\n   *   template: '<child-directive></child-directive>',\n   *   directives: [ChildDirective]\n   * })\n   * class SomeDir {\n   *   contentChildren: QueryList<ChildDirective>,\n   *   viewChildren: QueryList<ChildDirective>\n   *\n   *   ngAfterContentInit() {\n   *     // contentChildren is set\n   *   }\n   *\n   *   ngAfterViewInit() {\n   *     // viewChildren is set\n   *   }\n   * }\n   * ```\n   */\n  queries: {[key: string]: any};\n\n  constructor({selector, inputs, outputs, properties, events, host, providers, exportAs, queries}: {\n    selector?: string,\n    inputs?: string[],\n    outputs?: string[],\n    /** @deprecated */ properties?: string[],\n    /** @deprecated */ events?: string[],\n    host?: {[key: string]: string},\n    providers?: any[],\n    exportAs?: string,\n    queries?: {[key: string]: any}\n  } = {}) {\n    super();\n    this.selector = selector;\n    this._inputs = inputs;\n    this._properties = properties;\n    this._outputs = outputs;\n    this._events = events;\n    this.host = host;\n    this.exportAs = exportAs;\n    this.queries = queries;\n    this._providers = providers;\n  }\n}\n\n/**\n * Declare reusable UI building blocks for an application.\n *\n * Each Angular component requires a single `@Component` annotation. The\n * `@Component`\n * annotation specifies when a component is instantiated, and which properties and hostListeners it\n * binds to.\n *\n * When a component is instantiated, Angular\n * - creates a shadow DOM for the component.\n * - loads the selected template into the shadow DOM.\n * - creates all the injectable objects configured with `providers` and `viewProviders`.\n *\n * All template expressions and statements are then evaluated against the component instance.\n *\n * For details on the `@View` annotation, see {@link ViewMetadata}.\n *\n * ## Lifecycle hooks\n *\n * When the component class implements some {@link ../../guide/lifecycle-hooks.html} the callbacks\n * are called by the change detection at defined points in time during the life of the component.\n *\n * ### Example\n *\n * {@example core/ts/metadata/metadata.ts region='component'}\n * @ts2dart_const\n * @stable\n */\nexport class ComponentMetadata extends DirectiveMetadata {\n  /**\n   * Defines the used change detection strategy.\n   *\n   * When a component is instantiated, Angular creates a change detector, which is responsible for\n   * propagating the component's bindings.\n   *\n   * The `changeDetection` property defines, whether the change detection will be checked every time\n   * or only when the component tells it to do so.\n   */\n  changeDetection: ChangeDetectionStrategy;\n\n  /**\n   * Defines the set of injectable objects that are visible to its view DOM children.\n   *\n   * ## Simple Example\n   *\n   * Here is an example of a class that can be injected:\n   *\n   * ```\n   * class Greeter {\n   *    greet(name:string) {\n   *      return 'Hello ' + name + '!';\n   *    }\n   * }\n   *\n   * @Directive({\n   *   selector: 'needs-greeter'\n   * })\n   * class NeedsGreeter {\n   *   greeter:Greeter;\n   *\n   *   constructor(greeter:Greeter) {\n   *     this.greeter = greeter;\n   *   }\n   * }\n   *\n   * @Component({\n   *   selector: 'greet',\n   *   viewProviders: [\n   *     Greeter\n   *   ],\n   *   template: `<needs-greeter></needs-greeter>`,\n   *   directives: [NeedsGreeter]\n   * })\n   * class HelloWorld {\n   * }\n   *\n   * ```\n   */\n  get viewProviders(): any[] { return this._viewProviders; }\n  private _viewProviders: any[];\n\n  /**\n   * The module id of the module that contains the component.\n   * Needed to be able to resolve relative urls for templates and styles.\n   * In CommonJS, this can always be set to `module.id`, similarly SystemJS exposes `__moduleName`\n   * variable within each module.\n   *\n   * In Dart, this can be determined automatically and does not need to be set.\n\n   *\n   * ## Simple Example\n   *\n   * ```\n   * @Directive({\n   *   selector: 'someDir',\n   *   moduleId: module.id\n   * })\n   * class SomeDir {\n   * }\n   *\n   * ```\n   */\n  moduleId: string;\n\n  templateUrl: string;\n\n  template: string;\n\n  styleUrls: string[];\n\n  styles: string[];\n\n  /**\n   * Animations are defined on components via an animation-like DSL. This DSL approach to describing\n   * animations allows for a flexibility that both benefits developers and the framework.\n   *\n   * Animations work by listening on state changes that occur on an element within\n   * the template. When a state change occurs, Angular can then take advantage and animate the\n   * arc in between. This works similar to how CSS transitions work, however, by having a\n   * programmatic DSL, animations are not limited to environments that are DOM-specific.\n   * (Angular can also perform optimizations behind the scenes to make animations more performant.)\n   *\n   * For animations to be available for use, animation state changes are placed within\n   * {@link trigger animation triggers} which are housed inside of the `animations` annotation\n   * metadata. Within a trigger both {@link state state} and {@link transition transition} entries\n   * can be placed.\n   *\n   * ```typescript\n   * @Component({\n   *   selector: 'animation-cmp',\n   *   templateUrl: 'animation-cmp.html',\n   *   animations: [\n   *     // this here is our animation trigger that\n   *     // will contain our state change animations.\n   *     trigger('myTriggerName', [\n   *       // the styles defined for the `on` and `off`\n   *       // states declared below are persisted on the\n   *       // element once the animation completes.\n   *       state('on', style({ opacity: 1 }),\n   *       state('off', style({ opacity: 0 }),\n   *\n   *       // this here is our animation that kicks off when\n   *       // this state change jump is true\n   *       transition('on => off', [\n   *         animate(\"1s\")\n   *       ])\n   *     ])\n   *   ]\n   * })\n   * ```\n   *\n   * As depicted in the code above, a group of related animation states are all contained within\n   * an animation `trigger` (the code example above called the trigger `myTriggerName`).\n   * When a trigger is created then it can be bound onto an element within the component's\n   * template via a property prefixed by an `@` symbol followed by trigger name and an expression\n   * that\n   * is used to determine the state value for that trigger.\n   *\n   * ```html\n   * <!-- animation-cmp.html -->\n   * <div @myTriggerName=\"expression\">...</div>\n   * ```\n   *\n   * For state changes to be executed, the `expression` value must change value from its existing\n   * value\n   * to something that we have set an animation to animate on (in the example above we are listening\n   * to a change of state between `on` and `off`). The `expression` value attached to the trigger\n   * must be something that can be evaluated with the template/component context.\n   *\n   * ### DSL Animation Functions\n   *\n   * Please visit each of the animation DSL functions listed below to gain a better understanding\n   * of how and why they are used for crafting animations in Angular2:\n   *\n   * - {@link trigger trigger()}\n   * - {@link state state()}\n   * - {@link transition transition()}\n   * - {@link group group()}\n   * - {@link sequence sequence()}\n   * - {@link style style()}\n   * - {@link animate animate()}\n   * - {@link keyframes keyframes()}\n   */\n  animations: AnimationEntryMetadata[];\n\n  directives: Array<Type|any[]>;\n\n  pipes: Array<Type|any[]>;\n\n  encapsulation: ViewEncapsulation;\n\n  constructor({selector,\n               inputs,\n               outputs,\n               properties,\n               events,\n               host,\n               exportAs,\n               moduleId,\n               providers,\n               viewProviders,\n               changeDetection = ChangeDetectionStrategy.Default,\n               queries,\n               templateUrl,\n               template,\n               styleUrls,\n               styles,\n               animations,\n               directives,\n               pipes,\n               encapsulation}: {\n    selector?: string,\n    inputs?: string[],\n    outputs?: string[],\n    /** @deprecated */ properties?: string[],\n    /** @deprecated */ events?: string[],\n    host?: {[key: string]: string},\n    providers?: any[],\n    exportAs?: string,\n    moduleId?: string,\n    viewProviders?: any[],\n    queries?: {[key: string]: any},\n    changeDetection?: ChangeDetectionStrategy,\n    templateUrl?: string,\n    template?: string,\n    styleUrls?: string[],\n    styles?: string[],\n    animations?: AnimationEntryMetadata[],\n    directives?: Array<Type|any[]>,\n    pipes?: Array<Type|any[]>,\n    encapsulation?: ViewEncapsulation\n  } = {}) {\n    super({\n      selector: selector,\n      inputs: inputs,\n      outputs: outputs,\n      properties: properties,\n      events: events,\n      host: host,\n      exportAs: exportAs,\n      providers: providers,\n      queries: queries\n    });\n\n    this.changeDetection = changeDetection;\n    this._viewProviders = viewProviders;\n    this.templateUrl = templateUrl;\n    this.template = template;\n    this.styleUrls = styleUrls;\n    this.styles = styles;\n    this.directives = directives;\n    this.pipes = pipes;\n    this.encapsulation = encapsulation;\n    this.moduleId = moduleId;\n    this.animations = animations;\n  }\n}\n\n/**\n * Declare reusable pipe function.\n *\n * A \"pure\" pipe is only re-evaluated when either the input or any of the arguments change.\n *\n * When not specified, pipes default to being pure.\n *\n * ### Example\n *\n * {@example core/ts/metadata/metadata.ts region='pipe'}\n * @ts2dart_const\n * @stable\n */\nexport class PipeMetadata extends InjectableMetadata {\n  name: string;\n  /** @internal */\n  _pure: boolean;\n\n  constructor({name, pure}: {name: string, pure?: boolean}) {\n    super();\n    this.name = name;\n    this._pure = pure;\n  }\n\n  get pure(): boolean { return isPresent(this._pure) ? this._pure : true; }\n}\n\n/**\n * Declares a data-bound input property.\n *\n * Angular automatically updates data-bound properties during change detection.\n *\n * `InputMetadata` takes an optional parameter that specifies the name\n * used when instantiating a component in the template. When not provided,\n * the name of the decorated property is used.\n *\n * ### Example\n *\n * The following example creates a component with two input properties.\n *\n * ```typescript\n * @Component({\n *   selector: 'bank-account',\n *   template: `\n *     Bank Name: {{bankName}}\n *     Account Id: {{id}}\n *   `\n * })\n * class BankAccount {\n *   @Input() bankName: string;\n *   @Input('account-id') id: string;\n *\n *   // this property is not bound, and won't be automatically updated by Angular\n *   normalizedBankName: string;\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `\n *     <bank-account bank-name=\"RBC\" account-id=\"4747\"></bank-account>\n *   `,\n *   directives: [BankAccount]\n * })\n * class App {}\n *\n * bootstrap(App);\n * ```\n * @ts2dart_const\n * @stable\n */\nexport class InputMetadata {\n  constructor(\n      /**\n       * Name used when instantiating a component in the template.\n       */\n      public bindingPropertyName?: string) {}\n}\n\n/**\n * Declares an event-bound output property.\n *\n * When an output property emits an event, an event handler attached to that event\n * the template is invoked.\n *\n * `OutputMetadata` takes an optional parameter that specifies the name\n * used when instantiating a component in the template. When not provided,\n * the name of the decorated property is used.\n *\n * ### Example\n *\n * ```typescript\n * @Directive({\n *   selector: 'interval-dir',\n * })\n * class IntervalDir {\n *   @Output() everySecond = new EventEmitter();\n *   @Output('everyFiveSeconds') five5Secs = new EventEmitter();\n *\n *   constructor() {\n *     setInterval(() => this.everySecond.emit(\"event\"), 1000);\n *     setInterval(() => this.five5Secs.emit(\"event\"), 5000);\n *   }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `\n *     <interval-dir (everySecond)=\"everySecond()\" (everyFiveSeconds)=\"everyFiveSeconds()\">\n *     </interval-dir>\n *   `,\n *   directives: [IntervalDir]\n * })\n * class App {\n *   everySecond() { console.log('second'); }\n *   everyFiveSeconds() { console.log('five seconds'); }\n * }\n * bootstrap(App);\n * ```\n * @ts2dart_const\n * @stable\n */\nexport class OutputMetadata {\n  constructor(public bindingPropertyName?: string) {}\n}\n\n/**\n * Declares a host property binding.\n *\n * Angular automatically checks host property bindings during change detection.\n * If a binding changes, it will update the host element of the directive.\n *\n * `HostBindingMetadata` takes an optional parameter that specifies the property\n * name of the host element that will be updated. When not provided,\n * the class property name is used.\n *\n * ### Example\n *\n * The following example creates a directive that sets the `valid` and `invalid` classes\n * on the DOM element that has ngModel directive on it.\n *\n * ```typescript\n * @Directive({selector: '[ngModel]'})\n * class NgModelStatus {\n *   constructor(public control:NgModel) {}\n *   @HostBinding('class.valid') get valid { return this.control.valid; }\n *   @HostBinding('class.invalid') get invalid { return this.control.invalid; }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `<input [(ngModel)]=\"prop\">`,\n *   directives: [FORM_DIRECTIVES, NgModelStatus]\n * })\n * class App {\n *   prop;\n * }\n *\n * bootstrap(App);\n * ```\n * @ts2dart_const\n * @stable\n */\nexport class HostBindingMetadata {\n  constructor(public hostPropertyName?: string) {}\n}\n\n/**\n * Declares a host listener.\n *\n * Angular will invoke the decorated method when the host element emits the specified event.\n *\n * If the decorated method returns `false`, then `preventDefault` is applied on the DOM\n * event.\n *\n * ### Example\n *\n * The following example declares a directive that attaches a click listener to the button and\n * counts clicks.\n *\n * ```typescript\n * @Directive({selector: 'button[counting]'})\n * class CountClicks {\n *   numberOfClicks = 0;\n *\n *   @HostListener('click', ['$event.target'])\n *   onClick(btn) {\n *     console.log(\"button\", btn, \"number of clicks:\", this.numberOfClicks++);\n *   }\n * }\n *\n * @Component({\n *   selector: 'app',\n *   template: `<button counting>Increment</button>`,\n *   directives: [CountClicks]\n * })\n * class App {}\n *\n * bootstrap(App);\n * ```\n * @ts2dart_const\n * @stable\n */\nexport class HostListenerMetadata {\n  constructor(public eventName: string, public args?: string[]) {}\n}\n\ninterface DecoratorInvocation {\n  type: Function;\n  args?: any[];\n}\n"]}