@esri/calcite-components/dist/calcite/6WA6WO25.js

Web Components for Esri's Calcite Design System.

/*! All material copyright ESRI, All Rights Reserved, unless otherwise specified.
See https://github.com/Esri/calcite-design-system/blob/dev/LICENSE.md for details.
v3.2.1 */
import{a as v}from"./SLLYAKW2.js";import{a as I}from"./F6VZXZQD.js";import{d as c}from"./JUI753HR.js";import{a as M}from"./LAHMKNMM.js";import{a as A}from"./NRY267XB.js";import{a as B}from"./XE72EHW2.js";import{a as C}from"./YXZ62PQO.js";import{a as T}from"./M7EAHGE3.js";import{d as P}from"./CKRTMNFR.js";import{a as S,b as y}from"./5RDOSP2E.js";import{D as b,n as E}from"./3ADX47DD.js";import{d as O}from"./HPN2C7M6.js";import"./JOSABGK6.js";import"./NNVH7JUI.js";import{E as D,F as u,N as r,R as $,c as k,d as x,q as f}from"./BJZTU5BQ.js";var m={dialog:"dialog",panel:"panel",scrim:"scrim",container:"container",containerOpen:"container--open",containerEmbedded:"container--embedded",assistiveText:"assistive-text",openingActive:"dialog--opening-active"},o={actionBar:"action-bar",alerts:"alerts",content:"content",customContent:"custom-content",contentTop:"content-top",contentBottom:"content-bottom",headerActionsStart:"header-actions-start",headerActionsEnd:"header-actions-end",headerMenuActions:"header-menu-actions",headerContent:"header-content",fab:"fab",footer:"footer",footerStart:"footer-start",footerEnd:"footer-end"},L={x:null,y:null},R={top:null,right:null,bottom:null,left:null},F=k`:host{--calcite-dialog-scrim-background-color: rgba(0, 0, 0, .85);pointer-events:none;inset:0;z-index:var(--calcite-z-index-overlay);display:flex;--calcite-internal-dialog-animation-offset: 20px}:host([modal]){position:absolute}.container{pointer-events:auto;position:fixed;inset:0;z-index:var(--calcite-z-index-overlay);display:flex;align-items:center;justify-content:center;overflow:hidden;color:var(--calcite-color-text-2);opacity:0;visibility:hidden;transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88)}:host([placement=top]) .container{align-items:flex-start;justify-content:center}:host([placement=top-start]) .container{align-items:flex-start;justify-content:flex-start}:host([placement=top-end]) .container{align-items:flex-start;justify-content:flex-end}:host([placement=bottom]) .container{align-items:flex-end;justify-content:center}:host([placement=bottom-start]) .container{align-items:flex-end;justify-content:flex-start}:host([placement=bottom-end]) .container{align-items:flex-end;justify-content:flex-end}:host(:not([modal])) .container{pointer-events:none}:host([scale=s]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-sm));--calcite-internal-dialog-min-size-x: 198px;--calcite-internal-dialog-min-size-y: 140px}:host([scale=m]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md));--calcite-internal-dialog-min-size-x: 288px;--calcite-internal-dialog-min-size-y: 180px}:host([scale=l]){--calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md-plus));--calcite-internal-dialog-min-size-x: 388px;--calcite-internal-dialog-min-size-y: 220px}.scrim{--calcite-scrim-background: var(--calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim));--calcite-scrim-background-color: var( --calcite-dialog-scrim-background-color, var(--calcite-color-transparent-scrim) );position:fixed;inset:0;display:flex;overflow-y:hidden}calcite-panel{--calcite-panel-content-space: var(--calcite-dialog-content-space, var(--calcite-internal-dialog-content-padding));--calcite-panel-footer-space: var(--calcite-dialog-footer-space);--calcite-panel-border-color: var(--calcite-dialog-border-color);--calcite-panel-background-color: var(--calcite-dialog-background-color, var(--calcite-color-foreground-1))}::slotted(*){--calcite-panel-background-color: initial}.dialog{pointer-events:none;position:relative;z-index:var(--calcite-z-index-modal);margin:1.5rem;box-sizing:border-box;display:flex;inline-size:100%;flex-direction:column;border-radius:.25rem;opacity:0;--tw-shadow: 0 2px 12px -4px rgba(0, 0, 0, .2), 0 2px 4px -2px rgba(0, 0, 0, .16);--tw-shadow-colored: 0 2px 12px -4px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);-webkit-overflow-scrolling:touch;visibility:hidden;transition:inset-block var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88);min-inline-size:var(--calcite-dialog-min-size-x, var(--calcite-internal-dialog-min-size-x));max-inline-size:var(--calcite-dialog-max-size-x, 100%);min-block-size:var(--calcite-dialog-min-size-y, var(--calcite-internal-dialog-min-size-y));max-block-size:var(--calcite-dialog-max-size-y, 100%);--calcite-internal-dialog-hidden-position: calc( var(--calcite-dialog-offset-y, 0px) + var(--calcite-internal-dialog-animation-offset) );--calcite-internal-dialog-shown-position: var(--calcite-dialog-offset-y, 0);inset-inline-start:var(--calcite-dialog-offset-x, 0);inset-block-start:var(--calcite-internal-dialog-hidden-position)}.dialog--opening-active{inset-block-start:var(--calcite-internal-dialog-shown-position)}:host([menu-open]) .dialog{transition:visibility 0ms linear var(--calcite-internal-animation-timing-slow),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88)}.panel{border-radius:.25rem}.container--open{opacity:1;visibility:visible;transition-delay:0ms}.container--open .dialog{pointer-events:auto;visibility:visible;opacity:1;transition:inset-block var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88),opacity var(--calcite-internal-animation-timing-slow) cubic-bezier(.215,.44,.42,.88);transition-delay:0ms}.width-s{inline-size:auto;inline-size:var(--calcite-dialog-size-x, 32rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 35rem){.width-s{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}.width-s.dialog--opening-active{inset-block-start:0}}.width-m{inline-size:var(--calcite-dialog-size-x, 48rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 51rem){.width-m{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}.width-m.dialog--opening-active{inset-block-start:0}}.width-l{inline-size:var(--calcite-dialog-size-x, 94rem);block-size:var(--calcite-dialog-size-y, auto)}@media screen and (max-width: 97rem){.width-l{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;inset-inline-start:0;inset-block-start:var(--calcite-internal-dialog-animation-offset)}.width-l.dialog--opening-active{inset-block-start:0}}:host([placement=cover]) .dialog{margin:0;block-size:100%;max-block-size:100%;inline-size:100%;max-inline-size:100%;border-radius:0}:host([placement=cover]) .panel{border-radius:0}:host([kind]) .panel{border-start-start-radius:0px;border-start-end-radius:0px}:host([kind=brand]) .dialog{border-color:var(--calcite-color-brand)}:host([kind=danger]) .dialog{border-color:var(--calcite-color-status-danger)}:host([kind=info]) .dialog{border-color:var(--calcite-color-status-info)}:host([kind=success]) .dialog{border-color:var(--calcite-color-status-success)}:host([kind=warning]) .dialog{border-color:var(--calcite-color-status-warning)}:host([kind=brand][open]) .dialog,:host([kind=danger][open]) .dialog,:host([kind=info][open]) .dialog,:host([kind=success][open]) .dialog,:host([kind=warning][open]) .dialog{border-width:0px;border-block-start-width:4px;border-style:solid}.container--embedded{position:absolute;pointer-events:auto}.container--embedded calcite-scrim{position:absolute}.assistive-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}:host([hidden]){display:none}[hidden]{display:none}`,w=class extends D{constructor(){super(...arguments),this.dragPosition={...L},this.focusTrap=M({triggerProp:"open",focusTrapOptions:{clickOutsideDeactivates:()=>!this.modal||this.embedded,escapeDeactivates:e=>(!e.defaultPrevented&&!this.escapeDisabled&&(this.open=!1,e.preventDefault()),!1)}})(this),this.usePreventDocumentScroll=I()(this),this.ignoreOpenChange=!1,this.mutationObserver=T("mutation",()=>this.handleMutationObserver()),this._open=!1,this.openProp="opened",this.transitionProp="opacity",this.panelEl=S(),this.resizePosition={...R},this.messages=P(),this.assistiveText=null,this.hasContentBottom=!1,this.hasContentTop=!1,this.hasFooter=!0,this.opened=!1,this.closeDisabled=!1,this.dragEnabled=!1,this.embedded=!1,this.escapeDisabled=!1,this.loading=!1,this.menuOpen=!1,this.modal=!1,this.focusTrapDisabled=!1,this.outsideCloseDisabled=!1,this.overlayPositioning="absolute",this.placement="center",this.resizable=!1,this.scale="m",this.widthScale="m",this.calciteDialogBeforeClose=f({cancelable:!1}),this.calciteDialogBeforeOpen=f({cancelable:!1}),this.calciteDialogClose=f({cancelable:!1}),this.calciteDialogOpen=f({cancelable:!1}),this.calciteDialogScroll=f({cancelable:!1})}static{this.properties={assistiveText:[16,{},{state:!0}],hasContentBottom:[16,{},{state:!0}],hasContentTop:[16,{},{state:!0}],hasFooter:[16,{},{state:!0}],opened:[16,{},{state:!0}],preventDocumentScroll:[16,{},{state:!0}],beforeClose:[0,{},{attribute:!1}],closeDisabled:[7,{},{reflect:!0,type:Boolean}],description:1,dragEnabled:[7,{},{reflect:!0,type:Boolean}],embedded:[5,{},{type:Boolean}],escapeDisabled:[7,{},{reflect:!0,type:Boolean}],focusTrapOptions:[0,{},{attribute:!1}],heading:1,headingLevel:[11,{},{type:Number,reflect:!0}],kind:[3,{},{reflect:!0}],loading:[7,{},{reflect:!0,type:Boolean}],menuOpen:[7,{},{reflect:!0,type:Boolean}],messageOverrides:[0,{},{attribute:!1}],modal:[7,{},{reflect:!0,type:Boolean}],focusTrapDisabled:[7,{},{reflect:!0,type:Boolean}],open:[7,{},{reflect:!0,type:Boolean}],outsideCloseDisabled:[7,{},{reflect:!0,type:Boolean}],overlayPositioning:[3,{},{reflect:!0}],placement:[3,{},{reflect:!0}],resizable:[7,{},{reflect:!0,type:Boolean}],scale:[3,{},{reflect:!0}],widthScale:[3,{},{reflect:!0}],width:[3,{},{reflect:!0}]}}static{this.styles=F}get preventDocumentScroll(){return!this.embedded&&this.modal}get open(){return this._open}set open(e){let t=this._open;e!==t&&(this._open=e,this.toggleDialog(e))}async scrollContentTo(e){await this.panelEl.value?.scrollContentTo(e)}async setFocus(){return await O(this),this.panelEl.value?.setFocus()??E(this.el)}async updateFocusTrapElements(e){this.focusTrap.setExtraContainers(e),this.focusTrap.updateContainerElements()}connectedCallback(){super.connectedCallback(),this.mutationObserver?.observe(this.el,{childList:!0,subtree:!0}),this.setupInteractions()}willUpdate(e){(e.has("open")&&(this.hasUpdated||this.open!==!1)||e.has("placement")&&(this.hasUpdated||this.placement!=="center")||e.has("resizable")&&(this.hasUpdated||this.resizable!==!1)||e.has("dragEnabled")&&(this.hasUpdated||this.dragEnabled!==!1))&&this.setupInteractions(),(e.has("messages")||e.has("dragEnabled")&&(this.hasUpdated||this.dragEnabled!==!1)||e.has("resizable")&&(this.hasUpdated||this.resizable!==!1))&&this.updateAssistiveText(),e.has("opened")&&(this.hasUpdated||this.opened!==!1)&&this.handleOpenedChange(this.opened)}disconnectedCallback(){super.disconnectedCallback(),this.mutationObserver?.disconnect(),this.embedded=!1,this.cleanupInteractions()}focusTrapDisabledOverride(){return!this.modal&&this.focusTrapDisabled}updateAssistiveText(){let{messages:e}=this;this.assistiveText=e&&(this.dragEnabled||this.resizable)?`${this.dragEnabled?e.dragEnabled:""} ${this.resizable?e.resizeEnabled:""}`:null}onBeforeOpen(){this.calciteDialogBeforeOpen.emit()}onOpen(){this.focusTrapDisabled&&this.setFocus(),this.focusTrap.activate(),this.calciteDialogOpen.emit()}onBeforeClose(){this.calciteDialogBeforeClose.emit()}onClose(){this.focusTrap.deactivate(),this.calciteDialogClose.emit()}toggleDialog(e){this.ignoreOpenChange||(e?this.openDialog():this.closeDialog())}handleOpenedChange(e){let{transitionEl:t}=this;t&&(t.classList.toggle(m.openingActive,e),B(this))}async triggerInteractModifiers(){let{interaction:e}=this;e&&(await e.reflow({name:"drag"}),await e.reflow({name:"resize"}))}getTransitionElDOMRect(){return this.transitionEl.getBoundingClientRect()}handleKeyDown(e){let{key:t,shiftKey:i,defaultPrevented:a}=e,{dragEnabled:n,resizable:l,resizePosition:d,dragPosition:s,transitionEl:h}=this;if(!(a||!["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].includes(t)))switch(t){case"ArrowUp":i&&l&&h?(this.updateSize({size:this.getTransitionElDOMRect().height-r,type:"blockSize"}),d.bottom-=r,this.updateTransform(),this.triggerInteractModifiers(),e.preventDefault()):n&&(s.y-=r,this.updateTransform(),this.triggerInteractModifiers(),e.preventDefault());break;case"ArrowDown":i&&l&&h?(this.updateSize({size:this.getTransitionElDOMRect().height+r,type:"blockSize"}),d.bottom+=r,this.updateTransform(),this.triggerInteractModifiers(),e.preventDefault()):n&&(s.y+=r,this.updateTransform(),this.triggerInteractModifiers(),e.preventDefault());break;case"ArrowLeft":i&&l&&h?(this.updateSize({size:this.getTransitionElDOMRect().width-r,type:"inlineSize"}),d.right-=r,this.updateTransform(),this.triggerInteractModifiers(),e.preventDefault()):n&&(s.x-=r,this.updateTransform(),this.triggerInteractModifiers(),e.preventDefault());break;case"ArrowRight":i&&l&&h?(this.updateSize({size:this.getTransitionElDOMRect().width+r,type:"inlineSize"}),d.right+=r,this.updateTransform(),this.triggerInteractModifiers(),e.preventDefault()):n&&(s.x+=r,this.updateTransform(),this.triggerInteractModifiers(),e.preventDefault());break}}updateTransform(){let{dragPosition:{x:e,y:t},resizePosition:i,transitionEl:a,dragEnabled:n,resizable:l}=this;if(!a)return;if(!n&&!l){a.style.transform=null;return}let{top:d,right:s,bottom:h,left:z}=this.getAdjustedResizePosition(i),g=Math.round(e+z+s),p=Math.round(t+d+h);a.style.transform=g||p?`translate(${g}px, ${p}px)`:null}updateSize({type:e,size:t}){let{transitionEl:i}=this;i&&(i.style[e]=t!==null?`${Math.round(t)}px`:null)}cleanupInteractions(){this.interaction?.unset(),this.updateSize({size:null,type:"inlineSize"}),this.updateSize({size:null,type:"blockSize"}),this.dragPosition={...L},this.resizePosition={...R},this.updateTransform()}async setupInteractions(){this.cleanupInteractions();let{el:e,transitionEl:t,resizable:i,dragEnabled:a,resizePosition:n,dragPosition:l}=this;if(!(!t||!this.open)){if((i||a)&&(this.interaction=v(t,{context:e.ownerDocument})),i){await this.el.componentOnReady();let{minInlineSize:d,minBlockSize:s,maxInlineSize:h,maxBlockSize:z}=window.getComputedStyle(t);this.interaction.resizable({edges:{top:!0,right:!0,bottom:!0,left:!0},modifiers:[v.modifiers.restrictSize({min:{width:b(d),height:b(s)},max:{width:b(h)||window.innerWidth,height:b(z)||window.innerHeight}}),v.modifiers.restrict({restriction:"parent"})],listeners:{move:({rect:g,deltaRect:p})=>{p&&(n.top+=p.top,n.right+=p.right,n.bottom+=p.bottom,n.left+=p.left),this.updateSize({size:g.width,type:"inlineSize"}),this.updateSize({size:g.height,type:"blockSize"}),this.updateTransform()}}})}a&&this.interaction.draggable({modifiers:[v.modifiers.restrictRect({restriction:"parent"})],listeners:{move:({dx:d,dy:s})=>{l.x+=d,l.y+=s,this.updateTransform()}}})}}getAdjustedResizePosition({top:e,right:t,bottom:i,left:a}){let n=e/2,l=t/2,d=i/2,s=a/2;switch(this.placement){case"top":return{top:e,right:l,bottom:0,left:s};case"top-start":return{top:e,right:0,bottom:0,left:a};case"top-end":return{top:e,right:t,bottom:0,left:0};case"bottom":return{top:0,right:l,bottom:i,left:s};case"bottom-start":return{top:0,right:0,bottom:i,left:a};case"bottom-end":return{top:0,right:t,bottom:i,left:0};case"cover":case"center":default:return{top:n,right:l,bottom:d,left:s}}}setTransitionEl(e){e&&(this.transitionEl=e,this.setupInteractions())}handleInternalPanelScroll(e){e.target===this.panelEl.value&&(e.stopPropagation(),this.calciteDialogScroll.emit())}handleInternalPanelCloseClick(e){e.target===this.panelEl.value&&(e.stopPropagation(),this.open=!1)}handlePanelKeyDown(e){this.escapeDisabled&&e.key==="Escape"&&e.preventDefault()}async openDialog(){await this.componentOnReady(),this.opened=!0}handleOutsideClose(){this.outsideCloseDisabled||(this.open=!1)}async closeDialog(){if(this.beforeClose)try{await this.beforeClose()}catch{requestAnimationFrame(()=>{this.ignoreOpenChange=!0,this.open=!0,this.ignoreOpenChange=!1});return}this.opened=!1}handleMutationObserver(){this.focusTrap.updateContainerElements()}render(){let{assistiveText:e,description:t,heading:i,opened:a}=this;return x`<div class=${u({[m.container]:!0,[m.containerOpen]:a,[m.containerEmbedded]:this.embedded})}>${this.modal?x`<calcite-scrim class=${u(m.scrim)} @click=${this.handleOutsideClose}></calcite-scrim>`:null}<div .ariaDescription=${t} .ariaLabel=${i} .ariaModal=${this.modal} class=${u({[m.dialog]:!0,[A("width",this.width,this.widthScale)]:!!(this.width||this.widthScale)})} @keydown=${this.handleKeyDown} role=dialog ${y(this.setTransitionEl)}>${e?C("assistive-text",x`<div aria-live=polite class=${u(m.assistiveText)}>${e}</div>`):null}<slot name=${o.customContent}><slot name=${o.content}><calcite-panel .beforeClose=${this.beforeClose} class=${u(m.panel)} .closable=${!this.closeDisabled} .closed=${!a} .description=${t} .heading=${i} .headingLevel=${this.headingLevel} .loading=${this.loading} .menuOpen=${this.menuOpen} .messageOverrides=${this.messageOverrides} @keydown=${this.handlePanelKeyDown} @calcitePanelClose=${this.handleInternalPanelCloseClick} @calcitePanelScroll=${this.handleInternalPanelScroll} .overlayPositioning=${this.overlayPositioning} .scale=${this.scale} ${y(this.panelEl)}><slot name=${o.actionBar} slot=${c.actionBar}></slot><slot name=${o.alerts} slot=${c.alerts}></slot><slot name=${o.headerActionsStart} slot=${c.headerActionsStart}></slot><slot name=${o.headerActionsEnd} slot=${c.headerActionsEnd}></slot><slot name=${o.headerContent} slot=${c.headerContent}></slot><slot name=${o.headerMenuActions} slot=${c.headerMenuActions}></slot><slot name=${o.fab} slot=${c.fab}></slot><slot name=${o.contentTop} slot=${c.contentTop}></slot><slot name=${o.contentBottom} slot=${c.contentBottom}></slot><slot name=${o.footerStart} slot=${c.footerStart}></slot><slot name=${o.footer} slot=${c.footer}></slot><slot name=${o.footerEnd} slot=${c.footerEnd}></slot><slot></slot></calcite-panel></slot></slot></div></div>`}};$("calcite-dialog",w);export{w as Dialog};