@coolon/angular-ui-powerups 1.3.7 → 1.4.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [1.4.0](https://bitbucket.org/coolon/angular-ui-powerups/compare/v1.3.7...v1.4.0) (2020-05-21)
+
+
+### Features
+
+* added VerticalFocusContainer component ([6fa2adc](https://bitbucket.org/coolon/angular-ui-powerups/commit/6fa2adc6365f113f7c350a681c5f57b49d21eaf2))
+
 ### [1.3.7](https://bitbucket.org/coolon/angular-ui-powerups/compare/v1.3.6...v1.3.7) (2020-05-20)
 
 ### [1.3.6](https://bitbucket.org/coolon/angular-ui-powerups/compare/v1.3.5...v1.3.6) (2020-05-20)

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

@@ -544,27 +544,25 @@
         function FocusContainerComponent(focusManager) {
             var _this = _super.call(this) || this;
             _this.focusManager = focusManager;
+            _this.restoreFocusCommand = pectin.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: pectin.FocusManager, decorators: [{ type: core.Host }] }
+            { type: pectin.FocusManager, decorators: [{ type: core.Self }] }
         ]; };
         __decorate([
             core.HostBinding('attr.tabindex'),
             __metadata("design:type", Object)
         ], FocusContainerComponent.prototype, "tabIndex", void 0);
-        __decorate([
-            pectin.Trace(),
-            __metadata("design:type", Function),
-            __metadata("design:paramtypes", []),
-            __metadata("design:returntype", void 0)
-        ], FocusContainerComponent.prototype, "restoreFocus", null);
         FocusContainerComponent = __decorate([
             core.Component({
                 selector: 'aup-focus-container',
@@ -574,7 +572,7 @@
                 ],
                 styles: [":host{display:block}"]
             }),
-            __param(0, core.Host()),
+            __param(0, core.Self()),
             __metadata("design:paramtypes", [pectin.FocusManager])
         ], FocusContainerComponent);
         return FocusContainerComponent;
@@ -1138,6 +1136,91 @@
         return SwitchCaseComponent;
     }(DisposableComponent));
 
+    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: pectin.FocusManager, decorators: [{ type: core.Self }] }
+        ]; };
+        __decorate([
+            core.Input('command.arrowRight'),
+            pectin.TrackExternal(),
+            __metadata("design:type", pectin.Command)
+        ], VerticalFocusContainerComponent.prototype, "rightArrowCommand", void 0);
+        __decorate([
+            core.Input('command.arrowLeft'),
+            pectin.TrackExternal(),
+            __metadata("design:type", pectin.Command)
+        ], VerticalFocusContainerComponent.prototype, "leftArrowCommand", void 0);
+        __decorate([
+            core.HostListener('keyup.arrowLeft', ['$event']),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [KeyboardEvent]),
+            __metadata("design:returntype", void 0)
+        ], VerticalFocusContainerComponent.prototype, "arrowLeft", null);
+        __decorate([
+            core.HostListener('keyup.arrowRight', ['$event']),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [KeyboardEvent]),
+            __metadata("design:returntype", void 0)
+        ], VerticalFocusContainerComponent.prototype, "arrowRight", null);
+        __decorate([
+            core.HostListener('keyup.arrowDown', ['$event']),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [KeyboardEvent]),
+            __metadata("design:returntype", void 0)
+        ], VerticalFocusContainerComponent.prototype, "arrowDown", null);
+        __decorate([
+            core.HostListener('keyup.arrowUp', ['$event']),
+            __metadata("design:type", Function),
+            __metadata("design:paramtypes", [KeyboardEvent]),
+            __metadata("design:returntype", void 0)
+        ], VerticalFocusContainerComponent.prototype, "arrowUp", null);
+        VerticalFocusContainerComponent = __decorate([
+            core.Component({
+                selector: 'aup-vertical-focus-container',
+                template: "<ng-content></ng-content>\n",
+                providers: [
+                    { provide: pectin.FocusManager }
+                ],
+                styles: [":host{display:block}"]
+            }),
+            __param(0, core.Self()),
+            __metadata("design:paramtypes", [pectin.FocusManager])
+        ], VerticalFocusContainerComponent);
+        return VerticalFocusContainerComponent;
+    }(FocusContainerComponent));
+
     var ComponentsModule = /** @class */ (function () {
         function ComponentsModule() {
         }
@@ -1156,6 +1239,7 @@
                     SwitchCaseWhenDirective,
                     SwitchCaseDefaultDirective,
                     FocusContainerComponent,
+                    VerticalFocusContainerComponent,
                     FocusableComponent
                 ],
                 imports: [
@@ -1183,6 +1267,7 @@
                     SwitchCaseWhenDirective,
                     SwitchCaseDefaultDirective,
                     FocusContainerComponent,
+                    VerticalFocusContainerComponent,
                     FocusableComponent
                 ],
                 providers: [
@@ -1730,7 +1815,7 @@
     }());
 
     var inplaceMonitorCount = 0;
-    exports.ɵbd = /** @class */ (function () {
+    exports.ɵbe = /** @class */ (function () {
         function InteractionService(modelInteractionContextFactory) {
             this.modelInteractionContextFactory = modelInteractionContextFactory;
             this.garbage = new pectin.GarbageCollector();
@@ -1890,7 +1975,7 @@
             return ApiAdapter;
         }());
         InteractionService.ApiAdapter = ApiAdapter;
-    })(exports.ɵbd || (exports.ɵbd = {}));
+    })(exports.ɵbe || (exports.ɵbe = {}));
 
     var InPlaceInteractionContextComponent = /** @class */ (function (_super) {
         __extends(InPlaceInteractionContextComponent, _super);
@@ -1934,7 +2019,7 @@
             return this.activityContainerComponent.startActivity(activityType, data);
         };
         InPlaceInteractionContextComponent.ctorParameters = function () { return [
-            { type: exports.ɵbd }
+            { type: exports.ɵbe }
         ]; };
         __decorate([
             core.ViewChild('activityContainer', { static: true }),
@@ -1946,7 +2031,7 @@
                 template: "<mat-tab-group no-tab-header [selectedIndex]=\"isActive() ? 1 : 0\" full-height-tabs [dynamicHeight]=\"false\">\n  <mat-tab>\n    <ng-content></ng-content>\n  </mat-tab>\n  <mat-tab>\n    <aup-activity-container #activityContainer [dynamicHeight]=\"false\"></aup-activity-container>\n  </mat-tab>\n</mat-tab-group>\n\n",
                 styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
             }),
-            __metadata("design:paramtypes", [exports.ɵbd])
+            __metadata("design:paramtypes", [exports.ɵbe])
         ], InPlaceInteractionContextComponent);
         return InPlaceInteractionContextComponent;
     }(DisposableComponent));
@@ -1984,7 +2069,7 @@
                     AlertDialogComponent
                 ],
                 providers: [
-                    exports.ɵbd,
+                    exports.ɵbe,
                 ]
             })
         ], InteractionModule);
@@ -3103,7 +3188,7 @@
         return PopStateNavigation;
     }(AbstractPopStateNavigation));
 
-    exports.ɵbg = /** @class */ (function () {
+    exports.ɵbh = /** @class */ (function () {
         function PlaceHistory() {
             this._archive = new Map();
             this.placeHistoryDepth = 4;
@@ -3240,7 +3325,7 @@
         //   }
         //
         // }
-    })(exports.ɵbg || (exports.ɵbg = {}));
+    })(exports.ɵbh || (exports.ɵbh = {}));
 
     exports.UrlSnapshot = /** @class */ (function () {
         // TODO: Update this accept a url Parser so it can be immutable and generate new trees on mutation using toString() are parseUrl.
@@ -3763,11 +3848,11 @@
         PlaceRouter.ctorParameters = function () { return [
             { type: router.Router },
             { type: common.Location },
-            { type: exports.ɵbd },
+            { type: exports.ɵbe },
             { type: UrlService },
-            { type: exports.ɵbg }
+            { type: exports.ɵbh }
         ]; };
-        PlaceRouter.ɵprov = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵbd), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵbg)); }, token: PlaceRouter, providedIn: "root" });
+        PlaceRouter.ɵprov = core.ɵɵdefineInjectable({ factory: function PlaceRouter_Factory() { return new PlaceRouter(core.ɵɵinject(router.Router), core.ɵɵinject(common.Location), core.ɵɵinject(exports.ɵbe), core.ɵɵinject(UrlService), core.ɵɵinject(exports.ɵbh)); }, token: PlaceRouter, providedIn: "root" });
         __decorate([
             pectin.Trace(),
             __metadata("design:type", Function),
@@ -3780,9 +3865,9 @@
             }),
             __metadata("design:paramtypes", [router.Router,
                 common.Location,
-                exports.ɵbd,
+                exports.ɵbe,
                 UrlService,
-                exports.ɵbg])
+                exports.ɵbh])
         ], PlaceRouter);
         return PlaceRouter;
     }(pectin.GarbageCollector));
@@ -4932,7 +5017,7 @@
     exports.FocusableComponent = FocusableComponent;
     exports.InPlaceInteractionContextComponent = InPlaceInteractionContextComponent;
     exports.InteractionModule = InteractionModule;
-    exports.InteractionService = exports.ɵbd;
+    exports.InteractionService = exports.ɵbe;
     exports.InteractionServiceRoutingAdapter = InteractionServiceRoutingAdapter;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
@@ -4948,7 +5033,7 @@
     exports.PlaceComponentDeactivationHandler = PlaceComponentDeactivationHandler;
     exports.PlaceDefinition = PlaceDefinition;
     exports.PlaceGuard = PlaceGuard;
-    exports.PlaceHistory = exports.ɵbg;
+    exports.PlaceHistory = exports.ɵbh;
     exports.PlaceModule = PlaceModule;
     exports.PlaceOutletComponent = PlaceOutletComponent;
     exports.PlaceRouter = PlaceRouter;
@@ -4969,6 +5054,7 @@
     exports.SynchroniseInteractionContextIdsWithRoute = SynchroniseInteractionContextIdsWithRoute;
     exports.TabbedPlaceNavigationComponent = TabbedPlaceNavigationComponent;
     exports.UrlService = UrlService;
+    exports.VerticalFocusContainerComponent = VerticalFocusContainerComponent;
     exports.Visit = Visit;
     exports.VisitParameter = VisitParameter;
     exports.VisitParameterList = VisitParameterList;
@@ -4981,23 +5067,24 @@
     exports.slideRightOnEnterAnimation = slideRightOnEnterAnimation;
     exports.ɵa = DirectivesModule;
     exports.ɵb = CommandDirective;
-    exports.ɵba = AUP_PLACE_CONFIG;
-    exports.ɵbc = PlaceRouter;
-    exports.ɵbe = ModalInteractionContextFactory;
-    exports.ɵbf = UrlService;
-    exports.ɵbh = TabbedPlaceNavigationComponent;
-    exports.ɵbi = AbstractPlaceNavigationComponent;
-    exports.ɵbj = ListPlaceNavComponent;
-    exports.ɵbk = InteractionModule;
-    exports.ɵbl = ActivityContainerComponent;
-    exports.ɵbm = AbstractInteractionContext;
-    exports.ɵbn = ActivityOutletComponent;
-    exports.ɵbo = ConfirmationDialogComponent;
-    exports.ɵbp = ACTIVITY_DATA;
-    exports.ɵbq = Activity;
-    exports.ɵbs = ConfirmThenDialogComponent;
-    exports.ɵbt = AlertDialogComponent;
-    exports.ɵbv = InPlaceInteractionContextComponent;
+    exports.ɵba = LEFT_RIGHT_PLACE_ANIMATION;
+    exports.ɵbb = AUP_PLACE_CONFIG;
+    exports.ɵbd = PlaceRouter;
+    exports.ɵbf = ModalInteractionContextFactory;
+    exports.ɵbg = UrlService;
+    exports.ɵbi = TabbedPlaceNavigationComponent;
+    exports.ɵbj = AbstractPlaceNavigationComponent;
+    exports.ɵbk = ListPlaceNavComponent;
+    exports.ɵbl = InteractionModule;
+    exports.ɵbm = ActivityContainerComponent;
+    exports.ɵbn = AbstractInteractionContext;
+    exports.ɵbo = ActivityOutletComponent;
+    exports.ɵbp = ConfirmationDialogComponent;
+    exports.ɵbq = ACTIVITY_DATA;
+    exports.ɵbr = Activity;
+    exports.ɵbt = ConfirmThenDialogComponent;
+    exports.ɵbu = AlertDialogComponent;
+    exports.ɵbw = InPlaceInteractionContextComponent;
     exports.ɵc = FocusBindingDirective;
     exports.ɵd = DisposableComponent;
     exports.ɵe = FocusBindingFactory;
@@ -5015,13 +5102,13 @@
     exports.ɵq = SwitchCaseDefaultDirective;
     exports.ɵr = SwitchCaseComponent;
     exports.ɵs = FocusContainerComponent;
-    exports.ɵt = FocusableComponent;
-    exports.ɵu = PlaceModule;
-    exports.ɵv = EmptyStateComponent;
-    exports.ɵw = BusyOverlayComponent;
-    exports.ɵx = PlaceOutletComponent;
-    exports.ɵy = leftRightPlaceAnimation;
-    exports.ɵz = LEFT_RIGHT_PLACE_ANIMATION;
+    exports.ɵt = VerticalFocusContainerComponent;
+    exports.ɵu = FocusableComponent;
+    exports.ɵv = PlaceModule;
+    exports.ɵw = EmptyStateComponent;
+    exports.ɵx = BusyOverlayComponent;
+    exports.ɵy = PlaceOutletComponent;
+    exports.ɵz = leftRightPlaceAnimation;
 
     Object.defineProperty(exports, '__esModule', { value: true });