@coolon/angular-ui-powerups 1.10.0 → 1.11.1

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

@@ -0,0 +1,18 @@
+import { Command, FormValueModel, Validator } from '@coolon/pectin';
+import { InteractionContext, Activity } from '../../interaction';
+export interface InputActivityData<T> {
+    label?: string;
+    placeholder?: string;
+    initialValue: T;
+    validators?: Validator<T>[];
+    save?(valueModel: FormValueModel<T>, interactionContext?: InteractionContext): void | Promise<unknown>;
+}
+export declare class AbstractInputActivity<T> extends Activity<InputActivityData<T>, T> {
+    readonly data: InputActivityData<T>;
+    readonly confirmCommand: Command<void>;
+    readonly cancelCommand: Command<void>;
+    readonly valueModel: FormValueModel<T>;
+    class: string;
+    constructor(data: InputActivityData<T>);
+    onActivityReady(): void;
+}

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

@@ -28,6 +28,7 @@ export declare class AbstractInputComponent<T> extends DisposableComponent imple
     enterKey: EventEmitter<any>;
     escapeKey: EventEmitter<any>;
     readonly errorStateMatcher: ErrorStateMatcher;
+    baseClassName: string;
     notifyClick(): void;
     notifyFocusIn(): void;
     notifyFocusOut(): void;

package/lib/components/forms/string-input/string-input-activity.d.ts

@@ -0,0 +1,3 @@
+import { AbstractInputActivity } from '../abstract-input-activity';
+export declare class StringInputActivity extends AbstractInputActivity<string> {
+}

package/lib/components/index.d.ts

@@ -7,16 +7,33 @@ export * from "./focusable.component";
 export * from "./resize-aware.component";
 export * from "./card-container/card-container.component";
 export * from "./focus-container/focus-container.component";
+export * from "./forms/abstract-input-activity";
 export * from "./forms/abstract-input.component";
 export * from "./forms/checkbox-input/checkbox-input.component";
 export * from "./forms/number-input/number-input.component";
 export * from "./forms/password-input/password-input.component";
 export * from "./forms/select-input/select-input.component";
+export * from "./forms/string-input/string-input-activity";
 export * from "./forms/string-input/string-input.component";
 export * from "./forms/text-input/text-input.component";
 export * from "./noop/noop.component";
 export * from "./scroll-container/scroll-container.component";
 export * from "./switch-case/switch-case.component";
+export * from "./table/cell-editor.component";
+export * from "./table/cell-renderer";
+export * from "./table/column-model";
+export * from "./table/column-text-properties";
+export * from "./table/table-def";
+export * from "./table/table-model";
+export * from "./table/table.component";
+export * from "./table/column-template/column-template.directive";
+export * from "./table/default-cell-renderer/default-cell-renderer.component";
+export * from "./table/default-header-cell-renderer/default-header-cell-renderer.component";
+export * from "./table/edit-row-controls/edit-row-controls.component";
+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 "./types/bounds.class";
 export * from "./types/dimension.class";
 export * from "./types/point.class";

package/lib/components/table/cell-editor.component.d.ts

@@ -0,0 +1,5 @@
+import { FormValueModel, ValueModel } from '@coolon/pectin';
+export interface CellEditorComponent<T> {
+    valueModel: ValueModel<T> | FormValueModel<T>;
+    requestFocus?(): any;
+}

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

@@ -0,0 +1,3 @@
+export interface CellRenderer<T> {
+    value: T;
+}

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

@@ -0,0 +1,84 @@
+import { ComponentType } from '@angular/cdk/overlay';
+import { Portal } from '@angular/cdk/portal';
+import { Command, Form, SelectionModel, Types, UnaryCommand, Validator } from '@coolon/pectin';
+import { AbstractInputComponent } from '../forms/abstract-input.component';
+import { CellEditorComponent } from './cell-editor.component';
+import { ColumnTextProperties } from './column-text-properties';
+import { TableModel } from './table-model';
+export interface ColumnHeaderConfig<Row, C extends any> {
+    portal: Portal<C>;
+    initialiseComponent?: (component: C, column: ColumnModel<Row>) => void;
+}
+export interface CellRendererConfig<Row, C extends any> {
+    portal: Portal<C>;
+    pushState?: (component: C, row: Row, editRowCommand: Command<void>, editSession: TableModel.EditSession<Row>) => void;
+}
+export interface CellEditorConfig<Row, V, C extends AbstractInputComponent<V>> {
+    portal: Portal<C>;
+    initialiseComponent?: (component: C, editSession: TableModel.EditSession<Row>) => void;
+}
+export declare class ColumnModel<Row> {
+    readonly columnId: string;
+    private defaults;
+    private _columnTextProperties;
+    private _columnHeaderConfig;
+    private _cellRendererConfig;
+    private _cellEditorConfig;
+    constructor(columnId: string, defaults: ColumnModel.Defaults);
+    getHeaderText(): string;
+    protected getDefaultHeaderText(): string;
+    getColumnTextProperties(): ColumnTextProperties;
+    textProperties(columnTextProperties: ColumnTextProperties): this;
+    protected setCellRenderer<C>(cellRenderer: ComponentType<C>, initialiser: (component: C, row: Row, editRowCommand: Command<void>, editSession: TableModel.EditSession<Row>) => void): void;
+    cellHeaderRenderer<C>(cellRenderer: ComponentType<C>, initialiser: (component: C, column: ColumnModel<Row>) => void): void;
+    protected setCellEditor<E extends AbstractInputComponent<any>>(cellEditor: CellEditorConfig<any, any, any>): void;
+    get cellRendererPortal(): Portal<any>;
+    get columnHeaderCellRendererPortal(): Portal<any>;
+    get cellEditorPortal(): Portal<any>;
+    hasEditor(): boolean;
+    updateCellRenderer(component: any, row: Row, editRowCommand: Command<void>, editSession: TableModel.EditSession<Row>): void;
+    initialiseHeader(component: any): void;
+    initialiseEditor(component: any, editSession: TableModel.EditSession<Row>): void;
+}
+export declare namespace ColumnModel {
+    type Defaults = Pick<TableModel<any>, 'getColumnTextProperties'>;
+}
+export interface CellEditorOptions<V, E extends CellEditorComponent<V>> {
+    validators?: Validator<V>[];
+    initialiseComponent?(component: E): any;
+}
+export declare class PropertyColumnModel<Row, P extends Types.ValuePropertiesOf<Row>> extends ColumnModel<Row> {
+    readonly property: P;
+    constructor(property: P, defaults: ColumnModel.Defaults);
+    cellRenderer(componentType: ComponentType<{
+        value: Row[P];
+    }>): void;
+    cellEditor<E extends CellEditorComponent<Row[P]>>(editor: ComponentType<E>, options?: CellEditorOptions<Row[P], E>): this;
+}
+export declare class CustomValueColumnModel<Row, V> extends ColumnModel<Row> {
+    private getValue;
+    constructor(columnId: string, defaults: ColumnModel.Defaults, getValue: (row: Row) => V);
+    cellRenderer(componentType: ComponentType<{
+        value: V;
+    }>): void;
+}
+export declare class EditorControlColumnModel<Row> extends ColumnModel<Row> {
+    constructor(columnId: string, saveCommand: UnaryCommand<Form<Row>, boolean>, defaults: ColumnModel.Defaults);
+    cellRenderer(componentType: ComponentType<{
+        row: Row;
+        editSession: TableModel.EditSession<Row>;
+        editRowCommand: Command<void>;
+    }>): void;
+    protected getDefaultHeaderText(): string;
+}
+export declare class CustomTemplateColumnModel<Row> extends ColumnModel<Row> {
+    constructor(columnId: string, defaults: ColumnModel.Defaults, component: ComponentType<{
+        editCommand: Command<void>;
+        saveCommand: Command<void>;
+        cancelCommand: Command<void>;
+    }>);
+}
+export declare class SelectionColumnModel<Row> extends ColumnModel<Row> {
+    constructor(columnId: string, defaults: ColumnModel.Defaults, selectionModel: SelectionModel<Row>);
+    protected getDefaultHeaderText(): string;
+}

package/lib/components/table/column-template/column-template.directive.d.ts

@@ -0,0 +1,7 @@
+import { TemplateRef, ViewContainerRef } from '@angular/core';
+import { TableComponent } from '../table.component';
+export declare class ColumnTemplateDirective {
+    private templateRef;
+    private viewContainer;
+    constructor(host: TableComponent<any>, templateRef: TemplateRef<any>, viewContainer: ViewContainerRef);
+}

package/lib/components/table/column-text-properties.d.ts

@@ -0,0 +1,3 @@
+export interface ColumnTextProperties {
+    headerText?(): string;
+}

package/lib/components/table/default-cell-renderer/default-cell-renderer.component.d.ts

@@ -0,0 +1,6 @@
+export declare class DefaultCellRendererComponent<T> {
+    private _value;
+    set value(value: T);
+    get value(): T;
+    constructor();
+}

package/lib/components/table/default-header-cell-renderer/default-header-cell-renderer.component.d.ts

@@ -0,0 +1,5 @@
+import { ColumnModel } from '../column-model';
+export declare class DefaultHeaderCellRendererComponent {
+    columnModel: ColumnModel<any>;
+    constructor();
+}

package/lib/components/table/edit-row-controls/edit-row-controls.component.d.ts

@@ -0,0 +1,14 @@
+import { OnInit } from '@angular/core';
+import { Command, Form } from '@coolon/pectin';
+import { DisposableComponent } from '../../disposable-component';
+import { TableModel } from '../table-model';
+export declare class EditRowControls<Row> extends DisposableComponent implements OnInit {
+    row: Row;
+    editRowCommand: Command<void>;
+    editSession: TableModel.EditSession<Row>;
+    readonly saveCommand: Command<void>;
+    readonly cancelCommand: Command<void>;
+    constructor();
+    ngOnInit(): void;
+    get form(): Form<Row>;
+}

package/lib/components/table/select-cell-renderer/select-cell-renderer.component.d.ts

@@ -0,0 +1,11 @@
+import { Command, SelectionModel } from '@coolon/pectin';
+import { DisposableComponent } from '../../disposable-component';
+export declare class SelectCellRendererComponent<Row> extends DisposableComponent {
+    private _row;
+    readonly selectCommand: Command<void>;
+    set row(value: Row);
+    get row(): Row;
+    selectionModel: SelectionModel<Row>;
+    constructor();
+    isSelected(): boolean;
+}

package/lib/components/table/select-header-cell-renderer/select-header-cell-renderer.component.d.ts

@@ -0,0 +1,9 @@
+import { Command, MultipleSelectionModel } from '@coolon/pectin';
+import { DisposableComponent } from '../../disposable-component';
+export declare class SelectHeaderCellRendererComponent<Row> extends DisposableComponent {
+    readonly selectCommand: Command<void>;
+    selectionModel: MultipleSelectionModel<Row, any>;
+    constructor();
+    isSelected(): boolean;
+    isIntermediate(): boolean;
+}

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

@@ -0,0 +1,18 @@
+import { OnChanges, SimpleChanges } from '@angular/core';
+import { ColumnModel } from '../column-model';
+import { TableModel } from '../table-model';
+export declare class TableCellRendererComponent<Row> implements OnChanges {
+    row: Row;
+    column: ColumnModel<Row>;
+    editSession: TableModel.EditSession<Row>;
+    tableModel: TableModel<Row>;
+    private renderer;
+    private editor;
+    private editRowCommand;
+    defaultClassNames: string;
+    constructor();
+    initialiseRenderer(instance: any): void;
+    initialiseEditor(instance: any): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    hasActiveEditor(): boolean;
+}

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

@@ -0,0 +1,7 @@
+import { Form } from '@coolon/pectin';
+export interface TableDef<T> {
+}
+export interface EditableTableDef<T> extends TableDef<T> {
+    createRowForm?(item: T): Form<T>;
+    save(form: Form<T>): any;
+}

package/lib/components/table/table-header-cell-renderer/table-header-cell-renderer.component.d.ts

@@ -0,0 +1,8 @@
+import { ColumnModel } from '../column-model';
+export declare class TableHeaderCellRendererComponent<Row> {
+    column: ColumnModel<Row>;
+    private renderer;
+    defaultClassNames: string;
+    constructor();
+    initialiseHeader(instance: any): void;
+}

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

@@ -0,0 +1,114 @@
+import { BooleanValueModelChain, CanIdentify, Form, GarbageCollector, ListModel, ListModelChain, SelectionModel, Types, UnaryCommand } from '@coolon/pectin';
+import { ColumnModel, CustomValueColumnModel, EditorControlColumnModel, PropertyColumnModel, SelectionColumnModel } from './column-model';
+import { ColumnTextProperties } from './column-text-properties';
+/**
+ * Example:
+ * @example
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ * });
+ *
+ * Editable tables
+ * @example
+ * const saveCommand = UnaryCommand.create((form: Form<Hero>) => {
+ *   if (form.validate()) {
+ *     // normal form save stuff
+ *     return true; // finish editing
+ *   }
+ *   return false; // continue editiing
+ * }
+ * const colorsNames: ListModel<string> = ...;
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.pluck("firstName").cellEditor(StringInputComponent); <-- interface CellEditor { valueModel: FormValueModel<string> | ValueModel<string>; }
+ *   table.pluck("lastName").cellEditor(StringInputComponent, {
+ *     validators: [Validator.present("We need a last name")]
+ *   });
+ *   table.pluck("age").cellEditor(NumberInputComponent);
+ *   table.pluck("favoriteColor").cellEditor(SelectInputComponent, {
+ *     initialiseComponent(component: SelectInputComponent) {
+ *       selectInput.optionsModel = colorsNames; // <- initialise our component
+ *     }
+ *   });
+ *   table.addEditControls(saveCommand); // <- required to enable editing
+ * });
+ *
+ * Selection models
+ * @example
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.addSelectionColumn(selectionModel); // <- can be single or multiple selection model
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ * });
+ *
+ * Custom cell renderers and editors
+ * @example
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.pluck("favoriteColor")
+ *      .cellHeaderRenderer(CellHeaderRendererComponent, (component, column) => {
+ *        // configure your component with what ever you need.
+ *      });
+ *      .cellRenderer(CellRendererComponent) // <-- interface CellEditor { value: string; }
+ *      .cellEditor(CellEditorComponent.); // <-- interface CellEditor { valueModel: FormValueModel<string> | ValueModel<string>; }
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ * });
+ *
+ * I18n
+ * @example
+ * [table.yml]
+ * table:
+ *   columns(ColumnTextProperties[]):
+ *      firstName:
+ *         headerText: "First Name"
+ *      fullName:
+ *         headerText: "Full Name"
+ *
+ * const model = TableModel.fromList(heroList, table => {
+ *   table.pluck("favoriteColor").cellRenderer(...).cellEditor(...);
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ *
+ *   table.columnTextProperties(I18n.table.columns); // <- configures all columns
+ * });
+ */
+export declare class TableModel<Row> {
+    private sourceOfTruth;
+    private readonly _garbage;
+    private readonly _columns;
+    private _columnsById;
+    private _editorSessions;
+    private readonly _rowsBeingEdited;
+    private _columnTextPropertiesLookup;
+    readonly identityOf: CanIdentify<Row>['identityOf'];
+    private saveCommand;
+    private _editorSessionByRowId;
+    readonly editing: BooleanValueModelChain;
+    readonly dataSource: ListModelChain<Row>;
+    static fromList<Row>(sourceOfTruth: ListModel<Row>, builder?: (tableModel: TableModel<Row>) => void): TableModel<Row>;
+    protected constructor(sourceOfTruth: ListModel<Row>);
+    get rowsBeingEdited(): ListModel<Row>;
+    getTrackByFunction(): (index: number, item: Row) => any;
+    get columns(): ListModel<ColumnModel<Row>>;
+    pluck<P extends Types.ValuePropertiesOf<Row>>(property: P): PropertyColumnModel<Row, P>;
+    addSelectionColumn(selectionModel: SelectionModel<Row>): SelectionColumnModel<Row>;
+    addEditControls(saveCommand: UnaryCommand<Form<Row>, boolean>): EditorControlColumnModel<Row>;
+    addCustomColumn<V>(columnId: string, dataAccessor: (row: Row) => V): CustomValueColumnModel<Row, V>;
+    protected addColumn<C extends ColumnModel<Row>>(column: C): C;
+    columnTextProperties(columnTextProperties: {
+        [columnName: string]: () => ColumnTextProperties;
+    }): void;
+    getColumnTextProperties(column: ColumnModel<Row>): ColumnTextProperties;
+    startEditSession(row: Row): TableModel.EditSession<Row>;
+    getEditSessionFor(row: Row): TableModel.EditSession<Row>;
+    cancelAllEditorSessions(): void;
+}
+export declare namespace TableModel {
+    class EditSession<Row> extends GarbageCollector {
+        readonly rowId: any;
+        readonly saveCommand: UnaryCommand<Form<Row>, boolean>;
+        readonly form: Form<Row>;
+        private _editorValue;
+        readonly rowValueModel: import("@coolon/pectin").ValueModel<Row>;
+        constructor(rowId: any, row: Row, saveCommand: UnaryCommand<Form<Row>, boolean>);
+    }
+}

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

@@ -0,0 +1,40 @@
+import { OnInit } from '@angular/core';
+import { ListModelChain } from '@coolon/pectin';
+import { DisposableComponent } from '../disposable-component';
+import { ColumnModel } from './column-model';
+import { TableModel } from './table-model';
+/**
+ * Create your model:
+ * @example
+ * this.heroTableModel = TableModel.fromList(heroList, table => {
+ *   table.pluck("firstName");
+ *   table.pluck("lastName");
+ *   table.addCustomColumn("fullName", hero => `${hero.firstName} ${hero.lastName}`);
+ * });
+ *
+ * Create your table
+ * @example
+ * <aup-table [tableModel]="heroTableModel"></aup-table>
+ *
+ * Styling
+ * @example
+ * aup-table {
+ *   --column-gap: 10px; // defaults to 24px
+ *   aup-table-cell-renderer {
+ *     &:first-column {
+ *       // do stuff
+ *     }
+ *     &:last-column {
+ *       // do stuff
+ *     }
+ *   }
+ * }
+ */
+export declare class TableComponent<T> extends DisposableComponent implements OnInit {
+    tableModel: TableModel<T>;
+    columns: ListModelChain<ColumnModel<T>>;
+    columnIds: ListModelChain<string>;
+    constructor();
+    ngOnInit(): void;
+    isEditing(row: T): boolean;
+}

package/lib/interaction/activity.d.ts

@@ -7,6 +7,7 @@ export declare abstract class Activity<D, R, E = any> extends DisposableComponen
     private readonly _busyModel;
     private _activityContext;
     private _interactionContext;
+    class: string;
     initialise(nestedInteractionContext: InteractionContext, activityContext: Activity.Callbacks<R, E>): void;
     get interactionContext(): InteractionContext;
     done(result?: R): void;

package/lib/interaction/components/popup-interaction-context/popup-interaction-context.component.d.ts

@@ -0,0 +1,21 @@
+import { ConnectedPosition, Overlay } from '@angular/cdk/overlay';
+import { ComponentPortal } from '@angular/cdk/portal';
+import { ElementRef, OnInit } from '@angular/core';
+import { Constructable } from '@coolon/pectin';
+import { Activity, InPlaceInteractionContextComponent } from '../..';
+import { DisposableComponent } from '../../../components';
+export declare class PopupInteractionContextComponent extends DisposableComponent implements OnInit {
+    private _element;
+    private _overlay;
+    private interactionContext;
+    get active(): boolean;
+    readonly outputPortal: ComponentPortal<InPlaceInteractionContextComponent<any, any, any>>;
+    anchorX: 'start' | 'end';
+    anchorY: 'top' | 'bottom';
+    constructor(_element: ElementRef, _overlay: Overlay);
+    startActivity<D, R, E>(activityType: Constructable<Activity<D, R, E>>, data?: D): Promise<R>;
+    computePositions(): ConnectedPosition[];
+    cancelActiveActivity(): Promise<boolean>;
+    isActive(): boolean;
+    ngOnInit(): void;
+}

package/lib/interaction/directives/interaction-context-trigger-for.directive.d.ts

@@ -0,0 +1,17 @@
+import { EventEmitter } from '@angular/core';
+import { Constructable, GarbageCollector } from '@coolon/pectin';
+import { Activity } from '../activity';
+import { InteractionContext } from '../interaction-context';
+export declare class InteractionContextTriggerFor<D, R, E> extends GarbageCollector {
+    aupInteractionContextTriggerFor: Pick<InteractionContext, 'startActivity' | 'isActive' | 'cancelActiveActivity'>;
+    activityClass: Constructable<Activity<D, R, E>>;
+    activityData?: D;
+    activityDataFactory?: () => D;
+    activityDone: EventEmitter<R>;
+    activityCancelled: EventEmitter<E>;
+    constructor();
+    onEnter(event: KeyboardEvent): void;
+    onClick(event: MouseEvent): void;
+    protected startActivity(): void;
+    prepareActivityData(): D;
+}

package/lib/interaction/index.d.ts

@@ -18,6 +18,8 @@ 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/inplace-interaction-context/in-place-interaction-context.component";
+export * from "./components/popup-interaction-context/popup-interaction-context.component";
+export * from "./directives/interaction-context-trigger-for.directive";
 export * from "./services/interaction-service-routing-adapter";
 export * from "./services/interaction.service";
 export * from "./services/modal-interaction-context.factory";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coolon/angular-ui-powerups",
-  "version": "1.10.0",
+  "version": "1.11.1",
   "schematics": "./schematics/collection.json",
   "dependencies": {
     "ts-morph": "^7.0.3",
@@ -11,6 +11,7 @@
     "@angular/platform-browser": "^9.1.9",
     "factory.ts": "^0.5.1",
     "faker": "^4.1.0",
+    "immer": "^6.0.5",
     "@angular/platform-browser-dynamic": "^9.1.9",
     "@angular/flex-layout": "^9.0.0-beta.31",
     "@angular/router": "^9.1.9",
@@ -23,7 +24,7 @@
     "@angular/material": "^9.2.4",
     "@angular/animations": "^9.1.9",
     "@angular/cdk": "^9.2.4",
-    "@coolon/pectin": ">=2.2.0",
+    "@coolon/pectin": ">=2.5.5",
     "resize-observer-polyfill": "^1.5.1",
     "tslib": "^1.10.0"
   },