@statistikzh/leu 0.3.0 → 0.4.0

package/src/components/select/test/fixtures.js

@@ -0,0 +1,162 @@
+export const MUNICIPALITIES = [
+  "Aeugst am Albis",
+  "Affoltern am Albis",
+  "Bonstetten",
+  "Hausen am Albis",
+  "Hedingen",
+  "Kappel am Albis",
+  "Knonau",
+  "Maschwanden",
+  "Mettmenstetten",
+  "Obfelden",
+  "Ottenbach",
+  "Rifferswil",
+  "Stallikon",
+  "Wettswil am Albis",
+  "Benken (ZH)",
+  "Berg am Irchel",
+  "Buch am Irchel",
+  "Dachsen",
+  "Dorf",
+  "Feuerthalen",
+  "Flaach",
+  "Flurlingen",
+  "Henggart",
+  "Kleinandelfingen",
+  "Laufen-Uhwiesen",
+  "Marthalen",
+  "Ossingen",
+  "Rheinau",
+  "Thalheim an der Thur",
+  "Trüllikon",
+  "Truttikon",
+  "Volken",
+  "Bachenbülach",
+  "Bassersdorf",
+  "Bülach",
+  "Dietlikon",
+  "Eglisau",
+  "Embrach",
+  "Freienstein-Teufen",
+  "Glattfelden",
+  "Hochfelden",
+  "Höri",
+  "Hüntwangen",
+  "Kloten",
+  "Lufingen",
+  "Nürensdorf",
+  "Oberembrach",
+  "Opfikon",
+  "Rafz",
+  "Rorbas",
+  "Wallisellen",
+  "Wasterkingen",
+  "Wil (ZH)",
+  "Winkel",
+  "Bachs",
+  "Boppelsen",
+  "Buchs (ZH)",
+  "Dällikon",
+  "Dänikon",
+  "Dielsdorf",
+  "Hüttikon",
+  "Neerach",
+  "Niederglatt",
+  "Niederhasli",
+  "Niederweningen",
+  "Oberglatt",
+  "Oberweningen",
+  "Otelfingen",
+  "Regensberg",
+  "Regensdorf",
+  "Rümlang",
+  "Schleinikon",
+  "Schöfflisdorf",
+  "Stadel",
+  "Steinmaur",
+  "Weiach",
+  "Bäretswil",
+  "Bubikon",
+  "Dürnten",
+  "Fischenthal",
+  "Gossau (ZH)",
+  "Grüningen",
+  "Hinwil",
+  "Rüti (ZH)",
+  "Seegräben",
+  "Wald (ZH)",
+  "Wetzikon (ZH)",
+  "Adliswil",
+  "Kilchberg (ZH)",
+  "Langnau am Albis",
+  "Oberrieden",
+  "Richterswil",
+  "Rüschlikon",
+  "Thalwil",
+  "Erlenbach (ZH)",
+  "Herrliberg",
+  "Hombrechtikon",
+  "Küsnacht (ZH)",
+  "Männedorf",
+  "Meilen",
+  "Oetwil am See",
+  "Stäfa",
+  "Uetikon am See",
+  "Zumikon",
+  "Zollikon",
+  "Fehraltorf",
+  "Hittnau",
+  "Lindau",
+  "Pfäffikon",
+  "Russikon",
+  "Weisslingen",
+  "Wila",
+  "Wildberg",
+  "Dübendorf",
+  "Egg",
+  "Fällanden",
+  "Greifensee",
+  "Maur",
+  "Mönchaltorf",
+  "Schwerzenbach",
+  "Uster",
+  "Volketswil",
+  "Wangen-Brüttisellen",
+  "Altikon",
+  "Brütten",
+  "Dägerlen",
+  "Dättlikon",
+  "Dinhard",
+  "Ellikon an der Thur",
+  "Elsau",
+  "Hagenbuch",
+  "Hettlingen",
+  "Neftenbach",
+  "Pfungen",
+  "Rickenbach (ZH)",
+  "Schlatt (ZH)",
+  "Seuzach",
+  "Turbenthal",
+  "Winterthur",
+  "Zell (ZH)",
+  "Aesch (ZH)",
+  "Birmensdorf (ZH)",
+  "Dietikon",
+  "Geroldswil",
+  "Oberengstringen",
+  "Oetwil an der Limmat",
+  "Schlieren",
+  "Uitikon",
+  "Unterengstringen",
+  "Urdorf",
+  "Weiningen (ZH)",
+  "Zürich",
+  "Andelfingen",
+  "Stammheim",
+  "Wädenswil",
+  "Elgg",
+  "Horgen",
+  "Illnau-Effretikon",
+  "Bauma",
+  "Wiesendangen",
+]

package/src/components/select/test/select.test.js

@@ -1,29 +1,253 @@
 import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
+import { ifDefined } from "lit/directives/if-defined.js"
+import { fixture, expect, elementUpdated } from "@open-wc/testing"
+import { sendKeys } from "@web/test-runner-commands"
 
 import "../leu-select.js"
+import { MUNICIPALITIES } from "./fixtures.js"
 
-async function defaultFixture() {
-  return fixture(html`
-    <leu-select
-      options='[{"label":"Option 1", "value":"1"}, "Option 2", "Option 3", "Sehr lange Option um zu schauen was passiert, wenn es zu lang wird."]'
-      label="Label"
-      value=${null}
-    >
-    </leu-select>
-  `)
+async function defaultFixture(args = {}) {
+  return fixture(html`<leu-select
+    .options=${args.options}
+    label=${ifDefined(args.label)}
+    .value=${args.value ?? []}
+    ?clearable=${args.clearable}
+    ?disabled=${args.disabled}
+    ?filterable=${args.filterable}
+    ?multiple=${args.multiple}
+  >
+  </leu-select> `)
 }
 
 describe("LeuSelect", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("leu-select")
+    const el = customElements.get("leu-select")
 
     await expect(el).not.to.be.undefined
   })
 
   it("passes the a11y audit", async () => {
-    const el = await defaultFixture()
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+    })
 
     await expect(el).shadowDom.to.be.accessible()
   })
+
+  it("passes the a11y audit in the open state", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      open: true,
+    })
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+
+  it("renders a label", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+
+    expect(toggleButton).to.have.trimmed.text("Gemeinde")
+  })
+
+  it("doesn't show the list of options by default", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+    })
+
+    const dialog = el.shadowRoot.querySelector("dialog")
+
+    expect(dialog).to.not.have.attribute("open")
+  })
+
+  it("opens the list of options when the toggle button is clicked", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const dialog = el.shadowRoot.querySelector("dialog")
+    await elementUpdated(el)
+
+    expect(dialog).to.have.attribute("open")
+  })
+
+  it("has a default value of an empty array", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+    })
+
+    expect(el.value).to.deep.equal([])
+  })
+
+  it("marks the menu item as selected a the value is set", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      value: "Affoltern am Albis",
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const menuItem = el.shadowRoot.querySelector(
+      "leu-menu-item[label='Affoltern am Albis']"
+    )
+
+    expect(menuItem).to.have.attribute("active")
+    expect(menuItem).to.have.attribute("aria-selected")
+  })
+
+  it("shows the clear button when a value is set", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      value: "Affoltern am Albis",
+      clearable: true,
+    })
+
+    const clearButton = el.shadowRoot.querySelector(".clear-button")
+
+    expect(clearButton).to.exist
+  })
+
+  it("renders a input field to filter the options", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      filterable: true,
+    })
+
+    const filterInput = el.shadowRoot.querySelector(".select-search")
+
+    expect(filterInput).to.exist
+  })
+
+  it("filters the options when the filter input is changed", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      filterable: true,
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const filterInput = el.shadowRoot.querySelector(".select-search")
+    filterInput.focus()
+
+    await sendKeys({ type: "am albis" })
+
+    const menuItems = el.shadowRoot.querySelectorAll("leu-menu-item")
+    expect(menuItems.length).to.equal(6)
+  })
+
+  it("resets the filter when the filter input is cleared", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      filterable: true,
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const filterInput = el.shadowRoot.querySelector(".select-search")
+    filterInput.focus()
+
+    await sendKeys({ type: "am albis" })
+
+    const clearFilterButton =
+      filterInput.shadowRoot.querySelector(".clear-button")
+    clearFilterButton.click()
+    await elementUpdated(el)
+
+    const menuItems = el.shadowRoot.querySelectorAll("leu-menu-item")
+    expect(menuItems.length).to.equal(MUNICIPALITIES.length)
+  })
+
+  it("renders a message when no options are available", async () => {
+    const el = await defaultFixture({
+      options: [],
+      label: "Gemeinde",
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const menuItem = el.shadowRoot.querySelector("leu-menu-item")
+    expect(menuItem).to.have.attribute("label", "Keine Optionen")
+  })
+
+  it("renders a message when no options are available after filtering", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      filterable: true,
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const filterInput = el.shadowRoot.querySelector(".select-search")
+    filterInput.focus()
+
+    await sendKeys({ type: "am albissss" })
+
+    const menuItem = el.shadowRoot.querySelector("leu-menu-item")
+    expect(menuItem).to.have.attribute("label", "Keine Resultate")
+  })
+
+  it("renders a apply button when multiple selection is allowed", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      multiple: true,
+    })
+
+    const applyButton = el.shadowRoot.querySelector("leu-menu + .apply-button")
+    expect(applyButton).to.exist
+  })
+
+  it("updates the value when an option is selected", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    const menuItem = el.shadowRoot.querySelector("leu-menu-item[label='Maur']")
+    menuItem.click()
+
+    expect(el.value).to.deep.equal(["Maur"])
+  })
+
+  it("allows a value with multiple values", async () => {
+    const el = await defaultFixture({
+      options: MUNICIPALITIES,
+      label: "Gemeinde",
+      multiple: true,
+    })
+
+    const toggleButton = el.shadowRoot.querySelector(".select-toggle")
+    toggleButton.click()
+
+    el.shadowRoot.querySelector("leu-menu-item[label='Maur']").click()
+    el.shadowRoot.querySelector("leu-menu-item[label='Zollikon']").click()
+
+    expect(el.value).to.deep.equal(["Maur", "Zollikon"])
+  })
 })

package/src/components/table/Table.js

@@ -1,116 +1,30 @@
-import { html, css, LitElement, nothing } from "lit"
+import { html, LitElement, nothing } from "lit"
 import { classMap } from "lit/directives/class-map.js"
 import { styleMap } from "lit/directives/style-map.js"
 import { createRef, ref } from "lit/directives/ref.js"
 import { Icon } from "../icon/icon.js"
-import { defineElement } from "../../lib/defineElement.js"
-import { definePaginationElements } from "../pagination/Pagination.js"
+import "../pagination/leu-pagination.js"
+
+import styles from "./table.css"
 
 /**
  * @tagname leu-table
  */
 export class LeuTable extends LitElement {
-  static styles = css`
-    :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-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-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;
-      width: 100%;
-      display: flex;
-      align-items: flex-center;
-      font-size: inherit;
-      font-family: inherit;
-    }
-    thead svg {
-      display: inline-block;
-      color: var(--leu-color-accent-blue);
-      padding: 0;
-    }
-
-    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%);
-    }
-  `
+  static styles = styles
 
   static properties = {
     columns: { type: Array },
     data: { type: Array },
     firstColumnSticky: { type: Boolean, reflect: true },
-    itemsOnAPage: { type: Number, reflect: true },
+    itemsPerPage: { type: Number, reflect: true },
     sortIndex: { type: Number, reflect: true },
     sortOrderAsc: { type: Boolean, reflect: true },
     width: { type: Number, reflect: true },
 
-    _shadowLeft: { type: Boolean, state: true },
-    _shadowRight: { type: Boolean, state: true },
-    _min: { type: Number, state: true },
-    _max: { type: Number, state: true },
+    _shadowLeft: { state: true },
+    _shadowRight: { state: true },
+    _page: { state: true },
   }
 
   constructor() {
@@ -122,7 +36,7 @@ export class LeuTable extends LitElement {
     /** @type {boolean} */
     this.firstColumnSticky = false
     /** @type {number} */
-    this.itemsOnAPage = null
+    this.itemsPerPage = null
     /** @type {number} */
     this.sortIndex = null
     /** @type {boolean} */
@@ -140,14 +54,31 @@ export class LeuTable extends LitElement {
     this._shadowRight = false
     /** @internal */
     this._scrollRef = createRef()
+
     /** @internal */
-    this._min = 0
-    /** @internal */
-    this._max = null
+    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) {
@@ -205,8 +136,11 @@ export class LeuTable extends LitElement {
   }
 
   get _data() {
-    return this.itemsOnAPage && this.itemsOnAPage > 0
-      ? this._sortedData.slice(this._min, this._max)
+    return this.itemsPerPage && this.itemsPerPage > 0
+      ? this._sortedData.slice(
+          (this._page - 1) * this.itemsPerPage,
+          this._page * this.itemsPerPage
+        )
       : this._sortedData
   }
 
@@ -219,13 +153,13 @@ export class LeuTable extends LitElement {
     const shadowClassesLeft = {
       shadow: true,
       "shadow-left": !this.firstColumnSticky && this._shadowLeft,
-      pagination: this.itemsOnAPage > 0,
+      pagination: this.itemsPerPage > 0,
     }
 
     const shadowClassesRight = {
       shadow: true,
       "shadow-right": this._shadowRight,
-      pagination: this.itemsOnAPage > 0,
+      pagination: this.itemsPerPage > 0,
     }
 
     const stickyClass = {
@@ -274,18 +208,14 @@ export class LeuTable extends LitElement {
         <div class=${classMap(shadowClassesRight)}></div>
       </div>
 
-      ${this.itemsOnAPage > 0
+      ${this.itemsPerPage > 0
         ? html`
             <leu-pagination
-              .dataLength=${this._sortedData.length}
-              .itemsOnAPage=${this.itemsOnAPage}
-              @range-updated=${(e) => {
-                this._min = e.detail.min
-                this._max = e.detail.max
-                // after render
-                setTimeout(() => {
-                  this.shadowToggle(this._scrollRef.value)
-                }, 0)
+              .numOfItems=${this._sortedData.length}
+              .itemsPerPage=${this.itemsPerPage}
+              page=${this._page}
+              @leu:pagechange=${(e) => {
+                this._page = e.detail.page
               }}
             >
             </leu-pagination>
@@ -294,8 +224,3 @@ export class LeuTable extends LitElement {
     `
   }
 }
-
-export function defineTableElements() {
-  definePaginationElements()
-  defineElement("table", LeuTable)
-}

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

@@ -1,3 +1,6 @@
-import { defineTableElements } from "./Table.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuTable } from "./Table.js"
 
-defineTableElements()
+export { LeuTable }
+
+defineElement("table", LeuTable)