@dialpad/dialtone-vue 3.75.0 → 3.75.2

package/dist/{popover-f84c7e57.cjs → popover-891f001a.cjs}

@@ -1,2 +1,2 @@
-"use strict";const r=require("./index-52006ddd.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 g(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",g]]),m=':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])',P=`${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:P)}):[]},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;
+"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;

package/dist/{popover-2b504324.js → popover-d0be98d5.js}

@@ -1,4 +1,4 @@
-import { _ as C, D as w, b as S, W as k, h as L, d as x, g as O, X as F, Y as B, Z as H } from "./index-0e54de41.js";
+import { _ as C, D as w, b as S, X as k, h as L, d as x, g as O, Y as F, Z as B, $ as H } from "./DtEmojiPicker-454f372c.js";
 import { resolveComponent as d, openBlock as r, createBlock as a, withKeys as p, withModifiers as v, withCtx as u, createVNode as g, createElementBlock as E, normalizeClass as h, renderSlot as y, createCommentVNode as f, mergeProps as A, Teleport as I, createElementVNode as b, resolveDynamicComponent as D, toHandlers as R } from "vue";
 const V = {
   props: {
@@ -78,7 +78,7 @@ function K(e, t, o, s, i, n) {
     _: 1
   }, 8, ["aria-label", "onClick", "onKeydown"]);
 }
-const q = /* @__PURE__ */ C(N, [["render", K]]), T = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', W = `${T}:not([tabindex="-1"])`, z = "button,[href],input,select,textarea,details,[tabindex]", M = {
+const q = /* @__PURE__ */ C(N, [["render", K]]), T = ':not(:disabled):not([aria-disabled="true"]):not([role="presentation"])', z = `${T}:not([tabindex="-1"])`, M = "button,[href],input,select,textarea,details,[tabindex]", W = {
   methods: {
     /**
      * get the first focusable element in your component, includes tabindex="-1".
@@ -122,9 +122,9 @@ const q = /* @__PURE__ */ C(N, [["render", K]]), T = ':not(:disabled):not([aria-
      * @param {bool} includeNegativeTabIndex - will include tabindex="-1" in the list of focusable elements.
      */
     _getFocusableElements(e = this.$el, t = !1) {
-      return e ? [...e.querySelectorAll(z)].filter((s) => {
+      return e ? [...e.querySelectorAll(M)].filter((s) => {
         const i = window.getComputedStyle(s);
-        return i.getPropertyValue("display") !== "none" && i.getPropertyValue("visibility") !== "hidden" && s.matches(t ? T : W);
+        return i.getPropertyValue("display") !== "none" && i.getPropertyValue("visibility") !== "hidden" && s.matches(t ? T : z);
       }) : [];
     },
     /**
@@ -155,9 +155,9 @@ const q = /* @__PURE__ */ C(N, [["render", K]]), T = ':not(:disabled):not([aria-
   small: "d-pl4",
   medium: "d-pl8",
   large: "d-pl16"
-}, G = ["dialog", "menu", "listbox", "tree", "grid"], U = ["", "anchor"], Y = ["none", "dialog", "first"], Z = ["parent", "body"], X = [
+}, G = ["dialog", "menu", "listbox", "tree", "grid"], U = ["", "anchor"], Y = ["none", "dialog", "first"], Z = ["parent", "body"], $ = [
   ...k
-], $ = {
+], X = {
   name: "PopoverHeaderFooter",
   components: {
     DtButton: S,
@@ -255,7 +255,7 @@ function J(e, t, o, s, i, n) {
     }, 16)) : f("", !0)
   ], 2);
 }
-const Q = /* @__PURE__ */ C($, [["render", J]]);
+const Q = /* @__PURE__ */ C(X, [["render", J]]);
 const ee = {
   name: "DtPopover",
   /********************
@@ -266,7 +266,7 @@ const ee = {
     DtLazyShow: x,
     PopoverHeaderFooter: Q
   },
-  mixins: [M, V],
+  mixins: [W, V],
   props: {
     /**
      * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.
@@ -496,7 +496,7 @@ const ee = {
     sticky: {
       type: [Boolean, String],
       default: !1,
-      validator: (e) => X.includes(e)
+      validator: (e) => $.includes(e)
     },
     /**
      * Determines maximum height for the popover before overflow.
@@ -963,7 +963,7 @@ function ne(e, t, o, s, i, n) {
 const le = /* @__PURE__ */ C(ee, [["render", ne]]);
 export {
   le as D,
-  M,
+  W as M,
   Z as P,
   q as S,
   V as a,

package/dist/style.css

@@ -1 +1 @@
-.d-avatar--image-loaded{background-color:transparent;background-image:unset}.dt-default-list-item{min-height:28px;font-size:var(--fs-200);line-height:var(--lh-300);padding:var(--space-300) var(--space-400)}.dt-default-list-item--content{flex-grow:1}.dt-default-list-item--subtitle{font-size:var(--fs-100);color:var(--fc-tertiary)}.dt-default-list-item,.dt-default-list-item--right,.dt-default-list-item--left{display:flex;align-items:center;min-width:32px}.dt-default-list-item--right{padding-left:var(--space-400);align-self:flex-start}.dt-default-list-item--left{padding-right:var(--space-400);justify-content:flex-end;align-self:flex-start}.dt-default-list-item--bottom{margin-top:var(--space-200)}.dt-list-item{list-style:none}.dt-list-item:not(.dt-list-item--static){cursor:pointer;border-radius:var(--size-300)}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:var(--bgc-moderate-opaque)}.dt-list-item--highlighted:active{background-color:var(--bgc-bold-opaque)}.dt-list-item--selected-icon{margin-left:var(--space-400)}.dt-list-item :focus-visible{outline:none;box-shadow:var(--bs-focus-ring)}.dt-empty-list-item{display:flex;align-items:center;justify-content:center;font-size:var(--fs-200);line-height:var(--lh4);padding:var(--space-300) var(--space-450)}.enter-active,.leave-active{overflow:hidden;transition:height var(--td300) var(--ttf-quint)}.d-context-menu-list{width:var(--size-850)}.dt-list-item[role=menuitem]{border-radius:var(--size-300)}.dt-list-separator{border-top:var(--size-100) solid var(--bc-default);list-style:none}.dt-list-section[tabindex="-1"]:focus{outline:none}.vue-recycle-scroller{position:relative}.vue-recycle-scroller.direction-vertical:not(.page-mode){overflow-y:auto}.vue-recycle-scroller.direction-horizontal:not(.page-mode){overflow-x:auto}.vue-recycle-scroller.direction-horizontal{display:flex}.vue-recycle-scroller__slot{flex:auto 0 0}.vue-recycle-scroller__item-wrapper{flex:1;box-sizing:border-box;overflow:hidden;position:relative}.vue-recycle-scroller.ready .vue-recycle-scroller__item-view{position:absolute;top:0;left:0;will-change:transform}.vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper{width:100%}.vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper{height:100%}.vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view{width:100%}.vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view{height:100%}.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle){line-height:var(--lh-300)}.dt-recipe-callbar-button--circle{border-radius:var(--br-circle)}.dt-recipe-callbar-button.d-btn[disabled]{background-color:unset;opacity:.5}.dt-recipe-callbar-button--circle.d-btn[disabled]{border-color:unset}.dt-recipe-callbar-button--circle.d-btn--icon-only .d-btn__label{display:none}.dt-recipe-callbar-button--active .base-button__icon,.dt-recipe-callbar-button--active:hover .base-button__icon{color:var(--primary-color)}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle{margin-top:var(--space-350-negative);margin-left:calc(var(--space-300-negative) * 5);width:var(--size-500);height:var(--size-500);padding:var(--space-400);border-radius:var(--size-300)}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle.d-btn--active{background:var(--bgc-moderate-opaque)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header{background:var(--bgc-contrast);color:var(--fc-primary-inverted)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header .d-btn{color:var(--fc-primary-inverted)}.dt-recipe--callbar-button-with-popover--button .d-tab--selected:after,.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover:after{--tab--bgc: var(--bgc-contrast)}.dt-recipe--callbar-button-with-popover--button .tab-group{display:flex;flex-direction:column;height:100%}.dt-recipe--callbar-button-with-popover--button .tab-content{flex:1 1 100%;overflow-y:auto}.d-top-banner-info__left{margin:var(--space-300) 0 var(--space-300) var(--space-400);min-width:20%}.d-top-banner-info__middle{display:flex;align-items:center;gap:var(--size-300)}.d-top-banner-info__right{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--size-300);margin:var(--space-300) var(--space-500) var(--space-300) 0;min-width:20%}.ivr_node__width{width:280px}.ivr_node__goto_icon{transform:rotate(90deg)}.ivr-connector{z-index:var(--zi-base1);display:flex;justify-content:center;align-items:center;border-color:var(--purple-600);background-color:var(--purple-600)}.dt-chip-content{font-variant-numeric:tabular-nums}.d-btn[data-v-7712e6e1]:active{--bgo: 85% !important}.settings-menu-button[data-v-7712e6e1]:hover{background-color:hsla(var(--theme-topbar-color-hsl) / .05)}.settings-menu-button[data-v-7712e6e1]:focus-visible{color:var(--theme-topbar-color-hsl);box-shadow:0 0 0 var(--size-200) hsla(var(--theme-sidebar-color-hsl) / .15)}.dt-leftbar-row{--leftbar-row-color-foreground: var(--theme-sidebar-color);--leftbar-row-color-background: var(--theme-sidebar-row-color-background);--leftbar-row-radius: 100em;--leftbar-row-opacity: 100%;--leftbar-row-alpha-color-foreground: var(--theme-sidebar-icon-color);--leftbar-row-alpha-width: calc(var(--size-300) * 10);--leftbar-row-alpha-height: calc(var(--size-300) * 9);--leftbar-row-omega-min-width: 0;--leftbar-row-omega-height: var(--leftbar-row-alpha-height);--leftbar-row-omega-display: inline-flex;--leftbar-row-description-font-weight: var(--fw-normal);--leftbar-row-description-font-size: var(--fs-200);--leftbar-row-description-line-height: var(--lh-200);--leftbar-row-status-color-foreground: var(--theme-sidebar-status-color);--leftbar-row-status-font-size: var(--fs-100);--leftbar-row-status-line-height: var(--lh-100);--leftbar-row-action-position-right: var(--size-400);--leftbar-row-action-position-bottom: 50%;--leftbar-row-action-width: var(--size-550);--leftbar-row-action-height: var(--leftbar-row-action-width);position:relative;opacity:var(--leftbar-row-opacity);display:flex;background-color:var(--theme-sidebar-row-color-background);border-radius:var(--leftbar-row-radius);transition-duration:var(--td200);transition-property:background-color,border,box-shadow;transition-timing-function:var(--ttf-out-quint);cursor:pointer}.dt-leftbar-row:not(.dt-leftbar-row--no-action):hover{--leftbar-row-omega-display: none;--leftbar-row-omega-min-width: var(--leftbar-row-alpha-width)}.dt-leftbar-row:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action{display:inline-flex}.dt-leftbar-row:hover{--leftbar-row-color-background: var(--theme-sidebar-row-color-background-hover)}.dt-leftbar-row:hover .d-presence{--presence-color-border-base: var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row:hover .d-avatar__count{--avatar-count-color-shadow: var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row--has-unread{--leftbar-row-description-font-weight: var(--fw-bold);--leftbar-row-alpha-color-foreground: var(--leftbar-row-color-foreground)}.dt-leftbar-row--has-unread .dt-leftbar-row__action{display:none}.dt-leftbar-row--muted{--leftbar-row-opacity: 60%}.dt-leftbar-row--selected{--leftbar-row-color-background: var(--theme-sidebar-selected-row-color-background);--leftbar-row-color-foreground: var(--theme-sidebar-selected-row-color)}.dt-leftbar-row--selected .d-avatar__count{--avatar-count-color-shadow: var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row--action-focused{--leftbar-row-omega-display: none;--leftbar-row-omega-min-width: var(--leftbar-row-alpha-width)}.dt-leftbar-row__is-typing{--is-typing-size-shape: var(--size-550);height:var(--is-typing-size-shape);width:var(--is-typing-size-shape);position:absolute;display:flex;align-items:center;justify-content:center;gap:2px;border-radius:var(--br-pill);opacity:.75}.dt-leftbar-row__is-typing span{transition:all .5s ease;background:var(--bgc-strong);height:4px;width:4px;display:inline-block;padding:0;opacity:.3;border-radius:var(--br-pill);animation:wave 1.5s ease infinite}.dt-leftbar-row__is-typing span:nth-child(1){animation-delay:0ms}.dt-leftbar-row__is-typing span:nth-child(2){animation-delay:var(--td100)}.dt-leftbar-row__is-typing span:nth-child(3){animation-delay:var(--td200)}.dt-leftbar-row__primary{display:flex;align-items:center;flex:1;width:100%;text-align:left;background-color:var(--leftbar-row-color-background);color:var(--leftbar-row-color-foreground);text-decoration:none;appearance:none;font-size:inherit;line-height:inherit;margin:0;border:0;padding:0;border-radius:var(--leftbar-row-radius)}.dt-leftbar-row__primary:active{--leftbar-row-color-background: var(--theme-sidebar-row-color-background-active)}.dt-leftbar-row__primary:focus-visible{box-shadow:var(--bs-focus-ring-inset)}.dt-leftbar-row__action-button{opacity:0;width:var(--leftbar-row-action-width);height:var(--leftbar-row-action-height)}.dt-leftbar-row:hover .dt-leftbar-row__action-button,.dt-leftbar-row__action-button:focus-visible{opacity:1}.dt-leftbar-row__alpha{color:var(--leftbar-row-alpha-color-foreground);display:flex;box-sizing:border-box;justify-content:center;align-items:center;padding-left:var(--space-400);padding-right:var(--space-400);width:var(--leftbar-row-alpha-width);height:var(--leftbar-row-alpha-height);border-radius:var(--leftbar-row-radius) 0 0 var(--leftbar-row-radius)}.dt-leftbar-row__label{flex:0 1;min-width:0}.dt-leftbar-row__omega{position:absolute;display:flex;right:var(--leftbar-row-action-position-right);top:var(--leftbar-row-action-position-bottom);transform:translateY(calc(var(--leftbar-row-action-position-bottom) * -1));gap:var(--space-300);justify-content:end;align-items:center;box-sizing:border-box;border-radius:var(--leftbar-row-radius)}.dt-leftbar-row__unread-badge{display:var(--leftbar-row-omega-display)}.dt-leftbar-row__active-voice{color:var(--fc-success);-webkit-animation-name:opacity-pulsate;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:both;-moz-animation-name:opacity-pulsate;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-fill-mode:both;animation-name:opacity-pulsate;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both}.dt-leftbar-row__dnd{padding-top:var(--space-200);padding-right:var(--space-300);color:var(--fc-tertiary);font-size:var(--fs-100);line-height:var(--lh-400);font-weight:var(--fw-medium)}.dt-leftbar-row__description{display:block;font-weight:var(--leftbar-row-description-font-weight);font-size:var(--leftbar-row-description-font-size);line-height:var(--leftbar-row-description-line-height);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-leftbar-row__status{display:block;color:var(--leftbar-row-status-color-foreground);font-size:var(--leftbar-row-status-font-size);line-height:var(--leftbar-row-status-line-height);padding-bottom:var(--space-100);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-leftbar-row__meta-context~.dt-leftbar-row__meta-custom:not(:empty):before{content:" • ";color:var(--theme-sidebar-status-color)}.dt-leftbar-row__icon-cc{border-radius:var(--size-200);width:calc(var(--size-300) * 3.5);height:calc(var(--size-300) * 3.5)}.opacity-pulsate{-webkit-animation-name:opacity-pulsate;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:both;-moz-animation-name:opacity-pulsate;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-fill-mode:both;animation-name:opacity-pulsate;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both}@-webkit-keyframes opacity-pulsate{0%,to{opacity:.2}50%{opacity:1}}@-moz-keyframes opacity-pulsate{0%,to{opacity:.2}50%{opacity:1}}@keyframes opacity-pulsate{0%,to{opacity:.2}50%{opacity:1}}@keyframes wave{0%,50%,to{transform:translate(0)}10%{transform:translateY(-5px);opacity:90%}}.dt-leftbar-unread-pill{display:flex;align-items:center;justify-content:center;padding:var(--space-200) var(--space-500) var(--space-200) var(--space-400);gap:var(--space-300);font-size:var(--fs-100);box-shadow:var(--bs-md);border-radius:var(--br-pill);border:none;line-height:var(--lh-600);cursor:pointer}.dt-leftbar-unread-pill--mentions{font-weight:var(--fw-bold);background-color:var(--theme-mention-color-background);color:var(--theme-mention-color-foreground)}.dt-leftbar-unread-pill--messages{background-color:var(--bgc-primary);color:var(--fc-primary)}content-text-wrapper-class:not(img){line-height:1.6rem}.feed-item-row{transition-duration:2s!important}.skeleton-placeholder{display:flex;stroke:none;fill:var(--placeholder-from-color, var(--black-300));background:var(--placeholder-from-color, var(--black-300))}.skeleton-placeholder--animate{animation-name:placeholder-throb;animation-iteration-count:infinite}@keyframes placeholder-throb{10%{fill:var(--placeholder-from-color, var(--black-300));background:var(--placeholder-from-color, var(--black-300))}50%{fill:var(--placeholder-to-color, var(--black-100));background:var(--placeholder-to-color, var(--black-100))}90%{fill:var(--placeholder-from-color, var(--black-300));background:var(--placeholder-from-color, var(--black-300))}}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;color:var(--fc-placeholder);pointer-events:none;height:0}.dt-message-input--remaining-char{font-size:1.2rem}.message-input-button__disabled{background-color:unset;color:var(--theme-sidebar-icon-color);cursor:default}.tippy-box[data-popper-reference-hidden] .d-popover__dialog,.tippy-box[data-popper-escaped] .d-popover__dialog{visibility:hidden;pointer-events:none}.d-emoji-picker__search[data-v-640002c1]{position:relative;z-index:1;margin:var(--su16) var(--su24) 0 var(--su16);background-color:#fff}.d-emoji-picker__search-button[data-v-640002c1]{border:none;background:none;cursor:pointer;margin:0;padding:0;outline:none;line-height:0}.d-emoji-picker__tabset-list{gap:4px}.d-emoji-picker__tabset-list:after{background-color:var(--black-200)!important}.d-emoji-picker__tabset-list button{padding:var(--space-400)}.d-emoji-picker__tabset-list button.d-tab--selected:after{height:var(--size-200)}.d-emoji-picker__selector[data-v-067b0cfe]{min-height:297px}.d-emoji-picker__selector p[data-v-067b0cfe]{margin-bottom:4px;font-size:12px;font-weight:700;letter-spacing:-.01em}.d-emoji-picker__category[data-v-067b0cfe]{background:rgba(255,255,255,.9);position:sticky;top:0;padding-top:20px;width:100%}.d-emoji-picker__list[data-v-067b0cfe]{height:100%;max-height:297px;overflow-y:auto;overflow-x:hidden;position:relative;padding-bottom:5px}.d-emoji-picker__list div:not(:first-child) p[data-v-067b0cfe]{margin-top:22px}.d-emoji-picker__search-label[data-v-067b0cfe]{margin-top:20px}.d-emoji-picker__tab[data-v-067b0cfe]{width:calc(100% + 15px);max-width:340px;gap:2px;display:flex;flex-wrap:wrap;margin-left:-6px}.d-emoji-picker__tab button[data-v-067b0cfe]{display:flex;align-items:center;justify-content:center;border-radius:50%;width:36px;height:36px;border:none;background:none;cursor:pointer;margin:0;padding:0;outline:none}.d-emoji-picker__tab button[data-v-067b0cfe]:hover,.d-emoji-picker__tab button[data-v-067b0cfe]:active,.d-emoji-picker__tab button.hover-emoji[data-v-067b0cfe]{background:rgba(0,0,0,.1)}.d-emoji-picker__tab button[data-v-067b0cfe]:focus{box-shadow:var(--bs-focus-ring)}.d-emoji-picker__skin-list[data-v-3a6fb9c2]{display:inline-flex;border-radius:40px;background:rgba(0,0,0,.05);flex-direction:row;align-items:flex-start;padding:4px;gap:4px}.d-emoji-picker__skin-list button[data-v-3a6fb9c2]{border:none;background:none;cursor:pointer;margin:0;padding:0;outline:none;border-radius:28px;width:34px;height:34px}.d-emoji-picker__skin-list button[data-v-3a6fb9c2]:hover{background:rgba(0,0,0,.1);border-radius:28px}.d-emoji-picker__skin-list button.selected[data-v-3a6fb9c2]{border:1px solid rgba(0,0,0,.25);border-radius:28px}.d-emoji-picker__skin-selected button[data-v-3a6fb9c2]{border:none;background:none;cursor:pointer;margin:0;outline:none;padding:7px;display:inline-block;background:rgba(0,0,0,.1);border-radius:28px;width:42px;height:42px}.d-emoji-picker__skin-selected button[data-v-3a6fb9c2]:hover{background:#D2D2D2}.d-emoji-picker__data[data-v-48c61881]{display:flex;width:100%;max-width:290px;align-items:center;gap:10px}.d-emoji-picker{width:372px;height:100%;flex-direction:column;border-radius:4px;background-color:#fff}.d-emoji-picker--header{padding:var(--su4) var(--su4) 0 var(--su8);position:relative}.d-emoji-picker--header:after{content:"";position:absolute;right:0;bottom:0;left:0;height:1px;background-color:var(--bgc-moderate)!important}.d-emoji-picker__alignment{width:auto;max-width:340px;margin:0 16px}.d-emoji-picker--footer{position:relative;height:58px;background:#F9F9F9;border-top:1px solid var(--bc-subtle);display:flex;align-items:center;justify-content:space-between;padding:0 16px}.tippy-box[data-popper-reference-hidden] .d-tooltip,.tippy-box[data-popper-escaped] .d-tooltip{visibility:hidden;pointer-events:none}
+.d-avatar--image-loaded{background-color:transparent;background-image:unset}.dt-default-list-item{min-height:28px;font-size:var(--fs-200);line-height:var(--lh-300);padding:var(--space-300) var(--space-400)}.dt-default-list-item--content{flex-grow:1}.dt-default-list-item--subtitle{font-size:var(--fs-100);color:var(--fc-tertiary)}.dt-default-list-item,.dt-default-list-item--right,.dt-default-list-item--left{display:flex;align-items:center;min-width:32px}.dt-default-list-item--right{padding-left:var(--space-400);align-self:flex-start}.dt-default-list-item--left{padding-right:var(--space-400);justify-content:flex-end;align-self:flex-start}.dt-default-list-item--bottom{margin-top:var(--space-200)}.dt-list-item{list-style:none}.dt-list-item:not(.dt-list-item--static){cursor:pointer;border-radius:var(--size-300)}.dt-list-item--focusable:focus,.dt-list-item--focusable:focus-within,.dt-list-item--highlighted{background-color:var(--bgc-moderate-opaque)}.dt-list-item--highlighted:active{background-color:var(--bgc-bold-opaque)}.dt-list-item--selected-icon{margin-left:var(--space-400)}.dt-list-item :focus-visible{outline:none;box-shadow:var(--bs-focus-ring)}.dt-empty-list-item{display:flex;align-items:center;justify-content:center;font-size:var(--fs-200);line-height:var(--lh4);padding:var(--space-300) var(--space-450)}.enter-active,.leave-active{overflow:hidden;transition:height var(--td300) var(--ttf-quint)}.d-context-menu-list{width:var(--size-850)}.dt-list-item[role=menuitem]{border-radius:var(--size-300)}.dt-list-separator{border-top:var(--size-100) solid var(--bc-default);list-style:none}.dt-list-section[tabindex="-1"]:focus{outline:none}.vue-recycle-scroller{position:relative}.vue-recycle-scroller.direction-vertical:not(.page-mode){overflow-y:auto}.vue-recycle-scroller.direction-horizontal:not(.page-mode){overflow-x:auto}.vue-recycle-scroller.direction-horizontal{display:flex}.vue-recycle-scroller__slot{flex:auto 0 0}.vue-recycle-scroller__item-wrapper{flex:1;box-sizing:border-box;overflow:hidden;position:relative}.vue-recycle-scroller.ready .vue-recycle-scroller__item-view{position:absolute;top:0;left:0;will-change:transform}.vue-recycle-scroller.direction-vertical .vue-recycle-scroller__item-wrapper{width:100%}.vue-recycle-scroller.direction-horizontal .vue-recycle-scroller__item-wrapper{height:100%}.vue-recycle-scroller.ready.direction-vertical .vue-recycle-scroller__item-view{width:100%}.vue-recycle-scroller.ready.direction-horizontal .vue-recycle-scroller__item-view{height:100%}.d-datepicker__month-year-picker{display:flex;align-items:center;justify-content:space-between;height:100%;width:100%;margin-bottom:20px}.d-datepicker__month-year-picker>div{display:inline-flex}.d-datepicker__month-year-picker button{border:none;background-color:transparent;cursor:pointer;color:var(--primary-color);display:inline-flex;align-items:center;padding:0}.d-datepicker__week-day{display:flex;justify-content:space-between;margin-bottom:16px}.d-datepicker__week-day>div{display:flex;align-items:center;justify-content:center;width:24px;height:24px}.d-datepicker__week-day>div p{color:var(--black-600);margin:0}.d-datepicker__week{margin-bottom:8px;display:flex;justify-content:space-between;align-items:center}.d-datepicker__day{border:none;background-color:transparent;cursor:pointer;padding:0;width:24px;height:24px;font-size:12px;border-radius:50px}.d-datepicker__day--disabled{color:var(--black-300)}.d-datepicker__day--selected{color:#fff;background:#7C52FF}.d-datepicker__day:focus{box-shadow:var(--bs-focus-ring)}.d-datepicker{width:308px;padding:16px}.d-datepicker p{font-family:inherit;margin:0;display:flex;font-style:normal;font-weight:400;font-size:12px;text-transform:uppercase}.d-datepicker--body{padding:0 8px}.dt-recipe-callbar-button:not(.dt-recipe-callbar-button--circle){line-height:var(--lh-300)}.dt-recipe-callbar-button--circle{border-radius:var(--br-circle)}.dt-recipe-callbar-button.d-btn[disabled]{background-color:unset;opacity:.5}.dt-recipe-callbar-button--circle.d-btn[disabled]{border-color:unset}.dt-recipe-callbar-button--circle.d-btn--icon-only .d-btn__label{display:none}.dt-recipe-callbar-button--active .base-button__icon,.dt-recipe-callbar-button--active:hover .base-button__icon{color:var(--primary-color)}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle{margin-top:var(--space-350-negative);margin-left:calc(var(--space-300-negative) * 5);width:var(--size-500);height:var(--size-500);padding:var(--space-400);border-radius:var(--size-300)}.dt-recipe--callbar-button-with-popover--arrow.d-btn--circle.d-btn--active{background:var(--bgc-moderate-opaque)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header{background:var(--bgc-contrast);color:var(--fc-primary-inverted)}.dt-recipe--callbar-button-with-popover--popover .d-popover__header .d-btn{color:var(--fc-primary-inverted)}.dt-recipe--callbar-button-with-popover--button .d-tab--selected:after,.dt-recipe--callbar-button-with-popover--button .d-tab--selected:hover:after{--tab--bgc: var(--bgc-contrast)}.dt-recipe--callbar-button-with-popover--button .tab-group{display:flex;flex-direction:column;height:100%}.dt-recipe--callbar-button-with-popover--button .tab-content{flex:1 1 100%;overflow-y:auto}.d-top-banner-info__left{margin:var(--space-300) 0 var(--space-300) var(--space-400);min-width:20%}.d-top-banner-info__middle{display:flex;align-items:center;gap:var(--size-300)}.d-top-banner-info__right{display:flex;align-items:baseline;justify-content:flex-end;gap:var(--size-300);margin:var(--space-300) var(--space-500) var(--space-300) 0;min-width:20%}.ivr_node__width{width:280px}.ivr_node__goto_icon{transform:rotate(90deg)}.ivr-connector{z-index:var(--zi-base1);display:flex;justify-content:center;align-items:center;border-color:var(--purple-600);background-color:var(--purple-600)}.dt-chip-content{font-variant-numeric:tabular-nums}.d-btn[data-v-7712e6e1]:active{--bgo: 85% !important}.settings-menu-button[data-v-7712e6e1]:hover{background-color:hsla(var(--theme-topbar-color-hsl) / .05)}.settings-menu-button[data-v-7712e6e1]:focus-visible{color:var(--theme-topbar-color-hsl);box-shadow:0 0 0 var(--size-200) hsla(var(--theme-sidebar-color-hsl) / .15)}.dt-leftbar-row{--leftbar-row-color-foreground: var(--theme-sidebar-color);--leftbar-row-color-background: var(--theme-sidebar-row-color-background);--leftbar-row-radius: 100em;--leftbar-row-opacity: 100%;--leftbar-row-alpha-color-foreground: var(--theme-sidebar-icon-color);--leftbar-row-alpha-width: calc(var(--size-300) * 10);--leftbar-row-alpha-height: calc(var(--size-300) * 9);--leftbar-row-omega-min-width: 0;--leftbar-row-omega-height: var(--leftbar-row-alpha-height);--leftbar-row-omega-display: inline-flex;--leftbar-row-description-font-weight: var(--fw-normal);--leftbar-row-description-font-size: var(--fs-200);--leftbar-row-description-line-height: var(--lh-200);--leftbar-row-status-color-foreground: var(--theme-sidebar-status-color);--leftbar-row-status-font-size: var(--fs-100);--leftbar-row-status-line-height: var(--lh-100);--leftbar-row-action-position-right: var(--size-400);--leftbar-row-action-position-bottom: 50%;--leftbar-row-action-width: var(--size-550);--leftbar-row-action-height: var(--leftbar-row-action-width);position:relative;opacity:var(--leftbar-row-opacity);display:flex;background-color:var(--theme-sidebar-row-color-background);border-radius:var(--leftbar-row-radius);transition-duration:var(--td200);transition-property:background-color,border,box-shadow;transition-timing-function:var(--ttf-out-quint);cursor:pointer}.dt-leftbar-row:not(.dt-leftbar-row--no-action):hover{--leftbar-row-omega-display: none;--leftbar-row-omega-min-width: var(--leftbar-row-alpha-width)}.dt-leftbar-row:not(.dt-leftbar-row--no-action):hover .dt-leftbar-row__action{display:inline-flex}.dt-leftbar-row:hover{--leftbar-row-color-background: var(--theme-sidebar-row-color-background-hover)}.dt-leftbar-row:hover .d-presence{--presence-color-border-base: var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row:hover .d-avatar__count{--avatar-count-color-shadow: var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row--has-unread{--leftbar-row-description-font-weight: var(--fw-bold);--leftbar-row-alpha-color-foreground: var(--leftbar-row-color-foreground)}.dt-leftbar-row--has-unread .dt-leftbar-row__action{display:none}.dt-leftbar-row--muted{--leftbar-row-opacity: 60%}.dt-leftbar-row--selected{--leftbar-row-color-background: var(--theme-sidebar-selected-row-color-background);--leftbar-row-color-foreground: var(--theme-sidebar-selected-row-color)}.dt-leftbar-row--selected .d-avatar__count{--avatar-count-color-shadow: var(--theme-sidebar-selected-row-color-background)}.dt-leftbar-row--action-focused{--leftbar-row-omega-display: none;--leftbar-row-omega-min-width: var(--leftbar-row-alpha-width)}.dt-leftbar-row__is-typing{--is-typing-size-shape: var(--size-550);height:var(--is-typing-size-shape);width:var(--is-typing-size-shape);position:absolute;display:flex;align-items:center;justify-content:center;gap:2px;border-radius:var(--br-pill);opacity:.75}.dt-leftbar-row__is-typing span{transition:all .5s ease;background:var(--bgc-strong);height:4px;width:4px;display:inline-block;padding:0;opacity:.3;border-radius:var(--br-pill);animation:wave 1.5s ease infinite}.dt-leftbar-row__is-typing span:nth-child(1){animation-delay:0ms}.dt-leftbar-row__is-typing span:nth-child(2){animation-delay:var(--td100)}.dt-leftbar-row__is-typing span:nth-child(3){animation-delay:var(--td200)}.dt-leftbar-row__primary{display:flex;align-items:center;flex:1;width:100%;text-align:left;background-color:var(--leftbar-row-color-background);color:var(--leftbar-row-color-foreground);text-decoration:none;appearance:none;font-size:inherit;line-height:inherit;margin:0;border:0;padding:0;border-radius:var(--leftbar-row-radius)}.dt-leftbar-row__primary:active{--leftbar-row-color-background: var(--theme-sidebar-row-color-background-active)}.dt-leftbar-row__primary:focus-visible{box-shadow:var(--bs-focus-ring-inset)}.dt-leftbar-row__action-button{opacity:0;width:var(--leftbar-row-action-width);height:var(--leftbar-row-action-height)}.dt-leftbar-row:hover .dt-leftbar-row__action-button,.dt-leftbar-row__action-button:focus-visible{opacity:1}.dt-leftbar-row__alpha{color:var(--leftbar-row-alpha-color-foreground);display:flex;box-sizing:border-box;justify-content:center;align-items:center;padding-left:var(--space-400);padding-right:var(--space-400);width:var(--leftbar-row-alpha-width);height:var(--leftbar-row-alpha-height);border-radius:var(--leftbar-row-radius) 0 0 var(--leftbar-row-radius)}.dt-leftbar-row__label{flex:0 1;min-width:0}.dt-leftbar-row__omega{position:absolute;display:flex;right:var(--leftbar-row-action-position-right);top:var(--leftbar-row-action-position-bottom);transform:translateY(calc(var(--leftbar-row-action-position-bottom) * -1));gap:var(--space-300);justify-content:end;align-items:center;box-sizing:border-box;border-radius:var(--leftbar-row-radius)}.dt-leftbar-row__unread-badge{display:var(--leftbar-row-omega-display)}.dt-leftbar-row__active-voice{color:var(--fc-success);-webkit-animation-name:opacity-pulsate;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:both;-moz-animation-name:opacity-pulsate;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-fill-mode:both;animation-name:opacity-pulsate;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both}.dt-leftbar-row__dnd{padding-top:var(--space-200);padding-right:var(--space-300);color:var(--fc-tertiary);font-size:var(--fs-100);line-height:var(--lh-400);font-weight:var(--fw-medium)}.dt-leftbar-row__description{display:block;font-weight:var(--leftbar-row-description-font-weight);font-size:var(--leftbar-row-description-font-size);line-height:var(--leftbar-row-description-line-height);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-leftbar-row__status{display:block;color:var(--leftbar-row-status-color-foreground);font-size:var(--leftbar-row-status-font-size);line-height:var(--leftbar-row-status-line-height);padding-bottom:var(--space-100);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dt-leftbar-row__meta-context~.dt-leftbar-row__meta-custom:not(:empty):before{content:" • ";color:var(--theme-sidebar-status-color)}.dt-leftbar-row__icon-cc{border-radius:var(--size-200);width:calc(var(--size-300) * 3.5);height:calc(var(--size-300) * 3.5)}.opacity-pulsate{-webkit-animation-name:opacity-pulsate;-webkit-animation-duration:1s;-webkit-animation-iteration-count:infinite;-webkit-animation-fill-mode:both;-moz-animation-name:opacity-pulsate;-moz-animation-duration:1s;-moz-animation-iteration-count:infinite;-moz-animation-fill-mode:both;animation-name:opacity-pulsate;animation-duration:1s;animation-iteration-count:infinite;animation-fill-mode:both}@-webkit-keyframes opacity-pulsate{0%,to{opacity:.2}50%{opacity:1}}@-moz-keyframes opacity-pulsate{0%,to{opacity:.2}50%{opacity:1}}@keyframes opacity-pulsate{0%,to{opacity:.2}50%{opacity:1}}@keyframes wave{0%,50%,to{transform:translate(0)}10%{transform:translateY(-5px);opacity:90%}}.dt-leftbar-unread-pill{display:flex;align-items:center;justify-content:center;padding:var(--space-200) var(--space-500) var(--space-200) var(--space-400);gap:var(--space-300);font-size:var(--fs-100);box-shadow:var(--bs-md);border-radius:var(--br-pill);border:none;line-height:var(--lh-600);cursor:pointer}.dt-leftbar-unread-pill--mentions{font-weight:var(--fw-bold);background-color:var(--theme-mention-color-background);color:var(--theme-mention-color-foreground)}.dt-leftbar-unread-pill--messages{background-color:var(--bgc-primary);color:var(--fc-primary)}content-text-wrapper-class:not(img){line-height:1.6rem}.feed-item-row{transition-duration:2s!important}.skeleton-placeholder{display:flex;stroke:none;fill:var(--placeholder-from-color, var(--black-300));background:var(--placeholder-from-color, var(--black-300))}.skeleton-placeholder--animate{animation-name:placeholder-throb;animation-iteration-count:infinite}@keyframes placeholder-throb{10%{fill:var(--placeholder-from-color, var(--black-300));background:var(--placeholder-from-color, var(--black-300))}50%{fill:var(--placeholder-to-color, var(--black-100));background:var(--placeholder-to-color, var(--black-100))}90%{fill:var(--placeholder-from-color, var(--black-300));background:var(--placeholder-from-color, var(--black-300))}}.ProseMirror p.is-editor-empty:first-child:before{content:attr(data-placeholder);float:left;color:var(--fc-placeholder);pointer-events:none;height:0}.dt-message-input--remaining-char{font-size:1.2rem}.message-input-button__disabled{background-color:unset;color:var(--theme-sidebar-icon-color);cursor:default}.tippy-box[data-popper-reference-hidden] .d-popover__dialog,.tippy-box[data-popper-escaped] .d-popover__dialog,.tippy-box[data-popper-reference-hidden] .d-tooltip,.tippy-box[data-popper-escaped] .d-tooltip{visibility:hidden;pointer-events:none}.d-emoji-picker__search[data-v-640002c1]{position:relative;z-index:1;margin:var(--su16) var(--su24) 0 var(--su16);background-color:#fff}.d-emoji-picker__search-button[data-v-640002c1]{border:none;background:none;cursor:pointer;margin:0;padding:0;outline:none;line-height:0}.d-emoji-picker__tabset-list{gap:4px}.d-emoji-picker__tabset-list:after{background-color:var(--black-200)!important}.d-emoji-picker__tabset-list button{padding:var(--space-400)}.d-emoji-picker__tabset-list button.d-tab--selected:after{height:var(--size-200)}.d-emoji-picker__selector[data-v-067b0cfe]{min-height:297px}.d-emoji-picker__selector p[data-v-067b0cfe]{margin-bottom:4px;font-size:12px;font-weight:700;letter-spacing:-.01em}.d-emoji-picker__category[data-v-067b0cfe]{background:rgba(255,255,255,.9);position:sticky;top:0;padding-top:20px;width:100%}.d-emoji-picker__list[data-v-067b0cfe]{height:100%;max-height:297px;overflow-y:auto;overflow-x:hidden;position:relative;padding-bottom:5px}.d-emoji-picker__list div:not(:first-child) p[data-v-067b0cfe]{margin-top:22px}.d-emoji-picker__search-label[data-v-067b0cfe]{margin-top:20px}.d-emoji-picker__tab[data-v-067b0cfe]{width:calc(100% + 15px);max-width:340px;gap:2px;display:flex;flex-wrap:wrap;margin-left:-6px}.d-emoji-picker__tab button[data-v-067b0cfe]{display:flex;align-items:center;justify-content:center;border-radius:50%;width:36px;height:36px;border:none;background:none;cursor:pointer;margin:0;padding:0;outline:none}.d-emoji-picker__tab button[data-v-067b0cfe]:hover,.d-emoji-picker__tab button[data-v-067b0cfe]:active,.d-emoji-picker__tab button.hover-emoji[data-v-067b0cfe]{background:rgba(0,0,0,.1)}.d-emoji-picker__tab button[data-v-067b0cfe]:focus{box-shadow:var(--bs-focus-ring)}.d-emoji-picker__skin-list[data-v-3a6fb9c2]{display:inline-flex;border-radius:40px;background:rgba(0,0,0,.05);flex-direction:row;align-items:flex-start;padding:4px;gap:4px}.d-emoji-picker__skin-list button[data-v-3a6fb9c2]{border:none;background:none;cursor:pointer;margin:0;padding:0;outline:none;border-radius:28px;width:34px;height:34px}.d-emoji-picker__skin-list button[data-v-3a6fb9c2]:hover{background:rgba(0,0,0,.1);border-radius:28px}.d-emoji-picker__skin-list button.selected[data-v-3a6fb9c2]{border:1px solid rgba(0,0,0,.25);border-radius:28px}.d-emoji-picker__skin-selected button[data-v-3a6fb9c2]{border:none;background:none;cursor:pointer;margin:0;outline:none;padding:7px;display:inline-block;background:rgba(0,0,0,.1);border-radius:28px;width:42px;height:42px}.d-emoji-picker__skin-selected button[data-v-3a6fb9c2]:hover{background:#D2D2D2}.d-emoji-picker__data[data-v-48c61881]{display:flex;width:100%;max-width:290px;align-items:center;gap:10px}.d-emoji-picker{width:372px;height:100%;flex-direction:column;border-radius:4px;background-color:#fff}.d-emoji-picker--header{padding:var(--su4) var(--su4) 0 var(--su8);position:relative}.d-emoji-picker--header:after{content:"";position:absolute;right:0;bottom:0;left:0;height:1px;background-color:var(--bgc-moderate)!important}.d-emoji-picker__alignment{width:auto;max-width:340px;margin:0 16px}.d-emoji-picker--footer{position:relative;height:58px;background:#F9F9F9;border-top:1px solid var(--bc-subtle);display:flex;align-items:center;justify-content:space-between;padding:0 16px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dialpad/dialtone-vue",
-  "version": "3.75.0",
+  "version": "3.75.2",
   "description": "Vue component library for Dialpad's design system Dialtone",
   "scripts": {
     "build": "npm run clean && npm run build:main && npm run build:documentation",

package/dist/emoji_picker-9f66b4e9.cjs

@@ -1 +0,0 @@
-"use strict";const e=require("vue"),y=require("./index-52006ddd.cjs");const J={class:"d-emoji-picker__search d-emoji-picker__alignment"},Q=["onKeydown"],W={__name:"emoji_search",props:{searchPlaceholderLabel:{type:String,required:!0},modelValue:{type:String,default:""}},emits:["update:modelValue","focus-emoji-selector","focus-tabset","select-first-emoji"],setup(r,{expose:p,emit:m}){const s=e.ref(null);function u(){m("update:modelValue",""),k()}function k(){s.value.focus()}return e.onMounted(()=>{k()}),p({focusSearchInput:k}),(g,b)=>(e.openBlock(),e.createElementBlock("div",J,[e.createVNode(y.DtInput,{id:"searchInput",ref_key:"searchInput",ref:s,placeholder:r.searchPlaceholderLabel,"model-value":r.modelValue,"onUpdate:modelValue":b[0]||(b[0]=f=>g.$emit("update:modelValue",f)),onKeydown:[b[1]||(b[1]=e.withKeys(f=>g.$emit("focus-tabset"),["up"])),b[2]||(b[2]=e.withKeys(e.withModifiers(f=>g.$emit("focus-emoji-selector"),["prevent"]),["down"])),b[3]||(b[3]=e.withKeys(f=>g.$emit("select-first-emoji"),["enter"]))]},e.createSlots({leftIcon:e.withCtx(()=>[e.createVNode(y.DtIcon,{name:"search"})]),_:2},[r.modelValue.length>0?{name:"rightIcon",fn:e.withCtx(()=>[e.createElementVNode("button",{class:"d-emoji-picker__search-button",onClick:u,onKeydown:e.withKeys(u,["enter"])},[e.createVNode(y.DtIcon,{name:"close"})],40,Q)]),key:"0"}:void 0]),1032,["placeholder","model-value"])]))}},X=y._export_sfc(W,[["__scopeId","data-v-640002c1"]]);const Y={class:"d-emoji-picker__tabset"},Z={__name:"emoji_tabset",props:{showRecentlyUsedTab:{type:Boolean,default:!1},scrollIntoTab:{type:Number,required:!0},isScrolling:{type:Boolean,default:!1},emojiFilter:{type:String,default:""},tabsetLabels:{type:Array,required:!0}},emits:["selected-tabset","focus-search-input"],setup(r,{expose:p,emit:m}){const s=r,u=[{label:"Recently used",icon:"clock"},{label:"Smiley’s and people",icon:"satisfied"},{label:"Nature",icon:"living-thing"},{label:"Food",icon:"food"},{label:"Activity",icon:"object"},{label:"Travel",icon:"transportation"},{label:"Objects",icon:"lightbulb"},{label:"Symbols",icon:"heart"},{label:"Flags",icon:"flag"}],k=e.computed(()=>(s.showRecentlyUsedTab?u:u.slice(1)).map((o,i)=>({...o,label:s.tabsetLabels[i],id:(i+1).toString(),panelId:(i+1).toString()}))),g=e.computed(()=>s.emojiFilter.length>0),b=e.ref("1"),{isScrolling:f}=e.toRefs(s),B=e.ref([]);e.watch(()=>s.scrollIntoTab,()=>{!f.value&&!g.value&&(b.value=(s.scrollIntoTab+1).toString())}),e.watch(g,()=>{g.value&&(b.value=null)});function E(t){f.value||(b.value=t),m("selected-tabset",t)}function d(t){B.value.push(t.$el)}function T(){B.value[0].focus()}function h(t,o){t.key==="Enter"&&(E(o),B.value[o-1].blur()),t.key==="Tab"&&(t.preventDefault(),m("focus-search-input")),t.key==="ArrowDown"&&m("focus-search-input")}return p({focusTabset:T}),(t,o)=>(e.openBlock(),e.createElementBlock("div",Y,[e.createVNode(y.DtTabGroup,{"tab-list-class":"d-emoji-picker__tabset-list",selected:b.value},{tabs:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(k),(i,S)=>(e.openBlock(),e.createBlock(y.DtTab,{id:i.id,ref_for:!0,ref:_=>{_&&d(_)},key:i.id,"panel-id":i.panelId,label:i.label,"aria-controls":"d-emoji-picker-list",tabindex:S+1,onClickCapture:e.withModifiers(_=>E(i.id),["stop"]),onKeydown:_=>h(_,i.id)},{default:e.withCtx(()=>[e.createVNode(y.DtIcon,{size:"400",name:i.icon},null,8,["name"])]),_:2},1032,["id","panel-id","label","tabindex","onClickCapture","onKeydown"]))),128))]),_:1},8,["selected"])]))}},F="https://static.dialpadcdn.com/joypixels/png/unicode/32/",$=9;function x(r){const p=e.ref([]),m=e.ref([]),s=e.ref(!1),u=e.ref(!0);function k(t,o=!1){u.value=o,r("highlighted-emoji",t)}function g(t,o,i){p.value[o]||(p.value[o]=[]),p.value[o][i]=t}function b(t,o){m.value[o]=t}function f(t,o){var S,_,N;const i=s.value?(S=m.value)==null?void 0:S[o]:(N=(_=p.value)==null?void 0:_[t])==null?void 0:N[o];return i?(i.focus(),!0):!1}function B(t,o){f(t,o-1)||(p.value[t-1]?f(t-1,p.value[t-1].length-1):f(p.value.length-1,p.value[p.value.length-1].length-1))}function E(t,o){f(t,o+1)||f(t+1,0)||f(0,0)}function d(t,o){f(0,o-1)||f(0,m.value.length-1)}function T(t,o){f(0,o+1)||f(0,0)}function h(t,o,i){s.value?t==="left"?d(o,i):t==="right"&&T(o,i):t==="left"?B(o,i):t==="right"&&E(o,i)}return{emojiRefs:p,emojiFilteredRefs:m,isFiltering:s,hoverFirstEmoji:u,setEmojiRef:g,setFilteredRef:b,hoverEmoji:k,focusEmoji:f,handleHorizontalNavigation:h}}const ee={class:"d-emoji-picker__selector"},te={key:0,class:"d-emoji-picker__search-label d-emoji-picker__alignment"},oe={key:0},le={class:"d-emoji-picker__tab"},ne=["aria-label","onClick","onFocusin","onMouseover","onKeydown"],se=["alt","aria-label","title","src"],ie={key:2,class:"d-emoji-picker__alignment"},re={class:"d-emoji-picker__tab","data-qa":"filtered-emojis"},ae=["aria-label","onClick","onFocusin","onMouseover","onKeydown"],ce=["alt","aria-label","title","src"],ue={__name:"emoji_selector",props:{emojiFilter:{type:String,default:""},skinTone:{type:String,required:!0},tabsetLabels:{type:Array,required:!0},selectedTabset:{type:Object,required:!0},searchResultsLabel:{type:String,required:!0},searchNoResultsLabel:{type:String,required:!0},recentlyUsedEmojis:{type:Array,default:()=>[]}},emits:["highlighted-emoji","selected-emoji","scroll-into-tab","is-scrolling","focus-skin-selector","focus-search-input"],setup(r,{expose:p,emit:m}){const s=r,{emojiRefs:u,emojiFilteredRefs:k,isFiltering:g,hoverFirstEmoji:b,setEmojiRef:f,setFilteredRef:B,hoverEmoji:E,focusEmoji:d,handleHorizontalNavigation:T}=x(m),h=e.ref(null),t=e.ref(null),o=e.ref(null),i=["Recently used","People","Nature","Food","Activity","Travel","Objects","Symbols","Flags"],S=e.computed(()=>s.recentlyUsedEmojis.length?s.tabsetLabels.map(l=>({label:l,ref:e.ref(null)})):s.tabsetLabels.slice(1).map(l=>({label:l,ref:e.ref(null)}))),_=e.ref(S.value[0].label),N=e.computed(()=>s.recentlyUsedEmojis.length?i:i.slice(1)),V=e.ref([]),I=e.computed(()=>[...y.emojisGrouped[`People${s.skinTone}`],...y.emojisGrouped.Nature,...y.emojisGrouped.Food,...y.emojisGrouped[`Activity${s.skinTone}`],...y.emojisGrouped.Travel,...y.emojisGrouped[`Objects${s.skinTone}`],...y.emojisGrouped.Symbols,...y.emojisGrouped.Flags]),A=K(()=>{k.value=[],D()});e.watch(I,()=>{D()},{immediate:!0}),e.watch(()=>s.recentlyUsedEmojis,()=>{y.emojisGrouped["Recently used"]=s.recentlyUsedEmojis},{immediate:!0}),e.watch(()=>s.emojiFilter,()=>{M(),s.emojiFilter?g.value=!0:(g.value=!1,m("highlighted-emoji",null)),A()}),e.watch(()=>s.selectedTabset,l=>{C(l.tabId)},{deep:!0});function D(){const l=s.emojiFilter.toLowerCase();V.value=I.value.filter(n=>{const c=n.name.toLowerCase().includes(l),v=n.keywords.some(a=>a.toLowerCase().includes(l));return c||v}),e.nextTick(()=>{l&&E(V.value[0],!0)})}function K(l,n=300){let c;return(...v)=>{clearTimeout(c),c=setTimeout(()=>l(...v),n)}}function q(l){return`${F+l}.png`}function U(l){l.target.parentNode.style.display="none"}function C(l,n=!0){const v=S.value[l-1].ref.value[0];e.nextTick(()=>{const a=t.value,w=l==="1"?0:v.offsetTop-20;let j=!0,L=a.scrollTop;m("is-scrolling",!0),a.addEventListener("scroll",()=>{if(j){const R=a.scrollTop;(L<R&&R>=w||L>R&&R<=w)&&(j=!1,m("is-scrolling",!1)),L=R}}),a.scrollTop=w,n&&d(l-1,0)})}function M(){const l=t.value;l.scrollTop=0}function G(){o.value=new IntersectionObserver(l=>{l.forEach(n=>{var a,w,j,L,R;const{target:c}=n,v=parseInt(c.dataset.index);n.isIntersecting&&c.offsetTop<=h.value.offsetTop+50?(_.value=((a=S.value[v-1])==null?void 0:a.label)??((w=S.value[0])==null?void 0:w.label),m("scroll-into-tab",v-1)):n.boundingClientRect.bottom<=((j=h.value)==null?void 0:j.getBoundingClientRect().bottom)?(m("scroll-into-tab",v),_.value=(L=S.value[v])==null?void 0:L.label):v===1&&(m("scroll-into-tab",v),_.value=(R=S.value[0])==null?void 0:R.label)})}),o.value.observe(h.value),Array.from(t.value.children).forEach((l,n)=>{o.value.observe(l),l.dataset.index=n})}const O=(l,n,c)=>{var v;if(l.preventDefault(),b.value=!1,l.key==="ArrowUp"){const a=n%$;if(!d(0,n-$)){const w=k.value.length-k.value.length%$+a;d(0,w),d(0,w)||d(0,k.value.length-1)}}if(l.key==="ArrowDown"&&!d(0,n+$)){const a=n%$;(v=k.value)!=null&&v[n+($-a)]?d(0,k.value.length-1):d(0,a)}l.key==="ArrowLeft"&&T("left",0,n),l.key==="ArrowRight"&&T("right",0,n),l.key==="Tab"&&m("focus-skin-selector"),l.key==="Enter"&&m("selected-emoji",c)},z=(l,n,c,v)=>{var a,w;if(l.preventDefault(),l.key==="ArrowUp"){const j=c%$;if(n===0){const L=$-u.value[u.value.length-1].length%$,R=u.value[u.value.length-1].length+L-($-j);d(u.value.length-1,R)||d(u.value.length-1,u.value[u.value.length-1].length-1);return}if(!d(n,c-$)){const L=n-1<0?0:n-1,R=u.value[L].length,H=R-R%$+j;d(L,H)||d(n-1,u.value[n-1].length-1)}}if(l.key==="ArrowDown"&&!d(n,c+$)){const j=c%$;(w=(a=u.value)==null?void 0:a[n])!=null&&w[c+($-j)]?d(n,u.value[n].length-1):d(n+1,j)||d(0,j)||d(0,u.value[0].length-1)}l.key==="ArrowLeft"&&T("left",n,c),l.key==="ArrowRight"&&T("right",n,c),l.key==="Tab"&&(d(n+1,0)?C(n+1+1,!1):m("focus-skin-selector")),l.key==="Tab"&&l.shiftKey&&(d(n,0)&&n>0?C(n,!0):(C(1,!1),m("focus-search-input"))),l.key==="Enter"&&m("selected-emoji",v)};function P(){d(0,0)}return e.onMounted(()=>{G()}),e.onUnmounted(()=>{o.value.disconnect()}),p({focusEmojiSelector:P}),(l,n)=>(e.openBlock(),e.createElementBlock("div",ee,[e.createElementVNode("div",{id:"d-emoji-picker-list",ref_key:"listRef",ref:t,class:"d-emoji-picker__list"},[r.emojiFilter?(e.openBlock(),e.createElementBlock("p",te,e.toDisplayString(V.value.length>0?r.searchResultsLabel:r.searchNoResultsLabel),1)):(e.openBlock(),e.createElementBlock("div",{key:1,ref_key:"tabCategoryRef",ref:h,class:"d-emoji-picker__category d-emoji-picker__alignment"},[e.createElementVNode("p",null,e.toDisplayString(_.value),1)],512)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(S),(c,v)=>e.withDirectives((e.openBlock(),e.createElementBlock("div",{key:v,ref_for:!0,ref:c.ref,class:"d-emoji-picker__alignment"},[v?(e.openBlock(),e.createElementBlock("p",oe,e.toDisplayString(c.label),1)):e.createCommentVNode("",!0),e.createElementVNode("div",le,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(y.emojisGrouped)[e.unref(N)[v]+r.skinTone]?e.unref(y.emojisGrouped)[e.unref(N)[v]+r.skinTone]:e.unref(y.emojisGrouped)[e.unref(N)[v]],(a,w)=>(e.openBlock(),e.createElementBlock("button",{key:a.shortname,ref_for:!0,ref:j=>{j&&e.unref(f)(j,v,w)},type:"button","aria-label":a.name,onClick:j=>l.$emit("selected-emoji",a),onFocusin:j=>l.$emit("highlighted-emoji",a),onFocusout:n[0]||(n[0]=j=>l.$emit("highlighted-emoji",null)),onMouseover:j=>l.$emit("highlighted-emoji",a),onMouseleave:n[1]||(n[1]=j=>l.$emit("highlighted-emoji",null)),onKeydown:j=>z(j,v,w,a)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:a.name,"aria-label":a.name,title:a.name,src:q(a.unicode_character),onError:U},null,40,se)],40,ne))),128))])])),[[e.vShow,!r.emojiFilter]])),128)),r.emojiFilter?(e.openBlock(),e.createElementBlock("div",ie,[e.createElementVNode("div",re,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(V.value,(c,v)=>(e.openBlock(),e.createElementBlock("button",{key:c.shortname,ref_for:!0,ref:a=>{a&&e.unref(B)(a,v)},type:"button","aria-label":c.name,class:e.normalizeClass({"hover-emoji":v===0&&e.unref(b)}),onClick:a=>l.$emit("selected-emoji",c),onFocusin:a=>l.$emit("highlighted-emoji",c),onFocusout:n[2]||(n[2]=a=>l.$emit("highlighted-emoji",null)),onMouseover:a=>e.unref(E)(c),onMouseleave:n[3]||(n[3]=a=>e.unref(E)(null)),onKeydown:a=>O(a,v,c)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:c.name,"aria-label":c.name,title:c.name,src:`${e.unref(F)+c.unicode_character}.png`},null,8,ce)],42,ae))),128))])])):e.createCommentVNode("",!0)],512)]))}},fe=y._export_sfc(ue,[["__scopeId","data-v-067b0cfe"]]);const de={"data-qa":"skin-selector"},me={class:"d-emoji-picker__skin-list"},ve=["onKeydown","onClick"],pe=["alt","aria-label","title","src"],he={class:"d-emoji-picker__skin-selected"},ke=["aria-label"],be=["alt","aria-label","title","src"],ge={__name:"emoji_skin_selector",props:{skinTone:{type:String,required:!0},isHovering:{type:Boolean,default:!1},skinSelectorButtonTooltipLabel:{type:String,required:!0}},emits:["skin-tone","focus-tabset"],setup(r,{expose:p,emit:m}){const s=r,u=[{name:":wave_tone1:",unicode_output:"1f44b-1f3fb",skinTone:"Light",skinCode:"_tone1"},{name:":wave_tone2:",unicode_output:"1f44b-1f3fc",skinTone:"MediumLight",skinCode:"_tone2"},{name:":wave_tone3:",unicode_output:"1f44b-1f3fd",skinTone:"Medium",skinCode:"_tone3"},{name:":wave_tone4:",unicode_output:"1f44b-1f3fe",skinTone:"MediumDark",skinCode:"_tone4"},{name:":wave_tone5:",unicode_output:"1f44b-1f3ff",skinTone:"Dark",skinCode:"_tone5"},{name:":wave:",unicode_output:"1f44b",skinTone:"Default",skinCode:""}],k=e.ref(u.find(t=>t.skinTone===s.skinTone)),g=e.ref(!1),b=e.ref(null),f=e.ref([]);e.watchEffect(()=>s.isHovering&&(g.value=!1));function B(t){f.value.push(t)}function E(){b.value.focus()}function d(t){k.value=t,g.value=!1,m("skin-tone",t.skinTone),e.nextTick(()=>E())}const T=(t,o,i)=>{var S,_,N;t.preventDefault(),t.key==="ArrowLeft"&&(i===0&&((S=f.value[f.value.length-1])==null||S.focus()),(_=f.value[i-1])==null||_.focus()),t.key==="ArrowRight"&&((N=f.value[i+1])==null||N.focus()),t.key==="Enter"&&(o?d(o):h()),t.key==="Tab"&&m("focus-tabset")};function h(){g.value=!g.value,e.nextTick(()=>f.value[0].focus())}return p({focusSkinSelector:E}),(t,o)=>(e.openBlock(),e.createElementBlock("div",de,[e.withDirectives(e.createElementVNode("div",me,[(e.openBlock(),e.createElementBlock(e.Fragment,null,e.renderList(u,(i,S)=>e.createElementVNode("button",{ref_for:!0,ref:_=>{_&&B(_)},key:i.name,class:e.normalizeClass({selected:k.value.skinCode===i.skinCode}),onKeydown:_=>T(_,i,S),onClick:_=>d(i)},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:i.name,"aria-label":i.name,title:i.name,src:`${e.unref(F)+i.unicode_output}.png`},null,8,pe)],42,ve)),64))],512),[[e.vShow,g.value]]),e.withDirectives(e.createElementVNode("div",he,[e.createVNode(y.DtTooltip,{placement:"top-end"},{anchor:e.withCtx(()=>[e.createElementVNode("button",{ref_key:"skinSelectorRef",ref:b,"aria-label":r.skinSelectorButtonTooltipLabel,tabindex:"-1",onClick:h,onKeydown:o[0]||(o[0]=i=>T(i))},[e.createElementVNode("img",{class:"d-icon d-icon--size-500",alt:k.value.name,"aria-label":k.value.name,title:k.value.name,src:`${e.unref(F)+k.value.unicode_output}.png`},null,8,be)],40,ke)]),default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(r.skinSelectorButtonTooltipLabel)+" ",1)]),_:1})],512),[[e.vShow,!g.value]])]))}},ye=y._export_sfc(ge,[["__scopeId","data-v-3a6fb9c2"]]);const _e={class:"d-emoji-picker__data"},je=["alt","aria-label","title","src"],Se={__name:"emoji_description",props:{emoji:{type:Object,default:null}},setup(r){return(p,m)=>{var s;return e.openBlock(),e.createElementBlock("div",_e,[r.emoji?(e.openBlock(),e.createElementBlock("img",{key:0,class:"d-icon d-icon--size-500",alt:r.emoji.name,"aria-label":r.emoji.name,title:r.emoji.name,src:`${e.unref(F)+r.emoji.unicode_character}.png`},null,8,je)):e.createCommentVNode("",!0),e.createTextVNode(" "+e.toDisplayString((s=r.emoji)==null?void 0:s.name),1)])}}},we=y._export_sfc(Se,[["__scopeId","data-v-48c61881"]]);const $e={class:"d-emoji-picker"},Ee={class:"d-emoji-picker--header"},Te={class:"d-emoji-picker--body"},Re={class:"d-emoji-picker--footer"},Be={__name:"emoji_picker",props:{recentlyUsedEmojis:{type:Array,default:()=>[]},searchPlaceholderLabel:{type:String,required:!0},searchResultsLabel:{type:String,required:!0},searchNoResultsLabel:{type:String,required:!0},tabSetLabels:{type:Array,required:!0},skinTone:{type:String,default:"Default"},skinSelectorButtonTooltipLabel:{type:String,required:!0}},emits:["selected-emoji","skin-tone","close"],setup(r,{emit:p}){const m=r,s=e.ref(""),u=e.ref(null),k=e.ref({}),g=e.ref(0),b=e.ref(!1),f=e.computed(()=>m.recentlyUsedEmojis.length>0);function B(h){s.value="",k.value=h,k.value={...k.value,tabId:h}}function E(h){g.value=h}function d(h){b.value=h}function T(h){u.value=h}return(h,t)=>(e.openBlock(),e.createElementBlock("div",$e,[e.createElementVNode("div",Ee,[e.createVNode(Z,{ref:"tabsetRef","emoji-filter":s.value,"show-recently-used-tab":e.unref(f),"scroll-into-tab":g.value,"tabset-labels":r.tabSetLabels,"is-scrolling":b.value,onFocusSearchInput:t[0]||(t[0]=o=>h.$refs.searchInputRef.focusSearchInput()),onSelectedTabset:B,onKeydown:t[1]||(t[1]=e.withKeys(o=>p("close"),["esc"]))},null,8,["emoji-filter","show-recently-used-tab","scroll-into-tab","tabset-labels","is-scrolling"])]),e.createElementVNode("div",Te,[e.createVNode(X,{ref:"searchInputRef",modelValue:s.value,"onUpdate:modelValue":t[2]||(t[2]=o=>s.value=o),"search-placeholder-label":r.searchPlaceholderLabel,onSelectFirstEmoji:t[3]||(t[3]=o=>p("selected-emoji",u.value)),onFocusTabset:t[4]||(t[4]=o=>h.$refs.tabsetRef.focusTabset()),onFocusEmojiSelector:t[5]||(t[5]=o=>h.$refs.emojiSelectorRef.focusEmojiSelector()),onKeydown:t[6]||(t[6]=e.withKeys(o=>p("close"),["esc"]))},null,8,["modelValue","search-placeholder-label"]),e.createVNode(fe,{ref:"emojiSelectorRef","emoji-filter":s.value,"skin-tone":r.skinTone,"tabset-labels":r.tabSetLabels,"search-results-label":r.searchResultsLabel,"search-no-results-label":r.searchNoResultsLabel,"recently-used-emojis":r.recentlyUsedEmojis,"selected-tabset":k.value,onScrollIntoTab:E,onIsScrolling:d,onHighlightedEmoji:T,onSelectedEmoji:t[7]||(t[7]=o=>p("selected-emoji",o)),onFocusSkinSelector:t[8]||(t[8]=o=>h.$refs.skinSelectorRef.focusSkinSelector()),onFocusSearchInput:t[9]||(t[9]=o=>h.$refs.searchInputRef.focusSearchInput()),onKeydown:t[10]||(t[10]=e.withKeys(o=>p("close"),["esc"]))},null,8,["emoji-filter","skin-tone","tabset-labels","search-results-label","search-no-results-label","recently-used-emojis","selected-tabset"])]),e.createElementVNode("div",Re,[e.createVNode(we,{emoji:u.value},null,8,["emoji"]),e.createVNode(ye,{ref:"skinSelectorRef","is-hovering":!!u.value,"skin-selector-button-tooltip-label":r.skinSelectorButtonTooltipLabel,"skin-tone":r.skinTone,onSkinTone:t[11]||(t[11]=o=>p("skin-tone",o)),onFocusTabset:t[12]||(t[12]=o=>h.$refs.tabsetRef.focusTabset()),onKeydown:t[13]||(t[13]=e.withKeys(o=>p("close"),["esc"]))},null,8,["is-hovering","skin-selector-button-tooltip-label","skin-tone"])])]))}};exports._sfc_main=Be;