@momentum-design/components 0.39.0 → 0.39.1

package/dist/browser/index.js

@@ -1544,7 +1544,7 @@
           background: transparent;
           z-index: ${this.popover.zIndex-1};
         }
-      `,e.appendChild(r),this.popover.backdropElement=e}}};var L=class extends Fa(y){constructor(){super();this.id="";this.triggerID="";this.trigger=N.TRIGGER;this.placement=N.PLACEMENT;this.color=N.COLOR;this.visible=N.VISIBLE;this.offset=N.OFFSET;this.focusTrap=N.FOCUS_TRAP;this.preventScroll=N.PREVENT_SCROLL;this.showArrow=N.ARROW;this.closeButton=N.CLOSE_BUTTON;this.interactive=N.INTERACTIVE;this.delay=N.DELAY;this.hideOnEscape=N.HIDE_ON_ESCAPE;this.hideOnBlur=N.HIDE_ON_BLUR;this.hideOnOutsideClick=N.HIDE_ON_CLICK_OUTSIDE;this.focusBackToTrigger=N.FOCUS_BACK;this.backdrop=N.BACKDROP;this.flip=N.FLIP;this.size=N.SIZE;this.zIndex=N.Z_INDEX;this.appendTo="";this.closeButtonAriaLabel=null;this.role=N.ROLE;this.ariaLabelledby=null;this.ariaDescribedby=null;this.disableAriaExpanded=N.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(ft.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=()=>{ft.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 po(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}`,gt.onCreatedPopover(this),this.visible&&(this.positionPopover(),await this.handleCreatePopoverFirstUpdate())}async disconnectedCallback(){super.disconnectedCallback(),this.removeEventListeners(),gt.onDestroyedPopover(this),ft.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(ht).includes(this.placement)?this.placement:N.PLACEMENT),e.has("delay")&&([this.openDelay,this.closeDelay]=this.utils.setupDelay()),e.has("trigger")){let i=this.trigger.split(" ").filter(s=>Object.values(Ar).includes(s));this.setAttribute("trigger",i.length>0?this.trigger:N.TRIGGER),this.removeEventListeners(),this.setupTriggerListener()}e.has("color")&&this.setAttribute("color",Object.values(ut).includes(this.color)?this.color:N.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,a;e===r||!this.triggerElement||(r?(ft.peek()!==this&&ft.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"),gt.onShowPopover(this)):(ft.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&&((a=this.triggerElement)==null||a.focus()),gt.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=[Ma()],r=this.offset;if(this.flip&&e.push(za()),this.size){let i=this.renderRoot.querySelector('[part="popover-content"]');e.push(Da({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($a({element:this.arrowElement,padding:12}))}e.push(Oa(r)),Na(this.triggerElement,this,async()=>{if(!this.triggerElement)return;let{x:i,y:s,middlewareData:a,placement:n}=await Pa(this.triggerElement,this,{placement:this.placement,middleware:e});this.utils.updatePopoverStyle(i,s),a.arrow&&this.arrowElement&&this.utils.updateArrowStyle(a.arrow,n),this.trigger.includes("mouseenter")&&this.utils.setupHoverBridge(n)})}render(){return h`
+      `,e.appendChild(r),this.popover.backdropElement=e}}};var L=class extends Fa(y){constructor(){super();this.id="";this.triggerID="";this.trigger=N.TRIGGER;this.placement=N.PLACEMENT;this.color=N.COLOR;this.visible=N.VISIBLE;this.offset=N.OFFSET;this.focusTrap=N.FOCUS_TRAP;this.preventScroll=N.PREVENT_SCROLL;this.showArrow=N.ARROW;this.closeButton=N.CLOSE_BUTTON;this.interactive=N.INTERACTIVE;this.delay=N.DELAY;this.hideOnEscape=N.HIDE_ON_ESCAPE;this.hideOnBlur=N.HIDE_ON_BLUR;this.hideOnOutsideClick=N.HIDE_ON_CLICK_OUTSIDE;this.focusBackToTrigger=N.FOCUS_BACK;this.backdrop=N.BACKDROP;this.flip=N.FLIP;this.size=N.SIZE;this.zIndex=N.Z_INDEX;this.appendTo="";this.closeButtonAriaLabel=null;this.role=N.ROLE;this.ariaLabelledby=null;this.ariaDescribedby=null;this.disableAriaExpanded=N.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(ft.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=()=>{ft.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 po(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}`,gt.onCreatedPopover(this),this.visible&&(this.positionPopover(),await this.handleCreatePopoverFirstUpdate())}async disconnectedCallback(){super.disconnectedCallback(),this.removeEventListeners(),gt.onDestroyedPopover(this),ft.remove(this)}setupTriggerListener(){if(this.triggerID&&(this.triggerElement=this.getRootNode().querySelector(`[id="${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(ht).includes(this.placement)?this.placement:N.PLACEMENT),e.has("delay")&&([this.openDelay,this.closeDelay]=this.utils.setupDelay()),e.has("trigger")){let i=this.trigger.split(" ").filter(s=>Object.values(Ar).includes(s));this.setAttribute("trigger",i.length>0?this.trigger:N.TRIGGER),this.removeEventListeners(),this.setupTriggerListener()}e.has("color")&&this.setAttribute("color",Object.values(ut).includes(this.color)?this.color:N.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,a;e===r||!this.triggerElement||(r?(ft.peek()!==this&&ft.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"),gt.onShowPopover(this)):(ft.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&&((a=this.triggerElement)==null||a.focus()),gt.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=[Ma()],r=this.offset;if(this.flip&&e.push(za()),this.size){let i=this.renderRoot.querySelector('[part="popover-content"]');e.push(Da({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($a({element:this.arrowElement,padding:12}))}e.push(Oa(r)),Na(this.triggerElement,this,async()=>{if(!this.triggerElement)return;let{x:i,y:s,middlewareData:a,placement:n}=await Pa(this.triggerElement,this,{placement:this.placement,middleware:e});this.utils.updatePopoverStyle(i,s),a.arrow&&this.arrowElement&&this.utils.updateArrowStyle(a.arrow,n),this.trigger.includes("mouseenter")&&this.utils.setupHoverBridge(n)})}render(){return h`
       <div class="popover-hover-bridge"></div>
       ${this.closeButton?h` <mdc-button
             class="popover-close"