@statistikzh/leu 0.24.1 → 0.25.0

package/dist/Menu-CQdx1ef3.d.ts

@@ -0,0 +1,43 @@
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import { t as LeuMenuItem } from "./MenuItem-QcgnRk_7.js";
+import { PropertyValues } from "lit";
+import * as lit_html0 from "lit-html";
+
+//#region src/components/menu/Menu.d.ts
+/**
+ * @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'.
+ */
+declare class LeuMenu extends LeuElement {
+  static styles: any[];
+  static shadowRootOptions: {
+    delegatesFocus: boolean;
+    clonable?: boolean;
+    customElementRegistry?: CustomElementRegistry;
+    mode: ShadowRootMode;
+    serializable?: boolean;
+    slotAssignment?: SlotAssignmentMode;
+  };
+  selects: "single" | "multiple" | "none";
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  _handleSlotChange(): void;
+  _setMenuItemRoles(): void;
+  /**
+   *
+   * @returns {import("./MenuItem").LeuMenuItem[]}
+   */
+  getMenuItems(): LeuMenuItem[];
+  getVisibleMenuItems(): LeuMenuItem[];
+  _handleKeyDown(event: any): void;
+  setCurrentItem(index: any): any;
+  focusItem(index: any): void;
+  firstUpdated(): void;
+  updated(changedProperties: PropertyValues<this>): void;
+  render(): lit_html0.TemplateResult<1>;
+}
+//#endregion
+export { LeuMenu as t };

package/dist/Menu-DpiheIPk.js

@@ -0,0 +1,136 @@
+import { t as LeuElement } from "./LeuElement-B7NJzWwP.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { t as LeuMenuItem } from "./MenuItem-CZTqGg5R.js";
+import { css, html } from "lit";
+import { property } from "lit/decorators.js";
+//#region src/components/menu/menu.css?inline
+var menu_default = css`: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);
+}
+`;
+//#endregion
+//#region src/components/menu/Menu.ts
+/**
+* @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'.
+*/
+var LeuMenu = class extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this.selects = "none";
+	}
+	static {
+		this.styles = [LeuElement.styles, menu_default];
+	}
+	static {
+		this.shadowRootOptions = {
+			...LeuElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	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() {
+		return this.shadowRoot.querySelector("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) {
+		this.setCurrentItem(index)?.focus();
+	}
+	firstUpdated() {
+		this.setCurrentItem(0);
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("selects")) this._setMenuItemRoles();
+	}
+	render() {
+		return html`
+      <div class="container">
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuMenu.prototype, "selects", void 0);
+//#endregion
+export { LeuMenu as t };

package/dist/Menu.d.ts

@@ -1,44 +1,2 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { PropertyValues } from 'lit';
-import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
-import { LeuMenuItem } from './MenuItem.js';
-import './Icon.d-itcQ94ym.js';
-
-/**
- * @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'.
- */
-declare class LeuMenu extends LeuElement {
-    static styles: lit.CSSResultGroup[];
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-        customElements?: CustomElementRegistry;
-        registry?: CustomElementRegistry;
-    };
-    selects: "single" | "multiple" | "none";
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    _handleSlotChange(): void;
-    _setMenuItemRoles(): void;
-    /**
-     *
-     * @returns {import("./MenuItem").LeuMenuItem[]}
-     */
-    getMenuItems(): LeuMenuItem[];
-    getVisibleMenuItems(): LeuMenuItem[];
-    _handleKeyDown(event: any): void;
-    setCurrentItem(index: any): any;
-    focusItem(index: any): void;
-    firstUpdated(): void;
-    updated(changedProperties: PropertyValues<this>): void;
-    render(): lit_html.TemplateResult<1>;
-}
-
-export { LeuMenu };
+import { t as LeuMenu } from "./Menu-CQdx1ef3.js";
+export { LeuMenu };

package/dist/Menu.js

@@ -1,158 +1,5 @@
-import { _ as __decorate } from './_tslib-CNEFicEt.js';
-import { css, html } from 'lit';
-import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-jrR2M5pZ.js';
-import { LeuMenuItem } from './MenuItem.js';
-import 'lit/directives/if-defined.js';
-import './Icon.js';
-
-var css_248z = css`: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);
-}
-`;
-
-/**
- * @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'.
- */
-class LeuMenu extends LeuElement {
-    constructor() {
-        super(...arguments);
-        this.selects = "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; // eslint-disable-line no-param-reassign
-            });
-        }
-    }
-    /**
-     *
-     * @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; // eslint-disable-line no-param-reassign
-            }
-            else {
-                menuItem.tabbable = false; // eslint-disable-line no-param-reassign
-            }
-        });
-        return currentItem;
-    }
-    focusItem(index) {
-        const currentItem = this.setCurrentItem(index);
-        currentItem?.focus();
-    }
-    firstUpdated() {
-        this.setCurrentItem(0);
-    }
-    updated(changedProperties) {
-        if (changedProperties.has("selects")) {
-            this._setMenuItemRoles();
-        }
-    }
-    render() {
-        return html `
-      <div class="container">
-        <slot></slot>
-      </div>
-    `;
-    }
-}
-LeuMenu.styles = [LeuElement.styles, css_248z];
-LeuMenu.shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-};
-__decorate([
-    property({ type: String, reflect: true })
-], LeuMenu.prototype, "selects", void 0);
-
+import "./LeuElement-B7NJzWwP.js";
+import "./Icon-DhAvH0XM.js";
+import "./MenuItem-CZTqGg5R.js";
+import { t as LeuMenu } from "./Menu-DpiheIPk.js";
 export { LeuMenu };

package/dist/MenuItem-CZTqGg5R.js

@@ -0,0 +1,219 @@
+import { t as LeuElement } from "./LeuElement-B7NJzWwP.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { t as LeuIcon } from "./Icon-DhAvH0XM.js";
+import { css, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/menu/menu-item.css?inline
+var menu_item_default = css`: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 {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  -webkit-appearance: none;
+     -moz-appearance: 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;
+}
+
+.before leu-icon, .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;
+}
+`;
+//#endregion
+//#region src/components/menu/MenuItem.ts
+/**
+* @tagname leu-menu-item
+* @slot - The label of the menu item
+*/
+var LeuMenuItem = class extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this.active = false;
+		this.multipleSelection = false;
+		this.disabled = false;
+		this.componentRole = "menuitem";
+	}
+	static {
+		this.dependencies = { "leu-icon": LeuIcon };
+	}
+	static {
+		this.styles = [LeuElement.styles, menu_item_default];
+	}
+	static {
+		this.shadowRootOptions = {
+			...LeuElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("click", this._handleClick, true);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("click", this._handleClick, true);
+	}
+	_handleClick(event) {
+		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();
+	}
+	_getAria() {
+		const commonAttributes = { disabled: this.disabled };
+		if (this.href) return commonAttributes;
+		return {
+			...commonAttributes,
+			checked: this.componentRole === "menuitemcheckbox" || this.componentRole === "menuitemradio" ? this.active : void 0,
+			selected: this.componentRole === "option" ? this.active : void 0,
+			role: this.componentRole === "none" ? void 0 : this.componentRole
+		};
+	}
+	_getTabIndex() {
+		if (typeof this.tabbable === "boolean") return this.tabbable ? 0 : -1;
+	}
+	_renderLink(content) {
+		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
+    >`;
+	}
+	_renderButton(content) {
+		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);
+	}
+};
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuMenuItem.prototype, "active", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuMenuItem.prototype, "multipleSelection", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuMenuItem.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuMenuItem.prototype, "tabbable", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuMenuItem.prototype, "href", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuMenuItem.prototype, "value", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuMenuItem.prototype, "componentRole", void 0);
+//#endregion
+export { LeuMenuItem as t };

package/dist/MenuItem-QcgnRk_7.d.ts

@@ -0,0 +1,63 @@
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import { t as LeuIcon } from "./Icon-Op80LrrO.js";
+import { TemplateResult, nothing } from "lit";
+
+//#region src/components/menu/MenuItem.d.ts
+type MenuItemRole = "menuitem" | "menuitemcheckbox" | "menuitemradio" | "option" | "none";
+/**
+ * @tagname leu-menu-item
+ * @slot - The label of the menu item
+ */
+declare class LeuMenuItem extends LeuElement {
+  static dependencies: {
+    "leu-icon": typeof LeuIcon;
+  };
+  static styles: any[];
+  /**
+   * @internal
+   */
+  static shadowRootOptions: {
+    delegatesFocus: boolean;
+    clonable?: boolean;
+    customElementRegistry?: CustomElementRegistry;
+    mode: ShadowRootMode;
+    serializable?: boolean;
+    slotAssignment?: SlotAssignmentMode;
+  };
+  /** Defines if the item is selected or checked */
+  active: boolean;
+  /** If the item is part of a multiple selection. Renders a checkmark before the label when active */
+  multipleSelection: boolean;
+  /** Disables the underlying button or link */
+  disabled: boolean;
+  /** If the item should be focusable. Will be reflected as `tabindex` to the underlying button or link */
+  tabbable: boolean;
+  /** The href of the underlying link */
+  href: string;
+  /** The value of the item. It must not contain commas. See `getValue()` */
+  value: string;
+  /** The role of the item. This will be reflected as `role` to the underlying button or link. Default is `'menuitem'.` */
+  componentRole: MenuItemRole;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected _handleClick(event: MouseEvent): void;
+  /**
+   * Returns the value of the item. If `value` is not set, it will return the inner text
+   */
+  getValue(): string;
+  protected _getAria(): {
+    disabled: boolean;
+  } | {
+    checked: boolean;
+    selected: boolean;
+    role: "option" | "menuitem" | "menuitemcheckbox" | "menuitemradio";
+    disabled: boolean;
+  };
+  protected _getTabIndex(): 0 | -1;
+  protected _renderLink(content: TemplateResult): TemplateResult<1>;
+  protected _renderButton(content: TemplateResult): TemplateResult<1>;
+  _renderBeforeSlotDefault(): TemplateResult<1> | typeof nothing;
+  render(): TemplateResult<1>;
+}
+//#endregion
+export { LeuMenuItem as t };