@ng-atomic/components 19.0.0-preview.8 → 19.1.1

package/fesm2022/ng-atomic-components-templates-_index.mjs

@@ -1,7 +1,7 @@
 import { __decorate, __metadata } from 'tslib';
 import * as i0 from '@angular/core';
-import { inject, PLATFORM_ID, input, Directive, viewChild, ChangeDetectionStrategy, Component } from '@angular/core';
-import { isPlatformServer, NgTemplateOutlet } from '@angular/common';
+import { inject, PLATFORM_ID, input, Directive, viewChild, viewChildren, ChangeDetectionStrategy, Component } from '@angular/core';
+import { isPlatformServer, NgTemplateOutlet, JsonPipe } from '@angular/common';
 import { AutoLayoutFrame } from '@ng-atomic/components/frames/auto-layout';
 import { ScrollFrame } from '@ng-atomic/components/frames/scroll';
 import { HeaderMoleculeStore } from '@ng-atomic/components/molecules/header';
@@ -26,12 +26,15 @@ import { TextInputFieldMolecule } from '@ng-atomic/components/molecules/text-inp
 import { VerticalHideFrame } from '@ng-atomic/components/frames/vertical-hide';
 
 var IndexTemplateStore_1;
+// Virtual scroll item size constant
+const ITEM_SIZE = 52;
 var ActionId;
 (function (ActionId) {
     ActionId["BACK"] = "[@ng-atomic/components/templates/index] Back";
     ActionId["TABLE_HEADER_CLICK"] = "[@ng-atomic/components/templates/index] Table Header Click";
     ActionId["TABLE_HEADER_CHECKBOX_CLICK"] = "[@ng-atomic/components/templates/index] Table Header Checkbox Click";
     ActionId["TABLE_CHECKBOX_CLICK"] = "[@ng-atomic/components/templates/index] Table Checkbox Click";
+    ActionId["TABLE_COLUMN_WIDTH_CHANGE"] = "[@ng-atomic/components/templates/index] Table Column Width Change";
     ActionId["ITEM_CLICK"] = "[@ng-atomic/components/templates/index] Item Click";
     ActionId["DETAIL"] = "[@ng-atomic/components/templates/index] Detail";
     ActionId["LIST_ITEM_BUTTON_CLICKED"] = "[@ng-atomic/components/templates/index] List Item Button Clicked";
@@ -47,10 +50,10 @@ function getType(context) {
         default: return 'table';
     }
 }
-function convertToItemsMap(items) {
+function convertToItemsMap(items, { mapper = (items) => items, } = {}) {
     return {
         'default': {
-            items: items,
+            items: mapper(items),
             itemsLength: items?.length,
         }
     };
@@ -85,6 +88,7 @@ let IndexTemplateStore = class IndexTemplateStore extends InjectableComponent {
         this.selection = input(_computed(() => this.config().selection));
         this.highlight = input(_computed(() => this.config().highlight));
         this.queryLabel = input(_computed(() => this.config().queryLabel));
+        this.getRowClass = input(_computed(() => this.config().getRowClass));
         this.navMode = input(_computed(() => 'expanded'));
         this.form$ = toObservable(computeFake(this.form));
         this.formValue = computedRawValue(() => call(this.form()));
@@ -126,7 +130,7 @@ let IndexTemplateStore = class IndexTemplateStore extends InjectableComponent {
             gridToolbarActions: [],
             tableChildrenKey: null,
             tableIsHidden: (item) => false,
-            tableTreeControl: new FlatTreeControl(n => n.level, n => n.isExpandable),
+            tableTreeControl: new FlatTreeControl(n => n.level, n => n.isExpandable, { trackBy: (n) => n?.id ?? n }),
             itemActions: (item) => [{ id: ActionId.DETAIL, icon: 'open_in_new', payload: item }],
             items: [],
             itemsLength: 0,
@@ -143,6 +147,7 @@ let IndexTemplateStore = class IndexTemplateStore extends InjectableComponent {
             selection: new SelectionModel(true, []),
             highlight: new SelectionModel(true, []),
             queryLabel: 'フィルター',
+            getRowClass: (item) => '',
         });
     }, ['components', 'templates', 'index']); }
     static provideTypeConfig() {
@@ -153,8 +158,8 @@ let IndexTemplateStore = class IndexTemplateStore extends InjectableComponent {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IndexTemplateStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: IndexTemplateStore, isStandalone: true, selector: "templates-index", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, gridToolbarActions: { classPropertyName: "gridToolbarActions", publicName: "gridToolbarActions", isSignal: true, isRequired: false, transformFunction: null }, toggleActions: { classPropertyName: "toggleActions", publicName: "toggleActions", isSignal: true, isRequired: false, transformFunction: null }, tableChildrenKey: { classPropertyName: "tableChildrenKey", publicName: "tableChildrenKey", isSignal: true, isRequired: false, transformFunction: null }, tableIsHidden: { classPropertyName: "tableIsHidden", publicName: "tableIsHidden", isSignal: true, isRequired: false, transformFunction: null }, tableTreeControl: { classPropertyName: "tableTreeControl", publicName: "tableTreeControl", isSignal: true, isRequired: false, transformFunction: null }, tableColumnFormFieldMap: { classPropertyName: "tableColumnFormFieldMap", publicName: "tableColumnFormFieldMap", isSignal: true, isRequired: false, transformFunction: null }, itemActions: { classPropertyName: "itemActions", publicName: "itemActions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleControl: { classPropertyName: "titleControl", publicName: "titleControl", isSignal: true, isRequired: false, transformFunction: null }, titleEditable: { classPropertyName: "titleEditable", publicName: "titleEditable", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, itemsMap: { classPropertyName: "itemsMap", publicName: "itemsMap", isSignal: true, isRequired: false, transformFunction: null }, itemsMapKeys: { classPropertyName: "itemsMapKeys", publicName: "itemsMapKeys", isSignal: true, isRequired: false, transformFunction: null }, itemsLength: { classPropertyName: "itemsLength", publicName: "itemsLength", isSignal: true, isRequired: false, transformFunction: null }, navStartActions: { classPropertyName: "navStartActions", publicName: "navStartActions", isSignal: true, isRequired: false, transformFunction: null }, navEndActions: { classPropertyName: "navEndActions", publicName: "navEndActions", isSignal: true, isRequired: false, transformFunction: null }, groupedBy: { classPropertyName: "groupedBy", publicName: "groupedBy", isSignal: true, isRequired: false, transformFunction: null }, groupKeys: { classPropertyName: "groupKeys", publicName: "groupKeys", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null }, queryLabel: { classPropertyName: "queryLabel", publicName: "queryLabel", isSignal: true, isRequired: false, transformFunction: null }, navMode: { classPropertyName: "navMode", publicName: "navMode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: IndexTemplateStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.5", type: IndexTemplateStore, isStandalone: true, selector: "templates-index", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, gridToolbarActions: { classPropertyName: "gridToolbarActions", publicName: "gridToolbarActions", isSignal: true, isRequired: false, transformFunction: null }, toggleActions: { classPropertyName: "toggleActions", publicName: "toggleActions", isSignal: true, isRequired: false, transformFunction: null }, tableChildrenKey: { classPropertyName: "tableChildrenKey", publicName: "tableChildrenKey", isSignal: true, isRequired: false, transformFunction: null }, tableIsHidden: { classPropertyName: "tableIsHidden", publicName: "tableIsHidden", isSignal: true, isRequired: false, transformFunction: null }, tableTreeControl: { classPropertyName: "tableTreeControl", publicName: "tableTreeControl", isSignal: true, isRequired: false, transformFunction: null }, tableColumnFormFieldMap: { classPropertyName: "tableColumnFormFieldMap", publicName: "tableColumnFormFieldMap", isSignal: true, isRequired: false, transformFunction: null }, itemActions: { classPropertyName: "itemActions", publicName: "itemActions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleControl: { classPropertyName: "titleControl", publicName: "titleControl", isSignal: true, isRequired: false, transformFunction: null }, titleEditable: { classPropertyName: "titleEditable", publicName: "titleEditable", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, itemsMap: { classPropertyName: "itemsMap", publicName: "itemsMap", isSignal: true, isRequired: false, transformFunction: null }, itemsMapKeys: { classPropertyName: "itemsMapKeys", publicName: "itemsMapKeys", isSignal: true, isRequired: false, transformFunction: null }, itemsLength: { classPropertyName: "itemsLength", publicName: "itemsLength", isSignal: true, isRequired: false, transformFunction: null }, navStartActions: { classPropertyName: "navStartActions", publicName: "navStartActions", isSignal: true, isRequired: false, transformFunction: null }, navEndActions: { classPropertyName: "navEndActions", publicName: "navEndActions", isSignal: true, isRequired: false, transformFunction: null }, groupedBy: { classPropertyName: "groupedBy", publicName: "groupedBy", isSignal: true, isRequired: false, transformFunction: null }, groupKeys: { classPropertyName: "groupKeys", publicName: "groupKeys", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, selection: { classPropertyName: "selection", publicName: "selection", isSignal: true, isRequired: false, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: true, isRequired: false, transformFunction: null }, queryLabel: { classPropertyName: "queryLabel", publicName: "queryLabel", isSignal: true, isRequired: false, transformFunction: null }, getRowClass: { classPropertyName: "getRowClass", publicName: "getRowClass", isSignal: true, isRequired: false, transformFunction: null }, navMode: { classPropertyName: "navMode", publicName: "navMode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             IndexPipe,
             IndexLengthPipe,
         ], usesInheritance: true, ngImport: i0 }); }
@@ -162,7 +167,7 @@ let IndexTemplateStore = class IndexTemplateStore extends InjectableComponent {
 IndexTemplateStore = IndexTemplateStore_1 = __decorate([
     TokenizedType()
 ], IndexTemplateStore);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IndexTemplateStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: IndexTemplateStore, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -179,8 +184,43 @@ class IndexTemplate extends NgAtomicComponent {
         this.ActionId = ActionId;
         this.store = inject(IndexTemplateStore);
         this.dividerFrame = viewChild(DividerFrame);
+        this.tables = viewChildren(TableOrganismStore);
     }
     static { this.ActionId = ActionId; }
+    onSelectedTabIndexChange(i) {
+        // タブ切り替え時にテーブルの仮想スクロールを完全にリセット
+        setTimeout(() => {
+            const tableStore = this.tables().at(i);
+            if (!tableStore)
+                return;
+            const table = tableStore.injected;
+            if (!table)
+                return;
+            // データソースを一時的に切断して再接続（ツリー展開と同じ効果）
+            const currentDataSource = table.dataSource.dataSource();
+            if (currentDataSource) {
+                // 一度nullにしてから再設定することで完全なリセット
+                table.dataSource.reconnect(null);
+                requestAnimationFrame(() => {
+                    // データソースを再接続
+                    table.dataSource.reconnect(currentDataSource);
+                    // viewportのリセット
+                    const viewport = table.viewport();
+                    if (viewport) {
+                        // viewportを再設定
+                        table.dataSource.viewport.set(null);
+                        requestAnimationFrame(() => {
+                            table.dataSource.viewport.set(viewport);
+                            // サイズの再計算
+                            viewport.checkViewportSize();
+                            // スクロール位置をリセット
+                            viewport.scrollToIndex(0);
+                        });
+                    }
+                });
+            }
+        }, 50); // タブアニメーションの完了を待つ
+    }
     onTableHeaderClick(column) {
         this.dispatch({ id: ActionId.TABLE_HEADER_CLICK, payload: column });
     }
@@ -196,13 +236,23 @@ class IndexTemplate extends NgAtomicComponent {
     onHeaderCheckboxClick() {
         this.dispatch({ id: ActionId.TABLE_HEADER_CHECKBOX_CLICK });
     }
+    onColumnWidthChange(action) {
+        this.dispatch({
+            id: ActionId.TABLE_COLUMN_WIDTH_CHANGE,
+            payload: {
+                key: action.meta.componentId,
+                columnName: action.payload.columnName,
+                width: action.payload.width
+            },
+        });
+    }
     back() {
         this.dispatch({ id: ActionId.BACK });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: IndexTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: IndexTemplate, isStandalone: true, selector: "templates-index", host: { classAttribute: "template" }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: IndexTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: IndexTemplate, isStandalone: true, selector: "templates-index", host: { classAttribute: "template" }, providers: [
             QueryResolverService,
-        ], viewQueries: [{ propertyName: "dividerFrame", first: true, predicate: DividerFrame, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: IndexTemplateStore, inputs: ["gridToolbarActions", "gridToolbarActions", "tableChildrenKey", "tableChildrenKey", "tableIsHidden", "tableIsHidden", "tableTreeControl", "tableTreeControl", "tableColumnFormFieldMap", "tableColumnFormFieldMap", "form", "form", "title", "title", "titleControl", "titleControl", "titleEditable", "titleEditable", "description", "description", "items", "items", "itemsMap", "itemsMap", "itemsLength", "itemsLength", "itemActions", "itemActions", "navStartActions", "navStartActions", "navEndActions", "navEndActions", "navMode", "navMode", "groupedBy", "groupedBy", "groupKeys", "groupKeys", "selection", "selection", "pageSizeOptions", "pageSizeOptions", "type", "type", "highlight", "highlight", "queryLabel", "queryLabel"] }], ngImport: i0, template: `
+        ], viewQueries: [{ propertyName: "dividerFrame", first: true, predicate: DividerFrame, descendants: true, isSignal: true }, { propertyName: "tables", predicate: TableOrganismStore, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: IndexTemplateStore, inputs: ["gridToolbarActions", "gridToolbarActions", "tableChildrenKey", "tableChildrenKey", "tableIsHidden", "tableIsHidden", "tableTreeControl", "tableTreeControl", "tableColumnFormFieldMap", "tableColumnFormFieldMap", "form", "form", "title", "title", "titleControl", "titleControl", "titleEditable", "titleEditable", "description", "description", "items", "items", "itemsMap", "itemsMap", "itemsLength", "itemsLength", "itemActions", "itemActions", "navStartActions", "navStartActions", "navEndActions", "navEndActions", "navMode", "navMode", "groupedBy", "groupedBy", "groupKeys", "groupKeys", "selection", "selection", "pageSizeOptions", "pageSizeOptions", "type", "type", "highlight", "highlight", "queryLabel", "queryLabel", "getRowClass", "getRowClass"] }], ngImport: i0, template: `
   <frames-scroll>
   <frames-vertical-hide [mode]="store.navMode()" top>
       <organisms-navigator
@@ -247,84 +297,102 @@ class IndexTemplate extends NgAtomicComponent {
             }
             @if (store.itemsMapKeys().length > 1) {
               @defer {
-                <frames-tabs [labels]="store.itemsMapKeys()">
+                <frames-tabs
+                  [labels]="store.itemsMapKeys()"
+                  (selectedTabIndexChange)="onSelectedTabIndexChange($event)"
+                >
+                  @let map = store.itemsMap();
                   @for (key of store.itemsMapKeys(); track key;) {
                     <ng-template #tab>
-                      <ng-container *ngTemplateOutlet="items; context: {map: store.itemsMap()[key]}"/>
+                      <ng-container *ngTemplateOutlet="items; context: {map, key}"/>
                     </ng-template>
                   }
                 </frames-tabs>
               }
             } @else if(store.itemsMapKeys().length === 1) {
-              <ng-container *ngTemplateOutlet="items; context: {map: store.itemsMap()[store.itemsMapKeys()[0]]}"/>
-            } @else {
-
-            }
-
+              @let key = store.itemsMapKeys()[0];
+              @let map = store.itemsMap();
+              <ng-container *ngTemplateOutlet="items; context: {map, key}"/>
+            } @else { }
           </div>
         </frames-divider>
       }
     </frames-auto-layout>
   </frames-scroll>
 
-  <ng-template #items let-map="map">
-    <!-- <div>
-      json: {{ map | json }}
-    </div> -->
-    @switch(map?.type ?? store.type()) {
+  <ng-template #items let-map="map" let-key="key">
+    @let data = map[key];
+    @let type = data?.type ?? store.type();
+    @let items = data?.items ?? [];
+    @let itemActions = data?.itemActions ?? store.itemActions();
+    @let childrenKey = data?.childrenKey ?? store.tableChildrenKey();
+    @let highlight = data?.highlight ?? store.highlight();
+    @let groupBy = data?.groupedBy ?? store.groupedBy();
+    @let groupKeys = data?.groupKeys ?? store.groupKeys();
+    @let selection = data?.selection ?? store.selection();
+    @let tableTreeControl = data?.treeControl ?? store.tableTreeControl();
+    @let pageSizeOptions = data?.pageSizeOptions ?? store.pageSizeOptions();
+    @let isHidden = data?.tableIsHidden ?? store.tableIsHidden();
+    @let form = data?.form ?? store.form();
+    @let pageForm = data?.form?.get(['page']) ?? store.form().get(['page']);
+    @let itemLength = store.itemsLength();
+    @let tableFormFieldMap = store.tableColumnFormFieldMap();
+    @switch(type) {
+      @case('json') {
+        <pre>{{ items | json }}</pre>
+      }
       @case('list') {
-        @if (map.childrenKey) {
+        @if (data.childrenKey) {
           <organisms-tree-list
-            [items]="map?.items ?? []"
-            [childrenKey]="map?.childrenKey ?? store.childrenKey()"
-            [treeControl]="map?.treeControl ?? store.tableTreeControl()"
+            [items]="items"
+            [childrenKey]="childrenKey"
+            [treeControl]="tableTreeControl"
             (action)="dispatch($event)"
           />
         } @else {
           <organisms-list
-            [items]="map?.items ?? []"
-            [itemActions]="map?.itemActions ?? store.itemActions()"
-            [groupedBy]="map?.groupedBy ?? store.groupedBy()"
-            [groupKeys]="map?.groupKeys ?? store.groupKeys()"
+            [items]="items"
+            [itemActions]="itemActions"
+            [groupedBy]="groupBy"
+            [groupKeys]="groupKeys"
             (action)="dispatch($event)"
           />
         }
       }
-      @case ('grid') {
-        @defer {
+      @case ('grid') { @defer {
           <organisms-grid-cards-section
-            [items]="map?.items ?? []"
+            [items]="items"
             (action)="dispatch($event)"
             contents
           />
-        }
-      }
+      } }
       @default {
         <organisms-table injectable
-          [columnFormFieldMap]="store.tableColumnFormFieldMap()"
-          [items]="map?.items ?? []"
-          [itemActions]="map?.itemActions ?? store.itemActions()"
-          [selection]="map?.selection ?? store.selection()"
-          [form]="map?.form ?? store.form()"
-          [childrenKey]="map?.childrenKey ?? store.tableChildrenKey()"
-          [highlight]="map?.highlight ?? store.highlight()"
-          [isHidden]="map?.tableIsHidden ?? store.tableIsHidden()"
-          [treeControl]="map?.treeControl ?? store.tableTreeControl()"
-          (action)="dispatch($event)"
+          [columnFormFieldMap]="tableFormFieldMap"
+          [items]="items"
+          [itemActions]="itemActions"
+          [selection]="selection"
+          [form]="form"
+          [childrenKey]="childrenKey"
+          [highlight]="highlight"
+          [isHidden]="isHidden"
+          [treeControl]="tableTreeControl"
+          [getRowClass]="store.getRowClass()"
+          (action)="dispatch($event, undefined, key)"
         />
-        @if (map?.form?.get(['page']) ?? store.form().get(['page'])) {
-          @defer {
-            <organisms-paginator injectable
-              [form]="map?.form?.get(['page']) ?? store.form().get(['page'])"
-              [itemLength]="store.itemsLength()"
-              [pageSizeOptions]="map?.pageSizeOptions ?? store.pageSizeOptions()"
-            />
-          }
-        }
+        @if (pageForm) { @defer {
+          <organisms-paginator injectable
+            [form]="pageForm"
+            [itemLength]="itemLength"
+            [pageSizeOptions]="pageSizeOptions"
+          />
+        } }
       }
     }
   </ng-template>
-  `, isInline: true, styles: [":host{width:100%;height:100%;background:#fff;display:block;--navigator-height: 56px;--navigator-height-SCOPED-IN-index-ihUu: var(--navigator-height);--primary-color: #404040;--primary-color-SCOPED-IN-index-ihUu: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-index-ihUu: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-index-ihUu: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-index-ihUu: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-index-ihUu: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-index-ihUu: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-index-ihUu: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-index-ihUu);--navigator-background-color-SCOPED-IN-index-ihUu: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-index-ihUu);--navigator-on-background-color-SCOPED-IN-index-ihUu: var(--navigator-on-background-color);--table-background-color: var(--background-color-SCOPED-IN-index-ihUu);--table-background-color-SCOPED-IN-index-ihUu: var(--table-background-color);--table-on-background-color: var(--on-background-color-SCOPED-IN-index-ihUu);--table-on-background-color-SCOPED-IN-index-ihUu: var(--table-on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-index-ihUu: var(--first-content-height);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-index-ihUu: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-index-ihUu: var(--max-first-content-height)}:host{background-color:var(--background-color-SCOPED-IN-index-ihUu);color:var(--on-background-color-SCOPED-IN-index-ihUu);transition:background-color .5s ease-in-out}:host frames-auto-layout{--gap: 0;--vertical-padding: 0}:host frames-divider{--first-content-height: var(--first-content-height-SCOPED-IN-index-ihUu);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-index-ihUu)}:host organisms-table{--background-color: var(--table-background-color-SCOPED-IN-index-ihUu);--on-background-color: var(--table-on-background-color-SCOPED-IN-index-ihUu)}:host *{--primary-color: var(--primary-color-SCOPED-IN-index-ihUu);--on-primary-color: var(--on-primary-color-SCOPED-IN-index-ihUu);--surface-color: var(--surface-color-SCOPED-IN-index-ihUu);--on-surface-color: var(--on-surface-color-SCOPED-IN-index-ihUu);--background-color: var(--background-color-SCOPED-IN-index-ihUu);--on-background-color: var(--on-background-color-SCOPED-IN-index-ihUu)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-index-ihUu);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-index-ihUu)}\n"], dependencies: [{ kind: "component", type: AutoLayoutFrame, selector: "frames-auto-layout" }, { kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "component", type: ListOrganism, selector: "organisms-list" }, { kind: "directive", type: TableOrganismStore, selector: "organisms-table", inputs: ["draggable", "form", "columnFormFieldMap", "itemActions", "selection", "highlight", "childrenKey", "items", "treeControl", "isHidden"] }, { kind: "component", type: TreeListOrganism, selector: "organisms-tree-list" }, { kind: "directive", type: NavigatorOrganismStore, selector: "organisms-navigator", inputs: ["startActions", "endActions", "title"] }, { kind: "directive", type: HeaderMoleculeStore, selector: "molecules-header", inputs: ["title", "description"] }, { kind: "component", type: TextInputFieldMolecule, selector: "molecules-text-input-field" }, { kind: "component", type: VerticalHideFrame, selector: "frames-vertical-hide", inputs: ["mode"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('@ng-atomic/components/organisms/chips-input-section').then(m => m.ChipsInputSectionOrganism), DividerFrame,
+  `, isInline: true, styles: [":host{width:100%;height:100%;background:#fff;display:block;--navigator-height: 56px;--navigator-height-SCOPED-IN-index-tafV: var(--navigator-height);--primary-color: #404040;--primary-color-SCOPED-IN-index-tafV: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-index-tafV: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-index-tafV: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-index-tafV: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-index-tafV: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-index-tafV: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-index-tafV: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-index-tafV);--navigator-background-color-SCOPED-IN-index-tafV: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-index-tafV);--navigator-on-background-color-SCOPED-IN-index-tafV: var(--navigator-on-background-color);--table-background-color: var(--background-color-SCOPED-IN-index-tafV);--table-background-color-SCOPED-IN-index-tafV: var(--table-background-color);--table-on-background-color: var(--on-background-color-SCOPED-IN-index-tafV);--table-on-background-color-SCOPED-IN-index-tafV: var(--table-on-background-color);--table-surface-color: var(--surface-color-SCOPED-IN-index-tafV);--table-surface-color-SCOPED-IN-index-tafV: var(--table-surface-color);--table-on-surface-color: var(--on-surface-color-SCOPED-IN-index-tafV);--table-on-surface-color-SCOPED-IN-index-tafV: var(--table-on-surface-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-index-tafV: var(--first-content-height);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-index-tafV: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-index-tafV: var(--max-first-content-height)}:host{background-color:var(--background-color-SCOPED-IN-index-tafV);color:var(--on-background-color-SCOPED-IN-index-tafV);transition:background-color .5s ease-in-out}:host frames-auto-layout{--gap: 0;--vertical-padding: 0}:host frames-divider{--first-content-height: var(--first-content-height-SCOPED-IN-index-tafV);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-index-tafV)}:host organisms-table{--background-color: var(--table-background-color-SCOPED-IN-index-tafV);--on-background-color: var(--table-on-background-color-SCOPED-IN-index-tafV);--surface-color: var(--table-surface-color-SCOPED-IN-index-tafV);--on-surface-color: var(--table-on-surface-color-SCOPED-IN-index-tafV)}:host *{--primary-color: var(--primary-color-SCOPED-IN-index-tafV);--on-primary-color: var(--on-primary-color-SCOPED-IN-index-tafV);--surface-color: var(--surface-color-SCOPED-IN-index-tafV);--on-surface-color: var(--on-surface-color-SCOPED-IN-index-tafV);--background-color: var(--background-color-SCOPED-IN-index-tafV);--on-background-color: var(--on-background-color-SCOPED-IN-index-tafV)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-index-tafV);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-index-tafV)}\n"], dependencies: [{ kind: "component", type: AutoLayoutFrame, selector: "frames-auto-layout" }, { kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "component", type: ListOrganism, selector: "organisms-list" }, { kind: "directive", type: 
+                // TableOrganism,
+                TableOrganismStore, selector: "organisms-table", inputs: ["draggable", "form", "columnFormFieldMap", "itemActions", "selection", "highlight", "childrenKey", "items", "treeControl", "isHidden", "getRowClass"] }, { kind: "component", type: TreeListOrganism, selector: "organisms-tree-list" }, { kind: "directive", type: NavigatorOrganismStore, selector: "organisms-navigator", inputs: ["startActions", "endActions", "title"] }, { kind: "directive", type: HeaderMoleculeStore, selector: "molecules-header", inputs: ["title", "description"] }, { kind: "component", type: TextInputFieldMolecule, selector: "molecules-text-input-field" }, { kind: "component", type: VerticalHideFrame, selector: "frames-vertical-hide", inputs: ["mode"] }, { kind: "pipe", type: JsonPipe, name: "json" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [import('@ng-atomic/components/organisms/chips-input-section').then(m => m.ChipsInputSectionOrganism), DividerFrame,
                 NgTemplateOutlet], () => [import('@ng-atomic/components/organisms/grid-toolbar').then(m => m.GridToolbarOrganismStore)], () => [import('@ng-atomic/components/frames/tabs').then(m => m.TabsFrame), NgTemplateOutlet], () => [GridCardsSectionOrganism], () => [import('@ng-atomic/components/organisms/paginator').then(m => m.PaginatorOrganismStore)]] }); }
 }
 __decorate([
@@ -360,13 +428,19 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], IndexTemplate.prototype, "onHeaderCheckboxClick", null);
+__decorate([
+    Effect(TableOrganismStore.ActionId.COLUMN_WIDTH_CHANGE, { accessor: (action) => action }),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], IndexTemplate.prototype, "onColumnWidthChange", null);
 __decorate([
     Effect(NavActionId.BACK),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], IndexTemplate.prototype, "back", null);
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.1.4", ngImport: i0, type: IndexTemplate, resolveDeferredDeps: () => [import('@ng-atomic/components/organisms/chips-input-section').then(m => m.ChipsInputSectionOrganism), import('@ng-atomic/components/organisms/grid-toolbar').then(m => m.GridToolbarOrganismStore), import('@ng-atomic/components/frames/tabs').then(m => m.TabsFrame), import('@ng-atomic/components/organisms/paginator').then(m => m.PaginatorOrganismStore)], resolveMetadata: (ChipsInputSectionOrganism, GridToolbarOrganismStore, TabsFrame, PaginatorOrganismStore) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "20.0.5", ngImport: i0, type: IndexTemplate, resolveDeferredDeps: () => [import('@ng-atomic/components/organisms/chips-input-section').then(m => m.ChipsInputSectionOrganism), import('@ng-atomic/components/organisms/grid-toolbar').then(m => m.GridToolbarOrganismStore), import('@ng-atomic/components/frames/tabs').then(m => m.TabsFrame), import('@ng-atomic/components/organisms/paginator').then(m => m.PaginatorOrganismStore)], resolveMetadata: (ChipsInputSectionOrganism, GridToolbarOrganismStore, TabsFrame, PaginatorOrganismStore) => ({ decorators: [{
                 type: Component,
                 args: [{ imports: [
                             AutoLayoutFrame,
@@ -377,6 +451,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.1.4", ng
                             PaginatorOrganismStore,
                             ListOrganism,
                             TabsFrame,
+                            // TableOrganism,
                             TableOrganismStore,
                             TreeListOrganism,
                             GridCardsSectionOrganism,
@@ -385,6 +460,7 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.1.4", ng
                             NgTemplateOutlet,
                             TextInputFieldMolecule,
                             VerticalHideFrame,
+                            JsonPipe
                         ], selector: 'templates-index', template: `
   <frames-scroll>
   <frames-vertical-hide [mode]="store.navMode()" top>
@@ -430,80 +506,96 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.1.4", ng
             }
             @if (store.itemsMapKeys().length > 1) {
               @defer {
-                <frames-tabs [labels]="store.itemsMapKeys()">
+                <frames-tabs
+                  [labels]="store.itemsMapKeys()"
+                  (selectedTabIndexChange)="onSelectedTabIndexChange($event)"
+                >
+                  @let map = store.itemsMap();
                   @for (key of store.itemsMapKeys(); track key;) {
                     <ng-template #tab>
-                      <ng-container *ngTemplateOutlet="items; context: {map: store.itemsMap()[key]}"/>
+                      <ng-container *ngTemplateOutlet="items; context: {map, key}"/>
                     </ng-template>
                   }
                 </frames-tabs>
               }
             } @else if(store.itemsMapKeys().length === 1) {
-              <ng-container *ngTemplateOutlet="items; context: {map: store.itemsMap()[store.itemsMapKeys()[0]]}"/>
-            } @else {
-
-            }
-
+              @let key = store.itemsMapKeys()[0];
+              @let map = store.itemsMap();
+              <ng-container *ngTemplateOutlet="items; context: {map, key}"/>
+            } @else { }
           </div>
         </frames-divider>
       }
     </frames-auto-layout>
   </frames-scroll>
 
-  <ng-template #items let-map="map">
-    <!-- <div>
-      json: {{ map | json }}
-    </div> -->
-    @switch(map?.type ?? store.type()) {
+  <ng-template #items let-map="map" let-key="key">
+    @let data = map[key];
+    @let type = data?.type ?? store.type();
+    @let items = data?.items ?? [];
+    @let itemActions = data?.itemActions ?? store.itemActions();
+    @let childrenKey = data?.childrenKey ?? store.tableChildrenKey();
+    @let highlight = data?.highlight ?? store.highlight();
+    @let groupBy = data?.groupedBy ?? store.groupedBy();
+    @let groupKeys = data?.groupKeys ?? store.groupKeys();
+    @let selection = data?.selection ?? store.selection();
+    @let tableTreeControl = data?.treeControl ?? store.tableTreeControl();
+    @let pageSizeOptions = data?.pageSizeOptions ?? store.pageSizeOptions();
+    @let isHidden = data?.tableIsHidden ?? store.tableIsHidden();
+    @let form = data?.form ?? store.form();
+    @let pageForm = data?.form?.get(['page']) ?? store.form().get(['page']);
+    @let itemLength = store.itemsLength();
+    @let tableFormFieldMap = store.tableColumnFormFieldMap();
+    @switch(type) {
+      @case('json') {
+        <pre>{{ items | json }}</pre>
+      }
       @case('list') {
-        @if (map.childrenKey) {
+        @if (data.childrenKey) {
           <organisms-tree-list
-            [items]="map?.items ?? []"
-            [childrenKey]="map?.childrenKey ?? store.childrenKey()"
-            [treeControl]="map?.treeControl ?? store.tableTreeControl()"
+            [items]="items"
+            [childrenKey]="childrenKey"
+            [treeControl]="tableTreeControl"
             (action)="dispatch($event)"
           />
         } @else {
           <organisms-list
-            [items]="map?.items ?? []"
-            [itemActions]="map?.itemActions ?? store.itemActions()"
-            [groupedBy]="map?.groupedBy ?? store.groupedBy()"
-            [groupKeys]="map?.groupKeys ?? store.groupKeys()"
+            [items]="items"
+            [itemActions]="itemActions"
+            [groupedBy]="groupBy"
+            [groupKeys]="groupKeys"
             (action)="dispatch($event)"
           />
         }
       }
-      @case ('grid') {
-        @defer {
+      @case ('grid') { @defer {
           <organisms-grid-cards-section
-            [items]="map?.items ?? []"
+            [items]="items"
             (action)="dispatch($event)"
             contents
           />
-        }
-      }
+      } }
       @default {
         <organisms-table injectable
-          [columnFormFieldMap]="store.tableColumnFormFieldMap()"
-          [items]="map?.items ?? []"
-          [itemActions]="map?.itemActions ?? store.itemActions()"
-          [selection]="map?.selection ?? store.selection()"
-          [form]="map?.form ?? store.form()"
-          [childrenKey]="map?.childrenKey ?? store.tableChildrenKey()"
-          [highlight]="map?.highlight ?? store.highlight()"
-          [isHidden]="map?.tableIsHidden ?? store.tableIsHidden()"
-          [treeControl]="map?.treeControl ?? store.tableTreeControl()"
-          (action)="dispatch($event)"
+          [columnFormFieldMap]="tableFormFieldMap"
+          [items]="items"
+          [itemActions]="itemActions"
+          [selection]="selection"
+          [form]="form"
+          [childrenKey]="childrenKey"
+          [highlight]="highlight"
+          [isHidden]="isHidden"
+          [treeControl]="tableTreeControl"
+          [getRowClass]="store.getRowClass()"
+          (action)="dispatch($event, undefined, key)"
         />
-        @if (map?.form?.get(['page']) ?? store.form().get(['page'])) {
-          @defer {
-            <organisms-paginator injectable
-              [form]="map?.form?.get(['page']) ?? store.form().get(['page'])"
-              [itemLength]="store.itemsLength()"
-              [pageSizeOptions]="map?.pageSizeOptions ?? store.pageSizeOptions()"
-            />
-          }
-        }
+        @if (pageForm) { @defer {
+          <organisms-paginator injectable
+            [form]="pageForm"
+            [itemLength]="itemLength"
+            [pageSizeOptions]="pageSizeOptions"
+          />
+        } }
       }
     }
   </ng-template>
@@ -535,13 +627,14 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "19.1.4", ng
                                     'type',
                                     'highlight',
                                     'queryLabel',
+                                    'getRowClass',
                                 ],
                                 outputs: [],
                             }
                         ], providers: [
                             QueryResolverService,
-                        ], styles: [":host{width:100%;height:100%;background:#fff;display:block;--navigator-height: 56px;--navigator-height-SCOPED-IN-index-ihUu: var(--navigator-height);--primary-color: #404040;--primary-color-SCOPED-IN-index-ihUu: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-index-ihUu: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-index-ihUu: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-index-ihUu: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-index-ihUu: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-index-ihUu: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-index-ihUu: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-index-ihUu);--navigator-background-color-SCOPED-IN-index-ihUu: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-index-ihUu);--navigator-on-background-color-SCOPED-IN-index-ihUu: var(--navigator-on-background-color);--table-background-color: var(--background-color-SCOPED-IN-index-ihUu);--table-background-color-SCOPED-IN-index-ihUu: var(--table-background-color);--table-on-background-color: var(--on-background-color-SCOPED-IN-index-ihUu);--table-on-background-color-SCOPED-IN-index-ihUu: var(--table-on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-index-ihUu: var(--first-content-height);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-index-ihUu: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-index-ihUu: var(--max-first-content-height)}:host{background-color:var(--background-color-SCOPED-IN-index-ihUu);color:var(--on-background-color-SCOPED-IN-index-ihUu);transition:background-color .5s ease-in-out}:host frames-auto-layout{--gap: 0;--vertical-padding: 0}:host frames-divider{--first-content-height: var(--first-content-height-SCOPED-IN-index-ihUu);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-index-ihUu)}:host organisms-table{--background-color: var(--table-background-color-SCOPED-IN-index-ihUu);--on-background-color: var(--table-on-background-color-SCOPED-IN-index-ihUu)}:host *{--primary-color: var(--primary-color-SCOPED-IN-index-ihUu);--on-primary-color: var(--on-primary-color-SCOPED-IN-index-ihUu);--surface-color: var(--surface-color-SCOPED-IN-index-ihUu);--on-surface-color: var(--on-surface-color-SCOPED-IN-index-ihUu);--background-color: var(--background-color-SCOPED-IN-index-ihUu);--on-background-color: var(--on-background-color-SCOPED-IN-index-ihUu)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-index-ihUu);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-index-ihUu)}\n"] }]
-            }], ctorParameters: null, propDecorators: { onTableHeaderClick: [], onCheckboxClickItem: [], onItemClicked: [], onItemButtonClicked: [], onHeaderCheckboxClick: [], back: [] } }) });
+                        ], styles: [":host{width:100%;height:100%;background:#fff;display:block;--navigator-height: 56px;--navigator-height-SCOPED-IN-index-tafV: var(--navigator-height);--primary-color: #404040;--primary-color-SCOPED-IN-index-tafV: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-index-tafV: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-index-tafV: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-index-tafV: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-index-tafV: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-index-tafV: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-index-tafV: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-index-tafV);--navigator-background-color-SCOPED-IN-index-tafV: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-index-tafV);--navigator-on-background-color-SCOPED-IN-index-tafV: var(--navigator-on-background-color);--table-background-color: var(--background-color-SCOPED-IN-index-tafV);--table-background-color-SCOPED-IN-index-tafV: var(--table-background-color);--table-on-background-color: var(--on-background-color-SCOPED-IN-index-tafV);--table-on-background-color-SCOPED-IN-index-tafV: var(--table-on-background-color);--table-surface-color: var(--surface-color-SCOPED-IN-index-tafV);--table-surface-color-SCOPED-IN-index-tafV: var(--table-surface-color);--table-on-surface-color: var(--on-surface-color-SCOPED-IN-index-tafV);--table-on-surface-color-SCOPED-IN-index-tafV: var(--table-on-surface-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-index-tafV: var(--first-content-height);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-index-tafV: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-index-tafV: var(--max-first-content-height)}:host{background-color:var(--background-color-SCOPED-IN-index-tafV);color:var(--on-background-color-SCOPED-IN-index-tafV);transition:background-color .5s ease-in-out}:host frames-auto-layout{--gap: 0;--vertical-padding: 0}:host frames-divider{--first-content-height: var(--first-content-height-SCOPED-IN-index-tafV);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-index-tafV)}:host organisms-table{--background-color: var(--table-background-color-SCOPED-IN-index-tafV);--on-background-color: var(--table-on-background-color-SCOPED-IN-index-tafV);--surface-color: var(--table-surface-color-SCOPED-IN-index-tafV);--on-surface-color: var(--table-on-surface-color-SCOPED-IN-index-tafV)}:host *{--primary-color: var(--primary-color-SCOPED-IN-index-tafV);--on-primary-color: var(--on-primary-color-SCOPED-IN-index-tafV);--surface-color: var(--surface-color-SCOPED-IN-index-tafV);--on-surface-color: var(--on-surface-color-SCOPED-IN-index-tafV);--background-color: var(--background-color-SCOPED-IN-index-tafV);--on-background-color: var(--on-background-color-SCOPED-IN-index-tafV)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-index-tafV);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-index-tafV)}\n"] }]
+            }], ctorParameters: null, propDecorators: { onTableHeaderClick: [], onCheckboxClickItem: [], onItemClicked: [], onItemButtonClicked: [], onHeaderCheckboxClick: [], onColumnWidthChange: [], back: [] } }) });
 
 /**
  * Generated bundle index. Do not edit.