@ng-atomic/components 18.2.0 → 18.4.0

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

@@ -1,29 +1,29 @@
 import { __decorate, __metadata } from 'tslib';
 import * as i0 from '@angular/core';
 import { inject, PLATFORM_ID, input, Directive, viewChild, Component, ChangeDetectionStrategy } from '@angular/core';
-import { isPlatformServer } from '@angular/common';
+import { isPlatformServer, NgTemplateOutlet } 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';
 import { injectIndexForm, TableOrganismStore, TableOrganism } from '@ng-atomic/components/organisms/table';
-import { SmartListOrganism } from '@ng-atomic/components/organisms/smart-list';
+import { ListOrganism } from '@ng-atomic/components/organisms/list';
 import { NavigatorOrganismStore } from '@ng-atomic/components/organisms/navigator';
 import { InjectableComponent, _computed, computeFake, TokenizedType, NgAtomicComponent, Effect } from '@ng-atomic/core';
-import { FiltersSectionOrganism } from '@ng-atomic/components/organisms/filters-section';
 import { DividerFrame } from '@ng-atomic/components/frames/divider';
 import { SelectionModel } from '@angular/cdk/collections';
-import { SelectionListOrganism } from '@ng-atomic/components/organisms/selection-list';
 import { QueryResolverService } from '@ng-atomic/common/services/query-resolver';
 import { call, makeConfig, injectNavStartActions, NavActionId } from '@ng-atomic/common/services/ui';
 import { IndexPipe } from '@ng-atomic/common/pipes/index';
 import { IndexLengthPipe } from '@ng-atomic/common/pipes/index-length';
-import { SortByPipe } from '@ng-atomic/common/pipes/sort-by';
 import { GridCardsSectionOrganism } from '@ng-atomic/components/organisms/grid-cards-section';
 import { injectModelName } from '@ng-atomic/common/pipes/domain';
-import { DataAccessorPipe } from '@ng-atomic/common/pipes/data-accessor';
+import { FormControl } from '@angular/forms';
 import { computedRawValue } from '@ng-atomic/common/utils';
 import { toObservable } from '@angular/core/rxjs-interop';
 import { FlatTreeControl } from '@angular/cdk/tree';
+import { TreeListOrganism, TreeListOrganismStore } from '@ng-atomic/components/organisms/tree-list';
+import { TextInputFieldMolecule } from '@ng-atomic/components/molecules/text-input-field';
+import { VerticalHideFrame } from '@ng-atomic/components/frames/vertical-hide';
 
 var IndexTemplateStore_1;
 var ActionId;
@@ -47,6 +47,14 @@ function getType(context) {
         default: return 'table';
     }
 }
+function convertToItemsMap(items) {
+    return {
+        'default': {
+            items: items,
+            itemsLength: items?.length,
+        }
+    };
+}
 let IndexTemplateStore = class IndexTemplateStore extends InjectableComponent {
     constructor() {
         super(...arguments);
@@ -60,8 +68,12 @@ let IndexTemplateStore = class IndexTemplateStore extends InjectableComponent {
         this.tableTreeControl = input(_computed(() => this.config().tableTreeControl));
         this.itemActions = input(_computed(() => this.config().itemActions));
         this.title = input(_computed(() => this.config().title));
+        this.titleControl = input(_computed(() => this.config().titleControl));
+        this.titleEditable = input(_computed(() => this.config().titleEditable));
         this.description = input(_computed(() => this.config().description));
         this.items = input(_computed(() => this.config().items));
+        this.itemsMap = input(_computed(() => convertToItemsMap(this.items())));
+        this.itemsMapKeys = input(_computed(() => Object.keys(this.itemsMap() ?? {})));
         this.itemsLength = input(_computed(() => this.config().itemsLength));
         this.navStartActions = input(_computed(() => this.config().navStartActions));
         this.navEndActions = input(_computed(() => this.config().navEndActions));
@@ -72,6 +84,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.navMode = input(_computed(() => 'expanded'));
         this.form$ = toObservable(computeFake(this.form));
         this.formValue = computedRawValue(() => call(this.form()));
         this.pipes = { index: inject(IndexPipe), indexLength: inject(IndexLengthPipe) };
@@ -90,9 +103,19 @@ let IndexTemplateStore = class IndexTemplateStore extends InjectableComponent {
                 default: return 'var(--page-width-lv2)';
             }
         }
+        function getType(context) {
+            switch (context.breakpoint) {
+                case 'xSmall': return 'list';
+                case 'small':
+                case 'medium':
+                case 'large':
+                case 'xLarge':
+                default: return 'table';
+            }
+        }
         const form = injectIndexForm();
         const navStartActions = injectNavStartActions();
-        return () => ({
+        return (context) => ({
             form,
             toggleActions: [
                 { id: ActionId.TOGGLE_TYPE, icon: 'grid_view', payload: 'grid' },
@@ -102,17 +125,19 @@ 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 }),
             itemActions: (item) => [{ id: ActionId.DETAIL, icon: 'open_in_new', payload: item }],
             items: [],
             itemsLength: 0,
             title: `${modelName()}一覧`,
+            titleControl: new FormControl(`${modelName()}一覧`),
+            titleEditable: false,
             description: ``,
             navStartActions: navStartActions(),
             navEndActions: [],
             groupedBy: null,
             groupKeys: [],
-            type: 'table',
+            type: getType(context),
             pageSizeOptions: [5, 10, 25, 100],
             selection: new SelectionModel(true, []),
             highlight: new SelectionModel(true, []),
@@ -128,7 +153,7 @@ let IndexTemplateStore = class IndexTemplateStore extends InjectableComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: IndexTemplateStore, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.2", 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 }, itemActions: { classPropertyName: "itemActions", publicName: "itemActions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", 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 }, 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 } }, providers: [
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.1.2", 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 }, 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: [
             IndexPipe,
             IndexLengthPipe,
         ], usesInheritance: true, ngImport: i0 }); }
@@ -176,84 +201,129 @@ class IndexTemplate extends NgAtomicComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: IndexTemplate, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.2", 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", "form", "form", "title", "title", "description", "description", "items", "items", "itemsLength", "itemsLength", "itemActions", "itemActions", "navStartActions", "navStartActions", "navEndActions", "navEndActions", "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 }], usesInheritance: true, hostDirectives: [{ directive: IndexTemplateStore, inputs: ["gridToolbarActions", "gridToolbarActions", "tableChildrenKey", "tableChildrenKey", "tableIsHidden", "tableIsHidden", "tableTreeControl", "tableTreeControl", "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: `
   <frames-scroll>
-    <organisms-navigator injectable
-      [startActions]="store.navStartActions()"
-      [endActions]="store.navEndActions()"
-      (action)="dispatch($event)"
-      navigator
-    >
-      <molecules-header injectable [title]="store.title()" [description]="store.description()"/>
-    </organisms-navigator>
-    <frames-auto-layout vertical contents>
-      @switch(store.type()) {
-        @case('list') {
-          <organisms-smart-list
-            [items]="store.items()"
-            [itemActions]="store.itemActions()"
-            [groupedBy]="store.groupedBy()"
-            [groupKeys]="store.groupKeys()"
+  <frames-vertical-hide [mode]="store.navMode()" top>
+      <organisms-navigator injectable
+        [startActions]="store.navStartActions()"
+        [endActions]="store.navEndActions()"
+        (action)="dispatch($event)"
+        top
+      >
+      @if (store.titleEditable()) {
+        <molecules-text-input-field
+          [label]="'title'"
+          [placeholder]="'title'"
+          [control]="store.titleControl()"
+          [appearance]="'fill'"
+        />
+      } @else {
+        <molecules-header injectable [title]="store.title()" [description]="store.description()"/>
+      }
+      </organisms-navigator>
+      <div class="dashboard">
+        <ng-content first select="[navDashboard]" />
+      </div>
+    </frames-vertical-hide>
+    <frames-auto-layout [type]="'vertical'" contents>
+      @defer {
+        <frames-divider>
+          <ng-content first select="[dashboard]" />
+          <div style="display: flex; flex-direction: column; width: 100%; height: 100%;" second>
+            @if (store.gridToolbarActions() || true) {
+              @defer {
+                <organisms-grid-toolbar injectable
+                  [actions]="store.gridToolbarActions()"
+                  (action)="dispatch($event)"
+                />
+              }
+            }
+            @if (store.form().get(['query'])) {
+              <organisms-chips-input-section
+                [control]="store.form().get(['query'])"
+                [label]="store.queryLabel()"
+              />
+            }
+            @if (store.itemsMapKeys().length > 1) {
+              @defer {
+                <frames-tabs [labels]="store.itemsMapKeys()">
+                  @for (key of store.itemsMapKeys(); track key;) {
+                    <ng-template #tab>
+                      <ng-container *ngTemplateOutlet="items; context: {map: store.itemsMap()[key]}"/>
+                    </ng-template>
+                  }
+                </frames-tabs>
+              }
+            } @else if(store.itemsMapKeys().length === 1) {
+              <ng-container *ngTemplateOutlet="items; context: {map: store.itemsMap()[store.itemsMapKeys()[0]]}"/>
+            } @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()) {
+      @case('list') {
+        @if (map.childrenKey) {
+          <organisms-tree-list
+            [items]="map?.items ?? []"
+            [childrenKey]="map?.childrenKey ?? store.childrenKey()"
+            [treeControl]="map?.treeControl ?? store.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()"
             (action)="dispatch($event)"
           />
         }
-        @case ('grid') {
-          @defer {
-            <organisms-grid-cards-section
-              [items]="store.items()"
-              (action)="dispatch($event)"
-              contents
-            />
-          }
+      }
+      @case ('grid') {
+        @defer {
+          <organisms-grid-cards-section
+            [items]="map?.items ?? []"
+            (action)="dispatch($event)"
+            contents
+          />
         }
-        @default {
+      }
+      @default {
+        <organisms-table injectable
+          [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)"
+        />
+        @if (map?.form?.get(['page']) ?? store.form().get(['page'])) {
           @defer {
-            <frames-divider>
-              <ng-content first select="[dashboard]" />
-              <div style="display: flex; flex-direction: column; width: 100%; height: 100%;" second>
-              @if (store.gridToolbarActions() || true) {
-                @defer {
-                  <organisms-grid-toolbar injectable
-                    [actions]="store.gridToolbarActions()"
-                    (action)="dispatch($event)"
-                  />
-                }
-              }
-              @if (store.form().get(['query'])) {
-                <organisms-chips-input-section
-                  [control]="store.form().get(['query'])"
-                  [label]="store.queryLabel()"
-                />
-              }
-                <organisms-table injectable
-                  [items]="store.items()"
-                  [itemActions]="store.itemActions()"
-                  [selection]="store.selection()"
-                  [form]="store.form()"
-                  [childrenKey]="store.tableChildrenKey()"
-                  [highlight]="store.highlight()"
-                  [isHidden]="store.tableIsHidden()"
-                  [treeControl]="store.tableTreeControl()"
-                  (action)="dispatch($event)"
-                />
-                @if (store.form().get(['page'])) {
-                  @defer {
-                    <organisms-paginator injectable
-                      [form]="store.form().get(['page'])"
-                      [itemLength]="store.itemsLength()"
-                      [pageSizeOptions]="store.pageSizeOptions()"
-                    />
-                  }
-                }
-              </div>
-            </frames-divider>
+            <organisms-paginator injectable
+              [form]="map?.form?.get(['page']) ?? store.form().get(['page'])"
+              [itemLength]="map?.itemsLength ?? store.itemsLength()"
+              [pageSizeOptions]="map?.pageSizeOptions ?? store.pageSizeOptions()"
+            />
           }
         }
       }
-    </frames-auto-layout>
-  </frames-scroll>
-  `, isInline: true, styles: [":host{width:100%;height:100%;background:#fff;display:block;--navigator-height: 56px;--navigator-height-SCOPED-IN-index-YSAV: var(--navigator-height);--primary-color: #404040;--primary-color-SCOPED-IN-index-YSAV: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-index-YSAV: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-index-YSAV: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-index-YSAV: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-index-YSAV: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-index-YSAV: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-index-YSAV: var(--on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-index-YSAV: var(--first-content-height);--navigator-background-color: var(--primary-color-SCOPED-IN-index-YSAV);--navigator-background-color-SCOPED-IN-index-YSAV: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-index-YSAV);--navigator-on-background-color-SCOPED-IN-index-YSAV: var(--navigator-on-background-color);--table-background-color: var(--background-color-SCOPED-IN-index-YSAV);--table-background-color-SCOPED-IN-index-YSAV: var(--table-background-color);--table-on-background-color: var(--on-background-color-SCOPED-IN-index-YSAV);--table-on-background-color-SCOPED-IN-index-YSAV: var(--table-on-background-color);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-index-YSAV: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-index-YSAV: var(--max-first-content-height)}:host{background-color:var(--background-color-SCOPED-IN-index-YSAV);color:var(--on-background-color-SCOPED-IN-index-YSAV);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-YSAV);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-index-YSAV)}:host organisms-table{--background-color: var(--table-background-color-SCOPED-IN-index-YSAV);--on-background-color: var(--table-on-background-color-SCOPED-IN-index-YSAV)}:host *{--primary-color: var(--primary-color-SCOPED-IN-index-YSAV);--on-primary-color: var(--on-primary-color-SCOPED-IN-index-YSAV);--surface-color: var(--surface-color-SCOPED-IN-index-YSAV);--on-surface-color: var(--on-surface-color-SCOPED-IN-index-YSAV);--background-color: var(--background-color-SCOPED-IN-index-YSAV);--on-background-color: var(--on-background-color-SCOPED-IN-index-YSAV)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-index-YSAV);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-index-YSAV)}\n"], dependencies: [{ kind: "component", type: AutoLayoutFrame, selector: "frames-auto-layout" }, { kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "component", type: SmartListOrganism, selector: "organisms-smart-list" }, { kind: "directive", type: NavigatorOrganismStore, selector: "organisms-navigator", inputs: ["startActions", "endActions", "title"] }, { kind: "directive", type: HeaderMoleculeStore, selector: "molecules-header", inputs: ["title", "description"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [GridCardsSectionOrganism], () => [import('@ng-atomic/components/organisms/chips-input-section').then(m => m.ChipsInputSectionOrganism), DividerFrame,
-                TableOrganismStore], () => [import('@ng-atomic/components/organisms/grid-toolbar').then(m => m.GridToolbarOrganismStore)], () => [import('@ng-atomic/components/organisms/paginator').then(m => m.PaginatorOrganismStore)]] }); }
+    }
+  </ng-template>
+  `, isInline: true, styles: [":host{width:100%;height:100%;background:#fff;display:block;--navigator-height: 56px;--navigator-height-SCOPED-IN-index-xSSh: var(--navigator-height);--primary-color: #404040;--primary-color-SCOPED-IN-index-xSSh: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-index-xSSh: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-index-xSSh: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-index-xSSh: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-index-xSSh: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-index-xSSh: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-index-xSSh: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-index-xSSh);--navigator-background-color-SCOPED-IN-index-xSSh: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-index-xSSh);--navigator-on-background-color-SCOPED-IN-index-xSSh: var(--navigator-on-background-color);--table-background-color: var(--background-color-SCOPED-IN-index-xSSh);--table-background-color-SCOPED-IN-index-xSSh: var(--table-background-color);--table-on-background-color: var(--on-background-color-SCOPED-IN-index-xSSh);--table-on-background-color-SCOPED-IN-index-xSSh: var(--table-on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-index-xSSh: var(--first-content-height);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-index-xSSh: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-index-xSSh: var(--max-first-content-height)}:host{background-color:var(--background-color-SCOPED-IN-index-xSSh);color:var(--on-background-color-SCOPED-IN-index-xSSh);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-xSSh);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-index-xSSh)}:host organisms-table{--background-color: var(--table-background-color-SCOPED-IN-index-xSSh);--on-background-color: var(--table-on-background-color-SCOPED-IN-index-xSSh)}:host *{--primary-color: var(--primary-color-SCOPED-IN-index-xSSh);--on-primary-color: var(--on-primary-color-SCOPED-IN-index-xSSh);--surface-color: var(--surface-color-SCOPED-IN-index-xSSh);--on-surface-color: var(--on-surface-color-SCOPED-IN-index-xSSh);--background-color: var(--background-color-SCOPED-IN-index-xSSh);--on-background-color: var(--on-background-color-SCOPED-IN-index-xSSh)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-index-xSSh);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-index-xSSh)}\n"], dependencies: [{ kind: "component", type: AutoLayoutFrame, selector: "frames-auto-layout" }, { kind: "component", type: ScrollFrame, selector: "frames-scroll" }, { kind: "directive", type: TableOrganismStore, selector: "organisms-table", inputs: ["draggable", "form", "itemActions", "selection", "highlight", "childrenKey", "items", "treeControl", "isHidden"] }, { kind: "component", type: ListOrganism, selector: "organisms-list" }, { kind: "component", type: TreeListOrganism, selector: "organisms-tree-list" }, { kind: "directive", type: NavigatorOrganismStore, selector: "organisms-navigator", inputs: ["startActions", "resolvedStartActions", "endActions", "resolvedEndActions", "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,
+                NgTemplateOutlet], () => [import('@ng-atomic/components/organisms/grid-toolbar').then(m => m.GridToolbarOrganismStore)], () => [NgTemplateOutlet, import('@ng-atomic/components/frames/tabs').then(m => m.TabsFrame)], () => [GridCardsSectionOrganism], () => [import('@ng-atomic/components/organisms/paginator').then(m => m.PaginatorOrganismStore)]] }); }
 }
 __decorate([
     Effect(TableOrganism.ActionId.HEADER_CLICK),
@@ -269,14 +339,15 @@ __decorate([
 ], IndexTemplate.prototype, "onCheckboxClickItem", null);
 __decorate([
     Effect(GridCardsSectionOrganism.ActionId.ITEM_CLICK),
-    Effect(SmartListOrganism.ActionId.CLICK_ITEM),
+    Effect(ListOrganism.ActionId.CLICK_ITEM),
+    Effect(TreeListOrganismStore.ActionId.CLICK_ITEM),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
 ], IndexTemplate.prototype, "onItemClicked", null);
 __decorate([
     Effect(GridCardsSectionOrganism.ActionId.ITEM_MENU_CLICK),
-    Effect(SmartListOrganism.ActionId.ITEM_BUTTON_CLICK),
+    Effect(ListOrganism.ActionId.ITEM_BUTTON_CLICK),
     __metadata("design:type", Function),
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
@@ -293,10 +364,9 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", void 0)
 ], IndexTemplate.prototype, "back", null);
-i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.2", 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/organisms/paginator').then(m => m.PaginatorOrganismStore)], resolveMetadata: (ChipsInputSectionOrganism, GridToolbarOrganismStore, PaginatorOrganismStore) => ({ decorators: [{
+i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.2", 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: [{ standalone: true, imports: [
-                            DataAccessorPipe,
                             AutoLayoutFrame,
                             ChipsInputSectionOrganism,
                             ScrollFrame,
@@ -304,89 +374,136 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.2", ng
                             GridToolbarOrganismStore,
                             PaginatorOrganismStore,
                             TableOrganismStore,
-                            SmartListOrganism,
+                            ListOrganism,
+                            TreeListOrganism,
                             GridCardsSectionOrganism,
-                            SelectionListOrganism,
                             NavigatorOrganismStore,
-                            FiltersSectionOrganism,
                             HeaderMoleculeStore,
-                            SortByPipe,
+                            NgTemplateOutlet,
+                            TabsFrame,
+                            TextInputFieldMolecule,
+                            VerticalHideFrame,
                         ], selector: 'templates-index', template: `
   <frames-scroll>
-    <organisms-navigator injectable
-      [startActions]="store.navStartActions()"
-      [endActions]="store.navEndActions()"
-      (action)="dispatch($event)"
-      navigator
-    >
-      <molecules-header injectable [title]="store.title()" [description]="store.description()"/>
-    </organisms-navigator>
-    <frames-auto-layout vertical contents>
-      @switch(store.type()) {
-        @case('list') {
-          <organisms-smart-list
-            [items]="store.items()"
-            [itemActions]="store.itemActions()"
-            [groupedBy]="store.groupedBy()"
-            [groupKeys]="store.groupKeys()"
+  <frames-vertical-hide [mode]="store.navMode()" top>
+      <organisms-navigator injectable
+        [startActions]="store.navStartActions()"
+        [endActions]="store.navEndActions()"
+        (action)="dispatch($event)"
+        top
+      >
+      @if (store.titleEditable()) {
+        <molecules-text-input-field
+          [label]="'title'"
+          [placeholder]="'title'"
+          [control]="store.titleControl()"
+          [appearance]="'fill'"
+        />
+      } @else {
+        <molecules-header injectable [title]="store.title()" [description]="store.description()"/>
+      }
+      </organisms-navigator>
+      <div class="dashboard">
+        <ng-content first select="[navDashboard]" />
+      </div>
+    </frames-vertical-hide>
+    <frames-auto-layout [type]="'vertical'" contents>
+      @defer {
+        <frames-divider>
+          <ng-content first select="[dashboard]" />
+          <div style="display: flex; flex-direction: column; width: 100%; height: 100%;" second>
+            @if (store.gridToolbarActions() || true) {
+              @defer {
+                <organisms-grid-toolbar injectable
+                  [actions]="store.gridToolbarActions()"
+                  (action)="dispatch($event)"
+                />
+              }
+            }
+            @if (store.form().get(['query'])) {
+              <organisms-chips-input-section
+                [control]="store.form().get(['query'])"
+                [label]="store.queryLabel()"
+              />
+            }
+            @if (store.itemsMapKeys().length > 1) {
+              @defer {
+                <frames-tabs [labels]="store.itemsMapKeys()">
+                  @for (key of store.itemsMapKeys(); track key;) {
+                    <ng-template #tab>
+                      <ng-container *ngTemplateOutlet="items; context: {map: store.itemsMap()[key]}"/>
+                    </ng-template>
+                  }
+                </frames-tabs>
+              }
+            } @else if(store.itemsMapKeys().length === 1) {
+              <ng-container *ngTemplateOutlet="items; context: {map: store.itemsMap()[store.itemsMapKeys()[0]]}"/>
+            } @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()) {
+      @case('list') {
+        @if (map.childrenKey) {
+          <organisms-tree-list
+            [items]="map?.items ?? []"
+            [childrenKey]="map?.childrenKey ?? store.childrenKey()"
+            [treeControl]="map?.treeControl ?? store.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()"
             (action)="dispatch($event)"
           />
         }
-        @case ('grid') {
-          @defer {
-            <organisms-grid-cards-section
-              [items]="store.items()"
-              (action)="dispatch($event)"
-              contents
-            />
-          }
+      }
+      @case ('grid') {
+        @defer {
+          <organisms-grid-cards-section
+            [items]="map?.items ?? []"
+            (action)="dispatch($event)"
+            contents
+          />
         }
-        @default {
+      }
+      @default {
+        <organisms-table injectable
+          [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)"
+        />
+        @if (map?.form?.get(['page']) ?? store.form().get(['page'])) {
           @defer {
-            <frames-divider>
-              <ng-content first select="[dashboard]" />
-              <div style="display: flex; flex-direction: column; width: 100%; height: 100%;" second>
-              @if (store.gridToolbarActions() || true) {
-                @defer {
-                  <organisms-grid-toolbar injectable
-                    [actions]="store.gridToolbarActions()"
-                    (action)="dispatch($event)"
-                  />
-                }
-              }
-              @if (store.form().get(['query'])) {
-                <organisms-chips-input-section
-                  [control]="store.form().get(['query'])"
-                  [label]="store.queryLabel()"
-                />
-              }
-                <organisms-table injectable
-                  [items]="store.items()"
-                  [itemActions]="store.itemActions()"
-                  [selection]="store.selection()"
-                  [form]="store.form()"
-                  [childrenKey]="store.tableChildrenKey()"
-                  [highlight]="store.highlight()"
-                  [isHidden]="store.tableIsHidden()"
-                  [treeControl]="store.tableTreeControl()"
-                  (action)="dispatch($event)"
-                />
-                @if (store.form().get(['page'])) {
-                  @defer {
-                    <organisms-paginator injectable
-                      [form]="store.form().get(['page'])"
-                      [itemLength]="store.itemsLength()"
-                      [pageSizeOptions]="store.pageSizeOptions()"
-                    />
-                  }
-                }
-              </div>
-            </frames-divider>
+            <organisms-paginator injectable
+              [form]="map?.form?.get(['page']) ?? store.form().get(['page'])"
+              [itemLength]="map?.itemsLength ?? store.itemsLength()"
+              [pageSizeOptions]="map?.pageSizeOptions ?? store.pageSizeOptions()"
+            />
           }
         }
       }
-    </frames-auto-layout>
-  </frames-scroll>
+    }
+  </ng-template>
   `, changeDetection: ChangeDetectionStrategy.OnPush, host: { class: 'template' }, hostDirectives: [
                             {
                                 directive: IndexTemplateStore,
@@ -397,12 +514,16 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.2", ng
                                     'tableTreeControl',
                                     'form',
                                     'title',
+                                    'titleControl',
+                                    'titleEditable',
                                     'description',
                                     'items',
+                                    'itemsMap',
                                     'itemsLength',
                                     'itemActions',
                                     'navStartActions',
                                     'navEndActions',
+                                    'navMode',
                                     'groupedBy',
                                     'groupKeys',
                                     'selection',
@@ -415,12 +536,12 @@ i0.ɵɵngDeclareClassMetadataAsync({ minVersion: "18.0.0", version: "18.1.2", ng
                             }
                         ], providers: [
                             QueryResolverService,
-                        ], styles: [":host{width:100%;height:100%;background:#fff;display:block;--navigator-height: 56px;--navigator-height-SCOPED-IN-index-YSAV: var(--navigator-height);--primary-color: #404040;--primary-color-SCOPED-IN-index-YSAV: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-index-YSAV: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-index-YSAV: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-index-YSAV: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-index-YSAV: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-index-YSAV: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-index-YSAV: var(--on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-index-YSAV: var(--first-content-height);--navigator-background-color: var(--primary-color-SCOPED-IN-index-YSAV);--navigator-background-color-SCOPED-IN-index-YSAV: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-index-YSAV);--navigator-on-background-color-SCOPED-IN-index-YSAV: var(--navigator-on-background-color);--table-background-color: var(--background-color-SCOPED-IN-index-YSAV);--table-background-color-SCOPED-IN-index-YSAV: var(--table-background-color);--table-on-background-color: var(--on-background-color-SCOPED-IN-index-YSAV);--table-on-background-color-SCOPED-IN-index-YSAV: var(--table-on-background-color);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-index-YSAV: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-index-YSAV: var(--max-first-content-height)}:host{background-color:var(--background-color-SCOPED-IN-index-YSAV);color:var(--on-background-color-SCOPED-IN-index-YSAV);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-YSAV);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-index-YSAV)}:host organisms-table{--background-color: var(--table-background-color-SCOPED-IN-index-YSAV);--on-background-color: var(--table-on-background-color-SCOPED-IN-index-YSAV)}:host *{--primary-color: var(--primary-color-SCOPED-IN-index-YSAV);--on-primary-color: var(--on-primary-color-SCOPED-IN-index-YSAV);--surface-color: var(--surface-color-SCOPED-IN-index-YSAV);--on-surface-color: var(--on-surface-color-SCOPED-IN-index-YSAV);--background-color: var(--background-color-SCOPED-IN-index-YSAV);--on-background-color: var(--on-background-color-SCOPED-IN-index-YSAV)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-index-YSAV);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-index-YSAV)}\n"] }]
+                        ], styles: [":host{width:100%;height:100%;background:#fff;display:block;--navigator-height: 56px;--navigator-height-SCOPED-IN-index-xSSh: var(--navigator-height);--primary-color: #404040;--primary-color-SCOPED-IN-index-xSSh: var(--primary-color);--on-primary-color: #f0f0f0;--on-primary-color-SCOPED-IN-index-xSSh: var(--on-primary-color);--secondary-color: #f0f0f0;--secondary-color-SCOPED-IN-index-xSSh: var(--secondary-color);--surface-color: #f0f0f0;--surface-color-SCOPED-IN-index-xSSh: var(--surface-color);--on-surface-color: #000;--on-surface-color-SCOPED-IN-index-xSSh: var(--on-surface-color);--background-color: #f0f0f0;--background-color-SCOPED-IN-index-xSSh: var(--background-color);--on-background-color: #000;--on-background-color-SCOPED-IN-index-xSSh: var(--on-background-color);--navigator-background-color: var(--primary-color-SCOPED-IN-index-xSSh);--navigator-background-color-SCOPED-IN-index-xSSh: var(--navigator-background-color);--navigator-on-background-color: var(--on-primary-color-SCOPED-IN-index-xSSh);--navigator-on-background-color-SCOPED-IN-index-xSSh: var(--navigator-on-background-color);--table-background-color: var(--background-color-SCOPED-IN-index-xSSh);--table-background-color-SCOPED-IN-index-xSSh: var(--table-background-color);--table-on-background-color: var(--on-background-color-SCOPED-IN-index-xSSh);--table-on-background-color-SCOPED-IN-index-xSSh: var(--table-on-background-color);--first-content-height: 0px;--first-content-height-SCOPED-IN-index-xSSh: var(--first-content-height);--min-first-content-height: 0px;--min-first-content-height-SCOPED-IN-index-xSSh: var(--min-first-content-height);--max-first-content-height: calc(100% - 80px) ;--max-first-content-height-SCOPED-IN-index-xSSh: var(--max-first-content-height)}:host{background-color:var(--background-color-SCOPED-IN-index-xSSh);color:var(--on-background-color-SCOPED-IN-index-xSSh);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-xSSh);--min-first-content-height: var(--min-first-content-height-SCOPED-IN-index-xSSh)}:host organisms-table{--background-color: var(--table-background-color-SCOPED-IN-index-xSSh);--on-background-color: var(--table-on-background-color-SCOPED-IN-index-xSSh)}:host *{--primary-color: var(--primary-color-SCOPED-IN-index-xSSh);--on-primary-color: var(--on-primary-color-SCOPED-IN-index-xSSh);--surface-color: var(--surface-color-SCOPED-IN-index-xSSh);--on-surface-color: var(--on-surface-color-SCOPED-IN-index-xSSh);--background-color: var(--background-color-SCOPED-IN-index-xSSh);--on-background-color: var(--on-background-color-SCOPED-IN-index-xSSh)}:host organisms-navigator{--background-color: var(--navigator-background-color-SCOPED-IN-index-xSSh);--on-background-color: var(--navigator-on-background-color-SCOPED-IN-index-xSSh)}\n"] }]
             }], ctorParameters: null, propDecorators: { onTableHeaderClick: [], onCheckboxClickItem: [], onItemClicked: [], onItemButtonClicked: [], onHeaderCheckboxClick: [], back: [] } }) });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ActionId, IndexTemplate, IndexTemplateStore, getType };
+export { ActionId, IndexTemplate, IndexTemplateStore, convertToItemsMap, getType };
 //# sourceMappingURL=ng-atomic-components-templates-_index.mjs.map