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

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

@@ -0,0 +1 @@
+{"version":3,"file":"command-group.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/group/command-group.ts"],"names":[],"mappings":";AAAA,OAAO,EAIL,GAAG,EACH,gBAAgB,EAGhB,gBAAgB,EAChB,iBAAiB,EACjB,iBAAiB,EACjB,aAAa,EACb,UAAU,EACX,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC;IAA2C,gCAAgB;IAmBzD,sBAAqB,MAAqB;QAA1C,YACE,iBAAO,SAqBR;QAtBoB,YAAM,GAAN,MAAM,CAAe;QAZzB,mBAAa,GAAG,IAAI,iBAAiB,EAAsB,CAAC;QAE5D,oBAAc,GAAG,IAAI,gBAAgB,EAAgB,CAAC;QACtD,sBAAgB,GAAG,IAAI,gBAAgB,EAA2B,CAAC;QAG5E,sBAAgB,GAAG,IAAI,iBAAiB,CAAS,CAAC,CAAC,CAAC;QASpD,IAAA,2BAAkF,EAAhF,gBAAK,EAAE,oBAAO,EAAE,kBAAM,EAAE,cAAI,EAAE,gBAAK,EAAE,oBAAO,EAAE,sBAAkC,CAAC;QAEzF,IAAM,UAAU,GAAG,KAAK,CAAC,KAAI,CAAC,gBAAgB,CAAC;aAC5C,GAAG,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,KAAK,EAAP,CAAO,EAAE,EAAE,SAAS,EAAE,KAAI,CAAC,gBAAgB,EAAE,CAAC;aACvD,SAAS,EAAE,CAAC;QAEf,IAAM,SAAS,GAAG,UAAU;aACzB,MAAM,CAAC,UAAA,IAAI,IAAI,OAAA,CAAC,CAAC,WAAW,CAAC,SAAS,CAAC,IAAI,CAAC,EAA7B,CAA6B,CAAC;aAC7C,KAAK,EAAE,CAAC;QAEX,KAAI,CAAC,aAAa,GAAG,OAAO,CAAC,GAAG,CAC9B,SAAS,CAAC,aAAa,CAAC,CAAC,CAAC,EAC1B,SAAS,CAAC,YAAY,CAAC,UAAU,CAAC,MAAM,CAAC,CAC1C,CAAC,SAAS,EAAE,CAAC;QAGd,KAAI,CAAC,cAAc,GAAG,KAAK,CAAC,KAAI,CAAC,aAAa,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;QAEtE,KAAI,CAAC,WAAW,GAAG,KAAK,CAAC,KAAI,CAAC,aAAa,CAAC,CAAC,QAAQ,EAAE,CAAC;;IAC1D,CAAC;IAED,iCAAU,GAAV;QACE,IAAI,CAAC,gBAAgB,EAAE,CAAC;IAC1B,CAAC;IAED,sBAAI,sCAAY;aAAhB;YACE,OAAO,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;QACrC,CAAC;;;OAAA;IAED,sBAAI,uCAAa;aAAjB;YACE,OAAO,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC;QACtC,CAAC;;;OAAA;IAED,oCAAa,GAAb;QACE,IAAI,IAAI,CAAC,MAAM,EAAE;YACf,IAAI,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC;SAC7B;aAAM;YACL,IAAI,CAAC,gBAAgB,EAAE,CAAC;SACzB;IACH,CAAC;IAEO,6CAAsB,GAA9B,UAA+B,EAAuB,EAAE,GAAwB;QAC9E,IAAI,CAAC,aAAa,EAAE,CAAC;IACvB,CAAC;IAEO,uCAAgB,GAAxB;QACE,IAAI,CAAC,aAAa,CAAC,KAAK,GAAG,IAAI,QAAQ,CAAC,SAAS,CAC/C,IAAI,CAAC,SAAS,CAAC,KAAK,EACpB,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,UAAU,EAAE,EAAd,CAAc,CAAC,CAClD,CAAC;IACJ,CAAC;IAED,sBAAI,+BAAK;aAAT;YACE,OAAO,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC,CAAC;QACnD,CAAC;;;OAAA;IAED,6BAAM,GAAN;QACE,OAAO,KAAK,CAAC;IACf,CAAC;IAED,sCAAe,GAAf,UAAgB,OAAyB,EAAE,SAAkC;QAC3E,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,YAAY,CAAC,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC;IACjF,CAAC;IAED,oCAAa,GAAb,UAAc,KAAmB,EAAE,SAAkC;QACnE,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,YAAY,CAAC,iBAAiB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC,CAAC;IAC7E,CAAC;IAED,mCAAY,GAAZ,UAAa,SAAwB;QACnC,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,YAAY,CAAC,gBAAgB,EAAE,CAAC,CAAC;IAC5D,CAAC;IAED,wCAAiB,GAAjB,UAAkB,SAA6B;QAC7C,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,YAAY,CAAC,qBAAqB,EAAE,CAAC,CAAC;IACjE,CAAC;IAES,+BAAQ,GAAlB,UAAmB,YAA0B;QAA7C,iBAYC;QAXC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QACvC,IAAI,YAAY,YAAY,YAAY,CAAC,gBAAgB,EAAE;YACzD,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;YAC3C,IAAA,yCAAI,CAAmC;YAC/C,IAAI,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC,OAAO,CAAC,UAAC,EAAE,EAAE,GAAG;gBAC3C,KAAI,CAAC,sBAAsB,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,IAAI,WAAW,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC;YACzF,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;YACnC,YAAY,CAAC,SAAS,CAAC,cAAM,OAAA,KAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,YAAY,CAAC,SAAS,CAAC,EAApD,CAAoD,CAAC,CAAC;SACpF;QACD,YAAY,CAAC,SAAS,CAAC,cAAM,OAAA,KAAI,CAAC,cAAc,CAAC,MAAM,CAAC,YAAY,CAAC,EAAxC,CAAwC,CAAC,CAAC;QACvE,OAAO,YAAY,CAAC;IACtB,CAAC;IAEH,mBAAC;AAAD,CAAC,AAlHD,CAA2C,gBAAgB,GAkH1D;;AAED,WAAiB,YAAY;IAC3B;QAA0B,wBAAY;QAAtC;;QAoBA,CAAC;QAHC,qBAAM,GAAN;YACE,OAAO,IAAI,CAAC;QACd,CAAC;QAhBD;YADC,aAAa,EAAE;sCACL,UAAU;+CAAc;QAGnC;YADC,aAAa,CAAC,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC;sCACzB,UAAU;oDAAqB;QAG/C;YADC,iBAAiB,CAAC,gBAAgB,CAAC;;+CACN;QAG9B;YADC,aAAa,CAAC,EAAE,YAAY,EAAE,OAAO,EAAE,CAAC;sCACzB,UAAU;oDAAoB;QAG9C;YADC,iBAAiB,CAAC,gBAAgB,CAAC;;+CACP;QAK/B,WAAC;KAAA,AApBD,CAA0B,YAAY,GAoBrC;IApBY,iBAAI,OAoBhB,CAAA;IAED,SAAgB,OAAO;QACrB,OAAO,IAAI,IAAI,EAAE,CAAA;IACnB,CAAC;IAFe,oBAAO,UAEtB,CAAA;AACH,CAAC,EA1BgB,YAAY,KAAZ,YAAY,QA0B5B","sourcesContent":["import {\n  BooleanValueModelChain,\n  Command,\n  Disposable,\n  Dsl,\n  GarbageCollector,\n  ListModel,\n  ListModelChain,\n  MutableListModel,\n  MutableValueModel,\n  StoreInValueModel,\n  TrackExternal,\n  ValueModel\n} from '@coolon/pectin';\nimport { CommandFace } from '../command-face';\nimport { FlexComponent } from '../flex.component';\nimport { SeparatorComponent } from '../separator.component';\nimport { Registration } from './registration';\nimport { ViewData } from './view-data';\n\nexport abstract class CommandGroup extends GarbageCollector {\n\n  abstract faceModel: ValueModel<CommandFace>;\n\n  abstract xPosition: 'before' | 'after';\n  abstract yPosition: 'above' | 'below';\n\n  private readonly _rootTemplate = new MutableValueModel<ViewData.GroupData>();\n\n  private readonly _registrations = new MutableListModel<Registration>();\n  private readonly _childFaceModels = new MutableListModel<ValueModel<CommandFace>>();\n\n  readonly hasMixedIcons: BooleanValueModelChain;\n  private _faceChangeCount = new MutableValueModel<number>(0);\n\n  readonly childTemplates: ListModelChain<ViewData>;\n\n  private initialised: BooleanValueModelChain;\n\n  constructor(readonly parent?: CommandGroup) {\n    super();\n\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n\n    const childFaces = chain(this._childFaceModels)\n      .map(m => m.value, { dependsOn: this._faceChangeCount })\n      .rejectNil();\n\n    const iconCount = childFaces\n      .select(face => !!CommandFace.getIconOf(face))\n      .count();\n\n    this.hasMixedIcons = valueOf.all(\n      iconCount.isGreaterThan(0),\n      iconCount.doesNotEqual(childFaces.length)\n    ).areTruthy();\n\n\n    this.childTemplates = chain(this._rootTemplate).pluckList('children');\n\n    this.initialised = chain(this._rootTemplate).isNotNil();\n  }\n\n  initialise() {\n    this.rebuildTemplates();\n  }\n\n  get rootTemplate() {\n    return this._rootTemplate.readonly;\n  }\n\n  get registrations(): ListModel<Registration> {\n    return this._registrations.readonly;\n  }\n\n  notifyChanged() {\n    if (this.parent) {\n      this.parent.notifyChanged();\n    } else {\n      this.rebuildTemplates();\n    }\n  }\n\n  private notifyChildFaceChanged(is: CommandFace.Adapter, was: CommandFace.Adapter) {\n    this.notifyChanged();\n  }\n\n  private rebuildTemplates() {\n    this._rootTemplate.value = new ViewData.GroupData(\n      this.faceModel.value,\n      this.xPosition,\n      this.yPosition,\n      this.registrations.value.map(r => r.toTemplate())\n    );\n  }\n\n  get depth(): number {\n    return this.isRoot() ? 0 : this.parent.depth + 1;\n  }\n\n  isRoot(): boolean {\n    return false;\n  }\n\n  registerCommand(command: Command<unknown>, faceModel: ValueModel<CommandFace>): Disposable {\n    return this.register(new Registration.CommandRegistration(faceModel, command));\n  }\n\n  registerGroup(group: CommandGroup, faceModel: ValueModel<CommandFace>): Disposable {\n    return this.register(new Registration.GroupRegistration(faceModel, group));\n  }\n\n  registerFlex(component: FlexComponent) {\n    return this.register(new Registration.FlexRegistration());\n  }\n\n  registerSeparator(component: SeparatorComponent) {\n    return this.register(new Registration.SeparatorRegistration());\n  }\n\n  protected register(registration: Registration): Disposable {\n    this._registrations.push(registration);\n    if (registration instanceof Registration.FaceRegistration) {\n      this._childFaceModels.push(registration.faceModel);\n      const { when } = Dsl.disposeWith(registration);\n      when(registration.faceModel).changes((is, was) => {\n        this.notifyChildFaceChanged(new CommandFace.Adapter(is), new CommandFace.Adapter(was));\n      }, { asLongAs: this.initialised });\n      registration.onDispose(() => this._childFaceModels.remove(registration.faceModel));\n    }\n    registration.onDispose(() => this._registrations.remove(registration));\n    return registration;\n  }\n\n}\n\nexport namespace CommandGroup {\n  export class Root extends CommandGroup {\n\n    @TrackExternal()\n    faceModel: ValueModel<CommandFace>;\n\n    @TrackExternal({ defaultValue: 'after' })\n    xPositionModel: ValueModel<'before' | 'after'>;\n\n    @StoreInValueModel('xPositionModel')\n    xPosition: 'before' | 'after';\n\n    @TrackExternal({ defaultValue: 'below' })\n    yPositionModel: ValueModel<'above' | 'below'>;\n\n    @StoreInValueModel('yPositionModel')\n    yPosition: 'above' | 'below';\n\n    isRoot(): boolean {\n      return true;\n    }\n  }\n\n  export function factory():Root {\n    return new Root()\n  }\n}\n\n\n"]}

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

@@ -0,0 +1,58 @@
+import { __decorate, __extends, __metadata } from "tslib";
+import { Component, Input } from '@angular/core';
+import { Dsl, MutableValueModel, StoreInValueModel, Trace } from '@coolon/pectin';
+import { DisposableComponent } from '../../disposable-component';
+import { CommandGroup } from './command-group';
+var ɵ0 = CommandGroup.factory;
+/**
+ *
+ */
+var MoreMenuComponent = /** @class */ (function (_super) {
+    __extends(MoreMenuComponent, _super);
+    function MoreMenuComponent(group) {
+        var _this = _super.call(this) || this;
+        _this.group = group;
+        _this.tooltipModel = new MutableValueModel();
+        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;
+        group.xPosition = 'before'; // this should be the default unless overridden by the user.
+        group.faceModel = chain(_this.tooltipModel).map(function (tooltip) {
+            return {
+                icon: function () { return 'mat:more_vert'; },
+                tooltip: function () {
+                    return tooltip;
+                }
+            };
+        }, { allowNil: true });
+        return _this;
+    }
+    MoreMenuComponent.prototype.ngOnInit = function () {
+    };
+    MoreMenuComponent.prototype.ngAfterContentInit = function () {
+        this.group.initialise();
+    };
+    MoreMenuComponent.ctorParameters = function () { return [
+        { type: CommandGroup }
+    ]; };
+    __decorate([
+        Input(), StoreInValueModel('tooltipModel'),
+        __metadata("design:type", String)
+    ], MoreMenuComponent.prototype, "tooltip", void 0);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], MoreMenuComponent.prototype, "ngAfterContentInit", null);
+    MoreMenuComponent = __decorate([
+        Component({
+            selector: 'aup-more-menu',
+            template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
+            providers: [{ provide: CommandGroup, useFactory: ɵ0 }]
+        }),
+        __metadata("design:paramtypes", [CommandGroup])
+    ], MoreMenuComponent);
+    return MoreMenuComponent;
+}(DisposableComponent));
+export { MoreMenuComponent };
+export { ɵ0 };
+//# sourceMappingURL=more-menu.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"more-menu.component.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/group/more-menu.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAoB,SAAS,EAAE,KAAK,EAAU,MAAM,eAAe,CAAC;AAC3E,OAAO,EAAE,GAAG,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClF,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;SAQI,YAAY,CAAC,OAAO;AANvE;;GAEG;AAMH;IAAuC,qCAAmB;IAOxD,2BAAqB,KAAmB;QAAxC,YACE,iBAAO,SAWR;QAZoB,WAAK,GAAL,KAAK,CAAc;QALhC,kBAAY,GAAG,IAAI,iBAAiB,EAAU,CAAC;QAO/C,IAAA,2BAAkF,EAAhF,gBAAK,EAAE,oBAAO,EAAE,kBAAM,EAAE,cAAI,EAAE,gBAAK,EAAE,oBAAO,EAAE,sBAAkC,CAAC;QACzF,KAAK,CAAC,SAAS,GAAG,QAAQ,CAAC,CAAC,4DAA4D;QACxF,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC,KAAI,CAAC,YAAY,CAAC,CAAC,GAAG,CAAC,UAAA,OAAO;YACpD,OAAO;gBACL,IAAI,EAAE,cAAM,OAAA,eAAe,EAAf,CAAe;gBAC3B,OAAO,EAAP;oBACE,OAAO,OAAO,CAAC;gBACjB,CAAC;aACF,CAAC;QACJ,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC;;IACzB,CAAC;IAED,oCAAQ,GAAR;IACA,CAAC;IAGD,8CAAkB,GAAlB;QACE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IAC1B,CAAC;;gBApB2B,YAAY;;IAFxC;QADC,KAAK,EAAE,EAAE,iBAAiB,CAAC,cAAc,CAAC;;sDAC3B;IAoBhB;QADC,KAAK,EAAE;;;;+DAGP;IA3BU,iBAAiB;QAL7B,SAAS,CAAC;YACT,QAAQ,EAAE,eAAe;YACzB,QAAQ,EAAE,6HAA6H;YACvI,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,UAAU,IAAsB,EAAE,CAAC;SACzE,CAAC;yCAQ4B,YAAY;OAP7B,iBAAiB,CA6B7B;IAAD,wBAAC;CAAA,AA7BD,CAAuC,mBAAmB,GA6BzD;SA7BY,iBAAiB","sourcesContent":["import { AfterContentInit, Component, Input, OnInit } from '@angular/core';\nimport { Dsl, MutableValueModel, StoreInValueModel, Trace } from '@coolon/pectin';\nimport { DisposableComponent } from '../../disposable-component';\nimport { CommandGroup } from './command-group';\n\n/**\n *\n */\n@Component({\n  selector: 'aup-more-menu',\n  template: '<aup-command-group-renderer [renderRootNode]=\"true\" [groupViewDataModel]=\"group.rootTemplate\"></aup-command-group-renderer>',\n  providers: [{ provide: CommandGroup, useFactory: CommandGroup.factory }]\n})\nexport class MoreMenuComponent extends DisposableComponent implements OnInit, AfterContentInit {\n\n  private tooltipModel = new MutableValueModel<string>();\n\n  @Input() @StoreInValueModel('tooltipModel')\n  tooltip: string;\n\n  constructor(readonly group: CommandGroup) {\n    super();\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n    group.xPosition = 'before'; // this should be the default unless overridden by the user.\n    group.faceModel = chain(this.tooltipModel).map(tooltip => {\n      return {\n        icon: () => 'mat:more_vert',\n        tooltip(): string {\n          return tooltip;\n        }\n      };\n    }, { allowNil: true });\n  }\n\n  ngOnInit() {\n  }\n\n  @Trace()\n  ngAfterContentInit(): void {\n    this.group.initialise();\n  }\n\n}\n"]}

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

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

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

@@ -0,0 +1,68 @@
+import { __decorate, __extends, __metadata } from "tslib";
+import { Component, Input } from '@angular/core';
+import { Dsl, StoreInValueModel, Trace, TrackExternal, ValueModel } from '@coolon/pectin';
+import { DisposableComponent } from '../../disposable-component';
+import { CommandFace } from '../command-face';
+import { CommandGroup } from './command-group';
+var ɵ0 = CommandGroup.factory;
+/**
+ *
+ */
+var PopupMenuComponent = /** @class */ (function (_super) {
+    __extends(PopupMenuComponent, _super);
+    function PopupMenuComponent(group) {
+        var _this = _super.call(this) || this;
+        _this.group = group;
+        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;
+        group.faceModel = _this.faceModel;
+        return _this;
+    }
+    PopupMenuComponent.prototype.ngOnInit = function () {
+    };
+    PopupMenuComponent.prototype.ngAfterContentInit = function () {
+        this.group.initialise();
+    };
+    PopupMenuComponent.prototype.ngAfterViewInit = function () {
+    };
+    PopupMenuComponent.ctorParameters = function () { return [
+        { type: CommandGroup }
+    ]; };
+    __decorate([
+        Input(), TrackExternal(),
+        __metadata("design:type", ValueModel)
+    ], PopupMenuComponent.prototype, "faceModel", void 0);
+    __decorate([
+        Input(), StoreInValueModel('faceModel'),
+        __metadata("design:type", Object)
+    ], PopupMenuComponent.prototype, "face", void 0);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], PopupMenuComponent.prototype, "ngOnInit", null);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], PopupMenuComponent.prototype, "ngAfterContentInit", null);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], PopupMenuComponent.prototype, "ngAfterViewInit", null);
+    PopupMenuComponent = __decorate([
+        Component({
+            selector: 'aup-popup-menu',
+            template: '<aup-command-group-renderer [renderRootNode]="true" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
+            providers: [{ provide: CommandGroup, useFactory: ɵ0 }]
+        }),
+        __metadata("design:paramtypes", [CommandGroup])
+    ], PopupMenuComponent);
+    return PopupMenuComponent;
+}(DisposableComponent));
+export { PopupMenuComponent };
+export { ɵ0 };
+//# sourceMappingURL=popup-menu.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"popup-menu.component.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/group/popup-menu.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAmC,SAAS,EAAE,KAAK,EAAU,MAAM,eAAe,CAAC;AAE1F,OAAO,EAAE,GAAG,EAAE,iBAAiB,EAAE,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC1F,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;SASI,YAAY,CAAC,OAAO;AAPvE;;GAEG;AAOH;IAAwC,sCAAmB;IAQzD,4BAAqB,KAAmB;QAAxC,YACE,iBAAO,SAGR;QAJoB,WAAK,GAAL,KAAK,CAAc;QAEhC,IAAA,2BAAkF,EAAhF,gBAAK,EAAE,oBAAO,EAAE,kBAAM,EAAE,cAAI,EAAE,gBAAK,EAAE,oBAAO,EAAE,sBAAkC,CAAC;QACzF,KAAK,CAAC,SAAS,GAAG,KAAI,CAAC,SAAS,CAAC;;IACnC,CAAC;IAGD,qCAAQ,GAAR;IACA,CAAC;IAGD,+CAAkB,GAAlB;QACE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IAC1B,CAAC;IAGD,4CAAe,GAAf;IACA,CAAC;;gBAjB2B,YAAY;;IALxC;QADC,KAAK,EAAE,EAAE,aAAa,EAAE;kCACd,UAAU;yDAAc;IAGnC;QADC,KAAK,EAAE,EAAE,iBAAiB,CAAC,WAAW,CAAC;;oDACtB;IASlB;QADC,KAAK,EAAE;;;;sDAEP;IAGD;QADC,KAAK,EAAE;;;;gEAGP;IAGD;QADC,KAAK,EAAE;;;;6DAEP;IAzBU,kBAAkB;QAN9B,SAAS,CAAC;YACT,QAAQ,EAAE,gBAAgB;YAC1B,QAAQ,EAAE,6HAA6H;YAEvI,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,UAAU,IAAsB,EAAC,CAAC;SACxE,CAAC;yCAS4B,YAAY;OAR7B,kBAAkB,CA4B9B;IAAD,yBAAC;CAAA,AA5BD,CAAwC,mBAAmB,GA4B1D;SA5BY,kBAAkB","sourcesContent":["import { AfterContentInit, AfterViewInit, Component, Input, OnInit } from '@angular/core';\n\nimport { Dsl, StoreInValueModel, Trace, TrackExternal, ValueModel } from '@coolon/pectin';\nimport { DisposableComponent } from '../../disposable-component';\nimport { CommandFace } from '../command-face';\nimport { CommandGroup } from './command-group';\n\n/**\n *\n */\n@Component({\n  selector: 'aup-popup-menu',\n  template: '<aup-command-group-renderer [renderRootNode]=\"true\" [groupViewDataModel]=\"group.rootTemplate\"></aup-command-group-renderer>',\n  styleUrls: [],\n  providers: [{ provide: CommandGroup, useFactory: CommandGroup.factory}]\n})\nexport class PopupMenuComponent extends DisposableComponent implements OnInit, AfterContentInit, AfterViewInit {\n\n  @Input() @TrackExternal()\n  faceModel: ValueModel<CommandFace>;\n\n  @Input() @StoreInValueModel('faceModel')\n  face: CommandFace;\n\n  constructor(readonly group: CommandGroup) {\n    super();\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n    group.faceModel = this.faceModel;\n  }\n\n  @Trace()\n  ngOnInit(): void {\n  }\n\n  @Trace()\n  ngAfterContentInit(): void {\n    this.group.initialise();\n  }\n\n  @Trace()\n  ngAfterViewInit(): void {\n  }\n\n\n}\n"]}

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

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

package/esm5/lib/components/commands/group/registration.js

@@ -0,0 +1,80 @@
+import { __extends } from "tslib";
+import { GarbageCollector } from '@coolon/pectin';
+import { ViewData } from './view-data';
+var Registration = /** @class */ (function (_super) {
+    __extends(Registration, _super);
+    function Registration() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    return Registration;
+}(GarbageCollector));
+export { Registration };
+(function (Registration) {
+    var FaceRegistration = /** @class */ (function (_super) {
+        __extends(FaceRegistration, _super);
+        function FaceRegistration(faceModel) {
+            var _this = _super.call(this) || this;
+            _this.faceModel = faceModel;
+            return _this;
+        }
+        return FaceRegistration;
+    }(Registration));
+    Registration.FaceRegistration = FaceRegistration;
+    var CommandRegistration = /** @class */ (function (_super) {
+        __extends(CommandRegistration, _super);
+        function CommandRegistration(faceModel, command) {
+            var _this = _super.call(this, faceModel) || this;
+            _this.command = command;
+            return _this;
+        }
+        CommandRegistration.prototype.toTemplate = function () {
+            return new ViewData.CommandData(this.faceModel.value, this.command);
+        };
+        return CommandRegistration;
+    }(FaceRegistration));
+    Registration.CommandRegistration = CommandRegistration;
+    var GroupRegistration = /** @class */ (function (_super) {
+        __extends(GroupRegistration, _super);
+        function GroupRegistration(faceModel, group) {
+            var _this = _super.call(this, faceModel) || this;
+            _this.group = group;
+            return _this;
+        }
+        GroupRegistration.prototype.toTemplate = function () {
+            return new ViewData.GroupData(this.faceModel.value, this.group.xPosition, this.group.yPosition, this.group.registrations.value.map(function (r) { return r.toTemplate(); }));
+        };
+        return GroupRegistration;
+    }(FaceRegistration));
+    Registration.GroupRegistration = GroupRegistration;
+    var SeparatorRegistration = /** @class */ (function (_super) {
+        __extends(SeparatorRegistration, _super);
+        function SeparatorRegistration() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.template = new ViewData.SeparatorData();
+            return _this;
+        }
+        SeparatorRegistration.prototype.toTemplate = function () {
+            return this.template;
+        };
+        return SeparatorRegistration;
+    }(Registration));
+    Registration.SeparatorRegistration = SeparatorRegistration;
+    var FlexRegistration = /** @class */ (function (_super) {
+        __extends(FlexRegistration, _super);
+        function FlexRegistration() {
+            var _this = _super !== null && _super.apply(this, arguments) || this;
+            _this.template = new ViewData.FlexData();
+            return _this;
+        }
+        FlexRegistration.prototype.toTemplate = function () {
+            return this.template;
+        };
+        return FlexRegistration;
+    }(Registration));
+    Registration.FlexRegistration = FlexRegistration;
+    function hasFace(entry) {
+        return entry instanceof CommandRegistration || entry instanceof GroupRegistration;
+    }
+    Registration.hasFace = hasFace;
+})(Registration || (Registration = {}));
+//# sourceMappingURL=registration.js.map

package/esm5/lib/components/commands/group/registration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registration.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/group/registration.ts"],"names":[],"mappings":";AACA,OAAO,EAAW,gBAAgB,EAAc,MAAM,gBAAgB,CAAC;AAEvE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC;IAA2C,gCAAgB;IAA3D;;IAEA,CAAC;IAAD,mBAAC;AAAD,CAAC,AAFD,CAA2C,gBAAgB,GAE1D;;AAED,WAAiB,YAAY;IAE3B;QAA+C,oCAAY;QACzD,0BAA+B,SAAkC;YAAjE,YACE,iBAAO,SACR;YAF8B,eAAS,GAAT,SAAS,CAAyB;;QAEjE,CAAC;QACH,uBAAC;IAAD,CAAC,AAJD,CAA+C,YAAY,GAI1D;IAJqB,6BAAgB,mBAIrC,CAAA;IAED;QAAyC,uCAAgB;QACvD,6BAAY,SAAkC,EAAW,OAAyB;YAAlF,YACE,kBAAM,SAAS,CAAC,SACjB;YAFwD,aAAO,GAAP,OAAO,CAAkB;;QAElF,CAAC;QAED,wCAAU,GAAV;YACE,OAAO,IAAI,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC;QACtE,CAAC;QACH,0BAAC;IAAD,CAAC,AARD,CAAyC,gBAAgB,GAQxD;IARY,gCAAmB,sBAQ/B,CAAA;IAED;QAAuC,qCAAgB;QACrD,2BAAY,SAAkC,EAAW,KAAmB;YAA5E,YACE,kBAAM,SAAS,CAAC,SACjB;YAFwD,WAAK,GAAL,KAAK,CAAc;;QAE5E,CAAC;QAED,sCAAU,GAAV;YACE,OAAO,IAAI,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAChD,IAAI,CAAC,KAAK,CAAC,SAAS,EACpB,IAAI,CAAC,KAAK,CAAC,SAAS,EACpB,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,GAAG,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,UAAU,EAAE,EAAd,CAAc,CAAC,CACxD,CAAC;QACJ,CAAC;QAEH,wBAAC;IAAD,CAAC,AAbD,CAAuC,gBAAgB,GAatD;IAbY,8BAAiB,oBAa7B,CAAA;IAED;QAA2C,yCAAY;QAAvD;YAAA,qEAMC;YALkB,cAAQ,GAAG,IAAI,QAAQ,CAAC,aAAa,EAAE,CAAC;;QAK3D,CAAC;QAHC,0CAAU,GAAV;YACE,OAAO,IAAI,CAAC,QAAQ,CAAC;QACvB,CAAC;QACH,4BAAC;IAAD,CAAC,AAND,CAA2C,YAAY,GAMtD;IANY,kCAAqB,wBAMjC,CAAA;IAED;QAAsC,oCAAY;QAAlD;YAAA,qEAMC;YALkB,cAAQ,GAAG,IAAI,QAAQ,CAAC,QAAQ,EAAE,CAAC;;QAKtD,CAAC;QAHC,qCAAU,GAAV;YACE,OAAO,IAAI,CAAC,QAAQ,CAAC;QACvB,CAAC;QACH,uBAAC;IAAD,CAAC,AAND,CAAsC,YAAY,GAMjD;IANY,6BAAgB,mBAM5B,CAAA;IAED,SAAgB,OAAO,CAAC,KAAmB;QACzC,OAAO,KAAK,YAAY,mBAAmB,IAAI,KAAK,YAAY,iBAAiB,CAAC;IACpF,CAAC;IAFe,oBAAO,UAEtB,CAAA;AAEH,CAAC,EArDgB,YAAY,KAAZ,YAAY,QAqD5B","sourcesContent":["\nimport { Command, GarbageCollector, ValueModel } from '@coolon/pectin';\nimport { CommandGroup } from './command-group';\nimport { ViewData } from './view-data';\nimport { CommandFace } from '../command-face';\n\nexport abstract class Registration extends GarbageCollector {\n  abstract toTemplate(): ViewData;\n}\n\nexport namespace Registration {\n\n  export abstract class FaceRegistration extends Registration {\n    protected constructor(readonly faceModel: ValueModel<CommandFace>) {\n      super();\n    }\n  }\n\n  export class CommandRegistration extends FaceRegistration {\n    constructor(faceModel: ValueModel<CommandFace>, readonly command: Command<unknown>) {\n      super(faceModel);\n    }\n\n    toTemplate(): ViewData.CommandData {\n      return new ViewData.CommandData(this.faceModel.value, this.command);\n    }\n  }\n\n  export class GroupRegistration extends FaceRegistration {\n    constructor(faceModel: ValueModel<CommandFace>, readonly group: CommandGroup) {\n      super(faceModel);\n    }\n\n    toTemplate(): ViewData.GroupData {\n      return new ViewData.GroupData(this.faceModel.value,\n        this.group.xPosition,\n        this.group.yPosition,\n        this.group.registrations.value.map(r => r.toTemplate())\n      );\n    }\n\n  }\n\n  export class SeparatorRegistration extends Registration {\n    private readonly template = new ViewData.SeparatorData();\n\n    toTemplate(): ViewData.SeparatorData {\n      return this.template;\n    }\n  }\n\n  export class FlexRegistration extends Registration {\n    private readonly template = new ViewData.FlexData();\n\n    toTemplate(): ViewData.FlexData {\n      return this.template;\n    }\n  }\n\n  export function hasFace(entry: Registration): entry is FaceRegistration {\n    return entry instanceof CommandRegistration || entry instanceof GroupRegistration;\n  }\n\n}\n\n\n"]}

package/esm5/lib/components/commands/group/tool-bar/tool-bar.component.js

@@ -0,0 +1,58 @@
+import { __decorate, __extends, __metadata } from "tslib";
+import { Component } from '@angular/core';
+import { Trace } from '@coolon/pectin';
+import { DisposableComponent } from '../../../disposable-component';
+import { CommandGroup } from '../command-group';
+var ɵ0 = CommandGroup.factory;
+/**
+ *
+ */
+var ToolBarComponent = /** @class */ (function (_super) {
+    __extends(ToolBarComponent, _super);
+    function ToolBarComponent(group) {
+        var _this = _super.call(this) || this;
+        _this.group = group;
+        return _this;
+    }
+    ToolBarComponent.prototype.ngOnInit = function () {
+    };
+    ToolBarComponent.prototype.ngAfterContentInit = function () {
+        this.group.initialise();
+    };
+    ToolBarComponent.prototype.ngAfterViewInit = function () {
+    };
+    ToolBarComponent.ctorParameters = function () { return [
+        { type: CommandGroup }
+    ]; };
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], ToolBarComponent.prototype, "ngOnInit", null);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], ToolBarComponent.prototype, "ngAfterContentInit", null);
+    __decorate([
+        Trace(),
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], ToolBarComponent.prototype, "ngAfterViewInit", null);
+    ToolBarComponent = __decorate([
+        Component({
+            selector: 'aup-tool-bar',
+            template: '<aup-command-group-renderer [renderRootNode]="false" [groupViewDataModel]="group.rootTemplate"></aup-command-group-renderer>',
+            providers: [{ provide: CommandGroup, useFactory: ɵ0 }],
+            styles: [":host{display:inline-flex;flex-direction:row;align-items:center}:host mat-divider{-ms-grid-row-align:stretch;align-self:stretch;margin:4px 0}:host span.flex{flex:1}:host>*+*{margin-left:8px}"]
+        }),
+        __metadata("design:paramtypes", [CommandGroup])
+    ], ToolBarComponent);
+    return ToolBarComponent;
+}(DisposableComponent));
+export { ToolBarComponent };
+export { ɵ0 };
+//# sourceMappingURL=tool-bar.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tool-bar.component.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/group/tool-bar/tool-bar.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAmC,SAAS,EAAU,MAAM,eAAe,CAAC;AACnF,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;SAUG,YAAY,CAAC,OAAO;AAPvE;;GAEG;AAOH;IAAsC,oCAAmB;IAEvD,0BAAqB,KAAmB;QAAxC,YACE,iBAAO,SACR;QAFoB,WAAK,GAAL,KAAK,CAAc;;IAExC,CAAC;IAGD,mCAAQ,GAAR;IACA,CAAC;IAGD,6CAAkB,GAAlB;QACE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IAC1B,CAAC;IAGD,0CAAe,GAAf;IACA,CAAC;;gBAf2B,YAAY;;IAKxC;QADC,KAAK,EAAE;;;;oDAEP;IAGD;QADC,KAAK,EAAE;;;;8DAGP;IAGD;QADC,KAAK,EAAE;;;;2DAEP;IAjBU,gBAAgB;QAN5B,SAAS,CAAC;YACT,QAAQ,EAAE,cAAc;YACxB,QAAQ,EAAE,8HAA8H;YAExI,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,UAAU,IAAsB,EAAE,CAAC;;SACzE,CAAC;yCAG4B,YAAY;OAF7B,gBAAgB,CAmB5B;IAAD,uBAAC;CAAA,AAnBD,CAAsC,mBAAmB,GAmBxD;SAnBY,gBAAgB","sourcesContent":["import { AfterContentInit, AfterViewInit, Component, OnInit } from '@angular/core';\nimport { Trace } from '@coolon/pectin';\nimport { DisposableComponent } from '../../../disposable-component';\nimport { CommandGroup } from '../command-group';\n\n\n/**\n *\n */\n@Component({\n  selector: 'aup-tool-bar',\n  template: '<aup-command-group-renderer [renderRootNode]=\"false\" [groupViewDataModel]=\"group.rootTemplate\"></aup-command-group-renderer>',\n  styleUrls: ['./tool-bar.component.scss'],\n  providers: [{ provide: CommandGroup, useFactory: CommandGroup.factory }]\n})\nexport class ToolBarComponent extends DisposableComponent implements OnInit, AfterContentInit, AfterViewInit {\n\n  constructor(readonly group: CommandGroup) {\n    super();\n  }\n\n  @Trace()\n  ngOnInit() {\n  }\n\n  @Trace()\n  ngAfterContentInit(): void {\n    this.group.initialise();\n  }\n\n  @Trace()\n  ngAfterViewInit(): void {\n  }\n\n}\n"]}

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

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

package/esm5/lib/components/commands/group/tool-bar/tool-bar.component.scss.shim.ngstyle.js.map

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

package/esm5/lib/components/commands/group/view-data.js

@@ -0,0 +1,131 @@
+import { __decorate, __extends, __metadata } from "tslib";
+import { lang } from '@coolon/pectin';
+import { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';
+import { CommandFace } from '../command-face';
+var ViewData = /** @class */ (function () {
+    function ViewData() {
+    }
+    return ViewData;
+}());
+export { ViewData };
+(function (ViewData) {
+    var FaceData = /** @class */ (function (_super) {
+        __extends(FaceData, _super);
+        function FaceData(face) {
+            var _this = _super.call(this) || this;
+            _this.faceAdapter = new CommandFace.Adapter(face);
+            return _this;
+        }
+        return FaceData;
+    }(ViewData));
+    ViewData.FaceData = FaceData;
+    var GroupData = /** @class */ (function (_super) {
+        __extends(GroupData, _super);
+        function GroupData(face, xPosition, yPosition, children) {
+            var _this = _super.call(this, face) || this;
+            _this.xPosition = xPosition;
+            _this.yPosition = yPosition;
+            _this.children = children;
+            return _this;
+        }
+        Object.defineProperty(GroupData.prototype, "hasMixedIcons", {
+            get: function () {
+                var hasFaces = this.children.filter(function (c) { return ViewData.hasFace(c); });
+                var iconCount = hasFaces.filter(function (c) { return !!c.faceAdapter.icon; }).length;
+                return iconCount > 0 && hasFaces.length !== iconCount;
+            },
+            enumerable: true,
+            configurable: true
+        });
+        __decorate([
+            Memoize(),
+            __metadata("design:type", Boolean),
+            __metadata("design:paramtypes", [])
+        ], GroupData.prototype, "hasMixedIcons", null);
+        return GroupData;
+    }(FaceData));
+    ViewData.GroupData = GroupData;
+    var CommandData = /** @class */ (function (_super) {
+        __extends(CommandData, _super);
+        function CommandData(face, command) {
+            var _this = _super.call(this, face) || this;
+            _this.command = command;
+            return _this;
+        }
+        return CommandData;
+    }(FaceData));
+    ViewData.CommandData = CommandData;
+    var SeparatorData = /** @class */ (function (_super) {
+        __extends(SeparatorData, _super);
+        function SeparatorData() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return SeparatorData;
+    }(ViewData));
+    ViewData.SeparatorData = SeparatorData;
+    var FlexData = /** @class */ (function (_super) {
+        __extends(FlexData, _super);
+        function FlexData() {
+            return _super !== null && _super.apply(this, arguments) || this;
+        }
+        return FlexData;
+    }(ViewData));
+    ViewData.FlexData = FlexData;
+    function as(type, viewData) {
+        return viewData instanceof type ? viewData : lang.illegalState("expected instance of " + type.name + ", got " + viewData.constructor.name);
+    }
+    ViewData.as = as;
+    function getCommand(data) {
+        return as(CommandData, data).command;
+    }
+    ViewData.getCommand = getCommand;
+    function getTooltip(data) {
+        return as(FaceData, data).faceAdapter.tooltip;
+    }
+    ViewData.getTooltip = getTooltip;
+    function getStyle(data) {
+        return as(FaceData, data).faceAdapter.style;
+    }
+    ViewData.getStyle = getStyle;
+    function getColor(data) {
+        return as(FaceData, data).faceAdapter.color;
+    }
+    ViewData.getColor = getColor;
+    function hasText(data) {
+        return !!as(FaceData, data).faceAdapter.text;
+    }
+    ViewData.hasText = hasText;
+    function getFace(data) {
+        return as(FaceData, data).faceAdapter.face;
+    }
+    ViewData.getFace = getFace;
+    function asGroup(viewData) {
+        return as(GroupData, viewData);
+    }
+    ViewData.asGroup = asGroup;
+    function hasMixedIcons(data) {
+        return as(GroupData, data).hasMixedIcons;
+    }
+    ViewData.hasMixedIcons = hasMixedIcons;
+    function isGroup(data) {
+        return data instanceof GroupData;
+    }
+    ViewData.isGroup = isGroup;
+    function hasFace(data) {
+        return data instanceof FaceData;
+    }
+    ViewData.hasFace = hasFace;
+    function isCommand(data) {
+        return data instanceof CommandData;
+    }
+    ViewData.isCommand = isCommand;
+    function isSeparator(data) {
+        return data instanceof SeparatorData;
+    }
+    ViewData.isSeparator = isSeparator;
+    function isFlex(data) {
+        return data instanceof FlexData;
+    }
+    ViewData.isFlex = isFlex;
+})(ViewData || (ViewData = {}));
+//# sourceMappingURL=view-data.js.map

package/esm5/lib/components/commands/group/view-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-data.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/group/view-data.ts"],"names":[],"mappings":"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","sourcesContent":["import { ThemePalette } from '@angular/material/core';\nimport { Command, Constructable, lang } from '@coolon/pectin';\nimport { icon } from '@fortawesome/fontawesome-svg-core';\nimport { Memoize } from '@typescript-plus/fast-memoize-decorator/dist/src';\nimport { CommandFace } from '../command-face';\n\n\nexport class ViewData {\n}\n\nexport namespace ViewData {\n\n  export class FaceData extends ViewData {\n    readonly faceAdapter: CommandFace.Adapter;\n\n    constructor(face: CommandFace) {\n      super();\n      this.faceAdapter = new CommandFace.Adapter(face);\n    }\n  }\n\n  export class GroupData extends FaceData {\n    constructor(face: CommandFace,\n                readonly xPosition,\n                readonly yPosition,\n                readonly children: ViewData[]) {\n      super(face);\n    }\n\n    @Memoize()\n    get hasMixedIcons(): boolean {\n      const hasFaces = this.children.filter(c => ViewData.hasFace(c)) as ViewData.FaceData[]\n      const iconCount = hasFaces.filter(c => !!c.faceAdapter.icon).length;\n      return iconCount > 0 && hasFaces.length !== iconCount;\n    }\n  }\n\n  export class CommandData extends FaceData {\n    constructor(face: CommandFace, readonly command: Command<unknown>) {\n      super(face);\n    }\n  }\n\n  export class SeparatorData extends ViewData {\n  }\n\n  export class FlexData extends ViewData {\n  }\n\n\n  export function as<T extends ViewData>(type: Constructable<T>, viewData: ViewData): T {\n    return viewData instanceof type ? viewData : lang.illegalState(`expected instance of ${type.name}, got ${viewData.constructor.name}`);\n  }\n\n  export function getCommand(data: ViewData): Command<unknown> {\n    return as(CommandData, data).command;\n  }\n\n  export function getTooltip(data: ViewData): string {\n    return as(FaceData, data).faceAdapter.tooltip;\n  }\n\n  export function getStyle(data: ViewData): string {\n    return as(FaceData, data).faceAdapter.style;\n  }\n\n  export function getColor(data: ViewData): ThemePalette {\n    return as(FaceData, data).faceAdapter.color as ThemePalette;\n  }\n\n  export function hasText(data: ViewData): boolean {\n    return !!as(FaceData, data).faceAdapter.text;\n  }\n\n  export function getFace(data: ViewData): CommandFace {\n    return as(FaceData, data).faceAdapter.face;\n  }\n\n  export function asGroup(viewData: ViewData): ViewData.GroupData {\n    return as(GroupData, viewData);\n  }\n\n  export function hasMixedIcons(data: ViewData): boolean {\n    return as(GroupData, data).hasMixedIcons;\n  }\n\n  export function isGroup(data: ViewData): data is GroupData {\n    return data instanceof GroupData;\n  }\n\n  export function hasFace(data: ViewData): data is FaceData {\n    return data instanceof FaceData;\n  }\n\n  export function isCommand(data: ViewData): data is CommandData {\n    return data instanceof CommandData;\n  }\n\n  export function isSeparator(data: ViewData): data is SeparatorData {\n    return data instanceof SeparatorData;\n  }\n\n  export function isFlex(data: ViewData): data is FlexData {\n    return data instanceof FlexData;\n  }\n\n\n}\n"]}

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

@@ -0,0 +1,37 @@
+import { __decorate, __extends, __metadata, __param } from "tslib";
+import { Component, Optional } from '@angular/core';
+import { DisposableComponent } from '../disposable-component';
+import { CommandGroup } from './group/command-group';
+/**
+ *
+ */
+var SeparatorComponent = /** @class */ (function (_super) {
+    __extends(SeparatorComponent, _super);
+    function SeparatorComponent(parent) {
+        var _this = _super.call(this) || this;
+        _this.parent = parent;
+        if (parent) {
+            parent.registerSeparator(_this);
+        }
+        return _this;
+    }
+    SeparatorComponent.prototype.isVertical = function () {
+        return this === null || this === void 0 ? void 0 : this.parent.isRoot();
+    };
+    SeparatorComponent.prototype.ngOnInit = function () {
+    };
+    SeparatorComponent.ctorParameters = function () { return [
+        { type: CommandGroup, decorators: [{ type: Optional }] }
+    ]; };
+    SeparatorComponent = __decorate([
+        Component({
+            selector: 'aup-separator',
+            template: "\n    <mat-divider [vertical]=\"isVertical()\"></mat-divider>"
+        }),
+        __param(0, Optional()),
+        __metadata("design:paramtypes", [CommandGroup])
+    ], SeparatorComponent);
+    return SeparatorComponent;
+}(DisposableComponent));
+export { SeparatorComponent };
+//# sourceMappingURL=separator.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"separator.component.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/separator.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAU,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAGrD;;GAEG;AAOH;IAAwC,sCAAmB;IAEzD,4BAAiC,MAAqB;QAAtD,YACE,iBAAO,SAIR;QALgC,YAAM,GAAN,MAAM,CAAe;QAEpD,IAAI,MAAM,EAAE;YACV,MAAM,CAAC,iBAAiB,CAAC,KAAI,CAAC,CAAC;SAChC;;IACH,CAAC;IAED,uCAAU,GAAV;QACE,OAAO,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,MAAM,CAAC,MAAM,GAAG;IAC/B,CAAC;IAED,qCAAQ,GAAR;IACA,CAAC;;gBAZyC,YAAY,uBAAzC,QAAQ;;IAFV,kBAAkB;QAN9B,SAAS,CAAC;YACT,QAAQ,EAAE,eAAe;YACzB,QAAQ,EAAE,+DAC8C;SAEzD,CAAC;QAGa,WAAA,QAAQ,EAAE,CAAA;yCAAmB,YAAY;OAF3C,kBAAkB,CAgB9B;IAAD,yBAAC;CAAA,AAhBD,CAAwC,mBAAmB,GAgB1D;SAhBY,kBAAkB","sourcesContent":["import { Component, OnInit, Optional } 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-separator',\n  template: `\n    <mat-divider [vertical]=\"isVertical()\"></mat-divider>`,\n  styles: []\n})\nexport class SeparatorComponent extends DisposableComponent implements OnInit {\n\n  constructor(@Optional() readonly parent?: CommandGroup) {\n    super();\n    if (parent) {\n      parent.registerSeparator(this);\n    }\n  }\n\n  isVertical() {\n    return this?.parent.isRoot();\n  }\n\n  ngOnInit() {\n  }\n\n}\n"]}

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

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

package/esm5/lib/components/components.module.js

@@ -7,10 +7,11 @@ import { FormsModule } from '@angular/forms';
 import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
-import { _MatMenuDirectivesModule, MatMenuModule } from '@angular/material/menu';
+import { MatMenuModule } from '@angular/material/menu';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
@@ -21,13 +22,16 @@ import { fas } from '@fortawesome/free-solid-svg-icons';
 import { DirectivesModule } from '../directives/directives.module';
 import { FocusBindingFactory } from '../directives/focus-binding-factory';
 import { CardContainerComponent } from './card-container/card-container.component';
-import { CommandBarComponent } from './commands/command-bar.component';
+import { CommandGroupMenuRendererComponent } from './commands/group/command-group-menu-renderer/command-group-menu-renderer.component';
+import { CommandGroupRendererComponent } from './commands/group/command-group-renderer/command-group-renderer.component';
+import { CommandGroupComponent } from './commands/group/command-group/command-group.component';
 import { CommandFaceComponent } from './commands/command-face/command-face.component';
-import { CommandComponent } from './commands/command.component';
-import { AbstractPopupMenuComponent } from './commands/popup-menu/abstract-popup-menu.component';
-import { PopupMenuComponent } from './commands/popup-menu/popup-menu.component';
-import { MoreMenuComponent } from './commands/popup-menu/more-menu.component';
-import { PopupMenuRendererComponent } from './commands/popup-menu-renderer/popup-menu-renderer.component';
+import { CommandComponent } from './commands/command/command.component';
+import { FlexComponent } from './commands/flex.component';
+import { MoreMenuComponent } from './commands/group/more-menu.component';
+import { PopupMenuComponent } from './commands/group/popup-menu.component';
+import { SeparatorComponent } from './commands/separator.component';
+import { ToolBarComponent } from './commands/group/tool-bar/tool-bar.component';
 import { FocusContainerComponent } from './focus-container/focus-container.component';
 import { FocusableComponent } from './focusable.component';
 import { AbstractInputComponent } from './forms/abstract-input.component';
@@ -99,13 +103,16 @@ var ComponentsModule = /** @class */ (function () {
                 IconComponent,
                 SectionHeaderComponent,
                 TableRowMenuComponent,
-                CommandBarComponent,
+                ToolBarComponent,
                 CommandComponent,
                 PopupMenuComponent,
+                CommandGroupComponent,
                 CommandFaceComponent,
-                AbstractPopupMenuComponent,
-                PopupMenuRendererComponent,
-                MoreMenuComponent
+                MoreMenuComponent,
+                SeparatorComponent,
+                FlexComponent,
+                CommandGroupMenuRendererComponent,
+                CommandGroupRendererComponent
             ],
             imports: [
                 CommonModule,
@@ -125,8 +132,8 @@ var ComponentsModule = /** @class */ (function () {
                 FontAwesomeModule,
                 MatTooltipModule,
                 MatAutocompleteModule,
-                _MatMenuDirectivesModule,
-                MatMenuModule
+                MatMenuModule,
+                MatDividerModule
             ],
             exports: [
                 NumberInputComponent,
@@ -152,28 +159,17 @@ var ComponentsModule = /** @class */ (function () {
                 IconComponent,
                 SectionHeaderComponent,
                 TableRowMenuComponent,
-                CommandBarComponent,
+                CommandGroupComponent,
+                ToolBarComponent,
                 CommandComponent,
-                AbstractPopupMenuComponent,
                 PopupMenuComponent,
                 CommandFaceComponent,
-                PopupMenuRendererComponent,
-                MoreMenuComponent
+                MoreMenuComponent,
+                SeparatorComponent,
+                FlexComponent
             ],
             providers: [
                 FocusBindingFactory
-                // {
-                //   provide: CELL_EDITOR_REGISTRATION, useValue: {
-                //     type: 'string',
-                //     editorClass: StringInputComponent
-                //   }, multi: true
-                // },
-                // {
-                //   provide: CELL_EDITOR_REGISTRATION, useValue: {
-                //     type: 'number',
-                //     editorClass: NumberInputComponent
-                //   }, multi: true
-                // }
             ]
         }),
         __metadata("design:paramtypes", [FaIconLibrary])