UNPKG

@dialpad/dialtone

Version:

Dialpad's Dialtone design system monorepo

3 lines (2 loc) 3.64 kB
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./feed-item-pill-constants.cjs"),d=require("@dialpad/dialtone-icons/vue3"),u=require("../../localization/index.cjs"),e=require("vue"),p=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),_=require("../collapsible/collapsible.cjs"),m=require("../item-layout/item-layout.cjs"),f={compatConfig:{MODE:3},name:"DtRecipeFeedItemPill",components:{DtItemLayout:m.default,DtCollapsible:_.default},props:{title:{type:String,default:()=>""},wrapperClass:{type:[String,Array,Object],default:""},buttonClass:{type:[String,Array,Object],default:""},toggleable:{type:Boolean,default:()=>!0},defaultToggled:{type:Boolean,default:()=>!1},borderColor:{type:String,default:"default",validator:t=>Object.keys(s.FEED_ITEM_PILL_BORDER_COLORS).includes(t)}},data(){return{hover:!1,expanded:this.defaultToggled,i18n:new u.DialtoneLocalization}},computed:{toggleIcon(){return this.expanded?d.DtIconChevronDown:d.DtIconChevronRight},showChevronIcon(){return this.toggleable&&this.hover},toggleableClass(){return this.toggleable?"d-recipe-feed-item-pill--toggleable":""},borderClass(){return s.FEED_ITEM_PILL_BORDER_COLORS[this.borderColor]},anchorTitle(){return this.i18n.$t("DIALTONE_FEED_ITEM_PILL_ARIA_LABEL")}},methods:{onClick(){this.toggleable&&(this.expanded=!this.expanded)}}},b={class:"d-recipe-feed-item-pill__wrapper"},h=["aria-label","title"],g={class:"d-recipe-feed-item-pill__title"},C={class:"d-recipe-feed-item-pill__icon","data-qa":"dt-recipe-feed-item-pill__icon"},v={class:"d-recipe-feed-item-pill__subtitle"},y={class:"d-recipe-feed-item-pill__bottom"},E={class:"d-recipe-feed-item-pill__right"},I={class:"d-recipe-feed-item-pill__content"};function S(t,l,r,k,i,o){const a=e.resolveComponent("dt-item-layout"),c=e.resolveComponent("dt-collapsible");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["d-recipe-feed-item-pill__border",o.borderClass,r.wrapperClass])},[e.createElementVNode("div",b,[e.createVNode(c,{open:i.expanded},e.createSlots({anchor:e.withCtx(()=>[e.createElementVNode("button",{"data-qa":"dt-recipe-feed-item-pill",class:e.normalizeClass(["d-recipe-feed-item-pill__button",o.toggleableClass,r.buttonClass]),"aria-label":o.anchorTitle,title:o.anchorTitle,onFocusin:l[0]||(l[0]=n=>i.hover=!0),onFocusout:l[1]||(l[1]=n=>i.hover=!1),onMouseenter:l[2]||(l[2]=n=>i.hover=!0),onMouseleave:l[3]||(l[3]=n=>i.hover=!1),onClick:l[4]||(l[4]=(...n)=>o.onClick&&o.onClick(...n))},[e.createVNode(a,{class:"d-recipe-feed-item-pill__layout",unstyled:""},e.createSlots({left:e.withCtx(()=>[e.createElementVNode("div",C,[o.showChevronIcon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.toggleIcon),{key:0,size:"300"})):e.renderSlot(t.$slots,"leftIcon",{key:1,iconSize:"300"})])]),default:e.withCtx(()=>[e.renderSlot(t.$slots,"title",{},()=>[e.createElementVNode("span",g,e.toDisplayString(r.title),1)])]),_:2},[t.$slots.subtitle?{name:"subtitle",fn:e.withCtx(()=>[e.createElementVNode("div",v,[e.renderSlot(t.$slots,"subtitle")])]),key:"0"}:void 0,t.$slots.bottom?{name:"bottom",fn:e.withCtx(()=>[e.createElementVNode("div",y,[e.renderSlot(t.$slots,"bottom")])]),key:"1"}:void 0,t.$slots.right?{name:"right",fn:e.withCtx(()=>[e.createElementVNode("div",E,[e.renderSlot(t.$slots,"right")])]),key:"2"}:void 0]),1024)],42,h)]),_:2},[t.$slots.content?{name:"content",fn:e.withCtx(()=>[e.createElementVNode("div",I,[e.renderSlot(t.$slots,"content")])]),key:"0"}:void 0]),1032,["open"])])],2)}const D=p._(f,[["render",S]]);exports.default=D; //# sourceMappingURL=feed-item-pill.cjs.map