@operato/input 10.7.0 → 10.8.0

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.8.0](https://github.com/hatiolab/operato/compare/v10.7.0...v10.8.0) (2026-09-04)
+
+
+### :bug: Bug Fix
+
+* **input:** 밑줄 형태의 여백과 톤을 계약으로 모은다 ([3c1968f](https://github.com/hatiolab/operato/commit/3c1968f659ea767d7b53388772b3ae561915c368)), closes [#e0e0e0](https://github.com/hatiolab/operato/issues/e0e0e0)
+
+
+
 ## [10.7.0](https://github.com/hatiolab/operato/compare/v10.6.0...v10.7.0) (2026-09-02)
 
 

package/dist/src/input-styles.js

@@ -43,6 +43,16 @@ export const InputStyles = css `
     --ox-input-background: var(--md-sys-color-surface, #fff);
     --ox-input-border-color: var(--md-sys-color-outline, rgba(0, 0, 0, 0.25));
     --ox-input-border: 1px solid var(--ox-input-border-color);
+    /*
+     * 쉬고 있는 밑줄 — 테두리 상자의 선보다 옅다.
+     *
+     * outline 은 상자를 두른 필드의 선이다. 밑줄만 있는 형태에 그것을 쓰면 필터 줄에서 옆의 필드보다
+     * 진해 보인다. 이 패키지 안에서도 세 부품이 손으로 rgba(0, 0, 0, 0.15) 또는 #e0e0e0 을 박았고,
+     * 그 값들이 모두 outline-variant(rgb 214 219 224)에 해당한다 — 손으로 도달한 값이 셋 다 같다는
+     * 것이 의도의 증거다. 그 값을 계약으로 올린다.
+     */
+    --ox-input-underline-color: var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15));
+    --ox-input-underline: 1px solid var(--ox-input-underline-color);
     --ox-input-focus-color: var(--md-sys-color-primary, #495d92);
     --ox-input-placeholder-color: var(--md-sys-color-on-surface-variant, #45464f);
     /* 상태 색 — 검증 실패 / 필수 표시 */
@@ -55,7 +65,19 @@ export const InputStyles = css `
     --ox-input-radius: var(--md-sys-shape-corner-small, 4px);
     /* 드롭다운·피커 등 팝업 표면은 필드보다 큰 라운드를 쓴다(기본 2배, 앱이 조정 가능) */
     --ox-input-popup-radius: var(--md-sys-shape-corner-medium, calc(var(--ox-input-radius) * 2));
-    --ox-input-padding: 4px 9px;
+    /*
+     * ── 밑줄만 있는 형태의 여백이다 ─────────────────────────────────────
+     * 4px 9px 이었다. 그건 **테두리 상자가 있는 필드**의 값이다 — 이 필드들은 아래 밑줄만
+     * 있으므로, 가로 9px 은 글자와 아이콘을 밑줄 끝에서 멀찍이 들여놓는다. 필터 줄처럼 촘촘한
+     * 자리에서 그 헐렁함이 옆의 검색 입력과 어긋나 보인다.
+     *
+     * 실측(2026-09-03, 직원 목록 필터): 셀렉터 안쪽 padding 4px/9px · 높이 22px · 아이콘이 오른쪽
+     * 끝에서 9px. 같은 줄의 검색 입력은 2px · 20px · 2px.
+     *
+     * **operato 안에서 이미 어긋나 있었다** — ox-input-search 는 --ox-input-gap 의 절반(2px)을
+     * 쓴다. 그 값으로 모은다. 값을 베끼지 않고 같은 식에서 파생시켜 둘이 다시 갈라지지 않게 한다.
+     */
+    --ox-input-padding: calc(var(--ox-input-gap) / 2);
     --ox-input-gap: 4px;
     --ox-input-height: 30px;
 

package/dist/src/input-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-styles.js","sourceRoot":"","sources":["../../src/input-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoE7B,CAAA","sourcesContent":["import { css } from 'lit'\n\n/**\n * 입력 컴포넌트 공통 스타일 계약 (L2).\n *\n * ## 왜 필요한가\n * 이 패키지의 51개 컴포넌트는 여백·라운드·폰트·높이·전환을 각자 리터럴로 박아 두었다\n * (border-radius 8종, font-size 8종, padding 8종, transition 4종 …).\n * 그래서 (a) 나란히 놓으면 어긋나 보이고, (b) 앱이 전체 인상을 바꿀 방법이 없고,\n * (c) `--spacing-small` 같은 **패키지 밖 var 를 정의 없이 참조**해 호스트 테마가 없으면 무너졌다.\n *\n * ## 계층\n * ```\n * L1  --md-sys-*        Material 팔레트·shape  (앱/프레임워크 테마 소유)\n * L2  --ox-input-*      입력 의미 계약          (이 패키지 소유 ← 여기)\n * L3  --ox-select-* 등  컴포넌트 미세 조정      (각 컴포넌트 소유)\n * ```\n *\n * ## 규칙\n * 1. **인상에 영향을 주는 값은 고정하지 않는다.** 색·여백·라운드·폰트·높이·전환·그림자는 모두\n *    아래 var 로 노출하며, 앱은 어느 층에서든 덮어쓸 수 있다.\n * 2. **기본값은 L1 토큰에서 파생**한다 → 앱이 아무것도 하지 않아도 테마·다크가 자동 정합된다.\n * 3. **리터럴 fallback 을 함께 둔다** → Material 토큰조차 없는 단독 환경(Storybook 등)에서도 자립.\n * 4. 구조적 필연(원형 스와치 `50%`, 탭 상단 `8px 8px 0 0` 등)은 계약 대상이 아니다.\n *\n * ## 사용법\n * ```ts\n * static styles = [InputStyles, css`...`]   // 컴포넌트 styles 배열 맨 앞에\n * ```\n * 컴포넌트 내부에서는 리터럴 대신 계약 var 를 쓴다:\n * ```css\n * padding: var(--ox-input-padding);\n * border-radius: var(--ox-input-radius);\n * ```\n * 컴포넌트별로 달라야 하면 2단 폴백으로 조정 지점을 남긴다:\n * ```css\n * color: var(--ox-select-color, var(--ox-input-color));\n * ```\n */\nexport const InputStyles = css`\n  :host {\n    /* ── 색 ─────────────────────────────────────────────── */\n    --ox-input-color: var(--md-sys-color-on-surface, #1a1b21);\n    --ox-input-background: var(--md-sys-color-surface, #fff);\n    --ox-input-border-color: var(--md-sys-color-outline, rgba(0, 0, 0, 0.25));\n    --ox-input-border: 1px solid var(--ox-input-border-color);\n    --ox-input-focus-color: var(--md-sys-color-primary, #495d92);\n    --ox-input-placeholder-color: var(--md-sys-color-on-surface-variant, #45464f);\n    /* 상태 색 — 검증 실패 / 필수 표시 */\n    --ox-input-invalid-color: var(--md-sys-color-error, #b3261e);\n    --ox-input-required-color: var(--ox-input-invalid-color);\n    /* readonly 는 흐리게 하지 않는다(값을 읽는 상태이므로). 배경으로만 구분한다. */\n    --ox-input-readonly-background: var(--md-sys-color-surface-container-low, rgba(0, 0, 0, 0.03));\n\n    /* ── 형태 ───────────────────────────────────────────── */\n    --ox-input-radius: var(--md-sys-shape-corner-small, 4px);\n    /* 드롭다운·피커 등 팝업 표면은 필드보다 큰 라운드를 쓴다(기본 2배, 앱이 조정 가능) */\n    --ox-input-popup-radius: var(--md-sys-shape-corner-medium, calc(var(--ox-input-radius) * 2));\n    --ox-input-padding: 4px 9px;\n    --ox-input-gap: 4px;\n    --ox-input-height: 30px;\n\n    /* ── 타이포 ─────────────────────────────────────────── */\n    --ox-input-font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n    /* 보조 텍스트(설명·단위·캡션). 기존에 10~13px 로 흩어져 있던 것을 한 단계로 수렴. */\n    --ox-input-font-size-small: var(--md-sys-typescale-label-medium-size, 0.75rem);\n    --ox-input-font-family: inherit;\n    --ox-input-font: normal var(--ox-input-font-size) var(--ox-input-font-family);\n    --ox-input-line-height: 1.4;\n\n    /* ── 거동·깊이 ──────────────────────────────────────── */\n    --ox-input-transition: all 0.2s ease;\n    --ox-input-shadow: 0 4px 16px var(--md-sys-color-shadow-alpha, rgba(0, 0, 0, 0.2));\n    /* 모달 뒤 배경(스크림) — 알파가 본질이라 토큰 파생이 아닌 반투명 값을 유지하되 조정 가능하게 */\n    --ox-input-scrim: rgba(0, 0, 0, 0.5);\n    --ox-input-disabled-opacity: 0.5;\n\n    box-sizing: border-box;\n    color: var(--ox-input-color);\n    font: var(--ox-input-font);\n    line-height: var(--ox-input-line-height);\n  }\n\n  /* disabled — 상호작용 불가 + 흐리게. 폼 데이터 제외는 OxFormField 가 처리. */\n  :host([disabled]) {\n    opacity: var(--ox-input-disabled-opacity);\n    pointer-events: none;\n  }\n\n  /* readonly — 값을 읽고 선택·복사할 수 있어야 하므로 흐리게 하지 않고 배경으로만 구분.\n     실제 수정 차단은 각 컴포넌트가 입력 요소에 readonly 를 전달해 처리한다. */\n  :host([readonly]) {\n    --ox-input-background: var(--ox-input-readonly-background);\n    cursor: default;\n  }\n\n  /* invalid — 테두리·포커스 색을 error 로 전환. 컴포넌트가 --ox-input-border 를 쓰면 자동 반영. */\n  :host([invalid]) {\n    --ox-input-border-color: var(--ox-input-invalid-color);\n    --ox-input-focus-color: var(--ox-input-invalid-color);\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n`\n"]}
+{"version":3,"file":"input-styles.js","sourceRoot":"","sources":["../../src/input-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0F7B,CAAA","sourcesContent":["import { css } from 'lit'\n\n/**\n * 입력 컴포넌트 공통 스타일 계약 (L2).\n *\n * ## 왜 필요한가\n * 이 패키지의 51개 컴포넌트는 여백·라운드·폰트·높이·전환을 각자 리터럴로 박아 두었다\n * (border-radius 8종, font-size 8종, padding 8종, transition 4종 …).\n * 그래서 (a) 나란히 놓으면 어긋나 보이고, (b) 앱이 전체 인상을 바꿀 방법이 없고,\n * (c) `--spacing-small` 같은 **패키지 밖 var 를 정의 없이 참조**해 호스트 테마가 없으면 무너졌다.\n *\n * ## 계층\n * ```\n * L1  --md-sys-*        Material 팔레트·shape  (앱/프레임워크 테마 소유)\n * L2  --ox-input-*      입력 의미 계약          (이 패키지 소유 ← 여기)\n * L3  --ox-select-* 등  컴포넌트 미세 조정      (각 컴포넌트 소유)\n * ```\n *\n * ## 규칙\n * 1. **인상에 영향을 주는 값은 고정하지 않는다.** 색·여백·라운드·폰트·높이·전환·그림자는 모두\n *    아래 var 로 노출하며, 앱은 어느 층에서든 덮어쓸 수 있다.\n * 2. **기본값은 L1 토큰에서 파생**한다 → 앱이 아무것도 하지 않아도 테마·다크가 자동 정합된다.\n * 3. **리터럴 fallback 을 함께 둔다** → Material 토큰조차 없는 단독 환경(Storybook 등)에서도 자립.\n * 4. 구조적 필연(원형 스와치 `50%`, 탭 상단 `8px 8px 0 0` 등)은 계약 대상이 아니다.\n *\n * ## 사용법\n * ```ts\n * static styles = [InputStyles, css`...`]   // 컴포넌트 styles 배열 맨 앞에\n * ```\n * 컴포넌트 내부에서는 리터럴 대신 계약 var 를 쓴다:\n * ```css\n * padding: var(--ox-input-padding);\n * border-radius: var(--ox-input-radius);\n * ```\n * 컴포넌트별로 달라야 하면 2단 폴백으로 조정 지점을 남긴다:\n * ```css\n * color: var(--ox-select-color, var(--ox-input-color));\n * ```\n */\nexport const InputStyles = css`\n  :host {\n    /* ── 색 ─────────────────────────────────────────────── */\n    --ox-input-color: var(--md-sys-color-on-surface, #1a1b21);\n    --ox-input-background: var(--md-sys-color-surface, #fff);\n    --ox-input-border-color: var(--md-sys-color-outline, rgba(0, 0, 0, 0.25));\n    --ox-input-border: 1px solid var(--ox-input-border-color);\n    /*\n     * 쉬고 있는 밑줄 — 테두리 상자의 선보다 옅다.\n     *\n     * outline 은 상자를 두른 필드의 선이다. 밑줄만 있는 형태에 그것을 쓰면 필터 줄에서 옆의 필드보다\n     * 진해 보인다. 이 패키지 안에서도 세 부품이 손으로 rgba(0, 0, 0, 0.15) 또는 #e0e0e0 을 박았고,\n     * 그 값들이 모두 outline-variant(rgb 214 219 224)에 해당한다 — 손으로 도달한 값이 셋 다 같다는\n     * 것이 의도의 증거다. 그 값을 계약으로 올린다.\n     */\n    --ox-input-underline-color: var(--md-sys-color-outline-variant, rgba(0, 0, 0, 0.15));\n    --ox-input-underline: 1px solid var(--ox-input-underline-color);\n    --ox-input-focus-color: var(--md-sys-color-primary, #495d92);\n    --ox-input-placeholder-color: var(--md-sys-color-on-surface-variant, #45464f);\n    /* 상태 색 — 검증 실패 / 필수 표시 */\n    --ox-input-invalid-color: var(--md-sys-color-error, #b3261e);\n    --ox-input-required-color: var(--ox-input-invalid-color);\n    /* readonly 는 흐리게 하지 않는다(값을 읽는 상태이므로). 배경으로만 구분한다. */\n    --ox-input-readonly-background: var(--md-sys-color-surface-container-low, rgba(0, 0, 0, 0.03));\n\n    /* ── 형태 ───────────────────────────────────────────── */\n    --ox-input-radius: var(--md-sys-shape-corner-small, 4px);\n    /* 드롭다운·피커 등 팝업 표면은 필드보다 큰 라운드를 쓴다(기본 2배, 앱이 조정 가능) */\n    --ox-input-popup-radius: var(--md-sys-shape-corner-medium, calc(var(--ox-input-radius) * 2));\n    /*\n     * ── 밑줄만 있는 형태의 여백이다 ─────────────────────────────────────\n     * 4px 9px 이었다. 그건 **테두리 상자가 있는 필드**의 값이다 — 이 필드들은 아래 밑줄만\n     * 있으므로, 가로 9px 은 글자와 아이콘을 밑줄 끝에서 멀찍이 들여놓는다. 필터 줄처럼 촘촘한\n     * 자리에서 그 헐렁함이 옆의 검색 입력과 어긋나 보인다.\n     *\n     * 실측(2026-09-03, 직원 목록 필터): 셀렉터 안쪽 padding 4px/9px · 높이 22px · 아이콘이 오른쪽\n     * 끝에서 9px. 같은 줄의 검색 입력은 2px · 20px · 2px.\n     *\n     * **operato 안에서 이미 어긋나 있었다** — ox-input-search 는 --ox-input-gap 의 절반(2px)을\n     * 쓴다. 그 값으로 모은다. 값을 베끼지 않고 같은 식에서 파생시켜 둘이 다시 갈라지지 않게 한다.\n     */\n    --ox-input-padding: calc(var(--ox-input-gap) / 2);\n    --ox-input-gap: 4px;\n    --ox-input-height: 30px;\n\n    /* ── 타이포 ─────────────────────────────────────────── */\n    --ox-input-font-size: var(--md-sys-typescale-label-large-size, 0.875rem);\n    /* 보조 텍스트(설명·단위·캡션). 기존에 10~13px 로 흩어져 있던 것을 한 단계로 수렴. */\n    --ox-input-font-size-small: var(--md-sys-typescale-label-medium-size, 0.75rem);\n    --ox-input-font-family: inherit;\n    --ox-input-font: normal var(--ox-input-font-size) var(--ox-input-font-family);\n    --ox-input-line-height: 1.4;\n\n    /* ── 거동·깊이 ──────────────────────────────────────── */\n    --ox-input-transition: all 0.2s ease;\n    --ox-input-shadow: 0 4px 16px var(--md-sys-color-shadow-alpha, rgba(0, 0, 0, 0.2));\n    /* 모달 뒤 배경(스크림) — 알파가 본질이라 토큰 파생이 아닌 반투명 값을 유지하되 조정 가능하게 */\n    --ox-input-scrim: rgba(0, 0, 0, 0.5);\n    --ox-input-disabled-opacity: 0.5;\n\n    box-sizing: border-box;\n    color: var(--ox-input-color);\n    font: var(--ox-input-font);\n    line-height: var(--ox-input-line-height);\n  }\n\n  /* disabled — 상호작용 불가 + 흐리게. 폼 데이터 제외는 OxFormField 가 처리. */\n  :host([disabled]) {\n    opacity: var(--ox-input-disabled-opacity);\n    pointer-events: none;\n  }\n\n  /* readonly — 값을 읽고 선택·복사할 수 있어야 하므로 흐리게 하지 않고 배경으로만 구분.\n     실제 수정 차단은 각 컴포넌트가 입력 요소에 readonly 를 전달해 처리한다. */\n  :host([readonly]) {\n    --ox-input-background: var(--ox-input-readonly-background);\n    cursor: default;\n  }\n\n  /* invalid — 테두리·포커스 색을 error 로 전환. 컴포넌트가 --ox-input-border 를 쓰면 자동 반영. */\n  :host([invalid]) {\n    --ox-input-border-color: var(--ox-input-invalid-color);\n    --ox-input-focus-color: var(--ox-input-invalid-color);\n  }\n\n  *,\n  *::before,\n  *::after {\n    box-sizing: border-box;\n  }\n`\n"]}

package/dist/src/ox-input-formula-help-popup.js

@@ -29,7 +29,7 @@ let OxInputFormulaHelpPopup = class OxInputFormulaHelpPopup extends LitElement {
         color: var(--ox-input-focus-color);
         padding: 20px 20px 16px 20px;
         background: var(--ox-help-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));
-        border-bottom: 1px solid #e0e0e0;
+        border-bottom: var(--ox-input-underline);
         border-radius: 8px 8px 0 0;
       }
 
@@ -46,7 +46,7 @@ let OxInputFormulaHelpPopup = class OxInputFormulaHelpPopup extends LitElement {
         margin-bottom: 8px;
         color: var(--ox-input-color);
         font-size: var(--ox-input-font-size);
-        border-bottom: 1px solid #e0e0e0;
+        border-bottom: var(--ox-input-underline);
         padding-bottom: 4px;
       }
 

package/dist/src/ox-input-formula-help-popup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ox-input-formula-help-popup.js","sourceRoot":"","sources":["../../src/ox-input-formula-help-popup.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAY1C,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;aAC9C,WAAM,GAAG;QACd,WAAW;QACX,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0GF;KACF,AA9GY,CA8GZ;IAKD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,OAAO,IAAI,CAAA;;kCAEmB,IAAI,CAAC,OAAO,CAAC,KAAK;;;YAGxC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CACzB,OAAO,CAAC,EAAE,CAAC,IAAI,CAAA;;kDAEuB,OAAO,CAAC,KAAK;kBAC7C,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC;;aAExC,CACF;;;;6CAIkC,IAAI,CAAC,QAAQ;;;KAGrD,CAAA;IACH,CAAC;IAEO,qBAAqB,CAAC,OAAY;QACxC,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAC;YACrB,KAAK,MAAM;gBACT,OAAO,IAAI,CAAA,0BAA0B,OAAO,CAAC,OAAO,QAAQ,CAAA;YAC9D,KAAK,WAAW;gBACd,OAAO,IAAI,CAAA,+BAA+B,OAAO,CAAC,OAAO,QAAQ,CAAA;YACnE,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAA,6BAA6B,OAAO,CAAC,OAAO,QAAQ,CAAA;YACjE;gBACE,OAAO,IAAI,CAAA,qCAAqC,OAAO,CAAC,OAAO,QAAQ,CAAA;QAC3E,CAAC;IACH,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,OAAO,EAAE,EAAE,CAAA;IAClB,CAAC;;AA7C2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAqB;AAlHrC,uBAAuB;IADnC,aAAa,CAAC,6BAA6B,CAAC;GAChC,uBAAuB,CA+JnC","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { InputStyles } from './input-styles.js'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nexport type HelpContent = {\n  title: string\n  sections: Array<{\n    title: string\n    content: string\n    type?: 'text' | 'code' | 'parameter' | 'example'\n  }>\n}\n\n@customElement('ox-input-formula-help-popup')\nexport class OxInputFormulaHelpPopup extends LitElement {\n  static styles = [\n    InputStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .help-popup {\n        max-width: 500px;\n        max-height: 400px;\n        overflow-y: auto;\n        background: var(--ox-input-background);\n        border-radius: var(--ox-input-radius);\n        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\n      }\n\n      .help-title {\n        font-size: 20px;\n        font-weight: 600;\n        margin-bottom: 16px;\n        color: var(--ox-input-focus-color);\n        padding: 20px 20px 16px 20px;\n        background: var(--ox-help-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));\n        border-bottom: 1px solid #e0e0e0;\n        border-radius: 8px 8px 0 0;\n      }\n\n      .help-content {\n        padding: 0 20px;\n      }\n\n      .help-section {\n        margin-bottom: 16px;\n      }\n\n      .help-section-title {\n        font-weight: 600;\n        margin-bottom: 8px;\n        color: var(--ox-input-color);\n        font-size: var(--ox-input-font-size);\n        border-bottom: 1px solid #e0e0e0;\n        padding-bottom: 4px;\n      }\n\n      .help-section-content {\n        font-size: var(--ox-input-font-size);\n        line-height: 1.6;\n        color: var(--ox-input-placeholder-color);\n        padding: 4px 0;\n      }\n\n      .help-code {\n        background: var(--ox-help-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));\n        border: 1px solid #e0e0e0;\n        border-radius: var(--ox-input-radius);\n        padding: 12px;\n        font-family: 'Courier New', monospace;\n        font-size: var(--ox-input-font-size-small);\n        color: var(--ox-input-color);\n        margin: 8px 0;\n      }\n\n      .help-example {\n        background: var(--md-sys-color-secondary-container);\n        border: 1px solid #c8e6c9;\n        border-radius: var(--ox-input-radius);\n        padding: 12px;\n        font-family: 'Courier New', monospace;\n        font-size: var(--ox-input-font-size-small);\n        color: var(--md-sys-color-on-tertiary-container);\n        margin: 8px 0;\n      }\n\n      .help-parameter {\n        background: var(--ox-help-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));\n        border-left: 3px solid #1976d2;\n        border-radius: var(--ox-input-radius);\n        padding: 8px 12px;\n        margin-bottom: 4px;\n        font-size: var(--ox-input-font-size-small);\n        color: var(--ox-input-placeholder-color);\n      }\n\n      .help-footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: 16px 20px;\n        border-top: 1px solid #e0e0e0;\n        background: var(--ox-help-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));\n        border-radius: 0 0 8px 8px;\n      }\n\n      .close-btn {\n        padding: 8px 16px;\n        border: 1px solid #1976d2;\n        border-radius: var(--ox-input-radius);\n        background-color: var(--ox-input-focus-color);\n        color: var(--md-sys-color-on-primary);\n        cursor: pointer;\n        font-size: var(--ox-input-font-size);\n        font-weight: 500;\n        transition: var(--ox-input-transition);\n      }\n\n      .close-btn:hover {\n        background-color: var(--ox-input-focus-color);\n        border-color: var(--ox-input-focus-color);\n      }\n    `\n  ]\n\n  @property({ type: Object }) content?: HelpContent\n  @property({ type: Object }) onClose?: () => void\n\n  render() {\n    if (!this.content) {\n      return html``\n    }\n\n    return html`\n      <div class=\"help-popup\">\n        <div class=\"help-title\">${this.content.title}</div>\n\n        <div class=\"help-content\">\n          ${this.content.sections.map(\n            section => html`\n              <div class=\"help-section\">\n                <div class=\"help-section-title\">${section.title}</div>\n                ${this._renderSectionContent(section)}\n              </div>\n            `\n          )}\n        </div>\n\n        <div class=\"help-footer\">\n          <button class=\"close-btn\" @click=${this._onClose}>닫기</button>\n        </div>\n      </div>\n    `\n  }\n\n  private _renderSectionContent(section: any) {\n    switch (section.type) {\n      case 'code':\n        return html`<div class=\"help-code\">${section.content}</div>`\n      case 'parameter':\n        return html`<div class=\"help-parameter\">${section.content}</div>`\n      case 'example':\n        return html`<div class=\"help-example\">${section.content}</div>`\n      default:\n        return html`<div class=\"help-section-content\">${section.content}</div>`\n    }\n  }\n\n  private _onClose() {\n    this.onClose?.()\n  }\n}\n"]}
+{"version":3,"file":"ox-input-formula-help-popup.js","sourceRoot":"","sources":["../../src/ox-input-formula-help-popup.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AAEnC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAY1C,IAAM,uBAAuB,GAA7B,MAAM,uBAAwB,SAAQ,UAAU;aAC9C,WAAM,GAAG;QACd,WAAW;QACX,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA0GF;KACF,AA9GY,CA8GZ;IAKD,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO,IAAI,CAAA,EAAE,CAAA;QACf,CAAC;QAED,OAAO,IAAI,CAAA;;kCAEmB,IAAI,CAAC,OAAO,CAAC,KAAK;;;YAGxC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,GAAG,CACzB,OAAO,CAAC,EAAE,CAAC,IAAI,CAAA;;kDAEuB,OAAO,CAAC,KAAK;kBAC7C,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC;;aAExC,CACF;;;;6CAIkC,IAAI,CAAC,QAAQ;;;KAGrD,CAAA;IACH,CAAC;IAEO,qBAAqB,CAAC,OAAY;QACxC,QAAQ,OAAO,CAAC,IAAI,EAAE,CAAC;YACrB,KAAK,MAAM;gBACT,OAAO,IAAI,CAAA,0BAA0B,OAAO,CAAC,OAAO,QAAQ,CAAA;YAC9D,KAAK,WAAW;gBACd,OAAO,IAAI,CAAA,+BAA+B,OAAO,CAAC,OAAO,QAAQ,CAAA;YACnE,KAAK,SAAS;gBACZ,OAAO,IAAI,CAAA,6BAA6B,OAAO,CAAC,OAAO,QAAQ,CAAA;YACjE;gBACE,OAAO,IAAI,CAAA,qCAAqC,OAAO,CAAC,OAAO,QAAQ,CAAA;QAC3E,CAAC;IACH,CAAC;IAEO,QAAQ;QACd,IAAI,CAAC,OAAO,EAAE,EAAE,CAAA;IAClB,CAAC;;AA7C2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDAAqB;AAlHrC,uBAAuB;IADnC,aAAa,CAAC,6BAA6B,CAAC;GAChC,uBAAuB,CA+JnC","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { InputStyles } from './input-styles.js'\nimport { customElement, property } from 'lit/decorators.js'\nimport { ScrollbarStyles } from '@operato/styles'\n\nexport type HelpContent = {\n  title: string\n  sections: Array<{\n    title: string\n    content: string\n    type?: 'text' | 'code' | 'parameter' | 'example'\n  }>\n}\n\n@customElement('ox-input-formula-help-popup')\nexport class OxInputFormulaHelpPopup extends LitElement {\n  static styles = [\n    InputStyles,\n    ScrollbarStyles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .help-popup {\n        max-width: 500px;\n        max-height: 400px;\n        overflow-y: auto;\n        background: var(--ox-input-background);\n        border-radius: var(--ox-input-radius);\n        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);\n      }\n\n      .help-title {\n        font-size: 20px;\n        font-weight: 600;\n        margin-bottom: 16px;\n        color: var(--ox-input-focus-color);\n        padding: 20px 20px 16px 20px;\n        background: var(--ox-help-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));\n        border-bottom: var(--ox-input-underline);\n        border-radius: 8px 8px 0 0;\n      }\n\n      .help-content {\n        padding: 0 20px;\n      }\n\n      .help-section {\n        margin-bottom: 16px;\n      }\n\n      .help-section-title {\n        font-weight: 600;\n        margin-bottom: 8px;\n        color: var(--ox-input-color);\n        font-size: var(--ox-input-font-size);\n        border-bottom: var(--ox-input-underline);\n        padding-bottom: 4px;\n      }\n\n      .help-section-content {\n        font-size: var(--ox-input-font-size);\n        line-height: 1.6;\n        color: var(--ox-input-placeholder-color);\n        padding: 4px 0;\n      }\n\n      .help-code {\n        background: var(--ox-help-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));\n        border: 1px solid #e0e0e0;\n        border-radius: var(--ox-input-radius);\n        padding: 12px;\n        font-family: 'Courier New', monospace;\n        font-size: var(--ox-input-font-size-small);\n        color: var(--ox-input-color);\n        margin: 8px 0;\n      }\n\n      .help-example {\n        background: var(--md-sys-color-secondary-container);\n        border: 1px solid #c8e6c9;\n        border-radius: var(--ox-input-radius);\n        padding: 12px;\n        font-family: 'Courier New', monospace;\n        font-size: var(--ox-input-font-size-small);\n        color: var(--md-sys-color-on-tertiary-container);\n        margin: 8px 0;\n      }\n\n      .help-parameter {\n        background: var(--ox-help-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));\n        border-left: 3px solid #1976d2;\n        border-radius: var(--ox-input-radius);\n        padding: 8px 12px;\n        margin-bottom: 4px;\n        font-size: var(--ox-input-font-size-small);\n        color: var(--ox-input-placeholder-color);\n      }\n\n      .help-footer {\n        display: flex;\n        justify-content: flex-end;\n        padding: 16px 20px;\n        border-top: 1px solid #e0e0e0;\n        background: var(--ox-help-sunken-background, var(--md-sys-color-surface-container-low, #f8f9fa));\n        border-radius: 0 0 8px 8px;\n      }\n\n      .close-btn {\n        padding: 8px 16px;\n        border: 1px solid #1976d2;\n        border-radius: var(--ox-input-radius);\n        background-color: var(--ox-input-focus-color);\n        color: var(--md-sys-color-on-primary);\n        cursor: pointer;\n        font-size: var(--ox-input-font-size);\n        font-weight: 500;\n        transition: var(--ox-input-transition);\n      }\n\n      .close-btn:hover {\n        background-color: var(--ox-input-focus-color);\n        border-color: var(--ox-input-focus-color);\n      }\n    `\n  ]\n\n  @property({ type: Object }) content?: HelpContent\n  @property({ type: Object }) onClose?: () => void\n\n  render() {\n    if (!this.content) {\n      return html``\n    }\n\n    return html`\n      <div class=\"help-popup\">\n        <div class=\"help-title\">${this.content.title}</div>\n\n        <div class=\"help-content\">\n          ${this.content.sections.map(\n            section => html`\n              <div class=\"help-section\">\n                <div class=\"help-section-title\">${section.title}</div>\n                ${this._renderSectionContent(section)}\n              </div>\n            `\n          )}\n        </div>\n\n        <div class=\"help-footer\">\n          <button class=\"close-btn\" @click=${this._onClose}>닫기</button>\n        </div>\n      </div>\n    `\n  }\n\n  private _renderSectionContent(section: any) {\n    switch (section.type) {\n      case 'code':\n        return html`<div class=\"help-code\">${section.content}</div>`\n      case 'parameter':\n        return html`<div class=\"help-parameter\">${section.content}</div>`\n      case 'example':\n        return html`<div class=\"help-example\">${section.content}</div>`\n      default:\n        return html`<div class=\"help-section-content\">${section.content}</div>`\n    }\n  }\n\n  private _onClose() {\n    this.onClose?.()\n  }\n}\n"]}

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

@@ -55,7 +55,7 @@ let OxInputI18nLabels = class OxInputI18nLabels extends OxFormField {
       color: var(--input-field-color, var(--md-sys-color-on-surface));
       flex: 1;
       border: 0;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+      border-bottom: var(--ox-input-underline);
       padding: calc(var(--ox-input-gap) / 2);
       font: var(--ox-input-font);
       color: var(--md-sys-color-on-primary-container);

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

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

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

@@ -54,7 +54,7 @@ let OxInputOptions = class OxInputOptions extends OxFormField {
       flex: 1;
       min-width: 80px;
       border: 0;
-      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+      border-bottom: var(--ox-input-underline);
       padding: calc(var(--ox-input-gap) / 2);
       font: var(--ox-input-font);
       color: var(--md-sys-color-on-primary-container);

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

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

package/dist/src/ox-select.js

@@ -29,7 +29,7 @@ let OxSelect = class OxSelect extends OxFormField {
       :host {
         display: block;
         position: relative;
-        border-bottom: var(--ox-select-border-bottom, var(--ox-input-border));
+        border-bottom: var(--ox-select-border-bottom, var(--ox-input-underline));
 
         --ox-select-padding: var(--ox-input-padding);
         --ox-select-font: var(--ox-input-font);

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

@@ -1 +1 @@
-{"version":3,"file":"ox-select.js","sourceRoot":"","sources":["../../src/ox-select.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/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"]}
+{"version":3,"file":"ox-select.js","sourceRoot":"","sources":["../../src/ox-select.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/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-underline));\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"]}