@operato/input 0.2.35 → 0.2.36

package/src/ox-select.ts

@@ -5,18 +5,19 @@
 import '@material/mwc-icon'
 import '@operato/popup'
 
-import { LitElement, css, html } from 'lit'
+import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 
-import { PopupList } from '@operato/popup'
-import { render } from 'lit-html'
+import { OxFormField } from './ox-formfield'
+import { OxPopupList } from '@operato/popup'
 
 @customElement('ox-select')
-export class Select extends LitElement {
+export class Select extends OxFormField {
   static styles = [
     css`
       :host {
         display: block;
+        position: relative;
       }
 
       div {
@@ -29,6 +30,9 @@ export class Select extends LitElement {
 
       span {
         flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       mwc-icon {
@@ -47,36 +51,61 @@ export class Select extends LitElement {
   ]
 
   @property({ type: String }) name: string = ''
-  @property({ type: String }) label: string = ''
+  @property({ type: String }) placeholder: string = ''
 
   render() {
+    const label = (this.value instanceof Array ? this.value.join(', ') : this.value) || this.placeholder || ''
+
     return html`
       <div @click=${this.expand}>
-        <span>${this.label}</span>
+        <span>${label}</span>
         <mwc-icon>expand_more</mwc-icon>
       </div>
+
       <slot></slot>
     `
   }
 
+  connectedCallback() {
+    super.connectedCallback()
+
+    this.setAttribute('tabindex', '0')
+
+    this.addEventListener('select', (e: Event) => {
+      this.value = (e as CustomEvent).detail
+
+      this.dispatchEvent(
+        new CustomEvent('change', {
+          bubbles: true,
+          composed: true,
+          detail: this.value
+        })
+      )
+    })
+
+    this.addEventListener('keydown', (e: KeyboardEvent) => {
+      e.preventDefault()
+
+      if (e.key === ' ' || e.key == 'Spacebar' || e.key == 'ArrowDown') {
+        this.expand()
+      }
+    })
+  }
+
   expand() {
-    const popupList = this.querySelector('ox-popup-list') as PopupList
+    const popupList = this.querySelector('ox-popup-list') as OxPopupList
 
     if (popupList) {
       popupList.style.width = `${this.offsetWidth}px`
 
       popupList.open({
-        top: this.offsetTop + this.offsetHeight,
-        left: this.offsetLeft
+        top: this.offsetHeight,
+        left: 0
       })
     }
   }
 
-  onKeyDown(e: KeyboardEvent) {
-    e.preventDefault()
-
-    if (e.keyCode == 32 || e.code == 'Space') {
-      this.expand()
-    }
+  protected appendFormData({ formData }: FormDataEvent): void {
+    this.name && formData.append(this.name, JSON.stringify(this.value))
   }
 }

package/test/property-angle.test.ts

@@ -1,22 +1,21 @@
-import { html } from 'lit'
-
 import { expect, fixture } from '@open-wc/testing'
 
 import { OxInputAngle } from '../src/ox-input-angle'
+import { html } from 'lit'
 
 describe('OxInputAngle', () => {
   it('has a default title "Hey there" and angle 5', async () => {
     const el = await fixture<OxInputAngle>(html`<ox-input-angle></ox-input-angle>`)
 
     expect(el.title).to.equal('Hey there')
-    expect(el.radian).to.equal(5)
+    expect(el.value).to.equal(5)
   })
 
   it('increases the angle on button click', async () => {
     const el = await fixture<OxInputAngle>(html`<ox-input-angle></ox-input-angle>`)
     el.shadowRoot!.querySelector('button')!.click()
 
-    expect(el.radian).to.equal(6)
+    expect(el.value).to.equal(6)
   })
 
   it('can override the title via attribute', async () => {