@dialpad/dialtone-vue 3.222.2 → 3.223.0-next.1

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

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":[],"sources":["../../../components/input/input.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"[rootClass, 'd-input__root', { 'd-input--hidden': hidden }]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\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=\"hasSlotContent($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=\"hasSlotContent($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 === true ? true : undefined\"\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          :name=\"name\"\n          :disabled=\"disabled\"\n          :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n          :class=\"inputClasses()\"\n          :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n          data-qa=\"dt-input-input\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          v-on=\"inputListeners\"\n        />\n        <input\n          v-else\n          ref=\"input\"\n          :value=\"modelValue\"\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=\"dt-input-input\"\n          v-bind=\"removeClassStyleAttrs($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  hasSlotContent,\n  removeClassStyleAttrs,\n  addClassStyleAttrs,\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  compatConfig: { MODE: 3 },\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, color\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    modelValue: {\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     * Additional class name for the root 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    rootClass: {\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     * Event fired to sync the modelValue prop with the parent component\n     * @event update:modelValue\n     */\n    'update:modelValue',\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      hasSlotContent,\n      isComposing: false,\n      justEndedComposition: false,\n      // Moved from beforeMount so these are available during SSR (beforeMount\n      // does not run server-side, causing labelSizeClasses to be undefined).\n      labelSizeClasses: LABEL_SIZE_CLASSES,\n      descriptionSizeClasses: DESCRIPTION_SIZE_CLASSES,\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        compositionstart: () => {\n          this.isComposing = true;\n        },\n\n        compositionend: () => {\n          this.isComposing = false;\n          this.justEndedComposition = true;\n          const val = this.$refs.input.value;\n          this.$emit('input', val);\n          this.$emit('update:modelValue', val);\n          // Clear the flag after the current synchronous event processing so\n          // Firefox's post-compositionend input event is skipped, but the\n          // next real user input (a separate browser task) is not.\n          Promise.resolve().then(() => { this.justEndedComposition = false; });\n        },\n\n        input: async event => {\n          if (this.isComposing) return;\n          if (this.justEndedComposition) return;\n          let val = event.target.value;\n          if (this.type === INPUT_TYPES.FILE) {\n            const files = Array.from(event.target.files);\n            val = files.map(file => file.name);\n          }\n          this.$emit('input', val);\n          this.$emit('update:modelValue', val);\n        },\n\n        blur: event => {\n          this.isInputFocused = false;\n          this.onBlur(event);\n        },\n\n        focus: event => {\n          this.isInputFocused = true;\n          this.$emit('focus', event);\n        },\n\n        focusin: event => this.$emit('focusin', event),\n        focusout: event => this.$emit('focusout', event),\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.modelValue);\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      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    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    modelValue: {\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        // Set textarea value programmatically to avoid attribute binding\n        // Skip during IME composition to avoid interrupting in-progress input\n        if (this.isTextarea && !this.isComposing && this.$refs.input && this.$refs.input.value !== newValue) {\n          this.$refs.input.value = newValue;\n        }\n      },\n    },\n  },\n\n  beforeMount () {\n    // labelSizeClasses and descriptionSizeClasses are now initialized in data()\n    // so they are available during SSR (beforeMount does not run server-side).\n  },\n\n  mounted () {\n    // Set initial textarea value programmatically\n    if (this.isTextarea && this.$refs.input) {\n      this.$refs.input.value = this.modelValue;\n    }\n  },\n\n  methods: {\n    removeClassStyleAttrs,\n    addClassStyleAttrs,\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"],"mappings":"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"}
+{"version":3,"file":"input.js","names":[],"sources":["../../../components/Input/Input.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"['d-input__root', { 'd-input--hidden': hidden }, $attrs.class]\"\n    :style=\"$attrs.style\"\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=\"label\">\n        <dt-text\n          v-if=\"showLabel && label\"\n          ref=\"label\"\n          data-qa=\"dt-input-label\"\n          kind=\"label\"\n          :size=\"resolvedLabelSize\"\n          :strength=\"labelStrength\"\n          tone=\"secondary\"\n          :class=\"['d-input__label-text', labelClass]\"\n        >\n          {{ label }}\n        </dt-text>\n      </slot>\n      <dt-text\n        v-if=\"hasSlotContent($slots.description) || description || shouldValidateLength\"\n        :id=\"descriptionKey\"\n        ref=\"description\"\n        kind=\"body\"\n        :size=\"resolvedDescriptionSize\"\n        tone=\"tertiary\"\n        :density=\"resolvedDescriptionDensity\"\n        as=\"div\"\n        :class=\"[\n          'd-input__description',\n          'd-description',\n          descriptionClass,\n        ]\"\n        data-qa=\"dt-input-description\"\n      >\n        <div\n          v-if=\"hasSlotContent($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      </dt-text>\n      <div\n        :class=\"inputWrapperClasses()\"\n        :read-only=\"disabled === true ? true : undefined\"\n      >\n        <span\n          :class=\"['d-input-icon', 'd-input-icon--left', startIconClass]\"\n          data-qa=\"dt-input-left-icon-wrapper\"\n          @focusout=\"onBlur\"\n        >\n          <!-- @slot Slot for start icon -->\n          <slot\n            v-if=\"$slots.startIcon\"\n            name=\"startIcon\"\n            :icon-size=\"iconSize\"\n          />\n          <!-- @slot @deprecated Use startIcon -->\n          <slot\n            v-else\n            name=\"leftIcon\"\n            :icon-size=\"iconSize\"\n          />\n        </span>\n        <textarea\n          v-if=\"isTextarea\"\n          ref=\"input\"\n          :name=\"name\"\n          :disabled=\"disabled\"\n          :autocomplete=\"$attrs.autocomplete ?? 'off'\"\n          :class=\"inputClasses()\"\n          :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n          :aria-label=\"!showLabel && label ? label : undefined\"\n          :aria-invalid=\"ariaInvalid\"\n          :aria-describedby=\"ariaDescribedBy\"\n          data-qa=\"dt-input-input\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          v-on=\"inputListeners\"\n        />\n        <input\n          v-else\n          ref=\"input\"\n          :value=\"modelValue\"\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          :aria-label=\"!showLabel && label ? label : undefined\"\n          :aria-invalid=\"ariaInvalid\"\n          :aria-describedby=\"ariaDescribedBy\"\n          data-qa=\"dt-input-input\"\n          v-bind=\"removeClassStyleAttrs($attrs)\"\n          v-on=\"inputListeners\"\n        >\n        <span\n          :class=\"['d-input-icon', 'd-input-icon--right', endIconClass]\"\n          data-qa=\"dt-input-right-icon-wrapper\"\n          @focusout=\"onBlur\"\n        >\n          <!-- @slot Slot for end icon -->\n          <slot\n            v-if=\"$slots.endIcon\"\n            name=\"endIcon\"\n            :icon-size=\"iconSize\"\n            :clear=\"clearInput\"\n          />\n          <!-- @slot @deprecated Use endIcon -->\n          <slot\n            v-else\n            name=\"rightIcon\"\n            :icon-size=\"iconSize\"\n            :clear=\"clearInput\"\n          />\n        </span>\n      </div>\n    </label>\n    <dt-validation-messages\n      v-bind=\"messagesChildProps\"\n      :id=\"messagesId\"\n      :validation-messages=\"validationMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\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} from './InputConstants';\nimport {\n  getUniqueString,\n  getValidationState,\n  hasSlotContent,\n  removeClassStyleAttrs,\n} from '@/common/utils';\nimport { DtValidationMessages } from '@/components/ValidationMessages';\nimport { DtText, TEXT_SIZE_MODIFIERS, TEXT_STRENGTH_MODIFIERS } from '@/components/Text';\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, DtText },\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, color\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    modelValue: {\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     * Can also be overridden with a slot of the same name.\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    showLabel: {\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     * Used to customize the description container\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Size of the input.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (t) => Object.keys(INPUT_ICON_SIZES).includes(String(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     * Overrides the label text size. When not provided, the label size\n     * is derived from the component size prop.\n     * @values 100, 200, 300, 400\n     */\n    labelSize: {\n      type: [String, Number],\n      default: null,\n      validator: (s) => TEXT_SIZE_MODIFIERS.label.includes(String(s)),\n    },\n\n    /**\n     * Overrides the label font weight.\n     * @values bold, semibold, medium, normal\n     */\n    labelStrength: {\n      type: String,\n      default: null,\n      validator: (s) => Object.keys(TEXT_STRENGTH_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the start icon container\n     */\n    startIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the end icon container\n     */\n    endIconClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  emits: [\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     * Event fired to sync the modelValue prop with the parent component\n     * @event update:modelValue\n     * @type {String | Number}\n     */\n    'update:modelValue',\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      hasSlotContent,\n      isComposing: false,\n      justEndedComposition: false,\n      messagesId: getUniqueString(),\n    };\n  },\n\n  computed: {\n\n    isTextarea () {\n      return this.type === INPUT_TYPES.TEXTAREA;\n    },\n\n    isDefaultSize () {\n      return String(this.size) === INPUT_SIZES.DEFAULT || String(this.size) === '300';\n    },\n\n    iconSize () {\n      return INPUT_ICON_SIZES[String(this.size)];\n    },\n\n    isValidSize () {\n      return Object.keys(INPUT_ICON_SIZES).includes(String(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        compositionstart: () => {\n          this.isComposing = true;\n        },\n\n        compositionend: () => {\n          this.isComposing = false;\n          this.justEndedComposition = true;\n          const val = this.$refs.input.value;\n          this.$emit('update:modelValue', val);\n          // Clear the flag after the current synchronous event processing so\n          // Firefox's post-compositionend input event is skipped, but the\n          // next real user input (a separate browser task) is not.\n          Promise.resolve().then(() => { this.justEndedComposition = false; });\n        },\n\n        input: async event => {\n          if (this.isComposing) return;\n          if (this.justEndedComposition) return;\n          let val = event.target.value;\n          if (this.type === INPUT_TYPES.FILE) {\n            const files = Array.from(event.target.files);\n            val = files.map(file => file.name);\n          }\n          this.$emit('update:modelValue', val);\n        },\n\n        blur: event => {\n          this.isInputFocused = false;\n          this.onBlur(event);\n        },\n\n        focus: event => {\n          this.isInputFocused = true;\n          this.$emit('focus', event);\n        },\n\n        focusin: event => this.$emit('focusin', event),\n        focusout: event => this.$emit('focusout', event),\n      };\n    },\n\n    descriptionKey () {\n      return `input-description-${getUniqueString()}`;\n    },\n\n    inputState () {\n      return getValidationState(this.validationMessages);\n    },\n\n    ariaInvalid () {\n      return this.inputState === VALIDATION_MESSAGE_TYPES.CRITICAL ? 'true' : undefined;\n    },\n\n    ariaDescribedBy () {\n      return this.showMessages && this.validationMessages.length > 0 ? this.messagesId : undefined;\n    },\n\n    defaultLengthCalculation () {\n      return this.calculateLength(this.modelValue);\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.CRITICAL;\n      }\n    },\n\n    shouldValidateLength () {\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    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    resolvedLabelSize () {\n      if (this.labelSize != null) return this.labelSize;\n      const sizeStr = String(this.size);\n      // xl/500 exceeds label's max size — cap at lg/400\n      if (sizeStr === 'xl' || sizeStr === '500') return sizeStr === '500' ? '400' : 'lg';\n      return this.size;\n    },\n\n    resolvedDescriptionSize () {\n      const map = {\n        100: 'xs', 200: 'xs', 300: 'sm', 400: 'sm', 500: 'md',\n        xs: 'xs', sm: 'xs', md: 'sm', lg: 'sm', xl: 'md',\n      };\n      return map[String(this.size)] || 'sm';\n    },\n\n    resolvedDescriptionDensity () {\n      const sizeStr = String(this.size);\n      return (sizeStr === 'xl' || sizeStr === '500') ? '300' : undefined;\n    },\n\n    sizeModifierClass () {\n      if (this.isDefaultSize || !this.isValidSize) {\n        return '';\n      }\n\n      return INPUT_SIZE_CLASSES[this.inputComponent][String(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    modelValue: {\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        // Set textarea value programmatically to avoid attribute binding\n        // Skip during IME composition to avoid interrupting in-progress input\n        if (this.isTextarea && !this.isComposing && this.$refs.input && this.$refs.input.value !== newValue) {\n          this.$refs.input.value = newValue;\n        }\n      },\n    },\n  },\n\n  mounted () {\n    // Set initial textarea value programmatically\n    if (this.isTextarea && this.$refs.input) {\n      this.$refs.input.value = this.modelValue;\n    }\n    this.runValidations();\n  },\n\n  methods: {\n    removeClassStyleAttrs,\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.startIcon || this.$slots.leftIcon,\n          'd-input-icon--right': this.$slots.endIcon || 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('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    runValidations () {\n      if (!this.label && !this.$attrs['aria-label']) {\n        console.info(\n          '[Dialtone] A label is required for accessibility. Provide a label prop and use show-label=\"false\" to hide it visually.',\n        );\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../validation-messages/validation-messages.cjs`),r=require(`../../common/mixins/input-group.cjs`);let i=require(`vue`);var a={compatConfig:{MODE:3},name:`DtInputGroup`,components:{DtValidationMessages:n.default},mixins:[r.InputGroupMixin],props:{dataQaGroup:{type:String,default:`input-group`},dataQaGroupLegend:{type:String,default:`input-group-legend`},dataQaGroupMessages:{type:String,default:`input-group-messages`}},data(){return{internalValue:this.value,hasSlotContent:e.hasSlotContent}},watch:{value(e){this.internalValue=e},internalValue:{immediate:!0,handler(e){this.provideObj.value=e}}},methods:{getMessageKey(e,t){return`input-group-message-${e}-${t}-${this.id}`}}},o=[`data-qa`],s=[`data-qa`];function c(e,t,n,r,a,c){let l=(0,i.resolveComponent)(`dt-validation-messages`);return(0,i.openBlock)(),(0,i.createElementBlock)(`fieldset`,{class:`d-input-group__fieldset`,"data-qa":n.dataQaGroup},[a.hasSlotContent(e.$slots.legend)||e.legend?((0,i.openBlock)(),(0,i.createElementBlock)(`legend`,(0,i.mergeProps)({key:0,class:[`d-label`,e.legendClass]},e.legendChildProps,{"data-qa":n.dataQaGroupLegend}),[(0,i.renderSlot)(e.$slots,`legend`,{},()=>[(0,i.createTextVNode)((0,i.toDisplayString)(e.legend),1)])],16,s)):(0,i.createCommentVNode)(``,!0),(0,i.renderSlot)(e.$slots,`default`),(0,i.createVNode)(l,(0,i.mergeProps)({"validation-messages":e.formattedMessages,"show-messages":e.showMessages,class:e.messagesClass,"data-qa":n.dataQaGroupMessages},e.messagesChildProps),null,16,[`validation-messages`,`show-messages`,`class`,`data-qa`])],8,o)}var l=t.t(a,[[`render`,c]]);exports.default=l;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../validation-messages/validation-messages.cjs`),i=require(`../../common/mixins/input-group.cjs`),a=require(`../text/text.cjs`);let o=require(`vue`);var s={name:`DtInputGroup`,components:{DtValidationMessages:r.default,DtText:a.default},mixins:[i.InputGroupMixin],props:{dataQaGroup:{type:String,default:`input-group`},dataQaGroupLegend:{type:String,default:`input-group-legend`},dataQaGroupMessages:{type:String,default:`input-group-messages`}},data(){return{internalValue:this.value,hasSlotContent:t.hasSlotContent,messagesId:t.getUniqueString()}},computed:{ariaInvalid(){return t.getValidationState(this.formattedMessages)===e.VALIDATION_MESSAGE_TYPES.CRITICAL?`true`:void 0},ariaDescribedBy(){return this.showMessages&&this.formattedMessages.length>0?this.messagesId:void 0}},watch:{value(e){this.internalValue=e},internalValue:{immediate:!0,handler(e){this.provideObj.value=e}}},methods:{getMessageKey(e,t){return`input-group-message-${e}-${t}-${this.id}`}}},c=[`data-qa`,`aria-invalid`,`aria-describedby`];function l(e,t,n,r,i,a){let s=(0,o.resolveComponent)(`dt-text`),l=(0,o.resolveComponent)(`dt-validation-messages`);return(0,o.openBlock)(),(0,o.createElementBlock)(`fieldset`,{class:`d-input-group__fieldset`,"data-qa":n.dataQaGroup,"aria-invalid":a.ariaInvalid,"aria-describedby":a.ariaDescribedBy},[i.hasSlotContent(e.$slots.legend)||e.legend?((0,o.openBlock)(),(0,o.createBlock)(s,(0,o.mergeProps)({key:0,kind:`label`,as:`legend`,tone:`secondary`,class:[`d-input-group__legend-text`,e.legendClass]},e.legendChildProps,{"data-qa":n.dataQaGroupLegend}),{default:(0,o.withCtx)(()=>[(0,o.renderSlot)(e.$slots,`legend`,{},()=>[(0,o.createTextVNode)((0,o.toDisplayString)(e.legend),1)])]),_:3},16,[`class`,`data-qa`])):(0,o.createCommentVNode)(``,!0),(0,o.renderSlot)(e.$slots,`default`),(0,o.createVNode)(l,(0,o.mergeProps)(e.messagesChildProps,{id:i.messagesId,"validation-messages":e.formattedMessages,"show-messages":e.showMessages,class:e.messagesClass,"data-qa":n.dataQaGroupMessages}),null,16,[`id`,`validation-messages`,`show-messages`,`class`,`data-qa`])],8,c)}var u=n.t(s,[[`render`,l]]);exports.default=u;
 //# sourceMappingURL=input-group.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-group.cjs","names":[],"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=\"hasSlotContent($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';\nimport { hasSlotContent } from '@/common/utils';\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  compatConfig: { MODE: 3 },\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  data () {\n    return {\n      internalValue: this.value,\n      hasSlotContent,\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: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.value = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `input-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"mappings":"+WAuCA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,eAEN,WAAY,CAAE,qBAAA,EAAA,QAAsB,CAEpC,OAAQ,CAAC,EAAA,gBAAgB,CAEzB,MAAO,CAIL,YAAa,CACX,KAAM,OACN,QAAS,cACV,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,qBACV,CAKD,oBAAqB,CACnB,KAAM,OACN,QAAS,uBACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,cAAe,KAAK,MACpB,eAAA,EAAA,eACD,EAGH,MAAO,CACL,MAAO,EAAU,CACf,KAAK,cAAgB,GAQvB,cAAe,CACb,UAAW,GACX,QAAS,EAAkB,CACzB,KAAK,WAAW,MAAQ,GAE3B,CACF,CAED,QAAS,CACP,cAAe,EAAM,EAAO,CAC1B,MAAO,uBAAuB,EAAK,GAAG,EAAM,GAAG,KAAK,MAEvD,CACF,6JA9EY,WAAA,CAvBT,MAAM,0BACL,UAAS,EAAA,cAGF,EAAA,eAAe,EAAA,OAAO,OAAM,EAAK,EAAA,SAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAShC,UAAA,EAAA,EAAA,YAAA,OARN,MAAK,CAAA,UAAc,EAAA,YAAW,EACvB,EAAA,iBAAgB,CACvB,UAAS,EAAA,kBAAiB,CAAA,CAAA,EAAA,EAAA,EAAA,YAKpB,EAAA,OAAA,SAAA,EAAA,KAAA,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBADF,EAAA,OAAM,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,kBAIL,EAAA,OAAA,UAAA,mBAON,GAAA,EAAA,EAAA,YAAA,CALC,sBAAqB,EAAA,kBACrB,gBAAe,EAAA,aACf,MAAO,EAAA,cACP,UAAS,EAAA,qBACF,EAAA,mBAAkB,CAAA,KAAA,GAAA,CAAA,sBAAA,gBAAA,QAAA,UAAA,CAAA"}
+{"version":3,"file":"input-group.cjs","names":[],"sources":["../../../components/InputGroup/InputGroup.vue"],"sourcesContent":["<template>\n  <fieldset\n    class=\"d-input-group__fieldset\"\n    :data-qa=\"dataQaGroup\"\n    :aria-invalid=\"ariaInvalid\"\n    :aria-describedby=\"ariaDescribedBy\"\n  >\n    <dt-text\n      v-if=\"hasSlotContent($slots.legend) || legend\"\n      kind=\"label\"\n      as=\"legend\"\n      tone=\"secondary\"\n      :class=\"['d-input-group__legend-text', 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    </dt-text>\n    <!-- @slot slot for Input Group Components -->\n    <slot />\n    <dt-validation-messages\n      v-bind=\"messagesChildProps\"\n      :id=\"messagesId\"\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      :data-qa=\"dataQaGroupMessages\"\n    />\n  </fieldset>\n</template>\n\n<script>\nimport { InputGroupMixin } from '@/common/mixins/input_group';\nimport { DtValidationMessages } from '../ValidationMessages';\nimport { DtText } from '@/components/Text';\nimport { hasSlotContent, getUniqueString, getValidationState } from '@/common/utils';\nimport { VALIDATION_MESSAGE_TYPES } from '@/common/constants';\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, DtText },\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  data () {\n    return {\n      internalValue: this.value,\n      hasSlotContent,\n      messagesId: getUniqueString(),\n    };\n  },\n\n  computed: {\n    ariaInvalid () {\n      return getValidationState(this.formattedMessages) === VALIDATION_MESSAGE_TYPES.CRITICAL ? 'true' : undefined;\n    },\n\n    ariaDescribedBy () {\n      return this.showMessages && this.formattedMessages.length > 0 ? this.messagesId : undefined;\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: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.value = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `input-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"mappings":"2bA+CA,IAAK,EAAU,CACb,KAAM,eAEN,WAAY,CAAE,qBAAA,EAAA,QAAsB,OAAA,EAAA,QAAQ,CAE5C,OAAQ,CAAC,EAAA,gBAAgB,CAEzB,MAAO,CAIL,YAAa,CACX,KAAM,OACN,QAAS,cACV,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,qBACV,CAKD,oBAAqB,CACnB,KAAM,OACN,QAAS,uBACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,cAAe,KAAK,MACpB,eAAA,EAAA,eACA,WAAY,EAAA,iBAAiB,CAC9B,EAGH,SAAU,CACR,aAAe,CACb,OAAO,EAAA,mBAAmB,KAAK,kBAAiB,GAAM,EAAA,yBAAyB,SAAW,OAAS,IAAA,IAGrG,iBAAmB,CACjB,OAAO,KAAK,cAAgB,KAAK,kBAAkB,OAAS,EAAI,KAAK,WAAa,IAAA,IAErF,CAED,MAAO,CACL,MAAO,EAAU,CACf,KAAK,cAAgB,GAQvB,cAAe,CACb,UAAW,GACX,QAAS,EAAkB,CACzB,KAAK,WAAW,MAAQ,GAE3B,CACF,CAED,QAAS,CACP,cAAe,EAAM,EAAO,CAC1B,MAAO,uBAAuB,EAAK,GAAG,EAAM,GAAG,KAAK,MAEvD,CACF,qNA1FY,WAAA,CA7BT,MAAM,0BACL,UAAS,EAAA,YACT,eAAc,EAAA,YACd,mBAAkB,EAAA,kBAGX,EAAA,eAAe,EAAA,OAAO,OAAM,EAAK,EAAA,SAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAY/B,GAAA,EAAA,EAAA,YAAA,OAXR,KAAK,QACL,GAAG,SACH,KAAK,YACJ,MAAK,CAAA,6BAAiC,EAAA,YAAW,EAC1C,EAAA,iBAAgB,CACvB,UAAS,EAAA,kBAAiB,CAAA,CAAA,2BAKpB,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,SAAA,EAAA,KAAA,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBADF,EAAA,OAAM,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,gFAIL,EAAA,OAAA,UAAA,mBAQN,GAAA,EAAA,EAAA,YAAA,EANQ,mBAAkB,CACzB,GAAI,EAAA,WACJ,sBAAqB,EAAA,kBACrB,gBAAe,EAAA,aACf,MAAO,EAAA,cACP,UAAS,EAAA"}

package/dist/lib/input-group/input-group.js

@@ -1,14 +1,18 @@
-import { hasSlotContent as e } from "../../common/utils/index.js";
-import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import n from "../validation-messages/validation-messages.js";
-import { InputGroupMixin as r } from "../../common/mixins/input-group.js";
-import { createCommentVNode as i, createElementBlock as a, createTextVNode as o, createVNode as s, mergeProps as c, openBlock as l, renderSlot as u, resolveComponent as d, toDisplayString as f } from "vue";
-//#region components/input_group/input_group.vue
-var p = {
-	compatConfig: { MODE: 3 },
+import { VALIDATION_MESSAGE_TYPES as e } from "../../common/constants/index.js";
+import { getUniqueString as t, getValidationState as n, hasSlotContent as r } from "../../common/utils/index.js";
+import { t as i } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import a from "../validation-messages/validation-messages.js";
+import { InputGroupMixin as o } from "../../common/mixins/input-group.js";
+import s from "../text/text.js";
+import { createBlock as c, createCommentVNode as l, createElementBlock as u, createTextVNode as d, createVNode as f, mergeProps as p, openBlock as m, renderSlot as h, resolveComponent as g, toDisplayString as _, withCtx as v } from "vue";
+//#region components/InputGroup/InputGroup.vue
+var y = {
 	name: "DtInputGroup",
-	components: { DtValidationMessages: n },
-	mixins: [r],
+	components: {
+		DtValidationMessages: a,
+		DtText: s
+	},
+	mixins: [o],
 	props: {
 		dataQaGroup: {
 			type: String,
@@ -26,9 +30,18 @@ var p = {
 	data() {
 		return {
 			internalValue: this.value,
-			hasSlotContent: e
+			hasSlotContent: r,
+			messagesId: t()
 		};
 	},
+	computed: {
+		ariaInvalid() {
+			return n(this.formattedMessages) === e.CRITICAL ? "true" : void 0;
+		},
+		ariaDescribedBy() {
+			return this.showMessages && this.formattedMessages.length > 0 ? this.messagesId : void 0;
+		}
+	},
 	watch: {
 		value(e) {
 			this.internalValue = e;
@@ -43,33 +56,47 @@ var p = {
 	methods: { getMessageKey(e, t) {
 		return `input-group-message-${e}-${t}-${this.id}`;
 	} }
-}, m = ["data-qa"], h = ["data-qa"];
-function g(e, t, n, r, p, g) {
-	let _ = d("dt-validation-messages");
-	return l(), a("fieldset", {
+}, b = [
+	"data-qa",
+	"aria-invalid",
+	"aria-describedby"
+];
+function x(e, t, n, r, i, a) {
+	let o = g("dt-text"), s = g("dt-validation-messages");
+	return m(), u("fieldset", {
 		class: "d-input-group__fieldset",
-		"data-qa": n.dataQaGroup
+		"data-qa": n.dataQaGroup,
+		"aria-invalid": a.ariaInvalid,
+		"aria-describedby": a.ariaDescribedBy
 	}, [
-		p.hasSlotContent(e.$slots.legend) || e.legend ? (l(), a("legend", c({
+		i.hasSlotContent(e.$slots.legend) || e.legend ? (m(), c(o, p({
 			key: 0,
-			class: ["d-label", e.legendClass]
-		}, e.legendChildProps, { "data-qa": n.dataQaGroupLegend }), [u(e.$slots, "legend", {}, () => [o(f(e.legend), 1)])], 16, h)) : i("", !0),
-		u(e.$slots, "default"),
-		s(_, c({
+			kind: "label",
+			as: "legend",
+			tone: "secondary",
+			class: ["d-input-group__legend-text", e.legendClass]
+		}, e.legendChildProps, { "data-qa": n.dataQaGroupLegend }), {
+			default: v(() => [h(e.$slots, "legend", {}, () => [d(_(e.legend), 1)])]),
+			_: 3
+		}, 16, ["class", "data-qa"])) : l("", !0),
+		h(e.$slots, "default"),
+		f(s, p(e.messagesChildProps, {
+			id: i.messagesId,
 			"validation-messages": e.formattedMessages,
 			"show-messages": e.showMessages,
 			class: e.messagesClass,
 			"data-qa": n.dataQaGroupMessages
-		}, e.messagesChildProps), null, 16, [
+		}), null, 16, [
+			"id",
 			"validation-messages",
 			"show-messages",
 			"class",
 			"data-qa"
 		])
-	], 8, m);
+	], 8, b);
 }
-var _ = /* @__PURE__ */ t(p, [["render", g]]);
+var S = /* @__PURE__ */ i(y, [["render", x]]);
 //#endregion
-export { _ as default };
+export { S as default };
 
 //# sourceMappingURL=input-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","names":[],"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=\"hasSlotContent($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';\nimport { hasSlotContent } from '@/common/utils';\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  compatConfig: { MODE: 3 },\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  data () {\n    return {\n      internalValue: this.value,\n      hasSlotContent,\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: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.value = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `input-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;AAuCA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY,EAAE,sBAAA,GAAsB;CAEpC,QAAQ,CAAC,EAAgB;CAEzB,OAAO;EAIL,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EAKD,qBAAqB;GACnB,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO;GACL,eAAe,KAAK;GACpB;GACD;;CAGH,OAAO;EACL,MAAO,GAAU;AACf,QAAK,gBAAgB;;EAQvB,eAAe;GACb,WAAW;GACX,QAAS,GAAkB;AACzB,SAAK,WAAW,QAAQ;;GAE3B;EACF;CAED,SAAS,EACP,cAAe,GAAM,GAAO;AAC1B,SAAO,uBAAuB,EAAK,GAAG,EAAM,GAAG,KAAK;IAEvD;CACF;;;aAtGC,EAwBW,YAAA;EAvBT,OAAM;EACL,WAAS,EAAA;;EAGF,EAAA,eAAe,EAAA,OAAO,OAAM,IAAK,EAAA,UAAA,GAAA,EADzC,EAUS,UAVT,EAUS;;GARN,OAAK,CAAA,WAAc,EAAA,YAAW;KACvB,EAAA,kBAAgB,EACvB,WAAS,EAAA,mBAAiB,CAAA,EAAA,CAG3B,EAEO,EAAA,QAAA,UAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,OAAM,EAAA,EAAA,CAAA,CAAA,CAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,GAAA;EAIb,EAAQ,EAAA,QAAA,UAAA;EACR,EAME,GANF,EAME;GALC,uBAAqB,EAAA;GACrB,iBAAe,EAAA;GACf,OAAO,EAAA;GACP,WAAS,EAAA;KACF,EAAA,mBAAkB,EAAA,MAAA,IAAA;GAAA;GAAA;GAAA;GAAA;GAAA,CAAA"}
+{"version":3,"file":"input-group.js","names":[],"sources":["../../../components/InputGroup/InputGroup.vue"],"sourcesContent":["<template>\n  <fieldset\n    class=\"d-input-group__fieldset\"\n    :data-qa=\"dataQaGroup\"\n    :aria-invalid=\"ariaInvalid\"\n    :aria-describedby=\"ariaDescribedBy\"\n  >\n    <dt-text\n      v-if=\"hasSlotContent($slots.legend) || legend\"\n      kind=\"label\"\n      as=\"legend\"\n      tone=\"secondary\"\n      :class=\"['d-input-group__legend-text', 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    </dt-text>\n    <!-- @slot slot for Input Group Components -->\n    <slot />\n    <dt-validation-messages\n      v-bind=\"messagesChildProps\"\n      :id=\"messagesId\"\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      :data-qa=\"dataQaGroupMessages\"\n    />\n  </fieldset>\n</template>\n\n<script>\nimport { InputGroupMixin } from '@/common/mixins/input_group';\nimport { DtValidationMessages } from '../ValidationMessages';\nimport { DtText } from '@/components/Text';\nimport { hasSlotContent, getUniqueString, getValidationState } from '@/common/utils';\nimport { VALIDATION_MESSAGE_TYPES } from '@/common/constants';\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, DtText },\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  data () {\n    return {\n      internalValue: this.value,\n      hasSlotContent,\n      messagesId: getUniqueString(),\n    };\n  },\n\n  computed: {\n    ariaInvalid () {\n      return getValidationState(this.formattedMessages) === VALIDATION_MESSAGE_TYPES.CRITICAL ? 'true' : undefined;\n    },\n\n    ariaDescribedBy () {\n      return this.showMessages && this.formattedMessages.length > 0 ? this.messagesId : undefined;\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: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.value = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `input-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;;;;AA+CA,IAAK,IAAU;CACb,MAAM;CAEN,YAAY;EAAE,sBAAA;EAAsB,QAAA;EAAQ;CAE5C,QAAQ,CAAC,EAAgB;CAEzB,OAAO;EAIL,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,mBAAmB;GACjB,MAAM;GACN,SAAS;GACV;EAKD,qBAAqB;GACnB,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO;GACL,eAAe,KAAK;GACpB;GACA,YAAY,GAAiB;GAC9B;;CAGH,UAAU;EACR,cAAe;AACb,UAAO,EAAmB,KAAK,kBAAiB,KAAM,EAAyB,WAAW,SAAS,KAAA;;EAGrG,kBAAmB;AACjB,UAAO,KAAK,gBAAgB,KAAK,kBAAkB,SAAS,IAAI,KAAK,aAAa,KAAA;;EAErF;CAED,OAAO;EACL,MAAO,GAAU;AACf,QAAK,gBAAgB;;EAQvB,eAAe;GACb,WAAW;GACX,QAAS,GAAkB;AACzB,SAAK,WAAW,QAAQ;;GAE3B;EACF;CAED,SAAS,EACP,cAAe,GAAM,GAAO;AAC1B,SAAO,uBAAuB,EAAK,GAAG,EAAM,GAAG,KAAK;IAEvD;CACF;;;;;;;aAxHC,EA8BW,YAAA;EA7BT,OAAM;EACL,WAAS,EAAA;EACT,gBAAc,EAAA;EACd,oBAAkB,EAAA;;EAGX,EAAA,eAAe,EAAA,OAAO,OAAM,IAAK,EAAA,UAAA,GAAA,EADzC,EAaU,GAbV,EAaU;;GAXR,MAAK;GACL,IAAG;GACH,MAAK;GACJ,OAAK,CAAA,8BAAiC,EAAA,YAAW;KAC1C,EAAA,kBAAgB,EACvB,WAAS,EAAA,mBAAiB,CAAA,EAAA;oBAKpB,CAFP,EAEO,EAAA,QAAA,UAAA,EAAA,QAAA,CAAA,EAAA,EADF,EAAA,OAAM,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA;;;EAIb,EAAQ,EAAA,QAAA,UAAA;EACR,EAOE,GAPF,EAOE,EANQ,oBAAkB;GACzB,IAAI,EAAA;GACJ,uBAAqB,EAAA;GACrB,iBAAe,EAAA;GACf,OAAO,EAAA;GACP,WAAS,EAAA"}

package/dist/lib/item-layout/item-layout.cjs

@@ -1,4 +1,4 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`);let n=require(`vue`);var r={compatConfig:{MODE:3},name:`DtItemLayout`,props:{as:{type:String,default:`div`},unstyled:{type:Boolean,default:!1},leftClass:{type:String,default:``},contentClass:{type:String,default:``},titleClass:{type:String,default:``},subtitleClass:{type:String,default:``},bottomClass:{type:String,default:``},rightClass:{type:String,default:``},selectedClass:{type:String,default:``}},methods:{dynamicGridTemplateColumns(){return`
-        grid-template-columns: ${this.$slots.left?`auto`:``} 1fr ${this.$slots.right?`auto`:``} ${this.$slots.selected?`auto`:``};
-      `},hasSlotContent:e.hasSlotContent}};function i(e,t,r,i,a,o){return(0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(r.as),{class:(0,n.normalizeClass)(r.unstyled?`d-item-layout--custom`:`d-item-layout`),style:(0,n.normalizeStyle)(r.unstyled&&o.dynamicGridTemplateColumns())},{default:(0,n.withCtx)(()=>[o.hasSlotContent(e.$slots.left)?((0,n.openBlock)(),(0,n.createElementBlock)(`section`,{key:0,"data-qa":`dt-item-layout-left-wrapper`,class:(0,n.normalizeClass)([r.leftClass,`d-item-layout__left`])},[(0,n.renderSlot)(e.$slots,`left`)],2)):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`section`,{"data-qa":`dt-item-layout-content-wrapper`,class:(0,n.normalizeClass)([r.contentClass,`d-item-layout__content`])},[o.hasSlotContent(e.$slots.default)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{key:0,"data-qa":`dt-item-layout-title-wrapper`,class:(0,n.normalizeClass)([r.titleClass,`d-item-layout__title`])},[(0,n.renderSlot)(e.$slots,`default`)],2)):(0,n.createCommentVNode)(``,!0),o.hasSlotContent(e.$slots.subtitle)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{key:1,"data-qa":`dt-item-layout-subtitle-wrapper`,class:(0,n.normalizeClass)([r.subtitleClass,`d-item-layout--subtitle`,{"d-item-layout--subtitle--with-title":o.hasSlotContent(e.$slots.default)}])},[(0,n.renderSlot)(e.$slots,`subtitle`)],2)):(0,n.createCommentVNode)(``,!0),o.hasSlotContent(e.$slots.bottom)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{key:2,"data-qa":`dt-item-layout-bottom-wrapper`,class:(0,n.normalizeClass)([r.bottomClass,`d-item-layout__bottom`])},[(0,n.renderSlot)(e.$slots,`bottom`)],2)):(0,n.createCommentVNode)(``,!0)],2),o.hasSlotContent(e.$slots.right)?((0,n.openBlock)(),(0,n.createElementBlock)(`section`,{key:1,"data-qa":`dt-item-layout-right-wrapper`,class:(0,n.normalizeClass)([r.rightClass,`d-item-layout__right`])},[(0,n.renderSlot)(e.$slots,`right`)],2)):(0,n.createCommentVNode)(``,!0),o.hasSlotContent(e.$slots.selected)?((0,n.openBlock)(),(0,n.createElementBlock)(`section`,{key:2,"data-qa":`dt-item-layout-selected-wrapper`,class:(0,n.normalizeClass)([r.selectedClass,`d-item-layout__selected`])},[(0,n.renderSlot)(e.$slots,`selected`)],2)):(0,n.createCommentVNode)(``,!0)]),_:3},8,[`class`,`style`])}var a=t.t(r,[[`render`,i]]);exports.default=a;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`);let n=require(`vue`);var r={name:`DtItemLayout`,props:{as:{type:String,default:`div`},unstyled:{type:Boolean,default:!1},startClass:{type:[String,Array,Object],default:``},leftClass:{type:[String,Array,Object],default:void 0},contentClass:{type:[String,Array,Object],default:``},titleClass:{type:[String,Array,Object],default:``},subtitleClass:{type:[String,Array,Object],default:``},blockEndClass:{type:[String,Array,Object],default:``},bottomClass:{type:[String,Array,Object],default:void 0},endClass:{type:[String,Array,Object],default:``},rightClass:{type:[String,Array,Object],default:void 0},selectedClass:{type:[String,Array,Object],default:``}},computed:{resolvedStartClass(){return this.leftClass??this.startClass},resolvedEndClass(){return this.rightClass??this.endClass},resolvedBlockEndClass(){return this.bottomClass??this.blockEndClass}},methods:{dynamicGridTemplateColumns(){return`
+        grid-template-columns: ${this.$slots.start||this.$slots.left?`auto`:``} 1fr ${this.$slots.end||this.$slots.right?`auto`:``} ${this.$slots.selected?`auto`:``};
+      `},hasSlotContent:e.hasSlotContent}};function i(e,t,r,i,a,o){return(0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(r.as),{class:(0,n.normalizeClass)(r.unstyled?`d-item-layout--custom`:`d-item-layout`),style:(0,n.normalizeStyle)(r.unstyled&&o.dynamicGridTemplateColumns())},{default:(0,n.withCtx)(()=>[o.hasSlotContent(e.$slots.start)||o.hasSlotContent(e.$slots.left)?((0,n.openBlock)(),(0,n.createElementBlock)(`section`,{key:0,"data-qa":`dt-item-layout-left-wrapper`,class:(0,n.normalizeClass)([o.resolvedStartClass,`d-item-layout__left`])},[e.$slots.start?(0,n.renderSlot)(e.$slots,`start`,{key:0}):(0,n.renderSlot)(e.$slots,`left`,{key:1})],2)):(0,n.createCommentVNode)(``,!0),(0,n.createElementVNode)(`section`,{"data-qa":`dt-item-layout-content-wrapper`,class:(0,n.normalizeClass)([r.contentClass,`d-item-layout__content`])},[o.hasSlotContent(e.$slots.default)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{key:0,"data-qa":`dt-item-layout-title-wrapper`,class:(0,n.normalizeClass)([r.titleClass,`d-item-layout__title`])},[(0,n.renderSlot)(e.$slots,`default`)],2)):(0,n.createCommentVNode)(``,!0),o.hasSlotContent(e.$slots.subtitle)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{key:1,"data-qa":`dt-item-layout-subtitle-wrapper`,class:(0,n.normalizeClass)([r.subtitleClass,`d-item-layout--subtitle`,{"d-item-layout--subtitle--with-title":o.hasSlotContent(e.$slots.default)}])},[(0,n.renderSlot)(e.$slots,`subtitle`)],2)):(0,n.createCommentVNode)(``,!0),o.hasSlotContent(e.$slots.blockEnd)||o.hasSlotContent(e.$slots.bottom)?((0,n.openBlock)(),(0,n.createElementBlock)(`div`,{key:2,"data-qa":`dt-item-layout-bottom-wrapper`,class:(0,n.normalizeClass)([o.resolvedBlockEndClass,`d-item-layout__bottom`])},[e.$slots.blockEnd?(0,n.renderSlot)(e.$slots,`blockEnd`,{key:0}):(0,n.renderSlot)(e.$slots,`bottom`,{key:1})],2)):(0,n.createCommentVNode)(``,!0)],2),o.hasSlotContent(e.$slots.end)||o.hasSlotContent(e.$slots.right)?((0,n.openBlock)(),(0,n.createElementBlock)(`section`,{key:1,"data-qa":`dt-item-layout-right-wrapper`,class:(0,n.normalizeClass)([o.resolvedEndClass,`d-item-layout__right`])},[e.$slots.end?(0,n.renderSlot)(e.$slots,`end`,{key:0}):(0,n.renderSlot)(e.$slots,`right`,{key:1})],2)):(0,n.createCommentVNode)(``,!0),o.hasSlotContent(e.$slots.selected)?((0,n.openBlock)(),(0,n.createElementBlock)(`section`,{key:2,"data-qa":`dt-item-layout-selected-wrapper`,class:(0,n.normalizeClass)([r.selectedClass,`d-item-layout__selected`])},[(0,n.renderSlot)(e.$slots,`selected`)],2)):(0,n.createCommentVNode)(``,!0)]),_:3},8,[`class`,`style`])}var a=t.t(r,[[`render`,i]]);exports.default=a;
 //# sourceMappingURL=item-layout.cjs.map

package/dist/lib/item-layout/item-layout.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"item-layout.cjs","names":[],"sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n    :style=\"unstyled && dynamicGridTemplateColumns()\"\n  >\n    <section\n      v-if=\"hasSlotContent($slots.left)\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      :class=\"[leftClass, 'd-item-layout__left']\"\n    >\n      <!-- @slot Slot for left content -->\n      <slot name=\"left\" />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      :class=\"[contentClass, 'd-item-layout__content']\"\n    >\n      <div\n        v-if=\"hasSlotContent($slots.default)\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        :class=\"[titleClass, 'd-item-layout__title']\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.subtitle)\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"[\n          subtitleClass,\n          'd-item-layout--subtitle',\n          { 'd-item-layout--subtitle--with-title': hasSlotContent($slots.default) },\n        ]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.bottom)\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        :class=\"[bottomClass, 'd-item-layout__bottom']\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot name=\"bottom\" />\n      </div>\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.right)\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      :class=\"[rightClass, 'd-item-layout__right']\"\n    >\n      <!-- @slot Slot for right content -->\n      <slot name=\"right\" />\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.selected)\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      :class=\"[selectedClass, 'd-item-layout__selected']\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Set the class for the left section.\n     */\n    leftClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the content section.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the title section.\n     */\n    titleClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the subtitle section.\n     */\n    subtitleClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the bottom section.\n     */\n    bottomClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the right section.\n     */\n    rightClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the selected section.\n     */\n    selectedClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  methods: {\n    /**\n     * Generate dynamic grid template columns\n     */\n    dynamicGridTemplateColumns () {\n      const leftContentColumn = this.$slots.left ? 'auto' : '';\n      const rightContentColumn = this.$slots.right ? 'auto' : '';\n      const selectedContentColumn = this.$slots.selected ? 'auto' : '';\n\n      return `\n        grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};\n      `;\n    },\n\n    hasSlotContent,\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"item-layout.cjs","names":[],"sources":["../../../components/ItemLayout/ItemLayout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n    :style=\"unstyled && dynamicGridTemplateColumns()\"\n  >\n    <section\n      v-if=\"hasSlotContent($slots.start) || hasSlotContent($slots.left)\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      :class=\"[resolvedStartClass, 'd-item-layout__left']\"\n    >\n      <!-- @slot Slot for start content -->\n      <slot\n        v-if=\"$slots.start\"\n        name=\"start\"\n      />\n      <!-- @slot @deprecated Use start -->\n      <slot\n        v-else\n        name=\"left\"\n      />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      :class=\"[contentClass, 'd-item-layout__content']\"\n    >\n      <div\n        v-if=\"hasSlotContent($slots.default)\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        :class=\"[titleClass, 'd-item-layout__title']\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.subtitle)\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"[\n          subtitleClass,\n          'd-item-layout--subtitle',\n          { 'd-item-layout--subtitle--with-title': hasSlotContent($slots.default) },\n        ]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.blockEnd) || hasSlotContent($slots.bottom)\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        :class=\"[resolvedBlockEndClass, 'd-item-layout__bottom']\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot\n          v-if=\"$slots.blockEnd\"\n          name=\"blockEnd\"\n        />\n        <!-- @slot @deprecated Use blockEnd -->\n        <slot\n          v-else\n          name=\"bottom\"\n        />\n      </div>\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.end) || hasSlotContent($slots.right)\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      :class=\"[resolvedEndClass, 'd-item-layout__right']\"\n    >\n      <!-- @slot Slot for end content -->\n      <slot\n        v-if=\"$slots.end\"\n        name=\"end\"\n      />\n      <!-- @slot @deprecated Use end -->\n      <slot\n        v-else\n        name=\"right\"\n      />\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.selected)\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      :class=\"[selectedClass, 'd-item-layout__selected']\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Set the class for the start section.\n     */\n    startClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set the class for the start section.\n     * @deprecated Use startClass\n     */\n    leftClass: {\n      type: [String, Array, Object],\n      default: undefined,\n    },\n\n    /**\n     * Set the class for the content section.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set the class for the title section.\n     */\n    titleClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set the class for the subtitle section.\n     */\n    subtitleClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set the class for the block-end section (aka bottom).\n     */\n    blockEndClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set the class for the block-end section (aka bottom).\n     * @deprecated Use blockEndClass\n     */\n    bottomClass: {\n      type: [String, Array, Object],\n      default: undefined,\n    },\n\n    /**\n     * Set the class for the end section.\n     */\n    endClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set the class for the end section.\n     * @deprecated Use endClass\n     */\n    rightClass: {\n      type: [String, Array, Object],\n      default: undefined,\n    },\n\n    /**\n     * Set the class for the selected section.\n     */\n    selectedClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  computed: {\n    resolvedStartClass () {\n      return this.leftClass ?? this.startClass;\n    },\n\n    resolvedEndClass () {\n      return this.rightClass ?? this.endClass;\n    },\n\n    resolvedBlockEndClass () {\n      return this.bottomClass ?? this.blockEndClass;\n    },\n  },\n\n  methods: {\n    /**\n     * Generate dynamic grid template columns\n     */\n    dynamicGridTemplateColumns () {\n      const leftContentColumn = (this.$slots.start || this.$slots.left) ? 'auto' : '';\n      const rightContentColumn = (this.$slots.end || this.$slots.right) ? 'auto' : '';\n      const selectedContentColumn = this.$slots.selected ? 'auto' : '';\n\n      return `\n        grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};\n      `;\n    },\n\n    hasSlotContent,\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/item-layout/item-layout.js

@@ -1,9 +1,8 @@
 import { hasSlotContent as e } from "../../common/utils/index.js";
 import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
 import { createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, normalizeClass as o, normalizeStyle as s, openBlock as c, renderSlot as l, resolveDynamicComponent as u, withCtx as d } from "vue";
-//#region components/item_layout/item_layout.vue
+//#region components/ItemLayout/ItemLayout.vue
 var f = {
-	compatConfig: { MODE: 3 },
 	name: "DtItemLayout",
 	props: {
 		as: {
@@ -14,39 +13,102 @@ var f = {
 			type: Boolean,
 			default: !1
 		},
-		leftClass: {
-			type: String,
+		startClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
 			default: ""
 		},
+		leftClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: void 0
+		},
 		contentClass: {
-			type: String,
+			type: [
+				String,
+				Array,
+				Object
+			],
 			default: ""
 		},
 		titleClass: {
-			type: String,
+			type: [
+				String,
+				Array,
+				Object
+			],
 			default: ""
 		},
 		subtitleClass: {
-			type: String,
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: ""
+		},
+		blockEndClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
 			default: ""
 		},
 		bottomClass: {
-			type: String,
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: void 0
+		},
+		endClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
 			default: ""
 		},
 		rightClass: {
-			type: String,
-			default: ""
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: void 0
 		},
 		selectedClass: {
-			type: String,
+			type: [
+				String,
+				Array,
+				Object
+			],
 			default: ""
 		}
 	},
+	computed: {
+		resolvedStartClass() {
+			return this.leftClass ?? this.startClass;
+		},
+		resolvedEndClass() {
+			return this.rightClass ?? this.endClass;
+		},
+		resolvedBlockEndClass() {
+			return this.bottomClass ?? this.blockEndClass;
+		}
+	},
 	methods: {
 		dynamicGridTemplateColumns() {
 			return `
-        grid-template-columns: ${this.$slots.left ? "auto" : ""} 1fr ${this.$slots.right ? "auto" : ""} ${this.$slots.selected ? "auto" : ""};
+        grid-template-columns: ${this.$slots.start || this.$slots.left ? "auto" : ""} 1fr ${this.$slots.end || this.$slots.right ? "auto" : ""} ${this.$slots.selected ? "auto" : ""};
       `;
 		},
 		hasSlotContent: e
@@ -58,11 +120,11 @@ function p(e, t, f, p, m, h) {
 		style: s(f.unstyled && h.dynamicGridTemplateColumns())
 	}, {
 		default: d(() => [
-			h.hasSlotContent(e.$slots.left) ? (c(), i("section", {
+			h.hasSlotContent(e.$slots.start) || h.hasSlotContent(e.$slots.left) ? (c(), i("section", {
 				key: 0,
 				"data-qa": "dt-item-layout-left-wrapper",
-				class: o([f.leftClass, "d-item-layout__left"])
-			}, [l(e.$slots, "left")], 2)) : r("", !0),
+				class: o([h.resolvedStartClass, "d-item-layout__left"])
+			}, [e.$slots.start ? l(e.$slots, "start", { key: 0 }) : l(e.$slots, "left", { key: 1 })], 2)) : r("", !0),
 			a("section", {
 				"data-qa": "dt-item-layout-content-wrapper",
 				class: o([f.contentClass, "d-item-layout__content"])
@@ -81,17 +143,17 @@ function p(e, t, f, p, m, h) {
 						{ "d-item-layout--subtitle--with-title": h.hasSlotContent(e.$slots.default) }
 					])
 				}, [l(e.$slots, "subtitle")], 2)) : r("", !0),
-				h.hasSlotContent(e.$slots.bottom) ? (c(), i("div", {
+				h.hasSlotContent(e.$slots.blockEnd) || h.hasSlotContent(e.$slots.bottom) ? (c(), i("div", {
 					key: 2,
 					"data-qa": "dt-item-layout-bottom-wrapper",
-					class: o([f.bottomClass, "d-item-layout__bottom"])
-				}, [l(e.$slots, "bottom")], 2)) : r("", !0)
+					class: o([h.resolvedBlockEndClass, "d-item-layout__bottom"])
+				}, [e.$slots.blockEnd ? l(e.$slots, "blockEnd", { key: 0 }) : l(e.$slots, "bottom", { key: 1 })], 2)) : r("", !0)
 			], 2),
-			h.hasSlotContent(e.$slots.right) ? (c(), i("section", {
+			h.hasSlotContent(e.$slots.end) || h.hasSlotContent(e.$slots.right) ? (c(), i("section", {
 				key: 1,
 				"data-qa": "dt-item-layout-right-wrapper",
-				class: o([f.rightClass, "d-item-layout__right"])
-			}, [l(e.$slots, "right")], 2)) : r("", !0),
+				class: o([h.resolvedEndClass, "d-item-layout__right"])
+			}, [e.$slots.end ? l(e.$slots, "end", { key: 0 }) : l(e.$slots, "right", { key: 1 })], 2)) : r("", !0),
 			h.hasSlotContent(e.$slots.selected) ? (c(), i("section", {
 				key: 2,
 				"data-qa": "dt-item-layout-selected-wrapper",

package/dist/lib/item-layout/item-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-layout.js","names":[],"sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n    :style=\"unstyled && dynamicGridTemplateColumns()\"\n  >\n    <section\n      v-if=\"hasSlotContent($slots.left)\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      :class=\"[leftClass, 'd-item-layout__left']\"\n    >\n      <!-- @slot Slot for left content -->\n      <slot name=\"left\" />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      :class=\"[contentClass, 'd-item-layout__content']\"\n    >\n      <div\n        v-if=\"hasSlotContent($slots.default)\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        :class=\"[titleClass, 'd-item-layout__title']\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.subtitle)\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"[\n          subtitleClass,\n          'd-item-layout--subtitle',\n          { 'd-item-layout--subtitle--with-title': hasSlotContent($slots.default) },\n        ]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.bottom)\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        :class=\"[bottomClass, 'd-item-layout__bottom']\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot name=\"bottom\" />\n      </div>\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.right)\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      :class=\"[rightClass, 'd-item-layout__right']\"\n    >\n      <!-- @slot Slot for right content -->\n      <slot name=\"right\" />\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.selected)\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      :class=\"[selectedClass, 'd-item-layout__selected']\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Set the class for the left section.\n     */\n    leftClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the content section.\n     */\n    contentClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the title section.\n     */\n    titleClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the subtitle section.\n     */\n    subtitleClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the bottom section.\n     */\n    bottomClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the right section.\n     */\n    rightClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the selected section.\n     */\n    selectedClass: {\n      type: String,\n      default: '',\n    },\n  },\n\n  methods: {\n    /**\n     * Generate dynamic grid template columns\n     */\n    dynamicGridTemplateColumns () {\n      const leftContentColumn = this.$slots.left ? 'auto' : '';\n      const rightContentColumn = this.$slots.right ? 'auto' : '';\n      const selectedContentColumn = this.$slots.selected ? 'auto' : '';\n\n      return `\n        grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};\n      `;\n    },\n\n    hasSlotContent,\n  },\n};\n</script>\n"],"mappings":";;;;AA0EA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CACN,OAAO;EAIL,IAAI;GACF,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;GACN,SAAS;GACV;EAKD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAKD,eAAe;GACb,MAAM;GACN,SAAS;GACV;EAKD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAKD,eAAe;GACb,MAAM;GACN,SAAS;GACV;EACF;CAED,SAAS;EAIP,6BAA8B;AAK5B,UAAO;iCAJmB,KAAK,OAAO,OAAO,SAAS,GAKV,OAJjB,KAAK,OAAO,QAAQ,SAAS,GAIc,GAHxC,KAAK,OAAO,WAAW,SAAS,GAGkC;;;EAIlG;EACD;CACF;;aAvKC,EA8DY,EA7DL,EAAA,GAAE,EAAA;EACN,OAAK,EAAE,EAAA,WAAQ,0BAAA,gBAAA;EACf,OAAK,EAAE,EAAA,YAAY,EAAA,4BAA0B,CAAA;;mBASpC;GANF,EAAA,eAAe,EAAA,OAAO,KAAI,IAAA,GAAA,EADlC,EAOU,WAAA;;IALR,WAAQ;IACP,OAAK,EAAA,CAAG,EAAA,WAAS,sBAAA,CAAA;OAGlB,EAAoB,EAAA,QAAA,OAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAEtB,EAgCU,WAAA;IA/BR,WAAQ;IACP,OAAK,EAAA,CAAG,EAAA,cAAY,yBAAA,CAAA;;IAGb,EAAA,eAAe,EAAA,OAAO,QAAO,IAAA,GAAA,EADrC,EAOM,OAAA;;KALJ,WAAQ;KACP,OAAK,EAAA,CAAG,EAAA,YAAU,uBAAA,CAAA;QAGnB,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAGF,EAAA,eAAe,EAAA,OAAO,SAAQ,IAAA,GAAA,EADtC,EAWM,OAAA;;KATJ,WAAQ;KACP,OAAK,EAAA;MAAc,EAAA;;+CAAuG,EAAA,eAAe,EAAA,OAAO,QAAO,EAAA;;QAOxJ,EAAwB,EAAA,QAAA,WAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAGlB,EAAA,eAAe,EAAA,OAAO,OAAM,IAAA,GAAA,EADpC,EAOM,OAAA;;KALJ,WAAQ;KACP,OAAK,EAAA,CAAG,EAAA,aAAW,wBAAA,CAAA;QAGpB,EAAsB,EAAA,QAAA,SAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;;GAIlB,EAAA,eAAe,EAAA,OAAO,MAAK,IAAA,GAAA,EADnC,EAOU,WAAA;;IALR,WAAQ;IACP,OAAK,EAAA,CAAG,EAAA,YAAU,uBAAA,CAAA;OAGnB,EAAqB,EAAA,QAAA,QAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;GAGf,EAAA,eAAe,EAAA,OAAO,SAAQ,IAAA,GAAA,EADtC,EAOU,WAAA;;IALR,WAAQ;IACP,OAAK,EAAA,CAAG,EAAA,eAAa,0BAAA,CAAA;OAGtB,EAAwB,EAAA,QAAA,WAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}
+{"version":3,"file":"item-layout.js","names":[],"sources":["../../../components/ItemLayout/ItemLayout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n    :style=\"unstyled && dynamicGridTemplateColumns()\"\n  >\n    <section\n      v-if=\"hasSlotContent($slots.start) || hasSlotContent($slots.left)\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      :class=\"[resolvedStartClass, 'd-item-layout__left']\"\n    >\n      <!-- @slot Slot for start content -->\n      <slot\n        v-if=\"$slots.start\"\n        name=\"start\"\n      />\n      <!-- @slot @deprecated Use start -->\n      <slot\n        v-else\n        name=\"left\"\n      />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      :class=\"[contentClass, 'd-item-layout__content']\"\n    >\n      <div\n        v-if=\"hasSlotContent($slots.default)\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        :class=\"[titleClass, 'd-item-layout__title']\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.subtitle)\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"[\n          subtitleClass,\n          'd-item-layout--subtitle',\n          { 'd-item-layout--subtitle--with-title': hasSlotContent($slots.default) },\n        ]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.blockEnd) || hasSlotContent($slots.bottom)\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        :class=\"[resolvedBlockEndClass, 'd-item-layout__bottom']\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot\n          v-if=\"$slots.blockEnd\"\n          name=\"blockEnd\"\n        />\n        <!-- @slot @deprecated Use blockEnd -->\n        <slot\n          v-else\n          name=\"bottom\"\n        />\n      </div>\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.end) || hasSlotContent($slots.right)\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      :class=\"[resolvedEndClass, 'd-item-layout__right']\"\n    >\n      <!-- @slot Slot for end content -->\n      <slot\n        v-if=\"$slots.end\"\n        name=\"end\"\n      />\n      <!-- @slot @deprecated Use end -->\n      <slot\n        v-else\n        name=\"right\"\n      />\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.selected)\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      :class=\"[selectedClass, 'd-item-layout__selected']\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Set the class for the start section.\n     */\n    startClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set the class for the start section.\n     * @deprecated Use startClass\n     */\n    leftClass: {\n      type: [String, Array, Object],\n      default: undefined,\n    },\n\n    /**\n     * Set the class for the content section.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set the class for the title section.\n     */\n    titleClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set the class for the subtitle section.\n     */\n    subtitleClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set the class for the block-end section (aka bottom).\n     */\n    blockEndClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set the class for the block-end section (aka bottom).\n     * @deprecated Use blockEndClass\n     */\n    bottomClass: {\n      type: [String, Array, Object],\n      default: undefined,\n    },\n\n    /**\n     * Set the class for the end section.\n     */\n    endClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Set the class for the end section.\n     * @deprecated Use endClass\n     */\n    rightClass: {\n      type: [String, Array, Object],\n      default: undefined,\n    },\n\n    /**\n     * Set the class for the selected section.\n     */\n    selectedClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  computed: {\n    resolvedStartClass () {\n      return this.leftClass ?? this.startClass;\n    },\n\n    resolvedEndClass () {\n      return this.rightClass ?? this.endClass;\n    },\n\n    resolvedBlockEndClass () {\n      return this.bottomClass ?? this.blockEndClass;\n    },\n  },\n\n  methods: {\n    /**\n     * Generate dynamic grid template columns\n     */\n    dynamicGridTemplateColumns () {\n      const leftContentColumn = (this.$slots.start || this.$slots.left) ? 'auto' : '';\n      const rightContentColumn = (this.$slots.end || this.$slots.right) ? 'auto' : '';\n      const selectedContentColumn = this.$slots.selected ? 'auto' : '';\n\n      return `\n        grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};\n      `;\n    },\n\n    hasSlotContent,\n  },\n};\n</script>\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../../localization/index.cjs`),n=require(`../button/button.cjs`),r=require(`../card/card.cjs`),i=require(`../dropdown/dropdown.cjs`),a=require(`./ivr-node-constants.cjs`);let o=require(`vue`),s=require(`@dialpad/dialtone-icons/vue3`);var c=new Map([[a.IVR_NODE_PROMPT_MENU,s.DtIconKeypad],[a.IVR_NODE_PROMPT_COLLECT,s.DtIconDialer],[a.IVR_NODE_PROMPT_PLAY,s.DtIconVolume2],[a.IVR_NODE_EXPERT,s.DtIconExpertNode],[a.IVR_NODE_BRANCH,s.DtIconBranch],[a.IVR_NODE_GO_TO,s.DtIconCallMerge],[a.IVR_NODE_ASSIGN,s.DtIconChevronsRight],[a.IVR_NODE_CUSTOMER_DATA,s.DtIconListBullet],[a.IVR_NODE_TRANSFER,s.DtIconTransfer],[a.IVR_NODE_HANGUP,s.DtIconPhoneHangUp]]),l={compatConfig:{MODE:3},name:`DtRecipeIvrNode`,components:{DtCard:r.default,DtButton:n.default,DtDropdown:i.default,DtIconKeypad:s.DtIconKeypad,DtIconDialer:s.DtIconDialer,DtIconVolume2:s.DtIconVolume2,DtIconExpertNode:s.DtIconExpertNode,DtIconBranch:s.DtIconBranch,DtIconCallMerge:s.DtIconCallMerge,DtIconChevronsRight:s.DtIconChevronsRight,DtIconTransfer:s.DtIconTransfer,DtIconPhoneHangUp:s.DtIconPhoneHangUp,DtIconMoreVertical:s.DtIconMoreVertical,DtIconListBullet:s.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 t.DialtoneLocalization}},computed:{nodeListeners(){return{click:e=>this.$emit(`click`,e)}},nodeIcon(){return c.get(this.nodeType)},nodeClass(){let{normal:e,selected:t}=a.IVR_NODE_CLASS_MAPPING[this.nodeType];return this.isSelected?t:e},isGotoNode(){return this.nodeType===a.IVR_NODE_GO_TO},nodeAriaLabel(){let e=this.nodeType.toUpperCase();return this.i18n.$t(`DIALTONE_IVR_NODE_${e}_ARIA_LABEL`)},menuButtonAriaLabel(){return this.i18n.$t(`DIALTONE_IVR_NODE_MENU_BUTTON_ARIA_LABEL`)}},methods:{openMenu(){this.isOpen=!0}}},u={class:`d-recipe-ivr-node__header-left`},d={class:`d-recipe-ivr-node__label`,"data-qa":`ivr-node-label`},f={class:`d-recipe-ivr-node__dropdown-list`};function p(e,t,n,r,i,a){let s=(0,o.resolveComponent)(`dt-button`),c=(0,o.resolveComponent)(`dt-icon-more-vertical`),l=(0,o.resolveComponent)(`dt-dropdown`),p=(0,o.resolveComponent)(`dt-card`);return(0,o.openBlock)(),(0,o.createElementBlock)(`div`,(0,o.mergeProps)({class:[`d-recipe-ivr-node`,a.nodeClass]},(0,o.toHandlers)(a.nodeListeners,!0)),[n.dtmfKey?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:0,"data-qa":`dt-top-connector-dtmf`,class:(0,o.normalizeClass)([`d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf`,{"d-recipe-ivr-node__connector-dtmf--selected":n.isSelected}])},(0,o.toDisplayString)(n.dtmfKey),3)):(0,o.createCommentVNode)(``,!0),e.$slots.connector?(0,o.renderSlot)(e.$slots,`connector`,{key:1}):(0,o.createCommentVNode)(``,!0),!n.dtmfKey&&!e.$slots.connector?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:2,"data-qa":`dt-top-connector`,class:(0,o.normalizeClass)([`d-recipe-ivr-node__connector`,{"d-recipe-ivr-node__connector--selected":n.isSelected}])},null,2)):(0,o.createCommentVNode)(``,!0),(0,o.createVNode)(p,null,{header:(0,o.withCtx)(()=>[(0,o.createElementVNode)(`div`,u,[(0,o.createVNode)(s,{importance:`clear`,kind:`muted`,"data-qa":`dt-ivr-node-icon`,"aria-label":a.nodeAriaLabel,title:a.nodeAriaLabel},{icon:(0,o.withCtx)(()=>[((0,o.openBlock)(),(0,o.createBlock)((0,o.resolveDynamicComponent)(a.nodeIcon),{size:`200`,class:(0,o.normalizeClass)([``,{"d-recipe-ivr-node__goto-icon":a.isGotoNode}])},null,8,[`class`]))]),_:1},8,[`aria-label`,`title`]),(0,o.createElementVNode)(`p`,d,(0,o.toDisplayString)(n.nodeLabel),1)]),(0,o.createVNode)(l,{open:i.isOpen,"onUpdate:open":t[0]||(t[0]=e=>i.isOpen=e),placement:`bottom`},{anchor:(0,o.withCtx)(()=>[(0,o.createVNode)(s,{importance:`clear`,kind:`muted`,"aria-label":a.menuButtonAriaLabel,title:a.menuButtonAriaLabel,onClick:(0,o.withModifiers)(a.openMenu,[`stop`,`prevent`])},{icon:(0,o.withCtx)(()=>[(0,o.createVNode)(c,{size:`200`})]),_:1},8,[`aria-label`,`title`,`onClick`])]),list:(0,o.withCtx)(({close:t})=>[(0,o.createElementVNode)(`div`,f,[(0,o.renderSlot)(e.$slots,`menuItems`,{close:t})])]),_:3},8,[`open`])]),content:(0,o.withCtx)(()=>[(0,o.renderSlot)(e.$slots,`content`)]),_:3})],16)}var m=e.t(l,[[`render`,p]]);exports.default=m;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../../localization/index.cjs`),n=require(`../button/button.cjs`),r=require(`../card/card.cjs`),i=require(`../dropdown/dropdown.cjs`),a=require(`./ivr-node-constants.cjs`);let o=require(`vue`),s=require(`@dialpad/dialtone-icons/vue`);var c=new Map([[a.IVR_NODE_PROMPT_MENU,s.DtIconKeypad],[a.IVR_NODE_PROMPT_COLLECT,s.DtIconDialer],[a.IVR_NODE_PROMPT_PLAY,s.DtIconVolume2],[a.IVR_NODE_EXPERT,s.DtIconExpertNode],[a.IVR_NODE_BRANCH,s.DtIconBranch],[a.IVR_NODE_GO_TO,s.DtIconCallMerge],[a.IVR_NODE_ASSIGN,s.DtIconChevronsRight],[a.IVR_NODE_CUSTOMER_DATA,s.DtIconListBullet],[a.IVR_NODE_TRANSFER,s.DtIconTransfer],[a.IVR_NODE_HANGUP,s.DtIconPhoneHangUp]]),l={compatConfig:{MODE:3},name:`DtRecipeIvrNode`,components:{DtCard:r.default,DtButton:n.default,DtDropdown:i.default,DtIconKeypad:s.DtIconKeypad,DtIconDialer:s.DtIconDialer,DtIconVolume2:s.DtIconVolume2,DtIconExpertNode:s.DtIconExpertNode,DtIconBranch:s.DtIconBranch,DtIconCallMerge:s.DtIconCallMerge,DtIconChevronsRight:s.DtIconChevronsRight,DtIconTransfer:s.DtIconTransfer,DtIconPhoneHangUp:s.DtIconPhoneHangUp,DtIconMoreVertical:s.DtIconMoreVertical,DtIconListBullet:s.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 t.DialtoneLocalization}},computed:{nodeListeners(){return{click:e=>this.$emit(`click`,e)}},nodeIcon(){return c.get(this.nodeType)},nodeClass(){let{normal:e,selected:t}=a.IVR_NODE_CLASS_MAPPING[this.nodeType];return this.isSelected?t:e},isGotoNode(){return this.nodeType===a.IVR_NODE_GO_TO},nodeAriaLabel(){let e=this.nodeType.toUpperCase();return this.i18n.$t(`DIALTONE_IVR_NODE_${e}_ARIA_LABEL`)},menuButtonAriaLabel(){return this.i18n.$t(`DIALTONE_IVR_NODE_MENU_BUTTON_ARIA_LABEL`)}},methods:{openMenu(){this.isOpen=!0}}},u={class:`d-recipe-ivr-node__header-left`},d={class:`d-recipe-ivr-node__label`,"data-qa":`ivr-node-label`},f={class:`d-recipe-ivr-node__dropdown-list`};function p(e,t,n,r,i,a){let s=(0,o.resolveComponent)(`dt-button`),c=(0,o.resolveComponent)(`dt-icon-more-vertical`),l=(0,o.resolveComponent)(`dt-dropdown`),p=(0,o.resolveComponent)(`dt-card`);return(0,o.openBlock)(),(0,o.createElementBlock)(`div`,(0,o.mergeProps)({class:[`d-recipe-ivr-node`,a.nodeClass]},(0,o.toHandlers)(a.nodeListeners,!0)),[n.dtmfKey?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:0,"data-qa":`dt-top-connector-dtmf`,class:(0,o.normalizeClass)([`d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf`,{"d-recipe-ivr-node__connector-dtmf--selected":n.isSelected}])},(0,o.toDisplayString)(n.dtmfKey),3)):(0,o.createCommentVNode)(``,!0),e.$slots.connector?(0,o.renderSlot)(e.$slots,`connector`,{key:1}):(0,o.createCommentVNode)(``,!0),!n.dtmfKey&&!e.$slots.connector?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:2,"data-qa":`dt-top-connector`,class:(0,o.normalizeClass)([`d-recipe-ivr-node__connector`,{"d-recipe-ivr-node__connector--selected":n.isSelected}])},null,2)):(0,o.createCommentVNode)(``,!0),(0,o.createVNode)(p,null,{header:(0,o.withCtx)(()=>[(0,o.createElementVNode)(`div`,u,[(0,o.createVNode)(s,{importance:`clear`,kind:`muted`,"data-qa":`dt-ivr-node-icon`,"aria-label":a.nodeAriaLabel,title:a.nodeAriaLabel},{icon:(0,o.withCtx)(()=>[((0,o.openBlock)(),(0,o.createBlock)((0,o.resolveDynamicComponent)(a.nodeIcon),{size:`200`,class:(0,o.normalizeClass)([``,{"d-recipe-ivr-node__goto-icon":a.isGotoNode}])},null,8,[`class`]))]),_:1},8,[`aria-label`,`title`]),(0,o.createElementVNode)(`p`,d,(0,o.toDisplayString)(n.nodeLabel),1)]),(0,o.createVNode)(l,{open:i.isOpen,"onUpdate:open":t[0]||(t[0]=e=>i.isOpen=e),placement:`bottom`},{anchor:(0,o.withCtx)(()=>[(0,o.createVNode)(s,{importance:`clear`,kind:`muted`,"aria-label":a.menuButtonAriaLabel,title:a.menuButtonAriaLabel,onClick:(0,o.withModifiers)(a.openMenu,[`stop`,`prevent`])},{icon:(0,o.withCtx)(()=>[(0,o.createVNode)(c,{size:`200`})]),_:1},8,[`aria-label`,`title`,`onClick`])]),list:(0,o.withCtx)(({close:t})=>[(0,o.createElementVNode)(`div`,f,[(0,o.renderSlot)(e.$slots,`menuItems`,{close:t})])]),_:3},8,[`open`])]),content:(0,o.withCtx)(()=>[(0,o.renderSlot)(e.$slots,`content`)]),_:3})],16)}var m=e.t(l,[[`render`,p]]);exports.default=m;
 //# sourceMappingURL=ivr-node.cjs.map