@coolon/angular-ui-powerups 1.9.0 → 1.10.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 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.10.0](https://bitbucket.org/coolon/angular-ui-powerups/compare/v1.9.0...v1.10.0) (2020-06-04)
+
+
+### Features
+
+* added ng-content support to aup-activity-actions ([c30272d](https://bitbucket.org/coolon/angular-ui-powerups/commit/c30272dfe3f6fe09daf67542a32103fbb3821c9d))
+
+
+### Bug Fixes
+
+* activity container component not always calling onActivityReady ([a6cbcf7](https://bitbucket.org/coolon/angular-ui-powerups/commit/a6cbcf740e98f31c016d13086df76baa91f0dfd2))
+
 ## [1.9.0](https://bitbucket.org/coolon/angular-ui-powerups/compare/v1.8.0...v1.9.0) (2020-05-31)
 
 

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/icon'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@angular/material/dialog'), require('@angular/router'), require('lodash'), require('resize-observer-polyfill'), require('@coolon/typescript-utilities'), require('@angular/flex-layout'), require('@angular/material/progress-spinner'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('rxjs')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/material/button', '@angular/material/checkbox', '@angular/material/icon', '@coolon/pectin', '@angular/cdk/portal', '@angular/material/dialog', '@angular/router', 'lodash', 'resize-observer-polyfill', '@coolon/typescript-utilities', '@angular/flex-layout', '@angular/material/progress-spinner', '@angular/material/list', '@angular/material/tooltip', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'rxjs'], factory) :
-    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.material.button, global.ng.material.checkbox, global.ng.material.icon, global.pectin, global.ng.cdk.portal, global.ng.material.dialog, global.ng.router, global.___default, global.ResizeObserver, global.typescriptUtilities, global.ng.flexLayout, global.ng.material.progressSpinner, global.ng.material.list, global.ng.material.tooltip, global.src, global.fastMemoizeDecorator, null, global.ng.animations, global.rxjs));
-}(this, (function (exports, common, core, forms, formField, input, select, tabs, animations, button, checkbox, icon, pectin, portal, dialog, router, ___default, ResizeObserver, typescriptUtilities, flexLayout, progressSpinner, list, tooltip, src, fastMemoizeDecorator, reflectMetadata, animations$1, rxjs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/icon'), require('@coolon/pectin'), require('@angular/cdk/portal'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('lodash'), require('resize-observer-polyfill'), require('@coolon/typescript-utilities'), require('@angular/material/progress-spinner'), require('@angular/material/list'), require('@angular/material/tooltip'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('rxjs')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/material/button', '@angular/material/checkbox', '@angular/material/icon', '@coolon/pectin', '@angular/cdk/portal', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', 'lodash', 'resize-observer-polyfill', '@coolon/typescript-utilities', '@angular/material/progress-spinner', '@angular/material/list', '@angular/material/tooltip', '@typescript-plus/fast-memoize-decorator/dist/src', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'rxjs'], factory) :
+    (global = global || self, factory((global.coolon = global.coolon || {}, global.coolon['angular-ui-powerups'] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.material.button, global.ng.material.checkbox, global.ng.material.icon, global.pectin, global.ng.cdk.portal, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.___default, global.ResizeObserver, global.typescriptUtilities, global.ng.material.progressSpinner, global.ng.material.list, global.ng.material.tooltip, global.src, global.fastMemoizeDecorator, null, global.ng.animations, global.rxjs));
+}(this, (function (exports, common, core, forms, formField, input, select, tabs, animations, button, checkbox, icon, pectin, portal, flexLayout, dialog, router, ___default, ResizeObserver, typescriptUtilities, progressSpinner, list, tooltip, src, fastMemoizeDecorator, reflectMetadata, animations$1, rxjs) { 'use strict';
 
     var ___default__default = 'default' in ___default ? ___default['default'] : ___default;
     ResizeObserver = ResizeObserver && Object.prototype.hasOwnProperty.call(ResizeObserver, 'default') ? ResizeObserver['default'] : ResizeObserver;
@@ -1529,8 +1529,8 @@
         ActivityActionsComponent = __decorate([
             core.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;
@@ -1855,6 +1855,8 @@
         ActivityContainerComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
             var _a = pectin.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) {
@@ -1961,6 +1963,12 @@
         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 () {
@@ -1972,26 +1980,32 @@
         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];
@@ -2028,7 +2042,7 @@
         ActivityContainerComponent = __decorate([
             core.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", [])
@@ -2478,7 +2492,9 @@
                     portal.PortalModule,
                     router.RouterModule,
                     icon.MatIconModule,
-                    DirectivesModule
+                    DirectivesModule,
+                    flexLayout.FlexModule,
+                    flexLayout.GridModule
                 ],
                 declarations: [
                     ActivityContainerComponent,