@operato/input 10.0.0 → 10.1.0

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

@@ -8,8 +8,10 @@ import { customElement, query } from 'lit/decorators.js';
 import { ScrollbarStyles } from '@operato/styles';
 import { FileDropHelper } from '@operato/utils';
 import { OxFormField } from './ox-form-field.js';
+import { InputStyles } from './input-styles.js';
 let OxInputVideo = class OxInputVideo extends OxFormField {
     static { this.styles = [
+        InputStyles,
         ScrollbarStyles,
         css `
       :host {
@@ -19,8 +21,8 @@ let OxInputVideo = class OxInputVideo extends OxFormField {
         display: flex;
         flex-direction: column;
         place-content: center;
-        border-radius: var(--border-radius);
-        padding: var(--padding-default, 9px);
+        border-radius: var(--ox-input-radius);
+        padding: calc(var(--ox-input-gap) * 2);
         min-height: 150px;
         text-transform: capitalize;
 

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-video.js","sourceRoot":"","sources":["../../src/ox-input-video.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;aACpC,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkFF;KACF,AArFY,CAqFZ;IAID,MAAM;QACJ,IAAI,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;QACtB,IAAI,GAAuB,CAAA;QAE3B,IAAI,KAAK,EAAE,CAAC;YACV,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;gBAC9B,GAAG,GAAG,KAAK,CAAA;YACb,CAAC;iBAAM,CAAC;gBACN,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,KAAK,CAAC,CAAA;gBAChC,qBAAqB,CAAC,GAAG,EAAE,CAAC,GAAG,CAAC,eAAe,CAAC,GAAI,CAAC,CAAC,CAAA;YACxD,CAAC;QACH,CAAC;QAED,OAAO,IAAI,CAAA;QACP,GAAG;YACH,CAAC,CAAC,IAAI,CAAA;yBACW,GAAG;WACjB;YACH,CAAC,CAAC,IAAI,CAAA;;;;;WAKH;;;;;;;;;;sBAUW,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;wBAClC,IAAI,CAAC,QAAQ;;;;;KAKhC,CAAA;IACH,CAAC;IAED,YAAY;QACV,cAAc,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QAExB,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,CAAQ,EAAE,EAAE;YAC9C,MAAM,MAAM,GAAI,CAAiB,CAAC,MAAM,CAAA;YACxC,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,CAAC,CAAC,CAAA;YAEtB,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,IAAI,IAAI;QACN,OAAO,IAAI,CAAC,KAAK,CAAA;IACnB,CAAC;IAED,KAAK;QACH,IAAI,CAAC,SAAS,CAAC,KAAK,GAAG,EAAE,CAAA;QACzB,IAAI,CAAC,KAAK,GAAG,SAAS,CAAA;QAEtB,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,MAAM,SAAS,GAAG,CAAC,CAAC,aAAiC,CAAA;QAErD,IAAI,CAAC,KAAK,GAAG,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAiB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAE5D,SAAS,CAAC,KAAK,GAAG,IAAI,CAAA;QAEtB,IAAI,CAAC,aAAa,EAAE,CAAA;IACtB,CAAC;IAED,aAAa;QACX,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;;AApFqB;IAArB,KAAK,CAAC,aAAa,CAAC;+CAA6B;AAxFvC,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA6KxB","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, query } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { FileDropHelper } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-input-video')\nexport class OxInputVideo extends OxFormField {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        position: relative;\n        box-sizing: border-box;\n\n        display: flex;\n        flex-direction: column;\n        place-content: center;\n        border-radius: var(--border-radius);\n        padding: var(--padding-default, 9px);\n        min-height: 150px;\n        text-transform: capitalize;\n\n        border: var(--file-uploader-border);\n        background-color: var(--md-sys-color-background);\n        font: var(--file-uploader-font) !important;\n        color: var(--file-uploader-color);\n\n        overflow: hidden;\n      }\n\n      :host(.candrop) {\n        background-color: var(--file-uploader-candrop-background-color);\n      }\n\n      video {\n        min-height: 100%;\n        max-width: 100%;\n        margin: auto;\n      }\n\n      .placeholder {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        width: 100%;\n        height: 100%;\n        min-height: 150px;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      .placeholder md-icon {\n        --md-icon-size: 48px;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      [overlay] {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0%;\n        background-color: var(--md-sys-color-surface);\n\n        display: flex;\n        place-content: center;\n      }\n\n      [overlay]:hover {\n        opacity: 50%;\n      }\n\n      #input-file {\n        display: none;\n      }\n\n      label {\n        border: none;\n        flex: 1;\n        display: flex;\n        place-content: center;\n      }\n\n      md-icon {\n        align-self: center;\n\n        color: var(--file-uploader-icon-color, black);\n        --md-icon-size: var(--file-uploader-icon-size, 36px);\n      }\n    `\n  ]\n\n  @query('#input-file') fileInput!: HTMLInputElement\n\n  render() {\n    var value = this.value\n    var src: string | undefined\n\n    if (value) {\n      if (typeof value === 'string') {\n        src = value\n      } else {\n        src = URL.createObjectURL(value)\n        requestAnimationFrame(() => URL.revokeObjectURL(src!))\n      }\n    }\n\n    return html`\n      ${src\n        ? html`\n            <video src=${src} controls style=\"max-width: 100%;\">Your browser does not support the video tag.</video>\n          `\n        : html`\n            <div class=\"placeholder\">\n              <md-icon>videocam</md-icon>\n              <span>No video selected</span>\n            </div>\n          `}\n\n      <div overlay>\n        <label>\n          <input\n            id=\"input-file\"\n            type=\"file\"\n            accept=\"video/*\"\n            hidden\n            capture=\"environment\"\n            @change=${(e: Event) => this._onChangeValue(e)}\n            ?disabled=${this.disabled}\n          />\n          <md-icon>upload</md-icon>\n        </label>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    FileDropHelper.set(this)\n\n    this.addEventListener('file-drop', (e: Event) => {\n      const detail = (e as CustomEvent).detail\n      this.value = detail[0]\n\n      this._notifyChange()\n    })\n  }\n\n  get file() {\n    return this.value\n  }\n\n  reset() {\n    this.fileInput.value = ''\n    this.value = undefined\n\n    this._notifyChange()\n  }\n\n  _onChangeValue(e: Event) {\n    const fileInput = e.currentTarget as HTMLInputElement\n\n    this.value = [...Array.from(fileInput.files as FileList)][0]\n\n    fileInput.files = null\n\n    this._notifyChange()\n  }\n\n  _notifyChange() {\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-video.js","sourceRoot":"","sources":["../../src/ox-input-video.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, query } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { FileDropHelper } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-input-video')\nexport class OxInputVideo extends OxFormField {\n  static styles = [\n    InputStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        position: relative;\n        box-sizing: border-box;\n\n        display: flex;\n        flex-direction: column;\n        place-content: center;\n        border-radius: var(--ox-input-radius);\n        padding: calc(var(--ox-input-gap) * 2);\n        min-height: 150px;\n        text-transform: capitalize;\n\n        border: var(--file-uploader-border);\n        background-color: var(--md-sys-color-background);\n        font: var(--file-uploader-font) !important;\n        color: var(--file-uploader-color);\n\n        overflow: hidden;\n      }\n\n      :host(.candrop) {\n        background-color: var(--file-uploader-candrop-background-color);\n      }\n\n      video {\n        min-height: 100%;\n        max-width: 100%;\n        margin: auto;\n      }\n\n      .placeholder {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: 8px;\n        width: 100%;\n        height: 100%;\n        min-height: 150px;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      .placeholder md-icon {\n        --md-icon-size: 48px;\n        color: var(--md-sys-color-on-surface-variant);\n      }\n\n      [overlay] {\n        position: absolute;\n        left: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        opacity: 0%;\n        background-color: var(--md-sys-color-surface);\n\n        display: flex;\n        place-content: center;\n      }\n\n      [overlay]:hover {\n        opacity: 50%;\n      }\n\n      #input-file {\n        display: none;\n      }\n\n      label {\n        border: none;\n        flex: 1;\n        display: flex;\n        place-content: center;\n      }\n\n      md-icon {\n        align-self: center;\n\n        color: var(--file-uploader-icon-color, black);\n        --md-icon-size: var(--file-uploader-icon-size, 36px);\n      }\n    `\n  ]\n\n  @query('#input-file') fileInput!: HTMLInputElement\n\n  render() {\n    var value = this.value\n    var src: string | undefined\n\n    if (value) {\n      if (typeof value === 'string') {\n        src = value\n      } else {\n        src = URL.createObjectURL(value)\n        requestAnimationFrame(() => URL.revokeObjectURL(src!))\n      }\n    }\n\n    return html`\n      ${src\n        ? html`\n            <video src=${src} controls style=\"max-width: 100%;\">Your browser does not support the video tag.</video>\n          `\n        : html`\n            <div class=\"placeholder\">\n              <md-icon>videocam</md-icon>\n              <span>No video selected</span>\n            </div>\n          `}\n\n      <div overlay>\n        <label>\n          <input\n            id=\"input-file\"\n            type=\"file\"\n            accept=\"video/*\"\n            hidden\n            capture=\"environment\"\n            @change=${(e: Event) => this._onChangeValue(e)}\n            ?disabled=${this.disabled}\n          />\n          <md-icon>upload</md-icon>\n        </label>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    FileDropHelper.set(this)\n\n    this.addEventListener('file-drop', (e: Event) => {\n      const detail = (e as CustomEvent).detail\n      this.value = detail[0]\n\n      this._notifyChange()\n    })\n  }\n\n  get file() {\n    return this.value\n  }\n\n  reset() {\n    this.fileInput.value = ''\n    this.value = undefined\n\n    this._notifyChange()\n  }\n\n  _onChangeValue(e: Event) {\n    const fileInput = e.currentTarget as HTMLInputElement\n\n    this.value = [...Array.from(fileInput.files as FileList)][0]\n\n    fileInput.files = null\n\n    this._notifyChange()\n  }\n\n  _notifyChange() {\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-work-shift.d.ts

@@ -19,7 +19,7 @@ Example:
   </ox-input-work-shift>
 */
 export declare class OxInputWorkShift extends OxFormField {
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     value: WorkShift[];
     private _changingNow;
     firstUpdated(): void;

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

@@ -6,6 +6,7 @@ import { css, html, nothing } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { localized, msg } from '@lit/localize';
 import { OxFormField } from './ox-form-field.js';
+import { InputStyles } from './input-styles.js';
 /**
 work-shift array value editor element
 
@@ -21,7 +22,7 @@ let OxInputWorkShift = class OxInputWorkShift extends OxFormField {
         this.value = [];
         this._changingNow = false;
     }
-    static { this.styles = css `
+    static { this.styles = [InputStyles, css `
     :host {
       display: flex;
       flex-direction: column;
@@ -35,7 +36,7 @@ let OxInputWorkShift = class OxInputWorkShift extends OxFormField {
     div {
       display: flex;
       flex-flow: row nowrap;
-      gap: var(--spacing-medium);
+      gap: calc(var(--ox-input-gap) * 2);
     }
 
     empty-element {
@@ -50,7 +51,7 @@ let OxInputWorkShift = class OxInputWorkShift extends OxFormField {
     }
     [data-header] {
       background-color: rgba(var(--md-sys-color-on-primary-container-rgb), 0.05);
-      padding: var(--spacing-small);
+      padding: var(--ox-input-gap);
     }
     [data-header] span {
       font: var(--label-font);
@@ -59,14 +60,14 @@ let OxInputWorkShift = class OxInputWorkShift extends OxFormField {
       text-align: center;
     }
     [data-record] {
-      margin-bottom: var(--spacing-small);
+      margin-bottom: var(--ox-input-gap);
     }
     input,
     select {
       border: 0;
       border-bottom: 1px solid rgba(0, 0, 0, 0.15);
-      padding: var(--spacing-tiny);
-      font: var(--input-font);
+      padding: calc(var(--ox-input-gap) / 2);
+      font: var(--ox-input-font);
       color: var(--md-sys-color-on-primary-container);
 
       max-height: 35px;
@@ -83,9 +84,9 @@ let OxInputWorkShift = class OxInputWorkShift extends OxFormField {
 
     button {
       border: var(--button-border);
-      border-radius: var(--border-radius);
+      border-radius: var(--ox-input-radius);
       background-color: var(--button-background-color);
-      padding: var(--spacing-small) var(--padding-default);
+      padding: var(--ox-input-gap) calc(var(--ox-input-gap) * 2);
       line-height: 0.8;
       color: var(--button-color);
       cursor: pointer;
@@ -101,7 +102,7 @@ let OxInputWorkShift = class OxInputWorkShift extends OxFormField {
     [placeholder='value'] {
       flex: 2;
     }
-  `; }
+  `]; }
     firstUpdated() {
         this.renderRoot.addEventListener('change', this._onChange.bind(this));
     }

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'\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 = 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: var(--spacing-medium);\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(--spacing-small);\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(--spacing-small);\n    }\n    input,\n    select {\n      border: 0;\n      border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n      padding: var(--spacing-tiny);\n      font: var(--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(--border-radius);\n      background-color: var(--button-background-color);\n      padding: var(--spacing-small) var(--padding-default);\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: 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      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"]}

package/dist/src/ox-select-floor.js

@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
 import { css, html } from 'lit';
 import { customElement, property, query, state } from 'lit/decorators.js';
 import { OxFormField } from './ox-form-field.js';
+import { InputStyles } from './input-styles.js';
 let OxSelectFloor = class OxSelectFloor extends OxFormField {
     constructor() {
         super(...arguments);
@@ -15,6 +16,7 @@ let OxSelectFloor = class OxSelectFloor extends OxFormField {
         this.lastMouseY = 0;
     }
     static { this.styles = [
+        InputStyles,
         css `
       :host {
         display: block;
@@ -38,7 +40,7 @@ let OxSelectFloor = class OxSelectFloor extends OxFormField {
         position: absolute;
         bottom: 0;
         width: 100%;
-        background-color: white;
+        background-color: var(--ox-input-background);
         transition:
           transform 0.3s ease,
           opacity 0.3s ease,
@@ -48,7 +50,7 @@ let OxSelectFloor = class OxSelectFloor extends OxFormField {
         transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x));
         opacity: 0.5;
         border: 2px solid transparent;
-        border-radius: 12px;
+        border-radius: var(--ox-input-radius);
         box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
       }
 
@@ -57,7 +59,7 @@ let OxSelectFloor = class OxSelectFloor extends OxFormField {
         height: auto;
         display: block;
         pointer-events: none;
-        border-radius: 12px;
+        border-radius: var(--ox-input-radius);
       }
 
       .selected {

package/dist/src/ox-select-floor.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-select-floor.js","sourceRoot":"","sources":["../../src/ox-select-floor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { OxFormField } from './ox-form-field.js'\n\ntype Card = {\n  name: string\n  image: string\n}\n\n@customElement('ox-select-floor')\nexport class OxSelectFloor extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        overflow: hidden;\n        height: 100%;\n\n        --ox-select-floor-rotate-x: 60deg;\n        --ox-select-floor-rotate-x-active: 40deg;\n        --ox-select-floor-perspective: 1200px;\n      }\n\n      .carousel-container {\n        position: relative;\n        width: 100%;\n        overflow: hidden;\n        user-select: none;\n      }\n\n      .card {\n        position: absolute;\n        bottom: 0;\n        width: 100%;\n        background-color: white;\n        transition:\n          transform 0.3s ease,\n          opacity 0.3s ease,\n          box-shadow 0.3s ease,\n          border 0.3s ease;\n        transform-origin: bottom;\n        transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x));\n        opacity: 0.5;\n        border: 2px solid transparent;\n        border-radius: 12px;\n        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n      }\n\n      .card img {\n        width: 100%;\n        height: auto;\n        display: block;\n        pointer-events: none;\n        border-radius: 12px;\n      }\n\n      .selected {\n        opacity: 0.8;\n        z-index: 1;\n        border: 4px solid #3b82f6;\n        box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4);\n      }\n\n      .selected.active {\n        opacity: 1;\n        z-index: 2;\n        transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x-active));\n        box-shadow: 0 12px 24px rgba(59, 130, 246, 0.4);\n      }\n\n      [template-container] {\n        position: absolute;\n        right: 10px;\n        z-index: 1;\n      }\n    `\n  ]\n\n  @property({ type: Array }) cards: Card[] = []\n  @property({ type: String }) value?: string = undefined\n  @property({ type: Number }) bottomLimit = 70\n  @property({ type: Number }) interval = 0\n\n  @state() private selectedIndex = -1\n  @state() private activeIndex: number | null = null\n  @query('.carousel-container') private carouselContainer!: HTMLDivElement\n\n  private isDragging = false\n  private lastMouseY = 0\n\n  render() {\n    const length = this.cards.length\n    const cards = this.cards\n    const interval = this.interval\n\n    return html`\n      <div\n        class=\"carousel-container\"\n        @wheel=${interval ? () => {} : this.handleWheel}\n        @pointerdown=${this.handlePointerDown}\n        @pointermove=${this.handlePointerMove}\n        @pointerup=${this.handlePointerUp}\n        @pointerleave=${this.handlePointerLeave}\n        style=${interval ? `height: ${interval * length + 200}px;` : 'height: 100%;'}\n      >\n        ${cards.map(({ image, name }, index) => {\n          return html`\n            <div\n              class=\"card ${this.getClassForCard(index)} ${this.isActive(index) ? 'active' : ''}\"\n              style=${`bottom: ${interval ? interval * index + 'px' : (this.bottomLimit * index) / length + '%'};`}\n              @click=${() => {\n                this.selectCard(index)\n                this.toggleActiveCard(index)\n              }}\n            >\n              <img src=\"${image}\" @load=${(e: Event) => this.adjustCardHeight(e, index)} />\n            </div>\n          `\n        })}\n        ${cards.map(({ image, name }, index) => {\n          return html`\n            <div\n              style=${`bottom: ${interval ? interval * index + 'px' : (this.bottomLimit * index) / length + '%'};`}\n              @click=${() => this.selectCard(index)}\n              template-container\n            >\n              <slot name=\"template-${index}\"></slot>\n            </div>\n          `\n        })}\n      </div>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      if (this.value) {\n        this.selectedIndex = this.cards.findIndex(card => card.name == this.value)\n      } else {\n        this.selectedIndex = -1\n      }\n    }\n  }\n\n  firstUpdated() {\n    this.scrollToSelectedCard()\n  }\n\n  getClassForCard(index: number) {\n    return index === this.selectedIndex ? 'selected' : 'compressed'\n  }\n\n  isActive(index: number): boolean {\n    return this.activeIndex === index\n  }\n\n  handleWheel(event: WheelEvent) {\n    event.preventDefault()\n    const delta = Math.sign(event.deltaY)\n    this.updateSelectedIndex(this.selectedIndex + delta)\n  }\n\n  handlePointerDown(event: PointerEvent) {\n    event.preventDefault()\n\n    this.isDragging = true\n    this.lastMouseY = event.clientY\n  }\n\n  handlePointerMove(event: PointerEvent) {\n    if (!this.isDragging) {\n      return\n    }\n\n    event.preventDefault()\n\n    const deltaY = event.clientY - this.lastMouseY\n\n    if (!this.lastMouseY) {\n      this.lastMouseY = event.clientY\n    }\n\n    if (Math.abs(deltaY) > 30) {\n      this.lastMouseY = event.clientY\n      const direction = deltaY > 0 ? -1 : 1\n      this.updateSelectedIndex(this.selectedIndex + direction)\n    }\n  }\n\n  handlePointerUp(event: PointerEvent) {\n    event.preventDefault()\n    this.isDragging = false\n  }\n\n  handlePointerLeave(event: PointerEvent) {\n    event.preventDefault()\n\n    this.isDragging = false\n  }\n\n  private toggleActiveCard(index: number) {\n    if (this.activeIndex === index) {\n      this.activeIndex = null\n    } else {\n      this.activeIndex = index\n    }\n  }\n\n  private updateSelectedIndex(newIndex: number) {\n    this.activeIndex = null\n\n    this.selectedIndex = Math.max(-1, Math.min(newIndex, this.cards.length - 1))\n    this.scrollToSelectedCard()\n  }\n\n  private scrollToSelectedCard() {\n    const cardHeight = 320\n    const targetScrollTop = this.selectedIndex * cardHeight - (window.innerHeight / 2 - cardHeight / 2)\n\n    this.carouselContainer.scrollTo({ top: targetScrollTop, behavior: 'smooth' })\n  }\n\n  private selectCard(index: number) {\n    this.selectedIndex = index\n    this.notifySelection()\n    this.scrollToSelectedCard()\n  }\n\n  private notifySelection() {\n    this.value = this.selectedIndex !== -1 ? this.cards[this.selectedIndex]?.name : undefined\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value\n      })\n    )\n  }\n\n  private adjustCardHeight(e: Event, index: number) {\n    const imgElement = e.target as HTMLImageElement\n    const aspectRatio = imgElement.naturalWidth / imgElement.naturalHeight\n    const newHeight = imgElement.offsetWidth / aspectRatio\n    imgElement.style.height = `${newHeight}px`\n  }\n}\n"]}
+{"version":3,"file":"ox-select-floor.js","sourceRoot":"","sources":["../../src/ox-select-floor.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\ntype Card = {\n  name: string\n  image: string\n}\n\n@customElement('ox-select-floor')\nexport class OxSelectFloor extends OxFormField {\n  static styles = [\n    InputStyles,\n    css`\n      :host {\n        display: block;\n        position: relative;\n        overflow: hidden;\n        height: 100%;\n\n        --ox-select-floor-rotate-x: 60deg;\n        --ox-select-floor-rotate-x-active: 40deg;\n        --ox-select-floor-perspective: 1200px;\n      }\n\n      .carousel-container {\n        position: relative;\n        width: 100%;\n        overflow: hidden;\n        user-select: none;\n      }\n\n      .card {\n        position: absolute;\n        bottom: 0;\n        width: 100%;\n        background-color: var(--ox-input-background);\n        transition:\n          transform 0.3s ease,\n          opacity 0.3s ease,\n          box-shadow 0.3s ease,\n          border 0.3s ease;\n        transform-origin: bottom;\n        transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x));\n        opacity: 0.5;\n        border: 2px solid transparent;\n        border-radius: var(--ox-input-radius);\n        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n      }\n\n      .card img {\n        width: 100%;\n        height: auto;\n        display: block;\n        pointer-events: none;\n        border-radius: var(--ox-input-radius);\n      }\n\n      .selected {\n        opacity: 0.8;\n        z-index: 1;\n        border: 4px solid #3b82f6;\n        box-shadow: 0 8px 16px rgba(59, 130, 246, 0.4);\n      }\n\n      .selected.active {\n        opacity: 1;\n        z-index: 2;\n        transform: perspective(var(--ox-select-floor-perspective)) rotateX(var(--ox-select-floor-rotate-x-active));\n        box-shadow: 0 12px 24px rgba(59, 130, 246, 0.4);\n      }\n\n      [template-container] {\n        position: absolute;\n        right: 10px;\n        z-index: 1;\n      }\n    `\n  ]\n\n  @property({ type: Array }) cards: Card[] = []\n  @property({ type: String }) value?: string = undefined\n  @property({ type: Number }) bottomLimit = 70\n  @property({ type: Number }) interval = 0\n\n  @state() private selectedIndex = -1\n  @state() private activeIndex: number | null = null\n  @query('.carousel-container') private carouselContainer!: HTMLDivElement\n\n  private isDragging = false\n  private lastMouseY = 0\n\n  render() {\n    const length = this.cards.length\n    const cards = this.cards\n    const interval = this.interval\n\n    return html`\n      <div\n        class=\"carousel-container\"\n        @wheel=${interval ? () => {} : this.handleWheel}\n        @pointerdown=${this.handlePointerDown}\n        @pointermove=${this.handlePointerMove}\n        @pointerup=${this.handlePointerUp}\n        @pointerleave=${this.handlePointerLeave}\n        style=${interval ? `height: ${interval * length + 200}px;` : 'height: 100%;'}\n      >\n        ${cards.map(({ image, name }, index) => {\n          return html`\n            <div\n              class=\"card ${this.getClassForCard(index)} ${this.isActive(index) ? 'active' : ''}\"\n              style=${`bottom: ${interval ? interval * index + 'px' : (this.bottomLimit * index) / length + '%'};`}\n              @click=${() => {\n                this.selectCard(index)\n                this.toggleActiveCard(index)\n              }}\n            >\n              <img src=\"${image}\" @load=${(e: Event) => this.adjustCardHeight(e, index)} />\n            </div>\n          `\n        })}\n        ${cards.map(({ image, name }, index) => {\n          return html`\n            <div\n              style=${`bottom: ${interval ? interval * index + 'px' : (this.bottomLimit * index) / length + '%'};`}\n              @click=${() => this.selectCard(index)}\n              template-container\n            >\n              <slot name=\"template-${index}\"></slot>\n            </div>\n          `\n        })}\n      </div>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      if (this.value) {\n        this.selectedIndex = this.cards.findIndex(card => card.name == this.value)\n      } else {\n        this.selectedIndex = -1\n      }\n    }\n  }\n\n  firstUpdated() {\n    this.scrollToSelectedCard()\n  }\n\n  getClassForCard(index: number) {\n    return index === this.selectedIndex ? 'selected' : 'compressed'\n  }\n\n  isActive(index: number): boolean {\n    return this.activeIndex === index\n  }\n\n  handleWheel(event: WheelEvent) {\n    event.preventDefault()\n    const delta = Math.sign(event.deltaY)\n    this.updateSelectedIndex(this.selectedIndex + delta)\n  }\n\n  handlePointerDown(event: PointerEvent) {\n    event.preventDefault()\n\n    this.isDragging = true\n    this.lastMouseY = event.clientY\n  }\n\n  handlePointerMove(event: PointerEvent) {\n    if (!this.isDragging) {\n      return\n    }\n\n    event.preventDefault()\n\n    const deltaY = event.clientY - this.lastMouseY\n\n    if (!this.lastMouseY) {\n      this.lastMouseY = event.clientY\n    }\n\n    if (Math.abs(deltaY) > 30) {\n      this.lastMouseY = event.clientY\n      const direction = deltaY > 0 ? -1 : 1\n      this.updateSelectedIndex(this.selectedIndex + direction)\n    }\n  }\n\n  handlePointerUp(event: PointerEvent) {\n    event.preventDefault()\n    this.isDragging = false\n  }\n\n  handlePointerLeave(event: PointerEvent) {\n    event.preventDefault()\n\n    this.isDragging = false\n  }\n\n  private toggleActiveCard(index: number) {\n    if (this.activeIndex === index) {\n      this.activeIndex = null\n    } else {\n      this.activeIndex = index\n    }\n  }\n\n  private updateSelectedIndex(newIndex: number) {\n    this.activeIndex = null\n\n    this.selectedIndex = Math.max(-1, Math.min(newIndex, this.cards.length - 1))\n    this.scrollToSelectedCard()\n  }\n\n  private scrollToSelectedCard() {\n    const cardHeight = 320\n    const targetScrollTop = this.selectedIndex * cardHeight - (window.innerHeight / 2 - cardHeight / 2)\n\n    this.carouselContainer.scrollTo({ top: targetScrollTop, behavior: 'smooth' })\n  }\n\n  private selectCard(index: number) {\n    this.selectedIndex = index\n    this.notifySelection()\n    this.scrollToSelectedCard()\n  }\n\n  private notifySelection() {\n    this.value = this.selectedIndex !== -1 ? this.cards[this.selectedIndex]?.name : undefined\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        detail: this.value\n      })\n    )\n  }\n\n  private adjustCardHeight(e: Event, index: number) {\n    const imgElement = e.target as HTMLImageElement\n    const aspectRatio = imgElement.naturalWidth / imgElement.naturalHeight\n    const newHeight = imgElement.offsetWidth / aspectRatio\n    imgElement.style.height = `${newHeight}px`\n  }\n}\n"]}

package/dist/src/ox-select.js

@@ -9,6 +9,7 @@ import { css, html, render } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { OxPopupList } from '@operato/popup';
 import { OxFormField } from './ox-form-field.js';
+import { InputStyles } from './input-styles.js';
 let OxSelect = class OxSelect extends OxFormField {
     constructor() {
         super(...arguments);
@@ -20,22 +21,27 @@ let OxSelect = class OxSelect extends OxFormField {
         this.hasLabelSlot = false;
     }
     static { this.styles = [
+        InputStyles,
         css `
+      /* 컴포넌트 조정 지점(L3) — 모두 L2 계약(--ox-input-*)으로 폴백하므로
+         앱은 전역(L2) 또는 이 컴포넌트만(L3) 어느 쪽으로도 통제할 수 있다.
+         고정 리터럴을 남기지 않는다. */
       :host {
         display: block;
         position: relative;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+        border-bottom: var(--ox-select-border-bottom, var(--ox-input-border));
 
-        --ox-select-padding: var(--spacing-tiny);
-        --ox-select-font: var(--input-font);
-        --ox-select-color: var(--input-color, var(--md-sys-color-on-surface-variant));
-        --ox-select-icon-color: var(--theme-primary-text-color, var(--md-sys-color-on-surface-variant));
-        --ox-select-icon-hover-color: var(--md-sys-color-on-primary-container, #3c3938);
+        --ox-select-padding: var(--ox-input-padding);
+        --ox-select-font: var(--ox-input-font);
+        --ox-select-color: var(--ox-input-color);
+        --ox-select-icon-color: var(--ox-input-placeholder-color);
+        --ox-select-icon-hover-color: var(--ox-input-focus-color);
+        --ox-select-icon-size: var(--ox-input-font-size);
+        --ox-select-icon-opacity: 0.7;
       }
 
       div {
         width: 100%;
-        box-sizing: border-box;
 
         display: flex;
         flex-direction: row;
@@ -45,6 +51,7 @@ let OxSelect = class OxSelect extends OxFormField {
         padding: var(--ox-select-padding);
         font: var(--ox-select-font);
         color: var(--ox-select-color);
+        transition: var(--ox-input-transition);
       }
 
       span {
@@ -52,19 +59,21 @@ let OxSelect = class OxSelect extends OxFormField {
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
-        gap: 4px;
+        gap: var(--ox-input-gap);
       }
 
       md-icon {
-        --md-icon-size: 16px;
+        --md-icon-size: var(--ox-select-icon-size);
         display: block;
         text-align: right;
         color: var(--ox-select-icon-color);
-        opacity: 0.7;
+        opacity: var(--ox-select-icon-opacity);
+        transition: var(--ox-input-transition);
       }
 
       div:hover md-icon {
-        color: var(--md-sys-color-on-primary-container);
+        color: var(--ox-select-icon-hover-color);
+        opacity: 1;
       }
     `
     ]; }

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

@@ -1 +1 @@
-{"version":3,"file":"ox-select.js","sourceRoot":"","sources":["../../src/ox-select.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AACnC,OAAO,iCAAiC,CAAA;AACxC,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAkB,MAAM,KAAK,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAGzC,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,WAAW;IAAlC;;QAmDuB,SAAI,GAAW,EAAE,CAAA;QACjB,gBAAW,GAAW,EAAE,CAAA;QAE3C,UAAK,GAAsB,EAAE,CAAA;QAC7B,mBAAc,GAAuB,IAAI,CAAA;QACzC,aAAQ,GAA4B,IAAI,CAAA;QACxC,iBAAY,GAAY,KAAK,CAAA;IAyJxC,CAAC;aAjNQ,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA8CF;KACF,AAhDY,CAgDZ;IAUD,MAAM;QACJ,gEAAgE;QAChE,6DAA6D;QAC7D,8CAA8C;QAC9C,MAAM,MAAM,GAAG,CAAC,CAAU,EAAU,EAAE,CACpC,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;QAEnG,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,EAAE,CAAA;QAEhF,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,MAAM;0DAC2B,KAAK;;;;;KAK1D,CAAA;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;QAClC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QACpD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;IAC7C,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QACvD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;IAChD,CAAC;IAED,aAAa,CAAC,CAAgB;QAC5B,CAAC,CAAC,cAAc,EAAE,CAAA;QAClB,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,UAAU,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YACnE,IAAI,CAAC,MAAM,EAAE,CAAA;QACf,CAAC;IACH,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,OAA6B;QACzC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC,eAAe,CAAC;gBACpE,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAgB,CAAA;YAErD,IAAI,SAAS,EAAE,CAAC;gBACd,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;gBAC5B,MAAM,IAAI,CAAC,aAAa,EAAE,CAAA;gBAC1B,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,iBAAiB,EAAE,CAAA;YAC5C,CAAC;QACH,CAAC;IACH,CAAC;IAED,UAAU,CACR,OAAwD,EACxD,MAAoD,EAAE;QAEtD,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACtC,OAAO,OAAO,MAAM,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM,CAAA;QAChF,CAAC,CAAC,CAAA;QAEF,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,GAAG,IAAI,EAAE,CAAA;QAE1C,MAAM,QAAQ,GAAG,IAAI,CAAA;;;;oBAIL,QAAQ;wBACJ,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;uBAC1B,UAAU;;UAEvB,QAAQ;YACR,CAAC,CAAC,IAAI,CAAA;0BACU,CAAC,CAAQ,EAAE,EAAE;gBACrB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAA;gBAC3C,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAc,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CACnF,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CACzC,CAAA;gBACD,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAE,MAA2B,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAA;gBAElF,IAAI,CAAC,KAAK,GAAG,OAAO;qBACjB,GAAG,CAAC,MAAM,CAAC,EAAE,CACX,MAA2B,CAAC,OAAO,CAAC,CAAC,CAAE,MAA2B,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CACtF;qBACA,MAAM,CAAC,OAAO,CAAC,CAAA;YACpB,CAAC;;;gBAGD,UAAU,CAAC,GAAG,CACd,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA,8BAA8B,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO,iBAAiB,CAC5F,EAAE;YACP,CAAC,CAAC,IAAI,CAAA,GAAG,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA,sBAAsB,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO,SAAS,CAAC,EAAE;;KAE3G,CAAA;QAED,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAA;IACxB,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,MAAM,WAAW,GAAI,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAqB,EAAE,aAAa,EAAE,IAAI,EAAE,CAAA;QAEjH,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC3B,MAAM,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,YAAY,WAAW,CAAgB,CAAA;YAE5F,IAAI,SAAS,EAAE,CAAC;gBACd,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA;gBAErD,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;gBAC5B,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,WAAW,IAAI,CAAA;gBAC/C,SAAS,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;gBAEnC,MAAM,aAAa,GAAG,KAAK,EAAE,CAAQ,EAAE,EAAE;oBACvC,IAAI,CAAC,KAAK,GAAI,CAAiB,CAAC,MAAM,CAAA;oBAEtC,IAAI,SAAS,EAAE,CAAC;wBACd,MAAM,IAAI,CAAC,aAAa,EAAE,CAAA;wBAC1B,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,iBAAiB,EAAE,CAAA;oBAC5C,CAAC;gBACH,CAAC,CAAA;gBACD,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;gBAEnD,MAAM,YAAY,GAAG,CAAC,CAAQ,EAAE,EAAE;oBAChC,wCAAwC;oBACxC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;wBACxB,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,MAAM,EAAE,IAAI,CAAC,KAAK;qBACnB,CAAC,CACH,CAAA;oBACD,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;oBACtD,SAAS,CAAC,mBAAmB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAA;oBAEpD,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAA;gBAC7B,CAAC,CAAA;gBACD,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAA;gBAEjE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAA;gBAEpC,SAAS,CAAC,IAAI,CAAC;oBACb,IAAI;oBACJ,GAAG,EAAE,MAAM;iBACZ,CAAC,CAAA;YACJ,CAAC;QACH,CAAC;IACH,CAAC;;AA9J2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAyB;AAE3C;IAAR,KAAK,EAAE;uCAA8B;AAC7B;IAAR,KAAK,EAAE;gDAA0C;AACzC;IAAR,KAAK,EAAE;0CAAyC;AACxC;IAAR,KAAK,EAAE;8CAA8B;AAzD3B,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAkNpB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/popup/ox-popup-list.js'\nimport './ox-checkbox.js'\n\nimport { css, html, render, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { OxPopupList } from '@operato/popup'\n\nimport { OxFormField } from './ox-form-field.js'\n\n@customElement('ox-select')\nexport class OxSelect extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.15);\n\n        --ox-select-padding: var(--spacing-tiny);\n        --ox-select-font: var(--input-font);\n        --ox-select-color: var(--input-color, var(--md-sys-color-on-surface-variant));\n        --ox-select-icon-color: var(--theme-primary-text-color, var(--md-sys-color-on-surface-variant));\n        --ox-select-icon-hover-color: var(--md-sys-color-on-primary-container, #3c3938);\n      }\n\n      div {\n        width: 100%;\n        box-sizing: border-box;\n\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        padding: var(--ox-select-padding);\n        font: var(--ox-select-font);\n        color: var(--ox-select-color);\n      }\n\n      span {\n        flex: 1;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        gap: 4px;\n      }\n\n      md-icon {\n        --md-icon-size: 16px;\n        display: block;\n        text-align: right;\n        color: var(--ox-select-icon-color);\n        opacity: 0.7;\n      }\n\n      div:hover md-icon {\n        color: var(--md-sys-color-on-primary-container);\n      }\n    `\n  ]\n\n  @property({ type: String }) name: string = ''\n  @property({ type: String }) placeholder: string = ''\n\n  @state() label: string | string[] = ''\n  @state() popupContainer: HTMLElement | null = null\n  @state() observer: MutationObserver | null = null\n  @state() hasLabelSlot: boolean = false\n\n  render() {\n    // value/label 은 문자열이 아닐 수 있다 (예: select option value 가 숫자 0/1).\n    // `(0)?.trim()` 은 0 이 nullish 가 아니라 단락되지 않아 TypeError 가 난다 →\n    // 비-문자열 스칼라는 String() 으로 강제, nullish 만 '' 처리.\n    const asText = (v: unknown): string =>\n      v instanceof Array ? v.join(', ') : typeof v === 'string' ? v.trim() : v == null ? '' : String(v)\n\n    const label = asText(this.label) || asText(this.value) || this.placeholder || ''\n\n    return html`\n      <div @click=${this.expand}>\n        <span data-reactive-tooltip> <slot name=\"label\">${label}</slot> </span>\n        <md-icon>expand_more</md-icon>\n      </div>\n\n      <slot></slot>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.setAttribute('tabindex', '0')\n    this.addEventListener('keydown', this.handleKeyDown)\n    this.addEventListener('click', this.expand)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.removeEventListener('keydown', this.handleKeyDown)\n    this.removeEventListener('click', this.expand)\n  }\n\n  handleKeyDown(e: KeyboardEvent) {\n    e.preventDefault()\n    if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'ArrowDown') {\n      this.expand()\n    }\n  }\n\n  async updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      const popupList = (this.popupContainer?.querySelector('ox-popup-list') ||\n        this.querySelector('ox-popup-list')) as OxPopupList\n\n      if (popupList) {\n        popupList.value = this.value\n        await this.requestUpdate()\n        this.label = popupList.getSelectedLabels()\n      }\n    }\n  }\n\n  setOptions(\n    options: string[] | { display: string; value: string }[],\n    opt: { multiple?: boolean; withSearch?: boolean } = {}\n  ) {\n    const objOptions = options.map(option => {\n      return typeof option == 'string' ? { display: option, value: option } : option\n    })\n\n    const { multiple, withSearch } = opt || {}\n\n    const template = html`\n      <ox-popup-list\n        align-left\n        nowrap\n        ?multiple=${multiple}\n        attr-selected=${multiple ? 'checked' : ''}\n        ?with-search=${withSearch}\n      >\n        ${multiple\n          ? html`<ox-checkbox\n                @change=${(e: Event) => {\n                  const target = e.target as HTMLInputElement\n                  const options = Array.from(target.parentElement!.querySelectorAll('[option]')).filter(\n                    option => !option.hasAttribute('hidden')\n                  )\n                  options.forEach(option => ((option as HTMLInputElement).checked = target.checked))\n\n                  this.value = options\n                    .map(option =>\n                      (option as HTMLInputElement).checked ? (option as HTMLInputElement).value : undefined\n                    )\n                    .filter(Boolean)\n                }}\n                >set all</ox-checkbox\n              >\n              ${objOptions.map(\n                option => html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `\n              )}`\n          : html`${objOptions.map(option => html` <div option value=${option.value}>${option.display}</div> `)}`}\n      </ox-popup-list>\n    `\n\n    render(template, this)\n  }\n\n  expand() {\n    if (this.disabled) {\n      return\n    }\n\n    const slotContent = (this.renderRoot.querySelector('slot:not([name])') as HTMLSlotElement)?.assignedNodes() || []\n\n    if (slotContent.length > 0) {\n      const popupList = slotContent.find(content => content instanceof OxPopupList) as OxPopupList\n\n      if (popupList) {\n        const { left, bottom } = this.getBoundingClientRect()\n\n        popupList.value = this.value\n        popupList.style.width = `${this.offsetWidth}px`\n        popupList.style.textWrap = 'nowrap'\n\n        const selectHandler = async (e: Event) => {\n          this.value = (e as CustomEvent).detail\n\n          if (popupList) {\n            await this.requestUpdate()\n            this.label = popupList.getSelectedLabels()\n          }\n        }\n        popupList.addEventListener('select', selectHandler)\n\n        const closeHandler = (e: Event) => {\n          /* popup이 close될 때 change 이벤트를 발생시킨다. */\n          this.dispatchEvent(\n            new CustomEvent('change', {\n              bubbles: true,\n              composed: true,\n              detail: this.value\n            })\n          )\n          popupList.removeEventListener('select', selectHandler)\n          popupList.removeEventListener('close', closeHandler)\n\n          this.appendChild(popupList)\n        }\n        popupList.addEventListener('close', closeHandler, { once: true })\n\n        document.body.appendChild(popupList)\n\n        popupList.open({\n          left,\n          top: bottom\n        })\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-select.js","sourceRoot":"","sources":["../../src/ox-select.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,4BAA4B,CAAA;AACnC,OAAO,iCAAiC,CAAA;AACxC,OAAO,kBAAkB,CAAA;AAEzB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,EAAkB,MAAM,KAAK,CAAA;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAEzE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAE5C,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAGxC,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,WAAW;IAAlC;;QA2DuB,SAAI,GAAW,EAAE,CAAA;QACjB,gBAAW,GAAW,EAAE,CAAA;QAE3C,UAAK,GAAsB,EAAE,CAAA;QAC7B,mBAAc,GAAuB,IAAI,CAAA;QACzC,aAAQ,GAA4B,IAAI,CAAA;QACxC,iBAAY,GAAY,KAAK,CAAA;IAyJxC,CAAC;aAzNQ,WAAM,GAAG;QACd,WAAW;QACX,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqDF;KACF,AAxDY,CAwDZ;IAUD,MAAM;QACJ,gEAAgE;QAChE,6DAA6D;QAC7D,8CAA8C;QAC9C,MAAM,MAAM,GAAG,CAAC,CAAU,EAAU,EAAE,CACpC,CAAC,YAAY,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;QAEnG,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,EAAE,CAAA;QAEhF,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,MAAM;0DAC2B,KAAK;;;;;KAK1D,CAAA;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;QAClC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QACpD,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;IAC7C,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAA;QAE5B,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAA;QACvD,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAA;IAChD,CAAC;IAED,aAAa,CAAC,CAAgB;QAC5B,CAAC,CAAC,cAAc,EAAE,CAAA;QAClB,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,UAAU,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE,CAAC;YACnE,IAAI,CAAC,MAAM,EAAE,CAAA;QACf,CAAC;IACH,CAAC;IAED,KAAK,CAAC,OAAO,CAAC,OAA6B;QACzC,IAAI,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,EAAE,CAAC;YACzB,MAAM,SAAS,GAAG,CAAC,IAAI,CAAC,cAAc,EAAE,aAAa,CAAC,eAAe,CAAC;gBACpE,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAgB,CAAA;YAErD,IAAI,SAAS,EAAE,CAAC;gBACd,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;gBAC5B,MAAM,IAAI,CAAC,aAAa,EAAE,CAAA;gBAC1B,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,iBAAiB,EAAE,CAAA;YAC5C,CAAC;QACH,CAAC;IACH,CAAC;IAED,UAAU,CACR,OAAwD,EACxD,MAAoD,EAAE;QAEtD,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE;YACtC,OAAO,OAAO,MAAM,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,CAAC,CAAC,CAAC,MAAM,CAAA;QAChF,CAAC,CAAC,CAAA;QAEF,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,GAAG,IAAI,EAAE,CAAA;QAE1C,MAAM,QAAQ,GAAG,IAAI,CAAA;;;;oBAIL,QAAQ;wBACJ,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;uBAC1B,UAAU;;UAEvB,QAAQ;YACR,CAAC,CAAC,IAAI,CAAA;0BACU,CAAC,CAAQ,EAAE,EAAE;gBACrB,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAA;gBAC3C,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,aAAc,CAAC,gBAAgB,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CACnF,MAAM,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,QAAQ,CAAC,CACzC,CAAA;gBACD,OAAO,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,CAAE,MAA2B,CAAC,OAAO,GAAG,MAAM,CAAC,OAAO,CAAC,CAAC,CAAA;gBAElF,IAAI,CAAC,KAAK,GAAG,OAAO;qBACjB,GAAG,CAAC,MAAM,CAAC,EAAE,CACX,MAA2B,CAAC,OAAO,CAAC,CAAC,CAAE,MAA2B,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CACtF;qBACA,MAAM,CAAC,OAAO,CAAC,CAAA;YACpB,CAAC;;;gBAGD,UAAU,CAAC,GAAG,CACd,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA,8BAA8B,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO,iBAAiB,CAC5F,EAAE;YACP,CAAC,CAAC,IAAI,CAAA,GAAG,UAAU,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,IAAI,CAAA,sBAAsB,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,OAAO,SAAS,CAAC,EAAE;;KAE3G,CAAA;QAED,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAA;IACxB,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClB,OAAM;QACR,CAAC;QAED,MAAM,WAAW,GAAI,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,kBAAkB,CAAqB,EAAE,aAAa,EAAE,IAAI,EAAE,CAAA;QAEjH,IAAI,WAAW,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YAC3B,MAAM,SAAS,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC,OAAO,YAAY,WAAW,CAAgB,CAAA;YAE5F,IAAI,SAAS,EAAE,CAAC;gBACd,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC,qBAAqB,EAAE,CAAA;gBAErD,SAAS,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAA;gBAC5B,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,WAAW,IAAI,CAAA;gBAC/C,SAAS,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAA;gBAEnC,MAAM,aAAa,GAAG,KAAK,EAAE,CAAQ,EAAE,EAAE;oBACvC,IAAI,CAAC,KAAK,GAAI,CAAiB,CAAC,MAAM,CAAA;oBAEtC,IAAI,SAAS,EAAE,CAAC;wBACd,MAAM,IAAI,CAAC,aAAa,EAAE,CAAA;wBAC1B,IAAI,CAAC,KAAK,GAAG,SAAS,CAAC,iBAAiB,EAAE,CAAA;oBAC5C,CAAC;gBACH,CAAC,CAAA;gBACD,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;gBAEnD,MAAM,YAAY,GAAG,CAAC,CAAQ,EAAE,EAAE;oBAChC,wCAAwC;oBACxC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;wBACxB,OAAO,EAAE,IAAI;wBACb,QAAQ,EAAE,IAAI;wBACd,MAAM,EAAE,IAAI,CAAC,KAAK;qBACnB,CAAC,CACH,CAAA;oBACD,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,aAAa,CAAC,CAAA;oBACtD,SAAS,CAAC,mBAAmB,CAAC,OAAO,EAAE,YAAY,CAAC,CAAA;oBAEpD,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAA;gBAC7B,CAAC,CAAA;gBACD,SAAS,CAAC,gBAAgB,CAAC,OAAO,EAAE,YAAY,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,CAAA;gBAEjE,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,SAAS,CAAC,CAAA;gBAEpC,SAAS,CAAC,IAAI,CAAC;oBACb,IAAI;oBACJ,GAAG,EAAE,MAAM;iBACZ,CAAC,CAAA;YACJ,CAAC;QACH,CAAC;IACH,CAAC;;AA9J2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;sCAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;6CAAyB;AAE3C;IAAR,KAAK,EAAE;uCAA8B;AAC7B;IAAR,KAAK,EAAE;gDAA0C;AACzC;IAAR,KAAK,EAAE;0CAAyC;AACxC;IAAR,KAAK,EAAE;8CAA8B;AAjE3B,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CA0NpB","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/web/icon/icon.js'\nimport '@operato/popup/ox-popup-list.js'\nimport './ox-checkbox.js'\n\nimport { css, html, render, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { OxPopupList } from '@operato/popup'\n\nimport { OxFormField } from './ox-form-field.js'\nimport { InputStyles } from './input-styles.js'\n\n@customElement('ox-select')\nexport class OxSelect extends OxFormField {\n  static styles = [\n    InputStyles,\n    css`\n      /* 컴포넌트 조정 지점(L3) — 모두 L2 계약(--ox-input-*)으로 폴백하므로\n         앱은 전역(L2) 또는 이 컴포넌트만(L3) 어느 쪽으로도 통제할 수 있다.\n         고정 리터럴을 남기지 않는다. */\n      :host {\n        display: block;\n        position: relative;\n        border-bottom: var(--ox-select-border-bottom, var(--ox-input-border));\n\n        --ox-select-padding: var(--ox-input-padding);\n        --ox-select-font: var(--ox-input-font);\n        --ox-select-color: var(--ox-input-color);\n        --ox-select-icon-color: var(--ox-input-placeholder-color);\n        --ox-select-icon-hover-color: var(--ox-input-focus-color);\n        --ox-select-icon-size: var(--ox-input-font-size);\n        --ox-select-icon-opacity: 0.7;\n      }\n\n      div {\n        width: 100%;\n\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        padding: var(--ox-select-padding);\n        font: var(--ox-select-font);\n        color: var(--ox-select-color);\n        transition: var(--ox-input-transition);\n      }\n\n      span {\n        flex: 1;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n        gap: var(--ox-input-gap);\n      }\n\n      md-icon {\n        --md-icon-size: var(--ox-select-icon-size);\n        display: block;\n        text-align: right;\n        color: var(--ox-select-icon-color);\n        opacity: var(--ox-select-icon-opacity);\n        transition: var(--ox-input-transition);\n      }\n\n      div:hover md-icon {\n        color: var(--ox-select-icon-hover-color);\n        opacity: 1;\n      }\n    `\n  ]\n\n  @property({ type: String }) name: string = ''\n  @property({ type: String }) placeholder: string = ''\n\n  @state() label: string | string[] = ''\n  @state() popupContainer: HTMLElement | null = null\n  @state() observer: MutationObserver | null = null\n  @state() hasLabelSlot: boolean = false\n\n  render() {\n    // value/label 은 문자열이 아닐 수 있다 (예: select option value 가 숫자 0/1).\n    // `(0)?.trim()` 은 0 이 nullish 가 아니라 단락되지 않아 TypeError 가 난다 →\n    // 비-문자열 스칼라는 String() 으로 강제, nullish 만 '' 처리.\n    const asText = (v: unknown): string =>\n      v instanceof Array ? v.join(', ') : typeof v === 'string' ? v.trim() : v == null ? '' : String(v)\n\n    const label = asText(this.label) || asText(this.value) || this.placeholder || ''\n\n    return html`\n      <div @click=${this.expand}>\n        <span data-reactive-tooltip> <slot name=\"label\">${label}</slot> </span>\n        <md-icon>expand_more</md-icon>\n      </div>\n\n      <slot></slot>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.setAttribute('tabindex', '0')\n    this.addEventListener('keydown', this.handleKeyDown)\n    this.addEventListener('click', this.expand)\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback()\n\n    this.removeEventListener('keydown', this.handleKeyDown)\n    this.removeEventListener('click', this.expand)\n  }\n\n  handleKeyDown(e: KeyboardEvent) {\n    e.preventDefault()\n    if (e.key === ' ' || e.key === 'Spacebar' || e.key === 'ArrowDown') {\n      this.expand()\n    }\n  }\n\n  async updated(changes: PropertyValues<this>) {\n    if (changes.has('value')) {\n      const popupList = (this.popupContainer?.querySelector('ox-popup-list') ||\n        this.querySelector('ox-popup-list')) as OxPopupList\n\n      if (popupList) {\n        popupList.value = this.value\n        await this.requestUpdate()\n        this.label = popupList.getSelectedLabels()\n      }\n    }\n  }\n\n  setOptions(\n    options: string[] | { display: string; value: string }[],\n    opt: { multiple?: boolean; withSearch?: boolean } = {}\n  ) {\n    const objOptions = options.map(option => {\n      return typeof option == 'string' ? { display: option, value: option } : option\n    })\n\n    const { multiple, withSearch } = opt || {}\n\n    const template = html`\n      <ox-popup-list\n        align-left\n        nowrap\n        ?multiple=${multiple}\n        attr-selected=${multiple ? 'checked' : ''}\n        ?with-search=${withSearch}\n      >\n        ${multiple\n          ? html`<ox-checkbox\n                @change=${(e: Event) => {\n                  const target = e.target as HTMLInputElement\n                  const options = Array.from(target.parentElement!.querySelectorAll('[option]')).filter(\n                    option => !option.hasAttribute('hidden')\n                  )\n                  options.forEach(option => ((option as HTMLInputElement).checked = target.checked))\n\n                  this.value = options\n                    .map(option =>\n                      (option as HTMLInputElement).checked ? (option as HTMLInputElement).value : undefined\n                    )\n                    .filter(Boolean)\n                }}\n                >set all</ox-checkbox\n              >\n              ${objOptions.map(\n                option => html` <ox-checkbox option value=${option.value}>${option.display}</ox-checkbox> `\n              )}`\n          : html`${objOptions.map(option => html` <div option value=${option.value}>${option.display}</div> `)}`}\n      </ox-popup-list>\n    `\n\n    render(template, this)\n  }\n\n  expand() {\n    if (this.disabled) {\n      return\n    }\n\n    const slotContent = (this.renderRoot.querySelector('slot:not([name])') as HTMLSlotElement)?.assignedNodes() || []\n\n    if (slotContent.length > 0) {\n      const popupList = slotContent.find(content => content instanceof OxPopupList) as OxPopupList\n\n      if (popupList) {\n        const { left, bottom } = this.getBoundingClientRect()\n\n        popupList.value = this.value\n        popupList.style.width = `${this.offsetWidth}px`\n        popupList.style.textWrap = 'nowrap'\n\n        const selectHandler = async (e: Event) => {\n          this.value = (e as CustomEvent).detail\n\n          if (popupList) {\n            await this.requestUpdate()\n            this.label = popupList.getSelectedLabels()\n          }\n        }\n        popupList.addEventListener('select', selectHandler)\n\n        const closeHandler = (e: Event) => {\n          /* popup이 close될 때 change 이벤트를 발생시킨다. */\n          this.dispatchEvent(\n            new CustomEvent('change', {\n              bubbles: true,\n              composed: true,\n              detail: this.value\n            })\n          )\n          popupList.removeEventListener('select', selectHandler)\n          popupList.removeEventListener('close', closeHandler)\n\n          this.appendChild(popupList)\n        }\n        popupList.addEventListener('close', closeHandler, { once: true })\n\n        document.body.appendChild(popupList)\n\n        popupList.open({\n          left,\n          top: bottom\n        })\n      }\n    }\n  }\n}\n"]}

package/dist/test/ox-form-field.test.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,125 @@
+import { __decorate } from "tslib";
+import { html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { fixture, expect } from '@open-wc/testing';
+import { OxFormField } from '../src/ox-form-field.js';
+/**
+ * OxFormField 계약 테스트.
+ *
+ * 이 기반 클래스는 51개 입력 컴포넌트가 상속하므로, 계약이 깨지면 전 패키지에 파급된다.
+ * 검증 대상:
+ *   - 상태 속성의 attribute reflect (InputStyles 의 :host([...]) 선택자가 동작하기 위한 전제)
+ *   - required 기반 검증(checkValidity / invalid / invalid 이벤트)
+ *   - isEmpty 의 경계값(0·false 는 유효한 값)
+ *   - 폼 데이터 수집(formdata) 과 disabled 제외 규칙
+ */
+/** 테스트용 최소 구현체 — 기반 계약만 노출한다. */
+let TestFormField = class TestFormField extends OxFormField {
+    render() {
+        return html `<span>field</span>`;
+    }
+    /* 테스트에서 보호된 멤버를 확인하기 위한 창구 */
+    callIsEmpty() {
+        return this.isEmpty();
+    }
+};
+TestFormField = __decorate([
+    customElement('test-form-field')
+], TestFormField);
+async function makeField(template = html `<test-form-field></test-form-field>`) {
+    return (await fixture(template));
+}
+describe('OxFormField — 상태 계약', () => {
+    it('상태 속성이 attribute 로 reflect 된다 (프로퍼티로 설정해도 :host([...]) 가 동작)', async () => {
+        const el = await makeField();
+        el.disabled = true;
+        el.readonly = true;
+        el.required = true;
+        el.invalid = true;
+        await el.updateComplete;
+        expect(el.hasAttribute('disabled')).to.be.true;
+        expect(el.hasAttribute('readonly')).to.be.true;
+        expect(el.hasAttribute('required')).to.be.true;
+        expect(el.hasAttribute('invalid')).to.be.true;
+    });
+    it('상태를 해제하면 attribute 도 제거된다', async () => {
+        const el = await makeField(html `<test-form-field disabled readonly></test-form-field>`);
+        expect(el.disabled).to.be.true;
+        expect(el.readonly).to.be.true;
+        el.disabled = false;
+        el.readonly = false;
+        await el.updateComplete;
+        expect(el.hasAttribute('disabled')).to.be.false;
+        expect(el.hasAttribute('readonly')).to.be.false;
+    });
+});
+describe('OxFormField — isEmpty 경계값', () => {
+    it('nullish / 빈 문자열 / 공백 / 빈 배열은 비어 있다', async () => {
+        const el = await makeField();
+        for (const v of [undefined, null, '', '   ', []]) {
+            el.value = v;
+            expect(el.callIsEmpty(), `value=${JSON.stringify(v)}`).to.be.true;
+        }
+    });
+    it('숫자 0 과 false 는 유효한 값이므로 비어 있지 않다', async () => {
+        const el = await makeField();
+        el.value = 0;
+        expect(el.callIsEmpty(), 'value=0').to.be.false;
+        el.value = false;
+        expect(el.callIsEmpty(), 'value=false').to.be.false;
+    });
+});
+describe('OxFormField — 검증', () => {
+    it('required 가 아니면 값이 비어도 유효하다', async () => {
+        const el = await makeField();
+        expect(el.checkValidity()).to.be.true;
+        expect(el.invalid).to.be.false;
+    });
+    it('required 인데 값이 비면 invalid 가 되고 invalid 이벤트가 올라온다', async () => {
+        const el = await makeField(html `<test-form-field required name="f"></test-form-field>`);
+        let detail = null;
+        el.addEventListener('invalid', (e) => {
+            detail = e.detail;
+        });
+        expect(el.checkValidity()).to.be.false;
+        expect(el.invalid).to.be.true;
+        expect(detail).to.deep.equal({ field: 'f' });
+    });
+    it('값을 채우면 다시 유효해지고 invalid 가 해제된다', async () => {
+        const el = await makeField(html `<test-form-field required></test-form-field>`);
+        expect(el.checkValidity()).to.be.false;
+        el.value = 'filled';
+        expect(el.checkValidity()).to.be.true;
+        expect(el.invalid).to.be.false;
+    });
+});
+describe('OxFormField — 폼 데이터 수집', () => {
+    async function collect(fieldTemplate) {
+        const form = (await fixture(html `<form>${fieldTemplate}</form>`));
+        return new FormData(form);
+    }
+    it('name 이 있으면 값이 폼 데이터에 담긴다', async () => {
+        const data = await collect(html `<test-form-field name="a" .value=${'1'}></test-form-field>`);
+        expect(data.get('a')).to.equal('1');
+    });
+    it('배열 값은 여러 항목으로 담긴다', async () => {
+        const data = await collect(html `<test-form-field name="b" .value=${['x', 'y']}></test-form-field>`);
+        expect(data.getAll('b')).to.deep.equal(['x', 'y']);
+    });
+    it('disabled 는 폼 데이터에 포함되지 않는다 (HTML 표준 거동)', async () => {
+        const data = await collect(html `<test-form-field name="c" disabled .value=${'skip'}></test-form-field>`);
+        expect(data.has('c')).to.be.false;
+    });
+    it('readonly 는 수정만 막는 상태이므로 폼 데이터에 포함된다', async () => {
+        const data = await collect(html `<test-form-field name="d" readonly .value=${'keep'}></test-form-field>`);
+        expect(data.get('d')).to.equal('keep');
+    });
+    it('name 이 없으면 수집되지 않는다', async () => {
+        const form = (await fixture(html `<form><test-form-field .value=${'anon'}></test-form-field></form>`));
+        const data = new FormData(form);
+        /* name 이 없으면 어떤 키로도 담기지 않는다 */
+        expect(data.has('')).to.be.false;
+        expect(data.get('undefined')).to.be.null;
+    });
+});
+//# sourceMappingURL=ox-form-field.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-form-field.test.js","sourceRoot":"","sources":["../../test/ox-form-field.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit'\nimport { customElement } from 'lit/decorators.js'\nimport { fixture, expect } from '@open-wc/testing'\n\nimport { OxFormField } from '../src/ox-form-field.js'\n\n/**\n * OxFormField 계약 테스트.\n *\n * 이 기반 클래스는 51개 입력 컴포넌트가 상속하므로, 계약이 깨지면 전 패키지에 파급된다.\n * 검증 대상:\n *   - 상태 속성의 attribute reflect (InputStyles 의 :host([...]) 선택자가 동작하기 위한 전제)\n *   - required 기반 검증(checkValidity / invalid / invalid 이벤트)\n *   - isEmpty 의 경계값(0·false 는 유효한 값)\n *   - 폼 데이터 수집(formdata) 과 disabled 제외 규칙\n */\n\n/** 테스트용 최소 구현체 — 기반 계약만 노출한다. */\n@customElement('test-form-field')\nclass TestFormField extends OxFormField<any> {\n  render() {\n    return html`<span>field</span>`\n  }\n\n  /* 테스트에서 보호된 멤버를 확인하기 위한 창구 */\n  public callIsEmpty(): boolean {\n    return this.isEmpty()\n  }\n}\n\nasync function makeField(template = html`<test-form-field></test-form-field>`) {\n  return (await fixture(template)) as TestFormField\n}\n\ndescribe('OxFormField — 상태 계약', () => {\n  it('상태 속성이 attribute 로 reflect 된다 (프로퍼티로 설정해도 :host([...]) 가 동작)', async () => {\n    const el = await makeField()\n\n    el.disabled = true\n    el.readonly = true\n    el.required = true\n    el.invalid = true\n    await el.updateComplete\n\n    expect(el.hasAttribute('disabled')).to.be.true\n    expect(el.hasAttribute('readonly')).to.be.true\n    expect(el.hasAttribute('required')).to.be.true\n    expect(el.hasAttribute('invalid')).to.be.true\n  })\n\n  it('상태를 해제하면 attribute 도 제거된다', async () => {\n    const el = await makeField(html`<test-form-field disabled readonly></test-form-field>`)\n\n    expect(el.disabled).to.be.true\n    expect(el.readonly).to.be.true\n\n    el.disabled = false\n    el.readonly = false\n    await el.updateComplete\n\n    expect(el.hasAttribute('disabled')).to.be.false\n    expect(el.hasAttribute('readonly')).to.be.false\n  })\n})\n\ndescribe('OxFormField — isEmpty 경계값', () => {\n  it('nullish / 빈 문자열 / 공백 / 빈 배열은 비어 있다', async () => {\n    const el = await makeField()\n\n    for (const v of [undefined, null, '', '   ', [] as any[]]) {\n      el.value = v\n      expect(el.callIsEmpty(), `value=${JSON.stringify(v)}`).to.be.true\n    }\n  })\n\n  it('숫자 0 과 false 는 유효한 값이므로 비어 있지 않다', async () => {\n    const el = await makeField()\n\n    el.value = 0\n    expect(el.callIsEmpty(), 'value=0').to.be.false\n\n    el.value = false\n    expect(el.callIsEmpty(), 'value=false').to.be.false\n  })\n})\n\ndescribe('OxFormField — 검증', () => {\n  it('required 가 아니면 값이 비어도 유효하다', async () => {\n    const el = await makeField()\n\n    expect(el.checkValidity()).to.be.true\n    expect(el.invalid).to.be.false\n  })\n\n  it('required 인데 값이 비면 invalid 가 되고 invalid 이벤트가 올라온다', async () => {\n    const el = await makeField(html`<test-form-field required name=\"f\"></test-form-field>`)\n\n    let detail: any = null\n    el.addEventListener('invalid', (e: Event) => {\n      detail = (e as CustomEvent).detail\n    })\n\n    expect(el.checkValidity()).to.be.false\n    expect(el.invalid).to.be.true\n    expect(detail).to.deep.equal({ field: 'f' })\n  })\n\n  it('값을 채우면 다시 유효해지고 invalid 가 해제된다', async () => {\n    const el = await makeField(html`<test-form-field required></test-form-field>`)\n\n    expect(el.checkValidity()).to.be.false\n\n    el.value = 'filled'\n    expect(el.checkValidity()).to.be.true\n    expect(el.invalid).to.be.false\n  })\n})\n\ndescribe('OxFormField — 폼 데이터 수집', () => {\n  async function collect(fieldTemplate: unknown) {\n    const form = (await fixture(html`<form>${fieldTemplate}</form>`)) as HTMLFormElement\n    return new FormData(form)\n  }\n\n  it('name 이 있으면 값이 폼 데이터에 담긴다', async () => {\n    const data = await collect(html`<test-form-field name=\"a\" .value=${'1'}></test-form-field>`)\n\n    expect(data.get('a')).to.equal('1')\n  })\n\n  it('배열 값은 여러 항목으로 담긴다', async () => {\n    const data = await collect(html`<test-form-field name=\"b\" .value=${['x', 'y']}></test-form-field>`)\n\n    expect(data.getAll('b')).to.deep.equal(['x', 'y'])\n  })\n\n  it('disabled 는 폼 데이터에 포함되지 않는다 (HTML 표준 거동)', async () => {\n    const data = await collect(html`<test-form-field name=\"c\" disabled .value=${'skip'}></test-form-field>`)\n\n    expect(data.has('c')).to.be.false\n  })\n\n  it('readonly 는 수정만 막는 상태이므로 폼 데이터에 포함된다', async () => {\n    const data = await collect(html`<test-form-field name=\"d\" readonly .value=${'keep'}></test-form-field>`)\n\n    expect(data.get('d')).to.equal('keep')\n  })\n\n  it('name 이 없으면 수집되지 않는다', async () => {\n    const form = (await fixture(\n      html`<form><test-form-field .value=${'anon'}></test-form-field></form>`\n    )) as HTMLFormElement\n    const data = new FormData(form)\n\n    /* name 이 없으면 어떤 키로도 담기지 않는다 */\n    expect(data.has('')).to.be.false\n    expect(data.get('undefined')).to.be.null\n  })\n})\n"]}