@statistikzh/leu 0.10.0 → 0.11.0

package/dist/leu-input.js

@@ -1,5 +1,5 @@
 import { LeuInput } from './Input.js';
-import './LeuElement-6fbc0dee.js';
+import './LeuElement-78b4a998.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';

package/dist/leu-menu-item.js

@@ -1,5 +1,5 @@
 import { LeuMenuItem } from './MenuItem.js';
-import './LeuElement-6fbc0dee.js';
+import './LeuElement-78b4a998.js';
 import 'lit';
 import 'lit/directives/if-defined.js';
 import './Icon.js';

package/dist/leu-menu.js

@@ -1,5 +1,5 @@
 import { LeuMenu } from './Menu.js';
-import './LeuElement-6fbc0dee.js';
+import './LeuElement-78b4a998.js';
 import 'lit';
 import './MenuItem.js';
 import 'lit/directives/if-defined.js';

package/dist/leu-pagination.js

@@ -1,12 +1,12 @@
 import { LeuPagination } from './Pagination.js';
-import './LeuElement-6fbc0dee.js';
+import './LeuElement-78b4a998.js';
 import 'lit';
 import 'lit/directives/live.js';
 import './Button.js';
 import 'lit/directives/class-map.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';
-import './hasSlotController-04d0dfa2.js';
+import './hasSlotController-fd1950b4.js';
 import './VisuallyHidden.js';
 
 LeuPagination.define("leu-pagination");

package/dist/leu-popup.js

@@ -1,5 +1,5 @@
 import { LeuPopup } from './Popup.js';
-import './LeuElement-6fbc0dee.js';
+import './LeuElement-78b4a998.js';
 import 'lit';
 import '@floating-ui/dom';
 

package/dist/leu-radio-group.js

@@ -1,5 +1,5 @@
 import { LeuRadioGroup } from './RadioGroup.js';
-import './LeuElement-6fbc0dee.js';
+import './LeuElement-78b4a998.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 

package/dist/leu-radio.js

@@ -1,5 +1,5 @@
 import { LeuRadio } from './Radio.js';
-import './LeuElement-6fbc0dee.js';
+import './LeuElement-78b4a998.js';
 import 'lit';
 
 LeuRadio.define("leu-radio");

package/dist/leu-range.d.ts

@@ -0,0 +1,3 @@
+export { LeuRange };
+import { LeuRange } from './Range.js';
+//# sourceMappingURL=leu-range.d.ts.map

package/dist/leu-range.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"leu-range.d.ts","sourceRoot":"","sources":["leu-range.js"],"names":[],"mappings":";yBAAyB,YAAY"}

package/dist/leu-range.js

@@ -0,0 +1,7 @@
+import { LeuRange } from './Range.js';
+import './LeuElement-78b4a998.js';
+import 'lit';
+
+LeuRange.define("leu-range");
+
+export { LeuRange };

package/dist/leu-scroll-top.js

@@ -1,11 +1,11 @@
 import { LeuScrollTop } from './ScrollTop.js';
-import './LeuElement-6fbc0dee.js';
+import './LeuElement-78b4a998.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import './Button.js';
 import 'lit/directives/if-defined.js';
 import './Icon.js';
-import './hasSlotController-04d0dfa2.js';
+import './hasSlotController-fd1950b4.js';
 import './utils-65469421.js';
 
 LeuScrollTop.define("leu-scroll-top");

package/dist/leu-select.js

@@ -1,10 +1,10 @@
 import { LeuSelect } from './Select.js';
-import './LeuElement-6fbc0dee.js';
+import './LeuElement-78b4a998.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/ref.js';
 import 'lit/directives/if-defined.js';
-import './hasSlotController-04d0dfa2.js';
+import './hasSlotController-fd1950b4.js';
 import './Button.js';
 import './Icon.js';
 import './Menu.js';

package/dist/leu-spinner.js

@@ -1,5 +1,5 @@
 import { LeuSpinner } from './Spinner.js';
-import './LeuElement-6fbc0dee.js';
+import './LeuElement-78b4a998.js';
 import 'lit';
 
 LeuSpinner.define("leu-spinner");

package/dist/leu-table.js

@@ -1,5 +1,5 @@
 import { LeuTable } from './Table.js';
-import './LeuElement-6fbc0dee.js';
+import './LeuElement-78b4a998.js';
 import 'lit';
 import 'lit/directives/class-map.js';
 import 'lit/directives/style-map.js';
@@ -9,7 +9,7 @@ import './Pagination.js';
 import 'lit/directives/live.js';
 import './Button.js';
 import 'lit/directives/if-defined.js';
-import './hasSlotController-04d0dfa2.js';
+import './hasSlotController-fd1950b4.js';
 import './VisuallyHidden.js';
 
 LeuTable.define("leu-table");

package/dist/leu-visually-hidden.js

@@ -1,5 +1,5 @@
 import { LeuVisuallyHidden } from './VisuallyHidden.js';
-import './LeuElement-6fbc0dee.js';
+import './LeuElement-78b4a998.js';
 import 'lit';
 
 LeuVisuallyHidden.define("leu-visually-hidden");

package/dist/vscode.html-custom-data.json

@@ -557,6 +557,26 @@
         }
       ]
     },
+    {
+      "name": "leu-range",
+      "description": "\n---\n\n\n### **Methods:**\n - **_handlePointerDown(e: _PointerEvent & {target: HTMLInputElement}_)** - Determine if the \"click\" (pointer event) is closer the\nthe value of the other input element. Swap the values if this is the case.",
+      "attributes": [
+        { "name": "value", "values": [{ "name": "array" }] },
+        { "name": "min", "values": [] },
+        { "name": "max", "values": [] },
+        { "name": "step", "values": [] },
+        { "name": "name", "values": [] },
+        { "name": "label", "values": [] },
+        { "name": "disabled", "values": [] },
+        { "name": "multiple", "values": [] }
+      ],
+      "references": [
+        {
+          "name": "Documentation",
+          "url": "https://statistikzh.github.io/leu/?path=/story/range"
+        }
+      ]
+    },
     {
       "name": "leu-scroll-top",
       "description": "\n---\n",

package/dist/vue/index.d.ts

@@ -20,6 +20,7 @@ import type { LeuPagination, CustomEvent } from "../Pagination.js";
 import type { LeuPopup } from "../Popup.js";
 import type { LeuRadio } from "../Radio.js";
 import type { LeuRadioGroup } from "../RadioGroup.js";
+import type { LeuRange } from "../Range.js";
 import type { LeuScrollTop } from "../ScrollTop.js";
 import type { LeuSelect } from "../Select.js";
 import type { LeuSpinner } from "../Spinner.js";
@@ -360,6 +361,35 @@ type LeuRadioGroupProps = {
   items?: LeuRadioGroup["items"];
 };
 
+type LeuRangeProps = {
+  /**  */
+  value?: LeuRange["defaultValue"];
+  /**  */
+  min?: LeuRange["min"];
+  /**  */
+  max?: LeuRange["max"];
+  /**  */
+  step?: LeuRange["step"];
+  /**  */
+  name?: LeuRange["name"];
+  /**  */
+  label?: LeuRange["label"];
+  /**  */
+  disabled?: LeuRange["disabled"];
+  /**  */
+  multiple?: LeuRange["multiple"];
+  /** Sets the value of the underlying input element(s).
+The value has to be an array if "multiple" range is used.
+Otherwise it has to be a string. */
+  value?: LeuRange["value"];
+  /**  */
+  valueAsArray?: LeuRange["valueAsArray"];
+  /**  */
+  valueLow?: LeuRange["valueLow"];
+  /**  */
+  valueHigh?: LeuRange["valueHigh"];
+};
+
 type LeuScrollTopProps = {
   /**  */
   _showButton?: LeuScrollTop["_showButton"];
@@ -672,6 +702,17 @@ export type CustomElements = {
    */
   "leu-radio-group": DefineComponent<LeuRadioGroupProps>;
 
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Methods:**
+   *  - **_handlePointerDown(e: _PointerEvent & {target: HTMLInputElement}_)** - Determine if the "click" (pointer event) is closer the
+   * the value of the other input element. Swap the values if this is the case.
+   */
+  "leu-range": DefineComponent<LeuRangeProps>;
+
   /**
    *
    * ---

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@statistikzh/leu",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -1063,6 +1063,50 @@
             "events": []
           }
         },
+        {
+          "name": "leu-range",
+          "description": "\n---\n\n\n### **Methods:**\n - **_handlePointerDown(e: _PointerEvent & {target: HTMLInputElement}_)** - Determine if the \"click\" (pointer event) is closer the\nthe value of the other input element. Swap the values if this is the case.",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "value": { "type": "array", "default": "[50]" }
+            },
+            { "name": "min", "value": { "type": "number", "default": "0" } },
+            { "name": "max", "value": { "type": "number", "default": "100" } },
+            { "name": "step", "value": { "type": "number", "default": "1" } },
+            {
+              "name": "name",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "label",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "disabled",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "multiple",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "value", "value": { "type": "array" } },
+              { "name": "min", "value": { "type": "number" } },
+              { "name": "max", "value": { "type": "number" } },
+              { "name": "step", "value": { "type": "number" } },
+              { "name": "name", "value": { "type": "string" } },
+              { "name": "label", "value": { "type": "string" } },
+              { "name": "disabled", "value": { "type": "boolean" } },
+              { "name": "multiple", "value": { "type": "boolean" } }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "leu-scroll-top",
           "description": "\n---\n",

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.10.0",
+  "version": "0.11.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/components/range/Range.js

@@ -0,0 +1,237 @@
+import { html } from "lit"
+
+import styles from "./range.css"
+import { LeuElement } from "../../lib/LeuElement.js"
+
+const defaultValueConverter = {
+  fromAttribute(value) {
+    return value.split(",").map((v) => Number(v.trim()))
+  },
+  toAttribute(value) {
+    return value.join(",")
+  },
+}
+
+const RANGE_LABELS = ["Von", "Bis"]
+
+/**
+ * @tagname leu-range
+ */
+export class LeuRange extends LeuElement {
+  static styles = styles
+
+  static shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static properties = {
+    defaultValue: { converter: defaultValueConverter, attribute: "value" },
+    min: { type: Number, reflect: true },
+    max: { type: Number, reflect: true },
+    step: { type: Number, reflect: true },
+    name: { type: String, reflect: true },
+    label: { type: String, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    multiple: { type: Boolean, reflect: true },
+  }
+
+  constructor() {
+    super()
+    this.defaultValue = [50]
+    this.min = 0
+    this.max = 100
+    this.step = 1
+    this.name = ""
+    this.label = ""
+    this.disabled = false
+    this.multiple = false
+  }
+
+  updated() {
+    this._updateStyles()
+  }
+
+  _updateStyles() {
+    const normalizedRange = this._getNormalizedRange()
+    this.style.setProperty("--low", normalizedRange[0].toString())
+    this.style.setProperty("--high", normalizedRange[1].toString())
+
+    const inputs = this.multiple
+      ? [this._getBaseInput(), this._getGhostInput()]
+      : [this._getBaseInput()]
+
+    inputs.forEach((input) => {
+      /** @type {HTMLOutputElement} */
+      const output = this.shadowRoot.querySelector(`.output[for=${input.id}]`)
+      const normalizedValue = this._getNormalizedValue(input.valueAsNumber)
+      output.style.setProperty("--value", normalizedValue.toString())
+      output.value = input.value
+    })
+  }
+
+  get value() {
+    const inputs = Array.from(this.shadowRoot.querySelectorAll("input"))
+    return inputs.map((input) => input.value).join(",")
+  }
+
+  /**
+   * Sets the value of the underlying input element(s).
+   * The value has to be an array if "multiple" range is used.
+   * Otherwise it has to be a string.
+   * @param {string | Array} value
+   */
+  set value(value) {
+    if (this.multiple && Array.isArray(value)) {
+      const inputs = Array.from(this.shadowRoot.querySelectorAll("input"))
+      value.forEach((v, i) => {
+        inputs[i].value = v
+      })
+      this._updateStyles()
+    } else if (!this.multiple) {
+      this._getBaseInput().value = value
+      this._updateStyles()
+    }
+  }
+
+  get valueAsArray() {
+    return Array.from(this.shadowRoot.querySelectorAll("input")).map(
+      (input) => input.valueAsNumber
+    )
+  }
+
+  get valueLow() {
+    const inputs = Array.from(this.shadowRoot.querySelectorAll("input"))
+
+    if (this.multiple) {
+      return inputs.map((input) => input.valueAsNumber).sort((a, b) => a - b)[0]
+    }
+
+    return inputs[0].value
+  }
+
+  get valueHigh() {
+    const inputs = Array.from(this.shadowRoot.querySelectorAll("input"))
+
+    if (this.multiple) {
+      return inputs.map((input) => input.valueAsNumber).sort((a, b) => a - b)[1]
+    }
+
+    return inputs[0].value
+  }
+
+  /**
+   * @returns {HTMLInputElement | null}
+   */
+  _getBaseInput() {
+    return this.shadowRoot.querySelector(".range--base")
+  }
+
+  /**
+   * @returns {HTMLInputElement | null}
+   */
+  _getGhostInput() {
+    return this.shadowRoot.querySelector(".range--ghost")
+  }
+
+  /**
+   *
+   * @param {number} _index
+   * @param {InputEvent & {target: HTMLInputElement}} _e
+   */
+  _handleInput(_index, _e) {
+    this._updateStyles()
+  }
+
+  /**
+   *
+   * @param {number} value
+   * @returns {number}
+   */
+  _getNormalizedValue(value) {
+    return (value - this.min) / (this.max - this.min)
+  }
+
+  _getNormalizedRange() {
+    if (this.multiple) {
+      return this.valueAsArray
+        .map((value) => this._getNormalizedValue(value))
+        .sort((a, b) => a - b)
+    }
+
+    return [0, this._getNormalizedValue(this.valueAsArray[0])]
+  }
+
+  /**
+   * Determine if the "click" (pointer event) is closer the
+   * the value of the other input element. Swap the values if this is the case.
+   * @param {PointerEvent & {target: HTMLInputElement}} e
+   */
+  _handlePointerDown(e) {
+    const clickValue =
+      this.min + ((this.max - this.min) * e.offsetX) / this.offsetWidth
+    const middleValue = (this.valueAsArray[0] + this.valueAsArray[1]) / 2
+
+    if (
+      (e.target.valueAsNumber === this.valueLow) ===
+      clickValue > middleValue
+    ) {
+      /**
+       * As the pointerdown event is fired before the input event, we first overwrite the value
+       * of the input element that was not clicked on. The active input element will update itself.
+       */
+      // this._value = [e.target.valueAsNumber, e.target.valueAsNumber]
+      this._getGhostInput().value = e.target.value
+    }
+  }
+
+  render() {
+    const inputs = this.multiple ? ["base", "ghost"] : ["base"]
+
+    const { multiple, disabled, label, defaultValue } = this
+
+    return html`
+      <div
+        role=${multiple ? "group" : undefined}
+        aria-labelledby=${multiple ? "group-label" : undefined}
+      >
+        ${multiple
+          ? html`<span id="group-label" class="label">${label}</span>`
+          : html`<label for="input-base" class="label">${label}</label>`}
+        <div class="outputs">
+          ${inputs.map(
+            (type, index) =>
+              html`<output
+                class="output"
+                for="input-${type}"
+                value=${defaultValue[index]}
+              ></output>`
+          )}
+        </div>
+        <div class="inputs">
+          ${inputs.map(
+            (type, index) =>
+              html`
+                <input
+                  @input=${(e) => this._handleInput(index, e)}
+                  @pointerdown=${multiple && !disabled && index === 0
+                    ? this._handlePointerDown
+                    : undefined}
+                  type="range"
+                  class="range range--${type}"
+                  id="input-${type}"
+                  name=${this.name}
+                  min=${this.min}
+                  max=${this.max}
+                  step=${this.step}
+                  aria-label=${multiple ? RANGE_LABELS[index] : undefined}
+                  ?disabled=${disabled}
+                  .value=${defaultValue[index].toString()}
+                />
+              `
+          )}
+        </div>
+      </div>
+    `
+  }
+}

package/src/components/range/leu-range.js

@@ -0,0 +1,5 @@
+import { LeuRange } from "./Range.js"
+
+export { LeuRange }
+
+LeuRange.define("leu-range")