npm - @dialpad/dialtone-vue - Versions diffs - 3.220.0-next.7 → 3.221.0 - Mend

@dialpad/dialtone-vue 3.220.0-next.7 → 3.221.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2032) hide show

package/dist/lib/avatar/utils.js CHANGED Viewed

@@ -1,4 +1,4 @@
-//#region components/Avatar/Utils.js
+//#region components/avatar/utils.js
 var e = (e) => {
 	if (typeof e != "string" || !e.trim()) return "";
 	e = e.replace(/[^\p{L}\p{N}\s]/gu, "");

package/dist/lib/avatar/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","names":[],"sources":["../../../components/~~Avatar~~/~~Utils~~.js"],"sourcesContent":["export const extractInitialsFromName = (fullName) => {\n if (typeof fullName !== 'string' \|\| !fullName.trim()) return '';\n\n // sanitize fullName by leaving only letters, numbers and spaces\n fullName = fullName.replace(/[^\\p{L}\\p{N}\\s]/gu, '');\n\n const names = fullName.trim().split(/\\s+/g);\n\n return names.length === 1\n ? names.join('').substring(0, 2)\n : names.filter((_, index) => (index === 0 \|\| index === names.length - 1))\n .map(name => name.slice(0, 1).toUpperCase())\n .join('');\n};\n"],"mappings":";AAAA,IAAa,KAA2B,MAAa;AACnD,KAAI,OAAO,KAAa,YAAY,CAAC,EAAS,MAAM,CAAE,QAAO;AAG7D,KAAW,EAAS,QAAQ,qBAAqB,GAAG;CAEpD,IAAM,IAAQ,EAAS,MAAM,CAAC,MAAM,OAAO;AAE3C,QAAO,EAAM,WAAW,IACpB,EAAM,KAAK,GAAG,CAAC,UAAU,GAAG,EAAE,GAC9B,EAAM,QAAQ,GAAG,MAAW,MAAU,KAAK,MAAU,EAAM,SAAS,EAAG,CACtE,KAAI,MAAQ,EAAK,MAAM,GAAG,EAAE,CAAC,aAAa,CAAC,CAC3C,KAAK,GAAG"}
1	+ {"version":3,"file":"utils.js","names":[],"sources":["../../../components/avatar/utils.js"],"sourcesContent":["export const extractInitialsFromName = (fullName) => {\n if (typeof fullName !== 'string' \|\| !fullName.trim()) return '';\n\n // sanitize fullName by leaving only letters, numbers and spaces\n fullName = fullName.replace(/[^\\p{L}\\p{N}\\s]/gu, '');\n\n const names = fullName.trim().split(/\\s+/g);\n\n return names.length === 1\n ? names.join('').substring(0, 2)\n : names.filter((_, index) => (index === 0 \|\| index === names.length - 1))\n .map(name => name.slice(0, 1).toUpperCase())\n .join('');\n};\n"],"mappings":";AAAA,IAAa,KAA2B,MAAa;AACnD,KAAI,OAAO,KAAa,YAAY,CAAC,EAAS,MAAM,CAAE,QAAO;AAG7D,KAAW,EAAS,QAAQ,qBAAqB,GAAG;CAEpD,IAAM,IAAQ,EAAS,MAAM,CAAC,MAAM,OAAO;AAE3C,QAAO,EAAM,WAAW,IACpB,EAAM,KAAK,GAAG,CAAC,UAAU,GAAG,EAAE,GAC9B,EAAM,QAAQ,GAAG,MAAW,MAAU,KAAK,MAAU,EAAM,SAAS,EAAG,CACtE,KAAI,MAAQ,EAAK,MAAM,GAAG,EAAE,CAAC,aAAa,CAAC,CAC3C,KAAK,GAAG"}

package/dist/lib/badge/badge-constants.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={default:``,info:`d-badge--info`,positive:`d-badge--positive`,warning:`d-badge--warning`,critical:`d-badge--critical`,bulletin:`d-badge--bulletin`,ai:`d-badge--ai`},t={label:``,count:`d-badge--count`},n={"black-400":`d-badge--decorate-black-400`,"black-500":`d-badge--decorate-black-500`,"black-900":`d-badge--decorate-black-900`,"red-200":`d-badge--decorate-red-200`,"red-300":`d-badge--decorate-red-300`,"red-400":`d-badge--decorate-red-400`,"purple-200":`d-badge--decorate-purple-200`,"purple-300":`d-badge--decorate-purple-300`,"purple-400":`d-badge--decorate-purple-400`,"purple-500":`d-badge--decorate-purple-500`,"blue-200":`d-badge--decorate-blue-200`,"blue-300":`d-badge--decorate-blue-300`,"blue-400":`d-badge--decorate-blue-400`,"green-300":`d-badge--decorate-green-300`,"green-400":`d-badge--decorate-green-400`,"green-500":`d-badge--decorate-green-500`,"gold-300":`d-badge--decorate-gold-300`,"gold-400":`d-badge--decorate-gold-400`,"gold-500":`d-badge--decorate-gold-500`,"magenta-200":`d-badge--decorate-magenta-200`,"magenta-300":`d-badge--decorate-magenta-300`,"magenta-400":`d-badge--decorate-magenta-400`};exports.BADGE_DECORATION_MODIFIERS=n,exports.BADGE_KIND_MODIFIERS=t,exports.BADGE_TYPE_MODIFIERS=e;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e={default:``,info:`d-badge--info`,success:`d-badge--success`,warning:`d-badge--warning`,critical:`d-badge--critical`,bulletin:`d-badge--bulletin`,ai:`d-badge--ai`},t={label:``,count:`d-badge--count`},n={"black-400":`d-badge--decorate-black-400`,"black-500":`d-badge--decorate-black-500`,"black-900":`d-badge--decorate-black-900`,"red-200":`d-badge--decorate-red-200`,"red-300":`d-badge--decorate-red-300`,"red-400":`d-badge--decorate-red-400`,"purple-200":`d-badge--decorate-purple-200`,"purple-300":`d-badge--decorate-purple-300`,"purple-400":`d-badge--decorate-purple-400`,"purple-500":`d-badge--decorate-purple-500`,"blue-200":`d-badge--decorate-blue-200`,"blue-300":`d-badge--decorate-blue-300`,"blue-400":`d-badge--decorate-blue-400`,"green-300":`d-badge--decorate-green-300`,"green-400":`d-badge--decorate-green-400`,"green-500":`d-badge--decorate-green-500`,"gold-300":`d-badge--decorate-gold-300`,"gold-400":`d-badge--decorate-gold-400`,"gold-500":`d-badge--decorate-gold-500`,"magenta-200":`d-badge--decorate-magenta-200`,"magenta-300":`d-badge--decorate-magenta-300`,"magenta-400":`d-badge--decorate-magenta-400`};exports.BADGE_DECORATION_MODIFIERS=n,exports.BADGE_KIND_MODIFIERS=t,exports.BADGE_TYPE_MODIFIERS=e;
 //# sourceMappingURL=badge-constants.cjs.map

package/dist/lib/badge/badge-constants.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge-constants.cjs","names":[],"sources":["../../../components/~~Badge~~/~~BadgeConstants~~.js"],"sourcesContent":["export const BADGE_TYPE_MODIFIERS = {\n default: '',\n info: 'd-badge--info',\n ~~positive~~: 'd-badge--~~positive~~',\n warning: 'd-badge--warning',\n critical: 'd-badge--critical',\n bulletin: 'd-badge--bulletin',\n ai: 'd-badge--ai',\n};\n\nexport const BADGE_KIND_MODIFIERS = {\n label: '',\n count: 'd-badge--count',\n};\n\nexport const BADGE_DECORATION_MODIFIERS = {\n 'black-400': 'd-badge--decorate-black-400',\n 'black-500': 'd-badge--decorate-black-500',\n 'black-900': 'd-badge--decorate-black-900',\n 'red-200': 'd-badge--decorate-red-200',\n 'red-300': 'd-badge--decorate-red-300',\n 'red-400': 'd-badge--decorate-red-400',\n 'purple-200': 'd-badge--decorate-purple-200',\n 'purple-300': 'd-badge--decorate-purple-300',\n 'purple-400': 'd-badge--decorate-purple-400',\n 'purple-500': 'd-badge--decorate-purple-500',\n 'blue-200': 'd-badge--decorate-blue-200',\n 'blue-300': 'd-badge--decorate-blue-300',\n 'blue-400': 'd-badge--decorate-blue-400',\n 'green-300': 'd-badge--decorate-green-300',\n 'green-400': 'd-badge--decorate-green-400',\n 'green-500': 'd-badge--decorate-green-500',\n 'gold-300': 'd-badge--decorate-gold-300',\n 'gold-400': 'd-badge--decorate-gold-400',\n 'gold-500': 'd-badge--decorate-gold-500',\n 'magenta-200': 'd-badge--decorate-magenta-200',\n 'magenta-300': 'd-badge--decorate-magenta-300',\n 'magenta-400': 'd-badge--decorate-magenta-400',\n};\n"],"mappings":"mEAAA,IAAa,EAAuB,CAClC,QAAS,GACT,KAAM,gBACN,~~SAAU~~,~~oBACV~~,QAAS,mBACT,SAAU,oBACV,SAAU,oBACV,GAAI,cACL,CAEY,EAAuB,CAClC,MAAO,GACP,MAAO,iBACR,CAEY,EAA6B,CACxC,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,UAAW,4BACX,UAAW,4BACX,UAAW,4BACX,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,cAAe,gCACf,cAAe,gCACf,cAAe,gCAChB"}
1	+ {"version":3,"file":"badge-constants.cjs","names":[],"sources":["../../../components/badge/badge_constants.js"],"sourcesContent":["export const BADGE_TYPE_MODIFIERS = {\n default: '',\n info: 'd-badge--info',\n success: 'd-badge--success',\n warning: 'd-badge--warning',\n critical: 'd-badge--critical',\n bulletin: 'd-badge--bulletin',\n ai: 'd-badge--ai',\n};\n\nexport const BADGE_KIND_MODIFIERS = {\n label: '',\n count: 'd-badge--count',\n};\n\nexport const BADGE_DECORATION_MODIFIERS = {\n 'black-400': 'd-badge--decorate-black-400',\n 'black-500': 'd-badge--decorate-black-500',\n 'black-900': 'd-badge--decorate-black-900',\n 'red-200': 'd-badge--decorate-red-200',\n 'red-300': 'd-badge--decorate-red-300',\n 'red-400': 'd-badge--decorate-red-400',\n 'purple-200': 'd-badge--decorate-purple-200',\n 'purple-300': 'd-badge--decorate-purple-300',\n 'purple-400': 'd-badge--decorate-purple-400',\n 'purple-500': 'd-badge--decorate-purple-500',\n 'blue-200': 'd-badge--decorate-blue-200',\n 'blue-300': 'd-badge--decorate-blue-300',\n 'blue-400': 'd-badge--decorate-blue-400',\n 'green-300': 'd-badge--decorate-green-300',\n 'green-400': 'd-badge--decorate-green-400',\n 'green-500': 'd-badge--decorate-green-500',\n 'gold-300': 'd-badge--decorate-gold-300',\n 'gold-400': 'd-badge--decorate-gold-400',\n 'gold-500': 'd-badge--decorate-gold-500',\n 'magenta-200': 'd-badge--decorate-magenta-200',\n 'magenta-300': 'd-badge--decorate-magenta-300',\n 'magenta-400': 'd-badge--decorate-magenta-400',\n};\n"],"mappings":"mEAAA,IAAa,EAAuB,CAClC,QAAS,GACT,KAAM,gBACN,QAAS,mBACT,QAAS,mBACT,SAAU,oBACV,SAAU,oBACV,GAAI,cACL,CAEY,EAAuB,CAClC,MAAO,GACP,MAAO,iBACR,CAEY,EAA6B,CACxC,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,UAAW,4BACX,UAAW,4BACX,UAAW,4BACX,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,aAAc,+BACd,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,YAAa,8BACb,YAAa,8BACb,YAAa,8BACb,WAAY,6BACZ,WAAY,6BACZ,WAAY,6BACZ,cAAe,gCACf,cAAe,gCACf,cAAe,gCAChB"}

package/dist/lib/badge/badge-constants.js CHANGED Viewed

@@ -1,8 +1,8 @@
-//#region components/Badge/BadgeConstants.js
+//#region components/badge/badge_constants.js
 var e = {
 	default: "",
 	info: "d-badge--info",
-	positive: "d-badge--positive",
+	success: "d-badge--success",
 	warning: "d-badge--warning",
 	critical: "d-badge--critical",
 	bulletin: "d-badge--bulletin",

package/dist/lib/badge/badge-constants.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge-constants.js","names":[],"sources":["../../../components/~~Badge~~/~~BadgeConstants~~.js"],"sourcesContent":["export const BADGE_TYPE_MODIFIERS = {\n default: '',\n info: 'd-badge--info',\n ~~positive~~: 'd-badge--~~positive~~',\n warning: 'd-badge--warning',\n critical: 'd-badge--critical',\n bulletin: 'd-badge--bulletin',\n ai: 'd-badge--ai',\n};\n\nexport const BADGE_KIND_MODIFIERS = {\n label: '',\n count: 'd-badge--count',\n};\n\nexport const BADGE_DECORATION_MODIFIERS = {\n 'black-400': 'd-badge--decorate-black-400',\n 'black-500': 'd-badge--decorate-black-500',\n 'black-900': 'd-badge--decorate-black-900',\n 'red-200': 'd-badge--decorate-red-200',\n 'red-300': 'd-badge--decorate-red-300',\n 'red-400': 'd-badge--decorate-red-400',\n 'purple-200': 'd-badge--decorate-purple-200',\n 'purple-300': 'd-badge--decorate-purple-300',\n 'purple-400': 'd-badge--decorate-purple-400',\n 'purple-500': 'd-badge--decorate-purple-500',\n 'blue-200': 'd-badge--decorate-blue-200',\n 'blue-300': 'd-badge--decorate-blue-300',\n 'blue-400': 'd-badge--decorate-blue-400',\n 'green-300': 'd-badge--decorate-green-300',\n 'green-400': 'd-badge--decorate-green-400',\n 'green-500': 'd-badge--decorate-green-500',\n 'gold-300': 'd-badge--decorate-gold-300',\n 'gold-400': 'd-badge--decorate-gold-400',\n 'gold-500': 'd-badge--decorate-gold-500',\n 'magenta-200': 'd-badge--decorate-magenta-200',\n 'magenta-300': 'd-badge--decorate-magenta-300',\n 'magenta-400': 'd-badge--decorate-magenta-400',\n};\n"],"mappings":";AAAA,IAAa,IAAuB;CAClC,SAAS;CACT,MAAM;CACN,~~UAAU~~;~~CACV~~,SAAS;CACT,UAAU;CACV,UAAU;CACV,IAAI;CACL,EAEY,IAAuB;CAClC,OAAO;CACP,OAAO;CACR,EAEY,IAA6B;CACxC,aAAa;CACb,aAAa;CACb,aAAa;CACb,WAAW;CACX,WAAW;CACX,WAAW;CACX,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,aAAa;CACb,aAAa;CACb,aAAa;CACb,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,eAAe;CACf,eAAe;CACf,eAAe;CAChB"}
1	+ {"version":3,"file":"badge-constants.js","names":[],"sources":["../../../components/badge/badge_constants.js"],"sourcesContent":["export const BADGE_TYPE_MODIFIERS = {\n default: '',\n info: 'd-badge--info',\n success: 'd-badge--success',\n warning: 'd-badge--warning',\n critical: 'd-badge--critical',\n bulletin: 'd-badge--bulletin',\n ai: 'd-badge--ai',\n};\n\nexport const BADGE_KIND_MODIFIERS = {\n label: '',\n count: 'd-badge--count',\n};\n\nexport const BADGE_DECORATION_MODIFIERS = {\n 'black-400': 'd-badge--decorate-black-400',\n 'black-500': 'd-badge--decorate-black-500',\n 'black-900': 'd-badge--decorate-black-900',\n 'red-200': 'd-badge--decorate-red-200',\n 'red-300': 'd-badge--decorate-red-300',\n 'red-400': 'd-badge--decorate-red-400',\n 'purple-200': 'd-badge--decorate-purple-200',\n 'purple-300': 'd-badge--decorate-purple-300',\n 'purple-400': 'd-badge--decorate-purple-400',\n 'purple-500': 'd-badge--decorate-purple-500',\n 'blue-200': 'd-badge--decorate-blue-200',\n 'blue-300': 'd-badge--decorate-blue-300',\n 'blue-400': 'd-badge--decorate-blue-400',\n 'green-300': 'd-badge--decorate-green-300',\n 'green-400': 'd-badge--decorate-green-400',\n 'green-500': 'd-badge--decorate-green-500',\n 'gold-300': 'd-badge--decorate-gold-300',\n 'gold-400': 'd-badge--decorate-gold-400',\n 'gold-500': 'd-badge--decorate-gold-500',\n 'magenta-200': 'd-badge--decorate-magenta-200',\n 'magenta-300': 'd-badge--decorate-magenta-300',\n 'magenta-400': 'd-badge--decorate-magenta-400',\n};\n"],"mappings":";AAAA,IAAa,IAAuB;CAClC,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,UAAU;CACV,UAAU;CACV,IAAI;CACL,EAEY,IAAuB;CAClC,OAAO;CACP,OAAO;CACR,EAEY,IAA6B;CACxC,aAAa;CACb,aAAa;CACb,aAAa;CACb,WAAW;CACX,WAAW;CACX,WAAW;CACX,cAAc;CACd,cAAc;CACd,cAAc;CACd,cAAc;CACd,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,aAAa;CACb,aAAa;CACb,aAAa;CACb,YAAY;CACZ,YAAY;CACZ,YAAY;CACZ,eAAe;CACf,eAAe;CACf,eAAe;CAChB"}

package/dist/lib/badge/badge.cjs CHANGED Viewed

@@ -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(`./badge-constants.cjs`),r=require(`../icon/icon-constants.cjs`);let i=require(`vue`);var a={name:`DtBadge`,props:{iconSize:{type:String,default:`200`,validator:e=>Object.keys(r.ICON_SIZE_MODIFIERS).includes(e)},text:{type:String,default:``},kind:{type:String,default:`label`,validator:e=>Object.keys(n.BADGE_KIND_MODIFIERS).includes(e)},type:{type:String,default:`default`,validator:e=>Object.keys(n.BADGE_TYPE_MODIFIERS).includes(e)},decoration:{type:String,default:void 0,validator:e=>Object.keys(n.BADGE_DECORATION_MODIFIERS).includes(e)},labelClass:{type:[String,Array,Object],default:``},startIconClass:{type:[String,Array,Object],default:``},endIconClass:{type:[String,Array,Object],default:``},subtle:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1}},data(){return{BADGE_TYPE_MODIFIERS:n.BADGE_TYPE_MODIFIERS,BADGE_KIND_MODIFIERS:n.BADGE_KIND_MODIFIERS,BADGE_DECORATION_MODIFIERS:n.BADGE_DECORATION_MODIFIERS}},computed:{hasLeftIcon(){return e.hasSlotContent(this.$slots.startIcon)||e.hasSlotContent(this.$slots.leftIcon)},hasRightIcon(){return e.hasSlotContent(this.$slots.endIcon)||e.hasSlotContent(this.$slots.rightIcon)},hasIcons(){return this.hasLeftIcon||this.hasRightIcon}},mounted(){this.validateProps()},updated(){this.validateProps()},methods:{validateProps(){this.validateTypePropCombination(),this.validateDecorationPropCombination()},validateTypePropCombination(){this.type===`ai`&&this.kind===`count`&&console.error(`DtBadge error: type: 'ai' with kind: 'count' is an invalid combination.`),this.type!==`bulletin`&&this.subtle&&console.error(`DtBadge error: subtle can only be used with type 'bulletin'`)},validateDecorationPropCombination(){this.decoration&&((this.kind!==`label`||this.type!==`default`)&&console.error(`DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'.`),this.hasIcons&&console.error(`DtBadge error: decoration prop cannot be used with startIcon or endIcon.`))}}},o={key:0,class:`d-badge__decorative`};function s(e,t,n,r,a,s){return(0,i.openBlock)(),(0,i.createElementBlock)(`span`,{class:(0,i.normalizeClass)([`d-badge`,a.BADGE_TYPE_MODIFIERS[n.type],a.BADGE_KIND_MODIFIERS[n.kind],a.BADGE_DECORATION_MODIFIERS[n.decoration],{"d-badge--subtle":n.subtle},{"d-badge--outlined":n.outlined}]),"data-qa":`dt-badge`},[n.decoration?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,o)):(0,i.createCommentVNode)(``,!0),s.hasLeftIcon?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,{key:1,class:(0,i.normalizeClass)([`d-badge__icon-left`,n.startIconClass])},[e.$slots.startIcon?(0,i.renderSlot)(e.$slots,`startIcon`,{key:0,iconSize:n.iconSize}):(0,i.renderSlot)(e.$slots,`leftIcon`,{key:1,iconSize:n.iconSize})],2)):(0,i.createCommentVNode)(``,!0),(0,i.createElementVNode)(`span`,{class:(0,i.normalizeClass)([`d-badge__label`,n.labelClass])},[(0,i.renderSlot)(e.$slots,`default`,{},()=>[(0,i.createTextVNode)((0,i.toDisplayString)(n.text),1)])],2),s.hasRightIcon?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,{key:2,class:(0,i.normalizeClass)([`d-badge__icon-right`,n.endIconClass])},[e.$slots.endIcon?(0,i.renderSlot)(e.$slots,`endIcon`,{key:0,iconSize:n.iconSize}):(0,i.renderSlot)(e.$slots,`rightIcon`,{key:1,iconSize:n.iconSize})],2)):(0,i.createCommentVNode)(``,!0)],2)}var c=t.t(a,[[`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(`../icon/icon-constants.cjs`),r=require(`./badge-constants.cjs`);let i=require(`vue`);var a={compatConfig:{MODE:3},name:`DtBadge`,props:{iconSize:{type:String,default:`200`,validator:e=>Object.keys(n.ICON_SIZE_MODIFIERS).includes(e)},text:{type:String,default:``},kind:{type:String,default:`label`,validator:e=>Object.keys(r.BADGE_KIND_MODIFIERS).includes(e)},type:{type:String,default:`default`,validator:e=>Object.keys(r.BADGE_TYPE_MODIFIERS).includes(e)},decoration:{type:String,default:void 0,validator:e=>Object.keys(r.BADGE_DECORATION_MODIFIERS).includes(e)},labelClass:{type:[String,Array,Object],default:``},subtle:{type:Boolean,default:!1},outlined:{type:Boolean,default:!1}},data(){return{BADGE_TYPE_MODIFIERS:r.BADGE_TYPE_MODIFIERS,BADGE_KIND_MODIFIERS:r.BADGE_KIND_MODIFIERS,BADGE_DECORATION_MODIFIERS:r.BADGE_DECORATION_MODIFIERS}},computed:{hasLeftIcon(){return e.hasSlotContent(this.$slots.leftIcon)},hasRightIcon(){return e.hasSlotContent(this.$slots.rightIcon)},hasIcons(){return this.hasLeftIcon||this.hasRightIcon}},updated(){this.validateProps()},methods:{validateProps(){this.validateTypePropCombination(),this.validateDecorationPropCombination()},validateTypePropCombination(){this.type===`ai`&&this.kind===`count`&&console.error(`DtBadge error: type: 'ai' with kind: 'count' is an invalid combination.`),this.type!==`bulletin`&&this.subtle&&console.error(`DtBadge error: subtle can only be used with type 'bulletin'`)},validateDecorationPropCombination(){this.decoration&&((this.kind!==`label`||this.type!==`default`)&&console.error(`DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'.`),this.hasIcons&&console.error(`DtBadge error: decoration prop cannot be used with leftIcon or rightIcon.`))}}},o={key:0,class:`d-badge__decorative`},s={key:1,class:`d-badge__icon-left`},c={key:2,class:`d-badge__icon-right`};function l(e,t,n,r,a,l){return(0,i.openBlock)(),(0,i.createElementBlock)(`span`,{class:(0,i.normalizeClass)([`d-badge`,a.BADGE_TYPE_MODIFIERS[n.type],a.BADGE_KIND_MODIFIERS[n.kind],a.BADGE_DECORATION_MODIFIERS[n.decoration],{"d-badge--subtle":n.subtle},{"d-badge--outlined":n.outlined}]),"data-qa":`dt-badge`},[n.decoration?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,o)):(0,i.createCommentVNode)(``,!0),l.hasLeftIcon?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,s,[(0,i.renderSlot)(e.$slots,`leftIcon`,{iconSize:n.iconSize})])):(0,i.createCommentVNode)(``,!0),(0,i.createElementVNode)(`span`,{class:(0,i.normalizeClass)([`d-badge__label`,n.labelClass])},[(0,i.renderSlot)(e.$slots,`default`,{},()=>[(0,i.createTextVNode)((0,i.toDisplayString)(n.text),1)])],2),l.hasRightIcon?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,c,[(0,i.renderSlot)(e.$slots,`rightIcon`,{iconSize:n.iconSize})])):(0,i.createCommentVNode)(``,!0)],2)}var u=t.t(a,[[`render`,l]]);exports.default=u;
 //# sourceMappingURL=badge.cjs.map

package/dist/lib/badge/badge.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge.cjs","names":[],"sources":["../../../components/~~Badge~~/~~Badge~~.vue"],"sourcesContent":["<template>\n <span\n :class=\"[\n 'd-badge',\n BADGE_TYPE_MODIFIERS[type],\n BADGE_KIND_MODIFIERS[kind],\n BADGE_DECORATION_MODIFIERS[decoration],\n { 'd-badge--subtle': subtle },\n { 'd-badge--outlined': outlined },\n ]\"\n data-qa=\"dt-badge\"\n >\n <span\n v-if=\"decoration\"\n class=\"d-badge__decorative\"\n />\n <span\n v-if=\"hasLeftIcon\"\n :class=\"['d-badge__icon-left~~', startIconClass]~~\"\n >\n <!-- @slot Slot for ~~start~~ icon, icon-size slot prop defaults to '200' -->\n <slot\n ~~v-if=\"$slots.startIcon\"\n~~ name=\"~~startIcon\"\n :icon-size=\"iconSize\"\n />\n <!-- @slot @deprecated Use startIcon -->\n <slot\n v-else\n name=\"~~leftIcon\"\n :icon-size=\"iconSize\"\n />\n </span>\n <span :class=\"['d-badge__label', labelClass]\">\n <!-- @slot Slot for badge content, defaults to text prop -->\n <slot>\n {{ text }}\n </slot>\n </span>\n <span\n v-if=\"hasRightIcon\"\n :class=\"['d-badge__icon-right~~', endIconClass]~~\"\n >\n <!-- @slot Slot for ~~end~~ icon, icon-size slot prop defaults to '200' -->\n <slot\n ~~v-if=\"$slots.endIcon\"\n~~ name=\"~~endIcon\"\n :icon-size=\"iconSize\"\n />\n <!-- @slot @deprecated Use endIcon -->\n <slot\n v-else\n name=\"~~rightIcon\"\n :icon-size=\"iconSize\"\n />\n </span>\n </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './~~BadgeConstants~~';\nimport { ICON_SIZE_MODIFIERS } from '@/components/~~Icon~~';\nimport { hasSlotContent } from '@/common/utils/index.js';\n\n/*\n A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n /\nexport default {\n name: 'DtBadge',\n\n props: {\n /\n The size of the left and right icons.\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n iconSize: {\n type: String,\n default: '200',\n validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n },\n\n /\n Text for the badge content\n /\n text: {\n type: String,\n default: '',\n },\n\n /\n The kind of badge which determines the styling\n * @values label, count\n /\n kind: {\n type: String,\n default: 'label',\n validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n },\n\n /\n Color for the badge background\n * @values default, info, ~~positive~~, warning, critical, bulletin, ai\n /\n type: {\n type: String,\n default: 'default',\n validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n },\n\n /\n Decoration for the badge. This can be only used with kind: label and type: default\n * with no left and right icons\n * @values black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n /\n decoration: {\n type: String,\n default: undefined,\n validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\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 start icon container\n /\n startIconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Used to customize the end icon container\n /\n endIconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Shows a subtle appearance for the badge\n * Currently only affects the badge when type is bulletin.\n /\n subtle: {\n type: Boolean,\n default: false,\n },\n\n /\n Outlines the badge with a border\n */\n outlined: {\n type: Boolean,\n default: false,\n },\n },\n\n data () {\n return {\n BADGE_TYPE_MODIFIERS,\n BADGE_KIND_MODIFIERS,\n BADGE_DECORATION_MODIFIERS,\n };\n },\n\n computed: {\n hasLeftIcon () {\n return hasSlotContent(this.$slots.~~startIcon) \|\| hasSlotContent(this.$slots.~~leftIcon);\n },\n\n hasRightIcon () {\n return hasSlotContent(this.$slots.~~endIcon) \|\| hasSlotContent(this.$slots.~~rightIcon);\n },\n\n hasIcons () {\n return this.hasLeftIcon \|\| this.hasRightIcon;\n },\n },\n\n ~~mounted () {\n this.validateProps();\n },\n\n~~ updated () {\n this.validateProps();\n },\n\n methods: {\n validateProps () {\n this.validateTypePropCombination();\n this.validateDecorationPropCombination();\n },\n\n validateTypePropCombination () {\n if (this.type === 'ai' && this.kind === 'count') {\n console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n }\n if (this.type !== 'bulletin' && this.subtle) {\n console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n }\n },\n\n validateDecorationPropCombination () {\n if (!this.decoration) return;\n\n if (this.kind !== 'label' \|\| this.type !== 'default') {\n console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n }\n\n if (this.hasIcons) {\n console.error('DtBadge error: decoration prop cannot be used with ~~startIcon~~ or ~~endIcon~~.');\n }\n },\n },\n};\n</script>\n"],"mappings":"~~6UAqEA~~,IAAK,EAAU,CACb,KAAM,UAEN,MAAO,CAKL,SAAU,CACR,KAAM,OACN,QAAS,MACT,UAAY,GAAM,OAAO,KAAK,EAAA,oBAAoB,CAAC,SAAS,EAAE,CAC/D,CAKD,KAAM,CACJ,KAAM,OACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,QACT,UAAY,GAAS,OAAO,KAAK,EAAA,qBAAqB,CAAC,SAAS,EAAK,CACtE,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,UACT,UAAY,GAAS,OAAO,KAAK,EAAA,qBAAqB,CAAC,SAAS,EAAK,CACtE,CASD,WAAY,CACV,KAAM,OACN,QAAS,IAAA,GACT,UAAY,GAAS,OAAO,KAAK,EAAA,2BAA2B,CAAC,SAAS,EAAK,CAC5E,CAKD,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,~~CAKD,eAAgB,CACd,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,aAAc,CACZ,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,~~CAMD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,qBAAA,EAAA,qBACA,qBAAA,EAAA,qBACA,2BAAA,EAAA,2BACD,EAGH,SAAU,CACR,aAAe,CACb,OAAO,EAAA,eAAe,KAAK,OAAO,~~UAAS,EAAK,EAAA,eAAe,KAAK,OAAO,~~SAAS,~~EAGtF~~,cAAgB,CACd,OAAO,EAAA,eAAe,KAAK,OAAO,~~QAAO,EAAK,EAAA,eAAe,KAAK,OAAO,~~UAAU,~~EAGrF~~,UAAY,CACV,OAAO,KAAK,aAAe,KAAK,cAEnC,CAED,SAAW,CACT,KAAK,eAAe,EAGtB,~~SAAW,CACT,KAAK,eAAe,EAGtB,~~QAAS,CACP,eAAiB,CACf,KAAK,6BAA6B,CAClC,KAAK,mCAAmC,EAG1C,6BAA+B,CACzB,KAAK,OAAS,MAAQ,KAAK,OAAS,SACtC,QAAQ,MAAM,0EAA8E,CAE1F,KAAK,OAAS,YAAc,KAAK,QACnC,QAAQ,MAAM,8DAAgE,EAIlF,mCAAqC,CAC9B,KAAK,cAEN,KAAK,OAAS,SAAW,KAAK,OAAS,YACzC,QAAQ,MAAM,0FAA8F,CAG1G,KAAK,UACP,QAAQ,MAAM,~~2EAA2E~~,~~GAG9F~~,CACF,~~UAjNK~~,MAAM,~~gGA0CH~~,OAAA,~~CAtDJ~~,OAAA,EAAA,EAAA,gBAAK,WAA2B,EAAA,qBAAqB,EAAA,MAAa,EAAA,qBAAqB,EAAA,MAAa,EAAA,2BAA2B,EAAA,+BAAwC,EAAA,OAAM,sBAAiC,EAAA,SAAQ,GAQvN,UAAQ,aAGA,EAAA,aAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEN,OAHF,EAGE,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAEM,EAAA,cAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,~~oBAeD~~,~~OAAA~~,~~OAdJ~~,~~OAAA,~~EAAA,EAAA,~~gBAAK,CAAA,qBAAyB,~~EAAA,~~eAAc~~,~~CAAA,GAIrC,~~EAAA,~~OAAO~~,WAAA,~~EAAA~~,EAAA,~~YAGb~~,~~EAAA~~,~~OAAA~~,~~YAAA~~,~~OADC~~,~~SAAW,~~EAAA,~~4BAOZ,~~EAAA,~~OAAA~~,~~WAAA~~,~~OADC~~,~~SAAW~~,~~EAAA,yEAQT,~~OAAA,CALA,OAAA,EAAA,EAAA,gBAAK,CAAA,iBAAqB,EAAA,WAAU,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,YAIlC,EAAA,OAAA,UAAA,EAAA,KAAA,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBADF,EAAA,KAAI,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAIH,EAAA,eAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,~~oBAeD~~,~~OAAA~~,~~OAdJ~~,~~OAAA~~,EAAA,EAAA,~~gBAAK~~,~~CAAA,sBAA0B,~~EAAA,~~aAAY~~,~~CAAA~~,~~GAIpC~~,~~EAAA~~,~~OAAO,SAAA,~~EAAA,~~EAAA~~,~~YAGb~~,~~EAAA~~,~~OAAA~~,~~UAAA~~,~~OADC,SAAW,~~EAAA,~~4BAOZ,~~EAAA,~~OAAA~~,~~YAAA~~,~~OADC,SAAW,EAAA~~"}
1	+ {"version":3,"file":"badge.cjs","names":[],"sources":["../../../components/badge/badge.vue"],"sourcesContent":["<template>\n <span\n :class=\"[\n 'd-badge',\n BADGE_TYPE_MODIFIERS[type],\n BADGE_KIND_MODIFIERS[kind],\n BADGE_DECORATION_MODIFIERS[decoration],\n { 'd-badge--subtle': subtle },\n { 'd-badge--outlined': outlined },\n ]\"\n data-qa=\"dt-badge\"\n >\n <span\n v-if=\"decoration\"\n class=\"d-badge__decorative\"\n />\n <span\n v-if=\"hasLeftIcon\"\n class=\"d-badge__icon-left\"\n >\n <!-- @slot Slot for left icon, icon-size slot prop defaults to '200' -->\n <slot\n name=\"leftIcon\"\n :icon-size=\"iconSize\"\n />\n </span>\n <span :class=\"['d-badge__label', labelClass]\">\n <!-- @slot Slot for badge content, defaults to text prop -->\n <slot>\n {{ text }}\n </slot>\n </span>\n <span\n v-if=\"hasRightIcon\"\n class=\"d-badge__icon-right\"\n >\n <!-- @slot Slot for right icon, icon-size slot prop defaults to '200' -->\n <slot\n name=\"rightIcon\"\n :icon-size=\"iconSize\"\n />\n </span>\n </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\n\n/*\n A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtBadge',\n\n props: {\n /\n The size of the left and right icons.\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n iconSize: {\n type: String,\n default: '200',\n validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n },\n\n /\n Text for the badge content\n /\n text: {\n type: String,\n default: '',\n },\n\n /\n The kind of badge which determines the styling\n * @values label, count\n /\n kind: {\n type: String,\n default: 'label',\n validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n },\n\n /\n Color for the badge background\n * @values default, info, success, warning, critical, bulletin, ai\n /\n type: {\n type: String,\n default: 'default',\n validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n },\n\n /\n Decoration for the badge. This can be only used with kind: label and type: default\n * with no left and right icons\n * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n /\n decoration: {\n type: String,\n default: undefined,\n validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n },\n\n /\n Used to customize the label container\n /\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Shows a subtle appearance for the badge\n * Currently only affects the badge when type is bulletin.\n /\n subtle: {\n type: Boolean,\n default: false,\n },\n\n /\n Outlines the badge with a border\n */\n outlined: {\n type: Boolean,\n default: false,\n },\n },\n\n data () {\n return {\n BADGE_TYPE_MODIFIERS,\n BADGE_KIND_MODIFIERS,\n BADGE_DECORATION_MODIFIERS,\n };\n },\n\n computed: {\n hasLeftIcon () {\n return hasSlotContent(this.$slots.leftIcon);\n },\n\n hasRightIcon () {\n return hasSlotContent(this.$slots.rightIcon);\n },\n\n hasIcons () {\n return this.hasLeftIcon \|\| this.hasRightIcon;\n },\n },\n\n updated () {\n this.validateProps();\n },\n\n methods: {\n validateProps () {\n this.validateTypePropCombination();\n this.validateDecorationPropCombination();\n },\n\n validateTypePropCombination () {\n if (this.type === 'ai' && this.kind === 'count') {\n console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n }\n if (this.type !== 'bulletin' && this.subtle) {\n console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n }\n },\n\n validateDecorationPropCombination () {\n if (!this.decoration) return;\n\n if (this.kind !== 'label' \|\| this.type !== 'default') {\n console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n }\n\n if (this.hasIcons) {\n console.error('DtBadge error: decoration prop cannot be used with leftIcon or rightIcon.');\n }\n },\n },\n};\n</script>\n"],"mappings":"6UAuDA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,UAEN,MAAO,CAKL,SAAU,CACR,KAAM,OACN,QAAS,MACT,UAAY,GAAM,OAAO,KAAK,EAAA,oBAAoB,CAAC,SAAS,EAAE,CAC/D,CAKD,KAAM,CACJ,KAAM,OACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,QACT,UAAY,GAAS,OAAO,KAAK,EAAA,qBAAqB,CAAC,SAAS,EAAK,CACtE,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,UACT,UAAY,GAAS,OAAO,KAAK,EAAA,qBAAqB,CAAC,SAAS,EAAK,CACtE,CASD,WAAY,CACV,KAAM,OACN,QAAS,IAAA,GACT,UAAY,GAAS,OAAO,KAAK,EAAA,2BAA2B,CAAC,SAAS,EAAK,CAC5E,CAKD,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAMD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CAKD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,qBAAA,EAAA,qBACA,qBAAA,EAAA,qBACA,2BAAA,EAAA,2BACD,EAGH,SAAU,CACR,aAAe,CACb,OAAO,EAAA,eAAe,KAAK,OAAO,SAAS,EAG7C,cAAgB,CACd,OAAO,EAAA,eAAe,KAAK,OAAO,UAAU,EAG9C,UAAY,CACV,OAAO,KAAK,aAAe,KAAK,cAEnC,CAED,SAAW,CACT,KAAK,eAAe,EAGtB,QAAS,CACP,eAAiB,CACf,KAAK,6BAA6B,CAClC,KAAK,mCAAmC,EAG1C,6BAA+B,CACzB,KAAK,OAAS,MAAQ,KAAK,OAAS,SACtC,QAAQ,MAAM,0EAA8E,CAE1F,KAAK,OAAS,YAAc,KAAK,QACnC,QAAQ,MAAM,8DAAgE,EAIlF,mCAAqC,CAC9B,KAAK,cAEN,KAAK,OAAS,SAAW,KAAK,OAAS,YACzC,QAAQ,MAAM,0FAA8F,CAG1G,KAAK,UACP,QAAQ,MAAM,4EAA4E,GAG/F,CACF,UAhLK,MAAM,gCAIN,MAAM,+BAgBN,MAAM,gGAQH,OAAA,CAxCJ,OAAA,EAAA,EAAA,gBAAK,WAA2B,EAAA,qBAAqB,EAAA,MAAa,EAAA,qBAAqB,EAAA,MAAa,EAAA,2BAA2B,EAAA,+BAAwC,EAAA,OAAM,sBAAiC,EAAA,SAAQ,GAQvN,UAAQ,aAGA,EAAA,aAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEN,OAHF,EAGE,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAEM,EAAA,cAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQD,OATP,EASO,EAAA,EAAA,EAAA,YADH,EAAA,OAAA,WAAA,CADC,SAAW,EAAA,SAAQ,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,0BAQjB,OAAA,CALA,OAAA,EAAA,EAAA,gBAAK,CAAA,iBAAqB,EAAA,WAAU,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,YAIlC,EAAA,OAAA,UAAA,EAAA,KAAA,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBADF,EAAA,KAAI,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,EAAA,CAIH,EAAA,eAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQD,OATP,EASO,EAAA,EAAA,EAAA,YADH,EAAA,OAAA,YAAA,CADC,SAAW,EAAA,SAAQ,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA"}

package/dist/lib/badge/badge.js CHANGED Viewed

@@ -1,16 +1,17 @@
 import { hasSlotContent as e } from "../../common/utils/index.js";
 import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { BADGE_DECORATION_MODIFIERS as n, BADGE_KIND_MODIFIERS as r, BADGE_TYPE_MODIFIERS as i } from "./badge-constants.js";
-import { ICON_SIZE_MODIFIERS as a } from "../icon/icon-constants.js";
+import { ICON_SIZE_MODIFIERS as n } from "../icon/icon-constants.js";
+import { BADGE_DECORATION_MODIFIERS as r, BADGE_KIND_MODIFIERS as i, BADGE_TYPE_MODIFIERS as a } from "./badge-constants.js";
 import { createCommentVNode as o, createElementBlock as s, createElementVNode as c, createTextVNode as l, normalizeClass as u, openBlock as d, renderSlot as f, toDisplayString as p } from "vue";
-//#region components/Badge/Badge.vue
+//#region components/badge/badge.vue
 var m = {
+	compatConfig: { MODE: 3 },
 	name: "DtBadge",
 	props: {
 		iconSize: {
 			type: String,
 			default: "200",
-			validator: (e) => Object.keys(a).includes(e)
+			validator: (e) => Object.keys(n).includes(e)
 		},
 		text: {
 			type: String,
@@ -19,17 +20,17 @@ var m = {
 		kind: {
 			type: String,
 			default: "label",
-			validator: (e) => Object.keys(r).includes(e)
+			validator: (e) => Object.keys(i).includes(e)
 		},
 		type: {
 			type: String,
 			default: "default",
-			validator: (e) => Object.keys(i).includes(e)
+			validator: (e) => Object.keys(a).includes(e)
 		},
 		decoration: {
 			type: String,
 			default: void 0,
-			validator: (e) => Object.keys(n).includes(e)
+			validator: (e) => Object.keys(r).includes(e)
 		},
 		labelClass: {
 			type: [
@@ -39,22 +40,6 @@ var m = {
 			],
 			default: ""
 		},
-		startIconClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		endIconClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
 		subtle: {
 			type: Boolean,
 			default: !1
@@ -66,25 +51,22 @@ var m = {
 	},
 	data() {
 		return {
-			BADGE_TYPE_MODIFIERS: i,
-			BADGE_KIND_MODIFIERS: r,
-			BADGE_DECORATION_MODIFIERS: n
+			BADGE_TYPE_MODIFIERS: a,
+			BADGE_KIND_MODIFIERS: i,
+			BADGE_DECORATION_MODIFIERS: r
 		};
 	},
 	computed: {
 		hasLeftIcon() {
-			return e(this.$slots.startIcon) || e(this.$slots.leftIcon);
+			return e(this.$slots.leftIcon);
 		},
 		hasRightIcon() {
-			return e(this.$slots.endIcon) || e(this.$slots.rightIcon);
+			return e(this.$slots.rightIcon);
 		},
 		hasIcons() {
 			return this.hasLeftIcon || this.hasRightIcon;
 		}
 	},
-	mounted() {
-		this.validateProps();
-	},
 	updated() {
 		this.validateProps();
 	},
@@ -96,14 +78,20 @@ var m = {
 			this.type === "ai" && this.kind === "count" && console.error("DtBadge error: type: 'ai' with kind: 'count' is an invalid combination."), this.type !== "bulletin" && this.subtle && console.error("DtBadge error: subtle can only be used with type 'bulletin'");
 		},
 		validateDecorationPropCombination() {
-			this.decoration && ((this.kind !== "label" || this.type !== "default") && console.error("DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'."), this.hasIcons && console.error("DtBadge error: decoration prop cannot be used with startIcon or endIcon."));
+			this.decoration && ((this.kind !== "label" || this.type !== "default") && console.error("DtBadge error: decoration prop can only be used with kind: 'label' and type: 'default'."), this.hasIcons && console.error("DtBadge error: decoration prop cannot be used with leftIcon or rightIcon."));
 		}
 	}
 }, h = {
 	key: 0,
 	class: "d-badge__decorative"
+}, g = {
+	key: 1,
+	class: "d-badge__icon-left"
+}, _ = {
+	key: 2,
+	class: "d-badge__icon-right"
 };
-function g(e, t, n, r, i, a) {
+function v(e, t, n, r, i, a) {
 	return d(), s("span", {
 		class: u([
 			"d-badge",
@@ -116,31 +104,13 @@ function g(e, t, n, r, i, a) {
 		"data-qa": "dt-badge"
 	}, [
 		n.decoration ? (d(), s("span", h)) : o("", !0),
-		a.hasLeftIcon ? (d(), s("span", {
-			key: 1,
-			class: u(["d-badge__icon-left", n.startIconClass])
-		}, [e.$slots.startIcon ? f(e.$slots, "startIcon", {
-			key: 0,
-			iconSize: n.iconSize
-		}) : f(e.$slots, "leftIcon", {
-			key: 1,
-			iconSize: n.iconSize
-		})], 2)) : o("", !0),
+		a.hasLeftIcon ? (d(), s("span", g, [f(e.$slots, "leftIcon", { iconSize: n.iconSize })])) : o("", !0),
 		c("span", { class: u(["d-badge__label", n.labelClass]) }, [f(e.$slots, "default", {}, () => [l(p(n.text), 1)])], 2),
-		a.hasRightIcon ? (d(), s("span", {
-			key: 2,
-			class: u(["d-badge__icon-right", n.endIconClass])
-		}, [e.$slots.endIcon ? f(e.$slots, "endIcon", {
-			key: 0,
-			iconSize: n.iconSize
-		}) : f(e.$slots, "rightIcon", {
-			key: 1,
-			iconSize: n.iconSize
-		})], 2)) : o("", !0)
+		a.hasRightIcon ? (d(), s("span", _, [f(e.$slots, "rightIcon", { iconSize: n.iconSize })])) : o("", !0)
 	], 2);
 }
-var _ = /* @__PURE__ */ t(m, [["render", g]]);
+var y = /* @__PURE__ */ t(m, [["render", v]]);
 //#endregion
-export { _ as default };
+export { y as default };
 //# sourceMappingURL=badge.js.map

package/dist/lib/badge/badge.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"badge.js","names":[],"sources":["../../../components/~~Badge~~/~~Badge~~.vue"],"sourcesContent":["<template>\n <span\n :class=\"[\n 'd-badge',\n BADGE_TYPE_MODIFIERS[type],\n BADGE_KIND_MODIFIERS[kind],\n BADGE_DECORATION_MODIFIERS[decoration],\n { 'd-badge--subtle': subtle },\n { 'd-badge--outlined': outlined },\n ]\"\n data-qa=\"dt-badge\"\n >\n <span\n v-if=\"decoration\"\n class=\"d-badge__decorative\"\n />\n <span\n v-if=\"hasLeftIcon\"\n :class=\"['d-badge__icon-left~~', startIconClass]~~\"\n >\n <!-- @slot Slot for ~~start~~ icon, icon-size slot prop defaults to '200' -->\n <slot\n ~~v-if=\"$slots.startIcon\"\n~~ name=\"~~startIcon\"\n :icon-size=\"iconSize\"\n />\n <!-- @slot @deprecated Use startIcon -->\n <slot\n v-else\n name=\"~~leftIcon\"\n :icon-size=\"iconSize\"\n />\n </span>\n <span :class=\"['d-badge__label', labelClass]\">\n <!-- @slot Slot for badge content, defaults to text prop -->\n <slot>\n {{ text }}\n </slot>\n </span>\n <span\n v-if=\"hasRightIcon\"\n :class=\"['d-badge__icon-right~~', endIconClass]~~\"\n >\n <!-- @slot Slot for ~~end~~ icon, icon-size slot prop defaults to '200' -->\n <slot\n ~~v-if=\"$slots.endIcon\"\n~~ name=\"~~endIcon\"\n :icon-size=\"iconSize\"\n />\n <!-- @slot @deprecated Use endIcon -->\n <slot\n v-else\n name=\"~~rightIcon\"\n :icon-size=\"iconSize\"\n />\n </span>\n </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './~~BadgeConstants~~';\nimport { ICON_SIZE_MODIFIERS } from '@/components/~~Icon~~';\nimport { hasSlotContent } from '@/common/utils/index.js';\n\n/*\n A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n /\nexport default {\n name: 'DtBadge',\n\n props: {\n /\n The size of the left and right icons.\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n iconSize: {\n type: String,\n default: '200',\n validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n },\n\n /\n Text for the badge content\n /\n text: {\n type: String,\n default: '',\n },\n\n /\n The kind of badge which determines the styling\n * @values label, count\n /\n kind: {\n type: String,\n default: 'label',\n validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n },\n\n /\n Color for the badge background\n * @values default, info, ~~positive~~, warning, critical, bulletin, ai\n /\n type: {\n type: String,\n default: 'default',\n validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n },\n\n /\n Decoration for the badge. This can be only used with kind: label and type: default\n * with no left and right icons\n * @values black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n /\n decoration: {\n type: String,\n default: undefined,\n validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\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 start icon container\n /\n startIconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Used to customize the end icon container\n /\n endIconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Shows a subtle appearance for the badge\n * Currently only affects the badge when type is bulletin.\n /\n subtle: {\n type: Boolean,\n default: false,\n },\n\n /\n Outlines the badge with a border\n */\n outlined: {\n type: Boolean,\n default: false,\n },\n },\n\n data () {\n return {\n BADGE_TYPE_MODIFIERS,\n BADGE_KIND_MODIFIERS,\n BADGE_DECORATION_MODIFIERS,\n };\n },\n\n computed: {\n hasLeftIcon () {\n return hasSlotContent(this.$slots.~~startIcon) \|\| hasSlotContent(this.$slots.~~leftIcon);\n },\n\n hasRightIcon () {\n return hasSlotContent(this.$slots.~~endIcon) \|\| hasSlotContent(this.$slots.~~rightIcon);\n },\n\n hasIcons () {\n return this.hasLeftIcon \|\| this.hasRightIcon;\n },\n },\n\n ~~mounted () {\n this.validateProps();\n },\n\n~~ updated () {\n this.validateProps();\n },\n\n methods: {\n validateProps () {\n this.validateTypePropCombination();\n this.validateDecorationPropCombination();\n },\n\n validateTypePropCombination () {\n if (this.type === 'ai' && this.kind === 'count') {\n console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n }\n if (this.type !== 'bulletin' && this.subtle) {\n console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n }\n },\n\n validateDecorationPropCombination () {\n if (!this.decoration) return;\n\n if (this.kind !== 'label' \|\| this.type !== 'default') {\n console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n }\n\n if (this.hasIcons) {\n console.error('DtBadge error: decoration prop cannot be used with ~~startIcon~~ or ~~endIcon~~.');\n }\n },\n },\n};\n</script>\n"],"mappings":";;;;;;~~AAqEA~~,IAAK,IAAU;CACb,MAAM;CAEN,OAAO;EAKL,UAAU;GACR,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAoB,CAAC,SAAS,EAAE;GAC/D;EAKD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAS,OAAO,KAAK,EAAqB,CAAC,SAAS,EAAK;GACtE;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAS,OAAO,KAAK,EAAqB,CAAC,SAAS,EAAK;GACtE;EASD,YAAY;GACV,MAAM;GACN,SAAS,KAAA;GACT,YAAY,MAAS,OAAO,KAAK,EAA2B,CAAC,SAAS,EAAK;GAC5E;EAKD,YAAY;GACV,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;~~EAKD,gBAAgB;GACd,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;~~EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO;GACL;GACA;GACA;GACD;;CAGH,UAAU;EACR,cAAe;AACb,UAAO,EAAe,KAAK,OAAO,~~UAAS,IAAK,EAAe,KAAK,OAAO,~~SAAS;;~~EAGtF~~,eAAgB;AACd,UAAO,EAAe,KAAK,OAAO,~~QAAO,IAAK,EAAe,KAAK,OAAO,~~UAAU;;~~EAGrF~~,WAAY;AACV,UAAO,KAAK,eAAe,KAAK;;EAEnC;CAED,UAAW;AACT,OAAK,eAAe;;CAGtB,~~UAAW;AACT,OAAK,eAAe;;CAGtB,~~SAAS;EACP,gBAAiB;AAEf,GADA,KAAK,6BAA6B,EAClC,KAAK,mCAAmC;;EAG1C,8BAA+B;AAI7B,GAHI,KAAK,SAAS,QAAQ,KAAK,SAAS,WACtC,QAAQ,MAAM,0EAA8E,EAE1F,KAAK,SAAS,cAAc,KAAK,UACnC,QAAQ,MAAM,8DAAgE;;EAIlF,oCAAqC;AAC9B,QAAK,gBAEN,KAAK,SAAS,WAAW,KAAK,SAAS,cACzC,QAAQ,MAAM,0FAA8F,EAG1G,KAAK,YACP,QAAQ,MAAM,~~2EAA2E~~;;~~EAG9F~~;CACF;;~~CAjNK~~,OAAM;;;~~aAbV~~,~~EAuDO~~,QAAA;~~EAtDJ~~,OAAK,EAAA;;GAA2B,EAAA,qBAAqB,EAAA;GAAa,EAAA,qBAAqB,EAAA;GAAa,EAAA,2BAA2B,EAAA;wBAAwC,EAAA,QAAM;0BAAiC,EAAA,UAAQ;;EAQvN,WAAQ;;EAGA,EAAA,cAAA,GAAA,EADR,EAGE,QAHF,EAGE,IAAA,EAAA,IAAA,GAAA;EAEM,EAAA,eAAA,GAAA,EADR,~~EAgBO~~,~~QAAA;;GAdJ~~,~~OAAK~~,~~EAAA~~,~~CAAA~~,~~sBAAyB,~~EAAA,~~eAAc~~,~~CAAA;MAIrC~~,~~EAAA~~,~~OAAO~~,~~YADf,EAIE,~~EAAA,~~QAAA~~,~~aAAA;;GADC~~,~~UAAW~~,~~EAAA;OAGd~~,~~EAIE~~,EAAA,~~QAAA~~,~~YAAA;;GADC~~,~~UAAW,EAAA;;EAGhB,~~EAKO,QAAA,EALA,OAAK,EAAA,CAAA,kBAAqB,EAAA,WAAU,CAAA,EAAA,EAAA,CAEzC,EAEO,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,KAAI,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA;EAIH,EAAA,gBAAA,GAAA,EADR,~~EAgBO~~,~~QAAA;;GAdJ~~,~~OAAK~~,~~EAAA~~,~~CAAA~~,~~uBAA0B,~~EAAA,~~aAAY~~,~~CAAA;MAIpC~~,~~EAAA~~,~~OAAO~~,~~UADf,EAIE,~~EAAA,~~QAAA~~,~~WAAA;;GADC~~,~~UAAW~~,~~EAAA;OAGd~~,~~EAIE~~,EAAA,~~QAAA~~,~~aAAA;;GADC,UAAW,EAAA~~"}
1	+ {"version":3,"file":"badge.js","names":[],"sources":["../../../components/badge/badge.vue"],"sourcesContent":["<template>\n <span\n :class=\"[\n 'd-badge',\n BADGE_TYPE_MODIFIERS[type],\n BADGE_KIND_MODIFIERS[kind],\n BADGE_DECORATION_MODIFIERS[decoration],\n { 'd-badge--subtle': subtle },\n { 'd-badge--outlined': outlined },\n ]\"\n data-qa=\"dt-badge\"\n >\n <span\n v-if=\"decoration\"\n class=\"d-badge__decorative\"\n />\n <span\n v-if=\"hasLeftIcon\"\n class=\"d-badge__icon-left\"\n >\n <!-- @slot Slot for left icon, icon-size slot prop defaults to '200' -->\n <slot\n name=\"leftIcon\"\n :icon-size=\"iconSize\"\n />\n </span>\n <span :class=\"['d-badge__label', labelClass]\">\n <!-- @slot Slot for badge content, defaults to text prop -->\n <slot>\n {{ text }}\n </slot>\n </span>\n <span\n v-if=\"hasRightIcon\"\n class=\"d-badge__icon-right\"\n >\n <!-- @slot Slot for right icon, icon-size slot prop defaults to '200' -->\n <slot\n name=\"rightIcon\"\n :icon-size=\"iconSize\"\n />\n </span>\n </span>\n</template>\n\n<script>\nimport { BADGE_TYPE_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_DECORATION_MODIFIERS } from './badge_constants';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport { hasSlotContent } from '@/common/utils/index.js';\n\n/*\n A badge is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word.\n * @see https://dialtone.dialpad.com/components/badge.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtBadge',\n\n props: {\n /\n The size of the left and right icons.\n * @values 100, 200, 300, 400, 500, 600, 700, 800\n /\n iconSize: {\n type: String,\n default: '200',\n validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n },\n\n /\n Text for the badge content\n /\n text: {\n type: String,\n default: '',\n },\n\n /\n The kind of badge which determines the styling\n * @values label, count\n /\n kind: {\n type: String,\n default: 'label',\n validator: (kind) => Object.keys(BADGE_KIND_MODIFIERS).includes(kind),\n },\n\n /\n Color for the badge background\n * @values default, info, success, warning, critical, bulletin, ai\n /\n type: {\n type: String,\n default: 'default',\n validator: (type) => Object.keys(BADGE_TYPE_MODIFIERS).includes(type),\n },\n\n /\n Decoration for the badge. This can be only used with kind: label and type: default\n * with no left and right icons\n * @values default, black-400, black-500, black-900, red-200, red-300, red-400, purple-200,\n * purple-300, purple-400, purple-500, blue-200, blue-300, blue-400, green-300, green-400,\n * green-500, gold-300, gold-400, gold-500, magenta-200, magenta-300, magenta-400\n /\n decoration: {\n type: String,\n default: undefined,\n validator: (type) => Object.keys(BADGE_DECORATION_MODIFIERS).includes(type),\n },\n\n /\n Used to customize the label container\n /\n labelClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Shows a subtle appearance for the badge\n * Currently only affects the badge when type is bulletin.\n /\n subtle: {\n type: Boolean,\n default: false,\n },\n\n /\n Outlines the badge with a border\n */\n outlined: {\n type: Boolean,\n default: false,\n },\n },\n\n data () {\n return {\n BADGE_TYPE_MODIFIERS,\n BADGE_KIND_MODIFIERS,\n BADGE_DECORATION_MODIFIERS,\n };\n },\n\n computed: {\n hasLeftIcon () {\n return hasSlotContent(this.$slots.leftIcon);\n },\n\n hasRightIcon () {\n return hasSlotContent(this.$slots.rightIcon);\n },\n\n hasIcons () {\n return this.hasLeftIcon \|\| this.hasRightIcon;\n },\n },\n\n updated () {\n this.validateProps();\n },\n\n methods: {\n validateProps () {\n this.validateTypePropCombination();\n this.validateDecorationPropCombination();\n },\n\n validateTypePropCombination () {\n if (this.type === 'ai' && this.kind === 'count') {\n console.error('DtBadge error: type: \\'ai\\' with kind: \\'count\\' is an invalid combination.');\n }\n if (this.type !== 'bulletin' && this.subtle) {\n console.error('DtBadge error: subtle can only be used with type \\'bulletin\\'');\n }\n },\n\n validateDecorationPropCombination () {\n if (!this.decoration) return;\n\n if (this.kind !== 'label' \|\| this.type !== 'default') {\n console.error('DtBadge error: decoration prop can only be used with kind: \\'label\\' and type: \\'default\\'.');\n }\n\n if (this.hasIcons) {\n console.error('DtBadge error: decoration prop cannot be used with leftIcon or rightIcon.');\n }\n },\n },\n};\n</script>\n"],"mappings":";;;;;;AAuDA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,OAAO;EAKL,UAAU;GACR,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAoB,CAAC,SAAS,EAAE;GAC/D;EAKD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAS,OAAO,KAAK,EAAqB,CAAC,SAAS,EAAK;GACtE;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAS,OAAO,KAAK,EAAqB,CAAC,SAAS,EAAK;GACtE;EASD,YAAY;GACV,MAAM;GACN,SAAS,KAAA;GACT,YAAY,MAAS,OAAO,KAAK,EAA2B,CAAC,SAAS,EAAK;GAC5E;EAKD,YAAY;GACV,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO;GACL;GACA;GACA;GACD;;CAGH,UAAU;EACR,cAAe;AACb,UAAO,EAAe,KAAK,OAAO,SAAS;;EAG7C,eAAgB;AACd,UAAO,EAAe,KAAK,OAAO,UAAU;;EAG9C,WAAY;AACV,UAAO,KAAK,eAAe,KAAK;;EAEnC;CAED,UAAW;AACT,OAAK,eAAe;;CAGtB,SAAS;EACP,gBAAiB;AAEf,GADA,KAAK,6BAA6B,EAClC,KAAK,mCAAmC;;EAG1C,8BAA+B;AAI7B,GAHI,KAAK,SAAS,QAAQ,KAAK,SAAS,WACtC,QAAQ,MAAM,0EAA8E,EAE1F,KAAK,SAAS,cAAc,KAAK,UACnC,QAAQ,MAAM,8DAAgE;;EAIlF,oCAAqC;AAC9B,QAAK,gBAEN,KAAK,SAAS,WAAW,KAAK,SAAS,cACzC,QAAQ,MAAM,0FAA8F,EAG1G,KAAK,YACP,QAAQ,MAAM,4EAA4E;;EAG/F;CACF;;CAhLK,OAAM;;;CAIN,OAAM;;;CAgBN,OAAM;;;aAjCV,EAyCO,QAAA;EAxCJ,OAAK,EAAA;;GAA2B,EAAA,qBAAqB,EAAA;GAAa,EAAA,qBAAqB,EAAA;GAAa,EAAA,2BAA2B,EAAA;wBAAwC,EAAA,QAAM;0BAAiC,EAAA,UAAQ;;EAQvN,WAAQ;;EAGA,EAAA,cAAA,GAAA,EADR,EAGE,QAHF,EAGE,IAAA,EAAA,IAAA,GAAA;EAEM,EAAA,eAAA,GAAA,EADR,EASO,QATP,GASO,CAJL,EAGE,EAAA,QAAA,YAAA,EADC,UAAW,EAAA,UAAQ,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;EAGxB,EAKO,QAAA,EALA,OAAK,EAAA,CAAA,kBAAqB,EAAA,WAAU,CAAA,EAAA,EAAA,CAEzC,EAEO,EAAA,QAAA,WAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,KAAI,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,EAAA;EAIH,EAAA,gBAAA,GAAA,EADR,EASO,QATP,GASO,CAJL,EAGE,EAAA,QAAA,aAAA,EADC,UAAW,EAAA,UAAQ,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA"}

package/dist/lib/banner/banner.cjs CHANGED Viewed

@@ -1,3 +1,3 @@
-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(`../../common/mixins/modal.cjs`),r=require(`../notice/notice-constants.cjs`),i=require(`../notice/notice-icon.cjs`),a=require(`../notice/notice-content.cjs`),o=require(`../notice/notice-action.cjs`);let s=require(`vue`);var c={name:`DtBanner`,components:{DtNoticeIcon:i.default,DtNoticeContent:a.default,DtNoticeAction:o.default},mixins:[n.default],props:{headerId:{type:String,default(){return e.default.getUniqueString()}},contentId:{type:String,default(){return e.default.getUniqueString()}},headerText:{type:String,default:void 0},important:{type:Boolean,default:!1},pinned:{type:Boolean,default:!1},kind:{type:String,default:`base`,validator(e){return r.NOTICE_KINDS.includes(e)}},showClose:{type:Boolean,default:!0},showIcon:{type:Boolean,default:!0},showAction:{type:Boolean,default:!0},dialogClass:{type:String,default:``},backgroundImage:{type:String,default:``},backgroundSize:{type:String,default:`cover`},iconClass:{type:[String,Array,Object],default:``},headerClass:{type:[String,Array,Object],default:``},contentClass:{type:[String,Array,Object],default:``},actionClass:{type:[String,Array,Object],default:``}},emits:[`close`],computed:{role(){return this.important?`alertdialog`:`status`},hasHeader(){return!!this.headerText||!!this.$slots.header},bannerClass(){return[`d-banner`,{critical:`d-banner--critical`,info:`d-banner--info`,positive:`d-banner--positive`,warning:`d-banner--warning`,base:`d-banner--base`}[this.kind],{"d-banner--important":this.important,"d-banner--pinned":this.pinned}]},bannerBackgroundImage(){return this.backgroundImage===``?null:`background-image: url(${this.backgroundImage});
-              background-size: ${this.backgroundSize};`}},mounted(){this.important&&this.focusFirstElement()},methods:{trapFocus(e){this.important&&this.focusTrappedTabPress(e)}}},l=[`role`,`aria-modal`,`aria-labelledby`,`aria-describedby`];function u(e,t,n,r,i,a){let o=(0,s.resolveComponent)(`dt-notice-icon`),c=(0,s.resolveComponent)(`dt-notice-content`),u=(0,s.resolveComponent)(`dt-notice-action`);return(0,s.openBlock)(),(0,s.createElementBlock)(`aside`,{class:(0,s.normalizeClass)(a.bannerClass),style:(0,s.normalizeStyle)(a.bannerBackgroundImage),onKeydown:t[1]||(t[1]=(0,s.withKeys)((...e)=>a.trapFocus&&a.trapFocus(...e),[`tab`]))},[(0,s.createElementVNode)(`div`,{class:(0,s.normalizeClass)([`d-banner__dialog`,n.dialogClass]),role:a.role,"aria-modal":n.important||void 0,"aria-labelledby":a.hasHeader?n.headerId:void 0,"aria-describedby":n.contentId},[n.showIcon?((0,s.openBlock)(),(0,s.createBlock)(o,{key:0,kind:n.kind,"icon-class":n.iconClass,class:(0,s.normalizeClass)({"d-notice__icon--has-title":n.headerText||e.$slots.header})},{default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`icon`)]),_:3},8,[`kind`,`icon-class`,`class`])):(0,s.createCommentVNode)(``,!0),(0,s.createVNode)(c,{"header-id":n.headerId,"content-id":n.contentId,"header-text":n.headerText,"header-class":n.headerClass,"content-class":n.contentClass},{header:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`header`)]),default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`default`)]),_:3},8,[`header-id`,`content-id`,`header-text`,`header-class`,`content-class`]),(0,s.createVNode)(u,{"show-action":n.showAction,"show-close":n.showClose,"action-class":n.actionClass,onClose:t[0]||(t[0]=t=>e.$emit(`close`))},{default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`action`)]),_:3},8,[`show-action`,`show-close`,`action-class`])],10,l)],38)}var d=t.t(c,[[`render`,u]]);exports.default=d;
+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(`../../common/mixins/modal.cjs`),r=require(`../notice/notice-constants.cjs`),i=require(`../notice/notice-icon.cjs`),a=require(`../notice/notice-content.cjs`),o=require(`../notice/notice-action.cjs`);let s=require(`vue`);var c={compatConfig:{MODE:3},name:`DtBanner`,components:{DtNoticeIcon:i.default,DtNoticeContent:a.default,DtNoticeAction:o.default},mixins:[n.default],props:{titleId:{type:String,default(){return e.default.getUniqueString()}},contentId:{type:String,default(){return e.default.getUniqueString()}},title:{type:String,default:``},important:{type:Boolean,default:!1},pinned:{type:Boolean,default:!1},kind:{type:String,default:`base`,validate(e){return r.NOTICE_KINDS.includes(e)}},hideClose:{type:Boolean,default:!1},hideIcon:{type:Boolean,default:!1},hideAction:{type:Boolean,default:!1},dialogClass:{type:String,default:``},backgroundImage:{type:String,default:``},backgroundSize:{type:String,default:`cover`}},emits:[`close`],computed:{role(){return this.important?`alertdialog`:`status`},bannerClass(){return[`d-banner`,{error:`d-banner--error`,info:`d-banner--info`,success:`d-banner--success`,warning:`d-banner--warning`,base:`d-banner--base`}[this.kind],{"d-banner--important":this.important,"d-banner--pinned":this.pinned}]},bannerBackgroundImage(){return this.backgroundImage===``?null:`background-image: url(${this.backgroundImage});
+              background-size: ${this.backgroundSize};`}},mounted(){this.important&&this.focusFirstElement()},methods:{trapFocus(e){this.important&&this.focusTrappedTabPress(e)}}},l=[`role`,`aria-labelledby`,`aria-describedby`];function u(e,t,n,r,i,a){let o=(0,s.resolveComponent)(`dt-notice-icon`),c=(0,s.resolveComponent)(`dt-notice-content`),u=(0,s.resolveComponent)(`dt-notice-action`);return(0,s.openBlock)(),(0,s.createElementBlock)(`aside`,{class:(0,s.normalizeClass)(a.bannerClass),style:(0,s.normalizeStyle)(a.bannerBackgroundImage),onKeydown:t[1]||(t[1]=(0,s.withKeys)((...e)=>a.trapFocus&&a.trapFocus(...e),[`tab`]))},[(0,s.createElementVNode)(`div`,{class:(0,s.normalizeClass)([`d-banner__dialog`,n.dialogClass]),role:a.role,"aria-labelledby":n.titleId,"aria-describedby":n.contentId},[n.hideIcon?(0,s.createCommentVNode)(``,!0):((0,s.openBlock)(),(0,s.createBlock)(o,{key:0,kind:n.kind},{default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`icon`)]),_:3},8,[`kind`])),(0,s.createVNode)(c,{"title-id":n.titleId,"content-id":n.contentId,title:n.title},{titleOverride:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`titleOverride`)]),default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`default`)]),_:3},8,[`title-id`,`content-id`,`title`]),(0,s.createVNode)(u,{"hide-action":n.hideAction,"hide-close":n.hideClose,onClose:t[0]||(t[0]=t=>e.$emit(`close`))},{default:(0,s.withCtx)(()=>[(0,s.renderSlot)(e.$slots,`action`)]),_:3},8,[`hide-action`,`hide-close`])],10,l)],38)}var d=t.t(c,[[`render`,u]]);exports.default=d;
 //# sourceMappingURL=banner.cjs.map

package/dist/lib/banner/banner.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"banner.cjs","names":[],"sources":["../../../components/~~Banner~~/~~Banner~~.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n <aside\n :class=\"bannerClass\"\n :style=\"bannerBackgroundImage\"\n @keydown.tab=\"trapFocus\"\n >\n <div\n class=\"d-banner__dialog\"\n :class=\"dialogClass\"\n :role=\"role\"\n :aria-~~modal=\"important \|\| undefined\"\n :aria-~~labelledby=\"~~hasHeader ? headerId : undefined~~\"\n :aria-describedby=\"contentId\"\n >\n <dt-notice-icon\n v-if=\"~~showIcon~~\"\n :kind=\"kind\"\n ~~:icon-class=\"iconClass\"\n :class=\"{ 'd-notice__icon--has-title': headerText \|\| $slots.header }\"\n~~ >\n <!-- @slot Slot for custom icon -->\n <slot name=\"icon\" />\n </dt-notice-icon>\n <dt-notice-content\n :~~header~~-id=\"~~headerId~~\"\n :content-id=\"contentId\"\n :~~header-text~~=\"~~headerText~~\"\n ~~:header-class=\"headerClass\"\n :content-class=\"contentClass\"\n~~ >\n <template #~~header~~>\n <!-- @slot ~~Slot~~ ~~for~~ the ~~header~~ -->\n <slot name=\"~~header~~\" />\n </template>\n <!-- @slot the main textual content of the banner -->\n <slot />\n </dt-notice-content>\n <dt-notice-action\n :~~show~~-action=\"~~showAction~~\"\n :~~show~~-close=\"~~showClose~~\"\n ~~:action-class=\"actionClass\"\n~~ @close=\"$emit('close')\"\n >\n <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n <slot name=\"action\" />\n </dt-notice-action>\n </div>\n </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/~~Notice~~';\nimport Modal from '@/common/mixins/modal';\nimport utils from '@/common/utils';\n\n/*\n Banners are a type of notice, delivering system and engagement messaging.\n * These are highly intrusive notices and should be used sparingly and appropriately.\n * @see https://dialtone.dialpad.com/components/banner.html\n /\nexport default {\n name: 'DtBanner',\n\n components: {\n DtNoticeIcon,\n DtNoticeContent,\n DtNoticeAction,\n },\n\n mixins: [Modal],\n\n props: {\n /\n Sets an ID on the ~~header~~ element of the component. Useful for aria-describedby\n * or aria-labelledby or any other reason you may need an id to refer to the ~~header~~.\n /\n ~~headerId~~: {\n type: String,\n default () { return utils.getUniqueString(); },\n },\n\n /\n Sets an ID on the content element of the component. Useful for aria-describedby\n * or aria-labelledby or any other reason you may need an id to refer to the content.\n /\n contentId: {\n type: String,\n default () { return utils.getUniqueString(); },\n },\n\n /\n ~~Header~~ ~~text~~ of the ~~banner~~. This can be left blank to remove the ~~header~~ from the ~~banner~~ entirely.\n /\n ~~headerText~~: {\n type: String,\n default: ~~undefined~~,\n },\n\n /\n Used in scenarios where the message needs to visually dominate the screen.\n * This will also change the aria role from status to alertdialog.\n * and will modally trap the keyboard focus in the dialog as soon as it displays.\n * @values true, false\n /\n important: {\n type: Boolean,\n default: false,\n },\n\n /\n Pins the banner to the top of the window and pushes all app content down.\n * @values true, false\n /\n pinned: {\n type: Boolean,\n default: false,\n },\n\n /\n Severity level of the notice, sets the icon and background\n * @values base, ~~critical~~, info, ~~positive~~, warning\n /\n kind: {\n type: String,\n default: 'base',\n ~~validator~~ (kind) {\n return NOTICE_KINDS.includes(kind);\n },\n },\n\n /\n ~~Shows~~ the close button in the ~~banner~~\n * @values true, false\n /\n ~~showClose~~: {\n type: Boolean,\n default: ~~true~~,\n },\n\n /\n ~~Shows~~ the icon in the ~~banner~~\n * @values true, false\n /\n ~~showIcon~~: {\n type: Boolean,\n default: ~~true~~,\n },\n\n /\n ~~Shows~~ the action in the ~~banner~~\n * @values true, false\n /\n ~~showAction~~: {\n type: Boolean,\n default: ~~true~~,\n },\n\n /\n Inner dialog class\n /\n dialogClass: {\n type: String,\n default: '',\n },\n\n /\n Banner background image\n /\n backgroundImage: {\n type: String,\n default: '',\n },\n\n /\n Background image size, follows the background-size CSS property values\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" target=\"_blank\">\n * CSS background-sizes\n * </a>\n /\n backgroundSize: {\n type: String,\n default: 'cover',\n },\n\n /\n Additional class name for the icon wrapper element.\n /\n iconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the header wrapper element.\n /\n headerClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the content wrapper element.\n /\n contentClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the action wrapper element.\n /\n actionClass: {\n type: [String, Array, Object],\n default: '',\n },\n },\n\n emits: [\n /\n Close button click event\n \n @event close\n */\n 'close',\n ],\n\n computed: {\n role () {\n return this.important ? 'alertdialog' : 'status';\n },\n\n ~~hasHeader () {\n return !!this.headerText \|\| !!this.$slots.header;\n },\n\n~~ bannerClass () {\n const kindClasses = {\n ~~critical~~: 'd-banner--~~critical~~',\n info: 'd-banner--info',\n ~~positive~~: 'd-banner--~~positive~~',\n warning: 'd-banner--warning',\n base: 'd-banner--base',\n };\n\n return [\n 'd-banner',\n kindClasses[this.kind],\n {\n 'd-banner--important': this.important,\n 'd-banner--pinned': this.pinned,\n },\n ];\n },\n\n bannerBackgroundImage () {\n if (this.backgroundImage === '') return null;\n\n return `background-image: url(${this.backgroundImage});\n background-size: ${this.backgroundSize};`;\n },\n },\n\n mounted () {\n if (this.important) {\n this.focusFirstElement();\n }\n },\n\n methods: {\n trapFocus (e) {\n if (this.important) {\n this.focusTrappedTabPress(e);\n }\n },\n },\n};\n</script>\n"],"mappings":"~~mdA6DA~~,IAAK,EAAU,CACb,KAAM,WAEN,WAAY,CACV,aAAA,EAAA,QACA,gBAAA,EAAA,QACA,eAAA,EAAA,QACD,CAED,OAAQ,CAAC,EAAA,QAAM,CAEf,MAAO,CAKL,~~SAAU~~,~~CACR~~,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,QAAM,iBAAiB,EAC5C,CAMD,UAAW,CACT,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,QAAM,iBAAiB,EAC5C,CAKD,~~WAAY~~,~~CACV~~,KAAM,OACN,QAAS,~~IAAA,~~GACV,CAQD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,OACT,~~UAAW~~,EAAM,~~CACf~~,OAAO,EAAA,aAAa,SAAS,EAAK,EAErC,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,WAAY,CACV,KAAM,QACN,QAAS,GACV,CAKD,YAAa,CACX,KAAM,OACN,QAAS,GACV,CAKD,gBAAiB,CACf,KAAM,OACN,QAAS,GACV,CAQD,eAAgB,CACd,KAAM,OACN,QAAS,QACV,CAKD,UAAW,CACT,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,aAAc,CACZ,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CACF,CAED,MAAO,CAML,QACD,CAED,SAAU,CACR,MAAQ,CACN,OAAO,KAAK,UAAY,cAAgB,UAG1C,~~WAAa,CACX,MAAO,CAAC,CAAC,KAAK,YAAc,CAAC,CAAC,KAAK,OAAO,QAG5C,~~aAAe,CASb,MAAO,CACL,WATkB,CAClB,~~SAAU~~,~~qBACV~~,KAAM,iBACN,~~SAAU~~,~~qBACV~~,QAAS,oBACT,KAAM,iBACP,CAIa,KAAK,MACjB,CACE,sBAAuB,KAAK,UAC5B,mBAAoB,KAAK,OAC1B,CACF,EAGH,uBAAyB,CAGvB,OAFI,KAAK,kBAAoB,GAAW,KAEjC,yBAAyB,KAAK,gBAAgB;iCAC1B,KAAK,eAAe,IAElD,CAED,SAAW,CACL,KAAK,WACP,KAAK,mBAAmB,EAI5B,QAAS,CACP,UAAW,EAAG,CACR,KAAK,WACP,KAAK,qBAAqB,EAAE,EAGjC,CACF,~~iRApOS~~,QAAA,~~CA7CL~~,OAAA,EAAA,EAAA,gBAAO,EAAA,YAAW,CAClB,OAAA,EAAA,EAAA,gBAAO,EAAA,sBAAqB,CAC5B,UAAO,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,GAAA,IAAM,EAAA,WAAA,EAAA,UAAA,GAAA,EAAS,CAAA,CAAA,MAAA,CAAA,~~6BA0CjB~~,MAAA,~~CAvCJ~~,OAAA,EAAA,EAAA,gBAAK,CAAC,mBACE,EAAA,YAAW,CAAA,CAClB,KAAM,EAAA,KACN,~~aAAY,EAAA,WAAa,IAAA,GACzB,~~kBAAiB,EAAA,~~UAAY~~,~~EAAA,SAAW,IAAA,GACxC,~~mBAAkB,EAAA,~~YAGX~~,EAAA,~~WAAA~~,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,~~aAOS~~,EAAA,~~OANd~~,KAAM,EAAA,~~KACN~~,~~aAAY,~~EAAA,~~UACZ,OAAA,~~EAAA,EAAA,~~gBAAK,CAAA,4BAAiC,EAAA,YAAc,EAAA,OAAO,OAAM,CAAA,6BAG9C,EAAA,EAAA,EAAA,~~YAAA,EAAA,OAAA,OAAA,CAAA,CAAA,~~0FAeF~~,EAAA,~~CAZjB~~,~~YAAW~~,EAAA,~~SACX~~,aAAY,EAAA,UACZ,~~cAAa~~,EAAA,~~WACb~~,~~eAAc~~,EAAA,~~YACd,gBAAe,~~EAAA,~~eAEL~~,~~QAAA,~~EAAA,EAAA,~~aAEa,~~EAAA,~~EAAA,EAAA,~~YAAA,EAAA,OAAA,~~SAAA~~,CAAA,CAAA,~~2BAGhB~~,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA,~~mGAUS~~,EAAA,~~CAPhB~~,cAAa,EAAA,WACb,aAAY,EAAA,UACZ,~~eAAc,EAAA,YACd,~~QAAK,EAAA,KAAA,EAAA,GAAA,GAAE,EAAA,MAAK,QAAA,8BAGS,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,SAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"banner.cjs","names":[],"sources":["../../../components/banner/banner.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n <aside\n :class=\"bannerClass\"\n :style=\"bannerBackgroundImage\"\n @keydown.tab=\"trapFocus\"\n >\n <div\n class=\"d-banner__dialog\"\n :class=\"dialogClass\"\n :role=\"role\"\n :aria-labelledby=\"titleId\"\n :aria-describedby=\"contentId\"\n >\n <dt-notice-icon\n v-if=\"!hideIcon\"\n :kind=\"kind\"\n >\n <!-- @slot Slot for custom icon -->\n <slot name=\"icon\" />\n </dt-notice-icon>\n <dt-notice-content\n :title-id=\"titleId\"\n :content-id=\"contentId\"\n :title=\"title\"\n >\n <template #titleOverride>\n <!-- eslint-disable-next-line max-len -->\n <!-- @slot Allows you to override the title, only use this if you need to override with something other than text. Otherwise use the \"title\" prop. -->\n <slot name=\"titleOverride\" />\n </template>\n <!-- @slot the main textual content of the banner -->\n <slot />\n </dt-notice-content>\n <dt-notice-action\n :hide-action=\"hideAction\"\n :hide-close=\"hideClose\"\n @close=\"$emit('close')\"\n >\n <!-- @slot Enter a possible action for the user to take, such as a link to another page -->\n <slot name=\"action\" />\n </dt-notice-action>\n </div>\n </aside>\n</template>\n\n<script>\nimport { DtNoticeIcon, DtNoticeContent, DtNoticeAction, NOTICE_KINDS } from '@/components/notice';\nimport Modal from '@/common/mixins/modal';\nimport utils from '@/common/utils';\n\n/*\n Banners are a type of notice, delivering system and engagement messaging.\n * These are highly intrusive notices and should be used sparingly and appropriately.\n * @see https://dialtone.dialpad.com/components/banner.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtBanner',\n\n components: {\n DtNoticeIcon,\n DtNoticeContent,\n DtNoticeAction,\n },\n\n mixins: [Modal],\n\n props: {\n /\n Sets an ID on the title element of the component. Useful for aria-describedby\n * or aria-labelledby or any other reason you may need an id to refer to the title.\n /\n titleId: {\n type: String,\n default () { return utils.getUniqueString(); },\n },\n\n /\n Sets an ID on the content element of the component. Useful for aria-describedby\n * or aria-labelledby or any other reason you may need an id to refer to the content.\n /\n contentId: {\n type: String,\n default () { return utils.getUniqueString(); },\n },\n\n /\n Title header of the notice. This can be left blank to remove the title from the notice entirely.\n /\n title: {\n type: String,\n default: '',\n },\n\n /\n Used in scenarios where the message needs to visually dominate the screen.\n * This will also change the aria role from status to alertdialog.\n * and will modally trap the keyboard focus in the dialog as soon as it displays.\n * @values true, false\n /\n important: {\n type: Boolean,\n default: false,\n },\n\n /\n Pins the banner to the top of the window and pushes all app content down.\n * @values true, false\n /\n pinned: {\n type: Boolean,\n default: false,\n },\n\n /\n Severity level of the notice, sets the icon and background\n * @values base, error, info, success, warning\n /\n kind: {\n type: String,\n default: 'base',\n validate (kind) {\n return NOTICE_KINDS.includes(kind);\n },\n },\n\n /\n Hides the close button from the notice\n * @values true, false\n /\n hideClose: {\n type: Boolean,\n default: false,\n },\n\n /\n Hides the icon from the notice\n * @values true, false\n /\n hideIcon: {\n type: Boolean,\n default: false,\n },\n\n /\n Hides the action from the notice\n * @values true, false\n /\n hideAction: {\n type: Boolean,\n default: false,\n },\n\n /\n Inner dialog class\n /\n dialogClass: {\n type: String,\n default: '',\n },\n\n /\n Banner background image\n /\n backgroundImage: {\n type: String,\n default: '',\n },\n\n /\n Background image size, follows the background-size CSS property values\n * <a class=\"d-link\" href=\"https://developer.mozilla.org/en-US/docs/Web/CSS/background-size\" target=\"_blank\">\n * CSS background-sizes\n * </a>\n /\n backgroundSize: {\n type: String,\n default: 'cover',\n },\n },\n\n emits: [\n /\n Close button click event\n \n @event close\n */\n 'close',\n ],\n\n computed: {\n role () {\n return this.important ? 'alertdialog' : 'status';\n },\n\n bannerClass () {\n const kindClasses = {\n error: 'd-banner--error',\n info: 'd-banner--info',\n success: 'd-banner--success',\n warning: 'd-banner--warning',\n base: 'd-banner--base',\n };\n\n return [\n 'd-banner',\n kindClasses[this.kind],\n {\n 'd-banner--important': this.important,\n 'd-banner--pinned': this.pinned,\n },\n ];\n },\n\n bannerBackgroundImage () {\n if (this.backgroundImage === '') return null;\n\n return `background-image: url(${this.backgroundImage});\n background-size: ${this.backgroundSize};`;\n },\n },\n\n mounted () {\n if (this.important) {\n this.focusFirstElement();\n }\n },\n\n methods: {\n trapFocus (e) {\n if (this.important) {\n this.focusTrappedTabPress(e);\n }\n },\n },\n};\n</script>\n"],"mappings":"mdAwDA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,WAEN,WAAY,CACV,aAAA,EAAA,QACA,gBAAA,EAAA,QACA,eAAA,EAAA,QACD,CAED,OAAQ,CAAC,EAAA,QAAM,CAEf,MAAO,CAKL,QAAS,CACP,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,QAAM,iBAAiB,EAC5C,CAMD,UAAW,CACT,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,QAAM,iBAAiB,EAC5C,CAKD,MAAO,CACL,KAAM,OACN,QAAS,GACV,CAQD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,OACT,SAAU,EAAM,CACd,OAAO,EAAA,aAAa,SAAS,EAAK,EAErC,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,WAAY,CACV,KAAM,QACN,QAAS,GACV,CAKD,YAAa,CACX,KAAM,OACN,QAAS,GACV,CAKD,gBAAiB,CACf,KAAM,OACN,QAAS,GACV,CAQD,eAAgB,CACd,KAAM,OACN,QAAS,QACV,CACF,CAED,MAAO,CAML,QACD,CAED,SAAU,CACR,MAAQ,CACN,OAAO,KAAK,UAAY,cAAgB,UAG1C,aAAe,CASb,MAAO,CACL,WATkB,CAClB,MAAO,kBACP,KAAM,iBACN,QAAS,oBACT,QAAS,oBACT,KAAM,iBACP,CAIa,KAAK,MACjB,CACE,sBAAuB,KAAK,UAC5B,mBAAoB,KAAK,OAC1B,CACF,EAGH,uBAAyB,CAGvB,OAFI,KAAK,kBAAoB,GAAW,KAEjC,yBAAyB,KAAK,gBAAgB;iCAC1B,KAAK,eAAe,IAElD,CAED,SAAW,CACL,KAAK,WACP,KAAK,mBAAmB,EAI5B,QAAS,CACP,UAAW,EAAG,CACR,KAAK,WACP,KAAK,qBAAqB,EAAE,EAGjC,CACF,oQAjMS,QAAA,CAxCL,OAAA,EAAA,EAAA,gBAAO,EAAA,YAAW,CAClB,OAAA,EAAA,EAAA,gBAAO,EAAA,sBAAqB,CAC5B,UAAO,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,GAAA,IAAM,EAAA,WAAA,EAAA,UAAA,GAAA,EAAS,CAAA,CAAA,MAAA,CAAA,6BAqCjB,MAAA,CAlCJ,OAAA,EAAA,EAAA,gBAAK,CAAC,mBACE,EAAA,YAAW,CAAA,CAClB,KAAM,EAAA,KACN,kBAAiB,EAAA,QACjB,mBAAkB,EAAA,YAGV,EAAA,2CAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAKQ,EAAA,OAJd,KAAM,EAAA,iCAGa,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,OAAA,CAAA,CAAA,qCAcF,EAAA,CAXjB,WAAU,EAAA,QACV,aAAY,EAAA,UACZ,MAAO,EAAA,QAEG,eAAA,EAAA,EAAA,aAGoB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,gBAAA,CAAA,CAAA,2BAGvB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA,6DASS,EAAA,CANhB,cAAa,EAAA,WACb,aAAY,EAAA,UACZ,QAAK,EAAA,KAAA,EAAA,GAAA,GAAE,EAAA,MAAK,QAAA,8BAGS,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,SAAA,CAAA,CAAA"}

package/dist/lib/banner/banner.js CHANGED Viewed

@@ -6,8 +6,9 @@ import i from "../notice/notice-icon.js";
 import a from "../notice/notice-content.js";
 import o from "../notice/notice-action.js";
 import { createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, normalizeClass as f, normalizeStyle as p, openBlock as m, renderSlot as h, resolveComponent as g, withCtx as _, withKeys as v } from "vue";
-//#region components/Banner/Banner.vue
+//#region components/banner/banner.vue
 var y = {
+	compatConfig: { MODE: 3 },
 	name: "DtBanner",
 	components: {
 		DtNoticeIcon: i,
@@ -16,7 +17,7 @@ var y = {
 	},
 	mixins: [n],
 	props: {
-		headerId: {
+		titleId: {
 			type: String,
 			default() {
 				return e.getUniqueString();
@@ -28,9 +29,9 @@ var y = {
 				return e.getUniqueString();
 			}
 		},
-		headerText: {
+		title: {
 			type: String,
-			default: void 0
+			default: ""
 		},
 		important: {
 			type: Boolean,
@@ -43,21 +44,21 @@ var y = {
 		kind: {
 			type: String,
 			default: "base",
-			validator(e) {
+			validate(e) {
 				return r.includes(e);
 			}
 		},
-		showClose: {
+		hideClose: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
-		showIcon: {
+		hideIcon: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
-		showAction: {
+		hideAction: {
 			type: Boolean,
-			default: !0
+			default: !1
 		},
 		dialogClass: {
 			type: String,
@@ -70,38 +71,6 @@ var y = {
 		backgroundSize: {
 			type: String,
 			default: "cover"
-		},
-		iconClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		headerClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		contentClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		actionClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
 		}
 	},
 	emits: ["close"],
@@ -109,16 +78,13 @@ var y = {
 		role() {
 			return this.important ? "alertdialog" : "status";
 		},
-		hasHeader() {
-			return !!this.headerText || !!this.$slots.header;
-		},
 		bannerClass() {
 			return [
 				"d-banner",
 				{
-					critical: "d-banner--critical",
+					error: "d-banner--error",
 					info: "d-banner--info",
-					positive: "d-banner--positive",
+					success: "d-banner--success",
 					warning: "d-banner--warning",
 					base: "d-banner--base"
 				}[this.kind],
@@ -141,7 +107,6 @@ var y = {
 	} }
 }, b = [
 	"role",
-	"aria-modal",
 	"aria-labelledby",
 	"aria-describedby"
 ];
@@ -154,53 +119,37 @@ function x(e, t, n, r, i, a) {
 	}, [u("div", {
 		class: f(["d-banner__dialog", n.dialogClass]),
 		role: a.role,
-		"aria-modal": n.important || void 0,
-		"aria-labelledby": a.hasHeader ? n.headerId : void 0,
+		"aria-labelledby": n.titleId,
 		"aria-describedby": n.contentId
 	}, [
-		n.showIcon ? (m(), s(o, {
+		n.hideIcon ? c("", !0) : (m(), s(o, {
 			key: 0,
-			kind: n.kind,
-			"icon-class": n.iconClass,
-			class: f({ "d-notice__icon--has-title": n.headerText || e.$slots.header })
+			kind: n.kind
 		}, {
 			default: _(() => [h(e.$slots, "icon")]),
 			_: 3
-		}, 8, [
-			"kind",
-			"icon-class",
-			"class"
-		])) : c("", !0),
+		}, 8, ["kind"])),
 		d(y, {
-			"header-id": n.headerId,
+			"title-id": n.titleId,
 			"content-id": n.contentId,
-			"header-text": n.headerText,
-			"header-class": n.headerClass,
-			"content-class": n.contentClass
+			title: n.title
 		}, {
-			header: _(() => [h(e.$slots, "header")]),
+			titleOverride: _(() => [h(e.$slots, "titleOverride")]),
 			default: _(() => [h(e.$slots, "default")]),
 			_: 3
 		}, 8, [
-			"header-id",
+			"title-id",
 			"content-id",
-			"header-text",
-			"header-class",
-			"content-class"
+			"title"
 		]),
 		d(x, {
-			"show-action": n.showAction,
-			"show-close": n.showClose,
-			"action-class": n.actionClass,
+			"hide-action": n.hideAction,
+			"hide-close": n.hideClose,
 			onClose: t[0] || (t[0] = (t) => e.$emit("close"))
 		}, {
 			default: _(() => [h(e.$slots, "action")]),
 			_: 3
-		}, 8, [
-			"show-action",
-			"show-close",
-			"action-class"
-		])
+		}, 8, ["hide-action", "hide-close"])
 	], 10, b)], 38);
 }
 var S = /* @__PURE__ */ t(y, [["render", x]]);