@statistikzh/leu 0.9.0 → 0.11.0

package/src/components/dialog/stories/dialog.stories.js

@@ -0,0 +1,144 @@
+import { html } from "lit"
+import "../leu-dialog.js"
+import "../../input/leu-input.js"
+import "../../button/leu-button.js"
+
+export default {
+  title: "Dialog",
+  component: "leu-dialog",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=16052-88818&node-type=canvas&t=swv3JY6UIoCBUpXa-11",
+    },
+  },
+}
+
+function openDialog() {
+  document.querySelector("leu-dialog").show()
+}
+
+function closeDialog() {
+  document.querySelector("leu-dialog").close()
+}
+
+function OpenDialogButton() {
+  return html` <leu-button @click=${() => openDialog()}>
+    Open dialog
+  </leu-button>`
+}
+
+function Template({ label, sublabel }) {
+  return html`
+    ${OpenDialogButton()}
+
+    <leu-dialog label="${label}" sublabel="${sublabel}">
+      <leu-input label="Eingabe"></leu-input>
+      <br />
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet.
+    </leu-dialog>
+  `
+}
+
+export const Regular = Template.bind({})
+Regular.args = {
+  label: "Property: label",
+  rubric: "Property: sublabel",
+}
+
+function ActionButtonsTemplate({ label, sublabel }) {
+  return html`
+    ${OpenDialogButton()}
+
+    <leu-dialog label="${label}" sublabel="${sublabel}">
+      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+      eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+      voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+      clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+      amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
+      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
+      sit amet.
+      <slot slot="actionbar">
+        <leu-button
+          variant="secondary"
+          @click=${() => {
+            // eslint-disable-next-line no-alert
+            alert("Fenster wird geschlossen")
+            closeDialog()
+          }}
+        >
+          Abbrechen
+        </leu-button>
+        <leu-button
+          @click=${() => {
+            // eslint-disable-next-line no-alert
+            alert("Fenster wird offen gelassen")
+          }}
+        >
+          Anwenden
+        </leu-button>
+      </slot>
+    </leu-dialog>
+  `
+}
+
+export const ActionButtons = ActionButtonsTemplate.bind({})
+ActionButtons.args = {
+  label: "Property: label",
+  sublabel: "Property: sublabel",
+}
+
+function SmallContentTemplate({ label, sublabel }) {
+  return html`
+    ${OpenDialogButton()}
+
+    <leu-dialog label="${label}" sublabel="${sublabel}">
+      <p>Ein kurzer Text</p>
+    </leu-dialog>
+  `
+}
+
+export const SmallContent = SmallContentTemplate.bind({})
+SmallContent.args = {
+  label: "Dialog Titel",
+  sublabel: "Property: sublabel",
+}
+
+function ScrollablePageTemplate({ label, sublabel }) {
+  return html`
+    <div style="height: 200vh">
+      ${OpenDialogButton()}
+
+      <leu-dialog label="${label}" sublabel="${sublabel}">
+        <leu-input label="Eingabe"></leu-input>
+        <br />
+        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+        amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
+        nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,
+        sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
+        rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem
+        ipsum dolor sit amet.
+      </leu-dialog>
+    </div>
+    <div style="height: 200vh">${OpenDialogButton()}</div>
+  `
+}
+
+export const ScrollablePage = ScrollablePageTemplate.bind({})
+ScrollablePage.args = {
+  label: "Dialog Titel",
+  sublabel: "Property: sublabel",
+}

package/src/components/dialog/test/dialog.test.js

@@ -0,0 +1,85 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-dialog.js"
+
+async function defaultFixture() {
+  return fixture(
+    html`<leu-dialog label="Title" sublabel="Category">
+      This is the content of the dialog.
+    </leu-dialog>`
+  )
+}
+
+describe("LeuDialog", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-dialog")
+
+    expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("passes the a11y audit when the modal is open", async () => {
+    const el = await defaultFixture()
+
+    el.show()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("opens the dialog when calling show()", async () => {
+    const el = await defaultFixture()
+
+    el.show()
+
+    const dialog = el.shadowRoot.querySelector("dialog")
+
+    expect(dialog.open).to.be.true
+  })
+
+  it("closes the dialog when calling close()", async () => {
+    const el = await defaultFixture()
+
+    el.show()
+    el.close()
+
+    const dialog = el.shadowRoot.querySelector("dialog")
+
+    expect(dialog.open).to.be.false
+  })
+
+  it("renders a label and a sublabel", async () => {
+    const el = await defaultFixture()
+
+    const label = el.shadowRoot.querySelector("h1")
+    const sublabel = el.shadowRoot.querySelector(".subtitle")
+
+    expect(label).to.have.text("Title")
+    expect(sublabel).to.have.text("Category")
+  })
+
+  it("renders a close button", async () => {
+    const el = await defaultFixture()
+
+    const closeButton = el.shadowRoot.querySelector(".close-button")
+
+    expect(closeButton).to.exist
+  })
+
+  it("closes the dialog when clicking the close button", async () => {
+    const el = await defaultFixture()
+    const dialog = el.shadowRoot.querySelector("dialog")
+
+    el.show()
+
+    const closeButton = el.shadowRoot.querySelector(".close-button")
+    expect(dialog.open).to.be.true
+    closeButton.click()
+    expect(dialog.open).to.be.false
+  })
+})

package/src/components/input/input.css

@@ -54,6 +54,7 @@
 
   border: var(--input-border-width) solid var(--input-border-color);
   border-radius: 2px;
+  background: var(--leu-color-black-0);
 
   line-height: 1;
 }
@@ -79,6 +80,7 @@
   color: var(--input-color);
 
   border: 0;
+  background: var(--leu-color-black-0);
 
   padding-block: 2rem 1rem;
 }

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")

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;
+}