@statistikzh/leu 0.24.2 → 0.25.0

package/dist/MenuItem.d.ts

@@ -1,64 +1,2 @@
-import * as lit from 'lit';
-import { TemplateResult, nothing } from 'lit';
-import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
-import { L as LeuIcon } from './Icon.d-itcQ94ym.js';
-import 'lit-html';
-
-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: lit.CSSResultGroup[];
-    /**
-     * @internal
-     */
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-        customElements?: CustomElementRegistry;
-        registry?: CustomElementRegistry;
-    };
-    /** 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(): typeof nothing | TemplateResult<1>;
-    render(): TemplateResult<1>;
-}
-
-export { LeuMenuItem };
+import { t as LeuMenuItem } from "./MenuItem-QcgnRk_7.js";
+export { LeuMenuItem };

package/dist/MenuItem.js

@@ -1,228 +1,4 @@
-import { _ as __decorate } from './_tslib-CNEFicEt.js';
-import { css, html, nothing } from 'lit';
-import { ifDefined } from 'lit/directives/if-defined.js';
-import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BfXSO7MN.js';
-import { LeuIcon } from './Icon.js';
-
-var css_248z = 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;
-}
-`;
-
-/**
- * @tagname leu-menu-item
- * @slot - The label of the menu item
- */
-class LeuMenuItem extends LeuElement {
-    constructor() {
-        super(...arguments);
-        /** Defines if the item is selected or checked */
-        this.active = false;
-        /** If the item is part of a multiple selection. Renders a checkmark before the label when active */
-        this.multipleSelection = false;
-        /** Disables the underlying button or link */
-        this.disabled = false;
-        /** The role of the item. This will be reflected as `role` to the underlying button or link. Default is `'menuitem'.` */
-        this.componentRole = "menuitem";
-    }
-    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
-                : undefined,
-            selected: this.componentRole === "option" ? this.active : undefined,
-            role: this.componentRole === "none" ? undefined : this.componentRole,
-        };
-    }
-    _getTabIndex() {
-        if (typeof this.tabbable === "boolean") {
-            return this.tabbable ? 0 : -1;
-        }
-        return undefined;
-    }
-    _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);
-    }
-}
-LeuMenuItem.dependencies = {
-    "leu-icon": LeuIcon,
-};
-LeuMenuItem.styles = [LeuElement.styles, css_248z];
-/**
- * @internal
- */
-LeuMenuItem.shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-};
-__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);
-
+import "./LeuElement-B7NJzWwP.js";
+import "./Icon-DhAvH0XM.js";
+import { t as LeuMenuItem } from "./MenuItem-CZTqGg5R.js";
 export { LeuMenuItem };

package/dist/Message-J4Kj7yHE.js

@@ -0,0 +1,252 @@
+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 { css, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+//#region src/components/message/message.css?inline
+var message_default = css`:host {
+  font-family: var(--leu-font-family-regular);
+}
+.message {
+  position: relative;
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+
+  padding: var(--_padding);
+  border-radius: 0.25rem;
+  overflow: hidden;
+
+  background-color: var(--leu-color-black-0);
+  color: var(--_accent-color);
+}
+.message::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0.25rem;
+  height: 100%;
+  background-color: var(--_accent-color);
+}
+.message--error {
+  --_accent-color: var(--leu-message-accent-color, var(--leu-color-func-red));
+}
+.message--warning {
+  --_accent-color: var(--leu-message-accent-color, var(--leu-color-func-red));
+}
+.message--success {
+  --_accent-color: var(--leu-message-accent-color, var(--leu-color-func-green));
+}
+.message--info {
+  --_accent-color: var(
+    --leu-message-accent-color,
+    var(--leu-color-accent-violet)
+  );
+}
+.message--filled {
+  background-color: var(--_accent-color);
+  color: var(--leu-color-black-0);
+}
+.message--filled::before {
+  content: none;
+}
+.message--regular {
+  --_padding: 0.75rem;
+  --_icon-size: 24px;
+}
+@media (min-width: 1024px) {
+.message--regular {
+    --_padding: 1rem;
+}
+  }
+.message--large {
+  --_padding: 1rem;
+  --_icon-size: 32px;
+}
+@media (max-width: 599px) {
+.message--large {
+    flex-flow: column;
+    align-items: start;
+    gap: 0.75rem;
+}
+  }
+@media (min-width: 600px) {
+.message--large {
+    --_padding: 1.25rem;
+}
+  }
+@media (min-width: 1024px) {
+.message--large {
+    --_padding: 1.5rem;
+}
+  }
+.message--popup {
+  box-shadow: var(--leu-box-shadow-regular);
+}
+.message__icon {
+  --leu-icon-size: var(--_icon-size);
+
+  display: block;
+  flex: 0 0 min-content;
+}
+.message__content {
+  flex: 1 1 auto;
+  font: var(--leu-t-curve-small-regular-font);
+  margin: 0 0.5rem;
+}
+@media (min-width: 600px) {
+.message__content {
+    margin-left: 0.75rem;
+    margin-right: 0.75rem;
+}
+  }
+@media (min-width: 1024px) {
+.message__content {
+    margin-left: 1rem;
+    margin-right: 1rem;
+}
+  }
+@media (max-width: 599px) {
+.message--large .message__content {
+    margin-left: 0;
+    margin-right: 0;
+}
+  }
+.message__content ::slotted(strong) {
+  font-family: var(--leu-font-family-black);
+  font-weight: normal;
+}
+.message__cta {
+  display: block;
+  flex: 0 0 min-content;
+  margin-right: 0.5rem;
+}
+.message__remove {
+  flex: 0 0 min-content;
+  border: none;
+  background: none;
+  padding: 0;
+  color: var(--leu-color-black-60);
+  cursor: pointer;
+}
+.message__remove:where(:hover, :focus-visible) {
+  color: var(--leu-color-black-40);
+}
+.message--filled .message__remove {
+  color: var(--leu-color-black-0);
+}
+.message--filled .message__remove:where(:hover, :focus-visible) {
+  color: var(--leu-color-white-transp-70);
+}
+.message--large .message__remove {
+  position: absolute;
+  top: var(--_padding);
+  right: var(--_padding);
+}
+@media (min-width: 600px) {
+.message--large .message__remove {
+    position: static;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+}
+  }
+.message__remove-icon {
+  --leu-icon-size: 1.5rem;
+}
+`;
+//#endregion
+//#region src/components/message/Message.ts
+/**
+* @tagname leu-message
+* @cssprop --leu-message-accent-color - Sets the color of the message. According to the design system, it is only allowd for `info`
+* @slot [default] - The content of the message. The title of the message should marked up with a `<strong>` tag.
+* @slot cta - A call to action button that is only allowed for `size=large`
+* @fires leu:remove - Fired when the close button is clicked.
+*/
+var LeuMessage = class LeuMessage extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this.type = "success";
+		this.size = "regular";
+		this.removable = false;
+		this.popup = false;
+		this.hasSlotController = new HasSlotController(this, ["cta"]);
+	}
+	static {
+		this.styles = [LeuElement.styles, message_default];
+	}
+	static {
+		this.shadowRootOptions = {
+			...LeuElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	static {
+		this.dependencies = { "leu-icon": LeuIcon };
+	}
+	static {
+		this.iconToTypeMap = {
+			info: "getInformation",
+			error: "caution",
+			success: "confirm",
+			warning: "caution"
+		};
+	}
+	renderIcon() {
+		return html`<leu-icon class="message__icon" name=${LeuMessage.iconToTypeMap[this.type]}></leu-icon>`;
+	}
+	handleRemove() {
+		this.dispatchEvent(new CustomEvent("leu:remove", {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	render() {
+		const hasCta = this.hasSlotController.test("cta");
+		return html`
+      <div class="${classMap({
+			message: true,
+			"message--filled": this.type === "error" || this.type === "success",
+			"message--popup": this.popup,
+			[`message--${this.size}`]: true,
+			[`message--${this.type}`]: true
+		})}">
+        ${this.renderIcon()}
+        <p class="message__content">
+          <slot></slot>
+        </p>
+        ${hasCta ? html`<slot class="message__cta" name="cta"></slot>` : nothing}
+        ${this.removable ? html`<button
+              class="message__remove"
+              aria-label="Meldung schliessen"
+              @click=${this.handleRemove}
+            >
+              <leu-icon class="message__remove-icon" name="close"></leu-icon>
+            </button>` : nothing}
+      </div>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuMessage.prototype, "type", void 0);
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuMessage.prototype, "size", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuMessage.prototype, "removable", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuMessage.prototype, "popup", void 0);
+//#endregion
+export { LeuMessage as t };

package/dist/Message.d.ts

@@ -1,8 +1,8 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
-import { L as LeuIcon } from './Icon.d-itcQ94ym.js';
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import { t as LeuIcon } from "./Icon-Op80LrrO.js";
+import * as lit_html0 from "lit-html";
 
+//#region src/components/message/Message.d.ts
 /**
  * @tagname leu-message
  * @cssprop --leu-message-accent-color - Sets the color of the message. According to the design system, it is only allowd for `info`
@@ -11,53 +11,53 @@ import { L as LeuIcon } from './Icon.d-itcQ94ym.js';
  * @fires leu:remove - Fired when the close button is clicked.
  */
 declare class LeuMessage extends LeuElement {
-    static styles: lit.CSSResultGroup[];
-    /**
-     * @internal
-     */
-    static shadowRootOptions: {
-        delegatesFocus: boolean;
-        mode: ShadowRootMode;
-        serializable?: boolean;
-        slotAssignment?: SlotAssignmentMode;
-        customElements?: CustomElementRegistry;
-        registry?: CustomElementRegistry;
-    };
-    /**
-     * @internal
-     */
-    static dependencies: {
-        "leu-icon": typeof LeuIcon;
-    };
-    /**
-     * @internal
-     */
-    static iconToTypeMap: {
-        info: string;
-        error: string;
-        success: string;
-        warning: string;
-    };
-    /**
-     * The type of the message. `error` and `success` will be displayed as filled boxes.
-     */
-    type: "error" | "success" | "info" | "warning";
-    /**
-     * The size of the message. A call to action button is only allowed for `large` messages.
-     */
-    size: "regular" | "large";
-    /**
-     * Wheter the message is removable or not. The component will not remove itself when the close button is clicked.
-     */
-    removable: boolean;
-    /**
-     * Wheter the message is used as a popup or not. This will add a drop shadow but will not position the message absolutely.
-     */
-    popup: boolean;
-    private hasSlotController;
-    protected renderIcon(): lit_html.TemplateResult<1>;
-    protected handleRemove(): void;
-    render(): lit_html.TemplateResult<1>;
+  static styles: any[];
+  /**
+   * @internal
+   */
+  static shadowRootOptions: {
+    delegatesFocus: boolean;
+    clonable?: boolean;
+    customElementRegistry?: CustomElementRegistry;
+    mode: ShadowRootMode;
+    serializable?: boolean;
+    slotAssignment?: SlotAssignmentMode;
+  };
+  /**
+   * @internal
+   */
+  static dependencies: {
+    "leu-icon": typeof LeuIcon;
+  };
+  /**
+   * @internal
+   */
+  static iconToTypeMap: {
+    info: string;
+    error: string;
+    success: string;
+    warning: string;
+  };
+  /**
+   * The type of the message. `error` and `success` will be displayed as filled boxes.
+   */
+  type: "error" | "success" | "info" | "warning";
+  /**
+   * The size of the message. A call to action button is only allowed for `large` messages.
+   */
+  size: "regular" | "large";
+  /**
+   * Wheter the message is removable or not. The component will not remove itself when the close button is clicked.
+   */
+  removable: boolean;
+  /**
+   * Wheter the message is used as a popup or not. This will add a drop shadow but will not position the message absolutely.
+   */
+  popup: boolean;
+  private hasSlotController;
+  protected renderIcon(): lit_html0.TemplateResult<1>;
+  protected handleRemove(): void;
+  render(): lit_html0.TemplateResult<1>;
 }
-
-export { LeuMessage };
+//#endregion
+export { LeuMessage };