@operato/app 1.5.49 → 1.5.50

package/.storybook/main.js

@@ -1,3 +1,3 @@
 module.exports = {
-  stories: ['../dist/stories/**/*.stories.{js,md,mdx}'],
-};
+  stories: ['../dist/stories/**/*.stories.{js,md,mdx}']
+}

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.5.50](https://github.com/hatiolab/operato/compare/v1.5.49...v1.5.50) (2023-12-07)
+
+
+### :bug: Bug Fix
+
+* codemirror v6 ([4332ac2](https://github.com/hatiolab/operato/commit/4332ac2fc74ae08bcb3d583a13f5c2469f9a9fcd))
+
+
+
 ### [1.5.49](https://github.com/hatiolab/operato/compare/v1.5.48...v1.5.49) (2023-12-04)
 
 **Note:** Version bump only for package @operato/app

package/dist/src/input/ox-input-graphql.d.ts

@@ -1,15 +1,9 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import 'codemirror/addon/display/fullscreen';
-import 'codemirror/addon/display/autorefresh';
-import 'codemirror/addon/hint/show-hint';
-import 'codemirror/addon/lint/lint';
-import 'codemirror-graphql/hint';
-import 'codemirror-graphql/lint';
-import 'codemirror-graphql/mode';
-import CodeMirror from 'codemirror';
-import { LitElement, PropertyValues } from 'lit';
+import { PropertyValues } from 'lit';
+import { EditorView } from '@codemirror/view';
+import { OxFormField } from '@operato/input';
 /**
  WEB Component for code-mirror graphql editor.
  
@@ -18,7 +12,7 @@ import { LitElement, PropertyValues } from 'lit';
    <ox-input-graphql value=${text} link=${link}>
    </ox-input-graphql>
  */
-export default class OxInputGraphql extends LitElement {
+export default class OxInputGraphql extends OxFormField {
     static styles: import("lit").CSSResult[];
     /**
      * `value`는 에디터에서 작성중인 contents이다.
@@ -32,5 +26,5 @@ export default class OxInputGraphql extends LitElement {
     updated(changes: PropertyValues<this>): Promise<void>;
     render(): import("lit").TemplateResult<1>;
     getSchema(): Promise<import("graphql").GraphQLSchema>;
-    getEditor(): Promise<CodeMirror.EditorFromTextArea | undefined>;
+    getEditor(): Promise<EditorView>;
 }

package/dist/src/input/ox-input-graphql.js

@@ -2,25 +2,20 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import 'codemirror/addon/display/fullscreen';
-import 'codemirror/addon/display/autorefresh';
-import 'codemirror/addon/hint/show-hint';
-import 'codemirror/addon/lint/lint';
-import 'codemirror-graphql/hint';
-import 'codemirror-graphql/lint';
-import 'codemirror-graphql/mode';
-import FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css';
-import ShowHintStyle from '!!text-loader!codemirror/addon/hint/show-hint.css';
-import LintStyle from '!!text-loader!codemirror/addon/lint/lint.css';
-import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css';
-import NightThemeStyle from '!!text-loader!codemirror/theme/night.css';
-import CodeMirror from 'codemirror';
 import { fetch } from 'cross-fetch';
 import { print } from 'graphql';
-import { css, html, LitElement, unsafeCSS } from 'lit';
+import { css, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
+import { graphql } from 'cm6-graphql';
+import { history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import { autocompletion, closeBrackets } from '@codemirror/autocomplete';
+import { bracketMatching, syntaxHighlighting } from '@codemirror/language';
+import { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark';
+import { EditorView, highlightActiveLine, keymap } from '@codemirror/view';
 import { introspectSchema, wrapSchema } from '@graphql-tools/wrap';
 import { GRAPHQL_URI } from '@operato/graphql';
+import { OxFormField } from '@operato/input';
+import { togglefullscreen } from '@operato/utils';
 /**
  WEB Component for code-mirror graphql editor.
  
@@ -29,20 +24,69 @@ import { GRAPHQL_URI } from '@operato/graphql';
    <ox-input-graphql value=${text} link=${link}>
    </ox-input-graphql>
  */
-let OxInputGraphql = class OxInputGraphql extends LitElement {
+let OxInputGraphql = class OxInputGraphql extends OxFormField {
     constructor() {
         super(...arguments);
         this._self_changing = false;
         this._changed = false;
+        // async getEditor() {
+        //   if (!this._editor) {
+        //     try {
+        //       var schema = await this.getSchema()
+        //     } catch (err) {
+        //       console.error(err)
+        //     }
+        //     if (this.textarea) {
+        //       this._editor = CodeMirror.fromTextArea(this.textarea, {
+        //         value: this.value,
+        //         mode: 'graphql',
+        //         lint: {
+        //           //@ts-ignore
+        //           schema
+        //         },
+        //         hintOptions: {
+        //           //@ts-ignore
+        //           schema
+        //         },
+        //         tabSize: 2,
+        //         lineNumbers: false,
+        //         showCursorWhenSelecting: true,
+        //         theme: 'night',
+        //         extraKeys: {
+        //           F11: function (cm) {
+        //             cm.setOption('fullScreen', !cm.getOption('fullScreen'))
+        //           },
+        //           Esc: function (cm) {
+        //             cm.setOption('fullScreen', !cm.getOption('fullScreen'))
+        //           }
+        //         },
+        //         autoRefresh: {
+        //           delay: 500
+        //         }
+        //       })
+        //       this._editor.on('blur', (editor: CodeMirror.Editor, e: FocusEvent) => {
+        //         if (!this._changed) return
+        //         this.value = editor.getValue()
+        //         this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))
+        //       })
+        //       this._editor.on('change', async (editor: CodeMirror.Editor, changeObj: CodeMirror.EditorChange) => {
+        //         this._self_changing = true
+        //         this._changed = true
+        //         await this.requestUpdate()
+        //         this._self_changing = false
+        //       })
+        //     }
+        //   }
+        //   return this._editor
+        // }
     }
     async updated(changes) {
-        if ((!this._editor || changes.has('value') || changes.has('link')) && !this._self_changing) {
-            if (changes.has('link')) {
-                this._editor = undefined;
-            }
-            ;
-            (await this.getEditor()).setValue(this.value === undefined ? '' : String(this.value));
-            // ;(await this.getEditor()).refresh()
+        const editor = await this.getEditor();
+        if (changes.has('value') && editor && !this._self_changing) {
+            const to = editor.state.doc.toString().length;
+            editor.dispatch({
+                changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }
+            });
         }
     }
     render() {
@@ -68,80 +112,71 @@ let OxInputGraphql = class OxInputGraphql extends LitElement {
     }
     async getEditor() {
         if (!this._editor) {
+            var schema;
             try {
-                var schema = await this.getSchema();
+                schema = await this.getSchema();
             }
             catch (err) {
                 console.error(err);
             }
-            if (this.textarea) {
-                this._editor = CodeMirror.fromTextArea(this.textarea, {
-                    value: this.value,
-                    mode: 'graphql',
-                    lint: {
-                        //@ts-ignore
-                        schema
-                    },
-                    hintOptions: {
-                        //@ts-ignore
-                        schema
-                    },
-                    tabSize: 2,
-                    lineNumbers: false,
-                    showCursorWhenSelecting: true,
-                    theme: 'night',
-                    extraKeys: {
-                        F11: function (cm) {
-                            cm.setOption('fullScreen', !cm.getOption('fullScreen'));
+            this._editor = new EditorView({
+                doc: this.value,
+                extensions: [
+                    bracketMatching(),
+                    closeBrackets(),
+                    history(),
+                    autocompletion(),
+                    oneDark,
+                    syntaxHighlighting(oneDarkHighlightStyle),
+                    graphql(schema, {
+                        onShowInDocs(field, type, parentType) {
+                            alert(`Showing in docs.: Field: ${field}, Type: ${type}, ParentType: ${parentType}`);
                         },
-                        Esc: function (cm) {
-                            cm.setOption('fullScreen', !cm.getOption('fullScreen'));
+                        onFillAllFields(view, schema, _query, cursor, token) {
+                            alert(`Filling all fields. Token: ${token}`);
                         }
-                    },
-                    autoRefresh: {
-                        delay: 500
-                    }
-                });
-                this._editor.on('blur', (editor, e) => {
-                    if (!this._changed)
-                        return;
-                    this.value = editor.getValue();
-                    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
-                });
-                this._editor.on('change', async (editor, changeObj) => {
-                    this._self_changing = true;
-                    this._changed = true;
-                    await this.requestUpdate();
-                    this._self_changing = false;
-                });
-            }
+                    }),
+                    highlightActiveLine(),
+                    history(),
+                    keymap.of([
+                        ...historyKeymap,
+                        indentWithTab,
+                        {
+                            key: 'Escape',
+                            run: (view) => {
+                                togglefullscreen(this);
+                                return true;
+                            }
+                        }
+                    ]),
+                    EditorView.updateListener.of(v => {
+                        if (v.docChanged) {
+                            this._self_changing = true;
+                            this.value = v.state.doc.toString();
+                            this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
+                            requestAnimationFrame(() => {
+                                this._self_changing = false;
+                            });
+                        }
+                    })
+                ],
+                parent: this.renderRoot
+            });
         }
         return this._editor;
     }
 };
 OxInputGraphql.styles = [
-    css `
-      ${unsafeCSS(CodeMirrorStyle)}
-      ${unsafeCSS(FullScreenStyle)}
-         ${unsafeCSS(NightThemeStyle)}
-         ${unsafeCSS(LintStyle)}
-         ${unsafeCSS(ShowHintStyle)}
-    `,
     css `
       :host {
-        display: block;
+        display: flex;
+        flex-direction: column;
         position: relative;
+        background: white;
       }
 
-      textarea {
-        display: block;
-        height: 100%;
-        width: 100%;
-        resize: none;
-        font-size: 16px;
-        line-height: 20px;
-        border: 0px;
-        padding: 0px;
+      .cm-editor {
+        flex: 1;
       }
     `
 ];

package/dist/src/input/ox-input-graphql.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-graphql.js","sourceRoot":"","sources":["../../../src/input/ox-input-graphql.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport 'codemirror/addon/display/fullscreen'\nimport 'codemirror/addon/display/autorefresh'\nimport 'codemirror/addon/hint/show-hint'\nimport 'codemirror/addon/lint/lint'\nimport 'codemirror-graphql/hint'\nimport 'codemirror-graphql/lint'\nimport 'codemirror-graphql/mode'\n\nimport FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'\nimport ShowHintStyle from '!!text-loader!codemirror/addon/hint/show-hint.css'\nimport LintStyle from '!!text-loader!codemirror/addon/lint/lint.css'\nimport CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'\nimport NightThemeStyle from '!!text-loader!codemirror/theme/night.css'\nimport CodeMirror from 'codemirror'\nimport { fetch } from 'cross-fetch'\nimport { print } from 'graphql'\nimport { css, html, LitElement, PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { introspectSchema, wrapSchema } from '@graphql-tools/wrap'\nimport { GRAPHQL_URI } from '@operato/graphql'\n\n/**\n WEB Component for code-mirror graphql editor.\n \n Example:\n \n   <ox-input-graphql value=${text} link=${link}>\n   </ox-input-graphql>\n */\n@customElement('ox-input-graphql')\nexport default class OxInputGraphql extends LitElement {\n  static styles = [\n    css`\n      ${unsafeCSS(CodeMirrorStyle)}\n      ${unsafeCSS(FullScreenStyle)}\n         ${unsafeCSS(NightThemeStyle)}\n         ${unsafeCSS(LintStyle)}\n         ${unsafeCSS(ShowHintStyle)}\n    `,\n    css`\n      :host {\n        display: block;\n        position: relative;\n      }\n\n      textarea {\n        display: block;\n        height: 100%;\n        width: 100%;\n        resize: none;\n        font-size: 16px;\n        line-height: 20px;\n        border: 0px;\n        padding: 0px;\n      }\n    `\n  ]\n\n  /**\n   * `value`는 에디터에서 작성중인 contents이다.\n   */\n  @property({ type: String }) value?: string\n  @property({ type: String }) link?: string\n\n  @query('textarea') textarea!: HTMLTextAreaElement\n\n  private _self_changing: boolean = false\n  private _changed: boolean = false\n  private _editor?: CodeMirror.EditorFromTextArea\n\n  async updated(changes: PropertyValues<this>) {\n    if ((!this._editor || changes.has('value') || changes.has('link')) && !this._self_changing) {\n      if (changes.has('link')) {\n        this._editor = undefined\n      }\n      ;(await this.getEditor())!.setValue(this.value === undefined ? '' : String(this.value))\n      // ;(await this.getEditor()).refresh()\n    }\n  }\n\n  render() {\n    return html` <textarea></textarea> `\n  }\n\n  async getSchema() {\n    const executor = async ({ document, variables }: any) => {\n      const query = print(document)\n      const uri = this.link || GRAPHQL_URI\n\n      const fetchResult = await fetch(uri, {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify({ query, variables })\n      })\n      return fetchResult.json()\n    }\n\n    return await wrapSchema({\n      schema: await introspectSchema(executor),\n      executor\n    })\n  }\n\n  async getEditor() {\n    if (!this._editor) {\n      try {\n        var schema = await this.getSchema()\n      } catch (err) {\n        console.error(err)\n      }\n\n      if (this.textarea) {\n        this._editor = CodeMirror.fromTextArea(this.textarea, {\n          value: this.value,\n          mode: 'graphql',\n          lint: {\n            //@ts-ignore\n            schema\n          },\n          hintOptions: {\n            //@ts-ignore\n            schema\n          },\n          tabSize: 2,\n          lineNumbers: false,\n          showCursorWhenSelecting: true,\n          theme: 'night',\n          extraKeys: {\n            F11: function (cm) {\n              cm.setOption('fullScreen', !cm.getOption('fullScreen'))\n            },\n            Esc: function (cm) {\n              cm.setOption('fullScreen', !cm.getOption('fullScreen'))\n            }\n          },\n          autoRefresh: {\n            delay: 500\n          }\n        })\n\n        this._editor.on('blur', (editor: CodeMirror.Editor, e: FocusEvent) => {\n          if (!this._changed) return\n\n          this.value = editor.getValue()\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n        })\n\n        this._editor.on('change', async (editor: CodeMirror.Editor, changeObj: CodeMirror.EditorChange) => {\n          this._self_changing = true\n\n          this._changed = true\n\n          await this.requestUpdate()\n\n          this._self_changing = false\n        })\n      }\n    }\n\n    return this._editor\n  }\n}\n"]}
+{"version":3,"file":"ox-input-graphql.js","sourceRoot":"","sources":["../../../src/input/ox-input-graphql.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { fetch } from 'cross-fetch'\nimport { print } from 'graphql'\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { graphql } from 'cm6-graphql'\n\nimport { history, historyKeymap, indentWithTab } from '@codemirror/commands'\nimport { javascript } from '@codemirror/lang-javascript'\nimport { EditorState } from '@codemirror/state'\nimport { autocompletion, closeBrackets } from '@codemirror/autocomplete'\nimport { bracketMatching, syntaxHighlighting } from '@codemirror/language'\nimport { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'\nimport { EditorView, highlightActiveLine, keymap } from '@codemirror/view'\n\nimport { introspectSchema, wrapSchema } from '@graphql-tools/wrap'\nimport { GRAPHQL_URI } from '@operato/graphql'\nimport { OxFormField } from '@operato/input'\nimport { togglefullscreen } from '@operato/utils'\n\n/**\n WEB Component for code-mirror graphql editor.\n \n Example:\n \n   <ox-input-graphql value=${text} link=${link}>\n   </ox-input-graphql>\n */\n@customElement('ox-input-graphql')\nexport default class OxInputGraphql extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        background: white;\n      }\n\n      .cm-editor {\n        flex: 1;\n      }\n    `\n  ]\n\n  /**\n   * `value`는 에디터에서 작성중인 contents이다.\n   */\n  @property({ type: String }) value?: string\n  @property({ type: String }) link?: string\n\n  @query('textarea') textarea!: HTMLTextAreaElement\n\n  private _self_changing: boolean = false\n  private _changed: boolean = false\n  private _editor?: EditorView\n\n  async updated(changes: PropertyValues<this>) {\n    const editor = await this.getEditor()\n    if (changes.has('value') && editor && !this._self_changing) {\n      const to = editor.state.doc.toString().length\n      editor.dispatch({\n        changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }\n      })\n    }\n  }\n\n  render() {\n    return html` <textarea></textarea> `\n  }\n\n  async getSchema() {\n    const executor = async ({ document, variables }: any) => {\n      const query = print(document)\n      const uri = this.link || GRAPHQL_URI\n\n      const fetchResult = await fetch(uri, {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify({ query, variables })\n      })\n      return fetchResult.json()\n    }\n\n    return await wrapSchema({\n      schema: await introspectSchema(executor),\n      executor\n    })\n  }\n\n  async getEditor() {\n    if (!this._editor) {\n      var schema\n      try {\n        schema = await this.getSchema()\n      } catch (err) {\n        console.error(err)\n      }\n\n      this._editor = new EditorView({\n        doc: this.value,\n        extensions: [\n          bracketMatching(),\n          closeBrackets(),\n          history(),\n          autocompletion(),\n          oneDark,\n          syntaxHighlighting(oneDarkHighlightStyle),\n          graphql(schema, {\n            onShowInDocs(field, type, parentType) {\n              alert(`Showing in docs.: Field: ${field}, Type: ${type}, ParentType: ${parentType}`)\n            },\n            onFillAllFields(view, schema, _query, cursor, token) {\n              alert(`Filling all fields. Token: ${token}`)\n            }\n          }),\n          highlightActiveLine(),\n          history(),\n          keymap.of([\n            ...historyKeymap,\n            indentWithTab,\n            {\n              key: 'Escape',\n              run: (view: EditorView) => {\n                togglefullscreen(this)\n                return true\n              }\n            }\n          ]),\n          EditorView.updateListener.of(v => {\n            if (v.docChanged) {\n              this._self_changing = true\n              this.value = v.state.doc.toString()\n              this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n              requestAnimationFrame(() => {\n                this._self_changing = false\n              })\n            }\n          })\n        ],\n        parent: this.renderRoot\n      })\n    }\n\n    return this._editor\n  }\n\n  // async getEditor() {\n  //   if (!this._editor) {\n  //     try {\n  //       var schema = await this.getSchema()\n  //     } catch (err) {\n  //       console.error(err)\n  //     }\n\n  //     if (this.textarea) {\n  //       this._editor = CodeMirror.fromTextArea(this.textarea, {\n  //         value: this.value,\n  //         mode: 'graphql',\n  //         lint: {\n  //           //@ts-ignore\n  //           schema\n  //         },\n  //         hintOptions: {\n  //           //@ts-ignore\n  //           schema\n  //         },\n  //         tabSize: 2,\n  //         lineNumbers: false,\n  //         showCursorWhenSelecting: true,\n  //         theme: 'night',\n  //         extraKeys: {\n  //           F11: function (cm) {\n  //             cm.setOption('fullScreen', !cm.getOption('fullScreen'))\n  //           },\n  //           Esc: function (cm) {\n  //             cm.setOption('fullScreen', !cm.getOption('fullScreen'))\n  //           }\n  //         },\n  //         autoRefresh: {\n  //           delay: 500\n  //         }\n  //       })\n\n  //       this._editor.on('blur', (editor: CodeMirror.Editor, e: FocusEvent) => {\n  //         if (!this._changed) return\n\n  //         this.value = editor.getValue()\n  //         this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  //       })\n\n  //       this._editor.on('change', async (editor: CodeMirror.Editor, changeObj: CodeMirror.EditorChange) => {\n  //         this._self_changing = true\n\n  //         this._changed = true\n\n  //         await this.requestUpdate()\n\n  //         this._self_changing = false\n  //       })\n  //     }\n  //   }\n\n  //   return this._editor\n  // }\n}\n"]}

package/dist/stories/ox-input-graphql.stories.d.ts

@@ -0,0 +1,25 @@
+import '../src/input/ox-input-graphql.js';
+import { TemplateResult } from 'lit';
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        value: {
+            control: string;
+        };
+        name: {
+            control: string;
+        };
+    };
+};
+export default _default;
+interface Story<T> {
+    (args: T): TemplateResult;
+    args?: Partial<T>;
+    argTypes?: Record<string, unknown>;
+}
+interface ArgTypes {
+    name?: string;
+    value?: string;
+}
+export declare const Regular: Story<ArgTypes>;

package/dist/stories/ox-input-graphql.stories.js

@@ -0,0 +1,44 @@
+import '../src/input/ox-input-graphql.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-input-graphql',
+    component: 'ox-input-graphql',
+    argTypes: {
+        value: { control: 'text' },
+        name: { control: 'text' }
+    }
+};
+const Template = ({ name = 'code', value = '' }) => html `
+  <link href="/themes/app-theme.css" rel="stylesheet" />
+  <link href="https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel="stylesheet" />
+  <style>
+    body {
+    }
+  </style>
+
+  <ox-input-graphql
+    @change=${(e) => {
+    console.log(e.target.value);
+}}
+    name=${name}
+    .value=${value}
+  >
+  </ox-input-graphql>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    name: 'code',
+    value: `
+query privileges {
+  privileges {
+    items {
+      privilege
+      category
+      description
+    }
+    total
+  }
+}
+`
+};
+//# sourceMappingURL=ox-input-graphql.stories.js.map

package/dist/stories/ox-input-graphql.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-graphql.stories.js","sourceRoot":"","sources":["../../stories/ox-input-graphql.stories.ts"],"names":[],"mappings":"AAAA,OAAO,kCAAkC,CAAA;AAEzC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,kBAAkB;IAC7B,QAAQ,EAAE;QACR,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;QAC1B,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE;KAC1B;CACF,CAAA;AAaD,MAAM,QAAQ,GAAoB,CAAC,EAAE,IAAI,GAAG,MAAM,EAAE,KAAK,GAAG,EAAE,EAAY,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;cASrE,CAAC,CAAQ,EAAE,EAAE;IACrB,OAAO,CAAC,GAAG,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;AACnD,CAAC;WACM,IAAI;aACF,KAAK;;;CAGjB,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AACxC,OAAO,CAAC,IAAI,GAAG;IACb,IAAI,EAAE,MAAM;IACZ,KAAK,EAAE;;;;;;;;;;;CAWR;CACA,CAAA","sourcesContent":["import '../src/input/ox-input-graphql.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-graphql',\n  component: 'ox-input-graphql',\n  argTypes: {\n    value: { control: 'text' },\n    name: { control: 'text' }\n  }\n}\n\ninterface Story<T> {\n  (args: T): TemplateResult\n  args?: Partial<T>\n  argTypes?: Record<string, unknown>\n}\n\ninterface ArgTypes {\n  name?: string\n  value?: string\n}\n\nconst Template: Story<ArgTypes> = ({ name = 'code', value = '' }: ArgTypes) => html`\n  <link href=\"/themes/app-theme.css\" rel=\"stylesheet\" />\n  <link href=\"https://fonts.googleapis.com/css?family=Material+Icons&display=block\" rel=\"stylesheet\" />\n  <style>\n    body {\n    }\n  </style>\n\n  <ox-input-graphql\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n  >\n  </ox-input-graphql>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'code',\n  value: `\nquery privileges {\n  privileges {\n    items {\n      privilege\n      category\n      description\n    }\n    total\n  }\n}\n`\n}\n"]}