@dialpad/dialtone-vue 3.219.0 → 3.220.0-next.2

package/dist/lib/button/button-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-constants.js","names":[],"sources":["../../../components/button/button_constants.js"],"sourcesContent":["export const BUTTON_UNSTYLED_CLASS = 'd-btn--unstyled';\n\nexport const BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  danger: 'd-btn--danger',\n  positive: 'd-btn--positive',\n  inverted: 'd-btn--inverted',\n  unstyled: 'd-btn--unstyled',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  outlined: 'd-btn--outlined',\n  primary: 'd-btn--primary',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'danger',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  BUTTON_UNSTYLED_CLASS,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n"],"mappings":";AAAA,IAAa,IAAwB,mBAExB,IAAwB;CACnC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAwB;CACnC,SAAS;CACT,OAAO;CACP,QAAQ;CACR,UAAU;CACV,UAAU;CACV,UAAU;CACX,EAEY,IAA8B;CACzC,OAAO;CACP,UAAU;CACV,SAAS;CACV,EAEY,IAAe;CAAC;CAAU;CAAS;CAAS,EAE5C,IAA0B;CACrC,MAAM;CACN,OAAO;CACP,KAAK;CACL,QAAQ;CACT,EAEY,IAAsB;CACjC;EACE,QAAQ;EACR,MAAM;EACN,YAAY;EACZ,SAAS,EAA2B,IAAM,WAAW,UAAU;EAChE;CACD;EACE,QAAQ;EACR,MAAM;EACN,YAAY;EACZ,SAAS,EAA2B,IAAM,UAAU,WAAW;EAChE;CACD;EACE,QAAQ;EACR,MAAM;EACN,YAAY;EACZ,SAAS,EAA2B,IAAM,SAAS,UAAU;EAC9D;CACD;EACE,QAAQ;EACR,MAAM;EACN,YAAY;EACZ,SAAS,EAA2B,IAAO,SAAS,UAAU;EAC/D;CACF,EAEY,IAAoB;CAC/B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,SAAS,EAA4B,GAAQ,GAAM,GAAY;AAC7D,QAAO,qBAAqB,IAAS,YAAY,GAAG;aACzC,EAAK,mBAAmB,EAAW;;;;;AAMhD,IAAA,IAAe;CACb;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}
+{"version":3,"file":"button-constants.js","names":[],"sources":["../../../components/button/button_constants.js"],"sourcesContent":["export const BUTTON_UNSTYLED_CLASS = 'd-btn--unstyled';\n\nexport const BUTTON_SIZE_MODIFIERS = {\n  // Numeric (preferred)\n  100: 'd-btn--xs',\n  200: 'd-btn--sm',\n  300: '',\n  400: 'd-btn--lg',\n  500: 'd-btn--xl',\n  // T-shirt aliases (deprecated)\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  critical: 'd-btn--critical',\n  positive: 'd-btn--positive',\n  inverted: 'd-btn--inverted',\n  unstyled: 'd-btn--unstyled',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  outlined: 'd-btn--outlined',\n  primary: 'd-btn--primary',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  start: 'd-btn__icon--left',\n  end: 'd-btn__icon--right',\n  blockStart: 'd-btn__icon--top',\n  blockEnd: 'd-btn__icon--bottom',\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'critical',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'critical', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  // Numeric (preferred)\n  100: '200',\n  200: '200',\n  300: '300',\n  400: '400',\n  500: '500',\n  // T-shirt aliases (deprecated)\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  BUTTON_UNSTYLED_CLASS,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n"],"mappings":";AAAA,IAAa,IAAwB,mBAExB,IAAwB;CAEnC,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CAEL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAwB;CACnC,SAAS;CACT,OAAO;CACP,UAAU;CACV,UAAU;CACV,UAAU;CACV,UAAU;CACX,EAEY,IAA8B;CACzC,OAAO;CACP,UAAU;CACV,SAAS;CACV,EAEY,IAAe;CAAC;CAAU;CAAS;CAAS,EAE5C,IAA0B;CACrC,OAAO;CACP,KAAK;CACL,YAAY;CACZ,UAAU;CACV,MAAM;CACN,OAAO;CACP,KAAK;CACL,QAAQ;CACT,EAEY,IAAsB;CACjC;EACE,QAAQ;EACR,MAAM;EACN,YAAY;EACZ,SAAS,EAA2B,IAAM,WAAW,UAAU;EAChE;CACD;EACE,QAAQ;EACR,MAAM;EACN,YAAY;EACZ,SAAS,EAA2B,IAAM,YAAY,WAAW;EAClE;CACD;EACE,QAAQ;EACR,MAAM;EACN,YAAY;EACZ,SAAS,EAA2B,IAAM,SAAS,UAAU;EAC9D;CACD;EACE,QAAQ;EACR,MAAM;EACN,YAAY;EACZ,SAAS,EAA2B,IAAO,SAAS,UAAU;EAC/D;CACF,EAEY,IAAoB;CAE/B,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CAEL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL;AAED,SAAS,EAA4B,GAAQ,GAAM,GAAY;AAC7D,QAAO,qBAAqB,IAAS,YAAY,GAAG;aACzC,EAAK,mBAAmB,EAAW;;;;;AAMhD,IAAA,IAAe;CACb;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}

package/dist/lib/button/button.cjs

@@ -1,2 +1,2 @@
-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(`../loader/loader.cjs`),r=require(`./button-constants.cjs`),i=require(`../link/link-constants.cjs`),a=require(`../../localization/index.cjs`);let o=require(`vue`);var s={compatConfig:{MODE:3},name:`DtButton`,components:{DtLoader:n.default},props:{circle:{type:Boolean,default:!1},iconPosition:{type:String,default:`left`,validator:e=>Object.keys(r.ICON_POSITION_MODIFIERS).includes(e)},importance:{type:String,default:`primary`,validator:e=>Object.keys(r.BUTTON_IMPORTANCE_MODIFIERS).includes(e)},link:{type:Boolean,default:!1},linkKind:{type:String,default:`default`,validator:e=>Object.keys(i.LINK_KIND_MODIFIERS).includes(e)},linkInverted:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},type:{type:String,default:`button`,validator:e=>r.BUTTON_TYPES.includes(e)},width:{type:String,default:null},size:{type:String,default:`md`,validator:e=>Object.keys(r.BUTTON_SIZE_MODIFIERS).includes(e)},labelClass:{type:[String,Array,Object],default:``},loading:{type:Boolean,default:!1},kind:{type:String,default:`default`,validator:e=>Object.keys(r.BUTTON_KIND_MODIFIERS).includes(e)},assertiveOnFocus:{type:Boolean,default:!1},active:{type:Boolean,default:!1},to:{type:[String,Object],default:null},href:{type:String,default:null},target:{type:String,default:null},rel:{type:String,default:null},replace:{type:Boolean,default:!1}},emits:[`focusin`,`focusout`],data(){return{ICON_POSITION_MODIFIERS:r.ICON_POSITION_MODIFIERS,isInFocus:!1,hasSlotContent:e.hasSlotContent,i18n:new a.DialtoneLocalization}},computed:{computedTag(){return this.to?this.resolveRouterLink():this.href?`a`:`button`},isNativeButton(){return!this.to&&!this.href},computedAttrs(){return this.to?{to:this.to,replace:this.replace,...this.disabled&&{"aria-disabled":`true`,tabindex:`-1`}}:this.href?{href:this.disabled?null:this.href,target:this.target,rel:this.rel,...this.disabled&&{"aria-disabled":`true`,tabindex:`-1`}}:{type:this.type,disabled:this.disabled}},computedListeners(){let e={focusin:e=>{this.isInFocus=this.assertiveOnFocus,this.$emit(`focusin`,e)},focusout:e=>{this.isInFocus=!1,this.$emit(`focusout`,e)}};return this.isNativeButton||(this.disabled&&(e.click=e=>{e.preventDefault(),e.stopImmediatePropagation()}),e.keydown=e=>{(e.key===` `||e.code===`Space`)&&(e.preventDefault(),this.disabled||e.target.click())}),e},computedAriaLive(){return this.assertiveOnFocus&&this.isInFocus?`assertive`:this.$attrs.ariaLive},iconSize(){return r.BUTTON_ICON_SIZES[this.size]},loaderSize(){return r.BUTTON_ICON_SIZES[this.size]}},watch:{$props:{deep:!0,immediate:!0,handler(){process.env.NODE_ENV!==`production`&&(this.circle&&this.link&&(0,o.warn)(`You cannot enable circle and link at the same time`,this),this.isInvalidPropCombination(this.circle,this.kind,this.importance))}}},methods:{resolveRouterLink(){try{return(0,o.resolveComponent)(`RouterLink`)}catch{return(0,o.warn)(`DtButton: "to" prop requires vue-router. Falling back to <a>.`),`a`}},buttonClasses(){return this.link?[`d-link`,i.getLinkKindModifier(this.linkKind,this.linkInverted),r.BUTTON_SIZE_MODIFIERS[this.size]]:this.kind===`unstyled`?[`d-btn--unstyled`]:[`d-btn`,r.BUTTON_IMPORTANCE_MODIFIERS[this.importance],r.BUTTON_KIND_MODIFIERS[this.kind],r.BUTTON_SIZE_MODIFIERS[this.size],{"d-btn--circle":this.circle,"d-btn--loading":this.loading,"d-btn--icon-only":this.isIconOnly(),"d-btn--vertical":this.isVerticalIconLayout(),"d-btn--active":this.active}]},isInvalidPropCombination(e,t,n){if(this.kind===`unstyled`)return!0;for(let i of r.INVALID_COMBINATION)if(e===i.circle&&t===i.kind&&n===i.importance)return(0,o.warn)(i.message),!1;return!0},shouldRenderIcon(){return e.hasSlotContent(this.$slots.icon)&&!this.link},isIconOnly(){return this.shouldRenderIcon()&&!e.hasSlotContent(this.$slots.default)},isVerticalIconLayout(){return!this.isIconOnly()&&[`top`,`bottom`].includes(this.iconPosition)}}};function c(e,t,n,r,i,a){let s=(0,o.resolveComponent)(`dt-loader`);return(0,o.openBlock)(),(0,o.createBlock)((0,o.resolveDynamicComponent)(a.computedTag),(0,o.mergeProps)({class:[`base-button__button`,a.buttonClasses()],"data-qa":`dt-button`,style:{width:n.width},"aria-live":a.computedAriaLive,"aria-label":n.loading?i.i18n.$t(`DIALTONE_LOADING`):e.$attrs[`aria-label`]},a.computedAttrs,(0,o.toHandlers)(a.computedListeners)),{default:(0,o.withCtx)(()=>[n.loading&&n.kind!==`unstyled`?((0,o.openBlock)(),(0,o.createBlock)(s,{key:0,class:`d-btn__loader`,size:a.loaderSize,"aria-hidden":`true`},null,8,[`size`])):(0,o.createCommentVNode)(``,!0),a.shouldRenderIcon()?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:1,"data-qa":`dt-button-icon`,class:(0,o.normalizeClass)([`base-button__icon`,{"d-btn__icon":n.kind!==`unstyled`,[i.ICON_POSITION_MODIFIERS[n.iconPosition]]:n.kind!==`unstyled`}])},[(0,o.renderSlot)(e.$slots,`icon`,{iconSize:a.iconSize})],2)):(0,o.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.default)?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:2,"data-qa":`dt-button-label`,class:(0,o.normalizeClass)([`base-button__label`,{"d-btn__label":n.kind!==`unstyled`},n.labelClass])},[(0,o.renderSlot)(e.$slots,`default`)],2)):(0,o.createCommentVNode)(``,!0)]),_:3},16,[`class`,`style`,`aria-live`,`aria-label`])}var l=t.t(s,[[`render`,c]]);exports.default=l;
+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(`../loader/loader.cjs`),r=require(`./button-constants.cjs`),i=require(`../link/link-constants.cjs`),a=require(`../../localization/index.cjs`);let o=require(`vue`);var s={compatConfig:{MODE:3},name:`DtButton`,components:{DtLoader:n.default},props:{circle:{type:Boolean,default:!1},iconPosition:{type:String,default:`start`,validator:e=>Object.keys(r.ICON_POSITION_MODIFIERS).includes(e)},importance:{type:String,default:`primary`,validator:e=>Object.keys(r.BUTTON_IMPORTANCE_MODIFIERS).includes(e)},link:{type:Boolean,default:!1},linkKind:{type:String,default:`default`,validator:e=>Object.keys(i.LINK_KIND_MODIFIERS).includes(e)},linkInverted:{type:Boolean,default:!1},linkUnderline:{type:Boolean,default:!0},underline:{type:Boolean,default:null},disabled:{type:Boolean,default:!1},type:{type:String,default:`button`,validator:e=>r.BUTTON_TYPES.includes(e)},width:{type:String,default:null},size:{type:[String,Number],default:300,validator:e=>Object.keys(r.BUTTON_SIZE_MODIFIERS).includes(String(e))},labelClass:{type:[String,Array,Object],default:``},leadingClass:{type:[String,Array,Object],default:``},trailingClass:{type:[String,Array,Object],default:``},loading:{type:Boolean,default:!1},kind:{type:String,default:`default`,validator:e=>Object.keys(r.BUTTON_KIND_MODIFIERS).includes(e)},assertiveOnFocus:{type:Boolean,default:!1},active:{type:Boolean,default:!1},to:{type:[String,Object],default:null},href:{type:String,default:null},target:{type:String,default:null},rel:{type:String,default:null},replace:{type:Boolean,default:!1}},emits:[`focusin`,`focusout`],data(){return{ICON_POSITION_MODIFIERS:r.ICON_POSITION_MODIFIERS,isInFocus:!1,hasSlotContent:e.hasSlotContent,i18n:new a.DialtoneLocalization}},computed:{resolvedUnderline(){return this.underline??this.linkUnderline},computedTag(){return this.to?this.resolveRouterLink():this.href?`a`:`button`},isNativeButton(){return!this.to&&!this.href},computedAttrs(){return this.to?{to:this.to,replace:this.replace,...this.disabled&&{"aria-disabled":`true`,tabindex:`-1`}}:this.href?{href:this.disabled?null:this.href,target:this.target,rel:this.rel,...this.disabled&&{"aria-disabled":`true`,tabindex:`-1`}}:{type:this.type,disabled:this.disabled}},computedListeners(){let e={focusin:e=>{this.isInFocus=this.assertiveOnFocus,this.$emit(`focusin`,e)},focusout:e=>{this.isInFocus=!1,this.$emit(`focusout`,e)}};return this.isNativeButton||(this.disabled&&(e.click=e=>{e.preventDefault(),e.stopImmediatePropagation()}),e.keydown=e=>{(e.key===` `||e.code===`Space`)&&(e.preventDefault(),this.disabled||e.target.click())}),e},computedAriaLive(){return this.assertiveOnFocus&&this.isInFocus?`assertive`:this.$attrs.ariaLive},iconSize(){return r.BUTTON_ICON_SIZES[String(this.size)]},loaderSize(){return r.BUTTON_ICON_SIZES[String(this.size)]}},watch:{$props:{deep:!0,immediate:!0,handler(){process.env.NODE_ENV!==`production`&&(this.circle&&this.link&&(0,o.warn)(`You cannot enable circle and link at the same time`,this),this.isInvalidPropCombination(this.circle,this.kind,this.importance))}}},methods:{resolveRouterLink(){try{return(0,o.resolveComponent)(`RouterLink`)}catch{return(0,o.warn)(`DtButton: "to" prop requires vue-router. Falling back to <a>.`),`a`}},buttonClasses(){return this.link?[`d-link`,i.getLinkKindModifier(this.linkKind,this.linkInverted),r.BUTTON_SIZE_MODIFIERS[String(this.size)],{"d-link--no-underline":!this.resolvedUnderline}]:this.kind===`unstyled`?[`d-btn--unstyled`]:[`d-btn`,r.BUTTON_IMPORTANCE_MODIFIERS[this.importance],r.BUTTON_KIND_MODIFIERS[this.kind],r.BUTTON_SIZE_MODIFIERS[String(this.size)],{"d-btn--circle":this.circle,"d-btn--loading":this.loading,"d-btn--icon-only":this.isIconOnly(),"d-btn--vertical":this.isVerticalIconLayout(),"d-btn--active":this.active}]},isInvalidPropCombination(e,t,n){if(this.kind===`unstyled`)return!0;for(let i of r.INVALID_COMBINATION)if(e===i.circle&&t===i.kind&&n===i.importance)return(0,o.warn)(i.message),!1;return!0},hasStartIcon(){return e.hasSlotContent(this.$slots.startIcon)},hasEndIcon(){return e.hasSlotContent(this.$slots.endIcon)},hasBlockStartIcon(){return e.hasSlotContent(this.$slots.blockStartIcon)},hasBlockEndIcon(){return e.hasSlotContent(this.$slots.blockEndIcon)},hasNewIconSlots(){return this.hasStartIcon()||this.hasEndIcon()||this.hasBlockStartIcon()||this.hasBlockEndIcon()},shouldRenderLegacyIcon(){return e.hasSlotContent(this.$slots.icon)&&!this.hasNewIconSlots()&&!this.link},isIconOnly(){return(this.hasNewIconSlots()||this.shouldRenderLegacyIcon())&&!e.hasSlotContent(this.$slots.default)},isVerticalIconLayout(){return this.isIconOnly()?!1:this.hasBlockStartIcon()||this.hasBlockEndIcon()?!0:!this.hasNewIconSlots()&&[`top`,`bottom`].includes(this.iconPosition)}}};function c(e,t,n,r,i,a){let s=(0,o.resolveComponent)(`dt-loader`);return(0,o.openBlock)(),(0,o.createBlock)((0,o.resolveDynamicComponent)(a.computedTag),(0,o.mergeProps)({class:[`base-button__button`,a.buttonClasses()],"data-qa":`dt-button`,style:{width:n.width},"aria-live":a.computedAriaLive,"aria-label":n.loading?i.i18n.$t(`DIALTONE_LOADING`):e.$attrs[`aria-label`]},a.computedAttrs,(0,o.toHandlers)(a.computedListeners)),{default:(0,o.withCtx)(()=>[n.loading&&n.kind!==`unstyled`?((0,o.openBlock)(),(0,o.createBlock)(s,{key:0,class:`d-btn__loader`,size:a.loaderSize,"aria-hidden":`true`},null,8,[`size`])):(0,o.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.leading)?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:1,class:(0,o.normalizeClass)([`d-btn__leading`,n.leadingClass])},[(0,o.renderSlot)(e.$slots,`leading`)],2)):(0,o.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.blockStartIcon)?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:2,"data-qa":`dt-button-block-start-icon`,class:(0,o.normalizeClass)([`base-button__icon`,{"d-btn__icon":n.kind!==`unstyled`,"d-btn__icon--top":n.kind!==`unstyled`}])},[(0,o.renderSlot)(e.$slots,`blockStartIcon`,{iconSize:a.iconSize})],2)):(0,o.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.startIcon)?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:3,"data-qa":`dt-button-start-icon`,class:(0,o.normalizeClass)([`base-button__icon`,{"d-btn__icon":n.kind!==`unstyled`,"d-btn__icon--left":n.kind!==`unstyled`}])},[(0,o.renderSlot)(e.$slots,`startIcon`,{iconSize:a.iconSize})],2)):(0,o.createCommentVNode)(``,!0),a.shouldRenderLegacyIcon()?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:4,"data-qa":`dt-button-icon`,class:(0,o.normalizeClass)([`base-button__icon`,{"d-btn__icon":n.kind!==`unstyled`,[i.ICON_POSITION_MODIFIERS[n.iconPosition]]:n.kind!==`unstyled`}])},[(0,o.renderSlot)(e.$slots,`icon`,{iconSize:a.iconSize})],2)):(0,o.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.default)?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:5,"data-qa":`dt-button-label`,class:(0,o.normalizeClass)([`base-button__label`,{"d-btn__label":n.kind!==`unstyled`},n.labelClass])},[(0,o.renderSlot)(e.$slots,`default`)],2)):(0,o.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.endIcon)?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:6,"data-qa":`dt-button-end-icon`,class:(0,o.normalizeClass)([`base-button__icon`,{"d-btn__icon":n.kind!==`unstyled`,"d-btn__icon--right":n.kind!==`unstyled`}])},[(0,o.renderSlot)(e.$slots,`endIcon`,{iconSize:a.iconSize})],2)):(0,o.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.blockEndIcon)?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:7,"data-qa":`dt-button-block-end-icon`,class:(0,o.normalizeClass)([`base-button__icon`,{"d-btn__icon":n.kind!==`unstyled`,"d-btn__icon--bottom":n.kind!==`unstyled`}])},[(0,o.renderSlot)(e.$slots,`blockEndIcon`,{iconSize:a.iconSize})],2)):(0,o.createCommentVNode)(``,!0),i.hasSlotContent(e.$slots.trailing)?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:8,class:(0,o.normalizeClass)([`d-btn__trailing`,n.trailingClass])},[(0,o.renderSlot)(e.$slots,`trailing`)],2)):(0,o.createCommentVNode)(``,!0)]),_:3},16,[`class`,`style`,`aria-live`,`aria-label`])}var l=t.t(s,[[`render`,c]]);exports.default=l;
 //# sourceMappingURL=button.cjs.map

package/dist/lib/button/button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button.cjs","names":[],"sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"computedTag\"\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? i18n.$t('DIALTONE_LOADING') : $attrs['aria-label']\"\n    v-bind=\"computedAttrs\"\n    v-on=\"computedListeners\"\n  >\n    <dt-loader\n      v-if=\"loading && kind !== 'unstyled'\"\n      class=\"d-btn__loader\"\n      :size=\"loaderSize\"\n      aria-hidden=\"true\"\n    />\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          [ICON_POSITION_MODIFIERS[iconPosition]]: kind !== 'unstyled',\n        },\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"[\n        'base-button__label',\n        { 'd-btn__label': kind !== 'unstyled' },\n        labelClass,\n      ]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </component>\n</template>\n\n<script>\nimport { warn, resolveComponent } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\nimport DtLoader from '@/components/loader/loader.vue';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButton',\n\n  components: { DtLoader },\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\" target=\"_blank\">(Reference)</a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">CSS width attribute</a> values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, unstyled, muted, danger, positive, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * vue-router `to` prop. When provided, renders a `<router-link>`\n     * for client-side SPA navigation.\n     * @see https://router.vuejs.org/api/interfaces/RouterLinkProps.html#to\n     */\n    to: {\n      type: [String, Object],\n      default: null,\n    },\n\n    /**\n     * When provided, renders an `<a>` element for standard browser navigation.\n     */\n    href: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor target attribute. Only applied when using the `href` prop.\n     * @values _self, _blank, _parent, _top\n     */\n    target: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor rel attribute. Only applied when using the `href` prop.\n     */\n    rel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * vue-router `replace` prop. When true, navigation will not leave a\n     * history entry. Only applied when using the `to` prop.\n     * @values true, false\n     */\n    replace: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    computedTag () {\n      if (this.to) return this.resolveRouterLink();\n      if (this.href) return 'a';\n      return 'button';\n    },\n\n    isNativeButton () {\n      return !this.to && !this.href;\n    },\n\n    computedAttrs () {\n      if (this.to) {\n        return {\n          to: this.to,\n          replace: this.replace,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      if (this.href) {\n        return {\n          href: this.disabled ? null : this.href,\n          target: this.target,\n          rel: this.rel,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      return {\n        type: this.type,\n        disabled: this.disabled,\n      };\n    },\n\n    computedListeners () {\n      const listeners = {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n\n      if (!this.isNativeButton) {\n        // Prevent click when disabled for link elements.\n        // stopImmediatePropagation prevents parent onClick attrs from firing.\n        if (this.disabled) {\n          listeners.click = (e) => {\n            e.preventDefault();\n            e.stopImmediatePropagation();\n          };\n        }\n\n        // Space key handler: <a> only responds to Enter natively,\n        // but buttons respond to both Enter and Space.\n        listeners.keydown = (e) => {\n          if (e.key === ' ' || e.code === 'Space') {\n            e.preventDefault();\n            if (!this.disabled) {\n              e.target.click();\n            }\n          }\n        };\n      }\n\n      return listeners;\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n\n    loaderSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    resolveRouterLink () {\n      try {\n        return resolveComponent('RouterLink');\n      } catch {\n        warn('DtButton: \"to\" prop requires vue-router. Falling back to <a>.');\n        return 'a';\n      }\n    },\n\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      if (this.kind === 'unstyled') {\n        return ['d-btn--unstyled'];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      // Skip validation if unstyled is true\n      if (this.kind === 'unstyled') {\n        return true;\n      }\n\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"button.cjs","names":[],"sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"computedTag\"\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? i18n.$t('DIALTONE_LOADING') : $attrs['aria-label']\"\n    v-bind=\"computedAttrs\"\n    v-on=\"computedListeners\"\n  >\n    <dt-loader\n      v-if=\"loading && kind !== 'unstyled'\"\n      class=\"d-btn__loader\"\n      :size=\"loaderSize\"\n      aria-hidden=\"true\"\n    />\n    <span\n      v-if=\"hasSlotContent($slots.leading)\"\n      :class=\"['d-btn__leading', leadingClass]\"\n    >\n      <!-- @slot Optional leading content at the start of the button, such as badges or indicators -->\n      <slot name=\"leading\" />\n    </span>\n    <!-- NEW: Block-start icon slot (above label) -->\n    <span\n      v-if=\"hasSlotContent($slots.blockStartIcon)\"\n      data-qa=\"dt-button-block-start-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--top': kind !== 'unstyled',\n        },\n      ]\"\n    >\n      <!-- @slot Icon displayed above the button label (block-start) -->\n      <slot\n        name=\"blockStartIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NEW: Start icon slot -->\n    <span\n      v-if=\"hasSlotContent($slots.startIcon)\"\n      data-qa=\"dt-button-start-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--left': kind !== 'unstyled',\n        },\n      ]\"\n    >\n      <!-- @slot Icon displayed at the start (left in LTR) of the button -->\n      <slot\n        name=\"startIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderLegacyIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          [ICON_POSITION_MODIFIERS[iconPosition]]: kind !== 'unstyled',\n        },\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"[\n        'base-button__label',\n        { 'd-btn__label': kind !== 'unstyled' },\n        labelClass,\n      ]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n    <!-- NEW: End icon slot -->\n    <span\n      v-if=\"hasSlotContent($slots.endIcon)\"\n      data-qa=\"dt-button-end-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--right': kind !== 'unstyled',\n        },\n      ]\"\n    >\n      <!-- @slot Icon displayed at the end (right in LTR) of the button -->\n      <slot\n        name=\"endIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NEW: Block-end icon slot (below label) -->\n    <span\n      v-if=\"hasSlotContent($slots.blockEndIcon)\"\n      data-qa=\"dt-button-block-end-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--bottom': kind !== 'unstyled',\n        },\n      ]\"\n    >\n      <!-- @slot Icon displayed below the button label (block-end) -->\n      <slot\n        name=\"blockEndIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.trailing)\"\n      :class=\"['d-btn__trailing', trailingClass]\"\n    >\n      <!-- @slot Optional trailing content at the end of the button, such as badges or indicators -->\n      <slot name=\"trailing\" />\n    </span>\n  </component>\n</template>\n\n<script>\nimport { warn, resolveComponent } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\nimport DtLoader from '@/components/loader/loader.vue';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButton',\n\n  components: { DtLoader },\n\n  props: {\n    /**\n     * Whether the button is a circle or not. Use only with icon-only buttons.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @deprecated Use startIcon / endIcon / blockStartIcon / blockEndIcon slots instead.\n     * @values start, end, blockStart, blockEnd, left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'start',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, critical, warning, positive, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     * @deprecated Use v-dt-mode instead.\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the link-styled button should display an underline.\n     * Only applies when the link prop is true.\n     * @values true, false\n     */\n    linkUnderline: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * @deprecated Use linkUnderline instead.\n     * @values true, false\n     */\n    underline: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\" target=\"_blank\">(Reference)</a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">CSS width attribute</a> values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(String(s)),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the leading container\n     */\n    leadingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the trailing container\n     */\n    trailingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, unstyled, muted, critical, positive\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * vue-router `to` prop. When provided, renders a `<router-link>`\n     * for client-side SPA navigation.\n     * @see https://router.vuejs.org/api/interfaces/RouterLinkProps.html#to\n     */\n    to: {\n      type: [String, Object],\n      default: null,\n    },\n\n    /**\n     * When provided, renders an `<a>` element for standard browser navigation.\n     */\n    href: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor target attribute. Only applied when using the `href` prop.\n     * @values _self, _blank, _parent, _top\n     */\n    target: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor rel attribute. Only applied when using the `href` prop.\n     */\n    rel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * vue-router `replace` prop. When true, navigation will not leave a\n     * history entry. Only applied when using the `to` prop.\n     * @values true, false\n     */\n    replace: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    resolvedUnderline () {\n      return this.underline ?? this.linkUnderline;\n    },\n\n    computedTag () {\n      if (this.to) return this.resolveRouterLink();\n      if (this.href) return 'a';\n      return 'button';\n    },\n\n    isNativeButton () {\n      return !this.to && !this.href;\n    },\n\n    computedAttrs () {\n      if (this.to) {\n        return {\n          to: this.to,\n          replace: this.replace,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      if (this.href) {\n        return {\n          href: this.disabled ? null : this.href,\n          target: this.target,\n          rel: this.rel,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      return {\n        type: this.type,\n        disabled: this.disabled,\n      };\n    },\n\n    computedListeners () {\n      const listeners = {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n\n      if (!this.isNativeButton) {\n        // Prevent click when disabled for link elements.\n        // stopImmediatePropagation prevents parent onClick attrs from firing.\n        if (this.disabled) {\n          listeners.click = (e) => {\n            e.preventDefault();\n            e.stopImmediatePropagation();\n          };\n        }\n\n        // Space key handler: <a> only responds to Enter natively,\n        // but buttons respond to both Enter and Space.\n        listeners.keydown = (e) => {\n          if (e.key === ' ' || e.code === 'Space') {\n            e.preventDefault();\n            if (!this.disabled) {\n              e.target.click();\n            }\n          }\n        };\n      }\n\n      return listeners;\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[String(this.size)];\n    },\n\n    loaderSize () {\n      return BUTTON_ICON_SIZES[String(this.size)];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    resolveRouterLink () {\n      try {\n        return resolveComponent('RouterLink');\n      } catch {\n        warn('DtButton: \"to\" prop requires vue-router. Falling back to <a>.');\n        return 'a';\n      }\n    },\n\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[String(this.size)],\n          { 'd-link--no-underline': !this.resolvedUnderline },\n        ];\n      }\n      if (this.kind === 'unstyled') {\n        return ['d-btn--unstyled'];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[String(this.size)],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      // Skip validation if unstyled is true\n      if (this.kind === 'unstyled') {\n        return true;\n      }\n\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    hasStartIcon () {\n      return hasSlotContent(this.$slots.startIcon);\n    },\n\n    hasEndIcon () {\n      return hasSlotContent(this.$slots.endIcon);\n    },\n\n    hasBlockStartIcon () {\n      return hasSlotContent(this.$slots.blockStartIcon);\n    },\n\n    hasBlockEndIcon () {\n      return hasSlotContent(this.$slots.blockEndIcon);\n    },\n\n    hasNewIconSlots () {\n      return this.hasStartIcon() || this.hasEndIcon() || this.hasBlockStartIcon() || this.hasBlockEndIcon();\n    },\n\n    shouldRenderLegacyIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.hasNewIconSlots() && !this.link;\n    },\n\n    isIconOnly () {\n      return (this.hasNewIconSlots() || this.shouldRenderLegacyIcon()) && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      if (this.isIconOnly()) return false;\n      if (this.hasBlockStartIcon() || this.hasBlockEndIcon()) return true;\n      return !this.hasNewIconSlots() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/button/button.js

@@ -17,7 +17,7 @@ var T = {
 		},
 		iconPosition: {
 			type: String,
-			default: "left",
+			default: "start",
 			validator: (e) => Object.keys(c).includes(e)
 		},
 		importance: {
@@ -38,6 +38,14 @@ var T = {
 			type: Boolean,
 			default: !1
 		},
+		linkUnderline: {
+			type: Boolean,
+			default: !0
+		},
+		underline: {
+			type: Boolean,
+			default: null
+		},
 		disabled: {
 			type: Boolean,
 			default: !1
@@ -52,9 +60,9 @@ var T = {
 			default: null
 		},
 		size: {
-			type: String,
-			default: "md",
-			validator: (e) => Object.keys(o).includes(e)
+			type: [String, Number],
+			default: 300,
+			validator: (e) => Object.keys(o).includes(String(e))
 		},
 		labelClass: {
 			type: [
@@ -64,6 +72,22 @@ var T = {
 			],
 			default: ""
 		},
+		leadingClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: ""
+		},
+		trailingClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: ""
+		},
 		loading: {
 			type: Boolean,
 			default: !1
@@ -112,6 +136,9 @@ var T = {
 		};
 	},
 	computed: {
+		resolvedUnderline() {
+			return this.underline ?? this.linkUnderline;
+		},
 		computedTag() {
 			return this.to ? this.resolveRouterLink() : this.href ? "a" : "button";
 		},
@@ -158,10 +185,10 @@ var T = {
 			return this.assertiveOnFocus && this.isInFocus ? "assertive" : this.$attrs.ariaLive;
 		},
 		iconSize() {
-			return r[this.size];
+			return r[String(this.size)];
 		},
 		loaderSize() {
-			return r[this.size];
+			return r[String(this.size)];
 		}
 	},
 	watch: { $props: {
@@ -183,12 +210,13 @@ var T = {
 			return this.link ? [
 				"d-link",
 				d(this.linkKind, this.linkInverted),
-				o[this.size]
+				o[String(this.size)],
+				{ "d-link--no-underline": !this.resolvedUnderline }
 			] : this.kind === "unstyled" ? ["d-btn--unstyled"] : [
 				"d-btn",
 				i[this.importance],
 				a[this.kind],
-				o[this.size],
+				o[String(this.size)],
 				{
 					"d-btn--circle": this.circle,
 					"d-btn--loading": this.loading,
@@ -203,14 +231,29 @@ var T = {
 			for (let r of l) if (e === r.circle && t === r.kind && n === r.importance) return C(r.message), !1;
 			return !0;
 		},
-		shouldRenderIcon() {
-			return e(this.$slots.icon) && !this.link;
+		hasStartIcon() {
+			return e(this.$slots.startIcon);
+		},
+		hasEndIcon() {
+			return e(this.$slots.endIcon);
+		},
+		hasBlockStartIcon() {
+			return e(this.$slots.blockStartIcon);
+		},
+		hasBlockEndIcon() {
+			return e(this.$slots.blockEndIcon);
+		},
+		hasNewIconSlots() {
+			return this.hasStartIcon() || this.hasEndIcon() || this.hasBlockStartIcon() || this.hasBlockEndIcon();
+		},
+		shouldRenderLegacyIcon() {
+			return e(this.$slots.icon) && !this.hasNewIconSlots() && !this.link;
 		},
 		isIconOnly() {
-			return this.shouldRenderIcon() && !e(this.$slots.default);
+			return (this.hasNewIconSlots() || this.shouldRenderLegacyIcon()) && !e(this.$slots.default);
 		},
 		isVerticalIconLayout() {
-			return !this.isIconOnly() && ["top", "bottom"].includes(this.iconPosition);
+			return this.isIconOnly() ? !1 : this.hasBlockStartIcon() || this.hasBlockEndIcon() ? !0 : !this.hasNewIconSlots() && ["top", "bottom"].includes(this.iconPosition);
 		}
 	}
 };
@@ -230,8 +273,28 @@ function E(e, t, n, r, i, a) {
 				size: a.loaderSize,
 				"aria-hidden": "true"
 			}, null, 8, ["size"])) : m("", !0),
-			a.shouldRenderIcon() ? (v(), h("span", {
+			i.hasSlotContent(e.$slots.leading) ? (v(), h("span", {
 				key: 1,
+				class: _(["d-btn__leading", n.leadingClass])
+			}, [y(e.$slots, "leading")], 2)) : m("", !0),
+			i.hasSlotContent(e.$slots.blockStartIcon) ? (v(), h("span", {
+				key: 2,
+				"data-qa": "dt-button-block-start-icon",
+				class: _(["base-button__icon", {
+					"d-btn__icon": n.kind !== "unstyled",
+					"d-btn__icon--top": n.kind !== "unstyled"
+				}])
+			}, [y(e.$slots, "blockStartIcon", { iconSize: a.iconSize })], 2)) : m("", !0),
+			i.hasSlotContent(e.$slots.startIcon) ? (v(), h("span", {
+				key: 3,
+				"data-qa": "dt-button-start-icon",
+				class: _(["base-button__icon", {
+					"d-btn__icon": n.kind !== "unstyled",
+					"d-btn__icon--left": n.kind !== "unstyled"
+				}])
+			}, [y(e.$slots, "startIcon", { iconSize: a.iconSize })], 2)) : m("", !0),
+			a.shouldRenderLegacyIcon() ? (v(), h("span", {
+				key: 4,
 				"data-qa": "dt-button-icon",
 				class: _(["base-button__icon", {
 					"d-btn__icon": n.kind !== "unstyled",
@@ -239,14 +302,34 @@ function E(e, t, n, r, i, a) {
 				}])
 			}, [y(e.$slots, "icon", { iconSize: a.iconSize })], 2)) : m("", !0),
 			i.hasSlotContent(e.$slots.default) ? (v(), h("span", {
-				key: 2,
+				key: 5,
 				"data-qa": "dt-button-label",
 				class: _([
 					"base-button__label",
 					{ "d-btn__label": n.kind !== "unstyled" },
 					n.labelClass
 				])
-			}, [y(e.$slots, "default")], 2)) : m("", !0)
+			}, [y(e.$slots, "default")], 2)) : m("", !0),
+			i.hasSlotContent(e.$slots.endIcon) ? (v(), h("span", {
+				key: 6,
+				"data-qa": "dt-button-end-icon",
+				class: _(["base-button__icon", {
+					"d-btn__icon": n.kind !== "unstyled",
+					"d-btn__icon--right": n.kind !== "unstyled"
+				}])
+			}, [y(e.$slots, "endIcon", { iconSize: a.iconSize })], 2)) : m("", !0),
+			i.hasSlotContent(e.$slots.blockEndIcon) ? (v(), h("span", {
+				key: 7,
+				"data-qa": "dt-button-block-end-icon",
+				class: _(["base-button__icon", {
+					"d-btn__icon": n.kind !== "unstyled",
+					"d-btn__icon--bottom": n.kind !== "unstyled"
+				}])
+			}, [y(e.$slots, "blockEndIcon", { iconSize: a.iconSize })], 2)) : m("", !0),
+			i.hasSlotContent(e.$slots.trailing) ? (v(), h("span", {
+				key: 8,
+				class: _(["d-btn__trailing", n.trailingClass])
+			}, [y(e.$slots, "trailing")], 2)) : m("", !0)
 		]),
 		_: 3
 	}, 16, [

package/dist/lib/button/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"computedTag\"\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? i18n.$t('DIALTONE_LOADING') : $attrs['aria-label']\"\n    v-bind=\"computedAttrs\"\n    v-on=\"computedListeners\"\n  >\n    <dt-loader\n      v-if=\"loading && kind !== 'unstyled'\"\n      class=\"d-btn__loader\"\n      :size=\"loaderSize\"\n      aria-hidden=\"true\"\n    />\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          [ICON_POSITION_MODIFIERS[iconPosition]]: kind !== 'unstyled',\n        },\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"[\n        'base-button__label',\n        { 'd-btn__label': kind !== 'unstyled' },\n        labelClass,\n      ]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n  </component>\n</template>\n\n<script>\nimport { warn, resolveComponent } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\nimport DtLoader from '@/components/loader/loader.vue';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButton',\n\n  components: { DtLoader },\n\n  props: {\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @values left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'left',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, warning, danger, success, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\" target=\"_blank\">(Reference)</a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">CSS width attribute</a> values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, unstyled, muted, danger, positive, inverted\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * vue-router `to` prop. When provided, renders a `<router-link>`\n     * for client-side SPA navigation.\n     * @see https://router.vuejs.org/api/interfaces/RouterLinkProps.html#to\n     */\n    to: {\n      type: [String, Object],\n      default: null,\n    },\n\n    /**\n     * When provided, renders an `<a>` element for standard browser navigation.\n     */\n    href: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor target attribute. Only applied when using the `href` prop.\n     * @values _self, _blank, _parent, _top\n     */\n    target: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor rel attribute. Only applied when using the `href` prop.\n     */\n    rel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * vue-router `replace` prop. When true, navigation will not leave a\n     * history entry. Only applied when using the `to` prop.\n     * @values true, false\n     */\n    replace: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    computedTag () {\n      if (this.to) return this.resolveRouterLink();\n      if (this.href) return 'a';\n      return 'button';\n    },\n\n    isNativeButton () {\n      return !this.to && !this.href;\n    },\n\n    computedAttrs () {\n      if (this.to) {\n        return {\n          to: this.to,\n          replace: this.replace,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      if (this.href) {\n        return {\n          href: this.disabled ? null : this.href,\n          target: this.target,\n          rel: this.rel,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      return {\n        type: this.type,\n        disabled: this.disabled,\n      };\n    },\n\n    computedListeners () {\n      const listeners = {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n\n      if (!this.isNativeButton) {\n        // Prevent click when disabled for link elements.\n        // stopImmediatePropagation prevents parent onClick attrs from firing.\n        if (this.disabled) {\n          listeners.click = (e) => {\n            e.preventDefault();\n            e.stopImmediatePropagation();\n          };\n        }\n\n        // Space key handler: <a> only responds to Enter natively,\n        // but buttons respond to both Enter and Space.\n        listeners.keydown = (e) => {\n          if (e.key === ' ' || e.code === 'Space') {\n            e.preventDefault();\n            if (!this.disabled) {\n              e.target.click();\n            }\n          }\n        };\n      }\n\n      return listeners;\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n\n    loaderSize () {\n      return BUTTON_ICON_SIZES[this.size];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    resolveRouterLink () {\n      try {\n        return resolveComponent('RouterLink');\n      } catch {\n        warn('DtButton: \"to\" prop requires vue-router. Falling back to <a>.');\n        return 'a';\n      }\n    },\n\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[this.size],\n        ];\n      }\n      if (this.kind === 'unstyled') {\n        return ['d-btn--unstyled'];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[this.size],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      // Skip validation if unstyled is true\n      if (this.kind === 'unstyled') {\n        return true;\n      }\n\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    shouldRenderIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      return !this.isIconOnly() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"button.js","names":[],"sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"computedTag\"\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? i18n.$t('DIALTONE_LOADING') : $attrs['aria-label']\"\n    v-bind=\"computedAttrs\"\n    v-on=\"computedListeners\"\n  >\n    <dt-loader\n      v-if=\"loading && kind !== 'unstyled'\"\n      class=\"d-btn__loader\"\n      :size=\"loaderSize\"\n      aria-hidden=\"true\"\n    />\n    <span\n      v-if=\"hasSlotContent($slots.leading)\"\n      :class=\"['d-btn__leading', leadingClass]\"\n    >\n      <!-- @slot Optional leading content at the start of the button, such as badges or indicators -->\n      <slot name=\"leading\" />\n    </span>\n    <!-- NEW: Block-start icon slot (above label) -->\n    <span\n      v-if=\"hasSlotContent($slots.blockStartIcon)\"\n      data-qa=\"dt-button-block-start-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--top': kind !== 'unstyled',\n        },\n      ]\"\n    >\n      <!-- @slot Icon displayed above the button label (block-start) -->\n      <slot\n        name=\"blockStartIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NEW: Start icon slot -->\n    <span\n      v-if=\"hasSlotContent($slots.startIcon)\"\n      data-qa=\"dt-button-start-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--left': kind !== 'unstyled',\n        },\n      ]\"\n    >\n      <!-- @slot Icon displayed at the start (left in LTR) of the button -->\n      <slot\n        name=\"startIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NOTE(cormac): This span is needed since we can't apply styles to slots. -->\n    <span\n      v-if=\"shouldRenderLegacyIcon()\"\n      data-qa=\"dt-button-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          [ICON_POSITION_MODIFIERS[iconPosition]]: kind !== 'unstyled',\n        },\n      ]\"\n    >\n      <!-- @slot Button icon -->\n      <slot\n        name=\"icon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.default)\"\n      data-qa=\"dt-button-label\"\n      :class=\"[\n        'base-button__label',\n        { 'd-btn__label': kind !== 'unstyled' },\n        labelClass,\n      ]\"\n    >\n      <!-- @slot Content within button -->\n      <slot />\n    </span>\n    <!-- NEW: End icon slot -->\n    <span\n      v-if=\"hasSlotContent($slots.endIcon)\"\n      data-qa=\"dt-button-end-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--right': kind !== 'unstyled',\n        },\n      ]\"\n    >\n      <!-- @slot Icon displayed at the end (right in LTR) of the button -->\n      <slot\n        name=\"endIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <!-- NEW: Block-end icon slot (below label) -->\n    <span\n      v-if=\"hasSlotContent($slots.blockEndIcon)\"\n      data-qa=\"dt-button-block-end-icon\"\n      :class=\"[\n        'base-button__icon',\n        {\n          'd-btn__icon': kind !== 'unstyled',\n          'd-btn__icon--bottom': kind !== 'unstyled',\n        },\n      ]\"\n    >\n      <!-- @slot Icon displayed below the button label (block-end) -->\n      <slot\n        name=\"blockEndIcon\"\n        :icon-size=\"iconSize\"\n      />\n    </span>\n    <span\n      v-if=\"hasSlotContent($slots.trailing)\"\n      :class=\"['d-btn__trailing', trailingClass]\"\n    >\n      <!-- @slot Optional trailing content at the end of the button, such as badges or indicators -->\n      <slot name=\"trailing\" />\n    </span>\n  </component>\n</template>\n\n<script>\nimport { warn, resolveComponent } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\nimport DtLoader from '@/components/loader/loader.vue';\n\nimport {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_ICON_SIZES,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n} from './button_constants';\n\nimport { LINK_KIND_MODIFIERS, getLinkKindModifier } from '@/components/link';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * A button is a UI element which allows users to take an action throughout the app.\n * It is important a button is identifiable, consistent, and communicates its actions clearly,\n * and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/button.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButton',\n\n  components: { DtLoader },\n\n  props: {\n    /**\n     * Whether the button is a circle or not. Use only with icon-only buttons.\n     * @values true, false\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The position of the icon slot within the button.\n     * @deprecated Use startIcon / endIcon / blockStartIcon / blockEndIcon slots instead.\n     * @values start, end, blockStart, blockEnd, left, right, top, bottom\n     */\n    iconPosition: {\n      type: String,\n      default: 'start',\n      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: 'primary',\n      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i),\n    },\n\n    /**\n     * Whether the button should be styled as a link or not.\n     * @values true, false\n     * @see DtLink\n     */\n    link: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the link and button if the button is styled as a link.\n     * @values default, critical, warning, positive, muted\n     * @see DtLink\n     */\n    linkKind: {\n      type: String,\n      default: 'default',\n      validator: (lk) => Object.keys(LINK_KIND_MODIFIERS).includes(lk),\n    },\n\n    /**\n     * Determines whether the link should have inverted styling if the button is styled as a link.\n     * @values true, false\n     * @see DtLink\n     * @deprecated Use v-dt-mode instead.\n     */\n    linkInverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the link-styled button should display an underline.\n     * Only applies when the link prop is true.\n     * @values true, false\n     */\n    linkUnderline: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * @deprecated Use linkUnderline instead.\n     * @values true, false\n     */\n    underline: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * HTML button disabled attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\" target=\"_blank\"> (Reference) </a>\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML button type attribute\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\" target=\"_blank\">(Reference)</a>\n     * @values button, submit, reset\n     */\n    type: {\n      type: String,\n      default: 'button',\n      validator: (t) => BUTTON_TYPES.includes(t),\n    },\n\n    /**\n     * Button width, accepts\n     * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/width\" target=\"_blank\">CSS width attribute</a> values\n     */\n    width: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The size of the button.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(String(s)),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the leading container\n     */\n    leadingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the trailing container\n     */\n    trailingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Whether the button should display a loading animation or not.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The color of the button.\n     * @values default, unstyled, muted, critical, positive\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * Determines whether a screenreader reads live updates of\n     * the button content to the user while the button\n     * is in focus. default is to not.\n     * @values true, false\n     */\n    assertiveOnFocus: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * vue-router `to` prop. When provided, renders a `<router-link>`\n     * for client-side SPA navigation.\n     * @see https://router.vuejs.org/api/interfaces/RouterLinkProps.html#to\n     */\n    to: {\n      type: [String, Object],\n      default: null,\n    },\n\n    /**\n     * When provided, renders an `<a>` element for standard browser navigation.\n     */\n    href: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor target attribute. Only applied when using the `href` prop.\n     * @values _self, _blank, _parent, _top\n     */\n    target: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * HTML anchor rel attribute. Only applied when using the `href` prop.\n     */\n    rel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * vue-router `replace` prop. When true, navigation will not leave a\n     * history entry. Only applied when using the `to` prop.\n     * @values true, false\n     */\n    replace: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native button focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native button focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      ICON_POSITION_MODIFIERS,\n      // whether the button is currently in focus\n      isInFocus: false,\n      hasSlotContent,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    resolvedUnderline () {\n      return this.underline ?? this.linkUnderline;\n    },\n\n    computedTag () {\n      if (this.to) return this.resolveRouterLink();\n      if (this.href) return 'a';\n      return 'button';\n    },\n\n    isNativeButton () {\n      return !this.to && !this.href;\n    },\n\n    computedAttrs () {\n      if (this.to) {\n        return {\n          to: this.to,\n          replace: this.replace,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      if (this.href) {\n        return {\n          href: this.disabled ? null : this.href,\n          target: this.target,\n          rel: this.rel,\n          ...(this.disabled && { 'aria-disabled': 'true', tabindex: '-1' }),\n        };\n      }\n      return {\n        type: this.type,\n        disabled: this.disabled,\n      };\n    },\n\n    computedListeners () {\n      const listeners = {\n        focusin: (e) => {\n          this.isInFocus = this.assertiveOnFocus;\n          this.$emit('focusin', e);\n        },\n\n        focusout: (e) => {\n          this.isInFocus = false;\n          this.$emit('focusout', e);\n        },\n      };\n\n      if (!this.isNativeButton) {\n        // Prevent click when disabled for link elements.\n        // stopImmediatePropagation prevents parent onClick attrs from firing.\n        if (this.disabled) {\n          listeners.click = (e) => {\n            e.preventDefault();\n            e.stopImmediatePropagation();\n          };\n        }\n\n        // Space key handler: <a> only responds to Enter natively,\n        // but buttons respond to both Enter and Space.\n        listeners.keydown = (e) => {\n          if (e.key === ' ' || e.code === 'Space') {\n            e.preventDefault();\n            if (!this.disabled) {\n              e.target.click();\n            }\n          }\n        };\n      }\n\n      return listeners;\n    },\n\n    computedAriaLive () {\n      return this.assertiveOnFocus && this.isInFocus ? 'assertive' : this.$attrs.ariaLive;\n    },\n\n    iconSize () {\n      return BUTTON_ICON_SIZES[String(this.size)];\n    },\n\n    loaderSize () {\n      return BUTTON_ICON_SIZES[String(this.size)];\n    },\n  },\n\n  watch: {\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        if (process.env.NODE_ENV === 'production') return;\n\n        if (this.circle && this.link) {\n          warn('You cannot enable circle and link at the same time', this);\n        }\n\n        this.isInvalidPropCombination(this.circle, this.kind, this.importance);\n      },\n    },\n  },\n\n  methods: {\n    resolveRouterLink () {\n      try {\n        return resolveComponent('RouterLink');\n      } catch {\n        warn('DtButton: \"to\" prop requires vue-router. Falling back to <a>.');\n        return 'a';\n      }\n    },\n\n    buttonClasses () {\n      if (this.link) {\n        return [\n          'd-link',\n          getLinkKindModifier(this.linkKind, this.linkInverted),\n          BUTTON_SIZE_MODIFIERS[String(this.size)],\n          { 'd-link--no-underline': !this.resolvedUnderline },\n        ];\n      }\n      if (this.kind === 'unstyled') {\n        return ['d-btn--unstyled'];\n      }\n      return [\n        'd-btn',\n        BUTTON_IMPORTANCE_MODIFIERS[this.importance],\n        BUTTON_KIND_MODIFIERS[this.kind],\n        BUTTON_SIZE_MODIFIERS[String(this.size)],\n        {\n          'd-btn--circle': this.circle,\n          'd-btn--loading': this.loading,\n          'd-btn--icon-only': this.isIconOnly(),\n          'd-btn--vertical': this.isVerticalIconLayout(),\n          'd-btn--active': this.active,\n        },\n      ];\n    },\n\n    isInvalidPropCombination (circle, kind, importance) {\n      // Skip validation if unstyled is true\n      if (this.kind === 'unstyled') {\n        return true;\n      }\n\n      for (const row of INVALID_COMBINATION) {\n        if (circle === row.circle && kind === row.kind && importance === row.importance) {\n          warn(row.message);\n          return false;\n        }\n      }\n      return true;\n    },\n\n    hasStartIcon () {\n      return hasSlotContent(this.$slots.startIcon);\n    },\n\n    hasEndIcon () {\n      return hasSlotContent(this.$slots.endIcon);\n    },\n\n    hasBlockStartIcon () {\n      return hasSlotContent(this.$slots.blockStartIcon);\n    },\n\n    hasBlockEndIcon () {\n      return hasSlotContent(this.$slots.blockEndIcon);\n    },\n\n    hasNewIconSlots () {\n      return this.hasStartIcon() || this.hasEndIcon() || this.hasBlockStartIcon() || this.hasBlockEndIcon();\n    },\n\n    shouldRenderLegacyIcon () {\n      return hasSlotContent(this.$slots.icon) && !this.hasNewIconSlots() && !this.link;\n    },\n\n    isIconOnly () {\n      return (this.hasNewIconSlots() || this.shouldRenderLegacyIcon()) && !hasSlotContent(this.$slots.default);\n    },\n\n    isVerticalIconLayout () {\n      if (this.isIconOnly()) return false;\n      if (this.hasBlockStartIcon() || this.hasBlockEndIcon()) return true;\n      return !this.hasNewIconSlots() && ['top', 'bottom'].includes(this.iconPosition);\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;;;AAmKA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY,EAAE,UAAA,GAAU;CAExB,OAAO;EAKL,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAOD,cAAc;GACZ,MAAM;GACN,SAAS;GACT,YAAY,MAAa,OAAO,KAAK,EAAwB,CAAC,SAAS,EAAS;GACjF;EAMD,YAAY;GACV,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAA4B,CAAC,SAAS,EAAE;GACvE;EAOD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAOD,UAAU;GACR,MAAM;GACN,SAAS;GACT,YAAY,MAAO,OAAO,KAAK,EAAoB,CAAC,SAAS,EAAG;GACjE;EAQD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EAOD,eAAe;GACb,MAAM;GACN,SAAS;GACV;EAMD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAOD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAOD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAM,EAAa,SAAS,EAAE;GAC3C;EAMD,OAAO;GACL,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAsB,CAAC,SAAS,OAAO,EAAE,CAAC;GACzE;EAKD,YAAY;GACV,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,eAAe;GACb,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAMD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAsB,CAAC,SAAS,EAAE;GACjE;EAQD,kBAAkB;GAChB,MAAM;GACN,SAAS;GACV;EAOD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAOD,IAAI;GACF,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACV;EAKD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,KAAK;GACH,MAAM;GACN,SAAS;GACV;EAOD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAO,CAOL,WAQA,WACD;CAED,OAAQ;AACN,SAAO;GACL;GAEA,WAAW;GACX;GACA,MAAM,IAAI,GAAsB;GACjC;;CAGH,UAAU;EACR,oBAAqB;AACnB,UAAO,KAAK,aAAa,KAAK;;EAGhC,cAAe;AAGb,UAFI,KAAK,KAAW,KAAK,mBAAmB,GACxC,KAAK,OAAa,MACf;;EAGT,iBAAkB;AAChB,UAAO,CAAC,KAAK,MAAM,CAAC,KAAK;;EAG3B,gBAAiB;AAgBf,UAfI,KAAK,KACA;IACL,IAAI,KAAK;IACT,SAAS,KAAK;IACd,GAAI,KAAK,YAAY;KAAE,iBAAiB;KAAQ,UAAU;KAAM;IACjE,GAEC,KAAK,OACA;IACL,MAAM,KAAK,WAAW,OAAO,KAAK;IAClC,QAAQ,KAAK;IACb,KAAK,KAAK;IACV,GAAI,KAAK,YAAY;KAAE,iBAAiB;KAAQ,UAAU;KAAM;IACjE,GAEI;IACL,MAAM,KAAK;IACX,UAAU,KAAK;IAChB;;EAGH,oBAAqB;GACnB,IAAM,IAAY;IAChB,UAAU,MAAM;AAEd,KADA,KAAK,YAAY,KAAK,kBACtB,KAAK,MAAM,WAAW,EAAE;;IAG1B,WAAW,MAAM;AAEf,KADA,KAAK,YAAY,IACjB,KAAK,MAAM,YAAY,EAAE;;IAE5B;AAwBD,UAtBK,KAAK,mBAGJ,KAAK,aACP,EAAU,SAAS,MAAM;AAEvB,IADA,EAAE,gBAAgB,EAClB,EAAE,0BAA0B;OAMhC,EAAU,WAAW,MAAM;AACzB,KAAI,EAAE,QAAQ,OAAO,EAAE,SAAS,aAC9B,EAAE,gBAAgB,EACb,KAAK,YACR,EAAE,OAAO,OAAO;OAMjB;;EAGT,mBAAoB;AAClB,UAAO,KAAK,oBAAoB,KAAK,YAAY,cAAc,KAAK,OAAO;;EAG7E,WAAY;AACV,UAAO,EAAkB,OAAO,KAAK,KAAK;;EAG5C,aAAc;AACZ,UAAO,EAAkB,OAAO,KAAK,KAAK;;EAE7C;CAED,OAAO,EACL,QAAQ;EACN,MAAM;EACN,WAAW;EACX,UAAW;AACT,WAAA,IAAA,aAA6B,iBAEzB,KAAK,UAAU,KAAK,QACtB,EAAK,sDAAsD,KAAK,EAGlE,KAAK,yBAAyB,KAAK,QAAQ,KAAK,MAAM,KAAK,WAAW;;EAEzE,EACF;CAED,SAAS;EACP,oBAAqB;AACnB,OAAI;AACF,WAAO,EAAiB,aAAa;WAC/B;AAEN,WADA,EAAK,kEAAgE,EAC9D;;;EAIX,gBAAiB;AAYf,UAXI,KAAK,OACA;IACL;IACA,EAAoB,KAAK,UAAU,KAAK,aAAa;IACrD,EAAsB,OAAO,KAAK,KAAK;IACvC,EAAE,wBAAwB,CAAC,KAAK,mBAAmB;IACpD,GAEC,KAAK,SAAS,aACT,CAAC,kBAAkB,GAErB;IACL;IACA,EAA4B,KAAK;IACjC,EAAsB,KAAK;IAC3B,EAAsB,OAAO,KAAK,KAAK;IACvC;KACE,iBAAiB,KAAK;KACtB,kBAAkB,KAAK;KACvB,oBAAoB,KAAK,YAAY;KACrC,mBAAmB,KAAK,sBAAsB;KAC9C,iBAAiB,KAAK;KACvB;IACF;;EAGH,yBAA0B,GAAQ,GAAM,GAAY;AAElD,OAAI,KAAK,SAAS,WAChB,QAAO;AAGT,QAAK,IAAM,KAAO,EAChB,KAAI,MAAW,EAAI,UAAU,MAAS,EAAI,QAAQ,MAAe,EAAI,WAEnE,QADA,EAAK,EAAI,QAAQ,EACV;AAGX,UAAO;;EAGT,eAAgB;AACd,UAAO,EAAe,KAAK,OAAO,UAAU;;EAG9C,aAAc;AACZ,UAAO,EAAe,KAAK,OAAO,QAAQ;;EAG5C,oBAAqB;AACnB,UAAO,EAAe,KAAK,OAAO,eAAe;;EAGnD,kBAAmB;AACjB,UAAO,EAAe,KAAK,OAAO,aAAa;;EAGjD,kBAAmB;AACjB,UAAO,KAAK,cAAa,IAAK,KAAK,YAAW,IAAK,KAAK,mBAAkB,IAAK,KAAK,iBAAiB;;EAGvG,yBAA0B;AACxB,UAAO,EAAe,KAAK,OAAO,KAAI,IAAK,CAAC,KAAK,iBAAgB,IAAK,CAAC,KAAK;;EAG9E,aAAc;AACZ,WAAQ,KAAK,iBAAgB,IAAK,KAAK,wBAAwB,KAAK,CAAC,EAAe,KAAK,OAAO,QAAQ;;EAG1G,uBAAwB;AAGtB,UAFI,KAAK,YAAY,GAAS,KAC1B,KAAK,mBAAkB,IAAK,KAAK,iBAAiB,GAAS,KACxD,CAAC,KAAK,iBAAgB,IAAK,CAAC,OAAO,SAAS,CAAC,SAAS,KAAK,aAAa;;EAElF;CACF;;;aA1mBC,EAuIY,EAtIL,EAAA,YAAW,EADlB,EAuIY;EArIT,OAAK,CAAA,uBAAuC,EAAA,eAAa,CAAA;EAI1D,WAAQ;EACP,OAAK,EAAA,OAAW,EAAA,OAAK;EACrB,aAAW,EAAA;EACX,cAAY,EAAA,UAAU,EAAA,KAAK,GAAE,mBAAA,GAAuB,EAAA,OAAM;IACnD,EAAA,eACR,EAAwB,EAAlB,kBAAiB,CAAA,EAAA;mBAOrB;GAJM,EAAA,WAAW,EAAA,SAAI,cAAA,GAAA,EADvB,EAKE,GAAA;;IAHA,OAAM;IACL,MAAM,EAAA;IACP,eAAY;;GAGN,EAAA,eAAe,EAAA,OAAO,QAAO,IAAA,GAAA,EADrC,EAMO,QAAA;;IAJJ,OAAK,EAAA,CAAA,kBAAqB,EAAA,aAAY,CAAA;OAGvC,EAAuB,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAIjB,EAAA,eAAe,EAAA,OAAO,eAAc,IAAA,GAAA,EAD5C,EAgBO,QAAA;;IAdL,WAAQ;IACP,OAAK,EAAA,CAAA,qBAAA;oBAAoE,EAAA,SAAI;yBAA+C,EAAA,SAAI;;OASjI,EAGE,EAAA,QAAA,kBAAA,EADC,UAAW,EAAA,UAAQ,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAKhB,EAAA,eAAe,EAAA,OAAO,UAAS,IAAA,GAAA,EADvC,EAgBO,QAAA;;IAdL,WAAQ;IACP,OAAK,EAAA,CAAA,qBAAA;oBAAoE,EAAA,SAAI;0BAAgD,EAAA,SAAI;;OASlI,EAGE,EAAA,QAAA,aAAA,EADC,UAAW,EAAA,UAAQ,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAKhB,EAAA,wBAAsB,IAAA,GAAA,EAD9B,EAgBO,QAAA;;IAdL,WAAQ;IACP,OAAK,EAAA,CAAA,qBAAA;oBAAoE,EAAA,SAAI;MAA4B,EAAA,wBAAwB,EAAA,gBAAgB,EAAA,SAAI;;OAStJ,EAGE,EAAA,QAAA,QAAA,EADC,UAAW,EAAA,UAAQ,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAIhB,EAAA,eAAe,EAAA,OAAO,QAAO,IAAA,GAAA,EADrC,EAWO,QAAA;;IATL,WAAQ;IACP,OAAK,EAAA;;uBAA4D,EAAA,SAAI,YAAA;KAA2B,EAAA;;OAOjG,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAIF,EAAA,eAAe,EAAA,OAAO,QAAO,IAAA,GAAA,EADrC,EAgBO,QAAA;;IAdL,WAAQ;IACP,OAAK,EAAA,CAAA,qBAAA;oBAAoE,EAAA,SAAI;2BAAiD,EAAA,SAAI;;OASnI,EAGE,EAAA,QAAA,WAAA,EADC,UAAW,EAAA,UAAQ,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAKhB,EAAA,eAAe,EAAA,OAAO,aAAY,IAAA,GAAA,EAD1C,EAgBO,QAAA;;IAdL,WAAQ;IACP,OAAK,EAAA,CAAA,qBAAA;oBAAoE,EAAA,SAAI;4BAAkD,EAAA,SAAI;;OASpI,EAGE,EAAA,QAAA,gBAAA,EADC,UAAW,EAAA,UAAQ,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAIhB,EAAA,eAAe,EAAA,OAAO,SAAQ,IAAA,GAAA,EADtC,EAMO,QAAA;;IAJJ,OAAK,EAAA,CAAA,mBAAsB,EAAA,cAAa,CAAA;OAGzC,EAAwB,EAAA,QAAA,WAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/lib/button-group/button-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.cjs","names":[],"sources":["../../../components/button_group/button_group.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-btn-group',\n      BUTTON_GROUP_ALIGNMENT[alignment],\n    ]\"\n    role=\"group\"\n  >\n    <!-- @slot Default slot for button items -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport { BUTTON_GROUP_ALIGNMENT } from './button_group_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButtonGroup',\n\n  props: {\n    /**\n     * Alignment of the buttons inside the container\n     */\n    alignment: {\n      type: String,\n      default: 'start',\n      validator: (alignment) => Object.keys(BUTTON_GROUP_ALIGNMENT).includes(alignment),\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_GROUP_ALIGNMENT,\n    };\n  },\n};\n</script>\n"],"mappings":"kQAgBA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,gBAEN,MAAO,CAIL,UAAW,CACT,KAAM,OACN,QAAS,QACT,UAAY,GAAc,OAAO,KAAK,EAAA,uBAAuB,CAAC,SAAS,EAAU,CAClF,CACF,CAED,MAAQ,CACN,MAAO,CACL,uBAAA,EAAA,uBACD,EAEJ,0EA1BO,MAAA,CARH,OAAA,EAAA,EAAA,gBAAK,CAAA,cAA+B,EAAA,uBAAuB,EAAA,WAAA,CAAA,CAI5D,KAAK,2BAGG,EAAA,OAAA,UAAA,CAAA,CAAA,EAAA"}
+{"version":3,"file":"button-group.cjs","names":[],"sources":["../../../components/button_group/button_group.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-btn-group',\n      BUTTON_GROUP_ALIGNMENT[alignment],\n    ]\"\n    role=\"group\"\n  >\n    <!-- @slot Default slot for button items -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport { BUTTON_GROUP_ALIGNMENT } from './button_group_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButtonGroup',\n\n  props: {\n    /**\n     * Alignment of the buttons inside the container\n     * @values start, end, space-between\n     */\n    alignment: {\n      type: String,\n      default: 'start',\n      validator: (alignment) => Object.keys(BUTTON_GROUP_ALIGNMENT).includes(alignment),\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_GROUP_ALIGNMENT,\n    };\n  },\n};\n</script>\n"],"mappings":"kQAgBA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,gBAEN,MAAO,CAKL,UAAW,CACT,KAAM,OACN,QAAS,QACT,UAAY,GAAc,OAAO,KAAK,EAAA,uBAAuB,CAAC,SAAS,EAAU,CAClF,CACF,CAED,MAAQ,CACN,MAAO,CACL,uBAAA,EAAA,uBACD,EAEJ,0EA3BO,MAAA,CARH,OAAA,EAAA,EAAA,gBAAK,CAAA,cAA+B,EAAA,uBAAuB,EAAA,WAAA,CAAA,CAI5D,KAAK,2BAGG,EAAA,OAAA,UAAA,CAAA,CAAA,EAAA"}

package/dist/lib/button-group/button-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","names":[],"sources":["../../../components/button_group/button_group.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-btn-group',\n      BUTTON_GROUP_ALIGNMENT[alignment],\n    ]\"\n    role=\"group\"\n  >\n    <!-- @slot Default slot for button items -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport { BUTTON_GROUP_ALIGNMENT } from './button_group_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButtonGroup',\n\n  props: {\n    /**\n     * Alignment of the buttons inside the container\n     */\n    alignment: {\n      type: String,\n      default: 'start',\n      validator: (alignment) => Object.keys(BUTTON_GROUP_ALIGNMENT).includes(alignment),\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_GROUP_ALIGNMENT,\n    };\n  },\n};\n</script>\n"],"mappings":";;;;AAgBA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,OAAO,EAIL,WAAW;EACT,MAAM;EACN,SAAS;EACT,YAAY,MAAc,OAAO,KAAK,EAAuB,CAAC,SAAS,EAAU;EAClF,EACF;CAED,OAAQ;AACN,SAAO,EACL,2BACD;;CAEJ;;aAnCC,EASM,OAAA;EARH,OAAK,EAAA,CAAA,eAA+B,EAAA,uBAAuB,EAAA,WAAA,CAAA;EAI5D,MAAK;KAGL,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"button-group.js","names":[],"sources":["../../../components/button_group/button_group.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-btn-group',\n      BUTTON_GROUP_ALIGNMENT[alignment],\n    ]\"\n    role=\"group\"\n  >\n    <!-- @slot Default slot for button items -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport { BUTTON_GROUP_ALIGNMENT } from './button_group_constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtButtonGroup',\n\n  props: {\n    /**\n     * Alignment of the buttons inside the container\n     * @values start, end, space-between\n     */\n    alignment: {\n      type: String,\n      default: 'start',\n      validator: (alignment) => Object.keys(BUTTON_GROUP_ALIGNMENT).includes(alignment),\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_GROUP_ALIGNMENT,\n    };\n  },\n};\n</script>\n"],"mappings":";;;;AAgBA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,OAAO,EAKL,WAAW;EACT,MAAM;EACN,SAAS;EACT,YAAY,MAAc,OAAO,KAAK,EAAuB,CAAC,SAAS,EAAU;EAClF,EACF;CAED,OAAQ;AACN,SAAO,EACL,2BACD;;CAEJ;;aApCC,EASM,OAAA;EARH,OAAK,EAAA,CAAA,eAA+B,EAAA,uBAAuB,EAAA,WAAA,CAAA;EAI5D,MAAK;KAGL,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA"}

package/dist/lib/callbar-button/callbar-button.cjs

@@ -1,2 +1,2 @@
-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(`../tooltip/tooltip.cjs`),i=require(`./callbar-button-constants.cjs`);let a=require(`vue`);var o={compatConfig:{MODE:3},name:`DtRecipeCallbarButton`,components:{DtButton:n.default,DtTooltip:r.default},inheritAttrs:!1,props:{id:{type:String,default(){return e.default.getUniqueString()}},active:{type:Boolean,default:!1},danger:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},circle:{type:Boolean,default:!1},ariaLabel:{type:String,default:null,validator:e=>e||(void 0).$slots.default},buttonClass:{type:[String,Array,Object],default:``},textClass:{type:[String,Array,Object],default:``},buttonWidthSize:{type:String,default:`xl`,validator:e=>i.CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(e)},importance:{type:String,default:``},invertedTooltip:{type:Boolean,default:!1},showTooltip:{type:Boolean,default:null},tooltipText:{type:String,default:void 0},tooltipDelay:{type:Boolean,default:void 0}},emits:[`click`],computed:{callbarButtonClass(){return[this.buttonClass,`d-recipe-callbar-button`,{"d-recipe-callbar-button--circle":this.circle,"d-recipe-callbar-button--active":this.active,"d-recipe-callbar-button--danger":this.danger,"d-btn--disabled":this.disabled}]},callbarButtonTextClass(){return[`d-recipe-callbar-button__text`,this.textClass]},buttonWidth(){switch(this.buttonWidthSize){case`sm`:return`4.5rem`;case`md`:return`6rem`;default:return`8.4rem`}},buttonImportance(){return this.importance?this.importance:this.circle?`outlined`:`clear`},callbarButtonListeners(){return{...e.extractVueListeners(this.$attrs),click:e=>this.$emit(`click`,e)}}},methods:{removeClassStyleAttrs:e.removeClassStyleAttrs,addClassStyleAttrs:e.addClassStyleAttrs}};function s(e,t,n,r,i,o){let s=(0,a.resolveComponent)(`dt-button`),c=(0,a.resolveComponent)(`dt-tooltip`);return(0,a.openBlock)(),(0,a.createBlock)(c,(0,a.mergeProps)({id:n.id,inverted:n.invertedTooltip},o.addClassStyleAttrs(e.$attrs),{delay:n.tooltipDelay,show:n.showTooltip,offset:[0,24]}),{anchor:(0,a.withCtx)(()=>[(0,a.createElementVNode)(`span`,{class:(0,a.normalizeClass)({"d-recipe-callbar-button--disabled":n.disabled})},[(0,a.createVNode)(s,(0,a.mergeProps)({importance:o.buttonImportance,kind:`muted`,"icon-position":`top`,"aria-disabled":n.disabled,"aria-label":n.ariaLabel,"label-class":o.callbarButtonTextClass,width:o.buttonWidth,class:o.callbarButtonClass},o.removeClassStyleAttrs(e.$attrs),(0,a.toHandlers)(o.callbarButtonListeners)),{icon:(0,a.withCtx)(()=>[(0,a.renderSlot)(e.$slots,`icon`)]),default:(0,a.withCtx)(()=>[(0,a.renderSlot)(e.$slots,`default`)]),_:3},16,[`importance`,`aria-disabled`,`aria-label`,`label-class`,`width`,`class`])],2)]),default:(0,a.withCtx)(()=>[(0,a.renderSlot)(e.$slots,`tooltip`,{},()=>[(0,a.createTextVNode)((0,a.toDisplayString)(n.tooltipText),1)])]),_:3},16,[`id`,`inverted`,`delay`,`show`])}var c=t.t(o,[[`render`,s]]);exports.default=c;
+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(`../tooltip/tooltip.cjs`),i=require(`./callbar-button-constants.cjs`);let a=require(`vue`);var o={compatConfig:{MODE:3},name:`DtRecipeCallbarButton`,components:{DtButton:n.default,DtTooltip:r.default},inheritAttrs:!1,props:{id:{type:String,default(){return e.default.getUniqueString()}},active:{type:Boolean,default:!1},danger:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},circle:{type:Boolean,default:!1},ariaLabel:{type:String,default:null,validator:e=>e||(void 0).$slots.default},buttonClass:{type:[String,Array,Object],default:``},textClass:{type:[String,Array,Object],default:``},buttonWidthSize:{type:String,default:`xl`,validator:e=>i.CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(e)},importance:{type:String,default:``},invertedTooltip:{type:Boolean,default:!1},showTooltip:{type:Boolean,default:null},tooltipText:{type:String,default:void 0},tooltipDelay:{type:Boolean,default:void 0}},emits:[`click`],computed:{callbarButtonClass(){return[this.buttonClass,`d-recipe-callbar-button`,{"d-recipe-callbar-button--circle":this.circle,"d-recipe-callbar-button--active":this.active,"d-recipe-callbar-button--danger":this.danger,"d-btn--disabled":this.disabled}]},callbarButtonTextClass(){return[`d-recipe-callbar-button__text`,this.textClass]},buttonWidth(){switch(this.buttonWidthSize){case`sm`:return`4.5rem`;case`md`:return`6rem`;default:return`8.4rem`}},buttonImportance(){return this.importance?this.importance:this.circle?`outlined`:`clear`},callbarButtonListeners(){return{...e.extractVueListeners(this.$attrs),click:e=>this.$emit(`click`,e)}}},methods:{removeClassStyleAttrs:e.removeClassStyleAttrs}};function s(e,t,n,r,i,o){let s=(0,a.resolveComponent)(`dt-button`),c=(0,a.resolveComponent)(`dt-tooltip`);return(0,a.openBlock)(),(0,a.createBlock)(c,{id:n.id,inverted:n.invertedTooltip,class:(0,a.normalizeClass)(e.$attrs.class),style:(0,a.normalizeStyle)(e.$attrs.style),delay:n.tooltipDelay,open:n.showTooltip,offset:[0,24]},{anchor:(0,a.withCtx)(()=>[(0,a.createElementVNode)(`span`,{class:(0,a.normalizeClass)({"d-recipe-callbar-button--disabled":n.disabled})},[(0,a.createVNode)(s,(0,a.mergeProps)({importance:o.buttonImportance,kind:`muted`,"aria-disabled":n.disabled,"aria-label":n.ariaLabel,"label-class":o.callbarButtonTextClass,width:o.buttonWidth,class:o.callbarButtonClass},o.removeClassStyleAttrs(e.$attrs),(0,a.toHandlers)(o.callbarButtonListeners)),{blockStartIcon:(0,a.withCtx)(()=>[e.$slots.blockStartIcon?(0,a.renderSlot)(e.$slots,`blockStartIcon`,{key:0}):(0,a.renderSlot)(e.$slots,`icon`,{key:1})]),default:(0,a.withCtx)(()=>[(0,a.renderSlot)(e.$slots,`default`)]),_:3},16,[`importance`,`aria-disabled`,`aria-label`,`label-class`,`width`,`class`])],2)]),default:(0,a.withCtx)(()=>[(0,a.renderSlot)(e.$slots,`tooltip`,{},()=>[(0,a.createTextVNode)((0,a.toDisplayString)(n.tooltipText),1)])]),_:3},8,[`id`,`inverted`,`class`,`style`,`delay`,`open`])}var c=t.t(o,[[`render`,s]]);exports.default=c;
 //# sourceMappingURL=callbar-button.cjs.map

package/dist/lib/callbar-button/callbar-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"callbar-button.cjs","names":[],"sources":["../../../recipes/buttons/callbar_button/callbar_button.vue"],"sourcesContent":["<template>\n  <dt-tooltip\n    :id=\"id\"\n    :inverted=\"invertedTooltip\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n    :delay=\"tooltipDelay\"\n    :show=\"showTooltip\"\n    :offset=\"[0, 24]\"\n  >\n    <template #anchor>\n      <span\n        :class=\"{ 'd-recipe-callbar-button--disabled': disabled }\"\n      >\n        <dt-button\n          :importance=\"buttonImportance\"\n          kind=\"muted\"\n          icon-position=\"top\"\n          :aria-disabled=\"disabled\"\n          :aria-label=\"ariaLabel\"\n          :label-class=\"callbarButtonTextClass\"\n          :width=\"buttonWidth\"\n          :class=\"callbarButtonClass\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          v-on=\"callbarButtonListeners\"\n        >\n          <slot />\n          <template #icon>\n            <slot name=\"icon\" />\n          </template>\n        </dt-button>\n      </span>\n    </template>\n    <slot name=\"tooltip\">\n      {{ tooltipText }}\n    </slot>\n  </dt-tooltip>\n</template>\n\n<script>\nimport { CALLBAR_BUTTON_VALID_WIDTH_SIZE } from './callbar_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport utils, { extractVueListeners, removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeCallbarButton',\n\n  components: { DtButton, DtTooltip },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () {\n        return utils.getUniqueString();\n      },\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have danger styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    danger: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should be disabled\n     * default is false.\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the button is a circle or not.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label for the button. If empty, it takes its value from the default slot.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n      validator: (label) => {\n        return label || this.$slots.default;\n      },\n    },\n\n    /**\n     * Additional class name for the button wrapper element.\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the button text.\n     */\n    textClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /*\n     * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n     */\n    buttonWidthSize: {\n      type: String,\n      default: 'xl',\n      validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the tooltip has an inverted background color.\n     * @values true, false\n     */\n    invertedTooltip: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Use this if you would like to manually override the logic for when the tooltip shows.\n     * Otherwise it will just show on hover/focus.\n     * @values null, true, false\n     */\n    showTooltip: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * The message that displays in the tooltip. This will be overridden by the tooltip slot.\n     */\n    tooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Whether there is a delay before the tooltip shows on hover/focus.\n     * @values true, false\n     */\n    tooltipDelay: {\n      type: Boolean,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    callbarButtonClass () {\n      return [\n        this.buttonClass,\n        'd-recipe-callbar-button',\n        {\n          'd-recipe-callbar-button--circle': this.circle,\n          'd-recipe-callbar-button--active': this.active,\n          'd-recipe-callbar-button--danger': this.danger,\n          'd-btn--disabled': this.disabled,\n        }];\n    },\n\n    callbarButtonTextClass () {\n      return [\n        'd-recipe-callbar-button__text',\n        this.textClass,\n      ];\n    },\n\n    buttonWidth () {\n      switch (this.buttonWidthSize) {\n        case 'sm':\n          return '4.5rem';\n        case 'md':\n          return '6rem';\n        default:\n          return '8.4rem';\n      }\n    },\n\n    buttonImportance () {\n      if (this.importance) {\n        return this.importance;\n      }\n      return this.circle ? 'outlined' : 'clear';\n    },\n\n    callbarButtonListeners () {\n      return {\n        ...extractVueListeners(this.$attrs),\n        click: (event) => this.$emit('click', event),\n      };\n    },\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"callbar-button.cjs","names":[],"sources":["../../../recipes/buttons/callbar_button/callbar_button.vue"],"sourcesContent":["<template>\n  <dt-tooltip\n    :id=\"id\"\n    :inverted=\"invertedTooltip\"\n    :class=\"$attrs.class\"\n    :style=\"$attrs.style\"\n    :delay=\"tooltipDelay\"\n    :open=\"showTooltip\"\n    :offset=\"[0, 24]\"\n  >\n    <template #anchor>\n      <span\n        :class=\"{ 'd-recipe-callbar-button--disabled': disabled }\"\n      >\n        <dt-button\n          :importance=\"buttonImportance\"\n          kind=\"muted\"\n          :aria-disabled=\"disabled\"\n          :aria-label=\"ariaLabel\"\n          :label-class=\"callbarButtonTextClass\"\n          :width=\"buttonWidth\"\n          :class=\"callbarButtonClass\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          v-on=\"callbarButtonListeners\"\n        >\n          <slot />\n          <!-- @slot Icon displayed above the button label (block-start) -->\n          <template #blockStartIcon>\n            <slot\n              v-if=\"$slots.blockStartIcon\"\n              name=\"blockStartIcon\"\n            />\n            <!-- @slot @deprecated Use blockStartIcon -->\n            <slot\n              v-else\n              name=\"icon\"\n            />\n          </template>\n        </dt-button>\n      </span>\n    </template>\n    <slot name=\"tooltip\">\n      {{ tooltipText }}\n    </slot>\n  </dt-tooltip>\n</template>\n\n<script>\nimport { CALLBAR_BUTTON_VALID_WIDTH_SIZE } from './callbar_button_constants';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport utils, { extractVueListeners, removeClassStyleAttrs } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeCallbarButton',\n\n  components: { DtButton, DtTooltip },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () {\n        return utils.getUniqueString();\n      },\n    },\n\n    /**\n     * Determines whether the button should have active styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    active: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should have danger styling\n     * default is false.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    danger: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines whether the button should be disabled\n     * default is false.\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the button is a circle or not. Use only with icon-only buttons.\n     * @values true, false\n     * @see https://dialtone.dialpad.com/components/button/\n     */\n    circle: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Aria label for the button. If empty, it takes its value from the default slot.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n      validator: (label) => {\n        return label || this.$slots.default;\n      },\n    },\n\n    /**\n     * Additional class name for the button wrapper element.\n     */\n    buttonClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the button text.\n     */\n    textClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /*\n     * Width size. Valid values are: 'xl', 'lg', 'md' and 'sm'.\n     */\n    buttonWidthSize: {\n      type: String,\n      default: 'xl',\n      validator: size => CALLBAR_BUTTON_VALID_WIDTH_SIZE.includes(size),\n    },\n\n    /**\n     * The fill and outline of the button associated with its visual importance.\n     * @values clear, outlined, primary\n     */\n    importance: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Whether the tooltip has an inverted background color.\n     * @values true, false\n     */\n    invertedTooltip: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Use this if you would like to manually override the logic for when the tooltip shows.\n     * Otherwise it will just show on hover/focus.\n     * @values null, true, false\n     */\n    showTooltip: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * The message that displays in the tooltip. This will be overridden by the tooltip slot.\n     */\n    tooltipText: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Whether there is a delay before the tooltip shows on hover/focus.\n     * @values true, false\n     */\n    tooltipDelay: {\n      type: Boolean,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  computed: {\n    callbarButtonClass () {\n      return [\n        this.buttonClass,\n        'd-recipe-callbar-button',\n        {\n          'd-recipe-callbar-button--circle': this.circle,\n          'd-recipe-callbar-button--active': this.active,\n          'd-recipe-callbar-button--danger': this.danger,\n          'd-btn--disabled': this.disabled,\n        }];\n    },\n\n    callbarButtonTextClass () {\n      return [\n        'd-recipe-callbar-button__text',\n        this.textClass,\n      ];\n    },\n\n    buttonWidth () {\n      switch (this.buttonWidthSize) {\n        case 'sm':\n          return '4.5rem';\n        case 'md':\n          return '6rem';\n        default:\n          return '8.4rem';\n      }\n    },\n\n    buttonImportance () {\n      if (this.importance) {\n        return this.importance;\n      }\n      return this.circle ? 'outlined' : 'clear';\n    },\n\n    callbarButtonListeners () {\n      return {\n        ...extractVueListeners(this.$attrs),\n        click: (event) => this.$emit('click', event),\n      };\n    },\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n  },\n};\n</script>\n"],"mappings":"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"}