@coolon/angular-ui-powerups 0.0.31 → 0.0.32

package/bundles/coolon-angular-ui-powerups.umd.js

@@ -1974,34 +1974,46 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
+    // Freezes the state of the components at the start of the animation.
+    /** @type {?} */
+    var animationStartStyle = animations$1.style({ position: 'absolute', top: '0', left: '0', bottom: '0', right: '0' });
     /** @type {?} */
     var left = [
-        animations$1.query(':enter, :leave', animations$1.style({ position: 'fixed', width: '100%' }), { optional: true }),
+        animations$1.query(':enter, :leave', animationStartStyle, { optional: true }),
         animations$1.group([
-            animations$1.query(':enter', [animations$1.style({ transform: 'translateX(-100%)' }), animations$1.animate('.3s ease-out', animations$1.style({ transform: 'translateX(0%)' }))], {
-                optional: true,
-            }),
-            animations$1.query(':leave', [animations$1.style({ transform: 'translateX(0%)' }), animations$1.animate('.3s ease-out', animations$1.style({ transform: 'translateX(100%)' }))], {
-                optional: true,
+            animations$1.query(':enter', [
+                animations$1.style({ transform: 'translateX(-100%)' }),
+                animations$1.animate('{{duration}} ease-out', animations$1.style({ transform: 'translateX(0%)' }))
+            ], {
+                optional: true
             }),
-        ]),
+            animations$1.query(':leave', [
+                animations$1.style({ transform: 'translateX(0%)' }),
+                animations$1.animate('{{duration}} ease-out', animations$1.style({ transform: 'translateX(100%)' }))
+            ], {
+                optional: true
+            })
+        ])
     ];
     /** @type {?} */
     var right = [
-        animations$1.query(':enter, :leave', animations$1.style({ position: 'fixed', width: '100%' }), { optional: true }),
+        animations$1.query(':enter, :leave', animationStartStyle, { optional: true }),
         animations$1.group([
-            animations$1.query(':enter', [animations$1.style({ transform: 'translateX(100%)' }), animations$1.animate('.3s ease-out', animations$1.style({ transform: 'translateX(0%)' }))], {
-                optional: true,
-            }),
-            animations$1.query(':leave', [animations$1.style({ transform: 'translateX(0%)' }), animations$1.animate('.3s ease-out', animations$1.style({ transform: 'translateX(-100%)' }))], {
-                optional: true,
+            animations$1.query(':enter', [
+                animations$1.style({ transform: 'translateX(100%)' }),
+                animations$1.animate('{{duration}} ease-out', animations$1.style({ transform: 'translateX(0%)' }))
+            ], {
+                optional: true
             }),
-        ]),
+            animations$1.query(':leave', [animations$1.style({ transform: 'translateX(0%)' }), animations$1.animate('{{duration}} ease-out', animations$1.style({ transform: 'translateX(-100%)' }))], {
+                optional: true
+            })
+        ])
     ];
     /** @type {?} */
     var LEFT_RIGHT_PLACE_ANIMATION = animations$1.trigger('routeAnimations', [
-        animations$1.transition(':increment', right),
-        animations$1.transition(':decrement', left),
+        animations$1.transition(':increment', right, { params: { duration: '.3s' } }),
+        animations$1.transition(':decrement', left, { params: { duration: '.3s' } })
     ]);
 
     /**
@@ -2057,9 +2069,9 @@
         PlaceOutletComponent.decorators = [
             { type: core.Component, args: [{
                         selector: 'angular-ui-powerups-place-outlet',
-                        template: "<div container [@routeAnimations]=\"getPlaceOrder(routerOutlet)\">\n  <router-outlet #routerOutlet=\"outlet\"\n                 (activate)=\"onActivate($event)\"\n                 (deactivate)=\"onDeactivate($event)\">\n  </router-outlet>\n</div>\n\n",
+                        template: "<div class=\"router-outlet-container\" [@routeAnimations]=\"getPlaceOrder(routerOutlet)\">\n  <router-outlet #routerOutlet=\"outlet\"\n                 (activate)=\"onActivate($event)\"\n                 (deactivate)=\"onDeactivate($event)\">\n  </router-outlet>\n</div>\n\n",
                         animations: [LEFT_RIGHT_PLACE_ANIMATION],
-                        styles: [":host{display:flex;flex-direction:column;min-height:0}[container]{flex:1;display:-ms-grid;display:grid;-ms-grid-rows:0 1fr;grid-template-rows:0 1fr;min-height:0}"]
+                        styles: [":host{display:flex;flex-direction:column;min-height:0}.router-outlet-container{flex:1;display:block;position:relative;min-height:0}router-outlet{display:none}"]
                     }] }
         ];
         /** @nocollapse */