godown 2.7.4 → 2.7.6

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,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"}
+{"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":"AAIA,OAAO,WAAW,MAAM,4BAA4B,CAAC;AAMrD;;;;;;;GAOG;AACH,qBA+Ca,UAAW,SAAQ,WAAW;IAC7B,OAAO,EAAE,SAAS,GAAG,SAAS,CAAa;IAEvD,SAAS,CAAC,MAAM;CAkBjB;AAED,eAAe,UAAU,CAAC"}

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

@@ -1,162 +1,95 @@
 import { __decorate } from "tslib";
-import { css, html, property, query } from "../../.deps.js";
-import { define } from "../../decorators/define.js";
-import { htmlSlot, htmlStyle, svgEye } from "../../lib/templates.js";
-import { GodownInput } from "../../supers/input.js";
-import { cssvarValues } from "../../supers/root.js";
-const PASSWORD = "password";
-const styleInMedia = css `
-  label[for] {
-    justify-content: flex-start;
-    flex-direction: column;
-    align-items: inherit;
-    width: fit-content;
-  }
-  :host {
-    width: var(${cssvarValues.input}--width);
-    margin: auto;
-  }
-`;
-const styleNoLabel = css `
-  :host {
-    width: var(${cssvarValues.input}--width);
-  }
-`;
-const styleWithLabel = css `
-  :host {
-    width: calc(var(${cssvarValues.input}--width) * 2);
-  }
-`;
-const defineName = "label-input";
+import { css, html, property } from "../../_deps.js";
+import { godown } from "../../decorators/godown.js";
+import { styles } from "../../decorators/styles.js";
+import { combine, htmlSlot } 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 = "label-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`.
+ * Otherwise it behaves similarly to the `Input`.
+ *
  */
 let LabelInput = class LabelInput extends GodownInput {
     constructor() {
         super(...arguments);
-        /**
-         * Conditions for adjust layout.
-         */
-        this.mobile = "540px";
+        this.variant = "default";
     }
     render() {
-        const result = html `<fieldset>
-      <i>${htmlSlot("pre")}</i>
-      <input .value="${this.value}" ?autofocus="${this.autofocus}" id="${this.name}" type="${this.type}" placeholder="${this.pla}" class="${this.type}" @input="${this._handleInput}" @change="${this._handleChange}" />
-      ${this.renderSuf()}
-    </fieldset>`;
-        if (this.label) {
-            const style = this.mobile && `${styleWithLabel}@media (max-width: ${this.mobile}){${styleInMedia}}`;
-            return [
-                html `<label for="${this.name}">
-          <span>${this.label}${htmlSlot()}</span>
-          ${result}
-        </label>`,
-                htmlStyle(style),
-            ];
-        }
-        return [result, htmlStyle(styleNoLabel.toString())];
-    }
-    renderSuf() {
-        if (this.type === PASSWORD) {
-            return html `<i
-        @mousedown="${this._passwordSwitcher}"
-        @mouseup="${() => {
-                this._changeInputType(PASSWORD);
-            }}"
-        @mouseleave="${() => {
-                this._changeInputType(PASSWORD);
-            }}"
-      >
-        ${htmlSlot("suf", svgEye(), this)}
-      </i>`;
-        }
-        else {
-            return html `<i>${htmlSlot("suf")}</i>`;
-        }
-    }
-    _passwordSwitcher() {
-        if (this._input.type === PASSWORD) {
-            this._changeInputType("text");
-        }
-        else {
-            this._changeInputType(PASSWORD);
-        }
+        const { makeId: htmlFor } = this;
+        return html `<label for="${htmlFor}" part="label">
+      <span part="label">${this.label}${htmlSlot()}</span>
+      <div class="${combine({ "input-field": true, outline: this.variant === "outline" })}">
+        <input
+          part="input"
+          id="${htmlFor}"
+          type="${this.type}"
+          ?autofocus="${this.autofocus}"
+          placeholder="${this.placeholder}"
+          class="${this.type}"
+          @input="${this._handleInput}"
+        />
+        ${this._renderSuffix()}
+      </div>
+    </label>`;
     }
 };
-LabelInput.styles = [
-    GodownInput.styles,
-    css `
-      :host {
-        margin: var(${cssvarValues.input}--outline-width);
-        border-radius: var(${cssvarValues.input}--radius);
-      }
-
-      label {
-        width: 100%;
-        margin: auto;
-        box-sizing: border-box;
-        height: fit-content;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        border-radius: inherit;
-      }
-
-      span {
-        white-space: nowrap;
-      }
-
-      input {
-        padding: 0 0.25em;
-        background-color: transparent;
-        border-radius: inherit;
-        flex: 1;
-        width: 100%;
-        height: inherit;
-      }
+__decorate([
+    property()
+], LabelInput.prototype, "variant", void 0);
+LabelInput = __decorate([
+    godown(protoName),
+    styles([
+        inputStyle,
+        fieldStyle,
+        css `
+    :host {
+      --${cssGlobalVars.input}--label-width: var(--${cssGlobalVars.input}--width);
+      width: calc(var(--${cssGlobalVars.input}--width) + var(--${cssGlobalVars.input}--label-width));
+      height: var(--${cssGlobalVars.input}--height);
+      margin: var(--${cssGlobalVars.input}--outline-width);
+      border-radius: var(--${cssGlobalVars.input}--radius);
+      margin: var(--${cssGlobalVars.input}--outline-width);
+      border-radius: var(--${cssGlobalVars.input}--radius);
+      justify-content: space-between;
+      display: flex;
+    }
 
-      fieldset:focus-within {
-        outline: var(${cssvarValues.input}--outline);
-      }
+    div {
+      height: inherit;
+      width: var(--${cssGlobalVars.input}--width);
+    }
 
-      i {
-        margin: auto;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
+    label {
+      display: contents;
+      border-radius: inherit;
+      height: inherit;
+    }
 
-      i > svg {
-        height: 1em;
-        width: 1em;
-        margin: 0.25em;
-      }
+    span {
+      flex: 1;
+      white-space: nowrap;
+      width: var(--${cssGlobalVars.input}--width);
+    }
 
-      fieldset {
-        position: relative;
-        background-color: var(${cssvarValues.input}--background);
-        display: flex;
-        align-items: center;
-        border-radius: inherit;
-        height: var(${cssvarValues.input}--height);
-        width: var(${cssvarValues.input}--width);
-        min-width: var(${cssvarValues.input}--width);
-      }
-    `,
-];
-__decorate([
-    property()
-], LabelInput.prototype, "mobile", void 0);
-__decorate([
-    query("input")
-], LabelInput.prototype, "_input", void 0);
-LabelInput = __decorate([
-    define(defineName)
+    input {
+      flex: 1;
+      width: 100%;
+      height: inherit;
+      background: transparent;
+      border-radius: inherit;
+      color: var(--${cssGlobalVars.foreground});
+    }
+    .input-field {
+      background: var(--${cssGlobalVars.input}--background);
+    }
+  `,
+    ])
 ], LabelInput);
 export { LabelInput };
 export default LabelInput;

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

@@ -1 +1 @@
-{"version":3,"file":"label-input.js","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/label-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, type CSSResultGroup, html, property, query } from \"../../.deps.js\";\nimport { 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"]}
+{"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,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AAC5D,OAAO,WAAW,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,aAAa,EAAE,MAAM,wBAAwB,CAAC;AACvD,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AAEpE,MAAM,SAAS,GAAG,aAAa,CAAC;AAEhC;;;;;;;GAOG;AAgDI,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,WAAW;IAApC;;QACO,YAAO,GAA0B,SAAS,CAAC;IAoBzD,CAAC;IAlBW,MAAM;QACd,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;QACjC,OAAO,IAAI,CAAA,eAAe,OAAO;2BACV,IAAI,CAAC,KAAK,GAAG,QAAQ,EAAE;oBAC9B,OAAO,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS,EAAE,CAAC;;;gBAGzE,OAAO;kBACL,IAAI,CAAC,IAAI;wBACH,IAAI,CAAC,SAAS;yBACb,IAAI,CAAC,WAAW;mBACtB,IAAI,CAAC,IAAI;oBACR,IAAI,CAAC,YAAY;;UAE3B,IAAI,CAAC,aAAa,EAAE;;aAEjB,CAAC;IACZ,CAAC;CACF,CAAA;AApBa;IAAX,QAAQ,EAAE;2CAA4C;AAD5C,UAAU;IA/CtB,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CAAC;QACN,UAAU;QACV,UAAU;QACV,GAAG,CAAA;;UAEK,aAAa,CAAC,KAAK,wBAAwB,aAAa,CAAC,KAAK;0BAC9C,aAAa,CAAC,KAAK,oBAAoB,aAAa,CAAC,KAAK;sBAC9D,aAAa,CAAC,KAAK;sBACnB,aAAa,CAAC,KAAK;6BACZ,aAAa,CAAC,KAAK;sBAC1B,aAAa,CAAC,KAAK;6BACZ,aAAa,CAAC,KAAK;;;;;;;qBAO3B,aAAa,CAAC,KAAK;;;;;;;;;;;;qBAYnB,aAAa,CAAC,KAAK;;;;;;;;;qBASnB,aAAa,CAAC,UAAU;;;0BAGnB,aAAa,CAAC,KAAK;;GAE1C;KACF,CAAC;GACW,UAAU,CAqBtB;;AAED,eAAe,UAAU,CAAC","sourcesContent":["import { css, html, property } from \"../../_deps.js\";\nimport { godown } from \"../../decorators/godown.js\";\nimport { styles } from \"../../decorators/styles.js\";\nimport { combine, htmlSlot } 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 = \"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 `Input`.\n *\n */\n@godown(protoName)\n@styles([\n  inputStyle,\n  fieldStyle,\n  css`\n    :host {\n      --${cssGlobalVars.input}--label-width: var(--${cssGlobalVars.input}--width);\n      width: calc(var(--${cssGlobalVars.input}--width) + var(--${cssGlobalVars.input}--label-width));\n      height: var(--${cssGlobalVars.input}--height);\n      margin: var(--${cssGlobalVars.input}--outline-width);\n      border-radius: var(--${cssGlobalVars.input}--radius);\n      margin: var(--${cssGlobalVars.input}--outline-width);\n      border-radius: var(--${cssGlobalVars.input}--radius);\n      justify-content: space-between;\n      display: flex;\n    }\n\n    div {\n      height: inherit;\n      width: var(--${cssGlobalVars.input}--width);\n    }\n\n    label {\n      display: contents;\n      border-radius: inherit;\n      height: inherit;\n    }\n\n    span {\n      flex: 1;\n      white-space: nowrap;\n      width: var(--${cssGlobalVars.input}--width);\n    }\n\n    input {\n      flex: 1;\n      width: 100%;\n      height: inherit;\n      background: transparent;\n      border-radius: inherit;\n      color: var(--${cssGlobalVars.foreground});\n    }\n    .input-field {\n      background: var(--${cssGlobalVars.input}--background);\n    }\n  `,\n])\nexport class LabelInput extends GodownInput {\n  @property() variant: \"default\" | \"outline\" = \"default\";\n\n  protected render() {\n    const { makeId: htmlFor } = this;\n    return html`<label for=\"${htmlFor}\" part=\"label\">\n      <span part=\"label\">${this.label}${htmlSlot()}</span>\n      <div class=\"${combine({ \"input-field\": true, outline: this.variant === \"outline\" })}\">\n        <input\n          part=\"input\"\n          id=\"${htmlFor}\"\n          type=\"${this.type}\"\n          ?autofocus=\"${this.autofocus}\"\n          placeholder=\"${this.placeholder}\"\n          class=\"${this.type}\"\n          @input=\"${this._handleInput}\"\n        />\n        ${this._renderSuffix()}\n      </div>\n    </label>`;\n  }\n}\n\nexport default LabelInput;\n"]}

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

@@ -0,0 +1,53 @@
+import GodownInput from "../../proto/super-input.js";
+/**
+ * {@linkcode RangeInput }.
+ */
+export declare class RangeInput extends GodownInput {
+    /**
+     * Minimum value.
+     */
+    min: number;
+    /**
+     * Maximum value.
+     */
+    max: number;
+    /**
+     * Sliding step length.
+     */
+    step: number;
+    /**
+     * Enable range sliding.
+     */
+    range: boolean;
+    vertical: boolean;
+    /**
+     * When `this.range` is true, it should be [number, number], otherwise number.
+     */
+    value: number | [number, number];
+    /**
+     * The default of `this.value`.
+     */
+    default: number | [number, number];
+    _root: HTMLElement;
+    lastFocus: undefined | 1 | 2;
+    /**
+     * Returns true when the second number is greater than the first number
+     */
+    get reverse(): boolean;
+    render(): import("lit").TemplateResult<1>;
+    _handleMousedownStart(e: MouseEvent): void;
+    _handleMousedownEnd(e: MouseEvent): void;
+    setStart(value: number): void;
+    setEnd(value: number): void;
+    _computeValue(e: MouseEvent): number;
+    _handleMousedownRoot(e: MouseEvent): void;
+    createMousedownListener(mouseMoveCallback: (arg0: number) => void): (e: MouseEvent) => void;
+    createMousemoveListener(callback: (arg0: number) => void): (e: MouseEvent) => void;
+    _connectedInit(): void;
+    reset(): void;
+    swap(): void;
+    sort(): void;
+    toSorted(): number | [number, number];
+}
+export default RangeInput;
+//# sourceMappingURL=range-input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"range-input.d.ts","sourceRoot":"https://github.com/startracex/godown/tree/main/src/","sources":["web-components/input/range-input.ts"],"names":[],"mappings":"AAMA,OAAO,WAAW,MAAM,4BAA4B,CAAC;AAOrD;;GAEG;AACH,qBAoHa,UAAW,SAAQ,WAAW;IACzC;;OAEG;IACyB,GAAG,SAAK;IACpC;;OAEG;IACyB,GAAG,SAAO;IACtC;;OAEG;IACyB,IAAI,SAAK;IACrC;;OAEG;IACyC,KAAK,EAAE,OAAO,CAAC;IAEf,QAAQ,EAAE,OAAO,CAAC;IAE9D;;OAEG;IACwB,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC5D;;OAEG;IACwB,OAAO,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAEhD,KAAK,EAAE,WAAW,CAAC;IAEjC,SAAS,EAAE,SAAS,GAAG,CAAC,GAAG,CAAC,CAAC;IAE7B;;OAEG;IACH,IAAI,OAAO,YAEV;IAED,MAAM;IA6CN,qBAAqB,CAAC,CAAC,EAAE,UAAU;IAGnC,mBAAmB,CAAC,CAAC,EAAE,UAAU;IAIjC,QAAQ,CAAC,KAAK,EAAE,MAAM;IAMtB,MAAM,CAAC,KAAK,EAAE,MAAM;IAMpB,aAAa,CAAC,CAAC,EAAE,UAAU;IAY3B,oBAAoB,CAAC,CAAC,EAAE,UAAU;IAWlC,uBAAuB,CAAC,iBAAiB,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,OACpD,UAAU;IAavB,uBAAuB,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,OAC3C,UAAU;IASvB,cAAc;IAcd,KAAK;IAIL,IAAI;IAOJ,IAAI;IAIJ,QAAQ,IAAI,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC;CAOtC;AAED,eAAe,UAAU,CAAC"}

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

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