@statistikzh/leu 0.10.0 → 0.11.0

package/src/components/range/range.css

@@ -0,0 +1,181 @@
+: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;
+  box-sizing: border-box;
+
+  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);
+}
+
+/***************************   */
+
+.label {
+  display: inline-block;
+  margin-block-end: 0.5rem;
+  color: var(--leu-color-black-100);
+  font: var(--leu-t-regular-regular-font);
+}
+
+.outputs {
+  position: relative;
+  height: 1.5rem;
+  margin-block-end: 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) - var(--_start)) + var(--_start));
+  transform: translateX(calc(-50% + var(--range-thumb-diameter) / 2));
+}
+
+.inputs {
+  position: relative;
+}
+
+.range {
+  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 {
+  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;
+}

package/src/components/range/stories/range-slider.stories.js

@@ -0,0 +1,142 @@
+import { html } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+
+import "../leu-range.js"
+import "../../input/leu-input.js"
+
+/**
+ * @type {import("@storybook/web-components").Meta}
+ */
+export default {
+  title: "Range",
+  component: "leu-range",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-81936&mode=design",
+    },
+  },
+  args: {
+    label: "Bereich",
+  },
+}
+
+function Template({ label, disabled, value, min, max, step, multiple }) {
+  return html`
+    <leu-range
+      label=${label}
+      ?disabled=${disabled}
+      ?multiple=${multiple}
+      min=${ifDefined(min)}
+      max=${ifDefined(max)}
+      value=${ifDefined(value)}
+      step=${ifDefined(step)}
+    >
+    </leu-range>
+  `
+}
+
+export const Regular = Template.bind({})
+Regular.args = {
+  min: 0,
+  max: 100,
+  value: "15",
+}
+
+export const Multiple = Template.bind({})
+Multiple.args = {
+  min: 1965,
+  max: 2022,
+  value: "1965, 2022",
+  multiple: true,
+}
+
+export const Labeled = Template.bind({})
+Labeled.args = {
+  label: "Wert auswählen",
+  min: 100000,
+  max: 200000,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  label: "Wert auswählen",
+  min: 0,
+  max: 100,
+  disabled: true,
+}
+
+export const Step = Template.bind({})
+Step.args = {
+  min: 5,
+  max: 123,
+  step: 13,
+}
+
+function CombinedTemplate({
+  label,
+  disabled,
+  value = "",
+  min,
+  max,
+  step,
+  multiple,
+}) {
+  const values = value.split(",").map((v) => Number(v.trim()))
+  function handleInputInput() {
+    const inputs = document.querySelectorAll("leu-input")
+    const range = document.querySelector("leu-range")
+    range.value = [inputs[0].value, inputs[1].value]
+  }
+  return html`
+    <leu-range
+      label=${label}
+      ?disabled=${disabled}
+      ?multiple=${multiple}
+      min=${ifDefined(min)}
+      max=${ifDefined(max)}
+      value=${ifDefined(value)}
+      step=${ifDefined(step)}
+      @input=${(e) => {
+        const inputs = document.querySelectorAll("leu-input")
+        const valueList = e.target.valueAsArray
+
+        inputs[0].value = valueList[0]
+        inputs[1].value = valueList[1]
+      }}
+    >
+    </leu-range>
+    <div style="display: flex; gap: 1rem;">
+      <leu-input
+        label="Von"
+        ?disabled=${disabled}
+        type="number"
+        min=${ifDefined(min)}
+        max=${ifDefined(max)}
+        value=${ifDefined(values[0])}
+        step=${ifDefined(step)}
+        size="small"
+        @input=${handleInputInput}
+      ></leu-input>
+      <leu-input
+        label="Von"
+        ?disabled=${disabled}
+        type="number"
+        min=${ifDefined(min)}
+        max=${ifDefined(max)}
+        value=${ifDefined(values[1])}
+        step=${ifDefined(step)}
+        size="small"
+        @input=${handleInputInput}
+      ></leu-input>
+    </div>
+  `
+}
+
+export const Combined = CombinedTemplate.bind({})
+Combined.args = {
+  min: 1965,
+  max: 2022,
+  value: "1965, 2022",
+  multiple: true,
+}

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

@@ -0,0 +1,24 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-range.js"
+
+async function defaultFixture() {
+  return fixture(html`
+    <leu-range label="Test Label" min="0" max="100"> </leu-range>
+  `)
+}
+
+describe("LeuRange", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-range")
+
+    await expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+})

package/dist/LeuElement-6fbc0dee.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LeuElement-6fbc0dee.d.ts","sourceRoot":"","sources":["LeuElement-6fbc0dee.js"],"names":[],"mappings":"AA+BA;IACE,8EAcC;CACF;AA7CD,sEAaC;2BAf0B,KAAK"}