@coolon/angular-ui-powerups 0.0.30 → 0.0.32

package/fesm5/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';
@@ -1793,34 +1793,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 {?} */
+var animationStartStyle = style({ position: 'absolute', top: '0', left: '0', bottom: '0', right: '0' });
 /** @type {?} */
 var 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 {?} */
 var 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(':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 {?} */
 var LEFT_RIGHT_PLACE_ANIMATION = trigger('routeAnimations', [
-    transition(':increment', right),
-    transition(':decrement', left),
+    transition(':increment', right, { params: { duration: '.3s' } }),
+    transition(':decrement', left, { params: { duration: '.3s' } })
 ]);
 
 /**
@@ -1876,9 +1888,9 @@ var PlaceOutletComponent = /** @class */ (function () {
     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 */
@@ -3715,8 +3727,36 @@ var ParameterType;
         };
         return NumberType;
     }());
+    var BooleanType = /** @class */ (function () {
+        function BooleanType() {
+        }
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        BooleanType.prototype.format = /**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            return value ? 'true' : 'false';
+        };
+        /**
+         * @param {?} value
+         * @return {?}
+         */
+        BooleanType.prototype.parse = /**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            return value === 'true';
+        };
+        return BooleanType;
+    }());
     ParameterType.STRING = new StringType();
     ParameterType.NUMBER = new NumberType();
+    ParameterType.BOOLEAN = new BooleanType();
 })(ParameterType || (ParameterType = {}));
 
 /**