@momentum-design/components 0.33.0 → 0.33.1

package/dist/browser/index.js

@@ -1981,7 +1981,7 @@
           background: transparent;
           z-index: ${this.popover.zIndex-1};
         }
-      `,e.appendChild(r),this.popover.backdropElement=e}}};var w=class extends _n(E){constructor(){super();this.id="";this.triggerID="";this.trigger=R.TRIGGER;this.placement=R.PLACEMENT;this.color=R.COLOR;this.visible=R.VISIBLE;this.offset=R.OFFSET;this.focusTrap=R.FOCUS_TRAP;this.preventScroll=R.PREVENT_SCROLL;this.showArrow=R.ARROW;this.closeButton=R.CLOSE_BUTTON;this.interactive=R.INTERACTIVE;this.delay=R.DELAY;this.hideOnEscape=R.HIDE_ON_ESCAPE;this.hideOnBlur=R.HIDE_ON_BLUR;this.hideOnOutsideClick=R.HIDE_ON_CLICK_OUTSIDE;this.focusBackToTrigger=R.FOCUS_BACK;this.backdrop=R.BACKDROP;this.flip=R.FLIP;this.size=R.SIZE;this.zIndex=R.Z_INDEX;this.appendTo="";this.closeButtonAriaLabel=null;this.role=R.ROLE;this.ariaLabelledby=null;this.ariaDescribedby=null;this.disableAriaExpanded=R.DISABLE_ARIA_EXPANDED;this.arrowElement=null;this.triggerElement=null;this.hoverTimer=null;this.isTriggerClicked=!1;this.openDelay=0;this.closeDelay=0;this.backdropElement=null;this.onOutsidePopoverClick=e=>{if(dt.peek()!==this)return;let r=!1,i=e.composedPath();r=this.contains(e.target)||i.includes(this.triggerElement);let s=this.backdropElement?i.includes(this.backdropElement):!1;(!r||s)&&this.hidePopover()};this.onEscapeKeydown=e=>{!this.visible||e.code!=="Escape"||(e.preventDefault(),this.hidePopover())};this.onPopoverFocusOut=e=>{this.contains(e.relatedTarget)||this.hidePopover()};this.startCloseDelay=()=>{if(!this.interactive)this.hidePopover();else{if(this.isTriggerClicked)return;this.hoverTimer=window.setTimeout(()=>{this.visible=!1},this.closeDelay)}};this.cancelCloseDelay=()=>{this.hoverTimer&&(clearTimeout(this.hoverTimer),this.hoverTimer=null)};this.showPopover=()=>{this.cancelCloseDelay(),setTimeout(()=>{this.visible=!0},this.openDelay)};this.hidePopover=()=>{dt.peek()===this&&setTimeout(()=>{this.visible=!1,this.isTriggerClicked=!1},this.closeDelay)};this.togglePopoverVisible=()=>{this.isTriggerClicked?this.hidePopover():(this.showPopover(),this.isTriggerClicked=!0)};this.utils=new Kr(this)}async firstUpdated(e){super.firstUpdated(e),this.utils.setupAppendTo(),[this.openDelay,this.closeDelay]=this.utils.setupDelay(),this.setupTriggerListener(),this.utils.setupAccessibility(),this.style.zIndex=`${this.zIndex}`,mt.onCreatedPopover(this),this.visible&&(this.positionPopover(),await this.handleCreatePopoverFirstUpdate())}async disconnectedCallback(){super.disconnectedCallback(),this.removeEventListeners(),mt.onDestroyedPopover(this),dt.remove(this)}setupTriggerListener(){if(this.triggerID&&(this.triggerElement=document.getElementById(this.triggerID),!!this.triggerElement)){if(this.trigger==="mouseenter"&&(this.interactive?this.trigger="mouseenter click":this.trigger="mouseenter focusin"),this.trigger.includes("click")&&this.triggerElement.addEventListener("click",this.togglePopoverVisible),this.trigger.includes("mouseenter")){let e=this.renderRoot.querySelector(".popover-hover-bridge");this.triggerElement.addEventListener("mouseenter",this.showPopover),this.triggerElement.addEventListener("mouseleave",this.startCloseDelay),this.addEventListener("mouseenter",this.cancelCloseDelay),this.addEventListener("mouseleave",this.startCloseDelay),e==null||e.addEventListener("mouseenter",this.cancelCloseDelay)}this.trigger.includes("focusin")&&(this.triggerElement.addEventListener("focusin",this.showPopover),this.interactive||this.triggerElement.addEventListener("focusout",this.hidePopover)),this.addEventListener("focus-trap-exit",this.hidePopover)}}removeEventListeners(){if(!this.triggerElement)return;let e=this.renderRoot.querySelector(".popover-hover-bridge");this.triggerElement.removeEventListener("click",this.togglePopoverVisible),this.triggerElement.removeEventListener("mouseenter",this.showPopover),this.triggerElement.removeEventListener("mouseleave",this.hidePopover),this.removeEventListener("mouseenter",this.cancelCloseDelay),this.removeEventListener("mouseleave",this.startCloseDelay),this.triggerElement.removeEventListener("focusin",this.showPopover),this.triggerElement.removeEventListener("focusout",this.hidePopover),e==null||e.removeEventListener("mouseenter",this.cancelCloseDelay),this.removeEventListener("focus-trap-exit",this.hidePopover)}async updated(e){if(super.updated(e),e.has("visible")){let r=e.get("visible");await this.isOpenUpdated(r,this.visible)}if(e.has("placement")&&this.setAttribute("placement",Object.values(Jo).includes(this.placement)?this.placement:R.PLACEMENT),e.has("delay")&&([this.openDelay,this.closeDelay]=this.utils.setupDelay()),e.has("trigger")){let i=this.trigger.split(" ").filter(s=>Object.values(ei).includes(s));this.setAttribute("trigger",i.length>0?this.trigger:R.TRIGGER),this.removeEventListeners(),this.setupTriggerListener()}e.has("color")&&this.setAttribute("color",Object.values(ti).includes(this.color)?this.color:R.COLOR),e.has("zIndex")&&this.setAttribute("z-index",`${this.zIndex}`),e.has("append-to")&&this.utils.setupAppendTo(),(e.has("interactive")||e.has("aria-label")||e.has("aria-labelledby"))&&this.utils.setupAccessibility()}async isOpenUpdated(e,r){var i,s,n;e===r||!this.triggerElement||(r?(dt.peek()!==this&&dt.push(this),this.enabledFocusTrap=this.focusTrap,this.enabledPreventScroll=this.preventScroll,this.backdrop&&(this.utils.createBackdrop(),this.triggerElement.style.zIndex=`${this.zIndex}`),this.positionPopover(),await this.handleCreatePopoverFirstUpdate(),this.hideOnBlur&&(this.addEventListener("focusout",this.onPopoverFocusOut),this.trigger==="click"&&(this.triggerElement.style.pointerEvents="none")),this.hideOnOutsideClick&&document.addEventListener("click",this.onOutsidePopoverClick),this.hideOnEscape&&document.addEventListener("keydown",this.onEscapeKeydown),this.disableAriaExpanded||this.triggerElement.setAttribute("aria-expanded","true"),this.interactive&&this.triggerElement.setAttribute("aria-haspopup",this.triggerElement.getAttribute("aria-haspopup")||"dialog"),mt.onShowPopover(this)):(dt.pop(),this.backdropElement&&((i=this.backdropElement)==null||i.remove(),this.backdropElement=null),this.hideOnBlur&&(this.removeEventListener("focusout",this.onPopoverFocusOut),this.trigger==="click"&&(this.triggerElement.style.pointerEvents="")),this.hideOnOutsideClick&&document.removeEventListener("click",this.onOutsidePopoverClick),this.hideOnEscape&&document.removeEventListener("keydown",this.onEscapeKeydown),(s=this.deactivateFocusTrap)==null||s.call(this),this.disableAriaExpanded||this.triggerElement.removeAttribute("aria-expanded"),this.interactive&&this.triggerElement.removeAttribute("aria-haspopup"),this.focusBackToTrigger&&((n=this.triggerElement)==null||n.focus()),mt.onHidePopover(this)))}async handleCreatePopoverFirstUpdate(){var e,r;this.visible&&this.interactive&&((e=this.setFocusableElements)==null||e.call(this),await this.updateComplete,(r=this.setInitialFocus)==null||r.call(this))}positionPopover(){if(!this.triggerElement)return;let e=[bn()],r=this.offset;if(this.flip&&e.push(yn()),this.size){let i=this.renderRoot.querySelector('[part="popover-content"]');e.push(xn({apply({availableHeight:s}){i&&Object.assign(i.style,{maxHeight:`${s}px`})},padding:50}))}if(this.showArrow&&(this.arrowElement=this.renderRoot.querySelector(".popover-arrow"),this.arrowElement)){let i=this.arrowElement.offsetHeight;r=Math.sqrt(2*i**2)/2+this.offset,e.push(En({element:this.arrowElement,padding:12}))}e.push(vn(r)),gn(this.triggerElement,this,async()=>{if(!this.triggerElement)return;let{x:i,y:s,middlewareData:n,placement:a}=await Tn(this.triggerElement,this,{placement:this.placement,middleware:e});this.utils.updatePopoverStyle(i,s),n.arrow&&this.arrowElement&&this.utils.updateArrowStyle(n.arrow,a),this.trigger.includes("mouseenter")&&this.utils.setupHoverBridge(a)})}render(){return u`
+      `,e.appendChild(r),this.popover.backdropElement=e}}};var w=class extends _n(E){constructor(){super();this.id="";this.triggerID="";this.trigger=R.TRIGGER;this.placement=R.PLACEMENT;this.color=R.COLOR;this.visible=R.VISIBLE;this.offset=R.OFFSET;this.focusTrap=R.FOCUS_TRAP;this.preventScroll=R.PREVENT_SCROLL;this.showArrow=R.ARROW;this.closeButton=R.CLOSE_BUTTON;this.interactive=R.INTERACTIVE;this.delay=R.DELAY;this.hideOnEscape=R.HIDE_ON_ESCAPE;this.hideOnBlur=R.HIDE_ON_BLUR;this.hideOnOutsideClick=R.HIDE_ON_CLICK_OUTSIDE;this.focusBackToTrigger=R.FOCUS_BACK;this.backdrop=R.BACKDROP;this.flip=R.FLIP;this.size=R.SIZE;this.zIndex=R.Z_INDEX;this.appendTo="";this.closeButtonAriaLabel=null;this.role=R.ROLE;this.ariaLabelledby=null;this.ariaDescribedby=null;this.disableAriaExpanded=R.DISABLE_ARIA_EXPANDED;this.arrowElement=null;this.triggerElement=null;this.hoverTimer=null;this.isTriggerClicked=!1;this.openDelay=0;this.closeDelay=0;this.backdropElement=null;this.onOutsidePopoverClick=e=>{if(dt.peek()!==this)return;let r=!1,i=e.composedPath();r=this.contains(e.target)||i.includes(this.triggerElement);let s=this.backdropElement?i.includes(this.backdropElement):!1;(!r||s)&&this.hidePopover()};this.onEscapeKeydown=e=>{!this.visible||e.code!=="Escape"||(e.preventDefault(),this.hidePopover())};this.onPopoverFocusOut=e=>{this.contains(e.relatedTarget)||this.hidePopover()};this.startCloseDelay=()=>{if(!this.interactive)this.hidePopover();else{if(this.isTriggerClicked)return;this.hoverTimer=window.setTimeout(()=>{this.visible=!1},this.closeDelay)}};this.cancelCloseDelay=()=>{this.hoverTimer&&(clearTimeout(this.hoverTimer),this.hoverTimer=null)};this.showPopover=()=>{this.cancelCloseDelay(),setTimeout(()=>{this.visible=!0},this.openDelay)};this.hidePopover=()=>{dt.peek()===this&&setTimeout(()=>{this.visible=!1,this.isTriggerClicked=!1},this.closeDelay)};this.togglePopoverVisible=()=>{this.isTriggerClicked?this.hidePopover():(this.showPopover(),this.isTriggerClicked=!0)};this.utils=new Kr(this)}async firstUpdated(e){super.firstUpdated(e),this.utils.setupAppendTo(),[this.openDelay,this.closeDelay]=this.utils.setupDelay(),this.setupTriggerListener(),this.utils.setupAccessibility(),this.style.zIndex=`${this.zIndex}`,mt.onCreatedPopover(this),this.visible&&(this.positionPopover(),await this.handleCreatePopoverFirstUpdate())}async disconnectedCallback(){super.disconnectedCallback(),this.removeEventListeners(),mt.onDestroyedPopover(this),dt.remove(this)}setupTriggerListener(){if(this.triggerID&&(this.triggerElement=this.getRootNode().querySelector(`#${this.triggerID}`),!!this.triggerElement)){if(this.trigger==="mouseenter"&&(this.interactive?this.trigger="mouseenter click":this.trigger="mouseenter focusin"),this.trigger.includes("click")&&this.triggerElement.addEventListener("click",this.togglePopoverVisible),this.trigger.includes("mouseenter")){let e=this.renderRoot.querySelector(".popover-hover-bridge");this.triggerElement.addEventListener("mouseenter",this.showPopover),this.triggerElement.addEventListener("mouseleave",this.startCloseDelay),this.addEventListener("mouseenter",this.cancelCloseDelay),this.addEventListener("mouseleave",this.startCloseDelay),e==null||e.addEventListener("mouseenter",this.cancelCloseDelay)}this.trigger.includes("focusin")&&(this.triggerElement.addEventListener("focusin",this.showPopover),this.interactive||this.triggerElement.addEventListener("focusout",this.hidePopover)),this.addEventListener("focus-trap-exit",this.hidePopover)}}removeEventListeners(){if(!this.triggerElement)return;let e=this.renderRoot.querySelector(".popover-hover-bridge");this.triggerElement.removeEventListener("click",this.togglePopoverVisible),this.triggerElement.removeEventListener("mouseenter",this.showPopover),this.triggerElement.removeEventListener("mouseleave",this.hidePopover),this.removeEventListener("mouseenter",this.cancelCloseDelay),this.removeEventListener("mouseleave",this.startCloseDelay),this.triggerElement.removeEventListener("focusin",this.showPopover),this.triggerElement.removeEventListener("focusout",this.hidePopover),e==null||e.removeEventListener("mouseenter",this.cancelCloseDelay),this.removeEventListener("focus-trap-exit",this.hidePopover)}async updated(e){if(super.updated(e),e.has("visible")){let r=e.get("visible");await this.isOpenUpdated(r,this.visible)}if(e.has("placement")&&this.setAttribute("placement",Object.values(Jo).includes(this.placement)?this.placement:R.PLACEMENT),e.has("delay")&&([this.openDelay,this.closeDelay]=this.utils.setupDelay()),e.has("trigger")){let i=this.trigger.split(" ").filter(s=>Object.values(ei).includes(s));this.setAttribute("trigger",i.length>0?this.trigger:R.TRIGGER),this.removeEventListeners(),this.setupTriggerListener()}e.has("color")&&this.setAttribute("color",Object.values(ti).includes(this.color)?this.color:R.COLOR),e.has("zIndex")&&this.setAttribute("z-index",`${this.zIndex}`),e.has("append-to")&&this.utils.setupAppendTo(),(e.has("interactive")||e.has("aria-label")||e.has("aria-labelledby"))&&this.utils.setupAccessibility()}async isOpenUpdated(e,r){var i,s,n;e===r||!this.triggerElement||(r?(dt.peek()!==this&&dt.push(this),this.enabledFocusTrap=this.focusTrap,this.enabledPreventScroll=this.preventScroll,this.backdrop&&(this.utils.createBackdrop(),this.triggerElement.style.zIndex=`${this.zIndex}`),this.positionPopover(),await this.handleCreatePopoverFirstUpdate(),this.hideOnBlur&&(this.addEventListener("focusout",this.onPopoverFocusOut),this.trigger==="click"&&(this.triggerElement.style.pointerEvents="none")),this.hideOnOutsideClick&&document.addEventListener("click",this.onOutsidePopoverClick),this.hideOnEscape&&document.addEventListener("keydown",this.onEscapeKeydown),this.disableAriaExpanded||this.triggerElement.setAttribute("aria-expanded","true"),this.interactive&&this.triggerElement.setAttribute("aria-haspopup",this.triggerElement.getAttribute("aria-haspopup")||"dialog"),mt.onShowPopover(this)):(dt.pop(),this.backdropElement&&((i=this.backdropElement)==null||i.remove(),this.backdropElement=null),this.hideOnBlur&&(this.removeEventListener("focusout",this.onPopoverFocusOut),this.trigger==="click"&&(this.triggerElement.style.pointerEvents="")),this.hideOnOutsideClick&&document.removeEventListener("click",this.onOutsidePopoverClick),this.hideOnEscape&&document.removeEventListener("keydown",this.onEscapeKeydown),(s=this.deactivateFocusTrap)==null||s.call(this),this.disableAriaExpanded||this.triggerElement.removeAttribute("aria-expanded"),this.interactive&&this.triggerElement.removeAttribute("aria-haspopup"),this.focusBackToTrigger&&((n=this.triggerElement)==null||n.focus()),mt.onHidePopover(this)))}async handleCreatePopoverFirstUpdate(){var e,r;this.visible&&this.interactive&&((e=this.setFocusableElements)==null||e.call(this),await this.updateComplete,(r=this.setInitialFocus)==null||r.call(this))}positionPopover(){if(!this.triggerElement)return;let e=[bn()],r=this.offset;if(this.flip&&e.push(yn()),this.size){let i=this.renderRoot.querySelector('[part="popover-content"]');e.push(xn({apply({availableHeight:s}){i&&Object.assign(i.style,{maxHeight:`${s}px`})},padding:50}))}if(this.showArrow&&(this.arrowElement=this.renderRoot.querySelector(".popover-arrow"),this.arrowElement)){let i=this.arrowElement.offsetHeight;r=Math.sqrt(2*i**2)/2+this.offset,e.push(En({element:this.arrowElement,padding:12}))}e.push(vn(r)),gn(this.triggerElement,this,async()=>{if(!this.triggerElement)return;let{x:i,y:s,middlewareData:n,placement:a}=await Tn(this.triggerElement,this,{placement:this.placement,middleware:e});this.utils.updatePopoverStyle(i,s),n.arrow&&this.arrowElement&&this.utils.updateArrowStyle(n.arrow,a),this.trigger.includes("mouseenter")&&this.utils.setupHoverBridge(a)})}render(){return u`
       <div class="popover-hover-bridge"></div>
       ${this.closeButton?u` <mdc-button
             class="popover-close"