@coolon/angular-ui-powerups 0.0.8 → 0.0.10

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

@@ -5,17 +5,20 @@ 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, DelegatingFormValueModel, UseDelegate, ValueModel, assert, UnaryCommand, lang, Dsl, Logger, ListModel, StoreInListModel, EventListenerList, DelegatingValueModel, MutableListModel, StoreInValueModel, Trace, OptionsHelper, ValueHolder, MutableValueModel, TransactionObserver, Binding } from '@coolon/pectin';
 import { PortalModule } from '@angular/cdk/portal';
 import { Deferred } from '@coolon/pectin/lib/promise/deferred.class';
+import { assert as assert$1, Klass, Opts } from '@coolon/typescript-utilities';
 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';
 import { Memoize } from '@typescript-plus/fast-memoize-decorator';
 import { isNil } from 'lodash';
 import 'reflect-metadata';
-import { Klass, Opts } from '@coolon/typescript-utilities';
 import { Memoize as Memoize$1 } from '@typescript-plus/fast-memoize-decorator/dist/src';
 
 /**
@@ -43,8 +46,6 @@ var DisposableComponent = /** @class */ (function (_super) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/** @type {?} */
-var EMPTY_ERRORS = new MutableListModel().readonly;
 /**
  * @abstract
  * @template T
@@ -53,9 +54,15 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     __extends(AbstractInputComponent, _super);
     function AbstractInputComponent() {
         var _this = _super.call(this) || this;
+        _this.valueModel = new DelegatingFormValueModel();
+        // 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;
@@ -71,6 +78,17 @@ var AbstractInputComponent = /** @class */ (function (_super) {
         };
         return _this;
     }
+    Object.defineProperty(AbstractInputComponent.prototype, "userValueModel", {
+        set: /**
+         * @param {?} model
+         * @return {?}
+         */
+        function (model) {
+            this.valueModel.setDelegate(model);
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @return {?}
      */
@@ -131,7 +149,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
      * @return {?}
      */
     function (command) {
-        if (command && command.isEnabled()) {
+        if (command && command.enabled.value) {
             command.execute();
         }
     };
@@ -142,7 +160,6 @@ var AbstractInputComponent = /** @class */ (function (_super) {
      * @return {?}
      */
     function () {
-        // this._focused = this.valueModel['focused'] || new ValueHolder();
     };
     /**
      * @return {?}
@@ -158,8 +175,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
          * @return {?}
          */
         function () {
-            // @ts-ignore
-            return ((/** @type {?} */ (this.valueModel))).enabled || Constant.TRUE;
+            return this.valueModel.enabled;
         },
         enumerable: true,
         configurable: true
@@ -178,7 +194,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
          * @return {?}
          */
         function () {
-            return ((/** @type {?} */ (this.valueModel))).errorList || EMPTY_ERRORS;
+            return this.valueModel.errorList;
         },
         enumerable: true,
         configurable: true
@@ -194,7 +210,7 @@ var AbstractInputComponent = /** @class */ (function (_super) {
         configurable: true
     });
     AbstractInputComponent.propDecorators = {
-        valueModel: [{ type: Input }],
+        userValueModel: [{ type: Input, args: ['valueModel',] }],
         label: [{ type: Input }],
         floatLabel: [{ type: Input }],
         hint: [{ type: Input }],
@@ -214,8 +230,9 @@ var AbstractInputComponent = /** @class */ (function (_super) {
     };
     __decorate([
         UseDelegate(),
-        __metadata("design:type", MutableValueModel)
-    ], AbstractInputComponent.prototype, "valueModel", void 0);
+        __metadata("design:type", ValueModel),
+        __metadata("design:paramtypes", [ValueModel])
+    ], AbstractInputComponent.prototype, "userValueModel", null);
     return AbstractInputComponent;
 }(DisposableComponent));
 if (false) {
@@ -284,13 +301,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 +338,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 +399,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 +423,7 @@ var CommandDirective = /** @class */ (function (_super) {
     ]; };
     CommandDirective.propDecorators = {
         pectinCommand: [{ type: Input }],
+        commandParameter: [{ type: Input }],
         notifyClick: [{ type: HostListener, args: ['click', ['$event'],] }]
     };
     return CommandDirective;
@@ -376,6 +431,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 +469,9 @@ var FocusBindingDirective = /** @class */ (function (_super) {
      * @return {?}
      */
     function () {
-        this.pectinFocusBinding.focusCallbacks.notifyFocusIn();
+        if (this.hasBinding()) {
+            this.pectinFocusBinding.focusContext.notifyFocusIn();
+        }
     };
     /**
      * @return {?}
@@ -413,7 +480,9 @@ var FocusBindingDirective = /** @class */ (function (_super) {
      * @return {?}
      */
     function () {
-        this.pectinFocusBinding.focusCallbacks.notifyFocusOut();
+        if (this.hasBinding()) {
+            this.pectinFocusBinding.focusContext.notifyFocusOut();
+        }
     };
     /**
      * @return {?}
@@ -432,16 +501,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.focusContext.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.focusContext;
     };
     // Hook method for debugging via tracing.
     // Hook method for debugging via tracing.
@@ -526,7 +611,7 @@ var FocusBindingDirective = /** @class */ (function (_super) {
      * @return {?}
      */
     function () {
-        return this.pectinFocusBinding.focused.value;
+        return this.hasBinding() && this.pectinFocusBinding.focusContext.focused.value;
     };
     // Hook method for debugging via tracing.
     // Hook method for debugging via tracing.
@@ -1406,6 +1491,7 @@ var DialogInteractionService = /** @class */ (function (_super) {
     function DialogInteractionService(dialogService) {
         var _this = _super.call(this) || this;
         _this.dialogService = dialogService;
+        assert$1.notNil(dialogService);
         return _this;
     }
     /**
@@ -1577,7 +1663,7 @@ var BusyOverlayComponent = /** @class */ (function () {
     };
     BusyOverlayComponent.decorators = [
         { type: Component, args: [{
-                    selector: 'aup-busy-overlay',
+                    selector: 'angular-ui-powerups-busy-overlay',
                     template: "<ng-content></ng-content>\n<div class=\"busy-overlay-backdrop\" *ngIf=\"busyModel.value\">\n  <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"52\"></mat-progress-spinner>\n</div>\n",
                     styles: [":host{position:relative}div.busy-overlay-backdrop{position:absolute;background-color:rgba(0,0,0,.2);top:0;left:0;bottom:0;right:0;display:-ms-grid;display:grid;-ms-grid-columns:auto;grid-template-columns:auto;-ms-grid-rows:auto;grid-template-rows:auto;place-content:center}"]
                 }] }
@@ -1589,7 +1675,7 @@ var BusyOverlayComponent = /** @class */ (function () {
         busy: [{ type: Input }]
     };
     __decorate([
-        UseDelegatingValueModel(),
+        UseDelegate(),
         __metadata("design:type", ValueModel)
     ], BusyOverlayComponent.prototype, "busyModel", void 0);
     __decorate([
@@ -1632,6 +1718,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 +1892,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
@@ -1854,6 +1980,7 @@ var defaultHiddenStyleDef = style({
  * @return {?}
  */
 function slideDownAndUpAnimation(triggerName, options) {
+    // SEE to fix this: https://github.com/angular/angular/issues/15587#issuecomment-351510501
     /** @type {?} */
     var duration = OptionsHelper.get(options).getOptional('duration', '100ms');
     /** @type {?} */
@@ -2275,7 +2402,7 @@ function Place(options) {
 function ResolvedParameter() { }
 if (false) {
     /** @type {?} */
-    ResolvedParameter.prototype.parameter;
+    ResolvedParameter.prototype.parameterDef;
     /** @type {?} */
     ResolvedParameter.prototype.resolvedValue;
 }
@@ -2299,7 +2426,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 +2446,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 +2462,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 +2477,7 @@ var ResolvedParameters = /** @class */ (function () {
          * @param {?} p
          * @return {?}
          */
-        function (p) { return p.parameter.isRouteId; }));
+        function (p) { return p.parameterDef.isRouteId; }));
     };
     /**
      * @protected
@@ -2368,12 +2495,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 +2533,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 +2590,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 +2857,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 +3020,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 +3043,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 +3061,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 +3104,139 @@ if (false) {
      * @type {?}
      * @private
      */
-    RouteParameterSanitiser.prototype.routeParameter;
-    /**
-     * @type {?}
-     * @private
-     */
-    RouteParameterSanitiser.prototype.queryParameters;
+    RouteParameterSanitiser.prototype.routeIdSanitiser;
     /**
      * @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 +3262,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 +3334,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 +3366,32 @@ function RouteId(type, options) {
     });
 }
 /**
+ * @deprecated use RouteParameter instead.
  * @template T
  * @param {?} type
  * @param {?=} options
  * @return {?}
  */
 function QueryParameter(type, options) {
+    return (/**
+     * @param {?} prototype
+     * @param {?} propertyKey
+     * @return {?}
+     */
+    function (prototype, propertyKey) {
+        /** @type {?} */
+        var param = createDefinition(propertyKey, type, options, false);
+        Klass.get(prototype).addToOwnMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
+        UseDelegate()(prototype, propertyKey);
+    });
+}
+/**
+ * @template T
+ * @param {?} type
+ * @param {?=} options
+ * @return {?}
+ */
+function RouteParameter(type, options) {
     // assert.isTruthy(type.isValid());
     return (/**
      * @param {?} prototype
@@ -3049,6 +3405,47 @@ function QueryParameter(type, options) {
         UseDelegate()(prototype, propertyKey);
     });
 }
+/**
+ * @deprecated use RouteParameterList instead
+ * @template E
+ * @param {?} elementType
+ * @param {?=} options
+ * @return {?}
+ */
+function QueryParameterList(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 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 +3465,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 +3500,7 @@ function createDefinition(propertyName, type, options, routeId) {
  */
 /**
  * @record
- * @template T
+ * @template E, S
  */
 function ParameterDefinition() { }
 if (false) {
@@ -3093,6 +3514,8 @@ if (false) {
     ParameterDefinition.prototype.sanitiser;
     /** @type {?} */
     ParameterDefinition.prototype.isRouteId;
+    /** @type {?} */
+    ParameterDefinition.prototype.isArray;
 }
 
 /**
@@ -3197,5 +3620,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