{"version":3,"file":"chip.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-close\n          :size=\"closeButtonIconSize\"\n        />\n      </template>\n    </dt-button>\n  </span>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\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  compatConfig: { MODE: 3 },\n  name: 'DtChip',\n\n  components: {\n    DtButton,\n    DtIconClose,\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":["_sfc_main","DtButton","DtIconClose","props","s","CHIP_SIZE_MODIFIERS","getUniqueString","hasSlotContent","event","_a","CHIP_ICON_SIZES","CHIP_CLOSE_BUTTON_SIZE_MODIFIERS","_hoisted_1","_hoisted_4","_openBlock","_createElementBlock","_createBlock","_resolveDynamicComponent","$props","_mergeProps","$options","_toHandlers","_withCtx","$data","_ctx","_hoisted_2","_renderSlot","_hoisted_3","_createCommentVNode","_normalizeClass","_component_dt_button","_createVNode","_component_dt_icon_close"],"mappings":"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"}