@xxmachina/components 0.0.0-PLACEHOLDER

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

@@ -0,0 +1,782 @@
+import { __decorate, __metadata } from 'tslib';
+import * as i0 from '@angular/core';
+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 { injectUnflattenRouteParam, injectHasNext, injectRouteData, injectNavigationExtras, getValue$, getRawValue$, injectRouteSkip } from '@ng-atomic/common/utils';
+import { ActivatedRoute } from '@angular/router';
+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 { makeDI, injectNavStartActionsV2 } from '@ng-atomic/common/services/ui';
+import { makeInitializerConfig } from '@ng-atomic/common/services/initializer';
+import { NgAtomicFormSectionBuilder } from '@ng-atomic/components/templates/form';
+import { QueryFeature, QueryGraphqlVariablesFormFeature } from '@xxmachina/components/features/query';
+import { QueryService } from '@xxmachina/components/services/query';
+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;
+(function (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]) => ({
+        ...acc,
+        [key]: {
+            items,
+            itemsLength: itemsLengthResult[key] ?? items.length,
+        }
+    }), {});
+}
+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);
+        this.action$ = toObservable(this.action);
+    }
+    dispatch(action) {
+        this.action.set(action);
+    }
+    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: "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.DI = makeDI(QueryPageStore_1, () => {
+        return () => ({
+            type: 'table',
+            style: {
+                width: 'var(--page-width-lv2)',
+            },
+            title: null,
+            titleEditable: true,
+            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.DI.provideConfig(),
+            QueryPageStore_1.provideDefaultInitializes(),
+            QueryPageStore_1.provideDefaultEffects(),
+            QueryPageStore_1.provideDebugStyleInitializer(),
+            QueryFeature.provideDefault(),
+        ];
+    }
+    static provideCustom() {
+        return [
+            QueryPageStore_1.DI.provideConfig(),
+            QueryPageStore_1.provideDefaultInitializes(),
+            QueryPageStore_1.provideDefaultEffects(),
+            QueryPageStore_1.provideDebugStyleInitializer(),
+            QueryPageStore_1.provideNonEditableConfig(),
+            QueryPageStore_1.provideQueryFromRouteDataQueryIdInitializer(),
+            QueryPageStore_1.provideAutoTogglePageInitializer(),
+            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.DI.provideConfig(() => {
+            return config => ({
+                ...config,
+                titleEditable: false,
+                style: {
+                    ...config.style,
+                    width: `var(--page-width-lv3)`
+                },
+            });
+        });
+    }
+    static provideDefaultInitializes() {
+        return [
+            QueryPageStore_1.provideAutoTogglePageInitializer(),
+            QueryPageStore_1.provideVariablesFormValueFromMatrixParamsInitializer(),
+        ];
+    }
+    static provideNavEndActionsInitializers() {
+        return [
+            QueryPageStore_1.DI.provideInitializer((store) => {
+                effect(() => {
+                    const icon = store.style()?.width === 'var(--page-width-lv3)' ? 'close_fullscreen' : 'open_in_full';
+                    const navEndActions = [
+                        createAction(QueryFeature.ActionId.クエリの実行, null, { icon: 'play_arrow' }).create(),
+                        store.variablesFormDisplayed() ? createAction(ActionId.TOGGLE_PAGE, null, { icon }).create() : null,
+                        createAction(QueryFeature.ActionId.クエリの更新, null, { icon: 'save' }).create(),
+                    ].filter(Boolean);
+                    applyToInput(store, 'navEndActions', navEndActions);
+                });
+            }),
+            QueryPageStore_1.provideVariablesFromRouteParamDataInitializer(),
+        ];
+    }
+    static provideVariablesFromRouteParamDataInitializer() {
+        return [
+            QueryPageStore_1.DI.provideInitializer(store => {
+                const data = injectUnflattenRouteParam('data');
+                effect(() => {
+                    const variables = store.variablesFormValue();
+                    const merged = merge(variables, data());
+                    store.feature.form.patchValue({
+                        graphql: {
+                            variablesJson: JSON.stringify(merged, null, 2),
+                        }
+                    });
+                });
+            }),
+        ];
+    }
+    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 [
+            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();
+                const style = computeFake(store.style());
+                effect(() => {
+                    if (hasNext()) {
+                        setTimeout(() => {
+                            if (style.width === 'var(--page-width-lv3)') {
+                                applyToInput(store, 'style', {
+                                    ...style,
+                                    paddingLeft: 'var(--page-width-lv1)',
+                                });
+                            }
+                        }, 300);
+                    }
+                });
+            }),
+        ];
+    }
+    static provideVariablesFormValueFromMatrixParamsInitializer() {
+        return [
+            QueryPageStore_1.DI.provideInitializer((store) => {
+                const data = injectUnflattenRouteParam('data');
+                effect(() => {
+                    store.variablesForm()?.patchValue({ ...data() });
+                });
+            }),
+        ];
+    }
+    static provideQueryFromRouteDataQueryIdInitializer(key = 'queryId') {
+        return [
+            QueryPageStore_1.DI.provideInitializer((store) => {
+                const query = injectOne(Query, { id: injectRouteData(key) });
+                const _query = computed(() => {
+                    return query();
+                }, { equal: (pre, cur) => JSON.stringify(pre) === JSON.stringify(cur) });
+                effect(() => {
+                    console.debug('[QueryPageStore] query:', _query());
+                    applyToInput(store, 'query', _query());
+                });
+            }),
+        ];
+    }
+    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.DI.provideInitializer((store) => {
+            const idOrObjectArray = injectRouteData(key);
+            const service = inject(CommandService);
+            const itemActions = (item) => {
+                const params = (idOrObjectArray() ?? []).map((idOrObject) => ({
+                    id: typeof idOrObject === 'string' ? idOrObject : idOrObject.id,
+                    options: typeof idOrObject === 'string' ? {} : idOrObject.options,
+                }));
+                const builder = service.getActionBuilder().setItem(item);
+                const actions = params.map(param => builder.setOptions(param.options).buildAction(param.id));
+                console.debug('actions:', actions);
+                return actions;
+            };
+            applyToInput(store, 'itemActions', itemActions);
+        });
+    }
+    static provideNavEndActionsFromRouteDataInitializer(key = 'navEndActionsCommandIds') {
+        return QueryPageStore_1.DI.provideInitializer((store) => {
+            const ids = injectRouteData(key);
+            const queryId = injectRouteData('navEndActionsCommandQueryId');
+            const service = inject(CommandService);
+            const route = inject(ActivatedRoute);
+            const hasNext = injectHasNext();
+            effect(() => {
+                const actions = service.getActionBuilder().setFilterIds(ids()).setOptions({ queryId: queryId() }).buildActions(undefined, { relativeTo: route, replaceUrl: hasNext() });
+                applyToInput(store, 'navEndActions', [
+                    store.variablesFormDisplayed() ? { id: ActionId.TOGGLE_VARIABLES_FORM, icon: store.navMode() === 'collapsed' ? 'expand_less' : 'expand_more' } : null,
+                    // TODO(@NozomuMiyamoto): 変更
+                    actions?.length ? {
+                        id: 'open_command_menu',
+                        icon: 'more_vert',
+                        children: [...actions],
+                    } : null,
+                ].filter(Boolean));
+            });
+        });
+    }
+    static provideDefaultEffects() {
+        return [
+            QueryPageStore_1.provideCommandEffects(),
+            QueryPageStore_1.provideNavModeToggleEffect(),
+            QueryPageStore_1.provideChangeWidthEffect(),
+            QueryFeature.provideDefaultEffects(),
+            QueryPageStore_1.provideNavigateEffects(),
+            QueryPageStore_1.provideEditingStateEffects(),
+        ];
+    }
+    static provideEditingStateEffects() {
+        return [
+            provideEffect(ValueCellAtomStore.ActionId.START_EDIT, () => {
+                const editingStateManager = inject(EditingStateManager);
+                return (payload) => {
+                    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) => {
+                    const app = inject(AppService);
+                    const obj = omitBy(payload.body, (value) => typeof value === undefined);
+                    const command = inject(CommandService).getCommand(payload.command.id);
+                    console.debug('[QueryPage] payload:', payload);
+                    if (payload.options?.confirm && !(await payload.options?.confirm())) {
+                        app.snackBar.open('キャンセルされました。');
+                        return;
+                    }
+                    app.loading.await(() => {
+                        return commandService.execute(command, obj).then(() => {
+                            app.snackBar.open('成功しました。');
+                        }).catch((error) => {
+                            console.error(error);
+                            app.snackBar.open(`エラー: ${error.message}`);
+                        });
+                    });
+                };
+            }),
+        ];
+    }
+    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(IndexTemplateStore.ActionId.TABLE_COLUMN_WIDTH_CHANGE, () => {
+                const store = inject(QueryPageStore_1);
+                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.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 = input(_computed(() => this.#navStartActions()));
+        this.additionalNavEndActions = input(_computed(() => this.config().additionalNavEndActions));
+        this.navEndActions = input(_computed(() => this.config().navEndActions));
+        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(() => 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));
+        this.additionalColumns = input(_computed(() => this.config().additionalColumns));
+        this.additionalColumnNames = input(_computed(() => this.additionalColumns()(this.items())));
+        this.extractedColumnNames = input(_computed(() => QueryHelper.extractColumnNames(this.items(), this.childrenKey())));
+        this.columnNames = input(_computed(() => [...this.extractedColumnNames(), ...this.additionalColumnNames()]));
+        this.sticky = input(_computed(() => ({ stickyStart: 2, stickyEnd: 1 })));
+        this.form = input(_computed(() => this.indexFormBuilder.build({
+            columns: buildColumns([...this.columnNames(), '__actions'], this.sticky()),
+        })));
+        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.variablesFormFeature.variablesValue())?.length > 0));
+        this.tableColumnFormFieldMap = input(_computed(() => ({})));
+        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: "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: "20.0.5", ngImport: i0, type: QueryPageStore, decorators: [{
+            type: Directive,
+            args: [{ standalone: true }]
+        }], ctorParameters: () => [] });
+class QueryPage extends NgAtomicComponent {
+    constructor() {
+        super();
+        this.fb = inject(FormBuilder);
+        this.route = inject(ActivatedRoute);
+        this.app = inject(AppService);
+        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();
+    }
+    async navigateToIframe(item) {
+        this.app.router.navigate(['invoices', item.id], {
+            relativeTo: this.route,
+        });
+    }
+    async expandPage() {
+        updateInput(this.store, 'style', (style) => ({
+            ...style,
+            width: style?.width === 'var(--page-width-lv3)' ? 'var(--page-width-lv2)' : 'var(--page-width-lv3)',
+        }));
+    }
+    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]="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()) {
+          <div navDashboard>
+            <ng-atomic-form-section-builder
+              [form]="store.variablesForm()"
+              [fieldMap]="store.variablesFormFieldMap()"
+            />
+          </div>
+        }
+        <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-SEA9: var(--page-width-lv1);--page-width-lv3-SCOPED-IN-query-SEA9: var(--page-width-lv3);--primary-color-SCOPED-IN-query-SEA9: var(--primary-color);--on-primary-color-SCOPED-IN-query-SEA9: var(--on-primary-color);--surface-color-SCOPED-IN-query-SEA9: var(--surface-color);--on-surface-color-SCOPED-IN-query-SEA9: var(--on-surface-color);--on-background-color-SCOPED-IN-query-SEA9: var(--on-background-color);--background-color-SCOPED-IN-query-SEA9: var(--background-color);--navigator-background-color-SCOPED-IN-query-SEA9: var(--navigator-background-color);--navigator-on-background-color-SCOPED-IN-query-SEA9: var(--navigator-on-background-color);--table-background-color-SCOPED-IN-query-SEA9: var(--table-background-color);--table-on-background-color-SCOPED-IN-query-SEA9: var(--table-on-background-color);--is-debug: 1;--is-debug-SCOPED-IN-query-SEA9: var(--is-debug)}:host *{--primary-color: var(--primary-color-SCOPED-IN-query-SEA9);--on-primary-color: var(--on-primary-color-SCOPED-IN-query-SEA9);--surface-color: var(--surface-color-SCOPED-IN-query-SEA9);--on-surface-color: var(--on-surface-color-SCOPED-IN-query-SEA9);--background-color: var(--background-color-SCOPED-IN-query-SEA9);--on-background-color: var(--on-background-color-SCOPED-IN-query-SEA9);--navigator-background-color: var(--navigator-background-color-SCOPED-IN-query-SEA9);--navigator-on-background-color: var(--navigator-on-background-color-SCOPED-IN-query-SEA9);--table-background-color: var(--table-background-color-SCOPED-IN-query-SEA9);--table-on-background-color: var(--table-on-background-color-SCOPED-IN-query-SEA9);--is-debug: var(--is-debug-SCOPED-IN-query-SEA9)}:host templates-index{padding-left:0;box-sizing:border-box;--first-content-height: calc(var(--is-debug-SCOPED-IN-query-SEA9) * 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),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Promise)
+], QueryPage.prototype, "back", null);
+__decorate([
+    Effect(ActionId.NAVIGATE_TO_IFRAME),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", [Object]),
+    __metadata("design:returntype", Promise)
+], QueryPage.prototype, "navigateToIframe", null);
+__decorate([
+    Effect(ActionId.TOGGLE_PAGE),
+    __metadata("design:type", Function),
+    __metadata("design:paramtypes", []),
+    __metadata("design:returntype", Promise)
+], QueryPage.prototype, "expandPage", null);
+__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,
+                        RouterOutletFrame,
+                        NgAtomicFormSectionBuilder,
+                        QueryFormGroup,
+                    ], 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]="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()) {
+          <div navDashboard>
+            <ng-atomic-form-section-builder
+              [form]="store.variablesForm()"
+              [fieldMap]="store.variablesFormFieldMap()"
+            />
+          </div>
+        }
+        <groups-query-form dashboard (action)="dispatch($event)" />
+      </templates-index>
+    </frames-router-outlet>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, hostDirectives: [
+                        {
+                            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-SEA9: var(--page-width-lv1);--page-width-lv3-SCOPED-IN-query-SEA9: var(--page-width-lv3);--primary-color-SCOPED-IN-query-SEA9: var(--primary-color);--on-primary-color-SCOPED-IN-query-SEA9: var(--on-primary-color);--surface-color-SCOPED-IN-query-SEA9: var(--surface-color);--on-surface-color-SCOPED-IN-query-SEA9: var(--on-surface-color);--on-background-color-SCOPED-IN-query-SEA9: var(--on-background-color);--background-color-SCOPED-IN-query-SEA9: var(--background-color);--navigator-background-color-SCOPED-IN-query-SEA9: var(--navigator-background-color);--navigator-on-background-color-SCOPED-IN-query-SEA9: var(--navigator-on-background-color);--table-background-color-SCOPED-IN-query-SEA9: var(--table-background-color);--table-on-background-color-SCOPED-IN-query-SEA9: var(--table-on-background-color);--is-debug: 1;--is-debug-SCOPED-IN-query-SEA9: var(--is-debug)}:host *{--primary-color: var(--primary-color-SCOPED-IN-query-SEA9);--on-primary-color: var(--on-primary-color-SCOPED-IN-query-SEA9);--surface-color: var(--surface-color-SCOPED-IN-query-SEA9);--on-surface-color: var(--on-surface-color-SCOPED-IN-query-SEA9);--background-color: var(--background-color-SCOPED-IN-query-SEA9);--on-background-color: var(--on-background-color-SCOPED-IN-query-SEA9);--navigator-background-color: var(--navigator-background-color-SCOPED-IN-query-SEA9);--navigator-on-background-color: var(--navigator-on-background-color-SCOPED-IN-query-SEA9);--table-background-color: var(--table-background-color-SCOPED-IN-query-SEA9);--table-on-background-color: var(--table-on-background-color-SCOPED-IN-query-SEA9);--is-debug: var(--is-debug-SCOPED-IN-query-SEA9)}:host templates-index{padding-left:0;box-sizing:border-box;--first-content-height: calc(var(--is-debug-SCOPED-IN-query-SEA9) * 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, buildItemsMapFromResult };
+//# sourceMappingURL=xxmachina-components-pages-query.mjs.map