@coolon/angular-ui-powerups 0.0.7 → 0.0.9

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

@@ -5,10 +5,13 @@ import { MatDialog, MatButtonModule, MatDialogModule, MatTabsModule, MatProgress
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { __extends, __decorate, __metadata, __assign, __awaiter, __generator, __values } from 'tslib';
-import { GarbageCollector, MutableListModel, Constant, UseDelegate, MutableValueModel, assert, Dsl, Logger, ListModel, StoreInListModel, EventListenerList, DelegatingValueModel, lang, UseDelegatingValueModel, ValueModel, StoreInValueModel, Trace, OptionsHelper, ValueHolder, TransactionObserver, Binding } from '@coolon/pectin';
+import { GarbageCollector, MutableListModel, Constant, UseDelegate, MutableValueModel, assert, UnaryCommand, lang, Dsl, Logger, ListModel, StoreInListModel, EventListenerList, DelegatingValueModel, UseDelegatingValueModel, ValueModel, StoreInValueModel, Trace, OptionsHelper, ValueHolder, TransactionObserver, Binding } from '@coolon/pectin';
 import { PortalModule } from '@angular/cdk/portal';
 import { Deferred } from '@coolon/pectin/lib/promise/deferred.class';
 import { MatDialog as MatDialog$1 } from '@angular/material/dialog';
+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 { style, trigger, transition, animate } from '@angular/animations';
 import ResizeObserver from 'resize-observer-polyfill';
@@ -53,9 +56,14 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     __extends(AbstractInputComponent, _super);
     function AbstractInputComponent() {
         var _this = _super.call(this) || this;
+        // TODO: fix this.
+        // tslint:disable-next-line:no-output-native
         _this.focus = new EventEmitter();
+        // tslint:disable-next-line:no-output-native
         _this.blur = new EventEmitter();
+        // tslint:disable-next-line:no-output-native
         _this.enterKey = new EventEmitter();
+        // tslint:disable-next-line:no-output-native
         _this.escapeKey = new EventEmitter();
         /** @type {?} */
         var self = _this;
@@ -131,7 +139,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
      * @return {?}
      */
     function (command) {
-        if (command && command.isEnabled()) {
+        if (command && command.enabled.value) {
             command.execute();
         }
     };
@@ -284,13 +292,35 @@ var NumberInputComponent = /** @class */ (function (_super) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/**
+ * @template P
+ */
 var CommandDirective = /** @class */ (function (_super) {
     __extends(CommandDirective, _super);
     function CommandDirective(elementRef) {
         var _this = _super.call(this) || this;
         _this.elementRef = elementRef;
+        _this._commandParameterProvided = false;
         return _this;
     }
+    Object.defineProperty(CommandDirective.prototype, "commandParameter", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._commandParameter;
+        },
+        set: /**
+         * @param {?} value
+         * @return {?}
+         */
+        function (value) {
+            this._commandParameterProvided = true;
+            this._commandParameter = value;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @return {?}
      */
@@ -299,6 +329,16 @@ var CommandDirective = /** @class */ (function (_super) {
      */
     function () {
         assert.notNil(this.pectinCommand);
+        if (this.pectinCommand instanceof UnaryCommand) {
+            if (!this._commandParameterProvided) {
+                lang.illegalState('UnaryCommands required the command parameter to be specified.');
+            }
+        }
+        else {
+            if (this._commandParameterProvided) {
+                lang.illegalState('command parameters are only supported by UnaryCommands');
+            }
+        }
     };
     /**
      * @return {?}
@@ -350,8 +390,13 @@ var CommandDirective = /** @class */ (function (_super) {
     function ($event) {
         $event.preventDefault();
         $event.stopPropagation();
-        if (this.pectinCommand.isEnabled()) {
-            this.pectinCommand.execute({ event: $event });
+        if (this.pectinCommand.enabled.value) {
+            if (this.pectinCommand instanceof UnaryCommand) {
+                this.pectinCommand.withContext({ event: $event }).execute(this.commandParameter);
+            }
+            else {
+                this.pectinCommand.withContext({ event: $event }).execute();
+            }
         }
         else {
             console.warn('disabled command clicked, ignoring.');
@@ -369,6 +414,7 @@ var CommandDirective = /** @class */ (function (_super) {
     ]; };
     CommandDirective.propDecorators = {
         pectinCommand: [{ type: Input }],
+        commandParameter: [{ type: Input }],
         notifyClick: [{ type: HostListener, args: ['click', ['$event'],] }]
     };
     return CommandDirective;
@@ -376,6 +422,16 @@ var CommandDirective = /** @class */ (function (_super) {
 if (false) {
     /** @type {?} */
     CommandDirective.prototype.pectinCommand;
+    /**
+     * @type {?}
+     * @private
+     */
+    CommandDirective.prototype._commandParameter;
+    /**
+     * @type {?}
+     * @private
+     */
+    CommandDirective.prototype._commandParameterProvided;
     /**
      * @type {?}
      * @private
@@ -404,7 +460,9 @@ var FocusBindingDirective = /** @class */ (function (_super) {
      * @return {?}
      */
     function () {
-        this.pectinFocusBinding.focusCallbacks.notifyFocusIn();
+        if (this.hasBinding()) {
+            this.pectinFocusBinding.focusCallbacks.notifyFocusIn();
+        }
     };
     /**
      * @return {?}
@@ -413,7 +471,9 @@ var FocusBindingDirective = /** @class */ (function (_super) {
      * @return {?}
      */
     function () {
-        this.pectinFocusBinding.focusCallbacks.notifyFocusOut();
+        if (this.hasBinding()) {
+            this.pectinFocusBinding.focusCallbacks.notifyFocusOut();
+        }
     };
     /**
      * @return {?}
@@ -432,16 +492,32 @@ var FocusBindingDirective = /** @class */ (function (_super) {
     function () {
         var _this = this;
         // TODO: Make this also track the current enabled/disabled state.
-        var chain = Dsl.disposeWith(this).chain;
-        chain.value(this.pectinFocusBinding.focused).subscribe((/**
-         * @param {?} focused
-         * @return {?}
-         */
-        function (focused) {
-            if (focused && !_this.alreadyHasFocus()) {
-                _this.tryAndFocus();
-            }
-        }));
+        if (this.hasBinding()) {
+            var chain = Dsl.disposeWith(this).chain;
+            chain.value(this.pectinFocusBinding.focused).subscribe((/**
+             * @param {?} focused
+             * @return {?}
+             */
+            function (focused) {
+                if (focused && !_this.alreadyHasFocus()) {
+                    _this.tryAndFocus();
+                }
+            }));
+        }
+        else {
+            Logger.get(this).warn("pectinFocusBinding was nil");
+        }
+    };
+    /**
+     * @private
+     * @return {?}
+     */
+    FocusBindingDirective.prototype.hasBinding = /**
+     * @private
+     * @return {?}
+     */
+    function () {
+        return this.pectinFocusBinding && this.pectinFocusBinding.focused;
     };
     // Hook method for debugging via tracing.
     // Hook method for debugging via tracing.
@@ -526,7 +602,7 @@ var FocusBindingDirective = /** @class */ (function (_super) {
      * @return {?}
      */
     function () {
-        return this.pectinFocusBinding.focused.value;
+        return this.hasBinding() && this.pectinFocusBinding.focused.value;
     };
     // Hook method for debugging via tracing.
     // Hook method for debugging via tracing.
@@ -963,7 +1039,7 @@ var AlertDialogComponent = /** @class */ (function (_super) {
         { type: Component, args: [{
                     selector: 'angular-ui-powerups-alert-dialog',
                     template: "<h3 matDialogTitle *ngIf=\"alert.title\">{{alert.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of alert.content()\">{{line}}</p>\n</div>\n<p matDialogActions>\n  <button mat-raised-button color=\"primary\" (click)=\"done()\">{{alert.ok()}}</button>\n</p>\n",
-                    styles: [":host{display:block;padding:var(--default-padding)}.mat-dialog-actions{justify-content:flex-end}"]
+                    styles: [":host{display:block;padding:var(--angular-ui-powerups-default-padding)}.mat-dialog-actions{justify-content:flex-end}"]
                 }] }
     ];
     /** @nocollapse */
@@ -1011,7 +1087,7 @@ var ConfirmationDialogComponent = /** @class */ (function (_super) {
         { type: Component, args: [{
                     selector: 'angular-ui-powerups-confirmation-dialog',
                     template: "<h3 matDialogTitle *ngIf=\"confirm.title\">{{confirm.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</div>\n<p matDialogActions>\n  <button mat-button (click)=\"cancel()\">{{confirm.cancel()}}</button>\n  <button mat-raised-button [color]=\"isDestructive() ? 'warn' : 'primary'\" (click)=\"done(true)\">{{confirm.ok()}}</button>\n</p>\n\n",
-                    styles: [":host{display:block;padding:var(--default-padding)}.mat-dialog-actions{justify-content:flex-end}"]
+                    styles: [":host{display:block;padding:var(--angular-ui-powerups-default-padding)}.mat-dialog-actions{justify-content:flex-end}"]
                 }] }
     ];
     /** @nocollapse */
@@ -1624,7 +1700,7 @@ var EmptyStateComponent = /** @class */ (function () {
         { type: Component, args: [{
                     selector: 'angular-ui-powerups-empty-state',
                     template: "\n      <div class=\"container\">\n          <ng-content></ng-content>\n      </div>\n  ",
-                    styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center}.container{padding:var(--default-padding);border:2px dashed rgba(0,0,0,.2);border-radius:5px;font-size:14px;font-weight:300}"]
+                    styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center}.container{padding:var(--angular-ui-powerups-default-padding);border:2px dashed rgba(0,0,0,.2);border-radius:5px;font-size:14px;font-weight:300}"]
                 }] }
     ];
     /** @nocollapse */
@@ -1632,6 +1708,40 @@ var EmptyStateComponent = /** @class */ (function () {
     return EmptyStateComponent;
 }());
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+var NavComponent = /** @class */ (function () {
+    function NavComponent() {
+    }
+    /**
+     * @return {?}
+     */
+    NavComponent.prototype.ngOnInit = /**
+     * @return {?}
+     */
+    function () {
+    };
+    NavComponent.decorators = [
+        { type: Component, args: [{
+                    selector: 'angular-ui-powerups-nav',
+                    template: "<nav mat-tab-nav-bar>\n  <a mat-tab-link  *ngFor=\"let place of places\" [routerLink]='place.path'\n     routerLinkActive #rla=\"routerLinkActive\"\n     [active]=\"rla.isActive\"\n     [matTooltip]=\"place.title\">{{place.title}}</a>\n</nav>\n\n",
+                    styles: [""]
+                }] }
+    ];
+    /** @nocollapse */
+    NavComponent.ctorParameters = function () { return []; };
+    NavComponent.propDecorators = {
+        places: [{ type: Input }]
+    };
+    return NavComponent;
+}());
+if (false) {
+    /** @type {?} */
+    NavComponent.prototype.places;
+}
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -1772,19 +1882,25 @@ var PlaceModule = /** @class */ (function () {
         { type: NgModule, args: [{
                     imports: [
                         CommonModule,
+                        BrowserAnimationsModule,
                         MatProgressSpinnerModule,
-                        RouterModule
+                        RouterModule,
+                        MatTabsModule$1,
+                        MatListModule,
+                        MatTooltipModule
                     ],
                     declarations: [
                         EmptyStateComponent,
                         BusyOverlayComponent,
-                        PlaceOutletComponent
+                        PlaceOutletComponent,
+                        NavComponent
                     ],
                     entryComponents: [BusyOverlayComponent],
                     exports: [
                         BusyOverlayComponent,
                         PlaceOutletComponent,
-                        EmptyStateComponent
+                        EmptyStateComponent,
+                        NavComponent
                     ],
                     providers: [
                         PlaceService
@@ -2275,7 +2391,7 @@ function Place(options) {
 function ResolvedParameter() { }
 if (false) {
     /** @type {?} */
-    ResolvedParameter.prototype.parameter;
+    ResolvedParameter.prototype.parameterDef;
     /** @type {?} */
     ResolvedParameter.prototype.resolvedValue;
 }
@@ -2299,7 +2415,7 @@ var ResolvedParameters = /** @class */ (function () {
          * @param {?} p
          * @return {?}
          */
-        function (p) { return p.parameter === parameter; }));
+        function (p) { return p.parameterDef === parameter; }));
         return resolved ? resolved.resolvedValue : null;
     };
     /**
@@ -2319,8 +2435,8 @@ var ResolvedParameters = /** @class */ (function () {
          * @param {?} p
          * @return {?}
          */
-        function (p) { return p.parameter !== parameter; })).concat({
-            parameter: parameter,
+        function (p) { return p.parameterDef !== parameter; })).concat({
+            parameterDef: parameter,
             resolvedValue: value
         }));
     };
@@ -2335,7 +2451,7 @@ var ResolvedParameters = /** @class */ (function () {
     function () {
         /** @type {?} */
         var routeIdParam = this.getRouteIdParam();
-        return routeIdParam ? routeIdParam.parameter.type.format(routeIdParam.resolvedValue) : null;
+        return routeIdParam ? routeIdParam.parameterDef.type.format(routeIdParam.resolvedValue) : null;
     };
     /**
      * @private
@@ -2350,7 +2466,7 @@ var ResolvedParameters = /** @class */ (function () {
          * @param {?} p
          * @return {?}
          */
-        function (p) { return p.parameter.isRouteId; }));
+        function (p) { return p.parameterDef.isRouteId; }));
     };
     /**
      * @protected
@@ -2368,12 +2484,12 @@ var ResolvedParameters = /** @class */ (function () {
          * @param {?} p
          * @return {?}
          */
-        function (p) { return !p.parameter.isRouteId; })).forEach((/**
+        function (p) { return !p.parameterDef.isRouteId; })).forEach((/**
          * @param {?} p
          * @return {?}
          */
         function (p) {
-            params[p.parameter.name] = p.parameter.type.format(p.resolvedValue);
+            params[p.parameterDef.name] = p.parameterDef.type.format(p.resolvedValue);
         }));
         return params;
     };
@@ -2406,7 +2522,7 @@ var ResolvedParameters = /** @class */ (function () {
         /** @type {?} */
         var path = routeId ? [relativePath, routeId, this.getFormattedParameters()] : [relativePath, this.getFormattedParameters()];
         router.navigate(path, {
-            relativeTo: activatedRoute,
+            relativeTo: activatedRoute
         });
     };
     __decorate([
@@ -2463,11 +2579,23 @@ var RouteParameterBindings = /** @class */ (function (_super) {
             /** @type {?} */
             var result = [];
             routeParameterDefs.forEach((/**
-             * @param {?} parameter
+             * @param {?} parameterDef
              * @return {?}
              */
-            function (parameter) {
-                result.push({ parameter: parameter, resolvedValue: parameter.type.parse(params.get(parameter.name)) });
+            function (parameterDef) {
+                /** @type {?} */
+                var resolvedValue;
+                if (parameterDef.isArray) {
+                    resolvedValue = params.getAll(parameterDef.name).map((/**
+                     * @param {?} v
+                     * @return {?}
+                     */
+                    function (v) { return parameterDef.type.parse(v); }));
+                }
+                else {
+                    resolvedValue = parameterDef.type.parse(params.get(parameterDef.name));
+                }
+                result.push({ parameterDef: parameterDef, resolvedValue: resolvedValue });
             }));
             return new ResolvedParameters(result);
         }));
@@ -2718,41 +2846,162 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/**
+ * @abstract
+ * @template T, S
+ */
+var  /**
+ * @abstract
+ * @template T, S
+ */
+Sanitiser = /** @class */ (function () {
+    function Sanitiser(parameterDef, snapshot, sanitiser) {
+        this.parameterDef = parameterDef;
+        this.snapshot = snapshot;
+        this.sanitiser = sanitiser;
+    }
+    /**
+     * @return {?}
+     */
+    Sanitiser.prototype.isRouteId = /**
+     * @return {?}
+     */
+    function () {
+        return this.parameterDef.isRouteId;
+    };
+    Object.defineProperty(Sanitiser.prototype, "valueChanged", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return !isNil(this.initialValue) && this.hasChanged(this.initialValue, this.sanitisedValue);
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(Sanitiser.prototype, "sanitisedValue", {
+        get: /**
+         * @return {?}
+         */
+        function () {
+            return this._sanitisedValue;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    /**
+     * @return {?}
+     */
+    Sanitiser.prototype.sanitize = /**
+     * @return {?}
+     */
+    function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        if (!this.sanitiser) return [3 /*break*/, 2];
+                        this.initialValue = this.readFrom(this.snapshot);
+                        _a = this;
+                        return [4 /*yield*/, this.sanitiser.sanitise(this.initialValue)];
+                    case 1:
+                        _a._sanitisedValue = _b.sent();
+                        if (this.initialValue !== this._sanitisedValue) {
+                            return [2 /*return*/, false];
+                        }
+                        _b.label = 2;
+                    case 2: return [2 /*return*/, true];
+                }
+            });
+        });
+    };
+    return Sanitiser;
+}());
+if (false) {
+    /**
+     * @type {?}
+     * @private
+     */
+    Sanitiser.prototype.initialValue;
+    /**
+     * @type {?}
+     * @private
+     */
+    Sanitiser.prototype._sanitisedValue;
+    /** @type {?} */
+    Sanitiser.prototype.parameterDef;
+    /** @type {?} */
+    Sanitiser.prototype.snapshot;
+    /** @type {?} */
+    Sanitiser.prototype.sanitiser;
+    /**
+     * @abstract
+     * @protected
+     * @param {?} snapshot
+     * @return {?}
+     */
+    Sanitiser.prototype.readFrom = function (snapshot) { };
+    /**
+     * @abstract
+     * @protected
+     * @param {?} initialValue
+     * @param {?} sanitisedValue
+     * @return {?}
+     */
+    Sanitiser.prototype.hasChanged = function (initialValue, sanitisedValue) { };
+    /**
+     * @abstract
+     * @param {?} dest
+     * @return {?}
+     */
+    Sanitiser.prototype.injectRouteParam = function (dest) { };
+}
 var RouteParameterSanitiser = /** @class */ (function () {
-    function RouteParameterSanitiser(parameterDefs, injector) {
+    function RouteParameterSanitiser(parameterDefs, snapshot, injector) {
+        var _this = this;
         this.parameterDefs = parameterDefs;
+        this.snapshot = snapshot;
         this.injector = injector;
-        this.sanitisedParameters = [];
-        this.routeParameter = parameterDefs.find((/**
+        this.parameterSanitisers = [];
+        /** @type {?} */
+        var sanitisers = parameterDefs.map((/**
+         * @param {?} def
+         * @return {?}
+         */
+        function (def) {
+            return def.isArray ?
+                new Sanitiser.Array(def, snapshot, _this.getSanitiser(def)) :
+                new Sanitiser.Value(def, snapshot, _this.getSanitiser(def));
+        }));
+        this.routeIdSanitiser = sanitisers.find((/**
          * @param {?} p
          * @return {?}
          */
-        function (p) { return p.isRouteId; }));
-        this.queryParameters = parameterDefs.filter((/**
+        function (p) { return p.isRouteId(); }));
+        this.parameterSanitisers = sanitisers.filter((/**
          * @param {?} p
          * @return {?}
          */
-        function (p) { return !p.isRouteId; }));
+        function (p) { return !p.isRouteId(); }));
     }
     /**
-     * @param {?} snapshot
      * @return {?}
      */
     RouteParameterSanitiser.prototype.sanitise = /**
-     * @param {?} snapshot
      * @return {?}
      */
-    function (snapshot) {
+    function () {
         return __awaiter(this, void 0, void 0, function () {
-            var e_1, _a, routeOk, _b, _c, param, e_1_1;
+            var e_1, _a, _b, _c, sanitiser, e_1_1;
             return __generator(this, function (_d) {
                 switch (_d.label) {
                     case 0:
-                        if (!this.routeParameter) return [3 /*break*/, 2];
-                        return [4 /*yield*/, this.sanitiseParameter(this.routeParameter, snapshot.paramMap.get(this.routeParameter.name))];
+                        if (!this.routeIdSanitiser) return [3 /*break*/, 2];
+                        return [4 /*yield*/, this.routeIdSanitiser.sanitize()];
                     case 1:
-                        routeOk = _d.sent();
-                        if (!routeOk) {
+                        _d.sent();
+                        if (this.routeIdSanitiser.valueChanged) {
                             // if the route id isn't ok we redirect immediately as the query params may need to be sanitised in the
                             // context of the route id.
                             return [2 /*return*/, false];
@@ -2760,12 +3009,12 @@ var RouteParameterSanitiser = /** @class */ (function () {
                         _d.label = 2;
                     case 2:
                         _d.trys.push([2, 7, 8, 9]);
-                        _b = __values(this.queryParameters), _c = _b.next();
+                        _b = __values(this.parameterSanitisers), _c = _b.next();
                         _d.label = 3;
                     case 3:
                         if (!!_c.done) return [3 /*break*/, 6];
-                        param = _c.value;
-                        return [4 /*yield*/, this.sanitiseParameter(param, snapshot.queryParamMap.get(param.name))];
+                        sanitiser = _c.value;
+                        return [4 /*yield*/, sanitiser.sanitize()];
                     case 4:
                         _d.sent();
                         _d.label = 5;
@@ -2783,42 +3032,11 @@ var RouteParameterSanitiser = /** @class */ (function () {
                         }
                         finally { if (e_1) throw e_1.error; }
                         return [7 /*endfinally*/];
-                    case 9: return [2 /*return*/, this.sanitisedParameters.length === 0];
-                }
-            });
-        });
-    };
-    /**
-     * @template T
-     * @param {?} def
-     * @param {?} formattedInitialValue
-     * @return {?}
-     */
-    RouteParameterSanitiser.prototype.sanitiseParameter = /**
-     * @template T
-     * @param {?} def
-     * @param {?} formattedInitialValue
-     * @return {?}
-     */
-    function (def, formattedInitialValue) {
-        return __awaiter(this, void 0, void 0, function () {
-            var sanitiser, initialValue, sanitisedValue;
-            return __generator(this, function (_a) {
-                switch (_a.label) {
-                    case 0:
-                        if (!def) return [3 /*break*/, 2];
-                        sanitiser = this.getSanitiser(def);
-                        if (!sanitiser) return [3 /*break*/, 2];
-                        initialValue = def.type.parse(formattedInitialValue);
-                        return [4 /*yield*/, sanitiser.sanitise(initialValue)];
-                    case 1:
-                        sanitisedValue = _a.sent();
-                        if (initialValue !== sanitisedValue) {
-                            this.sanitisedParameters.push({ def: def, value: def.type.format(sanitisedValue) });
-                            return [2 /*return*/, false];
-                        }
-                        _a.label = 2;
-                    case 2: return [2 /*return*/, true];
+                    case 9: return [2 /*return*/, !this.parameterSanitisers.find((/**
+                         * @param {?} s
+                         * @return {?}
+                         */
+                        function (s) { return s.valueChanged; }))];
                 }
             });
         });
@@ -2832,57 +3050,36 @@ var RouteParameterSanitiser = /** @class */ (function () {
      * @return {?}
      */
     function (router) {
-        var _this = this;
-        assert.isTruthy(this.sanitisedParameters.length !== 0);
-        /** @type {?} */
-        var sanitisedRouteId = this.sanitisedParameters.find((/**
-         * @param {?} s
-         * @return {?}
-         */
-        function (s) { return s.def === _this.routeParameter; }));
-        if (sanitisedRouteId) {
-            return router.navigate(['..', sanitisedRouteId.value]);
+        assert.isTruthy(this.parameterSanitisers.length !== 0);
+        if (this.routeIdSanitiser.valueChanged) {
+            return router.navigate(['..', this.routeIdSanitiser.sanitisedValue]);
         }
         else {
             /** @type {?} */
-            var queryParams = this.sanitisedParameters.filter((/**
+            var routeParams_1 = {};
+            this.parameterSanitisers.forEach((/**
              * @param {?} s
              * @return {?}
              */
-            function (s) { return s.def !== _this.routeParameter; }))
-                .reduce((/**
-             * @param {?} params
-             * @param {?} item
-             * @return {?}
-             */
-            function (params, item) {
-                var _a;
-                return (__assign({}, params, (_a = {}, _a[item.def.name] = item.value, _a)));
-            }), {});
-            return router.navigate(['.', queryParams]);
+            function (s) { return s.injectRouteParam(routeParams_1); }));
+            return router.navigate(['.', routeParams_1]);
         }
     };
     /**
      * @private
-     * @template T
+     * @template T, S
      * @param {?} def
      * @return {?}
      */
     RouteParameterSanitiser.prototype.getSanitiser = /**
      * @private
-     * @template T
+     * @template T, S
      * @param {?} def
      * @return {?}
      */
     function (def) {
         return def.sanitiser ? this.injector.get(def.sanitiser, new def.sanitiser()) : null;
     };
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object, String]),
-        __metadata("design:returntype", Promise)
-    ], RouteParameterSanitiser.prototype, "sanitiseParameter", null);
     __decorate([
         Memoize$1(),
         __metadata("design:type", Function),
@@ -2896,22 +3093,139 @@ if (false) {
      * @type {?}
      * @private
      */
-    RouteParameterSanitiser.prototype.routeParameter;
+    RouteParameterSanitiser.prototype.routeIdSanitiser;
     /**
      * @type {?}
      * @private
      */
-    RouteParameterSanitiser.prototype.queryParameters;
-    /**
-     * @type {?}
-     * @private
-     */
-    RouteParameterSanitiser.prototype.sanitisedParameters;
+    RouteParameterSanitiser.prototype.parameterSanitisers;
     /** @type {?} */
     RouteParameterSanitiser.prototype.parameterDefs;
     /** @type {?} */
+    RouteParameterSanitiser.prototype.snapshot;
+    /** @type {?} */
     RouteParameterSanitiser.prototype.injector;
 }
+(function (Sanitiser) {
+    /**
+     * @template T
+     */
+    var /**
+     * @template T
+     */
+    Value = /** @class */ (function (_super) {
+        __extends(Value, _super);
+        function Value() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        /**
+         * @param {?} snapshot
+         * @return {?}
+         */
+        Value.prototype.readFrom = /**
+         * @param {?} snapshot
+         * @return {?}
+         */
+        function (snapshot) {
+            /** @type {?} */
+            var rawValue = this.parameterDef.isRouteId ?
+                snapshot.paramMap.get(this.parameterDef.name) :
+                snapshot.queryParamMap.get(this.parameterDef.name);
+            return this.parameterDef.type.parse(rawValue);
+        };
+        /**
+         * @protected
+         * @param {?} initialValue
+         * @param {?} sanitisedValue
+         * @return {?}
+         */
+        Value.prototype.hasChanged = /**
+         * @protected
+         * @param {?} initialValue
+         * @param {?} sanitisedValue
+         * @return {?}
+         */
+        function (initialValue, sanitisedValue) {
+            return initialValue !== sanitisedValue;
+        };
+        /**
+         * @param {?} dest
+         * @return {?}
+         */
+        Value.prototype.injectRouteParam = /**
+         * @param {?} dest
+         * @return {?}
+         */
+        function (dest) {
+            dest[this.parameterDef.name] = this.parameterDef.type.format(this.sanitisedValue);
+        };
+        return Value;
+    }(Sanitiser));
+    Sanitiser.Value = Value;
+    /**
+     * @template T
+     */
+    var /**
+     * @template T
+     */
+    Array = /** @class */ (function (_super) {
+        __extends(Array, _super);
+        function Array() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        /**
+         * @param {?} snapshot
+         * @return {?}
+         */
+        Array.prototype.readFrom = /**
+         * @param {?} snapshot
+         * @return {?}
+         */
+        function (snapshot) {
+            var _this = this;
+            /** @type {?} */
+            var rawValues = snapshot.queryParamMap.getAll(this.parameterDef.name);
+            return rawValues.map((/**
+             * @param {?} value
+             * @return {?}
+             */
+            function (value) { return _this.parameterDef.type.parse(value); }));
+        };
+        /**
+         * @protected
+         * @param {?} initialValue
+         * @param {?} sanitisedValue
+         * @return {?}
+         */
+        Array.prototype.hasChanged = /**
+         * @protected
+         * @param {?} initialValue
+         * @param {?} sanitisedValue
+         * @return {?}
+         */
+        function (initialValue, sanitisedValue) {
+            return initialValue !== sanitisedValue;
+        };
+        /**
+         * @param {?} dest
+         * @return {?}
+         */
+        Array.prototype.injectRouteParam = /**
+         * @param {?} dest
+         * @return {?}
+         */
+        function (dest) {
+            var _this = this;
+            dest[this.parameterDef.name] = this.sanitisedValue.map((/**
+             * @param {?} v
+             * @return {?}
+             */
+            function (v) { return _this.parameterDef.type.format(v); }));
+        };
+        return Array;
+    }(Sanitiser));
+    Sanitiser.Array = Array;
+})(Sanitiser || (Sanitiser = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -2937,8 +3251,8 @@ var PlaceRouteGuard = /** @class */ (function () {
         /** @type {?} */
         var routeParameters = Klass.get(route.component).getMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY);
         /** @type {?} */
-        var sanitiser = new RouteParameterSanitiser(routeParameters, this.injector);
-        return sanitiser.sanitise(route).then((/**
+        var sanitiser = new RouteParameterSanitiser(routeParameters, route, this.injector);
+        return sanitiser.sanitise().then((/**
          * @param {?} proceed
          * @return {?}
          */
@@ -3009,6 +3323,17 @@ if (false) {
     /** @type {?|undefined} */
     ParameterOptions.prototype.sanitiser;
 }
+/**
+ * @record
+ * @template T
+ */
+function ListParameterOptions() { }
+if (false) {
+    /** @type {?|undefined} */
+    ListParameterOptions.prototype.as;
+    /** @type {?|undefined} */
+    ListParameterOptions.prototype.listSanitiser;
+}
 /**
  * @template T
  * @param {?} type
@@ -3030,12 +3355,22 @@ function RouteId(type, options) {
     });
 }
 /**
+ * @deprecated use RouteParameter instead.
  * @template T
  * @param {?} type
  * @param {?=} options
  * @return {?}
  */
 function QueryParameter(type, options) {
+    return RouteParameter(type, options);
+}
+/**
+ * @template T
+ * @param {?} type
+ * @param {?=} options
+ * @return {?}
+ */
+function RouteParameter(type, options) {
     // assert.isTruthy(type.isValid());
     return (/**
      * @param {?} prototype
@@ -3049,6 +3384,36 @@ function QueryParameter(type, options) {
         UseDelegate()(prototype, propertyKey);
     });
 }
+/**
+ * @deprecated use RouteParameterList instead
+ * @template E
+ * @param {?} elementType
+ * @param {?=} options
+ * @return {?}
+ */
+function QueryParameterList(elementType, options) {
+    return RouteParameterList(elementType, options);
+}
+/**
+ * @template E
+ * @param {?} elementType
+ * @param {?=} options
+ * @return {?}
+ */
+function RouteParameterList(elementType, options) {
+    // assert.isTruthy(type.isValid());
+    return (/**
+     * @param {?} prototype
+     * @param {?} propertyKey
+     * @return {?}
+     */
+    function (prototype, propertyKey) {
+        /** @type {?} */
+        var param = createArrayDefinition(propertyKey, elementType, options);
+        Klass.get(prototype).addToOwnMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
+        UseDelegate()(prototype, propertyKey);
+    });
+}
 /**
  * @template T
  * @param {?} propertyName
@@ -3068,7 +3433,31 @@ function createDefinition(propertyName, type, options, routeId) {
         propertyName: propertyNameAsString,
         type: assert.notNil(type),
         sanitiser: opts.getOptional('sanitiser', null),
-        isRouteId: routeId
+        isRouteId: routeId,
+        isArray: false
+    };
+    return def;
+}
+/**
+ * @template T
+ * @param {?} propertyName
+ * @param {?} type
+ * @param {?} options
+ * @return {?}
+ */
+function createArrayDefinition(propertyName, type, options) {
+    /** @type {?} */
+    var opts = Opts.get(options);
+    /** @type {?} */
+    var propertyNameAsString = assert.notNil(propertyName).toString();
+    /** @type {?} */
+    var def = {
+        name: opts.getOptional('as', propertyNameAsString),
+        propertyName: propertyNameAsString,
+        type: assert.notNil(type),
+        sanitiser: opts.getOptional('listSanitiser', null),
+        isRouteId: false,
+        isArray: true
     };
     return def;
 }
@@ -3079,7 +3468,7 @@ function createDefinition(propertyName, type, options, routeId) {
  */
 /**
  * @record
- * @template T
+ * @template E, S
  */
 function ParameterDefinition() { }
 if (false) {
@@ -3093,6 +3482,8 @@ if (false) {
     ParameterDefinition.prototype.sanitiser;
     /** @type {?} */
     ParameterDefinition.prototype.isRouteId;
+    /** @type {?} */
+    ParameterDefinition.prototype.isArray;
 }
 
 /**
@@ -3197,5 +3588,5 @@ var ParameterType;
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
 
-export { ACTIVITY_DATA, AbstractActivity, AbstractInputComponent, AbstractPlaceComponent, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CommandDirective, ConfirmationDialogComponent, DialogInteractionService, Dimension, DisposableComponent, EmptyStateComponent, FocusBindingDirective, INTERACTION_CONTEXT, InteractionContext, InteractionModule, LeavePlaceGuard, NumberInputComponent, ParameterType, PasswordInputComponent, Place, PlaceModule, PlaceOutletComponent, PlaceRouteGuard, PlaceService, Point, QueryParameter, ResizeAwareComponent, RouteId, RouteParameterBindings, RouteParameterSanitiser, SelectInputComponent, StringInputComponent, slideDownAndUpAnimation, CommandDirective as ɵa, FocusBindingDirective as ɵb, DisposableComponent as ɵc, NumberInputComponent as ɵd, AbstractInputComponent as ɵe, StringInputComponent as ɵf, PasswordInputComponent as ɵg, SelectInputComponent as ɵh, PlaceModule as ɵi, EmptyStateComponent as ɵj, BusyOverlayComponent as ɵk, PlaceOutletComponent as ɵl, PlaceService as ɵm, InteractionModule as ɵn, ActivityContainerComponent as ɵo, ConfirmationDialogComponent as ɵp, AbstractActivity as ɵq, ACTIVITY_DATA as ɵr, AlertDialogComponent as ɵt, ActivityOutletComponent as ɵv, DialogInteractionService as ɵw, InteractionContext as ɵx };
+export { ACTIVITY_DATA, AbstractActivity, AbstractInputComponent, AbstractPlaceComponent, ActivityContainerComponent, ActivityOutletComponent, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CommandDirective, ConfirmationDialogComponent, DialogInteractionService, Dimension, DisposableComponent, EmptyStateComponent, FocusBindingDirective, INTERACTION_CONTEXT, InteractionContext, InteractionModule, LeavePlaceGuard, NavComponent, NumberInputComponent, ParameterType, PasswordInputComponent, Place, PlaceModule, PlaceOutletComponent, PlaceRouteGuard, PlaceService, Point, QueryParameter, QueryParameterList, ResizeAwareComponent, RouteId, RouteParameter, RouteParameterBindings, RouteParameterList, RouteParameterSanitiser, Sanitiser, SelectInputComponent, StringInputComponent, slideDownAndUpAnimation, CommandDirective as ɵa, FocusBindingDirective as ɵb, DisposableComponent as ɵc, NumberInputComponent as ɵd, AbstractInputComponent as ɵe, StringInputComponent as ɵf, PasswordInputComponent as ɵg, SelectInputComponent as ɵh, PlaceModule as ɵi, EmptyStateComponent as ɵj, BusyOverlayComponent as ɵk, PlaceOutletComponent as ɵl, PlaceService as ɵm, NavComponent as ɵn, InteractionModule as ɵo, ActivityContainerComponent as ɵp, ConfirmationDialogComponent as ɵq, AbstractActivity as ɵr, ACTIVITY_DATA as ɵs, AlertDialogComponent as ɵu, ActivityOutletComponent as ɵw, DialogInteractionService as ɵx, InteractionContext as ɵy };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map