@coolon/angular-ui-powerups 2.0.0-alpha.38 → 2.0.0-alpha.5

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, Disposable, EventListenerList, FocusManager, ListModel, ValueModel } from '@coolon/pectin';
+import { Command, FocusManager, ListModel, ValueModel } from '@coolon/pectin';
 import { DisposableComponent } from '../disposable-component';
 interface InputModel<T> {
     value: T;
@@ -9,8 +9,7 @@ interface InputModel<T> {
     focusContext: FocusManager.Context;
 }
 export declare class AbstractInputComponent<T> extends DisposableComponent implements OnInit {
-    protected onValueEditedListeners: EventListenerList<(is: T, was: T) => void>;
-    protected formValueModel: InputModel<T>;
+    protected inputModel: InputModel<T>;
     label: string;
     userFloatLabel: 'auto' | 'always' | 'never';
     hint: string;
@@ -43,10 +42,5 @@ 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, MutableListModel } from '@coolon/pectin';
+import { Form, IMutableListModel } 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,9 +13,8 @@ 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(..).
      */
-    protected readonly formValueModel: Form.DelegatingListModel<T>;
-    readonly componentListModel: MutableListModel<T>;
-    private setValueIsInProgress;
+    readonly inputModel: Form.DelegatingListModel<T>;
+    private setValueIsInitialising;
     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, Guard, IMutableValueModel, MutableValueModel } from '@coolon/pectin';
+import { Form, IMutableValueModel } 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,10 +13,9 @@ 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(..).
      */
-    protected readonly formValueModel: Form.DelegatingValueModel<T>;
-    protected setValueInProgress: Guard;
-    readonly componentValueModel: MutableValueModel<T>;
-    private plainValueHolder;
+    readonly inputModel: Form.DelegatingValueModel<T>;
+    private setValueIsInitialising;
+    private valueHolder;
     set value(value: T);
     readonly valueChange: EventEmitter<T>;
     constructor();

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

@@ -1,18 +1,13 @@
 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,7 +5,6 @@ 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,23 +1,8 @@
-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,27 +5,11 @@ 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";
@@ -39,12 +23,11 @@ export * from "./scroll-container/scroll-container.component";
 export * from "./section-header/section-header.component";
 export * from "./switch-case/switch-case.component";
 export * from "./table/cell-editors";
-export * from "./table/cell-portal-ref";
+export * from "./table/cell-protal-ref";
 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";
@@ -56,7 +39,6 @@ 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/{cell-portal-ref.d.ts → cell-protal-ref.d.ts}

@@ -1,9 +1,9 @@
 import { ComponentType } from '@angular/cdk/overlay';
 import { TemplateRef, ViewContainerRef } from '@angular/core';
 import { ColumnModel, RowData } from './column-model';
-import { EditSession } from './edit-session';
-import { TableCellRendererComponent } from './table-cell-renderer/table-cell-renderer.component';
 import { TableHeaderCellRendererComponent } from './table-header-cell-renderer/table-header-cell-renderer.component';
+import { TableCellRendererComponent } from './table-cell-renderer/table-cell-renderer.component';
+import { EditSession } from './edit-session';
 export declare const HEADER_CELL_RENDERER_PORTAL: unique symbol;
 export declare const CELL_RENDERER_PORTAL: unique symbol;
 export declare const CELL_EDITOR_PORTAL: unique symbol;
@@ -26,8 +26,8 @@ export declare abstract class CellRendererPortalRef<Row, Portal> extends CellPor
 }
 export declare class ComponentCellRendererPortalRef<Row, Portal> extends CellRendererPortalRef<Row, Portal> {
     readonly componentType: ComponentType<Portal>;
-    readonly updateComponent: (component: Portal, rowData: RowData<Row>, firstTime: boolean) => void;
-    constructor(componentType: ComponentType<Portal>, updateComponent: (component: Portal, rowData: RowData<Row>, firstTime: boolean) => void);
+    readonly updateComponent: (component: Portal, rowData: RowData<Row>) => void;
+    constructor(componentType: ComponentType<Portal>, updateComponent: (component: Portal, rowData: RowData<Row>) => void);
     initialiseHost(host: TableCellRendererComponent<Row>, columnModel: ColumnModel<Row>): void;
     onPortalAttached(host: TableCellRendererComponent<Row>, portalComponent: Portal): void;
     pushState(host: TableCellRendererComponent<Row>): void;

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

@@ -2,11 +2,9 @@ import { ComponentType } from '@angular/cdk/overlay';
 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 { CellEditorPortalRef, CellHeaderPortalRef, CellRendererPortalRef } from './cell-protal-ref';
 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> {
@@ -14,14 +12,6 @@ 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;
@@ -56,13 +46,17 @@ export declare namespace ColumnModel {
         getColumnTextProperties(columnModel: ColumnModel<any>): ColumnTextProperties;
     }
 }
+export interface CellEditorOptions<V, C> {
+    validators?: Validator<V>[];
+    initialiseComponent?(component: C): any;
+}
 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 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;
+    constructor(property: P, defaults: ColumnModel.Defaults);
+    cellRenderer(componentType: ComponentType<{
+        value: Row[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;
@@ -71,7 +65,7 @@ export declare class PropertyColumnModel<Row, P extends Types.ValuePropertiesOf<
 export declare class ListPropertyColumnModel<Row, P extends Types.ArrayPropertiesOf<Row>> extends ColumnModel<Row> {
     readonly property: P;
     private _format;
-    constructor(id: string, property: P, defaults: ColumnModel.Defaults);
+    constructor(property: P, defaults: ColumnModel.Defaults);
     cellRenderer(componentType: ComponentType<{
         value: Types.ArrayElementType<Row, P>[];
     }>): this;
@@ -83,9 +77,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<C extends {
+    cellRenderer(componentType: ComponentType<{
         value: V;
-    }>(componentType: ComponentType<C>, onComponentInitOrOptions?: CellRendererOptions<Row, C> | OnComponentInit<C>): this;
+    }>): this;
     selectRowOnClick(selectOnRowClick: boolean): this;
 }
 export declare class EditorControlColumnModel<Row> extends ColumnModel<Row> {

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

@@ -5,7 +5,7 @@ import { CellEditorComponent, CellListEditorComponent } from '../cell-editors';
 import { ColumnModel, RowData } from '../column-model';
 import { EditSession } from '../edit-session';
 import { TableModel } from '../table-model';
-import { CELL_RENDERER_PORTAL, CELL_EDITOR_PORTAL } from '../cell-portal-ref';
+import { CELL_RENDERER_PORTAL, CELL_EDITOR_PORTAL } from '../cell-protal-ref';
 export declare class TableCellRendererComponent<Row> extends DisposableComponent implements OnInit, OnChanges {
     row: Row;
     column: ColumnModel<Row>;

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

@@ -1,7 +1,7 @@
 import { Portal } from '@angular/cdk/portal';
 import { OnInit } from '@angular/core';
 import { ColumnModel } from '../column-model';
-import { HEADER_CELL_RENDERER_PORTAL } from '../cell-portal-ref';
+import { HEADER_CELL_RENDERER_PORTAL } from '../cell-protal-ref';
 export declare class TableHeaderCellRendererComponent implements OnInit {
     column: ColumnModel<any>;
     defaultClassNames: string;

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

@@ -1,7 +1,5 @@
-import { ComponentType } from '@angular/cdk/overlay';
 import { BooleanValueModelChain, CanIdentify, DirtyTrackingForm, ListModel, ListModelChain, SelectionModel, Types, UnaryCommand, ValueModelChain } from '@coolon/pectin';
-import { CellRenderer } from './cell-renderer';
-import { CellRendererOptions, ColumnModel, CustomTemplateColumnModel, CustomValueColumnModel, EditorControlColumnModel, ListPropertyColumnModel, OnComponentInit, PropertyColumnModel, SelectionColumnModel } from './column-model';
+import { ColumnModel, CustomTemplateColumnModel, CustomValueColumnModel, EditorControlColumnModel, ListPropertyColumnModel, PropertyColumnModel, SelectionColumnModel } from './column-model';
 import { ColumnTextProperties } from './column-text-properties';
 import { EditSession } from './edit-session';
 /**
@@ -95,26 +93,20 @@ export declare class TableModel<Row> {
     private _createForm;
     protected constructor(sourceOfTruth: ListModel<Row>);
     get rowsBeingEdited(): ListModel<Row>;
-    readonly trackBy: (index: number, item: Row) => any;
+    getTrackByFunction(): (index: number, item: Row) => any;
     get columns(): ListModel<ColumnModel<Row>>;
-    pluck<P extends Types.ValuePropertiesOf<Row>>(property: P, options?: {
-        columnId: string;
-    }): PropertyColumnModel<Row, P>;
-    pluckList<P extends Types.ArrayPropertiesOf<Row>>(property: P, options?: {
-        columnId: string;
-    }): ListPropertyColumnModel<Row, P>;
+    pluck<P extends Types.ValuePropertiesOf<Row>>(property: P): PropertyColumnModel<Row, P>;
+    pluckList<P extends Types.ArrayPropertiesOf<Row>>(property: P): ListPropertyColumnModel<Row, P>;
     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>;

package/lib/interaction/activity-ref.d.ts

@@ -8,13 +8,10 @@ export declare class ActivityRef<D, R, E> {
     private _complete;
     private _activity;
     private deferredResult;
-    private readonly focusedModel;
     constructor(activityClass: Constructable<Activity<D, R, E>>, activityData: D, onComplete: (activityRef: ActivityRef<D, R, E>) => void);
     isActivityRealised(): boolean;
     isComplete(): boolean;
     get activity(): Activity<D, R, E>;
-    setFocused(focused: boolean): void;
-    get focused(): boolean;
     notifyActivityCreated(activity: Activity<D, R, E>, nestedInteractionContext: InteractionContext): void;
     protected finishActivity(resolveOrReject: (deferred: Deferred<R>) => void): void;
     cancel(): void;

package/lib/interaction/activity.d.ts

@@ -5,26 +5,22 @@ import { InteractionContext } from './interaction-context';
 export declare const ACTIVITY_DATA: InjectionToken<any>;
 export declare abstract class Activity<D, R, E = any> extends DisposableComponent {
     private readonly _busyModel;
-    private _focusedModel;
     private _activityContext;
     private _interactionContext;
     class: string;
-    get isFocused(): boolean;
-    initialise(nestedInteractionContext: InteractionContext, activityContext: Activity.Context<R, E>): void;
+    initialise(nestedInteractionContext: InteractionContext, activityContext: Activity.Callbacks<R, E>): void;
     get interactionContext(): InteractionContext;
     done(result?: R): void;
     cancel(error?: E): void;
     onActivityReady(): void;
     get busy(): ValueModel<boolean>;
-    get focused(): ValueModel<boolean>;
     busyWhile(busyModel: ValueModel<boolean>): void;
     isBusy(): boolean;
     isInitialised(): boolean;
 }
 export declare namespace Activity {
-    interface Context<R, E> {
+    interface Callbacks<R, E> {
         onDone: (result: R) => void;
         onCancel: (error: E) => void;
-        focused: ValueModel<boolean>;
     }
 }

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

@@ -1,6 +1,6 @@
 import { AfterViewInit, OnInit, QueryList } from '@angular/core';
 import { MatTabGroup } from '@angular/material/tabs';
-import { Constructable, Disposable, MutableValueModel } from '@coolon/pectin';
+import { Constructable, Disposable } from '@coolon/pectin';
 import { AbstractInteractionContext } from '../../abstract-interaction-context';
 import { Activity } from '../../activity';
 import { ActivityRef } from '../../activity-ref';
@@ -10,14 +10,13 @@ export declare class ActivityContainerComponent<D, R, E> extends AbstractInterac
     dynamicHeight: boolean;
     tabs: MatTabGroup;
     activityOutlets: QueryList<ActivityOutletComponent<any, any, any>>;
-    activityRefs: ActivityRef<any, any, any>[];
+    activityTabs: ActivityRef<any, any, any>[];
     private _identifier;
     private _deferredCleanUp;
     private interactionServiceApi;
     private garbage;
     private syncSelectedTabTimeout;
     private onAnimationFinishedJob;
-    readonly inAnimation: MutableValueModel<boolean>;
     constructor();
     ngOnInit(): void;
     ngAfterViewInit(): void;
@@ -53,6 +52,5 @@ export declare class ActivityContainerComponent<D, R, E> extends AbstractInterac
      */
     private synchroniseSelectedTabIndex;
     private getSelectedOutlet;
-    getSelectedTabIndex(): number;
     private triggerTabSynchronisation;
 }

package/lib/place/components/abstract-place-navigation.component.d.ts

@@ -1,7 +1,7 @@
 import { OnInit } from '@angular/core';
 import { Command, Constructable, DelegatingValueModel, ListModel, ListModelChain, ValueModel } from '@coolon/pectin';
-import { CommandFace } from '../../components/commands/command-face';
 import { DisposableComponent } from '../../components/disposable-component';
+import { NavItem } from '../nav-item';
 import { PlaceComponent } from '../place-component';
 import { PlaceDefinition } from '../place-definition';
 import { PlaceRouter } from '../place-router';
@@ -16,7 +16,7 @@ export declare class AbstractPlaceNavigationComponent extends DisposableComponen
     readonly _activePlaceComponent: DelegatingValueModel<PlaceComponent>;
     private activePlaceDefinition;
     constructor(placeRouter: PlaceRouter);
-    getNavigationFace(placeDef: PlaceDefinition): CommandFace;
+    getNav(placeDef: PlaceDefinition): NavItem;
     isActive(place: PlaceDefinition): boolean;
     ngOnInit(): void;
 }

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

@@ -1,6 +1,6 @@
 import { EventEmitter, OnInit } from '@angular/core';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
-import { BooleanValueModelChain, Constructable, ListModel, ValueModel, ValueModelChain } from '@coolon/pectin';
+import { Constructable, ListModel, ValueModel, ValueModelChain } from '@coolon/pectin';
 import { DisposableComponent } from '../../../components/disposable-component';
 import { PlaceComponent } from '../../place-component';
 import { PlaceConfig } from '../../place-config';
@@ -16,21 +16,16 @@ export declare class PlaceOutletComponent extends DisposableComponent implements
     customPlaceAnimationOrder: Constructable<PlaceComponent>[];
     readonly placeChanged: EventEmitter<PlaceComponent>;
     routerOut: RouterOutlet;
-    private onAnimationFinishedJob;
     private outletActivated;
     private readonly _activatedRouteModel;
     private readonly _activePlaceModel;
     private readonly _activePlaceDefinition;
     private parentOutletModel;
-    readonly activePlaceAnimationPosition: ValueModelChain<number>;
+    readonly placeAnimationOrder: ValueModelChain<number>;
     private initialPlaceIndex;
     private routerVisitModel;
     private _isPushingVisitToRoute;
     private navigationInProgress;
-    private isVeryFirstLoad;
-    private placesInAnimationOrder;
-    private animationSupported;
-    readonly animationEnabled: BooleanValueModelChain;
     constructor(router: Router, placeRouter: PlaceRouter, placeConfig: PlaceConfig, parentOutlet: PlaceOutletComponent);
     ngOnInit(): void;
     getAnimationOrder(): number;
@@ -40,7 +35,6 @@ export declare class PlaceOutletComponent extends DisposableComponent implements
     get activePlaceModel(): ValueModel<PlaceComponent>;
     get activatedRouteModel(): ValueModel<ActivatedRoute>;
     onOutletActivated(routerOutlet: RouterOutlet, place: PlaceComponent): void;
-    private validateAnimationState;
     onOutletDeactivated(): void;
     private checkStateAndInitialise;
     private initialisePlace;

package/lib/place/components/side-place-navigation/side-place-navigation.component.d.ts

@@ -40,7 +40,7 @@ import { AbstractPlaceNavigationComponent } from '../abstract-place-navigation.c
  * (at)Place({
  *   path: 'myPlace',
  *   data: {
- *     nav: I18n.places.myPlace.nav
+ *     nav: I18n.places.myPlace.nav()
  *   }
  * })
  */

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

@@ -10,7 +10,6 @@ export declare const ROUTE_PARAMETER_LIST_KEY: unique symbol;
 export declare class PlaceComponent extends DisposableComponent {
     private visitModel;
     private _inVisitUpdate;
-    private _active;
     interactionContext?: InteractionContext;
     canDeactivate?(interactionContext: InteractionContext): boolean | Promise<boolean>;
     constructor();
@@ -20,11 +19,6 @@ export declare class PlaceComponent extends DisposableComponent {
     private installBinding;
     get placeDefinition(): PlaceDefinition;
     get childPlaces(): Constructable<PlaceComponent>[];
-    get active(): import("@coolon/pectin").ValueModel<boolean>;
-    /**
-     * Called by the router when the place is ready to interact after any animations have run.
-     */
-    _notifyActive(active: boolean): void;
     onPlaceReady(): void;
 }
 export declare namespace PlaceComponent {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coolon/angular-ui-powerups",
-  "version": "2.0.0-alpha.38",
+  "version": "2.0.0-alpha.5",
   "schematics": "./schematics/collection.json",
   "dependencies": {
     "@coolon/typescript-utilities": "^2.0.0",
@@ -11,12 +11,12 @@
     "@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",
     "rxjs": "~6.5.5",
-    "reflect-metadata": "^0.1.13",
-    "zone.js": "~0.10.2"
+    "reflect-metadata": "^0.1.13"
   },
   "peerDependencies": {
     "@angular/common": "^9.1.9",
@@ -24,7 +24,7 @@
     "@angular/material": "^9.2.4",
     "@angular/animations": "^9.1.9",
     "@angular/cdk": "^9.2.4",
-    "@coolon/pectin": ">=3.0.0-alpha.27",
+    "@coolon/pectin": ">=2.9.0",
     "resize-observer-polyfill": "^1.5.1",
     "@fortawesome/angular-fontawesome": "^0.6.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",

package/assets/commands.scss

@@ -1,3 +0,0 @@
-:root {
-  --aup-command-face-icon-gap: 8px;
-}

package/assets/icons.scss

@@ -1,30 +0,0 @@
-:root {
-  --aup-icon-width: 24px;
-  --aup-fa-icon-width: 18px;
-}
-
-
-aup-icon {
-  // egregious hackery to get the font awesome icons positioning correctly
-  --fa-icon-offset: calc((var(--aup-icon-width) - var(--aup-fa-icon-width)) / 2);
-
-  position: relative;
-  fa-icon {
-    .svg-inline--fa {
-      position: absolute;
-      top: var(--fa-icon-offset);
-      left: var(--fa-icon-offset);
-      width: var(--aup-fa-icon-width) !important;
-      height: var(--aup-fa-icon-width) !important;
-    }
-  }
-}
-
-// egregious hackery to get the icon to display the same as a mat-icon inside a mat-menu
-.mat-menu-panel {
-  aup-icon {
-    .svg-inline--fa {
-      opacity: 0.54;
-    }
-  }
-}

package/esm2015/lib/components/commands/command/command.component.js

@@ -1,61 +0,0 @@
-import { __decorate, __metadata, __param } from "tslib";
-import { Component, Input, Optional } from '@angular/core';
-import { Command, Dsl, StoreInValueModel, TrackExternal, ValueModel } from '@coolon/pectin';
-import { DisposableComponent } from '../../disposable-component';
-import { CommandFace } from '../command-face';
-import { CommandGroup } from '../group/command-group';
-/**
- *
- */
-let CommandComponent = class CommandComponent extends DisposableComponent {
-    constructor(parent) {
-        super();
-        this.parent = parent;
-        this.CommandFace = CommandFace;
-        const { chain, switchOn } = Dsl.disposeWith(this);
-        this.activeFaceModel = switchOn(this.command.busy).toValue(when => {
-            when.equalTo(true, this.busyFaceModel);
-            when.otherwise(this.faceModel);
-        }).otherwise(this.faceModel);
-        this.buttonStyle = chain(this.activeFaceModel).map(f => CommandFace.getStyleOf(f));
-        this.colorModel = chain(this.activeFaceModel).map(f => CommandFace.getColorOf(f));
-        if (parent) {
-            this.registerDisposable(this.parent.registerCommand(this.command, this.activeFaceModel));
-        }
-    }
-    ngOnInit() {
-    }
-};
-CommandComponent.ctorParameters = () => [
-    { type: CommandGroup, decorators: [{ type: Optional }] }
-];
-__decorate([
-    Input(), TrackExternal(),
-    __metadata("design:type", Command)
-], CommandComponent.prototype, "command", void 0);
-__decorate([
-    Input(), TrackExternal(),
-    __metadata("design:type", ValueModel)
-], CommandComponent.prototype, "faceModel", void 0);
-__decorate([
-    Input(), StoreInValueModel('faceModel'),
-    __metadata("design:type", Object)
-], CommandComponent.prototype, "face", void 0);
-__decorate([
-    Input(), TrackExternal(),
-    __metadata("design:type", ValueModel)
-], CommandComponent.prototype, "busyFaceModel", void 0);
-__decorate([
-    Input(), StoreInValueModel('busyFaceModel'),
-    __metadata("design:type", Object)
-], CommandComponent.prototype, "busyFace", void 0);
-CommandComponent = __decorate([
-    Component({
-        selector: 'aup-command',
-        template: "<ng-container *ngIf=\"!parent\">\n  <ng-container [ngSwitch]=\"buttonStyle.value\">\n    <button *ngSwitchCase=\"CommandFace.Style.STROKED\" mat-stroked-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n    <button *ngSwitchCase=\"CommandFace.Style.RAISED\" mat-raised-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n    <button *ngSwitchDefault mat-button [pectinCommand]=\"command\" [color]=\"colorModel.value\">\n      <aup-command-face [face]=\"activeFaceModel.value\"></aup-command-face>\n    </button>\n  </ng-container>\n</ng-container>\n"
-    }),
-    __param(0, Optional()),
-    __metadata("design:paramtypes", [CommandGroup])
-], CommandComponent);
-export { CommandComponent };
-//# sourceMappingURL=command.component.js.map

package/esm2015/lib/components/commands/command/command.component.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"command.component.js","sourceRoot":"ng://@coolon/angular-ui-powerups/","sources":["lib/components/commands/command/command.component.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAU,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEnE,OAAO,EACL,OAAO,EACP,GAAG,EACH,iBAAiB,EACjB,aAAa,EAEb,UAAU,EAEX,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACjE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAEtD;;GAEG;AAMH,IAAa,gBAAgB,GAA7B,MAAa,gBAAiB,SAAQ,mBAAmB;IAuBvD,YAAiC,MAAqB;QACpD,KAAK,EAAE,CAAC;QADuB,WAAM,GAAN,MAAM,CAAe;QANtD,gBAAW,GAAG,WAAW,CAAC;QAQxB,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,GAAG,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;QAClD,IAAI,CAAC,eAAe,GAAG,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;YAChE,IAAI,CAAC,OAAO,CAAC,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;YACvC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QAChC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;QAC5B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QACnF,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;QAClF,IAAI,MAAM,EAAE;YACV,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;SAC1F;IACH,CAAC;IAGD,QAAQ;IACR,CAAC;CACF,CAAA;;YAjB2C,YAAY,uBAAzC,QAAQ;;AApBrB;IADC,KAAK,EAAE,EAAE,aAAa,EAAE;8BAChB,OAAO;iDAAU;AAG1B;IADC,KAAK,EAAE,EAAE,aAAa,EAAE;8BACd,UAAU;mDAAc;AAGnC;IADC,KAAK,EAAE,EAAE,iBAAiB,CAAC,WAAW,CAAC;;8CACtB;AAGlB;IADC,KAAK,EAAE,EAAE,aAAa,EAAE;8BACV,UAAU;uDAAc;AAGvC;IADC,KAAK,EAAE,EAAE,iBAAiB,CAAC,eAAe,CAAC;;kDACtB;AAfX,gBAAgB;IAL5B,SAAS,CAAC;QACT,QAAQ,EAAE,aAAa;QACvB,ywBAAuC;KAExC,CAAC;IAwBa,WAAA,QAAQ,EAAE,CAAA;qCAAmB,YAAY;GAvB3C,gBAAgB,CAwC5B;SAxCY,gBAAgB","sourcesContent":["import { Component, Input, OnInit, Optional } from '@angular/core';\n\nimport {\n  Command,\n  Dsl,\n  StoreInValueModel,\n  TrackExternal,\n  TransactionObserver,\n  ValueModel,\n  ValueModelChain\n} from '@coolon/pectin';\nimport { DisposableComponent } from '../../disposable-component';\nimport { CommandFace } from '../command-face';\nimport { CommandGroup } from '../group/command-group';\n\n/**\n *\n */\n@Component({\n  selector: 'aup-command',\n  templateUrl: './command.component.html',\n  styles: []\n})\nexport class CommandComponent extends DisposableComponent implements OnInit {\n\n  @Input() @TrackExternal()\n  command: Command<unknown>;\n\n  @Input() @TrackExternal()\n  faceModel: ValueModel<CommandFace>;\n\n  @Input() @StoreInValueModel('faceModel')\n  face: CommandFace;\n\n  @Input() @TrackExternal()\n  busyFaceModel: ValueModel<CommandFace>;\n\n  @Input() @StoreInValueModel('busyFaceModel')\n  busyFace: CommandFace;\n\n  CommandFace = CommandFace;\n\n  readonly activeFaceModel: ValueModelChain<CommandFace>;\n  readonly buttonStyle: ValueModelChain<string>;\n  readonly colorModel: ValueModelChain<'primary' | 'accent' | 'warn' | undefined>;\n\n  constructor(@Optional() readonly parent?: CommandGroup) {\n    super();\n    const { chain, switchOn } = Dsl.disposeWith(this);\n    this.activeFaceModel = switchOn(this.command.busy).toValue(when => {\n      when.equalTo(true, this.busyFaceModel);\n      when.otherwise(this.faceModel)\n    }).otherwise(this.faceModel)\n    this.buttonStyle = chain(this.activeFaceModel).map(f => CommandFace.getStyleOf(f));\n    this.colorModel = chain(this.activeFaceModel).map(f => CommandFace.getColorOf(f));\n    if (parent) {\n      this.registerDisposable(this.parent.registerCommand(this.command, this.activeFaceModel));\n    }\n  }\n\n\n  ngOnInit() {\n  }\n}\n\n"]}