@operato/input 10.16.2 → 10.23.0

package/dist/src/ox-input-fill-style.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-fill-style.js","sourceRoot":"","sources":["../../src/ox-input-fill-style.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport './ox-input-color.js'\nimport './ox-input-color-stops.js'\nimport './ox-input-color-gradient.js'\nimport './ox-input-background-pattern.js'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { ColorStop } from './ox-input-color-stops.js'\nimport { GradientOption, OxInputColorGradient } from './ox-input-color-gradient.js'\nimport { BackgroundPatternOption, OxInputBackgroundPattern } from './ox-input-background-pattern.js'\n\nexport type FillStyle =\n  | {\n      type?: 'no' | 'solid' | 'gradient' | 'pattern'\n      gradientType?: 'linear' | 'radial'\n      colorStops?: ColorStop[]\n      rotation?: number\n      center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom'\n      image?: HTMLImageElement | string\n      offsetX?: number\n      offsetY?: number\n      width?: number\n      height?: number\n      align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'\n      fitPattern?: boolean\n      noRepeat?: boolean\n      guideOnly?: boolean\n      color?: string\n    }\n  | 'no'\n  | string\n\n@customElement('ox-input-fill-style')\nexport class OxInputColorStyle extends OxFormField {\n  static styles = [\n    PropertyGridStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n      }\n\n      [fill-type] {\n        display: flex;\n        margin: 0 0 14px 0;\n      }\n\n      [fill-type] * {\n        flex: auto;\n        margin: 0;\n        text-align: left;\n        align-self: center;\n      }\n\n      [editors] > :not([active]) {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: FillStyle = undefined\n  @property({ type: String }) fillType?: string\n  @property({ type: String }) solid?: string\n  @property({ type: Object }) gradient?: GradientOption\n  @property({ type: Object }) pattern?: BackgroundPatternOption\n\n  @property({ type: Boolean, attribute: 'color-only' }) colorOnly: boolean = false\n\n  private _block_reset: boolean = false\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('value') && this._onChangedValue(this.value || {})\n  }\n\n  render() {\n    return html`\n      <div @change=${(e: Event) => this._onChangedFillType(e)} fill-type>\n        <input\n          type=\"radio\"\n          id=\"fill-type-no\"\n          name=\"fill-type\"\n          value=\"no\"\n          .checked=${!this.fillType || this.fillType == 'no'}\n        />\n        <label for=\"fill-type-no\"><ox-i18n msgid=\"label.no-fill\">no fill</ox-i18n></label>\n        <input type=\"radio\" id=\"fill-type-solid\" name=\"fill-type\" value=\"solid\" .checked=${this.fillType == 'solid'} />\n        <label for=\"fill-type-solid\"><ox-i18n msgid=\"label.solid\">solid</ox-i18n></label>\n        <input\n          type=\"radio\"\n          id=\"fill-type-gradient\"\n          name=\"fill-type\"\n          value=\"gradient\"\n          .checked=${this.fillType == 'gradient'}\n        />\n\n        <label for=\"fill-type-gradient\"><ox-i18n msgid=\"label.gradient\">gradient</ox-i18n></label>\n\n        ${this.colorOnly\n          ? html``\n          : html`\n              <input\n                type=\"radio\"\n                id=\"fill-type-pattern\"\n                name=\"fill-type\"\n                value=\"pattern\"\n                .checked=${this.fillType == 'pattern'}\n              />\n              <label for=\"fill-type-pattern\"><ox-i18n msgid=\"label.pattern\">pattern</ox-i18n></label>\n            `}\n      </div>\n\n      <div editors>\n        <div ?active=${this.fillType == 'no'}></div>\n\n        <div class=\"property-grid\" ?active=${this.fillType == 'solid'}>\n          <label><md-icon>format_color_fill</md-icon></label>\n          <ox-input-color class=\"custom-editor\" @change=${(e: Event) => this._onChangedSolid(e)} .value=${this.solid}>\n          </ox-input-color>\n        </div>\n\n        <ox-input-color-gradient\n          ?active=${this.fillType == 'gradient'}\n          @change=${(e: Event) => this._onChandedGradient(e)}\n          .value=${this.gradient!}\n        >\n        </ox-input-color-gradient>\n\n        <ox-input-background-pattern\n          ?active=${this.fillType == 'pattern'}\n          @change=${(e: Event) => this._onChangedPattern(e)}\n          .value=${this.pattern}\n        >\n        </ox-input-background-pattern>\n      </div>\n    `\n  }\n\n  async _onChangedValue(value: FillStyle) {\n    /*\n     * this._block_reset의 역할은 내부 사용자 인터렉션에 의한 value의 변경시에는 각 type별 이전값을 유지하기 위함이다.\n     */\n    await this.requestUpdate()\n\n    /* 설정 값에 따라서, 멤버 속성을 설정한다. */\n    if (!value) {\n      this.fillType = 'no'\n\n      if (!this._block_reset) {\n        this.solid = undefined\n        this.gradient = undefined\n        this.pattern = undefined\n      }\n\n      this._block_reset = false\n      return\n    }\n\n    switch (typeof value) {\n      case 'string':\n        this.fillType = 'solid'\n        this.solid = value\n\n        if (!this._block_reset) {\n          this.gradient = undefined\n          this.pattern = undefined\n        }\n        break\n      case 'object':\n        this.fillType = value.type\n\n        if (value.type === 'gradient') {\n          this.gradient = {\n            type: value.gradientType || 'linear',\n            colorStops: value.colorStops || [\n              {\n                position: 0,\n                color: this.solid || '#000000'\n              },\n              {\n                position: 1,\n                color: this.solid || '#FFFFFF'\n              }\n            ],\n            rotation: Number(value.rotation) || 0,\n            center: value.center\n          }\n\n          if (!this._block_reset) {\n            this.pattern = undefined\n            this.solid = undefined\n          }\n        } else if (value.type === 'pattern') {\n          this.pattern = {\n            image: value.image,\n            offsetX: Number(value.offsetX) || 0,\n            offsetY: Number(value.offsetY) || 0,\n            width: Number(value.width),\n            height: Number(value.height),\n            align: value.align,\n            fitPattern: value.fitPattern,\n            noRepeat: value.noRepeat,\n            guideOnly: value.guideOnly,\n            color: value.color\n          }\n\n          if (!this._block_reset) {\n            this.gradient = undefined\n            this.solid = undefined\n          }\n        }\n\n        break\n      default:\n    }\n\n    this._block_reset = false\n  }\n\n  _onChangedFillType(e: Event) {\n    const element = e.target as HTMLInputElement\n    this.fillType = element.value\n\n    switch (this.fillType) {\n      case 'gradient':\n        if (!this.gradient) {\n          this.gradient = {\n            type: 'linear',\n            colorStops: [\n              {\n                position: 0,\n                color: this.solid || '#000000'\n              },\n              {\n                position: 1,\n                color: this.solid || '#FFFFFF'\n              }\n            ],\n            rotation: 0,\n            center: 'center'\n          }\n        }\n\n        this.value = {\n          type: 'gradient',\n          gradientType: this.gradient.type || 'linear',\n          colorStops: this.gradient.colorStops || [\n            {\n              position: 0,\n              color: this.solid || '#000000'\n            },\n            {\n              position: 1,\n              color: this.solid || '#FFFFFF'\n            }\n          ],\n          rotation: Number(this.gradient.rotation) || 0,\n          center: this.gradient.center\n        }\n        break\n\n      case 'pattern':\n        if (!this.pattern) this.pattern = {}\n\n        this.value = {\n          type: 'pattern',\n          image: this.pattern.image,\n          offsetX: Number(this.pattern.offsetX) || 0,\n          offsetY: Number(this.pattern.offsetY) || 0,\n          width: Number(this.pattern.width),\n          height: Number(this.pattern.height),\n          align: this.pattern.align,\n          fitPattern: this.pattern.fitPattern,\n          noRepeat: this.pattern.noRepeat,\n          guideOnly: this.pattern.guideOnly,\n          color: this.pattern.color\n        }\n        break\n\n      case 'solid':\n        if (!this.solid) this.solid = '#fff'\n        this.value = this.solid\n        break\n\n      case 'no':\n        this.value = ''\n        break\n    }\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onChangedSolid(e: Event) {\n    if (this.fillType !== 'solid') return\n\n    this.solid = (e.target as HTMLInputElement).value\n\n    this.value = this.solid\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onChandedGradient(e: Event) {\n    /*\n     * TODO Gradient의 rotation은 symmetry 기능 등으로 외부에서 변경될 수도 있다.\n     * 이 점을 감안해서, 외부 변경에 대한 대응을 해야 한다.\n     */\n\n    if (this.fillType !== 'gradient') {\n      return\n    }\n\n    this.gradient = (e.target as OxInputColorGradient).value\n\n    this.value = {\n      type: 'gradient',\n      gradientType: this.gradient.type || 'linear',\n      colorStops: this.gradient.colorStops || [\n        {\n          position: 0,\n          color: this.solid || '#000000'\n        },\n        {\n          position: 1,\n          color: this.solid || '#FFFFFF'\n        }\n      ],\n      rotation: Number(this.gradient.rotation) || 0,\n      center: this.gradient.center\n    }\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onChangedPattern(e: Event) {\n    if (this.fillType !== 'pattern') return\n\n    this.pattern = (e.target as OxInputBackgroundPattern).value\n\n    this.value = {\n      type: 'pattern',\n      image: this.pattern?.image,\n      offsetX: Number(this.pattern?.offsetX) || 0,\n      offsetY: Number(this.pattern?.offsetY) || 0,\n      width: Number(this.pattern?.width),\n      height: Number(this.pattern?.height),\n      align: this.pattern?.align,\n      fitPattern: this.pattern?.fitPattern,\n      noRepeat: this.pattern?.noRepeat,\n      guideOnly: this.pattern?.guideOnly,\n      color: this.pattern?.color\n    }\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}
+{"version":3,"file":"ox-input-fill-style.js","sourceRoot":"","sources":["../../src/ox-input-fill-style.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/i18n/ox-i18n.js'\nimport './ox-input-color.js'\nimport './ox-input-color-stops.js'\nimport './ox-input-color-gradient.js'\nimport './ox-input-background-pattern.js'\n\nimport { css, html, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { PropertyGridStyles } from '@operato/styles/property-grid-styles.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { ColorStop } from './ox-input-color-stops.js'\nimport { GradientOption, OxInputColorGradient } from './ox-input-color-gradient.js'\nimport { BackgroundPatternOption, OxInputBackgroundPattern } from './ox-input-background-pattern.js'\n\nexport type FillStyle =\n  | {\n      type?: 'no' | 'solid' | 'gradient' | 'pattern'\n      gradientType?: 'linear' | 'radial'\n      colorStops?: ColorStop[]\n      rotation?: number\n      center?: 'center' | 'left-top' | 'right-top' | 'right-bottom' | 'left-bottom'\n      image?: HTMLImageElement | string\n      offsetX?: number\n      offsetY?: number\n      width?: number\n      height?: number\n      align?: 'left-top' | 'top' | 'right-top' | 'left' | 'center' | 'right' | 'left-bottom' | 'bottom' | 'right-bottom'\n      fitPattern?: boolean\n      noRepeat?: boolean\n      guideOnly?: boolean\n      color?: string\n    }\n  | 'no'\n  | string\n\n@customElement('ox-input-fill-style')\nexport class OxInputColorStyle extends OxFormField {\n  static styles = [\n    PropertyGridStyles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n      }\n\n      /* Fill type as a segmented control: the radios are kept for the form, their labels are the segments. */\n      [fill-type] {\n        display: flex;\n        align-items: stretch;\n        gap: 2px;\n        padding: 0;\n        margin: 0 0 8px 0;\n        min-height: 24px;\n      }\n\n      [fill-type] input[type='radio'] {\n        position: absolute;\n        opacity: 0;\n        width: 0;\n        height: 0;\n        margin: 0;\n        pointer-events: none;\n      }\n\n      [fill-type] label {\n        flex: 1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border-radius: 4px;\n        font-size: 0.74rem;\n        text-transform: capitalize;\n        color: var(--md-sys-color-on-surface-variant);\n        cursor: pointer;\n        user-select: none;\n      }\n\n      [fill-type] label:hover {\n        color: var(--md-sys-color-on-surface);\n        background-color: var(--md-sys-color-surface-container-high);\n      }\n\n      [fill-type] input[type='radio']:checked + label {\n        color: var(--md-sys-color-on-secondary-container);\n        background-color: var(--md-sys-color-secondary-container);\n      }\n\n      [editors] > :not([active]) {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Object }) value?: FillStyle = undefined\n  @property({ type: String }) fillType?: string\n  @property({ type: String }) solid?: string\n  @property({ type: Object }) gradient?: GradientOption\n  @property({ type: Object }) pattern?: BackgroundPatternOption\n\n  @property({ type: Boolean, attribute: 'color-only' }) colorOnly: boolean = false\n\n  private _block_reset: boolean = false\n\n  updated(changes: PropertyValues<this>) {\n    changes.has('value') && this._onChangedValue(this.value || {})\n  }\n\n  render() {\n    return html`\n      <div @change=${(e: Event) => this._onChangedFillType(e)} fill-type>\n        <input\n          type=\"radio\"\n          id=\"fill-type-no\"\n          name=\"fill-type\"\n          value=\"no\"\n          .checked=${!this.fillType || this.fillType == 'no'}\n        />\n        <label for=\"fill-type-no\"><ox-i18n msgid=\"label.no-fill\">no fill</ox-i18n></label>\n        <input type=\"radio\" id=\"fill-type-solid\" name=\"fill-type\" value=\"solid\" .checked=${this.fillType == 'solid'} />\n        <label for=\"fill-type-solid\"><ox-i18n msgid=\"label.solid\">solid</ox-i18n></label>\n        <input\n          type=\"radio\"\n          id=\"fill-type-gradient\"\n          name=\"fill-type\"\n          value=\"gradient\"\n          .checked=${this.fillType == 'gradient'}\n        />\n\n        <label for=\"fill-type-gradient\"><ox-i18n msgid=\"label.gradient\">gradient</ox-i18n></label>\n\n        ${this.colorOnly\n          ? html``\n          : html`\n              <input\n                type=\"radio\"\n                id=\"fill-type-pattern\"\n                name=\"fill-type\"\n                value=\"pattern\"\n                .checked=${this.fillType == 'pattern'}\n              />\n              <label for=\"fill-type-pattern\"><ox-i18n msgid=\"label.pattern\">pattern</ox-i18n></label>\n            `}\n      </div>\n\n      <div editors>\n        <div ?active=${this.fillType == 'no'}></div>\n\n        <div class=\"property-grid\" ?active=${this.fillType == 'solid'}>\n          <label><ox-i18n msgid=\"label.color\">Color</ox-i18n></label>\n          <ox-input-color class=\"custom-editor\" @change=${(e: Event) => this._onChangedSolid(e)} .value=${this.solid}>\n          </ox-input-color>\n        </div>\n\n        <ox-input-color-gradient\n          ?active=${this.fillType == 'gradient'}\n          @change=${(e: Event) => this._onChandedGradient(e)}\n          .value=${this.gradient!}\n        >\n        </ox-input-color-gradient>\n\n        <ox-input-background-pattern\n          ?active=${this.fillType == 'pattern'}\n          @change=${(e: Event) => this._onChangedPattern(e)}\n          .value=${this.pattern}\n        >\n        </ox-input-background-pattern>\n      </div>\n    `\n  }\n\n  async _onChangedValue(value: FillStyle) {\n    /*\n     * this._block_reset의 역할은 내부 사용자 인터렉션에 의한 value의 변경시에는 각 type별 이전값을 유지하기 위함이다.\n     */\n    await this.requestUpdate()\n\n    /* 설정 값에 따라서, 멤버 속성을 설정한다. */\n    if (!value) {\n      this.fillType = 'no'\n\n      if (!this._block_reset) {\n        this.solid = undefined\n        this.gradient = undefined\n        this.pattern = undefined\n      }\n\n      this._block_reset = false\n      return\n    }\n\n    switch (typeof value) {\n      case 'string':\n        this.fillType = 'solid'\n        this.solid = value\n\n        if (!this._block_reset) {\n          this.gradient = undefined\n          this.pattern = undefined\n        }\n        break\n      case 'object':\n        this.fillType = value.type\n\n        if (value.type === 'gradient') {\n          this.gradient = {\n            type: value.gradientType || 'linear',\n            colorStops: value.colorStops || [\n              {\n                position: 0,\n                color: this.solid || '#000000'\n              },\n              {\n                position: 1,\n                color: this.solid || '#FFFFFF'\n              }\n            ],\n            rotation: Number(value.rotation) || 0,\n            center: value.center\n          }\n\n          if (!this._block_reset) {\n            this.pattern = undefined\n            this.solid = undefined\n          }\n        } else if (value.type === 'pattern') {\n          this.pattern = {\n            image: value.image,\n            offsetX: Number(value.offsetX) || 0,\n            offsetY: Number(value.offsetY) || 0,\n            width: Number(value.width),\n            height: Number(value.height),\n            align: value.align,\n            fitPattern: value.fitPattern,\n            noRepeat: value.noRepeat,\n            guideOnly: value.guideOnly,\n            color: value.color\n          }\n\n          if (!this._block_reset) {\n            this.gradient = undefined\n            this.solid = undefined\n          }\n        }\n\n        break\n      default:\n    }\n\n    this._block_reset = false\n  }\n\n  _onChangedFillType(e: Event) {\n    const element = e.target as HTMLInputElement\n    this.fillType = element.value\n\n    switch (this.fillType) {\n      case 'gradient':\n        if (!this.gradient) {\n          this.gradient = {\n            type: 'linear',\n            colorStops: [\n              {\n                position: 0,\n                color: this.solid || '#000000'\n              },\n              {\n                position: 1,\n                color: this.solid || '#FFFFFF'\n              }\n            ],\n            rotation: 0,\n            center: 'center'\n          }\n        }\n\n        this.value = {\n          type: 'gradient',\n          gradientType: this.gradient.type || 'linear',\n          colorStops: this.gradient.colorStops || [\n            {\n              position: 0,\n              color: this.solid || '#000000'\n            },\n            {\n              position: 1,\n              color: this.solid || '#FFFFFF'\n            }\n          ],\n          rotation: Number(this.gradient.rotation) || 0,\n          center: this.gradient.center\n        }\n        break\n\n      case 'pattern':\n        if (!this.pattern) this.pattern = {}\n\n        this.value = {\n          type: 'pattern',\n          image: this.pattern.image,\n          offsetX: Number(this.pattern.offsetX) || 0,\n          offsetY: Number(this.pattern.offsetY) || 0,\n          width: Number(this.pattern.width),\n          height: Number(this.pattern.height),\n          align: this.pattern.align,\n          fitPattern: this.pattern.fitPattern,\n          noRepeat: this.pattern.noRepeat,\n          guideOnly: this.pattern.guideOnly,\n          color: this.pattern.color\n        }\n        break\n\n      case 'solid':\n        if (!this.solid) this.solid = '#fff'\n        this.value = this.solid\n        break\n\n      case 'no':\n        this.value = ''\n        break\n    }\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onChangedSolid(e: Event) {\n    if (this.fillType !== 'solid') return\n\n    this.solid = (e.target as HTMLInputElement).value\n\n    this.value = this.solid\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onChandedGradient(e: Event) {\n    /*\n     * TODO Gradient의 rotation은 symmetry 기능 등으로 외부에서 변경될 수도 있다.\n     * 이 점을 감안해서, 외부 변경에 대한 대응을 해야 한다.\n     */\n\n    if (this.fillType !== 'gradient') {\n      return\n    }\n\n    this.gradient = (e.target as OxInputColorGradient).value\n\n    this.value = {\n      type: 'gradient',\n      gradientType: this.gradient.type || 'linear',\n      colorStops: this.gradient.colorStops || [\n        {\n          position: 0,\n          color: this.solid || '#000000'\n        },\n        {\n          position: 1,\n          color: this.solid || '#FFFFFF'\n        }\n      ],\n      rotation: Number(this.gradient.rotation) || 0,\n      center: this.gradient.center\n    }\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _onChangedPattern(e: Event) {\n    if (this.fillType !== 'pattern') return\n\n    this.pattern = (e.target as OxInputBackgroundPattern).value\n\n    this.value = {\n      type: 'pattern',\n      image: this.pattern?.image,\n      offsetX: Number(this.pattern?.offsetX) || 0,\n      offsetY: Number(this.pattern?.offsetY) || 0,\n      width: Number(this.pattern?.width),\n      height: Number(this.pattern?.height),\n      align: this.pattern?.align,\n      fitPattern: this.pattern?.fitPattern,\n      noRepeat: this.pattern?.noRepeat,\n      guideOnly: this.pattern?.guideOnly,\n      color: this.pattern?.color\n    }\n\n    this._block_reset = true\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n}\n"]}

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

@@ -25,18 +25,32 @@ let OxInputRange = class OxInputRange extends OxFormField {
     }
 
     input[type='number'] {
-      width: 48px;
-      height: 100%;
-      border: 0;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-      padding: calc(var(--ox-input-gap) / 2);
+      box-sizing: border-box;
+      width: 52px;
+      min-height: 24px;
+      padding: 2px 6px;
+      border: 1px solid transparent;
+      border-radius: 6px;
+      background-color: var(--property-input-background, var(--md-sys-color-surface-container-high));
       font: var(--ox-input-font);
-      color: var(--md-sys-color-on-primary-container);
+      font-size: 0.76rem;
+      font-variant-numeric: tabular-nums;
+      color: var(--md-sys-color-on-surface);
+      text-align: right;
+    }
+
+    input[type='number']::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    input[type='number']:hover {
+      border-color: var(--md-sys-color-outline-variant);
     }
 
     input[type='number']:focus {
       outline: none;
-      border-bottom: 1px solid var(--md-sys-color-on-primary-container);
+      border-color: var(--md-sys-color-primary);
     }
 
     input[type='range'] {
@@ -48,22 +62,24 @@ let OxInputRange = class OxInputRange extends OxFormField {
       height: 16px;
       background-color: transparent;
     }
+    /* A thin track and a small thumb: the slider is a control, not a bar chart. */
     input[type='range']::-webkit-slider-runnable-track {
       width: 100%;
-      height: 7px;
-      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);
+      height: 3px;
+      background-color: var(--ox-input-range-track-color, var(--md-sys-color-outline-variant));
+      border: 0;
+      border-radius: 2px;
     }
     input[type='range']::-webkit-slider-thumb {
       -webkit-appearance: none;
-      border: none;
-      height: 16px;
-      width: 16px;
+      height: 12px;
+      width: 12px;
       border-radius: 50%;
+      border: 2px solid var(--ox-input-range-thumb-ring, var(--md-sys-color-surface));
+      box-sizing: border-box;
       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);
+      margin-top: -4.5px;
+      box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant);
     }
     input[type='range']:focus {
       outline: none;
@@ -71,19 +87,19 @@ let OxInputRange = class OxInputRange extends OxFormField {
 
     input[type='range']::-moz-range-track {
       width: 100%;
-      height: 7px;
-      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);
+      height: 3px;
+      background-color: var(--ox-input-range-track-color, var(--md-sys-color-outline-variant));
+      border: 0;
+      border-radius: 2px;
     }
     input[type='range']::-moz-range-thumb {
-      border: none;
-      height: 16px;
-      width: 16px;
+      height: 12px;
+      width: 12px;
       border-radius: 50%;
+      border: 2px solid var(--ox-input-range-thumb-ring, var(--md-sys-color-surface));
+      box-sizing: border-box;
       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);
+      box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant);
     }
 
     input[type='range']:-moz-focusring {

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: 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"]}
+{"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;;QAqH8B,UAAK,GAAW,CAAC,CAAA;QACjB,SAAI,GAAW,CAAC,CAAA;QAChB,QAAG,GAAW,CAAC,GAAG,CAAA;QAClB,QAAG,GAAW,GAAG,CAAA;IAiC/C,CAAC;aAxJQ,WAAM,GAAG,CAAC,WAAW,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkHhC,CAAC,AAlHW,CAkHX;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;AAxHzC,YAAY;IADjB,aAAa,CAAC,gBAAgB,CAAC;GAC1B,YAAY,CAyJjB","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      box-sizing: border-box;\n      width: 52px;\n      min-height: 24px;\n      padding: 2px 6px;\n      border: 1px solid transparent;\n      border-radius: 6px;\n      background-color: var(--property-input-background, var(--md-sys-color-surface-container-high));\n      font: var(--ox-input-font);\n      font-size: 0.76rem;\n      font-variant-numeric: tabular-nums;\n      color: var(--md-sys-color-on-surface);\n      text-align: right;\n    }\n\n    input[type='number']::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    input[type='number']:hover {\n      border-color: var(--md-sys-color-outline-variant);\n    }\n\n    input[type='number']:focus {\n      outline: none;\n      border-color: var(--md-sys-color-primary);\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    /* A thin track and a small thumb: the slider is a control, not a bar chart. */\n    input[type='range']::-webkit-slider-runnable-track {\n      width: 100%;\n      height: 3px;\n      background-color: var(--ox-input-range-track-color, var(--md-sys-color-outline-variant));\n      border: 0;\n      border-radius: 2px;\n    }\n    input[type='range']::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      height: 12px;\n      width: 12px;\n      border-radius: 50%;\n      border: 2px solid var(--ox-input-range-thumb-ring, var(--md-sys-color-surface));\n      box-sizing: border-box;\n      background: var(--ox-input-range-thumb-color, var(--md-sys-color-primary));\n      margin-top: -4.5px;\n      box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant);\n    }\n    input[type='range']:focus {\n      outline: none;\n    }\n\n    input[type='range']::-moz-range-track {\n      width: 100%;\n      height: 3px;\n      background-color: var(--ox-input-range-track-color, var(--md-sys-color-outline-variant));\n      border: 0;\n      border-radius: 2px;\n    }\n    input[type='range']::-moz-range-thumb {\n      height: 12px;\n      width: 12px;\n      border-radius: 50%;\n      border: 2px solid var(--ox-input-range-thumb-ring, var(--md-sys-color-surface));\n      box-sizing: border-box;\n      background: var(--ox-input-range-thumb-color, var(--md-sys-color-primary));\n      box-shadow: 0 0 0 1px var(--md-sys-color-outline-variant);\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-select-buttons.js

@@ -33,6 +33,10 @@ let OxInputSelectButtons = class OxInputSelectButtons extends OxFormField {
        * md 칩을 갈아치우지 않고 그 토큰으로만 조정한다. 이 컴포넌트를 쓰는 화면이 많고, 자기 것으로
        * 다시 만들면 그 화면들이 두 모양으로 갈린다.
        */
+      md-filter-chip {
+        text-transform: capitalize;
+      }
+
       :host {
         display: flex;
         flex-flow: row;
@@ -57,14 +61,15 @@ let OxInputSelectButtons = class OxInputSelectButtons extends OxFormField {
         --md-filter-chip-hover-state-layer-opacity: 0.06;
 
         /* 켜진 상태 — 채워서 확실히 다르게. 켜졌는지 아닌지가 헷갈리면 필터는 쓸모가 없다. */
-        --md-filter-chip-selected-container-color: var(--md-sys-color-primary);
-        --md-filter-chip-selected-label-text-color: var(--md-sys-color-on-primary);
+        /* A pressed filter is a state, not a call to action: the soft container, not the accent fill. */
+        --md-filter-chip-selected-container-color: var(--md-sys-color-secondary-container);
+        --md-filter-chip-selected-label-text-color: var(--md-sys-color-on-secondary-container);
         --md-filter-chip-selected-outline-width: 0px;
-        --md-filter-chip-selected-focus-label-text-color: var(--md-sys-color-on-primary);
-        --md-filter-chip-selected-hover-label-text-color: var(--md-sys-color-on-primary);
-        --md-filter-chip-selected-pressed-label-text-color: var(--md-sys-color-on-primary);
-        --md-filter-chip-selected-leading-icon-color: var(--md-sys-color-on-primary);
-        --md-filter-chip-selected-hover-leading-icon-color: var(--md-sys-color-on-primary);
+        --md-filter-chip-selected-focus-label-text-color: var(--md-sys-color-on-secondary-container);
+        --md-filter-chip-selected-hover-label-text-color: var(--md-sys-color-on-secondary-container);
+        --md-filter-chip-selected-pressed-label-text-color: var(--md-sys-color-on-secondary-container);
+        --md-filter-chip-selected-leading-icon-color: var(--md-sys-color-on-secondary-container);
+        --md-filter-chip-selected-hover-leading-icon-color: var(--md-sys-color-on-secondary-container);
       }
     `
     ]; }

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-select-buttons.js","sourceRoot":"","sources":["../../src/ox-input-select-buttons.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/chips/filter-chip.js'\nimport '@material/web/chips/chip-set.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { FORM_ELEMENT_HEIGHT_PLATFORM_EXCEPTIONS, suiteFormElementHeight } from '@operato/styles/form-element-heights.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\nimport { MdFilterChip } from '@material/web/chips/filter-chip.js'\n\ntype Option = {\n  display: string\n  value: string\n  /**\n   * 마우스를 올렸을 때 보이는 뜻.\n   *\n   * 칩의 이름은 짧아야 하는데, 이름만으로는 무엇이 걸러지는지 알 수 없는 것이 있다 — 「중요」가\n   * 우선순위 몇 이상인지, 「만기」가 몇 시간 안인지. 그 값을 화면이 말하지 않으면 사용자는 눌러 보고\n   * 결과를 되짚어야 한다.\n   */\n  hint?: string\n}\n\n@customElement('ox-input-select-buttons')\nexport class OxInputSelectButtons extends OxFormField {\n  static styles = [\n    InputStyles,\n    css`\n      /*\n       * 필터는 **목록보다 조용해야 한다.**\n       *\n       * 확인해 보니 칩 글자가 16px 이었고 목록 본문은 14px 이었다. 걸러진 것이 하나도 없는 상태에서도 이\n       * 줄이 화면에서 가장 크고 진했다. 테두리 색도 본문 글자와 같은 검정이라, 네 개가 나란히 서면\n       * 그 선들이 제일 먼저 눈에 걸렸다.\n       *\n       * 그래서 꺼져 있을 때는 물러나고 켜져 있을 때만 나선다. 지금 무엇으로 걸렀는지가 이 줄에서\n       * 바로 읽혀야 한다 — 목록이 짧아진 이유를 화면이 말해야 한다.\n       *\n       * md 칩을 갈아치우지 않고 그 토큰으로만 조정한다. 이 컴포넌트를 쓰는 화면이 많고, 자기 것으로\n       * 다시 만들면 그 화면들이 두 모양으로 갈린다.\n       */\n      :host {\n        display: flex;\n        flex-flow: row;\n        flex-wrap: wrap;\n        gap: 6px;\n\n        /* Size: 26px on the platform, the small input height in the operato products. */\n        --md-filter-chip-container-height: ${suiteFormElementHeight('--form-element-height-small', FORM_ELEMENT_HEIGHT_PLATFORM_EXCEPTIONS.selectButtonsChip)};\n        --md-filter-chip-label-text-size: 12.5px;\n        --md-filter-chip-label-text-weight: 560;\n        --md-filter-chip-container-shape: calc(${suiteFormElementHeight('--form-element-height-small', FORM_ELEMENT_HEIGHT_PLATFORM_EXCEPTIONS.selectButtonsChip)} / 2);\n        --md-filter-chip-leading-space: 11px;\n        --md-filter-chip-trailing-space: 11px;\n        --md-filter-chip-with-leading-icon-leading-space: 8px;\n        --md-filter-chip-icon-size: 15px;\n\n        /* 꺼진 상태 — 선은 흐리게, 글자는 보조 글자 색으로. */\n        --md-filter-chip-outline-color: var(--md-sys-color-outline-variant);\n        --md-filter-chip-outline-width: 1px;\n        --md-filter-chip-label-text-color: var(--md-sys-color-on-surface-variant);\n        --md-filter-chip-hover-label-text-color: var(--md-sys-color-on-surface);\n        --md-filter-chip-hover-state-layer-opacity: 0.06;\n\n        /* 켜진 상태 — 채워서 확실히 다르게. 켜졌는지 아닌지가 헷갈리면 필터는 쓸모가 없다. */\n        --md-filter-chip-selected-container-color: var(--md-sys-color-primary);\n        --md-filter-chip-selected-label-text-color: var(--md-sys-color-on-primary);\n        --md-filter-chip-selected-outline-width: 0px;\n        --md-filter-chip-selected-focus-label-text-color: var(--md-sys-color-on-primary);\n        --md-filter-chip-selected-hover-label-text-color: var(--md-sys-color-on-primary);\n        --md-filter-chip-selected-pressed-label-text-color: var(--md-sys-color-on-primary);\n        --md-filter-chip-selected-leading-icon-color: var(--md-sys-color-on-primary);\n        --md-filter-chip-selected-hover-leading-icon-color: var(--md-sys-color-on-primary);\n      }\n    `\n  ]\n\n  @property({ type: Array }) value: string[] | string | undefined = []\n  @property({ type: Array }) options: Option[] = []\n  @property({ type: Boolean }) multiple: boolean = false\n\n  render() {\n    const options = this.options.filter(option => !!option.value)\n    const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n    return html`\n      <md-chip-set>\n        ${(options || []).map(\n          ({ display, value, hint }) => html`\n            <md-filter-chip\n              data-value=${value}\n              label=${display}\n              title=${ifDefined(hint)}\n              ?selected=${values.includes(value)}\n              @click=${(e: MouseEvent | TouchEvent) => !this.disabled && this.onClick(e)}\n            ></md-filter-chip>\n          `\n        )}\n      </md-chip-set>\n    `\n  }\n\n  onClick(e: MouseEvent | TouchEvent) {\n    e.stopPropagation()\n\n    const target = e.target as MdFilterChip\n    const value = target.getAttribute('data-value') as string\n\n    if (this.multiple) {\n      const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n      const idx = (this.value || []).indexOf(value)\n      if (idx != -1) {\n        values.splice(idx, 1)\n      } else {\n        values.push(value)\n      }\n      this.value = [...values]\n    } else {\n      this.value = this.value === value ? undefined : value\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}
+{"version":3,"file":"ox-input-select-buttons.js","sourceRoot":"","sources":["../../src/ox-input-select-buttons.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/chips/filter-chip.js'\nimport '@material/web/chips/chip-set.js'\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\n\nimport { FORM_ELEMENT_HEIGHT_PLATFORM_EXCEPTIONS, suiteFormElementHeight } from '@operato/styles/form-element-heights.js'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\nimport { MdFilterChip } from '@material/web/chips/filter-chip.js'\n\ntype Option = {\n  display: string\n  value: string\n  /**\n   * 마우스를 올렸을 때 보이는 뜻.\n   *\n   * 칩의 이름은 짧아야 하는데, 이름만으로는 무엇이 걸러지는지 알 수 없는 것이 있다 — 「중요」가\n   * 우선순위 몇 이상인지, 「만기」가 몇 시간 안인지. 그 값을 화면이 말하지 않으면 사용자는 눌러 보고\n   * 결과를 되짚어야 한다.\n   */\n  hint?: string\n}\n\n@customElement('ox-input-select-buttons')\nexport class OxInputSelectButtons extends OxFormField {\n  static styles = [\n    InputStyles,\n    css`\n      /*\n       * 필터는 **목록보다 조용해야 한다.**\n       *\n       * 확인해 보니 칩 글자가 16px 이었고 목록 본문은 14px 이었다. 걸러진 것이 하나도 없는 상태에서도 이\n       * 줄이 화면에서 가장 크고 진했다. 테두리 색도 본문 글자와 같은 검정이라, 네 개가 나란히 서면\n       * 그 선들이 제일 먼저 눈에 걸렸다.\n       *\n       * 그래서 꺼져 있을 때는 물러나고 켜져 있을 때만 나선다. 지금 무엇으로 걸렀는지가 이 줄에서\n       * 바로 읽혀야 한다 — 목록이 짧아진 이유를 화면이 말해야 한다.\n       *\n       * md 칩을 갈아치우지 않고 그 토큰으로만 조정한다. 이 컴포넌트를 쓰는 화면이 많고, 자기 것으로\n       * 다시 만들면 그 화면들이 두 모양으로 갈린다.\n       */\n      md-filter-chip {\n        text-transform: capitalize;\n      }\n\n      :host {\n        display: flex;\n        flex-flow: row;\n        flex-wrap: wrap;\n        gap: 6px;\n\n        /* Size: 26px on the platform, the small input height in the operato products. */\n        --md-filter-chip-container-height: ${suiteFormElementHeight('--form-element-height-small', FORM_ELEMENT_HEIGHT_PLATFORM_EXCEPTIONS.selectButtonsChip)};\n        --md-filter-chip-label-text-size: 12.5px;\n        --md-filter-chip-label-text-weight: 560;\n        --md-filter-chip-container-shape: calc(${suiteFormElementHeight('--form-element-height-small', FORM_ELEMENT_HEIGHT_PLATFORM_EXCEPTIONS.selectButtonsChip)} / 2);\n        --md-filter-chip-leading-space: 11px;\n        --md-filter-chip-trailing-space: 11px;\n        --md-filter-chip-with-leading-icon-leading-space: 8px;\n        --md-filter-chip-icon-size: 15px;\n\n        /* 꺼진 상태 — 선은 흐리게, 글자는 보조 글자 색으로. */\n        --md-filter-chip-outline-color: var(--md-sys-color-outline-variant);\n        --md-filter-chip-outline-width: 1px;\n        --md-filter-chip-label-text-color: var(--md-sys-color-on-surface-variant);\n        --md-filter-chip-hover-label-text-color: var(--md-sys-color-on-surface);\n        --md-filter-chip-hover-state-layer-opacity: 0.06;\n\n        /* 켜진 상태 — 채워서 확실히 다르게. 켜졌는지 아닌지가 헷갈리면 필터는 쓸모가 없다. */\n        /* A pressed filter is a state, not a call to action: the soft container, not the accent fill. */\n        --md-filter-chip-selected-container-color: var(--md-sys-color-secondary-container);\n        --md-filter-chip-selected-label-text-color: var(--md-sys-color-on-secondary-container);\n        --md-filter-chip-selected-outline-width: 0px;\n        --md-filter-chip-selected-focus-label-text-color: var(--md-sys-color-on-secondary-container);\n        --md-filter-chip-selected-hover-label-text-color: var(--md-sys-color-on-secondary-container);\n        --md-filter-chip-selected-pressed-label-text-color: var(--md-sys-color-on-secondary-container);\n        --md-filter-chip-selected-leading-icon-color: var(--md-sys-color-on-secondary-container);\n        --md-filter-chip-selected-hover-leading-icon-color: var(--md-sys-color-on-secondary-container);\n      }\n    `\n  ]\n\n  @property({ type: Array }) value: string[] | string | undefined = []\n  @property({ type: Array }) options: Option[] = []\n  @property({ type: Boolean }) multiple: boolean = false\n\n  render() {\n    const options = this.options.filter(option => !!option.value)\n    const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n    return html`\n      <md-chip-set>\n        ${(options || []).map(\n          ({ display, value, hint }) => html`\n            <md-filter-chip\n              data-value=${value}\n              label=${display}\n              title=${ifDefined(hint)}\n              ?selected=${values.includes(value)}\n              @click=${(e: MouseEvent | TouchEvent) => !this.disabled && this.onClick(e)}\n            ></md-filter-chip>\n          `\n        )}\n      </md-chip-set>\n    `\n  }\n\n  onClick(e: MouseEvent | TouchEvent) {\n    e.stopPropagation()\n\n    const target = e.target as MdFilterChip\n    const value = target.getAttribute('data-value') as string\n\n    if (this.multiple) {\n      const values = this.value instanceof Array ? this.value : typeof this.value == 'string' ? [this.value] : []\n\n      const idx = (this.value || []).indexOf(value)\n      if (idx != -1) {\n        values.splice(idx, 1)\n      } else {\n        values.push(value)\n      }\n      this.value = [...values]\n    } else {\n      this.value = this.value === value ? undefined : value\n    }\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n  }\n}\n"]}

package/dist/src/ox-input-work-shift.js

@@ -50,7 +50,7 @@ let OxInputWorkShift = class OxInputWorkShift extends OxFormField {
       flex: 1;
     }
     [data-header] {
-      background-color: rgba(var(--md-sys-color-on-primary-container-rgb), 0.05);
+      background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 5%, transparent);
       padding: var(--ox-input-gap);
     }
     [data-header] span {

package/dist/src/ox-input-work-shift.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-work-shift.js","sourceRoot":"","sources":["../../src/ox-input-work-shift.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\ntype WorkShift = { name: string; fromDate: number; fromTime: string; toDate: number; toTime: string }\n\n/**\nwork-shift array value editor element\n\nExample:\n\n  <ox-input-work-shift\n    .value=${value}\n  </ox-input-work-shift>\n*/\n\n@localized()\n@customElement('ox-input-work-shift')\nexport class OxInputWorkShift extends OxFormField {\n  static styles = [InputStyles, css`\n    :host {\n      display: flex;\n      flex-direction: column;\n\n      width: 100%;\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    }\n\n    empty-element {\n      width: 34px;\n      text-align: center;\n    }\n\n    input,\n    select,\n    span {\n      flex: 1;\n    }\n    [data-header] {\n      background-color: rgba(var(--md-sys-color-on-primary-container-rgb), 0.05);\n      padding: var(--ox-input-gap);\n    }\n    [data-header] span {\n      font: var(--label-font);\n      color: var(--label-color, var(--md-sys-color-on-surface));\n      text-transform: var(--label-text-transform);\n      text-align: center;\n    }\n    [data-record] {\n      margin-bottom: var(--ox-input-gap);\n    }\n    input,\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    input:focus,\n    select:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    input:required:invalid {\n      border: 1px dashed red;\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: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    [placeholder='value'] {\n      flex: 2;\n    }\n  `]\n\n  @property({ type: Array }) value: WorkShift[] = []\n\n  private _changingNow: boolean = false\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  render() {\n    const workshifts = this.value || []\n\n    return html`\n      <div data-header>\n        <span>${msg('name')}</span>\n        <span>${msg('from date')}</span>\n        <span>${msg('from time')}</span>\n        <span>${msg('to date')}</span>\n        <span>${msg('to time')}</span>\n        <empty-element></empty-element>\n      </div>\n\n      ${workshifts.map(\n        item => html`\n          <div data-record>\n            <input type=\"text\" data-name .value=${item.name} required ?disabled=${this.disabled} />\n\n            <select data-from-date .value=${String(item.fromDate || 0)} ?disabled=${this.disabled}>\n              <option value=\"-1\">${msg('The day before')}</option>\n              <option value=\"0\">${msg('The day')}</option>\n              <option value=\"1\">${msg('The day after')}</option>\n            </select>\n            <input type=\"time\" data-from-time .value=${item.fromTime} step=\"1800\" required ?disabled=${this.disabled} />\n\n            <select data-to-date .value=${String(item.toDate || 0)} ?disabled=${this.disabled}>\n              <option value=\"-1\">${msg('The day before')}</option>\n              <option value=\"0\">${msg('The day')}</option>\n              <option value=\"1\">${msg('The day after')}</option>\n            </select>\n            <input type=\"time\" data-to-time .value=${item.toTime} step=\"1800\" required ?disabled=${this.disabled} />\n\n            <button\n              class=\"record-action\"\n              @click=${(e: Event) => 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-name />\n\n              <select data-from-date>\n                <option value=\"-1\">${msg('The day before')}</option>\n                <option value=\"0\" selected>${msg('The day')}</option>\n                <option value=\"+1\">${msg('The day after')}</option>\n              </select>\n              <input type=\"time\" data-from-time step=\"1800\" />\n\n              <select data-to-date>\n                <option value=\"-1\">${msg('The day before')}</option>\n                <option value=\"0\" selected>${msg('The day')}</option>\n                <option value=\"+1\">${msg('The day after')}</option>\n              </select>\n              <input type=\"time\" data-to-time step=\"1800\" />\n\n              <button class=\"record-action\" @click=${(e: Event) => this._add()} tabindex=\"-1\">\n                <md-icon>add</md-icon>\n              </button>\n            </div>\n          `}\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 div = input.parentElement as HTMLDivElement\n\n    if (div.hasAttribute('data-record')) {\n      this._build()\n    } else if (div.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]')\n    } else {\n      var records = this.renderRoot.querySelectorAll('[data-record]')\n    }\n\n    var value: WorkShift[] = []\n    for (var i = 0; i < records.length; i++) {\n      const record = records[i]\n\n      const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n\n      const fromDate = (record.querySelector('[data-from-date]') as HTMLSelectElement).value\n      const fromTime = (record.querySelector('[data-from-time]') as HTMLInputElement).value\n      const toDate = (record.querySelector('[data-to-date]') as HTMLSelectElement).value\n      const toTime = (record.querySelector('[data-to-time]') as HTMLInputElement).value\n\n      if (!name) {\n        ;(record.querySelector('[data-name]') as HTMLInputElement).focus()\n        return\n      }\n\n      if (!fromDate) {\n        ;(record.querySelector('[data-from-date]') as HTMLInputElement).focus()\n        return\n      }\n\n      if (!fromTime) {\n        ;(record.querySelector('[data-from-time]') as HTMLInputElement).focus()\n        return\n      }\n\n      if (!toDate) {\n        ;(record.querySelector('[data-to-date]') as HTMLInputElement).focus()\n        return\n      }\n\n      if (!toTime) {\n        ;(record.querySelector('[data-to-time]') as HTMLInputElement).focus()\n        return\n      }\n\n      if (name) {\n        value.push({\n          name,\n          fromDate: Number(fromDate),\n          fromTime,\n          toDate: Number(toDate),\n          toTime\n        })\n      }\n    }\n\n    this.value = value\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\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; type: string }>\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 Element).parentElement\n\n    const dataName = record!.querySelector('[data-name]') as HTMLInputElement\n    dataName.name = ''\n\n    this._build()\n  }\n}\n"]}
+{"version":3,"file":"ox-input-work-shift.js","sourceRoot":"","sources":["../../src/ox-input-work-shift.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { localized, msg } from '@lit/localize'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\ntype WorkShift = { name: string; fromDate: number; fromTime: string; toDate: number; toTime: string }\n\n/**\nwork-shift array value editor element\n\nExample:\n\n  <ox-input-work-shift\n    .value=${value}\n  </ox-input-work-shift>\n*/\n\n@localized()\n@customElement('ox-input-work-shift')\nexport class OxInputWorkShift extends OxFormField {\n  static styles = [InputStyles, css`\n    :host {\n      display: flex;\n      flex-direction: column;\n\n      width: 100%;\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    }\n\n    empty-element {\n      width: 34px;\n      text-align: center;\n    }\n\n    input,\n    select,\n    span {\n      flex: 1;\n    }\n    [data-header] {\n      background-color: color-mix(in srgb, var(--md-sys-color-on-primary-container) 5%, transparent);\n      padding: var(--ox-input-gap);\n    }\n    [data-header] span {\n      font: var(--label-font);\n      color: var(--label-color, var(--md-sys-color-on-surface));\n      text-transform: var(--label-text-transform);\n      text-align: center;\n    }\n    [data-record] {\n      margin-bottom: var(--ox-input-gap);\n    }\n    input,\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    input:focus,\n    select:focus {\n      outline: none;\n      border-bottom: 1px solid var(--md-sys-color-on-primary-container);\n    }\n\n    input:required:invalid {\n      border: 1px dashed red;\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: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    [placeholder='value'] {\n      flex: 2;\n    }\n  `]\n\n  @property({ type: Array }) value: WorkShift[] = []\n\n  private _changingNow: boolean = false\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('change', this._onChange.bind(this))\n  }\n\n  render() {\n    const workshifts = this.value || []\n\n    return html`\n      <div data-header>\n        <span>${msg('name')}</span>\n        <span>${msg('from date')}</span>\n        <span>${msg('from time')}</span>\n        <span>${msg('to date')}</span>\n        <span>${msg('to time')}</span>\n        <empty-element></empty-element>\n      </div>\n\n      ${workshifts.map(\n        item => html`\n          <div data-record>\n            <input type=\"text\" data-name .value=${item.name} required ?disabled=${this.disabled} />\n\n            <select data-from-date .value=${String(item.fromDate || 0)} ?disabled=${this.disabled}>\n              <option value=\"-1\">${msg('The day before')}</option>\n              <option value=\"0\">${msg('The day')}</option>\n              <option value=\"1\">${msg('The day after')}</option>\n            </select>\n            <input type=\"time\" data-from-time .value=${item.fromTime} step=\"1800\" required ?disabled=${this.disabled} />\n\n            <select data-to-date .value=${String(item.toDate || 0)} ?disabled=${this.disabled}>\n              <option value=\"-1\">${msg('The day before')}</option>\n              <option value=\"0\">${msg('The day')}</option>\n              <option value=\"1\">${msg('The day after')}</option>\n            </select>\n            <input type=\"time\" data-to-time .value=${item.toTime} step=\"1800\" required ?disabled=${this.disabled} />\n\n            <button\n              class=\"record-action\"\n              @click=${(e: Event) => 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-name />\n\n              <select data-from-date>\n                <option value=\"-1\">${msg('The day before')}</option>\n                <option value=\"0\" selected>${msg('The day')}</option>\n                <option value=\"+1\">${msg('The day after')}</option>\n              </select>\n              <input type=\"time\" data-from-time step=\"1800\" />\n\n              <select data-to-date>\n                <option value=\"-1\">${msg('The day before')}</option>\n                <option value=\"0\" selected>${msg('The day')}</option>\n                <option value=\"+1\">${msg('The day after')}</option>\n              </select>\n              <input type=\"time\" data-to-time step=\"1800\" />\n\n              <button class=\"record-action\" @click=${(e: Event) => this._add()} tabindex=\"-1\">\n                <md-icon>add</md-icon>\n              </button>\n            </div>\n          `}\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 div = input.parentElement as HTMLDivElement\n\n    if (div.hasAttribute('data-record')) {\n      this._build()\n    } else if (div.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]')\n    } else {\n      var records = this.renderRoot.querySelectorAll('[data-record]')\n    }\n\n    var value: WorkShift[] = []\n    for (var i = 0; i < records.length; i++) {\n      const record = records[i]\n\n      const name = (record.querySelector('[data-name]') as HTMLInputElement).value\n\n      const fromDate = (record.querySelector('[data-from-date]') as HTMLSelectElement).value\n      const fromTime = (record.querySelector('[data-from-time]') as HTMLInputElement).value\n      const toDate = (record.querySelector('[data-to-date]') as HTMLSelectElement).value\n      const toTime = (record.querySelector('[data-to-time]') as HTMLInputElement).value\n\n      if (!name) {\n        ;(record.querySelector('[data-name]') as HTMLInputElement).focus()\n        return\n      }\n\n      if (!fromDate) {\n        ;(record.querySelector('[data-from-date]') as HTMLInputElement).focus()\n        return\n      }\n\n      if (!fromTime) {\n        ;(record.querySelector('[data-from-time]') as HTMLInputElement).focus()\n        return\n      }\n\n      if (!toDate) {\n        ;(record.querySelector('[data-to-date]') as HTMLInputElement).focus()\n        return\n      }\n\n      if (!toTime) {\n        ;(record.querySelector('[data-to-time]') as HTMLInputElement).focus()\n        return\n      }\n\n      if (name) {\n        value.push({\n          name,\n          fromDate: Number(fromDate),\n          fromTime,\n          toDate: Number(toDate),\n          toTime\n        })\n      }\n    }\n\n    this.value = value\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\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; type: string }>\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 Element).parentElement\n\n    const dataName = record!.querySelector('[data-name]') as HTMLInputElement\n    dataName.name = ''\n\n    this._build()\n  }\n}\n"]}