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

Vue component library for Dialpad's design system Dialtone

Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../localization/index.cjs`),r=require(`../button/button.cjs`),i=require(`../popover/popover.cjs`),a=require(`../callbar-button/callbar-button-constants.cjs`),o=require(`../callbar-button/callbar-button.cjs`);let s=require(`vue`),c=require(`@dialpad/dialtone-icons/vue3`);var l={compatConfig:{MODE:3},name:`DtRecipeCallbarButtonWithPopover`,components:{DtRecipeCallbarButton:o.default,DtPopover:i.default,DtButton:r.default,DtIconChevronUp:c.DtIconChevronUp},inheritAttrs:!1,props:{id:{type:String,default(){return e.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=>a.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 n.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(){e.warnIfUnmounted(e.returnFirstEl(this.$el),this.$options.name)},methods:{removeClassStyleAttrs:e.removeClassStyleAttrs,addClassStyleAttrs:e.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 u(e,t,n,r,i,a){let o=(0,s.resolveComponent)(`dt-recipe-callbar-button`),c=(0,s.resolveComponent)(`dt-icon-chevron-up`),l=(0,s.resolveComponent)(`dt-button`),u=(0,s.resolveComponent)(`dt-popover`);return(0,s.openBlock)(),(0,s.createElementBlock)(`div`,(0,s.mergeProps)({class:`d-recipe-callbar-button-with-popover`},a.addClassStyleAttrs(e.$attrs)),[(0,s.createVNode)(o,{"aria-label":n.ariaLabel,disabled:n.disabled,active:n.active,danger:n.danger,"button-class":n.buttonClass,"button-width-size":n.buttonWidthSize,"text-class":n.textClass,"inverted-tooltip":n.invertedTooltip,"show-tooltip":n.showTooltip,"tooltip-text":n.tooltipText,"tooltip-delay":n.tooltipDelay,class:`d-recipe-callbar-button-with-popover--main-button`,onClick:a.buttonClick},{icon:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`icon`)]),tooltip:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`tooltip`)]),default:(0,s.withCtx)(()=>[(0,s.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`]),a.showArrowButton?((0,s.openBlock)(),(0,s.createBlock)(u,(0,s.mergeProps)({key:0,id:n.id,modal:!1,open:i.open,placement:n.placement,"initial-focus-element":n.initialFocusElement,"show-close-button":n.showCloseButton,offset:n.offset,padding:`none`,class:`d-recipe-callbar-button-with-popover__popover-wrapper`,"dialog-class":[`d-recipe-callbar-button-with-popover__popover`,n.contentClass]},a.removeClassStyleAttrs(e.$attrs),{"open-popover":a.showPopover,onOpened:a.onModalIsOpened}),{anchor:(0,s.withCtx)(()=>[(0,s.createVNode)(l,{active:i.open,class:(0,s.normalizeClass)([`d-recipe-callbar-button-with-popover__arrow`,{"d-recipe-callbar-button-with-popover__arrow--large":!a.isCompactMode}]),circle:!0,importance:`clear`,size:`lg`,"aria-label":a.arrowButtonLabel,title:a.arrowButtonLabel,width:`2rem`,onClick:a.arrowClick},{icon:(0,s.withCtx)(()=>[(0,s.createVNode)(c,{class:`d-recipe-callbar-button-with-popover__arrow-icon`,size:`200`})]),_:1},8,[`active`,`class`,`aria-label`,`title`,`onClick`])]),content:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`content`)]),headerContent:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`headerContent`)]),footerContent:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`footerContent`)]),_:3},16,[`id`,`open`,`placement`,`initial-focus-element`,`show-close-button`,`offset`,`dialog-class`,`open-popover`,`onOpened`])):(0,s.createCommentVNode)(``,!0)],16)}var d=t.t(l,[[`render`,u]]);exports.default=d;
//# sourceMappingURL=callbar-button-with-popover.cjs.map