@operato/input 9.0.0-beta.0 → 9.0.0-beta.11

package/CHANGELOG.md

@@ -3,6 +3,59 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [9.0.0-beta.11](https://github.com/hatiolab/operato/compare/v9.0.0-beta.10...v9.0.0-beta.11) (2025-01-25)
+
+
+### :bug: Bug Fix
+
+* tsconfig option useDefineForClassFields=false ([0d77c0a](https://github.com/hatiolab/operato/commit/0d77c0aa620282c65b3c05f8e0b559e82836b6ab))
+
+
+
+## [9.0.0-beta.10](https://github.com/hatiolab/operato/compare/v9.0.0-beta.9...v9.0.0-beta.10) (2025-01-25)
+
+
+### :bug: Bug Fix
+
+* @undecaf/zbar-wasm@0.11.0 ([722c68e](https://github.com/hatiolab/operato/commit/722c68e24275b28c84cf057d3038fb9c6a0e6e78))
+* tweak tsconfig.json ([3c424b1](https://github.com/hatiolab/operato/commit/3c424b18d046f95d5619076d113d49a4b4dc9bbb))
+
+
+
+## [9.0.0-beta.7](https://github.com/hatiolab/operato/compare/v9.0.0-beta.6...v9.0.0-beta.7) (2025-01-20)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [9.0.0-beta.6](https://github.com/hatiolab/operato/compare/v9.0.0-beta.5...v9.0.0-beta.6) (2025-01-20)
+
+
+### :bug: Bug Fix
+
+* esm module ([9642b97](https://github.com/hatiolab/operato/commit/9642b97650623d9ce71f6db0fd1995a2379205b5))
+
+
+
+## [9.0.0-beta.5](https://github.com/hatiolab/operato/compare/v9.0.0-beta.4...v9.0.0-beta.5) (2025-01-20)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
+## [9.0.0-beta.4](https://github.com/hatiolab/operato/compare/v9.0.0-beta.3...v9.0.0-beta.4) (2025-01-20)
+
+
+### :bug: Bug Fix
+
+* esm module ([0402232](https://github.com/hatiolab/operato/commit/04022327fa47eac64eaf3c56eeec55b9ace13e0e))
+
+
+
 ## [9.0.0-beta.0](https://github.com/hatiolab/operato/compare/v8.0.0-beta.11...v9.0.0-beta.0) (2025-01-13)
 
 **Note:** Version bump only for package @operato/input

package/dist/src/ox-buttons-radio.d.ts

@@ -2,7 +2,7 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { PropertyValues } from 'lit';
-import { OxFormField } from './ox-form-field';
+import { OxFormField } from './ox-form-field.js';
 /**
 여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.
 

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

@@ -4,7 +4,7 @@
 import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { OxFormField } from './ox-form-field';
+import { OxFormField } from './ox-form-field.js';
 /**
 여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.
 

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":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n/**\n여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.\n\nExample:\n\n  <ox-buttons-radio\n    class=\"light\"\n    @change=${(e: CustomEvent) => console.log(e.detail)}\n    value=\"1\"\n  >\n    <md-outlined-button data-value=\"1\" ?active=${value == '1'}>Option 1</md-outlined-button>\n    <md-outlined-button data-value=\"2\" ?active=${value == '2'}>Option 2</md-outlined-button>\n    <md-outlined-button data-value=\"3\" ?active=${value == '3'}>Option 3</md-outlined-button>\n  </ox-buttons-radio>\n*/\n@customElement('ox-buttons-radio')\nexport class OxButtonsRadio extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n        background-color: var(--ox-buttons-radio-background-color, var(--md-sys-color-surface));\n\n        --md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);\n        --md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        --md-outlined-button-container-height: var(--form-element-height-medium);\n        --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);\n        --md-outlined-button-leading-space: var(--spacing-large);\n        --md-outlined-button-trailing-space: var(--spacing-large);\n        --md-outlined-button-hover-label-text-color: var(--md-sys-color-primary);\n        --md-outlined-button-pressed-outline-color: var(--md-sys-color-primary);\n        --md-outlined-button-pressed-label-text-color: var(--md-sys-color-primary);\n\n        --md-filled-button-container-color: var(--md-sys-color-primary);\n        --md-filled-button-label-text-color: var(--md-sys-color-primary-container);\n        --md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        --md-filled-button-container-height: var(--form-element-height-medium);\n        --md-filled-button-container-shape: var(--md-sys-shape-corner-small);\n        --md-filled-button-leading-space: var(--spacing-large);\n        --md-filled-button-trailing-space: var(--spacing-large);\n        --md-filled-button-hover-label-text-color: var(--md-sys-color-secondary-container);\n        --md-filled-button-pressed-label-text-color: var(--md-sys-color-secondary-container);\n        --md-filled-button-focus-label-text-color: var(--md-sys-color-secondary-container);\n\n        --md-text-button-container-height: var(--form-element-height-medium);\n        --md-text-button-container-shape: var(--md-sys-shape-corner-small);\n\n        --md-elevated-button-container-height: var(--form-element-height-medium);\n        --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);\n      }\n    `\n  ]\n\n  /**\n   * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.\n   */\n  @property({ type: Object }) value: Object | null = null\n  @property({ type: Boolean }) mandatory!: boolean\n\n  @state() _slotObserver: MutationObserver = new MutationObserver(mutations => {\n    this._onChanged()\n  })\n\n  render() {\n    return html` <slot @click=${(e: Event) => this._onTapButton(e)}></slot> `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this._slotObserver?.observe(this, { childList: true })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this._slotObserver?.disconnect()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('value') && this._onChanged()\n  }\n\n  get buttons() {\n    return Array.from(this.querySelectorAll('*'))\n  }\n\n  _onChanged() {\n    this.buttons.forEach(button => {\n      if (this.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    target = target.closest('[data-value]') as HTMLElement\n\n    if (!target || 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(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: this.value\n        })\n      )\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, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n/**\n여러 버튼 중에서 하나만 눌리거나, 모두 눌리지 않은 상태만을 갖는 라디오 형태의 버튼이다.\n\nExample:\n\n  <ox-buttons-radio\n    class=\"light\"\n    @change=${(e: CustomEvent) => console.log(e.detail)}\n    value=\"1\"\n  >\n    <md-outlined-button data-value=\"1\" ?active=${value == '1'}>Option 1</md-outlined-button>\n    <md-outlined-button data-value=\"2\" ?active=${value == '2'}>Option 2</md-outlined-button>\n    <md-outlined-button data-value=\"3\" ?active=${value == '3'}>Option 3</md-outlined-button>\n  </ox-buttons-radio>\n*/\n@customElement('ox-buttons-radio')\nexport class OxButtonsRadio extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n        background-color: var(--ox-buttons-radio-background-color, var(--md-sys-color-surface));\n\n        --md-outlined-button-label-text-color: var(--md-sys-color-on-surface-variant);\n        --md-outlined-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        --md-outlined-button-container-height: var(--form-element-height-medium);\n        --md-outlined-button-container-shape: var(--md-sys-shape-corner-small);\n        --md-outlined-button-leading-space: var(--spacing-large);\n        --md-outlined-button-trailing-space: var(--spacing-large);\n        --md-outlined-button-hover-label-text-color: var(--md-sys-color-primary);\n        --md-outlined-button-pressed-outline-color: var(--md-sys-color-primary);\n        --md-outlined-button-pressed-label-text-color: var(--md-sys-color-primary);\n\n        --md-filled-button-container-color: var(--md-sys-color-primary);\n        --md-filled-button-label-text-color: var(--md-sys-color-primary-container);\n        --md-filled-button-label-text-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        --md-filled-button-container-height: var(--form-element-height-medium);\n        --md-filled-button-container-shape: var(--md-sys-shape-corner-small);\n        --md-filled-button-leading-space: var(--spacing-large);\n        --md-filled-button-trailing-space: var(--spacing-large);\n        --md-filled-button-hover-label-text-color: var(--md-sys-color-secondary-container);\n        --md-filled-button-pressed-label-text-color: var(--md-sys-color-secondary-container);\n        --md-filled-button-focus-label-text-color: var(--md-sys-color-secondary-container);\n\n        --md-text-button-container-height: var(--form-element-height-medium);\n        --md-text-button-container-shape: var(--md-sys-shape-corner-small);\n\n        --md-elevated-button-container-height: var(--form-element-height-medium);\n        --md-elevated-button-container-shape: var(--md-sys-shape-corner-small);\n      }\n    `\n  ]\n\n  /**\n   * `value`는 버튼의 눌린 상태를 값으로 갖는 속성이다.\n   */\n  @property({ type: Object }) value: Object | null = null\n  @property({ type: Boolean }) mandatory!: boolean\n\n  @state() _slotObserver: MutationObserver = new MutationObserver(mutations => {\n    this._onChanged()\n  })\n\n  render() {\n    return html` <slot @click=${(e: Event) => this._onTapButton(e)}></slot> `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this._slotObserver?.observe(this, { childList: true })\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this._slotObserver?.disconnect()\n  }\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('value') && this._onChanged()\n  }\n\n  get buttons() {\n    return Array.from(this.querySelectorAll('*'))\n  }\n\n  _onChanged() {\n    this.buttons.forEach(button => {\n      if (this.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    target = target.closest('[data-value]') as HTMLElement\n\n    if (!target || 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(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: this.value\n        })\n      )\n    }\n  }\n}\n"]}

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

@@ -1,7 +1,7 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import { OxFormField } from './ox-form-field';
+import { OxFormField } from './ox-form-field.js';
 export declare class OxCheckbox extends OxFormField {
     static styles: import("lit").CSSResult[];
     checked: boolean | undefined;

package/dist/src/ox-checkbox.js

@@ -7,7 +7,7 @@ import { __decorate } from "tslib";
 */
 import { css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { OxFormField } from './ox-form-field';
+import { OxFormField } from './ox-form-field.js';
 let OxCheckbox = class OxCheckbox extends OxFormField {
     constructor() {
         super(...arguments);

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

@@ -1 +1 @@
-{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"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","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 } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\n  static styles = [\n    css`\n      div {\n        display: flex;\n        gap: var(--input-intra-gap, 7px);\n\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        background-color: var(--ox-checkbox-unchecked-background-color, var(--md-sys-color-surface-container-lowest));\n        border: var(--ox-checkbox-unchecked-border, 1px solid var(--md-sys-color-outline));\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      :host([checked]) .checkbox {\n        background-color: var(--ox-checkbox-checked-background-color, var(--md-sys-color-primary));\n      }\n\n      path {\n        fill: var(--ox-checkbox-unchecked-color, var(--md-sys-color-surface-container-lowest));\n      }\n\n      :host([indeterminate]) line {\n        stroke: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-outline));\n      }\n\n      :host([checked]) path {\n        fill: var(--ox-checkbox-checked-color, var(--md-sys-color-on-primary));\n      }\n\n      svg {\n        width: var(--ox-checkbox-size, 15px);\n        height: var(--ox-checkbox-size, 15px);\n      }\n\n      .label {\n        color: var(--ox-checkbox-label-color, var(--md-sys-color-on-surface));\n        line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);\n      }\n\n      :host([checked]) .label {\n        color: var(ox-checkbox-label-checked-color, var(--md-sys-color-on-surface));\n        font-weight: 700;\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean | undefined = false\n  @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false\n  @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false\n  @property({ type: Boolean, attribute: 'left-label' }) left: boolean = false\n\n  @state() _hasInner: boolean = !!this.innerHTML.trim().length\n\n  render() {\n    return html`\n      <div ?disabled=${this.disabled} @click=${this.onClick}>\n        ${this._hasInner && this.left\n          ? html` <span label>\n              <slot></slot>\n            </span>`\n          : ''}\n        <a href=\"#\" @click=${(e: Event) => e.preventDefault()} class=\"checkbox\">\n          ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}\n        </a>\n        ${this._hasInner && !this.left\n          ? html` <span class=\"label\">\n              <slot></slot>\n            </span>`\n          : ''}\n      </div>\n    `\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.setAttribute('tabindex', '0')\n    this.addEventListener('keydown', this.onKeyDown)\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    this.setAttribute('tabindex', '-1')\n    this.removeEventListener('keydown', this.onKeyDown)\n  }\n\n  onClick() {\n    if (this.disabled) {\n      return\n    }\n\n    if (!this.indeterminatable) {\n      this.indeterminate = false\n      this.checked = !this.checked\n    } else {\n      if (this.indeterminate) {\n        this.indeterminate = false\n        this.checked = true\n      } else if (this.checked) {\n        this.indeterminate = false\n        this.checked = false\n      } else {\n        this.indeterminate = true\n        this.checked = undefined\n      }\n    }\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  get indeterminateIcon() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" stroke-width=\"2\" stroke-linecap=\"round\" />\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 && !this.indeterminate && formData.append(this.name, this.checked ? 'true' : 'false')\n  }\n}\n"]}
+{"version":3,"file":"ox-checkbox.js","sourceRoot":"","sources":["../../src/ox-checkbox.ts"],"names":[],"mappings":"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","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 } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\n  static styles = [\n    css`\n      div {\n        display: flex;\n        gap: var(--input-intra-gap, 7px);\n\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        background-color: var(--ox-checkbox-unchecked-background-color, var(--md-sys-color-surface-container-lowest));\n        border: var(--ox-checkbox-unchecked-border, 1px solid var(--md-sys-color-outline));\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      :host([checked]) .checkbox {\n        background-color: var(--ox-checkbox-checked-background-color, var(--md-sys-color-primary));\n      }\n\n      path {\n        fill: var(--ox-checkbox-unchecked-color, var(--md-sys-color-surface-container-lowest));\n      }\n\n      :host([indeterminate]) line {\n        stroke: var(--ox-checkbox-intermidiate-color, var(--md-sys-color-outline));\n      }\n\n      :host([checked]) path {\n        fill: var(--ox-checkbox-checked-color, var(--md-sys-color-on-primary));\n      }\n\n      svg {\n        width: var(--ox-checkbox-size, 15px);\n        height: var(--ox-checkbox-size, 15px);\n      }\n\n      .label {\n        color: var(--ox-checkbox-label-color, var(--md-sys-color-on-surface));\n        line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);\n      }\n\n      :host([checked]) .label {\n        color: var(ox-checkbox-label-checked-color, var(--md-sys-color-on-surface));\n        font-weight: 700;\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'checked', reflect: true }) checked: boolean | undefined = false\n  @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false\n  @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false\n  @property({ type: Boolean, attribute: 'left-label' }) left: boolean = false\n\n  @state() _hasInner: boolean = !!this.innerHTML.trim().length\n\n  render() {\n    return html`\n      <div ?disabled=${this.disabled} @click=${this.onClick}>\n        ${this._hasInner && this.left\n          ? html` <span label>\n              <slot></slot>\n            </span>`\n          : ''}\n        <a href=\"#\" @click=${(e: Event) => e.preventDefault()} class=\"checkbox\">\n          ${this.indeterminate ? this.indeterminateIcon : this.checked ? this.checkedIcon : this.uncheckedIcon}\n        </a>\n        ${this._hasInner && !this.left\n          ? html` <span class=\"label\">\n              <slot></slot>\n            </span>`\n          : ''}\n      </div>\n    `\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback()\n\n    this.setAttribute('tabindex', '0')\n    this.addEventListener('keydown', this.onKeyDown)\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback()\n\n    this.setAttribute('tabindex', '-1')\n    this.removeEventListener('keydown', this.onKeyDown)\n  }\n\n  onClick() {\n    if (this.disabled) {\n      return\n    }\n\n    if (!this.indeterminatable) {\n      this.indeterminate = false\n      this.checked = !this.checked\n    } else {\n      if (this.indeterminate) {\n        this.indeterminate = false\n        this.checked = true\n      } else if (this.checked) {\n        this.indeterminate = false\n        this.checked = false\n      } else {\n        this.indeterminate = true\n        this.checked = undefined\n      }\n    }\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  get indeterminateIcon() {\n    return html`\n      <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n        <line x1=\"4\" x2=\"20\" y1=\"12\" y2=\"12\" stroke-width=\"2\" stroke-linecap=\"round\" />\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 && !this.indeterminate && formData.append(this.name, this.checked ? 'true' : 'false')\n  }\n}\n"]}

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

@@ -1,7 +1,7 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import { OxFormField } from './ox-form-field';
+import { OxFormField } from './ox-form-field.js';
 export declare class OxInput3Axis extends OxFormField {
     static styles: import("lit").CSSResult[];
     firstUpdated(): void;

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

@@ -5,7 +5,7 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 import { localized } from '@lit/localize';
-import { OxFormField } from './ox-form-field';
+import { OxFormField } from './ox-form-field.js';
 let OxInput3Axis = class OxInput3Axis extends OxFormField {
     static { this.styles = [
         css `

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-3axis.js","sourceRoot":"","sources":["../../src/ox-input-3axis.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAItC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;aACpC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;KAwBF;KACF,AA1BY,CA0BZ;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,EAAE,GAAG,OAAO,CAAC,EAAqB,CAAA;QACtC,IAAI,KAAK,GAAG,MAAM,CAAE,OAA4B,CAAC,KAAK,CAAC,CAAA;QAEvD,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,EAAE,CAAC,EAAE,KAAK;SACZ,CAAA;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAC9B,OAAO,IAAI,CAAA;2DAC4C,MAAM,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;2DACpC,MAAM,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;2DACpC,MAAM,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;KAC1F,CAAA;IACH,CAAC;;AA9DU,YAAY;IAFxB,SAAS,EAAE;IACX,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA+DxB","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 { localized } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field'\n\n@localized()\n@customElement('ox-input-3axis')\nexport class OxInput3Axis extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n      }\n\n      input {\n        box-sizing: border-box;\n        padding: 0 var(--spacing-small);\n        height: var(--form-element-height-medium);\n        border: 1px solid var(--md-sys-color-outline);\n        border-radius: var(--md-sys-shape-corner-small);\n        background-color: var(--md-sys-color-on-primary);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n      }\n\n      input:not(:last-child) {\n        margin-right: var(--margin-default, 2px);\n      }\n\n      input:focus {\n        outline: none;\n        border-color: var(--md-sys-color-secondary-fixed-dim);\n      }\n    `\n  ]\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 as 'x' | 'y' | 'z'\n    var value = Number((element as HTMLInputElement).value)\n\n    this.value = {\n      ...this.value,\n      [id]: value\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    const { x, y, z } = this.value\n    return html`\n      <input type=\"number\" id=\"x\" placeholder=\"X\" .value=${String(x)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"y\" placeholder=\"Y\" .value=${String(y)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"z\" placeholder=\"Z\" .value=${String(z)} ?disabled=${this.disabled} />\n    `\n  }\n}\n"]}
+{"version":3,"file":"ox-input-3axis.js","sourceRoot":"","sources":["../../src/ox-input-3axis.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAY,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAEzC,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAIzC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;aACpC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;KAwBF;KACF,AA1BY,CA0BZ;IAED,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAED,SAAS,CAAC,CAAQ;QAChB,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,OAAO,GAAG,CAAC,CAAC,MAAqB,CAAA;QACrC,IAAI,EAAE,GAAG,OAAO,CAAC,EAAqB,CAAA;QACtC,IAAI,KAAK,GAAG,MAAM,CAAE,OAA4B,CAAC,KAAK,CAAC,CAAA;QAEvD,IAAI,CAAC,KAAK,GAAG;YACX,GAAG,IAAI,CAAC,KAAK;YACb,CAAC,EAAE,CAAC,EAAE,KAAK;SACZ,CAAA;QAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;IAED,MAAM;QACJ,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAA;QAC9B,OAAO,IAAI,CAAA;2DAC4C,MAAM,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;2DACpC,MAAM,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;2DACpC,MAAM,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;KAC1F,CAAA;IACH,CAAC;;AA9DU,YAAY;IAFxB,SAAS,EAAE;IACX,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA+DxB","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 { localized } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@localized()\n@customElement('ox-input-3axis')\nexport class OxInput3Axis extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n      }\n\n      input {\n        box-sizing: border-box;\n        padding: 0 var(--spacing-small);\n        height: var(--form-element-height-medium);\n        border: 1px solid var(--md-sys-color-outline);\n        border-radius: var(--md-sys-shape-corner-small);\n        background-color: var(--md-sys-color-on-primary);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n      }\n\n      input:not(:last-child) {\n        margin-right: var(--margin-default, 2px);\n      }\n\n      input:focus {\n        outline: none;\n        border-color: var(--md-sys-color-secondary-fixed-dim);\n      }\n    `\n  ]\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 as 'x' | 'y' | 'z'\n    var value = Number((element as HTMLInputElement).value)\n\n    this.value = {\n      ...this.value,\n      [id]: value\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    const { x, y, z } = this.value\n    return html`\n      <input type=\"number\" id=\"x\" placeholder=\"X\" .value=${String(x)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"y\" placeholder=\"Y\" .value=${String(y)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"z\" placeholder=\"Z\" .value=${String(z)} ?disabled=${this.disabled} />\n    `\n  }\n}\n"]}

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

@@ -1,8 +1,8 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import './ox-input-angle';
-import { OxFormField } from './ox-form-field';
+import './ox-input-angle.js';
+import { OxFormField } from './ox-form-field.js';
 export declare class OxInput3Dish extends OxFormField {
     static styles: import("lit").CSSResult[];
     dimension?: {

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

@@ -2,11 +2,11 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import './ox-input-angle';
+import './ox-input-angle.js';
 import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { localized, msg } from '@lit/localize';
-import { OxFormField } from './ox-form-field';
+import { OxFormField } from './ox-form-field.js';
 let OxInput3Dish = class OxInput3Dish extends OxFormField {
     static { this.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 './ox-input-angle'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field'\nimport { OxInputAngle } from './ox-input-angle'\n\n@localized()\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(7, minmax(50px, 1fr));\n        grid-gap: var(--spacing-medium);\n      }\n\n      label {\n        text-align: right;\n        align-self: center;\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n        text-transform: var(--label-text-transform);\n        grid-column: span 1;\n      }\n\n      span {\n        grid-column: span 2;\n        text-align: center;\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-surface-tint);\n        font-weight: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500));\n      }\n\n      input,\n      ox-input-angle {\n        grid-column: span 2;\n        box-sizing: border-box;\n        padding: 0 var(--spacing-small);\n        height: var(--form-element-height-medium);\n        border: 1px solid var(--md-sys-color-outline);\n        border-radius: var(--md-sys-shape-corner-small);\n        overflow: hidden;\n        background-color: var(--md-sys-color-on-primary);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n      }\n\n      ox-input-angle {\n        --input-border: 0;\n      }\n\n      input:focus {\n        outline: none;\n        border-color: var(--md-sys-color-secondary-fixed-dim);\n      }\n    `\n  ]\n\n  @property({ type: Object }) dimension?: { width?: number; height?: number; depth?: number }\n  @property({ type: Object }) position?: { 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.position = {\n          ...this.position,\n          [prop]: value\n        }\n\n        this.dispatchEvent(\n          new CustomEvent('position-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: this.position\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      position: this.position,\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      <label></label> <span>${msg('x-axes')}</span>\n      <span>${msg('y-axes')}</span>\n      <span>${msg('z-axes')}</span>\n\n      <label>${msg('dimension')}</label>\n      <input type=\"number\" id=\"dwidth\" .value=${String(this.dimension?.width)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"dheight\" .value=${String(this.dimension?.height)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"ddepth\" .value=${String(this.dimension?.depth)} ?disabled=${this.disabled} />\n\n      <label>${msg('position')}</label>\n      <input type=\"number\" id=\"tx\" .value=${String(this.position?.x)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"ty\" .value=${String(this.position?.y)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"tz\" .value=${String(this.position?.z)} ?disabled=${this.disabled} />\n\n      <label>${msg('scale')}</label>\n      <input type=\"number\" id=\"sx\" .value=${String(this.scale?.x)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"sy\" .value=${String(this.scale?.y)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"sz\" .value=${String(this.scale?.z)} ?disabled=${this.disabled} />\n\n      <label>${msg('rotate')}</label>\n      <ox-input-angle id=\"rx\" .value=${String(this.rotate?.x)} ?disabled=${this.disabled}></ox-input-angle>\n      <ox-input-angle id=\"ry\" .value=${String(this.rotate?.y)} ?disabled=${this.disabled}></ox-input-angle>\n      <ox-input-angle id=\"rz\" .value=${String(this.rotate?.z)} ?disabled=${this.disabled}></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 './ox-input-angle.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { OxInputAngle } from './ox-input-angle.js'\n\n@localized()\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(7, minmax(50px, 1fr));\n        grid-gap: var(--spacing-medium);\n      }\n\n      label {\n        text-align: right;\n        align-self: center;\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n        text-transform: var(--label-text-transform);\n        grid-column: span 1;\n      }\n\n      span {\n        grid-column: span 2;\n        text-align: center;\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-surface-tint);\n        font-weight: var(--md-sys-typescale-label-medium-weight, var(--md-ref-typeface-weight-medium, 500));\n      }\n\n      input,\n      ox-input-angle {\n        grid-column: span 2;\n        box-sizing: border-box;\n        padding: 0 var(--spacing-small);\n        height: var(--form-element-height-medium);\n        border: 1px solid var(--md-sys-color-outline);\n        border-radius: var(--md-sys-shape-corner-small);\n        overflow: hidden;\n        background-color: var(--md-sys-color-on-primary);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n      }\n\n      ox-input-angle {\n        --input-border: 0;\n      }\n\n      input:focus {\n        outline: none;\n        border-color: var(--md-sys-color-secondary-fixed-dim);\n      }\n    `\n  ]\n\n  @property({ type: Object }) dimension?: { width?: number; height?: number; depth?: number }\n  @property({ type: Object }) position?: { 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.position = {\n          ...this.position,\n          [prop]: value\n        }\n\n        this.dispatchEvent(\n          new CustomEvent('position-changed', {\n            bubbles: true,\n            composed: true,\n            detail: {\n              value: this.position\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      position: this.position,\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      <label></label> <span>${msg('x-axes')}</span>\n      <span>${msg('y-axes')}</span>\n      <span>${msg('z-axes')}</span>\n\n      <label>${msg('dimension')}</label>\n      <input type=\"number\" id=\"dwidth\" .value=${String(this.dimension?.width)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"dheight\" .value=${String(this.dimension?.height)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"ddepth\" .value=${String(this.dimension?.depth)} ?disabled=${this.disabled} />\n\n      <label>${msg('position')}</label>\n      <input type=\"number\" id=\"tx\" .value=${String(this.position?.x)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"ty\" .value=${String(this.position?.y)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"tz\" .value=${String(this.position?.z)} ?disabled=${this.disabled} />\n\n      <label>${msg('scale')}</label>\n      <input type=\"number\" id=\"sx\" .value=${String(this.scale?.x)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"sy\" .value=${String(this.scale?.y)} ?disabled=${this.disabled} />\n      <input type=\"number\" id=\"sz\" .value=${String(this.scale?.z)} ?disabled=${this.disabled} />\n\n      <label>${msg('rotate')}</label>\n      <ox-input-angle id=\"rx\" .value=${String(this.rotate?.x)} ?disabled=${this.disabled}></ox-input-angle>\n      <ox-input-angle id=\"ry\" .value=${String(this.rotate?.y)} ?disabled=${this.disabled}></ox-input-angle>\n      <ox-input-angle id=\"rz\" .value=${String(this.rotate?.z)} ?disabled=${this.disabled}></ox-input-angle>\n    `\n  }\n}\n"]}

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

@@ -1,7 +1,7 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import { OxFormField } from './ox-form-field';
+import { OxFormField } from './ox-form-field.js';
 export declare class OxInputAngle extends OxFormField {
     static styles: import("lit").CSSResult[];
     placeholder?: string;

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

@@ -4,7 +4,7 @@
 import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
-import { OxFormField } from './ox-form-field';
+import { OxFormField } from './ox-form-field.js';
 let OxInputAngle = class OxInputAngle extends OxFormField {
     static { this.styles = [
         css `

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

@@ -1 +1 @@
-{"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,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGtC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;aACpC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBF;KACF,AAxBY,CAwBZ;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;uBAC5B,IAAI,CAAC,WAAW,IAAI,IAAI;kBAC7B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;oBAClC,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAE7C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;IAED,SAAS,CAAC,KAAkC;QAC1C,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,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;;AAlC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAqB;AAEhC;IAAf,KAAK,CAAC,OAAO,CAAC;2CAAyB;AA7B7B,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA8DxB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-angle')\nexport class OxInputAngle extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n      }\n\n      input {\n        width: 100%;\n        height: 100%;\n        min-height: var(--form-element-height-medium);\n        padding: 0 var(--spacing-small);\n        box-sizing: border-box;\n        border: var(--input-border, 1px solid var(--md-sys-color-outline));\n        border-radius: var(--md-sys-shape-corner-small);\n        background-color: var(--md-sys-color-on-primary);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n      }\n\n      input:focus {\n        outline: var(--input-focus-outline, inherit);\n        border-color: var(--md-sys-color-secondary-fixed-dim);\n      }\n    `\n  ]\n\n  @property({ type: String }) placeholder?: string\n\n  @query('input') input!: HTMLInputElement\n\n  render() {\n    return html`\n      <input\n        type=\"number\"\n        .value=${String(this._toDegree(this.value))}\n        .placeholder=${this.placeholder || '0°'}\n        @change=${(e: Event) => this._onChangeValue(e)}\n        ?disabled=${this.disabled}\n      />\n    `\n  }\n\n  _onChangeValue(e: Event) {\n    this.value = this._toRadian(this.input.value)\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n\n  _toDegree(value: string | number | undefined) {\n    return Math.round(((Number(value) || 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"]}
+{"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,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;aACpC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;KAsBF;KACF,AAxBY,CAwBZ;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;uBAC5B,IAAI,CAAC,WAAW,IAAI,IAAI;kBAC7B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;oBAClC,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAE7C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;IAED,SAAS,CAAC,KAAkC;QAC1C,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,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;;AAlC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAqB;AAEhC;IAAf,KAAK,CAAC,OAAO,CAAC;2CAAyB;AA7B7B,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA8DxB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-angle')\nexport class OxInputAngle extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n      }\n\n      input {\n        width: 100%;\n        height: 100%;\n        min-height: var(--form-element-height-medium);\n        padding: 0 var(--spacing-small);\n        box-sizing: border-box;\n        border: var(--input-border, 1px solid var(--md-sys-color-outline));\n        border-radius: var(--md-sys-shape-corner-small);\n        background-color: var(--md-sys-color-on-primary);\n        font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n        color: var(--md-sys-color-on-primary-container);\n      }\n\n      input:focus {\n        outline: var(--input-focus-outline, inherit);\n        border-color: var(--md-sys-color-secondary-fixed-dim);\n      }\n    `\n  ]\n\n  @property({ type: String }) placeholder?: string\n\n  @query('input') input!: HTMLInputElement\n\n  render() {\n    return html`\n      <input\n        type=\"number\"\n        .value=${String(this._toDegree(this.value))}\n        .placeholder=${this.placeholder || '0°'}\n        @change=${(e: Event) => this._onChangeValue(e)}\n        ?disabled=${this.disabled}\n      />\n    `\n  }\n\n  _onChangeValue(e: Event) {\n    this.value = this._toRadian(this.input.value)\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n\n  _toDegree(value: string | number | undefined) {\n    return Math.round(((Number(value) || 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-code.d.ts

@@ -3,7 +3,7 @@
  */
 import { PropertyValues } from 'lit';
 import { EditorView } from '@codemirror/view';
-import { OxFormField } from './ox-form-field';
+import { OxFormField } from './ox-form-field.js';
 /**
 WEB Component for code-mirror code editor.
 

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

@@ -15,7 +15,7 @@ import { sql } from '@codemirror/lang-sql';
 import { json } from '@codemirror/lang-json';
 import { ScrollbarStyles } from '@operato/styles';
 import { togglefullscreen } from '@operato/utils';
-import { OxFormField } from './ox-form-field';
+import { OxFormField } from './ox-form-field.js';
 /**
 WEB Component for code-mirror code editor.
 
@@ -45,13 +45,12 @@ let OxInputCode = class OxInputCode extends OxFormField {
         position: relative;
         background: white;
         overflow: auto;
-        border:1px solid var(--md-sys-color-outline);
-        border-radius:var(--md-sys-shape-corner-small);
+        border: 1px solid var(--md-sys-color-outline);
+        border-radius: var(--md-sys-shape-corner-small);
       }
 
       .cm-editor {
         flex: 1;
-        
       }
     `
     ]; }

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-code.js","sourceRoot":"","sources":["../../src/ox-input-code.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { minimalSetup } from 'codemirror'\nimport { history, historyKeymap, indentWithTab } from '@codemirror/commands'\nimport { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view'\nimport { autocompletion, closeBrackets } from '@codemirror/autocomplete'\nimport { bracketMatching, LanguageSupport, syntaxHighlighting } from '@codemirror/language'\nimport { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'\n\nimport { javascript } from '@codemirror/lang-javascript'\nimport { sql } from '@codemirror/lang-sql'\nimport { json } from '@codemirror/lang-json'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { togglefullscreen } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field'\n\n/**\nWEB Component for code-mirror code editor.\n\nExample:\n\n  <ox-input-code .value=${text} language=\"javascript\" show-line-numbers>\n  </ox-input-code>\n*/\n@customElement('ox-input-code')\nexport class OxInputCode extends OxFormField {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        background: white;\n        overflow: auto;\n        border:1px solid var(--md-sys-color-outline);\n        border-radius:var(--md-sys-shape-corner-small);\n      }\n\n      .cm-editor {\n        flex: 1;\n        \n      }\n    `\n  ]\n\n  /**\n   * `value`는 에디터에서 작성중인 contents이다.\n   */\n  @property({ type: String }) value: string = ''\n  @property({ type: Boolean, attribute: 'show-line-numbers' }) showLineNumbers: boolean = false\n  @property({ type: String }) language?: string = 'javascript'\n\n  private _self_changing: boolean = false\n  private _editor?: EditorView\n  private _changed: boolean = false\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value') && this.editor && !this._self_changing) {\n      const to = this.editor.state.doc.toString().length\n      this.editor.dispatch({\n        changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }\n      })\n    }\n  }\n\n  get editor() {\n    if (!this._editor) {\n      let language: LanguageSupport[] = []\n      switch (this.language) {\n        case 'sql':\n          language = [sql()]\n          break\n        case 'json':\n          language = [json()]\n          break\n        case 'javascript':\n          language = [javascript()]\n          break\n        default:\n          break\n      }\n\n      this._editor = new EditorView({\n        doc: this.value,\n        extensions: [\n          minimalSetup,\n          ...language,\n          ...(this.showLineNumbers ? [lineNumbers()] : []),\n          bracketMatching(),\n          closeBrackets(),\n          history(),\n          autocompletion(),\n          oneDark,\n          syntaxHighlighting(oneDarkHighlightStyle),\n          highlightActiveLine(),\n          keymap.of([...historyKeymap, indentWithTab]),\n          EditorView.updateListener.of(async v => {\n            if (v.docChanged) {\n              this._self_changing = true\n              this._changed = true\n\n              await this.updateComplete\n\n              this._self_changing = false\n            }\n          })\n        ],\n        parent: this.renderRoot\n      })\n    }\n\n    this._editor.contentDOM.addEventListener('keydown', event => {\n      event.stopPropagation()\n\n      if (event.key === 'Escape') {\n        togglefullscreen(this._editor!.contentDOM)\n      }\n    })\n\n    this._editor.contentDOM.addEventListener('blur', e => {\n      if (!this._changed) {\n        return\n      }\n\n      this.value = this._editor!.state.doc.toString()\n      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n    })\n\n    return this._editor\n  }\n}\n"]}
+{"version":3,"file":"ox-input-code.js","sourceRoot":"","sources":["../../src/ox-input-code.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAC5E,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AACvF,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,eAAe,EAAmB,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAC3F,OAAO,EAAE,qBAAqB,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAE3E,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD;;;;;;;EAOE;AAEK,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;QAoBL;;WAEG;QACyB,UAAK,GAAW,EAAE,CAAA;QACe,oBAAe,GAAY,KAAK,CAAA;QACjE,aAAQ,GAAY,YAAY,CAAA;QAEpD,mBAAc,GAAY,KAAK,CAAA;QAE/B,aAAQ,GAAY,KAAK,CAAA;IA4EnC,CAAC;aAxGQ,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;KAcF;KACF,AAjBY,CAiBZ;IAaD,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YAChE,MAAM,EAAE,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,MAAM,CAAA;YAClD,IAAI,CAAC,MAAM,CAAC,QAAQ,CAAC;gBACnB,OAAO,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE;aACrF,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAED,IAAI,MAAM;QACR,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,IAAI,QAAQ,GAAsB,EAAE,CAAA;YACpC,QAAQ,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACtB,KAAK,KAAK;oBACR,QAAQ,GAAG,CAAC,GAAG,EAAE,CAAC,CAAA;oBAClB,MAAK;gBACP,KAAK,MAAM;oBACT,QAAQ,GAAG,CAAC,IAAI,EAAE,CAAC,CAAA;oBACnB,MAAK;gBACP,KAAK,YAAY;oBACf,QAAQ,GAAG,CAAC,UAAU,EAAE,CAAC,CAAA;oBACzB,MAAK;gBACP;oBACE,MAAK;YACT,CAAC;YAED,IAAI,CAAC,OAAO,GAAG,IAAI,UAAU,CAAC;gBAC5B,GAAG,EAAE,IAAI,CAAC,KAAK;gBACf,UAAU,EAAE;oBACV,YAAY;oBACZ,GAAG,QAAQ;oBACX,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;oBAChD,eAAe,EAAE;oBACjB,aAAa,EAAE;oBACf,OAAO,EAAE;oBACT,cAAc,EAAE;oBAChB,OAAO;oBACP,kBAAkB,CAAC,qBAAqB,CAAC;oBACzC,mBAAmB,EAAE;oBACrB,MAAM,CAAC,EAAE,CAAC,CAAC,GAAG,aAAa,EAAE,aAAa,CAAC,CAAC;oBAC5C,UAAU,CAAC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAC,CAAC,EAAC,EAAE;wBACrC,IAAI,CAAC,CAAC,UAAU,EAAE,CAAC;4BACjB,IAAI,CAAC,cAAc,GAAG,IAAI,CAAA;4BAC1B,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAA;4BAEpB,MAAM,IAAI,CAAC,cAAc,CAAA;4BAEzB,IAAI,CAAC,cAAc,GAAG,KAAK,CAAA;wBAC7B,CAAC;oBACH,CAAC,CAAC;iBACH;gBACD,MAAM,EAAE,IAAI,CAAC,UAAU;aACxB,CAAC,CAAA;QACJ,CAAC;QAED,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,EAAE;YAC1D,KAAK,CAAC,eAAe,EAAE,CAAA;YAEvB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC3B,gBAAgB,CAAC,IAAI,CAAC,OAAQ,CAAC,UAAU,CAAC,CAAA;YAC5C,CAAC;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,gBAAgB,CAAC,MAAM,EAAE,CAAC,CAAC,EAAE;YACnD,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,OAAM;YACR,CAAC;YAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;YAC/C,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAA;QACtG,CAAC,CAAC,CAAA;QAEF,OAAO,IAAI,CAAC,OAAO,CAAA;IACrB,CAAC;;AAjF2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAmB;AACe;IAA5D,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;oDAAiC;AACjE;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAiC;AAzBjD,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,CAyGvB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { minimalSetup } from 'codemirror'\nimport { history, historyKeymap, indentWithTab } from '@codemirror/commands'\nimport { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view'\nimport { autocompletion, closeBrackets } from '@codemirror/autocomplete'\nimport { bracketMatching, LanguageSupport, syntaxHighlighting } from '@codemirror/language'\nimport { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'\n\nimport { javascript } from '@codemirror/lang-javascript'\nimport { sql } from '@codemirror/lang-sql'\nimport { json } from '@codemirror/lang-json'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { togglefullscreen } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field.js'\n\n/**\nWEB Component for code-mirror code editor.\n\nExample:\n\n  <ox-input-code .value=${text} language=\"javascript\" show-line-numbers>\n  </ox-input-code>\n*/\n@customElement('ox-input-code')\nexport class OxInputCode extends OxFormField {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        position: relative;\n        background: white;\n        overflow: auto;\n        border: 1px solid var(--md-sys-color-outline);\n        border-radius: var(--md-sys-shape-corner-small);\n      }\n\n      .cm-editor {\n        flex: 1;\n      }\n    `\n  ]\n\n  /**\n   * `value`는 에디터에서 작성중인 contents이다.\n   */\n  @property({ type: String }) value: string = ''\n  @property({ type: Boolean, attribute: 'show-line-numbers' }) showLineNumbers: boolean = false\n  @property({ type: String }) language?: string = 'javascript'\n\n  private _self_changing: boolean = false\n  private _editor?: EditorView\n  private _changed: boolean = false\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value') && this.editor && !this._self_changing) {\n      const to = this.editor.state.doc.toString().length\n      this.editor.dispatch({\n        changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }\n      })\n    }\n  }\n\n  get editor() {\n    if (!this._editor) {\n      let language: LanguageSupport[] = []\n      switch (this.language) {\n        case 'sql':\n          language = [sql()]\n          break\n        case 'json':\n          language = [json()]\n          break\n        case 'javascript':\n          language = [javascript()]\n          break\n        default:\n          break\n      }\n\n      this._editor = new EditorView({\n        doc: this.value,\n        extensions: [\n          minimalSetup,\n          ...language,\n          ...(this.showLineNumbers ? [lineNumbers()] : []),\n          bracketMatching(),\n          closeBrackets(),\n          history(),\n          autocompletion(),\n          oneDark,\n          syntaxHighlighting(oneDarkHighlightStyle),\n          highlightActiveLine(),\n          keymap.of([...historyKeymap, indentWithTab]),\n          EditorView.updateListener.of(async v => {\n            if (v.docChanged) {\n              this._self_changing = true\n              this._changed = true\n\n              await this.updateComplete\n\n              this._self_changing = false\n            }\n          })\n        ],\n        parent: this.renderRoot\n      })\n    }\n\n    this._editor.contentDOM.addEventListener('keydown', event => {\n      event.stopPropagation()\n\n      if (event.key === 'Escape') {\n        togglefullscreen(this._editor!.contentDOM)\n      }\n    })\n\n    this._editor.contentDOM.addEventListener('blur', e => {\n      if (!this._changed) {\n        return\n      }\n\n      this.value = this._editor!.state.doc.toString()\n      this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n    })\n\n    return this._editor\n  }\n}\n"]}

package/dist/src/ox-input-color-gradient.d.ts

@@ -2,9 +2,9 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import '@operato/i18n/ox-i18n.js';
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
-import '@polymer/paper-listbox/paper-listbox';
-import '@polymer/paper-item/paper-item';
+import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
+import '@polymer/paper-listbox/paper-listbox.js';
+import '@polymer/paper-item/paper-item.js';
 import '@operato/input/ox-input-angle.js';
 import '@operato/input/ox-input-color-stops.js';
 import { ColorStop } from './ox-input-color-stops.js';

package/dist/src/ox-input-color-gradient.js

@@ -3,9 +3,9 @@
  */
 import { __decorate } from "tslib";
 import '@operato/i18n/ox-i18n.js';
-import '@polymer/paper-dropdown-menu/paper-dropdown-menu';
-import '@polymer/paper-listbox/paper-listbox';
-import '@polymer/paper-item/paper-item';
+import '@polymer/paper-dropdown-menu/paper-dropdown-menu.js';
+import '@polymer/paper-listbox/paper-listbox.js';
+import '@polymer/paper-item/paper-item.js';
 import '@operato/input/ox-input-angle.js';
 import '@operato/input/ox-input-color-stops.js';
 import { css, html } from 'lit';

package/dist/src/ox-input-color-gradient.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-color-gradient.js","sourceRoot":"","sources":["../../src/ox-input-color-gradient.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 '@polymer/paper-dropdown-menu/paper-dropdown-menu'\nimport '@polymer/paper-listbox/paper-listbox'\nimport '@polymer/paper-item/paper-item'\nimport '@operato/input/ox-input-angle.js'\nimport '@operato/input/ox-input-color-stops.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ColorStop } from './ox-input-color-stops.js'\nimport { OxFormField } from './ox-form-field.js'\n\nexport type GradientOption = {\n  type: 'linear' | 'radial'\n  rotation: number\n  direction?:\n    | 'left-to-right'\n    | 'lefttop-to-rightbottom'\n    | 'top-to-bottom'\n    | 'righttop-to-leftbottom'\n    | 'right-to-left'\n    | 'rightbottom-to-lefttop'\n    | 'bottom-to-top'\n    | 'leftbottom-to-righttop'\n    | 'left-to-right'\n    | 'center-to-corner'\n  center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom'\n  colorStops?: ColorStop[]\n}\n\n@customElement('ox-input-color-gradient')\nexport class OxInputColorGradient extends OxFormField {\n  static styles = css`\n    :host {\n      display: grid;\n\n      grid-template-columns: repeat(10, 1fr);\n      grid-gap: 5px;\n      grid-auto-rows: minmax(24px, auto);\n\n      align-items: center;\n    }\n\n    :host > * {\n      align-self: stretch;\n    }\n\n    :host > label {\n      grid-column: span 2;\n      text-align: right;\n      text-transform: capitalize;\n      align-self: center;\n    }\n\n    :host > .icon-only-label {\n      grid-column: span 1;\n    }\n\n    :host > input,\n    :host > [editors] {\n      grid-column: span 8;\n    }\n\n    :host > select {\n      grid-column: span 4;\n      height: 100%;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n\n    :host > ox-input-angle {\n      grid-column: span 3;\n    }\n\n    ox-input-color-stops {\n      grid-column: span 10;\n    }\n\n    .host > input[type='checkbox'] {\n      grid-column: 3 / 4;\n    }\n\n    .host > input[type='checkbox'] ~ label {\n      grid-column: span 7;\n      text-align: left;\n    }\n\n    [editors] > :not([active-selector]) {\n      display: none;\n    }\n\n    [gradient-direction] {\n      overflow: hidden;\n      max-width: 210px;\n    }\n\n    [gradient-direction] paper-item {\n      background: url(/assets/images/icon-editor-gradient-direction.png) 50% 0 no-repeat;\n      min-height: 32px;\n      padding: 3px 5px;\n      width: 30px;\n      float: left;\n    }\n\n    [gradient-direction] [name='lefttop-to-rightbottom'] {\n      background-position: 50% 4px;\n    }\n\n    [gradient-direction] [name='left-top'] {\n      background-position: 50% 4px;\n    }\n\n    [gradient-direction] [name='top-to-bottom'] {\n      background-position: 50% -46px;\n    }\n\n    [gradient-direction] [name='righttop-to-leftbottom'] {\n      background-position: 50% -96px;\n    }\n\n    [gradient-direction] [name='right-top'] {\n      background-position: 50% -96px;\n    }\n\n    [gradient-direction] [name='right-to-left'] {\n      background-position: 50% -146px;\n    }\n\n    [gradient-direction] [name='rightbottom-to-lefttop'] {\n      background-position: 50% -196px;\n    }\n\n    [gradient-direction] [name='right-bottom'] {\n      background-position: 50% -196px;\n    }\n\n    [gradient-direction] [name='bottom-to-top'] {\n      background-position: 50% -246px;\n    }\n\n    [gradient-direction] [name='leftbottom-to-righttop'] {\n      background-position: 50% -296px;\n    }\n\n    [gradient-direction] [name='left-bottom'] {\n      background-position: 50% -296px;\n    }\n\n    [gradient-direction] [name='left-to-right'] {\n      background-position: 50% -346px;\n    }\n\n    [gradient-direction] [name='center-to-corner'] {\n      background-position: 50% -396px;\n    }\n\n    [gradient-direction] [name='center'] {\n      background-position: 50% -396px;\n    }\n\n    [gradient-direction] paper-item[focused] {\n      background-color: rgba(255, 246, 143, 0.5);\n    }\n\n    .icon-only-label {\n      top: 0 !important;\n      width: 30px !important;\n      height: 24px;\n      background: url(/assets/images/icon-properties-label.png) no-repeat;\n    }\n\n    .icon-only-label.color {\n      background-position: 70% -198px;\n    }\n  `\n\n  @property({ type: Object }) value: GradientOption = {\n    type: 'linear',\n    direction: 'left-to-right',\n    rotation: 0\n  }\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 & { type: string }\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    var value\n\n    switch (element.tagName) {\n      case 'INPUT':\n        switch (element.type) {\n          case 'checkbox':\n            value = (element as HTMLInputElement).checked\n            break\n          case 'number':\n            value = Number((element as HTMLInputElement).value) || 0\n            break\n          case 'text':\n            value = String((element as HTMLInputElement).value)\n        }\n        break\n\n      case 'PAPER-BUTTON':\n        value = (element as any).active\n        break\n\n      case 'PAPER-LISTBOX':\n        value = (element as any).selected\n        break\n\n      default:\n        value = (element as HTMLInputElement).value\n        break\n    }\n\n    if (key === 'rotation') {\n      this.value = {\n        ...this.value,\n        rotation: value,\n        direction: undefined\n      }\n    } else if (key === 'direction') {\n      if (value) {\n        this.value = {\n          ...this.value,\n          direction: value,\n          rotation: this._convertDirectionToRotation(value)\n        }\n      }\n    } else {\n      this.value = {\n        ...this.value,\n        [key]: value\n      }\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  render() {\n    var selector = (this.value && this.value.type) || 'linear'\n    var value = this.value || {}\n\n    return html`\n      <label> <ox-i18n msgid=\"label.type\">type</ox-i18n> </label>\n      <select value-key=\"type\" .value=${value.type || 'linear'} ?disabled=${this.disabled}>\n        <option>linear</option>\n        <option>radial</option>\n      </select>\n\n      <label class=\"icon-only-label color\"></label>\n      <ox-input-angle value-key=\"rotation\" .value=${value.rotation || 0} ?disabled=${this.disabled}> </ox-input-angle>\n\n      <label> <ox-i18n msgid=\"label.direction\">direction</ox-i18n> </label>\n      <div editors>\n        <paper-dropdown-menu no-label-float=\"true\" ?active-selector=${selector == 'linear'} .value=${value.direction}>\n          <paper-listbox\n            @selected-changed=${(e: Event) => this._onChange(e)}\n            value-key=\"direction\"\n            slot=\"dropdown-content\"\n            gradient-direction\n            .selected=${value.direction}\n            attr-for-selected=\"name\"\n          >\n            <paper-item name=\"lefttop-to-rightbottom\"></paper-item>\n            <paper-item name=\"top-to-bottom\"></paper-item>\n            <paper-item name=\"righttop-to-leftbottom\"></paper-item>\n            <paper-item name=\"right-to-left\"></paper-item>\n            <paper-item name=\"rightbottom-to-lefttop\"></paper-item>\n            <paper-item name=\"bottom-to-top\"></paper-item>\n            <paper-item name=\"leftbottom-to-righttop\"></paper-item>\n            <paper-item name=\"left-to-right\"></paper-item>\n            <paper-item name=\"center-to-corner\"></paper-item>\n          </paper-listbox>\n        </paper-dropdown-menu>\n\n        <paper-dropdown-menu no-label-float=\"true\" ?active-selector=${selector == 'radial'} .value=${value.center}>\n          <paper-listbox\n            @selected-changed=${(e: Event) => this._onChange(e)}\n            value-key=\"center\"\n            slot=\"dropdown-content\"\n            gradient-direction\n            .selected=${value.center || 'center'}\n            attr-for-selected=\"name\"\n          >\n            <paper-item name=\"center\"></paper-item>\n            <paper-item name=\"left-top\"></paper-item>\n            <paper-item name=\"right-top\"></paper-item>\n            <paper-item name=\"right-bottom\"></paper-item>\n            <paper-item name=\"left-bottom\"></paper-item>\n          </paper-listbox>\n        </paper-dropdown-menu>\n      </div>\n\n      <ox-input-color-stops\n        value-key=\"colorStops\"\n        type=\"gradient\"\n        .value=${value.colorStops}\n        ?disabled=${this.disabled}\n      >\n      </ox-input-color-stops>\n    `\n  }\n\n  _convertDirectionToRotation(direction: string): number {\n    var rotation\n    switch (direction) {\n      case 'lefttop-to-rightbottom':\n        rotation = 45\n        break\n      case 'top-to-bottom':\n        rotation = 90\n        break\n      case 'righttop-to-leftbottom':\n        rotation = 135\n        break\n      case 'right-to-left':\n        rotation = 180\n        break\n      case 'rightbottom-to-lefttop':\n        rotation = 215\n        break\n      case 'bottom-to-top':\n        rotation = 270\n        break\n      case 'leftbottom-to-righttop':\n        rotation = 315\n        break\n      case 'left-to-right':\n      default:\n        rotation = 0\n        break\n    }\n\n    return (rotation / 360) * Math.PI * 2\n  }\n}\n"]}
+{"version":3,"file":"ox-input-color-gradient.js","sourceRoot":"","sources":["../../src/ox-input-color-gradient.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 '@polymer/paper-dropdown-menu/paper-dropdown-menu.js'\nimport '@polymer/paper-listbox/paper-listbox.js'\nimport '@polymer/paper-item/paper-item.js'\nimport '@operato/input/ox-input-angle.js'\nimport '@operato/input/ox-input-color-stops.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ColorStop } from './ox-input-color-stops.js'\nimport { OxFormField } from './ox-form-field.js'\n\nexport type GradientOption = {\n  type: 'linear' | 'radial'\n  rotation: number\n  direction?:\n    | 'left-to-right'\n    | 'lefttop-to-rightbottom'\n    | 'top-to-bottom'\n    | 'righttop-to-leftbottom'\n    | 'right-to-left'\n    | 'rightbottom-to-lefttop'\n    | 'bottom-to-top'\n    | 'leftbottom-to-righttop'\n    | 'left-to-right'\n    | 'center-to-corner'\n  center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom'\n  colorStops?: ColorStop[]\n}\n\n@customElement('ox-input-color-gradient')\nexport class OxInputColorGradient extends OxFormField {\n  static styles = css`\n    :host {\n      display: grid;\n\n      grid-template-columns: repeat(10, 1fr);\n      grid-gap: 5px;\n      grid-auto-rows: minmax(24px, auto);\n\n      align-items: center;\n    }\n\n    :host > * {\n      align-self: stretch;\n    }\n\n    :host > label {\n      grid-column: span 2;\n      text-align: right;\n      text-transform: capitalize;\n      align-self: center;\n    }\n\n    :host > .icon-only-label {\n      grid-column: span 1;\n    }\n\n    :host > input,\n    :host > [editors] {\n      grid-column: span 8;\n    }\n\n    :host > select {\n      grid-column: span 4;\n      height: 100%;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n\n    :host > ox-input-angle {\n      grid-column: span 3;\n    }\n\n    ox-input-color-stops {\n      grid-column: span 10;\n    }\n\n    .host > input[type='checkbox'] {\n      grid-column: 3 / 4;\n    }\n\n    .host > input[type='checkbox'] ~ label {\n      grid-column: span 7;\n      text-align: left;\n    }\n\n    [editors] > :not([active-selector]) {\n      display: none;\n    }\n\n    [gradient-direction] {\n      overflow: hidden;\n      max-width: 210px;\n    }\n\n    [gradient-direction] paper-item {\n      background: url(/assets/images/icon-editor-gradient-direction.png) 50% 0 no-repeat;\n      min-height: 32px;\n      padding: 3px 5px;\n      width: 30px;\n      float: left;\n    }\n\n    [gradient-direction] [name='lefttop-to-rightbottom'] {\n      background-position: 50% 4px;\n    }\n\n    [gradient-direction] [name='left-top'] {\n      background-position: 50% 4px;\n    }\n\n    [gradient-direction] [name='top-to-bottom'] {\n      background-position: 50% -46px;\n    }\n\n    [gradient-direction] [name='righttop-to-leftbottom'] {\n      background-position: 50% -96px;\n    }\n\n    [gradient-direction] [name='right-top'] {\n      background-position: 50% -96px;\n    }\n\n    [gradient-direction] [name='right-to-left'] {\n      background-position: 50% -146px;\n    }\n\n    [gradient-direction] [name='rightbottom-to-lefttop'] {\n      background-position: 50% -196px;\n    }\n\n    [gradient-direction] [name='right-bottom'] {\n      background-position: 50% -196px;\n    }\n\n    [gradient-direction] [name='bottom-to-top'] {\n      background-position: 50% -246px;\n    }\n\n    [gradient-direction] [name='leftbottom-to-righttop'] {\n      background-position: 50% -296px;\n    }\n\n    [gradient-direction] [name='left-bottom'] {\n      background-position: 50% -296px;\n    }\n\n    [gradient-direction] [name='left-to-right'] {\n      background-position: 50% -346px;\n    }\n\n    [gradient-direction] [name='center-to-corner'] {\n      background-position: 50% -396px;\n    }\n\n    [gradient-direction] [name='center'] {\n      background-position: 50% -396px;\n    }\n\n    [gradient-direction] paper-item[focused] {\n      background-color: rgba(255, 246, 143, 0.5);\n    }\n\n    .icon-only-label {\n      top: 0 !important;\n      width: 30px !important;\n      height: 24px;\n      background: url(/assets/images/icon-properties-label.png) no-repeat;\n    }\n\n    .icon-only-label.color {\n      background-position: 70% -198px;\n    }\n  `\n\n  @property({ type: Object }) value: GradientOption = {\n    type: 'linear',\n    direction: 'left-to-right',\n    rotation: 0\n  }\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 & { type: string }\n    var key = element.getAttribute('value-key')\n\n    if (!key) {\n      return\n    }\n\n    var value\n\n    switch (element.tagName) {\n      case 'INPUT':\n        switch (element.type) {\n          case 'checkbox':\n            value = (element as HTMLInputElement).checked\n            break\n          case 'number':\n            value = Number((element as HTMLInputElement).value) || 0\n            break\n          case 'text':\n            value = String((element as HTMLInputElement).value)\n        }\n        break\n\n      case 'PAPER-BUTTON':\n        value = (element as any).active\n        break\n\n      case 'PAPER-LISTBOX':\n        value = (element as any).selected\n        break\n\n      default:\n        value = (element as HTMLInputElement).value\n        break\n    }\n\n    if (key === 'rotation') {\n      this.value = {\n        ...this.value,\n        rotation: value,\n        direction: undefined\n      }\n    } else if (key === 'direction') {\n      if (value) {\n        this.value = {\n          ...this.value,\n          direction: value,\n          rotation: this._convertDirectionToRotation(value)\n        }\n      }\n    } else {\n      this.value = {\n        ...this.value,\n        [key]: value\n      }\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  render() {\n    var selector = (this.value && this.value.type) || 'linear'\n    var value = this.value || {}\n\n    return html`\n      <label> <ox-i18n msgid=\"label.type\">type</ox-i18n> </label>\n      <select value-key=\"type\" .value=${value.type || 'linear'} ?disabled=${this.disabled}>\n        <option>linear</option>\n        <option>radial</option>\n      </select>\n\n      <label class=\"icon-only-label color\"></label>\n      <ox-input-angle value-key=\"rotation\" .value=${value.rotation || 0} ?disabled=${this.disabled}> </ox-input-angle>\n\n      <label> <ox-i18n msgid=\"label.direction\">direction</ox-i18n> </label>\n      <div editors>\n        <paper-dropdown-menu no-label-float=\"true\" ?active-selector=${selector == 'linear'} .value=${value.direction}>\n          <paper-listbox\n            @selected-changed=${(e: Event) => this._onChange(e)}\n            value-key=\"direction\"\n            slot=\"dropdown-content\"\n            gradient-direction\n            .selected=${value.direction}\n            attr-for-selected=\"name\"\n          >\n            <paper-item name=\"lefttop-to-rightbottom\"></paper-item>\n            <paper-item name=\"top-to-bottom\"></paper-item>\n            <paper-item name=\"righttop-to-leftbottom\"></paper-item>\n            <paper-item name=\"right-to-left\"></paper-item>\n            <paper-item name=\"rightbottom-to-lefttop\"></paper-item>\n            <paper-item name=\"bottom-to-top\"></paper-item>\n            <paper-item name=\"leftbottom-to-righttop\"></paper-item>\n            <paper-item name=\"left-to-right\"></paper-item>\n            <paper-item name=\"center-to-corner\"></paper-item>\n          </paper-listbox>\n        </paper-dropdown-menu>\n\n        <paper-dropdown-menu no-label-float=\"true\" ?active-selector=${selector == 'radial'} .value=${value.center}>\n          <paper-listbox\n            @selected-changed=${(e: Event) => this._onChange(e)}\n            value-key=\"center\"\n            slot=\"dropdown-content\"\n            gradient-direction\n            .selected=${value.center || 'center'}\n            attr-for-selected=\"name\"\n          >\n            <paper-item name=\"center\"></paper-item>\n            <paper-item name=\"left-top\"></paper-item>\n            <paper-item name=\"right-top\"></paper-item>\n            <paper-item name=\"right-bottom\"></paper-item>\n            <paper-item name=\"left-bottom\"></paper-item>\n          </paper-listbox>\n        </paper-dropdown-menu>\n      </div>\n\n      <ox-input-color-stops\n        value-key=\"colorStops\"\n        type=\"gradient\"\n        .value=${value.colorStops}\n        ?disabled=${this.disabled}\n      >\n      </ox-input-color-stops>\n    `\n  }\n\n  _convertDirectionToRotation(direction: string): number {\n    var rotation\n    switch (direction) {\n      case 'lefttop-to-rightbottom':\n        rotation = 45\n        break\n      case 'top-to-bottom':\n        rotation = 90\n        break\n      case 'righttop-to-leftbottom':\n        rotation = 135\n        break\n      case 'right-to-left':\n        rotation = 180\n        break\n      case 'rightbottom-to-lefttop':\n        rotation = 215\n        break\n      case 'bottom-to-top':\n        rotation = 270\n        break\n      case 'leftbottom-to-righttop':\n        rotation = 315\n        break\n      case 'left-to-right':\n      default:\n        rotation = 0\n        break\n    }\n\n    return (rotation / 360) * Math.PI * 2\n  }\n}\n"]}

package/dist/src/ox-input-color-stops.d.ts

@@ -1,50 +1,53 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import './ox-input-color';
+import './ox-input-color.js';
 import { PropertyValues } from 'lit';
-import { OxFormField } from './ox-form-field';
-import { OxInputColor } from './ox-input-color';
+import { OxFormField } from './ox-form-field.js';
+import { OxInputColor } from './ox-input-color.js';
 export type ColorStop = {
     color: string;
     position: number;
 };
 /**
-범위내에서 여러 컬러셋(포지션과 색깔) 배열을 편집하는 컴포넌트이다.
-
-미리보기 Bar에서는 gradient나, solid 형태의 컬러셋을 보여준다.
-
-새로운 컬러셋을 추가고자 할 때는 미리보기 Bar를 더블클릭한다.
-컬러셋을 제거하고자 할 때는 컬러셋 마커를 아래방향으로 드래깅한다.
-컬러셋의 위치를 옮기고자 할 때는, 컬러셋 마커를 좌우로 드래깅하여 이동시키거나,
-옮기고자하는 컬러셋 마커를 마우스로 선택하고, 포지션 입력 에디터에서 직접 수정한다.
-컬러셋의 색상을 바꾸고자 할 때는, 컬러셋 마커를 더블클릭하여 컬러파레트를 팝업시켜서 색상을 선택하거나, 색상 입력 에디터에서 직접 색상을 수정할 수 있다.
-
-Example:
-
-    <ox-input-color-stops type="gradient" .value=${gradient.colorStops}>
-    </ox-input-color-stops>
-*/
+ * This component allows editing an array of color sets (position and color) within a range.
+ *
+ * The preview bar shows the color sets in gradient or solid form.
+ *
+ * To add a new color set, double-click the preview bar.
+ * To remove a color set, drag the color set marker downward.
+ * To move the position of a color set, drag the color set marker left or right, or select the color set marker with the mouse and directly edit the position in the position input editor.
+ * To change the color of a color set, double-click the color set marker to pop up the color palette and select a color, or directly edit the color in the color input editor.
+ *
+ * Example:
+ *
+ *    <ox-input-color-stops type="gradient" .value=${gradient.colorStops}>
+ *    </ox-input-color-stops>
+ */
 export declare class OxInputColorStops extends OxFormField {
     static styles: import("lit").CSSResult;
     /**
-     * `type`은 color-stop bar의 표시 방법을 의미한다.
-     * - 'solid' : 컬러스톱위치에서 다음 컬러스톱까지 solid color로 채운다.
-     * - 'gradient' : 컬러스톱위치에서 다음 컬러스톱까지 gradient color로 채운다.
+     * `type` indicates how the color-stop bar is displayed.
+     * - 'solid': Fills with solid color from one color stop to the next.
+     * - 'gradient': Fills with gradient color from one color stop to the next.
      */
     type: 'solid' | 'gradient';
     /**
-     * `min`은 color-stop bar의 위치값 범위의 최소값을 의미한다.
+     * `min` indicates the minimum value of the color-stop bar's position range.
      */
     min: number;
     /**
-     * `max`은 color-stop bar의 위치값 범위의 최대값을 의미한다.
+     * `max` indicates the maximum value of the color-stop bar's position range.
      */
     max: number;
     /**
-     * `value`은 color-stops에 의해 만들어진 color-stop 배열을 유지한다.
+     * `value` maintains the array of color stops created by the color-stops.
      */
     value?: ColorStop[];
+    /**
+     * Represents the focused state of the input component.
+     * This property can be of any type.
+     */
     focused: any;
     colorbar: HTMLElement;
     colorEditor: OxInputColor;