@statistikzh/leu 0.28.0 → 0.28.2

package/src/components/message/stories/message.stories.ts

@@ -1,149 +0,0 @@
-import { Meta, StoryObj } from "@storybook/web-components-vite"
-import { html, TemplateResult } from "lit"
-import { action } from "storybook/actions"
-
-import "../leu-message.js"
-import "../../button/leu-button.js"
-import { LeuMessage } from "../Message.js"
-
-type StoryArgs = LeuMessage
-type Story = StoryObj<StoryArgs>
-
-export default {
-  title: "Components/Message",
-  component: "leu-message",
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=316-4172&p=f&t=RVDlqNcmiHHiwE5P-11",
-    },
-  },
-  argTypes: {
-    type: {
-      control: "select",
-      options: ["error", "success", "info", "warning"],
-    },
-    size: {
-      control: "select",
-      options: ["regular", "large"],
-    },
-    "--leu-message-accent-color": {
-      control: {
-        type: "color",
-        presetColors: [
-          "#0076bd",
-          "#00407c",
-          "#00797b",
-          "#1a7f1f",
-          "#b01657",
-          "#d40053",
-          "#7f3da7",
-          "#666666",
-        ],
-      },
-    },
-  },
-  args: {
-    type: "success",
-    size: "regular",
-    removable: true,
-    onRemove: action("leu:remove"),
-  },
-} satisfies Meta<StoryArgs>
-
-const baseRender =
-  (messageContent: (args: StoryArgs) => TemplateResult) => (args: StoryArgs) =>
-    html` <leu-message
-      style="--leu-message-accent-color: ${args["--leu-message-accent-color"] ??
-      "unset"};"
-      type=${args.type}
-      size=${args.size}
-      ?removable=${args.removable}
-      ?popup=${args.popup}
-      @leu:remove=${args.onRemove}
-    >
-      ${messageContent(args)}
-    </leu-message>`
-
-const Template: Story = {
-  render: baseRender(
-    (args) =>
-      html`<strong>Nachricht Titel</strong><br />
-        Beschreibungstext einer Nachricht
-        <leu-button
-          slot="cta"
-          variant="secondary"
-          size="small"
-          ?inverted=${args.type === "error" || args.type === "success"}
-        >
-          Rückgängig
-        </leu-button>`,
-  ),
-}
-
-export const Success = {
-  ...Template,
-  args: {
-    type: "success",
-    size: "large",
-  },
-}
-
-export const Error = {
-  ...Template,
-  args: {
-    type: "error",
-    size: "large",
-  },
-}
-
-export const Warning = {
-  ...Template,
-  args: {
-    type: "warning",
-    size: "large",
-  },
-}
-
-export const Info = {
-  ...Template,
-  render: baseRender(
-    () =>
-      html`<strong>Nachricht Titel</strong><br />
-        Beschreibungstext einer Nachricht`,
-  ),
-  args: {
-    type: "info",
-    size: "large",
-  },
-}
-
-export const CustomColor = {
-  ...Template,
-  render: baseRender(
-    () =>
-      html`<strong>Entscheid wurde auf den 21.12.2024 verschoben</strong><br />
-        Aufgrund ausstehender Abklärungen wurde der Termin verschoben.`,
-  ),
-  args: {
-    type: "info",
-    size: "large",
-    "--message-accent-color": "#00797b",
-  },
-}
-
-export const Small = {
-  ...Template,
-  render: baseRender(() => html`Nachricht ohne Titel`),
-  args: {
-    type: "success",
-  },
-}
-
-export const Popup = {
-  ...Small,
-  args: {
-    ...Small.args,
-    popup: true,
-  },
-}

package/src/components/message/test/message.test.ts

@@ -1,96 +0,0 @@
-import { html } from "lit"
-import { fixture, expect, oneEvent } from "@open-wc/testing"
-
-import "../leu-message.js"
-import { LeuMessage } from "../Message.js"
-import { LeuIcon } from "../../icon/Icon.js"
-
-async function defaultFixture({ removable = false } = {}): Promise<LeuMessage> {
-  return fixture(
-    html`<leu-message ?removable=${removable}>
-      <strong>Entscheid wurde auf den 21.12.2024 verschoben</strong><br />
-      Aufgrund ausstehender Abklärungen wurde der Termin verschoben.
-    </leu-message>`,
-  )
-}
-
-describe("LeuMessage", () => {
-  it("is a defined element", async () => {
-    const el = customElements.get("leu-message")
-
-    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 the message content", async () => {
-    const el = await defaultFixture()
-
-    expect(el).to.contain.text("Entscheid wurde auf den 21.12.2024 verschoben")
-
-    expect(el).to.contain.text(
-      "Aufgrund ausstehender Abklärungen wurde der Termin verschoben.",
-    )
-  })
-
-  it("renders the remove button according to its 'removable' property", async () => {
-    const el = await defaultFixture({ removable: true })
-
-    let removeButton = el.shadowRoot?.querySelector(".message__remove")
-
-    expect(removeButton).to.exist
-
-    el.removable = false
-    await el.updateComplete
-
-    removeButton = el.shadowRoot?.querySelector(".message__remove")
-
-    expect(removeButton).to.not.exist
-  })
-
-  it("dispatches 'leu:remove' event when remove button is clicked", async () => {
-    const el = await defaultFixture({ removable: true })
-
-    const button = el.shadowRoot?.querySelector(
-      ".message__remove",
-    ) as HTMLButtonElement
-
-    setTimeout(() => button.click())
-
-    const event = await oneEvent(el, "leu:remove", false)
-
-    expect(event).to.exist
-  })
-
-  it("renders the correct icon based on the type", async () => {
-    const el = await defaultFixture()
-
-    const icon = el.shadowRoot?.querySelector(".message__icon") as LeuIcon
-
-    expect(icon).to.exist
-
-    el.type = "success"
-    await el.updateComplete
-
-    expect(icon.name).to.equal("confirm")
-
-    el.type = "error"
-    await el.updateComplete
-
-    expect(icon.name).to.equal("caution")
-
-    el.type = "info"
-    await el.updateComplete
-
-    expect(icon.name).to.equal("getInformation")
-
-    el.type = "warning"
-    await el.updateComplete
-
-    expect(icon.name).to.equal("caution")
-  })
-})

package/src/components/pagination/Pagination.ts

@@ -1,192 +0,0 @@
-import { html } from "lit"
-import { live } from "lit/directives/live.js"
-import { property, state } from "lit/decorators.js"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-import { LeuButton } from "../button/Button.js"
-import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js"
-import { LeuIcon } from "../icon/Icon.js"
-
-import styles from "./pagination.css?inline"
-
-const MIN_PAGE = 1
-
-/**
- * @tagname leu-pagination
- */
-export class LeuPagination extends LeuElement {
-  static dependencies = {
-    "leu-button": LeuButton,
-    "leu-icon": LeuIcon,
-    "leu-visually-hidden": LeuVisuallyHidden,
-  }
-
-  static styles = [LeuElement.styles, styles]
-
-  /**
-   * @internal
-   */
-  static shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-  }
-
-  @property({ type: Number, reflect: true })
-  defaultPage?: number
-
-  /**
-   * Number of items per page.
-   */
-  @property({ type: Number, reflect: true })
-  itemsPerPage: number = 1
-
-  /**
-   * Total number of items to paginate.
-   */
-  @property({ type: Number, reflect: true })
-  numOfItems: number = 1
-
-  /**
-   * Internal page state that contains an
-   * already clamped page number. Should only
-   * be accessed through the `page` getter and
-   * setter.
-   * @internal
-   */
-  @state()
-  private _page: number = 1
-
-  attributeChangedCallback(name, oldVal, newVal) {
-    super.attributeChangedCallback(name, oldVal, newVal)
-
-    if (name === "defaultpage" && newVal !== oldVal) {
-      this.page = parseInt(newVal, 10)
-    }
-  }
-
-  /**
-   * The current page number. This is a 1-based index.
-   * When setting this value, it will be clamped
-   * to the range of valid pages.
-   */
-  get page() {
-    return this._page
-  }
-
-  set page(page) {
-    this._page = this._clampPage(page)
-  }
-
-  /**
-   * The index of the first item on the current page.
-   */
-  get startIndex() {
-    return (this.page - 1) * this.itemsPerPage
-  }
-
-  /**
-   * The index of the last item on the current page.
-   * This is exclusive, meaning it is one past the last item.
-   *
-   * @todo This value should be inclusive, meaning it should be the index of the last item on the page.
-   */
-  get endIndex() {
-    return Math.min(this.startIndex + this.itemsPerPage, this.numOfItems)
-  }
-
-  get _maxPage() {
-    return Math.ceil(this.numOfItems / this.itemsPerPage)
-  }
-
-  private _isFirstPage() {
-    return this.page === MIN_PAGE
-  }
-
-  private _isLastPage() {
-    return this.page === this._maxPage
-  }
-
-  private _clampPage(page: number) {
-    return Math.min(Math.max(page, MIN_PAGE), this._maxPage)
-  }
-
-  private _updatePage(page) {
-    const prevPage = this.page
-    this.page = this._clampPage(page)
-
-    if (this.page !== prevPage) {
-      this.dispatchEvent(
-        new CustomEvent("leu:pagechange", {
-          detail: {
-            startIndex: this.startIndex,
-            endIndex: this.endIndex,
-            page: this.page,
-          },
-          bubbles: false,
-        }),
-      )
-    }
-  }
-
-  private _handleChange(event: Event & { target: HTMLInputElement }) {
-    this._updatePage(parseInt(event.target.value, 10) || 0)
-  }
-
-  private _handleInput(event: InputEvent & { target: HTMLInputElement }) {
-    if (event.target.value !== "") {
-      event.preventDefault()
-      this._handleChange(event)
-    }
-  }
-
-  private _handleKeyDown(event: KeyboardEvent & { target: HTMLInputElement }) {
-    if (event.key === "ArrowUp") {
-      event.preventDefault()
-      this._updatePage(this.page + 1)
-    }
-    if (event.key === "ArrowDown") {
-      event.preventDefault()
-      this._updatePage(this.page - 1)
-    }
-  }
-
-  render() {
-    return html`
-      <leu-visually-hidden>
-        <label for="page-input">Aktuelle Seite</label>
-      </leu-visually-hidden>
-      <input
-        id="page-input"
-        class="input"
-        min=${MIN_PAGE}
-        max=${this._maxPage}
-        .value=${live(this.page.toString())}
-        @input=${this._handleInput}
-        @change=${this._handleChange}
-        @keydown=${this._handleKeyDown}
-        type="number"
-      />
-      <div class="label">von ${this._maxPage}</div>
-      <div class="button-group">
-        <leu-button
-          variant="secondary"
-          label="Vorherige Seite"
-          @click=${() => {
-            this._updatePage(this.page - 1)
-          }}
-          ?disabled=${this._isFirstPage()}
-          ><leu-icon name="angleLeft"></leu-icon
-        ></leu-button>
-        <leu-button
-          variant="secondary"
-          label="Nächste Seite"
-          @click=${() => {
-            this._updatePage(this.page + 1)
-          }}
-          ?disabled=${this._isLastPage()}
-          ><leu-icon name="angleRight"></leu-icon
-        ></leu-button>
-      </div>
-    `
-  }
-}

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

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

package/src/components/pagination/pagination.css

@@ -1,54 +0,0 @@
-:host {
-  margin-top: 16px;
-  display: flex;
-  justify-content: flex-end;
-  font-family: var(--leu-font-family-regular);
-}
-
-.input {
-  width: 50px;
-  padding: 0;
-  border: 2px solid var(--leu-color-black-40);
-  border-radius: 2px;
-  color: var(--leu-color-black-transp-60);
-  text-align: center;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 24px;
-  outline-offset: 2px;
-}
-
-/* no arrows: Chrome, Safari, Edge, Opera */
-.input::-webkit-outer-spin-button,
-.input::-webkit-inner-spin-button {
-  appearance: none;
-  margin: 0;
-}
-
-/* no arrows: Firefox */
-.input[type="number"] {
-  appearance: textfield;
-}
-
-.input:focus,
-.input:hover {
-  border-color: var(--leu-color-func-cyan);
-  outline: none;
-}
-
-.input:focus-visible {
-  outline: 2px solid var(--leu-color-func-cyan);
-}
-
-.label {
-  margin: 0 16px;
-  line-height: 50px;
-  color: var(--leu-color-black-transp-60);
-  white-space: nowrap;
-}
-
-.button-group {
-  display: flex;
-  gap: 0.25rem;
-}

package/src/components/pagination/stories/pagination.stories.ts

@@ -1,115 +0,0 @@
-import { html } from "lit"
-import { ifDefined } from "lit/directives/if-defined.js"
-
-// https://stackoverflow.com/questions/72566428/storybook-angular-how-to-dynamically-update-args-from-the-template
-import { UPDATE_STORY_ARGS } from "storybook/internal/core-events"
-import { action, HandlerFunction } from "storybook/actions"
-import { Meta, StoryObj } from "@storybook/web-components-vite"
-
-import "../leu-pagination.js"
-import { LeuPagination } from "../Pagination.js"
-
-interface ExtraArgs {
-  onPageChange: HandlerFunction
-}
-
-type StoryArgs = LeuPagination & ExtraArgs
-type Story = StoryObj<StoryArgs>
-
-function updateStorybookArgss(id, args) {
-  const channel = window.__STORYBOOK_ADDONS_CHANNEL__
-  channel.emit(UPDATE_STORY_ARGS, {
-    storyId: id,
-    updatedArgs: args,
-  })
-}
-
-const items = [
-  { id: 1, label: "Ananas", value: 7 },
-  { id: 2, label: "Apfel", value: 12 },
-  { id: 3, label: "Aprikose", value: 3 },
-  { id: 4, label: "Banare", value: 11 },
-  { id: 5, label: "Birne", value: 10 },
-  { id: 6, label: "Brombeere", value: 5 },
-  { id: 7, label: "Cranberries", value: 3 },
-  { id: 8, label: "Datteln", value: 2 },
-  { id: 9, label: "Erdbeere", value: 0 },
-  { id: 10, label: "Feige", value: 11 },
-  { id: 11, label: "Granatapfel", value: 14 },
-  { id: 12, label: "Grapefruit", value: 7 },
-  { id: 13, label: "Heidelbeere", value: 12 },
-  { id: 14, label: "Himbeere", value: 3 },
-  { id: 15, label: "Johannisbeere", value: 11 },
-  { id: 16, label: "Kirsche", value: 10 },
-  { id: 17, label: "Kiwi", value: 5 },
-  { id: 18, label: "Limette", value: 3 },
-  { id: 19, label: "Litschi", value: 2 },
-  { id: 20, label: "Mandarine", value: 0 },
-  { id: 21, label: "Mango", value: 11 },
-  { id: 22, label: "Melone", value: 14 },
-  { id: 23, label: "Mirabelle", value: 14 },
-  { id: 24, label: "Nashi", value: 12 },
-  { id: 25, label: "Orange", value: 3 },
-  { id: 26, label: "Papaya", value: 6 },
-  { id: 27, label: "Pfirsich", value: 5 },
-  { id: 28, label: "Pflaume", value: 17 },
-  { id: 29, label: "Physalis", value: 1 },
-  { id: 30, label: "Preiselbeere", value: 19 },
-  { id: 31, label: "Pomelo", value: 12 },
-  { id: 32, label: "Quitte", value: 0 },
-  { id: 33, label: "Rhabarber", value: 1 },
-  { id: 34, label: "Sanddorn", value: 2 },
-  { id: 35, label: "Stachelbeere", value: 19 },
-  { id: 36, label: "Ugli", value: 9 },
-  { id: 37, label: "Weintraube", value: 11 },
-  { id: 38, label: "Zitrone", value: 4 },
-  { id: 39, label: "Zwetschge", value: 20 },
-]
-
-export default {
-  title: "Components/Pagination",
-  component: "leu-pagination",
-  args: {
-    onPageChange: action("leu:pagechange"),
-  },
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17341-82468&mode=design&t=lzVrtq8lxYVJU5TB-11",
-    },
-  },
-} satisfies Meta<StoryArgs>
-
-const Template: Story = {
-  render: (
-    { startIndex, endIndex, onPageChange, itemsPerPage, defaultPage },
-    { id },
-  ) => html`
-    ${items
-      .slice(startIndex, endIndex)
-      .map((item) => html`<div>${item.label}</div>`)}
-    <leu-pagination
-      numOfItems=${items.length}
-      itemsPerPage=${ifDefined(itemsPerPage)}
-      defaultPage=${ifDefined(defaultPage)}
-      @leu:pagechange=${(e) => {
-        onPageChange(e)
-        updateStorybookArgss(id, {
-          startIndex: e.detail.startIndex,
-          endIndex: e.detail.endIndex,
-        })
-      }}
-    >
-    </leu-pagination>
-  `,
-}
-
-export const Regular: Story = {
-  ...Template,
-  args: {
-    startIndex: 0,
-    endIndex: 5,
-    itemsPerPage: 5,
-    // defaultPage: 2,
-  },
-}