@coolon/angular-ui-powerups 2.0.0-alpha.36 → 2.0.0-alpha.38

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

@@ -446,6 +446,10 @@ var CommandFace;
         return ___default.isFunction(face === null || face === void 0 ? void 0 : face.icon) ? face.icon() : undefined;
     }
     CommandFace.getIconOf = getIconOf;
+    function getIconPositionOf(face) {
+        return ___default.isFunction(face === null || face === void 0 ? void 0 : face.iconPosition) ? face.iconPosition() : undefined;
+    }
+    CommandFace.getIconPositionOf = getIconPositionOf;
     function getTooltipOf(face) {
         return ___default.isFunction(face === null || face === void 0 ? void 0 : face.tooltip) ? face.tooltip() : undefined;
     }
@@ -460,7 +464,7 @@ var CommandFace;
         }
         Object.defineProperty(Adapter.prototype, "text", {
             get: function () {
-                return ___default.isFunction(this.face.text) ? this.face.text() : undefined;
+                return CommandFace.getTextOf(this.face);
             },
             enumerable: true,
             configurable: true
@@ -474,14 +478,14 @@ var CommandFace;
         });
         Object.defineProperty(Adapter.prototype, "iconPosition", {
             get: function () {
-                return ___default.isFunction(this.face.iconPosition) ? this.face.iconPosition() : undefined;
+                return CommandFace.getIconPositionOf(this.face);
             },
             enumerable: true,
             configurable: true
         });
         Object.defineProperty(Adapter.prototype, "tooltip", {
             get: function () {
-                return ___default.isFunction(this.face.tooltip) ? this.face.tooltip() : undefined;
+                return CommandFace.getTooltipOf(this.face);
             },
             enumerable: true,
             configurable: true
@@ -854,16 +858,7 @@ var CommandGroup = /** @class */ (function (_super) {
         _this.parent = parent;
         _this._rootTemplate = new MutableValueModel();
         _this._registrations = new MutableListModel();
-        _this._childFaceModels = new MutableListModel();
-        _this._faceChangeCount = new MutableValueModel(0);
         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;
-        var childFaces = chain(_this._childFaceModels)
-            .map(function (m) { return m.value; }, { dependsOn: _this._faceChangeCount })
-            .rejectNil();
-        var iconCount = childFaces
-            .select(function (face) { return !!CommandFace.getIconOf(face); })
-            .count();
-        _this.hasMixedIcons = valueOf.all(iconCount.isGreaterThan(0), iconCount.doesNotEqual(childFaces.length)).areTruthy();
         _this.childTemplates = chain(_this._rootTemplate).pluckList('children');
         _this.initialised = chain(_this._rootTemplate).isNotNil();
         return _this;
@@ -925,12 +920,10 @@ var CommandGroup = /** @class */ (function (_super) {
         var _this = this;
         this._registrations.push(registration);
         if (registration instanceof Registration.FaceRegistration) {
-            this._childFaceModels.push(registration.faceModel);
             var when = Dsl.disposeWith(registration).when;
             when(registration.faceModel).changes(function (is, was) {
-                _this.notifyChildFaceChanged(new CommandFace.Adapter(is), new CommandFace.Adapter(was));
+                _this.notifyChildFaceChanged(is, was);
             }, { asLongAs: this.initialised });
-            registration.onDispose(function () { return _this._childFaceModels.remove(registration.faceModel); });
         }
         registration.onDispose(function () { return _this._registrations.remove(registration); });
         return registration;
@@ -1146,10 +1139,15 @@ var CommandComponent = /** @class */ (function (_super) {
         var _this = _super.call(this) || this;
         _this.parent = parent;
         _this.CommandFace = CommandFace;
-        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;
-        _this.buttonStyle = chain(_this.faceModel).map(function (f) { return CommandFace.getStyleOf(f); });
+        var _a = Dsl.disposeWith(_this), chain = _a.chain, switchOn = _a.switchOn;
+        _this.activeFaceModel = switchOn(_this.command.busy).toValue(function (when) {
+            when.equalTo(true, _this.busyFaceModel);
+            when.otherwise(_this.faceModel);
+        }).otherwise(_this.faceModel);
+        _this.buttonStyle = chain(_this.activeFaceModel).map(function (f) { return CommandFace.getStyleOf(f); });
+        _this.colorModel = chain(_this.activeFaceModel).map(function (f) { return CommandFace.getColorOf(f); });
         if (parent) {
-            _this.registerDisposable(_this.parent.registerCommand(_this.command, _this.faceModel));
+            _this.registerDisposable(_this.parent.registerCommand(_this.command, _this.activeFaceModel));
         }
         return _this;
     }
@@ -1170,10 +1168,18 @@ var CommandComponent = /** @class */ (function (_super) {
         Input(), StoreInValueModel('faceModel'),
         __metadata("design:type", Object)
     ], CommandComponent.prototype, "face", void 0);
+    __decorate([
+        Input(), TrackExternal(),
+        __metadata("design:type", ValueModel)
+    ], CommandComponent.prototype, "busyFaceModel", void 0);
+    __decorate([
+        Input(), StoreInValueModel('busyFaceModel'),
+        __metadata("design:type", Object)
+    ], CommandComponent.prototype, "busyFace", void 0);
     CommandComponent = __decorate([
         Component({
             selector: 'aup-command',
-            template: "<ng-container *ngIf=\"!parent\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <button *ngSwitchCase=\"CommandFace.Style.STROKED\" mat-stroked-button [pectinCommand]=\"command\" [color]=\"CommandFace.getColorOf(face)\">\n      <aup-command-face [face]=\"face\"></aup-command-face>\n    </button>\n    <button *ngSwitchCase=\"CommandFace.Style.RAISED\" mat-raised-button [pectinCommand]=\"command\" [color]=\"CommandFace.getColorOf(face)\">\n      <aup-command-face [face]=\"face\"></aup-command-face>\n    </button>\n    <button *ngSwitchDefault mat-button [pectinCommand]=\"command\" [color]=\"CommandFace.getColorOf(face)\">\n      <aup-command-face [face]=\"face\"></aup-command-face>\n    </button>\n  </ng-container>\n</ng-container>\n"
+            template: "<ng-container *ngIf=\"!parent\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <button *ngSwitchCase=\"CommandFace.Style.STROKED\" mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n    <button *ngSwitchCase=\"CommandFace.Style.RAISED\" mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n    <button *ngSwitchDefault mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n  </ng-container>\n</ng-container>\n"
         }),
         __param(0, Optional()),
         __metadata("design:paramtypes", [CommandGroup])