@operato/property-editor 0.2.5 → 0.2.34

package/dist/src/ox-buttons-radio.js

@@ -1,90 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-/**
-여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.
-
-Example:
-
-  <ox-buttons-radio @change=${e => this._onChange(e)} value=${value}>
-    <div data-value="top"></div>
-    <div data-value="middle"></div>
-    <div data-value="bottom"></div>
-  </ox-buttons-radio>
-*/
-let PropertyButtonsRadio = class PropertyButtonsRadio extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.
-         */
-        this.value = null;
-    }
-    render() {
-        return html ` <slot @click=${(e) => this._onTapButton(e)}></slot> `;
-    }
-    updated(changes) {
-        changes.has('value') && this._onValueChanged(this.value);
-    }
-    get buttons() {
-        return Array.from(this.querySelectorAll('*'));
-    }
-    _onValueChanged(value) {
-        this.buttons.forEach(button => {
-            if (value === button.getAttribute('data-value')) {
-                button.setAttribute('active', '');
-            }
-            else {
-                button.removeAttribute('active');
-            }
-        });
-    }
-    _onTapButton(e) {
-        var target = e.target;
-        while (!target.hasAttribute('data-value') && target !== this) {
-            target = target.parentElement;
-        }
-        if (target === this) {
-            return;
-        }
-        var old = this.value;
-        if (!this.mandatory) {
-            if (!target.getAttribute('active')) {
-                this.value = target.getAttribute('data-value');
-                target.setAttribute('active', '');
-            }
-            else {
-                this.value = null;
-                target.removeAttribute('active');
-            }
-        }
-        else {
-            this.value = target.getAttribute('data-value');
-            target.setAttribute('active', '');
-        }
-        if (old !== this.value) {
-            this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
-        }
-    }
-};
-PropertyButtonsRadio.styles = [
-    css `
-      :host {
-        display: inline-block;
-      }
-    `
-];
-__decorate([
-    property({ type: Object })
-], PropertyButtonsRadio.prototype, "value", void 0);
-__decorate([
-    property({ type: Boolean })
-], PropertyButtonsRadio.prototype, "mandatory", void 0);
-PropertyButtonsRadio = __decorate([
-    customElement('ox-buttons-radio')
-], PropertyButtonsRadio);
-export { PropertyButtonsRadio };
-//# sourceMappingURL=ox-buttons-radio.js.map

package/dist/src/ox-buttons-radio.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-buttons-radio.js","sourceRoot":"","sources":["../../src/ox-buttons-radio.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D;;;;;;;;;;EAUE;AAEF,IAAa,oBAAoB,GAAjC,MAAa,oBAAqB,SAAQ,UAAU;IAApD;;QASE;;WAEG;QACyB,UAAK,GAAkB,IAAI,CAAA;IAuDzD,CAAC;IApDC,MAAM;QACJ,OAAO,IAAI,CAAA,iBAAiB,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,CAAA;IAC3E,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC1D,CAAC;IAED,IAAI,OAAO;QACT,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,CAAA;IAC/C,CAAC;IAED,eAAe,CAAC,KAAoB;QAClC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YAC5B,IAAI,KAAK,KAAK,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE;gBAC/C,MAAM,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;aAClC;iBAAM;gBACL,MAAM,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;aACjC;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,YAAY,CAAC,CAAQ;QACnB,IAAI,MAAM,GAAG,CAAC,CAAC,MAAqB,CAAA;QAEpC,OAAO,CAAC,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,IAAI,MAAM,KAAK,IAAI,EAAE;YAC5D,MAAM,GAAG,MAAM,CAAC,aAAc,CAAA;SAC/B;QAED,IAAI,MAAM,KAAK,IAAI,EAAE;YACnB,OAAM;SACP;QAED,IAAI,GAAG,GAAG,IAAI,CAAC,KAAK,CAAA;QAEpB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;YACnB,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE;gBAClC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,CAAA;gBAC9C,MAAM,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;aAClC;iBAAM;gBACL,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;gBACjB,MAAM,CAAC,eAAe,CAAC,QAAQ,CAAC,CAAA;aACjC;SACF;aAAM;YACL,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,CAAA;YAC9C,MAAM,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAA;SAClC;QAED,IAAI,GAAG,KAAK,IAAI,CAAC,KAAK,EAAE;YACtB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;SACjF;IACH,CAAC;CACF,CAAA;AAlEQ,2BAAM,GAAG;IACd,GAAG,CAAA;;;;KAIF;CACF,CAAA;AAK2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;mDAA4B;AAC1B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;uDAAoB;AAbrC,oBAAoB;IADhC,aAAa,CAAC,kBAAkB,CAAC;GACrB,oBAAoB,CAmEhC;SAnEY,oBAAoB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n/**\n여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.\n\nExample:\n\n  <ox-buttons-radio @change=${e => this._onChange(e)} value=${value}>\n    <div data-value=\"top\"></div>\n    <div data-value=\"middle\"></div>\n    <div data-value=\"bottom\"></div>\n  </ox-buttons-radio>\n*/\n@customElement('ox-buttons-radio')\nexport class PropertyButtonsRadio extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n      }\n    `\n  ]\n\n  /**\n   * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.\n   */\n  @property({ type: Object }) value: Object | null = null\n  @property({ type: Boolean }) mandatory!: boolean\n\n  render() {\n    return html` <slot @click=${(e: Event) => this._onTapButton(e)}></slot> `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('value') && this._onValueChanged(this.value)\n  }\n\n  get buttons() {\n    return Array.from(this.querySelectorAll('*'))\n  }\n\n  _onValueChanged(value: Object | null) {\n    this.buttons.forEach(button => {\n      if (value === button.getAttribute('data-value')) {\n        button.setAttribute('active', '')\n      } else {\n        button.removeAttribute('active')\n      }\n    })\n  }\n\n  _onTapButton(e: Event) {\n    var target = e.target as HTMLElement\n\n    while (!target.hasAttribute('data-value') && target !== this) {\n      target = target.parentElement!\n    }\n\n    if (target === this) {\n      return\n    }\n\n    var old = this.value\n\n    if (!this.mandatory) {\n      if (!target.getAttribute('active')) {\n        this.value = target.getAttribute('data-value')\n        target.setAttribute('active', '')\n      } else {\n        this.value = null\n        target.removeAttribute('active')\n      }\n    } else {\n      this.value = target.getAttribute('data-value')\n      target.setAttribute('active', '')\n    }\n\n    if (old !== this.value) {\n      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n    }\n  }\n}\n"]}

package/dist/src/ox-checkbox.d.ts

@@ -1,16 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { LitElement } from 'lit';
-export declare class OxCheckbox extends LitElement {
-    static styles: import("lit").CSSResult[];
-    checked: boolean;
-    disabled: boolean;
-    name: string;
-    _hasInner: boolean;
-    render(): import("lit-html").TemplateResult<1>;
-    onClick(): void;
-    get checkedIcon(): import("lit-html").TemplateResult<1>;
-    get uncheckedIcon(): import("lit-html").TemplateResult<1>;
-    onKeyDown(e: KeyboardEvent): void;
-}

package/dist/src/ox-checkbox.js

@@ -1,146 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-/*
-  This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.
-*/
-import { css, html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-let OxCheckbox = class OxCheckbox extends LitElement {
-    constructor() {
-        super(...arguments);
-        this.checked = false;
-        this.disabled = false;
-        this.name = '';
-        this._hasInner = !!this.innerHTML.trim().length;
-    }
-    render() {
-        return html `
-      <div @click=${this.onClick} ?disabled=${this.disabled}>
-        <a
-          href="#"
-          @click=${(e) => e.preventDefault()}
-          @keydown=${this.onKeyDown}
-          ?checked=${this.checked}
-          checkbox
-        >
-          ${this.checked ? this.checkedIcon : this.uncheckedIcon}
-        </a>
-        ${this._hasInner
-            ? html ` <span label>
-              <slot></slot>
-            </span>`
-            : ''}
-      </div>
-    `;
-    }
-    onClick() {
-        if (this.disabled) {
-            return;
-        }
-        this.checked = !this.checked;
-        this.dispatchEvent(new CustomEvent('change', {
-            bubbles: true,
-            composed: true,
-            detail: {
-                checked: this.checked,
-                name: this.name
-            }
-        }));
-    }
-    get checkedIcon() {
-        return html `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
-    </svg>`;
-    }
-    get uncheckedIcon() {
-        return html `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-      <path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z" />
-    </svg>`;
-    }
-    onKeyDown(e) {
-        e.preventDefault();
-        if (e.keyCode == 32 || e.code == 'Space') {
-            this.onClick();
-        }
-    }
-};
-OxCheckbox.styles = [
-    css `
-      :host {
-        display: block;
-      }
-
-      div {
-        display: flex;
-        align-items: center;
-        cursor: pointer;
-      }
-
-      [disabled] {
-        opacity: var(--ox-checkbox-disabled-opacity, 0.5);
-        cursor: auto;
-      }
-
-      [checkbox] {
-        display: flex;
-        border-radius: var(--ox-checkbox-border-radius, 4px);
-        border: var(--ox-checkbox-border, 1px solid rgba(0, 0, 0, 0.3));
-        background-color: var(--ox-checkbox-background-color, #fff);
-        width: var(--ox-checkbox-size, 18px);
-        height: var(--ox-checkbox-size, 18px);
-        align-items: center;
-        justify-content: center;
-      }
-
-      a {
-        background-color: var(--ox-checkbox-unchecked-background-color, #fff);
-        border: var(--ox-checkbox-unchecked-border, 1px solid rgba(0, 0, 0, 0.3));
-      }
-
-      a[checked] {
-        background-color: var(--ox-checkbox-checked-background-color, #fff);
-        border: var(--ox-checkbox-checked-border, 1px solid #38a25b);
-      }
-
-      path {
-        fill: var(--ox-checkbox-fill-color, rgba(0, 0, 0, 0.1));
-      }
-
-      [checked] path {
-        fill: var(--ox-checkbox-checked-color, #38a25b);
-      }
-
-      svg {
-        width: var(--ox-checkbox-size, 18px);
-        height: var(--ox-checkbox-size, 18px);
-      }
-
-      [label] {
-        margin: var(--ox-checkbox-label-margin, 0 0 0 7px);
-        color: var(--ox-checkbox-label-color, #3a5877);
-      }
-
-      [checked] + [label] {
-        font-weight: var(--ox-checkbox-checked-font-weight, bold);
-      }
-    `
-];
-__decorate([
-    property({ type: Boolean })
-], OxCheckbox.prototype, "checked", void 0);
-__decorate([
-    property({ type: Boolean })
-], OxCheckbox.prototype, "disabled", void 0);
-__decorate([
-    property({ type: String })
-], OxCheckbox.prototype, "name", void 0);
-__decorate([
-    state()
-], OxCheckbox.prototype, "_hasInner", void 0);
-OxCheckbox = __decorate([
-    customElement('ox-checkbox')
-], OxCheckbox);
-export { OxCheckbox };
-//# sourceMappingURL=ox-checkbox.js.map

package/dist/src/ox-checkbox.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH;;EAEE;AAEF,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGlE,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,UAAU;IAA1C;;QA+D+B,YAAO,GAAY,KAAK,CAAA;QACxB,aAAQ,GAAY,KAAK,CAAA;QAC1B,SAAI,GAAW,EAAE,CAAA;QAEpC,cAAS,GAAY,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,MAAM,CAAA;IA6D9D,CAAC;IA3DC,MAAM;QACJ,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,QAAQ;;;mBAGxC,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;qBAC9B,IAAI,CAAC,SAAS;qBACd,IAAI,CAAC,OAAO;;;YAGrB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa;;UAEtD,IAAI,CAAC,SAAS;YACd,CAAC,CAAC,IAAI,CAAA;;oBAEI;YACV,CAAC,CAAC,EAAE;;KAET,CAAA;IACH,CAAC;IAED,OAAO;QACL,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,OAAM;SACP;QAED,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAA;QAE5B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE;gBACN,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,IAAI,EAAE,IAAI,CAAC,IAAI;aAChB;SACF,CAAC,CACH,CAAA;IACH,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAA;;WAEJ,CAAA;IACT,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAA;;WAEJ,CAAA;IACT,CAAC;IAED,SAAS,CAAC,CAAgB;QACxB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,EAAE;YACxC,IAAI,CAAC,OAAO,EAAE,CAAA;SACf;IACH,CAAC;CACF,CAAA;AA/HQ,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0DF;CACF,CAAA;AAE4B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAAyB;AACxB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAA0B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAkB;AAEpC;IAAR,KAAK,EAAE;6CAAoD;AAnEjD,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAgItB;SAhIY,UAAU","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\n/*\n  This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.\n*/\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n\n      div {\n        display: flex;\n        align-items: center;\n        cursor: pointer;\n      }\n\n      [disabled] {\n        opacity: var(--ox-checkbox-disabled-opacity, 0.5);\n        cursor: auto;\n      }\n\n      [checkbox] {\n        display: flex;\n        border-radius: var(--ox-checkbox-border-radius, 4px);\n        border: var(--ox-checkbox-border, 1px solid rgba(0, 0, 0, 0.3));\n        background-color: var(--ox-checkbox-background-color, #fff);\n        width: var(--ox-checkbox-size, 18px);\n        height: var(--ox-checkbox-size, 18px);\n        align-items: center;\n        justify-content: center;\n      }\n\n      a {\n        background-color: var(--ox-checkbox-unchecked-background-color, #fff);\n        border: var(--ox-checkbox-unchecked-border, 1px solid rgba(0, 0, 0, 0.3));\n      }\n\n      a[checked] {\n        background-color: var(--ox-checkbox-checked-background-color, #fff);\n        border: var(--ox-checkbox-checked-border, 1px solid #38a25b);\n      }\n\n      path {\n        fill: var(--ox-checkbox-fill-color, rgba(0, 0, 0, 0.1));\n      }\n\n      [checked] path {\n        fill: var(--ox-checkbox-checked-color, #38a25b);\n      }\n\n      svg {\n        width: var(--ox-checkbox-size, 18px);\n        height: var(--ox-checkbox-size, 18px);\n      }\n\n      [label] {\n        margin: var(--ox-checkbox-label-margin, 0 0 0 7px);\n        color: var(--ox-checkbox-label-color, #3a5877);\n      }\n\n      [checked] + [label] {\n        font-weight: var(--ox-checkbox-checked-font-weight, bold);\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) checked: boolean = false\n  @property({ type: Boolean }) disabled: boolean = false\n  @property({ type: String }) name: string = ''\n\n  @state() _hasInner: boolean = !!this.innerHTML.trim().length\n\n  render() {\n    return html`\n      <div @click=${this.onClick} ?disabled=${this.disabled}>\n        <a\n          href=\"#\"\n          @click=${(e: Event) => e.preventDefault()}\n          @keydown=${this.onKeyDown}\n          ?checked=${this.checked}\n          checkbox\n        >\n          ${this.checked ? this.checkedIcon : this.uncheckedIcon}\n        </a>\n        ${this._hasInner\n          ? html` <span label>\n              <slot></slot>\n            </span>`\n          : ''}\n      </div>\n    `\n  }\n\n  onClick() {\n    if (this.disabled) {\n      return\n    }\n\n    this.checked = !this.checked\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          checked: this.checked,\n          name: this.name\n        }\n      })\n    )\n  }\n\n  get checkedIcon() {\n    return html`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n      <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n    </svg>`\n  }\n\n  get uncheckedIcon() {\n    return html`<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n      <path d=\"M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z\" />\n    </svg>`\n  }\n\n  onKeyDown(e: KeyboardEvent) {\n    e.preventDefault()\n\n    if (e.keyCode == 32 || e.code == 'Space') {\n      this.onClick()\n    }\n  }\n}\n"]}

package/dist/src/ox-input-3dish.d.ts

@@ -1,30 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { LitElement } from 'lit';
-export declare class OxInput3Dish extends LitElement {
-    static styles: import("lit").CSSResult[];
-    dimension?: {
-        width: number;
-        height: number;
-        depth: number;
-    };
-    translatex?: {
-        x: number;
-        y: number;
-        z: number;
-    };
-    rotate?: {
-        x: number;
-        y: number;
-        z: number;
-    };
-    scale?: {
-        x: number;
-        y: number;
-        z: number;
-    };
-    firstUpdated(): void;
-    _onChange(e: Event): void;
-    render(): import("lit-html").TemplateResult<1>;
-}

package/dist/src/ox-input-3dish.js

@@ -1,140 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-let OxInput3Dish = class OxInput3Dish extends LitElement {
-    firstUpdated() {
-        this.renderRoot.addEventListener('change', this._onChange.bind(this));
-    }
-    _onChange(e) {
-        var element = e.target;
-        var id = element.id;
-        var prop = id.substr(1);
-        var value = Number(element.value);
-        switch (element.tagName) {
-            case 'PROPERTY-ANGLE':
-                value = Number(element.radian || 0);
-                break;
-        }
-        switch (id) {
-            case 'tx':
-            case 'ty':
-            case 'tz':
-                this.dispatchEvent(new CustomEvent('translate-changed', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        value: {
-                            ...this.translatex,
-                            [prop]: value
-                        }
-                    }
-                }));
-                break;
-            case 'rx':
-            case 'ry':
-            case 'rz':
-                this.dispatchEvent(new CustomEvent('rotate-changed', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        value: {
-                            ...this.rotate,
-                            [prop]: value
-                        }
-                    }
-                }));
-                break;
-            case 'sx':
-            case 'sy':
-            case 'sz':
-                this.dispatchEvent(new CustomEvent('scale-changed', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        value: {
-                            ...this.scale,
-                            [prop]: value
-                        }
-                    }
-                }));
-                break;
-            default:
-                // dimension
-                this.dispatchEvent(new CustomEvent('dimension-changed', {
-                    bubbles: true,
-                    composed: true,
-                    detail: {
-                        value: {
-                            ...this.dimension,
-                            [prop]: value
-                        }
-                    }
-                }));
-        }
-    }
-    render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
-        return html `
-      <span></span> <span><i18n-msg msgid="label.x-axes">x-axes</i18n-msg></span>
-      <span><i18n-msg msgid="label.y-axes">y-axes</i18n-msg></span>
-      <span><i18n-msg msgid="label.z-axes">z-axes</i18n-msg></span>
-
-      <label><i18n-msg msgid="label.dimension">dimension</i18n-msg></label>
-      <input type="number" id="dwidth" .value=${(_a = this.dimension) === null || _a === void 0 ? void 0 : _a.width} />
-      <input type="number" id="dheight" .value=${(_b = this.dimension) === null || _b === void 0 ? void 0 : _b.height} />
-      <input type="number" id="ddepth" .value=${(_c = this.dimension) === null || _c === void 0 ? void 0 : _c.depth} />
-
-      <label><i18n-msg msgid="label.translate">translate</i18n-msg></label>
-      <input type="number" id="tx" .value=${(_d = this.translatex) === null || _d === void 0 ? void 0 : _d.x} />
-      <input type="number" id="ty" .value=${(_e = this.translatex) === null || _e === void 0 ? void 0 : _e.y} />
-      <input type="number" id="tz" .value=${(_f = this.translatex) === null || _f === void 0 ? void 0 : _f.z} />
-
-      <label><i18n-msg msgid="label.rotate">rotate</i18n-msg></label>
-      <ox-input-angle id="rx" .radian=${(_g = this.rotate) === null || _g === void 0 ? void 0 : _g.x}></ox-input-angle>
-      <ox-input-angle id="ry" .radian=${(_h = this.rotate) === null || _h === void 0 ? void 0 : _h.y}></ox-input-angle>
-      <ox-input-angle id="rz" .radian=${(_j = this.rotate) === null || _j === void 0 ? void 0 : _j.z}></ox-input-angle>
-    `;
-    }
-};
-OxInput3Dish.styles = [
-    css `
-      :host {
-        display: grid;
-        grid-template-columns: repeat(4, minmax(50px, 1fr));
-        grid-gap: 5px;
-        grid-auto-rows: minmax(24px, auto);
-      }
-
-      :host > * {
-        grid-column: span 1;
-      }
-
-      label {
-        text-align: right;
-      }
-
-      span {
-        text-align: center;
-      }
-    `
-];
-__decorate([
-    property({ type: Object })
-], OxInput3Dish.prototype, "dimension", void 0);
-__decorate([
-    property({ type: Object })
-], OxInput3Dish.prototype, "translatex", void 0);
-__decorate([
-    property({ type: Object })
-], OxInput3Dish.prototype, "rotate", void 0);
-__decorate([
-    property({ type: Object })
-], OxInput3Dish.prototype, "scale", void 0);
-OxInput3Dish = __decorate([
-    customElement('ox-input-3dish')
-], OxInput3Dish);
-export { OxInput3Dish };
-//# sourceMappingURL=ox-input-3dish.js.map

package/dist/src/ox-input-3dish.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ox-input-3dish.js","sourceRoot":"","sources":["../../src/ox-input-3dish.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxInputAngle } from './ox-input-angle'\n\n@customElement('ox-input-3dish')\nexport class OxInput3Dish extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: grid;\n        grid-template-columns: repeat(4, minmax(50px, 1fr));\n        grid-gap: 5px;\n        grid-auto-rows: minmax(24px, auto);\n      }\n\n      :host > * {\n        grid-column: span 1;\n      }\n\n      label {\n        text-align: right;\n      }\n\n      span {\n        text-align: center;\n      }\n    `\n  ]\n\n  @property({ type: Object }) dimension?: { width: number; height: number; depth: number }\n  /*\n   * translate는 고유한 html element의 attribute이므로, property는 translatex로 한다.\n   */\n  @property({ type: Object }) translatex?: { x: number; y: number; z: number }\n  @property({ type: Object }) rotate?: { x: number; y: number; z: number }\n  @property({ type: Object }) scale?: { x: number; y: number; z: number }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  _onChange(e: Event) {\n    var element = e.target as HTMLElement\n    var id = element.id\n    var prop = id.substr(1)\n    var value = Number((element as HTMLInputElement).value)\n\n    switch (element.tagName) {\n      case 'PROPERTY-ANGLE':\n        value = Number((element as OxInputAngle).radian || 0)\n        break\n    }\n\n    switch (id) {\n      case 'tx':\n      case 'ty':\n      case 'tz':\n        this.dispatchEvent(\n          new CustomEvent('translate-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: {\n                ...this.translatex,\n                [prop]: value\n              }\n            }\n          })\n        )\n        break\n\n      case 'rx':\n      case 'ry':\n      case 'rz':\n        this.dispatchEvent(\n          new CustomEvent('rotate-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: {\n                ...this.rotate,\n                [prop]: value\n              }\n            }\n          })\n        )\n        break\n\n      case 'sx':\n      case 'sy':\n      case 'sz':\n        this.dispatchEvent(\n          new CustomEvent('scale-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: {\n                ...this.scale,\n                [prop]: value\n              }\n            }\n          })\n        )\n        break\n\n      default:\n        // dimension\n        this.dispatchEvent(\n          new CustomEvent('dimension-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: {\n                ...this.dimension,\n                [prop]: value\n              }\n            }\n          })\n        )\n    }\n  }\n\n  render() {\n    return html`\n      <span></span> <span><i18n-msg msgid=\"label.x-axes\">x-axes</i18n-msg></span>\n      <span><i18n-msg msgid=\"label.y-axes\">y-axes</i18n-msg></span>\n      <span><i18n-msg msgid=\"label.z-axes\">z-axes</i18n-msg></span>\n\n      <label><i18n-msg msgid=\"label.dimension\">dimension</i18n-msg></label>\n      <input type=\"number\" id=\"dwidth\" .value=${this.dimension?.width} />\n      <input type=\"number\" id=\"dheight\" .value=${this.dimension?.height} />\n      <input type=\"number\" id=\"ddepth\" .value=${this.dimension?.depth} />\n\n      <label><i18n-msg msgid=\"label.translate\">translate</i18n-msg></label>\n      <input type=\"number\" id=\"tx\" .value=${this.translatex?.x} />\n      <input type=\"number\" id=\"ty\" .value=${this.translatex?.y} />\n      <input type=\"number\" id=\"tz\" .value=${this.translatex?.z} />\n\n      <label><i18n-msg msgid=\"label.rotate\">rotate</i18n-msg></label>\n      <ox-input-angle id=\"rx\" .radian=${this.rotate?.x}></ox-input-angle>\n      <ox-input-angle id=\"ry\" .radian=${this.rotate?.y}></ox-input-angle>\n      <ox-input-angle id=\"rz\" .radian=${this.rotate?.z}></ox-input-angle>\n    `\n  }\n}\n"]}

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

@@ -1,14 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { LitElement } from 'lit';
-export declare class OxInputAngle extends LitElement {
-    static styles: import("lit").CSSResult[];
-    radian?: string | number;
-    input: HTMLInputElement;
-    render(): import("lit-html").TemplateResult<1>;
-    get placeholder(): string;
-    _onChangeValue(e: Event): void;
-    _toDegree(radian: string | number | undefined): number;
-    _toRadian(degree: string | number | undefined): number | undefined;
-}

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

@@ -1,56 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property, query } from 'lit/decorators.js';
-let OxInputAngle = class OxInputAngle extends LitElement {
-    render() {
-        return html `
-      <input
-        type="number"
-        .value=${this._toDegree(this.radian)}
-        @change=${(e) => this._onChangeValue(e)}
-        .placeholder=${this.placeholder}
-      />
-    `;
-    }
-    get placeholder() {
-        return this.getAttribute('placeholder') || '0°';
-    }
-    _onChangeValue(e) {
-        this.radian = this._toRadian(this.input.value);
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
-    }
-    _toDegree(radian) {
-        return Math.round(((Number(radian) || 0) * 180) / Math.PI);
-    }
-    _toRadian(degree) {
-        return isNaN(Number(degree)) ? undefined : Number(degree) * (Math.PI / 180);
-    }
-};
-OxInputAngle.styles = [
-    css `
-      :host {
-        display: inline-block;
-      }
-
-      input {
-        width: 100%;
-        height: 100%;
-        box-sizing: border-box;
-        border: 1px solid rgba(0, 0, 0, 0.2);
-      }
-    `
-];
-__decorate([
-    property({ type: Number })
-], OxInputAngle.prototype, "radian", void 0);
-__decorate([
-    query('input')
-], OxInputAngle.prototype, "input", void 0);
-OxInputAngle = __decorate([
-    customElement('ox-input-angle')
-], OxInputAngle);
-export { OxInputAngle };
-//# sourceMappingURL=ox-input-angle.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"ox-input-angle.js","sourceRoot":"","sources":["../../src/ox-input-angle.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGlE,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,UAAU;IAmB1C,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;kBAC1B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;uBAC/B,IAAI,CAAC,WAAW;;KAElC,CAAA;IACH,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,IAAI,CAAA;IACjD,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAE9C,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,SAAS,CAAC,MAAmC;QAC3C,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAA;IAC5D,CAAC;IAED,SAAS,CAAC,MAAmC;QAC3C,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,CAAA;IAC7E,CAAC;CACF,CAAA;AA9CQ,mBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAyB;AACpC;IAAf,KAAK,CAAC,OAAO,CAAC;2CAAyB;AAjB7B,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA+CxB;SA/CY,YAAY","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\n@customElement('ox-input-angle')\nexport class OxInputAngle extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n      }\n\n      input {\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        border: 1px solid rgba(0, 0, 0, 0.2);\n      }\n    `\n  ]\n\n  @property({ type: Number }) radian?: string | number\n  @query('input') input!: HTMLInputElement\n\n  render() {\n    return html`\n      <input\n        type=\"number\"\n        .value=${this._toDegree(this.radian)}\n        @change=${(e: Event) => this._onChangeValue(e)}\n        .placeholder=${this.placeholder}\n      />\n    `\n  }\n\n  get placeholder() {\n    return this.getAttribute('placeholder') || '0°'\n  }\n\n  _onChangeValue(e: Event) {\n    this.radian = this._toRadian(this.input.value)\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _toDegree(radian: string | number | undefined) {\n    return Math.round(((Number(radian) || 0) * 180) / Math.PI)\n  }\n\n  _toRadian(degree: string | number | undefined) {\n    return isNaN(Number(degree)) ? undefined : Number(degree) * (Math.PI / 180)\n  }\n}\n"]}

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

@@ -1,21 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { LitElement } from 'lit';
-export default class OxStack extends LitElement {
-    static styles: import("lit").CSSResult[];
-    /**
-     * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.
-     */
-    stack: {
-        name: string;
-    }[];
-    /**
-     * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.
-     */
-    activeIndex: number;
-    render(): import("lit-html").TemplateResult<1>;
-    _onClickAddFloor(e: Event): void;
-    _onClickToActive(e: Event): void;
-    _onClickRemoveFloor(e: Event): void;
-}

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

@@ -1,108 +0,0 @@
-/**
- * @license Copyright © HatioLab Inc. All rights reserved.
- */
-import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-let OxStack = class OxStack extends LitElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.
-         */
-        this.stack = [];
-        /**
-         * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.
-         */
-        this.activeIndex = 0;
-    }
-    render() {
-        const stack = [...this.stack].reverse();
-        const length = stack.length;
-        return html `
-      <button id="add-floor" @click=${(e) => this._onClickAddFloor(e)}>+</button>
-
-      ${stack.map((item, index) => html `
-          <div
-            ?active=${length - index - 1 == this.activeIndex}
-            @click=${(e) => this._onClickToActive(e)}
-            idx=${length - index - 1}
-          >
-            ${item.name} <button @click=${(e) => this._onClickRemoveFloor(e)}>-</button>
-          </div>
-        `)}
-    `;
-    }
-    _onClickAddFloor(e) {
-        this.stack.push({ name: String(this.stack.length + 1) });
-        this.requestUpdate();
-    }
-    _onClickToActive(e) {
-        const div = e.target;
-        if (div.tagName != 'DIV') {
-            return;
-        }
-        this.activeIndex = Number(div.getAttribute('idx'));
-    }
-    _onClickRemoveFloor(e) {
-        const div = e.target.parentElement;
-        if ((div === null || div === void 0 ? void 0 : div.tagName) != 'DIV') {
-            return;
-        }
-        const idx = Number(div.getAttribute('idx'));
-        this.stack.splice(idx, 1);
-        if (this.activeIndex == idx) {
-            this.activeIndex = 0;
-        }
-        else if (this.activeIndex >= idx) {
-            this.activeIndex--;
-        }
-        else if (this.activeIndex >= this.stack.length) {
-            this.activeIndex = 0;
-        }
-        this.requestUpdate();
-    }
-};
-OxStack.styles = [
-    css `
-      :host {
-        display: block;
-      }
-
-      #add-floor {
-        width: 100%;
-        height: 20px;
-        background-color: blue;
-        color: white;
-      }
-
-      div {
-        background-color: blue;
-        width: calc(100% - 40px);
-        width: -webkit-calc(100% - 40px);
-        min-height: 20px;
-      }
-
-      div[active] {
-        background-color: red;
-      }
-
-      div button {
-        position: absolute;
-        right: 10px;
-        width: 30px;
-        min-height: 20px;
-      }
-    `
-];
-__decorate([
-    property({ type: Array })
-], OxStack.prototype, "stack", void 0);
-__decorate([
-    property({ type: Number })
-], OxStack.prototype, "activeIndex", void 0);
-OxStack = __decorate([
-    customElement('ox-stack')
-], OxStack);
-export default OxStack;
-//# sourceMappingURL=ox-input-stack.js.map