@coolon/angular-ui-powerups 1.1.1 → 1.2.1

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

@@ -1,16 +1,16 @@
 import { __extends, __decorate, __metadata, __param, __awaiter, __generator, __spread, __assign } from 'tslib';
 import { DOCUMENT, CommonModule, Location } from '@angular/common';
-import { ElementRef, Inject, Input, HostListener, Directive, NgZone, NgModule, EventEmitter, Output, Component, ContentChild, TemplateRef, ChangeDetectorRef, ContentChildren, QueryList, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, ɵɵdefineInjectable, ɵɵinject, Injectable, Optional, SkipSelf, HostBinding } from '@angular/core';
+import { ElementRef, Inject, Input, HostListener, Directive, NgZone, NgModule, Host, HostBinding, Component, Injectable, EventEmitter, Output, ContentChild, TemplateRef, ChangeDetectorRef, ContentChildren, QueryList, InjectionToken, Injector, ComponentFactoryResolver, ViewContainerRef, ViewChild, ViewChildren, ɵɵdefineInjectable, ɵɵinject, Optional, SkipSelf } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTabsModule, MatTabGroup } from '@angular/material/tabs';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
-import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, DelegatingFormValueModel, Command, TrackExternal, ListModel, StoreInListModel, ValueModel, StoreInValueModel, Deferred, Trace, MutableListModel, MutableValueModel, Guard, DebugContext, Binding, ValueHolder } from '@coolon/pectin';
+import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, FocusManager, Trace, DelegatingFormValueModel, Command, TrackExternal, ListModel, StoreInListModel, ValueModel, StoreInValueModel, Deferred, 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';
@@ -307,6 +307,215 @@ var DirectivesModule = /** @class */ (function () {
     return DirectivesModule;
 }());
 
+var FocusContainerComponent = /** @class */ (function () {
+    function FocusContainerComponent(focusManager) {
+        this.focusManager = focusManager;
+        this.tabIndex = -1;
+    }
+    FocusContainerComponent.prototype.ngOnInit = function () {
+    };
+    FocusContainerComponent.prototype.restoreFocus = function () {
+        this.focusManager.restoreFocus();
+    };
+    FocusContainerComponent.ctorParameters = function () { return [
+        { type: FocusManager, decorators: [{ type: Host }] }
+    ]; };
+    __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',
+            template: "<ng-content></ng-content>\n",
+            providers: [
+                { provide: FocusManager }
+            ],
+            styles: [":host{display:block}"]
+        }),
+        __param(0, Host()),
+        __metadata("design:paramtypes", [FocusManager])
+    ], FocusContainerComponent);
+    return FocusContainerComponent;
+}());
+
+var FocusBinding = /** @class */ (function (_super) {
+    __extends(FocusBinding, _super);
+    function FocusBinding(focusTargetElement, ngZone, document, focusContext) {
+        var _this = _super.call(this) || this;
+        _this.focusTargetElement = focusTargetElement;
+        _this.ngZone = ngZone;
+        _this.focusContext = focusContext;
+        // @see https://stackoverflow.com/questions/49513359/could-not-resolve-type-document-in-angular5/53715642#53715642
+        _this.document = document;
+        // TODO: Make this also track the current enabled/disabled state.
+        var when = Dsl.disposeWith(_this).when;
+        when.valueOf(_this.focusContext.focused).changes(function (focused) {
+            if (focused && !_this.alreadyHasFocus()) {
+                _this.tryAndFocus();
+            }
+        }, { initialValue: 'triggerChangeUnlessNil' });
+        return _this;
+    }
+    FocusBinding.prototype.onFocusIn = function () {
+        this.focusContext.notifyFocusIn();
+    };
+    FocusBinding.prototype.onFocusOut = function () {
+        this.focusContext.notifyFocusOut();
+    };
+    // Hook method for debugging via tracing.
+    FocusBinding.prototype.alreadyHasFocus = function () {
+        return this.isElementFocused(this.focusTarget);
+    };
+    // Hook method for debugging via tracing.
+    FocusBinding.prototype.isElementFocused = function (element) {
+        return this.document.activeElement === element;
+    };
+    FocusBinding.prototype.tryAndFocus = function (retries) {
+        var _this = this;
+        if (retries === void 0) { retries = 5; }
+        if (this.modelShouldStillHaveFocus() && this.canFocus()) {
+            if (!this.alreadyHasFocus()) {
+                this.focusTarget.focus();
+            }
+            // if we didn't get the focus we try again later.
+            if (!this.alreadyHasFocus()) {
+                Logger.get(this).log("focus failed, trying " + retries + " more times");
+                if (retries > 0) {
+                    // try again on the next paint
+                    // TODO: is there an angular way of doing this without calling a window function.
+                    requestAnimationFrame(function () {
+                        _this.tryAndFocus(retries - 1);
+                    });
+                }
+                else {
+                    Logger.get(this).warn("Tried to focus but gave up as the component wasn't enabled or visible.");
+                }
+            }
+        }
+    };
+    Object.defineProperty(FocusBinding.prototype, "focusTarget", {
+        get: function () {
+            return this.focusTargetElement;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    // Hook method for debugging via tracing.
+    FocusBinding.prototype.modelShouldStillHaveFocus = function () {
+        return this.focusContext.focused.value;
+    };
+    // Hook method for debugging via tracing.
+    FocusBinding.prototype.canFocus = function () {
+        var dimension = this.focusTarget.getBoundingClientRect();
+        var hasSize = dimension.height >= 0 && dimension.height >= 0;
+        // tslint:disable-next-line:no-string-literal
+        return hasSize && !this.focusTarget['disabled'];
+    };
+    FocusBinding = __decorate([
+        __param(1, Inject(NgZone)),
+        __param(2, Inject(DOCUMENT)),
+        __metadata("design:paramtypes", [HTMLElement,
+            NgZone, Object, Object])
+    ], FocusBinding);
+    return FocusBinding;
+}(GarbageCollector));
+(function (FocusBinding) {
+    var Factory = /** @class */ (function () {
+        function Factory(ngZone, document) {
+            this.ngZone = ngZone;
+            // @see https://stackoverflow.com/questions/49513359/could-not-resolve-type-document-in-angular5/53715642#53715642
+            this.document = document;
+        }
+        Factory.prototype.createBinding = function (el, focusContext) {
+            return new FocusBinding(el.nativeElement, this.ngZone, this.document, focusContext);
+        };
+        Factory.ctorParameters = function () { return [
+            { type: NgZone, decorators: [{ type: Inject, args: [NgZone,] }] },
+            { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
+        ]; };
+        Factory = __decorate([
+            Injectable({
+                providedIn: 'root'
+            }),
+            __param(0, Inject(NgZone)), __param(1, Inject(DOCUMENT)),
+            __metadata("design:paramtypes", [NgZone, Object])
+        ], Factory);
+        return Factory;
+    }());
+    FocusBinding.Factory = Factory;
+})(FocusBinding || (FocusBinding = {}));
+
+var FocusableComponent = /** @class */ (function (_super) {
+    __extends(FocusableComponent, _super);
+    function FocusableComponent(el, focusManager, focusBindingFactory) {
+        var _this = _super.call(this) || this;
+        _this.el = el;
+        _this.focusManager = focusManager;
+        var _a = Dsl.disposeWith(_this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
+        if (_this.focusManager) {
+            _this._focusContext = _this.focusManager.registerFocusable(_this);
+            _this.registerDisposable(focusBindingFactory.createBinding(el, _this.focusContext));
+        }
+        return _this;
+    }
+    Object.defineProperty(FocusableComponent.prototype, "focusable", {
+        get: function () {
+            return !!this.focusContext ? 0 : undefined;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    FocusableComponent.prototype.onFocus = function () {
+        var _a;
+        (_a = this.focusContext) === null || _a === void 0 ? void 0 : _a.notifyFocusIn();
+    };
+    FocusableComponent.prototype.onBlur = function () {
+        var _a;
+        (_a = this.focusContext) === null || _a === void 0 ? void 0 : _a.notifyFocusOut();
+    };
+    Object.defineProperty(FocusableComponent.prototype, "focusContext", {
+        get: function () {
+            return this._focusContext;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    FocusableComponent.ctorParameters = function () { return [
+        { type: ElementRef },
+        { type: FocusManager },
+        { type: FocusBinding.Factory }
+    ]; };
+    __decorate([
+        HostBinding('attr.tabindex'),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], FocusableComponent.prototype, "focusable", null);
+    __decorate([
+        HostListener('focus'),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], FocusableComponent.prototype, "onFocus", null);
+    __decorate([
+        HostListener('blur'),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], FocusableComponent.prototype, "onBlur", null);
+    FocusableComponent = __decorate([
+        Component({ template: '' }),
+        __metadata("design:paramtypes", [ElementRef, FocusManager, FocusBinding.Factory])
+    ], FocusableComponent);
+    return FocusableComponent;
+}(DisposableComponent));
+
 var AbstractInputComponent = /** @class */ (function (_super) {
     __extends(AbstractInputComponent, _super);
     function AbstractInputComponent() {
@@ -817,7 +1026,9 @@ var ComponentsModule = /** @class */ (function () {
                 AbstractInputComponent,
                 SwitchCaseComponent,
                 SwitchCaseWhenDirective,
-                SwitchCaseDefaultDirective
+                SwitchCaseDefaultDirective,
+                FocusContainerComponent,
+                FocusableComponent
             ],
             imports: [
                 CommonModule,
@@ -842,7 +1053,9 @@ var ComponentsModule = /** @class */ (function () {
                 NoopComponent,
                 SwitchCaseComponent,
                 SwitchCaseWhenDirective,
-                SwitchCaseDefaultDirective
+                SwitchCaseDefaultDirective,
+                FocusContainerComponent,
+                FocusableComponent
             ]
         })
     ], ComponentsModule);
@@ -3156,7 +3369,7 @@ var PlaceRouter = /** @class */ (function (_super) {
         _this.navigationSessionName = chain(_this.navigationSessionModel)
             .pluck('name')
             .otherwise(idleStateName);
-        DebugContext.tag(_this._activeVisits, "PlaceRouter.activeVisits");
+        DebugContext.tag(_this._activeVisits, 'PlaceRouter.activeVisits');
         _this.activeVisitsByPlaceDefinition = chain(_this._activeVisits).indexBy('placeDefinition');
         // TODO: make setup the callbacks in during module initiation to make this testable.
         angularRouter.events.subscribe(function (event) {
@@ -3998,7 +4211,7 @@ var ResizeAwareComponent = /** @class */ (function (_super) {
         var _this = _super.call(this) || this;
         _this.elementRef = elementRef;
         _this.ngZone = ngZone;
-        _this._boundsModel = new ValueHolder(new Bounds(0, 0, 0, 0));
+        _this._boundsModel = new MutableValueModel(new Bounds(0, 0, 0, 0));
         return _this;
     }
     ResizeAwareComponent.prototype.ngAfterViewInit = function () {
@@ -4516,7 +4729,10 @@ function installMechanics(prototype, propertyKey, backingModel, tagPrefix, isEmp
                 mechanics.binding.dispose();
             }
             if (userModel) {
-                mechanics.binding = new Binding(mechanics.backingModel, userModel);
+                mechanics.binding = new Binding(mechanics.backingModel, userModel, {
+                    toLeft: Functions.identity,
+                    toRight: Functions.identity
+                });
                 if (isEmpty(userModel)) {
                     // console.log(`Push visit to model for ${tag}`, {value: mechanics.backingModel.value});
                     mechanics.binding.writeRight(); // push the visit into the user model;
@@ -4535,7 +4751,7 @@ function RouteId(type, options) {
     return function (prototype, propertyKey) {
         var param = new ParameterDefinition.RouteId(propertyKey.toString(), options, type);
         Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-        installMechanics(prototype, propertyKey, new MutableValueModel(), "@RouteId", function (m) { return m.query().isNil(); });
+        installMechanics(prototype, propertyKey, new MutableValueModel(), '@RouteId', function (m) { return m.query().isNil(); });
     };
 }
 function VisitParameter(options) {
@@ -4543,7 +4759,7 @@ function VisitParameter(options) {
     return function (prototype, propertyKey) {
         var param = new ParameterDefinition.ValueParameter(propertyKey.toString(), options, opts.getOptional('storeInUrl', null));
         Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-        installMechanics(prototype, propertyKey, new MutableValueModel(), "@VisitParameter", function (m) { return m.query().isNil(); });
+        installMechanics(prototype, propertyKey, new MutableValueModel(), '@VisitParameter', function (m) { return m.query().isNil(); });
     };
 }
 function VisitParameterList(options) {
@@ -4551,7 +4767,7 @@ function VisitParameterList(options) {
     return function (prototype, propertyKey) {
         var param = new ParameterDefinition.ArrayParameter(propertyKey.toString(), options, opts.getOptional('storeInUrl', null));
         Klass.get(prototype).addToOwnMetadataList(ROUTE_PARAMETER_LIST_KEY, param);
-        installMechanics(prototype, propertyKey, new MutableListModel(), "@VisitParameterList", function (m) { return m.query().isEmpty(); });
+        installMechanics(prototype, propertyKey, new MutableListModel(), '@VisitParameterList', function (m) { return m.query().isEmpty(); });
     };
 }
 
@@ -4563,5 +4779,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, FocusBindingDirective, 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, InteractionService as ɵba, ModalInteractionContextFactory as ɵbb, UrlService as ɵbc, PlaceHistory as ɵbd, TabbedPlaceNavigationComponent as ɵbe, AbstractPlaceNavigationComponent as ɵbf, ListPlaceNavComponent as ɵbg, InteractionModule as ɵbh, ActivityContainerComponent as ɵbi, AbstractInteractionContext as ɵbj, ActivityOutletComponent as ɵbk, ConfirmationDialogComponent as ɵbl, ACTIVITY_DATA as ɵbm, Activity as ɵbn, ConfirmThenDialogComponent as ɵbp, AlertDialogComponent as ɵbq, InPlaceInteractionContextComponent as ɵbs, FocusBindingDirective as ɵc, DisposableComponent as ɵd, ComponentsModule as ɵe, NumberInputComponent as ɵf, AbstractInputComponent as ɵg, StringInputComponent as ɵh, PasswordInputComponent as ɵi, SelectInputComponent as ɵj, CheckboxInputComponent as ɵk, ScrollContainerComponent as ɵl, NoopComponent as ɵm, SwitchCaseOption as ɵn, SwitchCaseWhenDirective as ɵo, SwitchCaseDefaultDirective as ɵp, SwitchCaseComponent as ɵq, PlaceModule as ɵr, EmptyStateComponent as ɵs, BusyOverlayComponent as ɵt, PlaceOutletComponent as ɵu, leftRightPlaceAnimation as ɵv, LEFT_RIGHT_PLACE_ANIMATION as ɵw, AUP_PLACE_CONFIG as ɵx, PlaceRouter 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, 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, ComponentsModule as ɵe, NumberInputComponent as ɵf, AbstractInputComponent as ɵg, StringInputComponent as ɵh, PasswordInputComponent as ɵi, SelectInputComponent as ɵj, CheckboxInputComponent as ɵk, ScrollContainerComponent as ɵl, NoopComponent as ɵm, SwitchCaseOption as ɵn, SwitchCaseWhenDirective as ɵo, SwitchCaseDefaultDirective as ɵp, SwitchCaseComponent as ɵq, FocusContainerComponent as ɵr, FocusableComponent as ɵs, FocusBinding as ɵt, PlaceModule as ɵu, EmptyStateComponent as ɵv, BusyOverlayComponent as ɵw, PlaceOutletComponent as ɵx, leftRightPlaceAnimation as ɵy, LEFT_RIGHT_PLACE_ANIMATION as ɵz };
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map