@operato/input 1.5.49 → 1.5.51

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.5.51](https://github.com/hatiolab/operato/compare/v1.5.50...v1.5.51) (2023-12-07)
+
+
+### :bug: Bug Fix
+
+* ox-input-code, ox-input-graphql ([5cf8a78](https://github.com/hatiolab/operato/commit/5cf8a782a27d3980aa55c428273e491b17dba73b))
+
+
+
+### [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)
 
 

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

@@ -1,12 +1,8 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import 'codemirror/mode/javascript/javascript';
-import 'codemirror/mode/python/python';
-import 'codemirror/addon/display/fullscreen';
-import 'codemirror/addon/display/autorefresh';
-import CodeMirror from 'codemirror';
 import { PropertyValues } from 'lit';
+import { EditorView } from '@codemirror/view';
 import { OxFormField } from './ox-form-field';
 /**
 WEB Component for code-mirror code editor.
@@ -26,9 +22,7 @@ export declare class OxInputCode extends OxFormField {
     tabSize: number;
     tabAsSpace: boolean;
     private _self_changing;
-    private _editor;
-    private _changed;
+    private _editor?;
     updated(changes: PropertyValues<this>): void;
-    render(): import("lit").TemplateResult<1>;
-    get editor(): CodeMirror.EditorFromTextArea | null | undefined;
+    get editor(): EditorView;
 }

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

@@ -2,16 +2,14 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import 'codemirror/mode/javascript/javascript';
-import 'codemirror/mode/python/python';
-import 'codemirror/addon/display/fullscreen';
-import 'codemirror/addon/display/autorefresh';
-import FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css';
-import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css';
-import NightThemeStyle from '!!text-loader!codemirror/theme/night.css';
-import CodeMirror from 'codemirror';
-import { css, html, unsafeCSS } from 'lit';
+import { css } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import { EditorView, highlightActiveLine, keymap } from '@codemirror/view';
+import { autocompletion, closeBrackets } from '@codemirror/autocomplete';
+import { bracketMatching, syntaxHighlighting } from '@codemirror/language';
+import { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark';
+import { javascript } from '@codemirror/lang-javascript';
 import { ScrollbarStyles } from '@operato/styles';
 import { togglefullscreen } from '@operato/utils';
 import { OxFormField } from './ox-form-field';
@@ -33,119 +31,63 @@ let OxInputCode = class OxInputCode extends OxFormField {
         this.tabSize = 2;
         this.tabAsSpace = true;
         this._self_changing = false;
-        this._editor = null;
-        this._changed = false;
     }
     static { this.styles = [
         ScrollbarStyles,
         css `
-      ${unsafeCSS(CodeMirrorStyle)}
-      ${unsafeCSS(FullScreenStyle)}
-        ${unsafeCSS(NightThemeStyle)}
-    `,
-        css `
       :host {
         display: flex;
         flex-direction: column;
         position: relative;
+        background: white;
       }
 
-      .CodeMirror {
+      .cm-editor {
         flex: 1;
       }
-
-      textarea {
-        display: block;
-        height: 100%;
-        width: 100%;
-        resize: none;
-        font-size: 16px;
-        line-height: 20px;
-        border: 0px;
-        padding: 0px;
-      }
-
-      #fs-toggle:not(:fullscreen) {
-        background-color: #afa;
-      }
-
-      .CodeMirror-fullscreen {
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 9999;
-      }
     `
     ]; }
-    // private lint: any
-    // private hintOptions: any
     updated(changes) {
         if (changes.has('value') && this.editor && !this._self_changing) {
-            this.editor?.setValue(this.value === undefined ? '' : String(this.value));
-            this.editor?.refresh();
+            const to = this.editor.state.doc.toString().length;
+            this.editor.dispatch({
+                changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }
+            });
         }
     }
-    render() {
-        return html ` <textarea></textarea> `;
-    }
     get editor() {
         if (!this._editor) {
-            let textarea = this.renderRoot.querySelector('textarea');
-            let mode = this.mode || 'javascript';
-            let tabSize = Number(this.tabSize) || 2;
-            let indentUnit = tabSize;
-            // let lint = this.lint
-            // let hintOptions = this.hintOptions
-            let tabAsSpace = this.tabAsSpace;
-            if (textarea) {
-                this._editor = CodeMirror.fromTextArea(textarea, {
-                    value: this.value,
-                    mode,
-                    // lint,
-                    // hintOptions,
-                    tabSize,
-                    indentUnit,
-                    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'))
-                            togglefullscreen(cm.getWrapperElement());
-                        },
-                        // https://github.com/codemirror/CodeMirror/issues/988#issuecomment-37095621
-                        Tab: tabAsSpace
-                            ? function (cm) {
-                                cm.replaceSelection(Array(cm.getOption('tabSize')).join(' '));
-                            }
-                            : false
-                    },
-                    autoRefresh: {
-                        delay: 500
-                    }
-                });
-                this._editor.on('blur', e => {
-                    if (!this._changed)
-                        return;
-                    this.value = e.getValue();
-                    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }));
-                });
-                this._editor.on('change', async (e) => {
-                    this._self_changing = true;
-                    this._changed = true;
-                    await this.updateComplete;
-                    this._self_changing = false;
-                });
-                this._editor.on('keydown', async (_, e) => {
-                    e.stopPropagation();
-                });
-            }
+            this._editor = new EditorView({
+                doc: this.value,
+                extensions: [
+                    bracketMatching(),
+                    closeBrackets(),
+                    history(),
+                    autocompletion(),
+                    oneDark,
+                    syntaxHighlighting(oneDarkHighlightStyle),
+                    highlightActiveLine(),
+                    javascript(),
+                    keymap.of([...historyKeymap, indentWithTab]),
+                    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
+            });
         }
+        this._editor.contentDOM.addEventListener('keydown', event => {
+            if (event.key === 'Escape') {
+                togglefullscreen(this._editor.contentDOM);
+            }
+        });
         return this._editor;
     }
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-code.js","sourceRoot":"","sources":["../../src/ox-input-code.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport 'codemirror/mode/javascript/javascript'\nimport 'codemirror/mode/python/python'\nimport 'codemirror/addon/display/fullscreen'\nimport 'codemirror/addon/display/autorefresh'\n\nimport FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'\nimport CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'\nimport NightThemeStyle from '!!text-loader!codemirror/theme/night.css'\nimport CodeMirror from 'codemirror'\nimport { css, html, PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { togglefullscreen } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field'\n\n/**\nWEB Component for code-mirror code editor.\n\nExample:\n\n  <ox-input-code .value=${text} mode=${mode} tab-size=\"4\" tab-as-space=\"true\">\n  </ox-input-code>\n*/\n@customElement('ox-input-code')\nexport class OxInputCode extends OxFormField {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      ${unsafeCSS(CodeMirrorStyle)}\n      ${unsafeCSS(FullScreenStyle)}\n        ${unsafeCSS(NightThemeStyle)}\n    `,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n      }\n\n      .CodeMirror {\n        flex: 1;\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      #fs-toggle:not(:fullscreen) {\n        background-color: #afa;\n      }\n\n      .CodeMirror-fullscreen {\n        position: fixed;\n        top: 0;\n        left: 0;\n        width: 100%;\n        height: 100%;\n        z-index: 9999;\n      }\n    `\n  ]\n\n  /**\n   * `value`는 에디터에서 작성중인 contents이다.\n   */\n  @property({ type: String }) value: string = ''\n  @property({ type: String }) mode?: string\n  @property({ type: Number, attribute: 'tab-size' }) tabSize: number = 2\n  @property({ type: Boolean, attribute: 'tab-as-space' }) tabAsSpace: boolean = true\n\n  private _self_changing: boolean = false\n  private _editor: CodeMirror.EditorFromTextArea | null | undefined = null\n  private _changed: boolean = false\n\n  // private lint: any\n  // private hintOptions: any\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value') && this.editor && !this._self_changing) {\n      this.editor?.setValue(this.value === undefined ? '' : String(this.value))\n      this.editor?.refresh()\n    }\n  }\n\n  render() {\n    return html` <textarea></textarea> `\n  }\n\n  get editor() {\n    if (!this._editor) {\n      let textarea = this.renderRoot.querySelector('textarea')\n      let mode = this.mode || 'javascript'\n      let tabSize = Number(this.tabSize) || 2\n      let indentUnit = tabSize\n      // let lint = this.lint\n      // let hintOptions = this.hintOptions\n      let tabAsSpace = this.tabAsSpace\n\n      if (textarea) {\n        this._editor = CodeMirror.fromTextArea(textarea, {\n          value: this.value,\n          mode,\n          // lint,\n          // hintOptions,\n          tabSize,\n          indentUnit,\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              togglefullscreen(cm.getWrapperElement())\n            },\n            // https://github.com/codemirror/CodeMirror/issues/988#issuecomment-37095621\n            Tab: tabAsSpace\n              ? function (cm: CodeMirror.Editor) {\n                  cm.replaceSelection(Array(cm.getOption('tabSize')).join(' '))\n                }\n              : false\n          },\n          autoRefresh: {\n            delay: 500\n          }\n        })\n\n        this._editor.on('blur', e => {\n          if (!this._changed) return\n\n          this.value = e.getValue()\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n        })\n\n        this._editor.on('change', async e => {\n          this._self_changing = true\n\n          this._changed = true\n\n          await this.updateComplete\n          this._self_changing = false\n        })\n\n        this._editor.on('keydown', async (_: any, e: Event) => {\n          e.stopPropagation()\n        })\n      }\n    }\n\n    return this._editor\n  }\n}\n"]}
+{"version":3,"file":"ox-input-code.js","sourceRoot":"","sources":["../../src/ox-input-code.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { history, historyKeymap, indentWithTab } from '@codemirror/commands'\nimport { EditorView, highlightActiveLine, keymap } from '@codemirror/view'\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'\n\nimport { javascript } from '@codemirror/lang-javascript'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { togglefullscreen } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field'\n\n/**\nWEB Component for code-mirror code editor.\n\nExample:\n\n  <ox-input-code .value=${text} mode=${mode} tab-size=\"4\" tab-as-space=\"true\">\n  </ox-input-code>\n*/\n@customElement('ox-input-code')\nexport class OxInputCode extends OxFormField {\n  static styles = [\n    ScrollbarStyles,\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 }) mode?: string\n  @property({ type: Number, attribute: 'tab-size' }) tabSize: number = 2\n  @property({ type: Boolean, attribute: 'tab-as-space' }) tabAsSpace: boolean = true\n\n  private _self_changing: boolean = false\n  private _editor?: EditorView\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value') && this.editor && !this._self_changing) {\n      const to = this.editor.state.doc.toString().length\n      this.editor.dispatch({\n        changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }\n      })\n    }\n  }\n\n  get editor() {\n    if (!this._editor) {\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          highlightActiveLine(),\n          javascript(),\n          keymap.of([...historyKeymap, indentWithTab]),\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    this._editor.contentDOM.addEventListener('keydown', event => {\n      if (event.key === 'Escape') {\n        togglefullscreen(this._editor!.contentDOM)\n      }\n    })\n\n    return this._editor\n  }\n}\n"]}

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

@@ -0,0 +1,29 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { PropertyValues } from 'lit';
+import { EditorView } from '@codemirror/view';
+import { OxFormField } from './ox-form-field';
+/**
+WEB Component for code-mirror code editor.
+
+Example:
+
+  <ox-input-code .value=${text} mode=${mode} tab-size="4" tab-as-space="true">
+  </ox-input-code>
+*/
+export declare class OxInputCode extends OxFormField {
+    static styles: import("lit").CSSResult[];
+    /**
+     * `value`는 에디터에서 작성중인 contents이다.
+     */
+    value: string;
+    mode?: string;
+    tabSize: number;
+    tabAsSpace: boolean;
+    private _self_changing;
+    private _editor?;
+    private _changed;
+    updated(changes: PropertyValues<this>): void;
+    get editor(): EditorView;
+}

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

@@ -0,0 +1,108 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import { css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { history, historyKeymap, indentWithTab } from '@codemirror/commands';
+import { EditorView, highlightActiveLine, keymap } from '@codemirror/view';
+import { javascript } from '@codemirror/lang-javascript';
+import { ScrollbarStyles } from '@operato/styles';
+import { togglefullscreen } from '@operato/utils';
+import { OxFormField } from './ox-form-field';
+/**
+WEB Component for code-mirror code editor.
+
+Example:
+
+  <ox-input-code .value=${text} mode=${mode} tab-size="4" tab-as-space="true">
+  </ox-input-code>
+*/
+let OxInputCode = class OxInputCode extends OxFormField {
+    constructor() {
+        super(...arguments);
+        /**
+         * `value`는 에디터에서 작성중인 contents이다.
+         */
+        this.value = '';
+        this.tabSize = 2;
+        this.tabAsSpace = true;
+        this._self_changing = false;
+        this._changed = false;
+    }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        position: relative;
+        background: white;
+      }
+
+      .cm-editor {
+        flex: 1;
+      }
+    `
+    ]; }
+    updated(changes) {
+        if (changes.has('value') && this.editor && !this._self_changing) {
+            const to = this.editor.state.doc.toString().length;
+            this.editor.dispatch({
+                changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }
+            });
+        }
+    }
+    get editor() {
+        if (!this._editor) {
+            this._editor = new EditorView({
+                doc: this.value,
+                extensions: [
+                    highlightActiveLine(),
+                    history(),
+                    javascript(),
+                    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;
+    }
+};
+__decorate([
+    property({ type: String })
+], OxInputCode.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], OxInputCode.prototype, "mode", void 0);
+__decorate([
+    property({ type: Number, attribute: 'tab-size' })
+], OxInputCode.prototype, "tabSize", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'tab-as-space' })
+], OxInputCode.prototype, "tabAsSpace", void 0);
+OxInputCode = __decorate([
+    customElement('ox-input-code')
+], OxInputCode);
+export { OxInputCode };
+//# sourceMappingURL=ox-input-graphql.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-graphql.js","sourceRoot":"","sources":["../../src/ox-input-graphql.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { history, historyKeymap, indentWithTab } from '@codemirror/commands'\nimport { EditorView, highlightActiveLine, keymap } from '@codemirror/view'\nimport { javascript } from '@codemirror/lang-javascript'\nimport { ScrollbarStyles } from '@operato/styles'\nimport { togglefullscreen } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field'\n\n/**\nWEB Component for code-mirror code editor.\n\nExample:\n\n  <ox-input-code .value=${text} mode=${mode} tab-size=\"4\" tab-as-space=\"true\">\n  </ox-input-code>\n*/\n@customElement('ox-input-code')\nexport class OxInputCode extends OxFormField {\n  static styles = [\n    ScrollbarStyles,\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 }) mode?: string\n  @property({ type: Number, attribute: 'tab-size' }) tabSize: number = 2\n  @property({ type: Boolean, attribute: 'tab-as-space' }) tabAsSpace: boolean = true\n\n  private _self_changing: boolean = false\n  private _editor?: EditorView\n  private _changed: boolean = false\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value') && this.editor && !this._self_changing) {\n      const to = this.editor.state.doc.toString().length\n      this.editor.dispatch({\n        changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }\n      })\n    }\n  }\n\n  get editor() {\n    if (!this._editor) {\n      this._editor = new EditorView({\n        doc: this.value,\n        extensions: [\n          highlightActiveLine(),\n          history(),\n          javascript(),\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"]}

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

@@ -0,0 +1,25 @@
+import '../src/ox-input-code.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-code.stories.js

@@ -0,0 +1,36 @@
+import '../src/ox-input-code.js';
+import { html } from 'lit';
+export default {
+    title: 'ox-input-code',
+    component: 'ox-input-code',
+    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 {
+    }
+    ox-input-code {
+      height: 300px;
+    }
+  </style>
+
+  <ox-input-code
+    @change=${(e) => {
+    console.log(e.target.value);
+}}
+    name=${name}
+    .value=${value}
+  >
+  </ox-input-code>
+`;
+export const Regular = Template.bind({});
+Regular.args = {
+    name: 'code',
+    value: ''
+};
+//# sourceMappingURL=ox-input-code.stories.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-code.stories.js","sourceRoot":"","sources":["../../stories/ox-input-code.stories.ts"],"names":[],"mappings":"AAAA,OAAO,yBAAyB,CAAA;AAEhC,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,eAAe;IACb,KAAK,EAAE,eAAe;IACtB,SAAS,EAAE,eAAe;IAC1B,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;;;;;;;;;;;;cAYrE,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,EAAE;CACV,CAAA","sourcesContent":["import '../src/ox-input-code.js'\n\nimport { html, TemplateResult } from 'lit'\n\nexport default {\n  title: 'ox-input-code',\n  component: 'ox-input-code',\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    ox-input-code {\n      height: 300px;\n    }\n  </style>\n\n  <ox-input-code\n    @change=${(e: Event) => {\n      console.log((e.target as HTMLInputElement).value)\n    }}\n    name=${name}\n    .value=${value}\n  >\n  </ox-input-code>\n`\n\nexport const Regular = Template.bind({})\nRegular.args = {\n  name: 'code',\n  value: ''\n}\n"]}