@statistikzh/leu 0.4.0 → 0.5.0

package/dist/Breadcrumb.js

@@ -0,0 +1,392 @@
+import { _ as _defineProperty } from './_rollupPluginBabelHelpers-20f659f4.js';
+import { css, LitElement, nothing, html } from 'lit';
+import { createRef, ref } from 'lit/directives/ref.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { I as Icon } from './icon-03e86700.js';
+import './leu-menu.js';
+import './leu-menu-item.js';
+import './leu-popup.js';
+import './leu-visually-hidden.js';
+import { d as debounce } from './utils-65469421.js';
+import './defineElement-40372b4b.js';
+import './Menu.js';
+import './MenuItem.js';
+import 'lit/static-html.js';
+import 'lit/directives/if-defined.js';
+import './Popup.js';
+import '@floating-ui/dom';
+import './VisuallyHidden.js';
+
+var css_248z = css`:host,
+:host * {
+  box-sizing: border-box;
+}
+
+:host {
+  --breadcrumb-font-regular: var(--leu-font-family-regular);
+  --breadcrumb-font-black: var(--leu-font-family-black);
+
+  font-family: var(--leu-font-family-regular);
+
+  font-family: var(--breadcrumb-font-regular);
+  line-height: 1.5;
+  color: var(--leu-color-black-100);
+}
+
+:host([inverted]) {
+  color: var(--leu-color-black-0);
+}
+
+.breadcrumbs__list {
+  display: flex;
+  align-items: center;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+}
+
+.breadcrumbs--back-only .breadcrumbs__list {
+  overflow: hidden;
+}
+
+.breadcrumbs__item,
+.breadcrumbs__icon {
+  align-items: center;
+  display: flex;
+  min-height: 1.875rem;
+  white-space: nowrap;
+}
+
+.breadcrumbs__item:first-child:not(.breadcrumbs__item--back) {
+  font-family: var(--breadcrumb-font-black);
+}
+
+.breadcrumbs__item--back {
+  max-width: 100%;
+}
+
+.breadcrumbs__link {
+  color: inherit;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  transition: color 0.1s ease;
+  white-space: nowrap;
+}
+
+.breadcrumbs__item--back .breadcrumbs__link {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 0.25rem;
+}
+
+.menu {
+  background: none;
+  color: inherit;
+  cursor: pointer;
+  border: 2px solid transparent;
+}
+
+.menu:focus-visible {
+  outline: 2px solid var(--leu-color-func-cyan);
+  outline-offset: 2px;
+}
+
+.dropdown {
+  background-color: var(--leu-color-black-0);
+  box-shadow: var(--leu-box-shadow-short);
+}
+
+.breadcrumbs {
+  font-size: 1rem;
+}
+
+@media (min-width: 320px) {
+  .breadcrumbs {
+    font-size: calc(2.5vw + 8px);
+  }
+}
+
+@media (min-width: 400px) {
+  .breadcrumbs {
+    font-size: 18px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .breadcrumbs {
+    font-size: calc(0.7813vw + 10px);
+  }
+}
+
+@media (min-width: 1280px) {
+  .breadcrumbs {
+    font-size: 20px;
+  }
+}
+`;
+
+/**
+ * A Breadcrumb Navigation.
+ *
+ * The breadcrumbs can be displayed in two different layouts.
+ * Only the back link (the last item / parent of the current page)
+ * is displayed when…
+ * -  … the width of the container is smaller
+ *      than the BACK_ONLY_BREAKPOINT.
+ * -  … less then two breadcrumb items could be displayed
+ *      without overflowing the container.
+ *
+ * Otherwise as many items as possible are displayed in an inline list
+ * without overflowing the container. The remaining items are displayed
+ * in a dropdown menu.
+ *
+ * In order to determine the exact numbers of items that have to be
+ * hidden inside the dropdown, all of them have to be rendered first.
+ * 1. Render all items
+ * 2. Calculate (measure) the number of items that can be displayed
+ *    without overflowing the container.
+ * 3. Updating the state (_hiddeItems) which will trigger a rerender
+ * 4. Render the items again with the new state.
+ *
+ * This results in multiple updates scheduled one after another. Lit
+ * will also print a waring in the console beacause of that.
+ * It's no a nice behaviour but the only one that works without
+ * having duplicate and hidden markup to derive the sizes from that.
+ *
+ *
+ * @prop {Array} items - Object array with { label, href }
+ * @prop {Boolean} inverted - invert color on dark background
+ *
+ * @tagname leu-breadcrumb
+ */
+class LeuBreadcrumb extends LitElement {
+  constructor() {
+    super();
+    /** @type {Array} */
+    _defineProperty(this, "_handleResize", async () => {
+      const containerOffsetWidth = this._containerRef.value.offsetWidth;
+      const sizeIsGrowing = containerOffsetWidth > this._lastContainerWidth;
+      this._lastContainerWidth = containerOffsetWidth;
+
+      /**
+       * Show only the back link (parent of the current page)
+       * when the width of the container is smaller than the BACK_ONLY_BREAKPOINT
+       */
+      if (containerOffsetWidth <= LeuBreadcrumb.BACK_ONLY_BREAKPOINT) {
+        this._showBackOnly = true;
+        this._isRecalculating = false;
+        return;
+      }
+      this._showBackOnly = false;
+
+      /**
+       *  In order to calculate how many items can be displayed
+       *  when the container is growing, all items have to
+       *  be marked as displayed (_hiddenItems = 0) and
+       *  rendered.
+       */
+      if (sizeIsGrowing && this._hiddenItems > 0) {
+        this._hiddenItems = 0;
+        this._isRecalculating = true;
+        await this.updateComplete;
+      }
+      this._checkWidth();
+    });
+    /** @internal */
+    _defineProperty(this, "_handleDropdownToggle", e => {
+      e.stopPropagation();
+      this._isDropdownOpen = !this._isDropdownOpen;
+      if (this._isDropdownOpen) {
+        window.addEventListener("click", this._closeDropdown);
+      } else {
+        window.removeEventListener("click", this._closeDropdown);
+      }
+    });
+    _defineProperty(this, "_closeDropdown", () => {
+      this._isDropdownOpen = false;
+      window.removeEventListener("click", this._closeDropdown);
+    });
+    this.items = [];
+    /** @type {Boolean} - will be used on dark Background */
+    this.inverted = false;
+
+    /** @internal */
+    this._containerRef = createRef();
+    /** @internal */
+    this._hiddenItems = 0;
+    /** @internal */
+    this._showBackOnly = null;
+    /** @internal */
+    this._lastContainerWidth = null;
+    /**
+     * @internal
+     * Forces the toggle button to be rendered
+     * so that all possible inline items will be measured.
+     * */
+    this._isRecalculating = true;
+    /** @internal */
+    this._isDropdownOpen = false;
+    this.resizeObserver = new ResizeObserver(debounce(() => {
+      this._handleResize();
+    }, 500));
+  }
+  firstUpdated() {
+    this.resizeObserver.observe(this._containerRef.value);
+  }
+  async updated(changedProperties) {
+    if (changedProperties.has("items")) {
+      this._hiddenItems = 0;
+      this._isRecalculating = true;
+      await this.updateComplete;
+      this._checkWidth();
+    }
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener("click", this._closeDropdown);
+    this.resizeObserver.disconnect();
+  }
+
+  /** @internal */
+  get _listItems() {
+    return this.items.toSpliced(1, this._hiddenItems);
+  }
+
+  /** @internal */
+  get _dropdownItems() {
+    return this.items.slice(1, 1 + this._hiddenItems);
+  }
+  /**
+   * Calculate the number of items that can be displayed
+   * without overflowing the container.
+   * @internal
+   * @returns {void}
+   */
+  _checkWidth() {
+    const containerOffsetWidth = this._containerRef.value.offsetWidth;
+    const containerScrollWidth = this._containerRef.value.scrollWidth;
+    this._lastContainerWidth = containerOffsetWidth;
+
+    /** When the container is not overflowing, nothing has to be done */
+    if (containerOffsetWidth === containerScrollWidth) {
+      this._isRecalculating = false;
+      return;
+    }
+    const listItems = this._containerRef.value.querySelectorAll("li:not([data-dropdown-toggle])");
+    const listItemWidths = [...listItems].map(o => o.offsetWidth);
+    let hiddenItems = 0;
+    let hiddenItemsWidth = 0;
+
+    /**
+     * Remove item by item until the sum of the remaining items
+     * is smaller than the width of the container.
+     * The first item will not be removed.
+     */
+    while (hiddenItems < listItemWidths.length && containerOffsetWidth < containerScrollWidth - hiddenItemsWidth) {
+      hiddenItems += 1;
+      hiddenItemsWidth = listItemWidths.slice(1, 1 + hiddenItems).reduce((sum, itemWidth) => sum + itemWidth, 0);
+    }
+    this._hiddenItems += hiddenItems;
+    this._isRecalculating = false;
+  }
+  /**
+   * Render the dropdown menu
+   * @returns
+   */
+  renderDropdown() {
+    if (this._dropdownItems.length === 0 && !this._isRecalculating) return nothing;
+    return html`
+      <li class="breadcrumbs__item" data-dropdown-toggle>
+        <span class="breadcrumbs__icon">${Icon("angleRight")}</span>
+        <leu-popup
+          ?active=${this._isDropdownOpen}
+          placement="bottom-start"
+          shift
+          shiftPadding="8"
+          autoSize="width"
+          autoSizePadding="8"
+        >
+          <button
+            slot="anchor"
+            class="menu"
+            @click=${this._handleDropdownToggle}
+            tabindex="0"
+          >
+            &hellip;
+          </button>
+          <div class="dropdown">
+            ${html`
+              <leu-menu>
+                ${this._dropdownItems.map(item => html`
+                      <leu-menu-item
+                        label=${item.label}
+                        href=${item.href}
+                      ></leu-menu-item>
+                    `)}
+              </leu-menu>
+            `}
+          </div>
+        </leu-popup>
+      </li>
+    `;
+  }
+  render() {
+    if (this.items.length < 2) return nothing;
+    const parentItem = this.items[this.items.length - 2];
+    const showBackOnly = this._showBackOnly || this.items.length - this._hiddenItems < 2;
+    const wrapperClasses = {
+      breadcrumbs: true,
+      "breadcrumbs--back-only": showBackOnly
+    };
+    return html`
+      <nav class=${classMap(wrapperClasses)}>
+        <leu-visually-hidden><h2>Sie sind hier:</h2></leu-visually-hidden>
+        <ol class="breadcrumbs__list" ref=${ref(this._containerRef)}>
+          ${showBackOnly ? html` <li class="breadcrumbs__item breadcrumbs__item--back">
+                <span class="breadcrumbs__icon">${Icon("arrowLeft")}</span>
+                <a class="breadcrumbs__link" href=${parentItem.href}
+                  >${parentItem.label}</a
+                >
+              </li>` : this._listItems.map((item, index, list) => html`
+                    <li class="breadcrumbs__item">
+                      ${index > 0 ? html`<span class="breadcrumbs__icon"
+                            >${Icon("angleRight")}</span
+                          >` // First list item doesn't have an arrow
+    : nothing}
+                      ${index === list.length - 1 ? item.label // Last list item doesn't contain a link
+    : html`<a class="breadcrumbs__link" href=${item.href}
+                            >${item.label}</a
+                          >`}
+                    </li>
+                    ${index === 0 ? this.renderDropdown() : nothing}
+                  `)}
+        </ol>
+      </nav>
+    `;
+  }
+}
+_defineProperty(LeuBreadcrumb, "styles", css_248z);
+_defineProperty(LeuBreadcrumb, "properties", {
+  items: {
+    type: Array
+  },
+  inverted: {
+    type: Boolean,
+    reflect: true
+  },
+  _hiddenItems: {
+    state: true
+  },
+  _showBackOnly: {
+    state: true
+  },
+  _isRecalculating: {
+    state: true
+  },
+  _isDropdownOpen: {
+    state: true
+  }
+});
+_defineProperty(LeuBreadcrumb, "BACK_ONLY_BREAKPOINT", 320);
+
+export { LeuBreadcrumb };

package/dist/Button-da11d064.d.ts

@@ -0,0 +1,84 @@
+/**
+ * A reactive controller that determines when slots exist.
+ */
+export type ReactiveController = import("lit").ReactiveController;
+declare const BUTTON_VARIANTS: string[];
+/**
+ * Thanks Shoelace!
+ * Source: https://github.com/shoelace-style/shoelace/blob/next/src/internal/slot.ts
+ */
+/**
+ * A reactive controller that determines when slots exist.
+ * @typedef {import("lit").ReactiveController} ReactiveController
+ * @implements {ReactiveController}
+ */
+declare class HasSlotController implements ReactiveController {
+    constructor(host: any, slotNames: any);
+    host: any;
+    slotNames: any;
+    /**
+     * @private
+     * @returns {Boolean}
+     */
+    private hasDefaultSlot;
+    /**
+     * @private
+     * @param {String} name
+     * @returns {Boolean}
+     */
+    private hasNamedSlot;
+    /**
+     * @param {String} slotName
+     * @returns {Boolean}
+     */
+    test(slotName: string): boolean;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+/**
+ * @tagname leu-button
+ */
+declare class LeuButton extends LitElement {
+    label: any;
+    /** @type {string} */
+    icon: string;
+    /** @type {("before" | "after")} - Only taken into account if Label and no Icon is set */
+    iconPosition: ("before" | "after");
+    /** @type {string} */
+    size: string;
+    /** @type {string} */
+    variant: string;
+    /** @type {"button" | "submit" | "reset"} */
+    type: "button" | "submit" | "reset";
+    /** @type {boolean} */
+    disabled: boolean;
+    /** @type {boolean} - Only taken into account if no Label and an Icon is set */
+    round: boolean;
+    /** @type {boolean} */
+    active: boolean;
+    /** @type {boolean} - will be used on dark Background */
+    inverted: boolean;
+    /** @type {boolean} - Alters the shape of the button to be full width of its parent container */
+    fluid: boolean;
+    /**
+     * Only taken into account if variant is "ghost"
+     * @type {("true" | "false" | undefined)}
+     */
+    expanded: ("true" | "false" | undefined);
+    getIconSize(): 16 | 24;
+    renderIconBefore(): import("lit-html").TemplateResult<1> | typeof nothing;
+    renderIconAfter(): import("lit-html").TemplateResult<1> | typeof nothing;
+    renderExpandingIcon(): import("lit-html").TemplateResult<1> | typeof nothing;
+    getAriaAttributes(): {
+        role: any;
+        label: any;
+    };
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare const BUTTON_SIZES: string[];
+declare const BUTTON_TYPES: string[];
+declare const BUTTON_EXPANDED_OPTIONS: string[];
+import { LitElement } from 'lit';
+import { nothing } from 'lit';
+export { BUTTON_VARIANTS as B, HasSlotController as H, LeuButton as L, BUTTON_SIZES as a, BUTTON_TYPES as b, BUTTON_EXPANDED_OPTIONS as c };
+//# sourceMappingURL=Button-da11d064.d.ts.map

package/dist/Button-da11d064.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button-da11d064.d.ts","sourceRoot":"","sources":["Button-da11d064.js"],"names":[],"mappings":";;;iCAaa,OAAO,KAAK,EAAE,kBAAkB;AA8U7C,wCAA0D;AArV1D;;;GAGG;AAEH;;;;GAIG;AACH;IACE,uCAcC;IAHC,UAAgB;IAEhB,eAA0B;IAG5B;;;OAGG;IACH,uBAeC;IAED;;;;OAIG;IACH,qBAEC;IAED;;;OAGG;IACH,gCAEC;IACD,sBAEC;IACD,yBAEC;CACF;AAoSD;;GAEG;AACH;IAQI,WAAiB;IACjB,qBAAqB;IACrB,MADW,MAAM,CACD;IAChB,yFAAyF;IACzF,cADW,CAAC,QAAQ,GAAG,OAAO,CAAC,CACH;IAC5B,qBAAqB;IACrB,MADW,MAAM,CACI;IACrB,qBAAqB;IACrB,SADW,MAAM,CACO;IACxB,4CAA4C;IAC5C,MADW,QAAQ,GAAG,QAAQ,GAAG,OAAO,CACpB;IAEpB,sBAAsB;IACtB,UADW,OAAO,CACG;IACrB,+EAA+E;IAC/E,OADW,OAAO,CACA;IAClB,sBAAsB;IACtB,QADW,OAAO,CACC;IACnB,wDAAwD;IACxD,UADW,OAAO,CACG;IAErB,gGAAgG;IAChG,OADW,OAAO,CACA;IAElB;;;OAGG;IACH,UAFU,CAAC,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC,CAEf;IAE3B,uBAEC;IACD,0EAOC;IACD,yEAOC;IACD,6EAOC;IACD;;;MAaC;IACD,+CA0BC;CACF;AAhID,qCAA0C;AAE1C,qCAAmD;AAEnD,gDAAkD;2BAhWH,KAAK;wBAAL,KAAK"}