@dialpad/dialtone-vue 3.218.2 → 3.218.4

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

@@ -1,79 +1,80 @@
-const d = "d-btn--unstyled", o = {
-  xs: "d-btn--xs",
-  sm: "d-btn--sm",
-  md: "",
-  lg: "d-btn--lg",
-  xl: "d-btn--xl"
-}, s = {
-  default: "",
-  muted: "d-btn--muted",
-  danger: "d-btn--danger",
-  positive: "d-btn--positive",
-  inverted: "d-btn--inverted",
-  unstyled: "d-btn--unstyled"
+//#region components/button/button_constants.js
+var e = "d-btn--unstyled", t = {
+	xs: "d-btn--xs",
+	sm: "d-btn--sm",
+	md: "",
+	lg: "d-btn--lg",
+	xl: "d-btn--xl"
+}, n = {
+	default: "",
+	muted: "d-btn--muted",
+	danger: "d-btn--danger",
+	positive: "d-btn--positive",
+	inverted: "d-btn--inverted",
+	unstyled: "d-btn--unstyled"
 }, r = {
-  clear: "",
-  outlined: "d-btn--outlined",
-  primary: "d-btn--primary"
-}, a = ["submit", "reset", "button"], m = {
-  left: "d-btn__icon--left",
-  right: "d-btn__icon--right",
-  top: "d-btn__icon--top",
-  bottom: "d-btn__icon--bottom"
-}, l = [
-  {
-    circle: !0,
-    kind: "default",
-    importance: "primary",
-    message: t(!0, "default", "primary")
-  },
-  {
-    circle: !0,
-    kind: "danger",
-    importance: "outlined",
-    message: t(!0, "danger", "outlined")
-  },
-  {
-    circle: !0,
-    kind: "muted",
-    importance: "primary",
-    message: t(!0, "muted", "primary")
-  },
-  {
-    circle: !1,
-    kind: "muted",
-    importance: "primary",
-    message: t(!1, "muted", "primary")
-  }
-], c = {
-  xs: "200",
-  sm: "200",
-  md: "300",
-  lg: "400",
-  xl: "500"
+	clear: "",
+	outlined: "d-btn--outlined",
+	primary: "d-btn--primary"
+}, i = [
+	"submit",
+	"reset",
+	"button"
+], a = {
+	left: "d-btn__icon--left",
+	right: "d-btn__icon--right",
+	top: "d-btn__icon--top",
+	bottom: "d-btn__icon--bottom"
+}, o = [
+	{
+		circle: !0,
+		kind: "default",
+		importance: "primary",
+		message: c(!0, "default", "primary")
+	},
+	{
+		circle: !0,
+		kind: "danger",
+		importance: "outlined",
+		message: c(!0, "danger", "outlined")
+	},
+	{
+		circle: !0,
+		kind: "muted",
+		importance: "primary",
+		message: c(!0, "muted", "primary")
+	},
+	{
+		circle: !1,
+		kind: "muted",
+		importance: "primary",
+		message: c(!1, "muted", "primary")
+	}
+], s = {
+	xs: "200",
+	sm: "200",
+	md: "300",
+	lg: "400",
+	xl: "500"
 };
-function t(n, e, i) {
-  return `You cannot have a ${n ? "circle " : ""}button with kind: ${e} and importance: ${i} as it does not exist in our design system. See https://dialtone.dialpad.com/components/button.html for a list of available button styles`;
+function c(e, t, n) {
+	return `You cannot have a ${e ? "circle " : ""}button \
+with kind: ${t} and importance: ${n} as it \
+does not exist in our design system. \
+See https://dialtone.dialpad.com/components/button.html for a \
+list of available button styles`;
 }
-const u = {
-  BUTTON_SIZE_MODIFIERS: o,
-  BUTTON_KIND_MODIFIERS: s,
-  BUTTON_IMPORTANCE_MODIFIERS: r,
-  BUTTON_TYPES: a,
-  BUTTON_UNSTYLED_CLASS: d,
-  ICON_POSITION_MODIFIERS: m,
-  INVALID_COMBINATION: l,
-  BUTTON_ICON_SIZES: c
+var l = {
+	BUTTON_SIZE_MODIFIERS: t,
+	BUTTON_KIND_MODIFIERS: n,
+	BUTTON_IMPORTANCE_MODIFIERS: r,
+	BUTTON_TYPES: i,
+	BUTTON_UNSTYLED_CLASS: e,
+	ICON_POSITION_MODIFIERS: a,
+	INVALID_COMBINATION: o,
+	BUTTON_ICON_SIZES: s
 };
-export {
-  c as BUTTON_ICON_SIZES,
-  r as BUTTON_IMPORTANCE_MODIFIERS,
-  s as BUTTON_KIND_MODIFIERS,
-  o as BUTTON_SIZE_MODIFIERS,
-  a as BUTTON_TYPES,
-  d as BUTTON_UNSTYLED_CLASS,
-  m as ICON_POSITION_MODIFIERS,
-  l as INVALID_COMBINATION,
-  u as default
-};
-//# sourceMappingURL=button-constants.js.map
+//#endregion
+export { s as BUTTON_ICON_SIZES, r as BUTTON_IMPORTANCE_MODIFIERS, n as BUTTON_KIND_MODIFIERS, t as BUTTON_SIZE_MODIFIERS, i as BUTTON_TYPES, e as BUTTON_UNSTYLED_CLASS, a as ICON_POSITION_MODIFIERS, o as INVALID_COMBINATION, l as default };
+
+//# sourceMappingURL=button-constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"button-constants.js","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"],"names":["BUTTON_UNSTYLED_CLASS","BUTTON_SIZE_MODIFIERS","BUTTON_KIND_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","BUTTON_TYPES","ICON_POSITION_MODIFIERS","INVALID_COMBINATION","_invalidCombinationMessage","BUTTON_ICON_SIZES","circle","kind","importance","button_constants"],"mappings":"AAAY,MAACA,IAAwB,mBAExBC,IAAwB;AAAA,EACnC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAwB;AAAA,EACnC,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,UAAU;AAAA,EACV,UAAU;AACZ,GAEaC,IAA8B;AAAA,EACzC,OAAO;AAAA,EACP,UAAU;AAAA,EACV,SAAS;AACX,GAEaC,IAAe,CAAC,UAAU,SAAS,QAAQ,GAE3CC,IAA0B;AAAA,EACrC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,KAAK;AAAA,EACL,QAAQ;AACV,GAEaC,IAAsB;AAAA,EACjC;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAASC,EAA2B,IAAM,WAAW,SAAS;AAAA,EAClE;AAAA,EACE;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAASA,EAA2B,IAAM,UAAU,UAAU;AAAA,EAClE;AAAA,EACE;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAASA,EAA2B,IAAM,SAAS,SAAS;AAAA,EAChE;AAAA,EACE;AAAA,IACE,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,YAAY;AAAA,IACZ,SAASA,EAA2B,IAAO,SAAS,SAAS;AAAA,EACjE;AACA,GAEaC,IAAoB;AAAA,EAC/B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,SAASD,EAA4BE,GAAQC,GAAMC,GAAY;AAC7D,SAAO,qBAAqBF,IAAS,YAAY,EAAE,qBACxCC,CAAI,oBAAoBC,CAAU;AAI/C;AAEA,MAAAC,IAAe;AAAA,EACb,uBAAAX;AAAA,EACA,uBAAAC;AAAA,EACA,6BAAAC;AAAA,EACA,cAAAC;AAAA,EACA,uBAAAJ;AAAA,EACA,yBAAAK;AAAA,EACA,qBAAAC;AAAA,EACA,mBAAAE;AACF;"}
+{"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"}

package/dist/lib/button/button.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),r=require("../../common/utils/index.cjs"),c=require("../loader/loader.cjs"),n=require("./button-constants.cjs"),h=require("../../localization/index.cjs"),f=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),d=require("../link/link-constants.cjs"),I={compatConfig:{MODE:3},name:"DtButton",components:{DtLoader:c.default},props:{circle:{type:Boolean,default:!1},iconPosition:{type:String,default:"left",validator:e=>Object.keys(n.ICON_POSITION_MODIFIERS).includes(e)},importance:{type:String,default:"primary",validator:e=>Object.keys(n.BUTTON_IMPORTANCE_MODIFIERS).includes(e)},link:{type:Boolean,default:!1},linkKind:{type:String,default:"default",validator:e=>Object.keys(d.LINK_KIND_MODIFIERS).includes(e)},linkInverted:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},type:{type:String,default:"button",validator:e=>n.BUTTON_TYPES.includes(e)},width:{type:String,default:null},size:{type:String,default:"md",validator:e=>Object.keys(n.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(n.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:n.ICON_POSITION_MODIFIERS,isInFocus:!1,hasSlotContent:r.hasSlotContent,i18n:new h.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(){const e={focusin:i=>{this.isInFocus=this.assertiveOnFocus,this.$emit("focusin",i)},focusout:i=>{this.isInFocus=!1,this.$emit("focusout",i)}};return this.isNativeButton||(this.disabled&&(e.click=i=>{i.preventDefault(),i.stopImmediatePropagation()}),e.keydown=i=>{(i.key===" "||i.code==="Space")&&(i.preventDefault(),this.disabled||i.target.click())}),e},computedAriaLive(){return this.assertiveOnFocus&&this.isInFocus?"assertive":this.$attrs.ariaLive},iconSize(){return n.BUTTON_ICON_SIZES[this.size]},loaderSize(){return n.BUTTON_ICON_SIZES[this.size]}},watch:{$props:{deep:!0,immediate:!0,handler(){process.env.NODE_ENV!=="production"&&(this.circle&&this.link&&t.warn("You cannot enable circle and link at the same time",this),this.isInvalidPropCombination(this.circle,this.kind,this.importance))}}},methods:{resolveRouterLink(){try{return t.resolveComponent("RouterLink")}catch{return t.warn('DtButton: "to" prop requires vue-router. Falling back to <a>.'),"a"}},buttonClasses(){return this.link?["d-link",d.getLinkKindModifier(this.linkKind,this.linkInverted),n.BUTTON_SIZE_MODIFIERS[this.size]]:this.kind==="unstyled"?["d-btn--unstyled"]:["d-btn",n.BUTTON_IMPORTANCE_MODIFIERS[this.importance],n.BUTTON_KIND_MODIFIERS[this.kind],n.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,i,s){if(this.kind==="unstyled")return!0;for(const a of n.INVALID_COMBINATION)if(e===a.circle&&i===a.kind&&s===a.importance)return t.warn(a.message),!1;return!0},shouldRenderIcon(){return r.hasSlotContent(this.$slots.icon)&&!this.link},isIconOnly(){return this.shouldRenderIcon()&&!r.hasSlotContent(this.$slots.default)},isVerticalIconLayout(){return!this.isIconOnly()&&["top","bottom"].includes(this.iconPosition)}}};function _(e,i,s,a,o,l){const u=t.resolveComponent("dt-loader");return t.openBlock(),t.createBlock(t.resolveDynamicComponent(l.computedTag),t.mergeProps({class:["base-button__button",l.buttonClasses()],"data-qa":"dt-button",style:{width:s.width},"aria-live":l.computedAriaLive,"aria-label":s.loading?o.i18n.$t("DIALTONE_LOADING"):e.$attrs["aria-label"]},l.computedAttrs,t.toHandlers(l.computedListeners)),{default:t.withCtx(()=>[s.loading&&s.kind!=="unstyled"?(t.openBlock(),t.createBlock(u,{key:0,class:"d-btn__loader",size:l.loaderSize,"aria-hidden":"true"},null,8,["size"])):t.createCommentVNode("",!0),l.shouldRenderIcon()?(t.openBlock(),t.createElementBlock("span",{key:1,"data-qa":"dt-button-icon",class:t.normalizeClass(["base-button__icon",{"d-btn__icon":s.kind!=="unstyled",[o.ICON_POSITION_MODIFIERS[s.iconPosition]]:s.kind!=="unstyled"}])},[t.renderSlot(e.$slots,"icon",{iconSize:l.iconSize})],2)):t.createCommentVNode("",!0),o.hasSlotContent(e.$slots.default)?(t.openBlock(),t.createElementBlock("span",{key:2,"data-qa":"dt-button-label",class:t.normalizeClass(["base-button__label",{"d-btn__label":s.kind!=="unstyled"},s.labelClass])},[t.renderSlot(e.$slots,"default")],2)):t.createCommentVNode("",!0)]),_:3},16,["class","style","aria-live","aria-label"])}const b=f._(I,[["render",_]]);exports.default=b;
-//# sourceMappingURL=button.cjs.map
+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;
+//# sourceMappingURL=button.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.cjs","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"],"names":["_sfc_main","DtLoader","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","lk","LINK_KIND_MODIFIERS","t","BUTTON_TYPES","s","BUTTON_SIZE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","hasSlotContent","DialtoneLocalization","listeners","e","BUTTON_ICON_SIZES","warn","resolveComponent","getLinkKindModifier","circle","kind","importance","row","INVALID_COMBINATION","_createBlock","_resolveDynamicComponent","$options","_mergeProps","$props","$data","_ctx","_toHandlers","_component_dt_loader","_createElementBlock","_normalizeClass","_renderSlot"],"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    <!-- 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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"}