@statistikzh/leu 0.24.2 → 0.26.0

package/dist/Range-B72rtfln.js

@@ -0,0 +1,496 @@
+import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { n as isNumber, t as clamp } from "./utils-hfk5Nwy8.js";
+import { css, html, nothing } from "lit";
+import { property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/range/range.css?inline
+var range_default = css`:host {
+  --range-color: var(--leu-color-black-40);
+  --range-color-disabled: var(--leu-color-black-20);
+  --range-color-focus: var(--leu-color-func-cyan);
+
+  --range-track-background-color: var(--leu-color-black-10);
+  --range-track-height: 4px;
+  --range-track-radius: var(--range-track-height);
+
+  --range-track-value-color: var(--leu-color-func-cyan);
+  --range-track-value-width: 0;
+  --range-track-value-min: 0;
+
+  --range-thumb-color: var(--leu-color-black-0);
+  --range-thumb-border-color: var(--range-color);
+  --range-thumb-hover-border-color: var(--leu-color-black-100);
+  --range-thumb-diameter: 32px;
+
+  --range-value-color: var(--leu-color-black-100);
+  --range-value-color-disabled: var(--range-color-disabled);
+
+  --range-font-regular: var(--leu-font-family-regular);
+  --range-font-black: var(--leu-font-family-black);
+
+  display: block;
+
+  font-family: var(--range-font-regular);
+}
+
+:host([disabled]) {
+  --range-track-background: var(--range-color-disabled);
+  --range-track-value-color: var(--range-color-disabled);
+  --range-thumb-border-color: var(--range-color-disabled);
+  --range-thumb-hover-border-color: var(--range-color-disabled);
+  --range-value-color: var(--range-value-color-disabled);
+}
+
+.container {
+  position: relative;
+}
+
+.label {
+  display: inline-block;
+  margin-bottom: 0.5rem;
+  color: var(--leu-color-black-100);
+  font: var(--leu-t-regular-regular-font);
+}
+
+:host([hide-label]) .label {
+  clip: rect(0 0 0 0);
+  border: 0;
+  height: 1px;
+  margin: -1px !important;
+  overflow: hidden;
+  padding: 0 !important;
+  position: absolute;
+  width: 1px;
+}
+
+.outputs {
+  position: relative;
+  height: 1.5rem;
+  margin-bottom: 0.25rem;
+}
+
+.output {
+  position: absolute;
+
+  text-align: center;
+  font: var(--leu-t-tiny-black-font);
+  color: var(--range-value-color);
+
+  min-width: var(--range-thumb-diameter);
+
+  --_stop: calc(100% - var(--range-thumb-diameter));
+  --_start: 0%;
+
+  left: calc(var(--value) * (var(--_stop) - 0%) + 0%);
+
+  left: calc(var(--value) * (var(--_stop) - var(--_start)) + var(--_start));
+  transform: translateX(calc(-50% + var(--range-thumb-diameter) / 2));
+}
+
+.inputs {
+  position: relative;
+  z-index: 1;
+  height: var(--range-thumb-diameter);
+}
+
+.range {
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  width: 100%;
+  height: var(--range-thumb-diameter);
+  padding: 0;
+  margin: 0;
+  background: transparent;
+
+  --_track-background: linear-gradient(
+    to right,
+    var(--range-track-background-color) calc(var(--low) * 100%),
+    var(--range-track-value-color) 0,
+    var(--range-track-value-color) calc(var(--high) * 100%),
+    var(--range-track-background-color) 0
+  );
+}
+
+.range--ghost {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  pointer-events: none;
+}
+
+.range:focus {
+  outline: none;
+}
+
+/* Thumb */
+
+.range::-moz-range-thumb {
+  cursor: pointer;
+  background: var(--range-thumb-color);
+
+  border: 2px var(--range-thumb-border-color) solid;
+  border-radius: 50%;
+
+  height: var(--range-thumb-diameter);
+  width: var(--range-thumb-diameter);
+
+  pointer-events: all;
+}
+
+.range:disabled::-moz-range-thumb {
+  cursor: not-allowed;
+}
+
+.range:focus-visible::-moz-range-thumb {
+  outline: 2px solid var(--range-color-focus);
+  outline-offset: 2px;
+}
+
+.range::-moz-range-thumb:hover,
+.range:focus-visible::-moz-range-thumb {
+  border-color: var(--range-thumb-hover-border-color);
+}
+
+.range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+          appearance: none;
+  cursor: pointer;
+  background: var(--range-thumb-color);
+
+  border: 2px var(--range-thumb-border-color) solid;
+  border-radius: 50%;
+
+  height: var(--range-thumb-diameter);
+  width: var(--range-thumb-diameter);
+  margin-top: calc(var(--range-thumb-diameter) / -2 + 2px);
+
+  pointer-events: all;
+}
+
+.range:disabled::-webkit-slider-thumb {
+  cursor: not-allowed;
+}
+
+.range:focus::-webkit-slider-thumb {
+  outline: 2px solid var(--range-color-focus);
+  outline-offset: 2px;
+}
+
+.range:focus::-webkit-slider-thumb,
+.range::-webkit-slider-thumb:hover {
+  border-color: var(--range-thumb-hover-border-color);
+}
+
+/* Track */
+
+.range::-moz-range-track {
+  background: var(--_track-background);
+  border-radius: var(--range-track-radius);
+  height: var(--range-track-height);
+}
+
+.range--ghost::-moz-range-track {
+  background: transparent;
+}
+
+.range::-webkit-slider-runnable-track {
+  background: var(--_track-background);
+  border-radius: var(--range-track-radius);
+  height: var(--range-track-height);
+}
+
+.range--ghost::-webkit-slider-runnable-track {
+  background: transparent;
+}
+
+/* Ticks */
+
+.ticks {
+  position: absolute;
+  top: calc(
+    var(--range-thumb-diameter) / 2 + var(--range-track-height)
+  );
+  left: calc(var(--range-thumb-diameter) / 2);
+  right: calc(var(--range-thumb-diameter) / 2);
+}
+
+.tick {
+  z-index: -1;
+  position: absolute;
+  top: 50%;
+  width: 2px;
+  height: 0.5rem;
+  background-color: var(--range-track-background-color);
+  transform: translateY(-50%);
+}
+
+.tick-labels {
+  display: flex;
+  justify-content: space-between;
+  color: var(--leu-color-black-60);
+  font: var(--leu-t-tiny-regular-font);
+  margin-top: 0.25rem;
+}
+
+.tick-label--max {
+  text-align: right;
+}
+`;
+//#endregion
+//#region src/components/range/Range.ts
+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
+*/
+var LeuRange = class extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this.defaultValue = [50];
+		this.min = 0;
+		this.max = 100;
+		this.step = 1;
+		this.name = "";
+		this.label = "";
+		this.hideLabel = false;
+		this.disabled = false;
+		this.multiple = false;
+		this.showTicks = false;
+		this.showRangeLabels = false;
+		this.prefix = "";
+		this.suffix = "";
+		this._value = this.defaultValue.map((v) => this.clampAndRoundValue(v));
+	}
+	static {
+		this.styles = [LeuElement.styles, range_default];
+	}
+	static {
+		this.shadowRootOptions = {
+			...LeuElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	/**
+	* The value of the range slider.
+	* String input is parsed as a comma-separated list of numbers.
+	* In multiple mode, if only a single value is provided, the second handle will be set to the minimum value.
+	* In single mode, only the first value will be used.
+	*/
+	set value(value) {
+		let nextValue = [];
+		if (typeof value === "string") nextValue = value.split(",").map((v) => Number(v.trim())).filter(isNumber);
+		else if (isNumber(value)) nextValue = [value];
+		else if (Array.isArray(value)) nextValue = value.map((v) => Number(v)).filter(isNumber);
+		if (nextValue.length === 0) return;
+		if (this.multiple && nextValue.length === 1) nextValue.unshift(this.min);
+		this._value = nextValue.slice(0, this.multiple ? 2 : 1).map((v) => this.clampAndRoundValue(v));
+	}
+	get value() {
+		return this._value.join(",");
+	}
+	get valueAsArray() {
+		return this._value.slice();
+	}
+	get valueLow() {
+		return Math.min(...this._value);
+	}
+	get valueHigh() {
+		return Math.max(...this._value);
+	}
+	updated() {
+		this.updateStyles();
+	}
+	willUpdate(changedProperties) {
+		if (changedProperties.has("defaultValue")) this.value = this.defaultValue.map((v) => this.clampAndRoundValue(v));
+		if (changedProperties.has("min") || changedProperties.has("max") || changedProperties.has("step")) this._value = this._value.map((v) => this.clampAndRoundValue(v));
+		if (changedProperties.has("multiple") && this.multiple) {
+			if (this._value.length === 1) this._value = [this.min, this._value[0]];
+		} else if (changedProperties.has("multiple") && !this.multiple) this._value = [this.valueLow];
+	}
+	updateStyles() {
+		const normalizedRange = this.getNormalizedRange();
+		this.container?.style.setProperty("--low", normalizedRange[0].toString());
+		this.container?.style.setProperty("--high", normalizedRange[1].toString());
+		(this.multiple ? [this.inputBase, this.inputGhost] : [this.inputBase]).forEach((input) => {
+			const output = input.id === "input-base" ? this.outputBase : this.outputGhost;
+			const normalizedValue = this.getNormalizedValue(input.valueAsNumber);
+			output.style.setProperty("--value", normalizedValue.toString());
+			output.value = this.formatValue(input.valueAsNumber);
+		});
+	}
+	clampAndRoundValue(value) {
+		const clampedValue = clamp(value, this.min, this.max);
+		return Math.round((clampedValue - this.min) / this.step) * this.step + this.min;
+	}
+	handleInput(e) {
+		e.stopPropagation();
+		if (this.multiple) this.value = [this.inputBase.valueAsNumber, this.inputGhost.valueAsNumber];
+		else this.value = [this.inputBase.valueAsNumber];
+		this.dispatchEvent(new CustomEvent("input", {
+			composed: true,
+			bubbles: true,
+			detail: {
+				value: this.value,
+				valueAsArray: this.valueAsArray
+			}
+		}));
+	}
+	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])];
+	}
+	/**
+	* This event handler is only applied to the "base" input element and only when in "multiple" mode.
+	* It handles pointer events on the *track* and the thumb.
+	* This method determines if the interaction was closer to the base or the ghost input.
+	*/
+	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.inputGhost.value = e.target.value;
+	}
+	formatValue(value) {
+		if (this.valueFormatter) return this.valueFormatter(value);
+		return `${this.prefix}${value}${this.suffix}`;
+	}
+	renderTicks() {
+		if (!this.showTicks) return nothing;
+		return html`<div class="ticks">
+      ${Array.from({ length: (this.max - this.min) / this.step + 1 }, (_, i) => this.min + i * this.step).map((tick) => html`<span
+            class="tick"
+            style="left: ${this.getNormalizedValue(tick) * 100}%"
+          ></span>`)}
+    </div>`;
+	}
+	render() {
+		const inputs = this.multiple ? ["base", "ghost"] : ["base"];
+		const { multiple, disabled, label, valueAsArray } = this;
+		return html`
+      <div
+        id="container"
+        class="container"
+        role=${ifDefined(multiple ? "group" : void 0)}
+        aria-labelledby=${ifDefined(multiple ? "group-label" : void 0)}
+      >
+        ${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=${this.formatValue(valueAsArray[index])}
+              ></output>`)}
+        </div>
+        <div class="inputs">
+          ${inputs.map((type, index) => html`
+              <input
+                @input=${this.handleInput}
+                @pointerdown=${multiple && !disabled && index === 0 ? this.handlePointerDown : void 0}
+                type="range"
+                class="range range--${type}"
+                id="input-${type}"
+                name=${this.name}
+                min=${this.min}
+                max=${this.max}
+                step=${this.step}
+                aria-label=${ifDefined(multiple ? RANGE_LABELS[index] : void 0)}
+                ?disabled=${disabled}
+                .value=${valueAsArray[index].toString()}
+              />
+            `)}
+          ${this.renderTicks()}
+        </div>
+      </div>
+      ${this.showRangeLabels ? html`<div class="tick-labels">
+            <span class="tick-label tick-label--min"
+              >${this.formatValue(this.min)}</span
+            >
+            <span class="tick-label tick-label--max"
+              >${this.formatValue(this.max)}</span
+            >
+          </div>` : nothing}
+    `;
+	}
+};
+__decorate([property({
+	converter: defaultValueConverter,
+	attribute: "value",
+	reflect: true
+})], LeuRange.prototype, "defaultValue", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], LeuRange.prototype, "min", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], LeuRange.prototype, "max", void 0);
+__decorate([property({
+	type: Number,
+	reflect: true
+})], LeuRange.prototype, "step", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuRange.prototype, "name", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuRange.prototype, "label", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "hide-label"
+})], LeuRange.prototype, "hideLabel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuRange.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuRange.prototype, "multiple", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "show-ticks"
+})], LeuRange.prototype, "showTicks", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "show-range-labels"
+})], LeuRange.prototype, "showRangeLabels", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuRange.prototype, "prefix", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuRange.prototype, "suffix", void 0);
+__decorate([property({ attribute: false })], LeuRange.prototype, "valueFormatter", void 0);
+__decorate([property({ attribute: false })], LeuRange.prototype, "value", null);
+__decorate([query("#container")], LeuRange.prototype, "container", void 0);
+__decorate([query("#input-base")], LeuRange.prototype, "inputBase", void 0);
+__decorate([query("#input-ghost")], LeuRange.prototype, "inputGhost", void 0);
+__decorate([query("output[for=input-base]")], LeuRange.prototype, "outputBase", void 0);
+__decorate([query("output[for=input-ghost]")], LeuRange.prototype, "outputGhost", void 0);
+//#endregion
+export { LeuRange as t };