@dialpad/dialtone/dist/vue3/lib/callbar-button-with-popover/callbar-button-with-popover.cjs

Dialpad's Dialtone design system monorepo

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("@dialpad/dialtone-icons/vue3"),n=require("../../common/utils/index.cjs"),u=require("../../localization/index.cjs"),t=require("vue"),p=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),h=require("../callbar-button/callbar-button-constants.cjs"),b=require("../button/button.cjs"),f=require("../popover/popover.cjs"),_=require("../callbar-button/callbar-button.cjs"),C={compatConfig:{MODE:3},name:"DtRecipeCallbarButtonWithPopover",components:{DtRecipeCallbarButton:_.default,DtPopover:f.default,DtButton:b.default,DtIconChevronUp:d.DtIconChevronUp},inheritAttrs:!1,props:{id:{type:String,default(){return n.default.getUniqueString()}},ariaLabel:{type:String,default:null,validator:e=>e||(void 0).$slots.default},placement:{type:String,default:"top"},offset:{type:Array,default:()=>[0,16]},initialFocusElement:{type:String,default:"first"},showCloseButton:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},forceShowArrow:{type:Boolean,default:!1},active:{type:Boolean,default:!1},danger:{type:Boolean,default:!1},onClick:{type:Function,default:null},buttonClass:{type:[String,Array,Object],default:""},textClass:{type:[String,Array,Object],default:""},buttonWidthSize:{type:String,default:"xl",validator:e=>h.CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(e)},contentClass:{type:[String,Array,Object],default:""},openPopover:{type:Boolean,default:!1},invertedTooltip:{type:Boolean,default:!1},showTooltip:{type:Boolean,default:null},tooltipText:{type:String,default:void 0},tooltipDelay:{type:Boolean,default:void 0}},emits:["arrow-click","click","opened"],data(){return{open:!1,i18n:new u.DialtoneLocalization}},computed:{showArrowButton(){return this.forceShowArrow||!this.disabled},isCompactMode(){return this.buttonWidthSize==="sm"||this.buttonWidthSize==="md"},showPopover(){return!this.openPopover||this.open?(this.syncOpenState(),!1):this.toggleOpen()},arrowButtonLabel(){return this.i18n.$t("DIALTONE_CALLBAR_BUTTON_WITH_POPOVER_ARROW_BUTTON_ARIA_LABEL")}},mounted(){n.warnIfUnmounted(n.returnFirstEl(this.$el),this.$options.name)},methods:{removeClassStyleAttrs:n.removeClassStyleAttrs,addClassStyleAttrs:n.addClassStyleAttrs,arrowClick(e){return this.$emit("arrow-click",e),this.toggleOpen()},toggleOpen(){return this.open=!this.open},syncOpenState(){this.open=this.openPopover},buttonClick(e){this.$props.onClick?this.$emit("click",e):this.arrowClick(e)},onModalIsOpened(e){this.open=e,this.$emit("opened",e)}}};function w(e,m,o,y,a,l){const r=t.resolveComponent("dt-recipe-callbar-button"),i=t.resolveComponent("dt-icon-chevron-up"),s=t.resolveComponent("dt-button"),c=t.resolveComponent("dt-popover");return t.openBlock(),t.createElementBlock("div",t.mergeProps({class:"d-recipe-callbar-button-with-popover"},l.addClassStyleAttrs(e.$attrs)),[t.createVNode(r,{"aria-label":o.ariaLabel,disabled:o.disabled,active:o.active,danger:o.danger,"button-class":o.buttonClass,"button-width-size":o.buttonWidthSize,"text-class":o.textClass,"inverted-tooltip":o.invertedTooltip,"show-tooltip":o.showTooltip,"tooltip-text":o.tooltipText,"tooltip-delay":o.tooltipDelay,class:"d-recipe-callbar-button-with-popover--main-button",onClick:l.buttonClick},{icon:t.withCtx(()=>[t.renderSlot(e.$slots,"icon")]),tooltip:t.withCtx(()=>[t.renderSlot(e.$slots,"tooltip")]),default:t.withCtx(()=>[t.renderSlot(e.$slots,"default")]),_:3},8,["aria-label","disabled","active","danger","button-class","button-width-size","text-class","inverted-tooltip","show-tooltip","tooltip-text","tooltip-delay","onClick"]),l.showArrowButton?(t.openBlock(),t.createBlock(c,t.mergeProps({key:0,id:o.id,modal:!1,open:a.open,placement:o.placement,"initial-focus-element":o.initialFocusElement,"show-close-button":o.showCloseButton,offset:o.offset,padding:"none",class:"d-recipe-callbar-button-with-popover__popover-wrapper","dialog-class":["d-recipe-callbar-button-with-popover__popover",o.contentClass]},l.removeClassStyleAttrs(e.$attrs),{"open-popover":l.showPopover,onOpened:l.onModalIsOpened}),{anchor:t.withCtx(()=>[t.createVNode(s,{active:a.open,class:t.normalizeClass(["d-recipe-callbar-button-with-popover__arrow",{"d-recipe-callbar-button-with-popover__arrow--large":!l.isCompactMode}]),circle:!0,importance:"clear",size:"lg","aria-label":l.arrowButtonLabel,title:l.arrowButtonLabel,width:"2rem",onClick:l.arrowClick},{icon:t.withCtx(()=>[t.createVNode(i,{class:"d-recipe-callbar-button-with-popover__arrow-icon",size:"200"})]),_:1},8,["active","class","aria-label","title","onClick"])]),content:t.withCtx(()=>[t.renderSlot(e.$slots,"content")]),headerContent:t.withCtx(()=>[t.renderSlot(e.$slots,"headerContent")]),footerContent:t.withCtx(()=>[t.renderSlot(e.$slots,"footerContent")]),_:3},16,["id","open","placement","initial-focus-element","show-close-button","offset","dialog-class","open-popover","onOpened"])):t.createCommentVNode("",!0)],16)}const v=p._(C,[["render",w]]);exports.default=v;
//# sourceMappingURL=callbar-button-with-popover.cjs.map