@spectrum-web-components/overlay/src/Overlay.js

An `<sp-overlay>` element is used to decorate content that you would like to present to your visitors as "overlaid" on the rest of the application. This includes dialogs (modal and not), pickers, tooltips, context menus, et al.

"use strict";var b=Object.defineProperty;var E=Object.getOwnPropertyDescriptor;var r=(m,a,e,t)=>{for(var o=t>1?void 0:t?E(a,e):a,s=m.length-1,l;s>=0;s--)(l=m[s])&&(o=(t?l(a,e,o):l(o))||o);return t&&o&&b(a,e,o),o};import{html as h}from"@spectrum-web-components/base";import{property as n,query as g,queryAssignedElements as C,state as P}from"@spectrum-web-components/base/src/decorators.js";import{ElementResolutionController as w,elementResolverUpdatedSymbol as T}from"@spectrum-web-components/reactive-controllers/src/ElementResolution.js";import{ifDefined as u,styleMap as f}from"@spectrum-web-components/base/src/directives.js";import{randomID as S}from"@spectrum-web-components/shared/src/random-id.js";import{AbstractOverlay as R,nextFrame as v}from"./AbstractOverlay.js";import{OverlayDialog as O}from"./OverlayDialog.js";import{OverlayPopover as L}from"./OverlayPopover.js";import{OverlayNoPopover as M}from"./OverlayNoPopover.js";import{overlayStack as y}from"./OverlayStack.js";import{VirtualTrigger as H}from"./VirtualTrigger.js";import{PlacementController as $}from"./PlacementController.js";export{LONGPRESS_INSTRUCTIONS}from"./LongpressController.js";import{strategies as D}from"./strategies.js";import{removeSlottableRequest as q,SlottableRequestEvent as N}from"./slottable-request-event.js";import B from"./overlay.css.js";const F="showPopover"in document.createElement("div");let p=O(R);F?p=L(p):p=M(p);const i=class i extends p{constructor(){super(...arguments);this._delayed=!1;this._disabled=!1;this.offset=0;this._open=!1;this.lastRequestSlottableState=!1;this.receivesFocus="auto";this._state="closed";this.triggerElement=null;this.type="auto";this.wasOpen=!1;this.closeOnFocusOut=e=>{if(!e.relatedTarget)return;const t=new Event("overlay-relation-query",{bubbles:!0,composed:!0});e.relatedTarget.addEventListener(t.type,o=>{o.composedPath().some(d=>d===this)||(this.open=!1)}),e.relatedTarget.dispatchEvent(t)}}get delayed(){var e;return((e=this.elements.at(-1))==null?void 0:e.hasAttribute("delayed"))||this._delayed}set delayed(e){this._delayed=e}get disabled(){return this._disabled}set disabled(e){var t;this._disabled=e,e?((t=this.strategy)==null||t.abort(),this.wasOpen=this.open,this.open=!1):(this.bindEvents(),this.open=this.open||this.wasOpen,this.wasOpen=!1)}get hasNonVirtualTrigger(){return!!this.triggerElement&&!(this.triggerElement instanceof H)}get placementController(){return this._placementController||(this._placementController=new $(this)),this._placementController}get open(){return this._open}set open(e){var t;e&&this.disabled||e!==this.open&&((t=this.strategy)!=null&&t.activelyOpening&&!e||(this._open=e,this.open&&(i.openCount+=1),this.requestUpdate("open",!this.open),this.open&&this.requestSlottable()))}get state(){return this._state}set state(e){var o;if(e===this.state)return;const t=this.state;this._state=e,(this.state==="opened"||this.state==="closed")&&((o=this.strategy)==null||o.shouldCompleteOpen()),this.requestUpdate("state",t)}get elementResolver(){return this._elementResolver||(this._elementResolver=new w(this)),this._elementResolver}get usesDialog(){return this.type==="modal"||this.type==="page"}get popoverValue(){if("popover"in this)switch(this.type){case"modal":case"page":return;case"hint":return"manual";default:return this.type}}get requiresPositioning(){return!(this.type==="page"||!this.open||!this.triggerElement||!this.placement&&this.type!=="hint")}managePosition(){if(!this.requiresPositioning||!this.open)return;const e=this.offset||0,t=this.triggerElement,o=this.placement||"right",s=this.tipPadding;this.placementController.placeOverlay(this.dialogEl,{offset:e,placement:o,tipPadding:s,trigger:t,type:this.type})}async managePopoverOpen(){super.managePopoverOpen();const e=this.open;if(this.open!==e||(await this.manageDelay(e),this.open!==e)||(await this.ensureOnDOM(e),this.open!==e))return;const t=await this.makeTransition(e);this.open===e&&await this.applyFocus(e,t)}async applyFocus(e,t){if(!(this.receivesFocus==="false"||this.type==="hint")){if(await v(),await v(),e===this.open&&!this.open){this.hasNonVirtualTrigger&&this.contains(this.getRootNode().activeElement)&&this.triggerElement.focus();return}t==null||t.focus()}}returnFocus(){var t;if(this.open||this.type==="hint")return;const e=()=>{var l,d;const o=[];let s=document.activeElement;for(;(l=s==null?void 0:s.shadowRoot)!=null&&l.activeElement;)s=s.shadowRoot.activeElement;for(;s;){const c=s.assignedSlot||s.parentElement||((d=s.getRootNode())==null?void 0:d.host);c&&o.push(c),s=c}return o};this.receivesFocus!=="false"&&((t=this.triggerElement)!=null&&t.focus)&&(this.contains(this.getRootNode().activeElement)||e().includes(this)||document.activeElement===document.body)&&this.triggerElement.focus()}async manageOpen(e){if(!(!this.isConnected&&this.open)&&(this.hasUpdated||await this.updateComplete,this.open?(y.add(this),this.willPreventClose&&(document.addEventListener("pointerup",()=>{this.dialogEl.classList.toggle("not-immediately-closable",!1),this.willPreventClose=!1},{once:!0}),this.dialogEl.classList.toggle("not-immediately-closable",!0))):(e&&this.dispose(),y.remove(this)),this.open&&this.state!=="opened"?this.state="opening":!this.open&&this.state!=="closed"&&(this.state="closing"),this.usesDialog?this.manageDialogOpen():this.managePopoverOpen(),this.type==="auto")){const t=this.getRootNode();this.open?t.addEventListener("focusout",this.closeOnFocusOut,{capture:!0}):t.removeEventListener("focusout",this.closeOnFocusOut,{capture:!0})}}bindEvents(){var e;(e=this.strategy)==null||e.abort(),this.strategy=void 0,this.hasNonVirtualTrigger&&this.triggerInteraction&&(this.strategy=new D[this.triggerInteraction](this.triggerElement,{overlay:this}))}handleBeforetoggle(e){e.newState!=="open"&&this.handleBrowserClose(e)}handleBrowserClose(e){var t;if(e.stopPropagation(),!((t=this.strategy)!=null&&t.activelyOpening)){this.open=!1;return}this.manuallyKeepOpen()}manuallyKeepOpen(){this.open=!0,this.placementController.allowPlacementUpdate=!0,this.manageOpen(!1)}handleSlotchange(){var e,t;this.elements.length?this.hasNonVirtualTrigger&&((t=this.strategy)==null||t.prepareDescription(this.triggerElement)):(e=this.strategy)==null||e.releaseDescription()}shouldPreventClose(){const e=this.willPreventClose;return this.willPreventClose=!1,e}requestSlottable(){this.lastRequestSlottableState!==this.open&&(this.open||document.body.offsetHeight,this.dispatchEvent(new N("overlay-content",this.open?{}:q)),this.lastRequestSlottableState=this.open)}willUpdate(e){var o;if(this.hasAttribute("id")||this.setAttribute("id",`${this.tagName.toLowerCase()}-${S()}`),e.has("open")&&(this.hasUpdated||this.open)&&this.manageOpen(e.get("open")),e.has("trigger")){const[s,l]=((o=this.trigger)==null?void 0:o.split("@"))||[];this.elementResolver.selector=s?`#${s}`:"",this.triggerInteraction=l}let t=!1;e.has(T)&&(t=this.triggerElement,this.triggerElement=this.elementResolver.element),e.has("triggerElement")&&(t=e.get("triggerElement")),t!==!1&&this.bindEvents()}updated(e){super.updated(e),e.has("placement")&&(this.placement?this.dialogEl.setAttribute("actual-placement",this.placement):this.dialogEl.removeAttribute("actual-placement"),this.open&&typeof e.get("placement")!="undefined"&&this.placementController.resetOverlayPosition()),e.has("state")&&this.state==="closed"&&typeof e.get("state")!="undefined"&&this.placementController.clearOverlayPosition()}renderContent(){return h`
            <slot @slotchange=${this.handleSlotchange}></slot>
        `}get dialogStyleMap(){return{"--swc-overlay-open-count":i.openCount.toString()}}renderDialog(){return h`
            <dialog
                class="dialog"
                part="dialog"
                placement=${u(this.requiresPositioning?this.placement||"right":void 0)}
                style=${f(this.dialogStyleMap)}
                @close=${this.handleBrowserClose}
                @cancel=${this.handleBrowserClose}
                @beforetoggle=${this.handleBeforetoggle}
                ?is-visible=${this.state!=="closed"}
            >
                ${this.renderContent()}
            </dialog>
        `}renderPopover(){return h`
            <div
                class="dialog"
                part="dialog"
                placement=${u(this.requiresPositioning?this.placement||"right":void 0)}
                popover=${u(this.popoverValue)}
                style=${f(this.dialogStyleMap)}
                @beforetoggle=${this.handleBeforetoggle}
                @close=${this.handleBrowserClose}
                ?is-visible=${this.state!=="closed"}
            >
                ${this.renderContent()}
            </div>
        `}render(){const e=this.type==="modal"||this.type==="page";return h`
            ${e?this.renderDialog():this.renderPopover()}
            <slot name="longpress-describedby-descriptor"></slot>
        `}connectedCallback(){super.connectedCallback(),this.addEventListener("close",()=>{this.open=!1}),this.hasUpdated&&this.bindEvents()}disconnectedCallback(){var e;(e=this.strategy)==null||e.releaseDescription(),this.open=!1,super.disconnectedCallback()}};i.styles=[B],i.openCount=1,r([n({type:Boolean})],i.prototype,"delayed",1),r([g(".dialog")],i.prototype,"dialogEl",2),r([n({type:Boolean})],i.prototype,"disabled",1),r([C({flatten:!0,selector:':not([slot="longpress-describedby-descriptor"], slot)'})],i.prototype,"elements",2),r([n({type:Number})],i.prototype,"offset",2),r([n({type:Boolean,reflect:!0})],i.prototype,"open",1),r([n()],i.prototype,"placement",2),r([n({attribute:"receives-focus"})],i.prototype,"receivesFocus",2),r([g("slot")],i.prototype,"slotEl",2),r([P()],i.prototype,"state",1),r([n({type:Number,attribute:"tip-padding"})],i.prototype,"tipPadding",2),r([n()],i.prototype,"trigger",2),r([n({attribute:!1})],i.prototype,"triggerElement",2),r([n({attribute:!1})],i.prototype,"triggerInteraction",2),r([n()],i.prototype,"type",2);export let Overlay=i;
//# sourceMappingURL=Overlay.js.map