@dialpad/dialtone-vue 3.210.0 → 3.211.0-next.2

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

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../components/input/input.vue"],"sourcesContent":["<template>\n  <div\n    ref=\"container\"\n    :class=\"[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    };\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        },\n\n        input: async event => {\n          if (this.isComposing) 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.$refs.input && this.$refs.input.value !== newValue && !this.isComposing) {\n          this.$refs.input.value = newValue;\n        }\n      },\n    },\n  },\n\n  beforeMount () {\n    this.descriptionSizeClasses = DESCRIPTION_SIZE_CLASSES;\n    this.labelSizeClasses = LABEL_SIZE_CLASSES;\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"],"names":["_sfc_main","DtValidationMessages","MessagesMixin","INPUT_TYPES","INPUT_SIZES","hasSlotContent","INPUT_ICON_SIZES","DESCRIPTION_SIZE_TYPES","event","val","file","getUniqueString","getValidationState","_b","_a","_d","_c","_f","_e","_h","_g","_j","_i","VALIDATION_MESSAGE_TYPES","INPUT_SIZE_CLASSES","INPUT_STATE_CLASSES","newValue","DESCRIPTION_SIZE_CLASSES","LABEL_SIZE_CLASSES","removeClassStyleAttrs","addClassStyleAttrs","value","e","type","index","length","_openBlock","_createElementBlock","_mergeProps","$props","$options","_ctx","_createElementVNode","_renderSlot","_normalizeClass","$data","_hoisted_3","_hoisted_4","_toDisplayString","args","_toHandlers","_hoisted_6","_hoisted_7","_createVNode","_component_dt_validation_messages"],"mappings":"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"}
+{"version":3,"file":"input.js","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        <dt-text\n          v-if=\"labelVisible && 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\"\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=\"!labelVisible && label ? label : undefined\"\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=\"!labelVisible && label ? label : undefined\"\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 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      :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} 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 { 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  compatConfig: { MODE: 3 },\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     */\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     * Used to customize the description container\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\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     * Overrides the label text size. When not provided, the label size\n     * is derived from the component size prop.\n     * @values lg, md, sm, xs\n     */\n    labelSize: {\n      type: String,\n      default: null,\n      validator: (s) => TEXT_SIZE_MODIFIERS.label.includes(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  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    };\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        },\n\n        input: async event => {\n          if (this.isComposing) 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    resolvedLabelSize () {\n      return this.labelSize ?? (this.size === 'xl' ? 'lg' : this.size);\n    },\n\n    resolvedDescriptionSize () {\n      const map = { xs: 'xs', sm: 'xs', md: 'sm', lg: 'sm', xl: 'md' };\n      return map[this.size] || 'sm';\n    },\n\n    resolvedDescriptionDensity () {\n      return this.size === 'xl' ? '300' : undefined;\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.$refs.input && this.$refs.input.value !== newValue && !this.isComposing) {\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    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.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('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    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 label-visible=\"false\" to hide it visually.',\n        );\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","DtText","MessagesMixin","INPUT_TYPES","INPUT_SIZES","s","TEXT_SIZE_MODIFIERS","TEXT_STRENGTH_MODIFIERS","hasSlotContent","INPUT_ICON_SIZES","DESCRIPTION_SIZE_TYPES","event","val","file","getUniqueString","getValidationState","_b","_a","_d","_c","_f","_e","_h","_g","_j","_i","VALIDATION_MESSAGE_TYPES","INPUT_SIZE_CLASSES","INPUT_STATE_CLASSES","newValue","removeClassStyleAttrs","addClassStyleAttrs","value","e","type","index","length","_openBlock","_createElementBlock","_mergeProps","$props","$options","_ctx","_createElementVNode","_renderSlot","_createBlock","_component_dt_text","$data","_normalizeClass","_hoisted_2","_hoisted_3","_toDisplayString","args","_toHandlers","_hoisted_5","_hoisted_6","_createVNode","_component_dt_validation_messages"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("../../common/mixins/input-group.cjs"),r=require("../../common/utils/index.cjs"),a=require("vue"),i=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),d=require("../validation-messages/validation-messages.cjs"),u={compatConfig:{MODE:3},name:"DtInputGroup",components:{DtValidationMessages:d.default},mixins:[l.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:r.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}`}}},g=["data-qa"],p=["data-qa"];function m(e,t,s,h,n,_){const o=a.resolveComponent("dt-validation-messages");return a.openBlock(),a.createElementBlock("fieldset",{class:"d-input-group__fieldset","data-qa":s.dataQaGroup},[n.hasSlotContent(e.$slots.legend)||e.legend?(a.openBlock(),a.createElementBlock("legend",a.mergeProps({key:0,class:["d-label",e.legendClass]},e.legendChildProps,{"data-qa":s.dataQaGroupLegend}),[a.renderSlot(e.$slots,"legend",{},()=>[a.createTextVNode(a.toDisplayString(e.legend),1)])],16,p)):a.createCommentVNode("",!0),a.renderSlot(e.$slots,"default"),a.createVNode(o,a.mergeProps({"validation-messages":e.formattedMessages,"show-messages":e.showMessages,class:e.messagesClass,"data-qa":s.dataQaGroupMessages},e.messagesChildProps),null,16,["validation-messages","show-messages","class","data-qa"])],8,g)}const c=i._(u,[["render",m]]);exports.default=c;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("../../common/mixins/input-group.cjs"),d=require("../../common/utils/index.cjs"),t=require("vue"),i=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),u=require("../text/text.cjs"),p=require("../validation-messages/validation-messages.cjs"),g={compatConfig:{MODE:3},name:"DtInputGroup",components:{DtValidationMessages:p.default,DtText:u.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:d.hasSlotContent}},watch:{value(e){this.internalValue=e},internalValue:{immediate:!0,handler(e){this.provideObj.value=e}}},methods:{getMessageKey(e,s){return`input-group-message-${e}-${s}-${this.id}`}}},m=["data-qa"];function c(e,s,a,h,n,f){const o=t.resolveComponent("dt-text"),l=t.resolveComponent("dt-validation-messages");return t.openBlock(),t.createElementBlock("fieldset",{class:"d-input-group__fieldset","data-qa":a.dataQaGroup},[n.hasSlotContent(e.$slots.legend)||e.legend?(t.openBlock(),t.createBlock(o,t.mergeProps({key:0,kind:"label",as:"legend",tone:"secondary",class:["d-input-group__legend-text",e.legendClass]},e.legendChildProps,{"data-qa":a.dataQaGroupLegend}),{default:t.withCtx(()=>[t.renderSlot(e.$slots,"legend",{},()=>[t.createTextVNode(t.toDisplayString(e.legend),1)])]),_:3},16,["class","data-qa"])):t.createCommentVNode("",!0),t.renderSlot(e.$slots,"default"),t.createVNode(l,t.mergeProps({"validation-messages":e.formattedMessages,"show-messages":e.showMessages,class:e.messagesClass,"data-qa":a.dataQaGroupMessages},e.messagesChildProps),null,16,["validation-messages","show-messages","class","data-qa"])],8,m)}const _=i._(g,[["render",c]]);exports.default=_;
 //# sourceMappingURL=input-group.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-group.cjs","sources":["../../../components/input_group/input_group.vue"],"sourcesContent":["<template>\n  <fieldset\n    class=\"d-input-group__fieldset\"\n    :data-qa=\"dataQaGroup\"\n  >\n    <legend\n      v-if=\"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"],"names":["_sfc_main","DtValidationMessages","InputGroupMixin","hasSlotContent","newValue","newInternalValue","type","index","_createElementBlock","$props","$data","_ctx","_openBlock","_mergeProps","_renderSlot","_createVNode","_component_dt_validation_messages"],"mappings":"oVAuCKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,eAEN,WAAY,CAAA,qBAAEC,EAAAA,SAEd,OAAQ,CAACC,EAAAA,eAAe,EAExB,MAAO,CAIL,YAAa,CACX,KAAM,OACN,QAAS,eAMX,kBAAmB,CACjB,KAAM,OACN,QAAS,sBAMX,oBAAqB,CACnB,KAAM,OACN,QAAS,yBAIb,MAAQ,CACN,MAAO,CACL,cAAe,KAAK,MACpB,eAAAC,EAAAA,eAEJ,EAEA,MAAO,CACL,MAAOC,EAAU,CACf,KAAK,cAAgBA,CACvB,EAOA,cAAe,CACb,UAAW,GACX,QAASC,EAAkB,CACzB,KAAK,WAAW,MAAQA,CAC1B,IAIJ,QAAS,CACP,cAAeC,EAAMC,EAAO,CAC1B,MAAO,uBAAuBD,CAAI,IAAIC,CAAK,IAAI,KAAK,EAAE,EACxD,EAEJ,gIAtGEC,EAAAA,mBAwBW,WAAA,CAvBT,MAAM,0BACL,UAASC,EAAA,cAGFC,EAAA,eAAeC,EAAA,OAAO,MAAM,GAAKA,EAAA,QADzCC,EAAAA,YAAAJ,EAAAA,mBAUS,SAVTK,aAUS,OARN,iBAAmBF,EAAA,WAAW,GACvBA,EAAA,iBAAgB,CACvB,UAASF,EAAA,iBAAiB,CAAA,EAAA,CAG3BK,EAAAA,WAEOH,qBAFP,IAEO,qCADFA,EAAA,MAAM,EAAA,CAAA,wCAIbG,aAAQH,EAAA,OAAA,SAAA,EACRI,EAAAA,YAMEC,EANFH,aAME,CALC,sBAAqBF,EAAA,kBACrB,gBAAeA,EAAA,aACf,MAAOA,EAAA,cACP,UAASF,EAAA,qBACFE,EAAA,kBAAkB,EAAA,KAAA,GAAA,CAAA,sBAAA,gBAAA,QAAA,SAAA,CAAA"}
+{"version":3,"file":"input-group.cjs","sources":["../../../components/input_group/input_group.vue"],"sourcesContent":["<template>\n  <fieldset\n    class=\"d-input-group__fieldset\"\n    :data-qa=\"dataQaGroup\"\n  >\n    <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      :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 { DtText } from '@/components/text';\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, 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    };\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"],"names":["_sfc_main","DtValidationMessages","DtText","InputGroupMixin","hasSlotContent","newValue","newInternalValue","type","index","_createElementBlock","$props","$data","_ctx","_openBlock","_createBlock","_component_dt_text","_mergeProps","_renderSlot","_createVNode","_component_dt_validation_messages"],"mappings":"kXA2CKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,eAEN,WAAY,CAAA,qBAAEC,EAAAA,QAAoB,OAAEC,WAEpC,OAAQ,CAACC,EAAAA,eAAe,EAExB,MAAO,CAIL,YAAa,CACX,KAAM,OACN,QAAS,eAMX,kBAAmB,CACjB,KAAM,OACN,QAAS,sBAMX,oBAAqB,CACnB,KAAM,OACN,QAAS,yBAIb,MAAQ,CACN,MAAO,CACL,cAAe,KAAK,MACpB,eAAAC,EAAAA,eAEJ,EAEA,MAAO,CACL,MAAOC,EAAU,CACf,KAAK,cAAgBA,CACvB,EAOA,cAAe,CACb,UAAW,GACX,QAASC,EAAkB,CACzB,KAAK,WAAW,MAAQA,CAC1B,IAIJ,QAAS,CACP,cAAeC,EAAMC,EAAO,CAC1B,MAAO,uBAAuBD,CAAI,IAAIC,CAAK,IAAI,KAAK,EAAE,EACxD,EAEJ,kJA1GEC,EAAAA,mBA2BW,WAAA,CA1BT,MAAM,0BACL,UAASC,EAAA,cAGFC,EAAA,eAAeC,EAAA,OAAO,MAAM,GAAKA,EAAA,QADzCC,EAAAA,YAAAC,EAAAA,YAaUC,EAbVC,aAaU,OAXR,KAAK,QACL,GAAG,SACH,KAAK,YACJ,oCAAsCJ,EAAA,WAAW,GAC1CA,EAAA,iBAAgB,CACvB,UAASF,EAAA,iBAAiB,CAAA,EAAA,mBAG3B,IAEO,CAFPO,EAAAA,WAEOL,qBAFP,IAEO,qCADFA,EAAA,MAAM,EAAA,CAAA,gEAIbK,aAAQL,EAAA,OAAA,SAAA,EACRM,EAAAA,YAMEC,EANFH,aAME,CALC,sBAAqBJ,EAAA,kBACrB,gBAAeA,EAAA,aACf,MAAOA,EAAA,cACP,UAASF,EAAA,qBACFE,EAAA,kBAAkB,EAAA,KAAA,GAAA,CAAA,sBAAA,gBAAA,QAAA,SAAA,CAAA"}

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

@@ -1,13 +1,14 @@
-import { InputGroupMixin as i } from "../../common/mixins/input-group.js";
-import { hasSlotContent as p } from "../../common/utils/index.js";
-import { resolveComponent as u, openBlock as t, createElementBlock as o, mergeProps as n, renderSlot as r, createTextVNode as g, toDisplayString as m, createCommentVNode as f, createVNode as h } from "vue";
-import { _ as c } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import v from "../validation-messages/validation-messages.js";
-const C = {
+import { InputGroupMixin as p } from "../../common/mixins/input-group.js";
+import { hasSlotContent as u } from "../../common/utils/index.js";
+import { resolveComponent as s, openBlock as o, createElementBlock as g, createBlock as m, mergeProps as n, withCtx as c, renderSlot as r, createTextVNode as f, toDisplayString as h, createCommentVNode as _, createVNode as C } from "vue";
+import { _ as v } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import G from "../text/text.js";
+import M from "../validation-messages/validation-messages.js";
+const y = {
   compatConfig: { MODE: 3 },
   name: "DtInputGroup",
-  components: { DtValidationMessages: v },
-  mixins: [i],
+  components: { DtValidationMessages: M, DtText: G },
+  mixins: [p],
   props: {
     /**
      * A data qa tag for the input group
@@ -34,7 +35,7 @@ const C = {
   data() {
     return {
       internalValue: this.value,
-      hasSlotContent: p
+      hasSlotContent: u
     };
   },
   watch: {
@@ -54,36 +55,42 @@ const C = {
     }
   },
   methods: {
-    getMessageKey(e, s) {
-      return `input-group-message-${e}-${s}-${this.id}`;
+    getMessageKey(e, a) {
+      return `input-group-message-${e}-${a}-${this.id}`;
     }
   }
-}, G = ["data-qa"], M = ["data-qa"];
-function _(e, s, a, S, d, V) {
-  const l = u("dt-validation-messages");
-  return t(), o("fieldset", {
+}, S = ["data-qa"];
+function V(e, a, t, q, d, D) {
+  const l = s("dt-text"), i = s("dt-validation-messages");
+  return o(), g("fieldset", {
     class: "d-input-group__fieldset",
-    "data-qa": a.dataQaGroup
+    "data-qa": t.dataQaGroup
   }, [
-    d.hasSlotContent(e.$slots.legend) || e.legend ? (t(), o("legend", n({
+    d.hasSlotContent(e.$slots.legend) || e.legend ? (o(), m(l, n({
       key: 0,
-      class: ["d-label", e.legendClass]
-    }, e.legendChildProps, { "data-qa": a.dataQaGroupLegend }), [
-      r(e.$slots, "legend", {}, () => [
-        g(m(e.legend), 1)
-      ])
-    ], 16, M)) : f("", !0),
+      kind: "label",
+      as: "legend",
+      tone: "secondary",
+      class: ["d-input-group__legend-text", e.legendClass]
+    }, e.legendChildProps, { "data-qa": t.dataQaGroupLegend }), {
+      default: c(() => [
+        r(e.$slots, "legend", {}, () => [
+          f(h(e.legend), 1)
+        ])
+      ]),
+      _: 3
+    }, 16, ["class", "data-qa"])) : _("", !0),
     r(e.$slots, "default"),
-    h(l, n({
+    C(i, n({
       "validation-messages": e.formattedMessages,
       "show-messages": e.showMessages,
       class: e.messagesClass,
-      "data-qa": a.dataQaGroupMessages
+      "data-qa": t.dataQaGroupMessages
     }, e.messagesChildProps), null, 16, ["validation-messages", "show-messages", "class", "data-qa"])
-  ], 8, G);
+  ], 8, S);
 }
-const w = /* @__PURE__ */ c(C, [["render", _]]);
+const N = /* @__PURE__ */ v(y, [["render", V]]);
 export {
-  w as default
+  N as default
 };
 //# sourceMappingURL=input-group.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","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"],"names":["_sfc_main","DtValidationMessages","InputGroupMixin","hasSlotContent","newValue","newInternalValue","type","index","_createElementBlock","$props","$data","_ctx","_openBlock","_mergeProps","_renderSlot","_createVNode","_component_dt_validation_messages"],"mappings":";;;;;AAuCA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY,EAAE,sBAAAC;EAEd,QAAQ,CAACC,CAAe;AAAA,EAExB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA,MACpB,gBAAAC;AAAA;EAEJ;AAAA,EAEA,OAAO;AAAA,IACL,MAAOC,GAAU;AACf,WAAK,gBAAgBA;AAAA,IACvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAASC,GAAkB;AACzB,aAAK,WAAW,QAAQA;AAAA,MAC1B;AAAA;;EAIJ,SAAS;AAAA,IACP,cAAeC,GAAMC,GAAO;AAC1B,aAAO,uBAAuBD,CAAI,IAAIC,CAAK,IAAI,KAAK,EAAE;AAAA,IACxD;AAAA;AAEJ;;;cAtGEC,EAwBW,YAAA;AAAA,IAvBT,OAAM;AAAA,IACL,WAASC,EAAA;AAAA;IAGFC,EAAA,eAAeC,EAAA,OAAO,MAAM,KAAKA,EAAA,UADzCC,KAAAJ,EAUS,UAVTK,EAUS;AAAA;MARN,mBAAmBF,EAAA,WAAW;AAAA,OACvBA,EAAA,kBAAgB,EACvB,WAASF,EAAA,kBAAiB,CAAA,GAAA;AAAA,MAG3BK,EAEOH,wBAFP,MAEO;AAAA,YADFA,EAAA,MAAM,GAAA,CAAA;AAAA;;IAIbG,EAAQH,EAAA,QAAA,SAAA;AAAA,IACRI,EAMEC,GANFH,EAME;AAAA,MALC,uBAAqBF,EAAA;AAAA,MACrB,iBAAeA,EAAA;AAAA,MACf,OAAOA,EAAA;AAAA,MACP,WAASF,EAAA;AAAA,OACFE,EAAA,kBAAkB,GAAA,MAAA,IAAA,CAAA,uBAAA,iBAAA,SAAA,SAAA,CAAA;AAAA;;;"}
+{"version":3,"file":"input-group.js","sources":["../../../components/input_group/input_group.vue"],"sourcesContent":["<template>\n  <fieldset\n    class=\"d-input-group__fieldset\"\n    :data-qa=\"dataQaGroup\"\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      :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 { DtText } from '@/components/text';\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, 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    };\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"],"names":["_sfc_main","DtValidationMessages","DtText","InputGroupMixin","hasSlotContent","newValue","newInternalValue","type","index","_createElementBlock","$props","$data","_ctx","_openBlock","_createBlock","_component_dt_text","_mergeProps","_renderSlot","_createVNode","_component_dt_validation_messages"],"mappings":";;;;;;AA2CA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,YAAY,EAAE,sBAAAC,GAAsB,QAAAC;EAEpC,QAAQ,CAACC,CAAe;AAAA,EAExB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA;;;;IAMX,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA,MACpB,gBAAAC;AAAA;EAEJ;AAAA,EAEA,OAAO;AAAA,IACL,MAAOC,GAAU;AACf,WAAK,gBAAgBA;AAAA,IACvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAASC,GAAkB;AACzB,aAAK,WAAW,QAAQA;AAAA,MAC1B;AAAA;;EAIJ,SAAS;AAAA,IACP,cAAeC,GAAMC,GAAO;AAC1B,aAAO,uBAAuBD,CAAI,IAAIC,CAAK,IAAI,KAAK,EAAE;AAAA,IACxD;AAAA;AAEJ;;;cA1GEC,EA2BW,YAAA;AAAA,IA1BT,OAAM;AAAA,IACL,WAASC,EAAA;AAAA;IAGFC,EAAA,eAAeC,EAAA,OAAO,MAAM,KAAKA,EAAA,UADzCC,KAAAC,EAaUC,GAbVC,EAaU;AAAA;MAXR,MAAK;AAAA,MACL,IAAG;AAAA,MACH,MAAK;AAAA,MACJ,sCAAsCJ,EAAA,WAAW;AAAA,OAC1CA,EAAA,kBAAgB,EACvB,WAASF,EAAA,kBAAiB,CAAA,GAAA;AAAA,iBAG3B,MAEO;AAAA,QAFPO,EAEOL,wBAFP,MAEO;AAAA,cADFA,EAAA,MAAM,GAAA,CAAA;AAAA;;;;IAIbK,EAAQL,EAAA,QAAA,SAAA;AAAA,IACRM,EAMEC,GANFH,EAME;AAAA,MALC,uBAAqBJ,EAAA;AAAA,MACrB,iBAAeA,EAAA;AAAA,MACf,OAAOA,EAAA;AAAA,MACP,WAASF,EAAA;AAAA,OACFE,EAAA,kBAAkB,GAAA,MAAA,IAAA,CAAA,uBAAA,iBAAA,SAAA,SAAA,CAAA;AAAA;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"item-layout.cjs","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"],"names":["_sfc_main","leftContentColumn","rightContentColumn","selectedContentColumn","hasSlotContent","_openBlock","_createBlock","_resolveDynamicComponent","$props","_normalizeStyle","$options","_ctx","_createElementBlock","_renderSlot","_createElementVNode","_normalizeClass"],"mappings":"uOA0EKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,eACN,MAAO,CAIL,GAAI,CACF,KAAM,OACN,QAAS,OAOX,SAAU,CACR,KAAM,QACN,QAAS,IAMX,UAAW,CACT,KAAM,OACN,QAAS,IAMX,aAAc,CACZ,KAAM,OACN,QAAS,IAMX,WAAY,CACV,KAAM,OACN,QAAS,IAMX,cAAe,CACb,KAAM,OACN,QAAS,IAMX,YAAa,CACX,KAAM,OACN,QAAS,IAMX,WAAY,CACV,KAAM,OACN,QAAS,IAMX,cAAe,CACb,KAAM,OACN,QAAS,KAIb,QAAS,CAIP,4BAA8B,CAC5B,MAAMC,EAAoB,KAAK,OAAO,KAAO,OAAS,GAChDC,EAAqB,KAAK,OAAO,MAAQ,OAAS,GAClDC,EAAwB,KAAK,OAAO,SAAW,OAAS,GAE9D,MAAO;AAAA,iCACoBF,CAAiB,QAAQC,CAAkB,IAAIC,CAAqB;AAAA,OAEjG,EAEA,eAAAC,EAAAA,eAEJ,0BAvKE,OAAAC,EAAAA,UAAA,EAAAC,EAAAA,YA8DYC,EAAAA,wBA7DLC,EAAA,EAAE,EAAA,CACN,uBAAOA,EAAA,SAAQ,wBAAA,eAAA,EACf,MAAKC,EAAAA,eAAED,EAAA,UAAYE,EAAA,2BAA0B,CAAA,sBAE9C,IAOU,CANFA,EAAA,eAAeC,EAAA,OAAO,IAAI,iBADlCC,EAAAA,mBAOU,UAAA,OALR,UAAQ,8BACP,wBAAQJ,EAAA,UAAS,qBAAA,CAAA,IAGlBK,aAAoBF,EAAA,OAAA,MAAA,mCAEtBG,EAAAA,mBAgCU,UAAA,CA/BR,UAAQ,iCACP,wBAAQN,EAAA,aAAY,wBAAA,CAAA,IAGbE,EAAA,eAAeC,EAAA,OAAO,OAAO,iBADrCC,EAAAA,mBAOM,MAAA,OALJ,UAAQ,+BACP,wBAAQJ,EAAA,WAAU,sBAAA,CAAA,IAGnBK,aAAQF,EAAA,OAAA,SAAA,mCAGFD,EAAA,eAAeC,EAAA,OAAO,QAAQ,iBADtCC,EAAAA,mBAWM,MAAA,OATJ,UAAQ,kCACP,MAAKG,EAAAA,eAAA,CAAcP,EAAA,+EAAuGE,EAAA,eAAeC,EAAA,OAAO,OAAO,CAAA,MAOxJE,aAAwBF,EAAA,OAAA,UAAA,mCAGlBD,EAAA,eAAeC,EAAA,OAAO,MAAM,iBADpCC,EAAAA,mBAOM,MAAA,OALJ,UAAQ,gCACP,wBAAQJ,EAAA,YAAW,uBAAA,CAAA,IAGpBK,aAAsBF,EAAA,OAAA,QAAA,uCAIlBD,EAAA,eAAeC,EAAA,OAAO,KAAK,iBADnCC,EAAAA,mBAOU,UAAA,OALR,UAAQ,+BACP,wBAAQJ,EAAA,WAAU,sBAAA,CAAA,IAGnBK,aAAqBF,EAAA,OAAA,OAAA,mCAGfD,EAAA,eAAeC,EAAA,OAAO,QAAQ,iBADtCC,EAAAA,mBAOU,UAAA,OALR,UAAQ,kCACP,wBAAQJ,EAAA,cAAa,yBAAA,CAAA,IAGtBK,aAAwBF,EAAA,OAAA,UAAA"}
+{"version":3,"file":"item-layout.cjs","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.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  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 start section.\n     */\n    startClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the start section.\n     * @deprecated Use startClass\n     */\n    leftClass: {\n      type: String,\n      default: undefined,\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 block-end section.\n     */\n    blockEndClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the block-end section.\n     * @deprecated Use blockEndClass\n     */\n    bottomClass: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the class for the end section.\n     */\n    endClass: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Set the class for the end section.\n     * @deprecated Use endClass\n     */\n    rightClass: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Set the class for the selected section.\n     */\n    selectedClass: {\n      type: String,\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"],"names":["_sfc_main","leftContentColumn","rightContentColumn","selectedContentColumn","hasSlotContent","_openBlock","_createBlock","_resolveDynamicComponent","$props","_normalizeStyle","$options","_ctx","_createElementBlock","_renderSlot","_createElementVNode","_normalizeClass"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
-import { hasSlotContent as u } from "../../common/utils/index.js";
-import { openBlock as s, createBlock as r, resolveDynamicComponent as m, normalizeStyle as y, normalizeClass as a, withCtx as c, createElementBlock as o, renderSlot as n, createCommentVNode as d, createElementVNode as C } from "vue";
-import { _ as f } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import { hasSlotContent as i } from "../../common/utils/index.js";
+import { openBlock as o, createBlock as u, resolveDynamicComponent as m, normalizeStyle as y, normalizeClass as a, withCtx as C, createElementBlock as n, renderSlot as l, createCommentVNode as d, createElementVNode as f } from "vue";
+import { _ as c } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const h = {
   compatConfig: { MODE: 3 },
   name: "DtItemLayout",
@@ -21,12 +21,20 @@ const h = {
       default: !1
     },
     /**
-     * Set the class for the left section.
+     * Set the class for the start section.
      */
-    leftClass: {
+    startClass: {
       type: String,
       default: ""
     },
+    /**
+     * Set the class for the start section.
+     * @deprecated Use startClass
+     */
+    leftClass: {
+      type: String,
+      default: void 0
+    },
     /**
      * Set the class for the content section.
      */
@@ -49,18 +57,34 @@ const h = {
       default: ""
     },
     /**
-     * Set the class for the bottom section.
+     * Set the class for the block-end section.
+     */
+    blockEndClass: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Set the class for the block-end section.
+     * @deprecated Use blockEndClass
      */
     bottomClass: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Set the class for the end section.
+     */
+    endClass: {
       type: String,
       default: ""
     },
     /**
-     * Set the class for the right section.
+     * Set the class for the end section.
+     * @deprecated Use endClass
      */
     rightClass: {
       type: String,
-      default: ""
+      default: void 0
     },
     /**
      * Set the class for the selected section.
@@ -70,82 +94,93 @@ const h = {
       default: ""
     }
   },
+  computed: {
+    resolvedStartClass() {
+      return this.leftClass ?? this.startClass;
+    },
+    resolvedEndClass() {
+      return this.rightClass ?? this.endClass;
+    },
+    resolvedBlockEndClass() {
+      return this.bottomClass ?? this.blockEndClass;
+    }
+  },
   methods: {
     /**
      * Generate dynamic grid template columns
      */
     dynamicGridTemplateColumns() {
-      const t = this.$slots.left ? "auto" : "", i = this.$slots.right ? "auto" : "", e = this.$slots.selected ? "auto" : "";
+      const t = this.$slots.start || this.$slots.left ? "auto" : "", r = this.$slots.end || this.$slots.right ? "auto" : "", s = this.$slots.selected ? "auto" : "";
       return `
-        grid-template-columns: ${t} 1fr ${i} ${e};
+        grid-template-columns: ${t} 1fr ${r} ${s};
       `;
     },
-    hasSlotContent: u
+    hasSlotContent: i
   }
 };
-function g(t, i, e, S, b, l) {
-  return s(), r(m(e.as), {
-    class: a(e.unstyled ? "d-item-layout--custom" : "d-item-layout"),
-    style: y(e.unstyled && l.dynamicGridTemplateColumns())
+function S(t, r, s, k, g, e) {
+  return o(), u(m(s.as), {
+    class: a(s.unstyled ? "d-item-layout--custom" : "d-item-layout"),
+    style: y(s.unstyled && e.dynamicGridTemplateColumns())
   }, {
-    default: c(() => [
-      l.hasSlotContent(t.$slots.left) ? (s(), o("section", {
+    default: C(() => [
+      e.hasSlotContent(t.$slots.start) || e.hasSlotContent(t.$slots.left) ? (o(), n("section", {
         key: 0,
         "data-qa": "dt-item-layout-left-wrapper",
-        class: a([e.leftClass, "d-item-layout__left"])
+        class: a([e.resolvedStartClass, "d-item-layout__left"])
       }, [
-        n(t.$slots, "left")
+        t.$slots.start ? l(t.$slots, "start", { key: 0 }) : l(t.$slots, "left", { key: 1 })
       ], 2)) : d("", !0),
-      C("section", {
+      f("section", {
         "data-qa": "dt-item-layout-content-wrapper",
-        class: a([e.contentClass, "d-item-layout__content"])
+        class: a([s.contentClass, "d-item-layout__content"])
       }, [
-        l.hasSlotContent(t.$slots.default) ? (s(), o("div", {
+        e.hasSlotContent(t.$slots.default) ? (o(), n("div", {
           key: 0,
           "data-qa": "dt-item-layout-title-wrapper",
-          class: a([e.titleClass, "d-item-layout__title"])
+          class: a([s.titleClass, "d-item-layout__title"])
         }, [
-          n(t.$slots, "default")
+          l(t.$slots, "default")
         ], 2)) : d("", !0),
-        l.hasSlotContent(t.$slots.subtitle) ? (s(), o("div", {
+        e.hasSlotContent(t.$slots.subtitle) ? (o(), n("div", {
           key: 1,
           "data-qa": "dt-item-layout-subtitle-wrapper",
           class: a([
-            e.subtitleClass,
+            s.subtitleClass,
             "d-item-layout--subtitle",
-            { "d-item-layout--subtitle--with-title": l.hasSlotContent(t.$slots.default) }
+            { "d-item-layout--subtitle--with-title": e.hasSlotContent(t.$slots.default) }
           ])
         }, [
-          n(t.$slots, "subtitle")
+          l(t.$slots, "subtitle")
         ], 2)) : d("", !0),
-        l.hasSlotContent(t.$slots.bottom) ? (s(), o("div", {
+        e.hasSlotContent(t.$slots.blockEnd) || e.hasSlotContent(t.$slots.bottom) ? (o(), n("div", {
           key: 2,
           "data-qa": "dt-item-layout-bottom-wrapper",
-          class: a([e.bottomClass, "d-item-layout__bottom"])
+          class: a([e.resolvedBlockEndClass, "d-item-layout__bottom"])
         }, [
-          n(t.$slots, "bottom")
+          t.$slots.blockEnd ? l(t.$slots, "blockEnd", { key: 0 }) : l(t.$slots, "bottom", { key: 1 })
         ], 2)) : d("", !0)
       ], 2),
-      l.hasSlotContent(t.$slots.right) ? (s(), o("section", {
+      e.hasSlotContent(t.$slots.end) || e.hasSlotContent(t.$slots.right) ? (o(), n("section", {
         key: 1,
         "data-qa": "dt-item-layout-right-wrapper",
-        class: a([e.rightClass, "d-item-layout__right"])
+        class: a([e.resolvedEndClass, "d-item-layout__right"])
       }, [
-        n(t.$slots, "right")
+        t.$slots.end ? l(t.$slots, "end", { key: 0 }) : l(t.$slots, "right", { key: 1 })
       ], 2)) : d("", !0),
-      l.hasSlotContent(t.$slots.selected) ? (s(), o("section", {
+      e.hasSlotContent(t.$slots.selected) ? (o(), n("section", {
         key: 2,
         "data-qa": "dt-item-layout-selected-wrapper",
-        class: a([e.selectedClass, "d-item-layout__selected"])
+        class: a([s.selectedClass, "d-item-layout__selected"])
       }, [
-        n(t.$slots, "selected")
+        l(t.$slots, "selected")
       ], 2)) : d("", !0)
     ]),
     _: 3
   }, 8, ["class", "style"]);
 }
-const _ = /* @__PURE__ */ f(h, [["render", g]]);
+const E = /* @__PURE__ */ c(h, [["render", S]]);
 export {
-  _ as default
+  E as default
 };
 //# sourceMappingURL=item-layout.js.map