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

package/esm5/lib/components/commands/command-face/command-face.component.js

@@ -1,17 +1,22 @@
-import { __decorate, __extends, __metadata, __param } from "tslib";
-import { Component, HostBinding, Input, Optional, ViewEncapsulation } from '@angular/core';
+import { __decorate, __extends, __metadata } from "tslib";
+import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
 import { Dsl, MutableValueModel, StoreInValueModel } from '@coolon/pectin';
 import { DisposableComponent } from '../../disposable-component';
-import { CommandContainer } from '../command-container';
 import { CommandFace } from '../command-face';
 /**
- *
+ * Custom CSS:
+ * @example
+ * root: { // globally
+ *   --aup-command-face-icon-gap: 8px;
+ * }
+ * aup-command-face { // per instance
+ *   --icon-gap: 4px;
+ * }
  */
 var CommandFaceComponent = /** @class */ (function (_super) {
     __extends(CommandFaceComponent, _super);
-    function CommandFaceComponent(commandContainer) {
+    function CommandFaceComponent() {
         var _this = _super.call(this) || this;
-        _this.commandContainer = commandContainer;
         _this.faceModel = new MutableValueModel();
         _this.ignoreIcon = false;
         _this.ignoreText = false;
@@ -22,7 +27,7 @@ var CommandFaceComponent = /** @class */ (function (_super) {
         _this.iconModel = faceAdapter.pluck('icon');
         _this.textModel = faceAdapter.pluck('text');
         _this.positionModel = faceAdapter.pluck('iconPosition');
-        _this.destructiveModel = faceAdapter.pluck('destructive');
+        _this.colorModel = faceAdapter.pluck('color');
         return _this;
     }
     Object.defineProperty(CommandFaceComponent.prototype, "requiresMissingIconInLayout", {
@@ -36,8 +41,8 @@ var CommandFaceComponent = /** @class */ (function (_super) {
     };
     Object.defineProperty(CommandFaceComponent.prototype, "iconPosition", {
         get: function () {
-            var _a, _b, _c;
-            return (_c = (_a = this.positionModel.value) !== null && _a !== void 0 ? _a : (_b = this.commandContainer) === null || _b === void 0 ? void 0 : _b.getDefaultIconPosition()) !== null && _c !== void 0 ? _c : CommandFace.Position.START;
+            var _a;
+            return (_a = this.positionModel.value) !== null && _a !== void 0 ? _a : CommandFace.Position.START;
         },
         enumerable: true,
         configurable: true
@@ -70,16 +75,13 @@ var CommandFaceComponent = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
-    Object.defineProperty(CommandFaceComponent.prototype, "destructive", {
+    Object.defineProperty(CommandFaceComponent.prototype, "color", {
         get: function () {
-            return this.destructiveModel.value;
+            return this.colorModel.value;
         },
         enumerable: true,
         configurable: true
     });
-    CommandFaceComponent.ctorParameters = function () { return [
-        { type: CommandContainer, decorators: [{ type: Optional }] }
-    ]; };
     __decorate([
         Input('face'), StoreInValueModel('faceModel'),
         __metadata("design:type", Object)
@@ -102,19 +104,18 @@ var CommandFaceComponent = /** @class */ (function (_super) {
         __metadata("design:paramtypes", [])
     ], CommandFaceComponent.prototype, "requiresMissingIconInLayout", null);
     __decorate([
-        HostBinding('class.destructive'),
-        __metadata("design:type", Boolean),
+        HostBinding('attr.color'),
+        __metadata("design:type", String),
         __metadata("design:paramtypes", [])
-    ], CommandFaceComponent.prototype, "destructive", null);
+    ], CommandFaceComponent.prototype, "color", null);
     CommandFaceComponent = __decorate([
         Component({
             selector: 'aup-command-face',
             template: "<aup-icon *ngIf=\"iconStart\" [icon]=\"iconModel.value\"></aup-icon>\n<span *ngIf=\"this.text\">{{this.text}}</span>\n<aup-icon *ngIf=\"iconEnd\" [icon]=\"iconModel.value\"></aup-icon>\n",
             encapsulation: ViewEncapsulation.None,
-            styles: ["aup-command-face{--icon-gap:var(--command-face-icon-gap);display:inline-flex;flex-direction:row;align-items:center}aup-command-face *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}"]
+            styles: ["aup-command-face{--icon-gap:var(--aup-command-face-icon-gap);display:inline-flex;flex-direction:row;align-items:center}aup-command-face *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}"]
         }),
-        __param(0, Optional()),
-        __metadata("design:paramtypes", [CommandContainer])
+        __metadata("design:paramtypes", [])
     ], CommandFaceComponent);
     return CommandFaceComponent;
 }(DisposableComponent));

package/esm5/lib/components/commands/command-face/command-face.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"command-face.component.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/command-face/command-face.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, HostBinding, Input, OnInit, Optional, ViewEncapsulation } from '@angular/core';\n\nimport { Dsl, MutableValueModel, StoreInValueModel, ValueModelChain } from '@coolon/pectin';\nimport { DisposableComponent } from '../../disposable-component';\nimport { CommandContainer } from '../command-container';\nimport { CommandFace } from '../command-face';\n\n/**\n *\n */\n@Component({\n  selector: 'aup-command-face',\n  templateUrl: './command-face.component.html',\n  styleUrls: ['./command-face.component.scss'],\n  encapsulation: ViewEncapsulation.None\n})\nexport class CommandFaceComponent<T> extends DisposableComponent implements OnInit {\n\n  private readonly faceModel = new MutableValueModel<CommandFace>();\n\n  // tslint:disable-next-line:no-input-rename\n  @Input('face') @StoreInValueModel('faceModel')\n  _rawFace: CommandFace;\n\n  @Input()\n  ignoreIcon = false;\n\n  @Input()\n  ignoreText = false;\n\n  @Input()\n  includeMissingIconInLayout = false;\n\n  @HostBinding('class.hide-icon')\n  get requiresMissingIconInLayout() {\n    return this.includeMissingIconInLayout && !this.iconModel.value\n  }\n\n  readonly iconModel: ValueModelChain<string>;\n  private textModel: ValueModelChain<string>;\n  readonly positionModel: ValueModelChain<string>;\n  private destructiveModel: ValueModelChain<boolean>;\n\n  constructor(@Optional() readonly commandContainer: CommandContainer) {\n    super();\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n    // overkill /c: when all you have is a hammer...\n    const faceAdapter = chain(this.faceModel).map(face => new CommandFace.Adapter(face));\n    this.iconModel = faceAdapter.pluck('icon');\n    this.textModel = faceAdapter.pluck('text');\n    this.positionModel = faceAdapter.pluck('iconPosition');\n    this.destructiveModel = faceAdapter.pluck('destructive');\n  }\n\n  ngOnInit() {\n  }\n\n  get iconPosition(): string {\n    return this.positionModel.value ?? this.commandContainer?.getDefaultIconPosition() ?? CommandFace.Position.START;\n  }\n\n  get shouldIncludeIcon() {\n    return (!this.ignoreIcon && this.iconModel.value) || this.includeMissingIconInLayout;\n  }\n\n  get iconStart(): boolean {\n    return  this.shouldIncludeIcon && this.iconPosition === CommandFace.Position.START;\n  }\n\n  get iconEnd(): boolean {\n    return this.shouldIncludeIcon && this.iconPosition === CommandFace.Position.END;\n  }\n\n  get text(): string {\n    return this.ignoreText ? undefined : this.textModel.value;\n  }\n\n  @HostBinding('class.destructive')\n  get destructive(): boolean {\n    return this.destructiveModel.value;\n  }\n\n}\n"]}
+{"version":3,"file":"command-face.component.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/command-face/command-face.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAU,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGzF,OAAO,EAAE,GAAG,EAAE,iBAAiB,EAAE,iBAAiB,EAAmB,MAAM,gBAAgB,CAAC;AAC5F,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;;;;;;;;GASG;AAOH;IAA6C,wCAAmB;IA2B9D;QAAA,YACE,iBAAO,SAQR;QAlCgB,eAAS,GAAG,IAAI,iBAAiB,EAAe,CAAC;QAOlE,gBAAU,GAAG,KAAK,CAAC;QAGnB,gBAAU,GAAG,KAAK,CAAC;QAGnB,gCAA0B,GAAG,KAAK,CAAC;QAc3B,IAAA,2BAAkF,EAAhF,gBAAK,EAAE,oBAAO,EAAE,kBAAM,EAAE,cAAI,EAAE,gBAAK,EAAE,oBAAO,EAAE,sBAAkC,CAAC;QACzF,gDAAgD;QAChD,IAAM,WAAW,GAAG,KAAK,CAAC,KAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,UAAA,IAAI,IAAI,OAAA,IAAI,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,EAA7B,CAA6B,CAAC,CAAC;QACrF,KAAI,CAAC,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC3C,KAAI,CAAC,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC3C,KAAI,CAAC,aAAa,GAAG,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;QACvD,KAAI,CAAC,UAAU,GAAG,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;;IAC/C,CAAC;IAlBD,sBAAI,6DAA2B;aAA/B;YACE,OAAO,IAAI,CAAC,0BAA0B,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;QAClE,CAAC;;;OAAA;IAkBD,uCAAQ,GAAR;IACA,CAAC;IAED,sBAAI,8CAAY;aAAhB;;YACE,aAAO,IAAI,CAAC,aAAa,CAAC,KAAK,mCAAI,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC;QAChE,CAAC;;;OAAA;IAED,sBAAI,mDAAiB;aAArB;YACE,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,0BAA0B,CAAC;QACvF,CAAC;;;OAAA;IAED,sBAAI,2CAAS;aAAb;YACE,OAAO,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC;QACpF,CAAC;;;OAAA;IAED,sBAAI,yCAAO;aAAX;YACE,OAAO,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC;QAClF,CAAC;;;OAAA;IAED,sBAAI,sCAAI;aAAR;YACE,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;QAC5D,CAAC;;;OAAA;IAGD,sBAAI,uCAAK;aAAT;YACE,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;QAC/B,CAAC;;;OAAA;IA1DD;QADC,KAAK,CAAC,MAAM,CAAC,EAAE,iBAAiB,CAAC,WAAW,CAAC;;0DACxB;IAGtB;QADC,KAAK,EAAE;;4DACW;IAGnB;QADC,KAAK,EAAE;;4DACW;IAGnB;QADC,KAAK,EAAE;;4EAC2B;IAGnC;QADC,WAAW,CAAC,iBAAiB,CAAC;;;2EAG9B;IA0CD;QADC,WAAW,CAAC,YAAY,CAAC;;;qDAGzB;IAhEU,oBAAoB;QANhC,SAAS,CAAC;YACT,QAAQ,EAAE,kBAAkB;YAC5B,sMAA4C;YAE5C,aAAa,EAAE,iBAAiB,CAAC,IAAI;;SACtC,CAAC;;OACW,oBAAoB,CAkEhC;IAAD,2BAAC;CAAA,AAlED,CAA6C,mBAAmB,GAkE/D;SAlEY,oBAAoB","sourcesContent":["import { Component, HostBinding, Input, OnInit, ViewEncapsulation } from '@angular/core';\nimport { ThemePalette } from '@angular/material/core';\n\nimport { Dsl, MutableValueModel, StoreInValueModel, ValueModelChain } from '@coolon/pectin';\nimport { DisposableComponent } from '../../disposable-component';\nimport { CommandFace } from '../command-face';\n\n/**\n * Custom CSS:\n * @example\n * root: { // globally\n *   --aup-command-face-icon-gap: 8px;\n * }\n * aup-command-face { // per instance\n *   --icon-gap: 4px;\n * }\n */\n@Component({\n  selector: 'aup-command-face',\n  templateUrl: './command-face.component.html',\n  styleUrls: ['./command-face.component.scss'],\n  encapsulation: ViewEncapsulation.None\n})\nexport class CommandFaceComponent<T> extends DisposableComponent implements OnInit {\n\n  private readonly faceModel = new MutableValueModel<CommandFace>();\n\n  // tslint:disable-next-line:no-input-rename\n  @Input('face') @StoreInValueModel('faceModel')\n  _rawFace: CommandFace;\n\n  @Input()\n  ignoreIcon = false;\n\n  @Input()\n  ignoreText = false;\n\n  @Input()\n  includeMissingIconInLayout = false;\n\n  @HostBinding('class.hide-icon')\n  get requiresMissingIconInLayout() {\n    return this.includeMissingIconInLayout && !this.iconModel.value;\n  }\n\n  readonly iconModel: ValueModelChain<string>;\n  private textModel: ValueModelChain<string>;\n  readonly positionModel: ValueModelChain<string>;\n  private colorModel: ValueModelChain<ThemePalette>;\n\n  constructor() {\n    super();\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n    // overkill /c: when all you have is a hammer...\n    const faceAdapter = chain(this.faceModel).map(face => new CommandFace.Adapter(face));\n    this.iconModel = faceAdapter.pluck('icon');\n    this.textModel = faceAdapter.pluck('text');\n    this.positionModel = faceAdapter.pluck('iconPosition');\n    this.colorModel = faceAdapter.pluck('color');\n  }\n\n  ngOnInit() {\n  }\n\n  get iconPosition(): string {\n    return this.positionModel.value ?? CommandFace.Position.START;\n  }\n\n  get shouldIncludeIcon() {\n    return (!this.ignoreIcon && this.iconModel.value) || this.includeMissingIconInLayout;\n  }\n\n  get iconStart(): boolean {\n    return this.shouldIncludeIcon && this.iconPosition === CommandFace.Position.START;\n  }\n\n  get iconEnd(): boolean {\n    return this.shouldIncludeIcon && this.iconPosition === CommandFace.Position.END;\n  }\n\n  get text(): string {\n    return this.ignoreText ? undefined : this.textModel.value;\n  }\n\n  @HostBinding('attr.color')\n  get color(): string {\n    return this.colorModel.value;\n  }\n\n}\n"]}

package/esm5/lib/components/commands/command-face.js

@@ -1,6 +1,7 @@
 import { __decorate, __metadata } from "tslib";
 import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
 import _ from 'lodash';
+import { Enum } from 'typescript-string-enums';
 export var CommandFace;
 (function (CommandFace) {
     var Position;
@@ -8,6 +9,31 @@ export var CommandFace;
         Position["START"] = "start";
         Position["END"] = "end";
     })(Position = CommandFace.Position || (CommandFace.Position = {}));
+    CommandFace.Style = Enum({
+        FLAT: 'flat',
+        STROKED: 'stroked',
+        RAISED: 'raised'
+    });
+    function getColorOf(face) {
+        return _.isFunction(face === null || face === void 0 ? void 0 : face.color) ? face.color() : undefined;
+    }
+    CommandFace.getColorOf = getColorOf;
+    function getStyleOf(face) {
+        return _.isFunction(face === null || face === void 0 ? void 0 : face.style) ? face.style() : undefined;
+    }
+    CommandFace.getStyleOf = getStyleOf;
+    function getIconOf(face) {
+        return _.isFunction(face === null || face === void 0 ? void 0 : face.icon) ? face.icon() : undefined;
+    }
+    CommandFace.getIconOf = getIconOf;
+    function getTooltipOf(face) {
+        return _.isFunction(face === null || face === void 0 ? void 0 : face.tooltip) ? face.tooltip() : undefined;
+    }
+    CommandFace.getTooltipOf = getTooltipOf;
+    function getTextOf(face) {
+        return _.isFunction(face === null || face === void 0 ? void 0 : face.text) ? face.text() : undefined;
+    }
+    CommandFace.getTextOf = getTextOf;
     var Adapter = /** @class */ (function () {
         function Adapter(face) {
             this.face = face;
@@ -21,7 +47,7 @@ export var CommandFace;
         });
         Object.defineProperty(Adapter.prototype, "icon", {
             get: function () {
-                return _.isFunction(this.face.icon) ? this.face.icon() : undefined;
+                return CommandFace.getIconOf(this.face);
             },
             enumerable: true,
             configurable: true
@@ -54,9 +80,16 @@ export var CommandFace;
             enumerable: true,
             configurable: true
         });
-        Object.defineProperty(Adapter.prototype, "destructive", {
+        Object.defineProperty(Adapter.prototype, "color", {
             get: function () {
-                return _.isFunction(this.face.destructive) ? this.face.destructive() : false;
+                return CommandFace.getColorOf(this.face);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        Object.defineProperty(Adapter.prototype, "style", {
+            get: function () {
+                return CommandFace.getStyleOf(this.face);
             },
             enumerable: true,
             configurable: true
@@ -93,9 +126,14 @@ export var CommandFace;
         ], Adapter.prototype, "iconPositionEnd", null);
         __decorate([
             Memoize(),
-            __metadata("design:type", Boolean),
+            __metadata("design:type", String),
+            __metadata("design:paramtypes", [])
+        ], Adapter.prototype, "color", null);
+        __decorate([
+            Memoize(),
+            __metadata("design:type", String),
             __metadata("design:paramtypes", [])
-        ], Adapter.prototype, "destructive", null);
+        ], Adapter.prototype, "style", null);
         return Adapter;
     }());
     CommandFace.Adapter = Adapter;

package/esm5/lib/components/commands/command-face.js.map

@@ -1 +1 @@
-{"version":3,"file":"command-face.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/command-face.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,kDAAkD,CAAC;AAC3E,OAAO,CAAC,MAAM,QAAQ,CAAC;AAcvB,MAAM,KAAW,WAAW,CA8C3B;AA9CD,WAAiB,WAAW;IAC1B,IAAY,QAGX;IAHD,WAAY,QAAQ;QAClB,2BAAe,CAAA;QACf,uBAAW,CAAA;IACb,CAAC,EAHW,QAAQ,GAAR,oBAAQ,KAAR,oBAAQ,QAGnB;IAED;QACE,iBAAqB,IAAiB;YAAjB,SAAI,GAAJ,IAAI,CAAa;QACtC,CAAC;QAGD,sBAAI,yBAAI;iBAAR;gBACE,OAAO,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;YACrE,CAAC;;;WAAA;QAGD,sBAAI,yBAAI;iBAAR;gBACE,OAAO,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;YACrE,CAAC;;;WAAA;QAGD,sBAAI,iCAAY;iBAAhB;gBACE,OAAO,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;YACrF,CAAC;;;WAAA;QAGD,sBAAI,4BAAO;iBAAX;gBACE,OAAO,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;YAC3E,CAAC;;;WAAA;QAGD,sBAAI,sCAAiB;iBAArB;gBACE,OAAO,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC;YAC1D,CAAC;;;WAAA;QAGD,sBAAI,oCAAe;iBAAnB;gBACE,OAAO,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC;YACxD,CAAC;;;WAAA;QAGD,sBAAI,gCAAW;iBAAf;gBACE,OAAO,CAAC,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;YAC/E,CAAC;;;WAAA;QAhCD;YADC,OAAO,EAAE;;;2CAGT;QAGD;YADC,OAAO,EAAE;;;2CAGT;QAGD;YADC,OAAO,EAAE;;;mDAGT;QAGD;YADC,OAAO,EAAE;;;8CAGT;QAGD;YADC,OAAO,EAAE;;;wDAGT;QAGD;YADC,OAAO,EAAE;;;sDAGT;QAGD;YADC,OAAO,EAAE;;;kDAGT;QAEH,cAAC;KAAA,AAvCD,IAuCC;IAvCY,mBAAO,UAuCnB,CAAA;AACH,CAAC,EA9CgB,WAAW,KAAX,WAAW,QA8C3B","sourcesContent":["import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';\nimport _ from 'lodash';\n\nexport interface CommandFace {\n  text?(): string;\n\n  icon?(): string;\n\n  iconPosition?(): string;\n\n  tooltip?(): string;\n\n  destructive?(): boolean;\n}\n\nexport namespace CommandFace {\n  export enum Position {\n    START = 'start',\n    END = 'end'\n  }\n\n  export class Adapter {\n    constructor(readonly face: CommandFace) {\n    }\n\n    @Memoize()\n    get text() {\n      return _.isFunction(this.face.text) ? this.face.text() : undefined;\n    }\n\n    @Memoize()\n    get icon() {\n      return _.isFunction(this.face.icon) ? this.face.icon() : undefined;\n    }\n\n    @Memoize()\n    get iconPosition() {\n      return _.isFunction(this.face.iconPosition) ? this.face.iconPosition() : undefined;\n    }\n\n    @Memoize()\n    get tooltip() {\n      return _.isFunction(this.face.tooltip) ? this.face.tooltip() : undefined;\n    }\n\n    @Memoize()\n    get iconPositionStart(): boolean {\n      return this.iconPosition === CommandFace.Position.START;\n    }\n\n    @Memoize()\n    get iconPositionEnd(): boolean {\n      return this.iconPosition === CommandFace.Position.END;\n    }\n\n    @Memoize()\n    get destructive(): boolean {\n      return _.isFunction(this.face.destructive) ? this.face.destructive() : false;\n    }\n\n  }\n}\n"]}
+{"version":3,"file":"command-face.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/command-face.ts"],"names":[],"mappings":"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","sourcesContent":["import { ThemePalette } from '@angular/material/core';\nimport { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';\nimport _ from 'lodash';\nimport { Enum } from 'typescript-string-enums';\n\nexport interface CommandFace {\n  text?(): string;\n\n  icon?(): string;\n\n  iconPosition?(): string;\n\n  tooltip?(): string;\n\n  color?(): string; // ThemePalette\n\n  style?(): string; // CommandFace.Style;\n}\n\nexport namespace CommandFace {\n\n  export enum Position {\n    START = 'start',\n    END = 'end'\n  }\n\n  export const Style = Enum({\n    FLAT: 'flat',\n    STROKED: 'stroked',\n    RAISED: 'raised'\n  });\n  export type Style = Enum<typeof Style>;\n\n  export function getColorOf(face: CommandFace): ThemePalette {\n    return _.isFunction(face?.color) ? face.color() as ThemePalette : undefined;\n  }\n\n  export function getStyleOf(face: CommandFace): Style {\n    return _.isFunction(face?.style) ? face.style() as Style : undefined;\n  }\n\n  export function getIconOf(face: CommandFace) {\n    return _.isFunction(face?.icon) ? face.icon() : undefined;\n  }\n\n  export function getTooltipOf(face: CommandFace) {\n    return _.isFunction(face?.tooltip) ? face.tooltip() : undefined;\n  }\n\n  export function getTextOf(face: CommandFace) {\n    return _.isFunction(face?.text) ? face.text() : undefined;\n  }\n\n  export class Adapter {\n    constructor(readonly face: CommandFace) {\n    }\n\n    @Memoize()\n    get text() {\n      return _.isFunction(this.face.text) ? this.face.text() : undefined;\n    }\n\n    @Memoize()\n    get icon() {\n      return CommandFace.getIconOf(this.face);\n    }\n\n    @Memoize()\n    get iconPosition() {\n      return _.isFunction(this.face.iconPosition) ? this.face.iconPosition() : undefined;\n    }\n\n    @Memoize()\n    get tooltip() {\n      return _.isFunction(this.face.tooltip) ? this.face.tooltip() : undefined;\n    }\n\n    @Memoize()\n    get iconPositionStart(): boolean {\n      return this.iconPosition === CommandFace.Position.START;\n    }\n\n    @Memoize()\n    get iconPositionEnd(): boolean {\n      return this.iconPosition === CommandFace.Position.END;\n    }\n\n    @Memoize()\n    get color(): ThemePalette {\n      return CommandFace.getColorOf(this.face);\n    }\n\n    @Memoize()\n    get style(): Style {\n      return CommandFace.getStyleOf(this.face);\n    }\n\n  }\n}\n"]}

package/esm5/lib/components/commands/flex.component.js

@@ -0,0 +1,33 @@
+import { __decorate, __extends, __metadata } from "tslib";
+import { Component } from '@angular/core';
+import { DisposableComponent } from '../disposable-component';
+import { CommandGroup } from './group/command-group';
+/**
+ *
+ */
+var FlexComponent = /** @class */ (function (_super) {
+    __extends(FlexComponent, _super);
+    function FlexComponent(parent) {
+        var _this = _super.call(this) || this;
+        _this.parent = parent;
+        if (parent) {
+            parent.registerFlex(_this);
+        }
+        return _this;
+    }
+    FlexComponent.prototype.ngOnInit = function () {
+    };
+    FlexComponent.ctorParameters = function () { return [
+        { type: CommandGroup }
+    ]; };
+    FlexComponent = __decorate([
+        Component({
+            selector: 'aup-flex',
+            template: ""
+        }),
+        __metadata("design:paramtypes", [CommandGroup])
+    ], FlexComponent);
+    return FlexComponent;
+}(DisposableComponent));
+export { FlexComponent };
+//# sourceMappingURL=flex.component.js.map

package/esm5/lib/components/commands/flex.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.component.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/flex.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAU,MAAM,eAAe,CAAC;AAClD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGrD;;GAEG;AAMH;IAAmC,iCAAmB;IAEpD,uBAAqB,MAAqB;QAA1C,YACE,iBAAO,SAIR;QALoB,YAAM,GAAN,MAAM,CAAe;QAExC,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,YAAY,CAAC,KAAI,CAAC,CAAC;SAC3B;;IACH,CAAC;IAED,gCAAQ,GAAR;IACA,CAAC;;gBAR6B,YAAY;;IAF/B,aAAa;QALzB,SAAS,CAAC;YACT,QAAQ,EAAE,UAAU;YACpB,QAAQ,EAAE,EAAE;SAEb,CAAC;yCAG8B,YAAY;OAF/B,aAAa,CAYzB;IAAD,oBAAC;CAAA,AAZD,CAAmC,mBAAmB,GAYrD;SAZY,aAAa","sourcesContent":["import { Component, OnInit } from '@angular/core';\nimport { DisposableComponent } from '../disposable-component';\nimport { CommandGroup } from './group/command-group';\nimport { CommandGroupComponent } from './group/command-group/command-group.component';\n\n/**\n *\n */\n@Component({\n  selector: 'aup-flex',\n  template: ``,\n  styles: []\n})\nexport class FlexComponent extends DisposableComponent implements OnInit {\n\n  constructor(readonly parent?: CommandGroup) {\n    super();\n    if (parent) {\n      parent.registerFlex(this);\n    }\n  }\n\n  ngOnInit() {\n  }\n\n}\n"]}

package/esm5/lib/components/commands/flex.component.ngfactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flex.component.ngfactory.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/flex.component.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n"]}

package/esm5/lib/components/commands/group/command-group/command-group.component.js

@@ -0,0 +1,51 @@
+import { __decorate, __extends, __metadata, __param } from "tslib";
+import { Component, Input, SkipSelf } from '@angular/core';
+import { StoreInValueModel, TrackExternal, ValueModel } from '@coolon/pectin';
+import { CommandFace } from '../../command-face';
+import { CommandGroup } from '../command-group';
+var CommandGroupComponent = /** @class */ (function (_super) {
+    __extends(CommandGroupComponent, _super);
+    function CommandGroupComponent(parent) {
+        var _this = _super.call(this, parent) || this;
+        _this.parent = parent;
+        _this.xPosition = 'after';
+        _this.yPosition = 'below';
+        _this.parent.registerGroup(_this, _this.faceModel);
+        return _this;
+    }
+    CommandGroupComponent_1 = CommandGroupComponent;
+    var CommandGroupComponent_1;
+    CommandGroupComponent.ctorParameters = function () { return [
+        { type: CommandGroup, decorators: [{ type: SkipSelf }] }
+    ]; };
+    __decorate([
+        Input(), TrackExternal(),
+        __metadata("design:type", ValueModel)
+    ], CommandGroupComponent.prototype, "faceModel", void 0);
+    __decorate([
+        Input(), StoreInValueModel('faceModel'),
+        __metadata("design:type", Object)
+    ], CommandGroupComponent.prototype, "face", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], CommandGroupComponent.prototype, "xPosition", void 0);
+    __decorate([
+        Input(),
+        __metadata("design:type", String)
+    ], CommandGroupComponent.prototype, "yPosition", void 0);
+    CommandGroupComponent = CommandGroupComponent_1 = __decorate([
+        Component({
+            selector: 'aup-command-group',
+            template: '',
+            providers: [
+                { provide: CommandGroup, useExisting: CommandGroupComponent_1 }
+            ]
+        }),
+        __param(0, SkipSelf()),
+        __metadata("design:paramtypes", [CommandGroup])
+    ], CommandGroupComponent);
+    return CommandGroupComponent;
+}(CommandGroup));
+export { CommandGroupComponent };
+//# sourceMappingURL=command-group.component.js.map

package/esm5/lib/components/commands/group/command-group/command-group.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-group.component.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/group/command-group/command-group.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAY,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAUhD;IAA2C,yCAAY;IAcrD,+BAAiC,MAAoB;QAArD,YACE,kBAAM,MAAM,CAAC,SAEd;QAHgC,YAAM,GAAN,MAAM,CAAc;QALrD,eAAS,GAAuB,OAAO,CAAC;QAGxC,eAAS,GAAsB,OAAO,CAAC;QAIrC,KAAI,CAAC,MAAM,CAAC,aAAa,CAAC,KAAI,EAAE,KAAI,CAAC,SAAS,CAAC,CAAC;;IAClD,CAAC;8BAjBU,qBAAqB;;;gBAcS,YAAY,uBAAxC,QAAQ;;IAXrB;QADC,KAAK,EAAE,EAAE,aAAa,EAAE;kCACd,UAAU;4DAAc;IAGnC;QADC,KAAK,EAAE,EAAE,iBAAiB,CAAC,WAAW,CAAC;;uDACtB;IAGlB;QADC,KAAK,EAAE;;4DACgC;IAGxC;QADC,KAAK,EAAE;;4DAC+B;IAZ5B,qBAAqB;QAPjC,SAAS,CAAC;YACT,QAAQ,EAAE,mBAAmB;YAC7B,QAAQ,EAAE,EAAE;YACZ,SAAS,EAAC;gBACR,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,uBAAqB,EAAE;aAC9D;SACF,CAAC;QAea,WAAA,QAAQ,EAAE,CAAA;yCAAkB,YAAY;OAd1C,qBAAqB,CAkBjC;IAAD,4BAAC;CAAA,AAlBD,CAA2C,YAAY,GAkBtD;SAlBY,qBAAqB","sourcesContent":["import { Component, Input, Optional, SkipSelf } from '@angular/core';\nimport { StoreInValueModel, TrackExternal, ValueModel } from '@coolon/pectin';\nimport { CommandFace } from '../../command-face';\nimport { CommandGroup } from '../command-group';\n\n\n@Component({\n  selector: 'aup-command-group',\n  template: '',\n  providers:[\n    { provide: CommandGroup, useExisting: CommandGroupComponent }\n  ]\n})\nexport class CommandGroupComponent extends CommandGroup {\n\n  @Input() @TrackExternal()\n  faceModel: ValueModel<CommandFace>;\n\n  @Input() @StoreInValueModel('faceModel')\n  face: CommandFace;\n\n  @Input()\n  xPosition: 'before' | 'after' = 'after';\n\n  @Input()\n  yPosition: 'above' | 'below' = 'below';\n\n  constructor(@SkipSelf() readonly parent: CommandGroup) {\n    super(parent);\n    this.parent.registerGroup(this, this.faceModel);\n  }\n}\n\n\n"]}

package/esm5/lib/components/commands/group/command-group/command-group.component.ngfactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-group.component.ngfactory.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/group/command-group/command-group.component.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n"]}

package/esm5/lib/components/commands/group/command-group-menu-renderer/command-group-menu-renderer.component.js

@@ -0,0 +1,59 @@
+import { __decorate, __extends, __metadata, __param } from "tslib";
+import { Component, EventEmitter, Input, Optional, Output, QueryList, SkipSelf, ViewChild, ViewChildren } from '@angular/core';
+import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
+import { Dsl, MutableValueModel, StoreInValueModel } from '@coolon/pectin';
+import { DisposableComponent } from '../../../disposable-component';
+import { TrackBy } from '../../../track-by';
+import { ViewData } from '../view-data';
+var CommandGroupMenuRendererComponent = /** @class */ (function (_super) {
+    __extends(CommandGroupMenuRendererComponent, _super);
+    function CommandGroupMenuRendererComponent(parent) {
+        var _this = _super.call(this) || this;
+        _this.parent = parent;
+        _this.groupViewDataModel = new MutableValueModel();
+        _this.commandFired = new EventEmitter();
+        _this.ViewData = ViewData;
+        _this.TrackBy = TrackBy;
+        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.children = chain(_this.groupViewDataModel).pluckList('children');
+        _this.hasMixedIcons = chain(_this.groupViewDataModel).pluck('hasMixedIcons');
+        return _this;
+    }
+    CommandGroupMenuRendererComponent.prototype.getCommand = function (data) {
+        var _this = this;
+        var command = ViewData.getCommand(data);
+        var when = Dsl.disposeWith(this).when;
+        when(command.busy).becomesFalsey(function () { return _this.commandFired.emit(); });
+        return command;
+    };
+    CommandGroupMenuRendererComponent.ctorParameters = function () { return [
+        { type: CommandGroupMenuRendererComponent, decorators: [{ type: Optional }, { type: SkipSelf }] }
+    ]; };
+    __decorate([
+        ViewChild('menu', { static: true }),
+        __metadata("design:type", MatMenu)
+    ], CommandGroupMenuRendererComponent.prototype, "menuComponent", void 0);
+    __decorate([
+        Input(), StoreInValueModel('groupViewDataModel'),
+        __metadata("design:type", ViewData.GroupData)
+    ], CommandGroupMenuRendererComponent.prototype, "groupViewData", void 0);
+    __decorate([
+        Output(),
+        __metadata("design:type", Object)
+    ], CommandGroupMenuRendererComponent.prototype, "commandFired", void 0);
+    __decorate([
+        ViewChildren(MatMenuTrigger),
+        __metadata("design:type", QueryList)
+    ], CommandGroupMenuRendererComponent.prototype, "triggers", void 0);
+    CommandGroupMenuRendererComponent = __decorate([
+        Component({
+            selector: 'aup-command-group-menu',
+            template: "<mat-menu #menu [xPosition]=\"groupViewData.xPosition\" [yPosition]=\"groupViewData.yPosition\">\n  <ng-container *ngFor=\"let data of children.value; trackBy: TrackBy.byIndex\" >\n    <button *ngIf=\"ViewData.isCommand(data)\"\n            [pectinCommand]=\"getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            mat-menu-item>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"\n                        [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n    </button>\n\n    <ng-container *ngIf=\"ViewData.isGroup(data)\">\n      <button mat-menu-item\n              #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"innerPanel.menuComponent\"\n      >\n        <aup-command-face [face]=\"ViewData.getFace(data)\"\n                          [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #innerPanel\n                              [groupViewData]=\"ViewData.asGroup(data)\"\n                              (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <mat-divider *ngIf=\"ViewData.isSeparator(data)\"></mat-divider>\n\n  </ng-container>\n</mat-menu>\n"
+        }),
+        __param(0, Optional()), __param(0, SkipSelf()),
+        __metadata("design:paramtypes", [CommandGroupMenuRendererComponent])
+    ], CommandGroupMenuRendererComponent);
+    return CommandGroupMenuRendererComponent;
+}(DisposableComponent));
+export { CommandGroupMenuRendererComponent };
+//# sourceMappingURL=command-group-menu-renderer.component.js.map

package/esm5/lib/components/commands/group/command-group-menu-renderer/command-group-menu-renderer.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-group-menu-renderer.component.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/group/command-group-menu-renderer/command-group-menu-renderer.component.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,SAAS,EACT,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,EACb,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,GAAG,EAAkB,iBAAiB,EAAE,iBAAiB,EAAmB,MAAM,gBAAgB,CAAC;AAC5G,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAMxC;IAAuD,qDAAmB;IAwBxE,2CAA6C,MAA0C;QAAvF,YACE,iBAAO,SAIR;QAL4C,YAAM,GAAN,MAAM,CAAoC;QAnBtE,wBAAkB,GAAG,IAAI,iBAAiB,EAAsB,CAAC;QAMlF,kBAAY,GAAG,IAAI,YAAY,EAAE,CAAC;QASzB,cAAQ,GAAG,QAAQ,CAAC;QAE7B,aAAO,GAAG,OAAO,CAAC;QAIV,IAAA,2BAAkF,EAAhF,gBAAK,EAAE,oBAAO,EAAE,kBAAM,EAAE,cAAI,EAAE,gBAAK,EAAE,oBAAO,EAAE,sBAAkC,CAAC;QACzF,KAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,KAAI,CAAC,kBAAkB,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;QACrE,KAAI,CAAC,aAAa,GAAG,KAAK,CAAC,KAAI,CAAC,kBAAkB,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;;IAC7E,CAAC;IAED,sDAAU,GAAV,UAAW,IAAc;QAAzB,iBAKC;QAJC,IAAM,OAAO,GAAG,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAClC,IAAA,iCAAI,CAA2B;QACvC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,cAAM,OAAA,KAAI,CAAC,YAAY,CAAC,IAAI,EAAE,EAAxB,CAAwB,CAAC,CAAC;QACjE,OAAO,OAAO,CAAC;IACjB,CAAC;;gBAZqD,iCAAiC,uBAA1E,QAAQ,YAAI,QAAQ;;IArBjC;QADC,SAAS,CAAC,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC;kCACrB,OAAO;4EAAC;IAKvB;QADC,KAAK,EAAE,EAAE,iBAAiB,CAAC,oBAAoB,CAAC;kCAClC,QAAQ,CAAC,SAAS;4EAAC;IAGlC;QADC,MAAM,EAAE;;2EACyB;IAGlC;QADC,YAAY,CAAC,cAAc,CAAC;kCACnB,SAAS;uEAAiB;IAdzB,iCAAiC;QAJ7C,SAAS,CAAC;YACT,QAAQ,EAAE,wBAAwB;YAClC,ivCAA2D;SAC5D,CAAC;QAyBa,WAAA,QAAQ,EAAE,CAAA,EAAE,WAAA,QAAQ,EAAE,CAAA;yCAAmB,iCAAiC;OAxB5E,iCAAiC,CAsC7C;IAAD,wCAAC;CAAA,AAtCD,CAAuD,mBAAmB,GAsCzE;SAtCY,iCAAiC","sourcesContent":["import {\n  Component,\n  EventEmitter,\n  Input,\n  Optional,\n  Output,\n  QueryList,\n  SkipSelf,\n  ViewChild,\n  ViewChildren\n} from '@angular/core';\nimport { MatMenu, MatMenuTrigger } from '@angular/material/menu';\nimport { Dsl, ListModelChain, MutableValueModel, StoreInValueModel, ValueModelChain } from '@coolon/pectin';\nimport { DisposableComponent } from '../../../disposable-component';\nimport { TrackBy } from '../../../track-by';\nimport { Registration } from '../registration';\nimport { ViewData } from '../view-data';\n\n@Component({\n  selector: 'aup-command-group-menu',\n  templateUrl: './command-group-menu-renderer.component.html'\n})\nexport class CommandGroupMenuRendererComponent extends DisposableComponent {\n\n  @ViewChild('menu', { static: true })\n  menuComponent: MatMenu;\n\n  private readonly groupViewDataModel = new MutableValueModel<ViewData.GroupData>();\n\n  @Input() @StoreInValueModel('groupViewDataModel')\n  groupViewData: ViewData.GroupData;\n\n  @Output()\n  commandFired = new EventEmitter();\n\n  @ViewChildren(MatMenuTrigger)\n  triggers: QueryList<MatMenuTrigger>;\n\n  readonly children: ListModelChain<Registration>;\n\n  readonly hasMixedIcons: ValueModelChain<boolean>;\n\n  readonly ViewData = ViewData;\n\n  TrackBy = TrackBy;\n\n  constructor(@Optional() @SkipSelf() readonly parent?: CommandGroupMenuRendererComponent) {\n    super();\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n    this.children = chain(this.groupViewDataModel).pluckList('children');\n    this.hasMixedIcons = chain(this.groupViewDataModel).pluck('hasMixedIcons');\n  }\n\n  getCommand(data: ViewData) {\n    const command = ViewData.getCommand(data);\n    const { when } = Dsl.disposeWith(this);\n    when(command.busy).becomesFalsey(() => this.commandFired.emit());\n    return command;\n  }\n\n}\n\n\n"]}

package/esm5/lib/components/commands/group/command-group-menu-renderer/command-group-menu-renderer.component.ngfactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-group-menu-renderer.component.ngfactory.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/group/command-group-menu-renderer/command-group-menu-renderer.component.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n"]}

package/esm5/lib/components/commands/group/command-group-renderer/command-group-renderer.component.js

@@ -0,0 +1,42 @@
+import { __decorate, __extends, __metadata } from "tslib";
+import { Component, HostBinding, Input } from '@angular/core';
+import { Dsl, StoreInValueModel, TrackExternal, ValueModel } from '@coolon/pectin';
+import { DisposableComponent } from '../../../disposable-component';
+import { ViewData } from '../view-data';
+import { TrackBy } from '../../../track-by';
+var CommandGroupRendererComponent = /** @class */ (function (_super) {
+    __extends(CommandGroupRendererComponent, _super);
+    function CommandGroupRendererComponent() {
+        var _this = _super.call(this) || this;
+        _this.renderRootNode = true;
+        _this.ViewData = ViewData;
+        _this.TrackBy = TrackBy;
+        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.childViewDataModels = chain(_this.groupViewDataModel).pluckList('children');
+        return _this;
+    }
+    __decorate([
+        Input(), TrackExternal(),
+        __metadata("design:type", ValueModel)
+    ], CommandGroupRendererComponent.prototype, "groupViewDataModel", void 0);
+    __decorate([
+        Input(), StoreInValueModel('groupViewDataModel'),
+        __metadata("design:type", ViewData.GroupData)
+    ], CommandGroupRendererComponent.prototype, "groupViewData", void 0);
+    __decorate([
+        Input(),
+        HostBinding('class.render-root'),
+        __metadata("design:type", Object)
+    ], CommandGroupRendererComponent.prototype, "renderRootNode", void 0);
+    CommandGroupRendererComponent = __decorate([
+        Component({
+            selector: 'aup-command-group-renderer',
+            template: "<ng-template #groupTemplate let-group>\n\n  <ng-container *ngIf=\"ViewData.hasText(group)\" [ngSwitch]=\"ViewData.getStyle(group)\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-stroked-button>\n        <aup-command-face [face]=\"ViewData.getFace(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-raised-button>\n        <aup-command-face [face]=\"ViewData.getFace(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-button>\n        <aup-command-face [face]=\"ViewData.getFace(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!ViewData.hasText(group)\">\n    <button        #trigger=\"matMenuTrigger\"\n                   mat-icon-button\n                   [matMenuTriggerFor]=\"subMenu.menuComponent\"\n\n                   [matTooltip]=\"ViewData.getTooltip(group)\"\n                   [color]=\"ViewData.getColor(group)\"\n    >\n      <aup-command-face [face]=\"ViewData.getFace(group)\"></aup-command-face>\n    </button>\n    <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n  </ng-container>\n\n</ng-template>\n\n\n<ng-template #commandTemplate let-data>\n\n  <ng-container *ngIf=\"ViewData.hasText(data)\" [ngSwitch]=\"ViewData.getStyle(data)\">\n    <button *ngSwitchCase=\"'raised'\"\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-raised-button>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"></aup-command-face>\n    </button>\n    <button *ngSwitchCase=\"'stroked'\"\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-stroked-button>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"></aup-command-face>\n    </button>\n    <button *ngSwitchDefault\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-button>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"></aup-command-face>\n    </button>\n  </ng-container>\n\n  <button *ngIf=\"!ViewData.hasText(data)\"\n          [pectinCommand]=\"ViewData.getCommand(data)\"\n          [matTooltip]=\"ViewData.getTooltip(data)\"\n          [color]=\"ViewData.getColor(data)\"\n          mat-icon-button>\n    <aup-command-face [face]=\"ViewData.getFace(data)\"></aup-command-face>\n  </button>\n\n</ng-template>\n\n\n<ng-template *ngIf=\"renderRootNode\"\n             [ngTemplateOutlet]=\"groupTemplate\"\n             [ngTemplateOutletContext]=\"{ $implicit: groupViewDataModel.value }\">\n</ng-template>\n\n<ng-container *ngIf=\"!renderRootNode\">\n  <ng-container *ngFor=\"let data of this.childViewDataModels.value; trackBy: TrackBy.byIndex\">\n    <ng-template *ngIf=\"ViewData.isGroup(data)\"\n                 [ngTemplateOutlet]=\"groupTemplate\"\n                 [ngTemplateOutletContext]=\"{ $implicit: data }\">\n    </ng-template>\n    <ng-template *ngIf=\"ViewData.isCommand(data)\"\n                 [ngTemplateOutlet]=\"commandTemplate\"\n                 [ngTemplateOutletContext]=\"{ $implicit: data }\">\n    </ng-template>\n\n    <mat-divider *ngIf=\"ViewData.isSeparator(data)\" [vertical]=\"true\"></mat-divider>\n  </ng-container>\n\n</ng-container>\n",
+            styles: [":host{display:inline-flex;flex-direction:row;align-items:center}:host:not(.render-root) mat-divider{-ms-grid-row-align:stretch;align-self:stretch;margin:4px 0}:host:not(.render-root)>*+*{margin-left:8px}:host span.flex{flex:1}"]
+        }),
+        __metadata("design:paramtypes", [])
+    ], CommandGroupRendererComponent);
+    return CommandGroupRendererComponent;
+}(DisposableComponent));
+export { CommandGroupRendererComponent };
+//# sourceMappingURL=command-group-renderer.component.js.map

package/esm5/lib/components/commands/group/command-group-renderer/command-group-renderer.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-group-renderer.component.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/group/command-group-renderer/command-group-renderer.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,GAAG,EAAkB,iBAAiB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACnG,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAO5C;IAAmD,iDAAmB;IAkBpE;QAAA,YACE,iBAAO,SAGR;QAZD,oBAAc,GAAG,IAAI,CAAC;QAEb,cAAQ,GAAG,QAAQ,CAAC;QAI7B,aAAO,GAAG,OAAO,CAAA;QAIT,IAAA,2BAAkF,EAAhF,gBAAK,EAAE,oBAAO,EAAE,kBAAM,EAAE,cAAI,EAAE,gBAAK,EAAE,oBAAO,EAAE,sBAAkC,CAAC;QACzF,KAAI,CAAC,mBAAmB,GAAG,KAAK,CAAC,KAAI,CAAC,kBAAkB,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;;IAClF,CAAC;IAnBD;QADC,KAAK,EAAE,EAAE,aAAa,EAAE;kCACL,UAAU;6EAAqB;IAGnD;QADC,KAAK,EAAE,EAAE,iBAAiB,CAAC,oBAAoB,CAAC;kCAClC,QAAQ,CAAC,SAAS;wEAAC;IAIlC;QAFC,KAAK,EAAE;QACP,WAAW,CAAC,mBAAmB,CAAC;;yEACX;IAVX,6BAA6B;QALzC,SAAS,CAAC;YACT,QAAQ,EAAE,4BAA4B;YACtC,wnJAAsD;;SAEvD,CAAC;;OACW,6BAA6B,CAwBzC;IAAD,oCAAC;CAAA,AAxBD,CAAmD,mBAAmB,GAwBrE;SAxBY,6BAA6B","sourcesContent":["import { Component, HostBinding, Input } from '@angular/core';\nimport { Dsl, ListModelChain, StoreInValueModel, TrackExternal, ValueModel } from '@coolon/pectin';\nimport { DisposableComponent } from '../../../disposable-component';\nimport { ViewData } from '../view-data';\nimport { TrackBy } from '../../../track-by';\n\n@Component({\n  selector: 'aup-command-group-renderer',\n  templateUrl: './command-group-renderer.component.html',\n  styleUrls: ['./command-group-renderer.component.scss']\n})\nexport class CommandGroupRendererComponent extends DisposableComponent {\n\n  @Input() @TrackExternal()\n  groupViewDataModel: ValueModel<ViewData.GroupData>;\n\n  @Input() @StoreInValueModel('groupViewDataModel')\n  groupViewData: ViewData.GroupData;\n\n  @Input()\n  @HostBinding('class.render-root')\n  renderRootNode = true;\n\n  readonly ViewData = ViewData;\n\n  readonly childViewDataModels: ListModelChain<ViewData>;\n\n  TrackBy = TrackBy\n\n  constructor() {\n    super();\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n    this.childViewDataModels = chain(this.groupViewDataModel).pluckList('children');\n  }\n\n}\n\n\n"]}

package/esm5/lib/components/commands/group/command-group-renderer/command-group-renderer.component.ngfactory.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-group-renderer.component.ngfactory.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/group/command-group-renderer/command-group-renderer.component.ngfactory.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n"]}

package/esm5/lib/components/commands/group/command-group-renderer/command-group-renderer.component.scss.shim.ngstyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"command-group-renderer.component.scss.shim.ngstyle.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/group/command-group-renderer/command-group-renderer.component.scss.shim.ngstyle.ts"],"names":[],"mappings":"","sourcesContent":["import * as i0 from '@angular/core';\ni0.ComponentFactory;\n"]}

package/esm5/lib/components/commands/group/command-group.js

@@ -0,0 +1,134 @@
+import { __decorate, __extends, __metadata } from "tslib";
+import { Dsl, GarbageCollector, MutableListModel, MutableValueModel, StoreInValueModel, TrackExternal, ValueModel } from '@coolon/pectin';
+import { CommandFace } from '../command-face';
+import { Registration } from './registration';
+import { ViewData } from './view-data';
+var CommandGroup = /** @class */ (function (_super) {
+    __extends(CommandGroup, _super);
+    function CommandGroup(parent) {
+        var _this = _super.call(this) || this;
+        _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;
+    }
+    CommandGroup.prototype.initialise = function () {
+        this.rebuildTemplates();
+    };
+    Object.defineProperty(CommandGroup.prototype, "rootTemplate", {
+        get: function () {
+            return this._rootTemplate.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(CommandGroup.prototype, "registrations", {
+        get: function () {
+            return this._registrations.readonly;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    CommandGroup.prototype.notifyChanged = function () {
+        if (this.parent) {
+            this.parent.notifyChanged();
+        }
+        else {
+            this.rebuildTemplates();
+        }
+    };
+    CommandGroup.prototype.notifyChildFaceChanged = function (is, was) {
+        this.notifyChanged();
+    };
+    CommandGroup.prototype.rebuildTemplates = function () {
+        this._rootTemplate.value = new ViewData.GroupData(this.faceModel.value, this.xPosition, this.yPosition, this.registrations.value.map(function (r) { return r.toTemplate(); }));
+    };
+    Object.defineProperty(CommandGroup.prototype, "depth", {
+        get: function () {
+            return this.isRoot() ? 0 : this.parent.depth + 1;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    CommandGroup.prototype.isRoot = function () {
+        return false;
+    };
+    CommandGroup.prototype.registerCommand = function (command, faceModel) {
+        return this.register(new Registration.CommandRegistration(faceModel, command));
+    };
+    CommandGroup.prototype.registerGroup = function (group, faceModel) {
+        return this.register(new Registration.GroupRegistration(faceModel, group));
+    };
+    CommandGroup.prototype.registerFlex = function (component) {
+        return this.register(new Registration.FlexRegistration());
+    };
+    CommandGroup.prototype.registerSeparator = function (component) {
+        return this.register(new Registration.SeparatorRegistration());
+    };
+    CommandGroup.prototype.register = function (registration) {
+        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));
+            }, { asLongAs: this.initialised });
+            registration.onDispose(function () { return _this._childFaceModels.remove(registration.faceModel); });
+        }
+        registration.onDispose(function () { return _this._registrations.remove(registration); });
+        return registration;
+    };
+    return CommandGroup;
+}(GarbageCollector));
+export { CommandGroup };
+(function (CommandGroup) {
+    var Root = /** @class */ (function (_super) {
+        __extends(Root, _super);
+        function Root() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        Root.prototype.isRoot = function () {
+            return true;
+        };
+        __decorate([
+            TrackExternal(),
+            __metadata("design:type", ValueModel)
+        ], Root.prototype, "faceModel", void 0);
+        __decorate([
+            TrackExternal({ defaultValue: 'after' }),
+            __metadata("design:type", ValueModel)
+        ], Root.prototype, "xPositionModel", void 0);
+        __decorate([
+            StoreInValueModel('xPositionModel'),
+            __metadata("design:type", String)
+        ], Root.prototype, "xPosition", void 0);
+        __decorate([
+            TrackExternal({ defaultValue: 'below' }),
+            __metadata("design:type", ValueModel)
+        ], Root.prototype, "yPositionModel", void 0);
+        __decorate([
+            StoreInValueModel('yPositionModel'),
+            __metadata("design:type", String)
+        ], Root.prototype, "yPosition", void 0);
+        return Root;
+    }(CommandGroup));
+    CommandGroup.Root = Root;
+    function factory() {
+        return new Root();
+    }
+    CommandGroup.factory = factory;
+})(CommandGroup || (CommandGroup = {}));
+//# sourceMappingURL=command-group.js.map