@dialpad/dialtone-vue 3.75.2 → 3.76.0

package/dist/popover-891f001a.cjs

@@ -1,2 +0,0 @@
-"use strict";const r=require("./DtEmojiPicker-4136084e.cjs"),o=require("vue"),u={props:{visuallyHiddenClose:{type:Boolean,default:!1},visuallyHiddenCloseLabel:{type:String,default:null}},watch:{$props:{immediate:!0,deep:!0,handler(){this.validateVisuallyHiddenCloseProps()}}},computed:{showVisuallyHiddenClose(){return this.visuallyHiddenClose&&this.visuallyHiddenCloseLabel!=null}},methods:{validateVisuallyHiddenCloseProps(){this.visuallyHiddenClose&&!this.visuallyHiddenCloseLabel&&console.error(`If visuallyHiddenClose prop is true, the component includes
-           a visually hidden close button and you must set the visuallyHiddenCloseLabel prop.`)}}},O={name:"SrOnlyCloseButton",components:{DtIcon:r.DtIcon,DtButton:r.DtButton},props:{visuallyHiddenCloseLabel:{type:String,default:null}},emits:["close"],methods:{close(){this.$emit("close")}}};function P(e,t,n,i,l,s){const d=o.resolveComponent("dt-icon"),c=o.resolveComponent("dt-button");return o.openBlock(),o.createBlock(c,{id:"sr-only-close-button","data-qa":"dt-sr-only-close-button",class:"d-vi-visible-sr","aria-label":n.visuallyHiddenCloseLabel,onClick:s.close,onKeydown:o.withKeys(o.withModifiers(s.close,["prevent","stop"]),["space"])},{default:o.withCtx(()=>[o.createVNode(d,{name:"close"})]),_:1},8,["aria-label","onClick","onKeydown"])}const f=r._export_sfc(O,[["render",P]]),m=':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])',g=`${m}:not([tabindex="-1"])`,S="button,[href],input,select,textarea,details,[tabindex]",y={methods:{async getFirstFocusableElement(e){await this.$nextTick();const t=this._getFocusableElements(e,!0);return this._getFirstFocusElement(t)},async focusFirstElement(e){const t=await this.getFirstFocusableElement(e);t==null||t.focus({preventScroll:!0})},_getFirstFocusElement(e){if(!e.length)return;let t=e[0];return t.matches('[type="radio"]:not(:checked)')&&(t=e.find(n=>n.checked&&n.name===t.name)||t),t},_getFocusableElements(e=this.$el,t=!1){return e?[...e.querySelectorAll(S)].filter(i=>{const l=window.getComputedStyle(i);return l.getPropertyValue("display")!=="none"&&l.getPropertyValue("visibility")!=="hidden"&&i.matches(t?m:g)}):[]},focusTrappedTabPress(e,t){if(!(e.key==="Tab"))return;const i=this._getFocusableElements(t);if(!i.length){e.preventDefault();return}const l=this._getFirstFocusElement(i),s=i[i.length-1];e.shiftKey?document.activeElement===l&&(s.focus(),e.preventDefault()):document.activeElement===s&&(l.focus(),e.preventDefault())}}},p={none:void 0,small:"d-p4",medium:"d-p8",large:"d-p16"},v={none:void 0,small:"d-pl4",medium:"d-pl8",large:"d-pl16"},C=["dialog","menu","listbox","tree","grid"],E=["","anchor"],b=["none","dialog","first"],_=["parent","body"],w=[...r.TIPPY_STICKY_VALUES],k={name:"PopoverHeaderFooter",components:{DtButton:r.DtButton,DtIcon:r.DtIcon},props:{type:{type:String,validator:function(e){return["header","footer"].includes(e)}},contentClass:{type:[String,Array,Object],default:""},showCloseButton:{type:Boolean,default:!1},closeButtonProps:{type:Object,default:()=>{}}},emits:["close"],data(){return{hasSlotContent:r.hasSlotContent}},methods:{focusCloseButton(){var t;const e=(t=this.$refs["popover__close-button"])==null?void 0:t.$el;e==null||e.focus()}}};function A(e,t,n,i,l,s){const d=o.resolveComponent("dt-icon"),c=o.resolveComponent("dt-button");return o.openBlock(),o.createElementBlock("div",{"data-qa":"dt-popover-header-footer",class:o.normalizeClass({"d-popover__header":n.type==="header","d-popover__footer":n.type==="footer"})},[l.hasSlotContent(e.$slots.content)?(o.openBlock(),o.createElementBlock("div",{key:0,"data-qa":"dt-popover-header-footer-content",class:o.normalizeClass(["d-to-ellipsis","d-w100p",n.contentClass])},[o.renderSlot(e.$slots,"content")],2)):o.createCommentVNode("",!0),n.showCloseButton?(o.openBlock(),o.createBlock(c,o.mergeProps({key:1,ref:"popover__close-button","data-qa":"dt-popover-close",class:"d-p6 d-mr6 d-bc-transparent",importance:"outlined",kind:"muted",circle:""},n.closeButtonProps,{onClick:t[0]||(t[0]=h=>e.$emit("close"))}),{icon:o.withCtx(()=>[o.createVNode(d,{name:"close",size:"300"})]),_:1},16)):o.createCommentVNode("",!0)],2)}const B=r._export_sfc(k,[["render",A]]);const L={name:"DtPopover",components:{SrOnlyCloseButton:f,DtLazyShow:r.DtLazyShow,PopoverHeaderFooter:B},mixins:[y,u],props:{open:{type:Boolean,default:null},openOnContext:{type:Boolean,default:!1},elementType:{type:String,default:"div"},transition:{type:String,default:"fade"},role:{type:String,default:"dialog",validator:e=>C.includes(e)},ariaLabelledby:{type:String,default:null},ariaLabel:{type:String,default:null},closeButtonProps:{type:Object,default:()=>({})},padding:{type:String,default:"large",validator:e=>Object.keys(p).some(t=>t===e)},contentClass:{type:[String,Array,Object],default:""},contentWidth:{type:String,default:"",validator:e=>E.includes(e)},contentAppear:{type:Boolean,default:null},contentTabindex:{type:Number||null,default:-1},externalAnchor:{type:String,default:""},id:{type:String,default(){return r.getUniqueString()}},offset:{type:Array,default:()=>[0,4]},hideOnClick:{type:Boolean,default:!0},modal:{type:Boolean,default:!0},fallbackPlacements:{type:Array,default:()=>["auto"]},placement:{type:String,default:"bottom-end"},tether:{type:Boolean,default:!0},sticky:{type:[Boolean,String],default:!1,validator:e=>w.includes(e)},maxHeight:{type:String,default:""},maxWidth:{type:String,default:""},showCloseButton:{type:Boolean,default:!1},headerClass:{type:[String,Array,Object],default:""},footerClass:{type:[String,Array,Object],default:""},dialogClass:{type:[String,Array,Object],default:""},initialFocusElement:{type:[String,HTMLElement],default:"first",validator:e=>b.includes(e)||e instanceof HTMLElement||e.startsWith("#")},openWithArrowKeys:{type:Boolean,default:!1},appendTo:{type:[HTMLElement,String],default:"body",validator:e=>_.includes(e)||e instanceof HTMLElement}},emits:["keydown","update:open","opened"],data(){return{POPOVER_PADDING_CLASSES:p,POPOVER_HEADER_FOOTER_PADDING_CLASSES:v,intersectionObserver:null,isOutsideViewport:!1,isOpen:!1,toAppear:!1,anchorEl:null,popoverContentEl:null,hasSlotContent:r.hasSlotContent}},computed:{popoverListeners(){return{keydown:e=>{this.onKeydown(e)},"after-leave":e=>{this.onLeaveTransitionComplete()},"after-enter":e=>{this.onEnterTransitionComplete()}}},calculatedMaxHeight(){return this.isOutsideViewport&&this.modal?"calc(100vh - var(--space-300))":this.maxHeight},labelledBy(){return this.ariaLabelledby||!this.ariaLabel&&r.getUniqueString("DtPopover__anchor")}},watch:{$props:{immediate:!0,deep:!0,handler(){this.validateProps()}},modal(e){var t;(t=this.tip)==null||t.setProps({zIndex:e?650:this.calculateAnchorZindex()})},offset(e){var t;(t=this.tip)==null||t.setProps({offset:e})},sticky(e){var t;(t=this.tip)==null||t.setProps({sticky:e})},fallbackPlacements(){var e;(e=this.tip)==null||e.setProps({popperOptions:this.popperOptions()})},tether(){var e;(e=this.tip)==null||e.setProps({popperOptions:this.popperOptions()})},placement(e){var t;(t=this.tip)==null||t.setProps({placement:e})},open:{handler:function(e){e!==null&&(this.isOpen=e),e===!0&&(this.toAppear=!0)},immediate:!0},contentAppear:{handler:function(e){e!==null&&(this.toAppear=e)}},isOpen(e,t){e?(this.initTippyInstance(),this.tip.show()):!e&&t!==e&&(this.removeEventListeners(),this.tip.hide())}},mounted(){const e=this.externalAnchor?this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`):null;this.anchorEl=e??this.$refs.anchor.children[0],this.popoverContentEl=this.$refs.content.$el,this.isOpen&&(this.initTippyInstance(),this.tip.show()),this.intersectionObserver=new IntersectionObserver(this.hasIntersectedViewport),this.intersectionObserver.observe(this.popoverContentEl)},beforeUnmount(){var e;(e=this.tip)==null||e.destroy(),this.intersectionObserver.disconnect(),this.removeReferences(),this.removeEventListeners()},methods:{hasIntersectedViewport(e){var i;const t=(i=e==null?void 0:e[0])==null?void 0:i.target;if(!t)return;const n=r.isOutOfViewPort(t);this.isOutsideViewport=n.bottom||n.top},popperOptions(){return r.getPopperOptions({fallbackPlacements:this.fallbackPlacements,tether:this.tether,hasHideModifierEnabled:!0})},validateProps(){this.modal&&this.initialFocusElement==="none"&&console.error('If the popover is modal you must set the initialFocusElement prop. Possible values: "dialog", "first", HTMLElement')},calculateAnchorZindex(){var e;return this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]')||(e=this.anchorEl)!=null&&e.closest(".d-zi-drawer")?650:300},defaultToggleOpen(e){var t,n,i;if(!this.openOnContext&&(this.open===null||this.open===void 0)){if(!((t=this.anchorEl)!=null&&t.contains(e.target))&&!((n=this.anchorEl)!=null&&n.isEqualNode(e.target))||(i=this.anchorEl)!=null&&i.disabled)return;this.toggleOpen()}},async onContext(e){this.openOnContext&&(e.preventDefault(),this.isOpen=!0,await this.$nextTick(),this.tip.setProps({placement:"right-start",getReferenceClientRect:()=>({width:0,height:0,top:e.clientY,bottom:e.clientY,left:e.clientX,right:e.clientX})}))},toggleOpen(){this.isOpen=!this.isOpen},onArrowKeyPress(e){var t;this.open===null&&(this.openWithArrowKeys&&((t=this.anchorEl)!=null&&t.contains(e.target))&&(this.isOpen||(this.isOpen=!0)),this.$emit("keydown",e))},addEventListeners(){window.addEventListener("dt-popover-close",this.closePopover),this.contentWidth==="anchor"&&window.addEventListener("resize",this.onResize)},removeEventListeners(){window.removeEventListener("dt-popover-close",this.closePopover),this.contentWidth==="anchor"&&window.removeEventListener("resize",this.onResize)},closePopover(){this.isOpen=!1},preventScrolling(){var e;if(this.modal){const t=(e=this.anchorEl)==null?void 0:e.closest("body, .tippy-box");t.tagName.toLowerCase()==="body"?(t.classList.add("d-of-hidden"),this.tip.setProps({offset:this.offset})):t.classList.add("d-zi-popover")}},enableScrolling(){var t,n;const e=(t=this.anchorEl)==null?void 0:t.closest("body, .tippy-box");e&&(((n=e.tagName)==null?void 0:n.toLowerCase())==="body"?(e.classList.remove("d-of-hidden"),this.tip.setProps({offset:this.offset})):e.classList.remove("d-zi-popover"))},removeReferences(){this.anchorEl=null,this.popoverContentEl=null,this.tip=null},async onShow(){this.contentWidth==="anchor"&&await this.setPopoverContentAnchorWidth(),this.contentWidth===null&&(this.popoverContentEl.style.width="auto"),this.addEventListeners()},async onLeaveTransitionComplete(){var e;this.modal&&(await this.focusFirstElement(this.$refs.anchor),await this.$nextTick(),this.enableScrolling()),(e=this.tip)==null||e.unmount(),this.$emit("opened",!1),this.open!==null&&this.$emit("update:open",!1)},async onEnterTransitionComplete(){this.focusInitialElement(),await this.$nextTick(),this.preventScrolling(),this.$emit("opened",!0,this.$refs.popover__content),this.open!==null&&this.$emit("update:open",!0)},focusInitialElement(){this.initialFocusElement==="dialog"&&this.$refs.content.$el.focus(),this.initialFocusElement.startsWith("#")&&this.focusInitialElementById(),this.initialFocusElement==="first"&&this.focusFirstElementIfNeeded(this.$refs.popover__content),this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},focusInitialElementById(){var t,n,i;const e=(n=(t=this.$refs.content)==null?void 0:t.$el)==null?void 0:n.querySelector(this.initialFocusElement);e?e.focus():console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.'),e?e.focus():(i=this.$refs.content)==null||i.$el.focus()},onResize(){this.closePopover()},onClickOutside(){if(!this.hideOnClick)return;this.popoverContentEl.querySelector(".d-popover__anchor--opened")||this.closePopover()},onKeydown(e){e.key==="Tab"&&this.modal&&this.focusTrappedTabPress(e,this.popoverContentEl),e.key==="Escape"&&this.closePopover(),this.$emit("keydown",e)},async setPopoverContentAnchorWidth(){var e;await this.$nextTick(),this.popoverContentEl.style.width=`${(e=this.anchorEl)==null?void 0:e.clientWidth}px`},focusFirstElementIfNeeded(e){var n,i;this._getFocusableElements(e,!0).length!==0?this.focusFirstElement(e):this.showCloseButton?(n=this.$refs.popover__header)==null||n.focusCloseButton():(i=this.$refs.content)==null||i.$el.focus()},initTippyInstance(){var e,t;this.tip=r.createTippy(this.anchorEl,{popperOptions:this.popperOptions(),contentElement:this.popoverContentEl,placement:this.placement,offset:this.offset,sticky:this.sticky,appendTo:this.appendTo==="body"?(t=(e=this.anchorEl)==null?void 0:e.getRootNode())==null?void 0:t.querySelector("body"):this.appendTo,interactive:!0,trigger:"manual",hideOnClick:!1,zIndex:this.modal?650:this.calculateAnchorZindex(),onClickOutside:this.onClickOutside,onShow:this.onShow})}}},T=["aria-hidden"],x=["id","tabindex"];function V(e,t,n,i,l,s){const d=o.resolveComponent("popover-header-footer"),c=o.resolveComponent("sr-only-close-button"),h=o.resolveComponent("dt-lazy-show");return o.openBlock(),o.createElementBlock("div",null,[n.modal&&l.isOpen?(o.openBlock(),o.createBlock(o.Teleport,{key:0,to:"body"},[o.createElementVNode("div",{class:"d-modal--transparent","aria-hidden":n.modal&&l.isOpen?"false":"true",onClick:t[0]||(t[0]=o.withModifiers(()=>{},["prevent","stop"]))},null,8,T)])):o.createCommentVNode("",!0),(o.openBlock(),o.createBlock(o.resolveDynamicComponent(n.elementType),{ref:"popover",class:o.normalizeClass(["d-popover",{"d-popover__anchor--opened":l.isOpen}]),"data-qa":"dt-popover-container"},{default:o.withCtx(()=>[o.createElementVNode("div",{id:!n.ariaLabelledby&&s.labelledBy,ref:"anchor","data-qa":"dt-popover-anchor",tabindex:n.openOnContext?0:void 0,onClickCapture:t[1]||(t[1]=(...a)=>s.defaultToggleOpen&&s.defaultToggleOpen(...a)),onContextmenu:t[2]||(t[2]=(...a)=>s.onContext&&s.onContext(...a)),onKeydown:[t[3]||(t[3]=o.withKeys(o.withModifiers((...a)=>s.onArrowKeyPress&&s.onArrowKeyPress(...a),["prevent"]),["up"])),t[4]||(t[4]=o.withKeys(o.withModifiers((...a)=>s.onArrowKeyPress&&s.onArrowKeyPress(...a),["prevent"]),["down"])),t[6]||(t[6]=o.withKeys(a=>e.$emit("keydown",a),["enter"])),t[7]||(t[7]=o.withKeys(a=>e.$emit("keydown",a),["space"]))],onKeydownCapture:t[5]||(t[5]=o.withKeys((...a)=>s.closePopover&&s.closePopover(...a),["escape"]))},[o.renderSlot(e.$slots,"anchor",{attrs:{"aria-expanded":l.isOpen.toString(),"aria-controls":n.id,"aria-haspopup":n.role}})],40,x),o.createVNode(h,o.mergeProps({id:n.id,ref:"content",role:n.role,"data-qa":"dt-popover","aria-hidden":`${!l.isOpen}`,"aria-labelledby":s.labelledBy,"aria-label":n.ariaLabel,"aria-modal":`${!n.modal}`,transition:n.transition,show:l.isOpen,appear:l.toAppear,class:["d-popover__dialog",{"d-popover__dialog--modal":n.modal},n.dialogClass],style:{"max-height":s.calculatedMaxHeight,"max-width":n.maxWidth},css:e.$attrs.css,tabindex:n.contentTabindex},o.toHandlers(s.popoverListeners)),{default:o.withCtx(()=>[l.hasSlotContent(e.$slots.headerContent)||n.showCloseButton?(o.openBlock(),o.createBlock(d,{key:0,ref:"popover__header",class:o.normalizeClass(l.POPOVER_HEADER_FOOTER_PADDING_CLASSES[n.padding]),"content-class":n.headerClass,type:"header","show-close-button":n.showCloseButton,"close-button-props":n.closeButtonProps,onClose:s.closePopover},{content:o.withCtx(()=>[o.renderSlot(e.$slots,"headerContent",{close:s.closePopover})]),_:3},8,["class","content-class","show-close-button","close-button-props","onClose"])):o.createCommentVNode("",!0),o.createElementVNode("div",{ref:"popover__content","data-qa":"dt-popover-content",class:o.normalizeClass(["d-popover__content",l.POPOVER_PADDING_CLASSES[n.padding],n.contentClass])},[o.renderSlot(e.$slots,"content",{close:s.closePopover})],2),l.hasSlotContent(e.$slots.footerContent)?(o.openBlock(),o.createBlock(d,{key:1,ref:"popover__footer",type:"footer",class:o.normalizeClass(l.POPOVER_HEADER_FOOTER_PADDING_CLASSES[n.padding]),"content-class":n.footerClass},{content:o.withCtx(()=>[o.renderSlot(e.$slots,"footerContent",{close:s.closePopover})]),_:3},8,["class","content-class"])):o.createCommentVNode("",!0),e.showVisuallyHiddenClose?(o.openBlock(),o.createBlock(c,{key:2,"visually-hidden-close-label":e.visuallyHiddenCloseLabel,onClose:s.closePopover},null,8,["visually-hidden-close-label","onClose"])):o.createCommentVNode("",!0)]),_:3},16,["id","role","aria-hidden","aria-labelledby","aria-label","aria-modal","transition","show","appear","class","style","css","tabindex"])]),_:3},8,["class"]))])}const D=r._export_sfc(L,[["render",V]]);exports.DtPopover=D;exports.Modal=y;exports.POPOVER_APPEND_TO_VALUES=_;exports.POPOVER_CONTENT_WIDTHS=E;exports.POPOVER_HEADER_FOOTER_PADDING_CLASSES=v;exports.POPOVER_INITIAL_FOCUS_STRINGS=b;exports.POPOVER_PADDING_CLASSES=p;exports.POPOVER_ROLES=C;exports.SrOnlyCloseButton=f;exports.SrOnlyCloseButtonMixin=u;