godown 2.7.5 → 2.7.6

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

@@ -0,0 +1 @@
+{"version":3,"file":"range-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/range-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, property } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport { part } from \"../../decorators/part.js\";\nimport { styles } from \"../../decorators/styles.js\";\nimport { combine, htmlSlot } from \"../../lib/directives.js\";\nimport { isNil, joinProperties, notNil } from \"../../lib/utils.js\";\nimport GodownInput from \"../../proto/super-input.js\";\nimport { createScope, cssGlobalVars } from \"../../styles/global.js\";\nimport { inputStyle } from \"../../styles/inputStyle.js\";\n\nconst protoName = \"range-input\";\nconst cssScope = createScope(protoName);\n\n/**\n * {@linkcode RangeInput }.\n */\n@godown(protoName)\n@styles([\n  inputStyle,\n  css`\n    :host {\n      background: var(--${cssGlobalVars.input}--background);\n      margin: 0.25em var(--${cssGlobalVars.input}--outline-width);\n      border-radius: var(--${cssGlobalVars.input}--radius);\n      border-radius: var(--${cssGlobalVars.input}--radius);\n      --${cssScope}--handle-active: rgb(0 118 200);\n      --${cssScope}--track-width: .5em;\n      display: inline-block;\n      width: var(--${cssGlobalVars.input}--width);\n    }\n\n    :host([vertical]) {\n      height:  var(--${cssGlobalVars.input}--width);\n      width: -moz-fit-content;\n      width: fit-content;\n    }\n\n    i:hover {\n      --${cssScope}--handle-scale:1.08;\n    }\n\n    i:active {\n      --${cssScope}--handle-scale:1.05;\n      background: var(--${cssScope}--handle-active);\n    }\n\n    .last-focus {\n      z-index: 2;\n    }\n\n    [part=\"root\"] {\n      min-height:inherit;\n      position: relative;\n      border-radius: inherit;\n      width: 100%;\n      --start: 0%;\n      --end: 50%;\n      height: var(--${cssScope}--track-width);\n    }\n\n    [part=\"track\"] {\n      min-height:inherit;\n      display: flex;\n      position: absolute;\n      pointer-events: none;\n      border-radius: inherit;\n      justify-content: space-between;\n      left: min(var(--start), var(--end));\n      background: var(--${cssGlobalVars.input}--true);\n      width: max(calc(var(--end) - var(--start)), calc(var(--start) - var(--end)));\n    }\n\n    [part=handle] {\n      width: 1em;\n      height: 1em;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      -webkit-user-select: none;\n              user-select: none;\n      position: absolute;\n      border: 0.1em solid;\n      border-radius: 50%;\n      transform-origin: 0% 25%;\n      transform: scale(var(--${cssScope}--handle-scale, 1)) translate(-50%, -25%);\n      background: var(--${cssGlobalVars.input}--true);\n      border-color: var(--${cssGlobalVars.input}--control);\n    }\n  `,\n  css`\n    .vertical {\n      height: 100%;\n      width: var(--${cssScope}--track-width);\n    }\n\n    .vertical i {\n      transform: translate(-25%, -50%);\n    }\n\n    .vertical [part=\"track\"] {\n      width: 100%;\n      height: max(calc(var(--end) - var(--start)), calc(var(--start) - var(--end)));\n      top: min(var(--start), var(--end));\n      left: 0;\n    }\n  `,\n  css`\n    :host(:not([range])) .start {\n      visibility: hidden;\n    }\n\n    .start {\n      left: var(--start);\n      top: 0;\n    }\n\n    .end {\n      left: var(--end);\n      top: 0;\n    }\n\n    .vertical .start {\n      top: var(--start);\n      left: 0;\n    }\n\n    .vertical .end {\n      top: var(--end);\n      left: 0;\n    }\n  `,\n])\nexport class RangeInput extends GodownInput {\n  /**\n   * Minimum value.\n   */\n  @property({ type: Number }) min = 0;\n  /**\n   * Maximum value.\n   */\n  @property({ type: Number }) max = 100;\n  /**\n   * Sliding step length.\n   */\n  @property({ type: Number }) step = 1;\n  /**\n   * Enable range sliding.\n   */\n  @property({ type: Boolean, reflect: true }) range: boolean;\n\n  @property({ type: Boolean, reflect: true }) vertical: boolean;\n\n  /**\n   * When `this.range` is true, it should be [number, number], otherwise number.\n   */\n  @property({ type: Array }) value: number | [number, number];\n  /**\n   * The default of `this.value`.\n   */\n  @property({ type: Array }) default: number | [number, number];\n\n  @part(\"root\") _root: HTMLElement;\n\n  lastFocus: undefined | 1 | 2;\n\n  /**\n   * Returns true when the second number is greater than the first number\n   */\n  get reverse() {\n    return this.range ? this.value[0] > this.value[1] : false;\n  }\n\n  render() {\n    const [from, to] = (this.range ? this.value : [0, this.value]) as [number, number];\n    const gap = this.max - this.min;\n    const style = joinProperties({\n      \"--start\": `${((from - this.min) / gap) * 100}%`,\n      \"--end\": `${((to - this.min) / gap) * 100}%`,\n    });\n    return html`<div\n      part=\"root\"\n      class=\"${combine({\n        vertical: this.vertical,\n        range: this.range,\n        reverse: this.reverse,\n      })}\"\n      @mousedown=\"${this._handleMousedownRoot}\"\n      style=\"${style}\"\n    >\n      <div part=\"track\"></div>\n      <i\n        part=\"handle\"\n        class=\"${combine(\n          {\n            \"last-focus\": this.lastFocus === 1,\n          },\n          \"start\",\n        )}\"\n        @mousedown=\"${this._handleMousedownStart}\"\n      >\n        ${htmlSlot(\"start\")}\n      </i>\n      <i\n        part=\"handle\"\n        class=\"${combine(\n          {\n            \"last-focus\": this.lastFocus === 2,\n          },\n          \"end\",\n        )}\"\n        @mousedown=\"${this._handleMousedownEnd}\"\n      >\n        ${htmlSlot(\"end\")}\n      </i>\n    </div>`;\n  }\n\n  _handleMousedownStart(e: MouseEvent) {\n    this.createMousedownListener(this.setStart)(e);\n  }\n  _handleMousedownEnd(e: MouseEvent) {\n    this.createMousedownListener(this.setEnd)(e);\n  }\n\n  setStart(value: number) {\n    this.lastFocus = 1;\n    const i = this.value[1];\n    this.value = this.range ? [value, i] : value;\n  }\n\n  setEnd(value: number) {\n    this.lastFocus = 2;\n    const i = this.value[0];\n    this.value = this.range ? [i, value] : value;\n  }\n\n  _computeValue(e: MouseEvent) {\n    const rect = this._root.getBoundingClientRect();\n    const div = this.vertical ? (e.clientY - rect.top) / rect.height : (e.clientX - rect.left) / rect.width;\n    let value = Math.round((div * (this.max - this.min)) / this.step) * this.step;\n    if (value > this.max) {\n      value -= this.step;\n    } else if (value < this.min) {\n      value += this.step;\n    }\n    return value;\n  }\n\n  _handleMousedownRoot(e: MouseEvent) {\n    const value = this._computeValue(e);\n    if (!this.range || Math.abs(value - this.value[0]) > Math.abs(value - this.value[1])) {\n      this.setEnd(value);\n      this._handleMousedownEnd(e);\n    } else {\n      this.setStart(value);\n      this._handleMousedownStart(e);\n    }\n  }\n\n  createMousedownListener(mouseMoveCallback: (arg0: number) => void) {\n    return (e: MouseEvent) => {\n      e.preventDefault();\n      e.stopPropagation();\n      const move = this.createMousemoveListener(mouseMoveCallback);\n      document.addEventListener(\"mousemove\", move);\n      const stop = () => {\n        document.removeEventListener(\"mousemove\", move);\n        document.removeEventListener(\"mouseup\", stop);\n      };\n      document.addEventListener(\"mouseup\", stop);\n    };\n  }\n\n  createMousemoveListener(callback: (arg0: number) => void) {\n    return (e: MouseEvent) => {\n      const value = this._computeValue(e);\n      if (value > this.max || value < this.min) {\n        return;\n      }\n      callback?.call(this, value);\n    };\n  }\n\n  _connectedInit() {\n    const gap = this.max - this.min;\n    this.step ||= gap / 100;\n    if (notNil(this.default) && isNil(this.value)) {\n      this.value = this.default;\n    } else if (isNil(this.default) && notNil(this.value)) {\n      this.default = this.value;\n    } else {\n      const mid = Math.round(gap / 2 / this.step) * this.step;\n      this.default = this.range ? [0, mid] : mid;\n      this.value = this.default;\n    }\n  }\n\n  reset() {\n    this.value = this.default;\n  }\n\n  swap() {\n    if (this.range) {\n      const [a, b] = this.value as [number, number];\n      this.value = [b, a];\n    }\n  }\n\n  sort() {\n    this.value = this.toSorted();\n  }\n\n  toSorted(): number | [number, number] {\n    if (this.range) {\n      const [a, b] = this.value as [number, number];\n      return a > b ? [b, a] : [a, b];\n    }\n    return this.value;\n  }\n}\n\nexport default RangeInput;\n"]}

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

@@ -1,6 +1,4 @@
-import { type CSSResultGroup } from "../../.deps.js";
-import { type HTMLTemplate } from "../../lib/templates.js";
-import { GodownInput } from "../../supers/input.js";
+import GodownInput from "../../proto/super-input.js";
 /**
  * {@linkcode SearchInput}  used for search behavior.
  */
@@ -14,7 +12,7 @@ export declare class SearchInput extends GodownInput {
      */
     target: string;
     /**
-     * Enable infer.
+     * @deprecated
      */
     infer: boolean;
     /**
@@ -33,18 +31,12 @@ export declare class SearchInput extends GodownInput {
      * Form name.
      */
     name: string;
+    variant: "default" | "outline";
     _input: HTMLInputElement;
-    static styles: CSSResultGroup;
-    protected render(): HTMLTemplate;
+    protected render(): import("lit").TemplateResult<1>;
     protected _handleSubmit(e: Event): void;
     protected _handleInput(e: Event): void;
     searchElements(s: string): void;
 }
 export default SearchInput;
-declare global {
-    interface HTMLElementTagNameMap {
-        "search-input": SearchInput;
-        "g-search-input": SearchInput;
-    }
-}
 //# sourceMappingURL=search-input.d.ts.map

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

@@ -1 +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,gBAAgB,CAAC;AAEjF,OAAO,EAAY,KAAK,YAAY,EAAa,MAAM,wBAAwB,CAAC;AAChF,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAOpD;;GAEG;AACH,qBACa,WAAY,SAAQ,WAAW;IAC1C;;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;QAC5B,gBAAgB,EAAE,WAAW,CAAC;KAC/B;CACF"}
+{"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":"AAMA,OAAO,WAAW,MAAM,4BAA4B,CAAC;AAQrD;;GAEG;AACH,qBAoFa,WAAY,SAAQ,WAAW;IAC1C;;OAEG;IACS,KAAK,SAAM;IACvB;;OAEG;IACS,MAAM,SAAM;IACxB;;OAEG;IACH,KAAK,EAAE,OAAO,CAAC;IACf;;OAEG;IACyC,KAAK,UAAS;IAC1D;;OAEG;IACS,MAAM,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACS,MAAM,EAAE,KAAK,GAAG,MAAM,CAAS;IAC3C;;OAEG;IACS,IAAI,SAAO;IAEX,OAAO,EAAE,SAAS,GAAG,SAAS,CAAa;IAEvC,MAAM,EAAG,gBAAgB,CAAC;IAE1C,SAAS,CAAC,MAAM;IA2BhB,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"}

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

@@ -1,11 +1,15 @@
 import { __decorate } from "tslib";
-import { css, html, property, query } from "../../.deps.js";
-import { define } from "../../decorators/define.js";
-import { htmlSlot, svgSearch } from "../../lib/templates.js";
-import { GodownInput } from "../../supers/input.js";
-import { createScope, cssvarValues } from "../../supers/root.js";
-const defineName = "search-input";
-const cssScope = createScope(defineName);
+import { css, html, ifDefined, property, query } from "../../_deps.js";
+import { godown } from "../../decorators/godown.js";
+import { styles } from "../../decorators/styles.js";
+import { combine } from "../../lib/directives.js";
+import { htmlSlot } from "../../lib/directives.js";
+import { svgSearch } from "../../lib/icons.js";
+import GodownInput from "../../proto/super-input.js";
+import { createScope, cssGlobalVars } from "../../styles/global.js";
+import { fieldStyle, inputStyle } from "../../styles/inputStyle.js";
+const protoName = "search-input";
+const cssScope = createScope(protoName);
 /**
  * {@linkcode SearchInput}  used for search behavior.
  */
@@ -20,18 +24,10 @@ let SearchInput = class SearchInput extends GodownInput {
          * Target selectors.
          */
         this.target = "";
-        /**
-         * Enable infer.
-         */
-        this.infer = false;
         /**
          * Float result.
          */
         this.float = false;
-        /**
-         * Form action.
-         */
-        this.action = "";
         /**
          * Form method.
          */
@@ -40,16 +36,29 @@ let SearchInput = class SearchInput extends GodownInput {
          * Form name.
          */
         this.name = "q";
+        this.variant = "default";
     }
     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>
+        return html `<form
+      part="root"
+      class="${combine({
+            outline: this.variant === "outline",
+        }, "input-field")}"
+      action="${ifDefined(this.action)}"
+      method="${this.method}"
+    >
+      <div class="search">
+        <input
+          .value="${this.value}"
+          ?autofocus="${this.autofocus}"
+          name="${this.name}"
+          @focus="${this._handleInput}"
+          @input="${this._handleInput}"
+          placeholder="${this.placeholder}"
+        />
+        <div class="icon" @click="${this._handleSubmit}">${svgSearch()}</div>
       </div>
-      <ul>
-        ${htmlSlot()}
-      </ul>
+      <div class="result">${htmlSlot()}</div>
     </form>`;
     }
     _handleSubmit(e) {
@@ -90,102 +99,12 @@ let SearchInput = class SearchInput extends GodownInput {
         }
     }
 };
-SearchInput.styles = [
-    GodownInput.styles,
-    css `
-      :host {
-        ${cssScope}--width:var(${cssvarValues.input}--width);
-        ${cssScope}--input-padding: 0 0 0 .35em;
-        width: var(${cssvarValues.input}--width);
-        margin: var(${cssvarValues.input}-outline-width);
-        border-radius: var(${cssvarValues.input}--radius);
-        background: var(${cssvarValues.input}--background);
-      }
-
-      div {
-        padding: var(${cssScope}--input-padding);
-        height: var(${cssvarValues.input}--height);
-        flex: 1;
-        display: flex;
-        z-index: 2;
-      }
-
-      form {
-        min-height: 100%;
-        outline: 0.145em solid transparent;
-        display: flex;
-        flex-direction: column;
-        border-radius: inherit;
-        padding: 0;
-        width: 100%;
-        margin: 0;
-        position: relative;
-        overflow: hidden;
-      }
-
-      :host([float]) form {
-        overflow: visible;
-      }
-
-      :host(:focus) form {
-        outline: var(${cssvarValues.input}--outline);
-      }
-
-      ul {
-        list-style: none;
-        width: 100%;
-        pointer-events: none;
-        border-radius: inherit;
-        z-index: 2;
-      }
-
-      :host([float]) ul {
-        background: var(${cssvarValues.input}--background);
-        padding-top: 1.5em;
-        position: absolute;
-        z-index: 1;
-        top: 0;
-      }
-
-      :host([float]:focus) form {
-        outline: none;
-      }
-
-      :host([float]:focus) ul {
-        outline: var(${cssvarValues.input}--outline);
-      }
-
-      button,
-      input {
-        background: none;
-      }
-
-      button {
-        width: 1.8em;
-        height: inherit;
-      }
-
-      input {
-        flex: 1;
-        min-width: 0;
-        box-sizing: border-box;
-      }
-
-      svg {
-        height: 100%;
-        padding: 1px;
-      }
-    `,
-];
 __decorate([
     property()
 ], SearchInput.prototype, "query", void 0);
 __decorate([
     property()
 ], SearchInput.prototype, "target", void 0);
-__decorate([
-    property({ type: Boolean })
-], SearchInput.prototype, "infer", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], SearchInput.prototype, "float", void 0);
@@ -198,11 +117,97 @@ __decorate([
 __decorate([
     property()
 ], SearchInput.prototype, "name", void 0);
+__decorate([
+    property()
+], SearchInput.prototype, "variant", void 0);
 __decorate([
     query("input")
 ], SearchInput.prototype, "_input", void 0);
 SearchInput = __decorate([
-    define(defineName)
+    godown(protoName),
+    styles([
+        inputStyle,
+        fieldStyle,
+        css `
+    :host {
+      --${cssScope}--width:var(--${cssGlobalVars.input}--width);
+      width: var(--${cssGlobalVars.input}--width);
+      margin: var(--${cssGlobalVars.input}-outline-width);
+      border-radius: var(--${cssGlobalVars.input}--radius);
+      background: var(--${cssGlobalVars.input}--background);
+      color: var(--${cssGlobalVars.foreground});
+      display: block;
+    }
+
+    .search {
+      width: 100%;
+      flex: 1;
+      display: flex;
+      z-index: 2;
+      height: var(--${cssGlobalVars.input}--height);
+    }
+
+    form {
+      min-height: 100%;
+      outline: 0.145em solid transparent;
+      display: flex;
+      flex-direction: column;
+      border-radius: inherit;
+      padding: 0;
+      width: 100%;
+      margin: 0;
+      position: relative;
+      overflow: hidden;
+    }
+
+    :host([float]) form {
+      overflow: visible;
+    }
+
+    .result {
+      list-style: none;
+      width: 100%;
+      pointer-events: none;
+      border-radius: inherit;
+      z-index: 2;
+    }
+
+    :host([float]) div.result {
+      background: var(--${cssGlobalVars.input}--background);
+      padding-top: 1.5em;
+      position: absolute;
+      z-index: 1;
+      top: 0;
+    }
+
+    :host([float]:focus) form {
+      outline: none;
+    }
+
+    :host([float]:focus) .result {
+      outline: var(--${cssGlobalVars.input}--outline);
+    }
+
+    .icon {
+      height: inherit;
+      display: flex;
+      align-items: center;
+      background: none;
+      padding-right: 0.25em;
+    }
+
+    input {
+      flex: 1;
+      min-width: 0;
+      box-sizing: border-box;
+    }
+
+    svg {
+      height: 1em;
+      width: 1em;
+    }
+  `,
+    ])
 ], SearchInput);
 export { SearchInput };
 export default SearchInput;

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 { define } from \"../../decorators/define.js\";\nimport { htmlSlot, type HTMLTemplate, svgSearch } from \"../../lib/templates.js\";\nimport { GodownInput } from \"../../supers/input.js\";\nimport { createScope, cssvarValues } from \"../../supers/root.js\";\n\nconst defineName = \"search-input\";\n\nconst cssScope = createScope(defineName);\n\n/**\n * {@linkcode SearchInput}  used for search behavior.\n */\n@define(defineName)\nexport class SearchInput extends GodownInput {\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    GodownInput.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    \"g-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":"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","sourcesContent":["import { css, html, ifDefined, property, query } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport { styles } from \"../../decorators/styles.js\";\nimport { combine } from \"../../lib/directives.js\";\nimport { htmlSlot } from \"../../lib/directives.js\";\nimport { svgSearch } from \"../../lib/icons.js\";\nimport GodownInput from \"../../proto/super-input.js\";\nimport { createScope, cssGlobalVars } from \"../../styles/global.js\";\nimport { fieldStyle, inputStyle } from \"../../styles/inputStyle.js\";\n\nconst protoName = \"search-input\";\n\nconst cssScope = createScope(protoName);\n\n/**\n * {@linkcode SearchInput}  used for search behavior.\n */\n@godown(protoName)\n@styles([\n  inputStyle,\n  fieldStyle,\n  css`\n    :host {\n      --${cssScope}--width:var(--${cssGlobalVars.input}--width);\n      width: var(--${cssGlobalVars.input}--width);\n      margin: var(--${cssGlobalVars.input}-outline-width);\n      border-radius: var(--${cssGlobalVars.input}--radius);\n      background: var(--${cssGlobalVars.input}--background);\n      color: var(--${cssGlobalVars.foreground});\n      display: block;\n    }\n\n    .search {\n      width: 100%;\n      flex: 1;\n      display: flex;\n      z-index: 2;\n      height: var(--${cssGlobalVars.input}--height);\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    .result {\n      list-style: none;\n      width: 100%;\n      pointer-events: none;\n      border-radius: inherit;\n      z-index: 2;\n    }\n\n    :host([float]) div.result {\n      background: var(--${cssGlobalVars.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) .result {\n      outline: var(--${cssGlobalVars.input}--outline);\n    }\n\n    .icon {\n      height: inherit;\n      display: flex;\n      align-items: center;\n      background: none;\n      padding-right: 0.25em;\n    }\n\n    input {\n      flex: 1;\n      min-width: 0;\n      box-sizing: border-box;\n    }\n\n    svg {\n      height: 1em;\n      width: 1em;\n    }\n  `,\n])\nexport class SearchInput extends GodownInput {\n  /**\n   * Query selectors.\n   */\n  @property() query = \"\";\n  /**\n   * Target selectors.\n   */\n  @property() target = \"\";\n  /**\n   * @deprecated\n   */\n  infer: boolean;\n  /**\n   * Float result.\n   */\n  @property({ type: Boolean, reflect: true }) float = false;\n  /**\n   * Form action.\n   */\n  @property() action: string;\n  /**\n   * Form method.\n   */\n  @property() method: \"get\" | \"post\" = \"get\";\n  /**\n   * Form name.\n   */\n  @property() name = \"q\";\n\n  @property() variant: \"default\" | \"outline\" = \"default\";\n\n  @query(\"input\") _input!: HTMLInputElement;\n\n  protected render() {\n    return html`<form\n      part=\"root\"\n      class=\"${combine(\n        {\n          outline: this.variant === \"outline\",\n        },\n        \"input-field\",\n      )}\"\n      action=\"${ifDefined(this.action)}\"\n      method=\"${this.method}\"\n    >\n      <div class=\"search\">\n        <input\n          .value=\"${this.value}\"\n          ?autofocus=\"${this.autofocus}\"\n          name=\"${this.name}\"\n          @focus=\"${this._handleInput}\"\n          @input=\"${this._handleInput}\"\n          placeholder=\"${this.placeholder}\"\n        />\n        <div class=\"icon\" @click=\"${this._handleSubmit}\">${svgSearch()}</div>\n      </div>\n      <div class=\"result\">${htmlSlot()}</div>\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"]}

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

@@ -1,8 +1,10 @@
-import { type CSSResultGroup } from "../../.deps.js";
-import { type HTMLTemplate } from "../../lib/templates.js";
-import { GodownInput } from "../../supers/input.js";
+import GodownInput from "../../proto/super-input.js";
 /**
  * {@linkcode SelectInput} select matched elements.
+ *
+ * This will not support multi-selection operations.
+ *
+ * @slot - Options.
  */
 export declare class SelectInput extends GodownInput {
     /**
@@ -10,42 +12,25 @@ export declare class SelectInput extends GodownInput {
      */
     open: boolean;
     /**
-     * Only a single option is allowed.
-     */
-    only: boolean;
-    /**
-     * Selected values.
-     */
-    value: any[];
-    /**
-     * Input name.
+     * Selected texts.
      */
-    name: string;
+    text: string;
     /**
      * Selected texts.
      */
-    text: string[];
-    static styles: CSSResultGroup;
-    get assigned(): any;
-    _input: HTMLInputElement;
-    _aside: HTMLInputElement;
-    protected render(): HTMLTemplate;
-    private renderList;
-    protected _focusCheck(): void;
-    focus(options?: FocusOptions): void;
-    connectedCallback(): void;
-    getOptionValue(option: Element): string;
+    defaultText: string;
+    protected render(): import("lit").TemplateResult<1>;
     protected firstUpdated(): void;
     select(value: string, text?: string): void;
-    protected _handleInput(): void;
-    namevalue(): [string, any[]] | [string, any];
+    filter(value?: string): void;
     reset(): void;
+    protected _handleInput(): void;
+    focus(options?: FocusOptions): void;
+    getOptionValue(option: Element): string;
+    /**
+     * @deprecated
+     */
+    only: boolean;
 }
 export default SelectInput;
-declare global {
-    interface HTMLElementTagNameMap {
-        "select-input": SelectInput;
-        "g-select-input": SelectInput;
-    }
-}
 //# sourceMappingURL=select-input.d.ts.map

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

@@ -1 +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,gBAAgB,CAAC;AAGjF,OAAO,EAAY,KAAK,YAAY,EAAkB,MAAM,wBAAwB,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAKpD;;GAEG;AACH,qBACa,WAAY,SAAQ,WAAW;IAC1C;;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;QAC5B,gBAAgB,EAAE,WAAW,CAAC;KAC/B;CACF"}
+{"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":"AAKA,OAAO,WAAW,MAAM,4BAA4B,CAAC;AAMrD;;;;;;GAMG;AACH,qBAgFa,WAAY,SAAQ,WAAW;IAC1C;;OAEG;IACyC,IAAI,UAAS;IAEzD;;OAEG;IACS,IAAI,EAAE,MAAM,CAAC;IACzB;;OAEG;IAIH,WAAW,EAAE,MAAM,CAAC;IAEpB,SAAS,CAAC,MAAM;IA6BhB,SAAS,CAAC,YAAY;IAetB,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,MAAM;IAQnC,MAAM,CAAC,KAAK,CAAC,EAAE,MAAM;IAgBrB,KAAK;IAML,SAAS,CAAC,YAAY;IAKtB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAK5B,cAAc,CAAC,MAAM,EAAE,OAAO;IAG9B;;OAEG;IACH,IAAI,EAAE,OAAO,CAAC;CACf;AAED,eAAe,WAAW,CAAC"}