@coolon/angular-ui-powerups 0.0.8 → 0.0.10

package/bundles/coolon-angular-ui-powerups.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material'), require('@angular/platform-browser'), require('@angular/platform-browser/animations'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@coolon/pectin/lib/promise/deferred.class'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/animations'), require('resize-observer-polyfill'), require('@typescript-plus/fast-memoize-decorator'), require('lodash'), require('reflect-metadata'), require('@coolon/typescript-utilities'), require('@typescript-plus/fast-memoize-decorator/dist/src')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material', '@angular/platform-browser', '@angular/platform-browser/animations', '@coolon/pectin', '@angular/cdk/portal', '@coolon/pectin/lib/promise/deferred.class', '@angular/material/dialog', '@angular/router', '@angular/animations', 'resize-observer-polyfill', '@typescript-plus/fast-memoize-decorator', 'lodash', 'reflect-metadata', '@coolon/typescript-utilities', '@typescript-plus/fast-memoize-decorator/dist/src'], factory) :
-    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material, global.ng.platformBrowser, global.ng.platformBrowser.animations, global.pectin, global.ng.cdk.portal, global.deferred_class, global.ng.material.dialog, global.ng.router, global.ng.animations, global.ResizeObserver, global.fastMemoizeDecorator, global.lodash, null, global.typescriptUtilities, global.src));
-}(this, function (exports, common, core, forms, material, platformBrowser, animations, pectin, portal, deferred_class, dialog, router, animations$1, ResizeObserver, fastMemoizeDecorator, lodash, reflectMetadata, typescriptUtilities, src) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material'), require('@angular/platform-browser'), require('@angular/platform-browser/animations'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@coolon/pectin/lib/promise/deferred.class'), require('@coolon/typescript-utilities'), require('@angular/material/dialog'), require('@angular/material/list'), require('@angular/material/tabs'), require('@angular/material/tooltip'), require('@angular/router'), require('@angular/animations'), require('resize-observer-polyfill'), require('@typescript-plus/fast-memoize-decorator'), require('lodash'), require('reflect-metadata'), require('@typescript-plus/fast-memoize-decorator/dist/src')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material', '@angular/platform-browser', '@angular/platform-browser/animations', '@coolon/pectin', '@angular/cdk/portal', '@coolon/pectin/lib/promise/deferred.class', '@coolon/typescript-utilities', '@angular/material/dialog', '@angular/material/list', '@angular/material/tabs', '@angular/material/tooltip', '@angular/router', '@angular/animations', 'resize-observer-polyfill', '@typescript-plus/fast-memoize-decorator', 'lodash', 'reflect-metadata', '@typescript-plus/fast-memoize-decorator/dist/src'], factory) :
+    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material, global.ng.platformBrowser, global.ng.platformBrowser.animations, global.pectin, global.ng.cdk.portal, global.deferred_class, global.typescriptUtilities, global.ng.material.dialog, global.ng.material.list, global.ng.material.tabs, global.ng.material.tooltip, global.ng.router, global.ng.animations, global.ResizeObserver, global.fastMemoizeDecorator, global.lodash, null, global.src));
+}(this, function (exports, common, core, forms, material, platformBrowser, animations, pectin, portal, deferred_class, typescriptUtilities, dialog, list, tabs, tooltip, router, animations$1, ResizeObserver, fastMemoizeDecorator, lodash, reflectMetadata, src) { 'use strict';
 
     ResizeObserver = ResizeObserver && ResizeObserver.hasOwnProperty('default') ? ResizeObserver['default'] : ResizeObserver;
 
@@ -228,8 +228,6 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    /** @type {?} */
-    var EMPTY_ERRORS = new pectin.MutableListModel().readonly;
     /**
      * @abstract
      * @template T
@@ -238,9 +236,15 @@
         __extends(AbstractInputComponent, _super);
         function AbstractInputComponent() {
             var _this = _super.call(this) || this;
+            _this.valueModel = new pectin.DelegatingFormValueModel();
+            // TODO: fix this.
+            // tslint:disable-next-line:no-output-native
             _this.focus = new core.EventEmitter();
+            // tslint:disable-next-line:no-output-native
             _this.blur = new core.EventEmitter();
+            // tslint:disable-next-line:no-output-native
             _this.enterKey = new core.EventEmitter();
+            // tslint:disable-next-line:no-output-native
             _this.escapeKey = new core.EventEmitter();
             /** @type {?} */
             var self = _this;
@@ -256,6 +260,17 @@
             };
             return _this;
         }
+        Object.defineProperty(AbstractInputComponent.prototype, "userValueModel", {
+            set: /**
+             * @param {?} model
+             * @return {?}
+             */
+            function (model) {
+                this.valueModel.setDelegate(model);
+            },
+            enumerable: true,
+            configurable: true
+        });
         /**
          * @return {?}
          */
@@ -316,7 +331,7 @@
          * @return {?}
          */
         function (command) {
-            if (command && command.isEnabled()) {
+            if (command && command.enabled.value) {
                 command.execute();
             }
         };
@@ -327,7 +342,6 @@
          * @return {?}
          */
         function () {
-            // this._focused = this.valueModel['focused'] || new ValueHolder();
         };
         /**
          * @return {?}
@@ -343,8 +357,7 @@
              * @return {?}
              */
             function () {
-                // @ts-ignore
-                return ((/** @type {?} */ (this.valueModel))).enabled || pectin.Constant.TRUE;
+                return this.valueModel.enabled;
             },
             enumerable: true,
             configurable: true
@@ -363,7 +376,7 @@
              * @return {?}
              */
             function () {
-                return ((/** @type {?} */ (this.valueModel))).errorList || EMPTY_ERRORS;
+                return this.valueModel.errorList;
             },
             enumerable: true,
             configurable: true
@@ -379,7 +392,7 @@
             configurable: true
         });
         AbstractInputComponent.propDecorators = {
-            valueModel: [{ type: core.Input }],
+            userValueModel: [{ type: core.Input, args: ['valueModel',] }],
             label: [{ type: core.Input }],
             floatLabel: [{ type: core.Input }],
             hint: [{ type: core.Input }],
@@ -399,8 +412,9 @@
         };
         __decorate([
             pectin.UseDelegate(),
-            __metadata("design:type", pectin.MutableValueModel)
-        ], AbstractInputComponent.prototype, "valueModel", void 0);
+            __metadata("design:type", pectin.ValueModel),
+            __metadata("design:paramtypes", [pectin.ValueModel])
+        ], AbstractInputComponent.prototype, "userValueModel", null);
         return AbstractInputComponent;
     }(DisposableComponent));
     if (false) {
@@ -469,13 +483,35 @@
      * @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 {?}
          */
@@ -484,6 +520,16 @@
          */
         function () {
             pectin.assert.notNil(this.pectinCommand);
+            if (this.pectinCommand instanceof pectin.UnaryCommand) {
+                if (!this._commandParameterProvided) {
+                    pectin.lang.illegalState('UnaryCommands required the command parameter to be specified.');
+                }
+            }
+            else {
+                if (this._commandParameterProvided) {
+                    pectin.lang.illegalState('command parameters are only supported by UnaryCommands');
+                }
+            }
         };
         /**
          * @return {?}
@@ -535,8 +581,13 @@
         function ($event) {
             $event.preventDefault();
             $event.stopPropagation();
-            if (this.pectinCommand.isEnabled()) {
-                this.pectinCommand.execute({ event: $event });
+            if (this.pectinCommand.enabled.value) {
+                if (this.pectinCommand instanceof pectin.UnaryCommand) {
+                    this.pectinCommand.withContext({ event: $event }).execute(this.commandParameter);
+                }
+                else {
+                    this.pectinCommand.withContext({ event: $event }).execute();
+                }
             }
             else {
                 console.warn('disabled command clicked, ignoring.');
@@ -554,6 +605,7 @@
         ]; };
         CommandDirective.propDecorators = {
             pectinCommand: [{ type: core.Input }],
+            commandParameter: [{ type: core.Input }],
             notifyClick: [{ type: core.HostListener, args: ['click', ['$event'],] }]
         };
         return CommandDirective;
@@ -561,6 +613,16 @@
     if (false) {
         /** @type {?} */
         CommandDirective.prototype.pectinCommand;
+        /**
+         * @type {?}
+         * @private
+         */
+        CommandDirective.prototype._commandParameter;
+        /**
+         * @type {?}
+         * @private
+         */
+        CommandDirective.prototype._commandParameterProvided;
         /**
          * @type {?}
          * @private
@@ -589,7 +651,9 @@
          * @return {?}
          */
         function () {
-            this.pectinFocusBinding.focusCallbacks.notifyFocusIn();
+            if (this.hasBinding()) {
+                this.pectinFocusBinding.focusContext.notifyFocusIn();
+            }
         };
         /**
          * @return {?}
@@ -598,7 +662,9 @@
          * @return {?}
          */
         function () {
-            this.pectinFocusBinding.focusCallbacks.notifyFocusOut();
+            if (this.hasBinding()) {
+                this.pectinFocusBinding.focusContext.notifyFocusOut();
+            }
         };
         /**
          * @return {?}
@@ -617,16 +683,32 @@
         function () {
             var _this = this;
             // TODO: Make this also track the current enabled/disabled state.
-            var chain = pectin.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 = pectin.Dsl.disposeWith(this).chain;
+                chain.value(this.pectinFocusBinding.focusContext.focused).subscribe((/**
+                 * @param {?} focused
+                 * @return {?}
+                 */
+                function (focused) {
+                    if (focused && !_this.alreadyHasFocus()) {
+                        _this.tryAndFocus();
+                    }
+                }));
+            }
+            else {
+                pectin.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.
@@ -711,7 +793,7 @@
          * @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.
@@ -1214,7 +1296,7 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
-    exports.ɵo = /** @class */ (function (_super) {
+    exports.ɵp = /** @class */ (function (_super) {
         __extends(ActivityContainerComponent, _super);
         function ActivityContainerComponent() {
             var _this = _super.call(this) || this;
@@ -1349,18 +1431,18 @@
     }(DisposableComponent));
     if (false) {
         /** @type {?} */
-        exports.ɵo.prototype.parentInteractionContext;
+        exports.ɵp.prototype.parentInteractionContext;
         /** @type {?} */
-        exports.ɵo.prototype.initialActivity;
+        exports.ɵp.prototype.initialActivity;
         /** @type {?} */
-        exports.ɵo.prototype.tabs;
+        exports.ɵp.prototype.tabs;
         /** @type {?} */
-        exports.ɵo.prototype.activityTabs;
+        exports.ɵp.prototype.activityTabs;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵo.prototype.obsoleteTabs;
+        exports.ɵp.prototype.obsoleteTabs;
     }
     (function (ActivityContainerComponent) {
         /**
@@ -1379,7 +1461,7 @@
             /** @type {?} */
             ActivityContext.prototype.onCancel;
         }
-    })(exports.ɵo || (exports.ɵo = {}));
+    })(exports.ɵp || (exports.ɵp = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -1388,7 +1470,7 @@
     /**
      * @template D, R, E
      */
-    exports.ɵv = /** @class */ (function () {
+    exports.ɵw = /** @class */ (function () {
         function ActivityOutletComponent(componentFactoryResolver, viewContainerRef, injector) {
             this.componentFactoryResolver = componentFactoryResolver;
             this.viewContainerRef = viewContainerRef;
@@ -1499,27 +1581,27 @@
     }());
     if (false) {
         /** @type {?} */
-        exports.ɵv.prototype.interactionContext;
+        exports.ɵw.prototype.interactionContext;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵv.prototype.activityComponent;
+        exports.ɵw.prototype.activityComponent;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵv.prototype.componentFactoryResolver;
+        exports.ɵw.prototype.componentFactoryResolver;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵv.prototype.viewContainerRef;
+        exports.ɵw.prototype.viewContainerRef;
         /**
          * @type {?}
          * @private
          */
-        exports.ɵv.prototype.injector;
+        exports.ɵw.prototype.injector;
         /* Skipping unhandled member: ;*/
     }
     (function (ActivityOutletComponent) {
@@ -1580,7 +1662,7 @@
              */
             OutletInteractionContext.prototype.context;
         }
-    })(exports.ɵv || (exports.ɵv = {}));
+    })(exports.ɵw || (exports.ɵw = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -1591,6 +1673,7 @@
         function DialogInteractionService(dialogService) {
             var _this = _super.call(this) || this;
             _this.dialogService = dialogService;
+            typescriptUtilities.assert.notNil(dialogService);
             return _this;
         }
         /**
@@ -1635,7 +1718,7 @@
                 autoFocus: false
             };
             /** @type {?} */
-            var matDialogRef = (/** @type {?} */ (this.dialogService.open(exports.ɵo, config)));
+            var matDialogRef = (/** @type {?} */ (this.dialogService.open(exports.ɵp, config)));
             return new Promise((/**
              * @param {?} resolve
              * @param {?} reject
@@ -1727,13 +1810,13 @@
                             portal.PortalModule
                         ],
                         declarations: [
-                            exports.ɵo,
+                            exports.ɵp,
                             ConfirmationDialogComponent,
                             AlertDialogComponent,
-                            exports.ɵv
+                            exports.ɵw
                         ],
                         entryComponents: [
-                            exports.ɵo,
+                            exports.ɵp,
                             ConfirmationDialogComponent,
                             AlertDialogComponent
                         ],
@@ -1762,7 +1845,7 @@
         };
         BusyOverlayComponent.decorators = [
             { type: core.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}"]
                     }] }
@@ -1774,7 +1857,7 @@
             busy: [{ type: core.Input }]
         };
         __decorate([
-            pectin.UseDelegatingValueModel(),
+            pectin.UseDelegate(),
             __metadata("design:type", pectin.ValueModel)
         ], BusyOverlayComponent.prototype, "busyModel", void 0);
         __decorate([
@@ -1817,6 +1900,40 @@
         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: core.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: core.Input }]
+        };
+        return NavComponent;
+    }());
+    if (false) {
+        /** @type {?} */
+        NavComponent.prototype.places;
+    }
+
     /**
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
@@ -1957,19 +2074,25 @@
             { type: core.NgModule, args: [{
                         imports: [
                             common.CommonModule,
+                            animations.BrowserAnimationsModule,
                             material.MatProgressSpinnerModule,
-                            router.RouterModule
+                            router.RouterModule,
+                            tabs.MatTabsModule,
+                            list.MatListModule,
+                            tooltip.MatTooltipModule
                         ],
                         declarations: [
                             EmptyStateComponent,
                             BusyOverlayComponent,
-                            PlaceOutletComponent
+                            PlaceOutletComponent,
+                            NavComponent
                         ],
                         entryComponents: [BusyOverlayComponent],
                         exports: [
                             BusyOverlayComponent,
                             PlaceOutletComponent,
-                            EmptyStateComponent
+                            EmptyStateComponent,
+                            NavComponent
                         ],
                         providers: [
                             PlaceService
@@ -2039,6 +2162,7 @@
      * @return {?}
      */
     function slideDownAndUpAnimation(triggerName, options) {
+        // SEE to fix this: https://github.com/angular/angular/issues/15587#issuecomment-351510501
         /** @type {?} */
         var duration = pectin.OptionsHelper.get(options).getOptional('duration', '100ms');
         /** @type {?} */
@@ -2460,7 +2584,7 @@
     function ResolvedParameter() { }
     if (false) {
         /** @type {?} */
-        ResolvedParameter.prototype.parameter;
+        ResolvedParameter.prototype.parameterDef;
         /** @type {?} */
         ResolvedParameter.prototype.resolvedValue;
     }
@@ -2484,7 +2608,7 @@
              * @param {?} p
              * @return {?}
              */
-            function (p) { return p.parameter === parameter; }));
+            function (p) { return p.parameterDef === parameter; }));
             return resolved ? resolved.resolvedValue : null;
         };
         /**
@@ -2504,8 +2628,8 @@
              * @param {?} p
              * @return {?}
              */
-            function (p) { return p.parameter !== parameter; })).concat({
-                parameter: parameter,
+            function (p) { return p.parameterDef !== parameter; })).concat({
+                parameterDef: parameter,
                 resolvedValue: value
             }));
         };
@@ -2520,7 +2644,7 @@
         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
@@ -2535,7 +2659,7 @@
              * @param {?} p
              * @return {?}
              */
-            function (p) { return p.parameter.isRouteId; }));
+            function (p) { return p.parameterDef.isRouteId; }));
         };
         /**
          * @protected
@@ -2553,12 +2677,12 @@
              * @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;
         };
@@ -2591,7 +2715,7 @@
             /** @type {?} */
             var path = routeId ? [relativePath, routeId, this.getFormattedParameters()] : [relativePath, this.getFormattedParameters()];
             router.navigate(path, {
-                relativeTo: activatedRoute,
+                relativeTo: activatedRoute
             });
         };
         __decorate([
@@ -2648,11 +2772,23 @@
                 /** @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);
             }));
@@ -2903,41 +3039,162 @@
      * @fileoverview added by tsickle
      * @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
      */
+    /**
+     * @abstract
+     * @template T, S
+     */
+      /**
+     * @abstract
+     * @template T, S
+     */
+    exports.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 !lodash.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
+         */
+        exports.Sanitiser.prototype.initialValue;
+        /**
+         * @type {?}
+         * @private
+         */
+        exports.Sanitiser.prototype._sanitisedValue;
+        /** @type {?} */
+        exports.Sanitiser.prototype.parameterDef;
+        /** @type {?} */
+        exports.Sanitiser.prototype.snapshot;
+        /** @type {?} */
+        exports.Sanitiser.prototype.sanitiser;
+        /**
+         * @abstract
+         * @protected
+         * @param {?} snapshot
+         * @return {?}
+         */
+        exports.Sanitiser.prototype.readFrom = function (snapshot) { };
+        /**
+         * @abstract
+         * @protected
+         * @param {?} initialValue
+         * @param {?} sanitisedValue
+         * @return {?}
+         */
+        exports.Sanitiser.prototype.hasChanged = function (initialValue, sanitisedValue) { };
+        /**
+         * @abstract
+         * @param {?} dest
+         * @return {?}
+         */
+        exports.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 exports.Sanitiser.Array(def, snapshot, _this.getSanitiser(def)) :
+                    new exports.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];
@@ -2945,12 +3202,12 @@
                             _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;
@@ -2968,42 +3225,11 @@
                             }
                             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; }))];
                     }
                 });
             });
@@ -3017,57 +3243,36 @@
          * @return {?}
          */
         function (router) {
-            var _this = this;
-            pectin.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]);
+            pectin.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([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", [Object, String]),
-            __metadata("design:returntype", Promise)
-        ], RouteParameterSanitiser.prototype, "sanitiseParameter", null);
         __decorate([
             src.Memoize(),
             __metadata("design:type", Function),
@@ -3081,22 +3286,139 @@
          * @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;
+    })(exports.Sanitiser || (exports.Sanitiser = {}));
 
     /**
      * @fileoverview added by tsickle
@@ -3122,8 +3444,8 @@
             /** @type {?} */
             var routeParameters = typescriptUtilities.Klass.get(route.component).getMetadataList(exports.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 {?}
              */
@@ -3194,6 +3516,17 @@
         /** @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
@@ -3215,12 +3548,32 @@
         });
     }
     /**
+     * @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);
+            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(exports.RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
+            pectin.UseDelegate()(prototype, propertyKey);
+        });
+    }
+    /**
+     * @template T
+     * @param {?} type
+     * @param {?=} options
+     * @return {?}
+     */
+    function RouteParameter(type, options) {
         // assert.isTruthy(type.isValid());
         return (/**
          * @param {?} prototype
@@ -3234,6 +3587,47 @@
             pectin.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);
+            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(exports.RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
+            pectin.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);
+            typescriptUtilities.Klass.get(prototype).addToOwnMetadataList(exports.RouteParameterBindings.ROUTE_PARAMETER_LIST_KEY, param);
+            pectin.UseDelegate()(prototype, propertyKey);
+        });
+    }
     /**
      * @template T
      * @param {?} propertyName
@@ -3253,7 +3647,31 @@
             propertyName: propertyNameAsString,
             type: pectin.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 = typescriptUtilities.Opts.get(options);
+        /** @type {?} */
+        var propertyNameAsString = pectin.assert.notNil(propertyName).toString();
+        /** @type {?} */
+        var def = {
+            name: opts.getOptional('as', propertyNameAsString),
+            propertyName: propertyNameAsString,
+            type: pectin.assert.notNil(type),
+            sanitiser: opts.getOptional('listSanitiser', null),
+            isRouteId: false,
+            isArray: true
         };
         return def;
     }
@@ -3264,7 +3682,7 @@
      */
     /**
      * @record
-     * @template T
+     * @template E, S
      */
     function ParameterDefinition() { }
     if (false) {
@@ -3278,6 +3696,8 @@
         ParameterDefinition.prototype.sanitiser;
         /** @type {?} */
         ParameterDefinition.prototype.isRouteId;
+        /** @type {?} */
+        ParameterDefinition.prototype.isArray;
     }
 
     /**
@@ -3366,8 +3786,8 @@
     exports.AbstractActivity = AbstractActivity;
     exports.AbstractInputComponent = AbstractInputComponent;
     exports.AbstractPlaceComponent = AbstractPlaceComponent;
-    exports.ActivityContainerComponent = exports.ɵo;
-    exports.ActivityOutletComponent = exports.ɵv;
+    exports.ActivityContainerComponent = exports.ɵp;
+    exports.ActivityOutletComponent = exports.ɵw;
     exports.AlertDialogComponent = AlertDialogComponent;
     exports.AngularUiPowerupsModule = AngularUiPowerupsModule;
     exports.BusyOverlayComponent = BusyOverlayComponent;
@@ -3382,6 +3802,7 @@
     exports.InteractionContext = InteractionContext;
     exports.InteractionModule = InteractionModule;
     exports.LeavePlaceGuard = LeavePlaceGuard;
+    exports.NavComponent = NavComponent;
     exports.NumberInputComponent = NumberInputComponent;
     exports.PasswordInputComponent = PasswordInputComponent;
     exports.Place = Place;
@@ -3391,8 +3812,11 @@
     exports.PlaceService = PlaceService;
     exports.Point = Point;
     exports.QueryParameter = QueryParameter;
+    exports.QueryParameterList = QueryParameterList;
     exports.ResizeAwareComponent = ResizeAwareComponent;
     exports.RouteId = RouteId;
+    exports.RouteParameter = RouteParameter;
+    exports.RouteParameterList = RouteParameterList;
     exports.RouteParameterSanitiser = RouteParameterSanitiser;
     exports.SelectInputComponent = SelectInputComponent;
     exports.StringInputComponent = StringInputComponent;
@@ -3410,13 +3834,14 @@
     exports.ɵk = BusyOverlayComponent;
     exports.ɵl = PlaceOutletComponent;
     exports.ɵm = PlaceService;
-    exports.ɵn = InteractionModule;
-    exports.ɵp = ConfirmationDialogComponent;
-    exports.ɵq = AbstractActivity;
-    exports.ɵr = ACTIVITY_DATA;
-    exports.ɵt = AlertDialogComponent;
-    exports.ɵw = DialogInteractionService;
-    exports.ɵx = InteractionContext;
+    exports.ɵn = NavComponent;
+    exports.ɵo = InteractionModule;
+    exports.ɵq = ConfirmationDialogComponent;
+    exports.ɵr = AbstractActivity;
+    exports.ɵs = ACTIVITY_DATA;
+    exports.ɵu = AlertDialogComponent;
+    exports.ɵx = DialogInteractionService;
+    exports.ɵy = InteractionContext;
 
     Object.defineProperty(exports, '__esModule', { value: true });