@operato/input 0.2.34 → 0.2.41

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

@@ -2,20 +2,21 @@
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
 import { __decorate } from "tslib";
-import { css, html, LitElement } from 'lit';
+import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-let OxStack = class OxStack extends LitElement {
+import { OxFormField } from './ox-formfield';
+let OxInputStack = class OxInputStack extends OxFormField {
     constructor() {
         super(...arguments);
         /**
          * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.
          */
         this.stack = [];
-        /**
-         * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.
-         */
-        this.activeIndex = 0;
     }
+    /**
+     * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.
+     */
+    // @property({ type: Number }) activeIndex: number = 0
     render() {
         const stack = [...this.stack].reverse();
         const length = stack.length;
@@ -23,47 +24,54 @@ let OxStack = class OxStack extends LitElement {
       <button id="add-floor" @click=${(e) => this._onClickAddFloor(e)}>+</button>
 
       ${stack.map((item, index) => html `
-          <div
-            ?active=${length - index - 1 == this.activeIndex}
-            @click=${(e) => this._onClickToActive(e)}
-            idx=${length - index - 1}
-          >
+          <div floor ?active=${item.active} @click=${(e) => this._onClickToActive(e)} idx=${length - index - 1}>
             ${item.name} <button @click=${(e) => this._onClickRemoveFloor(e)}>-</button>
           </div>
         `)}
     `;
     }
+    _notifyChange() {
+        this.value = this.stack;
+        this.dispatchEvent(new CustomEvent('change', { detail: this.value, bubbles: true, composed: true }));
+    }
     _onClickAddFloor(e) {
         this.stack.push({ name: String(this.stack.length + 1) });
         this.requestUpdate();
+        this._notifyChange();
     }
     _onClickToActive(e) {
-        const div = e.target;
-        if (div.tagName != 'DIV') {
+        const floor = e.target.closest('[floor]');
+        if (!floor) {
             return;
         }
-        this.activeIndex = Number(div.getAttribute('idx'));
+        e.stopPropagation();
+        const activeIndex = Number(floor.getAttribute('idx'));
+        this.stack = this.stack.map((floor, index) => {
+            return activeIndex === index
+                ? {
+                    name: floor.name,
+                    active: true
+                }
+                : { name: floor.name };
+        });
+        this._notifyChange();
     }
     _onClickRemoveFloor(e) {
-        const div = e.target.parentElement;
-        if ((div === null || div === void 0 ? void 0 : div.tagName) != 'DIV') {
+        const floor = e.target.closest('[floor]');
+        if (!floor) {
             return;
         }
-        const idx = Number(div.getAttribute('idx'));
+        e.stopPropagation();
+        const idx = Number(floor.getAttribute('idx'));
         this.stack.splice(idx, 1);
-        if (this.activeIndex == idx) {
-            this.activeIndex = 0;
-        }
-        else if (this.activeIndex >= idx) {
-            this.activeIndex--;
-        }
-        else if (this.activeIndex >= this.stack.length) {
-            this.activeIndex = 0;
-        }
         this.requestUpdate();
+        this._notifyChange();
+    }
+    appendFormData({ formData }) {
+        this.name && formData.append(this.name, JSON.stringify(this.value));
     }
 };
-OxStack.styles = [
+OxInputStack.styles = [
     css `
       :host {
         display: block;
@@ -97,12 +105,9 @@ OxStack.styles = [
 ];
 __decorate([
     property({ type: Array })
-], OxStack.prototype, "stack", void 0);
-__decorate([
-    property({ type: Number })
-], OxStack.prototype, "activeIndex", void 0);
-OxStack = __decorate([
-    customElement('ox-stack')
-], OxStack);
-export default OxStack;
+], OxInputStack.prototype, "stack", void 0);
+OxInputStack = __decorate([
+    customElement('ox-input-stack')
+], OxInputStack);
+export default OxInputStack;
 //# sourceMappingURL=ox-input-stack.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-stack.js","sourceRoot":"","sources":["../../src/ox-input-stack.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('ox-stack')\nexport default class OxStack extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n\n      #add-floor {\n        width: 100%;\n        height: 20px;\n        background-color: blue;\n        color: white;\n      }\n\n      div {\n        background-color: blue;\n        width: calc(100% - 40px);\n        width: -webkit-calc(100% - 40px);\n        min-height: 20px;\n      }\n\n      div[active] {\n        background-color: red;\n      }\n\n      div button {\n        position: absolute;\n        right: 10px;\n        width: 30px;\n        min-height: 20px;\n      }\n    `\n  ]\n\n  /**\n   * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.\n   */\n  @property({ type: Array }) stack: { name: string }[] = []\n\n  /**\n   * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.\n   */\n  @property({ type: Number }) activeIndex: number = 0\n\n  render() {\n    const stack = [...this.stack].reverse()\n    const length = stack.length\n\n    return html`\n      <button id=\"add-floor\" @click=${(e: Event) => this._onClickAddFloor(e)}>+</button>\n\n      ${stack.map(\n        (item, index) => html`\n          <div\n            ?active=${length - index - 1 == this.activeIndex}\n            @click=${(e: Event) => this._onClickToActive(e)}\n            idx=${length - index - 1}\n          >\n            ${item.name} <button @click=${(e: Event) => this._onClickRemoveFloor(e)}>-</button>\n          </div>\n        `\n      )}\n    `\n  }\n\n  _onClickAddFloor(e: Event) {\n    this.stack.push({ name: String(this.stack.length + 1) })\n    this.requestUpdate()\n  }\n\n  _onClickToActive(e: Event) {\n    const div = e.target as HTMLElement\n    if (div.tagName != 'DIV') {\n      return\n    }\n\n    this.activeIndex = Number(div.getAttribute('idx'))\n  }\n\n  _onClickRemoveFloor(e: Event) {\n    const div = (e.target as HTMLElement).parentElement\n\n    if (div?.tagName != 'DIV') {\n      return\n    }\n\n    const idx = Number(div.getAttribute('idx'))\n\n    this.stack.splice(idx, 1)\n\n    if (this.activeIndex == idx) {\n      this.activeIndex = 0\n    } else if (this.activeIndex >= idx) {\n      this.activeIndex--\n    } else if (this.activeIndex >= this.stack.length) {\n      this.activeIndex = 0\n    }\n\n    this.requestUpdate()\n  }\n}\n"]}
+{"version":3,"file":"ox-input-stack.js","sourceRoot":"","sources":["../../src/ox-input-stack.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-formfield'\n\n@customElement('ox-input-stack')\nexport default class OxInputStack extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n\n      #add-floor {\n        width: 100%;\n        height: 20px;\n        background-color: blue;\n        color: white;\n      }\n\n      div {\n        background-color: blue;\n        width: calc(100% - 40px);\n        width: -webkit-calc(100% - 40px);\n        min-height: 20px;\n      }\n\n      div[active] {\n        background-color: red;\n      }\n\n      div button {\n        position: absolute;\n        right: 10px;\n        width: 30px;\n        min-height: 20px;\n      }\n    `\n  ]\n\n  /**\n   * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.\n   */\n  @property({ type: Array }) stack: { name: string; active?: boolean }[] = []\n\n  /**\n   * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.\n   */\n  // @property({ type: Number }) activeIndex: number = 0\n\n  render() {\n    const stack = [...this.stack].reverse()\n    const length = stack.length\n\n    return html`\n      <button id=\"add-floor\" @click=${(e: Event) => this._onClickAddFloor(e)}>+</button>\n\n      ${stack.map(\n        (item, index) => html`\n          <div floor ?active=${item.active} @click=${(e: Event) => this._onClickToActive(e)} idx=${length - index - 1}>\n            ${item.name} <button @click=${(e: Event) => this._onClickRemoveFloor(e)}>-</button>\n          </div>\n        `\n      )}\n    `\n  }\n\n  _notifyChange() {\n    this.value = this.stack\n\n    this.dispatchEvent(new CustomEvent('change', { detail: this.value, bubbles: true, composed: true }))\n  }\n\n  _onClickAddFloor(e: Event) {\n    this.stack.push({ name: String(this.stack.length + 1) })\n    this.requestUpdate()\n\n    this._notifyChange()\n  }\n\n  _onClickToActive(e: Event) {\n    const floor = (e.target as HTMLElement).closest('[floor]')\n\n    if (!floor) {\n      return\n    }\n\n    e.stopPropagation()\n\n    const activeIndex = Number(floor.getAttribute('idx'))\n    this.stack = this.stack.map((floor, index) => {\n      return activeIndex === index\n        ? {\n            name: floor.name,\n            active: true\n          }\n        : { name: floor.name }\n    })\n\n    this._notifyChange()\n  }\n\n  _onClickRemoveFloor(e: Event) {\n    const floor = (e.target as HTMLElement).closest('[floor]')\n\n    if (!floor) {\n      return\n    }\n\n    e.stopPropagation()\n\n    const idx = Number(floor.getAttribute('idx'))\n\n    this.stack.splice(idx, 1)\n\n    this.requestUpdate()\n\n    this._notifyChange()\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    this.name && formData.append(this.name, JSON.stringify(this.value))\n  }\n}\n"]}

package/dist/src/ox-select.d.ts

@@ -3,12 +3,13 @@
  */
 import '@material/mwc-icon';
 import '@operato/popup';
-import { LitElement } from 'lit';
-export declare class Select extends LitElement {
+import { OxFormField } from './ox-formfield';
+export declare class Select extends OxFormField {
     static styles: import("lit").CSSResult[];
     name: string;
-    label: string;
+    placeholder: string;
     render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
     expand(): void;
-    onKeyDown(e: KeyboardEvent): void;
+    protected appendFormData({ formData }: FormDataEvent): void;
 }

package/dist/src/ox-select.js

@@ -4,44 +4,63 @@
 import { __decorate } from "tslib";
 import '@material/mwc-icon';
 import '@operato/popup';
-import { LitElement, css, html } from 'lit';
+import { css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
-let Select = class Select extends LitElement {
+import { OxFormField } from './ox-formfield';
+let Select = class Select extends OxFormField {
     constructor() {
         super(...arguments);
         this.name = '';
-        this.label = '';
+        this.placeholder = '';
     }
     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) => {
+            this.value = e.detail;
+            this.dispatchEvent(new CustomEvent('change', {
+                bubbles: true,
+                composed: true,
+                detail: this.value
+            }));
+        });
+        this.addEventListener('keydown', (e) => {
+            e.preventDefault();
+            if (e.key === ' ' || e.key == 'Spacebar' || e.key == 'ArrowDown') {
+                this.expand();
+            }
+        });
+    }
     expand() {
         const popupList = this.querySelector('ox-popup-list');
         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) {
-        e.preventDefault();
-        if (e.keyCode == 32 || e.code == 'Space') {
-            this.expand();
-        }
+    appendFormData({ formData }) {
+        this.name && formData.append(this.name, JSON.stringify(this.value));
     }
 };
 Select.styles = [
     css `
       :host {
         display: block;
+        position: relative;
       }
 
       div {
@@ -54,6 +73,9 @@ Select.styles = [
 
       span {
         flex: 1;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
       }
 
       mwc-icon {
@@ -75,7 +97,7 @@ __decorate([
 ], Select.prototype, "name", void 0);
 __decorate([
     property({ type: String })
-], Select.prototype, "label", void 0);
+], Select.prototype, "placeholder", void 0);
 Select = __decorate([
     customElement('ox-select')
 ], Select);

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

@@ -1 +1 @@
-{"version":3,"file":"ox-select.js","sourceRoot":"","sources":["../../src/ox-select.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAC3B,OAAO,gBAAgB,CAAA;AAEvB,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAMlE,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,UAAU;IAAtC;;QAkC8B,SAAI,GAAW,EAAE,CAAA;QACjB,UAAK,GAAW,EAAE,CAAA;IAgChD,CAAC;IA9BC,MAAM;QACJ,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,MAAM;gBACf,IAAI,CAAC,KAAK;;;;KAIrB,CAAA;IACH,CAAC;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAc,CAAA;QAElE,IAAI,SAAS,EAAE;YACb,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,WAAW,IAAI,CAAA;YAE/C,SAAS,CAAC,IAAI,CAAC;gBACb,GAAG,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,YAAY;gBACvC,IAAI,EAAE,IAAI,CAAC,UAAU;aACtB,CAAC,CAAA;SACH;IACH,CAAC;IAED,SAAS,CAAC,CAAgB;QACxB,CAAC,CAAC,cAAc,EAAE,CAAA;QAElB,IAAI,CAAC,CAAC,OAAO,IAAI,EAAE,IAAI,CAAC,CAAC,IAAI,IAAI,OAAO,EAAE;YACxC,IAAI,CAAC,MAAM,EAAE,CAAA;SACd;IACH,CAAC;CACF,CAAA;AAlEQ,aAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA6BF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;qCAAmB;AAnCnC,MAAM;IADlB,aAAa,CAAC,WAAW,CAAC;GACd,MAAM,CAmElB;SAnEY,MAAM","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport '@operato/popup'\n\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { PopupList } from '@operato/popup'\nimport { render } from 'lit-html'\n\n@customElement('ox-select')\nexport class Select extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n\n      div {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n      }\n\n      span {\n        flex: 1;\n      }\n\n      mwc-icon {\n        display: block;\n        width: 24px;\n        text-align: right;\n        font-size: 18px;\n        color: var(--theme-primary-text-color, #3c3938);\n        opacity: 0.7;\n      }\n\n      ::slotted(ox-popup-list) {\n        width: 100%;\n      }\n    `\n  ]\n\n  @property({ type: String }) name: string = ''\n  @property({ type: String }) label: string = ''\n\n  render() {\n    return html`\n      <div @click=${this.expand}>\n        <span>${this.label}</span>\n        <mwc-icon>expand_more</mwc-icon>\n      </div>\n      <slot></slot>\n    `\n  }\n\n  expand() {\n    const popupList = this.querySelector('ox-popup-list') as PopupList\n\n    if (popupList) {\n      popupList.style.width = `${this.offsetWidth}px`\n\n      popupList.open({\n        top: this.offsetTop + this.offsetHeight,\n        left: this.offsetLeft\n      })\n    }\n  }\n\n  onKeyDown(e: KeyboardEvent) {\n    e.preventDefault()\n\n    if (e.keyCode == 32 || e.code == 'Space') {\n      this.expand()\n    }\n  }\n}\n"]}
+{"version":3,"file":"ox-select.js","sourceRoot":"","sources":["../../src/ox-select.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,oBAAoB,CAAA;AAC3B,OAAO,gBAAgB,CAAA;AAEvB,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAI5C,IAAa,MAAM,GAAnB,MAAa,MAAO,SAAQ,WAAW;IAAvC;;QAsC8B,SAAI,GAAW,EAAE,CAAA;QACjB,gBAAW,GAAW,EAAE,CAAA;IAyDtD,CAAC;IAvDC,MAAM;QACJ,MAAM,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,YAAY,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,EAAE,CAAA;QAE1G,OAAO,IAAI,CAAA;oBACK,IAAI,CAAC,MAAM;gBACf,KAAK;;;;;KAKhB,CAAA;IACH,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAA;QAEzB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAA;QAElC,IAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,CAAC,CAAQ,EAAE,EAAE;YAC3C,IAAI,CAAC,KAAK,GAAI,CAAiB,CAAC,MAAM,CAAA;YAEtC,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;gBACd,MAAM,EAAE,IAAI,CAAC,KAAK;aACnB,CAAC,CACH,CAAA;QACH,CAAC,CAAC,CAAA;QAEF,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAgB,EAAE,EAAE;YACpD,CAAC,CAAC,cAAc,EAAE,CAAA;YAElB,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,IAAI,CAAC,CAAC,GAAG,IAAI,UAAU,IAAI,CAAC,CAAC,GAAG,IAAI,WAAW,EAAE;gBAChE,IAAI,CAAC,MAAM,EAAE,CAAA;aACd;QACH,CAAC,CAAC,CAAA;IACJ,CAAC;IAED,MAAM;QACJ,MAAM,SAAS,GAAG,IAAI,CAAC,aAAa,CAAC,eAAe,CAAgB,CAAA;QAEpE,IAAI,SAAS,EAAE;YACb,SAAS,CAAC,KAAK,CAAC,KAAK,GAAG,GAAG,IAAI,CAAC,WAAW,IAAI,CAAA;YAE/C,SAAS,CAAC,IAAI,CAAC;gBACb,GAAG,EAAE,IAAI,CAAC,YAAY;gBACtB,IAAI,EAAE,CAAC;aACR,CAAC,CAAA;SACH;IACH,CAAC;IAES,cAAc,CAAC,EAAE,QAAQ,EAAiB;QAClD,IAAI,CAAC,IAAI,IAAI,QAAQ,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAA;IACrE,CAAC;CACF,CAAA;AA/FQ,aAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiCF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;oCAAkB;AACjB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;2CAAyB;AAvCzC,MAAM;IADlB,aAAa,CAAC,WAAW,CAAC;GACd,MAAM,CAgGlB;SAhGY,MAAM","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport '@material/mwc-icon'\nimport '@operato/popup'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-formfield'\nimport { OxPopupList } from '@operato/popup'\n\n@customElement('ox-select')\nexport class Select extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        position: relative;\n      }\n\n      div {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n      }\n\n      span {\n        flex: 1;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      }\n\n      mwc-icon {\n        display: block;\n        width: 24px;\n        text-align: right;\n        font-size: 18px;\n        color: var(--theme-primary-text-color, #3c3938);\n        opacity: 0.7;\n      }\n\n      ::slotted(ox-popup-list) {\n        width: 100%;\n      }\n    `\n  ]\n\n  @property({ type: String }) name: string = ''\n  @property({ type: String }) placeholder: string = ''\n\n  render() {\n    const label = (this.value instanceof Array ? this.value.join(', ') : this.value) || this.placeholder || ''\n\n    return html`\n      <div @click=${this.expand}>\n        <span>${label}</span>\n        <mwc-icon>expand_more</mwc-icon>\n      </div>\n\n      <slot></slot>\n    `\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.setAttribute('tabindex', '0')\n\n    this.addEventListener('select', (e: Event) => {\n      this.value = (e as CustomEvent).detail\n\n      this.dispatchEvent(\n        new CustomEvent('change', {\n          bubbles: true,\n          composed: true,\n          detail: this.value\n        })\n      )\n    })\n\n    this.addEventListener('keydown', (e: KeyboardEvent) => {\n      e.preventDefault()\n\n      if (e.key === ' ' || e.key == 'Spacebar' || e.key == 'ArrowDown') {\n        this.expand()\n      }\n    })\n  }\n\n  expand() {\n    const popupList = this.querySelector('ox-popup-list') as OxPopupList\n\n    if (popupList) {\n      popupList.style.width = `${this.offsetWidth}px`\n\n      popupList.open({\n        top: this.offsetHeight,\n        left: 0\n      })\n    }\n  }\n\n  protected appendFormData({ formData }: FormDataEvent): void {\n    this.name && formData.append(this.name, JSON.stringify(this.value))\n  }\n}\n"]}

package/dist/test/property-angle.test.js

@@ -1,15 +1,15 @@
-import { html } from 'lit';
 import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
 describe('OxInputAngle', () => {
     it('has a default title "Hey there" and angle 5', async () => {
         const el = await fixture(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(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 () => {
         const el = await fixture(html `<ox-input-angle title="attribute title"></ox-input-angle>`);

package/dist/test/property-angle.test.js.map

@@ -1 +1 @@
-{"version":3,"file":"property-angle.test.js","sourceRoot":"","sources":["../../test/property-angle.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAIlD,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;QAC3D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAe,IAAI,CAAA,mCAAmC,CAAC,CAAA;QAE/E,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;QACtC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IAC/B,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAe,IAAI,CAAA,mCAAmC,CAAC,CAAA;QAC/E,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,KAAK,EAAE,CAAA;QAE/C,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IAC/B,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAe,IAAI,CAAA,2DAA2D,CAAC,CAAA;QAEvG,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAA;IAC9C,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACrC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAe,IAAI,CAAA,mCAAmC,CAAC,CAAA;QAE/E,MAAM,MAAM,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAA;IAC/C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import { html } from 'lit'\n\nimport { expect, fixture } from '@open-wc/testing'\n\nimport { OxInputAngle } from '../src/ox-input-angle'\n\ndescribe('OxInputAngle', () => {\n  it('has a default title \"Hey there\" and angle 5', async () => {\n    const el = await fixture<OxInputAngle>(html`<ox-input-angle></ox-input-angle>`)\n\n    expect(el.title).to.equal('Hey there')\n    expect(el.radian).to.equal(5)\n  })\n\n  it('increases the angle on button click', async () => {\n    const el = await fixture<OxInputAngle>(html`<ox-input-angle></ox-input-angle>`)\n    el.shadowRoot!.querySelector('button')!.click()\n\n    expect(el.radian).to.equal(6)\n  })\n\n  it('can override the title via attribute', async () => {\n    const el = await fixture<OxInputAngle>(html`<ox-input-angle title=\"attribute title\"></ox-input-angle>`)\n\n    expect(el.title).to.equal('attribute title')\n  })\n\n  it('passes the a11y audit', async () => {\n    const el = await fixture<OxInputAngle>(html`<ox-input-angle></ox-input-angle>`)\n\n    await expect(el).shadowDom.to.be.accessible()\n  })\n})\n"]}
+{"version":3,"file":"property-angle.test.js","sourceRoot":"","sources":["../../test/property-angle.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,kBAAkB,CAAA;AAGlD,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE1B,QAAQ,CAAC,cAAc,EAAE,GAAG,EAAE;IAC5B,EAAE,CAAC,6CAA6C,EAAE,KAAK,IAAI,EAAE;QAC3D,MAAM,EAAE,GAAG,MAAM,OAAO,CAAe,IAAI,CAAA,mCAAmC,CAAC,CAAA;QAE/E,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CAAA;QACtC,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IAC9B,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,qCAAqC,EAAE,KAAK,IAAI,EAAE;QACnD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAe,IAAI,CAAA,mCAAmC,CAAC,CAAA;QAC/E,EAAE,CAAC,UAAW,CAAC,aAAa,CAAC,QAAQ,CAAE,CAAC,KAAK,EAAE,CAAA;QAE/C,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC,CAAA;IAC9B,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;QACpD,MAAM,EAAE,GAAG,MAAM,OAAO,CAAe,IAAI,CAAA,2DAA2D,CAAC,CAAA;QAEvG,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,CAAA;IAC9C,CAAC,CAAC,CAAA;IAEF,EAAE,CAAC,uBAAuB,EAAE,KAAK,IAAI,EAAE;QACrC,MAAM,EAAE,GAAG,MAAM,OAAO,CAAe,IAAI,CAAA,mCAAmC,CAAC,CAAA;QAE/E,MAAM,MAAM,CAAC,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,CAAC,EAAE,CAAC,UAAU,EAAE,CAAA;IAC/C,CAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA","sourcesContent":["import { expect, fixture } from '@open-wc/testing'\n\nimport { OxInputAngle } from '../src/ox-input-angle'\nimport { html } from 'lit'\n\ndescribe('OxInputAngle', () => {\n  it('has a default title \"Hey there\" and angle 5', async () => {\n    const el = await fixture<OxInputAngle>(html`<ox-input-angle></ox-input-angle>`)\n\n    expect(el.title).to.equal('Hey there')\n    expect(el.value).to.equal(5)\n  })\n\n  it('increases the angle on button click', async () => {\n    const el = await fixture<OxInputAngle>(html`<ox-input-angle></ox-input-angle>`)\n    el.shadowRoot!.querySelector('button')!.click()\n\n    expect(el.value).to.equal(6)\n  })\n\n  it('can override the title via attribute', async () => {\n    const el = await fixture<OxInputAngle>(html`<ox-input-angle title=\"attribute title\"></ox-input-angle>`)\n\n    expect(el.title).to.equal('attribute title')\n  })\n\n  it('passes the a11y audit', async () => {\n    const el = await fixture<OxInputAngle>(html`<ox-input-angle></ox-input-angle>`)\n\n    await expect(el).shadowDom.to.be.accessible()\n  })\n})\n"]}