scb-wc-test 0.1.303 → 0.1.305

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

@@ -1,4 +1,56 @@
-import{a as h,n as s,r as c,i as v,x as p,t as _}from"../../vendor/vendor.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(o,a,l){try{customElements.get(o)||t(o,a,l)}catch(d){var n=String(d||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var u=Object.defineProperty,b=Object.getOwnPropertyDescriptor,i=(e,t,o,a)=>{for(var l=a>1?void 0:a?b(t,o):t,n=e.length-1,d;n>=0;n--)(d=e[n])&&(l=(a?d(t,o,l):d(l))||l);return a&&l&&u(t,o,l),l};let r=class extends v{constructor(){super(),this._internals=null,this.type="default",this.name="",this.label="",this.supportingText="",this.metaText="",this.buttonLabel="",this.replaceButtonLabel="",this.removeButtonLabel="",this.previewEyebrow="",this.emptyPreviewTitle="",this.emptyPreviewMeta="",this.accept="",this.showPreview=!0,this.disabled=!1,this.previewSrc="",this.defaultImageSrc="",this.previewAlt="",this.previewTitle="",this.previewMeta="",this._isDragOver=!1,this._selectedPreviewKind="empty",this._selectedPreviewSrc="",this._selectedPreviewAlt="",this._selectedPreviewTitle="",this._selectedPreviewMeta="",this._dragDepth=0,this._previewSource="external",this._objectUrl="",this._selectedFile=null,"attachInternals"in this&&(this._internals=this.attachInternals())}get _resolvedAccept(){return this.accept.trim()||(this.type==="image"?"image/*,.png,.jpg,.jpeg,.webp,.svg,.gif,.bmp,.avif":"")}get _hasExternalPreview(){return!!this._resolvedExternalPreviewSrc||!!this.previewTitle.trim()||!!this.previewMeta.trim()}get _resolvedExternalPreviewSrc(){return this.previewSrc.trim()||this.defaultImageSrc.trim()}get _resolvedPreviewKind(){return this._previewSource==="external"&&this._hasExternalPreview?this._resolvedExternalPreviewSrc?"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.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._resolvedPreviewKind==="image"?"Byt bild":"Byt fil"}get _resolvedRemoveButtonLabel(){return this.removeButtonLabel?this.removeButtonLabel:this._resolvedPreviewKind==="image"?"Ta bort bild":"Ta bort fil"}get _resolvedPreviewEyebrow(){return this.previewEyebrow?this.previewEyebrow:this._hasPreview?this._resolvedPreviewKind==="image"?"Uppladdad bild":"Uppladdad fil":"Förhandsvisning"}get _resolvedEmptyPreviewTitle(){return this.emptyPreviewTitle?this.emptyPreviewTitle:this.type==="image"?"Ingen bild uppladdad":"Ingen fil uppladdad"}get _resolvedEmptyPreviewMeta(){return this.emptyPreviewMeta?this.emptyPreviewMeta: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._hasExternalPreview?this._resolvedExternalPreviewSrc:this._selectedPreviewSrc}get _resolvedPreviewAlt(){return this._previewSource==="external"&&this._hasExternalPreview?this.previewAlt:this._selectedPreviewAlt}get _resolvedPreviewTitle(){return this._previewSource==="external"&&this._hasExternalPreview?this.previewTitle||(this._resolvedPreviewKind==="image"?"Uppladdad bild":"Uppladdad fil"):this._selectedPreviewTitle}get _resolvedPreviewMeta(){return this._previewSource==="external"&&this._hasExternalPreview?this.previewMeta:this._selectedPreviewMeta}disconnectedCallback(){this._revokeObjectUrl(),super.disconnectedCallback()}updated(e){e.has("type")&&this.type==="image"&&this._selectedPreviewKind==="file"&&this._clearSelectedFileState(),(e.has("disabled")||e.has("name"))&&this._syncFormValue()}connectedCallback(){super.connectedCallback(),this._syncFormValue()}formDisabledCallback(e){this.disabled=e}formResetCallback(){this.clearPreviewState()}_syncFormValue(){if(this._internals){if(this.disabled||!this.name.trim()||!this._selectedFile){this._internals.setFormValue(null);return}this._internals.setFormValue(this._selectedFile)}}openPicker(){if(this.disabled)return;const 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._previewSource="external"}clearPreviewState(){this.previewSrc="",this.previewAlt="",this.previewTitle="",this.previewMeta="",this._previewSource="external",this._clearSelectedFileState(),this._clearNativeInputValue()}_dispatch(e,t={},o=!1){const a=new CustomEvent(e,{detail:t,bubbles:!0,composed:!0,cancelable:o});return this.dispatchEvent(a),a}_handleFiles(e){const t=e&&e[0]?e[0]:null;!t||!this._isAcceptedFile(t)||(this._setSelectedFileState(t),this._dispatch("file-selected",{file:t}),this._dispatch("change",{file:t}))}_onZoneClick(e){this.disabled||e.composedPath().some(a=>a instanceof HTMLElement&&a.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){const 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){e.preventDefault(),e.stopPropagation(),this._dispatch("clear-request",{},!0).defaultPrevented||this.clearPreviewState()}_isAcceptedFile(e){const t=this._resolvedAccept.trim();if(!t)return!0;const o=e.name.toLowerCase(),a=(e.type||"").toLowerCase(),l=t.split(",").map(n=>n.trim().toLowerCase()).filter(Boolean);return l.length?l.some(n=>n==="*/*"?!0:n.endsWith("/*")?a.startsWith(n.slice(0,-1)):n.startsWith(".")?o.endsWith(n):a===n):!0}_setSelectedFileState(e){const t=this._getPreviewKindForFile(e),o=this._getFileTypeLabel(e),a=this._formatFileSize(e.size);this._revokeObjectUrl(),this._selectedPreviewKind=t,this._selectedPreviewTitle=e.name||(t==="image"?"Uppladdad bild":"Uppladdad fil"),this._selectedPreviewMeta=[o,a].filter(Boolean).join(" • "),this._selectedPreviewAlt=t==="image"?e.name||"Uppladdad bild":"",this._selectedPreviewSrc="",t==="image"&&(this._objectUrl=URL.createObjectURL(e),this._selectedPreviewSrc=this._objectUrl),this._selectedFile=e,this._previewSource="internal",this._syncFormValue()}_clearSelectedFileState(){this._revokeObjectUrl(),this._selectedPreviewKind="empty",this._selectedPreviewSrc="",this._selectedPreviewAlt="",this._selectedPreviewTitle="",this._selectedPreviewMeta="",this._selectedFile=null,this._syncFormValue()}_clearNativeInputValue(){const e=this.renderRoot.querySelector('[data-role="native-input"]');if(e)try{e.value=""}catch{}}_revokeObjectUrl(){this._objectUrl&&(URL.revokeObjectURL(this._objectUrl),this._objectUrl="")}_getPreviewKindForFile(e){const t=(e.type||"").toLowerCase(),o=this._getFileExtension(e.name).toLowerCase();return t.startsWith("image/")||["png","jpg","jpeg","webp","svg","gif","bmp","avif"].includes(o)?"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;const 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==="image"&&this._resolvedPreviewSrc?p`<img class="scb-drop-zone__preview-image" src=${this._resolvedPreviewSrc} alt=${this._resolvedPreviewAlt} />`:this._hasPreview?p`
+import{a as u,n as o,r as c,i as b,x as p,t as f}from"../../vendor/vendor.js";import"../scb-button/scb-button.js";import"../../vendor/vendor-material.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(r,i,l){try{customElements.get(r)||t(r,i,l)}catch(d){var n=String(d||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var g=Object.defineProperty,w=Object.getOwnPropertyDescriptor,a=(e,t,r,i)=>{for(var l=i>1?void 0:i?w(t,r):t,n=e.length-1,d;n>=0;n--)(d=e[n])&&(l=(i?d(t,r,l):d(l))||l);return i&&l&&g(t,r,l),l};let s=class extends b{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.showPreview=!0,this.disabled=!1,this.previewSrc="",this.defaultImageSrc="",this.previewAlt="",this.previewTitle="",this.previewMeta="",this._isDragOver=!1,this._selectedPreviewKind="empty",this._selectedPreviewSrc="",this._selectedPreviewAlt="",this._selectedPreviewTitle="",this._selectedPreviewMeta="",this._selectedPreviewItems=[],this._dragDepth=0,this._previewSource="external",this._form=null,this._formDataHandler=null,"attachInternals"in this&&(this._internals=this.attachInternals())}get _resolvedAccept(){return this.accept.trim()||(this.type==="image"?"image/*,.png,.jpg,.jpeg,.webp,.svg,.gif,.bmp,.avif":"")}get _hasExternalPreview(){return!!this._resolvedExternalPreviewSrc||!!this.previewTitle.trim()||!!this.previewMeta.trim()}get _resolvedExternalPreviewSrc(){return this.previewSrc.trim()||this.defaultImageSrc.trim()}get _resolvedPreviewKind(){return this._previewSource==="external"&&this._hasExternalPreview?this._resolvedExternalPreviewSrc?"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._resolvedPreviewKind==="image"?"Byt bild":"Byt fil"}get _resolvedRemoveButtonLabel(){return this.removeButtonLabel?this.removeButtonLabel:this._resolvedPreviewKind==="multi"?"Ta bort filer":this._resolvedPreviewKind==="image"?"Ta bort bild":"Ta bort fil"}get _resolvedPreviewEyebrow(){return this.previewEyebrow?this.previewEyebrow:this._hasPreview?this._resolvedPreviewKind==="multi"?"Uppladdade filer":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._hasExternalPreview?this._resolvedExternalPreviewSrc:this._selectedPreviewSrc}get _resolvedPreviewAlt(){return this._previewSource==="external"&&this._hasExternalPreview?this.previewAlt:this._selectedPreviewAlt}get _resolvedPreviewTitle(){return this._previewSource==="external"&&this._hasExternalPreview?this.previewTitle||(this._resolvedPreviewKind==="image"?"Uppladdad bild":"Uppladdad fil"):this._selectedPreviewTitle}get _resolvedPreviewMeta(){return this._previewSource==="external"&&this._hasExternalPreview?this.previewMeta:this._selectedPreviewMeta}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"))&&this._syncFormValue()}connectedCallback(){super.connectedCallback(),this._syncFormValue(),this._form=this.closest("form"),this._form&&(this._formDataHandler=e=>{const t=e.formData;t&&this._appendFileToFormData(t)},this._form.addEventListener("formdata",this._formDataHandler))}formDisabledCallback(e){this.disabled=e}formResetCallback(){this.clearPreviewState()}_syncFormValue(){if(!this._internals)return;const e=this.name.trim();if(this.disabled||!e||!this._selectedPreviewItems.length){this._internals.setFormValue(null);return}if(this.multiple){const t=new FormData;this._selectedPreviewItems.forEach(r=>{t.append(e,r.file,r.file.name)}),this._internals.setFormValue(t);return}this._internals.setFormValue(this._selectedPreviewItems[0].file)}_appendFileToFormData(e){const t=this.name.trim();if(this.disabled||!t||!this._selectedPreviewItems.length)return;e.getAll(t).some(i=>i instanceof File)||this._selectedPreviewItems.forEach(i=>{e.append(t,i.file,i.file.name)})}openPicker(){if(this.disabled)return;const 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._previewSource="external"}clearPreviewState(){this.previewSrc="",this.previewAlt="",this.previewTitle="",this.previewMeta="",this._previewSource="external",this._clearSelectedFileState(),this._clearNativeInputValue()}_dispatch(e,t={},r=!1){const i=new CustomEvent(e,{detail:t,bubbles:!0,composed:!0,cancelable:r});return this.dispatchEvent(i),i}_handleFiles(e){const t=Array.from(e??[]).filter(l=>this._isAcceptedFile(l));if(!t.length)return;const r=this.multiple?t:[t[0]];this._setSelectedFilesState(r,this.multiple);const i=this._selectedPreviewItems.map(l=>l.file);this._dispatch("file-selected",{file:i[0],files:i,addedFiles:r}),this._dispatch("change",{file:i[0],files:i,addedFiles:r})}_onZoneClick(e){this.disabled||e.composedPath().some(i=>i instanceof HTMLElement&&i.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){const 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){e.preventDefault(),e.stopPropagation(),this._dispatch("clear-request",{},!0).defaultPrevented||this.clearPreviewState()}_onRemoveSelectedItemClick(e){if(e.preventDefault(),e.stopPropagation(),this.disabled)return;const r=e.currentTarget?.getAttribute("data-index")||"",i=Number.parseInt(r,10);Number.isInteger(i)&&this._removeSelectedItemAt(i)}_isAcceptedFile(e){const t=this._resolvedAccept.trim();if(!t)return!0;const r=e.name.toLowerCase(),i=(e.type||"").toLowerCase(),l=t.split(",").map(n=>n.trim().toLowerCase()).filter(Boolean);return l.length?l.some(n=>n==="*/*"?!0:n.endsWith("/*")?i.startsWith(n.slice(0,-1)):n.startsWith(".")?r.endsWith(n):i===n):!0}_setSelectedFilesState(e,t){const r=e.filter(Boolean);if(!r.length)return;const i=t?this._selectedPreviewItems:[],l=r.map(d=>{const h=this._getPreviewKindForFile(d),v=this._getFileTypeLabel(d),m=this._formatFileSize(d.size),_=h==="image"?URL.createObjectURL(d):"";return{file:d,kind:h,src:_,alt:h==="image"?d.name||"Uppladdad bild":"",title:d.name||(h==="image"?"Uppladdad bild":"Uppladdad fil"),meta:[v,m].filter(Boolean).join(" • ")}});t||this._revokeObjectUrl();const n=this.multiple?[...i,...l]:[l[0]];!this.multiple&&i.length&&this._revokeObjectUrlsForItems(i),this._applySelectedPreviewItems(n)}_clearSelectedFileState(){this._revokeObjectUrl(),this._applySelectedPreviewItems([])}_applySelectedPreviewItems(e){this._selectedPreviewItems=e;const 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){const r=e.reduce((i,l)=>i+(Number.isFinite(l.file.size)?l.file.size:0),0);this._selectedPreviewKind="multi",this._selectedPreviewTitle=`${e.length} filer valda`,this._selectedPreviewMeta=`Totalt ${this._formatFileSize(r)}`,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;const t=this._selectedPreviewItems[e];t.src&&URL.revokeObjectURL(t.src);const r=this._selectedPreviewItems.filter((i,l)=>l!==e);this._applySelectedPreviewItems(r),this._dispatch("file-removed",{file:t.file,files:r.map(i=>i.file),index:e}),this._dispatch("change",{file:r[0]?.file??null,files:r.map(i=>i.file),removedFile:t.file,removedIndex:e})}_renderSelectedImageCards(){return!this.multiple||this.type!=="image"||!this._selectedPreviewItems.some(t=>t.kind==="image"&&t.src)?null:p`
+      <div class="scb-drop-zone__selected-images" aria-label="Valda bilder">
+        ${this._selectedPreviewItems.map((t,r)=>t.kind!=="image"||!t.src?null:p`
+            <article class="scb-drop-zone__selected-image-card" aria-label=${`${t.title}, ${t.meta}`}>
+              <img class="scb-drop-zone__selected-image" src=${t.src} alt=${t.alt||t.title} />
+              <span class="scb-drop-zone__selected-image-title">${t.title}</span>
+              <span class="scb-drop-zone__selected-image-meta">${t.meta}</span>
+              <scb-button
+                class="scb-drop-zone__selected-image-action"
+                data-index=${String(r)}
+                variant="text"
+                size="small"
+                label="Ta bort"
+                aria-label=${`Ta bort ${t.title}`}
+                @click=${this._onRemoveSelectedItemClick}
+              ></scb-button>
+            </article>
+          `)}
+      </div>
+    `}_clearNativeInputValue(){const e=this.renderRoot.querySelector('[data-role="native-input"]');if(e)try{e.value=""}catch{}}_revokeObjectUrl(){this._revokeObjectUrlsForItems(this._selectedPreviewItems)}_revokeObjectUrlsForItems(e){e.forEach(t=>{t.src&&URL.revokeObjectURL(t.src)})}_getPreviewKindForFile(e){const t=(e.type||"").toLowerCase(),r=this._getFileExtension(e.name).toLowerCase();return t.startsWith("image/")||["png","jpg","jpeg","webp","svg","gif","bmp","avif"].includes(r)?"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;const 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(){if(this._resolvedPreviewKind==="multi"){if(this.multiple&&this.type==="image")return p`
+          <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>
+        `;const e=this._selectedPreviewItems;return p`
+        <ul class="scb-drop-zone__preview-list" aria-label="Valda filer">
+          ${e.map((t,r)=>p`
+            <li class="scb-drop-zone__preview-list-item" aria-label=${`${t.title}, ${t.meta}`}>
+              ${t.kind==="image"&&t.src?p`<img class="scb-drop-zone__preview-image scb-drop-zone__preview-image--thumb" src=${t.src} alt=${t.alt||t.title} />`:p`
+                    <span class="scb-drop-zone__preview-list-extension" aria-hidden="true">
+                      ${this._getFileExtensionLabel(t.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">${t.title}</span>
+                <span class="scb-drop-zone__preview-list-meta">${t.meta}</span>
+              </span>
+              <scb-button
+                class="scb-drop-zone__preview-list-item-action"
+                data-index=${String(r)}
+                variant="text"
+                size="small"
+                label="Ta bort"
+                aria-label=${`Ta bort ${t.title}`}
+                @click=${this._onRemoveSelectedItemClick}
+              ></scb-button>
+            </li>
+          `)}
+        </ul>
+      `}return this._resolvedPreviewKind==="image"&&this._resolvedPreviewSrc?p`<img class="scb-drop-zone__preview-image" src=${this._resolvedPreviewSrc} alt=${this._resolvedPreviewAlt} />`:this._hasPreview?p`
         <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>
@@ -20,7 +72,7 @@ import{a as h,n as s,r as c,i as v,x as p,t as _}from"../../vendor/vendor.js";(f
         <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">${t}</p>
+          <p class="scb-drop-zone__preview-meta" aria-live="polite">${t}</p>
 
           ${this._hasPreview?p`
                 <div class="scb-drop-zone__preview-actions">
@@ -45,50 +97,55 @@ import{a as h,n as s,r as c,i as v,x as p,t as _}from"../../vendor/vendor.js";(f
     `}render(){const e={"scb-drop-zone__surface":!0,"is-dragover":this._isDragOver};return p`
       <div class="scb-drop-zone">
         <div class="scb-drop-zone__layout ${this.showPreview?"scb-drop-zone__layout--with-preview":""}">
-          <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"
-              .name=${this.name}
-              .accept=${this._resolvedAccept}
-              ?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?p`<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 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"
+                .name=${this.name}
+                .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?p`<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>
-    `}};r.formAssociated=!0;r.styles=h`
+    `}};s.formAssociated=!0;s.styles=u`
     :host {
       display: block;
       width: 100%;
@@ -112,11 +169,21 @@ import{a as h,n as s,r as c,i as v,x as p,t as _}from"../../vendor/vendor.js";(f
       grid-template-columns: minmax(0, 7fr) minmax(280px, 3fr);
     }
 
+    :host([multiple][type='default']) .scb-drop-zone__layout--with-preview {
+      grid-template-columns: minmax(0, 6fr) minmax(340px, 4fr);
+    }
+
     .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%;
@@ -134,6 +201,11 @@ import{a as h,n as s,r as c,i as v,x as p,t as _}from"../../vendor/vendor.js";(f
       outline: none;
     }
 
+    :host([multiple][type='default']) .scb-drop-zone__surface {
+      min-height: var(--scb-drop-zone-multi-default-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 {
@@ -197,6 +269,10 @@ import{a as h,n as s,r as c,i as v,x as p,t as _}from"../../vendor/vendor.js";(f
       align-content: stretch;
     }
 
+    :host([multiple][type='default']) .scb-drop-zone__preview {
+      min-height: var(--scb-drop-zone-multi-default-preview-min-height, min(42vh, 420px));
+    }
+
     .scb-drop-zone__preview-media {
       width: 100%;
       height: 100%;
@@ -218,6 +294,16 @@ import{a as h,n as s,r as c,i as v,x as p,t as _}from"../../vendor/vendor.js";(f
       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;
@@ -282,6 +368,89 @@ import{a as h,n as s,r as c,i as v,x as p,t as _}from"../../vendor/vendor.js";(f
       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;
+    }
+
+    :host([multiple][type='default']) .scb-drop-zone__preview-list {
+      max-height: 260px;
+    }
+
+    .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;
@@ -320,9 +489,58 @@ import{a as h,n as s,r as c,i as v,x as p,t as _}from"../../vendor/vendor.js";(f
       padding-top: var(--spacing-5, 16px);
     }
 
+    .scb-drop-zone__selected-images {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, 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: 900px) {
       .scb-drop-zone__layout--with-preview {
         grid-template-columns: 1fr;
       }
     }
-  `;i([s({type:String,reflect:!0})],r.prototype,"type",2);i([s({type:String})],r.prototype,"name",2);i([s({type:String})],r.prototype,"label",2);i([s({type:String,attribute:"supporting-text"})],r.prototype,"supportingText",2);i([s({type:String,attribute:"meta-text"})],r.prototype,"metaText",2);i([s({type:String,attribute:"button-label"})],r.prototype,"buttonLabel",2);i([s({type:String,attribute:"replace-button-label"})],r.prototype,"replaceButtonLabel",2);i([s({type:String,attribute:"remove-button-label"})],r.prototype,"removeButtonLabel",2);i([s({type:String,attribute:"preview-eyebrow"})],r.prototype,"previewEyebrow",2);i([s({type:String,attribute:"empty-preview-title"})],r.prototype,"emptyPreviewTitle",2);i([s({type:String,attribute:"empty-preview-meta"})],r.prototype,"emptyPreviewMeta",2);i([s({type:String})],r.prototype,"accept",2);i([s({type:Boolean,attribute:"show-preview",reflect:!0})],r.prototype,"showPreview",2);i([s({type:Boolean,reflect:!0})],r.prototype,"disabled",2);i([s({type:String,attribute:!1})],r.prototype,"previewSrc",2);i([s({type:String,attribute:"default-image-src"})],r.prototype,"defaultImageSrc",2);i([s({type:String,attribute:!1})],r.prototype,"previewAlt",2);i([s({type:String,attribute:!1})],r.prototype,"previewTitle",2);i([s({type:String,attribute:!1})],r.prototype,"previewMeta",2);i([c()],r.prototype,"_isDragOver",2);i([c()],r.prototype,"_selectedPreviewKind",2);i([c()],r.prototype,"_selectedPreviewSrc",2);i([c()],r.prototype,"_selectedPreviewAlt",2);i([c()],r.prototype,"_selectedPreviewTitle",2);i([c()],r.prototype,"_selectedPreviewMeta",2);r=i([_("scb-drop-zone")],r);
+  `;a([o({type:String,reflect:!0})],s.prototype,"type",2);a([o({type:String})],s.prototype,"name",2);a([o({type:Boolean,reflect:!0})],s.prototype,"multiple",2);a([o({type:String})],s.prototype,"label",2);a([o({type:String,attribute:"supporting-text"})],s.prototype,"supportingText",2);a([o({type:String,attribute:"meta-text"})],s.prototype,"metaText",2);a([o({type:String,attribute:"button-label"})],s.prototype,"buttonLabel",2);a([o({type:String,attribute:"replace-button-label"})],s.prototype,"replaceButtonLabel",2);a([o({type:String,attribute:"remove-button-label"})],s.prototype,"removeButtonLabel",2);a([o({type:String,attribute:"preview-eyebrow"})],s.prototype,"previewEyebrow",2);a([o({type:String,attribute:"empty-preview-title"})],s.prototype,"emptyPreviewTitle",2);a([o({type:String,attribute:"empty-preview-meta"})],s.prototype,"emptyPreviewMeta",2);a([o({type:String})],s.prototype,"accept",2);a([o({type:Boolean,attribute:"show-preview",reflect:!0})],s.prototype,"showPreview",2);a([o({type:Boolean,reflect:!0})],s.prototype,"disabled",2);a([o({type:String,attribute:!1})],s.prototype,"previewSrc",2);a([o({type:String,attribute:"default-image-src"})],s.prototype,"defaultImageSrc",2);a([o({type:String,attribute:!1})],s.prototype,"previewAlt",2);a([o({type:String,attribute:!1})],s.prototype,"previewTitle",2);a([o({type:String,attribute:!1})],s.prototype,"previewMeta",2);a([c()],s.prototype,"_isDragOver",2);a([c()],s.prototype,"_selectedPreviewKind",2);a([c()],s.prototype,"_selectedPreviewSrc",2);a([c()],s.prototype,"_selectedPreviewAlt",2);a([c()],s.prototype,"_selectedPreviewTitle",2);a([c()],s.prototype,"_selectedPreviewMeta",2);a([c()],s.prototype,"_selectedPreviewItems",2);s=a([f("scb-drop-zone")],s);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.303",
+    "version":  "0.1.305",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -386,5 +386,5 @@
                                   },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "41FA71C13C42335E104A486D4C1E1C45CCEFB74C195CED1E57AC7706943D2670"
+    "buildHash":  "B2BD4FEBF4D08D675DCB573060FB3990016B7BABC7AB289D25B13A4762AFFE9A"
 }

package/scb-drop-zone/scb-drop-zone.d.ts

@@ -7,6 +7,8 @@ export declare class ScbDropZone extends LitElement {
     type: DropZoneType;
     /** Namn som används när komponenten skickas i formulär. */
     name: string;
+    /** Tillåter val av flera filer. */
+    multiple: boolean;
     /** Rubrik i drop-zonen. */
     label: string;
     /** Förklarande text i drop-zonen. */
@@ -47,10 +49,11 @@ export declare class ScbDropZone extends LitElement {
     private _selectedPreviewAlt;
     private _selectedPreviewTitle;
     private _selectedPreviewMeta;
+    private _selectedPreviewItems;
     private _dragDepth;
     private _previewSource;
-    private _objectUrl;
-    private _selectedFile;
+    private _form;
+    private _formDataHandler;
     constructor();
     static styles: import('lit').CSSResult;
     private get _resolvedAccept();
@@ -77,6 +80,7 @@ export declare class ScbDropZone extends LitElement {
     formDisabledCallback(disabled: boolean): void;
     formResetCallback(): void;
     private _syncFormValue;
+    private _appendFileToFormData;
     openPicker(): void;
     setPreviewState(state: {
         src?: string;
@@ -98,11 +102,16 @@ export declare class ScbDropZone extends LitElement {
     private _onChooseButtonClick;
     private _onReplaceButtonClick;
     private _onRemoveButtonClick;
+    private _onRemoveSelectedItemClick;
     private _isAcceptedFile;
-    private _setSelectedFileState;
+    private _setSelectedFilesState;
     private _clearSelectedFileState;
+    private _applySelectedPreviewItems;
+    private _removeSelectedItemAt;
+    private _renderSelectedImageCards;
     private _clearNativeInputValue;
     private _revokeObjectUrl;
+    private _revokeObjectUrlsForItems;
     private _getPreviewKindForFile;
     private _getFileExtension;
     private _getFileExtensionLabel;