@statistikzh/leu 0.24.2 → 0.26.0

package/dist/Dialog.js

@@ -1,241 +1,4 @@
-import { _ as __decorate } from './_tslib-CNEFicEt.js';
-import { css, nothing, html } from 'lit';
-import { createRef, ref } from 'lit/directives/ref.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BfXSO7MN.js';
-import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
-import { LeuIcon } from './Icon.js';
-
-var css_248z = css`/* figma https://www.figma.com/design/d6Pv21UVUbnBs3AdcZijHmbN/KTZH-Design-System?node-id=21161-186812&t=8VgDy9avMRG5aL7s-0 */
-:host {
-  --dialog-font-regular: var(--leu-font-family-regular);
-  --dialog-font-black: var(--leu-font-family-black);
-
-  font-family: var(--dialog-font-regular);
-}
-.dialog {
-  background: #fff;
-  border: 0;
-  padding: 0;
-
-  overflow: hidden;
-  background-color: var(--leu-color-black-0);
-
-  flex-direction: column;
-
-  margin: 0 auto;
-  height: 100vh;
-  width: 100vw;
-  max-height: 100vh;
-  max-width: 100vw;
-}
-@media (min-width: 600px) {
-.dialog {
-    margin: 80px auto;
-    height: -moz-fit-content;
-    height: fit-content;
-    width: -moz-fit-content;
-    width: fit-content;
-    max-width: min(100% - 4.5rem, 60.5rem);
-    max-height: calc(100vh - 5rem);
-}
-  }
-.dialog[open] {
-  display: flex;
-}
-.dialog::backdrop {
-  background-color: var(--leu-color-black-transp-40);
-}
-.content {
-  --padding: 2rem;
-  padding: 2rem;
-  padding: var(--padding);
-  padding-bottom: 0;
-  margin-bottom: 1.5rem;
-  overflow-y: auto;
-}
-@media (min-width: 600px) {
-.content {
-    --padding: 2.5rem;
-}
-  }
-@media (min-width: 840px) {
-.content {
-    margin-bottom: 2rem;
-}
-  }
-@media (min-width: 1024px) {
-.content {
-    --padding: 3.5rem;
-}
-  }
-@media (min-width: 1280px) {
-.content {
-    margin-bottom: 2.5rem;
-}
-  }
-.title-wrapper {
-  display: flex;
-  flex-flow: column wrap;
-}
-.header {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-}
-.title {
-  font: var(--leu-t-curve-big-black-font);
-  margin: 0 0 0.75rem;
-  order: 2;
-}
-@media (min-width: 600px) {
-.title {
-    margin-bottom: 1rem;
-}
-  }
-@media (min-width: 840px) {
-.title {
-    margin-bottom: 1.25rem;
-}
-  }
-@media (min-width: 1280px) {
-.title {
-    margin-bottom: 1.5rem;
-    font: var(--leu-t-bigger-big-black-font);
-}
-  }
-.subtitle {
-  color: var(--leu-color-black-transp-60);
-  font-size: var(--leu-t-tiny-regular-font-size);
-  line-height: var(--leu-t-tiny-regular-line-height);
-
-  order: 1;
-
-  margin: 0 0 4px;
-}
-.close-button {
-  cursor: pointer;
-  display: flex;
-  gap: 0.5rem;
-
-  padding: 0.25rem 0;
-  margin-left: 0.75rem;
-  border: 0;
-  border-radius: 0.125rem;
-
-  color: var(--leu-color-black-transp-60);
-  background: transparent;
-}
-@media (min-width: 600px) {
-.close-button {
-    margin-left: 1rem;
-}
-  }
-@media (min-width: 840px) {
-.close-button {
-    margin-left: 1.25rem;
-}
-  }
-@media (min-width: 1280px) {
-.close-button {
-    margin-left: 1.5rem;
-}
-  }
-.close-button:focus-visible {
-  outline: 2px solid var(--leu-color-func-cyan);
-  outline-offset: 2px;
-}
-.close-button__label {
-  display: none;
-  font: var(--leu-t-regular-regular-font);
-}
-@media (min-width: 840px) {
-.close-button__label {
-    display: inline;
-}
-  }
-.close-button__label--hidden {
-  display: none;
-}
-.actionbar {
-  display: flex;
-  justify-content: flex-end;
-  min-height: 3rem;
-}
-`;
-
-/**
- * @tagname leu-dialog
- */
-class LeuDialog extends LeuElement {
-    constructor() {
-        super(...arguments);
-        this.label = "";
-        this.sublabel = "";
-        this.open = false;
-        this._dialogRef = createRef();
-        this.hasSlotController = new HasSlotController(this, ["toolbar"]);
-    }
-    show() {
-        this._dialogRef.value.showModal();
-    }
-    close() {
-        this._dialogRef.value.close();
-    }
-    render() {
-        const hasActionbar = this.hasSlotController.test("actionbar");
-        const closeButtonLabelClasses = {
-            "close-button__label": true,
-            "close-button__label--hidden": hasActionbar,
-        };
-        return html `
-      <dialog class="dialog" ref=${ref(this._dialogRef)} ?open=${this.open}>
-        <div class="content">
-          <div class="header">
-            <div class="title-wrapper">
-              <h1 class="title">${this.label}</h1>
-              ${this.sublabel
-            ? html `<p class="subtitle">${this.sublabel}</p>`
-            : nothing}
-            </div>
-            <button
-              class="close-button"
-              @click=${this.close}
-              aria-label="Schliessen"
-            >
-              <span
-                class=${classMap(closeButtonLabelClasses)}
-                aria-hidden="true"
-                >Schliessen</span
-              ><leu-icon name="close"> </leu-icon>
-            </button>
-          </div>
-          <slot></slot>
-        </div>
-        <div class="actionbar">
-          <slot name="actionbar"></slot>
-        </div>
-      </dialog>
-    `;
-    }
-}
-LeuDialog.dependencies = {
-    "leu-icon": LeuIcon,
-};
-LeuDialog.styles = [LeuElement.styles, css_248z];
-LeuDialog.shadowRootOptions = {
-    ...LeuElement.shadowRootOptions,
-    delegatesFocus: true,
-};
-__decorate([
-    property({ type: String })
-], LeuDialog.prototype, "label", void 0);
-__decorate([
-    property({ type: String })
-], LeuDialog.prototype, "sublabel", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuDialog.prototype, "open", void 0);
-
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import { t as LeuDialog } from "./Dialog-DHuXR_oo.js";
 export { LeuDialog };

package/dist/Dropdown-DtFTePbc.js

@@ -0,0 +1,155 @@
+import { t as LeuElement } from "./LeuElement-BeFrgKes.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { t as HasSlotController } from "./hasSlotController-DSBCVzPD.js";
+import { t as LeuButton } from "./Button-BkhqVjug.js";
+import { t as LeuMenuItem } from "./MenuItem-DVg8-1Bq.js";
+import { t as LeuMenu } from "./Menu-BeqqtCw6.js";
+import { t as LeuPopup } from "./Popup-DNlm_9AA.js";
+import { css, html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { createRef, ref } from "lit/directives/ref.js";
+//#region src/components/dropdown/dropdown.css?inline
+var dropdown_default = css`:host {
+  position: relative;
+  display: contents;
+}
+
+.content {
+  overflow: hidden;
+  box-shadow: var(--leu-box-shadow-short);
+  border-radius: 2px;
+
+  margin-top: 0.5rem;
+}
+
+.button {
+  max-width: 100%;
+}
+`;
+//#endregion
+//#region src/components/dropdown/Dropdown.ts
+/**
+* @tagname leu-dropdown
+*/
+var LeuDropdown = class extends LeuElement {
+	constructor(..._args) {
+		super(..._args);
+		this.label = "";
+		this.expanded = false;
+		this.inverted = false;
+		this.hasSlotController = new HasSlotController(this, ["icon"]);
+		this._toggleRef = createRef();
+		this._documentClickHandler = (event) => {
+			if (!event.composedPath().includes(this)) this.expanded = false;
+		};
+		this._keyUpHandler = (event) => {
+			if (event.key === "Escape") this.expanded = false;
+		};
+		this._menuItemClickHandler = (e) => {
+			if (e.target.tagName.toLowerCase() === "leu-menu-item") {
+				this.expanded = false;
+				this._toggleRef.value.focus();
+			}
+		};
+		this._keyDownMenuHandler = (e) => {
+			if (e.key === "Escape" || e.key === "Tab") {
+				e.preventDefault();
+				this.expanded = false;
+				this._toggleRef.value.focus();
+			}
+		};
+	}
+	static {
+		this.dependencies = {
+			"leu-button": LeuButton,
+			"leu-menu": LeuMenu,
+			"leu-menu-item": LeuMenuItem,
+			"leu-popup": LeuPopup
+		};
+	}
+	static {
+		this.styles = [LeuElement.styles, dropdown_default];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener("keyup", this._keyUpHandler);
+		document.addEventListener("click", this._documentClickHandler);
+		const menu = this._getMenu();
+		menu.addEventListener("keydown", this._keyDownMenuHandler);
+		menu.addEventListener("click", this._menuItemClickHandler);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener("keyup", this._keyUpHandler);
+		document.removeEventListener("click", this._documentClickHandler);
+		const menu = this._getMenu();
+		menu.removeEventListener("keydown", this._keyDownMenuHandler);
+		menu.removeEventListener("click", this._menuItemClickHandler);
+	}
+	async _keyDownToggleHandler(event) {
+		if ([
+			"ArrowDown",
+			"ArrowUp",
+			"Home",
+			"End"
+		].includes(event.key)) {
+			event.preventDefault();
+			const menu = this._getMenu();
+			this.expanded = true;
+			await this.updateComplete;
+			if (event.key === "ArrowDown" || event.key === "Home") menu.focusItem(0);
+			else if (event.key === "ArrowUp" || event.key === "End") menu.focusItem(-1);
+		}
+	}
+	_handleToggleClick() {
+		this.expanded = !this.expanded;
+	}
+	_getMenu() {
+		return this.querySelector("leu-menu");
+	}
+	render() {
+		const hasIcon = this.hasSlotController.test("icon");
+		return html`
+      <leu-popup
+        ?active=${this.expanded}
+        placement="bottom-start"
+        shift
+        shiftPadding="8"
+        autoSize="width"
+        autoSizePadding="8"
+      >
+        <leu-button
+          ref=${ref(this._toggleRef)}
+          class="button"
+          slot="anchor"
+          variant="ghost"
+          expanded=${this.expanded ? "true" : "false"}
+          ?active=${this.expanded}
+          ?inverted=${this.inverted}
+          @click=${this._handleToggleClick}
+          @keydown=${this._keyDownToggleHandler}
+        >
+          ${hasIcon ? html`<slot name="icon" slot="before"></slot>` : nothing}
+          ${this.label}</leu-button
+        >
+        <div id="content" class="content" ?hidden=${!this.expanded}>
+          <slot></slot>
+        </div>
+      </leu-popup>
+    `;
+	}
+};
+__decorate([property({
+	type: String,
+	reflect: true
+})], LeuDropdown.prototype, "label", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuDropdown.prototype, "expanded", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], LeuDropdown.prototype, "inverted", void 0);
+//#endregion
+export { LeuDropdown as t };

package/dist/Dropdown.d.ts

@@ -1,47 +1,45 @@
-import * as lit_html from 'lit-html';
-import * as lit_html_directives_ref_js from 'lit-html/directives/ref.js';
-import * as lit from 'lit';
-import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
-import { H as HasSlotController } from './hasSlotController.d-emXwVXWF.js';
-import { LeuButton } from './Button.js';
-import { LeuMenu } from './Menu.js';
-import { LeuMenuItem } from './MenuItem.js';
-import { LeuPopup } from './Popup.js';
-import './Icon.d-itcQ94ym.js';
-import '@floating-ui/dom';
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import { t as LeuButton } from "./Button-BgNUxmo_.js";
+import { t as HasSlotController } from "./hasSlotController-DWPyZ52b.js";
+import { t as LeuMenuItem } from "./MenuItem-QcgnRk_7.js";
+import { t as LeuMenu } from "./Menu-CQdx1ef3.js";
+import { t as LeuPopup } from "./Popup-Btgm2a3D.js";
+import * as lit_html0 from "lit-html";
+import * as lit_html_directives_ref_js0 from "lit-html/directives/ref.js";
 
+//#region src/components/dropdown/Dropdown.d.ts
 /**
  * @tagname leu-dropdown
  */
 declare class LeuDropdown extends LeuElement {
-    static dependencies: {
-        "leu-button": typeof LeuButton;
-        "leu-menu": typeof LeuMenu;
-        "leu-menu-item": typeof LeuMenuItem;
-        "leu-popup": typeof LeuPopup;
-    };
-    static styles: lit.CSSResultGroup[];
-    label: string;
-    expanded: boolean;
-    inverted: boolean;
-    protected hasSlotController: HasSlotController;
-    protected _toggleRef: lit_html_directives_ref_js.Ref<HTMLButtonElement>;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    protected _documentClickHandler: (event: MouseEvent) => void;
-    protected _keyUpHandler: (event: KeyboardEvent) => void;
-    protected _keyDownToggleHandler(event: KeyboardEvent): Promise<void>;
-    protected _menuItemClickHandler: (e: MouseEvent & {
-        target: HTMLElement;
-    }) => void;
-    /**
-     * Close the dropdown when the user presses the Escape or the Tab key.
-     * Navigating the menu with the arrow keys is handled by the menu itself.
-     */
-    protected _keyDownMenuHandler: (e: KeyboardEvent) => void;
-    protected _handleToggleClick(): void;
-    protected _getMenu(): LeuMenu;
-    render(): lit_html.TemplateResult<1>;
+  static dependencies: {
+    "leu-button": typeof LeuButton;
+    "leu-menu": typeof LeuMenu;
+    "leu-menu-item": typeof LeuMenuItem;
+    "leu-popup": typeof LeuPopup;
+  };
+  static styles: any[];
+  label: string;
+  expanded: boolean;
+  inverted: boolean;
+  protected hasSlotController: HasSlotController;
+  protected _toggleRef: lit_html_directives_ref_js0.Ref<HTMLButtonElement>;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  protected _documentClickHandler: (event: MouseEvent) => void;
+  protected _keyUpHandler: (event: KeyboardEvent) => void;
+  protected _keyDownToggleHandler(event: KeyboardEvent): Promise<void>;
+  protected _menuItemClickHandler: (e: MouseEvent & {
+    target: HTMLElement;
+  }) => void;
+  /**
+   * Close the dropdown when the user presses the Escape or the Tab key.
+   * Navigating the menu with the arrow keys is handled by the menu itself.
+   */
+  protected _keyDownMenuHandler: (e: KeyboardEvent) => void;
+  protected _handleToggleClick(): void;
+  protected _getMenu(): LeuMenu;
+  render(): lit_html0.TemplateResult<1>;
 }
-
-export { LeuDropdown };
+//#endregion
+export { LeuDropdown };

package/dist/Dropdown.js

@@ -1,158 +1,10 @@
-import { _ as __decorate } from './_tslib-CNEFicEt.js';
-import { css, nothing, html } from 'lit';
-import { createRef, ref } from 'lit/directives/ref.js';
-import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-BfXSO7MN.js';
-import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
-import { LeuButton } from './Button.js';
-import { LeuMenu } from './Menu.js';
-import { LeuMenuItem } from './MenuItem.js';
-import { LeuPopup } from './Popup.js';
-import 'lit/directives/class-map.js';
-import 'lit/directives/if-defined.js';
-import './Icon.js';
-import '@floating-ui/dom';
-
-var css_248z = css`:host {
-  position: relative;
-  display: contents;
-}
-
-.content {
-  overflow: hidden;
-  box-shadow: var(--leu-box-shadow-short);
-  border-radius: 2px;
-
-  margin-top: 0.5rem;
-}
-
-.button {
-  max-width: 100%;
-}
-`;
-
-/**
- * @tagname leu-dropdown
- */
-class LeuDropdown extends LeuElement {
-    constructor() {
-        super(...arguments);
-        this.label = "";
-        this.expanded = false;
-        this.inverted = false;
-        this.hasSlotController = new HasSlotController(this, ["icon"]);
-        this._toggleRef = createRef();
-        this._documentClickHandler = (event) => {
-            if (!event.composedPath().includes(this)) {
-                this.expanded = false;
-            }
-        };
-        this._keyUpHandler = (event) => {
-            if (event.key === "Escape") {
-                this.expanded = false;
-            }
-        };
-        this._menuItemClickHandler = (e) => {
-            if (e.target.tagName.toLowerCase() === "leu-menu-item") {
-                this.expanded = false;
-                this._toggleRef.value.focus();
-            }
-        };
-        /**
-         * Close the dropdown when the user presses the Escape or the Tab key.
-         * Navigating the menu with the arrow keys is handled by the menu itself.
-         */
-        this._keyDownMenuHandler = (e) => {
-            if (e.key === "Escape" || e.key === "Tab") {
-                e.preventDefault();
-                this.expanded = false;
-                this._toggleRef.value.focus();
-            }
-        };
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.addEventListener("keyup", this._keyUpHandler);
-        document.addEventListener("click", this._documentClickHandler);
-        const menu = this._getMenu();
-        menu.addEventListener("keydown", this._keyDownMenuHandler);
-        menu.addEventListener("click", this._menuItemClickHandler);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        this.removeEventListener("keyup", this._keyUpHandler);
-        document.removeEventListener("click", this._documentClickHandler);
-        const menu = this._getMenu();
-        menu.removeEventListener("keydown", this._keyDownMenuHandler);
-        menu.removeEventListener("click", this._menuItemClickHandler);
-    }
-    async _keyDownToggleHandler(event) {
-        if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
-            event.preventDefault();
-            const menu = this._getMenu();
-            this.expanded = true;
-            await this.updateComplete;
-            if (event.key === "ArrowDown" || event.key === "Home") {
-                menu.focusItem(0);
-            }
-            else if (event.key === "ArrowUp" || event.key === "End") {
-                menu.focusItem(-1);
-            }
-        }
-    }
-    _handleToggleClick() {
-        this.expanded = !this.expanded;
-    }
-    _getMenu() {
-        return this.querySelector("leu-menu");
-    }
-    render() {
-        const hasIcon = this.hasSlotController.test("icon");
-        return html `
-      <leu-popup
-        ?active=${this.expanded}
-        placement="bottom-start"
-        shift
-        shiftPadding="8"
-        autoSize="width"
-        autoSizePadding="8"
-      >
-        <leu-button
-          ref=${ref(this._toggleRef)}
-          class="button"
-          slot="anchor"
-          variant="ghost"
-          expanded=${this.expanded ? "true" : "false"}
-          ?active=${this.expanded}
-          ?inverted=${this.inverted}
-          @click=${this._handleToggleClick}
-          @keydown=${this._keyDownToggleHandler}
-        >
-          ${hasIcon ? html `<slot name="icon" slot="before"></slot>` : nothing}
-          ${this.label}</leu-button
-        >
-        <div id="content" class="content" ?hidden=${!this.expanded}>
-          <slot></slot>
-        </div>
-      </leu-popup>
-    `;
-    }
-}
-LeuDropdown.dependencies = {
-    "leu-button": LeuButton,
-    "leu-menu": LeuMenu,
-    "leu-menu-item": LeuMenuItem,
-    "leu-popup": LeuPopup,
-};
-LeuDropdown.styles = [LeuElement.styles, css_248z];
-__decorate([
-    property({ type: String, reflect: true })
-], LeuDropdown.prototype, "label", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuDropdown.prototype, "expanded", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], LeuDropdown.prototype, "inverted", void 0);
-
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import "./Spinner-DDTqijTO.js";
+import "./Button-BkhqVjug.js";
+import "./FormAssociatedMixin-DLPvFtbT.js";
+import "./MenuItem-DVg8-1Bq.js";
+import "./Menu-BeqqtCw6.js";
+import "./Popup-DNlm_9AA.js";
+import { t as LeuDropdown } from "./Dropdown-DtFTePbc.js";
 export { LeuDropdown };