@coolon/angular-ui-powerups 16.1.0-aplpha.34 → 16.1.0-aplpha.36

package/fesm2022/coolon-angular-ui-powerups.mjs

@@ -39,7 +39,7 @@ import { MatTableModule } from '@angular/material/table';
 import * as i4$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i1$3 from '@coolon/pectin';
-import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, proxify, ValueModel, Proxify, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, DelegatingListModel, MutableValueModel, DelegateToValueModel, FocusManager, EventListenerList, Guard, DelegatingFormListModel, Binding, DebugContext, DelegateToListModel, DelegatingFormValueModel, ListModel, Functions, PageController, SelectionModel, CanProxy, MultipleSelectionModel, AbstractComputedListModel, DirtyTrackingForm, ProxyRegistry, DelegatingCommand, PagedListModel, ComputedListModel, Deferred, ReducingValueModel, AndValueModel } from '@coolon/pectin';
+import { GarbageCollector, DelegatingValueModel, assert, UnaryCommand, lang, Dsl, Logger, proxify, ValueModel, Proxify, StoreInValueModel, Command, MutableListModel, StoreInListModel, Disposable, DelegatingListModel, MutableValueModel, DelegateToValueModel, FocusManager, EventListenerList, Guard, DelegatingFormListModel, Binding, DebugContext, DelegateToListModel, DelegatingFormValueModel, ListModel, Functions, PageController, SelectionModel, CanProxy, MultipleSelectionModel, WatchList, Trace, DirtyTrackingForm, ProxyRegistry, DelegatingCommand, PagedListModel, ComputedListModel, Deferred, ReducingValueModel, AndValueModel } from '@coolon/pectin';
 import { __decorate, __param, __metadata } from 'tslib';
 import * as i1 from '@angular/platform-browser';
 import escapeStringRegexp from 'escape-string-regexp';
@@ -52,6 +52,7 @@ import * as i5 from '@angular/material/core';
 import { produce } from 'immer';
 import ResizeObserver from 'resize-observer-polyfill';
 import { isFunction as isFunction$1, isNil as isNil$1, isEmpty as isEmpty$1, last, findLast } from 'lodash-es';
+import { generateKeyBetween } from 'fractional-indexing';
 import * as i5$1 from '@angular/cdk/a11y';
 import { A11yModule } from '@angular/cdk/a11y';
 import * as i7$1 from '@angular/flex-layout';
@@ -3484,47 +3485,106 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImpor
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; } });
 
-class ColumnListModel extends AbstractComputedListModel {
-    _allColumns$ = new MutableListModel();
-    columnsById$;
+class ColumnRef {
+    column;
+    position;
+    constructor(column, position) {
+        this.column = column;
+        this.position = position;
+    }
+}
+class ColumnListModel extends GarbageCollector {
+    _columnRefs$ = new MutableListModel();
+    orderedColumnRefs$;
+    _columnsById$;
+    allColumns$;
+    columnVisibilities$ = new WatchList();
+    visibleColumns$;
     constructor() {
         super();
         const { chain } = Dsl.disposeWith(this);
-        this.columnsById$ = chain(this._allColumns$).indexBy('columnId');
-    }
-    get allColumns$() {
-        return this._allColumns$.readonly$;
+        this.orderedColumnRefs$ = chain(this._columnRefs$).orderBy("position", "asc");
+        this.allColumns$ = this.orderedColumnRefs$.pluck("column");
+        this._columnsById$ = chain(this.allColumns$).indexBy('columnId');
+        this.visibleColumns$ = chain(this.allColumns$).select(it => it.visible$.value, {
+            dependsOn: this.columnVisibilities$
+        });
     }
+    // get allColumns$(): ListModel<ColumnModel<Row>> {
+    //   return this._allColumns$.readonly$;
+    // }
     getColumn(id) {
-        return this.columnsById$.get(id);
+        return this._columnsById$.get(id);
     }
     hasColumn(id) {
-        return !!this.columnsById$.get(id);
+        return !!this._columnsById$.get(id);
     }
     hasMatchingColumn(row, regex) {
         // only search the visible columns
-        return !!this.value.find(c => regex.test(c.getSearchTextFor(row)));
+        return !!this.visibleColumns$.value.find(c => regex.test(c.getSearchTextFor(row)));
     }
-    addColumn(column, index) {
+    addColumn(column, position) {
         if (this.hasColumn(column.columnId)) {
             lang.illegalState(`Column with id=${column.columnId} already exists`);
         }
         this.registerDisposable(column);
-        this.runInTransaction(() => {
-            if (!isNil(index)) {
-                this._allColumns$.insert(index, column);
-            }
-            else {
-                this._allColumns$.push(column);
+        this._columnRefs$.push(new ColumnRef(column, this.computePosition(position)));
+        this.columnVisibilities$.add(column.visible$);
+        return column;
+    }
+    computePosition(position) {
+        const q = this.orderedColumnRefs$.query();
+        return ColumnListModel.processPosition(position, {
+            before(col) {
+                const beforeIndex = q.findIndex(ref => ref.column === col);
+                const beforeCol = q.value[beforeIndex];
+                const afterCol = beforeIndex - 1 > 0 ? q.value[beforeIndex - 1] : undefined;
+                console.log({ afterCol, beforeCol });
+                return generateKeyBetween(afterCol?.position, beforeCol.position);
+            },
+            after(col) {
+                const afterIndex = q.findIndex(ref => ref.column === col);
+                const afterCol = q.value[afterIndex];
+                const beforeCol = afterIndex + 1 < q.length ? q.value[afterIndex + 1] : undefined;
+                console.log({ afterCol, beforeCol });
+                return generateKeyBetween(afterCol.position, beforeCol?.position);
+            },
+            first() {
+                return generateKeyBetween(null, q.first()?.position);
+            },
+            last() {
+                // add it to the end of the list
+                return generateKeyBetween(q.last()?.position, null);
             }
-            this.registerDisposable(this.trackSource(column.visible$));
         });
-        return column;
     }
     doComputeValue() {
-        return this._allColumns$.value.filter(c => c.visible$.value);
+        return this.allColumns$.value.filter(c => c.visible$.value);
     }
 }
+__decorate([
+    Trace(),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", String)
+], ColumnListModel.prototype, "computePosition", null);
+(function (ColumnListModel) {
+    function processPosition(position, callback) {
+        if (position) {
+            const keys = Object.keys(position);
+            if (keys.includes("before")) {
+                return position["before"] ? callback.before(position["before"]) : callback.first();
+            }
+            else {
+                return position["after"] ? callback.before(position["after"]) : callback.last();
+            }
+        }
+        else {
+            return callback.last();
+        }
+    }
+    ColumnListModel.processPosition = processPosition;
+})(ColumnListModel || (ColumnListModel = {}));
 
 const TEXT_SEARCH_FORMATTER_KEY = `aup:table:textSearchFormatter`;
 const Keys = Enum("useFunction", "useInstance", "useClass");
@@ -3883,15 +3943,15 @@ class AbstractTableModel extends GarbageCollector {
         });
         this._editorSessionByRowId = chain(this._editorSessions).indexBy("rowId");
         this.editing$ = chain(this._editorSessions).count().isGreaterThan(0);
-        this.textSearchPredicate$ = chain(this.visibleColumns).reduce(columns => {
+        this.textSearchPredicate$ = chain(this.visibleColumns$).reduce(columns => {
             return (row, regex) => {
                 return (!regex || !!columns.find(c => regex.test(c.getSearchTextFor(row))));
             };
         });
         this.firstEditableColumn$ = chain(this.columns).select(c => c.hasEditorPortal()).first();
-        this.firstVisibleColumn$ = chain(this._columnList).first();
-        this.lastVisibleColumn$ = chain(this._columnList).last();
-        this.rowSelectionDisabledOnAllColumns$ = chain(this._columnList).select(column => column.isRowSelectionEnabled()).count().equals(0);
+        this.firstVisibleColumn$ = chain(this.visibleColumns$).first();
+        this.lastVisibleColumn$ = chain(this.visibleColumns$).last();
+        this.rowSelectionDisabledOnAllColumns$ = chain(this._columnList.visibleColumns$).select(column => column.isRowSelectionEnabled()).count().equals(0);
         this.dataSourceEmpty$ = chain(this.dataSource$).isEmpty();
         this.selectedItems$ = this.selectionModelProxy.selectedItems$;
         this.leadSelection$ = this.selectionModelProxy.leadSelection$;
@@ -3971,8 +4031,8 @@ class AbstractTableModel extends GarbageCollector {
     get columns() {
         return this._columnList.allColumns$;
     }
-    get visibleColumns() {
-        return this._columnList.readonly$;
+    get visibleColumns$() {
+        return this._columnList.visibleColumns$;
     }
     pluck(property, options) {
         const columnId = options?.columnId || property.toString();
@@ -3992,7 +4052,7 @@ class AbstractTableModel extends GarbageCollector {
         this.selectionColumnModel = new SelectionColumnModel(columnId, () => this.getColumnTextProperties(columnId), this.selectionModelProxy);
         this.selectionColumnModel.useSelectionModel(selectionModel);
         this.addRowClass("aup-row-selected", row => this.selectionColumnModel.isSelected(row));
-        const selectionColumnModel = this.addColumn(this.selectionColumnModel, 0);
+        const selectionColumnModel = this.addColumn(this.selectionColumnModel, { before: null }); // first column
         if (!isNil$1(visible)) {
             selectionColumnModel.visibleWhile(visible instanceof ValueModel ? visible : ValueModel.constant(visible));
         }
@@ -4036,8 +4096,8 @@ class AbstractTableModel extends GarbageCollector {
         });
         return classNames;
     }
-    addColumn(column, index) {
-        return this._columnList.addColumn(column, index);
+    addColumn(column, position) {
+        return this._columnList.addColumn(column, position);
     }
     columnTextProperties(columnTextProperties) {
         this._columnTextPropertiesLookup = columnTextProperties;
@@ -11024,7 +11084,7 @@ class SidePlaceNavigationComponent extends AbstractPlaceNavigationComponent {
         this.expanded = !this.expanded;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SidePlaceNavigationComponent, deps: [{ token: PlaceRouter }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SidePlaceNavigationComponent, selector: "aup-side-place-navigation", inputs: { expanded$: "expanded$", expanded: "expanded" }, host: { properties: { "class.expanded": "this.expanded" } }, queries: [{ propertyName: "navEndTemplate", first: true, predicate: ["navEndTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\">\n    <aup-icon matListItemIcon [icon]=\"homeIcon$.value\"></aup-icon>\n    <span matListItemTitle class=\"expanded-only\">Menu</span>\n  </a>\n  <a *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     mat-list-item\n     [pectinCommand]=\"commandFactory.create(item.place, {disposedWith: gc})\"\n     [activated]=\"item.active\"\n     aup-gc #gc=\"aup-gc\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\"\n  >\n    <aup-icon matListItemIcon *ngIf=\"getNavigationFace(item.place).icon()\" [icon]=\"getNavigationFace(item.place).icon()\"></aup-icon>\n    <span matListItemTitle class=\"expanded-only\">{{getNavigationFace(item.place).text()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n", styles: [":host{display:flex;flex-direction:column;--resolved-nav-item-width: var(--nav-width, 56px);--resolved-expanded-width: var(--nav-expanded-width, 235px);--resolved-color: var(--nav-color, rgba(255, 255, 255, .9));--resolved-background-color: var(--nav-background-color, #555);color:var(--resolved-color);background-color:var(--resolved-background-color);width:var(--resolved-nav-item-width);transition:width 125ms linear}:host.expanded{width:var(--resolved-expanded-width);max-width:var(--resolved-expanded-width)}:host aup-icon{margin-right:12px}:host>mat-nav-list{flex:1;display:flex;flex-direction:column;padding:0}:host .mat-mdc-list-item,:host .mat-mdc-list-item-icon,:host .mat-mdc-list-item-icon.activated,:host .mdc-list-item__primary-text{color:var(--resolved-color)}:host .mdc-list-item--activated .mdc-list-item__primary-text,:host .mdc-list-item--activated .mat-mdc-list-item-icon{color:var(--resolved-color)}:host .mdc-list-item--activated{background-color:#444}:host *.flip-horizontal{transform:scaleX(-1)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$3.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i3$3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3$3.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i3$3.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { kind: "directive", type: GarbageCollectorDirective, selector: "[aup-gc]", exportAs: ["aup-gc"] }, { kind: "component", type: IconComponent, selector: "aup-icon", inputs: ["icon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.9", type: SidePlaceNavigationComponent, selector: "aup-side-place-navigation", inputs: { expanded$: "expanded$", expanded: "expanded" }, host: { properties: { "class.expanded": "this.expanded" } }, queries: [{ propertyName: "navEndTemplate", first: true, predicate: ["navEndTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\">\n    <aup-icon matListItemIcon [icon]=\"homeIcon$.value\"></aup-icon>\n    <span matListItemTitle class=\"expanded-only\">Menu</span>\n  </a>\n  <a *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     mat-list-item\n     [pectinCommand]=\"commandFactory.create(item.place, {disposedWith: gc})\"\n     [activated]=\"item.active\"\n     aup-gc #gc=\"aup-gc\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\"\n  >\n    <aup-icon matListItemIcon *ngIf=\"getNavigationFace(item.place).icon()\" [icon]=\"getNavigationFace(item.place).icon()\"></aup-icon>\n    <span matListItemTitle class=\"expanded-only\">{{getNavigationFace(item.place).text()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n", styles: [":host{display:flex;flex-direction:column;--resolved-nav-item-width: var(--nav-width, 56px);--resolved-expanded-width: var(--nav-expanded-width, 235px);--resolved-color: var(--nav-color, rgba(255, 255, 255, .9));--resolved-background-color: var(--nav-background-color, #555);color:var(--resolved-color);background-color:var(--resolved-background-color);width:var(--resolved-nav-item-width);transition:width 125ms linear}:host.expanded{width:var(--resolved-expanded-width);max-width:var(--resolved-expanded-width)}:host aup-icon{margin-right:12px}:host>mat-nav-list{flex:1;display:flex;flex-direction:column;padding:0}:host .mat-mdc-list-item,:host .mat-mdc-list-item-icon,:host .mat-mdc-list-item-icon.activated,:host .mdc-list-item--with-leading-icon:hover .mdc-list-item__start,:host .mdc-list-item__primary-text{color:var(--resolved-color)}:host .mdc-list-item--activated .mdc-list-item__primary-text,:host .mdc-list-item--activated .mat-mdc-list-item-icon{color:var(--resolved-color)}:host .mdc-list-item:hover{background-color:#444;color:var(--resolved-color)}:host .mdc-list-item--activated{background-color:#444}:host *.flip-horizontal{transform:scaleX(-1)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3$3.MatNavList, selector: "mat-nav-list", exportAs: ["matNavList"] }, { kind: "component", type: i3$3.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "directive", type: i3$3.MatListItemIcon, selector: "[matListItemIcon]" }, { kind: "directive", type: i3$3.MatListItemTitle, selector: "[matListItemTitle]" }, { kind: "directive", type: i4$1.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "directive", type: CommandDirective, selector: "[pectinCommand]", inputs: ["pectinCommand", "commandParameter"] }, { kind: "directive", type: GarbageCollectorDirective, selector: "[aup-gc]", exportAs: ["aup-gc"] }, { kind: "component", type: IconComponent, selector: "aup-icon", inputs: ["icon"] }] });
 }
 __decorate([
     Proxify(),
@@ -11036,7 +11096,7 @@ __decorate([
 ], SidePlaceNavigationComponent.prototype, "expanded", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.9", ngImport: i0, type: SidePlaceNavigationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'aup-side-place-navigation', template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\">\n    <aup-icon matListItemIcon [icon]=\"homeIcon$.value\"></aup-icon>\n    <span matListItemTitle class=\"expanded-only\">Menu</span>\n  </a>\n  <a *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     mat-list-item\n     [pectinCommand]=\"commandFactory.create(item.place, {disposedWith: gc})\"\n     [activated]=\"item.active\"\n     aup-gc #gc=\"aup-gc\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\"\n  >\n    <aup-icon matListItemIcon *ngIf=\"getNavigationFace(item.place).icon()\" [icon]=\"getNavigationFace(item.place).icon()\"></aup-icon>\n    <span matListItemTitle class=\"expanded-only\">{{getNavigationFace(item.place).text()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n", styles: [":host{display:flex;flex-direction:column;--resolved-nav-item-width: var(--nav-width, 56px);--resolved-expanded-width: var(--nav-expanded-width, 235px);--resolved-color: var(--nav-color, rgba(255, 255, 255, .9));--resolved-background-color: var(--nav-background-color, #555);color:var(--resolved-color);background-color:var(--resolved-background-color);width:var(--resolved-nav-item-width);transition:width 125ms linear}:host.expanded{width:var(--resolved-expanded-width);max-width:var(--resolved-expanded-width)}:host aup-icon{margin-right:12px}:host>mat-nav-list{flex:1;display:flex;flex-direction:column;padding:0}:host .mat-mdc-list-item,:host .mat-mdc-list-item-icon,:host .mat-mdc-list-item-icon.activated,:host .mdc-list-item__primary-text{color:var(--resolved-color)}:host .mdc-list-item--activated .mdc-list-item__primary-text,:host .mdc-list-item--activated .mat-mdc-list-item-icon{color:var(--resolved-color)}:host .mdc-list-item--activated{background-color:#444}:host *.flip-horizontal{transform:scaleX(-1)}\n"] }]
+            args: [{ selector: 'aup-side-place-navigation', template: "<mat-nav-list>\n  <a mat-list-item (click)=\"toggleMenu()\">\n    <aup-icon matListItemIcon [icon]=\"homeIcon$.value\"></aup-icon>\n    <span matListItemTitle class=\"expanded-only\">Menu</span>\n  </a>\n  <a *ngFor=\"let item of menuItems.value; trackBy: trackByPlaceDef\"\n     mat-list-item\n     [pectinCommand]=\"commandFactory.create(item.place, {disposedWith: gc})\"\n     [activated]=\"item.active\"\n     aup-gc #gc=\"aup-gc\"\n     [matTooltip]=\"getNavigationFace(item.place).tooltip()\"\n  >\n    <aup-icon matListItemIcon *ngIf=\"getNavigationFace(item.place).icon()\" [icon]=\"getNavigationFace(item.place).icon()\"></aup-icon>\n    <span matListItemTitle class=\"expanded-only\">{{getNavigationFace(item.place).text()}}</span>\n  </a>\n  <span [style.flex]=\"1\"></span>\n  <ng-container *ngIf=\"navEndTemplate\" [ngTemplateOutlet]=\"navEndTemplate\"></ng-container>\n</mat-nav-list>\n", styles: [":host{display:flex;flex-direction:column;--resolved-nav-item-width: var(--nav-width, 56px);--resolved-expanded-width: var(--nav-expanded-width, 235px);--resolved-color: var(--nav-color, rgba(255, 255, 255, .9));--resolved-background-color: var(--nav-background-color, #555);color:var(--resolved-color);background-color:var(--resolved-background-color);width:var(--resolved-nav-item-width);transition:width 125ms linear}:host.expanded{width:var(--resolved-expanded-width);max-width:var(--resolved-expanded-width)}:host aup-icon{margin-right:12px}:host>mat-nav-list{flex:1;display:flex;flex-direction:column;padding:0}:host .mat-mdc-list-item,:host .mat-mdc-list-item-icon,:host .mat-mdc-list-item-icon.activated,:host .mdc-list-item--with-leading-icon:hover .mdc-list-item__start,:host .mdc-list-item__primary-text{color:var(--resolved-color)}:host .mdc-list-item--activated .mdc-list-item__primary-text,:host .mdc-list-item--activated .mat-mdc-list-item-icon{color:var(--resolved-color)}:host .mdc-list-item:hover{background-color:#444;color:var(--resolved-color)}:host .mdc-list-item--activated{background-color:#444}:host *.flip-horizontal{transform:scaleX(-1)}\n"] }]
         }], ctorParameters: function () { return [{ type: PlaceRouter }]; }, propDecorators: { expanded$: [{
                 type: Input
             }], expanded: [{