@operato/app 9.0.0-beta.7 → 9.0.0-beta.70

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

@@ -1,341 +0,0 @@
-/**
- * @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 '@operato/input/ox-input-color-gradient.js';
-import './ox-input-background-pattern.js';
-import { css, html } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { OxFormField } from '@operato/input';
-let OxInputColorStyle = class OxInputColorStyle extends OxFormField {
-    constructor() {
-        super(...arguments);
-        this.colorOnly = false;
-        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>
-
-        ${this.colorOnly
-            ? html ``
-            : html `
-              <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,
-                        noRepeat: value.noRepeat,
-                        color: value.color
-                    };
-                    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,
-                    noRepeat: this.pattern.noRepeat,
-                    color: this.pattern.color
-                };
-                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, _h, _j;
-        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,
-            noRepeat: (_h = this.pattern) === null || _h === void 0 ? void 0 : _h.noRepeat,
-            color: (_j = this.pattern) === null || _j === void 0 ? void 0 : _j.color
-        };
-        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: var(--url-icon-properties-label) no-repeat;
-      float: left;
-      margin: 0;
-    }
-
-    .icon-only-label.color {
-      background-position: 100% -500px;
-    }
-
-    [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);
-__decorate([
-    property({ type: Boolean, attribute: 'color-only' })
-], OxInputColorStyle.prototype, "colorOnly", 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

@@ -1 +0,0 @@
-{"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 '@operato/input/ox-input-color-gradient.js'\nimport './ox-input-background-pattern.js'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ColorStop, GradientOption, OxFormField, OxInputColorGradient } from '@operato/input'\n\nimport { BackgroundPatternOption, OxInputBackgroundPattern } from './ox-input-background-pattern.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      noRepeat?: boolean\n      color?: string\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: var(--url-icon-properties-label) no-repeat;\n      float: left;\n      margin: 0;\n    }\n\n    .icon-only-label.color {\n      background-position: 100% -500px;\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  @property({ type: Boolean, attribute: 'color-only' }) colorOnly: boolean = false\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\n        <label for=\"fill-type-gradient\"><ox-i18n msgid=\"label.gradient\">gradient</ox-i18n></label>\n\n        ${this.colorOnly\n          ? html``\n          : html`\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            `}\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            noRepeat: value.noRepeat,\n            color: value.color\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          noRepeat: this.pattern.noRepeat,\n          color: this.pattern.color\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      noRepeat: this.pattern?.noRepeat,\n      color: this.pattern?.color\n    }\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist/stories/graphql-client.stories.d.ts

@@ -1,26 +0,0 @@
-import '@operato/graphql/graphql-client.js';
-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/graphql-client.stories.js

@@ -1,55 +0,0 @@
-import { setClientLink, createMockLink } from '@operato/graphql/graphql-env.js';
-import '@operato/graphql/graphql-client.js';
-import '../src/input/ox-input-graphql.js';
-// TODO cm6-graphql에서 사용하는 nullthrows 관련 모듈 오류로 스토리북 테스트가 안됨.
-import { html } from 'lit';
-setClientLink(createMockLink({
-    request: {
-        query: ''
-    },
-    result: {
-        data: {
-            viewer: null
-        }
-    }
-}));
-export default {
-    title: 'graphql-client',
-    component: 'graphql-client',
-    argTypes: {
-        value: { control: 'text' },
-        name: { control: 'text' }
-    }
-};
-const Template = ({ name = 'code', value = '' }) => html `
-  <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=graphql-client.stories.js.map

package/dist/stories/graphql-client.stories.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"graphql-client.stories.js","sourceRoot":"","sources":["../../stories/graphql-client.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,iCAAiC,CAAA;AAC/E,OAAO,oCAAoC,CAAA;AAC3C,OAAO,kCAAkC,CAAA;AAEzC,6DAA6D;AAE7D,OAAO,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAE1C,aAAa,CACX,cAAc,CAAC;IACb,OAAO,EAAE;QACP,KAAK,EAAE,EAAE;KACV;IACD,MAAM,EAAE;QACN,IAAI,EAAE;YACJ,MAAM,EAAE,IAAI;SACb;KACF;CACF,CAAC,CACH,CAAA;AAED,eAAe;IACb,KAAK,EAAE,gBAAgB;IACvB,SAAS,EAAE,gBAAgB;IAC3B,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;;;;;;;cAOrE,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 { setClientLink, createMockLink } from '@operato/graphql/graphql-env.js'\nimport '@operato/graphql/graphql-client.js'\nimport '../src/input/ox-input-graphql.js'\n\n// TODO cm6-graphql에서 사용하는 nullthrows 관련 모듈 오류로 스토리북 테스트가 안됨.\n\nimport { html, TemplateResult } from 'lit'\n\nsetClientLink(\n  createMockLink({\n    request: {\n      query: ''\n    },\n    result: {\n      data: {\n        viewer: null\n      }\n    }\n  })\n)\n\nexport default {\n  title: 'graphql-client',\n  component: 'graphql-client',\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  <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"]}

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

@@ -1,25 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1"
-    rel="stylesheet"
-  />
-  <link
-    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1"
-    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

@@ -1 +0,0 @@
-{"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;;;;;;;;;;;;;;;;;;;;;cAqBrE,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\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n  <link\n    href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL@20..48,100..700,0..1\"\n    rel=\"stylesheet\"\n  />\n\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"]}

package/dist/stories/ox-selector-resource-object.stories.d.ts

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

package/dist/stories/ox-selector-resource-object.stories.js

@@ -1,80 +0,0 @@
-import { html } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { setClientLink, createMockLink } from '@operato/graphql/graphql-env.js';
-import '../src/selector/ox-selector-resource-object.js';
-setClientLink(createMockLink({
-    request: {
-        query: ''
-    },
-    result: {
-        data: {
-            viewer: null
-        }
-    }
-}));
-export default {
-    title: 'ox-selector-resource-object',
-    component: 'ox-selector-resource-object',
-    argTypes: {
-        queryName: { control: 'string' },
-        value: { control: 'string' },
-        valueField: { control: 'string' }
-    }
-};
-const Template = ({ value = '', queryName, valueField }) => html `
-  <style>
-    body {
-    }
-  </style>
-
-  <script>
-    const select = ['name', 'description']
-  </script>
-
-  <ox-selector-resource-object
-    @change=${(e) => {
-    console.log(e.target.value);
-}}
-    name=${name}
-    value=${ifDefined(value)}
-    valueField=${ifDefined(valueField)}
-    .queryName=${queryName}
-    .confirmCallback=${(record) => console.log('confirm', record)}
-    .columns=${[
-    {
-        type: 'string',
-        name: 'id',
-        header: 'id',
-        hidden: true,
-        width: 100,
-        queryName: ''
-    },
-    {
-        type: 'string',
-        name: 'name',
-        header: 'name',
-        hidden: false,
-        width: 150,
-        queryName: ''
-    },
-    {
-        type: 'string',
-        name: 'description',
-        header: 'description',
-        hidden: false,
-        width: 150,
-        queryName: ''
-    }
-]}
-    .list=${['name', 'description']}
-    .basicArgs=${''}
-  >
-  </ox-selector-resource-object>
-`;
-export const Regular = Template.bind({});
-Regular.args = {
-    value: '',
-    queryName: 'entity',
-    valueField: 'id'
-};
-//# sourceMappingURL=ox-selector-resource-object.stories.js.map