@statistikzh/leu 0.13.0 → 0.14.0

package/src/components/popup/test/popup.test.js

@@ -4,14 +4,12 @@ import { fixture, expect } from "@open-wc/testing"
 import "../leu-popup.js"
 
 async function defaultFixture() {
-  return fixture(
-    html`
-      <leu-popup
-        ><div slot="anchor"></div>
-        <p>Popup content</p></leu-popup
-      >
-    `
-  )
+  return fixture(html`
+    <leu-popup
+      ><div slot="anchor"></div>
+      <p>Popup content</p></leu-popup
+    >
+  `)
 }
 
 describe("LeuPopup", () => {

package/src/components/radio/RadioGroup.js

@@ -143,10 +143,10 @@ export class LeuRadioGroup extends LeuElement {
 
   initializeIndex() {
     const index = this.items.findIndex(
-      (item) => item.hasAttribute("checked") && !item.hasAttribute("disabled")
+      (item) => item.hasAttribute("checked") && !item.hasAttribute("disabled"),
     )
     const nextEnabledIndex = this.items.findIndex(
-      (item) => !item.hasAttribute("disabled")
+      (item) => !item.hasAttribute("disabled"),
     )
 
     this._currentIndex = index >= 0 ? index : nextEnabledIndex

package/src/components/range/Range.js

@@ -96,7 +96,7 @@ export class LeuRange extends LeuElement {
 
   get valueAsArray() {
     return Array.from(this.shadowRoot.querySelectorAll("input")).map(
-      (input) => input.valueAsNumber
+      (input) => input.valueAsNumber,
     )
   }
 
@@ -205,30 +205,29 @@ export class LeuRange extends LeuElement {
                 class="output"
                 for="input-${type}"
                 value=${defaultValue[index]}
-              ></output>`
+              ></output>`,
           )}
         </div>
         <div class="inputs">
           ${inputs.map(
-            (type, index) =>
-              html`
-                <input
-                  @input=${(e) => this._handleInput(index, e)}
-                  @pointerdown=${multiple && !disabled && index === 0
-                    ? this._handlePointerDown
-                    : undefined}
-                  type="range"
-                  class="range range--${type}"
-                  id="input-${type}"
-                  name=${this.name}
-                  min=${this.min}
-                  max=${this.max}
-                  step=${this.step}
-                  aria-label=${multiple ? RANGE_LABELS[index] : undefined}
-                  ?disabled=${disabled}
-                  .value=${defaultValue[index].toString()}
-                />
-              `
+            (type, index) => html`
+              <input
+                @input=${(e) => this._handleInput(index, e)}
+                @pointerdown=${multiple && !disabled && index === 0
+                  ? this._handlePointerDown
+                  : undefined}
+                type="range"
+                class="range range--${type}"
+                id="input-${type}"
+                name=${this.name}
+                min=${this.min}
+                max=${this.max}
+                step=${this.step}
+                aria-label=${multiple ? RANGE_LABELS[index] : undefined}
+                ?disabled=${disabled}
+                .value=${defaultValue[index].toString()}
+              />
+            `,
           )}
         </div>
       </div>

package/src/components/select/Select.js

@@ -171,6 +171,10 @@ export class LeuSelect extends LeuElement {
     const menuItems = menu.getMenuItems()
     let hasFilterResults = false
 
+    if (changed.value && this.value.length === 0) {
+      this._displayValue = ""
+    }
+
     /* eslint-disable no-param-reassign */
     menuItems.forEach((menuItem) => {
       if (changed.multiple) {
@@ -474,10 +478,11 @@ export class LeuSelect extends LeuElement {
               ref=${ref(this._menuRef)}
               role="listbox"
               aria-multiselectable=${ifDefined(
-                this.multiple ? "true" : undefined
+                this.multiple ? "true" : undefined,
               )}
               class="menu"
               @click=${this._handleMenuItemClick}
+              aria-labelledby="select-label"
             >
               <slot></slot>
             </leu-menu>

package/src/components/select/select.css

@@ -58,7 +58,7 @@
   line-height: 1.5;
   padding: 1.375rem 3rem 1.375rem 1rem;
 
-  background: none;
+  background: var(--leu-color-black-0);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

package/src/components/select/stories/select.stories.js

@@ -59,7 +59,7 @@ function Template({
           >
             ${LeuSelect.getOptionLabel(option)}
           </leu-menu-item>
-        `
+        `,
       )}
     </leu-select>
     <div style="margin-top: 50vh"></div>

package/src/components/select/test/select.test.js

@@ -8,16 +8,18 @@ import "../../menu/leu-menu-item.js"
 import { MUNICIPALITIES } from "./fixtures.js"
 
 async function defaultFixture(args = {}) {
-  return fixture(html`<leu-select
-    label=${ifDefined(args.label)}
-    .value=${args.value ?? []}
-    ?clearable=${args.clearable}
-    ?disabled=${args.disabled}
-    ?filterable=${args.filterable}
-    ?multiple=${args.multiple}
-  >
-    ${args.options.map((o) => html`<leu-menu-item>${o}</leu-menu-item>`)}
-  </leu-select> `)
+  return fixture(
+    html`<leu-select
+      label=${ifDefined(args.label)}
+      .value=${args.value ?? []}
+      ?clearable=${args.clearable}
+      ?disabled=${args.disabled}
+      ?filterable=${args.filterable}
+      ?multiple=${args.multiple}
+    >
+      ${args.options.map((o) => html`<leu-menu-item>${o}</leu-menu-item>`)}
+    </leu-select> `,
+  )
 }
 
 describe("LeuSelect", () => {
@@ -114,7 +116,7 @@ describe("LeuSelect", () => {
     const menuItems = Array.from(el.querySelectorAll("leu-menu-item"))
 
     const menuItem = menuItems.find(
-      (item) => item.textContent === "Affoltern am Albis"
+      (item) => item.textContent === "Affoltern am Albis",
     )
 
     expect(menuItem).to.have.attribute("active")
@@ -204,7 +206,7 @@ describe("LeuSelect", () => {
 
     const menuItems = el.querySelectorAll("leu-menu-item")
     const visibleMenuItems = Array.from(menuItems).filter(
-      (menuItem) => !menuItem.hidden
+      (menuItem) => !menuItem.hidden,
     )
     expect(visibleMenuItems.length).to.equal(6)
   })
@@ -231,7 +233,7 @@ describe("LeuSelect", () => {
 
     const menuItems = el.querySelectorAll("leu-menu-item")
     const visibleMenuItems = Array.from(menuItems).filter(
-      (menuItem) => !menuItem.hidden
+      (menuItem) => !menuItem.hidden,
     )
 
     expect(visibleMenuItems.length).to.equal(MUNICIPALITIES.length)
@@ -296,7 +298,7 @@ describe("LeuSelect", () => {
     toggleButton.click()
 
     const menuItem = Array.from(el.querySelectorAll("leu-menu-item")).find(
-      (item) => item.textContent === "Maur"
+      (item) => item.textContent === "Maur",
     )
     menuItem.click()
 
@@ -331,7 +333,7 @@ describe("LeuSelect", () => {
     toggleButton.click()
 
     const menuItem = Array.from(el.querySelectorAll("leu-menu-item")).find(
-      (item) => item.textContent === "Hedingen"
+      (item) => item.textContent === "Hedingen",
     )
     menuItem.click()
 
@@ -350,7 +352,7 @@ describe("LeuSelect", () => {
     toggleButton.click()
 
     const menuItem = Array.from(el.querySelectorAll("leu-menu-item")).find(
-      (item) => item.textContent === "Hedingen"
+      (item) => item.textContent === "Hedingen",
     )
     menuItem.click()
 
@@ -419,6 +421,7 @@ describe("LeuSelect", () => {
     await elementUpdated(el)
 
     expect(menuItems.every((item) => !item.multipleSelection)).to.be.true
+  })
 
   it("closes the popup when the document is clicked outside the component", async () => {
     const el = await defaultFixture({

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/common-styles.css

@@ -3,3 +3,12 @@
   box-sizing: border-box;
   font-feature-settings: var(--leu-t-font-feature-settings);
 }
+
+/**
+ * If a custom element sets the display property to any value
+ * it will not be hidden by the [hidden] attribute.
+ * That's why we need to specify this rule.
+ */
+:host([hidden]) {
+  display: none;
+}

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 */
@@ -9,6 +9,7 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
   plugins: wdsPlugins,
   mimeTypes: {
     "src/components/**/*.css": "js",
+    "src/styles/common-styles.css": "js",
   },
 
   /** Resolve bare module imports */

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,5 +0,0 @@
-<link rel="stylesheet" href="theme.css" />
-<link
-  rel="stylesheet"
-  href="https://www.web.statistik.zh.ch/leu/styles/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-874a297c.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"}