@aceshooting/lyra-ui 18.1.0 → 18.3.0

package/dist/components/utility/export-button/export-button.class.js

@@ -1,4 +1,4 @@
-var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{LyraElement}from"../../../internal/lyra-element.js";import{deferredPlaceReady as place}from"../../../internal/anchored-overlay-runtime.js";import{nextId}from"../../../internal/a11y.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{buildCsv,downloadBlob}from"./csv.js";import{styles}from"./export-button.styles.js";import{activeElementIn}from"../../../internal/active-element.js";import{activateNonmodalOverlay}from"../../../internal/nonmodal-overlay-manager.js";import{getOwnDataDescriptor,MISSING_OWN_DATA_DESCRIPTOR,UNSAFE_OWN_DATA_DESCRIPTOR}from"../../../internal/data-descriptors.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{LYRA_DEFAULT_exportButtonLabel,LYRA_DEFAULT_exportFormatMenuLabel,LYRA_DEFAULT_statusError}from"../../../internal/default-strings.generated.js";const MAX_EXPORT_FORMATS=1e4;function queueDocumentMicrotask(ownerDocument,callback){const ownerWindow=ownerDocument.defaultView;if(ownerWindow){ownerWindow.queueMicrotask(callback);return}Promise.resolve().then(callback)}function formatArrayLength(value){try{if(!Array.isArray(value))return;const length=getOwnDataDescriptor(value,"length");return length===MISSING_OWN_DATA_DESCRIPTOR||length===UNSAFE_OWN_DATA_DESCRIPTOR||typeof length.value!="number"||!Number.isSafeInteger(length.value)||length.value<0?void 0:{source:value,length:Math.min(length.value,MAX_EXPORT_FORMATS)}}catch{return}}function projectExportFormat(value){if(value==="csv"||value==="json")return value;if(value===null||typeof value!="object")return;const formatId=getOwnDataDescriptor(value,"formatId"),label=getOwnDataDescriptor(value,"label");if(formatId===MISSING_OWN_DATA_DESCRIPTOR||formatId===UNSAFE_OWN_DATA_DESCRIPTOR||label===MISSING_OWN_DATA_DESCRIPTOR||label===UNSAFE_OWN_DATA_DESCRIPTOR||typeof formatId.value!="string"||formatId.value.trim().length===0||typeof label.value!="string"||label.value.trim().length===0)return;const description=getOwnDataDescriptor(value,"description"),extension=getOwnDataDescriptor(value,"extension");return Object.freeze({formatId:formatId.value,label:label.value,...description!==MISSING_OWN_DATA_DESCRIPTOR&&description!==UNSAFE_OWN_DATA_DESCRIPTOR&&typeof description.value=="string"?{description:description.value}:{},...extension!==MISSING_OWN_DATA_DESCRIPTOR&&extension!==UNSAFE_OWN_DATA_DESCRIPTOR&&typeof extension.value=="string"?{extension:extension.value}:{}})}class LyraExportButton extends LyraElement{constructor(){super(...arguments),this._rows=Object.freeze([]),this._columns=Object.freeze([]),this.filename="export",this.bom=!1,this._formats=Object.freeze(["csv"]),this.disabled=!1,this.loading=!1,this.accessibleLabel=null,this.open=!1,this.exportFailed=!1,this.menuId=nextId("export-menu"),this.menuPositioned=!1,this.connectionGeneration=0,this._isFirstUpdate=!0,this.openVetoed=!1,this.pendingMenuFocusIndex=0,this.injectedHostTabIndex=!1,this.restoreFocusOnMenuClose=!1,this.onDocPointer=e=>{e.composedPath().includes(this)||(this.overlay?.isActive()?this.overlay.dismissBackdrop():this.closeMenu())},this.syncMenuOverlay=()=>{if(this.cleanup?.(),this.cleanup=void 0,this.menuPositioned=!1,this.unbindDocumentPointer(),!this.open||!this.isConnected){const restoreFocus=this.restoreFocusOnMenuClose;this.restoreFocusOnMenuClose=!1,this.deactivateMenuOverlay(restoreFocus);return}this.activateMenuOverlay(),this.bindDocumentPointer();const anchor=this.triggerEl,menu=this.menuEl,ownerDocument=this.ownerDocument;if(!anchor||!menu)return;const placement=place(anchor,menu,{strategy:resolveEffectivePositioningStrategy(this,void 0,"fixed")});this.cleanup=placement,placement.ready.then(positioned=>{if(!(this.cleanup!==placement||!this.open||!this.isConnected||this.ownerDocument!==ownerDocument)){if(!positioned){this.forcedMenuClose="state",this.open=!1;return}this.menuPositioned=!0,this.focusMenuItem(this.pendingMenuFocusIndex),this.pendingMenuFocusIndex=0}})},this.onKeyDown=e=>{if(this.formats.length<=1||this.disabled||this.loading)return;const items=this.menuItemEls(),currentIndex=items.indexOf(e.target);switch(e.key){case"ArrowDown":e.preventDefault(),this.focusMenuItemOnOpen(currentIndex===-1?0:currentIndex+1);break;case"ArrowUp":e.preventDefault(),this.focusMenuItemOnOpen(currentIndex===-1?items.length-1:currentIndex-1);break;case"Home":this.open&&(e.preventDefault(),this.focusMenuItem(0));break;case"End":this.open&&(e.preventDefault(),this.focusMenuItem(items.length-1));break}}}static{this.defaultStrings={...super.defaultStrings,exportButtonLabel:LYRA_DEFAULT_exportButtonLabel,exportFormatMenuLabel:LYRA_DEFAULT_exportFormatMenuLabel,statusError:LYRA_DEFAULT_statusError}}static{this.styles=[LyraElement.styles,styles]}static{this.properties={rows:{attribute:!1,noAccessor:!0},columns:{attribute:!1,noAccessor:!0},formats:{attribute:!1,noAccessor:!0}}}get rows(){return this._rows}set rows(next){const previous=this._rows,source=Array.isArray(next)?next:[];this._rows=Object.freeze(source.map(row=>Object.freeze({...row}))),this.requestUpdate("rows",previous)}get columns(){return this._columns}set columns(next){const previous=this._columns,source=Array.isArray(next)?next:[];this._columns=Object.freeze(source.map(column=>Object.freeze({...column}))),this.requestUpdate("columns",previous)}get formats(){return this._formats}set formats(next){const previous=this._formats,source=formatArrayLength(next),seen=new Set,formats=[];for(let index=0;source&&index<source.length;index+=1){const descriptor=getOwnDataDescriptor(source.source,String(index));if(descriptor===MISSING_OWN_DATA_DESCRIPTOR||descriptor===UNSAFE_OWN_DATA_DESCRIPTOR)continue;const snapshot=projectExportFormat(descriptor.value);if(!snapshot)continue;const id=typeof snapshot=="string"?snapshot:snapshot.formatId;typeof id!="string"||id.trim()===""||seen.has(id)||(seen.add(id),formats.push(snapshot))}this._formats=Object.freeze(formats),this.requestUpdate("formats",previous)}connectedCallback(){const pendingDisconnectDocument=this.pendingDisconnectDocument;if(this.pendingDisconnectDocument=void 0,this.connectionGeneration+=1,this.connectedDocument=this.ownerDocument,super.connectedCallback(),this.sink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),pendingDisconnectDocument){if(pendingDisconnectDocument===this.ownerDocument){this.deactivateMenuOverlay(!1),this.restoreFocusOnMenuClose=!1,this.open=!1;return}this.hasUpdated&&this.open&&this.scheduleAfterUpdate(this.syncMenuOverlay,"export-button-menu-overlay");return}this.hasUpdated&&this.open&&this.scheduleAfterUpdate(this.syncMenuOverlay,"export-button-menu-overlay")}disconnectedCallback(){const generation=++this.connectionGeneration,disconnectDocument=this.connectedDocument??this.ownerDocument;this.pendingDisconnectDocument=disconnectDocument,super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.menuPositioned=!1,this.unbindDocumentPointer(),this.overlay?.suspend(),this.restoreFocusOnMenuClose=!1,this.sink?.release(),this.sink=void 0,queueDocumentMicrotask(disconnectDocument,()=>{this.connectionGeneration!==generation||this.isConnected||this.pendingDisconnectDocument!==disconnectDocument||(this.pendingDisconnectDocument=void 0,this.deactivateMenuOverlay(!1),this.restoreFocusOnMenuClose=!1,this.open=!1)})}adoptedCallback(){super.adoptedCallback(),this.cleanup?.(),this.cleanup=void 0,this.unbindDocumentPointer(),this.overlay?.suspend(),this.sink?.release(),this.sink=void 0}bindDocumentPointer(){if(!this.isConnected)return;const owner=this.ownerDocument;this.pointerDocument!==owner&&(this.unbindDocumentPointer(),owner.addEventListener("pointerdown",this.onDocPointer),this.pointerDocument=owner)}unbindDocumentPointer(){this.pointerDocument?.removeEventListener("pointerdown",this.onDocPointer),this.pointerDocument=void 0}openMenu(){this.open||(this.open=!0)}closeMenu(restoreFocus=!1){this.open&&(this.restoreFocusOnMenuClose||=restoreFocus,this.open=!1)}activateMenuOverlay(){if(this.overlay?.isActive()){this.overlay.resume();return}this.overlay=activateNonmodalOverlay({host:this,panel:()=>this.menuEl??null,onEscape:()=>this.closeMenu(!0),onBackdrop:()=>this.closeMenu(),onTab:()=>this.closeMenu(),restoreFocusTo:()=>this.triggerEl??null})}deactivateMenuOverlay(restoreFocus){const overlay=this.overlay;this.overlay=void 0,overlay?.deactivate({restoreFocus}),this.unbindDocumentPointer()}menuItemEls(){return Array.from(this.renderRoot.querySelectorAll('[part="menu-item"]'))}focusMenuItem(index){const items=this.menuItemEls();items.length!==0&&items[Math.max(0,Math.min(items.length-1,index))]?.focus()}focusMenuItemOnOpen(index){this.open&&this.menuPositioned?this.focusMenuItem(index):(this.pendingMenuFocusIndex=index,this.open||this.openMenu())}firstUpdated(changed){super.firstUpdated(changed),this.renderRoot.addEventListener("keydown",this.onKeyDown)}willUpdate(changed){if(super.willUpdate(changed),this._isFirstUpdate=!this.hasUpdated,this.setAttribute("aria-busy",String(this.loading)),(changed.has("disabled")||changed.has("loading"))&&!this.disabled&&!this.loading&&this.injectedHostTabIndex&&(this.getAttribute("tabindex")==="-1"&&this.removeAttribute("tabindex"),this.injectedHostTabIndex=!1),(changed.has("disabled")||changed.has("loading"))&&(this.disabled||this.loading)){const active=activeElementIn(this.shadowRoot);if(active===this.triggerEl||active?.getAttribute("part")==="menu-item"){this.hasAttribute("tabindex")||(this.tabIndex=-1,this.injectedHostTabIndex=!0);const ownerHTMLElement=this.ownerDocument.defaultView?.HTMLElement,nativeFocus=ownerHTMLElement?Reflect.get(ownerHTMLElement.prototype,"focus",this):void 0;typeof nativeFocus=="function"&&nativeFocus.call(this,{preventScroll:!0})}this.open&&(this.open=!1,this.forcedMenuClose="state")}if(changed.has("formats")){const active=activeElementIn(this.shadowRoot),index=this.menuItemEls().indexOf(active),previous=changed.get("formats")?.[index];this.formatsFocusSnapshot=index>=0&&previous?{index,id:this.formatId(previous)}:void 0}if(this.open&&this.formats.length<=1){const previousOpen=changed.get("open");this.forcedMenuClose=changed.has("formats")&&changed.get("formats")?.length?"formats":previousOpen===!1||previousOpen===void 0?"invalid-open":"state",this.open=!1}this.announceMenuTransition(changed)}announceMenuTransition(changed){if(this.openVetoed=!1,!changed.has("open")||this._isFirstUpdate||this.forcedMenuClose)return;const name=this.open?"lr-show":"lr-hide";this.emit(name,null,{cancelable:!0}).defaultPrevented&&(this.openVetoed=!0,this.open=!this.open)}updated(changed){super.updated(changed);const forcedMenuClose=this.forcedMenuClose;if(this.forcedMenuClose=void 0,(changed.has("open")||forcedMenuClose==="formats"||forcedMenuClose==="state")&&!this.openVetoed?this.syncMenuOverlay():this.openVetoed&&(this.restoreFocusOnMenuClose=!1),changed.has("formats")&&this.formatsFocusSnapshot){const{index,id}=this.formatsFocusSnapshot;this.formatsFocusSnapshot=void 0,this.scheduleAfterUpdate(()=>{if(this.formats.length<=1)this.closeMenu(),this.triggerEl?.focus();else if(this.open){const nextIndex=this.formats.findIndex(format=>this.formatId(format)===id);this.focusMenuItemOnOpen(nextIndex>=0?nextIndex:index)}})}}effectiveColumns(rows){if(this.columns.length>0)return this.columns;const keys=new Set;for(const row of rows)for(const key of Object.keys(row))keys.add(key);return Array.from(keys,key=>({key,label:key}))}rowsToExport(){if(this.getRows===void 0)return this.rows;const supplied=this.getRows();return Array.isArray(supplied)?supplied:[]}rowsForExport(rows){const keys=this.effectiveColumns(rows).map(c=>c.key);return rows.map(row=>{const picked=Object.create(null);for(const key of keys)picked[key]=row[key];return picked})}formatId(format){return typeof format=="string"?format:format.formatId}formatLabel(format){return typeof format=="string"?format.toUpperCase():format.label}doExport(formatOption){if(this.disabled||this.loading)return;this.closeMenu(),this.triggerEl?.focus(),this.exportFailed=!1;const format=this.formatId(formatOption);if(!this.emit("lr-export",Object.freeze({format}),{cancelable:!0}).defaultPrevented&&!(format!=="csv"&&format!=="json"))try{const rows=this.rowsToExport();format==="csv"?downloadBlob(buildCsv(rows,this.effectiveColumns(rows),{bom:this.bom}),`${this.filename}.csv`,"text/csv;charset=utf-8;",this.ownerDocument):downloadBlob(JSON.stringify(this.rowsForExport(rows),null,2),`${this.filename}.json`,"application/json",this.ownerDocument),this.emit("lr-export-complete",Object.freeze({format}))}catch(error){this.exportFailed=!0,this.sink?.announce(this.localize("statusError")),this.emit("lr-export-error",Object.freeze({format,error}))}}onTriggerClick(){this.disabled||this.loading||this.formats.length!==0&&(this.formats.length===1?this.doExport(this.formats[0]):this.open?this.closeMenu():this.openMenu())}focus(options){this.triggerEl?.focus(options)}blur(){this.triggerEl?.blur()}click(){this.triggerEl?.click()}get effectiveLabel(){return this.label==null?this.localize("exportButtonLabel"):this.label}render(){const label=this.effectiveLabel,labelNamesTrigger=label.trim().length>0,accessibleLabel=this.accessibleLabel??(labelNamesTrigger?label:this.localize("exportButtonLabel")),triggerAriaLabel=this.accessibleLabel!==null||!labelNamesTrigger?accessibleLabel:nothing;return html`
+var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3?target:desc===null?desc=Object.getOwnPropertyDescriptor(target,key):desc,d;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(decorators,target,key,desc);else for(var i=decorators.length-1;i>=0;i--)(d=decorators[i])&&(r=(c<3?d(r):c>3?d(target,key,r):d(target,key))||r);return c>3&&r&&Object.defineProperty(target,key,r),r};import{html,nothing}from"lit";import{property,query,state}from"lit/decorators.js";import{repeat}from"lit/directives/repeat.js";import{LyraElement}from"../../../internal/lyra-element.js";import{optionalLiteralSetConverter}from"../../../internal/converters.js";import{normalizeReflectedOptionalSize,optionalSizeConverter}from"../../../internal/variants.js";import{sizes}from"../../../internal/sizes.styles.js";import{deferredPlaceReady as place}from"../../../internal/anchored-overlay-runtime.js";import{nextId}from"../../../internal/a11y.js";import{resolveEffectivePositioningStrategy}from"../../../internal/positioning-strategy.js";import{buildCsv,downloadBlob}from"./csv.js";import{styles}from"./export-button.styles.js";import{activeElementIn}from"../../../internal/active-element.js";import{activateNonmodalOverlay}from"../../../internal/nonmodal-overlay-manager.js";import{getOwnDataDescriptor,MISSING_OWN_DATA_DESCRIPTOR,UNSAFE_OWN_DATA_DESCRIPTOR}from"../../../internal/data-descriptors.js";import{acquireAnnouncementSink}from"../../../internal/announcer.js";import{LYRA_DEFAULT_exportButtonLabel,LYRA_DEFAULT_exportFormatMenuLabel,LYRA_DEFAULT_statusError}from"../../../internal/default-strings.generated.js";const EXPORT_BUTTON_APPEARANCE=optionalLiteralSetConverter(["outlined","quiet"]),MAX_EXPORT_FORMATS=1e4;function queueDocumentMicrotask(ownerDocument,callback){const ownerWindow=ownerDocument.defaultView;if(ownerWindow){ownerWindow.queueMicrotask(callback);return}Promise.resolve().then(callback)}function formatArrayLength(value){try{if(!Array.isArray(value))return;const length=getOwnDataDescriptor(value,"length");return length===MISSING_OWN_DATA_DESCRIPTOR||length===UNSAFE_OWN_DATA_DESCRIPTOR||typeof length.value!="number"||!Number.isSafeInteger(length.value)||length.value<0?void 0:{source:value,length:Math.min(length.value,MAX_EXPORT_FORMATS)}}catch{return}}function projectExportFormat(value){if(value==="csv"||value==="json")return value;if(value===null||typeof value!="object")return;const formatId=getOwnDataDescriptor(value,"formatId"),label=getOwnDataDescriptor(value,"label");if(formatId===MISSING_OWN_DATA_DESCRIPTOR||formatId===UNSAFE_OWN_DATA_DESCRIPTOR||label===MISSING_OWN_DATA_DESCRIPTOR||label===UNSAFE_OWN_DATA_DESCRIPTOR||typeof formatId.value!="string"||formatId.value.trim().length===0||typeof label.value!="string"||label.value.trim().length===0)return;const description=getOwnDataDescriptor(value,"description"),extension=getOwnDataDescriptor(value,"extension");return Object.freeze({formatId:formatId.value,label:label.value,...description!==MISSING_OWN_DATA_DESCRIPTOR&&description!==UNSAFE_OWN_DATA_DESCRIPTOR&&typeof description.value=="string"?{description:description.value}:{},...extension!==MISSING_OWN_DATA_DESCRIPTOR&&extension!==UNSAFE_OWN_DATA_DESCRIPTOR&&typeof extension.value=="string"?{extension:extension.value}:{}})}class LyraExportButton extends LyraElement{constructor(){super(...arguments),this._rows=Object.freeze([]),this._columns=Object.freeze([]),this.filename="export",this.bom=!1,this._formats=Object.freeze(["csv"]),this.disabled=!1,this.loading=!1,this.accessibleLabel=null,this.open=!1,this.exportFailed=!1,this.menuId=nextId("export-menu"),this.menuPositioned=!1,this.connectionGeneration=0,this._isFirstUpdate=!0,this.openVetoed=!1,this.pendingMenuFocusIndex=0,this.injectedHostTabIndex=!1,this.restoreFocusOnMenuClose=!1,this.onDocPointer=e=>{e.composedPath().includes(this)||(this.overlay?.isActive()?this.overlay.dismissBackdrop():this.closeMenu())},this.syncMenuOverlay=()=>{if(this.cleanup?.(),this.cleanup=void 0,this.menuPositioned=!1,this.unbindDocumentPointer(),!this.open||!this.isConnected){const restoreFocus=this.restoreFocusOnMenuClose;this.restoreFocusOnMenuClose=!1,this.deactivateMenuOverlay(restoreFocus);return}this.activateMenuOverlay(),this.bindDocumentPointer();const anchor=this.triggerEl,menu=this.menuEl,ownerDocument=this.ownerDocument;if(!anchor||!menu)return;const placement=place(anchor,menu,{strategy:resolveEffectivePositioningStrategy(this,void 0,"fixed")});this.cleanup=placement,placement.ready.then(positioned=>{if(!(this.cleanup!==placement||!this.open||!this.isConnected||this.ownerDocument!==ownerDocument)){if(!positioned){this.forcedMenuClose="state",this.open=!1;return}this.menuPositioned=!0,this.focusMenuItem(this.pendingMenuFocusIndex),this.pendingMenuFocusIndex=0}})},this.onKeyDown=e=>{if(this.formats.length<=1||this.disabled||this.loading)return;const items=this.menuItemEls(),currentIndex=items.indexOf(e.target);switch(e.key){case"ArrowDown":e.preventDefault(),this.focusMenuItemOnOpen(currentIndex===-1?0:currentIndex+1);break;case"ArrowUp":e.preventDefault(),this.focusMenuItemOnOpen(currentIndex===-1?items.length-1:currentIndex-1);break;case"Home":this.open&&(e.preventDefault(),this.focusMenuItem(0));break;case"End":this.open&&(e.preventDefault(),this.focusMenuItem(items.length-1));break}}}static{this.defaultStrings={...super.defaultStrings,exportButtonLabel:LYRA_DEFAULT_exportButtonLabel,exportFormatMenuLabel:LYRA_DEFAULT_exportFormatMenuLabel,statusError:LYRA_DEFAULT_statusError}}static{this.styles=[LyraElement.styles,sizes,styles]}static{this.properties={rows:{attribute:!1,noAccessor:!0},columns:{attribute:!1,noAccessor:!0},formats:{attribute:!1,noAccessor:!0}}}get rows(){return this._rows}set rows(next){const previous=this._rows,source=Array.isArray(next)?next:[];this._rows=Object.freeze(source.map(row=>Object.freeze({...row}))),this.requestUpdate("rows",previous)}get columns(){return this._columns}set columns(next){const previous=this._columns,source=Array.isArray(next)?next:[];this._columns=Object.freeze(source.map(column=>Object.freeze({...column}))),this.requestUpdate("columns",previous)}get formats(){return this._formats}set formats(next){const previous=this._formats,source=formatArrayLength(next),seen=new Set,formats=[];for(let index=0;source&&index<source.length;index+=1){const descriptor=getOwnDataDescriptor(source.source,String(index));if(descriptor===MISSING_OWN_DATA_DESCRIPTOR||descriptor===UNSAFE_OWN_DATA_DESCRIPTOR)continue;const snapshot=projectExportFormat(descriptor.value);if(!snapshot)continue;const id=typeof snapshot=="string"?snapshot:snapshot.formatId;typeof id!="string"||id.trim()===""||seen.has(id)||(seen.add(id),formats.push(snapshot))}this._formats=Object.freeze(formats),this.requestUpdate("formats",previous)}get size(){return this._size}set size(next){const normalized=normalizeReflectedOptionalSize(this,next),old=this._size;old!==normalized&&(this._size=normalized,this.requestUpdate("size",old))}get appearance(){return this._appearance}set appearance(next){const normalized=EXPORT_BUTTON_APPEARANCE.normalizeReflected(this,"appearance",next),old=this._appearance;old!==normalized&&(this._appearance=normalized,this.requestUpdate("appearance",old))}connectedCallback(){const pendingDisconnectDocument=this.pendingDisconnectDocument;if(this.pendingDisconnectDocument=void 0,this.connectionGeneration+=1,this.connectedDocument=this.ownerDocument,super.connectedCallback(),this.sink??=acquireAnnouncementSink("polite",{document:this.ownerDocument,source:this}),pendingDisconnectDocument){if(pendingDisconnectDocument===this.ownerDocument){this.deactivateMenuOverlay(!1),this.restoreFocusOnMenuClose=!1,this.open=!1;return}this.hasUpdated&&this.open&&this.scheduleAfterUpdate(this.syncMenuOverlay,"export-button-menu-overlay");return}this.hasUpdated&&this.open&&this.scheduleAfterUpdate(this.syncMenuOverlay,"export-button-menu-overlay")}disconnectedCallback(){const generation=++this.connectionGeneration,disconnectDocument=this.connectedDocument??this.ownerDocument;this.pendingDisconnectDocument=disconnectDocument,super.disconnectedCallback(),this.cleanup?.(),this.cleanup=void 0,this.menuPositioned=!1,this.unbindDocumentPointer(),this.overlay?.suspend(),this.restoreFocusOnMenuClose=!1,this.sink?.release(),this.sink=void 0,queueDocumentMicrotask(disconnectDocument,()=>{this.connectionGeneration!==generation||this.isConnected||this.pendingDisconnectDocument!==disconnectDocument||(this.pendingDisconnectDocument=void 0,this.deactivateMenuOverlay(!1),this.restoreFocusOnMenuClose=!1,this.open=!1)})}adoptedCallback(){super.adoptedCallback(),this.cleanup?.(),this.cleanup=void 0,this.unbindDocumentPointer(),this.overlay?.suspend(),this.sink?.release(),this.sink=void 0}bindDocumentPointer(){if(!this.isConnected)return;const owner=this.ownerDocument;this.pointerDocument!==owner&&(this.unbindDocumentPointer(),owner.addEventListener("pointerdown",this.onDocPointer),this.pointerDocument=owner)}unbindDocumentPointer(){this.pointerDocument?.removeEventListener("pointerdown",this.onDocPointer),this.pointerDocument=void 0}openMenu(){this.open||(this.open=!0)}closeMenu(restoreFocus=!1){this.open&&(this.restoreFocusOnMenuClose||=restoreFocus,this.open=!1)}activateMenuOverlay(){if(this.overlay?.isActive()){this.overlay.resume();return}this.overlay=activateNonmodalOverlay({host:this,panel:()=>this.menuEl??null,onEscape:()=>this.closeMenu(!0),onBackdrop:()=>this.closeMenu(),onTab:()=>this.closeMenu(),restoreFocusTo:()=>this.triggerEl??null})}deactivateMenuOverlay(restoreFocus){const overlay=this.overlay;this.overlay=void 0,overlay?.deactivate({restoreFocus}),this.unbindDocumentPointer()}menuItemEls(){return Array.from(this.renderRoot.querySelectorAll('[part="menu-item"]'))}focusMenuItem(index){const items=this.menuItemEls();items.length!==0&&items[Math.max(0,Math.min(items.length-1,index))]?.focus()}focusMenuItemOnOpen(index){this.open&&this.menuPositioned?this.focusMenuItem(index):(this.pendingMenuFocusIndex=index,this.open||this.openMenu())}firstUpdated(changed){super.firstUpdated(changed),this.renderRoot.addEventListener("keydown",this.onKeyDown)}willUpdate(changed){if(super.willUpdate(changed),this._isFirstUpdate=!this.hasUpdated,this.setAttribute("aria-busy",String(this.loading)),(changed.has("disabled")||changed.has("loading"))&&!this.disabled&&!this.loading&&this.injectedHostTabIndex&&(this.getAttribute("tabindex")==="-1"&&this.removeAttribute("tabindex"),this.injectedHostTabIndex=!1),(changed.has("disabled")||changed.has("loading"))&&(this.disabled||this.loading)){const active=activeElementIn(this.shadowRoot);if(active===this.triggerEl||active?.getAttribute("part")==="menu-item"){this.hasAttribute("tabindex")||(this.tabIndex=-1,this.injectedHostTabIndex=!0);const ownerHTMLElement=this.ownerDocument.defaultView?.HTMLElement,nativeFocus=ownerHTMLElement?Reflect.get(ownerHTMLElement.prototype,"focus",this):void 0;typeof nativeFocus=="function"&&nativeFocus.call(this,{preventScroll:!0})}this.open&&(this.open=!1,this.forcedMenuClose="state")}if(changed.has("formats")){const active=activeElementIn(this.shadowRoot),index=this.menuItemEls().indexOf(active),previous=changed.get("formats")?.[index];this.formatsFocusSnapshot=index>=0&&previous?{index,id:this.formatId(previous)}:void 0}if(this.open&&this.formats.length<=1){const previousOpen=changed.get("open");this.forcedMenuClose=changed.has("formats")&&changed.get("formats")?.length?"formats":previousOpen===!1||previousOpen===void 0?"invalid-open":"state",this.open=!1}this.announceMenuTransition(changed)}announceMenuTransition(changed){if(this.openVetoed=!1,!changed.has("open")||this._isFirstUpdate||this.forcedMenuClose)return;const name=this.open?"lr-show":"lr-hide";this.emit(name,null,{cancelable:!0}).defaultPrevented&&(this.openVetoed=!0,this.open=!this.open)}updated(changed){super.updated(changed);const forcedMenuClose=this.forcedMenuClose;if(this.forcedMenuClose=void 0,(changed.has("open")||forcedMenuClose==="formats"||forcedMenuClose==="state")&&!this.openVetoed?this.syncMenuOverlay():this.openVetoed&&(this.restoreFocusOnMenuClose=!1),changed.has("formats")&&this.formatsFocusSnapshot){const{index,id}=this.formatsFocusSnapshot;this.formatsFocusSnapshot=void 0,this.scheduleAfterUpdate(()=>{if(this.formats.length<=1)this.closeMenu(),this.triggerEl?.focus();else if(this.open){const nextIndex=this.formats.findIndex(format=>this.formatId(format)===id);this.focusMenuItemOnOpen(nextIndex>=0?nextIndex:index)}})}}effectiveColumns(rows){if(this.columns.length>0)return this.columns;const keys=new Set;for(const row of rows)for(const key of Object.keys(row))keys.add(key);return Array.from(keys,key=>({key,label:key}))}rowsToExport(){if(this.getRows===void 0)return this.rows;const supplied=this.getRows();return Array.isArray(supplied)?supplied:[]}rowsForExport(rows){const keys=this.effectiveColumns(rows).map(c=>c.key);return rows.map(row=>{const picked=Object.create(null);for(const key of keys)picked[key]=row[key];return picked})}formatId(format){return typeof format=="string"?format:format.formatId}formatLabel(format){return typeof format=="string"?format.toUpperCase():format.label}doExport(formatOption){if(this.disabled||this.loading)return;this.closeMenu(),this.triggerEl?.focus(),this.exportFailed=!1;const format=this.formatId(formatOption);if(!this.emit("lr-export",Object.freeze({format}),{cancelable:!0}).defaultPrevented&&!(format!=="csv"&&format!=="json"))try{const rows=this.rowsToExport();format==="csv"?downloadBlob(buildCsv(rows,this.effectiveColumns(rows),{bom:this.bom}),`${this.filename}.csv`,"text/csv;charset=utf-8;",this.ownerDocument):downloadBlob(JSON.stringify(this.rowsForExport(rows),null,2),`${this.filename}.json`,"application/json",this.ownerDocument),this.emit("lr-export-complete",Object.freeze({format}))}catch(error){this.exportFailed=!0,this.sink?.announce(this.localize("statusError")),this.emit("lr-export-error",Object.freeze({format,error}))}}onTriggerClick(){this.disabled||this.loading||this.formats.length!==0&&(this.formats.length===1?this.doExport(this.formats[0]):this.open?this.closeMenu():this.openMenu())}focus(options){this.triggerEl?.focus(options)}blur(){this.triggerEl?.blur()}click(){this.triggerEl?.click()}get effectiveLabel(){return this.label==null?this.localize("exportButtonLabel"):this.label}render(){const label=this.effectiveLabel,labelNamesTrigger=label.trim().length>0,accessibleLabel=this.accessibleLabel??(labelNamesTrigger?label:this.localize("exportButtonLabel")),triggerAriaLabel=this.accessibleLabel!==null||!labelNamesTrigger?accessibleLabel:nothing;return html`
       <button
         part=${this.exportFailed?"trigger trigger-error":"trigger"}
         type="button"
@@ -29,4 +29,4 @@ var __decorate=function(decorators,target,key,desc){var c=arguments.length,r=c<3
                   ${typeof f!="string"&&f.description?html`<span part="format-description">${f.description}</span>`:nothing}
                 </button>`)}
           </div>`:nothing}
-    `}}__decorate([property({attribute:!1})],LyraExportButton.prototype,"getRows",void 0),__decorate([property()],LyraExportButton.prototype,"filename",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraExportButton.prototype,"bom",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraExportButton.prototype,"disabled",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraExportButton.prototype,"loading",void 0),__decorate([property()],LyraExportButton.prototype,"label",void 0),__decorate([property({attribute:"aria-label"})],LyraExportButton.prototype,"accessibleLabel",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraExportButton.prototype,"open",void 0),__decorate([query('[part~="trigger"]')],LyraExportButton.prototype,"triggerEl",void 0),__decorate([query('[part="menu"]')],LyraExportButton.prototype,"menuEl",void 0),__decorate([state()],LyraExportButton.prototype,"exportFailed",void 0);export{LyraExportButton};
+    `}}__decorate([property({attribute:!1})],LyraExportButton.prototype,"getRows",void 0),__decorate([property()],LyraExportButton.prototype,"filename",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraExportButton.prototype,"bom",void 0),__decorate([property({reflect:!0,converter:optionalSizeConverter})],LyraExportButton.prototype,"size",null),__decorate([property({reflect:!0,converter:EXPORT_BUTTON_APPEARANCE})],LyraExportButton.prototype,"appearance",null),__decorate([property({type:Boolean,reflect:!0})],LyraExportButton.prototype,"disabled",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraExportButton.prototype,"loading",void 0),__decorate([property()],LyraExportButton.prototype,"label",void 0),__decorate([property({attribute:"aria-label"})],LyraExportButton.prototype,"accessibleLabel",void 0),__decorate([property({type:Boolean,reflect:!0})],LyraExportButton.prototype,"open",void 0),__decorate([query('[part~="trigger"]')],LyraExportButton.prototype,"triggerEl",void 0),__decorate([query('[part="menu"]')],LyraExportButton.prototype,"menuEl",void 0),__decorate([state()],LyraExportButton.prototype,"exportFailed",void 0);export{LyraExportButton};

package/dist/components/utility/export-button/export-button.styles.js

@@ -1 +1 @@
-import{css}from"lit";import{overlaySurface}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: inline-block; position: relative; } [part~='trigger'] { display: inline-flex; align-items: center; justify-content: center; gap: var(--lr-space-xs); padding: var(--lr-space-xs) var(--lr-space-m); 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; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); cursor: pointer; } :where([part~='trigger']):hover:where(:not(:disabled)) { border-color: var(--lr-color-brand); } :where([part~='trigger']):active:where(:not(:disabled)) { border-color: var(--lr-color-brand); background: color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } [part~='trigger']:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part~='trigger']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~='trigger-error'] { border-color: var(--lr-color-danger); color: var(--lr-color-danger); } [part='menu'] { visibility: hidden; position: fixed; z-index: var(--lr-layer-dropdown); box-sizing: border-box; inline-size: max-content; min-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-8rem), var(--lr-positioner-available-inline-size, 100vw) ); max-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-20rem), var(--lr-positioner-available-inline-size, 100vw) ); max-block-size: var(--lr-positioner-available-block-size, 100vh); overflow: auto; padding: var(--lr-space-xs); ${overlaySurface} box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); opacity: 0; transform: translateY(var(--lr-size-neg-4px)); transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast); } :host([open]) [part='menu'] { visibility: visible; opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [part='menu'] { transition: none; } } [part='menu-item'] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--lr-size-1px); box-sizing: border-box; inline-size: 100%; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); text-align: center; padding: var(--lr-space-xs) var(--lr-space-s); border: none; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: var(--lr-radius); } :where([part='menu-item']):hover:where(:not(:disabled)) { background: var(--lr-color-brand-quiet); } :where([part='menu-item']):active:where(:not(:disabled)) { background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } [part='menu-item']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='menu-item']:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='format-description'] { color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } [part='format-label'], [part='format-description'] { max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};
+import{css}from"lit";import{overlaySurface}from"../../../internal/overlay-surface.styles.js";const styles=css` :host { display: inline-block; position: relative; --_lr-export-button-background: var(--lr-color-surface); --_lr-export-button-color: var(--lr-color-text); --_lr-export-button-border: var(--lr-color-border); --_lr-export-button-hover-background: var(--lr-color-surface); --_lr-export-button-hover-color: var(--lr-color-text); --_lr-export-button-hover-border: var(--lr-color-brand); --_lr-export-button-active-background: color-mix(in oklab, var(--lr-color-surface), var(--lr-color-mix-partner) var(--lr-color-mix-active)); --_lr-export-button-active-color: var(--lr-color-text); --_lr-export-button-active-border: var(--lr-color-brand); } :host([appearance='outlined']) { --_lr-export-button-background: transparent; --_lr-export-button-color: var(--lr-color-brand); --_lr-export-button-border: var(--lr-color-border-strong); --_lr-export-button-hover-background: var(--lr-color-brand-quiet); --_lr-export-button-hover-color: var(--lr-color-brand); --_lr-export-button-hover-border: var(--lr-color-brand); --_lr-export-button-active-background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)); --_lr-export-button-active-color: var(--lr-color-brand); --_lr-export-button-active-border: var(--lr-color-brand); } :host([appearance='quiet']) { --_lr-export-button-background: transparent; --_lr-export-button-color: var(--lr-color-text-quiet); --_lr-export-button-border: var(--lr-color-border); --_lr-export-button-hover-background: var(--lr-color-brand-quiet); --_lr-export-button-hover-color: var(--lr-color-text-quiet); --_lr-export-button-hover-border: var(--lr-color-brand); --_lr-export-button-active-background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)); --_lr-export-button-active-color: var(--lr-color-text-quiet); --_lr-export-button-active-border: var(--lr-color-brand); } [part~='trigger'] { display: inline-flex; align-items: center; justify-content: center; gap: var(--lr-space-xs); padding: var(--lr-space-xs) var(--lr-space-m); border: var(--lr-border-width-thin) solid var(--_lr-export-button-border); border-radius: var(--lr-radius); background: var(--_lr-export-button-background); color: var(--_lr-export-button-color); font: inherit; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); cursor: pointer; } :where([part~='trigger']):hover:where(:not(:disabled)) { background: var(--_lr-export-button-hover-background); color: var(--_lr-export-button-hover-color); border-color: var(--_lr-export-button-hover-border); } :where([part~='trigger']):active:where(:not(:disabled)) { background: var(--_lr-export-button-active-background); color: var(--_lr-export-button-active-color); border-color: var(--_lr-export-button-active-border); } :host([size='2xs']) [part~='trigger'], :host([size='xs']) [part~='trigger'], :host([size='s']) [part~='trigger'], :host([size='small']) [part~='trigger'], :host([size='m']) [part~='trigger'], :host([size='medium']) [part~='trigger'], :host([size='l']) [part~='trigger'], :host([size='large']) [part~='trigger'], :host([size='xl']) [part~='trigger'], :host([size='2xs']) [part='menu-item'], :host([size='xs']) [part='menu-item'], :host([size='s']) [part='menu-item'], :host([size='small']) [part='menu-item'], :host([size='m']) [part='menu-item'], :host([size='medium']) [part='menu-item'], :host([size='l']) [part='menu-item'], :host([size='large']) [part='menu-item'], :host([size='xl']) [part='menu-item'] { font-size: var(--lr-form-control-font-size); padding-block: var(--lr-form-control-padding-block); padding-inline: var(--lr-form-control-padding-inline); min-block-size: max(var(--lr-icon-button-size), var(--lr-form-control-height)); } [part~='trigger']:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part~='trigger']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part~='trigger-error'] { border-color: var(--lr-color-danger); color: var(--lr-color-danger); } [part='menu'] { visibility: hidden; position: fixed; z-index: var(--lr-layer-dropdown); box-sizing: border-box; inline-size: max-content; min-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-8rem), var(--lr-positioner-available-inline-size, 100vw) ); max-inline-size: min( var(--lr-popover-viewport-clamp), var(--lr-size-20rem), var(--lr-positioner-available-inline-size, 100vw) ); max-block-size: var(--lr-positioner-available-block-size, 100vh); overflow: auto; padding: var(--lr-space-xs); ${overlaySurface} box-shadow: var(--lr-overlay-shadow-anchored, var(--lr-shadow-m)); opacity: 0; transform: translateY(var(--lr-size-neg-4px)); transition: opacity var(--lr-transition-fast), transform var(--lr-transition-fast); } :host([open]) [part='menu'] { visibility: visible; opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [part='menu'] { transition: none; } } [part='menu-item'] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--lr-size-1px); box-sizing: border-box; inline-size: 100%; min-inline-size: var(--lr-icon-button-size); min-block-size: var(--lr-icon-button-size); text-align: center; padding: var(--lr-space-xs) var(--lr-space-s); border: none; background: none; color: inherit; font: inherit; cursor: pointer; border-radius: var(--lr-radius); } :where([part='menu-item']):hover:where(:not(:disabled)) { background: var(--lr-color-brand-quiet); } :where([part='menu-item']):active:where(:not(:disabled)) { background: color-mix(in oklab, var(--lr-color-brand-quiet), var(--lr-color-mix-partner) var(--lr-color-mix-active)); } [part='menu-item']:focus-visible { outline: var(--lr-focus-ring-width) solid var(--lr-focus-ring-color); outline-offset: var(--lr-focus-ring-offset); } [part='menu-item']:disabled { opacity: var(--lr-opacity-disabled); cursor: not-allowed; } [part='format-description'] { color: var(--lr-color-text-quiet); font-size: var(--lr-font-size-sm); } [part='format-label'], [part='format-description'] { max-inline-size: 100%; overflow-wrap: anywhere; } `;export{styles};