@statistikzh/leu 0.28.0 → 0.28.2

package/src/components/popup/stories/popup.stories.ts

@@ -1,117 +0,0 @@
-import { html } from "lit"
-import { styleMap } from "lit/directives/style-map.js"
-import { ifDefined } from "lit/directives/if-defined.js"
-import "../leu-popup.js"
-import "../../button/leu-button.js"
-
-export default {
-  title: "Components/Popup",
-  component: "leu-popup",
-  argTypes: {
-    placement: {
-      control: {
-        type: "select",
-      },
-      options: [
-        "top",
-        "top-start",
-        "top-end",
-        "bottom",
-        "bottom-start",
-        "bottom-end",
-        "left",
-        "left-start",
-        "left-end",
-        "right",
-        "right-start",
-        "right-end",
-      ],
-    },
-  },
-}
-
-const popupStyles = {
-  background: "white",
-  border: "1px solid var(--leu-color-black-40)",
-  padding: "0.5rem",
-  boxShadow: "var(--leu-box-shadow-regular)",
-}
-
-function Template(args = {}) {
-  return html`<leu-popup
-    ?active=${args.active}
-    ?flip=${args.flip}
-    ?shift=${args.shift}
-    placement=${ifDefined(args.placement)}
-    offset-main-axis=${ifDefined(args.offsetMainAxis)}
-    offset-cross-axis=${ifDefined(args.offsetCrossAxis)}
-    offset-alignment-axis=${ifDefined(args.offsetAlignmentAxis)}
-  >
-    <leu-button slot="anchor">Open popup</leu-button>
-    <div style=${styleMap(popupStyles)}>Popup content</div>
-  </leu-popup>`
-}
-
-export const Regular = Template.bind({})
-Regular.args = {
-  active: true,
-  placement: "bottom-start",
-  flip: true,
-  shift: true,
-  offsetMainAxis: 0,
-  offsetAlignmentAxis: 0,
-}
-
-export const VirtualElement = {
-  render: (args = {}) => html`
-    <leu-popup
-      ?active=${args.active}
-      ?flip=${args.flip}
-      ?shift=${args.shift}
-      placement=${ifDefined(args.placement)}
-      offset-main-axis=${ifDefined(args.offsetMainAxis)}
-      offset-cross-axis=${ifDefined(args.offsetCrossAxis)}
-      offset-alignment-axis=${ifDefined(args.offsetAlignmentAxis)}
-    >
-      <div style=${styleMap(popupStyles)}>Popup content</div>
-    </leu-popup>
-    <script>
-      const body = document.body
-      const popup = document.querySelector("leu-popup")
-      let clientX = 0
-      let clientY = 0
-
-      body.style.height = "100vh"
-
-      popup.anchor = {
-        getBoundingClientRect() {
-          return {
-            width: 0,
-            height: 0,
-            x: clientX,
-            y: clientY,
-            top: clientY,
-            left: clientX,
-            right: clientX,
-            bottom: clientY,
-          }
-        },
-      }
-
-      body.addEventListener("mousemove", (event) => {
-        clientX = event.clientX
-        clientY = event.clientY
-
-        popup.reposition()
-      })
-    </script>
-  `,
-  args: {
-    active: true,
-    placement: "bottom-start",
-    flip: true,
-    shift: true,
-    offsetMainAxis: 8,
-    offsetAlignmentAxis: 8,
-  },
-}

package/src/components/popup/test/popup.test.ts

@@ -1,90 +0,0 @@
-import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
-
-import "../leu-popup.js"
-import { LeuPopup } from "../Popup.js"
-
-async function defaultFixture() {
-  return fixture<LeuPopup>(html`
-    <leu-popup
-      ><div slot="anchor"></div>
-      <p>Popup content</p></leu-popup
-    >
-  `)
-}
-
-describe("LeuPopup", () => {
-  it("is a defined element", async () => {
-    const el = customElements.get("leu-popup")
-
-    expect(el).not.to.be.undefined
-  })
-
-  it("passes the a11y audit", async () => {
-    const el = await defaultFixture()
-
-    await expect(el).shadowDom.to.be.accessible()
-  })
-
-  it("moves content to the position of a virtual element", async () => {
-    const popup = await fixture<LeuPopup>(
-      html`<leu-popup ?active=${true} placement="bottom-start"
-          ><div slot="anchor"></div>
-          <div
-            style="background: white; border: 1px solid black; padding: 0.5rem"
-          >
-            Popup content
-          </div></leu-popup
-        >
-        <style>
-          * {
-            margin: 0;
-            padding: 0;
-          }
-        </style> `,
-    )
-
-    popup.anchor = {
-      getBoundingClientRect: () => new DOMRect(32, 125, 0, 0),
-    }
-
-    popup.reposition()
-
-    await new Promise<void>((resolve) => {
-      requestAnimationFrame(() => resolve())
-    })
-
-    const popupContent =
-      popup.shadowRoot!.querySelector<HTMLDivElement>(".popup")
-
-    expect(popupContent.style.left).to.equal("32px")
-    expect(popupContent.style.top).to.equal("125px")
-  })
-
-  it("applies offset properties correctly", async () => {
-    const popup = await fixture<LeuPopup>(
-      html`<leu-popup
-        ?active=${true}
-        placement="bottom-start"
-        offset-main-axis="12"
-        offset-cross-axis="9"
-      >
-        <div
-          slot="anchor"
-          style="width: 16px; height: 16px; position: absolute; top: 0; left: 0;"
-        ></div>
-        <div style="background: white; padding: 0.5rem">Popup content</div>
-      </leu-popup>`,
-    )
-
-    await new Promise<void>((resolve) => {
-      requestAnimationFrame(() => resolve())
-    })
-
-    const popupContent =
-      popup.shadowRoot!.querySelector<HTMLDivElement>(".popup")
-
-    expect(popupContent.style.left).to.equal("9px") // offset-cross-axis
-    expect(popupContent.style.top).to.equal("28px") // offset-main-axis + anchor height
-  })
-})

package/src/components/progress-bar/ProgressBar.ts

@@ -1,52 +0,0 @@
-import { html, nothing } from "lit"
-import { ifDefined } from "lit/directives/if-defined.js"
-import { property } from "lit/decorators.js"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-
-import styles from "./progress-bar.css?inline"
-
-/**
- * An indicator showing the completion progress of a task
- *
- * @tagname leu-progress-bar
- */
-export class LeuProgressBar extends LeuElement {
-  static styles = [LeuElement.styles, styles]
-
-  static shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-  }
-
-  /** Progress as a percentage from 0 to 100 */
-  @property({ type: Number, reflect: true })
-  value: number = 0
-
-  /** Label that is displayed below the progress bar */
-  @property({ type: String, reflect: true })
-  label: string = ""
-
-  /** Whether the progress bar is in indeterminate state. */
-  @property({ type: Boolean, reflect: true })
-  indeterminate: boolean = false
-
-  render() {
-    return html`
-      <progress
-        class="progress"
-        max=${ifDefined(!this.indeterminate ? 100 : undefined)}
-        value=${ifDefined(!this.indeterminate ? this.value : undefined)}
-        id="progress"
-      ></progress>
-      <div class="info">
-        ${this.label
-          ? html`<label class="label" for="progress">${this.label}</label>`
-          : html`<div class="label label--placeholder"></div>`}
-        ${this.indeterminate
-          ? nothing
-          : html`<span class="value">${Math.round(this.value)}&#8239;%</span>`}
-      </div>
-    `
-  }
-}

package/src/components/progress-bar/leu-progress-bar.ts

@@ -1,11 +0,0 @@
-import { LeuProgressBar } from "./ProgressBar.js"
-
-export { LeuProgressBar }
-
-LeuProgressBar.define("leu-progress-bar")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-progress-bar": LeuProgressBar
-  }
-}

package/src/components/progress-bar/progress-bar.css

@@ -1,97 +0,0 @@
-/* :host {
-  --progress-bar-font-regular: var(--leu-font-family-regular);
-  --progress-bar-font-black: var(--leu-font-family-black);
-
-  font-family: var(--progress-bar-font-regular);
-} */
-
-.progress {
-  --_height: 0.5rem;
-  --_border-radius: 0.25rem;
-  --_progress-color: var(--leu-color-func-cyan);
-  --_indeterminate-animation: indeterminate 2s ease infinite;
-  --_indeterminate-width: 25%;
-
-  appearance: none;
-  display: block;
-  width: 100%;
-  height: var(--_height);
-
-  background-color: var(--leu-color-black-transp-10);
-  border: none;
-  border-radius: var(--_border-radius);
-  margin-bottom: 0.5rem;
-}
-
-.progress::-webkit-progress-bar {
-  background: transparent;
-  border-radius: var(--_border-radius);
-}
-
-/* Progress bar */
-.progress::-moz-progress-bar {
-  background-color: var(--_progress-color);
-  border-radius: var(--_border-radius);
-}
-
-.progress::-webkit-progress-value {
-  background-color: var(--_progress-color);
-  border-radius: var(--_border-radius);
-}
-
-/* Indeterminate state */
-.progress:indeterminate::-moz-progress-bar {
-  width: var(--_indeterminate-width);
-  animation: var(--_indeterminate-animation);
-}
-
-/* Safari */
-.progress:indeterminate::-webkit-progress-value {
-  display: block;
-  width: var(--_indeterminate-width);
-  animation: var(--_indeterminate-animation);
-}
-
-/* Chrome */
-.progress:indeterminate::before {
-  content: "";
-  display: block;
-  width: var(--_indeterminate-width);
-  height: var(--_height);
-  background-color: var(--_progress-color);
-  border-radius: var(--_border-radius);
-  animation: var(--_indeterminate-animation);
-}
-
-@keyframes indeterminate {
-  0% {
-    margin-left: 0%;
-  }
-
-  50% {
-    margin-left: 75%;
-  }
-
-  100% {
-    margin-left: 0%;
-  }
-}
-
-/* Info section (text label and value) */
-.info {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0.25rem;
-}
-
-.label,
-.value {
-  font: var(--leu-t-tiny-regular-font);
-  color: var(--leu-color-black-60);
-}
-
-.value {
-  /* margin-left: auto; */
-}

package/src/components/progress-bar/stories/progress-bar.stories.ts

@@ -1,39 +0,0 @@
-import { Meta, StoryObj } from "@storybook/web-components-vite"
-import { html } from "lit"
-import { ifDefined } from "lit/directives/if-defined.js"
-
-import "../leu-progress-bar.js"
-import { LeuProgressBar } from "../ProgressBar.js"
-
-type StoryArgs = LeuProgressBar
-type Story = StoryObj<StoryArgs>
-
-export default {
-  title: "Components/ProgressBar",
-  component: "leu-progress-bar",
-} satisfies Meta<StoryArgs>
-
-const Template: Story = {
-  render: ({ label, value, indeterminate }) =>
-    html` <leu-progress-bar
-      .label="${ifDefined(label)}"
-      .value="${ifDefined(value)}"
-      ?indeterminate=${indeterminate}
-    ></leu-progress-bar>`,
-}
-
-export const Regular = {
-  ...Template,
-  args: {
-    value: 50,
-    label: "Datei hochladen",
-  },
-}
-
-export const Indeterminate = {
-  ...Template,
-  args: {
-    indeterminate: true,
-    label: "Datei hochladen",
-  },
-}

package/src/components/progress-bar/test/progress-bar.test.ts

@@ -1,61 +0,0 @@
-import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
-import { ifDefined } from "lit/directives/if-defined.js"
-
-import "../leu-progress-bar.js"
-import { type LeuProgressBar } from "../ProgressBar.js"
-
-async function defaultFixture({
-  value,
-  label,
-  indeterminate,
-}: { value?: number; label?: string; indeterminate?: boolean } = {}) {
-  return fixture<LeuProgressBar>(
-    html`<leu-progress-bar
-      value=${ifDefined(value)}
-      label=${ifDefined(label)}
-      ?indeterminate=${indeterminate}
-    ></leu-progress-bar>`,
-  )
-}
-
-describe("LeuProgressBar", () => {
-  it("is a defined element", async () => {
-    const el = customElements.get("leu-progress-bar")
-
-    expect(el).not.to.be.undefined
-  })
-
-  it("passes the a11y audit", async () => {
-    const el = await defaultFixture({ value: 65, label: "Datei hochladen" })
-
-    await expect(el).shadowDom.to.be.accessible()
-  })
-
-  it("renders the text labels and applies the value", async () => {
-    const el = await defaultFixture({ value: 65, label: "Datei hochladen" })
-
-    const label = el.shadowRoot?.querySelector(".label")
-    const value = el.shadowRoot?.querySelector(".value")
-    const progress = el.shadowRoot?.querySelector("progress")
-
-    expect(label?.textContent).to.equal("Datei hochladen")
-    expect(value?.textContent).to.equal("65 %")
-    expect(progress?.value).to.equal(65)
-  })
-
-  it("applies the indeterminate state", async () => {
-    const el = await defaultFixture({
-      value: 65,
-      label: "Datei hochladen",
-      indeterminate: true,
-    })
-
-    const value = el.shadowRoot?.querySelector(".value")
-    const progress = el.shadowRoot?.querySelector("progress")
-
-    expect(value).to.not.exist
-    expect(progress).to.not.have.attribute("value")
-    expect(progress).to.not.have.attribute("max")
-  })
-})

package/src/components/radio/Radio.ts

@@ -1,59 +0,0 @@
-import { html } from "lit"
-import { property } from "lit/decorators.js"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-
-import styles from "./radio.css?inline"
-
-/**
- * @tagname leu-radio
- */
-export class LeuRadio extends LeuElement {
-  static styles = [LeuElement.styles, styles]
-
-  /** @internal */
-  static shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-  }
-
-  @property({ type: Boolean, reflect: true })
-  checked: boolean = false
-
-  @property({ type: Boolean, reflect: true })
-  disabled: boolean = false
-
-  @property({ type: String, reflect: true })
-  value: string = ""
-
-  @property({ type: String, reflect: true })
-  name: string = ""
-
-  private handleChange(event: Event & { target: HTMLInputElement }) {
-    this.checked = event.target.checked
-
-    const customEvent = new CustomEvent(event.type, event)
-    this.dispatchEvent(customEvent)
-  }
-
-  private handleInput(event: InputEvent & { target: HTMLInputElement }) {
-    this.checked = event.target.checked
-  }
-
-  render() {
-    return html`
-      <input
-        id=${`radio-${this.name}`}
-        class="radio"
-        type="radio"
-        name="${this.name}"
-        @change=${this.handleChange}
-        @input=${this.handleInput}
-        .checked=${this.checked}
-        ?disabled=${this.disabled}
-        .value=${this.value ?? ""}
-      />
-      <label for=${`radio-${this.name}`} class="label"><slot></slot></label>
-    `
-  }
-}