@statistikzh/leu 0.28.1 → 0.28.3

package/src/components/button/Button.ts

@@ -1,286 +0,0 @@
-import { nothing } from "lit"
-import { html, literal } from "lit/static-html.js"
-import { classMap } from "lit/directives/class-map.js"
-import { ifDefined } from "lit/directives/if-defined.js"
-import { property, query } from "lit/decorators.js"
-
-import { LeuIcon } from "../icon/Icon.js"
-import { LeuSpinner } from "../spinner/Spinner.js"
-import { LeuElement } from "../../lib/LeuElement.js"
-import { HasSlotController } from "../../lib/hasSlotController.js"
-import { ARIA_CHECKED_ROLES, ARIA_SELECTED_ROLES } from "../../lib/a11y.js"
-
-import styles from "./button.css?inline"
-import { FormAssociatedMixin } from "../../lib/mixins/FormAssociatedMixin.js"
-
-/**
- * @tagname leu-button
- * @slot before - The icon to display before the label
- * @slot after - The icon to display after the label
- * @slot - The label of the button or the icon if no label is set
- * @see https://www.figma.com/file/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?type=design&node-id=4-1444&mode=design&t=xu5Vii8jXKKCKDez-0
- */
-export class LeuButton extends FormAssociatedMixin(LeuElement) {
-  static dependencies = {
-    "leu-icon": LeuIcon,
-    "leu-spinner": LeuSpinner,
-  }
-
-  static styles = [LeuElement.styles, styles]
-
-  static shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-  }
-
-  private hasSlotController = new HasSlotController(this, [
-    "before",
-    "after",
-    "[default]",
-  ])
-
-  /**
-   * `aria-label` of the underlying button elements.
-   * Use it to provide a label when only an icon is visible.
-   */
-  @property({ type: String, reflect: true })
-  label: null | string = null
-
-  /**
-   * The size of the button.
-   */
-  @property({ type: String, reflect: true })
-  size: "regular" | "small" = "regular"
-
-  /**
-   * The visual variant of the button.
-   */
-  @property({ type: String, reflect: true })
-  variant: "primary" | "secondary" | "ghost" = "primary"
-
-  /**
-   * The `type` of the underlying button element. Ignored when `href` is set.
-   */
-  @property({ type: String, reflect: true })
-  type: "button" | "submit" | "reset" = "button"
-
-  /**
-   * The `role` of the underlying button element. Ignored when `href` is set.
-   */
-  @property({ type: String, reflect: true })
-  componentRole?: string
-
-  /**
-   * If set, renders the button as an <a> element instead of a <button> with the provided href.
-   */
-  @property({ type: String, reflect: true })
-  href: string
-
-  /** Tells the browser where to display the linked URL. Only used when `href` is set. */
-  @property() target: "_blank" | "_parent" | "_self" | "_top"
-
-  /**
-   * Whether the button is disabled or not. Ignored when `href` is set.
-   * @type {boolean}
-   */
-  @property({ type: Boolean, reflect: true })
-  disabled: boolean = false
-
-  /**
-   * Whether the button should be round.
-   * Can only be applied when the button contains an icon without a visible label.
-   * @type {boolean}
-   */
-  @property({ type: Boolean, reflect: true })
-  round: boolean = false
-
-  /**
-   * Whether the button is active or not.
-   * Depending on the `componentRole`, it applies `aria-checked` or `aria-selected` to the underlying button element.
-   */
-  @property({ type: Boolean, reflect: true })
-  active: boolean = false
-
-  /**
-   * Wheter the colors should be inverted. For use on dark backgrounds.
-   */
-  @property({ type: Boolean, reflect: true })
-  inverted: boolean = false
-
-  /**
-   * Whether the button is expanded or not.
-   * Only has an effect on the variant `ghost` to show an expanding icon.
-   * If the property is not set, the icon will not be shown.
-   * If it is set, the icon will either show an expanded or collapsed state.
-   */
-  @property({ type: String, reflect: true })
-  expanded?: "true" | "false"
-
-  /**
-   * Replaces the content with a spinner
-   */
-  @property({ type: Boolean, reflect: true })
-  loading: boolean = false
-
-  @query(".button")
-  private button!: HTMLButtonElement | HTMLAnchorElement
-
-  private renderExpandingIcon() {
-    if (typeof this.expanded !== "undefined" && this.variant === "ghost") {
-      return html`<div class="icon-expanded">
-        <leu-icon name="angleDropDown" size="24"></leu-icon>
-      </div>`
-    }
-
-    return nothing
-  }
-
-  private getAriaAttributes() {
-    const attributes: {
-      role: string
-      label: string
-      checked?: "true" | "false"
-      selected?: "true" | "false"
-    } = {
-      role: this.componentRole,
-      label: this.label,
-    }
-
-    // TODO: checked and selected roles are not mutually exclusive
-    if (this.componentRole) {
-      if (
-        (ARIA_CHECKED_ROLES as ReadonlyArray<string>).includes(
-          this.componentRole,
-        )
-      ) {
-        attributes.checked = this.active ? "true" : "false"
-      } else if (
-        (ARIA_SELECTED_ROLES as ReadonlyArray<string>).includes(
-          this.componentRole,
-        )
-      ) {
-        attributes.selected = this.active ? "true" : "false"
-      }
-    }
-
-    return attributes
-  }
-
-  private hasTextContent() {
-    return Array.from(this.childNodes).some(
-      (node) =>
-        node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "",
-    )
-  }
-
-  // The form value is set at the very moment the button is clicked.
-  /* eslint-disable-next-line class-methods-use-this */
-  setFormValue() {}
-
-  protected handleClick(e: PointerEvent) {
-    if (this.disabled || this.loading) {
-      e.preventDefault()
-      e.stopImmediatePropagation()
-      return
-    }
-
-    const form = this.internals.form
-
-    if (this.type === "button" || !form) {
-      return
-    }
-
-    if (this.type === "reset") {
-      form.reset()
-    }
-
-    /**
-     * Form associated custom elements don't trigger form submission when they have `type="submit"`.
-     * They also can't be passed as the submitter to `form.requestSubmit()`.
-     * To work around this, we create a temporary hidden button, trigger the submission through it and remove it afterwards.
-     * Hopefully we can move away from this workaround in the future.
-     */
-    if (this.type === "submit") {
-      const proxyButton = document.createElement("button")
-      Object.assign(proxyButton, {
-        type: "submit",
-        name: this.name,
-        value: this.getAttribute("value") ?? "",
-      })
-
-      form.appendChild(proxyButton)
-      form.requestSubmit(proxyButton)
-      form.removeChild(proxyButton)
-    }
-  }
-
-  click() {
-    this.button.click()
-  }
-
-  focus(options?: FocusOptions) {
-    this.button.focus(options)
-  }
-
-  blur() {
-    this.button.blur()
-  }
-
-  render() {
-    const hasTextContent = this.hasTextContent()
-    const hasIconDefault = Boolean(this.querySelector("leu-icon"))
-    const hasIconBefore = this.hasSlotController.test("before")
-    const hasIconAfter = this.hasSlotController.test("after")
-    const isLink = Boolean(this.href)
-    const aria = this.getAriaAttributes()
-
-    const tag = isLink ? literal`a` : literal`button`
-
-    const cssClasses = {
-      button: true,
-      "button--icon-only": hasIconDefault && !hasTextContent,
-      "button--icon-before": hasIconBefore,
-      "button--icon-after": hasIconAfter,
-      "button--round": this.round,
-      "button--active": this.active,
-      "button--inverted": this.inverted,
-      "button--loading": this.loading,
-      "button--disabled": this.disabled,
-      [`button--${this.variant}`]: true,
-      [`button--${this.size}`]: true,
-    }
-
-    /* The eslint rules don't recognize html import from lit/static-html.js */
-    /* eslint-disable lit/binding-positions, lit/no-invalid-html */
-    return html`
-      <${tag}
-        @click=${!isLink ? this.handleClick : undefined}
-        aria-label=${ifDefined(aria.label)}
-        aria-selected=${ifDefined(aria.selected)}
-        aria-checked=${ifDefined(aria.checked)}
-        aria-expanded=${ifDefined(this.expanded)}
-        role=${ifDefined(isLink ? undefined : aria.role)}
-        href=${ifDefined(this.href)}
-        target=${ifDefined(isLink ? this.target : undefined)}
-        class=${classMap(cssClasses)}
-        ?disabled=${(this.disabled && !isLink) || this.loading}
-        type=${ifDefined(isLink ? undefined : this.type)}
-      >
-        <div class="icon-wrapper icon-wrapper--before">
-          <slot name="before" class="icon-wrapper__slot"></slot>
-        </div>
-        <span class="content"><slot></slot></span>
-        <div class="icon-wrapper icon-wrapper--after">
-          <slot name="after" class="icon-wrapper__slot"></slot>
-        </div>
-        ${
-          this.loading
-            ? html`<leu-spinner class="spinner"></leu-spinner>`
-            : nothing
-        }
-        ${this.renderExpandingIcon()}
-      </${tag}>
-    `
-    /* eslint-enable lit/binding-positions, lit/no-invalid-html */
-  }
-}

package/src/components/button/button.css

@@ -1,317 +0,0 @@
-:host {
-  display: inline-block;
-}
-
-/*
- * @todo : Disable hover styles for loading state
- */
-.button {
-  position: relative;
-  font-family: var(--leu-font-family-black);
-  text-align: center;
-  text-decoration: none;
-  appearance: none;
-  transition: background 0.1s ease;
-  cursor: pointer;
-  border: none;
-  border-radius: 2px;
-
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  column-gap: 8px;
-  width: 100%;
-}
-
-.content {
-  flex: 1 1 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.button--round {
-  border-radius: 50%;
-}
-
-.button--disabled {
-  cursor: not-allowed;
-}
-
-.button--loading {
-  cursor: wait;
-}
-
-.button:focus-visible {
-  outline: 2px solid var(--leu-color-func-cyan);
-  outline-offset: 2px;
-}
-
-.button--inverted:focus-visible {
-  outline: 2px solid var(--leu-color-black-0);
-}
-
-.button--icon-only {
-  aspect-ratio: 1;
-  width: unset;
-}
-
-.button--loading :where(.content, .icon-wrapper) {
-  visibility: hidden;
-}
-
-/* size - regular */
-.button--regular {
-  padding: 12px 24px;
-  font-size: 16px;
-  line-height: 24px;
-}
-
-.button--regular.button--icon-only {
-  padding: 12px;
-}
-
-/* size - small */
-.button--small {
-  padding: 6px 24px;
-  font-size: 14px;
-  line-height: 20px;
-
-  --leu-icon-size: 1rem;
-}
-
-.button--small.button--icon-only {
-  padding: 8px;
-}
-
-/* primary */
-.button--primary {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-100);
-}
-
-.button--primary:hover {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-transp-80);
-}
-
-.button--primary.button--active {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-100);
-}
-
-.button--primary.button--active:hover {
-  background: var(--leu-color-black-transp-80);
-}
-
-.button--primary.button--disabled {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-transp-20);
-}
-
-/* secondary */
-.button--secondary {
-  color: var(--leu-color-black-transp-60);
-  background: var(--leu-color-black-transp-10);
-}
-
-.button--secondary:hover {
-  color: var(--leu-color-black-100);
-  background: var(--leu-color-black-transp-20);
-}
-
-.button--secondary.button--active {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-100);
-}
-
-.button--secondary.button--active:hover {
-  background: var(--leu-color-black-transp-80);
-}
-
-.button--secondary.button--disabled {
-  color: var(--leu-color-black-transp-20);
-  background: var(--leu-color-black-transp-5);
-}
-
-/* ghost */
-.button--ghost {
-  --leu-icon-size: 1rem;
-
-  background: transparent;
-  padding: 0 0.5rem;
-  color: var(--leu-color-black-60);
-  font-family: var(--leu-font-family-regular);
-  height: 2rem;
-}
-
-.button--ghost:hover {
-  color: var(--leu-color-black-100);
-}
-
-.button--ghost.button--active {
-  color: var(--leu-color-black-100);
-}
-
-.button--ghost.button--disabled {
-  color: var(--leu-color-black-20);
-}
-
-/* primary + inverted */
-.button--primary.button--inverted {
-  color: var(--leu-color-black-100);
-  background: var(--leu-color-black-0);
-}
-
-.button--primary.button--inverted:hover {
-  color: var(--leu-color-black-100);
-  background: var(--leu-color-white-transp-70);
-}
-
-.button--primary.button--inverted.button--active {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-100);
-}
-
-.button--primary.button--inverted.button--disabled {
-  color: var(--leu-color-black-40);
-  background: var(--leu-color-white-transp-70);
-}
-
-/* secondary + inverted */
-.button--secondary.button--inverted {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-transp-20);
-}
-
-.button--secondary.button--inverted:hover {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-transp-40);
-}
-
-.button--secondary.button--inverted.button--active {
-  color: var(--leu-color-black-100);
-  background: var(--leu-color-black-0);
-}
-
-.button--secondary.button--inverted.button--disabled {
-  color: var(--leu-color-white-transp-70);
-  background: var(--leu-color-black-transp-10);
-}
-
-/* ghost + inverted */
-.button--ghost.button--inverted {
-  color: var(--leu-color-black-0);
-}
-
-.button--ghost.button--inverted:hover {
-  color: var(--leu-color-white-transp-70);
-}
-
-.button--ghost.button--inverted.button--active {
-  color: var(--leu-color-black-0);
-}
-
-.button--ghost.button--inverted.button--disabled {
-  color: var(--leu-color-black-20);
-}
-
-/* icon-wrapper */
-.icon-wrapper leu-icon {
-  display: block;
-}
-
-.icon-wrapper {
-  display: none;
-}
-
-.button--icon-before .icon-wrapper--before,
-.button--icon-after .icon-wrapper--after {
-  display: block;
-}
-
-.button--ghost .icon-wrapper {
-  position: relative;
-  width: 2rem;
-  padding: 0 0.5rem;
-  --_bg: var(--leu-color-black-transp-10);
-  --_color: currentcolor;
-}
-
-.button--ghost .icon-wrapper__slot {
-  display: block;
-  position: relative;
-  z-index: 1;
-  color: var(--_color);
-}
-
-.button--ghost .icon-wrapper::before {
-  content: "";
-  position: absolute;
-  z-index: 0;
-  left: 0;
-  top: -0.5rem;
-
-  width: 2rem;
-  aspect-ratio: 1;
-  border-radius: 50%;
-  background: var(--_bg);
-}
-
-.button--ghost.button--active .icon-wrapper {
-  --_bg: var(--leu-color-black-100);
-  --_color: var(--leu-color-black-0);
-}
-
-.button--ghost.button--disabled .icon-wrapper {
-  --_bg: var(--leu-color-black-transp-5);
-}
-
-/* inverted */
-
-.button--ghost.button--inverted .icon-wrapper {
-  --_bg: var(--leu-color-black-transp-20);
-}
-
-.button--ghost.button--inverted:hover .icon-wrapper {
-  --_bg: var(--leu-color-black-transp-40);
-  --_color: var(--leu-color-black-0);
-}
-
-.button--ghost.button--inverted.button--disabled .icon-wrapper {
-  --_bg: var(--leu-color-black-transp-20);
-  --_color: var(--leu-color-white-transp-70);
-}
-
-.button--ghost.button--active.button--inverted .icon-wrapper {
-  --_bg: var(--leu-color-black-0);
-  --_color: var(--leu-color-black-100);
-}
-
-/* Expanded icon */
-.icon-expanded leu-icon {
-  display: block;
-}
-
-.icon-expanded {
-  transition: transform 0.1s ease;
-}
-
-:host([expanded="true"]) .icon-expanded {
-  transform: rotate(180deg);
-}
-
-.spinner {
-  --leu-spinner-size: 1.75rem;
-  padding: 0;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  color: currentcolor;
-  display: block;
-}
-
-button.small .spinner {
-  --leu-spinner-size: 1.25rem;
-}

package/src/components/button/leu-button.ts

@@ -1,11 +0,0 @@
-import { LeuButton } from "./Button.js"
-
-export { LeuButton }
-
-LeuButton.define("leu-button")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-button": LeuButton
-  }
-}