udp-stencil-component-library 26.2.0-beta.3 → 26.2.0-beta.4

package/dist/cjs/udp-fluent-file-input.cjs.entry.js

@@ -515,11 +515,15 @@ const UdpFluentFileInput = class {
                 [`appearance-${this.appearance}`]: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, index.h("fluent-field", { key: '0d30008ec2920ff45d3b21a97ab5a6a2256edaa8', class: { 'no-message': noMessage } }, index.h("div", { key: 'c391b54029953b88602ccfb66c40dc62cc0599e4', slot: "input", class: "root" }, this.label && (index.h("fluent-label", { key: '07514be5f07b59c4e199d9d9b00ef6b6b6e6f882', class: "field-label", required: this.required, disabled: this.disabled }, this.label)), index.h("input", { key: 'f6139c37756bff0770d1055b333af06f22756b95', ref: el => (this.fileInputRef = el), type: "file", class: "hidden-input", name: this.name, accept: this.accept, multiple: allowMultiple, disabled: this.disabled || this.readonly, onChange: this.handleInputChange }), this.renderDropContainer({ hasFiles, showDropZone, allowMultiple })), index.h("udp-text", { key: '9c578f2ea50cce6d8fb36c81ed41a01f3d5c83bb', slot: "message", variant: "caption1", class: {
+            } }, index.h("fluent-field", { key: '0d30008ec2920ff45d3b21a97ab5a6a2256edaa8', class: { 'no-message': noMessage } }, index.h("div", { key: 'c391b54029953b88602ccfb66c40dc62cc0599e4', slot: "input", class: "root" }, this.label && (index.h("fluent-label", { key: '07514be5f07b59c4e199d9d9b00ef6b6b6e6f882', class: "field-label", required: this.required, disabled: this.disabled }, this.label)), index.h("input", { key: '8283e2fc359d3e423503501a25d5bf92c2693af2', ref: el => (this.fileInputRef = el), type: "file", class: "hidden-input", name: this.name, accept: this.accept, multiple: allowMultiple, disabled: this.disabled || this.readonly, onChange: this.handleInputChange,
+            // Containers like fluent-drawer's <dialog> call preventDefault on
+            // every bubbled click. The synthetic click from .click() must not
+            // reach them, or the canceled flag suppresses the file picker.
+            onClick: (e) => e.stopPropagation() }), this.renderDropContainer({ hasFiles, showDropZone, allowMultiple })), index.h("udp-text", { key: '6b4eafeb6fb3140cb9a079b9bdcded2b8ff0a736', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 'include-error-padding': this.includeErrorPadding,
-            } }, message)), this.view === 'gallery' && (index.h("dialog", { key: 'b58bbefc6b04fdf0318c7c781d3b6d660667b936', class: "lightbox", ref: el => (this.dialogRef = el), onClose: this.handleDialogClose, onClick: this.handleBackdropClick, onKeyDown: this.handleLightboxKeyDown }, this.lightboxIndex >= 0 && this.renderLightboxContent()))));
+            } }, message)), this.view === 'gallery' && (index.h("dialog", { key: '25ac70c8af88510e4d6b3c4f020c964468bffd0e', class: "lightbox", ref: el => (this.dialogRef = el), onClose: this.handleDialogClose, onClick: this.handleBackdropClick, onKeyDown: this.handleLightboxKeyDown }, this.lightboxIndex >= 0 && this.renderLightboxContent()))));
     }
     /**
      * Single dropzone container. Layout depends on state:

package/dist/collection/components/fluent-ui/file-input/udp-fluent-file-input.js

@@ -379,11 +379,15 @@ export class UdpFluentFileInput {
                 [`appearance-${this.appearance}`]: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("fluent-field", { key: '0d30008ec2920ff45d3b21a97ab5a6a2256edaa8', class: { 'no-message': noMessage } }, h("div", { key: 'c391b54029953b88602ccfb66c40dc62cc0599e4', slot: "input", class: "root" }, this.label && (h("fluent-label", { key: '07514be5f07b59c4e199d9d9b00ef6b6b6e6f882', class: "field-label", required: this.required, disabled: this.disabled }, this.label)), h("input", { key: 'f6139c37756bff0770d1055b333af06f22756b95', ref: el => (this.fileInputRef = el), type: "file", class: "hidden-input", name: this.name, accept: this.accept, multiple: allowMultiple, disabled: this.disabled || this.readonly, onChange: this.handleInputChange }), this.renderDropContainer({ hasFiles, showDropZone, allowMultiple })), h("udp-text", { key: '9c578f2ea50cce6d8fb36c81ed41a01f3d5c83bb', slot: "message", variant: "caption1", class: {
+            } }, h("fluent-field", { key: '0d30008ec2920ff45d3b21a97ab5a6a2256edaa8', class: { 'no-message': noMessage } }, h("div", { key: 'c391b54029953b88602ccfb66c40dc62cc0599e4', slot: "input", class: "root" }, this.label && (h("fluent-label", { key: '07514be5f07b59c4e199d9d9b00ef6b6b6e6f882', class: "field-label", required: this.required, disabled: this.disabled }, this.label)), h("input", { key: '8283e2fc359d3e423503501a25d5bf92c2693af2', ref: el => (this.fileInputRef = el), type: "file", class: "hidden-input", name: this.name, accept: this.accept, multiple: allowMultiple, disabled: this.disabled || this.readonly, onChange: this.handleInputChange,
+            // Containers like fluent-drawer's <dialog> call preventDefault on
+            // every bubbled click. The synthetic click from .click() must not
+            // reach them, or the canceled flag suppresses the file picker.
+            onClick: (e) => e.stopPropagation() }), this.renderDropContainer({ hasFiles, showDropZone, allowMultiple })), h("udp-text", { key: '6b4eafeb6fb3140cb9a079b9bdcded2b8ff0a736', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 'include-error-padding': this.includeErrorPadding,
-            } }, message)), this.view === 'gallery' && (h("dialog", { key: 'b58bbefc6b04fdf0318c7c781d3b6d660667b936', class: "lightbox", ref: el => (this.dialogRef = el), onClose: this.handleDialogClose, onClick: this.handleBackdropClick, onKeyDown: this.handleLightboxKeyDown }, this.lightboxIndex >= 0 && this.renderLightboxContent()))));
+            } }, message)), this.view === 'gallery' && (h("dialog", { key: '25ac70c8af88510e4d6b3c4f020c964468bffd0e', class: "lightbox", ref: el => (this.dialogRef = el), onClose: this.handleDialogClose, onClick: this.handleBackdropClick, onKeyDown: this.handleLightboxKeyDown }, this.lightboxIndex >= 0 && this.renderLightboxContent()))));
     }
     /**
      * Single dropzone container. Layout depends on state:

package/dist/components/udp-fluent-file-input.js

@@ -1,2 +1,2 @@
 import "../stencil-library/stencil-library.css";
-import{p as e,H as t,c as i,h as o,d as n,t as r}from"./index2.js";import"@fluentui/web-components/field.js";import"@fluentui/web-components/label.js";import{d as s}from"./udp-fluent-badge2.js";import{d as a}from"./udp-fluent-button2.js";import{d as l}from"./udp-fluent-icon2.js";import{d as c}from"./udp-fluent-icon-button2.js";import{d}from"./udp-spinner2.js";import{d as u}from"./udp-text2.js";function p(e){return"pending"===e.kind?e.file.name:e.name}function h(e){return(e||"").trim().toLowerCase()}function f(e){if("pending"===e.kind){const t=e.file;return`pending::${h(t.name)}::${t.size}::${t.lastModified}`}return"stored::"+e.driveFileId}function b(e){var t;const i=null===(t=e.dataTransfer)||void 0===t?void 0:t.types;return!!i&&Array.from(i).includes("Files")}function m(e,t,i,o,n,r){if(t.accept&&!function(e,t){if(!t)return!0;const i=t.split(",").map((e=>e.trim())).filter((e=>e.length>0));if(0===i.length)return!0;const o=(e.type||"").toLowerCase(),n=(e.name||"").toLowerCase();for(const e of i){const t=e.toLowerCase();if(t.startsWith(".")){if(n.endsWith(t))return!0}else if(t.endsWith("/*")){const e=t.slice(0,-1);if(o.startsWith(e))return!0}else if(o===t)return!0}return!1}(e,t.accept))return"mime";if(null!=t.maxFileSizeBytes&&e.size>t.maxFileSizeBytes)return"size";if(!r&&n<=0)return"maxFiles";const s=h(e.name);return!r&&o.has(s)||i.has(s)?"duplicate":null}function g(e){if(!e)return null;const t=new Date(e);return Number.isNaN(t.getTime())?null:new Intl.DateTimeFormat(void 0,{dateStyle:"medium",timeStyle:"short"}).format(t)}function x(e,t){const i=URL.createObjectURL(e),o=document.createElement("a");o.href=i,o.download=t,o.style.display="none",document.body.appendChild(o),o.click(),document.body.removeChild(o),setTimeout((()=>URL.revokeObjectURL(i)),1e3)}const v=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChanged=i(this,"valueChanged",7),this.fileRejected=i(this,"fileRejected",7),this.downloadRequested=i(this,"downloadRequested",7),this.inputBlur=i(this,"inputBlur",7),this.inputFocus=i(this,"inputFocus",7),this.view="list",this.value=[],this.includeErrorPadding=!0,this.required=!1,this.disabled=!1,this.readonly=!1,this.hideDragAndDrop=!1,this.hideButton=!1,this.displayUploadTime=!1,this.appearance="outline",this.disableLightbox=!1,this.items=[],this.isDragging=!1,this.fieldHasFocus=!1,this.lightboxIndex=-1,this.previews=new Map,this.lightboxTrigger=null,this.requestDownload=e=>{this.disabled||("pending"!==e.kind?"function"==typeof this.loadStoredFile?this.loadStoredFile(e).then((t=>{x(t instanceof File?t:new File([t],e.name,{type:t.type||"application/octet-stream"}),e.name)})).catch((()=>{})):this.downloadRequested.emit(e):x(e.file,e.file.name))},this.handleBrowseClick=e=>{var t;this.disabled||this.readonly||(e.preventDefault(),e.stopPropagation(),null===(t=this.fileInputRef)||void 0===t||t.click())},this.handleInputChange=e=>{const t=e.target;t.files&&t.files.length>0&&this.intakeFiles(t.files),t.value=""},this.handleDragEnter=e=>{this.disabled||this.readonly||this.hideDragAndDrop||b(e)&&(e.preventDefault(),e.stopPropagation(),this.isDragging=!0)},this.handleDragOver=e=>{this.disabled||this.readonly||this.hideDragAndDrop||b(e)&&(e.preventDefault(),e.stopPropagation(),e.dataTransfer&&(e.dataTransfer.dropEffect="copy"))},this.handleDragLeave=e=>{if(this.disabled||this.readonly||this.hideDragAndDrop)return;e.preventDefault(),e.stopPropagation();const t=e.currentTarget,i=e.relatedTarget;t&&i&&t.contains(i)||(this.isDragging=!1)},this.handleDrop=e=>{if(this.disabled||this.readonly||this.hideDragAndDrop)return;e.preventDefault(),e.stopPropagation(),this.isDragging=!1;const t=e.dataTransfer;t&&t.files&&t.files.length>0&&this.intakeFiles(t.files)},this.handleDropZoneKeyDown=e=>{var t;this.disabled||this.readonly||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),null===(t=this.fileInputRef)||void 0===t||t.click())},this.handleFieldFocusIn=()=>{this.fieldHasFocus||(this.fieldHasFocus=!0,this.inputFocus.emit())},this.handleFieldFocusOut=e=>{const t=e.relatedTarget,i=e.currentTarget;t&&i&&i.contains(t)||this.fieldHasFocus&&(this.fieldHasFocus=!1,this.inputBlur.emit())},this.handleLightboxKeyDown=e=>{"ArrowRight"===e.key?(e.preventDefault(),this.navigateLightbox(1)):"ArrowLeft"===e.key&&(e.preventDefault(),this.navigateLightbox(-1))},this.handleBackdropClick=e=>{e.target===e.currentTarget&&this.closeLightbox()},this.handleDialogClose=()=>{var e;this.lightboxIndex>=0&&(this.lightboxIndex=-1),null===(e=this.lightboxTrigger)||void 0===e||e.focus(),this.lightboxTrigger=null}}componentWillLoad(){this.items=Array.isArray(this.value)?this.value:[],"gallery"===this.view&&this.syncPreviews(this.items)}onValueChange(e){const t=Array.isArray(e)?e:[];t!==this.items&&(this.items=t,"gallery"===this.view&&this.syncPreviews(t))}onViewChange(e){"gallery"===e?this.syncPreviews(this.items):(this.clearPreviews(),this.lightboxIndex=-1)}disconnectedCallback(){this.clearPreviews()}clearPreviews(){this.previews.forEach((e=>{e.revokable&&e.url&&URL.revokeObjectURL(e.url)})),this.previews=new Map}syncPreviews(e){const t=new Set,i=new Map(this.previews);for(const o of e){const e=f(o);t.add(e),i.has(e)||i.set(e,this.createPreview(o))}for(const[e,o]of Array.from(i.entries()))t.has(e)||(o.revokable&&o.url&&URL.revokeObjectURL(o.url),i.delete(e));this.previews=i}createPreview(e){if("pending"===e.kind)return{url:URL.createObjectURL(e.file),loading:!1,revokable:!0,status:"ready"};if("function"!=typeof this.loadStoredFile)return{url:null,loading:!1,revokable:!1,status:"unavailable"};const t={url:null,loading:!0,revokable:!1,status:"loading"},i=f(e);return this.loadStoredFile(e).then((e=>{const o=e instanceof Blob?e:new Blob([e]),n=URL.createObjectURL(o);this.previews.get(i)===t?this.previews=new Map(this.previews).set(i,{url:n,loading:!1,revokable:!0,status:"ready"}):URL.revokeObjectURL(n)})).catch((()=>{this.previews.get(i)===t&&(this.previews=new Map(this.previews).set(i,Object.assign(Object.assign({},t),{loading:!1,status:"error"})))})),t}intakeFiles(e){if(this.disabled||this.readonly)return;const t=function(e,t,i){const o=Array.from(e),n=[],r=[],s=new Set,a=new Set(t.map((e=>h(p(e)))));let l=null==i.maxFiles?1/0:Math.max(0,i.maxFiles-t.length);const c=1===i.maxFiles,d=(new Date).toISOString();for(const e of o){const t=m(e,i,s,a,l,c);t?r.push({file:e,reason:t}):(s.add(h(e.name)),n.push({kind:"pending",file:e,uploadedAt:d}),l-=1)}return 0===n.length?{accepted:n,rejected:r,next:null}:{accepted:n,rejected:r,next:c?n:[...t,...n]}}(e,this.items,{accept:this.accept,maxFiles:this.maxFiles,maxFileSizeBytes:this.maxFileSizeBytes});t.rejected.forEach((e=>this.fileRejected.emit(e))),t.next&&this.commit(t.next)}commit(e){this.items=e,"gallery"===this.view&&this.syncPreviews(e),this.valueChanged.emit(e)}removeAt(e){if(this.disabled||this.readonly)return;if(e<0||e>=this.items.length)return;const t=this.items.slice();t.splice(e,1),this.commit(t)}openLightbox(e,t){this.disableLightbox||e<0||e>=this.items.length||(this.lightboxIndex=e,this.lightboxTrigger=null!=t?t:null,requestAnimationFrame((()=>{this.dialogRef&&!this.dialogRef.open&&this.dialogRef.showModal()})))}closeLightbox(){var e;this.lightboxIndex<0||(this.lightboxIndex=-1,(null===(e=this.dialogRef)||void 0===e?void 0:e.open)&&this.dialogRef.close())}navigateLightbox(e){if(this.lightboxIndex<0)return;const t=this.items.length;0!==t&&(this.lightboxIndex=(this.lightboxIndex+e+t)%t)}render(){const e=!!this.error,t=this.error||this.hint,i=!t&&!this.includeErrorPadding,r=1!==this.maxFiles,s=this.items.length>0,a=!(this.readonly||null!=this.maxFiles&&1!==this.maxFiles&&this.items.length>=this.maxFiles);return o(n,{key:"911a471d97b84b87438f82a619e2be6caf08d8bc",class:{"has-error":e,["view-"+this.view]:!0,["appearance-"+this.appearance]:!0,disabled:this.disabled,readonly:this.readonly}},o("fluent-field",{key:"0d30008ec2920ff45d3b21a97ab5a6a2256edaa8",class:{"no-message":i}},o("div",{key:"c391b54029953b88602ccfb66c40dc62cc0599e4",slot:"input",class:"root"},this.label&&o("fluent-label",{key:"07514be5f07b59c4e199d9d9b00ef6b6b6e6f882",class:"field-label",required:this.required,disabled:this.disabled},this.label),o("input",{key:"f6139c37756bff0770d1055b333af06f22756b95",ref:e=>this.fileInputRef=e,type:"file",class:"hidden-input",name:this.name,accept:this.accept,multiple:r,disabled:this.disabled||this.readonly,onChange:this.handleInputChange}),this.renderDropContainer({hasFiles:s,showDropZone:a,allowMultiple:r})),o("udp-text",{key:"9c578f2ea50cce6d8fb36c81ed41a01f3d5c83bb",slot:"message",variant:"caption1",class:{message:!0,error:e,"include-error-padding":this.includeErrorPadding}},t)),"gallery"===this.view&&o("dialog",{key:"b58bbefc6b04fdf0318c7c781d3b6d660667b936",class:"lightbox",ref:e=>this.dialogRef=e,onClose:this.handleDialogClose,onClick:this.handleBackdropClick,onKeyDown:this.handleLightboxKeyDown},this.lightboxIndex>=0&&this.renderLightboxContent()))}renderDropContainer(e){const{hasFiles:t,showDropZone:i,allowMultiple:n}=e,r=!this.hideDragAndDrop&&!this.readonly;return o("div",Object.assign({class:{"drop-container":!0,dragging:this.isDragging,"has-files":t,"no-dnd":!r,readonly:this.readonly},onDragEnter:this.handleDragEnter,onDragOver:this.handleDragOver,onDragLeave:this.handleDragLeave,onDrop:this.handleDrop,onFocusin:this.handleFieldFocusIn,onFocusout:this.handleFieldFocusOut},!r||t||this.readonly?{}:{role:"button",tabIndex:0,onKeyDown:this.handleDropZoneKeyDown}),t&&"list"===this.view&&this.renderFileList(),t&&"gallery"===this.view&&this.renderGallery(),!t&&this.readonly&&this.renderEmptyReadonly(n),i&&!t&&this.renderEmptyPrompt(n),i&&t&&this.renderCompactPrompt(n))}renderEmptyPrompt(e){const t=!this.hideDragAndDrop,i=!this.hideButton,n=this.itemNoun(e),r=this.dragAndDropMessage||`Drag and drop ${n} here`,s=this.browseFileMessage||"Browse "+n,a="gallery"===this.view?"image":"cloud-upload";return o("div",{class:"empty-prompt"},o("slot",{name:"start"}),t&&o("div",{class:"empty-prompt-content"},o("udp-fluent-icon",{name:a,size:"sm",class:"empty-prompt-icon"}),o("span",{class:"empty-prompt-text"},r)),i&&o("udp-fluent-button",{class:"empty-prompt-button",appearance:"outline",size:"small",disabled:this.disabled,onClick:this.handleBrowseClick},s),o("slot",{name:"end"}))}renderEmptyReadonly(e){const t=this.itemNoun(e);return o("div",{class:"empty-readonly"},o("span",{class:"empty-readonly-text"},"No ",t," attached"))}renderCompactPrompt(e){const t=!this.hideDragAndDrop,i=!this.hideButton,n="Drag and drop more "+this.itemNoun(e),r=e?"Browse":"Browse "+this.singularNoun();return o("div",{class:"compact-prompt"},t&&o("div",{class:"compact-prompt-text"},o("udp-fluent-icon",{name:"gallery"===this.view?"image":"cloud-upload",size:"sm",class:"compact-prompt-icon"}),o("span",null,n)),i&&o("udp-fluent-button",{class:"compact-prompt-button",appearance:"outline",size:"small",disabled:this.disabled,onClick:this.handleBrowseClick},r))}itemNoun(e){return"gallery"===this.view?e?"images":"an image":e?"files":"a file"}singularNoun(){return"gallery"===this.view?"image":"file"}renderFileList(){return o("ul",{class:"file-list",role:"list"},this.items.map(((e,t)=>this.renderFileRow(e,t))))}renderFileRow(e,t){const i=p(e),n="pending"===e.kind?function(e){if(!Number.isFinite(e)||e<0)return"";if(e<1024)return e+" B";let t=e/1024,i=0;for(;t>=1024&&i<3;)t/=1024,i+=1;return`${t.toFixed(t>=10||0===i?0:1)} ${["KB","MB","GB","TB"][i]}`}(e.file.size):null,r=this.displayUploadTime?g(e.uploadedAt):null,s=[i,n,r].filter(Boolean);return o("li",{class:"file-chip",key:`${e.kind}:${i}:${t}`,title:s.join(" · ")},o("udp-fluent-icon",{name:"document",size:"sm",class:"file-chip-icon"}),o("button",{type:"button",class:"file-chip-name",disabled:this.disabled,"aria-label":"Download "+i,onClick:()=>this.requestDownload(e)},o("span",{class:"file-chip-name-text"},i)),(n||r||"stored"===e.kind)&&o("span",{class:"file-chip-detail"},n&&o("span",null,n),r&&o("span",null,r),"stored"===e.kind&&o("udp-fluent-badge",{class:"file-chip-saved-badge",appearance:"filled",color:"subtle",size:"small"},"saved")),!this.readonly&&o("udp-fluent-icon-button",{class:"file-chip-remove",iconName:"dismiss",appearance:"subtle",size:"small",ariaLabel:"Remove "+i,disabled:this.disabled,onClick:()=>this.removeAt(t)}))}renderGallery(){return o("ul",{class:"gallery",role:"list"},this.items.map(((e,t)=>this.renderThumb(e,t))))}renderThumb(e,t){const i=f(e),n=this.previews.get(i),r=p(e),s=this.displayUploadTime?g(e.uploadedAt):null,a=!this.disableLightbox&&!!(null==n?void 0:n.url);return o("li",{class:"thumb",key:i},o("div",{class:"thumb-frame"},o("button",{type:"button",class:{"thumb-button":!0,clickable:a},onClick:e=>a&&this.openLightbox(t,e.currentTarget),disabled:!a,title:r},(null==n?void 0:n.url)?o("img",{class:"thumb-img",src:n.url,alt:r}):(null==n?void 0:n.loading)?o("udp-spinner",{size:"small"}):o("udp-fluent-icon",{name:"error"===(null==n?void 0:n.status)?"warning":"image",size:"md",class:"thumb-placeholder-icon"}),"stored"===e.kind&&o("udp-fluent-badge",{class:"thumb-saved-badge",appearance:"filled",color:"brand",size:"small"},"saved")),!this.readonly&&o("udp-fluent-icon-button",{class:"thumb-remove",iconName:"dismiss",appearance:"subtle",size:"small",ariaLabel:"Remove "+r,disabled:this.disabled,onClick:()=>this.removeAt(t)})),o("div",{class:"thumb-meta"},o("button",{type:"button",class:"thumb-name",disabled:this.disabled,"aria-label":"Download "+r,onClick:()=>this.requestDownload(e),title:"Download "+r},o("span",{class:"thumb-name-text"},r)),s&&o("span",{class:"thumb-stamp"},s)))}renderLightboxContent(){const e=this.items[this.lightboxIndex];if(!e)return null;const t=this.previews.get(f(e)),i=p(e),n=this.items.length,r=n>1;return o("div",{class:"lightbox-content","aria-label":i},o("div",{class:"lightbox-header"},o("span",{class:"lightbox-name",title:i},i),o("udp-fluent-icon-button",{class:"lightbox-close",iconName:"dismiss",appearance:"subtle",size:"large",ariaLabel:"Close preview",onClick:()=>this.closeLightbox()})),o("div",{class:"lightbox-stage"},r&&o("udp-fluent-icon-button",{class:"lightbox-nav lightbox-prev",iconName:"chevron-left",appearance:"subtle",size:"medium",ariaLabel:"Previous image",onClick:()=>this.navigateLightbox(-1)}),(null==t?void 0:t.url)?o("img",{class:"lightbox-image",src:t.url,alt:i}):(null==t?void 0:t.loading)?o("udp-spinner",{size:"medium"}):o("span",{class:"lightbox-error"},"No preview available"),r&&o("udp-fluent-icon-button",{class:"lightbox-nav lightbox-next",iconName:"chevron-right",appearance:"subtle",size:"medium",ariaLabel:"Next image",onClick:()=>this.navigateLightbox(1)})),r&&o("div",{class:"lightbox-counter"},this.lightboxIndex+1," / ",n))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],view:[{onViewChange:0}]}}static get style(){return":host{display:block;width:100%;font-family:var(--fontFamilyBase)}fluent-field{width:100%}fluent-field.no-message::part(message){display:none}.root{display:flex;flex-direction:column;gap:var(--spacingVerticalS, 8px);width:100%}.field-label{display:block;margin-bottom:var(--spacingVerticalXXS, 2px)}.hidden-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.drop-container{border:2px dashed var(--colorNeutralStroke1, #d1d1d1);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorNeutralBackground1, #ffffff);transition:background-color 100ms ease,     border-color 100ms ease;outline:none;padding:var(--spacingVerticalM, 12px);display:flex;flex-direction:column;justify-content:center;gap:var(--spacingVerticalM, 12px);min-height:144px;box-sizing:border-box}.drop-container.has-files{justify-content:space-between;border-color:var(--colorNeutralStroke2, #e0e0e0);cursor:default}:host(.appearance-filled) .drop-container{background-color:var(--colorNeutralBackground2, #fafafa)}.drop-container[role='button']{cursor:pointer}.drop-container[role='button']:focus-visible{outline:2px solid var(--colorStrokeFocus2, #000000);outline-offset:2px}.drop-container.dragging{background-color:var(--colorNeutralBackground1Hover, #f5f5f5);border-color:var(--colorNeutralStrokeAccessible, #616161)}.drop-container.no-dnd:not(.readonly){border-style:solid}.drop-container.readonly{cursor:default;border-style:solid}.drop-container.has-files.dragging{border-style:dashed;background-color:var(--colorNeutralBackground1Hover, #f5f5f5)}.empty-prompt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacingVerticalXS, 4px);pointer-events:none;}.empty-prompt-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacingVerticalXXS, 2px);color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px)}.empty-prompt-icon{color:inherit}.empty-prompt-text{color:inherit;text-align:center}.empty-prompt-button{pointer-events:auto}.empty-readonly{display:flex;align-items:center;justify-content:center}.empty-readonly-text{color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px);font-style:italic}.compact-prompt{display:flex;align-items:center;justify-content:space-between;gap:var(--spacingHorizontalM, 12px);padding:var(--spacingVerticalM, 12px) 0 0 0;border-top:1px dashed var(--colorNeutralStroke3, #ebebeb);pointer-events:none}.compact-prompt-text{display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS, 4px);color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px);flex:1 1 auto;min-width:0}.compact-prompt-icon{color:inherit;flex:0 0 auto}.compact-prompt-button{pointer-events:auto;flex:0 0 auto}.file-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:var(--spacingHorizontalXS, 4px) var(--spacingHorizontalS, 8px);max-height:80px;overflow-y:auto;scrollbar-gutter:stable}.file-chip{display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS, 4px);padding:4px var(--spacingHorizontalXS, 4px) 4px var(--spacingHorizontalS, 8px);border:1px solid var(--colorNeutralStroke2, #e0e0e0);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorNeutralBackground1, #ffffff);max-width:280px;min-width:0;flex:0 0 auto;height:32px;box-sizing:border-box}.file-chip-icon{flex:0 0 auto;color:var(--colorNeutralForeground3, #707070)}.file-chip-name{background:none;border:none;padding:0;font:inherit;color:var(--colorBrandForeground1, #0f6cbd);text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left;min-width:0;flex:1 1 auto;font-size:var(--fontSizeBase200, 12px);line-height:1}.file-chip-name:disabled{color:var(--colorNeutralForegroundDisabled, #bdbdbd);cursor:not-allowed}.file-chip-name-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-chip-detail{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS, 4px);color:var(--colorNeutralForeground3, #707070);font-size:11px;line-height:1}.file-chip-remove{flex:0 0 auto}.gallery{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalM, 12px)}.thumb{display:flex;flex-direction:column;gap:var(--spacingVerticalXS, 4px)}.thumb-frame{position:relative;width:80px;height:80px}.thumb-button{position:relative;display:flex;align-items:center;justify-content:center;width:80px;height:80px;padding:0;margin:0;border:1px solid var(--colorNeutralStroke2, #e0e0e0);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorNeutralBackground1, #ffffff);overflow:hidden;cursor:default;transition:border-color 100ms ease, transform 100ms ease}.thumb-button.clickable{cursor:zoom-in}.thumb-button.clickable:hover{border-color:var(--colorBrandStroke1, #0f6cbd);transform:scale(1.02)}.thumb-button:focus-visible{outline:2px solid var(--colorStrokeFocus2, #000000);outline-offset:2px}.thumb-button:disabled{cursor:not-allowed;opacity:0.7}.thumb-img{width:100%;height:100%;object-fit:cover;display:block}.thumb-placeholder-icon{color:var(--colorNeutralForeground3, #707070)}.thumb-saved-badge{position:absolute;bottom:4px;left:4px}.thumb-meta{display:flex;flex-direction:column;gap:2px;max-width:100%}.thumb-name{background:none;border:none;padding:0;font:inherit;color:var(--colorBrandForeground1, #0f6cbd);text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left;display:block;max-width:100%;overflow:hidden}.thumb-name:disabled{color:var(--colorNeutralForegroundDisabled, #bdbdbd);cursor:not-allowed}.thumb-name-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fontSizeBase200, 12px)}.thumb-stamp{font-size:10px;color:var(--colorNeutralForeground3, #707070)}.thumb-remove{position:absolute;top:4px;right:4px}:host(.disabled){opacity:0.6}:host(.disabled) .drop-container{cursor:not-allowed}.message{color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px)}.message.include-error-padding{min-height:var(--lineHeightBase200, 16px);display:inline-block}.message.error{color:var(--colorPaletteRedForeground1, #b10e1c)}:host(.has-error) .drop-container{border-color:var(--colorPaletteRedBorder2, #b10e1c)}.lightbox{width:100vw;height:100vh;max-width:100vw;max-height:100vh;margin:0;padding:var(--spacingVerticalL, 16px);border:none;background:transparent;box-sizing:border-box;align-items:center;justify-content:center}.lightbox[open]{display:flex;flex-direction:column;animation:lightbox-fade-in 100ms ease}.lightbox::backdrop{background-color:rgba(0, 0, 0, 0.85);animation:lightbox-fade-in 100ms ease}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}.lightbox-content{display:flex;flex-direction:column;width:100%;height:100%;max-width:1200px;gap:var(--spacingVerticalS, 8px)}.lightbox-header{display:flex;align-items:center;justify-content:space-between;gap:var(--spacingHorizontalM, 12px);color:#ffffff;padding:0 var(--spacingHorizontalS, 8px)}.lightbox-name{font-size:var(--fontSizeBase300, 14px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}.lightbox-stage{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0}.lightbox-image{max-width:100%;max-height:100%;object-fit:contain}.lightbox-error{color:#ffffff;font-style:italic}.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%)}.lightbox-prev{left:var(--spacingHorizontalS, 8px)}.lightbox-next{right:var(--spacingHorizontalS, 8px)}.lightbox-nav,.lightbox-close{--colorNeutralForeground2:#ffffff;--colorNeutralForeground2Hover:#ffffff;--colorNeutralForeground2Pressed:#ffffff;--colorNeutralForeground2BrandHover:#ffffff;--colorNeutralForeground2BrandPressed:#ffffff;--colorSubtleBackgroundHover:rgba(255, 255, 255, 0.12);--colorSubtleBackgroundPressed:rgba(255, 255, 255, 0.18);--colorSubtleBackgroundSelected:rgba(255, 255, 255, 0.18)}.lightbox-counter{text-align:center;color:rgba(255, 255, 255, 0.8);font-size:var(--fontSizeBase200, 12px);padding:4px 0}"}},[257,"udp-fluent-file-input",{view:[1],value:[16],name:[1],label:[1],hint:[1],error:[1],includeErrorPadding:[4,"include-error-padding"],required:[4],disabled:[4],readonly:[4],accept:[1],maxFiles:[2,"max-files"],maxFileSizeBytes:[2,"max-file-size-bytes"],hideDragAndDrop:[4,"hide-drag-and-drop"],hideButton:[4,"hide-button"],displayUploadTime:[4,"display-upload-time"],dragAndDropMessage:[1,"drag-and-drop-message"],browseFileMessage:[1,"browse-file-message"],appearance:[1],disableLightbox:[4,"disable-lightbox"],loadStoredFile:[16],items:[32],isDragging:[32],lightboxIndex:[32],previews:[32]},void 0,{value:[{onValueChange:0}],view:[{onViewChange:0}]}]),y=v,w=function(){"undefined"!=typeof customElements&&["udp-fluent-file-input","udp-fluent-badge","udp-fluent-button","udp-fluent-icon","udp-fluent-icon-button","udp-spinner","udp-text"].forEach((e=>{switch(e){case"udp-fluent-file-input":customElements.get(r(e))||customElements.define(r(e),v);break;case"udp-fluent-badge":customElements.get(r(e))||s();break;case"udp-fluent-button":customElements.get(r(e))||a();break;case"udp-fluent-icon":customElements.get(r(e))||l();break;case"udp-fluent-icon-button":customElements.get(r(e))||c();break;case"udp-spinner":customElements.get(r(e))||d();break;case"udp-text":customElements.get(r(e))||u()}}))};export{y as UdpFluentFileInput,w as defineCustomElement}
+import{p as e,H as t,c as i,h as o,d as n,t as r}from"./index2.js";import"@fluentui/web-components/field.js";import"@fluentui/web-components/label.js";import{d as s}from"./udp-fluent-badge2.js";import{d as a}from"./udp-fluent-button2.js";import{d as l}from"./udp-fluent-icon2.js";import{d as c}from"./udp-fluent-icon-button2.js";import{d}from"./udp-spinner2.js";import{d as u}from"./udp-text2.js";function p(e){return"pending"===e.kind?e.file.name:e.name}function h(e){return(e||"").trim().toLowerCase()}function f(e){if("pending"===e.kind){const t=e.file;return`pending::${h(t.name)}::${t.size}::${t.lastModified}`}return"stored::"+e.driveFileId}function b(e){var t;const i=null===(t=e.dataTransfer)||void 0===t?void 0:t.types;return!!i&&Array.from(i).includes("Files")}function m(e,t,i,o,n,r){if(t.accept&&!function(e,t){if(!t)return!0;const i=t.split(",").map((e=>e.trim())).filter((e=>e.length>0));if(0===i.length)return!0;const o=(e.type||"").toLowerCase(),n=(e.name||"").toLowerCase();for(const e of i){const t=e.toLowerCase();if(t.startsWith(".")){if(n.endsWith(t))return!0}else if(t.endsWith("/*")){const e=t.slice(0,-1);if(o.startsWith(e))return!0}else if(o===t)return!0}return!1}(e,t.accept))return"mime";if(null!=t.maxFileSizeBytes&&e.size>t.maxFileSizeBytes)return"size";if(!r&&n<=0)return"maxFiles";const s=h(e.name);return!r&&o.has(s)||i.has(s)?"duplicate":null}function g(e){if(!e)return null;const t=new Date(e);return Number.isNaN(t.getTime())?null:new Intl.DateTimeFormat(void 0,{dateStyle:"medium",timeStyle:"short"}).format(t)}function x(e,t){const i=URL.createObjectURL(e),o=document.createElement("a");o.href=i,o.download=t,o.style.display="none",document.body.appendChild(o),o.click(),document.body.removeChild(o),setTimeout((()=>URL.revokeObjectURL(i)),1e3)}const v=e(class extends t{constructor(e){super(),!1!==e&&this.__registerHost(),this.__attachShadow(),this.valueChanged=i(this,"valueChanged",7),this.fileRejected=i(this,"fileRejected",7),this.downloadRequested=i(this,"downloadRequested",7),this.inputBlur=i(this,"inputBlur",7),this.inputFocus=i(this,"inputFocus",7),this.view="list",this.value=[],this.includeErrorPadding=!0,this.required=!1,this.disabled=!1,this.readonly=!1,this.hideDragAndDrop=!1,this.hideButton=!1,this.displayUploadTime=!1,this.appearance="outline",this.disableLightbox=!1,this.items=[],this.isDragging=!1,this.fieldHasFocus=!1,this.lightboxIndex=-1,this.previews=new Map,this.lightboxTrigger=null,this.requestDownload=e=>{this.disabled||("pending"!==e.kind?"function"==typeof this.loadStoredFile?this.loadStoredFile(e).then((t=>{x(t instanceof File?t:new File([t],e.name,{type:t.type||"application/octet-stream"}),e.name)})).catch((()=>{})):this.downloadRequested.emit(e):x(e.file,e.file.name))},this.handleBrowseClick=e=>{var t;this.disabled||this.readonly||(e.preventDefault(),e.stopPropagation(),null===(t=this.fileInputRef)||void 0===t||t.click())},this.handleInputChange=e=>{const t=e.target;t.files&&t.files.length>0&&this.intakeFiles(t.files),t.value=""},this.handleDragEnter=e=>{this.disabled||this.readonly||this.hideDragAndDrop||b(e)&&(e.preventDefault(),e.stopPropagation(),this.isDragging=!0)},this.handleDragOver=e=>{this.disabled||this.readonly||this.hideDragAndDrop||b(e)&&(e.preventDefault(),e.stopPropagation(),e.dataTransfer&&(e.dataTransfer.dropEffect="copy"))},this.handleDragLeave=e=>{if(this.disabled||this.readonly||this.hideDragAndDrop)return;e.preventDefault(),e.stopPropagation();const t=e.currentTarget,i=e.relatedTarget;t&&i&&t.contains(i)||(this.isDragging=!1)},this.handleDrop=e=>{if(this.disabled||this.readonly||this.hideDragAndDrop)return;e.preventDefault(),e.stopPropagation(),this.isDragging=!1;const t=e.dataTransfer;t&&t.files&&t.files.length>0&&this.intakeFiles(t.files)},this.handleDropZoneKeyDown=e=>{var t;this.disabled||this.readonly||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),null===(t=this.fileInputRef)||void 0===t||t.click())},this.handleFieldFocusIn=()=>{this.fieldHasFocus||(this.fieldHasFocus=!0,this.inputFocus.emit())},this.handleFieldFocusOut=e=>{const t=e.relatedTarget,i=e.currentTarget;t&&i&&i.contains(t)||this.fieldHasFocus&&(this.fieldHasFocus=!1,this.inputBlur.emit())},this.handleLightboxKeyDown=e=>{"ArrowRight"===e.key?(e.preventDefault(),this.navigateLightbox(1)):"ArrowLeft"===e.key&&(e.preventDefault(),this.navigateLightbox(-1))},this.handleBackdropClick=e=>{e.target===e.currentTarget&&this.closeLightbox()},this.handleDialogClose=()=>{var e;this.lightboxIndex>=0&&(this.lightboxIndex=-1),null===(e=this.lightboxTrigger)||void 0===e||e.focus(),this.lightboxTrigger=null}}componentWillLoad(){this.items=Array.isArray(this.value)?this.value:[],"gallery"===this.view&&this.syncPreviews(this.items)}onValueChange(e){const t=Array.isArray(e)?e:[];t!==this.items&&(this.items=t,"gallery"===this.view&&this.syncPreviews(t))}onViewChange(e){"gallery"===e?this.syncPreviews(this.items):(this.clearPreviews(),this.lightboxIndex=-1)}disconnectedCallback(){this.clearPreviews()}clearPreviews(){this.previews.forEach((e=>{e.revokable&&e.url&&URL.revokeObjectURL(e.url)})),this.previews=new Map}syncPreviews(e){const t=new Set,i=new Map(this.previews);for(const o of e){const e=f(o);t.add(e),i.has(e)||i.set(e,this.createPreview(o))}for(const[e,o]of Array.from(i.entries()))t.has(e)||(o.revokable&&o.url&&URL.revokeObjectURL(o.url),i.delete(e));this.previews=i}createPreview(e){if("pending"===e.kind)return{url:URL.createObjectURL(e.file),loading:!1,revokable:!0,status:"ready"};if("function"!=typeof this.loadStoredFile)return{url:null,loading:!1,revokable:!1,status:"unavailable"};const t={url:null,loading:!0,revokable:!1,status:"loading"},i=f(e);return this.loadStoredFile(e).then((e=>{const o=e instanceof Blob?e:new Blob([e]),n=URL.createObjectURL(o);this.previews.get(i)===t?this.previews=new Map(this.previews).set(i,{url:n,loading:!1,revokable:!0,status:"ready"}):URL.revokeObjectURL(n)})).catch((()=>{this.previews.get(i)===t&&(this.previews=new Map(this.previews).set(i,Object.assign(Object.assign({},t),{loading:!1,status:"error"})))})),t}intakeFiles(e){if(this.disabled||this.readonly)return;const t=function(e,t,i){const o=Array.from(e),n=[],r=[],s=new Set,a=new Set(t.map((e=>h(p(e)))));let l=null==i.maxFiles?1/0:Math.max(0,i.maxFiles-t.length);const c=1===i.maxFiles,d=(new Date).toISOString();for(const e of o){const t=m(e,i,s,a,l,c);t?r.push({file:e,reason:t}):(s.add(h(e.name)),n.push({kind:"pending",file:e,uploadedAt:d}),l-=1)}return 0===n.length?{accepted:n,rejected:r,next:null}:{accepted:n,rejected:r,next:c?n:[...t,...n]}}(e,this.items,{accept:this.accept,maxFiles:this.maxFiles,maxFileSizeBytes:this.maxFileSizeBytes});t.rejected.forEach((e=>this.fileRejected.emit(e))),t.next&&this.commit(t.next)}commit(e){this.items=e,"gallery"===this.view&&this.syncPreviews(e),this.valueChanged.emit(e)}removeAt(e){if(this.disabled||this.readonly)return;if(e<0||e>=this.items.length)return;const t=this.items.slice();t.splice(e,1),this.commit(t)}openLightbox(e,t){this.disableLightbox||e<0||e>=this.items.length||(this.lightboxIndex=e,this.lightboxTrigger=null!=t?t:null,requestAnimationFrame((()=>{this.dialogRef&&!this.dialogRef.open&&this.dialogRef.showModal()})))}closeLightbox(){var e;this.lightboxIndex<0||(this.lightboxIndex=-1,(null===(e=this.dialogRef)||void 0===e?void 0:e.open)&&this.dialogRef.close())}navigateLightbox(e){if(this.lightboxIndex<0)return;const t=this.items.length;0!==t&&(this.lightboxIndex=(this.lightboxIndex+e+t)%t)}render(){const e=!!this.error,t=this.error||this.hint,i=!t&&!this.includeErrorPadding,r=1!==this.maxFiles,s=this.items.length>0,a=!(this.readonly||null!=this.maxFiles&&1!==this.maxFiles&&this.items.length>=this.maxFiles);return o(n,{key:"911a471d97b84b87438f82a619e2be6caf08d8bc",class:{"has-error":e,["view-"+this.view]:!0,["appearance-"+this.appearance]:!0,disabled:this.disabled,readonly:this.readonly}},o("fluent-field",{key:"0d30008ec2920ff45d3b21a97ab5a6a2256edaa8",class:{"no-message":i}},o("div",{key:"c391b54029953b88602ccfb66c40dc62cc0599e4",slot:"input",class:"root"},this.label&&o("fluent-label",{key:"07514be5f07b59c4e199d9d9b00ef6b6b6e6f882",class:"field-label",required:this.required,disabled:this.disabled},this.label),o("input",{key:"8283e2fc359d3e423503501a25d5bf92c2693af2",ref:e=>this.fileInputRef=e,type:"file",class:"hidden-input",name:this.name,accept:this.accept,multiple:r,disabled:this.disabled||this.readonly,onChange:this.handleInputChange,onClick:e=>e.stopPropagation()}),this.renderDropContainer({hasFiles:s,showDropZone:a,allowMultiple:r})),o("udp-text",{key:"6b4eafeb6fb3140cb9a079b9bdcded2b8ff0a736",slot:"message",variant:"caption1",class:{message:!0,error:e,"include-error-padding":this.includeErrorPadding}},t)),"gallery"===this.view&&o("dialog",{key:"25ac70c8af88510e4d6b3c4f020c964468bffd0e",class:"lightbox",ref:e=>this.dialogRef=e,onClose:this.handleDialogClose,onClick:this.handleBackdropClick,onKeyDown:this.handleLightboxKeyDown},this.lightboxIndex>=0&&this.renderLightboxContent()))}renderDropContainer(e){const{hasFiles:t,showDropZone:i,allowMultiple:n}=e,r=!this.hideDragAndDrop&&!this.readonly;return o("div",Object.assign({class:{"drop-container":!0,dragging:this.isDragging,"has-files":t,"no-dnd":!r,readonly:this.readonly},onDragEnter:this.handleDragEnter,onDragOver:this.handleDragOver,onDragLeave:this.handleDragLeave,onDrop:this.handleDrop,onFocusin:this.handleFieldFocusIn,onFocusout:this.handleFieldFocusOut},!r||t||this.readonly?{}:{role:"button",tabIndex:0,onKeyDown:this.handleDropZoneKeyDown}),t&&"list"===this.view&&this.renderFileList(),t&&"gallery"===this.view&&this.renderGallery(),!t&&this.readonly&&this.renderEmptyReadonly(n),i&&!t&&this.renderEmptyPrompt(n),i&&t&&this.renderCompactPrompt(n))}renderEmptyPrompt(e){const t=!this.hideDragAndDrop,i=!this.hideButton,n=this.itemNoun(e),r=this.dragAndDropMessage||`Drag and drop ${n} here`,s=this.browseFileMessage||"Browse "+n,a="gallery"===this.view?"image":"cloud-upload";return o("div",{class:"empty-prompt"},o("slot",{name:"start"}),t&&o("div",{class:"empty-prompt-content"},o("udp-fluent-icon",{name:a,size:"sm",class:"empty-prompt-icon"}),o("span",{class:"empty-prompt-text"},r)),i&&o("udp-fluent-button",{class:"empty-prompt-button",appearance:"outline",size:"small",disabled:this.disabled,onClick:this.handleBrowseClick},s),o("slot",{name:"end"}))}renderEmptyReadonly(e){const t=this.itemNoun(e);return o("div",{class:"empty-readonly"},o("span",{class:"empty-readonly-text"},"No ",t," attached"))}renderCompactPrompt(e){const t=!this.hideDragAndDrop,i=!this.hideButton,n="Drag and drop more "+this.itemNoun(e),r=e?"Browse":"Browse "+this.singularNoun();return o("div",{class:"compact-prompt"},t&&o("div",{class:"compact-prompt-text"},o("udp-fluent-icon",{name:"gallery"===this.view?"image":"cloud-upload",size:"sm",class:"compact-prompt-icon"}),o("span",null,n)),i&&o("udp-fluent-button",{class:"compact-prompt-button",appearance:"outline",size:"small",disabled:this.disabled,onClick:this.handleBrowseClick},r))}itemNoun(e){return"gallery"===this.view?e?"images":"an image":e?"files":"a file"}singularNoun(){return"gallery"===this.view?"image":"file"}renderFileList(){return o("ul",{class:"file-list",role:"list"},this.items.map(((e,t)=>this.renderFileRow(e,t))))}renderFileRow(e,t){const i=p(e),n="pending"===e.kind?function(e){if(!Number.isFinite(e)||e<0)return"";if(e<1024)return e+" B";let t=e/1024,i=0;for(;t>=1024&&i<3;)t/=1024,i+=1;return`${t.toFixed(t>=10||0===i?0:1)} ${["KB","MB","GB","TB"][i]}`}(e.file.size):null,r=this.displayUploadTime?g(e.uploadedAt):null,s=[i,n,r].filter(Boolean);return o("li",{class:"file-chip",key:`${e.kind}:${i}:${t}`,title:s.join(" · ")},o("udp-fluent-icon",{name:"document",size:"sm",class:"file-chip-icon"}),o("button",{type:"button",class:"file-chip-name",disabled:this.disabled,"aria-label":"Download "+i,onClick:()=>this.requestDownload(e)},o("span",{class:"file-chip-name-text"},i)),(n||r||"stored"===e.kind)&&o("span",{class:"file-chip-detail"},n&&o("span",null,n),r&&o("span",null,r),"stored"===e.kind&&o("udp-fluent-badge",{class:"file-chip-saved-badge",appearance:"filled",color:"subtle",size:"small"},"saved")),!this.readonly&&o("udp-fluent-icon-button",{class:"file-chip-remove",iconName:"dismiss",appearance:"subtle",size:"small",ariaLabel:"Remove "+i,disabled:this.disabled,onClick:()=>this.removeAt(t)}))}renderGallery(){return o("ul",{class:"gallery",role:"list"},this.items.map(((e,t)=>this.renderThumb(e,t))))}renderThumb(e,t){const i=f(e),n=this.previews.get(i),r=p(e),s=this.displayUploadTime?g(e.uploadedAt):null,a=!this.disableLightbox&&!!(null==n?void 0:n.url);return o("li",{class:"thumb",key:i},o("div",{class:"thumb-frame"},o("button",{type:"button",class:{"thumb-button":!0,clickable:a},onClick:e=>a&&this.openLightbox(t,e.currentTarget),disabled:!a,title:r},(null==n?void 0:n.url)?o("img",{class:"thumb-img",src:n.url,alt:r}):(null==n?void 0:n.loading)?o("udp-spinner",{size:"small"}):o("udp-fluent-icon",{name:"error"===(null==n?void 0:n.status)?"warning":"image",size:"md",class:"thumb-placeholder-icon"}),"stored"===e.kind&&o("udp-fluent-badge",{class:"thumb-saved-badge",appearance:"filled",color:"brand",size:"small"},"saved")),!this.readonly&&o("udp-fluent-icon-button",{class:"thumb-remove",iconName:"dismiss",appearance:"subtle",size:"small",ariaLabel:"Remove "+r,disabled:this.disabled,onClick:()=>this.removeAt(t)})),o("div",{class:"thumb-meta"},o("button",{type:"button",class:"thumb-name",disabled:this.disabled,"aria-label":"Download "+r,onClick:()=>this.requestDownload(e),title:"Download "+r},o("span",{class:"thumb-name-text"},r)),s&&o("span",{class:"thumb-stamp"},s)))}renderLightboxContent(){const e=this.items[this.lightboxIndex];if(!e)return null;const t=this.previews.get(f(e)),i=p(e),n=this.items.length,r=n>1;return o("div",{class:"lightbox-content","aria-label":i},o("div",{class:"lightbox-header"},o("span",{class:"lightbox-name",title:i},i),o("udp-fluent-icon-button",{class:"lightbox-close",iconName:"dismiss",appearance:"subtle",size:"large",ariaLabel:"Close preview",onClick:()=>this.closeLightbox()})),o("div",{class:"lightbox-stage"},r&&o("udp-fluent-icon-button",{class:"lightbox-nav lightbox-prev",iconName:"chevron-left",appearance:"subtle",size:"medium",ariaLabel:"Previous image",onClick:()=>this.navigateLightbox(-1)}),(null==t?void 0:t.url)?o("img",{class:"lightbox-image",src:t.url,alt:i}):(null==t?void 0:t.loading)?o("udp-spinner",{size:"medium"}):o("span",{class:"lightbox-error"},"No preview available"),r&&o("udp-fluent-icon-button",{class:"lightbox-nav lightbox-next",iconName:"chevron-right",appearance:"subtle",size:"medium",ariaLabel:"Next image",onClick:()=>this.navigateLightbox(1)})),r&&o("div",{class:"lightbox-counter"},this.lightboxIndex+1," / ",n))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}],view:[{onViewChange:0}]}}static get style(){return":host{display:block;width:100%;font-family:var(--fontFamilyBase)}fluent-field{width:100%}fluent-field.no-message::part(message){display:none}.root{display:flex;flex-direction:column;gap:var(--spacingVerticalS, 8px);width:100%}.field-label{display:block;margin-bottom:var(--spacingVerticalXXS, 2px)}.hidden-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.drop-container{border:2px dashed var(--colorNeutralStroke1, #d1d1d1);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorNeutralBackground1, #ffffff);transition:background-color 100ms ease,     border-color 100ms ease;outline:none;padding:var(--spacingVerticalM, 12px);display:flex;flex-direction:column;justify-content:center;gap:var(--spacingVerticalM, 12px);min-height:144px;box-sizing:border-box}.drop-container.has-files{justify-content:space-between;border-color:var(--colorNeutralStroke2, #e0e0e0);cursor:default}:host(.appearance-filled) .drop-container{background-color:var(--colorNeutralBackground2, #fafafa)}.drop-container[role='button']{cursor:pointer}.drop-container[role='button']:focus-visible{outline:2px solid var(--colorStrokeFocus2, #000000);outline-offset:2px}.drop-container.dragging{background-color:var(--colorNeutralBackground1Hover, #f5f5f5);border-color:var(--colorNeutralStrokeAccessible, #616161)}.drop-container.no-dnd:not(.readonly){border-style:solid}.drop-container.readonly{cursor:default;border-style:solid}.drop-container.has-files.dragging{border-style:dashed;background-color:var(--colorNeutralBackground1Hover, #f5f5f5)}.empty-prompt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacingVerticalXS, 4px);pointer-events:none;}.empty-prompt-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacingVerticalXXS, 2px);color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px)}.empty-prompt-icon{color:inherit}.empty-prompt-text{color:inherit;text-align:center}.empty-prompt-button{pointer-events:auto}.empty-readonly{display:flex;align-items:center;justify-content:center}.empty-readonly-text{color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px);font-style:italic}.compact-prompt{display:flex;align-items:center;justify-content:space-between;gap:var(--spacingHorizontalM, 12px);padding:var(--spacingVerticalM, 12px) 0 0 0;border-top:1px dashed var(--colorNeutralStroke3, #ebebeb);pointer-events:none}.compact-prompt-text{display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS, 4px);color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px);flex:1 1 auto;min-width:0}.compact-prompt-icon{color:inherit;flex:0 0 auto}.compact-prompt-button{pointer-events:auto;flex:0 0 auto}.file-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:var(--spacingHorizontalXS, 4px) var(--spacingHorizontalS, 8px);max-height:80px;overflow-y:auto;scrollbar-gutter:stable}.file-chip{display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS, 4px);padding:4px var(--spacingHorizontalXS, 4px) 4px var(--spacingHorizontalS, 8px);border:1px solid var(--colorNeutralStroke2, #e0e0e0);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorNeutralBackground1, #ffffff);max-width:280px;min-width:0;flex:0 0 auto;height:32px;box-sizing:border-box}.file-chip-icon{flex:0 0 auto;color:var(--colorNeutralForeground3, #707070)}.file-chip-name{background:none;border:none;padding:0;font:inherit;color:var(--colorBrandForeground1, #0f6cbd);text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left;min-width:0;flex:1 1 auto;font-size:var(--fontSizeBase200, 12px);line-height:1}.file-chip-name:disabled{color:var(--colorNeutralForegroundDisabled, #bdbdbd);cursor:not-allowed}.file-chip-name-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-chip-detail{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS, 4px);color:var(--colorNeutralForeground3, #707070);font-size:11px;line-height:1}.file-chip-remove{flex:0 0 auto}.gallery{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalM, 12px)}.thumb{display:flex;flex-direction:column;gap:var(--spacingVerticalXS, 4px)}.thumb-frame{position:relative;width:80px;height:80px}.thumb-button{position:relative;display:flex;align-items:center;justify-content:center;width:80px;height:80px;padding:0;margin:0;border:1px solid var(--colorNeutralStroke2, #e0e0e0);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorNeutralBackground1, #ffffff);overflow:hidden;cursor:default;transition:border-color 100ms ease, transform 100ms ease}.thumb-button.clickable{cursor:zoom-in}.thumb-button.clickable:hover{border-color:var(--colorBrandStroke1, #0f6cbd);transform:scale(1.02)}.thumb-button:focus-visible{outline:2px solid var(--colorStrokeFocus2, #000000);outline-offset:2px}.thumb-button:disabled{cursor:not-allowed;opacity:0.7}.thumb-img{width:100%;height:100%;object-fit:cover;display:block}.thumb-placeholder-icon{color:var(--colorNeutralForeground3, #707070)}.thumb-saved-badge{position:absolute;bottom:4px;left:4px}.thumb-meta{display:flex;flex-direction:column;gap:2px;max-width:100%}.thumb-name{background:none;border:none;padding:0;font:inherit;color:var(--colorBrandForeground1, #0f6cbd);text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left;display:block;max-width:100%;overflow:hidden}.thumb-name:disabled{color:var(--colorNeutralForegroundDisabled, #bdbdbd);cursor:not-allowed}.thumb-name-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fontSizeBase200, 12px)}.thumb-stamp{font-size:10px;color:var(--colorNeutralForeground3, #707070)}.thumb-remove{position:absolute;top:4px;right:4px}:host(.disabled){opacity:0.6}:host(.disabled) .drop-container{cursor:not-allowed}.message{color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px)}.message.include-error-padding{min-height:var(--lineHeightBase200, 16px);display:inline-block}.message.error{color:var(--colorPaletteRedForeground1, #b10e1c)}:host(.has-error) .drop-container{border-color:var(--colorPaletteRedBorder2, #b10e1c)}.lightbox{width:100vw;height:100vh;max-width:100vw;max-height:100vh;margin:0;padding:var(--spacingVerticalL, 16px);border:none;background:transparent;box-sizing:border-box;align-items:center;justify-content:center}.lightbox[open]{display:flex;flex-direction:column;animation:lightbox-fade-in 100ms ease}.lightbox::backdrop{background-color:rgba(0, 0, 0, 0.85);animation:lightbox-fade-in 100ms ease}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}.lightbox-content{display:flex;flex-direction:column;width:100%;height:100%;max-width:1200px;gap:var(--spacingVerticalS, 8px)}.lightbox-header{display:flex;align-items:center;justify-content:space-between;gap:var(--spacingHorizontalM, 12px);color:#ffffff;padding:0 var(--spacingHorizontalS, 8px)}.lightbox-name{font-size:var(--fontSizeBase300, 14px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}.lightbox-stage{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0}.lightbox-image{max-width:100%;max-height:100%;object-fit:contain}.lightbox-error{color:#ffffff;font-style:italic}.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%)}.lightbox-prev{left:var(--spacingHorizontalS, 8px)}.lightbox-next{right:var(--spacingHorizontalS, 8px)}.lightbox-nav,.lightbox-close{--colorNeutralForeground2:#ffffff;--colorNeutralForeground2Hover:#ffffff;--colorNeutralForeground2Pressed:#ffffff;--colorNeutralForeground2BrandHover:#ffffff;--colorNeutralForeground2BrandPressed:#ffffff;--colorSubtleBackgroundHover:rgba(255, 255, 255, 0.12);--colorSubtleBackgroundPressed:rgba(255, 255, 255, 0.18);--colorSubtleBackgroundSelected:rgba(255, 255, 255, 0.18)}.lightbox-counter{text-align:center;color:rgba(255, 255, 255, 0.8);font-size:var(--fontSizeBase200, 12px);padding:4px 0}"}},[257,"udp-fluent-file-input",{view:[1],value:[16],name:[1],label:[1],hint:[1],error:[1],includeErrorPadding:[4,"include-error-padding"],required:[4],disabled:[4],readonly:[4],accept:[1],maxFiles:[2,"max-files"],maxFileSizeBytes:[2,"max-file-size-bytes"],hideDragAndDrop:[4,"hide-drag-and-drop"],hideButton:[4,"hide-button"],displayUploadTime:[4,"display-upload-time"],dragAndDropMessage:[1,"drag-and-drop-message"],browseFileMessage:[1,"browse-file-message"],appearance:[1],disableLightbox:[4,"disable-lightbox"],loadStoredFile:[16],items:[32],isDragging:[32],lightboxIndex:[32],previews:[32]},void 0,{value:[{onValueChange:0}],view:[{onViewChange:0}]}]),y=v,w=function(){"undefined"!=typeof customElements&&["udp-fluent-file-input","udp-fluent-badge","udp-fluent-button","udp-fluent-icon","udp-fluent-icon-button","udp-spinner","udp-text"].forEach((e=>{switch(e){case"udp-fluent-file-input":customElements.get(r(e))||customElements.define(r(e),v);break;case"udp-fluent-badge":customElements.get(r(e))||s();break;case"udp-fluent-button":customElements.get(r(e))||a();break;case"udp-fluent-icon":customElements.get(r(e))||l();break;case"udp-fluent-icon-button":customElements.get(r(e))||c();break;case"udp-spinner":customElements.get(r(e))||d();break;case"udp-text":customElements.get(r(e))||u()}}))};export{y as UdpFluentFileInput,w as defineCustomElement}

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-05-12T20:58:37",
+  "timestamp": "2026-05-12T21:41:33",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.41.3",

package/dist/esm/udp-fluent-file-input.entry.js

@@ -513,11 +513,15 @@ const UdpFluentFileInput = class {
                 [`appearance-${this.appearance}`]: true,
                 disabled: this.disabled,
                 readonly: this.readonly,
-            } }, h("fluent-field", { key: '0d30008ec2920ff45d3b21a97ab5a6a2256edaa8', class: { 'no-message': noMessage } }, h("div", { key: 'c391b54029953b88602ccfb66c40dc62cc0599e4', slot: "input", class: "root" }, this.label && (h("fluent-label", { key: '07514be5f07b59c4e199d9d9b00ef6b6b6e6f882', class: "field-label", required: this.required, disabled: this.disabled }, this.label)), h("input", { key: 'f6139c37756bff0770d1055b333af06f22756b95', ref: el => (this.fileInputRef = el), type: "file", class: "hidden-input", name: this.name, accept: this.accept, multiple: allowMultiple, disabled: this.disabled || this.readonly, onChange: this.handleInputChange }), this.renderDropContainer({ hasFiles, showDropZone, allowMultiple })), h("udp-text", { key: '9c578f2ea50cce6d8fb36c81ed41a01f3d5c83bb', slot: "message", variant: "caption1", class: {
+            } }, h("fluent-field", { key: '0d30008ec2920ff45d3b21a97ab5a6a2256edaa8', class: { 'no-message': noMessage } }, h("div", { key: 'c391b54029953b88602ccfb66c40dc62cc0599e4', slot: "input", class: "root" }, this.label && (h("fluent-label", { key: '07514be5f07b59c4e199d9d9b00ef6b6b6e6f882', class: "field-label", required: this.required, disabled: this.disabled }, this.label)), h("input", { key: '8283e2fc359d3e423503501a25d5bf92c2693af2', ref: el => (this.fileInputRef = el), type: "file", class: "hidden-input", name: this.name, accept: this.accept, multiple: allowMultiple, disabled: this.disabled || this.readonly, onChange: this.handleInputChange,
+            // Containers like fluent-drawer's <dialog> call preventDefault on
+            // every bubbled click. The synthetic click from .click() must not
+            // reach them, or the canceled flag suppresses the file picker.
+            onClick: (e) => e.stopPropagation() }), this.renderDropContainer({ hasFiles, showDropZone, allowMultiple })), h("udp-text", { key: '6b4eafeb6fb3140cb9a079b9bdcded2b8ff0a736', slot: "message", variant: "caption1", class: {
                 message: true,
                 error: hasError,
                 'include-error-padding': this.includeErrorPadding,
-            } }, message)), this.view === 'gallery' && (h("dialog", { key: 'b58bbefc6b04fdf0318c7c781d3b6d660667b936', class: "lightbox", ref: el => (this.dialogRef = el), onClose: this.handleDialogClose, onClick: this.handleBackdropClick, onKeyDown: this.handleLightboxKeyDown }, this.lightboxIndex >= 0 && this.renderLightboxContent()))));
+            } }, message)), this.view === 'gallery' && (h("dialog", { key: '25ac70c8af88510e4d6b3c4f020c964468bffd0e', class: "lightbox", ref: el => (this.dialogRef = el), onClose: this.handleDialogClose, onClick: this.handleBackdropClick, onKeyDown: this.handleLightboxKeyDown }, this.lightboxIndex >= 0 && this.renderLightboxContent()))));
     }
     /**
      * Single dropzone container. Layout depends on state:

package/dist/stencil-library/udp-fluent-file-input.entry.js

@@ -1 +1 @@
-import{r as e,c as t,h as i,H as o,a as r}from"./index-Cgpvu-iV.js";import"@fluentui/web-components/field.js";import"@fluentui/web-components/label.js";function n(e){return"pending"===e.kind?e.file.name:e.name}function s(e){return(e||"").trim().toLowerCase()}function a(e){if("pending"===e.kind){const t=e.file;return`pending::${s(t.name)}::${t.size}::${t.lastModified}`}return`stored::${e.driveFileId}`}function l(e){var t;const i=null===(t=e.dataTransfer)||void 0===t?void 0:t.types;return!!i&&Array.from(i).includes("Files")}function c(e,t,i,o,r,n){if(t.accept&&!function(e,t){if(!t)return!0;const i=t.split(",").map((e=>e.trim())).filter((e=>e.length>0));if(0===i.length)return!0;const o=(e.type||"").toLowerCase(),r=(e.name||"").toLowerCase();for(const e of i){const t=e.toLowerCase();if(t.startsWith(".")){if(r.endsWith(t))return!0}else if(t.endsWith("/*")){const e=t.slice(0,-1);if(o.startsWith(e))return!0}else if(o===t)return!0}return!1}(e,t.accept))return"mime";if(null!=t.maxFileSizeBytes&&e.size>t.maxFileSizeBytes)return"size";if(!n&&r<=0)return"maxFiles";const a=s(e.name);return!n&&o.has(a)||i.has(a)?"duplicate":null}function d(e){if(!e)return null;const t=new Date(e);return Number.isNaN(t.getTime())?null:new Intl.DateTimeFormat(void 0,{dateStyle:"medium",timeStyle:"short"}).format(t)}function h(e,t){const i=URL.createObjectURL(e),o=document.createElement("a");o.href=i,o.download=t,o.style.display="none",document.body.appendChild(o),o.click(),document.body.removeChild(o),setTimeout((()=>URL.revokeObjectURL(i)),1e3)}const p=class{constructor(i){e(this,i),this.valueChanged=t(this,"valueChanged",7),this.fileRejected=t(this,"fileRejected",7),this.downloadRequested=t(this,"downloadRequested",7),this.inputBlur=t(this,"inputBlur",7),this.inputFocus=t(this,"inputFocus",7),this.view="list",this.value=[],this.includeErrorPadding=!0,this.required=!1,this.disabled=!1,this.readonly=!1,this.hideDragAndDrop=!1,this.hideButton=!1,this.displayUploadTime=!1,this.appearance="outline",this.disableLightbox=!1,this.items=[],this.isDragging=!1,this.fieldHasFocus=!1,this.lightboxIndex=-1,this.previews=new Map,this.lightboxTrigger=null,this.requestDownload=e=>{this.disabled||("pending"!==e.kind?"function"==typeof this.loadStoredFile?this.loadStoredFile(e).then((t=>{h(t instanceof File?t:new File([t],e.name,{type:t.type||"application/octet-stream"}),e.name)})).catch((()=>{})):this.downloadRequested.emit(e):h(e.file,e.file.name))},this.handleBrowseClick=e=>{var t;this.disabled||this.readonly||(e.preventDefault(),e.stopPropagation(),null===(t=this.fileInputRef)||void 0===t||t.click())},this.handleInputChange=e=>{const t=e.target;t.files&&t.files.length>0&&this.intakeFiles(t.files),t.value=""},this.handleDragEnter=e=>{this.disabled||this.readonly||this.hideDragAndDrop||l(e)&&(e.preventDefault(),e.stopPropagation(),this.isDragging=!0)},this.handleDragOver=e=>{this.disabled||this.readonly||this.hideDragAndDrop||l(e)&&(e.preventDefault(),e.stopPropagation(),e.dataTransfer&&(e.dataTransfer.dropEffect="copy"))},this.handleDragLeave=e=>{if(this.disabled||this.readonly||this.hideDragAndDrop)return;e.preventDefault(),e.stopPropagation();const t=e.currentTarget,i=e.relatedTarget;t&&i&&t.contains(i)||(this.isDragging=!1)},this.handleDrop=e=>{if(this.disabled||this.readonly||this.hideDragAndDrop)return;e.preventDefault(),e.stopPropagation(),this.isDragging=!1;const t=e.dataTransfer;t&&t.files&&t.files.length>0&&this.intakeFiles(t.files)},this.handleDropZoneKeyDown=e=>{var t;this.disabled||this.readonly||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),null===(t=this.fileInputRef)||void 0===t||t.click())},this.handleFieldFocusIn=()=>{this.fieldHasFocus||(this.fieldHasFocus=!0,this.inputFocus.emit())},this.handleFieldFocusOut=e=>{const t=e.relatedTarget,i=e.currentTarget;t&&i&&i.contains(t)||this.fieldHasFocus&&(this.fieldHasFocus=!1,this.inputBlur.emit())},this.handleLightboxKeyDown=e=>{"ArrowRight"===e.key?(e.preventDefault(),this.navigateLightbox(1)):"ArrowLeft"===e.key&&(e.preventDefault(),this.navigateLightbox(-1))},this.handleBackdropClick=e=>{e.target===e.currentTarget&&this.closeLightbox()},this.handleDialogClose=()=>{var e;this.lightboxIndex>=0&&(this.lightboxIndex=-1),null===(e=this.lightboxTrigger)||void 0===e||e.focus(),this.lightboxTrigger=null}}componentWillLoad(){this.items=Array.isArray(this.value)?this.value:[],"gallery"===this.view&&this.syncPreviews(this.items)}onValueChange(e){const t=Array.isArray(e)?e:[];t!==this.items&&(this.items=t,"gallery"===this.view&&this.syncPreviews(t))}onViewChange(e){"gallery"===e?this.syncPreviews(this.items):(this.clearPreviews(),this.lightboxIndex=-1)}disconnectedCallback(){this.clearPreviews()}clearPreviews(){this.previews.forEach((e=>{e.revokable&&e.url&&URL.revokeObjectURL(e.url)})),this.previews=new Map}syncPreviews(e){const t=new Set,i=new Map(this.previews);for(const o of e){const e=a(o);t.add(e),i.has(e)||i.set(e,this.createPreview(o))}for(const[e,o]of Array.from(i.entries()))t.has(e)||(o.revokable&&o.url&&URL.revokeObjectURL(o.url),i.delete(e));this.previews=i}createPreview(e){if("pending"===e.kind)return{url:URL.createObjectURL(e.file),loading:!1,revokable:!0,status:"ready"};if("function"!=typeof this.loadStoredFile)return{url:null,loading:!1,revokable:!1,status:"unavailable"};const t={url:null,loading:!0,revokable:!1,status:"loading"},i=a(e);return this.loadStoredFile(e).then((e=>{const o=e instanceof Blob?e:new Blob([e]),r=URL.createObjectURL(o);this.previews.get(i)===t?this.previews=new Map(this.previews).set(i,{url:r,loading:!1,revokable:!0,status:"ready"}):URL.revokeObjectURL(r)})).catch((()=>{this.previews.get(i)===t&&(this.previews=new Map(this.previews).set(i,Object.assign(Object.assign({},t),{loading:!1,status:"error"})))})),t}intakeFiles(e){if(this.disabled||this.readonly)return;const t=function(e,t,i){const o=Array.from(e),r=[],a=[],l=new Set,d=new Set(t.map((e=>s(n(e)))));let h=null==i.maxFiles?Number.POSITIVE_INFINITY:Math.max(0,i.maxFiles-t.length);const p=1===i.maxFiles,u=(new Date).toISOString();for(const e of o){const t=c(e,i,l,d,h,p);t?a.push({file:e,reason:t}):(l.add(s(e.name)),r.push({kind:"pending",file:e,uploadedAt:u}),h-=1)}return 0===r.length?{accepted:r,rejected:a,next:null}:{accepted:r,rejected:a,next:p?r:[...t,...r]}}(e,this.items,{accept:this.accept,maxFiles:this.maxFiles,maxFileSizeBytes:this.maxFileSizeBytes});t.rejected.forEach((e=>this.fileRejected.emit(e))),t.next&&this.commit(t.next)}commit(e){this.items=e,"gallery"===this.view&&this.syncPreviews(e),this.valueChanged.emit(e)}removeAt(e){if(this.disabled||this.readonly)return;if(e<0||e>=this.items.length)return;const t=this.items.slice();t.splice(e,1),this.commit(t)}openLightbox(e,t){this.disableLightbox||e<0||e>=this.items.length||(this.lightboxIndex=e,this.lightboxTrigger=null!=t?t:null,requestAnimationFrame((()=>{this.dialogRef&&!this.dialogRef.open&&this.dialogRef.showModal()})))}closeLightbox(){var e;this.lightboxIndex<0||(this.lightboxIndex=-1,(null===(e=this.dialogRef)||void 0===e?void 0:e.open)&&this.dialogRef.close())}navigateLightbox(e){if(this.lightboxIndex<0)return;const t=this.items.length;0!==t&&(this.lightboxIndex=(this.lightboxIndex+e+t)%t)}render(){const e=!!this.error,t=this.error||this.hint,r=!t&&!this.includeErrorPadding,n=1!==this.maxFiles,s=this.items.length>0,a=!(this.readonly||null!=this.maxFiles&&1!==this.maxFiles&&this.items.length>=this.maxFiles);return i(o,{key:"911a471d97b84b87438f82a619e2be6caf08d8bc",class:{"has-error":e,[`view-${this.view}`]:!0,[`appearance-${this.appearance}`]:!0,disabled:this.disabled,readonly:this.readonly}},i("fluent-field",{key:"0d30008ec2920ff45d3b21a97ab5a6a2256edaa8",class:{"no-message":r}},i("div",{key:"c391b54029953b88602ccfb66c40dc62cc0599e4",slot:"input",class:"root"},this.label&&i("fluent-label",{key:"07514be5f07b59c4e199d9d9b00ef6b6b6e6f882",class:"field-label",required:this.required,disabled:this.disabled},this.label),i("input",{key:"f6139c37756bff0770d1055b333af06f22756b95",ref:e=>this.fileInputRef=e,type:"file",class:"hidden-input",name:this.name,accept:this.accept,multiple:n,disabled:this.disabled||this.readonly,onChange:this.handleInputChange}),this.renderDropContainer({hasFiles:s,showDropZone:a,allowMultiple:n})),i("udp-text",{key:"9c578f2ea50cce6d8fb36c81ed41a01f3d5c83bb",slot:"message",variant:"caption1",class:{message:!0,error:e,"include-error-padding":this.includeErrorPadding}},t)),"gallery"===this.view&&i("dialog",{key:"b58bbefc6b04fdf0318c7c781d3b6d660667b936",class:"lightbox",ref:e=>this.dialogRef=e,onClose:this.handleDialogClose,onClick:this.handleBackdropClick,onKeyDown:this.handleLightboxKeyDown},this.lightboxIndex>=0&&this.renderLightboxContent()))}renderDropContainer(e){const{hasFiles:t,showDropZone:o,allowMultiple:r}=e,n=!this.hideDragAndDrop&&!this.readonly;return i("div",Object.assign({class:{"drop-container":!0,dragging:this.isDragging,"has-files":t,"no-dnd":!n,readonly:this.readonly},onDragEnter:this.handleDragEnter,onDragOver:this.handleDragOver,onDragLeave:this.handleDragLeave,onDrop:this.handleDrop,onFocusin:this.handleFieldFocusIn,onFocusout:this.handleFieldFocusOut},!n||t||this.readonly?{}:{role:"button",tabIndex:0,onKeyDown:this.handleDropZoneKeyDown}),t&&"list"===this.view&&this.renderFileList(),t&&"gallery"===this.view&&this.renderGallery(),!t&&this.readonly&&this.renderEmptyReadonly(r),o&&!t&&this.renderEmptyPrompt(r),o&&t&&this.renderCompactPrompt(r))}renderEmptyPrompt(e){const t=!this.hideDragAndDrop,o=!this.hideButton,r=this.itemNoun(e),n=this.dragAndDropMessage||`Drag and drop ${r} here`,s=this.browseFileMessage||`Browse ${r}`,a="gallery"===this.view?"image":"cloud-upload";return i("div",{class:"empty-prompt"},i("slot",{name:"start"}),t&&i("div",{class:"empty-prompt-content"},i("udp-fluent-icon",{name:a,size:"sm",class:"empty-prompt-icon"}),i("span",{class:"empty-prompt-text"},n)),o&&i("udp-fluent-button",{class:"empty-prompt-button",appearance:"outline",size:"small",disabled:this.disabled,onClick:this.handleBrowseClick},s),i("slot",{name:"end"}))}renderEmptyReadonly(e){const t=this.itemNoun(e);return i("div",{class:"empty-readonly"},i("span",{class:"empty-readonly-text"},"No ",t," attached"))}renderCompactPrompt(e){const t=!this.hideDragAndDrop,o=!this.hideButton,r=`Drag and drop more ${this.itemNoun(e)}`,n=e?"Browse":`Browse ${this.singularNoun()}`;return i("div",{class:"compact-prompt"},t&&i("div",{class:"compact-prompt-text"},i("udp-fluent-icon",{name:"gallery"===this.view?"image":"cloud-upload",size:"sm",class:"compact-prompt-icon"}),i("span",null,r)),o&&i("udp-fluent-button",{class:"compact-prompt-button",appearance:"outline",size:"small",disabled:this.disabled,onClick:this.handleBrowseClick},n))}itemNoun(e){return"gallery"===this.view?e?"images":"an image":e?"files":"a file"}singularNoun(){return"gallery"===this.view?"image":"file"}renderFileList(){return i("ul",{class:"file-list",role:"list"},this.items.map(((e,t)=>this.renderFileRow(e,t))))}renderFileRow(e,t){const o=n(e),r="pending"===e.kind?function(e){if(!Number.isFinite(e)||e<0)return"";if(e<1024)return`${e} B`;const t=["KB","MB","GB","TB"];let i=e/1024,o=0;for(;i>=1024&&o<t.length-1;)i/=1024,o+=1;return`${i.toFixed(i>=10||0===o?0:1)} ${t[o]}`}(e.file.size):null,s=this.displayUploadTime?d(e.uploadedAt):null,a=[o,r,s].filter(Boolean);return i("li",{class:"file-chip",key:`${e.kind}:${o}:${t}`,title:a.join(" · ")},i("udp-fluent-icon",{name:"document",size:"sm",class:"file-chip-icon"}),i("button",{type:"button",class:"file-chip-name",disabled:this.disabled,"aria-label":`Download ${o}`,onClick:()=>this.requestDownload(e)},i("span",{class:"file-chip-name-text"},o)),(r||s||"stored"===e.kind)&&i("span",{class:"file-chip-detail"},r&&i("span",null,r),s&&i("span",null,s),"stored"===e.kind&&i("udp-fluent-badge",{class:"file-chip-saved-badge",appearance:"filled",color:"subtle",size:"small"},"saved")),!this.readonly&&i("udp-fluent-icon-button",{class:"file-chip-remove",iconName:"dismiss",appearance:"subtle",size:"small",ariaLabel:`Remove ${o}`,disabled:this.disabled,onClick:()=>this.removeAt(t)}))}renderGallery(){return i("ul",{class:"gallery",role:"list"},this.items.map(((e,t)=>this.renderThumb(e,t))))}renderThumb(e,t){const o=a(e),r=this.previews.get(o),s=n(e),l=this.displayUploadTime?d(e.uploadedAt):null,c=!this.disableLightbox&&!!(null==r?void 0:r.url);return i("li",{class:"thumb",key:o},i("div",{class:"thumb-frame"},i("button",{type:"button",class:{"thumb-button":!0,clickable:c},onClick:e=>c&&this.openLightbox(t,e.currentTarget),disabled:!c,title:s},(null==r?void 0:r.url)?i("img",{class:"thumb-img",src:r.url,alt:s}):(null==r?void 0:r.loading)?i("udp-spinner",{size:"small"}):i("udp-fluent-icon",{name:"error"===(null==r?void 0:r.status)?"warning":"image",size:"md",class:"thumb-placeholder-icon"}),"stored"===e.kind&&i("udp-fluent-badge",{class:"thumb-saved-badge",appearance:"filled",color:"brand",size:"small"},"saved")),!this.readonly&&i("udp-fluent-icon-button",{class:"thumb-remove",iconName:"dismiss",appearance:"subtle",size:"small",ariaLabel:`Remove ${s}`,disabled:this.disabled,onClick:()=>this.removeAt(t)})),i("div",{class:"thumb-meta"},i("button",{type:"button",class:"thumb-name",disabled:this.disabled,"aria-label":`Download ${s}`,onClick:()=>this.requestDownload(e),title:`Download ${s}`},i("span",{class:"thumb-name-text"},s)),l&&i("span",{class:"thumb-stamp"},l)))}renderLightboxContent(){const e=this.items[this.lightboxIndex];if(!e)return null;const t=this.previews.get(a(e)),o=n(e),r=this.items.length,s=r>1;return i("div",{class:"lightbox-content","aria-label":o},i("div",{class:"lightbox-header"},i("span",{class:"lightbox-name",title:o},o),i("udp-fluent-icon-button",{class:"lightbox-close",iconName:"dismiss",appearance:"subtle",size:"large",ariaLabel:"Close preview",onClick:()=>this.closeLightbox()})),i("div",{class:"lightbox-stage"},s&&i("udp-fluent-icon-button",{class:"lightbox-nav lightbox-prev",iconName:"chevron-left",appearance:"subtle",size:"medium",ariaLabel:"Previous image",onClick:()=>this.navigateLightbox(-1)}),(null==t?void 0:t.url)?i("img",{class:"lightbox-image",src:t.url,alt:o}):(null==t?void 0:t.loading)?i("udp-spinner",{size:"medium"}):i("span",{class:"lightbox-error"},"No preview available"),s&&i("udp-fluent-icon-button",{class:"lightbox-nav lightbox-next",iconName:"chevron-right",appearance:"subtle",size:"medium",ariaLabel:"Next image",onClick:()=>this.navigateLightbox(1)})),s&&i("div",{class:"lightbox-counter"},this.lightboxIndex+1," / ",r))}get el(){return r(this)}static get watchers(){return{value:[{onValueChange:0}],view:[{onViewChange:0}]}}};p.style=":host{display:block;width:100%;font-family:var(--fontFamilyBase)}fluent-field{width:100%}fluent-field.no-message::part(message){display:none}.root{display:flex;flex-direction:column;gap:var(--spacingVerticalS, 8px);width:100%}.field-label{display:block;margin-bottom:var(--spacingVerticalXXS, 2px)}.hidden-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.drop-container{border:2px dashed var(--colorNeutralStroke1, #d1d1d1);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorNeutralBackground1, #ffffff);transition:background-color 100ms ease,     border-color 100ms ease;outline:none;padding:var(--spacingVerticalM, 12px);display:flex;flex-direction:column;justify-content:center;gap:var(--spacingVerticalM, 12px);min-height:144px;box-sizing:border-box}.drop-container.has-files{justify-content:space-between;border-color:var(--colorNeutralStroke2, #e0e0e0);cursor:default}:host(.appearance-filled) .drop-container{background-color:var(--colorNeutralBackground2, #fafafa)}.drop-container[role='button']{cursor:pointer}.drop-container[role='button']:focus-visible{outline:2px solid var(--colorStrokeFocus2, #000000);outline-offset:2px}.drop-container.dragging{background-color:var(--colorNeutralBackground1Hover, #f5f5f5);border-color:var(--colorNeutralStrokeAccessible, #616161)}.drop-container.no-dnd:not(.readonly){border-style:solid}.drop-container.readonly{cursor:default;border-style:solid}.drop-container.has-files.dragging{border-style:dashed;background-color:var(--colorNeutralBackground1Hover, #f5f5f5)}.empty-prompt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacingVerticalXS, 4px);pointer-events:none;}.empty-prompt-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacingVerticalXXS, 2px);color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px)}.empty-prompt-icon{color:inherit}.empty-prompt-text{color:inherit;text-align:center}.empty-prompt-button{pointer-events:auto}.empty-readonly{display:flex;align-items:center;justify-content:center}.empty-readonly-text{color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px);font-style:italic}.compact-prompt{display:flex;align-items:center;justify-content:space-between;gap:var(--spacingHorizontalM, 12px);padding:var(--spacingVerticalM, 12px) 0 0 0;border-top:1px dashed var(--colorNeutralStroke3, #ebebeb);pointer-events:none}.compact-prompt-text{display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS, 4px);color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px);flex:1 1 auto;min-width:0}.compact-prompt-icon{color:inherit;flex:0 0 auto}.compact-prompt-button{pointer-events:auto;flex:0 0 auto}.file-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:var(--spacingHorizontalXS, 4px) var(--spacingHorizontalS, 8px);max-height:80px;overflow-y:auto;scrollbar-gutter:stable}.file-chip{display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS, 4px);padding:4px var(--spacingHorizontalXS, 4px) 4px var(--spacingHorizontalS, 8px);border:1px solid var(--colorNeutralStroke2, #e0e0e0);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorNeutralBackground1, #ffffff);max-width:280px;min-width:0;flex:0 0 auto;height:32px;box-sizing:border-box}.file-chip-icon{flex:0 0 auto;color:var(--colorNeutralForeground3, #707070)}.file-chip-name{background:none;border:none;padding:0;font:inherit;color:var(--colorBrandForeground1, #0f6cbd);text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left;min-width:0;flex:1 1 auto;font-size:var(--fontSizeBase200, 12px);line-height:1}.file-chip-name:disabled{color:var(--colorNeutralForegroundDisabled, #bdbdbd);cursor:not-allowed}.file-chip-name-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-chip-detail{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS, 4px);color:var(--colorNeutralForeground3, #707070);font-size:11px;line-height:1}.file-chip-remove{flex:0 0 auto}.gallery{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalM, 12px)}.thumb{display:flex;flex-direction:column;gap:var(--spacingVerticalXS, 4px)}.thumb-frame{position:relative;width:80px;height:80px}.thumb-button{position:relative;display:flex;align-items:center;justify-content:center;width:80px;height:80px;padding:0;margin:0;border:1px solid var(--colorNeutralStroke2, #e0e0e0);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorNeutralBackground1, #ffffff);overflow:hidden;cursor:default;transition:border-color 100ms ease, transform 100ms ease}.thumb-button.clickable{cursor:zoom-in}.thumb-button.clickable:hover{border-color:var(--colorBrandStroke1, #0f6cbd);transform:scale(1.02)}.thumb-button:focus-visible{outline:2px solid var(--colorStrokeFocus2, #000000);outline-offset:2px}.thumb-button:disabled{cursor:not-allowed;opacity:0.7}.thumb-img{width:100%;height:100%;object-fit:cover;display:block}.thumb-placeholder-icon{color:var(--colorNeutralForeground3, #707070)}.thumb-saved-badge{position:absolute;bottom:4px;left:4px}.thumb-meta{display:flex;flex-direction:column;gap:2px;max-width:100%}.thumb-name{background:none;border:none;padding:0;font:inherit;color:var(--colorBrandForeground1, #0f6cbd);text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left;display:block;max-width:100%;overflow:hidden}.thumb-name:disabled{color:var(--colorNeutralForegroundDisabled, #bdbdbd);cursor:not-allowed}.thumb-name-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fontSizeBase200, 12px)}.thumb-stamp{font-size:10px;color:var(--colorNeutralForeground3, #707070)}.thumb-remove{position:absolute;top:4px;right:4px}:host(.disabled){opacity:0.6}:host(.disabled) .drop-container{cursor:not-allowed}.message{color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px)}.message.include-error-padding{min-height:var(--lineHeightBase200, 16px);display:inline-block}.message.error{color:var(--colorPaletteRedForeground1, #b10e1c)}:host(.has-error) .drop-container{border-color:var(--colorPaletteRedBorder2, #b10e1c)}.lightbox{width:100vw;height:100vh;max-width:100vw;max-height:100vh;margin:0;padding:var(--spacingVerticalL, 16px);border:none;background:transparent;box-sizing:border-box;align-items:center;justify-content:center}.lightbox[open]{display:flex;flex-direction:column;animation:lightbox-fade-in 100ms ease}.lightbox::backdrop{background-color:rgba(0, 0, 0, 0.85);animation:lightbox-fade-in 100ms ease}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}.lightbox-content{display:flex;flex-direction:column;width:100%;height:100%;max-width:1200px;gap:var(--spacingVerticalS, 8px)}.lightbox-header{display:flex;align-items:center;justify-content:space-between;gap:var(--spacingHorizontalM, 12px);color:#ffffff;padding:0 var(--spacingHorizontalS, 8px)}.lightbox-name{font-size:var(--fontSizeBase300, 14px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}.lightbox-stage{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0}.lightbox-image{max-width:100%;max-height:100%;object-fit:contain}.lightbox-error{color:#ffffff;font-style:italic}.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%)}.lightbox-prev{left:var(--spacingHorizontalS, 8px)}.lightbox-next{right:var(--spacingHorizontalS, 8px)}.lightbox-nav,.lightbox-close{--colorNeutralForeground2:#ffffff;--colorNeutralForeground2Hover:#ffffff;--colorNeutralForeground2Pressed:#ffffff;--colorNeutralForeground2BrandHover:#ffffff;--colorNeutralForeground2BrandPressed:#ffffff;--colorSubtleBackgroundHover:rgba(255, 255, 255, 0.12);--colorSubtleBackgroundPressed:rgba(255, 255, 255, 0.18);--colorSubtleBackgroundSelected:rgba(255, 255, 255, 0.18)}.lightbox-counter{text-align:center;color:rgba(255, 255, 255, 0.8);font-size:var(--fontSizeBase200, 12px);padding:4px 0}";export{p as udp_fluent_file_input}
+import{r as e,c as t,h as i,H as o,a as r}from"./index-Cgpvu-iV.js";import"@fluentui/web-components/field.js";import"@fluentui/web-components/label.js";function n(e){return"pending"===e.kind?e.file.name:e.name}function a(e){return(e||"").trim().toLowerCase()}function s(e){if("pending"===e.kind){const t=e.file;return`pending::${a(t.name)}::${t.size}::${t.lastModified}`}return`stored::${e.driveFileId}`}function l(e){var t;const i=null===(t=e.dataTransfer)||void 0===t?void 0:t.types;return!!i&&Array.from(i).includes("Files")}function c(e,t,i,o,r,n){if(t.accept&&!function(e,t){if(!t)return!0;const i=t.split(",").map((e=>e.trim())).filter((e=>e.length>0));if(0===i.length)return!0;const o=(e.type||"").toLowerCase(),r=(e.name||"").toLowerCase();for(const e of i){const t=e.toLowerCase();if(t.startsWith(".")){if(r.endsWith(t))return!0}else if(t.endsWith("/*")){const e=t.slice(0,-1);if(o.startsWith(e))return!0}else if(o===t)return!0}return!1}(e,t.accept))return"mime";if(null!=t.maxFileSizeBytes&&e.size>t.maxFileSizeBytes)return"size";if(!n&&r<=0)return"maxFiles";const s=a(e.name);return!n&&o.has(s)||i.has(s)?"duplicate":null}function d(e){if(!e)return null;const t=new Date(e);return Number.isNaN(t.getTime())?null:new Intl.DateTimeFormat(void 0,{dateStyle:"medium",timeStyle:"short"}).format(t)}function h(e,t){const i=URL.createObjectURL(e),o=document.createElement("a");o.href=i,o.download=t,o.style.display="none",document.body.appendChild(o),o.click(),document.body.removeChild(o),setTimeout((()=>URL.revokeObjectURL(i)),1e3)}const p=class{constructor(i){e(this,i),this.valueChanged=t(this,"valueChanged",7),this.fileRejected=t(this,"fileRejected",7),this.downloadRequested=t(this,"downloadRequested",7),this.inputBlur=t(this,"inputBlur",7),this.inputFocus=t(this,"inputFocus",7),this.view="list",this.value=[],this.includeErrorPadding=!0,this.required=!1,this.disabled=!1,this.readonly=!1,this.hideDragAndDrop=!1,this.hideButton=!1,this.displayUploadTime=!1,this.appearance="outline",this.disableLightbox=!1,this.items=[],this.isDragging=!1,this.fieldHasFocus=!1,this.lightboxIndex=-1,this.previews=new Map,this.lightboxTrigger=null,this.requestDownload=e=>{this.disabled||("pending"!==e.kind?"function"==typeof this.loadStoredFile?this.loadStoredFile(e).then((t=>{h(t instanceof File?t:new File([t],e.name,{type:t.type||"application/octet-stream"}),e.name)})).catch((()=>{})):this.downloadRequested.emit(e):h(e.file,e.file.name))},this.handleBrowseClick=e=>{var t;this.disabled||this.readonly||(e.preventDefault(),e.stopPropagation(),null===(t=this.fileInputRef)||void 0===t||t.click())},this.handleInputChange=e=>{const t=e.target;t.files&&t.files.length>0&&this.intakeFiles(t.files),t.value=""},this.handleDragEnter=e=>{this.disabled||this.readonly||this.hideDragAndDrop||l(e)&&(e.preventDefault(),e.stopPropagation(),this.isDragging=!0)},this.handleDragOver=e=>{this.disabled||this.readonly||this.hideDragAndDrop||l(e)&&(e.preventDefault(),e.stopPropagation(),e.dataTransfer&&(e.dataTransfer.dropEffect="copy"))},this.handleDragLeave=e=>{if(this.disabled||this.readonly||this.hideDragAndDrop)return;e.preventDefault(),e.stopPropagation();const t=e.currentTarget,i=e.relatedTarget;t&&i&&t.contains(i)||(this.isDragging=!1)},this.handleDrop=e=>{if(this.disabled||this.readonly||this.hideDragAndDrop)return;e.preventDefault(),e.stopPropagation(),this.isDragging=!1;const t=e.dataTransfer;t&&t.files&&t.files.length>0&&this.intakeFiles(t.files)},this.handleDropZoneKeyDown=e=>{var t;this.disabled||this.readonly||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),null===(t=this.fileInputRef)||void 0===t||t.click())},this.handleFieldFocusIn=()=>{this.fieldHasFocus||(this.fieldHasFocus=!0,this.inputFocus.emit())},this.handleFieldFocusOut=e=>{const t=e.relatedTarget,i=e.currentTarget;t&&i&&i.contains(t)||this.fieldHasFocus&&(this.fieldHasFocus=!1,this.inputBlur.emit())},this.handleLightboxKeyDown=e=>{"ArrowRight"===e.key?(e.preventDefault(),this.navigateLightbox(1)):"ArrowLeft"===e.key&&(e.preventDefault(),this.navigateLightbox(-1))},this.handleBackdropClick=e=>{e.target===e.currentTarget&&this.closeLightbox()},this.handleDialogClose=()=>{var e;this.lightboxIndex>=0&&(this.lightboxIndex=-1),null===(e=this.lightboxTrigger)||void 0===e||e.focus(),this.lightboxTrigger=null}}componentWillLoad(){this.items=Array.isArray(this.value)?this.value:[],"gallery"===this.view&&this.syncPreviews(this.items)}onValueChange(e){const t=Array.isArray(e)?e:[];t!==this.items&&(this.items=t,"gallery"===this.view&&this.syncPreviews(t))}onViewChange(e){"gallery"===e?this.syncPreviews(this.items):(this.clearPreviews(),this.lightboxIndex=-1)}disconnectedCallback(){this.clearPreviews()}clearPreviews(){this.previews.forEach((e=>{e.revokable&&e.url&&URL.revokeObjectURL(e.url)})),this.previews=new Map}syncPreviews(e){const t=new Set,i=new Map(this.previews);for(const o of e){const e=s(o);t.add(e),i.has(e)||i.set(e,this.createPreview(o))}for(const[e,o]of Array.from(i.entries()))t.has(e)||(o.revokable&&o.url&&URL.revokeObjectURL(o.url),i.delete(e));this.previews=i}createPreview(e){if("pending"===e.kind)return{url:URL.createObjectURL(e.file),loading:!1,revokable:!0,status:"ready"};if("function"!=typeof this.loadStoredFile)return{url:null,loading:!1,revokable:!1,status:"unavailable"};const t={url:null,loading:!0,revokable:!1,status:"loading"},i=s(e);return this.loadStoredFile(e).then((e=>{const o=e instanceof Blob?e:new Blob([e]),r=URL.createObjectURL(o);this.previews.get(i)===t?this.previews=new Map(this.previews).set(i,{url:r,loading:!1,revokable:!0,status:"ready"}):URL.revokeObjectURL(r)})).catch((()=>{this.previews.get(i)===t&&(this.previews=new Map(this.previews).set(i,Object.assign(Object.assign({},t),{loading:!1,status:"error"})))})),t}intakeFiles(e){if(this.disabled||this.readonly)return;const t=function(e,t,i){const o=Array.from(e),r=[],s=[],l=new Set,d=new Set(t.map((e=>a(n(e)))));let h=null==i.maxFiles?Number.POSITIVE_INFINITY:Math.max(0,i.maxFiles-t.length);const p=1===i.maxFiles,u=(new Date).toISOString();for(const e of o){const t=c(e,i,l,d,h,p);t?s.push({file:e,reason:t}):(l.add(a(e.name)),r.push({kind:"pending",file:e,uploadedAt:u}),h-=1)}return 0===r.length?{accepted:r,rejected:s,next:null}:{accepted:r,rejected:s,next:p?r:[...t,...r]}}(e,this.items,{accept:this.accept,maxFiles:this.maxFiles,maxFileSizeBytes:this.maxFileSizeBytes});t.rejected.forEach((e=>this.fileRejected.emit(e))),t.next&&this.commit(t.next)}commit(e){this.items=e,"gallery"===this.view&&this.syncPreviews(e),this.valueChanged.emit(e)}removeAt(e){if(this.disabled||this.readonly)return;if(e<0||e>=this.items.length)return;const t=this.items.slice();t.splice(e,1),this.commit(t)}openLightbox(e,t){this.disableLightbox||e<0||e>=this.items.length||(this.lightboxIndex=e,this.lightboxTrigger=null!=t?t:null,requestAnimationFrame((()=>{this.dialogRef&&!this.dialogRef.open&&this.dialogRef.showModal()})))}closeLightbox(){var e;this.lightboxIndex<0||(this.lightboxIndex=-1,(null===(e=this.dialogRef)||void 0===e?void 0:e.open)&&this.dialogRef.close())}navigateLightbox(e){if(this.lightboxIndex<0)return;const t=this.items.length;0!==t&&(this.lightboxIndex=(this.lightboxIndex+e+t)%t)}render(){const e=!!this.error,t=this.error||this.hint,r=!t&&!this.includeErrorPadding,n=1!==this.maxFiles,a=this.items.length>0,s=!(this.readonly||null!=this.maxFiles&&1!==this.maxFiles&&this.items.length>=this.maxFiles);return i(o,{key:"911a471d97b84b87438f82a619e2be6caf08d8bc",class:{"has-error":e,[`view-${this.view}`]:!0,[`appearance-${this.appearance}`]:!0,disabled:this.disabled,readonly:this.readonly}},i("fluent-field",{key:"0d30008ec2920ff45d3b21a97ab5a6a2256edaa8",class:{"no-message":r}},i("div",{key:"c391b54029953b88602ccfb66c40dc62cc0599e4",slot:"input",class:"root"},this.label&&i("fluent-label",{key:"07514be5f07b59c4e199d9d9b00ef6b6b6e6f882",class:"field-label",required:this.required,disabled:this.disabled},this.label),i("input",{key:"8283e2fc359d3e423503501a25d5bf92c2693af2",ref:e=>this.fileInputRef=e,type:"file",class:"hidden-input",name:this.name,accept:this.accept,multiple:n,disabled:this.disabled||this.readonly,onChange:this.handleInputChange,onClick:e=>e.stopPropagation()}),this.renderDropContainer({hasFiles:a,showDropZone:s,allowMultiple:n})),i("udp-text",{key:"6b4eafeb6fb3140cb9a079b9bdcded2b8ff0a736",slot:"message",variant:"caption1",class:{message:!0,error:e,"include-error-padding":this.includeErrorPadding}},t)),"gallery"===this.view&&i("dialog",{key:"25ac70c8af88510e4d6b3c4f020c964468bffd0e",class:"lightbox",ref:e=>this.dialogRef=e,onClose:this.handleDialogClose,onClick:this.handleBackdropClick,onKeyDown:this.handleLightboxKeyDown},this.lightboxIndex>=0&&this.renderLightboxContent()))}renderDropContainer(e){const{hasFiles:t,showDropZone:o,allowMultiple:r}=e,n=!this.hideDragAndDrop&&!this.readonly;return i("div",Object.assign({class:{"drop-container":!0,dragging:this.isDragging,"has-files":t,"no-dnd":!n,readonly:this.readonly},onDragEnter:this.handleDragEnter,onDragOver:this.handleDragOver,onDragLeave:this.handleDragLeave,onDrop:this.handleDrop,onFocusin:this.handleFieldFocusIn,onFocusout:this.handleFieldFocusOut},!n||t||this.readonly?{}:{role:"button",tabIndex:0,onKeyDown:this.handleDropZoneKeyDown}),t&&"list"===this.view&&this.renderFileList(),t&&"gallery"===this.view&&this.renderGallery(),!t&&this.readonly&&this.renderEmptyReadonly(r),o&&!t&&this.renderEmptyPrompt(r),o&&t&&this.renderCompactPrompt(r))}renderEmptyPrompt(e){const t=!this.hideDragAndDrop,o=!this.hideButton,r=this.itemNoun(e),n=this.dragAndDropMessage||`Drag and drop ${r} here`,a=this.browseFileMessage||`Browse ${r}`,s="gallery"===this.view?"image":"cloud-upload";return i("div",{class:"empty-prompt"},i("slot",{name:"start"}),t&&i("div",{class:"empty-prompt-content"},i("udp-fluent-icon",{name:s,size:"sm",class:"empty-prompt-icon"}),i("span",{class:"empty-prompt-text"},n)),o&&i("udp-fluent-button",{class:"empty-prompt-button",appearance:"outline",size:"small",disabled:this.disabled,onClick:this.handleBrowseClick},a),i("slot",{name:"end"}))}renderEmptyReadonly(e){const t=this.itemNoun(e);return i("div",{class:"empty-readonly"},i("span",{class:"empty-readonly-text"},"No ",t," attached"))}renderCompactPrompt(e){const t=!this.hideDragAndDrop,o=!this.hideButton,r=`Drag and drop more ${this.itemNoun(e)}`,n=e?"Browse":`Browse ${this.singularNoun()}`;return i("div",{class:"compact-prompt"},t&&i("div",{class:"compact-prompt-text"},i("udp-fluent-icon",{name:"gallery"===this.view?"image":"cloud-upload",size:"sm",class:"compact-prompt-icon"}),i("span",null,r)),o&&i("udp-fluent-button",{class:"compact-prompt-button",appearance:"outline",size:"small",disabled:this.disabled,onClick:this.handleBrowseClick},n))}itemNoun(e){return"gallery"===this.view?e?"images":"an image":e?"files":"a file"}singularNoun(){return"gallery"===this.view?"image":"file"}renderFileList(){return i("ul",{class:"file-list",role:"list"},this.items.map(((e,t)=>this.renderFileRow(e,t))))}renderFileRow(e,t){const o=n(e),r="pending"===e.kind?function(e){if(!Number.isFinite(e)||e<0)return"";if(e<1024)return`${e} B`;const t=["KB","MB","GB","TB"];let i=e/1024,o=0;for(;i>=1024&&o<t.length-1;)i/=1024,o+=1;return`${i.toFixed(i>=10||0===o?0:1)} ${t[o]}`}(e.file.size):null,a=this.displayUploadTime?d(e.uploadedAt):null,s=[o,r,a].filter(Boolean);return i("li",{class:"file-chip",key:`${e.kind}:${o}:${t}`,title:s.join(" · ")},i("udp-fluent-icon",{name:"document",size:"sm",class:"file-chip-icon"}),i("button",{type:"button",class:"file-chip-name",disabled:this.disabled,"aria-label":`Download ${o}`,onClick:()=>this.requestDownload(e)},i("span",{class:"file-chip-name-text"},o)),(r||a||"stored"===e.kind)&&i("span",{class:"file-chip-detail"},r&&i("span",null,r),a&&i("span",null,a),"stored"===e.kind&&i("udp-fluent-badge",{class:"file-chip-saved-badge",appearance:"filled",color:"subtle",size:"small"},"saved")),!this.readonly&&i("udp-fluent-icon-button",{class:"file-chip-remove",iconName:"dismiss",appearance:"subtle",size:"small",ariaLabel:`Remove ${o}`,disabled:this.disabled,onClick:()=>this.removeAt(t)}))}renderGallery(){return i("ul",{class:"gallery",role:"list"},this.items.map(((e,t)=>this.renderThumb(e,t))))}renderThumb(e,t){const o=s(e),r=this.previews.get(o),a=n(e),l=this.displayUploadTime?d(e.uploadedAt):null,c=!this.disableLightbox&&!!(null==r?void 0:r.url);return i("li",{class:"thumb",key:o},i("div",{class:"thumb-frame"},i("button",{type:"button",class:{"thumb-button":!0,clickable:c},onClick:e=>c&&this.openLightbox(t,e.currentTarget),disabled:!c,title:a},(null==r?void 0:r.url)?i("img",{class:"thumb-img",src:r.url,alt:a}):(null==r?void 0:r.loading)?i("udp-spinner",{size:"small"}):i("udp-fluent-icon",{name:"error"===(null==r?void 0:r.status)?"warning":"image",size:"md",class:"thumb-placeholder-icon"}),"stored"===e.kind&&i("udp-fluent-badge",{class:"thumb-saved-badge",appearance:"filled",color:"brand",size:"small"},"saved")),!this.readonly&&i("udp-fluent-icon-button",{class:"thumb-remove",iconName:"dismiss",appearance:"subtle",size:"small",ariaLabel:`Remove ${a}`,disabled:this.disabled,onClick:()=>this.removeAt(t)})),i("div",{class:"thumb-meta"},i("button",{type:"button",class:"thumb-name",disabled:this.disabled,"aria-label":`Download ${a}`,onClick:()=>this.requestDownload(e),title:`Download ${a}`},i("span",{class:"thumb-name-text"},a)),l&&i("span",{class:"thumb-stamp"},l)))}renderLightboxContent(){const e=this.items[this.lightboxIndex];if(!e)return null;const t=this.previews.get(s(e)),o=n(e),r=this.items.length,a=r>1;return i("div",{class:"lightbox-content","aria-label":o},i("div",{class:"lightbox-header"},i("span",{class:"lightbox-name",title:o},o),i("udp-fluent-icon-button",{class:"lightbox-close",iconName:"dismiss",appearance:"subtle",size:"large",ariaLabel:"Close preview",onClick:()=>this.closeLightbox()})),i("div",{class:"lightbox-stage"},a&&i("udp-fluent-icon-button",{class:"lightbox-nav lightbox-prev",iconName:"chevron-left",appearance:"subtle",size:"medium",ariaLabel:"Previous image",onClick:()=>this.navigateLightbox(-1)}),(null==t?void 0:t.url)?i("img",{class:"lightbox-image",src:t.url,alt:o}):(null==t?void 0:t.loading)?i("udp-spinner",{size:"medium"}):i("span",{class:"lightbox-error"},"No preview available"),a&&i("udp-fluent-icon-button",{class:"lightbox-nav lightbox-next",iconName:"chevron-right",appearance:"subtle",size:"medium",ariaLabel:"Next image",onClick:()=>this.navigateLightbox(1)})),a&&i("div",{class:"lightbox-counter"},this.lightboxIndex+1," / ",r))}get el(){return r(this)}static get watchers(){return{value:[{onValueChange:0}],view:[{onViewChange:0}]}}};p.style=":host{display:block;width:100%;font-family:var(--fontFamilyBase)}fluent-field{width:100%}fluent-field.no-message::part(message){display:none}.root{display:flex;flex-direction:column;gap:var(--spacingVerticalS, 8px);width:100%}.field-label{display:block;margin-bottom:var(--spacingVerticalXXS, 2px)}.hidden-input{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.drop-container{border:2px dashed var(--colorNeutralStroke1, #d1d1d1);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorNeutralBackground1, #ffffff);transition:background-color 100ms ease,     border-color 100ms ease;outline:none;padding:var(--spacingVerticalM, 12px);display:flex;flex-direction:column;justify-content:center;gap:var(--spacingVerticalM, 12px);min-height:144px;box-sizing:border-box}.drop-container.has-files{justify-content:space-between;border-color:var(--colorNeutralStroke2, #e0e0e0);cursor:default}:host(.appearance-filled) .drop-container{background-color:var(--colorNeutralBackground2, #fafafa)}.drop-container[role='button']{cursor:pointer}.drop-container[role='button']:focus-visible{outline:2px solid var(--colorStrokeFocus2, #000000);outline-offset:2px}.drop-container.dragging{background-color:var(--colorNeutralBackground1Hover, #f5f5f5);border-color:var(--colorNeutralStrokeAccessible, #616161)}.drop-container.no-dnd:not(.readonly){border-style:solid}.drop-container.readonly{cursor:default;border-style:solid}.drop-container.has-files.dragging{border-style:dashed;background-color:var(--colorNeutralBackground1Hover, #f5f5f5)}.empty-prompt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacingVerticalXS, 4px);pointer-events:none;}.empty-prompt-content{display:flex;flex-direction:column;align-items:center;gap:var(--spacingVerticalXXS, 2px);color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px)}.empty-prompt-icon{color:inherit}.empty-prompt-text{color:inherit;text-align:center}.empty-prompt-button{pointer-events:auto}.empty-readonly{display:flex;align-items:center;justify-content:center}.empty-readonly-text{color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px);font-style:italic}.compact-prompt{display:flex;align-items:center;justify-content:space-between;gap:var(--spacingHorizontalM, 12px);padding:var(--spacingVerticalM, 12px) 0 0 0;border-top:1px dashed var(--colorNeutralStroke3, #ebebeb);pointer-events:none}.compact-prompt-text{display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS, 4px);color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px);flex:1 1 auto;min-width:0}.compact-prompt-icon{color:inherit;flex:0 0 auto}.compact-prompt-button{pointer-events:auto;flex:0 0 auto}.file-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-content:flex-start;gap:var(--spacingHorizontalXS, 4px) var(--spacingHorizontalS, 8px);max-height:80px;overflow-y:auto;scrollbar-gutter:stable}.file-chip{display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS, 4px);padding:4px var(--spacingHorizontalXS, 4px) 4px var(--spacingHorizontalS, 8px);border:1px solid var(--colorNeutralStroke2, #e0e0e0);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorNeutralBackground1, #ffffff);max-width:280px;min-width:0;flex:0 0 auto;height:32px;box-sizing:border-box}.file-chip-icon{flex:0 0 auto;color:var(--colorNeutralForeground3, #707070)}.file-chip-name{background:none;border:none;padding:0;font:inherit;color:var(--colorBrandForeground1, #0f6cbd);text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left;min-width:0;flex:1 1 auto;font-size:var(--fontSizeBase200, 12px);line-height:1}.file-chip-name:disabled{color:var(--colorNeutralForegroundDisabled, #bdbdbd);cursor:not-allowed}.file-chip-name-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.file-chip-detail{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--spacingHorizontalXS, 4px);color:var(--colorNeutralForeground3, #707070);font-size:11px;line-height:1}.file-chip-remove{flex:0 0 auto}.gallery{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--spacingHorizontalM, 12px)}.thumb{display:flex;flex-direction:column;gap:var(--spacingVerticalXS, 4px)}.thumb-frame{position:relative;width:80px;height:80px}.thumb-button{position:relative;display:flex;align-items:center;justify-content:center;width:80px;height:80px;padding:0;margin:0;border:1px solid var(--colorNeutralStroke2, #e0e0e0);border-radius:var(--borderRadiusMedium, 4px);background-color:var(--colorNeutralBackground1, #ffffff);overflow:hidden;cursor:default;transition:border-color 100ms ease, transform 100ms ease}.thumb-button.clickable{cursor:zoom-in}.thumb-button.clickable:hover{border-color:var(--colorBrandStroke1, #0f6cbd);transform:scale(1.02)}.thumb-button:focus-visible{outline:2px solid var(--colorStrokeFocus2, #000000);outline-offset:2px}.thumb-button:disabled{cursor:not-allowed;opacity:0.7}.thumb-img{width:100%;height:100%;object-fit:cover;display:block}.thumb-placeholder-icon{color:var(--colorNeutralForeground3, #707070)}.thumb-saved-badge{position:absolute;bottom:4px;left:4px}.thumb-meta{display:flex;flex-direction:column;gap:2px;max-width:100%}.thumb-name{background:none;border:none;padding:0;font:inherit;color:var(--colorBrandForeground1, #0f6cbd);text-decoration:underline;text-underline-offset:2px;cursor:pointer;text-align:left;display:block;max-width:100%;overflow:hidden}.thumb-name:disabled{color:var(--colorNeutralForegroundDisabled, #bdbdbd);cursor:not-allowed}.thumb-name-text{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--fontSizeBase200, 12px)}.thumb-stamp{font-size:10px;color:var(--colorNeutralForeground3, #707070)}.thumb-remove{position:absolute;top:4px;right:4px}:host(.disabled){opacity:0.6}:host(.disabled) .drop-container{cursor:not-allowed}.message{color:var(--colorNeutralForeground3, #707070);font-size:var(--fontSizeBase200, 12px)}.message.include-error-padding{min-height:var(--lineHeightBase200, 16px);display:inline-block}.message.error{color:var(--colorPaletteRedForeground1, #b10e1c)}:host(.has-error) .drop-container{border-color:var(--colorPaletteRedBorder2, #b10e1c)}.lightbox{width:100vw;height:100vh;max-width:100vw;max-height:100vh;margin:0;padding:var(--spacingVerticalL, 16px);border:none;background:transparent;box-sizing:border-box;align-items:center;justify-content:center}.lightbox[open]{display:flex;flex-direction:column;animation:lightbox-fade-in 100ms ease}.lightbox::backdrop{background-color:rgba(0, 0, 0, 0.85);animation:lightbox-fade-in 100ms ease}@keyframes lightbox-fade-in{from{opacity:0}to{opacity:1}}.lightbox-content{display:flex;flex-direction:column;width:100%;height:100%;max-width:1200px;gap:var(--spacingVerticalS, 8px)}.lightbox-header{display:flex;align-items:center;justify-content:space-between;gap:var(--spacingHorizontalM, 12px);color:#ffffff;padding:0 var(--spacingHorizontalS, 8px)}.lightbox-name{font-size:var(--fontSizeBase300, 14px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1 1 auto;min-width:0}.lightbox-stage{position:relative;flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0}.lightbox-image{max-width:100%;max-height:100%;object-fit:contain}.lightbox-error{color:#ffffff;font-style:italic}.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%)}.lightbox-prev{left:var(--spacingHorizontalS, 8px)}.lightbox-next{right:var(--spacingHorizontalS, 8px)}.lightbox-nav,.lightbox-close{--colorNeutralForeground2:#ffffff;--colorNeutralForeground2Hover:#ffffff;--colorNeutralForeground2Pressed:#ffffff;--colorNeutralForeground2BrandHover:#ffffff;--colorNeutralForeground2BrandPressed:#ffffff;--colorSubtleBackgroundHover:rgba(255, 255, 255, 0.12);--colorSubtleBackgroundPressed:rgba(255, 255, 255, 0.18);--colorSubtleBackgroundSelected:rgba(255, 255, 255, 0.18)}.lightbox-counter{text-align:center;color:rgba(255, 255, 255, 0.8);font-size:var(--fontSizeBase200, 12px);padding:4px 0}";export{p as udp_fluent_file_input}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "udp-stencil-component-library",
-  "version": "26.2.0-beta.3",
+  "version": "26.2.0-beta.4",
   "description": "A Stencil based component library for UDP",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",