@coolon/angular-ui-powerups 12.4.0-alpha.28 → 12.4.0-alpha.29

package/assets/form.scss

@@ -1,4 +1,4 @@
-@import "~@angular/material/theming";
+@use "~@angular/material/theming";
 
 .aup-input-component {
 
@@ -8,7 +8,8 @@
     width: 100%;
 
     mat-hint.faux-error {
-      color: mat-color(mat-palette($mat-red));
+      // TODO: move this out into theming...
+      color: theming.mat-color(theming.mat-palette(theming.$mat-red));
     }
   }
 
@@ -90,3 +91,5 @@ aup-table-cell-renderer > .aup-input-component {
 
 
 
+
+

package/assets/interaction.scss

@@ -1,4 +1,7 @@
-@import "~@angular/material/theming";
+@use "~@angular/material/theming";
+
+@use "interaction/editor/inline-string-editor";
+@use "interaction/input-activity";
 
 .dialog-interaction-context {
   max-width: 95vw !important;
@@ -19,11 +22,7 @@
 
 .aup-popup-interaction-panel {
   background: var(--aup-default-background, white);
-  @include mat-elevation(1);
-  @include mat-elevation-transition;
-}
-
-.aup-input-activity {
-  padding: calc(var(--aup-default-padding)/2);
+  @include theming.mat-elevation(1);
+  @include theming.mat-elevation-transition;
 }
 

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

@@ -1781,6 +1781,7 @@
         function AbstractInputComponent() {
             var _this = _super.call(this) || this;
             _this.onValueEditedListeners = new pectin.EventListenerList();
+            _this.userFloatLabel = 'always'; // TODO: make this an injectable default
             _this.dense = false;
             // TODO: fix this.
             // tslint:disable-next-line:no-output-native
@@ -4779,6 +4780,28 @@
         __metadata("design:type", pectin.PageController)
     ], PaginatorComponent.prototype, "pageController", void 0);
 
+    var LabelledValueComponent = /** @class */ (function (_super) {
+        __extends(LabelledValueComponent, _super);
+        function LabelledValueComponent() {
+            return _super.call(this) || this;
+            // const {chain} = Dsl.disposeWith(this);
+        }
+        LabelledValueComponent.prototype.ngOnInit = function () {
+        };
+        return LabelledValueComponent;
+    }(DisposableComponent));
+    LabelledValueComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-labelled-value',
+                    template: "<label>{{label}}</label>\n<ng-content></ng-content>\n",
+                    styles: [":host{display:inline-flex;flex-direction:column;align-items:flex-start}label{font-weight:400;font-size:12px;color:rgba(0,0,0,.57);margin-bottom:6px;white-space:nowrap}"]
+                },] }
+    ];
+    LabelledValueComponent.ctorParameters = function () { return []; };
+    LabelledValueComponent.propDecorators = {
+        label: [{ type: i0.Input }]
+    };
+
     var ComponentsModule = /** @class */ (function () {
         function ComponentsModule(faIconLibrary) {
             faIconLibrary.addIconPacks(freeSolidSvgIcons.fas);
@@ -4859,7 +4882,8 @@
                         PaginatorComponent,
                         AbstractTableComponent,
                         AbstractCardContainerComponent,
-                        CardStackComponent
+                        CardStackComponent,
+                        LabelledValueComponent
                     ],
                     exports: [
                         NumberInputComponent,
@@ -4897,6 +4921,7 @@
                         EmptyStateComponent,
                         PaginatorComponent,
                         CardStackComponent,
+                        LabelledValueComponent,
                     ],
                     providers: [
                         FocusBindingFactory
@@ -4928,12 +4953,13 @@
      *     <span>This content will be between the two commands</span>
      * </aup-activity-actions>
      */
-    var ActivityActionsComponent = /** @class */ (function (_super) {
+    exports.ActivityActionsComponent = /** @class */ (function (_super) {
         __extends(ActivityActionsComponent, _super);
         function ActivityActionsComponent(cdr) {
             var _this = _super.call(this) || this;
             _this.cdr = cdr;
-            _this.align = 'stretch';
+            _this.layout = ActivityActionsComponent.Layout.BLOCK;
+            _this.align = ActivityActionsComponent.Align.STRETCH;
             return _this;
         }
         Object.defineProperty(ActivityActionsComponent.prototype, "faces", {
@@ -4954,20 +4980,6 @@
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(ActivityActionsComponent.prototype, "alignEnd", {
-            get: function () {
-                return this.align === 'end';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ActivityActionsComponent.prototype, "alignStretch", {
-            get: function () {
-                return this.align === 'stretch';
-            },
-            enumerable: false,
-            configurable: true
-        });
         ActivityActionsComponent.prototype.ngOnInit = function () {
         };
         ActivityActionsComponent.prototype.hasConfirmFace = function () {
@@ -4983,35 +4995,45 @@
         };
         return ActivityActionsComponent;
     }(DisposableComponent));
-    ActivityActionsComponent.decorators = [
+    exports.ActivityActionsComponent.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-activity-actions',
                     template: "<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<ng-container *ngIf=\"hasConfirmFace()\">\n  <aup-command class=\"confirm\" [command]=\"confirmCommand\" [face]=\"confirmFace\" data-cy=\"confirm-command\"></aup-command>\n</ng-container>\n<ng-container *ngIf=\"hasCancelFace()\">\n  <aup-command class=\"cancel\" [command]=\"cancelCommand\" [face]=\"cancelFace\" data-cy=\"cancel-command\"></aup-command>\n</ng-container>\n",
-                    styles: [":host{display:grid;grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr;grid-template-rows:auto;align-items:center;justify-content:end}:host.align-end{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host.align-stretch{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}"]
+                    styles: [":host{display:grid;grid-template-rows:auto;align-items:center;justify-content:end}:host[layout=block][align=start]{grid-template-areas:\"cancel confirm content\";grid-template-columns:auto auto 1fr}:host[layout=block][align=end]{grid-template-areas:\"content cancel confirm\";grid-template-columns:1fr auto auto}:host[layout=block][align=stretch]{grid-template-areas:\"cancel content confirm\";grid-template-columns:auto 1fr auto}:host[layout=inline]{grid-template-areas:\"confirm cancel content\";grid-template-columns:auto auto 1fr;padding:0}.cancel{grid-area:cancel}.confirm{grid-area:confirm}.content{grid-area:content;text-align:left}"]
                 },] }
     ];
-    ActivityActionsComponent.ctorParameters = function () { return [
+    exports.ActivityActionsComponent.ctorParameters = function () { return [
         { type: i0.ChangeDetectorRef }
     ]; };
-    ActivityActionsComponent.propDecorators = {
+    exports.ActivityActionsComponent.propDecorators = {
         confirmCommand: [{ type: i0.Input }],
         cancelCommand: [{ type: i0.Input }],
         faces: [{ type: i0.Input }],
         confirmFace: [{ type: i0.Input }],
         cancelFace: [{ type: i0.Input }],
         style: [{ type: i0.Input }],
-        align: [{ type: i0.Input }],
-        alignEnd: [{ type: i0.HostBinding, args: ['class.align-end',] }],
-        alignStretch: [{ type: i0.HostBinding, args: ['class.align-stretch',] }]
+        layout: [{ type: i0.Input }, { type: i0.HostBinding, args: ['attr.layout',] }],
+        align: [{ type: i0.Input }, { type: i0.HostBinding, args: ['attr.align',] }]
     };
     __decorate([
         pectin.TrackExternal(),
         __metadata("design:type", pectin.Command)
-    ], ActivityActionsComponent.prototype, "confirmCommand", void 0);
+    ], exports.ActivityActionsComponent.prototype, "confirmCommand", void 0);
     __decorate([
         pectin.TrackExternal(),
         __metadata("design:type", pectin.Command)
-    ], ActivityActionsComponent.prototype, "cancelCommand", void 0);
+    ], exports.ActivityActionsComponent.prototype, "cancelCommand", void 0);
+    (function (ActivityActionsComponent) {
+        ActivityActionsComponent.Layout = typescriptStringEnums.Enum({
+            INLINE: 'inline',
+            BLOCK: 'block'
+        });
+        ActivityActionsComponent.Align = typescriptStringEnums.Enum({
+            START: 'start',
+            END: 'end',
+            STRETCH: 'stretch'
+        });
+    })(exports.ActivityActionsComponent || (exports.ActivityActionsComponent = {}));
 
     var ACTIVITY_DATA = new i0.InjectionToken('InteractionActivityData');
     var Activity = /** @class */ (function (_super) {
@@ -5094,7 +5116,7 @@
     ];
     Activity.ctorParameters = function () { return []; };
     Activity.propDecorators = {
-        activityActions: [{ type: i0.ViewChild, args: [ActivityActionsComponent,] }],
+        activityActions: [{ type: i0.ViewChild, args: [exports.ActivityActionsComponent,] }],
         class: [{ type: i0.HostBinding, args: ['class',] }],
         isFocused: [{ type: i0.HostBinding, args: ['attr.focused',] }]
     };
@@ -6138,7 +6160,7 @@
         { type: i0.Component, args: [{
                     selector: 'aup-add-card-activity',
                     template: "<aup-in-place-interaction-context [animateFirstActivity]=\"false\" [pectinCommand]=\"startActivityCommand\">\n  <aup-command *ngIf=\"isRenderAsButton()\" [command]=\"startActivityCommand\" [faceModel]=\"faceModel\" [alignFace]=\"alignFace\"></aup-command>\n  <section *ngIf=\"isRenderAsCard()\" class=\"face-wrapper\">\n    <aup-command-face class=\"mat-button\" [faces]=\"faceList.value\"></aup-command-face>\n  </section>\n</aup-in-place-interaction-context>\n",
-                    styles: [":host{display:flex;flex-direction:column;align-items:stretch}:host[interactionStyle=inline][renderas=card]:not(.active){box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8);transition:all .28s cubic-bezier(.4,0,.2,1)}:host[interactionStyle=inline][renderas=card]:not(.active):hover{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}:host[interactionStyle=inline][renderas=card]:not(.active):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)}:host[interactionStyle=modal][renderas=card]{box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8);transition:all .28s cubic-bezier(.4,0,.2,1)}:host[interactionStyle=modal][renderas=card]:hover{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}:host[interactionStyle=modal][renderas=card]: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)}section.face-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}aup-in-place-interaction-context{flex:1}aup-in-place-interaction-context.active{border:3px solid #6273c7;border-radius:4px;overflow:hidden}"]
+                    styles: [":host{display:flex;flex-direction:column;align-items:stretch;background-color:#fff}:host[interactionStyle=inline][renderas=card]:not(.active){box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8);transition:all .28s cubic-bezier(.4,0,.2,1)}:host[interactionStyle=inline][renderas=card]:not(.active):hover{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}:host[interactionStyle=inline][renderas=card]:not(.active):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)}:host[interactionStyle=modal][renderas=card]{box-sizing:border-box;border:2px dashed rgba(0,0,0,.1);border-radius:6px;font-weight:300;cursor:pointer;color:rgba(0,0,0,.54);background-color:hsla(0,0%,100%,.8);transition:all .28s cubic-bezier(.4,0,.2,1)}:host[interactionStyle=modal][renderas=card]:hover{transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:all .28s cubic-bezier(.4,0,.2,1);border-color:transparent;background-color:#fff;color:rgba(0,0,0,.54)}:host[interactionStyle=modal][renderas=card]: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)}section.face-wrapper{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}aup-in-place-interaction-context{flex:1}aup-in-place-interaction-context.active{border:3px solid #6273c7;border-radius:4px;overflow:hidden}"]
                 },] }
     ];
     exports.AddCardActivityComponent.ctorParameters = function () { return [
@@ -6422,45 +6444,85 @@
     // @see https://github.com/ng-packagr/ng-packagr/issues/641 and  https://github.com/angular/angular/issues/21123
     // we're getting a metadata error for D for no reason that I can find and only during the build (ng serve works fine)
     // @dynamic
-    var AbstractInputActivity = /** @class */ (function (_super) {
-        __extends(AbstractInputActivity, _super);
-        function AbstractInputActivity(data) {
+    exports.InputActivity = /** @class */ (function (_super) {
+        __extends(InputActivity, _super);
+        function InputActivity(data) {
             var _this = _super.call(this) || this;
             _this.data = data;
             _this.class = 'aup-input-activity';
             var form = new pectin.DirtyTrackingForm();
             _this.valueModel = form.valueModel(_this.data.initialValue);
             _this.valueModel.validateUsing(data.validators || []);
-            _this.confirmCommand = pectin.Command.create(function () {
-                if (_this.valueModel.validate()) {
-                    if (data.save) {
-                        return Promise.resolve(data.save(_this.valueModel, _this.interactionContext))
-                            .then(function () { return _this.done(); });
-                    }
-                    else {
-                        _this.done(_this.valueModel.value);
+            _this.confirmCommand = pectin.Command.create(function () { return __awaiter(_this, void 0, void 0, function () {
+                var self_1, allGood_1, result, e_1;
+                return __generator(this, function (_c) {
+                    switch (_c.label) {
+                        case 0:
+                            if (!this.valueModel.validate()) return [3 /*break*/, 6];
+                            if (!data.save) return [3 /*break*/, 5];
+                            self_1 = this;
+                            _c.label = 1;
+                        case 1:
+                            _c.trys.push([1, 3, , 4]);
+                            allGood_1 = true;
+                            return [4 /*yield*/, data.save(this.valueModel.value, {
+                                    injectError: function (error) {
+                                        allGood_1 = false;
+                                        self_1.valueModel.injectErrors([error]);
+                                    }
+                                })];
+                        case 2:
+                            result = _c.sent();
+                            if (allGood_1) {
+                                this.done(this.valueModel.value);
+                            }
+                            return [3 /*break*/, 4];
+                        case 3:
+                            e_1 = _c.sent();
+                            return [3 /*break*/, 4];
+                        case 4: return [3 /*break*/, 6];
+                        case 5:
+                            this.done(this.valueModel.value);
+                            _c.label = 6;
+                        case 6: return [2 /*return*/];
                     }
-                }
-            });
+                });
+            }); });
             _this.cancelCommand = pectin.Command.create(function () {
                 _this.cancel();
             });
+            _this.busyWhile(_this.confirmCommand.busy);
             return _this;
         }
-        AbstractInputActivity.prototype.onActivityReady = function () {
+        Object.defineProperty(InputActivity.prototype, "layout", {
+            get: function () {
+                var _a, _b;
+                return (_b = (_a = this.data) === null || _a === void 0 ? void 0 : _a.layout) !== null && _b !== void 0 ? _b : InputActivity.Layout.BLOCK;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        InputActivity.prototype.onActivityReady = function () {
             this.valueModel.focusContext.requestFocus();
         };
-        return AbstractInputActivity;
+        return InputActivity;
     }(Activity));
-    AbstractInputActivity.decorators = [
+    exports.InputActivity.decorators = [
         { type: i0.Component, args: [{ template: "" },] }
     ];
-    AbstractInputActivity.ctorParameters = function () { return [
+    exports.InputActivity.ctorParameters = function () { return [
         { type: undefined, decorators: [{ type: i0.Inject, args: [ACTIVITY_DATA,] }] }
     ]; };
-    AbstractInputActivity.propDecorators = {
-        class: [{ type: i0.HostBinding, args: ['class',] }]
+    exports.InputActivity.propDecorators = {
+        class: [{ type: i0.HostBinding, args: ['class',] }],
+        layout: [{ type: i0.Input }, { type: i0.HostBinding, args: ['attr.layout',] }]
     };
+    (function (InputActivity) {
+        InputActivity.Layout = typescriptStringEnums.Enum({
+            INLINE: 'inline',
+            BLOCK: 'block'
+        });
+    })(exports.InputActivity || (exports.InputActivity = {}));
 
     var StringInputActivity = /** @class */ (function (_super) {
         __extends(StringInputActivity, _super);
@@ -6468,11 +6530,11 @@
             return _super !== null && _super.apply(this, arguments) || this;
         }
         return StringInputActivity;
-    }(AbstractInputActivity));
+    }(exports.InputActivity));
     StringInputActivity.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-string-input-activity',
-                    template: "\n    <aup-string-input [valueModel]=\"valueModel\"\n                      [label]=\"data.label\"\n                      [placeholder]=\"data.placeholder\"\n                      [command.enter]=\"confirmCommand\"\n                      [command.escape]=\"cancelCommand\"></aup-string-input>\n    <aup-activity-actions align=\"end\"\n                          [faces]=\"data.buttonStyle\"></aup-activity-actions>\n  "
+                    template: "\n    <aup-string-input [valueModel]=\"valueModel\"\n                      [label]=\"data.label\"\n                      [placeholder]=\"data.placeholder\"\n                      [command.enter]=\"confirmCommand\"\n                      [command.escape]=\"cancelCommand\"></aup-string-input>\n    <aup-activity-actions [layout]=\"layout\" align=\"end\" [faces]=\"data.buttonStyle\"></aup-activity-actions>\n  "
                 },] }
     ];
 
@@ -6502,11 +6564,11 @@
             configurable: true
         });
         return SelectInputActivity;
-    }(AbstractInputActivity));
+    }(exports.InputActivity));
     SelectInputActivity.decorators = [
         { type: i0.Component, args: [{
                     selector: 'aup-select-input-activity',
-                    template: "\n    <aup-select-input [valueModel]=\"valueModel\"\n                      [label]=\"data.label\"\n                      [placeholder]=\"data.placeholder\"\n                      [command.enter]=\"confirmCommand\"\n                      [command.escape]=\"cancelCommand\"\n                      [options]=\"options\"\n                      [optionLabelFormat]=\"optionLabelFormat\"\n    ></aup-select-input>\n    <aup-activity-actions align=\"end\" [faces]=\"data.buttonStyle\"\n    ></aup-activity-actions>\n  "
+                    template: "\n    <aup-select-input [valueModel]=\"valueModel\"\n                      [label]=\"data.label\"\n                      [placeholder]=\"data.placeholder\"\n                      [command.enter]=\"confirmCommand\"\n                      [command.escape]=\"cancelCommand\"\n                      [options]=\"options\"\n                      [optionLabelFormat]=\"optionLabelFormat\"\n    ></aup-select-input>\n    <aup-activity-actions [layout]=\"layout\" align=\"end\" [faces]=\"data.buttonStyle\"\n    ></aup-activity-actions>\n  "
                 },] }
     ];
 
@@ -6678,6 +6740,209 @@
         _interactionContext: [{ type: i0.ViewChild, args: [PopupInteractionContextComponent, { static: true },] }]
     };
 
+    exports.InlineEditorModel = /** @class */ (function () {
+        function InlineEditorModel(valueModel, saveCallback) {
+            this.valueModel = valueModel;
+            this.saveCallback = saveCallback;
+            this.editing = new pectin.MutableValueModel(false);
+            this._validators = new pectin.MutableListModel();
+        }
+        Object.defineProperty(InlineEditorModel.prototype, "validators", {
+            get: function () {
+                return this._validators.readonly;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        InlineEditorModel.prototype.validateUsing = function (validator) {
+            this._validators.push(validator);
+            return this;
+        };
+        ;
+        InlineEditorModel.prototype.isEditing = function () {
+            return this.editing.value;
+        };
+        return InlineEditorModel;
+    }());
+    (function (InlineEditorModel) {
+        function create(valueModel, options) {
+            return new InlineEditorModel(valueModel, options.save);
+        }
+        InlineEditorModel.create = create;
+    })(exports.InlineEditorModel || (exports.InlineEditorModel = {}));
+    pectin.TrackExternal.oneTimeBinding(exports.InlineEditorModel);
+
+    /**
+     * @example
+     * const source: ValueModel<string> = ...;
+     * const model = InlineEditorModel.create(source, {
+     *   save(updated:string, context: InlineEditorModel.SaveContext) => {
+     *      try {
+     *        try and save the thing...
+     *      } catch(error) {
+     *        context.injectError(error)
+     *      }
+     * }).validateUsing(Validator.present("We'll need a value");
+     *
+     * # in the view
+     * <aup-inline-string-editor
+     *       label="My field"
+     *       placeHolder="I'm ready for a string..."
+     *       [editorModel]="model"></aup-inline-string-editor>
+     */
+    exports.InlineStringEditorComponent = /** @class */ (function (_super) {
+        __extends(InlineStringEditorComponent, _super);
+        function InlineStringEditorComponent(interactionService) {
+            var _this = _super.call(this) || this;
+            var _a = pectin.Dsl.disposeWith(_this), chain = _a.chain, when = _a.when, valueOf = _a.valueOf;
+            var modalIC = interactionService.createModalInteractionContextDisposedWith(_this);
+            var resolvedFacesModel = chain(_this.facesModel).map(function (userFaces) {
+                return Object.assign(Object.assign({}, InlineStringEditorComponent.DEFAULT_FACES), userFaces);
+            }, { allowNil: true });
+            _this.editFaceModel = resolvedFacesModel.pluck('edit');
+            _this.saveFace = resolvedFacesModel.pluck('save');
+            _this.cancelFace = resolvedFacesModel.pluck('cancel');
+            var self = _this;
+            _this.editCommand = pectin.Command.create(function () { return __awaiter(_this, void 0, void 0, function () {
+                var e_1;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            this.editorModel.editing.value = true;
+                            _a.label = 1;
+                        case 1:
+                            _a.trys.push([1, 3, 4, 5]);
+                            return [4 /*yield*/, this.interactionContext.startActivity(StringInputActivity, this.createInputActivityData())];
+                        case 2:
+                            _a.sent();
+                            return [3 /*break*/, 5];
+                        case 3:
+                            e_1 = _a.sent();
+                            return [3 /*break*/, 5];
+                        case 4:
+                            this.editorModel.editing.value = false;
+                            return [7 /*endfinally*/];
+                        case 5: return [2 /*return*/];
+                    }
+                });
+            }); });
+            _this.onDispose(function () { return _this.cancelEdit(); });
+            return _this;
+            // const txo = new TransactionObserver({ verbose: true }).onEvent(e => console.log(e.name, e.payload));
+            // txo.observe('this.editFace', this.editFaceModel);
+        }
+        InlineStringEditorComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            // our editor model is a one time binding without delegates so we can only
+            // use it once we've been initialised
+            var _a = pectin.Dsl.disposeWith(this), chain = _a.chain, when = _a.when, valueOf = _a.valueOf;
+            if (!this.editorModel) {
+                typescriptUtilities.lang.illegalState("editorModel is required");
+            }
+            when(this.editorModel.editing).becomesTruthy(function () {
+                _this.editCommand.execute();
+            }, { asLongAs: this.editCommand.enabled });
+            when(this.editorModel.editing).becomesFalsey(function () { return _this.cancelEdit(); });
+            this.empty = valueOf.any(chain.stringValue(this.editorModel.valueModel).isBlank()
+            // deviceDescription.isNil()
+            ).areTruthy();
+            this.displayValue = chain(this.editorModel.valueModel).map(function (v) {
+                return ___namespace.isEmpty(v) ? _this.placeHolderModel.value : v;
+            }, { dependsOn: this.placeHolderModel, allowNil: true });
+        };
+        InlineStringEditorComponent.prototype.createInputActivityData = function () {
+            var self = this;
+            return {
+                initialValue: self.editorModel.valueModel.value,
+                buttonStyle: { confirm: self.saveFace.value, cancel: self.cancelFace.value },
+                placeholder: self.placeHolderModel.value,
+                label: self.label,
+                layout: exports.InputActivity.Layout.INLINE,
+                validators: self.editorModel.validators.value,
+                save: function (value, inputContext) {
+                    return __awaiter(this, void 0, void 0, function () {
+                        return __generator(this, function (_a) {
+                            switch (_a.label) {
+                                case 0: return [4 /*yield*/, self.editorModel.saveCallback(value, inputContext)];
+                                case 1:
+                                    _a.sent();
+                                    return [2 /*return*/];
+                            }
+                        });
+                    });
+                }
+            };
+        };
+        InlineStringEditorComponent.prototype.cancelEdit = function () {
+            if (this.isEditing()) {
+                this.interactionContext.cancelActiveActivity();
+            }
+        };
+        InlineStringEditorComponent.prototype.startEdit = function () {
+            if (!this.isEditing() && this.editCommand.enabled.value) {
+                this.editCommand.execute();
+            }
+        };
+        InlineStringEditorComponent.prototype.isEditing = function () {
+            return this.interactionContext.isActive();
+        };
+        InlineStringEditorComponent.prototype.isEmpty = function () {
+            return this.empty.value;
+        };
+        return InlineStringEditorComponent;
+    }(DisposableComponent));
+    exports.InlineStringEditorComponent.decorators = [
+        { type: i0.Component, args: [{
+                    selector: 'aup-inline-string-editor',
+                    template: "<ng-container *ngIf=\"!editorModel.isEditing()\">\n  <div class=\"content\" [class.editable]=\"editCommand.enabled.value\">\n    <label>{{label}}</label>\n    <p [class.place-holder]=\"empty.value\" (click)=\"editCommand.execute()\">{{displayValue.value}}</p>\n    <aup-command *ngIf=\"editCommand.enabled.value\" [command]=\"editCommand\" [faceModel]=\"editFaceModel\"></aup-command>\n  </div>\n</ng-container>\n<aup-in-place-interaction-context #interactionContext [animateFirstActivity]=\"false\"></aup-in-place-interaction-context>\n\n"
+                },] }
+    ];
+    exports.InlineStringEditorComponent.ctorParameters = function () { return [
+        { type: exports.InteractionService }
+    ]; };
+    exports.InlineStringEditorComponent.propDecorators = {
+        editorModel: [{ type: i0.Input }],
+        facesModel: [{ type: i0.Input }],
+        faces: [{ type: i0.Input }],
+        interactionContext: [{ type: i0.ViewChild, args: [InPlaceInteractionContextComponent,] }],
+        label: [{ type: i0.Input }],
+        placeHolder: [{ type: i0.Input }],
+        placeHolderModel: [{ type: i0.Input }]
+    };
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", exports.InlineEditorModel)
+    ], exports.InlineStringEditorComponent.prototype, "editorModel", void 0);
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.ValueModel)
+    ], exports.InlineStringEditorComponent.prototype, "facesModel", void 0);
+    __decorate([
+        pectin.StoreInValueModel('facesModel'),
+        __metadata("design:type", Object)
+    ], exports.InlineStringEditorComponent.prototype, "faces", void 0);
+    __decorate([
+        pectin.StoreInValueModel('placeHolderModel'),
+        __metadata("design:type", String)
+    ], exports.InlineStringEditorComponent.prototype, "placeHolder", void 0);
+    __decorate([
+        pectin.TrackExternal(),
+        __metadata("design:type", pectin.ValueModel)
+    ], exports.InlineStringEditorComponent.prototype, "placeHolderModel", void 0);
+    (function (InlineStringEditorComponent) {
+        InlineStringEditorComponent.DEFAULT_FACES = {
+            edit: {
+                icon: function () { return 'mat:edit'; }
+            },
+            save: {
+                icon: function () { return 'mat:check'; }
+            },
+            cancel: {
+                icon: function () { return 'mat:clear'; }
+            }
+        };
+    })(exports.InlineStringEditorComponent || (exports.InlineStringEditorComponent = {}));
+
     var InteractionModule = /** @class */ (function () {
         function InteractionModule() {
         }
@@ -6706,21 +6971,22 @@
                         ActivityOutletComponent,
                         InPlaceInteractionContextComponent,
                         AddItemInteractionContextComponent,
-                        ActivityActionsComponent,
+                        exports.ActivityActionsComponent,
                         PopupInteractionContextComponent,
                         StringInputActivity,
                         SelectInputActivity,
-                        AbstractInputActivity,
+                        exports.InputActivity,
                         InteractionContextTriggerFor,
                         Activity,
                         ActivityTitleComponent,
                         ActivityBodyComponent,
-                        ActivityActionsComponent,
+                        exports.ActivityActionsComponent,
                         AbstractActivityTriggerComponent,
                         PopupActivityTriggerComponent,
                         InlineActivityTriggerComponent,
                         ModalActivityTriggerComponent,
                         exports.AddCardActivityComponent,
+                        exports.InlineStringEditorComponent,
                     ],
                     exports: [
                         ActivityContainerComponent,
@@ -6728,7 +6994,7 @@
                         ActivityTitleComponent,
                         InPlaceInteractionContextComponent,
                         AddItemInteractionContextComponent,
-                        ActivityActionsComponent,
+                        exports.ActivityActionsComponent,
                         PopupInteractionContextComponent,
                         InteractionContextTriggerFor,
                         StringInputActivity,
@@ -6738,6 +7004,7 @@
                         InlineActivityTriggerComponent,
                         ModalActivityTriggerComponent,
                         exports.AddCardActivityComponent,
+                        exports.InlineStringEditorComponent,
                     ],
                     entryComponents: [
                         ActivityContainerComponent,
@@ -10020,7 +10287,6 @@
     exports.AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT = AUP_UNAUTHORISED_PLACE_NOTICE_COMPONENT;
     exports.AbstractActivityTriggerComponent = AbstractActivityTriggerComponent;
     exports.AbstractCardContainerComponent = AbstractCardContainerComponent;
-    exports.AbstractInputActivity = AbstractInputActivity;
     exports.AbstractInputComponent = AbstractInputComponent;
     exports.AbstractInteractionContext = AbstractInteractionContext;
     exports.AbstractListInputComponent = AbstractListInputComponent;
@@ -10031,7 +10297,6 @@
     exports.AbstractTableModel = AbstractTableModel;
     exports.AbstractValueInputComponent = AbstractValueInputComponent;
     exports.Activity = Activity;
-    exports.ActivityActionsComponent = ActivityActionsComponent;
     exports.ActivityBodyComponent = ActivityBodyComponent;
     exports.ActivityContainerComponent = ActivityContainerComponent;
     exports.ActivityOutletComponent = ActivityOutletComponent;
@@ -10095,6 +10360,7 @@
     exports.InteractionModule = InteractionModule;
     exports.InteractionServiceRoutingAdapter = InteractionServiceRoutingAdapter;
     exports.LEFT_RIGHT_PLACE_ANIMATION = LEFT_RIGHT_PLACE_ANIMATION;
+    exports.LabelledValueComponent = LabelledValueComponent;
     exports.ListPlaceNavComponent = ListPlaceNavComponent;
     exports.ListPropertyColumnModel = ListPropertyColumnModel;
     exports.ModalActivityTriggerComponent = ModalActivityTriggerComponent;