@statistikzh/leu 0.18.0 → 0.19.0

package/.release-please-manifest.json

@@ -1,3 +1,3 @@
 {
-  ".": "0.18.0"
+  ".": "0.19.0"
 }

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## [0.19.0](https://github.com/statistikZH/leu/compare/leu-v0.18.1...leu-v0.19.0) (2025-10-15)
+
+
+### Features
+
+* **file-input:** add a file input component ([562a6e6](https://github.com/statistikZH/leu/commit/562a6e66d8bde9b321430367520ab64d4d3a588d))
+* **progress-bar:** implement leu-progress-bar component ([#305](https://github.com/statistikZH/leu/issues/305)) ([1609272](https://github.com/statistikZH/leu/commit/160927230963682a54605acd3bde12ea9e916351))
+
+## [0.18.1](https://github.com/statistikZH/leu/compare/leu-v0.18.0...leu-v0.18.1) (2025-09-11)
+
+
+### Miscellaneous Chores
+
+* release 0.18.1 ([e857924](https://github.com/statistikZH/leu/commit/e8579242a7c6e87dae7b9228baba6bd3ef62cf5d))
+
 ## [0.18.0](https://github.com/statistikZH/leu/compare/leu-v0.17.0...leu-v0.18.0) (2025-09-10)
 
 

package/dist/Accordion.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, nothing } from 'lit';
 import { unsafeStatic, html } from 'lit/static-html.js';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-DlQXnrk8.js';
+import { L as LeuElement } from './LeuElement-CKq5epyY.js';
 
 var css_248z = css`:host {
   --accordion-font-regular: var(--leu-font-family-regular);

package/dist/Button.js

@@ -4,7 +4,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { property } from 'lit/decorators.js';
 import { LeuIcon } from './Icon.js';
-import { L as LeuElement } from './LeuElement-DlQXnrk8.js';
+import { L as LeuElement } from './LeuElement-CKq5epyY.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 
 /**

package/dist/ButtonGroup.js

@@ -1,5 +1,5 @@
 import { css, html } from 'lit';
-import { L as LeuElement } from './LeuElement-DlQXnrk8.js';
+import { L as LeuElement } from './LeuElement-CKq5epyY.js';
 import { LeuButton } from './Button.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/directives/class-map.js';

package/dist/ChartWrapper.js

@@ -1,7 +1,7 @@
 import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, nothing, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-DlQXnrk8.js';
+import { L as LeuElement } from './LeuElement-CKq5epyY.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuSpinner } from './Spinner.js';
 

package/dist/Checkbox.js

@@ -1,7 +1,7 @@
 import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-DlQXnrk8.js';
+import { L as LeuElement } from './LeuElement-CKq5epyY.js';
 import { LeuIcon } from './Icon.js';
 
 var css_248z = css`:host {

package/dist/CheckboxGroup.js

@@ -2,7 +2,7 @@ import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html } from 'lit';
 import { classMap } from 'lit/directives/class-map.js';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-DlQXnrk8.js';
+import { L as LeuElement } from './LeuElement-CKq5epyY.js';
 import { LeuCheckbox } from './Checkbox.js';
 import './Icon.js';
 

package/dist/Chip.js

@@ -1,4 +1,4 @@
-import { L as LeuElement } from './LeuElement-DlQXnrk8.js';
+import { L as LeuElement } from './LeuElement-CKq5epyY.js';
 import { css } from 'lit';
 
 var css_248z = css`:host *::before,

package/dist/ChipGroup.js

@@ -1,5 +1,5 @@
 import { unsafeStatic, html } from 'lit/static-html.js';
-import { L as LeuElement } from './LeuElement-DlQXnrk8.js';
+import { L as LeuElement } from './LeuElement-CKq5epyY.js';
 import { css } from 'lit';
 
 var css_248z = css`.label {

package/dist/ChipLink.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
-import './LeuElement-DlQXnrk8.js';
+import './LeuElement-CKq5epyY.js';
 
 const SIZES = {
     regular: "regular",

package/dist/ChipRemovable.js

@@ -1,7 +1,7 @@
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
 import { LeuIcon } from './Icon.js';
-import './LeuElement-DlQXnrk8.js';
+import './LeuElement-CKq5epyY.js';
 import './_tslib-CNEFicEt.js';
 import 'lit/decorators.js';
 

package/dist/ChipSelectable.js

@@ -1,6 +1,6 @@
 import { html } from 'lit';
 import { LeuChipBase } from './Chip.js';
-import './LeuElement-DlQXnrk8.js';
+import './LeuElement-CKq5epyY.js';
 
 const SIZES = {
     small: "small",

package/dist/Dialog.js

@@ -1,7 +1,7 @@
 import { css, nothing, html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { classMap } from 'lit/directives/class-map.js';
-import { L as LeuElement } from './LeuElement-DlQXnrk8.js';
+import { L as LeuElement } from './LeuElement-CKq5epyY.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuIcon } from './Icon.js';
 import './_tslib-CNEFicEt.js';

package/dist/Dropdown.js

@@ -1,6 +1,6 @@
 import { css, nothing, html } from 'lit';
 import { createRef, ref } from 'lit/directives/ref.js';
-import { L as LeuElement } from './LeuElement-DlQXnrk8.js';
+import { L as LeuElement } from './LeuElement-CKq5epyY.js';
 import { H as HasSlotController } from './hasSlotController-Bm2tipvG.js';
 import { LeuButton } from './Button.js';
 import { LeuMenu } from './Menu.js';

package/dist/FileInput.d.ts

@@ -0,0 +1,59 @@
+import * as lit_html from 'lit-html';
+import * as lit from 'lit';
+import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
+import { LeuButton } from './Button.js';
+import { LeuIcon } from './Icon.js';
+import { LeuVisuallyHidden } from './VisuallyHidden.js';
+import './leu-icon.js';
+
+/**
+ * @tagname leu-file-input
+ */
+declare class LeuFileInput extends LeuElement {
+    static dependencies: {
+        "leu-icon": typeof LeuIcon;
+        "leu-button": typeof LeuButton;
+        "leu-visually-hidden": typeof LeuVisuallyHidden;
+    };
+    static styles: lit.CSSResultGroup[];
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+        customElements?: CustomElementRegistry;
+        registry?: CustomElementRegistry;
+    };
+    static formAssociated: boolean;
+    protected internals: ElementInternals;
+    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). */
+    accept: string;
+    /** Whether the file input is disabled. */
+    disabled: boolean;
+    /** Whether the file input allows multiple files. */
+    multiple: boolean;
+    /** Whether the file input is required. */
+    required: boolean;
+    /** The variant of the file list item. `filled` renders a gray background. */
+    variant: "filled" | "transparent";
+    files: File[];
+    private isDragging;
+    input: HTMLInputElement;
+    constructor();
+    get form(): HTMLFormElement;
+    get name(): string;
+    updated(changedProperties: any): void;
+    protected handleInput(): void;
+    protected updateFormValue(): void;
+    protected removeFile(fileToRemove: File): void;
+    protected static formatFileSize(size: number): lit_html.TemplateResult<1>;
+    protected handleDragEnter: (event: DragEvent) => void;
+    protected handleDragOver: (event: DragEvent) => void;
+    protected handleDragLeave: (event: DragEvent) => void;
+    protected handleDrop: (event: DragEvent) => void;
+    isAcceptedFile(file: File): boolean;
+    render(): lit_html.TemplateResult<1>;
+}
+
+export { LeuFileInput };

package/dist/FileInput.js

@@ -0,0 +1,383 @@
+import { _ as __decorate } from './_tslib-CNEFicEt.js';
+import { css, html, nothing } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { L as LeuElement } from './LeuElement-CKq5epyY.js';
+import './Accordion.js';
+import { LeuButton } from './Button.js';
+import './ButtonGroup.js';
+import './ChartWrapper.js';
+import './Checkbox.js';
+import './CheckboxGroup.js';
+import './ChipGroup.js';
+import './ChipLink.js';
+import './ChipRemovable.js';
+import './ChipSelectable.js';
+import './Dropdown.js';
+import './Input.js';
+import './Menu.js';
+import './MenuItem.js';
+import './Pagination.js';
+import './Popup.js';
+import './Radio.js';
+import './RadioGroup.js';
+import './Select.js';
+import './Table.js';
+import './leu-icon.js';
+import { LeuVisuallyHidden } from './VisuallyHidden.js';
+import { LeuIcon } from './Icon.js';
+import 'lit/static-html.js';
+import './hasSlotController-Bm2tipvG.js';
+import './Spinner.js';
+import './Chip.js';
+import 'lit/directives/ref.js';
+import '@floating-ui/dom';
+import 'lit/directives/live.js';
+import 'lit/directives/style-map.js';
+
+var css_248z = 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 (min-width: 600px) {
+.dropzone {
+    padding: 2.5rem 2rem;
+}
+  }
+@media (min-width: 1280px) {
+.dropzone {
+    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 (min-width: 400px) {
+.dropzone__text {
+    margin-bottom: 2rem;
+}
+  }
+@media (min-width: 600px) {
+.dropzone__text {
+    margin-bottom: 1.25rem;
+}
+  }
+@media (min-width: 1280px) {
+.dropzone__text {
+    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;
+  grid-gap: 0.25rem 0.5rem;
+  gap: 0.25rem 0.5rem;
+
+  align-items: start;
+
+  justify-items: start;
+
+  place-items: start;
+
+  background-color: var(--leu-color-black-10);
+  padding: 0.75rem 1.25rem;
+}
+@media (min-width: 600px) {
+.file {
+    -moz-column-gap: 0.75rem;
+         column-gap: 0.75rem;
+}
+  }
+@media (min-width: 1024px) {
+.file {
+    -moz-column-gap: 1rem;
+         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;
+}
+`;
+
+/**
+ * @tagname leu-file-input
+ */
+class LeuFileInput extends LeuElement {
+    constructor() {
+        super();
+        this.label = "";
+        /** 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). */
+        this.accept = "";
+        /** Whether the file input is disabled. */
+        this.disabled = false;
+        /** Whether the file input allows multiple files. */
+        this.multiple = false;
+        /** Whether the file input is required. */
+        this.required = false;
+        /** The variant of the file list item. `filled` renders a gray background. */
+        this.variant = "filled";
+        this.files = [];
+        this.isDragging = false;
+        this.handleDragEnter = (event) => {
+            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
+        this.handleDragOver = (event) => {
+            if (this.disabled)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        this.handleDragLeave = (event) => {
+            if (this.disabled)
+                return;
+            event.preventDefault();
+            event.stopPropagation();
+            this.isDragging = false;
+        };
+        this.handleDrop = (event) => {
+            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;
+        };
+        // 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();
+        }
+    }
+    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);
+        }
+    }
+    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);
+    }
+    removeFile(fileToRemove) {
+        this.files = this.files.filter((file) => file !== fileToRemove);
+    }
+    static formatFileSize(size) {
+        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`;
+    }
+    isAcceptedFile(file) {
+        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>
+    `;
+    }
+}
+LeuFileInput.dependencies = {
+    "leu-icon": LeuIcon,
+    "leu-button": LeuButton,
+    "leu-visually-hidden": LeuVisuallyHidden,
+};
+LeuFileInput.styles = [LeuElement.styles, css_248z];
+LeuFileInput.shadowRootOptions = {
+    ...LeuElement.shadowRootOptions,
+    delegatesFocus: true,
+};
+LeuFileInput.formAssociated = true;
+__decorate([
+    property({ type: String })
+], LeuFileInput.prototype, "label", void 0);
+__decorate([
+    property({ type: String })
+], LeuFileInput.prototype, "accept", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuFileInput.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuFileInput.prototype, "multiple", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], LeuFileInput.prototype, "required", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], LeuFileInput.prototype, "variant", void 0);
+__decorate([
+    state()
+], LeuFileInput.prototype, "files", void 0);
+__decorate([
+    state()
+], LeuFileInput.prototype, "isDragging", void 0);
+__decorate([
+    query('input[type="file"]')
+], LeuFileInput.prototype, "input", void 0);
+
+export { LeuFileInput };

package/dist/Icon.js

@@ -1,7 +1,7 @@
 import { _ as __decorate } from './_tslib-CNEFicEt.js';
 import { css, html, svg } from 'lit';
 import { property } from 'lit/decorators.js';
-import { L as LeuElement } from './LeuElement-DlQXnrk8.js';
+import { L as LeuElement } from './LeuElement-CKq5epyY.js';
 
 var css_248z = css`:host {
   display: contents;

package/dist/Input.d.ts

@@ -197,15 +197,6 @@ declare class LeuInput extends LeuElement {
      * @fires {CustomEvent} change
      */
     clear(): void;
-    /**
-     * 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(): any;
     /**
      * Merge custom and default validation messages.
      * A validation message can be a function or a string.