scb-wc 0.1.3 → 0.1.5

package/scb-drop-zone/scb-drop-zone.js

@@ -0,0 +1,965 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-button/scb-button.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a, state as o } from "lit/decorators.js";
+//#region src/scb-test-components/scb-drop-zone/scb-drop-zone.ts
+var s = class extends t {
+	static {
+		this.formAssociated = !0;
+	}
+	constructor() {
+		super(), this._internals = null, this.type = "default", this.name = "", this.multiple = !1, this.label = "", this.supportingText = "", this.metaText = "", this.buttonLabel = "", this.replaceButtonLabel = "", this.removeButtonLabel = "", this.previewEyebrow = "", this.emptyPreviewTitle = "", this.emptyPreviewMeta = "", this.accept = "", this.hidePreview = !1, this.showExistingPreview = !1, this.disabled = !1, this.previewSrc = "", this.previewAlt = "", this.previewTitle = "", this.previewMeta = "", this.existingValue = "", this.existingValueName = "", this.removeValueName = "", this._isDragOver = !1, this._selectedPreviewKind = "empty", this._selectedPreviewSrc = "", this._selectedPreviewAlt = "", this._selectedPreviewTitle = "", this._selectedPreviewMeta = "", this._selectedPreviewItems = [], this._markedForRemoval = !1, this._dragDepth = 0, this._previewSource = "external", this._form = null, this._formDataHandler = null, "attachInternals" in this && (this._internals = this.attachInternals());
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      width: 100%;
+      min-width: 0;
+      font-family: var(--brand-font, Inter, sans-serif);
+      color: var(--md-sys-color-on-surface, #111111);
+    }
+
+    .scb-drop-zone {
+      display: block;
+      width: 100%;
+    }
+
+    .scb-drop-zone__layout {
+      display: grid;
+      gap: var(--spacing-5, 16px);
+      align-items: stretch;
+    }
+
+    .scb-drop-zone__layout--with-preview {
+      grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
+    }
+
+    :host([multiple]) .scb-drop-zone__layout--with-preview {
+      grid-template-columns: 1fr;
+    }
+
+    .scb-drop-zone__surface,
+    .scb-drop-zone__preview {
+      min-width: 0;
+    }
+
+    .scb-drop-zone__main {
+      min-width: 0;
+      display: grid;
+      gap: var(--spacing-4, 12px);
+    }
+
+    .scb-drop-zone__surface {
+      box-sizing: border-box;
+      width: 100%;
+      min-height: var(--scb-drop-zone-min-height, min(46vh, 420px));
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--spacing-8, 32px);
+      border: 2px dashed var(--md-sys-color-outline-variant, #cccccc);
+      border-radius: var(--radius-l, 16px);
+      background: var(--md-sys-color-surface-container-lowest, #ffffff);
+      cursor: pointer;
+      transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
+      outline: none;
+    }
+
+    :host([multiple]) .scb-drop-zone__surface {
+      min-height: var(--scb-drop-zone-multi-min-height, min(32vh, 280px));
+      padding: var(--spacing-6, 20px);
+    }
+
+    .scb-drop-zone__surface:hover,
+    .scb-drop-zone__surface:focus-visible,
+    .scb-drop-zone__surface.is-dragover {
+      border-color: var(--md-sys-color-primary, #005799);
+      background: var(--md-sys-color-surface-container, #f5f5f5);
+      box-shadow: 0 0 0 1px var(--md-sys-color-primary, #005799);
+    }
+
+    :host([disabled]) .scb-drop-zone__surface {
+      cursor: default;
+      opacity: 0.6;
+    }
+
+    .scb-drop-zone__inner {
+      width: min(760px, 100%);
+      text-align: center;
+    }
+
+    .scb-drop-zone__title {
+      margin: 0 0 var(--spacing-3, 8px) 0;
+      font-size: var(--md-sys-typescale-headline-medium-size, 24px);
+      line-height: var(--md-sys-typescale-headline-medium-line-height, 30px);
+      color: var(--md-sys-color-on-surface, #111111);
+    }
+
+    .scb-drop-zone__lead {
+      margin: 0;
+      color: var(--md-sys-color-on-surface-variant, #444444);
+      line-height: 1.6;
+    }
+
+    .scb-drop-zone__meta {
+      margin: var(--spacing-4, 12px) 0 0 0;
+      color: var(--md-sys-color-on-surface-variant, #444444);
+      line-height: 1.6;
+    }
+
+    .scb-drop-zone__actions {
+      display: flex;
+      justify-content: center;
+      margin-top: var(--spacing-6, 20px);
+    }
+
+    .scb-drop-zone__native-input {
+      display: none;
+    }
+
+    .scb-drop-zone__preview {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: minmax(0, 1fr) auto;
+      gap: var(--spacing-6, 20px);
+      min-height: var(--scb-drop-zone-min-height, min(46vh, 420px));
+      height: 100%;
+      padding: var(--spacing-6, 20px);
+      box-sizing: border-box;
+      border: 1px solid var(--md-sys-color-outline-variant, #cccccc);
+      border-radius: var(--radius-l, 16px);
+      background: var(--md-sys-color-surface-container-lowest, #ffffff);
+      align-items: stretch;
+      align-content: stretch;
+    }
+
+
+    .scb-drop-zone__preview-media {
+      width: 100%;
+      height: 100%;
+      min-height: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    .scb-drop-zone__preview-image {
+      display: block;
+      max-width: 100%;
+      max-height: var(--scb-drop-zone-preview-max-height, 240px);
+      width: auto;
+      height: auto;
+      object-fit: contain;
+      border-radius: var(--radius-m, 12px);
+    }
+
+    .scb-drop-zone__preview-image--thumb {
+      width: 40px;
+      height: 40px;
+      max-width: 40px;
+      max-height: 40px;
+      border-radius: var(--radius-s, 8px);
+      object-fit: cover;
+      flex: 0 0 auto;
+    }
+
+    .scb-drop-zone__preview-placeholder,
+    .scb-drop-zone__preview-file-card {
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: var(--spacing-6, 20px);
+    }
+
+    .scb-drop-zone__preview-placeholder-inner,
+    .scb-drop-zone__preview-file-card-inner {
+      box-sizing: border-box;
+      width: 100%;
+      max-width: 320px;
+      height: 100%;
+      min-height: 180px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--spacing-4, 12px);
+      padding: var(--spacing-6, 20px);
+      border: 2px dashed var(--md-sys-color-outline-variant, #cccccc);
+      border-radius: var(--radius-m, 12px);
+      background: var(--md-sys-color-surface-container-lowest, #ffffff);
+      text-align: center;
+    }
+
+    .scb-drop-zone__preview-file-card-inner {
+      border-style: solid;
+      background: var(--md-sys-color-surface-container, #f5f5f5);
+    }
+
+    .scb-drop-zone__preview-placeholder-label,
+    .scb-drop-zone__preview-file-extension {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      min-width: 72px;
+      min-height: 72px;
+      padding: var(--spacing-3, 8px);
+      border-radius: var(--radius-m, 12px);
+      background: var(--md-sys-color-surface-container, #f5f5f5);
+      color: var(--md-sys-color-on-surface, #111111);
+      font-size: var(--md-sys-typescale-title-medium-size, 16px);
+      line-height: var(--md-sys-typescale-title-medium-line-height, 24px);
+      font-weight: 700;
+      letter-spacing: 0.06em;
+      text-transform: uppercase;
+    }
+
+    .scb-drop-zone__preview-file-extension {
+      background: var(--md-sys-color-primary-container, #d9e2ff);
+      color: var(--md-sys-color-on-primary-container, #001944);
+    }
+
+    .scb-drop-zone__preview-file-label {
+      margin: 0;
+      color: var(--md-sys-color-on-surface-variant, #444444);
+      line-height: 1.6;
+    }
+
+    .scb-drop-zone__preview-list {
+      width: 100%;
+      max-height: 300px;
+      margin: 0;
+      padding: 0;
+      list-style: none;
+      display: grid;
+      gap: var(--spacing-2, 4px);
+      overflow: auto;
+    }
+
+
+    .scb-drop-zone__preview-list-item {
+      display: flex;
+      align-items: center;
+      gap: var(--spacing-3, 8px);
+      min-width: 0;
+      padding: var(--spacing-3, 8px);
+      border-radius: var(--radius-s, 8px);
+      background: var(--md-sys-color-surface-container, #f5f5f5);
+    }
+
+    .scb-drop-zone__preview-list-extension {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 auto;
+      border-radius: var(--radius-s, 8px);
+      color: var(--md-sys-color-on-primary-container, #001944);
+      font-size: var(--md-sys-typescale-label-medium-size, 12px);
+      line-height: var(--md-sys-typescale-label-medium-line-height, 16px);
+      font-weight: 700;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+    }
+
+    .scb-drop-zone__preview-list-content {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+      text-align: left;
+      flex: 1 1 auto;
+    }
+
+    .scb-drop-zone__preview-list-item-action {
+      flex: 0 0 auto;
+      margin-left: auto;
+    }
+
+    .scb-drop-zone__preview-list-title,
+    .scb-drop-zone__preview-list-meta {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .scb-drop-zone__preview-list-title {
+      font-size: var(--md-sys-typescale-body-medium-size, 16px);
+      line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+      color: var(--md-sys-color-on-surface, #111111);
+    }
+
+    .scb-drop-zone__preview-list-meta {
+      font-size: var(--md-sys-typescale-body-small-size, 14px);
+      line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+      color: var(--md-sys-color-on-surface-variant, #444444);
+    }
+
+    .scb-drop-zone__sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    .scb-drop-zone__preview-body {
+      display: flex;
+      flex-direction: column;
+      min-width: 0;
+    }
+
+    .scb-drop-zone__preview-eyebrow {
+      margin: 0 0 var(--spacing-2, 4px) 0;
+      color: var(--md-sys-color-on-surface-variant, #444444);
+      font-size: var(--md-sys-typescale-body-small-size, 14px);
+      line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+      letter-spacing: var(--md-sys-typescale-body-small-tracking, 0.1px);
+      text-transform: uppercase;
+    }
+
+    .scb-drop-zone__preview-title {
+      margin: 0;
+      color: var(--md-sys-color-on-surface, #111111);
+      font-size: var(--md-sys-typescale-title-large-size, 20px);
+      line-height: var(--md-sys-typescale-title-large-line-height, 28px);
+      word-break: break-word;
+    }
+
+    .scb-drop-zone__preview-meta {
+      margin: var(--spacing-3, 8px) 0 0 0;
+      color: var(--md-sys-color-on-surface-variant, #444444);
+      line-height: 1.6;
+      word-break: break-word;
+    }
+
+    .scb-drop-zone__preview-actions {
+      display: flex;
+      flex-wrap: wrap;
+      gap: var(--spacing-3, 8px);
+      margin-top: auto;
+      padding-top: var(--spacing-5, 16px);
+    }
+
+    .scb-drop-zone__selected-images {
+      display: grid;
+      grid-template-columns: repeat(4, minmax(180px, 1fr));
+      gap: var(--spacing-3, 8px);
+      margin-top: var(--spacing-4, 12px);
+    }
+
+    .scb-drop-zone__selected-image-card {
+      display: grid;
+      gap: var(--spacing-2, 4px);
+      border: 1px solid var(--md-sys-color-outline-variant, #cccccc);
+      border-radius: var(--radius-m, 12px);
+      background: var(--md-sys-color-surface-container-lowest, #ffffff);
+      padding: var(--spacing-3, 8px);
+      min-width: 0;
+    }
+
+    .scb-drop-zone__selected-image {
+      display: block;
+      width: 100%;
+      aspect-ratio: 4 / 3;
+      object-fit: cover;
+      border-radius: var(--radius-s, 8px);
+      background: var(--md-sys-color-surface-container, #f5f5f5);
+    }
+
+    .scb-drop-zone__selected-image-title,
+    .scb-drop-zone__selected-image-meta {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .scb-drop-zone__selected-image-title {
+      font-size: var(--md-sys-typescale-body-medium-size, 16px);
+      line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+      color: var(--md-sys-color-on-surface, #111111);
+    }
+
+    .scb-drop-zone__selected-image-meta {
+      font-size: var(--md-sys-typescale-body-small-size, 14px);
+      line-height: var(--md-sys-typescale-body-small-line-height, 20px);
+      color: var(--md-sys-color-on-surface-variant, #444444);
+    }
+
+    .scb-drop-zone__selected-image-action {
+      justify-self: end;
+    }
+
+    @media (max-width: 1280px) {
+      .scb-drop-zone__selected-images {
+        grid-template-columns: repeat(3, minmax(180px, 1fr));
+      }
+    }
+
+    @media (max-width: 900px) {
+      .scb-drop-zone__layout--with-preview {
+        grid-template-columns: 1fr;
+      }
+
+      .scb-drop-zone__selected-images {
+        grid-template-columns: repeat(2, minmax(180px, 1fr));
+      }
+    }
+
+    @media (max-width: 640px) {
+      .scb-drop-zone__selected-images {
+        grid-template-columns: 1fr;
+      }
+    }
+  `;
+	}
+	get _resolvedAccept() {
+		return this.accept.trim() || (this.type === "image" ? "image/*,.png,.jpg,.jpeg,.webp,.svg,.gif,.bmp,.avif" : "");
+	}
+	get _hasExistingPreview() {
+		return this.multiple || this._markedForRemoval || !(this.existingValue.trim() || this.previewSrc.trim() || this.previewTitle.trim() || this.previewMeta.trim()) ? !1 : this.showExistingPreview || !!this.previewSrc.trim();
+	}
+	get _resolvedPreviewKind() {
+		return this._previewSource === "external" && this._hasExistingPreview ? this.previewSrc.trim() ? "image" : "file" : this._selectedPreviewKind;
+	}
+	get _hasPreview() {
+		return this._resolvedPreviewKind !== "empty";
+	}
+	get _resolvedLabel() {
+		return this.label || (this.type === "image" ? "Ladda upp bild" : "Ladda upp fil");
+	}
+	get _resolvedSupportingText() {
+		return this.multiple ? this.supportingText || (this.type === "image" ? "Dra och släpp en eller flera bilder här, eller välj bilder från din dator." : "Dra och släpp en eller flera filer här, eller välj filer från din dator.") : this.supportingText || (this.type === "image" ? "Dra och släpp en bild här, eller välj en bild från din dator." : "Dra och släpp en fil här, eller välj en fil från din dator.");
+	}
+	get _resolvedMetaText() {
+		return this.metaText ? this.metaText : this.type === "image" ? "PNG, JPG, SVG, GIF, BMP, AVIF och WebP stöds." : "Alla filtyper stöds.";
+	}
+	get _resolvedButtonLabel() {
+		return this.buttonLabel || (this.type === "image" ? "Välj bild" : "Välj fil");
+	}
+	get _resolvedReplaceButtonLabel() {
+		return this.replaceButtonLabel ? this.replaceButtonLabel : this.multiple || this._resolvedPreviewKind === "multi" ? "Lägg till fler filer" : this._previewSource === "external" && this._hasExistingPreview ? this._resolvedPreviewKind === "image" ? "Ersätt bild" : "Ersätt fil" : this._resolvedPreviewKind === "image" ? "Byt bild" : "Byt fil";
+	}
+	get _resolvedRemoveButtonLabel() {
+		return this.removeButtonLabel ? this.removeButtonLabel : this._resolvedPreviewKind === "multi" ? "Ta bort filer" : this._previewSource === "external" && this._hasExistingPreview ? this._resolvedPreviewKind === "image" ? "Ta bort befintlig bild" : "Ta bort befintlig fil" : this._resolvedPreviewKind === "image" ? "Ta bort bild" : "Ta bort fil";
+	}
+	get _resolvedPreviewEyebrow() {
+		return this.previewEyebrow ? this.previewEyebrow : this._hasPreview ? this._resolvedPreviewKind === "multi" ? "Uppladdade filer" : this._previewSource === "external" && this._hasExistingPreview ? this._resolvedPreviewKind === "image" ? "Befintlig bild" : "Befintlig fil" : this._resolvedPreviewKind === "image" ? "Uppladdad bild" : "Uppladdad fil" : "Förhandsvisning";
+	}
+	get _resolvedEmptyPreviewTitle() {
+		return this.emptyPreviewTitle ? this.emptyPreviewTitle : this.multiple ? this.type === "image" ? "Inga bilder uppladdade" : "Inga filer uppladdade" : this.type === "image" ? "Ingen bild uppladdad" : "Ingen fil uppladdad";
+	}
+	get _resolvedEmptyPreviewMeta() {
+		return this.emptyPreviewMeta ? this.emptyPreviewMeta : this.multiple ? this.type === "image" ? "Förhandsvisningen visas här när du har laddat upp bilder." : "Förhandsvisningen visas här när du har laddat upp filer." : this.type === "image" ? "Förhandsvisningen visas här när du har laddat upp en bild." : "Förhandsvisningen visas här när du har laddat upp en fil.";
+	}
+	get _resolvedPreviewSrc() {
+		return this._previewSource === "external" && this._hasExistingPreview ? this.previewSrc.trim() : this._selectedPreviewSrc;
+	}
+	get _resolvedPreviewAlt() {
+		return this._previewSource === "external" && this._hasExistingPreview ? this.previewAlt : this._selectedPreviewAlt;
+	}
+	get _resolvedPreviewTitle() {
+		return this._previewSource === "external" && this._hasExistingPreview ? this.previewTitle || (this._resolvedPreviewKind === "image" ? "Befintlig bild" : "Befintlig fil") : this._selectedPreviewTitle;
+	}
+	get _resolvedPreviewMeta() {
+		return this._previewSource === "external" && this._hasExistingPreview ? this.previewMeta : this._selectedPreviewMeta;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._syncFormValue(), this._form = this.closest("form"), this._form && (this._formDataHandler = (e) => {
+			let t = e.formData;
+			t && this._appendToFormData(t);
+		}, this._form.addEventListener("formdata", this._formDataHandler));
+	}
+	disconnectedCallback() {
+		this._form && this._formDataHandler && this._form.removeEventListener("formdata", this._formDataHandler), this._formDataHandler = null, this._form = null, this._revokeObjectUrl(), super.disconnectedCallback();
+	}
+	updated(e) {
+		e.has("type") && this.type === "image" && this._selectedPreviewKind === "file" && this._clearSelectedFileState(), (e.has("disabled") || e.has("name") || e.has("multiple") || e.has("existingValueName") || e.has("removeValueName") || e.has("existingValue")) && this._syncFormValue();
+	}
+	formDisabledCallback(e) {
+		this.disabled = e;
+	}
+	formResetCallback() {
+		this._clearSelectedFileState(), this._markedForRemoval = !1, this._previewSource = "external", this._clearNativeInputValue(), this._syncFormValue();
+	}
+	_syncFormValue() {
+		if (!this._internals) return;
+		let e = this.name.trim(), t = this.existingValueName.trim(), n = this.removeValueName.trim(), r = new FormData();
+		if (!this.disabled && e && this._selectedPreviewItems.length && this._selectedPreviewItems.forEach((t) => {
+			r.append(e, t.file, t.file.name);
+		}), !this.disabled && !this.multiple && t && this.existingValue.trim() && r.append(t, this.existingValue), !this.disabled && !this.multiple && n && r.append(n, this._markedForRemoval ? "true" : "false"), [...r.keys()].length === 0) {
+			this._internals.setFormValue(null);
+			return;
+		}
+		this._internals.setFormValue(r);
+	}
+	_appendToFormData(e) {
+		if (this.disabled) return;
+		let t = this.name.trim();
+		if (t && this._selectedPreviewItems.length && (e.getAll(t).some((e) => e instanceof File && this._selectedPreviewItems.some((t) => t.file === e)) || this._selectedPreviewItems.forEach((n) => {
+			e.append(t, n.file, n.file.name);
+		})), !this.multiple) {
+			let t = this.existingValueName.trim();
+			t && this.existingValue.trim() && !e.has(t) && e.append(t, this.existingValue);
+			let n = this.removeValueName.trim();
+			n && !e.has(n) && e.append(n, this._markedForRemoval ? "true" : "false");
+		}
+	}
+	openPicker() {
+		if (this.disabled) return;
+		let e = this.renderRoot.querySelector("[data-role=\"native-input\"]");
+		if (e) {
+			try {
+				e.value = "";
+			} catch {}
+			e.click();
+		}
+	}
+	setPreviewState(e) {
+		this.previewSrc = e?.src ?? "", this.previewAlt = e?.alt ?? "", this.previewTitle = e?.title ?? "", this.previewMeta = e?.meta ?? "", this._markedForRemoval = !1, this._previewSource = this._selectedPreviewItems.length ? "internal" : "external", this._syncFormValue();
+	}
+	setExistingFileState(e) {
+		if (this.multiple) {
+			this.existingValue = "", this.previewSrc = "", this.previewAlt = "", this.previewTitle = "", this.previewMeta = "", this._markedForRemoval = !1, this._syncFormValue();
+			return;
+		}
+		this.existingValue = e?.value ?? "", this.previewSrc = e?.src ?? "", this.previewAlt = e?.alt ?? "", this.previewTitle = e?.title ?? "", this.previewMeta = e?.meta ?? "", this._markedForRemoval = !1, this._previewSource = this._selectedPreviewItems.length ? "internal" : "external", this._syncFormValue();
+	}
+	clearPreviewState() {
+		this.previewSrc = "", this.previewAlt = "", this.previewTitle = "", this.previewMeta = "", this._markedForRemoval = !1, this._previewSource = "external", this._clearSelectedFileState(), this._clearNativeInputValue(), this._syncFormValue();
+	}
+	clearExistingFileState() {
+		this.existingValue = "", this.previewSrc = "", this.previewAlt = "", this.previewTitle = "", this.previewMeta = "", this._markedForRemoval = !1, this._selectedPreviewItems.length || (this._previewSource = "external"), this._syncFormValue();
+	}
+	_dispatch(e, t = {}, n = !1) {
+		let r = new CustomEvent(e, {
+			detail: t,
+			bubbles: !0,
+			composed: !0,
+			cancelable: n
+		});
+		return this.dispatchEvent(r), r;
+	}
+	_handleFiles(e) {
+		let t = Array.from(e ?? []).filter((e) => this._isAcceptedFile(e));
+		if (!t.length) return;
+		let n = this.multiple ? t : [t[0]];
+		this._setSelectedFilesState(n, this.multiple);
+		let r = this._selectedPreviewItems.map((e) => e.file);
+		this._dispatch("file-selected", {
+			file: r[0],
+			files: r,
+			addedFiles: n,
+			existingValue: this.existingValue,
+			markedForRemoval: this._markedForRemoval
+		}), this._dispatch("change", {
+			file: r[0],
+			files: r,
+			addedFiles: n,
+			existingValue: this.existingValue,
+			markedForRemoval: this._markedForRemoval
+		});
+	}
+	_onZoneClick(e) {
+		this.disabled || e.composedPath().some((e) => e instanceof HTMLElement && e.getAttribute("data-role") === "choose-button") || this.openPicker();
+	}
+	_onZoneKeydown(e) {
+		this.disabled || (e.key === "Enter" || e.key === " " || e.key === "Spacebar") && (e.preventDefault(), this.openPicker());
+	}
+	_preventDefaultDrag(e) {
+		e.preventDefault(), e.stopPropagation();
+	}
+	_onDragEnter(e) {
+		this.disabled || (this._preventDefaultDrag(e), this._dragDepth += 1, this._isDragOver = !0);
+	}
+	_onDragOver(e) {
+		this.disabled || (this._preventDefaultDrag(e), this._isDragOver = !0);
+	}
+	_onDragLeave(e) {
+		this.disabled || (this._preventDefaultDrag(e), this._dragDepth = Math.max(0, this._dragDepth - 1), this._dragDepth || (this._isDragOver = !1));
+	}
+	_onDrop(e) {
+		this.disabled || (this._preventDefaultDrag(e), this._dragDepth = 0, this._isDragOver = !1, this._handleFiles(e.dataTransfer?.files ?? null));
+	}
+	_onNativeInputChange(e) {
+		let t = e.currentTarget;
+		this._handleFiles(t?.files ?? null);
+	}
+	_onChooseButtonClick(e) {
+		e.preventDefault(), e.stopPropagation(), this.openPicker();
+	}
+	_onReplaceButtonClick(e) {
+		e.preventDefault(), e.stopPropagation(), this.openPicker();
+	}
+	_onRemoveButtonClick(e) {
+		if (e.preventDefault(), e.stopPropagation(), !this._dispatch("clear-request", {
+			file: this._selectedPreviewItems[0]?.file ?? null,
+			files: this._selectedPreviewItems.map((e) => e.file),
+			existingValue: this.existingValue,
+			markedForRemoval: this._markedForRemoval
+		}, !0).defaultPrevented) {
+			if (this._selectedPreviewItems.length) {
+				this._clearSelectedFileState(), this._clearNativeInputValue(), this._previewSource = this._hasExistingPreview ? "external" : "internal", this._dispatch("change", {
+					file: null,
+					files: [],
+					existingValue: this.existingValue,
+					markedForRemoval: this._markedForRemoval
+				});
+				return;
+			}
+			if (this._hasExistingPreview) {
+				this._markedForRemoval = !0, this._previewSource = "external", this._syncFormValue(), this.requestUpdate(), this._dispatch("change", {
+					file: null,
+					files: [],
+					existingValue: this.existingValue,
+					markedForRemoval: !0
+				});
+				return;
+			}
+			this.clearPreviewState();
+		}
+	}
+	_onRemoveSelectedItemClick(e) {
+		if (e.preventDefault(), e.stopPropagation(), this.disabled) return;
+		let t = e.currentTarget?.getAttribute("data-index") || "", n = Number.parseInt(t, 10);
+		Number.isInteger(n) && this._removeSelectedItemAt(n);
+	}
+	_isAcceptedFile(e) {
+		let t = this._resolvedAccept.trim();
+		if (!t) return !0;
+		let n = e.name.toLowerCase(), r = (e.type || "").toLowerCase(), i = t.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean);
+		return i.length ? i.some((e) => e === "*/*" ? !0 : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : e.startsWith(".") ? n.endsWith(e) : r === e) : !0;
+	}
+	_setSelectedFilesState(e, t) {
+		let n = e.filter(Boolean);
+		if (!n.length) return;
+		let r = t ? this._selectedPreviewItems : [], i = n.map((e) => {
+			let t = this._getPreviewKindForFile(e), n = this._getFileTypeLabel(e), r = this._formatFileSize(e.size);
+			return {
+				file: e,
+				kind: t,
+				src: t === "image" ? URL.createObjectURL(e) : "",
+				alt: t === "image" ? e.name || "Uppladdad bild" : "",
+				title: e.name || (t === "image" ? "Uppladdad bild" : "Uppladdad fil"),
+				meta: [n, r].filter(Boolean).join(" • ")
+			};
+		});
+		t || this._revokeObjectUrl();
+		let a = this.multiple ? [...r, ...i] : [i[0]];
+		!this.multiple && r.length && this._revokeObjectUrlsForItems(r), this._markedForRemoval = !1, this._applySelectedPreviewItems(a);
+	}
+	_clearSelectedFileState() {
+		this._revokeObjectUrl(), this._applySelectedPreviewItems([]);
+	}
+	_applySelectedPreviewItems(e) {
+		this._selectedPreviewItems = e;
+		let t = e[0];
+		if (!t) {
+			this._selectedPreviewKind = "empty", this._selectedPreviewTitle = "", this._selectedPreviewMeta = "", this._selectedPreviewAlt = "", this._selectedPreviewSrc = "", this._previewSource = "internal", this._syncFormValue();
+			return;
+		}
+		if (e.length > 1) {
+			let t = e.reduce((e, t) => e + (Number.isFinite(t.file.size) ? t.file.size : 0), 0);
+			this._selectedPreviewKind = "multi", this._selectedPreviewTitle = `${e.length} filer valda`, this._selectedPreviewMeta = `Totalt ${this._formatFileSize(t)}`, this._selectedPreviewAlt = "", this._selectedPreviewSrc = "";
+		} else this._selectedPreviewKind = t.kind, this._selectedPreviewTitle = t.title, this._selectedPreviewMeta = t.meta, this._selectedPreviewAlt = t.alt, this._selectedPreviewSrc = t.src;
+		this._previewSource = "internal", this._syncFormValue();
+	}
+	_removeSelectedItemAt(e) {
+		if (e < 0 || e >= this._selectedPreviewItems.length) return;
+		let t = this._selectedPreviewItems[e];
+		t.src && URL.revokeObjectURL(t.src);
+		let n = this._selectedPreviewItems.filter((t, n) => n !== e);
+		this._applySelectedPreviewItems(n), this._dispatch("file-removed", {
+			file: t.file,
+			files: n.map((e) => e.file),
+			index: e,
+			existingValue: this.existingValue,
+			markedForRemoval: this._markedForRemoval
+		}), this._dispatch("change", {
+			file: n[0]?.file ?? null,
+			files: n.map((e) => e.file),
+			removedFile: t.file,
+			removedIndex: e,
+			existingValue: this.existingValue,
+			markedForRemoval: this._markedForRemoval
+		});
+	}
+	_renderSelectedImageCards() {
+		return !this.multiple || this.type !== "image" || this.hidePreview || !this._selectedPreviewItems.some((e) => e.kind === "image" && e.src) ? null : r`
+      <div class="scb-drop-zone__selected-images" aria-label="Valda bilder">
+        ${this._selectedPreviewItems.map((e, t) => e.kind !== "image" || !e.src ? null : r`
+            <article class="scb-drop-zone__selected-image-card" aria-label=${`${e.title}, ${e.meta}`}>
+              <img class="scb-drop-zone__selected-image" src=${e.src} alt=${e.alt || e.title} />
+              <span class="scb-drop-zone__selected-image-title">${e.title}</span>
+              <span class="scb-drop-zone__selected-image-meta">${e.meta}</span>
+              <scb-button
+                class="scb-drop-zone__selected-image-action"
+                data-index=${String(t)}
+                variant="text"
+                size="small"
+                label="Ta bort"
+                aria-label=${`Ta bort ${e.title}`}
+                @click=${this._onRemoveSelectedItemClick}
+              ></scb-button>
+            </article>
+          `)}
+      </div>
+    `;
+	}
+	_clearNativeInputValue() {
+		let e = this.renderRoot.querySelector("[data-role=\"native-input\"]");
+		if (e) try {
+			e.value = "";
+		} catch {}
+	}
+	_revokeObjectUrl() {
+		this._revokeObjectUrlsForItems(this._selectedPreviewItems);
+	}
+	_revokeObjectUrlsForItems(e) {
+		e.forEach((e) => {
+			e.src && URL.revokeObjectURL(e.src);
+		});
+	}
+	_getPreviewKindForFile(e) {
+		let t = (e.type || "").toLowerCase(), n = this._getFileExtension(e.name).toLowerCase();
+		return t.startsWith("image/") || [
+			"png",
+			"jpg",
+			"jpeg",
+			"webp",
+			"svg",
+			"gif",
+			"bmp",
+			"avif"
+		].includes(n) ? "image" : "file";
+	}
+	_getFileExtension(e) {
+		return /\.([^.]+)$/.exec(e || "")?.[1] ?? "";
+	}
+	_getFileExtensionLabel(e) {
+		return (this._getFileExtension(e) || (this._resolvedPreviewKind === "image" ? "IMG" : "FIL")).slice(0, 6).toUpperCase();
+	}
+	_getFileTypeLabel(e) {
+		if (e.type) return e.type;
+		let t = this._getFileExtension(e.name);
+		return t ? t.toUpperCase() : "Okänd filtyp";
+	}
+	_formatFileSize(e) {
+		return !Number.isFinite(e) || e < 0 ? "" : e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${new Intl.NumberFormat("sv-SE", { maximumFractionDigits: 1 }).format(e / 1024)} kB` : `${new Intl.NumberFormat("sv-SE", { maximumFractionDigits: 1 }).format(e / (1024 * 1024))} MB`;
+	}
+	_renderPreviewMedia() {
+		return this._resolvedPreviewKind === "multi" ? this.multiple && this.type === "image" ? r`
+          <div class="scb-drop-zone__preview-placeholder">
+            <div class="scb-drop-zone__preview-placeholder-inner">
+              <span class="scb-drop-zone__preview-placeholder-label">Bild</span>
+              <p class="scb-drop-zone__preview-file-label">Valda bilder visas under uppladdningsytan.</p>
+            </div>
+          </div>
+        ` : r`
+        <ul class="scb-drop-zone__preview-list" aria-label="Valda filer">
+          ${this._selectedPreviewItems.map((e, t) => r`
+            <li class="scb-drop-zone__preview-list-item" aria-label=${`${e.title}, ${e.meta}`}>
+              ${e.kind === "image" && e.src ? r`<img class="scb-drop-zone__preview-image scb-drop-zone__preview-image--thumb" src=${e.src} alt=${e.alt || e.title} />` : r`
+                    <span class="scb-drop-zone__preview-list-extension" aria-hidden="true">
+                      ${this._getFileExtensionLabel(e.title)}
+                    </span>
+                    <span class="scb-drop-zone__sr-only">Fil</span>
+                  `}
+              <span class="scb-drop-zone__preview-list-content">
+                <span class="scb-drop-zone__preview-list-title">${e.title}</span>
+                <span class="scb-drop-zone__preview-list-meta">${e.meta}</span>
+              </span>
+              <scb-button
+                class="scb-drop-zone__preview-list-item-action"
+                data-index=${String(t)}
+                variant="text"
+                size="small"
+                label="Ta bort"
+                aria-label=${`Ta bort ${e.title}`}
+                @click=${this._onRemoveSelectedItemClick}
+              ></scb-button>
+            </li>
+          `)}
+        </ul>
+      ` : this._resolvedPreviewKind === "image" && this._resolvedPreviewSrc ? r`<img class="scb-drop-zone__preview-image" src=${this._resolvedPreviewSrc} alt=${this._resolvedPreviewAlt} />` : this._hasPreview ? r`
+        <div class="scb-drop-zone__preview-file-card">
+          <div class="scb-drop-zone__preview-file-card-inner">
+            <span class="scb-drop-zone__preview-file-extension">${this._getFileExtensionLabel(this._resolvedPreviewTitle)}</span>
+            <p class="scb-drop-zone__preview-file-label">${this._previewSource === "external" ? "Befintlig fil" : "Vald fil"}</p>
+          </div>
+        </div>
+      ` : r`
+      <div class="scb-drop-zone__preview-placeholder">
+        <div class="scb-drop-zone__preview-placeholder-inner">
+          <span class="scb-drop-zone__preview-placeholder-label">${this.type === "image" ? "Bild" : "Fil"}</span>
+        </div>
+      </div>
+    `;
+	}
+	_renderPreview() {
+		if (this.hidePreview || this.multiple && this.type === "image") return null;
+		let e = this._hasPreview ? this._resolvedPreviewTitle : this._resolvedEmptyPreviewTitle, t = this._hasPreview ? this._resolvedPreviewMeta : this._resolvedEmptyPreviewMeta;
+		return r`
+      <div class="scb-drop-zone__preview">
+        <div class="scb-drop-zone__preview-media">
+          ${this._renderPreviewMedia()}
+        </div>
+
+        <div class="scb-drop-zone__preview-body">
+          <p class="scb-drop-zone__preview-eyebrow">${this._resolvedPreviewEyebrow}</p>
+          <h3 class="scb-drop-zone__preview-title">${e}</h3>
+          <p class="scb-drop-zone__preview-meta" aria-live="polite">${t}</p>
+
+          ${this._hasPreview ? r`
+                <div class="scb-drop-zone__preview-actions">
+                  <scb-button
+                    data-role="replace-button"
+                    variant="outlined"
+                    size="medium"
+                    label=${this._resolvedReplaceButtonLabel}
+                    @click=${this._onReplaceButtonClick}
+                  ></scb-button>
+                  <scb-button
+                    data-role="remove-button"
+                    variant="text"
+                    size="medium"
+                    label=${this._resolvedRemoveButtonLabel}
+                    @click=${this._onRemoveButtonClick}
+                  ></scb-button>
+                </div>
+              ` : null}
+        </div>
+      </div>
+    `;
+	}
+	render() {
+		let e = {
+			"scb-drop-zone__surface": !0,
+			"is-dragover": this._isDragOver
+		};
+		return r`
+      <div class="scb-drop-zone">
+        <div class="scb-drop-zone__layout ${this.hidePreview ? "" : "scb-drop-zone__layout--with-preview"}">
+          <div class="scb-drop-zone__main">
+            <div
+              class=${Object.keys(e).filter((t) => e[t]).join(" ")}
+              data-role="zone"
+              role="button"
+              tabindex=${this.disabled ? "-1" : "0"}
+              aria-label=${this._resolvedLabel}
+              @click=${this._onZoneClick}
+              @keydown=${this._onZoneKeydown}
+              @dragenter=${this._onDragEnter}
+              @dragover=${this._onDragOver}
+              @dragleave=${this._onDragLeave}
+              @drop=${this._onDrop}
+            >
+              <input
+                class="scb-drop-zone__native-input"
+                data-role="native-input"
+                type="file"
+                .accept=${this._resolvedAccept}
+                ?multiple=${this.multiple}
+                ?disabled=${this.disabled}
+                @change=${this._onNativeInputChange}
+              />
+
+              <div class="scb-drop-zone__inner">
+                <h2 class="scb-drop-zone__title">${this._resolvedLabel}</h2>
+                <p class="scb-drop-zone__lead">${this._resolvedSupportingText}</p>
+                ${this._resolvedMetaText ? r`<p class="scb-drop-zone__meta">${this._resolvedMetaText}</p>` : null}
+
+                <div class="scb-drop-zone__actions">
+                  <scb-button
+                    data-role="choose-button"
+                    variant="filled"
+                    size="medium"
+                    label=${this._resolvedButtonLabel}
+                    @click=${this._onChooseButtonClick}
+                  ></scb-button>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          ${this._renderPreview()}
+        </div>
+
+        ${this._renderSelectedImageCards()}
+      </div>
+    `;
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "type", void 0), e([a({ type: String })], s.prototype, "name", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "multiple", void 0), e([a({ type: String })], s.prototype, "label", void 0), e([a({
+	type: String,
+	attribute: "supporting-text"
+})], s.prototype, "supportingText", void 0), e([a({
+	type: String,
+	attribute: "meta-text"
+})], s.prototype, "metaText", void 0), e([a({
+	type: String,
+	attribute: "button-label"
+})], s.prototype, "buttonLabel", void 0), e([a({
+	type: String,
+	attribute: "replace-button-label"
+})], s.prototype, "replaceButtonLabel", void 0), e([a({
+	type: String,
+	attribute: "remove-button-label"
+})], s.prototype, "removeButtonLabel", void 0), e([a({
+	type: String,
+	attribute: "preview-eyebrow"
+})], s.prototype, "previewEyebrow", void 0), e([a({
+	type: String,
+	attribute: "empty-preview-title"
+})], s.prototype, "emptyPreviewTitle", void 0), e([a({
+	type: String,
+	attribute: "empty-preview-meta"
+})], s.prototype, "emptyPreviewMeta", void 0), e([a({ type: String })], s.prototype, "accept", void 0), e([a({
+	type: Boolean,
+	attribute: "hide-preview",
+	reflect: !0
+})], s.prototype, "hidePreview", void 0), e([a({
+	type: Boolean,
+	attribute: "show-existing-preview",
+	reflect: !0
+})], s.prototype, "showExistingPreview", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "disabled", void 0), e([a({
+	type: String,
+	attribute: "preview-src"
+})], s.prototype, "previewSrc", void 0), e([a({
+	type: String,
+	attribute: "preview-alt"
+})], s.prototype, "previewAlt", void 0), e([a({
+	type: String,
+	attribute: "preview-title"
+})], s.prototype, "previewTitle", void 0), e([a({
+	type: String,
+	attribute: "preview-meta"
+})], s.prototype, "previewMeta", void 0), e([a({
+	type: String,
+	attribute: "existing-value"
+})], s.prototype, "existingValue", void 0), e([a({
+	type: String,
+	attribute: "existing-value-name"
+})], s.prototype, "existingValueName", void 0), e([a({
+	type: String,
+	attribute: "remove-value-name"
+})], s.prototype, "removeValueName", void 0), e([o()], s.prototype, "_isDragOver", void 0), e([o()], s.prototype, "_selectedPreviewKind", void 0), e([o()], s.prototype, "_selectedPreviewSrc", void 0), e([o()], s.prototype, "_selectedPreviewAlt", void 0), e([o()], s.prototype, "_selectedPreviewTitle", void 0), e([o()], s.prototype, "_selectedPreviewMeta", void 0), e([o()], s.prototype, "_selectedPreviewItems", void 0), e([o()], s.prototype, "_markedForRemoval", void 0), s = e([i("scb-drop-zone")], s);
+//#endregion
+export { s as ScbDropZone };