@coolon/angular-ui-powerups 1.9.0 → 1.10.0

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

@@ -12,12 +12,12 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatIconModule } from '@angular/material/icon';
 import { DelegatingValueModel, assert, UnaryCommand, lang, Dsl, GarbageCollector, Logger, Command, FocusManager, DelegatingFormValueModel, TrackExternal, ListModel, StoreInListModel, ValueModel, StoreInValueModel, MutableValueModel, Deferred, Trace, MutableListModel, Guard, DebugContext, Binding, Functions } from '@coolon/pectin';
 import { PortalModule } from '@angular/cdk/portal';
+import { FlexModule, GridModule } from '@angular/flex-layout';
 import { MatDialog, MatDialogConfig, MAT_DIALOG_DEFAULT_OPTIONS, MatDialogModule } from '@angular/material/dialog';
 import { RouterModule, UrlSegment, Router, UrlSerializer, NavigationStart, NavigationEnd, NavigationError, NavigationCancel, RouterOutlet } from '@angular/router';
 import ___default, { isEqual, isNil } from 'lodash';
 import ResizeObserver from 'resize-observer-polyfill';
 import { assert as assert$1, lang as lang$1, Opts, Klass } from '@coolon/typescript-utilities';
-import { FlexModule } from '@angular/flex-layout';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatListModule } from '@angular/material/list';
 import { MatTooltipModule } from '@angular/material/tooltip';
@@ -1352,8 +1352,8 @@ var ActivityActionsComponent = /** @class */ (function (_super) {
     ActivityActionsComponent = __decorate([
         Component({
             selector: 'aup-activity-actions',
-            template: "<button mat-icon-button [pectinCommand]=\"cancelCommand\"><mat-icon>clear</mat-icon></button>\n<button *ngIf=\"!hasConfirmText()\" mat-icon-button [pectinCommand]=\"confirmCommand\"><mat-icon>done</mat-icon></button>\n<button *ngIf=\"hasConfirmText()\" mat-button [pectinCommand]=\"confirmCommand\">{{confirmText}}</button>\n",
-            styles: [":host{display:flex;flex-direction:row;align-items:center;justify-content:flex-start}:host.align-end{justify-content:flex-end}"]
+            template: "<button class=\"cancel\" mat-icon-button [pectinCommand]=\"cancelCommand\">\n  <mat-icon>clear</mat-icon>\n</button>\n<button class=\"confirm\" *ngIf=\"!hasConfirmText()\" mat-icon-button [pectinCommand]=\"confirmCommand\">\n  <mat-icon>done</mat-icon>\n</button>\n<button class=\"confirm\" *ngIf=\"hasConfirmText()\" mat-button [pectinCommand]=\"confirmCommand\">{{confirmText}}</button>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n",
+            styles: [":host{display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";-ms-grid-columns:auto auto 1fr;grid-template-columns:auto auto 1fr;-ms-grid-rows:auto;grid-template-rows:auto;align-items:center;justify-content:end}:host.align-end{grid-template-areas:\"content cancel confirm\";-ms-grid-columns:1fr auto auto;grid-template-columns:1fr auto auto}.cancel{-ms-grid-row:1;-ms-grid-column:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-row:1;-ms-grid-column:2}.confirm{-ms-grid-row:1;-ms-grid-column:2;grid-area:confirm}:host.align-end>.confirm{-ms-grid-row:1;-ms-grid-column:3}.content{-ms-grid-row:1;-ms-grid-column:3;grid-area:content;text-align:left}:host.align-end>.content{-ms-grid-row:1;-ms-grid-column:1}"]
         })
     ], ActivityActionsComponent);
     return ActivityActionsComponent;
@@ -1678,6 +1678,8 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     ActivityContainerComponent.prototype.ngAfterViewInit = function () {
         var _this = this;
         var _a = Dsl.disposeWith(this), chain = _a.chain, observe = _a.observe;
+        // using the component directly rather than (animationDone)=.. allows us
+        // to keep our callback private.
         observe.valuesFrom(this.tabs.animationDone).subscribe(function () { return _this.onAnimationFinished(); });
     };
     ActivityContainerComponent.prototype.initialise = function (identifier, api) {
@@ -1784,6 +1786,12 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     ActivityContainerComponent.prototype.finishAndStartCleanup = function () {
         var _this = this;
         if (!this._deferredCleanUp) {
+            // Important:
+            // Clear our tabs so the next activity triggers a tab change.
+            // 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 = [];
             var promise = this.interactionServiceApi.notifyFinished(this);
             this._deferredCleanUp = promise
                 .finally(function () {
@@ -1795,26 +1803,32 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     ActivityContainerComponent.prototype.launchActivity = function (activityRef) {
         var cleanedTabs = this.activityTabs.filter(function (tab) { return !tab.isComplete(); });
         this.activityTabs = cleanedTabs.concat(activityRef);
-        this.tabs.selectedIndex = this.activityTabs.length;
+        this.synchroniseSelectedTabIndex();
     };
     ActivityContainerComponent.prototype.activityIndex = function (index, activityRef) {
         return index;
     };
     ;
-    // @Trace()
     ActivityContainerComponent.prototype.onAnimationFinished = function () {
-        this.getSelectedOutlet().component.onActivityReady();
-        this.activityTabs = this.activityTabs.filter(function (tab) { return !tab.isComplete(); });
+        if (this.onAnimationFinishedJob) {
+            this.onAnimationFinishedJob();
+            this.onAnimationFinishedJob = undefined;
+        }
     };
     /**
-     * Synchronises the selected tab index.  Returns true if there was no change to the selected index.
+     * Synchronises the selected tab index.
      */
-    // @Trace()
     ActivityContainerComponent.prototype.synchroniseSelectedTabIndex = function () {
+        var _this = this;
         var previousIndex = this.tabs.selectedIndex;
         var newIndex = this.getActiveActivityCount() - 1;
-        this.tabs.selectedIndex = newIndex;
-        return previousIndex === newIndex;
+        if (previousIndex !== newIndex) {
+            this.tabs.selectedIndex = newIndex;
+            this.onAnimationFinishedJob = function () {
+                _this.getSelectedOutlet().component.onActivityReady();
+                _this.activityTabs = _this.activityTabs.filter(function (tab) { return !tab.isComplete(); });
+            };
+        }
     };
     ActivityContainerComponent.prototype.getSelectedOutlet = function () {
         return this.activityOutlets.toArray()[this.tabs.selectedIndex];
@@ -1851,7 +1865,7 @@ var ActivityContainerComponent = /** @class */ (function (_super) {
     ActivityContainerComponent = __decorate([
         Component({
             selector: 'aup-activity-container',
-            template: "<mat-tab-group #tabs no-tab-header [dynamicHeight]=\"dynamicHeight\" [class.full-height-tabs]=\"!dynamicHeight\">\n  <mat-tab *ngFor=\"let tab of activityTabs; trackBy: activityIndex\" >\n    <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"tab\"></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 activityTabs; trackBy: activityIndex\" >\n    <aup-activity-outlet [nestedInteractionContext]=\"this\" [activityRef]=\"tab\"></aup-activity-outlet>\n  </mat-tab>\n</mat-tab-group>\n",
             styles: [":host{display:flex;flex-direction:column}mat-tab-group{flex:1}"]
         }),
         __metadata("design:paramtypes", [])
@@ -2301,7 +2315,9 @@ var InteractionModule = /** @class */ (function () {
                 PortalModule,
                 RouterModule,
                 MatIconModule,
-                DirectivesModule
+                DirectivesModule,
+                FlexModule,
+                GridModule
             ],
             declarations: [
                 ActivityContainerComponent,