@operato/input 1.11.12 → 1.11.17

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [1.11.17](https://github.com/hatiolab/operato/compare/v1.11.16...v1.11.17) (2023-12-24)
+
+
+### :bug: Bug Fix
+
+* support disabled attribute for input and property-editor ([a449403](https://github.com/hatiolab/operato/commit/a449403d3299fc98fb90f153bfeff1114eb7b29f))
+
+
+
+### [1.11.13](https://github.com/hatiolab/operato/compare/v1.11.12...v1.11.13) (2023-12-20)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
 ### [1.11.12](https://github.com/hatiolab/operato/compare/v1.11.11...v1.11.12) (2023-12-20)
 
 

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

@@ -5,7 +5,6 @@ import { OxFormField } from './ox-form-field';
 export declare class OxCheckbox extends OxFormField {
     static styles: import("lit").CSSResult[];
     checked: boolean | undefined;
-    disabled: boolean;
     indeterminatable: boolean;
     indeterminate: boolean;
     _hasInner: boolean;

package/dist/src/ox-checkbox.js

@@ -12,7 +12,6 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
     constructor() {
         super(...arguments);
         this.checked = false;
-        this.disabled = false;
         this.indeterminatable = false;
         this.indeterminate = false;
         this._hasInner = !!this.innerHTML.trim().length;
@@ -159,9 +158,6 @@ let OxCheckbox = class OxCheckbox extends OxFormField {
 __decorate([
     property({ type: Boolean, attribute: 'checked', reflect: true })
 ], OxCheckbox.prototype, "checked", void 0);
-__decorate([
-    property({ type: Boolean })
-], OxCheckbox.prototype, "disabled", void 0);
 __decorate([
     property({ type: Boolean, attribute: 'indeterminatable' })
 ], OxCheckbox.prototype, "indeterminatable", void 0);

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      :host {\n        display: flex;\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 | undefined = false\n  @property({ type: Boolean }) disabled: boolean = false\n  @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false\n  @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false\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.indeterminate ? this.indeterminateIcon : 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    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=\"rgba(0, 0, 0, 0.7)\" 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'\n\n@customElement('ox-checkbox')\nexport class OxCheckbox extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\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 | undefined = false\n  @property({ type: Boolean, attribute: 'indeterminatable' }) indeterminatable: boolean = false\n  @property({ type: Boolean, attribute: 'indeterminate', reflect: true }) indeterminate: boolean = false\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.indeterminate ? this.indeterminateIcon : 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    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=\"rgba(0, 0, 0, 0.7)\" 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-form-field.d.ts

@@ -4,6 +4,7 @@
 import { LitElement } from 'lit';
 export declare abstract class OxFormField extends LitElement {
     name?: string;
+    disabled?: boolean;
     value?: any;
     protected _form: HTMLFormElement | null;
     protected _formdataEventHandler: EventListener | null;

package/dist/src/ox-form-field.js

@@ -43,6 +43,9 @@ export class OxFormField extends LitElement {
 __decorate([
     property({ type: String, attribute: true })
 ], OxFormField.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], OxFormField.prototype, "disabled", void 0);
 __decorate([
     property()
 ], OxFormField.prototype, "value", void 0);

package/dist/src/ox-form-field.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-form-field.js","sourceRoot":"","sources":["../../src/ox-form-field.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;QAIY,UAAK,GAA2B,IAAI,CAAA;QACpC,0BAAqB,GAAyB,IAAI,CAAA;IAuC9D,CAAC;IArCU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;YACjC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,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;YACrE,CAAC;QACH,CAAC;IACH,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,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;QACnC,CAAC;IACH,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAM;QAEtB,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAA;QACvB,IAAI,CAAC,CAAC,MAAM,YAAY,KAAK,CAAC,EAAE,CAAC;YAC/B,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACvB,CAAC;QAED,MAAM,CAAC,OAAO,CAAC,CAAC,KAAU,EAAE,EAAE;YAC5B,QAAQ,CAAC,MAAM,CACb,IAAI,CAAC,IAAK,EACV,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CACvG,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AA3C8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;yCAAc;AAC9C;IAAX,QAAQ,EAAE;0CAAY","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nexport abstract class OxFormField extends LitElement {\n  @property({ type: String, attribute: true }) name?: string\n  @property() value?: any\n\n  protected _form: HTMLFormElement | null = null\n  protected _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    if (!this.name) return\n\n    var values = this.value\n    if (!(values instanceof Array)) {\n      values = [this.value]\n    }\n\n    values.forEach((value: any) => {\n      formData.append(\n        this.name!,\n        typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n      )\n    })\n  }\n}\n"]}
+{"version":3,"file":"ox-form-field.js","sourceRoot":"","sources":["../../src/ox-form-field.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAChC,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE5C,MAAM,OAAgB,WAAY,SAAQ,UAAU;IAApD;;QAKY,UAAK,GAA2B,IAAI,CAAA;QACpC,0BAAqB,GAAyB,IAAI,CAAA;IAuC9D,CAAC;IArCU,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;YACjC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;gBACf,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;YACrE,CAAC;QACH,CAAC;IACH,CAAC;IAEQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,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;QACnC,CAAC;IACH,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAM;QAEtB,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAA;QACvB,IAAI,CAAC,CAAC,MAAM,YAAY,KAAK,CAAC,EAAE,CAAC;YAC/B,MAAM,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACvB,CAAC;QAED,MAAM,CAAC,OAAO,CAAC,CAAC,KAAU,EAAE,EAAE;YAC5B,QAAQ,CAAC,MAAM,CACb,IAAI,CAAC,IAAK,EACV,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CACvG,CAAA;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;CACF;AA5C8C;IAA5C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;yCAAc;AAC7B;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAmB;AACnC;IAAX,QAAQ,EAAE;0CAAY","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { LitElement } from 'lit'\nimport { property } from 'lit/decorators.js'\n\nexport abstract class OxFormField extends LitElement {\n  @property({ type: String, attribute: true }) name?: string\n  @property({ type: Boolean }) disabled?: boolean\n  @property() value?: any\n\n  protected _form: HTMLFormElement | null = null\n  protected _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    if (!this.name) return\n\n    var values = this.value\n    if (!(values instanceof Array)) {\n      values = [this.value]\n    }\n\n    values.forEach((value: any) => {\n      formData.append(\n        this.name!,\n        typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n      )\n    })\n  }\n}\n"]}

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

@@ -45,9 +45,9 @@ let OxInput3Axis = class OxInput3Axis extends OxFormField {
     render() {
         const { x, y, z } = this.value;
         return html `
-      <input type="number" id="x" placeholder="X" .value=${String(x)} />
-      <input type="number" id="y" placeholder="Y" .value=${String(y)} />
-      <input type="number" id="z" placeholder="Z" .value=${String(z)} />
+      <input type="number" id="x" placeholder="X" .value=${String(x)} ?disabled=${this.disabled} />
+      <input type="number" id="y" placeholder="Y" .value=${String(y)} ?disabled=${this.disabled} />
+      <input type="number" id="z" placeholder="Z" .value=${String(z)} ?disabled=${this.disabled} />
     `;
     }
 };

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;;;;;;;;;;;;;KAaF;KACF,AAfY,CAeZ;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;2DACT,MAAM,CAAC,CAAC,CAAC;2DACT,MAAM,CAAC,CAAC,CAAC;KAC/D,CAAA;IACH,CAAC;;AAnDU,YAAY;IAFxB,SAAS,EAAE;IACX,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAoDxB","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:not(:last-child) {\n        margin-right: var(--margin-default, 2px);\n      }\n\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--primary-color);\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)} />\n      <input type=\"number\" id=\"y\" placeholder=\"Y\" .value=${String(y)} />\n      <input type=\"number\" id=\"z\" placeholder=\"Z\" .value=${String(z)} />\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,iBAAiB,CAAA;AAItC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;aACpC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;KAaF;KACF,AAfY,CAeZ;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;;AAnDU,YAAY;IAFxB,SAAS,EAAE;IACX,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAoDxB","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:not(:last-child) {\n        margin-right: var(--margin-default, 2px);\n      }\n\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--primary-color);\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.js

@@ -146,24 +146,24 @@ let OxInput3Dish = class OxInput3Dish extends OxFormField {
       <span>${msg('z-axes')}</span>
 
       <label>${msg('dimension')}</label>
-      <input type="number" id="dwidth" .value=${String(this.dimension?.width)} />
-      <input type="number" id="dheight" .value=${String(this.dimension?.height)} />
-      <input type="number" id="ddepth" .value=${String(this.dimension?.depth)} />
+      <input type="number" id="dwidth" .value=${String(this.dimension?.width)} ?disabled=${this.disabled} />
+      <input type="number" id="dheight" .value=${String(this.dimension?.height)} ?disabled=${this.disabled} />
+      <input type="number" id="ddepth" .value=${String(this.dimension?.depth)} ?disabled=${this.disabled} />
 
       <label>${msg('position')}</label>
-      <input type="number" id="tx" .value=${String(this.position?.x)} />
-      <input type="number" id="ty" .value=${String(this.position?.y)} />
-      <input type="number" id="tz" .value=${String(this.position?.z)} />
+      <input type="number" id="tx" .value=${String(this.position?.x)} ?disabled=${this.disabled} />
+      <input type="number" id="ty" .value=${String(this.position?.y)} ?disabled=${this.disabled} />
+      <input type="number" id="tz" .value=${String(this.position?.z)} ?disabled=${this.disabled} />
 
       <label>${msg('scale')}</label>
-      <input type="number" id="sx" .value=${String(this.scale?.x)} />
-      <input type="number" id="sy" .value=${String(this.scale?.y)} />
-      <input type="number" id="sz" .value=${String(this.scale?.z)} />
+      <input type="number" id="sx" .value=${String(this.scale?.x)} ?disabled=${this.disabled} />
+      <input type="number" id="sy" .value=${String(this.scale?.y)} ?disabled=${this.disabled} />
+      <input type="number" id="sz" .value=${String(this.scale?.z)} ?disabled=${this.disabled} />
 
       <label>${msg('rotate')}</label>
-      <ox-input-angle id="rx" .value=${String(this.rotate?.x)}></ox-input-angle>
-      <ox-input-angle id="ry" .value=${String(this.rotate?.y)}></ox-input-angle>
-      <ox-input-angle id="rz" .value=${String(this.rotate?.z)}></ox-input-angle>
+      <ox-input-angle id="rx" .value=${String(this.rotate?.x)} ?disabled=${this.disabled}></ox-input-angle>
+      <ox-input-angle id="ry" .value=${String(this.rotate?.y)} ?disabled=${this.disabled}></ox-input-angle>
+      <ox-input-angle id="rz" .value=${String(this.rotate?.z)} ?disabled=${this.disabled}></ox-input-angle>
     `;
     }
 };

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(--margin-default);\n      }\n\n      label {\n        text-align: right;\n        align-self: center;\n        font: var(--label-font);\n        color: var(--label-color);\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: var(--label-font);\n        color: var(--legend-color);\n      }\n\n      input,\n      ox-input-angle {\n        grid-column: span 2;\n        border: 0;\n        border-bottom: var(--border-dark-color);\n        padding: var(--input-padding);\n        font: var(--input-font);\n        color: var(--primary-text-color);\n      }\n\n      ox-input-angle {\n        --input-border: 0;\n      }\n\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--primary-color);\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)} />\n      <input type=\"number\" id=\"dheight\" .value=${String(this.dimension?.height)} />\n      <input type=\"number\" id=\"ddepth\" .value=${String(this.dimension?.depth)} />\n\n      <label>${msg('position')}</label>\n      <input type=\"number\" id=\"tx\" .value=${String(this.position?.x)} />\n      <input type=\"number\" id=\"ty\" .value=${String(this.position?.y)} />\n      <input type=\"number\" id=\"tz\" .value=${String(this.position?.z)} />\n\n      <label>${msg('scale')}</label>\n      <input type=\"number\" id=\"sx\" .value=${String(this.scale?.x)} />\n      <input type=\"number\" id=\"sy\" .value=${String(this.scale?.y)} />\n      <input type=\"number\" id=\"sz\" .value=${String(this.scale?.z)} />\n\n      <label>${msg('rotate')}</label>\n      <ox-input-angle id=\"rx\" .value=${String(this.rotate?.x)}></ox-input-angle>\n      <ox-input-angle id=\"ry\" .value=${String(this.rotate?.y)}></ox-input-angle>\n      <ox-input-angle id=\"rz\" .value=${String(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 './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(--margin-default);\n      }\n\n      label {\n        text-align: right;\n        align-self: center;\n        font: var(--label-font);\n        color: var(--label-color);\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: var(--label-font);\n        color: var(--legend-color);\n      }\n\n      input,\n      ox-input-angle {\n        grid-column: span 2;\n        border: 0;\n        border-bottom: var(--border-dark-color);\n        padding: var(--input-padding);\n        font: var(--input-font);\n        color: var(--primary-text-color);\n      }\n\n      ox-input-angle {\n        --input-border: 0;\n      }\n\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--primary-color);\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.js

@@ -31,6 +31,7 @@ let OxInputAngle = class OxInputAngle extends OxFormField {
         .value=${String(this._toDegree(this.value))}
         .placeholder=${this.placeholder || '0°'}
         @change=${(e) => this._onChangeValue(e)}
+        ?disabled=${this.disabled}
       />
     `;
     }

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;;;;;;;;;;;;;;;KAeF;KACF,AAjBY,CAiBZ;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;;KAEjD,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;;AAjC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAqB;AAEhC;IAAf,KAAK,CAAC,OAAO,CAAC;2CAAyB;AAtB7B,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAsDxB","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        box-sizing: border-box;\n        border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));\n      }\n\n      input:focus {\n        outline: var(--input-focus-outline, inherit);\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      />\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,iBAAiB,CAAA;AAGtC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;aACpC,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;KAeF;KACF,AAjBY,CAiBZ;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;AAtB7B,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAuDxB","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        box-sizing: border-box;\n        border: var(--input-border, 1px solid rgba(0, 0, 0, 0.2));\n      }\n\n      input:focus {\n        outline: var(--input-focus-outline, inherit);\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-barcode.js

@@ -109,6 +109,7 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
         .value=${this.value || ''}
         @change=${(e) => this.onInputChange(e)}
         @keydown=${(e) => this.onInputKeyDown(e)}
+        ?disabled=${this.disabled}
       />
       <button
         ?hidden=${!this.scannable}
@@ -116,6 +117,7 @@ let OxInputBarcode = class OxInputBarcode extends OxFormField {
         @click=${(e) => {
             this.scan(e);
         }}
+        ?disabled=${this.disabled}
       ></button>
 
       <ox-popup

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-barcode.js","sourceRoot":"","sources":["../../src/ox-input-barcode.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/popup/ox-popup.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\nimport { BrowserMultiFormatReader } from '@zxing/library'\n\nimport { OxFormField } from './ox-form-field.js'\n\nconst barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`\n\n@customElement('ox-input-barcode')\nexport class OxInputBarcode extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n        border: none;\n      }\n\n      * {\n        align-self: stretch;\n      }\n\n      *:focus {\n        outline: none;\n      }\n\n      input {\n        flex: 1;\n        width: 10px; /* intentionally width set */\n        border: 0;\n        border-bottom: var(--border-dark-color);\n        padding: var(--input-padding);\n        padding-right: 35px;\n        font: var(--input-font);\n        color: var(--primary-text-color);\n      }\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--primary-color);\n      }\n\n      #scan-button {\n        display: block;\n        position: relative;\n        margin-left: -30px;\n        width: 30px;\n        border: none;\n        background: var(--barcodescan-input-button-icon) no-repeat center center;\n      }\n\n      #scan-button[hidden] {\n        display: none;\n      }\n\n      ox-popup {\n        position: fixed;\n\n        width: 80vw;\n        height: 80vh;\n        transform: translate(10%, 10%);\n      }\n\n      video {\n        width: 100%;\n        height: 100%;\n      }\n\n      @media screen and (max-width: 460px) {\n        ox-popup {\n          position: fixed;\n          left: 0;\n          top: 0;\n          width: 100vw;\n          height: 100vh;\n          height: 100dvh;\n          transform: translate(0%, 0%);\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) scannable?: boolean\n  @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean\n  @property({ type: String }) declare value?: string\n  @property({ attribute: 'english-only', type: Boolean }) englishOnly?: boolean\n  @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean\n\n  @state() stream?: MediaStream\n  @state() reader?: BrowserMultiFormatReader\n\n  @query('input') input!: HTMLInputElement\n  @query('ox-popup') popup!: OxPopup\n  @query('video') video!: HTMLVideoElement\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.scannable = false\n\n    if (navigator.mediaDevices) {\n      ;(async () => {\n        try {\n          var stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })\n          if (stream) {\n            stream.getTracks().forEach(track => track.stop())\n            this.scannable = true\n          }\n        } catch (e) {\n          console.warn('this device not support camera for barcode scan', e)\n        }\n      })()\n    }\n  }\n\n  disconnectedCallback() {\n    this.stopScan()\n  }\n\n  render() {\n    this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`)\n\n    return html`\n      <input\n        type=\"text\"\n        .value=${this.value || ''}\n        @change=${(e: Event) => this.onInputChange(e)}\n        @keydown=${(e: KeyboardEvent) => this.onInputKeyDown(e)}\n      />\n      <button\n        ?hidden=${!this.scannable}\n        id=\"scan-button\"\n        @click=${(e: MouseEvent) => {\n          this.scan(e)\n        }}\n      ></button>\n\n      <ox-popup\n        @focusout=${() => {\n          this.stopScan()\n        }}\n      >\n        <video></video>\n      </ox-popup>\n    `\n  }\n\n  onInputChange(e: Event) {\n    e.stopPropagation()\n\n    if (this.englishOnly) {\n      /* englishOnly 인 경우에는 멀티바이트 문자들을 모두 제거한다. */\n      this.value = this.input.value = this.input.value?.replace(/[^\\x00-\\x7F]/g, '')\n    } else {\n      this.value = this.input.value\n    }\n\n    if (this.selectAfterChange) {\n      requestAnimationFrame(() => {\n        this.input.select()\n      })\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value\n      })\n    )\n  }\n\n  onInputKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' && !e.isComposing) {\n      /* Even if the value has not changed, the enter key triggers a change event. */\n      e.preventDefault() /* Prevent change event from occurring twice. */\n\n      this.input.dispatchEvent(new CustomEvent('change'))\n    } else if (this.englishOnly && !e.metaKey && !e.ctrlKey && !e.altKey && /^Key/.test(e.code)) {\n      e.stopPropagation()\n      e.preventDefault()\n\n      /* englishOnly 인 경우에 문자들은 여기에서 처리한다. 멀티바이트 문자들이 대부분 알파벳의 자모음을 조합하므로, ... */\n      const key = e.shiftKey ? e.code.charAt(3) : e.code.charAt(3).toLowerCase()\n      const value = this.input.value\n\n      const start = this.input.selectionStart || 0\n      const end = this.input.selectionEnd || start\n\n      this.input.value = [value.substring(0, start), key, value.substring(end)].join('')\n      this.input.setSelectionRange(start + 1, start + 1)\n    }\n  }\n\n  async scan(e: MouseEvent) {\n    try {\n      this.popup.open({})\n\n      /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */\n      await this.updateComplete\n\n      var constraints = { video: { facingMode: 'environment' } } /* backside camera first */\n      this.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\n      this.reader = new BrowserMultiFormatReader()\n      if (getComputedStyle(this.popup).display !== 'none' /* popup not hidden */ && this.stream) {\n        var result = await this.reader.decodeOnceFromStream(this.stream, this.video)\n        var input = this.input\n        input.focus()\n        this.value = input.value = String(result)\n\n        if (!this.withoutEnter) {\n          input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))\n        }\n      } else {\n        /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */\n        this.stopScan()\n      }\n    } catch (err) {\n      /*\n       * 1. stream device 문제로 예외 발생한 경우.\n       * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.\n       */\n      console.warn(err)\n    } finally {\n      this.popup.close()\n\n      this.stopScan()\n    }\n  }\n\n  stopScan() {\n    this.video?.pause()\n\n    this.stream?.getTracks().forEach(track => track.stop())\n    this.reader?.reset()\n\n    delete this.stream\n    delete this.reader\n  }\n}\n"]}
+{"version":3,"file":"ox-input-barcode.js","sourceRoot":"","sources":["../../src/ox-input-barcode.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@operato/popup/ox-popup.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\nimport { BrowserMultiFormatReader } from '@zxing/library'\n\nimport { OxFormField } from './ox-form-field.js'\n\nconst barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`\n\n@customElement('ox-input-barcode')\nexport class OxInputBarcode extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n        border: none;\n      }\n\n      * {\n        align-self: stretch;\n      }\n\n      *:focus {\n        outline: none;\n      }\n\n      input {\n        flex: 1;\n        width: 10px; /* intentionally width set */\n        border: 0;\n        border-bottom: var(--border-dark-color);\n        padding: var(--input-padding);\n        padding-right: 35px;\n        font: var(--input-font);\n        color: var(--primary-text-color);\n      }\n      input:focus {\n        outline: none;\n        border-bottom: 1px solid var(--primary-color);\n      }\n\n      #scan-button {\n        display: block;\n        position: relative;\n        margin-left: -30px;\n        width: 30px;\n        border: none;\n        background: var(--barcodescan-input-button-icon) no-repeat center center;\n      }\n\n      #scan-button[hidden] {\n        display: none;\n      }\n\n      ox-popup {\n        position: fixed;\n\n        width: 80vw;\n        height: 80vh;\n        transform: translate(10%, 10%);\n      }\n\n      video {\n        width: 100%;\n        height: 100%;\n      }\n\n      @media screen and (max-width: 460px) {\n        ox-popup {\n          position: fixed;\n          left: 0;\n          top: 0;\n          width: 100vw;\n          height: 100vh;\n          height: 100dvh;\n          transform: translate(0%, 0%);\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) scannable?: boolean\n  @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean\n  @property({ type: String }) declare value?: string\n  @property({ attribute: 'english-only', type: Boolean }) englishOnly?: boolean\n  @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean\n\n  @state() stream?: MediaStream\n  @state() reader?: BrowserMultiFormatReader\n\n  @query('input') input!: HTMLInputElement\n  @query('ox-popup') popup!: OxPopup\n  @query('video') video!: HTMLVideoElement\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.scannable = false\n\n    if (navigator.mediaDevices) {\n      ;(async () => {\n        try {\n          var stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })\n          if (stream) {\n            stream.getTracks().forEach(track => track.stop())\n            this.scannable = true\n          }\n        } catch (e) {\n          console.warn('this device not support camera for barcode scan', e)\n        }\n      })()\n    }\n  }\n\n  disconnectedCallback() {\n    this.stopScan()\n  }\n\n  render() {\n    this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`)\n\n    return html`\n      <input\n        type=\"text\"\n        .value=${this.value || ''}\n        @change=${(e: Event) => this.onInputChange(e)}\n        @keydown=${(e: KeyboardEvent) => this.onInputKeyDown(e)}\n        ?disabled=${this.disabled}\n      />\n      <button\n        ?hidden=${!this.scannable}\n        id=\"scan-button\"\n        @click=${(e: MouseEvent) => {\n          this.scan(e)\n        }}\n        ?disabled=${this.disabled}\n      ></button>\n\n      <ox-popup\n        @focusout=${() => {\n          this.stopScan()\n        }}\n      >\n        <video></video>\n      </ox-popup>\n    `\n  }\n\n  onInputChange(e: Event) {\n    e.stopPropagation()\n\n    if (this.englishOnly) {\n      /* englishOnly 인 경우에는 멀티바이트 문자들을 모두 제거한다. */\n      this.value = this.input.value = this.input.value?.replace(/[^\\x00-\\x7F]/g, '')\n    } else {\n      this.value = this.input.value\n    }\n\n    if (this.selectAfterChange) {\n      requestAnimationFrame(() => {\n        this.input.select()\n      })\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value\n      })\n    )\n  }\n\n  onInputKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' && !e.isComposing) {\n      /* Even if the value has not changed, the enter key triggers a change event. */\n      e.preventDefault() /* Prevent change event from occurring twice. */\n\n      this.input.dispatchEvent(new CustomEvent('change'))\n    } else if (this.englishOnly && !e.metaKey && !e.ctrlKey && !e.altKey && /^Key/.test(e.code)) {\n      e.stopPropagation()\n      e.preventDefault()\n\n      /* englishOnly 인 경우에 문자들은 여기에서 처리한다. 멀티바이트 문자들이 대부분 알파벳의 자모음을 조합하므로, ... */\n      const key = e.shiftKey ? e.code.charAt(3) : e.code.charAt(3).toLowerCase()\n      const value = this.input.value\n\n      const start = this.input.selectionStart || 0\n      const end = this.input.selectionEnd || start\n\n      this.input.value = [value.substring(0, start), key, value.substring(end)].join('')\n      this.input.setSelectionRange(start + 1, start + 1)\n    }\n  }\n\n  async scan(e: MouseEvent) {\n    try {\n      this.popup.open({})\n\n      /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */\n      await this.updateComplete\n\n      var constraints = { video: { facingMode: 'environment' } } /* backside camera first */\n      this.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\n      this.reader = new BrowserMultiFormatReader()\n      if (getComputedStyle(this.popup).display !== 'none' /* popup not hidden */ && this.stream) {\n        var result = await this.reader.decodeOnceFromStream(this.stream, this.video)\n        var input = this.input\n        input.focus()\n        this.value = input.value = String(result)\n\n        if (!this.withoutEnter) {\n          input.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter' }))\n        }\n      } else {\n        /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */\n        this.stopScan()\n      }\n    } catch (err) {\n      /*\n       * 1. stream device 문제로 예외 발생한 경우.\n       * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.\n       */\n      console.warn(err)\n    } finally {\n      this.popup.close()\n\n      this.stopScan()\n    }\n  }\n\n  stopScan() {\n    this.video?.pause()\n\n    this.stream?.getTracks().forEach(track => track.stop())\n    this.reader?.reset()\n\n    delete this.stream\n    delete this.reader\n  }\n}\n"]}

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

@@ -224,13 +224,13 @@ let OxInputColorGradient = class OxInputColorGradient extends OxFormField {
         var value = this.value || {};
         return html `
       <label> <ox-i18n msgid="label.type">type</ox-i18n> </label>
-      <select value-key="type" .value=${value.type || 'linear'}>
+      <select value-key="type" .value=${value.type || 'linear'} ?disabled=${this.disabled}>
         <option>linear</option>
         <option>radial</option>
       </select>
 
       <label class="icon-only-label color"></label>
-      <ox-input-angle value-key="rotation" .value=${value.rotation || 0}> </ox-input-angle>
+      <ox-input-angle value-key="rotation" .value=${value.rotation || 0} ?disabled=${this.disabled}> </ox-input-angle>
 
       <label> <ox-i18n msgid="label.direction">direction</ox-i18n> </label>
       <div editors>
@@ -273,7 +273,13 @@ let OxInputColorGradient = class OxInputColorGradient extends OxFormField {
         </paper-dropdown-menu>
       </div>
 
-      <ox-input-color-stops value-key="colorStops" type="gradient" .value=${value.colorStops}> </ox-input-color-stops>
+      <ox-input-color-stops
+        value-key="colorStops"
+        type="gradient"
+        .value=${value.colorStops}
+        ?disabled=${this.disabled}
+      >
+      </ox-input-color-stops>
     `;
     }
     _convertDirectionToRotation(direction) {

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'}>\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}> </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 value-key=\"colorStops\" type=\"gradient\" .value=${value.colorStops}> </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'\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"]}

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

@@ -203,6 +203,7 @@ let OxInputColorStops = class OxInputColorStops extends OxFormField {
         id="color-editor"
         .value=${this.focused && this.focused.color}
         @change=${(e) => this._onChangeSubComponent(e)}
+        ?disabled=${this.disabled}
       >
       </ox-input-color>
 
@@ -213,6 +214,7 @@ let OxInputColorStops = class OxInputColorStops extends OxFormField {
         .value=${this.focused && this.focused.position}
         @change=${(e) => this._onChangeSubComponent(e)}
         step="0.01"
+        ?disabled=${this.disabled}
       />
     `;
     }
@@ -330,6 +332,9 @@ let OxInputColorStops = class OxInputColorStops extends OxFormField {
         this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
     }
     _onDblClickColorbar(e) {
+        if (this.disabled) {
+            return;
+        }
         /* 마커를 클릭한 경우를 걸러낸다. */
         if (e.target !== this.colorbar)
             return;
@@ -350,14 +355,23 @@ let OxInputColorStops = class OxInputColorStops extends OxFormField {
         this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
     }
     _onDblClickMarkers(e) {
+        if (this.disabled) {
+            return;
+        }
         this.colorEditor.showPicker();
     }
     _onMouseDown(e) {
+        if (this.disabled) {
+            return;
+        }
         var marker = e.target;
         var index = marker.getAttribute('marker-index');
         this._setFocused(Number(index));
     }
     _onDragStart(e) {
+        if (this.disabled) {
+            return;
+        }
         /* drag 시에 ghost image를 보이지 않게 하려고 함 */
         e.dataTransfer?.setDragImage(this._dragImage, 0, 0);
         this.dragstart = {
@@ -379,6 +393,9 @@ let OxInputColorStops = class OxInputColorStops extends OxFormField {
         };
     }
     _onDrag(e) {
+        if (this.disabled) {
+            return;
+        }
         if (e.clientX <= 0) {
             return;
         }
@@ -393,6 +410,9 @@ let OxInputColorStops = class OxInputColorStops extends OxFormField {
         }
     }
     _onDragEnd(e) {
+        if (this.disabled) {
+            return;
+        }
         if (e.clientY - this.dragstart.y > 40) {
             this.value.splice(this.focused.index, 1);
             this.value = this.value.slice();