@coolon/angular-ui-powerups 3.16.0-alpha.0 → 3.17.0

package/esm2015/lib/components/forms/string-input/string-input.component.js

@@ -17,7 +17,7 @@ export class StringInputComponent extends AbstractValueInputComponent {
 StringInputComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-string-input',
-                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n",
+                template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <aup-icon *ngIf=\"iconPrefix\" matPrefix [icon]=\"iconPrefix\"></aup-icon>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n",
                 styles: ["button[disabled]{visibility:hidden}"]
             },] }
 ];
@@ -25,7 +25,8 @@ StringInputComponent.ctorParameters = () => [];
 StringInputComponent.propDecorators = {
     autocomplete: [{ type: Input }],
     enableClearModel: [{ type: Input }],
-    enableClear: [{ type: Input }]
+    enableClear: [{ type: Input }],
+    iconPrefix: [{ type: Input }]
 };
 __decorate([
     TrackExternal({ defaultValue: false }),

package/esm2015/lib/components/forms/string-input/string-input.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"string-input.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/components/forms/string-input/string-input.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAU,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,iBAAiB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5F,OAAO,EAAE,2BAA2B,EAAE,MAAM,mCAAmC,CAAC;AAOhF,MAAM,OAAO,oBAAqB,SAAQ,2BAAmC;IAa3E;QACE,KAAK,EAAE,CAAC;QACR,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,OAAO,CAAC,MAAM,CAAC,GAAG,EAAE;YACtC,IAAI,CAAC,mBAAmB,CAAC,KAAK,GAAG,IAAI,CAAC;QACxC,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC;IACxF,CAAC;IAED,QAAQ;IACR,CAAC;;;YA5BF,SAAS,SAAC;gBACT,QAAQ,EAAE,kBAAkB;gBAC5B,g0BAA4C;;aAE7C;;;;2BAGE,KAAK;+BAEL,KAAK;0BAGL,KAAK;;AAFN;IADU,aAAa,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;8BAC9B,UAAU;8DAAU;AAGtC;IADU,iBAAiB,CAAC,kBAAkB,CAAC;;yDAC1B","sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport { Command, Dsl, StoreInValueModel, TrackExternal, ValueModel } from '@coolon/pectin';\nimport { AbstractValueInputComponent } from '../abstract-value-input.component';\n\n@Component({\n  selector: 'aup-string-input',\n  templateUrl: './string-input.component.html',\n  styleUrls: ['./string-input.component.scss']\n})\nexport class StringInputComponent extends AbstractValueInputComponent<string> implements OnInit {\n\n  @Input() autocomplete: string;\n\n  @Input() @TrackExternal({ defaultValue: false })\n  enableClearModel: ValueModel<boolean>;\n\n  @Input() @StoreInValueModel('enableClearModel')\n  enableClear: boolean;\n\n\n  readonly clearCommand: Command<void>;\n\n  constructor() {\n    super();\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n    this.clearCommand = Command.create(() => {\n      this.componentValueModel.value = null;\n    });\n    this.clearCommand.disableWhile(chain.stringValue(this.componentValueModel).isBlank());\n  }\n\n  ngOnInit() {\n  }\n\n}\n"]}
+{"version":3,"file":"string-input.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/components/forms/string-input/string-input.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAU,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,iBAAiB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5F,OAAO,EAAE,2BAA2B,EAAE,MAAM,mCAAmC,CAAC;AAOhF,MAAM,OAAO,oBAAqB,SAAQ,2BAAmC;IAe3E;QACE,KAAK,EAAE,CAAC;QACR,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,OAAO,CAAC,MAAM,CAAC,GAAG,EAAE;YACtC,IAAI,CAAC,mBAAmB,CAAC,KAAK,GAAG,IAAI,CAAC;QACxC,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,YAAY,CAAC,YAAY,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,mBAAmB,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC;IACxF,CAAC;IAED,QAAQ;IACR,CAAC;;;YA9BF,SAAS,SAAC;gBACT,QAAQ,EAAE,kBAAkB;gBAC5B,84BAA4C;;aAE7C;;;;2BAGE,KAAK;+BAEL,KAAK;0BAGL,KAAK;yBAGL,KAAK;;AALN;IADU,aAAa,CAAC,EAAE,YAAY,EAAE,KAAK,EAAE,CAAC;8BAC9B,UAAU;8DAAU;AAGtC;IADU,iBAAiB,CAAC,kBAAkB,CAAC;;yDAC1B","sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport { Command, Dsl, StoreInValueModel, TrackExternal, ValueModel } from '@coolon/pectin';\nimport { AbstractValueInputComponent } from '../abstract-value-input.component';\n\n@Component({\n  selector: 'aup-string-input',\n  templateUrl: './string-input.component.html',\n  styleUrls: ['./string-input.component.scss']\n})\nexport class StringInputComponent extends AbstractValueInputComponent<string> implements OnInit {\n\n  @Input() autocomplete: string;\n\n  @Input() @TrackExternal({ defaultValue: false })\n  enableClearModel: ValueModel<boolean>;\n\n  @Input() @StoreInValueModel('enableClearModel')\n  enableClear: boolean;\n\n  @Input() iconPrefix: string;\n\n\n  readonly clearCommand: Command<void>;\n\n  constructor() {\n    super();\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n    this.clearCommand = Command.create(() => {\n      this.componentValueModel.value = null;\n    });\n    this.clearCommand.disableWhile(chain.stringValue(this.componentValueModel).isBlank());\n  }\n\n  ngOnInit() {\n  }\n\n}\n"]}

package/esm2015/lib/components/forms/string-input/string-input.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"StringInputComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../abstract-value-input.component","name":"AbstractValueInputComponent","line":9,"character":42},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"aup-string-input","template":"<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n","styles":["button[disabled]{visibility:hidden}"]}]}],"members":{"autocomplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"enableClearModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":13,"character":12},"arguments":[{"defaultValue":false}]}]}],"enableClear":[{"__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":"StoreInValueModel","line":16,"character":12},"arguments":["enableClearModel"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"StringInputComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../abstract-value-input.component","name":"AbstractValueInputComponent","line":9,"character":42},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"aup-string-input","template":"<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <input matInput\n         placeholder=\"{{placeholder}}\"\n         [attr.autocomplete]=\"autocomplete\"\n         [(ngModel)]=\"componentValueModel.value\"\n         [disabled]=\"!enabled.value\"\n         (keydown.enter)=\"notifyEnterKey()\"\n         (keydown.escape)=\"notifyEscapeKey()\"\n         [pectinFocusBinding]=\"focusContext\"\n         [errorStateMatcher]=\"errorStateMatcher\"\n  >\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n  <aup-icon *ngIf=\"iconPrefix\" matPrefix [icon]=\"iconPrefix\"></aup-icon>\n  <button mat-button mat-icon-button matSuffix *ngIf=\"enableClear\" [pectinCommand]=\"clearCommand\">\n    <aup-icon icon=\"mat:close\"></aup-icon>\n  </button>\n</mat-form-field>\n\n","styles":["button[disabled]{visibility:hidden}"]}]}],"members":{"autocomplete":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}}]}],"enableClearModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":13,"character":12},"arguments":[{"defaultValue":false}]}]}],"enableClear":[{"__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":"StoreInValueModel","line":16,"character":12},"arguments":["enableClearModel"]}]}],"iconPrefix":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}}}}]

package/esm2015/lib/components/table/paginator/paginator.component.js

@@ -1,8 +1,11 @@
 import { __decorate, __metadata } from "tslib";
 import { Component, Input } from '@angular/core';
 import { PageController, TrackExternal } from '@coolon/pectin';
-export class PaginatorComponent {
-    constructor() { }
+import { DisposableComponent } from '../../disposable-component';
+export class PaginatorComponent extends DisposableComponent {
+    constructor() {
+        super();
+    }
     ngOnInit() {
     }
     get totalPages() {

package/esm2015/lib/components/table/paginator/paginator.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"paginator.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/components/table/paginator/paginator.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAU,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAO/D,MAAM,OAAO,kBAAkB;IAM7B,gBAAgB,CAAC;IAEjB,QAAQ;IACR,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC;IAC9C,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC;IAC9C,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC;IAC7C,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC;IACzC,CAAC;;;YA9BF,SAAS,SAAC;gBACT,QAAQ,EAAE,eAAe;gBACzB,mTAAyC;;aAE1C;;;;6BAGE,KAAK;;AAEN;IADC,aAAa,EAAE;8BACA,cAAc;0DAAC","sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport { PageController, TrackExternal } from '@coolon/pectin';\n\n@Component({\n  selector: 'aup-paginator',\n  templateUrl: './paginator.component.html',\n  styleUrls: ['./paginator.component.scss']\n})\nexport class PaginatorComponent implements OnInit {\n\n  @Input()\n  @TrackExternal()\n  pageController: PageController;\n\n  constructor() { }\n\n  ngOnInit(): void {\n  }\n\n  get totalPages(): number {\n    return this.pageController.totalPages.value;\n  }\n\n  get pageNumber(): number {\n    return this.pageController.pageNumber.value;\n  }\n\n  get previousCommand() {\n    return this.pageController.previousCommand;\n  }\n\n  get nextCommand() {\n    return this.pageController.nextCommand;\n  }\n\n\n}\n"]}
+{"version":3,"file":"paginator.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/components/table/paginator/paginator.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAU,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAOjE,MAAM,OAAO,kBAAmB,SAAQ,mBAAmB;IAMzD;QACE,KAAK,EAAE,CAAC;IACV,CAAC;IAED,QAAQ;IACR,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC;IAC9C,CAAC;IAED,IAAI,UAAU;QACZ,OAAO,IAAI,CAAC,cAAc,CAAC,UAAU,CAAC,KAAK,CAAC;IAC9C,CAAC;IAED,IAAI,eAAe;QACjB,OAAO,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC;IAC7C,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC;IACzC,CAAC;;;YAhCF,SAAS,SAAC;gBACT,QAAQ,EAAE,eAAe;gBACzB,mTAAyC;;aAE1C;;;;6BAGE,KAAK;;AAEN;IADC,aAAa,EAAE;8BACA,cAAc;0DAAC","sourcesContent":["import { Component, Input, OnInit } from '@angular/core';\nimport { PageController, TrackExternal } from '@coolon/pectin';\nimport { DisposableComponent } from '../../disposable-component';\n\n@Component({\n  selector: 'aup-paginator',\n  templateUrl: './paginator.component.html',\n  styleUrls: ['./paginator.component.scss']\n})\nexport class PaginatorComponent extends DisposableComponent implements OnInit {\n\n  @Input()\n  @TrackExternal()\n  pageController: PageController;\n\n  constructor() {\n    super();\n  }\n\n  ngOnInit(): void {\n  }\n\n  get totalPages(): number {\n    return this.pageController.totalPages.value;\n  }\n\n  get pageNumber(): number {\n    return this.pageController.pageNumber.value;\n  }\n\n  get previousCommand() {\n    return this.pageController.previousCommand;\n  }\n\n  get nextCommand() {\n    return this.pageController.nextCommand;\n  }\n\n\n}\n"]}

package/esm2015/lib/components/table/paginator/paginator.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"PaginatorComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":3,"character":1},"arguments":[{"selector":"aup-paginator","template":"<p>Page {{pageNumber}} of {{totalPages}}</p>\n<button mat-icon-button [pectinCommand]=\"previousCommand\"><aup-icon icon=\"mat:keyboard_arrow_left\"></aup-icon></button>\n<button mat-icon-button [pectinCommand]=\"nextCommand\"><aup-icon icon=\"mat:keyboard_arrow_right\"></aup-icon></button>\n\n","styles":[":host{align-items:center;color:rgba(0,0,0,.6);display:flex;flex-direction:row;font-size:12px;justify-content:flex-end;padding:0 8px}:host p{color:inherit;margin-right:8px}:host button.md-button.md-icon-button{height:30px;margin:0;padding:0;width:30px}"]}]}],"members":{"pageController":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":10,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":11,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"PaginatorComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../disposable-component","name":"DisposableComponent","line":9,"character":40},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"aup-paginator","template":"<p>Page {{pageNumber}} of {{totalPages}}</p>\n<button mat-icon-button [pectinCommand]=\"previousCommand\"><aup-icon icon=\"mat:keyboard_arrow_left\"></aup-icon></button>\n<button mat-icon-button [pectinCommand]=\"nextCommand\"><aup-icon icon=\"mat:keyboard_arrow_right\"></aup-icon></button>\n\n","styles":[":host{align-items:center;color:rgba(0,0,0,.6);display:flex;flex-direction:row;font-size:12px;justify-content:flex-end;padding:0 8px}:host p{color:inherit;margin-right:8px}:host button.md-button.md-icon-button{height:30px;margin:0;padding:0;width:30px}"]}]}],"members":{"pageController":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":11,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":12,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}]}}}}]

package/esm2015/lib/components/table/table.component.js

@@ -17,6 +17,19 @@ import { CustomTemplateColumnModel } from './column-model';
  * @example
  * <aup-table [tableModel]="heroTableModel"></aup-table>
  *
+ * Column templates
+ * @example
+ * this.heroTableModel = TableModel.fromList(heroList, table => {
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ *   table.addTemplateColumn("specialColumn");
+ * });
+ * <aup-table [tableModel]="heroTableModel">
+ *   <div *aupColumnTemplate="let hero; columnId: 'specialColumn'; fillCell: true; padChild:false">
+ *     {{hero.name}}
+ *   </div>
+ * </aup-table>
+ *
  * Styling
  * @example
  * aup-table {

package/esm2015/lib/components/table/table.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"table.component.js","sourceRoot":"","sources":["../../../../../../../libs/angular-ui-powerups/src/lib/components/table/table.component.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,MAAM,EAIP,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,GAAG,EAGH,iBAAiB,EACjB,iBAAiB,EACjB,aAAa,EACb,UAAU,EACX,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAe,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AAMH,MAAM,OAAO,cAAoB,SAAQ,oBAAoB;IAiC3D,YAAY,UAAsB,EAAE,MAAc;QAChD,KAAK,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;QAd5B;;;;WAIG;QAGH,oBAAe,GAAG,KAAK,CAAC;QAExB,kEAAkE;QACjD,iBAAY,GAAG,IAAI,iBAAiB,CAAS,EAAE,CAAC,CAAC;QACjD,cAAS,GAAG,IAAI,iBAAiB,CAAS,EAAE,CAAC,CAAC;QAI7D,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAE9C,MAAM,kBAAkB,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,GAAG,CAAE,IAAI,CAAC,EAAE;YACjE,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5C,CAAC,EAAE,EAAC,SAAS,EAAE,IAAI,CAAC,YAAY,EAAC,CAAC,CAAC;QAEnC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAC1D,4GAA4G;YAC5G,MAAM,WAAW,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,kBAAkB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;YACtF,MAAM,QAAQ,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YAC/D,0BAA0B;YAC1B,OAAO,QAAQ,CAAC;QAClB,CAAC,EAAE;YACD,SAAS,EAAE,CAAC,kBAAkB,EAAE,IAAI,CAAC,SAAS,CAAC;YAC/C,aAAa,EAAE,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;SAC5E,CAAC,CAAC;IACL,CAAC;IAED,IACI,UAAU;QACZ,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;IAC1B,CAAC;IAGD,QAAQ;QACN,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,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC9C,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QACvD,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAC7D,CAAC;IAED,SAAS,CAAC,GAAQ;QAChB,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;IAClD,CAAC;IAED,sBAAsB,CAAC,QAAgB,EAAE,WAA6B,EAAE,aAA+B,EAAE,QAAiB,EAAE,QAAiB;QAC3I,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC9C,IAAI,MAAM,YAAY,yBAAyB,EAAE;YAC/C,MAAM,CAAC,WAAW,CAAC,WAAW,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;SACpE;IACH,CAAC;IAED,iBAAiB,CAAC,WAA6B,EAAE,GAAQ;QACvD,IAAI,CAAC,UAAU,CAAC,kBAAkB,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;IACvD,CAAC;;;YApFF,SAAS,SAAC;gBACT,QAAQ,EAAE,WAAW;gBACrB,s+DAAqC;;aAEtC;;;YAtDC,UAAU;YAGV,MAAM;;;yBAsDL,KAAK;8BAIL,KAAK;yBAIL,KAAK;8BAeL,KAAK,YACL,WAAW,SAAC,wBAAwB;yBA2BpC,WAAW,SAAC,mBAAmB;;AAjDhC;IADC,aAAa,EAAE;8BACJ,kBAAkB;kDAAM;AAIpC;IADC,aAAa,CAAC,EAAC,YAAY,EAAE,IAAI,EAAC,CAAC;8BACnB,UAAU;uDAAU;AAIrC;IADC,iBAAiB,CAAC,iBAAiB,CAAC;;kDACjB","sourcesContent":["import {\n  Component,\n  ElementRef,\n  HostBinding,\n  Input,\n  NgZone,\n  OnInit,\n  TemplateRef,\n  ViewContainerRef\n} from '@angular/core';\nimport {\n  Dsl,\n  ListModelChain,\n  MapModelChain,\n  MutableValueModel,\n  StoreInValueModel,\n  TrackExternal,\n  ValueModel\n} from '@coolon/pectin';\nimport { ResizeAwareComponent } from '../resize-aware.component';\nimport { AbstractTableModel } from './abstract-table-model';\nimport { ColumnModel, CustomTemplateColumnModel } from './column-model';\n\n/**\n * Create your model:\n * @example\n * this.heroTableModel = TableModel.fromList(heroList, table => {\n *   table.pluck(\"firstName\");\n *   table.pluck(\"lastName\");\n *   table.addCustomColumn(\"fullName\", hero => `${hero.firstName} ${hero.lastName}`);\n * });\n *\n * Create your table\n * @example\n * <aup-table [tableModel]=\"heroTableModel\"></aup-table>\n *\n * Styling\n * @example\n * aup-table {\n *   --column-gap: 10px; // defaults to 24px\n *   --row-hover-background-color, rgba(0, 0, 0, 0.05)\n *   --row-selected-background-color: rebeccapurple; // defaults to transparent\n *   aup-table-cell-renderer {\n *     &:first-column {\n *       // do stuff\n *     }\n *     &:last-column {\n *       // do stuff\n *     }\n *   }\n * }\n */\n@Component({\n  selector: 'aup-table',\n  templateUrl: './table.component.html',\n  styleUrls: ['./table.component.scss']\n})\nexport class TableComponent<Row> extends ResizeAwareComponent implements OnInit {\n\n  @Input()\n  @TrackExternal()\n  tableModel: AbstractTableModel<Row>;\n\n  @Input()\n  @TrackExternal({defaultValue: true})\n  showHeaderModel: ValueModel<boolean>;\n\n  @Input()\n  @StoreInValueModel(\"showHeaderModel\")\n  showHeader: boolean;\n\n  columns: ListModelChain<ColumnModel<Row>>;\n  columnIds: ListModelChain<string>;\n  private columnsById: MapModelChain<string, ColumnModel<Row>>;\n\n  readonly visibleRowCount: ValueModel<number>;\n\n  /**\n   * Set to true to enable scrolling.  Once enabled the table will have 0 implicit height.  You will either\n   * need to set it explicitly e.g. height: 400px; or by using flex or grid layout to make it fill it's\n   * containment area.\n   */\n  @Input()\n  @HostBinding(\"class.enable-scrolling\")\n  enableScrolling = false;\n\n  // TODO: support user defined header and row heights via css vars.\n  private readonly headerHeight = new MutableValueModel<number>(56);\n  private readonly rowHeight = new MutableValueModel<number>(48);\n\n  constructor(elementRef: ElementRef, ngZone: NgZone) {\n    super(elementRef, ngZone);\n    const { chain, when } = Dsl.disposeWith(this);\n\n    const actualHeaderHeight = chain(this.showHeaderModel).map( show => {\n      return show ? this.headerHeight.value : 0;\n    }, {dependsOn: this.headerHeight});\n\n    this.visibleRowCount = chain(this.boundsModel).map(bounds => {\n      // TODO: this doesn't take into account any css styling adjustments etc.  Will invistigate if it's an issue.\n      const rawRowCount = (bounds.height - actualHeaderHeight.value) / this.rowHeight.value;\n      const rowCount = rawRowCount < 1 ? 0 : Math.floor(rawRowCount);\n      // console.log({rowCount})\n      return rowCount;\n    }, {\n      dependsOn: [actualHeaderHeight, this.rowHeight],\n      postponeWhile: chain(this.boundsModel).pluckNumeric('height').isLessThan(1)\n    });\n  }\n\n  @HostBinding(\"class.hide-header\")\n  get hideHeader() {\n    return !this.showHeader;\n  }\n\n\n  ngOnInit(): void {\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n    this.columns = chain(this.tableModel.columns);\n    this.columnIds = chain(this.columns).pluck('columnId');\n    this.columnsById = chain(this.columns).indexBy('columnId');\n  }\n\n  isEditing(row: Row): boolean {\n    return !!this.tableModel.getEditSessionFor(row);\n  }\n\n  registerColumnTemplate(columnId: string, templateRef: TemplateRef<any>, viewContainer: ViewContainerRef, fillCell: boolean, padChild: boolean) {\n    const column = this.columnsById.get(columnId);\n    if (column instanceof CustomTemplateColumnModel) {\n      column.setTemplate(templateRef, viewContainer, fillCell, padChild);\n    }\n  }\n\n  notifyCellClicked(columnModel: ColumnModel<Row>, row: Row) {\n    this.tableModel._notifyCellClicked(columnModel, row);\n  }\n\n}\n"]}
+{"version":3,"file":"table.component.js","sourceRoot":"","sources":["../../../../../../../libs/angular-ui-powerups/src/lib/components/table/table.component.ts"],"names":[],"mappings":";AAAA,OAAO,EACL,SAAS,EACT,UAAU,EACV,WAAW,EACX,KAAK,EACL,MAAM,EAIP,MAAM,eAAe,CAAC;AACvB,OAAO,EACL,GAAG,EAGH,iBAAiB,EACjB,iBAAiB,EACjB,aAAa,EACb,UAAU,EACX,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AACjE,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,EAAe,yBAAyB,EAAE,MAAM,gBAAgB,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AAMH,MAAM,OAAO,cAAoB,SAAQ,oBAAoB;IAiC3D,YAAY,UAAsB,EAAE,MAAc;QAChD,KAAK,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;QAd5B;;;;WAIG;QAGH,oBAAe,GAAG,KAAK,CAAC;QAExB,kEAAkE;QACjD,iBAAY,GAAG,IAAI,iBAAiB,CAAS,EAAE,CAAC,CAAC;QACjD,cAAS,GAAG,IAAI,iBAAiB,CAAS,EAAE,CAAC,CAAC;QAI7D,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAE9C,MAAM,kBAAkB,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,GAAG,CAAE,IAAI,CAAC,EAAE;YACjE,OAAO,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5C,CAAC,EAAE,EAAC,SAAS,EAAE,IAAI,CAAC,YAAY,EAAC,CAAC,CAAC;QAEnC,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YAC1D,4GAA4G;YAC5G,MAAM,WAAW,GAAG,CAAC,MAAM,CAAC,MAAM,GAAG,kBAAkB,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC;YACtF,MAAM,QAAQ,GAAG,WAAW,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC;YAC/D,0BAA0B;YAC1B,OAAO,QAAQ,CAAC;QAClB,CAAC,EAAE;YACD,SAAS,EAAE,CAAC,kBAAkB,EAAE,IAAI,CAAC,SAAS,CAAC;YAC/C,aAAa,EAAE,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;SAC5E,CAAC,CAAC;IACL,CAAC;IAED,IACI,UAAU;QACZ,OAAO,CAAC,IAAI,CAAC,UAAU,CAAC;IAC1B,CAAC;IAGD,QAAQ;QACN,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,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QAC9C,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;QACvD,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAC;IAC7D,CAAC;IAED,SAAS,CAAC,GAAQ;QAChB,OAAO,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC;IAClD,CAAC;IAED,sBAAsB,CAAC,QAAgB,EAAE,WAA6B,EAAE,aAA+B,EAAE,QAAiB,EAAE,QAAiB;QAC3I,MAAM,MAAM,GAAG,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QAC9C,IAAI,MAAM,YAAY,yBAAyB,EAAE;YAC/C,MAAM,CAAC,WAAW,CAAC,WAAW,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAC;SACpE;IACH,CAAC;IAED,iBAAiB,CAAC,WAA6B,EAAE,GAAQ;QACvD,IAAI,CAAC,UAAU,CAAC,kBAAkB,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC;IACvD,CAAC;;;YApFF,SAAS,SAAC;gBACT,QAAQ,EAAE,WAAW;gBACrB,s+DAAqC;;aAEtC;;;YAnEC,UAAU;YAGV,MAAM;;;yBAmEL,KAAK;8BAIL,KAAK;yBAIL,KAAK;8BAeL,KAAK,YACL,WAAW,SAAC,wBAAwB;yBA2BpC,WAAW,SAAC,mBAAmB;;AAjDhC;IADC,aAAa,EAAE;8BACJ,kBAAkB;kDAAM;AAIpC;IADC,aAAa,CAAC,EAAC,YAAY,EAAE,IAAI,EAAC,CAAC;8BACnB,UAAU;uDAAU;AAIrC;IADC,iBAAiB,CAAC,iBAAiB,CAAC;;kDACjB","sourcesContent":["import {\n  Component,\n  ElementRef,\n  HostBinding,\n  Input,\n  NgZone,\n  OnInit,\n  TemplateRef,\n  ViewContainerRef\n} from '@angular/core';\nimport {\n  Dsl,\n  ListModelChain,\n  MapModelChain,\n  MutableValueModel,\n  StoreInValueModel,\n  TrackExternal,\n  ValueModel\n} from '@coolon/pectin';\nimport { ResizeAwareComponent } from '../resize-aware.component';\nimport { AbstractTableModel } from './abstract-table-model';\nimport { ColumnModel, CustomTemplateColumnModel } from './column-model';\n\n/**\n * Create your model:\n * @example\n * this.heroTableModel = TableModel.fromList(heroList, table => {\n *   table.pluck(\"firstName\");\n *   table.pluck(\"lastName\");\n *   table.addCustomColumn(\"fullName\", hero => `${hero.firstName} ${hero.lastName}`);\n * });\n *\n * Create your table\n * @example\n * <aup-table [tableModel]=\"heroTableModel\"></aup-table>\n *\n * Column templates\n * @example\n * this.heroTableModel = TableModel.fromList(heroList, table => {\n *   table.pluck(\"firstName\");\n *   table.pluck(\"lastName\");\n *   table.addTemplateColumn(\"specialColumn\");\n * });\n * <aup-table [tableModel]=\"heroTableModel\">\n *   <div *aupColumnTemplate=\"let hero; columnId: 'specialColumn'; fillCell: true; padChild:false\">\n *     {{hero.name}}\n *   </div>\n * </aup-table>\n *\n * Styling\n * @example\n * aup-table {\n *   --column-gap: 10px; // defaults to 24px\n *   --row-hover-background-color, rgba(0, 0, 0, 0.05)\n *   --row-selected-background-color: rebeccapurple; // defaults to transparent\n *   aup-table-cell-renderer {\n *     &:first-column {\n *       // do stuff\n *     }\n *     &:last-column {\n *       // do stuff\n *     }\n *   }\n * }\n */\n@Component({\n  selector: 'aup-table',\n  templateUrl: './table.component.html',\n  styleUrls: ['./table.component.scss']\n})\nexport class TableComponent<Row> extends ResizeAwareComponent implements OnInit {\n\n  @Input()\n  @TrackExternal()\n  tableModel: AbstractTableModel<Row>;\n\n  @Input()\n  @TrackExternal({defaultValue: true})\n  showHeaderModel: ValueModel<boolean>;\n\n  @Input()\n  @StoreInValueModel(\"showHeaderModel\")\n  showHeader: boolean;\n\n  columns: ListModelChain<ColumnModel<Row>>;\n  columnIds: ListModelChain<string>;\n  private columnsById: MapModelChain<string, ColumnModel<Row>>;\n\n  readonly visibleRowCount: ValueModel<number>;\n\n  /**\n   * Set to true to enable scrolling.  Once enabled the table will have 0 implicit height.  You will either\n   * need to set it explicitly e.g. height: 400px; or by using flex or grid layout to make it fill it's\n   * containment area.\n   */\n  @Input()\n  @HostBinding(\"class.enable-scrolling\")\n  enableScrolling = false;\n\n  // TODO: support user defined header and row heights via css vars.\n  private readonly headerHeight = new MutableValueModel<number>(56);\n  private readonly rowHeight = new MutableValueModel<number>(48);\n\n  constructor(elementRef: ElementRef, ngZone: NgZone) {\n    super(elementRef, ngZone);\n    const { chain, when } = Dsl.disposeWith(this);\n\n    const actualHeaderHeight = chain(this.showHeaderModel).map( show => {\n      return show ? this.headerHeight.value : 0;\n    }, {dependsOn: this.headerHeight});\n\n    this.visibleRowCount = chain(this.boundsModel).map(bounds => {\n      // TODO: this doesn't take into account any css styling adjustments etc.  Will invistigate if it's an issue.\n      const rawRowCount = (bounds.height - actualHeaderHeight.value) / this.rowHeight.value;\n      const rowCount = rawRowCount < 1 ? 0 : Math.floor(rawRowCount);\n      // console.log({rowCount})\n      return rowCount;\n    }, {\n      dependsOn: [actualHeaderHeight, this.rowHeight],\n      postponeWhile: chain(this.boundsModel).pluckNumeric('height').isLessThan(1)\n    });\n  }\n\n  @HostBinding(\"class.hide-header\")\n  get hideHeader() {\n    return !this.showHeader;\n  }\n\n\n  ngOnInit(): void {\n    const { chain, valueOf, before, when, after, observe, switchOn } = Dsl.disposeWith(this);\n    this.columns = chain(this.tableModel.columns);\n    this.columnIds = chain(this.columns).pluck('columnId');\n    this.columnsById = chain(this.columns).indexBy('columnId');\n  }\n\n  isEditing(row: Row): boolean {\n    return !!this.tableModel.getEditSessionFor(row);\n  }\n\n  registerColumnTemplate(columnId: string, templateRef: TemplateRef<any>, viewContainer: ViewContainerRef, fillCell: boolean, padChild: boolean) {\n    const column = this.columnsById.get(columnId);\n    if (column instanceof CustomTemplateColumnModel) {\n      column.setTemplate(templateRef, viewContainer, fillCell, padChild);\n    }\n  }\n\n  notifyCellClicked(columnModel: ColumnModel<Row>, row: Row) {\n    this.tableModel._notifyCellClicked(columnModel, row);\n  }\n\n}\n"]}

package/esm2015/lib/components/table/table.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"TableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../resize-aware.component","name":"ResizeAwareComponent","line":57,"character":41},"arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":52,"character":1},"arguments":[{"selector":"aup-table","template":"<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class.first-column]=\"first\"\n                                        [class.last-column]=\"last\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"tableModel\"\n                                 [editSession]=\"tableModel.getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class.first-column]=\"first\"\n                                 [class.last-column]=\"last\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\" [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n","styles":[":host{align-items:stretch;display:flex;flex-direction:column}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{align-items:stretch;display:flex;flex:1;flex-basis:0;flex-direction:column;overflow-y:scroll}"]}]}],"members":{"tableModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":60,"character":3}}]}],"showHeaderModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":63,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":64,"character":3},"arguments":[{"defaultValue":true}]}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":67,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":68,"character":3},"arguments":["showHeaderModel"]}]}],"enableScrolling":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":82,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":83,"character":3},"arguments":["class.enable-scrolling"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":90,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":90,"character":46}]}],"hideHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":110,"character":3},"arguments":["class.hide-header"]}]}],"ngOnInit":[{"__symbolic":"method"}],"isEditing":[{"__symbolic":"method"}],"registerColumnTemplate":[{"__symbolic":"method"}],"notifyCellClicked":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"TableComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../resize-aware.component","name":"ResizeAwareComponent","line":70,"character":41},"arity":1,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":65,"character":1},"arguments":[{"selector":"aup-table","template":"<div class=\"scroll-container\">\n  <table mat-table [dataSource]=\"tableModel.dataSource.value\" [trackBy]=\"tableModel.trackBy\">\n\n    <ng-container *ngFor=\"let column of columns.value; index as index; first as first; last as last\"\n                  matColumnDef=\"{{column.columnId}}\">\n      <th mat-header-cell *matHeaderCellDef [class.flex]=\"column.isFlex()\" [class.hide]=\"!column.isVisible()\">\n        <aup-table-header-cell-renderer [column]=\"column\"\n                                        [attr.column-index]=\"index\"\n                                        [attr.column-id]=\"column.columnId\"\n                                        [class.first-column]=\"first\"\n                                        [class.last-column]=\"last\"\n        ></aup-table-header-cell-renderer>\n      </th>\n      <td mat-cell *matCellDef=\"let row\" (click)=\"notifyCellClicked(column, row)\"\n          [class.enable-cursor]=\"tableModel.isCursorEnabled(column)\"\n          [class.flex]=\"column.isFlex()\"\n          [class.hide]=\"!column.isVisible()\"\n      >\n        <aup-table-cell-renderer [column]=\"column\"\n                                 [row]=\"row\"\n                                 [tableModel]=\"tableModel\"\n                                 [editSession]=\"tableModel.getEditSessionFor(row)\"\n                                 [attr.column-index]=\"index\"\n                                 [attr.column-id]=\"column.columnId\"\n                                 [class.first-column]=\"first\"\n                                 [class.last-column]=\"last\"\n        ></aup-table-cell-renderer>\n      </td>\n    </ng-container>\n\n    <tr mat-header-row *matHeaderRowDef=\"columnIds.value\"></tr>\n    <tr mat-row *matRowDef=\"let row; columns: columnIds.value; let i = index\"\n        [ngClass]=\"tableModel.getRowClasses(row)\" [class.enable-hover]=\"tableModel.isHoverEnabled()\"\n        [attr.trackBy]=\"tableModel.trackBy(i, row)\"\n    ></tr>\n\n  </table>\n</div>\n","styles":[":host{align-items:stretch;display:flex;flex-direction:column}:host table{width:100%}:host.enable-scrolling{min-height:0}:host.enable-scrolling .scroll-container{align-items:stretch;display:flex;flex:1;flex-basis:0;flex-direction:column;overflow-y:scroll}"]}]}],"members":{"tableModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":72,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":73,"character":3}}]}],"showHeaderModel":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":76,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":77,"character":3},"arguments":[{"defaultValue":true}]}]}],"showHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":80,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"StoreInValueModel","line":81,"character":3},"arguments":["showHeaderModel"]}]}],"enableScrolling":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":95,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":96,"character":3},"arguments":["class.enable-scrolling"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ElementRef","line":103,"character":26},{"__symbolic":"reference","module":"@angular/core","name":"NgZone","line":103,"character":46}]}],"hideHeader":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":123,"character":3},"arguments":["class.hide-header"]}]}],"ngOnInit":[{"__symbolic":"method"}],"isEditing":[{"__symbolic":"method"}],"registerColumnTemplate":[{"__symbolic":"method"}],"notifyCellClicked":[{"__symbolic":"method"}]}}}}]

package/esm2015/lib/interaction/activity.js

@@ -1,11 +1,13 @@
-import { Component, HostBinding, InjectionToken } from '@angular/core';
-import { DelegatingValueModel, Dsl } from '@coolon/pectin';
+import { __decorate, __metadata } from "tslib";
+import { Component, HostBinding, InjectionToken, ViewChild } from '@angular/core';
+import { Command, DelegatingValueModel, Dsl, TrackExternal } from '@coolon/pectin';
 import { assert } from '@coolon/typescript-utilities';
 import { DisposableComponent } from '../components/disposable-component';
+import { ActivityActionsComponent } from './components/activity-actions/activity-actions.component';
 export const ACTIVITY_DATA = new InjectionToken('InteractionActivityData');
 export class Activity extends DisposableComponent {
     constructor() {
-        super(...arguments);
+        super();
         this._busyModel = new DelegatingValueModel().withDefault(false);
         this._focusedModel = this.registerDisposable(new DelegatingValueModel());
         this.class = 'aup-activity';
@@ -23,6 +25,10 @@ export class Activity extends DisposableComponent {
             this.onActivityReady();
         });
     }
+    ngAfterViewInit() {
+        var _a;
+        (_a = this.activityActions) === null || _a === void 0 ? void 0 : _a.initCommands(this);
+    }
     get interactionContext() {
         assert.isTruthy(this.isInitialised());
         return this._interactionContext;
@@ -57,8 +63,18 @@ Activity.decorators = [
                 template: ''
             },] }
 ];
+Activity.ctorParameters = () => [];
 Activity.propDecorators = {
+    activityActions: [{ type: ViewChild, args: [ActivityActionsComponent,] }],
     class: [{ type: HostBinding, args: ['class',] }],
     isFocused: [{ type: HostBinding, args: ['attr.focused',] }]
 };
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", Command)
+], Activity.prototype, "confirmCommand", void 0);
+__decorate([
+    TrackExternal(),
+    __metadata("design:type", Command)
+], Activity.prototype, "cancelCommand", void 0);
 //# sourceMappingURL=activity.js.map

package/esm2015/lib/interaction/activity.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity.js","sourceRoot":"","sources":["../../../../../../libs/angular-ui-powerups/src/lib/interaction/activity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACvE,OAAO,EAAE,oBAAoB,EAAE,GAAG,EAAc,MAAM,gBAAgB,CAAC;AACvE,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAGzE,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,cAAc,CAAM,yBAAyB,CAAC,CAAC;AAKhF,MAAM,OAAO,QAAwB,SAAQ,mBAAmB;IAHhE;;QAKmB,eAAU,GAAG,IAAI,oBAAoB,EAAW,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC7E,kBAAa,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,oBAAoB,EAAW,CAAC,CAAC;QAM/D,UAAK,GAAG,cAAc,CAAC;IAsD/C,CAAC;IApDC,IACI,SAAS;QACX,OAAO,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;IAClC,CAAC;IAED,UAAU,CAAC,wBAA4C,EAAE,eAAuC;QAC9F,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAC9C,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACpC,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC;QACxC,IAAI,CAAC,mBAAmB,GAAG,wBAAwB,CAAC;QACpD,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QACxD,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,aAAa,CAAC,GAAG,EAAE;YAC1C,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,IAAI,kBAAkB;QACpB,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC,mBAAmB,CAAC;IAClC,CAAC;IAED,IAAI,CAAC,MAAU;QACb,OAAO,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM,CAAC,KAAS;QACd,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;IAED,WAAW;IACX,eAAe;IACf,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;IAClC,CAAC;IAED,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;IACrC,CAAC;IAED,SAAS,CAAC,SAA8B;QACtC,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IACzC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;IAC/B,CAAC;IAED,aAAa;QACX,OAAO,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC;IACjC,CAAC;;;YAjEF,SAAS,SAAC;gBACT,QAAQ,EAAC,EAAE;aACZ;;;oBAUE,WAAW,SAAC,OAAO;wBAEnB,WAAW,SAAC,cAAc","sourcesContent":["import { Component, HostBinding, InjectionToken } from '@angular/core';\nimport { DelegatingValueModel, Dsl, ValueModel } from '@coolon/pectin';\nimport { assert } from '@coolon/typescript-utilities';\nimport { DisposableComponent } from '../components/disposable-component';\nimport { InteractionContext } from './interaction-context';\n\nexport const ACTIVITY_DATA = new InjectionToken<any>('InteractionActivityData');\n\n@Component({\n  template:''\n})\nexport class Activity<D, R, E = any> extends DisposableComponent {\n\n  private readonly _busyModel = new DelegatingValueModel<boolean>().withDefault(false);\n  private _focusedModel = this.registerDisposable(new DelegatingValueModel<boolean>());\n  private _activityContext: Activity.Context<R, E>;\n\n  // @Trace()\n  private _interactionContext: InteractionContext;\n\n  @HostBinding('class') class = 'aup-activity';\n\n  @HostBinding('attr.focused')\n  get isFocused() {\n    return this._focusedModel.value;\n  }\n\n  initialise(nestedInteractionContext: InteractionContext, activityContext: Activity.Context<R, E>): void {\n    const { chain, when } = Dsl.disposeWith(this);\n    assert.isNil(this._activityContext);\n    this._activityContext = activityContext;\n    this._interactionContext = nestedInteractionContext;\n    this._focusedModel.setDelegate(activityContext.focused);\n    when(this._focusedModel).becomesTruthy(() => {\n      this.onActivityReady();\n    });\n  }\n\n  get interactionContext() {\n    assert.isTruthy(this.isInitialised());\n    return this._interactionContext;\n  }\n\n  done(result?: R): void {\n    return this._activityContext.onDone(result);\n  }\n\n  cancel(error?: E): void {\n    this._activityContext.onCancel(error);\n  }\n\n  // @Trace()\n  onActivityReady() {\n  }\n\n  get busy(): ValueModel<boolean> {\n    return this._busyModel.readonly;\n  }\n\n  get focused(): ValueModel<boolean> {\n    return this._focusedModel.readonly;\n  }\n\n  busyWhile(busyModel: ValueModel<boolean>) {\n    this._busyModel.setDelegate(busyModel);\n  }\n\n  isBusy() {\n    return this._busyModel.value;\n  }\n\n  isInitialised() {\n    return !!this._activityContext;\n  }\n}\n\nexport namespace Activity {\n\n  export interface Context<R, E> {\n    onDone: (result: R) => void,\n    onCancel: (error: E) => void,\n    focused: ValueModel<boolean>\n  }\n}\n"]}
+{"version":3,"file":"activity.js","sourceRoot":"","sources":["../../../../../../libs/angular-ui-powerups/src/lib/interaction/activity.ts"],"names":[],"mappings":";AAAA,OAAO,EAAiB,SAAS,EAAc,WAAW,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAC7G,OAAO,EAAE,OAAO,EAAE,oBAAoB,EAAE,GAAG,EAAS,aAAa,EAAc,MAAM,gBAAgB,CAAC;AACtG,OAAO,EAAE,MAAM,EAAE,MAAM,8BAA8B,CAAC;AACtD,OAAO,EAAE,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AACzE,OAAO,EAAE,wBAAwB,EAAE,MAAM,0DAA0D,CAAC;AAGpG,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,cAAc,CAAM,yBAAyB,CAAC,CAAC;AAKhF,MAAM,OAAO,QAAwB,SAAQ,mBAAmB;IAyB9D;QACE,KAAK,EAAE,CAAC;QAxBO,eAAU,GAAG,IAAI,oBAAoB,EAAW,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;QAC7E,kBAAa,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,oBAAoB,EAAW,CAAC,CAAC;QAe/D,UAAK,GAAG,cAAc,CAAC;IAS7C,CAAC;IAPD,IACI,SAAS;QACX,OAAO,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC;IAClC,CAAC;IAMD,UAAU,CAAC,wBAA4C,EAAE,eAAuC;QAC9F,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAC9C,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC;QACpC,IAAI,CAAC,gBAAgB,GAAG,eAAe,CAAC;QACxC,IAAI,CAAC,mBAAmB,GAAG,wBAAwB,CAAC;QACpD,IAAI,CAAC,aAAa,CAAC,WAAW,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC;QACxD,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,aAAa,CAAC,GAAG,EAAE;YAC1C,IAAI,CAAC,eAAe,EAAE,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC;IAED,eAAe;;QACb,MAAA,IAAI,CAAC,eAAe,0CAAE,YAAY,CAAC,IAAI,EAAE;IAC3C,CAAC;IAED,IAAI,kBAAkB;QACpB,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,aAAa,EAAE,CAAC,CAAC;QACtC,OAAO,IAAI,CAAC,mBAAmB,CAAC;IAClC,CAAC;IAED,IAAI,CAAC,MAAU;QACb,OAAO,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM,CAAC,KAAS;QACd,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC;IACxC,CAAC;IAED,WAAW;IACX,eAAe;IACf,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC;IAClC,CAAC;IAED,IAAI,OAAO;QACT,OAAO,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC;IACrC,CAAC;IAED,SAAS,CAAC,SAA8B;QACtC,IAAI,CAAC,UAAU,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;IACzC,CAAC;IAED,MAAM;QACJ,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;IAC/B,CAAC;IAED,aAAa;QACX,OAAO,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC;IACjC,CAAC;;;YAlFF,SAAS,SAAC;gBACT,QAAQ,EAAE,EAAE;aACb;;;;8BAOE,SAAS,SAAC,wBAAwB;oBAYlC,WAAW,SAAC,OAAO;wBAEnB,WAAW,SAAC,cAAc;;AAV3B;IADC,aAAa,EAAE;8BACO,OAAO;gDAAU;AAGxC;IADC,aAAa,EAAE;8BACM,OAAO;+CAAU","sourcesContent":["import { AfterViewInit, Component, forwardRef, HostBinding, InjectionToken, ViewChild } from '@angular/core';\nimport { Command, DelegatingValueModel, Dsl, Trace, TrackExternal, ValueModel } from '@coolon/pectin';\nimport { assert } from '@coolon/typescript-utilities';\nimport { DisposableComponent } from '../components/disposable-component';\nimport { ActivityActionsComponent } from './components/activity-actions/activity-actions.component';\nimport { InteractionContext } from './interaction-context';\n\nexport const ACTIVITY_DATA = new InjectionToken<any>('InteractionActivityData');\n\n@Component({\n  template: ''\n})\nexport class Activity<D, R, E = any> extends DisposableComponent implements AfterViewInit {\n\n  private readonly _busyModel = new DelegatingValueModel<boolean>().withDefault(false);\n  private _focusedModel = this.registerDisposable(new DelegatingValueModel<boolean>());\n  private _activityContext: Activity.Context<R, E>;\n\n  @ViewChild(ActivityActionsComponent)\n  protected activityActions: ActivityActionsComponent;\n\n  @TrackExternal()\n  public confirmCommand: Command<unknown>;\n\n  @TrackExternal()\n  public cancelCommand: Command<unknown>;\n\n  // @Trace()\n  private _interactionContext: InteractionContext;\n\n  @HostBinding('class') class = 'aup-activity';\n\n  @HostBinding('attr.focused')\n  get isFocused() {\n    return this._focusedModel.value;\n  }\n\n  constructor() {\n    super();\n  }\n\n  initialise(nestedInteractionContext: InteractionContext, activityContext: Activity.Context<R, E>): void {\n    const { chain, when } = Dsl.disposeWith(this);\n    assert.isNil(this._activityContext);\n    this._activityContext = activityContext;\n    this._interactionContext = nestedInteractionContext;\n    this._focusedModel.setDelegate(activityContext.focused);\n    when(this._focusedModel).becomesTruthy(() => {\n      this.onActivityReady();\n    });\n  }\n\n  ngAfterViewInit() {\n    this.activityActions?.initCommands(this);\n  }\n\n  get interactionContext() {\n    assert.isTruthy(this.isInitialised());\n    return this._interactionContext;\n  }\n\n  done(result?: R): void {\n    return this._activityContext.onDone(result);\n  }\n\n  cancel(error?: E): void {\n    this._activityContext.onCancel(error);\n  }\n\n  // @Trace()\n  onActivityReady() {\n  }\n\n  get busy(): ValueModel<boolean> {\n    return this._busyModel.readonly;\n  }\n\n  get focused(): ValueModel<boolean> {\n    return this._focusedModel.readonly;\n  }\n\n  busyWhile(busyModel: ValueModel<boolean>) {\n    this._busyModel.setDelegate(busyModel);\n  }\n\n  isBusy() {\n    return this._busyModel.value;\n  }\n\n  isInitialised() {\n    return !!this._activityContext;\n  }\n}\n\nexport namespace Activity {\n\n  export interface Context<R, E> {\n    onDone: (result: R) => void,\n    onCancel: (error: E) => void,\n    focused: ValueModel<boolean>\n  }\n}\n"]}

package/esm2015/lib/interaction/activity.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"ACTIVITY_DATA":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":6,"character":33},"arguments":["InteractionActivityData"]},"Activity":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../components/disposable-component","name":"DisposableComponent","line":11,"character":45},"arity":3,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":8,"character":1},"arguments":[{"template":""}]}],"members":{"class":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":20,"character":3},"arguments":["class"]}]}],"isFocused":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":22,"character":3},"arguments":["attr.focused"]}]}],"initialise":[{"__symbolic":"method"}],"done":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"onActivityReady":[{"__symbolic":"method"}],"busyWhile":[{"__symbolic":"method"}],"isBusy":[{"__symbolic":"method"}],"isInitialised":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"ACTIVITY_DATA":{"__symbolic":"new","expression":{"__symbolic":"reference","module":"@angular/core","name":"InjectionToken","line":7,"character":33},"arguments":["InteractionActivityData"]},"Activity":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../components/disposable-component","name":"DisposableComponent","line":12,"character":45},"arity":3,"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":9,"character":1},"arguments":[{"template":""}]}],"members":{"activityActions":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":18,"character":3},"arguments":[{"__symbolic":"reference","module":"./components/activity-actions/activity-actions.component","name":"ActivityActionsComponent","line":18,"character":13}]}]}],"confirmCommand":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":21,"character":3}}]}],"cancelCommand":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":24,"character":3}}]}],"class":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":30,"character":3},"arguments":["class"]}]}],"isFocused":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":32,"character":3},"arguments":["attr.focused"]}]}],"__ctor__":[{"__symbolic":"constructor"}],"initialise":[{"__symbolic":"method"}],"ngAfterViewInit":[{"__symbolic":"method"}],"done":[{"__symbolic":"method"}],"cancel":[{"__symbolic":"method"}],"onActivityReady":[{"__symbolic":"method"}],"busyWhile":[{"__symbolic":"method"}],"isBusy":[{"__symbolic":"method"}],"isInitialised":[{"__symbolic":"method"}]}}}}]

package/esm2015/lib/interaction/components/activity-actions/activity-actions.component.js

@@ -1,43 +1,41 @@
 import { __decorate, __metadata } from "tslib";
-import { Component, HostBinding, Input } from '@angular/core';
-import { Command, DelegatingCommand, TrackExternal } from '@coolon/pectin';
+import { ChangeDetectorRef, Component, HostBinding, Input } from '@angular/core';
+import { Command, TrackExternal } from '@coolon/pectin';
+import { CommandFace } from '../../../components/commands/command-face';
 import { DisposableComponent } from '../../../components/disposable-component';
 /**
  * @example
- * <aup-activity-actions
- *     [confirmCommand]="confirm"
- *     [cancelCommand]="cancel"
- *     [style]="{confirm: saveFace, cancel: cancelFace}">
+ * <aup-activity-actions [style]="{confirm: saveFace, cancel: cancelFace}">
  * </aup-activity-actions>
  *
  * // Running `ng g @coolon/angular-ui-powerups:aup-i18n` will install default
  * // style definitions
- * <aup-activity-actions
- *     [confirmCommand]="confirm"
- *     [cancelCommand]="cancel"
- *     [style]="I18n.aup.components.activityActions.styles.okCancelIcons">
- * </aup-activity-actions>
- *
- * // both commands are optional
- * <aup-activity-actions
- *     [confirmCommand]="confirm"
- *     [style]="I18n.aup.components.activityActions.styles.okCancelIcons">
+ * <aup-activity-actions [style]="I18n.aup.components.activityActions.styles.okCancelIcons">
  * </aup-activity-actions>
  *
  * // you can also add additional content that will be displayed along with the buttons.
  * // The location of the content depends on the alignment attribute.
  * <aup-activity-actions
- *     [confirmCommand]="confirm"
- *     [cancelCommand]="cancel"
  *     align="stretch"
  *     [style]="I18n.aup.components.activityActions.styles.okCancelIcons">
  *     <span>This content will be between the two commands</span>
  * </aup-activity-actions>
  */
 export class ActivityActionsComponent extends DisposableComponent {
-    constructor() {
-        super(...arguments);
-        this.align = 'start';
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+        this.align = 'stretch';
+    }
+    set faces(faces) {
+        this.confirmFace = faces.confirm;
+        this.cancelFace = faces.cancel;
+    }
+    /**
+     * @deprecated use #commandFaces instead.
+     */
+    set style(style) {
+        this.confirmFace = style.confirm;
     }
     get alignEnd() {
         return this.align === 'end';
@@ -47,23 +45,34 @@ export class ActivityActionsComponent extends DisposableComponent {
     }
     ngOnInit() {
     }
-    hasConfirmCommand() {
-        return DelegatingCommand.hasDelegate(this.confirmCommand);
+    hasConfirmFace() {
+        return this.confirmFace;
     }
-    hasCancelCommand() {
-        return DelegatingCommand.hasDelegate(this.cancelCommand);
+    hasCancelFace() {
+        return this.cancelFace;
+    }
+    initCommands(activity) {
+        this.confirmCommand = activity.confirmCommand;
+        this.cancelCommand = activity.cancelCommand;
+        this.cdr.detectChanges();
     }
 }
 ActivityActionsComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-activity-actions',
-                template: "<ng-container *ngIf=\"hasCancelCommand()\">\n  <aup-command class=\"cancel\" [command]=\"cancelCommand\" [face]=\"style.cancel\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasConfirmCommand()\">\n  <aup-command class=\"confirm\" [command]=\"confirmCommand\" [face]=\"style.confirm\"></aup-command>\n</ng-container>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n",
+                template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n",
                 styles: [":host{-ms-grid-columns:auto auto 1fr;-ms-grid-rows:auto;align-items:center;display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr;grid-template-rows:auto;justify-content:end}:host.align-end{-ms-grid-columns:1fr auto auto;grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host.align-stretch{-ms-grid-columns:auto 1fr auto;grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}.cancel{-ms-grid-column:1;-ms-grid-row:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-column:2;-ms-grid-row:1}:host.align-stretch>.cancel{-ms-grid-column:1;-ms-grid-row:1}.confirm{-ms-grid-column:2;-ms-grid-row:1;grid-area:confirm}.column,:host.align-end>.confirm,:host.align-stretch>.confirm{-ms-grid-column:3;-ms-grid-row:1}.column{grid-area:content;text-align:left}:host.align-end>.column{-ms-grid-column:1;-ms-grid-row:1}:host.align-stretch>.column{-ms-grid-column:2;-ms-grid-row:1}"]
             },] }
 ];
+ActivityActionsComponent.ctorParameters = () => [
+    { type: ChangeDetectorRef }
+];
 ActivityActionsComponent.propDecorators = {
     confirmCommand: [{ type: Input }],
     cancelCommand: [{ type: Input }],
+    faces: [{ type: Input }],
+    confirmFace: [{ type: Input }],
+    cancelFace: [{ type: Input }],
     style: [{ type: Input }],
     align: [{ type: Input }],
     alignEnd: [{ type: HostBinding, args: ['class.align-end',] }],

package/esm2015/lib/interaction/components/activity-actions/activity-actions.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity-actions.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/interaction/components/activity-actions/activity-actions.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAU,MAAM,eAAe,CAAC;AACtE,OAAO,EAAE,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAG3E,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAE/E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AAMH,MAAM,OAAO,wBAAyB,SAAQ,mBAAmB;IALjE;;QAmBE,UAAK,GAAgC,OAAO,CAAC;IAuB/C,CAAC;IArBC,IACI,QAAQ;QACV,OAAO,IAAI,CAAC,KAAK,KAAK,KAAK,CAAA;IAC7B,CAAC;IAED,IACI,YAAY;QACd,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS,CAAA;IACjC,CAAC;IAED,QAAQ;IACR,CAAC;IAED,iBAAiB;QACf,OAAO,iBAAiB,CAAC,WAAW,CAAC,IAAI,CAAC,cAAc,CAAC,CAAA;IAC3D,CAAC;IAED,gBAAgB;QACd,OAAO,iBAAiB,CAAC,WAAW,CAAC,IAAI,CAAC,aAAa,CAAC,CAAA;IAC1D,CAAC;;;YAxCF,SAAS,SAAC;gBACT,QAAQ,EAAE,sBAAsB;gBAChC,kZAAgD;;aAEjD;;;6BAGE,KAAK;4BAIL,KAAK;oBAIL,KAAK;oBAGL,KAAK;uBAGL,WAAW,SAAC,iBAAiB;2BAK7B,WAAW,SAAC,qBAAqB;;AAjBlC;IADC,aAAa,EAAE;8BACA,OAAO;gEAAM;AAI7B;IADC,aAAa,EAAE;8BACD,OAAO;+DAAM","sourcesContent":["import { Component, HostBinding, Input, OnInit } from '@angular/core';\nimport { Command, DelegatingCommand, TrackExternal } from '@coolon/pectin';\nimport _ from 'lodash';\nimport { CommandFace } from '../../../components/commands/command-face';\nimport { DisposableComponent } from '../../../components/disposable-component';\n\n/**\n * @example\n * <aup-activity-actions\n *     [confirmCommand]=\"confirm\"\n *     [cancelCommand]=\"cancel\"\n *     [style]=\"{confirm: saveFace, cancel: cancelFace}\">\n * </aup-activity-actions>\n *\n * // Running `ng g @coolon/angular-ui-powerups:aup-i18n` will install default\n * // style definitions\n * <aup-activity-actions\n *     [confirmCommand]=\"confirm\"\n *     [cancelCommand]=\"cancel\"\n *     [style]=\"I18n.aup.components.activityActions.styles.okCancelIcons\">\n * </aup-activity-actions>\n *\n * // both commands are optional\n * <aup-activity-actions\n *     [confirmCommand]=\"confirm\"\n *     [style]=\"I18n.aup.components.activityActions.styles.okCancelIcons\">\n * </aup-activity-actions>\n *\n * // you can also add additional content that will be displayed along with the buttons.\n * // The location of the content depends on the alignment attribute.\n * <aup-activity-actions\n *     [confirmCommand]=\"confirm\"\n *     [cancelCommand]=\"cancel\"\n *     align=\"stretch\"\n *     [style]=\"I18n.aup.components.activityActions.styles.okCancelIcons\">\n *     <span>This content will be between the two commands</span>\n * </aup-activity-actions>\n */\n@Component({\n  selector: 'aup-activity-actions',\n  templateUrl: './activity-actions.component.html',\n  styleUrls: ['./activity-actions.component.scss']\n})\nexport class ActivityActionsComponent extends DisposableComponent implements OnInit {\n\n  @Input()\n  @TrackExternal()\n  confirmCommand: Command<any>;\n\n  @Input()\n  @TrackExternal()\n  cancelCommand: Command<any>;\n\n  @Input()\n  style: ActivityActionsComponent.Style;\n\n  @Input()\n  align: 'start' | 'end' | 'stretch' = 'start';\n\n  @HostBinding('class.align-end')\n  get alignEnd():boolean {\n    return this.align === 'end'\n  }\n\n  @HostBinding('class.align-stretch')\n  get alignStretch():boolean {\n    return this.align === 'stretch'\n  }\n\n  ngOnInit() {\n  }\n\n  hasConfirmCommand() {\n    return DelegatingCommand.hasDelegate(this.confirmCommand)\n  }\n\n  hasCancelCommand() {\n    return DelegatingCommand.hasDelegate(this.cancelCommand)\n  }\n\n}\n\nexport namespace ActivityActionsComponent {\n  export interface Style {\n    confirm: CommandFace;\n    cancel: CommandFace;\n  }\n}\n"]}
+{"version":3,"file":"activity-actions.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/interaction/components/activity-actions/activity-actions.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAU,MAAM,eAAe,CAAC;AACzF,OAAO,EAAE,OAAO,EAAS,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,2CAA2C,CAAC;AACxE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAE/E;;;;;;;;;;;;;;;;;GAiBG;AAMH,MAAM,OAAO,wBAAyB,SAAQ,mBAAmB;IAiD/D,YAA6B,GAAsB;QACjD,KAAK,EAAE,CAAC;QADmB,QAAG,GAAH,GAAG,CAAmB;QAZnD,UAAK,GAAgC,SAAS,CAAC;IAc/C,CAAC;IAnCD,IACI,KAAK,CAAC,KAAqC;QAC7C,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,MAAM,CAAC;IACjC,CAAC;IAQD;;OAEG;IACH,IACI,KAAK,CAAC,KAAqC;QAC7C,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,OAAO,CAAC;IACnC,CAAC;IAKD,IACI,QAAQ;QACV,OAAO,IAAI,CAAC,KAAK,KAAK,KAAK,CAAC;IAC9B,CAAC;IAED,IACI,YAAY;QACd,OAAO,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC;IAClC,CAAC;IAMD,QAAQ;IACR,CAAC;IAED,cAAc;QACZ,OAAO,IAAI,CAAC,WAAW,CAAC;IAC1B,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAC,UAAU,CAAC;IACzB,CAAC;IAED,YAAY,CAAC,QAA+E;QAC1F,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC,cAAc,CAAC;QAC9C,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC;QAC5C,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;IAC3B,CAAC;;;YAzEF,SAAS,SAAC;gBACT,QAAQ,EAAE,sBAAsB;gBAChC,+bAAgD;;aAEjD;;;YA3BQ,iBAAiB;;;6BAiCvB,KAAK;4BAOL,KAAK;oBAIL,KAAK;0BAML,KAAK;yBAGL,KAAK;oBAML,KAAK;oBAKL,KAAK;uBAGL,WAAW,SAAC,iBAAiB;2BAK7B,WAAW,SAAC,qBAAqB;;AArClC;IADC,aAAa,EAAE;8BACA,OAAO;gEAAM;AAO7B;IADC,aAAa,EAAE;8BACD,OAAO;+DAAM","sourcesContent":["import { ChangeDetectorRef, Component, HostBinding, Input, OnInit } from '@angular/core';\nimport { Command, Trace, TrackExternal } from '@coolon/pectin';\nimport { CommandFace } from '../../../components/commands/command-face';\nimport { DisposableComponent } from '../../../components/disposable-component';\n\n/**\n * @example\n * <aup-activity-actions [style]=\"{confirm: saveFace, cancel: cancelFace}\">\n * </aup-activity-actions>\n *\n * // Running `ng g @coolon/angular-ui-powerups:aup-i18n` will install default\n * // style definitions\n * <aup-activity-actions [style]=\"I18n.aup.components.activityActions.styles.okCancelIcons\">\n * </aup-activity-actions>\n *\n * // you can also add additional content that will be displayed along with the buttons.\n * // The location of the content depends on the alignment attribute.\n * <aup-activity-actions\n *     align=\"stretch\"\n *     [style]=\"I18n.aup.components.activityActions.styles.okCancelIcons\">\n *     <span>This content will be between the two commands</span>\n * </aup-activity-actions>\n */\n@Component({\n  selector: 'aup-activity-actions',\n  templateUrl: './activity-actions.component.html',\n  styleUrls: ['./activity-actions.component.scss']\n})\nexport class ActivityActionsComponent extends DisposableComponent implements OnInit {\n\n  /**\n   * @deprecated activity actions now use the confirm command of the activity automatically\n   */\n  @Input()\n  @TrackExternal()\n  confirmCommand: Command<any>;\n\n  /**\n   * @deprecated activity actions now use the cancel command of the activity automatically\n   */\n  @Input()\n  @TrackExternal()\n  cancelCommand: Command<any>;\n\n  @Input()\n  set faces(faces: ActivityActionsComponent.Style) {\n    this.confirmFace = faces.confirm;\n    this.cancelFace = faces.cancel;\n  }\n\n  @Input()\n  confirmFace: CommandFace;\n\n  @Input()\n  cancelFace: CommandFace;\n\n  /**\n   * @deprecated use #commandFaces instead.\n   */\n  @Input()\n  set style(style: ActivityActionsComponent.Style) {\n    this.confirmFace = style.confirm;\n  }\n\n  @Input()\n  align: 'start' | 'end' | 'stretch' = 'stretch';\n\n  @HostBinding('class.align-end')\n  get alignEnd(): boolean {\n    return this.align === 'end';\n  }\n\n  @HostBinding('class.align-stretch')\n  get alignStretch(): boolean {\n    return this.align === 'stretch';\n  }\n\n  constructor(private readonly cdr: ChangeDetectorRef) {\n    super();\n  }\n\n  ngOnInit() {\n  }\n\n  hasConfirmFace() {\n    return this.confirmFace;\n  }\n\n  hasCancelFace() {\n    return this.cancelFace;\n  }\n\n  initCommands(activity: { confirmCommand: Command<unknown>, cancelCommand: Command<unknown> }) {\n    this.confirmCommand = activity.confirmCommand;\n    this.cancelCommand = activity.cancelCommand;\n    this.cdr.detectChanges();\n  }\n\n}\n\nexport namespace ActivityActionsComponent {\n  export interface Style {\n    confirm: CommandFace;\n    cancel: CommandFace;\n  }\n}\n"]}

package/esm2015/lib/interaction/components/activity-actions/activity-actions.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"ActivityActionsComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../../components/disposable-component","name":"DisposableComponent","line":43,"character":46},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":38,"character":1},"arguments":[{"selector":"aup-activity-actions","template":"<ng-container *ngIf=\"hasCancelCommand()\">\n  <aup-command class=\"cancel\" [command]=\"cancelCommand\" [face]=\"style.cancel\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasConfirmCommand()\">\n  <aup-command class=\"confirm\" [command]=\"confirmCommand\" [face]=\"style.confirm\"></aup-command>\n</ng-container>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n","styles":[":host{-ms-grid-columns:auto auto 1fr;-ms-grid-rows:auto;align-items:center;display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr;grid-template-rows:auto;justify-content:end}:host.align-end{-ms-grid-columns:1fr auto auto;grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host.align-stretch{-ms-grid-columns:auto 1fr auto;grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}.cancel{-ms-grid-column:1;-ms-grid-row:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-column:2;-ms-grid-row:1}:host.align-stretch>.cancel{-ms-grid-column:1;-ms-grid-row:1}.confirm{-ms-grid-column:2;-ms-grid-row:1;grid-area:confirm}.column,:host.align-end>.confirm,:host.align-stretch>.confirm{-ms-grid-column:3;-ms-grid-row:1}.column{grid-area:content;text-align:left}:host.align-end>.column{-ms-grid-column:1;-ms-grid-row:1}:host.align-stretch>.column{-ms-grid-column:2;-ms-grid-row:1}"]}]}],"members":{"confirmCommand":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":45,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":46,"character":3}}]}],"cancelCommand":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":49,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":50,"character":3}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":56,"character":3}}]}],"alignEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":59,"character":3},"arguments":["class.align-end"]}]}],"alignStretch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":64,"character":3},"arguments":["class.align-stretch"]}]}],"ngOnInit":[{"__symbolic":"method"}],"hasConfirmCommand":[{"__symbolic":"method"}],"hasCancelCommand":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"ActivityActionsComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../../components/disposable-component","name":"DisposableComponent","line":28,"character":46},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":23,"character":1},"arguments":[{"selector":"aup-activity-actions","template":"<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n","styles":[":host{-ms-grid-columns:auto auto 1fr;-ms-grid-rows:auto;align-items:center;display:-ms-grid;display:grid;grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr;grid-template-rows:auto;justify-content:end}:host.align-end{-ms-grid-columns:1fr auto auto;grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host.align-stretch{-ms-grid-columns:auto 1fr auto;grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}.cancel{-ms-grid-column:1;-ms-grid-row:1;grid-area:cancel}:host.align-end>.cancel{-ms-grid-column:2;-ms-grid-row:1}:host.align-stretch>.cancel{-ms-grid-column:1;-ms-grid-row:1}.confirm{-ms-grid-column:2;-ms-grid-row:1;grid-area:confirm}.column,:host.align-end>.confirm,:host.align-stretch>.confirm{-ms-grid-column:3;-ms-grid-row:1}.column{grid-area:content;text-align:left}:host.align-end>.column{-ms-grid-column:1;-ms-grid-row:1}:host.align-stretch>.column{-ms-grid-column:2;-ms-grid-row:1}"]}]}],"members":{"confirmCommand":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":33,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":34,"character":3}}]}],"cancelCommand":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":40,"character":3}},{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@coolon/pectin","name":"TrackExternal","line":41,"character":3}}]}],"faces":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":44,"character":3}}]}],"confirmFace":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":50,"character":3}}]}],"cancelFace":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":53,"character":3}}]}],"style":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":59,"character":3}}]}],"align":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":64,"character":3}}]}],"alignEnd":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":67,"character":3},"arguments":["class.align-end"]}]}],"alignStretch":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"HostBinding","line":72,"character":3},"arguments":["class.align-stretch"]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","module":"@angular/core","name":"ChangeDetectorRef","line":77,"character":36}]}],"ngOnInit":[{"__symbolic":"method"}],"hasConfirmFace":[{"__symbolic":"method"}],"hasCancelFace":[{"__symbolic":"method"}],"initCommands":[{"__symbolic":"method"}]}}}}]

package/esm2015/lib/interaction/components/activity-content/activity-body.component.html.shim.ngstyle.js.map

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

package/esm2015/lib/interaction/components/activity-content/activity-body.component.js

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { DisposableComponent } from '../../../components/disposable-component';
+export class ActivityBodyComponent extends DisposableComponent {
+    // @Input()
+    // align: 'start' | 'end' | 'stretch' = 'start';
+    //
+    // @HostBinding('class.align-end')
+    // get alignEnd():boolean {
+    //   return this.align === 'end'
+    // }
+    //
+    // @HostBinding('class.align-stretch')
+    // get alignStretch():boolean {
+    //   return this.align === 'stretch'
+    // }
+    ngOnInit() {
+    }
+}
+ActivityBodyComponent.decorators = [
+    { type: Component, args: [{
+                selector: 'aup-activity-body',
+                template: "<ng-content></ng-content>\n",
+                styles: ["<ng-content></ng-content>\n"]
+            },] }
+];
+//# sourceMappingURL=activity-body.component.js.map

package/esm2015/lib/interaction/components/activity-content/activity-body.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-body.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/interaction/components/activity-content/activity-body.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA8B,MAAM,eAAe,CAAC;AAItE,OAAO,EAAE,mBAAmB,EAAE,MAAM,0CAA0C,CAAC;AAO/E,MAAM,OAAO,qBAAsB,SAAQ,mBAAmB;IAE5D,WAAW;IACX,gDAAgD;IAChD,EAAE;IACF,kCAAkC;IAClC,2BAA2B;IAC3B,gCAAgC;IAChC,IAAI;IACJ,EAAE;IACF,sCAAsC;IACtC,+BAA+B;IAC/B,oCAAoC;IACpC,IAAI;IAEJ,QAAQ;IACR,CAAC;;;YArBF,SAAS,SAAC;gBACT,QAAQ,EAAE,mBAAmB;gBAC7B,uCAA6C;;aAE9C","sourcesContent":["import { Component, HostBinding, Input, OnInit } from '@angular/core';\nimport { Command, DelegatingCommand, TrackExternal } from '@coolon/pectin';\nimport _ from 'lodash';\nimport { CommandFace } from '../../../components/commands/command-face';\nimport { DisposableComponent } from '../../../components/disposable-component';\n\n@Component({\n  selector: 'aup-activity-body',\n  templateUrl: './activity-body.component.html',\n  styleUrls: ['./activity-body.component.html'],\n})\nexport class ActivityBodyComponent extends DisposableComponent implements OnInit {\n\n  // @Input()\n  // align: 'start' | 'end' | 'stretch' = 'start';\n  //\n  // @HostBinding('class.align-end')\n  // get alignEnd():boolean {\n  //   return this.align === 'end'\n  // }\n  //\n  // @HostBinding('class.align-stretch')\n  // get alignStretch():boolean {\n  //   return this.align === 'stretch'\n  // }\n\n  ngOnInit() {\n  }\n\n}\n"]}

package/esm2015/lib/interaction/components/activity-content/activity-body.component.metadata.json

@@ -0,0 +1 @@
+[{"__symbolic":"module","version":4,"metadata":{"ActivityBodyComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../../components/disposable-component","name":"DisposableComponent","line":11,"character":43},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"aup-activity-body","template":"<ng-content></ng-content>\n","styles":["<ng-content></ng-content>\n"]}]}],"members":{"ngOnInit":[{"__symbolic":"method"}]}}}}]

package/esm2015/lib/interaction/components/activity-content/activity-body.component.ngfactory.js.map

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

package/esm2015/lib/interaction/components/alert-dialog/alert-dialog.component.js

@@ -1,9 +1,18 @@
 import { Component, Inject } from '@angular/core';
+import { Command } from '@coolon/pectin';
 import { Activity, ACTIVITY_DATA } from '../../activity';
 export class AlertDialogComponent extends Activity {
     constructor(alert) {
         super();
         this.alert = alert;
+        this.confirmCommand = Command.create(() => {
+            this.done();
+        });
+        this.confirmFace = {
+            text: () => alert.ok(),
+            color: () => "primary",
+            style: () => "raised"
+        };
     }
     ngOnInit() {
     }
@@ -11,7 +20,7 @@ export class AlertDialogComponent extends Activity {
 AlertDialogComponent.decorators = [
     { type: Component, args: [{
                 selector: 'aup-alert-dialog',
-                template: "<h3 matDialogTitle *ngIf=\"alert.title\">{{alert.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of alert.content()\">{{line}}</p>\n</div>\n<div matDialogActions>\n  <button mat-raised-button color=\"primary\" (click)=\"done()\" data-cy=\"close-button\">{{alert.ok()}}</button>\n</div>\n",
+                template: "<aup-activity-title *ngIf=\"alert.title\">{{alert.title()}}</aup-activity-title>\n<aup-activity-body>\n  <p *ngFor=\"let line of alert.content()\">{{line}}</p>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\"></aup-activity-actions>\n",
                 styles: [":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{align-items:flex-end;justify-content:flex-end;margin-bottom:0!important;padding:0}"]
             },] }
 ];

package/esm2015/lib/interaction/components/alert-dialog/alert-dialog.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/interaction/components/alert-dialog/alert-dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAU,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAQzD,MAAM,OAAO,oBAAqB,SAAQ,QAAqB;IAE7D,YAA4C,KAAY;QACtD,KAAK,EAAE,CAAC;QADkC,UAAK,GAAL,KAAK,CAAO;IAExD,CAAC;IAED,QAAQ;IACR,CAAC;;;YAZF,SAAS,SAAC;gBACT,QAAQ,EAAE,kBAAkB;gBAC5B,0TAA4C;;aAE7C;;;4CAGc,MAAM,SAAC,aAAa","sourcesContent":["import { Component, Inject, OnInit } from '@angular/core';\nimport { Activity, ACTIVITY_DATA } from '../../activity';\nimport { Alert } from '../../alert';\n\n@Component({\n  selector: 'aup-alert-dialog',\n  templateUrl: './alert-dialog.component.html',\n  styleUrls: ['./alert-dialog.component.scss']\n})\nexport class AlertDialogComponent extends Activity<Alert, void> implements OnInit {\n\n  constructor(@Inject(ACTIVITY_DATA) readonly alert: Alert) {\n    super();\n  }\n\n  ngOnInit() {\n  }\n\n}\n"]}
+{"version":3,"file":"alert-dialog.component.js","sourceRoot":"","sources":["../../../../../../../../libs/angular-ui-powerups/src/lib/interaction/components/alert-dialog/alert-dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAU,MAAM,eAAe,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AAEzC,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAQzD,MAAM,OAAO,oBAAqB,SAAQ,QAAqB;IAI7D,YAA4C,KAAY;QACtD,KAAK,EAAE,CAAC;QADkC,UAAK,GAAL,KAAK,CAAO;QAEtD,IAAI,CAAC,cAAc,GAAG,OAAO,CAAC,MAAM,CAAC,GAAG,EAAE;YACxC,IAAI,CAAC,IAAI,EAAE,CAAC;QACd,CAAC,CAAC,CAAC;QACH,IAAI,CAAC,WAAW,GAAG;YACjB,IAAI,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,EAAE,EAAE;YACtB,KAAK,EAAE,GAAG,EAAE,CAAC,SAAS;YACtB,KAAK,EAAE,GAAG,EAAE,CAAC,QAAQ;SACtB,CAAA;IACH,CAAC;IAED,QAAQ;IACR,CAAC;;;YAtBF,SAAS,SAAC;gBACT,QAAQ,EAAE,kBAAkB;gBAC5B,gRAA4C;;aAE7C;;;4CAKc,MAAM,SAAC,aAAa","sourcesContent":["import { Component, Inject, OnInit } from '@angular/core';\nimport { Command } from '@coolon/pectin';\nimport { CommandFace } from '../../../components/commands/command-face';\nimport { Activity, ACTIVITY_DATA } from '../../activity';\nimport { Alert } from '../../alert';\n\n@Component({\n  selector: 'aup-alert-dialog',\n  templateUrl: './alert-dialog.component.html',\n  styleUrls: ['./alert-dialog.component.scss']\n})\nexport class AlertDialogComponent extends Activity<Alert, void> implements OnInit {\n\n  readonly confirmFace: CommandFace;\n\n  constructor(@Inject(ACTIVITY_DATA) readonly alert: Alert) {\n    super();\n    this.confirmCommand = Command.create(() => {\n      this.done();\n    });\n    this.confirmFace = {\n      text: () => alert.ok(),\n      color: () => \"primary\",\n      style: () => \"raised\"\n    }\n  }\n\n  ngOnInit() {\n  }\n\n}\n"]}

package/esm2015/lib/interaction/components/alert-dialog/alert-dialog.component.metadata.json

@@ -1 +1 @@
-[{"__symbolic":"module","version":4,"metadata":{"AlertDialogComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../activity","name":"Activity","line":9,"character":42},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":4,"character":1},"arguments":[{"selector":"aup-alert-dialog","template":"<h3 matDialogTitle *ngIf=\"alert.title\">{{alert.title()}}</h3>\n<div matDialogContent>\n  <p *ngFor=\"let line of alert.content()\">{{line}}</p>\n</div>\n<div matDialogActions>\n  <button mat-raised-button color=\"primary\" (click)=\"done()\" data-cy=\"close-button\">{{alert.ok()}}</button>\n</div>\n","styles":[":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{align-items:flex-end;justify-content:flex-end;margin-bottom:0!important;padding:0}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":11,"character":15},"arguments":[{"__symbolic":"reference","module":"../../activity","name":"ACTIVITY_DATA","line":11,"character":22}]}]],"parameters":[{"__symbolic":"reference","module":"../../alert","name":"Alert","line":11,"character":53}]}],"ngOnInit":[{"__symbolic":"method"}]}}}}]
+[{"__symbolic":"module","version":4,"metadata":{"AlertDialogComponent":{"__symbolic":"class","extends":{"__symbolic":"reference","module":"../../activity","name":"Activity","line":11,"character":42},"decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"selector":"aup-alert-dialog","template":"<aup-activity-title *ngIf=\"alert.title\">{{alert.title()}}</aup-activity-title>\n<aup-activity-body>\n  <p *ngFor=\"let line of alert.content()\">{{line}}</p>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\"></aup-activity-actions>\n","styles":[":host{display:block;padding:var(--aup-default-padding)}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{align-items:flex-end;justify-content:flex-end;margin-bottom:0!important;padding:0}"]}]}],"members":{"__ctor__":[{"__symbolic":"constructor","parameterDecorators":[[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Inject","line":15,"character":15},"arguments":[{"__symbolic":"reference","module":"../../activity","name":"ACTIVITY_DATA","line":15,"character":22}]}]],"parameters":[{"__symbolic":"reference","module":"../../alert","name":"Alert","line":15,"character":53}]}],"ngOnInit":[{"__symbolic":"method"}]}}}}]