@statistikzh/leu 0.24.1 → 0.25.0

package/dist/Range.js

@@ -1,587 +1,3 @@
-import { _ as __decorate } from './_tslib-CNEFicEt.js';
-import { css, nothing, html } from 'lit';
-import { property, query } from 'lit/decorators.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { L as LeuElement } from './LeuElement-jrR2M5pZ.js';
-import { i as isNumber, c as clamp } from './utils-DBGsNSJW.js';
-
-var css_248z = 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;
-}
-`;
-
-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
- */
-class LeuRange extends LeuElement {
-    constructor() {
-        super(...arguments);
-        /**
-         * The default value of the range slider.
-         * String input is parsed as a comma-separated list of numbers.
-         */
-        this.defaultValue = [50];
-        /**
-         * The minimum value of the range slider.
-         */
-        this.min = 0;
-        /**
-         * The maximum value of the range slider.
-         */
-        this.max = 100;
-        /**
-         * The step size of the range slider.
-         */
-        this.step = 1;
-        this.name = "";
-        /**
-         * The label of the range slider.
-         */
-        this.label = "";
-        /**
-         * Whether to hide the label of the range slider.
-         * If true, the label will still be available for screen readers
-         * and is only visually hidden.
-         */
-        this.hideLabel = false;
-        /**
-         * Whether the range slider is disabled.
-         */
-        this.disabled = false;
-        /**
-         * Whether to use a range with two handles.
-         */
-        this.multiple = false;
-        /**
-         * Wheter to show tick marks below the range slider.
-         * One tick mark per step will be rendered.
-         */
-        this.showTicks = false;
-        /**
-         * Whether to show the min and max labels below the range slider.
-         */
-        this.showRangeLabels = false;
-        /**
-         * A prefix to display before the value in the output element(s).
-         * Is ignored if a custom valueFormatter is provided.
-         */
-        this.prefix = "";
-        /**
-         * A suffix to display after the value in the output element(s).
-         * Is ignored if a custom valueFormatter is provided.
-         */
-        this.suffix = "";
-        this._value = this.defaultValue.map((v) => this.clampAndRoundValue(v));
-    }
-    /**
-     * 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;
-        }
-        // In multiple mode, we need to ensure that we always have two values.
-        // `min` is a fallback for the second value.
-        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) {
-        // Reflect defaultValue changes to the value property
-        // to ensure backwards compatibility with previous versions
-        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) {
-            // When switching to multiple mode, ensure that we have two values
-            if (this._value.length === 1) {
-                this._value = [this.min, this._value[0]];
-            }
-        }
-        else if (changedProperties.has("multiple") && !this.multiple) {
-            // When switching to single mode, keep only the lower value
-            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());
-        const inputs = this.multiple
-            ? [this.inputBase, this.inputGhost]
-            : [this.inputBase];
-        inputs.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);
-        const roundedValue = Math.round((clampedValue - this.min) / this.step) * this.step + this.min;
-        return roundedValue;
-    }
-    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" : undefined)}
-        aria-labelledby=${ifDefined(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=${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
-            : undefined}
-                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] : undefined)}
-                ?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}
-    `;
-    }
-}
-LeuRange.styles = [LeuElement.styles, css_248z];
-LeuRange.shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-};
-__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);
-
+import "./LeuElement-B7NJzWwP.js";
+import { t as LeuRange } from "./Range-DoW_ZdKm.js";
 export { LeuRange };

package/dist/ScrollTop-DxChetWq.js

@@ -0,0 +1,130 @@
+import { t as LeuElement } from "./LeuElement-B7NJzWwP.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { t as LeuIcon } from "./Icon-DhAvH0XM.js";
+import { t as LeuButton } from "./Button-EdS9xr2J.js";
+import { r as throttle } from "./utils-hfk5Nwy8.js";
+import { css, html } from "lit";
+import { state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+//#region src/components/scroll-top/scroll-top.css?inline
+var scroll_top_default = css`.scroll-top {
+  overflow: hidden;
+  position: fixed;
+  z-index: var(--leu-z-index-scroll-top);
+
+  --_space: 1.5rem;
+  right: 1.5rem;
+  right: var(--_space);
+  bottom: 1.5rem;
+  bottom: var(--_space);
+
+  /* show */
+  height: 3rem;
+  pointer-events: auto;
+  transition: height, bottom 0.9s, 0.6s ease;
+}
+@media (min-width: 600px) {
+.scroll-top {
+    --_space: 2rem;
+}
+  }
+@media (min-width: 1024px) {
+.scroll-top {
+    --_space: 2.5rem;
+}
+  }
+@media (min-width: 1280px) {
+.scroll-top {
+    --_space: 3rem;
+}
+  }
+.hide {
+  height: 0;
+  pointer-events: none;
+  transition: height, top 0.9s, 0.6s ease;
+}
+@keyframes hide-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(90deg);
+  }
+}
+.hide leu-button {
+  animation-name: hide-animation;
+  animation-duration: 0.45s;
+  animation-timing-function: ease;
+}
+`;
+//#endregion
+//#region src/components/scroll-top/ScrollTop.ts
+/**
+* @tagname leu-scroll-top
+*/
+var LeuScrollTop = class LeuScrollTop extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this._showButton = false;
+		this._prevYPos = 0;
+		this._scrollDown = false;
+		this.scroll = () => {
+			const delta = window.scrollY - this._prevYPos;
+			if (this._scrollDown) {
+				if (delta < 0) this._scrollDown = false;
+			} else if (delta > 0) this._scrollDown = true;
+			/**
+			* Only show the button when
+			* ... the current scroll position is greater than the window height (below-the-fold) and when
+			* ... scrolling up
+			*/
+			this._showButton = window.scrollY > window.innerHeight && !this._scrollDown;
+			this._prevYPos = window.scrollY;
+		};
+	}
+	static {
+		this.dependencies = {
+			"leu-button": LeuButton,
+			"leu-icon": LeuIcon
+		};
+	}
+	static {
+		this.styles = [LeuElement.styles, scroll_top_default];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._scrollListener = throttle(this.scroll, 100);
+		document.addEventListener("scroll", this._scrollListener, true);
+	}
+	disconnectedCallback() {
+		document.removeEventListener("scroll", this._scrollListener, true);
+		super.disconnectedCallback();
+	}
+	static scrollToTop() {
+		window.scrollTo({
+			top: 0,
+			left: 0,
+			behavior: "smooth"
+		});
+	}
+	render() {
+		return html`
+      <div class=${classMap({
+			"scroll-top": true,
+			hide: !this._showButton
+		})}>
+        <leu-button
+          label="Zum Seitenanfang"
+          round
+          @click="${() => LeuScrollTop.scrollToTop()}"
+        >
+          <leu-icon name="arrowUp"></leu-icon>
+        </leu-button>
+      </div>
+    `;
+	}
+};
+__decorate([state()], LeuScrollTop.prototype, "_showButton", void 0);
+//#endregion
+export { LeuScrollTop as t };