@operato/input 1.11.13 → 1.11.17

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-options.js","sourceRoot":"","sources":["../../src/ox-input-options.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\ntype Option = { text: string; value: string }\n\n@customElement('ox-input-options')\nexport class OxInputOptions extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      margin-bottom: var(--margin-wide);\n    }\n\n    div {\n      display: flex;\n      flex-flow: row nowrap;\n      gap: var(--margin-default);\n      margin-bottom: var(--margin-narrow);\n    }\n\n    button {\n      border: var(--button-border);\n      border-radius: var(--border-radius);\n      background-color: var(--button-background-color);\n      padding: var(--padding-narrow) var(--padding-default);\n      line-height: 0.8;\n      color: var(--button-color);\n      cursor: pointer;\n    }\n    button + button {\n      margin-left: -5px;\n    }\n    button mwc-icon {\n      font-size: var(--fontsize-default);\n    }\n    button:focus,\n    button:hover,\n    button:active {\n      border: var(--button-activ-border);\n      background-color: var(--button-background-focus-color);\n      color: var(--theme-white-color);\n    }\n\n    input {\n      flex: 1;\n      min-width: 80px;\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    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n    button.hidden {\n      opacity: 0;\n      cursor: default;\n    }\n  `\n\n  @property({ type: Array }) value: Option[] = []\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  render() {\n    const options = this.value instanceof Array ? this.value : []\n\n    return html`\n      ${(options || []).map(\n        item => html`\n          <div data-record>\n            <input type=\"text\" data-text=\"\" placeholder=\"text\" .value=${item.text} />\n            <input type=\"text\" data-value=\"\" placeholder=\"value\" .value=${item.value} />\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._delete(e)} tabindex=\"-1\">\n              <mwc-icon>remove</mwc-icon>\n            </button>\n          </div>\n        `\n      )}\n      <div data-record-new>\n        <input type=\"text\" data-text=\"\" placeholder=\"text\" value=\"\" />\n        <input type=\"text\" data-value=\"\" placeholder=\"value\" value=\"\" @change=${(e: Event) => this._add()} />\n        <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">\n          <mwc-icon>add</mwc-icon>\n        </button>\n      </div>\n    `\n  }\n\n  private _changingNow: boolean = false\n\n  _onChange(e: Event) {\n    if (this._changingNow) return\n\n    this._changingNow = true\n\n    var input = e.target as HTMLInputElement\n    var value = input.value\n\n    var div = input.parentElement\n\n    if (div && div.hasAttribute('data-record') && input.hasAttribute('data-value')) {\n      var dataList = div.querySelectorAll('[data-value]:not([hidden])') as NodeListOf<HTMLInputElement>\n\n      for (var i = 0; i < dataList.length; i++) {\n        if (dataList[i] !== input) {\n          dataList[i].value = value || ''\n        }\n      }\n    }\n\n    if (div && div.hasAttribute('data-record')) {\n      this._build(true)\n    } else if (div && div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n      this._add()\n    }\n\n    e.stopPropagation()\n\n    this._changingNow = false\n  }\n\n  _build(includeNewRecord?: any) {\n    if (includeNewRecord) {\n      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n    } else {\n      var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n    }\n\n    var newoptions: Option[] = []\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      var text = (record.querySelector('[data-text]') as HTMLInputElement).value\n      var inputs = record.querySelectorAll('[data-value]:not([style*=\"display: none\"])') as NodeListOf<HTMLInputElement>\n      if (!inputs || inputs.length == 0) continue\n\n      var input = inputs[inputs.length - 1]\n      var value = input.value\n\n      if (text) newoptions.push({ text: text, value: value || text })\n    }\n\n    this.value = newoptions\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n\n  sort() {\n    var sorter = function (a: Option, b: Option) {\n      return b.text < a.text ? 1 : -1\n    }\n\n    this.value = [...this.value.sort(sorter)]\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n\n  _add() {\n    this._build(true)\n\n    var inputs = this.renderRoot.querySelectorAll(\n      '[data-record-new] input:not([style*=\"display: none\"])'\n    ) as NodeListOf<HTMLInputElement>\n\n    for (var i = 0; i < inputs.length; i++) {\n      let input = inputs[i]\n      input.value = ''\n    }\n\n    inputs[0].focus()\n  }\n\n  _delete(e: Event) {\n    const record = (e.target as HTMLElement).parentElement\n    const input = record && (record.querySelector('[data-text]') as HTMLInputElement)\n\n    if (input) {\n      input.value = ''\n    }\n\n    this._build()\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    if (!this.name) return\n\n    const value = this.value\n\n    formData.append(\n      this.name!,\n      typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-input-options.js","sourceRoot":"","sources":["../../src/ox-input-options.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\ntype Option = { text: string; value: string }\n\n@customElement('ox-input-options')\nexport class OxInputOptions extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      margin-bottom: var(--margin-wide);\n    }\n\n    div {\n      display: flex;\n      flex-flow: row nowrap;\n      gap: var(--margin-default);\n      margin-bottom: var(--margin-narrow);\n    }\n\n    button {\n      border: var(--button-border);\n      border-radius: var(--border-radius);\n      background-color: var(--button-background-color);\n      padding: var(--padding-narrow) var(--padding-default);\n      line-height: 0.8;\n      color: var(--button-color);\n      cursor: pointer;\n    }\n    button + button {\n      margin-left: -5px;\n    }\n    button mwc-icon {\n      font-size: var(--fontsize-default);\n    }\n    button:focus,\n    button:hover,\n    button:active {\n      border: var(--button-activ-border);\n      background-color: var(--button-background-focus-color);\n      color: var(--theme-white-color);\n    }\n\n    input {\n      flex: 1;\n      min-width: 80px;\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    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n    button.hidden {\n      opacity: 0;\n      cursor: default;\n    }\n  `\n\n  @property({ type: Array }) value: Option[] = []\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  render() {\n    const options = this.value instanceof Array ? this.value : []\n\n    return html`\n      ${(options || []).map(\n        item => html`\n          <div data-record>\n            <input type=\"text\" data-text=\"\" placeholder=\"text\" .value=${item.text} ?disabled=${this.disabled} />\n            <input type=\"text\" data-value=\"\" placeholder=\"value\" .value=${item.value} ?disabled=${this.disabled} />\n            <button\n              class=\"record-action\"\n              @click=${(e: MouseEvent) => this._delete(e)}\n              tabindex=\"-1\"\n              ?disabled=${this.disabled}\n            >\n              <mwc-icon>remove</mwc-icon>\n            </button>\n          </div>\n        `\n      )}\n      ${this.disabled\n        ? nothing\n        : html`\n            <div data-record-new>\n              <input type=\"text\" data-text=\"\" placeholder=\"text\" value=\"\" />\n              <input type=\"text\" data-value=\"\" placeholder=\"value\" value=\"\" @change=${(e: Event) => this._add()} />\n              <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">\n                <mwc-icon>add</mwc-icon>\n              </button>\n            </div>\n          `}\n    `\n  }\n\n  private _changingNow: boolean = false\n\n  _onChange(e: Event) {\n    if (this._changingNow) return\n\n    this._changingNow = true\n\n    var input = e.target as HTMLInputElement\n    var value = input.value\n\n    var div = input.parentElement\n\n    if (div && div.hasAttribute('data-record') && input.hasAttribute('data-value')) {\n      var dataList = div.querySelectorAll('[data-value]:not([hidden])') as NodeListOf<HTMLInputElement>\n\n      for (var i = 0; i < dataList.length; i++) {\n        if (dataList[i] !== input) {\n          dataList[i].value = value || ''\n        }\n      }\n    }\n\n    if (div && div.hasAttribute('data-record')) {\n      this._build(true)\n    } else if (div && div.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n      this._add()\n    }\n\n    e.stopPropagation()\n\n    this._changingNow = false\n  }\n\n  _build(includeNewRecord?: any) {\n    if (includeNewRecord) {\n      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n    } else {\n      var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n    }\n\n    var newoptions: Option[] = []\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      var text = (record.querySelector('[data-text]') as HTMLInputElement).value\n      var inputs = record.querySelectorAll('[data-value]:not([style*=\"display: none\"])') as NodeListOf<HTMLInputElement>\n      if (!inputs || inputs.length == 0) continue\n\n      var input = inputs[inputs.length - 1]\n      var value = input.value\n\n      if (text) newoptions.push({ text: text, value: value || text })\n    }\n\n    this.value = newoptions\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n\n  sort() {\n    var sorter = function (a: Option, b: Option) {\n      return b.text < a.text ? 1 : -1\n    }\n\n    this.value = [...this.value.sort(sorter)]\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n\n  _add() {\n    this._build(true)\n\n    var inputs = this.renderRoot.querySelectorAll(\n      '[data-record-new] input:not([style*=\"display: none\"])'\n    ) as NodeListOf<HTMLInputElement>\n\n    for (var i = 0; i < inputs.length; i++) {\n      let input = inputs[i]\n      input.value = ''\n    }\n\n    inputs[0].focus()\n  }\n\n  _delete(e: Event) {\n    const record = (e.target as HTMLElement).parentElement\n    const input = record && (record.querySelector('[data-text]') as HTMLInputElement)\n\n    if (input) {\n      input.value = ''\n    }\n\n    this._build()\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    if (!this.name) return\n\n    const value = this.value\n\n    formData.append(\n      this.name!,\n      typeof value === 'string' ? value : value === undefined || value === null ? '' : JSON.stringify(value)\n    )\n  }\n}\n"]}

package/dist/src/ox-input-partition-keys.js

@@ -3,7 +3,7 @@
  */
 import { __decorate } from "tslib";
 import '@material/mwc-icon';
-import { css, html } from 'lit';
+import { css, html, nothing } from 'lit';
 import { customElement, property, queryAll } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field';
 /**
@@ -84,29 +84,54 @@ let OxInputPartitionKeys = class OxInputPartitionKeys extends OxFormField {
         return html `
       ${this._toArray(value).map(item => html `
           <div data-record>
-            <input type="text" data-key placeholder="key" .value=${item.key} />
-            <input type="text" data-value placeholder="value" .value=${item.value} list="value-template" />
-            <button class="record-action" @click=${(e) => this._delete(e)} tabindex="-1">
+            <input type="text" data-key placeholder="key" .value=${item.key} ?disabled=${this.disabled} />
+            <input
+              type="text"
+              data-value
+              placeholder="value"
+              .value=${item.value}
+              list="value-template"
+              ?disabled=${this.disabled}
+            />
+            <button
+              class="record-action"
+              @click=${(e) => this._delete(e)}
+              tabindex="-1"
+              ?disabled=${this.disabled}
+            >
               <mwc-icon>remove</mwc-icon>
             </button>
-            <button class="record-action" @click=${(e) => this._up(e)} tabindex="-1">
+            <button
+              class="record-action"
+              @click=${(e) => this._up(e)}
+              tabindex="-1"
+              ?disabled=${this.disabled}
+            >
               <mwc-icon>arrow_upward</mwc-icon>
             </button>
-            <button class="record-action" @click=${(e) => this._down(e)} tabindex="-1">
+            <button
+              class="record-action"
+              @click=${(e) => this._down(e)}
+              tabindex="-1"
+              ?disabled=${this.disabled}
+            >
               <mwc-icon>arrow_downward</mwc-icon>
             </button>
           </div>
         `)}
-
-      <div data-record-new>
-        <input type="text" data-key placeholder="key" value="" />
-        <input type="text" data-value placeholder="value" value="" list="value-template" />
-        <button class="record-action" @click=${(e) => this._add()} tabindex="-1">
-          <mwc-icon>add</mwc-icon>
-        </button>
-        <button class="hidden"><mwc-icon>add</mwc-icon></button>
-        <button class="hidden"><mwc-icon>add</mwc-icon></button>
-      </div>
+      ${this.disabled
+            ? nothing
+            : html `
+            <div data-record-new>
+              <input type="text" data-key placeholder="key" value="" />
+              <input type="text" data-value placeholder="value" value="" list="value-template" />
+              <button class="record-action" @click=${(e) => this._add()} tabindex="-1">
+                <mwc-icon>add</mwc-icon>
+              </button>
+              <button class="hidden"><mwc-icon>add</mwc-icon></button>
+              <button class="hidden"><mwc-icon>add</mwc-icon></button>
+            </div>
+          `}
 
       <datalist id="value-template">
         <option value="%YYYY">year</option>

package/dist/src/ox-input-partition-keys.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-partition-keys.js","sourceRoot":"","sources":["../../src/ox-input-partition-keys.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\ntype PartitionKeys = { [key: string]: any }\ntype ArrayedPartitionKeys = { key: string; value: any }\n\n/**\n key-value map for partitions editor element\n \n Example:\n \n   <ox-input-partition-keys \n     value=${map}\n   </ox-input-partition-keys>\n */\n@customElement('ox-input-partition-keys')\nexport class OxInputPartitionKeys extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      margin-bottom: var(--margin-wide);\n    }\n\n    div {\n      display: flex;\n      flex-flow: row nowrap;\n      gap: var(--margin-default);\n      margin-bottom: var(--margin-narrow);\n    }\n\n    button {\n      border: var(--button-border);\n      border-radius: var(--border-radius);\n      background-color: var(--button-background-color);\n      padding: var(--padding-narrow) var(--padding-default);\n      line-height: 0.8;\n      color: var(--button-color);\n      cursor: pointer;\n    }\n    button + button {\n      margin-left: -5px;\n    }\n    button mwc-icon {\n      font-size: var(--fontsize-default);\n    }\n    button:focus,\n    button:hover,\n    button:active {\n      border: var(--button-activ-border);\n      background-color: var(--button-background-focus-color);\n      color: var(--theme-white-color);\n    }\n\n    input {\n      flex: 1;\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    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n    button.hidden {\n      opacity: 0;\n      cursor: default;\n    }\n  `\n\n  @property({ type: Object }) value: PartitionKeys = {}\n\n  private _changingNow: boolean = false\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  render() {\n    const value = !this.value || typeof this.value !== 'object' ? {} : this.value\n\n    return html`\n      ${this._toArray(value).map(\n        item => html`\n          <div data-record>\n            <input type=\"text\" data-key placeholder=\"key\" .value=${item.key} />\n            <input type=\"text\" data-value placeholder=\"value\" .value=${item.value} list=\"value-template\" />\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._delete(e)} tabindex=\"-1\">\n              <mwc-icon>remove</mwc-icon>\n            </button>\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._up(e)} tabindex=\"-1\">\n              <mwc-icon>arrow_upward</mwc-icon>\n            </button>\n            <button class=\"record-action\" @click=${(e: MouseEvent) => this._down(e)} tabindex=\"-1\">\n              <mwc-icon>arrow_downward</mwc-icon>\n            </button>\n          </div>\n        `\n      )}\n\n      <div data-record-new>\n        <input type=\"text\" data-key placeholder=\"key\" value=\"\" />\n        <input type=\"text\" data-value placeholder=\"value\" value=\"\" list=\"value-template\" />\n        <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">\n          <mwc-icon>add</mwc-icon>\n        </button>\n        <button class=\"hidden\"><mwc-icon>add</mwc-icon></button>\n        <button class=\"hidden\"><mwc-icon>add</mwc-icon></button>\n      </div>\n\n      <datalist id=\"value-template\">\n        <option value=\"%YYYY\">year</option>\n        <option value=\"%MM\">month</option>\n        <option value=\"%DD\">day</option>\n        <option value=\"%YYYYMMDD\">date</option>\n      </datalist>\n    `\n  }\n\n  _onChange(e: Event) {\n    if (this._changingNow) {\n      return\n    }\n\n    this._changingNow = true\n\n    const input = e.target as HTMLInputElement\n    var value = input.value\n\n    const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement\n\n    if (record.hasAttribute('data-record')) {\n      this._build()\n    } else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n      this._add()\n    }\n\n    this._changingNow = false\n  }\n\n  _build(includeNewRecord?: boolean) {\n    if (includeNewRecord) {\n      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n    } else {\n      var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n    }\n\n    var newmap: PartitionKeys = {}\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n      const inputs = record.querySelectorAll(\n        '[data-value]:not([style*=\"display: none\"])'\n      ) as NodeListOf<HTMLInputElement>\n\n      if (!inputs || inputs.length == 0) {\n        continue\n      }\n\n      var input = inputs[inputs.length - 1]\n\n      var value = input.value\n\n      if (key) {\n        newmap[key] = value || ''\n      }\n    }\n\n    this.value = newmap\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n\n  /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */\n  _toArray(map: PartitionKeys) {\n    var array: ArrayedPartitionKeys[] = []\n\n    for (var key in map) {\n      array.push({\n        key: key,\n        value: map[key]\n      })\n    }\n\n    return array\n  }\n\n  _add() {\n    this._build(true)\n\n    const inputs = this.renderRoot.querySelectorAll(\n      '[data-record-new] input:not([style*=\"display: none\"])'\n    ) as NodeListOf<HTMLInputElement & { value: any }>\n\n    for (var i = 0; i < inputs.length; i++) {\n      let input = inputs[i]\n\n      if (input.type == 'checkbox') input.checked = false\n      else input.value = ''\n    }\n\n    inputs[0].focus()\n  }\n\n  _delete(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n\n    ;(record!.querySelector('[data-key]') as HTMLInputElement)!.value = ''\n\n    this._build()\n  }\n\n  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>\n\n  _up(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n    const array = Array.from(this.records)\n    const index = array.indexOf(record) - 1\n\n    if (index < 0) {\n      return\n    }\n\n    const deleted = array.splice(index, 1)\n    array.splice(index + 1, 0, ...deleted)\n\n    this.value = array.reduce((sum, record) => {\n      const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n      const value = (record.querySelector('[data-value]') as HTMLInputElement).value\n\n      sum[key] = value\n      return sum\n    }, {} as { [key: string]: string })\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n\n  _down(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n    const array = Array.from(this.records)\n    const index = array.indexOf(record)\n\n    if (index > array.length) {\n      return\n    }\n\n    array.splice(index, 1)\n    array.splice(index + 1, 0, record)\n\n    this.value = array.reduce((sum, record) => {\n      const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n      const value = (record.querySelector('[data-value]') as HTMLInputElement).value\n\n      sum[key] = value\n      return sum\n    }, {} as { [key: string]: string })\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}
+{"version":3,"file":"ox-input-partition-keys.js","sourceRoot":"","sources":["../../src/ox-input-partition-keys.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\ntype PartitionKeys = { [key: string]: any }\ntype ArrayedPartitionKeys = { key: string; value: any }\n\n/**\n key-value map for partitions editor element\n \n Example:\n \n   <ox-input-partition-keys \n     value=${map}\n   </ox-input-partition-keys>\n */\n@customElement('ox-input-partition-keys')\nexport class OxInputPartitionKeys extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      margin-bottom: var(--margin-wide);\n    }\n\n    div {\n      display: flex;\n      flex-flow: row nowrap;\n      gap: var(--margin-default);\n      margin-bottom: var(--margin-narrow);\n    }\n\n    button {\n      border: var(--button-border);\n      border-radius: var(--border-radius);\n      background-color: var(--button-background-color);\n      padding: var(--padding-narrow) var(--padding-default);\n      line-height: 0.8;\n      color: var(--button-color);\n      cursor: pointer;\n    }\n    button + button {\n      margin-left: -5px;\n    }\n    button mwc-icon {\n      font-size: var(--fontsize-default);\n    }\n    button:focus,\n    button:hover,\n    button:active {\n      border: var(--button-activ-border);\n      background-color: var(--button-background-focus-color);\n      color: var(--theme-white-color);\n    }\n\n    input {\n      flex: 1;\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    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n    button.hidden {\n      opacity: 0;\n      cursor: default;\n    }\n  `\n\n  @property({ type: Object }) value: PartitionKeys = {}\n\n  private _changingNow: boolean = false\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  render() {\n    const value = !this.value || typeof this.value !== 'object' ? {} : this.value\n\n    return html`\n      ${this._toArray(value).map(\n        item => html`\n          <div data-record>\n            <input type=\"text\" data-key placeholder=\"key\" .value=${item.key} ?disabled=${this.disabled} />\n            <input\n              type=\"text\"\n              data-value\n              placeholder=\"value\"\n              .value=${item.value}\n              list=\"value-template\"\n              ?disabled=${this.disabled}\n            />\n            <button\n              class=\"record-action\"\n              @click=${(e: MouseEvent) => this._delete(e)}\n              tabindex=\"-1\"\n              ?disabled=${this.disabled}\n            >\n              <mwc-icon>remove</mwc-icon>\n            </button>\n            <button\n              class=\"record-action\"\n              @click=${(e: MouseEvent) => this._up(e)}\n              tabindex=\"-1\"\n              ?disabled=${this.disabled}\n            >\n              <mwc-icon>arrow_upward</mwc-icon>\n            </button>\n            <button\n              class=\"record-action\"\n              @click=${(e: MouseEvent) => this._down(e)}\n              tabindex=\"-1\"\n              ?disabled=${this.disabled}\n            >\n              <mwc-icon>arrow_downward</mwc-icon>\n            </button>\n          </div>\n        `\n      )}\n      ${this.disabled\n        ? nothing\n        : html`\n            <div data-record-new>\n              <input type=\"text\" data-key placeholder=\"key\" value=\"\" />\n              <input type=\"text\" data-value placeholder=\"value\" value=\"\" list=\"value-template\" />\n              <button class=\"record-action\" @click=${(e: MouseEvent) => this._add()} tabindex=\"-1\">\n                <mwc-icon>add</mwc-icon>\n              </button>\n              <button class=\"hidden\"><mwc-icon>add</mwc-icon></button>\n              <button class=\"hidden\"><mwc-icon>add</mwc-icon></button>\n            </div>\n          `}\n\n      <datalist id=\"value-template\">\n        <option value=\"%YYYY\">year</option>\n        <option value=\"%MM\">month</option>\n        <option value=\"%DD\">day</option>\n        <option value=\"%YYYYMMDD\">date</option>\n      </datalist>\n    `\n  }\n\n  _onChange(e: Event) {\n    if (this._changingNow) {\n      return\n    }\n\n    this._changingNow = true\n\n    const input = e.target as HTMLInputElement\n    var value = input.value\n\n    const record = (e.target as Element).closest('[data-record],[data-record-new]') as HTMLElement\n\n    if (record.hasAttribute('data-record')) {\n      this._build()\n    } else if (record.hasAttribute('data-record-new') && input.hasAttribute('data-value')) {\n      this._add()\n    }\n\n    this._changingNow = false\n  }\n\n  _build(includeNewRecord?: boolean) {\n    if (includeNewRecord) {\n      var records = this.renderRoot.querySelectorAll('[data-record],[data-record-new]') as NodeListOf<HTMLElement>\n    } else {\n      var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n    }\n\n    var newmap: PartitionKeys = {}\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n      const inputs = record.querySelectorAll(\n        '[data-value]:not([style*=\"display: none\"])'\n      ) as NodeListOf<HTMLInputElement>\n\n      if (!inputs || inputs.length == 0) {\n        continue\n      }\n\n      var input = inputs[inputs.length - 1]\n\n      var value = input.value\n\n      if (key) {\n        newmap[key] = value || ''\n      }\n    }\n\n    this.value = newmap\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n\n  /* map아이템들을 template(dom-repeat)용 배열로 변환하는 함수 */\n  _toArray(map: PartitionKeys) {\n    var array: ArrayedPartitionKeys[] = []\n\n    for (var key in map) {\n      array.push({\n        key: key,\n        value: map[key]\n      })\n    }\n\n    return array\n  }\n\n  _add() {\n    this._build(true)\n\n    const inputs = this.renderRoot.querySelectorAll(\n      '[data-record-new] input:not([style*=\"display: none\"])'\n    ) as NodeListOf<HTMLInputElement & { value: any }>\n\n    for (var i = 0; i < inputs.length; i++) {\n      let input = inputs[i]\n\n      if (input.type == 'checkbox') input.checked = false\n      else input.value = ''\n    }\n\n    inputs[0].focus()\n  }\n\n  _delete(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n\n    ;(record!.querySelector('[data-key]') as HTMLInputElement)!.value = ''\n\n    this._build()\n  }\n\n  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>\n\n  _up(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n    const array = Array.from(this.records)\n    const index = array.indexOf(record) - 1\n\n    if (index < 0) {\n      return\n    }\n\n    const deleted = array.splice(index, 1)\n    array.splice(index + 1, 0, ...deleted)\n\n    this.value = array.reduce((sum, record) => {\n      const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n      const value = (record.querySelector('[data-value]') as HTMLInputElement).value\n\n      sum[key] = value\n      return sum\n    }, {} as { [key: string]: string })\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n\n  _down(e: MouseEvent) {\n    const record = (e.target as Element).closest('[data-record]') as HTMLElement\n    const array = Array.from(this.records)\n    const index = array.indexOf(record)\n\n    if (index > array.length) {\n      return\n    }\n\n    array.splice(index, 1)\n    array.splice(index + 1, 0, record)\n\n    this.value = array.reduce((sum, record) => {\n      const key = (record.querySelector('[data-key]') as HTMLInputElement).value\n      const value = (record.querySelector('[data-value]') as HTMLInputElement).value\n\n      sum[key] = value\n      return sum\n    }, {} as { [key: string]: string })\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}

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

@@ -108,7 +108,8 @@ let OxInputPrivilege = class OxInputPrivilege extends OxFormField {
       <form @change=${this.onChange.bind(this)}>
         <div values>
           <label for="privilege" col1>${i18next.t('label.privilege')}</label>
-          <select id="privilege" name="privilege" value=${ifDefined(privilege)}>
+          <select id="privilege" name="privilege" value=${ifDefined(privilege)}
+                      ?disabled=${this.disabled}>
             <option value="">&nbsp;</option>
             ${privileges.map(p => html `<option
                   value=${`${p.category}:${p.privilege}`}
@@ -119,10 +120,12 @@ let OxInputPrivilege = class OxInputPrivilege extends OxFormField {
           </select>
 
           <label for="owner" col1>${i18next.t('label.domain-owner')}</label>
-          <input id="owner" type="checkbox" name="owner" ?checked=${owner} col2></input>
+          <input id="owner" type="checkbox" name="owner" ?checked=${owner} col2 
+                      ?disabled=${this.disabled}></input>
 
           <label for="super" col1>${i18next.t('label.superuser')}</label>
-          <input id="super" type="checkbox" name="super" ?checked=${superUser} col2></input>
+          <input id="super" type="checkbox" name="super" ?checked=${superUser} col2
+                      ?disabled=${this.disabled}></input>
         </div>
       </form>
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-privilege.js","sourceRoot":"","sources":["../../src/ox-input-privilege.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-button'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-privilege')\nexport class OxInputPrivilege extends OxFormField {\n  static styles = css`\n    :host {\n      text-align: center;\n      padding: 10px;\n    }\n\n    :host * {\n      box-sizing: border-box;\n    }\n\n    :host *:focus {\n      outline: none;\n    }\n\n    form {\n      width: 100%;\n      height: 100%;\n    }\n\n    div[values] {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      grid-gap: 10px;\n    }\n\n    div[values] > [col1] {\n      text-align: right;\n      align-self: center;\n    }\n\n    div[values] > [col2] {\n      text-align: left;\n      align-self: center;\n      margin-right: auto;\n    }\n\n    input {\n      border: 0;\n      border-bottom: var(--border-dark-color);\n      padding: var(--input-padding);\n      padding-right: 0;\n      max-width: 70px;\n      font: var(--input-font);\n      color: var(--primary-text-color);\n      text-align: right;\n    }\n\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n\n    input:invalid {\n      border-bottom: 1px solid var(--status-danger-color);\n      color: var(--status-danger-color);\n    }\n\n    label {\n      margin-right: var(--margin-default);\n      font: normal 0.8em var(--theme-font);\n      color: var(--primary-color);\n    }\n\n    div[buttons] {\n      display: flex;\n      flex-direction: row;\n      justify-content: left;\n      padding: 10px;\n    }\n\n    button {\n      border: var(--button-border);\n      border-radius: var(--border-radius);\n      background-color: var(--button-background-color);\n      padding: var(--padding-narrow) var(--padding-default);\n      min-height: 35px;\n      line-height: 0.8;\n      color: var(--button-color);\n      cursor: pointer;\n    }\n    button:focus,\n    button:hover,\n    button:active {\n      border: var(--button-activ-border);\n      background-color: var(--button-background-focus-color);\n      color: var(--theme-white-color);\n    }\n  `\n\n  @property({ type: Object }) value?: {\n    category: string\n    privilege: string\n    owner?: boolean\n    super?: boolean\n  } | null\n\n  @property({ type: Array }) privileges: { privilege: string; category: string; description: string }[] = []\n\n  @query('form') private form!: HTMLFormElement\n\n  render() {\n    const { category, privilege, owner, super: superUser } = this.value || {}\n    const privileges = this.privileges || []\n\n    return html`\n      <form @change=${this.onChange.bind(this)}>\n        <div values>\n          <label for=\"privilege\" col1>${i18next.t('label.privilege')}</label>\n          <select id=\"privilege\" name=\"privilege\" value=${ifDefined(privilege)}>\n            <option value=\"\">&nbsp;</option>\n            ${privileges.map(\n              p =>\n                html`<option\n                  value=${`${p.category}:${p.privilege}`}\n                  ?selected=${category == p.category && privilege == p.privilege}\n                >\n                  ${p.description}\n                </option>`\n            )}\n          </select>\n\n          <label for=\"owner\" col1>${i18next.t('label.domain-owner')}</label>\n          <input id=\"owner\" type=\"checkbox\" name=\"owner\" ?checked=${owner} col2></input>\n\n          <label for=\"super\" col1>${i18next.t('label.superuser')}</label>\n          <input id=\"super\" type=\"checkbox\" name=\"super\" ?checked=${superUser} col2></input>\n        </div>\n      </form>\n    `\n  }\n\n  buildValue() {\n    const formData = new FormData(this.form)\n\n    const [category = '', privilege = ''] = (formData.get('privilege') as string).split(':')\n    const owner = formData.get('owner') as string\n    const superUser = formData.get('super') as string\n\n    return {\n      category,\n      privilege,\n      owner: owner == 'on',\n      super: superUser == 'on'\n    }\n  }\n\n  firstUpdated() {\n    ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n  }\n\n  onChange(e: Event) {\n    e.stopPropagation()\n\n    this.value = this.buildValue()\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-input-privilege.js","sourceRoot":"","sources":["../../src/ox-input-privilege.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-button'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-privilege')\nexport class OxInputPrivilege extends OxFormField {\n  static styles = css`\n    :host {\n      text-align: center;\n      padding: 10px;\n    }\n\n    :host * {\n      box-sizing: border-box;\n    }\n\n    :host *:focus {\n      outline: none;\n    }\n\n    form {\n      width: 100%;\n      height: 100%;\n    }\n\n    div[values] {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      grid-gap: 10px;\n    }\n\n    div[values] > [col1] {\n      text-align: right;\n      align-self: center;\n    }\n\n    div[values] > [col2] {\n      text-align: left;\n      align-self: center;\n      margin-right: auto;\n    }\n\n    input {\n      border: 0;\n      border-bottom: var(--border-dark-color);\n      padding: var(--input-padding);\n      padding-right: 0;\n      max-width: 70px;\n      font: var(--input-font);\n      color: var(--primary-text-color);\n      text-align: right;\n    }\n\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n\n    input:invalid {\n      border-bottom: 1px solid var(--status-danger-color);\n      color: var(--status-danger-color);\n    }\n\n    label {\n      margin-right: var(--margin-default);\n      font: normal 0.8em var(--theme-font);\n      color: var(--primary-color);\n    }\n\n    div[buttons] {\n      display: flex;\n      flex-direction: row;\n      justify-content: left;\n      padding: 10px;\n    }\n\n    button {\n      border: var(--button-border);\n      border-radius: var(--border-radius);\n      background-color: var(--button-background-color);\n      padding: var(--padding-narrow) var(--padding-default);\n      min-height: 35px;\n      line-height: 0.8;\n      color: var(--button-color);\n      cursor: pointer;\n    }\n    button:focus,\n    button:hover,\n    button:active {\n      border: var(--button-activ-border);\n      background-color: var(--button-background-focus-color);\n      color: var(--theme-white-color);\n    }\n  `\n\n  @property({ type: Object }) value?: {\n    category: string\n    privilege: string\n    owner?: boolean\n    super?: boolean\n  } | null\n\n  @property({ type: Array }) privileges: { privilege: string; category: string; description: string }[] = []\n\n  @query('form') private form!: HTMLFormElement\n\n  render() {\n    const { category, privilege, owner, super: superUser } = this.value || {}\n    const privileges = this.privileges || []\n\n    return html`\n      <form @change=${this.onChange.bind(this)}>\n        <div values>\n          <label for=\"privilege\" col1>${i18next.t('label.privilege')}</label>\n          <select id=\"privilege\" name=\"privilege\" value=${ifDefined(privilege)}\n                      ?disabled=${this.disabled}>\n            <option value=\"\">&nbsp;</option>\n            ${privileges.map(\n              p =>\n                html`<option\n                  value=${`${p.category}:${p.privilege}`}\n                  ?selected=${category == p.category && privilege == p.privilege}\n                >\n                  ${p.description}\n                </option>`\n            )}\n          </select>\n\n          <label for=\"owner\" col1>${i18next.t('label.domain-owner')}</label>\n          <input id=\"owner\" type=\"checkbox\" name=\"owner\" ?checked=${owner} col2 \n                      ?disabled=${this.disabled}></input>\n\n          <label for=\"super\" col1>${i18next.t('label.superuser')}</label>\n          <input id=\"super\" type=\"checkbox\" name=\"super\" ?checked=${superUser} col2\n                      ?disabled=${this.disabled}></input>\n        </div>\n      </form>\n    `\n  }\n\n  buildValue() {\n    const formData = new FormData(this.form)\n\n    const [category = '', privilege = ''] = (formData.get('privilege') as string).split(':')\n    const owner = formData.get('owner') as string\n    const superUser = formData.get('super') as string\n\n    return {\n      category,\n      privilege,\n      owner: owner == 'on',\n      super: superUser == 'on'\n    }\n  }\n\n  firstUpdated() {\n    ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n  }\n\n  onChange(e: Event) {\n    e.stopPropagation()\n\n    this.value = this.buildValue()\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n}\n"]}

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

@@ -42,9 +42,9 @@ let OxInputQuantifier = class OxInputQuantifier extends OxFormField {
         const [min = 1, max = 1] = this.value || [];
         return html `
       <span>
-        <input type="number" .value=${min} @change=${(e) => this.onChange(e)} />
+        <input type="number" .value=${min} @change=${(e) => this.onChange(e)} ?disabled=${this.disabled} />
         -
-        <input type="number" .value=${max} @change=${(e) => this.onChange(e)} />
+        <input type="number" .value=${max} @change=${(e) => this.onChange(e)} ?disabled=${this.disabled} />
       </span>
     `;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-quantifier.js","sourceRoot":"","sources":["../../src/ox-input-quantifier.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAErE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QA8BsB,UAAK,GAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IAqBrD,CAAC;aAlDQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BlB,AA3BY,CA2BZ;IAID,MAAM;QACJ,MAAM,CAAC,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE3C,OAAO,IAAI,CAAA;;sCAEuB,GAAG,YAAY,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;;sCAE7C,GAAG,YAAY,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC;;KAE9E,CAAA;IACH,CAAC;IAID,QAAQ,CAAC,CAAQ;QACf,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QACtF,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AApB0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDAAyB;AAchC;IAAlB,QAAQ,CAAC,OAAO,CAAC;iDAA4B;AA5CnC,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAmD7B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-quantifier')\nexport class OxInputQuantifier extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      gap: var(--margin-default);\n      align-items: center;\n\n      width: 100%;\n      user-select: text;\n    }\n\n    input[type='number'] {\n      width: 48px;\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    input[type='number']:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n\n    input:focus {\n      outline: none;\n      opacity: 1;\n    }\n  `\n\n  @property({ type: Array }) value: number[] = [1, 1]\n\n  render() {\n    const [min = 1, max = 1] = this.value || []\n\n    return html`\n      <span>\n        <input type=\"number\" .value=${min} @change=${(e: Event) => this.onChange(e)} />\n        -\n        <input type=\"number\" .value=${max} @change=${(e: Event) => this.onChange(e)} />\n      </span>\n    `\n  }\n\n  @queryAll('input') inputs?: HTMLInputElement[]\n\n  onChange(e: Event) {\n    e.stopPropagation()\n    this.value = Array.from(this.inputs || []).map(input => input.valueAsNumber) || [1, 1]\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"ox-input-quantifier.js","sourceRoot":"","sources":["../../src/ox-input-quantifier.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAErE,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,WAAW;IAA3C;;QA8BsB,UAAK,GAAa,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IAqBrD,CAAC;aAlDQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BlB,AA3BY,CA2BZ;IAID,MAAM;QACJ,MAAM,CAAC,GAAG,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAE3C,OAAO,IAAI,CAAA;;sCAEuB,GAAG,YAAY,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;;sCAExE,GAAG,YAAY,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,cAAc,IAAI,CAAC,QAAQ;;KAEzG,CAAA;IACH,CAAC;IAID,QAAQ,CAAC,CAAQ;QACf,CAAC,CAAC,eAAe,EAAE,CAAA;QACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;QACtF,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AApB0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;gDAAyB;AAchC;IAAlB,QAAQ,CAAC,OAAO,CAAC;iDAA4B;AA5CnC,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CAmD7B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-quantifier')\nexport class OxInputQuantifier extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      gap: var(--margin-default);\n      align-items: center;\n\n      width: 100%;\n      user-select: text;\n    }\n\n    input[type='number'] {\n      width: 48px;\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    input[type='number']:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n\n    input:focus {\n      outline: none;\n      opacity: 1;\n    }\n  `\n\n  @property({ type: Array }) value: number[] = [1, 1]\n\n  render() {\n    const [min = 1, max = 1] = this.value || []\n\n    return html`\n      <span>\n        <input type=\"number\" .value=${min} @change=${(e: Event) => this.onChange(e)} ?disabled=${this.disabled} />\n        -\n        <input type=\"number\" .value=${max} @change=${(e: Event) => this.onChange(e)} ?disabled=${this.disabled} />\n      </span>\n    `\n  }\n\n  @queryAll('input') inputs?: HTMLInputElement[]\n\n  onChange(e: Event) {\n    e.stopPropagation()\n    this.value = Array.from(this.inputs || []).map(input => input.valueAsNumber) || [1, 1]\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

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

@@ -123,6 +123,7 @@ let OxInputRange = class OxInputRange extends OxFormField {
             this.value = Number(e.target.value);
             this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
         }}
+        ?disabled=${this.disabled}
       />
 
       <input
@@ -136,6 +137,7 @@ let OxInputRange = class OxInputRange extends OxFormField {
             this.value = Number(e.target.value);
             this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
         }}
+        ?disabled=${this.disabled}
       />
     `;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-range.js","sourceRoot":"","sources":["../../src/ox-input-range.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAAtC;;QAmG8B,UAAK,GAAW,CAAC,CAAA;QACjB,SAAI,GAAW,CAAC,CAAA;QAChB,QAAG,GAAW,CAAC,GAAG,CAAA;QAClB,QAAG,GAAW,GAAG,CAAA;IA+B/C,CAAC;aApIQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgGlB,AAhGY,CAgGZ;IAOD,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,KAAK;gBACX,IAAI,CAAC,IAAI;eACV,IAAI,CAAC,GAAG;eACR,IAAI,CAAC,GAAG;iBACN,CAAC,CAAa,EAAE,EAAE;YACzB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YACzD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;;;;;iBAKQ,IAAI,CAAC,KAAK;gBACX,IAAI,CAAC,IAAI;eACV,IAAI,CAAC,GAAG;eACR,IAAI,CAAC,GAAG;kBACL,CAAC,CAAQ,EAAE,EAAE;YACrB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YACzD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;;KAEJ,CAAA;IACH,CAAC;;AAjC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAkB;AAtGzC,YAAY;IADjB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,YAAY,CAqIjB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-range')\nclass OxInputRange extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      gap: var(--margin-default);\n      align-items: center;\n\n      width: 100%;\n      user-select: text;\n    }\n\n    input[type='number'] {\n      width: 48px;\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    input[type='number']:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n\n    input[type='range'] {\n      -webkit-appearance: none;\n      border: none;\n      outline: none;\n      width: 100%;\n      flex: 1;\n      height: 16px;\n      background-color: transparent;\n    }\n    input[type='range']::-webkit-slider-runnable-track {\n      width: 100%;\n      height: 7px;\n      background-color: rgba(0, 0, 0, 0.02);\n      border: 1px solid rgba(0, 0, 0, 0.05);\n      border-radius: 5px;\n    }\n    input[type='range']::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--primary-color);\n      margin-top: -6px;\n      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n    }\n    input[type='range']:focus {\n      outline: none;\n    }\n\n    input[type='range']::-moz-range-track {\n      width: 100%;\n      height: 7px;\n      background-color: rgba(0, 0, 0, 0.02);\n      border: 1px solid rgba(0, 0, 0, 0.05);\n      border-radius: 5px;\n    }\n    input[type='range']::-moz-range-thumb {\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--primary-color);\n      margin-top: -6px;\n      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n    }\n\n    input[type='range']:-moz-focusring {\n      outline: 1px solid black;\n      outline-offset: -1px;\n    }\n\n    input[type='range']::-ms-track {\n      width: 100%;\n      height: 7px;\n      background-color: rgba(0, 0, 0, 0.02);\n      border: 1px solid rgba(0, 0, 0, 0.05);\n      border-radius: 5px;\n    }\n    input[type='range']::-ms-thumb {\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--primary-color);\n      margin-top: -6px;\n      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n    }\n\n    input:focus {\n      outline: none;\n      opacity: 1;\n    }\n  `\n\n  @property({ type: Number }) value: number = 0\n  @property({ type: Number }) step: number = 1\n  @property({ type: Number }) min: number = -100\n  @property({ type: Number }) max: number = 100\n\n  render() {\n    return html`\n      <input\n        type=\"range\"\n        .value=${this.value}\n        .step=${this.step}\n        .min=${this.min}\n        .max=${this.max}\n        @input=${(e: InputEvent) => {\n          e.stopPropagation()\n          this.value = Number((e.target as HTMLInputElement).value)\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n        }}\n      />\n\n      <input\n        type=\"number\"\n        .value=${this.value}\n        .step=${this.step}\n        .min=${this.min}\n        .max=${this.max}\n        @change=${(e: Event) => {\n          e.stopPropagation()\n          this.value = Number((e.target as HTMLInputElement).value)\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n        }}\n      />\n    `\n  }\n}\n"]}
+{"version":3,"file":"ox-input-range.js","sourceRoot":"","sources":["../../src/ox-input-range.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGhD,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAAtC;;QAmG8B,UAAK,GAAW,CAAC,CAAA;QACjB,SAAI,GAAW,CAAC,CAAA;QAChB,QAAG,GAAW,CAAC,GAAG,CAAA;QAClB,QAAG,GAAW,GAAG,CAAA;IAiC/C,CAAC;aAtIQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgGlB,AAhGY,CAgGZ;IAOD,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,KAAK;gBACX,IAAI,CAAC,IAAI;eACV,IAAI,CAAC,GAAG;eACR,IAAI,CAAC,GAAG;iBACN,CAAC,CAAa,EAAE,EAAE;YACzB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YACzD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;oBACW,IAAI,CAAC,QAAQ;;;;;iBAKhB,IAAI,CAAC,KAAK;gBACX,IAAI,CAAC,IAAI;eACV,IAAI,CAAC,GAAG;eACR,IAAI,CAAC,GAAG;kBACL,CAAC,CAAQ,EAAE,EAAE;YACrB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,GAAG,MAAM,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YACzD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;QAClF,CAAC;oBACW,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;;AAnC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;0CAAiB;AAChB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAmB;AAClB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAkB;AAtGzC,YAAY;IADjB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,YAAY,CAuIjB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-range')\nclass OxInputRange extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      gap: var(--margin-default);\n      align-items: center;\n\n      width: 100%;\n      user-select: text;\n    }\n\n    input[type='number'] {\n      width: 48px;\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    input[type='number']:focus {\n      outline: none;\n      border-bottom: 1px solid var(--primary-color);\n    }\n\n    input[type='range'] {\n      -webkit-appearance: none;\n      border: none;\n      outline: none;\n      width: 100%;\n      flex: 1;\n      height: 16px;\n      background-color: transparent;\n    }\n    input[type='range']::-webkit-slider-runnable-track {\n      width: 100%;\n      height: 7px;\n      background-color: rgba(0, 0, 0, 0.02);\n      border: 1px solid rgba(0, 0, 0, 0.05);\n      border-radius: 5px;\n    }\n    input[type='range']::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--primary-color);\n      margin-top: -6px;\n      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n    }\n    input[type='range']:focus {\n      outline: none;\n    }\n\n    input[type='range']::-moz-range-track {\n      width: 100%;\n      height: 7px;\n      background-color: rgba(0, 0, 0, 0.02);\n      border: 1px solid rgba(0, 0, 0, 0.05);\n      border-radius: 5px;\n    }\n    input[type='range']::-moz-range-thumb {\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--primary-color);\n      margin-top: -6px;\n      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n    }\n\n    input[type='range']:-moz-focusring {\n      outline: 1px solid black;\n      outline-offset: -1px;\n    }\n\n    input[type='range']::-ms-track {\n      width: 100%;\n      height: 7px;\n      background-color: rgba(0, 0, 0, 0.02);\n      border: 1px solid rgba(0, 0, 0, 0.05);\n      border-radius: 5px;\n    }\n    input[type='range']::-ms-thumb {\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--primary-color);\n      margin-top: -6px;\n      box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);\n    }\n\n    input:focus {\n      outline: none;\n      opacity: 1;\n    }\n  `\n\n  @property({ type: Number }) value: number = 0\n  @property({ type: Number }) step: number = 1\n  @property({ type: Number }) min: number = -100\n  @property({ type: Number }) max: number = 100\n\n  render() {\n    return html`\n      <input\n        type=\"range\"\n        .value=${this.value}\n        .step=${this.step}\n        .min=${this.min}\n        .max=${this.max}\n        @input=${(e: InputEvent) => {\n          e.stopPropagation()\n          this.value = Number((e.target as HTMLInputElement).value)\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n        }}\n        ?disabled=${this.disabled}\n      />\n\n      <input\n        type=\"number\"\n        .value=${this.value}\n        .step=${this.step}\n        .min=${this.min}\n        .max=${this.max}\n        @change=${(e: Event) => {\n          e.stopPropagation()\n          this.value = Number((e.target as HTMLInputElement).value)\n          this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n        }}\n        ?disabled=${this.disabled}\n      />\n    `\n  }\n}\n"]}

package/dist/src/ox-input-scene-component-id.js

@@ -36,6 +36,7 @@ let OxInputId = class OxInputId extends OxFormField {
         @change=${(e) => this._onInputChanged(e)}
         .placeholder=${this.getAttribute('placeholder') || ''}
         list="ids"
+        ?disabled=${this.disabled}
       />
 
       <datalist id="ids">${ids.map(id => html ` <option value=${id}></option> `)}</datalist>

package/dist/src/ox-input-scene-component-id.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-scene-component-id.js","sourceRoot":"","sources":["../../src/ox-input-scene-component-id.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,SAAS,GAAf,MAAM,SAAU,SAAQ,WAAW;IAAnC;;QAmBI,SAAI,GAAkB,EAAE,CAAA;IA0CnC,CAAC;aA5DQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;GAclB,AAdY,CAcZ;IAMD,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAE3B,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,KAAK,IAAI,EAAE;mBACd,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;kBAC3C,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;uBACrC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,EAAE;;;;2BAIlC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA,kBAAkB,EAAE,aAAa,CAAC;KAC1E,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAa;QAC3B,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAEvC,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,6BAA6B,EAAE;YAC7C,MAAM,EAAE;gBACN,SAAS;gBACT,QAAQ,EAAE,CAAC,GAAa,EAAE,EAAE;oBAC1B,IAAI,CAAC,IAAI,GAAG,GAAG,CAAA;gBACjB,CAAC;aACF;SACF,CAAC,CACH,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAa;QAC3B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;QAEjD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AA3C2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAiD;AAEnE;IAAR,KAAK,EAAE;uCAAyB;AAnBtB,SAAS;IADrB,aAAa,CAAC,6BAA6B,CAAC;GAChC,SAAS,CA6DrB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\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-input-scene-component-id')\nexport class OxInputId extends OxFormField {\n  static styles = css`\n    :host {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: flex-end;\n    }\n\n    input {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n  `\n\n  @property({ type: Object }) property: { component?: any } | null | undefined\n\n  @state() _ids: Array<string> = []\n\n  render() {\n    const ids = this._ids || []\n\n    return html`\n      <input\n        id=\"text\"\n        type=\"text\"\n        .value=${this.value || ''}\n        @focusin=${(e: FocusEvent) => this._onInputFocused(e)}\n        @change=${(e: InputEvent) => this._onInputChanged(e)}\n        .placeholder=${this.getAttribute('placeholder') || ''}\n        list=\"ids\"\n      />\n\n      <datalist id=\"ids\">${ids.map(id => html` <option value=${id}></option> `)}</datalist>\n    `\n  }\n\n  _onInputFocused(e: FocusEvent) {\n    var { component } = this.property || {}\n\n    document.dispatchEvent(\n      new CustomEvent('get-all-scene-component-ids', {\n        detail: {\n          component,\n          callback: (ids: string[]) => {\n            this._ids = ids\n          }\n        }\n      })\n    )\n  }\n\n  _onInputChanged(e: InputEvent) {\n    e.stopPropagation()\n\n    this.value = (e.target as HTMLInputElement).value\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"ox-input-scene-component-id.js","sourceRoot":"","sources":["../../src/ox-input-scene-component-id.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,SAAS,GAAf,MAAM,SAAU,SAAQ,WAAW;IAAnC;;QAmBI,SAAI,GAAkB,EAAE,CAAA;IA2CnC,CAAC;aA7DQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;GAclB,AAdY,CAcZ;IAMD,MAAM;QACJ,MAAM,GAAG,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAA;QAE3B,OAAO,IAAI,CAAA;;;;iBAIE,IAAI,CAAC,KAAK,IAAI,EAAE;mBACd,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;kBAC3C,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC;uBACrC,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,EAAE;;oBAEzC,IAAI,CAAC,QAAQ;;;2BAGN,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,CAAC,IAAI,CAAA,kBAAkB,EAAE,aAAa,CAAC;KAC1E,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAa;QAC3B,IAAI,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAEvC,QAAQ,CAAC,aAAa,CACpB,IAAI,WAAW,CAAC,6BAA6B,EAAE;YAC7C,MAAM,EAAE;gBACN,SAAS;gBACT,QAAQ,EAAE,CAAC,GAAa,EAAE,EAAE;oBAC1B,IAAI,CAAC,IAAI,GAAG,GAAG,CAAA;gBACjB,CAAC;aACF;SACF,CAAC,CACH,CAAA;IACH,CAAC;IAED,eAAe,CAAC,CAAa;QAC3B,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,CAAC,KAAK,GAAI,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAA;QAEjD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;;AA5C2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAiD;AAEnE;IAAR,KAAK,EAAE;uCAAyB;AAnBtB,SAAS;IADrB,aAAa,CAAC,6BAA6B,CAAC;GAChC,SAAS,CA8DrB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\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-input-scene-component-id')\nexport class OxInputId extends OxFormField {\n  static styles = css`\n    :host {\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: flex-end;\n    }\n\n    input {\n      width: 100%;\n      height: 100%;\n      box-sizing: border-box;\n      border: 1px solid rgba(0, 0, 0, 0.2);\n    }\n  `\n\n  @property({ type: Object }) property: { component?: any } | null | undefined\n\n  @state() _ids: Array<string> = []\n\n  render() {\n    const ids = this._ids || []\n\n    return html`\n      <input\n        id=\"text\"\n        type=\"text\"\n        .value=${this.value || ''}\n        @focusin=${(e: FocusEvent) => this._onInputFocused(e)}\n        @change=${(e: InputEvent) => this._onInputChanged(e)}\n        .placeholder=${this.getAttribute('placeholder') || ''}\n        list=\"ids\"\n        ?disabled=${this.disabled}\n      />\n\n      <datalist id=\"ids\">${ids.map(id => html` <option value=${id}></option> `)}</datalist>\n    `\n  }\n\n  _onInputFocused(e: FocusEvent) {\n    var { component } = this.property || {}\n\n    document.dispatchEvent(\n      new CustomEvent('get-all-scene-component-ids', {\n        detail: {\n          component,\n          callback: (ids: string[]) => {\n            this._ids = ids\n          }\n        }\n      })\n    )\n  }\n\n  _onInputChanged(e: InputEvent) {\n    e.stopPropagation()\n\n    this.value = (e.target as HTMLInputElement).value\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

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

@@ -46,7 +46,7 @@ let OxInputSearch = class OxInputSearch extends OxFormField {
     ]; }
     render() {
         return html `
-      <mwc-icon @click=${(e) => this._onClickSearch(e)}>search</mwc-icon>
+      <mwc-icon @click=${(e) => !this.disabled && this._onClickSearch(e)}>search</mwc-icon>
       <input
         type="text"
         .value=${this.value || ''}
@@ -67,6 +67,7 @@ let OxInputSearch = class OxInputSearch extends OxFormField {
                 }
             }
         }}
+        ?disabled=${this.disabled}
       />
     `;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-search.js","sourceRoot":"","sources":["../../src/ox-input-search.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAE3B,OAAO,QAAQ,MAAM,oBAAoB,CAAA;AACzC,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,aAAa,GAAnB,MAAM,aAAc,SAAQ,WAAW;IAAvC;;QAuCG,iCAA4B,GAAG,QAAQ,CAAC,CAAC,KAAa,EAAE,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,KAAK,CAAC,EAAE,GAAG,CAAC,CAAA;IAoE1G,CAAC;aA1GQ,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6BF;KACF,AA/BY,CA+BZ;IASD,MAAM;QACJ,OAAO,IAAI,CAAA;yBACU,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;;;iBAG5C,IAAI,CAAC,KAAK,IAAI,EAAE;uBACV,IAAI,CAAC,WAAW,IAAI,EAAE;kBAC3B,CAAC,CAAQ,EAAE,EAAE;YACrB,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,mBAAmB,CAAE,CAAC,CAAC,MAA2B,CAAC,KAAK,CAAC,CAAA;YAC9D,0EAA0E;QAC5E,CAAC;mBACU,CAAC,CAAgB,EAAE,EAAE;YAC9B,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;gBACtB,IAAK,CAAC,CAAC,MAA2B,CAAC,KAAK,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;oBACvD,+EAA+E;oBAC/E,CAAC,CAAC,cAAc,EAAE,CAAA,CAAC,gDAAgD;oBAEnE,IAAI,CAAC,KAAK,CAAC,aAAa,CACtB,IAAI,WAAW,CAAC,QAAQ,EAAE;wBACxB,MAAM,EAAG,CAAC,CAAC,MAA2B,CAAC,KAAK;qBAC7C,CAAC,CACH,CAAA;gBACH,CAAC;YACH,CAAC;QACH,CAAC;;KAEJ,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,IAAI,CAAC,SAAS,EAAE,CAAC;YACnB,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAA;QACpB,CAAC;IACH,CAAC;IAED,mBAAmB,CAAC,KAAa;QAC/B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAElB,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,KAAK;SACd,CAAC,CACH,CAAA;QAED,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAAC;YAC3B,qBAAqB,CAAC,GAAG,EAAE;gBACzB,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAA;YACrB,CAAC,CAAC,CAAA;QACJ,CAAC;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,IAAI,CAAC,KAAK,CAAC,aAAa,EAAE,CAAA;QAC5B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,CAAC,aAAa,CACtB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;aACzB,CAAC,CACH,CAAA;QACH,CAAC;IACH,CAAC;;AAxE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;kDAAqB;AACe;IAA9D,QAAQ,CAAC,EAAE,SAAS,EAAE,qBAAqB,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;wDAA4B;AAE1E;IAAf,KAAK,CAAC,OAAO,CAAC;4CAAyB;AArC7B,aAAa;IADzB,aAAa,CAAC,iBAAiB,CAAC;GACpB,aAAa,CA2GzB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport debounce from 'lodash-es/debounce'\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-search')\nexport class OxInputSearch extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        position: relative;\n        align-items: center;\n\n        --mdc-icon-size: 20px;\n      }\n\n      [type='text'] {\n        flex: 1;\n        background-color: transparent;\n        border: 0;\n        border-bottom: var(--input-search-border-bottom, var(--border-dark-color));\n        padding: var(--input-search-padding, var(--input-padding));\n        padding-left: 25px;\n        font: var(--input-search-font, var(--input-font));\n        color: var(--primary-text-color);\n      }\n\n      [type='text']:focus {\n        outline: none;\n        border-bottom: var(--input-search-focus-border-bottom, 1px solid var(--primary-color));\n      }\n\n      mwc-icon {\n        position: absolute;\n        color: var(--secondary-color);\n      }\n    `\n  ]\n\n  @property({ type: String }) placeholder?: string\n  @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean\n\n  @query('input') input!: HTMLInputElement\n\n  private dispatchChangeEventDebouncer = debounce((value: string) => this.dispatchChangeEvent(value), 100)\n\n  render() {\n    return html`\n      <mwc-icon @click=${(e: Event) => this._onClickSearch(e)}>search</mwc-icon>\n      <input\n        type=\"text\"\n        .value=${this.value || ''}\n        .placeholder=${this.placeholder || ''}\n        @change=${(e: Event) => {\n          e.stopPropagation()\n          this.dispatchChangeEvent((e.target as HTMLInputElement).value)\n          // this.dispatchChangeEventDebouncer((e.target as HTMLInputElement).value)\n        }}\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            if ((e.target as HTMLInputElement).value == this.value) {\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(\n                new CustomEvent('change', {\n                  detail: (e.target as HTMLInputElement).value\n                })\n              )\n            }\n          }\n        }}\n      />\n    `\n  }\n\n  firstUpdated() {\n    if (this.autofocus) {\n      this.input.focus()\n    }\n  }\n\n  dispatchChangeEvent(value: string) {\n    this.value = value\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: value\n      })\n    )\n\n    if (this.selectAfterChange) {\n      requestAnimationFrame(() => {\n        this.input.select()\n      })\n    }\n  }\n\n  _onClickSearch(e: Event) {\n    if (this._form) {\n      e.stopPropagation()\n      this._form.requestSubmit()\n    } else {\n      this.input.dispatchEvent(\n        new CustomEvent('change', {\n          detail: this.input.value\n        })\n      )\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-input-search.js","sourceRoot":"","sources":["../../src/ox-input-search.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\n\nimport debounce from 'lodash-es/debounce'\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-search')\nexport class OxInputSearch extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        position: relative;\n        align-items: center;\n\n        --mdc-icon-size: 20px;\n      }\n\n      [type='text'] {\n        flex: 1;\n        background-color: transparent;\n        border: 0;\n        border-bottom: var(--input-search-border-bottom, var(--border-dark-color));\n        padding: var(--input-search-padding, var(--input-padding));\n        padding-left: 25px;\n        font: var(--input-search-font, var(--input-font));\n        color: var(--primary-text-color);\n      }\n\n      [type='text']:focus {\n        outline: none;\n        border-bottom: var(--input-search-focus-border-bottom, 1px solid var(--primary-color));\n      }\n\n      mwc-icon {\n        position: absolute;\n        color: var(--secondary-color);\n      }\n    `\n  ]\n\n  @property({ type: String }) placeholder?: string\n  @property({ attribute: 'select-after-change', type: Boolean }) selectAfterChange?: boolean\n\n  @query('input') input!: HTMLInputElement\n\n  private dispatchChangeEventDebouncer = debounce((value: string) => this.dispatchChangeEvent(value), 100)\n\n  render() {\n    return html`\n      <mwc-icon @click=${(e: Event) => !this.disabled && this._onClickSearch(e)}>search</mwc-icon>\n      <input\n        type=\"text\"\n        .value=${this.value || ''}\n        .placeholder=${this.placeholder || ''}\n        @change=${(e: Event) => {\n          e.stopPropagation()\n          this.dispatchChangeEvent((e.target as HTMLInputElement).value)\n          // this.dispatchChangeEventDebouncer((e.target as HTMLInputElement).value)\n        }}\n        @keydown=${(e: KeyboardEvent) => {\n          if (e.key === 'Enter') {\n            if ((e.target as HTMLInputElement).value == this.value) {\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(\n                new CustomEvent('change', {\n                  detail: (e.target as HTMLInputElement).value\n                })\n              )\n            }\n          }\n        }}\n        ?disabled=${this.disabled}\n      />\n    `\n  }\n\n  firstUpdated() {\n    if (this.autofocus) {\n      this.input.focus()\n    }\n  }\n\n  dispatchChangeEvent(value: string) {\n    this.value = value\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: value\n      })\n    )\n\n    if (this.selectAfterChange) {\n      requestAnimationFrame(() => {\n        this.input.select()\n      })\n    }\n  }\n\n  _onClickSearch(e: Event) {\n    if (this._form) {\n      e.stopPropagation()\n      this._form.requestSubmit()\n    } else {\n      this.input.dispatchEvent(\n        new CustomEvent('change', {\n          detail: this.input.value\n        })\n      )\n    }\n  }\n}\n"]}

package/dist/src/ox-input-select-buttons.js

@@ -36,7 +36,10 @@ let OxInputSelectButtons = class OxInputSelectButtons extends OxFormField {
         const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : [];
         return html `
       ${(options || []).map(({ display, value }) => html `
-          <span data-value=${value} ?selected=${values.includes(value)} @click=${(e) => this.onClick(e)}
+          <span
+            data-value=${value}
+            ?selected=${values.includes(value)}
+            @click=${(e) => !this.disabled && this.onClick(e)}
             >${display}</span
           >
         `)}

package/dist/src/ox-input-select-buttons.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-select-buttons.js","sourceRoot":"","sources":["../../src/ox-input-select-buttons.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\ntype Option = { display: string; value: string }\n\n@customElement('ox-input-select-buttons')\nexport class OxInputSelectButtons extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-flow: row;\n      flex-wrap: wrap;\n      gap: var(--margin-default);\n    }\n\n    span {\n      border-radius: 9999px;\n      background-color: #efefef;\n      padding: 2px 10px;\n    }\n\n    span[selected] {\n      background-color: var(--focus-background-color, #38a25b);\n      color: var(--focus-color, #efefef);\n    }\n  `\n\n  @property({ type: Array }) value: string[] | string | undefined = []\n  @property({ type: Array }) options: Option[] = []\n  @property({ type: Boolean }) multiple: boolean = false\n\n  render() {\n    const options = this.options.filter(option => !!option.value)\n    const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n    return html`\n      ${(options || []).map(\n        ({ display, value }) => html`\n          <span data-value=${value} ?selected=${values.includes(value)} @click=${(e: MouseEvent) => this.onClick(e)}\n            >${display}</span\n          >\n        `\n      )}\n    `\n  }\n\n  onClick(e: MouseEvent) {\n    e.stopPropagation()\n\n    const target = e.target as HTMLSpanElement\n    const value = target.getAttribute('data-value') as string\n\n    if (this.multiple) {\n      const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n      const idx = (this.value || []).indexOf(value)\n      if (idx != -1) {\n        values.splice(idx, 1)\n      } else {\n        values.push(value)\n      }\n      this.value = [...values]\n    } else {\n      this.value = value\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}
+{"version":3,"file":"ox-input-select-buttons.js","sourceRoot":"","sources":["../../src/ox-input-select-buttons.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAKtC,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,WAAW;IAA9C;;QAqBsB,UAAK,GAAkC,EAAE,CAAA;QACzC,YAAO,GAAa,EAAE,CAAA;QACpB,aAAQ,GAAY,KAAK,CAAA;IA0CxD,CAAC;aAhEQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;GAkBlB,AAlBY,CAkBZ;IAMD,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAA;QAC7D,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;QAE3G,OAAO,IAAI,CAAA;QACP,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CACnB,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,IAAI,CAAA;;yBAEX,KAAK;wBACN,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC;qBACzB,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;eAC1D,OAAO;;SAEb,CACF;KACF,CAAA;IACH,CAAC;IAED,OAAO,CAAC,CAAa;QACnB,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAyB,CAAA;QAC1C,MAAM,KAAK,GAAG,MAAM,CAAC,YAAY,CAAC,YAAY,CAAW,CAAA;QAEzD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,MAAM,MAAM,GAAG,IAAI,CAAC,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,IAAI,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;YAE3G,MAAM,GAAG,GAAG,CAAC,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,CAAA;YAC7C,IAAI,GAAG,IAAI,CAAC,CAAC,EAAE,CAAC;gBACd,MAAM,CAAC,MAAM,CAAC,GAAG,EAAE,CAAC,CAAC,CAAA;YACvB,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YACpB,CAAC;YACD,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,MAAM,CAAC,CAAA;QAC1B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QACpB,CAAC;QAED,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;IACtG,CAAC;;AA3C0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;mDAA0C;AACzC;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;qDAAuB;AACpB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;sDAA0B;AAvB3C,oBAAoB;IADhC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,oBAAoB,CAiEhC","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\ntype Option = { display: string; value: string }\n\n@customElement('ox-input-select-buttons')\nexport class OxInputSelectButtons extends OxFormField {\n  static styles = css`\n    :host {\n      display: flex;\n      flex-flow: row;\n      flex-wrap: wrap;\n      gap: var(--margin-default);\n    }\n\n    span {\n      border-radius: 9999px;\n      background-color: #efefef;\n      padding: 2px 10px;\n    }\n\n    span[selected] {\n      background-color: var(--focus-background-color, #38a25b);\n      color: var(--focus-color, #efefef);\n    }\n  `\n\n  @property({ type: Array }) value: string[] | string | undefined = []\n  @property({ type: Array }) options: Option[] = []\n  @property({ type: Boolean }) multiple: boolean = false\n\n  render() {\n    const options = this.options.filter(option => !!option.value)\n    const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n    return html`\n      ${(options || []).map(\n        ({ display, value }) => html`\n          <span\n            data-value=${value}\n            ?selected=${values.includes(value)}\n            @click=${(e: MouseEvent) => !this.disabled && this.onClick(e)}\n            >${display}</span\n          >\n        `\n      )}\n    `\n  }\n\n  onClick(e: MouseEvent) {\n    e.stopPropagation()\n\n    const target = e.target as HTMLSpanElement\n    const value = target.getAttribute('data-value') as string\n\n    if (this.multiple) {\n      const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n      const idx = (this.value || []).indexOf(value)\n      if (idx != -1) {\n        values.splice(idx, 1)\n      } else {\n        values.push(value)\n      }\n      this.value = [...values]\n    } else {\n      this.value = value\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}

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

@@ -53,11 +53,17 @@ let OxInputStack = class OxInputStack extends OxFormField {
         const stack = [...this.stack].reverse();
         const length = stack.length;
         return html `
-      <button id="add-floor" @click=${(e) => this._onClickAddFloor(e)}>+</button>
+      <button id="add-floor" @click=${(e) => this._onClickAddFloor(e)} ?disabled=${this.disabled}>+</button>
 
       ${stack.map((item, index) => html `
-          <div floor ?active=${item.active} @click=${(e) => this._onClickToActive(e)} idx=${length - index - 1}>
-            ${item.name} <button @click=${(e) => this._onClickRemoveFloor(e)}>-</button>
+          <div
+            floor
+            ?active=${item.active}
+            @click=${(e) => !this.disabled && this._onClickToActive(e)}
+            idx=${length - index - 1}
+          >
+            ${item.name}
+            <button @click=${(e) => this._onClickRemoveFloor(e)} ?disabled=${this.disabled}>-</button>
           </div>
         `)}
     `;

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-stack.js","sourceRoot":"","sources":["../../src/ox-input-stack.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-stack')\nexport class OxInputStack extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n\n      #add-floor {\n        width: 100%;\n        height: 20px;\n        background-color: blue;\n        color: white;\n      }\n\n      div {\n        background-color: blue;\n        width: calc(100% - 40px);\n        width: -webkit-calc(100% - 40px);\n        min-height: 20px;\n      }\n\n      div[active] {\n        background-color: red;\n      }\n\n      div button {\n        position: absolute;\n        right: 10px;\n        width: 30px;\n        min-height: 20px;\n      }\n    `\n  ]\n\n  /**\n   * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.\n   */\n  @property({ type: Array }) stack: { name: string; active?: boolean }[] = []\n\n  /**\n   * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.\n   */\n  // @property({ type: Number }) activeIndex: number = 0\n\n  render() {\n    const stack = [...this.stack].reverse()\n    const length = stack.length\n\n    return html`\n      <button id=\"add-floor\" @click=${(e: Event) => this._onClickAddFloor(e)}>+</button>\n\n      ${stack.map(\n        (item, index) => html`\n          <div floor ?active=${item.active} @click=${(e: Event) => this._onClickToActive(e)} idx=${length - index - 1}>\n            ${item.name} <button @click=${(e: Event) => this._onClickRemoveFloor(e)}>-</button>\n          </div>\n        `\n      )}\n    `\n  }\n\n  _notifyChange() {\n    this.value = this.stack\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value,\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  _onClickAddFloor(e: Event) {\n    this.stack.push({ name: String(this.stack.length + 1) })\n    this.requestUpdate()\n\n    this._notifyChange()\n  }\n\n  _onClickToActive(e: Event) {\n    const floor = (e.target as HTMLElement).closest('[floor]')\n\n    if (!floor) {\n      return\n    }\n\n    e.stopPropagation()\n\n    const activeIndex = Number(floor.getAttribute('idx'))\n    this.stack = this.stack.map((floor, index) => {\n      return activeIndex === index\n        ? {\n            name: floor.name,\n            active: true\n          }\n        : { name: floor.name }\n    })\n\n    this._notifyChange()\n  }\n\n  _onClickRemoveFloor(e: Event) {\n    const floor = (e.target as HTMLElement).closest('[floor]')\n\n    if (!floor) {\n      return\n    }\n\n    e.stopPropagation()\n\n    const idx = Number(floor.getAttribute('idx'))\n\n    this.stack.splice(idx, 1)\n\n    this.requestUpdate()\n\n    this._notifyChange()\n  }\n}\n"]}
+{"version":3,"file":"ox-input-stack.js","sourceRoot":"","sources":["../../src/ox-input-stack.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-stack')\nexport class OxInputStack extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n\n      #add-floor {\n        width: 100%;\n        height: 20px;\n        background-color: blue;\n        color: white;\n      }\n\n      div {\n        background-color: blue;\n        width: calc(100% - 40px);\n        width: -webkit-calc(100% - 40px);\n        min-height: 20px;\n      }\n\n      div[active] {\n        background-color: red;\n      }\n\n      div button {\n        position: absolute;\n        right: 10px;\n        width: 30px;\n        min-height: 20px;\n      }\n    `\n  ]\n\n  /**\n   * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.\n   */\n  @property({ type: Array }) stack: { name: string; active?: boolean }[] = []\n\n  /**\n   * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.\n   */\n  // @property({ type: Number }) activeIndex: number = 0\n\n  render() {\n    const stack = [...this.stack].reverse()\n    const length = stack.length\n\n    return html`\n      <button id=\"add-floor\" @click=${(e: Event) => this._onClickAddFloor(e)} ?disabled=${this.disabled}>+</button>\n\n      ${stack.map(\n        (item, index) => html`\n          <div\n            floor\n            ?active=${item.active}\n            @click=${(e: Event) => !this.disabled && this._onClickToActive(e)}\n            idx=${length - index - 1}\n          >\n            ${item.name}\n            <button @click=${(e: Event) => this._onClickRemoveFloor(e)} ?disabled=${this.disabled}>-</button>\n          </div>\n        `\n      )}\n    `\n  }\n\n  _notifyChange() {\n    this.value = this.stack\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value,\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  _onClickAddFloor(e: Event) {\n    this.stack.push({ name: String(this.stack.length + 1) })\n    this.requestUpdate()\n\n    this._notifyChange()\n  }\n\n  _onClickToActive(e: Event) {\n    const floor = (e.target as HTMLElement).closest('[floor]')\n\n    if (!floor) {\n      return\n    }\n\n    e.stopPropagation()\n\n    const activeIndex = Number(floor.getAttribute('idx'))\n    this.stack = this.stack.map((floor, index) => {\n      return activeIndex === index\n        ? {\n            name: floor.name,\n            active: true\n          }\n        : { name: floor.name }\n    })\n\n    this._notifyChange()\n  }\n\n  _onClickRemoveFloor(e: Event) {\n    const floor = (e.target as HTMLElement).closest('[floor]')\n\n    if (!floor) {\n      return\n    }\n\n    e.stopPropagation()\n\n    const idx = Number(floor.getAttribute('idx'))\n\n    this.stack.splice(idx, 1)\n\n    this.requestUpdate()\n\n    this._notifyChange()\n  }\n}\n"]}

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

@@ -38,6 +38,7 @@ let OxInputTextarea = class OxInputTextarea extends OxFormField {
         @input=${this.onInput.bind(this)}
         @keydown=${this.onKeydown.bind(this)}
         @change=${this.onChange.bind(this)}
+        ?disabled=${this.disabled}
       ></textarea>
     `;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-textarea.js","sourceRoot":"","sources":["../../src/ox-input-textarea.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGtC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;IAAzC;;QAuBuB,UAAK,GAAW,EAAE,CAAA;IAmDhD,CAAC;aAzEQ,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;KAkBF;KACF,AApBY,CAoBZ;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;iBACV,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;mBACrB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;kBAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;;KAErC,CAAA;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAA;QACvB,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;YACnC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,IAAI,CAAA;QAChE,CAAC;IACH,CAAC;IAED,OAAO,CAAC,CAAQ;QACd,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;QACnC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,IAAI,CAAA;IAChE,CAAC;IAED,SAAS,CAAC,CAAgB;QACxB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC;IACH,CAAC;IAED,QAAQ,CAAC,CAAQ;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAA;QAEhC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,KAAK;YAClB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;;AAlD2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmB;AAE3B;IAAlB,KAAK,CAAC,UAAU,CAAC;iDAA4B;AAzBnC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA0E3B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-textarea')\nexport class OxInputTextarea extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n      }\n\n      textarea {\n        flex: 1;\n        height: auto;\n        resize: none;\n        overflow: hidden;\n        border: none;\n        outline: none;\n        background-color: transparent;\n\n        font-family: inherit;\n        font-size: inherit;\n        font-weight: inherit;\n      }\n    `\n  ]\n\n  @property({ type: String }) value: string = ''\n\n  @query('textarea') textarea!: HTMLInputElement\n\n  render() {\n    return html`\n      <textarea\n        .value=${this.value}\n        @input=${this.onInput.bind(this)}\n        @keydown=${this.onKeydown.bind(this)}\n        @change=${this.onChange.bind(this)}\n      ></textarea>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    requestAnimationFrame(() => {\n      this.textarea.focus()\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this.textarea.style.height = 'auto'\n      this.textarea.style.height = this.textarea.scrollHeight + 'px'\n    }\n  }\n\n  onInput(e: Event) {\n    this.textarea.style.height = 'auto'\n    this.textarea.style.height = this.textarea.scrollHeight + 'px'\n  }\n\n  onKeydown(e: KeyboardEvent) {\n    if (e.key === 'Enter') {\n      e.stopPropagation()\n    }\n  }\n\n  onChange(e: Event) {\n    this.value = this.textarea.value\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value,\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}
+{"version":3,"file":"ox-input-textarea.js","sourceRoot":"","sources":["../../src/ox-input-textarea.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAkB,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGtC,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,WAAW;IAAzC;;QAuBuB,UAAK,GAAW,EAAE,CAAA;IAoDhD,CAAC;aA1EQ,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;KAkBF;KACF,AApBY,CAoBZ;IAMD,MAAM;QACJ,OAAO,IAAI,CAAA;;iBAEE,IAAI,CAAC,KAAK;iBACV,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;mBACrB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;kBAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC;oBACtB,IAAI,CAAC,QAAQ;;KAE5B,CAAA;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QACzB,qBAAqB,CAAC,GAAG,EAAE;YACzB,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,CAAA;QACvB,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,OAAO,CAAC,OAA6B;QACnC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;YACnC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,IAAI,CAAA;QAChE,CAAC;IACH,CAAC;IAED,OAAO,CAAC,CAAQ;QACd,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAA;QACnC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,QAAQ,CAAC,YAAY,GAAG,IAAI,CAAA;IAChE,CAAC;IAED,SAAS,CAAC,CAAgB;QACxB,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;YACtB,CAAC,CAAC,eAAe,EAAE,CAAA;QACrB,CAAC;IACH,CAAC;IAED,QAAQ,CAAC,CAAQ;QACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAA;QAEhC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,MAAM,EAAE,IAAI,CAAC,KAAK;YAClB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;SACf,CAAC,CACH,CAAA;IACH,CAAC;;AAnD2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8CAAmB;AAE3B;IAAlB,KAAK,CAAC,UAAU,CAAC;iDAA4B;AAzBnC,eAAe;IAD3B,aAAa,CAAC,mBAAmB,CAAC;GACtB,eAAe,CA2E3B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field'\n\n@customElement('ox-input-textarea')\nexport class OxInputTextarea extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n      }\n\n      textarea {\n        flex: 1;\n        height: auto;\n        resize: none;\n        overflow: hidden;\n        border: none;\n        outline: none;\n        background-color: transparent;\n\n        font-family: inherit;\n        font-size: inherit;\n        font-weight: inherit;\n      }\n    `\n  ]\n\n  @property({ type: String }) value: string = ''\n\n  @query('textarea') textarea!: HTMLInputElement\n\n  render() {\n    return html`\n      <textarea\n        .value=${this.value}\n        @input=${this.onInput.bind(this)}\n        @keydown=${this.onKeydown.bind(this)}\n        @change=${this.onChange.bind(this)}\n        ?disabled=${this.disabled}\n      ></textarea>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    requestAnimationFrame(() => {\n      this.textarea.focus()\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      this.textarea.style.height = 'auto'\n      this.textarea.style.height = this.textarea.scrollHeight + 'px'\n    }\n  }\n\n  onInput(e: Event) {\n    this.textarea.style.height = 'auto'\n    this.textarea.style.height = this.textarea.scrollHeight + 'px'\n  }\n\n  onKeydown(e: KeyboardEvent) {\n    if (e.key === 'Enter') {\n      e.stopPropagation()\n    }\n  }\n\n  onChange(e: Event) {\n    this.value = this.textarea.value\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value,\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n}\n"]}

package/dist/src/ox-input-unit-number.js

@@ -217,10 +217,14 @@ let OxInputUnit = class OxInputUnit extends OxFormField {
         .value=${this._toUserUnit(this.value)}
         placeholder=${ifDefined(this.placeholder)}
         @change=${(e) => this._onChangeValue(e)}
+        ?disabled=${this.disabled}
       />
       <div
         id="unit"
         @click=${(e) => {
+            if (this.disabled) {
+                return;
+            }
             const target = e.currentTarget;
             this.popup.open({
                 right: 0,