@statistikzh/leu 0.28.0 → 0.28.2

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

@@ -1,322 +0,0 @@
-import { html, nothing, PropertyValues } 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?inline"
-import { LeuButton } from "../button/Button.js"
-import { LeuIcon } from "../icon/Icon.js"
-import { LeuVisuallyHidden } from "../visually-hidden/VisuallyHidden.js"
-import { FormAssociatedMixin } from "../../lib/mixins/FormAssociatedMixin.js"
-
-/**
- * @todo Pluralize text when multiple files are allowed
- * @todo Hide dropzone when not multiple and already filled
- */
-
-/**
- * @tagname leu-file-input
- */
-export class LeuFileInput extends FormAssociatedMixin(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
-
-  updated(changedProperties: PropertyValues<this>) {
-    if (
-      changedProperties.has("files") ||
-      changedProperties.has("disabled") ||
-      changedProperties.has("multiple")
-    ) {
-      this.setFormValue()
-    }
-  }
-
-  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)
-    }
-  }
-
-  private handleChange(event: Event & { target: HTMLInputElement }) {
-    const customEvent = new CustomEvent(event.type, event)
-    this.dispatchEvent(customEvent)
-  }
-
-  public formResetCallback() {
-    this.files = []
-    this.input.value = ""
-  }
-
-  protected setFormValue() {
-    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)
-
-    if (this.required && files.length < 1) {
-      // @todo i18n and/or custom validation message
-      this.internals.setValidity(
-        { valueMissing: true },
-        "Bitte wählen Sie eine Datei.",
-        this.input,
-      )
-    } else {
-      this.internals.setValidity({})
-    }
-  }
-
-  protected removeFile(fileToRemove: File) {
-    this.files = this.files.filter((file) => file !== fileToRemove)
-    this.dispatchChangeAndInputEvents()
-  }
-
-  protected dispatchChangeAndInputEvents() {
-    this.dispatchEvent(
-      new CustomEvent("input", {
-        composed: true,
-        bubbles: true,
-      }),
-    )
-    this.dispatchEvent(
-      new CustomEvent("change", {
-        composed: true,
-        bubbles: true,
-      }),
-    )
-  }
-
-  /**
-   * This implementation Uses base-10 (decimal) units:
-   * 1 KB = 1_000 bytes
-   * 1 MB = 1_000_000 bytes
-   * 1 GB = 1_000_000_000 bytes
-   *
-   * To switch to base-2 (binary), use the following implementation:
-   * // const KB = 1024
-   * // const MB = 1024 * 1024
-   * // const GB = 1024 * 1024 * 1024
-   */
-  protected static formatFileSize(size: number) {
-    const KB = 1e3
-    const MB = 1e6
-    const GB = 1e9
-
-    if (size >= GB) {
-      return html`${(size / GB).toFixed(1)}&nbsp;GB`
-    }
-
-    if (size >= MB) {
-      return html`${(size / MB).toFixed(1)}&nbsp;MB`
-    }
-
-    if (size >= KB) {
-      return html`${(size / KB).toFixed(1)}&nbsp;KB`
-    }
-
-    return html`${size}&nbsp;bytes`
-  }
-
-  protected handleDragEnter = (event: DragEvent) => {
-    if (this.disabled) return
-
-    event.preventDefault()
-    event.stopPropagation()
-    this.isDragging = [...event.dataTransfer.items].some(
-      (item) => item.kind === "file",
-    )
-  }
-
-  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) => {
-    this.isDragging = false
-
-    if (this.disabled) return
-
-    event.preventDefault()
-    event.stopPropagation()
-
-    const dt = event.dataTransfer
-    const files = dt.files
-    const acceptedFiles = [...files].filter((file) => this.isAcceptedFile(file))
-
-    if (acceptedFiles.length < 1) {
-      return
-    }
-
-    this.files = this.multiple
-      ? this.files.concat(acceptedFiles)
-      : acceptedFiles.slice(0, 1)
-
-    this.dispatchChangeAndInputEvents()
-  }
-
-  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}
-            ?disabled=${this.disabled}
-            ?required=${this.required}
-            accept=${ifDefined(this.accept)}
-            @input=${this.handleInput}
-            @change=${this.handleChange}
-          />
-        </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

@@ -1,118 +0,0 @@
-@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

@@ -1,11 +0,0 @@
-import { LeuFileInput } from "./FileInput.js"
-
-export { LeuFileInput }
-
-LeuFileInput.define("leu-file-input")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-file-input": LeuFileInput
-  }
-}

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

@@ -1,45 +0,0 @@
-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"
-
-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",
-  args: {
-    oninput: action("input"),
-    onchange: action("change"),
-  },
-} 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}
-      @input=${args.oninput}
-      @change=${args.onchange}
-    ></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

@@ -1,38 +0,0 @@
-import { html } from "lit"
-import { fixture, expect } from "@open-wc/testing"
-
-import "../leu-file-input.js"
-import { 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()
-  })
-
-  it("is not valid when required and no file is selected", async () => {
-    const form = await fixture<HTMLFormElement>(html`
-      <form>
-        <leu-file-input label="File upload" required></leu-file-input>
-      </form>
-    `)
-    const fileInput = form.querySelector<LeuFileInput>("leu-file-input")
-
-    expect(fileInput.validity.valid).to.be.false
-    expect(fileInput.validity.valueMissing).to.be.true
-    expect(form.checkValidity()).to.be.false
-  })
-})

package/src/components/icon/Icon.ts

@@ -1,47 +0,0 @@
-import { html, svg } from "lit"
-import { property } from "lit/decorators.js"
-
-import { LeuElement } from "../../lib/LeuElement.js"
-
-import styles from "./icon.css?inline"
-import { paths, IconPathName } from "./paths.js"
-
-/**
- * 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.
- */
-export class LeuIcon extends LeuElement {
-  static styles = [LeuElement.styles, styles]
-
-  /**
-   * The name of the icon to display.
-   */
-  @property({ type: String, reflect: true })
-  name: IconPathName | "" = ""
-
-  render() {
-    if (!paths[this.name]) {
-      return html`<div class="placeholder"></div>`
-    }
-
-    const iconPath = paths[this.name]
-
-    return html`
-      <svg
-        width="24"
-        height="24"
-        fill="currentColor"
-        viewBox="0 0 24 24"
-        fill-rule="evenodd"
-        role="presentation"
-      >
-        ${svg`<path d=${iconPath} />`}
-      </svg>
-    `
-  }
-}

package/src/components/icon/icon.css

@@ -1,10 +0,0 @@
-:host {
-  display: contents;
-}
-
-svg,
-.placeholder {
-  display: block;
-  width: var(--leu-icon-size, 1.5rem);
-  height: var(--leu-icon-size, 1.5rem);
-}

package/src/components/icon/leu-icon.ts

@@ -1,11 +0,0 @@
-import { LeuIcon } from "./Icon.js"
-
-export { LeuIcon }
-
-LeuIcon.define("leu-icon")
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "leu-icon": LeuIcon
-  }
-}