@spectrum-web-components/overlay/src/OverlayTrigger.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 m=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var r=(p,l,e,n)=>{for(var t=n>1?void 0:n?u(l,e):l,s=p.length-1,i;s>=0;s--)(i=p[s])&&(t=(n?i(l,e,t):i(t))||t);return n&&t&&m(l,e,t),t};import{html as a,SpectrumElement as v}from"@spectrum-web-components/base";import{property as o,query as h,state as c}from"@spectrum-web-components/base/src/decorators.js";import"@spectrum-web-components/overlay/sp-overlay.js";import y from"./overlay-trigger.css.js";export class OverlayTrigger extends v{constructor(){super(...arguments);this.offset=6;this.disabled=!1;this.receivesFocus="auto";this.clickContent=[];this.longpressContent=[];this.hoverContent=[];this.targetContent=[]}static get styles(){return[y]}getAssignedElementsFromSlot(e){return e.assignedElements({flatten:!0})}handleTriggerContent(e){this.targetContent=this.getAssignedElementsFromSlot(e.target)}handleSlotContent(e){switch(e.target.name){case"click-content":this.clickContent=this.getAssignedElementsFromSlot(e.target);break;case"longpress-content":this.longpressContent=this.getAssignedElementsFromSlot(e.target);break;case"hover-content":this.hoverContent=this.getAssignedElementsFromSlot(e.target);break}}handleBeforetoggle(e){const{target:n}=e;let t;if(n===this.clickOverlayElement)t="click";else if(n===this.longpressOverlayElement)t="longpress";else if(n===this.hoverOverlayElement)t="hover";else return;e.newState==="open"?this.open=t:this.open===t&&(this.open=void 0)}update(e){var n,t,s,i,d,g;e.has("clickContent")&&(this.clickPlacement=((n=this.clickContent[0])==null?void 0:n.getAttribute("placement"))||((t=this.clickContent[0])==null?void 0:t.getAttribute("direction"))||void 0),e.has("hoverContent")&&(this.hoverPlacement=((s=this.hoverContent[0])==null?void 0:s.getAttribute("placement"))||((i=this.hoverContent[0])==null?void 0:i.getAttribute("direction"))||void 0),e.has("longpressContent")&&(this.longpressPlacement=((d=this.longpressContent[0])==null?void 0:d.getAttribute("placement"))||((g=this.longpressContent[0])==null?void 0:g.getAttribute("direction"))||void 0),super.update(e)}renderSlot(e){return a`
            <slot name=${e} @slotchange=${this.handleSlotContent}></slot>
        `}renderClickOverlay(){var t;const e=this.renderSlot("click-content"),n=a`
            <sp-overlay
                id="click-overlay"
                ?disabled=${this.disabled||!this.clickContent.length}
                ?open=${this.open==="click"&&!!this.clickContent.length}
                .offset=${this.offset}
                .placement=${this.clickPlacement||this.placement}
                .triggerElement=${this.targetContent[0]}
                .triggerInteraction=${"click"}
                .type=${this.type||"auto"}
                @beforetoggle=${this.handleBeforetoggle}
                .receivesFocus=${this.receivesFocus}
            >
                ${e}
            </sp-overlay>
        `;return(t=this.triggeredBy)!=null&&t.includes("click")||this.clickContent.length?n:e}renderHoverOverlay(){var t;const e=this.renderSlot("hover-content"),n=a`
            <sp-overlay
                id="hover-overlay"
                ?open=${this.open==="hover"&&!!this.hoverContent.length}
                ?disabled=${this.disabled||!this.hoverContent.length||!!this.open&&this.open!=="hover"}
                .offset=${this.offset}
                .placement=${this.hoverPlacement||this.placement}
                .triggerElement=${this.targetContent[0]}
                .triggerInteraction=${"hover"}
                .type=${"hint"}
                @beforetoggle=${this.handleBeforetoggle}
                .receivesFocus=${this.receivesFocus}
            >
                ${e}
            </sp-overlay>
        `;return(t=this.triggeredBy)!=null&&t.includes("hover")||this.hoverContent.length?n:e}renderLongpressOverlay(){var t;const e=this.renderSlot("longpress-content"),n=a`
            <sp-overlay
                id="longpress-overlay"
                ?disabled=${this.disabled||!this.longpressContent.length}
                ?open=${this.open==="longpress"&&!!this.longpressContent.length}
                .offset=${this.offset}
                .placement=${this.longpressPlacement||this.placement}
                .triggerElement=${this.targetContent[0]}
                .triggerInteraction=${"longpress"}
                .type=${"auto"}
                @beforetoggle=${this.handleBeforetoggle}
                .receivesFocus=${this.receivesFocus}
            >
                ${e}
            </sp-overlay>
            <slot name="longpress-describedby-descriptor"></slot>
        `;return(t=this.triggeredBy)!=null&&t.includes("longpress")||this.longpressContent.length?n:e}render(){return a`
            <slot
                id="trigger"
                name="trigger"
                @slotchange=${this.handleTriggerContent}
            ></slot>
            ${[this.renderClickOverlay(),this.renderHoverOverlay(),this.renderLongpressOverlay()]}
        `}updated(e){if(super.updated(e),this.disabled&&e.has("disabled")){this.open=void 0;return}}async getUpdateComplete(){return await super.getUpdateComplete()}}r([o({attribute:"triggered-by"})],OverlayTrigger.prototype,"triggeredBy",2),r([o({reflect:!0})],OverlayTrigger.prototype,"placement",2),r([o()],OverlayTrigger.prototype,"type",2),r([o({type:Number})],OverlayTrigger.prototype,"offset",2),r([o({reflect:!0})],OverlayTrigger.prototype,"open",2),r([o({type:Boolean,reflect:!0})],OverlayTrigger.prototype,"disabled",2),r([o({attribute:"receives-focus"})],OverlayTrigger.prototype,"receivesFocus",2),r([c()],OverlayTrigger.prototype,"clickContent",2),r([c()],OverlayTrigger.prototype,"longpressContent",2),r([c()],OverlayTrigger.prototype,"hoverContent",2),r([c()],OverlayTrigger.prototype,"targetContent",2),r([h("#click-overlay",!0)],OverlayTrigger.prototype,"clickOverlayElement",2),r([h("#longpress-overlay",!0)],OverlayTrigger.prototype,"longpressOverlayElement",2),r([h("#hover-overlay",!0)],OverlayTrigger.prototype,"hoverOverlayElement",2);
//# sourceMappingURL=OverlayTrigger.js.map