@operato/input 7.0.30 → 7.0.35

package/package.json

@@ -2,7 +2,7 @@
   "name": "@operato/input",
   "description": "Webcomponents for input following open-wc recommendations",
   "author": "heartyoh@hatiolab.com",
-  "version": "7.0.30",
+  "version": "7.0.35",
   "main": "dist/src/index.js",
   "module": "dist/src/index.js",
   "license": "MIT",
@@ -208,7 +208,7 @@
     "@material/web": "^1.5.0",
     "@operato/color-picker": "^7.0.0",
     "@operato/i18n": "^7.0.0",
-    "@operato/popup": "^7.0.28",
+    "@operato/popup": "^7.0.33",
     "@operato/styles": "^7.0.20",
     "@operato/utils": "^7.0.5",
     "@polymer/paper-dropdown-menu": "^3.2.0",
@@ -254,5 +254,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "865d9fb09f315d1239884e4bf2c0205e8818aca1"
+  "gitHead": "c23cae1e362ea1637f0c87a78f58a8672dbf55ef"
 }

package/src/ox-checkbox.ts

@@ -81,7 +81,7 @@ export class OxCheckbox extends OxFormField {
 
   render() {
     return html`
-      <div ?disabled=${this.disabled}>
+      <div ?disabled=${this.disabled} @click=${this.onClick}>
         ${this._hasInner && this.left
           ? html` <span label>
               <slot></slot>
@@ -99,12 +99,18 @@ export class OxCheckbox extends OxFormField {
     `
   }
 
-  connectedCallback() {
+  connectedCallback(): void {
     super.connectedCallback()
 
     this.setAttribute('tabindex', '0')
-    this.addEventListener('keydown', this.onKeyDown.bind(this))
-    this.addEventListener('click', this.onClick.bind(this))
+    this.addEventListener('keydown', this.onKeyDown)
+  }
+
+  disconnectedCallback(): void {
+    super.disconnectedCallback()
+
+    this.setAttribute('tabindex', '-1')
+    this.removeEventListener('keydown', this.onKeyDown)
   }
 
   onClick() {

package/src/ox-input-crontab.ts

@@ -9,6 +9,9 @@ import { i18next } from '@operato/i18n'
 
 import { OxFormField } from './ox-form-field'
 
+import '@material/web/fab/fab.js'
+import '@material/web/icon/icon.js'
+
 function createCronRegex(type: 'sec' | 'min' | 'hour' | 'day' | 'month' | 'dayOfWeek') {
   // https://gist.github.com/dkandalov/a2aed17cfdeb65243022
   var regexByField = {} as any
@@ -82,6 +85,7 @@ function createCronRegex(type: 'sec' | 'min' | 'hour' | 'day' | 'month' | 'dayOf
 export class OxInputCrontab extends OxFormField {
   static styles = css`
     :host {
+      position: relative;
       display: block;
       width: 100%;
       height: 100%;
@@ -140,6 +144,7 @@ export class OxInputCrontab extends OxFormField {
       font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
       color: var(--md-sys-color-on-primary-container);
     }
+
     input:focus {
       outline: none;
       border-color: var(--md-sys-color-secondary-fixed-dim);
@@ -202,7 +207,7 @@ export class OxInputCrontab extends OxFormField {
 
     #tooltip > .crontab-description {
       text-align: left;
-      color: var(--md-sys-color-on-primary-container);
+      color: var (--md-sys-color-on-primary-container);
     }
 
     #button-wrapper {
@@ -213,13 +218,16 @@ export class OxInputCrontab extends OxFormField {
       margin: -0.25rem;
     }
 
-    button {
-      border-radius: var(--button-border-radius);
+    md-fab {
       margin: 0.25rem;
+      position: absolute;
+      bottom: 1rem;
+      left: 1rem;
+      color: var(--md-sys-color-on-primary);
     }
-    button:hover,
-    button:active {
-      background-color: var(--md-sys-color-on-primary-container);
+
+    md-icon {
+      font-size: 24px;
     }
   `
 
@@ -377,23 +385,25 @@ export class OxInputCrontab extends OxFormField {
             `
           )}
         </div>
-        <button
-          id="clear"
-          @click=${(e: Event) => {
-            e.preventDefault()
-            e.stopPropagation()
-            this.value = ''
-            this.dispatchEvent(
-              new CustomEvent('change', {
-                bubbles: true,
-                composed: true,
-                detail: this.value
-              })
-            )
-          }}
-        >
-          Clear
-        </button>
+        <div id="button-wrapper">
+          <md-fab
+            title="clear"
+            @click=${(e: Event) => {
+              e.preventDefault()
+              e.stopPropagation()
+              this.value = ''
+              this.dispatchEvent(
+                new CustomEvent('change', {
+                  bubbles: true,
+                  composed: true,
+                  detail: this.value
+                })
+              )
+            }}
+          >
+            <md-icon slot="icon">delete</md-icon>
+          </md-fab>
+        </div>
       </form>
     `
   }

package/src/ox-select.ts

@@ -6,7 +6,7 @@ import '@material/web/icon/icon.js'
 import '@operato/popup/ox-popup-list.js'
 import './ox-checkbox.js'
 
-import { css, html, render, PropertyValues, nothing } from 'lit'
+import { css, html, render, PropertyValues } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { OxPopupList } from '@operato/popup'
@@ -62,10 +62,6 @@ export class OxSelect extends OxFormField {
       div:hover md-icon {
         color: var(--md-sys-color-on-primary-container);
       }
-
-      ::slotted(ox-popup-list) {
-        width: 100%;
-      }
     `
   ]
 
@@ -73,6 +69,8 @@ export class OxSelect extends OxFormField {
   @property({ type: String }) placeholder: string = ''
 
   @state() label: string | string[] = ''
+  @state() popupContainer: HTMLElement | null = null
+  @state() observer: MutationObserver | null = null
 
   render() {
     const label =
@@ -96,21 +94,6 @@ export class OxSelect extends OxFormField {
 
     this.setAttribute('tabindex', '0')
 
-    this.addEventListener('select', (e: Event) => {
-      this.value = (e as CustomEvent).detail
-    })
-
-    this.addEventListener('close', e => {
-      /* popup이 close될 때 change 이벤트를 발생시킨다. */
-      this.dispatchEvent(
-        new CustomEvent('change', {
-          bubbles: true,
-          composed: true,
-          detail: this.value
-        })
-      )
-    })
-
     this.addEventListener('keydown', (e: KeyboardEvent) => {
       e.preventDefault()
 
@@ -124,7 +107,9 @@ export class OxSelect extends OxFormField {
 
   async updated(changes: PropertyValues<this>) {
     if (changes.has('value')) {
-      const popupList = this.querySelector('ox-popup-list') as OxPopupList
+      const popupList = (this.popupContainer?.querySelector('ox-popup-list') ||
+        this.querySelector('ox-popup-list')) as OxPopupList
+
       if (popupList) {
         popupList.value = this.value
         await this.requestUpdate()
@@ -184,15 +169,51 @@ export class OxSelect extends OxFormField {
       return
     }
 
-    const popupList = this.querySelector('ox-popup-list') as OxPopupList
+    const slotContent = this.renderRoot.querySelector('slot')?.assignedNodes() || []
 
-    if (popupList) {
-      popupList.style.width = `${this.offsetWidth}px`
+    if (slotContent.length > 0) {
+      const popupList = slotContent.find(content => content instanceof OxPopupList) as OxPopupList
+
+      if (popupList) {
+        const { left, bottom } = this.getBoundingClientRect()
 
-      popupList.open({
-        left: 0,
-        top: this.offsetHeight
-      })
+        popupList.value = this.value
+        popupList.style.width = `${this.offsetWidth}px`
+        popupList.style.textWrap = 'nowrap'
+
+        const selectHandler = async (e: Event) => {
+          this.value = (e as CustomEvent).detail
+
+          if (popupList) {
+            await this.requestUpdate()
+            this.label = popupList.getSelectedLabels()
+          }
+        }
+        popupList.addEventListener('select', selectHandler)
+
+        const closeHandler = (e: Event) => {
+          /* popup이 close될 때 change 이벤트를 발생시킨다. */
+          this.dispatchEvent(
+            new CustomEvent('change', {
+              bubbles: true,
+              composed: true,
+              detail: this.value
+            })
+          )
+          popupList.removeEventListener('select', selectHandler)
+          popupList.removeEventListener('close', closeHandler)
+
+          this.appendChild(popupList)
+        }
+        popupList.addEventListener('close', closeHandler, { once: true })
+
+        document.body.appendChild(popupList)
+
+        popupList.open({
+          left,
+          top: bottom
+        })
+      }
     }
   }
 }

package/stories/ox-select.stories.ts

@@ -60,7 +60,7 @@ const Template: Story<ArgTypes> = ({
 
   <style>
     .container {
-      height: 500px;
+      height: 250px;
       text-align: center;
       padding: 20px;
 
@@ -154,9 +154,17 @@ MultipleWithCheckbox.args = {
             option => !option.hasAttribute('hidden')
           )
           options.forEach(option => ((option as HTMLInputElement).checked = target.checked))
-          ;(target.closest('ox-select') as any)!.value = options
+          const value = options
             .map(option => ((option as HTMLInputElement).checked ? (option as HTMLInputElement).value : undefined))
             .filter(Boolean)
+
+          ;(target.closest('ox-popup-list') as any)!.dispatchEvent(
+            new CustomEvent('select', {
+              bubbles: true,
+              composed: true,
+              detail: value
+            })
+          )
         }}
         >set all</ox-checkbox
       >