@coolon/angular-ui-powerups 3.17.2 → 3.18.0

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.
 
+## [3.18.0](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.17.3...v3.18.0) (2021-03-01)
+
+
+### Features
+
+* #AUP-119 ([e54ec11](https://bitbucket.org/coolon/angular-ui-powerups/commit/e54ec11fa5002fd2bfcec289a08d42e498eda6c1)), closes [#AUP-119](https://bitbucket.org/coolon/angular-ui-powerups/issues/AUP-119)
+
+### [3.17.3](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.17.2...v3.17.3) (2021-03-01)
+
+
+### Bug Fixes
+
+* last visible column not computing until visibility was changed ([f3e70d6](https://bitbucket.org/coolon/angular-ui-powerups/commit/f3e70d6476a2433afc07e623907dc38e5552f43c))
+
 ### [3.17.2](https://bitbucket.org/coolon/angular-ui-powerups/compare/v3.17.1...v3.17.2) (2021-02-28)
 
 

package/assets/activities.scss

@@ -1,12 +1,69 @@
-@import "./typography";
+@use "~@angular/material/theming" as ng;
+@use "sass:map";
 
-aup-activity-title {
-  font-family: mat-font-family($typographyConfig);
-  font-size:  mat-font-size($typographyConfig, title);
-  line-height:  mat-line-height($typographyConfig, title);
-  letter-spacing: mat-letter-spacing($typographyConfig, title);
-}
+@mixin apply-theme($color-config, $typography-config) {
+
+  :root {
+    --aup-activity-padding: var(--default-padding);
+  }
+
+  // Extract the palettes you need from the theme definition.
+  $primary-palette: map-get($color-config, primary);
+  $accent-palette: map-get($color-config, accent);
+  $warn-palette: map-get($color-config, warn);
+
+  .dialog-interaction-context {
+    --aup-activity-padding: calc(var(--default-padding) / 1.5);
+  }
+
+  aup-activity-title {
+    display: block;
+    font-family: ng.mat-font-family($typography-config);
+    font-size: ng.mat-font-size($typography-config, title);
+    line-height: ng.mat-line-height($typography-config, title);
+    letter-spacing: ng.mat-letter-spacing($typography-config, title);
+    padding: var(--aup-activity-padding);
+
+    &:not(.transparent-background) {
+      padding: calc(var(--aup-activity-padding) / 2) var(--aup-activity-padding);
+    }
+
+    &[color=primary] {
+      $palette: $primary-palette;
+      color: ng.mat-color($palette, default-contrast);
+      background-color: ng.mat-color($palette, default);
+    }
 
-aup-activity-body {
-  padding: var(--default-padding) 0;
+    &[color=accent] {
+      $palette: $accent-palette;
+      color: ng.mat-color($palette, default-contrast);
+      background-color: ng.mat-color($palette, default);
+    }
+
+    &[color=warn] {
+      $palette: $warn-palette;
+      color: ng.mat-color($palette, default-contrast);
+      background-color: ng.mat-color($palette, default);
+    }
+  }
+
+  aup-activity-body {
+    display: block;
+
+    &:not(.full-width) {
+      padding-left: var(--aup-activity-padding);
+      padding-right: var(--aup-activity-padding);
+    }
+  }
+
+  aup-activity-title:not(.transparent-background) + aup-activity-body {
+    padding-top: var(--aup-activity-padding);
+  }
+
+  aup-activity-actions {
+    display: block;
+    padding: var(--aup-activity-padding);
+  }
 }
+
+

package/assets/form.scss

@@ -1,3 +1,5 @@
+@import "~@angular/material/theming";
+
 .aup-input-component {
 
   display: block;

package/assets/interaction.scss

@@ -1,3 +1,5 @@
+@import "~@angular/material/theming";
+
 .dialog-interaction-context {
   max-width: 95vw !important;
   max-height: 95vh !important;

package/assets/mixins.scss

@@ -1,8 +1,9 @@
+@use "~@angular/material/theming" as ng;
+
 @mixin elevate-on-hover($height:2) {
-  @include mat-elevation-transition;
-  //@include mat-elevation(2);
+  @include ng.mat-elevation-transition();
   &:hover {
-    @include mat-elevation($height);
+    @include ng.mat-elevation($height);
   }
 }
 
@@ -15,11 +16,11 @@
   cursor: pointer;
   color: $color;
   background-color: $background-color;
-  transition: all $mat-elevation-transition-duration $mat-elevation-transition-timing-function;
+  transition: all ng.$mat-elevation-transition-duration ng.$mat-elevation-transition-timing-function;
 
   &:hover {
     @include elevate-on-hover(4);
-    transition: all $mat-elevation-transition-duration $mat-elevation-transition-timing-function;
+    transition: all ng.$mat-elevation-transition-duration ng.$mat-elevation-transition-timing-function;
     border-color: transparent;
     background-color: $background-hover-color;
     color: $hover-color;

package/assets/styles.scss

@@ -1,17 +1,35 @@
-@import "~@angular/material/theming";
+@use "~@angular/material/theming" as ng;
 
-:root {
-  --aup-default-padding: var(--default-padding, 18px);
-  --aup-default-background: white;
-}
+@use "./mixins";
+@use "./activities";
+@use "./router";
+@use "./tabs";
+@use "./interaction";
+@use "./form";
+@use "./table";
+@use "./commands";
+@use "./icons";
+
+
+@mixin apply-light-theme($primary, $accent, $warn:ng.mat-palette(ng.$mat-red), $typography: ng.mat-typography-config()) {
+
+  $theme: ng.mat-light-theme((
+    color: (
+      primary: $primary,
+      accent: $accent,
+      warn: $warn,
+    )
+  ));
 
-@import "./mixins";
-@import "./typography";
-@import "./activities";
-@import "./router";
-@import "./tabs";
-@import "./interaction";
-@import "./form";
-@import "./table";
-@import "./commands";
-@import "./icons";
+  @include ng.mat-core($typography);
+  @include ng.angular-material-theme($theme);
+
+  $color-config: ng.mat-get-color-config($theme);
+
+  @include activities.apply-theme($color-config, $typography);
+
+  :root {
+    --aup-default-padding: var(--default-padding, 18px);
+    --aup-default-background: white;
+  }
+}

package/assets/table.scss

@@ -16,10 +16,18 @@ aup-table {
       }
     }
 
-    th.mat-header-cell:first-of-type, td.mat-cell:first-of-type, td.mat-footer-cell:first-of-type {
+    th.mat-header-cell:first-of-type,
+    td.mat-cell:first-of-type,
+    td.mat-footer-cell:first-of-type {
       padding-left: 0;
     }
 
+    th.mat-header-cell:last-of-type,
+    td.mat-cell:last-of-type,
+    td.mat-footer-cell:last-of-type {
+      padding-right: 0;
+    }
+
     tr {
       &.enable-hover:hover {
         background-color: var(--resolved-row-hover-background-color);
@@ -36,7 +44,7 @@ aup-table {
 
     //TODO: think about this a bit more.  Table with acts a bit like flex:
     // - columns for which the width is 0 (or not defined) will expand equally to fill the table.
-    // - columns with an explicit with will try to remain that width, but will expand to fit thier content.
+    // - columns with an explicit with will try to remain that width, but will expand to fit their content.
     // - extra space will be allocated to columns that have the same width... e.g. setting all columns to 1px results
     //   in the same scenario as not specifying the width.
     .mat-cell, .mat-header-cell {
@@ -45,6 +53,7 @@ aup-table {
         white-space: nowrap;
       }
     }
+
   }
 
   aup-table-cell-renderer, aup-table-header-cell-renderer {
@@ -53,14 +62,12 @@ aup-table {
     align-items: stretch;
     justify-content: center;
     height: 100%;
+    min-height: 47px; // same as mat table row height - border bottom.
 
     padding-left: var(--default-column-gap);
-
-    &.last-column {
+    &.last-visible-column {
       padding-right: var(--default-column-gap);
     }
-
-    min-height: 47px; // same as mat table row height - border bottom.
   }
 
   aup-table-cell-renderer {

package/bundles/coolon-angular-ui-powerups.umd.js

@@ -729,7 +729,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-card-container',
                     template: "<div class=\"card-container\">\n  <ng-content></ng-content>\n\n  <div class=\"add-card-container\" *ngIf=\"addCardCommand.enabled.value\" [pectinCommand]=\"addCardCommand\">\n    <aup-command-face *ngIf=\"addCardFace\" [faces]=\"[addCardFace]\"></aup-command-face>\n    <aup-icon *ngIf=\"!addCardFace\" icon=\"mat:add\"></aup-icon>\n  </div>\n\n  <div class=\"add-card-template\" *ngIf=\"addCardTemplate\">\n    <ng-container [ngTemplateOutlet]=\"addCardTemplate\"></ng-container>\n  </div>\n\n</div>\n",
-                    styles: [":root{--aup-default-background:#fff;--aup-default-padding:var(--default-padding,18px)}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;padding-left:var(--default-column-gap)}aup-table aup-table-cell-renderer.last-column,aup-table aup-table-header-cell-renderer.last-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)}"]
+                    styles: [":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)}"]
                 },] }
     ];
     CardContainerComponent.ctorParameters = function () { return []; };
@@ -3105,8 +3105,11 @@
             return _this;
         }
         VisibleColumnListModel.prototype.addColumn = function (column) {
-            this.columns.push(column);
-            this.trackSource(column.visible);
+            var _this = this;
+            this.runInTransaction(function () {
+                _this.columns.push(column);
+                _this.trackSource(column.visible);
+            });
         };
         VisibleColumnListModel.prototype.doComputeValue = function () {
             return this.columns.filter(function (c) { return c.visible.value; });
@@ -3178,7 +3181,7 @@
             pectin.assert.isNil(this.selectionColumnModel);
             var columnId = 'selection-column';
             this.selectionColumnModel = new SelectionColumnModel(columnId, function () { return _this.getColumnTextProperties(columnId); }, selectionModel);
-            this.addRowClass("aup-row-selected", function (row) { return _this.selectionColumnModel.isSelected(row); });
+            this.addRowClass('aup-row-selected', function (row) { return _this.selectionColumnModel.isSelected(row); });
             return this.addColumn(this.selectionColumnModel);
         };
         AbstractTableModel.prototype.addEditControls = function (saveCommand) {
@@ -3356,7 +3359,7 @@
             // TODO: support user defined header and row heights via css vars.
             _this.headerHeight = new pectin.MutableValueModel(56);
             _this.rowHeight = new pectin.MutableValueModel(48);
-            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, when = _a.when;
+            var _b = pectin.Dsl.disposeWith(_this), chain = _b.chain, when = _b.when;
             var actualHeaderHeight = chain(_this.showHeaderModel).map(function (show) {
                 return show ? _this.headerHeight.value : 0;
             }, { dependsOn: _this.headerHeight });
@@ -3380,7 +3383,7 @@
             configurable: true
         });
         TableComponent.prototype.ngOnInit = function () {
-            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;
+            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;
             this.columns = chain(this.tableModel.columns);
             this.columnIds = chain(this.columns).pluck('columnId');
             this.columnsById = chain(this.columns).indexBy('columnId');
@@ -3397,18 +3400,22 @@
         TableComponent.prototype.notifyCellClicked = function (columnModel, row) {
             this.tableModel._notifyCellClicked(columnModel, row);
         };
-        TableComponent.prototype.isFirstVisibleColumn = function (column) {
-            return this.tableModel.firstVisibleColumn.query().equals(column);
+        // @Trace()
+        TableComponent.prototype.isFirstVisibleColumn = function (columnId) {
+            var _a;
+            return ((_a = this.tableModel.firstVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
         };
-        TableComponent.prototype.isLastVisibleColumn = function (column) {
-            return this.tableModel.lastVisibleColumn.query().equals(column);
+        // @Trace()
+        TableComponent.prototype.isLastVisibleColumn = function (columnId) {
+            var _a;
+            return ((_a = this.tableModel.lastVisibleColumn.query().value) === null || _a === void 0 ? void 0 : _a.columnId) === columnId;
         };
         return TableComponent;
     }(ResizeAwareComponent));
     TableComponent.decorators = [
         { type: i0.Component, args: [{
                     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]=\"isFirstVisibleColumn(column)\"\n                                        [class.last-column]=\"isLastVisibleColumn(column)\"\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]=\"isFirstVisibleColumn(column)\"\n                                 [class.last-column]=\"isLastVisibleColumn(column)\"\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",
+                    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",
                     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}"]
                 },] }
     ];
@@ -3420,8 +3427,8 @@
         tableModel: [{ type: i0.Input }],
         showHeaderModel: [{ type: i0.Input }],
         showHeader: [{ type: i0.Input }],
-        enableScrolling: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.enable-scrolling",] }],
-        hideHeader: [{ type: i0.HostBinding, args: ["class.hide-header",] }]
+        enableScrolling: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.enable-scrolling',] }],
+        hideHeader: [{ type: i0.HostBinding, args: ['class.hide-header',] }]
     };
     __decorate([
         pectin.TrackExternal(),
@@ -3432,7 +3439,7 @@
         __metadata("design:type", pectin.ValueModel)
     ], TableComponent.prototype, "showHeaderModel", void 0);
     __decorate([
-        pectin.StoreInValueModel("showHeaderModel"),
+        pectin.StoreInValueModel('showHeaderModel'),
         __metadata("design:type", Boolean)
     ], TableComponent.prototype, "showHeader", void 0);
 
@@ -4758,7 +4765,7 @@
         { type: i0.Component, args: [{
                     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}"]
+                    styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{align-items:flex-end;justify-content:flex-end;margin-bottom:0!important;padding:0}"]
                 },] }
     ];
     AlertDialogComponent.ctorParameters = function () { return [
@@ -4798,6 +4805,13 @@
             enumerable: false,
             configurable: true
         });
+        Object.defineProperty(ConfirmThenDialogComponent.prototype, "titleColor", {
+            get: function () {
+                return this.isDestructive() ? 'warn' : undefined;
+            },
+            enumerable: false,
+            configurable: true
+        });
         ConfirmThenDialogComponent.prototype.isDestructive = function () {
             return this.confirm.destructive && this.confirm.destructive();
         };
@@ -4806,8 +4820,8 @@
     ConfirmThenDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-confirmation-dialog',
-                    template: "<aup-activity-title *ngIf=\"confirm.title\">{{confirm.title()}}</aup-activity-title>\n<aup-activity-body>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></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}"]
+                    template: "<aup-activity-title *ngIf=\"confirm.title\" [color]=\"titleColor\">{{confirm.title()}}</aup-activity-title>\n<aup-activity-body>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n",
+                    styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{align-items:flex-end;justify-content:flex-end;margin-bottom:0!important;padding:0}"]
                 },] }
     ];
     ConfirmThenDialogComponent.ctorParameters = function () { return [
@@ -4838,6 +4852,13 @@
         }
         ConfirmationDialogComponent.prototype.ngOnInit = function () {
         };
+        Object.defineProperty(ConfirmationDialogComponent.prototype, "titleColor", {
+            get: function () {
+                return this.isDestructive() ? 'warn' : undefined;
+            },
+            enumerable: false,
+            configurable: true
+        });
         ConfirmationDialogComponent.prototype.isDestructive = function () {
             return this.confirm.destructive && this.confirm.destructive();
         };
@@ -4846,8 +4867,8 @@
     ConfirmationDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-confirmation-dialog',
-                    template: "<aup-activity-title *ngIf=\"confirm.title\">{{confirm.title()}}</aup-activity-title>\n<aup-activity-body>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n\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}"]
+                    template: "<aup-activity-title *ngIf=\"confirm.title\" [color]=\"titleColor\">{{confirm.title()}}</aup-activity-title>\n<aup-activity-body>\n  <p *ngFor=\"let line of confirm.content()\">{{line}}</p>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\" [cancelFace]=\"cancelFace\"></aup-activity-actions>\n\n",
+                    styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{align-items:flex-end;justify-content:flex-end;margin-bottom:0!important;padding:0}"]
                 },] }
     ];
     ConfirmationDialogComponent.ctorParameters = function () { return [
@@ -5246,20 +5267,10 @@
     var ActivityBodyComponent = /** @class */ (function (_super) {
         __extends(ActivityBodyComponent, _super);
         function ActivityBodyComponent() {
-            return _super !== null && _super.apply(this, arguments) || this;
+            var _this = _super.apply(this, __spread(arguments)) || this;
+            _this.fullWidth = false;
+            return _this;
         }
-        // @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'
-        // }
         ActivityBodyComponent.prototype.ngOnInit = function () {
         };
         return ActivityBodyComponent;
@@ -5271,24 +5282,39 @@
                     styles: ["<ng-content></ng-content>\n"]
                 },] }
     ];
+    ActivityBodyComponent.propDecorators = {
+        fullWidth: [{ type: i0.Input }, { type: i0.HostBinding, args: ["class.full-width",] }]
+    };
 
     var ActivityTitleComponent = /** @class */ (function (_super) {
         __extends(ActivityTitleComponent, _super);
         function ActivityTitleComponent() {
             return _super !== null && _super.apply(this, arguments) || this;
         }
-        // @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'
-        // }
+        Object.defineProperty(ActivityTitleComponent.prototype, "hasTransparentBackground", {
+            get: function () {
+                return ___default['default'].isNil(this._hasUserTransparentBackground) ? !this._color : this._hasUserTransparentBackground;
+            },
+            /**
+             * Adjusts layout to ensure the title and body are cleanly separated with even
+             * gaps for teh case where the title component has a painted background.
+             */
+            set: function (value) {
+                this._hasUserTransparentBackground = value;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(ActivityTitleComponent.prototype, "color", {
+            get: function () {
+                return this._color;
+            },
+            set: function (color) {
+                this._color = color;
+            },
+            enumerable: false,
+            configurable: true
+        });
         ActivityTitleComponent.prototype.ngOnInit = function () {
         };
         return ActivityTitleComponent;
@@ -5300,6 +5326,10 @@
                     styles: [":host{display:block}"]
                 },] }
     ];
+    ActivityTitleComponent.propDecorators = {
+        hasTransparentBackground: [{ type: i0.Input }, { type: i0.HostBinding, args: ['class.transparent-background',] }],
+        color: [{ type: i0.Input }, { type: i0.HostBinding, args: ['attr.color',] }]
+    };
 
     var InteractionServiceRoutingAdapter = /** @class */ (function () {
         function InteractionServiceRoutingAdapter(activeInteractionContextIds, activeModalContext, createExclusiveInteractionContext) {