@operato/app 1.0.0-alpha.2 → 1.0.0-alpha.20

package/dist/src/input/ox-input-fill-style.js

@@ -0,0 +1,325 @@
+/**
+ * @license Copyright © HatioLab Inc. All rights reserved.
+ */
+import { __decorate } from "tslib";
+import '@operato/i18n/ox-i18n.js';
+import '@operato/input/ox-input-color.js';
+import '@operato/input/ox-input-color-stops.js';
+import './ox-input-color-gradient.js';
+import './ox-input-background-pattern.js';
+import { OxFormField } from '@operato/input';
+import { css, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+let OxInputColorStyle = class OxInputColorStyle extends OxFormField {
+    constructor() {
+        super(...arguments);
+        this._block_reset = false;
+    }
+    updated(changes) {
+        changes.has('value') && this._onChangedValue(this.value || {});
+    }
+    render() {
+        return html `
+      <div @change=${(e) => this._onChangedFillType(e)} fill-type>
+        <input
+          type="radio"
+          id="fill-type-no"
+          name="fill-type"
+          value="no"
+          .checked=${!this.fillType || this.fillType == 'no'}
+        />
+        <label for="fill-type-no"><ox-i18n msgid="label.no-fill">no fill</ox-i18n></label>
+        <input type="radio" id="fill-type-solid" name="fill-type" value="solid" .checked=${this.fillType == 'solid'} />
+        <label for="fill-type-solid"><ox-i18n msgid="label.solid">solid</ox-i18n></label>
+        <input
+          type="radio"
+          id="fill-type-gradient"
+          name="fill-type"
+          value="gradient"
+          .checked=${this.fillType == 'gradient'}
+        />
+        <label for="fill-type-gradient"><ox-i18n msgid="label.gradient">gradient</ox-i18n></label>
+        <input
+          type="radio"
+          id="fill-type-pattern"
+          name="fill-type"
+          value="pattern"
+          .checked=${this.fillType == 'pattern'}
+        />
+        <label for="fill-type-pattern"><ox-i18n msgid="label.pattern">pattern</ox-i18n></label>
+      </div>
+
+      <div editors>
+        <div ?active=${this.fillType == 'no'}></div>
+
+        <div class="grid-10" ?active=${this.fillType == 'solid'}>
+          <label class="icon-only-label color"></label>
+          <ox-input-color @change=${(e) => this._onChangedSolid(e)} .value=${this.solid}> </ox-input-color>
+        </div>
+
+        <div ?active=${this.fillType == 'gradient'}>
+          <ox-input-color-gradient @change=${(e) => this._onChandedGradient(e)} .value=${this.gradient}>
+          </ox-input-color-gradient>
+        </div>
+
+        <div ?active=${this.fillType == 'pattern'}>
+          <ox-input-background-pattern @change=${(e) => this._onChangedPattern(e)} .value=${this.pattern}>
+          </ox-input-background-pattern>
+        </div>
+      </div>
+    `;
+    }
+    async _onChangedValue(value) {
+        /*
+         * this._block_reset의 역할은 내부 사용자 인터렉션에 의한 value의 변경시에는 각 type별 이전값을 유지하기 위함이다.
+         */
+        await this.requestUpdate();
+        /* 설정 값에 따라서, 멤버 속성을 설정한다. */
+        if (!value) {
+            this.fillType = 'no';
+            if (!this._block_reset) {
+                this.solid = undefined;
+                this.gradient = undefined;
+                this.pattern = undefined;
+            }
+            this._block_reset = false;
+            return;
+        }
+        switch (typeof value) {
+            case 'string':
+                this.fillType = 'solid';
+                this.solid = value;
+                if (!this._block_reset) {
+                    this.gradient = undefined;
+                    this.pattern = undefined;
+                }
+                break;
+            case 'object':
+                this.fillType = value.type;
+                if (value.type === 'gradient') {
+                    this.gradient = {
+                        type: value.gradientType || 'linear',
+                        colorStops: value.colorStops || [
+                            {
+                                position: 0,
+                                color: this.solid || '#000000'
+                            },
+                            {
+                                position: 1,
+                                color: this.solid || '#FFFFFF'
+                            }
+                        ],
+                        rotation: Number(value.rotation) || 0,
+                        center: value.center
+                    };
+                    if (!this._block_reset) {
+                        this.pattern = undefined;
+                        this.solid = undefined;
+                    }
+                }
+                else if (value.type === 'pattern') {
+                    this.pattern = {
+                        image: value.image,
+                        offsetX: Number(value.offsetX) || 0,
+                        offsetY: Number(value.offsetY) || 0,
+                        width: Number(value.width),
+                        height: Number(value.height),
+                        align: value.align,
+                        fitPattern: value.fitPattern
+                    };
+                    if (!this._block_reset) {
+                        this.gradient = undefined;
+                        this.solid = undefined;
+                    }
+                }
+                break;
+            default:
+        }
+        this._block_reset = false;
+    }
+    _onChangedFillType(e) {
+        const element = e.target;
+        this.fillType = element.value;
+        switch (this.fillType) {
+            case 'gradient':
+                if (!this.gradient) {
+                    this.gradient = {
+                        type: 'linear',
+                        colorStops: [
+                            {
+                                position: 0,
+                                color: this.solid || '#000000'
+                            },
+                            {
+                                position: 1,
+                                color: this.solid || '#FFFFFF'
+                            }
+                        ],
+                        rotation: 0,
+                        center: 'center'
+                    };
+                }
+                this.value = {
+                    type: 'gradient',
+                    gradientType: this.gradient.type || 'linear',
+                    colorStops: this.gradient.colorStops || [
+                        {
+                            position: 0,
+                            color: this.solid || '#000000'
+                        },
+                        {
+                            position: 1,
+                            color: this.solid || '#FFFFFF'
+                        }
+                    ],
+                    rotation: Number(this.gradient.rotation) || 0,
+                    center: this.gradient.center
+                };
+                break;
+            case 'pattern':
+                if (!this.pattern)
+                    this.pattern = {};
+                this.value = {
+                    type: 'pattern',
+                    image: this.pattern.image,
+                    offsetX: Number(this.pattern.offsetX) || 0,
+                    offsetY: Number(this.pattern.offsetY) || 0,
+                    width: Number(this.pattern.width),
+                    height: Number(this.pattern.height),
+                    align: this.pattern.align,
+                    fitPattern: this.pattern.fitPattern
+                };
+                break;
+            case 'solid':
+                if (!this.solid)
+                    this.solid = '#fff';
+                this.value = this.solid;
+                break;
+            case 'no':
+                this.value = '';
+                break;
+        }
+        this._block_reset = true;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+    _onChangedSolid(e) {
+        if (this.fillType !== 'solid')
+            return;
+        this.solid = e.target.value;
+        this.value = this.solid;
+        this._block_reset = true;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+    _onChandedGradient(e) {
+        /*
+         * TODO Gradient의 rotation은 symmetry 기능 등으로 외부에서 변경될 수도 있다.
+         * 이 점을 감안해서, 외부 변경에 대한 대응을 해야 한다.
+         */
+        if (this.fillType !== 'gradient') {
+            return;
+        }
+        this.gradient = e.target.value;
+        this.value = {
+            type: 'gradient',
+            gradientType: this.gradient.type || 'linear',
+            colorStops: this.gradient.colorStops || [
+                {
+                    position: 0,
+                    color: this.solid || '#000000'
+                },
+                {
+                    position: 1,
+                    color: this.solid || '#FFFFFF'
+                }
+            ],
+            rotation: Number(this.gradient.rotation) || 0,
+            center: this.gradient.center
+        };
+        this._block_reset = true;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+    _onChangedPattern(e) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        if (this.fillType !== 'pattern')
+            return;
+        this.pattern = e.target.value;
+        this.value = {
+            type: 'pattern',
+            image: (_a = this.pattern) === null || _a === void 0 ? void 0 : _a.image,
+            offsetX: Number((_b = this.pattern) === null || _b === void 0 ? void 0 : _b.offsetX) || 0,
+            offsetY: Number((_c = this.pattern) === null || _c === void 0 ? void 0 : _c.offsetY) || 0,
+            width: Number((_d = this.pattern) === null || _d === void 0 ? void 0 : _d.width),
+            height: Number((_e = this.pattern) === null || _e === void 0 ? void 0 : _e.height),
+            align: (_f = this.pattern) === null || _f === void 0 ? void 0 : _f.align,
+            fitPattern: (_g = this.pattern) === null || _g === void 0 ? void 0 : _g.fitPattern
+        };
+        this._block_reset = true;
+        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+    }
+};
+OxInputColorStyle.styles = css `
+    :host {
+      display: flex;
+      flex-direction: column;
+    }
+
+    [fill-type] {
+      display: flex;
+      margin: 0 0 14px 0;
+    }
+
+    [fill-type] * {
+      flex: auto;
+      margin: 0;
+      text-align: left;
+      align-self: center;
+    }
+
+    .grid-10 {
+      display: grid;
+
+      grid-template-columns: repeat(10, 1fr);
+      grid-gap: 5px;
+      grid-auto-rows: minmax(24px, auto);
+    }
+
+    .grid-10 > ox-input-color {
+      grid-column: span 4;
+    }
+
+    .grid-10 > .icon-only-label {
+      grid-column: span 1;
+
+      background: url(/assets/images/icon-properties-label.png) no-repeat;
+      float: left;
+      margin: 0;
+    }
+
+    .icon-only-label.color {
+      background-position: 70% -498px;
+    }
+
+    [editors] > :not([active]) {
+      display: none;
+    }
+  `;
+__decorate([
+    property({ type: Object })
+], OxInputColorStyle.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], OxInputColorStyle.prototype, "fillType", void 0);
+__decorate([
+    property({ type: String })
+], OxInputColorStyle.prototype, "solid", void 0);
+__decorate([
+    property({ type: Object })
+], OxInputColorStyle.prototype, "gradient", void 0);
+__decorate([
+    property({ type: Object })
+], OxInputColorStyle.prototype, "pattern", void 0);
+OxInputColorStyle = __decorate([
+    customElement('ox-input-fill-style')
+], OxInputColorStyle);
+export { OxInputColorStyle };
+//# sourceMappingURL=ox-input-fill-style.js.map

package/dist/src/input/ox-input-fill-style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-fill-style.js","sourceRoot":"","sources":["../../../src/input/ox-input-fill-style.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/i18n/ox-i18n.js'\nimport '@operato/input/ox-input-color.js'\nimport '@operato/input/ox-input-color-stops.js'\nimport './ox-input-color-gradient.js'\nimport './ox-input-background-pattern.js'\n\nimport { BackgroundPatternOption, OxInputBackgroundPattern } from './ox-input-background-pattern.js'\nimport { ColorStop, OxFormField } from '@operato/input'\nimport { GradientOption, OxInputColorGradient } from './ox-input-color-gradient.js'\nimport { PropertyValues, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nexport type FillStyle =\n  | {\n      type?: 'no' | 'solid' | 'gradient' | 'pattern'\n      gradientType?: 'linear' | 'radial'\n      colorStops?: ColorStop[]\n      rotation?: number\n      center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom'\n      image?: HTMLImageElement | string\n      offsetX?: number\n      offsetY?: number\n      width?: number\n      height?: number\n      align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'\n      fitPattern?: boolean\n    }\n  | 'no'\n  | string\n\n@customElement('ox-input-fill-style')\nexport class OxInputColorStyle extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n    }\n\n    [fill-type] {\n      display: flex;\n      margin: 0 0 14px 0;\n    }\n\n    [fill-type] * {\n      flex: auto;\n      margin: 0;\n      text-align: left;\n      align-self: center;\n    }\n\n    .grid-10 {\n      display: grid;\n\n      grid-template-columns: repeat(10, 1fr);\n      grid-gap: 5px;\n      grid-auto-rows: minmax(24px, auto);\n    }\n\n    .grid-10 > ox-input-color {\n      grid-column: span 4;\n    }\n\n    .grid-10 > .icon-only-label {\n      grid-column: span 1;\n\n      background: url(/assets/images/icon-properties-label.png) no-repeat;\n      float: left;\n      margin: 0;\n    }\n\n    .icon-only-label.color {\n      background-position: 70% -498px;\n    }\n\n    [editors] > :not([active]) {\n      display: none;\n    }\n  `\n\n  @property({ type: Object }) value?: FillStyle\n  @property({ type: String }) fillType?: string\n  @property({ type: String }) solid?: string\n  @property({ type: Object }) gradient?: GradientOption\n  @property({ type: Object }) pattern?: BackgroundPatternOption\n\n  private _block_reset: boolean = false\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('value') && this._onChangedValue(this.value || {})\n  }\n\n  render() {\n    return html`\n      <div @change=${(e: Event) => this._onChangedFillType(e)} fill-type>\n        <input\n          type=\"radio\"\n          id=\"fill-type-no\"\n          name=\"fill-type\"\n          value=\"no\"\n          .checked=${!this.fillType || this.fillType == 'no'}\n        />\n        <label for=\"fill-type-no\"><ox-i18n msgid=\"label.no-fill\">no fill</ox-i18n></label>\n        <input type=\"radio\" id=\"fill-type-solid\" name=\"fill-type\" value=\"solid\" .checked=${this.fillType == 'solid'} />\n        <label for=\"fill-type-solid\"><ox-i18n msgid=\"label.solid\">solid</ox-i18n></label>\n        <input\n          type=\"radio\"\n          id=\"fill-type-gradient\"\n          name=\"fill-type\"\n          value=\"gradient\"\n          .checked=${this.fillType == 'gradient'}\n        />\n        <label for=\"fill-type-gradient\"><ox-i18n msgid=\"label.gradient\">gradient</ox-i18n></label>\n        <input\n          type=\"radio\"\n          id=\"fill-type-pattern\"\n          name=\"fill-type\"\n          value=\"pattern\"\n          .checked=${this.fillType == 'pattern'}\n        />\n        <label for=\"fill-type-pattern\"><ox-i18n msgid=\"label.pattern\">pattern</ox-i18n></label>\n      </div>\n\n      <div editors>\n        <div ?active=${this.fillType == 'no'}></div>\n\n        <div class=\"grid-10\" ?active=${this.fillType == 'solid'}>\n          <label class=\"icon-only-label color\"></label>\n          <ox-input-color @change=${(e: Event) => this._onChangedSolid(e)} .value=${this.solid}> </ox-input-color>\n        </div>\n\n        <div ?active=${this.fillType == 'gradient'}>\n          <ox-input-color-gradient @change=${(e: Event) => this._onChandedGradient(e)} .value=${this.gradient}>\n          </ox-input-color-gradient>\n        </div>\n\n        <div ?active=${this.fillType == 'pattern'}>\n          <ox-input-background-pattern @change=${(e: Event) => this._onChangedPattern(e)} .value=${this.pattern}>\n          </ox-input-background-pattern>\n        </div>\n      </div>\n    `\n  }\n\n  async _onChangedValue(value: FillStyle) {\n    /*\n     * this._block_reset의 역할은 내부 사용자 인터렉션에 의한 value의 변경시에는 각 type별 이전값을 유지하기 위함이다.\n     */\n    await this.requestUpdate()\n\n    /* 설정 값에 따라서, 멤버 속성을 설정한다. */\n    if (!value) {\n      this.fillType = 'no'\n\n      if (!this._block_reset) {\n        this.solid = undefined\n        this.gradient = undefined\n        this.pattern = undefined\n      }\n\n      this._block_reset = false\n      return\n    }\n\n    switch (typeof value) {\n      case 'string':\n        this.fillType = 'solid'\n        this.solid = value\n\n        if (!this._block_reset) {\n          this.gradient = undefined\n          this.pattern = undefined\n        }\n        break\n      case 'object':\n        this.fillType = value.type\n\n        if (value.type === 'gradient') {\n          this.gradient = {\n            type: value.gradientType || 'linear',\n            colorStops: value.colorStops || [\n              {\n                position: 0,\n                color: this.solid || '#000000'\n              },\n              {\n                position: 1,\n                color: this.solid || '#FFFFFF'\n              }\n            ],\n            rotation: Number(value.rotation) || 0,\n            center: value.center\n          }\n\n          if (!this._block_reset) {\n            this.pattern = undefined\n            this.solid = undefined\n          }\n        } else if (value.type === 'pattern') {\n          this.pattern = {\n            image: value.image,\n            offsetX: Number(value.offsetX) || 0,\n            offsetY: Number(value.offsetY) || 0,\n            width: Number(value.width),\n            height: Number(value.height),\n            align: value.align,\n            fitPattern: value.fitPattern\n          }\n\n          if (!this._block_reset) {\n            this.gradient = undefined\n            this.solid = undefined\n          }\n        }\n\n        break\n      default:\n    }\n\n    this._block_reset = false\n  }\n\n  _onChangedFillType(e: Event) {\n    const element = e.target as HTMLInputElement\n    this.fillType = element.value\n\n    switch (this.fillType) {\n      case 'gradient':\n        if (!this.gradient) {\n          this.gradient = {\n            type: 'linear',\n            colorStops: [\n              {\n                position: 0,\n                color: this.solid || '#000000'\n              },\n              {\n                position: 1,\n                color: this.solid || '#FFFFFF'\n              }\n            ],\n            rotation: 0,\n            center: 'center'\n          }\n        }\n\n        this.value = {\n          type: 'gradient',\n          gradientType: this.gradient.type || 'linear',\n          colorStops: this.gradient.colorStops || [\n            {\n              position: 0,\n              color: this.solid || '#000000'\n            },\n            {\n              position: 1,\n              color: this.solid || '#FFFFFF'\n            }\n          ],\n          rotation: Number(this.gradient.rotation) || 0,\n          center: this.gradient.center\n        }\n        break\n\n      case 'pattern':\n        if (!this.pattern) this.pattern = {}\n\n        this.value = {\n          type: 'pattern',\n          image: this.pattern.image,\n          offsetX: Number(this.pattern.offsetX) || 0,\n          offsetY: Number(this.pattern.offsetY) || 0,\n          width: Number(this.pattern.width),\n          height: Number(this.pattern.height),\n          align: this.pattern.align,\n          fitPattern: this.pattern.fitPattern\n        }\n        break\n\n      case 'solid':\n        if (!this.solid) this.solid = '#fff'\n        this.value = this.solid\n        break\n\n      case 'no':\n        this.value = ''\n        break\n    }\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onChangedSolid(e: Event) {\n    if (this.fillType !== 'solid') return\n\n    this.solid = (e.target as HTMLInputElement).value\n\n    this.value = this.solid\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onChandedGradient(e: Event) {\n    /*\n     * TODO Gradient의 rotation은 symmetry 기능 등으로 외부에서 변경될 수도 있다.\n     * 이 점을 감안해서, 외부 변경에 대한 대응을 해야 한다.\n     */\n\n    if (this.fillType !== 'gradient') {\n      return\n    }\n\n    this.gradient = (e.target as OxInputColorGradient).value\n\n    this.value = {\n      type: 'gradient',\n      gradientType: this.gradient.type || 'linear',\n      colorStops: this.gradient.colorStops || [\n        {\n          position: 0,\n          color: this.solid || '#000000'\n        },\n        {\n          position: 1,\n          color: this.solid || '#FFFFFF'\n        }\n      ],\n      rotation: Number(this.gradient.rotation) || 0,\n      center: this.gradient.center\n    }\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onChangedPattern(e: Event) {\n    if (this.fillType !== 'pattern') return\n\n    this.pattern = (e.target as OxInputBackgroundPattern).value\n\n    this.value = {\n      type: 'pattern',\n      image: this.pattern?.image,\n      offsetX: Number(this.pattern?.offsetX) || 0,\n      offsetY: Number(this.pattern?.offsetY) || 0,\n      width: Number(this.pattern?.width),\n      height: Number(this.pattern?.height),\n      align: this.pattern?.align,\n      fitPattern: this.pattern?.fitPattern\n    }\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

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

@@ -0,0 +1,36 @@
+/**
+ * @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 { LitElement, PropertyValues } from 'lit';
+import CodeMirror from 'codemirror';
+/**
+ WEB Component for code-mirror graphql editor.
+ 
+ Example:
+ 
+   <ox-input-graphql value=${text} link=${link}>
+   </ox-input-graphql>
+ */
+export default class OxInputGraphql extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /**
+     * `value`는 에디터에서 작성중인 contents이다.
+     */
+    value?: string;
+    link?: string;
+    textarea: HTMLTextAreaElement;
+    private _self_changing;
+    private _changed;
+    private _editor?;
+    updated(changes: PropertyValues<this>): Promise<void>;
+    render(): import("lit-html").TemplateResult<1>;
+    getSchema(): Promise<import("graphql").GraphQLSchema>;
+    getEditor(): Promise<CodeMirror.EditorFromTextArea | undefined>;
+}

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

@@ -0,0 +1,161 @@
+/**
+ * @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 { GRAPHQL_URI } from '@operato/graphql';
+import { LitElement, css, html, unsafeCSS } from 'lit';
+import { customElement, property, query } from 'lit/decorators.js';
+import { introspectSchema, wrapSchema } from '@graphql-tools/wrap';
+import CodeMirror from 'codemirror';
+import CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css';
+import FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css';
+import LintStyle from '!!text-loader!codemirror/addon/lint/lint.css';
+import NightThemeStyle from '!!text-loader!codemirror/theme/night.css';
+import ShowHintStyle from '!!text-loader!codemirror/addon/hint/show-hint.css';
+import { fetch } from 'cross-fetch';
+import { print } from 'graphql';
+/**
+ WEB Component for code-mirror graphql editor.
+ 
+ Example:
+ 
+   <ox-input-graphql value=${text} link=${link}>
+   </ox-input-graphql>
+ */
+let OxInputGraphql = class OxInputGraphql extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._self_changing = false;
+        this._changed = false;
+    }
+    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()
+        }
+    }
+    render() {
+        return html ` <textarea></textarea> `;
+    }
+    async getSchema() {
+        const executor = async ({ document, variables }) => {
+            const query = print(document);
+            const uri = this.link || GRAPHQL_URI;
+            const fetchResult = await fetch(uri, {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify({ query, variables })
+            });
+            return fetchResult.json();
+        };
+        return await wrapSchema({
+            schema: await introspectSchema(executor),
+            executor
+        });
+    }
+    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, 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;
+                });
+            }
+        }
+        return this._editor;
+    }
+};
+OxInputGraphql.styles = [
+    css `
+      ${unsafeCSS(CodeMirrorStyle)}
+      ${unsafeCSS(FullScreenStyle)}
+         ${unsafeCSS(NightThemeStyle)}
+         ${unsafeCSS(LintStyle)}
+         ${unsafeCSS(ShowHintStyle)}
+    `,
+    css `
+      :host {
+        display: block;
+        position: relative;
+      }
+
+      textarea {
+        display: block;
+        height: 100%;
+        width: 100%;
+        resize: none;
+        font-size: 16px;
+        line-height: 20px;
+        border: 0px;
+        padding: 0px;
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], OxInputGraphql.prototype, "value", void 0);
+__decorate([
+    property({ type: String })
+], OxInputGraphql.prototype, "link", void 0);
+__decorate([
+    query('textarea')
+], OxInputGraphql.prototype, "textarea", void 0);
+OxInputGraphql = __decorate([
+    customElement('ox-input-graphql')
+], OxInputGraphql);
+export default OxInputGraphql;
+//# sourceMappingURL=ox-input-graphql.js.map

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

@@ -0,0 +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 { GRAPHQL_URI, client } from '@operato/graphql'\nimport { LitElement, PropertyValues, css, html, unsafeCSS } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { introspectSchema, wrapSchema } from '@graphql-tools/wrap'\n\nimport CodeMirror from 'codemirror'\nimport CodeMirrorStyle from '!!text-loader!codemirror/lib/codemirror.css'\nimport FullScreenStyle from '!!text-loader!codemirror/addon/display/fullscreen.css'\nimport LintStyle from '!!text-loader!codemirror/addon/lint/lint.css'\nimport NightThemeStyle from '!!text-loader!codemirror/theme/night.css'\nimport ShowHintStyle from '!!text-loader!codemirror/addon/hint/show-hint.css'\nimport { fetch } from 'cross-fetch'\nimport { print } from '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"]}

package/dist/src/property-editor/index.d.ts

@@ -0,0 +1,24 @@
+import '@operato/property-editor/ox-property-editor-legend.js';
+import '@operato/property-editor/ox-property-editor-number.js';
+import '@operato/property-editor/ox-property-editor-password.js';
+import '@operato/property-editor/ox-property-editor-angle.js';
+import '@operato/property-editor/ox-property-editor-string.js';
+import '@operato/property-editor/ox-property-editor-data.js';
+import '@operato/property-editor/ox-property-editor-date.js';
+import '@operato/property-editor/ox-property-editor-checkbox.js';
+import '@operato/property-editor/ox-property-editor-options.js';
+import '@operato/property-editor/ox-property-editor-select.js';
+import '@operato/property-editor/ox-property-editor-scene-component-id.js';
+import '@operato/property-editor/ox-property-editor-color.js';
+import '@operato/property-editor/ox-property-editor-multiple-colors.js';
+import '@operato/property-editor/ox-property-editor-solid-colorstops.js';
+import '@operato/property-editor/ox-property-editor-gradient-colorstops.js';
+import '@operato/property-editor/ox-property-editor-gradient-colorstops.js';
+import '@operato/property-editor/ox-property-editor-textarea.js';
+import '@operato/property-editor/ox-property-editor-table.js';
+import '@operato/property-editor/ox-property-editor-value-map.js';
+import '@operato/property-editor/ox-property-editor-value-ranges.js';
+import '@operato/attachment/ox-property-editor-attachment-selector.js';
+import '@operato/attachment/ox-property-editor-image-selector.js';
+import '@operato/font/ox-property-editor-font-selector.js';
+import './ox-property-editor-graphql.js';

package/dist/src/property-editor/index.js

@@ -0,0 +1,58 @@
+import '@operato/property-editor/ox-property-editor-legend.js';
+import '@operato/property-editor/ox-property-editor-number.js';
+import '@operato/property-editor/ox-property-editor-password.js';
+import '@operato/property-editor/ox-property-editor-angle.js';
+import '@operato/property-editor/ox-property-editor-string.js';
+import '@operato/property-editor/ox-property-editor-data.js';
+import '@operato/property-editor/ox-property-editor-date.js';
+import '@operato/property-editor/ox-property-editor-checkbox.js';
+import '@operato/property-editor/ox-property-editor-options.js';
+import '@operato/property-editor/ox-property-editor-select.js';
+import '@operato/property-editor/ox-property-editor-scene-component-id.js';
+import '@operato/property-editor/ox-property-editor-color.js';
+import '@operato/property-editor/ox-property-editor-multiple-colors.js';
+import '@operato/property-editor/ox-property-editor-solid-colorstops.js';
+import '@operato/property-editor/ox-property-editor-gradient-colorstops.js';
+import '@operato/property-editor/ox-property-editor-gradient-colorstops.js';
+import '@operato/property-editor/ox-property-editor-textarea.js';
+import '@operato/property-editor/ox-property-editor-table.js';
+import '@operato/property-editor/ox-property-editor-value-map.js';
+import '@operato/property-editor/ox-property-editor-value-ranges.js';
+import '@operato/attachment/ox-property-editor-attachment-selector.js';
+import '@operato/attachment/ox-property-editor-image-selector.js';
+import '@operato/font/ox-property-editor-font-selector.js';
+import './ox-property-editor-graphql.js';
+import { OxPropertyEditor } from '@operato/property-editor';
+OxPropertyEditor.register({
+    legend: 'ox-property-editor-legend',
+    number: 'ox-property-editor-number',
+    slider: 'ox-property-editor-range',
+    password: 'ox-property-editor-password',
+    angle: 'ox-property-editor-angle',
+    string: 'ox-property-editor-string',
+    textarea: 'ox-property-editor-textarea',
+    javascript: 'ox-property-editor-textarea',
+    checkbox: 'ox-property-editor-checkbox',
+    boolean: 'ox-property-editor-checkbox',
+    select: 'ox-property-editor-select',
+    date: 'ox-property-editor-date',
+    options: 'ox-property-editor-options',
+    data: 'ox-property-editor-data',
+    file: 'ox-property-editor-file',
+    image: 'ox-property-editor-image',
+    'range-input': 'ox-property-editor-range',
+    'attachment-selector': 'ox-property-editor-attachment-selector',
+    'gltf-selector': 'ox-property-editor-attachment-selector',
+    'image-selector': 'ox-property-editor-image-selector',
+    color: 'ox-property-editor-color',
+    'solid-color-stops': 'ox-property-editor-solid-colorstops',
+    'gradient-color-stops': 'ox-property-editor-gradient-colorstops',
+    'multiple-color': 'ox-property-editor-multiple-colors',
+    map: 'ox-property-editor-value-map',
+    range: 'ox-property-editor-value-ranges',
+    graphql: 'ox-property-editor-graphql',
+    'editor-table': 'ox-property-editor-table',
+    'id-input': 'ox-property-editor-scene-component-id',
+    'font-selector': 'ox-property-editor-font-selector'
+});
+//# sourceMappingURL=index.js.map