npm - @operato/input - Versions diffs - 10.0.0-beta.57 → 10.0.0-beta.60 - Mend

@operato/input 10.0.0-beta.57 → 10.0.0-beta.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/CHANGELOG.md +18 -0
package/dist/src/ox-input-code.js +9 -0
package/dist/src/ox-input-code.js.map +1 -1
package/dist/src/ox-select.js +5 -4
package/dist/src/ox-select.js.map +1 -1
package/dist/tsconfig.tsbuildinfo +1 -1
package/package.json +2 -2
package/yarn-error.log +0 -17084

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [10.0.0-beta.60](https://github.com/hatiolab/operato/compare/v10.0.0-beta.59...v10.0.0-beta.60) (2026-06-08)
+### :bug: Bug Fix
+* **input:** ox-select 숫자 value 처리 — (0).trim() TypeError 방지 ([65fc8ff](https://github.com/hatiolab/operato/commit/65fc8ff951813f09a6d852fab788e53f305cbfe6))
+## [10.0.0-beta.59](https://github.com/hatiolab/operato/compare/v10.0.0-beta.58...v10.0.0-beta.59) (2026-06-03)
+### :bug: Bug Fix
+* **input/code:** .cm-editor 가 부모 height 를 채우도록 보강 ([872b800](https://github.com/hatiolab/operato/commit/872b8009e3302e97da2ff287603c321b7304f79f))
 ## [10.0.0-beta.57](https://github.com/hatiolab/operato/compare/v10.0.0-beta.56...v10.0.0-beta.57) (2026-05-27)
 **Note:** Version bump only for package @operato/input

package/dist/src/ox-input-code.js CHANGED Viewed

@@ -49,8 +49,17 @@ let OxInputCode = class OxInputCode extends OxFormField {
         border-radius: var(--md-sys-shape-corner-small);
       }
+      /* CodeMirror v6 의 .cm-editor 는 기본 content-based height. 부모를 채우려면
+       * height 를 명시해야 한다 (공식 문서). flex 컨테이너 안에서는 flex:1 로,
+       * 외부에서 명시적 height 를 받았을 때는 height:100% 로 채운다. */
       .cm-editor {
         flex: 1;
+        height: 100%;
+        min-height: 0;
+      }
+      .cm-scroller {
+        overflow: auto;
       }
     `
     ]; }

package/dist/src/ox-input-code.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ox-input-code.js","sourceRoot":"","sources":["../../src/ox-input-code.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAkB,MAAM,KAAK,CAAA;AACzC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AAC5E,OAAO,EAAE,UAAU,EAAE,mBAAmB,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAA;AACvF,OAAO,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,eAAe,EAAmB,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AAC3F,OAAO,EAAE,qBAAqB,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAA;AAE3E,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAA;AACxD,OAAO,EAAE,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAA;AAE5C,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAEjD,OAAO,EAAE,WAAW,EAAE,MAAM,oBAAoB,CAAA;AAEhD;;;;;;;EAOE;AAEK,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,WAAW;IAArC;;~~QAoBL~~;;WAEG;QACyB,UAAK,GAAW,EAAE,CAAA;QACe,oBAAe,GAAY,KAAK,CAAA;QACjE,aAAQ,GAAY,YAAY,CAAA;QAEpD,mBAAc,GAAY,KAAK,CAAA;QAE/B,aAAQ,GAAY,KAAK,CAAA;IA4EnC,CAAC;~~aAxGQ~~,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA~~;;;;;;;;;;;;;;KAcF~~;KACF,~~AAjBY~~,~~CAiBZ~~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~~AAzBjD~~,WAAW;IADvB,aAAa,CAAC,eAAe,CAAC;GAClB,WAAW,~~CAyGvB~~","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport { css, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { minimalSetup } from 'codemirror'\nimport { history, historyKeymap, indentWithTab } from '@codemirror/commands'\nimport { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view'\nimport { autocompletion, closeBrackets } from '@codemirror/autocomplete'\nimport { bracketMatching, LanguageSupport, syntaxHighlighting } from '@codemirror/language'\nimport { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'\n\nimport { javascript } from '@codemirror/lang-javascript'\nimport { sql } from '@codemirror/lang-sql'\nimport { json } from '@codemirror/lang-json'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { togglefullscreen } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field.js'\n\n/\nWEB Component for code-mirror code editor.\n\nExample:\n\n <ox-input-code .value=${text} language=\"javascript\" show-line-numbers>\n </ox-input-code>\n/\n@customElement('ox-input-code')\nexport class OxInputCode extends OxFormField {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n position: relative;\n background: white;\n overflow: auto;\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n }\n\n .cm-editor {\n flex: 1;\n }\n `\n ]\n\n /*\n `value`는 에디터에서 작성중인 contents이다.\n */\n @property({ type: String }) value: string = ''\n @property({ type: Boolean, attribute: 'show-line-numbers' }) showLineNumbers: boolean = false\n @property({ type: String }) language?: string = 'javascript'\n\n private _self_changing: boolean = false\n private _editor?: EditorView\n private _changed: boolean = false\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value') && this.editor && !this._self_changing) {\n const to = this.editor.state.doc.toString().length\n this.editor.dispatch({\n changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }\n })\n }\n }\n\n get editor() {\n if (!this._editor) {\n let language: LanguageSupport[] = []\n switch (this.language) {\n case 'sql':\n language = [sql()]\n break\n case 'json':\n language = [json()]\n break\n case 'javascript':\n language = [javascript()]\n break\n default:\n break\n }\n\n this._editor = new EditorView({\n doc: this.value,\n extensions: [\n minimalSetup,\n ...language,\n ...(this.showLineNumbers ? [lineNumbers()] : []),\n bracketMatching(),\n closeBrackets(),\n history(),\n autocompletion(),\n oneDark,\n syntaxHighlighting(oneDarkHighlightStyle),\n highlightActiveLine(),\n keymap.of([...historyKeymap, indentWithTab]),\n EditorView.updateListener.of(async v => {\n if (v.docChanged) {\n this._self_changing = true\n this._changed = true\n\n await this.updateComplete\n\n this._self_changing = false\n }\n })\n ],\n parent: this.renderRoot\n })\n }\n\n this._editor.contentDOM.addEventListener('keydown', event => {\n event.stopPropagation()\n\n if (event.key === 'Escape') {\n togglefullscreen(this._editor!.contentDOM)\n }\n })\n\n this._editor.contentDOM.addEventListener('blur', e => {\n if (!this._changed) {\n return\n }\n\n this.value = this._editor!.state.doc.toString()\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n })\n\n return this._editor\n }\n}\n"]}
1	+ {"version":3,"file":"ox-input-code.js","sourceRoot":"","sources":["../../src/ox-input-code.ts"],"names":[],"mappings":"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","sourcesContent":["/*\n @license Copyright © HatioLab Inc. All rights reserved.\n /\n\nimport { css, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { minimalSetup } from 'codemirror'\nimport { history, historyKeymap, indentWithTab } from '@codemirror/commands'\nimport { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view'\nimport { autocompletion, closeBrackets } from '@codemirror/autocomplete'\nimport { bracketMatching, LanguageSupport, syntaxHighlighting } from '@codemirror/language'\nimport { oneDarkHighlightStyle, oneDark } from '@codemirror/theme-one-dark'\n\nimport { javascript } from '@codemirror/lang-javascript'\nimport { sql } from '@codemirror/lang-sql'\nimport { json } from '@codemirror/lang-json'\n\nimport { ScrollbarStyles } from '@operato/styles'\nimport { togglefullscreen } from '@operato/utils'\n\nimport { OxFormField } from './ox-form-field.js'\n\n/\nWEB Component for code-mirror code editor.\n\nExample:\n\n <ox-input-code .value=${text} language=\"javascript\" show-line-numbers>\n </ox-input-code>\n/\n@customElement('ox-input-code')\nexport class OxInputCode extends OxFormField {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n position: relative;\n background: white;\n overflow: auto;\n border: 1px solid var(--md-sys-color-outline);\n border-radius: var(--md-sys-shape-corner-small);\n }\n\n /* CodeMirror v6 의 .cm-editor 는 기본 content-based height. 부모를 채우려면\n * height 를 명시해야 한다 (공식 문서). flex 컨테이너 안에서는 flex:1 로,\n * 외부에서 명시적 height 를 받았을 때는 height:100% 로 채운다. /\n .cm-editor {\n flex: 1;\n height: 100%;\n min-height: 0;\n }\n\n .cm-scroller {\n overflow: auto;\n }\n `\n ]\n\n /\n `value`는 에디터에서 작성중인 contents이다.\n */\n @property({ type: String }) value: string = ''\n @property({ type: Boolean, attribute: 'show-line-numbers' }) showLineNumbers: boolean = false\n @property({ type: String }) language?: string = 'javascript'\n\n private _self_changing: boolean = false\n private _editor?: EditorView\n private _changed: boolean = false\n\n updated(changes: PropertyValues<this>) {\n if (changes.has('value') && this.editor && !this._self_changing) {\n const to = this.editor.state.doc.toString().length\n this.editor.dispatch({\n changes: { from: 0, to, insert: this.value === undefined ? '' : String(this.value) }\n })\n }\n }\n\n get editor() {\n if (!this._editor) {\n let language: LanguageSupport[] = []\n switch (this.language) {\n case 'sql':\n language = [sql()]\n break\n case 'json':\n language = [json()]\n break\n case 'javascript':\n language = [javascript()]\n break\n default:\n break\n }\n\n this._editor = new EditorView({\n doc: this.value,\n extensions: [\n minimalSetup,\n ...language,\n ...(this.showLineNumbers ? [lineNumbers()] : []),\n bracketMatching(),\n closeBrackets(),\n history(),\n autocompletion(),\n oneDark,\n syntaxHighlighting(oneDarkHighlightStyle),\n highlightActiveLine(),\n keymap.of([...historyKeymap, indentWithTab]),\n EditorView.updateListener.of(async v => {\n if (v.docChanged) {\n this._self_changing = true\n this._changed = true\n\n await this.updateComplete\n\n this._self_changing = false\n }\n })\n ],\n parent: this.renderRoot\n })\n }\n\n this._editor.contentDOM.addEventListener('keydown', event => {\n event.stopPropagation()\n\n if (event.key === 'Escape') {\n togglefullscreen(this._editor!.contentDOM)\n }\n })\n\n this._editor.contentDOM.addEventListener('blur', e => {\n if (!this._changed) {\n return\n }\n\n this.value = this._editor!.state.doc.toString()\n this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true, detail: this.value }))\n })\n\n return this._editor\n }\n}\n"]}

package/dist/src/ox-select.js CHANGED Viewed

@@ -69,10 +69,11 @@ let OxSelect = class OxSelect extends OxFormField {
     `
     ]; }
     render() {
-        const label = (this.label instanceof Array ? this.label.join(', ') : this.label?.trim()) ||
-            (this.value instanceof Array ? this.value.join(', ') : this.value?.trim()) ||
-            this.placeholder ||
-            '';
+        // value/label 은 문자열이 아닐 수 있다 (예: select option value 가 숫자 0/1).
+        // `(0)?.trim()` 은 0 이 nullish 가 아니라 단락되지 않아 TypeError 가 난다 →
+        // 비-문자열 스칼라는 String() 으로 강제, nullish 만 '' 처리.
+        const asText = (v) => v instanceof Array ? v.join(', ') : typeof v === 'string' ? v.trim() : v == null ? '' : String(v);
+        const label = asText(this.label) || asText(this.value) || this.placeholder || '';
         return html `
       <div @click=${this.expand}>
         <span data-reactive-tooltip> <slot name="label">${label}</slot> </span>

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

	@@ -1 +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'\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 const label =\n (this.label instanceof Array ? this.label.join(', ') : this.label?.trim()) \|\|\n (this.value instanceof Array ? this.value.join(', ') : this.value?.trim()) \|\|\n this.placeholder \|\|\n ''\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"]}
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'\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"]}