@statistikzh/leu 0.24.2 → 0.26.0

package/src/components/progress-bar/ProgressBar.ts

@@ -4,7 +4,7 @@ import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./progress-bar.css"
+import styles from "./progress-bar.css?inline"
 
 /**
  * An indicator showing the completion progress of a task

package/src/components/progress-bar/stories/progress-bar.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/web-components"
+import { Meta, StoryObj } from "@storybook/web-components-vite"
 import { html } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
 

package/src/components/radio/Radio.ts

@@ -3,7 +3,7 @@ import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./radio.css"
+import styles from "./radio.css?inline"
 
 /**
  * @tagname leu-radio

package/src/components/radio/RadioGroup.ts

@@ -4,7 +4,7 @@ import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./radio-group.css"
+import styles from "./radio-group.css?inline"
 import { LeuRadio } from "./Radio.js"
 
 /**
@@ -106,13 +106,13 @@ export class LeuRadioGroup extends LeuElement {
 
   private handleInput = (e: InputEvent & { target: LeuRadio }) => {
     this.items.forEach((item) => {
-      item.checked = item === e.target // eslint-disable-line no-param-reassign
+      item.checked = item === e.target
     })
   }
 
   private selectItem(selectingItem: LeuRadio) {
     this.items.forEach((item) => {
-      item.checked = item === selectingItem // eslint-disable-line no-param-reassign
+      item.checked = item === selectingItem
     })
   }
 
@@ -138,9 +138,9 @@ export class LeuRadioGroup extends LeuElement {
   private setTabIndex() {
     this.items.forEach((item, index) => {
       if (index === this.currentIndex) {
-        item.tabIndex = 0 // eslint-disable-line no-param-reassign
+        item.tabIndex = 0
       } else {
-        item.tabIndex = -1 // eslint-disable-line no-param-reassign
+        item.tabIndex = -1
       }
     })
   }

package/src/components/range/Range.ts

@@ -2,7 +2,7 @@ import { html, nothing, PropertyValues } from "lit"
 import { property, query } from "lit/decorators.js"
 import { ifDefined } from "lit/directives/if-defined.js"
 
-import styles from "./range.css"
+import styles from "./range.css?inline"
 import { LeuElement } from "../../lib/LeuElement.js"
 import { clamp, isNumber } from "../../lib/utils.js"
 

package/src/components/range/stories/range.stories.ts

@@ -1,5 +1,5 @@
-import { Meta, StoryObj } from "@storybook/web-components"
-import { action } from "@storybook/addon-actions"
+import { Meta, StoryObj } from "@storybook/web-components-vite"
+import { action } from "storybook/actions"
 import { html } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
 

package/src/components/scroll-top/ScrollTop.ts

@@ -8,7 +8,7 @@ import { LeuIcon } from "../icon/Icon.js"
 
 import { throttle } from "../../lib/utils.js"
 
-import styles from "./scroll-top.css"
+import styles from "./scroll-top.css?inline"
 
 /**
  * @tagname leu-scroll-top

package/src/components/select/Select.ts

@@ -13,7 +13,7 @@ import { LeuIcon } from "../icon/Icon.js"
 import { LeuInput } from "../input/Input.js"
 import { LeuPopup } from "../popup/Popup.js"
 
-import styles from "./select.css"
+import styles from "./select.css?inline"
 
 /**
  * @tagname leu-select
@@ -174,7 +174,6 @@ export class LeuSelect extends LeuElement {
       this._displayValue = ""
     }
 
-    /* eslint-disable no-param-reassign */
     menuItems.forEach((menuItem) => {
       if (changed.multiple) {
         menuItem.multipleSelection = this.multiple
@@ -198,7 +197,6 @@ export class LeuSelect extends LeuElement {
         }
       }
     })
-    /* eslint-enable no-param-reassign */
 
     if (changed.optionFilter) {
       this._hasFilterResults = hasFilterResults
@@ -455,7 +453,7 @@ export class LeuSelect extends LeuElement {
      * We use the click event listener with the event delegation pattern
      * so this is not a violation of the rule.
      */
-    /* eslint-disable lit-a11y/click-events-have-key-events */
+
     return html`<div
         class=${classMap(selectClasses)}
         @keydown=${this._handleKeyDown}
@@ -495,6 +493,5 @@ export class LeuSelect extends LeuElement {
         </leu-popup>
       </div>
       <input type="hidden" name=${this.name} .value=${this.value.join(",")} />`
-    /* eslint-enable lit-a11y/click-events-have-key-events */
   }
 }

package/src/components/spinner/Spinner.ts

@@ -2,7 +2,7 @@ import { html } from "lit"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./spinner.css"
+import styles from "./spinner.css?inline"
 
 /**
  * @tagname leu-spinner

package/src/components/table/Table.ts

@@ -7,7 +7,7 @@ import { styleMap } from "../../lib/styleMap.js"
 import { LeuIcon } from "../icon/Icon.js"
 import { LeuPagination } from "../pagination/Pagination.js"
 
-import styles from "./table.css"
+import styles from "./table.css?inline"
 
 /**
  * @tagname leu-table

package/src/components/tag/Tag.ts

@@ -3,7 +3,7 @@ import { property } from "lit/decorators.js"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./tag.css"
+import styles from "./tag.css?inline"
 
 /**
  * @tagname leu-tag

package/src/components/tag/stories/tag.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/web-components"
+import { Meta, StoryObj } from "@storybook/web-components-vite"
 import { html } from "lit"
 import { ifDefined } from "lit/directives/if-defined.js"
 

package/src/components/visually-hidden/VisuallyHidden.ts

@@ -2,7 +2,7 @@ import { html } from "lit"
 
 import { LeuElement } from "../../lib/LeuElement.js"
 
-import styles from "./visually-hidden.css"
+import styles from "./visually-hidden.css?inline"
 
 /**
  * @tagname leu-visually-hidden

package/src/docs/contributing.mdx

@@ -1,4 +1,4 @@
-import { Meta, Markdown } from "@storybook/blocks"
+import { Meta, Markdown } from "@storybook/addon-docs/blocks"
 
 <Meta title="Introduction/Contributing" />
 

package/src/docs/installation.mdx

@@ -1,4 +1,4 @@
-import { Meta, Markdown } from "@storybook/blocks"
+import { Meta, Markdown } from "@storybook/addon-docs/blocks"
 
 <Meta title="Introduction/Installation" />
 

package/src/docs/theme.mdx

@@ -1,4 +1,4 @@
-import { Meta, Markdown, Canvas } from "@storybook/blocks"
+import { Meta, Markdown, Canvas } from "@storybook/addon-docs/blocks"
 import React from "react"
 
 import * as GridStories from "../styles/style.stories"

package/src/docs/usage.mdx

@@ -1,4 +1,4 @@
-import { Meta, Markdown } from "@storybook/blocks"
+import { Meta, Markdown } from "@storybook/addon-docs/blocks"
 
 <Meta title="Introduction/Usage" />
 

package/src/global.d.ts

@@ -1,4 +1,4 @@
-declare module "*.css" {
+declare module "*.css?inline" {
   import { CSSResult } from "lit"
 
   const css: CSSResult

package/src/lib/LeuElement.ts

@@ -1,5 +1,5 @@
 import { CSSResultGroup, LitElement } from "lit"
-import commonStyles from "../styles/common-styles.css"
+import commonStyles from "../styles/common-styles.css?inline"
 
 export class LeuElement extends LitElement {
   static version = __LEU_VERSION__

package/src/lib/mixins/FormAssociatedMixin.ts

@@ -0,0 +1,115 @@
+/* eslint-disable max-classes-per-file */
+import { property } from "lit/decorators.js"
+import { LeuElement } from "../LeuElement.js"
+
+/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+type AbstractConstructor<T = object> = abstract new (...args: any[]) => T
+
+// @todo define sensible eslint settings for classes
+/* eslint-disable max-classes-per-file */
+export declare abstract class FormAssociatedMixinType {
+  static formAssociated: boolean
+
+  protected readonly internals: ElementInternals
+
+  name: string | null
+
+  disabled: boolean
+
+  required: boolean
+
+  protected hasInteracted: boolean
+
+  form: HTMLFormElement | null
+
+  validity: ValidityState
+
+  validationMessage: string
+
+  willValidate: boolean
+
+  checkValidity(): boolean
+
+  reportValidity(): boolean
+
+  resetValidity(): void
+
+  formDisabledCallback(isDisabled: boolean): void
+
+  formResetCallback(): void
+
+  formStateRestoreCallback(_state: string | FormData | null): void
+
+  protected abstract setFormValue(): void
+}
+
+export const FormAssociatedMixin = <T extends AbstractConstructor<LeuElement>>(
+  superClass: T,
+) => {
+  abstract class FormAssociatedMixinClass extends superClass {
+    static formAssociated = true
+
+    protected readonly internals: ElementInternals = this.attachInternals()
+
+    get form() {
+      return this.internals.form
+    }
+
+    /** The name of the form control. Is submitted with the `value` as key-value pair. */
+    @property({ reflect: true })
+    name: string | null = null
+
+    /** Disables the form control. */
+    @property({ type: Boolean })
+    disabled: boolean = false
+
+    // Treat every form control that doesn't implement its own `required` property as "not required"
+    required: boolean = false
+
+    /** Whether the user has interacted with the form control. */
+    @property({ state: true, attribute: false })
+    protected hasInteracted: boolean = false
+
+    get validity() {
+      return this.internals.validity
+    }
+
+    get validationMessage() {
+      return this.internals.validationMessage
+    }
+
+    get willValidate() {
+      return this.internals.willValidate
+    }
+
+    checkValidity() {
+      return this.internals.checkValidity()
+    }
+
+    reportValidity() {
+      return this.internals.reportValidity()
+    }
+
+    resetValidity() {
+      this.internals.setValidity({})
+    }
+
+    public formDisabledCallback(isDisabled: boolean) {
+      this.disabled = isDisabled
+    }
+
+    public formResetCallback() {
+      this.hasInteracted = false
+      this.resetValidity()
+    }
+
+    public formStateRestoreCallback(_state: string | FormData | null) {
+      this.resetValidity()
+    }
+
+    protected abstract setFormValue(): void
+  }
+
+  return FormAssociatedMixinClass as unknown as AbstractConstructor<FormAssociatedMixinType> &
+    T
+}

package/src/lib/styleMap.ts

@@ -1,4 +1,4 @@
-/* eslint-disable prefer-template,no-param-reassign,no-restricted-syntax,guard-for-in */
+/* eslint-disable no-restricted-syntax */
 
 /**
  * The original lit styleMap directive is not compatible with a strict style-src content security policy.

package/tsdown.config.ts

@@ -0,0 +1,35 @@
+import path from "path"
+import { defineConfig } from "tsdown"
+import { globSync } from "glob"
+import postcssLit from "rollup-plugin-postcss-lit"
+
+export const commonConfig = {
+  plugins: [postcssLit()],
+  define: {
+    __LEU_VERSION__: JSON.stringify(process.env.npm_package_version),
+  },
+}
+
+export default defineConfig({
+  entry: {
+    index: "src/index.ts",
+    ...Object.fromEntries(
+      globSync("src/components/*/{[A-Z],leu-}*.ts", { nocase: false }).map(
+        (file) => [path.basename(file, path.extname(file)), file],
+      ),
+    ),
+  },
+  format: "esm",
+  outDir: "dist",
+  dts: true,
+  clean: true,
+  platform: "browser",
+  deps: {
+    skipNodeModulesBundle: true,
+  },
+  define: commonConfig.define,
+  css: {
+    transformer: "postcss",
+  },
+  plugins: commonConfig.plugins,
+})

package/web-test-runner.config.mjs

@@ -1,7 +1,25 @@
 import { playwrightLauncher } from "@web/test-runner-playwright"
 import { esbuildPlugin } from "@web/dev-server-esbuild"
+import { fromRollup } from "@web/dev-server-rollup"
 import { fileURLToPath } from "url"
-import { plugins as wdsPlugins } from "./web-dev-server.config.mjs"
+import rollupReplace from "@rollup/plugin-replace"
+import rollupPostcss from "rollup-plugin-postcss"
+import rollupPostcssLit from "rollup-plugin-postcss-lit"
+
+const replace = fromRollup(rollupReplace)
+const postcss = fromRollup(rollupPostcss)
+const postcssLit = fromRollup(rollupPostcssLit)
+
+export const plugins = [
+  replace({
+    preventAssignment: true,
+    values: {
+      __LEU_VERSION__: JSON.stringify(process.env.npm_package_version),
+    },
+  }),
+  postcss({ inject: false }),
+  postcssLit(),
+]
 
 const filteredLogs = ["Couldn't load preload assets", "Lit is in dev mode"]
 
@@ -14,7 +32,7 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
       target: "auto",
       tsconfig: fileURLToPath(new URL("./tsconfig.json", import.meta.url)),
     }),
-    ...wdsPlugins,
+    ...plugins,
   ],
   mimeTypes: {
     "src/components/**/*.css": "js",

package/.eslintrc.json

@@ -1,57 +0,0 @@
-{
-  "ignorePatterns": ["scripts/generate-component/templates/**/*"],
-  "extends": [
-    "@open-wc",
-    "prettier",
-    "plugin:storybook/recommended",
-    "plugin:@typescript-eslint/recommended"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["@typescript-eslint"],
-  "rules": {
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      {
-        "varsIgnorePattern": "^_",
-        "argsIgnorePattern": "^_"
-      }
-    ],
-    "prefer-destructuring": [
-      "error",
-      {
-        "AssignmentExpression": {
-          "array": false
-        }
-      }
-    ],
-    "no-use-before-define": "off",
-    "@typescript-eslint/no-use-before-define": "error",
-    // TODO: Fix this with the upgrade to ESLint 9
-    "import/no-unresolved": "off"
-  },
-  "overrides": [
-    {
-      "files": ["**/scripts/**/*.js", "**/scripts/**/*.ts"],
-      "rules": {
-        "import/no-extraneous-dependencies": [
-          "error",
-          {
-            "devDependencies": true
-          }
-        ],
-        "no-console": "off"
-      }
-    },
-    {
-      "files": ["*.test.ts"],
-      // Chai assertions are possible without a function call
-      // e.g. expect(someTrueValue).to.be.true;
-      "rules": {
-        "@typescript-eslint/no-unused-expressions": "off"
-      }
-    }
-  ],
-  "globals": {
-    "__LEU_VERSION__": "readonly"
-  }
-}

package/dist/Icon.d-itcQ94ym.d.ts

@@ -1,151 +0,0 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
-
-type IconPathName = keyof typeof paths;
-declare const paths: {
-    addNew: string;
-    alert: string;
-    angleDropDown: string;
-    angleDropUp: string;
-    angleLeft: string;
-    angleRight: string;
-    arrowDown: string;
-    arrowLeft: string;
-    arrowRight: string;
-    arrowUp: string;
-    backward: string;
-    block: string;
-    calendar: string;
-    camera: string;
-    caution: string;
-    cc: string;
-    chart: string;
-    chatMessage: string;
-    check: string;
-    clear: string;
-    close: string;
-    comment: string;
-    conference: string;
-    confirm: string;
-    confirmPlain: string;
-    conversation: string;
-    copy: string;
-    delete: string;
-    download: string;
-    earth: string;
-    edit: string;
-    email: string;
-    file: string;
-    fileCsv: string;
-    fileOutline: string;
-    filePdf: string;
-    fileXml: string;
-    files: string;
-    filter: string;
-    floppy: string;
-    folder: string;
-    forward: string;
-    getInformation: string;
-    hide: string;
-    home: string;
-    image: string;
-    income: string;
-    launch: string;
-    levelUp: string;
-    like: string;
-    link: string;
-    list: string;
-    location: string;
-    lock: string;
-    login: string;
-    logout: string;
-    love: string;
-    emailOpen: string;
-    map: string;
-    mapLocateMe: string;
-    mapNavigation: string;
-    mapPin: string;
-    menu: string;
-    menuOverflow: string;
-    minus: string;
-    money: string;
-    moneyIncome: string;
-    organisation: string;
-    overflow: string;
-    paperplane: string;
-    paragraph: string;
-    passport: string;
-    phoneCall: string;
-    piechart: string;
-    pill: string;
-    pin: string;
-    plus: string;
-    print: string;
-    refresh: string;
-    remove: string;
-    repost: string;
-    resizeText: string;
-    ruler: string;
-    search: string;
-    securities: string;
-    setting: string;
-    share: string;
-    show: string;
-    smileyDevastated: string;
-    smileyIndifferent: string;
-    smileySad: string;
-    smileySmile: string;
-    smileyThrilled: string;
-    swissId: string;
-    time: string;
-    upload: string;
-    user: string;
-    userMultiple: string;
-    vote: string;
-    zoom: string;
-    zoomOut: string;
-    fastForward: string;
-    fastRewind: string;
-    fullScreen: string;
-    next: string;
-    pause: string;
-    play: string;
-    playButton: string;
-    previous: string;
-    skipNext: string;
-    skipPrevious: string;
-    stop: string;
-    facebook: string;
-    google: string;
-    instagram: string;
-    kununu: string;
-    linkedin: string;
-    snapchat: string;
-    tiktok: string;
-    twitter: string;
-    xing: string;
-    youtube: string;
-    youtubeLogo: string;
-};
-
-/**
- * A component to render all defined zhWeb icons.
- * The `fill` of the icon is set to `currentColor` and
- * can be overriden by setting the css `color` property.
- * If the icon name is not found, a placeholder will be displayed.
- *
- * @tagname leu-icon
- * @cssprop --leu-icon-size - The size of the icon.
- */
-declare class LeuIcon extends LeuElement {
-    static styles: lit.CSSResultGroup[];
-    /**
-     * The name of the icon to display.
-     */
-    name: IconPathName | "";
-    render(): lit_html.TemplateResult<1>;
-}
-
-export { LeuIcon as L };
-export type { IconPathName as I };

package/dist/LeuElement-BfXSO7MN.js

@@ -1,42 +0,0 @@
-import { css, LitElement } from 'lit';
-
-var css_248z = css`:host,
-:host * {
-  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;
-}
-`;
-
-class LeuElement extends LitElement {
-    static define(name, constructor = this, options = {}) {
-        Object.entries(this.dependencies).forEach(([n, c]) => c.define(n));
-        const currentlyRegisteredConstructor = customElements.get(name);
-        if (currentlyRegisteredConstructor === undefined) {
-            customElements.define(name, constructor, options);
-            return;
-        }
-        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).`);
-            return;
-        }
-        if ("version" in currentlyRegisteredConstructor &&
-            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}).`);
-        }
-    }
-}
-LeuElement.version = "0.24.2";
-LeuElement.dependencies = {};
-LeuElement.styles = css_248z;
-
-export { LeuElement as L };

package/dist/LeuElement.d-BevHqLUu.d.ts

@@ -1,10 +0,0 @@
-import { LitElement, CSSResultGroup } from 'lit';
-
-declare class LeuElement extends LitElement {
-    static version: string;
-    static dependencies: Record<string, typeof LeuElement>;
-    static styles: CSSResultGroup;
-    static define(name: string, constructor?: typeof LeuElement, options?: ElementDefinitionOptions): void;
-}
-
-export { LeuElement as L };