@xxmachina/components 19.0.0-preview.9 → 19.1.0

package/fesm2022/xxmachina-components-organisms-xterm.mjs

@@ -0,0 +1,94 @@
+import * as i0 from '@angular/core';
+import { viewChild, output, ChangeDetectionStrategy, Component } from '@angular/core';
+import { Terminal } from '@xterm/xterm';
+import { FitAddon } from '@xterm/addon-fit';
+
+class XtermOrganism {
+    constructor() {
+        this.container = viewChild.required('container');
+        this.terminalReady = output();
+    }
+    ngAfterViewInit() {
+        this.terminal = new Terminal({
+            theme: {
+                background: '#0a0a0a',
+                foreground: '#66d9ef',
+                cursor: '#ff79c6',
+                cyan: '#8be9fd',
+                brightCyan: '#50fa7b',
+                green: '#50fa7b',
+                brightGreen: '#50fa7b',
+                magenta: '#ff79c6',
+                brightMagenta: '#ff79c6',
+                yellow: '#f1fa8c',
+                brightYellow: '#ffb86c',
+                red: '#ff5555',
+                brightRed: '#ff5555'
+            },
+            scrollback: 1000,
+            fontSize: 12,
+            lineHeight: 1.2,
+            allowTransparency: false,
+            disableStdin: true,
+            cursorBlink: false,
+            cursorStyle: 'block',
+            convertEol: true,
+            rows: 24
+        });
+        this.fitAddon = new FitAddon();
+        this.terminal.loadAddon(this.fitAddon);
+        const containerElement = this.container().nativeElement;
+        this.terminal.open(containerElement);
+        // 初期化後の処理
+        setTimeout(() => {
+            this.fitAddon.fit();
+            this.terminalReady.emit(this.terminal);
+            // ResizeObserverでサイズ変更を監視
+            this.resizeObserver = new ResizeObserver(() => {
+                try {
+                    this.fitAddon.fit();
+                }
+                catch (e) {
+                    console.warn('Failed to fit terminal:', e);
+                }
+            });
+            this.resizeObserver.observe(containerElement);
+        }, 100);
+    }
+    ngOnDestroy() {
+        this.resizeObserver?.disconnect();
+        this.terminal?.dispose();
+    }
+    // Public API
+    write(text) {
+        this.terminal?.write(text);
+    }
+    writeln(text) {
+        this.terminal?.writeln(text);
+    }
+    clear() {
+        this.terminal?.clear();
+    }
+    scrollToBottom() {
+        this.terminal?.scrollToBottom();
+    }
+    scrollToTop() {
+        this.terminal?.scrollToTop();
+    }
+    scrollLines(lines) {
+        this.terminal?.scrollLines(lines);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: XtermOrganism, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.0.5", type: XtermOrganism, isStandalone: true, selector: "organisms-xterm", outputs: { terminalReady: "terminalReady" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: `<div #container class="xterm-wrapper"></div>`, isInline: true, styles: ["", "@import\"https://unpkg.com/@xterm/xterm@5.5.0/css/xterm.css\";:host{display:block;width:100%;height:100%}.xterm-wrapper{width:100%;height:100%;background:#0a0a0a;position:relative;overflow:hidden}.xterm-wrapper ::ng-deep .xterm-cursor-layer{display:none!important}.xterm-wrapper ::ng-deep .xterm-cursor,.xterm-wrapper ::ng-deep .xterm-cursor-outline{opacity:0!important}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: XtermOrganism, decorators: [{
+            type: Component,
+            args: [{ selector: 'organisms-xterm', standalone: true, imports: [], template: `<div #container class="xterm-wrapper"></div>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@import\"https://unpkg.com/@xterm/xterm@5.5.0/css/xterm.css\";:host{display:block;width:100%;height:100%}.xterm-wrapper{width:100%;height:100%;background:#0a0a0a;position:relative;overflow:hidden}.xterm-wrapper ::ng-deep .xterm-cursor-layer{display:none!important}.xterm-wrapper ::ng-deep .xterm-cursor,.xterm-wrapper ::ng-deep .xterm-cursor-outline{opacity:0!important}\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { XtermOrganism };
+//# sourceMappingURL=xxmachina-components-organisms-xterm.mjs.map

package/fesm2022/xxmachina-components-organisms-xterm.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"xxmachina-components-organisms-xterm.mjs","sources":["../tmp-esm2022/organisms/xterm/xterm.organism.js","../tmp-esm2022/organisms/xterm/xxmachina-components-organisms-xterm.js"],"sourcesContent":["import { Component, ChangeDetectionStrategy, viewChild, output } from '@angular/core';\nimport { Terminal } from '@xterm/xterm';\nimport { FitAddon } from '@xterm/addon-fit';\nimport * as i0 from \"@angular/core\";\nexport class XtermOrganism {\n    constructor() {\n        this.container = viewChild.required('container');\n        this.terminalReady = output();\n    }\n    ngAfterViewInit() {\n        this.terminal = new Terminal({\n            theme: {\n                background: '#0a0a0a',\n                foreground: '#66d9ef',\n                cursor: '#ff79c6',\n                cyan: '#8be9fd',\n                brightCyan: '#50fa7b',\n                green: '#50fa7b',\n                brightGreen: '#50fa7b',\n                magenta: '#ff79c6',\n                brightMagenta: '#ff79c6',\n                yellow: '#f1fa8c',\n                brightYellow: '#ffb86c',\n                red: '#ff5555',\n                brightRed: '#ff5555'\n            },\n            scrollback: 1000,\n            fontSize: 12,\n            lineHeight: 1.2,\n            allowTransparency: false,\n            disableStdin: true,\n            cursorBlink: false,\n            cursorStyle: 'block',\n            convertEol: true,\n            rows: 24\n        });\n        this.fitAddon = new FitAddon();\n        this.terminal.loadAddon(this.fitAddon);\n        const containerElement = this.container().nativeElement;\n        this.terminal.open(containerElement);\n        // 初期化後の処理\n        setTimeout(() => {\n            this.fitAddon.fit();\n            this.terminalReady.emit(this.terminal);\n            // ResizeObserverでサイズ変更を監視\n            this.resizeObserver = new ResizeObserver(() => {\n                try {\n                    this.fitAddon.fit();\n                }\n                catch (e) {\n                    console.warn('Failed to fit terminal:', e);\n                }\n            });\n            this.resizeObserver.observe(containerElement);\n        }, 100);\n    }\n    ngOnDestroy() {\n        this.resizeObserver?.disconnect();\n        this.terminal?.dispose();\n    }\n    // Public API\n    write(text) {\n        this.terminal?.write(text);\n    }\n    writeln(text) {\n        this.terminal?.writeln(text);\n    }\n    clear() {\n        this.terminal?.clear();\n    }\n    scrollToBottom() {\n        this.terminal?.scrollToBottom();\n    }\n    scrollToTop() {\n        this.terminal?.scrollToTop();\n    }\n    scrollLines(lines) {\n        this.terminal?.scrollLines(lines);\n    }\n    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: \"12.0.0\", version: \"20.0.5\", ngImport: i0, type: XtermOrganism, deps: [], target: i0.ɵɵFactoryTarget.Component }); }\n    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: \"17.2.0\", version: \"20.0.5\", type: XtermOrganism, isStandalone: true, selector: \"organisms-xterm\", outputs: { terminalReady: \"terminalReady\" }, viewQueries: [{ propertyName: \"container\", first: true, predicate: [\"container\"], descendants: true, isSignal: true }], ngImport: i0, template: `<div #container class=\"xterm-wrapper\"></div>`, isInline: true, styles: [\"\", \"@import\\\"https://unpkg.com/@xterm/xterm@5.5.0/css/xterm.css\\\";:host{display:block;width:100%;height:100%}.xterm-wrapper{width:100%;height:100%;background:#0a0a0a;position:relative;overflow:hidden}.xterm-wrapper ::ng-deep .xterm-cursor-layer{display:none!important}.xterm-wrapper ::ng-deep .xterm-cursor,.xterm-wrapper ::ng-deep .xterm-cursor-outline{opacity:0!important}\\n\"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }\n}\ni0.ɵɵngDeclareClassMetadata({ minVersion: \"12.0.0\", version: \"20.0.5\", ngImport: i0, type: XtermOrganism, decorators: [{\n            type: Component,\n            args: [{ selector: 'organisms-xterm', standalone: true, imports: [], template: `<div #container class=\"xterm-wrapper\"></div>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [\"@import\\\"https://unpkg.com/@xterm/xterm@5.5.0/css/xterm.css\\\";:host{display:block;width:100%;height:100%}.xterm-wrapper{width:100%;height:100%;background:#0a0a0a;position:relative;overflow:hidden}.xterm-wrapper ::ng-deep .xterm-cursor-layer{display:none!important}.xterm-wrapper ::ng-deep .xterm-cursor,.xterm-wrapper ::ng-deep .xterm-cursor-outline{opacity:0!important}\\n\"] }]\n        }] });\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoieHRlcm0ub3JnYW5pc20uanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi8uLi9wYWNrYWdlcy9AeHhtYWNoaW5hL2NvbXBvbmVudHMvc3JjL2xpYi9vcmdhbmlzbXMveHRlcm0veHRlcm0ub3JnYW5pc20udHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBd0MsdUJBQXVCLEVBQUUsU0FBUyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUM1SCxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0sY0FBYyxDQUFDO0FBQ3hDLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQzs7QUFVNUMsTUFBTSxPQUFPLGFBQWE7SUFSMUI7UUFTVyxjQUFTLEdBQUcsU0FBUyxDQUFDLFFBQVEsQ0FBNkIsV0FBVyxDQUFDLENBQUM7UUFDeEUsa0JBQWEsR0FBRyxNQUFNLEVBQVksQ0FBQztLQXNGN0M7SUFoRkMsZUFBZTtRQUNiLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxRQUFRLENBQUM7WUFDM0IsS0FBSyxFQUFFO2dCQUNMLFVBQVUsRUFBRSxTQUFTO2dCQUNyQixVQUFVLEVBQUUsU0FBUztnQkFDckIsTUFBTSxFQUFFLFNBQVM7Z0JBQ2pCLElBQUksRUFBRSxTQUFTO2dCQUNmLFVBQVUsRUFBRSxTQUFTO2dCQUNyQixLQUFLLEVBQUUsU0FBUztnQkFDaEIsV0FBVyxFQUFFLFNBQVM7Z0JBQ3RCLE9BQU8sRUFBRSxTQUFTO2dCQUNsQixhQUFhLEVBQUUsU0FBUztnQkFDeEIsTUFBTSxFQUFFLFNBQVM7Z0JBQ2pCLFlBQVksRUFBRSxTQUFTO2dCQUN2QixHQUFHLEVBQUUsU0FBUztnQkFDZCxTQUFTLEVBQUUsU0FBUzthQUNyQjtZQUNELFVBQVUsRUFBRSxJQUFJO1lBQ2hCLFFBQVEsRUFBRSxFQUFFO1lBQ1osVUFBVSxFQUFFLEdBQUc7WUFDZixpQkFBaUIsRUFBRSxLQUFLO1lBQ3hCLFlBQVksRUFBRSxJQUFJO1lBQ2xCLFdBQVcsRUFBRSxLQUFLO1lBQ2xCLFdBQVcsRUFBRSxPQUFPO1lBQ3BCLFVBQVUsRUFBRSxJQUFJO1lBQ2hCLElBQUksRUFBRSxFQUFFO1NBQ1QsQ0FBQyxDQUFDO1FBRUgsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLFFBQVEsRUFBRSxDQUFDO1FBQy9CLElBQUksQ0FBQyxRQUFRLENBQUMsU0FBUyxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztRQUV2QyxNQUFNLGdCQUFnQixHQUFHLElBQUksQ0FBQyxTQUFTLEVBQUUsQ0FBQyxhQUFhLENBQUM7UUFDeEQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLENBQUMsZ0JBQWdCLENBQUMsQ0FBQztRQUVyQyxVQUFVO1FBQ1YsVUFBVSxDQUFDLEdBQUcsRUFBRTtZQUNkLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUM7WUFDcEIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDO1lBRXZDLDBCQUEwQjtZQUMxQixJQUFJLENBQUMsY0FBYyxHQUFHLElBQUksY0FBYyxDQUFDLEdBQUcsRUFBRTtnQkFDNUMsSUFBSSxDQUFDO29CQUNILElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxFQUFFLENBQUM7Z0JBQ3RCLENBQUM7Z0JBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQztvQkFDWCxPQUFPLENBQUMsSUFBSSxDQUFDLHlCQUF5QixFQUFFLENBQUMsQ0FBQyxDQUFDO2dCQUM3QyxDQUFDO1lBQ0gsQ0FBQyxDQUFDLENBQUM7WUFDSCxJQUFJLENBQUMsY0FBYyxDQUFDLE9BQU8sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO1FBQ2hELENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQztJQUNWLENBQUM7SUFFRCxXQUFXO1FBQ1QsSUFBSSxDQUFDLGNBQWMsRUFBRSxVQUFVLEVBQUUsQ0FBQztRQUNsQyxJQUFJLENBQUMsUUFBUSxFQUFFLE9BQU8sRUFBRSxDQUFDO0lBQzNCLENBQUM7SUFFRCxhQUFhO0lBQ04sS0FBSyxDQUFDLElBQVk7UUFDdkIsSUFBSSxDQUFDLFFBQVEsRUFBRSxLQUFLLENBQUMsSUFBSSxDQUFDLENBQUM7SUFDN0IsQ0FBQztJQUVNLE9BQU8sQ0FBQyxJQUFZO1FBQ3pCLElBQUksQ0FBQyxRQUFRLEVBQUUsT0FBTyxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQy9CLENBQUM7SUFFTSxLQUFLO1FBQ1YsSUFBSSxDQUFDLFFBQVEsRUFBRSxLQUFLLEVBQUUsQ0FBQztJQUN6QixDQUFDO0lBRU0sY0FBYztRQUNuQixJQUFJLENBQUMsUUFBUSxFQUFFLGNBQWMsRUFBRSxDQUFDO0lBQ2xDLENBQUM7SUFFTSxXQUFXO1FBQ2hCLElBQUksQ0FBQyxRQUFRLEVBQUUsV0FBVyxFQUFFLENBQUM7SUFDL0IsQ0FBQztJQUVNLFdBQVcsQ0FBQyxLQUFhO1FBQzlCLElBQUksQ0FBQyxRQUFRLEVBQUUsV0FBVyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3BDLENBQUM7OEdBdkZVLGFBQWE7a0dBQWIsYUFBYSxnUEFKZCw4Q0FBOEM7OzJGQUk3QyxhQUFhO2tCQVJ6QixTQUFTOytCQUNFLGlCQUFpQixjQUNmLElBQUksV0FDUCxFQUFFLFlBQ0QsOENBQThDLG1CQUV2Qyx1QkFBdUIsQ0FBQyxNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBBZnRlclZpZXdJbml0LCBPbkRlc3Ryb3ksIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LCB2aWV3Q2hpbGQsIG91dHB1dCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgVGVybWluYWwgfSBmcm9tICdAeHRlcm0veHRlcm0nO1xuaW1wb3J0IHsgRml0QWRkb24gfSBmcm9tICdAeHRlcm0vYWRkb24tZml0JztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnb3JnYW5pc21zLXh0ZXJtJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW10sXG4gIHRlbXBsYXRlOiBgPGRpdiAjY29udGFpbmVyIGNsYXNzPVwieHRlcm0td3JhcHBlclwiPjwvZGl2PmAsXG4gIHN0eWxlVXJsczogWycuL3h0ZXJtLm9yZ2FuaXNtLmNzcycsICcuL3h0ZXJtLm9yZ2FuaXNtLnNjc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2hcbn0pXG5leHBvcnQgY2xhc3MgWHRlcm1PcmdhbmlzbSBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQsIE9uRGVzdHJveSB7XG4gIHJlYWRvbmx5IGNvbnRhaW5lciA9IHZpZXdDaGlsZC5yZXF1aXJlZDxFbGVtZW50UmVmPEhUTUxEaXZFbGVtZW50Pj4oJ2NvbnRhaW5lcicpO1xuICByZWFkb25seSB0ZXJtaW5hbFJlYWR5ID0gb3V0cHV0PFRlcm1pbmFsPigpO1xuXG4gIHByaXZhdGUgdGVybWluYWwhOiBUZXJtaW5hbDtcbiAgcHJpdmF0ZSBmaXRBZGRvbiE6IEZpdEFkZG9uO1xuICBwcml2YXRlIHJlc2l6ZU9ic2VydmVyPzogUmVzaXplT2JzZXJ2ZXI7XG5cbiAgbmdBZnRlclZpZXdJbml0KCkge1xuICAgIHRoaXMudGVybWluYWwgPSBuZXcgVGVybWluYWwoe1xuICAgICAgdGhlbWU6IHtcbiAgICAgICAgYmFja2dyb3VuZDogJyMwYTBhMGEnLFxuICAgICAgICBmb3JlZ3JvdW5kOiAnIzY2ZDllZicsXG4gICAgICAgIGN1cnNvcjogJyNmZjc5YzYnLFxuICAgICAgICBjeWFuOiAnIzhiZTlmZCcsXG4gICAgICAgIGJyaWdodEN5YW46ICcjNTBmYTdiJyxcbiAgICAgICAgZ3JlZW46ICcjNTBmYTdiJyxcbiAgICAgICAgYnJpZ2h0R3JlZW46ICcjNTBmYTdiJyxcbiAgICAgICAgbWFnZW50YTogJyNmZjc5YzYnLFxuICAgICAgICBicmlnaHRNYWdlbnRhOiAnI2ZmNzljNicsXG4gICAgICAgIHllbGxvdzogJyNmMWZhOGMnLFxuICAgICAgICBicmlnaHRZZWxsb3c6ICcjZmZiODZjJyxcbiAgICAgICAgcmVkOiAnI2ZmNTU1NScsXG4gICAgICAgIGJyaWdodFJlZDogJyNmZjU1NTUnXG4gICAgICB9LFxuICAgICAgc2Nyb2xsYmFjazogMTAwMCxcbiAgICAgIGZvbnRTaXplOiAxMixcbiAgICAgIGxpbmVIZWlnaHQ6IDEuMixcbiAgICAgIGFsbG93VHJhbnNwYXJlbmN5OiBmYWxzZSxcbiAgICAgIGRpc2FibGVTdGRpbjogdHJ1ZSxcbiAgICAgIGN1cnNvckJsaW5rOiBmYWxzZSxcbiAgICAgIGN1cnNvclN0eWxlOiAnYmxvY2snLFxuICAgICAgY29udmVydEVvbDogdHJ1ZSxcbiAgICAgIHJvd3M6IDI0XG4gICAgfSk7XG5cbiAgICB0aGlzLmZpdEFkZG9uID0gbmV3IEZpdEFkZG9uKCk7XG4gICAgdGhpcy50ZXJtaW5hbC5sb2FkQWRkb24odGhpcy5maXRBZGRvbik7XG4gICAgXG4gICAgY29uc3QgY29udGFpbmVyRWxlbWVudCA9IHRoaXMuY29udGFpbmVyKCkubmF0aXZlRWxlbWVudDtcbiAgICB0aGlzLnRlcm1pbmFsLm9wZW4oY29udGFpbmVyRWxlbWVudCk7XG4gICAgXG4gICAgLy8g5Yid5pyf5YyW5b6M44Gu5Yem55CGXG4gICAgc2V0VGltZW91dCgoKSA9PiB7XG4gICAgICB0aGlzLmZpdEFkZG9uLmZpdCgpO1xuICAgICAgdGhpcy50ZXJtaW5hbFJlYWR5LmVtaXQodGhpcy50ZXJtaW5hbCk7XG4gICAgICBcbiAgICAgIC8vIFJlc2l6ZU9ic2VydmVy44Gn44K144Kk44K65aSJ5pu044KS55uj6KaWXG4gICAgICB0aGlzLnJlc2l6ZU9ic2VydmVyID0gbmV3IFJlc2l6ZU9ic2VydmVyKCgpID0+IHtcbiAgICAgICAgdHJ5IHtcbiAgICAgICAgICB0aGlzLmZpdEFkZG9uLmZpdCgpO1xuICAgICAgICB9IGNhdGNoIChlKSB7XG4gICAgICAgICAgY29uc29sZS53YXJuKCdGYWlsZWQgdG8gZml0IHRlcm1pbmFsOicsIGUpO1xuICAgICAgICB9XG4gICAgICB9KTtcbiAgICAgIHRoaXMucmVzaXplT2JzZXJ2ZXIub2JzZXJ2ZShjb250YWluZXJFbGVtZW50KTtcbiAgICB9LCAxMDApO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKSB7XG4gICAgdGhpcy5yZXNpemVPYnNlcnZlcj8uZGlzY29ubmVjdCgpO1xuICAgIHRoaXMudGVybWluYWw/LmRpc3Bvc2UoKTtcbiAgfVxuXG4gIC8vIFB1YmxpYyBBUElcbiAgcHVibGljIHdyaXRlKHRleHQ6IHN0cmluZyk6IHZvaWQge1xuICAgIHRoaXMudGVybWluYWw/LndyaXRlKHRleHQpO1xuICB9XG5cbiAgcHVibGljIHdyaXRlbG4odGV4dDogc3RyaW5nKTogdm9pZCB7XG4gICAgdGhpcy50ZXJtaW5hbD8ud3JpdGVsbih0ZXh0KTtcbiAgfVxuXG4gIHB1YmxpYyBjbGVhcigpOiB2b2lkIHtcbiAgICB0aGlzLnRlcm1pbmFsPy5jbGVhcigpO1xuICB9XG5cbiAgcHVibGljIHNjcm9sbFRvQm90dG9tKCk6IHZvaWQge1xuICAgIHRoaXMudGVybWluYWw/LnNjcm9sbFRvQm90dG9tKCk7XG4gIH1cblxuICBwdWJsaWMgc2Nyb2xsVG9Ub3AoKTogdm9pZCB7XG4gICAgdGhpcy50ZXJtaW5hbD8uc2Nyb2xsVG9Ub3AoKTtcbiAgfVxuXG4gIHB1YmxpYyBzY3JvbGxMaW5lcyhsaW5lczogbnVtYmVyKTogdm9pZCB7XG4gICAgdGhpcy50ZXJtaW5hbD8uc2Nyb2xsTGluZXMobGluZXMpO1xuICB9XG59Il19","/**\n * Generated bundle index. Do not edit.\n */\nexport * from './index';\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoieHhtYWNoaW5hLWNvbXBvbmVudHMtb3JnYW5pc21zLXh0ZXJtLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vLi4vcGFja2FnZXMvQHh4bWFjaGluYS9jb21wb25lbnRzL3NyYy9saWIvb3JnYW5pc21zL3h0ZXJtL3h4bWFjaGluYS1jb21wb25lbnRzLW9yZ2FuaXNtcy14dGVybS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTs7R0FFRztBQUVILGNBQWMsU0FBUyxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiLyoqXG4gKiBHZW5lcmF0ZWQgYnVuZGxlIGluZGV4LiBEbyBub3QgZWRpdC5cbiAqL1xuXG5leHBvcnQgKiBmcm9tICcuL2luZGV4JztcbiJdfQ=="],"names":[],"mappings":"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"}

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

@@ -1,28 +1,28 @@
 import { __decorate, __metadata } from 'tslib';
 import * as i0 from '@angular/core';
-import { inject, effect, computed, input, Directive, Component } from '@angular/core';
+import { inject, effect, computed, untracked, input, Directive, Component } from '@angular/core';
 import { FormGroup, FormArray, FormControl } from '@angular/forms';
 import { RouterOutletFrame } from '@ng-atomic/components/frames/router-outlet';
 import { CommandService } from '@xxmachina/components/services/command';
 import { InjectableComponent, applyToInput, provideEffect, _computed, TokenizedType, NgAtomicComponent, Effect } from '@ng-atomic/core';
 import { ActivatedRoute } from '@angular/router';
 import { FormTemplateStore, FormTemplate } from '@ng-atomic/components/templates/form';
-import { injectRouteParam, injectRouteData, injectRouteParam$, injectUnflattenRouteParam$, injectRouteData$, injectUnflattenRouteParam, getInvalid$ } from '@ng-atomic/common/utils';
-import { combineLatest, filter, map, tap, shareReplay } from 'rxjs';
+import { injectRouteParam, injectRouteData, injectRouteParam$, injectUnflattenRouteParam$, injectRouteData$, injectRouteParamMap, getValue$, injectUnflattenRouteParam, getInvalid$, injectRouteSkip } from '@ng-atomic/common/utils';
+import { combineLatest, filter, map, tap, shareReplay, of } from 'rxjs';
 import { AppService } from '@ng-atomic/common/services/app';
-import { makeConfig, injectNavStartActionsV2 } from '@ng-atomic/common/services/ui';
-import { Query, QueryHelper } from '@xxmachina/common/domain/models';
-import { makeInitializerConfig } from '@ng-atomic/common/services/initializer';
+import { makeDI, injectNavStartActionsV2 } from '@ng-atomic/common/services/ui';
+import { Query, QueryHelper, EndpointHelper } from '@xxmachina/common/domain/models';
 import { pick, merge } from 'lodash-es';
 import { injectOne$ } from '@ng-atomic/common/stores/entities';
 import { MachinaDevService } from '@xxmachina/components/services/debug';
-import { EndpointHelper } from '@xxmachina/common/domain/models/endpoint';
 import { derivedAsync } from 'ngxtension/derived-async';
 import { CommandFeature } from '@xxmachina/components/features/command';
 import { TabsFrame } from '@ng-atomic/components/frames/tabs';
 import { QueryFormGroup } from '@xxmachina/components/groups/query-form';
 import { CommandFormGroup } from '@xxmachina/components/groups/command-form';
-import { QueryFeature } from '@xxmachina/components/features/query';
+import { QueryFeature, QueryGraphqlSchemaFeature } from '@xxmachina/components/features/query';
+import { CloudStorageService } from '@nx-ddd/common/infrastructure/externals/cloud-storage';
+import { injectErrorMessageResolver } from '@ng-atomic/common/pipes/error';
 
 var CommandPageStore_1;
 var ActionId;
@@ -64,7 +64,7 @@ function buildActions(hasPermission, invalid) {
 let CommandPageStore = class CommandPageStore extends InjectableComponent {
     static { CommandPageStore_1 = this; }
     static { this.ActionId = ActionId; }
-    static { this.Config = makeConfig(() => {
+    static { this.DI = makeDI(CommandPageStore_1, () => {
         const dev = inject(MachinaDevService);
         return () => ({
             style: {
@@ -89,10 +89,11 @@ let CommandPageStore = class CommandPageStore extends InjectableComponent {
             }),
         });
     }, ['@xxmachina/components', 'pages', 'command']); }
-    static { this.Initializer = makeInitializerConfig(CommandPageStore_1); }
+    static { this.Config = CommandPageStore_1.DI.Config; }
+    static { this.Initializer = CommandPageStore_1.DI.Initializer; }
     static provideDefault() {
         return [
-            CommandPageStore_1.Config.provide(),
+            CommandPageStore_1.DI.provideConfig(),
             CommandPageStore_1.provideDefaultInitializer(),
             CommandPageStore_1.provideDefaultEffects(),
         ];
@@ -101,6 +102,18 @@ let CommandPageStore = class CommandPageStore extends InjectableComponent {
         return [
             CommandPageStore_1.provideDefault(),
             CommandPageStore_1.provideCommandIdFromRouteDataInitializer(),
+            CommandPageStore_1.provideSetupInitializeQueryInitializer(),
+        ];
+    }
+    static provideDefaultV2() {
+        return [
+            CommandPageStore_1.Config.provide(),
+            CommandPageStore_1.provideDefaultInitializer(),
+            CommandPageStore_1.provideDefaultEffects(),
+            CommandPageStore_1.provideCommandIdFromRouteDataInitializer(),
+            CommandPageStore_1.provideSetupInitializeQueryInitializer(),
+            CommandPageStore_1.provideInitialFormValueFromQueryResult(),
+            CommandPageStore_1.provideQueryFromRouteData(),
         ];
     }
     static provideDefaultInitializer() {
@@ -121,18 +134,14 @@ let CommandPageStore = class CommandPageStore extends InjectableComponent {
         return CommandPageStore_1.Initializer.provide((store) => {
             const commandId = injectRouteParam(paramName);
             const service = inject(CommandService);
-            effect(() => {
-                applyToInput(store, 'command', service.getCommand(commandId()));
-            });
+            effect(() => applyToInput(store, 'command', service.getCommand(commandId())));
         });
     }
     static provideCommandIdFromRouteDataInitializer() {
         return CommandPageStore_1.Initializer.provide((store) => {
             const commandId = injectRouteData('commandId');
             const service = inject(CommandService);
-            effect(() => {
-                applyToInput(store, 'command', service.getCommand(commandId()));
-            });
+            effect(() => applyToInput(store, 'command', service.getCommand(commandId())));
         });
     }
     static providePatchFormFromRouteParamInitializer() {
@@ -154,8 +163,7 @@ let CommandPageStore = class CommandPageStore extends InjectableComponent {
         ];
     }
     static provideQueryIdFromRouteParam(key = 'queryId') {
-        return CommandPageStore_1.Initializer.provide(() => {
-            const feature = inject(QueryFeature);
+        return CommandPageStore_1.Initializer.provide((store) => {
             const queryId$ = injectRouteParam$(key);
             const params$ = injectUnflattenRouteParam$('data');
             const query$ = injectOne$(Query, { id: queryId$ });
@@ -165,28 +173,48 @@ let CommandPageStore = class CommandPageStore extends InjectableComponent {
             }).pipe(filter(({ query, params }) => !!query && !!params), map(({ query, params }) => QueryHelper.setup(query, params)), tap((query) => console.debug('[CommandPage] query:', query)), shareReplay(1)));
             effect(() => {
                 console.debug('[CommandPage] setupQuery:', setupQuery());
-                feature.form.patchValue(setupQuery());
+                store.queryFeature.form.patchValue(setupQuery());
             });
         });
     }
     static provideQueryFromRouteData(key = 'query') {
-        return CommandPageStore_1.Initializer.provide(() => {
-            const feature = inject(QueryFeature);
+        return CommandPageStore_1.Initializer.provide((store) => {
             const params$ = injectUnflattenRouteParam$('data');
             const query$ = injectRouteData$(key);
             const setupQuery = derivedAsync(() => combineLatest({
                 query: query$,
                 params: params$,
-            }).pipe(filter(({ query, params }) => !!query && !!params), map(({ query, params }) => QueryHelper.setup(query, params)), tap((query) => console.debug('[CommandPage] query:', query)), shareReplay(1)));
-            effect(() => { feature.form.patchValue(setupQuery()); });
+            }).pipe(filter(({ query, params }) => !!query), map(({ query, params }) => QueryHelper.setup(query, params)), shareReplay(1)));
+            effect(() => { store.queryFeature.form.patchValue(setupQuery()); });
+        });
+    }
+    static provideRouteParamsToDataInitializer(projector) {
+        return CommandPageStore_1.Initializer.provide((store) => {
+            const route = inject(ActivatedRoute);
+            const data = derivedAsync(() => route.params.pipe(map(params => projector(params))));
+            effect(() => applyToInput(store, 'data', data()));
+        });
+    }
+    static provideRouteParamMapToDataInitializer(projector) {
+        return CommandPageStore_1.Initializer.provide((store) => {
+            const paramMap = injectRouteParamMap({ merge: true });
+            const data = computed(() => projector(paramMap()));
+            effect(() => applyToInput(store, 'data', data()));
+        });
+    }
+    static provideSetupInitializeQueryInitializer() {
+        return CommandPageStore_1.Initializer.provide((store) => {
+            const initializeQuery = derivedAsync(() => combineLatest({
+                initializeQuery: of(store.initializeQuery()),
+                data: of(store.data())
+            }).pipe(filter(({ initializeQuery, data }) => !!initializeQuery && !!data), map(({ initializeQuery, data }) => QueryHelper.setup(initializeQuery, data)), filter((initializeQuery) => !!initializeQuery), shareReplay(1)));
+            effect(() => store.queryFeature.form.patchValue(initializeQuery()));
         });
     }
     static provideInitialFormValueFromQueryResult() {
         return CommandPageStore_1.Initializer.provide((store) => {
-            const feature = inject(QueryFeature);
-            const data = computed(() => QueryHelper.getResult(feature.result()));
-            effect(() => { store.form().patchValue(data()); });
-            feature.refresh();
+            effect(() => store.form().patchValue(store.queryFeature.result()));
+            store.queryFeature.refresh();
         });
     }
     static provideExecuteCommandEffect() {
@@ -202,7 +230,7 @@ let CommandPageStore = class CommandPageStore extends InjectableComponent {
                 app.loading.await(() => {
                     return store.feature.execute(command, data).then(() => {
                         app.snackBar.open('成功しました。');
-                        history.back();
+                        // history.back();
                     }).catch((error) => {
                         console.error(error);
                         app.snackBar.openError(error);
@@ -216,12 +244,96 @@ let CommandPageStore = class CommandPageStore extends InjectableComponent {
             return () => history.back();
         });
     }
+    static provideFileSelectedEffect() {
+        return provideEffect(CommandPageStore_1.ActionId.FILE_SELECTED, () => {
+            const store = inject(CommandPageStore_1);
+            return (payload) => {
+                store.form().patchValue({ file: payload.files?.[0] });
+            };
+        });
+    }
+    static provideDebugFormInitializer() {
+        return CommandPageStore_1.Initializer.provide(() => {
+            const store = inject(CommandPageStore_1);
+            // FormGroupを再帰的に調べる関数（invalidなコントロールのみ）
+            const getInvalidControls = (formGroup, path = '') => {
+                let invalidControls = [];
+                Object.keys(formGroup.controls).forEach(key => {
+                    const control = formGroup.controls[key];
+                    const currentPath = path ? `${path}.${key}` : key;
+                    // invalidなコントロールを記録
+                    if (control.invalid) {
+                        invalidControls.push({
+                            path: currentPath,
+                            errors: control.errors,
+                            value: control.value,
+                            status: control.status,
+                            valid: control.valid,
+                            invalid: control.invalid,
+                            dirty: control.dirty,
+                            touched: control.touched
+                        });
+                    }
+                    // FormGroupの場合は再帰的に調べる
+                    if (control.controls) {
+                        invalidControls = invalidControls.concat(getInvalidControls(control, currentPath));
+                    }
+                });
+                return invalidControls;
+            };
+            const formValue_ = derivedAsync(() => getValue$(store.form()));
+            effect(() => {
+                const formValue = formValue_();
+                const form = untracked(() => store.form());
+                console.log('[CommandPage] Form value changed:', formValue);
+                console.log('[CommandPage] CommandForm valid:', form?.valid);
+                console.log('[CommandPage] CommandForm status:', form?.status);
+                if (form) {
+                    const invalidControls = getInvalidControls(form);
+                    const invalidPaths = invalidControls.map(control => control.path);
+                    console.log(`[CommandPage] Found ${invalidControls.length} INVALID controls:`);
+                    console.log('[CommandPage] INVALID PATHS:', invalidPaths);
+                }
+            });
+        });
+    }
+    static provideSelectedFileUploadEffect(callbackFactory, { validator = () => null, getPath, }) {
+        return provideEffect(CommandPageStore_1.ActionId.FILE_SELECTED, () => {
+            const storage = inject(CloudStorageService);
+            const app = inject(AppService);
+            const callback = callbackFactory();
+            const errorMessageResolver = injectErrorMessageResolver();
+            return (payload) => {
+                const file = payload.files?.[0];
+                const errors = validator(file);
+                if (errors && Object.keys(errors).length > 0) {
+                    app.snackBar.open(errorMessageResolver(errors));
+                    return;
+                }
+                return app.loading.await(() => {
+                    const path = getPath();
+                    return storage.upload(path, file).then(() => {
+                        app.snackBar.open('ファイルをアップロードしました');
+                        return storage.getDownloadUrl(path).then((imageUrl) => {
+                            return callback({ file, path, url: imageUrl });
+                        });
+                    }).catch((error) => {
+                        console.error(error);
+                        app.snackBar.open('ファイルのアップロードに失敗しました');
+                    });
+                });
+            };
+        });
+    }
+    #navStartActions;
     constructor() {
         super();
         this.feature = inject(CommandFeature);
         this.config = CommandPageStore_1.Config.inject();
+        this.queryFeature = inject(QueryFeature);
         this.style = input(_computed(() => this.config().style));
-        this.navStartActions = injectNavStartActionsV2();
+        this.#navStartActions = injectNavStartActionsV2();
+        this.navStartActions = input(_computed(() => this.#navStartActions()));
         this.navEndActions = input(_computed(() => this.config().navEndActions));
         this.command = input(_computed(() => this.config().command));
         this.form = input(_computed(() => this.feature.form()));
@@ -231,19 +343,26 @@ let CommandPageStore = class CommandPageStore extends InjectableComponent {
             ...this.extractedFormFieldMap(),
             ...this.additionalFormFieldMap()
         })));
-        this.data = injectUnflattenRouteParam('data');
+        this.formFieldKeys = input(_computed(() => []));
+        this.formFlatExcludes = input(_computed(() => []));
+        this._initializeQuery = injectRouteData('query');
+        this.initializeQuery = input(_computed(() => this._initializeQuery()));
+        this._data = injectUnflattenRouteParam('data');
+        this.data = input(_computed(() => this._data()));
         this.formInvalid = derivedAsync(() => getInvalid$(this.form()));
+        this.title = input(_computed(() => this.feature.title()));
         this.actions = derivedAsync(() => buildActions(this.feature.hasPermission(this.command()), this.formInvalid()));
+        this.skip = injectRouteSkip();
         CommandPageStore_1.Initializer.initializeStore(this);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CommandPageStore, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.1.4", type: CommandPageStore, isStandalone: true, inputs: { style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, navEndActions: { classPropertyName: "navEndActions", publicName: "navEndActions", isSignal: true, isRequired: false, transformFunction: null }, command: { classPropertyName: "command", publicName: "command", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, extractedFormFieldMap: { classPropertyName: "extractedFormFieldMap", publicName: "extractedFormFieldMap", isSignal: true, isRequired: false, transformFunction: null }, additionalFormFieldMap: { classPropertyName: "additionalFormFieldMap", publicName: "additionalFormFieldMap", isSignal: true, isRequired: false, transformFunction: null }, formFieldMap: { classPropertyName: "formFieldMap", publicName: "formFieldMap", 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: CommandPageStore, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.0.5", type: CommandPageStore, isStandalone: true, inputs: { style: { classPropertyName: "style", publicName: "style", isSignal: true, isRequired: false, transformFunction: null }, navStartActions: { classPropertyName: "navStartActions", publicName: "navStartActions", isSignal: true, isRequired: false, transformFunction: null }, navEndActions: { classPropertyName: "navEndActions", publicName: "navEndActions", isSignal: true, isRequired: false, transformFunction: null }, command: { classPropertyName: "command", publicName: "command", isSignal: true, isRequired: false, transformFunction: null }, form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: false, transformFunction: null }, extractedFormFieldMap: { classPropertyName: "extractedFormFieldMap", publicName: "extractedFormFieldMap", isSignal: true, isRequired: false, transformFunction: null }, additionalFormFieldMap: { classPropertyName: "additionalFormFieldMap", publicName: "additionalFormFieldMap", isSignal: true, isRequired: false, transformFunction: null }, formFieldMap: { classPropertyName: "formFieldMap", publicName: "formFieldMap", isSignal: true, isRequired: false, transformFunction: null }, formFieldKeys: { classPropertyName: "formFieldKeys", publicName: "formFieldKeys", isSignal: true, isRequired: false, transformFunction: null }, formFlatExcludes: { classPropertyName: "formFlatExcludes", publicName: "formFlatExcludes", isSignal: true, isRequired: false, transformFunction: null }, initializeQuery: { classPropertyName: "initializeQuery", publicName: "initializeQuery", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 };
 CommandPageStore = CommandPageStore_1 = __decorate([
     TokenizedType(),
     __metadata("design:paramtypes", [])
 ], CommandPageStore);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CommandPageStore, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: CommandPageStore, decorators: [{
             type: Directive,
             args: [{ standalone: true }]
         }], ctorParameters: () => [] });
@@ -253,31 +372,44 @@ class CommandPage extends NgAtomicComponent {
         this.store = inject(CommandPageStore);
         this.route = inject(ActivatedRoute);
         this.app = inject(AppService);
-        this.parentRouterOutletFrame = inject(RouterOutletFrame);
+        this.parentRouterOutletFrame = inject(RouterOutletFrame, { optional: true });
     }
     onFileSelected(payload) {
         this.dispatch({ id: ActionId.FILE_SELECTED, payload });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CommandPage, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.4", type: CommandPage, isStandalone: true, selector: "pages-command", usesInheritance: true, hostDirectives: [{ directive: CommandPageStore, inputs: ["style", "style", "navEndActions", "navEndActions", "command", "command", "form", "form", "additionalFormFieldMap", "additionalFormFieldMap", "formFieldMap", "formFieldMap"] }], ngImport: i0, template: `
-  <frames-router-outlet>
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: CommandPage, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.5", type: CommandPage, isStandalone: true, selector: "pages-command", providers: [
+            CommandFeature,
+            QueryFeature,
+            QueryGraphqlSchemaFeature
+        ], usesInheritance: true, hostDirectives: [{ directive: CommandPageStore, inputs: ["style", "style", "navEndActions", "navEndActions", "command", "command", "form", "form", "additionalFormFieldMap", "additionalFormFieldMap", "formFieldMap", "formFieldMap", "formFlatExcludes", "formFlatExcludes", "initializeQuery", "initializeQuery", "data", "data"] }], ngImport: i0, template: `
+  <frames-router-outlet [skip]="store.skip()" (action)="dispatch($event)">
     <templates-form
       [form]="store.form()"
       [style]="store.style()"
       [fieldMap]="store.formFieldMap()"
-      [title]="store.feature.title()"
+      [fieldKeys]="store.formFieldKeys()"
+      [formFlatExcludes]="store.formFlatExcludes()"
+      [title]="store.title()"
       [navStartActions]="store.navStartActions()"
       [navEndActions]="store.navEndActions()"
       [actions]="store.actions()"
       (action)="dispatch($event)"
     >
       <frames-tabs [labels]="['Command', 'InitializeQuery']" dashboard>
-        <ng-template #tab><groups-command-form (action)="dispatch($event)"/></ng-template>
-        <ng-template #tab><groups-query-form (action)="dispatch($event)"/></ng-template>
+        <ng-template #tab>
+          <groups-command-form (action)="dispatch($event)"/>
+        </ng-template>
+        <ng-template #tab>
+          <groups-query-form
+            [form]="store.queryFeature.form"
+            (action)="dispatch($event)"
+          />
+        </ng-template>
       </frames-tabs> 
     </templates-form>
   </frames-router-outlet>
-  `, isInline: true, styles: [":host{width:100%;height:100%;display:block;--page-width-lv1-SCOPED-IN-command-UWxd: var(--page-width-lv1)}:host .template{--first-content-height: 0px;width:var(--page-width-lv1-SCOPED-IN-command-UWxd)}:host .template div[dashboard]{padding:0;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: RouterOutletFrame, selector: "frames-router-outlet", outputs: ["events"] }, { kind: "component", type: FormTemplate, selector: "templates-form" }, { kind: "component", type: TabsFrame, selector: "frames-tabs", inputs: ["labels"] }, { kind: "component", type: CommandFormGroup, selector: "groups-command-form", inputs: ["apiJsonUrls"] }, { kind: "component", type: QueryFormGroup, selector: "groups-query-form", inputs: ["keyActions"] }] }); }
+  `, isInline: true, styles: [":host{width:100%;height:100%;display:block;--page-width-lv1-SCOPED-IN-command-KQgS: var(--page-width-lv1)}:host .template{--first-content-height: 0px;width:var(--page-width-lv1-SCOPED-IN-command-KQgS)}:host .template div[dashboard]{padding:0;box-sizing:border-box}\n"], dependencies: [{ kind: "component", type: RouterOutletFrame, selector: "frames-router-outlet", outputs: ["events"] }, { kind: "component", type: FormTemplate, selector: "templates-form" }, { kind: "component", type: TabsFrame, selector: "frames-tabs", inputs: ["labels"], outputs: ["selectedTabIndexChange"] }, { kind: "component", type: CommandFormGroup, selector: "groups-command-form", inputs: ["apiJsonUrls"] }, { kind: "component", type: QueryFormGroup, selector: "groups-query-form", inputs: ["form", "keyActions"] }] }); }
 }
 __decorate([
     Effect(FormTemplateStore.ActionId.FILE_SELECTED),
@@ -285,7 +417,7 @@ __decorate([
     __metadata("design:paramtypes", [Object]),
     __metadata("design:returntype", void 0)
 ], CommandPage.prototype, "onFileSelected", null);
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImport: i0, type: CommandPage, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.5", ngImport: i0, type: CommandPage, decorators: [{
             type: Component,
             args: [{ selector: 'pages-command', imports: [
                         RouterOutletFrame,
@@ -293,21 +425,34 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                         TabsFrame,
                         CommandFormGroup,
                         QueryFormGroup
+                    ], providers: [
+                        CommandFeature,
+                        QueryFeature,
+                        QueryGraphqlSchemaFeature
                     ], template: `
-  <frames-router-outlet>
+  <frames-router-outlet [skip]="store.skip()" (action)="dispatch($event)">
     <templates-form
       [form]="store.form()"
       [style]="store.style()"
       [fieldMap]="store.formFieldMap()"
-      [title]="store.feature.title()"
+      [fieldKeys]="store.formFieldKeys()"
+      [formFlatExcludes]="store.formFlatExcludes()"
+      [title]="store.title()"
       [navStartActions]="store.navStartActions()"
       [navEndActions]="store.navEndActions()"
       [actions]="store.actions()"
       (action)="dispatch($event)"
     >
       <frames-tabs [labels]="['Command', 'InitializeQuery']" dashboard>
-        <ng-template #tab><groups-command-form (action)="dispatch($event)"/></ng-template>
-        <ng-template #tab><groups-query-form (action)="dispatch($event)"/></ng-template>
+        <ng-template #tab>
+          <groups-command-form (action)="dispatch($event)"/>
+        </ng-template>
+        <ng-template #tab>
+          <groups-query-form
+            [form]="store.queryFeature.form"
+            (action)="dispatch($event)"
+          />
+        </ng-template>
       </frames-tabs> 
     </templates-form>
   </frames-router-outlet>
@@ -321,9 +466,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.4", ngImpor
                                 'form',
                                 'additionalFormFieldMap',
                                 'formFieldMap',
+                                'formFlatExcludes',
+                                'initializeQuery',
+                                'data',
                             ]
                         },
-                    ], styles: [":host{width:100%;height:100%;display:block;--page-width-lv1-SCOPED-IN-command-UWxd: var(--page-width-lv1)}:host .template{--first-content-height: 0px;width:var(--page-width-lv1-SCOPED-IN-command-UWxd)}:host .template div[dashboard]{padding:0;box-sizing:border-box}\n"] }]
+                    ], styles: [":host{width:100%;height:100%;display:block;--page-width-lv1-SCOPED-IN-command-KQgS: var(--page-width-lv1)}:host .template{--first-content-height: 0px;width:var(--page-width-lv1-SCOPED-IN-command-KQgS)}:host .template div[dashboard]{padding:0;box-sizing:border-box}\n"] }]
         }], propDecorators: { onFileSelected: [] } });
 
 /**