@statistikzh/leu 0.4.0 → 0.5.0

package/src/components/chip/chip.css

@@ -20,8 +20,8 @@
   --chip-radio-background-default: var(--leu-color-black-0);
   --chip-radio-background-selected: var(--leu-color-func-cyan);
 
-  --chip-font-regular: var(--leu-font-regular);
-  --chip-font-black: var(--leu-font-black);
+  --chip-font-regular: var(--leu-font-family-regular);
+  --chip-font-black: var(--leu-font-family-black);
 
   --chip-background-color: var(--chip-background-color-default);
   --chip-color: var(--chip-color-default);
@@ -29,6 +29,9 @@
   --chip-radio-background: var(--chip-radio-background-default);
 
   font-family: var(--chip-font-regular);
+
+  /* Allow shrinking to achieve text truncation (ellipsis) */
+  min-width: 0;
 }
 
 :host([inverted]) {
@@ -61,8 +64,11 @@
   cursor: pointer;
 
   display: inline-flex;
-  align-items: center;
   gap: 0.5rem;
+
+  /* Allow shrinking to achieve text truncation (ellipsis) */
+  min-width: 0;
+  max-width: 100%;
 }
 
 .button:hover,
@@ -109,6 +115,7 @@
 
 :host([variant="radio"]) .button::before {
   content: "";
+  flex: 0 0 1rem;
   width: 1rem;
   height: 1rem;
   background-color: var(--chip-radio-background);
@@ -123,6 +130,10 @@
 .label {
   position: relative;
   top: -0.0625rem;
+
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .icon svg {

package/src/components/chip/stories/chip-group.stories.js

@@ -1,7 +1,10 @@
 import { html } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+import { styleMap } from "lit/directives/style-map.js"
 
 import "../leu-chip-selectable.js"
 import "../leu-chip-removable.js"
+import "../leu-chip-link.js"
 import "../leu-chip-group.js"
 
 import { SELECTION_MODES } from "../ChipGroup.js"
@@ -15,7 +18,13 @@ export default {
       control: "select",
       options: Object.values(SELECTION_MODES),
     },
-    inverted: { control: "boolean" },
+    headingLevel: {
+      control: "select",
+      options: [1, 2, 3, 4, 5, 6],
+    },
+    "--leu-chip-group-gap": {
+      control: "text",
+    },
   },
   args: {
     selectionMode: "",
@@ -32,73 +41,115 @@ export default {
   },
 }
 
-const chips = ["Chip 1", "Chip 2", "Chip 3"]
+const chips = [
+  "Chip mit einem sehr langen Text der dann hoffentlich mal abgeschnitten wird",
+  "Chip 2",
+  "Chip 3",
+]
 
-function invertedBackground(args, content) {
-  return html`
-    <div
-      style="background: ${args.inverted
-        ? "hsla(209, 83%, 59%, 1)"
-        : "var(--leu-color-black-5)"}; padding: 1rem;"
-      data-root
+const links = [
+  "Steuererklärung",
+  "Abstimmungen",
+  "Zentrale Aufnahmeprüfung",
+  "Pass & Identitätskarte",
+  "Arbeiten beim Kanton",
+]
+
+function invertedBackground({ args, content }) {
+  return {
+    content: html`
+      <div
+        style="background: ${args.inverted
+          ? "hsla(209, 83%, 59%, 1)"
+          : "var(--leu-color-black-5)"}; padding: 1rem;"
+        data-root
+      >
+        ${content}
+      </div>
+    `,
+    args,
+  }
+}
+
+function chipGroup({ args, content }) {
+  const styles = {
+    "--leu-chip-group-gap": args["--leu-chip-group-gap"],
+  }
+
+  const nextContent = html`
+    <leu-chip-group
+      style=${styleMap(styles)}
+      selection-mode=${ifDefined(args.selectionMode)}
+      heading-level=${ifDefined(args.headingLevel)}
+      label=${ifDefined(args.label)}
+      ?inverted=${args.inverted}
     >
       ${content}
-    </div>
+    </leu-chip-group>
   `
+
+  return { args, content: nextContent }
 }
 
 function DefaultTemplate(args) {
   const content = html`
-    <leu-chip-group selection-mode=${args.selectionMode}>
-      ${chips.map(
-        (chip) => html`
-          <leu-chip-removable ?inverted=${args.inverted} label=${chip}>
-          </leu-chip-removable>
-        `
-      )}
-    </leu-chip-group>
+    ${chips.map(
+      (chip) => html`
+        <leu-chip-removable ?inverted=${args.inverted} label=${chip}>
+        </leu-chip-removable>
+      `
+    )}
   `
 
-  return invertedBackground(args, content)
+  return invertedBackground(chipGroup({ args, content })).content
 }
 
 function SingleTemplate(args) {
   const content = html`
-    <leu-chip-group selection-mode=${args.selectionMode}>
-      ${chips.map(
-        (chip) => html`
-          <leu-chip-selectable
-            ?inverted=${args.inverted}
-            variant=${SELECTABLE_VARIANTS.radio}
-            value="chip-${chip}"
-            label=${chip}
-          >
-          </leu-chip-selectable>
-        `
-      )}
-    </leu-chip-group>
+    ${chips.map(
+      (chip) => html`
+        <leu-chip-selectable
+          ?inverted=${args.inverted}
+          variant=${SELECTABLE_VARIANTS.radio}
+          value="chip-${chip}"
+          label=${chip}
+        >
+        </leu-chip-selectable>
+      `
+    )}
   `
 
-  return invertedBackground(args, content)
+  return invertedBackground(chipGroup({ args, content })).content
 }
 
 function MultipleTemplate(args) {
   const content = html`
-    <leu-chip-group selection-mode=${args.selectionMode}>
-      ${chips.map(
-        (chip) => html`
-          <leu-chip-selectable
-            ?inverted=${args.inverted}
-            value="chip-${chip}"
-            label=${chip}
-          >
-          </leu-chip-selectable>
-        `
-      )}
-    </leu-chip-group>
+    ${chips.map(
+      (chip) => html`
+        <leu-chip-selectable
+          ?inverted=${args.inverted}
+          value="chip-${chip}"
+          label=${chip}
+        >
+        </leu-chip-selectable>
+      `
+    )}
   `
 
-  return invertedBackground(args, content)
+  return invertedBackground(chipGroup({ args, content })).content
+}
+
+function LabeledTemplate(args) {
+  const content = html`
+    ${links.map(
+      (chip) => html`
+        <leu-chip-link ?inverted=${args.inverted} label=${chip}>
+        </leu-chip-link>
+      `
+    )}
+  `
+
+  return invertedBackground(chipGroup({ args, content })).content
 }
 
 export const Default = DefaultTemplate.bind({})
@@ -109,3 +160,6 @@ Single.args = { selectionMode: SELECTION_MODES.single }
 
 export const Multiple = MultipleTemplate.bind({})
 Multiple.args = { selectionMode: SELECTION_MODES.multiple }
+
+export const Labeled = LabeledTemplate.bind({})
+Labeled.args = { label: "Top Themen" }

package/src/components/chip/test/chip-removable.test.js

@@ -4,7 +4,7 @@ import { sendKeys } from "@web/test-runner-commands"
 
 import { iconPaths } from "../../icon/icon.js"
 
-import "../leu-chip-group.js"
+import "../leu-chip-removable.js"
 
 async function defaultFixture() {
   return fixture(
@@ -62,7 +62,7 @@ describe("LeuChipRemovable", () => {
     const button = el.shadowRoot.querySelector("button")
 
     setTimeout(() => button.click())
-    const event = await oneEvent(el, "remove")
+    const event = await oneEvent(el, "leu:remove")
 
     expect(event).to.exist
   })
@@ -72,7 +72,7 @@ describe("LeuChipRemovable", () => {
 
     el.focus()
     setTimeout(() => sendKeys({ press: "Enter" }))
-    const event = await oneEvent(el, "remove")
+    const event = await oneEvent(el, "leu:remove")
 
     expect(event).to.exist
   })

package/src/components/dropdown/Dropdown.js

@@ -25,9 +25,29 @@ export class LeuDropdown extends LitElement {
     this.menuItems = []
   }
 
+  connectedCallback() {
+    super.connectedCallback()
+    this.addEventListener("keyup", this._keyUpHandler)
+    document.addEventListener("click", this._documentClickHandler)
+  }
+
   disconnectedCallback() {
     super.disconnectedCallback()
     this._removeMenuItemListeners()
+    this.removeEventListener("keyup", this._keyUpHandler)
+    document.removeEventListener("click", this._documentClickHandler)
+  }
+
+  _documentClickHandler = (event) => {
+    if (!this.contains(event.target)) {
+      this.expanded = false
+    }
+  }
+
+  _keyUpHandler(event) {
+    if (event.key === "Escape") {
+      this.expanded = false
+    }
   }
 
   _handleSlotChange() {
@@ -67,13 +87,13 @@ export class LeuDropdown extends LitElement {
           slot="anchor"
           icon="download"
           variant="ghost"
-          label=${this.label}
-          expanded=${this.expanded ? "open" : "closed"}
+          expanded=${this.expanded ? "true" : "false"}
           aria-expanded=${this.expanded ? "true" : "false"}
           aria-controls="content"
           ?active=${this.expanded}
           @click=${this._handleToggleClick}
-        ></leu-button>
+          >${this.label}</leu-button
+        >
         <div id="content" class="content" ?hidden=${!this.expanded}>
           <slot @slotchange=${this._handleSlotChange}></slot>
         </div>

package/src/components/input/Input.js

@@ -56,6 +56,7 @@ const VALIDATION_MESSAGES = {
  * @prop {string} maxlength - The maximum length of the input element.
  * @prop {object} validationMessages - Custom validation messages. The key is the name of the validity state and the value is the message.
  * @prop {boolean} novalidate - Disables the browser's validation.
+ * @prop {string} step - The step value of the input element.
  *
  * @fires {CustomEvent} input - Dispatched when the value of the input element changes.
  * @fires {CustomEvent} change - Dispatched when the value of the input element changes and the input element loses focus.
@@ -91,12 +92,13 @@ export class LeuInput extends LitElement {
     /* Validation attributes */
     pattern: { type: String, reflect: true },
     type: { type: String, reflect: true },
-    min: { type: Number, reflect: true },
-    max: { type: Number, reflect: true },
-    maxlength: { type: Number, reflect: true },
-    minlength: { type: Number, reflect: true },
+    min: { type: String, reflect: true },
+    max: { type: String, reflect: true },
+    maxlength: { type: String, reflect: true },
+    minlength: { type: String, reflect: true },
     validationMessages: { type: Object },
     novalidate: { type: Boolean, reflect: true },
+    step: { type: String, reflect: true },
 
     /** @type {ValidityState} */
     _validity: { state: true },
@@ -407,6 +409,7 @@ export class LeuInput extends LitElement {
           max=${ifDefined(this.max)}
           maxlength=${ifDefined(this.maxlength)}
           minlength=${ifDefined(this.minlength)}
+          step=${ifDefined(this.step)}
           ref=${ref(this._inputRef)}
           aria-invalid=${isInvalid}
         />

package/src/components/input/input.css

@@ -26,8 +26,8 @@
 
   --input-clear-color: var(--leu-color-black-60);
 
-  --input-font-regular: var(--leu-font-regular);
-  --input-font-black: var(--leu-font-black);
+  --input-font-regular: var(--leu-font-family-regular);
+  --input-font-black: var(--leu-font-family-black);
 
   display: block;
   font-family: var(--input-font-regular);

package/src/components/input/stories/input.stories.js

@@ -42,12 +42,15 @@ function Template(args) {
     max,
     minlength,
     maxlength,
+    step,
     disabled = false,
     required = false,
     clearable = false,
     novalidate = false,
   } = args
 
+  console.log(min, max)
+
   return html`
     <leu-input
       value=${ifDefined(value)}
@@ -62,6 +65,7 @@ function Template(args) {
       max=${ifDefined(max)}
       minlength=${ifDefined(minlength)}
       maxlength=${ifDefined(maxlength)}
+      step=${ifDefined(step)}
       label=${label}
       ?disabled=${disabled}
       ?required=${required}
@@ -189,3 +193,12 @@ Search.parameters = {
     },
   },
 }
+
+export const Step = Template.bind({})
+Step.args = {
+  label: "Tage",
+  type: "number",
+  min: "1",
+  max: "7",
+  step: "1",
+}

package/src/components/input/test/input.test.js

@@ -21,6 +21,7 @@ async function defaultFixture(args = {}) {
       max=${ifDefined(args.max)}
       minlength=${ifDefined(args.minlength)}
       maxlength=${ifDefined(args.maxlength)}
+      step=${ifDefined(args.step)}
       label=${args.label || "Label"}
       ?disabled=${args.disabled}
       ?required=${args.required}

package/src/components/menu/menu-item.css

@@ -10,10 +10,10 @@
   --background-disabled: var(--leu-color-black-black-0);
   --color: var(--leu-color-black-transp-60);
   --color-disabled: var(--leu-color-black-transp-20);
-  --font-regular: var(--leu-font-regular);
-  --font-black: var(--leu-font-black);
+  --font-regular: var(--leu-font-family-regular);
+  --font-black: var(--leu-font-family-black);
 
-  font-family: var(--leu-font-regular);
+  font-family: var(--leu-font-family-regular);
 }
 
 .button {

package/src/components/pagination/Pagination.js

@@ -4,6 +4,8 @@ import { live } from "lit/directives/live.js"
 import "../button/leu-button.js"
 import styles from "./pagination.css"
 
+import "../visually-hidden/leu-visually-hidden.js"
+
 const MIN_PAGE = 1
 
 /**
@@ -20,62 +22,84 @@ export class LeuPagination extends LitElement {
     delegatesFocus: true,
   }
 
-  static events = {
-    range: {},
-  }
-
   static properties = {
-    page: { type: Number, reflect: true },
+    defaultPage: { type: Number, reflect: true },
     itemsPerPage: { type: Number, reflect: true },
     numOfItems: { type: Number, reflect: true },
+
+    /**
+     * Internal page state that contains an
+     * already clamped page number. Should only
+     * be accessed through the `page` getter and
+     * setter.
+     * @type {Number}
+     * @internal
+     */
+    _page: { state: true },
   }
 
   constructor() {
     super()
-    /** @type {number} */
-    this.page = 1
-    /** @type {number} */
+
+    /** @type {Number} */
     this.numOfItems = 1
-    /** @type {number} */
+    /** @type {Number} */
     this.itemsPerPage = 1
+    /** @type {Number} */
+    this._page = 1
   }
 
-  get maxPage() {
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback(name, oldVal, newVal)
+
+    if (name === "defaultpage" && newVal !== oldVal) {
+      this.page = parseInt(newVal, 10)
+    }
+  }
+
+  get page() {
+    return this._page
+  }
+
+  set page(page) {
+    this._page = this._clampPage(page)
+  }
+
+  get startIndex() {
+    return (this.page - 1) * this.itemsPerPage
+  }
+
+  get endIndex() {
+    return Math.min(this.startIndex + this.itemsPerPage, this.numOfItems)
+  }
+
+  get _maxPage() {
     return Math.ceil(this.numOfItems / this.itemsPerPage)
   }
 
-  get firstPage() {
-    return this.boundPage === MIN_PAGE
+  _isFirstPage() {
+    return this.page === MIN_PAGE
   }
 
-  get lastPage() {
-    return this.boundPage === this.maxPage
+  _isLastPage() {
+    return this.page === this._maxPage
   }
 
-  /**
-   * The boundPage getter is necessary to ensure that the current page (this.page) is always within the valid range of pages.
-   * It prevents the page number from going below the minimum page limit (MIN_PAGE) or above the maximum page limit (this.maxPage).
-   * This is important for the correct functioning of the pagination system, as it prevents users from navigating to non-existent pages.
-   *
-   * @returns {number}
-   */
-  get boundPage() {
-    return Math.min(Math.max(this.page, MIN_PAGE), this.maxPage)
+  _clampPage(page) {
+    return Math.min(Math.max(page, MIN_PAGE), this._maxPage)
   }
 
-  numberUpdate(number) {
+  _updatePage(page) {
     const prevPage = this.page
-    this.page = number
+    this.page = this._clampPage(page)
 
     if (this.page !== prevPage) {
-      const startIndex = (this.boundPage - 1) * this.itemsPerPage
-      const endIndex = Math.min(startIndex + this.itemsPerPage, this.numOfItems)
       this.dispatchEvent(
         new CustomEvent("leu:pagechange", {
           detail: {
-            startIndex,
-            endIndex,
-            page: this.boundPage,
+            startIndex: this.startIndex,
+            endIndex: this.endIndex,
+            page: this.page,
           },
           bubbles: false,
         })
@@ -83,58 +107,65 @@ export class LeuPagination extends LitElement {
     }
   }
 
-  change(event) {
-    this.numberUpdate(parseInt(event.target.value, 10) || 0)
+  _handleChange(event) {
+    this._updatePage(parseInt(event.target.value, 10) || 0)
   }
 
-  input(event) {
+  _handleInput(event) {
     if (event.target.value !== "") {
       event.preventDefault()
-      this.change(event)
+      this._handleChange(event)
     }
   }
 
-  keydown(event) {
+  _handleKeyDown(event) {
     if (event.key === "ArrowUp") {
       event.preventDefault()
-      this.numberUpdate(this.boundPage + 1)
+      this._updatePage(this.page + 1)
     }
     if (event.key === "ArrowDown") {
       event.preventDefault()
-      this.numberUpdate(this.boundPage - 1)
+      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.boundPage.toString())}
-        @input=${this.input}
-        @change=${this.change}
-        @keydown=${this.keydown}
+        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>
-      <leu-button
-        icon="angleLeft"
-        variant="secondary"
-        @click=${(_) => {
-          this.numberUpdate(this.boundPage - 1)
-        }}
-        ?disabled=${this.firstPage}
-      ></leu-button>
-      <leu-button
-        icon="angleRight"
-        variant="secondary"
-        @click=${(_) => {
-          this.numberUpdate(this.boundPage + 1)
-        }}
-        ?disabled=${this.lastPage}
-        style="margin-left:4px;"
-      ></leu-button>
+      <div class="label">von ${this._maxPage}</div>
+      <div class="button-group">
+        <leu-button
+          icon="angleLeft"
+          variant="secondary"
+          label="Vorherige Seite"
+          @click=${(_) => {
+            this._updatePage(this.page - 1)
+          }}
+          ?disabled=${this._isFirstPage()}
+        ></leu-button>
+        <leu-button
+          icon="angleRight"
+          variant="secondary"
+          label="Nächste Seite"
+          @click=${(_) => {
+            this._updatePage(this.page + 1)
+          }}
+          ?disabled=${this._isLastPage()}
+        ></leu-button>
+      </div>
     `
   }
 }

package/src/components/pagination/pagination.css

@@ -2,7 +2,7 @@
   margin-top: 16px;
   display: flex;
   justify-content: end;
-  font-family: var(--leu-font-regular);
+  font-family: var(--leu-font-family-regular);
 }
 
 .input {
@@ -47,3 +47,8 @@
   color: var(--leu-color-black-transp-60);
   white-space: nowrap;
 }
+
+.button-group {
+  display: flex;
+  gap: 0.25rem;
+}