@coolon/angular-ui-powerups 3.5.1 → 3.5.2

package/cypress/package.json

@@ -1,7 +1,7 @@
 {
   "peerDependencies": {
     "cypress": "^5.6.0",
-    "@coolon/typescript-utilities": "^2.0.2"
+    "@coolon/typescript-utilities": "^2.2.0"
   },
   "main": "../bundles/coolon-angular-ui-powerups-cypress.umd.js",
   "module": "../fesm2015/coolon-angular-ui-powerups-cypress.js",

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

@@ -1,5 +1,5 @@
 /**
  * Generated bundle index. Do not edit.
  */
-export * from './public_api';
+export * from './public-api';
 //# sourceMappingURL=coolon-angular-ui-powerups.js.map

package/esm2015/coolon-angular-ui-powerups.js.map

@@ -1 +1 @@
-{"version":3,"file":"coolon-angular-ui-powerups.js","sourceRoot":"","sources":["../../../../libs/angular-ui-powerups/src/coolon-angular-ui-powerups.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,cAAc,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"]}
+{"version":3,"file":"coolon-angular-ui-powerups.js","sourceRoot":"","sources":["../../../../libs/angular-ui-powerups/src/coolon-angular-ui-powerups.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,cAAc,cAAc,CAAC","sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"]}

package/esm2015/coolon-angular-ui-powerups.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./public_api"}]}]
+[{"__symbolic":"module","version":4,"metadata":{},"exports":[{"from":"./public-api"}]}]

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

@@ -67,7 +67,7 @@ export class CardContainerComponent extends DisposableComponent {
 CardContainerComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-card-container',
-                template: "<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\" [face]=\"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\n</div>\n",
+                template: "<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\n</div>\n",
                 styles: [":root{--aup-default-background:#fff;--aup-default-padding:var(--default-padding,18px)}.router-outlet-container>*{bottom:0;left:0;position:absolute;right:0;top:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context,.dialog-interaction-context mat-dialog-container{max-height:95vh!important;max-width:95vw!important}.dialog-interaction-context mat-dialog-container{padding:0}.activity-outlet-wrapper{align-items:stretch;display:flex;flex-direction:column}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{border-bottom:0;padding-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap,24px);--resolved-row-hover-background-color:var(--row-hover-background-color,rgba(0,0,0,0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{flex:1;padding-left:var(--default-column-gap)}:root{--aup-command-face-icon-gap:8px;--aup-fa-icon-width:18px;--aup-icon-width:24px}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width))/2);position:relative}aup-icon fa-icon .svg-inline--fa{height:var(--aup-fa-icon-width)!important;left:var(--fa-icon-offset);position:absolute;top:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-background:var(--card-background,#fcfcfb);--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-width:var(--card-width,300px);background:var(--resolved-card-background);display:block;flex:1}.card-container{box-sizing:border-box;display:-ms-grid;display:grid;grid-gap:var(--resolved-card-gap);grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(var(--resolved-card-min-height),var(--resolved-card-height)));max-width:100%;min-height:calc(var(--resolved-card-height) + 2*var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2*var(--resolved-card-gap));padding:var(--resolved-card-gap);width:calc((var(--resolved-card-width) + var(--resolved-card-gap))*2 + var(--grid-gap))}.add-card-container{align-items:center;background-color:hsla(0,0%,100%,.8);border:2px dashed rgba(0,0,0,.1);border-radius:6px;box-sizing:border-box;color:rgba(0,0,0,.54);cursor:pointer;display:flex;flex-direction:column;font-weight:300;height:var(--resolved-card-height);justify-content:center;min-height:var(--resolved-card-min-height);transition:all .28s cubic-bezier(.4,0,.2,1);width:var(--resolved-card-width)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{background-color:#fff;border-color:transparent;color:rgba(0,0,0,.54);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{align-items:stretch;display:flex;flex-direction:column;height:var(--resolved-card-height);justify-content:stretch;width:var(--resolved-card-width)}"]
             },] }
 ];

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

@@ -1 +1 @@
-{"version":3,"file":"card-container.component.js","sourceRoot":"","sources":["../../../../../../../libs/angular-ui-powerups/src/lib/components/card-container/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;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AAMH,MAAM,OAAO,sBAAuB,SAAQ,mBAAmB;IAY7D;QACE,KAAK,EAAE,CAAA;IACT,CAAC;IAED,QAAQ;IACR,CAAC;;;YAtBF,SAAS,SAAC;gBACT,QAAQ,EAAE,oBAAoB;gBAC9B,+fAA8C;;aAE/C;;;;6BAGE,KAAK;0BAIL,KAAK;8BAGL,YAAY,SAAC,iBAAiB;;AAL/B;IADC,aAAa,EAAE;8BACA,OAAO;8DAAM","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/**\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 * // 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-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 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"]}
+{"version":3,"file":"card-container.component.js","sourceRoot":"","sources":["../../../../../../../libs/angular-ui-powerups/src/lib/components/card-container/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;AAE9D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AAMH,MAAM,OAAO,sBAAuB,SAAQ,mBAAmB;IAY7D;QACE,KAAK,EAAE,CAAA;IACT,CAAC;IAED,QAAQ;IACR,CAAC;;;YAtBF,SAAS,SAAC;gBACT,QAAQ,EAAE,oBAAoB;gBAC9B,kgBAA8C;;aAE/C;;;;6BAGE,KAAK;0BAIL,KAAK;8BAGL,YAAY,SAAC,iBAAiB;;AAL/B;IADC,aAAa,EAAE;8BACA,OAAO;8DAAM","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/**\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 * // 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-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 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/card-container/card-container.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"CardContainerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../disposable-component","name":"DisposableComponent","line":64,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":59,"character":1},"arguments":[{"selector":"aup-card-container","template":"<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\" [face]=\"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\n</div>\n","styles":[":root{--aup-default-background:#fff;--aup-default-padding:var(--default-padding,18px)}.router-outlet-container>*{bottom:0;left:0;position:absolute;right:0;top:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context,.dialog-interaction-context mat-dialog-container{max-height:95vh!important;max-width:95vw!important}.dialog-interaction-context mat-dialog-container{padding:0}.activity-outlet-wrapper{align-items:stretch;display:flex;flex-direction:column}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{border-bottom:0;padding-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap,24px);--resolved-row-hover-background-color:var(--row-hover-background-color,rgba(0,0,0,0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{flex:1;padding-left:var(--default-column-gap)}:root{--aup-command-face-icon-gap:8px;--aup-fa-icon-width:18px;--aup-icon-width:24px}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width))/2);position:relative}aup-icon fa-icon .svg-inline--fa{height:var(--aup-fa-icon-width)!important;left:var(--fa-icon-offset);position:absolute;top:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-background:var(--card-background,#fcfcfb);--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-width:var(--card-width,300px);background:var(--resolved-card-background);display:block;flex:1}.card-container{box-sizing:border-box;display:-ms-grid;display:grid;grid-gap:var(--resolved-card-gap);grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(var(--resolved-card-min-height),var(--resolved-card-height)));max-width:100%;min-height:calc(var(--resolved-card-height) + 2*var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2*var(--resolved-card-gap));padding:var(--resolved-card-gap);width:calc((var(--resolved-card-width) + var(--resolved-card-gap))*2 + var(--grid-gap))}.add-card-container{align-items:center;background-color:hsla(0,0%,100%,.8);border:2px dashed rgba(0,0,0,.1);border-radius:6px;box-sizing:border-box;color:rgba(0,0,0,.54);cursor:pointer;display:flex;flex-direction:column;font-weight:300;height:var(--resolved-card-height);justify-content:center;min-height:var(--resolved-card-min-height);transition:all .28s cubic-bezier(.4,0,.2,1);width:var(--resolved-card-width)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{background-color:#fff;border-color:transparent;color:rgba(0,0,0,.54);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{align-items:stretch;display:flex;flex-direction:column;height:var(--resolved-card-height);justify-content:stretch;width:var(--resolved-card-width)}"]}]}],"members":{"addCardCommand":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":67,"character":3}}]}],"addCardFace":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":3}}]}],"addCardTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":73,"character":3},"arguments":["addCardTemplate"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"CardContainerComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../disposable-component","name":"DisposableComponent","line":64,"character":44},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":59,"character":1},"arguments":[{"selector":"aup-card-container","template":"<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\n</div>\n","styles":[":root{--aup-default-background:#fff;--aup-default-padding:var(--default-padding,18px)}.router-outlet-container>*{bottom:0;left:0;position:absolute;right:0;top:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context,.dialog-interaction-context mat-dialog-container{max-height:95vh!important;max-width:95vw!important}.dialog-interaction-context mat-dialog-container{padding:0}.activity-outlet-wrapper{align-items:stretch;display:flex;flex-direction:column}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{border-bottom:0;padding-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap,24px);--resolved-row-hover-background-color:var(--row-hover-background-color,rgba(0,0,0,0.05))}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{flex:1;padding-left:var(--default-column-gap)}:root{--aup-command-face-icon-gap:8px;--aup-fa-icon-width:18px;--aup-icon-width:24px}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width))/2);position:relative}aup-icon fa-icon .svg-inline--fa{height:var(--aup-fa-icon-width)!important;left:var(--fa-icon-offset);position:absolute;top:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-background:var(--card-background,#fcfcfb);--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-width:var(--card-width,300px);background:var(--resolved-card-background);display:block;flex:1}.card-container{box-sizing:border-box;display:-ms-grid;display:grid;grid-gap:var(--resolved-card-gap);grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(var(--resolved-card-min-height),var(--resolved-card-height)));max-width:100%;min-height:calc(var(--resolved-card-height) + 2*var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2*var(--resolved-card-gap));padding:var(--resolved-card-gap);width:calc((var(--resolved-card-width) + var(--resolved-card-gap))*2 + var(--grid-gap))}.add-card-container{align-items:center;background-color:hsla(0,0%,100%,.8);border:2px dashed rgba(0,0,0,.1);border-radius:6px;box-sizing:border-box;color:rgba(0,0,0,.54);cursor:pointer;display:flex;flex-direction:column;font-weight:300;height:var(--resolved-card-height);justify-content:center;min-height:var(--resolved-card-min-height);transition:all .28s cubic-bezier(.4,0,.2,1);width:var(--resolved-card-width)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{background-color:#fff;border-color:transparent;color:rgba(0,0,0,.54);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{align-items:stretch;display:flex;flex-direction:column;height:var(--resolved-card-height);justify-content:stretch;width:var(--resolved-card-width)}"]}]}],"members":{"addCardCommand":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":66,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":67,"character":3}}]}],"addCardFace":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":70,"character":3}}]}],"addCardTemplate":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ContentChild","line":73,"character":3},"arguments":["addCardTemplate"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}}}}]

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

@@ -13,23 +13,29 @@ export class CommandComponent extends DisposableComponent {
         this.parent = parent;
         this.CommandFace = CommandFace;
         const { chain, switchOn } = Dsl.disposeWith(this);
-        this.activeFaceModel = switchOn(this.command.busy).toValue(when => {
-            when.equalTo(true, this.busyFaceModel);
-            when.otherwise(this.faceModel);
-        }).otherwise(this.faceModel);
-        this.buttonStyle = chain(this.activeFaceModel).map(f => CommandFace.getStyleOf(f));
-        this.colorModel = chain(this.activeFaceModel).map(f => CommandFace.getColorOf(f));
+        this.faces = chain(this.command.busy).mapToList(busy => {
+            return busy ?
+                [this.busyFaceModel.value, this.faceModel.value] :
+                [this.faceModel.value, this.busyFaceModel.value];
+        }, { allowNil: true, dependsOn: [this.faceModel, this.busyFaceModel] })
+            .rejectNil();
+        this.activeFace = this.faces.first();
+        this.buttonStyle = chain(this.activeFace).map(f => CommandFace.getStyleOf(f));
+        this.colorModel = chain(this.activeFace).map(f => CommandFace.getColorOf(f));
         if (parent) {
-            this.registerDisposable(this.parent.registerCommand(this.command, this.activeFaceModel));
+            this.registerDisposable(this.parent.registerCommand(this.command, this.faces));
         }
     }
+    isActive(face) {
+        return this.activeFace.query().equals(face);
+    }
     ngOnInit() {
     }
 }
 CommandComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-command',
-                template: "<ng-container *ngIf=\"!parent\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <button *ngSwitchCase=\"CommandFace.Style.STROKED\" mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n    <button *ngSwitchCase=\"CommandFace.Style.RAISED\" mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n    <button *ngSwitchDefault mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n  </ng-container>\n</ng-container>\n",
+                template: "<ng-container *ngIf=\"!parent\">\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          <aup-command-face class=\"centered\" [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        <aup-command-face class=\"centered\" [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          <aup-command-face class=\"centered\" [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}button{flex:1}"]
             },] }
 ];

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

@@ -1 +1 @@
-{"version":3,"file":"command.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/components/commands/command/command.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAU,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,iBAAiB,EAAE,aAAa,EAAE,UAAU,EAAmB,MAAM,gBAAgB,CAAC;AAC7G,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtD;;GAEG;AAMH,MAAM,OAAO,gBAAiB,SAAQ,mBAAmB;IAuBvD,YAAiC,MAAqB;QACpD,KAAK,EAAE,CAAC;QADuB,WAAM,GAAN,MAAM,CAAe;QANtD,gBAAW,GAAG,WAAW,CAAC;QAQxB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAClD,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAChE,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YACvC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QACnF,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QAClF,IAAI,MAAM,EAAE;YACV,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;SAC1F;IACH,CAAC;IAGD,QAAQ;IACR,CAAC;;;YA5CF,SAAS,SAAC;gBACT,QAAQ,EAAE,aAAa;gBACvB,ywBAAuC;;aAExC;;;YATQ,YAAY,uBAiCN,QAAQ;;;sBArBpB,KAAK;wBAGL,KAAK;mBAGL,KAAK;4BAGL,KAAK;uBAGL,KAAK;;AAXN;IADU,aAAa,EAAE;8BAChB,OAAO;iDAAU;AAG1B;IADU,aAAa,EAAE;8BACd,UAAU;mDAAc;AAGnC;IADU,iBAAiB,CAAC,WAAW,CAAC;;8CACtB;AAGlB;IADU,aAAa,EAAE;8BACV,UAAU;uDAAc;AAGvC;IADU,iBAAiB,CAAC,eAAe,CAAC;;kDACtB","sourcesContent":["import { Component, Input, OnInit, Optional } from '@angular/core';\n\nimport { Command, Dsl, StoreInValueModel, TrackExternal, ValueModel, ValueModelChain } from '@coolon/pectin';\nimport { DisposableComponent } from '../../disposable-component';\nimport { CommandFace } from '../command-face';\nimport { CommandGroup } from '../group/command-group';\n\n/**\n *\n */\n@Component({\n  selector: 'aup-command',\n  templateUrl: './command.component.html',\n  styleUrls: ['./command.component.scss']\n})\nexport class CommandComponent extends DisposableComponent implements OnInit {\n\n  @Input() @TrackExternal()\n  command: Command<unknown>;\n\n  @Input() @TrackExternal()\n  faceModel: ValueModel<CommandFace>;\n\n  @Input() @StoreInValueModel('faceModel')\n  face: CommandFace;\n\n  @Input() @TrackExternal()\n  busyFaceModel: ValueModel<CommandFace>;\n\n  @Input() @StoreInValueModel('busyFaceModel')\n  busyFace: CommandFace;\n\n  CommandFace = CommandFace;\n\n  readonly activeFaceModel: ValueModelChain<CommandFace>;\n  readonly buttonStyle: ValueModelChain<string>;\n  readonly colorModel: ValueModelChain<'primary' | 'accent' | 'warn' | undefined>;\n\n  constructor(@Optional() readonly parent?: CommandGroup) {\n    super();\n    const { chain, switchOn } = Dsl.disposeWith(this);\n    this.activeFaceModel = switchOn(this.command.busy).toValue(when => {\n      when.equalTo(true, this.busyFaceModel);\n      when.otherwise(this.faceModel);\n    }).otherwise(this.faceModel);\n    this.buttonStyle = chain(this.activeFaceModel).map(f => CommandFace.getStyleOf(f));\n    this.colorModel = chain(this.activeFaceModel).map(f => CommandFace.getColorOf(f));\n    if (parent) {\n      this.registerDisposable(this.parent.registerCommand(this.command, this.activeFaceModel));\n    }\n  }\n\n\n  ngOnInit() {\n  }\n}\n\n"]}
+{"version":3,"file":"command.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/components/commands/command/command.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAU,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,EACL,OAAO,EACP,GAAG,EAEH,iBAAiB,EACjB,aAAa,EAEb,UAAU,EAEX,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtD;;GAEG;AAMH,MAAM,OAAO,gBAAiB,SAAQ,mBAAmB;IAwBvD,YAAiC,MAAqB;QACpD,KAAK,EAAE,CAAC;QADuB,WAAM,GAAN,MAAM,CAAe;QAPtD,gBAAW,GAAG,WAAW,CAAC;QASxB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAClD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE;YACrD,OAAO,IAAI,CAAC,CAAC;gBACX,CAAC,IAAI,CAAC,aAAa,CAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CAAC;gBAClD,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QACrD,CAAC,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,EAAE,CAAC;aACpE,SAAS,EAAE,CAAC;QACf,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;QACrC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9E,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QAC7E,IAAI,MAAM,EAAE;YACV,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;SAChF;IACH,CAAC;IAED,QAAQ,CAAC,IAAiB;QACxB,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC;IAGD,QAAQ;IACR,CAAC;;;YApDF,SAAS,SAAC;gBACT,QAAQ,EAAE,aAAa;gBACvB,oiCAAuC;;aAExC;;;YATQ,YAAY,uBAkCN,QAAQ;;;sBAtBpB,KAAK;wBAGL,KAAK;mBAGL,KAAK;4BAGL,KAAK;uBAGL,KAAK;;AAXN;IADU,aAAa,EAAE;8BAChB,OAAO;iDAAU;AAG1B;IADU,aAAa,EAAE;8BACd,UAAU;mDAAc;AAGnC;IADU,iBAAiB,CAAC,WAAW,CAAC;;8CACtB;AAGlB;IADU,aAAa,EAAE;8BACV,UAAU;uDAAc;AAGvC;IADU,iBAAiB,CAAC,eAAe,CAAC;;kDACtB","sourcesContent":["import { Component, Input, OnInit, Optional } from '@angular/core';\n\nimport {\n  Command,\n  Dsl,\n  ListModelChain,\n  StoreInValueModel,\n  TrackExternal,\n  TransactionObserver,\n  ValueModel,\n  ValueModelChain\n} from '@coolon/pectin';\nimport { DisposableComponent } from '../../disposable-component';\nimport { CommandFace } from '../command-face';\nimport { CommandGroup } from '../group/command-group';\n\n/**\n *\n */\n@Component({\n  selector: 'aup-command',\n  templateUrl: './command.component.html',\n  styleUrls: ['./command.component.scss']\n})\nexport class CommandComponent extends DisposableComponent implements OnInit {\n\n  @Input() @TrackExternal()\n  command: Command<unknown>;\n\n  @Input() @TrackExternal()\n  faceModel: ValueModel<CommandFace>;\n\n  @Input() @StoreInValueModel('faceModel')\n  face: CommandFace;\n\n  @Input() @TrackExternal()\n  busyFaceModel: ValueModel<CommandFace>;\n\n  @Input() @StoreInValueModel('busyFaceModel')\n  busyFace: CommandFace;\n\n  CommandFace = CommandFace;\n\n  readonly faces: ListModelChain<CommandFace>;\n  readonly buttonStyle: ValueModelChain<string>;\n  readonly colorModel: ValueModelChain<'primary' | 'accent' | 'warn' | undefined>;\n  private activeFace: ValueModelChain<CommandFace>;\n\n  constructor(@Optional() readonly parent?: CommandGroup) {\n    super();\n    const { chain, switchOn } = Dsl.disposeWith(this);\n    this.faces = chain(this.command.busy).mapToList(busy => {\n      return busy ?\n        [this.busyFaceModel.value, this.faceModel.value] :\n        [this.faceModel.value, this.busyFaceModel.value];\n    }, { allowNil: true, dependsOn: [this.faceModel, this.busyFaceModel] })\n      .rejectNil();\n    this.activeFace = this.faces.first();\n    this.buttonStyle = chain(this.activeFace).map(f => CommandFace.getStyleOf(f));\n    this.colorModel = chain(this.activeFace).map(f => CommandFace.getColorOf(f));\n    if (parent) {\n      this.registerDisposable(this.parent.registerCommand(this.command, this.faces));\n    }\n  }\n\n  isActive(face: CommandFace): boolean {\n    return this.activeFace.query().equals(face);\n  }\n\n\n  ngOnInit() {\n  }\n}\n\n"]}

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

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"CommandComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../disposable-component","name":"DisposableComponent","line":15,"character":38},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":10,"character":1},"arguments":[{"selector":"aup-command","template":"<ng-container *ngIf=\"!parent\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <button *ngSwitchCase=\"CommandFace.Style.STROKED\" mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n    <button *ngSwitchCase=\"CommandFace.Style.RAISED\" mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n    <button *ngSwitchDefault mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n  </ng-container>\n</ng-container>\n","styles":[":host{display:inline-flex;flex-direction:row;justify-content:stretch}button{flex:1}"]}]}],"members":{"command":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":17,"character":12}}]}],"faceModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":20,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":20,"character":12}}]}],"face":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":23,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":23,"character":12},"arguments":["faceModel"]}]}],"busyFaceModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":26,"character":12}}]}],"busyFace":[{"__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":"StoreInValueModel","line":29,"character":12},"arguments":["busyFaceModel"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":38,"character":15}}]],"parameters":[{"__symbolic":"reference","module":"../group/command-group","name":"CommandGroup","line":38,"character":44}]}],"ngOnInit":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"CommandComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../disposable-component","name":"DisposableComponent","line":24,"character":38},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":19,"character":1},"arguments":[{"selector":"aup-command","template":"<ng-container *ngIf=\"!parent\">\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          <aup-command-face class=\"centered\" [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        <aup-command-face class=\"centered\" [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          <aup-command-face class=\"centered\" [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}button{flex:1}"]}]}],"members":{"command":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":26,"character":12}}]}],"faceModel":[{"__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}}]}],"face":[{"__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":"StoreInValueModel","line":32,"character":12},"arguments":["faceModel"]}]}],"busyFaceModel":[{"__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":"TrackExternal","line":35,"character":12}}]}],"busyFace":[{"__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":"StoreInValueModel","line":38,"character":12},"arguments":["busyFaceModel"]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":48,"character":15}}]],"parameters":[{"__symbolic":"reference","module":"../group/command-group","name":"CommandGroup","line":48,"character":44}]}],"isActive":[{"__symbolic":"method"}],"ngOnInit":[{"__symbolic":"method"}]}}}}]

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

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from "tslib";
 import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
-import { Dsl, MutableValueModel, StoreInValueModel } from '@coolon/pectin';
+import { Dsl, MutableListModel, StoreInListModel } from '@coolon/pectin';
 import { DisposableComponent } from '../../disposable-component';
 import { CommandFace } from '../command-face';
 /**
@@ -16,54 +16,45 @@ import { CommandFace } from '../command-face';
 export class CommandFaceComponent extends DisposableComponent {
     constructor() {
         super();
-        this.faceModel = new MutableValueModel();
+        this.facesModel = new MutableListModel();
         this.ignoreIcon = false;
         this.ignoreText = false;
         this.includeMissingIconInLayout = false;
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        // overkill /c: when all you have is a hammer...
-        const faceAdapter = chain(this.faceModel).map(face => new CommandFace.Adapter(face));
-        this.iconModel = faceAdapter.pluck('icon');
-        this.textModel = faceAdapter.pluck('text');
-        this.positionModel = faceAdapter.pluck('iconPosition');
-        this.colorModel = faceAdapter.pluck('color');
+        this.faceAdapters = chain(this.facesModel).map(face => new CommandFace.Adapter(face));
+        const activeFace = this.faceAdapters.first();
+        this.activeIcon = activeFace.pluck("icon");
+        this.activeColor = activeFace.pluck("color");
     }
     get requiresMissingIconInLayout() {
-        return this.includeMissingIconInLayout && !this.iconModel.value;
+        return this.includeMissingIconInLayout && !this.activeIcon.value;
     }
     ngOnInit() {
     }
-    get iconPosition() {
-        var _a;
-        return (_a = this.positionModel.value) !== null && _a !== void 0 ? _a : CommandFace.Position.START;
+    shouldIncludeIcon(face) {
+        return (!this.ignoreIcon && face.icon) || this.includeMissingIconInLayout;
     }
-    get shouldIncludeIcon() {
-        return (!this.ignoreIcon && this.iconModel.value) || this.includeMissingIconInLayout;
+    hasIconStart(face) {
+        return this.shouldIncludeIcon(face) && (!face.iconPosition || face.iconPosition === CommandFace.Position.START);
     }
-    get iconStart() {
-        return this.shouldIncludeIcon && this.iconPosition === CommandFace.Position.START;
-    }
-    get iconEnd() {
-        return this.shouldIncludeIcon && this.iconPosition === CommandFace.Position.END;
-    }
-    get text() {
-        return this.ignoreText ? undefined : this.textModel.value;
+    hasIconEnd(face) {
+        return this.shouldIncludeIcon(face) && face.iconPosition === CommandFace.Position.END;
     }
     get color() {
-        return this.colorModel.value;
+        return this.activeColor.value;
     }
 }
 CommandFaceComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-command-face',
-                template: "<aup-icon *ngIf=\"iconStart\" [icon]=\"iconModel.value\"></aup-icon>\n<span *ngIf=\"this.text\">{{this.text}}</span>\n<aup-icon *ngIf=\"iconEnd\" [icon]=\"iconModel.value\"></aup-icon>\n",
+                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);align-items:center;display:inline-flex;flex-direction:row}aup-command-face *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}"]
+                styles: ["aup-command-face{--icon-gap:var(--aup-command-face-icon-gap);display:-ms-inline-grid;display:inline-grid}aup-command-face>.face-container{-ms-grid-column:1;-ms-grid-row:1;align-items:center;display:inline-flex;flex-direction:row;grid-column:1;grid-row:1}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}"]
             },] }
 ];
 CommandFaceComponent.ctorParameters = () => [];
 CommandFaceComponent.propDecorators = {
-    _rawFace: [{ type: Input, args: ['face',] }],
+    _rawFaces: [{ type: Input, args: ['faces',] }],
     ignoreIcon: [{ type: Input }],
     ignoreText: [{ type: Input }],
     includeMissingIconInLayout: [{ type: Input }],
@@ -71,7 +62,7 @@ CommandFaceComponent.propDecorators = {
     color: [{ type: HostBinding, args: ['attr.color',] }]
 };
 __decorate([
-    StoreInValueModel('faceModel'),
-    __metadata("design:type", Object)
-], CommandFaceComponent.prototype, "_rawFace", void 0);
+    StoreInListModel('facesModel'),
+    __metadata("design:type", Array)
+], CommandFaceComponent.prototype, "_rawFaces", void 0);
 //# sourceMappingURL=command-face.component.js.map

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,EAAE,GAAG,EAAE,iBAAiB,EAAE,iBAAiB,EAAmB,MAAM,gBAAgB,CAAC;AAC5F,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C;;;;;;;;;GASG;AAOH,MAAM,OAAO,oBAAwB,SAAQ,mBAAmB;IA2B9D;QACE,KAAK,EAAE,CAAC;QA1BO,cAAS,GAAG,IAAI,iBAAiB,EAAe,CAAC;QAOlE,eAAU,GAAG,KAAK,CAAC;QAGnB,eAAU,GAAG,KAAK,CAAC;QAGnB,+BAA0B,GAAG,KAAK,CAAC;QAcjC,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,gDAAgD;QAChD,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,WAAW,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC;QACrF,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAI,CAAC,SAAS,GAAG,WAAW,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QAC3C,IAAI,CAAC,aAAa,GAAG,WAAW,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;QACvD,IAAI,CAAC,UAAU,GAAG,WAAW,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC/C,CAAC;IAnBD,IACI,2BAA2B;QAC7B,OAAO,IAAI,CAAC,0BAA0B,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;IAClE,CAAC;IAkBD,QAAQ;IACR,CAAC;IAED,IAAI,YAAY;;QACd,aAAO,IAAI,CAAC,aAAa,CAAC,KAAK,mCAAI,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC;IAChE,CAAC;IAED,IAAI,iBAAiB;QACnB,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,0BAA0B,CAAC;IACvF,CAAC;IAED,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAC;IACpF,CAAC;IAED,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,iBAAiB,IAAI,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,QAAQ,CAAC,GAAG,CAAC;IAClF,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;IAC5D,CAAC;IAED,IACI,KAAK;QACP,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;IAC/B,CAAC;;;YAtEF,SAAS,SAAC;gBACT,QAAQ,EAAE,kBAAkB;gBAC5B,sMAA4C;gBAE5C,aAAa,EAAE,iBAAiB,CAAC,IAAI;;aACtC;;;;uBAME,KAAK,SAAC,MAAM;yBAGZ,KAAK;yBAGL,KAAK;yCAGL,KAAK;0CAGL,WAAW,SAAC,iBAAiB;oBA4C7B,WAAW,SAAC,YAAY;;AAvDzB;IADgB,iBAAiB,CAAC,WAAW,CAAC;;sDACxB","sourcesContent":["import { Component, HostBinding, Input, OnInit, ViewEncapsulation } from '@angular/core';\nimport { ThemePalette } from '@angular/material/core';\n\nimport { Dsl, MutableValueModel, StoreInValueModel, ValueModelChain } from '@coolon/pectin';\nimport { DisposableComponent } from '../../disposable-component';\nimport { CommandFace } from '../command-face';\n\n/**\n * Custom CSS:\n * @example\n * root: { // globally\n *   --aup-command-face-icon-gap: 8px;\n * }\n * aup-command-face { // per instance\n *   --icon-gap: 4px;\n * }\n */\n@Component({\n  selector: 'aup-command-face',\n  templateUrl: './command-face.component.html',\n  styleUrls: ['./command-face.component.scss'],\n  encapsulation: ViewEncapsulation.None\n})\nexport class CommandFaceComponent<T> extends DisposableComponent implements OnInit {\n\n  private readonly faceModel = new MutableValueModel<CommandFace>();\n\n  // tslint:disable-next-line:no-input-rename\n  @Input('face') @StoreInValueModel('faceModel')\n  _rawFace: CommandFace;\n\n  @Input()\n  ignoreIcon = false;\n\n  @Input()\n  ignoreText = false;\n\n  @Input()\n  includeMissingIconInLayout = false;\n\n  @HostBinding('class.hide-icon')\n  get requiresMissingIconInLayout() {\n    return this.includeMissingIconInLayout && !this.iconModel.value;\n  }\n\n  readonly iconModel: ValueModelChain<string>;\n  private textModel: ValueModelChain<string>;\n  readonly positionModel: ValueModelChain<string>;\n  private colorModel: ValueModelChain<ThemePalette>;\n\n  constructor() {\n    super();\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n    // overkill /c: when all you have is a hammer...\n    const faceAdapter = chain(this.faceModel).map(face => new CommandFace.Adapter(face));\n    this.iconModel = faceAdapter.pluck('icon');\n    this.textModel = faceAdapter.pluck('text');\n    this.positionModel = faceAdapter.pluck('iconPosition');\n    this.colorModel = faceAdapter.pluck('color');\n  }\n\n  ngOnInit() {\n  }\n\n  get iconPosition(): string {\n    return this.positionModel.value ?? CommandFace.Position.START;\n  }\n\n  get shouldIncludeIcon() {\n    return (!this.ignoreIcon && this.iconModel.value) || this.includeMissingIconInLayout;\n  }\n\n  get iconStart(): boolean {\n    return this.shouldIncludeIcon && this.iconPosition === CommandFace.Position.START;\n  }\n\n  get iconEnd(): boolean {\n    return this.shouldIncludeIcon && this.iconPosition === CommandFace.Position.END;\n  }\n\n  get text(): string {\n    return this.ignoreText ? undefined : this.textModel.value;\n  }\n\n  @HostBinding('attr.color')\n  get color(): string {\n    return this.colorModel.value;\n  }\n\n}\n"]}
+{"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"]}

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":23,"character":45},"arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":17,"character":1},"arguments":[{"selector":"aup-command-face","encapsulation":{"__symbolic":"select","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewEncapsulation","line":21,"character":17},"member":"None"},"template":"<aup-icon *ngIf=\"iconStart\" [icon]=\"iconModel.value\"></aup-icon>\n<span *ngIf=\"this.text\">{{this.text}}</span>\n<aup-icon *ngIf=\"iconEnd\" [icon]=\"iconModel.value\"></aup-icon>\n","styles":["aup-command-face{--icon-gap:var(--aup-command-face-icon-gap);align-items:center;display:inline-flex;flex-direction:row}aup-command-face *+*{margin-left:var(--icon-gap)}aup-command-face.hide-icon aup-icon{visibility:hidden}"]}]}],"members":{"_rawFace":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3},"arguments":["face"]},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":28,"character":18},"arguments":["faceModel"]}]}],"ignoreIcon":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":31,"character":3}}]}],"ignoreText":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":34,"character":3}}]}],"includeMissingIconInLayout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":37,"character":3}}]}],"requiresMissingIconInLayout":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":40,"character":3},"arguments":["class.hide-icon"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":84,"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:-ms-inline-grid;display:inline-grid}aup-command-face>.face-container{-ms-grid-column:1;-ms-grid-row:1;align-items:center;display:inline-flex;flex-direction:row;grid-column:1;grid-row:1}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}"]}]}],"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"]}]}]}}}}]

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

@@ -1,6 +1,6 @@
 import { __decorate, __metadata } from "tslib";
 import { Component, Input, SkipSelf } from '@angular/core';
-import { StoreInValueModel, TrackExternal, ValueModel } from '@coolon/pectin';
+import { Dsl, StoreInValueModel, TrackExternal, ValueModel } from '@coolon/pectin';
 import { CommandFace } from '../../command-face';
 import { CommandGroup } from '../command-group';
 export class CommandGroupComponent extends CommandGroup {
@@ -9,7 +9,9 @@ export class CommandGroupComponent extends CommandGroup {
         this.parent = parent;
         this.xPosition = 'after';
         this.yPosition = 'below';
-        this.parent.registerGroup(this, this.faceModel);
+        const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
+        this.faceListModel = chain(this.faceModel).mapToList(v => [v]);
+        this.parent.registerGroup(this, this.faceListModel);
     }
 }
 CommandGroupComponent.decorators = [

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

@@ -1 +1 @@
-{"version":3,"file":"command-group.component.js","sourceRoot":"","sources":["../../../../../../../../../libs/angular-ui-powerups/src/lib/components/commands/group/command-group/command-group.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAY,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC9E,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAUhD,MAAM,OAAO,qBAAsB,SAAQ,YAAY;IAcrD,YAAiC,MAAoB;QACnD,KAAK,CAAC,MAAM,CAAC,CAAC;QADiB,WAAM,GAAN,MAAM,CAAc;QALrD,cAAS,GAAuB,OAAO,CAAC;QAGxC,cAAS,GAAsB,OAAO,CAAC;QAIrC,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC;IAClD,CAAC;;;YAxBF,SAAS,SAAC;gBACT,QAAQ,EAAE,mBAAmB;gBAC7B,QAAQ,EAAE,EAAE;gBACZ,SAAS,EAAC;oBACR,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,qBAAqB,EAAE;iBAC9D;aACF;;;YATQ,YAAY,uBAwBN,QAAQ;;;wBAZpB,KAAK;mBAGL,KAAK;wBAGL,KAAK;wBAGL,KAAK;;AARN;IADU,aAAa,EAAE;8BACd,UAAU;wDAAc;AAGnC;IADU,iBAAiB,CAAC,WAAW,CAAC;;mDACtB","sourcesContent":["import { Component, Input, Optional, SkipSelf } from '@angular/core';\nimport { StoreInValueModel, TrackExternal, ValueModel } from '@coolon/pectin';\nimport { CommandFace } from '../../command-face';\nimport { CommandGroup } from '../command-group';\n\n\n@Component({\n  selector: 'aup-command-group',\n  template: '',\n  providers:[\n    { provide: CommandGroup, useExisting: CommandGroupComponent }\n  ]\n})\nexport class CommandGroupComponent extends CommandGroup {\n\n  @Input() @TrackExternal()\n  faceModel: ValueModel<CommandFace>;\n\n  @Input() @StoreInValueModel('faceModel')\n  face: CommandFace;\n\n  @Input()\n  xPosition: 'before' | 'after' = 'after';\n\n  @Input()\n  yPosition: 'above' | 'below' = 'below';\n\n  constructor(@SkipSelf() readonly parent: CommandGroup) {\n    super(parent);\n    this.parent.registerGroup(this, this.faceModel);\n  }\n}\n\n\n"]}
+{"version":3,"file":"command-group.component.js","sourceRoot":"","sources":["../../../../../../../../../libs/angular-ui-powerups/src/lib/components/commands/group/command-group/command-group.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAY,QAAQ,EAAE,MAAM,eAAe,CAAC;AACrE,OAAO,EAAE,GAAG,EAAa,iBAAiB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC9F,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAWhD,MAAM,OAAO,qBAAsB,SAAQ,YAAY;IAgBrD,YAAiC,MAAoB;QACnD,KAAK,CAAC,MAAM,CAAC,CAAC;QADiB,WAAM,GAAN,MAAM,CAAc;QALrD,cAAS,GAAuB,OAAO,CAAC;QAGxC,cAAS,GAAsB,OAAO,CAAC;QAIrC,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,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAC/D,IAAI,CAAC,MAAM,CAAC,aAAa,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;IACtD,CAAC;;;YA5BF,SAAS,SAAC;gBACT,QAAQ,EAAE,mBAAmB;gBAC7B,QAAQ,EAAE,EAAE;gBACZ,SAAS,EAAC;oBACR,EAAE,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,qBAAqB,EAAE;iBAC9D;aACF;;;YAVQ,YAAY,uBA2BN,QAAQ;;;wBAdpB,KAAK;mBAKL,KAAK;wBAGL,KAAK;wBAGL,KAAK;;AAVN;IADU,aAAa,EAAE;8BACd,UAAU;wDAAc;AAKnC;IADU,iBAAiB,CAAC,WAAW,CAAC;;mDACtB","sourcesContent":["import { Component, Input, Optional, SkipSelf } from '@angular/core';\nimport { Dsl, ListModel, StoreInValueModel, TrackExternal, ValueModel } from '@coolon/pectin';\nimport { CommandFace } from '../../command-face';\nimport { CommandGroup } from '../command-group';\nimport { ViewData } from '../view-data';\n\n\n@Component({\n  selector: 'aup-command-group',\n  template: '',\n  providers:[\n    { provide: CommandGroup, useExisting: CommandGroupComponent }\n  ]\n})\nexport class CommandGroupComponent extends CommandGroup {\n\n  @Input() @TrackExternal()\n  faceModel: ValueModel<CommandFace>;\n\n  readonly faceListModel: ListModel<CommandFace>\n\n  @Input() @StoreInValueModel('faceModel')\n  face: CommandFace;\n\n  @Input()\n  xPosition: 'before' | 'after' = 'after';\n\n  @Input()\n  yPosition: 'above' | 'below' = 'below';\n\n  constructor(@SkipSelf() readonly parent: CommandGroup) {\n    super(parent);\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n    this.faceListModel = chain(this.faceModel).mapToList(v => [v]);\n    this.parent.registerGroup(this, this.faceListModel);\n  }\n}\n\n\n"]}

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

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"CommandGroupComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../command-group","name":"CommandGroup","line":13,"character":43},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"aup-command-group","template":"","providers":[{"provide":{"__symbolic":"reference","module":"../command-group","name":"CommandGroup","line":10,"character":15},"useExisting":{"__symbolic":"reference","name":"CommandGroupComponent"}}]}]}],"members":{"faceModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":15,"character":12}}]}],"face":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":18,"character":12},"arguments":["faceModel"]}]}],"xPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}}]}],"yPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":27,"character":15}}]],"parameters":[{"__symbolic":"reference","module":"../command-group","name":"CommandGroup","line":27,"character":43}]}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"CommandGroupComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../command-group","name":"CommandGroup","line":14,"character":43},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":7,"character":1},"arguments":[{"selector":"aup-command-group","template":"","providers":[{"provide":{"__symbolic":"reference","module":"../command-group","name":"CommandGroup","line":11,"character":15},"useExisting":{"__symbolic":"reference","name":"CommandGroupComponent"}}]}]}],"members":{"faceModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":16,"character":12}}]}],"face":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":21,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":21,"character":12},"arguments":["faceModel"]}]}],"xPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"yPosition":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":27,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":30,"character":15}}]],"parameters":[{"__symbolic":"reference","module":"../command-group","name":"CommandGroup","line":30,"character":43}]}]}}}}]

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

@@ -27,7 +27,7 @@ export class CommandGroupMenuRendererComponent extends DisposableComponent {
 CommandGroupMenuRendererComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-command-group-menu',
-                template: "<mat-menu #menu [xPosition]=\"groupViewData.xPosition\" [yPosition]=\"groupViewData.yPosition\">\n  <ng-container *ngFor=\"let data of children.value; trackBy: TrackBy.byIndex\" >\n    <button *ngIf=\"ViewData.isCommand(data)\"\n            [pectinCommand]=\"getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            mat-menu-item>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"\n                        [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n    </button>\n\n    <ng-container *ngIf=\"ViewData.isGroup(data)\">\n      <button mat-menu-item\n              #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"innerPanel.menuComponent\"\n      >\n        <aup-command-face [face]=\"ViewData.getFace(data)\"\n                          [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #innerPanel\n                              [groupViewData]=\"ViewData.asGroup(data)\"\n                              (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <mat-divider *ngIf=\"ViewData.isSeparator(data)\"></mat-divider>\n\n  </ng-container>\n</mat-menu>\n"
+                template: "<mat-menu #menu [xPosition]=\"groupViewData.xPosition\" [yPosition]=\"groupViewData.yPosition\">\n  <ng-container *ngFor=\"let data of children.value; trackBy: TrackBy.byIndex\" >\n    <button *ngIf=\"ViewData.isCommand(data)\"\n            [pectinCommand]=\"getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            mat-menu-item>\n      <aup-command-face [faces]=\"ViewData.getFaces(data)\"\n                        [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n    </button>\n\n    <ng-container *ngIf=\"ViewData.isGroup(data)\">\n      <button mat-menu-item\n              #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"innerPanel.menuComponent\"\n      >\n        <aup-command-face [faces]=\"ViewData.getFaces(data)\"\n                          [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #innerPanel\n                              [groupViewData]=\"ViewData.asGroup(data)\"\n                              (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <mat-divider *ngIf=\"ViewData.isSeparator(data)\"></mat-divider>\n\n  </ng-container>\n</mat-menu>\n"
             },] }
 ];
 CommandGroupMenuRendererComponent.ctorParameters = () => [

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

@@ -1 +1 @@
-{"version":3,"file":"command-group-menu-renderer.component.js","sourceRoot":"","sources":["../../../../../../../../../libs/angular-ui-powerups/src/lib/components/commands/group/command-group-menu-renderer/command-group-menu-renderer.component.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,SAAS,EACT,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,EACb,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,GAAG,EAAkB,iBAAiB,EAAE,iBAAiB,EAAmB,MAAM,gBAAgB,CAAC;AAC5G,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAMxC,MAAM,OAAO,iCAAkC,SAAQ,mBAAmB;IAwBxE,YAA6C,MAA0C;QACrF,KAAK,EAAE,CAAC;QADmC,WAAM,GAAN,MAAM,CAAoC;QAnBtE,uBAAkB,GAAG,IAAI,iBAAiB,EAAsB,CAAC;QAMlF,iBAAY,GAAG,IAAI,YAAY,EAAE,CAAC;QASzB,aAAQ,GAAG,QAAQ,CAAC;QAE7B,YAAO,GAAG,OAAO,CAAC;QAIhB,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,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;QACrE,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAC7E,CAAC;IAED,UAAU,CAAC,IAAc;QACvB,MAAM,OAAO,GAAG,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAC1C,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACvC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC;QACjE,OAAO,OAAO,CAAC;IACjB,CAAC;;;YAxCF,SAAS,SAAC;gBACT,QAAQ,EAAE,wBAAwB;gBAClC,ivCAA2D;aAC5D;;;YAyBuD,iCAAiC,uBAA1E,QAAQ,YAAI,QAAQ;;;4BAtBhC,SAAS,SAAC,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;4BAKlC,KAAK;2BAGL,MAAM;uBAGN,YAAY,SAAC,cAAc;;AAL5B;IADU,iBAAiB,CAAC,oBAAoB,CAAC;8BAClC,QAAQ,CAAC,SAAS;wEAAC","sourcesContent":["import {\n  Component,\n  EventEmitter,\n  Input,\n  Optional,\n  Output,\n  QueryList,\n  SkipSelf,\n  ViewChild,\n  ViewChildren\n} from '@angular/core';\nimport { MatMenu, MatMenuTrigger } from '@angular/material/menu';\nimport { Dsl, ListModelChain, MutableValueModel, StoreInValueModel, ValueModelChain } from '@coolon/pectin';\nimport { DisposableComponent } from '../../../disposable-component';\nimport { TrackBy } from '../../../track-by';\nimport { Registration } from '../registration';\nimport { ViewData } from '../view-data';\n\n@Component({\n  selector: 'aup-command-group-menu',\n  templateUrl: './command-group-menu-renderer.component.html'\n})\nexport class CommandGroupMenuRendererComponent extends DisposableComponent {\n\n  @ViewChild('menu', { static: true })\n  menuComponent: MatMenu;\n\n  private readonly groupViewDataModel = new MutableValueModel<ViewData.GroupData>();\n\n  @Input() @StoreInValueModel('groupViewDataModel')\n  groupViewData: ViewData.GroupData;\n\n  @Output()\n  commandFired = new EventEmitter();\n\n  @ViewChildren(MatMenuTrigger)\n  triggers: QueryList<MatMenuTrigger>;\n\n  readonly children: ListModelChain<Registration>;\n\n  readonly hasMixedIcons: ValueModelChain<boolean>;\n\n  readonly ViewData = ViewData;\n\n  TrackBy = TrackBy;\n\n  constructor(@Optional() @SkipSelf() readonly parent?: CommandGroupMenuRendererComponent) {\n    super();\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n    this.children = chain(this.groupViewDataModel).pluckList('children');\n    this.hasMixedIcons = chain(this.groupViewDataModel).pluck('hasMixedIcons');\n  }\n\n  getCommand(data: ViewData) {\n    const command = ViewData.getCommand(data);\n    const { when } = Dsl.disposeWith(this);\n    when(command.busy).becomesFalsey(() => this.commandFired.emit());\n    return command;\n  }\n\n}\n\n\n"]}
+{"version":3,"file":"command-group-menu-renderer.component.js","sourceRoot":"","sources":["../../../../../../../../../libs/angular-ui-powerups/src/lib/components/commands/group/command-group-menu-renderer/command-group-menu-renderer.component.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,SAAS,EACT,YAAY,EACZ,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,EACT,QAAQ,EACR,SAAS,EACT,YAAY,EACb,MAAM,eAAe,CAAC;AACvB,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,EAAE,GAAG,EAAkB,iBAAiB,EAAE,iBAAiB,EAAmB,MAAM,gBAAgB,CAAC;AAC5G,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAE5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAMxC,MAAM,OAAO,iCAAkC,SAAQ,mBAAmB;IAwBxE,YAA6C,MAA0C;QACrF,KAAK,EAAE,CAAC;QADmC,WAAM,GAAN,MAAM,CAAoC;QAnBtE,uBAAkB,GAAG,IAAI,iBAAiB,EAAsB,CAAC;QAMlF,iBAAY,GAAG,IAAI,YAAY,EAAE,CAAC;QASzB,aAAQ,GAAG,QAAQ,CAAC;QAE7B,YAAO,GAAG,OAAO,CAAC;QAIhB,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,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;QACrE,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC;IAC7E,CAAC;IAED,UAAU,CAAC,IAAc;QACvB,MAAM,OAAO,GAAG,QAAQ,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;QAC1C,MAAM,EAAE,IAAI,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QACvC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,aAAa,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,CAAC;QACjE,OAAO,OAAO,CAAC;IACjB,CAAC;;;YAxCF,SAAS,SAAC;gBACT,QAAQ,EAAE,wBAAwB;gBAClC,qvCAA2D;aAC5D;;;YAyBuD,iCAAiC,uBAA1E,QAAQ,YAAI,QAAQ;;;4BAtBhC,SAAS,SAAC,MAAM,EAAE,EAAE,MAAM,EAAE,IAAI,EAAE;4BAKlC,KAAK;2BAGL,MAAM;uBAGN,YAAY,SAAC,cAAc;;AAL5B;IADU,iBAAiB,CAAC,oBAAoB,CAAC;8BAClC,QAAQ,CAAC,SAAS;wEAAC","sourcesContent":["import {\n  Component,\n  EventEmitter,\n  Input,\n  Optional,\n  Output,\n  QueryList,\n  SkipSelf,\n  ViewChild,\n  ViewChildren\n} from '@angular/core';\nimport { MatMenu, MatMenuTrigger } from '@angular/material/menu';\nimport { Dsl, ListModelChain, MutableValueModel, StoreInValueModel, ValueModelChain } from '@coolon/pectin';\nimport { DisposableComponent } from '../../../disposable-component';\nimport { TrackBy } from '../../../track-by';\nimport { Registration } from '../registration';\nimport { ViewData } from '../view-data';\n\n@Component({\n  selector: 'aup-command-group-menu',\n  templateUrl: './command-group-menu-renderer.component.html'\n})\nexport class CommandGroupMenuRendererComponent extends DisposableComponent {\n\n  @ViewChild('menu', { static: true })\n  menuComponent: MatMenu;\n\n  private readonly groupViewDataModel = new MutableValueModel<ViewData.GroupData>();\n\n  @Input() @StoreInValueModel('groupViewDataModel')\n  groupViewData: ViewData.GroupData;\n\n  @Output()\n  commandFired = new EventEmitter();\n\n  @ViewChildren(MatMenuTrigger)\n  triggers: QueryList<MatMenuTrigger>;\n\n  readonly children: ListModelChain<Registration>;\n\n  readonly hasMixedIcons: ValueModelChain<boolean>;\n\n  readonly ViewData = ViewData;\n\n  TrackBy = TrackBy;\n\n  constructor(@Optional() @SkipSelf() readonly parent?: CommandGroupMenuRendererComponent) {\n    super();\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n    this.children = chain(this.groupViewDataModel).pluckList('children');\n    this.hasMixedIcons = chain(this.groupViewDataModel).pluck('hasMixedIcons');\n  }\n\n  getCommand(data: ViewData) {\n    const command = ViewData.getCommand(data);\n    const { when } = Dsl.disposeWith(this);\n    when(command.busy).becomesFalsey(() => this.commandFired.emit());\n    return command;\n  }\n\n}\n\n\n"]}

package/esm2015/lib/components/commands/group/command-group-menu-renderer/command-group-menu-renderer.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"CommandGroupMenuRendererComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../../disposable-component","name":"DisposableComponent","line":22,"character":55},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"aup-command-group-menu","template":"<mat-menu #menu [xPosition]=\"groupViewData.xPosition\" [yPosition]=\"groupViewData.yPosition\">\n  <ng-container *ngFor=\"let data of children.value; trackBy: TrackBy.byIndex\" >\n    <button *ngIf=\"ViewData.isCommand(data)\"\n            [pectinCommand]=\"getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            mat-menu-item>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"\n                        [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n    </button>\n\n    <ng-container *ngIf=\"ViewData.isGroup(data)\">\n      <button mat-menu-item\n              #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"innerPanel.menuComponent\"\n      >\n        <aup-command-face [face]=\"ViewData.getFace(data)\"\n                          [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #innerPanel\n                              [groupViewData]=\"ViewData.asGroup(data)\"\n                              (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <mat-divider *ngIf=\"ViewData.isSeparator(data)\"></mat-divider>\n\n  </ng-container>\n</mat-menu>\n"}]}],"members":{"menuComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":24,"character":3},"arguments":["menu",{"static":true}]}]}],"groupViewData":[{"__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":"StoreInValueModel","line":29,"character":12},"arguments":["groupViewDataModel"]}]}],"commandFired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":3}}]}],"triggers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":35,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuTrigger","line":35,"character":16}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":46,"character":15}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":46,"character":27}}]],"parameters":[{"__symbolic":"reference","name":"CommandGroupMenuRendererComponent"}]}],"getCommand":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"CommandGroupMenuRendererComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../../disposable-component","name":"DisposableComponent","line":22,"character":55},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":18,"character":1},"arguments":[{"selector":"aup-command-group-menu","template":"<mat-menu #menu [xPosition]=\"groupViewData.xPosition\" [yPosition]=\"groupViewData.yPosition\">\n  <ng-container *ngFor=\"let data of children.value; trackBy: TrackBy.byIndex\" >\n    <button *ngIf=\"ViewData.isCommand(data)\"\n            [pectinCommand]=\"getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            mat-menu-item>\n      <aup-command-face [faces]=\"ViewData.getFaces(data)\"\n                        [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n    </button>\n\n    <ng-container *ngIf=\"ViewData.isGroup(data)\">\n      <button mat-menu-item\n              #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"innerPanel.menuComponent\"\n      >\n        <aup-command-face [faces]=\"ViewData.getFaces(data)\"\n                          [includeMissingIconInLayout]=\"hasMixedIcons.value\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #innerPanel\n                              [groupViewData]=\"ViewData.asGroup(data)\"\n                              (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <mat-divider *ngIf=\"ViewData.isSeparator(data)\"></mat-divider>\n\n  </ng-container>\n</mat-menu>\n"}]}],"members":{"menuComponent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":24,"character":3},"arguments":["menu",{"static":true}]}]}],"groupViewData":[{"__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":"StoreInValueModel","line":29,"character":12},"arguments":["groupViewDataModel"]}]}],"commandFired":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":3}}]}],"triggers":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChildren","line":35,"character":3},"arguments":[{"__symbolic":"reference","module":"@angular/material/menu","name":"MatMenuTrigger","line":35,"character":16}]}]}],"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Optional","line":46,"character":15}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"SkipSelf","line":46,"character":27}}]],"parameters":[{"__symbolic":"reference","name":"CommandGroupMenuRendererComponent"}]}],"getCommand":[{"__symbolic":"method"}]}}}}]

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

@@ -11,13 +11,14 @@ export class CommandGroupRendererComponent extends DisposableComponent {
         this.ViewData = ViewData;
         this.TrackBy = TrackBy;
         const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);
-        this.childViewDataModels = chain(this.groupViewDataModel).pluckList('children');
+        this.childViewDataModels = chain(this.groupViewDataModel)
+            .pluckList('children');
     }
 }
 CommandGroupRendererComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-command-group-renderer',
-                template: "<ng-template #groupTemplate let-group>\n\n  <ng-container *ngIf=\"ViewData.hasText(group)\" [ngSwitch]=\"ViewData.getStyle(group)\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-stroked-button>\n        <aup-command-face [face]=\"ViewData.getFace(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-raised-button>\n        <aup-command-face [face]=\"ViewData.getFace(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-button>\n        <aup-command-face [face]=\"ViewData.getFace(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!ViewData.hasText(group)\">\n    <button        #trigger=\"matMenuTrigger\"\n                   mat-icon-button\n                   [matMenuTriggerFor]=\"subMenu.menuComponent\"\n\n                   [matTooltip]=\"ViewData.getTooltip(group)\"\n                   [color]=\"ViewData.getColor(group)\"\n    >\n      <aup-command-face [face]=\"ViewData.getFace(group)\"></aup-command-face>\n    </button>\n    <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n  </ng-container>\n\n</ng-template>\n\n\n<ng-template #commandTemplate let-data>\n\n  <ng-container *ngIf=\"ViewData.hasText(data)\" [ngSwitch]=\"ViewData.getStyle(data)\">\n    <button *ngSwitchCase=\"'raised'\"\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-raised-button>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"></aup-command-face>\n    </button>\n    <button *ngSwitchCase=\"'stroked'\"\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-stroked-button>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"></aup-command-face>\n    </button>\n    <button *ngSwitchDefault\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-button>\n      <aup-command-face [face]=\"ViewData.getFace(data)\"></aup-command-face>\n    </button>\n  </ng-container>\n\n  <button *ngIf=\"!ViewData.hasText(data)\"\n          [pectinCommand]=\"ViewData.getCommand(data)\"\n          [matTooltip]=\"ViewData.getTooltip(data)\"\n          [color]=\"ViewData.getColor(data)\"\n          mat-icon-button>\n    <aup-command-face [face]=\"ViewData.getFace(data)\"></aup-command-face>\n  </button>\n\n</ng-template>\n\n\n<ng-template *ngIf=\"renderRootNode\"\n             [ngTemplateOutlet]=\"groupTemplate\"\n             [ngTemplateOutletContext]=\"{ $implicit: groupViewDataModel.value }\">\n</ng-template>\n\n<ng-container *ngIf=\"!renderRootNode\">\n  <ng-container *ngFor=\"let data of this.childViewDataModels.value; trackBy: TrackBy.byIndex\">\n    <ng-template *ngIf=\"ViewData.isGroup(data)\"\n                 [ngTemplateOutlet]=\"groupTemplate\"\n                 [ngTemplateOutletContext]=\"{ $implicit: data }\">\n    </ng-template>\n    <ng-template *ngIf=\"ViewData.isCommand(data)\"\n                 [ngTemplateOutlet]=\"commandTemplate\"\n                 [ngTemplateOutletContext]=\"{ $implicit: data }\">\n    </ng-template>\n\n    <mat-divider *ngIf=\"ViewData.isSeparator(data)\" [vertical]=\"true\"></mat-divider>\n  </ng-container>\n\n</ng-container>\n",
+                template: "<ng-template #groupTemplate let-group>\n\n  <ng-container *ngIf=\"ViewData.hasText(group)\" [ngSwitch]=\"ViewData.getStyle(group)\">\n    <ng-container *ngSwitchCase=\"'stroked'\">\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-stroked-button>\n        <aup-command-face [faces]=\"ViewData.getFaces(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'raised'\">\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-raised-button>\n        <aup-command-face [faces]=\"ViewData.getFaces(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n    <ng-container *ngSwitchDefault>\n      <button #trigger=\"matMenuTrigger\"\n              [matMenuTriggerFor]=\"subMenu.menuComponent\"\n              [matTooltip]=\"ViewData.getTooltip(group)\"\n              [color]=\"ViewData.getColor(group)\"\n              mat-button>\n        <aup-command-face [faces]=\"ViewData.getFaces(group)\"></aup-command-face>\n      </button>\n      <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n    </ng-container>\n\n  </ng-container>\n\n  <ng-container *ngIf=\"!ViewData.hasText(group)\">\n    <button        #trigger=\"matMenuTrigger\"\n                   mat-icon-button\n                   [matMenuTriggerFor]=\"subMenu.menuComponent\"\n\n                   [matTooltip]=\"ViewData.getTooltip(group)\"\n                   [color]=\"ViewData.getColor(group)\"\n    >\n      <aup-command-face [faces]=\"ViewData.getFaces(group)\"></aup-command-face>\n    </button>\n    <aup-command-group-menu #subMenu [groupViewData]=\"group\" (commandFired)=\"trigger.closeMenu()\"></aup-command-group-menu>\n  </ng-container>\n\n</ng-template>\n\n\n<ng-template #commandTemplate let-data>\n\n  <ng-container *ngIf=\"ViewData.hasText(data)\" [ngSwitch]=\"ViewData.getStyle(data)\">\n    <button *ngSwitchCase=\"'raised'\"\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-raised-button>\n      <aup-command-face [faces]=\"ViewData.getFaces(data)\"></aup-command-face>\n    </button>\n    <button *ngSwitchCase=\"'stroked'\"\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-stroked-button>\n      <aup-command-face [faces]=\"ViewData.getFaces(data)\"></aup-command-face>\n    </button>\n    <button *ngSwitchDefault\n            [pectinCommand]=\"ViewData.getCommand(data)\"\n            [matTooltip]=\"ViewData.getTooltip(data)\"\n            [color]=\"ViewData.getColor(data)\"\n            mat-button>\n      <aup-command-face [faces]=\"ViewData.getFaces(data)\"></aup-command-face>\n    </button>\n  </ng-container>\n\n  <button *ngIf=\"!ViewData.hasText(data)\"\n          [pectinCommand]=\"ViewData.getCommand(data)\"\n          [matTooltip]=\"ViewData.getTooltip(data)\"\n          [color]=\"ViewData.getColor(data)\"\n          mat-icon-button>\n    <aup-command-face [faces]=\"ViewData.getFaces(data)\"></aup-command-face>\n  </button>\n\n</ng-template>\n\n\n<ng-template *ngIf=\"renderRootNode\"\n             [ngTemplateOutlet]=\"groupTemplate\"\n             [ngTemplateOutletContext]=\"{ $implicit: groupViewDataModel.value }\">\n</ng-template>\n\n<ng-container *ngIf=\"!renderRootNode\">\n  <ng-container *ngFor=\"let data of this.childViewDataModels.value; trackBy: TrackBy.byIndex\">\n    <ng-template *ngIf=\"ViewData.isGroup(data)\"\n                 [ngTemplateOutlet]=\"groupTemplate\"\n                 [ngTemplateOutletContext]=\"{ $implicit: data }\">\n    </ng-template>\n    <ng-template *ngIf=\"ViewData.isCommand(data)\"\n                 [ngTemplateOutlet]=\"commandTemplate\"\n                 [ngTemplateOutletContext]=\"{ $implicit: data }\">\n    </ng-template>\n\n    <mat-divider *ngIf=\"ViewData.isSeparator(data)\" [vertical]=\"true\"></mat-divider>\n  </ng-container>\n\n</ng-container>\n",
                 styles: [":host{align-items:center;display:inline-flex;flex-direction:row}:host:not(.render-root) mat-divider{-ms-grid-row-align:stretch;align-self:stretch;margin:4px 0}:host:not(.render-root)>*+*{margin-left:8px}:host span.flex{flex:1}"]
             },] }
 ];

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

@@ -1 +1 @@
-{"version":3,"file":"command-group-renderer.component.js","sourceRoot":"","sources":["../../../../../../../../../libs/angular-ui-powerups/src/lib/components/commands/group/command-group-renderer/command-group-renderer.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,GAAG,EAAkB,iBAAiB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACnG,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAO5C,MAAM,OAAO,6BAA8B,SAAQ,mBAAmB;IAkBpE;QACE,KAAK,EAAE,CAAC;QATV,mBAAc,GAAG,IAAI,CAAC;QAEb,aAAQ,GAAG,QAAQ,CAAC;QAI7B,YAAO,GAAG,OAAO,CAAA;QAIf,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,mBAAmB,GAAG,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;IAClF,CAAC;;;YA3BF,SAAS,SAAC;gBACT,QAAQ,EAAE,4BAA4B;gBACtC,wnJAAsD;;aAEvD;;;;iCAGE,KAAK;4BAGL,KAAK;6BAGL,KAAK,YACL,WAAW,SAAC,mBAAmB;;AANhC;IADU,aAAa,EAAE;8BACL,UAAU;yEAAqB;AAGnD;IADU,iBAAiB,CAAC,oBAAoB,CAAC;8BAClC,QAAQ,CAAC,SAAS;oEAAC","sourcesContent":["import { Component, HostBinding, Input } from '@angular/core';\nimport { Dsl, ListModelChain, StoreInValueModel, TrackExternal, ValueModel } from '@coolon/pectin';\nimport { DisposableComponent } from '../../../disposable-component';\nimport { ViewData } from '../view-data';\nimport { TrackBy } from '../../../track-by';\n\n@Component({\n  selector: 'aup-command-group-renderer',\n  templateUrl: './command-group-renderer.component.html',\n  styleUrls: ['./command-group-renderer.component.scss']\n})\nexport class CommandGroupRendererComponent extends DisposableComponent {\n\n  @Input() @TrackExternal()\n  groupViewDataModel: ValueModel<ViewData.GroupData>;\n\n  @Input() @StoreInValueModel('groupViewDataModel')\n  groupViewData: ViewData.GroupData;\n\n  @Input()\n  @HostBinding('class.render-root')\n  renderRootNode = true;\n\n  readonly ViewData = ViewData;\n\n  readonly childViewDataModels: ListModelChain<ViewData>;\n\n  TrackBy = TrackBy\n\n  constructor() {\n    super();\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n    this.childViewDataModels = chain(this.groupViewDataModel).pluckList('children');\n  }\n\n}\n\n\n"]}
+{"version":3,"file":"command-group-renderer.component.js","sourceRoot":"","sources":["../../../../../../../../../libs/angular-ui-powerups/src/lib/components/commands/group/command-group-renderer/command-group-renderer.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC9D,OAAO,EAAE,GAAG,EAAkB,iBAAiB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACnG,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAO5C,MAAM,OAAO,6BAA8B,SAAQ,mBAAmB;IAkBpE;QACE,KAAK,EAAE,CAAC;QATV,mBAAc,GAAG,IAAI,CAAC;QAEb,aAAQ,GAAG,QAAQ,CAAC;QAI7B,YAAO,GAAG,OAAO,CAAA;QAIf,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,mBAAmB,GAAG,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC;aACtD,SAAS,CAAC,UAAU,CAAC,CAAA;IAC1B,CAAC;;;YA5BF,SAAS,SAAC;gBACT,QAAQ,EAAE,4BAA4B;gBACtC,woJAAsD;;aAEvD;;;;iCAGE,KAAK;4BAGL,KAAK;6BAGL,KAAK,YACL,WAAW,SAAC,mBAAmB;;AANhC;IADU,aAAa,EAAE;8BACL,UAAU;yEAAqB;AAGnD;IADU,iBAAiB,CAAC,oBAAoB,CAAC;8BAClC,QAAQ,CAAC,SAAS;oEAAC","sourcesContent":["import { Component, HostBinding, Input } from '@angular/core';\nimport { Dsl, ListModelChain, StoreInValueModel, TrackExternal, ValueModel } from '@coolon/pectin';\nimport { DisposableComponent } from '../../../disposable-component';\nimport { ViewData } from '../view-data';\nimport { TrackBy } from '../../../track-by';\n\n@Component({\n  selector: 'aup-command-group-renderer',\n  templateUrl: './command-group-renderer.component.html',\n  styleUrls: ['./command-group-renderer.component.scss']\n})\nexport class CommandGroupRendererComponent extends DisposableComponent {\n\n  @Input() @TrackExternal()\n  groupViewDataModel: ValueModel<ViewData.GroupData>;\n\n  @Input() @StoreInValueModel('groupViewDataModel')\n  groupViewData: ViewData.GroupData;\n\n  @Input()\n  @HostBinding('class.render-root')\n  renderRootNode = true;\n\n  readonly ViewData = ViewData;\n\n  readonly childViewDataModels: ListModelChain<ViewData>;\n\n  TrackBy = TrackBy\n\n  constructor() {\n    super();\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n    this.childViewDataModels = chain(this.groupViewDataModel)\n      .pluckList('children')\n  }\n\n}\n\n\n"]}