@statistikzh/leu 0.24.1 → 0.25.0

package/dist/Button-EdS9xr2J.js

@@ -0,0 +1,524 @@
+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 { t as HasSlotController } from "./hasSlotController-DjdfnOQp.js";
+import { t as FormAssociatedMixin } from "./FormAssociatedMixin-BbFlza53.js";
+import { css, html, nothing } from "lit";
+import { property, query } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/lib/a11y.ts
+/**
+* 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"
+];
+//#endregion
+//#region src/components/button/button.css?inline
+var button_default = 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);
+}
+`;
+//#endregion
+//#region src/components/button/Button.ts
+/**
+* @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
+*/
+var LeuButton = class extends FormAssociatedMixin(LeuElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.hasSlotController = new HasSlotController(this, [
+			"before",
+			"after",
+			"[default]"
+		]);
+		this.label = null;
+		this.size = "regular";
+		this.variant = "primary";
+		this.type = "button";
+		this.disabled = false;
+		this.round = false;
+		this.active = false;
+		this.inverted = false;
+		this.fluid = false;
+	}
+	static {
+		this.dependencies = { "leu-icon": LeuIcon };
+	}
+	static {
+		this.styles = [LeuElement.styles, button_default];
+	}
+	static {
+		this.shadowRootOptions = {
+			...LeuElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	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
+		};
+		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() !== "");
+	}
+	setFormValue() {}
+	handleClick(e) {
+		if (this.disabled) {
+			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) {
+		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 aria = this.getAriaAttributes();
+		const cssClasses = {
+			button: true,
+			"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
+        @click=${this.handleClick}
+        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>
+    `;
+	}
+};
+__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);
+__decorate([query(".button")], LeuButton.prototype, "button", void 0);
+//#endregion
+export { LeuButton as t };

package/dist/Button.d.ts

@@ -1,85 +1,2 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { L as LeuIcon } from './Icon.d-itcQ94ym.js';
-import { L as LeuElement } from './LeuElement.d-BevHqLUu.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
- */
-declare class LeuButton extends LeuElement {
-    static dependencies: {
-        "leu-icon": typeof LeuIcon;
-    };
-    static styles: lit.CSSResultGroup[];
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-        customElements?: CustomElementRegistry;
-        registry?: CustomElementRegistry;
-    };
-    private hasSlotController;
-    /**
-     * `aria-label` of the underlying button elements.
-     * Use it to provide a label when only an icon is visible.
-     */
-    label: null | string;
-    /**
-     * The size of the button.
-     */
-    size: "regular" | "small";
-    /**
-     * The visual variant of the button.
-     */
-    variant: "primary" | "secondary" | "ghost";
-    /**
-     * The `type` of the underlying button element.
-     */
-    type: "button" | "submit" | "reset";
-    /**
-     * The `role` of the underlying button element.
-     */
-    componentRole?: string;
-    /**
-     * Whether the button is disabled or not.
-     * @type {boolean}
-     */
-    disabled: boolean;
-    /**
-     * Whether the button should be round.
-     * Can only be applied when the button contains an icon without a visible label.
-     * @type {boolean}
-     */
-    round: boolean;
-    /**
-     * Whether the button is active or not.
-     * Depending on the `componentRole`, it applies `aria-checked` or `aria-selected` to the underlying button element.
-     */
-    active: boolean;
-    /**
-     * Wheter the colors should be inverted. For use on dark backgrounds.
-     */
-    inverted: boolean;
-    /**
-     * 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.
-     */
-    expanded?: "true" | "false";
-    /**
-     * Alters the shape of the button to be full width of its parent container
-     */
-    fluid: boolean;
-    private renderExpandingIcon;
-    private getAriaAttributes;
-    private hasTextContent;
-    render(): lit_html.TemplateResult<1>;
-}
-
-export { LeuButton };
+import { t as LeuButton } from "./Button-DSGPIcjm.js";
+export { LeuButton };