@xxmachina/components 19.0.0-preview.8 → 19.1.0

package/fesm2022/xxmachina-components-pages-query.mjs

@@ -1,30 +1,31 @@
 import { __decorate, __metadata } from 'tslib';
 import * as i0 from '@angular/core';
-import { signal, Injectable, effect, computed, inject, input, EventEmitter, Directive, viewChild, ChangeDetectionStrategy, Component } from '@angular/core';
-import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { IndexTemplate, IndexTemplateStore } from '@ng-atomic/components/templates/_index';
-import { InjectableComponent, createAction, applyToInput, computeFake, provideEffect, _computed, TokenizedType, NgAtomicComponent, updateInput, Effect } from '@ng-atomic/core';
-import { AppService } from '@ng-atomic/common/services/app';
-import { injectIndexFormBuilder, buildColumns } from '@ng-atomic/components/organisms/table';
+import { signal, Injectable, effect, inject, computed, untracked, ElementRef, input, Directive, viewChild, ChangeDetectionStrategy, Component } from '@angular/core';
+import { toObservable } from '@angular/core/rxjs-interop';
+import { IndexTemplateStore, IndexTemplate } from '@ng-atomic/components/templates/_index';
+import { InjectableComponent, createAction, applyToInput, provideEffect, computeFake, _computed, TokenizedType, NgAtomicComponent, updateInput, Effect } from '@ng-atomic/core';
+import { EditingStateManager } from '@ng-atomic/common';
+import { AppService } from '@xxmachina/components/services/app';
+import { buildColumns, TableOrganism, injectIndexFormBuilder } from '@ng-atomic/components/organisms/table';
 import { FormGroup, FormBuilder } from '@angular/forms';
-import { distinctUntilChanged, debounceTime } from 'rxjs';
-import { injectUnflattenRouteParam, injectHasNext, injectRouteData, getRawValue$ } from '@ng-atomic/common/utils';
+import { injectUnflattenRouteParam, injectHasNext, injectRouteData, injectNavigationExtras, getValue$, getRawValue$, injectRouteSkip } from '@ng-atomic/common/utils';
 import { ActivatedRoute } from '@angular/router';
-import { RouterOutletFrame } from '@ng-atomic/components/frames/router-outlet';
+import { RouterOutletFrameStore, RouterOutletFrame } from '@ng-atomic/components/frames/router-outlet';
 import { CommandService } from '@xxmachina/components/services/command';
 import { FlatTreeControl } from '@angular/cdk/tree';
 import { Query, QueryHelper } from '@xxmachina/common/domain/models';
 import { injectOne } from '@ng-atomic/common/stores/entities';
-import { makeConfig, injectNavStartActionsV2 } from '@ng-atomic/common/services/ui';
-import { flatten } from 'flat';
+import { makeDI, injectNavStartActionsV2 } from '@ng-atomic/common/services/ui';
 import { makeInitializerConfig } from '@ng-atomic/common/services/initializer';
-import { derivedAsync } from 'ngxtension/derived-async';
 import { NgAtomicFormSectionBuilder } from '@ng-atomic/components/templates/form';
-import { merge, omitBy, isEqual } from 'lodash-es';
-import { QueryFeature } from '@xxmachina/components/features/query';
+import { QueryFeature, QueryGraphqlVariablesFormFeature } from '@xxmachina/components/features/query';
 import { QueryService } from '@xxmachina/components/services/query';
-import { NgAtomicColumnMoleculeStore } from '@ng-atomic/common/directives/molecules/column';
 import { QueryFormGroup } from '@xxmachina/components/groups/query-form';
+import { flatten } from 'flat';
+import { derivedAsync } from 'ngxtension/derived-async';
+import { omitBy, merge, isEqual } from 'lodash-es';
+import { ValueCellAtomStore } from '@ng-atomic/components/atoms/value-cell';
+import { MachinaDevService } from '@xxmachina/components/services/debug';
 
 var QueryPageStore_1;
 var ActionId;
@@ -32,6 +33,8 @@ var ActionId;
     ActionId["NAVIGATE_TO_IFRAME"] = "NAVIGATE TO IFRAME";
     ActionId["TOGGLE_PAGE"] = "\u5168\u4F53\u8868\u793A";
     ActionId["TOGGLE_VARIABLES_FORM"] = "\u5909\u6570\u30D5\u30A9\u30FC\u30E0\u306E\u8868\u793A\u5207\u66FF";
+    ActionId["ADD"] = "\u8FFD\u52A0";
+    ActionId["DETAIL"] = "\u8A73\u7D30";
 })(ActionId || (ActionId = {}));
 function buildItemsMap(itemsResult = {}, itemsLengthResult = {}) {
     return Object.entries(itemsResult).reduce((acc, [key, items]) => ({
@@ -42,6 +45,30 @@ function buildItemsMap(itemsResult = {}, itemsLengthResult = {}) {
         }
     }), {});
 }
+function buildItemsMapFromResult(result = {}) {
+    console.debug('[DEBUG] result:', result);
+    const data = omitBy(result, (_, key) => key.startsWith('_'));
+    if (Array.isArray(data)) {
+        return buildItemsMap({ default: data });
+    }
+    else if (data && typeof data === 'object' && 'items' in data) {
+        const itemsMap = buildItemsMap({ default: data.items }, { default: data?.itemsLength });
+        return itemsMap;
+    }
+    else {
+        const itemsResult = {};
+        const itemsLengthResult = {};
+        Object.entries(data).forEach(([key, value]) => {
+            if (key.endsWith('Length')) {
+                itemsLengthResult[key.replace('Length', '')] = value;
+            }
+            else {
+                itemsResult[key] = value;
+            }
+        });
+        return buildItemsMap(itemsResult, itemsLengthResult);
+    }
+}
 class QueryActionReducer {
     constructor() {
         this.action = signal(null);
@@ -50,53 +77,76 @@ class QueryActionReducer {
     dispatch(action) {
         this.action.set(action);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryActionReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryActionReducer, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: QueryActionReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: QueryActionReducer, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryActionReducer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: QueryActionReducer, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
 let QueryPageStore = class QueryPageStore extends InjectableComponent {
     static { QueryPageStore_1 = this; }
     static { this.ActionId = ActionId; }
-    static { this.Config = makeConfig(() => {
+    static { this.DI = makeDI(QueryPageStore_1, () => {
         return () => ({
+            type: 'table',
             style: {
                 width: 'var(--page-width-lv2)',
             },
+            title: null,
             titleEditable: true,
-            childrenKey: null,
+            childrenKey: 'children',
+            additionalNavEndActions: [],
             navEndActions: [],
             additionalColumns: (items) => [],
+            itemActions: (item => [{ id: QueryPageStore_1.ActionId.DETAIL, icon: 'open_in_new', name: '詳細', payload: item }]),
+            pageSizeOptions: [50, 100, 300, 500, 1000],
         });
     }, ['@xxmachina/components', 'pages', 'query']); }
+    /** @deprecated use `QueryPageStore.DI.provideInitializer` instead */
     static { this.Initializer = makeInitializerConfig(QueryPageStore_1); }
     static provideDefault() {
         return [
-            QueryPageStore_1.Config.provide(),
+            QueryPageStore_1.DI.provideConfig(),
             QueryPageStore_1.provideDefaultInitializes(),
             QueryPageStore_1.provideDefaultEffects(),
+            QueryPageStore_1.provideDebugStyleInitializer(),
+            QueryFeature.provideDefault(),
         ];
     }
-    static provideForCustomPage() {
+    static provideCustom() {
         return [
-            QueryPageStore_1.provideDefault(),
+            QueryPageStore_1.DI.provideConfig(),
+            QueryPageStore_1.provideDefaultInitializes(),
+            QueryPageStore_1.provideDefaultEffects(),
+            QueryPageStore_1.provideDebugStyleInitializer(),
             QueryPageStore_1.provideNonEditableConfig(),
             QueryPageStore_1.provideQueryFromRouteDataQueryIdInitializer(),
             QueryPageStore_1.provideAutoTogglePageInitializer(),
-            QueryPageStore_1.provideItemActionsFromRouteDataInitializer(),
+            QueryFeature.provideDefault(),
+        ];
+    }
+    static provideDefaultV2() {
+        return [
+            QueryPageStore_1.provideCustom(),
+            QueryPageStore_1.DI.Config.provide(() => config => ({ ...config })),
+            QueryPageStore_1.provideTitleFromQueryResultInitializer(),
+            QueryPageStore_1.provideQueryFromRouteDataInitializer(),
+            QueryPageStore_1.providePaginationInitializer(),
         ];
     }
+    /** @deprecated use `provideCustom` instead */
+    static provideForCustomPage() {
+        return this.provideCustom();
+    }
     static provideNonEditableConfig() {
-        return QueryPageStore_1.Config.provide(() => {
+        return QueryPageStore_1.DI.provideConfig(() => {
             return config => ({
                 ...config,
                 titleEditable: false,
                 style: {
                     ...config.style,
-                    width: `var(--page-width-lv3)`,
-                    '--first-content-height': '0px'
+                    width: `var(--page-width-lv3)`
                 },
             });
         });
@@ -109,7 +159,7 @@ let QueryPageStore = class QueryPageStore extends InjectableComponent {
     }
     static provideNavEndActionsInitializers() {
         return [
-            QueryPageStore_1.Initializer.provide((store) => {
+            QueryPageStore_1.DI.provideInitializer((store) => {
                 effect(() => {
                     const icon = store.style()?.width === 'var(--page-width-lv3)' ? 'close_fullscreen' : 'open_in_full';
                     const navEndActions = [
@@ -125,7 +175,7 @@ let QueryPageStore = class QueryPageStore extends InjectableComponent {
     }
     static provideVariablesFromRouteParamDataInitializer() {
         return [
-            QueryPageStore_1.Initializer.provide(store => {
+            QueryPageStore_1.DI.provideInitializer(store => {
                 const data = injectUnflattenRouteParam('data');
                 effect(() => {
                     const variables = store.variablesFormValue();
@@ -139,22 +189,43 @@ let QueryPageStore = class QueryPageStore extends InjectableComponent {
             }),
         ];
     }
+    static provideVariablesFromRouteParamInitializer() {
+        return [
+            QueryPageStore_1.DI.provideInitializer(store => {
+                const data = injectUnflattenRouteParam();
+                effect(() => {
+                    const variables = store.variablesFormValue();
+                    const merged = merge(variables, data());
+                    store.feature.form.patchValue({
+                        graphql: {
+                            variablesJson: JSON.stringify(merged, null, 2),
+                        }
+                    });
+                });
+            }),
+        ];
+    }
     static provideAutoTogglePageInitializer() {
         return [
-            QueryPageStore_1.Initializer.provide((store) => {
+            provideEffect(RouterOutletFrameStore.ActionId.DEACTIVATED, () => {
+                const store = inject(QueryPageStore_1);
+                const style = computeFake(store.style());
+                return () => {
+                    applyToInput(store, 'style', { ...style, paddingLeft: `0` });
+                };
+            }),
+            QueryPageStore_1.DI.provideInitializer((store) => {
                 const hasNext = injectHasNext();
-                let style = store.style();
-                effect(() => style = store.style());
-                store.routerOutletFrameEvent.pipe(distinctUntilChanged(), debounceTime(2)).subscribe((event) => {
-                    if (event === 'deactivated') {
-                        const _style = computeFake(style);
-                        applyToInput(store, 'style', { ..._style, 'padding-left': 0 });
-                    }
-                });
+                const style = computeFake(store.style());
                 effect(() => {
                     if (hasNext()) {
                         setTimeout(() => {
-                            applyToInput(store, 'style', { ...style, 'padding-left': 'var(--page-width-lv1)' });
+                            if (style.width === 'var(--page-width-lv3)') {
+                                applyToInput(store, 'style', {
+                                    ...style,
+                                    paddingLeft: 'var(--page-width-lv1)',
+                                });
+                            }
                         }, 300);
                     }
                 });
@@ -163,7 +234,7 @@ let QueryPageStore = class QueryPageStore extends InjectableComponent {
     }
     static provideVariablesFormValueFromMatrixParamsInitializer() {
         return [
-            QueryPageStore_1.Initializer.provide((store) => {
+            QueryPageStore_1.DI.provideInitializer((store) => {
                 const data = injectUnflattenRouteParam('data');
                 effect(() => {
                     store.variablesForm()?.patchValue({ ...data() });
@@ -173,7 +244,7 @@ let QueryPageStore = class QueryPageStore extends InjectableComponent {
     }
     static provideQueryFromRouteDataQueryIdInitializer(key = 'queryId') {
         return [
-            QueryPageStore_1.Initializer.provide((store) => {
+            QueryPageStore_1.DI.provideInitializer((store) => {
                 const query = injectOne(Query, { id: injectRouteData(key) });
                 const _query = computed(() => {
                     return query();
@@ -185,8 +256,16 @@ let QueryPageStore = class QueryPageStore extends InjectableComponent {
             }),
         ];
     }
+    static provideQueryFromRouteDataInitializer(key = 'query') {
+        return [
+            QueryPageStore_1.DI.provideInitializer((store) => {
+                const query = injectRouteData(key);
+                effect(() => applyToInput(store, 'query', query()));
+            }),
+        ];
+    }
     static provideItemActionsFromRouteDataInitializer(key = 'itemActionsCommandIds') {
-        return QueryPageStore_1.Initializer.provide((store) => {
+        return QueryPageStore_1.DI.provideInitializer((store) => {
             const idOrObjectArray = injectRouteData(key);
             const service = inject(CommandService);
             const itemActions = (item) => {
@@ -203,7 +282,7 @@ let QueryPageStore = class QueryPageStore extends InjectableComponent {
         });
     }
     static provideNavEndActionsFromRouteDataInitializer(key = 'navEndActionsCommandIds') {
-        return QueryPageStore_1.Initializer.provide((store) => {
+        return QueryPageStore_1.DI.provideInitializer((store) => {
             const ids = injectRouteData(key);
             const queryId = injectRouteData('navEndActionsCommandQueryId');
             const service = inject(CommandService);
@@ -225,27 +304,38 @@ let QueryPageStore = class QueryPageStore extends InjectableComponent {
     }
     static provideDefaultEffects() {
         return [
-            QueryPageStore_1.provideCommandNavigateEffect(),
+            QueryPageStore_1.provideCommandEffects(),
             QueryPageStore_1.provideNavModeToggleEffect(),
             QueryPageStore_1.provideChangeWidthEffect(),
             QueryFeature.provideDefaultEffects(),
+            QueryPageStore_1.provideNavigateEffects(),
+            QueryPageStore_1.provideEditingStateEffects(),
         ];
     }
-    static provideCommandNavigateEffect() {
+    static provideEditingStateEffects() {
         return [
-            provideEffect(CommandService.ActionId.NAVIGATE_TO_COMMAND_PAGE, () => {
-                const app = inject(AppService);
-                const route = inject(ActivatedRoute);
-                const hasNext = injectHasNext();
+            provideEffect(ValueCellAtomStore.ActionId.START_EDIT, () => {
+                const editingStateManager = inject(EditingStateManager);
                 return (payload) => {
-                    const flat = flatten({ data: { id: payload.body?.id }, queryId: payload?.options?.queryId });
-                    const _flat = omitBy(flat, (value) => value === undefined);
-                    app.router.navigate(['commands', { skip: true }, payload.command.id, _flat], {
-                        relativeTo: route,
-                        replaceUrl: hasNext(),
-                    });
+                    editingStateManager.startEditing(payload.rowId, payload.columnId);
+                };
+            }),
+            provideEffect(ValueCellAtomStore.ActionId.END_EDIT, () => {
+                const editingStateManager = inject(EditingStateManager);
+                return (payload) => {
+                    setTimeout(() => editingStateManager.stopEditing(payload.rowId, payload.columnId), 0);
                 };
             }),
+        ];
+    }
+    static provideCommandEffects() {
+        return [
+            QueryPageStore_1.provideCommandExecuteEffect(),
+            QueryPageStore_1.provideCommandNavigateEffect(),
+        ];
+    }
+    static provideCommandExecuteEffect() {
+        return [
             provideEffect(CommandService.ActionId.EXECUTE_COMMAND, () => {
                 const commandService = inject(CommandService);
                 return async (payload) => {
@@ -269,41 +359,231 @@ let QueryPageStore = class QueryPageStore extends InjectableComponent {
             }),
         ];
     }
+    static provideCommandNavigateEffect() {
+        return [
+            provideEffect(CommandService.ActionId.NAVIGATE_TO_COMMAND_PAGE, () => {
+                const app = inject(AppService);
+                const route = inject(ActivatedRoute);
+                const hasNext = injectHasNext();
+                return (payload) => {
+                    const flat = flatten({ data: { id: payload.body?.id }, queryId: payload?.options?.queryId });
+                    const _flat = omitBy(flat, (value) => value === undefined);
+                    app.router.navigate(['commands', { skip: true }, payload.command.id, _flat], {
+                        relativeTo: route,
+                        replaceUrl: hasNext(),
+                    });
+                };
+            }),
+        ];
+    }
     static provideNavModeToggleEffect() {
         return provideEffect(ActionId.TOGGLE_VARIABLES_FORM, () => {
             const store = inject(QueryPageStore_1);
             return () => {
                 store.navMode.set(store.navMode() === 'collapsed' ? 'expanded' : 'collapsed');
             };
+        }, { scopes: ['root', 'host'] });
+    }
+    static provideNavEndActionsInitializer() {
+        return QueryPageStore_1.DI.provideInitializer((store) => {
+            const navEndActions = computed(() => [
+                store.variablesFormDisplayed() ? {
+                    id: ActionId.TOGGLE_VARIABLES_FORM,
+                    icon: store.navMode() === 'collapsed' ? 'expand_less' : 'expand_more'
+                } : null,
+            ].filter(Boolean));
+            effect(() => applyToInput(store, 'navEndActions', [
+                ...navEndActions(),
+                ...store.additionalNavEndActions()
+            ]));
         });
     }
     static provideChangeWidthEffect() {
-        return provideEffect(NgAtomicColumnMoleculeStore._ActionId.CHANGE_WIDTH, () => {
-            return (payload) => {
+        return [
+            provideEffect(IndexTemplateStore.ActionId.TABLE_COLUMN_WIDTH_CHANGE, () => {
                 const store = inject(QueryPageStore_1);
-                const columns = store.form().value.columns;
-                const name = columns.ids[payload.index];
-                const column = columns.map[name];
-                store.form().patchValue({
-                    columns: { ...columns, map: { ...columns.map, [name]: { ...column, width: payload.width } } }
+                return (payload) => {
+                    const form = store.itemsMap()?.[payload.key]?.form || store.form();
+                    form.patchValue({ columns: { map: { [payload.columnName]: { width: payload.width } } } });
+                };
+            }),
+        ];
+    }
+    static provideNavigateEffects() {
+        return [
+            provideEffect(QueryPageStore_1.ActionId.ADD, () => {
+                const app = inject(AppService);
+                const extras = injectNavigationExtras();
+                return (item) => app.router.navigate(['new'], extras());
+            }),
+            provideEffect(QueryPageStore_1.ActionId.DETAIL, () => {
+                const app = inject(AppService);
+                const extras = injectNavigationExtras();
+                return (item) => app.router.navigate([item.id], extras());
+            }),
+        ];
+    }
+    static providePaginationInitializer() {
+        return [
+            QueryPageStore_1.DI.provideInitializer((store) => {
+                effect(() => {
+                    const columns = store.columnNames();
+                    const sticky = store.sticky();
+                    const current = untracked(() => store.form())?.value;
+                    const form = store.indexFormBuilder.build({
+                        columns: buildColumns([...columns, '__actions'], sticky),
+                        page: {
+                            size: current?.page?.size ?? 100,
+                            index: current?.page?.index ?? 0,
+                        }
+                    });
+                    applyToInput(store, 'form', form);
+                });
+            }),
+            QueryPageStore_1.DI.provideInitializer((store) => {
+                const page = derivedAsync(() => getValue$(store.form().get(['page'])), {
+                    initialValue: { index: 0, size: 100 }
+                });
+                const pagination = computed(() => {
+                    const _page = page() || { index: 0, size: 100 };
+                    return {
+                        offset: _page.index * _page.size,
+                        limit: _page.size,
+                    };
                 });
+                effect(() => {
+                    const _pagination = pagination();
+                    store.variablesForm()?.patchValue(_pagination);
+                });
+            }),
+        ];
+    }
+    static provideTableCellValueChangeEffect(handlerFactory, optionsOrColumns) {
+        return provideEffect(ValueCellAtomStore.ActionId.UPDATE_VALUE, (injector) => {
+            // 後方互換性のためのオプション正規化
+            const normalizedOptions = Array.isArray(optionsOrColumns)
+                ? { columns: optionsOrColumns }
+                : (optionsOrColumns || {});
+            // デフォルトの比較関数
+            const defaultEquals = (current, next) => current === next;
+            const equalsFn = normalizedOptions.equals || defaultEquals;
+            const handler = handlerFactory(injector);
+            return (action) => {
+                const { context, next, current, setValue } = action;
+                const name = context.name;
+                // フィールドフィルタリング
+                if (normalizedOptions.columns && normalizedOptions.columns.length > 0 && !normalizedOptions.columns.includes(name)) {
+                    return;
+                }
+                // 値の比較
+                if (equalsFn(current, next, name)) {
+                    // 値が同じ場合は処理をスキップ
+                    return;
+                }
+                // TableCellValueChangeオブジェクトの作成
+                const change = {
+                    item: context.item,
+                    name: name,
+                    current: current,
+                    next: next,
+                    rowIndex: context.position?.row ?? 0,
+                    columnId: context.name
+                };
+                // ハンドラーの実行
+                handler(change, setValue);
+            };
+        });
+    }
+    static provideTableAutofillEffect(handlerFactory) {
+        return provideEffect(TableOrganism.ActionId.AUTOFILL_COMPLETE, (injector) => {
+            const handler = handlerFactory(injector);
+            const store = inject(QueryPageStore_1);
+            return async (payload) => {
+                // TableOrganismから渡されたコンテキスト情報を使用
+                if (!payload.contexts) {
+                    console.warn('No autofill contexts provided');
+                    return;
+                }
+                const { sourceContext, targetContexts } = payload.contexts;
+                const sourceItem = sourceContext.item;
+                const columnName = sourceContext.name;
+                const sourceValue = sourceItem[columnName];
+                // 影響を受けるアイテムを収集（表示されているセルのみ）
+                const affectedItems = [];
+                targetContexts.forEach(({ position, context }, index) => {
+                    const targetItem = context.item;
+                    // 値の生成
+                    let newValue = sourceValue;
+                    // 数値の連番
+                    if (typeof sourceValue === 'number') {
+                        newValue = sourceValue + index + 1;
+                    }
+                    // 文字列パターン
+                    else if (typeof sourceValue === 'string') {
+                        const dateMatch = sourceValue.match(/^(\d{4}-\d{2}-\d{2})$/);
+                        if (dateMatch) {
+                            const sourceDate = new Date(dateMatch[1]);
+                            const newDate = new Date(sourceDate);
+                            newDate.setDate(sourceDate.getDate() + index + 1);
+                            newValue = newDate.toISOString().split('T')[0];
+                        }
+                    }
+                    affectedItems.push({
+                        item: targetItem,
+                        newValue,
+                        rowIndex: position.row
+                    });
+                });
+                // オートフィルの変更情報を作成
+                const autofillChange = {
+                    sourceItem,
+                    sourceValue,
+                    columnName,
+                    columnIndex: payload.sourcePosition.col,
+                    affectedItems,
+                    range: payload.targetRange
+                };
+                // ハンドラーを実行
+                await handler(autofillChange);
             };
         });
     }
+    static provideDebugStyleInitializer() {
+        return [
+            QueryPageStore_1.DI.provideInitializer((store) => {
+                const debug = inject(MachinaDevService);
+                const el = inject(ElementRef);
+                effect(() => el.nativeElement.style.setProperty('--is-debug', debug.isDevMode() ? '1' : '0'));
+            }),
+        ];
+    }
+    static provideTitleFromQueryResultInitializer() {
+        return [
+            QueryPageStore_1.DI.provideInitializer((store) => {
+                effect(() => applyToInput(store, 'title', store.feature.result()?.__meta__?.title));
+            }),
+        ];
+    }
+    #navStartActions;
     constructor() {
         super();
         this.app = inject(AppService);
-        this.config = QueryPageStore_1.Config.inject();
+        this.config = QueryPageStore_1.DI.injectConfig();
         this.feature = inject(QueryFeature);
+        this.variablesFormFeature = inject(QueryGraphqlVariablesFormFeature);
         this.indexFormBuilder = injectIndexFormBuilder();
         this.navMode = signal('collapsed');
+        this.editingStateManager = inject(EditingStateManager);
         this.style = input(_computed(() => this.config().style));
         this.query = input(null);
-        this.navStartActions = injectNavStartActionsV2();
+        this.#navStartActions = injectNavStartActionsV2();
+        this.navStartActions = input(_computed(() => this.#navStartActions()));
+        this.additionalNavEndActions = input(_computed(() => this.config().additionalNavEndActions));
         this.navEndActions = input(_computed(() => this.config().navEndActions));
-        this.title = input(_computed(() => this.query()?.title));
+        this.type = input(_computed(() => this.config().type));
+        this.title = input(_computed(() => this.config().title ?? this.query()?.title));
         this.titleEditable = input(_computed(() => this.config().titleEditable));
-        this.itemsMap = input(_computed(() => buildItemsMap(this.feature.result() ?? {})));
+        this.itemsMap = input(_computed(() => buildItemsMapFromResult(this.feature.result())));
         this.items = computed(() => this.itemsMap()[Object.keys(this.itemsMap())[0]]?.items ?? []);
         this.itemsLength = input(_computed(() => this.itemsMap()[Object.keys(this.itemsMap())[0]]?.itemsLength ?? 0));
         this.childrenKey = input(_computed(() => this.config().childrenKey));
@@ -315,31 +595,28 @@ let QueryPageStore = class QueryPageStore extends InjectableComponent {
         this.form = input(_computed(() => this.indexFormBuilder.build({
             columns: buildColumns([...this.columnNames(), '__actions'], this.sticky()),
         })));
-        this.itemActions = input((item) => []);
-        this.tableTreeControl = new FlatTreeControl(n => n.level, n => n.isExpandable, { trackBy: (n) => n.id });
-        this.variablesForm = input(_computed(() => this.feature.variablesForm() ?? new FormGroup({})));
+        this.itemActions = input(_computed(() => this.config().itemActions));
+        this.tableTreeControl = new FlatTreeControl(n => n.level, n => n.isExpandable, { trackBy: (n) => n?.id ?? n });
+        this.variablesForm = input(_computed(() => this.variablesFormFeature.variablesForm() ?? new FormGroup({})));
         this.variablesFormFieldMap = input(_computed(() => ({})));
         this.variablesFormValue = derivedAsync(() => getRawValue$(this.variablesForm()), { equal: isEqual });
         this.variablesFormValue$ = toObservable(this.variablesFormValue);
-        this.variablesFormDisplayed = input(_computed(() => Object.keys(this.feature.variablesValue())?.length > 0));
-        this.routerOutletFrameEvent = new EventEmitter();
+        this.variablesFormDisplayed = input(_computed(() => Object.keys(this.variablesFormFeature.variablesValue())?.length > 0));
         this.tableColumnFormFieldMap = input(_computed(() => ({})));
-        QueryPageStore_1.Initializer.initializeStore(this);
-        effect(() => {
-            this.feature.form.patchValue(this.query());
-        });
-        this.variablesFormValue$.pipe(takeUntilDestroyed()).subscribe((value) => {
-            this.feature.variablesFormValue$.next(value);
-        });
+        this.getRowClass = input(_computed(() => () => ''));
+        this.skip = injectRouteSkip();
+        this.pageSizeOptions = input(_computed(() => this.config().pageSizeOptions));
+        QueryPageStore_1.DI.initialize(this);
+        effect(() => this.feature.form.patchValue(this.query()));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryPageStore, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: QueryPageStore, isStandalone: true, inputs: { style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, navEndActions: { classPropertyName: "navEndActions", publicName: "navEndActions", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleEditable: { classPropertyName: "titleEditable", publicName: "titleEditable", isSignal: true, isRequired: false, transformFunction: null }, itemsMap: { classPropertyName: "itemsMap", publicName: "itemsMap", isSignal: true, isRequired: false, transformFunction: null }, itemsLength: { classPropertyName: "itemsLength", publicName: "itemsLength", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null }, additionalColumns: { classPropertyName: "additionalColumns", publicName: "additionalColumns", isSignal: true, isRequired: false, transformFunction: null }, additionalColumnNames: { classPropertyName: "additionalColumnNames", publicName: "additionalColumnNames", isSignal: true, isRequired: false, transformFunction: null }, extractedColumnNames: { classPropertyName: "extractedColumnNames", publicName: "extractedColumnNames", isSignal: true, isRequired: false, transformFunction: null }, columnNames: { classPropertyName: "columnNames", publicName: "columnNames", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, itemActions: { classPropertyName: "itemActions", publicName: "itemActions", isSignal: true, isRequired: false, transformFunction: null }, variablesForm: { classPropertyName: "variablesForm", publicName: "variablesForm", isSignal: true, isRequired: false, transformFunction: null }, variablesFormFieldMap: { classPropertyName: "variablesFormFieldMap", publicName: "variablesFormFieldMap", isSignal: true, isRequired: false, transformFunction: null }, variablesFormDisplayed: { classPropertyName: "variablesFormDisplayed", publicName: "variablesFormDisplayed", isSignal: true, isRequired: false, transformFunction: null }, tableColumnFormFieldMap: { classPropertyName: "tableColumnFormFieldMap", publicName: "tableColumnFormFieldMap", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: QueryPageStore, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.5", type: QueryPageStore, isStandalone: true, inputs: { style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, query: { classPropertyName: "query", publicName: "query", isSignal: true, isRequired: false, transformFunction: null }, navStartActions: { classPropertyName: "navStartActions", publicName: "navStartActions", isSignal: true, isRequired: false, transformFunction: null }, additionalNavEndActions: { classPropertyName: "additionalNavEndActions", publicName: "additionalNavEndActions", isSignal: true, isRequired: false, transformFunction: null }, navEndActions: { classPropertyName: "navEndActions", publicName: "navEndActions", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, titleEditable: { classPropertyName: "titleEditable", publicName: "titleEditable", isSignal: true, isRequired: false, transformFunction: null }, itemsMap: { classPropertyName: "itemsMap", publicName: "itemsMap", isSignal: true, isRequired: false, transformFunction: null }, itemsLength: { classPropertyName: "itemsLength", publicName: "itemsLength", isSignal: true, isRequired: false, transformFunction: null }, childrenKey: { classPropertyName: "childrenKey", publicName: "childrenKey", isSignal: true, isRequired: false, transformFunction: null }, additionalColumns: { classPropertyName: "additionalColumns", publicName: "additionalColumns", isSignal: true, isRequired: false, transformFunction: null }, additionalColumnNames: { classPropertyName: "additionalColumnNames", publicName: "additionalColumnNames", isSignal: true, isRequired: false, transformFunction: null }, extractedColumnNames: { classPropertyName: "extractedColumnNames", publicName: "extractedColumnNames", isSignal: true, isRequired: false, transformFunction: null }, columnNames: { classPropertyName: "columnNames", publicName: "columnNames", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, itemActions: { classPropertyName: "itemActions", publicName: "itemActions", isSignal: true, isRequired: false, transformFunction: null }, variablesForm: { classPropertyName: "variablesForm", publicName: "variablesForm", isSignal: true, isRequired: false, transformFunction: null }, variablesFormFieldMap: { classPropertyName: "variablesFormFieldMap", publicName: "variablesFormFieldMap", isSignal: true, isRequired: false, transformFunction: null }, variablesFormDisplayed: { classPropertyName: "variablesFormDisplayed", publicName: "variablesFormDisplayed", isSignal: true, isRequired: false, transformFunction: null }, tableColumnFormFieldMap: { classPropertyName: "tableColumnFormFieldMap", publicName: "tableColumnFormFieldMap", isSignal: true, isRequired: false, transformFunction: null }, getRowClass: { classPropertyName: "getRowClass", publicName: "getRowClass", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 };
 QueryPageStore = QueryPageStore_1 = __decorate([
     TokenizedType(),
     __metadata("design:paramtypes", [])
 ], QueryPageStore);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryPageStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: QueryPageStore, decorators: [{
             type: Directive,
             args: [{ standalone: true }]
         }], ctorParameters: () => [] });
@@ -352,8 +629,15 @@ class QueryPage extends NgAtomicComponent {
         this.store = inject(QueryPageStore);
         this.reducer = inject(QueryActionReducer);
         this.query = inject(QueryService);
+        this.feature = inject(QueryFeature);
         this.template = viewChild(IndexTemplate);
+        this.title = input('default title');
         this.reducer.action$.subscribe((action) => this.dispatch(action));
+        const context = computed(() => ({
+            query: this.feature.formValue(),
+            // schema: this.feature.graphqlSchema(),
+        }));
+        effect(() => this.app.context.context.set(JSON.stringify(context())));
     }
     async back() {
         history.back();
@@ -369,25 +653,30 @@ class QueryPage extends NgAtomicComponent {
             width: style?.width === 'var(--page-width-lv3)' ? 'var(--page-width-lv2)' : 'var(--page-width-lv3)',
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.4", type: QueryPage, isStandalone: true, selector: "pages-query", viewQueries: [{ propertyName: "template", first: true, predicate: IndexTemplate, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: QueryPageStore, inputs: ["query", "query", "titleEditable", "titleEditable", "variablesForm", "variablesForm", "variablesFormFieldMap", "variablesFormFieldMap"] }], ngImport: i0, template: `
-    <frames-router-outlet (events)="store.routerOutletFrameEvent.emit($event)">
+    itemClick(item) {
+        this.dispatch({ id: ActionId.DETAIL, payload: item });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: QueryPage, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.5", type: QueryPage, isStandalone: true, selector: "pages-query", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "template", first: true, predicate: IndexTemplate, descendants: true, isSignal: true }], usesInheritance: true, hostDirectives: [{ directive: QueryPageStore, inputs: ["type", "type", "query", "query", "titleEditable", "titleEditable", "variablesForm", "variablesForm", "variablesFormFieldMap", "variablesFormFieldMap", "navStartActions", "navStartActions", "navEndActions", "navEndActions", "itemActions", "itemActions", "pageSizeOptions", "pageSizeOptions"] }], ngImport: i0, template: `
+    <frames-router-outlet [skip]="store.skip()" (action)="dispatch($event)">
       <templates-index
         [tableColumnFormFieldMap]="store.tableColumnFormFieldMap()"
         [style]="store.style()"
         [title]="store.title()"
         [titleControl]="store.feature.form.get(['title'])"
         [titleEditable]="store.titleEditable()"
-        [type]="'table'"
+        [type]="store.type()"
         [tableChildrenKey]="store.childrenKey()"
         [tableTreeControl]="store.tableTreeControl"
         [itemsMap]="store.itemsMap()"
         [itemsLength]="store.itemsLength()"
         [itemActions]="store.itemActions()"
+        [getRowClass]="store.getRowClass()"
         [form]="store.form()"
         [navStartActions]="store.navStartActions()"
         [navEndActions]="store.navEndActions()"
         [navMode]="store.navMode()"
+        [pageSizeOptions]="store.pageSizeOptions()"
         (action)="dispatch($event)"
       >
         @if (store.variablesFormDisplayed()) {
@@ -401,7 +690,7 @@ class QueryPage extends NgAtomicComponent {
         <groups-query-form dashboard (action)="dispatch($event)" />
       </templates-index>
     </frames-router-outlet>
-  `, isInline: true, styles: ["@charset \"UTF-8\";:host{width:100%;height:100%;display:block;--page-width-lv1-SCOPED-IN-query-G3aW: var(--page-width-lv1)}:host templates-index{--first-content-height: 300px;padding-left:0;box-sizing:border-box;transition:padding-left .3s}:host templates-index div[navDashboard]{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:16px;box-sizing:border-box}:host templates-index div[navDashboard] ng-atomic-form-section-builder{--horizontal-padding: 0}\n"], dependencies: [{ kind: "component", type: IndexTemplate, selector: "templates-index" }, { kind: "component", type: RouterOutletFrame, selector: "frames-router-outlet", outputs: ["events"] }, { kind: "component", type: NgAtomicFormSectionBuilder, selector: "ng-atomic-form-section-builder", inputs: ["form", "formFlatExcludes", "fieldMap"] }, { kind: "component", type: QueryFormGroup, selector: "groups-query-form", inputs: ["keyActions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, styles: ["@charset \"UTF-8\";:host{width:100%;height:100%;display:block;--page-width-lv1-SCOPED-IN-query-mVNl: var(--page-width-lv1);--page-width-lv3-SCOPED-IN-query-mVNl: var(--page-width-lv3);--primary-color-SCOPED-IN-query-mVNl: var(--primary-color);--on-primary-color-SCOPED-IN-query-mVNl: var(--on-primary-color);--surface-color-SCOPED-IN-query-mVNl: var(--surface-color);--on-surface-color-SCOPED-IN-query-mVNl: var(--on-surface-color);--on-background-color-SCOPED-IN-query-mVNl: var(--on-background-color);--background-color-SCOPED-IN-query-mVNl: var(--background-color);--navigator-background-color-SCOPED-IN-query-mVNl: var(--navigator-background-color);--navigator-on-background-color-SCOPED-IN-query-mVNl: var(--navigator-on-background-color);--table-background-color-SCOPED-IN-query-mVNl: var(--table-background-color);--table-on-background-color-SCOPED-IN-query-mVNl: var(--table-on-background-color);--is-debug: 1;--is-debug-SCOPED-IN-query-mVNl: var(--is-debug)}:host *{--primary-color: var(--primary-color-SCOPED-IN-query-mVNl);--on-primary-color: var(--on-primary-color-SCOPED-IN-query-mVNl);--surface-color: var(--surface-color-SCOPED-IN-query-mVNl);--on-surface-color: var(--on-surface-color-SCOPED-IN-query-mVNl);--background-color: var(--background-color-SCOPED-IN-query-mVNl);--on-background-color: var(--on-background-color-SCOPED-IN-query-mVNl);--navigator-background-color: var(--navigator-background-color-SCOPED-IN-query-mVNl);--navigator-on-background-color: var(--navigator-on-background-color-SCOPED-IN-query-mVNl);--table-background-color: var(--table-background-color-SCOPED-IN-query-mVNl);--table-on-background-color: var(--table-on-background-color-SCOPED-IN-query-mVNl);--is-debug: var(--is-debug-SCOPED-IN-query-mVNl)}:host templates-index{padding-left:0;box-sizing:border-box;--first-content-height: calc(var(--is-debug-SCOPED-IN-query-mVNl) * 300px);transition:padding-left .3s}:host templates-index div[navDashboard]{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:16px;box-sizing:border-box}:host templates-index div[navDashboard] ng-atomic-form-section-builder{--horizontal-padding: 0}\n"], dependencies: [{ kind: "component", type: IndexTemplate, selector: "templates-index" }, { kind: "component", type: RouterOutletFrame, selector: "frames-router-outlet", outputs: ["events"] }, { kind: "component", type: NgAtomicFormSectionBuilder, selector: "ng-atomic-form-section-builder", inputs: ["form", "formFlatExcludes", "fieldMap", "fieldKeys"] }, { kind: "component", type: QueryFormGroup, selector: "groups-query-form", inputs: ["form", "keyActions"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 __decorate([
     Effect(IndexTemplateStore.ActionId.BACK),
@@ -421,7 +710,13 @@ __decorate([
     __metadata("design:paramtypes", []),
     __metadata("design:returntype", Promise)
 ], QueryPage.prototype, "expandPage", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: QueryPage, decorators: [{
+__decorate([
+    Effect(IndexTemplate.ActionId.ITEM_CLICK),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", void 0)
+], QueryPage.prototype, "itemClick", null);
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: QueryPage, decorators: [{
             type: Component,
             args: [{ selector: 'pages-query', imports: [
                         IndexTemplate,
@@ -429,23 +724,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         NgAtomicFormSectionBuilder,
                         QueryFormGroup,
                     ], template: `
-    <frames-router-outlet (events)="store.routerOutletFrameEvent.emit($event)">
+    <frames-router-outlet [skip]="store.skip()" (action)="dispatch($event)">
       <templates-index
         [tableColumnFormFieldMap]="store.tableColumnFormFieldMap()"
         [style]="store.style()"
         [title]="store.title()"
         [titleControl]="store.feature.form.get(['title'])"
         [titleEditable]="store.titleEditable()"
-        [type]="'table'"
+        [type]="store.type()"
         [tableChildrenKey]="store.childrenKey()"
         [tableTreeControl]="store.tableTreeControl"
         [itemsMap]="store.itemsMap()"
         [itemsLength]="store.itemsLength()"
         [itemActions]="store.itemActions()"
+        [getRowClass]="store.getRowClass()"
         [form]="store.form()"
         [navStartActions]="store.navStartActions()"
         [navEndActions]="store.navEndActions()"
         [navMode]="store.navMode()"
+        [pageSizeOptions]="store.pageSizeOptions()"
         (action)="dispatch($event)"
       >
         @if (store.variablesFormDisplayed()) {
@@ -463,18 +760,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         {
                             directive: QueryPageStore,
                             inputs: [
+                                'type',
                                 'query',
                                 'titleEditable',
                                 'variablesForm',
                                 'variablesFormFieldMap',
+                                'navStartActions',
+                                'navEndActions',
+                                'itemActions',
+                                'pageSizeOptions'
                             ]
                         },
-                    ], styles: ["@charset \"UTF-8\";:host{width:100%;height:100%;display:block;--page-width-lv1-SCOPED-IN-query-G3aW: var(--page-width-lv1)}:host templates-index{--first-content-height: 300px;padding-left:0;box-sizing:border-box;transition:padding-left .3s}:host templates-index div[navDashboard]{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:16px;box-sizing:border-box}:host templates-index div[navDashboard] ng-atomic-form-section-builder{--horizontal-padding: 0}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { back: [], navigateToIframe: [], expandPage: [] } });
+                    ], styles: ["@charset \"UTF-8\";:host{width:100%;height:100%;display:block;--page-width-lv1-SCOPED-IN-query-mVNl: var(--page-width-lv1);--page-width-lv3-SCOPED-IN-query-mVNl: var(--page-width-lv3);--primary-color-SCOPED-IN-query-mVNl: var(--primary-color);--on-primary-color-SCOPED-IN-query-mVNl: var(--on-primary-color);--surface-color-SCOPED-IN-query-mVNl: var(--surface-color);--on-surface-color-SCOPED-IN-query-mVNl: var(--on-surface-color);--on-background-color-SCOPED-IN-query-mVNl: var(--on-background-color);--background-color-SCOPED-IN-query-mVNl: var(--background-color);--navigator-background-color-SCOPED-IN-query-mVNl: var(--navigator-background-color);--navigator-on-background-color-SCOPED-IN-query-mVNl: var(--navigator-on-background-color);--table-background-color-SCOPED-IN-query-mVNl: var(--table-background-color);--table-on-background-color-SCOPED-IN-query-mVNl: var(--table-on-background-color);--is-debug: 1;--is-debug-SCOPED-IN-query-mVNl: var(--is-debug)}:host *{--primary-color: var(--primary-color-SCOPED-IN-query-mVNl);--on-primary-color: var(--on-primary-color-SCOPED-IN-query-mVNl);--surface-color: var(--surface-color-SCOPED-IN-query-mVNl);--on-surface-color: var(--on-surface-color-SCOPED-IN-query-mVNl);--background-color: var(--background-color-SCOPED-IN-query-mVNl);--on-background-color: var(--on-background-color-SCOPED-IN-query-mVNl);--navigator-background-color: var(--navigator-background-color-SCOPED-IN-query-mVNl);--navigator-on-background-color: var(--navigator-on-background-color-SCOPED-IN-query-mVNl);--table-background-color: var(--table-background-color-SCOPED-IN-query-mVNl);--table-on-background-color: var(--table-on-background-color-SCOPED-IN-query-mVNl);--is-debug: var(--is-debug-SCOPED-IN-query-mVNl)}:host templates-index{padding-left:0;box-sizing:border-box;--first-content-height: calc(var(--is-debug-SCOPED-IN-query-mVNl) * 300px);transition:padding-left .3s}:host templates-index div[navDashboard]{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:16px;box-sizing:border-box}:host templates-index div[navDashboard] ng-atomic-form-section-builder{--horizontal-padding: 0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { back: [], navigateToIframe: [], expandPage: [], itemClick: [] } });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { ActionId, QueryActionReducer, QueryPage, QueryPageStore, buildItemsMap };
+export { ActionId, QueryActionReducer, QueryPage, QueryPageStore, buildItemsMap, buildItemsMapFromResult };
 //# sourceMappingURL=xxmachina-components-pages-query.mjs.map