@coolon/angular-ui-powerups 1.3.7 → 1.4.0

package/esm5/lib/components/focus-container/focus-container.component.js

@@ -1,33 +1,31 @@
 import { __decorate, __extends, __metadata, __param } from "tslib";
-import { Component, Host, HostBinding } from '@angular/core';
-import { FocusManager, Trace } from '@coolon/pectin';
+import { Component, HostBinding, Self } from '@angular/core';
+import { Command, FocusManager, Trace } from '@coolon/pectin';
 import { DisposableComponent } from '../disposable-component';
 var FocusContainerComponent = /** @class */ (function (_super) {
     __extends(FocusContainerComponent, _super);
     function FocusContainerComponent(focusManager) {
         var _this = _super.call(this) || this;
         _this.focusManager = focusManager;
+        _this.restoreFocusCommand = Command.create(function () {
+            _this.restoreFocus();
+        });
         _this.tabIndex = -1;
         return _this;
     }
     FocusContainerComponent.prototype.ngOnInit = function () {
     };
+    // @Trace()
     FocusContainerComponent.prototype.restoreFocus = function () {
         this.focusManager.restoreFocus();
     };
     FocusContainerComponent.ctorParameters = function () { return [
-        { type: FocusManager, decorators: [{ type: Host }] }
+        { type: FocusManager, decorators: [{ type: Self }] }
     ]; };
     __decorate([
         HostBinding('attr.tabindex'),
         __metadata("design:type", Object)
     ], FocusContainerComponent.prototype, "tabIndex", void 0);
-    __decorate([
-        Trace(),
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], FocusContainerComponent.prototype, "restoreFocus", null);
     FocusContainerComponent = __decorate([
         Component({
             selector: 'aup-focus-container',
@@ -37,7 +35,7 @@ var FocusContainerComponent = /** @class */ (function (_super) {
             ],
             styles: [":host{display:block}"]
         }),
-        __param(0, Host()),
+        __param(0, Self()),
         __metadata("design:paramtypes", [FocusManager])
     ], FocusContainerComponent);
     return FocusContainerComponent;

package/esm5/lib/components/focus-container/focus-container.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"focus-container.component.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/focus-container/focus-container.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,WAAW,EAAU,MAAM,eAAe,CAAC;AACrE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAU9D;IAA6C,2CAAmB;IAK9D,iCAA6B,YAA0B;QAAvD,YACE,iBAAO,SACR;QAF4B,kBAAY,GAAZ,YAAY,CAAc;QAF9C,cAAQ,GAAG,CAAC,CAAC,CAAC;;IAIvB,CAAC;IAED,0CAAQ,GAAR;IACA,CAAC;IAGD,8CAAY,GAAZ;QACE,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;IACnC,CAAC;;gBAV0C,YAAY,uBAA1C,IAAI;;IAFjB;QADC,WAAW,CAAC,eAAe,CAAC;;6DACN;IAUvB;QADC,KAAK,EAAE;;;;+DAGP;IAfU,uBAAuB;QARnC,SAAS,CAAC;YACT,QAAQ,EAAE,qBAAqB;YAC/B,uCAA+C;YAE/C,SAAS,EAAE;gBACT,EAAE,OAAO,EAAE,YAAY,EAAE;aAC1B;;SACF,CAAC;QAMa,WAAA,IAAI,EAAE,CAAA;yCAAwB,YAAY;OAL5C,uBAAuB,CAiBnC;IAAD,8BAAC;CAAA,AAjBD,CAA6C,mBAAmB,GAiB/D;SAjBY,uBAAuB","sourcesContent":["import { Component, Host, HostBinding, OnInit } from '@angular/core';\nimport { FocusManager, Trace } from '@coolon/pectin';\nimport { DisposableComponent } from '../disposable-component';\n\n@Component({\n  selector: 'aup-focus-container',\n  templateUrl: './focus-container.component.html',\n  styleUrls: ['./focus-container.component.scss'],\n  providers: [\n    { provide: FocusManager }\n  ]\n})\nexport class FocusContainerComponent extends DisposableComponent implements OnInit {\n\n  @HostBinding('attr.tabindex')\n  readonly tabIndex = -1;\n\n  constructor(@Host() readonly focusManager: FocusManager) {\n    super();\n  }\n\n  ngOnInit() {\n  }\n\n  @Trace()\n  restoreFocus() {\n    this.focusManager.restoreFocus();\n  }\n\n}\n"]}
+{"version":3,"file":"focus-container.component.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/focus-container/focus-container.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAQ,WAAW,EAAU,IAAI,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAU9D;IAA6C,2CAAmB;IAS9D,iCAA6B,YAA0B;QAAvD,YACE,iBAAO,SACR;QAF4B,kBAAY,GAAZ,YAAY,CAAc;QAP9C,yBAAmB,GAAG,OAAO,CAAC,MAAM,CAAC;YAC5C,KAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC,CAAC,CAAC;QAGM,cAAQ,GAAG,CAAC,CAAC,CAAC;;IAIvB,CAAC;IAED,0CAAQ,GAAR;IACA,CAAC;IAED,WAAW;IACX,8CAAY,GAAZ;QACE,IAAI,CAAC,YAAY,CAAC,YAAY,EAAE,CAAC;IACnC,CAAC;;gBAV0C,YAAY,uBAA1C,IAAI;;IAFjB;QADC,WAAW,CAAC,eAAe,CAAC;;6DACN;IAPZ,uBAAuB;QARnC,SAAS,CAAC;YACT,QAAQ,EAAE,qBAAqB;YAC/B,uCAA+C;YAE/C,SAAS,EAAE;gBACT,EAAE,OAAO,EAAE,YAAY,EAAE;aAC1B;;SACF,CAAC;QAUa,WAAA,IAAI,EAAE,CAAA;yCAAwB,YAAY;OAT5C,uBAAuB,CAqBnC;IAAD,8BAAC;CAAA,AArBD,CAA6C,mBAAmB,GAqB/D;SArBY,uBAAuB","sourcesContent":["import { Component, Host, HostBinding, OnInit, Self } from '@angular/core';\nimport { Command, FocusManager, Trace } from '@coolon/pectin';\nimport { DisposableComponent } from '../disposable-component';\n\n@Component({\n  selector: 'aup-focus-container',\n  templateUrl: './focus-container.component.html',\n  styleUrls: ['./focus-container.component.scss'],\n  providers: [\n    { provide: FocusManager }\n  ]\n})\nexport class FocusContainerComponent extends DisposableComponent implements OnInit {\n\n  readonly restoreFocusCommand = Command.create(() => {\n    this.restoreFocus();\n  });\n\n  @HostBinding('attr.tabindex')\n  readonly tabIndex = -1;\n\n  constructor(@Self() readonly focusManager: FocusManager) {\n    super();\n  }\n\n  ngOnInit() {\n  }\n\n  // @Trace()\n  restoreFocus() {\n    this.focusManager.restoreFocus();\n  }\n\n}\n"]}

package/esm5/lib/components/index.js

@@ -18,4 +18,5 @@ export * from "./switch-case/switch-case.component";
 export * from "./types/bounds.class";
 export * from "./types/dimension.class";
 export * from "./types/point.class";
+export * from "./vertical-focus-container/vertical-focus-container.component";
 //# sourceMappingURL=index.js.map

package/esm5/lib/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6CAA6C,CAAC;AAC5D,cAAc,kCAAkC,CAAC;AACjD,cAAc,iDAAiD,CAAC;AAChE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iDAAiD,CAAC;AAChE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qCAAqC,CAAC;AACpD,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC","sourcesContent":["/**\n * @file Automatically generated by barrelsby.\n */\n\nexport * from \"./components.module\";\nexport * from \"./disposable-component\";\nexport * from \"./focusable.component\";\nexport * from \"./resize-aware.component\";\nexport * from \"./focus-container/focus-container.component\";\nexport * from \"./forms/abstract-input.component\";\nexport * from \"./forms/checkbox-input/checkbox-input.component\";\nexport * from \"./forms/number-input/number-input.component\";\nexport * from \"./forms/password-input/password-input.component\";\nexport * from \"./forms/select-input/select-input.component\";\nexport * from \"./forms/string-input/string-input.component\";\nexport * from \"./noop/noop.component\";\nexport * from \"./scroll-container/scroll-container.component\";\nexport * from \"./switch-case/switch-case.component\";\nexport * from \"./types/bounds.class\";\nexport * from \"./types/dimension.class\";\nexport * from \"./types/point.class\";\n"]}
+{"version":3,"file":"index.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6CAA6C,CAAC;AAC5D,cAAc,kCAAkC,CAAC;AACjD,cAAc,iDAAiD,CAAC;AAChE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,iDAAiD,CAAC;AAChE,cAAc,6CAA6C,CAAC;AAC5D,cAAc,6CAA6C,CAAC;AAC5D,cAAc,uBAAuB,CAAC;AACtC,cAAc,+CAA+C,CAAC;AAC9D,cAAc,qCAAqC,CAAC;AACpD,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,+DAA+D,CAAC","sourcesContent":["/**\n * @file Automatically generated by barrelsby.\n */\n\nexport * from \"./components.module\";\nexport * from \"./disposable-component\";\nexport * from \"./focusable.component\";\nexport * from \"./resize-aware.component\";\nexport * from \"./focus-container/focus-container.component\";\nexport * from \"./forms/abstract-input.component\";\nexport * from \"./forms/checkbox-input/checkbox-input.component\";\nexport * from \"./forms/number-input/number-input.component\";\nexport * from \"./forms/password-input/password-input.component\";\nexport * from \"./forms/select-input/select-input.component\";\nexport * from \"./forms/string-input/string-input.component\";\nexport * from \"./noop/noop.component\";\nexport * from \"./scroll-container/scroll-container.component\";\nexport * from \"./switch-case/switch-case.component\";\nexport * from \"./types/bounds.class\";\nexport * from \"./types/dimension.class\";\nexport * from \"./types/point.class\";\nexport * from \"./vertical-focus-container/vertical-focus-container.component\";\n"]}

package/esm5/lib/components/vertical-focus-container/vertical-focus-container.component.js

@@ -0,0 +1,90 @@
+import { __decorate, __extends, __metadata, __param } from "tslib";
+import { Component, HostListener, Input, Self } from '@angular/core';
+import { Command, FocusManager, TrackExternal } from '@coolon/pectin';
+import { FocusContainerComponent } from '../focus-container/focus-container.component';
+var VerticalFocusContainerComponent = /** @class */ (function (_super) {
+    __extends(VerticalFocusContainerComponent, _super);
+    function VerticalFocusContainerComponent(focusManager) {
+        var _this = _super.call(this, focusManager) || this;
+        _this.focusManager = focusManager;
+        return _this;
+    }
+    VerticalFocusContainerComponent.prototype.arrowLeft = function (event) {
+        if (this.leftArrowCommand.enabled.value) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.leftArrowCommand.execute();
+        }
+    };
+    VerticalFocusContainerComponent.prototype.arrowRight = function (event) {
+        if (this.rightArrowCommand.enabled.value) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.rightArrowCommand.execute();
+        }
+    };
+    VerticalFocusContainerComponent.prototype.arrowDown = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.focusManager.focusNext();
+    };
+    VerticalFocusContainerComponent.prototype.arrowUp = function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.focusManager.focusPrevious();
+    };
+    VerticalFocusContainerComponent.prototype.ngOnInit = function () {
+    };
+    VerticalFocusContainerComponent.ctorParameters = function () { return [
+        { type: FocusManager, decorators: [{ type: Self }] }
+    ]; };
+    __decorate([
+        Input('command.arrowRight'),
+        TrackExternal(),
+        __metadata("design:type", Command)
+    ], VerticalFocusContainerComponent.prototype, "rightArrowCommand", void 0);
+    __decorate([
+        Input('command.arrowLeft'),
+        TrackExternal(),
+        __metadata("design:type", Command)
+    ], VerticalFocusContainerComponent.prototype, "leftArrowCommand", void 0);
+    __decorate([
+        HostListener('keyup.arrowLeft', ['$event']),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [KeyboardEvent]),
+        __metadata("design:returntype", void 0)
+    ], VerticalFocusContainerComponent.prototype, "arrowLeft", null);
+    __decorate([
+        HostListener('keyup.arrowRight', ['$event']),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [KeyboardEvent]),
+        __metadata("design:returntype", void 0)
+    ], VerticalFocusContainerComponent.prototype, "arrowRight", null);
+    __decorate([
+        HostListener('keyup.arrowDown', ['$event']),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [KeyboardEvent]),
+        __metadata("design:returntype", void 0)
+    ], VerticalFocusContainerComponent.prototype, "arrowDown", null);
+    __decorate([
+        HostListener('keyup.arrowUp', ['$event']),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [KeyboardEvent]),
+        __metadata("design:returntype", void 0)
+    ], VerticalFocusContainerComponent.prototype, "arrowUp", null);
+    VerticalFocusContainerComponent = __decorate([
+        Component({
+            selector: 'aup-vertical-focus-container',
+            template: "<ng-content></ng-content>\n",
+            providers: [
+                { provide: FocusManager }
+            ],
+            styles: [":host{display:block}"]
+        }),
+        __param(0, Self()),
+        __metadata("design:paramtypes", [FocusManager])
+    ], VerticalFocusContainerComponent);
+    return VerticalFocusContainerComponent;
+}(FocusContainerComponent));
+export { VerticalFocusContainerComponent };
+//# sourceMappingURL=vertical-focus-container.component.js.map

package/esm5/lib/components/vertical-focus-container/vertical-focus-container.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-focus-container.component.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/vertical-focus-container/vertical-focus-container.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAQ,YAAY,EAAE,KAAK,EAAU,IAAI,EAAE,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACtE,OAAO,EAAE,uBAAuB,EAAE,MAAM,8CAA8C,CAAC;AAUvF;IAAqD,mDAAuB;IA0C1E,yCAA6B,YAA0B;QAAvD,YACE,kBAAM,YAAY,CAAC,SACpB;QAF4B,kBAAY,GAAZ,YAAY,CAAc;;IAEvD,CAAC;IAjCD,mDAAS,GAAT,UAAU,KAAoB;QAC5B,IAAI,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,KAAK,EAAE;YACvC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,CAAC;SACjC;IACH,CAAC;IAGD,oDAAU,GAAV,UAAW,KAAoB;QAC7B,IAAI,IAAI,CAAC,iBAAiB,CAAC,OAAO,CAAC,KAAK,EAAE;YACxC,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,KAAK,CAAC,eAAe,EAAE,CAAC;YACxB,IAAI,CAAC,iBAAiB,CAAC,OAAO,EAAE,CAAC;SAClC;IACH,CAAC;IAGD,mDAAS,GAAT,UAAU,KAAoB;QAC5B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,YAAY,CAAC,SAAS,EAAE,CAAC;IAChC,CAAC;IAGD,iDAAO,GAAP,UAAQ,KAAoB;QAC1B,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,KAAK,CAAC,eAAe,EAAE,CAAC;QACxB,IAAI,CAAC,YAAY,CAAC,aAAa,EAAE,CAAC;IACpC,CAAC;IAMD,kDAAQ,GAAR;IACA,CAAC;;gBAL0C,YAAY,uBAA1C,IAAI;;IAtCjB;QAFC,KAAK,CAAC,oBAAoB,CAAC;QAC3B,aAAa,EAAE;kCACG,OAAO;8EAAO;IAIjC;QAFC,KAAK,CAAC,mBAAmB,CAAC;QAC1B,aAAa,EAAE;kCACE,OAAO;6EAAO;IAGhC;QADC,YAAY,CAAC,iBAAiB,EAAE,CAAC,QAAQ,CAAC,CAAC;;yCAC3B,aAAa;;oEAM7B;IAGD;QADC,YAAY,CAAC,kBAAkB,EAAE,CAAC,QAAQ,CAAC,CAAC;;yCAC3B,aAAa;;qEAM9B;IAGD;QADC,YAAY,CAAC,iBAAiB,EAAE,CAAC,QAAQ,CAAC,CAAC;;yCAC3B,aAAa;;oEAI7B;IAGD;QADC,YAAY,CAAC,eAAe,EAAE,CAAC,QAAQ,CAAC,CAAC;;yCAC3B,aAAa;;kEAI3B;IAxCU,+BAA+B;QAR3C,SAAS,CAAC;YACT,QAAQ,EAAE,8BAA8B;YACxC,uCAAwD;YAExD,SAAS,EAAE;gBACT,EAAE,OAAO,EAAE,YAAY,EAAE;aAC1B;;SACF,CAAC;QA2Ca,WAAA,IAAI,EAAE,CAAA;yCAAwB,YAAY;OA1C5C,+BAA+B,CAiD3C;IAAD,sCAAC;CAAA,AAjDD,CAAqD,uBAAuB,GAiD3E;SAjDY,+BAA+B","sourcesContent":["import { Component, Host, HostListener, Input, OnInit, Self } from '@angular/core';\nimport { Command, FocusManager, TrackExternal } from '@coolon/pectin';\nimport { FocusContainerComponent } from '../focus-container/focus-container.component';\n\n@Component({\n  selector: 'aup-vertical-focus-container',\n  templateUrl: './vertical-focus-container.component.html',\n  styleUrls: ['./vertical-focus-container.component.scss'],\n  providers: [\n    { provide: FocusManager }\n  ]\n})\nexport class VerticalFocusContainerComponent extends FocusContainerComponent implements OnInit {\n\n  @Input('command.arrowRight')\n  @TrackExternal()\n  rightArrowCommand: Command<void>;\n\n  @Input('command.arrowLeft')\n  @TrackExternal()\n  leftArrowCommand: Command<void>;\n\n  @HostListener('keyup.arrowLeft', ['$event'])\n  arrowLeft(event: KeyboardEvent) {\n    if (this.leftArrowCommand.enabled.value) {\n      event.preventDefault();\n      event.stopPropagation();\n      this.leftArrowCommand.execute();\n    }\n  }\n\n  @HostListener('keyup.arrowRight', ['$event'])\n  arrowRight(event: KeyboardEvent) {\n    if (this.rightArrowCommand.enabled.value) {\n      event.preventDefault();\n      event.stopPropagation();\n      this.rightArrowCommand.execute();\n    }\n  }\n\n  @HostListener('keyup.arrowDown', ['$event'])\n  arrowDown(event: KeyboardEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.focusManager.focusNext();\n  }\n\n  @HostListener('keyup.arrowUp', ['$event'])\n  arrowUp(event: KeyboardEvent) {\n    event.preventDefault();\n    event.stopPropagation();\n    this.focusManager.focusPrevious();\n  }\n\n  constructor(@Self() readonly focusManager: FocusManager) {\n    super(focusManager);\n  }\n\n  ngOnInit() {\n  }\n\n}\n"]}

package/esm5/lib/components/vertical-focus-container/vertical-focus-container.component.ngfactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-focus-container.component.ngfactory.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/vertical-focus-container/vertical-focus-container.component.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n"]}

package/esm5/lib/components/vertical-focus-container/vertical-focus-container.component.scss.shim.ngstyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vertical-focus-container.component.scss.shim.ngstyle.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/vertical-focus-container/vertical-focus-container.component.scss.shim.ngstyle.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n"]}

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

@@ -1,6 +1,6 @@
 import { __decorate, __metadata, __param, __awaiter } from 'tslib';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
-import { ElementRef, Inject, Input, HostListener, Directive, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, Host, HostBinding, Component, EventEmitter, Output, ContentChild, TemplateRef, ChangeDetectorRef, ContentChildren, QueryList, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, Optional, SkipSelf } from '@angular/core';
+import { ElementRef, Inject, Input, HostListener, Directive, NgZone, ɵɵdefineInjectable, ɵɵinject, Injectable, NgModule, Self, HostBinding, Component, EventEmitter, Output, ContentChild, TemplateRef, ChangeDetectorRef, ContentChildren, QueryList, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, Optional, SkipSelf } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
@@ -10,7 +10,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, FocusManager, Trace, DelegatingFormValueModel, Command, TrackExternal, ListModel, StoreInListModel, ValueModel, StoreInValueModel, Deferred, MutableListModel, MutableValueModel, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, Command, FocusManager, DelegatingFormValueModel, TrackExternal, ListModel, StoreInListModel, ValueModel, StoreInValueModel, Deferred, Trace, MutableListModel, MutableValueModel, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
 import { PortalModule } from '@angular/cdk/portal';
 import { MatDialogModule, MatDialog, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS } from '@angular/material/dialog';
 import { RouterModule, UrlSegment, Router, UrlSerializer, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RouterOutlet } from '@angular/router';
@@ -328,27 +328,25 @@ let FocusContainerComponent = class FocusContainerComponent extends DisposableCo
     constructor(focusManager) {
         super();
         this.focusManager = focusManager;
+        this.restoreFocusCommand = Command.create(() => {
+            this.restoreFocus();
+        });
         this.tabIndex = -1;
     }
     ngOnInit() {
     }
+    // @Trace()
     restoreFocus() {
         this.focusManager.restoreFocus();
     }
 };
 FocusContainerComponent.ctorParameters = () => [
-    { type: FocusManager, decorators: [{ type: Host }] }
+    { type: FocusManager, decorators: [{ type: Self }] }
 ];
 __decorate([
     HostBinding('attr.tabindex'),
     __metadata("design:type", Object)
 ], FocusContainerComponent.prototype, "tabIndex", void 0);
-__decorate([
-    Trace(),
-    __metadata("design:type", Function),
-    __metadata("design:paramtypes", []),
-    __metadata("design:returntype", void 0)
-], FocusContainerComponent.prototype, "restoreFocus", null);
 FocusContainerComponent = __decorate([
     Component({
         selector: 'aup-focus-container',
@@ -358,7 +356,7 @@ FocusContainerComponent = __decorate([
         ],
         styles: [":host{display:block}"]
     }),
-    __param(0, Host()),
+    __param(0, Self()),
     __metadata("design:paramtypes", [FocusManager])
 ], FocusContainerComponent);
 
@@ -859,6 +857,88 @@ SwitchCaseComponent = __decorate([
     __metadata("design:paramtypes", [ChangeDetectorRef])
 ], SwitchCaseComponent);
 
+let VerticalFocusContainerComponent = class VerticalFocusContainerComponent extends FocusContainerComponent {
+    constructor(focusManager) {
+        super(focusManager);
+        this.focusManager = focusManager;
+    }
+    arrowLeft(event) {
+        if (this.leftArrowCommand.enabled.value) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.leftArrowCommand.execute();
+        }
+    }
+    arrowRight(event) {
+        if (this.rightArrowCommand.enabled.value) {
+            event.preventDefault();
+            event.stopPropagation();
+            this.rightArrowCommand.execute();
+        }
+    }
+    arrowDown(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.focusManager.focusNext();
+    }
+    arrowUp(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.focusManager.focusPrevious();
+    }
+    ngOnInit() {
+    }
+};
+VerticalFocusContainerComponent.ctorParameters = () => [
+    { type: FocusManager, decorators: [{ type: Self }] }
+];
+__decorate([
+    Input('command.arrowRight'),
+    TrackExternal(),
+    __metadata("design:type", Command)
+], VerticalFocusContainerComponent.prototype, "rightArrowCommand", void 0);
+__decorate([
+    Input('command.arrowLeft'),
+    TrackExternal(),
+    __metadata("design:type", Command)
+], VerticalFocusContainerComponent.prototype, "leftArrowCommand", void 0);
+__decorate([
+    HostListener('keyup.arrowLeft', ['$event']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], VerticalFocusContainerComponent.prototype, "arrowLeft", null);
+__decorate([
+    HostListener('keyup.arrowRight', ['$event']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], VerticalFocusContainerComponent.prototype, "arrowRight", null);
+__decorate([
+    HostListener('keyup.arrowDown', ['$event']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], VerticalFocusContainerComponent.prototype, "arrowDown", null);
+__decorate([
+    HostListener('keyup.arrowUp', ['$event']),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [KeyboardEvent]),
+    __metadata("design:returntype", void 0)
+], VerticalFocusContainerComponent.prototype, "arrowUp", null);
+VerticalFocusContainerComponent = __decorate([
+    Component({
+        selector: 'aup-vertical-focus-container',
+        template: "<ng-content></ng-content>\n",
+        providers: [
+            { provide: FocusManager }
+        ],
+        styles: [":host{display:block}"]
+    }),
+    __param(0, Self()),
+    __metadata("design:paramtypes", [FocusManager])
+], VerticalFocusContainerComponent);
+
 let ComponentsModule = class ComponentsModule {
 };
 ComponentsModule = __decorate([
@@ -876,6 +956,7 @@ ComponentsModule = __decorate([
             SwitchCaseWhenDirective,
             SwitchCaseDefaultDirective,
             FocusContainerComponent,
+            VerticalFocusContainerComponent,
             FocusableComponent
         ],
         imports: [
@@ -903,6 +984,7 @@ ComponentsModule = __decorate([
             SwitchCaseWhenDirective,
             SwitchCaseDefaultDirective,
             FocusContainerComponent,
+            VerticalFocusContainerComponent,
             FocusableComponent
         ],
         providers: [
@@ -4206,5 +4288,5 @@ function VisitParameterList(options) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputComponent, AbstractInteractionContext, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, Activity, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CheckboxInputComponent, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EmptyStateComponent, EventCleanUpSession, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, InPlaceInteractionContextComponent, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ModalInteractionContextFactory, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SelectInputComponent, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, UrlService, UrlSnapshot, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, DirectivesModule as ɵa, CommandDirective as ɵb, AUP_PLACE_CONFIG as ɵba, PlaceRouter as ɵbc, InteractionService as ɵbd, ModalInteractionContextFactory as ɵbe, UrlService as ɵbf, PlaceHistory as ɵbg, TabbedPlaceNavigationComponent as ɵbh, AbstractPlaceNavigationComponent as ɵbi, ListPlaceNavComponent as ɵbj, InteractionModule as ɵbk, ActivityContainerComponent as ɵbl, AbstractInteractionContext as ɵbm, ActivityOutletComponent as ɵbn, ConfirmationDialogComponent as ɵbo, ACTIVITY_DATA as ɵbp, Activity as ɵbq, ConfirmThenDialogComponent as ɵbs, AlertDialogComponent as ɵbt, InPlaceInteractionContextComponent as ɵbv, FocusBindingDirective as ɵc, DisposableComponent as ɵd, FocusBindingFactory as ɵe, ComponentsModule as ɵf, NumberInputComponent as ɵg, AbstractInputComponent as ɵh, StringInputComponent as ɵi, PasswordInputComponent as ɵj, SelectInputComponent as ɵk, CheckboxInputComponent as ɵl, ScrollContainerComponent as ɵm, NoopComponent as ɵn, SwitchCaseOption as ɵo, SwitchCaseWhenDirective as ɵp, SwitchCaseDefaultDirective as ɵq, SwitchCaseComponent as ɵr, FocusContainerComponent as ɵs, FocusableComponent as ɵt, PlaceModule as ɵu, EmptyStateComponent as ɵv, BusyOverlayComponent as ɵw, PlaceOutletComponent as ɵx, leftRightPlaceAnimation as ɵy, LEFT_RIGHT_PLACE_ANIMATION as ɵz };
+export { ACTIVITY_DATA, AUP_PLACE_CONFIG, AbstractInputComponent, AbstractInteractionContext, AbstractPlaceNavigationComponent, AbstractPopStateNavigation, Activity, ActivityContainerComponent, ActivityOutletComponent, ActivityRef, AlertDialogComponent, AngularUiPowerupsModule, Bounds, BusyOverlayComponent, CheckboxInputComponent, CommandDirective, ComponentsModule, ConfirmThenDialogComponent, ConfirmationDialogComponent, ConsolidatedParameterMap, DEFINITION_META_DATA_KEY, DIALOG_INTERACTION_SERVICE_DEFAULTS, DialogInteractionContext, DialogInteractionContextFactory, Dimension, DirectivesModule, DisposableComponent, EmptyStateComponent, EventCleanUpSession, FocusBinding, FocusBindingDirective, FocusBindingFactory, FocusContainerComponent, FocusableComponent, Formatter, InPlaceInteractionContextComponent, InteractionModule, InteractionService, InteractionServiceRoutingAdapter, LEFT_RIGHT_PLACE_ANIMATION, ListPlaceNavComponent, ModalInteractionContextFactory, Navigating, NavigatingDuringInteraction, NavigationContext, NavigationSession, NoopAuthGuard, NoopComponent, NumberInputComponent, ParameterDefinition, PasswordInputComponent, Place, PlaceComponent, PlaceComponentDeactivationHandler, PlaceDefinition, PlaceGuard, PlaceHistory, PlaceModule, PlaceOutletComponent, PlaceRouter, Point, PopStateDuringInteractionNavigation, PopStateNavigation, ROUTE_PARAMETER_LIST_KEY, RemoveLastInteractionFromUrlNavigationSession, ResizeAwareComponent, RouteId, ScrollContainerComponent, SelectInputComponent, StringInputComponent, SwitchCaseComponent, SwitchCaseDefaultDirective, SwitchCaseOption, SwitchCaseWhenDirective, SynchroniseInteractionContextIdsWithRoute, TabbedPlaceNavigationComponent, UrlService, UrlSnapshot, VerticalFocusContainerComponent, Visit, VisitParameter, VisitParameterList, VisitSanitiser, WaitUntilLeavingInteractionTransitionCancelled, WaitUntilLinkTriggeredNavigationInteractionCancellationEventsFinish, WaitUntilPopStateDuringCanDeactivateInteractionFinishes, leftRightPlaceAnimation, slideDownOnEnterAnimation, slideRightOnEnterAnimation, DirectivesModule as ɵa, CommandDirective as ɵb, LEFT_RIGHT_PLACE_ANIMATION as ɵba, AUP_PLACE_CONFIG as ɵbb, PlaceRouter as ɵbd, InteractionService as ɵbe, ModalInteractionContextFactory as ɵbf, UrlService as ɵbg, PlaceHistory as ɵbh, TabbedPlaceNavigationComponent as ɵbi, AbstractPlaceNavigationComponent as ɵbj, ListPlaceNavComponent as ɵbk, InteractionModule as ɵbl, ActivityContainerComponent as ɵbm, AbstractInteractionContext as ɵbn, ActivityOutletComponent as ɵbo, ConfirmationDialogComponent as ɵbp, ACTIVITY_DATA as ɵbq, Activity as ɵbr, ConfirmThenDialogComponent as ɵbt, AlertDialogComponent as ɵbu, InPlaceInteractionContextComponent as ɵbw, FocusBindingDirective as ɵc, DisposableComponent as ɵd, FocusBindingFactory as ɵe, ComponentsModule as ɵf, NumberInputComponent as ɵg, AbstractInputComponent as ɵh, StringInputComponent as ɵi, PasswordInputComponent as ɵj, SelectInputComponent as ɵk, CheckboxInputComponent as ɵl, ScrollContainerComponent as ɵm, NoopComponent as ɵn, SwitchCaseOption as ɵo, SwitchCaseWhenDirective as ɵp, SwitchCaseDefaultDirective as ɵq, SwitchCaseComponent as ɵr, FocusContainerComponent as ɵs, VerticalFocusContainerComponent as ɵt, FocusableComponent as ɵu, PlaceModule as ɵv, EmptyStateComponent as ɵw, BusyOverlayComponent as ɵx, PlaceOutletComponent as ɵy, leftRightPlaceAnimation as ɵz };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map