godown 1.2.0 → 2.0.1

package/input-form/base-input.js

@@ -4,18 +4,15 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, css, property, query, ifDefined, define, cssvar } from "../deps.js";
-import STD from "./std.js";
-let BaseInput = class BaseInput extends STD {
+import { css, cssvar, define, html, ifDefined, property, query } from "../deps.js";
+import { htmlSlot } from "../tmpl.js";
+import { InputSTD } from "./std.js";
+let BaseInput = class BaseInput extends InputSTD {
     constructor() {
         super(...arguments);
         this.accept = undefined;
-        this.label = "";
-        this.name = "";
-        this.pla = undefined;
         this.type = "text";
         this.value = undefined;
-        this.def = "";
         this.only = false;
         this.min = 0;
         this.max = 100;
@@ -23,32 +20,29 @@ let BaseInput = class BaseInput extends STD {
         this.autofocus = false;
     }
     render() {
-        var _a;
-        if (!this.name)
-            this.name = ((_a = this.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || this.type;
         return html `<label for="input">
-      <slot name="pre"></slot>
-      <slot></slot>
-      <div class=${this.type}>${this._typeSwitcher()}</div>
-      <slot name="suf"></slot>
+      ${htmlSlot("pre")}
+      <div class="${this.type}">${this._typeSwitcher()}</div>
+      ${htmlSlot("suf")}
     </label>`;
     }
     connectedCallback() {
         super.connectedCallback();
-        if (!this.def && this.type !== "file")
+        if (!this.def && this.type !== "file") {
             this.def = this.value || "";
-        if (!this.value)
+        }
+        if (!this.value) {
             this.value = this.def;
+        }
     }
     firstUpdated() {
+        super.firstUpdated();
         if (this.type === "range") {
             this._ranged.style.width = 100 * (parseInt(this.value) / (this.max - this.min)) + "%";
             if (this.childNodes.length) {
                 this.shadowRoot.querySelector("div").style.margin = "0";
             }
         }
-        this._focusCheck();
-        this._compositionCheck();
     }
     _handleRange(e) {
         this.value = e.target.value;
@@ -73,63 +67,68 @@ let BaseInput = class BaseInput extends STD {
     _typeSwitcher() {
         switch (this.type) {
             case "range":
-                return html `<input id="input" type="range" min=${this.min} max=${this.max} step=${this.step} value=${this.value} @input=${this._handleRange} @change=${this._handleChange} /><i></i>`;
+                return html `<input id="input" type="range" min="${this.min}" max="${this.max}" step="${this.step}" @input="${this._handleRange}" @change="${this._handleChange}" /><i></i>`;
             case "file":
-                return html `<input id="input" type="file" accept=${ifDefined(this.accept)} ?multiple=${!this.only} class="input" @change=${this._handleFile} />`;
+                return html `<input id="input" type="file" accept="${ifDefined(this.accept)}" ?multiple="${!this.only}" class="input" @change="${this._handleFile}" />`;
             default:
-                return html `<input id="input" class="input" type=${this.type} placeholder=${this.pla} value=${this.value} @input=${this._handleInput} @change=${this._handleChange} />`;
+                return html `<input id="input" class="input" type="${this.type}" placeholder="${ifDefined(this.pla)}" @input="${this._handleInput}" @change="${this._handleChange}" />`;
         }
     }
 };
 BaseInput.styles = [
-    STD.styles,
+    InputSTD.styles,
     css `
       :host {
-        width: var(${cssvar}--input-width);
-        height: 1em;
+        ${cssvar}--input-control: rgb(240 240 240);
+        ${cssvar}--input-control-edge: var(${cssvar}--input-true);
         display: inline-flex;
+        width: var(${cssvar}--input-width);
+        height: var(${cssvar}--input-height);
         background-color: var(${cssvar}--input-background);
-        border-radius: 0.2em;
-        outline: 0.18em solid transparent;
+        outline: transparent solid var(${cssvar}--input-outline-width);
         color: var(${cssvar}--text);
+        border-radius: 0.2em;
       }
-      :host(:focus-within) {
-        outline-color: var(${cssvar}--input-outline-focus);
-      }
+
       :host([type="range"]) {
-        outline: none;
         height: auto;
+        outline-width: var(${cssvar}--input-outline-width);
+        outline-style: solid;
       }
+
       :host([type="file"]) {
         height: auto;
         width: auto;
         min-height: 0.5em;
         min-width: 0.5em;
       }
+
       div,
       label {
         display: flex;
         flex: 1;
       }
+
       * {
         border-radius: inherit;
         cursor: inherit;
         font-family: inherit;
       }
+
       .input[type="color"] {
         padding: 0;
         height: 100% !important;
       }
+
       .input[type="file"] {
         display: none;
       }
+
       .input {
         box-sizing: border-box;
         height: 100%;
         width: 100%;
         font-size: 0.8em;
-        outline: 0;
-        border: 0;
         margin: 0;
         border: none;
         color: inherit;
@@ -137,6 +136,7 @@ BaseInput.styles = [
         padding: 0 0.25em;
         border-radius: 0.25em;
       }
+
       .range {
         position: relative;
         display: inline-flex;
@@ -145,14 +145,16 @@ BaseInput.styles = [
         box-shadow: 0 0.5px 0.1em var(${cssvar}--shadow);
         background-color: var(${cssvar}--input-false);
       }
+
       .range input ~ i {
         position: absolute;
         left: 0;
         width: 50%;
+        height: 100%;
         pointer-events: none;
         background-color: var(${cssvar}--input-true);
-        height: calc(0.6em - 1.1px);
       }
+
       .range input {
         height: 0.6em;
         margin: 0px -0.5em;
@@ -162,9 +164,11 @@ BaseInput.styles = [
         outline: none;
         background-color: transparent;
       }
+
       .range input::-webkit-slider-runnable-track {
         height: 0.6em;
       }
+
       .range input::-webkit-slider-thumb {
         z-index: 1;
         appearance: none;
@@ -175,7 +179,7 @@ BaseInput.styles = [
         margin-top: -0.3em;
         background-color: var(${cssvar}--input-control);
         border-radius: 50%;
-        border: solid 0.125em rgba(0, 221, 255, 0.5);
+        border: solid 0.125em var(${cssvar}--input-control-edge);
         box-shadow: 0 0.1em 0.1em var(${cssvar}--shadow);
       }
     `,
@@ -190,23 +194,11 @@ __decorate([
     property()
 ], BaseInput.prototype, "accept", void 0);
 __decorate([
-    property()
-], BaseInput.prototype, "label", void 0);
-__decorate([
-    property()
-], BaseInput.prototype, "name", void 0);
-__decorate([
-    property()
-], BaseInput.prototype, "pla", void 0);
-__decorate([
-    property()
+    property({ reflect: true })
 ], BaseInput.prototype, "type", void 0);
 __decorate([
     property()
 ], BaseInput.prototype, "value", void 0);
-__decorate([
-    property()
-], BaseInput.prototype, "def", void 0);
 __decorate([
     property({ type: Boolean })
 ], BaseInput.prototype, "only", void 0);
@@ -227,3 +219,4 @@ BaseInput = __decorate([
 ], BaseInput);
 export { BaseInput };
 export default BaseInput;
+//# sourceMappingURL=base-input.js.map

package/input-form/base-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-input.js","sourceRoot":"","sources":["../../src/input-form/base-input.ts"],"names":[],"mappings":"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"}

package/input-form/index.d.ts

@@ -1,5 +1,4 @@
 export * from "./base-input.js";
-export * from "./exp-input.js";
 export * from "./label-input.js";
 export * from "./select-input.js";
 export * from "./search-input.js";

package/input-form/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/input-form/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/input-form/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC"}

package/input-form/index.js

@@ -1,8 +1,8 @@
 export * from "./base-input.js";
-export * from "./exp-input.js";
 export * from "./label-input.js";
 export * from "./select-input.js";
 export * from "./search-input.js";
 export * from "./sign-form.js";
 export * from "./split-input.js";
 export * from "./switch-input.js";
+//# sourceMappingURL=index.js.map

package/input-form/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/input-form/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC"}

package/input-form/label-input.d.ts

@@ -1,18 +1,13 @@
 import { CSSResultGroup } from "../deps.js";
-import STD from "./std.js";
-import type { InputType } from "./std.js";
-export declare class LabelInput extends STD {
+import { InputSTD, type InputType } from "./std.js";
+export declare class LabelInput extends InputSTD {
     type: InputType;
-    label: string;
-    def: string;
-    pla: any;
-    name: string;
-    value: string;
     autofocus: boolean;
     _input: HTMLInputElement;
     static styles: CSSResultGroup[];
     render(): import("lit").TemplateResult<1>;
-    _passwordSwitcher(): void;
+    protected render_suf(): import("lit").TemplateResult<1>;
+    protected _passwordSwitcher(): void;
 }
 export default LabelInput;
 declare global {

package/input-form/label-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"label-input.d.ts","sourceRoot":"","sources":["../../src/input-form/label-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8C,cAAc,EAAE,MAAM,YAAY,CAAC;AACxF,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAE1C,qBACa,UAAW,SAAQ,GAAG;IACrB,IAAI,EAAE,SAAS,CAAU;IACzB,KAAK,SAAM;IACX,GAAG,SAAM;IACT,GAAG,MAAa;IAChB,IAAI,SAAM;IACV,KAAK,SAAM;IACM,SAAS,UAAS;IAC/B,MAAM,EAAE,gBAAgB,CAAC;IACzC,MAAM,CAAC,MAAM,mBAsES;IACtB,MAAM;IAoBN,iBAAiB;CAOlB;AACD,eAAe,UAAU,CAAC;AAC1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}
+{"version":3,"file":"label-input.d.ts","sourceRoot":"","sources":["../../src/input-form/label-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAoD,MAAM,YAAY,CAAC;AAEnG,OAAO,EAAE,QAAQ,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAEpD,qBACa,UAAW,SAAQ,QAAQ;IACT,IAAI,EAAE,SAAS,CAAU;IACzB,SAAS,UAAS;IAC/B,MAAM,EAAE,gBAAgB,CAAC;IACzC,MAAM,CAAC,MAAM,mBAsES;IAEtB,MAAM;IAWN,SAAS,CAAC,UAAU;IAkBpB,SAAS,CAAC,iBAAiB;CAO5B;AAED,eAAe,UAAU,CAAC;AAC1B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/input-form/label-input.js

@@ -4,41 +4,43 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, css, property, query, define, cssvar } from "../deps.js";
-import STD from "./std.js";
-let LabelInput = class LabelInput extends STD {
+import { css, cssvar, define, html, ifDefined, property, query } from "../deps.js";
+import { htmlSlot, svgEye } from "../tmpl.js";
+import { InputSTD } from "./std.js";
+let LabelInput = class LabelInput extends InputSTD {
     constructor() {
         super(...arguments);
         this.type = "text";
-        this.label = "";
-        this.def = "";
-        this.pla = undefined;
-        this.name = "";
-        this.value = "";
         this.autofocus = false;
     }
     render() {
-        var _a;
-        if (!this.name)
-            this.name = ((_a = this.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || this.type;
-        return html `<label for=${this.name}>
-      <span>${this.label}<slot></slot></span>
+        return html `<label for="${this.name}">
+      <span>${this.label}${htmlSlot()}</span>
       <fieldset>
-        <i><slot name="pre"></slot></i>
-        <input @input=${this._handleInput} @change=${this._handleChange} id=${this.name} type=${this.type} placeholder=${this.pla} class=${this.type} />
-        <i><slot name="suf"></slot></i>
-        ${this.type === "password" && !this.querySelector(`[slot="suf"]`)
-            ? html `<i @mousedown=${this._passwordSwitcher} @mouseup=${() => (this._input.type = "password")} @mouseleave=${() => (this._input.type = "password")}>
-              <svg viewBox="0 0 48 48" fill="none">
-                <path d="M9.85786 18C6.23858 21 4 24 4 24C4 24 12.9543 36 24 36C25.3699 36 26.7076 35.8154 28 35.4921M20.0318 12.5C21.3144 12.1816 22.6414 12 24 12C35.0457 12 44 24 44 24C44 24 41.7614 27 38.1421 30" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
-                <path d="M20.3142 20.6211C19.4981 21.5109 19 22.6972 19 23.9998C19 26.7612 21.2386 28.9998 24 28.9998C25.3627 28.9998 26.5981 28.4546 27.5 27.5705" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
-                <path d="M42 42L6 6" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" />
-              </svg>
-            </i>`
-            : undefined}
+        <i>${htmlSlot("pre")}</i>
+        <input @input="${this._handleInput}" @change="${this._handleChange}" id="${this.name}" type="${this.type}" placeholder="${ifDefined(this.pla)}" class="${this.type}" />
+        ${this.render_suf()}
       </fieldset>
     </label>`;
     }
+    render_suf() {
+        if (this.type === "password") {
+            return html `<i
+        @mousedown="${this._passwordSwitcher}"
+        @mouseup="${() => {
+                this._input.type = "password";
+            }}"
+        @mouseleave="${() => {
+                this._input.type = "password";
+            }}"
+      >
+        ${!this.querySelector("[slot=suf]") ? svgEye() : htmlSlot("suf")}
+      </i>`;
+        }
+        else {
+            return html `<i>${htmlSlot("suf")}</i>`;
+        }
+    }
     _passwordSwitcher() {
         if (this._input.type === "password") {
             this._input.type = "text";
@@ -49,13 +51,15 @@ let LabelInput = class LabelInput extends STD {
     }
 };
 LabelInput.styles = [
-    STD.styles,
+    InputSTD.styles,
     css `
       :host {
+        max-width: calc(2 * var(${cssvar}--input-width));
         background-color: inherit;
         display: block;
-        border-radius: 4px;
+        border-radius: 0.2em;
       }
+
       label {
         margin: auto;
         width: 100%;
@@ -66,24 +70,25 @@ LabelInput.styles = [
         align-items: center;
         border-radius: inherit;
       }
+
       span {
         flex: 1;
       }
+
       input {
+        padding: 0 0.125em;
         background-color: transparent;
         font-size: 102.5%;
-        line-height: 1.2em;
-        border: 0;
         border-radius: inherit;
-        outline: 0;
-        box-sizing: border-box;
         flex: 1;
         width: 100%;
-        padding: 4.8px;
+        height: inherit;
       }
+
       fieldset:focus-within {
-        outline: 0.18em solid var(${cssvar}--input-outline-focus);
+        outline: 0.18em solid var(${cssvar}--input-outline-color);
       }
+
       @media screen and (max-width: 540px) {
         label {
           justify-content: flex-start;
@@ -92,51 +97,33 @@ LabelInput.styles = [
           width: fit-content;
         }
       }
-      i {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        font-style: normal;
-      }
+
       i > svg {
         height: 1em;
         width: 1.5em;
       }
+
       fieldset {
         color: var(${cssvar}--text);
         position: relative;
         background-color: var(${cssvar}--input-background);
         display: flex;
-        padding: 0;
+        align-items: baseline;
         border-radius: inherit;
         outline: none;
         border: 0;
-        margin: 0;
+        height: var(${cssvar}--input-height);
         width: var(${cssvar}--input-width);
       }
+
       ::-ms-reveal {
         display: none;
       }
     `,
 ];
 __decorate([
-    property()
+    property({ reflect: true })
 ], LabelInput.prototype, "type", void 0);
-__decorate([
-    property()
-], LabelInput.prototype, "label", void 0);
-__decorate([
-    property()
-], LabelInput.prototype, "def", void 0);
-__decorate([
-    property()
-], LabelInput.prototype, "pla", void 0);
-__decorate([
-    property()
-], LabelInput.prototype, "name", void 0);
-__decorate([
-    property()
-], LabelInput.prototype, "value", void 0);
 __decorate([
     property({ type: Boolean })
 ], LabelInput.prototype, "autofocus", void 0);
@@ -148,3 +135,4 @@ LabelInput = __decorate([
 ], LabelInput);
 export { LabelInput };
 export default LabelInput;
+//# sourceMappingURL=label-input.js.map

package/input-form/label-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"label-input.js","sourceRoot":"","sources":["../../src/input-form/label-input.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAkB,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnG,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAkB,MAAM,UAAU,CAAC;AAG7C,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,QAAQ;IAAjC;;QACwB,SAAI,GAAc,MAAM,CAAC;QACzB,cAAS,GAAG,KAAK,CAAC;IA8GjD,CAAC;IApCC,MAAM;QACJ,OAAO,IAAI,CAAA,eAAe,IAAI,CAAC,IAAI;cACzB,IAAI,CAAC,KAAK,GAAG,QAAQ,EAAE;;aAExB,QAAQ,CAAC,KAAK,CAAC;yBACH,IAAI,CAAC,YAAY,cAAc,IAAI,CAAC,aAAa,SAAS,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,kBAAkB,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,YAAY,IAAI,CAAC,IAAI;UAChK,IAAI,CAAC,UAAU,EAAE;;aAEd,CAAC;IACZ,CAAC;IAES,UAAU;QAClB,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;YAC5B,OAAO,IAAI,CAAA;sBACK,IAAI,CAAC,iBAAiB;oBACxB,GAAG,EAAE;gBACf,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,UAAU,CAAC;YAChC,CAAC;uBACc,GAAG,EAAE;gBAClB,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,UAAU,CAAC;YAChC,CAAC;;UAEC,CAAC,IAAI,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;WAC7D,CAAC;SACP;aAAM;YACL,OAAO,IAAI,CAAA,MAAM,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;SACxC;IACH,CAAC;IAES,iBAAiB;QACzB,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,UAAU,EAAE;YACnC,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC;SAC3B;aAAM;YACL,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,UAAU,CAAC;SAC/B;IACH,CAAC;;AA3GM,iBAAM,GAAG;IACd,QAAQ,CAAC,MAAM;IACf,GAAG,CAAA;;kCAE2B,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oCAgCJ,MAAM;;;;;;;;;;;;;;;;;;qBAkBrB,MAAM;;gCAEK,MAAM;;;;;;sBAMhB,MAAM;qBACP,MAAM;;;;;;KAMtB;CACkB,AAtER,CAsES;AAzEO;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAA0B;AACzB;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;6CAAmB;AAC/B;IAAf,KAAK,CAAC,OAAO,CAAC;0CAA0B;AAH9B,UAAU;IADtB,MAAM,CAAC,aAAa,CAAC;GACT,UAAU,CAgHtB;;AAED,eAAe,UAAU,CAAC"}

package/input-form/search-input.d.ts

@@ -1,6 +1,6 @@
 import { CSSResultGroup } from "../deps.js";
-import STD from "./std.js";
-export declare class SearchInput extends STD {
+import { InputSTD } from "./std.js";
+export declare class SearchInput extends InputSTD {
     _input: HTMLInputElement;
     query: string;
     target: string;
@@ -9,30 +9,19 @@ export declare class SearchInput extends STD {
     action: string;
     method: "get" | "post";
     name: string;
-    value: string;
-    pla: any;
+    pla?: string;
     list: any[];
     autofocus: boolean;
-    useinfer: (x: string) => Promise<string[]>;
+    useInfer: (x: string) => Promise<string[]>;
     static styles: CSSResultGroup[];
     render(): import("lit").TemplateResult<1>;
-    _handleSubmit(e: any): void;
-    _handleInput(e: any): Promise<void>;
-}
-export declare class SearchW extends STD {
-    static styles: (import("lit").CSSResult | CSSResultGroup[])[];
-    action: string;
-    name: string;
-    pla: string;
-    origin: string;
-    constructor();
-    render(): import("lit").TemplateResult<1>;
+    protected _handleSubmit(e: Event): void;
+    protected _handleInput(e: Event): Promise<void>;
 }
 export default SearchInput;
 declare global {
     interface HTMLElementTagNameMap {
         "search-input": SearchInput;
-        "search-w": SearchW;
     }
 }
 //# sourceMappingURL=search-input.d.ts.map

package/input-form/search-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"search-input.d.ts","sourceRoot":"","sources":["../../src/input-form/search-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAA8C,cAAc,EAAE,MAAM,YAAY,CAAC;AACxF,OAAO,GAAG,MAAM,UAAU,CAAC;AAC3B,qBACa,WAAY,SAAQ,GAAG;IAClB,MAAM,EAAG,gBAAgB,CAAC;IAC9B,KAAK,SAAM;IACX,MAAM,SAAM;IACK,KAAK,UAAS;IACd,MAAM,UAAS;IAChC,MAAM,SAAQ;IACd,MAAM,EAAE,KAAK,GAAG,MAAM,CAAS;IAC/B,IAAI,SAAO;IACX,KAAK,SAAM;IACX,GAAG,MAAa;IACD,IAAI,EAAE,GAAG,EAAE,CAAM;IACf,SAAS,UAAS;IACf,QAAQ,MAAa,MAAM,uBAOzD;IACF,MAAM,CAAC,MAAM,mBA2DS;IACtB,MAAM;IAkBN,aAAa,CAAC,CAAC,KAAA;IAIT,YAAY,CAAC,CAAC,KAAA;CA6BrB;AASD,qBACa,OAAQ,SAAQ,GAAG;IAC9B,MAAM,CAAC,MAAM,iDA8EX;IACU,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,MAAM,CAAC;;IAK3B,MAAM;CAcP;AACD,eAAe,WAAW,CAAC;AAC3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;QAC5B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}
+{"version":3,"file":"search-input.d.ts","sourceRoot":"","sources":["../../src/input-form/search-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,cAAc,EAAoD,MAAM,YAAY,CAAC;AAEnG,OAAO,EAAE,QAAQ,EAAE,MAAM,UAAU,CAAC;AAEpC,qBACa,WAAY,SAAQ,QAAQ;IACvB,MAAM,EAAG,gBAAgB,CAAC;IAC9B,KAAK,SAAM;IACX,MAAM,SAAM;IACK,KAAK,UAAS;IACd,MAAM,UAAS;IAChC,MAAM,SAAQ;IACd,MAAM,EAAE,KAAK,GAAG,MAAM,CAAS;IAC/B,IAAI,SAAO;IACX,GAAG,CAAC,EAAE,MAAM,CAAa;IACV,IAAI,EAAE,GAAG,EAAE,CAAM;IACf,SAAS,UAAS;IACf,QAAQ,MAAa,MAAM,uBAOzD;IACF,MAAM,CAAC,MAAM,mBAoES;IAEtB,MAAM;IAeN,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,KAAK;cAKhB,YAAY,CAAC,CAAC,EAAE,KAAK;CA6BtC;AAED,eAAe,WAAW,CAAC;AAC3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}