@coolon/angular-ui-powerups 3.17.1 → 3.17.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (25) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/assets/table.scss +14 -9
  3. package/bundles/coolon-angular-ui-powerups.umd.js +57 -14
  4. package/bundles/coolon-angular-ui-powerups.umd.js.map +1 -1
  5. package/bundles/coolon-angular-ui-powerups.umd.min.js +1 -1
  6. package/bundles/coolon-angular-ui-powerups.umd.min.js.map +1 -1
  7. package/coolon-angular-ui-powerups.metadata.json +1 -1
  8. package/esm2015/lib/components/card-container/card-container.component.js +1 -1
  9. package/esm2015/lib/components/card-container/card-container.component.metadata.json +1 -1
  10. package/esm2015/lib/components/components.module.ngfactory.js.map +1 -1
  11. package/esm2015/lib/components/table/abstract-table-model.js +24 -2
  12. package/esm2015/lib/components/table/abstract-table-model.js.map +1 -1
  13. package/esm2015/lib/components/table/abstract-table-model.metadata.json +1 -1
  14. package/esm2015/lib/components/table/table.component.js +14 -4
  15. package/esm2015/lib/components/table/table.component.js.map +1 -1
  16. package/esm2015/lib/components/table/table.component.metadata.json +1 -1
  17. package/esm2015/lib/interaction/components/activity-actions/activity-actions.component.js +9 -6
  18. package/esm2015/lib/interaction/components/activity-actions/activity-actions.component.js.map +1 -1
  19. package/esm2015/lib/interaction/components/activity-actions/activity-actions.component.metadata.json +1 -1
  20. package/fesm2015/coolon-angular-ui-powerups.js +48 -13
  21. package/fesm2015/coolon-angular-ui-powerups.js.map +1 -1
  22. package/lib/components/table/abstract-table-model.d.ts +5 -1
  23. package/lib/components/table/table.component.d.ts +2 -0
  24. package/lib/interaction/components/activity-actions/activity-actions.component.d.ts +9 -6
  25. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,20 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
4
 
5
+ ### [3.17.3](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.17.2...v3.17.3) (2021-03-01)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * last visible column not computing until visibility was changed ([f3e70d6](https://bitbucket.org/coolon/angular-ui-powerups/commit/f3e70d6476a2433afc07e623907dc38e5552f43c))
11
+
12
+ ### [3.17.2](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.17.1...v3.17.2) (2021-02-28)
13
+
14
+
15
+ ### Bug Fixes
16
+
17
+ * fix aup-table last column padding to account for column visiblity ([12c5d3d](https://bitbucket.org/coolon/angular-ui-powerups/commit/12c5d3dc258e180b2f42c3ef1b89e55a3fad8c10))
18
+
5
19
  ### [3.17.1](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.17.0...v3.17.1) (2021-02-28)
6
20
 
7
21
 
package/assets/table.scss CHANGED
@@ -16,10 +16,18 @@ aup-table {
16
16
  }
17
17
  }
18
18
 
19
- th.mat-header-cell:first-of-type, td.mat-cell:first-of-type, td.mat-footer-cell:first-of-type {
19
+ th.mat-header-cell:first-of-type,
20
+ td.mat-cell:first-of-type,
21
+ td.mat-footer-cell:first-of-type {
20
22
  padding-left: 0;
21
23
  }
22
24
 
25
+ th.mat-header-cell:last-of-type,
26
+ td.mat-cell:last-of-type,
27
+ td.mat-footer-cell:last-of-type {
28
+ padding-right: 0;
29
+ }
30
+
23
31
  tr {
24
32
  &.enable-hover:hover {
25
33
  background-color: var(--resolved-row-hover-background-color);
@@ -45,6 +53,7 @@ aup-table {
45
53
  white-space: nowrap;
46
54
  }
47
55
  }
56
+
48
57
  }
49
58
 
50
59
  aup-table-cell-renderer, aup-table-header-cell-renderer {
@@ -53,16 +62,12 @@ aup-table {
53
62
  align-items: stretch;
54
63
  justify-content: center;
55
64
  height: 100%;
65
+ min-height: 47px; // same as mat table row height - border bottom.
56
66
 
57
- &.first-column {
58
- padding-left: var(--default-column-gap);
59
- }
60
-
61
- &:not(.first-column) {
62
- padding-left: var(--default-column-gap);
67
+ padding-left: var(--default-column-gap);
68
+ &.last-visible-column {
69
+ padding-right: var(--default-column-gap);
63
70
  }
64
-
65
- min-height: 47px; // same as mat table row height - border bottom.
66
71
  }
67
72
 
68
73
  aup-table-cell-renderer {
@@ -729,7 +729,7 @@
729
729
  { type: i0.Component, args: [{
730
730
  selector: 'aup-card-container',
731
731
  template: "<div class=\"card-container\">\n <ng-content></ng-content>\n\n <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n </div>\n\n <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n </div>\n\n</div>\n",
732
- styles: [":root{--aup-default-background:#fff;--aup-default-padding:var(--default-padding,18px)}aup-activity-title{font-family:Roboto,Helvetica Neue,sans-serif;font-size:20px;letter-spacing:normal;line-height:32px}aup-activity-body{padding:var(--default-padding) 0}.router-outlet-container>*{bottom:0;left:0;position:absolute;right:0;top:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context,.dialog-interaction-context mat-dialog-container{max-height:95vh!important;max-width:95vw!important}.dialog-interaction-context mat-dialog-container{padding:0}.activity-outlet-wrapper{align-items:stretch;display:flex;flex-direction:column}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component mat-form-field .mat-form-field-prefix{align-items:center;align-self:flex-end;display:inline-flex;flex-direction:row;height:35px}.aup-input-component mat-form-field .mat-form-field-suffix .mat-icon-button{line-height:2.5em}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{border-bottom:0;padding-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap,24px);--resolved-row-hover-background-color:var(--row-hover-background-color,rgba(0,0,0,0.05));--resolved-row-selected-background-color:var(--row-selected-background-color,rgba(0,0,255,0.04))}aup-table.hide-header .mat-table thead,aup-table .mat-table td.hide,aup-table .mat-table th.hide{display:none}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table tr.aup-row-selected,aup-table .mat-table tr.aup-row-selected.enable-hover:hover{background-color:var(--resolved-row-selected-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table .mat-table .mat-cell:not(.flex),aup-table .mat-table .mat-header-cell:not(.flex){white-space:nowrap;width:1px}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:47px}aup-table aup-table-cell-renderer.first-column,aup-table aup-table-cell-renderer:not(.first-column),aup-table aup-table-header-cell-renderer.first-column,aup-table aup-table-header-cell-renderer:not(.first-column){padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{flex:1;padding-left:var(--default-column-gap)}:root{--aup-command-face-icon-gap:8px;--aup-fa-icon-width:18px;--aup-icon-width:24px}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width))/2);position:relative}aup-icon fa-icon .svg-inline--fa{height:var(--aup-fa-icon-width)!important;left:var(--fa-icon-offset);position:absolute;top:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-background:var(--card-background,#fcfcfb);--resolved-card-gap:var(--card-gap,16px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-width:var(--card-width,300px);background:var(--resolved-card-background);display:block;flex:1}.card-container{box-sizing:border-box;display:-ms-grid;display:grid;grid-gap:var(--resolved-card-gap);grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(var(--resolved-card-min-height),var(--resolved-card-height)));max-width:100%;min-height:calc(var(--resolved-card-height) + 2*var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2*var(--resolved-card-gap));padding:var(--resolved-card-gap);width:calc((var(--resolved-card-width) + var(--resolved-card-gap))*2 + var(--grid-gap))}.add-card-container{align-items:center;background-color:hsla(0,0%,100%,.8);border:2px dashed rgba(0,0,0,.1);border-radius:6px;box-sizing:border-box;color:rgba(0,0,0,.54);cursor:pointer;display:flex;flex-direction:column;font-weight:300;height:var(--resolved-card-height);justify-content:center;min-height:var(--resolved-card-min-height);transition:all .28s cubic-bezier(.4,0,.2,1);width:var(--resolved-card-width)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{background-color:#fff;border-color:transparent;color:rgba(0,0,0,.54);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{align-items:stretch;display:flex;flex-direction:column;height:var(--resolved-card-height);justify-content:stretch;width:var(--resolved-card-width)}"]
732
+ styles: [":root{--aup-default-background:#fff;--aup-default-padding:var(--default-padding,18px)}aup-activity-title{font-family:Roboto,Helvetica Neue,sans-serif;font-size:20px;letter-spacing:normal;line-height:32px}aup-activity-body{padding:var(--default-padding) 0}.router-outlet-container>*{bottom:0;left:0;position:absolute;right:0;top:0}[no-tab-header]>mat-tab-header{display:none}[full-height-tabs] .mat-tab-body-wrapper,mat-tab-group.full-height-tabs .mat-tab-body-wrapper{flex:1}[full-height-tabs] .mat-tab-body-wrapper .mat-tab-body-content,[full-height-tabs] .mat-tab-body-wrapper mat-tab-body,mat-tab-group.full-height-tabs .mat-tab-body-wrapper .mat-tab-body-content,mat-tab-group.full-height-tabs .mat-tab-body-wrapper mat-tab-body{display:flex;flex-direction:column;justify-content:stretch}.dialog-interaction-context,.dialog-interaction-context mat-dialog-container{max-height:95vh!important;max-width:95vw!important}.dialog-interaction-context mat-dialog-container{padding:0}.activity-outlet-wrapper{align-items:stretch;display:flex;flex-direction:column}.aup-popup-interaction-panel{background:var(--aup-default-background,#fff);box-shadow:0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.aup-input-activity{padding:calc(var(--aup-default-padding)/2)}.aup-input-component{display:block}.aup-input-component input,.aup-input-component mat-form-field{width:100%}.aup-input-component input mat-hint.faux-error,.aup-input-component mat-form-field mat-hint.faux-error{color:#f44336}.aup-input-component mat-form-field .mat-form-field-prefix{align-items:center;align-self:flex-end;display:inline-flex;flex-direction:row;height:35px}.aup-input-component mat-form-field .mat-form-field-suffix .mat-icon-button{line-height:2.5em}.aup-input-component.dense mat-form-field .mat-form-field-infix{border-top:none}.aup-input-component.dense mat-form-field .mat-form-field-flex{padding-top:0}.aup-input-component.dense mat-form-field .mat-form-field-wrapper{border-bottom:0;padding-bottom:0}.aup-input-component.dense mat-form-field .mat-form-field-underline{bottom:0}.aup-input-component.dense mat-form-field.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label-wrapper{display:none}.aup-input-component.dense mat-form-field.mat-form-field-appearance-standard.mat-form-field-has-label .mat-select:not(.mat-select-empty) .mat-select-arrow-wrapper{transform:translateY(0)}aup-table-cell-renderer>.aup-input-component .mat-form-field-flex{padding-top:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-infix{width:0}aup-table-cell-renderer>.aup-input-component .mat-form-field-label-wrapper{display:none}aup-table{--default-column-gap:var(--column-gap,24px);--resolved-row-hover-background-color:var(--row-hover-background-color,rgba(0,0,0,0.05));--resolved-row-selected-background-color:var(--row-selected-background-color,rgba(0,0,255,0.04))}aup-table.hide-header .mat-table thead,aup-table .mat-table td.hide,aup-table .mat-table th.hide{display:none}aup-table .mat-table td.mat-cell:first-of-type,aup-table .mat-table td.mat-footer-cell:first-of-type,aup-table .mat-table th.mat-header-cell:first-of-type{padding-left:0}aup-table .mat-table td.mat-cell:last-of-type,aup-table .mat-table td.mat-footer-cell:last-of-type,aup-table .mat-table th.mat-header-cell:last-of-type{padding-right:0}aup-table .mat-table tr.enable-hover:hover{background-color:var(--resolved-row-hover-background-color)}aup-table .mat-table tr.aup-row-selected,aup-table .mat-table tr.aup-row-selected.enable-hover:hover{background-color:var(--resolved-row-selected-background-color)}aup-table .mat-table td.enable-cursor{cursor:pointer}aup-table .mat-table .mat-cell:not(.flex),aup-table .mat-table .mat-header-cell:not(.flex){white-space:nowrap;width:1px}aup-table aup-table-cell-renderer,aup-table aup-table-header-cell-renderer{align-items:stretch;display:flex;flex-direction:column;height:100%;justify-content:center;min-height:47px;padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.last-visible-column,aup-table aup-table-header-cell-renderer.last-visible-column{padding-right:var(--default-column-gap)}aup-table aup-table-cell-renderer.fillCell{justify-content:stretch;padding-left:0!important}aup-table aup-table-cell-renderer.padChild>:first-child{flex:1;padding-left:var(--default-column-gap)}:root{--aup-command-face-icon-gap:8px;--aup-fa-icon-width:18px;--aup-icon-width:24px}aup-icon{--fa-icon-offset:calc((var(--aup-icon-width) - var(--aup-fa-icon-width))/2);position:relative}aup-icon fa-icon .svg-inline--fa{height:var(--aup-fa-icon-width)!important;left:var(--fa-icon-offset);position:absolute;top:var(--fa-icon-offset);width:var(--aup-fa-icon-width)!important}.mat-menu-panel aup-icon .svg-inline--fa{opacity:.54}:host{--resolved-card-background:var(--card-background,#fcfcfb);--resolved-card-gap:var(--card-gap,16px);--resolved-card-height:var(--card-height,auto);--resolved-card-min-height:var(--card-min-height,auto);--resolved-card-width:var(--card-width,300px);background:var(--resolved-card-background);display:block;flex:1}.card-container{box-sizing:border-box;display:-ms-grid;display:grid;grid-gap:var(--resolved-card-gap);grid-template-columns:repeat(auto-fill,var(--resolved-card-width));grid-template-rows:repeat(auto-fit,minmax(var(--resolved-card-min-height),var(--resolved-card-height)));max-width:100%;min-height:calc(var(--resolved-card-height) + 2*var(--resolved-card-gap));min-width:calc(var(--resolved-card-width) + 2*var(--resolved-card-gap));padding:var(--resolved-card-gap);width:calc((var(--resolved-card-width) + var(--resolved-card-gap))*2 + var(--grid-gap))}.add-card-container{align-items:center;background-color:hsla(0,0%,100%,.8);border:2px dashed rgba(0,0,0,.1);border-radius:6px;box-sizing:border-box;color:rgba(0,0,0,.54);cursor:pointer;display:flex;flex-direction:column;font-weight:300;height:var(--resolved-card-height);justify-content:center;min-height:var(--resolved-card-min-height);transition:all .28s cubic-bezier(.4,0,.2,1);width:var(--resolved-card-width)}.add-card-container mat-icon{font-size:200%}.add-card-container:hover{background-color:#fff;border-color:transparent;color:rgba(0,0,0,.54);transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1)}.add-card-container:hover:hover{box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.add-card-template-container{align-items:stretch;display:flex;flex-direction:column;height:var(--resolved-card-height);justify-content:stretch;width:var(--resolved-card-width)}"]
733
733
  },] }
734
734
  ];
735
735
  CardContainerComponent.ctorParameters = function () { return []; };
@@ -3097,12 +3097,32 @@
3097
3097
  }
3098
3098
  return RowClass;
3099
3099
  }());
3100
+ var VisibleColumnListModel = /** @class */ (function (_super) {
3101
+ __extends(VisibleColumnListModel, _super);
3102
+ function VisibleColumnListModel() {
3103
+ var _this = _super.apply(this, __spread(arguments)) || this;
3104
+ _this.columns = [];
3105
+ return _this;
3106
+ }
3107
+ VisibleColumnListModel.prototype.addColumn = function (column) {
3108
+ var _this = this;
3109
+ this.runInTransaction(function () {
3110
+ _this.columns.push(column);
3111
+ _this.trackSource(column.visible);
3112
+ });
3113
+ };
3114
+ VisibleColumnListModel.prototype.doComputeValue = function () {
3115
+ return this.columns.filter(function (c) { return c.visible.value; });
3116
+ };
3117
+ return VisibleColumnListModel;
3118
+ }(pectin.AbstractComputedListModel));
3100
3119
  exports.AbstractTableModel = /** @class */ (function (_super) {
3101
3120
  __extends(AbstractTableModel, _super);
3102
3121
  function AbstractTableModel(sourceOfTruth) {
3103
3122
  var _this = _super.call(this) || this;
3104
3123
  _this.sourceOfTruth = sourceOfTruth;
3105
3124
  _this._columns = new pectin.MutableListModel();
3125
+ _this._visibleColumnTracker = new VisibleColumnListModel();
3106
3126
  _this._editorSessions = new pectin.MutableListModel();
3107
3127
  _this.rowClassNamePredicates = [];
3108
3128
  _this.rowClickListeners = new pectin.EventListenerList();
@@ -3121,6 +3141,8 @@
3121
3141
  _this.dataSource = chain(_this.sourceOfTruth).replaceAll(_this.rowsBeingEdited);
3122
3142
  _this.firstEditableColumn = chain(_this.columns).select(function (c) { return c.hasEditorPortal(); }).first();
3123
3143
  _this.hasColumnsWithRowSelectionExplicitlyEnabled = chain(_this._columns).findIndex(function (column) { return column.isRowSelectionExplicitlyEnabled(); }).isGreaterThanOrEqualTo(0);
3144
+ _this.firstVisibleColumn = chain(_this._visibleColumnTracker).first();
3145
+ _this.lastVisibleColumn = chain(_this._visibleColumnTracker).last();
3124
3146
  return _this;
3125
3147
  }
3126
3148
  Object.defineProperty(AbstractTableModel.prototype, "rowsBeingEdited", {
@@ -3137,6 +3159,13 @@
3137
3159
  enumerable: false,
3138
3160
  configurable: true
3139
3161
  });
3162
+ Object.defineProperty(AbstractTableModel.prototype, "visibleColumns", {
3163
+ get: function () {
3164
+ return this._visibleColumnTracker.readonly;
3165
+ },
3166
+ enumerable: false,
3167
+ configurable: true
3168
+ });
3140
3169
  AbstractTableModel.prototype.pluck = function (property, options) {
3141
3170
  var _this = this;
3142
3171
  var columnId = (options === null || options === void 0 ? void 0 : options.columnId) || property.toString();
@@ -3152,7 +3181,7 @@
3152
3181
  pectin.assert.isNil(this.selectionColumnModel);
3153
3182
  var columnId = 'selection-column';
3154
3183
  this.selectionColumnModel = new SelectionColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, selectionModel);
3155
- this.addRowClass("aup-row-selected", function (row) { return _this.selectionColumnModel.isSelected(row); });
3184
+ this.addRowClass('aup-row-selected', function (row) { return _this.selectionColumnModel.isSelected(row); });
3156
3185
  return this.addColumn(this.selectionColumnModel);
3157
3186
  };
3158
3187
  AbstractTableModel.prototype.addEditControls = function (saveCommand) {
@@ -3195,6 +3224,7 @@
3195
3224
  }
3196
3225
  else {
3197
3226
  this._columns.push(column);
3227
+ this._visibleColumnTracker.addColumn(column);
3198
3228
  }
3199
3229
  return column;
3200
3230
  };
@@ -3329,7 +3359,7 @@
3329
3359
  // TODO: support user defined header and row heights via css vars.
3330
3360
  _this.headerHeight = new pectin.MutableValueModel(56);
3331
3361
  _this.rowHeight = new pectin.MutableValueModel(48);
3332
- var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, when = _a.when;
3362
+ var _b = pectin.Dsl.disposeWith(_this), chain = _b.chain, when = _b.when;
3333
3363
  var actualHeaderHeight = chain(_this.showHeaderModel).map(function (show) {
3334
3364
  return show ? _this.headerHeight.value : 0;
3335
3365
  }, { dependsOn: _this.headerHeight });
@@ -3353,7 +3383,7 @@
3353
3383
  configurable: true
3354
3384
  });
3355
3385
  TableComponent.prototype.ngOnInit = function () {
3356
- var _a = pectin.Dsl.disposeWith(this), chain = _a.chain, valueOf = _a.valueOf, before = _a.before, when = _a.when, after = _a.after, observe = _a.observe, switchOn = _a.switchOn;
3386
+ var _b = pectin.Dsl.disposeWith(this), chain = _b.chain, valueOf = _b.valueOf, before = _b.before, when = _b.when, after = _b.after, observe = _b.observe, switchOn = _b.switchOn;
3357
3387
  this.columns = chain(this.tableModel.columns);
3358
3388
  this.columnIds = chain(this.columns).pluck('columnId');
3359
3389
  this.columnsById = chain(this.columns).indexBy('columnId');
@@ -3370,12 +3400,22 @@
3370
3400
  TableComponent.prototype.notifyCellClicked = function (columnModel, row) {
3371
3401
  this.tableModel._notifyCellClicked(columnModel, row);
3372
3402
  };
3403
+ // @Trace()
3404
+ TableComponent.prototype.isFirstVisibleColumn = function (columnId) {
3405
+ var _a;
3406
+ return ((_a = this.tableModel.firstVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
3407
+ };
3408
+ // @Trace()
3409
+ TableComponent.prototype.isLastVisibleColumn = function (columnId) {
3410
+ var _a;
3411
+ return ((_a = this.tableModel.lastVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
3412
+ };
3373
3413
  return TableComponent;
3374
3414
  }(ResizeAwareComponent));
3375
3415
  TableComponent.decorators = [
3376
3416
  { type: i0.Component, args: [{
3377
3417
  selector: 'aup-table',
3378
- 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",
3418
+ 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-visible-column]=\"isFirstVisibleColumn(column.columnId)\"\n [class.last-visible-column]=\"isLastVisibleColumn(column.columnId)\"\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-visible-column]=\"isFirstVisibleColumn(column.columnId)\"\n [class.last-visible-column]=\"isLastVisibleColumn(column.columnId)\"\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",
3379
3419
  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}"]
3380
3420
  },] }
3381
3421
  ];
@@ -3387,8 +3427,8 @@
3387
3427
  tableModel: [{ type: i0.Input }],
3388
3428
  showHeaderModel: [{ type: i0.Input }],
3389
3429
  showHeader: [{ type: i0.Input }],
3390
- enableScrolling: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.enable-scrolling",] }],
3391
- hideHeader: [{ type: i0.HostBinding, args: ["class.hide-header",] }]
3430
+ enableScrolling: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.enable-scrolling',] }],
3431
+ hideHeader: [{ type: i0.HostBinding, args: ['class.hide-header',] }]
3392
3432
  };
3393
3433
  __decorate([
3394
3434
  pectin.TrackExternal(),
@@ -3399,7 +3439,7 @@
3399
3439
  __metadata("design:type", pectin.ValueModel)
3400
3440
  ], TableComponent.prototype, "showHeaderModel", void 0);
3401
3441
  __decorate([
3402
- pectin.StoreInValueModel("showHeaderModel"),
3442
+ pectin.StoreInValueModel('showHeaderModel'),
3403
3443
  __metadata("design:type", Boolean)
3404
3444
  ], TableComponent.prototype, "showHeader", void 0);
3405
3445
 
@@ -4504,19 +4544,22 @@
4504
4544
 
4505
4545
  /**
4506
4546
  * @example
4507
- * <aup-activity-actions [style]="{confirm: saveFace, cancel: cancelFace}">
4547
+ * <aup-activity-actions [confirmFace]="saveFace" [cancelFace]="cancelFace">
4508
4548
  * </aup-activity-actions>
4509
4549
  *
4550
+ * <aup-activity-actions [faces]="{confirm: saveFace, cancel: cancelFace}">
4551
+ * </aup-activity-actions>
4552
+ *
4510
4553
  * // Running `ng g @coolon/angular-ui-powerups:aup-i18n` will install default
4511
4554
  * // style definitions
4512
- * <aup-activity-actions [style]="I18n.aup.components.activityActions.styles.okCancelIcons">
4555
+ * <aup-activity-actions [faces]="I18n.aup.components.activityActions.styles.okCancelIcons">
4513
4556
  * </aup-activity-actions>
4514
4557
  *
4515
4558
  * // you can also add additional content that will be displayed along with the buttons.
4516
4559
  * // The location of the content depends on the alignment attribute.
4517
4560
  * <aup-activity-actions
4518
4561
  * align="stretch"
4519
- * [style]="I18n.aup.components.activityActions.styles.okCancelIcons">
4562
+ * [faces]="I18n.aup.components.activityActions.styles.okCancelIcons">
4520
4563
  * <span>This content will be between the two commands</span>
4521
4564
  * </aup-activity-actions>
4522
4565
  */
@@ -4538,7 +4581,7 @@
4538
4581
  });
4539
4582
  Object.defineProperty(ActivityActionsComponent.prototype, "style", {
4540
4583
  /**
4541
- * @deprecated use #commandFaces instead.
4584
+ * @deprecated use #faces instead.
4542
4585
  */
4543
4586
  set: function (style) {
4544
4587
  this.faces = style;
@@ -4563,10 +4606,10 @@
4563
4606
  ActivityActionsComponent.prototype.ngOnInit = function () {
4564
4607
  };
4565
4608
  ActivityActionsComponent.prototype.hasConfirmFace = function () {
4566
- return this.confirmFace;
4609
+ return !!this.confirmFace;
4567
4610
  };
4568
4611
  ActivityActionsComponent.prototype.hasCancelFace = function () {
4569
- return this.cancelFace;
4612
+ return !!this.cancelFace;
4570
4613
  };
4571
4614
  ActivityActionsComponent.prototype.initCommands = function (activity) {
4572
4615
  this.confirmCommand = activity.confirmCommand;