godown 2.7.5 → 2.7.6

package/web-components/input/select-input.js

@@ -1,13 +1,19 @@
 import { __decorate } from "tslib";
-import { css, html, property, query } from "../../.deps.js";
-import { define } from "../../decorators/define.js";
-import { ifValue } from "../../lib/directives.js";
-import { htmlSlot, svgDelta, svgX } from "../../lib/templates.js";
-import { GodownInput } from "../../supers/input.js";
-import { cssvarValues, GodownElement } from "../../supers/root.js";
-const defineName = "select-input";
+import { css, html, property } from "../../_deps.js";
+import { godown } from "../../decorators/godown.js";
+import { styles } from "../../decorators/styles.js";
+import { htmlSlot } from "../../lib/directives.js";
+import { svgDelta, svgX } from "../../lib/icons.js";
+import GodownInput from "../../proto/super-input.js";
+import { cssGlobalVars } from "../../styles/global.js";
+import { fieldStyle, inputStyle } from "../../styles/inputStyle.js";
+const protoName = "select-input";
 /**
  * {@linkcode SelectInput} select matched elements.
+ *
+ * This will not support multi-selection operations.
+ *
+ * @slot - Options.
  */
 let SelectInput = class SelectInput extends GodownInput {
     constructor() {
@@ -16,327 +22,189 @@ let SelectInput = class SelectInput extends GodownInput {
          * Open content.
          */
         this.open = false;
-        /**
-         * Only a single option is allowed.
-         */
-        this.only = false;
-        /**
-         * Selected values.
-         */
-        this.value = [];
-        /**
-         * Input name.
-         */
-        this.name = "select";
-        /**
-         * Selected texts.
-         */
-        this.text = [];
-    }
-    get assigned() {
-        return super.assigned;
     }
     render() {
-        return html ` <div>
-      <section>${this.renderList()}</section>
+        return html `<div part="root" class="input-field">
+      <section part="selected">
+        ${this.value &&
+            html `<div class="selected-item">
+          ${this.value}
+          <i
+            @click="${() => {
+                this.value = "";
+            }}"
+            >${svgX()}</i
+          >
+        </div>`}
+      </section>
       <input
+        part="input"
         ?autofocus="${this.autofocus}"
-        id="input"
+        id="${this.makeId}"
         @focus="${() => {
             this.open = true;
         }}"
         @input="${this._handleInput}"
-        placeholder="${this.pla}"
+        placeholder="${this.placeholder}"
       />
-      <label for="input"> ${ifValue(this.children.length > 0, svgDelta())}</label>
-      <aside ?open="${this.open}">${htmlSlot()}</aside>
+      <label for="${this.makeId}"> <i>${svgDelta()}</i></label>
+      <div class="content" part="slot">${htmlSlot()}</div>
     </div>`;
     }
-    renderList() {
-        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]}
-            <div
-              @click="${() => {
-                    this.select(this.value[i]);
-                }}"
-            >
-              ${svgX()}
-            </div>
-          </i>`);
-            }
-        }
-        return itemTemplates;
-    }
-    _focusCheck() {
-        if (this.autofocus) {
-            this._input?.focus();
-            this.open = true;
-        }
-    }
-    focus(options) {
-        this._input?.focus(options);
-        this.open = true;
-    }
-    connectedCallback() {
-        GodownElement.prototype.connectedCallback.call(this);
-    }
-    getOptionValue(option) {
-        return option.value || option.getAttribute("value");
-    }
     firstUpdated() {
-        const defs = this.def.split(";");
-        defs
-            .filter((i) => i.trim())
-            .forEach((i) => {
-            this.select(i);
-        });
-        this._focusCheck();
-        const CLICK = "click";
-        this.assigned.forEach((option) => {
-            if (this.getOptionValue(option)) {
-                this.addEvent(option, CLICK, () => {
-                    this.select(this.getOptionValue(option), option.textContent);
-                });
-            }
-            else if (option.children) {
-                [...option.children].forEach((option) => {
-                    this.addEvent(option, CLICK, () => {
-                        this.select(this.getOptionValue(option), option.textContent);
-                    });
-                });
-            }
-        });
-        this.addEvent(this, "change", () => {
-            this.open = !this.only;
-        });
-        this.addEvent(document, CLICK, (e) => {
+        super.firstUpdated();
+        this.addEvent(document, "click", (e) => {
+            const target = e.target;
             if (!this.contains(e.target)) {
                 this.open = false;
             }
+            else if (target !== this) {
+                const value = this.getOptionValue(target);
+                if (value) {
+                    this.select(value, target.textContent);
+                }
+            }
         });
     }
     select(value, text) {
-        if (text === undefined || text === null) {
-            this.assigned.some((option) => {
-                const optionValue = this.getOptionValue(option);
-                if (optionValue) {
-                    if (optionValue === value) {
-                        text = option.textContent;
-                        return true;
-                    }
-                }
-                else if (option.children) {
-                    return [...option.children].some((subOption) => {
-                        const subOptionValue = this.getOptionValue(subOption);
-                        if (subOptionValue === value) {
-                            text = subOption.textContent;
-                            return true;
-                        }
-                        return false;
-                    });
-                }
-                return false;
-            });
-        }
-        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.value = value;
+        this.text = text || value;
         this._input.value = "";
+        this.filter();
         this.dispatchEvent(new CustomEvent("change", { detail: this.namevalue() }));
-        this.requestUpdate();
     }
-    _handleInput() {
-        const BLOCK = "block";
-        const NONE = "none";
-        let value = this._input.value.trim();
-        if (!this.only && value.includes(";")) {
-            value = value.split(";").pop().trim();
-        }
-        this.assigned.forEach((option) => {
-            if (this.getOptionValue(option)) {
-                option.style.display = BLOCK;
+    filter(value) {
+        this.querySelectorAll("*").forEach((option) => {
+            const { style } = option;
+            if (!value) {
+                style.display = null;
+                return;
             }
-            if (option.children) {
-                option.style.display = BLOCK;
-                [...option.children].forEach((subOption) => {
-                    subOption.style.display = BLOCK;
-                });
+            const optionValue = this.getOptionValue(option);
+            if (includesIgnoreCase(optionValue, value) || includesIgnoreCase(option.textContent, value)) {
+                style.display = null;
+            }
+            else {
+                style.display = "none";
             }
         });
-        if (value) {
-            this.assigned.forEach((option) => {
-                const optionValue = this.getOptionValue(option);
-                if (optionValue) {
-                    const isMatch = includesIgnoreCase(optionValue, value) || includesIgnoreCase(option.innerText, value);
-                    option.style.display = isMatch ? BLOCK : NONE;
-                }
-                else if (option.children) {
-                    [...option.children].forEach((subOption) => {
-                        const subOptionValue = this.getOptionValue(subOption);
-                        const isSubMatch = includesIgnoreCase(subOptionValue, value) || includesIgnoreCase(subOption.innerText, value);
-                        subOption.style.display = isSubMatch ? BLOCK : NONE;
-                    });
-                    if ([...option.children].filter((option) => option.style.display === BLOCK).length === 0) {
-                        option.style.display = NONE;
-                    }
-                }
-            });
+    }
+    reset() {
+        if (this.default) {
+            this.select(this.default, this.defaultText || this.default);
         }
+    }
+    _handleInput() {
+        this.filter(this._input.value.trim());
         this.dispatchEvent(new CustomEvent("input", { detail: this.namevalue() }));
     }
-    namevalue() {
-        return [this.name, this.only ? this.value[0] : this.value];
+    focus(options) {
+        this._input?.focus(options);
+        this.open = true;
     }
-    reset() {
-        this.value = [];
-        this.text = [];
-        this._input.value = "";
-        if (this.def) {
-            const defs = this.def.split(";");
-            const defToSelect = this.only ? [defs[0]] : defs;
-            defToSelect
-                .filter((def) => def.trim())
-                .forEach((def) => {
-                this.select(def.trim(), null);
-            });
-        }
+    getOptionValue(option) {
+        return option.value || option.getAttribute("value") || "";
     }
 };
-SelectInput.styles = [
-    GodownInput.styles,
-    css `
-      :host {
-        background: var(${cssvarValues.input}--background);
-        margin: var(${cssvarValues.input}--outline-width);
-        outline: var(${cssvarValues.input}--outline-width) solid transparent;
-        height: var(${cssvarValues.input}--height);
-        width: var(${cssvarValues.input}--width);
-        border-radius: var(${cssvarValues.input}--radius);
-      }
-
-      :host([open]) {
-        outline-color: var(${cssvarValues.input}--outline-color);
-      }
-
-      input {
-        padding: 0 0 0 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(${cssvarValues.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({ type: Boolean, reflect: true })
-], SelectInput.prototype, "only", void 0);
-__decorate([
-    property({ type: Array })
-], SelectInput.prototype, "value", void 0);
 __decorate([
     property()
-], SelectInput.prototype, "name", void 0);
-__decorate([
-    property({ type: Array })
 ], SelectInput.prototype, "text", void 0);
 __decorate([
-    query("input")
-], SelectInput.prototype, "_input", void 0);
-__decorate([
-    query("aside")
-], SelectInput.prototype, "_aside", void 0);
+    property({
+        attribute: "default-text",
+    })
+], SelectInput.prototype, "defaultText", void 0);
 SelectInput = __decorate([
-    define(defineName)
+    godown(protoName),
+    styles([
+        inputStyle,
+        fieldStyle,
+        css `
+    :host {
+      background: var(--${cssGlobalVars.input}--background);
+      margin: var(--${cssGlobalVars.input}--outline-width);
+      outline: var(--${cssGlobalVars.input}--outline-width) solid transparent;
+      border-radius: var(--${cssGlobalVars.input}--radius);
+      height: var(--${cssGlobalVars.input}--height);
+      width: var(--${cssGlobalVars.input}--width);
+      display: block;
+    }
+
+    :host([open]) {
+      outline-color: var(--${cssGlobalVars.input}--outline-color);
+    }
+
+    input {
+      flex: 1;
+      width: 100%;
+      height: 100%;
+      cursor: inherit;
+      border: inherit;
+      background: none;
+      padding: 0 0 0 0.25em;
+      box-sizing: border-box;
+      border-radius: inherit;
+    }
+
+    section {
+      height: 100%;
+      overflow: hidden;
+      z-index: inherit;
+      border-radius: inherit;
+      max-width: calc(100% - 1.2em);
+    }
+
+    [part="root"] {
+      width: 100%;
+      z-index: inherit;
+      position: relative;
+      display: inline-flex;
+      align-items: center;
+      border-radius: inherit;
+    }
+
+    .content {
+      top: 100%;
+      position: absolute;
+      width: 100%;
+      z-index: 1;
+      margin-top: 1px;
+      visibility: hidden;
+      border-radius: inherit;
+    }
+
+    :host([open]) .content {
+      visibility: visible;
+    }
+  `,
+        css `
+    .selected-item {
+      background: var(--${cssGlobalVars.input}--true);
+      border-radius: inherit;
+      height: 100%;
+      float: left;
+      display: inline-flex;
+      font-style: normal;
+      align-items: center;
+      padding: 0 0.1em 0 0.2em;
+    }
+
+    .selected-item i {
+      height: -moz-fit-content;
+      height: fit-content;
+    }
+  `,
+    ])
 ], SelectInput);
 export { SelectInput };
 export default SelectInput;
 function includesIgnoreCase(a, b) {
+    if (!a || !b) {
+        return false;
+    }
     return a.toLowerCase().includes(b.toLowerCase());
 }
 //# sourceMappingURL=select-input.js.map

package/web-components/input/select-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/select-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, html, property, query } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { ifValue } from \"../../lib/directives.js\";\nimport { htmlSlot, type HTMLTemplate, svgDelta, svgX } from \"../../lib/templates.js\";\nimport { GodownInput } from \"../../supers/input.js\";\nimport { cssvarValues, GodownElement } from \"../../supers/root.js\";\n\nconst defineName = \"select-input\";\n\n/**\n * {@linkcode SelectInput} select matched elements.\n */\n@define(defineName)\nexport class SelectInput extends GodownInput {\n  /**\n   * Open content.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n  /**\n   * Only a single option is allowed.\n   */\n  @property({ type: Boolean, reflect: true }) only = false;\n  /**\n   * Selected values.\n   */\n  @property({ type: Array }) value = [];\n  /**\n   * Input name.\n   */\n  @property() name = \"select\";\n  /**\n   * Selected texts.\n   */\n  @property({ type: Array }) text: string[] = [];\n\n  static styles = [\n    GodownInput.styles,\n    css`\n      :host {\n        background: var(${cssvarValues.input}--background);\n        margin: var(${cssvarValues.input}--outline-width);\n        outline: var(${cssvarValues.input}--outline-width) solid transparent;\n        height: var(${cssvarValues.input}--height);\n        width: var(${cssvarValues.input}--width);\n        border-radius: var(${cssvarValues.input}--radius);\n      }\n\n      :host([open]) {\n        outline-color: var(${cssvarValues.input}--outline-color);\n      }\n\n      input {\n        padding: 0 0 0 0.25em;\n        background: none;\n        cursor: inherit;\n        height: 100%;\n        width: 100%;\n        box-sizing: border-box;\n        border: inherit;\n        outline: none;\n        border-radius: inherit;\n        flex: 1;\n      }\n\n      div {\n        display: inline-flex;\n        position: relative;\n        width: 100%;\n        border-radius: inherit;\n        z-index: inherit;\n      }\n\n      label svg {\n        height: 100%;\n      }\n\n      aside {\n        margin-top: 1px;\n        position: absolute;\n        top: 100%;\n        width: 100%;\n        visibility: hidden;\n        z-index: 1;\n        border-radius: inherit;\n      }\n\n      section {\n        max-width: calc(100% - 1.2em);\n        height: 100%;\n        overflow: hidden;\n        pointer-events: none;\n        border-radius: inherit;\n        z-index: inherit;\n      }\n\n      i.selected-item {\n        background: var(${cssvarValues.input}--true);\n        border-radius: inherit;\n        height: 100%;\n        float: left;\n        display: inline-flex;\n        font-style: normal;\n        align-items: center;\n        padding-left: 0.1em;\n        margin-left: 0.065em;\n      }\n\n      i:first-child {\n        margin-left: 0;\n      }\n\n      i.selected-item svg {\n        width: 1em;\n        padding: 0 0.12em;\n        height: 0.8em;\n        pointer-events: all;\n      }\n\n      aside[open] {\n        visibility: visible;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  get assigned() {\n    return super.assigned as any;\n  }\n\n  @query(\"input\") _input: HTMLInputElement;\n  @query(\"aside\") _aside: HTMLInputElement;\n\n  protected render(): HTMLTemplate {\n    return html` <div>\n      <section>${this.renderList()}</section>\n      <input\n        ?autofocus=\"${this.autofocus}\"\n        id=\"input\"\n        @focus=\"${() => {\n          this.open = true;\n        }}\"\n        @input=\"${this._handleInput}\"\n        placeholder=\"${this.pla}\"\n      />\n      <label for=\"input\"> ${ifValue(this.children.length > 0, svgDelta())}</label>\n      <aside ?open=\"${this.open}\">${htmlSlot()}</aside>\n    </div>`;\n  }\n\n  private renderList(): HTMLTemplate[] {\n    const itemTemplates = [];\n    if (this.value.length) {\n      for (const i in this.value) {\n        itemTemplates.push(\n          html`<i class=\"selected-item\">\n            ${this.text[i] || this.value[i]}\n            <div\n              @click=\"${() => {\n                this.select(this.value[i]);\n              }}\"\n            >\n              ${svgX()}\n            </div>\n          </i>`,\n        );\n      }\n    }\n    return itemTemplates;\n  }\n\n  protected _focusCheck() {\n    if (this.autofocus) {\n      this._input?.focus();\n      this.open = true;\n    }\n  }\n\n  focus(options?: FocusOptions) {\n    this._input?.focus(options);\n    this.open = true;\n  }\n\n  connectedCallback() {\n    GodownElement.prototype.connectedCallback.call(this);\n  }\n\n  getOptionValue(option: Element) {\n    return (option as HTMLOptionElement).value || option.getAttribute(\"value\");\n  }\n\n  protected firstUpdated() {\n    const defs = this.def.split(\";\");\n    defs\n      .filter((i) => i.trim())\n      .forEach((i) => {\n        this.select(i);\n      });\n    this._focusCheck();\n    const CLICK = \"click\";\n    (this.assigned as HTMLElement[]).forEach((option: HTMLElement) => {\n      if (this.getOptionValue(option)) {\n        this.addEvent(option, CLICK, () => {\n          this.select(this.getOptionValue(option), option.textContent);\n        });\n      } else if (option.children) {\n        [...option.children].forEach((option: HTMLElement) => {\n          this.addEvent(option, CLICK, () => {\n            this.select(this.getOptionValue(option), option.textContent);\n          });\n        });\n      }\n    });\n    this.addEvent(this, \"change\", () => {\n      this.open = !this.only;\n    });\n    this.addEvent(document, CLICK, (e) => {\n      if (!this.contains(e.target as Node)) {\n        this.open = false;\n      }\n    });\n  }\n\n  select(value: string, text?: string) {\n    if (text === undefined || text === null) {\n      this.assigned.some((option: HTMLElement) => {\n        const optionValue = this.getOptionValue(option);\n        if (optionValue) {\n          if (optionValue === value) {\n            text = option.textContent;\n            return true;\n          }\n        } else if (option.children) {\n          return [...option.children].some((subOption) => {\n            const subOptionValue = this.getOptionValue(subOption);\n            if (subOptionValue === value) {\n              text = subOption.textContent;\n              return true;\n            }\n            return false;\n          });\n        }\n        return false;\n      });\n    }\n    if (this.value.includes(value)) {\n      if (!this.only) {\n        this.value = this.value.filter((v) => v !== value);\n        this.text = this.text.filter((v) => v !== text);\n      } else {\n        this.value = [];\n        this.text = [];\n      }\n    } else {\n      if (!this.only) {\n        this.value.push(value);\n        this.text.push(text);\n      } else {\n        this.value = [value];\n        this.text = [text];\n      }\n    }\n    this._input.value = \"\";\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: this.namevalue() }));\n    this.requestUpdate();\n  }\n\n  protected _handleInput() {\n    const BLOCK = \"block\";\n    const NONE = \"none\";\n    let value = this._input.value.trim();\n    if (!this.only && value.includes(\";\")) {\n      value = value.split(\";\").pop().trim();\n    }\n    this.assigned.forEach((option) => {\n      if (this.getOptionValue(option)) {\n        option.style.display = BLOCK;\n      }\n      if (option.children) {\n        option.style.display = BLOCK;\n        [...option.children].forEach((subOption) => {\n          subOption.style.display = BLOCK;\n        });\n      }\n    });\n    if (value) {\n      this.assigned.forEach((option) => {\n        const optionValue = this.getOptionValue(option);\n        if (optionValue) {\n          const isMatch = includesIgnoreCase(optionValue, value) || includesIgnoreCase(option.innerText, value);\n          option.style.display = isMatch ? BLOCK : NONE;\n        } else if (option.children) {\n          [...option.children].forEach((subOption) => {\n            const subOptionValue = this.getOptionValue(subOption);\n            const isSubMatch = includesIgnoreCase(subOptionValue, value) || includesIgnoreCase(subOption.innerText, value);\n            subOption.style.display = isSubMatch ? BLOCK : NONE;\n          });\n          if ([...option.children].filter((option) => option.style.display === BLOCK).length === 0) {\n            option.style.display = NONE;\n          }\n        }\n      });\n    }\n    this.dispatchEvent(new CustomEvent(\"input\", { detail: this.namevalue() }));\n  }\n\n  namevalue(): [string, any[]] | [string, any] {\n    return [this.name, this.only ? this.value[0] : this.value];\n  }\n\n  reset() {\n    this.value = [];\n    this.text = [];\n    this._input.value = \"\";\n    if (this.def) {\n      const defs = this.def.split(\";\");\n      const defToSelect = this.only ? [defs[0]] : defs;\n      defToSelect\n        .filter((def) => def.trim())\n        .forEach((def) => {\n          this.select(def.trim(), null);\n        });\n    }\n  }\n}\n\nexport default SelectInput;\n\nfunction includesIgnoreCase(a: string, b: string): boolean {\n  return a.toLowerCase().includes(b.toLowerCase());\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"select-input\": SelectInput;\n    \"g-select-input\": SelectInput;\n  }\n}\n"]}
+{"version":3,"file":"select-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/select-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, property } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport { styles } from \"../../decorators/styles.js\";\nimport { htmlSlot } from \"../../lib/directives.js\";\nimport { svgDelta, svgX } from \"../../lib/icons.js\";\nimport GodownInput from \"../../proto/super-input.js\";\nimport { cssGlobalVars } from \"../../styles/global.js\";\nimport { fieldStyle, inputStyle } from \"../../styles/inputStyle.js\";\n\nconst protoName = \"select-input\";\n\n/**\n * {@linkcode SelectInput} select matched elements.\n *\n * This will not support multi-selection operations.\n *\n * @slot - Options.\n */\n@godown(protoName)\n@styles([\n  inputStyle,\n  fieldStyle,\n  css`\n    :host {\n      background: var(--${cssGlobalVars.input}--background);\n      margin: var(--${cssGlobalVars.input}--outline-width);\n      outline: var(--${cssGlobalVars.input}--outline-width) solid transparent;\n      border-radius: var(--${cssGlobalVars.input}--radius);\n      height: var(--${cssGlobalVars.input}--height);\n      width: var(--${cssGlobalVars.input}--width);\n      display: block;\n    }\n\n    :host([open]) {\n      outline-color: var(--${cssGlobalVars.input}--outline-color);\n    }\n\n    input {\n      flex: 1;\n      width: 100%;\n      height: 100%;\n      cursor: inherit;\n      border: inherit;\n      background: none;\n      padding: 0 0 0 0.25em;\n      box-sizing: border-box;\n      border-radius: inherit;\n    }\n\n    section {\n      height: 100%;\n      overflow: hidden;\n      z-index: inherit;\n      border-radius: inherit;\n      max-width: calc(100% - 1.2em);\n    }\n\n    [part=\"root\"] {\n      width: 100%;\n      z-index: inherit;\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      border-radius: inherit;\n    }\n\n    .content {\n      top: 100%;\n      position: absolute;\n      width: 100%;\n      z-index: 1;\n      margin-top: 1px;\n      visibility: hidden;\n      border-radius: inherit;\n    }\n\n    :host([open]) .content {\n      visibility: visible;\n    }\n  `,\n  css`\n    .selected-item {\n      background: var(--${cssGlobalVars.input}--true);\n      border-radius: inherit;\n      height: 100%;\n      float: left;\n      display: inline-flex;\n      font-style: normal;\n      align-items: center;\n      padding: 0 0.1em 0 0.2em;\n    }\n\n    .selected-item i {\n      height: -moz-fit-content;\n      height: fit-content;\n    }\n  `,\n])\nexport class SelectInput extends GodownInput {\n  /**\n   * Open content.\n   */\n  @property({ type: Boolean, reflect: true }) open = false;\n\n  /**\n   * Selected texts.\n   */\n  @property() text: string;\n  /**\n   * Selected texts.\n   */\n  @property({\n    attribute: \"default-text\",\n  })\n  defaultText: string;\n\n  protected render() {\n    return html`<div part=\"root\" class=\"input-field\">\n      <section part=\"selected\">\n        ${this.value &&\n        html`<div class=\"selected-item\">\n          ${this.value}\n          <i\n            @click=\"${() => {\n              this.value = \"\";\n            }}\"\n            >${svgX()}</i\n          >\n        </div>`}\n      </section>\n      <input\n        part=\"input\"\n        ?autofocus=\"${this.autofocus}\"\n        id=\"${this.makeId}\"\n        @focus=\"${() => {\n          this.open = true;\n        }}\"\n        @input=\"${this._handleInput}\"\n        placeholder=\"${this.placeholder}\"\n      />\n      <label for=\"${this.makeId}\"> <i>${svgDelta()}</i></label>\n      <div class=\"content\" part=\"slot\">${htmlSlot()}</div>\n    </div>`;\n  }\n\n  protected firstUpdated() {\n    super.firstUpdated();\n    this.addEvent(document, \"click\", (e) => {\n      const target = e.target as HTMLElement;\n      if (!this.contains(e.target as Node)) {\n        this.open = false;\n      } else if (target !== this) {\n        const value = this.getOptionValue(target);\n        if (value) {\n          this.select(value, target.textContent);\n        }\n      }\n    });\n  }\n\n  select(value: string, text?: string) {\n    this.value = value;\n    this.text = text || value;\n    this._input.value = \"\";\n    this.filter();\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: this.namevalue() }));\n  }\n\n  filter(value?: string) {\n    this.querySelectorAll(\"*\").forEach((option: HTMLElement) => {\n      const { style } = option;\n      if (!value) {\n        style.display = null;\n        return;\n      }\n      const optionValue = this.getOptionValue(option);\n      if (includesIgnoreCase(optionValue, value) || includesIgnoreCase(option.textContent, value)) {\n        style.display = null;\n      } else {\n        style.display = \"none\";\n      }\n    });\n  }\n\n  reset() {\n    if (this.default) {\n      this.select(this.default, this.defaultText || this.default);\n    }\n  }\n\n  protected _handleInput() {\n    this.filter(this._input.value.trim());\n    this.dispatchEvent(new CustomEvent(\"input\", { detail: this.namevalue() }));\n  }\n\n  focus(options?: FocusOptions) {\n    this._input?.focus(options);\n    this.open = true;\n  }\n\n  getOptionValue(option: Element) {\n    return (option as HTMLOptionElement).value || option.getAttribute(\"value\") || \"\";\n  }\n  /**\n   * @deprecated\n   */\n  only: boolean;\n}\n\nexport default SelectInput;\n\nfunction includesIgnoreCase(a: string, b: string): boolean {\n  if (!a || !b) {\n    return false;\n  }\n  return a.toLowerCase().includes(b.toLowerCase());\n}\n"]}

package/web-components/input/split-input.d.ts

@@ -1,10 +1,9 @@
-import { type CSSResultGroup } from "../../.deps.js";
-import { type HTMLTemplate } from "../../lib/templates.js";
-import { GodownInput } from "../../supers/input.js";
+import { type HTMLEvent } from "../../proto/godown-element";
+import GodownSuperInput from "../../proto/super-input.js";
 /**
  * {@linkcode SplitInput } renders multiple inputs.
  */
-export declare class SplitInput extends GodownInput {
+export declare class SplitInput extends GodownSuperInput {
     /**
      * The number of simulated input boxes.
      */
@@ -17,20 +16,14 @@ export declare class SplitInput extends GodownInput {
     _spans: NodeListOf<HTMLSpanElement>;
     current: number;
     currentValue: (string | null)[];
-    static styles: CSSResultGroup;
-    protected render(): HTMLTemplate;
+    protected render(): import("lit").TemplateResult<1>;
     protected firstUpdated(): void;
-    protected _handleInput(e: InputEvent): void;
+    protected _handleInput(e: HTMLEvent<HTMLInputElement>): void;
     focus(): void;
-    focusAt(i?: number): void;
-    blur(i?: number): void;
+    focusAt(i: number): void;
+    blur(): void;
+    blurAt(i: number): void;
     reset(): void;
 }
 export default SplitInput;
-declare global {
-    interface HTMLElementTagNameMap {
-        "split-input": SplitInput;
-        "g-split-input": SplitInput;
-    }
-}
 //# sourceMappingURL=split-input.d.ts.map

package/web-components/input/split-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"split-input.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/split-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAmC,MAAM,gBAAgB,CAAC;AAE3F,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AASpD;;GAEG;AACH,qBACa,UAAW,SAAQ,WAAW;IACzC;;OAEG;IACyB,GAAG,SAAK;IACpC;;OAEG;IACyB,KAAK,SAAM;IAEvB,MAAM,EAAE,gBAAgB,CAAC;IACvB,MAAM,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IACtD,OAAO,SAAK;IACZ,YAAY,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAM;IAErC,MAAM,CAAC,MAAM,iBAkDO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;IAWhC,SAAS,CAAC,YAAY;IAiBtB,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU;IA4BpC,KAAK;IAIL,OAAO,CAAC,CAAC,SAAe;IAQxB,IAAI,CAAC,CAAC,SAAe;IAKrB,KAAK;CASN;AAED,eAAe,UAAU,CAAC;AAE1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;QAC1B,eAAe,EAAE,UAAU,CAAC;KAC7B;CACF"}
+{"version":3,"file":"split-input.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/split-input.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAC5D,OAAO,gBAAgB,MAAM,4BAA4B,CAAC;AAU1D;;GAEG;AACH,qBAuDa,UAAW,SAAQ,gBAAgB;IAC9C;;OAEG;IACyB,GAAG,SAAK;IACpC;;OAEG;IACyB,KAAK,SAAM;IAEvB,MAAM,EAAE,gBAAgB,CAAC;IACvB,MAAM,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IACtD,OAAO,SAAK;IACZ,YAAY,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAM;IAErC,SAAS,CAAC,MAAM;IAkBhB,SAAS,CAAC,YAAY;IAYtB,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,SAAS,CAAC,gBAAgB,CAAC;IA4BrD,KAAK;IAIL,OAAO,CAAC,CAAC,EAAE,MAAM;IAQjB,IAAI;IAIJ,MAAM,CAAC,CAAC,EAAE,MAAM;IAKhB,KAAK;CASN;AAED,eAAe,UAAU,CAAC"}