@dialpad/dialtone-vue 3.150.0 → 3.150.1

package/dist/components/checkbox_group/checkbox_group.vue.cjs

@@ -0,0 +1,110 @@
+"use strict";
+const vue = require("vue");
+const input_group = require("../input_group/input_group.vue.cjs");
+const _sfc_main = {
+  name: "DtCheckboxGroup",
+  extends: input_group,
+  model: {
+    prop: "selectedValues"
+  },
+  props: {
+    /**
+     * Not supported by this component, please use selectedValues
+     */
+    value: {
+      type: [],
+      default: null,
+      validator: (value) => {
+        if (!value) {
+          return true;
+        }
+        vue.warn(
+          "Component uses selectedValues to initialize the model, value is not supported by this component",
+          void 0
+        );
+        return false;
+      }
+    },
+    /**
+     * A provided list of selected values(s) for the checkbox group
+     * @model selectedValues
+     */
+    selectedValues: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    /**
+     * A data qa tag for the radio group
+     */
+    dataQaGroup: {
+      type: String,
+      default: "checkbox-group"
+    },
+    /**
+     * A data qa tag for the radio group legend
+     */
+    dataQaGroupLegend: {
+      type: String,
+      default: "checkbox-group-legend"
+    },
+    /**
+     * A data qa tag for the radio group messages
+     */
+    dataQaGroupMessages: {
+      type: String,
+      default: "checkbox-group-messages"
+    }
+  },
+  emits: [
+    /**
+     * Native input event
+     *
+     * @event input
+     * @type {Array}
+     */
+    "input"
+  ],
+  data() {
+    return {
+      internalValue: this.selectedValues
+    };
+  },
+  watch: {
+    selectedValues(newSelectedValues) {
+      this.internalValue = newSelectedValues;
+    },
+    /*
+    * watching value to support 2 way binding for slotted checkboxes.
+    * need this to pass value to slotted checkboxes if modified outside
+    * checkbox group.
+    */
+    internalValue: {
+      immediate: true,
+      handler(newInternalValue) {
+        this.provideObj.selectedValues = newInternalValue;
+      }
+    }
+  },
+  methods: {
+    /*
+     * provided value to support 2 way binding for slotted checkboxes.
+     * slotted checkbox will change this value and need to emit new value up.
+     */
+    setGroupValue(value, checked) {
+      if (!checked) {
+        this.internalValue = this.internalValue.filter((checkedValue) => checkedValue !== value);
+      } else if (!this.internalValue.includes(value)) {
+        this.internalValue.push(value);
+      }
+      this.$emit("input", this.internalValue);
+    },
+    getMessageKey(type, index) {
+      return `checkbox-group-message-${type}-${index}-${this.id}`;
+    }
+  }
+};
+const _sfc_main$1 = _sfc_main;
+module.exports = _sfc_main$1;
+//# sourceMappingURL=checkbox_group.vue.cjs.map

package/dist/components/checkbox_group/checkbox_group.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox_group.vue.cjs","sources":["../../../components/checkbox_group/checkbox_group.vue"],"sourcesContent":["<script>\nimport { warn } from 'vue';\nimport { DtInputGroup } from '../input_group';\n\n/**\n * Checkbox Groups are convenience components for a grouping of related Checkboxes.\n * While each Checkbox within the group is independent, the `v-model` on the group provides\n * a convenient interface for determining which Checkboxes within the group are checked.\n * @see https://dialtone.dialpad.com/components/checkbox_group.html\n */\nexport default {\n  name: 'DtCheckboxGroup',\n\n  extends: DtInputGroup,\n\n  model: {\n    prop: 'selectedValues',\n  },\n\n  props: {\n    /**\n     * Not supported by this component, please use selectedValues\n     */\n    value: {\n      type: [],\n      default: null,\n      validator: value => {\n        if (!value) {\n          return true;\n        }\n\n        warn(\n          'Component uses selectedValues to initialize the model, value is not supported by this component',\n          this,\n        );\n\n        return false;\n      },\n    },\n\n    /**\n     * A provided list of selected values(s) for the checkbox group\n     * @model selectedValues\n     */\n    selectedValues: {\n      type: Array,\n      default () {\n        return [];\n      },\n    },\n\n    /**\n     * A data qa tag for the radio group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'checkbox-group',\n    },\n\n    /**\n     * A data qa tag for the radio group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'checkbox-group-legend',\n    },\n\n    /**\n     * A data qa tag for the radio group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'checkbox-group-messages',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Array}\n     */\n    'input',\n  ],\n\n  data () {\n    return {\n      internalValue: this.selectedValues,\n    };\n  },\n\n  watch: {\n    selectedValues (newSelectedValues) {\n      this.internalValue = newSelectedValues;\n    },\n\n    /*\n    * watching value to support 2 way binding for slotted checkboxes.\n    * need this to pass value to slotted checkboxes if modified outside\n    * checkbox group.\n    */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.selectedValues = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted checkboxes.\n     * slotted checkbox will change this value and need to emit new value up.\n     */\n    setGroupValue (value, checked) {\n      if (!checked) {\n        this.internalValue = this.internalValue.filter(checkedValue => checkedValue !== value);\n      } else if (!this.internalValue.includes(value)) {\n        this.internalValue.push(value);\n      }\n\n      this.$emit('input', this.internalValue);\n    },\n\n    getMessageKey (type, index) {\n      return `checkbox-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["DtInputGroup","warn","this"],"mappings":";;;AAUA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,SAASA;AAAAA,EAET,OAAO;AAAA,IACL,MAAM;AAAA,EACP;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO;AAAA,MACL,MAAM,CAAE;AAAA,MACR,SAAS;AAAA,MACT,WAAW,WAAS;AAClB,YAAI,CAAC,OAAO;AACV,iBAAO;AAAA,QACT;AAEAC,YAAI;AAAA,UACF;AAAA,UACAC;AAAAA;AAGF,eAAO;AAAA,MACR;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,UAAW;AACT,eAAO;MACR;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA;EAEvB;AAAA,EAED,OAAO;AAAA,IACL,eAAgB,mBAAmB;AACjC,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAAS,kBAAkB;AACzB,aAAK,WAAW,iBAAiB;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,cAAe,OAAO,SAAS;AAC7B,UAAI,CAAC,SAAS;AACZ,aAAK,gBAAgB,KAAK,cAAc,OAAO,kBAAgB,iBAAiB,KAAK;AAAA,MACvF,WAAW,CAAC,KAAK,cAAc,SAAS,KAAK,GAAG;AAC9C,aAAK,cAAc,KAAK,KAAK;AAAA,MAC/B;AAEA,WAAK,MAAM,SAAS,KAAK,aAAa;AAAA,IACvC;AAAA,IAED,cAAe,MAAM,OAAO;AAC1B,aAAO,0BAA0B,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IAC1D;AAAA,EACF;AACH;;;"}

package/dist/components/checkbox_group/checkbox_group.vue.js

@@ -0,0 +1,111 @@
+import { warn } from "vue";
+import DtInputGroup from "../input_group/input_group.vue.js";
+const _sfc_main = {
+  name: "DtCheckboxGroup",
+  extends: DtInputGroup,
+  model: {
+    prop: "selectedValues"
+  },
+  props: {
+    /**
+     * Not supported by this component, please use selectedValues
+     */
+    value: {
+      type: [],
+      default: null,
+      validator: (value) => {
+        if (!value) {
+          return true;
+        }
+        warn(
+          "Component uses selectedValues to initialize the model, value is not supported by this component",
+          void 0
+        );
+        return false;
+      }
+    },
+    /**
+     * A provided list of selected values(s) for the checkbox group
+     * @model selectedValues
+     */
+    selectedValues: {
+      type: Array,
+      default() {
+        return [];
+      }
+    },
+    /**
+     * A data qa tag for the radio group
+     */
+    dataQaGroup: {
+      type: String,
+      default: "checkbox-group"
+    },
+    /**
+     * A data qa tag for the radio group legend
+     */
+    dataQaGroupLegend: {
+      type: String,
+      default: "checkbox-group-legend"
+    },
+    /**
+     * A data qa tag for the radio group messages
+     */
+    dataQaGroupMessages: {
+      type: String,
+      default: "checkbox-group-messages"
+    }
+  },
+  emits: [
+    /**
+     * Native input event
+     *
+     * @event input
+     * @type {Array}
+     */
+    "input"
+  ],
+  data() {
+    return {
+      internalValue: this.selectedValues
+    };
+  },
+  watch: {
+    selectedValues(newSelectedValues) {
+      this.internalValue = newSelectedValues;
+    },
+    /*
+    * watching value to support 2 way binding for slotted checkboxes.
+    * need this to pass value to slotted checkboxes if modified outside
+    * checkbox group.
+    */
+    internalValue: {
+      immediate: true,
+      handler(newInternalValue) {
+        this.provideObj.selectedValues = newInternalValue;
+      }
+    }
+  },
+  methods: {
+    /*
+     * provided value to support 2 way binding for slotted checkboxes.
+     * slotted checkbox will change this value and need to emit new value up.
+     */
+    setGroupValue(value, checked) {
+      if (!checked) {
+        this.internalValue = this.internalValue.filter((checkedValue) => checkedValue !== value);
+      } else if (!this.internalValue.includes(value)) {
+        this.internalValue.push(value);
+      }
+      this.$emit("input", this.internalValue);
+    },
+    getMessageKey(type, index) {
+      return `checkbox-group-message-${type}-${index}-${this.id}`;
+    }
+  }
+};
+const _sfc_main$1 = _sfc_main;
+export {
+  _sfc_main$1 as default
+};
+//# sourceMappingURL=checkbox_group.vue.js.map

package/dist/components/checkbox_group/checkbox_group.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox_group.vue.js","sources":["../../../components/checkbox_group/checkbox_group.vue"],"sourcesContent":["<script>\nimport { warn } from 'vue';\nimport { DtInputGroup } from '../input_group';\n\n/**\n * Checkbox Groups are convenience components for a grouping of related Checkboxes.\n * While each Checkbox within the group is independent, the `v-model` on the group provides\n * a convenient interface for determining which Checkboxes within the group are checked.\n * @see https://dialtone.dialpad.com/components/checkbox_group.html\n */\nexport default {\n  name: 'DtCheckboxGroup',\n\n  extends: DtInputGroup,\n\n  model: {\n    prop: 'selectedValues',\n  },\n\n  props: {\n    /**\n     * Not supported by this component, please use selectedValues\n     */\n    value: {\n      type: [],\n      default: null,\n      validator: value => {\n        if (!value) {\n          return true;\n        }\n\n        warn(\n          'Component uses selectedValues to initialize the model, value is not supported by this component',\n          this,\n        );\n\n        return false;\n      },\n    },\n\n    /**\n     * A provided list of selected values(s) for the checkbox group\n     * @model selectedValues\n     */\n    selectedValues: {\n      type: Array,\n      default () {\n        return [];\n      },\n    },\n\n    /**\n     * A data qa tag for the radio group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'checkbox-group',\n    },\n\n    /**\n     * A data qa tag for the radio group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'checkbox-group-legend',\n    },\n\n    /**\n     * A data qa tag for the radio group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'checkbox-group-messages',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {Array}\n     */\n    'input',\n  ],\n\n  data () {\n    return {\n      internalValue: this.selectedValues,\n    };\n  },\n\n  watch: {\n    selectedValues (newSelectedValues) {\n      this.internalValue = newSelectedValues;\n    },\n\n    /*\n    * watching value to support 2 way binding for slotted checkboxes.\n    * need this to pass value to slotted checkboxes if modified outside\n    * checkbox group.\n    */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.selectedValues = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    /*\n     * provided value to support 2 way binding for slotted checkboxes.\n     * slotted checkbox will change this value and need to emit new value up.\n     */\n    setGroupValue (value, checked) {\n      if (!checked) {\n        this.internalValue = this.internalValue.filter(checkedValue => checkedValue !== value);\n      } else if (!this.internalValue.includes(value)) {\n        this.internalValue.push(value);\n      }\n\n      this.$emit('input', this.internalValue);\n    },\n\n    getMessageKey (type, index) {\n      return `checkbox-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["this"],"mappings":";;AAUA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,SAAS;AAAA,EAET,OAAO;AAAA,IACL,MAAM;AAAA,EACP;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,OAAO;AAAA,MACL,MAAM,CAAE;AAAA,MACR,SAAS;AAAA,MACT,WAAW,WAAS;AAClB,YAAI,CAAC,OAAO;AACV,iBAAO;AAAA,QACT;AAEA;AAAA,UACE;AAAA,UACAA;AAAAA;AAGF,eAAO;AAAA,MACR;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,UAAW;AACT,eAAO;MACR;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA;EAEvB;AAAA,EAED,OAAO;AAAA,IACL,eAAgB,mBAAmB;AACjC,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAAS,kBAAkB;AACzB,aAAK,WAAW,iBAAiB;AAAA,MAClC;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA,IAKP,cAAe,OAAO,SAAS;AAC7B,UAAI,CAAC,SAAS;AACZ,aAAK,gBAAgB,KAAK,cAAc,OAAO,kBAAgB,iBAAiB,KAAK;AAAA,MACvF,WAAW,CAAC,KAAK,cAAc,SAAS,KAAK,GAAG;AAC9C,aAAK,cAAc,KAAK,KAAK;AAAA,MAC/B;AAEA,WAAK,MAAM,SAAS,KAAK,aAAa;AAAA,IACvC;AAAA,IAED,cAAe,MAAM,OAAO;AAC1B,aAAO,0BAA0B,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IAC1D;AAAA,EACF;AACH;;"}

package/dist/components/chip/chip.vue.cjs

@@ -0,0 +1,212 @@
+"use strict";
+const chip_constants = require("./chip_constants.cjs");
+const common_utils = require("../../common/utils.cjs");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
+const button = require("../button/button.vue.cjs");
+const icon = require("../icon/icon.vue.cjs");
+const _sfc_main = {
+  name: "DtChip",
+  components: {
+    DtButton: button,
+    DtIcon: icon
+  },
+  props: {
+    /**
+     * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: function() {
+        return { ariaLabel: "close" };
+      },
+      validator: (props) => {
+        return !!props.ariaLabel;
+      }
+    },
+    /**
+     * Hides the close button on the chip
+     * @values true, false
+     */
+    hideClose: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The size of the chip.
+     * @values xs, sm, md
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (s) => Object.keys(chip_constants.CHIP_SIZE_MODIFIERS).includes(s)
+    },
+    /**
+     * The interactivity of the chip.
+     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.
+     * @values true, false
+     */
+    interactive: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Id to use for the dialog's aria-labelledby.
+     */
+    id: {
+      type: String,
+      default: function() {
+        return common_utils.getUniqueString();
+      }
+    },
+    /**
+     * Descriptive label for the chip content.
+     * If this prop is unset the content in the default slot will be used as an aria-label.
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class name for the chip element.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Additional class name for the span element.
+     */
+    labelClass: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  },
+  emits: [
+    /**
+     * Native chip click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click",
+    /**
+     * Close button click event
+     *
+     * @event close
+     */
+    "close",
+    /**
+     * Native chip key up event
+     *
+     * @event keyup
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  data() {
+    return {
+      isActive: false,
+      hasSlotContent: common_utils.hasSlotContent
+    };
+  },
+  computed: {
+    chipListeners() {
+      return {
+        click: (event) => {
+          if (this.interactive) this.$emit("click", event);
+        },
+        keyup: (event) => {
+          var _a;
+          if (((_a = event.code) == null ? void 0 : _a.toLowerCase()) === "delete") {
+            this.onClose();
+          } else {
+            this.$emit("keyup", event);
+          }
+        }
+      };
+    },
+    closeButtonIconSize() {
+      return chip_constants.CHIP_ICON_SIZES[this.size];
+    }
+  },
+  methods: {
+    chipClasses() {
+      return [
+        this.$attrs["grouped-chip"] ? "d-chip" : "d-chip__label",
+        chip_constants.CHIP_SIZE_MODIFIERS[this.size],
+        this.labelClass
+      ];
+    },
+    chipCloseButtonClasses() {
+      return [
+        "d-chip__close",
+        chip_constants.CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size]
+      ];
+    },
+    onClose() {
+      if (!this.hideClose) {
+        this.$emit("close");
+      }
+    }
+  }
+};
+const _hoisted_1 = { class: "d-chip" };
+const _hoisted_2 = {
+  key: 0,
+  "data-qa": "dt-chip-icon",
+  class: "d-chip__icon"
+};
+const _hoisted_3 = {
+  key: 1,
+  "data-qa": "dt-chip-avatar"
+};
+const _hoisted_4 = ["id"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  const _component_dt_button = vue.resolveComponent("dt-button");
+  return vue.openBlock(), vue.createElementBlock("span", _hoisted_1, [
+    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.interactive ? "button" : "span"), vue.mergeProps({
+      id: $props.id,
+      type: $props.interactive && "button",
+      class: $options.chipClasses(),
+      "data-qa": "dt-chip",
+      "aria-labelledby": $props.ariaLabel ? void 0 : `${$props.id}-content`,
+      "aria-label": $props.ariaLabel
+    }, vue.toHandlers($options.chipListeners)), {
+      default: vue.withCtx(() => [
+        $data.hasSlotContent(_ctx.$slots.icon) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, [
+          vue.renderSlot(_ctx.$slots, "icon")
+        ])) : $data.hasSlotContent(_ctx.$slots.avatar) ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_3, [
+          vue.renderSlot(_ctx.$slots, "avatar")
+        ])) : vue.createCommentVNode("", true),
+        $data.hasSlotContent(_ctx.$slots.default) ? (vue.openBlock(), vue.createElementBlock("span", {
+          key: 2,
+          id: `${$props.id}-content`,
+          "data-qa": "dt-chip-label",
+          class: vue.normalizeClass(["d-chip__text", $props.contentClass])
+        }, [
+          vue.renderSlot(_ctx.$slots, "default")
+        ], 10, _hoisted_4)) : vue.createCommentVNode("", true)
+      ]),
+      _: 3
+    }, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])),
+    !$props.hideClose ? (vue.openBlock(), vue.createBlock(_component_dt_button, vue.mergeProps({ key: 0 }, $props.closeButtonProps, {
+      class: $options.chipCloseButtonClasses(),
+      "data-qa": "dt-chip-close",
+      "aria-label": $props.closeButtonProps.ariaLabel,
+      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
+    }), {
+      icon: vue.withCtx(() => [
+        vue.createVNode(_component_dt_icon, {
+          name: "close",
+          size: $options.closeButtonIconSize
+        }, null, 8, ["size"])
+      ]),
+      _: 1
+    }, 16, ["class", "aria-label"])) : vue.createCommentVNode("", true)
+  ]);
+}
+const DtChip = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
+module.exports = DtChip;
+//# sourceMappingURL=chip.vue.cjs.map

package/dist/components/chip/chip.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.vue.cjs","sources":["../../../components/chip/chip.vue"],"sourcesContent":["<template>\n  <span class=\"d-chip\">\n    <component\n      :is=\"interactive ? 'button' : 'span'\"\n      :id=\"id\"\n      :type=\"interactive && 'button'\"\n      :class=\"chipClasses()\"\n      data-qa=\"dt-chip\"\n      :aria-labelledby=\"ariaLabel ? undefined : `${id}-content`\"\n      :aria-label=\"ariaLabel\"\n      v-on=\"chipListeners\"\n    >\n      <span\n        v-if=\"hasSlotContent($slots.icon)\"\n        data-qa=\"dt-chip-icon\"\n        class=\"d-chip__icon\"\n      >\n        <!-- @slot slot for Chip icon -->\n        <slot name=\"icon\" />\n      </span>\n      <span\n        v-else-if=\"hasSlotContent($slots.avatar)\"\n        data-qa=\"dt-chip-avatar\"\n      >\n        <!-- @slot slot for Chip avatar -->\n        <slot name=\"avatar\" />\n      </span>\n      <span\n        v-if=\"hasSlotContent($slots.default)\"\n        :id=\"`${id}-content`\"\n        data-qa=\"dt-chip-label\"\n        :class=\"['d-chip__text', contentClass]\"\n      >\n        <!-- @slot slot for Content within chip -->\n        <slot />\n      </span>\n    </component>\n    <dt-button\n      v-if=\"!hideClose\"\n      v-bind=\"closeButtonProps\"\n      :class=\"chipCloseButtonClasses()\"\n      data-qa=\"dt-chip-close\"\n      :aria-label=\"closeButtonProps.ariaLabel\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"close\"\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\nimport {\n  CHIP_CLOSE_BUTTON_SIZE_MODIFIERS,\n  CHIP_SIZE_MODIFIERS,\n  CHIP_ICON_SIZES,\n} from './chip_constants';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\n\n/**\n * A chip is a compact UI element that provides brief, descriptive information about an element.\n * It is terse, ideally one word. It is important a button is identifiable, consistent, and\n * communicates its actions clearly, and is appropriately sized to its action.\n * @see https://dialtone.dialpad.com/components/chip.html\n */\nexport default {\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: function () { return { ariaLabel: 'close' }; },\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Hides the close button on the chip\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * The size of the chip.\n     * @values xs, sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The interactivity of the chip.\n     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.\n     * @values true, false\n     */\n    interactive: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    id: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Descriptive label for the chip content.\n     * If this prop is unset the content in the default slot will be used as an aria-label.\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the chip element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the span element.\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\n    /**\n     * Native chip click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Close button click event\n     *\n     * @event close\n     */\n    'close',\n\n    /**\n     * Native chip key up event\n     *\n     * @event keyup\n     * @type {KeyboardEvent}\n     */\n    'keyup',\n  ],\n\n  data () {\n    return {\n      isActive: false,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    chipListeners () {\n      return {\n        click: event => {\n          if (this.interactive) this.$emit('click', event);\n        },\n\n        keyup: event => {\n          if (event.code?.toLowerCase() === 'delete') {\n            this.onClose();\n          } else {\n            this.$emit('keyup', event);\n          }\n        },\n      };\n    },\n\n    closeButtonIconSize () {\n      return CHIP_ICON_SIZES[this.size];\n    },\n  },\n\n  methods: {\n    chipClasses () {\n      return [\n        this.$attrs['grouped-chip'] ? 'd-chip' : 'd-chip__label',\n        CHIP_SIZE_MODIFIERS[this.size],\n        this.labelClass,\n      ];\n    },\n\n    chipCloseButtonClasses () {\n      return [\n        'd-chip__close',\n        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size],\n      ];\n    },\n\n    onClose () {\n      if (!this.hideClose) {\n        this.$emit('close');\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtButton","DtIcon","CHIP_SIZE_MODIFIERS","getUniqueString","hasSlotContent","CHIP_ICON_SIZES","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_renderSlot","_createVNode"],"mappings":"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"}

package/dist/components/chip/chip.vue.js

@@ -0,0 +1,213 @@
+import { CHIP_SIZE_MODIFIERS, CHIP_ICON_SIZES, CHIP_CLOSE_BUTTON_SIZE_MODIFIERS } from "./chip_constants.js";
+import { getUniqueString, hasSlotContent } from "../../common/utils.js";
+import { resolveComponent, openBlock, createElementBlock, createBlock, resolveDynamicComponent, mergeProps, toHandlers, withCtx, renderSlot, createCommentVNode, normalizeClass, createVNode } from "vue";
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+import DtButton from "../button/button.vue.js";
+import DtIcon from "../icon/icon.vue.js";
+const _sfc_main = {
+  name: "DtChip",
+  components: {
+    DtButton,
+    DtIcon
+  },
+  props: {
+    /**
+     * A set of props to be passed into the modal's close button. Requires an 'ariaLabel' property.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: function() {
+        return { ariaLabel: "close" };
+      },
+      validator: (props) => {
+        return !!props.ariaLabel;
+      }
+    },
+    /**
+     * Hides the close button on the chip
+     * @values true, false
+     */
+    hideClose: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The size of the chip.
+     * @values xs, sm, md
+     */
+    size: {
+      type: String,
+      default: "md",
+      validator: (s) => Object.keys(CHIP_SIZE_MODIFIERS).includes(s)
+    },
+    /**
+     * The interactivity of the chip.
+     * Makes chip clickable, apply hover/focus/active style, emit keyboard events etc.
+     * @values true, false
+     */
+    interactive: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Id to use for the dialog's aria-labelledby.
+     */
+    id: {
+      type: String,
+      default: function() {
+        return getUniqueString();
+      }
+    },
+    /**
+     * Descriptive label for the chip content.
+     * If this prop is unset the content in the default slot will be used as an aria-label.
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class name for the chip element.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Additional class name for the span element.
+     */
+    labelClass: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  },
+  emits: [
+    /**
+     * Native chip click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click",
+    /**
+     * Close button click event
+     *
+     * @event close
+     */
+    "close",
+    /**
+     * Native chip key up event
+     *
+     * @event keyup
+     * @type {KeyboardEvent}
+     */
+    "keyup"
+  ],
+  data() {
+    return {
+      isActive: false,
+      hasSlotContent
+    };
+  },
+  computed: {
+    chipListeners() {
+      return {
+        click: (event) => {
+          if (this.interactive) this.$emit("click", event);
+        },
+        keyup: (event) => {
+          var _a;
+          if (((_a = event.code) == null ? void 0 : _a.toLowerCase()) === "delete") {
+            this.onClose();
+          } else {
+            this.$emit("keyup", event);
+          }
+        }
+      };
+    },
+    closeButtonIconSize() {
+      return CHIP_ICON_SIZES[this.size];
+    }
+  },
+  methods: {
+    chipClasses() {
+      return [
+        this.$attrs["grouped-chip"] ? "d-chip" : "d-chip__label",
+        CHIP_SIZE_MODIFIERS[this.size],
+        this.labelClass
+      ];
+    },
+    chipCloseButtonClasses() {
+      return [
+        "d-chip__close",
+        CHIP_CLOSE_BUTTON_SIZE_MODIFIERS[this.size]
+      ];
+    },
+    onClose() {
+      if (!this.hideClose) {
+        this.$emit("close");
+      }
+    }
+  }
+};
+const _hoisted_1 = { class: "d-chip" };
+const _hoisted_2 = {
+  key: 0,
+  "data-qa": "dt-chip-icon",
+  class: "d-chip__icon"
+};
+const _hoisted_3 = {
+  key: 1,
+  "data-qa": "dt-chip-avatar"
+};
+const _hoisted_4 = ["id"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = resolveComponent("dt-icon");
+  const _component_dt_button = resolveComponent("dt-button");
+  return openBlock(), createElementBlock("span", _hoisted_1, [
+    (openBlock(), createBlock(resolveDynamicComponent($props.interactive ? "button" : "span"), mergeProps({
+      id: $props.id,
+      type: $props.interactive && "button",
+      class: $options.chipClasses(),
+      "data-qa": "dt-chip",
+      "aria-labelledby": $props.ariaLabel ? void 0 : `${$props.id}-content`,
+      "aria-label": $props.ariaLabel
+    }, toHandlers($options.chipListeners)), {
+      default: withCtx(() => [
+        $data.hasSlotContent(_ctx.$slots.icon) ? (openBlock(), createElementBlock("span", _hoisted_2, [
+          renderSlot(_ctx.$slots, "icon")
+        ])) : $data.hasSlotContent(_ctx.$slots.avatar) ? (openBlock(), createElementBlock("span", _hoisted_3, [
+          renderSlot(_ctx.$slots, "avatar")
+        ])) : createCommentVNode("", true),
+        $data.hasSlotContent(_ctx.$slots.default) ? (openBlock(), createElementBlock("span", {
+          key: 2,
+          id: `${$props.id}-content`,
+          "data-qa": "dt-chip-label",
+          class: normalizeClass(["d-chip__text", $props.contentClass])
+        }, [
+          renderSlot(_ctx.$slots, "default")
+        ], 10, _hoisted_4)) : createCommentVNode("", true)
+      ]),
+      _: 3
+    }, 16, ["id", "type", "class", "aria-labelledby", "aria-label"])),
+    !$props.hideClose ? (openBlock(), createBlock(_component_dt_button, mergeProps({ key: 0 }, $props.closeButtonProps, {
+      class: $options.chipCloseButtonClasses(),
+      "data-qa": "dt-chip-close",
+      "aria-label": $props.closeButtonProps.ariaLabel,
+      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
+    }), {
+      icon: withCtx(() => [
+        createVNode(_component_dt_icon, {
+          name: "close",
+          size: $options.closeButtonIconSize
+        }, null, 8, ["size"])
+      ]),
+      _: 1
+    }, 16, ["class", "aria-label"])) : createCommentVNode("", true)
+  ]);
+}
+const DtChip = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  DtChip as default
+};
+//# sourceMappingURL=chip.vue.js.map