@coolon/angular-ui-powerups 2.0.0-alpha.8 → 2.0.0

package/lib/components/commands/command/command.component.d.ts

@@ -0,0 +1,22 @@
+import { OnInit } from '@angular/core';
+import { Command, ValueModel, ValueModelChain } from '@coolon/pectin';
+import { DisposableComponent } from '../../disposable-component';
+import { CommandFace } from '../command-face';
+import { CommandGroup } from '../group/command-group';
+/**
+ *
+ */
+export declare class CommandComponent extends DisposableComponent implements OnInit {
+    readonly parent?: CommandGroup;
+    command: Command<unknown>;
+    faceModel: ValueModel<CommandFace>;
+    face: CommandFace;
+    busyFaceModel: ValueModel<CommandFace>;
+    busyFace: CommandFace;
+    CommandFace: typeof CommandFace;
+    readonly activeFaceModel: ValueModelChain<CommandFace>;
+    readonly buttonStyle: ValueModelChain<string>;
+    readonly colorModel: ValueModelChain<'primary' | 'accent' | 'warn' | undefined>;
+    constructor(parent?: CommandGroup);
+    ngOnInit(): void;
+}

package/lib/components/commands/command-face/command-face.component.d.ts

@@ -0,0 +1,34 @@
+import { OnInit } from '@angular/core';
+import { ValueModelChain } from '@coolon/pectin';
+import { DisposableComponent } from '../../disposable-component';
+import { CommandFace } from '../command-face';
+/**
+ * Custom CSS:
+ * @example
+ * root: { // globally
+ *   --aup-command-face-icon-gap: 8px;
+ * }
+ * aup-command-face { // per instance
+ *   --icon-gap: 4px;
+ * }
+ */
+export declare class CommandFaceComponent<T> extends DisposableComponent implements OnInit {
+    private readonly faceModel;
+    _rawFace: CommandFace;
+    ignoreIcon: boolean;
+    ignoreText: boolean;
+    includeMissingIconInLayout: boolean;
+    get requiresMissingIconInLayout(): boolean;
+    readonly iconModel: ValueModelChain<string>;
+    private textModel;
+    readonly positionModel: ValueModelChain<string>;
+    private colorModel;
+    constructor();
+    ngOnInit(): void;
+    get iconPosition(): string;
+    get shouldIncludeIcon(): string | boolean;
+    get iconStart(): boolean;
+    get iconEnd(): boolean;
+    get text(): string;
+    get color(): string;
+}

package/lib/components/commands/command-face.d.ts

@@ -0,0 +1,40 @@
+import { ThemePalette } from '@angular/material/core';
+import { Enum } from 'typescript-string-enums';
+export interface CommandFace {
+    text?(): string;
+    icon?(): string;
+    iconPosition?(): string;
+    tooltip?(): string;
+    color?(): string;
+    style?(): string;
+}
+export declare namespace CommandFace {
+    enum Position {
+        START = "start",
+        END = "end"
+    }
+    const Style: {
+        FLAT: "flat";
+        STROKED: "stroked";
+        RAISED: "raised";
+    };
+    type Style = Enum<typeof Style>;
+    function getColorOf(face: CommandFace): ThemePalette;
+    function getStyleOf(face: CommandFace): Style;
+    function getIconOf(face: CommandFace): string;
+    function getIconPositionOf(face: CommandFace): string;
+    function getTooltipOf(face: CommandFace): string;
+    function getTextOf(face: CommandFace): string;
+    class Adapter {
+        readonly face: CommandFace;
+        constructor(face: CommandFace);
+        get text(): string;
+        get icon(): string;
+        get iconPosition(): string;
+        get tooltip(): string;
+        get iconPositionStart(): boolean;
+        get iconPositionEnd(): boolean;
+        get color(): ThemePalette;
+        get style(): Style;
+    }
+}

package/lib/components/commands/flex.component.d.ts

@@ -0,0 +1,11 @@
+import { OnInit } from '@angular/core';
+import { DisposableComponent } from '../disposable-component';
+import { CommandGroup } from './group/command-group';
+/**
+ *
+ */
+export declare class FlexComponent extends DisposableComponent implements OnInit {
+    readonly parent?: CommandGroup;
+    constructor(parent?: CommandGroup);
+    ngOnInit(): void;
+}

package/lib/components/commands/group/command-group/command-group.component.d.ts

@@ -0,0 +1,11 @@
+import { ValueModel } from '@coolon/pectin';
+import { CommandFace } from '../../command-face';
+import { CommandGroup } from '../command-group';
+export declare class CommandGroupComponent extends CommandGroup {
+    readonly parent: CommandGroup;
+    faceModel: ValueModel<CommandFace>;
+    face: CommandFace;
+    xPosition: 'before' | 'after';
+    yPosition: 'above' | 'below';
+    constructor(parent: CommandGroup);
+}

package/lib/components/commands/group/command-group-menu-renderer/command-group-menu-renderer.component.d.ts

@@ -0,0 +1,21 @@
+import { EventEmitter, QueryList } from '@angular/core';
+import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
+import { ListModelChain, ValueModelChain } from '@coolon/pectin';
+import { DisposableComponent } from '../../../disposable-component';
+import { TrackBy } from '../../../track-by';
+import { Registration } from '../registration';
+import { ViewData } from '../view-data';
+export declare class CommandGroupMenuRendererComponent extends DisposableComponent {
+    readonly parent?: CommandGroupMenuRendererComponent;
+    menuComponent: MatMenu;
+    private readonly groupViewDataModel;
+    groupViewData: ViewData.GroupData;
+    commandFired: EventEmitter<any>;
+    triggers: QueryList<MatMenuTrigger>;
+    readonly children: ListModelChain<Registration>;
+    readonly hasMixedIcons: ValueModelChain<boolean>;
+    readonly ViewData: typeof ViewData;
+    TrackBy: typeof TrackBy;
+    constructor(parent?: CommandGroupMenuRendererComponent);
+    getCommand(data: ViewData): import("@coolon/pectin").Command<unknown>;
+}

package/lib/components/commands/group/command-group-renderer/command-group-renderer.component.d.ts

@@ -0,0 +1,13 @@
+import { ListModelChain, ValueModel } from '@coolon/pectin';
+import { DisposableComponent } from '../../../disposable-component';
+import { ViewData } from '../view-data';
+import { TrackBy } from '../../../track-by';
+export declare class CommandGroupRendererComponent extends DisposableComponent {
+    groupViewDataModel: ValueModel<ViewData.GroupData>;
+    groupViewData: ViewData.GroupData;
+    renderRootNode: boolean;
+    readonly ViewData: typeof ViewData;
+    readonly childViewDataModels: ListModelChain<ViewData>;
+    TrackBy: typeof TrackBy;
+    constructor();
+}

package/lib/components/commands/group/command-group.d.ts

@@ -0,0 +1,41 @@
+import { Command, Disposable, GarbageCollector, ListModel, ListModelChain, ValueModel } from '@coolon/pectin';
+import { CommandFace } from '../command-face';
+import { FlexComponent } from '../flex.component';
+import { SeparatorComponent } from '../separator.component';
+import { Registration } from './registration';
+import { ViewData } from './view-data';
+export declare abstract class CommandGroup extends GarbageCollector {
+    readonly parent?: CommandGroup;
+    abstract faceModel: ValueModel<CommandFace>;
+    abstract xPosition: 'before' | 'after';
+    abstract yPosition: 'above' | 'below';
+    private readonly _rootTemplate;
+    private readonly _registrations;
+    readonly childTemplates: ListModelChain<ViewData>;
+    private initialised;
+    constructor(parent?: CommandGroup);
+    initialise(): void;
+    get rootTemplate(): ValueModel<ViewData.GroupData>;
+    get registrations(): ListModel<Registration>;
+    notifyChanged(): void;
+    private notifyChildFaceChanged;
+    private rebuildTemplates;
+    get depth(): number;
+    isRoot(): boolean;
+    registerCommand(command: Command<unknown>, faceModel: ValueModel<CommandFace>): Disposable;
+    registerGroup(group: CommandGroup, faceModel: ValueModel<CommandFace>): Disposable;
+    registerFlex(component: FlexComponent): Disposable;
+    registerSeparator(component: SeparatorComponent): Disposable;
+    protected register(registration: Registration): Registration;
+}
+export declare namespace CommandGroup {
+    class Root extends CommandGroup {
+        faceModel: ValueModel<CommandFace>;
+        xPositionModel: ValueModel<'before' | 'after'>;
+        xPosition: 'before' | 'after';
+        yPositionModel: ValueModel<'above' | 'below'>;
+        yPosition: 'above' | 'below';
+        isRoot(): boolean;
+    }
+    function factory(): Root;
+}

package/lib/components/commands/group/more-menu.component.d.ts

@@ -0,0 +1,14 @@
+import { AfterContentInit, OnInit } from '@angular/core';
+import { DisposableComponent } from '../../disposable-component';
+import { CommandGroup } from './command-group';
+/**
+ *
+ */
+export declare class MoreMenuComponent extends DisposableComponent implements OnInit, AfterContentInit {
+    readonly group: CommandGroup;
+    private tooltipModel;
+    tooltip: string;
+    constructor(group: CommandGroup);
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+}

package/lib/components/commands/group/popup-menu.component.d.ts

@@ -0,0 +1,17 @@
+import { AfterContentInit, AfterViewInit, OnInit } from '@angular/core';
+import { ValueModel } from '@coolon/pectin';
+import { DisposableComponent } from '../../disposable-component';
+import { CommandFace } from '../command-face';
+import { CommandGroup } from './command-group';
+/**
+ *
+ */
+export declare class PopupMenuComponent extends DisposableComponent implements OnInit, AfterContentInit, AfterViewInit {
+    readonly group: CommandGroup;
+    faceModel: ValueModel<CommandFace>;
+    face: CommandFace;
+    constructor(group: CommandGroup);
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
+}

package/lib/components/commands/group/registration.d.ts

@@ -0,0 +1,32 @@
+import { Command, GarbageCollector, ValueModel } from '@coolon/pectin';
+import { CommandGroup } from './command-group';
+import { ViewData } from './view-data';
+import { CommandFace } from '../command-face';
+export declare abstract class Registration extends GarbageCollector {
+    abstract toTemplate(): ViewData;
+}
+export declare namespace Registration {
+    abstract class FaceRegistration extends Registration {
+        readonly faceModel: ValueModel<CommandFace>;
+        protected constructor(faceModel: ValueModel<CommandFace>);
+    }
+    class CommandRegistration extends FaceRegistration {
+        readonly command: Command<unknown>;
+        constructor(faceModel: ValueModel<CommandFace>, command: Command<unknown>);
+        toTemplate(): ViewData.CommandData;
+    }
+    class GroupRegistration extends FaceRegistration {
+        readonly group: CommandGroup;
+        constructor(faceModel: ValueModel<CommandFace>, group: CommandGroup);
+        toTemplate(): ViewData.GroupData;
+    }
+    class SeparatorRegistration extends Registration {
+        private readonly template;
+        toTemplate(): ViewData.SeparatorData;
+    }
+    class FlexRegistration extends Registration {
+        private readonly template;
+        toTemplate(): ViewData.FlexData;
+    }
+    function hasFace(entry: Registration): entry is FaceRegistration;
+}

package/lib/components/commands/group/tool-bar/tool-bar.component.d.ts

@@ -0,0 +1,13 @@
+import { AfterContentInit, AfterViewInit, OnInit } from '@angular/core';
+import { DisposableComponent } from '../../../disposable-component';
+import { CommandGroup } from '../command-group';
+/**
+ *
+ */
+export declare class ToolBarComponent extends DisposableComponent implements OnInit, AfterContentInit, AfterViewInit {
+    readonly group: CommandGroup;
+    constructor(group: CommandGroup);
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
+}

package/lib/components/commands/group/view-data.d.ts

@@ -0,0 +1,40 @@
+import { ThemePalette } from '@angular/material/core';
+import { Command, Constructable } from '@coolon/pectin';
+import { CommandFace } from '../command-face';
+export declare class ViewData {
+}
+export declare namespace ViewData {
+    class FaceData extends ViewData {
+        readonly faceAdapter: CommandFace.Adapter;
+        constructor(face: CommandFace);
+    }
+    class GroupData extends FaceData {
+        readonly xPosition: any;
+        readonly yPosition: any;
+        readonly children: ViewData[];
+        constructor(face: CommandFace, xPosition: any, yPosition: any, children: ViewData[]);
+        get hasMixedIcons(): boolean;
+    }
+    class CommandData extends FaceData {
+        readonly command: Command<unknown>;
+        constructor(face: CommandFace, command: Command<unknown>);
+    }
+    class SeparatorData extends ViewData {
+    }
+    class FlexData extends ViewData {
+    }
+    function as<T extends ViewData>(type: Constructable<T>, viewData: ViewData): T;
+    function getCommand(data: ViewData): Command<unknown>;
+    function getTooltip(data: ViewData): string;
+    function getStyle(data: ViewData): string;
+    function getColor(data: ViewData): ThemePalette;
+    function hasText(data: ViewData): boolean;
+    function getFace(data: ViewData): CommandFace;
+    function asGroup(viewData: ViewData): ViewData.GroupData;
+    function hasMixedIcons(data: ViewData): boolean;
+    function isGroup(data: ViewData): data is GroupData;
+    function hasFace(data: ViewData): data is FaceData;
+    function isCommand(data: ViewData): data is CommandData;
+    function isSeparator(data: ViewData): data is SeparatorData;
+    function isFlex(data: ViewData): data is FlexData;
+}

package/lib/components/commands/separator.component.d.ts

@@ -0,0 +1,12 @@
+import { OnInit } from '@angular/core';
+import { DisposableComponent } from '../disposable-component';
+import { CommandGroup } from './group/command-group';
+/**
+ *
+ */
+export declare class SeparatorComponent extends DisposableComponent implements OnInit {
+    readonly parent?: CommandGroup;
+    constructor(parent?: CommandGroup);
+    isVertical(): boolean;
+    ngOnInit(): void;
+}

package/lib/components/forms/abstract-input.component.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter, OnInit } from '@angular/core';
 import { ErrorStateMatcher } from '@angular/material/core';
-import { Command, FocusManager, ListModel, ValueModel } from '@coolon/pectin';
+import { Command, Disposable, EventListenerList, FocusManager, ListModel, ValueModel } from '@coolon/pectin';
 import { DisposableComponent } from '../disposable-component';
 interface InputModel<T> {
     value: T;
@@ -9,7 +9,8 @@ interface InputModel<T> {
     focusContext: FocusManager.Context;
 }
 export declare class AbstractInputComponent<T> extends DisposableComponent implements OnInit {
-    protected inputModel: InputModel<T>;
+    protected onValueEditedListeners: EventListenerList<(is: T, was: T) => void>;
+    protected formValueModel: InputModel<T>;
     label: string;
     userFloatLabel: 'auto' | 'always' | 'never';
     hint: string;
@@ -42,5 +43,10 @@ export declare class AbstractInputComponent<T> extends DisposableComponent imple
     get focusContext(): FocusManager.Context;
     get floatLabel(): 'auto' | 'always' | 'never';
     get showHint(): boolean;
+    /**
+     * Invokes the callback when this components value is changed by a user edit.
+     * @param callback
+     */
+    onValueEdited(callback: (is: T, was: T) => void): Disposable;
 }
 export {};

package/lib/components/forms/abstract-list-input.component.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter, OnInit } from '@angular/core';
-import { Form, IMutableListModel } from '@coolon/pectin';
+import { Form, IMutableListModel, MutableListModel } from '@coolon/pectin';
 import { AbstractInputComponent } from './abstract-input.component';
 export declare class AbstractListInputComponent<T> extends AbstractInputComponent<T[]> implements OnInit {
     listModel: Form.ListModelBase<T> | IMutableListModel<T>;
@@ -13,8 +13,9 @@ export declare class AbstractListInputComponent<T> extends AbstractInputComponen
      * friendly delegate.  We have to use an existing delegate for union types as pectin just
      * gets told it's an Object and can't scan for a base type annotated with @DelegateUsing(..).
      */
-    readonly inputModel: Form.DelegatingListModel<T>;
-    private setValueIsInitialising;
+    protected readonly formValueModel: Form.DelegatingListModel<T>;
+    readonly componentListModel: MutableListModel<T>;
+    private setValueIsInProgress;
     private listHolder;
     set value(value: T[]);
     readonly valueChange: EventEmitter<T[]>;

package/lib/components/forms/abstract-value-input.component.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter, OnInit } from '@angular/core';
-import { Form, IMutableValueModel } from '@coolon/pectin';
+import { Form, Guard, IMutableValueModel, MutableValueModel } from '@coolon/pectin';
 import { AbstractInputComponent } from './abstract-input.component';
 export declare class AbstractValueInputComponent<T> extends AbstractInputComponent<T> implements OnInit {
     valueModel: Form.ValueModelBase<T> | IMutableValueModel<T>;
@@ -13,9 +13,10 @@ export declare class AbstractValueInputComponent<T> extends AbstractInputCompone
      * friendly delegate.  We have to use an existing delegate for union types as pectin just
      * gets told it's an Object and can't scan for a base type annotated with @DelegateUsing(..).
      */
-    readonly inputModel: Form.DelegatingValueModel<T>;
-    private setValueIsInitialising;
-    private valueHolder;
+    protected readonly formValueModel: Form.DelegatingValueModel<T>;
+    protected setValueInProgress: Guard;
+    readonly componentValueModel: MutableValueModel<T>;
+    private plainValueHolder;
     set value(value: T);
     readonly valueChange: EventEmitter<T>;
     constructor();

package/lib/components/forms/autocomplete-input/autocomplete-input.component.d.ts

@@ -0,0 +1,25 @@
+import { OnInit, TemplateRef } from '@angular/core';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import { ListModel, ListModelChain } from '@coolon/pectin';
+import { AbstractValueInputComponent } from '../abstract-value-input.component';
+/**
+ * Using templates (not only supported for nil values:
+ * <aup-autocomplete-input [valueModel]="myModel" [options]="myOptions">
+ *   <ng-template #nilOptionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+ * </aup-autocomplete-input>
+ */
+export declare class AutocompleteInputComponent<T = any> extends AbstractValueInputComponent<T> implements OnInit {
+    optionsModel: ListModel<T>;
+    options: T[];
+    optionLabel: keyof T;
+    allowNil: boolean;
+    nilOptionTemplateRef: TemplateRef<any>;
+    private filterValue;
+    readonly filteredOptions: ListModelChain<T>;
+    optionLabelFormat: (option: T) => any;
+    constructor();
+    ngOnInit(): void;
+    formatOption(option: T): any;
+    updateFilter($event: string): void;
+    onSelect($event: MatAutocompleteSelectedEvent): void;
+}

package/lib/components/forms/multiple-select-input/multiple-select-input.component.d.ts

@@ -1,13 +1,18 @@
 import { OnInit, TemplateRef } from '@angular/core';
 import { ListModel } from '@coolon/pectin';
 import { AbstractListInputComponent } from '../abstract-list-input.component';
+/**
+ * Using templates:
+ * <aup-multiple-select-input [valueModel]="myModel" [options]="myOptions">
+ *   <ng-template #optionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+ *   <ng-template #nilOptionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+ * </aup-multiple-select_input>
+ */
 export declare class MultipleSelectInputComponent<T = any> extends AbstractListInputComponent<T> implements OnInit {
     optionsModel: ListModel<T>;
     options: T[];
     optionLabel: keyof T;
-    allowNil: boolean;
     optionTemplateRef: TemplateRef<any>;
-    nilOptionTemplateRef: TemplateRef<any>;
     optionLabelFormat: (option: T) => any;
     constructor();
     ngOnInit(): void;

package/lib/components/forms/select-input/select-input.component.d.ts

@@ -5,6 +5,7 @@ import { AbstractValueInputComponent } from '../abstract-value-input.component';
  * Using templates:
  * <aup-select-input [valueModel]="myModel" [options]="myOptions">
  *   <ng-template #optionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
+ *   <ng-template #nilOptionTemplate let-option>{{option.thePropertyYouWant}}</ng-template>
  * </aup-select_input>
  */
 export declare class SelectInputComponent<T = any> extends AbstractValueInputComponent<T> implements OnInit {

package/lib/components/icon/icon.component.d.ts

@@ -1,8 +1,23 @@
+import { Enum } from 'typescript-string-enums';
 export declare class IconComponent {
     _icon: string;
     prefix: string;
     suffix: string;
     errorMessage: string;
+    allowedPrefixes: string[];
+    iconPrefix: {
+        SVG: "svg";
+        FONT_AWESOME: "fa";
+        MATERIAL: "mat";
+    };
     set icon(iconName: string);
     get icon(): string;
 }
+export declare namespace IconComponent {
+    const IconPrefix: {
+        SVG: "svg";
+        FONT_AWESOME: "fa";
+        MATERIAL: "mat";
+    };
+    type IconPrefix = Enum<typeof IconPrefix>;
+}

package/lib/components/index.d.ts

@@ -5,11 +5,27 @@ export * from "./components.module";
 export * from "./disposable-component";
 export * from "./focusable.component";
 export * from "./resize-aware.component";
+export * from "./track-by";
 export * from "./card-container/card-container.component";
+export * from "./commands/command-face";
+export * from "./commands/flex.component";
+export * from "./commands/separator.component";
+export * from "./commands/command/command.component";
+export * from "./commands/command-face/command-face.component";
+export * from "./commands/group/command-group";
+export * from "./commands/group/more-menu.component";
+export * from "./commands/group/popup-menu.component";
+export * from "./commands/group/registration";
+export * from "./commands/group/view-data";
+export * from "./commands/group/command-group/command-group.component";
+export * from "./commands/group/command-group-menu-renderer/command-group-menu-renderer.component";
+export * from "./commands/group/command-group-renderer/command-group-renderer.component";
+export * from "./commands/group/tool-bar/tool-bar.component";
 export * from "./focus-container/focus-container.component";
 export * from "./forms/abstract-input.component";
 export * from "./forms/abstract-list-input.component";
 export * from "./forms/abstract-value-input.component";
+export * from "./forms/autocomplete-input/autocomplete-input.component";
 export * from "./forms/checkbox-input/checkbox-input.component";
 export * from "./forms/multiple-select-input/multiple-select-input.component";
 export * from "./forms/number-input/number-input.component";
@@ -28,6 +44,7 @@ export * from "./table/cell-renderer";
 export * from "./table/column-model";
 export * from "./table/column-text-properties";
 export * from "./table/edit-session";
+export * from "./table/mutable-cell-renderer";
 export * from "./table/table-def";
 export * from "./table/table-model";
 export * from "./table/table.component";
@@ -39,6 +56,7 @@ export * from "./table/select-cell-renderer/select-cell-renderer.component";
 export * from "./table/select-header-cell-renderer/select-header-cell-renderer.component";
 export * from "./table/table-cell-renderer/table-cell-renderer.component";
 export * from "./table/table-header-cell-renderer/table-header-cell-renderer.component";
+export * from "./table/table-row-menu/table-row-menu.component";
 export * from "./types/bounds.class";
 export * from "./types/dimension.class";
 export * from "./types/point.class";

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

@@ -3,8 +3,10 @@ import { TemplateRef, ViewContainerRef } from '@angular/core';
 import { Command, DirtyTrackingForm, SelectionModel, Types, UnaryCommand, Validator } from '@coolon/pectin';
 import { CellEditorComponent, CellListEditorComponent } from './cell-editors';
 import { CellEditorPortalRef, CellHeaderPortalRef, CellRendererPortalRef } from './cell-portal-ref';
+import { CellRenderer } from './cell-renderer';
 import { ColumnTextProperties } from './column-text-properties';
 import { EditSession } from './edit-session';
+import { MutableCellRenderer } from './mutable-cell-renderer';
 import { TableCellRendererComponent } from './table-cell-renderer/table-cell-renderer.component';
 import { TableHeaderCellRendererComponent } from './table-header-cell-renderer/table-header-cell-renderer.component';
 export interface RowData<Row> {
@@ -12,6 +14,14 @@ export interface RowData<Row> {
     editSession?: EditSession<Row>;
     editRowCommand: Command<void>;
 }
+export declare type OnComponentInit<C> = (component: C) => void;
+export interface CellRendererOptions<Row, E> {
+    onComponentInit?: (component: E) => void;
+    onRowUpdate?: (component: E, row: Row) => void;
+}
+export interface MutableCellRendererOptions<Row, E, P extends keyof Row> extends CellRendererOptions<Row, E> {
+    onValueEdit: (row: Row, is: Row[P], was: Row[P]) => void;
+}
 export declare class ColumnModel<Row> {
     readonly columnId: string;
     private defaults;
@@ -46,25 +56,13 @@ export declare namespace ColumnModel {
         getColumnTextProperties(columnModel: ColumnModel<any>): ColumnTextProperties;
     }
 }
-export interface CellEditorOptions<V, C> {
-    validators?: Validator<V>[];
-    initialiseComponent?(component: C): any;
-}
-export declare type OnComponentInit<C> = (component: C) => void;
-export interface CellRendererOptions<Row, E> {
-    onComponentInit?: (component: E) => void;
-    onRowUpdate?: (component: E, row: Row) => void;
-}
 export declare class PropertyColumnModel<Row, P extends Types.ValuePropertiesOf<Row>> extends ColumnModel<Row> {
     readonly property: P;
     private _format;
     constructor(id: string, property: P, defaults: ColumnModel.Defaults);
-    cellRenderer<E extends {
-        value: Row[P];
-    }>(componentType: ComponentType<E>, options?: CellRendererOptions<Row, E>): this;
-    cellRenderer<E extends {
-        value: Row[P];
-    }>(componentType: ComponentType<E>, onComponentInit?: OnComponentInit<E>): this;
+    cellRenderer<E extends CellRenderer<Row[P]>>(componentType: ComponentType<E>, options?: CellRendererOptions<Row, E>): this;
+    cellRenderer<E extends CellRenderer<Row[P]>>(componentType: ComponentType<E>, onComponentInit?: OnComponentInit<E>): this;
+    mutableCellRenderer<E extends MutableCellRenderer<Row[P]>>(componentType: ComponentType<E>, options: MutableCellRendererOptions<Row, E, P>): this;
     cellEditor<E extends CellEditorComponent<Row[P]>>(editor: ComponentType<E>, validators?: Validator<Row[P]>[], initialiseComponent?: (component: E) => void): this;
     cellEditor<E extends CellEditorComponent<Row[P]>>(editor: ComponentType<E>, initialiseComponent?: (component: E) => void): this;
     format(formatter: (value: Row[P]) => any): this;
@@ -85,9 +83,9 @@ export declare class ListPropertyColumnModel<Row, P extends Types.ArrayPropertie
 export declare class CustomValueColumnModel<Row, V> extends ColumnModel<Row> {
     private getValue;
     constructor(columnId: string, defaults: ColumnModel.Defaults, getValue: (row: Row) => V);
-    cellRenderer(componentType: ComponentType<{
+    cellRenderer<C extends {
         value: V;
-    }>): this;
+    }>(componentType: ComponentType<C>, onComponentInitOrOptions?: CellRendererOptions<Row, C> | OnComponentInit<C>): this;
     selectRowOnClick(selectOnRowClick: boolean): this;
 }
 export declare class EditorControlColumnModel<Row> extends ColumnModel<Row> {

package/lib/components/table/mutable-cell-renderer.d.ts

@@ -0,0 +1,6 @@
+import { CellRenderer } from './cell-renderer';
+import { Disposable } from '@coolon/pectin';
+export interface MutableCellRenderer<T> extends CellRenderer<T> {
+    value: T;
+    onValueEdited(callback: (is: T, was: T) => void): Disposable;
+}

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

@@ -1,5 +1,7 @@
+import { ComponentType } from '@angular/cdk/overlay';
 import { BooleanValueModelChain, CanIdentify, DirtyTrackingForm, ListModel, ListModelChain, SelectionModel, Types, UnaryCommand, ValueModelChain } from '@coolon/pectin';
-import { ColumnModel, CustomTemplateColumnModel, CustomValueColumnModel, EditorControlColumnModel, ListPropertyColumnModel, PropertyColumnModel, SelectionColumnModel } from './column-model';
+import { CellRenderer } from './cell-renderer';
+import { CellRendererOptions, ColumnModel, CustomTemplateColumnModel, CustomValueColumnModel, EditorControlColumnModel, ListPropertyColumnModel, OnComponentInit, PropertyColumnModel, SelectionColumnModel } from './column-model';
 import { ColumnTextProperties } from './column-text-properties';
 import { EditSession } from './edit-session';
 /**
@@ -93,7 +95,7 @@ export declare class TableModel<Row> {
     private _createForm;
     protected constructor(sourceOfTruth: ListModel<Row>);
     get rowsBeingEdited(): ListModel<Row>;
-    getTrackByFunction(): (index: number, item: Row) => any;
+    readonly trackBy: (index: number, item: Row) => any;
     get columns(): ListModel<ColumnModel<Row>>;
     pluck<P extends Types.ValuePropertiesOf<Row>>(property: P, options?: {
         columnId: string;
@@ -104,13 +106,15 @@ export declare class TableModel<Row> {
     addSelectionColumn(selectionModel: SelectionModel<Row>): 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>;
     addTemplateColumn<V>(columnId: string): CustomTemplateColumnModel<Row>;
     addRowClass(className: string, predicate: (row: Row) => boolean): void;
     getRowClasses(row: Row): string[];
     useFormFactory(factory: (row: Row) => DirtyTrackingForm<Row>): this;
     protected addColumn<C extends ColumnModel<Row>>(column: C): C;
     columnTextProperties(columnTextProperties: {
-        [columnName: string]: () => ColumnTextProperties;
+        [columnName: string]: ColumnTextProperties;
     }): void;
     getColumnTextProperties(column: ColumnModel<Row>): ColumnTextProperties;
     startEditSession(row: Row): EditSession<Row>;