@statistikzh/leu 0.28.1 → 0.28.3

package/src/components/spinner/Spinner.ts

@@ -1,31 +0,0 @@
-import { html } from "lit"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-
-import styles from "./spinner.css?inline"
-
-/**
- * @tagname leu-spinner
- * @cssprop --leu-spinner-size - The size of the spinner.
- */
-export class LeuSpinner extends LeuElement {
-  static styles = [LeuElement.styles, styles]
-
-  render() {
-    return html`
-      <svg
-        class="spinner"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 56 56"
-        role="presentation"
-      >
-        <path
-          d="M13.8579 13.858c7.8105-7.8105 20.4737-7.8105 28.2842 0 7.8105 7.8104 7.8105 20.4737 0 28.2842-7.8105 7.8105-20.4737 7.8105-28.2842 0-4.3487-4.3486-6.2761-10.2016-5.7824-15.8838"
-          stroke="currentColor"
-          stroke-width="3"
-        />
-      </svg>
-    `
-  }
-}

package/src/components/spinner/leu-spinner.ts

@@ -1,11 +0,0 @@
-import { LeuSpinner } from "./Spinner.js"
-
-export { LeuSpinner }
-
-LeuSpinner.define("leu-spinner")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-spinner": LeuSpinner
-  }
-}

package/src/components/spinner/spinner.css

@@ -1,20 +0,0 @@
-@keyframes leu-spinner-rotate {
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-:host {
-  color: var(--leu-color-func-cyan);
-}
-
-.spinner {
-  display: block;
-  width: var(--leu-spinner-size, 3.5rem);
-  height: var(--leu-spinner-size, 3.5rem);
-  animation: leu-spinner-rotate 1s cubic-bezier(0.49, 0.12, 0.56, 0.91) infinite;
-}

package/src/components/spinner/stories/spinner.stories.ts

@@ -1,29 +0,0 @@
-import { html } from "lit"
-import "../leu-spinner.js"
-import { styleMap } from "lit/directives/style-map.js"
-
-export default {
-  title: "Components/Spinner",
-  component: "leu-spinner",
-  argTypes: {
-    color: {
-      control: {
-        type: "color",
-        presetColors: ["#009ee0", "#d93c1a", "#1a7f1f"],
-      },
-    },
-  },
-}
-
-function Template({ size, color }) {
-  const styles = styleMap({
-    color,
-    "--leu-spinner-size": size ? `${size}px` : null,
-  })
-  return html` <leu-spinner style=${styles}></leu-spinner> `
-}
-
-export const Regular = Template.bind({})
-Regular.args = {
-  size: 56,
-}

package/src/components/spinner/test/spinner.test.ts

@@ -1,30 +0,0 @@
-import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
-
-import "../leu-spinner.js"
-
-async function defaultFixture() {
-  return fixture(html`<leu-spinner></leu-spinner>`)
-}
-
-describe("LeuSpinner", () => {
-  it("is a defined element", async () => {
-    const el = await customElements.get("leu-spinner")
-
-    await expect(el).not.to.be.undefined
-  })
-
-  it("passes the a11y audit", async () => {
-    const el = await defaultFixture()
-
-    await expect(el).shadowDom.to.be.accessible()
-  })
-
-  it("renders a svg element with a 56x56 viewbox", async () => {
-    const el = await defaultFixture()
-
-    const svg = el.shadowRoot.querySelector("svg")
-
-    expect(svg).to.have.attribute("viewBox", "0 0 56 56")
-  })
-})

package/src/components/tab/Tab.ts

@@ -1,72 +0,0 @@
-import { html, PropertyValues } from "lit"
-import { property } from "lit/decorators.js"
-import { LeuElement } from "../../lib/LeuElement.js"
-
-import styles from "./tab.css?inline"
-
-let nextId = 1
-
-/**
- * Tab Button.
- *
- * @prop {string} name - Name to link Button and Panel together
- * @prop {boolean} active - Is active
- *
- * @tagname leu-tab
- */
-export class LeuTab extends LeuElement {
-  static styles = [LeuElement.styles, styles]
-
-  protected readonly componentId = `leu-tab-${nextId++}`
-
-  /**
-   * Name of the tab. Apply the same name to the corresponding panel to link them together.
-   * Has to be unique within the tab component.
-   */
-  @property({ type: String, reflect: true })
-  name = ""
-
-  @property({ type: Boolean, reflect: true })
-  active = false
-
-  connectedCallback() {
-    super.connectedCallback()
-    this.setAttribute("role", "tab")
-    this.addEventListener("click", this.handleClick)
-    // Set an id if not already provided. The id is used by the tab-group
-    // to set the aria-controls / aria-labelledby attributes.
-    this.id = this.id.length > 0 ? this.id : this.componentId
-  }
-
-  disconnectedCallback(): void {
-    super.disconnectedCallback()
-    this.removeEventListener("click", this.handleClick)
-  }
-
-  handleClick() {
-    if (this.active) {
-      return
-    }
-
-    this.active = true
-
-    this.dispatchEvent(
-      new CustomEvent("leu:tab-select", {
-        detail: { name: this.name },
-        bubbles: true,
-        composed: true,
-      }),
-    )
-  }
-
-  updated(changedProperties: PropertyValues<this>) {
-    if (changedProperties.has("active")) {
-      this.ariaSelected = this.active ? "true" : "false"
-      this.tabIndex = this.active ? 0 : -1
-    }
-  }
-
-  render() {
-    return html`<span class="label"><slot></slot></span>`
-  }
-}

package/src/components/tab/TabGroup.ts

@@ -1,267 +0,0 @@
-import { html, PropertyValues } from "lit"
-import { property, state } from "lit/decorators.js"
-import { classMap } from "lit/directives/class-map.js"
-import { createRef, ref } from "lit/directives/ref.js"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-import { LeuTab } from "./Tab.js"
-import { LeuTabPanel } from "./TabPanel.js"
-
-import styles from "./tab-group.css?inline"
-
-type ScrollableState = {
-  left: boolean
-  right: boolean
-}
-
-/**
- * Tab Group
- *
- * @slot tabs - Slot for the leu-tab elements
- * @slot panels - Slot for the leu-tab-panel elements
- * @todo: add disabled state to tabs and panels
- * @todo: add backdrop / shadow
- * @todo: add styling option for full-bleed layout (tabslist is full-bleed, panels use the full width of the container)
- *
- * @tagname leu-tab-group
- */
-export class LeuTabGroup extends LeuElement {
-  static styles = [LeuElement.styles, styles]
-
-  /**
-   * Label for the tab list, used for accessibility.
-   * Content will not be visible on the page, but should be provided for screen readers.
-   */
-  @property({ type: String })
-  label = ""
-
-  /**
-   * Name of the active/selected tab and panel. Has to match the name property of a leu-tab and leu-tab-panel.
-   */
-  @property({ type: String, reflect: true })
-  active = ""
-
-  @state()
-  protected isScrollable: ScrollableState = { left: false, right: false }
-
-  @state()
-  protected tabs: LeuTab[] = []
-
-  @state()
-  protected panels: LeuTabPanel[] = []
-
-  protected initialShowEventDispatched = false
-
-  protected tabMenuRef = createRef<HTMLDivElement>()
-
-  protected resizeObserver = new ResizeObserver(() => {
-    this.checkScrollable()
-  })
-
-  // Observe changes to the id attribute of tabs and panels
-  // to update the aria attributes accordingly
-  protected mutationObserver = new MutationObserver((records) => {
-    for (const record of records) {
-      if (!(record.target instanceof HTMLElement)) {
-        continue
-      }
-
-      if (
-        record.type === "attributes" &&
-        record.attributeName === "id" &&
-        record.target.matches("leu-tab, leu-tab-panel")
-      ) {
-        this.linkTabsAndPanels()
-        continue
-      }
-    }
-  })
-
-  connectedCallback() {
-    super.connectedCallback()
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-    this.resizeObserver.disconnect()
-    this.mutationObserver.disconnect()
-  }
-
-  firstUpdated() {
-    if (this.tabMenuRef.value) {
-      this.resizeObserver.observe(this.tabMenuRef.value)
-    }
-
-    this.mutationObserver.observe(this, {
-      subtree: true,
-      attributes: true,
-      attributeFilter: ["id"],
-    })
-  }
-
-  updated(changedProperties: PropertyValues) {
-    if (
-      changedProperties.has("active") ||
-      changedProperties.has("tabs") ||
-      changedProperties.has("panels")
-    ) {
-      this.updatePanels()
-      this.updateTabs()
-    }
-  }
-
-  protected async handleTabsSlotChange() {
-    const slot =
-      this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name="tabs"]')
-
-    this.tabs =
-      slot
-        ?.assignedElements({ flatten: true })
-        .filter((el) => el instanceof LeuTab) ?? []
-
-    // if the active tab is not in the new set of tabs, activate the first tab
-    if (
-      this.tabs.length > 0 &&
-      !this.tabs.some((tab) => tab.name === this.active)
-    ) {
-      this.active = this.tabs[0].name
-    }
-    this.linkTabsAndPanels()
-
-    await this.updateComplete
-    this.checkScrollable()
-  }
-
-  protected handlePanelsSlotChange() {
-    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>(
-      'slot[name="panels"]',
-    )
-
-    this.panels =
-      slot
-        ?.assignedElements({ flatten: true })
-        .filter((el) => el instanceof LeuTabPanel) ?? []
-
-    this.linkTabsAndPanels()
-  }
-
-  /**
-   * Link tabs and panels by setting the appropriate aria attributes.
-   * Generates global ids for tabs and panels if they don't have one.
-   */
-  protected linkTabsAndPanels() {
-    for (const tab of this.tabs) {
-      const panel = this.panels.find((o) => o.name === tab.name)
-
-      if (!panel) continue
-
-      tab.setAttribute("aria-controls", panel.id)
-      panel.setAttribute("aria-labelledby", tab.id)
-    }
-  }
-
-  protected get activeTab() {
-    return this.tabs.find((o) => o.active)
-  }
-
-  protected get activePanel() {
-    return this.panels.find((o) => o.name === this.activeTab?.name)
-  }
-
-  protected updatePanels() {
-    for (const panel of this.panels) {
-      panel.active = panel.name === this.active
-    }
-  }
-
-  protected updateTabs() {
-    for (const tab of this.tabs) {
-      tab.active = tab.name === this.active
-    }
-  }
-
-  protected async keydownHandler(event: KeyboardEvent) {
-    const activeTab = this.activeTab
-    let nextTab: LeuTab | null = null
-
-    if (
-      !["ArrowRight", "ArrowLeft", "Home", "End"].includes(event.key) ||
-      !activeTab
-    ) {
-      return
-    }
-
-    switch (event.key) {
-      case "ArrowRight":
-      case "ArrowLeft": {
-        const direction = event.key === "ArrowRight" ? 1 : -1
-        const currentIndex = this.tabs.indexOf(activeTab)
-        const numOfTabs = this.tabs.length
-        // cycle through the tabs
-        const nextIndex = (currentIndex + direction + numOfTabs) % numOfTabs
-        nextTab = this.tabs[nextIndex]
-        break
-      }
-
-      case "Home":
-        nextTab = this.tabs[0]
-        break
-      case "End":
-        nextTab = this.tabs[this.tabs.length - 1]
-        break
-      default:
-        return
-    }
-
-    this.active = nextTab.name
-    await this.updateComplete
-    nextTab.focus()
-    nextTab.scrollIntoView({
-      block: "nearest",
-      inline: "nearest",
-    })
-  }
-
-  protected checkScrollable() {
-    const tabMenu = this.tabMenuRef.value
-    if (!tabMenu) return
-
-    this.isScrollable = {
-      left: tabMenu.scrollLeft > 0,
-      right: tabMenu.scrollLeft < tabMenu.scrollWidth - tabMenu.clientWidth,
-    }
-  }
-
-  protected handleScrollEvent() {
-    this.checkScrollable()
-  }
-
-  protected handleTabSelect(event: CustomEvent) {
-    this.active = event.detail.name
-  }
-
-  render() {
-    const containerClasses = {
-      container: true,
-      "container--scrollable-left": this.isScrollable.left,
-      "container--scrollable-right": this.isScrollable.right,
-    }
-
-    return html`
-      <div class=${classMap(containerClasses)}>
-        <div
-          class="tab-menu"
-          role="tablist"
-          @keydown=${this.keydownHandler}
-          @leu:tab-select=${this.handleTabSelect}
-          @scroll="${this.handleScrollEvent}"
-          aria-label=${this.label}
-          ${ref(this.tabMenuRef)}
-        >
-          <slot name="tabs" @slotchange=${this.handleTabsSlotChange}></slot>
-        </div>
-      </div>
-      <slot name="panels" @slotchange=${this.handlePanelsSlotChange}></slot>
-    `
-  }
-}

package/src/components/tab/TabPanel.ts

@@ -1,59 +0,0 @@
-import { html, PropertyValues } from "lit"
-import { property } from "lit/decorators.js"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-
-import styles from "./tab-panel.css?inline"
-
-let nextId = 1
-
-/**
- * Tab Panel
- *
- * @tagname leu-tab-panel
- * @fires leu:show-tab-panel - Fired when a tab panel is shown
- */
-export class LeuTabPanel extends LeuElement {
-  static styles = [LeuElement.styles, styles]
-
-  protected readonly componentId = `leu-tab-panel-${nextId++}`
-
-  /**
-   * Name of the tab. Apply the same name to the corresponding tab button to link them together.
-   * Has to be unique within the tab component.
-   */
-  @property({ type: String, reflect: true })
-  name = ""
-
-  @property({ type: Boolean, reflect: true })
-  active = false
-
-  connectedCallback() {
-    super.connectedCallback()
-    this.setAttribute("role", "tabpanel")
-    this.tabIndex = 0
-    // Set an id if not already provided. The id is used by the tab-group
-    // to set the aria-controls attribute on the corresponding tab button.
-    this.id = this.id.length > 0 ? this.id : this.componentId
-  }
-
-  protected updated(changedProperties: PropertyValues): void {
-    if (changedProperties.has("active")) {
-      this.ariaHidden = this.active ? "false" : "true"
-
-      if (this.active) {
-        this.dispatchEvent(
-          new CustomEvent("leu:show-tab-panel", {
-            detail: { name: this.name },
-            bubbles: true,
-            composed: true,
-          }),
-        )
-      }
-    }
-  }
-
-  render() {
-    return html`<slot></slot>`
-  }
-}

package/src/components/tab/leu-tab-group.ts

@@ -1,11 +0,0 @@
-import { LeuTabGroup } from "./TabGroup.js"
-
-export { LeuTabGroup }
-
-LeuTabGroup.define("leu-tab-group")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-tab-group": LeuTabGroup
-  }
-}

package/src/components/tab/leu-tab-panel.ts

@@ -1,11 +0,0 @@
-import { LeuTabPanel } from "./TabPanel.js"
-
-export { LeuTabPanel }
-
-LeuTabPanel.define("leu-tab-panel")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-tab-panel": LeuTabPanel
-  }
-}

package/src/components/tab/leu-tab.ts

@@ -1,11 +0,0 @@
-import { LeuTab } from "./Tab.js"
-
-export { LeuTab }
-
-LeuTab.define("leu-tab")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-tab": LeuTab
-  }
-}

package/src/components/tab/stories/tab.stories.ts

@@ -1,97 +0,0 @@
-import { Meta, StoryObj } from "@storybook/web-components-vite"
-import { action } from "storybook/actions"
-import { html } from "lit"
-
-import { LeuTabGroup } from "../leu-tab-group.js"
-import "../leu-tab-group.js"
-import "../leu-tab.js"
-import "../leu-tab-panel.js"
-import { ifDefined } from "lit/directives/if-defined.js"
-
-type StoryArgs = LeuTabGroup
-type Story = StoryObj<StoryArgs>
-
-export default {
-  title: "Components/Tab",
-  component: "leu-tab-group",
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-184423",
-    },
-  },
-  args: {
-    onLeuTabPanelShow: action("leu:show-tab-panel"),
-  },
-} satisfies Meta<StoryArgs>
-
-interface Args {
-  active?: string
-  label?: string
-  onLeuTabPanelShow?: (event: CustomEvent) => void
-}
-
-const Template: Story = {
-  render: (args: Args = {}) => {
-    return html`
-      <leu-tab-group
-        active=${ifDefined(args.active)}
-        label=${ifDefined(args.label)}
-        @leu:show-tab-panel=${args.onLeuTabPanelShow}
-      >
-        <leu-tab slot="tabs" name="online">Online</leu-tab>
-        <leu-tab-panel slot="panels" name="online">
-          <p>
-            Online – Wenn Ihr Ausweis vor dem 01.01.2013 ausgestellt wurde,
-            müssen Sie ein neues Passfoto machen. Ihr Reisebüro oder das
-            Konsulat Ihres Reiseziels können Ihnen dabei helfen.
-          </p>
-        </leu-tab-panel>
-        <leu-tab slot="tabs" name="vor-ort">Vor Ort</leu-tab>
-
-        <leu-tab-panel slot="panels" name="vor-ort">
-          <p>
-            Vor Ort – Wenn Ihr Ausweis vor dem 01.01.2013 ausgestellt wurde,
-            müssen Sie ein neues Passfoto machen. Ihr Reisebüro oder das
-            Konsulat Ihres Reiseziels können Ihnen dabei helfen.
-          </p>
-        </leu-tab-panel>
-
-        <leu-tab slot="tabs" name="per-post">Per Post</leu-tab>
-        <leu-tab-panel slot="panels" name="per-post">
-          <p>
-            Per Post – Wenn Ihr Ausweis vor dem 01.01.2013 ausgestellt wurde,
-            müssen Sie ein neues Passfoto machen. Ihr Reisebüro oder das
-            Konsulat Ihres Reiseziels können Ihnen dabei helfen.
-          </p>
-        </leu-tab-panel>
-
-        <leu-tab slot="tabs" name="telefonisch">Telefonisch</leu-tab>
-        <leu-tab-panel slot="panels" name="telefonisch">
-          <p>
-            Telefonisch – Wenn Ihr Ausweis vor dem 01.01.2013 ausgestellt wurde,
-            müssen Sie ein neues Passfoto machen. Ihr Reisebüro oder das
-            Konsulat Ihres Reiseziels können Ihnen dabei helfen.
-          </p>
-        </leu-tab-panel>
-
-        <leu-tab slot="tabs" name="service">Service</leu-tab>
-        <leu-tab-panel slot="panels" name="service">
-          <p>
-            Service – Wenn Ihr Ausweis vor dem 01.01.2013 ausgestellt wurde,
-            müssen Sie ein neues Passfoto machen. Ihr Reisebüro oder das
-            Konsulat Ihres Reiseziels können Ihnen dabei helfen.
-          </p>
-        </leu-tab-panel>
-      </leu-tab-group>
-    `
-  },
-}
-
-export const Regular = {
-  ...Template,
-  args: {
-    active: "online",
-    label: "Reiseinformationen",
-  },
-}