@dialpad/dialtone-vue 2.197.0-next.1 → 2.197.0

package/dist/lib/input/input.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input.cjs","sources":["../../../components/input/input.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['d-input__root', { 'd-input--hidden': hidden }]\"\n    data-qa=\"dt-input\"\n  >\n    <label\n      class=\"d-input__label\"\n      :aria-details=\"$slots.description || description ? descriptionKey : undefined\"\n      data-qa=\"dt-input-label-wrapper\"\n    >\n      <!-- @slot Slot for label, defaults to label prop -->\n      <slot name=\"labelSlot\">\n        <div\n          v-if=\"labelVisible && label\"\n          ref=\"label\"\n          data-qa=\"dt-input-label\"\n          :class=\"[\n            'd-input__label-text',\n            'd-label',\n            labelSizeClasses[size],\n          ]\"\n        >\n          {{ label }}\n        </div>\n      </slot>\n      <div\n        v-if=\"$slots.description || description || shouldValidateLength\"\n        :id=\"descriptionKey\"\n        ref=\"description\"\n        :class=\"[\n          'd-input__description',\n          'd-description',\n          descriptionSizeClasses[size],\n        ]\"\n        data-qa=\"dt-input-description\"\n      >\n        <div\n          v-if=\"$slots.description || description\"\n        >\n          <!-- @slot Slot for description, defaults to description prop -->\n          <slot name=\"description\">{{ description }}</slot>\n        </div>\n        <div\n          v-if=\"shouldValidateLength\"\n          data-qa=\"dt-input-length-description\"\n          class=\"d-input__length-description\"\n        >\n          {{ validationProps.length.description }}\n        </div>\n      </div>\n      <div\n        :class=\"inputWrapperClasses()\"\n        :read-only=\"disabled\"\n      >\n        <span\n          class=\"d-input-icon d-input-icon--left\"\n          data-qa=\"dt-input-left-icon-wrapper\"\n          @focusout=\"onBlur\"\n        >\n          <!-- @slot Slot for left icon -->\n          <slot\n            name=\"leftIcon\"\n            :icon-size=\"iconSize\"\n          />\n        </span>\n        <textarea\n          v-if=\"isTextarea\"\n          ref=\"input\"\n          :value=\"value\"\n          :name=\"name\"\n          :disabled=\"disabled\"\n          :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n          :class=\"inputClasses()\"\n          :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n          :data-qa=\"$attrs['data-qa'] ?? 'dt-input-input'\"\n          v-bind=\"$attrs\"\n          v-on=\"inputListeners\"\n        />\n        <input\n          v-else\n          ref=\"input\"\n          :value=\"value\"\n          :name=\"name\"\n          :type=\"type\"\n          :disabled=\"disabled\"\n          :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n          :class=\"inputClasses()\"\n          :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n          :data-qa=\"$attrs['data-qa'] ?? 'dt-input-input'\"\n          v-bind=\"$attrs\"\n          v-on=\"inputListeners\"\n        >\n        <span\n          class=\"d-input-icon d-input-icon--right\"\n          data-qa=\"dt-input-right-icon-wrapper\"\n          @focusout=\"onBlur\"\n        >\n          <!-- @slot Slot for right icon -->\n          <slot\n            name=\"rightIcon\"\n            :icon-size=\"iconSize\"\n            :clear=\"clearInput\"\n          />\n        </span>\n      </div>\n    </label>\n    <dt-validation-messages\n      :validation-messages=\"validationMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      v-bind=\"messagesChildProps\"\n      data-qa=\"dt-input-messages\"\n    />\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DESCRIPTION_SIZE_TYPES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport {\n  INPUT_TYPES,\n  INPUT_SIZES,\n  INPUT_SIZE_CLASSES,\n  INPUT_ICON_SIZES,\n  INPUT_STATE_CLASSES,\n  DESCRIPTION_SIZE_CLASSES,\n  LABEL_SIZE_CLASSES,\n} from './input_constants';\nimport {\n  getUniqueString,\n  getValidationState,\n} from '@/common/utils';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { MessagesMixin } from '@/common/mixins/input';\n\n/**\n * An input field is an input control that allows users to enter alphanumeric information.\n * It can have a range of options and supports single line and multi-line lengths,\n * as well as varying formats, including numbers, masked passwords, etc.\n * @property {Boolean} placeholder attribute\n * @see https://dialtone.dialpad.com/components/input.html\n */\nexport default {\n  name: 'DtInput',\n\n  components: { DtValidationMessages },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Name property of the input element\n     */\n    name: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Type of the input.\n     * When `textarea` a `<textarea>` element will be rendered instead of an `<input>` element.\n     * @values text, password, email, number, textarea, date, time, file, tel, search\n     * @default 'text'\n     */\n    type: {\n      type: String,\n      default: INPUT_TYPES.TEXT,\n      validator: (t) => Object.values(INPUT_TYPES).includes(t),\n    },\n\n    /**\n     * Value of the input\n     */\n    value: {\n      type: [String, Number],\n      default: '',\n    },\n\n    /**\n     * Disables the input\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Label for the input\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (t) => Object.values(INPUT_SIZES).includes(t),\n    },\n\n    /**\n     * Additional class name for the input element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    inputClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input wrapper element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    inputWrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * The current character length that the user has entered into the input.\n     * This will only need to be used if you are using `validate.length` and\n     * the string contains abnormal characters.\n     * For example, an emoji could take up many characters in the input, but should only count as 1 character.\n     * If no number is provided, a built-in length calculation will be used for the length validation.\n     */\n    currentLength: {\n      type: Number,\n      default: null,\n    },\n\n    /**\n     * Whether the input will continue to display a warning validation message even if the input has lost focus.\n     */\n    retainWarning: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Validation for the input. Supports maximum length validation with the structure:\n     * `{ \"length\": {\"description\": string, \"max\": number, \"warn\": number, \"message\": string,\n     * \"limitMaxLength\": boolean }}`\n     */\n    validate: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * hidden allows to use input without the element visually present in DOM\n     */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String}\n     */\n    'input',\n\n    /**\n     * Native input blur event\n     *\n     * @event blur\n     * @type {FocusEvent}\n     */\n    'blur',\n\n    /**\n     * Input clear event\n     *\n     * @event clear\n     */\n    'clear',\n\n    /**\n     * Native input focus event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n\n    /**\n     * Length of the input when currentLength prop is not passed\n     *\n     * @event update:length\n     * @type {Number}\n     */\n    'update:length',\n\n    /**\n     * Result of the input validation\n     *\n     * @event update:invalid\n     * @type {Boolean}\n     */\n    'update:invalid',\n  ],\n\n  data () {\n    return {\n      isInputFocused: false,\n      isInvalid: false,\n      defaultLength: 0,\n    };\n  },\n\n  computed: {\n\n    isTextarea () {\n      return this.type === INPUT_TYPES.TEXTAREA;\n    },\n\n    isDefaultSize () {\n      return this.size === INPUT_SIZES.DEFAULT;\n    },\n\n    iconSize () {\n      return INPUT_ICON_SIZES[this.size];\n    },\n\n    isValidSize () {\n      return Object.values(INPUT_SIZES).includes(this.size);\n    },\n\n    isValidDescriptionSize () {\n      return Object.values(DESCRIPTION_SIZE_TYPES).includes(this.size);\n    },\n\n    inputComponent () {\n      if (this.isTextarea) {\n        return 'textarea';\n      }\n\n      return 'input';\n    },\n\n    inputListeners () {\n      return {\n        /* TODO\n            Check if any usages of this component leverage $listeners and either remove if unused or scope the removal\n            and migration prior to upgrading to Vue 3.x\n        */\n        ...this.$listeners,\n        input: event => this.$emit('input', event.target.value),\n        focus: event => {\n          this.isInputFocused = true;\n          this.$emit('focus', event);\n        },\n\n        blur: event => {\n          this.isInputFocused = false;\n          this.onBlur(event);\n        },\n      };\n    },\n\n    descriptionKey () {\n      return `input-description-${getUniqueString()}`;\n    },\n\n    inputState () {\n      return getValidationState(this.validationMessages);\n    },\n\n    defaultLengthCalculation () {\n      return this.calculateLength(this.value);\n    },\n\n    validationProps () {\n      return {\n        length: {\n          description: this?.validate?.length?.description,\n          max: this?.validate?.length?.max,\n          warn: this?.validate?.length?.warn,\n          message: this?.validate?.length?.message,\n          limitMaxLength: this?.validate?.length?.limitMaxLength ? this.validate.length.limitMaxLength : false,\n        },\n      };\n    },\n\n    validationMessages () {\n      // Add length validation message if exists\n      if (this.showLengthLimitValidation) {\n        return this.formattedMessages.concat([this.inputLengthErrorMessage()]);\n      }\n\n      return this.formattedMessages;\n    },\n\n    showInputState () {\n      return this.showMessages && this.inputState;\n    },\n\n    inputLength () {\n      return this.currentLength ? this.currentLength : this.defaultLengthCalculation;\n    },\n\n    inputLengthState () {\n      if (this.inputLength < this.validationProps.length.warn) {\n        return null;\n      } else if (this.inputLength <= this.validationProps.length.max) {\n        return this.validationProps.length.warn ? VALIDATION_MESSAGE_TYPES.WARNING : null;\n      } else {\n        return VALIDATION_MESSAGE_TYPES.ERROR;\n      }\n    },\n\n    shouldValidateLength () {\n      // eslint-disable-next-line max-lines\n      return !!(\n        this.validationProps.length.description &&\n        this.validationProps.length.max\n      );\n    },\n\n    shouldLimitMaxLength () {\n      return this.shouldValidateLength && this.validationProps.length.limitMaxLength;\n    },\n\n    // eslint-disable-next-line complexity\n    showLengthLimitValidation () {\n      return (\n        this.shouldValidateLength &&\n        this.inputLengthState !== null &&\n        this.validationProps.length.message &&\n        (this.retainWarning || this.isInputFocused || this.isInvalid)\n      );\n    },\n\n    sizeModifierClass () {\n      if (this.isDefaultSize || !this.isValidSize) {\n        return '';\n      }\n\n      return INPUT_SIZE_CLASSES[this.inputComponent][this.size];\n    },\n\n    stateClass () {\n      return [INPUT_STATE_CLASSES[this.inputState]];\n    },\n  },\n\n  watch: {\n    isInvalid (val) {\n      this.$emit('update:invalid', val);\n    },\n\n    value: {\n      immediate: true,\n      handler (newValue) {\n        if (this.shouldValidateLength) {\n          this.validateLength(this.inputLength);\n        }\n\n        if (this.currentLength == null) {\n          this.$emit('update:length', this.calculateLength(newValue));\n        }\n      },\n    },\n  },\n\n  beforeMount () {\n    this.descriptionSizeClasses = DESCRIPTION_SIZE_CLASSES;\n    this.labelSizeClasses = LABEL_SIZE_CLASSES;\n  },\n\n  methods: {\n    inputClasses () {\n      return [\n        'd-input__input',\n        this.inputComponent === 'input' ? 'd-input' : 'd-textarea',\n        {\n          [this.stateClass]: this.showInputState,\n          'd-input-icon--left': this.$slots.leftIcon,\n          'd-input-icon--right': this.$slots.rightIcon,\n        },\n        this.sizeModifierClass,\n        this.inputClass,\n      ];\n    },\n\n    inputWrapperClasses () {\n      if (this.hidden) {\n        return [];\n      }\n      return [\n        'd-input__wrapper',\n        { [this.stateClass]: this.showInputState },\n        this.inputWrapperClass,\n      ];\n    },\n\n    calculateLength (value) {\n      if (typeof value !== 'string') {\n        return 0;\n      }\n\n      return [...value].length;\n    },\n\n    inputLengthErrorMessage () {\n      return {\n        message: this.validationProps.length.message,\n        type: this.inputLengthState,\n      };\n    },\n\n    onBlur (e) {\n      // Do not emit a blur event if the target element is a child of this component\n      if (!this.$refs.container?.contains(e.relatedTarget)) {\n        this.$emit('blur', e);\n      }\n    },\n\n    emitClearEvents () {\n      this.$emit('input', '');\n      this.$emit('clear');\n      this.$emit('update:modelValue', '');\n    },\n\n    blur () {\n      this.$refs.input.blur();\n    },\n\n    focus () {\n      this.$refs.input.focus();\n    },\n\n    select () {\n      this.$refs.input.select();\n    },\n\n    getMessageKey (type, index) {\n      return `message-${type}-${index}`;\n    },\n\n    validateLength (length) {\n      this.isInvalid = (length > this.validationProps.length.max);\n    },\n\n    clearInput () {\n      this.$refs.input.value = '';\n      this.$refs.input.focus();\n      this.emitClearEvents();\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","MessagesMixin","INPUT_TYPES","t","INPUT_SIZES","INPUT_ICON_SIZES","DESCRIPTION_SIZE_TYPES","event","getUniqueString","getValidationState","_b","_a","_d","_c","_f","_e","_h","_g","_j","_i","VALIDATION_MESSAGE_TYPES","INPUT_SIZE_CLASSES","INPUT_STATE_CLASSES","val","newValue","DESCRIPTION_SIZE_CLASSES","LABEL_SIZE_CLASSES","value","type","index","length"],"mappings":"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"}
+{"version":3,"file":"input.cjs","sources":["../../../components/input/input.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['d-input__root', { 'd-input--hidden': hidden }]\"\n    data-qa=\"dt-input\"\n  >\n    <label\n      class=\"d-input__label\"\n      :aria-details=\"$slots.description || description ? descriptionKey : undefined\"\n      data-qa=\"dt-input-label-wrapper\"\n    >\n      <!-- @slot Slot for label, defaults to label prop -->\n      <slot name=\"labelSlot\">\n        <div\n          v-if=\"labelVisible && label\"\n          ref=\"label\"\n          data-qa=\"dt-input-label\"\n          :class=\"[\n            'd-input__label-text',\n            'd-label',\n            labelSizeClasses[size],\n          ]\"\n        >\n          {{ label }}\n        </div>\n      </slot>\n      <div\n        v-if=\"$slots.description || description || shouldValidateLength\"\n        :id=\"descriptionKey\"\n        ref=\"description\"\n        :class=\"[\n          'd-input__description',\n          'd-description',\n          descriptionSizeClasses[size],\n        ]\"\n        data-qa=\"dt-input-description\"\n      >\n        <div\n          v-if=\"$slots.description || description\"\n        >\n          <!-- @slot Slot for description, defaults to description prop -->\n          <slot name=\"description\">{{ description }}</slot>\n        </div>\n        <div\n          v-if=\"shouldValidateLength\"\n          data-qa=\"dt-input-length-description\"\n          class=\"d-input__length-description\"\n        >\n          {{ validationProps.length.description }}\n        </div>\n      </div>\n      <div\n        :class=\"inputWrapperClasses()\"\n        :read-only=\"disabled\"\n      >\n        <span\n          class=\"d-input-icon d-input-icon--left\"\n          data-qa=\"dt-input-left-icon-wrapper\"\n          @focusout=\"onBlur\"\n        >\n          <!-- @slot Slot for left icon -->\n          <slot\n            name=\"leftIcon\"\n            :icon-size=\"iconSize\"\n          />\n        </span>\n        <textarea\n          v-if=\"isTextarea\"\n          ref=\"input\"\n          :value=\"value\"\n          :name=\"name\"\n          :disabled=\"disabled\"\n          :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n          :class=\"inputClasses()\"\n          :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n          :data-qa=\"$attrs['data-qa'] ?? 'dt-input-input'\"\n          v-bind=\"$attrs\"\n          v-on=\"inputListeners\"\n        />\n        <input\n          v-else\n          ref=\"input\"\n          :value=\"value\"\n          :name=\"name\"\n          :type=\"type\"\n          :disabled=\"disabled\"\n          :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n          :class=\"inputClasses()\"\n          :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n          :data-qa=\"$attrs['data-qa'] ?? 'dt-input-input'\"\n          v-bind=\"$attrs\"\n          v-on=\"inputListeners\"\n        >\n        <span\n          class=\"d-input-icon d-input-icon--right\"\n          data-qa=\"dt-input-right-icon-wrapper\"\n          @focusout=\"onBlur\"\n        >\n          <!-- @slot Slot for right icon -->\n          <slot\n            name=\"rightIcon\"\n            :icon-size=\"iconSize\"\n            :clear=\"clearInput\"\n          />\n        </span>\n      </div>\n    </label>\n    <dt-validation-messages\n      :validation-messages=\"validationMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      v-bind=\"messagesChildProps\"\n      data-qa=\"dt-input-messages\"\n    />\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DESCRIPTION_SIZE_TYPES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport {\n  INPUT_TYPES,\n  INPUT_SIZES,\n  INPUT_SIZE_CLASSES,\n  INPUT_ICON_SIZES,\n  INPUT_STATE_CLASSES,\n  DESCRIPTION_SIZE_CLASSES,\n  LABEL_SIZE_CLASSES,\n} from './input_constants';\nimport {\n  getUniqueString,\n  getValidationState,\n} from '@/common/utils';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { MessagesMixin } from '@/common/mixins/input';\n\n/**\n * An input field is an input control that allows users to enter alphanumeric information.\n * It can have a range of options and supports single line and multi-line lengths,\n * as well as varying formats, including numbers, masked passwords, etc.\n * @property {Boolean} placeholder attribute\n * @see https://dialtone.dialpad.com/components/input.html\n */\nexport default {\n  name: 'DtInput',\n\n  components: { DtValidationMessages },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Name property of the input element\n     */\n    name: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Type of the input.\n     * When `textarea` a `<textarea>` element will be rendered instead of an `<input>` element.\n     * @values text, password, email, number, textarea, date, time, file, tel, search\n     * @default 'text'\n     */\n    type: {\n      type: String,\n      default: INPUT_TYPES.TEXT,\n      validator: (t) => Object.values(INPUT_TYPES).includes(t),\n    },\n\n    /**\n     * Value of the input\n     */\n    value: {\n      type: [String, Number],\n      default: '',\n    },\n\n    /**\n     * Disables the input\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Label for the input\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (t) => Object.values(INPUT_SIZES).includes(t),\n    },\n\n    /**\n     * Additional class name for the input element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    inputClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input wrapper element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    inputWrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * The current character length that the user has entered into the input.\n     * This will only need to be used if you are using `validate.length` and\n     * the string contains abnormal characters.\n     * For example, an emoji could take up many characters in the input, but should only count as 1 character.\n     * If no number is provided, a built-in length calculation will be used for the length validation.\n     */\n    currentLength: {\n      type: Number,\n      default: null,\n    },\n\n    /**\n     * Whether the input will continue to display a warning validation message even if the input has lost focus.\n     */\n    retainWarning: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Validation for the input. Supports maximum length validation with the structure:\n     * `{ \"length\": {\"description\": string, \"max\": number, \"warn\": number, \"message\": string,\n     * \"limitMaxLength\": boolean }}`\n     */\n    validate: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * hidden allows to use input without the element visually present in DOM\n     */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String}\n     */\n    'input',\n\n    /**\n     * Native input blur event\n     *\n     * @event blur\n     * @type {FocusEvent}\n     */\n    'blur',\n\n    /**\n     * Input clear event\n     *\n     * @event clear\n     */\n    'clear',\n\n    /**\n     * Native input focus event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n\n    /**\n     * Length of the input when currentLength prop is not passed\n     *\n     * @event update:length\n     * @type {Number}\n     */\n    'update:length',\n\n    /**\n     * Result of the input validation\n     *\n     * @event update:invalid\n     * @type {Boolean}\n     */\n    'update:invalid',\n  ],\n\n  data () {\n    return {\n      isInputFocused: false,\n      isInvalid: false,\n      defaultLength: 0,\n    };\n  },\n\n  computed: {\n\n    isTextarea () {\n      return this.type === INPUT_TYPES.TEXTAREA;\n    },\n\n    isDefaultSize () {\n      return this.size === INPUT_SIZES.DEFAULT;\n    },\n\n    iconSize () {\n      return INPUT_ICON_SIZES[this.size];\n    },\n\n    isValidSize () {\n      return Object.values(INPUT_SIZES).includes(this.size);\n    },\n\n    isValidDescriptionSize () {\n      return Object.values(DESCRIPTION_SIZE_TYPES).includes(this.size);\n    },\n\n    inputComponent () {\n      if (this.isTextarea) {\n        return 'textarea';\n      }\n\n      return 'input';\n    },\n\n    inputListeners () {\n      return {\n        /* TODO\n            Check if any usages of this component leverage $listeners and either remove if unused or scope the removal\n            and migration prior to upgrading to Vue 3.x\n        */\n        ...this.$listeners,\n        input: event => this.$emit('input', event.target.value),\n        focus: event => {\n          this.isInputFocused = true;\n          this.$emit('focus', event);\n        },\n\n        blur: event => {\n          this.isInputFocused = false;\n          this.onBlur(event);\n        },\n      };\n    },\n\n    descriptionKey () {\n      return `input-description-${getUniqueString()}`;\n    },\n\n    inputState () {\n      return getValidationState(this.validationMessages);\n    },\n\n    defaultLengthCalculation () {\n      return this.calculateLength(this.value);\n    },\n\n    validationProps () {\n      return {\n        length: {\n          description: this?.validate?.length?.description,\n          max: this?.validate?.length?.max,\n          warn: this?.validate?.length?.warn,\n          message: this?.validate?.length?.message,\n          limitMaxLength: this?.validate?.length?.limitMaxLength ? this.validate.length.limitMaxLength : false,\n        },\n      };\n    },\n\n    validationMessages () {\n      // Add length validation message if exists\n      if (this.showLengthLimitValidation) {\n        return this.formattedMessages.concat([this.inputLengthErrorMessage()]);\n      }\n\n      return this.formattedMessages;\n    },\n\n    showInputState () {\n      return this.showMessages && this.inputState;\n    },\n\n    inputLength () {\n      return this.currentLength ? this.currentLength : this.defaultLengthCalculation;\n    },\n\n    inputLengthState () {\n      if (this.inputLength < this.validationProps.length.warn) {\n        return null;\n      } else if (this.inputLength <= this.validationProps.length.max) {\n        return this.validationProps.length.warn ? VALIDATION_MESSAGE_TYPES.WARNING : null;\n      } else {\n        return VALIDATION_MESSAGE_TYPES.ERROR;\n      }\n    },\n\n    shouldValidateLength () {\n      // eslint-disable-next-line max-lines\n      return !!(\n        this.validationProps.length.description &&\n        this.validationProps.length.max\n      );\n    },\n\n    shouldLimitMaxLength () {\n      return this.shouldValidateLength && this.validationProps.length.limitMaxLength;\n    },\n\n    // eslint-disable-next-line complexity\n    showLengthLimitValidation () {\n      return (\n        this.shouldValidateLength &&\n        this.inputLengthState !== null &&\n        this.validationProps.length.message &&\n        (this.retainWarning || this.isInputFocused || this.isInvalid)\n      );\n    },\n\n    sizeModifierClass () {\n      if (this.isDefaultSize || !this.isValidSize) {\n        return '';\n      }\n\n      return INPUT_SIZE_CLASSES[this.inputComponent][this.size];\n    },\n\n    stateClass () {\n      return [INPUT_STATE_CLASSES[this.inputState]];\n    },\n  },\n\n  watch: {\n    isInvalid (val) {\n      this.$emit('update:invalid', val);\n    },\n\n    value: {\n      immediate: true,\n      handler (newValue) {\n        if (this.shouldValidateLength) {\n          this.validateLength(this.inputLength);\n        }\n\n        if (this.currentLength == null) {\n          this.$emit('update:length', this.calculateLength(newValue));\n        }\n      },\n    },\n  },\n\n  beforeMount () {\n    this.descriptionSizeClasses = DESCRIPTION_SIZE_CLASSES;\n    this.labelSizeClasses = LABEL_SIZE_CLASSES;\n  },\n\n  methods: {\n    inputClasses () {\n      return [\n        'd-input__input',\n        this.inputComponent === 'input' ? 'd-input' : 'd-textarea',\n        {\n          [this.stateClass]: this.showInputState,\n          'd-input-icon--left': this.$slots.leftIcon,\n          'd-input-icon--right': this.$slots.rightIcon,\n        },\n        this.sizeModifierClass,\n        this.inputClass,\n      ];\n    },\n\n    inputWrapperClasses () {\n      if (this.hidden) {\n        return [];\n      }\n      return [\n        'd-input__wrapper',\n        { [this.stateClass]: this.showInputState },\n        this.inputWrapperClass,\n      ];\n    },\n\n    calculateLength (value) {\n      if (typeof value !== 'string') {\n        return 0;\n      }\n\n      return [...value].length;\n    },\n\n    inputLengthErrorMessage () {\n      return {\n        message: this.validationProps.length.message,\n        type: this.inputLengthState,\n      };\n    },\n\n    onBlur (e) {\n      // Do not emit a blur event if the target element is a child of this component\n      if (!this.$refs.container?.contains(e.relatedTarget)) {\n        this.$emit('blur', e);\n      }\n    },\n\n    emitClearEvents () {\n      this.$emit('input', '');\n      this.$emit('clear');\n      this.$emit('update:modelValue', '');\n    },\n\n    blur () {\n      this.$refs.input.blur();\n    },\n\n    focus () {\n      this.$refs.input.focus();\n    },\n\n    select () {\n      this.$refs.input.select();\n    },\n\n    getMessageKey (type, index) {\n      return `message-${type}-${index}`;\n    },\n\n    validateLength (length) {\n      this.isInvalid = (length > this.validationProps.length.max);\n    },\n\n    clearInput () {\n      this.$refs.input.value = '';\n      this.$refs.input.focus();\n      this.emitClearEvents();\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","MessagesMixin","INPUT_TYPES","t","INPUT_SIZES","INPUT_ICON_SIZES","DESCRIPTION_SIZE_TYPES","event","getUniqueString","getValidationState","_b","_a","_d","_c","_f","_e","_h","_g","_j","_i","VALIDATION_MESSAGE_TYPES","INPUT_SIZE_CLASSES","INPUT_STATE_CLASSES","val","newValue","DESCRIPTION_SIZE_CLASSES","LABEL_SIZE_CLASSES","value","type","index","length"],"mappings":"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"}

package/dist/lib/input/input.js

@@ -1,6 +1,6 @@
-import { DESCRIPTION_SIZE_TYPES as c, VALIDATION_MESSAGE_TYPES as h } from "../../common/constants/index.js";
-import { INPUT_TYPES as s, INPUT_SIZES as a, INPUT_ICON_SIZES as g, INPUT_SIZE_CLASSES as f, INPUT_STATE_CLASSES as m, DESCRIPTION_SIZE_CLASSES as v, LABEL_SIZE_CLASSES as _ } from "./input-constants.js";
-import { getUniqueString as S, getValidationState as L } from "../../common/utils/index.js";
+import { VALIDATION_MESSAGE_TYPES as h, DESCRIPTION_SIZE_TYPES as c } from "../../common/constants/index.js";
+import { INPUT_TYPES as s, DESCRIPTION_SIZE_CLASSES as g, LABEL_SIZE_CLASSES as f, INPUT_STATE_CLASSES as m, INPUT_SIZE_CLASSES as v, INPUT_SIZES as a, INPUT_ICON_SIZES as _ } from "./input-constants.js";
+import { getValidationState as S, getUniqueString as L } from "../../common/utils/index.js";
 import { MessagesMixin as b } from "../../common/mixins/input.js";
 import { n as C } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
 import I from "../validation-messages/validation-messages.js";
@@ -199,7 +199,7 @@ const $ = {
       return this.size === a.DEFAULT;
     },
     iconSize() {
-      return g[this.size];
+      return _[this.size];
     },
     isValidSize() {
       return Object.values(a).includes(this.size);
@@ -227,10 +227,10 @@ const $ = {
       };
     },
     descriptionKey() {
-      return `input-description-${S()}`;
+      return `input-description-${L()}`;
     },
     inputState() {
-      return L(this.validationMessages);
+      return S(this.validationMessages);
     },
     defaultLengthCalculation() {
       return this.calculateLength(this.value);
@@ -270,7 +270,7 @@ const $ = {
       return this.shouldValidateLength && this.inputLengthState !== null && this.validationProps.length.message && (this.retainWarning || this.isInputFocused || this.isInvalid);
     },
     sizeModifierClass() {
-      return this.isDefaultSize || !this.isValidSize ? "" : f[this.inputComponent][this.size];
+      return this.isDefaultSize || !this.isValidSize ? "" : v[this.inputComponent][this.size];
     },
     stateClass() {
       return [m[this.inputState]];
@@ -288,7 +288,7 @@ const $ = {
     }
   },
   beforeMount() {
-    this.descriptionSizeClasses = v, this.labelSizeClasses = _;
+    this.descriptionSizeClasses = g, this.labelSizeClasses = f;
   },
   methods: {
     inputClasses() {

package/dist/lib/input/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../components/input/input.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['d-input__root', { 'd-input--hidden': hidden }]\"\n    data-qa=\"dt-input\"\n  >\n    <label\n      class=\"d-input__label\"\n      :aria-details=\"$slots.description || description ? descriptionKey : undefined\"\n      data-qa=\"dt-input-label-wrapper\"\n    >\n      <!-- @slot Slot for label, defaults to label prop -->\n      <slot name=\"labelSlot\">\n        <div\n          v-if=\"labelVisible && label\"\n          ref=\"label\"\n          data-qa=\"dt-input-label\"\n          :class=\"[\n            'd-input__label-text',\n            'd-label',\n            labelSizeClasses[size],\n          ]\"\n        >\n          {{ label }}\n        </div>\n      </slot>\n      <div\n        v-if=\"$slots.description || description || shouldValidateLength\"\n        :id=\"descriptionKey\"\n        ref=\"description\"\n        :class=\"[\n          'd-input__description',\n          'd-description',\n          descriptionSizeClasses[size],\n        ]\"\n        data-qa=\"dt-input-description\"\n      >\n        <div\n          v-if=\"$slots.description || description\"\n        >\n          <!-- @slot Slot for description, defaults to description prop -->\n          <slot name=\"description\">{{ description }}</slot>\n        </div>\n        <div\n          v-if=\"shouldValidateLength\"\n          data-qa=\"dt-input-length-description\"\n          class=\"d-input__length-description\"\n        >\n          {{ validationProps.length.description }}\n        </div>\n      </div>\n      <div\n        :class=\"inputWrapperClasses()\"\n        :read-only=\"disabled\"\n      >\n        <span\n          class=\"d-input-icon d-input-icon--left\"\n          data-qa=\"dt-input-left-icon-wrapper\"\n          @focusout=\"onBlur\"\n        >\n          <!-- @slot Slot for left icon -->\n          <slot\n            name=\"leftIcon\"\n            :icon-size=\"iconSize\"\n          />\n        </span>\n        <textarea\n          v-if=\"isTextarea\"\n          ref=\"input\"\n          :value=\"value\"\n          :name=\"name\"\n          :disabled=\"disabled\"\n          :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n          :class=\"inputClasses()\"\n          :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n          :data-qa=\"$attrs['data-qa'] ?? 'dt-input-input'\"\n          v-bind=\"$attrs\"\n          v-on=\"inputListeners\"\n        />\n        <input\n          v-else\n          ref=\"input\"\n          :value=\"value\"\n          :name=\"name\"\n          :type=\"type\"\n          :disabled=\"disabled\"\n          :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n          :class=\"inputClasses()\"\n          :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n          :data-qa=\"$attrs['data-qa'] ?? 'dt-input-input'\"\n          v-bind=\"$attrs\"\n          v-on=\"inputListeners\"\n        >\n        <span\n          class=\"d-input-icon d-input-icon--right\"\n          data-qa=\"dt-input-right-icon-wrapper\"\n          @focusout=\"onBlur\"\n        >\n          <!-- @slot Slot for right icon -->\n          <slot\n            name=\"rightIcon\"\n            :icon-size=\"iconSize\"\n            :clear=\"clearInput\"\n          />\n        </span>\n      </div>\n    </label>\n    <dt-validation-messages\n      :validation-messages=\"validationMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      v-bind=\"messagesChildProps\"\n      data-qa=\"dt-input-messages\"\n    />\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DESCRIPTION_SIZE_TYPES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport {\n  INPUT_TYPES,\n  INPUT_SIZES,\n  INPUT_SIZE_CLASSES,\n  INPUT_ICON_SIZES,\n  INPUT_STATE_CLASSES,\n  DESCRIPTION_SIZE_CLASSES,\n  LABEL_SIZE_CLASSES,\n} from './input_constants';\nimport {\n  getUniqueString,\n  getValidationState,\n} from '@/common/utils';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { MessagesMixin } from '@/common/mixins/input';\n\n/**\n * An input field is an input control that allows users to enter alphanumeric information.\n * It can have a range of options and supports single line and multi-line lengths,\n * as well as varying formats, including numbers, masked passwords, etc.\n * @property {Boolean} placeholder attribute\n * @see https://dialtone.dialpad.com/components/input.html\n */\nexport default {\n  name: 'DtInput',\n\n  components: { DtValidationMessages },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Name property of the input element\n     */\n    name: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Type of the input.\n     * When `textarea` a `<textarea>` element will be rendered instead of an `<input>` element.\n     * @values text, password, email, number, textarea, date, time, file, tel, search\n     * @default 'text'\n     */\n    type: {\n      type: String,\n      default: INPUT_TYPES.TEXT,\n      validator: (t) => Object.values(INPUT_TYPES).includes(t),\n    },\n\n    /**\n     * Value of the input\n     */\n    value: {\n      type: [String, Number],\n      default: '',\n    },\n\n    /**\n     * Disables the input\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Label for the input\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (t) => Object.values(INPUT_SIZES).includes(t),\n    },\n\n    /**\n     * Additional class name for the input element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    inputClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input wrapper element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    inputWrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * The current character length that the user has entered into the input.\n     * This will only need to be used if you are using `validate.length` and\n     * the string contains abnormal characters.\n     * For example, an emoji could take up many characters in the input, but should only count as 1 character.\n     * If no number is provided, a built-in length calculation will be used for the length validation.\n     */\n    currentLength: {\n      type: Number,\n      default: null,\n    },\n\n    /**\n     * Whether the input will continue to display a warning validation message even if the input has lost focus.\n     */\n    retainWarning: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Validation for the input. Supports maximum length validation with the structure:\n     * `{ \"length\": {\"description\": string, \"max\": number, \"warn\": number, \"message\": string,\n     * \"limitMaxLength\": boolean }}`\n     */\n    validate: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * hidden allows to use input without the element visually present in DOM\n     */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String}\n     */\n    'input',\n\n    /**\n     * Native input blur event\n     *\n     * @event blur\n     * @type {FocusEvent}\n     */\n    'blur',\n\n    /**\n     * Input clear event\n     *\n     * @event clear\n     */\n    'clear',\n\n    /**\n     * Native input focus event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n\n    /**\n     * Length of the input when currentLength prop is not passed\n     *\n     * @event update:length\n     * @type {Number}\n     */\n    'update:length',\n\n    /**\n     * Result of the input validation\n     *\n     * @event update:invalid\n     * @type {Boolean}\n     */\n    'update:invalid',\n  ],\n\n  data () {\n    return {\n      isInputFocused: false,\n      isInvalid: false,\n      defaultLength: 0,\n    };\n  },\n\n  computed: {\n\n    isTextarea () {\n      return this.type === INPUT_TYPES.TEXTAREA;\n    },\n\n    isDefaultSize () {\n      return this.size === INPUT_SIZES.DEFAULT;\n    },\n\n    iconSize () {\n      return INPUT_ICON_SIZES[this.size];\n    },\n\n    isValidSize () {\n      return Object.values(INPUT_SIZES).includes(this.size);\n    },\n\n    isValidDescriptionSize () {\n      return Object.values(DESCRIPTION_SIZE_TYPES).includes(this.size);\n    },\n\n    inputComponent () {\n      if (this.isTextarea) {\n        return 'textarea';\n      }\n\n      return 'input';\n    },\n\n    inputListeners () {\n      return {\n        /* TODO\n            Check if any usages of this component leverage $listeners and either remove if unused or scope the removal\n            and migration prior to upgrading to Vue 3.x\n        */\n        ...this.$listeners,\n        input: event => this.$emit('input', event.target.value),\n        focus: event => {\n          this.isInputFocused = true;\n          this.$emit('focus', event);\n        },\n\n        blur: event => {\n          this.isInputFocused = false;\n          this.onBlur(event);\n        },\n      };\n    },\n\n    descriptionKey () {\n      return `input-description-${getUniqueString()}`;\n    },\n\n    inputState () {\n      return getValidationState(this.validationMessages);\n    },\n\n    defaultLengthCalculation () {\n      return this.calculateLength(this.value);\n    },\n\n    validationProps () {\n      return {\n        length: {\n          description: this?.validate?.length?.description,\n          max: this?.validate?.length?.max,\n          warn: this?.validate?.length?.warn,\n          message: this?.validate?.length?.message,\n          limitMaxLength: this?.validate?.length?.limitMaxLength ? this.validate.length.limitMaxLength : false,\n        },\n      };\n    },\n\n    validationMessages () {\n      // Add length validation message if exists\n      if (this.showLengthLimitValidation) {\n        return this.formattedMessages.concat([this.inputLengthErrorMessage()]);\n      }\n\n      return this.formattedMessages;\n    },\n\n    showInputState () {\n      return this.showMessages && this.inputState;\n    },\n\n    inputLength () {\n      return this.currentLength ? this.currentLength : this.defaultLengthCalculation;\n    },\n\n    inputLengthState () {\n      if (this.inputLength < this.validationProps.length.warn) {\n        return null;\n      } else if (this.inputLength <= this.validationProps.length.max) {\n        return this.validationProps.length.warn ? VALIDATION_MESSAGE_TYPES.WARNING : null;\n      } else {\n        return VALIDATION_MESSAGE_TYPES.ERROR;\n      }\n    },\n\n    shouldValidateLength () {\n      // eslint-disable-next-line max-lines\n      return !!(\n        this.validationProps.length.description &&\n        this.validationProps.length.max\n      );\n    },\n\n    shouldLimitMaxLength () {\n      return this.shouldValidateLength && this.validationProps.length.limitMaxLength;\n    },\n\n    // eslint-disable-next-line complexity\n    showLengthLimitValidation () {\n      return (\n        this.shouldValidateLength &&\n        this.inputLengthState !== null &&\n        this.validationProps.length.message &&\n        (this.retainWarning || this.isInputFocused || this.isInvalid)\n      );\n    },\n\n    sizeModifierClass () {\n      if (this.isDefaultSize || !this.isValidSize) {\n        return '';\n      }\n\n      return INPUT_SIZE_CLASSES[this.inputComponent][this.size];\n    },\n\n    stateClass () {\n      return [INPUT_STATE_CLASSES[this.inputState]];\n    },\n  },\n\n  watch: {\n    isInvalid (val) {\n      this.$emit('update:invalid', val);\n    },\n\n    value: {\n      immediate: true,\n      handler (newValue) {\n        if (this.shouldValidateLength) {\n          this.validateLength(this.inputLength);\n        }\n\n        if (this.currentLength == null) {\n          this.$emit('update:length', this.calculateLength(newValue));\n        }\n      },\n    },\n  },\n\n  beforeMount () {\n    this.descriptionSizeClasses = DESCRIPTION_SIZE_CLASSES;\n    this.labelSizeClasses = LABEL_SIZE_CLASSES;\n  },\n\n  methods: {\n    inputClasses () {\n      return [\n        'd-input__input',\n        this.inputComponent === 'input' ? 'd-input' : 'd-textarea',\n        {\n          [this.stateClass]: this.showInputState,\n          'd-input-icon--left': this.$slots.leftIcon,\n          'd-input-icon--right': this.$slots.rightIcon,\n        },\n        this.sizeModifierClass,\n        this.inputClass,\n      ];\n    },\n\n    inputWrapperClasses () {\n      if (this.hidden) {\n        return [];\n      }\n      return [\n        'd-input__wrapper',\n        { [this.stateClass]: this.showInputState },\n        this.inputWrapperClass,\n      ];\n    },\n\n    calculateLength (value) {\n      if (typeof value !== 'string') {\n        return 0;\n      }\n\n      return [...value].length;\n    },\n\n    inputLengthErrorMessage () {\n      return {\n        message: this.validationProps.length.message,\n        type: this.inputLengthState,\n      };\n    },\n\n    onBlur (e) {\n      // Do not emit a blur event if the target element is a child of this component\n      if (!this.$refs.container?.contains(e.relatedTarget)) {\n        this.$emit('blur', e);\n      }\n    },\n\n    emitClearEvents () {\n      this.$emit('input', '');\n      this.$emit('clear');\n      this.$emit('update:modelValue', '');\n    },\n\n    blur () {\n      this.$refs.input.blur();\n    },\n\n    focus () {\n      this.$refs.input.focus();\n    },\n\n    select () {\n      this.$refs.input.select();\n    },\n\n    getMessageKey (type, index) {\n      return `message-${type}-${index}`;\n    },\n\n    validateLength (length) {\n      this.isInvalid = (length > this.validationProps.length.max);\n    },\n\n    clearInput () {\n      this.$refs.input.value = '';\n      this.$refs.input.focus();\n      this.emitClearEvents();\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","MessagesMixin","INPUT_TYPES","t","INPUT_SIZES","INPUT_ICON_SIZES","DESCRIPTION_SIZE_TYPES","event","getUniqueString","getValidationState","_b","_a","_d","_c","_f","_e","_h","_g","_j","_i","VALIDATION_MESSAGE_TYPES","INPUT_SIZE_CLASSES","INPUT_STATE_CLASSES","val","newValue","DESCRIPTION_SIZE_CLASSES","LABEL_SIZE_CLASSES","value","type","index","length"],"mappings":";;;;;;AA+IA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,sBAAAC,EAAA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAC,EAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,OAAAD,CAAA,EAAA,SAAAC,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAA,MAAA,OAAA,OAAAC,CAAA,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,mBAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,gBAAA;AAAA,MACA,WAAA;AAAA,MACA,eAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,SAAAD,EAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,KAAA,SAAAE,EAAA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,aAAAC,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,OAAA,OAAAD,CAAA,EAAA,SAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,yBAAA;AACA,aAAA,OAAA,OAAAE,CAAA,EAAA,SAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,aACA,aAGA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAKA,GAAA,KAAA;AAAA,QACA,OAAA,CAAAC,MAAA,KAAA,MAAA,SAAAA,EAAA,OAAA,KAAA;AAAA,QACA,OAAA,CAAAA,MAAA;AACA,eAAA,iBAAA,IACA,KAAA,MAAA,SAAAA,CAAA;AAAA,QACA;AAAA,QAEA,MAAA,CAAAA,MAAA;AACA,eAAA,iBAAA,IACA,KAAA,OAAAA,CAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,qBAAAC,EAAA,CAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAAC,EAAA,KAAA,kBAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,aAAA,KAAA,gBAAA,KAAA,KAAA;AAAA,IACA;AAAA,IAEA,kBAAA;;AACA,aAAA;AAAA,QACA,QAAA;AAAA,UACA,cAAAC,KAAAC,IAAA,6BAAA,aAAA,gBAAAA,EAAA,WAAA,gBAAAD,EAAA;AAAA,UACA,MAAAE,KAAAC,IAAA,6BAAA,aAAA,gBAAAA,EAAA,WAAA,gBAAAD,EAAA;AAAA,UACA,OAAAE,KAAAC,IAAA,6BAAA,aAAA,gBAAAA,EAAA,WAAA,gBAAAD,EAAA;AAAA,UACA,UAAAE,KAAAC,IAAA,6BAAA,aAAA,gBAAAA,EAAA,WAAA,gBAAAD,EAAA;AAAA,UACA,iBAAAE,KAAAC,IAAA,6BAAA,aAAA,gBAAAA,EAAA,WAAA,QAAAD,EAAA,iBAAA,KAAA,SAAA,OAAA,iBAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,qBAAA;AAEA,aAAA,KAAA,4BACA,KAAA,kBAAA,OAAA,CAAA,KAAA,wBAAA,CAAA,CAAA,IAGA,KAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,gBAAA,KAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,KAAA,gBAAA,KAAA,gBAAA,KAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAA,KAAA,cAAA,KAAA,gBAAA,OAAA,OACA,OACA,KAAA,eAAA,KAAA,gBAAA,OAAA,MACA,KAAA,gBAAA,OAAA,OAAAE,EAAA,UAAA,OAEAA,EAAA;AAAA,IAEA;AAAA,IAEA,uBAAA;AAEA,aAAA,CAAA,EACA,KAAA,gBAAA,OAAA,eACA,KAAA,gBAAA,OAAA;AAAA,IAEA;AAAA,IAEA,uBAAA;AACA,aAAA,KAAA,wBAAA,KAAA,gBAAA,OAAA;AAAA,IACA;AAAA;AAAA,IAGA,4BAAA;AACA,aACA,KAAA,wBACA,KAAA,qBAAA,QACA,KAAA,gBAAA,OAAA,YACA,KAAA,iBAAA,KAAA,kBAAA,KAAA;AAAA,IAEA;AAAA,IAEA,oBAAA;AACA,aAAA,KAAA,iBAAA,CAAA,KAAA,cACA,KAGAC,EAAA,KAAA,cAAA,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,CAAAC,EAAA,KAAA,UAAA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,UAAAC,GAAA;AACA,WAAA,MAAA,kBAAAA,CAAA;AAAA,IACA;AAAA,IAEA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,QAAAC,GAAA;AACA,QAAA,KAAA,wBACA,KAAA,eAAA,KAAA,WAAA,GAGA,KAAA,iBAAA,QACA,KAAA,MAAA,iBAAA,KAAA,gBAAAA,CAAA,CAAA;AAAA,MAEA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,cAAA;AACA,SAAA,yBAAAC,GACA,KAAA,mBAAAC;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,eAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA,KAAA,mBAAA,UAAA,YAAA;AAAA,QACA;AAAA,UACA,CAAA,KAAA,UAAA,GAAA,KAAA;AAAA,UACA,sBAAA,KAAA,OAAA;AAAA,UACA,uBAAA,KAAA,OAAA;AAAA,QACA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,aAAA,KAAA,SACA,KAEA;AAAA,QACA;AAAA,QACA,EAAA,CAAA,KAAA,UAAA,GAAA,KAAA,eAAA;AAAA,QACA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,gBAAAC,GAAA;AACA,aAAA,OAAAA,KAAA,WACA,IAGA,CAAA,GAAAA,CAAA,EAAA;AAAA,IACA;AAAA,IAEA,0BAAA;AACA,aAAA;AAAA,QACA,SAAA,KAAA,gBAAA,OAAA;AAAA,QACA,MAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,OAAA,GAAA;;AAEA,OAAAhB,IAAA,KAAA,MAAA,cAAA,QAAAA,EAAA,SAAA,EAAA,kBACA,KAAA,MAAA,QAAA,CAAA;AAAA,IAEA;AAAA,IAEA,kBAAA;AACA,WAAA,MAAA,SAAA,EAAA,GACA,KAAA,MAAA,OAAA,GACA,KAAA,MAAA,qBAAA,EAAA;AAAA,IACA;AAAA,IAEA,OAAA;AACA,WAAA,MAAA,MAAA;IACA;AAAA,IAEA,QAAA;AACA,WAAA,MAAA,MAAA;IACA;AAAA,IAEA,SAAA;AACA,WAAA,MAAA,MAAA;IACA;AAAA,IAEA,cAAAiB,GAAAC,GAAA;AACA,aAAA,WAAAD,CAAA,IAAAC,CAAA;AAAA,IACA;AAAA,IAEA,eAAAC,GAAA;AACA,WAAA,YAAAA,IAAA,KAAA,gBAAA,OAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,WAAA,MAAA,MAAA,QAAA,IACA,KAAA,MAAA,MAAA,SACA,KAAA,gBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"input.js","sources":["../../../components/input/input.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['d-input__root', { 'd-input--hidden': hidden }]\"\n    data-qa=\"dt-input\"\n  >\n    <label\n      class=\"d-input__label\"\n      :aria-details=\"$slots.description || description ? descriptionKey : undefined\"\n      data-qa=\"dt-input-label-wrapper\"\n    >\n      <!-- @slot Slot for label, defaults to label prop -->\n      <slot name=\"labelSlot\">\n        <div\n          v-if=\"labelVisible && label\"\n          ref=\"label\"\n          data-qa=\"dt-input-label\"\n          :class=\"[\n            'd-input__label-text',\n            'd-label',\n            labelSizeClasses[size],\n          ]\"\n        >\n          {{ label }}\n        </div>\n      </slot>\n      <div\n        v-if=\"$slots.description || description || shouldValidateLength\"\n        :id=\"descriptionKey\"\n        ref=\"description\"\n        :class=\"[\n          'd-input__description',\n          'd-description',\n          descriptionSizeClasses[size],\n        ]\"\n        data-qa=\"dt-input-description\"\n      >\n        <div\n          v-if=\"$slots.description || description\"\n        >\n          <!-- @slot Slot for description, defaults to description prop -->\n          <slot name=\"description\">{{ description }}</slot>\n        </div>\n        <div\n          v-if=\"shouldValidateLength\"\n          data-qa=\"dt-input-length-description\"\n          class=\"d-input__length-description\"\n        >\n          {{ validationProps.length.description }}\n        </div>\n      </div>\n      <div\n        :class=\"inputWrapperClasses()\"\n        :read-only=\"disabled\"\n      >\n        <span\n          class=\"d-input-icon d-input-icon--left\"\n          data-qa=\"dt-input-left-icon-wrapper\"\n          @focusout=\"onBlur\"\n        >\n          <!-- @slot Slot for left icon -->\n          <slot\n            name=\"leftIcon\"\n            :icon-size=\"iconSize\"\n          />\n        </span>\n        <textarea\n          v-if=\"isTextarea\"\n          ref=\"input\"\n          :value=\"value\"\n          :name=\"name\"\n          :disabled=\"disabled\"\n          :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n          :class=\"inputClasses()\"\n          :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n          :data-qa=\"$attrs['data-qa'] ?? 'dt-input-input'\"\n          v-bind=\"$attrs\"\n          v-on=\"inputListeners\"\n        />\n        <input\n          v-else\n          ref=\"input\"\n          :value=\"value\"\n          :name=\"name\"\n          :type=\"type\"\n          :disabled=\"disabled\"\n          :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n          :class=\"inputClasses()\"\n          :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n          :data-qa=\"$attrs['data-qa'] ?? 'dt-input-input'\"\n          v-bind=\"$attrs\"\n          v-on=\"inputListeners\"\n        >\n        <span\n          class=\"d-input-icon d-input-icon--right\"\n          data-qa=\"dt-input-right-icon-wrapper\"\n          @focusout=\"onBlur\"\n        >\n          <!-- @slot Slot for right icon -->\n          <slot\n            name=\"rightIcon\"\n            :icon-size=\"iconSize\"\n            :clear=\"clearInput\"\n          />\n        </span>\n      </div>\n    </label>\n    <dt-validation-messages\n      :validation-messages=\"validationMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      v-bind=\"messagesChildProps\"\n      data-qa=\"dt-input-messages\"\n    />\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DESCRIPTION_SIZE_TYPES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport {\n  INPUT_TYPES,\n  INPUT_SIZES,\n  INPUT_SIZE_CLASSES,\n  INPUT_ICON_SIZES,\n  INPUT_STATE_CLASSES,\n  DESCRIPTION_SIZE_CLASSES,\n  LABEL_SIZE_CLASSES,\n} from './input_constants';\nimport {\n  getUniqueString,\n  getValidationState,\n} from '@/common/utils';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { MessagesMixin } from '@/common/mixins/input';\n\n/**\n * An input field is an input control that allows users to enter alphanumeric information.\n * It can have a range of options and supports single line and multi-line lengths,\n * as well as varying formats, including numbers, masked passwords, etc.\n * @property {Boolean} placeholder attribute\n * @see https://dialtone.dialpad.com/components/input.html\n */\nexport default {\n  name: 'DtInput',\n\n  components: { DtValidationMessages },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Name property of the input element\n     */\n    name: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Type of the input.\n     * When `textarea` a `<textarea>` element will be rendered instead of an `<input>` element.\n     * @values text, password, email, number, textarea, date, time, file, tel, search\n     * @default 'text'\n     */\n    type: {\n      type: String,\n      default: INPUT_TYPES.TEXT,\n      validator: (t) => Object.values(INPUT_TYPES).includes(t),\n    },\n\n    /**\n     * Value of the input\n     */\n    value: {\n      type: [String, Number],\n      default: '',\n    },\n\n    /**\n     * Disables the input\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Label for the input\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (t) => Object.values(INPUT_SIZES).includes(t),\n    },\n\n    /**\n     * Additional class name for the input element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    inputClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input wrapper element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    inputWrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * The current character length that the user has entered into the input.\n     * This will only need to be used if you are using `validate.length` and\n     * the string contains abnormal characters.\n     * For example, an emoji could take up many characters in the input, but should only count as 1 character.\n     * If no number is provided, a built-in length calculation will be used for the length validation.\n     */\n    currentLength: {\n      type: Number,\n      default: null,\n    },\n\n    /**\n     * Whether the input will continue to display a warning validation message even if the input has lost focus.\n     */\n    retainWarning: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Validation for the input. Supports maximum length validation with the structure:\n     * `{ \"length\": {\"description\": string, \"max\": number, \"warn\": number, \"message\": string,\n     * \"limitMaxLength\": boolean }}`\n     */\n    validate: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * hidden allows to use input without the element visually present in DOM\n     */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String}\n     */\n    'input',\n\n    /**\n     * Native input blur event\n     *\n     * @event blur\n     * @type {FocusEvent}\n     */\n    'blur',\n\n    /**\n     * Input clear event\n     *\n     * @event clear\n     */\n    'clear',\n\n    /**\n     * Native input focus event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n\n    /**\n     * Length of the input when currentLength prop is not passed\n     *\n     * @event update:length\n     * @type {Number}\n     */\n    'update:length',\n\n    /**\n     * Result of the input validation\n     *\n     * @event update:invalid\n     * @type {Boolean}\n     */\n    'update:invalid',\n  ],\n\n  data () {\n    return {\n      isInputFocused: false,\n      isInvalid: false,\n      defaultLength: 0,\n    };\n  },\n\n  computed: {\n\n    isTextarea () {\n      return this.type === INPUT_TYPES.TEXTAREA;\n    },\n\n    isDefaultSize () {\n      return this.size === INPUT_SIZES.DEFAULT;\n    },\n\n    iconSize () {\n      return INPUT_ICON_SIZES[this.size];\n    },\n\n    isValidSize () {\n      return Object.values(INPUT_SIZES).includes(this.size);\n    },\n\n    isValidDescriptionSize () {\n      return Object.values(DESCRIPTION_SIZE_TYPES).includes(this.size);\n    },\n\n    inputComponent () {\n      if (this.isTextarea) {\n        return 'textarea';\n      }\n\n      return 'input';\n    },\n\n    inputListeners () {\n      return {\n        /* TODO\n            Check if any usages of this component leverage $listeners and either remove if unused or scope the removal\n            and migration prior to upgrading to Vue 3.x\n        */\n        ...this.$listeners,\n        input: event => this.$emit('input', event.target.value),\n        focus: event => {\n          this.isInputFocused = true;\n          this.$emit('focus', event);\n        },\n\n        blur: event => {\n          this.isInputFocused = false;\n          this.onBlur(event);\n        },\n      };\n    },\n\n    descriptionKey () {\n      return `input-description-${getUniqueString()}`;\n    },\n\n    inputState () {\n      return getValidationState(this.validationMessages);\n    },\n\n    defaultLengthCalculation () {\n      return this.calculateLength(this.value);\n    },\n\n    validationProps () {\n      return {\n        length: {\n          description: this?.validate?.length?.description,\n          max: this?.validate?.length?.max,\n          warn: this?.validate?.length?.warn,\n          message: this?.validate?.length?.message,\n          limitMaxLength: this?.validate?.length?.limitMaxLength ? this.validate.length.limitMaxLength : false,\n        },\n      };\n    },\n\n    validationMessages () {\n      // Add length validation message if exists\n      if (this.showLengthLimitValidation) {\n        return this.formattedMessages.concat([this.inputLengthErrorMessage()]);\n      }\n\n      return this.formattedMessages;\n    },\n\n    showInputState () {\n      return this.showMessages && this.inputState;\n    },\n\n    inputLength () {\n      return this.currentLength ? this.currentLength : this.defaultLengthCalculation;\n    },\n\n    inputLengthState () {\n      if (this.inputLength < this.validationProps.length.warn) {\n        return null;\n      } else if (this.inputLength <= this.validationProps.length.max) {\n        return this.validationProps.length.warn ? VALIDATION_MESSAGE_TYPES.WARNING : null;\n      } else {\n        return VALIDATION_MESSAGE_TYPES.ERROR;\n      }\n    },\n\n    shouldValidateLength () {\n      // eslint-disable-next-line max-lines\n      return !!(\n        this.validationProps.length.description &&\n        this.validationProps.length.max\n      );\n    },\n\n    shouldLimitMaxLength () {\n      return this.shouldValidateLength && this.validationProps.length.limitMaxLength;\n    },\n\n    // eslint-disable-next-line complexity\n    showLengthLimitValidation () {\n      return (\n        this.shouldValidateLength &&\n        this.inputLengthState !== null &&\n        this.validationProps.length.message &&\n        (this.retainWarning || this.isInputFocused || this.isInvalid)\n      );\n    },\n\n    sizeModifierClass () {\n      if (this.isDefaultSize || !this.isValidSize) {\n        return '';\n      }\n\n      return INPUT_SIZE_CLASSES[this.inputComponent][this.size];\n    },\n\n    stateClass () {\n      return [INPUT_STATE_CLASSES[this.inputState]];\n    },\n  },\n\n  watch: {\n    isInvalid (val) {\n      this.$emit('update:invalid', val);\n    },\n\n    value: {\n      immediate: true,\n      handler (newValue) {\n        if (this.shouldValidateLength) {\n          this.validateLength(this.inputLength);\n        }\n\n        if (this.currentLength == null) {\n          this.$emit('update:length', this.calculateLength(newValue));\n        }\n      },\n    },\n  },\n\n  beforeMount () {\n    this.descriptionSizeClasses = DESCRIPTION_SIZE_CLASSES;\n    this.labelSizeClasses = LABEL_SIZE_CLASSES;\n  },\n\n  methods: {\n    inputClasses () {\n      return [\n        'd-input__input',\n        this.inputComponent === 'input' ? 'd-input' : 'd-textarea',\n        {\n          [this.stateClass]: this.showInputState,\n          'd-input-icon--left': this.$slots.leftIcon,\n          'd-input-icon--right': this.$slots.rightIcon,\n        },\n        this.sizeModifierClass,\n        this.inputClass,\n      ];\n    },\n\n    inputWrapperClasses () {\n      if (this.hidden) {\n        return [];\n      }\n      return [\n        'd-input__wrapper',\n        { [this.stateClass]: this.showInputState },\n        this.inputWrapperClass,\n      ];\n    },\n\n    calculateLength (value) {\n      if (typeof value !== 'string') {\n        return 0;\n      }\n\n      return [...value].length;\n    },\n\n    inputLengthErrorMessage () {\n      return {\n        message: this.validationProps.length.message,\n        type: this.inputLengthState,\n      };\n    },\n\n    onBlur (e) {\n      // Do not emit a blur event if the target element is a child of this component\n      if (!this.$refs.container?.contains(e.relatedTarget)) {\n        this.$emit('blur', e);\n      }\n    },\n\n    emitClearEvents () {\n      this.$emit('input', '');\n      this.$emit('clear');\n      this.$emit('update:modelValue', '');\n    },\n\n    blur () {\n      this.$refs.input.blur();\n    },\n\n    focus () {\n      this.$refs.input.focus();\n    },\n\n    select () {\n      this.$refs.input.select();\n    },\n\n    getMessageKey (type, index) {\n      return `message-${type}-${index}`;\n    },\n\n    validateLength (length) {\n      this.isInvalid = (length > this.validationProps.length.max);\n    },\n\n    clearInput () {\n      this.$refs.input.value = '';\n      this.$refs.input.focus();\n      this.emitClearEvents();\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","MessagesMixin","INPUT_TYPES","t","INPUT_SIZES","INPUT_ICON_SIZES","DESCRIPTION_SIZE_TYPES","event","getUniqueString","getValidationState","_b","_a","_d","_c","_f","_e","_h","_g","_j","_i","VALIDATION_MESSAGE_TYPES","INPUT_SIZE_CLASSES","INPUT_STATE_CLASSES","val","newValue","DESCRIPTION_SIZE_CLASSES","LABEL_SIZE_CLASSES","value","type","index","length"],"mappings":"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"}

package/dist/lib/input-group/input-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.cjs","sources":["../../../components/input_group/input_group.vue"],"sourcesContent":["<template>\n  <fieldset\n    class=\"d-input-group__fieldset\"\n    :data-qa=\"dataQaGroup\"\n  >\n    <legend\n      v-if=\"$slots.legend || legend\"\n      :class=\"['d-label', legendClass]\"\n      v-bind=\"legendChildProps\"\n      :data-qa=\"dataQaGroupLegend\"\n    >\n      <!-- @slot slot for Input Group Legend -->\n      <slot name=\"legend\">\n        {{ legend }}\n      </slot>\n    </legend>\n    <!-- @slot slot for Input Group Components -->\n    <slot />\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      :data-qa=\"dataQaGroupMessages\"\n      v-bind=\"messagesChildProps\"\n    />\n  </fieldset>\n</template>\n\n<script>\nimport { InputGroupMixin } from '@/common/mixins/input_group';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * Input Groups are convenience components for a grouping of related inputs.\n * While each input within the group could be independent, the `v-model` on the group\n * provides a convenient interface for determining the current state of the group.\n * @see https://dialtone.dialpad.com/components/input_group.html\n */\nexport default {\n  name: 'DtInputGroup',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputGroupMixin],\n\n  props: {\n    /**\n     * A data qa tag for the input group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'input-group',\n    },\n\n    /**\n     * A data qa tag for the input group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'input-group-legend',\n    },\n\n    /**\n     * A data qa tag for the input group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'input-group-messages',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     */\n    'input',\n  ],\n\n  data () {\n    return {\n      internalValue: this.value,\n      // wrap values in object to make reactive\n      provideObj: {\n        value: this.value,\n      },\n    };\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalValue = newValue;\n    },\n\n    /*\n     * watching value to support 2 way binding for slotted inputs.\n     * need this to pass value to slotted inputs if modified outside\n     * input group.\n     */\n    internalValue (newInternalValue) {\n      this.provideObj.value = newInternalValue;\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `input-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","InputGroupMixin","newValue","newInternalValue","type","index"],"mappings":"uRAsCAA,EAAA,CACA,KAAA,eAEA,WAAA,CAAAC,qBAAAA,EAAAA,OAAA,EAEA,OAAA,CAAAC,EAAAA,eAAA,EAEA,MAAA,CAIA,YAAA,CACA,KAAA,OACA,QAAA,aACA,EAKA,kBAAA,CACA,KAAA,OACA,QAAA,oBACA,EAKA,oBAAA,CACA,KAAA,OACA,QAAA,sBACA,CACA,EAEA,MAAA,CAMA,OACA,EAEA,MAAA,CACA,MAAA,CACA,cAAA,KAAA,MAEA,WAAA,CACA,MAAA,KAAA,KACA,CACA,CACA,EAEA,MAAA,CACA,MAAAC,EAAA,CACA,KAAA,cAAAA,CACA,EAOA,cAAAC,EAAA,CACA,KAAA,WAAA,MAAAA,CACA,CACA,EAEA,QAAA,CACA,cAAAC,EAAAC,EAAA,CACA,MAAA,uBAAAD,CAAA,IAAAC,CAAA,IAAA,KAAA,EAAA,EACA,CACA,CACA"}
+{"version":3,"file":"input-group.cjs","sources":["../../../components/input_group/input_group.vue"],"sourcesContent":["<template>\n  <fieldset\n    class=\"d-input-group__fieldset\"\n    :data-qa=\"dataQaGroup\"\n  >\n    <legend\n      v-if=\"$slots.legend || legend\"\n      :class=\"['d-label', legendClass]\"\n      v-bind=\"legendChildProps\"\n      :data-qa=\"dataQaGroupLegend\"\n    >\n      <!-- @slot slot for Input Group Legend -->\n      <slot name=\"legend\">\n        {{ legend }}\n      </slot>\n    </legend>\n    <!-- @slot slot for Input Group Components -->\n    <slot />\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      :data-qa=\"dataQaGroupMessages\"\n      v-bind=\"messagesChildProps\"\n    />\n  </fieldset>\n</template>\n\n<script>\nimport { InputGroupMixin } from '@/common/mixins/input_group';\nimport { DtValidationMessages } from '../validation_messages';\n\n/**\n * Input Groups are convenience components for a grouping of related inputs.\n * While each input within the group could be independent, the `v-model` on the group\n * provides a convenient interface for determining the current state of the group.\n * @see https://dialtone.dialpad.com/components/input_group.html\n */\nexport default {\n  name: 'DtInputGroup',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputGroupMixin],\n\n  props: {\n    /**\n     * A data qa tag for the input group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'input-group',\n    },\n\n    /**\n     * A data qa tag for the input group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'input-group-legend',\n    },\n\n    /**\n     * A data qa tag for the input group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'input-group-messages',\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     */\n    'input',\n  ],\n\n  data () {\n    return {\n      internalValue: this.value,\n      // wrap values in object to make reactive\n      provideObj: {\n        value: this.value,\n      },\n    };\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalValue = newValue;\n    },\n\n    /*\n     * watching value to support 2 way binding for slotted inputs.\n     * need this to pass value to slotted inputs if modified outside\n     * input group.\n     */\n    internalValue (newInternalValue) {\n      this.provideObj.value = newInternalValue;\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `input-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","InputGroupMixin","newValue","newInternalValue","type","index"],"mappings":"uRAsCAA,EAAA,CACA,KAAA,eAEA,WAAA,CAAA,qBAAAC,EAAAA,OAAA,EAEA,OAAA,CAAAC,EAAAA,eAAA,EAEA,MAAA,CAIA,YAAA,CACA,KAAA,OACA,QAAA,aACA,EAKA,kBAAA,CACA,KAAA,OACA,QAAA,oBACA,EAKA,oBAAA,CACA,KAAA,OACA,QAAA,sBACA,CACA,EAEA,MAAA,CAMA,OACA,EAEA,MAAA,CACA,MAAA,CACA,cAAA,KAAA,MAEA,WAAA,CACA,MAAA,KAAA,KACA,CACA,CACA,EAEA,MAAA,CACA,MAAAC,EAAA,CACA,KAAA,cAAAA,CACA,EAOA,cAAAC,EAAA,CACA,KAAA,WAAA,MAAAA,CACA,CACA,EAEA,QAAA,CACA,cAAAC,EAAAC,EAAA,CACA,MAAA,uBAAAD,CAAA,IAAAC,CAAA,IAAA,KAAA,EAAA,EACA,CACA,CACA"}

package/dist/lib/ivr-node/ivr-node-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ivr-node-constants.cjs","sources":["../../../recipes/cards/ivr_node/ivr_node_constants.js"],"sourcesContent":["export const IVR_NODE_PROMPT_MENU = 'promptmenu';\nexport const IVR_NODE_PROMPT_COLLECT = 'promptcollect';\nexport const IVR_NODE_PROMPT_PLAY = 'promptplay';\nexport const IVR_NODE_EXPERT = 'gotoexpert';\nexport const IVR_NODE_BRANCH = 'branch';\nexport const IVR_NODE_GO_TO = 'goto';\nexport const IVR_NODE_ASSIGN = 'assign';\nexport const IVR_NODE_CUSTOMER_DATA = 'customerdata';\nexport const IVR_NODE_TRANSFER = 'transfer';\nexport const IVR_NODE_HANGUP = 'hangup';\n\nexport const IVR_NODE_ICON_TYPES = {\n  [IVR_NODE_PROMPT_MENU]: 'keypad',\n  [IVR_NODE_PROMPT_COLLECT]: 'dialer',\n  [IVR_NODE_PROMPT_PLAY]: 'volume-2',\n  [IVR_NODE_EXPERT]: 'expert-node',\n  [IVR_NODE_BRANCH]: 'branch',\n  [IVR_NODE_GO_TO]: 'call-merge',\n  [IVR_NODE_ASSIGN]: 'chevrons-right',\n  [IVR_NODE_CUSTOMER_DATA]: 'list-bullet',\n  [IVR_NODE_TRANSFER]: 'transfer',\n  [IVR_NODE_HANGUP]: 'phone-hang-up',\n};\n\nexport const IVR_NODE_LABELS = {\n  [IVR_NODE_PROMPT_MENU]: 'Menu',\n  [IVR_NODE_PROMPT_COLLECT]: 'Collect',\n  [IVR_NODE_PROMPT_PLAY]: 'Play',\n  [IVR_NODE_EXPERT]: 'Expert',\n  [IVR_NODE_BRANCH]: 'Branch',\n  [IVR_NODE_GO_TO]: 'Go-to',\n  [IVR_NODE_ASSIGN]: 'Assign',\n  [IVR_NODE_CUSTOMER_DATA]: 'Customer Data',\n  [IVR_NODE_TRANSFER]: 'Transfer',\n  [IVR_NODE_HANGUP]: 'Hangup',\n};\n\nconst IVR_NODE_CLASSES = {\n  PROMPT: {\n    normal: 'd-recipe-ivr-node-prompt',\n    selected: 'd-recipe-ivr-node-prompt--selected',\n  },\n  LOGIC: {\n    normal: 'd-recipe-ivr-node-logic',\n    selected: 'd-recipe-ivr-node-logic--selected',\n  },\n  TERMINAL: {\n    normal: 'd-recipe-ivr-node-terminal',\n    selected: 'd-recipe-ivr-node-terminal--selected',\n  },\n};\n\nexport const IVR_NODE_CLASS_MAPPING = {\n  [IVR_NODE_PROMPT_MENU]: IVR_NODE_CLASSES.PROMPT,\n  [IVR_NODE_PROMPT_COLLECT]: IVR_NODE_CLASSES.PROMPT,\n  [IVR_NODE_PROMPT_PLAY]: IVR_NODE_CLASSES.PROMPT,\n  [IVR_NODE_EXPERT]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_BRANCH]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_GO_TO]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_ASSIGN]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_CUSTOMER_DATA]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_TRANSFER]: IVR_NODE_CLASSES.TERMINAL,\n  [IVR_NODE_HANGUP]: IVR_NODE_CLASSES.TERMINAL,\n};\n"],"names":["IVR_NODE_PROMPT_MENU","IVR_NODE_PROMPT_COLLECT","IVR_NODE_PROMPT_PLAY","IVR_NODE_EXPERT","IVR_NODE_BRANCH","IVR_NODE_GO_TO","IVR_NODE_ASSIGN","IVR_NODE_CUSTOMER_DATA","IVR_NODE_TRANSFER","IVR_NODE_HANGUP","IVR_NODE_ICON_TYPES","IVR_NODE_LABELS","IVR_NODE_CLASSES","IVR_NODE_CLASS_MAPPING"],"mappings":"gFAAY,MAACA,EAAuB,aACvBC,EAA0B,gBAC1BC,EAAuB,aACvBC,EAAkB,aAClBC,EAAkB,SAClBC,EAAiB,OACjBC,EAAkB,SAClBC,EAAyB,eACzBC,EAAoB,WACpBC,EAAkB,SAElBC,EAAsB,CACjC,CAACV,CAAoB,EAAG,SACxB,CAACC,CAAuB,EAAG,SAC3B,CAACC,CAAoB,EAAG,WACxB,CAACC,CAAe,EAAG,cACnB,CAACC,CAAe,EAAG,SACnB,CAACC,CAAc,EAAG,aAClB,CAACC,CAAe,EAAG,iBACnB,CAACC,CAAsB,EAAG,cAC1B,CAACC,CAAiB,EAAG,WACrB,CAACC,CAAe,EAAG,eACrB,EAEaE,EAAkB,CAC7B,CAACX,CAAoB,EAAG,OACxB,CAACC,CAAuB,EAAG,UAC3B,CAACC,CAAoB,EAAG,OACxB,CAACC,CAAe,EAAG,SACnB,CAACC,CAAe,EAAG,SACnB,CAACC,CAAc,EAAG,QAClB,CAACC,CAAe,EAAG,SACnB,CAACC,CAAsB,EAAG,gBAC1B,CAACC,CAAiB,EAAG,WACrB,CAACC,CAAe,EAAG,QACrB,EAEMG,EAAmB,CACvB,OAAQ,CACN,OAAQ,2BACR,SAAU,oCACX,EACD,MAAO,CACL,OAAQ,0BACR,SAAU,mCACX,EACD,SAAU,CACR,OAAQ,6BACR,SAAU,sCACX,CACH,EAEaC,EAAyB,CACpC,CAACb,CAAoB,EAAGY,EAAiB,OACzC,CAACX,CAAuB,EAAGW,EAAiB,OAC5C,CAACV,CAAoB,EAAGU,EAAiB,OACzC,CAACT,CAAe,EAAGS,EAAiB,MACpC,CAACR,CAAe,EAAGQ,EAAiB,MACpC,CAACP,CAAc,EAAGO,EAAiB,MACnC,CAACN,CAAe,EAAGM,EAAiB,MACpC,CAACL,CAAsB,EAAGK,EAAiB,MAC3C,CAACJ,CAAiB,EAAGI,EAAiB,SACtC,CAACH,CAAe,EAAGG,EAAiB,QACtC"}
+{"version":3,"file":"ivr-node-constants.cjs","sources":["../../../recipes/cards/ivr_node/ivr_node_constants.js"],"sourcesContent":["export const IVR_NODE_PROMPT_MENU = 'promptmenu';\nexport const IVR_NODE_PROMPT_COLLECT = 'promptcollect';\nexport const IVR_NODE_PROMPT_PLAY = 'promptplay';\nexport const IVR_NODE_EXPERT = 'gotoexpert';\nexport const IVR_NODE_BRANCH = 'branch';\nexport const IVR_NODE_GO_TO = 'goto';\nexport const IVR_NODE_ASSIGN = 'assign';\nexport const IVR_NODE_CUSTOMER_DATA = 'customerdata';\nexport const IVR_NODE_TRANSFER = 'transfer';\nexport const IVR_NODE_HANGUP = 'hangup';\n\nexport const IVR_NODE_ICON_TYPES = {\n  [IVR_NODE_PROMPT_MENU]: 'keypad',\n  [IVR_NODE_PROMPT_COLLECT]: 'dialer',\n  [IVR_NODE_PROMPT_PLAY]: 'volume-2',\n  [IVR_NODE_EXPERT]: 'expert-node',\n  [IVR_NODE_BRANCH]: 'branch',\n  [IVR_NODE_GO_TO]: 'call-merge',\n  [IVR_NODE_ASSIGN]: 'chevrons-right',\n  [IVR_NODE_CUSTOMER_DATA]: 'list-bullet',\n  [IVR_NODE_TRANSFER]: 'transfer',\n  [IVR_NODE_HANGUP]: 'phone-hang-up',\n};\n\nexport const IVR_NODE_LABELS = {\n  [IVR_NODE_PROMPT_MENU]: 'Menu',\n  [IVR_NODE_PROMPT_COLLECT]: 'Collect',\n  [IVR_NODE_PROMPT_PLAY]: 'Play',\n  [IVR_NODE_EXPERT]: 'Expert',\n  [IVR_NODE_BRANCH]: 'Branch',\n  [IVR_NODE_GO_TO]: 'Go-to',\n  [IVR_NODE_ASSIGN]: 'Assign',\n  [IVR_NODE_CUSTOMER_DATA]: 'Customer Data',\n  [IVR_NODE_TRANSFER]: 'Transfer',\n  [IVR_NODE_HANGUP]: 'Hangup',\n};\n\nconst IVR_NODE_CLASSES = {\n  PROMPT: {\n    normal: 'd-recipe-ivr-node-prompt',\n    selected: 'd-recipe-ivr-node-prompt--selected',\n  },\n  LOGIC: {\n    normal: 'd-recipe-ivr-node-logic',\n    selected: 'd-recipe-ivr-node-logic--selected',\n  },\n  TERMINAL: {\n    normal: 'd-recipe-ivr-node-terminal',\n    selected: 'd-recipe-ivr-node-terminal--selected',\n  },\n};\n\nexport const IVR_NODE_CLASS_MAPPING = {\n  [IVR_NODE_PROMPT_MENU]: IVR_NODE_CLASSES.PROMPT,\n  [IVR_NODE_PROMPT_COLLECT]: IVR_NODE_CLASSES.PROMPT,\n  [IVR_NODE_PROMPT_PLAY]: IVR_NODE_CLASSES.PROMPT,\n  [IVR_NODE_EXPERT]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_BRANCH]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_GO_TO]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_ASSIGN]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_CUSTOMER_DATA]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_TRANSFER]: IVR_NODE_CLASSES.TERMINAL,\n  [IVR_NODE_HANGUP]: IVR_NODE_CLASSES.TERMINAL,\n};\n"],"names":["IVR_NODE_PROMPT_MENU","IVR_NODE_PROMPT_COLLECT","IVR_NODE_PROMPT_PLAY","IVR_NODE_EXPERT","IVR_NODE_BRANCH","IVR_NODE_GO_TO","IVR_NODE_ASSIGN","IVR_NODE_CUSTOMER_DATA","IVR_NODE_TRANSFER","IVR_NODE_HANGUP","IVR_NODE_ICON_TYPES","IVR_NODE_LABELS","IVR_NODE_CLASSES","IVR_NODE_CLASS_MAPPING"],"mappings":"gFAAY,MAACA,EAAuB,aACvBC,EAA0B,gBAC1BC,EAAuB,aACvBC,EAAkB,aAClBC,EAAkB,SAClBC,EAAiB,OACjBC,EAAkB,SAClBC,EAAyB,eACzBC,EAAoB,WACpBC,EAAkB,SAElBC,EAAsB,CACjC,CAACV,CAAoB,EAAG,SACxB,CAACC,CAAuB,EAAG,SAC3B,CAACC,CAAoB,EAAG,WACxB,CAACC,CAAe,EAAG,cACnB,CAACC,CAAe,EAAG,SACnB,CAACC,CAAc,EAAG,aAClB,CAACC,CAAe,EAAG,iBACnB,CAACC,CAAsB,EAAG,cAC1B,CAACC,CAAiB,EAAG,WACrB,CAACC,CAAe,EAAG,eACrB,EAEaE,EAAkB,CAC7B,CAACX,CAAoB,EAAG,OACxB,CAACC,CAAuB,EAAG,UAC3B,CAACC,CAAoB,EAAG,OACxB,CAACC,CAAe,EAAG,SACnB,CAACC,CAAe,EAAG,SACnB,CAACC,CAAc,EAAG,QAClB,CAACC,CAAe,EAAG,SACnB,CAACC,CAAsB,EAAG,gBAC1B,CAACC,CAAiB,EAAG,WACrB,CAACC,CAAe,EAAG,QACrB,EAEMG,EAAmB,CACvB,OAAQ,CACN,OAAQ,2BACR,SAAU,oCACd,EACE,MAAO,CACL,OAAQ,0BACR,SAAU,mCACd,EACE,SAAU,CACR,OAAQ,6BACR,SAAU,sCACd,CACA,EAEaC,EAAyB,CACpC,CAACb,CAAoB,EAAGY,EAAiB,OACzC,CAACX,CAAuB,EAAGW,EAAiB,OAC5C,CAACV,CAAoB,EAAGU,EAAiB,OACzC,CAACT,CAAe,EAAGS,EAAiB,MACpC,CAACR,CAAe,EAAGQ,EAAiB,MACpC,CAACP,CAAc,EAAGO,EAAiB,MACnC,CAACN,CAAe,EAAGM,EAAiB,MACpC,CAACL,CAAsB,EAAGK,EAAiB,MAC3C,CAACJ,CAAiB,EAAGI,EAAiB,SACtC,CAACH,CAAe,EAAGG,EAAiB,QACtC"}

package/dist/lib/ivr-node/ivr-node-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"ivr-node-constants.js","sources":["../../../recipes/cards/ivr_node/ivr_node_constants.js"],"sourcesContent":["export const IVR_NODE_PROMPT_MENU = 'promptmenu';\nexport const IVR_NODE_PROMPT_COLLECT = 'promptcollect';\nexport const IVR_NODE_PROMPT_PLAY = 'promptplay';\nexport const IVR_NODE_EXPERT = 'gotoexpert';\nexport const IVR_NODE_BRANCH = 'branch';\nexport const IVR_NODE_GO_TO = 'goto';\nexport const IVR_NODE_ASSIGN = 'assign';\nexport const IVR_NODE_CUSTOMER_DATA = 'customerdata';\nexport const IVR_NODE_TRANSFER = 'transfer';\nexport const IVR_NODE_HANGUP = 'hangup';\n\nexport const IVR_NODE_ICON_TYPES = {\n  [IVR_NODE_PROMPT_MENU]: 'keypad',\n  [IVR_NODE_PROMPT_COLLECT]: 'dialer',\n  [IVR_NODE_PROMPT_PLAY]: 'volume-2',\n  [IVR_NODE_EXPERT]: 'expert-node',\n  [IVR_NODE_BRANCH]: 'branch',\n  [IVR_NODE_GO_TO]: 'call-merge',\n  [IVR_NODE_ASSIGN]: 'chevrons-right',\n  [IVR_NODE_CUSTOMER_DATA]: 'list-bullet',\n  [IVR_NODE_TRANSFER]: 'transfer',\n  [IVR_NODE_HANGUP]: 'phone-hang-up',\n};\n\nexport const IVR_NODE_LABELS = {\n  [IVR_NODE_PROMPT_MENU]: 'Menu',\n  [IVR_NODE_PROMPT_COLLECT]: 'Collect',\n  [IVR_NODE_PROMPT_PLAY]: 'Play',\n  [IVR_NODE_EXPERT]: 'Expert',\n  [IVR_NODE_BRANCH]: 'Branch',\n  [IVR_NODE_GO_TO]: 'Go-to',\n  [IVR_NODE_ASSIGN]: 'Assign',\n  [IVR_NODE_CUSTOMER_DATA]: 'Customer Data',\n  [IVR_NODE_TRANSFER]: 'Transfer',\n  [IVR_NODE_HANGUP]: 'Hangup',\n};\n\nconst IVR_NODE_CLASSES = {\n  PROMPT: {\n    normal: 'd-recipe-ivr-node-prompt',\n    selected: 'd-recipe-ivr-node-prompt--selected',\n  },\n  LOGIC: {\n    normal: 'd-recipe-ivr-node-logic',\n    selected: 'd-recipe-ivr-node-logic--selected',\n  },\n  TERMINAL: {\n    normal: 'd-recipe-ivr-node-terminal',\n    selected: 'd-recipe-ivr-node-terminal--selected',\n  },\n};\n\nexport const IVR_NODE_CLASS_MAPPING = {\n  [IVR_NODE_PROMPT_MENU]: IVR_NODE_CLASSES.PROMPT,\n  [IVR_NODE_PROMPT_COLLECT]: IVR_NODE_CLASSES.PROMPT,\n  [IVR_NODE_PROMPT_PLAY]: IVR_NODE_CLASSES.PROMPT,\n  [IVR_NODE_EXPERT]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_BRANCH]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_GO_TO]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_ASSIGN]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_CUSTOMER_DATA]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_TRANSFER]: IVR_NODE_CLASSES.TERMINAL,\n  [IVR_NODE_HANGUP]: IVR_NODE_CLASSES.TERMINAL,\n};\n"],"names":["IVR_NODE_PROMPT_MENU","IVR_NODE_PROMPT_COLLECT","IVR_NODE_PROMPT_PLAY","IVR_NODE_EXPERT","IVR_NODE_BRANCH","IVR_NODE_GO_TO","IVR_NODE_ASSIGN","IVR_NODE_CUSTOMER_DATA","IVR_NODE_TRANSFER","IVR_NODE_HANGUP","IVR_NODE_ICON_TYPES","IVR_NODE_LABELS","IVR_NODE_CLASSES","IVR_NODE_CLASS_MAPPING"],"mappings":"AAAY,MAACA,IAAuB,cACvBC,IAA0B,iBAC1BC,IAAuB,cACvBC,IAAkB,cAClBC,IAAkB,UAClBC,IAAiB,QACjBC,IAAkB,UAClBC,IAAyB,gBACzBC,IAAoB,YACpBC,IAAkB,UAElBC,IAAsB;AAAA,EACjC,CAACV,CAAoB,GAAG;AAAA,EACxB,CAACC,CAAuB,GAAG;AAAA,EAC3B,CAACC,CAAoB,GAAG;AAAA,EACxB,CAACC,CAAe,GAAG;AAAA,EACnB,CAACC,CAAe,GAAG;AAAA,EACnB,CAACC,CAAc,GAAG;AAAA,EAClB,CAACC,CAAe,GAAG;AAAA,EACnB,CAACC,CAAsB,GAAG;AAAA,EAC1B,CAACC,CAAiB,GAAG;AAAA,EACrB,CAACC,CAAe,GAAG;AACrB,GAEaE,IAAkB;AAAA,EAC7B,CAACX,CAAoB,GAAG;AAAA,EACxB,CAACC,CAAuB,GAAG;AAAA,EAC3B,CAACC,CAAoB,GAAG;AAAA,EACxB,CAACC,CAAe,GAAG;AAAA,EACnB,CAACC,CAAe,GAAG;AAAA,EACnB,CAACC,CAAc,GAAG;AAAA,EAClB,CAACC,CAAe,GAAG;AAAA,EACnB,CAACC,CAAsB,GAAG;AAAA,EAC1B,CAACC,CAAiB,GAAG;AAAA,EACrB,CAACC,CAAe,GAAG;AACrB,GAEMG,IAAmB;AAAA,EACvB,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,EACX;AAAA,EACD,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,UAAU;AAAA,EACX;AAAA,EACD,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EACX;AACH,GAEaC,IAAyB;AAAA,EACpC,CAACb,CAAoB,GAAGY,EAAiB;AAAA,EACzC,CAACX,CAAuB,GAAGW,EAAiB;AAAA,EAC5C,CAACV,CAAoB,GAAGU,EAAiB;AAAA,EACzC,CAACT,CAAe,GAAGS,EAAiB;AAAA,EACpC,CAACR,CAAe,GAAGQ,EAAiB;AAAA,EACpC,CAACP,CAAc,GAAGO,EAAiB;AAAA,EACnC,CAACN,CAAe,GAAGM,EAAiB;AAAA,EACpC,CAACL,CAAsB,GAAGK,EAAiB;AAAA,EAC3C,CAACJ,CAAiB,GAAGI,EAAiB;AAAA,EACtC,CAACH,CAAe,GAAGG,EAAiB;AACtC;"}
+{"version":3,"file":"ivr-node-constants.js","sources":["../../../recipes/cards/ivr_node/ivr_node_constants.js"],"sourcesContent":["export const IVR_NODE_PROMPT_MENU = 'promptmenu';\nexport const IVR_NODE_PROMPT_COLLECT = 'promptcollect';\nexport const IVR_NODE_PROMPT_PLAY = 'promptplay';\nexport const IVR_NODE_EXPERT = 'gotoexpert';\nexport const IVR_NODE_BRANCH = 'branch';\nexport const IVR_NODE_GO_TO = 'goto';\nexport const IVR_NODE_ASSIGN = 'assign';\nexport const IVR_NODE_CUSTOMER_DATA = 'customerdata';\nexport const IVR_NODE_TRANSFER = 'transfer';\nexport const IVR_NODE_HANGUP = 'hangup';\n\nexport const IVR_NODE_ICON_TYPES = {\n  [IVR_NODE_PROMPT_MENU]: 'keypad',\n  [IVR_NODE_PROMPT_COLLECT]: 'dialer',\n  [IVR_NODE_PROMPT_PLAY]: 'volume-2',\n  [IVR_NODE_EXPERT]: 'expert-node',\n  [IVR_NODE_BRANCH]: 'branch',\n  [IVR_NODE_GO_TO]: 'call-merge',\n  [IVR_NODE_ASSIGN]: 'chevrons-right',\n  [IVR_NODE_CUSTOMER_DATA]: 'list-bullet',\n  [IVR_NODE_TRANSFER]: 'transfer',\n  [IVR_NODE_HANGUP]: 'phone-hang-up',\n};\n\nexport const IVR_NODE_LABELS = {\n  [IVR_NODE_PROMPT_MENU]: 'Menu',\n  [IVR_NODE_PROMPT_COLLECT]: 'Collect',\n  [IVR_NODE_PROMPT_PLAY]: 'Play',\n  [IVR_NODE_EXPERT]: 'Expert',\n  [IVR_NODE_BRANCH]: 'Branch',\n  [IVR_NODE_GO_TO]: 'Go-to',\n  [IVR_NODE_ASSIGN]: 'Assign',\n  [IVR_NODE_CUSTOMER_DATA]: 'Customer Data',\n  [IVR_NODE_TRANSFER]: 'Transfer',\n  [IVR_NODE_HANGUP]: 'Hangup',\n};\n\nconst IVR_NODE_CLASSES = {\n  PROMPT: {\n    normal: 'd-recipe-ivr-node-prompt',\n    selected: 'd-recipe-ivr-node-prompt--selected',\n  },\n  LOGIC: {\n    normal: 'd-recipe-ivr-node-logic',\n    selected: 'd-recipe-ivr-node-logic--selected',\n  },\n  TERMINAL: {\n    normal: 'd-recipe-ivr-node-terminal',\n    selected: 'd-recipe-ivr-node-terminal--selected',\n  },\n};\n\nexport const IVR_NODE_CLASS_MAPPING = {\n  [IVR_NODE_PROMPT_MENU]: IVR_NODE_CLASSES.PROMPT,\n  [IVR_NODE_PROMPT_COLLECT]: IVR_NODE_CLASSES.PROMPT,\n  [IVR_NODE_PROMPT_PLAY]: IVR_NODE_CLASSES.PROMPT,\n  [IVR_NODE_EXPERT]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_BRANCH]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_GO_TO]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_ASSIGN]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_CUSTOMER_DATA]: IVR_NODE_CLASSES.LOGIC,\n  [IVR_NODE_TRANSFER]: IVR_NODE_CLASSES.TERMINAL,\n  [IVR_NODE_HANGUP]: IVR_NODE_CLASSES.TERMINAL,\n};\n"],"names":["IVR_NODE_PROMPT_MENU","IVR_NODE_PROMPT_COLLECT","IVR_NODE_PROMPT_PLAY","IVR_NODE_EXPERT","IVR_NODE_BRANCH","IVR_NODE_GO_TO","IVR_NODE_ASSIGN","IVR_NODE_CUSTOMER_DATA","IVR_NODE_TRANSFER","IVR_NODE_HANGUP","IVR_NODE_ICON_TYPES","IVR_NODE_LABELS","IVR_NODE_CLASSES","IVR_NODE_CLASS_MAPPING"],"mappings":"AAAY,MAACA,IAAuB,cACvBC,IAA0B,iBAC1BC,IAAuB,cACvBC,IAAkB,cAClBC,IAAkB,UAClBC,IAAiB,QACjBC,IAAkB,UAClBC,IAAyB,gBACzBC,IAAoB,YACpBC,IAAkB,UAElBC,IAAsB;AAAA,EACjC,CAACV,CAAoB,GAAG;AAAA,EACxB,CAACC,CAAuB,GAAG;AAAA,EAC3B,CAACC,CAAoB,GAAG;AAAA,EACxB,CAACC,CAAe,GAAG;AAAA,EACnB,CAACC,CAAe,GAAG;AAAA,EACnB,CAACC,CAAc,GAAG;AAAA,EAClB,CAACC,CAAe,GAAG;AAAA,EACnB,CAACC,CAAsB,GAAG;AAAA,EAC1B,CAACC,CAAiB,GAAG;AAAA,EACrB,CAACC,CAAe,GAAG;AACrB,GAEaE,IAAkB;AAAA,EAC7B,CAACX,CAAoB,GAAG;AAAA,EACxB,CAACC,CAAuB,GAAG;AAAA,EAC3B,CAACC,CAAoB,GAAG;AAAA,EACxB,CAACC,CAAe,GAAG;AAAA,EACnB,CAACC,CAAe,GAAG;AAAA,EACnB,CAACC,CAAc,GAAG;AAAA,EAClB,CAACC,CAAe,GAAG;AAAA,EACnB,CAACC,CAAsB,GAAG;AAAA,EAC1B,CAACC,CAAiB,GAAG;AAAA,EACrB,CAACC,CAAe,GAAG;AACrB,GAEMG,IAAmB;AAAA,EACvB,QAAQ;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,EACd;AAAA,EACE,OAAO;AAAA,IACL,QAAQ;AAAA,IACR,UAAU;AAAA,EACd;AAAA,EACE,UAAU;AAAA,IACR,QAAQ;AAAA,IACR,UAAU;AAAA,EACd;AACA,GAEaC,IAAyB;AAAA,EACpC,CAACb,CAAoB,GAAGY,EAAiB;AAAA,EACzC,CAACX,CAAuB,GAAGW,EAAiB;AAAA,EAC5C,CAACV,CAAoB,GAAGU,EAAiB;AAAA,EACzC,CAACT,CAAe,GAAGS,EAAiB;AAAA,EACpC,CAACR,CAAe,GAAGQ,EAAiB;AAAA,EACpC,CAACP,CAAc,GAAGO,EAAiB;AAAA,EACnC,CAACN,CAAe,GAAGM,EAAiB;AAAA,EACpC,CAACL,CAAsB,GAAGK,EAAiB;AAAA,EAC3C,CAACJ,CAAiB,GAAGI,EAAiB;AAAA,EACtC,CAACH,CAAe,GAAGG,EAAiB;AACtC;"}

package/dist/lib/ivr-node/ivr-node.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("@dialpad/dialtone-icons/vue2"),o=require("./ivr-node-constants.cjs"),i=require("../../localization/index.cjs"),a=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),d=require("../card/card.cjs"),s=require("../button/button.cjs"),l=require("../dropdown/dropdown.cjs"),_=new Map([[o.IVR_NODE_PROMPT_MENU,t.DtIconKeypad],[o.IVR_NODE_PROMPT_COLLECT,t.DtIconDialer],[o.IVR_NODE_PROMPT_PLAY,t.DtIconVolume2],[o.IVR_NODE_EXPERT,t.DtIconExpertNode],[o.IVR_NODE_BRANCH,t.DtIconBranch],[o.IVR_NODE_GO_TO,t.DtIconCallMerge],[o.IVR_NODE_ASSIGN,t.DtIconChevronsRight],[o.IVR_NODE_CUSTOMER_DATA,t.DtIconListBullet],[o.IVR_NODE_TRANSFER,t.DtIconTransfer],[o.IVR_NODE_HANGUP,t.DtIconPhoneHangUp]]),u={name:"DtRecipeIvrNode",components:{DtCard:d.default,DtButton:s.default,DtDropdown:l.default,DtIconKeypad:t.DtIconKeypad,DtIconDialer:t.DtIconDialer,DtIconVolume2:t.DtIconVolume2,DtIconExpertNode:t.DtIconExpertNode,DtIconBranch:t.DtIconBranch,DtIconCallMerge:t.DtIconCallMerge,DtIconChevronsRight:t.DtIconChevronsRight,DtIconTransfer:t.DtIconTransfer,DtIconPhoneHangUp:t.DtIconPhoneHangUp,DtIconMoreVertical:t.DtIconMoreVertical,DtIconListBullet:t.DtIconListBullet},props:{nodeType:{type:String,required:!0},nodeLabel:{type:String,required:!0},isSelected:{type:Boolean,default:!1},dtmfKey:{type:String,default:null}},emits:["click"],data(){return{isOpen:!1,i18n:new i.DialtoneLocalization}},computed:{nodeIcon(){return _.get(this.nodeType)},nodeClass(){const{normal:c,selected:e}=o.IVR_NODE_CLASS_MAPPING[this.nodeType];return this.isSelected?e:c},isGotoNode(){return this.nodeType===o.IVR_NODE_GO_TO},nodeAriaLabel(){const c=this.nodeType.toUpperCase();return this.i18n.$t(`DIALTONE_IVR_NODE_${c}_ARIA_LABEL`)},menuButtonAriaLabel(){return this.i18n.$t("DIALTONE_IVR_NODE_MENU_BUTTON_ARIA_LABEL")}},methods:{openMenu(){this.isOpen=!0}}};var p=function(){var e=this,n=e._self._c;return n("div",e._g({class:["d-recipe-ivr-node",e.nodeClass]},e.$listeners),[e.dtmfKey?n("div",{staticClass:"d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf",class:{"d-recipe-ivr-node__connector-dtmf--selected":e.isSelected},attrs:{"data-qa":"dt-top-connector-dtmf"}},[e._v(" "+e._s(e.dtmfKey)+" ")]):e._e(),e.$slots.connector?e._t("connector"):e._e(),!e.dtmfKey&&!e.$slots.connector?n("div",{staticClass:"d-recipe-ivr-node__connector",class:{"d-recipe-ivr-node__connector--selected":e.isSelected},attrs:{"data-qa":"dt-top-connector"}}):e._e(),n("dt-card",{scopedSlots:e._u([{key:"header",fn:function(){return[n("div",{staticClass:"d-recipe-ivr-node__header-left"},[n("dt-button",{attrs:{importance:"clear",kind:"muted","data-qa":"dt-ivr-node-icon","aria-label":e.nodeAriaLabel,title:e.nodeAriaLabel},scopedSlots:e._u([{key:"icon",fn:function(){return[n(e.nodeIcon,{tag:"component",class:["",{"d-recipe-ivr-node__goto-icon":e.isGotoNode}],attrs:{size:"200"}})]},proxy:!0}])}),n("p",{staticClass:"d-recipe-ivr-node__label",attrs:{"data-qa":"ivr-node-label"}},[e._v(" "+e._s(e.nodeLabel)+" ")])],1),n("dt-dropdown",{attrs:{placement:"bottom",open:e.isOpen},on:{"update:open":function(r){e.isOpen=r}},scopedSlots:e._u([{key:"anchor",fn:function(){return[n("dt-button",{attrs:{importance:"clear",kind:"muted","aria-label":e.menuButtonAriaLabel,title:e.menuButtonAriaLabel},on:{click:function(r){return r.stopPropagation(),r.preventDefault(),e.openMenu.apply(null,arguments)}},scopedSlots:e._u([{key:"icon",fn:function(){return[n("dt-icon-more-vertical",{attrs:{size:"200"}})]},proxy:!0}])})]},proxy:!0},{key:"list",fn:function({close:r}){return[n("div",{staticClass:"d-recipe-ivr-node__dropdown-list"},[e._t("menuItems",null,{close:r})],2)]}}],null,!0)})]},proxy:!0},{key:"content",fn:function(){return[e._t("content")]},proxy:!0}],null,!0)})],2)},D=[],I=a.n(u,p,D);const f=I.exports;exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("@dialpad/dialtone-icons/vue2"),o=require("./ivr-node-constants.cjs"),i=require("../../localization/index.cjs"),a=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),d=require("../dropdown/dropdown.cjs"),s=require("../button/button.cjs"),l=require("../card/card.cjs"),_=new Map([[o.IVR_NODE_PROMPT_MENU,t.DtIconKeypad],[o.IVR_NODE_PROMPT_COLLECT,t.DtIconDialer],[o.IVR_NODE_PROMPT_PLAY,t.DtIconVolume2],[o.IVR_NODE_EXPERT,t.DtIconExpertNode],[o.IVR_NODE_BRANCH,t.DtIconBranch],[o.IVR_NODE_GO_TO,t.DtIconCallMerge],[o.IVR_NODE_ASSIGN,t.DtIconChevronsRight],[o.IVR_NODE_CUSTOMER_DATA,t.DtIconListBullet],[o.IVR_NODE_TRANSFER,t.DtIconTransfer],[o.IVR_NODE_HANGUP,t.DtIconPhoneHangUp]]),u={name:"DtRecipeIvrNode",components:{DtCard:l.default,DtButton:s.default,DtDropdown:d.default,DtIconKeypad:t.DtIconKeypad,DtIconDialer:t.DtIconDialer,DtIconVolume2:t.DtIconVolume2,DtIconExpertNode:t.DtIconExpertNode,DtIconBranch:t.DtIconBranch,DtIconCallMerge:t.DtIconCallMerge,DtIconChevronsRight:t.DtIconChevronsRight,DtIconTransfer:t.DtIconTransfer,DtIconPhoneHangUp:t.DtIconPhoneHangUp,DtIconMoreVertical:t.DtIconMoreVertical,DtIconListBullet:t.DtIconListBullet},props:{nodeType:{type:String,required:!0},nodeLabel:{type:String,required:!0},isSelected:{type:Boolean,default:!1},dtmfKey:{type:String,default:null}},emits:["click"],data(){return{isOpen:!1,i18n:new i.DialtoneLocalization}},computed:{nodeIcon(){return _.get(this.nodeType)},nodeClass(){const{normal:c,selected:e}=o.IVR_NODE_CLASS_MAPPING[this.nodeType];return this.isSelected?e:c},isGotoNode(){return this.nodeType===o.IVR_NODE_GO_TO},nodeAriaLabel(){const c=this.nodeType.toUpperCase();return this.i18n.$t(`DIALTONE_IVR_NODE_${c}_ARIA_LABEL`)},menuButtonAriaLabel(){return this.i18n.$t("DIALTONE_IVR_NODE_MENU_BUTTON_ARIA_LABEL")}},methods:{openMenu(){this.isOpen=!0}}};var p=function(){var e=this,n=e._self._c;return n("div",e._g({class:["d-recipe-ivr-node",e.nodeClass]},e.$listeners),[e.dtmfKey?n("div",{staticClass:"d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf",class:{"d-recipe-ivr-node__connector-dtmf--selected":e.isSelected},attrs:{"data-qa":"dt-top-connector-dtmf"}},[e._v(" "+e._s(e.dtmfKey)+" ")]):e._e(),e.$slots.connector?e._t("connector"):e._e(),!e.dtmfKey&&!e.$slots.connector?n("div",{staticClass:"d-recipe-ivr-node__connector",class:{"d-recipe-ivr-node__connector--selected":e.isSelected},attrs:{"data-qa":"dt-top-connector"}}):e._e(),n("dt-card",{scopedSlots:e._u([{key:"header",fn:function(){return[n("div",{staticClass:"d-recipe-ivr-node__header-left"},[n("dt-button",{attrs:{importance:"clear",kind:"muted","data-qa":"dt-ivr-node-icon","aria-label":e.nodeAriaLabel,title:e.nodeAriaLabel},scopedSlots:e._u([{key:"icon",fn:function(){return[n(e.nodeIcon,{tag:"component",class:["",{"d-recipe-ivr-node__goto-icon":e.isGotoNode}],attrs:{size:"200"}})]},proxy:!0}])}),n("p",{staticClass:"d-recipe-ivr-node__label",attrs:{"data-qa":"ivr-node-label"}},[e._v(" "+e._s(e.nodeLabel)+" ")])],1),n("dt-dropdown",{attrs:{placement:"bottom",open:e.isOpen},on:{"update:open":function(r){e.isOpen=r}},scopedSlots:e._u([{key:"anchor",fn:function(){return[n("dt-button",{attrs:{importance:"clear",kind:"muted","aria-label":e.menuButtonAriaLabel,title:e.menuButtonAriaLabel},on:{click:function(r){return r.stopPropagation(),r.preventDefault(),e.openMenu.apply(null,arguments)}},scopedSlots:e._u([{key:"icon",fn:function(){return[n("dt-icon-more-vertical",{attrs:{size:"200"}})]},proxy:!0}])})]},proxy:!0},{key:"list",fn:function({close:r}){return[n("div",{staticClass:"d-recipe-ivr-node__dropdown-list"},[e._t("menuItems",null,{close:r})],2)]}}],null,!0)})]},proxy:!0},{key:"content",fn:function(){return[e._t("content")]},proxy:!0}],null,!0)})],2)},D=[],I=a.n(u,p,D);const f=I.exports;exports.default=f;
 //# sourceMappingURL=ivr-node.cjs.map

package/dist/lib/ivr-node/ivr-node.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ivr-node.cjs","sources":["../../../recipes/cards/ivr_node/ivr_node.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-recipe-ivr-node',\n      nodeClass,\n    ]\"\n    v-on=\"$listeners\"\n  >\n    <div\n      v-if=\"dtmfKey\"\n      data-qa=\"dt-top-connector-dtmf\"\n      class=\"d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf\"\n      :class=\"{ 'd-recipe-ivr-node__connector-dtmf--selected': isSelected }\"\n    >\n      {{ dtmfKey }}\n    </div>\n    <slot\n      v-if=\"$slots.connector\"\n      name=\"connector\"\n    />\n    <div\n      v-if=\"!dtmfKey && !$slots.connector\"\n      data-qa=\"dt-top-connector\"\n      class=\"d-recipe-ivr-node__connector\"\n      :class=\"{ 'd-recipe-ivr-node__connector--selected': isSelected }\"\n    />\n    <dt-card>\n      <template #header>\n        <!-- node label and icon section on left of the header -->\n        <div class=\"d-recipe-ivr-node__header-left\">\n          <dt-button\n            importance=\"clear\"\n            kind=\"muted\"\n            data-qa=\"dt-ivr-node-icon\"\n            :aria-label=\"nodeAriaLabel\"\n            :title=\"nodeAriaLabel\"\n          >\n            <template #icon>\n              <component\n                :is=\"nodeIcon\"\n                size=\"200\"\n                :class=\"['', { 'd-recipe-ivr-node__goto-icon': isGotoNode }]\"\n              />\n            </template>\n          </dt-button>\n          <p\n            class=\"d-recipe-ivr-node__label\"\n            data-qa=\"ivr-node-label\"\n          >\n            {{ nodeLabel }}\n          </p>\n        </div>\n        <!-- node menu for actions like edit, copy, delete -->\n        <dt-dropdown\n          placement=\"bottom\"\n          :open.sync=\"isOpen\"\n        >\n          <template #anchor>\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :aria-label=\"menuButtonAriaLabel\"\n              :title=\"menuButtonAriaLabel\"\n              @click.stop.prevent=\"openMenu\"\n            >\n              <template #icon>\n                <dt-icon-more-vertical size=\"200\" />\n              </template>\n            </dt-button>\n          </template>\n          <template #list=\"{ close }\">\n            <div class=\"d-recipe-ivr-node__dropdown-list\">\n              <slot\n                name=\"menuItems\"\n                :close=\"close\"\n              />\n            </div>\n          </template>\n        </dt-dropdown>\n      </template>\n      <template #content>\n        <slot name=\"content\" />\n      </template>\n    </dt-card>\n  </div>\n</template>\n\n<script>\nimport { DtCard } from '@/components/card';\nimport { DtButton } from '@/components/button';\nimport { DtDropdown } from '@/components/dropdown';\nimport {\n  DtIconKeypad,\n  DtIconDialer,\n  DtIconVolume2,\n  DtIconExpertNode,\n  DtIconBranch,\n  DtIconCallMerge,\n  DtIconChevronsRight,\n  DtIconTransfer,\n  DtIconPhoneHangUp,\n  DtIconMoreVertical,\n  DtIconListBullet,\n} from '@dialpad/dialtone-icons/vue2';\nimport {\n  IVR_NODE_CLASS_MAPPING,\n  IVR_NODE_PROMPT_MENU,\n  IVR_NODE_PROMPT_COLLECT,\n  IVR_NODE_PROMPT_PLAY,\n  IVR_NODE_EXPERT,\n  IVR_NODE_BRANCH,\n  IVR_NODE_GO_TO,\n  IVR_NODE_ASSIGN,\n  IVR_NODE_TRANSFER,\n  IVR_NODE_HANGUP,\n  IVR_NODE_CUSTOMER_DATA,\n} from './ivr_node_constants';\nimport { DialtoneLocalization } from '@/localization';\n\nconst typeToIcon = new Map([\n  [IVR_NODE_PROMPT_MENU, DtIconKeypad],\n  [IVR_NODE_PROMPT_COLLECT, DtIconDialer],\n  [IVR_NODE_PROMPT_PLAY, DtIconVolume2],\n  [IVR_NODE_EXPERT, DtIconExpertNode],\n  [IVR_NODE_BRANCH, DtIconBranch],\n  [IVR_NODE_GO_TO, DtIconCallMerge],\n  [IVR_NODE_ASSIGN, DtIconChevronsRight],\n  [IVR_NODE_CUSTOMER_DATA, DtIconListBullet],\n  [IVR_NODE_TRANSFER, DtIconTransfer],\n  [IVR_NODE_HANGUP, DtIconPhoneHangUp],\n]);\n\nexport default {\n  name: 'DtRecipeIvrNode',\n\n  components: {\n    DtCard,\n    DtButton,\n    DtDropdown,\n    DtIconKeypad,\n    DtIconDialer,\n    DtIconVolume2,\n    DtIconExpertNode,\n    DtIconBranch,\n    DtIconCallMerge,\n    DtIconChevronsRight,\n    DtIconTransfer,\n    DtIconPhoneHangUp,\n    DtIconMoreVertical,\n    DtIconListBullet,\n  },\n\n  props: {\n\n    /**\n     * type of IVR Node.\n     */\n    nodeType: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the node name.\n     */\n\n    nodeLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Selected state of the node\n     */\n    isSelected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * DTMF input\n     */\n    dtmfKey: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Add node click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    nodeIcon () {\n      return typeToIcon.get(this.nodeType);\n    },\n\n    nodeClass () {\n      const { normal, selected } = IVR_NODE_CLASS_MAPPING[this.nodeType];\n      return this.isSelected ? selected : normal;\n    },\n\n    isGotoNode () {\n      return this.nodeType === IVR_NODE_GO_TO;\n    },\n\n    nodeAriaLabel () {\n      const nodeType = this.nodeType.toUpperCase();\n      return this.i18n.$t(`DIALTONE_IVR_NODE_${nodeType}_ARIA_LABEL`);\n    },\n\n    menuButtonAriaLabel () {\n      return this.i18n.$t('DIALTONE_IVR_NODE_MENU_BUTTON_ARIA_LABEL');\n    },\n  },\n\n  methods: {\n    openMenu () {\n      this.isOpen = true;\n    },\n  },\n};\n</script>\n"],"names":["typeToIcon","IVR_NODE_PROMPT_MENU","DtIconKeypad","IVR_NODE_PROMPT_COLLECT","DtIconDialer","IVR_NODE_PROMPT_PLAY","DtIconVolume2","IVR_NODE_EXPERT","DtIconExpertNode","IVR_NODE_BRANCH","DtIconBranch","IVR_NODE_GO_TO","DtIconCallMerge","IVR_NODE_ASSIGN","DtIconChevronsRight","IVR_NODE_CUSTOMER_DATA","DtIconListBullet","IVR_NODE_TRANSFER","DtIconTransfer","IVR_NODE_HANGUP","DtIconPhoneHangUp","_sfc_main","DtCard","DtButton","DtDropdown","DtIconMoreVertical","DialtoneLocalization","normal","selected","IVR_NODE_CLASS_MAPPING","nodeType"],"mappings":"0YAuHAA,EAAA,IAAA,IAAA,CACA,CAAAC,EAAAA,qBAAAC,EAAAA,YAAA,EACA,CAAAC,EAAAA,wBAAAC,EAAAA,YAAA,EACA,CAAAC,EAAAA,qBAAAC,EAAAA,aAAA,EACA,CAAAC,EAAAA,gBAAAC,EAAAA,gBAAA,EACA,CAAAC,EAAAA,gBAAAC,EAAAA,YAAA,EACA,CAAAC,EAAAA,eAAAC,EAAAA,eAAA,EACA,CAAAC,EAAAA,gBAAAC,EAAAA,mBAAA,EACA,CAAAC,EAAAA,uBAAAC,EAAAA,gBAAA,EACA,CAAAC,EAAAA,kBAAAC,EAAAA,cAAA,EACA,CAAAC,EAAAA,gBAAAC,EAAAA,iBAAA,CACA,CAAA,EAEAC,EAAA,CACA,KAAA,kBAEA,WAAA,CACA,OAAAC,EAAA,QACA,SAAAC,EAAA,QACA,WAAAC,EAAA,QACA,aAAAtB,EAAA,aACA,aAAAE,EAAA,aACA,cAAAE,EAAA,cACA,iBAAAE,EAAA,iBACA,aAAAE,EAAA,aACA,gBAAAE,EAAA,gBACA,oBAAAE,EAAA,oBACA,eAAAI,EAAA,eACA,kBAAAE,EAAA,kBACA,mBAAAK,EAAA,mBACA,iBAAAT,EAAA,gBACA,EAEA,MAAA,CAKA,SAAA,CACA,KAAA,OACA,SAAA,EACA,EAMA,UAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,QAAA,CACA,KAAA,OACA,QAAA,IACA,CACA,EAEA,MAAA,CAOA,OACA,EAEA,MAAA,CACA,MAAA,CACA,OAAA,GACA,KAAA,IAAAU,EAAAA,oBACA,CACA,EAEA,SAAA,CACA,UAAA,CACA,OAAA1B,EAAA,IAAA,KAAA,QAAA,CACA,EAEA,WAAA,CACA,KAAA,CAAA,OAAA2B,EAAA,SAAAC,CAAA,EAAAC,EAAAA,uBAAA,KAAA,QAAA,EACA,OAAA,KAAA,WAAAD,EAAAD,CACA,EAEA,YAAA,CACA,OAAA,KAAA,WAAAhB,gBACA,EAEA,eAAA,CACA,MAAAmB,EAAA,KAAA,SAAA,YAAA,EACA,OAAA,KAAA,KAAA,GAAA,qBAAAA,CAAA,aAAA,CACA,EAEA,qBAAA,CACA,OAAA,KAAA,KAAA,GAAA,0CAAA,CACA,CACA,EAEA,QAAA,CACA,UAAA,CACA,KAAA,OAAA,EACA,CACA,CACA"}
+{"version":3,"file":"ivr-node.cjs","sources":["../../../recipes/cards/ivr_node/ivr_node.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-recipe-ivr-node',\n      nodeClass,\n    ]\"\n    v-on=\"$listeners\"\n  >\n    <div\n      v-if=\"dtmfKey\"\n      data-qa=\"dt-top-connector-dtmf\"\n      class=\"d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf\"\n      :class=\"{ 'd-recipe-ivr-node__connector-dtmf--selected': isSelected }\"\n    >\n      {{ dtmfKey }}\n    </div>\n    <slot\n      v-if=\"$slots.connector\"\n      name=\"connector\"\n    />\n    <div\n      v-if=\"!dtmfKey && !$slots.connector\"\n      data-qa=\"dt-top-connector\"\n      class=\"d-recipe-ivr-node__connector\"\n      :class=\"{ 'd-recipe-ivr-node__connector--selected': isSelected }\"\n    />\n    <dt-card>\n      <template #header>\n        <!-- node label and icon section on left of the header -->\n        <div class=\"d-recipe-ivr-node__header-left\">\n          <dt-button\n            importance=\"clear\"\n            kind=\"muted\"\n            data-qa=\"dt-ivr-node-icon\"\n            :aria-label=\"nodeAriaLabel\"\n            :title=\"nodeAriaLabel\"\n          >\n            <template #icon>\n              <component\n                :is=\"nodeIcon\"\n                size=\"200\"\n                :class=\"['', { 'd-recipe-ivr-node__goto-icon': isGotoNode }]\"\n              />\n            </template>\n          </dt-button>\n          <p\n            class=\"d-recipe-ivr-node__label\"\n            data-qa=\"ivr-node-label\"\n          >\n            {{ nodeLabel }}\n          </p>\n        </div>\n        <!-- node menu for actions like edit, copy, delete -->\n        <dt-dropdown\n          placement=\"bottom\"\n          :open.sync=\"isOpen\"\n        >\n          <template #anchor>\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :aria-label=\"menuButtonAriaLabel\"\n              :title=\"menuButtonAriaLabel\"\n              @click.stop.prevent=\"openMenu\"\n            >\n              <template #icon>\n                <dt-icon-more-vertical size=\"200\" />\n              </template>\n            </dt-button>\n          </template>\n          <template #list=\"{ close }\">\n            <div class=\"d-recipe-ivr-node__dropdown-list\">\n              <slot\n                name=\"menuItems\"\n                :close=\"close\"\n              />\n            </div>\n          </template>\n        </dt-dropdown>\n      </template>\n      <template #content>\n        <slot name=\"content\" />\n      </template>\n    </dt-card>\n  </div>\n</template>\n\n<script>\nimport { DtCard } from '@/components/card';\nimport { DtButton } from '@/components/button';\nimport { DtDropdown } from '@/components/dropdown';\nimport {\n  DtIconKeypad,\n  DtIconDialer,\n  DtIconVolume2,\n  DtIconExpertNode,\n  DtIconBranch,\n  DtIconCallMerge,\n  DtIconChevronsRight,\n  DtIconTransfer,\n  DtIconPhoneHangUp,\n  DtIconMoreVertical,\n  DtIconListBullet,\n} from '@dialpad/dialtone-icons/vue2';\nimport {\n  IVR_NODE_CLASS_MAPPING,\n  IVR_NODE_PROMPT_MENU,\n  IVR_NODE_PROMPT_COLLECT,\n  IVR_NODE_PROMPT_PLAY,\n  IVR_NODE_EXPERT,\n  IVR_NODE_BRANCH,\n  IVR_NODE_GO_TO,\n  IVR_NODE_ASSIGN,\n  IVR_NODE_TRANSFER,\n  IVR_NODE_HANGUP,\n  IVR_NODE_CUSTOMER_DATA,\n} from './ivr_node_constants';\nimport { DialtoneLocalization } from '@/localization';\n\nconst typeToIcon = new Map([\n  [IVR_NODE_PROMPT_MENU, DtIconKeypad],\n  [IVR_NODE_PROMPT_COLLECT, DtIconDialer],\n  [IVR_NODE_PROMPT_PLAY, DtIconVolume2],\n  [IVR_NODE_EXPERT, DtIconExpertNode],\n  [IVR_NODE_BRANCH, DtIconBranch],\n  [IVR_NODE_GO_TO, DtIconCallMerge],\n  [IVR_NODE_ASSIGN, DtIconChevronsRight],\n  [IVR_NODE_CUSTOMER_DATA, DtIconListBullet],\n  [IVR_NODE_TRANSFER, DtIconTransfer],\n  [IVR_NODE_HANGUP, DtIconPhoneHangUp],\n]);\n\nexport default {\n  name: 'DtRecipeIvrNode',\n\n  components: {\n    DtCard,\n    DtButton,\n    DtDropdown,\n    DtIconKeypad,\n    DtIconDialer,\n    DtIconVolume2,\n    DtIconExpertNode,\n    DtIconBranch,\n    DtIconCallMerge,\n    DtIconChevronsRight,\n    DtIconTransfer,\n    DtIconPhoneHangUp,\n    DtIconMoreVertical,\n    DtIconListBullet,\n  },\n\n  props: {\n\n    /**\n     * type of IVR Node.\n     */\n    nodeType: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the node name.\n     */\n\n    nodeLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Selected state of the node\n     */\n    isSelected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * DTMF input\n     */\n    dtmfKey: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Add node click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    nodeIcon () {\n      return typeToIcon.get(this.nodeType);\n    },\n\n    nodeClass () {\n      const { normal, selected } = IVR_NODE_CLASS_MAPPING[this.nodeType];\n      return this.isSelected ? selected : normal;\n    },\n\n    isGotoNode () {\n      return this.nodeType === IVR_NODE_GO_TO;\n    },\n\n    nodeAriaLabel () {\n      const nodeType = this.nodeType.toUpperCase();\n      return this.i18n.$t(`DIALTONE_IVR_NODE_${nodeType}_ARIA_LABEL`);\n    },\n\n    menuButtonAriaLabel () {\n      return this.i18n.$t('DIALTONE_IVR_NODE_MENU_BUTTON_ARIA_LABEL');\n    },\n  },\n\n  methods: {\n    openMenu () {\n      this.isOpen = true;\n    },\n  },\n};\n</script>\n"],"names":["typeToIcon","IVR_NODE_PROMPT_MENU","DtIconKeypad","IVR_NODE_PROMPT_COLLECT","DtIconDialer","IVR_NODE_PROMPT_PLAY","DtIconVolume2","IVR_NODE_EXPERT","DtIconExpertNode","IVR_NODE_BRANCH","DtIconBranch","IVR_NODE_GO_TO","DtIconCallMerge","IVR_NODE_ASSIGN","DtIconChevronsRight","IVR_NODE_CUSTOMER_DATA","DtIconListBullet","IVR_NODE_TRANSFER","DtIconTransfer","IVR_NODE_HANGUP","DtIconPhoneHangUp","_sfc_main","DtCard","DtButton","DtDropdown","DtIconMoreVertical","DialtoneLocalization","normal","selected","IVR_NODE_CLASS_MAPPING","nodeType"],"mappings":"0YAuHAA,EAAA,IAAA,IAAA,CACA,CAAAC,EAAAA,qBAAAC,EAAAA,YAAA,EACA,CAAAC,EAAAA,wBAAAC,EAAAA,YAAA,EACA,CAAAC,EAAAA,qBAAAC,EAAAA,aAAA,EACA,CAAAC,EAAAA,gBAAAC,EAAAA,gBAAA,EACA,CAAAC,EAAAA,gBAAAC,EAAAA,YAAA,EACA,CAAAC,EAAAA,eAAAC,EAAAA,eAAA,EACA,CAAAC,EAAAA,gBAAAC,EAAAA,mBAAA,EACA,CAAAC,EAAAA,uBAAAC,EAAAA,gBAAA,EACA,CAAAC,EAAAA,kBAAAC,EAAAA,cAAA,EACA,CAAAC,EAAAA,gBAAAC,EAAAA,iBAAA,CACA,CAAA,EAEAC,EAAA,CACA,KAAA,kBAEA,WAAA,CACA,OAAAC,EAAAA,QACA,SAAAC,EAAAA,QACA,WAAAC,EAAAA,QACA,aAAAtB,EAAAA,aACA,aAAAE,EAAAA,aACA,cAAAE,EAAAA,cACA,iBAAAE,EAAAA,iBACA,aAAAE,EAAAA,aACA,gBAAAE,EAAAA,gBACA,oBAAAE,EAAAA,oBACA,eAAAI,EAAAA,eACA,kBAAAE,EAAAA,kBACA,mBAAAK,EAAAA,mBACA,iBAAAT,EAAAA,gBACA,EAEA,MAAA,CAKA,SAAA,CACA,KAAA,OACA,SAAA,EACA,EAMA,UAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,QAAA,CACA,KAAA,OACA,QAAA,IACA,CACA,EAEA,MAAA,CAOA,OACA,EAEA,MAAA,CACA,MAAA,CACA,OAAA,GACA,KAAA,IAAAU,EAAAA,oBACA,CACA,EAEA,SAAA,CACA,UAAA,CACA,OAAA1B,EAAA,IAAA,KAAA,QAAA,CACA,EAEA,WAAA,CACA,KAAA,CAAA,OAAA2B,EAAA,SAAAC,CAAA,EAAAC,EAAAA,uBAAA,KAAA,QAAA,EACA,OAAA,KAAA,WAAAD,EAAAD,CACA,EAEA,YAAA,CACA,OAAA,KAAA,WAAAhB,EAAAA,cACA,EAEA,eAAA,CACA,MAAAmB,EAAA,KAAA,SAAA,YAAA,EACA,OAAA,KAAA,KAAA,GAAA,qBAAAA,CAAA,aAAA,CACA,EAEA,qBAAA,CACA,OAAA,KAAA,KAAA,GAAA,0CAAA,CACA,CACA,EAEA,QAAA,CACA,UAAA,CACA,KAAA,OAAA,EACA,CACA,CACA"}

package/dist/lib/ivr-node/ivr-node.js

@@ -1,38 +1,38 @@
-import { DtIconKeypad as r, DtIconDialer as i, DtIconVolume2 as c, DtIconExpertNode as a, DtIconBranch as s, DtIconCallMerge as d, DtIconChevronsRight as _, DtIconTransfer as l, DtIconPhoneHangUp as p, DtIconMoreVertical as f, DtIconListBullet as u } from "@dialpad/dialtone-icons/vue2";
-import { IVR_NODE_GO_TO as m, IVR_NODE_PROMPT_MENU as D, IVR_NODE_PROMPT_COLLECT as I, IVR_NODE_PROMPT_PLAY as v, IVR_NODE_EXPERT as y, IVR_NODE_BRANCH as N, IVR_NODE_ASSIGN as O, IVR_NODE_CUSTOMER_DATA as R, IVR_NODE_TRANSFER as E, IVR_NODE_HANGUP as A, IVR_NODE_CLASS_MAPPING as T } from "./ivr-node-constants.js";
+import { DtIconListBullet as r, DtIconMoreVertical as f, DtIconPhoneHangUp as i, DtIconTransfer as c, DtIconChevronsRight as a, DtIconCallMerge as s, DtIconBranch as d, DtIconExpertNode as _, DtIconVolume2 as l, DtIconDialer as p, DtIconKeypad as u } from "@dialpad/dialtone-icons/vue2";
+import { IVR_NODE_GO_TO as m, IVR_NODE_CLASS_MAPPING as D, IVR_NODE_PROMPT_MENU as I, IVR_NODE_PROMPT_COLLECT as v, IVR_NODE_PROMPT_PLAY as y, IVR_NODE_EXPERT as N, IVR_NODE_BRANCH as O, IVR_NODE_ASSIGN as R, IVR_NODE_CUSTOMER_DATA as E, IVR_NODE_TRANSFER as A, IVR_NODE_HANGUP as T } from "./ivr-node-constants.js";
 import { DialtoneLocalization as L } from "../../localization/index.js";
 import { n as h } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import C from "../card/card.js";
+import C from "../dropdown/dropdown.js";
 import S from "../button/button.js";
-import b from "../dropdown/dropdown.js";
+import b from "../card/card.js";
 const V = /* @__PURE__ */ new Map([
-  [D, r],
-  [I, i],
-  [v, c],
-  [y, a],
-  [N, s],
-  [m, d],
-  [O, _],
-  [R, u],
-  [E, l],
-  [A, p]
+  [I, u],
+  [v, p],
+  [y, l],
+  [N, _],
+  [O, d],
+  [m, s],
+  [R, a],
+  [E, r],
+  [A, c],
+  [T, i]
 ]), P = {
   name: "DtRecipeIvrNode",
   components: {
-    DtCard: C,
+    DtCard: b,
     DtButton: S,
-    DtDropdown: b,
-    DtIconKeypad: r,
-    DtIconDialer: i,
-    DtIconVolume2: c,
-    DtIconExpertNode: a,
-    DtIconBranch: s,
-    DtIconCallMerge: d,
-    DtIconChevronsRight: _,
-    DtIconTransfer: l,
-    DtIconPhoneHangUp: p,
+    DtDropdown: C,
+    DtIconKeypad: u,
+    DtIconDialer: p,
+    DtIconVolume2: l,
+    DtIconExpertNode: _,
+    DtIconBranch: d,
+    DtIconCallMerge: s,
+    DtIconChevronsRight: a,
+    DtIconTransfer: c,
+    DtIconPhoneHangUp: i,
     DtIconMoreVertical: f,
-    DtIconListBullet: u
+    DtIconListBullet: r
   },
   props: {
     /**
@@ -84,7 +84,7 @@ const V = /* @__PURE__ */ new Map([
       return V.get(this.nodeType);
     },
     nodeClass() {
-      const { normal: o, selected: e } = T[this.nodeType];
+      const { normal: o, selected: e } = D[this.nodeType];
       return this.isSelected ? e : o;
     },
     isGotoNode() {

package/dist/lib/keyboard-shortcut/keyboard-shortcut.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      v-if=\"screenReaderText\"\n      class=\"d-keyboard-shortcut--sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else\n        :key=\"`${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue2';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconPlus,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n  },\n};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","_sfc_main","DtIconPlus","result","key","iconAliasString","regex"],"mappings":"oNAqDAA,EAAA,CACA,QAAAC,EAAA,iBACA,gBAAAC,EAAA,iBACA,eAAAC,EAAA,gBACA,aAAAC,EAAA,cACA,eAAAC,EAAA,gBACA,QAAAC,EAAA,aACA,EAMAC,EAAA,CACA,KAAA,qBAEA,WAAA,CACA,iBAAAN,EAAA,iBACA,iBAAAC,EAAA,iBACA,gBAAAC,EAAA,gBACA,cAAAC,EAAA,cACA,gBAAAC,EAAA,gBACA,cAAAC,EAAA,cACA,WAAAE,EAAA,UACA,EAEA,MAAA,CAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,SAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,iBAAA,CACA,KAAA,OACA,QAAA,IACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,UAAA,MACA,CACA,EAEA,SAAA,CACA,OAAA,CACA,MAAA,CACA,GAAAR,EACA,SAAAQ,EAAA,UACA,CACA,EAEA,uBAAA,CACA,OAAA,KAAA,SAAA,QAAA,KAAA,UAAA,QAAA,CACA,EAEA,mBAAA,CACA,OAAA,OAAA,KAAAR,CAAA,EAAA,OAAA,CAAAS,EAAAC,IACAD,EAAA,QAAA,IAAA,OAAA,IAAAC,EAAA,IAAA,IAAA,EAAAV,EAAAU,CAAA,CAAA,EACA,KAAA,qBAAA,CACA,EAGA,wBAAA,CACA,MAAAC,EAAA,OAAA,KAAA,KAAA,KAAA,EAAA,KAAA,GAAA,EAOAC,EAAA,IAAA,OAAA,IAAAD,CAAA,IAAA,IAAA,EACA,OAAA,KAAA,kBAAA,MAAAC,CAAA,EAAA,OAAA,OAAA,CACA,CACA,CACA"}
+{"version":3,"file":"keyboard-shortcut.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      v-if=\"screenReaderText\"\n      class=\"d-keyboard-shortcut--sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else\n        :key=\"`${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue2';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconPlus,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n  },\n};\n</script>\n"],"names":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","_sfc_main","DtIconPlus","result","key","iconAliasString","regex"],"mappings":"oNAqDAA,EAAA,CACA,QAAAC,EAAAA,iBACA,gBAAAC,EAAAA,iBACA,eAAAC,EAAAA,gBACA,aAAAC,EAAAA,cACA,eAAAC,EAAAA,gBACA,QAAAC,EAAAA,aACA,EAMAC,EAAA,CACA,KAAA,qBAEA,WAAA,CACA,iBAAAN,EAAAA,iBACA,iBAAAC,EAAAA,iBACA,gBAAAC,EAAAA,gBACA,cAAAC,EAAAA,cACA,gBAAAC,EAAAA,gBACA,cAAAC,EAAAA,cACA,WAAAE,EAAAA,UACA,EAEA,MAAA,CAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,SAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,iBAAA,CACA,KAAA,OACA,QAAA,IACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,UAAA,MACA,CACA,EAEA,SAAA,CACA,OAAA,CACA,MAAA,CACA,GAAAR,EACA,SAAAQ,EAAAA,UACA,CACA,EAEA,uBAAA,CACA,OAAA,KAAA,SAAA,QAAA,KAAA,UAAA,QAAA,CACA,EAEA,mBAAA,CACA,OAAA,OAAA,KAAAR,CAAA,EAAA,OAAA,CAAAS,EAAAC,IACAD,EAAA,QAAA,IAAA,OAAA,IAAAC,EAAA,IAAA,IAAA,EAAAV,EAAAU,CAAA,CAAA,EACA,KAAA,qBAAA,CACA,EAGA,wBAAA,CACA,MAAAC,EAAA,OAAA,KAAA,KAAA,KAAA,EAAA,KAAA,GAAA,EAOAC,EAAA,IAAA,OAAA,IAAAD,CAAA,IAAA,IAAA,EACA,OAAA,KAAA,kBAAA,MAAAC,CAAA,EAAA,OAAA,OAAA,CACA,CACA,CACA"}

package/dist/lib/keyboard-shortcut/keyboard-shortcut.js

@@ -1,21 +1,21 @@
-import { DtIconLayoutGrid as c, DtIconArrowRight as d, DtIconArrowLeft as i, DtIconArrowUp as u, DtIconArrowDown as p, DtIconCommand as h, DtIconPlus as a } from "@dialpad/dialtone-icons/vue2";
+import { DtIconPlus as a, DtIconCommand as c, DtIconArrowDown as d, DtIconArrowUp as i, DtIconArrowLeft as u, DtIconArrowRight as p, DtIconLayoutGrid as h } from "@dialpad/dialtone-icons/vue2";
 import { n as _ } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
 const n = {
-  "{win}": c,
-  "{arrow-right}": d,
-  "{arrow-left}": i,
-  "{arrow-up}": u,
-  "{arrow-down}": p,
-  "{cmd}": h
+  "{win}": h,
+  "{arrow-right}": p,
+  "{arrow-left}": u,
+  "{arrow-up}": i,
+  "{arrow-down}": d,
+  "{cmd}": c
 }, l = {
   name: "DtKeyboardShortcut",
   components: {
-    DtIconLayoutGrid: c,
-    DtIconArrowRight: d,
-    DtIconArrowLeft: i,
-    DtIconArrowUp: u,
-    DtIconArrowDown: p,
-    DtIconCommand: h,
+    DtIconLayoutGrid: h,
+    DtIconArrowRight: p,
+    DtIconArrowLeft: u,
+    DtIconArrowUp: i,
+    DtIconArrowDown: d,
+    DtIconCommand: c,
     DtIconPlus: a
   },
   props: {

package/dist/lib/link/link-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"link-constants.cjs","sources":["../../../components/link/link_constants.js"],"sourcesContent":["export const DANGER = 'danger';\nexport const WARNING = 'warning';\nexport const SUCCESS = 'success';\nexport const MUTED = 'muted';\nexport const MENTION = 'mention';\nexport const LINK_VARIANTS = ['', DANGER, WARNING, SUCCESS, MUTED, MENTION];\n\nexport const LINK_KIND_MODIFIERS = {\n  default: '',\n  warning: 'd-link--warning',\n  danger: 'd-link--danger',\n  success: 'd-link--success',\n  muted: 'd-link--muted',\n  mention: 'd-link--mention',\n};\n\nconst LINK_KIND_MODIFIERS_INVERTED = {\n  default: 'd-link--inverted',\n  warning: 'd-link--inverted-warning',\n  danger: 'd-link--inverted-danger',\n  success: 'd-link--inverted-success',\n  muted: 'd-link--inverted-muted',\n  mention: 'd-link--inverted-mention',\n};\n\nexport const getLinkKindModifier = (kind, inverted) => {\n  if (inverted) {\n    return LINK_KIND_MODIFIERS_INVERTED[kind || 'default'];\n  }\n  return LINK_KIND_MODIFIERS[kind];\n};\n\nexport default {\n  LINK_VARIANTS,\n  LINK_KIND_MODIFIERS,\n  getLinkKindModifier,\n};\n"],"names":["DANGER","WARNING","SUCCESS","MUTED","MENTION","LINK_VARIANTS","LINK_KIND_MODIFIERS","LINK_KIND_MODIFIERS_INVERTED","getLinkKindModifier","kind","inverted","link_constants"],"mappings":"4GAAY,MAACA,EAAS,SACTC,EAAU,UACVC,EAAU,UACVC,EAAQ,QACRC,EAAU,UACVC,EAAgB,CAAC,GAAIL,EAAQC,EAASC,EAASC,EAAOC,CAAO,EAE7DE,EAAsB,CACjC,QAAS,GACT,QAAS,kBACT,OAAQ,iBACR,QAAS,kBACT,MAAO,gBACP,QAAS,iBACX,EAEMC,EAA+B,CACnC,QAAS,mBACT,QAAS,2BACT,OAAQ,0BACR,QAAS,2BACT,MAAO,yBACP,QAAS,0BACX,EAEaC,EAAsB,CAACC,EAAMC,IACpCA,EACKH,EAA6BE,GAAQ,SAAS,EAEhDH,EAAoBG,CAAI,EAGlBE,EAAA,CACb,cAAAN,EACA,oBAAAC,EACA,oBAAAE,CACF"}
+{"version":3,"file":"link-constants.cjs","sources":["../../../components/link/link_constants.js"],"sourcesContent":["export const DANGER = 'danger';\nexport const WARNING = 'warning';\nexport const SUCCESS = 'success';\nexport const MUTED = 'muted';\nexport const MENTION = 'mention';\nexport const LINK_VARIANTS = ['', DANGER, WARNING, SUCCESS, MUTED, MENTION];\n\nexport const LINK_KIND_MODIFIERS = {\n  default: '',\n  warning: 'd-link--warning',\n  danger: 'd-link--danger',\n  success: 'd-link--success',\n  muted: 'd-link--muted',\n  mention: 'd-link--mention',\n};\n\nconst LINK_KIND_MODIFIERS_INVERTED = {\n  default: 'd-link--inverted',\n  warning: 'd-link--inverted-warning',\n  danger: 'd-link--inverted-danger',\n  success: 'd-link--inverted-success',\n  muted: 'd-link--inverted-muted',\n  mention: 'd-link--inverted-mention',\n};\n\nexport const getLinkKindModifier = (kind, inverted) => {\n  if (inverted) {\n    return LINK_KIND_MODIFIERS_INVERTED[kind || 'default'];\n  }\n  return LINK_KIND_MODIFIERS[kind];\n};\n\nexport default {\n  LINK_VARIANTS,\n  LINK_KIND_MODIFIERS,\n  getLinkKindModifier,\n};\n"],"names":["DANGER","WARNING","SUCCESS","MUTED","MENTION","LINK_VARIANTS","LINK_KIND_MODIFIERS","LINK_KIND_MODIFIERS_INVERTED","getLinkKindModifier","kind","inverted","link_constants"],"mappings":"4GAAY,MAACA,EAAS,SACTC,EAAU,UACVC,EAAU,UACVC,EAAQ,QACRC,EAAU,UACVC,EAAgB,CAAC,GAAIL,EAAQC,EAASC,EAASC,EAAOC,CAAO,EAE7DE,EAAsB,CACjC,QAAS,GACT,QAAS,kBACT,OAAQ,iBACR,QAAS,kBACT,MAAO,gBACP,QAAS,iBACX,EAEMC,EAA+B,CACnC,QAAS,mBACT,QAAS,2BACT,OAAQ,0BACR,QAAS,2BACT,MAAO,yBACP,QAAS,0BACX,EAEaC,EAAsB,CAACC,EAAMC,IACpCA,EACKH,EAA6BE,GAAQ,SAAS,EAEhDH,EAAoBG,CAAI,EAGjCE,EAAe,CACb,cAAAN,EACA,oBAAAC,EACA,oBAAAE,CACF"}

package/dist/lib/link/link-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-constants.js","sources":["../../../components/link/link_constants.js"],"sourcesContent":["export const DANGER = 'danger';\nexport const WARNING = 'warning';\nexport const SUCCESS = 'success';\nexport const MUTED = 'muted';\nexport const MENTION = 'mention';\nexport const LINK_VARIANTS = ['', DANGER, WARNING, SUCCESS, MUTED, MENTION];\n\nexport const LINK_KIND_MODIFIERS = {\n  default: '',\n  warning: 'd-link--warning',\n  danger: 'd-link--danger',\n  success: 'd-link--success',\n  muted: 'd-link--muted',\n  mention: 'd-link--mention',\n};\n\nconst LINK_KIND_MODIFIERS_INVERTED = {\n  default: 'd-link--inverted',\n  warning: 'd-link--inverted-warning',\n  danger: 'd-link--inverted-danger',\n  success: 'd-link--inverted-success',\n  muted: 'd-link--inverted-muted',\n  mention: 'd-link--inverted-mention',\n};\n\nexport const getLinkKindModifier = (kind, inverted) => {\n  if (inverted) {\n    return LINK_KIND_MODIFIERS_INVERTED[kind || 'default'];\n  }\n  return LINK_KIND_MODIFIERS[kind];\n};\n\nexport default {\n  LINK_VARIANTS,\n  LINK_KIND_MODIFIERS,\n  getLinkKindModifier,\n};\n"],"names":["DANGER","WARNING","SUCCESS","MUTED","MENTION","LINK_VARIANTS","LINK_KIND_MODIFIERS","LINK_KIND_MODIFIERS_INVERTED","getLinkKindModifier","kind","inverted","link_constants"],"mappings":"AAAY,MAACA,IAAS,UACTC,IAAU,WACVC,IAAU,WACVC,IAAQ,SACRC,IAAU,WACVC,IAAgB,CAAC,IAAIL,GAAQC,GAASC,GAASC,GAAOC,CAAO,GAE7DE,IAAsB;AAAA,EACjC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AACX,GAEMC,IAA+B;AAAA,EACnC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AACX,GAEaC,IAAsB,CAACC,GAAMC,MACpCA,IACKH,EAA6BE,KAAQ,SAAS,IAEhDH,EAAoBG,CAAI,GAGlBE,IAAA;AAAA,EACb,eAAAN;AAAA,EACA,qBAAAC;AAAA,EACA,qBAAAE;AACF;"}
+{"version":3,"file":"link-constants.js","sources":["../../../components/link/link_constants.js"],"sourcesContent":["export const DANGER = 'danger';\nexport const WARNING = 'warning';\nexport const SUCCESS = 'success';\nexport const MUTED = 'muted';\nexport const MENTION = 'mention';\nexport const LINK_VARIANTS = ['', DANGER, WARNING, SUCCESS, MUTED, MENTION];\n\nexport const LINK_KIND_MODIFIERS = {\n  default: '',\n  warning: 'd-link--warning',\n  danger: 'd-link--danger',\n  success: 'd-link--success',\n  muted: 'd-link--muted',\n  mention: 'd-link--mention',\n};\n\nconst LINK_KIND_MODIFIERS_INVERTED = {\n  default: 'd-link--inverted',\n  warning: 'd-link--inverted-warning',\n  danger: 'd-link--inverted-danger',\n  success: 'd-link--inverted-success',\n  muted: 'd-link--inverted-muted',\n  mention: 'd-link--inverted-mention',\n};\n\nexport const getLinkKindModifier = (kind, inverted) => {\n  if (inverted) {\n    return LINK_KIND_MODIFIERS_INVERTED[kind || 'default'];\n  }\n  return LINK_KIND_MODIFIERS[kind];\n};\n\nexport default {\n  LINK_VARIANTS,\n  LINK_KIND_MODIFIERS,\n  getLinkKindModifier,\n};\n"],"names":["DANGER","WARNING","SUCCESS","MUTED","MENTION","LINK_VARIANTS","LINK_KIND_MODIFIERS","LINK_KIND_MODIFIERS_INVERTED","getLinkKindModifier","kind","inverted","link_constants"],"mappings":"AAAY,MAACA,IAAS,UACTC,IAAU,WACVC,IAAU,WACVC,IAAQ,SACRC,IAAU,WACVC,IAAgB,CAAC,IAAIL,GAAQC,GAASC,GAASC,GAAOC,CAAO,GAE7DE,IAAsB;AAAA,EACjC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AACX,GAEMC,IAA+B;AAAA,EACnC,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,OAAO;AAAA,EACP,SAAS;AACX,GAEaC,IAAsB,CAACC,GAAMC,MACpCA,IACKH,EAA6BE,KAAQ,SAAS,IAEhDH,EAAoBG,CAAI,GAGjCE,IAAe;AAAA,EACb,eAAAN;AAAA,EACA,qBAAAC;AAAA,EACA,qBAAAE;AACF;"}

package/dist/lib/link/link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"link.cjs","sources":["../../../components/link/link.vue"],"sourcesContent":["<template>\n  <a\n    :class=\"getLinkClasses()\"\n    data-qa=\"dt-link\"\n    :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n    v-on=\"$listeners\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </a>\n</template>\n\n<script>\nimport { LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier } from './link_constants';\n\n/**\n * A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} href attribute\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n */\nexport default {\n  name: 'DtLink',\n\n  props: {\n    /**\n     * Applies the link variant styles\n     * @values null, danger, warning, success, muted, mention\n     */\n    kind: {\n      type: String,\n      default: '',\n      validator (kind) {\n        return LINK_VARIANTS.includes(kind);\n      },\n    },\n\n    /**\n     * Determines whether the link should have inverted styling\n     * default is false.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Native focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      LINK_KIND_MODIFIERS,\n    };\n  },\n\n  methods: {\n    getLinkClasses () {\n      return [\n        'd-link',\n        getLinkKindModifier(this.kind, this.inverted),\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","kind","LINK_VARIANTS","LINK_KIND_MODIFIERS","getLinkKindModifier"],"mappings":"4MAqBAA,EAAA,CACA,KAAA,SAEA,MAAA,CAKA,KAAA,CACA,KAAA,OACA,QAAA,GACA,UAAAC,EAAA,CACA,OAAAC,EAAA,cAAA,SAAAD,CAAA,CACA,CACA,EAOA,SAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CAOA,QAQA,UAQA,UACA,EAEA,MAAA,CACA,MAAA,CACA,oBAAAE,EAAA,mBACA,CACA,EAEA,QAAA,CACA,gBAAA,CACA,MAAA,CACA,SACAC,EAAAA,oBAAA,KAAA,KAAA,KAAA,QAAA,CACA,CACA,CACA,CACA"}
+{"version":3,"file":"link.cjs","sources":["../../../components/link/link.vue"],"sourcesContent":["<template>\n  <a\n    :class=\"getLinkClasses()\"\n    data-qa=\"dt-link\"\n    :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n    v-on=\"$listeners\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </a>\n</template>\n\n<script>\nimport { LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier } from './link_constants';\n\n/**\n * A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} href attribute\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n */\nexport default {\n  name: 'DtLink',\n\n  props: {\n    /**\n     * Applies the link variant styles\n     * @values null, danger, warning, success, muted, mention\n     */\n    kind: {\n      type: String,\n      default: '',\n      validator (kind) {\n        return LINK_VARIANTS.includes(kind);\n      },\n    },\n\n    /**\n     * Determines whether the link should have inverted styling\n     * default is false.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Native focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      LINK_KIND_MODIFIERS,\n    };\n  },\n\n  methods: {\n    getLinkClasses () {\n      return [\n        'd-link',\n        getLinkKindModifier(this.kind, this.inverted),\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","kind","LINK_VARIANTS","LINK_KIND_MODIFIERS","getLinkKindModifier"],"mappings":"4MAqBAA,EAAA,CACA,KAAA,SAEA,MAAA,CAKA,KAAA,CACA,KAAA,OACA,QAAA,GACA,UAAAC,EAAA,CACA,OAAAC,EAAAA,cAAA,SAAAD,CAAA,CACA,CACA,EAOA,SAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CAOA,QAQA,UAQA,UACA,EAEA,MAAA,CACA,MAAA,CACA,oBAAAE,EAAAA,mBACA,CACA,EAEA,QAAA,CACA,gBAAA,CACA,MAAA,CACA,SACAC,EAAAA,oBAAA,KAAA,KAAA,KAAA,QAAA,CACA,CACA,CACA,CACA"}