@dialpad/dialtone 9.126.6 → 9.127.0

package/dist/vue3/lib/banner/banner.js

@@ -1,21 +1,20 @@
 import g from "../../common/mixins/modal.js";
-import d from "../../common/utils/index.js";
-import p from "../../common/mixins/sr-only-close-button.js";
-import { resolveComponent as l, openBlock as s, createElementBlock as y, normalizeClass as c, normalizeStyle as h, withKeys as k, createElementVNode as C, createBlock as _, withCtx as i, renderSlot as a, createCommentVNode as I, createVNode as u } from "vue";
-import { _ as S } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import B from "../notice/notice-icon.js";
-import v from "../notice/notice-content.js";
+import l from "../../common/utils/index.js";
+import { resolveComponent as r, openBlock as s, createElementBlock as p, normalizeClass as c, normalizeStyle as h, withKeys as y, createElementVNode as k, createBlock as _, withCtx as o, renderSlot as a, createCommentVNode as C, createVNode as u } from "vue";
+import { _ as I } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import S from "../notice/notice-icon.js";
+import B from "../notice/notice-content.js";
 import N from "../notice/notice-action.js";
-import { NOTICE_KINDS as D } from "../notice/notice-constants.js";
-const O = {
+import { NOTICE_KINDS as v } from "../notice/notice-constants.js";
+const D = {
   compatConfig: { MODE: 3 },
   name: "DtBanner",
   components: {
-    DtNoticeIcon: B,
-    DtNoticeContent: v,
+    DtNoticeIcon: S,
+    DtNoticeContent: B,
     DtNoticeAction: N
   },
-  mixins: [g, p],
+  mixins: [g],
   props: {
     /**
      * Sets an ID on the title element of the component. Useful for aria-describedby
@@ -24,7 +23,7 @@ const O = {
     titleId: {
       type: String,
       default() {
-        return d.getUniqueString();
+        return l.getUniqueString();
       }
     },
     /**
@@ -34,7 +33,7 @@ const O = {
     contentId: {
       type: String,
       default() {
-        return d.getUniqueString();
+        return l.getUniqueString();
       }
     },
     /**
@@ -70,16 +69,9 @@ const O = {
       type: String,
       default: "base",
       validate(e) {
-        return D.includes(e);
+        return v.includes(e);
       }
     },
-    /**
-     * Props for the notice close button.
-     */
-    closeButtonProps: {
-      type: Object,
-      default: () => ({})
-    },
     /**
      * Hides the close button from the notice
      * @values true, false
@@ -171,24 +163,24 @@ const O = {
     }
   }
 }, w = ["role", "aria-labelledby", "aria-describedby"];
-function z(e, o, t, E, F, n) {
-  const m = l("dt-notice-icon"), f = l("dt-notice-content"), b = l("dt-notice-action");
-  return s(), y("aside", {
+function z(e, i, t, E, F, n) {
+  const m = r("dt-notice-icon"), f = r("dt-notice-content"), b = r("dt-notice-action");
+  return s(), p("aside", {
     class: c(n.bannerClass),
     style: h(n.bannerBackgroundImage),
-    onKeydown: o[1] || (o[1] = k((...r) => n.trapFocus && n.trapFocus(...r), ["tab"]))
+    onKeydown: i[1] || (i[1] = y((...d) => n.trapFocus && n.trapFocus(...d), ["tab"]))
   }, [
-    C("div", {
+    k("div", {
       class: c(["d-banner__dialog", t.dialogClass]),
       role: n.role,
       "aria-labelledby": t.titleId,
       "aria-describedby": t.contentId
     }, [
-      t.hideIcon ? I("", !0) : (s(), _(m, {
+      t.hideIcon ? C("", !0) : (s(), _(m, {
         key: 0,
         kind: t.kind
       }, {
-        default: i(() => [
+        default: o(() => [
           a(e.$slots, "icon")
         ]),
         _: 3
@@ -198,10 +190,10 @@ function z(e, o, t, E, F, n) {
         "content-id": t.contentId,
         title: t.title
       }, {
-        titleOverride: i(() => [
+        titleOverride: o(() => [
           a(e.$slots, "titleOverride")
         ]),
-        default: i(() => [
+        default: o(() => [
           a(e.$slots, "default")
         ]),
         _: 3
@@ -209,21 +201,18 @@ function z(e, o, t, E, F, n) {
       u(b, {
         "hide-action": t.hideAction,
         "hide-close": t.hideClose,
-        "close-button-props": t.closeButtonProps,
-        "visually-hidden-close": e.visuallyHiddenClose,
-        "visually-hidden-close-label": e.visuallyHiddenCloseLabel,
-        onClose: o[0] || (o[0] = (r) => e.$emit("close"))
+        onClose: i[0] || (i[0] = (d) => e.$emit("close"))
       }, {
-        default: i(() => [
+        default: o(() => [
           a(e.$slots, "action")
         ]),
         _: 3
-      }, 8, ["hide-action", "hide-close", "close-button-props", "visually-hidden-close", "visually-hidden-close-label"])
+      }, 8, ["hide-action", "hide-close"])
     ], 10, w)
   ], 38);
 }
-const j = /* @__PURE__ */ S(O, [["render", z]]);
+const P = /* @__PURE__ */ I(D, [["render", z]]);
 export {
-  j as default
+  P as default
 };
 //# sourceMappingURL=banner.js.map

package/dist/vue3/lib/banner/banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"banner.js","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-button-props=\"closeButtonProps\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\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';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\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, SrOnlyCloseButtonMixin],\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     * Props for the notice close button.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\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"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","Modal","SrOnlyCloseButtonMixin","utils","kind","NOTICE_KINDS","_hoisted_1","_createElementBlock","_normalizeClass","$options","_normalizeStyle","_cache","_withKeys","args","_createElementVNode","$props","_createCommentVNode","_createBlock","_component_dt_notice_icon","_withCtx","_renderSlot","_ctx","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":"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"}
+{"version":3,"file":"banner.js","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"],"names":["_sfc_main","DtNoticeIcon","DtNoticeContent","DtNoticeAction","Modal","utils","kind","NOTICE_KINDS","_hoisted_1","_createElementBlock","_normalizeClass","$options","_normalizeStyle","_cache","_withKeys","args","_createElementVNode","$props","_createCommentVNode","_createBlock","_component_dt_notice_icon","_withCtx","_renderSlot","_ctx","_createVNode","_component_dt_notice_content","_component_dt_notice_action"],"mappings":"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"}

package/dist/vue3/lib/breadcrumbs/breadcrumbs.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("./breadcrumbs-constants.cjs"),m=require("./breadcrumb-item.cjs"),s=require("../../common/utils/index.cjs"),e=require("vue"),b=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),i={compatConfig:{MODE:3},name:"DtBreadcrumbs",components:{DtBreadcrumbItem:m.default},props:{breadcrumbs:{type:Array,default:()=>[],validate(t){return t.every(({href:a,label:r})=>a!==void 0&&r!==void 0)}},inverted:{type:Boolean,default:!1},ariaLabel:{type:String,default:"breadcrumb"}},data(){return{BREADCRUMBS_INVERTED_MODIFIER:o.BREADCRUMBS_INVERTED_MODIFIER}},methods:{getBreadcrumbItemKey(t){return`breadcrumbs-item-${t}-${s.default.getUniqueString()}`}}},_=["aria-label"];function B(t,a,r,f,n,u){const d=e.resolveComponent("dt-breadcrumb-item");return e.openBlock(),e.createElementBlock("nav",{"aria-label":r.ariaLabel,"data-qa":"dt-breadcrumbs",class:e.normalizeClass(["d-breadcrumbs",{[n.BREADCRUMBS_INVERTED_MODIFIER]:r.inverted}])},[e.createElementVNode("ol",null,[e.renderSlot(t.$slots,"default",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.breadcrumbs,(c,l)=>(e.openBlock(),e.createBlock(d,e.mergeProps({key:u.getBreadcrumbItemKey(l),inverted:r.inverted},c),null,16,["inverted"]))),128))])])],10,_)}const E=b._(i,[["render",B]]);exports.default=E;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("./breadcrumbs-constants.cjs"),i=require("./breadcrumb-item.cjs"),s=require("../../common/utils/index.cjs"),m=require("../../localization/index.cjs"),e=require("vue"),b=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),_={compatConfig:{MODE:3},name:"DtBreadcrumbs",components:{DtBreadcrumbItem:i.default},props:{breadcrumbs:{type:Array,default:()=>[],validate(t){return t.every(({href:n,label:r})=>n!==void 0&&r!==void 0)}},inverted:{type:Boolean,default:!1},ariaLabel:{type:String,default:""}},data(){return{BREADCRUMBS_INVERTED_MODIFIER:d.BREADCRUMBS_INVERTED_MODIFIER,i18n:new m.DialtoneLocalization}},methods:{getBreadcrumbItemKey(t){return`breadcrumbs-item-${t}-${s.default.getUniqueString()}`}}},B=["aria-label"];function E(t,n,r,D,a,u){const l=e.resolveComponent("dt-breadcrumb-item");return e.openBlock(),e.createElementBlock("nav",{"aria-label":r.ariaLabel||a.i18n.$t("DIALTONE_BREADCRUMBS_ARIA_LABEL"),"data-qa":"dt-breadcrumbs",class:e.normalizeClass(["d-breadcrumbs",{[a.BREADCRUMBS_INVERTED_MODIFIER]:r.inverted}])},[e.createElementVNode("ol",null,[e.renderSlot(t.$slots,"default",{},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(r.breadcrumbs,(o,c)=>(e.openBlock(),e.createBlock(l,e.mergeProps({key:u.getBreadcrumbItemKey(c),inverted:r.inverted},o),null,16,["inverted"]))),128))])])],10,B)}const f=b._(_,[["render",E]]);exports.default=f;
 //# sourceMappingURL=breadcrumbs.cjs.map

package/dist/vue3/lib/breadcrumbs/breadcrumbs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.cjs","sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol>\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: 'breadcrumb',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtBreadcrumbItem","breadcrumbs","href","label","BREADCRUMBS_INVERTED_MODIFIER","index","utils","_hoisted_1","_createElementBlock","$props","_normalizeClass","$data","_createElementVNode","_renderSlot","_ctx","_openBlock","_Fragment","_renderList","item","_createBlock","_component_dt_breadcrumb_item","_mergeProps","$options"],"mappings":"mTAiCKA,EAAU,CACb,aAAc,CAAE,KAAM,CAAG,EACzB,KAAM,gBAEN,WAAY,CACV,iBAAAC,EAAgB,OACjB,EAED,MAAO,CAIL,YAAa,CACX,KAAM,MACN,QAAS,IAAM,CAAE,EACjB,SAAUC,EAAa,CACrB,OAAOA,EAAY,MAAM,CAAC,CAAE,KAAAC,EAAM,MAAAC,KACzBD,IAAS,QAAaC,IAAU,MACxC,CACF,CACF,EAMD,SAAU,CACR,KAAM,QACN,QAAS,EACV,EAKD,UAAW,CACT,KAAM,OACN,QAAS,YACV,CACF,EAED,MAAQ,CACN,MAAO,+BACLC,EAA6B,8BAEhC,EAED,QAAS,CACP,qBAAsBC,EAAO,CAC3B,MAAO,oBAAoBA,CAAK,IAAIC,EAAAA,QAAM,gBAAiB,CAAA,EAC5D,CACF,CACH,EApFAC,EAAA,CAAA,YAAA,gGACEC,EAmBM,mBAAA,MAAA,CAlBH,aAAYC,EAAS,UACtB,UAAQ,iBACP,MAJLC,EAAAA,eAAA,iBAI8C,CAAA,CAAAC,EAAA,6BAA6B,EAAGF,EAAQ,QAAA,MAKlFG,EAUK,mBAAA,KAAA,KAAA,CARHC,EAAAA,WAOOC,sBAPP,IAOO,EANLC,EAAAA,UAAA,EAAA,EAAAP,EAAA,mBAKEQ,gBAjBVC,EAakC,WAAAR,EAAA,YAblC,CAakBS,EAAMb,KADhBU,YAAA,EAAAI,cAKEC,EALFC,EAAAA,WAKE,CAHC,IAAKC,EAAoB,qBAACjB,CAAK,EAC/B,SAAUI,EAAQ,UACXS,CAAI,EAAA,KAAA,GAAA,CAAA,UAAA,CAAA,aAhBtB,EAAA,GAAAX,CAAA"}
+{"version":3,"file":"breadcrumbs.cjs","sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel || i18n.$t('DIALTONE_BREADCRUMBS_ARIA_LABEL')\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol>\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtBreadcrumbItem","breadcrumbs","href","label","BREADCRUMBS_INVERTED_MODIFIER","DialtoneLocalization","index","utils","_hoisted_1","_createElementBlock","$props","$data","_normalizeClass","_createElementVNode","_renderSlot","_ctx","_openBlock","_Fragment","_renderList","item","_createBlock","_component_dt_breadcrumb_item","_mergeProps","$options"],"mappings":"6VAkCKA,EAAU,CACb,aAAc,CAAE,KAAM,CAAG,EACzB,KAAM,gBAEN,WAAY,CACV,iBAAAC,EAAgB,OACjB,EAED,MAAO,CAIL,YAAa,CACX,KAAM,MACN,QAAS,IAAM,CAAE,EACjB,SAAUC,EAAa,CACrB,OAAOA,EAAY,MAAM,CAAC,CAAE,KAAAC,EAAM,MAAAC,KACzBD,IAAS,QAAaC,IAAU,MACxC,CACF,CACF,EAMD,SAAU,CACR,KAAM,QACN,QAAS,EACV,EAKD,UAAW,CACT,KAAM,OACN,QAAS,EACV,CACF,EAED,MAAQ,CACN,MAAO,+BACLC,EAA6B,8BAC7B,KAAM,IAAIC,EAAAA,qBAEb,EAED,QAAS,CACP,qBAAsBC,EAAO,CAC3B,MAAO,oBAAoBA,CAAK,IAAIC,EAAAA,QAAM,gBAAiB,CAAA,EAC5D,CACF,CACH,EAtFAC,EAAA,CAAA,YAAA,gGACEC,EAmBM,mBAAA,MAAA,CAlBH,aAAYC,EAAA,WAAaC,EAAA,KAAK,GAAE,iCAAA,EACjC,UAAQ,iBACP,MAJLC,EAAAA,eAAA,iBAI8C,CAAA,CAAAD,EAAA,6BAA6B,EAAGD,EAAQ,QAAA,MAKlFG,EAUK,mBAAA,KAAA,KAAA,CARHC,EAAAA,WAOOC,sBAPP,IAOO,EANLC,EAAAA,UAAA,EAAA,EAAAP,EAAA,mBAKEQ,gBAjBVC,EAakC,WAAAR,EAAA,YAblC,CAakBS,EAAMb,KADhBU,YAAA,EAAAI,cAKEC,EALFC,EAAAA,WAKE,CAHC,IAAKC,EAAoB,qBAACjB,CAAK,EAC/B,SAAUI,EAAQ,UACXS,CAAI,EAAA,KAAA,GAAA,CAAA,UAAA,CAAA,aAhBtB,EAAA,GAAAX,CAAA"}

package/dist/vue3/lib/breadcrumbs/breadcrumbs.js

@@ -1,13 +1,14 @@
-import { BREADCRUMBS_INVERTED_MODIFIER as l } from "./breadcrumbs-constants.js";
-import i from "./breadcrumb-item.js";
+import { BREADCRUMBS_INVERTED_MODIFIER as c } from "./breadcrumbs-constants.js";
+import u from "./breadcrumb-item.js";
 import s from "../../common/utils/index.js";
-import { resolveComponent as b, openBlock as t, createElementBlock as n, normalizeClass as f, createElementVNode as _, renderSlot as p, Fragment as B, renderList as E, createBlock as v, mergeProps as D } from "vue";
-import { _ as I } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import { DialtoneLocalization as b } from "../../localization/index.js";
+import { resolveComponent as _, openBlock as t, createElementBlock as o, normalizeClass as f, createElementVNode as B, renderSlot as p, Fragment as E, renderList as D, createBlock as I, mergeProps as R } from "vue";
+import { _ as v } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const g = {
   compatConfig: { MODE: 3 },
   name: "DtBreadcrumbs",
   components: {
-    DtBreadcrumbItem: i
+    DtBreadcrumbItem: u
   },
   props: {
     /**
@@ -33,12 +34,13 @@ const g = {
      */
     ariaLabel: {
       type: String,
-      default: "breadcrumb"
+      default: ""
     }
   },
   data() {
     return {
-      BREADCRUMBS_INVERTED_MODIFIER: l
+      BREADCRUMBS_INVERTED_MODIFIER: c,
+      i18n: new b()
     };
   },
   methods: {
@@ -47,28 +49,28 @@ const g = {
     }
   }
 }, y = ["aria-label"];
-function R(r, a, e, C, d, m) {
-  const o = b("dt-breadcrumb-item");
-  return t(), n("nav", {
-    "aria-label": e.ariaLabel,
+function A(r, a, e, L, n, m) {
+  const d = _("dt-breadcrumb-item");
+  return t(), o("nav", {
+    "aria-label": e.ariaLabel || n.i18n.$t("DIALTONE_BREADCRUMBS_ARIA_LABEL"),
     "data-qa": "dt-breadcrumbs",
     class: f([
       "d-breadcrumbs",
-      { [d.BREADCRUMBS_INVERTED_MODIFIER]: e.inverted }
+      { [n.BREADCRUMBS_INVERTED_MODIFIER]: e.inverted }
     ])
   }, [
-    _("ol", null, [
+    B("ol", null, [
       p(r.$slots, "default", {}, () => [
-        (t(!0), n(B, null, E(e.breadcrumbs, (u, c) => (t(), v(o, D({
-          key: m.getBreadcrumbItemKey(c),
+        (t(!0), o(E, null, D(e.breadcrumbs, (i, l) => (t(), I(d, R({
+          key: m.getBreadcrumbItemKey(l),
           inverted: e.inverted
-        }, u), null, 16, ["inverted"]))), 128))
+        }, i), null, 16, ["inverted"]))), 128))
       ])
     ])
   ], 10, y);
 }
-const F = /* @__PURE__ */ I(g, [["render", R]]);
+const U = /* @__PURE__ */ v(g, [["render", A]]);
 export {
-  F as default
+  U as default
 };
 //# sourceMappingURL=breadcrumbs.js.map

package/dist/vue3/lib/breadcrumbs/breadcrumbs.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol>\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: 'breadcrumb',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtBreadcrumbItem","breadcrumbs","href","label","BREADCRUMBS_INVERTED_MODIFIER","index","utils","_hoisted_1","_createElementBlock","$props","_normalizeClass","$data","_createElementVNode","_renderSlot","_ctx","_openBlock","_Fragment","_renderList","item","_createBlock","_component_dt_breadcrumb_item","_mergeProps","$options"],"mappings":";;;;;AAiCA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,kBAAAC;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,SAAUC,GAAa;AACrB,eAAOA,EAAY,MAAM,CAAC,EAAE,MAAAC,GAAM,OAAAC,QACzBD,MAAS,UAAaC,MAAU,MACxC;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,+BAAAC;AAAA;EAEH;AAAA,EAED,SAAS;AAAA,IACP,qBAAsBC,GAAO;AAC3B,aAAO,oBAAoBA,CAAK,IAAIC,EAAM,gBAAiB,CAAA;AAAA,IAC5D;AAAA,EACF;AACH,GApFAC,IAAA,CAAA,YAAA;;;cACEC,EAmBM,OAAA;AAAA,IAlBH,cAAYC,EAAS;AAAA,IACtB,WAAQ;AAAA,IACP,OAJLC,EAAA;AAAA;MAI8C,EAAA,CAAAC,EAAA,6BAA6B,GAAGF,EAAQ,SAAA;AAAA;;IAKlFG,EAUK,MAAA,MAAA;AAAA,MARHC,EAOOC,yBAPP,MAOO;AAAA,SANLC,EAAA,EAAA,GAAAP,EAKEQ,SAjBVC,EAakCR,EAAA,aAblC,CAakBS,GAAMb,OADhBU,EAAA,GAAAI,EAKEC,GALFC,EAKE;AAAA,UAHC,KAAKC,EAAoB,qBAACjB,CAAK;AAAA,UAC/B,UAAUI,EAAQ;AAAA,WACXS,CAAI,GAAA,MAAA,IAAA,CAAA,UAAA,CAAA;;;EAhBtB,GAAA,IAAAX,CAAA;;;"}
+{"version":3,"file":"breadcrumbs.js","sources":["../../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["<template>\n  <nav\n    :aria-label=\"ariaLabel || i18n.$t('DIALTONE_BREADCRUMBS_ARIA_LABEL')\"\n    data-qa=\"dt-breadcrumbs\"\n    :class=\"[\n      'd-breadcrumbs',\n      { [BREADCRUMBS_INVERTED_MODIFIER]: inverted },\n    ]\"\n  >\n    <ol>\n      <!-- @slot default slot for breadcrumbs content -->\n      <slot>\n        <dt-breadcrumb-item\n          v-for=\"(item, index) in breadcrumbs\"\n          :key=\"getBreadcrumbItemKey(index)\"\n          :inverted=\"inverted\"\n          v-bind=\"item\"\n        />\n      </slot>\n    </ol>\n  </nav>\n</template>\n\n<script>\nimport { BREADCRUMBS_INVERTED_MODIFIER } from './breadcrumbs_constants';\nimport DtBreadcrumbItem from './breadcrumb_item.vue';\nimport utils from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Breadcrumbs are links used to provide context for the currently-viewed page\n * and where it is located within the overall site structure.\n * @see https://dialtone.dialpad.com/components/breadcrumbs.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtBreadcrumbs',\n\n  components: {\n    DtBreadcrumbItem,\n  },\n\n  props: {\n    /**\n     * A provided list of breadcrumbs. Overridden by default slot\n     */\n    breadcrumbs: {\n      type: Array,\n      default: () => [],\n      validate (breadcrumbs) {\n        return breadcrumbs.every(({ href, label }) => {\n          return href !== undefined && label !== undefined;\n        });\n      },\n    },\n\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Descriptive label for the navigation content.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMBS_INVERTED_MODIFIER,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  methods: {\n    getBreadcrumbItemKey (index) {\n      return `breadcrumbs-item-${index}-${utils.getUniqueString()}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtBreadcrumbItem","breadcrumbs","href","label","BREADCRUMBS_INVERTED_MODIFIER","DialtoneLocalization","index","utils","_hoisted_1","_createElementBlock","$props","$data","_normalizeClass","_createElementVNode","_renderSlot","_ctx","_openBlock","_Fragment","_renderList","item","_createBlock","_component_dt_breadcrumb_item","_mergeProps","$options"],"mappings":";;;;;;AAkCA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,kBAAAC;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,SAAUC,GAAa;AACrB,eAAOA,EAAY,MAAM,CAAC,EAAE,MAAAC,GAAM,OAAAC,QACzBD,MAAS,UAAaC,MAAU,MACxC;AAAA,MACF;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,+BAAAC;AAAA,MACA,MAAM,IAAIC,EAAsB;AAAA;EAEnC;AAAA,EAED,SAAS;AAAA,IACP,qBAAsBC,GAAO;AAC3B,aAAO,oBAAoBA,CAAK,IAAIC,EAAM,gBAAiB,CAAA;AAAA,IAC5D;AAAA,EACF;AACH,GAtFAC,IAAA,CAAA,YAAA;;;cACEC,EAmBM,OAAA;AAAA,IAlBH,cAAYC,EAAA,aAAaC,EAAA,KAAK,GAAE,iCAAA;AAAA,IACjC,WAAQ;AAAA,IACP,OAJLC,EAAA;AAAA;MAI8C,EAAA,CAAAD,EAAA,6BAA6B,GAAGD,EAAQ,SAAA;AAAA;;IAKlFG,EAUK,MAAA,MAAA;AAAA,MARHC,EAOOC,yBAPP,MAOO;AAAA,SANLC,EAAA,EAAA,GAAAP,EAKEQ,SAjBVC,EAakCR,EAAA,aAblC,CAakBS,GAAMb,OADhBU,EAAA,GAAAI,EAKEC,GALFC,EAKE;AAAA,UAHC,KAAKC,EAAoB,qBAACjB,CAAK;AAAA,UAC/B,UAAUI,EAAQ;AAAA,WACXS,CAAI,GAAA,MAAA,IAAA,CAAA,UAAA,CAAA;;;EAhBtB,GAAA,IAAAX,CAAA;;;"}

package/dist/vue3/lib/button/button.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("../../common/utils/index.cjs"),n=require("./button-constants.cjs"),u=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),d=require("../link/link-constants.cjs"),c={compatConfig:{MODE:3},name:"DtButton",props:{circle:{type:Boolean,default:!1},iconPosition:{type:String,default:"left",validator:t=>Object.keys(n.ICON_POSITION_MODIFIERS).includes(t)},importance:{type:String,default:"primary",validator:t=>Object.keys(n.BUTTON_IMPORTANCE_MODIFIERS).includes(t)},link:{type:Boolean,default:!1},linkKind:{type:String,default:"default",validator:t=>Object.keys(d.LINK_KIND_MODIFIERS).includes(t)},linkInverted:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},type:{type:String,default:"button",validator:t=>n.BUTTON_TYPES.includes(t)},width:{type:String,default:null},size:{type:String,default:"md",validator:t=>Object.keys(n.BUTTON_SIZE_MODIFIERS).includes(t)},labelClass:{type:[String,Array,Object],default:""},loading:{type:Boolean,default:!1},kind:{type:String,default:"default",validator:t=>Object.keys(n.BUTTON_KIND_MODIFIERS).includes(t)},assertiveOnFocus:{type:Boolean,default:!1},active:{type:Boolean,default:!1}},emits:["focusin","focusout"],data(){return{ICON_POSITION_MODIFIERS:n.ICON_POSITION_MODIFIERS,isInFocus:!1,hasSlotContent:a.hasSlotContent}},computed:{buttonListeners(){return{focusin:t=>{this.isInFocus=this.assertiveOnFocus,this.$emit("focusin",t)},focusout:t=>{this.isInFocus=!1,this.$emit("focusout",t)}}},computedAriaLive(){return this.assertiveOnFocus&&this.isInFocus?"assertive":this.$attrs.ariaLive},iconSize(){return n.BUTTON_ICON_SIZES[this.size]}},watch:{$props:{deep:!0,immediate:!0,handler(){process.env.NODE_ENV!=="production"&&(this.circle&&this.link&&e.warn("You cannot enable circle and link at the same time",this),this.isInvalidPropCombination(this.circle,this.kind,this.importance))}}},methods:{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(t,o,i){if(this.kind==="unstyled")return!0;for(const s of n.INVALID_COMBINATION)if(t===s.circle&&o===s.kind&&i===s.importance)return console.warn(s.message),!1;return!0},shouldRenderIcon(){return a.hasSlotContent(this.$slots.icon)&&!this.link},isIconOnly(){return this.shouldRenderIcon()&&!a.hasSlotContent(this.$slots.default)},isVerticalIconLayout(){return!this.isIconOnly()&&["top","bottom"].includes(this.iconPosition)}}},I=["type","disabled","aria-live","aria-label"];function _(t,o,i,s,r,l){return e.openBlock(),e.createElementBlock("button",e.mergeProps({class:["base-button__button",l.buttonClasses()],"data-qa":"dt-button",type:i.type,disabled:i.disabled,style:{width:i.width},"aria-live":l.computedAriaLive,"aria-label":i.loading?"loading":t.$attrs["aria-label"]},e.toHandlers(l.buttonListeners,!0)),[l.shouldRenderIcon()?(e.openBlock(),e.createElementBlock("span",{key:0,"data-qa":"dt-button-icon",class:e.normalizeClass(["base-button__icon",{"d-btn__icon":i.kind!=="unstyled",[r.ICON_POSITION_MODIFIERS[i.iconPosition]]:i.kind!=="unstyled"}])},[e.renderSlot(t.$slots,"icon",{iconSize:l.iconSize})],2)):e.createCommentVNode("",!0),r.hasSlotContent(t.$slots.default)?(e.openBlock(),e.createElementBlock("span",{key:1,"data-qa":"dt-button-label",class:e.normalizeClass(["base-button__label",{"d-btn__label":i.kind!=="unstyled"},i.labelClass])},[e.renderSlot(t.$slots,"default")],2)):e.createCommentVNode("",!0)],16,I)}const b=u._(c,[["render",_]]);exports.default=b;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),a=require("../../common/utils/index.cjs"),n=require("./button-constants.cjs"),d=require("../../localization/index.cjs"),c=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),u=require("../link/link-constants.cjs"),I={compatConfig:{MODE:3},name:"DtButton",props:{circle:{type:Boolean,default:!1},iconPosition:{type:String,default:"left",validator:t=>Object.keys(n.ICON_POSITION_MODIFIERS).includes(t)},importance:{type:String,default:"primary",validator:t=>Object.keys(n.BUTTON_IMPORTANCE_MODIFIERS).includes(t)},link:{type:Boolean,default:!1},linkKind:{type:String,default:"default",validator:t=>Object.keys(u.LINK_KIND_MODIFIERS).includes(t)},linkInverted:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},type:{type:String,default:"button",validator:t=>n.BUTTON_TYPES.includes(t)},width:{type:String,default:null},size:{type:String,default:"md",validator:t=>Object.keys(n.BUTTON_SIZE_MODIFIERS).includes(t)},labelClass:{type:[String,Array,Object],default:""},loading:{type:Boolean,default:!1},kind:{type:String,default:"default",validator:t=>Object.keys(n.BUTTON_KIND_MODIFIERS).includes(t)},assertiveOnFocus:{type:Boolean,default:!1},active:{type:Boolean,default:!1}},emits:["focusin","focusout"],data(){return{ICON_POSITION_MODIFIERS:n.ICON_POSITION_MODIFIERS,isInFocus:!1,hasSlotContent:a.hasSlotContent,i18n:new d.DialtoneLocalization}},computed:{buttonListeners(){return{focusin:t=>{this.isInFocus=this.assertiveOnFocus,this.$emit("focusin",t)},focusout:t=>{this.isInFocus=!1,this.$emit("focusout",t)}}},computedAriaLive(){return this.assertiveOnFocus&&this.isInFocus?"assertive":this.$attrs.ariaLive},iconSize(){return n.BUTTON_ICON_SIZES[this.size]}},watch:{$props:{deep:!0,immediate:!0,handler(){process.env.NODE_ENV!=="production"&&(this.circle&&this.link&&e.warn("You cannot enable circle and link at the same time",this),this.isInvalidPropCombination(this.circle,this.kind,this.importance))}}},methods:{buttonClasses(){return this.link?["d-link",u.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(t,r,i){if(this.kind==="unstyled")return!0;for(const s of n.INVALID_COMBINATION)if(t===s.circle&&r===s.kind&&i===s.importance)return console.warn(s.message),!1;return!0},shouldRenderIcon(){return a.hasSlotContent(this.$slots.icon)&&!this.link},isIconOnly(){return this.shouldRenderIcon()&&!a.hasSlotContent(this.$slots.default)},isVerticalIconLayout(){return!this.isIconOnly()&&["top","bottom"].includes(this.iconPosition)}}},_=["type","disabled","aria-live","aria-label"];function O(t,r,i,s,o,l){return e.openBlock(),e.createElementBlock("button",e.mergeProps({class:["base-button__button",l.buttonClasses()],"data-qa":"dt-button",type:i.type,disabled:i.disabled,style:{width:i.width},"aria-live":l.computedAriaLive,"aria-label":i.loading?o.i18n.$t("DIALTONE_LOADING"):t.$attrs["aria-label"]},e.toHandlers(l.buttonListeners,!0)),[l.shouldRenderIcon()?(e.openBlock(),e.createElementBlock("span",{key:0,"data-qa":"dt-button-icon",class:e.normalizeClass(["base-button__icon",{"d-btn__icon":i.kind!=="unstyled",[o.ICON_POSITION_MODIFIERS[i.iconPosition]]:i.kind!=="unstyled"}])},[e.renderSlot(t.$slots,"icon",{iconSize:l.iconSize})],2)):e.createCommentVNode("",!0),o.hasSlotContent(t.$slots.default)?(e.openBlock(),e.createElementBlock("span",{key:1,"data-qa":"dt-button-label",class:e.normalizeClass(["base-button__label",{"d-btn__label":i.kind!=="unstyled"},i.labelClass])},[e.renderSlot(t.$slots,"default")],2)):e.createCommentVNode("",!0)],16,_)}const b=c._(I,[["render",O]]);exports.default=b;
 //# sourceMappingURL=button.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"button.cjs","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? 'loading' : $attrs['aria-label']\"\n    v-on=\"buttonListeners\"\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  </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\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';\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  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\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </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\">\n     *   CSS width attribute\n     * </a>\n     * 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, unstyled\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  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    };\n  },\n\n  computed: {\n\n    buttonListeners () {\n      return {\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\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\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    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          console.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","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","lk","LINK_KIND_MODIFIERS","BUTTON_TYPES","s","BUTTON_SIZE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","hasSlotContent","e","BUTTON_ICON_SIZES","warn","getLinkKindModifier","circle","kind","importance","row","INVALID_COMBINATION","_hoisted_1","_openBlock","_createElementBlock","_mergeProps","$options","$props","_ctx","_toHandlers","_normalizeClass","$data","_renderSlot","_createCommentVNode"],"mappings":"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"}
+{"version":3,"file":"button.cjs","sources":["../../../components/button/button.vue"],"sourcesContent":["<template>\n  <button\n    :class=\"[\n      'base-button__button',\n      buttonClasses(),\n    ]\"\n    data-qa=\"dt-button\"\n    :type=\"type\"\n    :disabled=\"disabled\"\n    :style=\"{ width: width }\"\n    :aria-live=\"computedAriaLive\"\n    :aria-label=\"loading ? i18n.$t('DIALTONE_LOADING') : $attrs['aria-label']\"\n    v-on=\"buttonListeners\"\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  </button>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { hasSlotContent } from '@/common/utils';\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  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\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </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\">\n     *   CSS width attribute\n     * </a>\n     * 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  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\n    buttonListeners () {\n      return {\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\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\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    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          console.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","position","ICON_POSITION_MODIFIERS","i","BUTTON_IMPORTANCE_MODIFIERS","lk","LINK_KIND_MODIFIERS","BUTTON_TYPES","s","BUTTON_SIZE_MODIFIERS","k","BUTTON_KIND_MODIFIERS","hasSlotContent","DialtoneLocalization","e","BUTTON_ICON_SIZES","warn","getLinkKindModifier","circle","kind","importance","row","INVALID_COMBINATION","_hoisted_1","_openBlock","_createElementBlock","_mergeProps","$options","$props","$data","_ctx","_toHandlers","_normalizeClass","_renderSlot","_createCommentVNode"],"mappings":"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"}

package/dist/vue3/lib/button/button.js

@@ -1,8 +1,9 @@
-import { warn as y, openBlock as s, createElementBlock as a, mergeProps as m, toHandlers as O, normalizeClass as u, renderSlot as c, createCommentVNode as f } from "vue";
+import { warn as m, openBlock as a, createElementBlock as o, mergeProps as y, toHandlers as O, normalizeClass as u, renderSlot as c, createCommentVNode as f } from "vue";
 import { hasSlotContent as l } from "../../common/utils/index.js";
-import { ICON_POSITION_MODIFIERS as h, BUTTON_IMPORTANCE_MODIFIERS as b, BUTTON_TYPES as _, BUTTON_SIZE_MODIFIERS as o, BUTTON_KIND_MODIFIERS as I, BUTTON_ICON_SIZES as p, INVALID_COMBINATION as k } from "./button-constants.js";
-import { _ as S } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import { LINK_KIND_MODIFIERS as v, getLinkKindModifier as N } from "../link/link-constants.js";
+import { ICON_POSITION_MODIFIERS as h, BUTTON_IMPORTANCE_MODIFIERS as b, BUTTON_TYPES as _, BUTTON_SIZE_MODIFIERS as r, BUTTON_KIND_MODIFIERS as I, BUTTON_ICON_SIZES as p, INVALID_COMBINATION as k } from "./button-constants.js";
+import { DialtoneLocalization as S } from "../../localization/index.js";
+import { _ as v } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import { LINK_KIND_MODIFIERS as N, getLinkKindModifier as B } from "../link/link-constants.js";
 const g = {
   compatConfig: { MODE: 3 },
   name: "DtButton",
@@ -50,7 +51,7 @@ const g = {
     linkKind: {
       type: String,
       default: "default",
-      validator: (t) => Object.keys(v).includes(t)
+      validator: (t) => Object.keys(N).includes(t)
     },
     /**
      * Determines whether the link should have inverted styling if the button is styled as a link.
@@ -104,7 +105,7 @@ const g = {
     size: {
       type: String,
       default: "md",
-      validator: (t) => Object.keys(o).includes(t)
+      validator: (t) => Object.keys(r).includes(t)
     },
     /**
      * Used to customize the label container
@@ -123,7 +124,7 @@ const g = {
     },
     /**
      * The color of the button.
-     * @values default, unstyled, muted, danger, positive, inverted, unstyled
+     * @values default, unstyled, muted, danger, positive, inverted
      */
     kind: {
       type: String,
@@ -171,7 +172,8 @@ const g = {
       ICON_POSITION_MODIFIERS: h,
       // whether the button is currently in focus
       isInFocus: !1,
-      hasSlotContent: l
+      hasSlotContent: l,
+      i18n: new S()
     };
   },
   computed: {
@@ -197,7 +199,7 @@ const g = {
       deep: !0,
       immediate: !0,
       handler() {
-        process.env.NODE_ENV !== "production" && (this.circle && this.link && y("You cannot enable circle and link at the same time", this), this.isInvalidPropCombination(this.circle, this.kind, this.importance));
+        process.env.NODE_ENV !== "production" && (this.circle && this.link && m("You cannot enable circle and link at the same time", this), this.isInvalidPropCombination(this.circle, this.kind, this.importance));
       }
     }
   },
@@ -205,13 +207,13 @@ const g = {
     buttonClasses() {
       return this.link ? [
         "d-link",
-        N(this.linkKind, this.linkInverted),
-        o[this.size]
+        B(this.linkKind, this.linkInverted),
+        r[this.size]
       ] : this.kind === "unstyled" ? ["d-btn--unstyled"] : [
         "d-btn",
         b[this.importance],
         I[this.kind],
-        o[this.size],
+        r[this.size],
         {
           "d-btn--circle": this.circle,
           "d-btn--loading": this.loading,
@@ -221,11 +223,11 @@ const g = {
         }
       ];
     },
-    isInvalidPropCombination(t, r, e) {
+    isInvalidPropCombination(t, d, e) {
       if (this.kind === "unstyled")
         return !0;
       for (const i of k)
-        if (t === i.circle && r === i.kind && e === i.importance)
+        if (t === i.circle && d === i.kind && e === i.importance)
           return console.warn(i.message), !1;
       return !0;
     },
@@ -239,9 +241,9 @@ const g = {
       return !this.isIconOnly() && ["top", "bottom"].includes(this.iconPosition);
     }
   }
-}, B = ["type", "disabled", "aria-live", "aria-label"];
-function C(t, r, e, i, d, n) {
-  return s(), a("button", m({
+}, C = ["type", "disabled", "aria-live", "aria-label"];
+function D(t, d, e, i, s, n) {
+  return a(), o("button", y({
     class: [
       "base-button__button",
       n.buttonClasses()
@@ -251,22 +253,22 @@ function C(t, r, e, i, d, n) {
     disabled: e.disabled,
     style: { width: e.width },
     "aria-live": n.computedAriaLive,
-    "aria-label": e.loading ? "loading" : t.$attrs["aria-label"]
+    "aria-label": e.loading ? s.i18n.$t("DIALTONE_LOADING") : t.$attrs["aria-label"]
   }, O(n.buttonListeners, !0)), [
-    n.shouldRenderIcon() ? (s(), a("span", {
+    n.shouldRenderIcon() ? (a(), o("span", {
       key: 0,
       "data-qa": "dt-button-icon",
       class: u([
         "base-button__icon",
         {
           "d-btn__icon": e.kind !== "unstyled",
-          [d.ICON_POSITION_MODIFIERS[e.iconPosition]]: e.kind !== "unstyled"
+          [s.ICON_POSITION_MODIFIERS[e.iconPosition]]: e.kind !== "unstyled"
         }
       ])
     }, [
       c(t.$slots, "icon", { iconSize: n.iconSize })
     ], 2)) : f("", !0),
-    d.hasSlotContent(t.$slots.default) ? (s(), a("span", {
+    s.hasSlotContent(t.$slots.default) ? (a(), o("span", {
       key: 1,
       "data-qa": "dt-button-label",
       class: u([
@@ -277,10 +279,10 @@ function C(t, r, e, i, d, n) {
     }, [
       c(t.$slots, "default")
     ], 2)) : f("", !0)
-  ], 16, B);
+  ], 16, C);
 }
-const M = /* @__PURE__ */ S(g, [["render", C]]);
+const R = /* @__PURE__ */ v(g, [["render", D]]);
 export {
-  M as default
+  R as default
 };
 //# sourceMappingURL=button.js.map