@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/button.cjs

@@ -1,2 +1,357 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),h=require("./utils.cjs"),_=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),b=require("../chunks/link_constants-Kn6kP4i1.js");require("./constants.cjs");const l={xs:"d-btn--xs",sm:"d-btn--sm",md:"",lg:"d-btn--lg",xl:"d-btn--xl"},r={default:"",muted:"d-btn--muted",danger:"d-btn--danger",inverted:"d-btn--inverted"},d={clear:"",primary:"d-btn--primary",outlined:"d-btn--outlined"},m=["submit","reset","button"],c={left:"d-btn__icon--left",right:"d-btn__icon--right",top:"d-btn__icon--top",bottom:"d-btn__icon--bottom"},I=[{circle:!0,kind:"default",importance:"primary",message:o(!0,"default","primary")},{circle:!0,kind:"danger",importance:"outlined",message:o(!0,"danger","outlined")},{circle:!0,kind:"muted",importance:"primary",message:o(!0,"muted","primary")},{circle:!1,kind:"muted",importance:"primary",message:o(!1,"muted","primary")}],f={xs:"200",sm:"200",md:"300",lg:"400",xl:"500"};function o(t,a,n){return`You cannot have a ${t?"circle ":""}button with kind: ${a} and importance: ${n} as it does not exist in our design system. See https://dialtone.dialpad.com/components/button.html for a list of available button styles`}const p={name:"DtButton",inheritAttrs:!1,props:{circle:{type:Boolean,default:!1},iconPosition:{type:String,default:"left",validator:t=>Object.keys(c).includes(t)},importance:{type:String,default:"primary",validator:t=>Object.keys(d).includes(t)},link:{type:Boolean,default:!1},linkKind:{type:String,default:"default",validator:t=>Object.keys(b.a).includes(t)},disabled:{type:Boolean,default:!1},type:{type:String,default:"button",validator:t=>m.includes(t)},width:{type:String,default:null},size:{type:String,default:"md",validator:t=>Object.keys(l).includes(t)},labelClass:{type:[String,Array,Object],default:""},loading:{type:Boolean,default:!1},kind:{type:String,default:"default",validator:t=>Object.keys(r).includes(t)},assertiveOnFocus:{type:Boolean,default:!1},active:{type:Boolean,default:!1}},emits:["focusin","focusout"],data(){return{ICON_POSITION_MODIFIERS:c,isInFocus:!1,hasSlotContent:h.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 f[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",b.a[this.linkKind],l[this.size]]:["d-btn",d[this.importance],r[this.kind],l[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,a,n){for(const i of I)if(t===i.circle&&a===i.kind&&n===i.importance)return console.warn(i.message),!1;return!0},shouldRenderIcon(){return this.$slots.icon&&!this.link},isIconOnly(){return this.shouldRenderIcon()&&!this.$slots.default},isVerticalIconLayout(){return!this.isIconOnly()&&["top","bottom"].includes(this.iconPosition)}}},O=["type","disabled","aria-live","aria-label"];function y(t,a,n,i,u,s){return e.openBlock(),e.createElementBlock("button",e.mergeProps({class:["base-button__button",s.buttonClasses()],"data-qa":"dt-button",type:n.type,disabled:n.disabled,style:{width:n.width},"aria-live":s.computedAriaLive,"aria-label":n.loading?"loading":t.$attrs["aria-label"]},t.$attrs,e.toHandlers(s.buttonListeners,!0)),[s.shouldRenderIcon()?(e.openBlock(),e.createElementBlock("span",{key:0,"data-qa":"dt-button-icon",class:e.normalizeClass(["base-button__icon","d-btn__icon",u.ICON_POSITION_MODIFIERS[n.iconPosition]])},[e.renderSlot(t.$slots,"icon",{iconSize:s.iconSize})],2)):e.createCommentVNode("",!0),u.hasSlotContent(t.$slots.default)?(e.openBlock(),e.createElementBlock("span",{key:1,"data-qa":"dt-button-label",class:e.normalizeClass(["d-btn__label","base-button__label",n.labelClass])},[e.renderSlot(t.$slots,"default")],2)):e.createCommentVNode("",!0)],16,O)}const S=_._(p,[["render",y]]);exports.BUTTON_ICON_SIZES=f;exports.BUTTON_IMPORTANCE_MODIFIERS=d;exports.BUTTON_KIND_MODIFIERS=r;exports.BUTTON_SIZE_MODIFIERS=l;exports.BUTTON_TYPES=m;exports.DtButton=S;exports.ICON_POSITION_MODIFIERS=c;exports.INVALID_COMBINATION=I;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const common_utils = require("../common/utils.cjs");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+const link_constants = require("../chunks/link_constants-Huj7D_hm.js");
+require("../common/constants.cjs");
+const BUTTON_SIZE_MODIFIERS = {
+  xs: "d-btn--xs",
+  sm: "d-btn--sm",
+  md: "",
+  lg: "d-btn--lg",
+  xl: "d-btn--xl"
+};
+const BUTTON_KIND_MODIFIERS = {
+  default: "",
+  muted: "d-btn--muted",
+  danger: "d-btn--danger",
+  inverted: "d-btn--inverted"
+};
+const BUTTON_IMPORTANCE_MODIFIERS = {
+  clear: "",
+  primary: "d-btn--primary",
+  outlined: "d-btn--outlined"
+};
+const BUTTON_TYPES = ["submit", "reset", "button"];
+const ICON_POSITION_MODIFIERS = {
+  left: "d-btn__icon--left",
+  right: "d-btn__icon--right",
+  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 BUTTON_ICON_SIZES = {
+  xs: "200",
+  sm: "200",
+  md: "300",
+  lg: "400",
+  xl: "500"
+};
+function _invalidCombinationMessage(circle, kind, importance) {
+  return `You cannot have a ${circle ? "circle " : ""}button with kind: ${kind} and importance: ${importance} as it does not exist in our design system. See https://dialtone.dialpad.com/components/button.html for a list of available button styles`;
+}
+const _sfc_main = {
+  name: "DtButton",
+  inheritAttrs: false,
+  props: {
+    /**
+     * Whether the button is a circle or not.
+     * @values true, false
+     */
+    circle: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The position of the icon slot within the button.
+     * @values left, right, top, bottom
+     */
+    iconPosition: {
+      type: String,
+      default: "left",
+      validator: (position) => Object.keys(ICON_POSITION_MODIFIERS).includes(position)
+    },
+    /**
+     * The fill and outline of the button associated with its visual importance.
+     * @values clear, outlined, primary
+     */
+    importance: {
+      type: String,
+      default: "primary",
+      validator: (i) => Object.keys(BUTTON_IMPORTANCE_MODIFIERS).includes(i)
+    },
+    /**
+     * Whether the button should be styled as a link or not.
+     * @values true, false
+     * @see DtLink
+     */
+    link: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The color of the link and button if the button is styled as a link.
+     * @values default, warning, danger, success, muted, inverted
+     * @see DtLink
+     */
+    linkKind: {
+      type: String,
+      default: "default",
+      validator: (lk) => Object.keys(link_constants.LINK_KIND_MODIFIERS).includes(lk)
+    },
+    /**
+     * HTML button disabled attribute
+     * <a
+     *   class="d-link"
+     *   href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled"
+     *   target="_blank"
+     * >
+     *   (Reference)
+     * </a>
+     * @values true, false
+     */
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * HTML button type attribute
+     * <a
+     *   class="d-link"
+     *   href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type"
+     *   target="_blank"
+     * >
+     *   (Reference)
+     * </a>
+     * @values button, submit, reset
+     */
+    type: {
+      type: String,
+      default: "button",
+      validator: (t) => BUTTON_TYPES.includes(t)
+    },
+    /**
+     * Button width, accepts
+     * <a class="d-link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/width" target="_blank">
+     *   CSS width attribute
+     * </a>
+     * values
+     */
+    width: {
+      type: String,
+      default: null
+    },
+    /**
+     * The size of the button.
+     * @values xs, sm, md, lg, xl
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s)
+    },
+    /**
+     * Used to customize the label container
+     */
+    labelClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Whether the button should display a loading animation or not.
+     * @values true, false
+     */
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The color of the button.
+     * @values default, muted, danger, inverted
+     */
+    kind: {
+      type: String,
+      default: "default",
+      validator: (k) => Object.keys(BUTTON_KIND_MODIFIERS).includes(k)
+    },
+    /**
+     * Determines whether a screenreader reads live updates of
+     * the button content to the user while the button
+     * is in focus. default is to not.
+     * @values true, false
+     */
+    assertiveOnFocus: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Determines whether the button should have active styling
+     * default is false.
+     * @values true, false
+     */
+    active: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [
+    /**
+     * Native button focus in event
+     *
+     * @event focusin
+     * @type {FocusEvent}
+     */
+    "focusin",
+    /**
+     * Native button focus out event
+     *
+     * @event focusout
+     * @type {FocusEvent}
+     */
+    "focusout"
+  ],
+  data() {
+    return {
+      ICON_POSITION_MODIFIERS,
+      // whether the button is currently in focus
+      isInFocus: false,
+      hasSlotContent: common_utils.hasSlotContent
+    };
+  },
+  computed: {
+    buttonListeners() {
+      return {
+        focusin: (e) => {
+          this.isInFocus = this.assertiveOnFocus;
+          this.$emit("focusin", e);
+        },
+        focusout: (e) => {
+          this.isInFocus = false;
+          this.$emit("focusout", e);
+        }
+      };
+    },
+    computedAriaLive() {
+      return this.assertiveOnFocus && this.isInFocus ? "assertive" : this.$attrs.ariaLive;
+    },
+    iconSize() {
+      return BUTTON_ICON_SIZES[this.size];
+    }
+  },
+  watch: {
+    $props: {
+      deep: true,
+      immediate: true,
+      handler() {
+        if (process.env.NODE_ENV === "production")
+          return;
+        if (this.circle && this.link) {
+          vue.warn("You cannot enable circle and link at the same time", this);
+        }
+        this.isInvalidPropCombination(this.circle, this.kind, this.importance);
+      }
+    }
+  },
+  methods: {
+    buttonClasses() {
+      if (this.link) {
+        return [
+          "d-link",
+          link_constants.LINK_KIND_MODIFIERS[this.linkKind],
+          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
+        }
+      ];
+    },
+    isInvalidPropCombination(circle, kind, importance) {
+      for (const row of INVALID_COMBINATION) {
+        if (circle === row.circle && kind === row.kind && importance === row.importance) {
+          console.warn(row.message);
+          return false;
+        }
+      }
+      return true;
+    },
+    shouldRenderIcon() {
+      return this.$slots.icon && !this.link;
+    },
+    isIconOnly() {
+      return this.shouldRenderIcon() && !this.$slots.default;
+    },
+    isVerticalIconLayout() {
+      return !this.isIconOnly() && ["top", "bottom"].includes(this.iconPosition);
+    }
+  }
+};
+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()
+    ],
+    "data-qa": "dt-button",
+    type: $props.type,
+    disabled: $props.disabled,
+    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);
+}
+const DtButton = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+exports.BUTTON_ICON_SIZES = BUTTON_ICON_SIZES;
+exports.BUTTON_IMPORTANCE_MODIFIERS = BUTTON_IMPORTANCE_MODIFIERS;
+exports.BUTTON_KIND_MODIFIERS = BUTTON_KIND_MODIFIERS;
+exports.BUTTON_SIZE_MODIFIERS = BUTTON_SIZE_MODIFIERS;
+exports.BUTTON_TYPES = BUTTON_TYPES;
+exports.DtButton = DtButton;
+exports.ICON_POSITION_MODIFIERS = ICON_POSITION_MODIFIERS;
+exports.INVALID_COMBINATION = INVALID_COMBINATION;
 //# sourceMappingURL=button.cjs.map

package/dist/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 } 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, inverted\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     * HTML button disabled attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </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          LINK_KIND_MODIFIERS[this.linkKind],\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 this.$slots.icon && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !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","BUTTON_KIND_MODIFIERS","BUTTON_IMPORTANCE_MODIFIERS","BUTTON_TYPES","ICON_POSITION_MODIFIERS","INVALID_COMBINATION","_invalidCombinationMessage","BUTTON_ICON_SIZES","circle","kind","importance","_sfc_main","position","i","lk","LINK_KIND_MODIFIERS","s","k","hasSlotContent","e","warn","row","_openBlock","_createElementBlock","_mergeProps","$options","$props","_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 } 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, inverted\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     * HTML button disabled attribute\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#disabled\"\n     *   target=\"_blank\"\n     * >\n     *   (Reference)\n     * </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          LINK_KIND_MODIFIERS[this.linkKind],\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 this.$slots.icon && !this.link;\n    },\n\n    isIconOnly () {\n      return this.shouldRenderIcon() && !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","_openBlock","_createElementBlock","_mergeProps","_toHandlers","_normalizeClass","_renderSlot"],"mappings":"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"}