diff --git a/.gitignore b/.gitignore index 6455fc0..28e6bd8 100644 --- a/.gitignore +++ b/.gitignore @@ -1,4 +1,5 @@ +.DS_Store .idea/ node_modules/ -dist/ -!example/ \ No newline at end of file +!example/ +updaters \ No newline at end of file diff --git a/README.md b/README.md index fb51d6d..d7ca368 100644 --- a/README.md +++ b/README.md @@ -1,91 +1,3 @@ -# Description +DEPRECATED ! Use [ack-angular-fx](https://www.npmjs.com/package/ack-angular-fx) -Angular2 animations, inspired by [Animate.css](https://daneden.github.io/animate.css). - -# Install - -```bash -npm install ng2-animate --save -``` - -# Usage - -## Entering and Leaving - -```javascript -import { animateFactory } from 'ng2-animate'; - -@Component({ - selector: 'app', - template: require('./app.html'), - animations: [animateFactory(1000, 200, 'ease-in')] -}) -export class AppComponent{ - show: boolean = true; - list: string[] = ['xxx', 'yyy']; - onAdd() { - this.list.push('zzz'); - } - onRemove(i) { - this.list.splice(i, 1); - } -} -``` - -```html -
fadeIn
- - - - -Hello World
- -``` - -# Params - -```javascript -animateFactory(1000, 200, 'ease-in') -``` - -### duration - -the duration of the animation - -- type: string | number -- optional, default value is `500ms` - -### delay - -the delay of the animation - -- type: string | number -- optional, default value is `0` - -### easing - -the easing function of the animation - -- type: string -- optional, default value is `linear` - -# Support Animations - -see online demo https://yuyang041060120.github.io/ng2-animate - -> click the top title and every element. - -# License - -MIT +This pull request was never reviewed by the owner of ng2-animate so I was forced to release my code. \ No newline at end of file diff --git a/dist/animations/bounce.d.ts b/dist/animations/bounce.d.ts new file mode 100644 index 0000000..8e315a0 --- /dev/null +++ b/dist/animations/bounce.d.ts @@ -0,0 +1,2 @@ +import { AnimationMetadata } from '@angular/core'; +export declare const bounce: (timing: string, options: any) => AnimationMetadata[]; diff --git a/dist/animations/bounce.js b/dist/animations/bounce.js new file mode 100644 index 0000000..b65b1e0 --- /dev/null +++ b/dist/animations/bounce.js @@ -0,0 +1,107 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +var core_1 = require("@angular/core"); +exports.bounce = function (timing, options) { + options = options || {}; + options.igniter = options.igniter || '*'; + function stylize(styleDef) { + return core_1.style(Object.assign(styleDef, options.whileStyle)); + } + return [ + core_1.state('bounceOut', core_1.style({ + display: 'none' + })), + core_1.state('bounceOutDown', core_1.style({ + display: 'none' + })), + core_1.state('bounceOutLeft', core_1.style({ + display: 'none' + })), + core_1.state('bounceOutRight', core_1.style({ + display: 'none' + })), + core_1.state('bounceOutUp', core_1.style({ + display: 'none' + })), + core_1.transition(options.igniter + " => bounceIn", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 0, transform: 'scale3d(.3, .3, .3)', offset: 0 }), + stylize({ transform: 'scale3d(1.1, 1.1, 1.1)', offset: 0.2 }), + stylize({ transform: 'scale3d(.9, .9, .9)', offset: 0.4 }), + stylize({ transform: 'scale3d(1.03, 1.03, 1.03)', offset: 0.6 }), + stylize({ transform: 'scale3d(.97, .97, .97)', offset: 0.8 }), + stylize({ opacity: 1, transform: 'scale3d(1, 1, 1)', offset: 1 }) + ])) + ]), + core_1.transition("bounceIn => void, " + options.igniter + " => bounceOut", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ transform: 'scale3d(.9, .9, .9)', offset: 0.2 }), + stylize({ opacity: 1, transform: 'scale3d(1.1, 1.1, 1.1)', offset: 0.5 }), + stylize({ opacity: 0, transform: 'scale3d(.3, .3, .3)', offset: 1 }), + ])) + ]), + core_1.transition(options.igniter + " => bounceInDown", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 0, transform: 'translate3d(0, -1000px, 0)', offset: 0 }), + stylize({ opacity: 1, transform: 'translate3d(0, 20px, 0)', offset: 0.6 }), + stylize({ transform: 'translate3d(0, -10px, 0)', offset: 0.75 }), + stylize({ transform: 'translate3d(0, 5px, 0)', offset: 0.9 }), + stylize({ transform: 'translate3d(0, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition("bounceInDown => void, " + options.igniter + " => bounceOutDown", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ transform: 'translate3d(0, 10px, 0)', offset: 0.2 }), + stylize({ opacity: 1, transform: 'translate3d(0, -20px, 0)', offset: 0.5 }), + stylize({ opacity: 0, transform: 'translate3d(0, 1000px, 0)', offset: 1 }) + ])) + ]), + core_1.transition(options.igniter + " => bounceInLeft", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 0, transform: 'translate3d(-1000px, 0, 0)', offset: 0 }), + stylize({ opacity: 1, transform: 'translate3d(20px, 0, 0)', offset: 0.6 }), + stylize({ transform: 'translate3d(-10px, 0, 0)', offset: 0.75 }), + stylize({ transform: 'translate3d(5px, 0, 0)', offset: 0.9 }), + stylize({ transform: 'translate3d(0, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition("bounceInLeft => void, " + options.igniter + " => bounceOutRight", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 1, transform: 'translate3d(-20px, 0, 0)', offset: 0.2 }), + stylize({ opacity: 0, transform: 'translate3d(1000px, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition(options.igniter + " => bounceInRight", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 0, transform: 'translate3d(1000px, 0, 0)', offset: 0 }), + stylize({ opacity: 1, transform: 'translate3d(-20px, 0, 0)', offset: 0.6 }), + stylize({ transform: 'translate3d(10px, 0, 0)', offset: 0.75 }), + stylize({ transform: 'translate3d(-5px, 0, 0)', offset: 0.9 }), + stylize({ transform: 'translate3d(0, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition("bounceInRight => void, " + options.igniter + " => bounceOutLeft", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 1, transform: 'translate3d(20px, 0, 0)', offset: 0.2 }), + stylize({ opacity: 0, transform: 'translate3d(-1000px, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition(options.igniter + " => bounceInUp", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 0, transform: 'translate3d(0, 1000px, 0)', offset: 0 }), + stylize({ opacity: 1, transform: 'translate3d(0, -20px, 0)', offset: 0.6 }), + stylize({ transform: 'translate3d(0, 10px, 0)', offset: 0.75 }), + stylize({ transform: 'translate3d(0, -5px, 0)', offset: 0.9 }), + stylize({ transform: 'translate3d(0, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition("bounceInUp => void, " + options.igniter + " => bounceOutUp", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ transform: 'translate3d(0, -10px, 0)', offset: 0.2 }), + stylize({ opacity: 1, transform: 'translate3d(0, 20px, 0)', offset: 0.5 }), + stylize({ opacity: 0, transform: 'translate3d(0, -1000px, 0)', offset: 1 }) + ])) + ]) + ]; +}; +//# sourceMappingURL=bounce.js.map \ No newline at end of file diff --git a/dist/animations/bounce.js.map b/dist/animations/bounce.js.map new file mode 100644 index 0000000..205e3c1 --- /dev/null +++ b/dist/animations/bounce.js.map @@ -0,0 +1 @@ +{"version":3,"file":"bounce.js","sourceRoot":"","sources":["../../src/animations/bounce.ts"],"names":[],"mappings":";;AAAA,sCAOuB;AAEV,QAAA,MAAM,GAAG,UAAC,MAAc,EAAE,OAAO;IAC5C,OAAO,GAAG,OAAO,IAAI,EAAE,CAAA;IACvB,OAAO,CAAC,OAAO,GAAG,OAAO,CAAC,OAAO,IAAI,GAAG,CAAA;IAExC,iBAAiB,QAAQ;QACvB,MAAM,CAAC,YAAK,CAAE,MAAM,CAAC,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,UAAU,CAAC,CAAE,CAAA;IAC7D,CAAC;IAED,MAAM,CAAC;QACL,YAAK,CAAC,WAAW,EAAE,YAAK,CAAC;YACvB,OAAO,EAAE,MAAM;SAChB,CAAC,CAAC;QACH,YAAK,CAAC,eAAe,EAAE,YAAK,CAAC;YAC3B,OAAO,EAAE,MAAM;SAChB,CAAC,CAAC;QACH,YAAK,CAAC,eAAe,EAAE,YAAK,CAAC;YAC3B,OAAO,EAAE,MAAM;SAChB,CAAC,CAAC;QACH,YAAK,CAAC,gBAAgB,EAAE,YAAK,CAAC;YAC5B,OAAO,EAAE,MAAM;SAChB,CAAC,CAAC;QACH,YAAK,CAAC,aAAa,EAAE,YAAK,CAAC;YACzB,OAAO,EAAE,MAAM;SAChB,CAAC,CAAC;QACH,iBAAU,CAAI,OAAO,CAAC,OAAO,iBAAc,EAAE;YAC3C,cAAO,CAAC,MAAM,EAAE,gBAAS,CAAC;gBACxB,OAAO,CAAC,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,EAAE,CAAC,EAAC,CAAC;gBAClE,OAAO,CAAC,EAAC,SAAS,EAAE,wBAAwB,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC;gBAC3D,OAAO,CAAC,EAAC,SAAS,EAAE,qBAAqB,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC;gBACxD,OAAO,CAAC,EAAC,SAAS,EAAE,2BAA2B,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC;gBAC9D,OAAO,CAAC,EAAC,SAAS,EAAE,wBAAwB,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC;gBAC3D,OAAO,CAAC,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,EAAE,CAAC,EAAC,CAAC;aAChE,CAAC,CAAC;SACJ,CAAC;QACF,iBAAU,CAAC,uBAAqB,OAAO,CAAC,OAAO,kBAAe,EAAE;YAC9D,cAAO,CAAC,MAAM,EAAE,gBAAS,CAAC;gBACxB,OAAO,CAAC,EAAC,SAAS,EAAE,qBAAqB,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC;gBACxD,OAAO,CAAC,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,wBAAwB,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC;gBACvE,OAAO,CAAC,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,EAAE,CAAC,EAAC,CAAC;aACnE,CAAC,CAAC;SACJ,CAAC;QACF,iBAAU,CAAI,OAAO,CAAC,OAAO,qBAAkB,EAAE;YAC/C,cAAO,CAAC,MAAM,EAAE,gBAAS,CAAC;gBACxB,OAAO,CAAC,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,4BAA4B,EAAE,MAAM,EAAE,CAAC,EAAC,CAAC;gBACzE,OAAO,CAAC,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC;gBACxE,OAAO,CAAC,EAAC,SAAS,EAAE,0BAA0B,EAAE,MAAM,EAAE,IAAI,EAAC,CAAC;gBAC9D,OAAO,CAAC,EAAC,SAAS,EAAE,wBAAwB,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC;gBAC3D,OAAO,CAAC,EAAC,SAAS,EAAE,sBAAsB,EAAE,MAAM,EAAE,CAAC,EAAC,CAAC;aACxD,CAAC,CAAC;SACJ,CAAC;QACF,iBAAU,CAAC,2BAAyB,OAAO,CAAC,OAAO,sBAAmB,EAAE;YACtE,cAAO,CAAC,MAAM,EAAE,gBAAS,CAAC;gBACxB,OAAO,CAAC,EAAC,SAAS,EAAE,yBAAyB,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC;gBAC5D,OAAO,CAAC,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC;gBACzE,OAAO,CAAC,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,2BAA2B,EAAE,MAAM,EAAE,CAAC,EAAC,CAAC;aACzE,CAAC,CAAC;SACJ,CAAC;QACF,iBAAU,CAAI,OAAO,CAAC,OAAO,qBAAkB,EAAE;YAC/C,cAAO,CAAC,MAAM,EAAE,gBAAS,CAAC;gBACxB,OAAO,CAAC,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,4BAA4B,EAAE,MAAM,EAAE,CAAC,EAAC,CAAC;gBACzE,OAAO,CAAC,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC;gBACxE,OAAO,CAAC,EAAC,SAAS,EAAE,0BAA0B,EAAE,MAAM,EAAE,IAAI,EAAC,CAAC;gBAC9D,OAAO,CAAC,EAAC,SAAS,EAAE,wBAAwB,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC;gBAC3D,OAAO,CAAC,EAAC,SAAS,EAAE,sBAAsB,EAAE,MAAM,EAAE,CAAC,EAAC,CAAC;aACxD,CAAC,CAAC;SACJ,CAAC;QACF,iBAAU,CAAC,2BAAyB,OAAO,CAAC,OAAO,uBAAoB,EAAE;YACvE,cAAO,CAAC,MAAM,EAAE,gBAAS,CAAC;gBACxB,OAAO,CAAC,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC;gBACzE,OAAO,CAAC,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,2BAA2B,EAAE,MAAM,EAAE,CAAC,EAAC,CAAC;aACzE,CAAC,CAAC;SACJ,CAAC;QACF,iBAAU,CAAI,OAAO,CAAC,OAAO,sBAAmB,EAAE;YAChD,cAAO,CAAC,MAAM,EAAE,gBAAS,CAAC;gBACxB,OAAO,CAAC,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,2BAA2B,EAAE,MAAM,EAAE,CAAC,EAAC,CAAC;gBACxE,OAAO,CAAC,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC;gBACzE,OAAO,CAAC,EAAC,SAAS,EAAE,yBAAyB,EAAE,MAAM,EAAE,IAAI,EAAC,CAAC;gBAC7D,OAAO,CAAC,EAAC,SAAS,EAAE,yBAAyB,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC;gBAC5D,OAAO,CAAC,EAAC,SAAS,EAAE,sBAAsB,EAAE,MAAM,EAAE,CAAC,EAAC,CAAC;aACxD,CAAC,CAAC;SACJ,CAAC;QACF,iBAAU,CAAC,4BAA0B,OAAO,CAAC,OAAO,sBAAmB,EAAE;YACvE,cAAO,CAAC,MAAM,EAAE,gBAAS,CAAC;gBACxB,OAAO,CAAC,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC;gBACxE,OAAO,CAAC,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,4BAA4B,EAAE,MAAM,EAAE,CAAC,EAAC,CAAC;aAC1E,CAAC,CAAC;SACJ,CAAC;QACF,iBAAU,CAAI,OAAO,CAAC,OAAO,mBAAgB,EAAE;YAC7C,cAAO,CAAC,MAAM,EAAE,gBAAS,CAAC;gBACxB,OAAO,CAAC,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,2BAA2B,EAAE,MAAM,EAAE,CAAC,EAAC,CAAC;gBACxE,OAAO,CAAC,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,0BAA0B,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC;gBACzE,OAAO,CAAC,EAAC,SAAS,EAAE,yBAAyB,EAAE,MAAM,EAAE,IAAI,EAAC,CAAC;gBAC7D,OAAO,CAAC,EAAC,SAAS,EAAE,yBAAyB,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC;gBAC5D,OAAO,CAAC,EAAC,SAAS,EAAE,sBAAsB,EAAE,MAAM,EAAE,CAAC,EAAC,CAAC;aACxD,CAAC,CAAC;SACJ,CAAC;QACF,iBAAU,CAAC,yBAAuB,OAAO,CAAC,OAAO,oBAAiB,EAAE;YAClE,cAAO,CAAC,MAAM,EAAE,gBAAS,CAAC;gBACxB,OAAO,CAAC,EAAC,SAAS,EAAE,0BAA0B,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC;gBAC7D,OAAO,CAAC,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,yBAAyB,EAAE,MAAM,EAAE,GAAG,EAAC,CAAC;gBACxE,OAAO,CAAC,EAAC,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,4BAA4B,EAAE,MAAM,EAAE,CAAC,EAAC,CAAC;aAC1E,CAAC,CAAC;SACJ,CACF;KACF,CAAA;AAAA,CAAC,CAAC","sourcesContent":["import {\n style,\n state,\n transition,\n animate,\n keyframes,\n AnimationMetadata\n} from '@angular/core';\n\nexport const bounce = (timing: string, options): AnimationMetadata[] => {\n options = options || {}\n options.igniter = options.igniter || '*'\n\n function stylize(styleDef){\n return style( Object.assign(styleDef, options.whileStyle) )\n }\n\n return [\n state('bounceOut', style({\n display: 'none'\n })),\n state('bounceOutDown', style({\n display: 'none'\n })),\n state('bounceOutLeft', style({\n display: 'none'\n })),\n state('bounceOutRight', style({\n display: 'none'\n })),\n state('bounceOutUp', style({\n display: 'none'\n })),\n transition(`${options.igniter} => bounceIn`, [\n animate(timing, keyframes([\n stylize({opacity: 0, transform: 'scale3d(.3, .3, .3)', offset: 0}),\n stylize({transform: 'scale3d(1.1, 1.1, 1.1)', offset: 0.2}),\n stylize({transform: 'scale3d(.9, .9, .9)', offset: 0.4}),\n stylize({transform: 'scale3d(1.03, 1.03, 1.03)', offset: 0.6}),\n stylize({transform: 'scale3d(.97, .97, .97)', offset: 0.8}),\n stylize({opacity: 1, transform: 'scale3d(1, 1, 1)', offset: 1})\n ]))\n ]),\n transition(`bounceIn => void, ${options.igniter} => bounceOut`, [\n animate(timing, keyframes([\n stylize({transform: 'scale3d(.9, .9, .9)', offset: 0.2}),\n stylize({opacity: 1, transform: 'scale3d(1.1, 1.1, 1.1)', offset: 0.5}),\n stylize({opacity: 0, transform: 'scale3d(.3, .3, .3)', offset: 1}),\n ]))\n ]),\n transition(`${options.igniter} => bounceInDown`, [\n animate(timing, keyframes([\n stylize({opacity: 0, transform: 'translate3d(0, -1000px, 0)', offset: 0}),\n stylize({opacity: 1, transform: 'translate3d(0, 20px, 0)', offset: 0.6}),\n stylize({transform: 'translate3d(0, -10px, 0)', offset: 0.75}),\n stylize({transform: 'translate3d(0, 5px, 0)', offset: 0.9}),\n stylize({transform: 'translate3d(0, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`bounceInDown => void, ${options.igniter} => bounceOutDown`, [\n animate(timing, keyframes([\n stylize({transform: 'translate3d(0, 10px, 0)', offset: 0.2}),\n stylize({opacity: 1, transform: 'translate3d(0, -20px, 0)', offset: 0.5}),\n stylize({opacity: 0, transform: 'translate3d(0, 1000px, 0)', offset: 1})\n ]))\n ]),\n transition(`${options.igniter} => bounceInLeft`, [\n animate(timing, keyframes([\n stylize({opacity: 0, transform: 'translate3d(-1000px, 0, 0)', offset: 0}),\n stylize({opacity: 1, transform: 'translate3d(20px, 0, 0)', offset: 0.6}),\n stylize({transform: 'translate3d(-10px, 0, 0)', offset: 0.75}),\n stylize({transform: 'translate3d(5px, 0, 0)', offset: 0.9}),\n stylize({transform: 'translate3d(0, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`bounceInLeft => void, ${options.igniter} => bounceOutRight`, [\n animate(timing, keyframes([\n stylize({opacity: 1, transform: 'translate3d(-20px, 0, 0)', offset: 0.2}),\n stylize({opacity: 0, transform: 'translate3d(1000px, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`${options.igniter} => bounceInRight`, [\n animate(timing, keyframes([\n stylize({opacity: 0, transform: 'translate3d(1000px, 0, 0)', offset: 0}),\n stylize({opacity: 1, transform: 'translate3d(-20px, 0, 0)', offset: 0.6}),\n stylize({transform: 'translate3d(10px, 0, 0)', offset: 0.75}),\n stylize({transform: 'translate3d(-5px, 0, 0)', offset: 0.9}),\n stylize({transform: 'translate3d(0, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`bounceInRight => void, ${options.igniter} => bounceOutLeft`, [\n animate(timing, keyframes([\n stylize({opacity: 1, transform: 'translate3d(20px, 0, 0)', offset: 0.2}),\n stylize({opacity: 0, transform: 'translate3d(-1000px, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`${options.igniter} => bounceInUp`, [\n animate(timing, keyframes([\n stylize({opacity: 0, transform: 'translate3d(0, 1000px, 0)', offset: 0}),\n stylize({opacity: 1, transform: 'translate3d(0, -20px, 0)', offset: 0.6}),\n stylize({transform: 'translate3d(0, 10px, 0)', offset: 0.75}),\n stylize({transform: 'translate3d(0, -5px, 0)', offset: 0.9}),\n stylize({transform: 'translate3d(0, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`bounceInUp => void, ${options.igniter} => bounceOutUp`, [\n animate(timing, keyframes([\n stylize({transform: 'translate3d(0, -10px, 0)', offset: 0.2}),\n stylize({opacity: 1, transform: 'translate3d(0, 20px, 0)', offset: 0.5}),\n stylize({opacity: 0, transform: 'translate3d(0, -1000px, 0)', offset: 1})\n ]))\n ]\n )\n]};"]} \ No newline at end of file diff --git a/dist/animations/fade.d.ts b/dist/animations/fade.d.ts new file mode 100644 index 0000000..8c16593 --- /dev/null +++ b/dist/animations/fade.d.ts @@ -0,0 +1,2 @@ +import { AnimationMetadata } from '@angular/core'; +export declare const fade: (timing: string, options: any) => AnimationMetadata[]; diff --git a/dist/animations/fade.js b/dist/animations/fade.js new file mode 100644 index 0000000..1c54713 --- /dev/null +++ b/dist/animations/fade.js @@ -0,0 +1,88 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +var core_1 = require("@angular/core"); +exports.fade = function (timing, options) { + options = options || {}; + options.igniter = options.igniter || '*'; + function stylize(styleDef) { + return core_1.style(Object.assign(styleDef, options.whileStyle)); + } + return [ + core_1.state('fadeOut', core_1.style({ + display: 'none' + })), + core_1.state('fadeOutDown', core_1.style({ + display: 'none' + })), + core_1.state('fadeOutLeft', core_1.style({ + display: 'none' + })), + core_1.state('fadeOutRight', core_1.style({ + display: 'none' + })), + core_1.state('fadeOutUp', core_1.style({ + display: 'none' + })), + core_1.transition(options.igniter + " => fadeIn", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 0, offset: 0 }), + stylize({ opacity: 1, offset: 1 }) + ])) + ]), + core_1.transition("fadeIn => void, " + options.igniter + " => fadeOut", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 1, offset: 0 }), + stylize({ opacity: 0, offset: 1 }) + ])) + ]), + core_1.transition(options.igniter + " => fadeInDown", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 0, transform: 'translate3d(0, -100%, 0)', offset: 0 }), + stylize({ opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition("fadeInDown => void, " + options.igniter + " => fadeOutDown", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0 }), + stylize({ opacity: 0, transform: 'translate3d(0, 100%, 0)', offset: 1 }) + ])) + ]), + core_1.transition(options.igniter + " => fadeInLeft", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 0, transform: 'translate3d(-100%, 0, 0)', offset: 0 }), + stylize({ opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition("fadeInLeft => void, " + options.igniter + " => fadeOutRight", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0 }), + stylize({ opacity: 0, transform: 'translate3d(100%, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition(options.igniter + " => fadeInRight", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 0, transform: 'translate3d(100%, 0, 0)', offset: 0 }), + stylize({ opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition("fadeInRight => void, " + options.igniter + " => fadeOutLeft", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0 }), + stylize({ opacity: 0, transform: 'translate3d(-100%, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition(options.igniter + " => fadeInUp", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 0, transform: 'translate3d(0, 100%, 0)', offset: 0 }), + stylize({ opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition("fadeInUp => void, " + options.igniter + " => fadeOutUp", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0 }), + stylize({ opacity: 0, transform: 'translate3d(0, -100%, 0)', offset: 1 }) + ])) + ]) + ]; +}; +//# sourceMappingURL=fade.js.map \ No newline at end of file diff --git a/dist/animations/fade.js.map b/dist/animations/fade.js.map new file mode 100644 index 0000000..920ff74 --- /dev/null +++ b/dist/animations/fade.js.map @@ -0,0 +1 @@ +{"version":3,"file":"fade.js","sourceRoot":"","sources":["../../src/animations/fade.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n style,\n state,\n transition,\n animate,\n keyframes,\n AnimationMetadata\n} from '@angular/core';\n\nexport const fade = (timing: string, options): AnimationMetadata[] => {\n options = options || {}\n options.igniter = options.igniter || '*'\n\n function stylize(styleDef){\n return style( Object.assign(styleDef, options.whileStyle) )\n }\n\n return [\n state('fadeOut', style({\n display: 'none'\n })),\n state('fadeOutDown', style({\n display: 'none'\n })),\n state('fadeOutLeft', style({\n display: 'none'\n })),\n state('fadeOutRight', style({\n display: 'none'\n })),\n state('fadeOutUp', style({\n display: 'none'\n })),\n transition(`${options.igniter} => fadeIn`, [\n animate(timing, keyframes([\n stylize({opacity: 0, offset: 0}),\n stylize({opacity: 1, offset: 1})\n ]))\n ]),\n transition(`fadeIn => void, ${options.igniter} => fadeOut`, [\n animate(timing, keyframes([\n stylize({opacity: 1, offset: 0}),\n stylize({opacity: 0, offset: 1})\n ]))\n ]),\n transition(`${options.igniter} => fadeInDown`, [\n animate(timing, keyframes([\n stylize({opacity: 0, transform: 'translate3d(0, -100%, 0)', offset: 0}),\n stylize({opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`fadeInDown => void, ${options.igniter} => fadeOutDown`, [\n animate(timing, keyframes([\n stylize({opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0}),\n stylize({opacity: 0, transform: 'translate3d(0, 100%, 0)', offset: 1})\n ]))\n ]),\n transition(`${options.igniter} => fadeInLeft`, [\n animate(timing, keyframes([\n stylize({opacity: 0, transform: 'translate3d(-100%, 0, 0)', offset: 0}),\n stylize({opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`fadeInLeft => void, ${options.igniter} => fadeOutRight`, [\n animate(timing, keyframes([\n stylize({opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0}),\n stylize({opacity: 0, transform: 'translate3d(100%, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`${options.igniter} => fadeInRight`, [\n animate(timing, keyframes([\n stylize({opacity: 0, transform: 'translate3d(100%, 0, 0)', offset: 0}),\n stylize({opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`fadeInRight => void, ${options.igniter} => fadeOutLeft`, [\n animate(timing, keyframes([\n stylize({opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0}),\n stylize({opacity: 0, transform: 'translate3d(-100%, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`${options.igniter} => fadeInUp`, [\n animate(timing, keyframes([\n stylize({opacity: 0, transform: 'translate3d(0, 100%, 0)', offset: 0}),\n stylize({opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`fadeInUp => void, ${options.igniter} => fadeOutUp`, [\n animate(timing, keyframes([\n stylize({opacity: 1, transform: 'translate3d(0, 0, 0)', offset: 0}),\n stylize({opacity: 0, transform: 'translate3d(0, -100%, 0)', offset: 1})\n ]))\n ])\n ];\n}"]} \ No newline at end of file diff --git a/dist/animations/rotate.d.ts b/dist/animations/rotate.d.ts new file mode 100644 index 0000000..b34545e --- /dev/null +++ b/dist/animations/rotate.d.ts @@ -0,0 +1,2 @@ +import { AnimationMetadata } from '@angular/core'; +export declare const rotate: (timing: string, options: any) => AnimationMetadata[]; diff --git a/dist/animations/rotate.js b/dist/animations/rotate.js new file mode 100644 index 0000000..1578aa5 --- /dev/null +++ b/dist/animations/rotate.js @@ -0,0 +1,88 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +var core_1 = require("@angular/core"); +exports.rotate = function (timing, options) { + options = options || {}; + options.igniter = options.igniter || '*'; + function stylize(styleDef) { + return core_1.style(Object.assign(styleDef, options.whileStyle)); + } + return [ + core_1.state('rotateOut', core_1.style({ + display: 'none' + })), + core_1.state('rotateOutDownLeft', core_1.style({ + display: 'none' + })), + core_1.state('rotateOutDownRight', core_1.style({ + display: 'none' + })), + core_1.state('rotateOutUpLeft', core_1.style({ + display: 'none' + })), + core_1.state('rotateOutUpRight', core_1.style({ + display: 'none' + })), + core_1.transition(options.igniter + " => rotateIn", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 0, transformOrigin: 'center', transform: 'rotate3d(0, 0, 1, -200deg)', offset: 0 }), + stylize({ opacity: 1, transformOrigin: 'center', transform: 'rotate3d(0, 0, 1, 0deg)', offset: 1 }) + ])) + ]), + core_1.transition("rotateIn => void, " + options.igniter + " => rotateOut", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 1, transformOrigin: 'center', transform: 'rotate3d(0, 0, 1, 0deg)', offset: 0 }), + stylize({ opacity: 0, transformOrigin: 'center', transform: 'rotate3d(0, 0, 1, 200deg)', offset: 1 }) + ])) + ]), + core_1.transition(options.igniter + " => rotateInDownLeft", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 0, transformOrigin: 'left bottom', transform: 'rotate3d(0, 0, 1, -45deg)', offset: 0 }), + stylize({ opacity: 1, transformOrigin: 'left bottom', transform: 'rotate3d(0, 0, 1, 0deg)', offset: 1 }) + ])) + ]), + core_1.transition("rotateInDownLeft => void, " + options.igniter + " => rotateOutDownLeft", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 1, transformOrigin: 'left bottom', transform: 'rotate3d(0, 0, 1, 0deg)', offset: 0 }), + stylize({ opacity: 0, transformOrigin: 'left bottom', transform: 'rotate3d(0, 0, 1, 45deg)', offset: 1 }) + ])) + ]), + core_1.transition(options.igniter + " => rotateInDownRight", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 0, transformOrigin: 'right bottom', transform: 'rotate3d(0, 0, 1, 45deg)', offset: 0 }), + stylize({ opacity: 1, transformOrigin: 'right bottom', transform: 'rotate3d(0, 0, 1, 0deg)', offset: 1 }) + ])) + ]), + core_1.transition("rotateInDownRight => void, " + options.igniter + " => rotateOutDownRight", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 1, transformOrigin: 'right bottom', transform: 'rotate3d(0, 0, 1, 0deg)', offset: 0 }), + stylize({ opacity: 0, transformOrigin: 'right bottom', transform: 'rotate3d(0, 0, 1, -45deg)', offset: 1 }) + ])) + ]), + core_1.transition(options.igniter + " => rotateInUpLeft", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 0, transformOrigin: 'left bottom', transform: 'rotate3d(0, 0, 1, 45deg)', offset: 0 }), + stylize({ opacity: 1, transformOrigin: 'left bottom', transform: 'rotate3d(0, 0, 1, 0deg)', offset: 1 }) + ])) + ]), + core_1.transition("rotateInUpLeft => void, " + options.igniter + " => rotateOutUpLeft", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 1, transformOrigin: 'left bottom', transform: 'rotate3d(0, 0, 1, 0deg)', offset: 0 }), + stylize({ opacity: 0, transformOrigin: 'left bottom', transform: 'rotate3d(0, 0, 1, -45deg)', offset: 1 }) + ])) + ]), + core_1.transition(options.igniter + " => rotateInUpRight", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 0, transformOrigin: 'right bottom', transform: 'rotate3d(0, 0, 1, -45deg)', offset: 0 }), + stylize({ opacity: 1, transformOrigin: 'right bottom', transform: 'rotate3d(0, 0, 1, 0deg)', offset: 1 }) + ])) + ]), + core_1.transition("rotateInUpRight => void, " + options.igniter + " => rotateOutUpRight", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 1, transformOrigin: 'right bottom', transform: 'rotate3d(0, 0, 1, 0deg)', offset: 0 }), + stylize({ opacity: 0, transformOrigin: 'right bottom', transform: 'rotate3d(0, 0, 1, 45deg)', offset: 1 }) + ])) + ]) + ]; +}; +//# sourceMappingURL=rotate.js.map \ No newline at end of file diff --git a/dist/animations/rotate.js.map b/dist/animations/rotate.js.map new file mode 100644 index 0000000..333f0c9 --- /dev/null +++ b/dist/animations/rotate.js.map @@ -0,0 +1 @@ +{"version":3,"file":"rotate.js","sourceRoot":"","sources":["../../src/animations/rotate.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n style,\n state,\n transition,\n animate,\n keyframes,\n AnimationMetadata\n} from '@angular/core';\n\nexport const rotate = (timing: string, options): AnimationMetadata[] => {\n options = options || {}\n options.igniter = options.igniter || '*'\n\n function stylize(styleDef){\n return style( Object.assign(styleDef, options.whileStyle) )\n }\n\n return [\n state('rotateOut', style({\n display: 'none'\n })),\n state('rotateOutDownLeft', style({\n display: 'none'\n })),\n state('rotateOutDownRight', style({\n display: 'none'\n })),\n state('rotateOutUpLeft', style({\n display: 'none'\n })),\n state('rotateOutUpRight', style({\n display: 'none'\n })),\n transition(`${options.igniter} => rotateIn`, [\n animate(timing, keyframes([\n stylize({opacity: 0, transformOrigin: 'center', transform: 'rotate3d(0, 0, 1, -200deg)', offset: 0}),\n stylize({opacity: 1, transformOrigin: 'center', transform: 'rotate3d(0, 0, 1, 0deg)', offset: 1})\n ]))\n ]),\n transition(`rotateIn => void, ${options.igniter} => rotateOut`, [\n animate(timing, keyframes([\n stylize({opacity: 1, transformOrigin: 'center', transform: 'rotate3d(0, 0, 1, 0deg)', offset: 0}),\n stylize({opacity: 0, transformOrigin: 'center', transform: 'rotate3d(0, 0, 1, 200deg)', offset: 1})\n ]))\n ]),\n transition(`${options.igniter} => rotateInDownLeft`, [\n animate(timing, keyframes([\n stylize({opacity: 0, transformOrigin: 'left bottom', transform: 'rotate3d(0, 0, 1, -45deg)', offset: 0}),\n stylize({opacity: 1, transformOrigin: 'left bottom', transform: 'rotate3d(0, 0, 1, 0deg)', offset: 1})\n ]))\n ]),\n transition(`rotateInDownLeft => void, ${options.igniter} => rotateOutDownLeft`, [\n animate(timing, keyframes([\n stylize({opacity: 1, transformOrigin: 'left bottom', transform: 'rotate3d(0, 0, 1, 0deg)', offset: 0}),\n stylize({opacity: 0, transformOrigin: 'left bottom', transform: 'rotate3d(0, 0, 1, 45deg)', offset: 1})\n ]))\n ]),\n transition(`${options.igniter} => rotateInDownRight`, [\n animate(timing, keyframes([\n stylize({opacity: 0, transformOrigin: 'right bottom', transform: 'rotate3d(0, 0, 1, 45deg)', offset: 0}),\n stylize({opacity: 1, transformOrigin: 'right bottom', transform: 'rotate3d(0, 0, 1, 0deg)', offset: 1})\n ]))\n ]),\n transition(`rotateInDownRight => void, ${options.igniter} => rotateOutDownRight`, [\n animate(timing, keyframes([\n stylize({opacity: 1, transformOrigin: 'right bottom', transform: 'rotate3d(0, 0, 1, 0deg)', offset: 0}),\n stylize({opacity: 0, transformOrigin: 'right bottom', transform: 'rotate3d(0, 0, 1, -45deg)', offset: 1})\n ]))\n ]),\n transition(`${options.igniter} => rotateInUpLeft`, [\n animate(timing, keyframes([\n stylize({opacity: 0, transformOrigin: 'left bottom', transform: 'rotate3d(0, 0, 1, 45deg)', offset: 0}),\n stylize({opacity: 1, transformOrigin: 'left bottom', transform: 'rotate3d(0, 0, 1, 0deg)', offset: 1})\n ]))\n ]),\n transition(`rotateInUpLeft => void, ${options.igniter} => rotateOutUpLeft`, [\n animate(timing, keyframes([\n stylize({opacity: 1, transformOrigin: 'left bottom', transform: 'rotate3d(0, 0, 1, 0deg)', offset: 0}),\n stylize({opacity: 0, transformOrigin: 'left bottom', transform: 'rotate3d(0, 0, 1, -45deg)', offset: 1})\n ]))\n ]),\n transition(`${options.igniter} => rotateInUpRight`, [\n animate(timing, keyframes([\n stylize({opacity: 0, transformOrigin: 'right bottom', transform: 'rotate3d(0, 0, 1, -45deg)', offset: 0}),\n stylize({opacity: 1, transformOrigin: 'right bottom', transform: 'rotate3d(0, 0, 1, 0deg)', offset: 1})\n ]))\n ]),\n transition(`rotateInUpRight => void, ${options.igniter} => rotateOutUpRight`, [\n animate(timing, keyframes([\n stylize({opacity: 1, transformOrigin: 'right bottom', transform: 'rotate3d(0, 0, 1, 0deg)', offset: 0}),\n stylize({opacity: 0, transformOrigin: 'right bottom', transform: 'rotate3d(0, 0, 1, 45deg)', offset: 1})\n ]))\n ])\n ]\n};"]} \ No newline at end of file diff --git a/dist/animations/slide.d.ts b/dist/animations/slide.d.ts new file mode 100644 index 0000000..e5e4424 --- /dev/null +++ b/dist/animations/slide.d.ts @@ -0,0 +1,2 @@ +import { AnimationMetadata } from '@angular/core'; +export declare const slide: (timing: string, options: any) => AnimationMetadata[]; diff --git a/dist/animations/slide.js b/dist/animations/slide.js new file mode 100644 index 0000000..b50d49f --- /dev/null +++ b/dist/animations/slide.js @@ -0,0 +1,73 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +var core_1 = require("@angular/core"); +exports.slide = function (timing, options) { + options = options || {}; + options.igniter = options.igniter || '*'; + function stylize(styleDef) { + return core_1.style(Object.assign(styleDef, options.whileStyle)); + } + return [ + core_1.state('slideOutDown', core_1.style({ + display: 'none' + })), + core_1.state('slideOutLeft', core_1.style({ + display: 'none' + })), + core_1.state('slideOutRight', core_1.style({ + display: 'none' + })), + core_1.state('slideOutUp', core_1.style({ + display: 'none' + })), + core_1.transition(options.igniter + " => slideInDown", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ transform: 'translate3d(0, -100%, 0)', offset: 0 }), + stylize({ transform: 'translate3d(0, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition("slideInDown => void, " + options.igniter + " => slideOutDown", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ transform: 'translate3d(0, 0, 0)', offset: 0 }), + stylize({ transform: 'translate3d(0, 100%, 0)', offset: 1 }) + ])) + ]), + core_1.transition(options.igniter + " => slideInLeft", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ transform: 'translate3d(-100%, 0, 0)', offset: 0 }), + stylize({ transform: 'translate3d(0, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition("slideInLeft => void, " + options.igniter + " => slideOutRight", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ transform: 'translate3d(0, 0, 0)', offset: 0 }), + stylize({ transform: 'translate3d(100%, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition(options.igniter + " => slideInRight", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ transform: 'translate3d(100%, 0, 0)', offset: 0 }), + stylize({ transform: 'translate3d(0, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition("slideInRight => void, " + options.igniter + " => slideOutLeft", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ transform: 'translate3d(0, 0, 0)', offset: 0 }), + stylize({ transform: 'translate3d(-100%, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition(options.igniter + " => slideInUp", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ transform: 'translate3d(0, 100%, 0)', offset: 0 }), + stylize({ transform: 'translate3d(0, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition("slideInUp => void, " + options.igniter + " => slideOutUp", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ transform: 'translate3d(0, 0, 0)', offset: 0 }), + stylize({ transform: 'translate3d(0, -100%, 0)', offset: 1 }) + ])) + ]) + ]; +}; +//# sourceMappingURL=slide.js.map \ No newline at end of file diff --git a/dist/animations/slide.js.map b/dist/animations/slide.js.map new file mode 100644 index 0000000..8350182 --- /dev/null +++ b/dist/animations/slide.js.map @@ -0,0 +1 @@ +{"version":3,"file":"slide.js","sourceRoot":"","sources":["../../src/animations/slide.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n style,\n state,\n transition,\n animate,\n keyframes,\n AnimationMetadata\n} from '@angular/core';\n\nexport const slide = (timing: string, options): AnimationMetadata[] => {\n options = options || {}\n options.igniter = options.igniter || '*'\n\n function stylize(styleDef){\n return style( Object.assign(styleDef, options.whileStyle) )\n }\n\n return [\n state('slideOutDown', style({\n display: 'none'\n })),\n state('slideOutLeft', style({\n display: 'none'\n })),\n state('slideOutRight', style({\n display: 'none'\n })),\n state('slideOutUp', style({\n display: 'none'\n })),\n transition(`${options.igniter} => slideInDown`, [\n animate(timing, keyframes([\n stylize({transform: 'translate3d(0, -100%, 0)', offset: 0}),\n stylize({transform: 'translate3d(0, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`slideInDown => void, ${options.igniter} => slideOutDown`, [\n animate(timing, keyframes([\n stylize({transform: 'translate3d(0, 0, 0)', offset: 0}),\n stylize({transform: 'translate3d(0, 100%, 0)', offset: 1})\n ]))\n ]),\n transition(`${options.igniter} => slideInLeft`, [\n animate(timing, keyframes([\n stylize({transform: 'translate3d(-100%, 0, 0)', offset: 0}),\n stylize({transform: 'translate3d(0, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`slideInLeft => void, ${options.igniter} => slideOutRight`, [\n animate(timing, keyframes([\n stylize({transform: 'translate3d(0, 0, 0)', offset: 0}),\n stylize({transform: 'translate3d(100%, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`${options.igniter} => slideInRight`, [\n animate(timing, keyframes([\n stylize({transform: 'translate3d(100%, 0, 0)', offset: 0}),\n stylize({transform: 'translate3d(0, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`slideInRight => void, ${options.igniter} => slideOutLeft`, [\n animate(timing, keyframes([\n stylize({transform: 'translate3d(0, 0, 0)', offset: 0}),\n stylize({transform: 'translate3d(-100%, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`${options.igniter} => slideInUp`, [\n animate(timing, keyframes([\n stylize({transform: 'translate3d(0, 100%, 0)', offset: 0}),\n stylize({transform: 'translate3d(0, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`slideInUp => void, ${options.igniter} => slideOutUp`, [\n animate(timing, keyframes([\n stylize({transform: 'translate3d(0, 0, 0)', offset: 0}),\n stylize({transform: 'translate3d(0, -100%, 0)', offset: 1})\n ]))\n ])\n ]\n};"]} \ No newline at end of file diff --git a/dist/animations/zoom.d.ts b/dist/animations/zoom.d.ts new file mode 100644 index 0000000..48d8a03 --- /dev/null +++ b/dist/animations/zoom.d.ts @@ -0,0 +1,2 @@ +import { AnimationMetadata } from '@angular/core'; +export declare const zoom: (timing: string, options: any) => AnimationMetadata[]; diff --git a/dist/animations/zoom.js b/dist/animations/zoom.js new file mode 100644 index 0000000..ca40c77 --- /dev/null +++ b/dist/animations/zoom.js @@ -0,0 +1,96 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +var core_1 = require("@angular/core"); +exports.zoom = function (timing, options) { + options = options || {}; + options.igniter = options.igniter || '*'; + function stylize(styleDef) { + return core_1.style(Object.assign(styleDef, options.whileStyle)); + } + return [ + core_1.state('zoomOut', core_1.style({ + display: 'none' + })), + core_1.state('zoomOutDown', core_1.style({ + display: 'none' + })), + core_1.state('zoomOutLeft', core_1.style({ + display: 'none' + })), + core_1.state('zoomOutRight', core_1.style({ + display: 'none' + })), + core_1.state('zoomOutUp', core_1.style({ + display: 'none' + })), + core_1.transition(options.igniter + " => zoomIn", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 0, transform: 'scale3d(.1, .1, .1)', offset: 0 }), + stylize({ opacity: 1, transform: 'scale3d(1, 1, 1)', offset: 1 }) + ])) + ]), + core_1.transition("zoomIn => void, " + options.igniter + " => zoomOut", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 1, transform: 'scale3d(1, 1, 1)', offset: 0 }), + stylize({ opacity: 0, transform: 'scale3d(.1, .1, .1)', offset: 1 }) + ])) + ]), + core_1.transition(options.igniter + " => zoomInDown", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 0, transform: 'scale3d(.1, .1, .1) translate3d(0, -1000px, 0)', offset: 0 }), + stylize({ opacity: 1, transform: 'scale3d(.475, .475, .475) translate3d(0, 60px, 0)', offset: 0.6 }), + stylize({ transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition("zoomInDown => void, " + options.igniter + " => zoomOutDown", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 1, transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)', offset: 0 }), + stylize({ transform: 'scale3d(.475, .475, .475) translate3d(0, 60px, 0)', offset: 0.4 }), + stylize({ opacity: 0, transform: 'scale3d(.1, .1, .1) translate3d(0, 1000px, 0)', offset: 1 }) + ])) + ]), + core_1.transition(options.igniter + " => zoomInLeft", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 0, transform: 'scale3d(.1, .1, .1) translate3d(-1000px, 0, 0)', offset: 0 }), + stylize({ opacity: 1, transform: 'scale3d(.475, .475, .475) translate3d(10px, 0, 0)', offset: 0.6 }), + stylize({ transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition("zoomInLeft => void, " + options.igniter + " => zoomOutRight", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 1, transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)', offset: 0 }), + stylize({ transform: 'scale3d(.475, .475, .475) translate3d(-10px, 0, 0)', offset: 0.6 }), + stylize({ opacity: 0, transform: 'scale3d(.1, .1, .1) translate3d(1000px, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition(options.igniter + " => zoomInRight", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 0, transform: 'scale3d(.1, .1, .1) translate3d(1000px, 0, 0)', offset: 0 }), + stylize({ opacity: 1, transform: 'scale3d(.475, .475, .475) translate3d(-10px, 0, 0)', offset: 0.6 }), + stylize({ transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition("zoomInRight => void, " + options.igniter + " => zoomOutLeft", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 1, transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)', offset: 0 }), + stylize({ transform: 'scale3d(.475, .475, .475) translate3d(10px, 0, 0)', offset: 0.6 }), + stylize({ opacity: 0, transform: 'scale3d(.1, .1, .1) translate3d(-1000px, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition(options.igniter + " => zoomInUp", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 0, transform: 'scale3d(.1, .1, .1) translate3d(0, 1000px, 0)', offset: 0 }), + stylize({ opacity: 1, transform: 'scale3d(.475, .475, .475) translate3d(0, -60px, 0)', offset: 0.6 }), + stylize({ transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)', offset: 1 }) + ])) + ]), + core_1.transition("zoomInUp => void, " + options.igniter + " => zoomOutUp", [ + core_1.animate(timing, core_1.keyframes([ + stylize({ opacity: 1, transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)', offset: 0 }), + stylize({ transform: 'scale3d(.475, .475, .475) translate3d(0, -60px, 0)', offset: 0.4 }), + stylize({ opacity: 0, transform: 'scale3d(.1, .1, .1) translate3d(0, -1000px, 0)', offset: 1 }) + ])) + ]) + ]; +}; +//# sourceMappingURL=zoom.js.map \ No newline at end of file diff --git a/dist/animations/zoom.js.map b/dist/animations/zoom.js.map new file mode 100644 index 0000000..fead06a --- /dev/null +++ b/dist/animations/zoom.js.map @@ -0,0 +1 @@ +{"version":3,"file":"zoom.js","sourceRoot":"","sources":["../../src/animations/zoom.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n style,\n state,\n transition,\n animate,\n keyframes,\n AnimationMetadata\n} from '@angular/core';\n\nexport const zoom = (timing: string, options): AnimationMetadata[] => {\n options = options || {}\n options.igniter = options.igniter || '*'\n\n function stylize(styleDef){\n return style( Object.assign(styleDef, options.whileStyle) )\n }\n\n return [\n state('zoomOut', style({\n display: 'none'\n })),\n state('zoomOutDown', style({\n display: 'none'\n })),\n state('zoomOutLeft', style({\n display: 'none'\n })),\n state('zoomOutRight', style({\n display: 'none'\n })),\n state('zoomOutUp', style({\n display: 'none'\n })),\n transition(`${options.igniter} => zoomIn`, [\n animate(timing, keyframes([\n stylize({opacity: 0, transform: 'scale3d(.1, .1, .1)', offset: 0}),\n stylize({opacity: 1, transform: 'scale3d(1, 1, 1)', offset: 1})\n ]))\n ]),\n transition(`zoomIn => void, ${options.igniter} => zoomOut`, [\n animate(timing, keyframes([\n stylize({opacity: 1, transform: 'scale3d(1, 1, 1)', offset: 0}),\n stylize({opacity: 0, transform: 'scale3d(.1, .1, .1)', offset: 1})\n ]))\n ]),\n transition(`${options.igniter} => zoomInDown`, [\n animate(timing, keyframes([\n stylize({opacity: 0, transform: 'scale3d(.1, .1, .1) translate3d(0, -1000px, 0)', offset: 0}),\n stylize({opacity: 1, transform: 'scale3d(.475, .475, .475) translate3d(0, 60px, 0)', offset: 0.6}),\n stylize({transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`zoomInDown => void, ${options.igniter} => zoomOutDown`, [\n animate(timing, keyframes([\n stylize({opacity: 1, transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)', offset: 0}),\n stylize({transform: 'scale3d(.475, .475, .475) translate3d(0, 60px, 0)', offset: 0.4}),\n stylize({opacity: 0, transform: 'scale3d(.1, .1, .1) translate3d(0, 1000px, 0)', offset: 1})\n ]))\n ]),\n transition(`${options.igniter} => zoomInLeft`, [\n animate(timing, keyframes([\n stylize({opacity: 0, transform: 'scale3d(.1, .1, .1) translate3d(-1000px, 0, 0)', offset: 0}),\n stylize({opacity: 1, transform: 'scale3d(.475, .475, .475) translate3d(10px, 0, 0)', offset: 0.6}),\n stylize({transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`zoomInLeft => void, ${options.igniter} => zoomOutRight`, [\n animate(timing, keyframes([\n stylize({opacity: 1, transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)', offset: 0}),\n stylize({transform: 'scale3d(.475, .475, .475) translate3d(-10px, 0, 0)', offset: 0.6}),\n stylize({opacity: 0, transform: 'scale3d(.1, .1, .1) translate3d(1000px, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`${options.igniter} => zoomInRight`, [\n animate(timing, keyframes([\n stylize({opacity: 0, transform: 'scale3d(.1, .1, .1) translate3d(1000px, 0, 0)', offset: 0}),\n stylize({opacity: 1, transform: 'scale3d(.475, .475, .475) translate3d(-10px, 0, 0)', offset: 0.6}),\n stylize({transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`zoomInRight => void, ${options.igniter} => zoomOutLeft`, [\n animate(timing, keyframes([\n stylize({opacity: 1, transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)', offset: 0}),\n stylize({transform: 'scale3d(.475, .475, .475) translate3d(10px, 0, 0)', offset: 0.6}),\n stylize({opacity: 0, transform: 'scale3d(.1, .1, .1) translate3d(-1000px, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`${options.igniter} => zoomInUp`, [\n animate(timing, keyframes([\n stylize({opacity: 0, transform: 'scale3d(.1, .1, .1) translate3d(0, 1000px, 0)', offset: 0}),\n stylize({opacity: 1, transform: 'scale3d(.475, .475, .475) translate3d(0, -60px, 0)', offset: 0.6}),\n stylize({transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)', offset: 1})\n ]))\n ]),\n transition(`zoomInUp => void, ${options.igniter} => zoomOutUp`, [\n animate(timing, keyframes([\n stylize({opacity: 1, transform: 'scale3d(1, 1, 1) translate3d(0, 0, 0)', offset: 0}),\n stylize({transform: 'scale3d(.475, .475, .475) translate3d(0, -60px, 0)', offset: 0.4}),\n stylize({opacity: 0, transform: 'scale3d(.1, .1, .1) translate3d(0, -1000px, 0)', offset: 1})\n ]))\n ])\n ]\n};"]} \ No newline at end of file diff --git a/dist/index.d.ts b/dist/index.d.ts new file mode 100644 index 0000000..0b785e3 --- /dev/null +++ b/dist/index.d.ts @@ -0,0 +1,12 @@ +import { AnimationEntryMetadata } from '@angular/core'; +export declare const animateDefaults: { + duration: number; + delay: number; + easing: string; + stagger: number; + name: string; + igniter: string; + whileStyle: {}; +}; +export declare const animateFactory: (duration: string | number, delay: string | number, easing: string, stagger: number, name: string) => AnimationEntryMetadata; +export declare const animateConfig: (config: any) => AnimationEntryMetadata; diff --git a/dist/index.js b/dist/index.js new file mode 100644 index 0000000..152bfac --- /dev/null +++ b/dist/index.js @@ -0,0 +1,47 @@ +"use strict"; +Object.defineProperty(exports, "__esModule", { value: true }); +var core_1 = require("@angular/core"); +var fade_1 = require("./animations/fade"); +var bounce_1 = require("./animations/bounce"); +var rotate_1 = require("./animations/rotate"); +var slide_1 = require("./animations/slide"); +var zoom_1 = require("./animations/zoom"); +exports.animateDefaults = { + duration: 500, + delay: 0, + easing: 'linear', + stagger: 0, + name: 'animate', + igniter: '*', + whileStyle: {} +}; +exports.animateFactory = function (duration, delay, easing, stagger, name) { + var config = { + duration: duration, + delay: delay, + easing: easing, + stagger: stagger, + name: name + }; + return exports.animateConfig(config); +}; +exports.animateConfig = function (config) { + config = config || {}; + config.duration = config.duration == null ? exports.animateDefaults.duration : config.duration; + config.delay = config.delay == null ? exports.animateDefaults.delay : config.delay; + config.easing = config.easing = null ? exports.animateDefaults.easing : config.easing; + config.stagger = config.stagger = null ? exports.animateDefaults.stagger : config.stagger; + config.name = config.name == null ? exports.animateDefaults.name : config.name; + config.igniter = config.igniter == null ? exports.animateDefaults.igniter : config.igniter; + config.whileStyle = config.whileStyle == null ? exports.animateDefaults.whileStyle : config.whileStyle; + if (config.stagger) { + console.log('ng2-animate does not support stagger as of this release'); + } + var timing = [ + typeof (config.duration) === 'number' ? config.duration + "ms" : config.duration, + typeof (config.delay) === 'number' ? config.delay + "ms" : config.delay, + config.easing + ].join(' '); + return core_1.trigger(config.name, fade_1.fade(timing, config).concat(bounce_1.bounce(timing, config), rotate_1.rotate(timing, config), slide_1.slide(timing, config), zoom_1.zoom(timing, config))); +}; +//# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/dist/index.js.map b/dist/index.js.map new file mode 100644 index 0000000..1731181 --- /dev/null +++ b/dist/index.js.map @@ -0,0 +1 @@ +{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;AAAA,sCAAgE;AAEhE,0CAAyC;AACzC,8CAA6C;AAC7C,8CAA6C;AAC7C,4CAA2C;AAC3C,0CAAyC;AAE5B,QAAA,eAAe,GAAG;IAC7B,QAAQ,EAAK,GAAG;IAChB,KAAK,EAAQ,CAAC;IACd,MAAM,EAAO,QAAQ;IACrB,OAAO,EAAM,CAAC;IACd,IAAI,EAAS,SAAS;IACtB,OAAO,EAAM,GAAG;IAChB,UAAU,EAAG,EAAE;CAChB,CAAA;AAEY,QAAA,cAAc,GAAG,UAAC,QAAuB,EAAE,KAAoB,EAAE,MAAc,EAAE,OAAe,EAAE,IAAY;IACxH,IAAM,MAAM,GAAG;QACd,QAAQ,EAAC,QAAQ;QACjB,KAAK,EAAC,KAAK;QACX,MAAM,EAAC,MAAM;QACb,OAAO,EAAC,OAAO;QACf,IAAI,EAAC,IAAI;KACT,CAAA;IACD,MAAM,CAAC,qBAAa,CAAC,MAAM,CAAC,CAAC;AAChC,CAAC,CAAC;AAEW,QAAA,aAAa,GAAG,UAAC,MAAM;IAClC,MAAM,GAAG,MAAM,IAAI,EAAE,CAAA;IACrB,MAAM,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,IAAE,IAAI,GAAG,uBAAe,CAAC,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAA;IACpF,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,IAAE,IAAI,GAAG,uBAAe,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;IACxE,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,GAAC,IAAI,GAAG,uBAAe,CAAC,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;IAC3E,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,GAAC,IAAI,GAAG,uBAAe,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAA;IAC/E,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,IAAE,IAAI,GAAG,uBAAe,CAAC,IAAI,GAAG,MAAM,CAAC,IAAI,CAAA;IACpE,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,IAAE,IAAI,GAAG,uBAAe,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAA;IAChF,MAAM,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,IAAE,IAAI,GAAG,uBAAe,CAAC,UAAU,GAAG,MAAM,CAAC,UAAU,CAAA;IAE5F,EAAE,CAAA,CAAC,MAAM,CAAC,OAAO,CAAC,CAAA,CAAC;QACjB,OAAO,CAAC,GAAG,CAAC,yDAAyD,CAAC,CAAA;IACxE,CAAC;IAED,IAAI,MAAM,GAAW;QACnB,OAAM,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,QAAQ,GAAM,MAAM,CAAC,QAAQ,OAAI,GAAG,MAAM,CAAC,QAAQ;QAC/E,OAAM,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,QAAQ,GAAM,MAAM,CAAC,KAAK,OAAI,GAAG,MAAM,CAAC,KAAK;QACtE,MAAM,CAAC,MAAM;KACd,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAEZ,MAAM,CAAC,cAAO,CAAC,MAAM,CAAC,IAAI,EACrB,WAAI,CAAC,MAAM,EAAE,MAAM,CAAC,QACpB,eAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACtB,eAAM,CAAC,MAAM,EAAE,MAAM,CAAC,EACtB,aAAK,CAAC,MAAM,EAAE,MAAM,CAAC,EACrB,WAAI,CAAC,MAAM,EAAE,MAAM,CAAC,EACvB,CAAC;AACL,CAAC,CAAC","sourcesContent":["import { trigger, AnimationEntryMetadata } from '@angular/core';\n\nimport { fade } from './animations/fade';\nimport { bounce } from './animations/bounce';\nimport { rotate } from './animations/rotate';\nimport { slide } from './animations/slide';\nimport { zoom } from './animations/zoom';\n\nexport const animateDefaults = {\n duration : 500,\n delay : 0,\n easing : 'linear',\n stagger : 0,\n name : 'animate',\n igniter : '*',\n whileStyle : {}\n}\n\nexport const animateFactory = (duration: string|number, delay: string|number, easing: string, stagger: number, name: string) => {\n const config = {\n duration:duration, \n delay:delay, \n easing:easing, \n stagger:stagger, \n name:name\n }\n return animateConfig(config);\n};\n\nexport const animateConfig = (config) => {\n config = config || {}\n config.duration = config.duration==null ? animateDefaults.duration : config.duration\n config.delay = config.delay==null ? animateDefaults.delay : config.delay\n config.easing = config.easing=null ? animateDefaults.easing : config.easing\n config.stagger = config.stagger=null ? animateDefaults.stagger : config.stagger\n config.name = config.name==null ? animateDefaults.name : config.name\n config.igniter = config.igniter==null ? animateDefaults.igniter : config.igniter\n config.whileStyle = config.whileStyle==null ? animateDefaults.whileStyle : config.whileStyle\n\n if(config.stagger){\n console.log('ng2-animate does not support stagger as of this release')\n }\n\n let timing: string = [\n typeof(config.duration) === 'number' ? `${config.duration}ms` : config.duration,\n typeof(config.delay) === 'number' ? `${config.delay}ms` : config.delay,\n config.easing\n ].join(' ');\n\n return trigger(config.name, [\n ...fade(timing, config),\n ...bounce(timing, config),\n ...rotate(timing, config),\n ...slide(timing, config),\n ...zoom(timing, config)\n ]);\n};"]} \ No newline at end of file diff --git a/example/dist/bundle.js b/example/dist/bundle.js index 806b94b..6fcb3fd 100644 --- a/example/dist/bundle.js +++ b/example/dist/bundle.js @@ -1,2 +1,2 @@ -webpackJsonp([0],{0:function(t,e,a){"use strict";var n=a(1),o=a(337);n.platformBrowserDynamic().bootstrapModule(o.AppModule)},337:function(t,e,a){"use strict";var n=this&&this.__decorate||function(t,e,a,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,a):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,a,n);else for(var f=t.length-1;f>=0;f--)(o=t[f])&&(r=(s<3?o(r):s>3?o(e,a,r):o(e,a))||r);return s>3&&r&&Object.defineProperty(e,a,r),r},o=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},s=a(11),r=a(203),f=a(338),i=a(376),l=function(){function t(){}return t=n([s.NgModule({imports:[r.BrowserModule,f.FormsModule],declarations:[i.AppComponent],bootstrap:[i.AppComponent]}),o("design:paramtypes",[])],t)}();e.AppModule=l},376:function(t,e,a){"use strict";var n=this&&this.__decorate||function(t,e,a,n){var o,s=arguments.length,r=s<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,a):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(t,e,a,n);else for(var f=t.length-1;f>=0;f--)(o=t[f])&&(r=(s<3?o(r):s>3?o(e,a,r):o(e,a))||r);return s>3&&r&&Object.defineProperty(e,a,r),r},o=this&&this.__metadata||function(t,e){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(t,e)},s=a(11),r=a(377),f=function(){function t(){this.show=!0,this.state="",this.inAnimations=["fadeIn","fadeInDown","fadeInLeft","fadeInRight","fadeInUp","bounceIn","bounceInDown","bounceInLeft","bounceInRight","bounceInUp","rotateIn","rotateInDownLeft","rotateInDownRight","rotateInUpLeft","rotateInUpRight","slideInDown","slideInLeft","slideInRight","slideInUp","zoomIn","zoomInDown","zoomInLeft","zoomInRight","zoomInUp"],this.outAnimations=["fadeOut","fadeOutDown","fadeOutLeft","fadeOutRight","fadeOutUp","bounceOut","bounceOutDown","bounceOutLeft","bounceOutRight","bounceOutUp","rotateOut","rotateOutDownLeft","rotateOutDownRight","rotateOutUpLeft","rotateOutUpRight","slideOutDown","slideOutLeft","slideOutRight","slideOutUp","zoomOut","zoomOutDown","zoomOutLeft","zoomOutRight","zoomOutUp"],this.inAnimations=this.inAnimations.map(function(t){return{key:t,show:!0,bg:Math.floor(16777215*Math.random()).toString(16)}}),this.outAnimations=this.outAnimations.map(function(t){return{key:t,bg:Math.floor(16777215*Math.random()).toString(16)}})}return t.prototype.onToggleInAll=function(){this.inAnimations.forEach(function(t){return t.show=!t.show})},t.prototype.onToggleOutAll=function(){this.outAnimations.forEach(function(t){t.state=t.state?"":t.key})},t.prototype.onToggleOutItem=function(t){t.state=t.state?"":t.key},t=n([s.Component({selector:"app",template:a(383),styles:[a(384)],animations:[r.animateFactory(500)]}),o("design:paramtypes",[])],t)}();e.AppComponent=f},377:function(t,e,a){"use strict";var n=a(11),o=a(378),s=a(379),r=a(380),f=a(381),i=a(382);e.animateFactory=function(t,e,a){void 0===t&&(t=500),void 0===e&&(e=0),void 0===a&&(a="linear");var l=["number"==typeof t?t+"ms":t,"number"==typeof e?e+"ms":e,a].join(" ");return n.trigger("animate",o.fade(l).concat(s.bounce(l),r.rotate(l),f.slide(l),i.zoom(l)))}},378:function(t,e,a){"use strict";var n=a(11);e.fade=function(t){return[n.state("fadeOut",n.style({display:"none"})),n.state("fadeOutDown",n.style({display:"none"})),n.state("fadeOutLeft",n.style({display:"none"})),n.state("fadeOutRight",n.style({display:"none"})),n.state("fadeOutUp",n.style({display:"none"})),n.transition("* => fadeIn",[n.animate(t,n.keyframes([n.style({opacity:0,offset:0}),n.style({opacity:1,offset:1})]))]),n.transition("fadeIn => void, * => fadeOut",[n.animate(t,n.keyframes([n.style({opacity:1,offset:0}),n.style({opacity:0,offset:1})]))]),n.transition("* => fadeInDown",[n.animate(t,n.keyframes([n.style({opacity:0,transform:"translate3d(0, -100%, 0)",offset:0}),n.style({opacity:1,transform:"translate3d(0, 0, 0)",offset:1})]))]),n.transition("fadeInDown => void, * => fadeOutDown",[n.animate(t,n.keyframes([n.style({opacity:1,transform:"translate3d(0, 0, 0)",offset:0}),n.style({opacity:0,transform:"translate3d(0, 100%, 0)",offset:1})]))]),n.transition("* => fadeInLeft",[n.animate(t,n.keyframes([n.style({opacity:0,transform:"translate3d(-100%, 0, 0)",offset:0}),n.style({opacity:1,transform:"translate3d(0, 0, 0)",offset:1})]))]),n.transition("fadeInLeft => void, * => fadeOutRight",[n.animate(t,n.keyframes([n.style({opacity:1,transform:"translate3d(0, 0, 0)",offset:0}),n.style({opacity:0,transform:"translate3d(100%, 0, 0)",offset:1})]))]),n.transition("* => fadeInRight",[n.animate(t,n.keyframes([n.style({opacity:0,transform:"translate3d(100%, 0, 0)",offset:0}),n.style({opacity:1,transform:"translate3d(0, 0, 0)",offset:1})]))]),n.transition("fadeInRight => void, * => fadeOutLeft",[n.animate(t,n.keyframes([n.style({opacity:1,transform:"translate3d(0, 0, 0)",offset:0}),n.style({opacity:0,transform:"translate3d(-100%, 0, 0)",offset:1})]))]),n.transition("* => fadeInUp",[n.animate(t,n.keyframes([n.style({opacity:0,transform:"translate3d(0, 100%, 0)",offset:0}),n.style({opacity:1,transform:"translate3d(0, 0, 0)",offset:1})]))]),n.transition("fadeInUp => void, * => fadeOutUp",[n.animate(t,n.keyframes([n.style({opacity:1,transform:"translate3d(0, 0, 0)",offset:0}),n.style({opacity:0,transform:"translate3d(0, -100%, 0)",offset:1})]))])]}},379:function(t,e,a){"use strict";var n=a(11);e.bounce=function(t){return[n.state("bounceOut",n.style({display:"none"})),n.state("bounceOutDown",n.style({display:"none"})),n.state("bounceOutLeft",n.style({display:"none"})),n.state("bounceOutRight",n.style({display:"none"})),n.state("bounceOutUp",n.style({display:"none"})),n.transition("* => bounceIn",[n.animate(t,n.keyframes([n.style({opacity:0,transform:"scale3d(.3, .3, .3)",offset:0}),n.style({transform:"scale3d(1.1, 1.1, 1.1)",offset:.2}),n.style({transform:"scale3d(.9, .9, .9)",offset:.4}),n.style({transform:"scale3d(1.03, 1.03, 1.03)",offset:.6}),n.style({transform:"scale3d(.97, .97, .97)",offset:.8}),n.style({opacity:1,transform:"scale3d(1, 1, 1)",offset:1})]))]),n.transition("bounceIn => void, * => bounceOut",[n.animate(t,n.keyframes([n.style({transform:"scale3d(.9, .9, .9)",offset:.2}),n.style({opacity:1,transform:"scale3d(1.1, 1.1, 1.1)",offset:.5}),n.style({opacity:0,transform:"scale3d(.3, .3, .3)",offset:1})]))]),n.transition("* => bounceInDown",[n.animate(t,n.keyframes([n.style({opacity:0,transform:"translate3d(0, -1000px, 0)",offset:0}),n.style({opacity:1,transform:"translate3d(0, 20px, 0)",offset:.6}),n.style({transform:"translate3d(0, -10px, 0)",offset:.75}),n.style({transform:"translate3d(0, 5px, 0)",offset:.9}),n.style({transform:"translate3d(0, 0, 0)",offset:1})]))]),n.transition("bounceInDown => void, * => bounceOutDown",[n.animate(t,n.keyframes([n.style({transform:"translate3d(0, 10px, 0)",offset:.2}),n.style({opacity:1,transform:"translate3d(0, -20px, 0)",offset:.5}),n.style({opacity:0,transform:"translate3d(0, 1000px, 0)",offset:1})]))]),n.transition("* => bounceInLeft",[n.animate(t,n.keyframes([n.style({opacity:0,transform:"translate3d(-1000px, 0, 0)",offset:0}),n.style({opacity:1,transform:"translate3d(20px, 0, 0)",offset:.6}),n.style({transform:"translate3d(-10px, 0, 0)",offset:.75}),n.style({transform:"translate3d(5px, 0, 0)",offset:.9}),n.style({transform:"translate3d(0, 0, 0)",offset:1})]))]),n.transition("bounceInLeft => void, * => bounceOutRight",[n.animate(t,n.keyframes([n.style({opacity:1,transform:"translate3d(-20px, 0, 0)",offset:.2}),n.style({opacity:0,transform:"translate3d(1000px, 0, 0)",offset:1})]))]),n.transition("* => bounceInRight",[n.animate(t,n.keyframes([n.style({opacity:0,transform:"translate3d(1000px, 0, 0)",offset:0}),n.style({opacity:1,transform:"translate3d(-20px, 0, 0)",offset:.6}),n.style({transform:"translate3d(10px, 0, 0)",offset:.75}),n.style({transform:"translate3d(-5px, 0, 0)",offset:.9}),n.style({transform:"translate3d(0, 0, 0)",offset:1})]))]),n.transition("bounceInRight => void, * => bounceOutLeft",[n.animate(t,n.keyframes([n.style({opacity:1,transform:"translate3d(20px, 0, 0)",offset:.2}),n.style({opacity:0,transform:"translate3d(-1000px, 0, 0)",offset:1})]))]),n.transition("* => bounceInUp",[n.animate(t,n.keyframes([n.style({opacity:0,transform:"translate3d(0, 1000px, 0)",offset:0}),n.style({opacity:1,transform:"translate3d(0, -20px, 0)",offset:.6}),n.style({transform:"translate3d(0, 10px, 0)",offset:.75}),n.style({transform:"translate3d(0, -5px, 0)",offset:.9}),n.style({transform:"translate3d(0, 0, 0)",offset:1})]))]),n.transition("bounceInUp => void, * => bounceOutUp",[n.animate(t,n.keyframes([n.style({transform:"translate3d(0, -10px, 0)",offset:.2}),n.style({opacity:1,transform:"translate3d(0, 20px, 0)",offset:.5}),n.style({opacity:0,transform:"translate3d(0, -1000px, 0)",offset:1})]))])]}},380:function(t,e,a){"use strict";var n=a(11);e.rotate=function(t){return[n.state("rotateOut",n.style({display:"none"})),n.state("rotateOutDownLeft",n.style({display:"none"})),n.state("rotateOutDownRight",n.style({display:"none"})),n.state("rotateOutUpLeft",n.style({display:"none"})),n.state("rotateOutUpRight",n.style({display:"none"})),n.transition("* => rotateIn",[n.animate(t,n.keyframes([n.style({opacity:0,transformOrigin:"center",transform:"rotate3d(0, 0, 1, -200deg)",offset:0}),n.style({opacity:1,transformOrigin:"center",transform:"rotate3d(0, 0, 1, 0deg)",offset:1})]))]),n.transition("rotateIn => void, * => rotateOut",[n.animate(t,n.keyframes([n.style({opacity:1,transformOrigin:"center",transform:"rotate3d(0, 0, 1, 0deg)",offset:0}),n.style({opacity:0,transformOrigin:"center",transform:"rotate3d(0, 0, 1, 200deg)",offset:1})]))]),n.transition("* => rotateInDownLeft",[n.animate(t,n.keyframes([n.style({opacity:0,transformOrigin:"left bottom",transform:"rotate3d(0, 0, 1, -45deg)",offset:0}),n.style({opacity:1,transformOrigin:"left bottom",transform:"rotate3d(0, 0, 1, 0deg)",offset:1})]))]),n.transition("rotateInDownLeft => void, * => rotateOutDownLeft",[n.animate(t,n.keyframes([n.style({opacity:1,transformOrigin:"left bottom",transform:"rotate3d(0, 0, 1, 0deg)",offset:0}),n.style({opacity:0,transformOrigin:"left bottom",transform:"rotate3d(0, 0, 1, 45deg)",offset:1})]))]),n.transition("* => rotateInDownRight",[n.animate(t,n.keyframes([n.style({opacity:0,transformOrigin:"right bottom",transform:"rotate3d(0, 0, 1, 45deg)",offset:0}),n.style({opacity:1,transformOrigin:"right bottom",transform:"rotate3d(0, 0, 1, 0deg)",offset:1})]))]),n.transition("rotateInDownRight => void, * => rotateOutDownRight",[n.animate(t,n.keyframes([n.style({opacity:1,transformOrigin:"right bottom",transform:"rotate3d(0, 0, 1, 0deg)",offset:0}),n.style({opacity:0,transformOrigin:"right bottom",transform:"rotate3d(0, 0, 1, -45deg)",offset:1})]))]),n.transition("* => rotateInUpLeft",[n.animate(t,n.keyframes([n.style({opacity:0,transformOrigin:"left bottom",transform:"rotate3d(0, 0, 1, 45deg)",offset:0}),n.style({opacity:1,transformOrigin:"left bottom",transform:"rotate3d(0, 0, 1, 0deg)",offset:1})]))]),n.transition("rotateInUpLeft => void, * => rotateOutUpLeft",[n.animate(t,n.keyframes([n.style({opacity:1,transformOrigin:"left bottom",transform:"rotate3d(0, 0, 1, 0deg)",offset:0}),n.style({opacity:0,transformOrigin:"left bottom",transform:"rotate3d(0, 0, 1, -45deg)",offset:1})]))]),n.transition("* => rotateInUpRight",[n.animate(t,n.keyframes([n.style({opacity:0,transformOrigin:"right bottom",transform:"rotate3d(0, 0, 1, -45deg)",offset:0}),n.style({opacity:1,transformOrigin:"right bottom",transform:"rotate3d(0, 0, 1, 0deg)",offset:1})]))]),n.transition("rotateInUpRight => void, * => rotateOutUpRight",[n.animate(t,n.keyframes([n.style({opacity:1,transformOrigin:"right bottom",transform:"rotate3d(0, 0, 1, 0deg)",offset:0}),n.style({opacity:0,transformOrigin:"right bottom",transform:"rotate3d(0, 0, 1, 45deg)",offset:1})]))])]}},381:function(t,e,a){"use strict";var n=a(11);e.slide=function(t){return[n.state("slideOutDown",n.style({display:"none"})),n.state("slideOutLeft",n.style({display:"none"})),n.state("slideOutRight",n.style({display:"none"})),n.state("slideOutUp",n.style({display:"none"})),n.transition("* => slideInDown",[n.animate(t,n.keyframes([n.style({transform:"translate3d(0, -100%, 0)",offset:0}),n.style({transform:"translate3d(0, 0, 0)",offset:1})]))]),n.transition("slideInDown => void, * => slideOutDown",[n.animate(t,n.keyframes([n.style({transform:"translate3d(0, 0, 0)",offset:0}),n.style({transform:"translate3d(0, 100%, 0)",offset:1})]))]),n.transition("* => slideInLeft",[n.animate(t,n.keyframes([n.style({transform:"translate3d(-100%, 0, 0)",offset:0}),n.style({transform:"translate3d(0, 0, 0)",offset:1})]))]),n.transition("slideInLeft => void, * => slideOutRight",[n.animate(t,n.keyframes([n.style({transform:"translate3d(0, 0, 0)",offset:0}),n.style({transform:"translate3d(100%, 0, 0)",offset:1})]))]),n.transition("* => slideInRight",[n.animate(t,n.keyframes([n.style({transform:"translate3d(100%, 0, 0)",offset:0}),n.style({transform:"translate3d(0, 0, 0)",offset:1})]))]),n.transition("slideInRight => void, * => slideOutLeft",[n.animate(t,n.keyframes([n.style({transform:"translate3d(0, 0, 0)",offset:0}),n.style({transform:"translate3d(-100%, 0, 0)",offset:1})]))]),n.transition("* => slideInUp",[n.animate(t,n.keyframes([n.style({transform:"translate3d(0, 100%, 0)",offset:0}),n.style({transform:"translate3d(0, 0, 0)",offset:1})]))]),n.transition("slideInUp => void, * => slideOutUp",[n.animate(t,n.keyframes([n.style({transform:"translate3d(0, 0, 0)",offset:0}),n.style({transform:"translate3d(0, -100%, 0)",offset:1})]))])]}},382:function(t,e,a){"use strict";var n=a(11);e.zoom=function(t){return[n.state("zoomOut",n.style({display:"none"})),n.state("zoomOutDown",n.style({display:"none"})),n.state("zoomOutLeft",n.style({display:"none"})),n.state("zoomOutRight",n.style({display:"none"})),n.state("zoomOutUp",n.style({display:"none"})),n.transition("* => zoomIn",[n.animate(t,n.keyframes([n.style({opacity:0,transform:"scale3d(.1, .1, .1)",offset:0}),n.style({opacity:1,transform:"scale3d(1, 1, 1)",offset:1})]))]),n.transition("zoomIn => void, * => zoomOut",[n.animate(t,n.keyframes([n.style({opacity:1,transform:"scale3d(1, 1, 1)",offset:0}),n.style({opacity:0,transform:"scale3d(.1, .1, .1)",offset:1})]))]),n.transition("* => zoomInDown",[n.animate(t,n.keyframes([n.style({opacity:0,transform:"scale3d(.1, .1, .1) translate3d(0, -1000px, 0)",offset:0}),n.style({opacity:1,transform:"scale3d(.475, .475, .475) translate3d(0, 60px, 0)",offset:.6}),n.style({transform:"scale3d(1, 1, 1) translate3d(0, 0, 0)",offset:1})]))]),n.transition("zoomInDown => void, * => zoomOutDown",[n.animate(t,n.keyframes([n.style({opacity:1,transform:"scale3d(1, 1, 1) translate3d(0, 0, 0)",offset:0}),n.style({transform:"scale3d(.475, .475, .475) translate3d(0, 60px, 0)",offset:.4}),n.style({opacity:0,transform:"scale3d(.1, .1, .1) translate3d(0, 1000px, 0)",offset:1})]))]),n.transition("* => zoomInLeft",[n.animate(t,n.keyframes([n.style({opacity:0,transform:"scale3d(.1, .1, .1) translate3d(-1000px, 0, 0)",offset:0}),n.style({opacity:1,transform:"scale3d(.475, .475, .475) translate3d(10px, 0, 0)",offset:.6}),n.style({transform:"scale3d(1, 1, 1) translate3d(0, 0, 0)",offset:1})]))]),n.transition("zoomInLeft => void, * => zoomOutRight",[n.animate(t,n.keyframes([n.style({opacity:1,transform:"scale3d(1, 1, 1) translate3d(0, 0, 0)",offset:0}),n.style({transform:"scale3d(.475, .475, .475) translate3d(-10px, 0, 0)",offset:.6}),n.style({opacity:0,transform:"scale3d(.1, .1, .1) translate3d(1000px, 0, 0)",offset:1})]))]),n.transition("* => zoomInRight",[n.animate(t,n.keyframes([n.style({opacity:0,transform:"scale3d(.1, .1, .1) translate3d(1000px, 0, 0)",offset:0}),n.style({opacity:1,transform:"scale3d(.475, .475, .475) translate3d(-10px, 0, 0)",offset:.6}),n.style({transform:"scale3d(1, 1, 1) translate3d(0, 0, 0)",offset:1})]))]),n.transition("zoomInRight => void, * => zoomOutLeft",[n.animate(t,n.keyframes([n.style({opacity:1,transform:"scale3d(1, 1, 1) translate3d(0, 0, 0)",offset:0}),n.style({transform:"scale3d(.475, .475, .475) translate3d(10px, 0, 0)",offset:.6}),n.style({opacity:0,transform:"scale3d(.1, .1, .1) translate3d(-1000px, 0, 0)",offset:1})]))]),n.transition("* => zoomInUp",[n.animate(t,n.keyframes([n.style({opacity:0,transform:"scale3d(.1, .1, .1) translate3d(0, 1000px, 0)",offset:0}),n.style({opacity:1,transform:"scale3d(.475, .475, .475) translate3d(0, -60px, 0)",offset:.6}),n.style({transform:"scale3d(1, 1, 1) translate3d(0, 0, 0)",offset:1})]))]),n.transition("zoomInUp => void, * => zoomOutUp",[n.animate(t,n.keyframes([n.style({opacity:1,transform:"scale3d(1, 1, 1) translate3d(0, 0, 0)",offset:0}),n.style({transform:"scale3d(.475, .475, .475) translate3d(0, -60px, 0)",offset:.4}),n.style({opacity:0,transform:"scale3d(.1, .1, .1) translate3d(0, -1000px, 0)",offset:1})]))])]}},383:function(t,e){t.exports='\n View on GitHub\n
\n\n\n View on GitHub\n
\n\n\\n View on GitHub\\n
\\n\\n\\n View on GitHub\\n
\\n\\n\\n View on GitHub\\n
\\n\\n\\n View on GitHub\\n
\\n\\n{ICU message}
` would produce two messages:\n\t * - one for the content with meaning and description,\n\t * - another one for the ICU message.\n\t *\n\t * In this case the last message is discarded as it contains less information (the AST is\n\t * otherwise identical).\n\t *\n\t * Note that we should still keep messages extracted from attributes inside the section (ie in the\n\t * ICU message here)\n\t */\n\t _Visitor.prototype._closeTranslatableSection = function (node, directChildren) {\n\t if (!this._isInTranslatableSection) {\n\t this._reportError(node, 'Unexpected section end');\n\t return;\n\t }\n\t var startIndex = this._msgCountAtSectionStart;\n\t var significantChildren = directChildren.reduce(function (count, node) { return count + (node instanceof html.Comment ? 0 : 1); }, 0);\n\t if (significantChildren == 1) {\n\t for (var i = this._messages.length - 1; i >= startIndex; i--) {\n\t var ast = this._messages[i].nodes;\n\t if (!(ast.length == 1 && ast[0] instanceof i18n.Text)) {\n\t this._messages.splice(i, 1);\n\t break;\n\t }\n\t }\n\t }\n\t this._msgCountAtSectionStart = void 0;\n\t };\n\t _Visitor.prototype._reportError = function (node, msg) {\n\t this._errors.push(new parse_util_1.I18nError(node.sourceSpan, msg));\n\t };\n\t return _Visitor;\n\t}());\n\tfunction _isOpeningComment(n) {\n\t return n instanceof html.Comment && n.value && n.value.startsWith('i18n');\n\t}\n\tfunction _isClosingComment(n) {\n\t return n instanceof html.Comment && n.value && n.value === '/i18n';\n\t}\n\tfunction _getI18nAttr(p) {\n\t return p.attrs.find(function (attr) { return attr.name === _I18N_ATTR; }) || null;\n\t}\n\tfunction _splitMeaningAndDesc(i18n) {\n\t if (!i18n)\n\t return ['', ''];\n\t var pipeIndex = i18n.indexOf('|');\n\t return pipeIndex == -1 ? ['', i18n] : [i18n.slice(0, pipeIndex), i18n.slice(pipeIndex + 1)];\n\t}\n\t//# sourceMappingURL=extractor_merger.js.map\n\n/***/ },\n/* 7 */\n/***/ function(module, exports) {\n\n\t/**\n\t * @license\n\t * Copyright Google Inc. All Rights Reserved.\n\t *\n\t * Use of this source code is governed by an MIT-style license that can be\n\t * found in the LICENSE file at https://angular.io/license\n\t */\n\t\"use strict\";\n\tvar Text = (function () {\n\t function Text(value, sourceSpan) {\n\t this.value = value;\n\t this.sourceSpan = sourceSpan;\n\t }\n\t Text.prototype.visit = function (visitor, context) { return visitor.visitText(this, context); };\n\t return Text;\n\t}());\n\texports.Text = Text;\n\tvar Expansion = (function () {\n\t function Expansion(switchValue, type, cases, sourceSpan, switchValueSourceSpan) {\n\t this.switchValue = switchValue;\n\t this.type = type;\n\t this.cases = cases;\n\t this.sourceSpan = sourceSpan;\n\t this.switchValueSourceSpan = switchValueSourceSpan;\n\t }\n\t Expansion.prototype.visit = function (visitor, context) { return visitor.visitExpansion(this, context); };\n\t return Expansion;\n\t}());\n\texports.Expansion = Expansion;\n\tvar ExpansionCase = (function () {\n\t function ExpansionCase(value, expression, sourceSpan, valueSourceSpan, expSourceSpan) {\n\t this.value = value;\n\t this.expression = expression;\n\t this.sourceSpan = sourceSpan;\n\t this.valueSourceSpan = valueSourceSpan;\n\t this.expSourceSpan = expSourceSpan;\n\t }\n\t ExpansionCase.prototype.visit = function (visitor, context) { return visitor.visitExpansionCase(this, context); };\n\t return ExpansionCase;\n\t}());\n\texports.ExpansionCase = ExpansionCase;\n\tvar Attribute = (function () {\n\t function Attribute(name, value, sourceSpan) {\n\t this.name = name;\n\t this.value = value;\n\t this.sourceSpan = sourceSpan;\n\t }\n\t Attribute.prototype.visit = function (visitor, context) { return visitor.visitAttribute(this, context); };\n\t return Attribute;\n\t}());\n\texports.Attribute = Attribute;\n\tvar Element = (function () {\n\t function Element(name, attrs, children, sourceSpan, startSourceSpan, endSourceSpan) {\n\t this.name = name;\n\t this.attrs = attrs;\n\t this.children = children;\n\t this.sourceSpan = sourceSpan;\n\t this.startSourceSpan = startSourceSpan;\n\t this.endSourceSpan = endSourceSpan;\n\t }\n\t Element.prototype.visit = function (visitor, context) { return visitor.visitElement(this, context); };\n\t return Element;\n\t}());\n\texports.Element = Element;\n\tvar Comment = (function () {\n\t function Comment(value, sourceSpan) {\n\t this.value = value;\n\t this.sourceSpan = sourceSpan;\n\t }\n\t Comment.prototype.visit = function (visitor, context) { return visitor.visitComment(this, context); };\n\t return Comment;\n\t}());\n\texports.Comment = Comment;\n\tfunction visitAll(visitor, nodes, context) {\n\t if (context === void 0) { context = null; }\n\t var result = [];\n\t nodes.forEach(function (ast) {\n\t var astResult = ast.visit(visitor, context);\n\t if (astResult) {\n\t result.push(astResult);\n\t }\n\t });\n\t return result;\n\t}\n\texports.visitAll = visitAll;\n\t//# sourceMappingURL=ast.js.map\n\n/***/ },\n/* 8 */\n/***/ function(module, exports) {\n\n\t/**\n\t * @license\n\t * Copyright Google Inc. All Rights Reserved.\n\t *\n\t * Use of this source code is governed by an MIT-style license that can be\n\t * found in the LICENSE file at https://angular.io/license\n\t */\n\t\"use strict\";\n\tvar Message = (function () {\n\t function Message(nodes, placeholders, meaning, description) {\n\t this.nodes = nodes;\n\t this.placeholders = placeholders;\n\t this.meaning = meaning;\n\t this.description = description;\n\t }\n\t return Message;\n\t}());\n\texports.Message = Message;\n\tvar Text = (function () {\n\t function Text(value, sourceSpan) {\n\t this.value = value;\n\t this.sourceSpan = sourceSpan;\n\t }\n\t Text.prototype.visit = function (visitor, context) { return visitor.visitText(this, context); };\n\t return Text;\n\t}());\n\texports.Text = Text;\n\tvar Container = (function () {\n\t function Container(children, sourceSpan) {\n\t this.children = children;\n\t this.sourceSpan = sourceSpan;\n\t }\n\t Container.prototype.visit = function (visitor, context) { return visitor.visitContainer(this, context); };\n\t return Container;\n\t}());\n\texports.Container = Container;\n\tvar Icu = (function () {\n\t function Icu(expression, type, cases, sourceSpan) {\n\t this.expression = expression;\n\t this.type = type;\n\t this.cases = cases;\n\t this.sourceSpan = sourceSpan;\n\t }\n\t Icu.prototype.visit = function (visitor, context) { return visitor.visitIcu(this, context); };\n\t return Icu;\n\t}());\n\texports.Icu = Icu;\n\tvar TagPlaceholder = (function () {\n\t function TagPlaceholder(tag, attrs, startName, closeName, children, isVoid, sourceSpan) {\n\t this.tag = tag;\n\t this.attrs = attrs;\n\t this.startName = startName;\n\t this.closeName = closeName;\n\t this.children = children;\n\t this.isVoid = isVoid;\n\t this.sourceSpan = sourceSpan;\n\t }\n\t TagPlaceholder.prototype.visit = function (visitor, context) { return visitor.visitTagPlaceholder(this, context); };\n\t return TagPlaceholder;\n\t}());\n\texports.TagPlaceholder = TagPlaceholder;\n\tvar Placeholder = (function () {\n\t function Placeholder(value, name, sourceSpan) {\n\t if (name === void 0) { name = ''; }\n\t this.value = value;\n\t this.name = name;\n\t this.sourceSpan = sourceSpan;\n\t }\n\t Placeholder.prototype.visit = function (visitor, context) { return visitor.visitPlaceholder(this, context); };\n\t return Placeholder;\n\t}());\n\texports.Placeholder = Placeholder;\n\tvar IcuPlaceholder = (function () {\n\t function IcuPlaceholder(value, name, sourceSpan) {\n\t if (name === void 0) { name = ''; }\n\t this.value = value;\n\t this.name = name;\n\t this.sourceSpan = sourceSpan;\n\t }\n\t IcuPlaceholder.prototype.visit = function (visitor, context) { return visitor.visitIcuPlaceholder(this, context); };\n\t return IcuPlaceholder;\n\t}());\n\texports.IcuPlaceholder = IcuPlaceholder;\n\t//# sourceMappingURL=i18n_ast.js.map\n\n/***/ },\n/* 9 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t/**\n\t * @license\n\t * Copyright Google Inc. All Rights Reserved.\n\t *\n\t * Use of this source code is governed by an MIT-style license that can be\n\t * found in the LICENSE file at https://angular.io/license\n\t */\n\t\"use strict\";\n\tvar lexer_1 = __webpack_require__(10);\n\tvar parser_1 = __webpack_require__(124);\n\tvar html = __webpack_require__(7);\n\tvar html_tags_1 = __webpack_require__(129);\n\tvar i18n = __webpack_require__(8);\n\tvar placeholder_1 = __webpack_require__(131);\n\tvar _expParser = new parser_1.Parser(new lexer_1.Lexer());\n\t/**\n\t * Returns a function converting html Messages to i18n Messages given an interpolationConfig\n\t */\n\tfunction createI18nMessageFactory(interpolationConfig) {\n\t var visitor = new _I18nVisitor(_expParser, interpolationConfig);\n\t return function (nodes, meaning, description) {\n\t return visitor.toI18nMessage(nodes, meaning, description);\n\t };\n\t}\n\texports.createI18nMessageFactory = createI18nMessageFactory;\n\tvar _I18nVisitor = (function () {\n\t function _I18nVisitor(_expressionParser, _interpolationConfig) {\n\t this._expressionParser = _expressionParser;\n\t this._interpolationConfig = _interpolationConfig;\n\t }\n\t _I18nVisitor.prototype.toI18nMessage = function (nodes, meaning, description) {\n\t this._isIcu = nodes.length == 1 && nodes[0] instanceof html.Expansion;\n\t this._icuDepth = 0;\n\t this._placeholderRegistry = new placeholder_1.PlaceholderRegistry();\n\t this._placeholderToContent = {};\n\t var i18nodes = html.visitAll(this, nodes, {});\n\t return new i18n.Message(i18nodes, this._placeholderToContent, meaning, description);\n\t };\n\t _I18nVisitor.prototype.visitElement = function (el, context) {\n\t var children = html.visitAll(this, el.children);\n\t var attrs = {};\n\t el.attrs.forEach(function (attr) {\n\t // Do not visit the attributes, translatable ones are top-level ASTs\n\t attrs[attr.name] = attr.value;\n\t });\n\t var isVoid = html_tags_1.getHtmlTagDefinition(el.name).isVoid;\n\t var startPhName = this._placeholderRegistry.getStartTagPlaceholderName(el.name, attrs, isVoid);\n\t this._placeholderToContent[startPhName] = el.sourceSpan.toString();\n\t var closePhName = '';\n\t if (!isVoid) {\n\t closePhName = this._placeholderRegistry.getCloseTagPlaceholderName(el.name);\n\t this._placeholderToContent[closePhName] = \"\" + el.name + \">\";\n\t }\n\t return new i18n.TagPlaceholder(el.name, attrs, startPhName, closePhName, children, isVoid, el.sourceSpan);\n\t };\n\t _I18nVisitor.prototype.visitAttribute = function (attribute, context) {\n\t return this._visitTextWithInterpolation(attribute.value, attribute.sourceSpan);\n\t };\n\t _I18nVisitor.prototype.visitText = function (text, context) {\n\t return this._visitTextWithInterpolation(text.value, text.sourceSpan);\n\t };\n\t _I18nVisitor.prototype.visitComment = function (comment, context) { return null; };\n\t _I18nVisitor.prototype.visitExpansion = function (icu, context) {\n\t var _this = this;\n\t this._icuDepth++;\n\t var i18nIcuCases = {};\n\t var i18nIcu = new i18n.Icu(icu.switchValue, icu.type, i18nIcuCases, icu.sourceSpan);\n\t icu.cases.forEach(function (caze) {\n\t i18nIcuCases[caze.value] = new i18n.Container(caze.expression.map(function (node) { return node.visit(_this, {}); }), caze.expSourceSpan);\n\t });\n\t this._icuDepth--;\n\t if (this._isIcu || this._icuDepth > 0) {\n\t // If the message (vs a part of the message) is an ICU message returns it\n\t return i18nIcu;\n\t }\n\t // else returns a placeholder\n\t var phName = this._placeholderRegistry.getPlaceholderName('ICU', icu.sourceSpan.toString());\n\t this._placeholderToContent[phName] = icu.sourceSpan.toString();\n\t return new i18n.IcuPlaceholder(i18nIcu, phName, icu.sourceSpan);\n\t };\n\t _I18nVisitor.prototype.visitExpansionCase = function (icuCase, context) {\n\t throw new Error('Unreachable code');\n\t };\n\t _I18nVisitor.prototype._visitTextWithInterpolation = function (text, sourceSpan) {\n\t var splitInterpolation = this._expressionParser.splitInterpolation(text, sourceSpan.start.toString(), this._interpolationConfig);\n\t if (!splitInterpolation) {\n\t // No expression, return a single text\n\t return new i18n.Text(text, sourceSpan);\n\t }\n\t // Return a group of text + expressions\n\t var nodes = [];\n\t var container = new i18n.Container(nodes, sourceSpan);\n\t var _a = this._interpolationConfig, sDelimiter = _a.start, eDelimiter = _a.end;\n\t for (var i = 0; i < splitInterpolation.strings.length - 1; i++) {\n\t var expression = splitInterpolation.expressions[i];\n\t var baseName = _extractPlaceholderName(expression) || 'INTERPOLATION';\n\t var phName = this._placeholderRegistry.getPlaceholderName(baseName, expression);\n\t if (splitInterpolation.strings[i].length) {\n\t // No need to add empty strings\n\t nodes.push(new i18n.Text(splitInterpolation.strings[i], sourceSpan));\n\t }\n\t nodes.push(new i18n.Placeholder(expression, phName, sourceSpan));\n\t this._placeholderToContent[phName] = sDelimiter + expression + eDelimiter;\n\t }\n\t // The last index contains no expression\n\t var lastStringIdx = splitInterpolation.strings.length - 1;\n\t if (splitInterpolation.strings[lastStringIdx].length) {\n\t nodes.push(new i18n.Text(splitInterpolation.strings[lastStringIdx], sourceSpan));\n\t }\n\t return container;\n\t };\n\t return _I18nVisitor;\n\t}());\n\tvar _CUSTOM_PH_EXP = /\\/\\/[\\s\\S]*i18n[\\s\\S]*\\([\\s\\S]*ph[\\s\\S]*=[\\s\\S]*\"([\\s\\S]*?)\"[\\s\\S]*\\)/g;\n\tfunction _extractPlaceholderName(input) {\n\t return input.split(_CUSTOM_PH_EXP)[1];\n\t}\n\t//# sourceMappingURL=i18n_parser.js.map\n\n/***/ },\n/* 10 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t/**\n\t * @license\n\t * Copyright Google Inc. All Rights Reserved.\n\t *\n\t * Use of this source code is governed by an MIT-style license that can be\n\t * found in the LICENSE file at https://angular.io/license\n\t */\n\t\"use strict\";\n\tvar core_1 = __webpack_require__(11);\n\tvar chars = __webpack_require__(122);\n\tvar lang_1 = __webpack_require__(123);\n\t(function (TokenType) {\n\t TokenType[TokenType[\"Character\"] = 0] = \"Character\";\n\t TokenType[TokenType[\"Identifier\"] = 1] = \"Identifier\";\n\t TokenType[TokenType[\"Keyword\"] = 2] = \"Keyword\";\n\t TokenType[TokenType[\"String\"] = 3] = \"String\";\n\t TokenType[TokenType[\"Operator\"] = 4] = \"Operator\";\n\t TokenType[TokenType[\"Number\"] = 5] = \"Number\";\n\t TokenType[TokenType[\"Error\"] = 6] = \"Error\";\n\t})(exports.TokenType || (exports.TokenType = {}));\n\tvar TokenType = exports.TokenType;\n\tvar KEYWORDS = ['var', 'let', 'null', 'undefined', 'true', 'false', 'if', 'else', 'this'];\n\tvar Lexer = (function () {\n\t function Lexer() {\n\t }\n\t Lexer.prototype.tokenize = function (text) {\n\t var scanner = new _Scanner(text);\n\t var tokens = [];\n\t var token = scanner.scanToken();\n\t while (token != null) {\n\t tokens.push(token);\n\t token = scanner.scanToken();\n\t }\n\t return tokens;\n\t };\n\t /** @nocollapse */\n\t Lexer.decorators = [\n\t { type: core_1.Injectable },\n\t ];\n\t return Lexer;\n\t}());\n\texports.Lexer = Lexer;\n\tvar Token = (function () {\n\t function Token(index, type, numValue, strValue) {\n\t this.index = index;\n\t this.type = type;\n\t this.numValue = numValue;\n\t this.strValue = strValue;\n\t }\n\t Token.prototype.isCharacter = function (code) {\n\t return this.type == TokenType.Character && this.numValue == code;\n\t };\n\t Token.prototype.isNumber = function () { return this.type == TokenType.Number; };\n\t Token.prototype.isString = function () { return this.type == TokenType.String; };\n\t Token.prototype.isOperator = function (operater) {\n\t return this.type == TokenType.Operator && this.strValue == operater;\n\t };\n\t Token.prototype.isIdentifier = function () { return this.type == TokenType.Identifier; };\n\t Token.prototype.isKeyword = function () { return this.type == TokenType.Keyword; };\n\t Token.prototype.isKeywordDeprecatedVar = function () {\n\t return this.type == TokenType.Keyword && this.strValue == 'var';\n\t };\n\t Token.prototype.isKeywordLet = function () { return this.type == TokenType.Keyword && this.strValue == 'let'; };\n\t Token.prototype.isKeywordNull = function () { return this.type == TokenType.Keyword && this.strValue == 'null'; };\n\t Token.prototype.isKeywordUndefined = function () {\n\t return this.type == TokenType.Keyword && this.strValue == 'undefined';\n\t };\n\t Token.prototype.isKeywordTrue = function () { return this.type == TokenType.Keyword && this.strValue == 'true'; };\n\t Token.prototype.isKeywordFalse = function () { return this.type == TokenType.Keyword && this.strValue == 'false'; };\n\t Token.prototype.isKeywordThis = function () { return this.type == TokenType.Keyword && this.strValue == 'this'; };\n\t Token.prototype.isError = function () { return this.type == TokenType.Error; };\n\t Token.prototype.toNumber = function () { return this.type == TokenType.Number ? this.numValue : -1; };\n\t Token.prototype.toString = function () {\n\t switch (this.type) {\n\t case TokenType.Character:\n\t case TokenType.Identifier:\n\t case TokenType.Keyword:\n\t case TokenType.Operator:\n\t case TokenType.String:\n\t case TokenType.Error:\n\t return this.strValue;\n\t case TokenType.Number:\n\t return this.numValue.toString();\n\t default:\n\t return null;\n\t }\n\t };\n\t return Token;\n\t}());\n\texports.Token = Token;\n\tfunction newCharacterToken(index, code) {\n\t return new Token(index, TokenType.Character, code, lang_1.StringWrapper.fromCharCode(code));\n\t}\n\tfunction newIdentifierToken(index, text) {\n\t return new Token(index, TokenType.Identifier, 0, text);\n\t}\n\tfunction newKeywordToken(index, text) {\n\t return new Token(index, TokenType.Keyword, 0, text);\n\t}\n\tfunction newOperatorToken(index, text) {\n\t return new Token(index, TokenType.Operator, 0, text);\n\t}\n\tfunction newStringToken(index, text) {\n\t return new Token(index, TokenType.String, 0, text);\n\t}\n\tfunction newNumberToken(index, n) {\n\t return new Token(index, TokenType.Number, n, '');\n\t}\n\tfunction newErrorToken(index, message) {\n\t return new Token(index, TokenType.Error, 0, message);\n\t}\n\texports.EOF = new Token(-1, TokenType.Character, 0, '');\n\tvar _Scanner = (function () {\n\t function _Scanner(input) {\n\t this.input = input;\n\t this.peek = 0;\n\t this.index = -1;\n\t this.length = input.length;\n\t this.advance();\n\t }\n\t _Scanner.prototype.advance = function () {\n\t this.peek =\n\t ++this.index >= this.length ? chars.$EOF : lang_1.StringWrapper.charCodeAt(this.input, this.index);\n\t };\n\t _Scanner.prototype.scanToken = function () {\n\t var input = this.input, length = this.length, peek = this.peek, index = this.index;\n\t // Skip whitespace.\n\t while (peek <= chars.$SPACE) {\n\t if (++index >= length) {\n\t peek = chars.$EOF;\n\t break;\n\t }\n\t else {\n\t peek = lang_1.StringWrapper.charCodeAt(input, index);\n\t }\n\t }\n\t this.peek = peek;\n\t this.index = index;\n\t if (index >= length) {\n\t return null;\n\t }\n\t // Handle identifiers and numbers.\n\t if (isIdentifierStart(peek))\n\t return this.scanIdentifier();\n\t if (chars.isDigit(peek))\n\t return this.scanNumber(index);\n\t var start = index;\n\t switch (peek) {\n\t case chars.$PERIOD:\n\t this.advance();\n\t return chars.isDigit(this.peek) ? this.scanNumber(start) :\n\t newCharacterToken(start, chars.$PERIOD);\n\t case chars.$LPAREN:\n\t case chars.$RPAREN:\n\t case chars.$LBRACE:\n\t case chars.$RBRACE:\n\t case chars.$LBRACKET:\n\t case chars.$RBRACKET:\n\t case chars.$COMMA:\n\t case chars.$COLON:\n\t case chars.$SEMICOLON:\n\t return this.scanCharacter(start, peek);\n\t case chars.$SQ:\n\t case chars.$DQ:\n\t return this.scanString();\n\t case chars.$HASH:\n\t case chars.$PLUS:\n\t case chars.$MINUS:\n\t case chars.$STAR:\n\t case chars.$SLASH:\n\t case chars.$PERCENT:\n\t case chars.$CARET:\n\t return this.scanOperator(start, lang_1.StringWrapper.fromCharCode(peek));\n\t case chars.$QUESTION:\n\t return this.scanComplexOperator(start, '?', chars.$PERIOD, '.');\n\t case chars.$LT:\n\t case chars.$GT:\n\t return this.scanComplexOperator(start, lang_1.StringWrapper.fromCharCode(peek), chars.$EQ, '=');\n\t case chars.$BANG:\n\t case chars.$EQ:\n\t return this.scanComplexOperator(start, lang_1.StringWrapper.fromCharCode(peek), chars.$EQ, '=', chars.$EQ, '=');\n\t case chars.$AMPERSAND:\n\t return this.scanComplexOperator(start, '&', chars.$AMPERSAND, '&');\n\t case chars.$BAR:\n\t return this.scanComplexOperator(start, '|', chars.$BAR, '|');\n\t case chars.$NBSP:\n\t while (chars.isWhitespace(this.peek))\n\t this.advance();\n\t return this.scanToken();\n\t }\n\t this.advance();\n\t return this.error(\"Unexpected character [\" + lang_1.StringWrapper.fromCharCode(peek) + \"]\", 0);\n\t };\n\t _Scanner.prototype.scanCharacter = function (start, code) {\n\t this.advance();\n\t return newCharacterToken(start, code);\n\t };\n\t _Scanner.prototype.scanOperator = function (start, str) {\n\t this.advance();\n\t return newOperatorToken(start, str);\n\t };\n\t /**\n\t * Tokenize a 2/3 char long operator\n\t *\n\t * @param start start index in the expression\n\t * @param one first symbol (always part of the operator)\n\t * @param twoCode code point for the second symbol\n\t * @param two second symbol (part of the operator when the second code point matches)\n\t * @param threeCode code point for the third symbol\n\t * @param three third symbol (part of the operator when provided and matches source expression)\n\t * @returns {Token}\n\t */\n\t _Scanner.prototype.scanComplexOperator = function (start, one, twoCode, two, threeCode, three) {\n\t this.advance();\n\t var str = one;\n\t if (this.peek == twoCode) {\n\t this.advance();\n\t str += two;\n\t }\n\t if (lang_1.isPresent(threeCode) && this.peek == threeCode) {\n\t this.advance();\n\t str += three;\n\t }\n\t return newOperatorToken(start, str);\n\t };\n\t _Scanner.prototype.scanIdentifier = function () {\n\t var start = this.index;\n\t this.advance();\n\t while (isIdentifierPart(this.peek))\n\t this.advance();\n\t var str = this.input.substring(start, this.index);\n\t return KEYWORDS.indexOf(str) > -1 ? newKeywordToken(start, str) :\n\t newIdentifierToken(start, str);\n\t };\n\t _Scanner.prototype.scanNumber = function (start) {\n\t var simple = (this.index === start);\n\t this.advance(); // Skip initial digit.\n\t while (true) {\n\t if (chars.isDigit(this.peek)) {\n\t }\n\t else if (this.peek == chars.$PERIOD) {\n\t simple = false;\n\t }\n\t else if (isExponentStart(this.peek)) {\n\t this.advance();\n\t if (isExponentSign(this.peek))\n\t this.advance();\n\t if (!chars.isDigit(this.peek))\n\t return this.error('Invalid exponent', -1);\n\t simple = false;\n\t }\n\t else {\n\t break;\n\t }\n\t this.advance();\n\t }\n\t var str = this.input.substring(start, this.index);\n\t var value = simple ? lang_1.NumberWrapper.parseIntAutoRadix(str) : lang_1.NumberWrapper.parseFloat(str);\n\t return newNumberToken(start, value);\n\t };\n\t _Scanner.prototype.scanString = function () {\n\t var start = this.index;\n\t var quote = this.peek;\n\t this.advance(); // Skip initial quote.\n\t var buffer;\n\t var marker = this.index;\n\t var input = this.input;\n\t while (this.peek != quote) {\n\t if (this.peek == chars.$BACKSLASH) {\n\t if (buffer == null)\n\t buffer = new lang_1.StringJoiner();\n\t buffer.add(input.substring(marker, this.index));\n\t this.advance();\n\t var unescapedCode;\n\t if (this.peek == chars.$u) {\n\t // 4 character hex code for unicode character.\n\t var hex = input.substring(this.index + 1, this.index + 5);\n\t try {\n\t unescapedCode = lang_1.NumberWrapper.parseInt(hex, 16);\n\t }\n\t catch (e) {\n\t return this.error(\"Invalid unicode escape [\\\\u\" + hex + \"]\", 0);\n\t }\n\t for (var i = 0; i < 5; i++) {\n\t this.advance();\n\t }\n\t }\n\t else {\n\t unescapedCode = unescape(this.peek);\n\t this.advance();\n\t }\n\t buffer.add(lang_1.StringWrapper.fromCharCode(unescapedCode));\n\t marker = this.index;\n\t }\n\t else if (this.peek == chars.$EOF) {\n\t return this.error('Unterminated quote', 0);\n\t }\n\t else {\n\t this.advance();\n\t }\n\t }\n\t var last = input.substring(marker, this.index);\n\t this.advance(); // Skip terminating quote.\n\t // Compute the unescaped string value.\n\t var unescaped = last;\n\t if (buffer != null) {\n\t buffer.add(last);\n\t unescaped = buffer.toString();\n\t }\n\t return newStringToken(start, unescaped);\n\t };\n\t _Scanner.prototype.error = function (message, offset) {\n\t var position = this.index + offset;\n\t return newErrorToken(position, \"Lexer Error: \" + message + \" at column \" + position + \" in expression [\" + this.input + \"]\");\n\t };\n\t return _Scanner;\n\t}());\n\tfunction isIdentifierStart(code) {\n\t return (chars.$a <= code && code <= chars.$z) || (chars.$A <= code && code <= chars.$Z) ||\n\t (code == chars.$_) || (code == chars.$$);\n\t}\n\tfunction isIdentifier(input) {\n\t if (input.length == 0)\n\t return false;\n\t var scanner = new _Scanner(input);\n\t if (!isIdentifierStart(scanner.peek))\n\t return false;\n\t scanner.advance();\n\t while (scanner.peek !== chars.$EOF) {\n\t if (!isIdentifierPart(scanner.peek))\n\t return false;\n\t scanner.advance();\n\t }\n\t return true;\n\t}\n\texports.isIdentifier = isIdentifier;\n\tfunction isIdentifierPart(code) {\n\t return chars.isAsciiLetter(code) || chars.isDigit(code) || (code == chars.$_) ||\n\t (code == chars.$$);\n\t}\n\tfunction isExponentStart(code) {\n\t return code == chars.$e || code == chars.$E;\n\t}\n\tfunction isExponentSign(code) {\n\t return code == chars.$MINUS || code == chars.$PLUS;\n\t}\n\tfunction isQuote(code) {\n\t return code === chars.$SQ || code === chars.$DQ || code === chars.$BT;\n\t}\n\texports.isQuote = isQuote;\n\tfunction unescape(code) {\n\t switch (code) {\n\t case chars.$n:\n\t return chars.$LF;\n\t case chars.$f:\n\t return chars.$FF;\n\t case chars.$r:\n\t return chars.$CR;\n\t case chars.$t:\n\t return chars.$TAB;\n\t case chars.$v:\n\t return chars.$VTAB;\n\t default:\n\t return code;\n\t }\n\t}\n\t//# sourceMappingURL=lexer.js.map\n\n/***/ },\n/* 11 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t/**\n\t * @license\n\t * Copyright Google Inc. All Rights Reserved.\n\t *\n\t * Use of this source code is governed by an MIT-style license that can be\n\t * found in the LICENSE file at https://angular.io/license\n\t */\n\t\"use strict\";\n\tfunction __export(m) {\n\t for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];\n\t}\n\t/**\n\t * @module\n\t * @description\n\t * Entry point from which you should import all public core APIs.\n\t */\n\t__export(__webpack_require__(12));\n\t__export(__webpack_require__(25));\n\t__export(__webpack_require__(26));\n\tvar application_ref_1 = __webpack_require__(42);\n\texports.createPlatform = application_ref_1.createPlatform;\n\texports.assertPlatform = application_ref_1.assertPlatform;\n\texports.disposePlatform = application_ref_1.disposePlatform;\n\texports.getPlatform = application_ref_1.getPlatform;\n\texports.coreBootstrap = application_ref_1.coreBootstrap;\n\texports.coreLoadAndBootstrap = application_ref_1.coreLoadAndBootstrap;\n\texports.PlatformRef = application_ref_1.PlatformRef;\n\texports.ApplicationRef = application_ref_1.ApplicationRef;\n\texports.enableProdMode = application_ref_1.enableProdMode;\n\texports.lockRunMode = application_ref_1.lockRunMode;\n\texports.isDevMode = application_ref_1.isDevMode;\n\texports.createPlatformFactory = application_ref_1.createPlatformFactory;\n\tvar application_tokens_1 = __webpack_require__(44);\n\texports.APP_ID = application_tokens_1.APP_ID;\n\texports.PACKAGE_ROOT_URL = application_tokens_1.PACKAGE_ROOT_URL;\n\texports.PLATFORM_INITIALIZER = application_tokens_1.PLATFORM_INITIALIZER;\n\texports.APP_BOOTSTRAP_LISTENER = application_tokens_1.APP_BOOTSTRAP_LISTENER;\n\tvar application_init_1 = __webpack_require__(43);\n\texports.APP_INITIALIZER = application_init_1.APP_INITIALIZER;\n\texports.ApplicationInitStatus = application_init_1.ApplicationInitStatus;\n\t__export(__webpack_require__(89));\n\t__export(__webpack_require__(90));\n\t__export(__webpack_require__(91));\n\tvar debug_node_1 = __webpack_require__(101);\n\texports.DebugElement = debug_node_1.DebugElement;\n\texports.DebugNode = debug_node_1.DebugNode;\n\texports.asNativeElements = debug_node_1.asNativeElements;\n\texports.getDebugNode = debug_node_1.getDebugNode;\n\t__export(__webpack_require__(66));\n\t__export(__webpack_require__(102));\n\t__export(__webpack_require__(103));\n\t__export(__webpack_require__(104));\n\tvar application_module_1 = __webpack_require__(105);\n\texports.APPLICATION_COMMON_PROVIDERS = application_module_1.APPLICATION_COMMON_PROVIDERS;\n\texports.ApplicationModule = application_module_1.ApplicationModule;\n\tvar profile_1 = __webpack_require__(61);\n\texports.wtfCreateScope = profile_1.wtfCreateScope;\n\texports.wtfLeave = profile_1.wtfLeave;\n\texports.wtfStartTimeRange = profile_1.wtfStartTimeRange;\n\texports.wtfEndTimeRange = profile_1.wtfEndTimeRange;\n\tvar lang_1 = __webpack_require__(15);\n\texports.Type = lang_1.Type;\n\tvar async_1 = __webpack_require__(68);\n\texports.EventEmitter = async_1.EventEmitter;\n\tvar exceptions_1 = __webpack_require__(28);\n\texports.ExceptionHandler = exceptions_1.ExceptionHandler;\n\texports.WrappedException = exceptions_1.WrappedException;\n\texports.BaseException = exceptions_1.BaseException;\n\t__export(__webpack_require__(106));\n\t__export(__webpack_require__(114));\n\tvar animation_player_1 = __webpack_require__(111);\n\texports.AnimationPlayer = animation_player_1.AnimationPlayer;\n\tvar security_1 = __webpack_require__(57);\n\texports.SanitizationService = security_1.SanitizationService;\n\texports.SecurityContext = security_1.SecurityContext;\n\t//# sourceMappingURL=index.js.map\n\n/***/ },\n/* 12 */\n/***/ function(module, exports, __webpack_require__) {\n\n\t/**\n\t * @license\n\t * Copyright Google Inc. All Rights Reserved.\n\t *\n\t * Use of this source code is governed by an MIT-style license that can be\n\t * found in the LICENSE file at https://angular.io/license\n\t */\n\t\"use strict\";\n\tvar di_1 = __webpack_require__(13);\n\tvar directives_1 = __webpack_require__(20);\n\tvar ng_module_1 = __webpack_require__(22);\n\tvar decorators_1 = __webpack_require__(19);\n\tvar di_2 = __webpack_require__(13);\n\texports.ANALYZE_FOR_ENTRY_COMPONENTS = di_2.ANALYZE_FOR_ENTRY_COMPONENTS;\n\texports.AttributeMetadata = di_2.AttributeMetadata;\n\texports.ContentChildMetadata = di_2.ContentChildMetadata;\n\texports.ContentChildrenMetadata = di_2.ContentChildrenMetadata;\n\texports.QueryMetadata = di_2.QueryMetadata;\n\texports.ViewChildMetadata = di_2.ViewChildMetadata;\n\texports.ViewChildrenMetadata = di_2.ViewChildrenMetadata;\n\texports.ViewQueryMetadata = di_2.ViewQueryMetadata;\n\tvar directives_2 = __webpack_require__(20);\n\texports.ComponentMetadata = directives_2.ComponentMetadata;\n\texports.DirectiveMetadata = directives_2.DirectiveMetadata;\n\texports.HostBindingMetadata = directives_2.HostBindingMetadata;\n\texports.HostListenerMetadata = directives_2.HostListenerMetadata;\n\texports.InputMetadata = directives_2.InputMetadata;\n\texports.OutputMetadata = directives_2.OutputMetadata;\n\texports.PipeMetadata = directives_2.PipeMetadata;\n\tvar lifecycle_hooks_1 = __webpack_require__(23);\n\texports.AfterContentChecked = lifecycle_hooks_1.AfterContentChecked;\n\texports.AfterContentInit = lifecycle_hooks_1.AfterContentInit;\n\texports.AfterViewChecked = lifecycle_hooks_1.AfterViewChecked;\n\texports.AfterViewInit = lifecycle_hooks_1.AfterViewInit;\n\texports.DoCheck = lifecycle_hooks_1.DoCheck;\n\texports.OnChanges = lifecycle_hooks_1.OnChanges;\n\texports.OnDestroy = lifecycle_hooks_1.OnDestroy;\n\texports.OnInit = lifecycle_hooks_1.OnInit;\n\tvar ng_module_2 = __webpack_require__(22);\n\texports.CUSTOM_ELEMENTS_SCHEMA = ng_module_2.CUSTOM_ELEMENTS_SCHEMA;\n\texports.NgModuleMetadata = ng_module_2.NgModuleMetadata;\n\tvar view_1 = __webpack_require__(24);\n\texports.ViewEncapsulation = view_1.ViewEncapsulation;\n\texports.ViewMetadata = view_1.ViewMetadata;\n\t// TODO(alexeagle): remove the duplication of this doc. It is copied from ComponentMetadata.\n\t/**\n\t * Declare reusable UI building blocks for an application.\n\t *\n\t * Each Angular component requires a single `@Component` annotation. The `@Component`\n\t * annotation specifies when a component is instantiated, and which properties and hostListeners it\n\t * binds to.\n\t *\n\t * When a component is instantiated, Angular\n\t * - creates a shadow DOM for the component.\n\t * - loads the selected template into the shadow DOM.\n\t * - creates all the injectable objects configured with `providers` and `viewProviders`.\n\t *\n\t * All template expressions and statements are then evaluated against the component instance.\n\t *\n\t * ## Lifecycle hooks\n\t *\n\t * When the component class implements some {@linkDocs guide/lifecycle-hooks} the\n\t * callbacks are called by the change detection at defined points in time during the life of the\n\t * component.\n\t *\n\t * ### Example\n\t *\n\t * {@example core/ts/metadata/metadata.ts region='component'}\n\t * @stable\n\t * @Annotation\n\t */\n\texports.Component = decorators_1.makeDecorator(directives_1.ComponentMetadata);\n\t// TODO(alexeagle): remove the duplication of this doc. It is copied from DirectiveMetadata.\n\t/**\n\t * Directives allow you to attach behavior to elements in the DOM.\n\t *\n\t * {@link DirectiveMetadata}s with an embedded view are called {@link ComponentMetadata}s.\n\t *\n\t * A directive consists of a single directive annotation and a controller class. When the\n\t * directive's `selector` matches\n\t * elements in the DOM, the following steps occur:\n\t *\n\t * 1. For each directive, the `ElementInjector` attempts to resolve the directive's constructor\n\t * arguments.\n\t * 2. Angular instantiates directives for each matched element using `ElementInjector` in a\n\t * depth-first order,\n\t * as declared in the HTML.\n\t *\n\t * ## Understanding How Injection Works\n\t *\n\t * There are three stages of injection resolution.\n\t * - *Pre-existing Injectors*:\n\t * - The terminal {@link Injector} cannot resolve dependencies. It either throws an error or, if\n\t * the dependency was\n\t * specified as `@Optional`, returns `null`.\n\t * - The platform injector resolves browser singleton resources, such as: cookies, title,\n\t * location, and others.\n\t * - *Component Injectors*: Each component instance has its own {@link Injector}, and they follow\n\t * the same parent-child hierarchy\n\t * as the component instances in the DOM.\n\t * - *Element Injectors*: Each component instance has a Shadow DOM. Within the Shadow DOM each\n\t * element has an `ElementInjector`\n\t * which follow the same parent-child hierarchy as the DOM elements themselves.\n\t *\n\t * When a template is instantiated, it also must instantiate the corresponding directives in a\n\t * depth-first order. The\n\t * current `ElementInjector` resolves the constructor dependencies for each directive.\n\t *\n\t * Angular then resolves dependencies as follows, according to the order in which they appear in the\n\t * {@link ComponentMetadata}:\n\t *\n\t * 1. Dependencies on the current element\n\t * 2. Dependencies on element injectors and their parents until it encounters a Shadow DOM boundary\n\t * 3. Dependencies on component injectors and their parents until it encounters the root component\n\t * 4. Dependencies on pre-existing injectors\n\t *\n\t *\n\t * The `ElementInjector` can inject other directives, element-specific special objects, or it can\n\t * delegate to the parent\n\t * injector.\n\t *\n\t * To inject other directives, declare the constructor parameter as:\n\t * - `directive:DirectiveType`: a directive on the current element only\n\t * - `@Host() directive:DirectiveType`: any directive that matches the type between the current\n\t * element and the\n\t * Shadow DOM root.\n\t * - `@Query(DirectiveType) query:QueryList child child child child\n\t * \n\t *
\n\t * ```\n\t *\n\t * Expands in use to:\n\t *\n\t * ```\n\t * \n\t * \n\t * \n\t * \n\t *
\n\t * ```\n\t *\n\t * Notice that although the shorthand places `*foo=\"bar\"` within the `\n\t * \n\t *
\n\t * ```\n\t *\n\t * Once the directive instantiates the child view, the shorthand notation for the template expands\n\t * and the result is:\n\t *\n\t * ```\n\t * \n\t * \n\t * \n\t * \n\t * \n\t *
\n\t * ```\n\t *\n\t * Note also that although the `\n\t *
\n\t *