@statistikzh/leu 0.13.1 → 0.14.0

package/src/components/table/Table.js

@@ -141,7 +141,7 @@ export class LeuTable extends LeuElement {
     return this.itemsPerPage && this.itemsPerPage > 0
       ? this._sortedData.slice(
           (this._page - 1) * this.itemsPerPage,
-          this._page * this.itemsPerPage
+          this._page * this.itemsPerPage,
         )
       : this._sortedData
   }
@@ -214,7 +214,7 @@ export class LeuTable extends LeuElement {
                             : nothing}
                         </button>`
                       : col.name}
-                  </th>`
+                  </th>`,
               )}
             </tr>
           </thead>
@@ -226,9 +226,9 @@ export class LeuTable extends LeuElement {
                     (col) =>
                       html`<td style=${bodyStyle(col, row)}>
                         ${col.value(row)}
-                      </td>`
+                      </td>`,
                   )}
-                </tr>`
+                </tr>`,
             )}
           </tbody>
         </table>

package/src/components/table/test/table.test.js

@@ -17,8 +17,9 @@ const data = [
 ]
 
 async function defaultFixture() {
-  return fixture(html`<leu-table .columns=${columns} .data=${data}>
-  </leu-table>`)
+  return fixture(
+    html`<leu-table .columns=${columns} .data=${data}> </leu-table>`,
+  )
 }
 
 describe("LeuTable", () => {

package/src/components/visually-hidden/test/visually-hidden.test.js

@@ -4,13 +4,11 @@ import { fixture, expect } from "@open-wc/testing"
 import "../leu-visually-hidden.js"
 
 async function defaultFixture() {
-  return fixture(
-    html`
-      <leu-visually-hidden>
-        This is a text that shouldn't be visible but still accessible.
-      </leu-visually-hidden>
-    `
-  )
+  return fixture(html`
+    <leu-visually-hidden>
+      This is a text that shouldn't be visible but still accessible.
+    </leu-visually-hidden>
+  `)
 }
 
 describe("LeuVisuallyHidden", () => {
@@ -30,7 +28,7 @@ describe("LeuVisuallyHidden", () => {
     const el = await defaultFixture()
 
     expect(el).dom.to.equal(
-      "<leu-visually-hidden>This is a text that shouldn't be visible but still accessible.</leu-visually-hidden>"
+      "<leu-visually-hidden>This is a text that shouldn't be visible but still accessible.</leu-visually-hidden>",
     )
   })
 })

package/src/lib/LeuElement.js

@@ -20,14 +20,14 @@ export class LeuElement extends LitElement {
 
     if (currentlyRegisteredConstructor !== constructor) {
       console.warn(
-        `The custom element with the name <${name}> is already registered with a different constructor. This can happen when the same element has been loaded from different modules (e.g. multiple CDN requests or bundles).`
+        `The custom element with the name <${name}> is already registered with a different constructor. This can happen when the same element has been loaded from different modules (e.g. multiple CDN requests or bundles).`,
       )
       return
     }
 
     if (currentlyRegisteredConstructor.version !== constructor.version) {
       console.warn(
-        `The custom element with the name <${name}> is already defined with the same constructor but a different version (${currentlyRegisteredConstructor.version}).`
+        `The custom element with the name <${name}> is already defined with the same constructor but a different version (${currentlyRegisteredConstructor.version}).`,
       )
     }
   }

package/src/lib/hasSlotController.js

@@ -65,7 +65,7 @@ export class HasSlotController {
   hostDisconnected() {
     this.host.shadowRoot.removeEventListener(
       "slotchange",
-      this.handleSlotChange
+      this.handleSlotChange,
     )
   }
 

package/src/styles/style.stories.js

@@ -53,7 +53,9 @@ function Template() {
         .flat()
         .map(
           (columns) =>
-            html`<div style="grid-column-end: span ${columns}">${columns}</div>`
+            html`<div style="grid-column-end: span ${columns}">
+              ${columns}
+            </div>`,
         )}
     </div>`
 }

package/tsconfig.build.json

@@ -1,6 +1,6 @@
 {
-  "include": ["dist/**/*.js"],
-  "exclude": ["node_modules", "dist/**/*.d.ts"],
+  "include": ["./dist/**/*.js"],
+  "exclude": ["./node_modules"],
   "compilerOptions": {
     // Tells TypeScript to read JS files, as
     // normally they are ignored as source files
@@ -16,6 +16,7 @@
     "outDir": "dist",
     // go to js file when using IDE functions like
     // "Go to Definition" in VSCode
-    "declarationMap": true
+    "declarationMap": true,
+    "skipLibCheck": true
   }
 }

package/web-dev-server.config.mjs

@@ -13,6 +13,7 @@ export default /** @type {import('@web/dev-server').DevServerConfig} */ ({
   mimeTypes: {
     "**/custom-elements.json": "js",
     "src/components/**/*.css": "js",
+    ".storybook/static/*.css": "js",
     "src/styles/common-styles.css": "js",
   },
   plugins: [...plugins, json()],

package/web-test-runner.config.mjs

@@ -1,7 +1,7 @@
 import { playwrightLauncher } from "@web/test-runner-playwright"
 import { plugins as wdsPlugins } from "./web-dev-server.config.mjs"
 
-const filteredLogs = ["Running in dev mode", "lit-html is in dev mode"]
+const filteredLogs = ["Couldn't load preload assets", "Lit is in dev mode"]
 
 export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   /** Test files to run */

package/.github/workflows/test.yml

@@ -1,38 +0,0 @@
-name: Test
-
-on: workflow_dispatch
-
-jobs:
-  test:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v4
-
-      - name: Use Node.js
-        uses: actions/setup-node@v3
-        with:
-          node-version: "18.x"
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Install Playwright browsers
-        run: npx playwright install
-
-      - name: Cache Playwright binaries
-        uses: actions/cache@v3
-        with:
-          path: ~/.cache/ms-playwright
-          key: ${{ runner.os }}-playwright-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-playwright-
-
-      - name: Run tests
-        run: npm test
-
-      - uses: actions/upload-artifact@v3
-        with:
-          name: coverage
-          path: coverage/

package/.storybook/preview-head.html

@@ -1,2 +0,0 @@
-<link rel="stylesheet" href="theme.css" />
-<link rel="stylesheet" href="fonts.css" />

package/dist/Breadcrumb.d.ts

@@ -1,69 +0,0 @@
-/**
- * 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
- */
-export class LeuBreadcrumb extends LeuElement {
-    _lastContainerWidth: any;
-    _showBackOnly: boolean;
-    _isRecalculating: boolean;
-    _hiddenItems: number;
-    _isDropdownOpen: boolean;
-    items: any[];
-    /** @type {boolean} - will be used on dark Background */
-    inverted: boolean;
-    /** @internal */
-    _containerRef: import("lit-html/directives/ref.js").Ref<Element>;
-    resizeObserver: ResizeObserver;
-    firstUpdated(): void;
-    updated(changedProperties: any): Promise<void>;
-    /** @internal */
-    get _listItems(): any;
-    /** @internal */
-    get _dropdownItems(): any[];
-    /**
-     * Calculate the number of items that can be displayed
-     * without overflowing the container.
-     * @internal
-     * @returns {void}
-     */
-    _checkWidth(): void;
-    /**
-     * Render the dropdown menu
-     * @returns
-     */
-    renderDropdown(): import("lit-html").TemplateResult<1> | typeof nothing;
-    render(): import("lit-html").TemplateResult<1> | typeof nothing;
-}
-import { L as LeuElement } from './LeuElement-b670d77c.js';
-import { nothing } from 'lit';
-//# sourceMappingURL=Breadcrumb.d.ts.map

package/dist/Breadcrumb.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Breadcrumb.d.ts","sourceRoot":"","sources":["Breadcrumb.js"],"names":[],"mappings":"AAoHA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH;IAOM,yBAA+C;IAO7C,uBAAyB;IACzB,0BAA6B;IAY7B,qBAAqB;IASvB,yBAA4C;IAW9C,aAAe;IACf,wDAAwD;IACxD,UADW,OAAO,CACG;IAErB,gBAAgB;IAChB,iEAAgC;IAehC,+BAEQ;IAEV,qBAEC;IACD,+CAOC;IAOD,gBAAgB;IAChB,sBAEC;IAED,gBAAgB;IAChB,4BAEC;IACD;;;;;OAKG;IACH,eAFa,IAAI,CA4BhB;IACD;;;OAGG;IACH,wEAqCC;IACD,gEAmCC;CACF;gCAtWqD,0BAA0B;wBAC7C,KAAK"}

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"}