@dialpad/dialtone/dist/vue3/lib/collapsible/collapsible.cjs

Dialpad's Dialtone design system monorepo

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(`../button/button.cjs`),r=require(`./collapsible-lazy-show.cjs`),i=require(`../lazy-show/lazy-show.cjs`);let a=require(`vue`),o=require(`@dialpad/dialtone-icons/vue3`);var s={compatConfig:{MODE:3},name:`DtCollapsible`,components:{DtButton:n.default,DtCollapsibleLazyShow:r.default,DtLazyShow:i.default,DtIconChevronDown:o.DtIconChevronDown,DtIconChevronRight:o.DtIconChevronRight},props:{anchorText:{type:String,default:null},open:{type:Boolean,default:null},id:{type:String,default(){return e.getUniqueString()}},elementType:{type:String,default:`div`},contentElementType:{type:String,default:`div`},anchorClass:{type:[String,Array,Object],default:null},contentClass:{type:[String,Array,Object],default:null},maxWidth:{type:String,default:null},maxHeight:{type:String,default:null},ariaLabel:{type:String,default:null},ariaLabelledBy:{type:String,default:null}},emits:[`update:open`,`opened`],data(){return{isOpen:!0}},computed:{labelledBy(){return this.ariaLabelledBy||!this.ariaLabel&&e.getUniqueString(`DtCollapsible__anchor`)},collapsibleListeners(){return e.extractVueListeners(this.$attrs)}},watch:{open:{handler:function(e){e!==null&&(this.isOpen=e)},immediate:!0}},created(){this.validateProperAnchor()},beforeUnmount(){this._isUnmounting=!0},methods:{onLeaveTransitionComplete(){this._isUnmounting||(this.$emit(`opened`,!1),this.open!==null&&this.$emit(`update:open`,!1))},onEnterTransitionComplete(){this._isUnmounting||(this.$emit(`opened`,!0,this.$refs.content),this.open!==null&&this.$emit(`update:open`,!0))},defaultToggleOpen(){this.open===null&&this.toggleOpen()},toggleOpen(){this.isOpen=!this.isOpen},validateProperAnchor(){!this.anchorText&&!e.hasSlotContent(this.$slots.anchor)&&console.error(`anchor text and anchor slot content cannot both be falsy`)}}},c=[`id`],l=[`title`];function u(e,t,n,r,i,o){let s=(0,a.resolveComponent)(`dt-icon-chevron-down`),u=(0,a.resolveComponent)(`dt-icon-chevron-right`),d=(0,a.resolveComponent)(`dt-button`),f=(0,a.resolveComponent)(`dt-collapsible-lazy-show`);return(0,a.openBlock)(),(0,a.createBlock)((0,a.resolveDynamicComponent)(n.elementType),(0,a.mergeProps)({ref:`collapsible`},(0,a.toHandlers)(o.collapsibleListeners)),{default:(0,a.withCtx)(()=>[(0,a.createElementVNode)(`div`,{id:!n.ariaLabelledBy&&o.labelledBy,ref:`anchor`,class:(0,a.normalizeClass)(n.anchorClass)},[(0,a.renderSlot)(e.$slots,`anchor`,{attrs:{"aria-controls":n.id,"aria-expanded":i.isOpen.toString(),role:`button`}},()=>[(0,a.createVNode)(d,{importance:`clear`,kind:`muted`,"aria-controls":n.id,"aria-expanded":`${i.isOpen}`,style:(0,a.normalizeStyle)({width:n.maxWidth}),onClick:o.defaultToggleOpen},{default:(0,a.withCtx)(()=>[i.isOpen?((0,a.openBlock)(),(0,a.createBlock)(s,{key:0,class:`d-collapsible__icon`,size:`300`})):((0,a.openBlock)(),(0,a.createBlock)(u,{key:1,class:`d-collapsible__icon`,size:`300`})),(0,a.createElementVNode)(`span`,{class:`d-collapsible__anchor-text`,title:n.anchorText},(0,a.toDisplayString)(n.anchorText),9,l)]),_:1},8,[`aria-controls`,`aria-expanded`,`style`,`onClick`])])],10,c),(0,a.createVNode)(f,(0,a.mergeProps)({id:n.id,ref:`contentWrapper`,"aria-hidden":`${!i.isOpen}`,"aria-labelledby":o.labelledBy,"aria-label":n.ariaLabel,show:i.isOpen,"element-type":n.contentElementType,class:n.contentClass,style:{"max-height":n.maxHeight,"max-width":n.maxWidth},"data-qa":`dt-collapsible--content`,tabindex:`-1`,appear:``},(0,a.toHandlers)(o.collapsibleListeners),{onAfterLeave:o.onLeaveTransitionComplete,onAfterEnter:o.onEnterTransitionComplete}),{default:(0,a.withCtx)(()=>[(0,a.renderSlot)(e.$slots,`content`)]),_:3},16,[`id`,`aria-hidden`,`aria-labelledby`,`aria-label`,`show`,`element-type`,`class`,`style`,`onAfterLeave`,`onAfterEnter`])]),_:3},16)}var d=t.t(s,[[`render`,u]]);exports.default=d;
//# sourceMappingURL=collapsible.cjs.map