@statistikzh/leu 0.14.3 → 0.15.0

package/dist/Range.js

@@ -1,5 +1,5 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-Dd6zm9XF.js';
 import { css, html } from 'lit';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
 
 var css_248z = css`:host {
   --range-color: var(--leu-color-black-40);
@@ -189,168 +189,166 @@ var css_248z = css`:host {
 `;
 
 const defaultValueConverter = {
-  fromAttribute(value) {
-    return value.split(",").map(v => Number(v.trim()));
-  },
-  toAttribute(value) {
-    return value.join(",");
-  }
+    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();
-    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();
+    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 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];
+    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;
     }
-    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];
+    /**
+     * @returns {HTMLInputElement | null}
+     */
+    _getBaseInput() {
+        return this.shadowRoot.querySelector(".range--base");
     }
-    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);
+    /**
+     * @returns {HTMLInputElement | null}
+     */
+    _getGhostInput() {
+        return this.shadowRoot.querySelector(".range--ghost");
     }
-    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;
+    /**
+     *
+     * @param {number} _index
+     * @param {InputEvent & {target: HTMLInputElement}} _e
+     */
+    _handleInput(_index, _e) {
+        this._updateStyles();
     }
-  }
-  render() {
-    const inputs = this.multiple ? ["base", "ghost"] : ["base"];
-    const {
-      multiple,
-      disabled,
-      label,
-      defaultValue
-    } = this;
-    return html`
+    /**
+     *
+     * @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>`}
+        ${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
+          ${inputs.map((type, index) => html `<output
                 class="output"
                 for="input-${type}"
                 value=${defaultValue[index]}
               ></output>`)}
         </div>
         <div class="inputs">
-          ${inputs.map((type, index) => html`
+          ${inputs.map((type, index) => html `
               <input
-                @input=${e => this._handleInput(index, e)}
-                @pointerdown=${multiple && !disabled && index === 0 ? this._handlePointerDown : undefined}
+                @input=${(e) => this._handleInput(index, e)}
+                @pointerdown=${multiple && !disabled && index === 0
+            ? this._handlePointerDown
+            : undefined}
                 type="range"
                 class="range range--${type}"
                 id="input-${type}"
@@ -366,46 +364,22 @@ class LeuRange extends LeuElement {
         </div>
       </div>
     `;
-  }
+    }
 }
-_defineProperty(LeuRange, "styles", [LeuElement.styles, css_248z]);
-_defineProperty(LeuRange, "shadowRootOptions", {
-  ...LeuElement.shadowRootOptions,
-  delegatesFocus: true
-});
-_defineProperty(LeuRange, "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
-  }
-});
+LeuRange.styles = [LeuElement.styles, css_248z];
+LeuRange.shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+LeuRange.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 },
+};
 
 export { LeuRange };

package/dist/ScrollTop.d.ts

@@ -1,19 +1,29 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+import { LeuButton } from './Button.js';
+import { LeuIcon } from './Icon.js';
+
 /**
  * @tagname leu-scroll-top
  */
-export class LeuScrollTop extends LeuElement {
+declare class LeuScrollTop extends LeuElement {
+    static dependencies: {
+        "leu-button": typeof LeuButton;
+        "leu-icon": typeof LeuIcon;
+    };
+    static styles: lit.CSSResultGroup[];
+    static properties: {
+        _showButton: {
+            state: boolean;
+        };
+    };
+    constructor();
+    scroll: () => void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     static scrollToTop(): void;
-    _scrollDown: boolean;
-    /**
-     * Only show the button when
-     * ... the current scroll position is greater than the window height (below-the-fold) and when
-     * ... scrolling up
-     */
-    _showButton: boolean;
-    _prevYPos: number;
-    /** @internal */
-    _scrollListener: Function;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): lit_html.TemplateResult<1>;
 }
-import { L as LeuElement } from './LeuElement-Dd6zm9XF.js';
-//# sourceMappingURL=ScrollTop.d.ts.map
+
+export { LeuScrollTop };

package/dist/ScrollTop.js

@@ -1,10 +1,12 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-Dd6zm9XF.js';
 import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
+import { L as LeuElement } from './LeuElement-BhAmogDy.js';
 import { LeuButton } from './Button.js';
 import { LeuIcon } from './Icon.js';
+import './_tslib-CNEFicEt.js';
 import 'lit/directives/if-defined.js';
-import './hasSlotController-dQsSUUpb.js';
+import 'lit/decorators.js';
+import './hasSlotController-Bm2tipvG.js';
 
 /**
  * Return a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked.
@@ -12,7 +14,6 @@ import './hasSlotController-dQsSUUpb.js';
  * @param {Number} timeout - Default is 500 ms
  * @returns {Function} - Your function wrapped in a timeout function
  */
-
 /**
  * Return a throttled function that only invokes func at most once per every wait milliseconds.
  * @param {Function} func - Your function
@@ -20,15 +21,15 @@ import './hasSlotController-dQsSUUpb.js';
  * @returns {Function} - Your function wrapped in a timeout function
  */
 const throttle = function throttle(func, timeout = 500) {
-  let timer = null;
-  return (...args) => {
-    if (timer === null) {
-      func(...args);
-      timer = setTimeout(() => {
-        timer = null;
-      }, timeout);
-    }
-  };
+    let timer = null;
+    return (...args) => {
+        if (timer === null) {
+            func(...args);
+            timer = setTimeout(() => {
+                timer = null;
+            }, timeout);
+        }
+    };
 };
 
 var css_248z = css`.scroll-top {
@@ -71,58 +72,57 @@ var css_248z = css`.scroll-top {
  * @tagname leu-scroll-top
  */
 class LeuScrollTop extends LeuElement {
-  constructor() {
-    super();
-    /** @internal */
-    _defineProperty(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;
-    });
-    this._prevYPos = 0;
-    /** @internal */
-    this._showButton = false;
-    /** @internal */
-    this._scrollDown = false;
-
-    /** @internal */
-    this._scrollListener = undefined;
-  }
-  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() {
-    const cssClasses = {
-      "scroll-top": true,
-      hide: !this._showButton
-    };
-    return html`
+    constructor() {
+        super();
+        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;
+        };
+        /** @internal */
+        this._prevYPos = 0;
+        /** @internal */
+        this._showButton = false;
+        /** @internal */
+        this._scrollDown = false;
+        /** @internal */
+        this._scrollListener = undefined;
+    }
+    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() {
+        const cssClasses = {
+            "scroll-top": true,
+            hide: !this._showButton,
+        };
+        return html `
       <div class=${classMap(cssClasses)}>
         <leu-button
           label="Zum Seitenanfang"
@@ -133,17 +133,15 @@ class LeuScrollTop extends LeuElement {
         </leu-button>
       </div>
     `;
-  }
+    }
 }
-_defineProperty(LeuScrollTop, "dependencies", {
-  "leu-button": LeuButton,
-  "leu-icon": LeuIcon
-});
-_defineProperty(LeuScrollTop, "styles", [LeuElement.styles, css_248z]);
-_defineProperty(LeuScrollTop, "properties", {
-  _showButton: {
-    state: true
-  }
-});
+LeuScrollTop.dependencies = {
+    "leu-button": LeuButton,
+    "leu-icon": LeuIcon,
+};
+LeuScrollTop.styles = [LeuElement.styles, css_248z];
+LeuScrollTop.properties = {
+    _showButton: { state: true },
+};
 
 export { LeuScrollTop };