@statistikzh/leu 0.24.2 → 0.26.0

package/dist/Button.js

@@ -1,505 +1,6 @@
-import { _ as __decorate } from './_tslib-CNEFicEt.js';
-import { css, html, nothing } from 'lit';
-import { classMap } from 'lit/directives/class-map.js';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { property } from 'lit/decorators.js';
-import { LeuIcon } from './Icon.js';
-import { L as LeuElement } from './LeuElement-BfXSO7MN.js';
-import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
-
-/**
- * All roles that are associated with a aria-checked attribute
- * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-checked
- */
-const ARIA_CHECKED_ROLES = [
-    "checkbox",
-    "menuitemcheckbox",
-    "menuitemradio",
-    "option",
-    "radio",
-    "switch",
-];
-/**
- * All roles that are associated with a aria-selected attribute
- * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-selected
- */
-const ARIA_SELECTED_ROLES = [
-    "gridcell",
-    "option",
-    "row",
-    "tab",
-    "columnheader",
-    "rowheader",
-    "treeitem",
-];
-
-var css_248z = css`:host {
-  display: inline-block;
-}
-
-button {
-  font-family: var(--leu-font-family-black);
-  text-align: center;
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-  transition: background 0.1s ease;
-  cursor: pointer;
-  border: none;
-  border-radius: 2px;
-
-  max-width: 100%;
-  display: flex;
-  align-items: center;
-  -moz-column-gap: 8px;
-       column-gap: 8px;
-}
-
-.content {
-  flex: 1 1 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-button.round {
-  border-radius: 50%;
-}
-
-button:disabled {
-  cursor: not-allowed;
-}
-
-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);
-}
-
-:host([fluid]) button {
-  width: 100%;
-  justify-content: center;
-}
-
-/* size - regular */
-
-button.regular {
-  padding: 12px 24px;
-  font-size: 16px;
-  line-height: 24px;
-}
-
-button.regular.icon-only {
-  padding: 12px;
-}
-
-/* size - small */
-
-button.small {
-  padding: 6px 24px;
-  font-size: 14px;
-  line-height: 20px;
-
-  --leu-icon-size: 1rem;
-}
-
-button.small.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.active {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-100);
-}
-
-button.primary.active:hover {
-  background: var(--leu-color-black-transp-80);
-}
-
-button.primary: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.active {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-100);
-}
-
-button.secondary.active:hover {
-  background: var(--leu-color-black-transp-80);
-}
-
-button.secondary: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.active {
-  color: var(--leu-color-black-100);
-}
-
-button.ghost:disabled {
-  color: var(--leu-color-black-20);
-}
-
-/* primary + inverted */
-
-button.primary.inverted {
-  color: var(--leu-color-black-100);
-  background: var(--leu-color-black-0);
-}
-
-button.primary.inverted:hover {
-  color: var(--leu-color-black-100);
-  background: var(--leu-color-white-transp-70);
-}
-
-button.primary.inverted.active {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-100);
-}
-
-button.primary.inverted:disabled {
-  color: var(--leu-color-black-40);
-  background: var(--leu-color-white-transp-70);
-}
-
-/* secondary + inverted */
-
-button.secondary.inverted {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-transp-20);
-}
-
-button.secondary.inverted:hover {
-  color: var(--leu-color-black-0);
-  background: var(--leu-color-black-transp-40);
-}
-
-button.secondary.inverted.active {
-  color: var(--leu-color-black-100);
-  background: var(--leu-color-black-0);
-}
-
-button.secondary.inverted:disabled {
-  color: var(--leu-color-white-transp-70);
-  background: var(--leu-color-black-transp-10);
-}
-
-/* ghost + inverted */
-
-button.ghost.inverted {
-  color: var(--leu-color-black-0);
-}
-
-button.ghost.inverted:hover {
-  color: var(--leu-color-white-transp-70);
-}
-
-button.ghost.inverted.active {
-  color: var(--leu-color-black-0);
-}
-
-button.ghost.inverted:disabled {
-  color: var(--leu-color-black-20);
-}
-
-/* icon-wrapper */
-
-.icon-wrapper leu-icon {
-  display: block;
-}
-
-.icon-wrapper {
-  display: none;
-}
-
-.icon-before .icon-wrapper--before,
-.icon-after .icon-wrapper--after {
-  display: block;
-}
-
-.ghost .icon-wrapper {
-  position: relative;
-  width: 2rem;
-  padding: 0 0.5rem;
-  --_bg: var(--leu-color-black-transp-10);
-  --_color: currentcolor;
-}
-
-.ghost .icon-wrapper__slot {
-  display: block;
-  position: relative;
-  z-index: 1;
-  color: var(--_color);
-}
-
-.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);
-}
-
-.ghost.active .icon-wrapper {
-  --_bg: var(--leu-color-black-100);
-  --_color: var(--leu-color-black-0);
-}
-
-.ghost:disabled .icon-wrapper {
-  --_bg: var(--leu-color-black-transp-5);
-}
-
-/* inverted */
-
-.ghost.inverted .icon-wrapper {
-  --_bg: var(--leu-color-black-transp-20);
-}
-
-.ghost.inverted:hover .icon-wrapper {
-  --_bg: var(--leu-color-black-transp-40);
-  --_color: var(--leu-color-black-0);
-}
-
-.ghost.inverted:disabled .icon-wrapper {
-  --_bg: var(--leu-color-black-transp-20);
-  --_color: var(--leu-color-white-transp-70);
-}
-
-.ghost.active.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);
-}
-`;
-
-/**
- * @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
- */
-class LeuButton extends LeuElement {
-    constructor() {
-        super(...arguments);
-        this.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.
-         */
-        this.label = null;
-        /**
-         * The size of the button.
-         */
-        this.size = "regular";
-        /**
-         * The visual variant of the button.
-         */
-        this.variant = "primary";
-        /**
-         * The `type` of the underlying button element.
-         */
-        this.type = "button";
-        /**
-         * Whether the button is disabled or not.
-         * @type {boolean}
-         */
-        this.disabled = false;
-        /**
-         * Whether the button should be round.
-         * Can only be applied when the button contains an icon without a visible label.
-         * @type {boolean}
-         */
-        this.round = false;
-        /**
-         * Whether the button is active or not.
-         * Depending on the `componentRole`, it applies `aria-checked` or `aria-selected` to the underlying button element.
-         */
-        this.active = false;
-        /**
-         * Wheter the colors should be inverted. For use on dark backgrounds.
-         */
-        this.inverted = false;
-        /**
-         * Alters the shape of the button to be full width of its parent container
-         */
-        this.fluid = false;
-    }
-    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;
-    }
-    getAriaAttributes() {
-        const attributes = {
-            role: this.componentRole,
-            label: this.label,
-        };
-        // TODO: checked and selected roles are not mutually exclusive
-        if (this.componentRole) {
-            if (ARIA_CHECKED_ROLES.includes(this.componentRole)) {
-                attributes.checked = this.active ? "true" : "false";
-            }
-            else if (ARIA_SELECTED_ROLES.includes(this.componentRole)) {
-                attributes.selected = this.active ? "true" : "false";
-            }
-        }
-        return attributes;
-    }
-    hasTextContent() {
-        return Array.from(this.childNodes).some((node) => node.nodeType === node.TEXT_NODE && node.textContent.trim() !== "");
-    }
-    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 aria = this.getAriaAttributes();
-        const cssClasses = {
-            "icon-only": hasIconDefault && !hasTextContent,
-            "icon-before": hasIconBefore,
-            "icon-after": hasIconAfter,
-            round: this.round,
-            active: this.active,
-            inverted: this.inverted,
-            [this.variant]: true,
-            [this.size]: true,
-        };
-        return html `
-      <button
-        aria-label=${ifDefined(aria.label)}
-        aria-selected=${ifDefined(aria.selected)}
-        aria-checked=${ifDefined(aria.checked)}
-        aria-expanded=${ifDefined(this.expanded)}
-        role=${ifDefined(aria.role)}
-        class=${classMap(cssClasses)}
-        ?disabled=${this.disabled}
-        type=${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.renderExpandingIcon()}
-      </button>
-    `;
-    }
-}
-LeuButton.dependencies = {
-    "leu-icon": LeuIcon,
-};
-LeuButton.styles = [LeuElement.styles, css_248z];
-LeuButton.shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-};
-__decorate([
-    property({ type: String, reflect: true })
-], LeuButton.prototype, "label", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuButton.prototype, "size", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuButton.prototype, "variant", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuButton.prototype, "type", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuButton.prototype, "componentRole", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuButton.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuButton.prototype, "round", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuButton.prototype, "active", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuButton.prototype, "inverted", void 0);
-__decorate([
-    property({ type: String, reflect: true })
-], LeuButton.prototype, "expanded", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuButton.prototype, "fluid", void 0);
-
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import "./Spinner-DDTqijTO.js";
+import { t as LeuButton } from "./Button-BkhqVjug.js";
+import "./FormAssociatedMixin-DLPvFtbT.js";
 export { LeuButton };

package/dist/ButtonGroup-B8U9fDvM.js

@@ -0,0 +1,88 @@
+import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { t as LeuButton } from "./Button-BkhqVjug.js";
+import { css, html } from "lit";
+//#region src/components/button-group/button-group.css?inline
+var button_group_default = css`.group {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+`;
+//#endregion
+//#region src/components/button-group/ButtonGroup.ts
+/**
+* A radio input-like button group component.
+* It allows only one button to be active at a time.
+* @tagname leu-button-group
+* @slot - Slot for the buttons
+* @fires input - When the value of the group changes by clicking a button
+*/
+var LeuButtonGroup = class LeuButtonGroup extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this._items = [];
+		this._handleButtonClick = (event) => {
+			const button = event.currentTarget;
+			if (!button.active) {
+				this.value = LeuButtonGroup.getButtonValue(button);
+				this.dispatchEvent(new CustomEvent("input", {
+					bubbles: true,
+					composed: true,
+					detail: { value: LeuButtonGroup.getButtonValue(button) }
+				}));
+			}
+		};
+	}
+	static {
+		this.styles = [LeuElement.styles, button_group_default];
+	}
+	/**
+	* Retrieves the value or the text content of a given LeuButton element.
+	*/
+	static getButtonValue(button) {
+		return button.getAttribute("value") ?? button.textContent.trim();
+	}
+	/**
+	* The value of the currently selected (active) button
+	*/
+	get value() {
+		const activeButton = this._items.find((item) => item.active);
+		return activeButton ? LeuButtonGroup.getButtonValue(activeButton) : null;
+	}
+	set value(newValue) {
+		this._items.forEach((item) => {
+			item.active = LeuButtonGroup.getButtonValue(item) === newValue;
+		});
+	}
+	_handleSlotChange() {
+		/**
+		* Remove all event listeners that were added before.
+		* Just because a slotchange event was fired, it doesn't mean that all of the
+		* children of the slot have changed.
+		*/
+		this._items.forEach((item) => {
+			item.removeEventListener("click", this._handleButtonClick);
+		});
+		this._items = this.shadowRoot.querySelector("slot").assignedElements({ flatten: true }).filter((el) => el instanceof LeuButton);
+		let foundActiveButtonBefore = false;
+		this._items.forEach((item) => {
+			item.addEventListener("click", this._handleButtonClick);
+			item.componentRole = "menuitemradio";
+			/**
+			* In case there are multiple active buttons
+			* only the first one will be kept active.
+			*/
+			if (item.active && foundActiveButtonBefore) item.active = false;
+			else if (item.active) foundActiveButtonBefore = true;
+		});
+	}
+	render() {
+		return html`
+      <div role="menubar" class="group">
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </div>
+    `;
+	}
+};
+//#endregion
+export { LeuButtonGroup as t };

package/dist/ButtonGroup.d.ts

@@ -1,7 +1,7 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import * as lit_html0 from "lit-html";
 
+//#region src/components/button-group/ButtonGroup.d.ts
 /**
  * A radio input-like button group component.
  * It allows only one button to be active at a time.
@@ -10,20 +10,20 @@ import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
  * @fires input - When the value of the group changes by clicking a button
  */
 declare class LeuButtonGroup extends LeuElement {
-    static styles: lit.CSSResultGroup[];
-    private _items;
-    /**
-     * Retrieves the value or the text content of a given LeuButton element.
-     */
-    private static getButtonValue;
-    /**
-     * The value of the currently selected (active) button
-     */
-    get value(): string;
-    set value(newValue: string);
-    private _handleSlotChange;
-    private _handleButtonClick;
-    render(): lit_html.TemplateResult<1>;
+  static styles: any[];
+  private _items;
+  /**
+   * Retrieves the value or the text content of a given LeuButton element.
+   */
+  private static getButtonValue;
+  /**
+   * The value of the currently selected (active) button
+   */
+  get value(): string;
+  set value(newValue: string);
+  private _handleSlotChange;
+  private _handleButtonClick;
+  render(): lit_html0.TemplateResult<1>;
 }
-
-export { LeuButtonGroup };
+//#endregion
+export { LeuButtonGroup };