@coolon/angular-ui-powerups 12.4.0-alpha.73 → 12.4.0-alpha.75

package/assets/pills.scss

@@ -0,0 +1,45 @@
+@use '~@angular/material/index' as mat;
+
+@mixin pill-defaults($padding: 0.1em 0.4em) {
+  display: inline-block;
+  border-radius: 4px;
+  padding: $padding;
+  margin: 1px 0;
+}
+
+
+@mixin apply-theme($color-config, $typography-config) {
+
+  // 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);
+  $background: map-get($color-config, background);
+
+  .aup-pill {
+    @include pill-defaults();
+    color: currentColor;
+    background-color: mat.get-color-from-palette($background, app-bar) // hmmm, should probably defined my own..
+  }
+
+  .aup-pill-primary {
+    @extend .aup-pill;
+    color: mat.get-color-from-palette($background, background);
+    background-color: mat.get-color-from-palette($primary-palette);
+  }
+
+  .aup-pill-accent {
+    @extend .aup-pill;
+    color: mat.get-color-from-palette($background, background); // stolen from mat checkbox checkmark color logic
+    background-color: mat.get-color-from-palette($accent-palette)
+  }
+
+  .aup-pill-warn {
+    @extend .aup-pill;
+    color: mat.get-color-from-palette($background, background);
+    background-color: mat.get-color-from-palette($warn-palette)
+  }
+
+}
+
+

package/assets/styles.scss

@@ -11,6 +11,7 @@
 @use "./commands";
 @use "./icons";
 @use "./empty-state";
+@use "./pills";
 
 @mixin apply-light-theme($theme, $typography) {
 
@@ -19,6 +20,7 @@
   @include interaction.apply-theme($color-config, $typography);
   @include cards.apply-theme($color-config, $typography);
   @include activities.apply-theme($color-config, $typography);
+  @include pills.apply-theme($color-config, $typography);
 
   :root {
     --aup-default-padding: var(--default-padding, 16px);

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

@@ -1,8 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/divider'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/progress-bar'), require('@angular/material/progress-spinner'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('@angular/platform-browser'), require('lodash'), require('@coolon/typescript-utilities'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('typescript-string-enums'), require('resize-observer-polyfill'), require('immer'), require('@angular/cdk/a11y'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('@angular/material/list'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('wake-event')) :
-    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/divider', '@angular/material/icon', '@angular/material/menu', '@angular/material/progress-bar', '@angular/material/progress-spinner', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', '@angular/platform-browser', 'lodash', '@coolon/typescript-utilities', '@typescript-plus/fast-memoize-decorator/dist/src', 'typescript-string-enums', 'resize-observer-polyfill', 'immer', '@angular/cdk/a11y', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', '@angular/material/list', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'wake-event'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.coolon = global.coolon || {}, global.coolon["angular-ui-powerups"] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.divider, global.ng.material.icon, global.ng.material.menu, global.ng.material.progressBar, global.ng.material.progressSpinner, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.ng.platformBrowser, global._, global.typescriptUtilities, global.src, global.typescriptStringEnums, global.ResizeObserver, global.produce, global.ng.cdk.a11y, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ng.material.list, global.fastMemoizeDecorator, null, global.ng.animations, global.wakeEvent));
-})(this, (function (exports, i2, i0, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, divider, icon, menu, progressBar, progressSpinner, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, platformBrowser, _, typescriptUtilities, src, typescriptStringEnums, ResizeObserver, produce, a11y, flexLayout, i1, i1$1, overlay, list, fastMemoizeDecorator, reflectMetadata, animations$1, wakeEvent) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/common'), require('@angular/core'), require('@angular/forms'), require('@angular/material/form-field'), require('@angular/material/input'), require('@angular/material/select'), require('@angular/material/tabs'), require('@angular/platform-browser/animations'), require('@angular/cdk/portal'), require('@angular/cdk/scrolling'), require('@angular/material/autocomplete'), require('@angular/material/button'), require('@angular/material/checkbox'), require('@angular/material/divider'), require('@angular/material/icon'), require('@angular/material/menu'), require('@angular/material/progress-bar'), require('@angular/material/progress-spinner'), require('@angular/material/table'), require('@angular/material/tooltip'), require('@fortawesome/angular-fontawesome'), require('@fortawesome/free-solid-svg-icons'), require('@coolon/pectin'), require('@angular/platform-browser'), require('lodash'), require('marked'), require('@coolon/typescript-utilities'), require('@typescript-plus/fast-memoize-decorator/dist/src'), require('typescript-string-enums'), require('resize-observer-polyfill'), require('immer'), require('@angular/cdk/a11y'), require('@angular/flex-layout'), require('@angular/material/dialog'), require('@angular/router'), require('@angular/cdk/overlay'), require('@angular/material/list'), require('@typescript-plus/fast-memoize-decorator'), require('reflect-metadata'), require('@angular/animations'), require('wake-event')) :
+    typeof define === 'function' && define.amd ? define('@coolon/angular-ui-powerups', ['exports', '@angular/common', '@angular/core', '@angular/forms', '@angular/material/form-field', '@angular/material/input', '@angular/material/select', '@angular/material/tabs', '@angular/platform-browser/animations', '@angular/cdk/portal', '@angular/cdk/scrolling', '@angular/material/autocomplete', '@angular/material/button', '@angular/material/checkbox', '@angular/material/divider', '@angular/material/icon', '@angular/material/menu', '@angular/material/progress-bar', '@angular/material/progress-spinner', '@angular/material/table', '@angular/material/tooltip', '@fortawesome/angular-fontawesome', '@fortawesome/free-solid-svg-icons', '@coolon/pectin', '@angular/platform-browser', 'lodash', 'marked', '@coolon/typescript-utilities', '@typescript-plus/fast-memoize-decorator/dist/src', 'typescript-string-enums', 'resize-observer-polyfill', 'immer', '@angular/cdk/a11y', '@angular/flex-layout', '@angular/material/dialog', '@angular/router', '@angular/cdk/overlay', '@angular/material/list', '@typescript-plus/fast-memoize-decorator', 'reflect-metadata', '@angular/animations', 'wake-event'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.coolon = global.coolon || {}, global.coolon["angular-ui-powerups"] = {}), global.ng.common, global.ng.core, global.ng.forms, global.ng.material.formField, global.ng.material.input, global.ng.material.select, global.ng.material.tabs, global.ng.platformBrowser.animations, global.ng.cdk.portal, global.ng.cdk.scrolling, global.ng.material.autocomplete, global.ng.material.button, global.ng.material.checkbox, global.ng.material.divider, global.ng.material.icon, global.ng.material.menu, global.ng.material.progressBar, global.ng.material.progressSpinner, global.ng.material.table, global.ng.material.tooltip, global.angularFontawesome, global.freeSolidSvgIcons, global.pectin, global.ng.platformBrowser, global._, global.marked, global.typescriptUtilities, global.src, global.typescriptStringEnums, global.ResizeObserver, global.produce, global.ng.cdk.a11y, global.ng.flexLayout, global.ng.material.dialog, global.ng.router, global.ng.cdk.overlay, global.ng.material.list, global.fastMemoizeDecorator, null, global.ng.animations, global.wakeEvent));
+})(this, (function (exports, i2, i0, forms, formField, input, select, tabs, animations, portal, scrolling, autocomplete, button, checkbox, divider, icon, menu, progressBar, progressSpinner, table, tooltip, angularFontawesome, freeSolidSvgIcons, pectin, platformBrowser, _, marked, typescriptUtilities, src, typescriptStringEnums, ResizeObserver, produce, a11y, flexLayout, i1, i1$1, overlay, list, fastMemoizeDecorator, reflectMetadata, animations$1, wakeEvent) { 'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -742,6 +742,68 @@
                 },] }
     ];
 
+    var markdownPillExtension = function (renderPill) {
+        return {
+            name: 'aup-pill',
+            level: 'inline',
+            start: function (src) {
+                var _a;
+                var index = (_a = src.match(/\(\([^)]/)) === null || _a === void 0 ? void 0 : _a.index;
+                // if (index) {
+                //     console.log({start:src})
+                // }
+                return index;
+            },
+            tokenizer: function (src) {
+                var rule = /^(\(\((([^)])+)\)\))/; // Regex for the complete token
+                var match = rule.exec(src);
+                if (match) {
+                    var token = {
+                        type: 'aup-pill',
+                        raw: match[0],
+                        text: match[2].trim(), // Additional custom properties
+                        // tokens: []              // Array where child inline tokens will be generated
+                    };
+                    // console.log(token)
+                    // this.lexer.inlineTokens(token.text, token.tokens);    // Queue this data to be processed for inline tokens
+                    return token;
+                }
+                else {
+                    return undefined;
+                }
+            },
+            renderer: function (token) {
+                // @ts-ignore (until typings are up to date)
+                var url = token.text;
+                return renderPill(token.text);
+            }
+        };
+    };
+
+    var MarkdownService = /** @class */ (function () {
+        function MarkdownService() {
+        }
+        MarkdownService.prototype.render = function (content) {
+            return marked.marked.parse(content, {
+                gfm: true,
+                smartLists: true
+            });
+        };
+        MarkdownService.prototype.renderInline = function (content) {
+            return marked.marked.parseInline(content);
+        };
+        MarkdownService.prototype.usePillExtension = function (renderer) {
+            marked.marked.use({
+                extensions: [markdownPillExtension(renderer !== null && renderer !== void 0 ? renderer : (function (text) { return "<span class='aup-pill'>" + text + "<span>"; }))]
+            });
+        };
+        return MarkdownService;
+    }());
+    MarkdownService.decorators = [
+        { type: i0.Injectable }
+    ];
+    MarkdownService.ctorParameters = function () { return []; };
+
     var BusyOverlayComponent = /** @class */ (function (_super) {
         __extends(BusyOverlayComponent, _super);
         function BusyOverlayComponent() {
@@ -5015,6 +5077,52 @@
         label: [{ type: i0.Input }]
     };
 
+    var MarkdownComponent = /** @class */ (function (_super) {
+        __extends(MarkdownComponent, _super);
+        function MarkdownComponent(element, markdownService) {
+            var _this = _super.call(this) || this;
+            _this.element = element;
+            _this.markdownService = markdownService;
+            _this.inline = false;
+            var chain = pectin.Dsl.disposeWith(_this).chain;
+            return _this;
+        }
+        MarkdownComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var chain = pectin.Dsl.disposeWith(this).chain;
+            chain(this.content$).subscribe(function (content) {
+                _this.element.nativeElement.innerHTML = ___namespace.isEmpty(content) ? '' :
+                    _this.inline ? _this.markdownService.renderInline(content) :
+                        _this.markdownService.render(content);
+            }, { initialValue: 'evaluate' });
+        };
+        return MarkdownComponent;
+    }(DisposableComponent));
+    MarkdownComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-markdown',
+                    template: "<p>markdown works!</p>\n",
+                    styles: [":host{display:inline-block}\n"]
+                },] }
+    ];
+    MarkdownComponent.ctorParameters = function () { return [
+        { type: i0.ElementRef },
+        { type: MarkdownService }
+    ]; };
+    MarkdownComponent.propDecorators = {
+        content$: [{ type: i0.Input }],
+        content: [{ type: i0.Input }],
+        inline: [{ type: i0.Input }]
+    };
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.ValueModel)
+    ], MarkdownComponent.prototype, "content$", void 0);
+    __decorate([
+        pectin.StoreInValueModel('content$'),
+        __metadata("design:type", String)
+    ], MarkdownComponent.prototype, "content", void 0);
+
     var ComponentsModule = /** @class */ (function () {
         function ComponentsModule(faIconLibrary) {
             faIconLibrary.addIconPacks(freeSolidSvgIcons.fas);
@@ -5098,7 +5206,8 @@
                         AbstractCardContainerComponent,
                         CardStackComponent,
                         LabelledValueComponent,
-                        LoadingContainerComponent
+                        LoadingContainerComponent,
+                        MarkdownComponent
                     ],
                     exports: [
                         NumberInputComponent,
@@ -5138,9 +5247,11 @@
                         CardStackComponent,
                         LabelledValueComponent,
                         LoadingContainerComponent,
+                        MarkdownComponent
                     ],
                     providers: [
-                        FocusBindingFactory
+                        FocusBindingFactory,
+                        MarkdownService
                     ]
                 },] }
     ];
@@ -5346,6 +5457,23 @@
         __metadata("design:type", pectin.Command)
     ], Activity.prototype, "cancelCommand", void 0);
 
+    exports.Alert = void 0;
+    (function (Alert) {
+        function getContent(alert) {
+            var content = alert.content();
+            return Array.isArray(content) ? content : [content];
+        }
+        Alert.getContent = getContent;
+        function getTitle(alert) {
+            return ___namespace.isFunction(alert.title) ? alert.title() : undefined;
+        }
+        Alert.getTitle = getTitle;
+        function getColor(alert) {
+            return ___namespace.isFunction(alert.color) ? alert.color() : undefined;
+        }
+        Alert.getColor = getColor;
+    })(exports.Alert || (exports.Alert = {}));
+
     var AlertDialogComponent = /** @class */ (function (_super) {
         __extends(AlertDialogComponent, _super);
         function AlertDialogComponent(alert) {
@@ -5354,13 +5482,19 @@
             _this.confirmCommand = pectin.Command.create(function () {
                 _this.done();
             });
+            _this.title = exports.Alert.getTitle(alert);
+            _this.color = exports.Alert.getColor(alert);
+            _this.content = exports.Alert.getContent(alert);
             _this.confirmFace = {
                 text: function () { return alert.ok(); },
-                color: function () { return "primary"; },
+                color: function () { return _this.color || "primary"; },
                 style: function () { return "raised"; }
             };
             return _this;
         }
+        AlertDialogComponent.prototype.isContentArray = function () {
+            return;
+        };
         AlertDialogComponent.prototype.ngOnInit = function () {
         };
         return AlertDialogComponent;
@@ -5368,18 +5502,20 @@
     AlertDialogComponent.decorators = [
         { 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",
+                    template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\n</aup-activity-body>\n<aup-activity-actions [confirmFace]=\"confirmFace\"></aup-activity-actions>\n",
                     styles: [":host{display:block}.mat-dialog-content{margin:0;padding:0}.mat-dialog-actions{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"]
                 },] }
     ];
     AlertDialogComponent.ctorParameters = function () { return [
-        { type: undefined, decorators: [{ type: i0.Inject, args: [ACTIVITY_DATA,] }] }
+        { type: exports.Alert, decorators: [{ type: i0.Inject, args: [ACTIVITY_DATA,] }] }
     ]; };
 
     var ConfirmThenDialogComponent = /** @class */ (function (_super) {
         __extends(ConfirmThenDialogComponent, _super);
         function ConfirmThenDialogComponent(config) {
-            var _this = _super.call(this) || this;
+            var _this = this;
+            var _a;
+            _this = _super.call(this) || this;
             _this.config = config;
             pectin.assert.notNil(config);
             _this.confirmCommand = pectin.Command.create(function () {
@@ -5390,9 +5526,12 @@
             _this.cancelCommand = pectin.Command.create(function () {
                 return _this.cancel();
             });
+            _this.title = exports.Alert.getTitle(config.confirm);
+            _this.color = _this.isDestructive() ? 'warn' : (_a = exports.Alert.getColor(config.confirm)) !== null && _a !== void 0 ? _a : 'primary';
+            _this.content = exports.Alert.getContent(config.confirm);
             _this.confirmFace = {
                 text: function () { return _this.confirm.ok(); },
-                color: function () { return _this.isDestructive() ? 'warn' : 'primary'; },
+                color: function () { return _this.color; },
                 style: function () { return 'raised'; }
             };
             _this.cancelFace = {
@@ -5424,7 +5563,7 @@
     ConfirmThenDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-confirmation-dialog',
-                    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",
+                    template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\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{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"]
                 },] }
     ];
@@ -5435,22 +5574,24 @@
     var ConfirmThenExecuteDialogComponent = /** @class */ (function (_super) {
         __extends(ConfirmThenExecuteDialogComponent, _super);
         function ConfirmThenExecuteDialogComponent(data) {
-            var _this = _super.call(this) || this;
+            var _this = this;
+            var _a;
+            _this = _super.call(this) || this;
             _this.data = data;
             pectin.assert.notNil(data);
             _this.confirmCommand = pectin.Command.create(function () { return __awaiter(_this, void 0, void 0, function () {
                 var result, e_1;
-                return __generator(this, function (_a) {
-                    switch (_a.label) {
+                return __generator(this, function (_b) {
+                    switch (_b.label) {
                         case 0:
-                            _a.trys.push([0, 2, , 3]);
+                            _b.trys.push([0, 2, , 3]);
                             return [4 /*yield*/, data.operation(this.interactionContext)];
                         case 1:
-                            result = _a.sent();
+                            result = _b.sent();
                             this.done(result);
                             return [3 /*break*/, 3];
                         case 2:
-                            e_1 = _a.sent();
+                            e_1 = _b.sent();
                             this.cancel(e_1);
                             return [3 /*break*/, 3];
                         case 3: return [2 /*return*/];
@@ -5460,9 +5601,12 @@
             _this.cancelCommand = pectin.Command.create(function () {
                 return _this.cancel();
             });
+            _this.title = exports.Alert.getTitle(data.confirm);
+            _this.color = _this.isDestructive() ? 'warn' : (_a = exports.Alert.getColor(data.confirm)) !== null && _a !== void 0 ? _a : 'primary';
+            _this.content = exports.Alert.getContent(data.confirm);
             _this.confirmFace = {
                 text: function () { return _this.confirm.ok(); },
-                color: function () { return _this.isDestructive() ? 'warn' : 'primary'; },
+                color: function () { return _this.color; },
                 style: function () { return 'raised'; }
             };
             _this.cancelFace = {
@@ -5492,7 +5636,7 @@
     ConfirmThenExecuteDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-confirmation-execute-dialog',
-                    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",
+                    template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\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{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"]
                 },] }
     ];
@@ -5503,7 +5647,9 @@
     var ConfirmationDialogComponent = /** @class */ (function (_super) {
         __extends(ConfirmationDialogComponent, _super);
         function ConfirmationDialogComponent(confirm) {
-            var _this = _super.call(this) || this;
+            var _this = this;
+            var _a;
+            _this = _super.call(this) || this;
             _this.confirm = confirm;
             pectin.assert.notNil(confirm);
             _this.confirmCommand = pectin.Command.create(function () {
@@ -5512,13 +5658,16 @@
             _this.cancelCommand = pectin.Command.create(function () {
                 return _this.cancel();
             });
+            _this.title = exports.Alert.getTitle(confirm);
+            _this.color = _this.isDestructive() ? 'warn' : (_a = exports.Alert.getColor(confirm)) !== null && _a !== void 0 ? _a : 'primary';
+            _this.content = exports.Alert.getContent(confirm);
             _this.confirmFace = {
                 text: function () { return confirm.ok(); },
-                color: function () { return _this.isDestructive() ? 'warn' : 'primary'; },
+                color: function () { return _this.color; },
                 style: function () { return 'raised'; }
             };
             _this.cancelFace = {
-                text: function () { return confirm.cancel(); },
+                text: function () { return confirm.cancel(); }
             };
             return _this;
         }
@@ -5539,7 +5688,7 @@
     ConfirmationDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-confirmation-dialog',
-                    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",
+                    template: "<aup-activity-title *ngIf=\"title\" [color]=\"color\"><aup-markdown [content]=\"title\" [inline]=\"true\"></aup-markdown></aup-activity-title>\n<aup-activity-body>\n  <aup-markdown *ngFor=\"let line of content\" [content]=\"line\"></aup-markdown>\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{margin-bottom:0!important;padding:0;align-items:flex-end;justify-content:flex-end}\n"]
                 },] }
     ];
@@ -10723,6 +10872,8 @@
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
     exports.ListPropertyColumnModel = ListPropertyColumnModel;
     exports.LoadingContainerComponent = LoadingContainerComponent;
+    exports.MarkdownComponent = MarkdownComponent;
+    exports.MarkdownService = MarkdownService;
     exports.ModalActivityTriggerComponent = ModalActivityTriggerComponent;
     exports.ModalInteractionContextFactory = ModalInteractionContextFactory;
     exports.MoreMenuComponent = MoreMenuComponent;
@@ -10798,6 +10949,7 @@
     exports.WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined = WaitUntilLinkTriggeredNavigationInteractionCancellationTypeDetermined;
     exports.WaitUntilPopStateDuringCanDeactivateInteractionFinishes = WaitUntilPopStateDuringCanDeactivateInteractionFinishes;
     exports.leftRightPlaceAnimation = leftRightPlaceAnimation;
+    exports.markdownPillExtension = markdownPillExtension;
     exports.slideDownOnEnterAnimation = slideDownOnEnterAnimation;
     exports.slideRightOnEnterAnimation = slideRightOnEnterAnimation;
     exports.treeNodeDecorator = treeNodeDecorator;