@xxmachina/components 19.25.0 → 19.26.0

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

@@ -77,15 +77,15 @@ function buildItemsMapFromResult(result = {}) {
 }
 
 class QueryActionReducer {
-    action = signal(null);
+    action = signal(null, ...(ngDevMode ? [{ debugName: "action" }] : []));
     action$ = toObservable(this.action);
     dispatch(action) {
         this.action.set(action);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: QueryActionReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: QueryActionReducer, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: QueryActionReducer, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: QueryActionReducer, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: QueryActionReducer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: QueryActionReducer, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -359,7 +359,7 @@ function provideNavEndActionsInitializer(storeToken) {
                 id: ActionId.TOGGLE_VARIABLES_FORM,
                 icon: store.navMode() === 'collapsed' ? 'expand_less' : 'expand_more'
             } : null,
-        ].filter(Boolean));
+        ].filter(Boolean), ...(ngDevMode ? [{ debugName: "navEndActions" }] : []));
         effect(() => applyToInput(store, 'navEndActions', [
             ...navEndActions(),
             ...store.additionalNavEndActions()
@@ -520,7 +520,7 @@ let QueryPageStore = class QueryPageStore extends InjectableComponent {
         return [
             QueryPageStore_1.DI.provideInitializer((store) => {
                 const query = injectOne(Query, { id: injectRouteData(key) });
-                const _query = computed(() => query(), { equal: (pre, cur) => JSON.stringify(pre) === JSON.stringify(cur) });
+                const _query = computed(() => query(), { ...(ngDevMode ? { debugName: "_query" } : {}), equal: (pre, cur) => JSON.stringify(pre) === JSON.stringify(cur) });
                 effect(() => {
                     console.debug('[QueryPageStore] query:', _query());
                     applyToInput(store, 'query', _query());
@@ -595,7 +595,7 @@ let QueryPageStore = class QueryPageStore extends InjectableComponent {
                 const pagination = computed(() => {
                     const _page = page() || { index: 0, size: 100 };
                     return { offset: _page.index * _page.size, limit: _page.size };
-                });
+                }, ...(ngDevMode ? [{ debugName: "pagination" }] : []));
                 effect(() => store.variablesForm()?.patchValue(pagination()));
             }),
         ];
@@ -622,54 +622,54 @@ let QueryPageStore = class QueryPageStore extends InjectableComponent {
     feature = inject(QueryFeature);
     variablesFormFeature = inject(QueryGraphqlVariablesFormFeature);
     indexFormBuilder = injectIndexFormBuilder();
-    navMode = signal('collapsed');
+    navMode = signal('collapsed', ...(ngDevMode ? [{ debugName: "navMode" }] : []));
     editingStateManager = inject(EditingStateManager);
-    style = input(_computed(() => this.config().style));
-    query = input(null);
+    style = input(_computed(() => this.config().style), ...(ngDevMode ? [{ debugName: "style" }] : []));
+    query = input(null, ...(ngDevMode ? [{ debugName: "query" }] : []));
     #navStartActions = injectNavStartActionsV2();
-    navStartActions = input(_computed(() => this.#navStartActions()));
-    additionalNavEndActions = input(_computed(() => this.config().additionalNavEndActions));
-    navEndActions = input(_computed(() => this.config().navEndActions));
-    type = input(_computed(() => this.config().type));
-    title = input(_computed(() => this.config().title ?? this.query()?.title));
-    titleEditable = input(_computed(() => this.config().titleEditable));
-    itemsMap = input(_computed(() => buildItemsMapFromResult(this.feature.result())));
-    items = computed(() => this.itemsMap()[Object.keys(this.itemsMap())[0]]?.items ?? []);
-    itemsLength = input(_computed(() => this.itemsMap()[Object.keys(this.itemsMap())[0]]?.itemsLength ?? 0));
-    childrenKey = input(_computed(() => this.config().childrenKey));
-    additionalColumns = input(_computed(() => this.config().additionalColumns));
-    additionalColumnNames = input(_computed(() => this.additionalColumns()(this.items())));
-    extractedColumnNames = input(_computed(() => QueryHelper.extractColumnNames(this.items(), this.childrenKey())));
-    columnNames = input(_computed(() => [...this.extractedColumnNames(), ...this.additionalColumnNames()]));
-    sticky = input(_computed(() => ({ stickyStart: 2, stickyEnd: 1 })));
-    form = input(_computed(() => this.indexFormBuilder.build({ columns: buildColumns([...this.columnNames(), '__actions'], this.sticky()) })));
-    itemActions = input(_computed(() => this.config().itemActions));
+    navStartActions = input(_computed(() => this.#navStartActions()), ...(ngDevMode ? [{ debugName: "navStartActions" }] : []));
+    additionalNavEndActions = input(_computed(() => this.config().additionalNavEndActions), ...(ngDevMode ? [{ debugName: "additionalNavEndActions" }] : []));
+    navEndActions = input(_computed(() => this.config().navEndActions), ...(ngDevMode ? [{ debugName: "navEndActions" }] : []));
+    type = input(_computed(() => this.config().type), ...(ngDevMode ? [{ debugName: "type" }] : []));
+    title = input(_computed(() => this.config().title ?? this.query()?.title), ...(ngDevMode ? [{ debugName: "title" }] : []));
+    titleEditable = input(_computed(() => this.config().titleEditable), ...(ngDevMode ? [{ debugName: "titleEditable" }] : []));
+    itemsMap = input(_computed(() => buildItemsMapFromResult(this.feature.result())), ...(ngDevMode ? [{ debugName: "itemsMap" }] : []));
+    items = computed(() => this.itemsMap()[Object.keys(this.itemsMap())[0]]?.items ?? [], ...(ngDevMode ? [{ debugName: "items" }] : []));
+    itemsLength = input(_computed(() => this.itemsMap()[Object.keys(this.itemsMap())[0]]?.itemsLength ?? 0), ...(ngDevMode ? [{ debugName: "itemsLength" }] : []));
+    childrenKey = input(_computed(() => this.config().childrenKey), ...(ngDevMode ? [{ debugName: "childrenKey" }] : []));
+    additionalColumns = input(_computed(() => this.config().additionalColumns), ...(ngDevMode ? [{ debugName: "additionalColumns" }] : []));
+    additionalColumnNames = input(_computed(() => this.additionalColumns()(this.items())), ...(ngDevMode ? [{ debugName: "additionalColumnNames" }] : []));
+    extractedColumnNames = input(_computed(() => QueryHelper.extractColumnNames(this.items(), this.childrenKey())), ...(ngDevMode ? [{ debugName: "extractedColumnNames" }] : []));
+    columnNames = input(_computed(() => [...this.extractedColumnNames(), ...this.additionalColumnNames()]), ...(ngDevMode ? [{ debugName: "columnNames" }] : []));
+    sticky = input(_computed(() => ({ stickyStart: 2, stickyEnd: 1 })), ...(ngDevMode ? [{ debugName: "sticky" }] : []));
+    form = input(_computed(() => this.indexFormBuilder.build({ columns: buildColumns([...this.columnNames(), '__actions'], this.sticky()) })), ...(ngDevMode ? [{ debugName: "form" }] : []));
+    itemActions = input(_computed(() => this.config().itemActions), ...(ngDevMode ? [{ debugName: "itemActions" }] : []));
     tableTreeControl = new FlatTreeControl(n => n.level, n => n.isExpandable, { trackBy: (n) => n?.id ?? n });
-    variablesForm = input(_computed(() => this.variablesFormFeature.variablesForm() ?? new FormGroup({})));
-    variablesFormFieldMap = input(_computed(() => ({})));
+    variablesForm = input(_computed(() => this.variablesFormFeature.variablesForm() ?? new FormGroup({})), ...(ngDevMode ? [{ debugName: "variablesForm" }] : []));
+    variablesFormFieldMap = input(_computed(() => ({})), ...(ngDevMode ? [{ debugName: "variablesFormFieldMap" }] : []));
     variablesFormValue = derivedAsync(() => getRawValue$(this.variablesForm()), { equal: isEqual });
     variablesFormValue$ = toObservable(this.variablesFormValue);
-    variablesFormDisplayed = input(_computed(() => Object.keys(this.variablesFormFeature.variablesValue())?.length > 0));
-    tableColumnFormFieldMap = input(_computed(() => ({})));
-    getRowClass = input(_computed(() => () => ''));
+    variablesFormDisplayed = input(_computed(() => Object.keys(this.variablesFormFeature.variablesValue())?.length > 0), ...(ngDevMode ? [{ debugName: "variablesFormDisplayed" }] : []));
+    tableColumnFormFieldMap = input(_computed(() => ({})), ...(ngDevMode ? [{ debugName: "tableColumnFormFieldMap" }] : []));
+    getRowClass = input(_computed(() => () => ''), ...(ngDevMode ? [{ debugName: "getRowClass" }] : []));
     skip = injectRouteSkip();
-    pageSizeOptions = input(_computed(() => this.config().pageSizeOptions));
+    pageSizeOptions = input(_computed(() => this.config().pageSizeOptions), ...(ngDevMode ? [{ debugName: "pageSizeOptions" }] : []));
     constructor() {
         super();
         QueryPageStore_1.DI.initialize(this);
         effect(() => this.feature.form.patchValue(this.query()));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: QueryPageStore, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵ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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: QueryPageStore, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.1.6", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: QueryPageStore, decorators: [{
             type: Directive,
             args: [{ standalone: true }]
-        }], ctorParameters: () => [] });
+        }], ctorParameters: () => [], propDecorators: { style: [{ type: i0.Input, args: [{ isSignal: true, alias: "style", required: false }] }], query: [{ type: i0.Input, args: [{ isSignal: true, alias: "query", required: false }] }], navStartActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "navStartActions", required: false }] }], additionalNavEndActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalNavEndActions", required: false }] }], navEndActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "navEndActions", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], titleEditable: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleEditable", required: false }] }], itemsMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsMap", required: false }] }], itemsLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsLength", required: false }] }], childrenKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "childrenKey", required: false }] }], additionalColumns: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalColumns", required: false }] }], additionalColumnNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "additionalColumnNames", required: false }] }], extractedColumnNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "extractedColumnNames", required: false }] }], columnNames: [{ type: i0.Input, args: [{ isSignal: true, alias: "columnNames", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: false }] }], itemActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemActions", required: false }] }], variablesForm: [{ type: i0.Input, args: [{ isSignal: true, alias: "variablesForm", required: false }] }], variablesFormFieldMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "variablesFormFieldMap", required: false }] }], variablesFormDisplayed: [{ type: i0.Input, args: [{ isSignal: true, alias: "variablesFormDisplayed", required: false }] }], tableColumnFormFieldMap: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableColumnFormFieldMap", required: false }] }], getRowClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "getRowClass", required: false }] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }] } });
 
 class QueryPage extends NgAtomicComponent {
     fb = inject(FormBuilder);
@@ -679,14 +679,14 @@ class QueryPage extends NgAtomicComponent {
     reducer = inject(QueryActionReducer);
     query = inject(QueryService);
     feature = inject(QueryFeature);
-    template = viewChild(IndexTemplate);
-    title = input('default title');
+    template = viewChild(IndexTemplate, ...(ngDevMode ? [{ debugName: "template" }] : []));
+    title = input('default title', ...(ngDevMode ? [{ debugName: "title" }] : []));
     constructor() {
         super();
         this.reducer.action$.subscribe((action) => this.dispatch(action));
         const context = computed(() => ({
             query: this.feature.formValue(),
-        }));
+        }), ...(ngDevMode ? [{ debugName: "context" }] : []));
         effect(() => this.app.context.context.set(JSON.stringify(context())));
     }
     async back() {
@@ -706,8 +706,8 @@ class QueryPage extends NgAtomicComponent {
     itemClick(item) {
         this.dispatch({ id: ActionId.DETAIL, payload: item });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: QueryPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵ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: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: QueryPage, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.6", 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()"
@@ -740,7 +740,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-zUIP: var(--page-width-lv1);--page-width-lv3-SCOPED-IN-query-zUIP: var(--page-width-lv3);--primary-color-SCOPED-IN-query-zUIP: var(--primary-color);--on-primary-color-SCOPED-IN-query-zUIP: var(--on-primary-color);--surface-color-SCOPED-IN-query-zUIP: var(--surface-color);--on-surface-color-SCOPED-IN-query-zUIP: var(--on-surface-color);--on-background-color-SCOPED-IN-query-zUIP: var(--on-background-color);--background-color-SCOPED-IN-query-zUIP: var(--background-color);--navigator-background-color-SCOPED-IN-query-zUIP: var(--navigator-background-color);--navigator-on-background-color-SCOPED-IN-query-zUIP: var(--navigator-on-background-color);--table-background-color-SCOPED-IN-query-zUIP: var(--table-background-color);--table-on-background-color-SCOPED-IN-query-zUIP: var(--table-on-background-color);--is-debug: 1;--is-debug-SCOPED-IN-query-zUIP: var(--is-debug)}:host *{--primary-color: var(--primary-color-SCOPED-IN-query-zUIP);--on-primary-color: var(--on-primary-color-SCOPED-IN-query-zUIP);--surface-color: var(--surface-color-SCOPED-IN-query-zUIP);--on-surface-color: var(--on-surface-color-SCOPED-IN-query-zUIP);--background-color: var(--background-color-SCOPED-IN-query-zUIP);--on-background-color: var(--on-background-color-SCOPED-IN-query-zUIP);--navigator-background-color: var(--navigator-background-color-SCOPED-IN-query-zUIP);--navigator-on-background-color: var(--navigator-on-background-color-SCOPED-IN-query-zUIP);--table-background-color: var(--table-background-color-SCOPED-IN-query-zUIP);--table-on-background-color: var(--table-on-background-color-SCOPED-IN-query-zUIP);--is-debug: var(--is-debug-SCOPED-IN-query-zUIP)}:host templates-index{padding-left:0;box-sizing:border-box;--first-content-height: calc(var(--is-debug-SCOPED-IN-query-zUIP) * 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 });
+  `, isInline: true, styles: ["@charset \"UTF-8\";:host{width:100%;height:100%;display:block;--page-width-lv1-SCOPED-IN-query-YfUo: var(--page-width-lv1);--page-width-lv3-SCOPED-IN-query-YfUo: var(--page-width-lv3);--primary-color-SCOPED-IN-query-YfUo: var(--primary-color);--on-primary-color-SCOPED-IN-query-YfUo: var(--on-primary-color);--surface-color-SCOPED-IN-query-YfUo: var(--surface-color);--on-surface-color-SCOPED-IN-query-YfUo: var(--on-surface-color);--on-background-color-SCOPED-IN-query-YfUo: var(--on-background-color);--background-color-SCOPED-IN-query-YfUo: var(--background-color);--navigator-background-color-SCOPED-IN-query-YfUo: var(--navigator-background-color);--navigator-on-background-color-SCOPED-IN-query-YfUo: var(--navigator-on-background-color);--table-background-color-SCOPED-IN-query-YfUo: var(--table-background-color);--table-on-background-color-SCOPED-IN-query-YfUo: var(--table-on-background-color);--is-debug: 1;--is-debug-SCOPED-IN-query-YfUo: var(--is-debug)}:host *{--primary-color: var(--primary-color-SCOPED-IN-query-YfUo);--on-primary-color: var(--on-primary-color-SCOPED-IN-query-YfUo);--surface-color: var(--surface-color-SCOPED-IN-query-YfUo);--on-surface-color: var(--on-surface-color-SCOPED-IN-query-YfUo);--background-color: var(--background-color-SCOPED-IN-query-YfUo);--on-background-color: var(--on-background-color-SCOPED-IN-query-YfUo);--navigator-background-color: var(--navigator-background-color-SCOPED-IN-query-YfUo);--navigator-on-background-color: var(--navigator-on-background-color-SCOPED-IN-query-YfUo);--table-background-color: var(--table-background-color-SCOPED-IN-query-YfUo);--table-on-background-color: var(--table-on-background-color-SCOPED-IN-query-YfUo);--is-debug: var(--is-debug-SCOPED-IN-query-YfUo)}:host templates-index{padding-left:0;box-sizing:border-box;--first-content-height: calc(var(--is-debug-SCOPED-IN-query-YfUo) * 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),
@@ -766,7 +766,7 @@ __decorate([
     __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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.6", ngImport: i0, type: QueryPage, decorators: [{
             type: Component,
             args: [{ selector: 'pages-query', imports: [
                         IndexTemplate,
@@ -821,8 +821,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImpor
                                 'pageSizeOptions'
                             ]
                         },
-                    ], styles: ["@charset \"UTF-8\";:host{width:100%;height:100%;display:block;--page-width-lv1-SCOPED-IN-query-zUIP: var(--page-width-lv1);--page-width-lv3-SCOPED-IN-query-zUIP: var(--page-width-lv3);--primary-color-SCOPED-IN-query-zUIP: var(--primary-color);--on-primary-color-SCOPED-IN-query-zUIP: var(--on-primary-color);--surface-color-SCOPED-IN-query-zUIP: var(--surface-color);--on-surface-color-SCOPED-IN-query-zUIP: var(--on-surface-color);--on-background-color-SCOPED-IN-query-zUIP: var(--on-background-color);--background-color-SCOPED-IN-query-zUIP: var(--background-color);--navigator-background-color-SCOPED-IN-query-zUIP: var(--navigator-background-color);--navigator-on-background-color-SCOPED-IN-query-zUIP: var(--navigator-on-background-color);--table-background-color-SCOPED-IN-query-zUIP: var(--table-background-color);--table-on-background-color-SCOPED-IN-query-zUIP: var(--table-on-background-color);--is-debug: 1;--is-debug-SCOPED-IN-query-zUIP: var(--is-debug)}:host *{--primary-color: var(--primary-color-SCOPED-IN-query-zUIP);--on-primary-color: var(--on-primary-color-SCOPED-IN-query-zUIP);--surface-color: var(--surface-color-SCOPED-IN-query-zUIP);--on-surface-color: var(--on-surface-color-SCOPED-IN-query-zUIP);--background-color: var(--background-color-SCOPED-IN-query-zUIP);--on-background-color: var(--on-background-color-SCOPED-IN-query-zUIP);--navigator-background-color: var(--navigator-background-color-SCOPED-IN-query-zUIP);--navigator-on-background-color: var(--navigator-on-background-color-SCOPED-IN-query-zUIP);--table-background-color: var(--table-background-color-SCOPED-IN-query-zUIP);--table-on-background-color: var(--table-on-background-color-SCOPED-IN-query-zUIP);--is-debug: var(--is-debug-SCOPED-IN-query-zUIP)}:host templates-index{padding-left:0;box-sizing:border-box;--first-content-height: calc(var(--is-debug-SCOPED-IN-query-zUIP) * 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: [] } });
+                    ], styles: ["@charset \"UTF-8\";:host{width:100%;height:100%;display:block;--page-width-lv1-SCOPED-IN-query-YfUo: var(--page-width-lv1);--page-width-lv3-SCOPED-IN-query-YfUo: var(--page-width-lv3);--primary-color-SCOPED-IN-query-YfUo: var(--primary-color);--on-primary-color-SCOPED-IN-query-YfUo: var(--on-primary-color);--surface-color-SCOPED-IN-query-YfUo: var(--surface-color);--on-surface-color-SCOPED-IN-query-YfUo: var(--on-surface-color);--on-background-color-SCOPED-IN-query-YfUo: var(--on-background-color);--background-color-SCOPED-IN-query-YfUo: var(--background-color);--navigator-background-color-SCOPED-IN-query-YfUo: var(--navigator-background-color);--navigator-on-background-color-SCOPED-IN-query-YfUo: var(--navigator-on-background-color);--table-background-color-SCOPED-IN-query-YfUo: var(--table-background-color);--table-on-background-color-SCOPED-IN-query-YfUo: var(--table-on-background-color);--is-debug: 1;--is-debug-SCOPED-IN-query-YfUo: var(--is-debug)}:host *{--primary-color: var(--primary-color-SCOPED-IN-query-YfUo);--on-primary-color: var(--on-primary-color-SCOPED-IN-query-YfUo);--surface-color: var(--surface-color-SCOPED-IN-query-YfUo);--on-surface-color: var(--on-surface-color-SCOPED-IN-query-YfUo);--background-color: var(--background-color-SCOPED-IN-query-YfUo);--on-background-color: var(--on-background-color-SCOPED-IN-query-YfUo);--navigator-background-color: var(--navigator-background-color-SCOPED-IN-query-YfUo);--navigator-on-background-color: var(--navigator-on-background-color-SCOPED-IN-query-YfUo);--table-background-color: var(--table-background-color-SCOPED-IN-query-YfUo);--table-on-background-color: var(--table-on-background-color-SCOPED-IN-query-YfUo);--is-debug: var(--is-debug-SCOPED-IN-query-YfUo)}:host templates-index{padding-left:0;box-sizing:border-box;--first-content-height: calc(var(--is-debug-SCOPED-IN-query-YfUo) * 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: { template: [{ type: i0.ViewChild, args: [i0.forwardRef(() => IndexTemplate), { isSignal: true }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], back: [], navigateToIframe: [], expandPage: [], itemClick: [] } });
 
 /**
  * QueryPage - 後方互換性のための再エクスポート