@dialpad/dialtone 9.66.0 → 9.67.0

package/dist/vue3/lib/breadcrumbs.js

@@ -56,18 +56,25 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_link = resolveComponent("dt-link");
   return openBlock(), createElementBlock("li", {
     "data-qa": "dt-breadcrumb-item",
-    class: normalizeClass(["d-breadcrumbs__item", {
-      [$data.BREADCRUMB_ITEM_SELECTED_MODIFIER]: $props.selected
-    }])
-  }, [createVNode(_component_dt_link, mergeProps({
-    kind: $options.linkKind,
-    inverted: $options.linkInverted,
-    "aria-current": $options.ariaCurrent,
-    "data-qa": "breadcrumb-item"
-  }, _ctx.$attrs), {
-    default: withCtx(() => [renderSlot(_ctx.$slots, "default", {}, () => [createTextVNode(toDisplayString($props.label), 1)])]),
-    _: 3
-  }, 16, ["kind", "inverted", "aria-current"])], 2);
+    class: normalizeClass([
+      "d-breadcrumbs__item",
+      { [$data.BREADCRUMB_ITEM_SELECTED_MODIFIER]: $props.selected }
+    ])
+  }, [
+    createVNode(_component_dt_link, mergeProps({
+      kind: $options.linkKind,
+      inverted: $options.linkInverted,
+      "aria-current": $options.ariaCurrent,
+      "data-qa": "breadcrumb-item"
+    }, _ctx.$attrs), {
+      default: withCtx(() => [
+        renderSlot(_ctx.$slots, "default", {}, () => [
+          createTextVNode(toDisplayString($props.label), 1)
+        ])
+      ]),
+      _: 3
+    }, 16, ["kind", "inverted", "aria-current"])
+  ], 2);
 }
 const DtBreadcrumbItem = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
 const _sfc_main = {
@@ -83,10 +90,7 @@ const _sfc_main = {
       type: Array,
       default: () => [],
       validate(breadcrumbs2) {
-        return breadcrumbs2.every(({
-          href,
-          label
-        }) => {
+        return breadcrumbs2.every(({ href, label }) => {
           return href !== void 0 && label !== void 0;
         });
       }
@@ -124,15 +128,22 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("nav", {
     "aria-label": $props.ariaLabel,
     "data-qa": "dt-breadcrumbs",
-    class: normalizeClass(["d-breadcrumbs", {
-      [$data.BREADCRUMBS_INVERTED_MODIFIER]: $props.inverted
-    }])
-  }, [createElementVNode("ol", null, [renderSlot(_ctx.$slots, "default", {}, () => [(openBlock(true), createElementBlock(Fragment, null, renderList($props.breadcrumbs, (item, index) => {
-    return openBlock(), createBlock(_component_dt_breadcrumb_item, mergeProps({
-      key: $options.getBreadcrumbItemKey(index),
-      inverted: $props.inverted
-    }, item), null, 16, ["inverted"]);
-  }), 128))])])], 10, _hoisted_1);
+    class: normalizeClass([
+      "d-breadcrumbs",
+      { [$data.BREADCRUMBS_INVERTED_MODIFIER]: $props.inverted }
+    ])
+  }, [
+    createElementVNode("ol", null, [
+      renderSlot(_ctx.$slots, "default", {}, () => [
+        (openBlock(true), createElementBlock(Fragment, null, renderList($props.breadcrumbs, (item, index) => {
+          return openBlock(), createBlock(_component_dt_breadcrumb_item, mergeProps({
+            key: $options.getBreadcrumbItemKey(index),
+            inverted: $props.inverted
+          }, item), null, 16, ["inverted"]);
+        }), 128))
+      ])
+    ])
+  ], 10, _hoisted_1);
 }
 const breadcrumbs = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"breadcrumbs.js","sources":["../../components/breadcrumbs/breadcrumbs_constants.js","../../components/breadcrumbs/breadcrumb_item.vue","../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["export const BREADCRUMB_ITEM_SELECTED_MODIFIER = 'd-breadcrumbs__item--selected';\nexport const BREADCRUMBS_INVERTED_MODIFIER = 'd-breadcrumbs--inverted';\n","<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n    ]\"\n  >\n    <dt-link\n      :kind=\"linkKind\"\n      :inverted=\"linkInverted\"\n      :aria-current=\"ariaCurrent\"\n      data-qa=\"breadcrumb-item\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot default slot for breadcrumb item's label -->\n      <slot>\n        {{ label }}\n      </slot>\n    </dt-link>\n  </li>\n</template>\n\n<script>\nimport { BREADCRUMB_ITEM_SELECTED_MODIFIER } from './breadcrumbs_constants';\nimport { DtLink } from '../link';\nimport { MUTED } from '../link/link_constants';\n\nexport default {\n  name: 'DtBreadcrumbItem',\n\n  components: {\n    DtLink,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Applies selected styles to the breadcrumb\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Describes the breadcrumb. Overridden by default slot\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMB_ITEM_SELECTED_MODIFIER,\n    };\n  },\n\n  computed: {\n    linkKind () {\n      return this.inverted ? '' : MUTED;\n    },\n\n    linkInverted () {\n      return !!this.inverted;\n    },\n\n    ariaCurrent () {\n      return this.selected ? 'location' : undefined;\n    },\n  },\n};\n</script>\n","<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  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":["BREADCRUMB_ITEM_SELECTED_MODIFIER","BREADCRUMBS_INVERTED_MODIFIER","_sfc_main","name","components","DtLink","inheritAttrs","props","inverted","type","Boolean","default","selected","label","String","data","computed","linkKind","MUTED","linkInverted","ariaCurrent","undefined","_createElementBlock","class","_normalizeClass","$data","$props","_createVNode","_component_dt_link","_mergeProps","kind","$options","_ctx","$attrs","_renderSlot","DtBreadcrumbItem","breadcrumbs","Array","validate","every","href","ariaLabel","methods","getBreadcrumbItemKey","index","utils","getUniqueString","_createElementVNode","_openBlock","_Fragment","_renderList","item","_createBlock","_component_dt_breadcrumb_item","key"],"mappings":"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"}
+{"version":3,"file":"breadcrumbs.js","sources":["../../components/breadcrumbs/breadcrumbs_constants.js","../../components/breadcrumbs/breadcrumb_item.vue","../../components/breadcrumbs/breadcrumbs.vue"],"sourcesContent":["export const BREADCRUMB_ITEM_SELECTED_MODIFIER = 'd-breadcrumbs__item--selected';\nexport const BREADCRUMBS_INVERTED_MODIFIER = 'd-breadcrumbs--inverted';\n","<template>\n  <li\n    data-qa=\"dt-breadcrumb-item\"\n    :class=\"[\n      'd-breadcrumbs__item',\n      { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },\n    ]\"\n  >\n    <dt-link\n      :kind=\"linkKind\"\n      :inverted=\"linkInverted\"\n      :aria-current=\"ariaCurrent\"\n      data-qa=\"breadcrumb-item\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot default slot for breadcrumb item's label -->\n      <slot>\n        {{ label }}\n      </slot>\n    </dt-link>\n  </li>\n</template>\n\n<script>\nimport { BREADCRUMB_ITEM_SELECTED_MODIFIER } from './breadcrumbs_constants';\nimport { DtLink } from '../link';\nimport { MUTED } from '../link/link_constants';\n\nexport default {\n  name: 'DtBreadcrumbItem',\n\n  components: {\n    DtLink,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Passed through to link. If true, applies inverted styles to the link.\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Applies selected styles to the breadcrumb\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Describes the breadcrumb. Overridden by default slot\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n  },\n\n  data () {\n    return {\n      BREADCRUMB_ITEM_SELECTED_MODIFIER,\n    };\n  },\n\n  computed: {\n    linkKind () {\n      return this.inverted ? '' : MUTED;\n    },\n\n    linkInverted () {\n      return !!this.inverted;\n    },\n\n    ariaCurrent () {\n      return this.selected ? 'location' : undefined;\n    },\n  },\n};\n</script>\n","<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  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","_createElementBlock","_normalizeClass","_createVNode","_mergeProps","_renderSlot","breadcrumbs","_createElementVNode","_openBlock","_Fragment","_renderList","_createBlock"],"mappings":";;;;;;AAAY,MAAC,oCAAoC;AACrC,MAAC,gCAAgC;AC2B7C,MAAKA,cAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AAAA,EAED,UAAU;AAAA,IACR,WAAY;AACV,aAAO,KAAK,WAAW,KAAK;AAAA,IAC7B;AAAA,IAED,eAAgB;AACd,aAAO,CAAC,CAAC,KAAK;AAAA,IACf;AAAA,IAED,cAAe;AACb,aAAO,KAAK,WAAW,aAAa;AAAA,IACrC;AAAA,EACF;AACH;;;sBAjFEC,mBAmBK,MAAA;AAAA,IAlBH,WAAQ;AAAA,IACP,OAAKC,eAAA;AAAA;MAA0C,EAAA,CAAA,MAAA,iCAAiC,GAAG,OAAQ,SAAA;AAAA;;IAK5FC,YAWU,oBAXVC,WAWU;AAAA,MAVP,MAAM,SAAQ;AAAA,MACd,UAAU,SAAY;AAAA,MACtB,gBAAc,SAAW;AAAA,MAC1B,WAAQ;AAAA,OACA,KAAM,MAAA,GAAA;AAAA,uBAGd,MAEO;AAAA,QAFPC,WAEO,4BAFP,MAEO;AAAA,0CADF,OAAK,KAAA,GAAA,CAAA;AAAA;;;;;;;ACgBhB,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS,MAAM,CAAE;AAAA,MACjB,SAAUC,cAAa;AACrB,eAAOA,aAAY,MAAM,CAAC,EAAE,MAAM,YAAY;AAC5C,iBAAO,SAAS,UAAa,UAAU;AAAA,QACzC,CAAC;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;AAAA;EAEH;AAAA,EAED,SAAS;AAAA,IACP,qBAAsB,OAAO;AAC3B,aAAO,oBAAoB,KAAK,IAAI,MAAM,gBAAiB,CAAA;AAAA,IAC5D;AAAA,EACF;AACH;;;;sBAlFEL,mBAmBM,OAAA;AAAA,IAlBH,cAAY,OAAS;AAAA,IACtB,WAAQ;AAAA,IACP,OAAKC,eAAA;AAAA;MAAoC,EAAA,CAAA,MAAA,6BAA6B,GAAG,OAAQ,SAAA;AAAA;;IAKlFK,mBAUK,MAAA,MAAA;AAAA,MARHF,WAOO,4BAPP,MAOO;AAAA,SANLG,UAAA,IAAA,GAAAP,mBAKEQ,UAJwB,MAAAC,WAAA,OAAA,aAAhB,CAAA,MAAM,UAAK;AADrB,iBAAAF,UAAA,GAAAG,YAKE,+BALFP,WAKE;AAAA,YAHC,KAAK,SAAoB,qBAAC,KAAK;AAAA,YAC/B,UAAU,OAAQ;AAAA,aACX,IAAI,GAAA,MAAA,IAAA,CAAA,UAAA,CAAA;AAAA;;;;;;"}

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

@@ -27,9 +27,14 @@ const _sfc_main = {
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("div", {
-    class: vue.normalizeClass(["d-btn-group", $data.BUTTON_GROUP_ALIGNMENT[$props.alignment]]),
+    class: vue.normalizeClass([
+      "d-btn-group",
+      $data.BUTTON_GROUP_ALIGNMENT[$props.alignment]
+    ]),
     role: "group"
-  }, [vue.renderSlot(_ctx.$slots, "default")], 2);
+  }, [
+    vue.renderSlot(_ctx.$slots, "default")
+  ], 2);
 }
 const button_group = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.BUTTON_GROUP_ALIGNMENT = BUTTON_GROUP_ALIGNMENT;

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.cjs","sources":["../../components/button_group/button_group_constants.js","../../components/button_group/button_group.vue"],"sourcesContent":["export const BUTTON_GROUP_ALIGNMENT = {\n  start: 'd-btn-group--start',\n  end: 'd-btn-group--end',\n  'space-between': 'd-btn-group--space-between',\n};\n","<template>\n  <div\n    :class=\"[\n      'd-btn-group',\n      BUTTON_GROUP_ALIGNMENT[alignment],\n    ]\"\n    role=\"group\"\n  >\n    <!-- @slot Default slot for button items -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport { BUTTON_GROUP_ALIGNMENT } from './button_group_constants';\n\nexport default {\n  name: 'DtButtonGroup',\n\n  props: {\n    /**\n     * Alignment of the buttons inside the container\n     */\n    alignment: {\n      type: String,\n      default: 'start',\n      validator: (alignment) => Object.keys(BUTTON_GROUP_ALIGNMENT).includes(alignment),\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_GROUP_ALIGNMENT,\n    };\n  },\n};\n</script>\n"],"names":["BUTTON_GROUP_ALIGNMENT","start","end","_sfc_main","name","props","alignment","type","String","default","validator","Object","keys","includes","data","_createElementBlock","class","_normalizeClass","$data","$props","role","_renderSlot","_ctx","$slots"],"mappings":";;;;AAAO,MAAMA,yBAAyB;AAAA,EACpCC,OAAO;AAAA,EACPC,KAAK;AAAA,EACL,iBAAiB;AACnB;ACYA,MAAKC,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,OAAO;AAAA;AAAA;AAAA;AAAA,IAILC,WAAW;AAAA,MACTC,MAAMC;AAAAA,MACNC,SAAS;AAAA,MACTC,WAAYJ,eAAcK,OAAOC,KAAKZ,sBAAsB,EAAEa,SAASP,SAAS;AAAA,IAClF;AAAA,EACD;AAAA,EAEDQ,OAAQ;AACN,WAAO;AAAA,MACLd;AAAAA;EAEJ;AACF;;0BAlCEe,IASM,mBAAA,OAAA;AAAA,IARHC,OAAKC,IAAAA,eAAA,gBAA+BC,MAAAlB,uBAAuBmB,OAASb,SAAA,CAAA;IAIrEc,MAAK;AAAA,MAGLC,IAAQ,WAAAC,KAAAC,QAAA,SAAA,CAAA;;;;;"}
+{"version":3,"file":"button-group.cjs","sources":["../../components/button_group/button_group_constants.js","../../components/button_group/button_group.vue"],"sourcesContent":["export const BUTTON_GROUP_ALIGNMENT = {\n  start: 'd-btn-group--start',\n  end: 'd-btn-group--end',\n  'space-between': 'd-btn-group--space-between',\n};\n","<template>\n  <div\n    :class=\"[\n      'd-btn-group',\n      BUTTON_GROUP_ALIGNMENT[alignment],\n    ]\"\n    role=\"group\"\n  >\n    <!-- @slot Default slot for button items -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport { BUTTON_GROUP_ALIGNMENT } from './button_group_constants';\n\nexport default {\n  name: 'DtButtonGroup',\n\n  props: {\n    /**\n     * Alignment of the buttons inside the container\n     */\n    alignment: {\n      type: String,\n      default: 'start',\n      validator: (alignment) => Object.keys(BUTTON_GROUP_ALIGNMENT).includes(alignment),\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_GROUP_ALIGNMENT,\n    };\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;;;AAAY,MAAC,yBAAyB;AAAA,EACpC,OAAO;AAAA,EACP,KAAK;AAAA,EACL,iBAAiB;AACnB;ACYA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,cAAc,OAAO,KAAK,sBAAsB,EAAE,SAAS,SAAS;AAAA,IACjF;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AACH;;0BAlCEA,IASM,mBAAA,OAAA;AAAA,IARH,OAAKC,IAAAA,eAAA;AAAA;MAA+B,MAAA,uBAAuB,OAAS,SAAA;AAAA;IAIrE,MAAK;AAAA;IAGLC,eAAQ,KAAA,QAAA,SAAA;AAAA;;;;;"}

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

@@ -25,9 +25,14 @@ const _sfc_main = {
 };
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", {
-    class: normalizeClass(["d-btn-group", $data.BUTTON_GROUP_ALIGNMENT[$props.alignment]]),
+    class: normalizeClass([
+      "d-btn-group",
+      $data.BUTTON_GROUP_ALIGNMENT[$props.alignment]
+    ]),
     role: "group"
-  }, [renderSlot(_ctx.$slots, "default")], 2);
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 2);
 }
 const button_group = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

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

@@ -1 +1 @@
-{"version":3,"file":"button-group.js","sources":["../../components/button_group/button_group_constants.js","../../components/button_group/button_group.vue"],"sourcesContent":["export const BUTTON_GROUP_ALIGNMENT = {\n  start: 'd-btn-group--start',\n  end: 'd-btn-group--end',\n  'space-between': 'd-btn-group--space-between',\n};\n","<template>\n  <div\n    :class=\"[\n      'd-btn-group',\n      BUTTON_GROUP_ALIGNMENT[alignment],\n    ]\"\n    role=\"group\"\n  >\n    <!-- @slot Default slot for button items -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport { BUTTON_GROUP_ALIGNMENT } from './button_group_constants';\n\nexport default {\n  name: 'DtButtonGroup',\n\n  props: {\n    /**\n     * Alignment of the buttons inside the container\n     */\n    alignment: {\n      type: String,\n      default: 'start',\n      validator: (alignment) => Object.keys(BUTTON_GROUP_ALIGNMENT).includes(alignment),\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_GROUP_ALIGNMENT,\n    };\n  },\n};\n</script>\n"],"names":["BUTTON_GROUP_ALIGNMENT","start","end","_sfc_main","name","props","alignment","type","String","default","validator","Object","keys","includes","data","_createElementBlock","class","_normalizeClass","$data","$props","role","_renderSlot","_ctx","$slots"],"mappings":";;AAAO,MAAMA,yBAAyB;AAAA,EACpCC,OAAO;AAAA,EACPC,KAAK;AAAA,EACL,iBAAiB;AACnB;ACYA,MAAKC,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,OAAO;AAAA;AAAA;AAAA;AAAA,IAILC,WAAW;AAAA,MACTC,MAAMC;AAAAA,MACNC,SAAS;AAAA,MACTC,WAAYJ,eAAcK,OAAOC,KAAKZ,sBAAsB,EAAEa,SAASP,SAAS;AAAA,IAClF;AAAA,EACD;AAAA,EAEDQ,OAAQ;AACN,WAAO;AAAA,MACLd;AAAAA;EAEJ;AACF;;sBAlCEe,mBASM,OAAA;AAAA,IARHC,OAAKC,eAAA,gBAA+BC,MAAAlB,uBAAuBmB,OAASb,SAAA,CAAA;IAIrEc,MAAK;AAAA,MAGLC,WAAQC,KAAAC,QAAA,SAAA,CAAA;;;"}
+{"version":3,"file":"button-group.js","sources":["../../components/button_group/button_group_constants.js","../../components/button_group/button_group.vue"],"sourcesContent":["export const BUTTON_GROUP_ALIGNMENT = {\n  start: 'd-btn-group--start',\n  end: 'd-btn-group--end',\n  'space-between': 'd-btn-group--space-between',\n};\n","<template>\n  <div\n    :class=\"[\n      'd-btn-group',\n      BUTTON_GROUP_ALIGNMENT[alignment],\n    ]\"\n    role=\"group\"\n  >\n    <!-- @slot Default slot for button items -->\n    <slot />\n  </div>\n</template>\n\n<script>\nimport { BUTTON_GROUP_ALIGNMENT } from './button_group_constants';\n\nexport default {\n  name: 'DtButtonGroup',\n\n  props: {\n    /**\n     * Alignment of the buttons inside the container\n     */\n    alignment: {\n      type: String,\n      default: 'start',\n      validator: (alignment) => Object.keys(BUTTON_GROUP_ALIGNMENT).includes(alignment),\n    },\n  },\n\n  data () {\n    return {\n      BUTTON_GROUP_ALIGNMENT,\n    };\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;AAAY,MAAC,yBAAyB;AAAA,EACpC,OAAO;AAAA,EACP,KAAK;AAAA,EACL,iBAAiB;AACnB;ACYA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,cAAc,OAAO,KAAK,sBAAsB,EAAE,SAAS,SAAS;AAAA,IACjF;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AACH;;sBAlCEA,mBASM,OAAA;AAAA,IARH,OAAKC,eAAA;AAAA;MAA+B,MAAA,uBAAuB,OAAS,SAAA;AAAA;IAIrE,MAAK;AAAA;IAGLC,WAAQ,KAAA,QAAA,SAAA;AAAA;;;"}

package/dist/vue3/lib/button.cjs

@@ -30,27 +30,32 @@ const ICON_POSITION_MODIFIERS = {
   top: "d-btn__icon--top",
   bottom: "d-btn__icon--bottom"
 };
-const INVALID_COMBINATION = [{
-  circle: true,
-  kind: "default",
-  importance: "primary",
-  message: _invalidCombinationMessage(true, "default", "primary")
-}, {
-  circle: true,
-  kind: "danger",
-  importance: "outlined",
-  message: _invalidCombinationMessage(true, "danger", "outlined")
-}, {
-  circle: true,
-  kind: "muted",
-  importance: "primary",
-  message: _invalidCombinationMessage(true, "muted", "primary")
-}, {
-  circle: false,
-  kind: "muted",
-  importance: "primary",
-  message: _invalidCombinationMessage(false, "muted", "primary")
-}];
+const INVALID_COMBINATION = [
+  {
+    circle: true,
+    kind: "default",
+    importance: "primary",
+    message: _invalidCombinationMessage(true, "default", "primary")
+  },
+  {
+    circle: true,
+    kind: "danger",
+    importance: "outlined",
+    message: _invalidCombinationMessage(true, "danger", "outlined")
+  },
+  {
+    circle: true,
+    kind: "muted",
+    importance: "primary",
+    message: _invalidCombinationMessage(true, "muted", "primary")
+  },
+  {
+    circle: false,
+    kind: "muted",
+    importance: "primary",
+    message: _invalidCombinationMessage(false, "muted", "primary")
+  }
+];
 const BUTTON_ICON_SIZES = {
   xs: "200",
   sm: "200",
@@ -269,15 +274,25 @@ const _sfc_main = {
   methods: {
     buttonClasses() {
       if (this.link) {
-        return ["d-link", link_constants.getLinkKindModifier(this.linkKind, this.linkInverted), BUTTON_SIZE_MODIFIERS[this.size]];
+        return [
+          "d-link",
+          link_constants.getLinkKindModifier(this.linkKind, this.linkInverted),
+          BUTTON_SIZE_MODIFIERS[this.size]
+        ];
       }
-      return ["d-btn", BUTTON_IMPORTANCE_MODIFIERS[this.importance], BUTTON_KIND_MODIFIERS[this.kind], 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
-      }];
+      return [
+        "d-btn",
+        BUTTON_IMPORTANCE_MODIFIERS[this.importance],
+        BUTTON_KIND_MODIFIERS[this.kind],
+        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(circle, kind, importance) {
       for (const row of INVALID_COMBINATION) {
@@ -302,26 +317,36 @@ const _sfc_main = {
 const _hoisted_1 = ["type", "disabled", "aria-live", "aria-label"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("button", vue.mergeProps({
-    class: ["base-button__button", $options.buttonClasses()],
+    class: [
+      "base-button__button",
+      $options.buttonClasses()
+    ],
     "data-qa": "dt-button",
     type: $props.type,
     disabled: $props.disabled,
-    style: {
-      width: $props.width
-    },
+    style: { width: $props.width },
     "aria-live": $options.computedAriaLive,
     "aria-label": $props.loading ? "loading" : _ctx.$attrs["aria-label"]
-  }, _ctx.$attrs, vue.toHandlers($options.buttonListeners, true)), [$options.shouldRenderIcon() ? (vue.openBlock(), vue.createElementBlock("span", {
-    key: 0,
-    "data-qa": "dt-button-icon",
-    class: vue.normalizeClass(["base-button__icon", "d-btn__icon", $data.ICON_POSITION_MODIFIERS[$props.iconPosition]])
-  }, [vue.renderSlot(_ctx.$slots, "icon", {
-    iconSize: $options.iconSize
-  })], 2)) : vue.createCommentVNode("", true), $data.hasSlotContent(_ctx.$slots.default) ? (vue.openBlock(), vue.createElementBlock("span", {
-    key: 1,
-    "data-qa": "dt-button-label",
-    class: vue.normalizeClass(["d-btn__label", "base-button__label", $props.labelClass])
-  }, [vue.renderSlot(_ctx.$slots, "default")], 2)) : vue.createCommentVNode("", true)], 16, _hoisted_1);
+  }, _ctx.$attrs, vue.toHandlers($options.buttonListeners, true)), [
+    $options.shouldRenderIcon() ? (vue.openBlock(), vue.createElementBlock("span", {
+      key: 0,
+      "data-qa": "dt-button-icon",
+      class: vue.normalizeClass([
+        "base-button__icon",
+        "d-btn__icon",
+        $data.ICON_POSITION_MODIFIERS[$props.iconPosition]
+      ])
+    }, [
+      vue.renderSlot(_ctx.$slots, "icon", { iconSize: $options.iconSize })
+    ], 2)) : vue.createCommentVNode("", true),
+    $data.hasSlotContent(_ctx.$slots.default) ? (vue.openBlock(), vue.createElementBlock("span", {
+      key: 1,
+      "data-qa": "dt-button-label",
+      class: vue.normalizeClass(["d-btn__label", "base-button__label", $props.labelClass])
+    }, [
+      vue.renderSlot(_ctx.$slots, "default")
+    ], 2)) : vue.createCommentVNode("", true)
+  ], 16, _hoisted_1);
 }
 const DtButton = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.BUTTON_ICON_SIZES = BUTTON_ICON_SIZES;

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

@@ -1 +1 @@
-{"version":3,"file":"button.cjs","sources":["../../components/button/button_constants.js","../../components/button/button.vue"],"sourcesContent":["export const BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  danger: 'd-btn--danger',\n  inverted: 'd-btn--inverted',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  primary: 'd-btn--primary',\n  outlined: 'd-btn--outlined',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'danger',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n","<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-bind=\"$attrs\"\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        'd-btn__icon',\n        ICON_POSITION_MODIFIERS[iconPosition],\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=\"['d-btn__label', 'base-button__label', labelClass]\"\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  name: 'DtButton',\n\n  inheritAttrs: false,\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, muted, danger, 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    };\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      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      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":["BUTTON_SIZE_MODIFIERS","xs","sm","md","lg","xl","BUTTON_KIND_MODIFIERS","default","muted","danger","inverted","BUTTON_IMPORTANCE_MODIFIERS","clear","primary","outlined","BUTTON_TYPES","ICON_POSITION_MODIFIERS","left","right","top","bottom","INVALID_COMBINATION","circle","kind","importance","message","_invalidCombinationMessage","BUTTON_ICON_SIZES","_sfc_main","name","inheritAttrs","props","type","Boolean","iconPosition","String","validator","position","Object","keys","includes","i","link","linkKind","lk","LINK_KIND_MODIFIERS","linkInverted","disabled","t","width","size","s","labelClass","Array","loading","k","assertiveOnFocus","active","emits","data","isInFocus","hasSlotContent","computed","buttonListeners","focusin","e","$emit","focusout","computedAriaLive","$attrs","ariaLive","iconSize","watch","$props","deep","immediate","handler","process","env","NODE_ENV","warn","isInvalidPropCombination","methods","buttonClasses","getLinkKindModifier","isIconOnly","isVerticalIconLayout","row","console","shouldRenderIcon","$slots","icon","_openBlock","_createElementBlock","_mergeProps","class","$options","style","_ctx","_toHandlers","_normalizeClass","$data","_renderSlot"],"mappings":"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"}
+{"version":3,"file":"button.cjs","sources":["../../components/button/button_constants.js","../../components/button/button.vue"],"sourcesContent":["export const BUTTON_SIZE_MODIFIERS = {\n  xs: 'd-btn--xs',\n  sm: 'd-btn--sm',\n  md: '',\n  lg: 'd-btn--lg',\n  xl: 'd-btn--xl',\n};\n\nexport const BUTTON_KIND_MODIFIERS = {\n  default: '',\n  muted: 'd-btn--muted',\n  danger: 'd-btn--danger',\n  inverted: 'd-btn--inverted',\n};\n\nexport const BUTTON_IMPORTANCE_MODIFIERS = {\n  clear: '',\n  primary: 'd-btn--primary',\n  outlined: 'd-btn--outlined',\n};\n\nexport const BUTTON_TYPES = ['submit', 'reset', 'button'];\n\nexport const ICON_POSITION_MODIFIERS = {\n  left: 'd-btn__icon--left',\n  right: 'd-btn__icon--right',\n  top: 'd-btn__icon--top',\n  bottom: 'd-btn__icon--bottom',\n};\n\nexport const INVALID_COMBINATION = [\n  {\n    circle: true,\n    kind: 'default',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'default', 'primary'),\n  },\n  {\n    circle: true,\n    kind: 'danger',\n    importance: 'outlined',\n    message: _invalidCombinationMessage(true, 'danger', 'outlined'),\n  },\n  {\n    circle: true,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(true, 'muted', 'primary'),\n  },\n  {\n    circle: false,\n    kind: 'muted',\n    importance: 'primary',\n    message: _invalidCombinationMessage(false, 'muted', 'primary'),\n  },\n];\n\nexport const BUTTON_ICON_SIZES = {\n  xs: '200',\n  sm: '200',\n  md: '300',\n  lg: '400',\n  xl: '500',\n};\n\nfunction _invalidCombinationMessage (circle, kind, importance) {\n  return `You cannot have a ${circle ? 'circle ' : ''}button \\\nwith kind: ${kind} and importance: ${importance} as it \\\ndoes not exist in our design system. \\\nSee https://dialtone.dialpad.com/components/button.html for a \\\nlist of available button styles`;\n}\n\nexport default {\n  BUTTON_SIZE_MODIFIERS,\n  BUTTON_KIND_MODIFIERS,\n  BUTTON_IMPORTANCE_MODIFIERS,\n  BUTTON_TYPES,\n  ICON_POSITION_MODIFIERS,\n  INVALID_COMBINATION,\n  BUTTON_ICON_SIZES,\n};\n","<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-bind=\"$attrs\"\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        'd-btn__icon',\n        ICON_POSITION_MODIFIERS[iconPosition],\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=\"['d-btn__label', 'base-button__label', labelClass]\"\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  name: 'DtButton',\n\n  inheritAttrs: false,\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, muted, danger, 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    };\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      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      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":["LINK_KIND_MODIFIERS","hasSlotContent","warn","getLinkKindModifier","_openBlock","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot"],"mappings":"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"}

package/dist/vue3/lib/button.js

@@ -28,27 +28,32 @@ const ICON_POSITION_MODIFIERS = {
   top: "d-btn__icon--top",
   bottom: "d-btn__icon--bottom"
 };
-const INVALID_COMBINATION = [{
-  circle: true,
-  kind: "default",
-  importance: "primary",
-  message: _invalidCombinationMessage(true, "default", "primary")
-}, {
-  circle: true,
-  kind: "danger",
-  importance: "outlined",
-  message: _invalidCombinationMessage(true, "danger", "outlined")
-}, {
-  circle: true,
-  kind: "muted",
-  importance: "primary",
-  message: _invalidCombinationMessage(true, "muted", "primary")
-}, {
-  circle: false,
-  kind: "muted",
-  importance: "primary",
-  message: _invalidCombinationMessage(false, "muted", "primary")
-}];
+const INVALID_COMBINATION = [
+  {
+    circle: true,
+    kind: "default",
+    importance: "primary",
+    message: _invalidCombinationMessage(true, "default", "primary")
+  },
+  {
+    circle: true,
+    kind: "danger",
+    importance: "outlined",
+    message: _invalidCombinationMessage(true, "danger", "outlined")
+  },
+  {
+    circle: true,
+    kind: "muted",
+    importance: "primary",
+    message: _invalidCombinationMessage(true, "muted", "primary")
+  },
+  {
+    circle: false,
+    kind: "muted",
+    importance: "primary",
+    message: _invalidCombinationMessage(false, "muted", "primary")
+  }
+];
 const BUTTON_ICON_SIZES = {
   xs: "200",
   sm: "200",
@@ -267,15 +272,25 @@ const _sfc_main = {
   methods: {
     buttonClasses() {
       if (this.link) {
-        return ["d-link", getLinkKindModifier(this.linkKind, this.linkInverted), BUTTON_SIZE_MODIFIERS[this.size]];
+        return [
+          "d-link",
+          getLinkKindModifier(this.linkKind, this.linkInverted),
+          BUTTON_SIZE_MODIFIERS[this.size]
+        ];
       }
-      return ["d-btn", BUTTON_IMPORTANCE_MODIFIERS[this.importance], BUTTON_KIND_MODIFIERS[this.kind], 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
-      }];
+      return [
+        "d-btn",
+        BUTTON_IMPORTANCE_MODIFIERS[this.importance],
+        BUTTON_KIND_MODIFIERS[this.kind],
+        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(circle, kind, importance) {
       for (const row of INVALID_COMBINATION) {
@@ -300,26 +315,36 @@ const _sfc_main = {
 const _hoisted_1 = ["type", "disabled", "aria-live", "aria-label"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("button", mergeProps({
-    class: ["base-button__button", $options.buttonClasses()],
+    class: [
+      "base-button__button",
+      $options.buttonClasses()
+    ],
     "data-qa": "dt-button",
     type: $props.type,
     disabled: $props.disabled,
-    style: {
-      width: $props.width
-    },
+    style: { width: $props.width },
     "aria-live": $options.computedAriaLive,
     "aria-label": $props.loading ? "loading" : _ctx.$attrs["aria-label"]
-  }, _ctx.$attrs, toHandlers($options.buttonListeners, true)), [$options.shouldRenderIcon() ? (openBlock(), createElementBlock("span", {
-    key: 0,
-    "data-qa": "dt-button-icon",
-    class: normalizeClass(["base-button__icon", "d-btn__icon", $data.ICON_POSITION_MODIFIERS[$props.iconPosition]])
-  }, [renderSlot(_ctx.$slots, "icon", {
-    iconSize: $options.iconSize
-  })], 2)) : createCommentVNode("", true), $data.hasSlotContent(_ctx.$slots.default) ? (openBlock(), createElementBlock("span", {
-    key: 1,
-    "data-qa": "dt-button-label",
-    class: normalizeClass(["d-btn__label", "base-button__label", $props.labelClass])
-  }, [renderSlot(_ctx.$slots, "default")], 2)) : createCommentVNode("", true)], 16, _hoisted_1);
+  }, _ctx.$attrs, toHandlers($options.buttonListeners, true)), [
+    $options.shouldRenderIcon() ? (openBlock(), createElementBlock("span", {
+      key: 0,
+      "data-qa": "dt-button-icon",
+      class: normalizeClass([
+        "base-button__icon",
+        "d-btn__icon",
+        $data.ICON_POSITION_MODIFIERS[$props.iconPosition]
+      ])
+    }, [
+      renderSlot(_ctx.$slots, "icon", { iconSize: $options.iconSize })
+    ], 2)) : createCommentVNode("", true),
+    $data.hasSlotContent(_ctx.$slots.default) ? (openBlock(), createElementBlock("span", {
+      key: 1,
+      "data-qa": "dt-button-label",
+      class: normalizeClass(["d-btn__label", "base-button__label", $props.labelClass])
+    }, [
+      renderSlot(_ctx.$slots, "default")
+    ], 2)) : createCommentVNode("", true)
+  ], 16, _hoisted_1);
 }
 const DtButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {