@coolon/angular-ui-powerups 12.4.0-alpha.7 → 12.4.0-alpha.71

package/esm2015/lib/components/busy-overlay/busy-overlay.component.js

@@ -12,7 +12,7 @@ BusyOverlayComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-busy-overlay',
                 template: "<ng-content></ng-content>\n<div class=\"busy-overlay-backdrop\" *ngIf=\"busyModel.value\">\n  <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"52\"></mat-progress-spinner>\n</div>\n",
-                styles: [":host{position:relative}div.busy-overlay-backdrop{position:absolute;background-color:rgba(0,0,0,.2);top:0;left:0;bottom:0;right:0;display:grid;grid-template-columns:auto;grid-template-rows:auto;place-content:center}"]
+                styles: [":host{position:relative}div.busy-overlay-backdrop{z-index:10;z-index:var(--aup-busy-overlay-z-index, 10);position:absolute;background-color:#0003;top:0;left:0;bottom:0;right:0;display:grid;grid-template-columns:auto;grid-template-rows:auto;place-content:center}\n"]
             },] }
 ];
 BusyOverlayComponent.ctorParameters = () => [];

package/esm2015/lib/components/busy-overlay/busy-overlay.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"BusyOverlayComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@coolon/pectin","name":"GarbageCollector","line":8,"character":42},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"aup-busy-overlay","template":"<ng-content></ng-content>\n<div class=\"busy-overlay-backdrop\" *ngIf=\"busyModel.value\">\n  <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"52\"></mat-progress-spinner>\n</div>\n","styles":[":host{position:relative}div.busy-overlay-backdrop{position:absolute;background-color:rgba(0,0,0,.2);top:0;left:0;bottom:0;right:0;display:grid;grid-template-columns:auto;grid-template-rows:auto;place-content:center}"]}]}],"members":{"busyModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":10,"character":12}}]}],"busy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":13,"character":12},"arguments":["busyModel"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"BusyOverlayComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"@coolon/pectin","name":"GarbageCollector","line":8,"character":42},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"aup-busy-overlay","template":"<ng-content></ng-content>\n<div class=\"busy-overlay-backdrop\" *ngIf=\"busyModel.value\">\n  <mat-progress-spinner mode=\"indeterminate\" [diameter]=\"52\"></mat-progress-spinner>\n</div>\n","styles":[":host{position:relative}div.busy-overlay-backdrop{z-index:10;z-index:var(--aup-busy-overlay-z-index, 10);position:absolute;background-color:#0003;top:0;left:0;bottom:0;right:0;display:grid;grid-template-columns:auto;grid-template-rows:auto;place-content:center}\n"]}]}],"members":{"busyModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":10,"character":12}}]}],"busy":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":13,"character":12},"arguments":["busyModel"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}}}}]

package/esm2015/lib/components/cards/abstract-card-container.component.js

@@ -0,0 +1,29 @@
+import { __decorate, __metadata } from "tslib";
+import { Component, ContentChild, Input, TemplateRef } from '@angular/core';
+import { Command, TrackExternal } from '@coolon/pectin';
+import { CommandFace } from '../commands/command-face';
+import { DisposableComponent } from '../disposable-component';
+export class AbstractCardContainerComponent extends DisposableComponent {
+    constructor() {
+        super();
+    }
+    ngOnInit() {
+    }
+}
+AbstractCardContainerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-abstract-card-container',
+                template: ''
+            },] }
+];
+AbstractCardContainerComponent.ctorParameters = () => [];
+AbstractCardContainerComponent.propDecorators = {
+    addCardCommand: [{ type: Input }],
+    addCardFace: [{ type: Input }],
+    addCardTemplate: [{ type: ContentChild, args: ['addCardTemplate',] }]
+};
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", Command)
+], AbstractCardContainerComponent.prototype, "addCardCommand", void 0);
+//# sourceMappingURL=abstract-card-container.component.js.map

package/esm2015/lib/components/cards/abstract-card-container.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"abstract-card-container.component.js","sourceRoot":"","sources":["../../../../../../../libs/angular-ui-powerups/src/lib/components/cards/abstract-card-container.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AACpF,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAM9D,MAAM,OAAO,8BAA+B,SAAQ,mBAAmB;IAYrE;QACE,KAAK,EAAE,CAAC;IACV,CAAC;IAED,QAAQ;IACR,CAAC;;;YArBF,SAAS,SAAC;gBACT,QAAQ,EAAE,6BAA6B;gBACvC,QAAQ,EAAE,EAAE;aACb;;;;6BAGE,KAAK;0BAIL,KAAK;8BAGL,YAAY,SAAC,iBAAiB;;AAL/B;IADC,aAAa,EAAE;8BACA,OAAO;sEAAM","sourcesContent":["import { Component, ContentChild, Input, OnInit, TemplateRef } from '@angular/core';\nimport { Command, TrackExternal } from '@coolon/pectin';\nimport { CommandFace } from '../commands/command-face';\nimport { DisposableComponent } from '../disposable-component';\n\n@Component({\n  selector: 'aup-abstract-card-container',\n  template: '',\n})\nexport class AbstractCardContainerComponent extends DisposableComponent implements OnInit {\n\n  @Input()\n  @TrackExternal()\n  addCardCommand: Command<any>;\n\n  @Input()\n  addCardFace: CommandFace;\n\n  @ContentChild('addCardTemplate')\n  addCardTemplate: TemplateRef<any>;\n\n  constructor() {\n    super();\n  }\n\n  ngOnInit() {\n  }\n\n}\n"]}

package/esm2015/lib/components/cards/abstract-card-container.component.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"AbstractCardContainerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../disposable-component","name":"DisposableComponent","line":9,"character":52},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"selector":"aup-abstract-card-container","template":""}]}],"members":{"addCardCommand":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":12,"character":3}}]}],"addCardFace":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"addCardTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":18,"character":3},"arguments":["addCardTemplate"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}}}}]

package/esm2015/lib/components/cards/abstract-card-container.component.ngfactory.js.map

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

package/esm2015/lib/components/cards/card-container/card-container.component.js

@@ -0,0 +1,123 @@
+import { Component, ElementRef, HostBinding, Input } from '@angular/core';
+import { lang } from '@coolon/typescript-utilities';
+import * as _ from 'lodash';
+import { AbstractCardContainerComponent } from '../abstract-card-container.component';
+/**
+ * @example
+ * // basic usage
+ * <aup-card-container>
+ *   <my-card *ngFor="..."></my-card>
+ * </aup-card-container>
+ *
+ * // adds an add button with a the '+' icon to the end of the card list.
+ * <aup-card-container [addCardCommand]="addCard">
+ *   <my-card *ngFor="..."></my-card>
+ * </aup-card-container>
+ *
+ * // adds an add button with the specified face
+ * <aup-card-container [addCardCommand]="addCard" [addCardFace]="i18n.addCard" >
+ *   <my-card *ngFor="..."></my-card>
+ * </aup-card-container>
+ *
+ * // use the aup-add-card-activity to display as the new card place holder and to run
+ * // the activity inside teh card
+ * <aup-card-container [addCardCommand]="addCard" [addCardFace]="i18n.addCard" >
+ *   <my-card *ngFor="..."></my-card>
+ *   <aup-add-card-activity type="inline" renderAs="card" [face]="i18n.commands.addModal" [activityClass]="AddCardActivity"></aup-add-card-activity>
+ * </aup-card-container>
+ *
+ * // adds an add card component using the specified template.  The template
+ * // will fill it's container in the grid.
+ * <aup-card-container>
+ *   <my-card *ngFor="..."></my-card>
+ *   <ng-template #addCardTemplate>
+ *     <div>This is a new card template, it will the the size of the other cards.</div>
+ *   </ng-template>
+ * </aup-card-container>
+ *
+ * // sing the default new card styles for your template
+ * @import "../../../../assets/styles";
+ * .my-new-card {
+ *   @include aup-card-container-new-card-style();
+ *   // OR
+ *   @include aup-card-container-new-card-style(
+ *      $color: rgba(0,0,0,0.54),
+ *      $background-color: rgba(255,255,255,0.8),
+ *      $hover-color: $color,
+ *      $background-hover-color: white
+ *   )
+ * }
+ * <aup-card-container>
+ *   <my-card *ngFor="..."></my-card>
+ *   <ng-template #addCardTemplate>
+ *     <div class="my-new-card" >This is a new card template, it will the the size of the other cards.</div>
+ *   </ng-template>
+ * </aup-card-container>
+ *
+ * // CSS Vars
+ * aup-card-container {
+ *   --card-gap: var(--card-gap, 16px);
+ *   --card-width: var(--card-width, 300px);
+ *   --card-max-width: auto;
+ *   --card-height: var(--card-height, auto);
+ *   --card-min-height: var(--card-min-height, auto);
+ *   --card-background: var(--card-background, #fcfcfb);
+ * }
+ */
+export class CardContainerComponent extends AbstractCardContainerComponent {
+    constructor(elementRef) {
+        super();
+        this.elementRef = elementRef;
+        /**
+         * Enable scrolling.  If true the container will have height==0 so you must set it's height explicitly
+         * or place in a layout that will stretch it such as a grid or flex layout.
+         */
+        this.enabledScroll = false;
+    }
+    set columnCount(count) {
+        if (!_.isNil(count) && (!_.isInteger(count) || count < 1)) {
+            lang.illegalState('columnCount must be a positive integer or nil');
+        }
+        this._columnCount = count;
+        this.updateColumnCountStyles();
+    }
+    get columnCount() {
+        return this._columnCount;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.updateColumnCountStyles();
+    }
+    get isAutoColumns() {
+        return _.isNil(this._columnCount);
+    }
+    get isSingleColumn() {
+        return this._columnCount === 1;
+    }
+    updateColumnCountStyles() {
+        const el = this.elementRef.nativeElement;
+        if (_.isNil(this._columnCount)) {
+            el.style.setProperty('--aup-card-container-column-count', '');
+        }
+        else {
+            el.style.setProperty('--aup-card-container-column-count', this._columnCount);
+        }
+    }
+}
+CardContainerComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-card-container',
+                template: "<div class=\"header-container\">\n  <ng-content select=\"[card-container-header]\"></ng-content>\n</div>\n\n<ng-template #content>\n  <div class=\"card-container\">\n    <ng-content></ng-content>\n\n    <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n      <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n      <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n    </div>\n\n    <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n      <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"no-scroll-container\" *ngIf=\"!enabledScroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n\n<aup-scroll-container *ngIf=\"enabledScroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</aup-scroll-container>\n\n<div class=\"footer-container\">\n  <ng-content select=\"[card-container-footer]\"></ng-content>\n</div>\n\n",
+                styles: [":host{--resolved-card-gap: var(--card-gap, 16px);--resolved-card-width: var(--card-width, 300px);--resolved-card-max-width: var(--card-max-width, auto);--resolved-card-height: var(--card-height, auto);--resolved-card-min-height: var(--card-min-height, auto);--resolved-card-background: var(--card-background, var(--aup-card-container-default-background-color));flex:1;display:flex;flex-direction:column;align-items:stretch;background:var(--resolved-card-background)}:host.auto-columns .card-container{grid-template-columns:repeat(auto-fit,minmax(var(--resolved-card-width),var(--resolved-card-max-width)));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap))}:host:not(.auto-columns) .card-container{grid-template-columns:repeat(var(--aup-card-container-column-count),1fr)}.card-container{display:grid;box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));max-width:100%;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap)}aup-scroll-container,.no-scroll-container{flex:1}.add-card-container{height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.add-card-container:hover{border-color:transparent;background-color:#fff;color:#0000008a}.add-card-template-container{height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}\n"]
+            },] }
+];
+CardContainerComponent.ctorParameters = () => [
+    { type: ElementRef }
+];
+CardContainerComponent.propDecorators = {
+    columnCount: [{ type: Input }],
+    enabledScroll: [{ type: Input }],
+    isAutoColumns: [{ type: HostBinding, args: ['class.auto-columns',] }],
+    isSingleColumn: [{ type: HostBinding, args: ['class.single-column',] }]
+};
+//# sourceMappingURL=card-container.component.js.map

package/esm2015/lib/components/cards/card-container/card-container.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-container.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/components/cards/card-container/card-container.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,EAAU,MAAM,eAAe,CAAC;AAClF,OAAO,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAC;AACpD,OAAO,KAAK,CAAC,MAAM,QAAQ,CAAC;AAC5B,OAAO,EAAE,8BAA8B,EAAE,MAAM,sCAAsC,CAAC;AAGtF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6DG;AAMH,MAAM,OAAO,sBAAuB,SAAQ,8BAA8B;IAwBxE,YAA6B,UAAsB;QACjD,KAAK,EAAE,CAAC;QADmB,eAAU,GAAV,UAAU,CAAY;QAPnD;;;WAGG;QAEH,kBAAa,GAAG,KAAK,CAAC;IAItB,CAAC;IAtBD,IACI,WAAW,CAAC,KAAyB;QACvC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,KAAK,GAAG,CAAC,CAAC,EAAE;YACzD,IAAI,CAAC,YAAY,CAAC,+CAA+C,CAAC,CAAC;SACpE;QACD,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;QAC1B,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,YAAY,CAAC;IAC3B,CAAC;IAaD,QAAQ;QACN,KAAK,CAAC,QAAQ,EAAE,CAAC;QACjB,IAAI,CAAC,uBAAuB,EAAE,CAAC;IACjC,CAAC;IAED,IACI,aAAa;QACf,OAAO,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACpC,CAAC;IAED,IACI,cAAc;QAChB,OAAO,IAAI,CAAC,YAAY,KAAK,CAAC,CAAC;IACjC,CAAC;IAES,uBAAuB;QAC/B,MAAM,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC;QACzC,IAAI,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,EAAE;YAC9B,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,mCAAmC,EAAE,EAAE,CAAC,CAAC;SAC/D;aAAM;YACL,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,mCAAmC,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;SAC9E;IACH,CAAC;;;YAvDF,SAAS,SAAC;gBACT,QAAQ,EAAE,oBAAoB;gBAC9B,2iCAA8C;;aAE/C;;;YAxEmB,UAAU;;;0BA6E3B,KAAK;4BAiBL,KAAK;4BAYL,WAAW,SAAC,oBAAoB;6BAKhC,WAAW,SAAC,qBAAqB","sourcesContent":["import { Component, ElementRef, HostBinding, Input, OnInit } from '@angular/core';\nimport { lang } from '@coolon/typescript-utilities';\nimport * as _ from 'lodash';\nimport { AbstractCardContainerComponent } from '../abstract-card-container.component';\n\n\n/**\n * @example\n * // basic usage\n * <aup-card-container>\n *   <my-card *ngFor=\"...\"></my-card>\n * </aup-card-container>\n *\n * // adds an add button with a the '+' icon to the end of the card list.\n * <aup-card-container [addCardCommand]=\"addCard\">\n *   <my-card *ngFor=\"...\"></my-card>\n * </aup-card-container>\n *\n * // adds an add button with the specified face\n * <aup-card-container [addCardCommand]=\"addCard\" [addCardFace]=\"i18n.addCard\" >\n *   <my-card *ngFor=\"...\"></my-card>\n * </aup-card-container>\n *\n * // use the aup-add-card-activity to display as the new card place holder and to run\n * // the activity inside teh card\n * <aup-card-container [addCardCommand]=\"addCard\" [addCardFace]=\"i18n.addCard\" >\n *   <my-card *ngFor=\"...\"></my-card>\n *   <aup-add-card-activity type=\"inline\" renderAs=\"card\" [face]=\"i18n.commands.addModal\" [activityClass]=\"AddCardActivity\"></aup-add-card-activity>\n * </aup-card-container>\n *\n * // adds an add card component using the specified template.  The template\n * // will fill it's container in the grid.\n * <aup-card-container>\n *   <my-card *ngFor=\"...\"></my-card>\n *   <ng-template #addCardTemplate>\n *     <div>This is a new card template, it will the the size of the other cards.</div>\n *   </ng-template>\n * </aup-card-container>\n *\n * // sing the default new card styles for your template\n * @import \"../../../../assets/styles\";\n * .my-new-card {\n *   @include aup-card-container-new-card-style();\n *   // OR\n *   @include aup-card-container-new-card-style(\n *      $color: rgba(0,0,0,0.54),\n *      $background-color: rgba(255,255,255,0.8),\n *      $hover-color: $color,\n *      $background-hover-color: white\n *   )\n * }\n * <aup-card-container>\n *   <my-card *ngFor=\"...\"></my-card>\n *   <ng-template #addCardTemplate>\n *     <div class=\"my-new-card\" >This is a new card template, it will the the size of the other cards.</div>\n *   </ng-template>\n * </aup-card-container>\n *\n * // CSS Vars\n * aup-card-container {\n *   --card-gap: var(--card-gap, 16px);\n *   --card-width: var(--card-width, 300px);\n *   --card-max-width: auto;\n *   --card-height: var(--card-height, auto);\n *   --card-min-height: var(--card-min-height, auto);\n *   --card-background: var(--card-background, #fcfcfb);\n * }\n */\n@Component({\n  selector: 'aup-card-container',\n  templateUrl: './card-container.component.html',\n  styleUrls: ['./card-container.component.scss']\n})\nexport class CardContainerComponent extends AbstractCardContainerComponent implements OnInit {\n\n  private _columnCount: number | undefined;\n\n  @Input()\n  set columnCount(count: number | undefined) {\n    if (!_.isNil(count) && (!_.isInteger(count) || count < 1)) {\n      lang.illegalState('columnCount must be a positive integer or nil');\n    }\n    this._columnCount = count;\n    this.updateColumnCountStyles();\n  }\n\n  get columnCount() {\n    return this._columnCount;\n  }\n\n  /**\n   * Enable scrolling.  If true the container will have height==0 so you must set it's height explicitly\n   * or place in a layout that will stretch it such as a grid or flex layout.\n   */\n  @Input()\n  enabledScroll = false;\n\n  constructor(private readonly elementRef: ElementRef) {\n    super();\n  }\n\n  ngOnInit() {\n    super.ngOnInit();\n    this.updateColumnCountStyles();\n  }\n\n  @HostBinding('class.auto-columns')\n  get isAutoColumns() {\n    return _.isNil(this._columnCount);\n  }\n\n  @HostBinding('class.single-column')\n  get isSingleColumn() {\n    return this._columnCount === 1;\n  }\n\n  protected updateColumnCountStyles() {\n    const el = this.elementRef.nativeElement;\n    if (_.isNil(this._columnCount)) {\n      el.style.setProperty('--aup-card-container-column-count', '');\n    } else {\n      el.style.setProperty('--aup-card-container-column-count', this._columnCount);\n    }\n  }\n\n}\n\nexport namespace CardContainerComponent {\n  export interface ColumnConfiguration {\n    count: number;\n    stretchToFill: boolean;\n  }\n}\n"]}

package/esm2015/lib/components/cards/card-container/card-container.component.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"CardContainerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../abstract-card-container.component","name":"AbstractCardContainerComponent","line":73,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":68,"character":1},"arguments":[{"selector":"aup-card-container","template":"<div class=\"header-container\">\n  <ng-content select=\"[card-container-header]\"></ng-content>\n</div>\n\n<ng-template #content>\n  <div class=\"card-container\">\n    <ng-content></ng-content>\n\n    <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n      <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n      <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n    </div>\n\n    <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n      <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<div class=\"no-scroll-container\" *ngIf=\"!enabledScroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n\n<aup-scroll-container *ngIf=\"enabledScroll\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</aup-scroll-container>\n\n<div class=\"footer-container\">\n  <ng-content select=\"[card-container-footer]\"></ng-content>\n</div>\n\n","styles":[":host{--resolved-card-gap: var(--card-gap, 16px);--resolved-card-width: var(--card-width, 300px);--resolved-card-max-width: var(--card-max-width, auto);--resolved-card-height: var(--card-height, auto);--resolved-card-min-height: var(--card-min-height, auto);--resolved-card-background: var(--card-background, var(--aup-card-container-default-background-color));flex:1;display:flex;flex-direction:column;align-items:stretch;background:var(--resolved-card-background)}:host.auto-columns .card-container{grid-template-columns:repeat(auto-fit,minmax(var(--resolved-card-width),var(--resolved-card-max-width)));min-width:calc(var(--resolved-card-width) + 2 * var(--resolved-card-gap));width:calc((var(--resolved-card-width) + var(--resolved-card-gap)) * 2 + var(--grid-gap))}:host:not(.auto-columns) .card-container{grid-template-columns:repeat(var(--aup-card-container-column-count),1fr)}.card-container{display:grid;box-sizing:border-box;padding:var(--resolved-card-gap);min-height:calc(var(--resolved-card-height) + 2 * var(--resolved-card-gap));max-width:100%;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap)}aup-scroll-container,.no-scroll-container{flex:1}.add-card-container{height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.add-card-container:hover{border-color:transparent;background-color:#fff;color:#0000008a}.add-card-template-container{height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}\n"]}]}],"members":{"columnCount":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":77,"character":3}}]}],"enabledScroll":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":94,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":97,"character":43}]}],"ngOnInit":[{"__symbolic":"method"}],"isAutoColumns":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":106,"character":3},"arguments":["class.auto-columns"]}]}],"isSingleColumn":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":111,"character":3},"arguments":["class.single-column"]}]}],"updateColumnCountStyles":[{"__symbolic":"method"}]}}}}]

package/esm2015/lib/components/cards/card-container/card-container.component.ngfactory.js.map

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

package/esm2015/lib/components/cards/card-container/card-container.component.scss.shim.ngstyle.js.map

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

package/esm2015/lib/components/cards/card-stack/card-stack.component.js

@@ -0,0 +1,78 @@
+import { Component } from '@angular/core';
+import { AbstractCardContainerComponent } from '../abstract-card-container.component';
+/**
+ * @deprecated deprecated, use `aup-card-container [columnCount]="1"` instead.
+ * @example
+ * // basic usage
+ * <aup-card-stack>
+ *   <my-card *ngFor="..."></my-card>
+ * </aup-card-stack>
+ *
+ * // adds an add button with a the '+' icon to the end of the card list.
+ * <aup-card-stack [addCardCommand]="addCard">
+ *   <my-card *ngFor="..."></my-card>
+ * </aup-card-stack>
+ *
+ * // adds an add button with the specified face
+ * <aup-card-stack [addCardCommand]="addCard" [addCardFace]="i18n.addCard" >
+ *   <my-card *ngFor="..."></my-card>
+ * </aup-card-stack>
+ *
+ * // use the aup-add-card-activity to display as the new card place holder and to run
+ * // the activity inside teh card
+ * <aup-card-stack [addCardCommand]="addCard" [addCardFace]="i18n.addCard" >
+ *   <my-card *ngFor="..."></my-card>
+ *   <aup-add-card-activity type="inline" renderAs="card" [face]="i18n.commands.addModal" [activityClass]="AddCardActivity"></aup-add-card-activity>
+ * </aup-card-stack>
+ *
+ * // adds an add card component using the specified template.  The template
+ * // will fill it's container in the grid.
+ * <aup-card-stack>
+ *   <my-card *ngFor="..."></my-card>
+ *   <ng-template #addCardTemplate>
+ *     <div>This is a new card template, it will the the size of the other cards.</div>
+ *   </ng-template>
+ * </aup-card-stack>
+ *
+ * // sing the default new card styles for your template
+ * @import "../../../../assets/styles";
+ * .my-new-card {
+ *   @include aup-card-stack-new-card-style();
+ *   // OR
+ *   @include aup-card-stack-new-card-style(
+ *      $color: rgba(0,0,0,0.54),
+ *      $background-color: rgba(255,255,255,0.8),
+ *      $hover-color: $color,
+ *      $background-hover-color: white
+ *   )
+ * }
+ * <aup-card-stack>
+ *   <my-card *ngFor="..."></my-card>
+ *   <ng-template #addCardTemplate>
+ *     <div class="my-new-card" >This is a new card template, it will the the size of the other cards.</div>
+ *   </ng-template>
+ * </aup-card-stack>
+ *
+ * // CSS Vars
+ * aup-card-stack {
+ *   --card-gap: var(--card-gap, 16px);
+ *   --card-height: var(--card-height, auto);
+ *   --card-min-height: var(--card-min-height, auto);
+ *   --card-background: var(--card-background, #fcfcfb);
+ * }
+ */
+export class CardStackComponent extends AbstractCardContainerComponent {
+    constructor() {
+        super();
+        console.warn('<aup-card-stack></aup-card-stack> is deprecated.  Use <aup-card-container [columnCount]="1"> instead.');
+    }
+}
+CardStackComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-card-stack',
+                template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n</div>\n<div class=\"footer\">\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n    <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n  <ng-content select=\"[aup-card-stack-footer]\"></ng-content>\n</div>\n",
+                styles: [":host{--resolved-card-gap: var(--card-gap, 16px);--resolved-card-height: var(--card-height, auto);--resolved-card-min-height: var(--card-min-height, auto);--resolved-card-background: var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);max-width:100%}.footer{display:flex;flex-direction:column;align-items:stretch;padding:0 var(--resolved-card-gap) var(--resolved-card-gap)}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.add-card-container:hover{border-color:transparent;background-color:#fff;color:#0000008a}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}\n"]
+            },] }
+];
+CardStackComponent.ctorParameters = () => [];
+//# sourceMappingURL=card-stack.component.js.map

package/esm2015/lib/components/cards/card-stack/card-stack.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"card-stack.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/components/cards/card-stack/card-stack.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC1C,OAAO,EAAE,8BAA8B,EAAE,MAAM,sCAAsC,CAAC;AAEtF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4DG;AAMH,MAAM,OAAO,kBAAmB,SAAQ,8BAA8B;IAEpE;QACE,KAAK,EAAE,CAAC;QACR,OAAO,CAAC,IAAI,CAAC,uGAAuG,CAAC,CAAA;IACvH,CAAC;;;YAVF,SAAS,SAAC;gBACT,QAAQ,EAAE,gBAAgB;gBAC1B,8lBAA0C;;aAE3C","sourcesContent":["import { Component } from '@angular/core';\nimport { AbstractCardContainerComponent } from '../abstract-card-container.component';\n\n/**\n * @deprecated deprecated, use `aup-card-container [columnCount]=\"1\"` instead.\n * @example\n * // basic usage\n * <aup-card-stack>\n *   <my-card *ngFor=\"...\"></my-card>\n * </aup-card-stack>\n *\n * // adds an add button with a the '+' icon to the end of the card list.\n * <aup-card-stack [addCardCommand]=\"addCard\">\n *   <my-card *ngFor=\"...\"></my-card>\n * </aup-card-stack>\n *\n * // adds an add button with the specified face\n * <aup-card-stack [addCardCommand]=\"addCard\" [addCardFace]=\"i18n.addCard\" >\n *   <my-card *ngFor=\"...\"></my-card>\n * </aup-card-stack>\n *\n * // use the aup-add-card-activity to display as the new card place holder and to run\n * // the activity inside teh card\n * <aup-card-stack [addCardCommand]=\"addCard\" [addCardFace]=\"i18n.addCard\" >\n *   <my-card *ngFor=\"...\"></my-card>\n *   <aup-add-card-activity type=\"inline\" renderAs=\"card\" [face]=\"i18n.commands.addModal\" [activityClass]=\"AddCardActivity\"></aup-add-card-activity>\n * </aup-card-stack>\n *\n * // adds an add card component using the specified template.  The template\n * // will fill it's container in the grid.\n * <aup-card-stack>\n *   <my-card *ngFor=\"...\"></my-card>\n *   <ng-template #addCardTemplate>\n *     <div>This is a new card template, it will the the size of the other cards.</div>\n *   </ng-template>\n * </aup-card-stack>\n *\n * // sing the default new card styles for your template\n * @import \"../../../../assets/styles\";\n * .my-new-card {\n *   @include aup-card-stack-new-card-style();\n *   // OR\n *   @include aup-card-stack-new-card-style(\n *      $color: rgba(0,0,0,0.54),\n *      $background-color: rgba(255,255,255,0.8),\n *      $hover-color: $color,\n *      $background-hover-color: white\n *   )\n * }\n * <aup-card-stack>\n *   <my-card *ngFor=\"...\"></my-card>\n *   <ng-template #addCardTemplate>\n *     <div class=\"my-new-card\" >This is a new card template, it will the the size of the other cards.</div>\n *   </ng-template>\n * </aup-card-stack>\n *\n * // CSS Vars\n * aup-card-stack {\n *   --card-gap: var(--card-gap, 16px);\n *   --card-height: var(--card-height, auto);\n *   --card-min-height: var(--card-min-height, auto);\n *   --card-background: var(--card-background, #fcfcfb);\n * }\n */\n@Component({\n  selector: 'aup-card-stack',\n  templateUrl: './card-stack.component.html',\n  styleUrls: ['./card-stack.component.scss']\n})\nexport class CardStackComponent extends AbstractCardContainerComponent {\n\n  constructor() {\n    super();\n    console.warn('<aup-card-stack></aup-card-stack> is deprecated.  Use <aup-card-container [columnCount]=\"1\"> instead.')\n  }\n\n}\n"]}

package/esm2015/lib/components/cards/card-stack/card-stack.component.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"CardStackComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../abstract-card-container.component","name":"AbstractCardContainerComponent","line":69,"character":40},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":64,"character":1},"arguments":[{"selector":"aup-card-stack","template":"<div class=\"card-container\">\n  <ng-content></ng-content>\n</div>\n<div class=\"footer\">\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n    <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n  <ng-content select=\"[aup-card-stack-footer]\"></ng-content>\n</div>\n","styles":[":host{--resolved-card-gap: var(--card-gap, 16px);--resolved-card-height: var(--card-height, auto);--resolved-card-min-height: var(--card-min-height, auto);--resolved-card-background: var(--card-background, #fcfcfb);flex:1;display:block;background:var(--resolved-card-background)}.card-container{display:grid;grid-template-columns:1fr;grid-auto-rows:minmax(var(--resolved-card-min-height),var(--resolved-card-height));grid-gap:var(--resolved-card-gap);box-sizing:border-box;padding:var(--resolved-card-gap);max-width:100%}.footer{display:flex;flex-direction:column;align-items:stretch;padding:0 var(--resolved-card-gap) var(--resolved-card-gap)}.add-card-container{width:var(--resolved-card-width);height:var(--resolved-card-height);min-height:var(--resolved-card-min-height);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:box-shadow .28s cubic-bezier(.4,0,.2,1);box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:#0000008a;background-color:#fffc}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{box-shadow:0 3px 1px -2px #0003,0 2px 2px #00000024,0 1px 5px #0000001f}.add-card-container:hover{border-color:transparent;background-color:#fff;color:#0000008a}.add-card-template-container{width:var(--resolved-card-width);height:var(--resolved-card-height);display:flex;flex-direction:column;align-items:stretch;justify-content:stretch}\n"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]}}}}]

package/esm2015/lib/components/cards/card-stack/card-stack.component.ngfactory.js.map

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

package/esm2015/lib/components/cards/card-stack/card-stack.component.scss.shim.ngstyle.js.map

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

package/esm2015/lib/components/commands/command/command.component.js

@@ -45,7 +45,7 @@ CommandComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-command',
                 template: "<ng-container *ngIf=\"iconOnly.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n          [matTooltip]=\"tooltipModel.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly.value\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n",
-                styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}button{flex:1}"]
+                styles: [":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}button{flex:1}\n"]
             },] }
 ];
 CommandComponent.ctorParameters = () => [

package/esm2015/lib/components/commands/command/command.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"CommandComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../group/popup-aware.component","name":"PopupAwareComponent","line":27,"character":38},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":22,"character":1},"arguments":[{"selector":"aup-command","template":"<ng-container *ngIf=\"iconOnly.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n          [matTooltip]=\"tooltipModel.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly.value\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n","styles":[":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}button{flex:1}"]}]}],"members":{"command":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":29,"character":12}}]}],"faceModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":32,"character":12}}]}],"face":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":35,"character":12},"arguments":["faceModel"]}]}],"busyFaceModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":38,"character":12}}]}],"busyFace":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":41,"character":12},"arguments":["busyFaceModel"]}]}],"alignFace":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":47,"character":3},"arguments":["class"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":58,"character":36},"arguments":[{"__symbolic":"reference","module":"../group/popup-container","name":"POPUP_CONTAINER","line":58,"character":43}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":58,"character":61}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":58,"character":23},{"__symbolic":"reference","module":"../group/popup-container","name":"PopupContainer","line":58,"character":81}]}],"isActive":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"getFace":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"CommandComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../group/popup-aware.component","name":"PopupAwareComponent","line":27,"character":38},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":22,"character":1},"arguments":[{"selector":"aup-command","template":"<ng-container *ngIf=\"iconOnly.value\">\n  <button mat-icon-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n          [matTooltip]=\"tooltipModel.value\">\n    <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n  </button>\n</ng-container>\n<ng-container *ngIf=\"!iconOnly.value\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <ng-container *ngSwitchCase=\"CommandFace.Style.STROKED\">\n      <button mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"CommandFace.Style.RAISED\">\n      <button mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n    <ng-container *ngSwitchDefault>\n      <button mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\" [class.busy]=\"command.busy.value\"\n              [matTooltip]=\"tooltipModel.value\">\n        <aup-command-face [class]=\"alignFace\" [faces]=\"faces.value\"></aup-command-face>\n      </button>\n    </ng-container>\n  </ng-container>\n</ng-container>\n","styles":[":host{display:inline-flex;flex-direction:row;justify-content:stretch}:host.centered button{text-align:center}:host.start button{text-align:start}:host.end button{text-align:end}button{flex:1}\n"]}]}],"members":{"command":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":29,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":29,"character":12}}]}],"faceModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":32,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":32,"character":12}}]}],"face":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":35,"character":12},"arguments":["faceModel"]}]}],"busyFaceModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":38,"character":12}}]}],"busyFace":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":41,"character":12},"arguments":["busyFaceModel"]}]}],"alignFace":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":47,"character":3},"arguments":["class"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[null,[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":58,"character":36},"arguments":[{"__symbolic":"reference","module":"../group/popup-container","name":"POPUP_CONTAINER","line":58,"character":43}]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":58,"character":61}}]],"parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":58,"character":23},{"__symbolic":"reference","module":"../group/popup-container","name":"PopupContainer","line":58,"character":81}]}],"isActive":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"getFace":[{"__symbolic":"method"}]}}}}]

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

@@ -26,6 +26,9 @@ export class CommandFaceComponent extends DisposableComponent {
         this.activeIcon = activeFace.pluck("icon");
         this.activeColor = activeFace.pluck("color");
     }
+    set face(face) {
+        this.facesModel.value = [face];
+    }
     get requiresMissingIconInLayout() {
         return this.includeMissingIconInLayout && !this.activeIcon.value;
     }
@@ -49,12 +52,13 @@ CommandFaceComponent.decorators = [
                 selector: 'aup-command-face',
                 template: "<div class=\"face-container\" *ngFor=\"let face of faceAdapters.value\">\n  <aup-icon *ngIf=\"hasIconStart(face)\" [icon]=\"face.icon\"></aup-icon>\n  <span *ngIf=\"face.text\">{{face.text}}</span>\n  <aup-icon *ngIf=\"hasIconEnd(face)\" [icon]=\"face.icon\"></aup-icon>\n</div>\n",
                 encapsulation: ViewEncapsulation.None,
-                styles: ["aup-command-face{--icon-gap:var(--aup-command-face-icon-gap);display:inline-grid}aup-command-face>.face-container{grid-column:1;grid-row:1;display:inline-flex;flex-direction:row;align-items:center}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}aup-command-face.start{justify-items:self-start}aup-command-face.end{justify-items:self-end}"]
+                styles: ["aup-command-face{--icon-gap: var(--aup-command-face-icon-gap);display:inline-grid}aup-command-face>.face-container{grid-column:1;grid-row:1;display:inline-flex;flex-direction:row;align-items:center}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}aup-command-face.start{justify-items:self-start}aup-command-face.end{justify-items:self-end}\n"]
             },] }
 ];
 CommandFaceComponent.ctorParameters = () => [];
 CommandFaceComponent.propDecorators = {
     _rawFaces: [{ type: Input, args: ['faces',] }],
+    face: [{ type: Input }],
     ignoreIcon: [{ type: Input }],
     ignoreText: [{ type: Input }],
     includeMissingIconInLayout: [{ type: Input }],

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

@@ -1 +1 @@
-{"version":3,"file":"command-face.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/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,EACL,GAAG,EAEH,gBAAgB,EAChB,gBAAgB,EAGjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;;;;;;;;GASG;AAOH,MAAM,OAAO,oBAAwB,SAAQ,mBAAmB;IA0B9D;QACE,KAAK,EAAE,CAAC;QAzBO,eAAU,GAAG,IAAI,gBAAgB,EAAe,CAAC;QAOlE,eAAU,GAAG,KAAK,CAAC;QAGnB,eAAU,GAAG,KAAK,CAAC;QAGnB,+BAA0B,GAAG,KAAK,CAAC;QAajC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACzF,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QACtF,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC7C,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAC1C,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;IAC9C,CAAC;IAZD,IACI,2BAA2B;QAC7B,OAAO,IAAI,CAAC,0BAA0B,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;IACnE,CAAC;IAWD,QAAQ;IACR,CAAC;IAED,iBAAiB,CAAC,IAAyB;QACzC,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,0BAA0B,CAAC;IAC5E,CAAC;IAED,YAAY,CAAC,IAAwB;QACnC,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClH,CAAC;IAED,UAAU,CAAC,IAAwB;QACjC,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC;IACxF,CAAC;IAED,IACI,KAAK;QACP,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;IAChC,CAAC;;;YA3DF,SAAS,SAAC;gBACT,QAAQ,EAAE,kBAAkB;gBAC5B,oSAA4C;gBAE5C,aAAa,EAAE,iBAAiB,CAAC,IAAI;;aACtC;;;;wBAME,KAAK,SAAC,OAAO;yBAGb,KAAK;yBAGL,KAAK;yCAGL,KAAK;0CAOL,WAAW,SAAC,iBAAiB;oBA6B7B,WAAW,SAAC,YAAY;;AA5CzB;IADiB,gBAAgB,CAAC,YAAY,CAAC;;uDACtB","sourcesContent":["import { Component, HostBinding, Input, OnInit, ViewEncapsulation } from '@angular/core';\nimport { ThemePalette } from '@angular/material/core';\n\nimport {\n  Dsl,\n  ListModelChain,\n  MutableListModel,\n  StoreInListModel,\n  StoreInValueModel,\n  ValueModelChain\n} 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 facesModel = new MutableListModel<CommandFace>();\n\n  // tslint:disable-next-line:no-input-rename\n  @Input('faces') @StoreInListModel('facesModel')\n  _rawFaces: CommandFace[];\n\n  @Input()\n  ignoreIcon = false;\n\n  @Input()\n  ignoreText = false;\n\n  @Input()\n  includeMissingIconInLayout = false;\n\n  readonly faceAdapters: ListModelChain<CommandFace.Adapter>;\n  private activeIcon: ValueModelChain<string>;\n  private activeColor: ValueModelChain<string>;\n\n  @HostBinding('class.hide-icon')\n  get requiresMissingIconInLayout() {\n    return this.includeMissingIconInLayout && !this.activeIcon.value;\n  }\n\n  constructor() {\n    super();\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n    this.faceAdapters = chain(this.facesModel).map(face => new CommandFace.Adapter(face));\n    const activeFace = this.faceAdapters.first();\n    this.activeIcon = activeFace.pluck(\"icon\")\n    this.activeColor = activeFace.pluck(\"color\")\n  }\n\n  ngOnInit() {\n  }\n\n  shouldIncludeIcon(face: CommandFace.Adapter) {\n    return (!this.ignoreIcon && face.icon) || this.includeMissingIconInLayout;\n  }\n\n  hasIconStart(face:CommandFace.Adapter): boolean {\n    return this.shouldIncludeIcon(face) && (!face.iconPosition || face.iconPosition === CommandFace.Position.START);\n  }\n\n  hasIconEnd(face:CommandFace.Adapter): boolean {\n    return this.shouldIncludeIcon(face) && face.iconPosition === CommandFace.Position.END;\n  }\n\n  @HostBinding('attr.color')\n  get color(): string {\n    return this.activeColor.value;\n  }\n\n}\n"]}
+{"version":3,"file":"command-face.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/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,EACL,GAAG,EAEH,gBAAgB,EAChB,gBAAgB,EAGjB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;;;;;;;;GASG;AAOH,MAAM,OAAO,oBAAwB,SAAQ,mBAAmB;IA+B9D;QACE,KAAK,EAAE,CAAC;QA9BO,eAAU,GAAG,IAAI,gBAAgB,EAAe,CAAC;QAYlE,eAAU,GAAG,KAAK,CAAC;QAGnB,eAAU,GAAG,KAAK,CAAC;QAGnB,+BAA0B,GAAG,KAAK,CAAC;QAajC,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACzF,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QACtF,MAAM,UAAU,GAAG,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,CAAC;QAC7C,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,KAAK,CAAC,MAAM,CAAC,CAAA;QAC1C,IAAI,CAAC,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;IAC9C,CAAC;IA9BD,IACI,IAAI,CAAC,IAAiB;QACxB,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,CAAC;IACjC,CAAC;IAeD,IACI,2BAA2B;QAC7B,OAAO,IAAI,CAAC,0BAA0B,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;IACnE,CAAC;IAWD,QAAQ;IACR,CAAC;IAED,iBAAiB,CAAC,IAAyB;QACzC,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,0BAA0B,CAAC;IAC5E,CAAC;IAED,YAAY,CAAC,IAAwB;QACnC,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClH,CAAC;IAED,UAAU,CAAC,IAAwB;QACjC,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC;IACxF,CAAC;IAED,IACI,KAAK;QACP,OAAO,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC;IAChC,CAAC;;;YAhEF,SAAS,SAAC;gBACT,QAAQ,EAAE,kBAAkB;gBAC5B,oSAA4C;gBAE5C,aAAa,EAAE,iBAAiB,CAAC,IAAI;;aACtC;;;;wBAME,KAAK,SAAC,OAAO;mBAGb,KAAK;yBAKL,KAAK;yBAGL,KAAK;yCAGL,KAAK;0CAOL,WAAW,SAAC,iBAAiB;oBA6B7B,WAAW,SAAC,YAAY;;AAjDzB;IADiB,gBAAgB,CAAC,YAAY,CAAC;;uDACtB","sourcesContent":["import { Component, HostBinding, Input, OnInit, ViewEncapsulation } from '@angular/core';\nimport { ThemePalette } from '@angular/material/core';\n\nimport {\n  Dsl,\n  ListModelChain,\n  MutableListModel,\n  StoreInListModel,\n  StoreInValueModel,\n  ValueModelChain\n} 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 facesModel = new MutableListModel<CommandFace>();\n\n  // tslint:disable-next-line:no-input-rename\n  @Input('faces') @StoreInListModel('facesModel')\n  _rawFaces: CommandFace[];\n\n  @Input()\n  set face(face: CommandFace) {\n    this.facesModel.value = [face];\n  }\n\n  @Input()\n  ignoreIcon = false;\n\n  @Input()\n  ignoreText = false;\n\n  @Input()\n  includeMissingIconInLayout = false;\n\n  readonly faceAdapters: ListModelChain<CommandFace.Adapter>;\n  private activeIcon: ValueModelChain<string>;\n  private activeColor: ValueModelChain<string>;\n\n  @HostBinding('class.hide-icon')\n  get requiresMissingIconInLayout() {\n    return this.includeMissingIconInLayout && !this.activeIcon.value;\n  }\n\n  constructor() {\n    super();\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n    this.faceAdapters = chain(this.facesModel).map(face => new CommandFace.Adapter(face));\n    const activeFace = this.faceAdapters.first();\n    this.activeIcon = activeFace.pluck(\"icon\")\n    this.activeColor = activeFace.pluck(\"color\")\n  }\n\n  ngOnInit() {\n  }\n\n  shouldIncludeIcon(face: CommandFace.Adapter) {\n    return (!this.ignoreIcon && face.icon) || this.includeMissingIconInLayout;\n  }\n\n  hasIconStart(face:CommandFace.Adapter): boolean {\n    return this.shouldIncludeIcon(face) && (!face.iconPosition || face.iconPosition === CommandFace.Position.START);\n  }\n\n  hasIconEnd(face:CommandFace.Adapter): boolean {\n    return this.shouldIncludeIcon(face) && face.iconPosition === CommandFace.Position.END;\n  }\n\n  @HostBinding('attr.color')\n  get color(): string {\n    return this.activeColor.value;\n  }\n\n}\n"]}

package/esm2015/lib/components/commands/command-face/command-face.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"CommandFaceComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../disposable-component","name":"DisposableComponent","line":30,"character":45},"arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":24,"character":1},"arguments":[{"selector":"aup-command-face","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":28,"character":17},"member":"None"},"template":"<div class=\"face-container\" *ngFor=\"let face of faceAdapters.value\">\n  <aup-icon *ngIf=\"hasIconStart(face)\" [icon]=\"face.icon\"></aup-icon>\n  <span *ngIf=\"face.text\">{{face.text}}</span>\n  <aup-icon *ngIf=\"hasIconEnd(face)\" [icon]=\"face.icon\"></aup-icon>\n</div>\n","styles":["aup-command-face{--icon-gap:var(--aup-command-face-icon-gap);display:inline-grid}aup-command-face>.face-container{grid-column:1;grid-row:1;display:inline-flex;flex-direction:row;align-items:center}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}aup-command-face.start{justify-items:self-start}aup-command-face.end{justify-items:self-end}"]}]}],"members":{"_rawFaces":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["faces"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInListModel","line":35,"character":19},"arguments":["facesModel"]}]}],"ignoreIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"ignoreText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":41,"character":3}}]}],"includeMissingIconInLayout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"requiresMissingIconInLayout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":51,"character":3},"arguments":["class.hide-icon"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"shouldIncludeIcon":[{"__symbolic":"method"}],"hasIconStart":[{"__symbolic":"method"}],"hasIconEnd":[{"__symbolic":"method"}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":80,"character":3},"arguments":["attr.color"]}]}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"CommandFaceComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../disposable-component","name":"DisposableComponent","line":30,"character":45},"arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":24,"character":1},"arguments":[{"selector":"aup-command-face","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":28,"character":17},"member":"None"},"template":"<div class=\"face-container\" *ngFor=\"let face of faceAdapters.value\">\n  <aup-icon *ngIf=\"hasIconStart(face)\" [icon]=\"face.icon\"></aup-icon>\n  <span *ngIf=\"face.text\">{{face.text}}</span>\n  <aup-icon *ngIf=\"hasIconEnd(face)\" [icon]=\"face.icon\"></aup-icon>\n</div>\n","styles":["aup-command-face{--icon-gap: var(--aup-command-face-icon-gap);display:inline-grid}aup-command-face>.face-container{grid-column:1;grid-row:1;display:inline-flex;flex-direction:row;align-items:center}aup-command-face>.face-container:not(:first-child){visibility:hidden}aup-command-face>.face-container *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}aup-command-face.centered{justify-items:center}aup-command-face.start{justify-items:self-start}aup-command-face.end{justify-items:self-end}\n"]}]}],"members":{"_rawFaces":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":35,"character":3},"arguments":["faces"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInListModel","line":35,"character":19},"arguments":["facesModel"]}]}],"face":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":38,"character":3}}]}],"ignoreIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":43,"character":3}}]}],"ignoreText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":46,"character":3}}]}],"includeMissingIconInLayout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}}]}],"requiresMissingIconInLayout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":56,"character":3},"arguments":["class.hide-icon"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"shouldIncludeIcon":[{"__symbolic":"method"}],"hasIconStart":[{"__symbolic":"method"}],"hasIconEnd":[{"__symbolic":"method"}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":85,"character":3},"arguments":["attr.color"]}]}]}}}}]

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

@@ -12,7 +12,7 @@ export class AbstractPopupMenuComponent extends PopupAwareComponent {
     constructor(element, parent) {
         super(element, parent);
         this._unorderedChildren = new MutableListModel();
-        this.faceModelDelegate = new DelegatingValueModel();
+        this.faceModelDelegate = this.registerDisposable(new DelegatingValueModel());
         this.xPosition = 'after';
         this.yPosition = 'below';
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);

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

@@ -1 +1 @@
-{"version":3,"file":"abstract-popup-menu.component.js","sourceRoot":"","sources":["../../../../../../../../../libs/angular-ui-powerups/src/lib/components/commands/group/popup-menu/abstract-popup-menu.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  AfterContentChecked,\n  Component,\n  ElementRef,\n  HostListener,\n  Inject,\n  Input,\n  QueryList,\n  ViewChildren\n} from '@angular/core';\nimport { MatMenuTrigger } from '@angular/material/menu';\n\nimport {\n  DelegatingValueModel,\n  Disposable,\n  Dsl,\n  ListModelChain,\n  MutableListModel, StoreInValueModel,\n  Trace, TrackExternal, ValueModel,\n  ValueModelChain\n} from '@coolon/pectin';\nimport { CommandFace } from '../../command-face';\nimport { PopupAwareComponent } from '../popup-aware.component';\nimport { POPUP_CONTAINER, PopupContainer } from '../popup-container';\n\n/**\n *\n */\n@Component({\n  selector: 'aup-abstract-popup-menu',\n  template: '',\n  styleUrls: []\n})\nexport class AbstractPopupMenuComponent extends PopupAwareComponent implements PopupContainer, AfterContentChecked {\n\n  private _unorderedChildren = new MutableListModel<PopupAwareComponent>();\n\n  protected readonly faceModelDelegate = new DelegatingValueModel<CommandFace>();\n  private faceAdapterModel: ValueModelChain<CommandFace.Adapter>;\n\n  @Input()\n  xPosition: 'before' | 'after' = 'after';\n\n  @Input()\n  yPosition: 'above' | 'below' = 'below';\n\n  @ViewChildren(MatMenuTrigger)\n  triggers: QueryList<MatMenuTrigger>;\n\n  @Input()\n  @StoreInValueModel(\"enabledModel\")\n  enabled: boolean;\n\n  @Input()\n  @TrackExternal({defaultValue: true})\n  enabledModel: ValueModel<boolean>;\n\n\n  readonly children: ListModelChain<PopupAwareComponent>;\n\n  constructor(element: ElementRef, @Inject(POPUP_CONTAINER) parent?: PopupContainer) {\n    super(element, parent);\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n    // group.faceListModel = chain(this.faceModel).mapToList(face => [face]);\n\n    this.faceAdapterModel = chain(this.faceModelDelegate).map(f => new CommandFace.Adapter(f));\n\n    this.children = chain(this._unorderedChildren).sortBy('componentIndex');\n  }\n\n  ngAfterContentChecked(): void {\n    // force the list to re-order as the child indicies may have changed.\n    this._unorderedChildren.value = [...this._unorderedChildren.value]\n  }\n\n\n  get faceAdapter(): CommandFace.Adapter {\n    if (!this.faceAdapterModel) {\n      console.error(\"Somehow faceAdapterModel is nil -- set a break point here and let me know what's going on\")\n    }\n    return this.faceAdapterModel?.value ?? new CommandFace.Adapter(undefined);\n  }\n\n  isRoot() {\n    return !this.parent;\n  }\n\n  // @Trace()\n  register(component: PopupAwareComponent) {\n    this._unorderedChildren.push(component);\n    return Disposable.disposableThatRuns(() => {\n      this._unorderedChildren.remove(component);\n    });\n  }\n\n  onCommandFired() {\n    this.triggers.forEach(trigger => {\n      if (trigger.menuOpen) {\n        trigger.closeMenu();\n      }\n    });\n  }\n\n  getFace(): CommandFace | undefined {\n    return this.faceAdapter.face;\n  }\n\n}\n"]}
+{"version":3,"file":"abstract-popup-menu.component.js","sourceRoot":"","sources":["../../../../../../../../../libs/angular-ui-powerups/src/lib/components/commands/group/popup-menu/abstract-popup-menu.component.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  AfterContentChecked,\n  Component,\n  ElementRef,\n  HostListener,\n  Inject,\n  Input,\n  QueryList,\n  ViewChildren\n} from '@angular/core';\nimport { MatMenuTrigger } from '@angular/material/menu';\n\nimport {\n  DelegatingValueModel,\n  Disposable,\n  Dsl,\n  ListModelChain,\n  MutableListModel, StoreInValueModel,\n  Trace, TrackExternal, ValueModel,\n  ValueModelChain\n} from '@coolon/pectin';\nimport { CommandFace } from '../../command-face';\nimport { PopupAwareComponent } from '../popup-aware.component';\nimport { POPUP_CONTAINER, PopupContainer } from '../popup-container';\n\n/**\n *\n */\n@Component({\n  selector: 'aup-abstract-popup-menu',\n  template: '',\n  styleUrls: []\n})\nexport class AbstractPopupMenuComponent extends PopupAwareComponent implements PopupContainer, AfterContentChecked {\n\n  private _unorderedChildren = new MutableListModel<PopupAwareComponent>();\n\n  protected readonly faceModelDelegate = this.registerDisposable(new DelegatingValueModel<CommandFace>());\n  private faceAdapterModel: ValueModelChain<CommandFace.Adapter>;\n\n  @Input()\n  xPosition: 'before' | 'after' = 'after';\n\n  @Input()\n  yPosition: 'above' | 'below' = 'below';\n\n  @ViewChildren(MatMenuTrigger)\n  triggers: QueryList<MatMenuTrigger>;\n\n  @Input()\n  @StoreInValueModel(\"enabledModel\")\n  enabled: boolean;\n\n  @Input()\n  @TrackExternal({defaultValue: true})\n  enabledModel: ValueModel<boolean>;\n\n\n  readonly children: ListModelChain<PopupAwareComponent>;\n\n  constructor(element: ElementRef, @Inject(POPUP_CONTAINER) parent?: PopupContainer) {\n    super(element, parent);\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n    // group.faceListModel = chain(this.faceModel).mapToList(face => [face]);\n\n    this.faceAdapterModel = chain(this.faceModelDelegate).map(f => new CommandFace.Adapter(f));\n\n    this.children = chain(this._unorderedChildren).sortBy('componentIndex');\n  }\n\n  ngAfterContentChecked(): void {\n    // force the list to re-order as the child indicies may have changed.\n    this._unorderedChildren.value = [...this._unorderedChildren.value]\n  }\n\n\n  get faceAdapter(): CommandFace.Adapter {\n    if (!this.faceAdapterModel) {\n      console.error(\"Somehow faceAdapterModel is nil -- set a break point here and let me know what's going on\")\n    }\n    return this.faceAdapterModel?.value ?? new CommandFace.Adapter(undefined);\n  }\n\n  isRoot() {\n    return !this.parent;\n  }\n\n  // @Trace()\n  register(component: PopupAwareComponent) {\n    this._unorderedChildren.push(component);\n    return Disposable.disposableThatRuns(() => {\n      this._unorderedChildren.remove(component);\n    });\n  }\n\n  onCommandFired() {\n    this.triggers.forEach(trigger => {\n      if (trigger.menuOpen) {\n        trigger.closeMenu();\n      }\n    });\n  }\n\n  getFace(): CommandFace | undefined {\n    return this.faceAdapter.face;\n  }\n\n}\n"]}

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

@@ -11,7 +11,7 @@ import { PopupMenuComponent } from '../popup-menu.component';
 export class PopupMenuRendererComponent extends DisposableComponent {
     constructor() {
         super();
-        this._childList = new DelegatingListModel();
+        this._childList = this.registerDisposable(new DelegatingListModel());
         this.commandFired = new EventEmitter();
         this.TrackBy = TrackBy;
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);

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

@@ -1 +1 @@
-{"version":3,"file":"popup-menu-renderer.component.js","sourceRoot":"","sources":["../../../../../../../../../../libs/angular-ui-powerups/src/lib/components/commands/group/popup-menu/popup-menu-renderer/popup-menu-renderer.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Input, Output, QueryList, ViewChild, ViewChildren } from '@angular/core';\nimport { MatMenu, MatMenuTrigger } from '@angular/material/menu';\nimport { Command, Constant, DelegatingListModel, Dsl, ValueModel } from '@coolon/pectin';\nimport { DisposableComponent } from '../../../../disposable-component';\nimport { TrackBy } from '../../../../track-by';\nimport { CommandFace } from '../../../command-face';\nimport { CommandComponent } from '../../../command/command.component';\nimport { SeparatorComponent } from '../../../separator.component';\nimport { PopupAwareComponent } from '../../popup-aware.component';\nimport { AbstractPopupMenuComponent } from '../abstract-popup-menu.component';\nimport { PopupMenuComponent } from '../popup-menu.component';\n\n@Component({\n  selector: 'aup-popup-menu-renderer',\n  templateUrl: './popup-menu-renderer.component.html'\n})\nexport class PopupMenuRendererComponent extends DisposableComponent {\n\n  private _parentComponent: PopupMenuComponent;\n\n  private _childList = new DelegatingListModel<PopupAwareComponent>();\n\n  @Input()\n  get parent(): PopupMenuComponent {\n    return this._parentComponent;\n  }\n\n  set parent(comp: PopupMenuComponent) {\n    this._parentComponent = comp;\n    this._childList.setDelegate(comp.children);\n  }\n\n  @ViewChild('menu', { static: true })\n  menuComponent: MatMenu;\n\n  @Output()\n  commandFired = new EventEmitter();\n\n  @ViewChildren(MatMenuTrigger)\n  triggers: QueryList<MatMenuTrigger>;\n\n  readonly hasMixedIcons: ValueModel<boolean>;\n  readonly commandProxy: Command<unknown>;\n\n  TrackBy = TrackBy;\n\n  constructor() {\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    const faces = chain(this._childList).map(child => {\n      return child.getFace();\n    }).rejectNil();\n    const icons = faces.select(face => !!CommandFace.getIconOf(face));\n    const iconCount = icons.count();\n    const totalFaces = faces.count();\n    this.hasMixedIcons = valueOf.all(\n      iconCount.isGreaterThan(0),\n      totalFaces.doesNotEqual(iconCount)\n    ).areTruthy();\n  }\n\n  get children(): PopupAwareComponent[] {\n    return this.parent.children.value;\n  }\n\n  executeCommand(data: PopupAwareComponent) {\n    if (this.isCommand(data)) {\n      data.command.execute().finally(() => {\n        this.commandFired.emit();\n      });\n    }\n  }\n\n  isCommandEnabled(data: PopupAwareComponent) {\n    return this.isCommand(data) && data.command.enabled.value\n  }\n\n  // @Trace()\n  onCommandFired() {\n    this.commandFired.emit();\n    this.triggers.forEach(trigger => {\n      if (trigger.menuOpen) {\n        trigger.closeMenu();\n      }\n    });\n  }\n\n  isCommand(child: any): child is CommandComponent {\n    return child instanceof CommandComponent;\n  }\n\n  isPopupMenu(child: any): child is AbstractPopupMenuComponent {\n    return child instanceof AbstractPopupMenuComponent;\n  }\n\n  isPopupMenuEnabled(child: any): child is AbstractPopupMenuComponent {\n    return this.isPopupMenu(child) && child.enabled\n  }\n\n  isSeparator(child: any): child is SeparatorComponent {\n    return child instanceof SeparatorComponent;\n  }\n\n  getTooltip(child: any) {\n    return this.isCommand(child) ? CommandFace.getTooltipOf(child.face) : undefined;\n  }\n\n  getFaces(child: PopupAwareComponent) {\n    return this.isCommand(child) ?\n      child.faces.value :\n      this.isPopupMenu(child) ?\n        [child.faceAdapter.face] :\n        undefined;\n  }\n}\n\n\n"]}
+{"version":3,"file":"popup-menu-renderer.component.js","sourceRoot":"","sources":["../../../../../../../../../../libs/angular-ui-powerups/src/lib/components/commands/group/popup-menu/popup-menu-renderer/popup-menu-renderer.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, Input, Output, QueryList, ViewChild, ViewChildren } from '@angular/core';\nimport { MatMenu, MatMenuTrigger } from '@angular/material/menu';\nimport { Command, Constant, DelegatingListModel, Dsl, ValueModel } from '@coolon/pectin';\nimport { DisposableComponent } from '../../../../disposable-component';\nimport { TrackBy } from '../../../../track-by';\nimport { CommandFace } from '../../../command-face';\nimport { CommandComponent } from '../../../command/command.component';\nimport { SeparatorComponent } from '../../../separator.component';\nimport { PopupAwareComponent } from '../../popup-aware.component';\nimport { AbstractPopupMenuComponent } from '../abstract-popup-menu.component';\nimport { PopupMenuComponent } from '../popup-menu.component';\n\n@Component({\n  selector: 'aup-popup-menu-renderer',\n  templateUrl: './popup-menu-renderer.component.html'\n})\nexport class PopupMenuRendererComponent extends DisposableComponent {\n\n  private _parentComponent: PopupMenuComponent;\n\n  private _childList = this.registerDisposable(new DelegatingListModel<PopupAwareComponent>());\n\n  @Input()\n  get parent(): PopupMenuComponent {\n    return this._parentComponent;\n  }\n\n  set parent(comp: PopupMenuComponent) {\n    this._parentComponent = comp;\n    this._childList.setDelegate(comp.children);\n  }\n\n  @ViewChild('menu', { static: true })\n  menuComponent: MatMenu;\n\n  @Output()\n  commandFired = new EventEmitter();\n\n  @ViewChildren(MatMenuTrigger)\n  triggers: QueryList<MatMenuTrigger>;\n\n  readonly hasMixedIcons: ValueModel<boolean>;\n  readonly commandProxy: Command<unknown>;\n\n  TrackBy = TrackBy;\n\n  constructor() {\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    const faces = chain(this._childList).map(child => {\n      return child.getFace();\n    }).rejectNil();\n    const icons = faces.select(face => !!CommandFace.getIconOf(face));\n    const iconCount = icons.count();\n    const totalFaces = faces.count();\n    this.hasMixedIcons = valueOf.all(\n      iconCount.isGreaterThan(0),\n      totalFaces.doesNotEqual(iconCount)\n    ).areTruthy();\n  }\n\n  get children(): PopupAwareComponent[] {\n    return this.parent.children.value;\n  }\n\n  executeCommand(data: PopupAwareComponent) {\n    if (this.isCommand(data)) {\n      data.command.execute().finally(() => {\n        this.commandFired.emit();\n      });\n    }\n  }\n\n  isCommandEnabled(data: PopupAwareComponent) {\n    return this.isCommand(data) && data.command.enabled.value\n  }\n\n  // @Trace()\n  onCommandFired() {\n    this.commandFired.emit();\n    this.triggers.forEach(trigger => {\n      if (trigger.menuOpen) {\n        trigger.closeMenu();\n      }\n    });\n  }\n\n  isCommand(child: any): child is CommandComponent {\n    return child instanceof CommandComponent;\n  }\n\n  isPopupMenu(child: any): child is AbstractPopupMenuComponent {\n    return child instanceof AbstractPopupMenuComponent;\n  }\n\n  isPopupMenuEnabled(child: any): child is AbstractPopupMenuComponent {\n    return this.isPopupMenu(child) && child.enabled\n  }\n\n  isSeparator(child: any): child is SeparatorComponent {\n    return child instanceof SeparatorComponent;\n  }\n\n  getTooltip(child: any) {\n    return this.isCommand(child) ? CommandFace.getTooltipOf(child.face) : undefined;\n  }\n\n  getFaces(child: PopupAwareComponent) {\n    return this.isCommand(child) ?\n      child.faces.value :\n      this.isPopupMenu(child) ?\n        [child.faceAdapter.face] :\n        undefined;\n  }\n}\n\n\n"]}

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

@@ -26,7 +26,7 @@ ToolBarComponent.decorators = [
                 selector: 'aup-tool-bar',
                 template: '<div class="toolbar-content"><ng-content></ng-content></div>',
                 encapsulation: ViewEncapsulation.None,
-                styles: [":host{display:inline-block}.toolbar-content{display:inline-flex;flex-direction:row;align-items:center}.toolbar-content>aup-separator{align-self:stretch;margin:4px 0 4px 8px}.toolbar-content>aup-flex{flex:1}.toolbar-content>*+*{margin-left:8px}"]
+                styles: [":host{display:inline-block}.toolbar-content{display:inline-flex;flex-direction:row;align-items:center}.toolbar-content>aup-separator{align-self:stretch;margin:4px 0 4px 8px}.toolbar-content>aup-flex{flex:1}.toolbar-content>*+*{margin-left:8px}\n"]
             },] }
 ];
 ToolBarComponent.ctorParameters = () => [];