@operato/input 0.2.35 → 0.2.42

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

@@ -2,20 +2,21 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
+import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
+import { OxFormField } from './ox-formfield';
 /**
 여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.
 
 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>
+    <div value="top"></div>
+    <div value="middle"></div>
+    <div value="bottom"></div>
   </ox-buttons-radio>
 */
-let PropertyButtonsRadio = class PropertyButtonsRadio extends LitElement {
+let PropertyButtonsRadio = class PropertyButtonsRadio extends OxFormField {
     constructor() {
         super(...arguments);
         /**
@@ -34,7 +35,7 @@ let PropertyButtonsRadio = class PropertyButtonsRadio extends LitElement {
     }
     _onValueChanged(value) {
         this.buttons.forEach(button => {
-            if (value === button.getAttribute('data-value')) {
+            if (value === button.getAttribute('value')) {
                 button.setAttribute('active', '');
             }
             else {
@@ -44,7 +45,7 @@ let PropertyButtonsRadio = class PropertyButtonsRadio extends LitElement {
     }
     _onTapButton(e) {
         var target = e.target;
-        while (!target.hasAttribute('data-value') && target !== this) {
+        while (!target.hasAttribute('value') && target !== this) {
             target = target.parentElement;
         }
         if (target === this) {
@@ -53,7 +54,7 @@ let PropertyButtonsRadio = class PropertyButtonsRadio extends LitElement {
         var old = this.value;
         if (!this.mandatory) {
             if (!target.getAttribute('active')) {
-                this.value = target.getAttribute('data-value');
+                this.value = target.getAttribute('value');
                 target.setAttribute('active', '');
             }
             else {
@@ -62,13 +63,20 @@ let PropertyButtonsRadio = class PropertyButtonsRadio extends LitElement {
             }
         }
         else {
-            this.value = target.getAttribute('data-value');
+            this.value = target.getAttribute('value');
             target.setAttribute('active', '');
         }
         if (old !== this.value) {
-            this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: this.value
+            }));
         }
     }
+    appendFormData({ formData }) {
+        this.name && formData.append(this.name, JSON.stringify(this.value));
+    }
 };
 PropertyButtonsRadio.styles = [
     css `

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

@@ -1 +1 @@
-{"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"]}
+{"version":3,"file":"ox-buttons-radio.js","sourceRoot":"","sources":["../../src/ox-buttons-radio.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-formfield'\n\n/**\n여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.\n\nExample:\n\n  <ox-buttons-radio @change=${e => this._onChange(e)} value=${value}>\n    <div value=\"top\"></div>\n    <div value=\"middle\"></div>\n    <div value=\"bottom\"></div>\n  </ox-buttons-radio>\n*/\n@customElement('ox-buttons-radio')\nexport class PropertyButtonsRadio extends OxFormField {\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('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('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('value')\n        target.setAttribute('active', '')\n      } else {\n        this.value = null\n        target.removeAttribute('active')\n      }\n    } else {\n      this.value = target.getAttribute('value')\n      target.setAttribute('active', '')\n    }\n\n    if (old !== this.value) {\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: this.value\n        })\n      )\n    }\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    this.name && formData.append(this.name, JSON.stringify(this.value))\n  }\n}\n"]}

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

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

package/dist/src/ox-checkbox.js

@@ -1,30 +1,21 @@
-/**
- * @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 { __decorate } from "tslib";
+import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-let OxCheckbox = class OxCheckbox extends LitElement {
+import { OxFormField } from './ox-formfield';
+let OxCheckbox = class OxCheckbox extends OxFormField {
     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
-        >
+        <a href="#" @click=${(e) => e.preventDefault()} checkbox>
           ${this.checked ? this.checkedIcon : this.uncheckedIcon}
         </a>
         ${this._hasInner
@@ -35,6 +26,11 @@ let OxCheckbox = class OxCheckbox extends LitElement {
       </div>
     `;
     }
+    connectedCallback() {
+        super.connectedCallback();
+        this.setAttribute('tabindex', '0');
+        this.addEventListener('keydown', this.onKeyDown.bind(this));
+    }
     onClick() {
         if (this.disabled) {
             return;
@@ -43,28 +39,32 @@ let OxCheckbox = class OxCheckbox extends LitElement {
         this.dispatchEvent(new CustomEvent('change', {
             bubbles: true,
             composed: true,
-            detail: {
-                checked: this.checked,
-                name: this.name
-            }
+            detail: this.checked
         }));
     }
     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>`;
+        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>`;
+        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') {
+        if (e.key === ' ' || e.key == 'Spacebar') {
             this.onClick();
         }
     }
+    appendFormData({ formData }) {
+        this.name && formData.append(this.name, this.checked ? 'true' : 'false');
+    }
 };
 OxCheckbox.styles = [
     css `
@@ -88,8 +88,8 @@ OxCheckbox.styles = [
         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);
+        width: var(--ox-checkbox-size, 15px);
+        height: var(--ox-checkbox-size, 15px);
         align-items: center;
         justify-content: center;
       }
@@ -99,7 +99,7 @@ OxCheckbox.styles = [
         border: var(--ox-checkbox-unchecked-border, 1px solid rgba(0, 0, 0, 0.3));
       }
 
-      a[checked] {
+      :host([checked]) a {
         background-color: var(--ox-checkbox-checked-background-color, #fff);
         border: var(--ox-checkbox-checked-border, 1px solid #38a25b);
       }
@@ -108,13 +108,13 @@ OxCheckbox.styles = [
         fill: var(--ox-checkbox-fill-color, rgba(0, 0, 0, 0.1));
       }
 
-      [checked] path {
+      :host([checked]) path {
         fill: var(--ox-checkbox-checked-color, #38a25b);
       }
 
       svg {
-        width: var(--ox-checkbox-size, 18px);
-        height: var(--ox-checkbox-size, 18px);
+        width: var(--ox-checkbox-size, 15px);
+        height: var(--ox-checkbox-size, 15px);
       }
 
       [label] {
@@ -122,13 +122,13 @@ OxCheckbox.styles = [
         color: var(--ox-checkbox-label-color, #3a5877);
       }
 
-      [checked] + [label] {
+      :host([checked]) [label] {
         font-weight: var(--ox-checkbox-checked-font-weight, bold);
       }
     `
 ];
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, attribute: 'checked', reflect: true })
 ], OxCheckbox.prototype, "checked", void 0);
 __decorate([
     property({ type: Boolean })

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

@@ -1 +1 @@
-{"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"]}
+{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"AAAA;;EAEE;;AAEF,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,IAAa,UAAU,GAAvB,MAAa,UAAW,SAAQ,WAAW;IAA3C;;QA+DoE,YAAO,GAAY,KAAK,CAAA;QAC7D,aAAQ,GAAY,KAAK,CAAA;QAG7C,cAAS,GAAY,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC,MAAM,CAAA;IAmE9D,CAAC;IAjEC,MAAM;QACJ,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,OAAO,cAAc,IAAI,CAAC,QAAQ;6BAC9B,CAAC,CAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE;YACjD,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,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;QAClC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IAC7D,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,IAAI,CAAC,OAAO;SACrB,CAAC,CACH,CAAA;IACH,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAA;;;;KAIV,CAAA;IACH,CAAC;IAED,IAAI,aAAa;QACf,OAAO,IAAI,CAAA;;;;KAIV,CAAA;IACH,CAAC;IAED,SAAS,CAAC,CAAgB;QACxB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,IAAI,UAAU,EAAE;YACxC,IAAI,CAAC,OAAO,EAAE,CAAA;SACf;IACH,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAA;IAC1E,CAAC;CACF,CAAA;AArIQ,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0DF;CACF,CAAA;AAEiE;IAAjE,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAyB;AAC7D;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;4CAA0B;AAC1B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAc;AAEhC;IAAR,KAAK,EAAE;6CAAoD;AAnEjD,UAAU;IADtB,aAAa,CAAC,aAAa,CAAC;GAChB,UAAU,CAsItB;SAtIY,UAAU","sourcesContent":["/*\n  This component is inspired by https://github.com/Polydile/dile-components, thanks Dile.\n*/\n\nimport { css, html } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-formfield'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\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, 15px);\n        height: var(--ox-checkbox-size, 15px);\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      :host([checked]) a {\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      :host([checked]) path {\n        fill: var(--ox-checkbox-checked-color, #38a25b);\n      }\n\n      svg {\n        width: var(--ox-checkbox-size, 15px);\n        height: var(--ox-checkbox-size, 15px);\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      :host([checked]) [label] {\n        font-weight: var(--ox-checkbox-checked-font-weight, bold);\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'checked', reflect: true }) 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 href=\"#\" @click=${(e: Event) => e.preventDefault()} checkbox>\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  connectedCallback() {\n    super.connectedCallback()\n\n    this.setAttribute('tabindex', '0')\n    this.addEventListener('keydown', this.onKeyDown.bind(this))\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: this.checked\n      })\n    )\n  }\n\n  get checkedIcon() {\n    return html`\n      <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\n  get uncheckedIcon() {\n    return html`\n      <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\n  onKeyDown(e: KeyboardEvent) {\n    e.preventDefault()\n\n    if (e.key === ' ' || e.key == 'Spacebar') {\n      this.onClick()\n    }\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    this.name && formData.append(this.name, this.checked ? 'true' : 'false')\n  }\n}\n"]}

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

@@ -0,0 +1,10 @@
+import { LitElement } from 'lit-element';
+export declare abstract class OxFormField extends LitElement {
+    name?: string;
+    value?: any;
+    private _form;
+    private _formdataEventHandler;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected appendFormData({ formData }: FormDataEvent): void;
+}

package/dist/src/ox-formfield.js

@@ -0,0 +1,38 @@
+import { __decorate } from "tslib";
+import { LitElement } from 'lit-element';
+import { property } from 'lit/decorators.js';
+export class OxFormField extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._form = null;
+        this._formdataEventHandler = null;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.name) {
+            this._form = this.closest('form');
+            if (this._form) {
+                this._formdataEventHandler = this.appendFormData.bind(this);
+                this._form.addEventListener('formdata', this._formdataEventHandler);
+            }
+        }
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        if (this._form) {
+            this._form.removeEventListener('formdata', this._formdataEventHandler);
+            this._form = null;
+            this._formdataEventHandler = null;
+        }
+    }
+    appendFormData({ formData }) {
+        this.name && formData.append(this.name, this.value);
+    }
+}
+__decorate([
+    property({ type: String })
+], OxFormField.prototype, "name", void 0);
+__decorate([
+    property()
+], OxFormField.prototype, "value", void 0);
+//# sourceMappingURL=ox-formfield.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-formfield.js","sourceRoot":"","sources":["../../src/ox-formfield.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAA;AACxC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;QAIU,UAAK,GAA2B,IAAI,CAAA;QACpC,0BAAqB,GAAyB,IAAI,CAAA;IA2B5D,CAAC;IAzBU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,IAAI,CAAC,IAAI,EAAE;YACb,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;YACjC,IAAI,IAAI,CAAC,KAAK,EAAE;gBACd,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,CAAkB,CAAA;gBAC5E,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAqB,CAAC,CAAA;aACpE;SACF;IACH,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,qBAAsB,CAAC,CAAA;YACvE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;YACjB,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAA;SAClC;IACH,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;IACrD,CAAC;CACF;AA/B6B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAc;AAC7B;IAAX,QAAQ,EAAE;0CAAY","sourcesContent":["import { LitElement } from 'lit-element'\nimport { property } from 'lit/decorators.js'\n\nexport abstract class OxFormField extends LitElement {\n  @property({ type: String }) name?: string\n  @property() value?: any\n\n  private _form: HTMLFormElement | null = null\n  private _formdataEventHandler: EventListener | null = null\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n\n    if (this.name) {\n      this._form = this.closest('form')\n      if (this._form) {\n        this._formdataEventHandler = this.appendFormData.bind(this) as EventListener\n        this._form.addEventListener('formdata', this._formdataEventHandler)\n      }\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    if (this._form) {\n      this._form.removeEventListener('formdata', this._formdataEventHandler!)\n      this._form = null\n      this._formdataEventHandler = null\n    }\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    this.name && formData.append(this.name, this.value)\n  }\n}\n"]}

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

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

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

@@ -2,81 +2,99 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
+import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-let OxInput3Dish = class OxInput3Dish extends LitElement {
+import { OxFormField } from './ox-formfield';
+let OxInput3Dish = class OxInput3Dish extends OxFormField {
     firstUpdated() {
         this.renderRoot.addEventListener('change', this._onChange.bind(this));
     }
     _onChange(e) {
+        e.stopPropagation();
+        e.preventDefault();
         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);
+                value = Number(element.value || 0);
                 break;
         }
         switch (id) {
             case 'tx':
             case 'ty':
             case 'tz':
+                this.translatex = {
+                    ...this.translatex,
+                    [prop]: value
+                };
                 this.dispatchEvent(new CustomEvent('translate-changed', {
                     bubbles: true,
                     composed: true,
                     detail: {
-                        value: {
-                            ...this.translatex,
-                            [prop]: value
-                        }
+                        value: this.translatex
                     }
                 }));
                 break;
             case 'rx':
             case 'ry':
             case 'rz':
+                this.rotate = {
+                    ...this.rotate,
+                    [prop]: value
+                };
                 this.dispatchEvent(new CustomEvent('rotate-changed', {
                     bubbles: true,
                     composed: true,
                     detail: {
-                        value: {
-                            ...this.rotate,
-                            [prop]: value
-                        }
+                        value: this.rotate
                     }
                 }));
                 break;
             case 'sx':
             case 'sy':
             case 'sz':
+                this.scale = {
+                    ...this.scale,
+                    [prop]: value
+                };
                 this.dispatchEvent(new CustomEvent('scale-changed', {
                     bubbles: true,
                     composed: true,
                     detail: {
-                        value: {
-                            ...this.scale,
-                            [prop]: value
-                        }
+                        value: this.scale
                     }
                 }));
                 break;
             default:
                 // dimension
+                this.dimension = {
+                    ...this.dimension,
+                    [prop]: value
+                };
                 this.dispatchEvent(new CustomEvent('dimension-changed', {
                     bubbles: true,
                     composed: true,
                     detail: {
-                        value: {
-                            ...this.dimension,
-                            [prop]: value
-                        }
+                        value: this.dimension
                     }
                 }));
         }
+        this.value = {
+            translate: this.translatex,
+            rotate: this.rotate,
+            scale: this.scale,
+            dimension: this.dimension
+        };
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: this.value
+        }));
     }
     render() {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
         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>
@@ -92,12 +110,20 @@ let OxInput3Dish = class OxInput3Dish extends LitElement {
       <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.scale">scale</i18n-msg></label>
+      <input type="number" id="sx" .value=${(_g = this.scale) === null || _g === void 0 ? void 0 : _g.x} />
+      <input type="number" id="sy" .value=${(_h = this.scale) === null || _h === void 0 ? void 0 : _h.y} />
+      <input type="number" id="sz" .value=${(_j = this.scale) === null || _j === void 0 ? void 0 : _j.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>
+      <ox-input-angle id="rx" .value=${(_k = this.rotate) === null || _k === void 0 ? void 0 : _k.x}></ox-input-angle>
+      <ox-input-angle id="ry" .value=${(_l = this.rotate) === null || _l === void 0 ? void 0 : _l.y}></ox-input-angle>
+      <ox-input-angle id="rz" .value=${(_m = this.rotate) === null || _m === void 0 ? void 0 : _m.z}></ox-input-angle>
     `;
     }
+    appendFormData({ formData }) {
+        this.name && formData.append(this.name, JSON.stringify(this.value));
+    }
 };
 OxInput3Dish.styles = [
     css `

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

@@ -1 +1 @@
-{"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"]}
+{"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 } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-formfield'\nimport { OxInputAngle } from './ox-input-angle'\n\n@customElement('ox-input-3dish')\nexport class OxInput3Dish extends OxFormField {\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  // translate는 고유한 html element의 attribute이므로, property는 translatex로 한다.\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    e.stopPropagation()\n    e.preventDefault()\n\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).value || 0)\n        break\n    }\n\n    switch (id) {\n      case 'tx':\n      case 'ty':\n      case 'tz':\n        this.translatex = {\n          ...this.translatex,\n          [prop]: value\n        }\n\n        this.dispatchEvent(\n          new CustomEvent('translate-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: this.translatex\n            }\n          })\n        )\n        break\n\n      case 'rx':\n      case 'ry':\n      case 'rz':\n        this.rotate = {\n          ...this.rotate,\n          [prop]: value\n        }\n\n        this.dispatchEvent(\n          new CustomEvent('rotate-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: this.rotate\n            }\n          })\n        )\n        break\n\n      case 'sx':\n      case 'sy':\n      case 'sz':\n        this.scale = {\n          ...this.scale,\n          [prop]: value\n        }\n\n        this.dispatchEvent(\n          new CustomEvent('scale-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: this.scale\n            }\n          })\n        )\n        break\n\n      default:\n        // dimension\n        this.dimension = {\n          ...this.dimension,\n          [prop]: value\n        }\n\n        this.dispatchEvent(\n          new CustomEvent('dimension-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: this.dimension\n            }\n          })\n        )\n    }\n\n    this.value = {\n      translate: this.translatex,\n      rotate: this.rotate,\n      scale: this.scale,\n      dimension: this.dimension\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\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.scale\">scale</i18n-msg></label>\n      <input type=\"number\" id=\"sx\" .value=${this.scale?.x} />\n      <input type=\"number\" id=\"sy\" .value=${this.scale?.y} />\n      <input type=\"number\" id=\"sz\" .value=${this.scale?.z} />\n\n      <label><i18n-msg msgid=\"label.rotate\">rotate</i18n-msg></label>\n      <ox-input-angle id=\"rx\" .value=${this.rotate?.x}></ox-input-angle>\n      <ox-input-angle id=\"ry\" .value=${this.rotate?.y}></ox-input-angle>\n      <ox-input-angle id=\"rz\" .value=${this.rotate?.z}></ox-input-angle>\n    `\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    this.name && formData.append(this.name, JSON.stringify(this.value))\n  }\n}\n"]}

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

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