@statistikzh/leu 0.0.2

package/src/components/select/stories/select.stories.js

@@ -0,0 +1,302 @@
+import { html } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+
+import "../leu-select.js"
+
+export default {
+  title: "select",
+  component: "leu-select",
+}
+
+const OPTIONS_EXAMPLES = [
+  { label: "Option 1", value: "1" },
+  "Option 2",
+  "Option 3",
+  "Sehr lange Option um zu schauen was passiert, wenn es zu lang wird.",
+]
+const OPTIONS_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",
+]
+
+function Template({
+  label,
+  options,
+  value,
+  disabled = false,
+  clearable = false,
+  filterable = false,
+  multiple = false,
+  before,
+  after,
+}) {
+  return html`
+    <leu-select
+      class="dropdown"
+      .options=${options}
+      label=${ifDefined(label)}
+      .value=${ifDefined(value)}
+      ?clearable=${clearable}
+      ?disabled=${disabled}
+      ?filterable=${filterable}
+      ?multiple=${multiple}
+    >
+      ${before ? html`<div slot="before">${before}</div>` : ""}
+      ${after ? html`<div slot="after">${after}</div>` : ""}
+    </leu-select>
+  `
+}
+
+function TemplateSlots(args) {
+  const before = html`<div>before</div>`
+  const after = html`<div>after <input type="text"></input></div>`
+
+  return Template({ ...args, before, after })
+}
+
+export const Regular = Template.bind({})
+Regular.args = {
+  label: "Gemeinde",
+  options: OPTIONS_EXAMPLES,
+}
+Regular.parameters = {
+  docs: {
+    description: {
+      story: `To render a basic input field only the \`label\` attribute is required. The \`label\` is necessary for accessibility reasons.
+
+        The label is also used inside \`aria-label\` of the clear button ("\${label} zurücksetzen"). Therefore, the label must not contain a verb like "Gemende auswählen". This would be confusing for screen reader users.
+        `,
+    },
+  },
+}
+
+export const Filled = Template.bind({})
+Filled.args = {
+  label: "Gemeinde",
+  options: OPTIONS_EXAMPLES,
+  value: [OPTIONS_EXAMPLES[1]],
+}
+
+export const Clearable = Template.bind({})
+Clearable.args = {
+  label: "Gemeinde",
+  options: OPTIONS_EXAMPLES,
+  value: [OPTIONS_EXAMPLES[1]],
+  clearable: true,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  label: "Gemeinde",
+  options: OPTIONS_EXAMPLES,
+  clearable: true,
+  disabled: true,
+}
+
+export const DisabledFilled = Template.bind({})
+DisabledFilled.args = {
+  label: "Gemeinde",
+  options: OPTIONS_EXAMPLES,
+  value: [OPTIONS_EXAMPLES[1]],
+  clearable: true,
+  disabled: true,
+}
+
+export const Filterable = Template.bind({})
+Filterable.args = {
+  label: "Gemeinde",
+  options: OPTIONS_MUNICIPALITIES,
+  clearable: true,
+  disabled: false,
+  filterable: true,
+}
+
+/* I also tried sloting the before and after. It doesn't work because the blur event is triggered everytime a slot is clicked */
+export const BeforeAfterSlot = TemplateSlots.bind({})
+BeforeAfterSlot.args = {
+  label: "Gemeinde",
+  options: OPTIONS_MUNICIPALITIES,
+  clearable: true,
+  disabled: false,
+  filterable: false,
+  multiple: true,
+}
+
+export const Multiple = Template.bind({})
+Multiple.args = {
+  label: "Gemeinde",
+  options: OPTIONS_MUNICIPALITIES,
+  clearable: true,
+  disabled: false,
+  filterable: true,
+  multiple: true,
+}
+
+export const MultipleFilled = Template.bind({})
+MultipleFilled.args = {
+  label: "Gemeinde",
+  options: OPTIONS_MUNICIPALITIES,
+  value: OPTIONS_MUNICIPALITIES.slice(0, 2),
+  clearable: true,
+  disabled: false,
+  filterable: true,
+  multiple: true,
+}

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

@@ -0,0 +1,29 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-select.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>
+  `)
+}
+
+describe("LeuSelect", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-select")
+
+    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/table/Table.js

@@ -0,0 +1,301 @@
+import { html, css, 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"
+
+/**
+ * @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 properties = {
+    columns: { type: Array },
+    data: { type: Array },
+    firstColumnSticky: { type: Boolean },
+    itemsOnAPage: { type: Number },
+    sortIndex: { type: Number },
+    sortOrderAsc: { type: Boolean },
+    width: { type: Number },
+
+    _shadowLeft: { type: Boolean, state: true },
+    _shadowRight: { type: Boolean, state: true },
+    _min: { type: Number, state: true },
+    _max: { type: Number, state: true },
+  }
+
+  constructor() {
+    super()
+    /** @type {array} */
+    this.columns = []
+    /** @type {array} */
+    this.data = []
+    /** @type {boolean} */
+    this.firstColumnSticky = false
+    /** @type {number} */
+    this.itemsOnAPage = null
+    /** @type {number} */
+    this.sortIndex = null
+    /** @type {boolean} */
+    this.sortOrderAsc = false
+    /** @type {number} */
+    this.width = null
+
+    /** @internal */
+    this._sortArrowDown = Icon("arrowDown", 20)
+    /** @internal */
+    this._sortArrowUp = Icon("arrowUp", 20)
+    /** @internal */
+    this._shadowLeft = false
+    /** @internal */
+    this._shadowRight = false
+    /** @internal */
+    this._scrollRef = createRef()
+    /** @internal */
+    this._min = 0
+    /** @internal */
+    this._max = null
+  }
+
+  firstUpdated() {
+    this.shadowToggle(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.sortOrder = "asc"
+    }
+  }
+
+  sortArrowIcon() {
+    return html`${this.sortOrderAsc ? this._sortArrowDown : this._sortArrowUp}`
+  }
+
+  sortArrow(col) {
+    return html` ${this.isSorted(col) ? this.sortArrowIcon() : nothing} `
+  }
+
+  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.itemsOnAPage && this.itemsOnAPage > 0
+      ? this._sortedData.slice(this._min, this._max)
+      : 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.itemsOnAPage > 0,
+    }
+
+    const shadowClassesRight = {
+      shadow: true,
+      "shadow-right": this._shadowRight,
+      pagination: this.itemsOnAPage > 0,
+    }
+
+    const stickyClass = {
+      sticky: this.firstColumnSticky,
+    }
+
+    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>
+                    ${col.sort
+                      ? html`<button @click=${(_) => this.sortClick(col)}>
+                          <span>${col.name}</span>
+                          ${this.sortArrow(col)}
+                        </button>`
+                      : col.name}
+                  </th>`
+              )}
+            </tr>
+          </thead>
+          <tbody>
+            ${this._data.map(
+              (row) =>
+                html`<tr>
+                  ${this._columns.map(
+                    (col) =>
+                      html`<td
+                        style=${col.style ? styleMap(col.style(row)) : nothing}
+                      >
+                        ${col.value(row)}
+                      </td>`
+                  )}
+                </tr>`
+            )}
+          </tbody>
+        </table>
+        <div class=${classMap(shadowClassesLeft)}></div>
+        <div class=${classMap(shadowClassesRight)}></div>
+      </div>
+
+      ${this.itemsOnAPage > 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)
+              }}
+            >
+            </leu-pagination>
+          `
+        : nothing}
+    `
+  }
+}
+
+export function defineTableElements() {
+  definePaginationElements()
+  defineElement("table", LeuTable)
+}

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

@@ -0,0 +1,3 @@
+import { defineTableElements } from "./Table.js"
+
+defineTableElements()