npm - @dialpad/dialtone - Versions diffs - 9.97.0 → 9.99.0-beta.1 - Mend

@dialpad/dialtone 9.97.0 → 9.99.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (476) hide show

package/dist/vue3/components/input/input.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input.vue.js","sources":["../../../components/input/input.vue"],"sourcesContent":["<template>\n <div\n ref=\"container\"\n :class=\"['d-input__root', { 'd-input--hidden': hidden }]\"\n data-qa=\"dt-input\"\n >\n <label\n class=\"d-input__label\"\n :aria-details=\"$slots.description \|\| description ? descriptionKey : undefined\"\n data-qa=\"dt-input-label-wrapper\"\n >\n <!-- @slot Slot for label, defaults to label prop -->\n <slot name=\"labelSlot\">\n <div\n v-if=\"labelVisible && label\"\n ref=\"label\"\n data-qa=\"dt-input-label\"\n :class=\"[\n 'd-input__label-text',\n 'd-label',\n labelSizeClasses[size],\n ]\"\n >\n {{ label }}\n </div>\n </slot>\n <div\n v-if=\"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 :value=\"modelValue\"\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=\"$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=\"$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} from '@/common/utils';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { MessagesMixin } from '@/common/mixins/input';\n\n/\n An input field is an input control that allows users to enter alphanumeric information.\n * It can have a range of options and supports single line and multi-line lengths,\n * as well as varying formats, including numbers, masked passwords, etc.\n * @property {Boolean} placeholder attribute\n * @see https://dialtone.dialpad.com/components/input.html\n /\nexport default {\n name: 'DtInput',\n\n components: { DtValidationMessages },\n\n mixins: [MessagesMixin],\n\n inheritAttrs: false,\n\n props: {\n /\n Name property of the input element\n /\n name: {\n type: String,\n default: '',\n },\n\n /\n Type of the input.\n * When `textarea` a `<textarea>` element will be rendered instead of an `<input>` element.\n * @values text, password, email, number, textarea, date, time, file, tel, search\n * @default 'text'\n /\n type: {\n type: String,\n default: INPUT_TYPES.TEXT,\n validator: (t) => Object.values(INPUT_TYPES).includes(t),\n },\n\n /\n Value of the input\n /\n 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 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 };\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 input: async event => {\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 // eslint-disable-next-line complexity\n showLengthLimitValidation () {\n return (\n this.shouldValidateLength &&\n this.inputLengthState !== null &&\n this.validationProps.length.message &&\n (this.retainWarning \|\| this.isInputFocused \|\| this.isInvalid)\n );\n },\n\n sizeModifierClass () {\n if (this.isDefaultSize \|\| !this.isValidSize) {\n return '';\n }\n\n return INPUT_SIZE_CLASSES[this.inputComponent][this.size];\n },\n\n stateClass () {\n return [INPUT_STATE_CLASSES[this.inputState]];\n },\n },\n\n watch: {\n isInvalid (val) {\n this.$emit('update:invalid', val);\n },\n\n 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 },\n },\n\n beforeMount () {\n this.descriptionSizeClasses = DESCRIPTION_SIZE_CLASSES;\n this.labelSizeClasses = LABEL_SIZE_CLASSES;\n },\n\n methods: {\n inputClasses () {\n return [\n 'd-input__input',\n this.inputComponent === 'input' ? 'd-input' : 'd-textarea',\n {\n [this.stateClass]: this.showInputState,\n 'd-input-icon--left': this.$slots.leftIcon,\n 'd-input-icon--right': this.$slots.rightIcon,\n },\n this.sizeModifierClass,\n this.inputClass,\n ];\n },\n\n inputWrapperClasses () {\n if (this.hidden) {\n return [];\n }\n return [\n 'd-input__wrapper',\n { [this.stateClass]: this.showInputState },\n this.inputWrapperClass,\n ];\n },\n\n calculateLength (value) {\n if (typeof value !== 'string') {\n return 0;\n }\n\n return [...value].length;\n },\n\n inputLengthErrorMessage () {\n return {\n message: this.validationProps.length.message,\n type: this.inputLengthState,\n };\n },\n\n onBlur (e) {\n // Do not emit a blur event if the target element is a child of this component\n if (!this.$refs.container?.contains(e.relatedTarget)) {\n this.$emit('blur', e);\n }\n },\n\n emitClearEvents () {\n this.$emit('input', '');\n this.$emit('clear');\n this.$emit('update:modelValue', '');\n },\n\n blur () {\n this.$refs.input.blur();\n },\n\n focus () {\n this.$refs.input.focus();\n },\n\n select () {\n this.$refs.input.select();\n },\n\n getMessageKey (type, index) {\n return `message-${type}-${index}`;\n },\n\n validateLength (length) {\n this.isInvalid = (length > this.validationProps.length.max);\n },\n\n clearInput () {\n this.$refs.input.value = '';\n this.$refs.input.focus();\n this.emitClearEvents();\n },\n },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_createCommentVNode","_openBlock","_createTextVNode","_toDisplayString","_mergeProps","_toHandlers","_createVNode"],"mappings":"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"}
1	+ {"version":3,"file":"input.vue.js","sources":["../../../components/input/input.vue"],"sourcesContent":["<template>\n <div\n ref=\"container\"\n :class=\"['d-input__root', { 'd-input--hidden': hidden }]\"\n data-qa=\"dt-input\"\n >\n <label\n class=\"d-input__label\"\n :aria-details=\"$slots.description \|\| description ? descriptionKey : undefined\"\n data-qa=\"dt-input-label-wrapper\"\n >\n <!-- @slot Slot for label, defaults to label prop -->\n <slot name=\"labelSlot\">\n <div\n v-if=\"labelVisible && label\"\n ref=\"label\"\n data-qa=\"dt-input-label\"\n :class=\"[\n 'd-input__label-text',\n 'd-label',\n labelSizeClasses[size],\n ]\"\n >\n {{ label }}\n </div>\n </slot>\n <div\n v-if=\"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 :value=\"modelValue\"\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=\"$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=\"$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} 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\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 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 };\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 input: async event => {\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 // eslint-disable-next-line complexity\n showLengthLimitValidation () {\n return (\n this.shouldValidateLength &&\n this.inputLengthState !== null &&\n this.validationProps.length.message &&\n (this.retainWarning \|\| this.isInputFocused \|\| this.isInvalid)\n );\n },\n\n sizeModifierClass () {\n if (this.isDefaultSize \|\| !this.isValidSize) {\n return '';\n }\n\n return INPUT_SIZE_CLASSES[this.inputComponent][this.size];\n },\n\n stateClass () {\n return [INPUT_STATE_CLASSES[this.inputState]];\n },\n },\n\n watch: {\n isInvalid (val) {\n this.$emit('update:invalid', val);\n },\n\n 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 },\n },\n\n beforeMount () {\n this.descriptionSizeClasses = DESCRIPTION_SIZE_CLASSES;\n this.labelSizeClasses = LABEL_SIZE_CLASSES;\n },\n\n methods: {\n inputClasses () {\n return [\n 'd-input__input',\n this.inputComponent === 'input' ? 'd-input' : 'd-textarea',\n {\n [this.stateClass]: this.showInputState,\n 'd-input-icon--left': this.$slots.leftIcon,\n 'd-input-icon--right': this.$slots.rightIcon,\n },\n this.sizeModifierClass,\n this.inputClass,\n ];\n },\n\n inputWrapperClasses () {\n if (this.hidden) {\n return [];\n }\n return [\n 'd-input__wrapper',\n { [this.stateClass]: this.showInputState },\n this.inputWrapperClass,\n ];\n },\n\n calculateLength (value) {\n if (typeof value !== 'string') {\n return 0;\n }\n\n return [...value].length;\n },\n\n inputLengthErrorMessage () {\n return {\n message: this.validationProps.length.message,\n type: this.inputLengthState,\n };\n },\n\n onBlur (e) {\n // Do not emit a blur event if the target element is a child of this component\n if (!this.$refs.container?.contains(e.relatedTarget)) {\n this.$emit('blur', e);\n }\n },\n\n emitClearEvents () {\n this.$emit('input', '');\n this.$emit('clear');\n this.$emit('update:modelValue', '');\n },\n\n blur () {\n this.$refs.input.blur();\n },\n\n focus () {\n this.$refs.input.focus();\n },\n\n select () {\n this.$refs.input.select();\n },\n\n getMessageKey (type, index) {\n return `message-${type}-${index}`;\n },\n\n validateLength (length) {\n this.isInvalid = (length > this.validationProps.length.max);\n },\n\n clearInput () {\n this.$refs.input.value = '';\n this.$refs.input.focus();\n this.emitClearEvents();\n },\n },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_createElementVNode","_renderSlot","_createCommentVNode","_openBlock","_createTextVNode","_toDisplayString","_mergeProps","_toHandlers","_createVNode"],"mappings":"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"}

package/dist/vue3/components/input_group/input_group.vue.cjs CHANGED Viewed

@@ -6,6 +6,7 @@ const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const validation_messages = require("../validation_messages/validation_messages.vue.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtInputGroup",
   components: { DtValidationMessages: validation_messages.default },
   mixins: [input_group.InputGroupMixin],

package/dist/vue3/components/input_group/input_group.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input_group.vue.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 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":["DtValidationMessages","InputGroupMixin","hasSlotContent","_createElementBlock","_openBlock","_mergeProps","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":";;;;;;;AAuCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY,EAAEA,sBAAAA,oBAAAA,QAAsB;AAAA,EAEpC,QAAQ,CAACC,YAAAA,eAAe;AAAA,EAExB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA,MACpB,gBAAAC,aAAc;AAAA;EAEjB;AAAA,EAED,OAAO;AAAA,IACL,MAAO,UAAU;AACf,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAAS,kBAAkB;AACzB,aAAK,WAAW,QAAQ;AAAA,MACzB;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,cAAe,MAAM,OAAO;AAC1B,aAAO,uBAAuB,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IACvD;AAAA,EACF;AACH;~~AAtGA~~,MAAA,aAAA,CAAA,SAAA;AAAA,MAAA,aAAA,CAAA,SAAA;;;0BACEC,IAwBW,mBAAA,YAAA;AAAA,IAvBT,OAAM;AAAA,IACL,WAAS,OAAW;AAAA;IAGb,MAAA,eAAe,KAAA,OAAO,MAAM,KAAK,KAAM,UAD/CC,IAAAA,aAAAD,IAAAA,mBAUS,UAVTE,eAUS;AAAA,MAfb,KAAA;AAAA,MAOO,mBAAmB,KAAW,WAAA;AAAA,OACvB,KAAgB,kBAAA,EACvB,WAAS,OAAiB,kBAAA,CAAA,GAAA;AAAA,MAG3BC,IAAAA,WAEO,2BAFP,MAEO;AAAA,QAdbC,IAAAA,gBAAAC,IAAAA,gBAaW,KAAM,MAAA,GAAA,CAAA;AAAA;IAbjB,GAAA,IAAA,UAAA,KAAAC,IAAA,mBAAA,IAAA,IAAA;AAAA,IAiBIH,eAAQ,KAAA,QAAA,SAAA;AAAA,IACRI,IAAA,YAME,mCANFL,eAME;AAAA,MALC,uBAAqB,KAAiB;AAAA,MACtC,iBAAe,KAAY;AAAA,MAC3B,OAAO,KAAa;AAAA,MACpB,WAAS,OAAmB;AAAA,OACrB,KAAkB,kBAAA,GAAA,MAAA,IAAA,CAAA,uBAAA,iBAAA,SAAA,SAAA,CAAA;AAAA,EAvBhC,GAAA,GAAA,UAAA;;;;"}
1	+ {"version":3,"file":"input_group.vue.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":["DtValidationMessages","InputGroupMixin","hasSlotContent","_createElementBlock","_openBlock","_mergeProps","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":";;;;;;;AAuCA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY,EAAEA,sBAAAA,oBAAAA,QAAsB;AAAA,EAEpC,QAAQ,CAACC,YAAAA,eAAe;AAAA,EAExB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA,MACpB,gBAAAC,aAAc;AAAA;EAEjB;AAAA,EAED,OAAO;AAAA,IACL,MAAO,UAAU;AACf,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAAS,kBAAkB;AACzB,aAAK,WAAW,QAAQ;AAAA,MACzB;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,cAAe,MAAM,OAAO;AAC1B,aAAO,uBAAuB,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IACvD;AAAA,EACF;AACH;AAvGA,MAAA,aAAA,CAAA,SAAA;AAAA,MAAA,aAAA,CAAA,SAAA;;;0BACEC,IAwBW,mBAAA,YAAA;AAAA,IAvBT,OAAM;AAAA,IACL,WAAS,OAAW;AAAA;IAGb,MAAA,eAAe,KAAA,OAAO,MAAM,KAAK,KAAM,UAD/CC,IAAAA,aAAAD,IAAAA,mBAUS,UAVTE,eAUS;AAAA,MAfb,KAAA;AAAA,MAOO,mBAAmB,KAAW,WAAA;AAAA,OACvB,KAAgB,kBAAA,EACvB,WAAS,OAAiB,kBAAA,CAAA,GAAA;AAAA,MAG3BC,IAAAA,WAEO,2BAFP,MAEO;AAAA,QAdbC,IAAAA,gBAAAC,IAAAA,gBAaW,KAAM,MAAA,GAAA,CAAA;AAAA;IAbjB,GAAA,IAAA,UAAA,KAAAC,IAAA,mBAAA,IAAA,IAAA;AAAA,IAiBIH,eAAQ,KAAA,QAAA,SAAA;AAAA,IACRI,IAAA,YAME,mCANFL,eAME;AAAA,MALC,uBAAqB,KAAiB;AAAA,MACtC,iBAAe,KAAY;AAAA,MAC3B,OAAO,KAAa;AAAA,MACpB,WAAS,OAAmB;AAAA,OACrB,KAAkB,kBAAA,GAAA,MAAA,IAAA,CAAA,uBAAA,iBAAA,SAAA,SAAA,CAAA;AAAA,EAvBhC,GAAA,GAAA,UAAA;;;;"}

package/dist/vue3/components/input_group/input_group.vue.js CHANGED Viewed

@@ -4,6 +4,7 @@ import { resolveComponent, openBlock, createElementBlock, mergeProps, renderSlot
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 import DtValidationMessages from "../validation_messages/validation_messages.vue.js";
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtInputGroup",
   components: { DtValidationMessages },
   mixins: [InputGroupMixin],

package/dist/vue3/components/input_group/input_group.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input_group.vue.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 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":["_createElementBlock","_openBlock","_mergeProps","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":";;;;;AAuCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY,EAAE,qBAAsB;AAAA,EAEpC,QAAQ,CAAC,eAAe;AAAA,EAExB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA,MACpB;AAAA;EAEH;AAAA,EAED,OAAO;AAAA,IACL,MAAO,UAAU;AACf,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAAS,kBAAkB;AACzB,aAAK,WAAW,QAAQ;AAAA,MACzB;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,cAAe,MAAM,OAAO;AAC1B,aAAO,uBAAuB,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IACvD;AAAA,EACF;AACH;~~AAtGA~~,MAAA,aAAA,CAAA,SAAA;AAAA,MAAA,aAAA,CAAA,SAAA;;;sBACEA,mBAwBW,YAAA;AAAA,IAvBT,OAAM;AAAA,IACL,WAAS,OAAW;AAAA;IAGb,MAAA,eAAe,KAAA,OAAO,MAAM,KAAK,KAAM,UAD/CC,aAAAD,mBAUS,UAVTE,WAUS;AAAA,MAfb,KAAA;AAAA,MAOO,mBAAmB,KAAW,WAAA;AAAA,OACvB,KAAgB,kBAAA,EACvB,WAAS,OAAiB,kBAAA,CAAA,GAAA;AAAA,MAG3BC,WAEO,2BAFP,MAEO;AAAA,QAdbC,gBAAAC,gBAaW,KAAM,MAAA,GAAA,CAAA;AAAA;IAbjB,GAAA,IAAA,UAAA,KAAAC,mBAAA,IAAA,IAAA;AAAA,IAiBIH,WAAQ,KAAA,QAAA,SAAA;AAAA,IACRI,YAME,mCANFL,WAME;AAAA,MALC,uBAAqB,KAAiB;AAAA,MACtC,iBAAe,KAAY;AAAA,MAC3B,OAAO,KAAa;AAAA,MACpB,WAAS,OAAmB;AAAA,OACrB,KAAkB,kBAAA,GAAA,MAAA,IAAA,CAAA,uBAAA,iBAAA,SAAA,SAAA,CAAA;AAAA,EAvBhC,GAAA,GAAA,UAAA;;;"}
1	+ {"version":3,"file":"input_group.vue.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":["_createElementBlock","_openBlock","_mergeProps","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":";;;;;AAuCA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY,EAAE,qBAAsB;AAAA,EAEpC,QAAQ,CAAC,eAAe;AAAA,EAExB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA,MACpB;AAAA;EAEH;AAAA,EAED,OAAO;AAAA,IACL,MAAO,UAAU;AACf,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAAS,kBAAkB;AACzB,aAAK,WAAW,QAAQ;AAAA,MACzB;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,cAAe,MAAM,OAAO;AAC1B,aAAO,uBAAuB,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IACvD;AAAA,EACF;AACH;AAvGA,MAAA,aAAA,CAAA,SAAA;AAAA,MAAA,aAAA,CAAA,SAAA;;;sBACEA,mBAwBW,YAAA;AAAA,IAvBT,OAAM;AAAA,IACL,WAAS,OAAW;AAAA;IAGb,MAAA,eAAe,KAAA,OAAO,MAAM,KAAK,KAAM,UAD/CC,aAAAD,mBAUS,UAVTE,WAUS;AAAA,MAfb,KAAA;AAAA,MAOO,mBAAmB,KAAW,WAAA;AAAA,OACvB,KAAgB,kBAAA,EACvB,WAAS,OAAiB,kBAAA,CAAA,GAAA;AAAA,MAG3BC,WAEO,2BAFP,MAEO;AAAA,QAdbC,gBAAAC,gBAaW,KAAM,MAAA,GAAA,CAAA;AAAA;IAbjB,GAAA,IAAA,UAAA,KAAAC,mBAAA,IAAA,IAAA;AAAA,IAiBIH,WAAQ,KAAA,QAAA,SAAA;AAAA,IACRI,YAME,mCANFL,WAME;AAAA,MALC,uBAAqB,KAAiB;AAAA,MACtC,iBAAe,KAAY;AAAA,MAC3B,OAAO,KAAa;AAAA,MACpB,WAAS,OAAmB;AAAA,OACrB,KAAkB,kBAAA,GAAA,MAAA,IAAA,CAAA,uBAAA,iBAAA,SAAA,SAAA,CAAA;AAAA,EAvBhC,GAAA,GAAA,UAAA;;;"}

package/dist/vue3/components/item_layout/item_layout.vue.cjs CHANGED Viewed

@@ -4,6 +4,7 @@ const common_utils = require("../../common/utils.cjs");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtItemLayout",
   props: {
     /**

package/dist/vue3/components/item_layout/item_layout.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"item_layout.vue.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 >\n <section\n v-if=\"hasSlotContent($slots.left)\"\n data-qa=\"dt-item-layout-left-wrapper\"\n class=\"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=\"d-item-layout--content\"\n >\n <div\n v-if=\"hasSlotContent($slots.default)\"\n data-qa=\"dt-item-layout-title-wrapper\"\n class=\"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 '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=\"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=\"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=\"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 methods: { hasSlotContent },\n};\n</script>\n"],"names":["hasSlotContent","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_openBlock","_createElementBlock","_renderSlot","_createCommentVNode","_createElementVNode"],"mappings":";;;;;AAwEA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,SAAS,EAAEA,gBAAAA,aAAAA,eAAgB;AAC7B;;~~EA9FA~~,KAAA;AAAA,EAOM,WAAQ;AAAA,EACR,OAAM;;;EAMN,WAAQ;AAAA,EACR,OAAM;;;EAfZ,KAAA;AAAA,EAmBQ,WAAQ;AAAA,EACR,OAAM;;;EApBd,KAAA;AAAA,EAsCQ,WAAQ;AAAA,EACR,OAAM;;;EAvCd,KAAA;AAAA,EA+CM,WAAQ;AAAA,EACR,OAAM;;;EAhDZ,KAAA;AAAA,EAuDM,WAAQ;AAAA,EACR,OAAM;;;0BAvDVC,IA4DY,YA7DdC,4BAES,OAAE,EAAA,GAAA;AAAA,IACN,OAHLC,IAAAA,eAGY,OAAQ,WAAA,0BAAA,eAAA;AAAA;IAHpB,SAAAC,IAAA,QAKI,MAOU;AAAA,MANF,SAAc,eAAC,KAAM,OAAC,IAAI,KADlCC,IAAAA,aAAAC,IAAAA,mBAOU,WAPV,YAOU;AAAA,QADRC,eAAoB,KAAA,QAAA,MAAA;AAAA,YAX1BC,IAAA,mBAAA,IAAA,IAAA;AAAA,MAaIC,IAAA,mBA+BU,WA/BV,YA+BU;AAAA,QA1BA,SAAc,eAAC,KAAM,OAAC,OAAO,KADrCJ,IAAAA,aAAAC,IAAAA,mBAOM,OAPN,YAOM;AAAA,UADJC,eAAQ,KAAA,QAAA,SAAA;AAAA,cAvBhBC,IAAA,mBAAA,IAAA,IAAA;AAAA,QA0Bc,SAAc,eAAC,KAAM,OAAC,QAAQ,sBADtCF,IAUM,mBAAA,OAAA;AAAA,UAnCZ,KAAA;AAAA,UA2BQ,WAAQ;AAAA,UACP,OA5BTH,IAAAA,eAAA;AAAA;qDA4B0G,SAAc,eAAC,KAAM,OAAC,OAAO,EAAA;AAAA;;UAM/HI,eAAwB,KAAA,QAAA,UAAA;AAAA,iBAlChCC,IAAA,mBAAA,IAAA,IAAA;AAAA,QAqCc,SAAc,eAAC,KAAM,OAAC,MAAM,KADpCH,IAAAA,aAAAC,IAAAA,mBAOM,OAPN,YAOM;AAAA,UADJC,eAAsB,KAAA,QAAA,QAAA;AAAA,cA1C9BC,IAAA,mBAAA,IAAA,IAAA;AAAA;MA8CY,SAAc,eAAC,KAAM,OAAC,KAAK,KADnCH,IAAAA,aAAAC,IAAAA,mBAOU,WAPV,YAOU;AAAA,QADRC,eAAqB,KAAA,QAAA,OAAA;AAAA,YAnD3BC,IAAA,mBAAA,IAAA,IAAA;AAAA,MAsDY,SAAc,eAAC,KAAM,OAAC,QAAQ,KADtCH,IAAAA,aAAAC,IAAAA,mBAOU,WAPV,YAOU;AAAA,QADRC,eAAwB,KAAA,QAAA,UAAA;AAAA,YA3D9BC,IAAA,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA;AAAA;;;;"}
1	+ {"version":3,"file":"item_layout.vue.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 >\n <section\n v-if=\"hasSlotContent($slots.left)\"\n data-qa=\"dt-item-layout-left-wrapper\"\n class=\"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=\"d-item-layout--content\"\n >\n <div\n v-if=\"hasSlotContent($slots.default)\"\n data-qa=\"dt-item-layout-title-wrapper\"\n class=\"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 '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=\"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=\"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=\"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 methods: { hasSlotContent },\n};\n</script>\n"],"names":["hasSlotContent","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_openBlock","_createElementBlock","_renderSlot","_createCommentVNode","_createElementVNode"],"mappings":";;;;;AAwEA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,SAAS,EAAEA,gBAAAA,aAAAA,eAAgB;AAC7B;;EA/FA,KAAA;AAAA,EAOM,WAAQ;AAAA,EACR,OAAM;;;EAMN,WAAQ;AAAA,EACR,OAAM;;;EAfZ,KAAA;AAAA,EAmBQ,WAAQ;AAAA,EACR,OAAM;;;EApBd,KAAA;AAAA,EAsCQ,WAAQ;AAAA,EACR,OAAM;;;EAvCd,KAAA;AAAA,EA+CM,WAAQ;AAAA,EACR,OAAM;;;EAhDZ,KAAA;AAAA,EAuDM,WAAQ;AAAA,EACR,OAAM;;;0BAvDVC,IA4DY,YA7DdC,4BAES,OAAE,EAAA,GAAA;AAAA,IACN,OAHLC,IAAAA,eAGY,OAAQ,WAAA,0BAAA,eAAA;AAAA;IAHpB,SAAAC,IAAA,QAKI,MAOU;AAAA,MANF,SAAc,eAAC,KAAM,OAAC,IAAI,KADlCC,IAAAA,aAAAC,IAAAA,mBAOU,WAPV,YAOU;AAAA,QADRC,eAAoB,KAAA,QAAA,MAAA;AAAA,YAX1BC,IAAA,mBAAA,IAAA,IAAA;AAAA,MAaIC,IAAA,mBA+BU,WA/BV,YA+BU;AAAA,QA1BA,SAAc,eAAC,KAAM,OAAC,OAAO,KADrCJ,IAAAA,aAAAC,IAAAA,mBAOM,OAPN,YAOM;AAAA,UADJC,eAAQ,KAAA,QAAA,SAAA;AAAA,cAvBhBC,IAAA,mBAAA,IAAA,IAAA;AAAA,QA0Bc,SAAc,eAAC,KAAM,OAAC,QAAQ,sBADtCF,IAUM,mBAAA,OAAA;AAAA,UAnCZ,KAAA;AAAA,UA2BQ,WAAQ;AAAA,UACP,OA5BTH,IAAAA,eAAA;AAAA;qDA4B0G,SAAc,eAAC,KAAM,OAAC,OAAO,EAAA;AAAA;;UAM/HI,eAAwB,KAAA,QAAA,UAAA;AAAA,iBAlChCC,IAAA,mBAAA,IAAA,IAAA;AAAA,QAqCc,SAAc,eAAC,KAAM,OAAC,MAAM,KADpCH,IAAAA,aAAAC,IAAAA,mBAOM,OAPN,YAOM;AAAA,UADJC,eAAsB,KAAA,QAAA,QAAA;AAAA,cA1C9BC,IAAA,mBAAA,IAAA,IAAA;AAAA;MA8CY,SAAc,eAAC,KAAM,OAAC,KAAK,KADnCH,IAAAA,aAAAC,IAAAA,mBAOU,WAPV,YAOU;AAAA,QADRC,eAAqB,KAAA,QAAA,OAAA;AAAA,YAnD3BC,IAAA,mBAAA,IAAA,IAAA;AAAA,MAsDY,SAAc,eAAC,KAAM,OAAC,QAAQ,KADtCH,IAAAA,aAAAC,IAAAA,mBAOU,WAPV,YAOU;AAAA,QADRC,eAAwB,KAAA,QAAA,UAAA;AAAA,YA3D9BC,IAAA,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA;AAAA;;;;"}

package/dist/vue3/components/item_layout/item_layout.vue.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { hasSlotContent } from "../../common/utils.js";
 import { openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, renderSlot, createCommentVNode, createElementVNode } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtItemLayout",
   props: {
     /**

package/dist/vue3/components/item_layout/item_layout.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"item_layout.vue.js","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 >\n <section\n v-if=\"hasSlotContent($slots.left)\"\n data-qa=\"dt-item-layout-left-wrapper\"\n class=\"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=\"d-item-layout--content\"\n >\n <div\n v-if=\"hasSlotContent($slots.default)\"\n data-qa=\"dt-item-layout-title-wrapper\"\n class=\"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 '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=\"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=\"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=\"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 methods: { hasSlotContent },\n};\n</script>\n"],"names":["_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_openBlock","_createElementBlock","_renderSlot","_createCommentVNode","_createElementVNode"],"mappings":";;;AAwEA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,SAAS,EAAE,eAAgB;AAC7B;;~~EA9FA~~,KAAA;AAAA,EAOM,WAAQ;AAAA,EACR,OAAM;;;EAMN,WAAQ;AAAA,EACR,OAAM;;;EAfZ,KAAA;AAAA,EAmBQ,WAAQ;AAAA,EACR,OAAM;;;EApBd,KAAA;AAAA,EAsCQ,WAAQ;AAAA,EACR,OAAM;;;EAvCd,KAAA;AAAA,EA+CM,WAAQ;AAAA,EACR,OAAM;;;EAhDZ,KAAA;AAAA,EAuDM,WAAQ;AAAA,EACR,OAAM;;;sBAvDVA,YADFC,wBAES,OAAE,EAAA,GAAA;AAAA,IACN,OAHLC,eAGY,OAAQ,WAAA,0BAAA,eAAA;AAAA;IAHpB,SAAAC,QAKI,MAOU;AAAA,MANF,SAAc,eAAC,KAAM,OAAC,IAAI,KADlCC,aAAAC,mBAOU,WAPV,YAOU;AAAA,QADRC,WAAoB,KAAA,QAAA,MAAA;AAAA,YAX1BC,mBAAA,IAAA,IAAA;AAAA,MAaIC,mBA+BU,WA/BV,YA+BU;AAAA,QA1BA,SAAc,eAAC,KAAM,OAAC,OAAO,KADrCJ,aAAAC,mBAOM,OAPN,YAOM;AAAA,UADJC,WAAQ,KAAA,QAAA,SAAA;AAAA,cAvBhBC,mBAAA,IAAA,IAAA;AAAA,QA0Bc,SAAc,eAAC,KAAM,OAAC,QAAQ,kBADtCF,mBAUM,OAAA;AAAA,UAnCZ,KAAA;AAAA,UA2BQ,WAAQ;AAAA,UACP,OA5BTH,eAAA;AAAA;qDA4B0G,SAAc,eAAC,KAAM,OAAC,OAAO,EAAA;AAAA;;UAM/HI,WAAwB,KAAA,QAAA,UAAA;AAAA,iBAlChCC,mBAAA,IAAA,IAAA;AAAA,QAqCc,SAAc,eAAC,KAAM,OAAC,MAAM,KADpCH,aAAAC,mBAOM,OAPN,YAOM;AAAA,UADJC,WAAsB,KAAA,QAAA,QAAA;AAAA,cA1C9BC,mBAAA,IAAA,IAAA;AAAA;MA8CY,SAAc,eAAC,KAAM,OAAC,KAAK,KADnCH,aAAAC,mBAOU,WAPV,YAOU;AAAA,QADRC,WAAqB,KAAA,QAAA,OAAA;AAAA,YAnD3BC,mBAAA,IAAA,IAAA;AAAA,MAsDY,SAAc,eAAC,KAAM,OAAC,QAAQ,KADtCH,aAAAC,mBAOU,WAPV,YAOU;AAAA,QADRC,WAAwB,KAAA,QAAA,UAAA;AAAA,YA3D9BC,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA;AAAA;;;"}
1	+ {"version":3,"file":"item_layout.vue.js","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 >\n <section\n v-if=\"hasSlotContent($slots.left)\"\n data-qa=\"dt-item-layout-left-wrapper\"\n class=\"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=\"d-item-layout--content\"\n >\n <div\n v-if=\"hasSlotContent($slots.default)\"\n data-qa=\"dt-item-layout-title-wrapper\"\n class=\"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 '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=\"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=\"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=\"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 methods: { hasSlotContent },\n};\n</script>\n"],"names":["_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_openBlock","_createElementBlock","_renderSlot","_createCommentVNode","_createElementVNode"],"mappings":";;;AAwEA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,SAAS,EAAE,eAAgB;AAC7B;;EA/FA,KAAA;AAAA,EAOM,WAAQ;AAAA,EACR,OAAM;;;EAMN,WAAQ;AAAA,EACR,OAAM;;;EAfZ,KAAA;AAAA,EAmBQ,WAAQ;AAAA,EACR,OAAM;;;EApBd,KAAA;AAAA,EAsCQ,WAAQ;AAAA,EACR,OAAM;;;EAvCd,KAAA;AAAA,EA+CM,WAAQ;AAAA,EACR,OAAM;;;EAhDZ,KAAA;AAAA,EAuDM,WAAQ;AAAA,EACR,OAAM;;;sBAvDVA,YADFC,wBAES,OAAE,EAAA,GAAA;AAAA,IACN,OAHLC,eAGY,OAAQ,WAAA,0BAAA,eAAA;AAAA;IAHpB,SAAAC,QAKI,MAOU;AAAA,MANF,SAAc,eAAC,KAAM,OAAC,IAAI,KADlCC,aAAAC,mBAOU,WAPV,YAOU;AAAA,QADRC,WAAoB,KAAA,QAAA,MAAA;AAAA,YAX1BC,mBAAA,IAAA,IAAA;AAAA,MAaIC,mBA+BU,WA/BV,YA+BU;AAAA,QA1BA,SAAc,eAAC,KAAM,OAAC,OAAO,KADrCJ,aAAAC,mBAOM,OAPN,YAOM;AAAA,UADJC,WAAQ,KAAA,QAAA,SAAA;AAAA,cAvBhBC,mBAAA,IAAA,IAAA;AAAA,QA0Bc,SAAc,eAAC,KAAM,OAAC,QAAQ,kBADtCF,mBAUM,OAAA;AAAA,UAnCZ,KAAA;AAAA,UA2BQ,WAAQ;AAAA,UACP,OA5BTH,eAAA;AAAA;qDA4B0G,SAAc,eAAC,KAAM,OAAC,OAAO,EAAA;AAAA;;UAM/HI,WAAwB,KAAA,QAAA,UAAA;AAAA,iBAlChCC,mBAAA,IAAA,IAAA;AAAA,QAqCc,SAAc,eAAC,KAAM,OAAC,MAAM,KADpCH,aAAAC,mBAOM,OAPN,YAOM;AAAA,UADJC,WAAsB,KAAA,QAAA,QAAA;AAAA,cA1C9BC,mBAAA,IAAA,IAAA;AAAA;MA8CY,SAAc,eAAC,KAAM,OAAC,KAAK,KADnCH,aAAAC,mBAOU,WAPV,YAOU;AAAA,QADRC,WAAqB,KAAA,QAAA,OAAA;AAAA,YAnD3BC,mBAAA,IAAA,IAAA;AAAA,MAsDY,SAAc,eAAC,KAAM,OAAC,QAAQ,KADtCH,aAAAC,mBAOU,WAPV,YAOU;AAAA,QADRC,WAAwB,KAAA,QAAA,UAAA;AAAA,YA3D9BC,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA;AAAA;;;"}

package/dist/vue3/components/keyboard_shortcut/keyboard_shortcut.vue.cjs CHANGED Viewed

@@ -12,6 +12,7 @@ const SHORTCUTS_ICON_ALIASES = {
   "{cmd}": vue3.DtIconCommand
 };
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtKeyboardShortcut",
   components: {
     DtIconLayoutGrid: vue3.DtIconLayoutGrid,

package/dist/vue3/components/keyboard_shortcut/keyboard_shortcut.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"keyboard_shortcut.vue.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n <kbd\n :class=\"[\n 'd-keyboard-shortcut',\n { 'd-keyboard-shortcut--inverted': inverted },\n ]\"\n >\n <span\n v-if=\"screenReaderText\"\n class=\"d-keyboard-shortcut--sr-only\"\n >\n {{ screenReaderText }}\n </span>\n <template\n v-for=\"(item, i) in formattedShortcutSplit\"\n >\n <component\n :is=\"icons[item]\"\n v-if=\"icons[item]\"\n :key=\"`${i}-${item}`\"\n size=\"100\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__icon',\n { 'd-keyboard-shortcut__icon--inverted': inverted },\n ]\"\n />\n <span\n v-else\n :key=\"`${i}-${item}`\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__item',\n { 'd-keyboard-shortcut__item--inverted': inverted },\n ]\"\n v-html=\"item\"\n />\n </template>\n </kbd>\n</template>\n\n<script>\nimport {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst SHORTCUTS_ICON_ALIASES = {\n '{win}': DtIconLayoutGrid,\n '{arrow-right}': DtIconArrowRight,\n '{arrow-left}': DtIconArrowLeft,\n '{arrow-up}': DtIconArrowUp,\n '{arrow-down}': DtIconArrowDown,\n '{cmd}': DtIconCommand,\n};\n\n/*\n This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n /\nexport default {\n name: 'DtKeyboardShortcut',\n\n components: {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconPlus,\n },\n\n props: {\n /\n If true, applies inverted styles.\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n Include any of these tokens in your string to render the corresponding symbol:\n * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n /\n shortcut: {\n type: String,\n required: true,\n },\n\n /\n Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n /\n screenReaderText: {\n type: String,\n default: null,\n },\n },\n\n data () {\n return {\n separator: /\\+/gi,\n };\n },\n\n computed: {\n icons () {\n return {\n ...SHORTCUTS_ICON_ALIASES,\n '{plus}': DtIconPlus,\n };\n },\n\n shortcutWithSeparator () {\n return this.shortcut.replace(this.separator, '{plus}');\n },\n\n formattedShortcut () {\n return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n }, this.shortcutWithSeparator);\n },\n\n // Splits any icon based aliases into their own array items.\n formattedShortcutSplit () {\n const iconAliasString = Object.keys(this.icons).join('\|');\n\n /\n The regexp splits a given string with icon alias and is filtered by empty strings after:\n if {win} is our delimiter AKA shortcut icon alias\n '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n */\n const regex = new RegExp(`(${iconAliasString})`, 'gi');\n return this.formattedShortcut.split(regex).filter(Boolean);\n },\n },\n};\n</script>\n"],"names":["DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconPlus","_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode","_openBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"mappings":";;;;;AAqDA,MAAM,yBAAyB;AAAA,EAC7B,SAASA,KAAgB;AAAA,EACzB,iBAAiBC,KAAgB;AAAA,EACjC,gBAAgBC,KAAe;AAAA,EAC/B,cAAcC,KAAa;AAAA,EAC3B,gBAAgBC,KAAe;AAAA,EAC/B,SAASC,KAAa;AACxB;AAMA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,kBAAAL,KAAgB;AAAA,IAChB,kBAAAC,KAAgB;AAAA,IAChB,iBAAAC,KAAe;AAAA,mBACfC,KAAa;AAAA,IACb,iBAAAC,KAAe;AAAA,mBACfC,KAAa;AAAA,gBACbC,KAAU;AAAA,EACX;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,WAAW;AAAA;EAEd;AAAA,EAED,UAAU;AAAA,IACR,QAAS;AACP,aAAO;AAAA,QACL,GAAG;AAAA,QACH,UAAUA,KAAU;AAAA;IAEvB;AAAA,IAED,wBAAyB;AACvB,aAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,QAAQ;AAAA,IACtD;AAAA,IAED,oBAAqB;AACnB,aAAO,OAAO,KAAK,sBAAsB,EAAE,OAAO,CAAC,QAAQ,QAAQ;AACjE,eAAO,OAAO,QAAQ,IAAI,OAAO,MAAM,MAAM,KAAK,IAAI,GAAG,uBAAuB,GAAG,CAAC;AAAA,SACnF,KAAK,qBAAqB;AAAA,IAC9B;AAAA;AAAA,IAGD,yBAA0B;AACxB,YAAM,kBAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG;AAOxD,YAAM,QAAQ,IAAI,OAAO,IAAI,eAAe,KAAK,IAAI;AACrD,aAAO,KAAK,kBAAkB,MAAM,KAAK,EAAE,OAAO,OAAO;AAAA,IAC1D;AAAA,EACF;AACH;;~~EAhJA~~,KAAA;AAAA,EAUM,OAAM;;AAVZ,MAAA,aAAA,CAAA,WAAA;;0BAEEC,IAqCM,mBAAA,OAAA;AAAA,IApCH,OAHLC,IAAAA,eAAA;AAAA;yCAGoF,OAAQ,SAAA;AAAA;;IAMhF,OAAgB,qCADxBD,IAKO,mBAAA,QALP,YAKOE,IAAAA,gBADF,OAAgB,gBAAA,GAAA,CAAA,KAZzBC,IAAA,mBAAA,IAAA,IAAA;AAAA,KAcIC,IAAAA,UAAA,IAAA,GAAAJ,IAAA,mBAwBWK,oBAtCfC,IAe0B,WAAA,SAAA,wBAf1B,CAec,MAAM,MAAC;AAfrB,aAAAF,cAAA,GAAAJ,uBAAAK,IAAAA,UAAA,MAAA;AAAA,QAmBc,SAAA,MAAM,IAAI,KAFlBD,IAAA,UAAA,GAAAG,IAAAA,YAUEC,IA3BR,wBAkBa,SAAK,MAAC,IAAI,CAAA,GAAA;AAAA,UAEd,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,MAAK;AAAA,UACL,eAAY;AAAA,UACX,OAvBTP,IAAAA,eAAA;AAAA;qDAuB4G,OAAQ,SAAA;AAAA;oDAK9GD,IASE,mBAAA,QAAA;AAAA,UAPC,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,eAAY;AAAA,UACX,OAhCTC,IAAAA,eAAA;AAAA;qDAgC4G,OAAQ,SAAA;AAAA;UAI5G,WAAQ;AAAA,QApChB,GAAA,MAAA,IAAA,UAAA;AAAA;;;;;;"}
1	+ {"version":3,"file":"keyboard_shortcut.vue.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n <kbd\n :class=\"[\n 'd-keyboard-shortcut',\n { 'd-keyboard-shortcut--inverted': inverted },\n ]\"\n >\n <span\n v-if=\"screenReaderText\"\n class=\"d-keyboard-shortcut--sr-only\"\n >\n {{ screenReaderText }}\n </span>\n <template\n v-for=\"(item, i) in formattedShortcutSplit\"\n >\n <component\n :is=\"icons[item]\"\n v-if=\"icons[item]\"\n :key=\"`${i}-${item}`\"\n size=\"100\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__icon',\n { 'd-keyboard-shortcut__icon--inverted': inverted },\n ]\"\n />\n <span\n v-else\n :key=\"`${i}-${item}`\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__item',\n { 'd-keyboard-shortcut__item--inverted': inverted },\n ]\"\n v-html=\"item\"\n />\n </template>\n </kbd>\n</template>\n\n<script>\nimport {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst SHORTCUTS_ICON_ALIASES = {\n '{win}': DtIconLayoutGrid,\n '{arrow-right}': DtIconArrowRight,\n '{arrow-left}': DtIconArrowLeft,\n '{arrow-up}': DtIconArrowUp,\n '{arrow-down}': DtIconArrowDown,\n '{cmd}': DtIconCommand,\n};\n\n/*\n This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtKeyboardShortcut',\n\n components: {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconPlus,\n },\n\n props: {\n /\n If true, applies inverted styles.\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n Include any of these tokens in your string to render the corresponding symbol:\n * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n /\n shortcut: {\n type: String,\n required: true,\n },\n\n /\n Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n /\n screenReaderText: {\n type: String,\n default: null,\n },\n },\n\n data () {\n return {\n separator: /\\+/gi,\n };\n },\n\n computed: {\n icons () {\n return {\n ...SHORTCUTS_ICON_ALIASES,\n '{plus}': DtIconPlus,\n };\n },\n\n shortcutWithSeparator () {\n return this.shortcut.replace(this.separator, '{plus}');\n },\n\n formattedShortcut () {\n return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n }, this.shortcutWithSeparator);\n },\n\n // Splits any icon based aliases into their own array items.\n formattedShortcutSplit () {\n const iconAliasString = Object.keys(this.icons).join('\|');\n\n /\n The regexp splits a given string with icon alias and is filtered by empty strings after:\n if {win} is our delimiter AKA shortcut icon alias\n '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n */\n const regex = new RegExp(`(${iconAliasString})`, 'gi');\n return this.formattedShortcut.split(regex).filter(Boolean);\n },\n },\n};\n</script>\n"],"names":["DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconPlus","_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode","_openBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"mappings":"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"}

package/dist/vue3/components/keyboard_shortcut/keyboard_shortcut.vue.js CHANGED Viewed

@@ -10,6 +10,7 @@ const SHORTCUTS_ICON_ALIASES = {
   "{cmd}": DtIconCommand
 };
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtKeyboardShortcut",
   components: {
     DtIconLayoutGrid,

package/dist/vue3/components/keyboard_shortcut/keyboard_shortcut.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"keyboard_shortcut.vue.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n <kbd\n :class=\"[\n 'd-keyboard-shortcut',\n { 'd-keyboard-shortcut--inverted': inverted },\n ]\"\n >\n <span\n v-if=\"screenReaderText\"\n class=\"d-keyboard-shortcut--sr-only\"\n >\n {{ screenReaderText }}\n </span>\n <template\n v-for=\"(item, i) in formattedShortcutSplit\"\n >\n <component\n :is=\"icons[item]\"\n v-if=\"icons[item]\"\n :key=\"`${i}-${item}`\"\n size=\"100\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__icon',\n { 'd-keyboard-shortcut__icon--inverted': inverted },\n ]\"\n />\n <span\n v-else\n :key=\"`${i}-${item}`\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__item',\n { 'd-keyboard-shortcut__item--inverted': inverted },\n ]\"\n v-html=\"item\"\n />\n </template>\n </kbd>\n</template>\n\n<script>\nimport {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst SHORTCUTS_ICON_ALIASES = {\n '{win}': DtIconLayoutGrid,\n '{arrow-right}': DtIconArrowRight,\n '{arrow-left}': DtIconArrowLeft,\n '{arrow-up}': DtIconArrowUp,\n '{arrow-down}': DtIconArrowDown,\n '{cmd}': DtIconCommand,\n};\n\n/*\n This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n /\nexport default {\n name: 'DtKeyboardShortcut',\n\n components: {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconPlus,\n },\n\n props: {\n /\n If true, applies inverted styles.\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n Include any of these tokens in your string to render the corresponding symbol:\n * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n /\n shortcut: {\n type: String,\n required: true,\n },\n\n /\n Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n /\n screenReaderText: {\n type: String,\n default: null,\n },\n },\n\n data () {\n return {\n separator: /\\+/gi,\n };\n },\n\n computed: {\n icons () {\n return {\n ...SHORTCUTS_ICON_ALIASES,\n '{plus}': DtIconPlus,\n };\n },\n\n shortcutWithSeparator () {\n return this.shortcut.replace(this.separator, '{plus}');\n },\n\n formattedShortcut () {\n return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n }, this.shortcutWithSeparator);\n },\n\n // Splits any icon based aliases into their own array items.\n formattedShortcutSplit () {\n const iconAliasString = Object.keys(this.icons).join('\|');\n\n /\n The regexp splits a given string with icon alias and is filtered by empty strings after:\n if {win} is our delimiter AKA shortcut icon alias\n '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n */\n const regex = new RegExp(`(${iconAliasString})`, 'gi');\n return this.formattedShortcut.split(regex).filter(Boolean);\n },\n },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode","_openBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"mappings":";;;AAqDA,MAAM,yBAAyB;AAAA,EAC7B,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AACX;AAMA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,WAAW;AAAA;EAEd;AAAA,EAED,UAAU;AAAA,IACR,QAAS;AACP,aAAO;AAAA,QACL,GAAG;AAAA,QACH,UAAU;AAAA;IAEb;AAAA,IAED,wBAAyB;AACvB,aAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,QAAQ;AAAA,IACtD;AAAA,IAED,oBAAqB;AACnB,aAAO,OAAO,KAAK,sBAAsB,EAAE,OAAO,CAAC,QAAQ,QAAQ;AACjE,eAAO,OAAO,QAAQ,IAAI,OAAO,MAAM,MAAM,KAAK,IAAI,GAAG,uBAAuB,GAAG,CAAC;AAAA,SACnF,KAAK,qBAAqB;AAAA,IAC9B;AAAA;AAAA,IAGD,yBAA0B;AACxB,YAAM,kBAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG;AAOxD,YAAM,QAAQ,IAAI,OAAO,IAAI,eAAe,KAAK,IAAI;AACrD,aAAO,KAAK,kBAAkB,MAAM,KAAK,EAAE,OAAO,OAAO;AAAA,IAC1D;AAAA,EACF;AACH;;~~EAhJA~~,KAAA;AAAA,EAUM,OAAM;;AAVZ,MAAA,aAAA,CAAA,WAAA;;sBAEEA,mBAqCM,OAAA;AAAA,IApCH,OAHLC,eAAA;AAAA;yCAGoF,OAAQ,SAAA;AAAA;;IAMhF,OAAgB,iCADxBD,mBAKO,QALP,YAKOE,gBADF,OAAgB,gBAAA,GAAA,CAAA,KAZzBC,mBAAA,IAAA,IAAA;AAAA,KAcIC,UAAA,IAAA,GAAAJ,mBAwBWK,gBAtCfC,WAe0B,SAAA,wBAf1B,CAec,MAAM,MAAC;AAfrB,aAAAF,UAAA,GAAAJ,mBAAAK,UAAA,MAAA;AAAA,QAmBc,SAAA,MAAM,IAAI,KAFlBD,UAAA,GAAAG,YAUEC,wBATK,SAAK,MAAC,IAAI,CAAA,GAAA;AAAA,UAEd,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,MAAK;AAAA,UACL,eAAY;AAAA,UACX,OAvBTP,eAAA;AAAA;qDAuB4G,OAAQ,SAAA;AAAA;gDAK9GD,mBASE,QAAA;AAAA,UAPC,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,eAAY;AAAA,UACX,OAhCTC,eAAA;AAAA;qDAgC4G,OAAQ,SAAA;AAAA;UAI5G,WAAQ;AAAA,QApChB,GAAA,MAAA,IAAA,UAAA;AAAA;;;;;"}
1	+ {"version":3,"file":"keyboard_shortcut.vue.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n <kbd\n :class=\"[\n 'd-keyboard-shortcut',\n { 'd-keyboard-shortcut--inverted': inverted },\n ]\"\n >\n <span\n v-if=\"screenReaderText\"\n class=\"d-keyboard-shortcut--sr-only\"\n >\n {{ screenReaderText }}\n </span>\n <template\n v-for=\"(item, i) in formattedShortcutSplit\"\n >\n <component\n :is=\"icons[item]\"\n v-if=\"icons[item]\"\n :key=\"`${i}-${item}`\"\n size=\"100\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__icon',\n { 'd-keyboard-shortcut__icon--inverted': inverted },\n ]\"\n />\n <span\n v-else\n :key=\"`${i}-${item}`\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__item',\n { 'd-keyboard-shortcut__item--inverted': inverted },\n ]\"\n v-html=\"item\"\n />\n </template>\n </kbd>\n</template>\n\n<script>\nimport {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst SHORTCUTS_ICON_ALIASES = {\n '{win}': DtIconLayoutGrid,\n '{arrow-right}': DtIconArrowRight,\n '{arrow-left}': DtIconArrowLeft,\n '{arrow-up}': DtIconArrowUp,\n '{arrow-down}': DtIconArrowDown,\n '{cmd}': DtIconCommand,\n};\n\n/*\n This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtKeyboardShortcut',\n\n components: {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconPlus,\n },\n\n props: {\n /\n If true, applies inverted styles.\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n Include any of these tokens in your string to render the corresponding symbol:\n * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n /\n shortcut: {\n type: String,\n required: true,\n },\n\n /\n Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n /\n screenReaderText: {\n type: String,\n default: null,\n },\n },\n\n data () {\n return {\n separator: /\\+/gi,\n };\n },\n\n computed: {\n icons () {\n return {\n ...SHORTCUTS_ICON_ALIASES,\n '{plus}': DtIconPlus,\n };\n },\n\n shortcutWithSeparator () {\n return this.shortcut.replace(this.separator, '{plus}');\n },\n\n formattedShortcut () {\n return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n }, this.shortcutWithSeparator);\n },\n\n // Splits any icon based aliases into their own array items.\n formattedShortcutSplit () {\n const iconAliasString = Object.keys(this.icons).join('\|');\n\n /\n The regexp splits a given string with icon alias and is filtered by empty strings after:\n if {win} is our delimiter AKA shortcut icon alias\n '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n */\n const regex = new RegExp(`(${iconAliasString})`, 'gi');\n return this.formattedShortcut.split(regex).filter(Boolean);\n },\n },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode","_openBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"mappings":";;;AAqDA,MAAM,yBAAyB;AAAA,EAC7B,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AACX;AAMA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,WAAW;AAAA;EAEd;AAAA,EAED,UAAU;AAAA,IACR,QAAS;AACP,aAAO;AAAA,QACL,GAAG;AAAA,QACH,UAAU;AAAA;IAEb;AAAA,IAED,wBAAyB;AACvB,aAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,QAAQ;AAAA,IACtD;AAAA,IAED,oBAAqB;AACnB,aAAO,OAAO,KAAK,sBAAsB,EAAE,OAAO,CAAC,QAAQ,QAAQ;AACjE,eAAO,OAAO,QAAQ,IAAI,OAAO,MAAM,MAAM,KAAK,IAAI,GAAG,uBAAuB,GAAG,CAAC;AAAA,SACnF,KAAK,qBAAqB;AAAA,IAC9B;AAAA;AAAA,IAGD,yBAA0B;AACxB,YAAM,kBAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG;AAOxD,YAAM,QAAQ,IAAI,OAAO,IAAI,eAAe,KAAK,IAAI;AACrD,aAAO,KAAK,kBAAkB,MAAM,KAAK,EAAE,OAAO,OAAO;AAAA,IAC1D;AAAA,EACF;AACH;;EAjJA,KAAA;AAAA,EAUM,OAAM;;AAVZ,MAAA,aAAA,CAAA,WAAA;;sBAEEA,mBAqCM,OAAA;AAAA,IApCH,OAHLC,eAAA;AAAA;yCAGoF,OAAQ,SAAA;AAAA;;IAMhF,OAAgB,iCADxBD,mBAKO,QALP,YAKOE,gBADF,OAAgB,gBAAA,GAAA,CAAA,KAZzBC,mBAAA,IAAA,IAAA;AAAA,KAcIC,UAAA,IAAA,GAAAJ,mBAwBWK,gBAtCfC,WAe0B,SAAA,wBAf1B,CAec,MAAM,MAAC;AAfrB,aAAAF,UAAA,GAAAJ,mBAAAK,UAAA,MAAA;AAAA,QAmBc,SAAA,MAAM,IAAI,KAFlBD,UAAA,GAAAG,YAUEC,wBATK,SAAK,MAAC,IAAI,CAAA,GAAA;AAAA,UAEd,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,MAAK;AAAA,UACL,eAAY;AAAA,UACX,OAvBTP,eAAA;AAAA;qDAuB4G,OAAQ,SAAA;AAAA;gDAK9GD,mBASE,QAAA;AAAA,UAPC,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,eAAY;AAAA,UACX,OAhCTC,eAAA;AAAA;qDAgC4G,OAAQ,SAAA;AAAA;UAI5G,WAAQ;AAAA,QApChB,GAAA,MAAA,IAAA,UAAA;AAAA;;;;;"}

package/dist/vue3/components/lazy_show/lazy_show.vue.cjs CHANGED Viewed

@@ -3,6 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtLazyShow",
   inheritAttrs: false,
   /******************

package/dist/vue3/components/lazy_show/lazy_show.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"lazy_show.vue.cjs","sources":["../../../components/lazy_show/lazy_show.vue"],"sourcesContent":["<template>\n <Transition\n :name=\"transition\"\n :appear=\"appear\"\n v-bind=\"$attrs\"\n :css=\"isCSSEnabled\"\n >\n <div\n v-show=\"show\"\n v-bind=\"$attrs\"\n >\n <!-- @slot Slot for main content -->\n <slot v-if=\"initialized\" />\n </div>\n </Transition>\n</template>\n\n<script>\n/*\n Lazy Show is a utility component that prevents its children from being rendered until the first time it is shown.\n * @see https://dialtone.dialpad.com/components/lazy_show.html\n /\nexport default {\n name: 'DtLazyShow',\n\n inheritAttrs: false,\n\n /****************\n PROPS \n ***************/\n props: {\n /\n * Whether the child slot is shown.\n * @values true, false\n /\n show: {\n type: Boolean,\n default: false,\n },\n\n /\n A valid Vue enter/leave CSS transition name.\n /\n transition: {\n type: String,\n default: null,\n },\n\n /\n Enable/Disable transition animation\n * @values true, false\n /\n appear: {\n type: Boolean,\n default: false,\n },\n },\n\n /****************\n DATA \n ***************/\n data () {\n return {\n initialized: !!this.show,\n };\n },\n\n computed: {\n /\n * Set the css property to false when running tests only.\n * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n * transition `css` property\n * @returns {boolean}\n /\n isCSSEnabled () {\n return process.env.NODE_ENV !== 'test';\n },\n },\n\n /****************\n WATCH \n *****************/\n watch: {\n show: function (newValue) {\n if (!newValue \|\| this.initialized) return;\n\n this.initialized = true;\n },\n },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_Transition","_mergeProps","_withCtx","_createElementVNode","_normalizeProps","_guardReactiveProps","_renderSlot","_createCommentVNode"],"mappings":";;;;AAsBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,cAAc;AAAA;AAAA;AAAA;AAAA,EAKd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKD,OAAQ;AACN,WAAO;AAAA,MACL,aAAa,CAAC,CAAC,KAAK;AAAA;EAEvB;AAAA,EAED,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOR,eAAgB;AACd,aAAO,QAAQ,IAAI,aAAa;AAAA,IACjC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKD,OAAO;AAAA,IACL,MAAM,SAAU,UAAU;AACxB,UAAI,CAAC,YAAY,KAAK,YAAa;AAEnC,WAAK,cAAc;AAAA,IACpB;AAAA,EACF;AACH;;~~AAxFE~~,SAAAA,cAAA,GAAAC,gBAaaC,IAAAA,YAbbC,IAAAA,WAaa;AAAA,IAZV,MAAM,OAAU;AAAA,IAChB,QAAQ,OAAM;AAAA,KACP,KAAM,QAAA,EACb,KAAK,SAAY,aAAA,CAAA,GAAA;AAAA,IALtB,SAAAC,IAAA,QAOI,MAMM;AAAA,yBANNC,IAMM,mBAAA,OAbVC,IAAAA,eAAAC,IAAAA,mBASc,KAAM,MAAA,CAAA,GAAA;AAAA,QAGF,MAAW,cAAvBC,IAAA,WAA2B,0BAZjC,KAAA,GAAA,IAAAC,IAAA,mBAAA,IAAA,IAAA;AAAA;oBAQc,OAAI,IAAA;AAAA;;IARlB,GAAA;AAAA;;;;"}
1	+ {"version":3,"file":"lazy_show.vue.cjs","sources":["../../../components/lazy_show/lazy_show.vue"],"sourcesContent":["<template>\n <Transition\n :name=\"transition\"\n :appear=\"appear\"\n v-bind=\"$attrs\"\n :css=\"isCSSEnabled\"\n >\n <div\n v-show=\"show\"\n v-bind=\"$attrs\"\n >\n <!-- @slot Slot for main content -->\n <slot v-if=\"initialized\" />\n </div>\n </Transition>\n</template>\n\n<script>\n/*\n Lazy Show is a utility component that prevents its children from being rendered until the first time it is shown.\n * @see https://dialtone.dialpad.com/components/lazy_show.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtLazyShow',\n\n inheritAttrs: false,\n\n /****************\n PROPS \n ***************/\n props: {\n /\n * Whether the child slot is shown.\n * @values true, false\n /\n show: {\n type: Boolean,\n default: false,\n },\n\n /\n A valid Vue enter/leave CSS transition name.\n /\n transition: {\n type: String,\n default: null,\n },\n\n /\n Enable/Disable transition animation\n * @values true, false\n /\n appear: {\n type: Boolean,\n default: false,\n },\n },\n\n /****************\n DATA \n ***************/\n data () {\n return {\n initialized: !!this.show,\n };\n },\n\n computed: {\n /\n * Set the css property to false when running tests only.\n * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n * transition `css` property\n * @returns {boolean}\n /\n isCSSEnabled () {\n return process.env.NODE_ENV !== 'test';\n },\n },\n\n /****************\n WATCH \n *****************/\n watch: {\n show: function (newValue) {\n if (!newValue \|\| this.initialized) return;\n\n this.initialized = true;\n },\n },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_Transition","_mergeProps","_withCtx","_createElementVNode","_normalizeProps","_guardReactiveProps","_renderSlot","_createCommentVNode"],"mappings":";;;;AAsBA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,cAAc;AAAA;AAAA;AAAA;AAAA,EAKd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKD,OAAQ;AACN,WAAO;AAAA,MACL,aAAa,CAAC,CAAC,KAAK;AAAA;EAEvB;AAAA,EAED,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOR,eAAgB;AACd,aAAO,QAAQ,IAAI,aAAa;AAAA,IACjC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKD,OAAO;AAAA,IACL,MAAM,SAAU,UAAU;AACxB,UAAI,CAAC,YAAY,KAAK,YAAa;AAEnC,WAAK,cAAc;AAAA,IACpB;AAAA,EACF;AACH;;AAzFE,SAAAA,cAAA,GAAAC,gBAaaC,IAAAA,YAbbC,IAAAA,WAaa;AAAA,IAZV,MAAM,OAAU;AAAA,IAChB,QAAQ,OAAM;AAAA,KACP,KAAM,QAAA,EACb,KAAK,SAAY,aAAA,CAAA,GAAA;AAAA,IALtB,SAAAC,IAAA,QAOI,MAMM;AAAA,yBANNC,IAMM,mBAAA,OAbVC,IAAAA,eAAAC,IAAAA,mBASc,KAAM,MAAA,CAAA,GAAA;AAAA,QAGF,MAAW,cAAvBC,IAAA,WAA2B,0BAZjC,KAAA,GAAA,IAAAC,IAAA,mBAAA,IAAA,IAAA;AAAA;oBAQc,OAAI,IAAA;AAAA;;IARlB,GAAA;AAAA;;;;"}

package/dist/vue3/components/lazy_show/lazy_show.vue.js CHANGED Viewed

@@ -1,6 +1,7 @@
 import { openBlock, createBlock, Transition, mergeProps, withCtx, withDirectives, createElementVNode, normalizeProps, guardReactiveProps, renderSlot, createCommentVNode, vShow } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtLazyShow",
   inheritAttrs: false,
   /******************

package/dist/vue3/components/lazy_show/lazy_show.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"lazy_show.vue.js","sources":["../../../components/lazy_show/lazy_show.vue"],"sourcesContent":["<template>\n <Transition\n :name=\"transition\"\n :appear=\"appear\"\n v-bind=\"$attrs\"\n :css=\"isCSSEnabled\"\n >\n <div\n v-show=\"show\"\n v-bind=\"$attrs\"\n >\n <!-- @slot Slot for main content -->\n <slot v-if=\"initialized\" />\n </div>\n </Transition>\n</template>\n\n<script>\n/*\n Lazy Show is a utility component that prevents its children from being rendered until the first time it is shown.\n * @see https://dialtone.dialpad.com/components/lazy_show.html\n /\nexport default {\n name: 'DtLazyShow',\n\n inheritAttrs: false,\n\n /****************\n PROPS \n ***************/\n props: {\n /\n * Whether the child slot is shown.\n * @values true, false\n /\n show: {\n type: Boolean,\n default: false,\n },\n\n /\n A valid Vue enter/leave CSS transition name.\n /\n transition: {\n type: String,\n default: null,\n },\n\n /\n Enable/Disable transition animation\n * @values true, false\n /\n appear: {\n type: Boolean,\n default: false,\n },\n },\n\n /****************\n DATA \n ***************/\n data () {\n return {\n initialized: !!this.show,\n };\n },\n\n computed: {\n /\n * Set the css property to false when running tests only.\n * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n * transition `css` property\n * @returns {boolean}\n /\n isCSSEnabled () {\n return process.env.NODE_ENV !== 'test';\n },\n },\n\n /****************\n WATCH \n *****************/\n watch: {\n show: function (newValue) {\n if (!newValue \|\| this.initialized) return;\n\n this.initialized = true;\n },\n },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_Transition","_mergeProps","_withCtx","_createElementVNode","_normalizeProps","_guardReactiveProps","_renderSlot","_createCommentVNode"],"mappings":";;AAsBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,cAAc;AAAA;AAAA;AAAA;AAAA,EAKd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKD,OAAQ;AACN,WAAO;AAAA,MACL,aAAa,CAAC,CAAC,KAAK;AAAA;EAEvB;AAAA,EAED,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOR,eAAgB;AACd,aAAO,QAAQ,IAAI,aAAa;AAAA,IACjC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKD,OAAO;AAAA,IACL,MAAM,SAAU,UAAU;AACxB,UAAI,CAAC,YAAY,KAAK,YAAa;AAEnC,WAAK,cAAc;AAAA,IACpB;AAAA,EACF;AACH;;~~AAxFE~~,SAAAA,UAAA,GAAAC,YAaaC,YAbbC,WAaa;AAAA,IAZV,MAAM,OAAU;AAAA,IAChB,QAAQ,OAAM;AAAA,KACP,KAAM,QAAA,EACb,KAAK,SAAY,aAAA,CAAA,GAAA;AAAA,IALtB,SAAAC,QAOI,MAMM;AAAA,qBANNC,mBAMM,OAbVC,eAAAC,mBASc,KAAM,MAAA,CAAA,GAAA;AAAA,QAGF,MAAW,cAAvBC,WAA2B,0BAZjC,KAAA,GAAA,IAAAC,mBAAA,IAAA,IAAA;AAAA;gBAQc,OAAI,IAAA;AAAA;;IARlB,GAAA;AAAA;;;"}
1	+ {"version":3,"file":"lazy_show.vue.js","sources":["../../../components/lazy_show/lazy_show.vue"],"sourcesContent":["<template>\n <Transition\n :name=\"transition\"\n :appear=\"appear\"\n v-bind=\"$attrs\"\n :css=\"isCSSEnabled\"\n >\n <div\n v-show=\"show\"\n v-bind=\"$attrs\"\n >\n <!-- @slot Slot for main content -->\n <slot v-if=\"initialized\" />\n </div>\n </Transition>\n</template>\n\n<script>\n/*\n Lazy Show is a utility component that prevents its children from being rendered until the first time it is shown.\n * @see https://dialtone.dialpad.com/components/lazy_show.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtLazyShow',\n\n inheritAttrs: false,\n\n /****************\n PROPS \n ***************/\n props: {\n /\n * Whether the child slot is shown.\n * @values true, false\n /\n show: {\n type: Boolean,\n default: false,\n },\n\n /\n A valid Vue enter/leave CSS transition name.\n /\n transition: {\n type: String,\n default: null,\n },\n\n /\n Enable/Disable transition animation\n * @values true, false\n /\n appear: {\n type: Boolean,\n default: false,\n },\n },\n\n /****************\n DATA \n ***************/\n data () {\n return {\n initialized: !!this.show,\n };\n },\n\n computed: {\n /\n * Set the css property to false when running tests only.\n * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n * transition `css` property\n * @returns {boolean}\n /\n isCSSEnabled () {\n return process.env.NODE_ENV !== 'test';\n },\n },\n\n /****************\n WATCH \n *****************/\n watch: {\n show: function (newValue) {\n if (!newValue \|\| this.initialized) return;\n\n this.initialized = true;\n },\n },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_Transition","_mergeProps","_withCtx","_createElementVNode","_normalizeProps","_guardReactiveProps","_renderSlot","_createCommentVNode"],"mappings":";;AAsBA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,cAAc;AAAA;AAAA;AAAA;AAAA,EAKd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKD,OAAQ;AACN,WAAO;AAAA,MACL,aAAa,CAAC,CAAC,KAAK;AAAA;EAEvB;AAAA,EAED,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOR,eAAgB;AACd,aAAO,QAAQ,IAAI,aAAa;AAAA,IACjC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKD,OAAO;AAAA,IACL,MAAM,SAAU,UAAU;AACxB,UAAI,CAAC,YAAY,KAAK,YAAa;AAEnC,WAAK,cAAc;AAAA,IACpB;AAAA,EACF;AACH;;AAzFE,SAAAA,UAAA,GAAAC,YAaaC,YAbbC,WAaa;AAAA,IAZV,MAAM,OAAU;AAAA,IAChB,QAAQ,OAAM;AAAA,KACP,KAAM,QAAA,EACb,KAAK,SAAY,aAAA,CAAA,GAAA;AAAA,IALtB,SAAAC,QAOI,MAMM;AAAA,qBANNC,mBAMM,OAbVC,eAAAC,mBASc,KAAM,MAAA,CAAA,GAAA;AAAA,QAGF,MAAW,cAAvBC,WAA2B,0BAZjC,KAAA,GAAA,IAAAC,mBAAA,IAAA,IAAA;AAAA;gBAQc,OAAI,IAAA;AAAA;;IARlB,GAAA;AAAA;;;"}

package/dist/vue3/components/link/link.vue.cjs CHANGED Viewed

@@ -4,6 +4,7 @@ const link_constants = require("./link_constants.cjs");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtLink",
   props: {
     /**

package/dist/vue3/components/link/link.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"link.vue.cjs","sources":["../../../components/link/link.vue"],"sourcesContent":["<template>\n <a\n :class=\"getLinkClasses()\"\n data-qa=\"dt-link\"\n :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </a>\n</template>\n\n<script>\nimport { LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier } from './link_constants';\n\n/*\n A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} href attribute\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n /\nexport default {\n name: 'DtLink',\n\n props: {\n /\n Applies the link variant styles\n * @values null, danger, warning, success, muted, mention\n /\n kind: {\n type: String,\n default: '',\n validator (kind) {\n return LINK_VARIANTS.includes(kind);\n },\n },\n\n /\n Determines whether the link should have inverted styling\n * default is false.\n * @values true, false\n */\n inverted: {\n type: Boolean,\n default: false,\n },\n },\n\n data () {\n return {\n LINK_KIND_MODIFIERS,\n };\n },\n\n methods: {\n getLinkClasses () {\n return [\n 'd-link',\n getLinkKindModifier(this.kind, this.inverted),\n ];\n },\n },\n};\n</script>\n"],"names":["LINK_VARIANTS","LINK_KIND_MODIFIERS","getLinkKindModifier","_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;;;;AAoBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAW,MAAM;AACf,eAAOA,eAAa,cAAC,SAAS,IAAI;AAAA,MACnC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,qBAAAC,eAAmB;AAAA;EAEtB;AAAA,EAED,SAAS;AAAA,IACP,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACAC,eAAAA,oBAAoB,KAAK,MAAM,KAAK,QAAQ;AAAA;IAE/C;AAAA,EACF;AACH;~~AA7DA~~,MAAA,aAAA,CAAA,MAAA;;0BACEC,IAOI,mBAAA,KAAA;AAAA,IAND,OAFLC,mBAEY,SAAc,gBAAA;AAAA,IACtB,WAAQ;AAAA,IACP,MAAgB,UAAA,KAAA,SAAS,KAAA,OAAO,OAAI;AAAA;IAGrCC,eAAQ,KAAA,QAAA,SAAA;AAAA,EAPZ,GAAA,IAAA,UAAA;;;;"}
1	+ {"version":3,"file":"link.vue.cjs","sources":["../../../components/link/link.vue"],"sourcesContent":["<template>\n <a\n :class=\"getLinkClasses()\"\n data-qa=\"dt-link\"\n :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </a>\n</template>\n\n<script>\nimport { LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier } from './link_constants';\n\n/*\n A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} href attribute\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtLink',\n\n props: {\n /\n Applies the link variant styles\n * @values null, danger, warning, success, muted, mention\n /\n kind: {\n type: String,\n default: '',\n validator (kind) {\n return LINK_VARIANTS.includes(kind);\n },\n },\n\n /\n Determines whether the link should have inverted styling\n * default is false.\n * @values true, false\n */\n inverted: {\n type: Boolean,\n default: false,\n },\n },\n\n data () {\n return {\n LINK_KIND_MODIFIERS,\n };\n },\n\n methods: {\n getLinkClasses () {\n return [\n 'd-link',\n getLinkKindModifier(this.kind, this.inverted),\n ];\n },\n },\n};\n</script>\n"],"names":["LINK_VARIANTS","LINK_KIND_MODIFIERS","getLinkKindModifier","_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;;;;AAoBA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAW,MAAM;AACf,eAAOA,eAAa,cAAC,SAAS,IAAI;AAAA,MACnC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,qBAAAC,eAAmB;AAAA;EAEtB;AAAA,EAED,SAAS;AAAA,IACP,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACAC,eAAAA,oBAAoB,KAAK,MAAM,KAAK,QAAQ;AAAA;IAE/C;AAAA,EACF;AACH;AA9DA,MAAA,aAAA,CAAA,MAAA;;0BACEC,IAOI,mBAAA,KAAA;AAAA,IAND,OAFLC,mBAEY,SAAc,gBAAA;AAAA,IACtB,WAAQ;AAAA,IACP,MAAgB,UAAA,KAAA,SAAS,KAAA,OAAO,OAAI;AAAA;IAGrCC,eAAQ,KAAA,QAAA,SAAA;AAAA,EAPZ,GAAA,IAAA,UAAA;;;;"}

package/dist/vue3/components/link/link.vue.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier } from "./link_
 import { openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtLink",
   props: {
     /**

package/dist/vue3/components/link/link.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"link.vue.js","sources":["../../../components/link/link.vue"],"sourcesContent":["<template>\n <a\n :class=\"getLinkClasses()\"\n data-qa=\"dt-link\"\n :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </a>\n</template>\n\n<script>\nimport { LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier } from './link_constants';\n\n/*\n A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} href attribute\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n /\nexport default {\n name: 'DtLink',\n\n props: {\n /\n Applies the link variant styles\n * @values null, danger, warning, success, muted, mention\n /\n kind: {\n type: String,\n default: '',\n validator (kind) {\n return LINK_VARIANTS.includes(kind);\n },\n },\n\n /\n Determines whether the link should have inverted styling\n * default is false.\n * @values true, false\n */\n inverted: {\n type: Boolean,\n default: false,\n },\n },\n\n data () {\n return {\n LINK_KIND_MODIFIERS,\n };\n },\n\n methods: {\n getLinkClasses () {\n return [\n 'd-link',\n getLinkKindModifier(this.kind, this.inverted),\n ];\n },\n },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;;AAoBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAW,MAAM;AACf,eAAO,cAAc,SAAS,IAAI;AAAA,MACnC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AAAA,EAED,SAAS;AAAA,IACP,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACA,oBAAoB,KAAK,MAAM,KAAK,QAAQ;AAAA;IAE/C;AAAA,EACF;AACH;~~AA7DA~~,MAAA,aAAA,CAAA,MAAA;;sBACEA,mBAOI,KAAA;AAAA,IAND,OAFLC,eAEY,SAAc,gBAAA;AAAA,IACtB,WAAQ;AAAA,IACP,MAAgB,UAAA,KAAA,SAAS,KAAA,OAAO,OAAI;AAAA;IAGrCC,WAAQ,KAAA,QAAA,SAAA;AAAA,EAPZ,GAAA,IAAA,UAAA;;;"}
1	+ {"version":3,"file":"link.vue.js","sources":["../../../components/link/link.vue"],"sourcesContent":["<template>\n <a\n :class=\"getLinkClasses()\"\n data-qa=\"dt-link\"\n :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </a>\n</template>\n\n<script>\nimport { LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier } from './link_constants';\n\n/*\n A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} href attribute\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtLink',\n\n props: {\n /\n Applies the link variant styles\n * @values null, danger, warning, success, muted, mention\n /\n kind: {\n type: String,\n default: '',\n validator (kind) {\n return LINK_VARIANTS.includes(kind);\n },\n },\n\n /\n Determines whether the link should have inverted styling\n * default is false.\n * @values true, false\n */\n inverted: {\n type: Boolean,\n default: false,\n },\n },\n\n data () {\n return {\n LINK_KIND_MODIFIERS,\n };\n },\n\n methods: {\n getLinkClasses () {\n return [\n 'd-link',\n getLinkKindModifier(this.kind, this.inverted),\n ];\n },\n },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;;AAoBA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAW,MAAM;AACf,eAAO,cAAc,SAAS,IAAI;AAAA,MACnC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AAAA,EAED,SAAS;AAAA,IACP,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACA,oBAAoB,KAAK,MAAM,KAAK,QAAQ;AAAA;IAE/C;AAAA,EACF;AACH;AA9DA,MAAA,aAAA,CAAA,MAAA;;sBACEA,mBAOI,KAAA;AAAA,IAND,OAFLC,eAEY,SAAc,gBAAA;AAAA,IACtB,WAAQ;AAAA,IACP,MAAgB,UAAA,KAAA,SAAS,KAAA,OAAO,OAAI;AAAA;IAGrCC,WAAQ,KAAA,QAAA,SAAA;AAAA,EAPZ,GAAA,IAAA,UAAA;;;"}

package/dist/vue3/components/list_item/list_item.vue.cjs CHANGED Viewed

@@ -8,6 +8,7 @@ const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helpe
 const item_layout = require("../item_layout/item_layout.vue.cjs");
 const ROLES = ["listitem", "menuitem", "option"];
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtListItem",
   components: {
     DtItemLayout: item_layout.default,

package/dist/vue3/components/list_item/list_item.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"list_item.vue.cjs","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<template>\n <component\n :is=\"elementType\"\n :id=\"id\"\n :class=\"['d-list-item', {\n 'd-list-item--focusable': isFocusable,\n 'd-list-item--highlighted': isHighlighted,\n 'd-list-item--static': !isHoverable,\n }]\"\n :tabindex=\"isFocusable ? 0 : -1\"\n :role=\"role\"\n :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n v-on=\"listItemListeners\"\n >\n <component\n :is=\"listItemType\"\n v-if=\"listItemType\"\n >\n <template\n v-for=\"(_, slotName) in $slots\"\n #[slotName]\n >\n <!-- @slot named slots for custom list items -->\n <slot :name=\"slotName\" />\n </template>\n <template\n v-if=\"selected\"\n #selected\n >\n <dt-icon-check\n size=\"400\"\n class=\"d-list-item--selected-icon\"\n />\n </template>\n </component>\n <!-- @slot slot for the main content -->\n <slot v-else />\n </component>\n</template>\n\n<script>\nimport {\n LIST_ITEM_TYPES,\n LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue3';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/*\n A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n /\nexport default {\n name: 'DtListItem',\n\n components: {\n DtItemLayout,\n DtIconCheck,\n },\n\n /\n Value provided from keyboard_list_navigation.js using id prop.\n /\n inject: {\n highlightId: { default: null },\n },\n\n props: {\n /\n Id for the item.\n /\n id: {\n type: String,\n default () { return utils.getUniqueString(); },\n },\n\n /\n String to use for the item's role.\n /\n role: {\n type: String,\n default: 'listitem',\n validator: (role) => (ROLES).includes(role),\n },\n\n /\n HTML element type (tag name) of the content wrapper element.\n /\n elementType: {\n type: String,\n default: 'li',\n },\n\n /\n The type of child list item to use.\n * @values default, custom\n /\n type: {\n type: String,\n default: LIST_ITEM_TYPES.DEFAULT,\n validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n },\n\n /\n The type of navigation that this component should support.\n * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n * - \"tab\" for items that are navigated using the TAB key.\n * - \"none\" for static items that are not interactive.\n * @values arrow-keys, tab, none\n /\n navigationType: {\n type: String,\n default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n },\n\n /\n Applies selected styles to the list item\n /\n selected: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /\n Key down event\n \n @event keydown\n * @type {KeyboardEvent}\n /\n 'keydown',\n\n /\n Native mouse move event\n \n @event mousemove\n * @type {MouseEvent}\n /\n 'mousemove',\n\n /\n Native mouse leave event\n \n @event mouseleave\n * @type {MouseEvent}\n /\n 'mouseleave',\n\n /\n Mouse down event\n \n @event mousedown\n /\n 'mousedown',\n ],\n\n data () {\n return {\n injected: false,\n mouseHighlighted: false,\n };\n },\n\n computed: {\n listItemType () {\n switch (this.type) {\n case LIST_ITEM_TYPES.DEFAULT:\n return DtItemLayout;\n default:\n return null;\n }\n },\n\n listItemListeners () {\n return {\n keydown: event => {\n if (['enter', 'space'].includes(event.code.toLowerCase())) {\n this.onClick(event);\n }\n this.$emit('keydown', event);\n },\n\n mousemove: event => {\n this.onMouseHover(event);\n this.$emit('mousemove', event);\n },\n\n mouseleave: event => {\n this.onMouseLeave(event);\n this.$emit('mouseleave', event);\n },\n };\n },\n\n /\n For keyboard navigation, whether this item is currently highlighted.\n * An injected highlightId will override the default mouseover highlight.\n /\n isHighlighted () {\n if (this.isHoverable) {\n return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n }\n return false;\n },\n\n isFocusable () {\n // Navigation type has to be set to \"tab\".\n return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n },\n\n /\n Whether to apply hover styles.\n */\n isHoverable () {\n return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n },\n },\n\n methods: {\n onClick (e) {\n // disabled as we do not want to override native click\n // eslint-disable-next-line vue/require-explicit-emits\n this.$emit('click', e);\n },\n\n onMouseHover () {\n this.mouseHighlighted = true;\n },\n\n onMouseLeave () {\n this.mouseHighlighted = false;\n },\n },\n};\n</script>\n"],"names":["DtItemLayout","DtIconCheck","utils","LIST_ITEM_TYPES","LIST_ITEM_NAVIGATION_TYPES","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createSlots","_renderList","_renderSlot","_createVNode"],"mappings":"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~~AA7OE~~,SAAAC,IAAAA,UAAA,GAAAC,gBAoCYC,IAAAA,wBAnCL,OAAW,WAAA,GADlBC,eAoCY;AAAA,IAlCT,IAAI,OAAE;AAAA,IACN,OAAK,CAAA,eAAA;AAAA,gCAAoD,SAAW;AAAA,kCAAoC,SAAa;AAAA,8BAAgC,SAAW;AAAA;IAKhK,UAAU,SAAW,cAAA,IAAA;AAAA,IACrB,MAAM,OAAI;AAAA,IACV,iBAAe,OAAA,SAAsB,aAAA,SAAY,SAAa;AAAA,EAC/D,GAAAC,eAAwB,SAAD,iBAAA,CAAA,GAAA;AAAA,IAb3B,SAAAC,IAAA,QAeI,MAoBY;AAAA,MAlBJ,SAAY,gBAFpBL,IAAAA,UAAA,GAAAC,IAAA,YAoBYC,4BAnBL,SAAA,YAAY,KAhBvB,KAAA,EAAA,GAAAI,IAAAA,cAAA,GAAA,EAAA,GAAA;AAAA,QAAAC,IAAAA,WAoBgC,KAAM,QApBtC,CAoBgB,GAAG,aAAQ;;YApB3B,MAqBS;AAAA,YArBT,IAAAF,IAAA,QAwBQ,MAAyB;AAAA,cAAzBG,eAAyB,aAAZ,QAAQ;AAAA;;;QAGf,OAAQ;UA3BtB,MA4BS;AAAA,UA5BT,IAAAH,IAAA,QA8BQ,MAGE;AAAA,YAHFI,IAAAA,YAGE,0BAAA;AAAA,cAFA,MAAK;AAAA,cACL,OAAM;AAAA;;UAhChB,KAAA;AAAA,YAAA;AAAA,mBAqCID,IAAA,WAAe,0BArCnB,KAAA,GAAA;AAAA;IAAA,GAAA;AAAA;;;;"}
1	+ {"version":3,"file":"list_item.vue.cjs","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<template>\n <component\n :is=\"elementType\"\n :id=\"id\"\n :class=\"['d-list-item', {\n 'd-list-item--focusable': isFocusable,\n 'd-list-item--highlighted': isHighlighted,\n 'd-list-item--static': !isHoverable,\n }]\"\n :tabindex=\"isFocusable ? 0 : -1\"\n :role=\"role\"\n :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n v-on=\"listItemListeners\"\n >\n <component\n :is=\"listItemType\"\n v-if=\"listItemType\"\n >\n <template\n v-for=\"(_, slotName) in $slots\"\n #[slotName]\n >\n <!-- @slot named slots for custom list items -->\n <slot :name=\"slotName\" />\n </template>\n <template\n v-if=\"selected\"\n #selected\n >\n <dt-icon-check\n size=\"400\"\n class=\"d-list-item--selected-icon\"\n />\n </template>\n </component>\n <!-- @slot slot for the main content -->\n <slot v-else />\n </component>\n</template>\n\n<script>\nimport {\n LIST_ITEM_TYPES,\n LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue3';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/*\n A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtListItem',\n\n components: {\n DtItemLayout,\n DtIconCheck,\n },\n\n /\n Value provided from keyboard_list_navigation.js using id prop.\n /\n inject: {\n highlightId: { default: null },\n },\n\n props: {\n /\n Id for the item.\n /\n id: {\n type: String,\n default () { return utils.getUniqueString(); },\n },\n\n /\n String to use for the item's role.\n /\n role: {\n type: String,\n default: 'listitem',\n validator: (role) => (ROLES).includes(role),\n },\n\n /\n HTML element type (tag name) of the content wrapper element.\n /\n elementType: {\n type: String,\n default: 'li',\n },\n\n /\n The type of child list item to use.\n * @values default, custom\n /\n type: {\n type: String,\n default: LIST_ITEM_TYPES.DEFAULT,\n validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n },\n\n /\n The type of navigation that this component should support.\n * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n * - \"tab\" for items that are navigated using the TAB key.\n * - \"none\" for static items that are not interactive.\n * @values arrow-keys, tab, none\n /\n navigationType: {\n type: String,\n default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n },\n\n /\n Applies selected styles to the list item\n /\n selected: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /\n Key down event\n \n @event keydown\n * @type {KeyboardEvent}\n /\n 'keydown',\n\n /\n Native mouse move event\n \n @event mousemove\n * @type {MouseEvent}\n /\n 'mousemove',\n\n /\n Native mouse leave event\n \n @event mouseleave\n * @type {MouseEvent}\n /\n 'mouseleave',\n\n /\n Mouse down event\n \n @event mousedown\n /\n 'mousedown',\n ],\n\n data () {\n return {\n injected: false,\n mouseHighlighted: false,\n };\n },\n\n computed: {\n listItemType () {\n switch (this.type) {\n case LIST_ITEM_TYPES.DEFAULT:\n return DtItemLayout;\n default:\n return null;\n }\n },\n\n listItemListeners () {\n return {\n keydown: event => {\n if (['enter', 'space'].includes(event.code.toLowerCase())) {\n this.onClick(event);\n }\n this.$emit('keydown', event);\n },\n\n mousemove: event => {\n this.onMouseHover(event);\n this.$emit('mousemove', event);\n },\n\n mouseleave: event => {\n this.onMouseLeave(event);\n this.$emit('mouseleave', event);\n },\n };\n },\n\n /\n For keyboard navigation, whether this item is currently highlighted.\n * An injected highlightId will override the default mouseover highlight.\n /\n isHighlighted () {\n if (this.isHoverable) {\n return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n }\n return false;\n },\n\n isFocusable () {\n // Navigation type has to be set to \"tab\".\n return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n },\n\n /\n Whether to apply hover styles.\n */\n isHoverable () {\n return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n },\n },\n\n methods: {\n onClick (e) {\n // disabled as we do not want to override native click\n // eslint-disable-next-line vue/require-explicit-emits\n this.$emit('click', e);\n },\n\n onMouseHover () {\n this.mouseHighlighted = true;\n },\n\n onMouseLeave () {\n this.mouseHighlighted = false;\n },\n },\n};\n</script>\n"],"names":["DtItemLayout","DtIconCheck","utils","LIST_ITEM_TYPES","LIST_ITEM_NAVIGATION_TYPES","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createSlots","_renderList","_renderSlot","_createVNode"],"mappings":";;;;;;;;AAkDA,MAAM,QAAQ,CAAC,YAAY,YAAY,QAAQ;AAM/C,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY;AAAA,kBACVA,YAAY;AAAA,iBACZC,KAAW;AAAA,EACZ;AAAA;AAAA;AAAA;AAAA,EAKD,QAAQ;AAAA,IACN,aAAa,EAAE,SAAS,KAAM;AAAA,EAC/B;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AAAE,eAAOC,qBAAM,gBAAiB;AAAA,MAAG;AAAA,IAC/C;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,SAAU,MAAO,SAAS,IAAI;AAAA,IAC3C;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAASC,oBAAe,gBAAC;AAAA,MACzB,WAAW,CAAC,MAAM,OAAO,OAAOA,mCAAe,EAAE,SAAS,CAAC;AAAA,IAC5D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAASC,oBAA0B,2BAAC;AAAA,MACpC,WAAW,CAAC,MAAM,OAAO,OAAOA,8CAA0B,EAAE,SAAS,CAAC;AAAA,IACvE;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,UAAU;AAAA,MACV,kBAAkB;AAAA;EAErB;AAAA,EAED,UAAU;AAAA,IACR,eAAgB;AACd,cAAQ,KAAK,MAAI;AAAA,QACf,KAAKD,oBAAe,gBAAC;AACnB,iBAAOH;QACT;AACE,iBAAO;AAAA,MACX;AAAA,IACD;AAAA,IAED,oBAAqB;AACnB,aAAO;AAAA,QACL,SAAS,WAAS;AAChB,cAAI,CAAC,SAAS,OAAO,EAAE,SAAS,MAAM,KAAK,YAAW,CAAE,GAAG;AACzD,iBAAK,QAAQ,KAAK;AAAA,UACpB;AACA,eAAK,MAAM,WAAW,KAAK;AAAA,QAC5B;AAAA,QAED,WAAW,WAAS;AAClB,eAAK,aAAa,KAAK;AACvB,eAAK,MAAM,aAAa,KAAK;AAAA,QAC9B;AAAA,QAED,YAAY,WAAS;AACnB,eAAK,aAAa,KAAK;AACvB,eAAK,MAAM,cAAc,KAAK;AAAA,QAC/B;AAAA;IAEJ;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,gBAAiB;AACf,UAAI,KAAK,aAAa;AACpB,eAAO,KAAK,eAAe,KAAK,YAAW,IAAK,KAAK,OAAO,KAAK,gBAAgB,KAAK;AAAA,MACxF;AACA,aAAO;AAAA,IACR;AAAA,IAED,cAAe;AAEb,aAAO,KAAK,mBAAmBI,oBAA0B,2BAAC;AAAA,IAC3D;AAAA;AAAA;AAAA;AAAA,IAKD,cAAe;AACb,aAAO,KAAK,mBAAmBA,oBAA0B,2BAAC;AAAA,IAC3D;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,QAAS,GAAG;AAGV,WAAK,MAAM,SAAS,CAAC;AAAA,IACtB;AAAA,IAED,eAAgB;AACd,WAAK,mBAAmB;AAAA,IACzB;AAAA,IAED,eAAgB;AACd,WAAK,mBAAmB;AAAA,IACzB;AAAA,EACF;AACH;;;AA9OE,SAAAC,IAAAA,UAAA,GAAAC,gBAoCYC,IAAAA,wBAnCL,OAAW,WAAA,GADlBC,eAoCY;AAAA,IAlCT,IAAI,OAAE;AAAA,IACN,OAAK,CAAA,eAAA;AAAA,gCAAoD,SAAW;AAAA,kCAAoC,SAAa;AAAA,8BAAgC,SAAW;AAAA;IAKhK,UAAU,SAAW,cAAA,IAAA;AAAA,IACrB,MAAM,OAAI;AAAA,IACV,iBAAe,OAAA,SAAsB,aAAA,SAAY,SAAa;AAAA,EAC/D,GAAAC,eAAwB,SAAD,iBAAA,CAAA,GAAA;AAAA,IAb3B,SAAAC,IAAA,QAeI,MAoBY;AAAA,MAlBJ,SAAY,gBAFpBL,IAAAA,UAAA,GAAAC,IAAA,YAoBYC,4BAnBL,SAAA,YAAY,KAhBvB,KAAA,EAAA,GAAAI,IAAAA,cAAA,GAAA,EAAA,GAAA;AAAA,QAAAC,IAAAA,WAoBgC,KAAM,QApBtC,CAoBgB,GAAG,aAAQ;;YApB3B,MAqBS;AAAA,YArBT,IAAAF,IAAA,QAwBQ,MAAyB;AAAA,cAAzBG,eAAyB,aAAZ,QAAQ;AAAA;;;QAGf,OAAQ;UA3BtB,MA4BS;AAAA,UA5BT,IAAAH,IAAA,QA8BQ,MAGE;AAAA,YAHFI,IAAAA,YAGE,0BAAA;AAAA,cAFA,MAAK;AAAA,cACL,OAAM;AAAA;;UAhChB,KAAA;AAAA,YAAA;AAAA,mBAqCID,IAAA,WAAe,0BArCnB,KAAA,GAAA;AAAA;IAAA,GAAA;AAAA;;;;"}

package/dist/vue3/components/list_item/list_item.vue.js CHANGED Viewed

@@ -6,6 +6,7 @@ import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 import DtItemLayout from "../item_layout/item_layout.vue.js";
 const ROLES = ["listitem", "menuitem", "option"];
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtListItem",
   components: {
     DtItemLayout,

package/dist/vue3/components/list_item/list_item.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"list_item.vue.js","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<template>\n <component\n :is=\"elementType\"\n :id=\"id\"\n :class=\"['d-list-item', {\n 'd-list-item--focusable': isFocusable,\n 'd-list-item--highlighted': isHighlighted,\n 'd-list-item--static': !isHoverable,\n }]\"\n :tabindex=\"isFocusable ? 0 : -1\"\n :role=\"role\"\n :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n v-on=\"listItemListeners\"\n >\n <component\n :is=\"listItemType\"\n v-if=\"listItemType\"\n >\n <template\n v-for=\"(_, slotName) in $slots\"\n #[slotName]\n >\n <!-- @slot named slots for custom list items -->\n <slot :name=\"slotName\" />\n </template>\n <template\n v-if=\"selected\"\n #selected\n >\n <dt-icon-check\n size=\"400\"\n class=\"d-list-item--selected-icon\"\n />\n </template>\n </component>\n <!-- @slot slot for the main content -->\n <slot v-else />\n </component>\n</template>\n\n<script>\nimport {\n LIST_ITEM_TYPES,\n LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue3';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/*\n A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n /\nexport default {\n name: 'DtListItem',\n\n components: {\n DtItemLayout,\n DtIconCheck,\n },\n\n /\n Value provided from keyboard_list_navigation.js using id prop.\n /\n inject: {\n highlightId: { default: null },\n },\n\n props: {\n /\n Id for the item.\n /\n id: {\n type: String,\n default () { return utils.getUniqueString(); },\n },\n\n /\n String to use for the item's role.\n /\n role: {\n type: String,\n default: 'listitem',\n validator: (role) => (ROLES).includes(role),\n },\n\n /\n HTML element type (tag name) of the content wrapper element.\n /\n elementType: {\n type: String,\n default: 'li',\n },\n\n /\n The type of child list item to use.\n * @values default, custom\n /\n type: {\n type: String,\n default: LIST_ITEM_TYPES.DEFAULT,\n validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n },\n\n /\n The type of navigation that this component should support.\n * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n * - \"tab\" for items that are navigated using the TAB key.\n * - \"none\" for static items that are not interactive.\n * @values arrow-keys, tab, none\n /\n navigationType: {\n type: String,\n default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n },\n\n /\n Applies selected styles to the list item\n /\n selected: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /\n Key down event\n \n @event keydown\n * @type {KeyboardEvent}\n /\n 'keydown',\n\n /\n Native mouse move event\n \n @event mousemove\n * @type {MouseEvent}\n /\n 'mousemove',\n\n /\n Native mouse leave event\n \n @event mouseleave\n * @type {MouseEvent}\n /\n 'mouseleave',\n\n /\n Mouse down event\n \n @event mousedown\n /\n 'mousedown',\n ],\n\n data () {\n return {\n injected: false,\n mouseHighlighted: false,\n };\n },\n\n computed: {\n listItemType () {\n switch (this.type) {\n case LIST_ITEM_TYPES.DEFAULT:\n return DtItemLayout;\n default:\n return null;\n }\n },\n\n listItemListeners () {\n return {\n keydown: event => {\n if (['enter', 'space'].includes(event.code.toLowerCase())) {\n this.onClick(event);\n }\n this.$emit('keydown', event);\n },\n\n mousemove: event => {\n this.onMouseHover(event);\n this.$emit('mousemove', event);\n },\n\n mouseleave: event => {\n this.onMouseLeave(event);\n this.$emit('mouseleave', event);\n },\n };\n },\n\n /\n For keyboard navigation, whether this item is currently highlighted.\n * An injected highlightId will override the default mouseover highlight.\n /\n isHighlighted () {\n if (this.isHoverable) {\n return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n }\n return false;\n },\n\n isFocusable () {\n // Navigation type has to be set to \"tab\".\n return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n },\n\n /\n Whether to apply hover styles.\n */\n isHoverable () {\n return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n },\n },\n\n methods: {\n onClick (e) {\n // disabled as we do not want to override native click\n // eslint-disable-next-line vue/require-explicit-emits\n this.$emit('click', e);\n },\n\n onMouseHover () {\n this.mouseHighlighted = true;\n },\n\n onMouseLeave () {\n this.mouseHighlighted = false;\n },\n },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createSlots","_renderList","_renderSlot","_createVNode"],"mappings":"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~~AA7OE~~,SAAAA,UAAA,GAAAC,YAoCYC,wBAnCL,OAAW,WAAA,GADlBC,WAoCY;AAAA,IAlCT,IAAI,OAAE;AAAA,IACN,OAAK,CAAA,eAAA;AAAA,gCAAoD,SAAW;AAAA,kCAAoC,SAAa;AAAA,8BAAgC,SAAW;AAAA;IAKhK,UAAU,SAAW,cAAA,IAAA;AAAA,IACrB,MAAM,OAAI;AAAA,IACV,iBAAe,OAAA,SAAsB,aAAA,SAAY,SAAa;AAAA,EAC/D,GAAAC,WAAwB,SAAD,iBAAA,CAAA,GAAA;AAAA,IAb3B,SAAAC,QAeI,MAoBY;AAAA,MAlBJ,SAAY,gBAFpBL,UAAA,GAAAC,YAoBYC,wBAnBL,SAAA,YAAY,KAhBvB,KAAA,EAAA,GAAAI,cAAA,GAAA,EAAA,GAAA;AAAA,QAAAC,WAoBgC,KAAM,QApBtC,CAoBgB,GAAG,aAAQ;;YApB3B,MAqBS;AAAA,YArBT,IAAAF,QAwBQ,MAAyB;AAAA,cAAzBG,WAAyB,aAAZ,QAAQ;AAAA;;;QAGf,OAAQ;UA3BtB,MA4BS;AAAA,UA5BT,IAAAH,QA8BQ,MAGE;AAAA,YAHFI,YAGE,0BAAA;AAAA,cAFA,MAAK;AAAA,cACL,OAAM;AAAA;;UAhChB,KAAA;AAAA,YAAA;AAAA,mBAqCID,WAAe,0BArCnB,KAAA,GAAA;AAAA;IAAA,GAAA;AAAA;;;"}
1	+ {"version":3,"file":"list_item.vue.js","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<template>\n <component\n :is=\"elementType\"\n :id=\"id\"\n :class=\"['d-list-item', {\n 'd-list-item--focusable': isFocusable,\n 'd-list-item--highlighted': isHighlighted,\n 'd-list-item--static': !isHoverable,\n }]\"\n :tabindex=\"isFocusable ? 0 : -1\"\n :role=\"role\"\n :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n v-on=\"listItemListeners\"\n >\n <component\n :is=\"listItemType\"\n v-if=\"listItemType\"\n >\n <template\n v-for=\"(_, slotName) in $slots\"\n #[slotName]\n >\n <!-- @slot named slots for custom list items -->\n <slot :name=\"slotName\" />\n </template>\n <template\n v-if=\"selected\"\n #selected\n >\n <dt-icon-check\n size=\"400\"\n class=\"d-list-item--selected-icon\"\n />\n </template>\n </component>\n <!-- @slot slot for the main content -->\n <slot v-else />\n </component>\n</template>\n\n<script>\nimport {\n LIST_ITEM_TYPES,\n LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue3';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/*\n A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n /\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtListItem',\n\n components: {\n DtItemLayout,\n DtIconCheck,\n },\n\n /\n Value provided from keyboard_list_navigation.js using id prop.\n /\n inject: {\n highlightId: { default: null },\n },\n\n props: {\n /\n Id for the item.\n /\n id: {\n type: String,\n default () { return utils.getUniqueString(); },\n },\n\n /\n String to use for the item's role.\n /\n role: {\n type: String,\n default: 'listitem',\n validator: (role) => (ROLES).includes(role),\n },\n\n /\n HTML element type (tag name) of the content wrapper element.\n /\n elementType: {\n type: String,\n default: 'li',\n },\n\n /\n The type of child list item to use.\n * @values default, custom\n /\n type: {\n type: String,\n default: LIST_ITEM_TYPES.DEFAULT,\n validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n },\n\n /\n The type of navigation that this component should support.\n * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n * - \"tab\" for items that are navigated using the TAB key.\n * - \"none\" for static items that are not interactive.\n * @values arrow-keys, tab, none\n /\n navigationType: {\n type: String,\n default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n },\n\n /\n Applies selected styles to the list item\n /\n selected: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /\n Key down event\n \n @event keydown\n * @type {KeyboardEvent}\n /\n 'keydown',\n\n /\n Native mouse move event\n \n @event mousemove\n * @type {MouseEvent}\n /\n 'mousemove',\n\n /\n Native mouse leave event\n \n @event mouseleave\n * @type {MouseEvent}\n /\n 'mouseleave',\n\n /\n Mouse down event\n \n @event mousedown\n /\n 'mousedown',\n ],\n\n data () {\n return {\n injected: false,\n mouseHighlighted: false,\n };\n },\n\n computed: {\n listItemType () {\n switch (this.type) {\n case LIST_ITEM_TYPES.DEFAULT:\n return DtItemLayout;\n default:\n return null;\n }\n },\n\n listItemListeners () {\n return {\n keydown: event => {\n if (['enter', 'space'].includes(event.code.toLowerCase())) {\n this.onClick(event);\n }\n this.$emit('keydown', event);\n },\n\n mousemove: event => {\n this.onMouseHover(event);\n this.$emit('mousemove', event);\n },\n\n mouseleave: event => {\n this.onMouseLeave(event);\n this.$emit('mouseleave', event);\n },\n };\n },\n\n /\n For keyboard navigation, whether this item is currently highlighted.\n * An injected highlightId will override the default mouseover highlight.\n /\n isHighlighted () {\n if (this.isHoverable) {\n return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n }\n return false;\n },\n\n isFocusable () {\n // Navigation type has to be set to \"tab\".\n return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n },\n\n /\n Whether to apply hover styles.\n */\n isHoverable () {\n return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n },\n },\n\n methods: {\n onClick (e) {\n // disabled as we do not want to override native click\n // eslint-disable-next-line vue/require-explicit-emits\n this.$emit('click', e);\n },\n\n onMouseHover () {\n this.mouseHighlighted = true;\n },\n\n onMouseLeave () {\n this.mouseHighlighted = false;\n },\n },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createSlots","_renderList","_renderSlot","_createVNode"],"mappings":"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"}

package/dist/vue3/components/list_item_group/list_item_group.vue.cjs CHANGED Viewed

@@ -4,6 +4,7 @@ const common_utils = require("../../common/utils.cjs");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtListItemGroup",
   props: {
     /**