@statistikzh/leu 0.18.0 → 0.19.0

package/dist/web-types.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
   "name": "@statistikzh/leu",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "description-markup": "markdown",
   "contributions": {
     "html": {
@@ -595,6 +595,81 @@
             "events": []
           }
         },
+        {
+          "name": "leu-file-input",
+          "description": "\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "label",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "accept",
+              "description": "A list of acceptable file types. Must be a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers).",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "disabled",
+              "description": "Whether the file input is disabled.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "multiple",
+              "description": "Whether the file input allows multiple files.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "required",
+              "description": "Whether the file input is required.",
+              "value": { "type": "boolean", "default": "false" }
+            },
+            {
+              "name": "variant",
+              "description": "The variant of the file list item. `filled` renders a gray background.",
+              "value": {
+                "type": "\"filled\" | \"transparent\"",
+                "default": "\"filled\""
+              }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              { "name": "label", "type": "string" },
+              {
+                "name": "accept",
+                "description": "A list of acceptable file types. Must be a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers).",
+                "type": "string"
+              },
+              {
+                "name": "disabled",
+                "description": "Whether the file input is disabled.",
+                "type": "boolean"
+              },
+              {
+                "name": "multiple",
+                "description": "Whether the file input allows multiple files.",
+                "type": "boolean"
+              },
+              {
+                "name": "required",
+                "description": "Whether the file input is required.",
+                "type": "boolean"
+              },
+              {
+                "name": "variant",
+                "description": "The variant of the file list item. `filled` renders a gray background.",
+                "type": "\"filled\" | \"transparent\""
+              },
+              { "name": "files", "type": "File[]" },
+              { "name": "input", "type": "HTMLInputElement" },
+              { "name": "form" },
+              { "name": "name" }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "leu-icon",
           "description": "A component to render all defined zhWeb icons.\nThe `fill` of the icon is set to `currentColor` and\ncan be overriden by setting the css `color` property.\nIf the icon name is not found, a placeholder will be displayed.\n---\n\n\n### **CSS Properties:**\n - **--leu-icon-size** - The size of the icon. _(default: undefined)_",
@@ -1199,6 +1274,49 @@
             "events": []
           }
         },
+        {
+          "name": "leu-progress-bar",
+          "description": "An indicator showing the completion progress of a task\n---\n",
+          "doc-url": "",
+          "attributes": [
+            {
+              "name": "value",
+              "description": "Progress as a percentage from 0 to 100",
+              "value": { "type": "number", "default": "0" }
+            },
+            {
+              "name": "label",
+              "description": "Label that is displayed below the progress bar",
+              "value": { "type": "string", "default": "\"\"" }
+            },
+            {
+              "name": "indeterminate",
+              "description": "Whether the progress bar is in indeterminate state.",
+              "value": { "type": "boolean", "default": "false" }
+            }
+          ],
+          "events": [],
+          "js": {
+            "properties": [
+              {
+                "name": "value",
+                "description": "Progress as a percentage from 0 to 100",
+                "type": "number"
+              },
+              {
+                "name": "label",
+                "description": "Label that is displayed below the progress bar",
+                "type": "string"
+              },
+              {
+                "name": "indeterminate",
+                "description": "Whether the progress bar is in indeterminate state.",
+                "type": "boolean"
+              }
+            ],
+            "events": []
+          }
+        },
         {
           "name": "leu-radio",
           "description": "\n---\n",

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI component library of the canton of zurich",
   "license": "MIT",
   "author": "statistikzh",
-  "version": "0.18.0",
+  "version": "0.19.0",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/scripts/generate-component/templates/test/[name].test.ts

@@ -2,16 +2,17 @@ import { html } from "lit"
 import { fixture, expect } from "@open-wc/testing"
 
 import "../[namespace]-[name].js"
+import { type [Namespace][Name] } from "../[Name].js"
 
 async function defaultFixture() {
-  return fixture(html`<[namespace]-[name]></[namespace]-[name]>`)
+  return fixture<[Namespace][Name]>(html`<[namespace]-[name]></[namespace]-[name]>`)
 }
 
 describe("[Namespace][Name]", () => {
   it("is a defined element", async () => {
-    const el = await customElements.get("[namespace]-[name]")
+    const el = customElements.get("[namespace]-[name]")
 
-    await expect(el).not.to.be.undefined
+    expect(el).not.to.be.undefined
   })
 
   it("passes the a11y audit", async () => {

package/src/components/file-input/FileInput.ts

@@ -0,0 +1,266 @@
+import { html, nothing } from "lit"
+import { property, query, state } from "lit/decorators.js"
+import { ifDefined } from "lit/directives/if-defined.js"
+import { classMap } from "lit/directives/class-map.js"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+import styles from "./file-input.css"
+import { LeuButton } from "../../index.js"
+import { LeuIcon } from "../icon/leu-icon.js"
+import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js"
+
+/**
+ * @tagname leu-file-input
+ */
+export class LeuFileInput extends LeuElement {
+  static dependencies = {
+    "leu-icon": LeuIcon,
+    "leu-button": LeuButton,
+    "leu-visually-hidden": LeuVisuallyHidden,
+  }
+
+  static styles = [LeuElement.styles, styles]
+
+  static shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  static formAssociated = true
+
+  protected internals: ElementInternals
+
+  @property({ type: String })
+  label: string = ""
+
+  /** A list of acceptable file types. Must be a comma-separated list of [unique file type specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers). */
+  @property({ type: String })
+  accept: string = ""
+
+  /** Whether the file input is disabled. */
+  @property({ type: Boolean, reflect: true })
+  disabled: boolean = false
+
+  /** Whether the file input allows multiple files. */
+  @property({ type: Boolean, reflect: true })
+  multiple: boolean = false
+
+  /** Whether the file input is required. */
+  @property({ type: Boolean, reflect: true })
+  required: boolean = false
+
+  /** The variant of the file list item. `filled` renders a gray background. */
+  @property({ type: String, reflect: true })
+  variant: "filled" | "transparent" = "filled"
+
+  @state()
+  public files: File[] = []
+
+  @state()
+  private isDragging: boolean = false
+
+  @query('input[type="file"]')
+  input: HTMLInputElement
+
+  constructor() {
+    super()
+    // Initialize the ElementInternals for form association
+    this.internals = this.attachInternals()
+  }
+
+  get form() {
+    return this.internals.form
+  }
+
+  get name() {
+    return this.getAttribute("name")
+  }
+
+  updated(changedProperties) {
+    if (
+      changedProperties.has("files") ||
+      changedProperties.has("disabled") ||
+      changedProperties.has("multiple")
+    ) {
+      this.updateFormValue()
+    }
+  }
+
+  protected handleInput() {
+    // Append selected files
+    if (this.input.files) {
+      const acceptableFiles = [...this.input.files].filter((file) =>
+        this.isAcceptedFile(file),
+      )
+
+      this.files = this.multiple
+        ? this.files.concat(acceptableFiles)
+        : acceptableFiles.slice(0, 1)
+    }
+  }
+
+  protected updateFormValue() {
+    const formData = new FormData()
+
+    const files = this.multiple ? this.files : this.files.slice(0, 1)
+
+    files.forEach((file) => {
+      formData.append(this.name, file)
+    })
+
+    this.internals.setFormValue(formData)
+  }
+
+  protected removeFile(fileToRemove: File) {
+    this.files = this.files.filter((file) => file !== fileToRemove)
+  }
+
+  protected static formatFileSize(size: number) {
+    if (size < 1e3) {
+      return html`${size}&nbsp;bytes`
+    }
+
+    if (size >= 1e3 && size < 1e6) {
+      return html`${(size / 1e3).toFixed(1)}&nbsp;KB`
+    }
+
+    return html`${(size / 1e6).toFixed(1)}&nbsp;MB`
+  }
+
+  protected handleDragEnter = (event: DragEvent) => {
+    if (this.disabled) return
+
+    event.preventDefault()
+    event.stopPropagation()
+    this.isDragging = [...event.dataTransfer.items].some(
+      (item) => item.kind === "file",
+    )
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  protected handleDragOver = (event: DragEvent) => {
+    if (this.disabled) return
+
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  protected handleDragLeave = (event: DragEvent) => {
+    if (this.disabled) return
+
+    event.preventDefault()
+    event.stopPropagation()
+    this.isDragging = false
+  }
+
+  protected handleDrop = (event: DragEvent) => {
+    if (this.disabled) return
+
+    event.preventDefault()
+    event.stopPropagation()
+
+    const dt = event.dataTransfer
+    const files = dt.files
+    const acceptedFiles = [...files].filter((file) => this.isAcceptedFile(file))
+
+    this.files = this.multiple
+      ? this.files.concat(acceptedFiles)
+      : acceptedFiles.slice(0, 1)
+    this.isDragging = false
+  }
+
+  isAcceptedFile(file: File): boolean {
+    const acceptedTypes = this.accept.split(",").map((type) => type.trim())
+    const mimeType = file.type
+
+    for (const acceptedType of acceptedTypes) {
+      // Handle file extensions (e.g. .jpg, .png)
+      if (acceptedType.startsWith(".")) {
+        const name = file.name.toLowerCase()
+        const extension = acceptedType.toLowerCase()
+
+        if (name.endsWith(extension)) {
+          return true
+        }
+        // Handle wildcard types (e.g. image/*)
+      } else if (/^\w+\/\*$/.test(acceptedType)) {
+        if (mimeType.split("/")[0] === acceptedType.split("/")[0]) {
+          return true
+        }
+      }
+
+      if (mimeType === acceptedType) {
+        return true
+      }
+    }
+
+    return false
+  }
+
+  render() {
+    const dropzoneClasses = {
+      dropzone: true,
+      "dropzone--dragging": this.isDragging,
+    }
+
+    return html`
+      <div class="container">
+        <label class="label" for="input">${this.label}</label>
+        <leu-visually-hidden>
+          <input
+            id="input"
+            type="file"
+            ?multiple=${this.multiple}
+            accept=${ifDefined(this.accept)}
+            ?disabled=${this.disabled}
+            @input=${this.handleInput}
+          />
+        </leu-visually-hidden>
+        <div
+          class=${classMap(dropzoneClasses)}
+          @dragenter=${this.handleDragEnter}
+          @dragover=${this.handleDragOver}
+          @dragleave=${this.handleDragLeave}
+          @drop=${this.handleDrop}
+        >
+          <slot class="dropzone__text"
+            ><p>Zum Hochladen Dateien ziehen und hier ablegen.</p></slot
+          >
+          <leu-button
+            variant="secondary"
+            ?disabled=${this.disabled}
+            @click=${() => this.input.click()}
+          >
+            Datei auswählen
+            <leu-icon name="upload" slot="after"></leu-icon>
+          </leu-button>
+        </div>
+        ${this.files.length > 0
+          ? html`<ul class="file-list">
+              ${this.files.map(
+                (file) =>
+                  html`<li class="file">
+                    <strong class="file__name">${file.name}</strong>
+                    <p class="file__size">
+                      <span class="file__size-label">Grösse:</span>
+                      ${LeuFileInput.formatFileSize(file.size)}
+                    </p>
+                    <leu-button
+                      round
+                      class="file__button"
+                      label="Datei entfernen"
+                      size="small"
+                      variant="secondary"
+                      ?disabled=${this.disabled}
+                      @click=${() => this.removeFile(file)}
+                      ><leu-icon name="delete"></leu-icon
+                    ></leu-button>
+                  </li>`,
+              )}
+            </ul>`
+          : nothing}
+      </div>
+    `
+  }
+}

package/src/components/file-input/file-input.css

@@ -0,0 +1,118 @@
+@import url("../../styles/custom-media.css");
+
+:host {
+  --file-input-font-regular: var(--leu-font-family-regular);
+  --file-input-font-black: var(--leu-font-family-black);
+
+  font-family: var(--file-input-font-regular);
+}
+
+.label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font: var(--leu-t-curve-regular-black-font);
+}
+
+:host([required]) .label::after {
+  content: "*";
+}
+
+.dropzone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+
+  border: 2px dashed var(--leu-color-black-20);
+  border-radius: 0.25rem;
+
+  padding: 2rem 1.5rem;
+
+  @media (--viewport-regular) {
+    padding: 2.5rem 2rem;
+  }
+
+  @media (--viewport-xlarge) {
+    padding: 3.5rem 2.5rem;
+  }
+}
+
+.dropzone--dragging {
+  border-color: var(--leu-color-black-60);
+  background-color: var(--leu-color-black-transp-5);
+  cursor: copy;
+}
+
+.dropzone__text {
+  font: var(--leu-t-curve-small-regular-font);
+  color: var(--leu-color-black-60);
+
+  margin-bottom: 0.75rem;
+
+  @media (--viewport-small) {
+    margin-bottom: 2rem;
+  }
+
+  @media (--viewport-regular) {
+    margin-bottom: 1.25rem;
+  }
+
+  @media (--viewport-xlarge) {
+    margin-bottom: 1.5rem;
+  }
+}
+
+.file-list {
+  list-style: none;
+  padding: 0;
+
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+}
+
+.file {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) min-content;
+  gap: 0.25rem 0.5rem;
+
+  place-items: start;
+
+  background-color: var(--leu-color-black-10);
+  padding: 0.75rem 1.25rem;
+
+  @media (--viewport-regular) {
+    column-gap: 0.75rem;
+  }
+
+  @media (--viewport-large) {
+    column-gap: 1rem;
+    padding: 1.5rem 1rem;
+  }
+}
+
+.file__name {
+  grid-column: 1 / 2;
+  font: var(--leu-t-regular-black-font);
+  text-overflow: ellipsis;
+  overflow: hidden;
+  max-width: 100%;
+}
+
+.file__size {
+  grid-column: 1 / 2;
+  display: flex;
+  gap: 0.25rem;
+  margin: 0;
+  font: var(--leu-t-tiny-regular-font);
+}
+
+.file__size-label {
+  color: var(--leu-color-black-60);
+}
+
+.file__button {
+  grid-column: 2 / 3;
+  grid-row: 1 / 3;
+  align-self: center;
+}

package/src/components/file-input/leu-file-input.ts

@@ -0,0 +1,5 @@
+import { LeuFileInput } from "./FileInput.js"
+
+export { LeuFileInput }
+
+LeuFileInput.define("leu-file-input")

package/src/components/file-input/stories/file-input.stories.ts

@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from "@storybook/web-components"
+import { html } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+
+import "../leu-file-input.js"
+import { LeuFileInput } from "../FileInput.js"
+
+type StoryArgs = LeuFileInput
+type Story = StoryObj<StoryArgs>
+
+export default {
+  title: "Components/FileInput",
+  component: "leu-file-input",
+} satisfies Meta<StoryArgs>
+
+const Template: Story = {
+  render: (args: StoryArgs) => html`
+    <leu-file-input
+      name="file"
+      label=${ifDefined(args.label)}
+      accept=${ifDefined(args.accept)}
+      ?disabled=${args.disabled}
+      ?multiple=${args.multiple}
+      ?required=${args.required}
+    ></leu-file-input>
+  `,
+}
+
+export const Regular = {
+  ...Template,
+  args: {
+    accept: "image/*",
+    disabled: false,
+    multiple: false,
+    label: "Dokumente hochladen",
+    // Add default args here
+  },
+}

package/src/components/file-input/test/file-input.test.ts

@@ -0,0 +1,25 @@
+import { html } from "lit"
+import { fixture, expect } from "@open-wc/testing"
+
+import "../leu-file-input.js"
+import { type LeuFileInput } from "../FileInput.js"
+
+async function defaultFixture() {
+  return fixture<LeuFileInput>(
+    html`<leu-file-input label="File upload"></leu-file-input>`,
+  )
+}
+
+describe("LeuFileInput", () => {
+  it("is a defined element", async () => {
+    const el = customElements.get("leu-file-input")
+
+    expect(el).not.to.be.undefined
+  })
+
+  it("passes the a11y audit", async () => {
+    const el = await defaultFixture()
+
+    await expect(el).shadowDom.to.be.accessible()
+  })
+})

package/src/components/input/Input.ts

@@ -132,9 +132,6 @@ export class LeuInput extends LeuElement {
     this.novalidate = false
     this.value = ""
 
-    /** @internal */
-    this._identifier = ""
-
     /**
      * @internal
      * @type {import("lit/directives/ref.js").Ref<HTMLInputElement>}
@@ -250,29 +247,6 @@ export class LeuInput extends LeuElement {
     )
   }
 
-  /**
-   * Method for getting the id of the input element.
-   * If the id attribute is set, the value of the id attribute is returned.
-   * Otherwise a random id is generated and returned.
-   *
-   * @private
-   * @returns {string} id
-   */
-  getId() {
-    const id = this.getAttribute("id")
-
-    if (id !== null && id !== "") {
-      return id
-    }
-
-    if (this._identifier !== "") {
-      return this._identifier
-    }
-
-    this._identifier = crypto.randomUUID()
-    return this._identifier
-  }
-
   /**
    * Merge custom and default validation messages.
    * A validation message can be a function or a string.
@@ -352,7 +326,7 @@ export class LeuInput extends LeuElement {
     }
 
     return html`
-      <ul class="error" aria-errormessage=${`input-${this.getId()}`}>
+      <ul class="error" aria-errormessage="input">
         ${errorMessages.map(
           (message) => html`<li class="error-message">${message}</li>`,
         )}
@@ -412,7 +386,7 @@ export class LeuInput extends LeuElement {
       >
         <input
           class="input"
-          id="input-${this.getId()}"
+          id="input"
           type=${this.type}
           name=${this.name}
           @change=${this.handleChange}
@@ -431,7 +405,7 @@ export class LeuInput extends LeuElement {
           ref=${ref(this._inputRef)}
           aria-invalid=${isInvalid}
         />
-        <label for="input-${this.getId()}" class="label">${this.label}</label>
+        <label for="input" class="label">${this.label}</label>
         ${this.prefix
           ? html`<div class="prefix" .aria-hidden=${true}>${this.prefix}</div>`
           : nothing}