@dialpad/dialtone/dist/vue3/lib/chip/chip.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"),i=require("./chip-constants.cjs"),a=require("../../common/utils/index.cjs"),u=require("../../localization/index.cjs"),e=require("vue"),h=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),_=require("../button/button.cjs"),C={compatConfig:{MODE:3},name:"DtChip",components:{DtButton:_.default,DtIconClose:d.DtIconClose},props:{hideClose:{type:Boolean,default:!1},size:{type:String,default:"md",validator:t=>Object.keys(i.CHIP_SIZE_MODIFIERS).includes(t)},interactive:{type:Boolean,default:!0},id:{type:String,default:function(){return a.getUniqueString()}},ariaLabel:{type:String,default:""},contentClass:{type:[String,Array,Object],default:""},labelClass:{type:[String,Array,Object],default:""}},emits:["click","close","keyup"],data(){return{isActive:!1,hasSlotContent:a.hasSlotContent,i18n:new u.DialtoneLocalization}},computed:{chipListeners(){return{click:t=>{this.interactive&&this.$emit("click",t)},keyup:t=>{var n;((n=t.code)==null?void 0:n.toLowerCase())==="delete"?this.onClose():this.$emit("keyup",t)}}},closeButtonIconSize(){return i.CHIP_ICON_SIZES[this.size]},closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},methods:{chipClasses(){return[this.$attrs["grouped-chip"]?"d-chip":"d-chip__label",i.CHIP_SIZE_MODIFIERS[this.size],this.labelClass]},chipCloseButtonClasses(){return["d-chip__close",i.CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size]]},onClose(){this.hideClose||this.$emit("close")}}},p={class:"d-chip"},m={key:0,class:"d-chip__icon","data-qa":"dt-chip-icon"},b={key:1,"data-qa":"dt-chip-avatar"},S=["id"];function f(t,n,o,B,s,l){const c=e.resolveComponent("dt-icon-close"),r=e.resolveComponent("dt-button");return e.openBlock(),e.createElementBlock("span",p,[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.interactive?"button":"span"),e.mergeProps({id:o.id,"aria-label":o.ariaLabel,"aria-labelledby":o.ariaLabel?void 0:`${o.id}-content`,class:l.chipClasses(),type:o.interactive&&"button","data-qa":"dt-chip"},e.toHandlers(l.chipListeners)),{default:e.withCtx(()=>[s.hasSlotContent(t.$slots.icon)?(e.openBlock(),e.createElementBlock("span",m,[e.renderSlot(t.$slots,"icon")])):s.hasSlotContent(t.$slots.avatar)?(e.openBlock(),e.createElementBlock("span",b,[e.renderSlot(t.$slots,"avatar")])):e.createCommentVNode("",!0),s.hasSlotContent(t.$slots.default)?(e.openBlock(),e.createElementBlock("span",{key:2,id:`${o.id}-content`,class:e.normalizeClass(["d-chip__text",o.contentClass]),"data-qa":"dt-chip-label"},[e.renderSlot(t.$slots,"default")],10,S)):e.createCommentVNode("",!0)]),_:3},16,["id","aria-label","aria-labelledby","class","type"])),o.hideClose?e.createCommentVNode("",!0):(e.openBlock(),e.createBlock(r,{key:0,class:e.normalizeClass(l.chipCloseButtonClasses()),"data-qa":"dt-chip-close","aria-label":l.closeButtonTitle,title:l.closeButtonTitle,onClick:n[0]||(n[0]=y=>t.$emit("close"))},{icon:e.withCtx(()=>[e.createVNode(c,{size:l.closeButtonIconSize},null,8,["size"])]),_:1},8,["class","aria-label","title"]))])}const k=h._(C,[["render",f]]);exports.default=k;
//# sourceMappingURL=chip.cjs.map