@operato/input 0.2.35 → 0.2.42

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

@@ -2,28 +2,30 @@
  * @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, query } from 'lit/decorators.js';
-let OxInputAngle = class OxInputAngle extends LitElement {
+import { OxFormField } from './ox-formfield';
+let OxInputAngle = class OxInputAngle extends OxFormField {
     render() {
         return html `
       <input
         type="number"
-        .value=${this._toDegree(this.radian)}
+        .value=${this._toDegree(this.value)}
+        .placeholder=${this.placeholder || '0°'}
         @change=${(e) => this._onChangeValue(e)}
-        .placeholder=${this.placeholder}
       />
     `;
     }
-    get placeholder() {
-        return this.getAttribute('placeholder') || '0°';
-    }
     _onChangeValue(e) {
-        this.radian = this._toRadian(this.input.value);
-        this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }));
+        this.value = this._toRadian(this.input.value);
+        this.dispatchEvent(new CustomEvent('change', {
+            bubbles: true,
+            composed: true,
+            detail: this.value
+        }));
     }
-    _toDegree(radian) {
-        return Math.round(((Number(radian) || 0) * 180) / Math.PI);
+    _toDegree(value) {
+        return Math.round(((Number(value) || 0) * 180) / Math.PI);
     }
     _toRadian(degree) {
         return isNaN(Number(degree)) ? undefined : Number(degree) * (Math.PI / 180);
@@ -44,8 +46,8 @@ OxInputAngle.styles = [
     `
 ];
 __decorate([
-    property({ type: Number })
-], OxInputAngle.prototype, "radian", void 0);
+    property({ type: String })
+], OxInputAngle.prototype, "placeholder", void 0);
 __decorate([
     query('input')
 ], OxInputAngle.prototype, "input", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"ox-input-angle.js","sourceRoot":"","sources":["../../src/ox-input-angle.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAGlE,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,UAAU;IAmB1C,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,MAAM,CAAC;kBAC1B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;uBAC/B,IAAI,CAAC,WAAW;;KAElC,CAAA;IACH,CAAC;IAED,IAAI,WAAW;QACb,OAAO,IAAI,CAAC,YAAY,CAAC,aAAa,CAAC,IAAI,IAAI,CAAA;IACjD,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAE9C,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAA;IAClF,CAAC;IAED,SAAS,CAAC,MAAmC;QAC3C,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAA;IAC5D,CAAC;IAED,SAAS,CAAC,MAAmC;QAC3C,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,CAAA;IAC7E,CAAC;CACF,CAAA;AA9CQ,mBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;4CAAyB;AACpC;IAAf,KAAK,CAAC,OAAO,CAAC;2CAAyB;AAjB7B,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CA+CxB;SA/CY,YAAY","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\n@customElement('ox-input-angle')\nexport class OxInputAngle extends LitElement {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n      }\n\n      input {\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        border: 1px solid rgba(0, 0, 0, 0.2);\n      }\n    `\n  ]\n\n  @property({ type: Number }) radian?: string | number\n  @query('input') input!: HTMLInputElement\n\n  render() {\n    return html`\n      <input\n        type=\"number\"\n        .value=${this._toDegree(this.radian)}\n        @change=${(e: Event) => this._onChangeValue(e)}\n        .placeholder=${this.placeholder}\n      />\n    `\n  }\n\n  get placeholder() {\n    return this.getAttribute('placeholder') || '0°'\n  }\n\n  _onChangeValue(e: Event) {\n    this.radian = this._toRadian(this.input.value)\n\n    this.dispatchEvent(new CustomEvent('change', { bubbles: true, composed: true }))\n  }\n\n  _toDegree(radian: string | number | undefined) {\n    return Math.round(((Number(radian) || 0) * 180) / Math.PI)\n  }\n\n  _toRadian(degree: string | number | undefined) {\n    return isNaN(Number(degree)) ? undefined : Number(degree) * (Math.PI / 180)\n  }\n}\n"]}
+{"version":3,"file":"ox-input-angle.js","sourceRoot":"","sources":["../../src/ox-input-angle.ts"],"names":[],"mappings":"AAAA;;GAEG;;AAEH,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAC/B,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,IAAa,YAAY,GAAzB,MAAa,YAAa,SAAQ,WAAW;IAoB3C,MAAM;QACJ,OAAO,IAAI,CAAA;;;iBAGE,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;uBACpB,IAAI,CAAC,WAAW,IAAI,IAAI;kBAC7B,CAAC,CAAQ,EAAE,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;;KAEjD,CAAA;IACH,CAAC;IAED,cAAc,CAAC,CAAQ;QACrB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;QAE7C,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;YACxB,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,IAAI,CAAC,KAAK;SACnB,CAAC,CACH,CAAA;IACH,CAAC;IAED,SAAS,CAAC,KAAkC;QAC1C,OAAO,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,GAAG,GAAG,CAAC,GAAG,IAAI,CAAC,EAAE,CAAC,CAAA;IAC3D,CAAC;IAED,SAAS,CAAC,MAAmC;QAC3C,OAAO,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,GAAG,GAAG,CAAC,CAAA;IAC7E,CAAC;CACF,CAAA;AAjDQ,mBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;KAWF;CACF,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;iDAAqB;AAEhC;IAAf,KAAK,CAAC,OAAO,CAAC;2CAAyB;AAlB7B,YAAY;IADxB,aAAa,CAAC,gBAAgB,CAAC;GACnB,YAAY,CAkDxB;SAlDY,YAAY","sourcesContent":["/**\n * @license Copyright © HatioLab Inc. All rights reserved.\n */\n\nimport { css, html } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { OxFormField } from './ox-formfield'\n\n@customElement('ox-input-angle')\nexport class OxInputAngle extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: inline-block;\n      }\n\n      input {\n        width: 100%;\n        height: 100%;\n        box-sizing: border-box;\n        border: 1px solid rgba(0, 0, 0, 0.2);\n      }\n    `\n  ]\n\n  @property({ type: String }) placeholder?: string\n\n  @query('input') input!: HTMLInputElement\n\n  render() {\n    return html`\n      <input\n        type=\"number\"\n        .value=${this._toDegree(this.value)}\n        .placeholder=${this.placeholder || '0°'}\n        @change=${(e: Event) => this._onChangeValue(e)}\n      />\n    `\n  }\n\n  _onChangeValue(e: Event) {\n    this.value = this._toRadian(this.input.value)\n\n    this.dispatchEvent(\n      new CustomEvent('change', {\n        bubbles: true,\n        composed: true,\n        detail: this.value\n      })\n    )\n  }\n\n  _toDegree(value: string | number | undefined) {\n    return Math.round(((Number(value) || 0) * 180) / Math.PI)\n  }\n\n  _toRadian(degree: string | number | undefined) {\n    return isNaN(Number(degree)) ? undefined : Number(degree) * (Math.PI / 180)\n  }\n}\n"]}

package/dist/src/ox-input-barcode.d.ts

@@ -0,0 +1,22 @@
+import '@operato/popup';
+import { OxPopup } from '@operato/popup';
+import { BrowserMultiFormatReader } from '@zxing/library';
+import { OxFormField } from './ox-formfield';
+export declare class OxInputBarcode extends OxFormField {
+    static styles: import("lit").CSSResult[];
+    name?: string;
+    scannable?: boolean;
+    withoutEnter?: boolean;
+    value?: string;
+    stream?: MediaStream;
+    reader?: BrowserMultiFormatReader;
+    input: HTMLInputElement;
+    popup: OxPopup;
+    video: HTMLVideoElement;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    onChange(e: Event): void;
+    scan(e: MouseEvent): Promise<void>;
+    stopScan(): void;
+}

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

@@ -0,0 +1,205 @@
+import { __decorate } from "tslib";
+import '@operato/popup';
+import { css, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { BrowserMultiFormatReader } from '@zxing/library';
+import { OxFormField } from './ox-formfield';
+const barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`;
+let OxInputBarcode = class OxInputBarcode extends OxFormField {
+    connectedCallback() {
+        super.connectedCallback();
+        this.scannable = false;
+        if (navigator.mediaDevices) {
+            ;
+            (async () => {
+                try {
+                    var stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } });
+                    if (stream) {
+                        stream.getTracks().forEach(track => track.stop());
+                        this.scannable = true;
+                    }
+                }
+                catch (e) {
+                    console.warn('this device not support camera for barcode scan', e);
+                }
+            })();
+        }
+    }
+    disconnectedCallback() {
+        this.stopScan();
+    }
+    render() {
+        this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`);
+        return html `
+      <input type="text" .value=${this.value || ''} maxlength="50" @change=${(e) => this.onChange(e)} />
+      <button
+        ?hidden=${!this.scannable}
+        id="scan-button"
+        @click=${(e) => {
+            this.scan(e);
+        }}
+      ></button>
+
+      <ox-popup
+        @focusout=${() => {
+            this.stopScan();
+        }}
+      >
+        <video></video>
+      </ox-popup>
+    `;
+    }
+    onChange(e) {
+        var _a;
+        this.value = (_a = e.target) === null || _a === void 0 ? void 0 : _a.value;
+        //@ts-ignore
+        this.dispatchEvent(new e.constructor(e.type, e));
+    }
+    async scan(e) {
+        try {
+            this.popup.open({});
+            /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */
+            await this.updateComplete;
+            var constraints = { video: { facingMode: 'environment' } }; /* backside camera first */
+            this.stream = await navigator.mediaDevices.getUserMedia(constraints);
+            this.reader = new BrowserMultiFormatReader();
+            if (getComputedStyle(this.popup).display !== 'none' /* popup not hidden */ && this.stream) {
+                var result = await this.reader.decodeOnceFromStream(this.stream, this.video);
+                var input = this.input;
+                input.focus();
+                input.value = String(result);
+                if (!this.withoutEnter) {
+                    input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d }));
+                    input.dispatchEvent(new CustomEvent('change', {
+                        bubbles: true,
+                        composed: true,
+                        detail: String(result)
+                    }));
+                }
+            }
+            else {
+                /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */
+                this.stopScan();
+            }
+        }
+        catch (err) {
+            /*
+             * 1. stream device 문제로 예외 발생한 경우.
+             * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.
+             */
+            console.warn(err);
+        }
+        finally {
+            this.popup.close();
+            this.stopScan();
+        }
+    }
+    stopScan() {
+        this.video.pause();
+        this.stream && this.stream.getTracks().forEach(track => track.stop());
+        this.reader && this.reader.reset();
+        delete this.stream;
+        delete this.reader;
+    }
+};
+OxInputBarcode.styles = [
+    css `
+      :host {
+        display: flex;
+        align-items: center;
+        border: none;
+        overflow: hidden;
+        background-color: #fff;
+
+        padding: var(--custom-input-barcode-field-padding) !important;
+      }
+
+      * {
+        align-self: stretch;
+      }
+
+      *:focus {
+        outline: none;
+      }
+
+      input {
+        flex: 1 !important;
+        border: none;
+        font: var(--custom-input-barcode-field-font);
+        width: 10px;
+        flex-grow: 1;
+      }
+
+      #scan-button {
+        display: block;
+        width: 30px;
+        height: 100%;
+        min-height: 24px;
+        border: none;
+        background-color: transparent;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-image: var(--barcodescan-input-button-icon);
+      }
+
+      #scan-button[hidden] {
+        display: none;
+      }
+
+      ox-popup {
+        position: fixed;
+
+        width: 80vw;
+        height: 80vh;
+        transform: translate(10%, 10%);
+      }
+
+      video {
+        width: 100%;
+        height: 100%;
+      }
+
+      @media screen and (max-width: 460px) {
+        ox-popup {
+          position: fixed;
+          left: 0;
+          top: 0;
+          width: 100vw;
+          height: 100vh;
+          transform: translate(0%, 0%);
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: String, attribute: true })
+], OxInputBarcode.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean })
+], OxInputBarcode.prototype, "scannable", void 0);
+__decorate([
+    property({ attribute: 'without-enter', type: Boolean })
+], OxInputBarcode.prototype, "withoutEnter", void 0);
+__decorate([
+    property({ type: String })
+], OxInputBarcode.prototype, "value", void 0);
+__decorate([
+    state()
+], OxInputBarcode.prototype, "stream", void 0);
+__decorate([
+    state()
+], OxInputBarcode.prototype, "reader", void 0);
+__decorate([
+    query('input')
+], OxInputBarcode.prototype, "input", void 0);
+__decorate([
+    query('ox-popup')
+], OxInputBarcode.prototype, "popup", void 0);
+__decorate([
+    query('video')
+], OxInputBarcode.prototype, "video", void 0);
+OxInputBarcode = __decorate([
+    customElement('ox-input-barcode')
+], OxInputBarcode);
+export { OxInputBarcode };
+//# sourceMappingURL=ox-input-barcode.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ox-input-barcode.js","sourceRoot":"","sources":["../../src/ox-input-barcode.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/popup'\n\nimport { css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\n\nimport { OxPopup } from '@operato/popup'\nimport { BrowserMultiFormatReader } from '@zxing/library'\n\nimport { OxFormField } from './ox-formfield'\n\nconst barcodeIcon = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAYBAMAAAAfR1CMAAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFNjM4RURDQkQ1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFNjM4RURDQ0Q1OUExMUU5QkExMkQ4NUY3NkMxNzBFOSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkU2MzhFREM5RDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkU2MzhFRENBRDU5QTExRTlCQTEyRDg1Rjc2QzE3MEU5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+55pr/QAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAAkUExURQAAAEdwTAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEus/7UCWQwAAAALdFJOU9YAg3wKBFBDSz9PnvQNDgAAAE9JREFUGNNjEEQFDKLJSnCOklkgg9QUJFn3RgZhRyS+iCGDEIp2RSBfQICRkRGIgTSQL4jCF6ScvxsZYOFT2T50/6D7Fz080MMLPTzRwhsAHVspfelur08AAAAASUVORK5CYII=`\n\n@customElement('ox-input-barcode')\nexport class OxInputBarcode extends OxFormField {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        align-items: center;\n        border: none;\n        overflow: hidden;\n        background-color: #fff;\n\n        padding: var(--custom-input-barcode-field-padding) !important;\n      }\n\n      * {\n        align-self: stretch;\n      }\n\n      *:focus {\n        outline: none;\n      }\n\n      input {\n        flex: 1 !important;\n        border: none;\n        font: var(--custom-input-barcode-field-font);\n        width: 10px;\n        flex-grow: 1;\n      }\n\n      #scan-button {\n        display: block;\n        width: 30px;\n        height: 100%;\n        min-height: 24px;\n        border: none;\n        background-color: transparent;\n        background-repeat: no-repeat;\n        background-position: center;\n        background-image: var(--barcodescan-input-button-icon);\n      }\n\n      #scan-button[hidden] {\n        display: none;\n      }\n\n      ox-popup {\n        position: fixed;\n\n        width: 80vw;\n        height: 80vh;\n        transform: translate(10%, 10%);\n      }\n\n      video {\n        width: 100%;\n        height: 100%;\n      }\n\n      @media screen and (max-width: 460px) {\n        ox-popup {\n          position: fixed;\n          left: 0;\n          top: 0;\n          width: 100vw;\n          height: 100vh;\n          transform: translate(0%, 0%);\n        }\n      }\n    `\n  ]\n\n  @property({ type: String, attribute: true }) name?: string\n  @property({ type: Boolean }) scannable?: boolean\n  @property({ attribute: 'without-enter', type: Boolean }) withoutEnter?: boolean\n  @property({ type: String }) value?: string\n\n  @state() stream?: MediaStream\n  @state() reader?: BrowserMultiFormatReader\n\n  @query('input') input!: HTMLInputElement\n  @query('ox-popup') popup!: OxPopup\n  @query('video') video!: HTMLVideoElement\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    this.scannable = false\n\n    if (navigator.mediaDevices) {\n      ;(async () => {\n        try {\n          var stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment' } })\n          if (stream) {\n            stream.getTracks().forEach(track => track.stop())\n            this.scannable = true\n          }\n        } catch (e) {\n          console.warn('this device not support camera for barcode scan', e)\n        }\n      })()\n    }\n  }\n\n  disconnectedCallback() {\n    this.stopScan()\n  }\n\n  render() {\n    this.style.setProperty('--barcodescan-input-button-icon', `url(${barcodeIcon})`)\n\n    return html`\n      <input type=\"text\" .value=${this.value || ''} maxlength=\"50\" @change=${(e: Event) => this.onChange(e)} />\n      <button\n        ?hidden=${!this.scannable}\n        id=\"scan-button\"\n        @click=${(e: MouseEvent) => {\n          this.scan(e)\n        }}\n      ></button>\n\n      <ox-popup\n        @focusout=${() => {\n          this.stopScan()\n        }}\n      >\n        <video></video>\n      </ox-popup>\n    `\n  }\n\n  onChange(e: Event) {\n    this.value = (e.target as HTMLInputElement)?.value\n    //@ts-ignore\n    this.dispatchEvent(new e.constructor(e.type, e))\n  }\n\n  async scan(e: MouseEvent) {\n    try {\n      this.popup.open({})\n\n      /* template.video가 생성된 후에 접근하기 위해서, 한 프레임을 강제로 건너뛴다. */\n      await this.updateComplete\n\n      var constraints = { video: { facingMode: 'environment' } } /* backside camera first */\n      this.stream = await navigator.mediaDevices.getUserMedia(constraints)\n\n      this.reader = new BrowserMultiFormatReader()\n      if (getComputedStyle(this.popup).display !== 'none' /* popup not hidden */ && this.stream) {\n        var result = await this.reader.decodeOnceFromStream(this.stream, this.video)\n        var input = this.input\n        input.focus()\n        input.value = String(result)\n\n        if (!this.withoutEnter) {\n          input.dispatchEvent(new KeyboardEvent('keypress', { keyCode: 0x0d }))\n          input.dispatchEvent(\n            new CustomEvent('change', {\n              bubbles: true,\n              composed: true,\n              detail: String(result)\n            })\n          )\n        }\n      } else {\n        /* popup이 비동기 진행 중에 close된 경우라면, stopScan()을 처리하지 못하게 되므로, 다시한번 clear해준다. */\n        this.stopScan()\n      }\n    } catch (err) {\n      /*\n       * 1. stream device 문제로 예외 발생한 경우.\n       * 2. 뒤로가기 등으로 popup이 종료된 경우에도 NotFoundException: Video stream has ended before any code could be detected. 이 발생한다.\n       */\n      console.warn(err)\n    } finally {\n      this.popup.close()\n\n      this.stopScan()\n    }\n  }\n\n  stopScan() {\n    this.video.pause()\n\n    this.stream && this.stream.getTracks().forEach(track => track.stop())\n    this.reader && this.reader.reset()\n\n    delete this.stream\n    delete this.reader\n  }\n}\n"]}

package/dist/src/ox-input-stack.d.ts

@@ -1,21 +1,23 @@
 /**
  * @license Copyright © HatioLab Inc. All rights reserved.
  */
-import { LitElement } from 'lit';
-export default class OxStack extends LitElement {
+import { OxFormField } from './ox-formfield';
+export default class OxInputStack extends OxFormField {
     static styles: import("lit").CSSResult[];
     /**
      * `stack`은 stack에 의해 만들어진 층의 배열을 유지한다.
      */
     stack: {
         name: string;
+        active?: boolean;
     }[];
     /**
      * `activeIndex`은 현재 active된 층의 인덱스를 유지한다.
      */
-    activeIndex: number;
     render(): import("lit-html").TemplateResult<1>;
+    _notifyChange(): void;
     _onClickAddFloor(e: Event): void;
     _onClickToActive(e: Event): void;
     _onClickRemoveFloor(e: Event): void;
+    protected appendFormData({ formData }: FormDataEvent): void;
 }

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,58 @@ 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 +109,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(\n      new CustomEvent('change', {\n        detail: this.value,\n        bubbles: true,\n        composed: true\n      })\n    )\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,EAAE,MAAM,mBAAmB,CAAA;AAI3D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAG5C,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 } from 'lit/decorators.js'\n\nimport { OxPopupList } from '@operato/popup'\n\nimport { OxFormField } from './ox-formfield'\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"]}