godown 2.6.0 → 2.6.1

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

@@ -35,9 +35,77 @@ let BaseInput = class BaseInput extends InputElement {
          */
         this.step = 1;
     }
-    static { this.styles = [
-        InputElement.styles,
-        css `
+    render() {
+        if (this.type === "range") {
+            return html `<div class="range">
+        <input id="input" type="range" min="${this.min}" max="${this.max}" step="${this.step}" @input="${this._handleRange}" @change="${this._handleRange}" />
+        <b></b>
+        <b>
+          <i></i>
+        </b>
+      </div>`;
+        }
+        return html `<label for="input"> ${htmlSlot("pre")} ${this._typeSwitcher()} ${htmlSlot("suf")} </label>`;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.type === "file") {
+            this.value = null;
+        }
+        else {
+            if (!this.def) {
+                this.def = this.value || "";
+            }
+            if (!this.value) {
+                this.value = this.def;
+            }
+        }
+        this._initName();
+    }
+    firstUpdated() {
+        super.firstUpdated();
+        if (this.type === "range") {
+            this._ranged.style.width = 100 * (parseInt(this.value) / (this.max - this.min)) + "%";
+        }
+    }
+    _handleRange(e) {
+        this.value = e.target.value;
+        this._ranged.style.width = (100 * parseInt(e.target.value)) / (this.max - this.min) + "%";
+        this.dispatchEvent(new CustomEvent("input", { detail: this.value }));
+    }
+    _handleFile(e) {
+        this.value = !this.only ? e.target.files : e.target.files[0];
+        this.dispatchEvent(new CustomEvent("change", { detail: this.value }));
+    }
+    reset() {
+        if (this.type === "file") {
+            this.value = null;
+            return;
+        }
+        if (this.type === "range") {
+            this._input.value = this.def || ((this.max - this.min) / 2).toString();
+            this.value = this._input.value;
+            this._ranged.style.width = 100 * (parseInt(this.value) / (this.max - this.min)) + "%";
+        }
+        else {
+            this._input.value = this.def.toString();
+            this.value = this.def;
+        }
+    }
+    _typeSwitcher() {
+        switch (this.type) {
+            case "file":
+                return html `<input id="input" class="input" type="file" accept="${this.accept}" ?multiple="${!this.only}" @change="${this._handleFile}" />${htmlSlot()}`;
+            case "number":
+                return html `<input .value="${this.value}" ?autofocus="${this.autofocus}" id="input" class="input" type="number" placeholder="${this.pla}" min="${this.min}" max="${this.max}" @input="${this._handleInput}" @change="${this._handleChange}" />`;
+            default:
+                return html `<input .value="${this.value}" ?autofocus="${this.autofocus}" id="input" class="input" type="${this.type}" placeholder="${this.pla}" @input="${this._handleInput}" @change="${this._handleChange}" />`;
+        }
+    }
+};
+BaseInput.styles = [
+    InputElement.styles,
+    css `
       :host {
         width: var(${cssvarValues.input}--width);
         height: var(${cssvarValues.input}--height);
@@ -74,7 +142,7 @@ let BaseInput = class BaseInput extends InputElement {
         border-radius: 0.25em;
       }
     `,
-        css `
+    css `
       :host([type="range"]) {
         height: auto !important;
         margin: 0.3em 0;
@@ -145,75 +213,7 @@ let BaseInput = class BaseInput extends InputElement {
         box-shadow: 0 0.1em 0.1em var(${cssvar}--shadow);
       }
     `,
-    ]; }
-    render() {
-        if (this.type === "range") {
-            return html `<div class="range">
-        <input id="input" type="range" min="${this.min}" max="${this.max}" step="${this.step}" @input="${this._handleRange}" @change="${this._handleRange}" />
-        <b></b>
-        <b>
-          <i></i>
-        </b>
-      </div>`;
-        }
-        return html `<label for="input"> ${htmlSlot("pre")} ${this._typeSwitcher()} ${htmlSlot("suf")} </label>`;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        if (this.type === "file") {
-            this.value = null;
-        }
-        else {
-            if (!this.def) {
-                this.def = this.value || "";
-            }
-            if (!this.value) {
-                this.value = this.def;
-            }
-        }
-        this._initName();
-    }
-    firstUpdated() {
-        super.firstUpdated();
-        if (this.type === "range") {
-            this._ranged.style.width = 100 * (parseInt(this.value) / (this.max - this.min)) + "%";
-        }
-    }
-    _handleRange(e) {
-        this.value = e.target.value;
-        this._ranged.style.width = (100 * parseInt(e.target.value)) / (this.max - this.min) + "%";
-        this.dispatchEvent(new CustomEvent("input", { detail: this.value }));
-    }
-    _handleFile(e) {
-        this.value = !this.only ? e.target.files : e.target.files[0];
-        this.dispatchEvent(new CustomEvent("change", { detail: this.value }));
-    }
-    reset() {
-        if (this.type === "file") {
-            this.value = null;
-            return;
-        }
-        if (this.type === "range") {
-            this._input.value = this.def || ((this.max - this.min) / 2).toString();
-            this.value = this._input.value;
-            this._ranged.style.width = 100 * (parseInt(this.value) / (this.max - this.min)) + "%";
-        }
-        else {
-            this._input.value = this.def.toString();
-            this.value = this.def;
-        }
-    }
-    _typeSwitcher() {
-        switch (this.type) {
-            case "file":
-                return html `<input id="input" class="input" type="file" accept="${this.accept}" ?multiple="${!this.only}" @change="${this._handleFile}" />${htmlSlot()}`;
-            case "number":
-                return html `<input .value="${this.value}" ?autofocus="${this.autofocus}" id="input" class="input" type="number" placeholder="${this.pla}" min="${this.min}" max="${this.max}" @input="${this._handleInput}" @change="${this._handleChange}" />`;
-            default:
-                return html `<input .value="${this.value}" ?autofocus="${this.autofocus}" id="input" class="input" type="${this.type}" placeholder="${this.pla}" @input="${this._handleInput}" @change="${this._handleChange}" />`;
-        }
-    }
-};
+];
 __decorate([
     property()
 ], BaseInput.prototype, "accept", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"base-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/base-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, html, property, query } from \"../../deps.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { cssvar, cssvarValues, define } from \"../../root.js\";\nimport { InputElement } from \"./input.js\";\n\nconst defineName = \"base-input\";\n\n/**\n * BaseInput.\n */\n@define(defineName)\nexport class BaseInput extends InputElement {\n  /**\n   * Input sccept.\n   */\n  @property() accept = undefined;\n  /**\n   * Value.\n   */\n  @property() value: string | File | FileList = undefined;\n  /**\n   * Only single files are allowed to be selected.\n   */\n  @property({ type: Boolean }) only = false;\n  /**\n   * Input min.\n   */\n  @property({ type: Number }) min = 0;\n  /**\n   * Input max.\n   */\n  @property({ type: Number }) max = 100;\n  /**\n   * Input step.\n   */\n  @property({ type: Number }) step = 1;\n\n  @query(\"#input\") _input: HTMLInputElement;\n  @query(\".range i\") _ranged: HTMLElement;\n\n  static styles = [\n    InputElement.styles,\n    css`\n      :host {\n        width: var(${cssvarValues.input}--width);\n        height: var(${cssvarValues.input}--height);\n        background: var(${cssvarValues.input}--background);\n        margin: var(${cssvarValues.input}--outline-width);\n        outline: var(${cssvarValues.input}--outline);\n        border-radius: var(${cssvarValues.input}--radius);\n      }\n\n      input[type=\"file\"] {\n        display: none;\n      }\n\n      label,\n      div {\n        width: 100%;\n        display: flex;\n        align-items: center;\n      }\n\n      * {\n        border-radius: inherit;\n        cursor: inherit;\n      }\n\n      input {\n        box-sizing: border-box;\n        height: 100%;\n        width: 100%;\n        margin: 0;\n        color: inherit;\n        background: transparent;\n        padding: 0 0.25em;\n        border-radius: 0.25em;\n      }\n    `,\n    css`\n      :host([type=\"range\"]) {\n        height: auto !important;\n        margin: 0.3em 0;\n        background: var(${cssvarValues.input}--false);\n        border-radius: 2em;\n      }\n\n      .range b:nth-of-type(1) {\n        width: 1em;\n        left: 0;\n        background: var(${cssvarValues.input}--true);\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n\n      .range b {\n        pointer-events: none;\n        width: calc(100% - 1em);\n        height: 100%;\n        left: 1em;\n        position: absolute;\n      }\n\n      .range {\n        height: fit-content;\n        position: relative;\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      .range input {\n        padding: 0;\n        height: 0.6em;\n        margin: 0px -0.5em;\n        appearance: none;\n        -webkit-appearance: none;\n        outline: none;\n        background: transparent;\n      }\n\n      .range i {\n        position: absolute;\n        left: 0;\n        width: 50%;\n        height: 100%;\n        pointer-events: none;\n        background: var(${cssvarValues.input}--true);\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n\n      .range input::-webkit-slider-runnable-track {\n        height: 0.6em;\n      }\n\n      .range input::-webkit-slider-thumb {\n        z-index: 1;\n        appearance: none;\n        -webkit-appearance: none;\n        position: relative;\n        height: 1.2em;\n        width: 1.2em;\n        margin-top: -0.3em;\n        background: var(${cssvarValues.input}--control);\n        border-radius: 50%;\n        border: solid 0.125em var(${cssvarValues.input}--control-edge);\n        box-shadow: 0 0.1em 0.1em var(${cssvar}--shadow);\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    if (this.type === \"range\") {\n      return html`<div class=\"range\">\n        <input id=\"input\" type=\"range\" min=\"${this.min}\" max=\"${this.max}\" step=\"${this.step}\" @input=\"${this._handleRange}\" @change=\"${this._handleRange}\" />\n        <b></b>\n        <b>\n          <i></i>\n        </b>\n      </div>`;\n    }\n    return html`<label for=\"input\"> ${htmlSlot(\"pre\")} ${this._typeSwitcher()} ${htmlSlot(\"suf\")} </label>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.type === \"file\") {\n      this.value = null;\n    } else {\n      if (!this.def) {\n        this.def = (this.value as string) || \"\";\n      }\n      if (!this.value) {\n        this.value = this.def;\n      }\n    }\n    this._initName();\n  }\n\n  protected firstUpdated() {\n    super.firstUpdated();\n    if (this.type === \"range\") {\n      this._ranged.style.width = 100 * (parseInt(this.value as string) / (this.max - this.min)) + \"%\";\n    }\n  }\n\n  protected _handleRange(e: any | Event) {\n    this.value = e.target.value;\n    this._ranged.style.width = (100 * parseInt(e.target.value)) / (this.max - this.min) + \"%\";\n    this.dispatchEvent(new CustomEvent(\"input\", { detail: this.value }));\n  }\n\n  protected _handleFile(e: any | Event) {\n    this.value = !this.only ? e.target.files : e.target.files[0];\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: this.value }));\n  }\n\n  reset() {\n    if (this.type === \"file\") {\n      this.value = null;\n      return;\n    }\n    if (this.type === \"range\") {\n      this._input.value = this.def || ((this.max - this.min) / 2).toString();\n      this.value = this._input.value;\n      this._ranged.style.width = 100 * (parseInt(this.value) / (this.max - this.min)) + \"%\";\n    } else {\n      this._input.value = this.def.toString();\n      this.value = this.def;\n    }\n  }\n\n  protected _typeSwitcher(): HTMLTemplate {\n    switch (this.type) {\n      case \"file\":\n        return html`<input id=\"input\" class=\"input\" type=\"file\" accept=\"${this.accept}\" ?multiple=\"${!this.only}\" @change=\"${this._handleFile}\" />${htmlSlot()}`;\n\n      case \"number\":\n        return html`<input .value=\"${this.value}\" ?autofocus=\"${this.autofocus}\" id=\"input\" class=\"input\" type=\"number\" placeholder=\"${this.pla}\" min=\"${this.min}\" max=\"${this.max}\" @input=\"${this._handleInput}\" @change=\"${this._handleChange}\" />`;\n\n      default:\n        return html`<input .value=\"${this.value}\" ?autofocus=\"${this.autofocus}\" id=\"input\" class=\"input\" type=\"${this.type}\" placeholder=\"${this.pla}\" @input=\"${this._handleInput}\" @change=\"${this._handleChange}\" />`;\n    }\n  }\n}\n\nexport default BaseInput;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"base-input\": BaseInput;\n  }\n}\n"]}
+{"version":3,"file":"base-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/base-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, html, property, query } from \"../../deps.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { cssvar, cssvarValues, define } from \"../../root.js\";\nimport { InputElement } from \"./input.js\";\n\nconst defineName = \"base-input\";\n\n/**\n * BaseInput.\n */\n@define(defineName)\nexport class BaseInput extends InputElement {\n  /**\n   * Input sccept.\n   */\n  @property() accept = undefined;\n  /**\n   * Value.\n   */\n  @property() value: string | File | FileList = undefined;\n  /**\n   * Only single files are allowed to be selected.\n   */\n  @property({ type: Boolean }) only = false;\n  /**\n   * Input min.\n   */\n  @property({ type: Number }) min = 0;\n  /**\n   * Input max.\n   */\n  @property({ type: Number }) max = 100;\n  /**\n   * Input step.\n   */\n  @property({ type: Number }) step = 1;\n\n  @query(\"#input\") _input: HTMLInputElement;\n  @query(\".range i\") _ranged: HTMLElement;\n\n  static styles = [\n    InputElement.styles,\n    css`\n      :host {\n        width: var(${cssvarValues.input}--width);\n        height: var(${cssvarValues.input}--height);\n        background: var(${cssvarValues.input}--background);\n        margin: var(${cssvarValues.input}--outline-width);\n        outline: var(${cssvarValues.input}--outline);\n        border-radius: var(${cssvarValues.input}--radius);\n      }\n\n      input[type=\"file\"] {\n        display: none;\n      }\n\n      label,\n      div {\n        width: 100%;\n        display: flex;\n        align-items: center;\n      }\n\n      * {\n        border-radius: inherit;\n        cursor: inherit;\n      }\n\n      input {\n        box-sizing: border-box;\n        height: 100%;\n        width: 100%;\n        margin: 0;\n        color: inherit;\n        background: transparent;\n        padding: 0 0.25em;\n        border-radius: 0.25em;\n      }\n    `,\n    css`\n      :host([type=\"range\"]) {\n        height: auto !important;\n        margin: 0.3em 0;\n        background: var(${cssvarValues.input}--false);\n        border-radius: 2em;\n      }\n\n      .range b:nth-of-type(1) {\n        width: 1em;\n        left: 0;\n        background: var(${cssvarValues.input}--true);\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n      }\n\n      .range b {\n        pointer-events: none;\n        width: calc(100% - 1em);\n        height: 100%;\n        left: 1em;\n        position: absolute;\n      }\n\n      .range {\n        height: fit-content;\n        position: relative;\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n      }\n\n      .range input {\n        padding: 0;\n        height: 0.6em;\n        margin: 0px -0.5em;\n        appearance: none;\n        -webkit-appearance: none;\n        outline: none;\n        background: transparent;\n      }\n\n      .range i {\n        position: absolute;\n        left: 0;\n        width: 50%;\n        height: 100%;\n        pointer-events: none;\n        background: var(${cssvarValues.input}--true);\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n      }\n\n      .range input::-webkit-slider-runnable-track {\n        height: 0.6em;\n      }\n\n      .range input::-webkit-slider-thumb {\n        z-index: 1;\n        appearance: none;\n        -webkit-appearance: none;\n        position: relative;\n        height: 1.2em;\n        width: 1.2em;\n        margin-top: -0.3em;\n        background: var(${cssvarValues.input}--control);\n        border-radius: 50%;\n        border: solid 0.125em var(${cssvarValues.input}--control-edge);\n        box-shadow: 0 0.1em 0.1em var(${cssvar}--shadow);\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    if (this.type === \"range\") {\n      return html`<div class=\"range\">\n        <input id=\"input\" type=\"range\" min=\"${this.min}\" max=\"${this.max}\" step=\"${this.step}\" @input=\"${this._handleRange}\" @change=\"${this._handleRange}\" />\n        <b></b>\n        <b>\n          <i></i>\n        </b>\n      </div>`;\n    }\n    return html`<label for=\"input\"> ${htmlSlot(\"pre\")} ${this._typeSwitcher()} ${htmlSlot(\"suf\")} </label>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.type === \"file\") {\n      this.value = null;\n    } else {\n      if (!this.def) {\n        this.def = (this.value as string) || \"\";\n      }\n      if (!this.value) {\n        this.value = this.def;\n      }\n    }\n    this._initName();\n  }\n\n  protected firstUpdated() {\n    super.firstUpdated();\n    if (this.type === \"range\") {\n      this._ranged.style.width = 100 * (parseInt(this.value as string) / (this.max - this.min)) + \"%\";\n    }\n  }\n\n  protected _handleRange(e: any | Event) {\n    this.value = e.target.value;\n    this._ranged.style.width = (100 * parseInt(e.target.value)) / (this.max - this.min) + \"%\";\n    this.dispatchEvent(new CustomEvent(\"input\", { detail: this.value }));\n  }\n\n  protected _handleFile(e: any | Event) {\n    this.value = !this.only ? e.target.files : e.target.files[0];\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: this.value }));\n  }\n\n  reset() {\n    if (this.type === \"file\") {\n      this.value = null;\n      return;\n    }\n    if (this.type === \"range\") {\n      this._input.value = this.def || ((this.max - this.min) / 2).toString();\n      this.value = this._input.value;\n      this._ranged.style.width = 100 * (parseInt(this.value) / (this.max - this.min)) + \"%\";\n    } else {\n      this._input.value = this.def.toString();\n      this.value = this.def;\n    }\n  }\n\n  protected _typeSwitcher(): HTMLTemplate {\n    switch (this.type) {\n      case \"file\":\n        return html`<input id=\"input\" class=\"input\" type=\"file\" accept=\"${this.accept}\" ?multiple=\"${!this.only}\" @change=\"${this._handleFile}\" />${htmlSlot()}`;\n\n      case \"number\":\n        return html`<input .value=\"${this.value}\" ?autofocus=\"${this.autofocus}\" id=\"input\" class=\"input\" type=\"number\" placeholder=\"${this.pla}\" min=\"${this.min}\" max=\"${this.max}\" @input=\"${this._handleInput}\" @change=\"${this._handleChange}\" />`;\n\n      default:\n        return html`<input .value=\"${this.value}\" ?autofocus=\"${this.autofocus}\" id=\"input\" class=\"input\" type=\"${this.type}\" placeholder=\"${this.pla}\" @input=\"${this._handleInput}\" @change=\"${this._handleChange}\" />`;\n    }\n  }\n}\n\nexport default BaseInput;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"base-input\": BaseInput;\n  }\n}\n"]}

package/web-components/input/input.js

@@ -13,21 +13,6 @@ export class InputElement 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];
     }
@@ -93,6 +78,21 @@ export class InputElement extends GodownElement {
         return target.value;
     }
 }
+InputElement.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 })
 ], InputElement.prototype, "type", void 0);

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

@@ -1 +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"]}
+{"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/web-components/input/label-input.js

@@ -42,9 +42,54 @@ let LabelInput = class LabelInput extends InputElement {
          */
         this.mobile = "540px";
     }
-    static { this.styles = [
-        InputElement.styles,
-        css `
+    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 = [
+    InputElement.styles,
+    css `
       :host {
         margin: var(${cssvarValues.input}--outline-width);
         border-radius: var(${cssvarValues.input}--radius);
@@ -102,52 +147,7 @@ let LabelInput = class LabelInput extends InputElement {
         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

@@ -1 +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"]}
+{"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/web-components/input/search-input.js

@@ -40,9 +40,58 @@ let SearchInput = class SearchInput extends InputElement {
          */
         this.name = "q";
     }
-    static { this.styles = [
-        InputElement.styles,
-        css `
+    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 = [
+    InputElement.styles,
+    css `
       :host {
         ${cssScope}--width:var(${cssvarValues.input}--width);
         ${cssScope}--input-padding: 0 0 0 .35em;
@@ -126,56 +175,7 @@ let SearchInput = class SearchInput extends InputElement {
         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

@@ -1 +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"]}
+{"version":3,"file":"search-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/search-input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAqB,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAClE,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,MAAM,UAAU,GAAG,cAAc,CAAC;AAElC,MAAM,QAAQ,GAAG,WAAW,CAAC,UAAU,CAAC,CAAC;AAEzC;;GAEG;AAEI,IAAM,WAAW,GAAjB,MAAM,WAAY,SAAQ,YAAY;IAAtC;;QACL;;WAEG;QACS,UAAK,GAAG,EAAE,CAAC;QACvB;;WAEG;QACS,WAAM,GAAG,EAAE,CAAC;QACxB;;WAEG;QAC0B,UAAK,GAAG,KAAK,CAAC;QAC3C;;WAEG;QACyC,UAAK,GAAG,KAAK,CAAC;QAC1D;;WAEG;QACS,WAAM,GAAG,EAAE,CAAC;QACxB;;WAEG;QACS,WAAM,GAAmB,KAAK,CAAC;QAC3C;;WAEG;QACS,SAAI,GAAG,GAAG,CAAC;IA+IzB,CAAC;IAnDW,MAAM;QACd,OAAO,IAAI,CAAA,iBAAiB,IAAI,CAAC,MAAM,aAAa,IAAI,CAAC,MAAM;;yBAE1C,IAAI,CAAC,KAAK,iBAAiB,IAAI,CAAC,SAAS,WAAW,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,YAAY,aAAa,IAAI,CAAC,YAAY,2BAA2B,IAAI,CAAC,GAAG;0BAC3J,IAAI,CAAC,aAAa,KAAK,QAAQ,CAAC,QAAQ,EAAE,SAAS,EAAE,EAAE,IAAI,CAAC;;;UAG5E,QAAQ,EAAE;;YAER,CAAC;IACX,CAAC;IAES,aAAa,CAAC,CAAQ;QAC9B,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;YACjB,CAAC,CAAC,cAAc,EAAE,CAAC;QACrB,CAAC;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC;IACxE,CAAC;IAES,YAAY,CAAC,CAAQ;QAC7B,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,KAAK,GAAW,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;QAC1C,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK,EAAE,CAAC;YACzB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QACD,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACpG,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACxF,CAAC;IAED,cAAc,CAAC,CAAS;QACtB,MAAM,aAAa,GAAG,QAAQ,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;QAC/D,MAAM,uBAAuB,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC3E,IAAI,CAAC,aAAa,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QACD,aAAa,CAAC,eAAe,EAAE,CAAC;QAChC,IAAI,CAAC,IAAI,uBAAuB,CAAC,MAAM,EAAE,CAAC;YACxC,KAAK,MAAM,CAAC,IAAI,uBAAuB,EAAE,CAAC;gBACxC,IAAI,CAAC,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC;oBACvC,aAAa,CAAC,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC;gBAC/C,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;;AA1IM,kBAAM,GAAG;IACd,YAAY,CAAC,MAAM;IACnB,GAAG,CAAA;;UAEG,QAAQ,eAAe,YAAY,CAAC,KAAK;UACzC,QAAQ;qBACG,YAAY,CAAC,KAAK;sBACjB,YAAY,CAAC,KAAK;6BACX,YAAY,CAAC,KAAK;0BACrB,YAAY,CAAC,KAAK;;;;uBAIrB,QAAQ;sBACT,YAAY,CAAC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;uBAwBjB,YAAY,CAAC,KAAK;;;;;;;;;;;;0BAYf,YAAY,CAAC,KAAK;;;;;;;;;;;;uBAYrB,YAAY,CAAC,KAAK;;;;;;;;;;;;;;;;;;;;;;;KAuBpC;CACgB,AAtFN,CAsFO;AAlHR;IAAX,QAAQ,EAAE;0CAAY;AAIX;IAAX,QAAQ,EAAE;2CAAa;AAIK;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;0CAAe;AAIC;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAe;AAI9C;IAAX,QAAQ,EAAE;2CAAa;AAIZ;IAAX,QAAQ,EAAE;2CAAgC;AAI/B;IAAX,QAAQ,EAAE;yCAAY;AAEP;IAAf,KAAK,CAAC,OAAO,CAAC;2CAA2B;AA9B/B,WAAW;IADvB,MAAM,CAAC,UAAU,CAAC;GACN,WAAW,CA2KvB;;AAED,eAAe,WAAW,CAAC","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"]}