@coolon/angular-ui-powerups 0.0.30 → 0.0.32

package/fesm2015/coolon-angular-ui-powerups.js

@@ -15,7 +15,7 @@ import { MatListModule } from '@angular/material/list';
 import { MatTabsModule as MatTabsModule$1 } from '@angular/material/tabs';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule, Router, ActivatedRoute, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
-import { query, style, group, animate, trigger, transition } from '@angular/animations';
+import { style, query, group, animate, trigger, transition } from '@angular/animations';
 import { isNil } from 'lodash';
 import 'reflect-metadata';
 import ResizeObserver from 'resize-observer-polyfill';
@@ -1479,34 +1479,46 @@ if (false) {
  * @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 {?} */
+const animationStartStyle = style({ position: 'absolute', top: '0', left: '0', bottom: '0', right: '0' });
 /** @type {?} */
 const left = [
-    query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
+    query(':enter, :leave', animationStartStyle, { optional: true }),
     group([
-        query(':enter', [style({ transform: 'translateX(-100%)' }), animate('.3s ease-out', style({ transform: 'translateX(0%)' }))], {
-            optional: true,
-        }),
-        query(':leave', [style({ transform: 'translateX(0%)' }), animate('.3s ease-out', style({ transform: 'translateX(100%)' }))], {
-            optional: true,
+        query(':enter', [
+            style({ transform: 'translateX(-100%)' }),
+            animate('{{duration}} ease-out', style({ transform: 'translateX(0%)' }))
+        ], {
+            optional: true
         }),
-    ]),
+        query(':leave', [
+            style({ transform: 'translateX(0%)' }),
+            animate('{{duration}} ease-out', style({ transform: 'translateX(100%)' }))
+        ], {
+            optional: true
+        })
+    ])
 ];
 /** @type {?} */
 const right = [
-    query(':enter, :leave', style({ position: 'fixed', width: '100%' }), { optional: true }),
+    query(':enter, :leave', animationStartStyle, { optional: true }),
     group([
-        query(':enter', [style({ transform: 'translateX(100%)' }), animate('.3s ease-out', style({ transform: 'translateX(0%)' }))], {
-            optional: true,
+        query(':enter', [
+            style({ transform: 'translateX(100%)' }),
+            animate('{{duration}} ease-out', style({ transform: 'translateX(0%)' }))
+        ], {
+            optional: true
         }),
-        query(':leave', [style({ transform: 'translateX(0%)' }), animate('.3s ease-out', style({ transform: 'translateX(-100%)' }))], {
-            optional: true,
-        }),
-    ]),
+        query(':leave', [style({ transform: 'translateX(0%)' }), animate('{{duration}} ease-out', style({ transform: 'translateX(-100%)' }))], {
+            optional: true
+        })
+    ])
 ];
 /** @type {?} */
 const LEFT_RIGHT_PLACE_ANIMATION = trigger('routeAnimations', [
-    transition(':increment', right),
-    transition(':decrement', left),
+    transition(':increment', right, { params: { duration: '.3s' } }),
+    transition(':decrement', left, { params: { duration: '.3s' } })
 ]);
 
 /**
@@ -1551,9 +1563,9 @@ class PlaceOutletComponent {
 PlaceOutletComponent.decorators = [
     { type: 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 */
@@ -3148,8 +3160,25 @@ var ParameterType;
             return +value;
         }
     }
+    class BooleanType {
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        format(value) {
+            return value ? 'true' : 'false';
+        }
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        parse(value) {
+            return value === 'true';
+        }
+    }
     ParameterType.STRING = new StringType();
     ParameterType.NUMBER = new NumberType();
+    ParameterType.BOOLEAN = new BooleanType();
 })(ParameterType || (ParameterType = {}));
 
 /**