@statistikzh/leu 0.28.0 → 0.28.2

package/src/components/tab/test/tab.test.ts

@@ -1,139 +0,0 @@
-import { html } from "lit"
-import { fixture, expect, oneEvent } from "@open-wc/testing"
-
-import "../leu-tab.js"
-import type { LeuTab } from "../Tab.js"
-
-async function defaultFixture() {
-  return fixture<LeuTab>(html`<leu-tab name="test">Test</leu-tab>`)
-}
-
-async function activeFixture() {
-  return fixture<LeuTab>(html`<leu-tab name="test" active>Test</leu-tab>`)
-}
-
-describe("LeuTab", () => {
-  it("is a defined element", () => {
-    expect(customElements.get("leu-tab")).not.to.be.undefined
-  })
-
-  it("passes the a11y audit inside a tablist", async () => {
-    const wrapper = await fixture(html`
-      <div role="tablist">
-        <leu-tab name="test" active>Test</leu-tab>
-      </div>
-    `)
-    await expect(wrapper).to.be.accessible()
-  })
-
-  it("sets role=tab on the host element", async () => {
-    const el = await defaultFixture()
-    expect(el.getAttribute("role")).to.equal("tab")
-  })
-
-  it("auto-generates an id when none is provided", async () => {
-    const el = await defaultFixture()
-    expect(el.id).to.match(/^leu-tab-\d+$/)
-  })
-
-  it("keeps a user-provided id", async () => {
-    const el = await fixture<LeuTab>(
-      html`<leu-tab id="my-custom-tab" name="test">Test</leu-tab>`,
-    )
-    expect(el.id).to.equal("my-custom-tab")
-  })
-
-  it("generates distinct ids for separate instances", async () => {
-    const el1 = await fixture<LeuTab>(html`<leu-tab name="a">A</leu-tab>`)
-    const el2 = await fixture<LeuTab>(html`<leu-tab name="b">B</leu-tab>`)
-    expect(el1.id).not.to.equal(el2.id)
-  })
-
-  it("has ariaSelected=false and tabIndex=-1 when inactive", async () => {
-    const el = await defaultFixture()
-    expect(el.ariaSelected).to.equal("false")
-    expect(el.tabIndex).to.equal(-1)
-  })
-
-  it("has ariaSelected=true and tabIndex=0 when active", async () => {
-    const el = await activeFixture()
-    expect(el.ariaSelected).to.equal("true")
-    expect(el.tabIndex).to.equal(0)
-  })
-
-  it("updates ariaSelected and tabIndex reactively when active changes", async () => {
-    const el = await defaultFixture()
-
-    el.active = true
-    await el.updateComplete
-    expect(el.ariaSelected).to.equal("true")
-    expect(el.tabIndex).to.equal(0)
-
-    el.active = false
-    await el.updateComplete
-    expect(el.ariaSelected).to.equal("false")
-    expect(el.tabIndex).to.equal(-1)
-  })
-
-  it("reflects the active property as a boolean attribute", async () => {
-    const el = await defaultFixture()
-    expect(el.hasAttribute("active")).to.be.false
-
-    el.active = true
-    await el.updateComplete
-    expect(el.hasAttribute("active")).to.be.true
-
-    el.active = false
-    await el.updateComplete
-    expect(el.hasAttribute("active")).to.be.false
-  })
-
-  it("reflects the name property as an attribute", async () => {
-    const el = await defaultFixture()
-    expect(el.getAttribute("name")).to.equal("test")
-  })
-
-  it("sets active=true when clicked", async () => {
-    const el = await defaultFixture()
-    expect(el.active).to.be.false
-    el.click()
-    expect(el.active).to.be.true
-  })
-
-  it("dispatches leu:tab-select with the tab name when clicked", async () => {
-    const el = await fixture<LeuTab>(
-      html`<leu-tab name="my-tab">Test</leu-tab>`,
-    )
-    setTimeout(() => el.click())
-    const event = (await oneEvent(el, "leu:tab-select")) as CustomEvent
-    expect(event.detail.name).to.equal("my-tab")
-  })
-
-  it("dispatches leu:tab-select as a bubbling composed event", async () => {
-    const el = await fixture<LeuTab>(
-      html`<leu-tab name="bubble-test">Test</leu-tab>`,
-    )
-    // Listen on document to verify the event crosses shadow boundaries
-    setTimeout(() => el.click())
-    const event = (await oneEvent(document, "leu:tab-select")) as CustomEvent
-    expect(event.bubbles).to.be.true
-    expect(event.composed).to.be.true
-    expect(event.detail.name).to.equal("bubble-test")
-  })
-
-  it("does not dispatch leu:tab-select when already active", async () => {
-    const el = await activeFixture()
-    let fired = false
-    el.addEventListener("leu:tab-select", () => {
-      fired = true
-    })
-    el.click()
-    expect(fired).to.be.false
-  })
-
-  it("does not toggle off when clicking an already-active tab", async () => {
-    const el = await activeFixture()
-    el.click()
-    expect(el.active).to.be.true
-  })
-})

package/src/components/table/Table.ts

@@ -1,253 +0,0 @@
-import { html, nothing } from "lit"
-import { classMap } from "lit/directives/class-map.js"
-import { createRef, ref } from "lit/directives/ref.js"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-import { styleMap } from "../../lib/styleMap.js"
-import { LeuIcon } from "../icon/Icon.js"
-import { LeuPagination } from "../pagination/Pagination.js"
-
-import styles from "./table.css?inline"
-
-/**
- * @tagname leu-table
- */
-export class LeuTable extends LeuElement {
-  static dependencies = {
-    "leu-icon": LeuIcon,
-    "leu-pagination": LeuPagination,
-  }
-
-  static styles = [LeuElement.styles, styles]
-
-  static properties = {
-    columns: { type: Array },
-    data: { type: Array },
-    firstColumnSticky: { type: Boolean, reflect: true },
-    itemsPerPage: { type: Number, reflect: true },
-    sortIndex: { type: Number, reflect: true },
-    sortOrderAsc: { type: Boolean, reflect: true },
-    width: { type: Number, reflect: true },
-
-    _shadowLeft: { state: true },
-    _shadowRight: { state: true },
-    _page: { state: true },
-  }
-
-  constructor() {
-    super()
-    /** @type {array} */
-    this.columns = []
-    /** @type {array} */
-    this.data = []
-    /** @type {boolean} */
-    this.firstColumnSticky = false
-    /** @type {number} */
-    this.itemsPerPage = null
-    /** @type {number} */
-    this.sortIndex = null
-    /** @type {boolean} */
-    this.sortOrderAsc = false
-    /** @type {number} */
-    this.width = null
-
-    /** @internal */
-    this._shadowLeft = false
-    /** @internal */
-    this._shadowRight = false
-    /** @internal */
-    this._scrollRef = createRef()
-
-    /** @internal */
-    this._page = 1
-
-    this._resizeObserver = new ResizeObserver(() => {
-      this.shadowToggle(this._scrollRef.value)
-    })
-  }
-
-  disconnectedCallback() {
-    this._resizeObserver.disconnect()
-  }
-
-  attributeChangedCallback(name, oldVal, newVal) {
-    super.attributeChangedCallback(name, oldVal, newVal)
-
-    if (name === "itemsperpage" || name === "data") {
-      this._page = 1
-    }
-  }
-
-  firstUpdated() {
-    this.shadowToggle(this._scrollRef.value)
-
-    this._resizeObserver.observe(this._scrollRef.value)
-  }
-
-  shadowToggle(target) {
-    this._shadowLeft = target.scrollLeftMax > 0 && target.scrollLeft > 0
-    this._shadowRight =
-      target.scrollLeftMax > 0 && target.scrollLeft < target.scrollLeftMax
-  }
-
-  scrollEvent(event) {
-    this.shadowToggle(event.target)
-  }
-
-  isOnePropNotValid() {
-    if (!this._columns) {
-      return "Der Parameter 'columns' ist erforderlich !"
-    }
-    if (!this._sortedData) {
-      return "Der Parameter 'data' ist erforderlich !"
-    }
-    return null
-  }
-
-  isSorted(col) {
-    return this.sortIndex === this._columns.indexOf(col)
-  }
-
-  sortClick(col) {
-    const index = this._columns.indexOf(col)
-    if (this.sortIndex === index) {
-      this.sortOrderAsc = !this.sortOrderAsc
-    } else {
-      this.sortIndex = index
-      this.sortOrderAsc = false
-    }
-  }
-
-  sortArrowIcon() {
-    return html`<leu-icon
-      name=${this.sortOrderAsc ? "arrowDown" : "arrowUp"}
-    ></leu-icon>`
-  }
-
-  get _columns() {
-    return this.columns
-  }
-
-  get _sortedData() {
-    if (this.sortIndex === null || this.sortIndex === undefined) {
-      return this.data
-    }
-    const col = this._columns[this.sortIndex]
-    return this.data.sort(this.sortOrderAsc ? col.sort.asc : col.sort.desc)
-  }
-
-  get _data() {
-    return this.itemsPerPage && this.itemsPerPage > 0
-      ? this._sortedData.slice(
-          (this._page - 1) * this.itemsPerPage,
-          this._page * this.itemsPerPage,
-        )
-      : this._sortedData
-  }
-
-  render() {
-    const scrollClasses = {
-      scroll: true,
-      "shadow-left": this.firstColumnSticky && this._shadowLeft,
-    }
-
-    const shadowClassesLeft = {
-      shadow: true,
-      "shadow-left": !this.firstColumnSticky && this._shadowLeft,
-      pagination: this.itemsPerPage > 0,
-    }
-
-    const shadowClassesRight = {
-      shadow: true,
-      "shadow-right": this._shadowRight,
-      pagination: this.itemsPerPage > 0,
-    }
-
-    const stickyClass = {
-      sticky: this.firstColumnSticky,
-    }
-
-    function headerStyle(col) {
-      if (col.headerStyle) {
-        return styleMap({
-          ...col.headerStyle(),
-          textAlign: col.align === "right" ? "right" : undefined,
-        })
-      }
-      return col.align === "right" ? styleMap({ textAlign: "right" }) : nothing
-    }
-
-    function bodyStyle(col, row) {
-      if (col.style) {
-        return styleMap({
-          ...col.style(row),
-          textAlign: col.align === "right" ? "right" : undefined,
-        })
-      }
-      return col.align === "right" ? styleMap({ textAlign: "right" }) : nothing
-    }
-
-    return html`
-      <div
-        class=${classMap(scrollClasses)}
-        @scroll="${this.scrollEvent}"
-        ref=${ref(this._scrollRef)}
-      >
-        <table class=${classMap(stickyClass)}>
-          <thead>
-            <tr>
-              ${this._columns.map(
-                (col) =>
-                  html`<th style=${headerStyle(col)}>
-                    ${col.sort
-                      ? html`<button
-                          @click=${(_) => this.sortClick(col)}
-                          class=${this.isSorted(col) ? "active" : nothing}
-                        >
-                          ${col.align === "right"
-                            ? this.sortArrowIcon()
-                            : nothing}
-                          <span>${col.name}</span>
-                          ${col.align !== "right"
-                            ? this.sortArrowIcon()
-                            : nothing}
-                        </button>`
-                      : col.name}
-                  </th>`,
-              )}
-            </tr>
-          </thead>
-          <tbody>
-            ${this._data.map(
-              (row) =>
-                html`<tr>
-                  ${this._columns.map(
-                    (col) =>
-                      html`<td style=${bodyStyle(col, row)}>
-                        ${col.value(row)}
-                      </td>`,
-                  )}
-                </tr>`,
-            )}
-          </tbody>
-        </table>
-        <div class=${classMap(shadowClassesLeft)}></div>
-        <div class=${classMap(shadowClassesRight)}></div>
-      </div>
-
-      ${this.itemsPerPage > 0
-        ? html`
-            <leu-pagination
-              .numOfItems=${this._sortedData.length}
-              .itemsPerPage=${this.itemsPerPage}
-              page=${this._page}
-              @leu:pagechange=${(e) => {
-                this._page = e.detail.page
-              }}
-            >
-            </leu-pagination>
-          `
-        : nothing}
-    `
-  }
-}

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

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

package/src/components/table/stories/table.stories.ts

@@ -1,131 +0,0 @@
-import { html } from "lit"
-import "../leu-table.js"
-
-export default {
-  title: "Components/Table",
-  component: "leu-table",
-  parameters: {
-    design: {
-      type: "figma",
-      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=316-2445&mode=design&t=lzVrtq8lxYVJU5TB-11",
-    },
-  },
-}
-
-function Template({ itemsPerPage }) {
-  return html`
-    <leu-table id="table" itemsPerPage=${itemsPerPage}></leu-table>
-    <script>
-      {
-        const table = document.querySelector("leu-table[id=table]")
-        table.columns = [
-          {
-            name: "Id",
-            value: (row) => row.id,
-          },
-          {
-            name: "Name",
-            value: (row) => row.name,
-            headerStyle: () => {
-              return {
-                color: "#0076bd",
-              }
-            },
-            style: (row) => {
-              return {
-                minWidth: "400px",
-              }
-            },
-            sort: {
-              asc: (rowA, rowB) => rowA.name.localeCompare(rowB.name),
-              desc: (rowA, rowB) => rowB.name.localeCompare(rowA.name),
-            },
-          },
-          {
-            name: "Menge",
-            value: (row) => row.menge + "%",
-            style: (row) => {
-              return {
-                color:
-                  row.menge > 10
-                    ? "var(--leu-color-func-green)"
-                    : "var(--leu-color-func-red)",
-              }
-            },
-            sort: {
-              asc: (rowA, rowB) => rowA.menge - rowB.menge,
-              desc: (rowA, rowB) => rowB.menge - rowA.menge,
-            },
-          },
-        ]
-        table.data = [
-          { id: 1, name: "Ananas", menge: 7 },
-          { id: 2, name: "Apfel", menge: 12 },
-          { id: 3, name: "Aprikose", menge: 3 },
-          { id: 4, name: "Banare", menge: 11 },
-          { id: 5, name: "Birne", menge: 10 },
-          { id: 6, name: "Brombeere", menge: 5 },
-          { id: 7, name: "Cranberries", menge: 3 },
-          { id: 8, name: "Datteln", menge: 2 },
-          { id: 9, name: "Erdbeere", menge: 0 },
-          { id: 10, name: "Feige", menge: 11 },
-          { id: 11, name: "Granatapfel", menge: 14 },
-          { id: 12, name: "Grapefruit", menge: 7 },
-          { id: 13, name: "Heidelbeere", menge: 12 },
-          { id: 14, name: "Himbeere", menge: 3 },
-          { id: 15, name: "Johannisbeere", menge: 11 },
-          { id: 16, name: "Kirsche", menge: 10 },
-          { id: 17, name: "Kiwi", menge: 5 },
-          { id: 18, name: "Limette", menge: 3 },
-          { id: 19, name: "Litschi", menge: 2 },
-          { id: 20, name: "Mandarine", menge: 0 },
-          { id: 21, name: "Mango", menge: 11 },
-          { id: 22, name: "Melone", menge: 14 },
-          { id: 23, name: "Mirabelle", menge: 14 },
-          { id: 24, name: "Nashi", menge: 12 },
-          { id: 25, name: "Orange", menge: 3 },
-          { id: 26, name: "Papaya", menge: 6 },
-          { id: 27, name: "Pfirsich", menge: 5 },
-          { id: 28, name: "Pflaume", menge: 17 },
-          { id: 29, name: "Physalis", menge: 1 },
-          { id: 30, name: "Preiselbeere", menge: 19 },
-          { id: 31, name: "Pomelo", menge: 12 },
-          { id: 32, name: "Quitte", menge: 0 },
-          { id: 33, name: "Rhabarber", menge: 1 },
-          { id: 34, name: "Sanddorn", menge: 2 },
-          { id: 35, name: "Stachelbeere", menge: 19 },
-          { id: 36, name: "Ugli", menge: 9 },
-          { id: 37, name: "Weintraube", menge: 11 },
-          { id: 38, name: "Zitrone", menge: 4 },
-          { id: 39, name: "Zwetschge", menge: 20 },
-        ]
-      }
-    </script>
-  `
-}
-
-export const Regular = Template.bind({})
-Regular.argTypes = {
-  itemsPerPage: { type: "number" },
-  columns: { table: { disable: true } },
-  data: { table: { disable: true } },
-  _columns: { table: { disable: true } },
-  _data: { table: { disable: true } },
-  _min: { table: { disable: true } },
-  _max: { table: { disable: true } },
-  _shadowLeft: { table: { disable: true } },
-  _shadowRight: { table: { disable: true } },
-  _sortArrowDown: { table: { disable: true } },
-  _sortArrowUp: { table: { disable: true } },
-  _scrollRef: { table: { disable: true } },
-  _itemsPerPage: { table: { disable: true } },
-  _sortedData: { table: { disable: true } },
-}
-Regular.args = {
-  itemsPerPage: null,
-}
-
-export const Pagination = Template.bind({})
-Pagination.args = {
-  itemsPerPage: 10,
-}

package/src/components/table/table.css

@@ -1,112 +0,0 @@
-:host {
-  position: relative;
-  display: block;
-}
-
-div.scroll {
-  display: inline-block;
-  width: 100%;
-  overflow: auto;
-}
-
-div.shadow {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  pointer-events: none;
-  z-index: 1;
-}
-
-div.pagination {
-  height: calc(100% - 66px);
-}
-
-table {
-  width: 100%;
-  border-spacing: 0;
-  color: rgb(0 0 0 / 60%);
-  font-size: 16px;
-  font-family: var(--leu-font-family-regular);
-  line-height: 1.5;
-}
-
-td {
-  padding: 12px;
-}
-
-th {
-  padding: 16px 16px 8px;
-  text-align: left;
-  font-size: 12px;
-  font-weight: normal;
-  font-family: var(--leu-font-family-black);
-  background: var(--table-even-row-bg);
-}
-
-td:first-child,
-th:first-child {
-  left: 0;
-  background: inherit;
-  z-index: 1;
-}
-
-tr {
-  background: #fff;
-}
-
-tbody tr:nth-child(odd) {
-  background: var(--leu-color-black-5);
-}
-
-button {
-  background: none;
-  cursor: pointer;
-  line-height: 1.5;
-  padding: 0;
-  border: 0;
-  font-size: inherit;
-  font-family: inherit;
-  color: inherit;
-}
-
-button span {
-  vertical-align: bottom;
-}
-
-button leu-icon {
-  --leu-icon-size: 1.25rem;
-  display: inline-block;
-  padding: 0;
-  opacity: 0;
-  vertical-align: bottom;
-}
-
-button:hover leu-icon {
-  opacity: 1;
-}
-
-button.active leu-icon {
-  color: var(--leu-color-accent-blue);
-  opacity: 1;
-}
-
-table.sticky td:first-child,
-table.sticky th:first-child {
-  position: sticky;
-}
-
-div.shadow-left table.sticky td:first-child,
-div.shadow-left table.sticky th:first-child {
-  box-shadow: 0 0 5px rgb(0 0 0 / 50%);
-  clip-path: inset(0 -15px 0 0);
-}
-
-div.shadow-left {
-  box-shadow: inset 5px 0 5px -5px rgb(0 0 0 / 50%);
-}
-
-div.shadow-right {
-  box-shadow: inset -5px 0 5px -5px rgb(0 0 0 / 50%);
-}

package/src/components/table/test/table.test.ts

@@ -1,37 +0,0 @@
-import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
-
-import "../leu-table.js"
-
-const columns = [
-  { name: "Id", value: (row) => row.id },
-  { name: "Name", value: (row) => row.name },
-  { name: "Menge", value: (row) => row.menge },
-]
-
-const data = [
-  { id: 1, name: "Apfel", menge: 4 },
-  { id: 2, name: "Birne", menge: 2 },
-  { id: 3, name: "Banane", menge: 3 },
-  { id: 4, name: "Orange", menge: 7 },
-]
-
-async function defaultFixture() {
-  return fixture(
-    html`<leu-table .columns=${columns} .data=${data}> </leu-table>`,
-  )
-}
-
-describe("LeuTable", () => {
-  it("is a defined element", async () => {
-    const el = customElements.get("leu-table")
-
-    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/src/components/tag/Tag.ts

@@ -1,28 +0,0 @@
-import { html } from "lit"
-import { property } from "lit/decorators.js"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-
-import styles from "./tag.css?inline"
-
-/**
- * @tagname leu-tag
- * @cssprop --leu-tag-accent-color - The color of the tag
- * @slot default - The label of the tag
- * @slot icon - An icon to display in the tag
- */
-export class LeuTag extends LeuElement {
-  static styles = [LeuElement.styles, styles]
-
-  @property({ type: String })
-  variant: "solid" | "outline" | "ghost" = "solid"
-
-  render() {
-    return html`
-      <div class="tag tag--${this.variant}">
-        <slot class="tag__icon" name="icon"></slot>
-        <slot class="tag__label"></slot>
-      </div>
-    `
-  }
-}