godown 2.6.2 → 2.7.1

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

@@ -1,28 +1,50 @@
-import { type CSSResultGroup } from "../../deps.js";
-import { GodownElement } from "../../root.js";
-export type InputType = "hidden" | "text" | "search" | "tel" | "url" | "email" | "password" | "datetime" | "date" | "month" | "week" | "time" | "datetime-local" | "number" | "range" | "color" | "checkbox" | "radio" | "file" | "image";
-export declare class InputElement extends GodownElement {
-    type: InputType;
-    name: string;
-    value: string | any;
-    label: string;
-    def: string;
-    pla?: string;
-    autofocus: boolean;
+import { type CSSResultGroup } from "../../.deps.js";
+import { type HTMLTemplate } from "../../lib/templates.js";
+import { GodownInput } from "../../supers/input.js";
+/**
+ * {@linkcode Input }.
+ */
+export declare class Input extends GodownInput {
+    /**
+     * Input sccept.
+     */
+    accept: any;
+    /**
+     * Value.
+     */
+    value: string | File | FileList;
+    /**
+     * Only single files are allowed to be selected.
+     */
+    only: boolean;
+    /**
+     * Input min.
+     */
+    min: number;
+    /**
+     * Input max.
+     */
+    max: number;
+    /**
+     * Input step.
+     */
+    step: number;
     _input: HTMLInputElement;
-    compositing: boolean;
+    _ranged: HTMLElement;
     static styles: CSSResultGroup;
-    namevalue(): [string, any];
-    nameValue: () => [string, any];
-    reset(): void;
-    protected _handleInput(e: any): void;
-    protected _handleChange(): void;
+    protected render(): HTMLTemplate;
     connectedCallback(): void;
-    protected _initName(): void;
-    protected _compositionCheck(): void;
-    protected _changeInputType(t: InputType): void;
-    focus(options?: FocusOptions): void;
     protected firstUpdated(): void;
-    protected targetValue(e: Event): string | any;
+    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,EAAY,MAAM,eAAe,CAAC;AACnE,OAAO,EAAgB,aAAa,EAAE,MAAM,eAAe,CAAC;AAE5D,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,GAAG,gBAAgB,GAAG,QAAQ,GAAG,OAAO,GAAG,OAAO,GAAG,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAE1O,qBAAa,YAAa,SAAQ,aAAa;IAChB,IAAI,EAAE,SAAS,CAAU;IAC1C,IAAI,EAAE,MAAM,CAAa;IACzB,KAAK,EAAE,MAAM,GAAG,GAAG,CAAa;IACf,KAAK,SAAM;IAC5B,GAAG,SAAM;IACQ,GAAG,CAAC,EAAE,MAAM,CAAa;IACV,SAAS,UAAS;IAE9D,MAAM,EAAE,gBAAgB,CAAC;IACzB,WAAW,EAAE,OAAO,CAAC;IAErB,MAAM,CAAC,MAAM,iBAcO;IAEpB,SAAS,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC;IAI1B,SAAS,sBAA0B;IAEnC,KAAK;IAKL,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,GAAG;IAU7B,SAAS,CAAC,aAAa;IAIvB,iBAAiB;IAWjB,SAAS,CAAC,SAAS;IAQnB,SAAS,CAAC,iBAAiB;IAY3B,SAAS,CAAC,gBAAgB,CAAC,CAAC,EAAE,SAAS;IAIvC,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY;IAI5B,SAAS,CAAC,YAAY;IAKtB,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,GAAG;CAO9C"}
+{"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"}

package/web-components/input/input.js

@@ -1,117 +1,247 @@
 import { __decorate } from "tslib";
-import { css, property } from "../../deps.js";
-import { cssvarValues, GodownElement } from "../../root.js";
-export class InputElement extends GodownElement {
+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";
+/**
+ * {@linkcode Input }.
+ */
+let Input = class Input extends GodownInput {
     constructor() {
         super(...arguments);
-        this.type = "text";
-        this.name = undefined;
+        /**
+         * Input sccept.
+         */
+        this.accept = undefined;
+        /**
+         * Value.
+         */
         this.value = undefined;
-        this.label = "";
-        this.def = "";
-        this.pla = undefined;
-        this.autofocus = false;
-        this.nameValue = () => this.namevalue();
+        /**
+         * Only single files are allowed to be selected.
+         */
+        this.only = false;
+        /**
+         * Input min.
+         */
+        this.min = 0;
+        /**
+         * Input max.
+         */
+        this.max = 100;
+        /**
+         * Input step.
+         */
+        this.step = 1;
     }
-    namevalue() {
-        return [this.name, this.value];
-    }
-    reset() {
-        this.value = this.def;
-        this._input.value = this.def;
-    }
-    _handleInput(e) {
-        e.stopPropagation();
-        this.value = e.target.value?.trim();
-        if (this.compositing) {
-            return;
+    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>`;
         }
-        this.dispatchEvent(new CustomEvent("input", { detail: this.value, bubbles: true, composed: true }));
-        this.dispatchEvent(new CustomEvent("change", { detail: this.value, composed: true }));
-    }
-    _handleChange() {
-        this.dispatchEvent(new CustomEvent("change", { detail: this.value, composed: true }));
+        return html `<label for="input"> ${htmlSlot("pre")} ${this._typeSwitcher()} ${htmlSlot("suf")} </label>`;
     }
     connectedCallback() {
         super.connectedCallback();
-        if (!this.def) {
-            this.def = this.value || "";
+        if (this.type === "file") {
+            this.value = null;
         }
-        if (!this.value) {
-            this.value = this.def;
-        }
-        this._initName();
-    }
-    _initName() {
-        if (!this.name) {
-            if (this.label || this.type) {
-                this.name = this.label || this.type;
+        else {
+            if (!this.def) {
+                this.def = this.value || "";
+            }
+            if (!this.value) {
+                this.value = this.def;
             }
         }
+        this._initName();
     }
-    _compositionCheck() {
-        if (this._input) {
-            this.addEvent(this._input, "compositionstart", () => {
-                this.compositing = true;
-            });
-            this.addEvent(this._input, "compositionend", (e) => {
-                this.compositing = false;
-                this._handleInput(e);
-            });
+    firstUpdated() {
+        super.firstUpdated();
+        if (this.type === "range") {
+            this._ranged.style.width = 100 * (parseInt(this.value) / (this.max - this.min)) + "%";
         }
     }
-    _changeInputType(t) {
-        this._input.type = t;
+    _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 }));
     }
-    focus(options) {
-        this._input?.focus(options);
+    _handleFile(e) {
+        this.value = !this.only ? e.target.files : e.target.files[0];
+        this.dispatchEvent(new CustomEvent("change", { detail: this.value }));
     }
-    firstUpdated() {
-        this._compositionCheck();
-        this.reset();
+    reset() {
+        if (this.type === "file") {
+            this.value = null;
+            return;
+        }
+        if (this.type === "range") {
+            this._input.value = this.def || ((this.max - this.min) / 2).toString();
+            this.value = this._input.value;
+            this._ranged.style.width = 100 * (parseInt(this.value) / (this.max - this.min)) + "%";
+        }
+        else {
+            this._input.value = this.def.toString();
+            this.value = this.def;
+        }
     }
-    targetValue(e) {
-        const target = e.target;
-        if (target.value.trim) {
-            return target.value.trim();
+    _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}" />`;
         }
-        return target.value;
     }
-}
-InputElement.styles = [
-    GodownElement.styles,
+};
+Input.styles = [
+    GodownInput.styles,
     css `
       :host {
-        display: flex;
+        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);
       }
-      ::-ms-reveal {
+
+      input[type="file"] {
         display: none;
       }
-      ::-webkit-calendar-picker-indicator {
-        background-color: var(${cssvarValues.input}-true);
-        border-radius: 0.1rem;
+
+      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({ reflect: true })
-], InputElement.prototype, "type", void 0);
 __decorate([
     property()
-], InputElement.prototype, "name", void 0);
+], Input.prototype, "accept", void 0);
 __decorate([
     property()
-], InputElement.prototype, "value", void 0);
+], Input.prototype, "value", void 0);
 __decorate([
-    property({ reflect: true })
-], InputElement.prototype, "label", void 0);
+    property({ type: Boolean })
+], Input.prototype, "only", void 0);
 __decorate([
-    property()
-], InputElement.prototype, "def", void 0);
+    property({ type: Number })
+], Input.prototype, "min", void 0);
+__decorate([
+    property({ type: Number })
+], Input.prototype, "max", void 0);
+__decorate([
+    property({ type: Number })
+], Input.prototype, "step", void 0);
 __decorate([
-    property({ reflect: true })
-], InputElement.prototype, "pla", void 0);
+    query("#input")
+], Input.prototype, "_input", void 0);
 __decorate([
-    property({ type: Boolean, reflect: true })
-], InputElement.prototype, "autofocus", void 0);
+    query(".range i")
+], Input.prototype, "_ranged", void 0);
+Input = __decorate([
+    define(defineName)
+], Input);
+export { Input };
+export default Input;
 //# sourceMappingURL=input.js.map

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":";AAAA,OAAO,EAAE,GAAG,EAAuB,QAAQ,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAI5D,MAAM,OAAO,YAAa,SAAQ,aAAa;IAA/C;;QAC+B,SAAI,GAAc,MAAM,CAAC;QAC1C,SAAI,GAAW,SAAS,CAAC;QACzB,UAAK,GAAiB,SAAS,CAAC;QACf,UAAK,GAAG,EAAE,CAAC;QAC5B,QAAG,GAAG,EAAE,CAAC;QACQ,QAAG,GAAY,SAAS,CAAC;QACV,cAAS,GAAG,KAAK,CAAC;QAyB9D,cAAS,GAAG,GAAG,EAAE,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC;IAwErC,CAAC;IA5EC,SAAS;QACP,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC;IAID,KAAK;QACH,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QACtB,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;IAC/B,CAAC;IAES,YAAY,CAAC,CAAM;QAC3B,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,CAAC;QACpC,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACrB,OAAO;QACT,CAAC;QACD,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACpG,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACxF,CAAC;IAES,aAAa;QACrB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACxF,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE,CAAC;YACd,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAC;QAC9B,CAAC;QACD,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;YAChB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC;QACxB,CAAC;QACD,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAES,SAAS;QACjB,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,IAAI,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;gBAC5B,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC;YACtC,CAAC;QACH,CAAC;IACH,CAAC;IAES,iBAAiB;QACzB,IAAI,IAAI,CAAC,MAAM,EAAE,CAAC;YAChB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,kBAAkB,EAAE,GAAG,EAAE;gBAClD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YAC1B,CAAC,CAAC,CAAC;YACH,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,gBAAgB,EAAE,CAAC,CAAa,EAAE,EAAE;gBAC7D,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;gBACzB,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC;YACvB,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAES,gBAAgB,CAAC,CAAY;QACrC,IAAI,CAAC,MAAM,CAAC,IAAI,GAAG,CAAC,CAAC;IACvB,CAAC;IAED,KAAK,CAAC,OAAsB;QAC1B,IAAI,CAAC,MAAM,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IAES,YAAY;QACpB,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,KAAK,EAAE,CAAC;IACf,CAAC;IAES,WAAW,CAAC,CAAQ;QAC5B,MAAM,MAAM,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC5C,IAAI,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;YACtB,OAAO,MAAM,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;QAC7B,CAAC;QACD,OAAO,MAAM,CAAC,KAAK,CAAC;IACtB,CAAC;;AA3FM,mBAAM,GAAG;IACd,aAAa,CAAC,MAAM;IACpB,GAAG,CAAA;;;;;;;;gCAQyB,YAAY,CAAC,KAAK;;;KAG7C;CACgB,AAdN,CAcO;AAzBS;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAA0B;AAC1C;IAAX,QAAQ,EAAE;0CAA0B;AACzB;IAAX,QAAQ,EAAE;2CAAiC;AACf;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAY;AAC5B;IAAX,QAAQ,EAAE;yCAAU;AACQ;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAA0B;AACV;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAAmB","sourcesContent":["import { css, type CSSResultGroup, property } from \"../../deps.js\";\nimport { cssvarValues, GodownElement } from \"../../root.js\";\n\nexport type InputType = \"hidden\" | \"text\" | \"search\" | \"tel\" | \"url\" | \"email\" | \"password\" | \"datetime\" | \"date\" | \"month\" | \"week\" | \"time\" | \"datetime-local\" | \"number\" | \"range\" | \"color\" | \"checkbox\" | \"radio\" | \"file\" | \"image\";\n\nexport class InputElement extends GodownElement {\n  @property({ reflect: true }) type: InputType = \"text\";\n  @property() name: string = undefined;\n  @property() value: string | any = undefined;\n  @property({ reflect: true }) label = \"\";\n  @property() def = \"\";\n  @property({ reflect: true }) pla?: string = undefined;\n  @property({ type: Boolean, reflect: true }) autofocus = false;\n\n  _input: HTMLInputElement;\n  compositing: boolean;\n\n  static styles = [\n    GodownElement.styles,\n    css`\n      :host {\n        display: flex;\n      }\n      ::-ms-reveal {\n        display: none;\n      }\n      ::-webkit-calendar-picker-indicator {\n        background-color: var(${cssvarValues.input}-true);\n        border-radius: 0.1rem;\n      }\n    `,\n  ] as CSSResultGroup;\n\n  namevalue(): [string, any] {\n    return [this.name, this.value];\n  }\n\n  nameValue = () => this.namevalue();\n\n  reset() {\n    this.value = this.def;\n    this._input.value = this.def;\n  }\n\n  protected _handleInput(e: any) {\n    e.stopPropagation();\n    this.value = e.target.value?.trim();\n    if (this.compositing) {\n      return;\n    }\n    this.dispatchEvent(new CustomEvent(\"input\", { detail: this.value, bubbles: true, composed: true }));\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: this.value, composed: true }));\n  }\n\n  protected _handleChange() {\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: this.value, composed: true }));\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    if (!this.def) {\n      this.def = this.value || \"\";\n    }\n    if (!this.value) {\n      this.value = this.def;\n    }\n    this._initName();\n  }\n\n  protected _initName() {\n    if (!this.name) {\n      if (this.label || this.type) {\n        this.name = this.label || this.type;\n      }\n    }\n  }\n\n  protected _compositionCheck() {\n    if (this._input) {\n      this.addEvent(this._input, \"compositionstart\", () => {\n        this.compositing = true;\n      });\n      this.addEvent(this._input, \"compositionend\", (e: MouseEvent) => {\n        this.compositing = false;\n        this._handleInput(e);\n      });\n    }\n  }\n\n  protected _changeInputType(t: InputType) {\n    this._input.type = t;\n  }\n\n  focus(options?: FocusOptions) {\n    this._input?.focus(options);\n  }\n\n  protected firstUpdated() {\n    this._compositionCheck();\n    this.reset();\n  }\n\n  protected targetValue(e: Event): string | any {\n    const target = e.target as HTMLInputElement;\n    if (target.value.trim) {\n      return target.value.trim();\n    }\n    return target.value;\n  }\n}\n"]}
+{"version":3,"file":"input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/input.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, 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"]}

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

@@ -1,14 +1,14 @@
-import { type CSSResultGroup } from "../../deps.js";
+import { type CSSResultGroup } from "../../.deps.js";
 import { type HTMLTemplate } from "../../lib/templates.js";
-import { InputElement } from "./input.js";
+import { GodownInput } from "../../supers/input.js";
 /**
- * LabelInput renders label and input.
+ * {@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`.
  */
-export declare class LabelInput extends InputElement {
+export declare class LabelInput extends GodownInput {
     /**
      * Conditions for adjust layout.
      */
@@ -23,6 +23,7 @@ export default LabelInput;
 declare global {
     interface HTMLElementTagNameMap {
         "label-input": LabelInput;
+        "g-label-input": LabelInput;
     }
 }
 //# sourceMappingURL=label-input.d.ts.map

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

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

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

@@ -1,8 +1,9 @@
 import { __decorate } from "tslib";
-import { css, html, property, query } from "../../deps.js";
+import { css, html, property, query } from "../../.deps.js";
+import { define } from "../../decorators/define.js";
 import { htmlSlot, htmlStyle, svgEye } from "../../lib/templates.js";
-import { cssvarValues, define } from "../../root.js";
-import { InputElement } from "./input.js";
+import { GodownInput } from "../../supers/input.js";
+import { cssvarValues } from "../../supers/root.js";
 const PASSWORD = "password";
 const styleInMedia = css `
   label[for] {
@@ -28,13 +29,13 @@ const styleWithLabel = css `
 `;
 const defineName = "label-input";
 /**
- * LabelInput renders label and input.
+ * {@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`.
  */
-let LabelInput = class LabelInput extends InputElement {
+let LabelInput = class LabelInput extends GodownInput {
     constructor() {
         super(...arguments);
         /**
@@ -88,7 +89,7 @@ let LabelInput = class LabelInput extends InputElement {
     }
 };
 LabelInput.styles = [
-    InputElement.styles,
+    GodownInput.styles,
     css `
       :host {
         margin: var(${cssvarValues.input}--outline-width);

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

@@ -1 +1 @@
-{"version":3,"file":"label-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/label-input.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAuB,IAAI,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAChF,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAqB,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACxF,OAAO,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAE1C,MAAM,QAAQ,GAAG,UAAU,CAAC;AAE5B,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;iBAQP,YAAY,CAAC,KAAK;;;CAGlC,CAAC;AAEF,MAAM,YAAY,GAAG,GAAG,CAAA;;iBAEP,YAAY,CAAC,KAAK;;CAElC,CAAC;AAEF,MAAM,cAAc,GAAG,GAAG,CAAA;;sBAEJ,YAAY,CAAC,KAAK;;CAEvC,CAAC;AAEF,MAAM,UAAU,GAAG,aAAa,CAAC;AAEjC;;;;;;GAMG;AAEI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,YAAY;IAArC;;QACL;;WAEG;QACS,WAAM,GAAG,OAAO,CAAC;IA8G/B,CAAC;IA5CW,MAAM;QACd,MAAM,MAAM,GAAG,IAAI,CAAA;WACZ,QAAQ,CAAC,KAAK,CAAC;uBACH,IAAI,CAAC,KAAK,iBAAiB,IAAI,CAAC,SAAS,SAAS,IAAI,CAAC,IAAI,WAAW,IAAI,CAAC,IAAI,kBAAkB,IAAI,CAAC,GAAG,YAAY,IAAI,CAAC,IAAI,aAAa,IAAI,CAAC,YAAY,cAAc,IAAI,CAAC,aAAa;QAC3M,IAAI,CAAC,SAAS,EAAE;gBACR,CAAC;QACb,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,IAAI,GAAG,cAAc,sBAAsB,IAAI,CAAC,MAAM,KAAK,YAAY,GAAG,CAAC;YACpG,OAAO;gBACL,IAAI,CAAA,eAAe,IAAI,CAAC,IAAI;kBAClB,IAAI,CAAC,KAAK,GAAG,QAAQ,EAAE;YAC7B,MAAM;iBACD;gBACT,SAAS,CAAC,KAAK,CAAC;aACjB,CAAC;QACJ,CAAC;QACD,OAAO,CAAC,MAAM,EAAE,SAAS,CAAC,YAAY,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC;IACtD,CAAC;IAEO,SAAS;QACf,IAAI,IAAI,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC3B,OAAO,IAAI,CAAA;sBACK,IAAI,CAAC,iBAAiB;oBACxB,GAAG,EAAE;gBACf,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;YAClC,CAAC;uBACc,GAAG,EAAE;gBAClB,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;YAClC,CAAC;;UAEC,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,IAAI,CAAC;WAC9B,CAAC;QACR,CAAC;aAAM,CAAC;YACN,OAAO,IAAI,CAAA,MAAM,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC;QACzC,CAAC;IACH,CAAC;IAES,iBAAiB;QACzB,IAAI,IAAI,CAAC,MAAM,CAAC,IAAI,KAAK,QAAQ,EAAE,CAAC;YAClC,IAAI,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC;QAChC,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAClC,CAAC;IACH,CAAC;;AAzGM,iBAAM,GAAG;IACd,YAAY,CAAC,MAAM;IACnB,GAAG,CAAA;;sBAEe,YAAY,CAAC,KAAK;6BACX,YAAY,CAAC,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA4BxB,YAAY,CAAC,KAAK;;;;;;;;;;;;;;;;;;gCAkBT,YAAY,CAAC,KAAK;;;;sBAI5B,YAAY,CAAC,KAAK;qBACnB,YAAY,CAAC,KAAK;yBACd,YAAY,CAAC,KAAK;;KAEtC;CACgB,AA5DN,CA4DO;AAhER;IAAX,QAAQ,EAAE;0CAAkB;AAEb;IAAf,KAAK,CAAC,OAAO,CAAC;0CAA0B;AAN9B,UAAU;IADtB,MAAM,CAAC,UAAU,CAAC;GACN,UAAU,CAkHtB;;AAED,eAAe,UAAU,CAAC","sourcesContent":["import { css, type CSSResultGroup, html, property, query } from \"../../deps.js\";\nimport { htmlSlot, htmlStyle, type HTMLTemplate, svgEye } from \"../../lib/templates.js\";\nimport { cssvarValues, define } from \"../../root.js\";\nimport { InputElement } from \"./input.js\";\n\nconst PASSWORD = \"password\";\n\nconst styleInMedia = css`\n  label[for] {\n    justify-content: flex-start;\n    flex-direction: column;\n    align-items: inherit;\n    width: fit-content;\n  }\n  :host {\n    width: var(${cssvarValues.input}--width);\n    margin: auto;\n  }\n`;\n\nconst styleNoLabel = css`\n  :host {\n    width: var(${cssvarValues.input}--width);\n  }\n`;\n\nconst styleWithLabel = css`\n  :host {\n    width: calc(var(${cssvarValues.input}--width) * 2);\n  }\n`;\n\nconst defineName = \"label-input\";\n\n/**\n * LabelInput renders label and input.\n *\n * When there is a label, the layout will be adjusted according to the width of the screen.\n *\n * Otherwise it behaves similarly to the `BaseInput`.\n */\n@define(defineName)\nexport class LabelInput extends InputElement {\n  /**\n   * Conditions for adjust layout.\n   */\n  @property() mobile = \"540px\";\n\n  @query(\"input\") _input: HTMLInputElement;\n\n  static styles = [\n    InputElement.styles,\n    css`\n      :host {\n        margin: var(${cssvarValues.input}--outline-width);\n        border-radius: var(${cssvarValues.input}--radius);\n      }\n\n      label {\n        width: 100%;\n        margin: auto;\n        box-sizing: border-box;\n        height: fit-content;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        border-radius: inherit;\n      }\n\n      span {\n        white-space: nowrap;\n      }\n\n      input {\n        padding: 0 0.25em;\n        background-color: transparent;\n        border-radius: inherit;\n        flex: 1;\n        width: 100%;\n        height: inherit;\n      }\n\n      fieldset:focus-within {\n        outline: var(${cssvarValues.input}--outline);\n      }\n\n      i {\n        margin: auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      i > svg {\n        height: 1em;\n        width: 1em;\n        margin: 0.25em;\n      }\n\n      fieldset {\n        position: relative;\n        background-color: var(${cssvarValues.input}--background);\n        display: flex;\n        align-items: center;\n        border-radius: inherit;\n        height: var(${cssvarValues.input}--height);\n        width: var(${cssvarValues.input}--width);\n        min-width: var(${cssvarValues.input}--width);\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate[] {\n    const result = html`<fieldset>\n      <i>${htmlSlot(\"pre\")}</i>\n      <input .value=\"${this.value}\" ?autofocus=\"${this.autofocus}\" id=\"${this.name}\" type=\"${this.type}\" placeholder=\"${this.pla}\" class=\"${this.type}\" @input=\"${this._handleInput}\" @change=\"${this._handleChange}\" />\n      ${this.renderSuf()}\n    </fieldset>`;\n    if (this.label) {\n      const style = this.mobile && `${styleWithLabel}@media (max-width: ${this.mobile}){${styleInMedia}}`;\n      return [\n        html`<label for=\"${this.name}\">\n          <span>${this.label}${htmlSlot()}</span>\n          ${result}\n        </label>`,\n        htmlStyle(style),\n      ];\n    }\n    return [result, htmlStyle(styleNoLabel.toString())];\n  }\n\n  private renderSuf(): HTMLTemplate {\n    if (this.type === PASSWORD) {\n      return html`<i\n        @mousedown=\"${this._passwordSwitcher}\"\n        @mouseup=\"${() => {\n          this._changeInputType(PASSWORD);\n        }}\"\n        @mouseleave=\"${() => {\n          this._changeInputType(PASSWORD);\n        }}\"\n      >\n        ${htmlSlot(\"suf\", svgEye(), this)}\n      </i>`;\n    } else {\n      return html`<i>${htmlSlot(\"suf\")}</i>`;\n    }\n  }\n\n  protected _passwordSwitcher() {\n    if (this._input.type === PASSWORD) {\n      this._changeInputType(\"text\");\n    } else {\n      this._changeInputType(PASSWORD);\n    }\n  }\n}\n\nexport default LabelInput;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"label-input\": LabelInput;\n  }\n}\n"]}
+{"version":3,"file":"label-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/label-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, html, property, query } from \"../../.deps.js\";\nimport { define } from \"../../decorators/define.js\";\nimport { htmlSlot, htmlStyle, type HTMLTemplate, svgEye } from \"../../lib/templates.js\";\nimport { GodownInput } from \"../../supers/input.js\";\nimport { cssvarValues } from \"../../supers/root.js\";\n\nconst PASSWORD = \"password\";\n\nconst styleInMedia = css`\n  label[for] {\n    justify-content: flex-start;\n    flex-direction: column;\n    align-items: inherit;\n    width: fit-content;\n  }\n  :host {\n    width: var(${cssvarValues.input}--width);\n    margin: auto;\n  }\n`;\n\nconst styleNoLabel = css`\n  :host {\n    width: var(${cssvarValues.input}--width);\n  }\n`;\n\nconst styleWithLabel = css`\n  :host {\n    width: calc(var(${cssvarValues.input}--width) * 2);\n  }\n`;\n\nconst defineName = \"label-input\";\n\n/**\n * {@linkcode LabelInput } renders label and input.\n *\n * When there is a label, the layout will be adjusted according to the width of the screen.\n *\n * Otherwise it behaves similarly to the `BaseInput`.\n */\n@define(defineName)\nexport class LabelInput extends GodownInput {\n  /**\n   * Conditions for adjust layout.\n   */\n  @property() mobile = \"540px\";\n\n  @query(\"input\") _input: HTMLInputElement;\n\n  static styles = [\n    GodownInput.styles,\n    css`\n      :host {\n        margin: var(${cssvarValues.input}--outline-width);\n        border-radius: var(${cssvarValues.input}--radius);\n      }\n\n      label {\n        width: 100%;\n        margin: auto;\n        box-sizing: border-box;\n        height: fit-content;\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        border-radius: inherit;\n      }\n\n      span {\n        white-space: nowrap;\n      }\n\n      input {\n        padding: 0 0.25em;\n        background-color: transparent;\n        border-radius: inherit;\n        flex: 1;\n        width: 100%;\n        height: inherit;\n      }\n\n      fieldset:focus-within {\n        outline: var(${cssvarValues.input}--outline);\n      }\n\n      i {\n        margin: auto;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      i > svg {\n        height: 1em;\n        width: 1em;\n        margin: 0.25em;\n      }\n\n      fieldset {\n        position: relative;\n        background-color: var(${cssvarValues.input}--background);\n        display: flex;\n        align-items: center;\n        border-radius: inherit;\n        height: var(${cssvarValues.input}--height);\n        width: var(${cssvarValues.input}--width);\n        min-width: var(${cssvarValues.input}--width);\n      }\n    `,\n  ] as CSSResultGroup;\n\n  protected render(): HTMLTemplate[] {\n    const result = html`<fieldset>\n      <i>${htmlSlot(\"pre\")}</i>\n      <input .value=\"${this.value}\" ?autofocus=\"${this.autofocus}\" id=\"${this.name}\" type=\"${this.type}\" placeholder=\"${this.pla}\" class=\"${this.type}\" @input=\"${this._handleInput}\" @change=\"${this._handleChange}\" />\n      ${this.renderSuf()}\n    </fieldset>`;\n    if (this.label) {\n      const style = this.mobile && `${styleWithLabel}@media (max-width: ${this.mobile}){${styleInMedia}}`;\n      return [\n        html`<label for=\"${this.name}\">\n          <span>${this.label}${htmlSlot()}</span>\n          ${result}\n        </label>`,\n        htmlStyle(style),\n      ];\n    }\n    return [result, htmlStyle(styleNoLabel.toString())];\n  }\n\n  private renderSuf(): HTMLTemplate {\n    if (this.type === PASSWORD) {\n      return html`<i\n        @mousedown=\"${this._passwordSwitcher}\"\n        @mouseup=\"${() => {\n          this._changeInputType(PASSWORD);\n        }}\"\n        @mouseleave=\"${() => {\n          this._changeInputType(PASSWORD);\n        }}\"\n      >\n        ${htmlSlot(\"suf\", svgEye(), this)}\n      </i>`;\n    } else {\n      return html`<i>${htmlSlot(\"suf\")}</i>`;\n    }\n  }\n\n  protected _passwordSwitcher() {\n    if (this._input.type === PASSWORD) {\n      this._changeInputType(\"text\");\n    } else {\n      this._changeInputType(PASSWORD);\n    }\n  }\n}\n\nexport default LabelInput;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"label-input\": LabelInput;\n    \"g-label-input\": LabelInput;\n  }\n}\n"]}

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

@@ -1,10 +1,10 @@
-import { type CSSResultGroup } from "../../deps.js";
+import { type CSSResultGroup } from "../../.deps.js";
 import { type HTMLTemplate } from "../../lib/templates.js";
-import { InputElement } from "./input.js";
+import { GodownInput } from "../../supers/input.js";
 /**
- * SearchInput used for search behavior.
+ * {@linkcode SearchInput}  used for search behavior.
  */
-export declare class SearchInput extends InputElement {
+export declare class SearchInput extends GodownInput {
     /**
      * Query selectors.
      */
@@ -44,6 +44,7 @@ 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,eAAe,CAAC;AAChF,OAAO,EAAY,KAAK,YAAY,EAAa,MAAM,wBAAwB,CAAC;AAEhF,OAAO,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAM1C;;GAEG;AACH,qBACa,WAAY,SAAQ,YAAY;IAC3C;;OAEG;IACS,KAAK,SAAM;IACvB;;OAEG;IACS,MAAM,SAAM;IACxB;;OAEG;IAC0B,KAAK,UAAS;IAC3C;;OAEG;IACyC,KAAK,UAAS;IAC1D;;OAEG;IACS,MAAM,SAAM;IACxB;;OAEG;IACS,MAAM,EAAE,KAAK,GAAG,MAAM,CAAS;IAC3C;;OAEG;IACS,IAAI,SAAO;IAEP,MAAM,EAAG,gBAAgB,CAAC;IAE1C,MAAM,CAAC,MAAM,iBAsFO;IAEpB,SAAS,CAAC,MAAM,IAAI,YAAY;IAYhC,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,KAAK;IAOhC,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK;IAiB/B,cAAc,CAAC,CAAC,EAAE,MAAM;CAezB;AAED,eAAe,WAAW,CAAC;AAE3B,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,WAAW,CAAC;KAC7B;CACF"}
+{"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"}

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

@@ -1,14 +1,15 @@
 import { __decorate } from "tslib";
-import { css, html, property, query } from "../../deps.js";
+import { css, html, property, query } from "../../.deps.js";
+import { define } from "../../decorators/define.js";
 import { htmlSlot, svgSearch } from "../../lib/templates.js";
-import { createScope, cssvarValues, define } from "../../root.js";
-import { InputElement } from "./input.js";
+import { GodownInput } from "../../supers/input.js";
+import { createScope, cssvarValues } from "../../supers/root.js";
 const defineName = "search-input";
 const cssScope = createScope(defineName);
 /**
- * SearchInput used for search behavior.
+ * {@linkcode SearchInput}  used for search behavior.
  */
-let SearchInput = class SearchInput extends InputElement {
+let SearchInput = class SearchInput extends GodownInput {
     constructor() {
         super(...arguments);
         /**
@@ -90,7 +91,7 @@ let SearchInput = class SearchInput extends InputElement {
     }
 };
 SearchInput.styles = [
-    InputElement.styles,
+    GodownInput.styles,
     css `
       :host {
         ${cssScope}--width:var(${cssvarValues.input}--width);