@statistikzh/leu 0.24.2 → 0.26.0

package/dist/FileInput.js

@@ -1,384 +1,8 @@
-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-BfXSO7MN.js';
-import { LeuButton } from './Button.js';
-import { LeuIcon } from './Icon.js';
-import { LeuVisuallyHidden } from './VisuallyHidden.js';
-import './hasSlotController-Bm2tipvG.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;
-}
-`;
-
-/**
- * @todo Pluralize text when multiple files are allowed
- * @todo Hide dropzone when not multiple and already filled
- */
-/**
- * @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) => {
-            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();
-        };
-        // 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);
-        }
-    }
-    handleChange(event) {
-        const customEvent = new CustomEvent(event.type, event);
-        this.dispatchEvent(customEvent);
-    }
-    formResetCallback() {
-        this.files = [];
-        this.input.value = "";
-    }
-    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);
-        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) {
-            // 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}
-            @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>
-    `;
-    }
-}
-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);
-
+import "./LeuElement-BeFrgKes.js";
+import "./Icon-C_yYuynf.js";
+import "./Spinner-DDTqijTO.js";
+import "./Button-BkhqVjug.js";
+import "./FormAssociatedMixin-DLPvFtbT.js";
+import { t as LeuFileInput } from "./FileInput-b8sbLDPI.js";
+import "./VisuallyHidden-pll3amXE.js";
 export { LeuFileInput };

package/dist/FormAssociatedMixin-Cc74LjbC.d.ts

@@ -0,0 +1,22 @@
+//#region src/lib/mixins/FormAssociatedMixin.d.ts
+declare abstract class FormAssociatedMixinType {
+  static formAssociated: boolean;
+  protected readonly internals: ElementInternals;
+  name: string | null;
+  disabled: boolean;
+  required: boolean;
+  protected hasInteracted: boolean;
+  form: HTMLFormElement | null;
+  validity: ValidityState;
+  validationMessage: string;
+  willValidate: boolean;
+  checkValidity(): boolean;
+  reportValidity(): boolean;
+  resetValidity(): void;
+  formDisabledCallback(isDisabled: boolean): void;
+  formResetCallback(): void;
+  formStateRestoreCallback(_state: string | FormData | null): void;
+  protected abstract setFormValue(): void;
+}
+//#endregion
+export { FormAssociatedMixinType as t };

package/dist/FormAssociatedMixin-DLPvFtbT.js

@@ -0,0 +1,58 @@
+import { t as __decorate } from "./decorate-DwpAc4D0.js";
+import { property } from "lit/decorators.js";
+//#region src/lib/mixins/FormAssociatedMixin.ts
+const FormAssociatedMixin = (superClass) => {
+	class FormAssociatedMixinClass extends superClass {
+		constructor(..._args) {
+			super(..._args);
+			this.internals = this.attachInternals();
+			this.name = null;
+			this.disabled = false;
+			this.required = false;
+			this.hasInteracted = false;
+		}
+		static {
+			this.formAssociated = true;
+		}
+		get form() {
+			return this.internals.form;
+		}
+		get validity() {
+			return this.internals.validity;
+		}
+		get validationMessage() {
+			return this.internals.validationMessage;
+		}
+		get willValidate() {
+			return this.internals.willValidate;
+		}
+		checkValidity() {
+			return this.internals.checkValidity();
+		}
+		reportValidity() {
+			return this.internals.reportValidity();
+		}
+		resetValidity() {
+			this.internals.setValidity({});
+		}
+		formDisabledCallback(isDisabled) {
+			this.disabled = isDisabled;
+		}
+		formResetCallback() {
+			this.hasInteracted = false;
+			this.resetValidity();
+		}
+		formStateRestoreCallback(_state) {
+			this.resetValidity();
+		}
+	}
+	__decorate([property({ reflect: true })], FormAssociatedMixinClass.prototype, "name", void 0);
+	__decorate([property({ type: Boolean })], FormAssociatedMixinClass.prototype, "disabled", void 0);
+	__decorate([property({
+		state: true,
+		attribute: false
+	})], FormAssociatedMixinClass.prototype, "hasInteracted", void 0);
+	return FormAssociatedMixinClass;
+};
+//#endregion
+export { FormAssociatedMixin as t };