@coolon/angular-ui-powerups 12.4.0-alpha.6 → 12.4.0-alpha.61

package/lib/components/cards/abstract-card-container.component.d.ts

@@ -0,0 +1,11 @@
+import { OnInit, TemplateRef } from '@angular/core';
+import { Command } from '@coolon/pectin';
+import { CommandFace } from '../commands/command-face';
+import { DisposableComponent } from '../disposable-component';
+export declare class AbstractCardContainerComponent extends DisposableComponent implements OnInit {
+    addCardCommand: Command<any>;
+    addCardFace: CommandFace;
+    addCardTemplate: TemplateRef<any>;
+    constructor();
+    ngOnInit(): void;
+}

package/lib/components/{card-container → cards/card-container}/card-container.component.d.ts

@@ -1,7 +1,5 @@
-import { OnInit, TemplateRef } from '@angular/core';
-import { Command } from '@coolon/pectin';
-import { CommandFace } from '../commands/command-face';
-import { DisposableComponent } from '../disposable-component';
+import { ElementRef, OnInit } from '@angular/core';
+import { AbstractCardContainerComponent } from '../abstract-card-container.component';
 /**
  * @example
  * // basic usage
@@ -19,6 +17,13 @@ import { DisposableComponent } from '../disposable-component';
  *   <my-card *ngFor="..."></my-card>
  * </aup-card-container>
  *
+ * // use the aup-add-card-activity to display as the new card place holder and to run
+ * // the activity inside teh card
+ * <aup-card-container [addCardCommand]="addCard" [addCardFace]="i18n.addCard" >
+ *   <my-card *ngFor="..."></my-card>
+ *   <aup-add-card-activity type="inline" renderAs="card" [face]="i18n.commands.addModal" [activityClass]="AddCardActivity"></aup-add-card-activity>
+ * </aup-card-container>
+ *
  * // adds an add card component using the specified template.  The template
  * // will fill it's container in the grid.
  * <aup-card-container>
@@ -51,15 +56,31 @@ import { DisposableComponent } from '../disposable-component';
  * aup-card-container {
  *   --card-gap: var(--card-gap, 16px);
  *   --card-width: var(--card-width, 300px);
+ *   --card-max-width: auto;
  *   --card-height: var(--card-height, auto);
  *   --card-min-height: var(--card-min-height, auto);
  *   --card-background: var(--card-background, #fcfcfb);
  * }
  */
-export declare class CardContainerComponent extends DisposableComponent implements OnInit {
-    addCardCommand: Command<any>;
-    addCardFace: CommandFace;
-    addCardTemplate: TemplateRef<any>;
-    constructor();
+export declare class CardContainerComponent extends AbstractCardContainerComponent implements OnInit {
+    private readonly elementRef;
+    private _columnCount;
+    set columnCount(count: number | undefined);
+    get columnCount(): number | undefined;
+    /**
+     * Enable scrolling.  If true the container will have height==0 so you must set it's height explicitly
+     * or place in a layout that will stretch it such as a grid or flex layout.
+     */
+    enabledScroll: boolean;
+    constructor(elementRef: ElementRef);
     ngOnInit(): void;
+    get isAutoColumns(): boolean;
+    get isSingleColumn(): boolean;
+    protected updateColumnCountStyles(): void;
+}
+export declare namespace CardContainerComponent {
+    interface ColumnConfiguration {
+        count: number;
+        stretchToFill: boolean;
+    }
 }

package/lib/components/cards/card-stack/card-stack.component.d.ts

@@ -0,0 +1,65 @@
+import { AbstractCardContainerComponent } from '../abstract-card-container.component';
+/**
+ * @deprecated deprecated, use `aup-card-container [columnCount]="1"` instead.
+ * @example
+ * // basic usage
+ * <aup-card-stack>
+ *   <my-card *ngFor="..."></my-card>
+ * </aup-card-stack>
+ *
+ * // adds an add button with a the '+' icon to the end of the card list.
+ * <aup-card-stack [addCardCommand]="addCard">
+ *   <my-card *ngFor="..."></my-card>
+ * </aup-card-stack>
+ *
+ * // adds an add button with the specified face
+ * <aup-card-stack [addCardCommand]="addCard" [addCardFace]="i18n.addCard" >
+ *   <my-card *ngFor="..."></my-card>
+ * </aup-card-stack>
+ *
+ * // use the aup-add-card-activity to display as the new card place holder and to run
+ * // the activity inside teh card
+ * <aup-card-stack [addCardCommand]="addCard" [addCardFace]="i18n.addCard" >
+ *   <my-card *ngFor="..."></my-card>
+ *   <aup-add-card-activity type="inline" renderAs="card" [face]="i18n.commands.addModal" [activityClass]="AddCardActivity"></aup-add-card-activity>
+ * </aup-card-stack>
+ *
+ * // adds an add card component using the specified template.  The template
+ * // will fill it's container in the grid.
+ * <aup-card-stack>
+ *   <my-card *ngFor="..."></my-card>
+ *   <ng-template #addCardTemplate>
+ *     <div>This is a new card template, it will the the size of the other cards.</div>
+ *   </ng-template>
+ * </aup-card-stack>
+ *
+ * // sing the default new card styles for your template
+ * @import "../../../../assets/styles";
+ * .my-new-card {
+ *   @include aup-card-stack-new-card-style();
+ *   // OR
+ *   @include aup-card-stack-new-card-style(
+ *      $color: rgba(0,0,0,0.54),
+ *      $background-color: rgba(255,255,255,0.8),
+ *      $hover-color: $color,
+ *      $background-hover-color: white
+ *   )
+ * }
+ * <aup-card-stack>
+ *   <my-card *ngFor="..."></my-card>
+ *   <ng-template #addCardTemplate>
+ *     <div class="my-new-card" >This is a new card template, it will the the size of the other cards.</div>
+ *   </ng-template>
+ * </aup-card-stack>
+ *
+ * // CSS Vars
+ * aup-card-stack {
+ *   --card-gap: var(--card-gap, 16px);
+ *   --card-height: var(--card-height, auto);
+ *   --card-min-height: var(--card-min-height, auto);
+ *   --card-background: var(--card-background, #fcfcfb);
+ * }
+ */
+export declare class CardStackComponent extends AbstractCardContainerComponent {
+    constructor();
+}

package/lib/components/exports.d.ts

@@ -8,7 +8,9 @@ export * from "./focusable.component";
 export * from "./resize-aware.component";
 export * from "./track-by";
 export * from "./busy-overlay/busy-overlay.component";
-export * from "./card-container/card-container.component";
+export * from "./cards/abstract-card-container.component";
+export * from "./cards/card-container/card-container.component";
+export * from "./cards/card-stack/card-stack.component";
 export * from "./commands/command-face";
 export * from "./commands/flex.component";
 export * from "./commands/separator.component";
@@ -36,6 +38,8 @@ export * from "./forms/select-input/select-input.component";
 export * from "./forms/string-input/string-input.component";
 export * from "./forms/text-input/text-input.component";
 export * from "./icon/icon.component";
+export * from "./labelled-value/labelled-value.component";
+export * from "./loading-container/loading-container.component";
 export * from "./noop/noop.component";
 export * from "./scroll-container/scroll-container.component";
 export * from "./section-header/section-header.component";
@@ -67,10 +71,8 @@ export * from "./tables/tree-table/decorated-tree-node";
 export * from "./tables/tree-table/flattened-tree-list-model";
 export * from "./tables/tree-table/tree-expansion-model";
 export * from "./tables/tree-table/tree-label-column-model";
-export * from "./tables/tree-table/tree-node";
 export * from "./tables/tree-table/tree-table-component";
 export * from "./tables/tree-table/tree-table-model";
-export * from "./tables/tree-table/visitable.class";
 export * from "./tables/tree-table/tree-inheritance-icon/tree-inheritance-icon.component";
 export * from "./tables/tree-table/tree-label-cell-renderer/tree-label-cell-renderer.component";
 export * from "./types/bounds.class";

package/lib/components/labelled-value/labelled-value.component.d.ts

@@ -0,0 +1,7 @@
+import { OnInit } from '@angular/core';
+import { DisposableComponent } from '../disposable-component';
+export declare class LabelledValueComponent extends DisposableComponent implements OnInit {
+    label: string;
+    constructor();
+    ngOnInit(): void;
+}

package/lib/components/loading-container/loading-container.component.d.ts

@@ -0,0 +1,11 @@
+import { OnInit } from '@angular/core';
+import { GarbageCollector, ValueModel } from '@coolon/pectin';
+export declare class LoadingContainerComponent extends GarbageCollector implements OnInit {
+    loadingModel: ValueModel<boolean>;
+    loading: boolean;
+    messageModel: ValueModel<string>;
+    message: string;
+    get state(): string;
+    constructor();
+    ngOnInit(): void;
+}

package/lib/components/section-header/section-header.component.d.ts

@@ -1,6 +1,9 @@
 import { OnInit } from '@angular/core';
-export declare class SectionHeaderComponent implements OnInit {
-    underline: boolean;
+import { DisposableComponent } from '../disposable-component';
+export declare class SectionHeaderComponent extends DisposableComponent implements OnInit {
+    size: 'toolbar' | 'large' | 'medium' | 'small';
+    borderTop: boolean;
+    borderBottom: boolean;
     constructor();
     ngOnInit(): void;
 }

package/lib/components/tables/abstract-table-model.d.ts

@@ -38,8 +38,8 @@ export declare class AbstractTableModel<Row> extends GarbageCollector {
     protected _addSelectionColumn(selectionModel?: SelectionModel<Row>, visible?: ValueModel<boolean> | boolean): SelectionColumnModel<Row>;
     addEditControls(saveCommand: UnaryCommand<DirtyTrackingForm<Row>, boolean>): EditorControlColumnModel<Row>;
     addCustomColumn<V>(columnId: string, dataAccessor: (row: Row) => V): CustomValueColumnModel<Row, V>;
-    addComponentColumn<C extends CellRenderer<Row>>(columnId: string, component: ComponentType<C>, onInit?: OnComponentInit<C>): CustomValueColumnModel<Row, Row>;
-    addComponentColumn<C extends CellRenderer<Row>>(columnId: string, component: ComponentType<C>, options?: CellRendererOptions<Row, C>): CustomValueColumnModel<Row, Row>;
+    addComponentColumn<C extends CellRenderer<Partial<Row>>>(columnId: string, component: ComponentType<C>, onInit?: OnComponentInit<C>): CustomValueColumnModel<Row, Row>;
+    addComponentColumn<C extends CellRenderer<Partial<Row>>>(columnId: string, component: ComponentType<C>, options?: CellRendererOptions<Row, C>): CustomValueColumnModel<Row, Row>;
     addTemplateColumn<V>(columnId: string): CustomTemplateColumnModel<Row>;
     addRowClass(className: string, predicate: (row: Row) => boolean): void;
     getRowClasses(row: Row): string[];
@@ -54,7 +54,8 @@ export declare class AbstractTableModel<Row> extends GarbageCollector {
     cancelAllEditorSessions(): void;
     isRowSelectionEnabledFor(column: ColumnModel<Row>): boolean;
     isRowSelectionEnabled(): boolean;
-    hasSelectionModel(): boolean;
+    hasUserSelectionModel(): boolean;
+    getSelectionModel(): SelectionModel<Row> | undefined;
     isHoverEnabled(): boolean;
     isCursorEnabled(column: ColumnModel<Row>): boolean;
     selectRow(row: Row): void;

package/lib/components/tables/table/column-model.d.ts

@@ -102,7 +102,7 @@ export declare class CustomValueColumnModel<Row, V> extends ColumnModel<Row> {
     private getValue;
     constructor(columnId: string, defaults: ColumnModel.TextPropertiesProvider, getValue: (row: Row) => V);
     cellRenderer<C extends {
-        value: V;
+        value: Partial<V>;
     }>(componentType: ComponentType<C>, onComponentInitOrOptions?: CellRendererOptions<Row, C> | OnComponentInit<C>): this;
     selectRowOnClick(selectOnRowClick: boolean): this;
 }

package/lib/components/tables/tree-table/flattened-tree-list-model.d.ts

@@ -6,7 +6,6 @@ export declare class FlattenedTreeListModel<T> extends ComputedListModel<Decorat
     private readonly childRef;
     readonly expansionModel: TreeExpansionModel<DecoratedTreeNode<T>>;
     constructor(source: ListModel<T>, childRef: (node: T) => T[], expansionModel: TreeExpansionModel<DecoratedTreeNode<T>>);
-    getIdentityOf(item: DecoratedTreeNode<T>): any;
     compute(values: T[]): DecoratedTreeNode<T>[];
     private addNodeAndVisibleChildren;
 }

package/lib/components/tables/tree-table/tree-label-cell-renderer/tree-label-cell-renderer.component.d.ts

@@ -21,7 +21,7 @@ export declare class TreeLabelCellRendererComponent<T> extends DisposableCompone
     get isRoot(): boolean;
     get isLeaf(): boolean;
     get node(): T;
-    expandOrCollapse(node: DecoratedTreeNode<T>): void;
+    expandOrCollapse($event: MouseEvent, node: DecoratedTreeNode<T>): void;
 }
 export declare namespace TreeLabelCellRendererComponent {
     const DEFAULT_ICON_FACTORY: TreeTableModel.IconFactory<any>;

package/lib/components/tables/tree-table/tree-table-component.d.ts

@@ -1,7 +1,7 @@
 import { ElementRef, NgZone } from '@angular/core';
+import { TreeNode } from '@coolon/typescript-utilities';
 import { AbstractTableModel } from '../abstract-table-model';
 import { AbstractTableComponent } from '../abstract-table.component';
-import { TreeNode } from './tree-node';
 import { TreeTableModel } from './tree-table-model';
 /**
  * Create your model:

package/lib/components/tables/tree-table/tree-table-model.d.ts

@@ -1,7 +1,6 @@
 import { ListModel, MutableValueModel, SelectionModel, ValueModel } from '@coolon/pectin';
 import { AbstractTableModel } from '../abstract-table-model';
 import { SelectionColumnModel } from '../table/column-model';
-import { DecoratedTreeNode } from './decorated-tree-node';
 import { TreeExpansionModel } from './tree-expansion-model';
 import { TreeLabelColumnModel } from './tree-label-column-model';
 export declare type ChildArrayPropertiesOf<T> = {
@@ -12,10 +11,10 @@ export declare class TreeTableModel<Row> extends AbstractTableModel<Row> {
     private readonly flattenedDataSource;
     constructor(source: ListModel<Row>, childAccessor: ChildArrayPropertiesOf<Row> | ((node: Row) => Row[]), builder?: (model: TreeTableModel<Row>) => void);
     treeControlColumn(builder: (column: TreeLabelColumnModel<Row>) => void): void;
-    expand(node: DecoratedTreeNode<Row>): void;
-    collapse(node: DecoratedTreeNode<Row>): void;
-    isCollapsed(node: DecoratedTreeNode<Row>): boolean;
-    ensureAncestorsAndSelfVisible(node: DecoratedTreeNode<Row>): void;
+    expand(node: Row): void;
+    collapse(node: Row): void;
+    isCollapsed(node: Row): boolean;
+    ensureAncestorsAndSelfVisible(node: Row): void;
     addSelectionColumn(selectionModel?: SelectionModel<Row>, showSelectionColumn?: ValueModel<boolean> | boolean): SelectionColumnModel<Row>;
 }
 export declare namespace TreeTableModel {

package/lib/components/track-by.d.ts

@@ -1,5 +1,14 @@
 import { TrackByFunction } from '@angular/core';
+import { Constructable } from '@coolon/pectin';
+import { ValuePropertiesOf } from '@coolon/typescript-utilities';
 export declare namespace TrackBy {
     const byIndex: TrackByFunction<any>;
+    /**
+     * @deprecated use #track(MyType).by("property") instead.
+     * @param property
+     */
     function trackByProperty<T, P extends keyof T>(property: P): TrackByFunction<T>;
+    function track<T>(type: Constructable<T>): {
+        by<P extends ValuePropertiesOf<T>>(property: P): (index: number, item: T) => T[P];
+    };
 }

package/lib/interaction/components/activity-actions/activity-actions.component.d.ts

@@ -1,5 +1,6 @@
 import { ChangeDetectorRef, OnInit } from '@angular/core';
 import { Command } from '@coolon/pectin';
+import { Enum } from 'typescript-string-enums';
 import { CommandFace } from '../../../components/commands/command-face';
 import { DisposableComponent } from '../../../components/disposable-component';
 /**
@@ -40,9 +41,8 @@ export declare class ActivityActionsComponent extends DisposableComponent implem
      * @deprecated use #faces instead.
      */
     set style(style: ActivityActionsComponent.Style);
-    align: 'start' | 'end' | 'stretch';
-    get alignEnd(): boolean;
-    get alignStretch(): boolean;
+    layout: ActivityActionsComponent.Layout;
+    align: ActivityActionsComponent.Align;
     constructor(cdr: ChangeDetectorRef);
     ngOnInit(): void;
     hasConfirmFace(): boolean;
@@ -53,6 +53,17 @@ export declare class ActivityActionsComponent extends DisposableComponent implem
     }): void;
 }
 export declare namespace ActivityActionsComponent {
+    const Layout: {
+        INLINE: "inline";
+        BLOCK: "block";
+    };
+    type Layout = Enum<typeof Layout>;
+    const Align: {
+        START: "start";
+        END: "end";
+        STRETCH: "stretch";
+    };
+    type Align = Enum<typeof Align>;
     interface Style {
         confirm: CommandFace;
         cancel: CommandFace;

package/lib/interaction/components/activity-triggers/abstract-activity-trigger.component.d.ts

@@ -14,7 +14,7 @@ export declare class AbstractActivityTriggerComponent<D = any, R = any, E = any>
     faceModel: ValueModel<CommandFace>;
     alignFace: HorizontalAlignment;
     readonly startActivityCommand: Command<unknown>;
-    interactionContext: InteractionContext;
+    get interactionContext(): InteractionContext;
     confirmEvent: EventEmitter<R>;
     cancelEvent: EventEmitter<E>;
     constructor();

package/lib/interaction/components/activity-triggers/inline-activity-trigger/inline-activity-trigger.component.d.ts

@@ -1,6 +1,7 @@
 import { InteractionContext } from '../../../interaction-context';
 import { AbstractActivityTriggerComponent } from '../abstract-activity-trigger.component';
 export declare class InlineActivityTriggerComponent<D = any, R = any, E = any> extends AbstractActivityTriggerComponent<D, R, E> {
-    interactionContext: InteractionContext;
+    _interactionContext: InteractionContext;
+    get interactionContext(): InteractionContext;
     constructor();
 }

package/lib/interaction/components/activity-triggers/modal-activity-trigger/modal-activity-trigger.component.d.ts

@@ -2,6 +2,7 @@ import { InteractionContext } from '../../../interaction-context';
 import { InteractionService } from '../../../services/interaction.service';
 import { AbstractActivityTriggerComponent } from '../abstract-activity-trigger.component';
 export declare class ModalActivityTriggerComponent<D = any, R = any, E = any> extends AbstractActivityTriggerComponent<D, R, E> {
-    interactionContext: InteractionContext;
+    _interactionContext: InteractionContext;
+    get interactionContext(): InteractionContext;
     constructor(interactionService: InteractionService);
 }

package/lib/interaction/components/activity-triggers/popup-activity-trigger/popup-activity-trigger.component.d.ts

@@ -3,6 +3,7 @@ import { AbstractActivityTriggerComponent } from '../abstract-activity-trigger.c
 export declare class PopupActivityTriggerComponent<D = any, R = any, E = any> extends AbstractActivityTriggerComponent<D, R, E> {
     anchorX: 'start' | 'end';
     anchorY: 'top' | 'bottom';
-    interactionContext: InteractionContext;
+    _interactionContext: InteractionContext;
     constructor();
+    get interactionContext(): InteractionContext;
 }

package/lib/interaction/components/add-card-activity/add-card-activity.component.d.ts

@@ -0,0 +1,39 @@
+import { OnInit } from '@angular/core';
+import { ListModelChain } from '@coolon/pectin';
+import { Enum } from 'typescript-string-enums';
+import { CommandFace } from '../../../components/commands/command-face';
+import { InteractionContext } from '../../interaction-context';
+import { InteractionService } from '../../services/interaction.service';
+import { AbstractActivityTriggerComponent } from '../activity-triggers/abstract-activity-trigger.component';
+/**
+ *
+ */
+export declare class AddCardActivityComponent extends AbstractActivityTriggerComponent implements OnInit {
+    private modalInteractionContext;
+    inlineInteractionContext: InteractionContext;
+    interactionStyle: AddCardActivityComponent.InteractionType;
+    renderAs: AddCardActivityComponent.RenderAs;
+    notCard: boolean;
+    readonly faceList: ListModelChain<CommandFace>;
+    get renderAsClass(): string;
+    get activityTypeClass(): string;
+    isRenderAsCard(): boolean;
+    isRenderAsButton(): boolean;
+    constructor(interactionService: InteractionService);
+    ngOnInit(): void;
+    get interactionContext(): InteractionContext;
+    isModal(): boolean;
+    isInline(): boolean;
+}
+export declare namespace AddCardActivityComponent {
+    const InteractionType: {
+        MODAL: "modal";
+        INLINE: "inline";
+    };
+    type InteractionType = Enum<typeof InteractionType>;
+    const RenderAs: {
+        CARD: "card";
+        BUTTON: "button";
+    };
+    type RenderAs = Enum<typeof RenderAs>;
+}

package/lib/interaction/components/editors/edit-context.d.ts

@@ -0,0 +1,3 @@
+export interface EditContext<T> {
+    injectError(error: string): any;
+}

package/lib/interaction/components/editors/inline-string-editor/inline-editor-model.d.ts

@@ -0,0 +1,24 @@
+import { GarbageCollector, ListModel, MutableValueModel, Validator, ValueModel } from '@coolon/pectin';
+import { EditContext } from '../edit-context';
+export declare class InlineEditorModel<T> extends GarbageCollector {
+    readonly valueModel: ValueModel<T>;
+    readonly saveCallback: InlineEditorModel.SaveCallback<T>;
+    readonly editing: MutableValueModel<boolean>;
+    private readonly _validators;
+    private _editingEnabled;
+    constructor(valueModel: ValueModel<T>, saveCallback: InlineEditorModel.SaveCallback<T>);
+    get editingEnabled(): ValueModel<boolean>;
+    disableWhile(condition: ValueModel<boolean>): this;
+    enableWhile(condition: ValueModel<boolean>): this;
+    get validators(): ListModel<Validator<T>>;
+    validateUsing(validator: Validator<T>): this;
+    isEditing(): boolean;
+    cancelEdit(): void;
+    startEditing(): void;
+}
+export declare namespace InlineEditorModel {
+    type SaveCallback<T> = (value: T, context: EditContext<T>) => void | Promise<void>;
+    function create<T>(valueModel: ValueModel<T>, options: {
+        save: SaveCallback<T>;
+    }): InlineEditorModel<T>;
+}

package/lib/interaction/components/editors/inline-string-editor/inline-string-editor.component.d.ts

@@ -0,0 +1,57 @@
+import { OnInit } from '@angular/core';
+import { BooleanValueModelChain, Command, DelegatingValueModel, ValueModel, ValueModelChain } from '@coolon/pectin';
+import { CommandFace } from '../../../../components/commands/command-face';
+import { DisposableComponent } from '../../../../components/disposable-component';
+import { InteractionService } from '../../../services/interaction.service';
+import { InPlaceInteractionContextComponent } from '../../inplace-interaction-context/in-place-interaction-context.component';
+import { InlineEditorModel } from './inline-editor-model';
+/**
+ * @example
+ * const source: ValueModel<string> = ...;
+ * const model = InlineEditorModel.create(source, {
+ *   save(updated:string, context: EditContext) => {
+ *      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>
+ */
+export declare class InlineStringEditorComponent extends DisposableComponent implements OnInit {
+    editorModel: InlineEditorModel<string>;
+    facesModel: ValueModel<InlineStringEditorComponent.Faces>;
+    faces: InlineStringEditorComponent.Faces;
+    interactionContext: InPlaceInteractionContextComponent<any, any, any>;
+    label: string;
+    placeHolder: string;
+    placeHolderModel: ValueModel<string>;
+    readonly description: ValueModelChain<string>;
+    empty: BooleanValueModelChain;
+    readonly editCommand: Command<void>;
+    displayValue: ValueModelChain<string>;
+    readonly editFaceModel: ValueModelChain<CommandFace>;
+    readonly saveFace: ValueModelChain<CommandFace>;
+    readonly cancelFace: ValueModelChain<CommandFace>;
+    readonly editingEnabled: DelegatingValueModel<boolean>;
+    constructor(interactionService: InteractionService);
+    ngOnInit(): void;
+    private createInputActivityData;
+    cancelEdit(): void;
+    startEdit(): void;
+    private isEditing;
+    isEmpty(): boolean;
+}
+export declare namespace InlineStringEditorComponent {
+    interface Faces {
+        edit?: CommandFace;
+        save?: CommandFace;
+        cancel?: CommandFace;
+    }
+    const DEFAULT_FACES: Faces;
+}

package/lib/interaction/components/inplace-interaction-context/in-place-interaction-context.component.d.ts

@@ -29,6 +29,7 @@ export declare class InPlaceInteractionContextComponent<D, R, E> extends Disposa
      */
     animateFirstActivity: boolean;
     get animationDuration(): string;
+    get active(): boolean;
     constructor(interactionService: InteractionService, tabConfig: MatTabsConfig);
     ngAfterViewInit(): void;
     initialise(id: string, api: InteractionService.Api): void;

package/lib/interaction/components/input-activities/input-activity.d.ts

@@ -0,0 +1,41 @@
+import { Command, Form, Validator } from '@coolon/pectin';
+import { Enum } from 'typescript-string-enums';
+import { CommandFace } from '../../../components/commands/command-face';
+import { Activity } from '../../activity';
+export declare class InputActivity<T, D extends InputActivity.Data<T> = InputActivity.Data<T>> extends Activity<D, T> {
+    readonly data: D;
+    readonly confirmCommand: Command<void>;
+    readonly cancelCommand: Command<void>;
+    readonly valueModel: Form.ValueModelBase<T>;
+    class: string;
+    readonly confirmFace: CommandFace;
+    readonly cancelFace: CommandFace;
+    get layout(): InputActivity.Layout;
+    constructor(data: D);
+    onActivityReady(): void;
+    get additionalCssClassName(): string;
+    onEscape(): void;
+    shouldCancelOnEscape(): boolean;
+}
+export declare namespace InputActivity {
+    const Layout: {
+        INLINE: "inline";
+        BLOCK: "block";
+    };
+    type Layout = Enum<typeof Layout>;
+    interface Context {
+        injectError(error: string): any;
+    }
+    interface Data<T> {
+        initialValue: T;
+        label?: string;
+        placeholder?: string;
+        layout?: InputActivity.Layout;
+        confirmFace?: CommandFace;
+        cancelFace?: CommandFace;
+        validators?: Validator<T>[];
+        cancelOnEscape?: boolean;
+        cssClassName?: string;
+        save?(valueModel: T, interactionContext?: Context): void | Promise<void>;
+    }
+}

package/lib/interaction/components/input-activities/select-input-activity.d.ts

@@ -1,7 +1,15 @@
-import { AbstractInputActivity } from './abstract-input-activity';
-import { SelectInputActivityData } from './select-input-activity-data';
-export declare class SelectInputActivity<T> extends AbstractInputActivity<T, SelectInputActivityData<T>> {
+import { ListModel } from '@coolon/pectin';
+import { InputActivity } from './input-activity';
+export declare class SelectInputActivity<T> extends InputActivity<T, SelectInputActivity.Data<T>> {
     readonly defaultOptionLabelFormat: (option: T) => T | T[keyof T];
     get optionLabelFormat(): (option: T) => any;
     get options(): T[];
 }
+export declare namespace SelectInputActivity {
+    interface Data<T> extends InputActivity.Data<T> {
+        options?: T[];
+        optionsModel?: ListModel<T>;
+        optionLabel?: keyof T;
+        optionLabelFormat?: (option: T) => any;
+    }
+}

package/lib/interaction/components/input-activities/string-input-activity.d.ts

@@ -1,3 +1,7 @@
-import { AbstractInputActivity } from './abstract-input-activity';
-export declare class StringInputActivity extends AbstractInputActivity<string> {
+import { InputActivity } from './input-activity';
+export declare class StringInputActivity extends InputActivity<string> {
+}
+export declare namespace StringInputActivity {
+    interface Data extends InputActivity.Data<String> {
+    }
 }

package/lib/interaction/exports.d.ts

@@ -19,14 +19,16 @@ export * from "./components/activity-triggers/abstract-activity-trigger.componen
 export * from "./components/activity-triggers/inline-activity-trigger/inline-activity-trigger.component";
 export * from "./components/activity-triggers/modal-activity-trigger/modal-activity-trigger.component";
 export * from "./components/activity-triggers/popup-activity-trigger/popup-activity-trigger.component";
+export * from "./components/add-card-activity/add-card-activity.component";
 export * from "./components/add-item-interaction-context/add-item-interaction-context.component";
 export * from "./components/alert-dialog/alert-dialog.component";
 export * from "./components/confirm-then-dialog/confirm-then-dialog.component";
 export * from "./components/confirmation-dialog/confirmation-dialog.component";
+export * from "./components/editors/edit-context";
+export * from "./components/editors/inline-string-editor/inline-editor-model";
+export * from "./components/editors/inline-string-editor/inline-string-editor.component";
 export * from "./components/inplace-interaction-context/in-place-interaction-context.component";
-export * from "./components/input-activities/abstract-input-activity";
-export * from "./components/input-activities/input-activity-data";
-export * from "./components/input-activities/select-input-activity-data";
+export * from "./components/input-activities/input-activity";
 export * from "./components/input-activities/select-input-activity";
 export * from "./components/input-activities/string-input-activity";
 export * from "./components/popup-interaction-context/popup-interaction-context.component";

package/lib/place/place-component.d.ts

@@ -22,7 +22,12 @@ export declare class PlaceComponent extends DisposableComponent {
     initialiseVisit(visit: Visit, notifyVisitChanged: (current: Visit, previous: Visit) => void): void;
     updateVisit(visit: Visit): void;
     isInitialised(): boolean;
-    private installBinding;
+    /**
+     * Initialised the component bindings.  If any binding has an initial model value (e.g. a selection model
+     * initialised during the constructor) and the route has nothing, then the visit will be udpated and this
+     * method will return ture to nofiy the the visit has changed.
+     */
+    private installAndInitialiseBinding;
     get placeDefinition(): PlaceDefinition;
     get active(): ValueModel<boolean>;
     /**