@statistikzh/leu 0.28.0 → 0.28.2

package/src/components/menu/Menu.ts

@@ -1,149 +0,0 @@
-import { html, PropertyValues } from "lit"
-import { property } from "lit/decorators.js"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-
-import { LeuMenuItem } from "./MenuItem.js"
-
-import styles from "./menu.css?inline"
-
-/**
- * @typedef {'single' | 'multiple' | 'none'} SelectsType
- */
-
-/**
- * @tagname leu-menu
- * @property {SelectsType} selects - This has only an effect when the role is 'menu'. It defines which role the menu items will get. Default is 'none'.
- */
-export class LeuMenu extends LeuElement {
-  static styles = [LeuElement.styles, styles]
-
-  static shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-  }
-
-  @property({ type: String, reflect: true })
-  selects: "single" | "multiple" | "none" = "none"
-
-  connectedCallback() {
-    super.connectedCallback()
-
-    if (!this.getAttribute("role")) {
-      this.setAttribute("role", "menu")
-    }
-
-    this.addEventListener("keydown", this._handleKeyDown)
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-    this.removeEventListener("keydown", this._handleKeyDown)
-  }
-
-  _handleSlotChange() {
-    this.setCurrentItem(0)
-    this._setMenuItemRoles()
-  }
-
-  _setMenuItemRoles() {
-    const menuRole = this.getAttribute("role")
-    let menuItemRole
-
-    if (menuRole === "menu") {
-      if (this.selects === "multiple") {
-        menuItemRole = "menuitemcheckbox"
-      } else if (this.selects === "single") {
-        menuItemRole = "menuitemradio"
-      } else {
-        menuItemRole = "menuitem"
-      }
-    } else if (menuRole === "listbox") {
-      menuItemRole = "option"
-    }
-
-    if (menuItemRole) {
-      this.getMenuItems().forEach((menuItem) => {
-        menuItem.componentRole = menuItemRole
-      })
-    }
-  }
-
-  /**
-   *
-   * @returns {import("./MenuItem").LeuMenuItem[]}
-   */
-  getMenuItems() {
-    const slot = this.shadowRoot.querySelector("slot")
-    return slot
-      .assignedElements({ flatten: true })
-      .filter((el) => el instanceof LeuMenuItem)
-  }
-
-  getVisibleMenuItems() {
-    return this.getMenuItems().filter((menuItem) => !menuItem.hidden)
-  }
-
-  _handleKeyDown(event) {
-    if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
-      event.preventDefault()
-
-      const menuItems = this.getVisibleMenuItems()
-      let index = menuItems.findIndex((menuItem) => menuItem.tabbable)
-
-      if (event.key === "ArrowDown") {
-        index += 1
-      } else if (event.key === "ArrowUp") {
-        index -= 1
-      } else if (event.key === "Home") {
-        index = 0
-      } else if (event.key === "End") {
-        index = menuItems.length - 1
-      }
-
-      this.focusItem(index)
-    }
-  }
-
-  setCurrentItem(index) {
-    const menuItems = this.getVisibleMenuItems()
-    let currentItem = null
-
-    const currentItemIndex = (index + menuItems.length) % menuItems.length
-
-    menuItems.forEach((menuItem, i) => {
-      if (i === currentItemIndex) {
-        currentItem = menuItem
-        menuItem.tabbable = true
-      } else {
-        menuItem.tabbable = false
-      }
-    })
-
-    return currentItem
-  }
-
-  focusItem(index) {
-    const currentItem = this.setCurrentItem(index)
-
-    currentItem?.focus()
-  }
-
-  firstUpdated() {
-    this.setCurrentItem(0)
-  }
-
-  updated(changedProperties: PropertyValues<this>) {
-    if (changedProperties.has("selects")) {
-      this._setMenuItemRoles()
-    }
-  }
-
-  render() {
-    return html`
-      <div class="container">
-        <slot></slot>
-      </div>
-    `
-  }
-}

package/src/components/menu/MenuItem.ts

@@ -1,168 +0,0 @@
-import { html, nothing, TemplateResult } from "lit"
-import { ifDefined } from "lit/directives/if-defined.js"
-import { property } from "lit/decorators.js"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-import { LeuIcon } from "../icon/Icon.js"
-
-import styles from "./menu-item.css?inline"
-
-type MenuItemRole =
-  | "menuitem"
-  | "menuitemcheckbox"
-  | "menuitemradio"
-  | "option"
-  | "none"
-
-/**
- * @tagname leu-menu-item
- * @slot - The label of the menu item
- */
-export class LeuMenuItem extends LeuElement {
-  static dependencies = {
-    "leu-icon": LeuIcon,
-  }
-
-  static styles = [LeuElement.styles, styles]
-
-  /**
-   * @internal
-   */
-  static shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-  }
-
-  /** Defines if the item is selected or checked */
-  @property({ type: Boolean, reflect: true })
-  active: boolean = false
-
-  /** If the item is part of a multiple selection. Renders a checkmark before the label when active */
-  @property({ type: Boolean, reflect: true })
-  multipleSelection: boolean = false
-
-  /** Disables the underlying button or link */
-  @property({ type: Boolean, reflect: true })
-  disabled: boolean = false
-
-  /** If the item should be focusable. Will be reflected as `tabindex` to the underlying button or link */
-  @property({ type: Boolean, reflect: true })
-  tabbable: boolean
-
-  /** The href of the underlying link */
-  @property({ type: String, reflect: true })
-  href: string
-
-  /** The value of the item. It must not contain commas. See `getValue()` */
-  @property({ type: String, reflect: true })
-  value: string
-
-  /** The role of the item. This will be reflected as `role` to the underlying button or link. Default is `'menuitem'.` */
-  @property({ type: String, reflect: true })
-  componentRole: MenuItemRole = "menuitem"
-
-  connectedCallback() {
-    super.connectedCallback()
-    this.addEventListener("click", this._handleClick, true)
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-    this.removeEventListener("click", this._handleClick, true)
-  }
-
-  protected _handleClick(event: MouseEvent) {
-    if (this.disabled) {
-      event.stopPropagation()
-      event.preventDefault()
-    }
-  }
-
-  /**
-   * Returns the value of the item. If `value` is not set, it will return the inner text
-   */
-  getValue() {
-    return this.value || this.textContent.trim()
-  }
-
-  protected _getAria() {
-    const commonAttributes = {
-      disabled: this.disabled,
-    }
-
-    if (this.href) {
-      return commonAttributes
-    }
-
-    return {
-      ...commonAttributes,
-      checked:
-        this.componentRole === "menuitemcheckbox" ||
-        this.componentRole === "menuitemradio"
-          ? this.active
-          : undefined,
-      selected: this.componentRole === "option" ? this.active : undefined,
-      role: this.componentRole === "none" ? undefined : this.componentRole,
-    }
-  }
-
-  protected _getTabIndex() {
-    if (typeof this.tabbable === "boolean") {
-      return this.tabbable ? 0 : -1
-    }
-
-    return undefined
-  }
-
-  protected _renderLink(content: TemplateResult) {
-    const aria = this._getAria()
-
-    return html`<a
-      class="button"
-      href=${this.href}
-      aria-disabled=${ifDefined(aria.disabled)}
-      aria-checked=${ifDefined(aria.checked)}
-      aria-selected=${ifDefined(aria.selected)}
-      role=${ifDefined(aria.role)}
-      tabindex=${ifDefined(this._getTabIndex())}
-      >${content}</a
-    >`
-  }
-
-  protected _renderButton(content: TemplateResult) {
-    const aria = this._getAria()
-
-    return html`<button
-      class="button"
-      aria-disabled=${ifDefined(aria.disabled)}
-      aria-checked=${ifDefined(aria.checked)}
-      aria-selected=${ifDefined(aria.selected)}
-      role=${ifDefined(aria.role)}
-      tabindex=${ifDefined(this._getTabIndex())}
-    >
-      ${content}
-    </button>`
-  }
-
-  _renderBeforeSlotDefault() {
-    if (!this.multipleSelection) {
-      return nothing
-    }
-
-    return this.active
-      ? html`<leu-icon name="check"></leu-icon>`
-      : html`<leu-icon></leu-icon>`
-  }
-
-  render() {
-    const content = html`
-      <slot class="before" name="before"
-        >${this._renderBeforeSlotDefault()}</slot
-      >
-      <span class="label"><slot></slot></span>
-      <slot class="after" name="after"></slot>
-    `
-
-    return this.href ? this._renderLink(content) : this._renderButton(content)
-  }
-}

package/src/components/menu/leu-menu-item.ts

@@ -1,11 +0,0 @@
-import { LeuMenuItem } from "./MenuItem.js"
-
-export { LeuMenuItem }
-
-LeuMenuItem.define("leu-menu-item")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-menu-item": LeuMenuItem
-  }
-}

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

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

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

@@ -1,77 +0,0 @@
-:host {
-  --background: var(--leu-color-black-0);
-  --background-hover: var(--leu-color-black-10);
-  --background-active: var(--leu-color-func-cyan);
-  --background-disabled: var(--leu-color-black-black-0);
-  --color: var(--leu-color-black-transp-60);
-  --color-active: var(--leu-color-black-100);
-  --color-disabled: var(--leu-color-black-transp-20);
-  --font-regular: var(--leu-font-family-regular);
-  --font-black: var(--leu-font-family-black);
-
-  font-family: var(--leu-font-family-regular);
-}
-
-.button {
-  text-decoration: none;
-  appearance: none;
-  border: none;
-  cursor: pointer;
-
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-
-  padding: 0.75rem;
-
-  font-family: inherit;
-  font-size: 1rem;
-  line-height: 1.5;
-  text-align: left;
-
-  background: var(--background);
-  color: var(--color);
-}
-
-.button:focus-visible {
-  outline: 2px solid var(--leu-color-func-cyan);
-  outline-offset: 2px;
-}
-
-.button:hover,
-.button:focus-visible {
-  --background: var(--background-hover);
-}
-
-/*
- * These colors do not match with the design system (yet).
- * But at least they are compliant with the WCAG AA contrast ratio.
- */
-:host([active]) .button {
-  --background: var(--background-active);
-  --color: var(--color-active);
-}
-
-:host([disabled]) .button {
-  --background: var(--background-disabled);
-  --color: var(--color-disabled);
-  cursor: not-allowed;
-}
-
-:is(.before, .after) leu-icon {
-  display: block;
-}
-
-.label {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.icon-placeholder {
-  display: block;
-  width: 1.5rem;
-  aspect-ratio: 1;
-}

package/src/components/menu/menu.css

@@ -1,19 +0,0 @@
-:host {
-  --menu-divider-color: var(--leu-color-black-transp-20);
-}
-
-/*
- * Set styles with important as the hr element is part of the
- * light dom and therefore is affected by the global styles.
- */
-:host ::slotted(hr) {
-  border: 0 !important;
-  border-top: 1px solid var(--menu-divider-color) !important;
-  margin: 0.5rem 0 !important;
-  padding: 0 !important;
-  background: none !important;
-}
-
-.container {
-  background-color: var(--leu-color-black-0);
-}

package/src/components/menu/stories/menu-item.stories.ts

@@ -1,81 +0,0 @@
-import { html, nothing } from "lit"
-import { ifDefined } from "lit/directives/if-defined.js"
-
-import "../leu-menu-item.js"
-import "../../icon/leu-icon.js"
-import { paths as iconPaths } from "../../icon/paths.js"
-
-function isIcon(name) {
-  return name === "EMPTY" || Object.keys(iconPaths).includes(name)
-}
-
-export default {
-  title: "Components/Menu/Item",
-  component: "leu-menu-item",
-  args: {
-    label: "Menu Item",
-  },
-  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",
-    },
-  },
-}
-
-function Template(args) {
-  return html`
-    <leu-menu-item
-      href=${ifDefined(args.href)}
-      ?active=${args.active}
-      ?disabled=${args.disabled}
-      ?multipleSelection=${args.multipleSelection}
-    >
-      ${args.before
-        ? isIcon(args.before)
-          ? html`<leu-icon slot="before" name=${args.before}></leu-icon>`
-          : html`<span slot="before">${args.before}</span>`
-        : nothing}
-      ${args.label}
-      ${args.after
-        ? isIcon(args.after)
-          ? html`<leu-icon slot="after" name=${args.after}></leu-icon>`
-          : html`<span slot="after">${args.after}</span>`
-        : null}
-    </leu-menu-item>
-  `
-}
-
-export const Regular = Template.bind({})
-
-export const Active = Template.bind({})
-Active.args = {
-  active: true,
-}
-
-export const IconBefore = Template.bind({})
-IconBefore.args = {
-  before: "download",
-}
-
-export const IconAfterLink = Template.bind({})
-IconAfterLink.args = {
-  after: "arrowRight",
-  href: "https://www.zh.ch",
-}
-
-export const IconAndTextLabel = Template.bind({})
-IconAndTextLabel.args = {
-  before: "pin",
-  after: "CH",
-}
-
-export const IconPlaceholder = Template.bind({})
-IconPlaceholder.args = {
-  before: "EMPTY",
-}
-
-export const MultipleSelection = Template.bind({})
-MultipleSelection.args = {
-  multipleSelection: true,
-}

package/src/components/menu/stories/menu.stories.ts

@@ -1,54 +0,0 @@
-import { html } from "lit"
-import "../leu-menu.js"
-import "../leu-menu-item.js"
-import "../../icon/leu-icon.js"
-import { ifDefined } from "lit/directives/if-defined.js"
-
-export default {
-  title: "Components/Menu",
-  component: "leu-menu",
-  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",
-    },
-  },
-  argTypes: {
-    selects: {
-      control: "select",
-      options: ["single", "multiple"],
-    },
-    role: {
-      control: "select",
-      options: ["menu", "listbox"],
-    },
-  },
-}
-
-function Template(args) {
-  return html` <leu-menu
-    role=${ifDefined(args.role)}
-    selects=${ifDefined(args.selects)}
-  >
-    <leu-menu-item
-      ><leu-icon slot="before"></leu-icon>Menu Item 1</leu-menu-item
-    >
-    <leu-menu-item active
-      ><leu-icon slot="before" name="check"></leu-icon>Menu Item
-      2</leu-menu-item
-    >
-    <leu-menu-item
-      ><leu-icon slot="before"></leu-icon>Menu Item 3</leu-menu-item
-    >
-    <hr />
-    <leu-menu-item
-      ><leu-icon slot="before" name="pin"></leu-icon>Menu Item 3<span
-        slot="after"
-        >CH</span
-      ></leu-menu-item
-    >
-    <leu-menu-item>Menu Item 4</leu-menu-item>
-  </leu-menu>`
-}
-
-export const Menu = Template.bind({})