@statistikzh/leu 0.13.1 → 0.14.1

package/dist/Breadcrumb.js

@@ -1,391 +0,0 @@
-import { _ as _defineProperty, L as LeuElement } from './LeuElement-b670d77c.js';
-import { css, nothing, html } from 'lit';
-import { createRef, ref } from 'lit/directives/ref.js';
-import { classMap } from 'lit/directives/class-map.js';
-import { d as debounce } from './utils-65469421.js';
-import { LeuIcon } from './Icon.js';
-import { LeuMenu } from './Menu.js';
-import { LeuMenuItem } from './MenuItem.js';
-import { LeuPopup } from './Popup.js';
-import { LeuVisuallyHidden } from './VisuallyHidden.js';
-import 'lit/directives/if-defined.js';
-import '@floating-ui/dom';
-
-var css_248z = css`: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 LeuElement {
-  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"
-          ><leu-icon name="angleRight"></leu-icon
-        ></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 href=${item.href}
-                        >${item.label}</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"
-                  ><leu-icon name="arrowLeft"></leu-icon
-                ></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"
-                            ><leu-icon name="angleRight"></leu-icon
-                          ></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, "dependencies", {
-  "leu-icon": LeuIcon,
-  "leu-menu": LeuMenu,
-  "leu-menu-item": LeuMenuItem,
-  "leu-popup": LeuPopup,
-  "leu-visually-hidden": LeuVisuallyHidden
-});
-_defineProperty(LeuBreadcrumb, "styles", [LeuElement.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/LeuElement-b670d77c.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"LeuElement-b670d77c.d.ts","sourceRoot":"","sources":["LeuElement-b670d77c.js"],"names":[],"mappings":"AAgDA;IACE,8EAcC;CACF;AA9DD,sEAaC;2BAf+B,KAAK"}

package/dist/hasSlotController-c09741c5.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hasSlotController-c09741c5.d.ts","sourceRoot":"","sources":["hasSlotController-c09741c5.js"],"names":[],"mappings":";;;;iCASa,OAAO,KAAK,EAAE,kBAAkB;AAP7C;;;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"}

package/dist/leu-breadcrumb.d.ts

@@ -1,3 +0,0 @@
-export { LeuBreadcrumb };
-import { LeuBreadcrumb } from './Breadcrumb.js';
-//# sourceMappingURL=leu-breadcrumb.d.ts.map

package/dist/leu-breadcrumb.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"leu-breadcrumb.d.ts","sourceRoot":"","sources":["leu-breadcrumb.js"],"names":[],"mappings":";8BAA8B,iBAAiB"}

package/dist/leu-breadcrumb.js

@@ -1,17 +0,0 @@
-import { LeuBreadcrumb } from './Breadcrumb.js';
-import './LeuElement-b670d77c.js';
-import 'lit';
-import 'lit/directives/ref.js';
-import 'lit/directives/class-map.js';
-import './utils-65469421.js';
-import './Icon.js';
-import './Menu.js';
-import './MenuItem.js';
-import 'lit/directives/if-defined.js';
-import './Popup.js';
-import '@floating-ui/dom';
-import './VisuallyHidden.js';
-
-LeuBreadcrumb.define("leu-breadcrumb");
-
-export { LeuBreadcrumb };

package/dist/utils-65469421.d.ts

@@ -1,16 +0,0 @@
-/**
- * Return a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked.
- * @param {Function} func - Your function
- * @param {Number} timeout - Default is 500 ms
- * @returns {Function} - Your function wrapped in a timeout function
- */
-declare function debounce(func: Function, timeout?: number): Function;
-/**
- * Return a throttled function that only invokes func at most once per every wait milliseconds.
- * @param {Function} func - Your function
- * @param {Number} timeout - Default is 500 ms
- * @returns {Function} - Your function wrapped in a timeout function
- */
-declare function throttle(func: Function, timeout?: number): Function;
-export { debounce as d, throttle as t };
-//# sourceMappingURL=utils-65469421.d.ts.map

package/dist/utils-65469421.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils-65469421.d.ts","sourceRoot":"","sources":["utils-65469421.js"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,sEAQC;AAED;;;;;GAKG;AACH,sEAUC"}

package/dist/utils-65469421.js

@@ -1,35 +0,0 @@
-/**
- * Return a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked.
- * @param {Function} func - Your function
- * @param {Number} timeout - Default is 500 ms
- * @returns {Function} - Your function wrapped in a timeout function
- */
-const debounce = function debounce(func, timeout = 500) {
-  let timer = null;
-  return (...args) => {
-    clearTimeout(timer);
-    timer = setTimeout(() => {
-      func.apply(this, args);
-    }, timeout);
-  };
-};
-
-/**
- * Return a throttled function that only invokes func at most once per every wait milliseconds.
- * @param {Function} func - Your function
- * @param {Number} timeout - Default is 500 ms
- * @returns {Function} - Your function wrapped in a timeout function
- */
-const throttle = function throttle(func, timeout = 500) {
-  let timer = null;
-  return (...args) => {
-    if (timer === null) {
-      func(...args);
-      timer = setTimeout(() => {
-        timer = null;
-      }, timeout);
-    }
-  };
-};
-
-export { debounce as d, throttle as t };