@statistikzh/leu 0.3.0 → 0.5.0

package/src/components/scroll-top/test/scroll-top.test.js

@@ -0,0 +1,22 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-scroll-top.js"
+
+async function defaultFixture() {
+  return fixture(html` <leu-scroll-top /> `)
+}
+
+describe("LeuScrollTop", () => {
+  it("is a defined element", async () => {
+    const el = await customElements.get("leu-scroll-top")
+
+    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/select/Select.js

@@ -6,13 +6,14 @@ import { ifDefined } from "lit/directives/if-defined.js"
 import { createRef, ref } from "lit/directives/ref.js"
 
 import { Icon } from "../icon/icon.js"
-import { defineElement } from "../../lib/defineElement.js"
 import { HasSlotController } from "../../lib/hasSlotController.js"
-import { defineButtonElements } from "../button/Button.js"
-import { defineMenuElements } from "../menu/Menu.js"
-import { defineMenuItemElements } from "../menu/MenuItem.js"
-import { defineInputElements } from "../input/Input.js"
+import "../button/leu-button.js"
+import "../menu/leu-menu.js"
+import "../menu/leu-menu-item.js"
+import "../input/leu-input.js"
+import "../popup/leu-popup.js"
 
+// @ts-ignore
 import styles from "./select.css"
 
 /**
@@ -25,8 +26,7 @@ export class LeuSelect extends LitElement {
 
   static get properties() {
     return {
-      open: { type: Boolean, attribute: "open" },
-
+      open: { type: Boolean, reflect: true },
       label: { type: String, reflect: true },
       options: { type: Array },
       value: { type: Array },
@@ -34,7 +34,7 @@ export class LeuSelect extends LitElement {
       disabled: { type: Boolean, reflect: true },
       filterable: { type: Boolean, reflect: true },
       multiple: { type: Boolean, reflect: true },
-      optionFilter: { type: String, state: true },
+      optionFilter: { state: true },
     }
   }
 
@@ -53,9 +53,14 @@ export class LeuSelect extends LitElement {
   constructor() {
     super()
     this.open = false
+    this.disabled = false
+    this.open = false
+    this.multiple = false
     this.clearable = false
+    this.filterable = false
     this.value = []
     this.options = []
+    this.label = ""
 
     /** @internal */
     this._arrowIcon = Icon("angleDropDown")
@@ -69,8 +74,17 @@ export class LeuSelect extends LitElement {
     /** @internal */
     this.deferedChangeEvent = false
 
+    /**
+     * @type {import("lit/directives/ref").Ref<import("../menu/Menu").LeuMenu>}
+     */
     this.menuRef = createRef()
+    /**
+     * @type {import("lit/directives/ref").Ref<import("../input/Input").LeuInput>}
+     */
     this.optionFilterRef = createRef()
+    /**
+     * @type {import("lit/directives/ref").Ref<HTMLButtonElement>}
+     */
     this.toggleButtonRef = createRef()
   }
 
@@ -102,7 +116,11 @@ export class LeuSelect extends LitElement {
    * @param {MouseEvent} event
    */
   handleDocumentClick = (event) => {
-    if (!this.contains(event.target) && this.open) {
+    if (
+      event.target instanceof Node &&
+      !this.contains(event.target) &&
+      this.open
+    ) {
       this.closeDropdown()
     }
   }
@@ -251,17 +269,18 @@ export class LeuSelect extends LitElement {
                 before=${ifDefined(beforeIcon)}
                 @click=${() => this.selectOption(option)}
                 role="option"
+                label=${LeuSelect.getOptionLabel(option)}
                 ?active=${isSelected}
                 aria-selected=${isSelected}
               >
-                ${LeuSelect.getOptionLabel(option)}
               </leu-menu-item>`
             })
-          : html`<leu-menu-item disabled
-              >${this.optionFilter === ""
+          : html`<leu-menu-item
+              label=${this.optionFilter === ""
                 ? "Keine Optionen"
-                : "Keine Resultate"}</leu-menu-item
-            >`}
+                : "Keine Resultate"}
+              disabled
+            ></leu-menu-item>`}
       </leu-menu>
     `
   }
@@ -274,8 +293,8 @@ export class LeuSelect extends LitElement {
         @input=${this.handleFilterInput}
         clearable
         ref=${ref(this.optionFilterRef)}
-        >Nach Stichwort filtern</leu-input
-      >`
+        label="Nach Stichwort filtern"
+      ></leu-input>`
     }
 
     return nothing
@@ -288,9 +307,9 @@ export class LeuSelect extends LitElement {
           type="button"
           class="apply-button"
           @click=${this.handleApplyClick}
-          label="Anwenden"
           fluid
-        ></leu-button>
+          >Anwenden</leu-button
+        >
       `
     }
 
@@ -314,11 +333,12 @@ export class LeuSelect extends LitElement {
       aria-expanded="${this.open}"
       role="combobox"
       ref=${ref(this.toggleButtonRef)}
+      slot="anchor"
     >
       <span class="label" id="select-label">${this.label}</span>
       <span class="value"> ${this.getDisplayValue(this.value)} </span>
       <span class="arrow-icon"> ${this._arrowIcon} </span>
-      ${this.clearable && this.value !== "" && this.value.length !== 0
+      ${this.clearable && this.value.length !== 0
         ? html`<button
             type="button"
             class="clear-button"
@@ -346,25 +366,26 @@ export class LeuSelect extends LitElement {
       aria-labelledby="select-label"
       @keydown=${this.handleKeyDown}
     >
-      ${this.renderToggleButton()}
-      <dialog
-        id="select-dialog"
-        class="select-menu-container"
-        ?open=${this.open}
+      <leu-popup
+        ?active=${this.open}
+        placement="bottom-start"
+        flip
+        matchSize="width"
+        autoSize="height"
+        autoSizePadding="8"
       >
-        <slot name="before" class="before"></slot>
-        ${this.renderFilterInput()} ${this.renderMenu()}
-        ${this.renderApplyButton()}
-        <slot name="after" class="after"></slot>
-      </dialog>
+        ${this.renderToggleButton()}
+        <dialog
+          id="select-dialog"
+          class="select-menu-container"
+          ?open=${this.open}
+        >
+          <slot name="before" class="before"></slot>
+          ${this.renderFilterInput()} ${this.renderMenu()}
+          ${this.renderApplyButton()}
+          <slot name="after" class="after"></slot>
+        </dialog>
+      </leu-popup>
     </div> `
   }
 }
-
-export function defineSelectElements() {
-  defineButtonElements()
-  defineMenuElements()
-  defineMenuItemElements()
-  defineInputElements()
-  defineElement("select", LeuSelect)
-}

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

@@ -1,3 +1,6 @@
-import { defineSelectElements } from "./Select.js"
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuSelect } from "./Select.js"
 
-defineSelectElements()
+export { LeuSelect }
+
+defineElement("select", LeuSelect)

package/src/components/select/select.css

@@ -26,8 +26,8 @@
 
   --select-clear-color: var(--leu-color-black-60);
 
-  --select-font-regular: var(--leu-font-regular);
-  --select-font-black: var(--leu-font-black);
+  --select-font-regular: var(--leu-font-family-regular);
+  --select-font-black: var(--leu-font-family-black);
 
   --select-apply-button-color: var(--leu-color-black-100);
   --select-apply-button-color-focus: var(--leu-color-black-80);
@@ -165,18 +165,22 @@
 }
 
 .select-menu-container {
-  border-radius: 1px;
-  position: absolute;
-  left: 0;
+  position: static;
+  overflow: auto;
+
+  display: flex;
+  flex-direction: column;
+
   width: 100%;
-  background-color: white;
-  border: 0 solid black;
+  max-height: var(--auto-size-available-height);
+
   padding: 0;
   margin: 0;
-  top: calc(100% + 2px);
-  z-index: 10;
+
+  border: none;
+  border-radius: 1px;
+  background-color: white;
   box-shadow: var(--select-box-shadow-regular), var(--select-box-shadow-short);
-  overflow: auto;
 }
 
 .select-menu {
@@ -184,11 +188,7 @@
   padding: 0;
   margin: 0;
   overflow: auto;
-  max-height: 24rem;
-}
-
-.select-menu.multiple {
-  max-height: 21rem;
+  max-height: 100%;
 }
 
 .before,

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

@@ -2,10 +2,17 @@ import { html } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
 
 import "../leu-select.js"
+import { MUNICIPALITIES } from "../test/fixtures.js"
 
 export default {
-  title: "select",
+  title: "Select",
   component: "leu-select",
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=17340-82208&mode=design&t=lzVrtq8lxYVJU5TB-11",
+    },
+  },
 }
 
 const OPTIONS_EXAMPLES = [
@@ -14,168 +21,6 @@ const OPTIONS_EXAMPLES = [
   "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,
@@ -189,6 +34,7 @@ function Template({
   after,
 }) {
   return html`
+    <div style="margin-top: 50vh"></div>
     <leu-select
       class="dropdown"
       .options=${options}
@@ -202,6 +48,7 @@ function Template({
       ${before ? html`<div slot="before">${before}</div>` : ""}
       ${after ? html`<div slot="after">${after}</div>` : ""}
     </leu-select>
+    <div style="margin-top: 50vh"></div>
   `
 }
 
@@ -263,7 +110,7 @@ DisabledFilled.args = {
 export const Filterable = Template.bind({})
 Filterable.args = {
   label: "Gemeinde",
-  options: OPTIONS_MUNICIPALITIES,
+  options: MUNICIPALITIES,
   clearable: true,
   disabled: false,
   filterable: true,
@@ -273,7 +120,7 @@ Filterable.args = {
 export const BeforeAfterSlot = TemplateSlots.bind({})
 BeforeAfterSlot.args = {
   label: "Gemeinde",
-  options: OPTIONS_MUNICIPALITIES,
+  options: MUNICIPALITIES,
   clearable: true,
   disabled: false,
   filterable: false,
@@ -283,7 +130,7 @@ BeforeAfterSlot.args = {
 export const Multiple = Template.bind({})
 Multiple.args = {
   label: "Gemeinde",
-  options: OPTIONS_MUNICIPALITIES,
+  options: MUNICIPALITIES,
   clearable: true,
   disabled: false,
   filterable: true,
@@ -293,8 +140,8 @@ Multiple.args = {
 export const MultipleFilled = Template.bind({})
 MultipleFilled.args = {
   label: "Gemeinde",
-  options: OPTIONS_MUNICIPALITIES,
-  value: OPTIONS_MUNICIPALITIES.slice(0, 2),
+  options: MUNICIPALITIES,
+  value: MUNICIPALITIES.slice(0, 2),
   clearable: true,
   disabled: false,
   filterable: true,

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",
+]