@coolon/angular-ui-powerups 3.3.2 → 3.4.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 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.
 
+## [3.4.0](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.3.3...v3.4.0) (2020-10-17)
+
+
+### Features
+
+* updated aup-activity-actions to use faces ([a3e4990](https://bitbucket.org/coolon/angular-ui-powerups/commit/a3e4990664c5296d9c6f9eb79e55f8510afe6fca))
+
+### [3.3.3](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.3.2...v3.3.3) (2020-10-15)
+
+
+### Bug Fixes
+
+* added missing import to bootstrap ([c5ad944](https://bitbucket.org/coolon/angular-ui-powerups/commit/c5ad944ff9dabfa214a39233a5c1a0454402573a))
+* material buttons and menu items not disabling correctly ([1d449a7](https://bitbucket.org/coolon/angular-ui-powerups/commit/1d449a7720671ed4d86feb9c461bd3b148679e01))
+
 ### [3.3.2](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.3.1...v3.3.2) (2020-10-13)
 
 

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

@@ -313,11 +313,14 @@
 
     var CommandDirective = /** @class */ (function (_super) {
         __extends(CommandDirective, _super);
-        function CommandDirective(elementRef) {
+        function CommandDirective(elementRef, matButton, matMenuItem) {
             var _this = _super.call(this) || this;
             _this.elementRef = elementRef;
             _this._commandEnabled = new pectin.DelegatingValueModel().withDefault(false);
             _this._commandParameterProvided = false;
+            // Material buttons and menu items don't respond to the disabled binding so we
+            // need to inject them from our host element and handle them manually.
+            _this.matControl = matButton || matMenuItem;
             return _this;
         }
         Object.defineProperty(CommandDirective.prototype, "pectinCommand", {
@@ -357,23 +360,36 @@
         };
         CommandDirective.prototype.ngAfterViewInit = function () {
             var _this = this;
-            // for some reason mat-buttons kills the disabled host binding.  It works on a regular button but for now
-            // we need to do this.
             var when = pectin.Dsl.disposeWith(this).when;
-            when.valueOf(this._commandEnabled).changes(function (enabled) {
-                if (enabled) {
-                    _this.elementRef.nativeElement.removeAttribute('disabled');
-                    if (_this.elementRef.nativeElement.tagName === 'A') {
-                        _this.elementRef.nativeElement.setAttribute('href', 'javascript:void');
-                    }
+            when(this._commandEnabled).changes(function (enabled) { return _this.updateEnabledState(enabled); }, {
+                initialValue: 'triggerChange'
+            });
+        };
+        CommandDirective.prototype.updateEnabledState = function (enabled) {
+            var _this = this;
+            // for some reason mat-buttons kills the disabled host binding.  It works on a regular button but for now
+            // we need to do this. The set timeout is required to prevent the button getting a expression changed
+            // when it's clicked.
+            if (this.matControl) {
+                setTimeout(function () {
+                    _this.matControl.disabled = !enabled;
+                }, 0);
+            }
+            if (!enabled) {
+                // Note:
+                // We can't use a host binding here for disabled as the directive can be used on arbitrary
+                // components (e.g. divs) and the compiler will barf if we use the host binding.
+                this.elementRef.nativeElement.setAttribute('disabled', 'disabled');
+                if (this.elementRef.nativeElement.tagName === 'A') {
+                    this.elementRef.nativeElement.removeAttribute('href');
                 }
-                else {
-                    _this.elementRef.nativeElement.setAttribute('disabled', 'disabled');
-                    if (_this.elementRef.nativeElement.tagName === 'A') {
-                        _this.elementRef.nativeElement.removeAttribute('href');
-                    }
+            }
+            else {
+                this.elementRef.nativeElement.removeAttribute('disabled');
+                if (this.elementRef.nativeElement.tagName === 'A') {
+                    this.elementRef.nativeElement.setAttribute('href', 'javascript:void');
                 }
-            }, { initialValue: 'triggerChange' });
+            }
         };
         CommandDirective.prototype.ngOnDestroy = function () {
             this.dispose();
@@ -402,7 +418,9 @@
                 },] }
     ];
     CommandDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef, decorators: [{ type: i0.Inject, args: [i0.ElementRef,] }] }
+        { type: i0.ElementRef, decorators: [{ type: i0.Inject, args: [i0.ElementRef,] }] },
+        { type: button.MatButton, decorators: [{ type: i0.Host }, { type: i0.Optional }] },
+        { type: menu.MatMenuItem, decorators: [{ type: i0.Host }, { type: i0.Optional }] }
     ]; };
     CommandDirective.propDecorators = {
         pectinCommand: [{ type: i0.Input }],
@@ -436,7 +454,7 @@
             _this.document = document;
             // TODO: Make this also track the current enabled/disabled state.
             var when = pectin.Dsl.disposeWith(_this).when;
-            when.valueOf(_this.focusContext.focused).changes(function (focused) {
+            when(_this.focusContext.focused).changes(function (focused) {
                 if (focused && !_this.alreadyHasFocus()) {
                     _this.tryAndFocus();
                 }
@@ -2405,7 +2423,7 @@
             var subscription = this.switchCaseOptions.changes.subscribe(function (change) { return _this.updateSelection(); });
             this.onDispose(function () { return subscription.unsubscribe(); });
             var _a = pectin.Dsl.disposeWith(this), chain = _a.chain, when = _a.when;
-            when.valueOf(this.switchModel).changes(function () { return _this.updateSelection(); }, { initialValue: 'triggerChange' });
+            when(this.switchModel).changes(function () { return _this.updateSelection(); }, { initialValue: 'triggerChange' });
             this.cdr.detectChanges();
         };
         SwitchCaseComponent.prototype.updateSelection = function () {
@@ -3256,7 +3274,7 @@
             else {
                 var editSession_1 = new EditSession(rowId, row, this._createForm(row), this.saveCommand);
                 var when = pectin.Dsl.disposeWith(editSession_1).when;
-                when.valueOf(editSession_1.liveRowValue).changes(function (editedValue) {
+                when(editSession_1.liveRowValue).changes(function (editedValue) {
                     _this._rowsBeingEdited.replaceOrPush(editedValue);
                 }, { initialValue: 'triggerChangeUnlessNil' });
                 this._editorSessions.push(editSession_1);
@@ -3844,12 +3862,6 @@
         });
         ActivityActionsComponent.prototype.ngOnInit = function () {
         };
-        ActivityActionsComponent.prototype.hasConfirmText = function () {
-            return !___default['default'].isEmpty(this.confirmText);
-        };
-        ActivityActionsComponent.prototype.hasCancelText = function () {
-            return !___default['default'].isEmpty(this.cancelText);
-        };
         ActivityActionsComponent.prototype.hasConfirmCommand = function () {
             return pectin.DelegatingCommand.hasDelegate(this.confirmCommand);
         };
@@ -3861,15 +3873,14 @@
     ActivityActionsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-activity-actions',
-                    template: "<ng-container *ngIf=\"hasCancelCommand()\">\n  <button class=\"cancel\" *ngIf=\"!hasCancelText()\" mat-icon-button [pectinCommand]=\"cancelCommand\">\n    <aup-icon icon=\"mat:clear\"></aup-icon>\n  </button>\n  <button class=\"cancel\" *ngIf=\"hasCancelText()\" mat-button [pectinCommand]=\"cancelCommand\">{{cancelText}}</button>\n</ng-container>\n<ng-container *ngIf=\"hasConfirmCommand()\">\n  <button class=\"confirm\" *ngIf=\"!hasConfirmText()\" mat-icon-button [pectinCommand]=\"confirmCommand\">\n    <aup-icon icon=\"mat:done\"></aup-icon>\n  </button>\n  <button class=\"confirm\" *ngIf=\"hasConfirmText()\" mat-button [pectinCommand]=\"confirmCommand\">{{confirmText}}</button>\n</ng-container>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n",
+                    template: "<ng-container *ngIf=\"hasCancelCommand()\">\n  <aup-command class=\"cancel\" [command]=\"cancelCommand\" [face]=\"style.cancel\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasConfirmCommand()\">\n  <aup-command class=\"confirm\" [command]=\"confirmCommand\" [face]=\"style.confirm\"></aup-command>\n</ng-container>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n",
                     styles: [":host{-ms-grid-columns:auto auto 1fr;-ms-grid-rows:auto;align-items:center;display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr;grid-template-rows:auto;justify-content:end}:host.align-end{-ms-grid-columns:1fr auto auto;grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host.align-stretch{-ms-grid-columns:auto 1fr auto;grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}.cancel{-ms-grid-column:1;-ms-grid-row:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-column:2;-ms-grid-row:1}:host.align-stretch>.cancel{-ms-grid-column:1;-ms-grid-row:1}.confirm{-ms-grid-column:2;-ms-grid-row:1;grid-area:confirm}.column,:host.align-end>.confirm,:host.align-stretch>.confirm{-ms-grid-column:3;-ms-grid-row:1}.column{grid-area:content;text-align:left}:host.align-end>.column{-ms-grid-column:1;-ms-grid-row:1}:host.align-stretch>.column{-ms-grid-column:2;-ms-grid-row:1}"]
                 },] }
     ];
     ActivityActionsComponent.propDecorators = {
         confirmCommand: [{ type: i0.Input }],
-        confirmText: [{ type: i0.Input }],
         cancelCommand: [{ type: i0.Input }],
-        cancelText: [{ type: i0.Input }],
+        style: [{ type: i0.Input }],
         align: [{ type: i0.Input }],
         alignEnd: [{ type: i0.HostBinding, args: ['class.align-end',] }],
         alignStretch: [{ type: i0.HostBinding, args: ['class.align-stretch',] }]
@@ -4703,7 +4714,7 @@
             var componentRef = overlayRef.attach(this.outputPortal);
             this.interactionContext = componentRef.instance;
             return new Promise(function (resolve, reject) {
-                // HACK: afterViewInit won't have been called yet.  Need to add when.valueOf(interactionContext.ready).becomesTruthy(...)
+                // HACK: afterViewInit won't have been called yet.  Need to add when(interactionContext.ready).becomesTruthy(...)
                 setTimeout(function () {
                     _this.interactionContext.startActivity(activityType, data)
                         .then(resolve)
@@ -5355,7 +5366,7 @@
             this.visitModel.value = visit;
             pectin.DebugContext.getOrCreate(this.visitModel).tag(this.placeDefinition.component.name + ".visitModel");
             this.placeDefinition.getVisitParameterDefs().forEach(function (parameterDef) { return _this.installBinding(parameterDef); });
-            when.valueOf(this.visitModel).changes(function (current, previous) {
+            when(this.visitModel).changes(function (current, previous) {
                 notifyVisitChanged(current, previous);
             }, { unless: this._inVisitUpdate });
         };
@@ -7180,7 +7191,7 @@
                 this.onAnimationFinishedJob = finishPlaceLoad;
             }
             var _a = pectin.Dsl.disposeWith(activePlace), when = _a.when, chain = _a.chain, valueOf = _a.valueOf;
-            when.valueOf(this.routerVisitModel)
+            when(this.routerVisitModel)
                 .changes(function (visit) {
                 activePlace.updateVisit(visit);
             }, {
@@ -7268,7 +7279,7 @@
             _this.commandFactory = pectin.Command.createFactory(function (placeDefinition) {
                 _this.placeOutlet.navigate(new Visit(placeDefinition));
             });
-            when.valueOf(_this.placeOutletModel).changes(function (outlet) {
+            when(_this.placeOutletModel).changes(function (outlet) {
                 // NOTE: this updates during a change cycle and causes our isActiveMethod to return 2 different
                 // values in the one change detection cycle. So instead we delay the update to a different
                 // tick.