@statistikzh/leu 0.4.0 → 0.5.1

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;
+}

package/src/components/pagination/stories/pagination.stories.js

@@ -1,8 +1,11 @@
 import { html } from "lit"
+import { action } from "@storybook/addon-actions"
+
 import "../leu-pagination.js"
 
 // https://stackoverflow.com/questions/72566428/storybook-angular-how-to-dynamically-update-args-from-the-template
 import { UPDATE_STORY_ARGS } from "@storybook/core-events" // eslint-disable-line
+import { ifDefined } from "lit/directives/if-defined.js"
 function updateStorybookArgss(id, args) {
   const channel = window.__STORYBOOK_ADDONS_CHANNEL__
   channel.emit(UPDATE_STORY_ARGS, {
@@ -56,6 +59,9 @@ const items = [
 export default {
   title: "Pagination",
   component: "leu-pagination",
+  args: {
+    onPageChange: action("leu:pagechange"),
+  },
   parameters: {
     design: {
       type: "figma",
@@ -64,15 +70,20 @@ export default {
   },
 }
 
-function Template({ startIndex, endIndex }, { id }) {
+function Template(
+  { startIndex, endIndex, onPageChange, itemsPerPage, defaultPage },
+  { id }
+) {
   return html`
     ${items
       .slice(startIndex, endIndex)
       .map((item) => html`<div>${item.label}</div>`)}
     <leu-pagination
       numOfItems=${items.length}
-      itemsPerPage="5"
+      itemsPerPage=${ifDefined(itemsPerPage)}
+      defaultPage=${ifDefined(defaultPage)}
       @leu:pagechange=${(e) => {
+        onPageChange(e)
         updateStorybookArgss(id, {
           startIndex: e.detail.startIndex,
           endIndex: e.detail.endIndex,
@@ -87,4 +98,6 @@ export const Regular = Template.bind({})
 Regular.args = {
   startIndex: 0,
   endIndex: 5,
+  itemsPerPage: 5,
+  // defaultPage: 2,
 }

package/src/components/pagination/test/pagination.test.js

@@ -10,7 +10,7 @@ async function defaultFixture(args = {}) {
   return fixture(html`<leu-pagination
     numOfItems=${ifDefined(args.numOfItems)}
     itemsPerPage=${ifDefined(args.itemsPerPage)}
-    page=${ifDefined(args.page)}
+    defaultPage=${ifDefined(args.defaultPage)}
   >
   </leu-pagination>`)
 }
@@ -26,7 +26,7 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 98,
       itemsPerPage: 7,
-      page: 1,
+      defaultPage: 1,
     })
 
     await expect(el).shadowDom.to.be.accessible()
@@ -36,7 +36,7 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 98,
       itemsPerPage: 7,
-      page: 1,
+      defaultPage: 1,
     })
 
     const previous = el.shadowRoot.querySelectorAll("leu-button")[0]
@@ -48,7 +48,7 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 98,
       itemsPerPage: 7,
-      page: 14,
+      defaultPage: 14,
     })
 
     const next = el.shadowRoot.querySelectorAll("leu-button")[1]
@@ -60,7 +60,7 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 98,
       itemsPerPage: 7,
-      page: 1,
+      defaultPage: 1,
     })
 
     const label = el.shadowRoot.querySelectorAll(".label")
@@ -72,7 +72,7 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 98,
       itemsPerPage: 7,
-      page: 2,
+      defaultPage: 2,
     })
 
     const input = el.shadowRoot.querySelector("input")
@@ -84,7 +84,7 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 98,
       itemsPerPage: 7,
-      page: 1,
+      defaultPage: 1,
     })
 
     const next = el.shadowRoot.querySelectorAll("leu-button")[1]
@@ -99,7 +99,7 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 98,
       itemsPerPage: 7,
-      page: 10,
+      defaultPage: 10,
     })
 
     const next = el.shadowRoot.querySelectorAll("leu-button")[0]
@@ -114,7 +114,7 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 98,
       itemsPerPage: 7,
-      page: 1,
+      defaultPage: 1,
     })
 
     el.focus()
@@ -131,7 +131,7 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 98,
       itemsPerPage: 7,
-      page: 13,
+      defaultPage: 13,
     })
 
     el.focus()
@@ -148,18 +148,18 @@ describe("LeuPagination", () => {
     const el = await defaultFixture({
       numOfItems: 50,
       itemsPerPage: 10,
-      page: 6,
+      defaultPage: 6,
     })
 
     const input = el.shadowRoot.querySelector("input")
 
-    expect(el.boundPage).to.equal(5)
+    expect(el.page).to.equal(5)
     expect(input.value).to.equal("5")
 
     el.page = 0
     await elementUpdated(el)
 
-    expect(el.boundPage).to.equal(1)
+    expect(el.page).to.equal(1)
     expect(input.value).to.equal("1")
 
     el.focus()
@@ -169,7 +169,7 @@ describe("LeuPagination", () => {
     })
     await elementUpdated(el)
 
-    expect(el.boundPage).to.equal(1)
+    expect(el.page).to.equal(1)
     expect(input.value).to.equal("1")
 
     await sendKeys({ press: "ArrowUp" })
@@ -178,7 +178,7 @@ describe("LeuPagination", () => {
     await sendKeys({ press: "ArrowUp" })
     await sendKeys({ press: "ArrowUp" })
 
-    expect(el.boundPage).to.equal(5)
+    expect(el.page).to.equal(5)
     expect(input.value).to.equal("5")
   })
 

package/src/components/popup/popup.css

@@ -4,8 +4,8 @@
 }
 
 :host {
-  --popup-font-regular: var(--leu-font-regular);
-  --popup-font-black: var(--leu-font-black);
+  --popup-font-regular: var(--leu-font-family-regular);
+  --popup-font-black: var(--leu-font-family-black);
 
   font-family: var(--popup-font-regular);
 }

package/src/components/popup/stories/popup.stories.js

@@ -44,7 +44,7 @@ function Template(args = {}) {
     ?shift=${args.shift}
     placement=${ifDefined(args.placement)}
   >
-    <leu-button slot="anchor" label="Open popup"></leu-button>
+    <leu-button slot="anchor">Open popup</leu-button>
     <div style=${styleMap(popupStyles)}>Popup content</div>
   </leu-popup>`
 }

package/src/components/radio/radio-group.css

@@ -1,6 +1,6 @@
 :host {
-  --group-font-regular: var(--leu-font-regular);
-  --group-font-black: var(--leu-font-black);
+  --group-font-regular: var(--leu-font-family-regular);
+  --group-font-black: var(--leu-font-family-black);
 
   font-family: var(--group-font-regular);
 }

package/src/components/radio/radio.css

@@ -6,7 +6,7 @@
   --radio-label-color: var(--leu-color-black-100);
   --radio-label-color-disabled: var(--radio-color-disabled);
 
-  --radio-font-regular: var(--leu-font-regular);
+  --radio-font-regular: var(--leu-font-family-regular);
 
   display: inline-flex;
   align-items: flex-start;

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

@@ -0,0 +1,87 @@
+import { html, LitElement } from "lit"
+import { classMap } from "lit/directives/class-map.js"
+
+import styles from "./scroll-top.css"
+import "../button/leu-button.js"
+import { throttle } from "../../lib/utils.js"
+
+/**
+ * @tagname leu-scroll-top
+ */
+export class LeuScrollTop extends LitElement {
+  static styles = styles
+
+  static properties = {
+    _showButton: { state: true },
+  }
+
+  constructor() {
+    super()
+    /** @internal */
+    this._prevYPos = 0
+    /** @internal */
+    this._showButton = false
+    /** @internal */
+    this._scrollDown = false
+
+    /** @internal */
+    this._scrollListener = undefined
+  }
+
+  scroll = () => {
+    const delta = window.scrollY - this._prevYPos
+
+    if (this._scrollDown) {
+      if (delta < 0) {
+        this._scrollDown = false
+      }
+    } else if (delta > 0) {
+      this._scrollDown = true
+    }
+
+    /**
+     * Only show the button when
+     * ... the current scroll position is greater than the window height (below-the-fold) and when
+     * ... scrolling up
+     */
+    this._showButton = window.scrollY > window.innerHeight && !this._scrollDown
+    this._prevYPos = window.scrollY
+  }
+
+  connectedCallback() {
+    super.connectedCallback()
+    this._scrollListener = throttle(this.scroll, 100)
+    document.addEventListener("scroll", this._scrollListener, true)
+  }
+
+  disconnectedCallback() {
+    document.removeEventListener("scroll", this._scrollListener, true)
+    super.disconnectedCallback()
+  }
+
+  static scrollToTop() {
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: "smooth",
+    })
+  }
+
+  render() {
+    const cssClasses = {
+      "scroll-top": true,
+      hide: !this._showButton,
+    }
+    return html`
+      <div class=${classMap(cssClasses)}>
+        <leu-button
+          icon="arrowUp"
+          label="Zum Seitenanfang"
+          round
+          @click="${() => LeuScrollTop.scrollToTop()}"
+        >
+        </leu-button>
+      </div>
+    `
+  }
+}

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

@@ -0,0 +1,6 @@
+import { defineElement } from "../../lib/defineElement.js"
+import { LeuScrollTop } from "./ScrollTop.js"
+
+export { LeuScrollTop }
+
+defineElement("scroll-top", LeuScrollTop)

package/src/components/scroll-top/scroll-top.css

@@ -0,0 +1,34 @@
+.scroll-top {
+  overflow: hidden;
+  position: fixed;
+  right: 1.5rem;
+  z-index: 1099;
+  bottom: 8.125rem;
+
+  /* show */
+  height: 50px;
+  pointer-events: auto;
+  transition: height, bottom 0.9s, 0.6s ease;
+}
+
+.hide {
+  height: 0;
+  pointer-events: none;
+  transition: height, top 0.9s, 0.6s ease;
+}
+
+@keyframes hide-animation {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(90deg);
+  }
+}
+
+.hide leu-button {
+  animation-name: hide-animation;
+  animation-duration: 0.45s;
+  animation-timing-function: ease;
+}