@operato/input 10.1.0 → 10.2.1

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+### [10.2.1](https://github.com/hatiolab/operato/compare/v10.2.0...v10.2.1) (2026-07-31)
+
+
+### :bug: Bug Fix
+
+* **ui:** 다크에서 밝게 뜨던 면들 정리 — 팝업·모델러 툴바·네이티브 인풋 ([a81265a](https://github.com/hatiolab/operato/commit/a81265a2a2a6a6bf2dc86240877cc32610ec1fc6))
+* **ui:** 트리 핸들·트리라인·슬라이더 knob 를 테마 따라가게 + 툴바 스크롤바 회귀 수정 ([8948a19](https://github.com/hatiolab/operato/commit/8948a19c54464ec4049bf741a04bec9fcd62b07f))
+
+
+
+## [10.2.0](https://github.com/hatiolab/operato/compare/v10.1.0...v10.2.0) (2026-07-30)
+
+**Note:** Version bump only for package @operato/input
+
+
+
+
+
 ## [10.1.0](https://github.com/hatiolab/operato/compare/v10.0.0...v10.1.0) (2026-07-30)
 
 

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

@@ -40,6 +40,8 @@ let OxInputDuration = class OxInputDuration extends OxFormField {
     }
 
     input {
+      background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
+      color: var(--input-field-color, var(--md-sys-color-on-surface));
       box-sizing: border-box;
       padding: 0 var(--ox-input-gap);
       height: var(--form-element-height-medium);

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-duration.js","sourceRoot":"","sources":["../../src/ox-input-duration.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, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-input-duration')\nexport class OxInputDuration extends OxFormField {\n  static styles = [InputStyles, css`\n    :host {\n      text-align: center;\n      padding: 10px;\n      --md-filled-icon-button-container-height: var(--form-element-height-medium);\n      --md-filled-icon-button-container-shape: var(--md-sys-shape-corner-small);\n    }\n\n    :host * {\n      box-sizing: border-box;\n    }\n\n    :host *:focus {\n      outline: none;\n    }\n\n    form {\n      display: flex;\n      flex-direction: row;\n\n      align-items: center;\n    }\n\n    [padding] {\n      min-width: 100px;\n    }\n\n    input {\n      box-sizing: border-box;\n      padding: 0 var(--ox-input-gap);\n      height: var(--form-element-height-medium);\n      border: 1px solid var(--md-sys-color-outline);\n      border-radius: var(--md-sys-shape-corner-small);\n      max-width: 70px;\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\n      text-align: right;\n    }\n\n    input:focus {\n      outline: none;\n      border-color: var(--md-sys-color-secondary-fixed-dim);\n    }\n\n    input:invalid {\n      border-bottom: 1px solid var(--md-sys-color-error);\n      color: var(--md-sys-color-error);\n    }\n\n    label {\n      width: 100%;\n      margin-right: calc(var(--ox-input-gap) * 2);\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  `]\n\n  @property({ type: Number }) value?: number = undefined\n\n  render() {\n    var d = Number(this.value || 0)\n\n    const days = Math.floor(d / (3600 * 24))\n    d -= days * 24 * 3600\n    const hours = Math.floor(d / 3600)\n    d -= hours * 3600\n    const minutes = Math.floor(d / 60)\n    const seconds = d - minutes * 60\n\n    return html`\n      <form @change=${this.onChange.bind(this)}>\n        <div padding></div>\n        <input id=\"days\" type=\"number\" .value=${String(days || 0)} pattern=\"\\\\d*\" ?disabled=${this.disabled} />\n        <label for=\"days\">${i18next.t('label.days')}</label>\n\n        <input\n          id=\"hours\"\n          type=\"number\"\n          .value=${String(hours || 0)}\n          pattern=\"[01]?\\\\d|2[0-3]\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"hour\">${i18next.t('label.hours')}</label>\n\n        <input\n          id=\"minutes\"\n          type=\"number\"\n          .value=${String(minutes || 0)}\n          pattern=\"[0-5]?\\\\d\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"minute\">${i18next.t('label.minutes')}</label>\n\n        <input\n          id=\"seconds\"\n          type=\"number\"\n          .value=${String(seconds || 0)}\n          pattern=\"[0-5]?\\\\d\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"second\">${i18next.t('label.seconds')}</label>\n\n        <md-filled-icon-button\n          type=\"button\"\n          @click=${(e: Event) => {\n            e.preventDefault()\n            e.stopPropagation()\n\n            this.value = 0\n\n            this.dispatchEvent(\n              new CustomEvent('change', {\n                bubbles: true,\n                composed: true,\n                detail: this.value\n              })\n            )\n          }}\n          ?disabled=${this.disabled}\n        >\n          <md-icon>backspace</md-icon>\n        </md-filled-icon-button>\n        <div padding></div>\n      </form>\n    `\n  }\n\n  firstUpdated() {\n    ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n  }\n\n  @query('#days') days!: HTMLInputElement\n  @query('#hours') hours!: HTMLInputElement\n  @query('#minutes') minutes!: HTMLInputElement\n  @query('#seconds') seconds!: HTMLInputElement\n\n  onChange(e: Event) {\n    e.stopPropagation()\n\n    var form = this.renderRoot.querySelector('form') as HTMLFormElement\n    var valid = form.checkValidity()\n    if (!valid) {\n      form.reportValidity()\n      return\n    }\n\n    const days = Number(this.days.value)\n    const hours = Number(this.hours.value)\n    const minutes = Number(this.minutes.value)\n    const seconds = Number(this.seconds.value)\n\n    this.value = (days || 0) * 24 * 60 * 60 + (hours || 0) * 60 * 60 + (minutes || 0) * 60 + (seconds || 0)\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-duration.js","sourceRoot":"","sources":["../../src/ox-input-duration.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, query } from 'lit/decorators.js'\n\nimport { i18next } from '@operato/i18n'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-input-duration')\nexport class OxInputDuration extends OxFormField {\n  static styles = [InputStyles, css`\n    :host {\n      text-align: center;\n      padding: 10px;\n      --md-filled-icon-button-container-height: var(--form-element-height-medium);\n      --md-filled-icon-button-container-shape: var(--md-sys-shape-corner-small);\n    }\n\n    :host * {\n      box-sizing: border-box;\n    }\n\n    :host *:focus {\n      outline: none;\n    }\n\n    form {\n      display: flex;\n      flex-direction: row;\n\n      align-items: center;\n    }\n\n    [padding] {\n      min-width: 100px;\n    }\n\n    input {\n      background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n      color: var(--input-field-color, var(--md-sys-color-on-surface));\n      box-sizing: border-box;\n      padding: 0 var(--ox-input-gap);\n      height: var(--form-element-height-medium);\n      border: 1px solid var(--md-sys-color-outline);\n      border-radius: var(--md-sys-shape-corner-small);\n      max-width: 70px;\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\n      text-align: right;\n    }\n\n    input:focus {\n      outline: none;\n      border-color: var(--md-sys-color-secondary-fixed-dim);\n    }\n\n    input:invalid {\n      border-bottom: 1px solid var(--md-sys-color-error);\n      color: var(--md-sys-color-error);\n    }\n\n    label {\n      width: 100%;\n      margin-right: calc(var(--ox-input-gap) * 2);\n      font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  `]\n\n  @property({ type: Number }) value?: number = undefined\n\n  render() {\n    var d = Number(this.value || 0)\n\n    const days = Math.floor(d / (3600 * 24))\n    d -= days * 24 * 3600\n    const hours = Math.floor(d / 3600)\n    d -= hours * 3600\n    const minutes = Math.floor(d / 60)\n    const seconds = d - minutes * 60\n\n    return html`\n      <form @change=${this.onChange.bind(this)}>\n        <div padding></div>\n        <input id=\"days\" type=\"number\" .value=${String(days || 0)} pattern=\"\\\\d*\" ?disabled=${this.disabled} />\n        <label for=\"days\">${i18next.t('label.days')}</label>\n\n        <input\n          id=\"hours\"\n          type=\"number\"\n          .value=${String(hours || 0)}\n          pattern=\"[01]?\\\\d|2[0-3]\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"hour\">${i18next.t('label.hours')}</label>\n\n        <input\n          id=\"minutes\"\n          type=\"number\"\n          .value=${String(minutes || 0)}\n          pattern=\"[0-5]?\\\\d\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"minute\">${i18next.t('label.minutes')}</label>\n\n        <input\n          id=\"seconds\"\n          type=\"number\"\n          .value=${String(seconds || 0)}\n          pattern=\"[0-5]?\\\\d\"\n          ?disabled=${this.disabled}\n        />\n        <label for=\"second\">${i18next.t('label.seconds')}</label>\n\n        <md-filled-icon-button\n          type=\"button\"\n          @click=${(e: Event) => {\n            e.preventDefault()\n            e.stopPropagation()\n\n            this.value = 0\n\n            this.dispatchEvent(\n              new CustomEvent('change', {\n                bubbles: true,\n                composed: true,\n                detail: this.value\n              })\n            )\n          }}\n          ?disabled=${this.disabled}\n        >\n          <md-icon>backspace</md-icon>\n        </md-filled-icon-button>\n        <div padding></div>\n      </form>\n    `\n  }\n\n  firstUpdated() {\n    ;(this.renderRoot.querySelector('input') as HTMLInputElement).focus()\n  }\n\n  @query('#days') days!: HTMLInputElement\n  @query('#hours') hours!: HTMLInputElement\n  @query('#minutes') minutes!: HTMLInputElement\n  @query('#seconds') seconds!: HTMLInputElement\n\n  onChange(e: Event) {\n    e.stopPropagation()\n\n    var form = this.renderRoot.querySelector('form') as HTMLFormElement\n    var valid = form.checkValidity()\n    if (!valid) {\n      form.reportValidity()\n      return\n    }\n\n    const days = Number(this.days.value)\n    const hours = Number(this.hours.value)\n    const minutes = Number(this.minutes.value)\n    const seconds = Number(this.seconds.value)\n\n    this.value = (days || 0) * 24 * 60 * 60 + (hours || 0) * 60 * 60 + (minutes || 0) * 60 + (seconds || 0)\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-hashtags.js

@@ -61,6 +61,8 @@ let OxInputHashtags = class OxInputHashtags extends OxFormField {
     }
 
     input {
+      background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
+      color: var(--input-field-color, var(--md-sys-color-on-surface));
       vertical-align: middle;
       -webkit-appearance: none;
       -webkit-text-size-adjust: none;

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-hashtags.js","sourceRoot":"","sources":["../../src/ox-input-hashtags.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, query, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\n@localized()\n@customElement('ox-input-hashtags')\nexport class OxInputHashtags extends OxFormField {\n  static styles = [InputStyles, css`\n    #editor {\n      display: flex;\n      gap: calc(var(--ox-input-gap) * 2);\n      align-items: center;\n    }\n\n    .tags {\n      display: flex;\n      gap: calc(var(--ox-input-gap) * 2);\n      align-items: center;\n    }\n\n    .tag {\n      display: flex;\n      gap: var(--ox-input-gap);\n\n      font: var(--ox-input-font);\n      cursor: pointer;\n    }\n\n    .tag:hover {\n      font-weight: bold;\n    }\n\n    .closer {\n      opacity: 0.3;\n    }\n    .tag:hover .closer {\n      opacity: 0.3;\n    }\n\n    .input {\n      display: inline-block;\n    }\n\n    .input::before {\n      display: inline;\n      position: relative;\n      opacity: 0.5;\n      top: -1px;\n      content: '#';\n      vertical-align: middle;\n    }\n\n    input {\n      vertical-align: middle;\n      -webkit-appearance: none;\n      -webkit-text-size-adjust: none;\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      outline: none;\n      font-weight: bold;\n    }\n\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-primary);\n    }\n\n    .error {\n      margin: var(--ox-input-gap);\n      color: var(--md-sys-color-error);\n      font: var(--ox-input-font);\n      text-align: left;\n    }\n  `]\n\n  @property({ type: Array }) value: string[] = []\n  @property({ type: String }) placeholder: string = 'tag'\n  @query('input') input!: HTMLInputElement\n\n  @state() errors?: string | null\n\n  render() {\n    return html`\n      <div id=\"editor\" @click=${this.setHashtags}>\n        <div class=\"tags\">\n          ${repeat(\n            this.value,\n            tag => tag,\n            (tag, index) => html`\n              <span class=\"tag\"\n                >#${tag} <span @click=${() => !this.disabled && this.removeHashtag(index)} class=\"closer\">x</span></span\n              >\n            `\n          )}\n        </div>\n\n        <div class=\"input\">\n          <input\n            type=\"text\"\n            @keyup=${this.onInputKeyup}\n            @blur=${this.onBlur}\n            placeholder=\"태그입력\"\n            ?disabled=${this.disabled}\n          />\n        </div>\n      </div>\n\n      ${when(this.errors, () => html`<p class=\"error\">${this.errors}</p>`)}\n    `\n  }\n\n  private onInputKeyup(e: KeyboardEvent) {\n    e.stopPropagation()\n\n    const tag = this.input.value.trim()\n\n    switch (e.key) {\n      case 'Enter':\n      case 'Spacebar':\n        this.addHashtag(tag)\n        break\n      default:\n        this.errors = this.validate(tag)\n    }\n  }\n\n  private onBlur() {\n    const tag = this.input.value.trim()\n    this.addHashtag(tag)\n  }\n\n  async setHashtags() {\n    this.input.focus()\n  }\n\n  initErrors() {\n    this.errors = null\n  }\n\n  validate(newtag: string) {\n    if (this.value.some(tag => tag === newtag)) {\n      return msg('tag duplicated')\n    }\n\n    const regex = /[~!@#$%^&*()+|<>?:{},.=\"':;/-]/\n    if (regex.test(newtag)) {\n      return msg('special characters not allowed')\n    }\n  }\n\n  async addHashtag(tag: string) {\n    if (!tag) {\n      this.initErrors()\n      this.input.focus()\n      return\n    }\n\n    this.errors = this.validate(tag)\n    if (this.errors) {\n      this.input.focus()\n      return\n    }\n\n    this.value = [...this.value, tag]\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n    this.errors = null\n    this.input.value = ''\n    this.input.focus()\n  }\n\n  removeHashtag(idx: number) {\n    this.value.splice(idx, 1)\n    this.value = [...this.value]\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"ox-input-hashtags.js","sourceRoot":"","sources":["../../src/ox-input-hashtags.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, query, state } from 'lit/decorators.js'\nimport { when } from 'lit/directives/when.js'\nimport { repeat } from 'lit/directives/repeat.js'\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\n@localized()\n@customElement('ox-input-hashtags')\nexport class OxInputHashtags extends OxFormField {\n  static styles = [InputStyles, css`\n    #editor {\n      display: flex;\n      gap: calc(var(--ox-input-gap) * 2);\n      align-items: center;\n    }\n\n    .tags {\n      display: flex;\n      gap: calc(var(--ox-input-gap) * 2);\n      align-items: center;\n    }\n\n    .tag {\n      display: flex;\n      gap: var(--ox-input-gap);\n\n      font: var(--ox-input-font);\n      cursor: pointer;\n    }\n\n    .tag:hover {\n      font-weight: bold;\n    }\n\n    .closer {\n      opacity: 0.3;\n    }\n    .tag:hover .closer {\n      opacity: 0.3;\n    }\n\n    .input {\n      display: inline-block;\n    }\n\n    .input::before {\n      display: inline;\n      position: relative;\n      opacity: 0.5;\n      top: -1px;\n      content: '#';\n      vertical-align: middle;\n    }\n\n    input {\n      background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n      color: var(--input-field-color, var(--md-sys-color-on-surface));\n      vertical-align: middle;\n      -webkit-appearance: none;\n      -webkit-text-size-adjust: none;\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      outline: none;\n      font-weight: bold;\n    }\n\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-primary);\n    }\n\n    .error {\n      margin: var(--ox-input-gap);\n      color: var(--md-sys-color-error);\n      font: var(--ox-input-font);\n      text-align: left;\n    }\n  `]\n\n  @property({ type: Array }) value: string[] = []\n  @property({ type: String }) placeholder: string = 'tag'\n  @query('input') input!: HTMLInputElement\n\n  @state() errors?: string | null\n\n  render() {\n    return html`\n      <div id=\"editor\" @click=${this.setHashtags}>\n        <div class=\"tags\">\n          ${repeat(\n            this.value,\n            tag => tag,\n            (tag, index) => html`\n              <span class=\"tag\"\n                >#${tag} <span @click=${() => !this.disabled && this.removeHashtag(index)} class=\"closer\">x</span></span\n              >\n            `\n          )}\n        </div>\n\n        <div class=\"input\">\n          <input\n            type=\"text\"\n            @keyup=${this.onInputKeyup}\n            @blur=${this.onBlur}\n            placeholder=\"태그입력\"\n            ?disabled=${this.disabled}\n          />\n        </div>\n      </div>\n\n      ${when(this.errors, () => html`<p class=\"error\">${this.errors}</p>`)}\n    `\n  }\n\n  private onInputKeyup(e: KeyboardEvent) {\n    e.stopPropagation()\n\n    const tag = this.input.value.trim()\n\n    switch (e.key) {\n      case 'Enter':\n      case 'Spacebar':\n        this.addHashtag(tag)\n        break\n      default:\n        this.errors = this.validate(tag)\n    }\n  }\n\n  private onBlur() {\n    const tag = this.input.value.trim()\n    this.addHashtag(tag)\n  }\n\n  async setHashtags() {\n    this.input.focus()\n  }\n\n  initErrors() {\n    this.errors = null\n  }\n\n  validate(newtag: string) {\n    if (this.value.some(tag => tag === newtag)) {\n      return msg('tag duplicated')\n    }\n\n    const regex = /[~!@#$%^&*()+|<>?:{},.=\"':;/-]/\n    if (regex.test(newtag)) {\n      return msg('special characters not allowed')\n    }\n  }\n\n  async addHashtag(tag: string) {\n    if (!tag) {\n      this.initErrors()\n      this.input.focus()\n      return\n    }\n\n    this.errors = this.validate(tag)\n    if (this.errors) {\n      this.input.focus()\n      return\n    }\n\n    this.value = [...this.value, tag]\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n\n    this.errors = null\n    this.input.value = ''\n    this.input.focus()\n  }\n\n  removeHashtag(idx: number) {\n    this.value.splice(idx, 1)\n    this.value = [...this.value]\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

package/dist/src/ox-input-i18n-label.js

@@ -51,6 +51,8 @@ let OxInputI18nLabels = class OxInputI18nLabels extends OxFormField {
     }
 
     input {
+      background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
+      color: var(--input-field-color, var(--md-sys-color-on-surface));
       flex: 1;
       border: 0;
       border-bottom: 1px solid rgba(0, 0, 0, 0.15);

package/dist/src/ox-input-i18n-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-i18n-label.js","sourceRoot":"","sources":["../../src/ox-input-i18n-label.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\ntype I18nLabel = { [code: string]: string }\n\nconst LANGUAGES = [\n  {\n    code: 'en',\n    display: 'English'\n  }\n]\n\n/**\n input component for i18n labels\n \n Example:\n \n   <ox-input-i18n-label \n     value=${map}\n     languages=${languages}\n   </ox-input-i18n-label>\n */\n@customElement('ox-input-i18n-label')\nexport class OxInputI18nLabels extends OxFormField {\n  static styles = [InputStyles, css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      gap: 10px;\n    }\n\n    [data-record] {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      gap: 10px;\n    }\n\n    label {\n      width: 80px;\n      text-align: end;\n    }\n\n    input {\n      flex: 1;\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: calc(var(--ox-input-gap) / 2);\n      font: var(--ox-input-font);\n      color: var(--md-sys-color-on-primary-container);\n      min-width: 100px;\n    }\n\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    input[type='hidden'] {\n      flex: 0;\n    }\n  `]\n\n  @property({ type: Object }) value: I18nLabel = {}\n  @property({ type: Array }) languages: { display: string; code: string }[] = LANGUAGES\n\n  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>\n\n  private changing: 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    const languages = (this.languages && this.languages.length > 0 && this.languages) || LANGUAGES\n\n    return html`\n      ${languages.map(\n        ({ display, code }) => html`\n          <div data-record>\n            <label>${display}</label>\n            <input type=\"hidden\" data-code value=${code} />\n            <input\n              type=\"text\"\n              data-label\n              placeholder=\"label\"\n              .value=${value?.[code] || ''}\n              ?disabled=${this.disabled}\n            />\n          </div>\n        `\n      )}\n    `\n  }\n\n  private onChange(e: Event) {\n    e.stopPropagation()\n\n    if (this.changing) {\n      return\n    }\n\n    this.changing = true\n\n    this.build()\n\n    this.changing = false\n  }\n\n  private build() {\n    var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n\n    var newmap: I18nLabel = {}\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      const code = (record.querySelector('[data-code]') as HTMLInputElement).value\n      const label = (record.querySelector('[data-label]') as HTMLInputElement).value\n\n      if (code) {\n        newmap[code] = label || ''\n      }\n    }\n\n    this.value = { ...this.value, ...newmap }\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}
+{"version":3,"file":"ox-input-i18n-label.js","sourceRoot":"","sources":["../../src/ox-input-i18n-label.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\ntype I18nLabel = { [code: string]: string }\n\nconst LANGUAGES = [\n  {\n    code: 'en',\n    display: 'English'\n  }\n]\n\n/**\n input component for i18n labels\n \n Example:\n \n   <ox-input-i18n-label \n     value=${map}\n     languages=${languages}\n   </ox-input-i18n-label>\n */\n@customElement('ox-input-i18n-label')\nexport class OxInputI18nLabels extends OxFormField {\n  static styles = [InputStyles, css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      gap: 10px;\n    }\n\n    [data-record] {\n      display: flex;\n      flex-direction: row;\n      align-items: center;\n      gap: 10px;\n    }\n\n    label {\n      width: 80px;\n      text-align: end;\n    }\n\n    input {\n      background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n      color: var(--input-field-color, var(--md-sys-color-on-surface));\n      flex: 1;\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: calc(var(--ox-input-gap) / 2);\n      font: var(--ox-input-font);\n      color: var(--md-sys-color-on-primary-container);\n      min-width: 100px;\n    }\n\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    input[type='hidden'] {\n      flex: 0;\n    }\n  `]\n\n  @property({ type: Object }) value: I18nLabel = {}\n  @property({ type: Array }) languages: { display: string; code: string }[] = LANGUAGES\n\n  @queryAll('[data-record]') records!: NodeListOf<HTMLElement>\n\n  private changing: 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    const languages = (this.languages && this.languages.length > 0 && this.languages) || LANGUAGES\n\n    return html`\n      ${languages.map(\n        ({ display, code }) => html`\n          <div data-record>\n            <label>${display}</label>\n            <input type=\"hidden\" data-code value=${code} />\n            <input\n              type=\"text\"\n              data-label\n              placeholder=\"label\"\n              .value=${value?.[code] || ''}\n              ?disabled=${this.disabled}\n            />\n          </div>\n        `\n      )}\n    `\n  }\n\n  private onChange(e: Event) {\n    e.stopPropagation()\n\n    if (this.changing) {\n      return\n    }\n\n    this.changing = true\n\n    this.build()\n\n    this.changing = false\n  }\n\n  private build() {\n    var records = this.renderRoot.querySelectorAll('[data-record]') as NodeListOf<HTMLElement>\n\n    var newmap: I18nLabel = {}\n\n    for (var i = 0; i < records.length; i++) {\n      var record = records[i]\n\n      const code = (record.querySelector('[data-code]') as HTMLInputElement).value\n      const label = (record.querySelector('[data-label]') as HTMLInputElement).value\n\n      if (code) {\n        newmap[code] = label || ''\n      }\n    }\n\n    this.value = { ...this.value, ...newmap }\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}

package/dist/src/ox-input-key-values.js

@@ -61,6 +61,8 @@ let OxInputKeyValues = class OxInputKeyValues extends OxFormField {
     }
 
     input {
+      background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
+      color: var(--input-field-color, var(--md-sys-color-on-surface));
       flex: 1;
       border: 0;
       border-bottom: 1px solid rgba(0, 0, 0, 0.15);

package/dist/src/ox-input-key-values.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-key-values.js","sourceRoot":"","sources":["../../src/ox-input-key-values.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\ntype KeyValues = { [key: string]: any }\ntype ArrayedKeyValues = { key: string; value: any }\n\n/**\n input component for key-value map\n \n Example:\n \n   <ox-input-key-values \n     value=${map}\n   </ox-input-key-values>\n */\n@customElement('ox-input-key-values')\nexport class OxInputKeyValues extends OxFormField {\n  static styles = [InputStyles, css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      margin-bottom: calc(var(--ox-input-gap) * 3);\n\n      --md-icon-size: 14px;\n    }\n\n    div {\n      display: flex;\n      flex-flow: row nowrap;\n      gap: calc(var(--ox-input-gap) * 2);\n      margin-bottom: var(--ox-input-gap);\n    }\n\n    button {\n      border: var(--button-border);\n      border-radius: var(--ox-input-radius);\n      background-color: var(--button-background-color);\n      padding: var(--ox-input-gap) calc(var(--ox-input-gap) * 2);\n      line-height: 0.8;\n      color: var(--button-color);\n      cursor: pointer;\n    }\n    button + button {\n      margin-left: -5px;\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(--md-sys-color-primary-container);\n    }\n\n    input {\n      flex: 1;\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: calc(var(--ox-input-gap) / 2);\n      font: var(--ox-input-font);\n      color: var(--md-sys-color-on-primary-container);\n      min-width: 50px;\n    }\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n    button.hidden {\n      opacity: 0;\n      cursor: default;\n    }\n  `]\n\n  @property({ type: Object }) value: KeyValues = {}\n  @property({ type: Array }) options: { display: string; value: string }[] = []\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    const options = this.options || []\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              <md-icon>remove</md-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              <md-icon>arrow_upward</md-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              <md-icon>arrow_downward</md-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                <md-icon>add</md-icon>\n              </button>\n              <button class=\"hidden\"><md-icon>add</md-icon></button>\n              <button class=\"hidden\"><md-icon>add</md-icon></button>\n            </div>\n          `}\n\n      <datalist id=\"value-template\">\n        ${options.map(({ display, value }) => html` <option value=\"${value}\">${display}</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\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: KeyValues = {}\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: KeyValues) {\n    var array: ArrayedKeyValues[] = []\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(\n      (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      },\n      {} as { [key: string]: string }\n    )\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(\n      (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      },\n      {} as { [key: string]: string }\n    )\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}
+{"version":3,"file":"ox-input-key-values.js","sourceRoot":"","sources":["../../src/ox-input-key-values.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\ntype KeyValues = { [key: string]: any }\ntype ArrayedKeyValues = { key: string; value: any }\n\n/**\n input component for key-value map\n \n Example:\n \n   <ox-input-key-values \n     value=${map}\n   </ox-input-key-values>\n */\n@customElement('ox-input-key-values')\nexport class OxInputKeyValues extends OxFormField {\n  static styles = [InputStyles, css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      margin-bottom: calc(var(--ox-input-gap) * 3);\n\n      --md-icon-size: 14px;\n    }\n\n    div {\n      display: flex;\n      flex-flow: row nowrap;\n      gap: calc(var(--ox-input-gap) * 2);\n      margin-bottom: var(--ox-input-gap);\n    }\n\n    button {\n      border: var(--button-border);\n      border-radius: var(--ox-input-radius);\n      background-color: var(--button-background-color);\n      padding: var(--ox-input-gap) calc(var(--ox-input-gap) * 2);\n      line-height: 0.8;\n      color: var(--button-color);\n      cursor: pointer;\n    }\n    button + button {\n      margin-left: -5px;\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(--md-sys-color-primary-container);\n    }\n\n    input {\n      background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n      color: var(--input-field-color, var(--md-sys-color-on-surface));\n      flex: 1;\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: calc(var(--ox-input-gap) / 2);\n      font: var(--ox-input-font);\n      color: var(--md-sys-color-on-primary-container);\n      min-width: 50px;\n    }\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n    button.hidden {\n      opacity: 0;\n      cursor: default;\n    }\n  `]\n\n  @property({ type: Object }) value: KeyValues = {}\n  @property({ type: Array }) options: { display: string; value: string }[] = []\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    const options = this.options || []\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              <md-icon>remove</md-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              <md-icon>arrow_upward</md-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              <md-icon>arrow_downward</md-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                <md-icon>add</md-icon>\n              </button>\n              <button class=\"hidden\"><md-icon>add</md-icon></button>\n              <button class=\"hidden\"><md-icon>add</md-icon></button>\n            </div>\n          `}\n\n      <datalist id=\"value-template\">\n        ${options.map(({ display, value }) => html` <option value=\"${value}\">${display}</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\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: KeyValues = {}\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: KeyValues) {\n    var array: ArrayedKeyValues[] = []\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(\n      (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      },\n      {} as { [key: string]: string }\n    )\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(\n      (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      },\n      {} as { [key: string]: string }\n    )\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}

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

@@ -49,6 +49,8 @@ let OxInputOptions = class OxInputOptions extends OxFormField {
     }
 
     input {
+      background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
+      color: var(--input-field-color, var(--md-sys-color-on-surface));
       flex: 1;
       min-width: 80px;
       border: 0;

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":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAKxC,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,WAAW;IAAxC;;QAuDsB,UAAK,GAAa,EAAE,CAAA;QAwCvC,iBAAY,GAAY,KAAK,CAAA;IAyGvC,CAAC;aAvMQ,WAAM,GAAG,CAAC,WAAW,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDhC,CAAC,AApDW,CAoDX;IAIF,YAAY;QACV,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAA;IACvE,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;QAE7D,OAAO,IAAI,CAAA;QACP,CAAC,OAAO,IAAI,EAAE,CAAC,CAAC,GAAG,CACnB,IAAI,CAAC,EAAE,CAAC,IAAI,CAAA;;wEAEoD,IAAI,CAAC,IAAI,cAAc,IAAI,CAAC,QAAQ;0EAClC,IAAI,CAAC,KAAK,cAAc,IAAI,CAAC,QAAQ;;;uBAGxF,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;;0BAE/B,IAAI,CAAC,QAAQ;;;;;SAK9B,CACF;QACC,IAAI,CAAC,QAAQ;YACb,CAAC,CAAC,OAAO;YACT,CAAC,CAAC,IAAI,CAAA;;;sFAGwE,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;qDAC1D,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE;;;;WAIxE;KACN,CAAA;IACH,CAAC;IAID,SAAS,CAAC,CAAQ;QAChB,IAAI,IAAI,CAAC,YAAY;YAAE,OAAM;QAE7B,IAAI,CAAC,YAAY,GAAG,IAAI,CAAA;QAExB,IAAI,KAAK,GAAG,CAAC,CAAC,MAA0B,CAAA;QACxC,IAAI,KAAK,GAAG,KAAK,CAAC,KAAK,CAAA;QAEvB,IAAI,GAAG,GAAG,KAAK,CAAC,aAAa,CAAA;QAE7B,IAAI,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;YAC/E,IAAI,QAAQ,GAAG,GAAG,CAAC,gBAAgB,CAAC,4BAA4B,CAAiC,CAAA;YAEjG,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;gBACzC,IAAI,QAAQ,CAAC,CAAC,CAAC,KAAK,KAAK,EAAE,CAAC;oBAC1B,QAAQ,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,KAAK,IAAI,EAAE,CAAA;gBACjC,CAAC;YACH,CAAC;QACH,CAAC;QAED,IAAI,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;YAC3C,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;QACnB,CAAC;aAAM,IAAI,GAAG,IAAI,GAAG,CAAC,YAAY,CAAC,iBAAiB,CAAC,IAAI,KAAK,CAAC,YAAY,CAAC,YAAY,CAAC,EAAE,CAAC;YAC1F,IAAI,CAAC,IAAI,EAAE,CAAA;QACb,CAAC;QAED,CAAC,CAAC,eAAe,EAAE,CAAA;QAEnB,IAAI,CAAC,YAAY,GAAG,KAAK,CAAA;IAC3B,CAAC;IAED,MAAM,CAAC,gBAAsB;QAC3B,IAAI,gBAAgB,EAAE,CAAC;YACrB,IAAI,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,iCAAiC,CAA4B,CAAA;QAC9G,CAAC;aAAM,CAAC;YACN,IAAI,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,eAAe,CAA4B,CAAA;QAC5F,CAAC;QAED,IAAI,UAAU,GAAa,EAAE,CAAA;QAE7B,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACxC,IAAI,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC,CAAA;YAEvB,IAAI,IAAI,GAAI,MAAM,CAAC,aAAa,CAAC,aAAa,CAAsB,CAAC,KAAK,CAAA;YAC1E,IAAI,MAAM,GAAG,MAAM,CAAC,gBAAgB,CAAC,4CAA4C,CAAiC,CAAA;YAClH,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,MAAM,IAAI,CAAC;gBAAE,SAAQ;YAE3C,IAAI,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,MAAM,GAAG,CAAC,CAAC,CAAA;YACrC,IAAI,KAAK,GAAG,KAAK,CAAC,KAAK,CAAA;YAEvB,IAAI,IAAI;gBAAE,UAAU,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,IAAI,IAAI,EAAE,CAAC,CAAA;QACjE,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,UAAU,CAAA;QACvB,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;IAED,IAAI;QACF,IAAI,MAAM,GAAG,UAAU,CAAS,EAAE,CAAS;YACzC,OAAO,CAAC,CAAC,IAAI,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QACjC,CAAC,CAAA;QAED,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAA;QAEzC,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;IAED,IAAI;QACF,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;QAEjB,IAAI,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAC3C,uDAAuD,CACxB,CAAA;QAEjC,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC;YACvC,IAAI,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YACrB,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;QAClB,CAAC;QAED,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,EAAE,CAAA;IACnB,CAAC;IAED,OAAO,CAAC,CAAQ;QACd,MAAM,MAAM,GAAI,CAAC,CAAC,MAAsB,CAAC,aAAa,CAAA;QACtD,MAAM,KAAK,GAAG,MAAM,IAAK,MAAM,CAAC,aAAa,CAAC,aAAa,CAAsB,CAAA;QAEjF,IAAI,KAAK,EAAE,CAAC;YACV,KAAK,CAAC,KAAK,GAAG,EAAE,CAAA;QAClB,CAAC;QAED,IAAI,CAAC,MAAM,EAAE,CAAA;IACf,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAM;QAEtB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QAExB,QAAQ,CAAC,MAAM,CACb,IAAI,CAAC,IAAK,EACV,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,KAAK,SAAS,IAAI,KAAK,KAAK,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CACvG,CAAA;IACH,CAAC;;AAhJ0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;6CAAqB;AAvDpC,cAAc;IAD1B,aAAa,CAAC,kBAAkB,CAAC;GACrB,cAAc,CAwM1B","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\ntype Option = { text: string; value: string }\n\n@customElement('ox-input-options')\nexport class OxInputOptions extends OxFormField {\n  static styles = [InputStyles, css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n\n      --md-icon-size: var(--fontsize-default, 14px);\n    }\n\n    div {\n      display: flex;\n      flex-flow: row nowrap;\n      gap: calc(var(--ox-input-gap) * 2);\n      margin-bottom: var(--ox-input-gap);\n    }\n\n    button {\n      border: var(--button-border);\n      border-radius: var(--ox-input-radius);\n      background-color: var(--button-background-color);\n      line-height: 0.8;\n      color: var(--button-color);\n      cursor: pointer;\n    }\n    button + button {\n      margin-left: -5px;\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(--md-sys-color-primary-container);\n    }\n\n    input {\n      flex: 1;\n      min-width: 80px;\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: calc(var(--ox-input-gap) / 2);\n      font: var(--ox-input-font);\n      color: var(--md-sys-color-on-primary-container);\n    }\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\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              <md-icon>remove</md-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                <md-icon>add</md-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"]}
+{"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/web/icon/icon.js'\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\ntype Option = { text: string; value: string }\n\n@customElement('ox-input-options')\nexport class OxInputOptions extends OxFormField {\n  static styles = [InputStyles, css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n\n      --md-icon-size: var(--fontsize-default, 14px);\n    }\n\n    div {\n      display: flex;\n      flex-flow: row nowrap;\n      gap: calc(var(--ox-input-gap) * 2);\n      margin-bottom: var(--ox-input-gap);\n    }\n\n    button {\n      border: var(--button-border);\n      border-radius: var(--ox-input-radius);\n      background-color: var(--button-background-color);\n      line-height: 0.8;\n      color: var(--button-color);\n      cursor: pointer;\n    }\n    button + button {\n      margin-left: -5px;\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(--md-sys-color-primary-container);\n    }\n\n    input {\n      background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n      color: var(--input-field-color, var(--md-sys-color-on-surface));\n      flex: 1;\n      min-width: 80px;\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: calc(var(--ox-input-gap) / 2);\n      font: var(--ox-input-font);\n      color: var(--md-sys-color-on-primary-container);\n    }\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\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              <md-icon>remove</md-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                <md-icon>add</md-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

@@ -61,6 +61,8 @@ let OxInputPartitionKeys = class OxInputPartitionKeys extends OxFormField {
     }
 
     input {
+      background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
+      color: var(--input-field-color, var(--md-sys-color-on-surface));
       flex: 1;
       border: 0;
       border-bottom: 1px solid rgba(0, 0, 0, 0.15);

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/web/icon/icon.js'\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\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 = [InputStyles, css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      margin-bottom: calc(var(--ox-input-gap) * 3);\n\n      --md-icon-size: var(--fontsize-default, 14px);\n    }\n\n    div {\n      display: flex;\n      flex-flow: row nowrap;\n      gap: calc(var(--ox-input-gap) * 2);\n      margin-bottom: var(--ox-input-gap);\n    }\n\n    button {\n      border: var(--button-border);\n      border-radius: var(--ox-input-radius);\n      background-color: var(--button-background-color);\n      padding: var(--ox-input-gap) calc(var(--ox-input-gap) * 2);\n      line-height: 0.8;\n      color: var(--button-color);\n      cursor: pointer;\n    }\n    button + button {\n      margin-left: -5px;\n    }\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(--md-sys-color-primary-container);\n    }\n\n    input {\n      flex: 1;\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: calc(var(--ox-input-gap) / 2);\n      font: var(--ox-input-font);\n      color: var(--md-sys-color-on-primary-container);\n    }\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\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              <md-icon>remove</md-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              <md-icon>arrow_upward</md-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              <md-icon>arrow_downward</md-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                <md-icon>add</md-icon>\n              </button>\n              <button class=\"hidden\"><md-icon>add</md-icon></button>\n              <button class=\"hidden\"><md-icon>add</md-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(\n      (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      },\n      {} as { [key: string]: string }\n    )\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(\n      (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      },\n      {} as { [key: string]: string }\n    )\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/web/icon/icon.js'\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property, queryAll } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\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 = [InputStyles, css`\n    :host {\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n      margin-bottom: calc(var(--ox-input-gap) * 3);\n\n      --md-icon-size: var(--fontsize-default, 14px);\n    }\n\n    div {\n      display: flex;\n      flex-flow: row nowrap;\n      gap: calc(var(--ox-input-gap) * 2);\n      margin-bottom: var(--ox-input-gap);\n    }\n\n    button {\n      border: var(--button-border);\n      border-radius: var(--ox-input-radius);\n      background-color: var(--button-background-color);\n      padding: var(--ox-input-gap) calc(var(--ox-input-gap) * 2);\n      line-height: 0.8;\n      color: var(--button-color);\n      cursor: pointer;\n    }\n    button + button {\n      margin-left: -5px;\n    }\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(--md-sys-color-primary-container);\n    }\n\n    input {\n      background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n      color: var(--input-field-color, var(--md-sys-color-on-surface));\n      flex: 1;\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: calc(var(--ox-input-gap) / 2);\n      font: var(--ox-input-font);\n      color: var(--md-sys-color-on-primary-container);\n    }\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\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              <md-icon>remove</md-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              <md-icon>arrow_upward</md-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              <md-icon>arrow_downward</md-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                <md-icon>add</md-icon>\n              </button>\n              <button class=\"hidden\"><md-icon>add</md-icon></button>\n              <button class=\"hidden\"><md-icon>add</md-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(\n      (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      },\n      {} as { [key: string]: string }\n    )\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(\n      (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      },\n      {} as { [key: string]: string }\n    )\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}

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

@@ -34,6 +34,8 @@ let OxInputPrivilege = class OxInputPrivilege extends OxFormField {
     }
 
     select {
+      background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
+      color: var(--input-field-color, var(--md-sys-color-on-surface));
       border: 0;
       border-bottom: 1px solid rgba(0, 0, 0, 0.15);
       padding: calc(var(--ox-input-gap) / 2);
@@ -75,6 +77,12 @@ let OxInputPrivilege = class OxInputPrivilege extends OxFormField {
       color: var(--md-sys-color-on-primary-container);
       text-align: right;
     }
+    /* 체크박스·라디오는 제외 — 표면색을 주면 컨트롤 모양이 깨진다 */
+    input:not([type='checkbox']):not([type='radio']) {
+      background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
+      color: var(--input-field-color, var(--md-sys-color-on-surface));
+    }
+
 
     input:focus {
       outline: none;

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 { 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.js'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-input-privilege')\nexport class OxInputPrivilege extends OxFormField {\n  static styles = [InputStyles, 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    select {\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: calc(var(--ox-input-gap) / 2);\n      font: var(--ox-input-font);\n      color: var(--md-sys-color-on-primary-container);\n\n      max-height: 35px;\n    }\n\n    select:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\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: 1px solid rgba(0, 0, 0, 0.15);\n      padding: calc(var(--ox-input-gap) / 2);\n      padding-right: 0;\n      max-width: 70px;\n      font: var(--ox-input-font);\n      color: var(--md-sys-color-on-primary-container);\n      text-align: right;\n    }\n\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    label {\n      margin-right: calc(var(--ox-input-gap) * 2);\n      font: normal 0.8em var(--ox-input-font-family);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  `]\n\n  @property({ type: Object }) value?: {\n    category: string\n    privilege: string\n    owner?: boolean\n    super?: boolean\n  } | null = 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)} ?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 ?disabled=${this.disabled} />\n\n          <label for=\"super\" col1>${i18next.t('label.superuser')}</label>\n          <input id=\"super\" type=\"checkbox\" name=\"super\" ?checked=${superUser} col2 ?disabled=${this.disabled} />\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 { 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.js'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-input-privilege')\nexport class OxInputPrivilege extends OxFormField {\n  static styles = [InputStyles, 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    select {\n      background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n      color: var(--input-field-color, var(--md-sys-color-on-surface));\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: calc(var(--ox-input-gap) / 2);\n      font: var(--ox-input-font);\n      color: var(--md-sys-color-on-primary-container);\n\n      max-height: 35px;\n    }\n\n    select:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\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: 1px solid rgba(0, 0, 0, 0.15);\n      padding: calc(var(--ox-input-gap) / 2);\n      padding-right: 0;\n      max-width: 70px;\n      font: var(--ox-input-font);\n      color: var(--md-sys-color-on-primary-container);\n      text-align: right;\n    }\n    /* 체크박스·라디오는 제외 — 표면색을 주면 컨트롤 모양이 깨진다 */\n    input:not([type='checkbox']):not([type='radio']) {\n      background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n      color: var(--input-field-color, var(--md-sys-color-on-surface));\n    }\n\n\n    input:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    label {\n      margin-right: calc(var(--ox-input-gap) * 2);\n      font: normal 0.8em var(--ox-input-font-family);\n      color: var(--md-sys-color-on-primary-container);\n    }\n  `]\n\n  @property({ type: Object }) value?: {\n    category: string\n    privilege: string\n    owner?: boolean\n    super?: boolean\n  } | null = 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)} ?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 ?disabled=${this.disabled} />\n\n          <label for=\"super\" col1>${i18next.t('label.superuser')}</label>\n          <input id=\"super\" type=\"checkbox\" name=\"super\" ?checked=${superUser} col2 ?disabled=${this.disabled} />\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-range.js

@@ -51,8 +51,8 @@ let OxInputRange = class OxInputRange extends OxFormField {
     input[type='range']::-webkit-slider-runnable-track {
       width: 100%;
       height: 7px;
-      background-color: rgba(0, 0, 0, 0.02);
-      border: 1px solid rgba(0, 0, 0, 0.05);
+      background-color: var(--ox-input-range-track-color, var(--md-sys-color-surface-container-highest));
+      border: 1px solid var(--md-sys-color-outline-variant);
       border-radius: var(--ox-input-radius);
     }
     input[type='range']::-webkit-slider-thumb {
@@ -61,7 +61,7 @@ let OxInputRange = class OxInputRange extends OxFormField {
       height: 16px;
       width: 16px;
       border-radius: 50%;
-      background: var(--md-sys-color-on-primary-container);
+      background: var(--ox-input-range-thumb-color, var(--md-sys-color-primary));
       margin-top: -6px;
       box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);
     }
@@ -72,8 +72,8 @@ let OxInputRange = class OxInputRange extends OxFormField {
     input[type='range']::-moz-range-track {
       width: 100%;
       height: 7px;
-      background-color: rgba(0, 0, 0, 0.02);
-      border: 1px solid rgba(0, 0, 0, 0.05);
+      background-color: var(--ox-input-range-track-color, var(--md-sys-color-surface-container-highest));
+      border: 1px solid var(--md-sys-color-outline-variant);
       border-radius: var(--ox-input-radius);
     }
     input[type='range']::-moz-range-thumb {
@@ -81,7 +81,7 @@ let OxInputRange = class OxInputRange extends OxFormField {
       height: 16px;
       width: 16px;
       border-radius: 50%;
-      background: var(--md-sys-color-on-primary-container);
+      background: var(--ox-input-range-thumb-color, var(--md-sys-color-primary));
       margin-top: -6px;
       box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);
     }
@@ -94,8 +94,8 @@ let OxInputRange = class OxInputRange extends OxFormField {
     input[type='range']::-ms-track {
       width: 100%;
       height: 7px;
-      background-color: rgba(0, 0, 0, 0.02);
-      border: 1px solid rgba(0, 0, 0, 0.05);
+      background-color: var(--ox-input-range-track-color, var(--md-sys-color-surface-container-highest));
+      border: 1px solid var(--md-sys-color-outline-variant);
       border-radius: var(--ox-input-radius);
     }
     input[type='range']::-ms-thumb {
@@ -103,7 +103,7 @@ let OxInputRange = class OxInputRange extends OxFormField {
       height: 16px;
       width: 16px;
       border-radius: 50%;
-      background: var(--md-sys-color-on-primary-container);
+      background: var(--ox-input-range-thumb-color, var(--md-sys-color-primary));
       margin-top: -6px;
       box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.15);
     }

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;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAG/C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAAtC;;QAqG8B,UAAK,GAAW,CAAC,CAAA;QACjB,SAAI,GAAW,CAAC,CAAA;QAChB,QAAG,GAAW,CAAC,GAAG,CAAA;QAClB,QAAG,GAAW,GAAG,CAAA;IAiC/C,CAAC;aAxIQ,WAAM,GAAG,CAAC,WAAW,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkGhC,CAAC,AAlGW,CAkGX;IAOF,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;AAxGzC,YAAY;IADjB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,YAAY,CAyIjB","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'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-input-range')\nclass OxInputRange extends OxFormField {\n  static styles = [InputStyles, css`\n    :host {\n      display: flex;\n      gap: calc(var(--ox-input-gap) * 2);\n      align-items: center;\n\n      width: 100%;\n      user-select: text;\n    }\n\n    input[type='number'] {\n      width: 48px;\n      height: 100%;\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: calc(var(--ox-input-gap) / 2);\n      font: var(--ox-input-font);\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    input[type='number']:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\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: var(--ox-input-radius);\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(--md-sys-color-on-primary-container);\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: var(--ox-input-radius);\n    }\n    input[type='range']::-moz-range-thumb {\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--md-sys-color-on-primary-container);\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: var(--ox-input-radius);\n    }\n    input[type='range']::-ms-thumb {\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--md-sys-color-on-primary-container);\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"]}
+{"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;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAG/C,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAAtC;;QAqG8B,UAAK,GAAW,CAAC,CAAA;QACjB,SAAI,GAAW,CAAC,CAAA;QAChB,QAAG,GAAW,CAAC,GAAG,CAAA;QAClB,QAAG,GAAW,GAAG,CAAA;IAiC/C,CAAC;aAxIQ,WAAM,GAAG,CAAC,WAAW,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkGhC,CAAC,AAlGW,CAkGX;IAOF,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;AAxGzC,YAAY;IADjB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,YAAY,CAyIjB","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'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-input-range')\nclass OxInputRange extends OxFormField {\n  static styles = [InputStyles, css`\n    :host {\n      display: flex;\n      gap: calc(var(--ox-input-gap) * 2);\n      align-items: center;\n\n      width: 100%;\n      user-select: text;\n    }\n\n    input[type='number'] {\n      width: 48px;\n      height: 100%;\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: calc(var(--ox-input-gap) / 2);\n      font: var(--ox-input-font);\n      color: var(--md-sys-color-on-primary-container);\n    }\n\n    input[type='number']:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\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: var(--ox-input-range-track-color, var(--md-sys-color-surface-container-highest));\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: var(--ox-input-radius);\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(--ox-input-range-thumb-color, var(--md-sys-color-primary));\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: var(--ox-input-range-track-color, var(--md-sys-color-surface-container-highest));\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: var(--ox-input-radius);\n    }\n    input[type='range']::-moz-range-thumb {\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--ox-input-range-thumb-color, var(--md-sys-color-primary));\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: var(--ox-input-range-track-color, var(--md-sys-color-surface-container-highest));\n      border: 1px solid var(--md-sys-color-outline-variant);\n      border-radius: var(--ox-input-radius);\n    }\n    input[type='range']::-ms-thumb {\n      border: none;\n      height: 16px;\n      width: 16px;\n      border-radius: 50%;\n      background: var(--ox-input-range-thumb-color, var(--md-sys-color-primary));\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

@@ -19,6 +19,8 @@ let OxInputId = class OxInputId extends OxFormField {
     }
 
     input {
+      background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));
+      color: var(--input-field-color, var(--md-sys-color-on-surface));
       width: 100%;
       height: 100%;
       box-sizing: border-box;

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,oBAAoB,CAAA;AAGzC,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.js'\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"]}
+{"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,oBAAoB,CAAA;AAGzC,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,WAAW;IAAnC;;QAqBI,SAAI,GAAkB,EAAE,CAAA;IA2CnC,CAAC;aA/DQ,WAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;GAgBlB,AAhBY,CAgBZ;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;AArBtB,SAAS;IADrB,aAAa,CAAC,6BAA6B,CAAC;GAChC,SAAS,CAgErB","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.js'\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      background-color: var(--input-field-background, var(--md-sys-color-surface-container-highest));\n      color: var(--input-field-color, var(--md-sys-color-on-surface));\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"]}