@coolon/angular-ui-powerups 2.0.0-alpha.31 → 2.0.0-alpha.33

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

@@ -409,7 +409,7 @@ var CardContainerComponent = /** @class */ (function (_super) {
         Component({
             selector: 'aup-card-container',
             template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-icon icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n\n</div>\n",
-            styles: [":root{--aup-default-padding:var(--default-padding, 18px);--aup-default-background:white;--command-face-icon-gap:8px;--aup-icon-width:24px;--aup-fa-icon-width:18px}.router-outlet-container>*{position:absolute;top:0;left:0;bottom:0;right:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context{max-width:95vw!important;max-height:95vh!important}.dialog-interaction-context mat-dialog-container{max-width:95vw!important;max-height:95vh!important;padding:0}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow 280ms cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{padding-bottom:0;border-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap, 24px);--resolved-row-hover-background-color:var(--row-hover-background-color, rgba(0, 0, 0, 0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{padding-left:var(--default-column-gap);flex:1}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width)) / 2);position:relative}aup-icon fa-icon .svg-inline--fa{position:absolute;top:var(--fa-icon-offset);left:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important;height:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-gap:var(--card-gap, 16px);--resolved-card-width:var(--card-width, 300px);--resolved-card-height:var(--card-height, auto);--resolved-card-min-height:var(--card-min-height, auto);--resolved-card-background:var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,var(--resolved-card-height)));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:rgba(255,255,255,.8);transition:280ms cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:280ms cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
+            styles: [":root{--aup-default-padding:var(--default-padding, 18px);--aup-default-background:white;--command-face-icon-gap:8px;--aup-icon-width:24px;--aup-fa-icon-width:18px}.router-outlet-container>*{position:absolute;top:0;left:0;bottom:0;right:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context{max-width:95vw!important;max-height:95vh!important}.dialog-interaction-context mat-dialog-container{max-width:95vw!important;max-height:95vh!important;padding:0}.activity-outlet-wrapper{display:flex;flex-direction:column;align-items:stretch}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow 280ms cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{padding-bottom:0;border-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap, 24px);--resolved-row-hover-background-color:var(--row-hover-background-color, rgba(0, 0, 0, 0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{display:flex;flex-direction:column;align-items:stretch;justify-content:center;height:100%;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{padding-left:var(--default-column-gap);flex:1}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width)) / 2);position:relative}aup-icon fa-icon .svg-inline--fa{position:absolute;top:var(--fa-icon-offset);left:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important;height:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-gap:var(--card-gap, 16px);--resolved-card-width:var(--card-width, 300px);--resolved-card-height:var(--card-height, auto);--resolved-card-min-height:var(--card-min-height, auto);--resolved-card-background:var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:-ms-grid;display:grid;grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(0,var(--resolved-card-height)));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap));max-width:100%}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:rgba(255,255,255,.8);transition:280ms cubic-bezier(.4,0,.2,1)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{transition:280ms cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}"]
         }),
         __metadata("design:paramtypes", [])
     ], CardContainerComponent);
@@ -3344,13 +3344,27 @@ var Activity = /** @class */ (function (_super) {
     function Activity() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this._busyModel = new DelegatingValueModel().withDefault(false);
+        _this._focusedModel = _this.registerDisposable(new DelegatingValueModel());
         _this.class = 'aup-activity';
         return _this;
     }
+    Object.defineProperty(Activity.prototype, "isFocused", {
+        get: function () {
+            return this._focusedModel.value;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Activity.prototype.initialise = function (nestedInteractionContext, activityContext) {
+        var _this = this;
+        var _a = Dsl.disposeWith(this), chain = _a.chain, when = _a.when;
         assert$1.isNil(this._activityContext);
         this._activityContext = activityContext;
         this._interactionContext = nestedInteractionContext;
+        this._focusedModel.setDelegate(activityContext.focused);
+        when(this._focusedModel).becomesTruthy(function () {
+            _this.onActivityReady();
+        });
     };
     Object.defineProperty(Activity.prototype, "interactionContext", {
         get: function () {
@@ -3376,6 +3390,13 @@ var Activity = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(Activity.prototype, "focused", {
+        get: function () {
+            return this._focusedModel.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Activity.prototype.busyWhile = function (busyModel) {
         this._busyModel.setDelegate(busyModel);
     };
@@ -3389,6 +3410,11 @@ var Activity = /** @class */ (function (_super) {
         HostBinding('class'),
         __metadata("design:type", Object)
     ], Activity.prototype, "class", void 0);
+    __decorate([
+        HostBinding('attr.focused'),
+        __metadata("design:type", Object),
+        __metadata("design:paramtypes", [])
+    ], Activity.prototype, "isFocused", null);
     return Activity;
 }(DisposableComponent));
 
@@ -3527,6 +3553,7 @@ var ActivityRef = /** @class */ (function () {
         this.onComplete = onComplete;
         this._complete = false;
         this.deferredResult = Deferred.defer();
+        this.focusedModel = new MutableValueModel();
     }
     ActivityRef.prototype.isActivityRealised = function () {
         return !!this._activity;
@@ -3542,6 +3569,16 @@ var ActivityRef = /** @class */ (function () {
         enumerable: true,
         configurable: true
     });
+    ActivityRef.prototype.setFocused = function (focused) {
+        this.focusedModel.value = focused;
+    };
+    Object.defineProperty(ActivityRef.prototype, "focused", {
+        get: function () {
+            return this.focusedModel.value;
+        },
+        enumerable: true,
+        configurable: true
+    });
     ActivityRef.prototype.notifyActivityCreated = function (activity, nestedInteractionContext) {
         assert.isNil(this._activity);
         this._activity = activity;
@@ -3552,7 +3589,8 @@ var ActivityRef = /** @class */ (function () {
             },
             onCancel: function (error) {
                 self.finishActivity(function (deferred) { return deferred.reject(error); });
-            }
+            },
+            focused: this.focusedModel.readonly
         });
     };
     ActivityRef.prototype.finishActivity = function (resolveOrReject) {
@@ -3583,7 +3621,6 @@ var ActivityOutletComponent = /** @class */ (function () {
         this.componentFactoryResolver = componentFactoryResolver;
         this.viewContainerRef = viewContainerRef;
         this.injector = injector;
-        this._disableAnimation = false;
     }
     Object.defineProperty(ActivityOutletComponent.prototype, "activityRef", {
         get: function () {
@@ -3600,17 +3637,6 @@ var ActivityOutletComponent = /** @class */ (function () {
         configurable: true
     });
     ;
-    Object.defineProperty(ActivityOutletComponent.prototype, "disableAnimation", {
-        get: function () {
-            return this._disableAnimation;
-        },
-        set: function (value) {
-            // console.log({disableAnimation: value});
-            this._disableAnimation = value;
-        },
-        enumerable: true,
-        configurable: true
-    });
     ActivityOutletComponent.prototype.ngOnInit = function () {
     };
     ActivityOutletComponent.prototype.loadActivity = function (activityRef) {
@@ -3647,12 +3673,6 @@ var ActivityOutletComponent = /** @class */ (function () {
         __metadata("design:type", ActivityRef),
         __metadata("design:paramtypes", [ActivityRef])
     ], ActivityOutletComponent.prototype, "activityRef", null);
-    __decorate([
-        Input(),
-        HostBinding('@.disabled'),
-        __metadata("design:type", Boolean),
-        __metadata("design:paramtypes", [Boolean])
-    ], ActivityOutletComponent.prototype, "disableAnimation", null);
     ActivityOutletComponent = __decorate([
         Component({
             selector: 'aup-activity-outlet',
@@ -3671,13 +3691,13 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     function ActivityContainerComponent() {
         var _this = _super.call(this) || this;
         _this.dynamicHeight = false;
-        _this.activityTabs = [];
+        _this.activityRefs = [];
         _this.garbage = new GarbageCollector();
         // We have issues where angular is triggering a leave animation when an
-        // activity is replaced by another, but is not running the enter animation
+        // new activity is started, but is not running the enter animation
         // when it is scrolled back into view.  So we track the tab changes and
         // disable all animations inside the tab while we're animating.
-        _this.inTabChange = new MutableValueModel(false);
+        _this.inAnimation = new MutableValueModel(false);
         return _this;
     }
     ActivityContainerComponent.prototype.ngOnInit = function () {
@@ -3726,7 +3746,7 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
         if (!this.isActive()) {
             lang$1.illegalState('no activity in progress');
         }
-        return ___default.findLast(this.activityTabs, function (tab) { return !tab.isComplete(); });
+        return ___default.findLast(this.activityRefs, function (tab) { return !tab.isComplete(); });
     };
     /**
      * Cancels the current activity and returns true the context is no longer active, false if
@@ -3765,14 +3785,14 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
         });
         this.launchActivity(activityRef);
         // if this is the first activity let the interaction service know.
-        if (this.activityTabs.length === 1) {
+        if (this.activityRefs.length === 1) {
             // console.log('Now active!!!');
             this.interactionServiceApi.notifyActive(this);
         }
         return activityRef.activityResult;
     };
     ActivityContainerComponent.prototype.getActiveActivityCount = function () {
-        return this.activityTabs.filter(function (ref) { return !ref.isComplete(); }).length;
+        return this.activityRefs.filter(function (ref) { return !ref.isComplete(); }).length;
     };
     /**
      * Checks if this interaction context has finished an is in the process of waiting
@@ -3799,7 +3819,7 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
             // Without this our animation done wasn't called when a single
             // new activity followed a single tab activity (since we're tracking
             // by activity index)
-            this.activityTabs = [];
+            this.activityRefs = [];
             var promise = this.interactionServiceApi.notifyFinished(this);
             this._deferredCleanUp = promise
                 .finally(function () {
@@ -3809,8 +3829,8 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     };
     // @Trace()
     ActivityContainerComponent.prototype.launchActivity = function (activityRef) {
-        var cleanedTabs = this.activityTabs.filter(function (tab) { return !tab.isComplete(); });
-        this.activityTabs = cleanedTabs.concat(activityRef);
+        var cleanedTabs = this.activityRefs.filter(function (tab) { return !tab.isComplete(); });
+        this.activityRefs = cleanedTabs.concat(activityRef);
         this.synchroniseSelectedTabIndex();
     };
     ActivityContainerComponent.prototype.activityIndex = function (index, activityRef) {
@@ -3823,7 +3843,6 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
             this.onAnimationFinishedJob();
             this.onAnimationFinishedJob = undefined;
         }
-        this.inTabChange.value = false;
     };
     /**
      * Synchronises the selected tab index.
@@ -3834,11 +3853,14 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
         var previousIndex = this.tabs.selectedIndex;
         var newIndex = this.getActiveActivityCount() - 1;
         if (previousIndex !== newIndex) {
-            this.inTabChange.value = true;
+            this.inAnimation.value = true;
             this.tabs.selectedIndex = newIndex;
             this.onAnimationFinishedJob = function () {
-                _this.getSelectedOutlet().component.onActivityReady();
-                _this.activityTabs = _this.activityTabs.filter(function (tab) { return !tab.isComplete(); });
+                _this.activityRefs = _this.activityRefs.filter(function (tab) { return !tab.isComplete(); });
+                _this.inAnimation.value = false;
+                _this.activityRefs.forEach(function (ref, index) {
+                    ref.setFocused(index === newIndex);
+                });
             };
         }
     };
@@ -3875,7 +3897,7 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     ActivityContainerComponent = __decorate([
         Component({
             selector: 'aup-activity-container',
-            template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let tab of activityTabs; let i = index; trackBy: activityIndex\">\n    <aup-activity-outlet [nestedInteractionContext]=\"this\"\n                         [activityRef]=\"tab\"\n                         [disableAnimation]=\"inTabChange.value || i !== getSelectedTabIndex()\"></aup-activity-outlet>\n  </mat-tab>\n</mat-tab-group>\n",
+            template: "<mat-tab-group #tabs no-tab-header\n               [dynamicHeight]=\"dynamicHeight\"\n               [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let tab of activityRefs; let i = index; trackBy: activityIndex\">\n    <div class=\"activity-outlet-wrapper\" [@.disabled]=\"inAnimation.value || !tab.focused\">\n      <aup-activity-outlet [nestedInteractionContext]=\"this\"\n                           [activityRef]=\"tab\"></aup-activity-outlet>\n    </div>\n  </mat-tab>\n</mat-tab-group>\n",
             styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
         }),
         __metadata("design:paramtypes", [])