@coolon/angular-ui-powerups 12.4.0-alpha.76 → 12.4.0-alpha.78

package/assets/markdown.scss

@@ -0,0 +1,10 @@
+aup-markdown {
+  p {
+    margin: 0;
+    line-height: 1.2em;
+  }
+
+  > *:not(:first-child) {
+    margin-top: 0.5em;
+  }
+}

package/assets/styles.scss

@@ -12,6 +12,7 @@
 @use "./icons";
 @use "./empty-state";
 @use "./pills";
+@use "./markdown";
 
 @mixin apply-light-theme($theme, $typography) {
 

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

@@ -2393,8 +2393,8 @@
     SelectInputComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-select-input',
-                    template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"componentValueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">\n      <ng-container *ngIf=\"!nilOptionTemplateRef\">{{placeholder}}</ng-container>\n      <ng-container *ngIf=\"nilOptionTemplateRef\" [ngTemplateOutlet]=\"nilOptionTemplateRef\"></ng-container>\n    </mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n                    [ngTemplateOutlet]=\"optionTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n",
-                    styles: [":host{display:inline-block}mat-form-field{width:100%}\n"]
+                    template: "<mat-form-field appearance=\"standard\" [floatLabel]=\"floatLabel\">\n  <mat-label *ngIf=\"label\">{{label}}</mat-label>\n  <mat-select placeholder=\"{{placeholder}}\"\n              [(ngModel)]=\"componentValueModel.value\"\n              [disabled]=\"!enabled.value\"\n              (keydown.enter)=\"notifyEnterKey()\"\n              (keydown.escape)=\"notifyEscapeKey()\"\n              [pectinFocusBinding]=\"focusContext\"\n              [errorStateMatcher]=\"errorStateMatcher\"\n  >\n    <mat-option *ngIf=\"allowNil\">\n      <ng-container *ngIf=\"!nilOptionTemplateRef\">{{placeholder}}</ng-container>\n      <ng-container *ngIf=\"nilOptionTemplateRef\" [ngTemplateOutlet]=\"nilOptionTemplateRef\"></ng-container>\n    </mat-option>\n    <mat-option *ngFor=\"let option of optionsModel.value; let i = index\" [value]=\"option\">\n      <ng-container *ngIf=\"!optionTemplateRef\">{{optionLabelFormat(option)}}</ng-container>\n      <ng-container *ngIf=\"optionTemplateRef\"\n                    [ngTemplateOutlet]=\"optionTemplateRef\"\n                    [ngTemplateOutletContext]=\"{ $implicit: option, index: i }\"\n      >\n      </ng-container>\n    </mat-option>\n  </mat-select>\n  <mat-hint *ngIf=\"showHint\">{{hint}}</mat-hint>\n  <mat-error *ngIf=\"hasErrors\">{{firstError}}</mat-error>\n</mat-form-field>\n<div class=\"width-strut\">\n  <div *ngFor=\"let item of options\">{{optionLabelFormat(item)}}</div>\n</div>\n",
+                    styles: [":host{display:inline-block}mat-form-field{width:100%}.width-strut{height:0;max-height:0;width:auto;visibility:hidden;padding-right:12px}\n"]
                 },] }
     ];
     SelectInputComponent.ctorParameters = function () { return []; };
@@ -5089,19 +5089,24 @@
         }
         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' });
+            var when = pectin.Dsl.disposeWith(this).when;
+            when(this.content$).changes(function (content) { return _this.renderContent(content); }, { initialValue: 'triggerChangeUnlessNil' });
+            if (___namespace.isNil(this.content) && !___namespace.isEmpty(this.element.nativeElement.innerHTML)) {
+                this.renderContent(this.element.nativeElement.innerHTML);
+            }
+        };
+        MarkdownComponent.prototype.renderContent = function (content) {
+            if (!___namespace.isNil(content)) {
+                this.element.nativeElement.innerHTML = this.inline ? this.markdownService.renderInline(content) :
+                    this.markdownService.render(content);
+            }
         };
         return MarkdownComponent;
     }(DisposableComponent));
     MarkdownComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-markdown',
-                    template: "<p>markdown works!</p>\n",
+                    template: "<ng-content></ng-content>\n",
                     styles: [":host{display:inline-block}\n"]
                 },] }
     ];
@@ -5370,6 +5375,7 @@
             _this._busyModel = _this.registerDisposable(new pectin.DelegatingValueModel().withDefault(false));
             _this._focusedModel = _this.registerDisposable(new pectin.DelegatingValueModel());
             _this.class = 'aup-activity';
+            _this.busyWhile(_this.confirmCommand.busy);
             return _this;
         }
         Object.defineProperty(Activity.prototype, "isFocused", {
@@ -5389,7 +5395,6 @@
             when(this._focusedModel).becomesTruthy(function () {
                 _this.onActivityReady();
             });
-            this.busyWhile(this.confirmCommand.busy);
         };
         Activity.prototype.ngAfterViewInit = function () {
             var _a;
@@ -5474,31 +5479,89 @@
         Alert.getColor = getColor;
     })(exports.Alert || (exports.Alert = {}));
 
+    var ALERT_CONFIG = new i0.InjectionToken('AlertConfig');
+    var AbstractDialogComponent = /** @class */ (function (_super) {
+        __extends(AbstractDialogComponent, _super);
+        function AbstractDialogComponent(config) {
+            var _this = _super.call(this) || this;
+            _this.config = config;
+            pectin.assert.notNil(config);
+            _this.title = exports.Alert.getTitle(config);
+            _this.color = _this.checkColor(exports.Alert.getColor(config));
+            _this.content = exports.Alert.getContent(config);
+            _this.confirmFace = {
+                text: function () { return config.ok(); },
+                color: function () { return _this.color || 'primary'; },
+                style: function () { return 'raised'; }
+            };
+            return _this;
+        }
+        AbstractDialogComponent.prototype.getConfig = function () {
+            return typescriptUtilities.lang.abstractMethod(this.constructor);
+        };
+        AbstractDialogComponent.prototype.checkColor = function (rawColor) {
+            if (this.isDestructive()) {
+                return 'warn';
+            }
+            else {
+                if (['primary', 'accent', 'warn'].includes(rawColor)) {
+                    return rawColor;
+                }
+                else {
+                    console.warn("Invalid color string " + rawColor);
+                    return undefined;
+                }
+            }
+        };
+        AbstractDialogComponent.prototype.isDestructive = function () {
+            // @ts-ignore
+            return ___namespace.isFunction(this.config['destructive']) && this.config.destructive();
+        };
+        return AbstractDialogComponent;
+    }(Activity));
+    AbstractDialogComponent.decorators = [
+        { type: i0.Component, args: [{
+                    template: ''
+                },] }
+    ];
+    AbstractDialogComponent.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: i0.Inject, args: [ALERT_CONFIG,] }] }
+    ]; };
+
+    var AbstractConfirmDialogComponent = /** @class */ (function (_super) {
+        __extends(AbstractConfirmDialogComponent, _super);
+        function AbstractConfirmDialogComponent(config) {
+            var _this = _super.call(this, config) || this;
+            _this.cancelFace = {
+                text: function () { return config.cancel(); }
+            };
+            _this.cancelCommand = pectin.Command.create(function () {
+                return _this.cancel();
+            });
+            return _this;
+        }
+        return AbstractConfirmDialogComponent;
+    }(AbstractDialogComponent));
+    AbstractConfirmDialogComponent.decorators = [
+        { type: i0.Component, args: [{
+                    template: ''
+                },] }
+    ];
+    AbstractConfirmDialogComponent.ctorParameters = function () { return [
+        { type: undefined, decorators: [{ type: i0.Inject, args: [ALERT_CONFIG,] }] }
+    ]; };
+
     var AlertDialogComponent = /** @class */ (function (_super) {
         __extends(AlertDialogComponent, _super);
         function AlertDialogComponent(alert) {
-            var _this = _super.call(this) || this;
-            _this.alert = alert;
+            var _this = _super.call(this, alert) || this;
             _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 _this.color || "primary"; },
-                style: function () { return "raised"; }
-            };
             return _this;
         }
-        AlertDialogComponent.prototype.isContentArray = function () {
-            return;
-        };
-        AlertDialogComponent.prototype.ngOnInit = function () {
-        };
         return AlertDialogComponent;
-    }(Activity));
+    }(AbstractDialogComponent));
     AlertDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-alert-dialog',
@@ -5513,53 +5576,16 @@
     var ConfirmThenDialogComponent = /** @class */ (function (_super) {
         __extends(ConfirmThenDialogComponent, _super);
         function ConfirmThenDialogComponent(config) {
-            var _this = this;
-            var _a;
-            _this = _super.call(this) || this;
-            _this.config = config;
-            pectin.assert.notNil(config);
+            var _this = _super.call(this, config.confirm) || this;
             _this.confirmCommand = pectin.Command.create(function () {
-                _this.interactionContext.startActivity(_this.config.activityType, _this.config.data)
+                _this.interactionContext.startActivity(config.activityType, config.data)
                     .then(function (result) { return _this.done(result); })
                     .catch(function (error) { return _this.cancel(error); });
             });
-            _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.color; },
-                style: function () { return 'raised'; }
-            };
-            _this.cancelFace = {
-                text: function () { return _this.confirm.cancel(); },
-            };
             return _this;
         }
-        ConfirmThenDialogComponent.prototype.ngOnInit = function () {
-        };
-        Object.defineProperty(ConfirmThenDialogComponent.prototype, "confirm", {
-            get: function () {
-                return this.config.confirm;
-            },
-            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();
-        };
         return ConfirmThenDialogComponent;
-    }(Activity));
+    }(AbstractConfirmDialogComponent));
     ConfirmThenDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-confirmation-dialog',
@@ -5574,65 +5600,30 @@
     var ConfirmThenExecuteDialogComponent = /** @class */ (function (_super) {
         __extends(ConfirmThenExecuteDialogComponent, _super);
         function ConfirmThenExecuteDialogComponent(data) {
-            var _this = this;
-            var _a;
-            _this = _super.call(this) || this;
-            _this.data = data;
-            pectin.assert.notNil(data);
+            var _this = _super.call(this, data.confirm) || this;
             _this.confirmCommand = pectin.Command.create(function () { return __awaiter(_this, void 0, void 0, function () {
                 var result, e_1;
-                return __generator(this, function (_b) {
-                    switch (_b.label) {
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
                         case 0:
-                            _b.trys.push([0, 2, , 3]);
+                            _a.trys.push([0, 2, , 3]);
                             return [4 /*yield*/, data.operation(this.interactionContext)];
                         case 1:
-                            result = _b.sent();
+                            result = _a.sent();
                             this.done(result);
                             return [3 /*break*/, 3];
                         case 2:
-                            e_1 = _b.sent();
+                            e_1 = _a.sent();
                             this.cancel(e_1);
                             return [3 /*break*/, 3];
                         case 3: return [2 /*return*/];
                     }
                 });
             }); });
-            _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.color; },
-                style: function () { return 'raised'; }
-            };
-            _this.cancelFace = {
-                text: function () { return _this.confirm.cancel(); }
-            };
             return _this;
         }
-        Object.defineProperty(ConfirmThenExecuteDialogComponent.prototype, "confirm", {
-            get: function () {
-                return this.data.confirm;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ConfirmThenExecuteDialogComponent.prototype, "titleColor", {
-            get: function () {
-                return this.isDestructive() ? 'warn' : undefined;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ConfirmThenExecuteDialogComponent.prototype.isDestructive = function () {
-            return this.confirm.destructive && this.confirm.destructive();
-        };
         return ConfirmThenExecuteDialogComponent;
-    }(Activity));
+    }(AbstractConfirmDialogComponent));
     ConfirmThenExecuteDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-confirmation-execute-dialog',
@@ -5647,44 +5638,15 @@
     var ConfirmationDialogComponent = /** @class */ (function (_super) {
         __extends(ConfirmationDialogComponent, _super);
         function ConfirmationDialogComponent(confirm) {
-            var _this = this;
-            var _a;
-            _this = _super.call(this) || this;
+            var _this = _super.call(this, confirm) || this;
             _this.confirm = confirm;
-            pectin.assert.notNil(confirm);
             _this.confirmCommand = pectin.Command.create(function () {
                 return _this.done();
             });
-            _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.color; },
-                style: function () { return 'raised'; }
-            };
-            _this.cancelFace = {
-                text: function () { return confirm.cancel(); }
-            };
             return _this;
         }
-        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();
-        };
         return ConfirmationDialogComponent;
-    }(Activity));
+    }(AbstractConfirmDialogComponent));
     ConfirmationDialogComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-confirmation-dialog',
@@ -7465,7 +7427,9 @@
                         InlineActivityTriggerComponent,
                         ModalActivityTriggerComponent,
                         exports.AddCardActivityComponent,
-                        exports.InlineStringEditorComponent
+                        exports.InlineStringEditorComponent,
+                        AbstractDialogComponent,
+                        AbstractConfirmDialogComponent,
                     ],
                     exports: [
                         ActivityContainerComponent,
@@ -10790,10 +10754,13 @@
      */
 
     exports.ACTIVITY_DATA = ACTIVITY_DATA;
+    exports.ALERT_CONFIG = ALERT_CONFIG;
     exports.AUP_PLACE_CONFIG = AUP_PLACE_CONFIG;
     exports.AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT = AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT;
     exports.AbstractActivityTriggerComponent = AbstractActivityTriggerComponent;
     exports.AbstractCardContainerComponent = AbstractCardContainerComponent;
+    exports.AbstractConfirmDialogComponent = AbstractConfirmDialogComponent;
+    exports.AbstractDialogComponent = AbstractDialogComponent;
     exports.AbstractInputComponent = AbstractInputComponent;
     exports.AbstractInteractionContext = AbstractInteractionContext;
     exports.AbstractListInputComponent = AbstractListInputComponent;