@coolon/angular-ui-powerups 0.0.8 → 0.0.10

package/fesm2015/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 { __decorate, __metadata, __awaiter } 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';
 
 /**
@@ -35,8 +38,6 @@ class DisposableComponent extends GarbageCollector {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
-/** @type {?} */
-const EMPTY_ERRORS = new MutableListModel().readonly;
 /**
  * @abstract
  * @template T
@@ -44,9 +45,15 @@ const EMPTY_ERRORS = new MutableListModel().readonly;
 class AbstractInputComponent extends DisposableComponent {
     constructor() {
         super();
+        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 {?} */
         const self = this;
@@ -61,6 +68,13 @@ class AbstractInputComponent extends DisposableComponent {
             }
         };
     }
+    /**
+     * @param {?} model
+     * @return {?}
+     */
+    set userValueModel(model) {
+        this.valueModel.setDelegate(model);
+    }
     /**
      * @return {?}
      */
@@ -101,7 +115,7 @@ class AbstractInputComponent extends DisposableComponent {
      * @return {?}
      */
     safelyInvoke(command) {
-        if (command && command.isEnabled()) {
+        if (command && command.enabled.value) {
             command.execute();
         }
     }
@@ -109,7 +123,6 @@ class AbstractInputComponent extends DisposableComponent {
      * @return {?}
      */
     ngOnInit() {
-        // this._focused = this.valueModel['focused'] || new ValueHolder();
     }
     /**
      * @return {?}
@@ -121,8 +134,7 @@ class AbstractInputComponent extends DisposableComponent {
      * @return {?}
      */
     get enabled() {
-        // @ts-ignore
-        return ((/** @type {?} */ (this.valueModel))).enabled || Constant.TRUE;
+        return this.valueModel.enabled;
     }
     /**
      * @return {?}
@@ -134,7 +146,7 @@ class AbstractInputComponent extends DisposableComponent {
      * @return {?}
      */
     get errorList() {
-        return ((/** @type {?} */ (this.valueModel))).errorList || EMPTY_ERRORS;
+        return this.valueModel.errorList;
     }
     /**
      * @return {?}
@@ -144,7 +156,7 @@ class AbstractInputComponent extends DisposableComponent {
     }
 }
 AbstractInputComponent.propDecorators = {
-    valueModel: [{ type: Input }],
+    userValueModel: [{ type: Input, args: ['valueModel',] }],
     label: [{ type: Input }],
     floatLabel: [{ type: Input }],
     hint: [{ type: Input }],
@@ -164,8 +176,9 @@ AbstractInputComponent.propDecorators = {
 };
 __decorate([
     UseDelegate(),
-    __metadata("design:type", MutableValueModel)
-], AbstractInputComponent.prototype, "valueModel", void 0);
+    __metadata("design:type", ValueModel),
+    __metadata("design:paramtypes", [ValueModel])
+], AbstractInputComponent.prototype, "userValueModel", null);
 if (false) {
     /** @type {?} */
     AbstractInputComponent.prototype.valueModel;
@@ -227,6 +240,9 @@ NumberInputComponent.ctorParameters = () => [];
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/**
+ * @template P
+ */
 class CommandDirective extends GarbageCollector {
     /**
      * @param {?} elementRef
@@ -234,12 +250,37 @@ class CommandDirective extends GarbageCollector {
     constructor(elementRef) {
         super();
         this.elementRef = elementRef;
+        this._commandParameterProvided = false;
+    }
+    /**
+     * @param {?} value
+     * @return {?}
+     */
+    set commandParameter(value) {
+        this._commandParameterProvided = true;
+        this._commandParameter = value;
+    }
+    /**
+     * @return {?}
+     */
+    get commandParameter() {
+        return this._commandParameter;
     }
     /**
      * @return {?}
      */
     ngOnInit() {
         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 {?}
@@ -280,8 +321,13 @@ class CommandDirective extends GarbageCollector {
     notifyClick($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.');
@@ -300,11 +346,22 @@ CommandDirective.ctorParameters = () => [
 ];
 CommandDirective.propDecorators = {
     pectinCommand: [{ type: Input }],
+    commandParameter: [{ type: Input }],
     notifyClick: [{ type: HostListener, args: ['click', ['$event'],] }]
 };
 if (false) {
     /** @type {?} */
     CommandDirective.prototype.pectinCommand;
+    /**
+     * @type {?}
+     * @private
+     */
+    CommandDirective.prototype._commandParameter;
+    /**
+     * @type {?}
+     * @private
+     */
+    CommandDirective.prototype._commandParameterProvided;
     /**
      * @type {?}
      * @private
@@ -333,13 +390,17 @@ class FocusBindingDirective extends DisposableComponent {
      * @return {?}
      */
     onFocusIn() {
-        this.pectinFocusBinding.focusCallbacks.notifyFocusIn();
+        if (this.hasBinding()) {
+            this.pectinFocusBinding.focusContext.notifyFocusIn();
+        }
     }
     /**
      * @return {?}
      */
     onFocusOut() {
-        this.pectinFocusBinding.focusCallbacks.notifyFocusOut();
+        if (this.hasBinding()) {
+            this.pectinFocusBinding.focusContext.notifyFocusOut();
+        }
     }
     /**
      * @return {?}
@@ -351,16 +412,28 @@ class FocusBindingDirective extends DisposableComponent {
      */
     ngAfterViewInit() {
         // TODO: Make this also track the current enabled/disabled state.
-        const { chain } = Dsl.disposeWith(this);
-        chain.value(this.pectinFocusBinding.focused).subscribe((/**
-         * @param {?} focused
-         * @return {?}
-         */
-        (focused) => {
-            if (focused && !this.alreadyHasFocus()) {
-                this.tryAndFocus();
-            }
-        }));
+        if (this.hasBinding()) {
+            const { chain } = Dsl.disposeWith(this);
+            chain.value(this.pectinFocusBinding.focusContext.focused).subscribe((/**
+             * @param {?} focused
+             * @return {?}
+             */
+            (focused) => {
+                if (focused && !this.alreadyHasFocus()) {
+                    this.tryAndFocus();
+                }
+            }));
+        }
+        else {
+            Logger.get(this).warn("pectinFocusBinding was nil");
+        }
+    }
+    /**
+     * @private
+     * @return {?}
+     */
+    hasBinding() {
+        return !!this.pectinFocusBinding && !!this.pectinFocusBinding.focusContext;
     }
     // Hook method for debugging via tracing.
     /**
@@ -416,7 +489,7 @@ class FocusBindingDirective extends DisposableComponent {
      * @return {?}
      */
     modelShouldStillHaveFocus() {
-        return this.pectinFocusBinding.focused.value;
+        return this.hasBinding() && this.pectinFocusBinding.focusContext.focused.value;
     }
     // Hook method for debugging via tracing.
     /**
@@ -1150,6 +1223,7 @@ class DialogInteractionService extends InteractionContext {
     constructor(dialogService) {
         super();
         this.dialogService = dialogService;
+        assert$1.notNil(dialogService);
     }
     /**
      * @template D, R, E
@@ -1290,7 +1364,7 @@ class BusyOverlayComponent {
 }
 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}"]
             }] }
@@ -1302,7 +1376,7 @@ BusyOverlayComponent.propDecorators = {
     busy: [{ type: Input }]
 };
 __decorate([
-    UseDelegatingValueModel(),
+    UseDelegate(),
     __metadata("design:type", ValueModel)
 ], BusyOverlayComponent.prototype, "busyModel", void 0);
 __decorate([
@@ -1343,6 +1417,36 @@ EmptyStateComponent.decorators = [
 /** @nocollapse */
 EmptyStateComponent.ctorParameters = () => [];
 
+/**
+ * @fileoverview added by tsickle
+ * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
+ */
+class NavComponent {
+    constructor() {
+    }
+    /**
+     * @return {?}
+     */
+    ngOnInit() {
+    }
+}
+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 = () => [];
+NavComponent.propDecorators = {
+    places: [{ type: Input }]
+};
+if (false) {
+    /** @type {?} */
+    NavComponent.prototype.places;
+}
+
 /**
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -1460,19 +1564,25 @@ PlaceModule.decorators = [
     { 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
@@ -1537,6 +1647,7 @@ const defaultHiddenStyleDef = style({
  * @return {?}
  */
 function slideDownAndUpAnimation(triggerName, options) {
+    // SEE to fix this: https://github.com/angular/angular/issues/15587#issuecomment-351510501
     /** @type {?} */
     const duration = OptionsHelper.get(options).getOptional('duration', '100ms');
     /** @type {?} */
@@ -1931,7 +2042,7 @@ function Place(options) {
 function ResolvedParameter() { }
 if (false) {
     /** @type {?} */
-    ResolvedParameter.prototype.parameter;
+    ResolvedParameter.prototype.parameterDef;
     /** @type {?} */
     ResolvedParameter.prototype.resolvedValue;
 }
@@ -1953,7 +2064,7 @@ class ResolvedParameters {
          * @param {?} p
          * @return {?}
          */
-        p => p.parameter === parameter));
+        p => p.parameterDef === parameter));
         return resolved ? resolved.resolvedValue : null;
     }
     /**
@@ -1967,8 +2078,8 @@ class ResolvedParameters {
          * @param {?} p
          * @return {?}
          */
-        p => p.parameter !== parameter)).concat({
-            parameter,
+        p => p.parameterDef !== parameter)).concat({
+            parameterDef: parameter,
             resolvedValue: value
         }));
     }
@@ -1979,7 +2090,7 @@ class ResolvedParameters {
     getFormattedRouteId() {
         /** @type {?} */
         const routeIdParam = this.getRouteIdParam();
-        return routeIdParam ? routeIdParam.parameter.type.format(routeIdParam.resolvedValue) : null;
+        return routeIdParam ? routeIdParam.parameterDef.type.format(routeIdParam.resolvedValue) : null;
     }
     /**
      * @private
@@ -1990,7 +2101,7 @@ class ResolvedParameters {
          * @param {?} p
          * @return {?}
          */
-        p => p.parameter.isRouteId));
+        p => p.parameterDef.isRouteId));
     }
     /**
      * @protected
@@ -2004,12 +2115,12 @@ class ResolvedParameters {
          * @param {?} p
          * @return {?}
          */
-        p => !p.parameter.isRouteId)).forEach((/**
+        p => !p.parameterDef.isRouteId)).forEach((/**
          * @param {?} p
          * @return {?}
          */
         p => {
-            params[p.parameter.name] = p.parameter.type.format(p.resolvedValue);
+            params[p.parameterDef.name] = p.parameterDef.type.format(p.resolvedValue);
         }));
         return params;
     }
@@ -2033,7 +2144,7 @@ class ResolvedParameters {
         /** @type {?} */
         const path = routeId ? [relativePath, routeId, this.getFormattedParameters()] : [relativePath, this.getFormattedParameters()];
         router.navigate(path, {
-            relativeTo: activatedRoute,
+            relativeTo: activatedRoute
         });
     }
 }
@@ -2093,11 +2204,23 @@ class RouteParameterBindings extends GarbageCollector {
             /** @type {?} */
             const result = [];
             routeParameterDefs.forEach((/**
-             * @param {?} parameter
+             * @param {?} parameterDef
              * @return {?}
              */
-            parameter => {
-                result.push({ parameter, resolvedValue: parameter.type.parse(params.get(parameter.name)) });
+            parameterDef => {
+                /** @type {?} */
+                let resolvedValue;
+                if (parameterDef.isArray) {
+                    resolvedValue = params.getAll(parameterDef.name).map((/**
+                     * @param {?} v
+                     * @return {?}
+                     */
+                    v => parameterDef.type.parse(v)));
+                }
+                else {
+                    resolvedValue = parameterDef.type.parse(params.get(parameterDef.name));
+                }
+                result.push({ parameterDef: parameterDef, resolvedValue: resolvedValue });
             }));
             return new ResolvedParameters(result);
         }));
@@ -2320,70 +2443,147 @@ if (false) {
  * @fileoverview added by tsickle
  * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
  */
+/**
+ * @abstract
+ * @template T, S
+ */
+class Sanitiser {
+    /**
+     * @param {?} parameterDef
+     * @param {?} snapshot
+     * @param {?} sanitiser
+     */
+    constructor(parameterDef, snapshot, sanitiser) {
+        this.parameterDef = parameterDef;
+        this.snapshot = snapshot;
+        this.sanitiser = sanitiser;
+    }
+    /**
+     * @return {?}
+     */
+    isRouteId() {
+        return this.parameterDef.isRouteId;
+    }
+    /**
+     * @return {?}
+     */
+    get valueChanged() {
+        return !isNil(this.initialValue) && this.hasChanged(this.initialValue, this.sanitisedValue);
+    }
+    /**
+     * @return {?}
+     */
+    get sanitisedValue() {
+        return this._sanitisedValue;
+    }
+    /**
+     * @return {?}
+     */
+    sanitize() {
+        return __awaiter(this, void 0, void 0, function* () {
+            if (this.sanitiser) {
+                this.initialValue = this.readFrom(this.snapshot);
+                this._sanitisedValue = yield this.sanitiser.sanitise(this.initialValue);
+                if (this.initialValue !== this._sanitisedValue) {
+                    return false;
+                }
+            }
+            return true;
+        });
+    }
+}
+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) { };
+}
 class RouteParameterSanitiser {
     /**
      * @param {?} parameterDefs
+     * @param {?} snapshot
      * @param {?} injector
      */
-    constructor(parameterDefs, injector) {
+    constructor(parameterDefs, snapshot, injector) {
         this.parameterDefs = parameterDefs;
+        this.snapshot = snapshot;
         this.injector = injector;
-        this.sanitisedParameters = [];
-        this.routeParameter = parameterDefs.find((/**
+        this.parameterSanitisers = [];
+        /** @type {?} */
+        const sanitisers = parameterDefs.map((/**
+         * @param {?} def
+         * @return {?}
+         */
+        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 {?}
          */
-        p => p.isRouteId));
-        this.queryParameters = parameterDefs.filter((/**
+        p => p.isRouteId()));
+        this.parameterSanitisers = sanitisers.filter((/**
          * @param {?} p
          * @return {?}
          */
-        p => !p.isRouteId));
+        p => !p.isRouteId()));
     }
     /**
-     * @param {?} snapshot
      * @return {?}
      */
-    sanitise(snapshot) {
+    sanitise() {
         return __awaiter(this, void 0, void 0, function* () {
-            if (this.routeParameter) {
-                /** @type {?} */
-                const routeOk = yield this.sanitiseParameter(this.routeParameter, snapshot.paramMap.get(this.routeParameter.name));
-                if (!routeOk) {
+            if (this.routeIdSanitiser) {
+                yield this.routeIdSanitiser.sanitize();
+                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 false;
                 }
             }
-            for (const param of this.queryParameters) {
-                yield this.sanitiseParameter(param, snapshot.queryParamMap.get(param.name));
+            for (const sanitiser of this.parameterSanitisers) {
+                yield sanitiser.sanitize();
             }
-            return this.sanitisedParameters.length === 0;
-        });
-    }
-    /**
-     * @template T
-     * @param {?} def
-     * @param {?} formattedInitialValue
-     * @return {?}
-     */
-    sanitiseParameter(def, formattedInitialValue) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (def) {
-                /** @type {?} */
-                const sanitiser = this.getSanitiser(def);
-                if (sanitiser) {
-                    /** @type {?} */
-                    const initialValue = def.type.parse(formattedInitialValue);
-                    /** @type {?} */
-                    const sanitisedValue = yield sanitiser.sanitise(initialValue);
-                    if (initialValue !== sanitisedValue) {
-                        this.sanitisedParameters.push({ def, value: def.type.format(sanitisedValue) });
-                        return false;
-                    }
-                }
-            }
-            return true;
+            return !this.parameterSanitisers.find((/**
+             * @param {?} s
+             * @return {?}
+             */
+            s => s.valueChanged));
         });
     }
     /**
@@ -2391,35 +2591,24 @@ class RouteParameterSanitiser {
      * @return {?}
      */
     redirect(router) {
-        assert.isTruthy(this.sanitisedParameters.length !== 0);
-        /** @type {?} */
-        const sanitisedRouteId = this.sanitisedParameters.find((/**
-         * @param {?} s
-         * @return {?}
-         */
-        s => 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 {?} */
-            const queryParams = this.sanitisedParameters.filter((/**
+            const routeParams = {};
+            this.parameterSanitisers.forEach((/**
              * @param {?} s
              * @return {?}
              */
-            s => s.def !== this.routeParameter))
-                .reduce((/**
-             * @param {?} params
-             * @param {?} item
-             * @return {?}
-             */
-            (params, item) => (Object.assign({}, params, { [item.def.name]: item.value }))), {});
-            return router.navigate(['.', queryParams]);
+            s => s.injectRouteParam(routeParams)));
+            return router.navigate(['.', routeParams]);
         }
     }
     /**
      * @private
-     * @template T
+     * @template T, S
      * @param {?} def
      * @return {?}
      */
@@ -2427,12 +2616,6 @@ class RouteParameterSanitiser {
         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),
@@ -2444,22 +2627,93 @@ 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
+     */
+    class Value extends Sanitiser {
+        /**
+         * @param {?} snapshot
+         * @return {?}
+         */
+        readFrom(snapshot) {
+            /** @type {?} */
+            const 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 {?}
+         */
+        hasChanged(initialValue, sanitisedValue) {
+            return initialValue !== sanitisedValue;
+        }
+        /**
+         * @param {?} dest
+         * @return {?}
+         */
+        injectRouteParam(dest) {
+            dest[this.parameterDef.name] = this.parameterDef.type.format(this.sanitisedValue);
+        }
+    }
+    Sanitiser.Value = Value;
+    /**
+     * @template T
+     */
+    class Array extends Sanitiser {
+        /**
+         * @param {?} snapshot
+         * @return {?}
+         */
+        readFrom(snapshot) {
+            /** @type {?} */
+            const rawValues = snapshot.queryParamMap.getAll(this.parameterDef.name);
+            return rawValues.map((/**
+             * @param {?} value
+             * @return {?}
+             */
+            value => this.parameterDef.type.parse(value)));
+        }
+        /**
+         * @protected
+         * @param {?} initialValue
+         * @param {?} sanitisedValue
+         * @return {?}
+         */
+        hasChanged(initialValue, sanitisedValue) {
+            return initialValue !== sanitisedValue;
+        }
+        /**
+         * @param {?} dest
+         * @return {?}
+         */
+        injectRouteParam(dest) {
+            dest[this.parameterDef.name] = this.sanitisedValue.map((/**
+             * @param {?} v
+             * @return {?}
+             */
+            v => this.parameterDef.type.format(v)));
+        }
+    }
+    Sanitiser.Array = Array;
+})(Sanitiser || (Sanitiser = {}));
 
 /**
  * @fileoverview added by tsickle
@@ -2483,8 +2737,8 @@ class PlaceRouteGuard {
         /** @type {?} */
         const routeParameters = Klass.get(route.component).getMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY);
         /** @type {?} */
-        const sanitiser = new RouteParameterSanitiser(routeParameters, this.injector);
-        return sanitiser.sanitise(route).then((/**
+        const sanitiser = new RouteParameterSanitiser(routeParameters, route, this.injector);
+        return sanitiser.sanitise().then((/**
          * @param {?} proceed
          * @return {?}
          */
@@ -2554,6 +2808,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
@@ -2575,12 +2840,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 {?}
+     */
+    (prototype, propertyKey) => {
+        /** @type {?} */
+        const 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
@@ -2594,6 +2879,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 {?}
+     */
+    (prototype, propertyKey) => {
+        /** @type {?} */
+        const 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 {?}
+     */
+    (prototype, propertyKey) => {
+        /** @type {?} */
+        const param = createArrayDefinition(propertyKey, elementType, options);
+        Klass.get(prototype).addToOwnMetadataList(RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
+        UseDelegate()(prototype, propertyKey);
+    });
+}
 /**
  * @template T
  * @param {?} propertyName
@@ -2613,7 +2939,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 {?} */
+    const opts = Opts.get(options);
+    /** @type {?} */
+    const propertyNameAsString = assert.notNil(propertyName).toString();
+    /** @type {?} */
+    const def = {
+        name: opts.getOptional('as', propertyNameAsString),
+        propertyName: propertyNameAsString,
+        type: assert.notNil(type),
+        sanitiser: opts.getOptional('listSanitiser', null),
+        isRouteId: false,
+        isArray: true
     };
     return def;
 }
@@ -2624,7 +2974,7 @@ function createDefinition(propertyName, type, options, routeId) {
  */
 /**
  * @record
- * @template T
+ * @template E, S
  */
 function ParameterDefinition() { }
 if (false) {
@@ -2638,6 +2988,8 @@ if (false) {
     ParameterDefinition.prototype.sanitiser;
     /** @type {?} */
     ParameterDefinition.prototype.isRouteId;
+    /** @type {?} */
+    ParameterDefinition.prototype.isArray;
 }
 
 /**
@@ -2720,5 +3072,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