godown 2.5.0 → 2.6.0

package/{input-form/std.js → web-components/input/input.js}

@@ -1,12 +1,7 @@
-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 { css, property } from "../deps.js";
-import { cssvarValues, GodownElement } from "../root.js";
-export class InputSTD extends GodownElement {
+import { __decorate } from "tslib";
+import { css, property } from "../../deps.js";
+import { cssvarValues, GodownElement } from "../../root.js";
+export class InputElement extends GodownElement {
     constructor() {
         super(...arguments);
         this.type = "text";
@@ -18,6 +13,21 @@ export class InputSTD extends GodownElement {
         this.autofocus = false;
         this.nameValue = () => this.namevalue();
     }
+    static { this.styles = [
+        GodownElement.styles,
+        css `
+      :host {
+        display: flex;
+      }
+      ::-ms-reveal {
+        display: none;
+      }
+      ::-webkit-calendar-picker-indicator {
+        background-color: var(${cssvarValues.input}-true);
+        border-radius: 0.1rem;
+      }
+    `,
+    ]; }
     namevalue() {
         return [this.name, this.value];
     }
@@ -83,62 +93,25 @@ export class InputSTD extends GodownElement {
         return target.value;
     }
 }
-InputSTD.styles = [
-    GodownElement.styles,
-    css `
-      :host {
-        display: flex;
-      }
-      ::-ms-reveal {
-        display: none;
-      }
-      ::-webkit-calendar-picker-indicator {
-        background-color: var(${cssvarValues.input}-true);
-        border-radius: 0.1rem;
-      }
-    `,
-];
 __decorate([
     property({ reflect: true })
-], InputSTD.prototype, "type", void 0);
+], InputElement.prototype, "type", void 0);
 __decorate([
     property()
-], InputSTD.prototype, "name", void 0);
+], InputElement.prototype, "name", void 0);
 __decorate([
     property()
-], InputSTD.prototype, "value", void 0);
+], InputElement.prototype, "value", void 0);
 __decorate([
     property({ reflect: true })
-], InputSTD.prototype, "label", void 0);
+], InputElement.prototype, "label", void 0);
 __decorate([
     property()
-], InputSTD.prototype, "def", void 0);
+], InputElement.prototype, "def", void 0);
 __decorate([
     property({ reflect: true })
-], InputSTD.prototype, "pla", void 0);
+], InputElement.prototype, "pla", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
-], InputSTD.prototype, "autofocus", void 0);
-export class FormSTD extends GodownElement {
-    constructor() {
-        super(...arguments);
-        this.name = "";
-        this.value = {};
-        this.nameValue = () => this.namevalue();
-    }
-    namevalue() {
-        return [this.name, this.value];
-    }
-}
-FormSTD.styles = GodownElement.styles;
-__decorate([
-    property()
-], FormSTD.prototype, "name", void 0);
-__decorate([
-    property({ type: Object })
-], FormSTD.prototype, "value", void 0);
-export default {
-    InputSTD,
-    FormSTD,
-};
-//# sourceMappingURL=std.js.map
+], InputElement.prototype, "autofocus", void 0);
+//# sourceMappingURL=input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/input.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, property } from \"../../deps.js\";\nimport { cssvarValues, GodownElement } from \"../../root.js\";\n\nexport type InputType = \"hidden\" | \"text\" | \"search\" | \"tel\" | \"url\" | \"email\" | \"password\" | \"datetime\" | \"date\" | \"month\" | \"week\" | \"time\" | \"datetime-local\" | \"number\" | \"range\" | \"color\" | \"checkbox\" | \"radio\" | \"file\" | \"image\";\n\nexport class InputElement extends GodownElement {\n  @property({ reflect: true }) type: InputType = \"text\";\n  @property() name: string = undefined;\n  @property() value: string | any = undefined;\n  @property({ reflect: true }) label = \"\";\n  @property() def = \"\";\n  @property({ reflect: true }) pla?: string = undefined;\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  _input: HTMLInputElement;\n  compositing: boolean;\n\n  static styles = [\n    GodownElement.styles,\n    css`\n      :host {\n        display: flex;\n      }\n      ::-ms-reveal {\n        display: none;\n      }\n      ::-webkit-calendar-picker-indicator {\n        background-color: var(${cssvarValues.input}-true);\n        border-radius: 0.1rem;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  namevalue(): [string, any] {\n    return [this.name, this.value];\n  }\n\n  nameValue = () => this.namevalue();\n\n  reset() {\n    this.value = this.def;\n    this._input.value = this.def;\n  }\n\n  protected _handleInput(e: any) {\n    e.stopPropagation();\n    this.value = e.target.value?.trim();\n    if (this.compositing) {\n      return;\n    }\n    this.dispatchEvent(new CustomEvent(\"input\", { detail: this.value, bubbles: true, composed: true }));\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: this.value, composed: true }));\n  }\n\n  protected _handleChange() {\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: this.value, composed: true }));\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.def) {\n      this.def = this.value || \"\";\n    }\n    if (!this.value) {\n      this.value = this.def;\n    }\n    this._initName();\n  }\n\n  protected _initName() {\n    if (!this.name) {\n      if (this.label || this.type) {\n        this.name = this.label || this.type;\n      }\n    }\n  }\n\n  protected _compositionCheck() {\n    if (this._input) {\n      this.addEvent(this._input, \"compositionstart\", () => {\n        this.compositing = true;\n      });\n      this.addEvent(this._input, \"compositionend\", (e: MouseEvent) => {\n        this.compositing = false;\n        this._handleInput(e);\n      });\n    }\n  }\n\n  protected _changeInputType(t: InputType) {\n    this._input.type = t;\n  }\n\n  focus(options?: FocusOptions) {\n    this._input?.focus(options);\n  }\n\n  protected firstUpdated() {\n    this._compositionCheck();\n    this.reset();\n  }\n\n  protected targetValue(e: Event): string | any {\n    const target = e.target as HTMLInputElement;\n    if (target.value.trim) {\n      return target.value.trim();\n    }\n    return target.value;\n  }\n}\n"]}

package/{input-form → web-components/input}/label-input.d.ts

@@ -1,6 +1,6 @@
-import { type CSSResultGroup } from "../deps.js";
-import { type HTMLTemplate } from "../lib/templates.js";
-import { InputSTD } from "./std.js";
+import { type CSSResultGroup } from "../../deps.js";
+import { type HTMLTemplate } from "../../lib/templates.js";
+import { InputElement } from "./input.js";
 /**
  * LabelInput renders label and input.
  *
@@ -8,7 +8,7 @@ import { InputSTD } from "./std.js";
  *
  * Otherwise it behaves similarly to the `BaseInput`.
  */
-export declare class LabelInput extends InputSTD {
+export declare class LabelInput extends InputElement {
     /**
      * Conditions for adjust layout.
      */

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

@@ -0,0 +1 @@
+{"version":3,"file":"label-input.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/label-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAyB,MAAM,eAAe,CAAC;AAChF,OAAO,EAAuB,KAAK,YAAY,EAAU,MAAM,wBAAwB,CAAC;AAExF,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AA+B1C;;;;;;GAMG;AACH,qBACa,UAAW,SAAQ,YAAY;IAC1C;;OAEG;IACS,MAAM,SAAW;IAEb,MAAM,EAAE,gBAAgB,CAAC;IAEzC,MAAM,CAAC,MAAM,iBA4DO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY,EAAE;IAmBlC,OAAO,CAAC,SAAS;IAkBjB,SAAS,CAAC,iBAAiB;CAO5B;AAED,eAAe,UAAU,CAAC;AAE1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/{input-form → web-components/input}/label-input.js

@@ -1,13 +1,8 @@
-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 { css, html, property, query } from "../deps.js";
-import { cssvarValues, define } from "../root.js";
-import { htmlSlot, htmlStyle, svgEye } from "../lib/templates.js";
-import { InputSTD } from "./std.js";
+import { __decorate } from "tslib";
+import { css, html, property, query } from "../../deps.js";
+import { htmlSlot, htmlStyle, svgEye } from "../../lib/templates.js";
+import { cssvarValues, define } from "../../root.js";
+import { InputElement } from "./input.js";
 const PASSWORD = "password";
 const styleInMedia = css `
   label[for] {
@@ -39,7 +34,7 @@ const defineName = "label-input";
  *
  * Otherwise it behaves similarly to the `BaseInput`.
  */
-let LabelInput = class LabelInput extends InputSTD {
+let LabelInput = class LabelInput extends InputElement {
     constructor() {
         super(...arguments);
         /**
@@ -47,56 +42,11 @@ let LabelInput = class LabelInput extends InputSTD {
          */
         this.mobile = "540px";
     }
-    render() {
-        const result = html `<fieldset>
-      <i>${htmlSlot("pre")}</i>
-      <input .value="${this.value}" ?autofocus="${this.autofocus}" id="${this.name}" type="${this.type}" placeholder="${this.pla}" class="${this.type}" @input="${this._handleInput}" @change="${this._handleChange}" />
-      ${this.renderSuf()}
-    </fieldset>`;
-        if (this.label) {
-            const style = this.mobile && `${styleWithLabel}@media (max-width: ${this.mobile}){${styleInMedia}}`;
-            return [
-                html `<label for="${this.name}">
-          <span>${this.label}${htmlSlot()}</span>
-          ${result}
-        </label>`,
-                htmlStyle(style),
-            ];
-        }
-        return [result, htmlStyle(styleNoLabel.toString())];
-    }
-    renderSuf() {
-        if (this.type === PASSWORD) {
-            return html `<i
-        @mousedown="${this._passwordSwitcher}"
-        @mouseup="${() => {
-                this._changeInputType(PASSWORD);
-            }}"
-        @mouseleave="${() => {
-                this._changeInputType(PASSWORD);
-            }}"
-      >
-        ${htmlSlot("suf", svgEye(), this)}
-      </i>`;
-        }
-        else {
-            return html `<i>${htmlSlot("suf")}</i>`;
-        }
-    }
-    _passwordSwitcher() {
-        if (this._input.type === PASSWORD) {
-            this._changeInputType("text");
-        }
-        else {
-            this._changeInputType(PASSWORD);
-        }
-    }
-};
-LabelInput.styles = [
-    InputSTD.styles,
-    css `
+    static { this.styles = [
+        InputElement.styles,
+        css `
       :host {
-        margin: var(--godown--input--outline-width);
+        margin: var(${cssvarValues.input}--outline-width);
         border-radius: var(${cssvarValues.input}--radius);
       }
 
@@ -152,7 +102,52 @@ LabelInput.styles = [
         min-width: var(${cssvarValues.input}--width);
       }
     `,
-];
+    ]; }
+    render() {
+        const result = html `<fieldset>
+      <i>${htmlSlot("pre")}</i>
+      <input .value="${this.value}" ?autofocus="${this.autofocus}" id="${this.name}" type="${this.type}" placeholder="${this.pla}" class="${this.type}" @input="${this._handleInput}" @change="${this._handleChange}" />
+      ${this.renderSuf()}
+    </fieldset>`;
+        if (this.label) {
+            const style = this.mobile && `${styleWithLabel}@media (max-width: ${this.mobile}){${styleInMedia}}`;
+            return [
+                html `<label for="${this.name}">
+          <span>${this.label}${htmlSlot()}</span>
+          ${result}
+        </label>`,
+                htmlStyle(style),
+            ];
+        }
+        return [result, htmlStyle(styleNoLabel.toString())];
+    }
+    renderSuf() {
+        if (this.type === PASSWORD) {
+            return html `<i
+        @mousedown="${this._passwordSwitcher}"
+        @mouseup="${() => {
+                this._changeInputType(PASSWORD);
+            }}"
+        @mouseleave="${() => {
+                this._changeInputType(PASSWORD);
+            }}"
+      >
+        ${htmlSlot("suf", svgEye(), this)}
+      </i>`;
+        }
+        else {
+            return html `<i>${htmlSlot("suf")}</i>`;
+        }
+    }
+    _passwordSwitcher() {
+        if (this._input.type === PASSWORD) {
+            this._changeInputType("text");
+        }
+        else {
+            this._changeInputType(PASSWORD);
+        }
+    }
+};
 __decorate([
     property()
 ], LabelInput.prototype, "mobile", void 0);

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

@@ -0,0 +1 @@
+{"version":3,"file":"label-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/label-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, html, property, query } from \"../../deps.js\";\nimport { htmlSlot, htmlStyle, type HTMLTemplate, svgEye } from \"../../lib/templates.js\";\nimport { cssvarValues, define } from \"../../root.js\";\nimport { InputElement } from \"./input.js\";\n\nconst PASSWORD = \"password\";\n\nconst styleInMedia = css`\n  label[for] {\n    justify-content: flex-start;\n    flex-direction: column;\n    align-items: inherit;\n    width: fit-content;\n  }\n  :host {\n    width: var(${cssvarValues.input}--width);\n    margin: auto;\n  }\n`;\n\nconst styleNoLabel = css`\n  :host {\n    width: var(${cssvarValues.input}--width);\n  }\n`;\n\nconst styleWithLabel = css`\n  :host {\n    width: calc(var(${cssvarValues.input}--width) * 2);\n  }\n`;\n\nconst defineName = \"label-input\";\n\n/**\n * LabelInput renders label and input.\n *\n * When there is a label, the layout will be adjusted according to the width of the screen.\n *\n * Otherwise it behaves similarly to the `BaseInput`.\n */\n@define(defineName)\nexport class LabelInput extends InputElement {\n  /**\n   * Conditions for adjust layout.\n   */\n  @property() mobile = \"540px\";\n\n  @query(\"input\") _input: HTMLInputElement;\n\n  static styles = [\n    InputElement.styles,\n    css`\n      :host {\n        margin: var(${cssvarValues.input}--outline-width);\n        border-radius: var(${cssvarValues.input}--radius);\n      }\n\n      label {\n        width: 100%;\n        margin: auto;\n        box-sizing: border-box;\n        height: fit-content;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        border-radius: inherit;\n      }\n\n      span {\n        white-space: nowrap;\n      }\n\n      input {\n        padding: 0 0.25em;\n        background-color: transparent;\n        border-radius: inherit;\n        flex: 1;\n        width: 100%;\n        height: inherit;\n      }\n\n      fieldset:focus-within {\n        outline: var(${cssvarValues.input}--outline);\n      }\n\n      i {\n        margin: auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      i > svg {\n        height: 1em;\n        width: 1em;\n        margin: 0.25em;\n      }\n\n      fieldset {\n        position: relative;\n        background-color: var(${cssvarValues.input}--background);\n        display: flex;\n        align-items: center;\n        border-radius: inherit;\n        height: var(${cssvarValues.input}--height);\n        width: var(${cssvarValues.input}--width);\n        min-width: var(${cssvarValues.input}--width);\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate[] {\n    const result = html`<fieldset>\n      <i>${htmlSlot(\"pre\")}</i>\n      <input .value=\"${this.value}\" ?autofocus=\"${this.autofocus}\" id=\"${this.name}\" type=\"${this.type}\" placeholder=\"${this.pla}\" class=\"${this.type}\" @input=\"${this._handleInput}\" @change=\"${this._handleChange}\" />\n      ${this.renderSuf()}\n    </fieldset>`;\n    if (this.label) {\n      const style = this.mobile && `${styleWithLabel}@media (max-width: ${this.mobile}){${styleInMedia}}`;\n      return [\n        html`<label for=\"${this.name}\">\n          <span>${this.label}${htmlSlot()}</span>\n          ${result}\n        </label>`,\n        htmlStyle(style),\n      ];\n    }\n    return [result, htmlStyle(styleNoLabel.toString())];\n  }\n\n  private renderSuf(): HTMLTemplate {\n    if (this.type === PASSWORD) {\n      return html`<i\n        @mousedown=\"${this._passwordSwitcher}\"\n        @mouseup=\"${() => {\n          this._changeInputType(PASSWORD);\n        }}\"\n        @mouseleave=\"${() => {\n          this._changeInputType(PASSWORD);\n        }}\"\n      >\n        ${htmlSlot(\"suf\", svgEye(), this)}\n      </i>`;\n    } else {\n      return html`<i>${htmlSlot(\"suf\")}</i>`;\n    }\n  }\n\n  protected _passwordSwitcher() {\n    if (this._input.type === PASSWORD) {\n      this._changeInputType(\"text\");\n    } else {\n      this._changeInputType(PASSWORD);\n    }\n  }\n}\n\nexport default LabelInput;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"label-input\": LabelInput;\n  }\n}\n"]}

package/{input-form → web-components/input}/search-input.d.ts

@@ -1,10 +1,10 @@
-import { type CSSResultGroup } from "../deps.js";
-import { type HTMLTemplate } from "../lib/templates.js";
-import { InputSTD } from "./std.js";
+import { type CSSResultGroup } from "../../deps.js";
+import { type HTMLTemplate } from "../../lib/templates.js";
+import { InputElement } from "./input.js";
 /**
  * SearchInput used for search behavior.
  */
-export declare class SearchInput extends InputSTD {
+export declare class SearchInput extends InputElement {
     /**
      * Query selectors.
      */

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

@@ -0,0 +1 @@
+{"version":3,"file":"search-input.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/search-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAyB,MAAM,eAAe,CAAC;AAChF,OAAO,EAAY,KAAK,YAAY,EAAa,MAAM,wBAAwB,CAAC;AAEhF,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAM1C;;GAEG;AACH,qBACa,WAAY,SAAQ,YAAY;IAC3C;;OAEG;IACS,KAAK,SAAM;IACvB;;OAEG;IACS,MAAM,SAAM;IACxB;;OAEG;IAC0B,KAAK,UAAS;IAC3C;;OAEG;IACyC,KAAK,UAAS;IAC1D;;OAEG;IACS,MAAM,SAAM;IACxB;;OAEG;IACS,MAAM,EAAE,KAAK,GAAG,MAAM,CAAS;IAC3C;;OAEG;IACS,IAAI,SAAO;IAEP,MAAM,EAAG,gBAAgB,CAAC;IAE1C,MAAM,CAAC,MAAM,iBAsFO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;IAYhC,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,KAAK;IAOhC,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK;IAiB/B,cAAc,CAAC,CAAC,EAAE,MAAM;CAezB;AAED,eAAe,WAAW,CAAC;AAE3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}

package/{input-form → web-components/input}/search-input.js

@@ -1,19 +1,14 @@
-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 { createScope, cssvarValues, define } from "../root.js";
-import { css, html, property, query } from "../deps.js";
-import { htmlSlot, svgSearch } from "../lib/templates.js";
-import { InputSTD } from "./std.js";
+import { __decorate } from "tslib";
+import { css, html, property, query } from "../../deps.js";
+import { htmlSlot, svgSearch } from "../../lib/templates.js";
+import { createScope, cssvarValues, define } from "../../root.js";
+import { InputElement } from "./input.js";
 const defineName = "search-input";
-const cssvarInput = createScope(defineName);
+const cssScope = createScope(defineName);
 /**
  * SearchInput used for search behavior.
  */
-let SearchInput = class SearchInput extends InputSTD {
+let SearchInput = class SearchInput extends InputElement {
     constructor() {
         super(...arguments);
         /**
@@ -45,69 +40,20 @@ let SearchInput = class SearchInput extends InputSTD {
          */
         this.name = "q";
     }
-    render() {
-        return html `<form action="${this.action}" method="${this.method}">
-      <div>
-        <input .value="${this.value}" ?autofocus="${this.autofocus}" name="${this.name}" @focus="${this._handleInput}" @input="${this._handleInput}" title="" placeholder="${this.pla}" />
-        <button @click="${this._handleSubmit}">${htmlSlot("search", svgSearch(), this)}</button>
-      </div>
-      <ul>
-        ${htmlSlot()}
-      </ul>
-    </form>`;
-    }
-    _handleSubmit(e) {
-        if (!this.action) {
-            e.preventDefault();
-        }
-        this.dispatchEvent(new CustomEvent("submit", { detail: this.value }));
-    }
-    _handleInput(e) {
-        e.stopPropagation();
-        const value = this.targetValue(e);
-        if (value === this.value) {
-            return;
-        }
-        this.value = value;
-        if (this.compositing) {
-            return;
-        }
-        if (this.target && this.query) {
-            this.searchElements(this.value);
-        }
-        this.dispatchEvent(new CustomEvent("input", { detail: this.value, bubbles: true, composed: true }));
-        this.dispatchEvent(new CustomEvent("change", { detail: this.value, composed: true }));
-    }
-    searchElements(s) {
-        const targetElement = document.body.querySelector(this.target);
-        const queryElementsCollection = document.body.querySelectorAll(this.query);
-        if (!targetElement) {
-            return;
-        }
-        targetElement.replaceChildren();
-        if (s && queryElementsCollection.length) {
-            for (const e of queryElementsCollection) {
-                if (e.textContent.includes(this.value)) {
-                    targetElement.appendChild(e.cloneNode(true));
-                }
-            }
-        }
-    }
-};
-SearchInput.styles = [
-    InputSTD.styles,
-    css `
+    static { this.styles = [
+        InputElement.styles,
+        css `
       :host {
-        ${cssvarInput}--width:var(${cssvarValues.input}--width);
-        ${cssvarInput}--input-padding: 0 0 0 .35em;
+        ${cssScope}--width:var(${cssvarValues.input}--width);
+        ${cssScope}--input-padding: 0 0 0 .35em;
         width: var(${cssvarValues.input}--width);
-        margin: var(--godown--input--outline-width);
+        margin: var(${cssvarValues.input}-outline-width);
         border-radius: var(${cssvarValues.input}--radius);
         background: var(${cssvarValues.input}--background);
       }
 
       div {
-        padding: var(${cssvarInput}--input-padding);
+        padding: var(${cssScope}--input-padding);
         height: var(${cssvarValues.input}--height);
         flex: 1;
         display: flex;
@@ -180,7 +126,56 @@ SearchInput.styles = [
         padding: 1px;
       }
     `,
-];
+    ]; }
+    render() {
+        return html `<form action="${this.action}" method="${this.method}">
+      <div>
+        <input .value="${this.value}" ?autofocus="${this.autofocus}" name="${this.name}" @focus="${this._handleInput}" @input="${this._handleInput}" title="" placeholder="${this.pla}" />
+        <button @click="${this._handleSubmit}">${htmlSlot("search", svgSearch(), this)}</button>
+      </div>
+      <ul>
+        ${htmlSlot()}
+      </ul>
+    </form>`;
+    }
+    _handleSubmit(e) {
+        if (!this.action) {
+            e.preventDefault();
+        }
+        this.dispatchEvent(new CustomEvent("submit", { detail: this.value }));
+    }
+    _handleInput(e) {
+        e.stopPropagation();
+        const value = this.targetValue(e);
+        if (value === this.value) {
+            return;
+        }
+        this.value = value;
+        if (this.compositing) {
+            return;
+        }
+        if (this.target && this.query) {
+            this.searchElements(this.value);
+        }
+        this.dispatchEvent(new CustomEvent("input", { detail: this.value, bubbles: true, composed: true }));
+        this.dispatchEvent(new CustomEvent("change", { detail: this.value, composed: true }));
+    }
+    searchElements(s) {
+        const targetElement = document.body.querySelector(this.target);
+        const queryElementsCollection = document.body.querySelectorAll(this.query);
+        if (!targetElement) {
+            return;
+        }
+        targetElement.replaceChildren();
+        if (s && queryElementsCollection.length) {
+            for (const e of queryElementsCollection) {
+                if (e.textContent.includes(this.value)) {
+                    targetElement.appendChild(e.cloneNode(true));
+                }
+            }
+        }
+    }
+};
 __decorate([
     property()
 ], SearchInput.prototype, "query", void 0);

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

@@ -0,0 +1 @@
+{"version":3,"file":"search-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/search-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, html, property, query } from \"../../deps.js\";\nimport { htmlSlot, type HTMLTemplate, svgSearch } from \"../../lib/templates.js\";\nimport { createScope, cssvarValues, define } from \"../../root.js\";\nimport { InputElement } from \"./input.js\";\n\nconst defineName = \"search-input\";\n\nconst cssScope = createScope(defineName);\n\n/**\n * SearchInput used for search behavior.\n */\n@define(defineName)\nexport class SearchInput extends InputElement {\n  /**\n   * Query selectors.\n   */\n  @property() query = \"\";\n  /**\n   * Target selectors.\n   */\n  @property() target = \"\";\n  /**\n   * Enable infer.\n   */\n  @property({ type: Boolean }) infer = false;\n  /**\n   * Float result.\n   */\n  @property({ type: Boolean, reflect: true }) float = false;\n  /**\n   * Form action.\n   */\n  @property() action = \"\";\n  /**\n   * Form method.\n   */\n  @property() method: \"get\" | \"post\" = \"get\";\n  /**\n   * Form name.\n   */\n  @property() name = \"q\";\n\n  @query(\"input\") _input!: HTMLInputElement;\n\n  static styles = [\n    InputElement.styles,\n    css`\n      :host {\n        ${cssScope}--width:var(${cssvarValues.input}--width);\n        ${cssScope}--input-padding: 0 0 0 .35em;\n        width: var(${cssvarValues.input}--width);\n        margin: var(${cssvarValues.input}-outline-width);\n        border-radius: var(${cssvarValues.input}--radius);\n        background: var(${cssvarValues.input}--background);\n      }\n\n      div {\n        padding: var(${cssScope}--input-padding);\n        height: var(${cssvarValues.input}--height);\n        flex: 1;\n        display: flex;\n        z-index: 2;\n      }\n\n      form {\n        min-height: 100%;\n        outline: 0.145em solid transparent;\n        display: flex;\n        flex-direction: column;\n        border-radius: inherit;\n        padding: 0;\n        width: 100%;\n        margin: 0;\n        position: relative;\n        overflow: hidden;\n      }\n\n      :host([float]) form {\n        overflow: visible;\n      }\n\n      :host(:focus) form {\n        outline: var(${cssvarValues.input}--outline);\n      }\n\n      ul {\n        list-style: none;\n        width: 100%;\n        pointer-events: none;\n        border-radius: inherit;\n        z-index: 2;\n      }\n\n      :host([float]) ul {\n        background: var(${cssvarValues.input}--background);\n        padding-top: 1.5em;\n        position: absolute;\n        z-index: 1;\n        top: 0;\n      }\n\n      :host([float]:focus) form {\n        outline: none;\n      }\n\n      :host([float]:focus) ul {\n        outline: var(${cssvarValues.input}--outline);\n      }\n\n      button,\n      input {\n        background: none;\n      }\n\n      button {\n        width: 1.8em;\n        height: inherit;\n      }\n\n      input {\n        flex: 1;\n        min-width: 0;\n        box-sizing: border-box;\n      }\n\n      svg {\n        height: 100%;\n        padding: 1px;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    return html`<form action=\"${this.action}\" method=\"${this.method}\">\n      <div>\n        <input .value=\"${this.value}\" ?autofocus=\"${this.autofocus}\" name=\"${this.name}\" @focus=\"${this._handleInput}\" @input=\"${this._handleInput}\" title=\"\" placeholder=\"${this.pla}\" />\n        <button @click=\"${this._handleSubmit}\">${htmlSlot(\"search\", svgSearch(), this)}</button>\n      </div>\n      <ul>\n        ${htmlSlot()}\n      </ul>\n    </form>`;\n  }\n\n  protected _handleSubmit(e: Event) {\n    if (!this.action) {\n      e.preventDefault();\n    }\n    this.dispatchEvent(new CustomEvent(\"submit\", { detail: this.value }));\n  }\n\n  protected _handleInput(e: Event) {\n    e.stopPropagation();\n    const value: string = this.targetValue(e);\n    if (value === this.value) {\n      return;\n    }\n    this.value = value;\n    if (this.compositing) {\n      return;\n    }\n    if (this.target && this.query) {\n      this.searchElements(this.value);\n    }\n    this.dispatchEvent(new CustomEvent(\"input\", { detail: this.value, bubbles: true, composed: true }));\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: this.value, composed: true }));\n  }\n\n  searchElements(s: string) {\n    const targetElement = document.body.querySelector(this.target);\n    const queryElementsCollection = document.body.querySelectorAll(this.query);\n    if (!targetElement) {\n      return;\n    }\n    targetElement.replaceChildren();\n    if (s && queryElementsCollection.length) {\n      for (const e of queryElementsCollection) {\n        if (e.textContent.includes(this.value)) {\n          targetElement.appendChild(e.cloneNode(true));\n        }\n      }\n    }\n  }\n}\n\nexport default SearchInput;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"search-input\": SearchInput;\n  }\n}\n"]}

package/{input-form → web-components/input}/select-input.d.ts

@@ -1,10 +1,10 @@
-import { type CSSResultGroup } from "../deps.js";
-import { type HTMLTemplate } from "../lib/templates.js";
-import { InputSTD } from "./std.js";
+import { type CSSResultGroup } from "../../deps.js";
+import { type HTMLTemplate } from "../../lib/templates.js";
+import { InputElement } from "./input.js";
 /**
  * SelectInput select matched elements.
  */
-export declare class SelectInput extends InputSTD {
+export declare class SelectInput extends InputElement {
     /**
      * Open content.
      */

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-input.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/select-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAyB,MAAM,eAAe,CAAC;AAEhF,OAAO,EAAY,KAAK,YAAY,EAAkB,MAAM,wBAAwB,CAAC;AAErF,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAI1C;;GAEG;AACH,qBACa,WAAY,SAAQ,YAAY;IAC3C;;OAEG;IACyC,IAAI,UAAS;IACzD;;OAEG;IACyC,IAAI,UAAS;IACzD;;OAEG;IACwB,KAAK,QAAM;IACtC;;OAEG;IACS,IAAI,SAAY;IAC5B;;OAEG;IACwB,IAAI,EAAE,MAAM,EAAE,CAAM;IAE/C,MAAM,CAAC,MAAM,iBAuFO;IAEpB,IAAI,QAAQ,QAEX;IAEe,MAAM,EAAE,gBAAgB,CAAC;IACzB,MAAM,EAAE,gBAAgB,CAAC;IAEzC,SAAS,CAAC,MAAM,IAAI,YAAY;IAiBhC,OAAO,CAAC,UAAU;IAqBlB,SAAS,CAAC,WAAW;IAOrB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAK5B,iBAAiB;IAIjB,cAAc,CAAC,MAAM,EAAE,OAAO;IAI9B,SAAS,CAAC,YAAY;IAgCtB,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM;IA4CnC,SAAS,CAAC,YAAY;IAuCtB,SAAS,IAAI,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE,GAAG,CAAC;IAI5C,KAAK;CAcN;AAED,eAAe,WAAW,CAAC;AAM3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}