godown 1.1.4 → 1.1.6

package/input-form/select-input.js

@@ -1,330 +1,354 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { html, css, property, query, state, define, conf, cssvar } from '../deps.js';
-import STD from './std.js';
-let SelectInput = class SelectInput extends STD {
-    constructor() {
-        super(...arguments);
-        this.open = false;
-        this.selcls = `${conf.tag('select-input')}-selected`;
-        this.pla = undefined;
-        this.only = false;
-        this.def = "";
-        this.value = [];
-        this.name = "select";
-        this.text = [];
-        this.autofocus = false;
-    }
-    get assigned() {
-        return this.shadowRoot.querySelector('slot').assignedElements();
-    }
-    render() {
-        return html `<div><section>${this.lists()}</section>
-  <input id="input" @focus=${() => { this.open = true; }} @input=${this._handleInput} placeholder=${this.pla} />
-  <label for="input"><svg viewBox="0 0 48 48" fill="none"><path d="M36 19L24 31L12 19H36Z" fill="currentColor" stroke="currentColor" stroke-width="3" stroke-linejoin="round"/></svg></label>
-  <aside ?open=${this.open}><slot></slot></aside>
-</div>`;
-    }
-    lists() {
-        var itemTemplates = [];
-        if (this.value.length)
-            for (const i in this.value) {
-                itemTemplates.push(html `<i class="selected-item">${this.text[i] || this.value[i]}
-        <svg @click=${() => { this.select(this.value[i]); }} t="1678769821062" viewBox="0 0 1024 1024" version="1.1" p-id="2770"><path d="M960 512c0-249.6-198.4-448-448-448S64 262.4 64 512s198.4 448 448 448 448-198.4 448-448zM691.2 736L512 556.8 332.8 736c-12.8 12.8-32 12.8-44.8 0-12.8-12.8-12.8-32 0-44.8L467.2 512 288 332.8c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0L512 467.2 691.2 288c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L556.8 512 736 691.2c12.8 12.8 12.8 32 0 44.8-12.8 12.8-32 12.8-44.8 0z" fill="currentColor" p-id="2771"></path></svg>
-        </i>`);
-            }
-        return itemTemplates;
-    }
-    _focusCheck() {
-        var _a;
-        if (this.autofocus) {
-            (_a = this._input) === null || _a === void 0 ? void 0 : _a.focus();
-            this.open = true;
-        }
-    }
-    focus(options) {
-        var _a;
-        (_a = this._input) === null || _a === void 0 ? void 0 : _a.focus(options);
-        this.open = true;
-    }
-    firstUpdated() {
-        this._focusCheck();
-        this.assigned.forEach((option) => {
-            if (option.value) {
-                option.addEventListener("click", () => {
-                    this.select(option.value, option.innerText);
-                });
-            }
-            else if (option.children) {
-                [...option.children].forEach(option => {
-                    option.addEventListener("click", () => {
-                        this.select(option.value, option.innerText);
-                    });
-                });
-            }
-        });
-        this.addEventListener("change", (e) => {
-            this.open = !this.only;
-        });
-        document.addEventListener("click", (e) => {
-            if (!this.contains(e.target)) {
-                this.open = false;
-            }
-        });
-    }
-    select(value, text) {
-        if (text === undefined || text === null) {
-            this.assigned.forEach((option) => {
-                if (option.value) {
-                    if (option.value == value) {
-                        text = option.innerText;
-                    }
-                }
-                else if (option.children) {
-                    [...option.children].forEach(option => {
-                        if (option.value == value) {
-                            text = option.innerText;
-                        }
-                    });
-                }
-            });
-        }
-        if (this.value.includes(value)) {
-            if (!this.only) {
-                this.value = this.value.filter(v => v != value);
-                this.text = this.text.filter(v => v != text);
-            }
-            else {
-                this.value = [];
-                this.text = [];
-            }
-        }
-        else {
-            if (!this.only) {
-                this.value.push(value);
-                this.text.push(text);
-            }
-            else {
-                this.value = [value];
-                this.text = [text];
-            }
-        }
-        this.assigned.forEach((option) => {
-            if (option.value) {
-                if (this.value.includes(option.value)) {
-                    option.classList.add(this.selcls);
-                }
-                else {
-                    option.classList.remove(this.selcls);
-                }
-            }
-            else if (option.children) {
-                [...option.children].forEach(option => {
-                    if (this.value.includes(option.value)) {
-                        option.classList.add(this.selcls);
-                    }
-                    else {
-                        option.classList.remove(this.selcls);
-                    }
-                });
-            }
-        });
-        this._input.value = "";
-        this.dispatchEvent(new CustomEvent("change", { detail: this.namevalue() }));
-        this.requestUpdate();
-    }
-    _handleInput() {
-        let value = this._input.value.trim();
-        if (!this.only && value.includes(";")) {
-            value = value.split(";").pop().trim();
-        }
-        this.assigned.forEach(option => {
-            if (option.value) {
-                option.style.display = "block";
-            }
-            if (option.children) {
-                option.style.display = "block";
-                [...option.children].forEach(option => {
-                    option.style.display = "block";
-                });
-            }
-        });
-        if (value) {
-            this.assigned.forEach(option => {
-                if (option.value) {
-                    if (option.value.toLowerCase().includes(value.toLowerCase()) || option.innerText.toLowerCase().includes(value.toLowerCase())) {
-                        option.style.display = "block";
-                    }
-                    else {
-                        option.style.display = "none";
-                    }
-                }
-                else if (option.children) {
-                    [...option.children].forEach(option => {
-                        if (option.value.toLowerCase().includes(value.toLowerCase()) || option.innerText.toLowerCase().includes(value.toLowerCase())) {
-                            option.style.display = "block";
-                        }
-                        else {
-                            option.style.display = "none";
-                        }
-                    });
-                    if ([...option.children].filter(option => option.style.display == "block").length == 0) {
-                        option.style.display = "none";
-                    }
-                }
-            });
-        }
-        this.dispatchEvent(new CustomEvent("input", { detail: this.namevalue() }));
-    }
-    namevalue() {
-        if (!this.only) {
-            return [this.name, this.value];
-        }
-        return [this.name, this.value[0]];
-    }
-    reset() {
-        this.value = [];
-        this.text = [];
-        this._input.value = "";
-        this.assigned.forEach((option) => {
-            if (option.value) {
-                option.classList.remove(this.selcls);
-            }
-            else if (option.children) {
-                [...option.children].forEach(option => {
-                    option.classList.remove(this.selcls);
-                });
-            }
-        });
-        if (this.def) {
-            if (!this.only) {
-                this.def.split(";").forEach(def => {
-                    if (def.trim())
-                        this.select(def.trim(), null);
-                });
-            }
-            else {
-                if (this.def.split(";")[0].trim())
-                    this.select(this.def.split(";")[0].trim(), null);
-            }
-        }
-    }
-};
-SelectInput.styles = [STD.styles, css `
-  :host{
-    background:var(${cssvar}--input-background);
-    color:var(${cssvar}--text);
-    display: inline-flex;
-    outline: .145em solid transparent;
-    border-radius: 0.25em;
-    height: 1.5em;
-    width: var(${cssvar}--input-width);
-  }
-  :host([open]){
-    outline-color: var(${cssvar}--input-outline-focus);
-  }
-  input{
-    padding: 0px 0px 0px 0.25em;
-    background: none;
-    cursor:inherit;
-    height:100%;
-    width: 100%;
-    box-sizing: border-box;
-    border:inherit;
-    outline: none;
-    border-radius:inherit;
-    flex:1;
-  }
-  div{
-    display: inline-flex;
-    position: relative;
-    width: 100%;
-    border-radius:inherit;
-    z-index: inherit;
-  }
-  label svg{
-    height: 100%;
-  }
-  aside{
-    margin-top: 1px;
-    position: absolute;
-    top:100%;
-    width: 100%;
-    visibility: hidden;
-    z-index: 1;
-    border-radius:inherit;
-  }
-  section{
-    max-width:calc(100% - 1.2em);
-    height: 100%;
-    overflow: hidden;
-    pointer-events: none;
-    border-radius:inherit;
-    z-index: inherit;
-  }
-  i.selected-item{
-    background:var(${cssvar}--input-true);
-    border-radius:inherit;
-    height: 100%;
-    float:left;
-    display: inline-flex;
-    font-style: normal;
-    align-items: center;
-    padding-left: .1em;
-    margin-left: 0.065em;
-  }
-  i:first-child{
-    margin-left: 0;
-  }
-  i.selected-item svg{
-    width: 1em;
-    padding: 0 .12em;
-    height:.8em;
-    pointer-events: all;
-  }
-  aside[open]{
-    visibility: visible;
-  }
-  `];
-__decorate([
-    property({ type: Boolean, reflect: true })
-], SelectInput.prototype, "open", void 0);
-__decorate([
-    property()
-], SelectInput.prototype, "selcls", void 0);
-__decorate([
-    property()
-], SelectInput.prototype, "pla", void 0);
-__decorate([
-    property({ type: Boolean })
-], SelectInput.prototype, "only", void 0);
-__decorate([
-    property()
-], SelectInput.prototype, "def", void 0);
-__decorate([
-    property({ type: Array })
-], SelectInput.prototype, "value", void 0);
-__decorate([
-    property()
-], SelectInput.prototype, "name", void 0);
-__decorate([
-    state()
-], SelectInput.prototype, "text", void 0);
-__decorate([
-    property({ type: Boolean })
-], SelectInput.prototype, "autofocus", void 0);
-__decorate([
-    query('input')
-], SelectInput.prototype, "_input", void 0);
-__decorate([
-    query('aside')
-], SelectInput.prototype, "_aside", void 0);
-SelectInput = __decorate([
-    define('select-input')
-], SelectInput);
-export { SelectInput };
-export default SelectInput;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, css, property, query, state, define, conf, cssvar } from "../deps.js";
+import STD from "./std.js";
+let SelectInput = class SelectInput extends STD {
+    constructor() {
+        super(...arguments);
+        this.open = false;
+        this.selcls = `${conf.tag("select-input")}-selected`;
+        this.pla = undefined;
+        this.only = false;
+        this.def = "";
+        this.value = [];
+        this.name = "select";
+        this.text = [];
+        this.autofocus = false;
+    }
+    get assigned() {
+        return this.shadowRoot.querySelector("slot").assignedElements();
+    }
+    render() {
+        return html `<div>
+      <section>${this.lists()}</section>
+      <input
+        id="input"
+        @focus=${() => {
+            this.open = true;
+        }}
+        @input=${this._handleInput}
+        placeholder=${this.pla}
+      />
+      <label for="input">
+        <svg viewBox="0 0 48 48" fill="none"><path d="M36 19L24 31L12 19H36Z" fill="currentColor" stroke="currentColor" stroke-width="3" stroke-linejoin="round" /></svg>
+      </label>
+      <aside ?open=${this.open}><slot></slot></aside>
+    </div>`;
+    }
+    lists() {
+        const itemTemplates = [];
+        if (this.value.length)
+            for (const i in this.value) {
+                itemTemplates.push(html `<i class="selected-item">
+            ${this.text[i] || this.value[i]}
+            <svg
+              @click=${() => {
+                    this.select(this.value[i]);
+                }}
+              t="1678769821062"
+              viewBox="0 0 1024 1024"
+              version="1.1"
+              p-id="2770"
+            >
+              <path d="M960 512c0-249.6-198.4-448-448-448S64 262.4 64 512s198.4 448 448 448 448-198.4 448-448zM691.2 736L512 556.8 332.8 736c-12.8 12.8-32 12.8-44.8 0-12.8-12.8-12.8-32 0-44.8L467.2 512 288 332.8c-12.8-12.8-12.8-32 0-44.8 12.8-12.8 32-12.8 44.8 0L512 467.2 691.2 288c12.8-12.8 32-12.8 44.8 0 12.8 12.8 12.8 32 0 44.8L556.8 512 736 691.2c12.8 12.8 12.8 32 0 44.8-12.8 12.8-32 12.8-44.8 0z" fill="currentColor" p-id="2771"></path>
+            </svg>
+          </i>`);
+            }
+        return itemTemplates;
+    }
+    _focusCheck() {
+        var _a;
+        if (this.autofocus) {
+            (_a = this._input) === null || _a === void 0 ? void 0 : _a.focus();
+            this.open = true;
+        }
+    }
+    focus(options) {
+        var _a;
+        (_a = this._input) === null || _a === void 0 ? void 0 : _a.focus(options);
+        this.open = true;
+    }
+    firstUpdated() {
+        this._focusCheck();
+        this.assigned.forEach((option) => {
+            if (option.value) {
+                option.addEventListener("click", () => {
+                    this.select(option.value, option.innerText);
+                });
+            }
+            else if (option.children) {
+                [...option.children].forEach((option) => {
+                    option.addEventListener("click", () => {
+                        this.select(option.value, option.innerText);
+                    });
+                });
+            }
+        });
+        this.addEventListener("change", (e) => {
+            this.open = !this.only;
+        });
+        document.addEventListener("click", (e) => {
+            if (!this.contains(e.target)) {
+                this.open = false;
+            }
+        });
+    }
+    select(value, text) {
+        if (text === undefined || text === null) {
+            this.assigned.forEach((option) => {
+                if (option.value) {
+                    if (option.value == value) {
+                        text = option.innerText;
+                    }
+                }
+                else if (option.children) {
+                    [...option.children].forEach((option) => {
+                        if (option.value == value) {
+                            text = option.innerText;
+                        }
+                    });
+                }
+            });
+        }
+        if (this.value.includes(value)) {
+            if (!this.only) {
+                this.value = this.value.filter((v) => v != value);
+                this.text = this.text.filter((v) => v != text);
+            }
+            else {
+                this.value = [];
+                this.text = [];
+            }
+        }
+        else {
+            if (!this.only) {
+                this.value.push(value);
+                this.text.push(text);
+            }
+            else {
+                this.value = [value];
+                this.text = [text];
+            }
+        }
+        this.assigned.forEach((option) => {
+            if (option.value) {
+                if (this.value.includes(option.value)) {
+                    option.classList.add(this.selcls);
+                }
+                else {
+                    option.classList.remove(this.selcls);
+                }
+            }
+            else if (option.children) {
+                [...option.children].forEach((option) => {
+                    if (this.value.includes(option.value)) {
+                        option.classList.add(this.selcls);
+                    }
+                    else {
+                        option.classList.remove(this.selcls);
+                    }
+                });
+            }
+        });
+        this._input.value = "";
+        this.dispatchEvent(new CustomEvent("change", { detail: this.namevalue() }));
+        this.requestUpdate();
+    }
+    _handleInput() {
+        let value = this._input.value.trim();
+        if (!this.only && value.includes(";")) {
+            value = value.split(";").pop().trim();
+        }
+        this.assigned.forEach((option) => {
+            if (option.value) {
+                option.style.display = "block";
+            }
+            if (option.children) {
+                option.style.display = "block";
+                [...option.children].forEach((option) => {
+                    option.style.display = "block";
+                });
+            }
+        });
+        if (value) {
+            this.assigned.forEach((option) => {
+                if (option.value) {
+                    if (option.value.toLowerCase().includes(value.toLowerCase()) || option.innerText.toLowerCase().includes(value.toLowerCase())) {
+                        option.style.display = "block";
+                    }
+                    else {
+                        option.style.display = "none";
+                    }
+                }
+                else if (option.children) {
+                    [...option.children].forEach((option) => {
+                        if (option.value.toLowerCase().includes(value.toLowerCase()) || option.innerText.toLowerCase().includes(value.toLowerCase())) {
+                            option.style.display = "block";
+                        }
+                        else {
+                            option.style.display = "none";
+                        }
+                    });
+                    if ([...option.children].filter((option) => option.style.display == "block").length == 0) {
+                        option.style.display = "none";
+                    }
+                }
+            });
+        }
+        this.dispatchEvent(new CustomEvent("input", { detail: this.namevalue() }));
+    }
+    namevalue() {
+        if (!this.only) {
+            return [this.name, this.value];
+        }
+        return [this.name, this.value[0]];
+    }
+    reset() {
+        this.value = [];
+        this.text = [];
+        this._input.value = "";
+        this.assigned.forEach((option) => {
+            if (option.value) {
+                option.classList.remove(this.selcls);
+            }
+            else if (option.children) {
+                [...option.children].forEach((option) => {
+                    option.classList.remove(this.selcls);
+                });
+            }
+        });
+        if (this.def) {
+            if (!this.only) {
+                this.def.split(";").forEach((def) => {
+                    if (def.trim())
+                        this.select(def.trim(), null);
+                });
+            }
+            else {
+                if (this.def.split(";")[0].trim())
+                    this.select(this.def.split(";")[0].trim(), null);
+            }
+        }
+    }
+};
+SelectInput.styles = [
+    STD.styles,
+    css `
+      :host {
+        background: var(${cssvar}--input-background);
+        color: var(${cssvar}--text);
+        display: inline-flex;
+        outline: 0.145em solid transparent;
+        border-radius: 0.25em;
+        height: 1.5em;
+        width: var(${cssvar}--input-width);
+      }
+      :host([open]) {
+        outline-color: var(${cssvar}--input-outline-focus);
+      }
+      input {
+        padding: 0px 0px 0px 0.25em;
+        background: none;
+        cursor: inherit;
+        height: 100%;
+        width: 100%;
+        box-sizing: border-box;
+        border: inherit;
+        outline: none;
+        border-radius: inherit;
+        flex: 1;
+      }
+      div {
+        display: inline-flex;
+        position: relative;
+        width: 100%;
+        border-radius: inherit;
+        z-index: inherit;
+      }
+      label svg {
+        height: 100%;
+      }
+      aside {
+        margin-top: 1px;
+        position: absolute;
+        top: 100%;
+        width: 100%;
+        visibility: hidden;
+        z-index: 1;
+        border-radius: inherit;
+      }
+      section {
+        max-width: calc(100% - 1.2em);
+        height: 100%;
+        overflow: hidden;
+        pointer-events: none;
+        border-radius: inherit;
+        z-index: inherit;
+      }
+      i.selected-item {
+        background: var(${cssvar}--input-true);
+        border-radius: inherit;
+        height: 100%;
+        float: left;
+        display: inline-flex;
+        font-style: normal;
+        align-items: center;
+        padding-left: 0.1em;
+        margin-left: 0.065em;
+      }
+      i:first-child {
+        margin-left: 0;
+      }
+      i.selected-item svg {
+        width: 1em;
+        padding: 0 0.12em;
+        height: 0.8em;
+        pointer-events: all;
+      }
+      aside[open] {
+        visibility: visible;
+      }
+    `,
+];
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SelectInput.prototype, "open", void 0);
+__decorate([
+    property()
+], SelectInput.prototype, "selcls", void 0);
+__decorate([
+    property()
+], SelectInput.prototype, "pla", void 0);
+__decorate([
+    property({ type: Boolean })
+], SelectInput.prototype, "only", void 0);
+__decorate([
+    property()
+], SelectInput.prototype, "def", void 0);
+__decorate([
+    property({ type: Array })
+], SelectInput.prototype, "value", void 0);
+__decorate([
+    property()
+], SelectInput.prototype, "name", void 0);
+__decorate([
+    state()
+], SelectInput.prototype, "text", void 0);
+__decorate([
+    property({ type: Boolean })
+], SelectInput.prototype, "autofocus", void 0);
+__decorate([
+    query("input")
+], SelectInput.prototype, "_input", void 0);
+__decorate([
+    query("aside")
+], SelectInput.prototype, "_aside", void 0);
+SelectInput = __decorate([
+    define("select-input")
+], SelectInput);
+export { SelectInput };
+export default SelectInput;