@statistikzh/leu 0.18.1 → 0.19.0

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

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

@@ -0,0 +1,52 @@
+import { html, nothing } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+import { property } from "lit/decorators.js"
+
+import { LeuElement } from "../../lib/LeuElement.js"
+
+import styles from "./progress-bar.css"
+
+/**
+ * An indicator showing the completion progress of a task
+ *
+ * @tagname leu-progress-bar
+ */
+export class LeuProgressBar extends LeuElement {
+  static styles = [LeuElement.styles, styles]
+
+  static shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+  }
+
+  /** Progress as a percentage from 0 to 100 */
+  @property({ type: Number, reflect: true })
+  value: number = 0
+
+  /** Label that is displayed below the progress bar */
+  @property({ type: String, reflect: true })
+  label: string = ""
+
+  /** Whether the progress bar is in indeterminate state. */
+  @property({ type: Boolean, reflect: true })
+  indeterminate: boolean = false
+
+  render() {
+    return html`
+      <progress
+        class="progress"
+        max=${ifDefined(!this.indeterminate ? 100 : undefined)}
+        value=${ifDefined(!this.indeterminate ? this.value : undefined)}
+        id="progress"
+      ></progress>
+      <div class="info">
+        ${this.label
+          ? html`<label class="label" for="progress">${this.label}</label>`
+          : html`<div class="label label--placeholder"></div>`}
+        ${this.indeterminate
+          ? nothing
+          : html`<span class="value">${Math.round(this.value)}&#8239;%</span>`}
+      </div>
+    `
+  }
+}

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

@@ -0,0 +1,5 @@
+import { LeuProgressBar } from "./ProgressBar.js"
+
+export { LeuProgressBar }
+
+LeuProgressBar.define("leu-progress-bar")

package/src/components/progress-bar/progress-bar.css

@@ -0,0 +1,97 @@
+/* :host {
+  --progress-bar-font-regular: var(--leu-font-family-regular);
+  --progress-bar-font-black: var(--leu-font-family-black);
+
+  font-family: var(--progress-bar-font-regular);
+} */
+
+.progress {
+  --_height: 0.5rem;
+  --_border-radius: 0.25rem;
+  --_progress-color: var(--leu-color-func-cyan);
+  --_indeterminate-animation: indeterminate 2s ease infinite;
+  --_indeterminate-width: 25%;
+
+  appearance: none;
+  display: block;
+  width: 100%;
+  height: var(--_height);
+
+  background-color: var(--leu-color-black-transp-10);
+  border: none;
+  border-radius: var(--_border-radius);
+  margin-bottom: 0.5rem;
+}
+
+.progress::-webkit-progress-bar {
+  background: transparent;
+  border-radius: var(--_border-radius);
+}
+
+/* Progress bar */
+.progress::-moz-progress-bar {
+  background-color: var(--_progress-color);
+  border-radius: var(--_border-radius);
+}
+
+.progress::-webkit-progress-value {
+  background-color: var(--_progress-color);
+  border-radius: var(--_border-radius);
+}
+
+/* Indeterminate state */
+.progress:indeterminate::-moz-progress-bar {
+  width: var(--_indeterminate-width);
+  animation: var(--_indeterminate-animation);
+}
+
+/* Safari */
+.progress:indeterminate::-webkit-progress-value {
+  display: block;
+  width: var(--_indeterminate-width);
+  animation: var(--_indeterminate-animation);
+}
+
+/* Chrome */
+.progress:indeterminate::before {
+  content: "";
+  display: block;
+  width: var(--_indeterminate-width);
+  height: var(--_height);
+  background-color: var(--_progress-color);
+  border-radius: var(--_border-radius);
+  animation: var(--_indeterminate-animation);
+}
+
+@keyframes indeterminate {
+  0% {
+    margin-left: 0%;
+  }
+
+  50% {
+    margin-left: 75%;
+  }
+
+  100% {
+    margin-left: 0%;
+  }
+}
+
+/* Info section (text label and value) */
+.info {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.label,
+.value {
+  font: var(--leu-t-tiny-regular-font);
+  color: var(--leu-color-black-60);
+}
+
+.value {
+  /* margin-left: auto; */
+}

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

@@ -0,0 +1,39 @@
+import { Meta, StoryObj } from "@storybook/web-components"
+import { html } from "lit"
+import { ifDefined } from "lit/directives/if-defined.js"
+
+import "../leu-progress-bar.js"
+import { LeuProgressBar } from "../ProgressBar.js"
+
+type StoryArgs = LeuProgressBar
+type Story = StoryObj<StoryArgs>
+
+export default {
+  title: "Components/ProgressBar",
+  component: "leu-progress-bar",
+} satisfies Meta<StoryArgs>
+
+const Template: Story = {
+  render: ({ label, value, indeterminate }) =>
+    html` <leu-progress-bar
+      .label="${ifDefined(label)}"
+      .value="${ifDefined(value)}"
+      ?indeterminate=${indeterminate}
+    ></leu-progress-bar>`,
+}
+
+export const Regular = {
+  ...Template,
+  args: {
+    value: 50,
+    label: "Datei hochladen",
+  },
+}
+
+export const Indeterminate = {
+  ...Template,
+  args: {
+    indeterminate: true,
+    label: "Datei hochladen",
+  },
+}