godown 2.7.4 → 2.7.6

package/web-components/form/form.js

@@ -1,148 +1,78 @@
+var Form_1;
 import { __decorate } from "tslib";
-import { css, html, property, query } from "../../.deps.js";
-import { define } from "../../decorators/define.js";
-import { htmlSlot } from "../../lib/templates.js";
-import { each } from "../../lib/utils.js";
-import { GodownElement } from "../../supers/root.js";
+import { css, property } from "../../_deps.js";
+import { godown } from "../../decorators/godown.js";
+import { styles } from "../../decorators/styles.js";
+import { htmlSlot } from "../../lib/directives.js";
+import { GodownElement } from "../../proto/godown-element.js";
+const protoName = "form";
 /**
- * {@linkcode Form} gets all the names and actual values of the child element.
+ * {@linkcode Form} Gets child element key-value object,
+ * which will be nested if the child element is the same as this element.
+ *
+ * @slot - Child elements.
  */
-let Form = class Form extends GodownElement {
+let Form = Form_1 = class Form extends GodownElement {
     constructor() {
         super(...arguments);
         this.name = "";
-        this.value = {};
-        this.nameValue = () => this.namevalue();
-        /**
-         * Form enctype.
-         */
-        this.enctype = "multipart/form-data";
+        this.nameValue = this.namevalue;
+    }
+    get value() {
+        return Form_1.buildValue(this._slot.assignedElements());
     }
     render() {
-        return html `<form enctype="${this.enctype}">
-      ${htmlSlot("pre")}
-      <main>${htmlSlot()}</main>
-      ${htmlSlot("suf")}
-    </form>`;
+        return htmlSlot();
     }
     reset() {
-        each(this._form, (node) => {
-            if (node.reset) {
-                node.reset();
+        this.deepQuerySelectorAll("*").forEach((el) => {
+            if (el.tagName === this.tagName) {
+                return;
             }
-        });
-        const form = document.createElement("form");
-        for (const slot of this.shadowRoot.querySelectorAll("slot")) {
-            for (const i of slot.assignedNodes()) {
-                if (i.reset) {
-                    i.reset();
-                }
-                form.appendChild(i.cloneNode(true));
+            if (el.reset) {
+                el.reset();
             }
-        }
-        form.reset();
-        for (const slot of this.shadowRoot.querySelectorAll("slot")) {
-            for (const i of slot.assignedNodes()) {
-                if (i.name && form[i.name]) {
-                    i.value = form[i.name].value;
-                }
-            }
-        }
-        form.remove();
+        });
+    }
+    namevalue() {
+        return [this.name, this.value];
     }
-    namevalue(enctype = this.enctype) {
+    static buildValue(elements) {
         const result = {};
-        const tempForm = document.createElement("form");
-        tempForm.enctype = enctype;
-        for (const slot of this.shadowRoot.querySelectorAll("slot")) {
-            for (const i of slot.assignedNodes()) {
-                if (i.namevalue) {
-                    const [name, value] = i.namevalue();
-                    if (name) {
-                        result[name] = value;
-                    }
-                }
-                else {
-                    tempForm.appendChild(i.cloneNode(true));
-                }
+        for (const el of elements) {
+            if (el.tagName === "FORM") {
+                Object.assign(result, Object.fromEntries(new FormData(el).entries()));
             }
-        }
-        const formData = new FormData(tempForm);
-        for (const [key, value] of formData) {
-            result[key] = value;
-        }
-        each(this._form, (node) => {
-            if (node.namevalue) {
-                const [name, value] = node.namevalue();
+            else if (el.namevalue) {
+                const [name, value] = el.namevalue();
                 if (name) {
                     result[name] = value;
                 }
             }
-        });
-        tempForm.remove();
-        return [this.name, result];
-    }
-    FormData() {
-        const temp = {};
-        const tempForm = document.createElement("form");
-        tempForm.enctype = this.enctype;
-        for (const slot of this._slots) {
-            for (const i of slot.assignedNodes()) {
-                if (i.FormData) {
-                    for (const [key, value] of i.FormData()) {
-                        temp[key] = value;
-                    }
-                }
-                else {
-                    tempForm.appendChild(i.cloneNode(true));
-                }
+            else if (el.name && el.value !== undefined) {
+                result[el.name] = el.value;
             }
-        }
-        const formData = new FormData(tempForm);
-        each(this._form, (node) => {
-            if (node.namevalue) {
-                const [name, value] = node.namevalue();
-                if (name) {
-                    formData.append(name, value);
+            else if (el.shadowRoot) {
+                for (const slot of el.shadowRoot.querySelectorAll("slot")) {
+                    Object.assign(result, this.buildValue(slot.assignedElements()));
                 }
             }
-        });
-        for (const key in temp) {
-            formData.append(key, temp[key]);
         }
-        tempForm.remove();
-        return formData;
+        return result;
     }
 };
-Form.styles = [
-    css `
-      form {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        margin: 0;
-      }
-
-      main {
-        display: flex;
-        flex-direction: column;
-      }
-    `,
-];
 __decorate([
     property()
 ], Form.prototype, "name", void 0);
-__decorate([
-    property({ type: Object })
-], Form.prototype, "value", void 0);
-__decorate([
-    property()
-], Form.prototype, "enctype", void 0);
-__decorate([
-    query("form")
-], Form.prototype, "_form", void 0);
-Form = __decorate([
-    define("form")
+Form = Form_1 = __decorate([
+    godown(protoName),
+    styles([
+        css `
+    :host {
+      display: block;
+    }
+  `,
+    ])
 ], Form);
 export { Form };
 export default Form;

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

@@ -1 +1 @@
-{"version":3,"file":"form.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/form/form.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 } from \"../../lib/templates.js\";\nimport { each } from \"../../lib/utils.js\";\nimport { GodownElement } from \"../../supers/root.js\";\n\n/**\n * {@linkcode Form} gets all the names and actual values of the child element.\n */\n@define(\"form\")\nexport class Form<T extends object = object> extends GodownElement {\n  @property() name = \"\";\n  @property({ type: Object }) value = {} as T;\n\n  nameValue = () => this.namevalue();\n  /**\n   * Form enctype.\n   */\n  @property() enctype: \"application/x-www-form-urlencoded\" | \"multipart/form-data\" | \"text/plain\" = \"multipart/form-data\";\n\n  @query(\"form\") _form: HTMLFormElement;\n\n  static styles = [\n    css`\n      form {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        margin: 0;\n      }\n\n      main {\n        display: flex;\n        flex-direction: column;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate {\n    return html`<form enctype=\"${this.enctype}\">\n      ${htmlSlot(\"pre\")}\n      <main>${htmlSlot()}</main>\n      ${htmlSlot(\"suf\")}\n    </form>`;\n  }\n\n  reset() {\n    each(this._form, (node: HTMLFormElement | Form) => {\n      if (node.reset) {\n        node.reset();\n      }\n    });\n    const form: any = document.createElement(\"form\");\n    for (const slot of this.shadowRoot.querySelectorAll(\"slot\")) {\n      for (const i of slot.assignedNodes() as any) {\n        if (i.reset) {\n          i.reset();\n        }\n        form.appendChild(i.cloneNode(true));\n      }\n    }\n    form.reset();\n    for (const slot of this.shadowRoot.querySelectorAll(\"slot\")) {\n      for (const i of slot.assignedNodes() as any) {\n        if (i.name && form[i.name]) {\n          i.value = form[i.name].value;\n        }\n      }\n    }\n    form.remove();\n  }\n\n  namevalue(enctype = this.enctype): [string, Record<string, any>] {\n    const result = {};\n    const tempForm = document.createElement(\"form\");\n    tempForm.enctype = enctype;\n    for (const slot of this.shadowRoot.querySelectorAll(\"slot\")) {\n      for (const i of slot.assignedNodes() as any) {\n        if (i.namevalue) {\n          const [name, value] = i.namevalue();\n          if (name) {\n            result[name] = value;\n          }\n        } else {\n          tempForm.appendChild(i.cloneNode(true));\n        }\n      }\n    }\n    const formData = new FormData(tempForm);\n    for (const [key, value] of formData) {\n      result[key] = value;\n    }\n    each(this._form, (node: any) => {\n      if (node.namevalue) {\n        const [name, value] = node.namevalue();\n        if (name) {\n          result[name] = value;\n        }\n      }\n    });\n    tempForm.remove();\n    return [this.name, result];\n  }\n\n  FormData(): FormData {\n    const temp = {};\n    const tempForm = document.createElement(\"form\");\n    tempForm.enctype = this.enctype;\n    for (const slot of this._slots) {\n      for (const i of slot.assignedNodes() as any) {\n        if (i.FormData) {\n          for (const [key, value] of i.FormData()) {\n            temp[key] = value;\n          }\n        } else {\n          tempForm.appendChild(i.cloneNode(true));\n        }\n      }\n    }\n    const formData = new FormData(tempForm);\n    each(this._form, (node: any) => {\n      if (node.namevalue) {\n        const [name, value] = node.namevalue();\n        if (name) {\n          formData.append(name, value);\n        }\n      }\n    });\n    for (const key in temp) {\n      formData.append(key, temp[key]);\n    }\n    tempForm.remove();\n    return formData;\n  }\n}\nexport default Form;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"base-form\": Form;\n    \"g-form\": Form;\n  }\n}\n"]}
+{"version":3,"file":"form.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/form/form.ts"],"names":[],"mappings":";;AAAA,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,MAAM,SAAS,GAAG,MAAM,CAAC;AACzB;;;;;GAKG;AASI,IAAM,IAAI,YAAV,MAAM,IAAiB,SAAQ,aAAa;IAA5C;;QACO,SAAI,GAAG,EAAE,CAAC;QAKtB,cAAS,GAAG,IAAI,CAAC,SAAS,CAAC;IA+C7B,CAAC;IAnDC,IAAI,KAAK;QACP,OAAO,MAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,EAAE,CAAM,CAAC;IAC7D,CAAC;IAIS,MAAM;QACd,OAAO,QAAQ,EAAE,CAAC;IACpB,CAAC;IAED,KAAK;QACH,IAAI,CAAC,oBAAoB,CAAuC,GAAG,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE;YAClF,IAAI,EAAE,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,EAAE,CAAC;gBAChC,OAAO;YACT,CAAC;YACD,IAAI,EAAE,CAAC,KAAK,EAAE,CAAC;gBACb,EAAE,CAAC,KAAK,EAAE,CAAC;YACb,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,SAAS;QACP,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;IAED,MAAM,CAAC,UAAU,CACf,QAII;QAEJ,MAAM,MAAM,GAAG,EAAE,CAAC;QAClB,KAAK,MAAM,EAAE,IAAI,QAAQ,EAAE,CAAC;YAC1B,IAAI,EAAE,CAAC,OAAO,KAAK,MAAM,EAAE,CAAC;gBAC1B,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,WAAW,CAAC,IAAI,QAAQ,CAAC,EAAqB,CAAC,CAAC,OAAO,EAAE,CAAC,CAAC,CAAC;YAC3F,CAAC;iBAAM,IAAI,EAAE,CAAC,SAAS,EAAE,CAAC;gBACxB,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,GAAG,EAAE,CAAC,SAAS,EAAE,CAAC;gBACrC,IAAI,IAAI,EAAE,CAAC;oBACT,MAAM,CAAC,IAAI,CAAC,GAAG,KAAK,CAAC;gBACvB,CAAC;YACH,CAAC;iBAAM,IAAI,EAAE,CAAC,IAAI,IAAI,EAAE,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;gBAC7C,MAAM,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC;YAC7B,CAAC;iBAAM,IAAI,EAAE,CAAC,UAAU,EAAE,CAAC;gBACzB,KAAK,MAAM,IAAI,IAAI,EAAE,CAAC,UAAU,CAAC,gBAAgB,CAAC,MAAM,CAAC,EAAE,CAAC;oBAC1D,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC,CAAC;gBAClE,CAAC;YACH,CAAC;QACH,CAAC;QACD,OAAO,MAAM,CAAC;IAChB,CAAC;CACF,CAAA;AApDa;IAAX,QAAQ,EAAE;kCAAW;AADX,IAAI;IARhB,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC;QACN,GAAG,CAAA;;;;GAIF;KACF,CAAC;GACW,IAAI,CAqDhB;;AAED,eAAe,IAAI,CAAC","sourcesContent":["import { css, property } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport { styles } from \"../../decorators/styles.js\";\nimport { htmlSlot } from \"../../lib/directives.js\";\nimport { GodownElement } from \"../../proto/godown-element.js\";\n\nconst protoName = \"form\";\n/**\n * {@linkcode Form} Gets child element key-value object,\n * which will be nested if the child element is the same as this element.\n *\n * @slot - Child elements.\n */\n@godown(protoName)\n@styles([\n  css`\n    :host {\n      display: block;\n    }\n  `,\n])\nexport class Form<T = object> extends GodownElement {\n  @property() name = \"\";\n  get value(): T {\n    return Form.buildValue(this._slot.assignedElements()) as T;\n  }\n\n  nameValue = this.namevalue;\n\n  protected render() {\n    return htmlSlot();\n  }\n\n  reset() {\n    this.deepQuerySelectorAll<HTMLElement & { reset?: () => void }>(\"*\").forEach((el) => {\n      if (el.tagName === this.tagName) {\n        return;\n      }\n      if (el.reset) {\n        el.reset();\n      }\n    });\n  }\n\n  namevalue(): [string, T] {\n    return [this.name, this.value];\n  }\n\n  static buildValue(\n    elements: (Element & {\n      name?: string;\n      value?: unknown;\n      namevalue?: () => [string, unknown];\n    })[],\n  ): Record<string, any> {\n    const result = {};\n    for (const el of elements) {\n      if (el.tagName === \"FORM\") {\n        Object.assign(result, Object.fromEntries(new FormData(el as HTMLFormElement).entries()));\n      } else if (el.namevalue) {\n        const [name, value] = el.namevalue();\n        if (name) {\n          result[name] = value;\n        }\n      } else if (el.name && el.value !== undefined) {\n        result[el.name] = el.value;\n      } else if (el.shadowRoot) {\n        for (const slot of el.shadowRoot.querySelectorAll(\"slot\")) {\n          Object.assign(result, this.buildValue(slot.assignedElements()));\n        }\n      }\n    }\n    return result;\n  }\n}\n\nexport default Form;\n"]}

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

@@ -1,14 +1,13 @@
-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 Input }.
  */
 export declare class Input extends GodownInput {
+    variant: "default" | "outline";
     /**
-     * Input sccept.
+     * Input accept.
      */
-    accept: any;
+    accept: string;
     /**
      * Value.
      */
@@ -29,22 +28,10 @@ export declare class Input extends GodownInput {
      * Input step.
      */
     step: number;
-    _input: HTMLInputElement;
-    _ranged: HTMLElement;
-    static styles: CSSResultGroup;
-    protected render(): HTMLTemplate;
+    protected render(): import("lit").TemplateResult<1>;
     connectedCallback(): void;
-    protected firstUpdated(): void;
-    protected _handleRange(e: any | Event): void;
     protected _handleFile(e: any | Event): void;
     reset(): void;
-    protected _typeSwitcher(): HTMLTemplate;
 }
 export default Input;
-declare global {
-    interface HTMLElementTagNameMap {
-        "base-input": Input;
-        "g-input": Input;
-    }
-}
 //# sourceMappingURL=input.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"input.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,cAAc,EAAyB,MAAM,gBAAgB,CAAC;AAEjF,OAAO,EAAY,KAAK,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAKpD;;GAEG;AACH,qBACa,KAAM,SAAQ,WAAW;IACpC;;OAEG;IACS,MAAM,MAAa;IAC/B;;OAEG;IACS,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,CAAa;IACxD;;OAEG;IAC0B,IAAI,UAAS;IAC1C;;OAEG;IACyB,GAAG,SAAK;IACpC;;OAEG;IACyB,GAAG,SAAO;IACtC;;OAEG;IACyB,IAAI,SAAK;IAEpB,MAAM,EAAE,gBAAgB,CAAC;IACvB,OAAO,EAAE,WAAW,CAAC;IAExC,MAAM,CAAC,MAAM,iBA8GO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;IAahC,iBAAiB;IAejB,SAAS,CAAC,YAAY;IAOtB,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,GAAG,GAAG,KAAK;IAMrC,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,KAAK;IAKpC,KAAK;IAeL,SAAS,CAAC,aAAa,IAAI,YAAY;CAYxC;AAED,eAAe,KAAK,CAAC;AAErB,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,KAAK,CAAC;QACpB,SAAS,EAAE,KAAK,CAAC;KAClB;CACF"}
+{"version":3,"file":"input.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/input.ts"],"names":[],"mappings":"AAIA,OAAO,WAAW,MAAM,4BAA4B,CAAC;AAMrD;;GAEG;AACH,qBAyCa,KAAM,SAAQ,WAAW;IACxB,OAAO,EAAE,SAAS,GAAG,SAAS,CAAa;IACvD;;OAEG;IACS,MAAM,EAAE,MAAM,CAAa;IACvC;;OAEG;IACS,KAAK,EAAE,MAAM,GAAG,IAAI,GAAG,QAAQ,CAAa;IACxD;;OAEG;IAC0B,IAAI,UAAS;IAC1C;;OAEG;IACyB,GAAG,SAAK;IACpC;;OAEG;IACyB,GAAG,SAAO;IACtC;;OAEG;IACyB,IAAI,SAAK;IAErC,SAAS,CAAC,MAAM;IAkBhB,iBAAiB;IAajB,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,GAAG,GAAG,KAAK;IAKpC,KAAK;CAQN;AAED,eAAe,KAAK,CAAC"}

package/web-components/input/input.js

@@ -1,18 +1,21 @@
 import { __decorate } from "tslib";
-import { css, html, property, query } from "../../.deps.js";
-import { define } from "../../decorators/define.js";
-import { htmlSlot } from "../../lib/templates.js";
-import { GodownInput } from "../../supers/input.js";
-import { cssvar, cssvarValues } from "../../supers/root.js";
-const defineName = "input";
+import { css, html, property } from "../../_deps.js";
+import { godown } from "../../decorators/godown.js";
+import { styles } from "../../decorators/styles.js";
+import { combine } from "../../lib/directives.js";
+import GodownInput from "../../proto/super-input.js";
+import { cssGlobalVars } from "../../styles/global.js";
+import { fieldStyle, inputStyle } from "../../styles/inputStyle.js";
+const protoName = "input";
 /**
  * {@linkcode Input }.
  */
 let Input = class Input extends GodownInput {
     constructor() {
         super(...arguments);
+        this.variant = "default";
         /**
-         * Input sccept.
+         * Input accept.
          */
         this.accept = undefined;
         /**
@@ -37,16 +40,21 @@ let Input = class Input extends GodownInput {
         this.step = 1;
     }
     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>`;
+        return html `<div part="root" class="${combine({ "input-field": true, outline: this.variant === "outline" })}">
+      <input
+        part="input"
+        class="input"
+        id=${this.makeId}
+        .value="${this.value}"
+        ?autofocus="${this.autofocus}"
+        type="${this.type}"
+        placeholder="${this.placeholder}"
+        min="${this.min}"
+        max="${this.max}"
+        @input="${this._handleInput}"
+      />
+      ${this._renderSuffix()}
+    </div>`;
     }
     connectedCallback() {
         super.connectedCallback();
@@ -54,25 +62,13 @@ let Input = class Input extends GodownInput {
             this.value = null;
         }
         else {
-            if (!this.def) {
-                this.def = this.value || "";
+            if (!this.default) {
+                this.default = this.value || "";
             }
             if (!this.value) {
-                this.value = this.def;
+                this.value = this.default;
             }
         }
-        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];
@@ -83,138 +79,13 @@ let Input = class Input extends GodownInput {
             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}" />`;
-        }
+        this._input.value = this.default.toString();
+        this.value = this.default;
     }
 };
-Input.styles = [
-    GodownInput.styles,
-    css `
-      :host {
-        width: var(${cssvarValues.input}--width);
-        height: var(${cssvarValues.input}--height);
-        background: var(${cssvarValues.input}--background);
-        margin: var(${cssvarValues.input}--outline-width);
-        outline: var(${cssvarValues.input}--outline);
-        border-radius: var(${cssvarValues.input}--radius);
-      }
-
-      input[type="file"] {
-        display: none;
-      }
-
-      label,
-      div {
-        width: 100%;
-        display: flex;
-        align-items: center;
-      }
-
-      * {
-        border-radius: inherit;
-        cursor: inherit;
-      }
-
-      input {
-        box-sizing: border-box;
-        height: 100%;
-        width: 100%;
-        margin: 0;
-        color: inherit;
-        background: transparent;
-        padding: 0 0.25em;
-        border-radius: 0.25em;
-      }
-    `,
-    css `
-      :host([type="range"]) {
-        height: auto !important;
-        margin: 0.3em 0;
-        background: var(${cssvarValues.input}--false);
-        border-radius: 2em;
-      }
-
-      .range b:nth-of-type(1) {
-        width: 1em;
-        left: 0;
-        background: var(${cssvarValues.input}--true);
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-      }
-
-      .range b {
-        pointer-events: none;
-        width: calc(100% - 1em);
-        height: 100%;
-        left: 1em;
-        position: absolute;
-      }
-
-      .range {
-        height: fit-content;
-        position: relative;
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-      }
-
-      .range input {
-        padding: 0;
-        height: 0.6em;
-        margin: 0px -0.5em;
-        appearance: none;
-        -webkit-appearance: none;
-        outline: none;
-        background: transparent;
-      }
-
-      .range i {
-        position: absolute;
-        left: 0;
-        width: 50%;
-        height: 100%;
-        pointer-events: none;
-        background: var(${cssvarValues.input}--true);
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-      }
-
-      .range input::-webkit-slider-runnable-track {
-        height: 0.6em;
-      }
-
-      .range input::-webkit-slider-thumb {
-        z-index: 1;
-        appearance: none;
-        -webkit-appearance: none;
-        position: relative;
-        height: 1.2em;
-        width: 1.2em;
-        margin-top: -0.3em;
-        background: var(${cssvarValues.input}--control);
-        border-radius: 50%;
-        border: solid 0.125em var(${cssvarValues.input}--control-edge);
-        box-shadow: 0 0.1em 0.1em var(${cssvar}--shadow);
-      }
-    `,
-];
+__decorate([
+    property()
+], Input.prototype, "variant", void 0);
 __decorate([
     property()
 ], Input.prototype, "accept", void 0);
@@ -233,14 +104,48 @@ __decorate([
 __decorate([
     property({ type: Number })
 ], Input.prototype, "step", void 0);
-__decorate([
-    query("#input")
-], Input.prototype, "_input", void 0);
-__decorate([
-    query(".range i")
-], Input.prototype, "_ranged", void 0);
 Input = __decorate([
-    define(defineName)
+    godown(protoName),
+    styles([
+        inputStyle,
+        fieldStyle,
+        css `
+    :host {
+      width: var(--${cssGlobalVars.input}--width);
+      height: var(--${cssGlobalVars.input}--height);
+      color: var(--${cssGlobalVars.foreground});
+      background: var(--${cssGlobalVars.input}--background);
+      margin: var(--${cssGlobalVars.input}--outline-width);
+      border-radius: var(--${cssGlobalVars.input}--radius);
+      display: block;
+    }
+
+    input[type="file"] {
+      display: none;
+    }
+
+    [part="root"] {
+      width: 100%;
+      display: flex;
+      align-items: center;
+    }
+
+    * {
+      border-radius: inherit;
+      cursor: inherit;
+    }
+
+    input {
+      box-sizing: border-box;
+      height: 100%;
+      width: 100%;
+      margin: 0;
+      color: inherit;
+      background: transparent;
+      border-radius: 0.25em;
+    }
+  `,
+    ])
 ], Input);
 export { Input };
 export default Input;

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, html, property, query } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { htmlSlot, type HTMLTemplate } from \"../../lib/templates.js\";\nimport { GodownInput } from \"../../supers/input.js\";\nimport { cssvar, cssvarValues } from \"../../supers/root.js\";\n\nconst defineName = \"input\";\n\n/**\n * {@linkcode Input }.\n */\n@define(defineName)\nexport class Input extends GodownInput {\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    GodownInput.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 Input;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"base-input\": Input;\n    \"g-input\": Input;\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, html, property } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport { styles } from \"../../decorators/styles.js\";\nimport { combine } from \"../../lib/directives.js\";\nimport GodownInput from \"../../proto/super-input.js\";\nimport { cssGlobalVars } from \"../../styles/global.js\";\nimport { fieldStyle, inputStyle } from \"../../styles/inputStyle.js\";\n\nconst protoName = \"input\";\n\n/**\n * {@linkcode Input }.\n */\n@godown(protoName)\n@styles([\n  inputStyle,\n  fieldStyle,\n  css`\n    :host {\n      width: var(--${cssGlobalVars.input}--width);\n      height: var(--${cssGlobalVars.input}--height);\n      color: var(--${cssGlobalVars.foreground});\n      background: var(--${cssGlobalVars.input}--background);\n      margin: var(--${cssGlobalVars.input}--outline-width);\n      border-radius: var(--${cssGlobalVars.input}--radius);\n      display: block;\n    }\n\n    input[type=\"file\"] {\n      display: none;\n    }\n\n    [part=\"root\"] {\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      border-radius: 0.25em;\n    }\n  `,\n])\nexport class Input extends GodownInput {\n  @property() variant: \"default\" | \"outline\" = \"default\";\n  /**\n   * Input accept.\n   */\n  @property() accept: string = 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  protected render() {\n    return html`<div part=\"root\" class=\"${combine({ \"input-field\": true, outline: this.variant === \"outline\" })}\">\n      <input\n        part=\"input\"\n        class=\"input\"\n        id=${this.makeId}\n        .value=\"${this.value as string}\"\n        ?autofocus=\"${this.autofocus}\"\n        type=\"${this.type}\"\n        placeholder=\"${this.placeholder}\"\n        min=\"${this.min}\"\n        max=\"${this.max}\"\n        @input=\"${this._handleInput}\"\n      />\n      ${this._renderSuffix()}\n    </div>`;\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (this.type === \"file\") {\n      this.value = null;\n    } else {\n      if (!this.default) {\n        this.default = (this.value as string) || \"\";\n      }\n      if (!this.value) {\n        this.value = this.default;\n      }\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    this._input.value = this.default.toString();\n    this.value = this.default;\n  }\n}\n\nexport default Input;\n"]}

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

@@ -1,29 +1,15 @@
-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 LabelInput } renders label and input.
  *
  * When there is a label, the layout will be adjusted according to the width of the screen.
  *
- * Otherwise it behaves similarly to the `BaseInput`.
+ * Otherwise it behaves similarly to the `Input`.
+ *
  */
 export declare class LabelInput extends GodownInput {
-    /**
-     * Conditions for adjust layout.
-     */
-    mobile: string;
-    _input: HTMLInputElement;
-    static styles: CSSResultGroup;
-    protected render(): HTMLTemplate[];
-    private renderSuf;
-    protected _passwordSwitcher(): void;
+    variant: "default" | "outline";
+    protected render(): import("lit").TemplateResult<1>;
 }
 export default LabelInput;
-declare global {
-    interface HTMLElementTagNameMap {
-        "label-input": LabelInput;
-        "g-label-input": LabelInput;
-    }
-}
 //# sourceMappingURL=label-input.d.ts.map