@aceshooting/lyra-ui 27.0.0 → 28.1.0

package/dist/components/media/file-input/file-input.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{emitValueEvents}from"../../../internal/value-events.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{FormControlController}from"../../../internal/form-control-controller.js";import{eventCollectionSupport}from"../../../internal/collection-snapshot.js";import{html,nothing}from"lit";import{property,state,query}from"lit/decorators.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{LyraElement}from"../../../internal/lyra-element.js";import{LyraFormControlElement}from"../../../internal/form-control-element.js";import{srOnly}from"../../../internal/a11y.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{setCustomState,syncValidityStates}from"../../../internal/custom-states.js";import{syncAriaDescribedByElements}from"../../../internal/aria-controls.js";import{getFormOwner,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{shadowFocusTarget}from"../../../internal/active-element.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{DropSessionController,isFileValue,readFileList}from"../../../internal/drop-session-controller.js";import{falseDefaultBooleanConverter}from"../../../internal/converters.js";import{sizes}from"../../../internal/sizes.styles.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{closeIcon,fileIcon}from"../../../internal/icons.js";import{styles}from"./file-input.styles.js";import{classifyFiles,EMPTY_MIME_TYPES,freezeDetail,handleDrop,mimeTypeFilter,outcomeText,snapshotMimeTypes}from"./file-intake.js";import{FILE_SIZE_UNIT_KEYS,formatFileSize,localizedNumberLabel}from"../attachment-chip/file-size.js";import{LYRA_DEFAULT_collapse,LYRA_DEFAULT_copy,LYRA_DEFAULT_details,LYRA_DEFAULT_dropzoneRejectedType,LYRA_DEFAULT_dropzoneReleaseToAdd,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_fileInputAcceptedMany,LYRA_DEFAULT_fileInputAcceptedOne,LYRA_DEFAULT_fileInputDefaultLabel,LYRA_DEFAULT_fileInputFolderRejected,LYRA_DEFAULT_fileInputRejectedCount,LYRA_DEFAULT_fileInputRejectedLimit,LYRA_DEFAULT_fileInputRejectedMany,LYRA_DEFAULT_fileInputRejectedMaxFiles,LYRA_DEFAULT_fileInputRejectedMaxTotalSize,LYRA_DEFAULT_fileInputRejectedOne,LYRA_DEFAULT_fileInputRejectedRead,LYRA_DEFAULT_fileInputRejectedSize,LYRA_DEFAULT_fileInputRejectedType,LYRA_DEFAULT_fileSizeUnitB,LYRA_DEFAULT_fileSizeUnitGb,LYRA_DEFAULT_fileSizeUnitKb,LYRA_DEFAULT_fileSizeUnitMb,LYRA_DEFAULT_fileSizeUnitTb,LYRA_DEFAULT_loading,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_open,LYRA_DEFAULT_progress,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_restore,LYRA_DEFAULT_search,LYRA_DEFAULT_select,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings.generated.js";installFormControlLabelSupport();const VALIDITY_FLAG_KEYS=new Set(["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"]);function isValidityFlagKey(value){return typeof value=="string"&&VALIDITY_FLAG_KEYS.has(value)}import{DEFAULT_MAX_FILE_SIZE_BYTES,DEFAULT_MAX_FILES,DEFAULT_MAX_TOTAL_SIZE_BYTES}from"./file-intake.js";const MAX_DROPPED_FOLDER_ENTRIES=1e4,INTERACTIVE_CONTENT_SELECTOR='a[href], area[href], button, input, select, textarea, summary, [contenteditable]:not([contenteditable="false"]), [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])';function isElementTarget(value){const candidate=value;return candidate.nodeType===1&&typeof candidate.matches=="function"}class LyraFileInput extends LyraFormControlElement{static{this.defaultStrings={...super.defaultStrings,collapse:LYRA_DEFAULT_collapse,copy:LYRA_DEFAULT_copy,details:LYRA_DEFAULT_details,dropzoneRejectedType:LYRA_DEFAULT_dropzoneRejectedType,dropzoneReleaseToAdd:LYRA_DEFAULT_dropzoneReleaseToAdd,fieldRequired:LYRA_DEFAULT_fieldRequired,fileInputAcceptedMany:LYRA_DEFAULT_fileInputAcceptedMany,fileInputAcceptedOne:LYRA_DEFAULT_fileInputAcceptedOne,fileInputDefaultLabel:LYRA_DEFAULT_fileInputDefaultLabel,fileInputFolderRejected:LYRA_DEFAULT_fileInputFolderRejected,fileInputRejectedCount:LYRA_DEFAULT_fileInputRejectedCount,fileInputRejectedLimit:LYRA_DEFAULT_fileInputRejectedLimit,fileInputRejectedMany:LYRA_DEFAULT_fileInputRejectedMany,fileInputRejectedMaxFiles:LYRA_DEFAULT_fileInputRejectedMaxFiles,fileInputRejectedMaxTotalSize:LYRA_DEFAULT_fileInputRejectedMaxTotalSize,fileInputRejectedOne:LYRA_DEFAULT_fileInputRejectedOne,fileInputRejectedRead:LYRA_DEFAULT_fileInputRejectedRead,fileInputRejectedSize:LYRA_DEFAULT_fileInputRejectedSize,fileInputRejectedType:LYRA_DEFAULT_fileInputRejectedType,fileSizeUnitB:LYRA_DEFAULT_fileSizeUnitB,fileSizeUnitGb:LYRA_DEFAULT_fileSizeUnitGb,fileSizeUnitKb:LYRA_DEFAULT_fileSizeUnitKb,fileSizeUnitMb:LYRA_DEFAULT_fileSizeUnitMb,fileSizeUnitTb:LYRA_DEFAULT_fileSizeUnitTb,loading:LYRA_DEFAULT_loading,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,open:LYRA_DEFAULT_open,progress:LYRA_DEFAULT_progress,removeWithContext:LYRA_DEFAULT_removeWithContext,restore:LYRA_DEFAULT_restore,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select,valueInvalid:LYRA_DEFAULT_valueInvalid}}static{this.collectionSupport=eventCollectionSupport}static{this.immutableEventDetails=Object.freeze(["lr-files","lr-input","lr-change"])}static{this.identityEventDetailCollectionItems=Object.freeze({"lr-input":Object.freeze(["value"]),"lr-change":Object.freeze(["value"])})}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles,srOnly]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},files:{attribute:!1,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0}}}get allowedMimeTypes(){return this._allowedMimeTypes}set allowedMimeTypes(next){if(next===this.inputs.allowed)return;this.inputs.allowed=next;const old=this._allowedMimeTypes;this._allowedMimeTypes=snapshotMimeTypes(next),this.requestUpdate("allowedMimeTypes",old)}get forbiddenMimeTypes(){return this._forbiddenMimeTypes}set forbiddenMimeTypes(next){if(next===this.inputs.forbidden)return;this.inputs.forbidden=next;const old=this._forbiddenMimeTypes;this._forbiddenMimeTypes=snapshotMimeTypes(next),this.requestUpdate("forbiddenMimeTypes",old)}constructor(){super(),this.multiple=!1,this.accept="",this.capture="",this.inputs={},this._allowedMimeTypes=EMPTY_MIME_TYPES,this._forbiddenMimeTypes=EMPTY_MIME_TYPES,this.maxFileSize=0,this.maxFiles=0,this.maxTotalSize=0,this.heldFileCount=0,this.heldTotalSize=0,this.nonRetaining=!1,this.valuePresent=!1,this.directory=!1,this.withoutPaste=!1,this.hint="",this.errorText="",this.withLabel=!1,this.withHint=!1,this.withError=!1,this.size="m",this.validators=[],this.hostAccessibleLabel=null,this.dragState="default",this.resultStatus="",this.rejectedFiles=Object.freeze([]),this.touched=!1,this.validityRevision=0,this.slotPresence=new SlotPresenceController(this),this.hasSyncedDescribedByElements=!1,this.announcementsArmed=!1,this._name=null,this._files=[],this._fileCount=0,this._disabled=!1,this._required=!1,this._fieldsetDisabled=!1,this.thumbnailUrls=new Map,this.markInteracted=()=>{this.touched||(this.touched=!0,this.updateValidity(),this.publishCustomStates())},this.onDragEnter=e=>this.dropSession.onDragEnter(e),this.onDragOver=e=>this.dropSession.onDragOver(e),this.onDragLeave=e=>this.dropSession.onDragLeave(e),this.onDrop=e=>handleDrop(this,this.dropSession,e,this.effectiveMultiple,(files,rejected)=>this.emitFiles(files,rejected)),this.onPaste=e=>{if(this.withoutPaste||this.liveDisabled)return;const files=readFileList(e.clipboardData?.files);files.length&&(e.preventDefault(),this.emitFiles(files))},this.onInputChange=e=>{e.stopPropagation();const input=e.target,files=[...input.files??[]];input.value="",!this.liveDisabled&&files.length&&this.emitFiles(files)},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onBlur=event=>{this.liveDisabled||(this.touched=!0),this.publishCustomStates(),relayNativeEvent(this,event)},this.onKeyDown=e=>{this.liveDisabled||(e.key==="Enter"||e.key===" "||e.key==="Spacebar")&&(e.preventDefault(),this.openPicker())},this.onDropzoneClick=event=>{const path=event.composedPath();path.includes(this.baseEl)||path.some(node=>isElementTarget(node)&&node.matches(INTERACTIVE_CONTENT_SELECTOR))||this.openPicker()},this.onVisibleLabelClick=event=>{const label=event.currentTarget,path=event.composedPath(),labelIndex=path.indexOf(label);(labelIndex<0?path:path.slice(0,labelIndex)).some(node=>isElementTarget(node)&&node.matches(INTERACTIVE_CONTENT_SELECTOR))||this.openPicker()},this.validityController=new FormControlController(this,{invalid:init=>this.emit("lr-invalid",null,init),interacted:this.markInteracted,customError:()=>this.validityController.customValidityMessage}),this.internals=this.validityController.formInternals,this.internals.setFormValue(null),this.dropSession=new DropSessionController(this,{isDisabled:()=>this.liveDisabled,previewRejects:items=>this.classify(items,!0).rejected.length>0,onStateChange:()=>{this.dragState=this.dropSession.state,this.publishCustomStates()}})}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}get name(){return this._name}set name(next){const old=this._name;this._name=next==null||next===""?null:String(next),this._name==null?this.removeAttribute("name"):this.setAttribute("name",this._name),this.syncFormValue(),this.requestUpdate("name",old)}get files(){return[...this._files]}set files(next){if(next===this.inputs.files)return;this.inputs.files=next;const old=this._files,valid=Array.isArray(next)?next.filter(isFileValue):[];this._files=[...valid];const oldCount=this._fileCount;this._fileCount=this._files.length,this.syncThumbnailUrls(),this.syncFormValue(),this.updateValidity(),this.requestUpdate("files",old),oldCount!==this._fileCount&&this.requestUpdate("fileCount",oldCount)}get fileCount(){return this._fileCount}get dragging(){return this.dragState!=="default"}get effectiveMultiple(){return this.multiple||this.directory}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._fieldsetDisabled=this.validityController?.fieldsetDisabled(this._fieldsetDisabled)??this._fieldsetDisabled,this._disabled&&this.dropSession.reset(),this.updateValidity(),this.requestUpdate("disabled",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}get validationTarget(){return this.validationTargetOverride??this.baseEl}set validationTarget(next){this.validationTargetOverride=next??void 0,this.validityController.refreshAnchor()}[VALIDITY_ANCHOR](){return this.validationTarget??null}willUpdate(changed){super.willUpdate(changed),(changed.has("multiple")||changed.has("directory")||changed.has("files"))&&(!this.effectiveMultiple&&this._files.length>1?this.files=this._files.slice(0,1):this.syncFormValue())}connectedCallback(){super.connectedCallback(),this.syncThumbnailUrls(),this.updateValidity(),this.hasUpdated&&this.syncValidatorAttributeObserver(),this.politeSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.assertiveSink??=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this})}disconnectedCallback(){this.disconnectValidatorAttributeObserver(),this.dropSession.reset();for(const thumbnail of this.thumbnailUrls.values())thumbnail.revoke();this.thumbnailUrls.clear(),this.politeSink?.release(),this.politeSink=void 0,this.assertiveSink?.release(),this.assertiveSink=void 0,this.announcementsArmed=!1,super.disconnectedCallback()}updated(changed){super.updated(changed),changed.has("validators")&&(this.updateValidity(),this.syncValidatorAttributeObserver()),(changed.has("valuePresent")||changed.has("nonRetaining"))&&this.updateValidity();const hostDescribedBy=this.getAttribute("aria-describedby");(hostDescribedBy||this.hasSyncedDescribedByElements)&&(this.hasSyncedDescribedByElements=syncAriaDescribedByElements(this,this.baseEl,hostDescribedBy)),this.announcementsArmed&&(changed.has("dragState")&&this.dragState!=="default"&&this.politeSink?.announce(this.dragStatusText()),changed.has("resultStatus")&&this.resultStatus&&this.politeSink?.announce(this.resultStatus),changed.has("rejectedFiles")&&this.rejectedFiles.length>0&&this.assertiveSink?.announce(this.rejectedFiles.map(rejected=>this.rejectionMessage(rejected)).join(" "))),this.announcementsArmed=!0}syncFormValue(){if(!this.name||this._files.length===0){const state2=this.effectiveMultiple?this.createRestorationFormData():this._files[0]??null;this.internals.setFormValue(null,state2);return}if(this.effectiveMultiple){const submitted=this.createFormData(),state2=this.createRestorationFormData();if(!submitted||!state2){this.internals.setFormValue(null);return}for(const file2 of this._files)submitted.append(this.name,file2);this.internals.setFormValue(submitted,state2);return}const file=this._files[0]??null;this.internals.setFormValue(file,file)}createFormData(){const FormDataCtor=this.ownerDocument?.defaultView?.FormData;return FormDataCtor?new FormDataCtor:null}createRestorationFormData(){const state2=this.createFormData();if(!state2)return null;for(const file of this._files)state2.append("file",file);return state2}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}validatorResult(){let validators;try{validators=Array.isArray(this.validators)?Array.from(this.validators):[]}catch{return{flags:{customError:!0},message:this.localize("valueInvalid")}}for(const validator of validators){let result;try{if(typeof validator=="object"&&validator!==null&&"checkValidity"in validator){const checked=validator.checkValidity(this);if(checked?.isValid===!0)continue;const flags={};for(const key of Array.isArray(checked?.invalidKeys)?checked.invalidKeys:[])isValidityFlagKey(key)&&(flags[key]=!0);Object.values(flags).some(Boolean)||(flags.customError=!0);let message=typeof checked?.message=="string"?checked.message:"";return!message&&typeof validator.message=="string"&&(message=validator.message),!message&&typeof validator.message=="function"&&(message=validator.message(this)),{flags,message:message||this.localize("valueInvalid")}}if(result=typeof validator=="function"?validator(this.files,this):validator?.validate(this.files,this),result===void 0||result===!0)continue;if(typeof result=="string")return{flags:{customError:!0},message:result};if(result===!1)return{flags:{customError:!0},message:this.localize("valueInvalid")};if(result&&typeof result=="object"){const flags={};for(const key of VALIDITY_FLAG_KEYS)Object.prototype.hasOwnProperty.call(result,key)&&result[key]&&(flags[key]=!0);if(Object.values(flags).some(Boolean))return{flags,message:this.localize("valueInvalid")}}}catch{return{flags:{customError:!0},message:this.localize("valueInvalid")}}}return{}}syncValidatorAttributeObserver(){this.disconnectValidatorAttributeObserver();const owner=this.ownerDocument.defaultView,MutationObserverCtor=owner?.MutationObserver;if(!this.isConnected||!owner||typeof MutationObserverCtor!="function")return;const attributes=new Set;let validators;try{validators=Array.isArray(this.validators)?Array.from(this.validators):[]}catch{return}for(const validator of validators)try{if(typeof validator!="object"||validator===null||!("checkValidity"in validator))continue;const observed=validator.observedAttributes;if(!Array.isArray(observed))continue;for(const name of observed)typeof name=="string"&&name.length>0&&attributes.add(name)}catch{continue}if(attributes.size===0)return;const binding={},observer=new MutationObserverCtor(()=>{this.validatorAttributeObserver!==binding||!this.isConnected||this.ownerDocument.defaultView!==owner||(this.updateValidity(),this.validityRevision++)});binding.observer=observer,binding.owner=owner;try{observer.observe(this,{attributes:!0,attributeFilter:[...attributes]}),this.validatorAttributeObserver=binding}catch{observer.disconnect()}}disconnectValidatorAttributeObserver(){const binding=this.validatorAttributeObserver;this.validatorAttributeObserver=void 0,binding?.observer.disconnect()}updateValidity(){if(this.barredFromValidation){this.validityController.setValidity({}),this.publishCustomStates();return}const flags={};let message="";this.required&&!this.hasEffectiveValue&&(flags.valueMissing=!0,message=this.localize("fieldRequired"));const configured=this.validatorResult();configured.flags&&Object.assign(flags,configured.flags),configured.message&&(message=configured.message),this.validityController.setValidity(flags,message),this.publishCustomStates()}get hasEffectiveValue(){return this._files.length>0||this.nonRetaining&&this.valuePresent}publishCustomStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred:this.barredFromValidation}),setCustomState(this.internals,"blank",!this.hasEffectiveValue),setCustomState(this.internals,"dragging",this.dragging),this.toggleAttribute("dragging",this.dragging)}checkValidity(){return this.validityController.checkValidity(()=>this.updateValidity())}reportValidity(){return this.validityController.syncConstraints(),this.touched=!0,this.updateValidity(),this.publishCustomStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.publishCustomStates(),this.requestUpdate()}resetValidity(){this.validityController.setCustomValidity(""),this.updateValidity(),this.requestUpdate()}formResetCallback(){this.touched=!1,this.files=[],this.rejectedFiles=[],this.resultStatus=""}formStateRestoreCallback(state2,reason){if(isFileValue(state2)){this.files=[state2];return}const restored=this.readFormDataFiles(state2);if(restored){this.files=restored;return}this.files=[]}readFormDataFiles(value){if(value===null||typeof value!="object")return;const FormDataCtor=this.ownerDocument.defaultView?.FormData??globalThis.FormData;try{FormDataCtor.prototype.has.call(value,"__lyra_form_state_brand_probe__");const iterator=value.values.call(value),files=[];let entries=0;for(;entries<=MAX_DROPPED_FOLDER_ENTRIES;){const next=iterator.next();if(next.done)return files;if(entries===MAX_DROPPED_FOLDER_ENTRIES)return;entries+=1,isFileValue(next.value)&&files.push(next.value)}return}catch{return}}formDisabledCallback(disabled){if(this.validityController?.reflectingDisabled)return;const wasDisabled=this.effectiveDisabled;this._fieldsetDisabled=disabled,wasDisabled!==this.effectiveDisabled&&(disabled&&this.dropSession.reset(),this.updateValidity(),this.requestUpdate())}syncThumbnailUrls(){const urlApi=this.ownerDocument.defaultView?.URL??globalThis.URL,canCreate=typeof urlApi.createObjectURL=="function",canRevoke=typeof urlApi.revokeObjectURL=="function";let changed=!1;for(const[file,thumbnail]of this.thumbnailUrls)(!this._files.includes(file)||thumbnail.owner!==urlApi)&&(thumbnail.revoke(),this.thumbnailUrls.delete(file),changed=!0);if(!this.isConnected){changed&&this.requestUpdate();return}if(canCreate)for(const file of this._files){if(!file.type.startsWith("image/")||this.thumbnailUrls.has(file))continue;const url=urlApi.createObjectURL(file);this.thumbnailUrls.set(file,{url,owner:urlApi,revoke:canRevoke?()=>urlApi.revokeObjectURL(url):()=>{}}),changed=!0}changed&&this.requestUpdate()}classify(fileList,isPreview=!1){const multiple=this.effectiveMultiple;return classifyFiles(this,fileList,multiple,this.nonRetaining||!multiple?[]:this._files,isPreview,mimeTypeFilter(this.allowedMimeTypes,this.forbiddenMimeTypes))}rejectionMessage(rejected){const filename=rejected.file.name;switch(rejected.reason){case"type":return this.localize("fileInputRejectedType",void 0,{filename});case"size":return this.localize("fileInputRejectedSize",void 0,{filename});case"count":return this.localize("fileInputRejectedCount",void 0,{filename});case"directory":return this.localize("fileInputFolderRejected",void 0,{filename});case"read":return this.localize("fileInputRejectedRead",void 0,{filename});case"limit":return this.localize("fileInputRejectedLimit",void 0,{filename});case"maxFiles":return this.localize("fileInputRejectedMaxFiles",void 0,{filename});case"maxTotalSize":return this.localize("fileInputRejectedMaxTotalSize",void 0,{filename})}}outcomeMessage(key,override,count){return outcomeText(override,()=>this.localize(key,void 0,{count}),count)}emitFiles(fileList,additionalRejected=[]){const detail=freezeDetail(this.classify(fileList),additionalRejected),{files,rejected}=detail;this.rejectedFiles=rejected;const messages=[],numberFormat=getNumberFormat(this.effectiveLocale);if(files.length&&messages.push(this.outcomeMessage(files.length===1?"fileInputAcceptedOne":"fileInputAcceptedMany",this.acceptedMessage,numberFormat.format(files.length))),rejected.length&&messages.push(this.outcomeMessage(rejected.length===1?"fileInputRejectedOne":"fileInputRejectedMany",this.rejectedMessage,numberFormat.format(rejected.length))),this.resultStatus=messages.filter(message=>message.length>0).join(" "),(files.length||rejected.length)&&(this.touched=!0,this.updateValidity()),files.length){this.nonRetaining||(this.files=this.effectiveMultiple?[...this._files,...files]:files);const value=Object.freeze([...this._files]);emitValueEvents(this,"input",{value},detail2=>this.emit("lr-input",detail2)),emitValueEvents(this,"change",{value},detail2=>this.emit("lr-change",detail2))}this.emit("lr-files",detail)}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}openPicker(){this.liveDisabled||this.inputEl?.click()}focus(options){this.liveDisabled||this.baseEl?.focus(options)}blur(){this.baseEl?.blur()}click(){this.openPicker()}statusText(){return this.dragState==="default"?this.resultStatus:this.dragStatusText()}dragStatusText(){return this.dragState==="accept"?this.localize("dropzoneReleaseToAdd"):this.dragState==="reject"?this.localize("dropzoneRejectedType"):""}get dropzoneInstruction(){return this.localize("fileInputDefaultLabel")}removeFile(index){if(this.liveDisabled||index<0||index>=this._files.length)return;this.touched=!0;const hadFocus=shadowFocusTarget(this)?.matches('[part="remove-button"]');this.files=this._files.filter((_,candidate)=>candidate!==index);const value=Object.freeze([...this._files]);emitValueEvents(this,"input",{value},detail=>this.emit("lr-input",detail)),emitValueEvents(this,"change",{value},detail=>this.emit("lr-change",detail)),hadFocus&&this.updateComplete.then(()=>{const buttons=this.renderRoot.querySelectorAll('[part="remove-button"]');(buttons[Math.min(index,buttons.length-1)]??this.baseEl)?.focus()})}fileSize(file){return formatFileSize(file.size,unit=>this.localize(FILE_SIZE_UNIT_KEYS[unit]),localizedNumberLabel(this.effectiveLocale))}renderFile(file,index){const thumbnail=this.thumbnailUrls.get(file)?.url;return html`<div part="file">
+import{__decorate}from"tslib";import{emitValueEvents}from"../../../internal/value-events.js";import{installFormControlLabelSupport}from"../../../internal/form-control-labels.js";import{FormControlController}from"../../../internal/form-control-controller.js";import{eventCollectionSupport}from"../../../internal/collection-snapshot.js";import{html,nothing}from"lit";import{property,state,query}from"lit/decorators.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{LyraElement}from"../../../internal/lyra-element.js";import{LyraFormControlElement}from"../../../internal/form-control-element.js";import{srOnly}from"../../../internal/a11y.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{VALIDITY_ANCHOR}from"../../../internal/anchored-validity.js";import{setCustomState,syncValidityStates}from"../../../internal/custom-states.js";import{syncAriaDescribedByElements}from"../../../internal/aria-controls.js";import{getFormOwner,isBarredFromValidation,setFormOwner}from"../../../internal/form-associated.js";import{shadowFocusTarget}from"../../../internal/active-element.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{DropSessionController,isFileValue,readFileList}from"../../../internal/drop-session-controller.js";import{falseDefaultBooleanConverter}from"../../../internal/converters.js";import{sizes}from"../../../internal/sizes.styles.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{closeIcon,fileIcon}from"../../../internal/icons.js";import{styles}from"./file-input.styles.js";import{classifyFiles,EMPTY_MIME_TYPES,freezeDetail,handleDrop,mimeTypeFilter,outcomeText,snapshotMimeTypes}from"./file-intake.js";import{FILE_SIZE_UNIT_KEYS,formatFileSize,localizedNumberLabel}from"../attachment-chip/file-size.js";import{LYRA_DEFAULT_dropzoneRejectedType,LYRA_DEFAULT_dropzoneReleaseToAdd,LYRA_DEFAULT_fileInputAcceptedMany,LYRA_DEFAULT_fileInputAcceptedOne,LYRA_DEFAULT_fileInputDefaultLabel,LYRA_DEFAULT_fileInputFolderRejected,LYRA_DEFAULT_fileInputRejectedCount,LYRA_DEFAULT_fileInputRejectedLimit,LYRA_DEFAULT_fileInputRejectedMany,LYRA_DEFAULT_fileInputRejectedMaxFiles,LYRA_DEFAULT_fileInputRejectedMaxTotalSize,LYRA_DEFAULT_fileInputRejectedOne,LYRA_DEFAULT_fileInputRejectedRead,LYRA_DEFAULT_fileInputRejectedSize,LYRA_DEFAULT_fileInputRejectedType}from"../../../internal/default-strings/media.generated.js";import{LYRA_DEFAULT_collapse,LYRA_DEFAULT_copy,LYRA_DEFAULT_date,LYRA_DEFAULT_details,LYRA_DEFAULT_fieldRequired,LYRA_DEFAULT_fileSizeUnitB,LYRA_DEFAULT_fileSizeUnitGb,LYRA_DEFAULT_fileSizeUnitKb,LYRA_DEFAULT_fileSizeUnitMb,LYRA_DEFAULT_fileSizeUnitTb,LYRA_DEFAULT_loading,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_open,LYRA_DEFAULT_progress,LYRA_DEFAULT_removeWithContext,LYRA_DEFAULT_restore,LYRA_DEFAULT_search,LYRA_DEFAULT_select,LYRA_DEFAULT_valueInvalid}from"../../../internal/default-strings/shared.generated.js";installFormControlLabelSupport();const VALIDITY_FLAG_KEYS=new Set(["badInput","customError","patternMismatch","rangeOverflow","rangeUnderflow","stepMismatch","tooLong","tooShort","typeMismatch","valueMissing"]);function isValidityFlagKey(value){return typeof value=="string"&&VALIDITY_FLAG_KEYS.has(value)}import{DEFAULT_MAX_FILE_SIZE_BYTES,DEFAULT_MAX_FILES,DEFAULT_MAX_TOTAL_SIZE_BYTES}from"./file-intake.js";const MAX_DROPPED_FOLDER_ENTRIES=1e4,INTERACTIVE_CONTENT_SELECTOR='a[href], area[href], button, input, select, textarea, summary, [contenteditable]:not([contenteditable="false"]), [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])';function isElementTarget(value){const candidate=value;return candidate.nodeType===1&&typeof candidate.matches=="function"}class LyraFileInput extends LyraFormControlElement{static{this.defaultStrings={...super.defaultStrings,collapse:LYRA_DEFAULT_collapse,copy:LYRA_DEFAULT_copy,date:LYRA_DEFAULT_date,details:LYRA_DEFAULT_details,dropzoneRejectedType:LYRA_DEFAULT_dropzoneRejectedType,dropzoneReleaseToAdd:LYRA_DEFAULT_dropzoneReleaseToAdd,fieldRequired:LYRA_DEFAULT_fieldRequired,fileInputAcceptedMany:LYRA_DEFAULT_fileInputAcceptedMany,fileInputAcceptedOne:LYRA_DEFAULT_fileInputAcceptedOne,fileInputDefaultLabel:LYRA_DEFAULT_fileInputDefaultLabel,fileInputFolderRejected:LYRA_DEFAULT_fileInputFolderRejected,fileInputRejectedCount:LYRA_DEFAULT_fileInputRejectedCount,fileInputRejectedLimit:LYRA_DEFAULT_fileInputRejectedLimit,fileInputRejectedMany:LYRA_DEFAULT_fileInputRejectedMany,fileInputRejectedMaxFiles:LYRA_DEFAULT_fileInputRejectedMaxFiles,fileInputRejectedMaxTotalSize:LYRA_DEFAULT_fileInputRejectedMaxTotalSize,fileInputRejectedOne:LYRA_DEFAULT_fileInputRejectedOne,fileInputRejectedRead:LYRA_DEFAULT_fileInputRejectedRead,fileInputRejectedSize:LYRA_DEFAULT_fileInputRejectedSize,fileInputRejectedType:LYRA_DEFAULT_fileInputRejectedType,fileSizeUnitB:LYRA_DEFAULT_fileSizeUnitB,fileSizeUnitGb:LYRA_DEFAULT_fileSizeUnitGb,fileSizeUnitKb:LYRA_DEFAULT_fileSizeUnitKb,fileSizeUnitMb:LYRA_DEFAULT_fileSizeUnitMb,fileSizeUnitTb:LYRA_DEFAULT_fileSizeUnitTb,loading:LYRA_DEFAULT_loading,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,open:LYRA_DEFAULT_open,progress:LYRA_DEFAULT_progress,removeWithContext:LYRA_DEFAULT_removeWithContext,restore:LYRA_DEFAULT_restore,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select,valueInvalid:LYRA_DEFAULT_valueInvalid}}static{this.collectionSupport=eventCollectionSupport}static{this.immutableEventDetails=Object.freeze(["lr-files","lr-input","lr-change"])}static{this.identityEventDetailCollectionItems=Object.freeze({"lr-input":Object.freeze(["value"]),"lr-change":Object.freeze(["value"])})}static{this.formAssociated=!0}static{this.styles=[LyraElement.styles,sizes,styles,srOnly]}static{this.properties={customError:{attribute:"custom-error",reflect:!0,noAccessor:!0},name:{reflect:!0,noAccessor:!0},files:{attribute:!1,noAccessor:!0},disabled:{type:Boolean,reflect:!0,noAccessor:!0},required:{type:Boolean,reflect:!0,noAccessor:!0}}}get allowedMimeTypes(){return this._allowedMimeTypes}set allowedMimeTypes(next){if(next===this.inputs.allowed)return;this.inputs.allowed=next;const old=this._allowedMimeTypes;this._allowedMimeTypes=snapshotMimeTypes(next),this.requestUpdate("allowedMimeTypes",old)}get forbiddenMimeTypes(){return this._forbiddenMimeTypes}set forbiddenMimeTypes(next){if(next===this.inputs.forbidden)return;this.inputs.forbidden=next;const old=this._forbiddenMimeTypes;this._forbiddenMimeTypes=snapshotMimeTypes(next),this.requestUpdate("forbiddenMimeTypes",old)}constructor(){super(),this.multiple=!1,this.accept="",this.capture="",this.inputs={},this._allowedMimeTypes=EMPTY_MIME_TYPES,this._forbiddenMimeTypes=EMPTY_MIME_TYPES,this.maxFileSize=0,this.maxFiles=0,this.maxTotalSize=0,this.heldFileCount=0,this.heldTotalSize=0,this.nonRetaining=!1,this.valuePresent=!1,this.directory=!1,this.withoutPaste=!1,this.hint="",this.errorText="",this.withLabel=!1,this.withHint=!1,this.withError=!1,this.size="m",this.validators=[],this.hostAccessibleLabel=null,this.dragState="default",this.resultStatus="",this.rejectedFiles=Object.freeze([]),this.touched=!1,this.validityRevision=0,this.slotPresence=new SlotPresenceController(this),this.hasSyncedDescribedByElements=!1,this.announcementsArmed=!1,this._name=null,this._files=[],this._fileCount=0,this._disabled=!1,this._required=!1,this._fieldsetDisabled=!1,this.thumbnailUrls=new Map,this.markInteracted=()=>{this.touched||(this.touched=!0,this.updateValidity(),this.publishCustomStates())},this.onDragEnter=e=>this.dropSession.onDragEnter(e),this.onDragOver=e=>this.dropSession.onDragOver(e),this.onDragLeave=e=>this.dropSession.onDragLeave(e),this.onDrop=e=>handleDrop(this,this.dropSession,e,this.effectiveMultiple,(files,rejected)=>this.emitFiles(files,rejected)),this.onPaste=e=>{if(this.withoutPaste||this.liveDisabled)return;const files=readFileList(e.clipboardData?.files);files.length&&(e.preventDefault(),this.emitFiles(files))},this.onInputChange=e=>{e.stopPropagation();const input=e.target,files=[...input.files??[]];input.value="",!this.liveDisabled&&files.length&&this.emitFiles(files)},this.onFocus=event=>{if(this.liveDisabled){event.stopPropagation();return}relayNativeEvent(this,event)},this.onBlur=event=>{this.liveDisabled||(this.touched=!0),this.publishCustomStates(),relayNativeEvent(this,event)},this.onKeyDown=e=>{this.liveDisabled||(e.key==="Enter"||e.key===" "||e.key==="Spacebar")&&(e.preventDefault(),this.openPicker())},this.onDropzoneClick=event=>{const path=event.composedPath();path.includes(this.baseEl)||path.some(node=>isElementTarget(node)&&node.matches(INTERACTIVE_CONTENT_SELECTOR))||this.openPicker()},this.onVisibleLabelClick=event=>{const label=event.currentTarget,path=event.composedPath(),labelIndex=path.indexOf(label);(labelIndex<0?path:path.slice(0,labelIndex)).some(node=>isElementTarget(node)&&node.matches(INTERACTIVE_CONTENT_SELECTOR))||this.openPicker()},this.validityController=new FormControlController(this,{invalid:init=>this.emit("lr-invalid",null,init),interacted:this.markInteracted,customError:()=>this.validityController.customValidityMessage}),this.internals=this.validityController.formInternals,this.internals.setFormValue(null),this.dropSession=new DropSessionController(this,{isDisabled:()=>this.liveDisabled,previewRejects:items=>this.classify(items,!0).rejected.length>0,onStateChange:()=>{this.dragState=this.dropSession.state,this.publishCustomStates()}})}get form(){return getFormOwner(this.internals)}set form(owner){setFormOwner(this,owner)}get name(){return this._name}set name(next){const old=this._name;this._name=next==null||next===""?null:String(next),this._name==null?this.removeAttribute("name"):this.setAttribute("name",this._name),this.syncFormValue(),this.requestUpdate("name",old)}get files(){return[...this._files]}set files(next){if(next===this.inputs.files)return;this.inputs.files=next;const old=this._files,valid=Array.isArray(next)?next.filter(isFileValue):[];this._files=[...valid];const oldCount=this._fileCount;this._fileCount=this._files.length,this.syncThumbnailUrls(),this.syncFormValue(),this.updateValidity(),this.requestUpdate("files",old),oldCount!==this._fileCount&&this.requestUpdate("fileCount",oldCount)}get fileCount(){return this._fileCount}get dragging(){return this.dragState!=="default"}get effectiveMultiple(){return this.multiple||this.directory}get disabled(){return this._disabled}set disabled(next){const old=this._disabled;this._disabled=!!next,this.toggleAttribute("disabled",this._disabled),this._fieldsetDisabled=this.validityController?.fieldsetDisabled(this._fieldsetDisabled)??this._fieldsetDisabled,this._disabled&&this.dropSession.reset(),this.updateValidity(),this.requestUpdate("disabled",old)}get required(){return this._required}set required(next){const old=this._required;this._required=!!next,this.toggleAttribute("required",this._required),this.updateValidity(),this.requestUpdate("required",old)}get effectiveDisabled(){return this.disabled||this._fieldsetDisabled}get validationTarget(){return this.validationTargetOverride??this.baseEl}set validationTarget(next){this.validationTargetOverride=next??void 0,this.validityController.refreshAnchor()}[VALIDITY_ANCHOR](){return this.validationTarget??null}willUpdate(changed){super.willUpdate(changed),(changed.has("multiple")||changed.has("directory")||changed.has("files"))&&(!this.effectiveMultiple&&this._files.length>1?this.files=this._files.slice(0,1):this.syncFormValue())}connectedCallback(){super.connectedCallback(),this.syncThumbnailUrls(),this.updateValidity(),this.hasUpdated&&this.syncValidatorAttributeObserver(),this.politeSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.assertiveSink??=acquireAnnouncementSink("assertive",{document:this.ownerDocument,source:this})}disconnectedCallback(){this.disconnectValidatorAttributeObserver(),this.dropSession.reset();for(const thumbnail of this.thumbnailUrls.values())thumbnail.revoke();this.thumbnailUrls.clear(),this.politeSink?.release(),this.politeSink=void 0,this.assertiveSink?.release(),this.assertiveSink=void 0,this.announcementsArmed=!1,super.disconnectedCallback()}updated(changed){super.updated(changed),changed.has("validators")&&(this.updateValidity(),this.syncValidatorAttributeObserver()),(changed.has("valuePresent")||changed.has("nonRetaining"))&&this.updateValidity();const hostDescribedBy=this.getAttribute("aria-describedby");(hostDescribedBy||this.hasSyncedDescribedByElements)&&(this.hasSyncedDescribedByElements=syncAriaDescribedByElements(this,this.baseEl,hostDescribedBy)),this.announcementsArmed&&(changed.has("dragState")&&this.dragState!=="default"&&this.politeSink?.announce(this.dragStatusText()),changed.has("resultStatus")&&this.resultStatus&&this.politeSink?.announce(this.resultStatus),changed.has("rejectedFiles")&&this.rejectedFiles.length>0&&this.assertiveSink?.announce(this.rejectedFiles.map(rejected=>this.rejectionMessage(rejected)).join(" "))),this.announcementsArmed=!0}syncFormValue(){if(!this.name||this._files.length===0){const state2=this.effectiveMultiple?this.createRestorationFormData():this._files[0]??null;this.internals.setFormValue(null,state2);return}if(this.effectiveMultiple){const submitted=this.createFormData(),state2=this.createRestorationFormData();if(!submitted||!state2){this.internals.setFormValue(null);return}for(const file2 of this._files)submitted.append(this.name,file2);this.internals.setFormValue(submitted,state2);return}const file=this._files[0]??null;this.internals.setFormValue(file,file)}createFormData(){const FormDataCtor=this.ownerDocument?.defaultView?.FormData;return FormDataCtor?new FormDataCtor:null}createRestorationFormData(){const state2=this.createFormData();if(!state2)return null;for(const file of this._files)state2.append("file",file);return state2}get barredFromValidation(){return isBarredFromValidation(this,this.internals)}validatorResult(){let validators;try{validators=Array.isArray(this.validators)?Array.from(this.validators):[]}catch{return{flags:{customError:!0},message:this.localize("valueInvalid")}}for(const validator of validators){let result;try{if(typeof validator=="object"&&validator!==null&&"checkValidity"in validator){const checked=validator.checkValidity(this);if(checked?.isValid===!0)continue;const flags={};for(const key of Array.isArray(checked?.invalidKeys)?checked.invalidKeys:[])isValidityFlagKey(key)&&(flags[key]=!0);Object.values(flags).some(Boolean)||(flags.customError=!0);let message=typeof checked?.message=="string"?checked.message:"";return!message&&typeof validator.message=="string"&&(message=validator.message),!message&&typeof validator.message=="function"&&(message=validator.message(this)),{flags,message:message||this.localize("valueInvalid")}}if(result=typeof validator=="function"?validator(this.files,this):validator?.validate(this.files,this),result===void 0||result===!0)continue;if(typeof result=="string")return{flags:{customError:!0},message:result};if(result===!1)return{flags:{customError:!0},message:this.localize("valueInvalid")};if(result&&typeof result=="object"){const flags={};for(const key of VALIDITY_FLAG_KEYS)Object.prototype.hasOwnProperty.call(result,key)&&result[key]&&(flags[key]=!0);if(Object.values(flags).some(Boolean))return{flags,message:this.localize("valueInvalid")}}}catch{return{flags:{customError:!0},message:this.localize("valueInvalid")}}}return{}}syncValidatorAttributeObserver(){this.disconnectValidatorAttributeObserver();const owner=this.ownerDocument.defaultView,MutationObserverCtor=owner?.MutationObserver;if(!this.isConnected||!owner||typeof MutationObserverCtor!="function")return;const attributes=new Set;let validators;try{validators=Array.isArray(this.validators)?Array.from(this.validators):[]}catch{return}for(const validator of validators)try{if(typeof validator!="object"||validator===null||!("checkValidity"in validator))continue;const observed=validator.observedAttributes;if(!Array.isArray(observed))continue;for(const name of observed)typeof name=="string"&&name.length>0&&attributes.add(name)}catch{continue}if(attributes.size===0)return;const binding={},observer=new MutationObserverCtor(()=>{this.validatorAttributeObserver!==binding||!this.isConnected||this.ownerDocument.defaultView!==owner||(this.updateValidity(),this.validityRevision++)});binding.observer=observer,binding.owner=owner;try{observer.observe(this,{attributes:!0,attributeFilter:[...attributes]}),this.validatorAttributeObserver=binding}catch{observer.disconnect()}}disconnectValidatorAttributeObserver(){const binding=this.validatorAttributeObserver;this.validatorAttributeObserver=void 0,binding?.observer.disconnect()}updateValidity(){if(this.barredFromValidation){this.validityController.setValidity({}),this.publishCustomStates();return}const flags={};let message="";this.required&&!this.hasEffectiveValue&&(flags.valueMissing=!0,message=this.localize("fieldRequired"));const configured=this.validatorResult();configured.flags&&Object.assign(flags,configured.flags),configured.message&&(message=configured.message),this.validityController.setValidity(flags,message),this.publishCustomStates()}get hasEffectiveValue(){return this._files.length>0||this.nonRetaining&&this.valuePresent}publishCustomStates(){syncValidityStates(this.internals,{required:this.required,hasInteracted:this.touched,barred:this.barredFromValidation}),setCustomState(this.internals,"blank",!this.hasEffectiveValue),setCustomState(this.internals,"dragging",this.dragging),this.toggleAttribute("dragging",this.dragging)}checkValidity(){return this.validityController.checkValidity(()=>this.updateValidity())}reportValidity(){return this.validityController.syncConstraints(),this.touched=!0,this.updateValidity(),this.publishCustomStates(),this.internals.reportValidity()}setCustomValidity(message){this.validityController.setCustomValidity(message??""),this.publishCustomStates(),this.requestUpdate()}resetValidity(){this.validityController.setCustomValidity(""),this.updateValidity(),this.requestUpdate()}formResetCallback(){this.touched=!1,this.files=[],this.rejectedFiles=[],this.resultStatus=""}formStateRestoreCallback(state2,reason){if(isFileValue(state2)){this.files=[state2];return}const restored=this.readFormDataFiles(state2);if(restored){this.files=restored;return}this.files=[]}readFormDataFiles(value){if(value===null||typeof value!="object")return;const FormDataCtor=this.ownerDocument.defaultView?.FormData??globalThis.FormData;try{FormDataCtor.prototype.has.call(value,"__lyra_form_state_brand_probe__");const iterator=value.values.call(value),files=[];let entries=0;for(;entries<=MAX_DROPPED_FOLDER_ENTRIES;){const next=iterator.next();if(next.done)return files;if(entries===MAX_DROPPED_FOLDER_ENTRIES)return;entries+=1,isFileValue(next.value)&&files.push(next.value)}return}catch{return}}formDisabledCallback(disabled){if(this.validityController?.reflectingDisabled)return;const wasDisabled=this.effectiveDisabled;this._fieldsetDisabled=disabled,wasDisabled!==this.effectiveDisabled&&(disabled&&this.dropSession.reset(),this.updateValidity(),this.requestUpdate())}syncThumbnailUrls(){const urlApi=this.ownerDocument.defaultView?.URL??globalThis.URL,canCreate=typeof urlApi.createObjectURL=="function",canRevoke=typeof urlApi.revokeObjectURL=="function";let changed=!1;for(const[file,thumbnail]of this.thumbnailUrls)(!this._files.includes(file)||thumbnail.owner!==urlApi)&&(thumbnail.revoke(),this.thumbnailUrls.delete(file),changed=!0);if(!this.isConnected){changed&&this.requestUpdate();return}if(canCreate)for(const file of this._files){if(!file.type.startsWith("image/")||this.thumbnailUrls.has(file))continue;const url=urlApi.createObjectURL(file);this.thumbnailUrls.set(file,{url,owner:urlApi,revoke:canRevoke?()=>urlApi.revokeObjectURL(url):()=>{}}),changed=!0}changed&&this.requestUpdate()}classify(fileList,isPreview=!1){const multiple=this.effectiveMultiple;return classifyFiles(this,fileList,multiple,this.nonRetaining||!multiple?[]:this._files,isPreview,mimeTypeFilter(this.allowedMimeTypes,this.forbiddenMimeTypes))}rejectionMessage(rejected){const filename=rejected.file.name;switch(rejected.reason){case"type":return this.localize("fileInputRejectedType",void 0,{filename});case"size":return this.localize("fileInputRejectedSize",void 0,{filename});case"count":return this.localize("fileInputRejectedCount",void 0,{filename});case"directory":return this.localize("fileInputFolderRejected",void 0,{filename});case"read":return this.localize("fileInputRejectedRead",void 0,{filename});case"limit":return this.localize("fileInputRejectedLimit",void 0,{filename});case"maxFiles":return this.localize("fileInputRejectedMaxFiles",void 0,{filename});case"maxTotalSize":return this.localize("fileInputRejectedMaxTotalSize",void 0,{filename})}}outcomeMessage(key,override,count){return outcomeText(override,()=>this.localize(key,void 0,{count}),count)}emitFiles(fileList,additionalRejected=[]){const detail=freezeDetail(this.classify(fileList),additionalRejected),{files,rejected}=detail;this.rejectedFiles=rejected;const messages=[],numberFormat=getNumberFormat(this.effectiveLocale);if(files.length&&messages.push(this.outcomeMessage(files.length===1?"fileInputAcceptedOne":"fileInputAcceptedMany",this.acceptedMessage,numberFormat.format(files.length))),rejected.length&&messages.push(this.outcomeMessage(rejected.length===1?"fileInputRejectedOne":"fileInputRejectedMany",this.rejectedMessage,numberFormat.format(rejected.length))),this.resultStatus=messages.filter(message=>message.length>0).join(" "),(files.length||rejected.length)&&(this.touched=!0,this.updateValidity()),files.length){this.nonRetaining||(this.files=this.effectiveMultiple?[...this._files,...files]:files);const value=Object.freeze([...this._files]);emitValueEvents(this,"input",{value},detail2=>this.emit("lr-input",detail2)),emitValueEvents(this,"change",{value},detail2=>this.emit("lr-change",detail2))}this.emit("lr-files",detail)}get liveDisabled(){return this.effectiveDisabled||this.matches(":disabled")}openPicker(){this.liveDisabled||this.inputEl?.click()}focus(options){this.liveDisabled||this.baseEl?.focus(options)}blur(){this.baseEl?.blur()}click(){this.openPicker()}statusText(){return this.dragState==="default"?this.resultStatus:this.dragStatusText()}dragStatusText(){return this.dragState==="accept"?this.localize("dropzoneReleaseToAdd"):this.dragState==="reject"?this.localize("dropzoneRejectedType"):""}get dropzoneInstruction(){return this.localize("fileInputDefaultLabel")}removeFile(index){if(this.liveDisabled||index<0||index>=this._files.length)return;this.touched=!0;const hadFocus=shadowFocusTarget(this)?.matches('[part="remove-button"]');this.files=this._files.filter((_,candidate)=>candidate!==index);const value=Object.freeze([...this._files]);emitValueEvents(this,"input",{value},detail=>this.emit("lr-input",detail)),emitValueEvents(this,"change",{value},detail=>this.emit("lr-change",detail)),hadFocus&&this.updateComplete.then(()=>{const buttons=this.renderRoot.querySelectorAll('[part="remove-button"]');(buttons[Math.min(index,buttons.length-1)]??this.baseEl)?.focus()})}fileSize(file){return formatFileSize(file.size,unit=>this.localize(FILE_SIZE_UNIT_KEYS[unit]),localizedNumberLabel(this.effectiveLocale))}renderFile(file,index){const thumbnail=this.thumbnailUrls.get(file)?.url;return html`<div part="file">
       <span part="file-thumbnail" aria-hidden="true">
         ${thumbnail?html`<img part="file-image" src=${thumbnail} alt="" />`:html`<span part="file-icon">${fileIcon()}</span>`}
       </span>

package/dist/components/media/flag/flag.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{keyed}from"lit/directives/keyed.js";import{LyraElement}from"../../../internal/lyra-element.js";import{getDisplayNames}from"../../../internal/intl-cache.js";import{hostAriaLabel,srOnly}from"../../../internal/a11y.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{styles}from"./flag.styles.js";import{ALPHA2_RE,alpha3ToAlpha2,languageToCountry}from"./language-map.js";import"../../overlays/skeleton/skeleton.class.js";import{AnnouncementSinkController}from"../../../internal/announcer.js";import{devWarnOnce}from"../../../internal/dev-mode-attribute-warning.js";import{getFlagResolverGeneration,subscribeFlagResolver,loadFlagUrlResolver,warnMissingFlagResolver}from"./flag-url-resolver.js";import{LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,LYRA_DEFAULT_flagLoadError,LYRA_DEFAULT_loading,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_open,LYRA_DEFAULT_search,LYRA_DEFAULT_select}from"../../../internal/default-strings.generated.js";import{loadFlagUrl,loadBulkFlagUrl,setFlagUrlResolver}from"./flag-url-resolver.js";const FLAG_LOAD_ERROR_KEY="flagLoadError",FLAG_FIDELITIES=new Set(["compact","standard","detailed"]),FLAG_SHAPES=new Set(["rect","circle"]);function normalizeFlagFidelity(value){return FLAG_FIDELITIES.has(value)?value:"standard"}function normalizeFlagShape(value){return FLAG_SHAPES.has(value)?value:"rect"}function displayNameFor(code,locale){try{return getDisplayNames(locale,{type:"region"}).of(code.toUpperCase())??code.toUpperCase()}catch{return code.toUpperCase()}}class LyraFlag extends LyraElement{constructor(){super(...arguments),this._shape="rect",this._fidelity="standard",this.sourceState=Object.freeze({status:"idle",identity:"idle"}),this.resolverGeneration=getFlagResolverGeneration(),this.announcements=new AnnouncementSinkController(this),this.sourceRestartPending=!0,this.activeSourceRequest=0,this.resolveToken=0,this.onResolverGeneration=generation=>{!this.isConnected||generation===this.resolverGeneration||(this.resolverGeneration=generation)}}static{this.defaultStrings={...super.defaultStrings,collapse:LYRA_DEFAULT_collapse,details:LYRA_DEFAULT_details,flagLoadError:LYRA_DEFAULT_flagLoadError,loading:LYRA_DEFAULT_loading,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,open:LYRA_DEFAULT_open,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select}}static{this.styles=[LyraElement.styles,styles,srOnly]}get shape(){return this._shape}set shape(value){const old=this._shape;this._shape=normalizeFlagShape(value),this.requestUpdate("shape",old)}get fidelity(){return this._fidelity}set fidelity(value){const old=this._fidelity;this._fidelity=normalizeFlagFidelity(value),this.requestUpdate("fidelity",old)}get effectiveFidelity(){return normalizeFlagFidelity(this.fidelity)}get loading(){return this.sourceState.status==="loading"}get code(){if(this.country)return ALPHA2_RE.test(this.country)?this.country.toLowerCase():alpha3ToAlpha2(this.country);if(this.language)return languageToCountry(this.language)}get unresolved(){return this.src||!this.country&&!this.language?!1:this.code===void 0}connectedCallback(){super.connectedCallback(),this.sourceRestartPending=!0,this.stopFlagResolverSubscription=subscribeFlagResolver(this.onResolverGeneration),this.resolverGeneration!==getFlagResolverGeneration()&&(this.resolverGeneration=getFlagResolverGeneration()),this.requestUpdate()}disconnectedCallback(){this.resolveToken++,this.sourceRestartPending=!0,this.stopFlagResolverSubscription?.(),this.stopFlagResolverSubscription=void 0,super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.resolveToken++,this.sourceRestartPending=!0,this.announcements.adopted(),this.requestUpdate()}announceLoadError(){this.announcements.announceAssertive(this.localize(FLAG_LOAD_ERROR_KEY))}setSourceState(state2,announceError=!1){this.sourceState=Object.freeze(state2),this.toggleAttribute("data-error",state2.status==="error"),this.toggleAttribute("data-unresolved",this.unresolved),this.setAttribute("aria-busy",String(state2.status==="loading")),announceError&&this.isConnected&&this.announceLoadError()}failSource(identity,announce=!0){this.setSourceState({status:"error",identity},announce)}onImageLoad(event,identity,url,request){const image=event.currentTarget;!this.isConnected||request!==this.activeSourceRequest||!image||image!==this.renderRoot.querySelector('[part="image"]')||this.sourceState.status!=="loading"||this.sourceState.identity!==identity||this.sourceState.url!==url||this.setSourceState({status:"loaded",identity,url})}onImageError(event,identity,request){const image=event.currentTarget;!this.isConnected||request!==this.activeSourceRequest||!image||image!==this.renderRoot.querySelector('[part="image"]')||this.sourceState.status!=="loading"||this.sourceState.identity!==identity||this.failSource(identity)}willUpdate(changed){super.willUpdate(changed);const sourceChanged=changed.has("country")||changed.has("language")||changed.has("src")||changed.has("fidelity")||changed.has("resolverGeneration");if(typeof Node<"u"&&!this.isConnected){sourceChanged&&(this.resolveToken++,this.sourceRestartPending=!0);return}if(this.hasUpdated&&!sourceChanged&&!this.sourceRestartPending)return;const connectionBaseline=this.sourceRestartPending;this.sourceRestartPending=!1;const token=++this.resolveToken,request=++this.activeSourceRequest,URLCtor=this.ownerDocument?.defaultView?.URL??globalThis.URL,directValue=typeof this.src=="string"?this.src.trim():"";if((directValue||this.code)&&this.announcements.current("assertive"),directValue){const identity2=`direct:${directValue}`,url=safeMediaSrc(directValue,URLCtor);if(!url){this.failSource(identity2,!connectionBaseline);return}this.setSourceState({status:"loading",identity:identity2,url});return}const code=this.code;if(!code){this.setSourceState({status:"idle",identity:"idle"});return}const fidelity=this.effectiveFidelity,identity=`peer:${code}:${fidelity}:${this.resolverGeneration}`;this.setSourceState({status:"loading",identity}),loadFlagUrlResolver().then(async resolve=>{if(token!==this.resolveToken||request!==this.activeSourceRequest||!this.isConnected)return;if(typeof resolve!="function"){warnMissingFlagResolver(code),this.failSource(identity);return}const candidate=await resolve(code,fidelity==="standard"?void 0:{variant:fidelity});if(token!==this.resolveToken||request!==this.activeSourceRequest||!this.isConnected)return;if(candidate===void 0){this.setSourceState({status:"idle",identity});return}const url=safeMediaSrc(candidate,URLCtor);if(!url){this.failSource(identity);return}this.setSourceState({status:"loading",identity,url})}).catch(err=>{token!==this.resolveToken||request!==this.activeSourceRequest||!this.isConnected||(devWarnOnce("lyra-flag-resolve-failed",`<lr-flag> failed to resolve a flag URL for "${code}": ${err}`),this.failSource(identity))})}updated(changed){super.updated(changed),this.setAttribute("aria-busy",String(this.sourceState.status==="loading")),this.toggleAttribute("data-unresolved",this.unresolved)}render(){const state2=this.sourceState,request=this.activeSourceRequest;if(this.unresolved){const fallbackUrl=this.fallback?safeMediaSrc(this.fallback,this.ownerDocument?.defaultView?.URL??globalThis.URL):null,fallbackAlt=hostAriaLabel(this)??this.label??"";return html`<slot name="fallback"
+import{__decorate}from"tslib";import{html,nothing}from"lit";import{property,state}from"lit/decorators.js";import{keyed}from"lit/directives/keyed.js";import{LyraElement}from"../../../internal/lyra-element.js";import{getDisplayNames}from"../../../internal/intl-cache.js";import{hostAriaLabel,srOnly}from"../../../internal/a11y.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{styles}from"./flag.styles.js";import{ALPHA2_RE,alpha3ToAlpha2,languageToCountry}from"./language-map.js";import"../../overlays/skeleton/skeleton.class.js";import{AnnouncementSinkController}from"../../../internal/announcer.js";import{devWarnOnce}from"../../../internal/dev-mode-attribute-warning.js";import{getFlagResolverGeneration,subscribeFlagResolver,loadFlagUrlResolver,warnMissingFlagResolver}from"./flag-url-resolver.js";import{LYRA_DEFAULT_flagLoadError}from"../../../internal/default-strings/media.generated.js";import{LYRA_DEFAULT_collapse,LYRA_DEFAULT_details,LYRA_DEFAULT_loading,LYRA_DEFAULT_map,LYRA_DEFAULT_navigation,LYRA_DEFAULT_open,LYRA_DEFAULT_search,LYRA_DEFAULT_select}from"../../../internal/default-strings/shared.generated.js";import{loadFlagUrl,loadBulkFlagUrl,setFlagUrlResolver}from"./flag-url-resolver.js";const FLAG_LOAD_ERROR_KEY="flagLoadError",FLAG_FIDELITIES=new Set(["compact","standard","detailed"]),FLAG_SHAPES=new Set(["rect","circle"]);function normalizeFlagFidelity(value){return FLAG_FIDELITIES.has(value)?value:"standard"}function normalizeFlagShape(value){return FLAG_SHAPES.has(value)?value:"rect"}function displayNameFor(code,locale){try{return getDisplayNames(locale,{type:"region"}).of(code.toUpperCase())??code.toUpperCase()}catch{return code.toUpperCase()}}class LyraFlag extends LyraElement{constructor(){super(...arguments),this._shape="rect",this._fidelity="standard",this.sourceState=Object.freeze({status:"idle",identity:"idle"}),this.resolverGeneration=getFlagResolverGeneration(),this.announcements=new AnnouncementSinkController(this),this.sourceRestartPending=!0,this.activeSourceRequest=0,this.resolveToken=0,this.onResolverGeneration=generation=>{!this.isConnected||generation===this.resolverGeneration||(this.resolverGeneration=generation)}}static{this.defaultStrings={...super.defaultStrings,collapse:LYRA_DEFAULT_collapse,details:LYRA_DEFAULT_details,flagLoadError:LYRA_DEFAULT_flagLoadError,loading:LYRA_DEFAULT_loading,map:LYRA_DEFAULT_map,navigation:LYRA_DEFAULT_navigation,open:LYRA_DEFAULT_open,search:LYRA_DEFAULT_search,select:LYRA_DEFAULT_select}}static{this.styles=[LyraElement.styles,styles,srOnly]}get shape(){return this._shape}set shape(value){const old=this._shape;this._shape=normalizeFlagShape(value),this.requestUpdate("shape",old)}get fidelity(){return this._fidelity}set fidelity(value){const old=this._fidelity;this._fidelity=normalizeFlagFidelity(value),this.requestUpdate("fidelity",old)}get effectiveFidelity(){return normalizeFlagFidelity(this.fidelity)}get loading(){return this.sourceState.status==="loading"}get code(){if(this.country)return ALPHA2_RE.test(this.country)?this.country.toLowerCase():alpha3ToAlpha2(this.country);if(this.language)return languageToCountry(this.language)}get unresolved(){return this.src||!this.country&&!this.language?!1:this.code===void 0}connectedCallback(){super.connectedCallback(),this.sourceRestartPending=!0,this.stopFlagResolverSubscription=subscribeFlagResolver(this.onResolverGeneration),this.resolverGeneration!==getFlagResolverGeneration()&&(this.resolverGeneration=getFlagResolverGeneration()),this.requestUpdate()}disconnectedCallback(){this.resolveToken++,this.sourceRestartPending=!0,this.stopFlagResolverSubscription?.(),this.stopFlagResolverSubscription=void 0,super.disconnectedCallback()}adoptedCallback(){super.adoptedCallback(),this.resolveToken++,this.sourceRestartPending=!0,this.announcements.adopted(),this.requestUpdate()}announceLoadError(){this.announcements.announceAssertive(this.localize(FLAG_LOAD_ERROR_KEY))}setSourceState(state2,announceError=!1){this.sourceState=Object.freeze(state2),this.toggleAttribute("data-error",state2.status==="error"),this.toggleAttribute("data-unresolved",this.unresolved),this.setAttribute("aria-busy",String(state2.status==="loading")),announceError&&this.isConnected&&this.announceLoadError()}failSource(identity,announce=!0){this.setSourceState({status:"error",identity},announce)}onImageLoad(event,identity,url,request){const image=event.currentTarget;!this.isConnected||request!==this.activeSourceRequest||!image||image!==this.renderRoot.querySelector('[part="image"]')||this.sourceState.status!=="loading"||this.sourceState.identity!==identity||this.sourceState.url!==url||this.setSourceState({status:"loaded",identity,url})}onImageError(event,identity,request){const image=event.currentTarget;!this.isConnected||request!==this.activeSourceRequest||!image||image!==this.renderRoot.querySelector('[part="image"]')||this.sourceState.status!=="loading"||this.sourceState.identity!==identity||this.failSource(identity)}willUpdate(changed){super.willUpdate(changed);const sourceChanged=changed.has("country")||changed.has("language")||changed.has("src")||changed.has("fidelity")||changed.has("resolverGeneration");if(typeof Node<"u"&&!this.isConnected){sourceChanged&&(this.resolveToken++,this.sourceRestartPending=!0);return}if(this.hasUpdated&&!sourceChanged&&!this.sourceRestartPending)return;const connectionBaseline=this.sourceRestartPending;this.sourceRestartPending=!1;const token=++this.resolveToken,request=++this.activeSourceRequest,URLCtor=this.ownerDocument?.defaultView?.URL??globalThis.URL,directValue=typeof this.src=="string"?this.src.trim():"";if((directValue||this.code)&&this.announcements.current("assertive"),directValue){const identity2=`direct:${directValue}`,url=safeMediaSrc(directValue,URLCtor);if(!url){this.failSource(identity2,!connectionBaseline);return}this.setSourceState({status:"loading",identity:identity2,url});return}const code=this.code;if(!code){this.setSourceState({status:"idle",identity:"idle"});return}const fidelity=this.effectiveFidelity,identity=`peer:${code}:${fidelity}:${this.resolverGeneration}`;this.setSourceState({status:"loading",identity}),loadFlagUrlResolver().then(async resolve=>{if(token!==this.resolveToken||request!==this.activeSourceRequest||!this.isConnected)return;if(typeof resolve!="function"){warnMissingFlagResolver(code),this.failSource(identity);return}const candidate=await resolve(code,fidelity==="standard"?void 0:{variant:fidelity});if(token!==this.resolveToken||request!==this.activeSourceRequest||!this.isConnected)return;if(candidate===void 0){this.setSourceState({status:"idle",identity});return}const url=safeMediaSrc(candidate,URLCtor);if(!url){this.failSource(identity);return}this.setSourceState({status:"loading",identity,url})}).catch(err=>{token!==this.resolveToken||request!==this.activeSourceRequest||!this.isConnected||(devWarnOnce("lyra-flag-resolve-failed",`<lr-flag> failed to resolve a flag URL for "${code}": ${err}`),this.failSource(identity))})}updated(changed){super.updated(changed),this.setAttribute("aria-busy",String(this.sourceState.status==="loading")),this.toggleAttribute("data-unresolved",this.unresolved)}render(){const state2=this.sourceState,request=this.activeSourceRequest;if(this.unresolved){const fallbackUrl=this.fallback?safeMediaSrc(this.fallback,this.ownerDocument?.defaultView?.URL??globalThis.URL):null,fallbackAlt=hostAriaLabel(this)??this.label??"";return html`<slot name="fallback"
         >${fallbackUrl?html`<img part="fallback-image" src=${fallbackUrl} alt=${fallbackAlt} />`:nothing}</slot
       >`}if(state2.status==="error")return html`<span part="error">${this.localize(FLAG_LOAD_ERROR_KEY)}</span>`;const url=state2.status==="loading"||state2.status==="loaded"?state2.url:void 0;if(!url&&state2.status!=="loading")return html``;const code=this.code,alt=hostAriaLabel(this)??this.label??(code?displayNameFor(code,this.effectiveLocale):"");return html`
       ${state2.status==="loading"?html`

package/dist/components/media/image-comparer/image-comparer.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{emitValueEvents}from"../../../internal/value-events.js";import{html}from"lit";import{property,query}from"lit/decorators.js";import{syncAriaDescribedByElements}from"../../../internal/aria-controls.js";import{setCustomState}from"../../../internal/custom-states.js";import{attachInternalsSafely}from"../../../internal/element-internals.js";import{chevronIcon}from"../../../internal/icons.js";import{LyraElement}from"../../../internal/lyra-element.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{finiteRange,isSliderKey}from"../../../internal/numbers.js";import{styles}from"./image-comparer.styles.js";import{LYRA_DEFAULT_imageComparerLabel}from"../../../internal/default-strings.generated.js";const IMAGE_COMPARER_ORIENTATIONS=new Set(["horizontal","vertical"]);function normalizeOrientation(value){return IMAGE_COMPARER_ORIENTATIONS.has(value)?value:"horizontal"}class LyraImageComparer extends LyraElement{constructor(){super(...arguments),this.internals=attachInternalsSafely(this),this._position=50,this._orientation="horizontal",this.beforeLabel="",this.afterLabel="",this.accessibleLabel=null,this.hasSyncedDescribedByElements=!1,this.keyboardDirty=!1,this.onInput=event=>{const input=event.currentTarget;this.position=Number(input.value);const value=this.position;relayNativeEvent(this,event),this.emit("lr-input",{value})},this.onChange=event=>{this.position=Number(event.currentTarget.value);const value=this.position;relayNativeEvent(this,event),this.emit("lr-change",{value})},this.onPointerDown=event=>{if(!(!event.isPrimary||event.button!==0||this.activePointerId!==void 0)){this.activePointerId=event.pointerId,setCustomState(this.internals,"dragging",!0);try{event.currentTarget.setPointerCapture(event.pointerId)}catch{}}},this.onPointerEnd=event=>{event&&this.activePointerId!==void 0&&event.pointerId!==this.activePointerId||(this.activePointerId=void 0,setCustomState(this.internals,"dragging",!1))},this.onKeyDown=event=>{if(!isSliderKey(event.key))return;const next=this.keyboardPosition(event.key);if(next===void 0)return;event.preventDefault();const normalized=finiteRange(next,this.normalizedPosition,0,100);normalized!==this.normalizedPosition&&(this.position=normalized,this.keyboardDirty=!0,emitValueEvents(this,"input",{value:this.position},detail=>this.emit("lr-input",detail)))},this.onKeyUp=event=>{!isSliderKey(event.key)||!this.keyboardDirty||(event.preventDefault(),this.keyboardDirty=!1,emitValueEvents(this,"change",{value:this.position},detail=>this.emit("lr-change",detail)))},this.onFocus=event=>{relayNativeEvent(this,event)},this.onBlur=event=>{this.onPointerEnd(),this.keyboardDirty&&(this.keyboardDirty=!1,emitValueEvents(this,"change",{value:this.position},detail=>this.emit("lr-change",detail))),relayNativeEvent(this,event)}}static{this.defaultStrings={...super.defaultStrings,imageComparerLabel:LYRA_DEFAULT_imageComparerLabel}}static{this.styles=[LyraElement.styles,styles]}get position(){return this._position}set position(value){const old=this._position;this._position=finiteRange(value,50,0,100),this.requestUpdate("position",old)}get orientation(){return this._orientation}set orientation(value){const old=this._orientation;this._orientation=normalizeOrientation(value),this.requestUpdate("orientation",old)}get normalizedPosition(){return finiteRange(this.position,50,0,100)}keyboardPosition(key){if(key==="Home")return 0;if(key==="End")return 100;if(key==="PageUp")return this.normalizedPosition+10;if(key==="PageDown")return this.normalizedPosition-10;const rtl=this.effectiveDirection==="rtl";if(this.orientation==="vertical")return key==="ArrowUp"||key==="ArrowLeft"?this.normalizedPosition-1:key==="ArrowDown"||key==="ArrowRight"?this.normalizedPosition+1:void 0;if(key==="ArrowLeft")return this.normalizedPosition+(rtl?1:-1);if(key==="ArrowRight")return this.normalizedPosition+(rtl?-1:1);if(key==="ArrowUp")return this.normalizedPosition+1;if(key==="ArrowDown")return this.normalizedPosition-1}disconnectedCallback(){this.onPointerEnd(),super.disconnectedCallback()}updated(changed){super.updated(changed);const hostDescribedBy=this.getAttribute("aria-describedby");(hostDescribedBy||this.hasSyncedDescribedByElements)&&(this.hasSyncedDescribedByElements=syncAriaDescribedByElements(this,this.handleEl,hostDescribedBy))}focus(options){this.handleEl?.focus(options)}blur(){this.handleEl?.blur()}click(){this.handleEl?.click()}render(){const position=`${this.normalizedPosition}%`,label=this.accessibleLabel??this.localize("imageComparerLabel");return html`<div
+import{__decorate}from"tslib";import{emitValueEvents}from"../../../internal/value-events.js";import{html}from"lit";import{property,query}from"lit/decorators.js";import{syncAriaDescribedByElements}from"../../../internal/aria-controls.js";import{setCustomState}from"../../../internal/custom-states.js";import{attachInternalsSafely}from"../../../internal/element-internals.js";import{chevronIcon}from"../../../internal/icons.js";import{LyraElement}from"../../../internal/lyra-element.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{finiteRange,isSliderKey}from"../../../internal/numbers.js";import{styles}from"./image-comparer.styles.js";import{LYRA_DEFAULT_imageComparerLabel}from"../../../internal/default-strings/media.generated.js";const IMAGE_COMPARER_ORIENTATIONS=new Set(["horizontal","vertical"]);function normalizeOrientation(value){return IMAGE_COMPARER_ORIENTATIONS.has(value)?value:"horizontal"}class LyraImageComparer extends LyraElement{constructor(){super(...arguments),this.internals=attachInternalsSafely(this),this._position=50,this._orientation="horizontal",this.beforeLabel="",this.afterLabel="",this.accessibleLabel=null,this.hasSyncedDescribedByElements=!1,this.keyboardDirty=!1,this.onInput=event=>{const input=event.currentTarget;this.position=Number(input.value);const value=this.position;relayNativeEvent(this,event),this.emit("lr-input",{value})},this.onChange=event=>{this.position=Number(event.currentTarget.value);const value=this.position;relayNativeEvent(this,event),this.emit("lr-change",{value})},this.onPointerDown=event=>{if(!(!event.isPrimary||event.button!==0||this.activePointerId!==void 0)){this.activePointerId=event.pointerId,setCustomState(this.internals,"dragging",!0);try{event.currentTarget.setPointerCapture(event.pointerId)}catch{}}},this.onPointerEnd=event=>{event&&this.activePointerId!==void 0&&event.pointerId!==this.activePointerId||(this.activePointerId=void 0,setCustomState(this.internals,"dragging",!1))},this.onKeyDown=event=>{if(!isSliderKey(event.key))return;const next=this.keyboardPosition(event.key);if(next===void 0)return;event.preventDefault();const normalized=finiteRange(next,this.normalizedPosition,0,100);normalized!==this.normalizedPosition&&(this.position=normalized,this.keyboardDirty=!0,emitValueEvents(this,"input",{value:this.position},detail=>this.emit("lr-input",detail)))},this.onKeyUp=event=>{!isSliderKey(event.key)||!this.keyboardDirty||(event.preventDefault(),this.keyboardDirty=!1,emitValueEvents(this,"change",{value:this.position},detail=>this.emit("lr-change",detail)))},this.onFocus=event=>{relayNativeEvent(this,event)},this.onBlur=event=>{this.onPointerEnd(),this.keyboardDirty&&(this.keyboardDirty=!1,emitValueEvents(this,"change",{value:this.position},detail=>this.emit("lr-change",detail))),relayNativeEvent(this,event)}}static{this.defaultStrings={...super.defaultStrings,imageComparerLabel:LYRA_DEFAULT_imageComparerLabel}}static{this.styles=[LyraElement.styles,styles]}get position(){return this._position}set position(value){const old=this._position;this._position=finiteRange(value,50,0,100),this.requestUpdate("position",old)}get orientation(){return this._orientation}set orientation(value){const old=this._orientation;this._orientation=normalizeOrientation(value),this.requestUpdate("orientation",old)}get normalizedPosition(){return finiteRange(this.position,50,0,100)}keyboardPosition(key){if(key==="Home")return 0;if(key==="End")return 100;if(key==="PageUp")return this.normalizedPosition+10;if(key==="PageDown")return this.normalizedPosition-10;const rtl=this.effectiveDirection==="rtl";if(this.orientation==="vertical")return key==="ArrowUp"||key==="ArrowLeft"?this.normalizedPosition-1:key==="ArrowDown"||key==="ArrowRight"?this.normalizedPosition+1:void 0;if(key==="ArrowLeft")return this.normalizedPosition+(rtl?1:-1);if(key==="ArrowRight")return this.normalizedPosition+(rtl?-1:1);if(key==="ArrowUp")return this.normalizedPosition+1;if(key==="ArrowDown")return this.normalizedPosition-1}disconnectedCallback(){this.onPointerEnd(),super.disconnectedCallback()}updated(changed){super.updated(changed);const hostDescribedBy=this.getAttribute("aria-describedby");(hostDescribedBy||this.hasSyncedDescribedByElements)&&(this.hasSyncedDescribedByElements=syncAriaDescribedByElements(this,this.handleEl,hostDescribedBy))}focus(options){this.handleEl?.focus(options)}blur(){this.handleEl?.blur()}click(){this.handleEl?.click()}render(){const position=`${this.normalizedPosition}%`,label=this.accessibleLabel??this.localize("imageComparerLabel");return html`<div
       part="base comparison"
       data-orientation=${this.orientation}
       style="--lr-comparer-position: ${position}"

package/dist/components/media/image-viewer/image-viewer.class.d.ts

@@ -56,7 +56,8 @@ export{IMAGE_VIEWER_HIGHLIGHT_LIMIT}from'./image-viewer-limits.js';export interf
 * @csspart image-wrapper - The rotated wrapper around the image and its overlays.
 * @csspart image - The `<img>` element.
 * @csspart highlight-layer - The overlay hosting highlight boxes.
-* @csspart highlight - One highlight box (`data-tone`, `data-active`).
+* @csspart highlight - One highlight box (`data-tone`, `data-active`). Its box is exactly the
+*   region's percentage rectangle; the minimum pointer target is a transparent centred `::after`.
 * @csspart highlight-label - A highlight's visible label.
 * @csspart annotation-box - The in-progress draft rectangle.
 * @csspart error - Ordinary visible failure text. Fresh post-mount image/source failures append

package/dist/components/media/image-viewer/image-viewer.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{collectionSupport}from"../../../internal/collection-snapshot.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{keyed}from"lit/directives/keyed.js";import{LyraElement}from"../../../internal/lyra-element.js";import{HostDescriptionController}from"../../../internal/aria-controls.js";import{DocumentAnchorTarget}from"../../../internal/anchor-target.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{hostAriaLabel,srOnly}from"../../../internal/a11y.js";import{finiteNumber}from"../../../internal/numbers.js";import{chevronIcon}from"../../../internal/icons.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{styles}from"./image-viewer.styles.js";import{sanitizePercentRect}from"../../../internal/safe-css.js";import{AnnouncementSinkController}from"../../../internal/announcer.js";import{normalizeImageFit}from"../../../internal/image-fit.js";import{IMAGE_VIEWER_HIGHLIGHT_LIMIT}from"./image-viewer-limits.js";import{LYRA_DEFAULT_anchorJumped,LYRA_DEFAULT_anchorJumpedToPage,LYRA_DEFAULT_anchorNotFound,LYRA_DEFAULT_documentPreviewEmpty,LYRA_DEFAULT_documentPreviewTypeImage,LYRA_DEFAULT_imageViewerAnnotate,LYRA_DEFAULT_imageViewerAnnotationAdded,LYRA_DEFAULT_imageViewerAnnotationBoxPosition,LYRA_DEFAULT_imageViewerAnnotationCancelled,LYRA_DEFAULT_imageViewerAnnotationHint,LYRA_DEFAULT_imageViewerFailedToLoad,LYRA_DEFAULT_imageViewerFitActual,LYRA_DEFAULT_imageViewerFitContain,LYRA_DEFAULT_imageViewerFitLabel,LYRA_DEFAULT_imageViewerFitWidth,LYRA_DEFAULT_imageViewerHighlightsLabel,LYRA_DEFAULT_imageViewerLabel,LYRA_DEFAULT_imageViewerRotate,LYRA_DEFAULT_imageViewerUnlabeledHighlight}from"../../../internal/default-strings.generated.js";const MIN_REGION_PERCENT=2,ARROW_STEP_PERCENT=2;import{IMAGE_VIEWER_HIGHLIGHT_LIMIT as IMAGE_VIEWER_HIGHLIGHT_LIMIT2}from"./image-viewer-limits.js";function normalizeImageRotation(value){const degrees=typeof value=="number"?finiteNumber(value,0):0;return(Math.round(degrees/90)%4+4)%4*90}function normalizeImageRegionRect(value){const rect=sanitizePercentRect(value);if(!(!rect||rect.x<0||rect.y<0||rect.width<=0||rect.height<=0||rect.x+rect.width>100||rect.y+rect.height>100))return rect}function normalizeHighlightTone(value){return value==="success"||value==="warning"||value==="danger"||value==="neutral"?value:"accent"}function clamp(value,min,max){return Math.min(max,Math.max(min,value))}function screenPercentToImagePercent(px,py,rotation){switch(rotation){case 90:return{x:py,y:100-px};case 180:return{x:100-px,y:100-py};case 270:return{x:100-py,y:px};default:return{x:px,y:py}}}class LyraImageViewerBase extends LyraElement{}class LyraImageViewer extends DocumentAnchorTarget(LyraImageViewerBase){constructor(){super(...arguments),this.hostDescription=new HostDescriptionController(this,()=>this.renderRoot.querySelector('[part="base"][role="region"]')),this.src="",this.name="",this._fit="contain",this.zoom=1,this.minZoom=.5,this.maxZoom=4,this.zoomStep=.25,this._rotation=0,this.annotatable=!1,this.anchorKinds=["region"],this.loadState={kind:"idle"},this.draft=null,this.revealTarget=null,this.highlightFocusId=null,this.mediaLayoutSize=null,this.announcements=new AnnouncementSinkController(this,{eager:["assertive"]}),this.onImgLoad=event=>{const img=event.target;img===this.shadowRoot?.querySelector('[part="image"]')&&(this.loadState={kind:"loaded"},this.emit("lr-load",{naturalWidth:img.naturalWidth,naturalHeight:img.naturalHeight}))},this.onImgError=event=>{event.target===this.shadowRoot?.querySelector('[part="image"]')&&(this.cancelPointerDraft(),this.revealTarget=null,this.loadState={kind:"error"},this.announceLoadError(),this.emit("lr-render-error",{error:new Error("The image failed to load.")}))},this.onFrameZoomChange=event=>{this.zoom=event.detail.zoom},this.toggleAnnotatable=()=>{this.hasOperableContent&&(this.annotatable=!this.annotatable,this.emit("lr-annotatable-change",{annotatable:this.annotatable}))},this.onFitChange=event=>{this.fit=event.target.value},this.onWrapperKeyDown=event=>{if(event.target===event.currentTarget&&!(!this.annotatable||!this.hasOperableContent)){if(!this.draft){event.key==="Enter"&&(event.preventDefault(),this.draft={x:37.5,y:37.5,width:25,height:25},this.announceDraftPosition());return}switch(event.key){case"ArrowLeft":event.preventDefault(),event.shiftKey?this.draft={...this.draft,width:clamp(this.draft.width-ARROW_STEP_PERCENT,MIN_REGION_PERCENT,100-this.draft.x)}:this.draft={...this.draft,x:clamp(this.draft.x-ARROW_STEP_PERCENT,0,100-this.draft.width)};break;case"ArrowRight":event.preventDefault(),event.shiftKey?this.draft={...this.draft,width:clamp(this.draft.width+ARROW_STEP_PERCENT,MIN_REGION_PERCENT,100-this.draft.x)}:this.draft={...this.draft,x:clamp(this.draft.x+ARROW_STEP_PERCENT,0,100-this.draft.width)};break;case"ArrowUp":event.preventDefault(),event.shiftKey?this.draft={...this.draft,height:clamp(this.draft.height-ARROW_STEP_PERCENT,MIN_REGION_PERCENT,100-this.draft.y)}:this.draft={...this.draft,y:clamp(this.draft.y-ARROW_STEP_PERCENT,0,100-this.draft.height)};break;case"ArrowDown":event.preventDefault(),event.shiftKey?this.draft={...this.draft,height:clamp(this.draft.height+ARROW_STEP_PERCENT,MIN_REGION_PERCENT,100-this.draft.y)}:this.draft={...this.draft,y:clamp(this.draft.y+ARROW_STEP_PERCENT,0,100-this.draft.height)};break;case"Enter":event.preventDefault(),this.commitDraft();return;case"Escape":event.preventDefault(),this.draft=null,this.liveRegion?.announce(this.localize("imageViewerAnnotationCancelled"),{force:!0});return;default:return}this.announceDraftPosition()}},this.pointerDraftId=null,this.pointerOrigin=null,this.onWrapperPointerDown=event=>{if(!this.annotatable||!this.hasOperableContent||!this.wrapperEl||!event.isPrimary||event.button!==0||this.pointerDraftId!==null)return;const rect=this.wrapperEl.getBoundingClientRect(),px=clamp((event.clientX-rect.left)/rect.width*100,0,100),py=clamp((event.clientY-rect.top)/rect.height*100,0,100),origin=screenPercentToImagePercent(px,py,this.rotation);this.pointerOrigin=origin,this.pointerDraftId=event.pointerId;try{this.wrapperEl.setPointerCapture(event.pointerId)}catch{}this.draft={x:origin.x,y:origin.y,width:0,height:0},event.preventDefault()},this.onWrapperPointerMove=event=>{if(this.pointerDraftId!==event.pointerId||!this.pointerOrigin||!this.wrapperEl)return;const rect=this.wrapperEl.getBoundingClientRect(),px=clamp((event.clientX-rect.left)/rect.width*100,0,100),py=clamp((event.clientY-rect.top)/rect.height*100,0,100),point=screenPercentToImagePercent(px,py,this.rotation),x=Math.min(this.pointerOrigin.x,point.x),y=Math.min(this.pointerOrigin.y,point.y),width=Math.abs(point.x-this.pointerOrigin.x),height=Math.abs(point.y-this.pointerOrigin.y);this.draft={x,y,width,height}},this.onWrapperPointerUp=event=>{if(this.pointerDraftId!==event.pointerId)return;const draft=this.draft;this.cancelPointerDraft(event.pointerId),draft&&draft.width>=MIN_REGION_PERCENT&&draft.height>=MIN_REGION_PERCENT&&(this.draft=draft,this.commitDraft())}}static{this.defaultStrings={...super.defaultStrings,anchorJumped:LYRA_DEFAULT_anchorJumped,anchorJumpedToPage:LYRA_DEFAULT_anchorJumpedToPage,anchorNotFound:LYRA_DEFAULT_anchorNotFound,documentPreviewEmpty:LYRA_DEFAULT_documentPreviewEmpty,documentPreviewTypeImage:LYRA_DEFAULT_documentPreviewTypeImage,imageViewerAnnotate:LYRA_DEFAULT_imageViewerAnnotate,imageViewerAnnotationAdded:LYRA_DEFAULT_imageViewerAnnotationAdded,imageViewerAnnotationBoxPosition:LYRA_DEFAULT_imageViewerAnnotationBoxPosition,imageViewerAnnotationCancelled:LYRA_DEFAULT_imageViewerAnnotationCancelled,imageViewerAnnotationHint:LYRA_DEFAULT_imageViewerAnnotationHint,imageViewerFailedToLoad:LYRA_DEFAULT_imageViewerFailedToLoad,imageViewerFitActual:LYRA_DEFAULT_imageViewerFitActual,imageViewerFitContain:LYRA_DEFAULT_imageViewerFitContain,imageViewerFitLabel:LYRA_DEFAULT_imageViewerFitLabel,imageViewerFitWidth:LYRA_DEFAULT_imageViewerFitWidth,imageViewerHighlightsLabel:LYRA_DEFAULT_imageViewerHighlightsLabel,imageViewerLabel:LYRA_DEFAULT_imageViewerLabel,imageViewerRotate:LYRA_DEFAULT_imageViewerRotate,imageViewerUnlabeledHighlight:LYRA_DEFAULT_imageViewerUnlabeledHighlight}}static{this.styles=[LyraElement.styles,styles,srOnly]}static{this.collectionSupport=collectionSupport}static{this.immutableEventDetails=Object.freeze(["lr-annotation-create"])}get fit(){return this._fit}set fit(value){const old=this._fit;this._fit=normalizeImageFit(value),this.requestUpdate("fit",old)}get rotation(){return this._rotation}set rotation(value){const old=this._rotation;this._rotation=normalizeImageRotation(value),this.requestUpdate("rotation",old)}get hasOperableContent(){return this.loadState.kind==="loaded"}willUpdate(changed){if(super.willUpdate(changed),changed.has("src")){this.cancelPointerDraft(),this.revealTarget=null,this.mediaLayoutSize=null;const safeSrc=this.src?safeMediaSrc(this.src):null;this.loadState=safeSrc?{kind:"loading"}:this.src?{kind:"error"}:{kind:"idle"},this.hasUpdated&&this.src&&!safeSrc&&this.announceLoadError()}changed.has("annotatable")&&(!this.annotatable||!this.hasOperableContent)&&this.cancelPointerDraft()}updated(changed){super.updated(changed),changed.has("rotation")&&changed.get("rotation")!==void 0&&this.emit("lr-rotation-change",{rotation:this.rotation}),changed.has("fit")&&changed.get("fit")!==void 0&&this.emit("lr-fit-change",{fit:this.fit}),(changed.has("annotatable")||changed.has("loadState"))&&this.annotatable&&this.hasOperableContent&&(changed.has("loadState")||changed.get("annotatable")!==void 0)&&this.liveRegion?.announce(this.localize("imageViewerAnnotationHint"),{force:!0}),this.syncGeometryObserver()}zoomIn(){this.frameEl?.zoomIn()}zoomOut(){this.frameEl?.zoomOut()}resetZoom(){this.frameEl?.resetZoom()}rotate(){this.rotation=(this.rotation+90)%360}async applyAnchor(anchor){if(anchor.kind!=="region"||!this.hasOperableContent)return!1;const rect=normalizeImageRegionRect(anchor.rect);if(!rect)return!1;this.revealTarget=rect,await this.updateComplete;const target=this.shadowRoot?.querySelector("[data-reveal-target]"),viewport=this.frameEl?.shadowRoot?.querySelector('[part="viewport"]');if(!target||!viewport||target.getClientRects().length===0)return!1;target.scrollIntoView({block:"center",inline:"center"}),await new Promise(resolve=>{const view=this.ownerDocument.defaultView;view?view.requestAnimationFrame(()=>resolve()):resolve()});const targetRect=target.getBoundingClientRect(),viewportRect=viewport.getBoundingClientRect();return targetRect.right>viewportRect.left&&targetRect.left<viewportRect.right&&targetRect.bottom>viewportRect.top&&targetRect.top<viewportRect.bottom}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncGeometryObserver()}adoptedCallback(){super.adoptedCallback(),this.hostDescription.adopted(),this.disconnectGeometryObserver(),this.announcements.adopted(),this.scheduleAfterUpdate(()=>this.syncGeometryObserver())}disconnectGeometryObserver(){this.geometryObserver?.disconnect(),this.geometryObserver=void 0,this.observedWrapper=void 0,this.geometryFrame!==void 0&&this.geometryFrameOwner?.cancelAnimationFrame(this.geometryFrame),this.geometryFrame=void 0,this.geometryFrameOwner=void 0}updateMediaLayoutSize(width,height){!Number.isFinite(width)||!Number.isFinite(height)||width<=0||height<=0||this.mediaLayoutSize?.width===width&&this.mediaLayoutSize.height===height||(this.mediaLayoutSize={width,height})}scheduleMediaLayoutSize(width,height){const view=this.ownerDocument.defaultView;if(!view){this.updateMediaLayoutSize(width,height);return}this.geometryFrame!==void 0&&this.geometryFrameOwner?.cancelAnimationFrame(this.geometryFrame),this.geometryFrameOwner=view,this.geometryFrame=view.requestAnimationFrame(()=>{this.geometryFrame=void 0,this.geometryFrameOwner=void 0,this.updateMediaLayoutSize(Math.round(width*100)/100,Math.round(height*100)/100)})}syncGeometryObserver(){const wrapper=this.wrapperEl;if(wrapper===this.observedWrapper||(this.disconnectGeometryObserver(),!wrapper))return;this.observedWrapper=wrapper,this.scheduleMediaLayoutSize(wrapper.offsetWidth,wrapper.offsetHeight);const ResizeObserverConstructor=this.ownerDocument.defaultView?.ResizeObserver;ResizeObserverConstructor&&(this.geometryObserver=new ResizeObserverConstructor(entries=>{const entry=entries.find(candidate=>candidate.target===this.observedWrapper);entry&&this.scheduleMediaLayoutSize(entry.contentRect.width,entry.contentRect.height)}),this.geometryObserver.observe(wrapper))}announceLoadError(){this.announcements.announceAssertive(this.localize("imageViewerFailedToLoad"))}onHighlightActivate(id){this.activeHighlightId=id,this.emit("lr-highlight-activate",{highlightId:id})}announceDraftPosition(){if(!this.draft)return;const formatter=getNumberFormat(this.effectiveLocale,{maximumFractionDigits:0,useGrouping:!1});this.liveRegion?.announce(this.localize("imageViewerAnnotationBoxPosition",void 0,{x:formatter.format(Math.round(this.draft.x)),y:formatter.format(Math.round(this.draft.y)),width:formatter.format(Math.round(this.draft.width)),height:formatter.format(Math.round(this.draft.height))}))}commitDraft(){if(!this.draft)return;const rect={x:this.draft.x,y:this.draft.y,width:this.draft.width,height:this.draft.height};this.draft=null,this.emit("lr-annotation-create",{anchor:{kind:"region",rect}}),this.liveRegion?.announce(this.localize("imageViewerAnnotationAdded"),{force:!0})}cancelPointerDraft(pointerId=this.pointerDraftId,releaseCapture=!0){if(pointerId!=null&&this.pointerDraftId!==pointerId)return;const wrapper=this.wrapperEl,capturedPointerId=this.pointerDraftId;if(this.pointerDraftId=null,this.pointerOrigin=null,this.draft=null,releaseCapture&&wrapper&&capturedPointerId!=null)try{wrapper.releasePointerCapture(capturedPointerId)}catch{}}canonicalRegionHighlights(){const source=this.highlights;if(this.regionHighlights?.[0]===source)return this.regionHighlights[1];const ids=new Set,result=[];for(const highlight of this.highlights){if(!highlight||typeof highlight.id!="string"||highlight.id.trim().length===0||ids.has(highlight.id)||highlight.anchor.kind!=="region")continue;const rect=normalizeImageRegionRect(highlight.anchor.rect);rect&&(ids.add(highlight.id),result.push({highlight,rect}))}return this.regionHighlights=[source,result],result}boundedRegionHighlights(){const all=this.canonicalRegionHighlights();if(all.length<=IMAGE_VIEWER_HIGHLIGHT_LIMIT)return{all,visible:all};const visible=all.slice(0,IMAGE_VIEWER_HIGHLIGHT_LIMIT),active=this.activeHighlightId?all.find(entry=>entry.highlight.id===this.activeHighlightId):void 0;return active&&!visible.includes(active)&&(visible[visible.length-1]=active),{all,visible}}onHighlightFocus(id){this.highlightFocusId=id}onHighlightKeyDown(event,id){const buttons=[...this.shadowRoot.querySelectorAll('[part="highlight"]')];if(buttons.length<2)return;const current=buttons.findIndex(button=>button.dataset.highlightId===id),rtl=this.effectiveDirection==="rtl";let next=current;if(event.key==="Home")next=0;else if(event.key==="End")next=buttons.length-1;else if(event.key==="ArrowDown"||event.key===(rtl?"ArrowLeft":"ArrowRight"))next=(current+1)%buttons.length;else if(event.key==="ArrowUp"||event.key===(rtl?"ArrowRight":"ArrowLeft"))next=(current-1+buttons.length)%buttons.length;else return;event.preventDefault();const target=buttons[next];this.highlightFocusId=target.dataset.highlightId??null,target.focus()}renderHighlights(){if(!this.hasOperableContent)return nothing;const{all:regionHighlights,visible}=this.boundedRegionHighlights();if(!regionHighlights.length)return nothing;const formatter=getNumberFormat(this.effectiveLocale,{maximumFractionDigits:0,useGrouping:!1}),preferredFocusId=visible.some(({highlight})=>highlight.id===this.highlightFocusId)?this.highlightFocusId:visible.some(({highlight})=>highlight.id===this.activeHighlightId)?this.activeHighlightId:visible[0]?.highlight.id??null;return html`<div
+import{__decorate}from"tslib";import{collectionSupport}from"../../../internal/collection-snapshot.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{keyed}from"lit/directives/keyed.js";import{LyraElement}from"../../../internal/lyra-element.js";import{HostDescriptionController}from"../../../internal/aria-controls.js";import{DocumentAnchorTarget}from"../../../internal/anchor-target.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{hostAriaLabel,srOnly}from"../../../internal/a11y.js";import{finiteNumber}from"../../../internal/numbers.js";import{normalizeImageZoom}from"../../../internal/image-zoom.js";import{chevronIcon}from"../../../internal/icons.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{styles}from"./image-viewer.styles.js";import{sanitizePercentRect}from"../../../internal/safe-css.js";import{AnnouncementSinkController}from"../../../internal/announcer.js";import{normalizeImageFit}from"../../../internal/image-fit.js";import{IMAGE_VIEWER_HIGHLIGHT_LIMIT}from"./image-viewer-limits.js";import{LYRA_DEFAULT_imageViewerAnnotate,LYRA_DEFAULT_imageViewerAnnotationAdded,LYRA_DEFAULT_imageViewerAnnotationBoxPosition,LYRA_DEFAULT_imageViewerAnnotationCancelled,LYRA_DEFAULT_imageViewerAnnotationHint,LYRA_DEFAULT_imageViewerFailedToLoad,LYRA_DEFAULT_imageViewerFitActual,LYRA_DEFAULT_imageViewerFitContain,LYRA_DEFAULT_imageViewerFitLabel,LYRA_DEFAULT_imageViewerFitWidth,LYRA_DEFAULT_imageViewerHighlightsLabel,LYRA_DEFAULT_imageViewerLabel,LYRA_DEFAULT_imageViewerRotate,LYRA_DEFAULT_imageViewerUnlabeledHighlight}from"../../../internal/default-strings/media.generated.js";import{LYRA_DEFAULT_anchorJumped,LYRA_DEFAULT_anchorJumpedToPage,LYRA_DEFAULT_anchorNotFound,LYRA_DEFAULT_documentPreviewEmpty,LYRA_DEFAULT_documentPreviewTypeImage}from"../../../internal/default-strings/shared.generated.js";const MIN_REGION_PERCENT=2,ARROW_STEP_PERCENT=2;import{IMAGE_VIEWER_HIGHLIGHT_LIMIT as IMAGE_VIEWER_HIGHLIGHT_LIMIT2}from"./image-viewer-limits.js";function normalizeImageRotation(value){const degrees=typeof value=="number"?finiteNumber(value,0):0;return(Math.round(degrees/90)%4+4)%4*90}function normalizeImageRegionRect(value){const rect=sanitizePercentRect(value);if(!(!rect||rect.x<0||rect.y<0||rect.width<=0||rect.height<=0||rect.x+rect.width>100||rect.y+rect.height>100))return rect}function normalizeHighlightTone(value){return value==="success"||value==="warning"||value==="danger"||value==="neutral"?value:"accent"}function clamp(value,min,max){return Math.min(max,Math.max(min,value))}function screenPercentToImagePercent(px,py,rotation){switch(rotation){case 90:return{x:py,y:100-px};case 180:return{x:100-px,y:100-py};case 270:return{x:100-py,y:px};default:return{x:px,y:py}}}class LyraImageViewerBase extends LyraElement{}class LyraImageViewer extends DocumentAnchorTarget(LyraImageViewerBase){constructor(){super(...arguments),this.hostDescription=new HostDescriptionController(this,()=>this.renderRoot.querySelector('[part="base"][role="region"]')),this.src="",this.name="",this._fit="contain",this.zoom=1,this.minZoom=.5,this.maxZoom=4,this.zoomStep=.25,this._rotation=0,this.annotatable=!1,this.anchorKinds=["region"],this.loadState={kind:"idle"},this.draft=null,this.revealTarget=null,this.highlightFocusId=null,this.mediaLayoutSize=null,this.announcements=new AnnouncementSinkController(this,{eager:["assertive"]}),this.onImgLoad=event=>{const img=event.target;img===this.shadowRoot?.querySelector('[part="image"]')&&(this.loadState={kind:"loaded"},this.emit("lr-load",{naturalWidth:img.naturalWidth,naturalHeight:img.naturalHeight}))},this.onImgError=event=>{event.target===this.shadowRoot?.querySelector('[part="image"]')&&(this.cancelPointerDraft(),this.revealTarget=null,this.loadState={kind:"error"},this.announceLoadError(),this.emit("lr-render-error",{error:new Error("The image failed to load.")}))},this.onFrameZoomChange=event=>{this.zoom=event.detail.zoom},this.toggleAnnotatable=()=>{this.hasOperableContent&&(this.annotatable=!this.annotatable,this.emit("lr-annotatable-change",{annotatable:this.annotatable}))},this.onFitChange=event=>{this.fit=event.target.value},this.onWrapperKeyDown=event=>{if(event.target===event.currentTarget&&!(!this.annotatable||!this.hasOperableContent)){if(!this.draft){event.key==="Enter"&&(event.preventDefault(),this.draft={x:37.5,y:37.5,width:25,height:25},this.announceDraftPosition());return}switch(event.key){case"ArrowLeft":event.preventDefault(),event.shiftKey?this.draft={...this.draft,width:clamp(this.draft.width-ARROW_STEP_PERCENT,MIN_REGION_PERCENT,100-this.draft.x)}:this.draft={...this.draft,x:clamp(this.draft.x-ARROW_STEP_PERCENT,0,100-this.draft.width)};break;case"ArrowRight":event.preventDefault(),event.shiftKey?this.draft={...this.draft,width:clamp(this.draft.width+ARROW_STEP_PERCENT,MIN_REGION_PERCENT,100-this.draft.x)}:this.draft={...this.draft,x:clamp(this.draft.x+ARROW_STEP_PERCENT,0,100-this.draft.width)};break;case"ArrowUp":event.preventDefault(),event.shiftKey?this.draft={...this.draft,height:clamp(this.draft.height-ARROW_STEP_PERCENT,MIN_REGION_PERCENT,100-this.draft.y)}:this.draft={...this.draft,y:clamp(this.draft.y-ARROW_STEP_PERCENT,0,100-this.draft.height)};break;case"ArrowDown":event.preventDefault(),event.shiftKey?this.draft={...this.draft,height:clamp(this.draft.height+ARROW_STEP_PERCENT,MIN_REGION_PERCENT,100-this.draft.y)}:this.draft={...this.draft,y:clamp(this.draft.y+ARROW_STEP_PERCENT,0,100-this.draft.height)};break;case"Enter":event.preventDefault(),this.commitDraft();return;case"Escape":event.preventDefault(),this.draft=null,this.liveRegion?.announce(this.localize("imageViewerAnnotationCancelled"),{force:!0});return;default:return}this.announceDraftPosition()}},this.pointerDraftId=null,this.pointerOrigin=null,this.onWrapperPointerDown=event=>{if(!this.annotatable||!this.hasOperableContent||!this.wrapperEl||!event.isPrimary||event.button!==0||this.pointerDraftId!==null)return;const rect=this.wrapperEl.getBoundingClientRect(),px=clamp((event.clientX-rect.left)/rect.width*100,0,100),py=clamp((event.clientY-rect.top)/rect.height*100,0,100),origin=screenPercentToImagePercent(px,py,this.rotation);this.pointerOrigin=origin,this.pointerDraftId=event.pointerId;try{this.wrapperEl.setPointerCapture(event.pointerId)}catch{}this.draft={x:origin.x,y:origin.y,width:0,height:0},event.preventDefault()},this.onWrapperPointerMove=event=>{if(this.pointerDraftId!==event.pointerId||!this.pointerOrigin||!this.wrapperEl)return;const rect=this.wrapperEl.getBoundingClientRect(),px=clamp((event.clientX-rect.left)/rect.width*100,0,100),py=clamp((event.clientY-rect.top)/rect.height*100,0,100),point=screenPercentToImagePercent(px,py,this.rotation),x=Math.min(this.pointerOrigin.x,point.x),y=Math.min(this.pointerOrigin.y,point.y),width=Math.abs(point.x-this.pointerOrigin.x),height=Math.abs(point.y-this.pointerOrigin.y);this.draft={x,y,width,height}},this.onWrapperPointerUp=event=>{if(this.pointerDraftId!==event.pointerId)return;const draft=this.draft;this.cancelPointerDraft(event.pointerId),draft&&draft.width>=MIN_REGION_PERCENT&&draft.height>=MIN_REGION_PERCENT&&(this.draft=draft,this.commitDraft())}}static{this.defaultStrings={...super.defaultStrings,anchorJumped:LYRA_DEFAULT_anchorJumped,anchorJumpedToPage:LYRA_DEFAULT_anchorJumpedToPage,anchorNotFound:LYRA_DEFAULT_anchorNotFound,documentPreviewEmpty:LYRA_DEFAULT_documentPreviewEmpty,documentPreviewTypeImage:LYRA_DEFAULT_documentPreviewTypeImage,imageViewerAnnotate:LYRA_DEFAULT_imageViewerAnnotate,imageViewerAnnotationAdded:LYRA_DEFAULT_imageViewerAnnotationAdded,imageViewerAnnotationBoxPosition:LYRA_DEFAULT_imageViewerAnnotationBoxPosition,imageViewerAnnotationCancelled:LYRA_DEFAULT_imageViewerAnnotationCancelled,imageViewerAnnotationHint:LYRA_DEFAULT_imageViewerAnnotationHint,imageViewerFailedToLoad:LYRA_DEFAULT_imageViewerFailedToLoad,imageViewerFitActual:LYRA_DEFAULT_imageViewerFitActual,imageViewerFitContain:LYRA_DEFAULT_imageViewerFitContain,imageViewerFitLabel:LYRA_DEFAULT_imageViewerFitLabel,imageViewerFitWidth:LYRA_DEFAULT_imageViewerFitWidth,imageViewerHighlightsLabel:LYRA_DEFAULT_imageViewerHighlightsLabel,imageViewerLabel:LYRA_DEFAULT_imageViewerLabel,imageViewerRotate:LYRA_DEFAULT_imageViewerRotate,imageViewerUnlabeledHighlight:LYRA_DEFAULT_imageViewerUnlabeledHighlight}}static{this.styles=[LyraElement.styles,styles,srOnly]}static{this.collectionSupport=collectionSupport}static{this.immutableEventDetails=Object.freeze(["lr-annotation-create"])}get fit(){return this._fit}set fit(value){const old=this._fit;this._fit=normalizeImageFit(value),this.requestUpdate("fit",old)}get rotation(){return this._rotation}set rotation(value){const old=this._rotation;this._rotation=normalizeImageRotation(value),this.requestUpdate("rotation",old)}get hasOperableContent(){return this.loadState.kind==="loaded"}willUpdate(changed){if(super.willUpdate(changed),changed.has("src")){this.cancelPointerDraft(),this.revealTarget=null,this.mediaLayoutSize=null;const safeSrc=this.src?safeMediaSrc(this.src):null;this.loadState=safeSrc?{kind:"loading"}:this.src?{kind:"error"}:{kind:"idle"},this.hasUpdated&&this.src&&!safeSrc&&this.announceLoadError()}changed.has("annotatable")&&(!this.annotatable||!this.hasOperableContent)&&this.cancelPointerDraft()}updated(changed){super.updated(changed),changed.has("rotation")&&changed.get("rotation")!==void 0&&this.emit("lr-rotation-change",{rotation:this.rotation}),changed.has("fit")&&changed.get("fit")!==void 0&&this.emit("lr-fit-change",{fit:this.fit}),(changed.has("annotatable")||changed.has("loadState"))&&this.annotatable&&this.hasOperableContent&&(changed.has("loadState")||changed.get("annotatable")!==void 0)&&this.liveRegion?.announce(this.localize("imageViewerAnnotationHint"),{force:!0}),this.syncGeometryObserver()}zoomIn(){this.frameEl?.zoomIn()}zoomOut(){this.frameEl?.zoomOut()}resetZoom(){this.frameEl?.resetZoom()}rotate(){this.rotation=(this.rotation+90)%360}async applyAnchor(anchor){if(anchor.kind!=="region"||!this.hasOperableContent)return!1;const rect=normalizeImageRegionRect(anchor.rect);if(!rect)return!1;this.revealTarget=rect,await this.updateComplete;const target=this.shadowRoot?.querySelector("[data-reveal-target]"),viewport=this.frameEl?.shadowRoot?.querySelector('[part="viewport"]');if(!target||!viewport||target.getClientRects().length===0)return!1;target.scrollIntoView({block:"center",inline:"center"}),await new Promise(resolve=>{const view=this.ownerDocument.defaultView;view?view.requestAnimationFrame(()=>resolve()):resolve()});const targetRect=target.getBoundingClientRect(),viewportRect=viewport.getBoundingClientRect();return targetRect.right>viewportRect.left&&targetRect.left<viewportRect.right&&targetRect.bottom>viewportRect.top&&targetRect.top<viewportRect.bottom}connectedCallback(){super.connectedCallback(),this.hasUpdated&&this.syncGeometryObserver()}adoptedCallback(){super.adoptedCallback(),this.hostDescription.adopted(),this.disconnectGeometryObserver(),this.announcements.adopted(),this.scheduleAfterUpdate(()=>this.syncGeometryObserver())}disconnectGeometryObserver(){this.geometryObserver?.disconnect(),this.geometryObserver=void 0,this.observedWrapper=void 0,this.geometryFrame!==void 0&&this.geometryFrameOwner?.cancelAnimationFrame(this.geometryFrame),this.geometryFrame=void 0,this.geometryFrameOwner=void 0}updateMediaLayoutSize(width,height){!Number.isFinite(width)||!Number.isFinite(height)||width<=0||height<=0||this.mediaLayoutSize?.width===width&&this.mediaLayoutSize.height===height||(this.mediaLayoutSize={width,height})}scheduleMediaLayoutSize(width,height){const view=this.ownerDocument.defaultView;if(!view){this.updateMediaLayoutSize(width,height);return}this.geometryFrame!==void 0&&this.geometryFrameOwner?.cancelAnimationFrame(this.geometryFrame),this.geometryFrameOwner=view,this.geometryFrame=view.requestAnimationFrame(()=>{this.geometryFrame=void 0,this.geometryFrameOwner=void 0,this.updateMediaLayoutSize(Math.round(width*100)/100,Math.round(height*100)/100)})}syncGeometryObserver(){const wrapper=this.wrapperEl;if(wrapper===this.observedWrapper||(this.disconnectGeometryObserver(),!wrapper))return;this.observedWrapper=wrapper,this.scheduleMediaLayoutSize(wrapper.offsetWidth,wrapper.offsetHeight);const ResizeObserverConstructor=this.ownerDocument.defaultView?.ResizeObserver;ResizeObserverConstructor&&(this.geometryObserver=new ResizeObserverConstructor(entries=>{const entry=entries.find(candidate=>candidate.target===this.observedWrapper);entry&&this.scheduleMediaLayoutSize(entry.contentRect.width,entry.contentRect.height)}),this.geometryObserver.observe(wrapper))}announceLoadError(){this.announcements.announceAssertive(this.localize("imageViewerFailedToLoad"))}onHighlightActivate(id){this.activeHighlightId=id,this.emit("lr-highlight-activate",{highlightId:id})}announceDraftPosition(){if(!this.draft)return;const formatter=getNumberFormat(this.effectiveLocale,{maximumFractionDigits:0,useGrouping:!1});this.liveRegion?.announce(this.localize("imageViewerAnnotationBoxPosition",void 0,{x:formatter.format(Math.round(this.draft.x)),y:formatter.format(Math.round(this.draft.y)),width:formatter.format(Math.round(this.draft.width)),height:formatter.format(Math.round(this.draft.height))}))}commitDraft(){if(!this.draft)return;const rect={x:this.draft.x,y:this.draft.y,width:this.draft.width,height:this.draft.height};this.draft=null,this.emit("lr-annotation-create",{anchor:{kind:"region",rect}}),this.liveRegion?.announce(this.localize("imageViewerAnnotationAdded"),{force:!0})}cancelPointerDraft(pointerId=this.pointerDraftId,releaseCapture=!0){if(pointerId!=null&&this.pointerDraftId!==pointerId)return;const wrapper=this.wrapperEl,capturedPointerId=this.pointerDraftId;if(this.pointerDraftId=null,this.pointerOrigin=null,this.draft=null,releaseCapture&&wrapper&&capturedPointerId!=null)try{wrapper.releasePointerCapture(capturedPointerId)}catch{}}canonicalRegionHighlights(){const source=this.highlights;if(this.regionHighlights?.[0]===source)return this.regionHighlights[1];const ids=new Set,result=[];for(const highlight of this.highlights){if(!highlight||typeof highlight.id!="string"||highlight.id.trim().length===0||ids.has(highlight.id)||highlight.anchor.kind!=="region")continue;const rect=normalizeImageRegionRect(highlight.anchor.rect);rect&&(ids.add(highlight.id),result.push({highlight,rect}))}return this.regionHighlights=[source,result],result}boundedRegionHighlights(){const all=this.canonicalRegionHighlights();if(all.length<=IMAGE_VIEWER_HIGHLIGHT_LIMIT)return{all,visible:all};const visible=all.slice(0,IMAGE_VIEWER_HIGHLIGHT_LIMIT),active=this.activeHighlightId?all.find(entry=>entry.highlight.id===this.activeHighlightId):void 0;return active&&!visible.includes(active)&&(visible[visible.length-1]=active),{all,visible}}onHighlightFocus(id){this.highlightFocusId=id}onHighlightKeyDown(event,id){const buttons=[...this.shadowRoot.querySelectorAll('[part="highlight"]')];if(buttons.length<2)return;const current=buttons.findIndex(button=>button.dataset.highlightId===id),rtl=this.effectiveDirection==="rtl";let next=current;if(event.key==="Home")next=0;else if(event.key==="End")next=buttons.length-1;else if(event.key==="ArrowDown"||event.key===(rtl?"ArrowLeft":"ArrowRight"))next=(current+1)%buttons.length;else if(event.key==="ArrowUp"||event.key===(rtl?"ArrowRight":"ArrowLeft"))next=(current-1+buttons.length)%buttons.length;else return;event.preventDefault();const target=buttons[next];this.highlightFocusId=target.dataset.highlightId??null,target.focus()}renderHighlights(){if(!this.hasOperableContent)return nothing;const{all:regionHighlights,visible}=this.boundedRegionHighlights();if(!regionHighlights.length)return nothing;const formatter=getNumberFormat(this.effectiveLocale,{maximumFractionDigits:0,useGrouping:!1}),preferredFocusId=visible.some(({highlight})=>highlight.id===this.highlightFocusId)?this.highlightFocusId:visible.some(({highlight})=>highlight.id===this.activeHighlightId)?this.activeHighlightId:visible[0]?.highlight.id??null,zoom=normalizeImageZoom(this.zoom,this.minZoom,this.maxZoom),layout=this.mediaLayoutSize;return html`<div
       part="highlight-layer"
       role="group"
       aria-label=${this.localize("imageViewerHighlightsLabel")}
@@ -6,6 +6,8 @@ import{__decorate}from"tslib";import{collectionSupport}from"../../../internal/co
       data-total=${String(regionHighlights.length)}
     >
       ${visible.map(({highlight:h,rect},index)=>html`
+        <!-- hit-area-exempt: the box is the data-driven percentage rectangle and must paint
+             exactly; the shared target floor is a transparent centred ::after (see styles). -->
         <button
           part="highlight"
           type="button"
@@ -13,7 +15,7 @@ import{__decorate}from"tslib";import{collectionSupport}from"../../../internal/co
           data-tone=${normalizeHighlightTone(h.tone)}
           ?data-active=${this.activeHighlightId===h.id}
           tabindex=${preferredFocusId===h.id?"0":"-1"}
-          style=${styleMap({left:`${rect.x}%`,top:`${rect.y}%`,width:`${rect.width}%`,height:`${rect.height}%`})}
+          style=${styleMap({left:`${rect.x}%`,top:`${rect.y}%`,width:`${rect.width}%`,height:`${rect.height}%`,"--_lr-image-viewer-highlight-w":String(rect.width),"--_lr-image-viewer-highlight-h":String(rect.height),"--_lr-image-viewer-highlight-max-bw":layout?`${Math.floor(layout.width*(rect.width/200)*zoom)/zoom}px`:void 0,"--_lr-image-viewer-highlight-max-bh":layout?`${Math.floor(layout.height*(rect.height/200)*zoom)/zoom}px`:void 0})}
           aria-label=${h.label?.trim()?h.label:this.localize("imageViewerUnlabeledHighlight",void 0,{index:formatter.format(index+1)})}
           @click=${()=>this.onHighlightActivate(h.id)}
           @focus=${()=>this.onHighlightFocus(h.id)}

package/dist/components/media/image-viewer/image-viewer.styles.js

@@ -1 +1 @@
-import{iconHitTarget}from"../../../internal/interactive-control.styles.js";import{css}from"lit";const styles=css` :host { display: block; min-inline-size: 0; } [part="base"] { display: flex; flex-direction: column; gap: var(--lr-space-s); min-inline-size: 0; max-inline-size: 100%; block-size: 100%; } [part="frame"] { flex: 1 1 auto; min-block-size: 0; } [part="frame"]::part(base) { block-size: 100%; grid-template-rows: minmax(0, 1fr) auto; } :host([fit="contain"]) [part="frame"]::part(viewport) { container-type: size; } :host([fit="width"]) [part="frame"]::part(viewport) { container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); } [part="toolbar"] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lr-space-xs); } .fit-control-wrapper { position: relative; display: inline-flex; align-items: center; min-inline-size: 0; max-inline-size: 100%; } [part="fit-control"], [part="rotate-button"], [part="annotate-toggle"] { ${iconHitTarget} border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); background: var(--lr-color-surface); color: var(--lr-color-text); font: inherit; cursor: pointer; } [part="fit-control"]:disabled, [part="rotate-button"]:disabled, [part="annotate-toggle"]:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="fit-control"] { appearance: none; max-inline-size: 100%; padding-inline: var(--lr-space-s) var(--lr-space-l); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part="fit-control"] option { background: var(--lr-color-surface); color: var(--lr-color-text); } [part="fit-control"]:where(:not(:disabled)):hover, [part="rotate-button"]:where(:not(:disabled)):hover, [part="annotate-toggle"]:where(:not(:disabled)):hover { background: var(--lr-color-brand-quiet); } [part="fit-control"]:where(:not(:disabled)):active, [part="rotate-button"]:where(:not(:disabled)):active, [part="annotate-toggle"]:where(:not(:disabled)):active { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="fit-control"]:focus-visible, [part="rotate-button"]:focus-visible, [part="annotate-toggle"]:focus-visible { outline: var(--lr-focus-ring); outline-offset: var(--lr-focus-ring-offset); } .fit-control-chevron { position: absolute; inset-inline-end: var(--lr-space-xs); display: inline-flex; color: var(--lr-color-text-quiet); line-height: var(--lr-line-height-none); pointer-events: none; } .fit-control-chevron svg { transform: rotate(90deg); } [part="annotate-toggle"][aria-pressed="true"] { background: var( --lr-image-viewer-annotate-active-bg, var(--lr-color-brand-quiet) ); border-color: var( --lr-image-viewer-annotate-active-border, var(--lr-color-brand) ); } [part="annotate-toggle"][aria-pressed="true"]:where(:not(:disabled)):active { background: color-mix( in oklab, var(--lr-image-viewer-annotate-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="rotation-frame"] { position: relative; display: inline-block; max-inline-size: 100%; } :host([fit="actual"]) [part="rotation-frame"] { max-inline-size: none; } [part="rotation-frame"][data-measured] [part="image-wrapper"] { position: absolute; left: 50%; top: 50%; inline-size: max-content; max-inline-size: none; } [part="image-wrapper"] { position: relative; display: inline-block; max-inline-size: 100%; transition: transform var(--lr-transition-base); outline: none; } [part="image-wrapper"]:focus-visible { outline: var(--lr-focus-ring); outline-offset: calc(-1 * max(var(--lr-focus-ring-width) + 2 * var(--lr-border-width-thin), var(--lr-focus-ring-width) + var(--lr-focus-ring-offset))); } :host([fit="actual"]) [part="image-wrapper"] { max-inline-size: none; } :host([fit="contain"]) [part="frame"]::part(content), :host([fit="width"]) [part="frame"]::part(content) { inline-size: 100%; } [part="image"] { display: block; } :host([fit="width"]) [part="image"] { inline-size: 100cqi; block-size: auto; } :host([fit="width"]) :is([data-rotation="90"], [data-rotation="270"]) [part="image"] { inline-size: auto; block-size: 100cqi; } :host([fit="contain"]) [part="image"] { max-inline-size: 100cqi; max-block-size: 100cqb; block-size: auto; object-fit: contain; } :host([fit="contain"]) :is([data-rotation="90"], [data-rotation="270"]) [part="image"] { max-inline-size: 100cqb; max-block-size: 100cqi; } [part="highlight-layer"] { position: absolute; inset: 0; } [part="highlight"] { position: absolute; ${iconHitTarget} border: var(--lr-border-width-medium) solid var(--lr-image-viewer-highlight-border, var(--lr-color-brand)); --_lr-image-viewer-highlight-fill: var( --lr-image-viewer-highlight-bg, color-mix(in srgb, var(--lr-color-brand) 20%, transparent) ); background: var( --lr-image-viewer-highlight-fill, var(--_lr-image-viewer-highlight-fill) ); cursor: pointer; padding: 0; } [part="highlight"]:where([data-tone="success"]) { border-style: double; border-color: var( --lr-image-viewer-highlight-success-border, var(--lr-color-success) ); --_lr-image-viewer-highlight-fill: var( --lr-image-viewer-highlight-success-bg, color-mix(in srgb, var(--lr-color-success) 20%, transparent) ); } [part="highlight"]:where([data-tone="warning"]) { border-style: dashed; border-color: var( --lr-image-viewer-highlight-warning-border, var(--lr-color-warning) ); --_lr-image-viewer-highlight-fill: var( --lr-image-viewer-highlight-warning-bg, color-mix(in srgb, var(--lr-color-warning) 20%, transparent) ); } [part="highlight"]:where([data-tone="danger"]) { border-style: dotted; border-color: var( --lr-image-viewer-highlight-danger-border, var(--lr-color-danger) ); --_lr-image-viewer-highlight-fill: var( --lr-image-viewer-highlight-danger-bg, color-mix(in srgb, var(--lr-color-danger) 20%, transparent) ); } [part="highlight"]:where([data-tone="neutral"]) { border-style: groove; border-color: var( --lr-image-viewer-highlight-neutral-border, var(--lr-color-border) ); --_lr-image-viewer-highlight-fill: var( --lr-image-viewer-highlight-neutral-bg, color-mix(in srgb, var(--lr-color-text) 12%, transparent) ); } [part="highlight"]:where([data-active]) { border-width: var( --lr-image-viewer-highlight-active-border-width, var(--lr-border-width-thick) ); outline: var( --lr-image-viewer-highlight-active-outline-width, var(--lr-focus-ring-width) ) solid var(--lr-image-viewer-highlight-active-color, var(--lr-color-brand)); outline-offset: var( --lr-image-viewer-highlight-active-outline-offset, var(--lr-focus-ring-offset) ); } [part="highlight"]:hover { background: color-mix( in oklab, var( --lr-image-viewer-highlight-fill, var(--_lr-image-viewer-highlight-fill) ), var(--lr-color-mix-partner) var(--lr-color-mix-hover) ); } [part="highlight"]:active { background: color-mix( in oklab, var( --lr-image-viewer-highlight-fill, var(--_lr-image-viewer-highlight-fill) ), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="highlight"]:focus-visible { outline: var(--lr-focus-ring); outline-offset: var(--lr-focus-ring-offset); } [part="highlight-label"] { position: absolute; inset-block-start: calc(var(--lr-size-1-5em) * -1); left: 0; font-size: var(--lr-font-size-xs); color: var(--lr-color-text); background: var(--lr-color-surface); padding-inline: var(--lr-space-2xs); max-inline-size: min(var(--lr-size-16rem), 100%); white-space: normal; overflow-wrap: anywhere; } [part="annotation-box"] { position: absolute; border: var(--lr-border-width-medium) dashed var(--lr-image-viewer-annotation-box-border, var(--lr-color-brand)); background: var( --lr-image-viewer-annotation-box-bg, color-mix(in srgb, var(--lr-color-brand) 15%, transparent) ); pointer-events: none; } .reveal-target { position: absolute; pointer-events: none; } @media (forced-colors: active) { [part="fit-control"]:hover:not(:disabled), [part="rotate-button"]:hover:not(:disabled), [part="annotate-toggle"]:hover:not(:disabled) { outline: var(--lr-border-width-thin) dashed Highlight; outline-offset: calc(-1 * var(--lr-border-width-thin)); } [part="fit-control"]:active:not(:disabled), [part="rotate-button"]:active:not(:disabled), [part="annotate-toggle"]:active:not(:disabled) { outline-style: double; outline-width: var(--lr-border-width-medium); } [part="annotate-toggle"][aria-pressed="true"] { border-color: Highlight; border-style: double; } [part="highlight"] { background: transparent; border-color: CanvasText; forced-color-adjust: none; } [part="highlight"]:where([data-active]) { outline-color: Highlight; } } .empty-note, [part="error"] { margin: 0; color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-md-sm); text-align: center; padding: var(--lr-space-l); } [part="error"] { color: var(--lr-color-danger); } `;export{styles};
+import{iconHitTarget}from"../../../internal/interactive-control.styles.js";import{css}from"lit";const styles=css` :host { display: block; min-inline-size: 0; } [part="base"] { display: flex; flex-direction: column; gap: var(--lr-space-s); min-inline-size: 0; max-inline-size: 100%; block-size: 100%; } [part="frame"] { flex: 1 1 auto; min-block-size: 0; } [part="frame"]::part(base) { block-size: 100%; grid-template-rows: minmax(0, 1fr) auto; } :host([fit="contain"]) [part="frame"]::part(viewport) { container-type: size; } :host([fit="width"]) [part="frame"]::part(viewport) { container-type: inline-size; contain-intrinsic-inline-size: var(--lr-size-20rem); } [part="toolbar"] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--lr-space-xs); } .fit-control-wrapper { position: relative; display: inline-flex; align-items: center; min-inline-size: 0; max-inline-size: 100%; } [part="fit-control"], [part="rotate-button"], [part="annotate-toggle"] { ${iconHitTarget} border: var(--lr-border-width-thin) solid var(--lr-color-border); border-radius: var(--lr-radius); background: var(--lr-color-surface); color: var(--lr-color-text); font: inherit; cursor: pointer; } [part="fit-control"]:disabled, [part="rotate-button"]:disabled, [part="annotate-toggle"]:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part="fit-control"] { appearance: none; max-inline-size: 100%; padding-inline: var(--lr-space-s) var(--lr-space-l); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [part="fit-control"] option { background: var(--lr-color-surface); color: var(--lr-color-text); } [part="fit-control"]:where(:not(:disabled)):hover, [part="rotate-button"]:where(:not(:disabled)):hover, [part="annotate-toggle"]:where(:not(:disabled)):hover { background: var(--lr-color-brand-quiet); } [part="fit-control"]:where(:not(:disabled)):active, [part="rotate-button"]:where(:not(:disabled)):active, [part="annotate-toggle"]:where(:not(:disabled)):active { background: color-mix( in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="fit-control"]:focus-visible, [part="rotate-button"]:focus-visible, [part="annotate-toggle"]:focus-visible { outline: var(--lr-focus-ring); outline-offset: var(--lr-focus-ring-offset); } .fit-control-chevron { position: absolute; inset-inline-end: var(--lr-space-xs); display: inline-flex; color: var(--lr-color-text-quiet); line-height: var(--lr-line-height-none); pointer-events: none; } .fit-control-chevron svg { transform: rotate(90deg); } [part="annotate-toggle"][aria-pressed="true"] { background: var( --lr-image-viewer-annotate-active-bg, var(--lr-color-brand-quiet) ); border-color: var( --lr-image-viewer-annotate-active-border, var(--lr-color-brand) ); } [part="annotate-toggle"][aria-pressed="true"]:where(:not(:disabled)):active { background: color-mix( in oklab, var(--lr-image-viewer-annotate-active-bg, var(--lr-color-brand-quiet)), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="rotation-frame"] { position: relative; display: inline-block; max-inline-size: 100%; } :host([fit="actual"]) [part="rotation-frame"] { max-inline-size: none; } [part="rotation-frame"][data-measured] [part="image-wrapper"] { position: absolute; left: 50%; top: 50%; inline-size: max-content; max-inline-size: none; } [part="image-wrapper"] { position: relative; display: inline-block; max-inline-size: 100%; transition: transform var(--lr-transition-base); outline: none; } [part="image-wrapper"]:focus-visible { outline: var(--lr-focus-ring); outline-offset: calc(-1 * max(var(--lr-focus-ring-width) + 2 * var(--lr-border-width-thin), var(--lr-focus-ring-width) + var(--lr-focus-ring-offset))); } :host([fit="actual"]) [part="image-wrapper"] { max-inline-size: none; } :host([fit="contain"]) [part="frame"]::part(content), :host([fit="width"]) [part="frame"]::part(content) { inline-size: 100%; } [part="image"] { display: block; } :host([fit="width"]) [part="image"] { inline-size: 100cqi; block-size: auto; } :host([fit="width"]) :is([data-rotation="90"], [data-rotation="270"]) [part="image"] { inline-size: auto; block-size: 100cqi; } :host([fit="contain"]) [part="image"] { max-inline-size: 100cqi; max-block-size: 100cqb; block-size: auto; object-fit: contain; } :host([fit="contain"]) :is([data-rotation="90"], [data-rotation="270"]) [part="image"] { max-inline-size: 100cqb; max-block-size: 100cqi; } [part="highlight-layer"] { position: absolute; inset: 0; isolation: isolate; container-type: size; --_lr-image-viewer-hit-layer: -1; } [part="highlight"] { position: absolute; box-sizing: border-box; --_lr-image-viewer-highlight-bw: var(--lr-border-width-medium); border: solid var(--lr-image-viewer-highlight-border, var(--lr-color-brand)); border-width: min( var(--_lr-image-viewer-highlight-bw), var(--_lr-image-viewer-highlight-max-bh, calc(var(--_lr-image-viewer-highlight-h) * 0.5cqh)) ) min( var(--_lr-image-viewer-highlight-bw), var(--_lr-image-viewer-highlight-max-bw, calc(var(--_lr-image-viewer-highlight-w) * 0.5cqw)) ); --_lr-image-viewer-highlight-fill: var( --lr-image-viewer-highlight-bg, color-mix(in srgb, var(--lr-color-brand) 20%, transparent) ); background: var( --lr-image-viewer-highlight-fill, var(--_lr-image-viewer-highlight-fill) ); cursor: pointer; padding: 0; transition: var(--lr-transition-interactive); } [part="highlight"]::after { content: ""; position: absolute; z-index: var(--_lr-image-viewer-hit-layer); inset-inline: min(0px, calc((100% - var(--lr-icon-button-size)) / 2)); inset-block: min(0px, calc((100% - var(--lr-icon-button-size)) / 2)); } [part="highlight"]:where([data-tone="success"]) { border-style: double; border-color: var( --lr-image-viewer-highlight-success-border, var(--lr-color-success) ); --_lr-image-viewer-highlight-fill: var( --lr-image-viewer-highlight-success-bg, color-mix(in srgb, var(--lr-color-success) 20%, transparent) ); } [part="highlight"]:where([data-tone="warning"]) { border-style: dashed; border-color: var( --lr-image-viewer-highlight-warning-border, var(--lr-color-warning) ); --_lr-image-viewer-highlight-fill: var( --lr-image-viewer-highlight-warning-bg, color-mix(in srgb, var(--lr-color-warning) 20%, transparent) ); } [part="highlight"]:where([data-tone="danger"]) { border-style: dotted; border-color: var( --lr-image-viewer-highlight-danger-border, var(--lr-color-danger) ); --_lr-image-viewer-highlight-fill: var( --lr-image-viewer-highlight-danger-bg, color-mix(in srgb, var(--lr-color-danger) 20%, transparent) ); } [part="highlight"]:where([data-tone="neutral"]) { border-style: groove; border-color: var( --lr-image-viewer-highlight-neutral-border, var(--lr-color-border) ); --_lr-image-viewer-highlight-fill: var( --lr-image-viewer-highlight-neutral-bg, color-mix(in srgb, var(--lr-color-text) 12%, transparent) ); } [part="highlight"]:where([data-active]) { --_lr-image-viewer-highlight-bw: var( --lr-image-viewer-highlight-active-border-width, var(--lr-border-width-thick) ); outline: var( --lr-image-viewer-highlight-active-outline-width, var(--lr-focus-ring-width) ) solid var(--lr-image-viewer-highlight-active-color, var(--lr-color-brand)); outline-offset: var( --lr-image-viewer-highlight-active-outline-offset, var(--lr-focus-ring-offset) ); } [part="highlight"]:hover { background: color-mix( in oklab, var( --lr-image-viewer-highlight-fill, var(--_lr-image-viewer-highlight-fill) ), var(--lr-color-mix-partner) var(--lr-color-mix-hover) ); } [part="highlight"]:active { background: color-mix( in oklab, var( --lr-image-viewer-highlight-fill, var(--_lr-image-viewer-highlight-fill) ), var(--lr-color-mix-partner) var(--lr-color-mix-active) ); } [part="highlight"]:focus-visible { outline: var(--lr-focus-ring); outline-offset: var(--lr-focus-ring-offset); } [part="highlight-label"] { position: absolute; inset-block-start: calc(var(--lr-size-1-5em) * -1); left: 0; font-size: var(--lr-font-size-xs); color: var(--lr-color-text); background: var(--lr-color-surface); padding-inline: var(--lr-space-2xs); max-inline-size: min(var(--lr-size-16rem), 100%); white-space: normal; overflow-wrap: anywhere; } [part="annotation-box"] { position: absolute; border: var(--lr-border-width-medium) dashed var(--lr-image-viewer-annotation-box-border, var(--lr-color-brand)); background: var( --lr-image-viewer-annotation-box-bg, color-mix(in srgb, var(--lr-color-brand) 15%, transparent) ); pointer-events: none; } .reveal-target { position: absolute; pointer-events: none; } @media (forced-colors: active) { [part="fit-control"]:hover:not(:disabled), [part="rotate-button"]:hover:not(:disabled), [part="annotate-toggle"]:hover:not(:disabled) { outline: var(--lr-border-width-thin) dashed Highlight; outline-offset: calc(-1 * var(--lr-border-width-thin)); } [part="fit-control"]:active:not(:disabled), [part="rotate-button"]:active:not(:disabled), [part="annotate-toggle"]:active:not(:disabled) { outline-style: double; outline-width: var(--lr-border-width-medium); } [part="annotate-toggle"][aria-pressed="true"] { border-color: Highlight; border-style: double; } [part="highlight"] { background: transparent; border-color: CanvasText; forced-color-adjust: none; } [part="highlight"]:where([data-active]) { outline-color: Highlight; } } .empty-note, [part="error"] { margin: 0; color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-md-sm); text-align: center; padding: var(--lr-space-l); } [part="error"] { color: var(--lr-color-danger); } `;export{styles};

package/dist/components/media/lightbox/lightbox.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{NativeModalCarrier}from"../../../internal/native-modal-carrier.js";import{ModalSurfaceController}from"../../../internal/modal-surface-controller.js";import{nativeModalCarrierStyles}from"../../../internal/native-modal-carrier.styles.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{LyraElement}from"../../../internal/lyra-element.js";import{HostDescriptionController}from"../../../internal/aria-controls.js";import{activateOverlay}from"../../../internal/overlay-manager.js";import{isAccessibilityVisible,nextId,srOnly}from"../../../internal/a11y.js";import{closeIcon,chevronIcon}from"../../../internal/icons.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{finiteCount,finiteInteger}from"../../../internal/numbers.js";import{normalizeImageFit}from"../../../internal/image-fit.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{styles}from"./lightbox.styles.js";import"../pan-zoom/pan-zoom.class.js";import{keyEventOwnedByInnerControl}from"../../../internal/hotkey.js";import{LYRA_DEFAULT_close,LYRA_DEFAULT_lightboxImagePosition,LYRA_DEFAULT_lightboxLabel,LYRA_DEFAULT_next,LYRA_DEFAULT_previous}from"../../../internal/default-strings.generated.js";const MAX_LIGHTBOX_IMAGES=1e4,EMPTY_LIGHTBOX_IMAGES=Object.freeze([]);function snapshotLightboxImages(value){try{if(!Array.isArray(value))return EMPTY_LIGHTBOX_IMAGES;const count=Math.min(value.length,MAX_LIGHTBOX_IMAGES),images=[];for(let index=0;index<count;index++)try{const candidate=value[index];if(typeof candidate!="object"||candidate===null)continue;const src=candidate.src;if(typeof src!="string")continue;const alt=candidate.alt,caption=candidate.caption;images.push(Object.freeze({src,...typeof alt=="string"?{alt}:{},...typeof caption=="string"?{caption}:{}}))}catch{}return images.length?Object.freeze(images):EMPTY_LIGHTBOX_IMAGES}catch{return EMPTY_LIGHTBOX_IMAGES}}function queueDocumentMicrotask(ownerDocument,callback){const ownerWindow=ownerDocument.defaultView;if(ownerWindow){ownerWindow.queueMicrotask(callback);return}Promise.resolve().then(callback)}class LyraLightbox extends LyraElement{constructor(){super(...arguments),this.hostDescription=new HostDescriptionController(this,()=>this.renderRoot.querySelector(this.nativeModal.requested?"dialog[data-native-modal-carrier]":'[part="panel"][role="dialog"]')),this._open=!1,this._images=EMPTY_LIGHTBOX_IMAGES,this._fit="actual",this.index=0,this.loop=!1,this.lightDismiss=!1,this.withoutCounter=!1,this.minZoom=.5,this.maxZoom=4,this.zoomStep=.25,this.accessibleLabel=null,this.slotPresence=new SlotPresenceController(this),this.liveText="",this.nativeModal=new NativeModalCarrier(this,{onCancel:()=>{this.overlay?.isTopmost()&&this.closeFrom("escape",this.renderRoot.querySelector('[part="panel"]')??this)},onUnexpectedClose:()=>{this.hide().then(()=>{this.open&&this.modalSurface.show()})}}),this.modalSurface=new ModalSurfaceController(this,this.nativeModal),this.connectionGeneration=0,this.transitionGeneration=0,this.captionId=nextId("lightbox-caption"),this.onBackdropClick=()=>{this.lightDismiss&&this.overlay?.dismissBackdrop()},this.onCloseButtonClick=()=>{const button=this.renderRoot.querySelector('[part="close-button"]')??this;this.closeFrom("close-button",button)},this.onPanelKeyDown=event=>{for(const target of event.composedPath()){if(target===this)break;if(target instanceof Element&&target.getRootNode()!==this.shadowRoot&&target.matches('a[href], button, [role="button"], [role="link"]'))return}if(keyEventOwnedByInnerControl(event,{container:this,ownerTag:"lr-pan-zoom"}))return;const rtl=this.effectiveDirection==="rtl",forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft";event.key===forwardKey?(event.preventDefault(),this.next()):event.key===backwardKey?(event.preventDefault(),this.previous()):event.key==="Home"?(event.preventDefault(),this.goTo(0)):event.key==="End"&&(event.preventDefault(),this.goTo(this.images.length-1))}}static{this.defaultStrings={...super.defaultStrings,close:LYRA_DEFAULT_close,lightboxImagePosition:LYRA_DEFAULT_lightboxImagePosition,lightboxLabel:LYRA_DEFAULT_lightboxLabel,next:LYRA_DEFAULT_next,previous:LYRA_DEFAULT_previous}}static{this.styles=[LyraElement.styles,nativeModalCarrierStyles,srOnly,styles]}adoptedCallback(){super.adoptedCallback(),this.hostDescription.adopted()}get open(){return this._open}set open(next){const normalized=!!next;if(!this.coalesceOpenRequest(normalized)&&normalized!==this._open){if(!this.hasUpdated){this.applyOpenState(normalized);return}normalized?this.show():this.close("api")}}get images(){return this._images}set images(value){if(value===this._imagesSource||value===this._images)return;this._imagesSource=value;const old=this._images;this._images=snapshotLightboxImages(value),this.requestUpdate("images",old)}get fit(){return this._fit}set fit(value){const old=this._fit;this._fit=normalizeImageFit(value,"actual"),this.requestUpdate("fit",old)}currentIndex(){const count=this.images.length;return count===0?0:finiteCount(this.index,0,count-1)}syncImages(){const current=this.currentIndex();this.index!==current&&(this.index=current)}changeTo(index){const count=this.images.length;if(count===0||!Number.isFinite(index))return;const requested=finiteInteger(index,0),next=this.loop?(requested%count+count)%count:Math.min(count-1,Math.max(0,requested));next!==this.currentIndex()&&(this.index=next,this.emit("lr-index-change",{index:next}))}next(){this.changeTo(this.currentIndex()+1)}previous(){this.changeTo(this.currentIndex()-1)}goTo(index){this.changeTo(index)}async show(){if(this.coalesceOpenRequest(!0)||this._open)return;this.beginOpenRequest(!0);const prevented=this.emit("lr-show",null,{cancelable:!0}).defaultPrevented,superseded=this.openRequestWasSuperseded(!0);if(this.finishOpenRequest(),prevented||superseded){this.syncOpenAttribute();return}this.applyOpenState(!0);const generation=++this.transitionGeneration;await this.updateComplete,generation===this.transitionGeneration&&this._open&&this.emit("lr-after-show",null)}hide(){return this.close("api")}async close(reason="api"){return this.closeFrom(reason,this)}async closeFrom(reason,source){if(this.coalesceOpenRequest(!1)||!this._open)return;if(this.beginOpenRequest(!1),this.emit("lr-hide",{source},{cancelable:!0}).defaultPrevented||this.openRequestWasSuperseded(!1)){this.finishOpenRequest(),this.syncOpenAttribute();return}if(this.emit("lr-close-request",{reason},{cancelable:!0}).defaultPrevented||this.openRequestWasSuperseded(!1)){this.finishOpenRequest(),this.syncOpenAttribute();return}this.finishOpenRequest(),this.applyOpenState(!1);const generation=++this.transitionGeneration;this.emit("lr-close",{reason}),await this.updateComplete,generation===this.transitionGeneration&&!this._open&&this.emit("lr-after-hide",null)}coalesceOpenRequest(next){return this.openRequestTarget===void 0?!1:(this.openRequestDuringPreflight=next,!0)}beginOpenRequest(next){this.openRequestTarget=next,this.openRequestDuringPreflight=void 0}openRequestWasSuperseded(next){return this.openRequestDuringPreflight!==void 0&&this.openRequestDuringPreflight!==next}finishOpenRequest(){this.openRequestTarget=void 0,this.openRequestDuringPreflight=void 0}applyOpenState(next){const old=this._open;this._open=next,this.requestUpdate("open",old)}syncOpenAttribute(){this.toggleAttribute("open",this._open)}updateLiveRegion(){const count=this.images.length,formatter=getNumberFormat(this.effectiveLocale,{maximumFractionDigits:0,useGrouping:!1});this.liveText=count===0?"":this.localize("lightboxImagePosition",void 0,{index:formatter.format(this.currentIndex()+1),total:formatter.format(count)})}captureAnnouncementBaseline(){this.announcementBaseline={index:this.currentIndex(),images:this.images}}willUpdate(changed){if(super.willUpdate(changed),changed.has("images")||changed.has("index")){const index=changed.has("index")?void 0:this.index;this.syncImages(),index!==void 0&&this.index!==index&&this.emit("lr-index-change",{index:this.index})}if((changed.has("index")||changed.has("images")||changed.has("strings")||changed.has("locale"))&&this.updateLiveRegion(),changed.has("open"))if(this.open)this.modalSurface.open(()=>this.activateOverlay());else{const hadOverlay=this.overlay!==void 0;this.modalSurface.close(hadOverlay,()=>this.deactivateOverlay(),()=>!this.open)}}updated(changed){super.updated(changed),!(this.announcementBaseline?.index===this.currentIndex()&&this.announcementBaseline.images===this.images)&&this.open&&this.liveText!==""&&isAccessibilityVisible(this)&&(changed.has("index")||changed.has("images"))&&this.announcementSink?.announce(this.liveText),this.isConnected&&this.captureAnnouncementBaseline(),changed.has("open")&&this.open&&(this.modalSurface.show(),this.overlay?.focusInitial());let currentSourceChanged=!1;if(changed.has("images")){const previousImages=changed.get("images"),previousIndex=changed.has("index")?changed.get("index")??0:this.index;currentSourceChanged=previousImages?.[previousImages.length>0?finiteCount(previousIndex,0,previousImages.length-1):0]?.src!==this.images[this.currentIndex()]?.src}this.open&&(changed.has("index")||currentSourceChanged)&&this.frameEl?.resetView()}connectedCallback(){super.connectedCallback();const generation=++this.connectionGeneration,connectionDocument=this.ownerDocument;this.announcementSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.captureAnnouncementBaseline(),this.hasUpdated&&this.open&&(this.overlay?.isActive()?this.overlay.resume():this.activateOverlay(),queueDocumentMicrotask(connectionDocument,()=>{this.connectionGeneration===generation&&this.ownerDocument===connectionDocument&&this.isConnected&&this.open&&(this.modalSurface.show(),this.overlay?.focusInitial())}))}disconnectedCallback(){const generation=++this.connectionGeneration,connectionDocument=this.ownerDocument;this.announcementSink?.release(),this.announcementSink=void 0,this.announcementBaseline=void 0,super.disconnectedCallback(),this.modalSurface.disconnect(),this.overlay?.suspend(),this.open&&queueDocumentMicrotask(connectionDocument,()=>{this.connectionGeneration===generation&&this.ownerDocument===connectionDocument&&!this.isConnected&&this.open&&(this.transitionGeneration++,this.emit("lr-hide",{source:this}),this.applyOpenState(!1),this.emit("lr-close",{reason:"unmount"}),this.emit("lr-after-hide",null))})}activateOverlay(){this.overlay?.isActive()||(this.overlay=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part="panel"]')??null,onEscape:()=>{const panel=this.renderRoot.querySelector('[part="panel"]')??this;this.closeFrom("escape",panel)},onBackdrop:()=>{const backdrop=this.renderRoot.querySelector('[part="backdrop"]')??this;this.closeFrom("backdrop",backdrop)},preferredInitialFocus:()=>this.shadowRoot?.querySelector('[part="close-button"]')??null,lockScroll:!0,suspendWhenUnrendered:!0}))}deactivateOverlay(){this.overlay?.deactivate(),this.overlay=void 0}render(){const count=this.images.length,current=this.currentIndex(),image=count>0?this.images[current]:void 0,label=this.accessibleLabel??this.localize("lightboxLabel"),hasCaption=!!image?.caption,formatter=getNumberFormat(this.effectiveLocale,{maximumFractionDigits:0,useGrouping:!1}),positionText=count>0?this.localize("lightboxImagePosition",void 0,{index:formatter.format(current+1),total:formatter.format(count)}):"";return this.nativeModal.render(html`
+import{__decorate}from"tslib";import{NativeModalCarrier}from"../../../internal/native-modal-carrier.js";import{ModalSurfaceController}from"../../../internal/modal-surface-controller.js";import{nativeModalCarrierStyles}from"../../../internal/native-modal-carrier.styles.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{LyraElement}from"../../../internal/lyra-element.js";import{HostDescriptionController}from"../../../internal/aria-controls.js";import{activateOverlay}from"../../../internal/overlay-manager.js";import{isAccessibilityVisible,nextId,srOnly}from"../../../internal/a11y.js";import{closeIcon,chevronIcon}from"../../../internal/icons.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{finiteCount,finiteInteger}from"../../../internal/numbers.js";import{normalizeImageFit}from"../../../internal/image-fit.js";import{SlotPresenceController}from"../../../internal/slot-presence-controller.js";import{styles}from"./lightbox.styles.js";import"../pan-zoom/pan-zoom.class.js";import{keyEventOwnedByInnerControl}from"../../../internal/hotkey.js";import{LYRA_DEFAULT_lightboxImagePosition,LYRA_DEFAULT_lightboxLabel}from"../../../internal/default-strings/media.generated.js";import{LYRA_DEFAULT_close,LYRA_DEFAULT_next,LYRA_DEFAULT_previous}from"../../../internal/default-strings/shared.generated.js";const MAX_LIGHTBOX_IMAGES=1e4,EMPTY_LIGHTBOX_IMAGES=Object.freeze([]);function snapshotLightboxImages(value){try{if(!Array.isArray(value))return EMPTY_LIGHTBOX_IMAGES;const count=Math.min(value.length,MAX_LIGHTBOX_IMAGES),images=[];for(let index=0;index<count;index++)try{const candidate=value[index];if(typeof candidate!="object"||candidate===null)continue;const src=candidate.src;if(typeof src!="string")continue;const alt=candidate.alt,caption=candidate.caption;images.push(Object.freeze({src,...typeof alt=="string"?{alt}:{},...typeof caption=="string"?{caption}:{}}))}catch{}return images.length?Object.freeze(images):EMPTY_LIGHTBOX_IMAGES}catch{return EMPTY_LIGHTBOX_IMAGES}}function queueDocumentMicrotask(ownerDocument,callback){const ownerWindow=ownerDocument.defaultView;if(ownerWindow){ownerWindow.queueMicrotask(callback);return}Promise.resolve().then(callback)}class LyraLightbox extends LyraElement{constructor(){super(...arguments),this.hostDescription=new HostDescriptionController(this,()=>this.renderRoot.querySelector(this.nativeModal.requested?"dialog[data-native-modal-carrier]":'[part="panel"][role="dialog"]')),this._open=!1,this._images=EMPTY_LIGHTBOX_IMAGES,this._fit="actual",this.index=0,this.loop=!1,this.lightDismiss=!1,this.withoutCounter=!1,this.minZoom=.5,this.maxZoom=4,this.zoomStep=.25,this.accessibleLabel=null,this.slotPresence=new SlotPresenceController(this),this.liveText="",this.nativeModal=new NativeModalCarrier(this,{onCancel:()=>{this.overlay?.isTopmost()&&this.closeFrom("escape",this.renderRoot.querySelector('[part="panel"]')??this)},onUnexpectedClose:()=>{this.hide().then(()=>{this.open&&this.modalSurface.show()})}}),this.modalSurface=new ModalSurfaceController(this,this.nativeModal),this.connectionGeneration=0,this.transitionGeneration=0,this.captionId=nextId("lightbox-caption"),this.onBackdropClick=()=>{this.lightDismiss&&this.overlay?.dismissBackdrop()},this.onCloseButtonClick=()=>{const button=this.renderRoot.querySelector('[part="close-button"]')??this;this.closeFrom("close-button",button)},this.onPanelKeyDown=event=>{for(const target of event.composedPath()){if(target===this)break;if(target instanceof Element&&target.getRootNode()!==this.shadowRoot&&target.matches('a[href], button, [role="button"], [role="link"]'))return}if(keyEventOwnedByInnerControl(event,{container:this,ownerTag:"lr-pan-zoom"}))return;const rtl=this.effectiveDirection==="rtl",forwardKey=rtl?"ArrowLeft":"ArrowRight",backwardKey=rtl?"ArrowRight":"ArrowLeft";event.key===forwardKey?(event.preventDefault(),this.next()):event.key===backwardKey?(event.preventDefault(),this.previous()):event.key==="Home"?(event.preventDefault(),this.goTo(0)):event.key==="End"&&(event.preventDefault(),this.goTo(this.images.length-1))}}static{this.defaultStrings={...super.defaultStrings,close:LYRA_DEFAULT_close,lightboxImagePosition:LYRA_DEFAULT_lightboxImagePosition,lightboxLabel:LYRA_DEFAULT_lightboxLabel,next:LYRA_DEFAULT_next,previous:LYRA_DEFAULT_previous}}static{this.styles=[LyraElement.styles,nativeModalCarrierStyles,srOnly,styles]}adoptedCallback(){super.adoptedCallback(),this.hostDescription.adopted()}get open(){return this._open}set open(next){const normalized=!!next;if(!this.coalesceOpenRequest(normalized)&&normalized!==this._open){if(!this.hasUpdated){this.applyOpenState(normalized);return}normalized?this.show():this.close("api")}}get images(){return this._images}set images(value){if(value===this._imagesSource||value===this._images)return;this._imagesSource=value;const old=this._images;this._images=snapshotLightboxImages(value),this.requestUpdate("images",old)}get fit(){return this._fit}set fit(value){const old=this._fit;this._fit=normalizeImageFit(value,"actual"),this.requestUpdate("fit",old)}currentIndex(){const count=this.images.length;return count===0?0:finiteCount(this.index,0,count-1)}syncImages(){const current=this.currentIndex();this.index!==current&&(this.index=current)}changeTo(index){const count=this.images.length;if(count===0||!Number.isFinite(index))return;const requested=finiteInteger(index,0),next=this.loop?(requested%count+count)%count:Math.min(count-1,Math.max(0,requested));next!==this.currentIndex()&&(this.index=next,this.emit("lr-index-change",{index:next}))}next(){this.changeTo(this.currentIndex()+1)}previous(){this.changeTo(this.currentIndex()-1)}goTo(index){this.changeTo(index)}async show(){if(this.coalesceOpenRequest(!0)||this._open)return;this.beginOpenRequest(!0);const prevented=this.emit("lr-show",null,{cancelable:!0}).defaultPrevented,superseded=this.openRequestWasSuperseded(!0);if(this.finishOpenRequest(),prevented||superseded){this.syncOpenAttribute();return}this.applyOpenState(!0);const generation=++this.transitionGeneration;await this.updateComplete,generation===this.transitionGeneration&&this._open&&this.emit("lr-after-show",null)}hide(){return this.close("api")}async close(reason="api"){return this.closeFrom(reason,this)}async closeFrom(reason,source){if(this.coalesceOpenRequest(!1)||!this._open)return;if(this.beginOpenRequest(!1),this.emit("lr-hide",{source},{cancelable:!0}).defaultPrevented||this.openRequestWasSuperseded(!1)){this.finishOpenRequest(),this.syncOpenAttribute();return}if(this.emit("lr-close-request",{reason},{cancelable:!0}).defaultPrevented||this.openRequestWasSuperseded(!1)){this.finishOpenRequest(),this.syncOpenAttribute();return}this.finishOpenRequest(),this.applyOpenState(!1);const generation=++this.transitionGeneration;this.emit("lr-close",{reason}),await this.updateComplete,generation===this.transitionGeneration&&!this._open&&this.emit("lr-after-hide",null)}coalesceOpenRequest(next){return this.openRequestTarget===void 0?!1:(this.openRequestDuringPreflight=next,!0)}beginOpenRequest(next){this.openRequestTarget=next,this.openRequestDuringPreflight=void 0}openRequestWasSuperseded(next){return this.openRequestDuringPreflight!==void 0&&this.openRequestDuringPreflight!==next}finishOpenRequest(){this.openRequestTarget=void 0,this.openRequestDuringPreflight=void 0}applyOpenState(next){const old=this._open;this._open=next,this.requestUpdate("open",old)}syncOpenAttribute(){this.toggleAttribute("open",this._open)}updateLiveRegion(){const count=this.images.length,formatter=getNumberFormat(this.effectiveLocale,{maximumFractionDigits:0,useGrouping:!1});this.liveText=count===0?"":this.localize("lightboxImagePosition",void 0,{index:formatter.format(this.currentIndex()+1),total:formatter.format(count)})}captureAnnouncementBaseline(){this.announcementBaseline={index:this.currentIndex(),images:this.images}}willUpdate(changed){if(super.willUpdate(changed),changed.has("images")||changed.has("index")){const index=changed.has("index")?void 0:this.index;this.syncImages(),index!==void 0&&this.index!==index&&this.emit("lr-index-change",{index:this.index})}if((changed.has("index")||changed.has("images")||changed.has("strings")||changed.has("locale"))&&this.updateLiveRegion(),changed.has("open"))if(this.open)this.modalSurface.open(()=>this.activateOverlay());else{const hadOverlay=this.overlay!==void 0;this.modalSurface.close(hadOverlay,()=>this.deactivateOverlay(),()=>!this.open)}}updated(changed){super.updated(changed),!(this.announcementBaseline?.index===this.currentIndex()&&this.announcementBaseline.images===this.images)&&this.open&&this.liveText!==""&&isAccessibilityVisible(this)&&(changed.has("index")||changed.has("images"))&&this.announcementSink?.announce(this.liveText),this.isConnected&&this.captureAnnouncementBaseline(),changed.has("open")&&this.open&&(this.modalSurface.show(),this.overlay?.focusInitial());let currentSourceChanged=!1;if(changed.has("images")){const previousImages=changed.get("images"),previousIndex=changed.has("index")?changed.get("index")??0:this.index;currentSourceChanged=previousImages?.[previousImages.length>0?finiteCount(previousIndex,0,previousImages.length-1):0]?.src!==this.images[this.currentIndex()]?.src}this.open&&(changed.has("index")||currentSourceChanged)&&this.frameEl?.resetView()}connectedCallback(){super.connectedCallback();const generation=++this.connectionGeneration,connectionDocument=this.ownerDocument;this.announcementSink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),this.captureAnnouncementBaseline(),this.hasUpdated&&this.open&&(this.overlay?.isActive()?this.overlay.resume():this.activateOverlay(),queueDocumentMicrotask(connectionDocument,()=>{this.connectionGeneration===generation&&this.ownerDocument===connectionDocument&&this.isConnected&&this.open&&(this.modalSurface.show(),this.overlay?.focusInitial())}))}disconnectedCallback(){const generation=++this.connectionGeneration,connectionDocument=this.ownerDocument;this.announcementSink?.release(),this.announcementSink=void 0,this.announcementBaseline=void 0,super.disconnectedCallback(),this.modalSurface.disconnect(),this.overlay?.suspend(),this.open&&queueDocumentMicrotask(connectionDocument,()=>{this.connectionGeneration===generation&&this.ownerDocument===connectionDocument&&!this.isConnected&&this.open&&(this.transitionGeneration++,this.emit("lr-hide",{source:this}),this.applyOpenState(!1),this.emit("lr-close",{reason:"unmount"}),this.emit("lr-after-hide",null))})}activateOverlay(){this.overlay?.isActive()||(this.overlay=activateOverlay({host:this,panel:()=>this.shadowRoot?.querySelector('[part="panel"]')??null,onEscape:()=>{const panel=this.renderRoot.querySelector('[part="panel"]')??this;this.closeFrom("escape",panel)},onBackdrop:()=>{const backdrop=this.renderRoot.querySelector('[part="backdrop"]')??this;this.closeFrom("backdrop",backdrop)},preferredInitialFocus:()=>this.shadowRoot?.querySelector('[part="close-button"]')??null,lockScroll:!0,suspendWhenUnrendered:!0}))}deactivateOverlay(){this.overlay?.deactivate(),this.overlay=void 0}render(){const count=this.images.length,current=this.currentIndex(),image=count>0?this.images[current]:void 0,label=this.accessibleLabel??this.localize("lightboxLabel"),hasCaption=!!image?.caption,formatter=getNumberFormat(this.effectiveLocale,{maximumFractionDigits:0,useGrouping:!1}),positionText=count>0?this.localize("lightboxImagePosition",void 0,{index:formatter.format(current+1),total:formatter.format(count)}):"";return this.nativeModal.render(html`
       <div part="backdrop" @click=${this.onBackdropClick}></div>
       <div
         part="panel"

package/dist/components/media/map/map.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{collectionSupport}from"../../../internal/collection-snapshot.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{HostDescriptionController}from"../../../internal/aria-controls.js";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{getOwnDataDescriptor,MISSING_OWN_DATA_DESCRIPTOR,UNSAFE_OWN_DATA_DESCRIPTOR}from"../../../internal/data-descriptors.js";import{literalSetConverter,trueDefaultBooleanConverter}from"../../../internal/converters.js";import{devWarnOnce}from"../../../internal/dev-mode-attribute-warning.js";import{litDevWarnings}from"../../../internal/dev-warning.js";import{chevronIcon}from"../../../internal/icons.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{DEFAULT_CANVAS_COLOR,resolveCanvasColor}from"../../../internal/canvas-color.js";import{finiteRange}from"../../../internal/numbers.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{notifyMapCanvasReady}from"../../../internal/map-canvas-ready.js";import{AnnouncementSinkController}from"../../../internal/announcer.js";import{hostAriaLabel,srOnly}from"../../../internal/a11y.js";import{ThemeWatcher}from"../../../internal/theme-watcher.js";import{loadMaplibre}from"./map-loader.js";import{styles}from"./map.styles.js";import{projectGeoJson,projectAdmittedGeoJson,buildProjectedGeoJsonPropertyDiff}from"./map-geojson-diff.js";import{buildGeoJsonPropertyDiff}from"./map-geojson-diff.js";import{clusterColorExpression,heatmapColorExpression,heatmapWeightExpression,heatmapZoomValue,lineColorExpression,mutedCategoryOpacityExpression,pointColorExpression,pointRadiusExpression,stepExpression}from"./map-data-layers.js";import"../../overlays/skeleton/skeleton.class.js";import{LYRA_DEFAULT_close,LYRA_DEFAULT_items,LYRA_DEFAULT_legendTypeHidden,LYRA_DEFAULT_legendTypeShown,LYRA_DEFAULT_loading,LYRA_DEFAULT_map,LYRA_DEFAULT_mapFeedback,LYRA_DEFAULT_mapInitializationFailed,LYRA_DEFAULT_mapLegend,LYRA_DEFAULT_mapMarker,LYRA_DEFAULT_mapMissingLibrary,LYRA_DEFAULT_mapResetNorth,LYRA_DEFAULT_mapStyleRequired,LYRA_DEFAULT_mapToggleAttribution,LYRA_DEFAULT_mapWebglUnavailable,LYRA_DEFAULT_paginationSummary,LYRA_DEFAULT_zoomIn,LYRA_DEFAULT_zoomOut}from"../../../internal/default-strings.generated.js";function supportsWebGL2(host){try{const context=host.ownerDocument.createElement("canvas").getContext("webgl2");if(!context)return!1;try{context.getExtension("WEBGL_lose_context")?.loseContext()}catch{}return!0}catch{return!1}}function hasMapStyle(style){return typeof style=="string"?style.trim().length>0:style!==void 0}const LEGEND_CONTROL_ROLE=literalSetConverter(["button","checkbox"],"button"),MAX_MAP_LEGEND_GRADIENT_STOPS=64;function isRuntimeArray(value){try{return Array.isArray(value)}catch{return!1}}function isRuntimeRecord(value){try{return value!==null&&typeof value=="object"&&!Array.isArray(value)}catch{return!1}}function boundedOwnArrayLength(value,limit){if(!isRuntimeArray(value))return;const descriptor=getOwnDataDescriptor(value,"length");if(!(descriptor===MISSING_OWN_DATA_DESCRIPTOR||descriptor===UNSAFE_OWN_DATA_DESCRIPTOR||typeof descriptor.value!="number"||!Number.isSafeInteger(descriptor.value)||descriptor.value<0))return Math.min(descriptor.value,limit)}function isUnsafeDescriptor(descriptor){return descriptor===UNSAFE_OWN_DATA_DESCRIPTOR}function optionalDescriptorValue(descriptor){return descriptor===MISSING_OWN_DATA_DESCRIPTOR||isUnsafeDescriptor(descriptor)?void 0:descriptor.value}function normalizeMapLegendGradient(value){try{const scanCount=boundedOwnArrayLength(value,MAX_MAP_LEGEND_GRADIENT_STOPS);if(scanCount===void 0)return[];const usable=[];for(let index=0;index<scanCount;index+=1){const stopDescriptor=getOwnDataDescriptor(value,String(index));if(stopDescriptor===MISSING_OWN_DATA_DESCRIPTOR||isUnsafeDescriptor(stopDescriptor))continue;const stop=stopDescriptor.value,stopLength=boundedOwnArrayLength(stop,2);if(stopLength===void 0||stopLength<2)continue;const valueDescriptor=getOwnDataDescriptor(stop,"0"),colorDescriptor=getOwnDataDescriptor(stop,"1");if(valueDescriptor===MISSING_OWN_DATA_DESCRIPTOR||colorDescriptor===MISSING_OWN_DATA_DESCRIPTOR||isUnsafeDescriptor(valueDescriptor)||isUnsafeDescriptor(colorDescriptor)||typeof valueDescriptor.value!="number"||!Number.isFinite(valueDescriptor.value)||typeof colorDescriptor.value!="string")continue;const color=sanitizeCssColor(colorDescriptor.value);color&&usable.push([valueDescriptor.value,color])}return usable.length<2?[]:Object.freeze([...usable].sort((a,b)=>a[0]-b[0]))}catch{return[]}}const MAP_LEGEND_ITEM_LIMIT=100,MAP_LEGEND_SCAN_LIMIT=1e3,MAP_LEGEND_LABEL_LIMIT=256,MAP_LEGEND_TOTAL_LABEL_LIMIT=8192,MAP_LEGEND_COLOR_LIMIT=256,MAP_LEGEND_VALUE_LIMIT=256,MAP_LEGEND_PATTERNS=new Set(["solid","diagonal","dots","crosshatch"]),EMPTY_MAP_LEGEND=Object.freeze([]),EMPTY_MAP_LEGEND_PROJECTION=Object.freeze({inputCount:0,renderedCount:0,omittedCount:0,truncatedLabelCount:0,truncated:!1});function boundedLegendText(value,limit){return value.length<=limit?value:`${value.slice(0,Math.max(0,limit-1))}…`}function normalizeMapLegend(value){let input;try{input=Array.isArray(value)?value:[]}catch{input=[]}let inputCount=0;try{inputCount=Math.max(0,Math.min(Number.MAX_SAFE_INTEGER,input.length))}catch{inputCount=0}const entries=[];let labelCharacters=0,truncatedLabelCount=0;const scanCount=Math.min(inputCount,MAP_LEGEND_SCAN_LIMIT);for(let index=0;index<scanCount&&entries.length<MAP_LEGEND_ITEM_LIMIT;index++)try{const candidate=input[index];if(!candidate||typeof candidate!="object")continue;const rawColor=candidate.color,rawLabel=candidate.label,rawPattern=candidate.pattern;if(typeof rawColor!="string"||typeof rawLabel!="string"||typeof rawPattern!="string"||!MAP_LEGEND_PATTERNS.has(rawPattern))continue;const remaining=MAP_LEGEND_TOTAL_LABEL_LIMIT-labelCharacters;if(remaining<=0)break;const labelLimit=Math.min(MAP_LEGEND_LABEL_LIMIT,remaining),label=boundedLegendText(rawLabel,labelLimit);if(!label.trim())continue;rawLabel.length>labelLimit&&truncatedLabelCount++,labelCharacters+=label.length;const rawValue=candidate.value,trimmedValue=typeof rawValue=="string"?rawValue.trim():"",value2=trimmedValue?trimmedValue.slice(0,MAP_LEGEND_VALUE_LIMIT):void 0,rawGroup=candidate.group,trimmedGroup=typeof rawGroup=="string"?rawGroup.trim():"",group=trimmedGroup?boundedLegendText(trimmedGroup,MAP_LEGEND_LABEL_LIMIT):void 0,rawIcon=candidate.icon,icon=isRuntimeRecord(rawIcon)?projectIconPaint(rawIcon):void 0;entries.push(Object.freeze({color:rawColor.slice(0,MAP_LEGEND_COLOR_LIMIT),label,pattern:rawPattern,...value2?{value:value2}:{},...group?{group}:{},...icon?{icon}:{}}))}catch{}const frozenEntries=entries.length?Object.freeze(entries):EMPTY_MAP_LEGEND,omittedCount=Math.max(0,inputCount-frozenEntries.length),projection=Object.freeze({inputCount,renderedCount:frozenEntries.length,omittedCount,truncatedLabelCount,truncated:omittedCount>0||truncatedLabelCount>0});return{entries:frozenEntries,projection,grouped:frozenEntries.some(entry=>entry.group!==void 0)}}const EMPTY_HIDDEN_CATEGORIES=Object.freeze([]);function normalizeMapHiddenCategories(value){let input,length=0;try{input=Array.isArray(value)?value:[],length=Math.max(0,Math.min(MAP_LEGEND_SCAN_LIMIT,input.length))}catch{return EMPTY_HIDDEN_CATEGORIES}const keys=[];for(let index=0;index<length&&keys.length<MAP_LEGEND_ITEM_LIMIT;index++)try{const candidate=input[index];if(typeof candidate!="string")continue;const key=candidate.trim().slice(0,MAP_LEGEND_VALUE_LIMIT);if(!key||keys.includes(key))continue;keys.push(key)}catch{}return keys.length?Object.freeze(keys):EMPTY_HIDDEN_CATEGORIES}function renderLegendIcon(icon){const[x,y,width,height]=icon.viewBox??DEFAULT_ICON_VIEW_BOX,mode=icon.mode??"fill";return html`<svg
+import{__decorate}from"tslib";import{collectionSupport}from"../../../internal/collection-snapshot.js";import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{HostDescriptionController}from"../../../internal/aria-controls.js";import{GlassScrollLayer}from"../../../internal/glass-scroll-layer.js";import{getOwnDataDescriptor,MISSING_OWN_DATA_DESCRIPTOR,UNSAFE_OWN_DATA_DESCRIPTOR}from"../../../internal/data-descriptors.js";import{literalSetConverter,trueDefaultBooleanConverter}from"../../../internal/converters.js";import{devWarnOnce}from"../../../internal/dev-mode-attribute-warning.js";import{litDevWarnings}from"../../../internal/dev-warning.js";import{chevronIcon}from"../../../internal/icons.js";import{sanitizeCssColor}from"../../../internal/safe-css.js";import{DEFAULT_CANVAS_COLOR,resolveCanvasColor}from"../../../internal/canvas-color.js";import{finiteRange}from"../../../internal/numbers.js";import{prefersReducedMotion}from"../../../internal/motion.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{notifyMapCanvasReady}from"../../../internal/map-canvas-ready.js";import{AnnouncementSinkController}from"../../../internal/announcer.js";import{hostAriaLabel,srOnly}from"../../../internal/a11y.js";import{ThemeWatcher}from"../../../internal/theme-watcher.js";import{loadMaplibre}from"./map-loader.js";import{styles}from"./map.styles.js";import{projectGeoJson,projectAdmittedGeoJson,buildProjectedGeoJsonPropertyDiff}from"./map-geojson-diff.js";import{buildGeoJsonPropertyDiff}from"./map-geojson-diff.js";import{clusterColorExpression,heatmapColorExpression,heatmapWeightExpression,heatmapZoomValue,lineColorExpression,mutedCategoryOpacityExpression,pointColorExpression,pointRadiusExpression,stepExpression}from"./map-data-layers.js";import"../../overlays/skeleton/skeleton.class.js";import{LYRA_DEFAULT_mapFeedback,LYRA_DEFAULT_mapInitializationFailed,LYRA_DEFAULT_mapLegend,LYRA_DEFAULT_mapMarker,LYRA_DEFAULT_mapMissingLibrary,LYRA_DEFAULT_mapResetNorth,LYRA_DEFAULT_mapStyleRequired,LYRA_DEFAULT_mapToggleAttribution,LYRA_DEFAULT_mapWebglUnavailable}from"../../../internal/default-strings/media.generated.js";import{LYRA_DEFAULT_close,LYRA_DEFAULT_items,LYRA_DEFAULT_legendTypeHidden,LYRA_DEFAULT_legendTypeShown,LYRA_DEFAULT_loading,LYRA_DEFAULT_map,LYRA_DEFAULT_paginationSummary,LYRA_DEFAULT_zoomIn,LYRA_DEFAULT_zoomOut}from"../../../internal/default-strings/shared.generated.js";function supportsWebGL2(host){try{const context=host.ownerDocument.createElement("canvas").getContext("webgl2");if(!context)return!1;try{context.getExtension("WEBGL_lose_context")?.loseContext()}catch{}return!0}catch{return!1}}function hasMapStyle(style){return typeof style=="string"?style.trim().length>0:style!==void 0}const LEGEND_CONTROL_ROLE=literalSetConverter(["button","checkbox"],"button"),MAX_MAP_LEGEND_GRADIENT_STOPS=64;function isRuntimeArray(value){try{return Array.isArray(value)}catch{return!1}}function isRuntimeRecord(value){try{return value!==null&&typeof value=="object"&&!Array.isArray(value)}catch{return!1}}function boundedOwnArrayLength(value,limit){if(!isRuntimeArray(value))return;const descriptor=getOwnDataDescriptor(value,"length");if(!(descriptor===MISSING_OWN_DATA_DESCRIPTOR||descriptor===UNSAFE_OWN_DATA_DESCRIPTOR||typeof descriptor.value!="number"||!Number.isSafeInteger(descriptor.value)||descriptor.value<0))return Math.min(descriptor.value,limit)}function isUnsafeDescriptor(descriptor){return descriptor===UNSAFE_OWN_DATA_DESCRIPTOR}function optionalDescriptorValue(descriptor){return descriptor===MISSING_OWN_DATA_DESCRIPTOR||isUnsafeDescriptor(descriptor)?void 0:descriptor.value}function normalizeMapLegendGradient(value){try{const scanCount=boundedOwnArrayLength(value,MAX_MAP_LEGEND_GRADIENT_STOPS);if(scanCount===void 0)return[];const usable=[];for(let index=0;index<scanCount;index+=1){const stopDescriptor=getOwnDataDescriptor(value,String(index));if(stopDescriptor===MISSING_OWN_DATA_DESCRIPTOR||isUnsafeDescriptor(stopDescriptor))continue;const stop=stopDescriptor.value,stopLength=boundedOwnArrayLength(stop,2);if(stopLength===void 0||stopLength<2)continue;const valueDescriptor=getOwnDataDescriptor(stop,"0"),colorDescriptor=getOwnDataDescriptor(stop,"1");if(valueDescriptor===MISSING_OWN_DATA_DESCRIPTOR||colorDescriptor===MISSING_OWN_DATA_DESCRIPTOR||isUnsafeDescriptor(valueDescriptor)||isUnsafeDescriptor(colorDescriptor)||typeof valueDescriptor.value!="number"||!Number.isFinite(valueDescriptor.value)||typeof colorDescriptor.value!="string")continue;const color=sanitizeCssColor(colorDescriptor.value);color&&usable.push([valueDescriptor.value,color])}return usable.length<2?[]:Object.freeze([...usable].sort((a,b)=>a[0]-b[0]))}catch{return[]}}const MAP_LEGEND_ITEM_LIMIT=100,MAP_LEGEND_SCAN_LIMIT=1e3,MAP_LEGEND_LABEL_LIMIT=256,MAP_LEGEND_TOTAL_LABEL_LIMIT=8192,MAP_LEGEND_COLOR_LIMIT=256,MAP_LEGEND_VALUE_LIMIT=256,MAP_LEGEND_PATTERNS=new Set(["solid","diagonal","dots","crosshatch"]),EMPTY_MAP_LEGEND=Object.freeze([]),EMPTY_MAP_LEGEND_PROJECTION=Object.freeze({inputCount:0,renderedCount:0,omittedCount:0,truncatedLabelCount:0,truncated:!1});function boundedLegendText(value,limit){return value.length<=limit?value:`${value.slice(0,Math.max(0,limit-1))}…`}function normalizeMapLegend(value){let input;try{input=Array.isArray(value)?value:[]}catch{input=[]}let inputCount=0;try{inputCount=Math.max(0,Math.min(Number.MAX_SAFE_INTEGER,input.length))}catch{inputCount=0}const entries=[];let labelCharacters=0,truncatedLabelCount=0;const scanCount=Math.min(inputCount,MAP_LEGEND_SCAN_LIMIT);for(let index=0;index<scanCount&&entries.length<MAP_LEGEND_ITEM_LIMIT;index++)try{const candidate=input[index];if(!candidate||typeof candidate!="object")continue;const rawColor=candidate.color,rawLabel=candidate.label,rawPattern=candidate.pattern;if(typeof rawColor!="string"||typeof rawLabel!="string"||typeof rawPattern!="string"||!MAP_LEGEND_PATTERNS.has(rawPattern))continue;const remaining=MAP_LEGEND_TOTAL_LABEL_LIMIT-labelCharacters;if(remaining<=0)break;const labelLimit=Math.min(MAP_LEGEND_LABEL_LIMIT,remaining),label=boundedLegendText(rawLabel,labelLimit);if(!label.trim())continue;rawLabel.length>labelLimit&&truncatedLabelCount++,labelCharacters+=label.length;const rawValue=candidate.value,trimmedValue=typeof rawValue=="string"?rawValue.trim():"",value2=trimmedValue?trimmedValue.slice(0,MAP_LEGEND_VALUE_LIMIT):void 0,rawGroup=candidate.group,trimmedGroup=typeof rawGroup=="string"?rawGroup.trim():"",group=trimmedGroup?boundedLegendText(trimmedGroup,MAP_LEGEND_LABEL_LIMIT):void 0,rawIcon=candidate.icon,icon=isRuntimeRecord(rawIcon)?projectIconPaint(rawIcon):void 0;entries.push(Object.freeze({color:rawColor.slice(0,MAP_LEGEND_COLOR_LIMIT),label,pattern:rawPattern,...value2?{value:value2}:{},...group?{group}:{},...icon?{icon}:{}}))}catch{}const frozenEntries=entries.length?Object.freeze(entries):EMPTY_MAP_LEGEND,omittedCount=Math.max(0,inputCount-frozenEntries.length),projection=Object.freeze({inputCount,renderedCount:frozenEntries.length,omittedCount,truncatedLabelCount,truncated:omittedCount>0||truncatedLabelCount>0});return{entries:frozenEntries,projection,grouped:frozenEntries.some(entry=>entry.group!==void 0)}}const EMPTY_HIDDEN_CATEGORIES=Object.freeze([]);function normalizeMapHiddenCategories(value){let input,length=0;try{input=Array.isArray(value)?value:[],length=Math.max(0,Math.min(MAP_LEGEND_SCAN_LIMIT,input.length))}catch{return EMPTY_HIDDEN_CATEGORIES}const keys=[];for(let index=0;index<length&&keys.length<MAP_LEGEND_ITEM_LIMIT;index++)try{const candidate=input[index];if(typeof candidate!="string")continue;const key=candidate.trim().slice(0,MAP_LEGEND_VALUE_LIMIT);if(!key||keys.includes(key))continue;keys.push(key)}catch{}return keys.length?Object.freeze(keys):EMPTY_HIDDEN_CATEGORIES}function renderLegendIcon(icon){const[x,y,width,height]=icon.viewBox??DEFAULT_ICON_VIEW_BOX,mode=icon.mode??"fill";return html`<svg
     class="legend-icon"
     viewBox=${`${x} ${y} ${width} ${height}`}
     focusable="false"

package/dist/components/media/media-card/media-card.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{expandIcon,fileIcon}from"../../../internal/icons.js";import{safeDownloadHref as safeMediaCardLinkHref,safeMediaSrc as safeMediaCardSrc}from"../../../internal/safe-url.js";import{styles}from"./media-card.styles.js";import{sanitizeCssLength}from"../../../internal/safe-css.js";import{LYRA_DEFAULT_mediaCardImageAttachment,LYRA_DEFAULT_mediaCardOpenFileAttachment,LYRA_DEFAULT_mediaCardOpenImageAttachment,LYRA_DEFAULT_mediaCardOpenName,LYRA_DEFAULT_mediaCardOpenVideoAttachment,LYRA_DEFAULT_mediaCardUntitledFile,LYRA_DEFAULT_mediaCardVideoAttachment}from"../../../internal/default-strings.generated.js";function detectKind(mimeType){const mt=mimeType.trim().toLowerCase();return mt.startsWith("image/")?"image":mt.startsWith("video/")?"video":"file"}class LyraMediaCard extends LyraElement{constructor(){super(...arguments),this.src="",this.mimeType="",this.filename="",this.accessibleLabel=null,this.disabled=!1,this.triggerPressed=null,this.triggerCurrent=null,this.maxHeight="",this.frame="card",this.onActivate=()=>{this.disabled||this.emit("lr-media-open",this.eventDetail())},this.onActionFocus=event=>{relayNativeEvent(this,event)},this.onActionBlur=event=>{relayNativeEvent(this,event)},this.onLinkClick=e=>{if(this.disabled){e.preventDefault();return}const detail=this.eventDetail();this.emit("lr-media-download-request",{...detail},{cancelable:!0}).defaultPrevented&&e.preventDefault()}}static{this.defaultStrings={...super.defaultStrings,mediaCardImageAttachment:LYRA_DEFAULT_mediaCardImageAttachment,mediaCardOpenFileAttachment:LYRA_DEFAULT_mediaCardOpenFileAttachment,mediaCardOpenImageAttachment:LYRA_DEFAULT_mediaCardOpenImageAttachment,mediaCardOpenName:LYRA_DEFAULT_mediaCardOpenName,mediaCardOpenVideoAttachment:LYRA_DEFAULT_mediaCardOpenVideoAttachment,mediaCardUntitledFile:LYRA_DEFAULT_mediaCardUntitledFile,mediaCardVideoAttachment:LYRA_DEFAULT_mediaCardVideoAttachment}}static{this.styles=[LyraElement.styles,styles]}get forwardedPressed(){return["true","false","mixed"].includes(this.triggerPressed??"")?this.triggerPressed:nothing}get forwardedCurrent(){return["page","step","location","date","time","true","false"].includes(this.triggerCurrent??"")?this.triggerCurrent:nothing}get resolvedKind(){return this.kind??detectKind(this.mimeType??"")}get displayFilename(){return this.filename||this.localize("mediaCardUntitledFile")}get actionLabel(){const hostLabel=this.getAttribute("aria-label");if(this.accessibleLabel&&(hostLabel===null||this.accessibleLabel!==hostLabel))return this.accessibleLabel;const name=this.filename||this.alt;return name?this.localize("mediaCardOpenName",void 0,{name}):this.resolvedKind==="image"?this.localize("mediaCardOpenImageAttachment"):this.resolvedKind==="video"?this.localize("mediaCardOpenVideoAttachment"):this.localize("mediaCardOpenFileAttachment")}get imgAlt(){return this.alt??(this.filename||this.localize("mediaCardImageAttachment"))}get videoLabel(){return this.alt||this.filename||this.localize("mediaCardVideoAttachment")}get baseStyle(){const maxHeight=sanitizeCssLength(this.maxHeight);return maxHeight?styleMap({"--lr-media-card-max-height":maxHeight}):nothing}eventDetail(){return{src:safeMediaCardSrc(this.src)??safeMediaCardLinkHref(this.src)??this.src.trim(),filename:this.filename}}get primaryAction(){return this.shadowRoot?.querySelector('button[part="base"], button[part="open-button"], a[part="base"]')??null}focus(options){this.primaryAction?.focus(options)}blur(){this.primaryAction?.blur()}click(){this.disabled||this.primaryAction?.click()}renderImage(src){return html`
+import{__decorate}from"tslib";import{html,nothing}from"lit";import{property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{LyraElement}from"../../../internal/lyra-element.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{expandIcon,fileIcon}from"../../../internal/icons.js";import{safeDownloadHref as safeMediaCardLinkHref,safeMediaSrc as safeMediaCardSrc}from"../../../internal/safe-url.js";import{styles}from"./media-card.styles.js";import{sanitizeCssLength}from"../../../internal/safe-css.js";import{LYRA_DEFAULT_mediaCardImageAttachment,LYRA_DEFAULT_mediaCardOpenFileAttachment,LYRA_DEFAULT_mediaCardOpenImageAttachment,LYRA_DEFAULT_mediaCardOpenName,LYRA_DEFAULT_mediaCardOpenVideoAttachment,LYRA_DEFAULT_mediaCardUntitledFile,LYRA_DEFAULT_mediaCardVideoAttachment}from"../../../internal/default-strings/media.generated.js";function detectKind(mimeType){const mt=mimeType.trim().toLowerCase();return mt.startsWith("image/")?"image":mt.startsWith("video/")?"video":"file"}class LyraMediaCard extends LyraElement{constructor(){super(...arguments),this.src="",this.mimeType="",this.filename="",this.accessibleLabel=null,this.disabled=!1,this.triggerPressed=null,this.triggerCurrent=null,this.maxHeight="",this.frame="card",this.onActivate=()=>{this.disabled||this.emit("lr-media-open",this.eventDetail())},this.onActionFocus=event=>{relayNativeEvent(this,event)},this.onActionBlur=event=>{relayNativeEvent(this,event)},this.onLinkClick=e=>{if(this.disabled){e.preventDefault();return}const detail=this.eventDetail();this.emit("lr-media-download-request",{...detail},{cancelable:!0}).defaultPrevented&&e.preventDefault()}}static{this.defaultStrings={...super.defaultStrings,mediaCardImageAttachment:LYRA_DEFAULT_mediaCardImageAttachment,mediaCardOpenFileAttachment:LYRA_DEFAULT_mediaCardOpenFileAttachment,mediaCardOpenImageAttachment:LYRA_DEFAULT_mediaCardOpenImageAttachment,mediaCardOpenName:LYRA_DEFAULT_mediaCardOpenName,mediaCardOpenVideoAttachment:LYRA_DEFAULT_mediaCardOpenVideoAttachment,mediaCardUntitledFile:LYRA_DEFAULT_mediaCardUntitledFile,mediaCardVideoAttachment:LYRA_DEFAULT_mediaCardVideoAttachment}}static{this.styles=[LyraElement.styles,styles]}get forwardedPressed(){return["true","false","mixed"].includes(this.triggerPressed??"")?this.triggerPressed:nothing}get forwardedCurrent(){return["page","step","location","date","time","true","false"].includes(this.triggerCurrent??"")?this.triggerCurrent:nothing}get resolvedKind(){return this.kind??detectKind(this.mimeType??"")}get displayFilename(){return this.filename||this.localize("mediaCardUntitledFile")}get actionLabel(){const hostLabel=this.getAttribute("aria-label");if(this.accessibleLabel&&(hostLabel===null||this.accessibleLabel!==hostLabel))return this.accessibleLabel;const name=this.filename||this.alt;return name?this.localize("mediaCardOpenName",void 0,{name}):this.resolvedKind==="image"?this.localize("mediaCardOpenImageAttachment"):this.resolvedKind==="video"?this.localize("mediaCardOpenVideoAttachment"):this.localize("mediaCardOpenFileAttachment")}get imgAlt(){return this.alt??(this.filename||this.localize("mediaCardImageAttachment"))}get videoLabel(){return this.alt||this.filename||this.localize("mediaCardVideoAttachment")}get baseStyle(){const maxHeight=sanitizeCssLength(this.maxHeight);return maxHeight?styleMap({"--lr-media-card-max-height":maxHeight}):nothing}eventDetail(){return{src:safeMediaCardSrc(this.src)??safeMediaCardLinkHref(this.src)??this.src.trim(),filename:this.filename}}get primaryAction(){return this.shadowRoot?.querySelector('button[part="base"], button[part="open-button"], a[part="base"]')??null}focus(options){this.primaryAction?.focus(options)}blur(){this.primaryAction?.blur()}click(){this.disabled||this.primaryAction?.click()}renderImage(src){return html`
       <button
         part="base"
         type="button"

package/dist/components/media/pan-zoom/pan-zoom.class.js

@@ -1,4 +1,4 @@
-import{__decorate}from"tslib";import{html}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{HostDescriptionController}from"../../../internal/aria-controls.js";import{hostAriaLabel,srOnly}from"../../../internal/a11y.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{finiteRange}from"../../../internal/numbers.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{normalizeImageFit}from"../../../internal/image-fit.js";import{keyEventOwnedByInnerControl}from"../../../internal/hotkey.js";import{styles}from"./pan-zoom.styles.js";import{LYRA_DEFAULT_pdfViewerCurrentZoom,LYRA_DEFAULT_resetZoom,LYRA_DEFAULT_zoomControls,LYRA_DEFAULT_zoomIn,LYRA_DEFAULT_zoomOut,LYRA_DEFAULT_zoomableFrameLabel}from"../../../internal/default-strings.generated.js";class LyraPanZoom extends LyraElement{constructor(){super(...arguments),this.hostDescription=new HostDescriptionController(this,()=>this.renderRoot.querySelector('[part="viewport"][role="group"]')),this.zoom=1,this.minZoom=.5,this.maxZoom=4,this.zoomStep=.25,this._fit="actual",this.src="",this.alt="",this.accessibleLabel=null,this.onViewportFocus=event=>{relayNativeEvent(this,event)},this.onViewportBlur=event=>{relayNativeEvent(this,event)},this.onViewportKeyDown=event=>{event.altKey||event.ctrlKey||event.metaKey||keyEventOwnedByInnerControl(event,{container:this})||(event.key==="+"||event.key==="="?(event.preventDefault(),this.zoomIn()):event.key==="-"||event.key==="_"?(event.preventDefault(),this.zoomOut()):event.key==="0"&&(event.preventDefault(),this.resetZoom()))}}static{this.defaultStrings={...super.defaultStrings,pdfViewerCurrentZoom:LYRA_DEFAULT_pdfViewerCurrentZoom,resetZoom:LYRA_DEFAULT_resetZoom,zoomControls:LYRA_DEFAULT_zoomControls,zoomIn:LYRA_DEFAULT_zoomIn,zoomOut:LYRA_DEFAULT_zoomOut,zoomableFrameLabel:LYRA_DEFAULT_zoomableFrameLabel}}static{this.styles=[LyraElement.styles,styles,srOnly]}adoptedCallback(){super.adoptedCallback(),this.hostDescription.adopted()}get fit(){return this._fit}set fit(value){const old=this._fit;this._fit=normalizeImageFit(value,"actual"),this.requestUpdate("fit",old)}get safeMinZoom(){return finiteRange(this.minZoom,.5,.01,1e3)}get safeMaxZoom(){return finiteRange(this.maxZoom,4,this.safeMinZoom,1e3)}get safeZoomStep(){return finiteRange(this.zoomStep,.25,.01,1e3)}get safeZoom(){return finiteRange(this.zoom,1,this.safeMinZoom,this.safeMaxZoom)}setZoom(value,quantize=!0){const min=this.safeMinZoom,max=this.safeMaxZoom,step=this.safeZoomStep,stepped=quantize?Math.round(value/step)*step:value,next=Math.min(max,Math.max(min,Math.round(stepped*100)/100));next!==this.zoom&&(this.zoom=next,this.emit("lr-zoom-change",{zoom:next}))}zoomIn(){this.setZoom(this.safeZoom+this.safeZoomStep)}zoomOut(){this.setZoom(this.safeZoom-this.safeZoomStep)}resetZoom(){this.setZoom(1,!1)}resetView(){this.resetZoom(),this.viewportEl?.scrollTo({left:0,top:0})}get viewportEl(){return this.renderRoot.querySelector('[part="viewport"]')}focus(options){this.viewportEl?.focus(options)}blur(){this.viewportEl?.blur()}click(){this.viewportEl?.click()}render(){const zoom=this.safeZoom,min=this.safeMinZoom,max=this.safeMaxZoom,viewportLabel=hostAriaLabel(this)??this.localize("zoomableFrameLabel"),safeSrc=safeMediaSrc(this.src);return html`<div part="base">
+import{__decorate}from"tslib";import{html}from"lit";import{property}from"lit/decorators.js";import{LyraElement}from"../../../internal/lyra-element.js";import{HostDescriptionController}from"../../../internal/aria-controls.js";import{hostAriaLabel,srOnly}from"../../../internal/a11y.js";import{safeMediaSrc}from"../../../internal/safe-url.js";import{finiteRange}from"../../../internal/numbers.js";import{normalizeImageZoom}from"../../../internal/image-zoom.js";import{getNumberFormat}from"../../../internal/intl-cache.js";import{relayNativeEvent}from"../../../internal/native-event-relay.js";import{normalizeImageFit}from"../../../internal/image-fit.js";import{keyEventOwnedByInnerControl}from"../../../internal/hotkey.js";import{styles}from"./pan-zoom.styles.js";import{LYRA_DEFAULT_zoomControls,LYRA_DEFAULT_zoomableFrameLabel}from"../../../internal/default-strings/media.generated.js";import{LYRA_DEFAULT_pdfViewerCurrentZoom,LYRA_DEFAULT_resetZoom,LYRA_DEFAULT_zoomIn,LYRA_DEFAULT_zoomOut}from"../../../internal/default-strings/shared.generated.js";class LyraPanZoom extends LyraElement{constructor(){super(...arguments),this.hostDescription=new HostDescriptionController(this,()=>this.renderRoot.querySelector('[part="viewport"][role="group"]')),this.zoom=1,this.minZoom=.5,this.maxZoom=4,this.zoomStep=.25,this._fit="actual",this.src="",this.alt="",this.accessibleLabel=null,this.onViewportFocus=event=>{relayNativeEvent(this,event)},this.onViewportBlur=event=>{relayNativeEvent(this,event)},this.onViewportKeyDown=event=>{event.altKey||event.ctrlKey||event.metaKey||keyEventOwnedByInnerControl(event,{container:this})||(event.key==="+"||event.key==="="?(event.preventDefault(),this.zoomIn()):event.key==="-"||event.key==="_"?(event.preventDefault(),this.zoomOut()):event.key==="0"&&(event.preventDefault(),this.resetZoom()))}}static{this.defaultStrings={...super.defaultStrings,pdfViewerCurrentZoom:LYRA_DEFAULT_pdfViewerCurrentZoom,resetZoom:LYRA_DEFAULT_resetZoom,zoomControls:LYRA_DEFAULT_zoomControls,zoomIn:LYRA_DEFAULT_zoomIn,zoomOut:LYRA_DEFAULT_zoomOut,zoomableFrameLabel:LYRA_DEFAULT_zoomableFrameLabel}}static{this.styles=[LyraElement.styles,styles,srOnly]}adoptedCallback(){super.adoptedCallback(),this.hostDescription.adopted()}get fit(){return this._fit}set fit(value){const old=this._fit;this._fit=normalizeImageFit(value,"actual"),this.requestUpdate("fit",old)}get safeMinZoom(){return finiteRange(this.minZoom,.5,.01,1e3)}get safeMaxZoom(){return finiteRange(this.maxZoom,4,this.safeMinZoom,1e3)}get safeZoomStep(){return finiteRange(this.zoomStep,.25,.01,1e3)}get safeZoom(){return normalizeImageZoom(this.zoom,this.minZoom,this.maxZoom)}setZoom(value,quantize=!0){const min=this.safeMinZoom,max=this.safeMaxZoom,step=this.safeZoomStep,stepped=quantize?Math.round(value/step)*step:value,next=Math.min(max,Math.max(min,Math.round(stepped*100)/100));next!==this.zoom&&(this.zoom=next,this.emit("lr-zoom-change",{zoom:next}))}zoomIn(){this.setZoom(this.safeZoom+this.safeZoomStep)}zoomOut(){this.setZoom(this.safeZoom-this.safeZoomStep)}resetZoom(){this.setZoom(1,!1)}resetView(){this.resetZoom(),this.viewportEl?.scrollTo({left:0,top:0})}get viewportEl(){return this.renderRoot.querySelector('[part="viewport"]')}focus(options){this.viewportEl?.focus(options)}blur(){this.viewportEl?.blur()}click(){this.viewportEl?.click()}render(){const zoom=this.safeZoom,min=this.safeMinZoom,max=this.safeMaxZoom,viewportLabel=hostAriaLabel(this)??this.localize("zoomableFrameLabel"),safeSrc=safeMediaSrc(this.src);return html`<div part="base">
       <div
         part="viewport"
         role="group"

package/dist/components/media/qr-code/qr-code.class.d.ts

@@ -91,11 +91,11 @@ get errorCorrection():LyraQrCodeErrorCorrection;set errorCorrection(value:LyraQr
 /** The stable canvas used for QR paint. The same node remains reachable across empty, loading,
 * ready, error, reconnect, and redraw transitions. Readonly: an explicit `get` (rather than
 * `@query`) so the generated manifest marks it non-assignable. */
-get canvas():HTMLCanvasElement;private loadState;private readonly announcements;private pendingLoadingAnnouncement;private readonly accessibilityInternals?;private visible;private visibilityKnown;private intersectionObserver?;private intersectionGeneration;private loadLibrary;private generation;constructor();connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;private bindVisibilityObserver;private clearVisibilityObserver;private restoreImmediateVisibility;private transitionTo;private syncSemanticOwner;protected updated(changed:PropertyValues):void;protected willUpdate(changed:PropertyValues):void;
+get canvas():HTMLCanvasElement;private loadState;private readonly announcements;private pendingLoadingAnnouncement;private readonly accessibilityInternals?;private visible;private visibilityKnown;private intersectionObserver?;private intersectionGeneration;private loadLibrary;private generation;private embeddedImage?;constructor();connectedCallback():void;disconnectedCallback():void;adoptedCallback():void;private bindVisibilityObserver;private clearVisibilityObserver;private restoreImmediateVisibility;private transitionTo;private syncSemanticOwner;protected updated(changed:PropertyValues):void;protected willUpdate(changed:PropertyValues):void;
 /** Re-encodes `value` via the optional `qrcode` peer's `create()` and caches the resulting
 *  module matrix. Redraw-only geometry changes (`size`/`radius`) and theme refreshes never
 *  call this -- see the class doc comment and `updated()`'s dispatch. */
-generate():void;private generateCurrentValue;private loadEmbeddedImage;
+generate():void;private generateCurrentValue;private clearEmbeddedImage;private loadEmbeddedImage;
 /** Redraws canvas content after an upstream token or theme change, reusing the already-
 *  cached module matrix rather than re-encoding `value`. The component automatically observes
 *  ancestor theme-attribute changes and color-scheme changes; this method remains available for