@statistikzh/leu 0.24.2 → 0.25.0

package/dist/FileInput-5apX17JT.js

@@ -0,0 +1,344 @@
+import { t as LeuElement } from "./LeuElement-B7NJzWwP.js";
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { t as LeuIcon } from "./Icon-DhAvH0XM.js";
+import { t as LeuButton } from "./Button-EdS9xr2J.js";
+import { t as FormAssociatedMixin } from "./FormAssociatedMixin-BbFlza53.js";
+import { t as LeuVisuallyHidden } from "./VisuallyHidden-BkllVjlz.js";
+import { css, html, nothing } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+//#region src/components/file-input/file-input.css?inline
+var file_input_default = 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;
+}
+`;
+//#endregion
+//#region src/components/file-input/FileInput.ts
+/**
+* @todo Pluralize text when multiple files are allowed
+* @todo Hide dropzone when not multiple and already filled
+*/
+/**
+* @tagname leu-file-input
+*/
+var LeuFileInput = class LeuFileInput extends FormAssociatedMixin(LeuElement) {
+	constructor(..._args) {
+		super(..._args);
+		this.label = "";
+		this.accept = "";
+		this.disabled = false;
+		this.multiple = false;
+		this.required = false;
+		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");
+		};
+		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) => {
+			this.isDragging = false;
+			if (this.disabled) return;
+			event.preventDefault();
+			event.stopPropagation();
+			const acceptedFiles = [...event.dataTransfer.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();
+		};
+	}
+	static {
+		this.dependencies = {
+			"leu-icon": LeuIcon,
+			"leu-button": LeuButton,
+			"leu-visually-hidden": LeuVisuallyHidden
+		};
+	}
+	static {
+		this.styles = [LeuElement.styles, file_input_default];
+	}
+	static {
+		this.shadowRootOptions = {
+			...LeuElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	static {
+		this.formAssociated = true;
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("files") || changedProperties.has("disabled") || changedProperties.has("multiple")) this.setFormValue();
+	}
+	handleInput() {
+		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);
+		}
+	}
+	handleChange(event) {
+		const customEvent = new CustomEvent(event.type, event);
+		this.dispatchEvent(customEvent);
+	}
+	formResetCallback() {
+		this.files = [];
+		this.input.value = "";
+	}
+	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) this.internals.setValidity({ valueMissing: true }, "Bitte wählen Sie eine Datei.", this.input);
+		else this.internals.setValidity({});
+	}
+	removeFile(fileToRemove) {
+		this.files = this.files.filter((file) => file !== fileToRemove);
+		this.dispatchChangeAndInputEvents();
+	}
+	dispatchChangeAndInputEvents() {
+		this.dispatchEvent(new CustomEvent("input", {
+			composed: true,
+			bubbles: true
+		}));
+		this.dispatchEvent(new CustomEvent("change", {
+			composed: true,
+			bubbles: true
+		}));
+	}
+	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) {
+			if (acceptedType.startsWith(".")) {
+				const name = file.name.toLowerCase();
+				const extension = acceptedType.toLowerCase();
+				if (name.endsWith(extension)) return true;
+			} 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>
+    `;
+	}
+};
+__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);
+//#endregion
+export { LeuFileInput as t };

package/dist/FileInput.d.ts

@@ -1,11 +1,13 @@
-import * as lit_html from 'lit-html';
-import * as lit from 'lit';
-import { PropertyValues } from 'lit';
-import { L as LeuElement } from './LeuElement.d-BevHqLUu.js';
-import { LeuButton } from './Button.js';
-import { L as LeuIcon } from './Icon.d-itcQ94ym.js';
-import { LeuVisuallyHidden } from './VisuallyHidden.js';
+import { t as LeuElement } from "./LeuElement-pJFU18Xm.js";
+import { t as FormAssociatedMixinType } from "./FormAssociatedMixin-Cc74LjbC.js";
+import { t as LeuIcon } from "./Icon-Op80LrrO.js";
+import { t as LeuButton } from "./Button-DSGPIcjm.js";
+import { t as LeuVisuallyHidden } from "./VisuallyHidden-OeQvhxYn.js";
+import { PropertyValues } from "lit";
+import * as lit_html0 from "lit-html";
 
+//#region src/components/file-input/FileInput.d.ts
+declare const LeuFileInput_base: (abstract new (...args: any[]) => FormAssociatedMixinType) & typeof LeuElement;
 /**
  * @todo Pluralize text when multiple files are allowed
  * @todo Hide dropzone when not multiple and already filled
@@ -13,54 +15,51 @@ import { LeuVisuallyHidden } from './VisuallyHidden.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: PropertyValues<this>): void;
-    protected handleInput(): void;
-    private handleChange;
-    formResetCallback(): void;
-    protected updateFormValue(): void;
-    protected removeFile(fileToRemove: File): void;
-    protected dispatchChangeAndInputEvents(): 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>;
+declare class LeuFileInput extends LeuFileInput_base {
+  static dependencies: {
+    "leu-icon": typeof LeuIcon;
+    "leu-button": typeof LeuButton;
+    "leu-visually-hidden": typeof LeuVisuallyHidden;
+  };
+  static styles: any[];
+  static shadowRootOptions: {
+    delegatesFocus: boolean;
+    clonable?: boolean;
+    customElementRegistry?: CustomElementRegistry;
+    mode: ShadowRootMode;
+    serializable?: boolean;
+    slotAssignment?: SlotAssignmentMode;
+  };
+  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;
+  updated(changedProperties: PropertyValues<this>): void;
+  protected handleInput(): void;
+  private handleChange;
+  formResetCallback(): void;
+  protected setFormValue(): void;
+  protected removeFile(fileToRemove: File): void;
+  protected dispatchChangeAndInputEvents(): void;
+  protected static formatFileSize(size: number): lit_html0.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_html0.TemplateResult<1>;
 }
-
-export { LeuFileInput };
+//#endregion
+export { LeuFileInput };