@dialpad/dialtone-vue 2.138.0 → 2.139.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.
- package/dist/lib/input.cjs +1 -1
- package/dist/lib/input.cjs.map +1 -1
- package/dist/lib/input.js +1 -1
- package/dist/lib/input.js.map +1 -1
- package/dist/lib/message-input.cjs +114 -78
- package/dist/lib/message-input.cjs.map +1 -1
- package/dist/lib/message-input.js +114 -78
- package/dist/lib/message-input.js.map +1 -1
- package/dist/lib/rich-text-editor.cjs +38 -16
- package/dist/lib/rich-text-editor.cjs.map +1 -1
- package/dist/lib/rich-text-editor.js +39 -17
- package/dist/lib/rich-text-editor.js.map +1 -1
- package/dist/style.css +64 -6
- package/dist/types/components/rich_text_editor/extensions/emoji/emoji.d.ts.map +1 -1
- package/dist/types/components/rich_text_editor/rich_text_editor.vue.d.ts +38 -4
- package/dist/types/components/rich_text_editor/rich_text_editor.vue.d.ts.map +1 -1
- package/dist/types/recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue.d.ts +47 -0
- package/dist/types/recipes/conversation_view/message_input/meeting_pill/MeetingPill.vue.d.ts.map +1 -0
- package/dist/types/recipes/conversation_view/message_input/meeting_pill/meeting_pill.d.ts +4 -0
- package/dist/types/recipes/conversation_view/message_input/meeting_pill/meeting_pill.d.ts.map +1 -0
- package/dist/types/recipes/conversation_view/message_input/message_input.vue.d.ts +17 -3
- package/dist/types/recipes/conversation_view/message_input/message_input.vue.d.ts.map +1 -1
- package/package.json +3 -3
package/dist/lib/input.cjs
CHANGED
|
@@ -473,7 +473,7 @@ var _sfc_render = function render() {
|
|
|
473
473
|
_vm.descriptionSizeClasses[_vm.size]
|
|
474
474
|
], attrs: { "id": _vm.descriptionKey, "data-qa": "dt-input-description" } }, [_vm.$slots.description || _vm.description ? _c("div", [_vm._t("description", function() {
|
|
475
475
|
return [_vm._v(_vm._s(_vm.description))];
|
|
476
|
-
})], 2) : _vm._e(), _vm.shouldValidateLength ? _c("div", { staticClass: "d-input__length-description", attrs: { "data-qa": "dt-input-length-description" } }, [_vm._v(" " + _vm._s(_vm.validationProps.length.description) + " ")]) : _vm._e()]) : _vm._e(), _c("div", { class: _vm.inputWrapperClasses(), attrs: { "read-only": _vm.disabled } }, [_vm.$slots.leftIcon ? _c("span", { class: _vm.inputIconClasses("left"), attrs: { "data-qa": "dt-input-left-icon-wrapper" }, on: { "focusout": _vm.onBlur } }, [_vm._t("leftIcon")], 2) : _vm._e(), _vm.isTextarea ? _c("textarea", _vm._g(_vm._b({ ref: "input", class: _vm.inputClasses(), attrs: { "name": _vm.name, "disabled": _vm.disabled, "maxlength": _vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null, "data-qa": _vm.$attrs["data-qa"] ?? "dt-input-input" }, domProps: { "value": _vm.value } }, "textarea", _vm.$attrs, false), _vm.inputListeners)) : _c("input", _vm._g(_vm._b({ ref: "input", class: _vm.inputClasses(), attrs: { "name": _vm.name, "type": _vm.type, "disabled": _vm.disabled, "maxlength": _vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null, "data-qa": _vm.$attrs["data-qa"] ?? "dt-input-input" }, domProps: { "value": _vm.value } }, "input", _vm.$attrs, false), _vm.inputListeners)), _vm.$slots.rightIcon ? _c("span", { class: _vm.inputIconClasses("right"), attrs: { "data-qa": "dt-input-right-icon-wrapper" }, on: { "focusout": _vm.onBlur } }, [_vm._t("rightIcon")], 2) : _vm._e()])], 2), _c("dt-validation-messages", _vm._b({ class: _vm.messagesClass, attrs: { "validation-messages": _vm.validationMessages, "show-messages": _vm.showMessages, "data-qa": "dt-input-messages" } }, "dt-validation-messages", _vm.messagesChildProps, false))], 1);
|
|
476
|
+
})], 2) : _vm._e(), _vm.shouldValidateLength ? _c("div", { staticClass: "d-input__length-description", attrs: { "data-qa": "dt-input-length-description" } }, [_vm._v(" " + _vm._s(_vm.validationProps.length.description) + " ")]) : _vm._e()]) : _vm._e(), _c("div", { class: _vm.inputWrapperClasses(), attrs: { "read-only": _vm.disabled } }, [_vm.$slots.leftIcon ? _c("span", { class: _vm.inputIconClasses("left"), attrs: { "data-qa": "dt-input-left-icon-wrapper" }, on: { "focusout": _vm.onBlur } }, [_vm._t("leftIcon")], 2) : _vm._e(), _vm.isTextarea ? _c("textarea", _vm._g(_vm._b({ ref: "input", class: _vm.inputClasses(), attrs: { "name": _vm.name, "disabled": _vm.disabled, "autocomplete": "off", "maxlength": _vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null, "data-qa": _vm.$attrs["data-qa"] ?? "dt-input-input" }, domProps: { "value": _vm.value } }, "textarea", _vm.$attrs, false), _vm.inputListeners)) : _c("input", _vm._g(_vm._b({ ref: "input", class: _vm.inputClasses(), attrs: { "name": _vm.name, "type": _vm.type, "disabled": _vm.disabled, "autocomplete": "off", "maxlength": _vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null, "data-qa": _vm.$attrs["data-qa"] ?? "dt-input-input" }, domProps: { "value": _vm.value } }, "input", _vm.$attrs, false), _vm.inputListeners)), _vm.$slots.rightIcon ? _c("span", { class: _vm.inputIconClasses("right"), attrs: { "data-qa": "dt-input-right-icon-wrapper" }, on: { "focusout": _vm.onBlur } }, [_vm._t("rightIcon")], 2) : _vm._e()])], 2), _c("dt-validation-messages", _vm._b({ class: _vm.messagesClass, attrs: { "validation-messages": _vm.validationMessages, "show-messages": _vm.showMessages, "data-qa": "dt-input-messages" } }, "dt-validation-messages", _vm.messagesChildProps, false))], 1);
|
|
477
477
|
};
|
|
478
478
|
var _sfc_staticRenderFns = [];
|
|
479
479
|
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
|
package/dist/lib/input.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.cjs","sources":["../../components/input/input_constants.js","../../components/input/input.vue"],"sourcesContent":["// Valid input types, any other input types (for example: 'radio' or 'checkbox') should\n// use the respective base vue components (radio.vue and checkout.vue).\nexport const INPUT_TYPES = {\n TEXT: 'text',\n TEXTAREA: 'textarea',\n PASSWORD: 'password',\n EMAIL: 'email',\n NUMBER: 'number',\n DATE: 'date',\n TIME: 'time',\n FILE: 'file',\n};\n\nexport const INPUT_SIZES = {\n EXTRA_SMALL: 'xs',\n SMALL: 'sm',\n DEFAULT: 'md',\n LARGE: 'lg',\n EXTRA_LARGE: 'xl',\n};\n\nexport default {\n INPUT_TYPES,\n INPUT_SIZES,\n};\n","<!-- eslint-disable vue/no-restricted-class -->\n<template>\n <div\n ref=\"container\"\n :class=\"['base-input', { 'd-vi-hidden': hidden }]\"\n data-qa=\"dt-input\"\n >\n <label\n class=\"base-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 'base-input__label-text',\n 'd-label',\n labelSizeClasses[size],\n ]\"\n >\n {{ label }}\n </div>\n </slot>\n <div\n v-if=\"$slots.description || description || shouldValidateLength\"\n :id=\"descriptionKey\"\n ref=\"description\"\n :class=\"[\n 'base-input__description',\n 'd-description',\n descriptionSizeClasses[size],\n ]\"\n data-qa=\"dt-input-description\"\n >\n <div\n v-if=\"$slots.description || description\"\n >\n <!-- @slot slot for description, defaults to description prop -->\n <slot name=\"description\">{{ description }}</slot>\n </div>\n <div\n v-if=\"shouldValidateLength\"\n data-qa=\"dt-input-length-description\"\n class=\"d-input__length-description\"\n >\n {{ validationProps.length.description }}\n </div>\n </div>\n <div\n :class=\"inputWrapperClasses()\"\n :read-only=\"disabled\"\n >\n <span\n v-if=\"$slots.leftIcon\"\n :class=\"inputIconClasses('left')\"\n data-qa=\"dt-input-left-icon-wrapper\"\n @focusout=\"onBlur\"\n >\n <!-- @slot Slot for left icon -->\n <slot name=\"leftIcon\" />\n </span>\n <textarea\n v-if=\"isTextarea\"\n ref=\"input\"\n :value=\"value\"\n :name=\"name\"\n :disabled=\"disabled\"\n :class=\"inputClasses()\"\n :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-input-input'\"\n v-bind=\"$attrs\"\n v-on=\"inputListeners\"\n />\n <input\n v-else\n ref=\"input\"\n :value=\"value\"\n :name=\"name\"\n :type=\"type\"\n :disabled=\"disabled\"\n :class=\"inputClasses()\"\n :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-input-input'\"\n v-bind=\"$attrs\"\n v-on=\"inputListeners\"\n >\n <span\n v-if=\"$slots.rightIcon\"\n :class=\"inputIconClasses('right')\"\n data-qa=\"dt-input-right-icon-wrapper\"\n @focusout=\"onBlur\"\n >\n <!-- @slot Slot for right icon -->\n <slot name=\"rightIcon\" />\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>\nimport { DESCRIPTION_SIZE_TYPES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport { INPUT_TYPES, INPUT_SIZES } from './input_constants';\nimport {\n getUniqueString,\n getValidationState,\n} from '@/common/utils';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { MessagesMixin } from '@/common/mixins/input';\n\n/**\n * An input field is an input control that allows users to enter alphanumeric information.\n * It can have a range of options and supports single line and multi-line lengths,\n * as well as varying formats, including numbers, masked passwords, etc.\n * @property {Boolean} placeholder attribute\n * @see https://dialtone.dialpad.com/components/input.html\n */\nexport default {\n name: 'DtInput',\n\n components: { DtValidationMessages },\n\n mixins: [MessagesMixin],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Name property of the input element\n */\n name: {\n type: String,\n default: '',\n },\n\n /**\n * Type of the input, one of: `text`, `password`, `email`, `number`, `textarea`, 'date', 'time'.\n * When `textarea` a `<textarea>` element will be rendered instead of an `<input>` element.\n * @values text, password, email, number, textarea, date, time\n */\n type: {\n type: String,\n default: INPUT_TYPES.TEXT,\n validator: (t) => Object.values(INPUT_TYPES).includes(t),\n },\n\n /**\n * Value of the input\n */\n value: {\n type: [String, Number],\n default: '',\n },\n\n /**\n * Disables the input\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Label for the input\n */\n label: {\n type: String,\n default: '',\n },\n\n /**\n * Determines visibility of input label.\n * @values true, false\n */\n labelVisible: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Description for the input\n */\n description: {\n type: String,\n default: '',\n },\n\n /**\n * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n * @values null, xs, sm, md, lg, xl\n */\n size: {\n type: String,\n default: null,\n validator: (t) => Object.values(INPUT_SIZES).includes(t),\n },\n\n /**\n * Size of the icon. One of `xs`, `sm`, `md`, `lg`, `xl`. If you do not set this the icon will size relative\n * to the input size\n * @values null, xs, sm, md, lg, xl\n */\n iconSize: {\n type: String,\n default: null,\n validator: (t) => Object.values(INPUT_SIZES).includes(t),\n },\n\n /**\n * Additional class name for the input element.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n */\n inputClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Additional class name for the input wrapper element.\n * Can accept all of String, Object, and Array, i.e. has the\n * same api as Vue's built-in handling of the class attribute.\n */\n inputWrapperClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * The current character length that the user has entered into the input.\n * This will only need to be used if you are using `validate.length` and\n * the string contains abnormal characters.\n * For example, an emoji could take up many characters in the input, but should only count as 1 character.\n * If no number is provided, a built-in length calculation will be used for the length validation.\n */\n currentLength: {\n type: Number,\n default: null,\n },\n\n /**\n * Whether the input will continue to display a warning validation message even if the input has lost focus.\n */\n retainWarning: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Validation for the input. Supports maximum length validation with the structure:\n * `{ \"length\": {\"description\": string, \"max\": number, \"warn\": number, \"message\": string,\n * \"limitMaxLength\": boolean }}`\n */\n validate: {\n type: Object,\n default: null,\n },\n\n /**\n * hidden allows to use input without the element visually present in DOM\n */\n hidden: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native input event\n *\n * @event input\n * @type {String}\n */\n 'input',\n\n /**\n * Native input blur event\n *\n * @event blur\n * @type {FocusEvent}\n */\n 'blur',\n\n /**\n * Input clear event\n *\n * @event clear\n */\n 'clear',\n\n /**\n * Native input focus event\n *\n * @event focus\n * @type {FocusEvent}\n */\n 'focus',\n\n /**\n * Native input focusin event\n *\n * @event focusin\n * @type {FocusEvent}\n */\n 'focusin',\n\n /**\n * Native input focusout event\n *\n * @event focusout\n * @type {FocusEvent}\n */\n 'focusout',\n\n /**\n * Length of the input when currentLength prop is not passed\n *\n * @event update:length\n * @type {Number}\n */\n 'update:length',\n\n /**\n * Result of the input validation\n *\n * @event update:invalid\n * @type {Boolean}\n */\n 'update:invalid',\n ],\n\n data () {\n return {\n descriptionSizeClasses: {\n lg: 'd-description--lg',\n xl: 'd-description--xl',\n },\n\n labelSizeClasses: {\n xs: 'd-label--xs',\n sm: 'd-label--sm',\n md: 'd-label--md',\n lg: 'd-label--lg',\n xl: 'd-label--xl',\n },\n\n isInputFocused: false,\n isInvalid: false,\n defaultLength: 0,\n };\n },\n\n computed: {\n\n isTextarea () {\n return this.type === INPUT_TYPES.TEXTAREA;\n },\n\n isDefaultSize () {\n return this.size === INPUT_SIZES.DEFAULT;\n },\n\n isDefaultIconSize () {\n return this.iconSizeComputed === INPUT_SIZES.DEFAULT;\n },\n\n iconSizeComputed () {\n return this.iconSize ? this.iconSize : this.size;\n },\n\n isValidSize () {\n return Object.values(INPUT_SIZES).includes(this.size);\n },\n\n isValidDescriptionSize () {\n return Object.values(DESCRIPTION_SIZE_TYPES).includes(this.size);\n },\n\n inputComponent () {\n if (this.isTextarea) {\n return 'textarea';\n }\n\n return 'input';\n },\n\n inputListeners () {\n return {\n /* TODO\n Check if any usages of this component leverage $listeners and either remove if unused or scope the removal\n and migration prior to upgrading to Vue 3.x\n */\n ...this.$listeners,\n input: event => this.$emit('input', event.target.value),\n focus: event => {\n this.isInputFocused = true;\n this.$emit('focus', event);\n },\n\n blur: event => {\n this.isInputFocused = false;\n this.onBlur(event);\n },\n };\n },\n\n descriptionKey () {\n return `input-description-${getUniqueString()}`;\n },\n\n inputState () {\n return getValidationState(this.validationMessages);\n },\n\n defaultLengthCalculation () {\n return this.calculateLength(this.value);\n },\n\n validationProps () {\n return {\n length: {\n description: this?.validate?.length?.description,\n max: this?.validate?.length?.max,\n warn: this?.validate?.length?.warn,\n message: this?.validate?.length?.message,\n limitMaxLength: this?.validate?.length?.limitMaxLength ? this.validate.length.limitMaxLength : false,\n },\n };\n },\n\n validationMessages () {\n // Add length validation message if exists\n if (this.showLengthLimitValidation) {\n return this.formattedMessages.concat([this.inputLengthErrorMessage()]);\n }\n\n return this.formattedMessages;\n },\n\n showInputState () {\n return this.showMessages && this.inputState;\n },\n\n inputLength () {\n return this.currentLength ? this.currentLength : this.defaultLengthCalculation;\n },\n\n inputLengthState () {\n if (this.inputLength < this.validationProps.length.warn) {\n return null;\n } else if (this.inputLength <= this.validationProps.length.max) {\n return this.validationProps.length.warn ? VALIDATION_MESSAGE_TYPES.WARNING : null;\n } else {\n return VALIDATION_MESSAGE_TYPES.ERROR;\n }\n },\n\n shouldValidateLength () {\n 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 const sizeClasses = {\n input: {\n xs: 'd-input--xs',\n sm: 'd-input--sm',\n lg: 'd-input--lg',\n xl: 'd-input--xl',\n },\n\n textarea: {\n xs: 'd-textarea--xs',\n sm: 'd-textarea--sm',\n lg: 'd-textarea--lg',\n xl: 'd-textarea--xl',\n },\n };\n\n return sizeClasses[this.inputComponent][this.size];\n },\n\n stateClass () {\n const inputStateClasses = {\n input: {\n error: 'd-input--error base-input__input--error',\n warning: 'd-input--warning base-input__input--warning',\n success: 'd-input--success base-input__input--success',\n },\n\n textarea: {\n error: 'd-textarea--error base-input__input--error',\n warning: 'd-textarea--warning base-input__input--warning',\n success: 'd-textarea--success base-input__input--success',\n },\n };\n return [inputStateClasses[this.inputComponent][this.inputState]];\n },\n },\n\n watch: {\n isInvalid (val) {\n this.$emit('update:invalid', val);\n },\n\n value: {\n immediate: true,\n handler (newValue) {\n if (this.shouldValidateLength) {\n this.validateLength(this.inputLength);\n }\n\n if (this.currentLength == null) {\n this.$emit('update:length', this.calculateLength(newValue));\n }\n },\n },\n },\n\n methods: {\n inputClasses () {\n return [\n 'base-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 inputIconClasses (side) {\n const iconSizeClasses = {\n xs: 'd-input-icon--xs',\n sm: 'd-input-icon--sm',\n lg: 'd-input-icon--lg',\n xl: 'd-input-icon--xl',\n };\n const iconOrientationClasses = {\n left: 'base-input__icon--left d-input-icon--left',\n right: 'base-input__icon--right d-input-icon--right',\n };\n\n return [\n iconOrientationClasses[side],\n 'd-input-icon',\n { [iconSizeClasses[this.iconSizeComputed]]: !this.isDefaultIconSize },\n this.sizeModifierClass,\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 clear () {\n this.$emit('input', '');\n this.$emit('clear');\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};\n</script>\n"],"names":["DtValidationMessages","MessagesMixin","DESCRIPTION_SIZE_TYPES","getUniqueString","getValidationState","VALIDATION_MESSAGE_TYPES"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"input.cjs","sources":["../../components/input/input_constants.js","../../components/input/input.vue"],"sourcesContent":["// Valid input types, any other input types (for example: 'radio' or 'checkbox') should\n// use the respective base vue components (radio.vue and checkout.vue).\nexport const INPUT_TYPES = {\n TEXT: 'text',\n TEXTAREA: 'textarea',\n PASSWORD: 'password',\n EMAIL: 'email',\n NUMBER: 'number',\n DATE: 'date',\n TIME: 'time',\n FILE: 'file',\n};\n\nexport const INPUT_SIZES = {\n EXTRA_SMALL: 'xs',\n SMALL: 'sm',\n DEFAULT: 'md',\n LARGE: 'lg',\n EXTRA_LARGE: 'xl',\n};\n\nexport default {\n INPUT_TYPES,\n INPUT_SIZES,\n};\n","<!-- eslint-disable vue/no-restricted-class -->\n<template>\n <div\n ref=\"container\"\n :class=\"['base-input', { 'd-vi-hidden': hidden }]\"\n data-qa=\"dt-input\"\n >\n <label\n class=\"base-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 'base-input__label-text',\n 'd-label',\n labelSizeClasses[size],\n ]\"\n >\n {{ label }}\n </div>\n </slot>\n <div\n v-if=\"$slots.description || description || shouldValidateLength\"\n :id=\"descriptionKey\"\n ref=\"description\"\n :class=\"[\n 'base-input__description',\n 'd-description',\n descriptionSizeClasses[size],\n ]\"\n data-qa=\"dt-input-description\"\n >\n <div\n v-if=\"$slots.description || description\"\n >\n <!-- @slot slot for description, defaults to description prop -->\n <slot name=\"description\">{{ description }}</slot>\n </div>\n <div\n v-if=\"shouldValidateLength\"\n data-qa=\"dt-input-length-description\"\n class=\"d-input__length-description\"\n >\n {{ validationProps.length.description }}\n </div>\n </div>\n <div\n :class=\"inputWrapperClasses()\"\n :read-only=\"disabled\"\n >\n <span\n v-if=\"$slots.leftIcon\"\n :class=\"inputIconClasses('left')\"\n data-qa=\"dt-input-left-icon-wrapper\"\n @focusout=\"onBlur\"\n >\n <!-- @slot Slot for left icon -->\n <slot name=\"leftIcon\" />\n </span>\n <textarea\n v-if=\"isTextarea\"\n ref=\"input\"\n :value=\"value\"\n :name=\"name\"\n :disabled=\"disabled\"\n autocomplete=\"off\"\n :class=\"inputClasses()\"\n :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-input-input'\"\n v-bind=\"$attrs\"\n v-on=\"inputListeners\"\n />\n <input\n v-else\n ref=\"input\"\n :value=\"value\"\n :name=\"name\"\n :type=\"type\"\n :disabled=\"disabled\"\n autocomplete=\"off\"\n :class=\"inputClasses()\"\n :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-input-input'\"\n v-bind=\"$attrs\"\n v-on=\"inputListeners\"\n >\n <span\n v-if=\"$slots.rightIcon\"\n :class=\"inputIconClasses('right')\"\n data-qa=\"dt-input-right-icon-wrapper\"\n @focusout=\"onBlur\"\n >\n <!-- @slot Slot for right icon -->\n <slot name=\"rightIcon\" />\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>\nimport { DESCRIPTION_SIZE_TYPES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport { INPUT_TYPES, INPUT_SIZES } from './input_constants';\nimport {\n getUniqueString,\n getValidationState,\n} from '@/common/utils';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { MessagesMixin } from '@/common/mixins/input';\n\n/**\n * An input field is an input control that allows users to enter alphanumeric information.\n * It can have a range of options and supports single line and multi-line lengths,\n * as well as varying formats, including numbers, masked passwords, etc.\n * @property {Boolean} placeholder attribute\n * @see https://dialtone.dialpad.com/components/input.html\n */\nexport default {\n name: 'DtInput',\n\n components: { DtValidationMessages },\n\n mixins: [MessagesMixin],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Name property of the input element\n */\n name: {\n type: String,\n default: '',\n },\n\n /**\n * Type of the input, one of: `text`, `password`, `email`, `number`, `textarea`, 'date', 'time'.\n * When `textarea` a `<textarea>` element will be rendered instead of an `<input>` element.\n * @values text, password, email, number, textarea, date, time\n */\n type: {\n type: String,\n default: INPUT_TYPES.TEXT,\n validator: (t) => Object.values(INPUT_TYPES).includes(t),\n },\n\n /**\n * Value of the input\n */\n value: {\n type: [String, Number],\n default: '',\n },\n\n /**\n * Disables the input\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Label for the input\n */\n label: {\n type: String,\n default: '',\n },\n\n /**\n * Determines visibility of input label.\n * @values true, false\n */\n labelVisible: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Description for the input\n */\n description: {\n type: String,\n default: '',\n },\n\n /**\n * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n * @values null, xs, sm, md, lg, xl\n */\n size: {\n type: String,\n default: null,\n validator: (t) => Object.values(INPUT_SIZES).includes(t),\n },\n\n /**\n * Size of the icon. One of `xs`, `sm`, `md`, `lg`, `xl`. If you do not set this the icon will size relative\n * to the input size\n * @values null, xs, sm, md, lg, xl\n */\n iconSize: {\n type: String,\n default: null,\n validator: (t) => Object.values(INPUT_SIZES).includes(t),\n },\n\n /**\n * Additional class name for the input element.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n */\n inputClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Additional class name for the input wrapper element.\n * Can accept all of String, Object, and Array, i.e. has the\n * same api as Vue's built-in handling of the class attribute.\n */\n inputWrapperClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * The current character length that the user has entered into the input.\n * This will only need to be used if you are using `validate.length` and\n * the string contains abnormal characters.\n * For example, an emoji could take up many characters in the input, but should only count as 1 character.\n * If no number is provided, a built-in length calculation will be used for the length validation.\n */\n currentLength: {\n type: Number,\n default: null,\n },\n\n /**\n * Whether the input will continue to display a warning validation message even if the input has lost focus.\n */\n retainWarning: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Validation for the input. Supports maximum length validation with the structure:\n * `{ \"length\": {\"description\": string, \"max\": number, \"warn\": number, \"message\": string,\n * \"limitMaxLength\": boolean }}`\n */\n validate: {\n type: Object,\n default: null,\n },\n\n /**\n * hidden allows to use input without the element visually present in DOM\n */\n hidden: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native input event\n *\n * @event input\n * @type {String}\n */\n 'input',\n\n /**\n * Native input blur event\n *\n * @event blur\n * @type {FocusEvent}\n */\n 'blur',\n\n /**\n * Input clear event\n *\n * @event clear\n */\n 'clear',\n\n /**\n * Native input focus event\n *\n * @event focus\n * @type {FocusEvent}\n */\n 'focus',\n\n /**\n * Native input focusin event\n *\n * @event focusin\n * @type {FocusEvent}\n */\n 'focusin',\n\n /**\n * Native input focusout event\n *\n * @event focusout\n * @type {FocusEvent}\n */\n 'focusout',\n\n /**\n * Length of the input when currentLength prop is not passed\n *\n * @event update:length\n * @type {Number}\n */\n 'update:length',\n\n /**\n * Result of the input validation\n *\n * @event update:invalid\n * @type {Boolean}\n */\n 'update:invalid',\n ],\n\n data () {\n return {\n descriptionSizeClasses: {\n lg: 'd-description--lg',\n xl: 'd-description--xl',\n },\n\n labelSizeClasses: {\n xs: 'd-label--xs',\n sm: 'd-label--sm',\n md: 'd-label--md',\n lg: 'd-label--lg',\n xl: 'd-label--xl',\n },\n\n isInputFocused: false,\n isInvalid: false,\n defaultLength: 0,\n };\n },\n\n computed: {\n\n isTextarea () {\n return this.type === INPUT_TYPES.TEXTAREA;\n },\n\n isDefaultSize () {\n return this.size === INPUT_SIZES.DEFAULT;\n },\n\n isDefaultIconSize () {\n return this.iconSizeComputed === INPUT_SIZES.DEFAULT;\n },\n\n iconSizeComputed () {\n return this.iconSize ? this.iconSize : this.size;\n },\n\n isValidSize () {\n return Object.values(INPUT_SIZES).includes(this.size);\n },\n\n isValidDescriptionSize () {\n return Object.values(DESCRIPTION_SIZE_TYPES).includes(this.size);\n },\n\n inputComponent () {\n if (this.isTextarea) {\n return 'textarea';\n }\n\n return 'input';\n },\n\n inputListeners () {\n return {\n /* TODO\n Check if any usages of this component leverage $listeners and either remove if unused or scope the removal\n and migration prior to upgrading to Vue 3.x\n */\n ...this.$listeners,\n input: event => this.$emit('input', event.target.value),\n focus: event => {\n this.isInputFocused = true;\n this.$emit('focus', event);\n },\n\n blur: event => {\n this.isInputFocused = false;\n this.onBlur(event);\n },\n };\n },\n\n descriptionKey () {\n return `input-description-${getUniqueString()}`;\n },\n\n inputState () {\n return getValidationState(this.validationMessages);\n },\n\n defaultLengthCalculation () {\n return this.calculateLength(this.value);\n },\n\n validationProps () {\n return {\n length: {\n description: this?.validate?.length?.description,\n max: this?.validate?.length?.max,\n warn: this?.validate?.length?.warn,\n message: this?.validate?.length?.message,\n limitMaxLength: this?.validate?.length?.limitMaxLength ? this.validate.length.limitMaxLength : false,\n },\n };\n },\n\n validationMessages () {\n // Add length validation message if exists\n if (this.showLengthLimitValidation) {\n return this.formattedMessages.concat([this.inputLengthErrorMessage()]);\n }\n\n return this.formattedMessages;\n },\n\n showInputState () {\n return this.showMessages && this.inputState;\n },\n\n inputLength () {\n return this.currentLength ? this.currentLength : this.defaultLengthCalculation;\n },\n\n inputLengthState () {\n if (this.inputLength < this.validationProps.length.warn) {\n return null;\n } else if (this.inputLength <= this.validationProps.length.max) {\n return this.validationProps.length.warn ? VALIDATION_MESSAGE_TYPES.WARNING : null;\n } else {\n return VALIDATION_MESSAGE_TYPES.ERROR;\n }\n },\n\n shouldValidateLength () {\n 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 const sizeClasses = {\n input: {\n xs: 'd-input--xs',\n sm: 'd-input--sm',\n lg: 'd-input--lg',\n xl: 'd-input--xl',\n },\n\n textarea: {\n xs: 'd-textarea--xs',\n sm: 'd-textarea--sm',\n lg: 'd-textarea--lg',\n xl: 'd-textarea--xl',\n },\n };\n\n return sizeClasses[this.inputComponent][this.size];\n },\n\n stateClass () {\n const inputStateClasses = {\n input: {\n error: 'd-input--error base-input__input--error',\n warning: 'd-input--warning base-input__input--warning',\n success: 'd-input--success base-input__input--success',\n },\n\n textarea: {\n error: 'd-textarea--error base-input__input--error',\n warning: 'd-textarea--warning base-input__input--warning',\n success: 'd-textarea--success base-input__input--success',\n },\n };\n return [inputStateClasses[this.inputComponent][this.inputState]];\n },\n },\n\n watch: {\n isInvalid (val) {\n this.$emit('update:invalid', val);\n },\n\n value: {\n immediate: true,\n handler (newValue) {\n if (this.shouldValidateLength) {\n this.validateLength(this.inputLength);\n }\n\n if (this.currentLength == null) {\n this.$emit('update:length', this.calculateLength(newValue));\n }\n },\n },\n },\n\n methods: {\n inputClasses () {\n return [\n 'base-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 inputIconClasses (side) {\n const iconSizeClasses = {\n xs: 'd-input-icon--xs',\n sm: 'd-input-icon--sm',\n lg: 'd-input-icon--lg',\n xl: 'd-input-icon--xl',\n };\n const iconOrientationClasses = {\n left: 'base-input__icon--left d-input-icon--left',\n right: 'base-input__icon--right d-input-icon--right',\n };\n\n return [\n iconOrientationClasses[side],\n 'd-input-icon',\n { [iconSizeClasses[this.iconSizeComputed]]: !this.isDefaultIconSize },\n this.sizeModifierClass,\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 clear () {\n this.$emit('input', '');\n this.$emit('clear');\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};\n</script>\n"],"names":["DtValidationMessages","MessagesMixin","DESCRIPTION_SIZE_TYPES","getUniqueString","getValidationState","VALIDATION_MESSAGE_TYPES"],"mappings":"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"}
|
package/dist/lib/input.js
CHANGED
|
@@ -471,7 +471,7 @@ var _sfc_render = function render() {
|
|
|
471
471
|
_vm.descriptionSizeClasses[_vm.size]
|
|
472
472
|
], attrs: { "id": _vm.descriptionKey, "data-qa": "dt-input-description" } }, [_vm.$slots.description || _vm.description ? _c("div", [_vm._t("description", function() {
|
|
473
473
|
return [_vm._v(_vm._s(_vm.description))];
|
|
474
|
-
})], 2) : _vm._e(), _vm.shouldValidateLength ? _c("div", { staticClass: "d-input__length-description", attrs: { "data-qa": "dt-input-length-description" } }, [_vm._v(" " + _vm._s(_vm.validationProps.length.description) + " ")]) : _vm._e()]) : _vm._e(), _c("div", { class: _vm.inputWrapperClasses(), attrs: { "read-only": _vm.disabled } }, [_vm.$slots.leftIcon ? _c("span", { class: _vm.inputIconClasses("left"), attrs: { "data-qa": "dt-input-left-icon-wrapper" }, on: { "focusout": _vm.onBlur } }, [_vm._t("leftIcon")], 2) : _vm._e(), _vm.isTextarea ? _c("textarea", _vm._g(_vm._b({ ref: "input", class: _vm.inputClasses(), attrs: { "name": _vm.name, "disabled": _vm.disabled, "maxlength": _vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null, "data-qa": _vm.$attrs["data-qa"] ?? "dt-input-input" }, domProps: { "value": _vm.value } }, "textarea", _vm.$attrs, false), _vm.inputListeners)) : _c("input", _vm._g(_vm._b({ ref: "input", class: _vm.inputClasses(), attrs: { "name": _vm.name, "type": _vm.type, "disabled": _vm.disabled, "maxlength": _vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null, "data-qa": _vm.$attrs["data-qa"] ?? "dt-input-input" }, domProps: { "value": _vm.value } }, "input", _vm.$attrs, false), _vm.inputListeners)), _vm.$slots.rightIcon ? _c("span", { class: _vm.inputIconClasses("right"), attrs: { "data-qa": "dt-input-right-icon-wrapper" }, on: { "focusout": _vm.onBlur } }, [_vm._t("rightIcon")], 2) : _vm._e()])], 2), _c("dt-validation-messages", _vm._b({ class: _vm.messagesClass, attrs: { "validation-messages": _vm.validationMessages, "show-messages": _vm.showMessages, "data-qa": "dt-input-messages" } }, "dt-validation-messages", _vm.messagesChildProps, false))], 1);
|
|
474
|
+
})], 2) : _vm._e(), _vm.shouldValidateLength ? _c("div", { staticClass: "d-input__length-description", attrs: { "data-qa": "dt-input-length-description" } }, [_vm._v(" " + _vm._s(_vm.validationProps.length.description) + " ")]) : _vm._e()]) : _vm._e(), _c("div", { class: _vm.inputWrapperClasses(), attrs: { "read-only": _vm.disabled } }, [_vm.$slots.leftIcon ? _c("span", { class: _vm.inputIconClasses("left"), attrs: { "data-qa": "dt-input-left-icon-wrapper" }, on: { "focusout": _vm.onBlur } }, [_vm._t("leftIcon")], 2) : _vm._e(), _vm.isTextarea ? _c("textarea", _vm._g(_vm._b({ ref: "input", class: _vm.inputClasses(), attrs: { "name": _vm.name, "disabled": _vm.disabled, "autocomplete": "off", "maxlength": _vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null, "data-qa": _vm.$attrs["data-qa"] ?? "dt-input-input" }, domProps: { "value": _vm.value } }, "textarea", _vm.$attrs, false), _vm.inputListeners)) : _c("input", _vm._g(_vm._b({ ref: "input", class: _vm.inputClasses(), attrs: { "name": _vm.name, "type": _vm.type, "disabled": _vm.disabled, "autocomplete": "off", "maxlength": _vm.shouldLimitMaxLength ? _vm.validationProps.length.max : null, "data-qa": _vm.$attrs["data-qa"] ?? "dt-input-input" }, domProps: { "value": _vm.value } }, "input", _vm.$attrs, false), _vm.inputListeners)), _vm.$slots.rightIcon ? _c("span", { class: _vm.inputIconClasses("right"), attrs: { "data-qa": "dt-input-right-icon-wrapper" }, on: { "focusout": _vm.onBlur } }, [_vm._t("rightIcon")], 2) : _vm._e()])], 2), _c("dt-validation-messages", _vm._b({ class: _vm.messagesClass, attrs: { "validation-messages": _vm.validationMessages, "show-messages": _vm.showMessages, "data-qa": "dt-input-messages" } }, "dt-validation-messages", _vm.messagesChildProps, false))], 1);
|
|
475
475
|
};
|
|
476
476
|
var _sfc_staticRenderFns = [];
|
|
477
477
|
var __component__ = /* @__PURE__ */ normalizeComponent(
|
package/dist/lib/input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","sources":["../../components/input/input_constants.js","../../components/input/input.vue"],"sourcesContent":["// Valid input types, any other input types (for example: 'radio' or 'checkbox') should\n// use the respective base vue components (radio.vue and checkout.vue).\nexport const INPUT_TYPES = {\n TEXT: 'text',\n TEXTAREA: 'textarea',\n PASSWORD: 'password',\n EMAIL: 'email',\n NUMBER: 'number',\n DATE: 'date',\n TIME: 'time',\n FILE: 'file',\n};\n\nexport const INPUT_SIZES = {\n EXTRA_SMALL: 'xs',\n SMALL: 'sm',\n DEFAULT: 'md',\n LARGE: 'lg',\n EXTRA_LARGE: 'xl',\n};\n\nexport default {\n INPUT_TYPES,\n INPUT_SIZES,\n};\n","<!-- eslint-disable vue/no-restricted-class -->\n<template>\n <div\n ref=\"container\"\n :class=\"['base-input', { 'd-vi-hidden': hidden }]\"\n data-qa=\"dt-input\"\n >\n <label\n class=\"base-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 'base-input__label-text',\n 'd-label',\n labelSizeClasses[size],\n ]\"\n >\n {{ label }}\n </div>\n </slot>\n <div\n v-if=\"$slots.description || description || shouldValidateLength\"\n :id=\"descriptionKey\"\n ref=\"description\"\n :class=\"[\n 'base-input__description',\n 'd-description',\n descriptionSizeClasses[size],\n ]\"\n data-qa=\"dt-input-description\"\n >\n <div\n v-if=\"$slots.description || description\"\n >\n <!-- @slot slot for description, defaults to description prop -->\n <slot name=\"description\">{{ description }}</slot>\n </div>\n <div\n v-if=\"shouldValidateLength\"\n data-qa=\"dt-input-length-description\"\n class=\"d-input__length-description\"\n >\n {{ validationProps.length.description }}\n </div>\n </div>\n <div\n :class=\"inputWrapperClasses()\"\n :read-only=\"disabled\"\n >\n <span\n v-if=\"$slots.leftIcon\"\n :class=\"inputIconClasses('left')\"\n data-qa=\"dt-input-left-icon-wrapper\"\n @focusout=\"onBlur\"\n >\n <!-- @slot Slot for left icon -->\n <slot name=\"leftIcon\" />\n </span>\n <textarea\n v-if=\"isTextarea\"\n ref=\"input\"\n :value=\"value\"\n :name=\"name\"\n :disabled=\"disabled\"\n :class=\"inputClasses()\"\n :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-input-input'\"\n v-bind=\"$attrs\"\n v-on=\"inputListeners\"\n />\n <input\n v-else\n ref=\"input\"\n :value=\"value\"\n :name=\"name\"\n :type=\"type\"\n :disabled=\"disabled\"\n :class=\"inputClasses()\"\n :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-input-input'\"\n v-bind=\"$attrs\"\n v-on=\"inputListeners\"\n >\n <span\n v-if=\"$slots.rightIcon\"\n :class=\"inputIconClasses('right')\"\n data-qa=\"dt-input-right-icon-wrapper\"\n @focusout=\"onBlur\"\n >\n <!-- @slot Slot for right icon -->\n <slot name=\"rightIcon\" />\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>\nimport { DESCRIPTION_SIZE_TYPES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport { INPUT_TYPES, INPUT_SIZES } from './input_constants';\nimport {\n getUniqueString,\n getValidationState,\n} from '@/common/utils';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { MessagesMixin } from '@/common/mixins/input';\n\n/**\n * An input field is an input control that allows users to enter alphanumeric information.\n * It can have a range of options and supports single line and multi-line lengths,\n * as well as varying formats, including numbers, masked passwords, etc.\n * @property {Boolean} placeholder attribute\n * @see https://dialtone.dialpad.com/components/input.html\n */\nexport default {\n name: 'DtInput',\n\n components: { DtValidationMessages },\n\n mixins: [MessagesMixin],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Name property of the input element\n */\n name: {\n type: String,\n default: '',\n },\n\n /**\n * Type of the input, one of: `text`, `password`, `email`, `number`, `textarea`, 'date', 'time'.\n * When `textarea` a `<textarea>` element will be rendered instead of an `<input>` element.\n * @values text, password, email, number, textarea, date, time\n */\n type: {\n type: String,\n default: INPUT_TYPES.TEXT,\n validator: (t) => Object.values(INPUT_TYPES).includes(t),\n },\n\n /**\n * Value of the input\n */\n value: {\n type: [String, Number],\n default: '',\n },\n\n /**\n * Disables the input\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Label for the input\n */\n label: {\n type: String,\n default: '',\n },\n\n /**\n * Determines visibility of input label.\n * @values true, false\n */\n labelVisible: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Description for the input\n */\n description: {\n type: String,\n default: '',\n },\n\n /**\n * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n * @values null, xs, sm, md, lg, xl\n */\n size: {\n type: String,\n default: null,\n validator: (t) => Object.values(INPUT_SIZES).includes(t),\n },\n\n /**\n * Size of the icon. One of `xs`, `sm`, `md`, `lg`, `xl`. If you do not set this the icon will size relative\n * to the input size\n * @values null, xs, sm, md, lg, xl\n */\n iconSize: {\n type: String,\n default: null,\n validator: (t) => Object.values(INPUT_SIZES).includes(t),\n },\n\n /**\n * Additional class name for the input element.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n */\n inputClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Additional class name for the input wrapper element.\n * Can accept all of String, Object, and Array, i.e. has the\n * same api as Vue's built-in handling of the class attribute.\n */\n inputWrapperClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * The current character length that the user has entered into the input.\n * This will only need to be used if you are using `validate.length` and\n * the string contains abnormal characters.\n * For example, an emoji could take up many characters in the input, but should only count as 1 character.\n * If no number is provided, a built-in length calculation will be used for the length validation.\n */\n currentLength: {\n type: Number,\n default: null,\n },\n\n /**\n * Whether the input will continue to display a warning validation message even if the input has lost focus.\n */\n retainWarning: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Validation for the input. Supports maximum length validation with the structure:\n * `{ \"length\": {\"description\": string, \"max\": number, \"warn\": number, \"message\": string,\n * \"limitMaxLength\": boolean }}`\n */\n validate: {\n type: Object,\n default: null,\n },\n\n /**\n * hidden allows to use input without the element visually present in DOM\n */\n hidden: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native input event\n *\n * @event input\n * @type {String}\n */\n 'input',\n\n /**\n * Native input blur event\n *\n * @event blur\n * @type {FocusEvent}\n */\n 'blur',\n\n /**\n * Input clear event\n *\n * @event clear\n */\n 'clear',\n\n /**\n * Native input focus event\n *\n * @event focus\n * @type {FocusEvent}\n */\n 'focus',\n\n /**\n * Native input focusin event\n *\n * @event focusin\n * @type {FocusEvent}\n */\n 'focusin',\n\n /**\n * Native input focusout event\n *\n * @event focusout\n * @type {FocusEvent}\n */\n 'focusout',\n\n /**\n * Length of the input when currentLength prop is not passed\n *\n * @event update:length\n * @type {Number}\n */\n 'update:length',\n\n /**\n * Result of the input validation\n *\n * @event update:invalid\n * @type {Boolean}\n */\n 'update:invalid',\n ],\n\n data () {\n return {\n descriptionSizeClasses: {\n lg: 'd-description--lg',\n xl: 'd-description--xl',\n },\n\n labelSizeClasses: {\n xs: 'd-label--xs',\n sm: 'd-label--sm',\n md: 'd-label--md',\n lg: 'd-label--lg',\n xl: 'd-label--xl',\n },\n\n isInputFocused: false,\n isInvalid: false,\n defaultLength: 0,\n };\n },\n\n computed: {\n\n isTextarea () {\n return this.type === INPUT_TYPES.TEXTAREA;\n },\n\n isDefaultSize () {\n return this.size === INPUT_SIZES.DEFAULT;\n },\n\n isDefaultIconSize () {\n return this.iconSizeComputed === INPUT_SIZES.DEFAULT;\n },\n\n iconSizeComputed () {\n return this.iconSize ? this.iconSize : this.size;\n },\n\n isValidSize () {\n return Object.values(INPUT_SIZES).includes(this.size);\n },\n\n isValidDescriptionSize () {\n return Object.values(DESCRIPTION_SIZE_TYPES).includes(this.size);\n },\n\n inputComponent () {\n if (this.isTextarea) {\n return 'textarea';\n }\n\n return 'input';\n },\n\n inputListeners () {\n return {\n /* TODO\n Check if any usages of this component leverage $listeners and either remove if unused or scope the removal\n and migration prior to upgrading to Vue 3.x\n */\n ...this.$listeners,\n input: event => this.$emit('input', event.target.value),\n focus: event => {\n this.isInputFocused = true;\n this.$emit('focus', event);\n },\n\n blur: event => {\n this.isInputFocused = false;\n this.onBlur(event);\n },\n };\n },\n\n descriptionKey () {\n return `input-description-${getUniqueString()}`;\n },\n\n inputState () {\n return getValidationState(this.validationMessages);\n },\n\n defaultLengthCalculation () {\n return this.calculateLength(this.value);\n },\n\n validationProps () {\n return {\n length: {\n description: this?.validate?.length?.description,\n max: this?.validate?.length?.max,\n warn: this?.validate?.length?.warn,\n message: this?.validate?.length?.message,\n limitMaxLength: this?.validate?.length?.limitMaxLength ? this.validate.length.limitMaxLength : false,\n },\n };\n },\n\n validationMessages () {\n // Add length validation message if exists\n if (this.showLengthLimitValidation) {\n return this.formattedMessages.concat([this.inputLengthErrorMessage()]);\n }\n\n return this.formattedMessages;\n },\n\n showInputState () {\n return this.showMessages && this.inputState;\n },\n\n inputLength () {\n return this.currentLength ? this.currentLength : this.defaultLengthCalculation;\n },\n\n inputLengthState () {\n if (this.inputLength < this.validationProps.length.warn) {\n return null;\n } else if (this.inputLength <= this.validationProps.length.max) {\n return this.validationProps.length.warn ? VALIDATION_MESSAGE_TYPES.WARNING : null;\n } else {\n return VALIDATION_MESSAGE_TYPES.ERROR;\n }\n },\n\n shouldValidateLength () {\n 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 const sizeClasses = {\n input: {\n xs: 'd-input--xs',\n sm: 'd-input--sm',\n lg: 'd-input--lg',\n xl: 'd-input--xl',\n },\n\n textarea: {\n xs: 'd-textarea--xs',\n sm: 'd-textarea--sm',\n lg: 'd-textarea--lg',\n xl: 'd-textarea--xl',\n },\n };\n\n return sizeClasses[this.inputComponent][this.size];\n },\n\n stateClass () {\n const inputStateClasses = {\n input: {\n error: 'd-input--error base-input__input--error',\n warning: 'd-input--warning base-input__input--warning',\n success: 'd-input--success base-input__input--success',\n },\n\n textarea: {\n error: 'd-textarea--error base-input__input--error',\n warning: 'd-textarea--warning base-input__input--warning',\n success: 'd-textarea--success base-input__input--success',\n },\n };\n return [inputStateClasses[this.inputComponent][this.inputState]];\n },\n },\n\n watch: {\n isInvalid (val) {\n this.$emit('update:invalid', val);\n },\n\n value: {\n immediate: true,\n handler (newValue) {\n if (this.shouldValidateLength) {\n this.validateLength(this.inputLength);\n }\n\n if (this.currentLength == null) {\n this.$emit('update:length', this.calculateLength(newValue));\n }\n },\n },\n },\n\n methods: {\n inputClasses () {\n return [\n 'base-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 inputIconClasses (side) {\n const iconSizeClasses = {\n xs: 'd-input-icon--xs',\n sm: 'd-input-icon--sm',\n lg: 'd-input-icon--lg',\n xl: 'd-input-icon--xl',\n };\n const iconOrientationClasses = {\n left: 'base-input__icon--left d-input-icon--left',\n right: 'base-input__icon--right d-input-icon--right',\n };\n\n return [\n iconOrientationClasses[side],\n 'd-input-icon',\n { [iconSizeClasses[this.iconSizeComputed]]: !this.isDefaultIconSize },\n this.sizeModifierClass,\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 clear () {\n this.$emit('input', '');\n this.$emit('clear');\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};\n</script>\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"input.js","sources":["../../components/input/input_constants.js","../../components/input/input.vue"],"sourcesContent":["// Valid input types, any other input types (for example: 'radio' or 'checkbox') should\n// use the respective base vue components (radio.vue and checkout.vue).\nexport const INPUT_TYPES = {\n TEXT: 'text',\n TEXTAREA: 'textarea',\n PASSWORD: 'password',\n EMAIL: 'email',\n NUMBER: 'number',\n DATE: 'date',\n TIME: 'time',\n FILE: 'file',\n};\n\nexport const INPUT_SIZES = {\n EXTRA_SMALL: 'xs',\n SMALL: 'sm',\n DEFAULT: 'md',\n LARGE: 'lg',\n EXTRA_LARGE: 'xl',\n};\n\nexport default {\n INPUT_TYPES,\n INPUT_SIZES,\n};\n","<!-- eslint-disable vue/no-restricted-class -->\n<template>\n <div\n ref=\"container\"\n :class=\"['base-input', { 'd-vi-hidden': hidden }]\"\n data-qa=\"dt-input\"\n >\n <label\n class=\"base-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 'base-input__label-text',\n 'd-label',\n labelSizeClasses[size],\n ]\"\n >\n {{ label }}\n </div>\n </slot>\n <div\n v-if=\"$slots.description || description || shouldValidateLength\"\n :id=\"descriptionKey\"\n ref=\"description\"\n :class=\"[\n 'base-input__description',\n 'd-description',\n descriptionSizeClasses[size],\n ]\"\n data-qa=\"dt-input-description\"\n >\n <div\n v-if=\"$slots.description || description\"\n >\n <!-- @slot slot for description, defaults to description prop -->\n <slot name=\"description\">{{ description }}</slot>\n </div>\n <div\n v-if=\"shouldValidateLength\"\n data-qa=\"dt-input-length-description\"\n class=\"d-input__length-description\"\n >\n {{ validationProps.length.description }}\n </div>\n </div>\n <div\n :class=\"inputWrapperClasses()\"\n :read-only=\"disabled\"\n >\n <span\n v-if=\"$slots.leftIcon\"\n :class=\"inputIconClasses('left')\"\n data-qa=\"dt-input-left-icon-wrapper\"\n @focusout=\"onBlur\"\n >\n <!-- @slot Slot for left icon -->\n <slot name=\"leftIcon\" />\n </span>\n <textarea\n v-if=\"isTextarea\"\n ref=\"input\"\n :value=\"value\"\n :name=\"name\"\n :disabled=\"disabled\"\n autocomplete=\"off\"\n :class=\"inputClasses()\"\n :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-input-input'\"\n v-bind=\"$attrs\"\n v-on=\"inputListeners\"\n />\n <input\n v-else\n ref=\"input\"\n :value=\"value\"\n :name=\"name\"\n :type=\"type\"\n :disabled=\"disabled\"\n autocomplete=\"off\"\n :class=\"inputClasses()\"\n :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n :data-qa=\"$attrs['data-qa'] ?? 'dt-input-input'\"\n v-bind=\"$attrs\"\n v-on=\"inputListeners\"\n >\n <span\n v-if=\"$slots.rightIcon\"\n :class=\"inputIconClasses('right')\"\n data-qa=\"dt-input-right-icon-wrapper\"\n @focusout=\"onBlur\"\n >\n <!-- @slot Slot for right icon -->\n <slot name=\"rightIcon\" />\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>\nimport { DESCRIPTION_SIZE_TYPES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport { INPUT_TYPES, INPUT_SIZES } from './input_constants';\nimport {\n getUniqueString,\n getValidationState,\n} from '@/common/utils';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { MessagesMixin } from '@/common/mixins/input';\n\n/**\n * An input field is an input control that allows users to enter alphanumeric information.\n * It can have a range of options and supports single line and multi-line lengths,\n * as well as varying formats, including numbers, masked passwords, etc.\n * @property {Boolean} placeholder attribute\n * @see https://dialtone.dialpad.com/components/input.html\n */\nexport default {\n name: 'DtInput',\n\n components: { DtValidationMessages },\n\n mixins: [MessagesMixin],\n\n inheritAttrs: false,\n\n props: {\n /**\n * Name property of the input element\n */\n name: {\n type: String,\n default: '',\n },\n\n /**\n * Type of the input, one of: `text`, `password`, `email`, `number`, `textarea`, 'date', 'time'.\n * When `textarea` a `<textarea>` element will be rendered instead of an `<input>` element.\n * @values text, password, email, number, textarea, date, time\n */\n type: {\n type: String,\n default: INPUT_TYPES.TEXT,\n validator: (t) => Object.values(INPUT_TYPES).includes(t),\n },\n\n /**\n * Value of the input\n */\n value: {\n type: [String, Number],\n default: '',\n },\n\n /**\n * Disables the input\n * @values true, false\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Label for the input\n */\n label: {\n type: String,\n default: '',\n },\n\n /**\n * Determines visibility of input label.\n * @values true, false\n */\n labelVisible: {\n type: Boolean,\n default: true,\n },\n\n /**\n * Description for the input\n */\n description: {\n type: String,\n default: '',\n },\n\n /**\n * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n * @values null, xs, sm, md, lg, xl\n */\n size: {\n type: String,\n default: null,\n validator: (t) => Object.values(INPUT_SIZES).includes(t),\n },\n\n /**\n * Size of the icon. One of `xs`, `sm`, `md`, `lg`, `xl`. If you do not set this the icon will size relative\n * to the input size\n * @values null, xs, sm, md, lg, xl\n */\n iconSize: {\n type: String,\n default: null,\n validator: (t) => Object.values(INPUT_SIZES).includes(t),\n },\n\n /**\n * Additional class name for the input element.\n * Can accept String, Object, and Array, i.e. has the\n * same API as Vue's built-in handling of the class attribute.\n */\n inputClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * Additional class name for the input wrapper element.\n * Can accept all of String, Object, and Array, i.e. has the\n * same api as Vue's built-in handling of the class attribute.\n */\n inputWrapperClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /**\n * The current character length that the user has entered into the input.\n * This will only need to be used if you are using `validate.length` and\n * the string contains abnormal characters.\n * For example, an emoji could take up many characters in the input, but should only count as 1 character.\n * If no number is provided, a built-in length calculation will be used for the length validation.\n */\n currentLength: {\n type: Number,\n default: null,\n },\n\n /**\n * Whether the input will continue to display a warning validation message even if the input has lost focus.\n */\n retainWarning: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Validation for the input. Supports maximum length validation with the structure:\n * `{ \"length\": {\"description\": string, \"max\": number, \"warn\": number, \"message\": string,\n * \"limitMaxLength\": boolean }}`\n */\n validate: {\n type: Object,\n default: null,\n },\n\n /**\n * hidden allows to use input without the element visually present in DOM\n */\n hidden: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /**\n * Native input event\n *\n * @event input\n * @type {String}\n */\n 'input',\n\n /**\n * Native input blur event\n *\n * @event blur\n * @type {FocusEvent}\n */\n 'blur',\n\n /**\n * Input clear event\n *\n * @event clear\n */\n 'clear',\n\n /**\n * Native input focus event\n *\n * @event focus\n * @type {FocusEvent}\n */\n 'focus',\n\n /**\n * Native input focusin event\n *\n * @event focusin\n * @type {FocusEvent}\n */\n 'focusin',\n\n /**\n * Native input focusout event\n *\n * @event focusout\n * @type {FocusEvent}\n */\n 'focusout',\n\n /**\n * Length of the input when currentLength prop is not passed\n *\n * @event update:length\n * @type {Number}\n */\n 'update:length',\n\n /**\n * Result of the input validation\n *\n * @event update:invalid\n * @type {Boolean}\n */\n 'update:invalid',\n ],\n\n data () {\n return {\n descriptionSizeClasses: {\n lg: 'd-description--lg',\n xl: 'd-description--xl',\n },\n\n labelSizeClasses: {\n xs: 'd-label--xs',\n sm: 'd-label--sm',\n md: 'd-label--md',\n lg: 'd-label--lg',\n xl: 'd-label--xl',\n },\n\n isInputFocused: false,\n isInvalid: false,\n defaultLength: 0,\n };\n },\n\n computed: {\n\n isTextarea () {\n return this.type === INPUT_TYPES.TEXTAREA;\n },\n\n isDefaultSize () {\n return this.size === INPUT_SIZES.DEFAULT;\n },\n\n isDefaultIconSize () {\n return this.iconSizeComputed === INPUT_SIZES.DEFAULT;\n },\n\n iconSizeComputed () {\n return this.iconSize ? this.iconSize : this.size;\n },\n\n isValidSize () {\n return Object.values(INPUT_SIZES).includes(this.size);\n },\n\n isValidDescriptionSize () {\n return Object.values(DESCRIPTION_SIZE_TYPES).includes(this.size);\n },\n\n inputComponent () {\n if (this.isTextarea) {\n return 'textarea';\n }\n\n return 'input';\n },\n\n inputListeners () {\n return {\n /* TODO\n Check if any usages of this component leverage $listeners and either remove if unused or scope the removal\n and migration prior to upgrading to Vue 3.x\n */\n ...this.$listeners,\n input: event => this.$emit('input', event.target.value),\n focus: event => {\n this.isInputFocused = true;\n this.$emit('focus', event);\n },\n\n blur: event => {\n this.isInputFocused = false;\n this.onBlur(event);\n },\n };\n },\n\n descriptionKey () {\n return `input-description-${getUniqueString()}`;\n },\n\n inputState () {\n return getValidationState(this.validationMessages);\n },\n\n defaultLengthCalculation () {\n return this.calculateLength(this.value);\n },\n\n validationProps () {\n return {\n length: {\n description: this?.validate?.length?.description,\n max: this?.validate?.length?.max,\n warn: this?.validate?.length?.warn,\n message: this?.validate?.length?.message,\n limitMaxLength: this?.validate?.length?.limitMaxLength ? this.validate.length.limitMaxLength : false,\n },\n };\n },\n\n validationMessages () {\n // Add length validation message if exists\n if (this.showLengthLimitValidation) {\n return this.formattedMessages.concat([this.inputLengthErrorMessage()]);\n }\n\n return this.formattedMessages;\n },\n\n showInputState () {\n return this.showMessages && this.inputState;\n },\n\n inputLength () {\n return this.currentLength ? this.currentLength : this.defaultLengthCalculation;\n },\n\n inputLengthState () {\n if (this.inputLength < this.validationProps.length.warn) {\n return null;\n } else if (this.inputLength <= this.validationProps.length.max) {\n return this.validationProps.length.warn ? VALIDATION_MESSAGE_TYPES.WARNING : null;\n } else {\n return VALIDATION_MESSAGE_TYPES.ERROR;\n }\n },\n\n shouldValidateLength () {\n 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 const sizeClasses = {\n input: {\n xs: 'd-input--xs',\n sm: 'd-input--sm',\n lg: 'd-input--lg',\n xl: 'd-input--xl',\n },\n\n textarea: {\n xs: 'd-textarea--xs',\n sm: 'd-textarea--sm',\n lg: 'd-textarea--lg',\n xl: 'd-textarea--xl',\n },\n };\n\n return sizeClasses[this.inputComponent][this.size];\n },\n\n stateClass () {\n const inputStateClasses = {\n input: {\n error: 'd-input--error base-input__input--error',\n warning: 'd-input--warning base-input__input--warning',\n success: 'd-input--success base-input__input--success',\n },\n\n textarea: {\n error: 'd-textarea--error base-input__input--error',\n warning: 'd-textarea--warning base-input__input--warning',\n success: 'd-textarea--success base-input__input--success',\n },\n };\n return [inputStateClasses[this.inputComponent][this.inputState]];\n },\n },\n\n watch: {\n isInvalid (val) {\n this.$emit('update:invalid', val);\n },\n\n value: {\n immediate: true,\n handler (newValue) {\n if (this.shouldValidateLength) {\n this.validateLength(this.inputLength);\n }\n\n if (this.currentLength == null) {\n this.$emit('update:length', this.calculateLength(newValue));\n }\n },\n },\n },\n\n methods: {\n inputClasses () {\n return [\n 'base-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 inputIconClasses (side) {\n const iconSizeClasses = {\n xs: 'd-input-icon--xs',\n sm: 'd-input-icon--sm',\n lg: 'd-input-icon--lg',\n xl: 'd-input-icon--xl',\n };\n const iconOrientationClasses = {\n left: 'base-input__icon--left d-input-icon--left',\n right: 'base-input__icon--right d-input-icon--right',\n };\n\n return [\n iconOrientationClasses[side],\n 'd-input-icon',\n { [iconSizeClasses[this.iconSizeComputed]]: !this.isDefaultIconSize },\n this.sizeModifierClass,\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 clear () {\n this.$emit('input', '');\n this.$emit('clear');\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};\n</script>\n"],"names":[],"mappings":"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"}
|
|
@@ -1,20 +1,23 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const core = require("@tiptap/core");
|
|
4
|
+
const vue2 = require("@tiptap/vue-2");
|
|
3
5
|
const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
|
|
6
|
+
const lib_itemLayout = require("./item-layout.cjs");
|
|
7
|
+
const lib_icon = require("./icon.cjs");
|
|
4
8
|
const lib_button = require("./button.cjs");
|
|
5
9
|
const lib_emojiPicker = require("./emoji-picker.cjs");
|
|
6
|
-
const lib_icon = require("./icon.cjs");
|
|
7
10
|
const lib_input = require("./input.cjs");
|
|
8
11
|
const lib_popover = require("./popover.cjs");
|
|
9
12
|
const lib_richTextEditor = require("./rich-text-editor.cjs");
|
|
10
13
|
const lib_tooltip = require("./tooltip.cjs");
|
|
14
|
+
require("@dialpad/dialtone-icons/vue2");
|
|
15
|
+
require("../chunks/icon_constants-QYpmdE0R.js");
|
|
16
|
+
require("@dialpad/dialtone-icons/icons.json");
|
|
11
17
|
require("vue");
|
|
12
18
|
require("../chunks/link_constants-x8NwdqmA.js");
|
|
13
19
|
require("../chunks/tab-FcsV5VmK.js");
|
|
14
20
|
require("@dialpad/dialtone-emojis");
|
|
15
|
-
require("@dialpad/dialtone-icons/vue2");
|
|
16
|
-
require("../chunks/icon_constants-QYpmdE0R.js");
|
|
17
|
-
require("@dialpad/dialtone-icons/icons.json");
|
|
18
21
|
require("../common/constants.cjs");
|
|
19
22
|
require("../common/utils.cjs");
|
|
20
23
|
require("../chunks/input-Axw-wFj2.js");
|
|
@@ -26,7 +29,6 @@ require("@linusborg/vue-simple-portal");
|
|
|
26
29
|
require("../chunks/modal-VgxXAQFP.js");
|
|
27
30
|
require("../chunks/sr_only_close_button-ZaGdAHz7.js");
|
|
28
31
|
require("./lazy-show.cjs");
|
|
29
|
-
require("@tiptap/vue-2");
|
|
30
32
|
require("@tiptap/extension-blockquote");
|
|
31
33
|
require("@tiptap/extension-code-block");
|
|
32
34
|
require("@tiptap/extension-document");
|
|
@@ -43,7 +45,6 @@ require("@tiptap/extension-strike");
|
|
|
43
45
|
require("@tiptap/extension-underline");
|
|
44
46
|
require("@tiptap/extension-text");
|
|
45
47
|
require("@tiptap/extension-text-align");
|
|
46
|
-
require("@tiptap/core");
|
|
47
48
|
require("./emoji.cjs");
|
|
48
49
|
require("../chunks/index-anN_sx1F.js");
|
|
49
50
|
require("emoji-toolkit/emoji_strategy.json");
|
|
@@ -52,7 +53,6 @@ require("@tiptap/pm/state");
|
|
|
52
53
|
require("@tiptap/suggestion");
|
|
53
54
|
require("./list-item.cjs");
|
|
54
55
|
require("../chunks/list_item_constants-EiqkqZvP.js");
|
|
55
|
-
require("./item-layout.cjs");
|
|
56
56
|
require("./stack.cjs");
|
|
57
57
|
require("../chunks/stack_constants-SMzMWnAQ.js");
|
|
58
58
|
require("@tiptap/extension-mention");
|
|
@@ -61,6 +61,73 @@ require("./avatar.cjs");
|
|
|
61
61
|
require("./presence.cjs");
|
|
62
62
|
require("@dialpad/dialtone-icons/vue2/hash");
|
|
63
63
|
require("@dialpad/dialtone-icons/vue2/lock");
|
|
64
|
+
const _sfc_main$1 = {
|
|
65
|
+
name: "MeetingPill",
|
|
66
|
+
components: {
|
|
67
|
+
NodeViewWrapper: vue2.NodeViewWrapper,
|
|
68
|
+
DtItemLayout: lib_itemLayout.DtItemLayout,
|
|
69
|
+
DtIcon: lib_icon.DtIcon,
|
|
70
|
+
DtButton: lib_button.DtButton
|
|
71
|
+
},
|
|
72
|
+
props: vue2.nodeViewProps,
|
|
73
|
+
emits: ["meeting-pill-close"],
|
|
74
|
+
methods: {
|
|
75
|
+
close(e) {
|
|
76
|
+
this.$parent.$emit("meeting-pill-close", e);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
};
|
|
80
|
+
var _sfc_render$1 = function render() {
|
|
81
|
+
var _vm = this, _c = _vm._self._c;
|
|
82
|
+
return _c("node-view-wrapper", { staticClass: "dt-message-input-meeting-pill" }, [_c("dt-item-layout", { staticClass: "dt-message-input-meeting-pill__layout", attrs: { "unstyled": "" }, scopedSlots: _vm._u([{ key: "left", fn: function() {
|
|
83
|
+
return [_c("div", { staticClass: "dt-message-input-meeting-pill__icon" }, [_c("dt-icon", { attrs: { "name": "video", "size": "400" } })], 1)];
|
|
84
|
+
}, proxy: true }, { key: "right", fn: function() {
|
|
85
|
+
return [_c("div", { staticClass: "dt-message-input-meeting-pill__close" }, [_c("dt-button", { attrs: { "circle": "", "aria-label": _vm.node.attrs["close-button-aria-label"], "size": "xs", "importance": "clear" }, on: { "click": _vm.close }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
|
|
86
|
+
return [_c("dt-icon", { attrs: { "name": "close", "size": "300" } })];
|
|
87
|
+
}, proxy: true }]) })], 1)];
|
|
88
|
+
}, proxy: true }]) }, [_vm._v(" " + _vm._s(_vm.node.attrs.text) + " ")])], 1);
|
|
89
|
+
};
|
|
90
|
+
var _sfc_staticRenderFns$1 = [];
|
|
91
|
+
var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
|
|
92
|
+
_sfc_main$1,
|
|
93
|
+
_sfc_render$1,
|
|
94
|
+
_sfc_staticRenderFns$1,
|
|
95
|
+
false,
|
|
96
|
+
null,
|
|
97
|
+
null,
|
|
98
|
+
null,
|
|
99
|
+
null
|
|
100
|
+
);
|
|
101
|
+
const MeetingPill = __component__$1.exports;
|
|
102
|
+
const meetingPill = core.Node.create({
|
|
103
|
+
atom: true,
|
|
104
|
+
group: "inline",
|
|
105
|
+
inline: true,
|
|
106
|
+
addNodeView() {
|
|
107
|
+
return vue2.VueNodeViewRenderer(MeetingPill);
|
|
108
|
+
},
|
|
109
|
+
addAttributes() {
|
|
110
|
+
return {
|
|
111
|
+
text: {
|
|
112
|
+
default: 'Please pass in "text" attribute'
|
|
113
|
+
},
|
|
114
|
+
"close-button-aria-label": {}
|
|
115
|
+
};
|
|
116
|
+
},
|
|
117
|
+
parseHTML() {
|
|
118
|
+
return [
|
|
119
|
+
{
|
|
120
|
+
tag: "meeting-pill"
|
|
121
|
+
}
|
|
122
|
+
];
|
|
123
|
+
},
|
|
124
|
+
renderText({ node }) {
|
|
125
|
+
return "/dpm";
|
|
126
|
+
},
|
|
127
|
+
renderHTML({ HTMLAttributes }) {
|
|
128
|
+
return ["meeting-pill", core.mergeAttributes(HTMLAttributes)];
|
|
129
|
+
}
|
|
130
|
+
});
|
|
64
131
|
const _sfc_main = {
|
|
65
132
|
name: "DtRecipeMessageInput",
|
|
66
133
|
components: {
|
|
@@ -98,6 +165,13 @@ const _sfc_main = {
|
|
|
98
165
|
required: true,
|
|
99
166
|
default: ""
|
|
100
167
|
},
|
|
168
|
+
/**
|
|
169
|
+
* Prevents the user from typing any further. Deleting text will still work.
|
|
170
|
+
*/
|
|
171
|
+
preventTyping: {
|
|
172
|
+
type: Boolean,
|
|
173
|
+
default: false
|
|
174
|
+
},
|
|
101
175
|
/**
|
|
102
176
|
* Additional class name for the input element. Only accepts a String value
|
|
103
177
|
* because this is passed to the editor via options. For multiple classes,
|
|
@@ -386,23 +460,12 @@ const _sfc_main = {
|
|
|
386
460
|
*/
|
|
387
461
|
"selected-command",
|
|
388
462
|
/**
|
|
389
|
-
*
|
|
390
|
-
*
|
|
391
|
-
* @
|
|
392
|
-
|
|
393
|
-
"focus",
|
|
394
|
-
/**
|
|
395
|
-
* Native blur event
|
|
396
|
-
* @event input
|
|
397
|
-
* @type {String|JSON}
|
|
398
|
-
*/
|
|
399
|
-
"blur",
|
|
400
|
-
/**
|
|
401
|
-
* Native input event
|
|
402
|
-
* @event input
|
|
403
|
-
* @type {String|JSON}
|
|
463
|
+
* Fires when meeting pill is closed
|
|
464
|
+
*
|
|
465
|
+
* @event meeting-pill-close
|
|
466
|
+
* @type {String}
|
|
404
467
|
*/
|
|
405
|
-
"
|
|
468
|
+
"meeting-pill-close",
|
|
406
469
|
/**
|
|
407
470
|
* Event to sync the value with the parent
|
|
408
471
|
* @event update:value
|
|
@@ -412,12 +475,12 @@ const _sfc_main = {
|
|
|
412
475
|
],
|
|
413
476
|
data() {
|
|
414
477
|
return {
|
|
478
|
+
additionalExtensions: [meetingPill],
|
|
415
479
|
internalInputValue: this.value,
|
|
416
480
|
// internal input content
|
|
417
481
|
hasFocus: false,
|
|
418
482
|
imagePickerFocus: false,
|
|
419
483
|
emojiPickerFocus: false,
|
|
420
|
-
sendButtonFocus: false,
|
|
421
484
|
emojiPickerOpened: false
|
|
422
485
|
};
|
|
423
486
|
},
|
|
@@ -489,9 +552,6 @@ const _sfc_main = {
|
|
|
489
552
|
});
|
|
490
553
|
this.$emit("selected-emoji", emoji);
|
|
491
554
|
},
|
|
492
|
-
onSelectedCommand(command) {
|
|
493
|
-
this.$emit("selected-command", command);
|
|
494
|
-
},
|
|
495
555
|
onSelectImage() {
|
|
496
556
|
this.$refs.messageInputImageUpload.$refs.input.click();
|
|
497
557
|
},
|
|
@@ -514,54 +574,40 @@ const _sfc_main = {
|
|
|
514
574
|
var _a;
|
|
515
575
|
this.hasFocus = true;
|
|
516
576
|
(_a = this.$refs.richTextEditor) == null ? void 0 : _a.focusEditor();
|
|
517
|
-
this.$emit("focus", event);
|
|
518
577
|
},
|
|
519
578
|
onBlur(event) {
|
|
520
579
|
this.hasFocus = false;
|
|
521
|
-
this.$emit("blur", event);
|
|
522
580
|
},
|
|
523
581
|
onInput(event) {
|
|
524
|
-
this.$emit("input", event);
|
|
525
582
|
this.$emit("update:value", event);
|
|
526
583
|
}
|
|
527
584
|
}
|
|
528
585
|
};
|
|
529
|
-
var _sfc_render = function
|
|
586
|
+
var _sfc_render = function render2() {
|
|
587
|
+
var _a, _b;
|
|
530
588
|
var _vm = this, _c = _vm._self._c;
|
|
531
|
-
return _c("div", { class: [
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
"d-bar8",
|
|
535
|
-
"d-baw1",
|
|
536
|
-
"d-ba",
|
|
537
|
-
"d-c-text",
|
|
538
|
-
{ "d-bc-bold d-bs-sm": _vm.hasFocus, "d-bc-default": !_vm.hasFocus }
|
|
539
|
-
], attrs: { "data-qa": "dt-message-input", "role": "presentation" }, on: { "click": function($event) {
|
|
540
|
-
var _a;
|
|
541
|
-
(_a = _vm.$refs.richTextEditor) == null ? void 0 : _a.focusEditor();
|
|
589
|
+
return _c("div", { class: ["dt-message-input", { "dt-message-input--focused": _vm.hasFocus }], attrs: { "data-qa": "dt-message-input", "role": "presentation" }, on: { "click": function($event) {
|
|
590
|
+
var _a2;
|
|
591
|
+
(_a2 = _vm.$refs.richTextEditor) == null ? void 0 : _a2.focusEditor();
|
|
542
592
|
}, "drag-enter": _vm.onDrag, "drag-over": _vm.onDrag, "drop": _vm.onDrop, "keydown": function($event) {
|
|
543
593
|
if (!$event.type.indexOf("key") && _vm._k($event.keyCode, "enter", 13, $event.key, "Enter"))
|
|
544
594
|
return null;
|
|
545
595
|
if ($event.ctrlKey || $event.shiftKey || $event.altKey || $event.metaKey)
|
|
546
596
|
return null;
|
|
547
597
|
return _vm.onSend.apply(null, arguments);
|
|
548
|
-
}, "paste": _vm.onPaste } }, [_c("div", { staticClass: "
|
|
549
|
-
return _vm.onInput($event);
|
|
550
|
-
}, "selected-command": _vm.onSelectedCommand }, model: { value: _vm.internalInputValue, callback: function($$v) {
|
|
598
|
+
}, "paste": _vm.onPaste } }, [_c("div", { staticClass: "dt-message-input__editor-wrapper", style: { "max-height": _vm.maxHeight } }, [_c("dt-rich-text-editor", _vm._g(_vm._b({ ref: "richTextEditor", attrs: { "editable": _vm.editable, "input-aria-label": _vm.inputAriaLabel, "input-class": _vm.inputClass, "output-format": _vm.outputFormat, "auto-focus": _vm.autoFocus, "link": _vm.link, "placeholder": _vm.placeholder, "prevent-typing": _vm.preventTyping, "mention-suggestion": _vm.mentionSuggestion, "channel-suggestion": _vm.channelSuggestion, "slash-command-suggestion": _vm.slashCommandSuggestion, "allow-blockquote": _vm.allowBlockquote, "allow-bold": _vm.allowBold, "allow-bullet-list": _vm.allowBulletList, "allow-codeblock": _vm.allowCodeblock, "allow-italic": _vm.allowItalic, "allow-strike": _vm.allowStrike, "allow-underline": _vm.allowUnderline, "additional-extensions": _vm.additionalExtensions }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "input": _vm.onInput }, model: { value: _vm.internalInputValue, callback: function($$v) {
|
|
551
599
|
_vm.internalInputValue = $$v;
|
|
552
|
-
}, expression: "internalInputValue" } }, "dt-rich-text-editor", _vm.$attrs, false))], 1), _vm._t("middle"), _c("section", { staticClass: "
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
}, proxy: true }], null, false, 2561380377) }), _c("dt-input", { ref: "messageInputImageUpload", staticClass: "d-ps-absolute", attrs: { "data-qa": "dt-message-input-image-input", "accept": "image/*, video/*", "type": "file", "multiple": "", "hidden": "" }, on: { "input": _vm.onImageUpload } })];
|
|
564
|
-
}, proxy: true }], null, false, 278163666) }) : _vm._e(), _vm.showEmojiPicker ? _c("dt-popover", { attrs: { "data-qa": "dt-message-input-emoji-picker-popover", "open": _vm.emojiPickerOpened, "initial-focus-element": "#searchInput", "padding": "none" }, on: { "update:open": function($event) {
|
|
600
|
+
}, expression: "internalInputValue" } }, "dt-rich-text-editor", _vm.$attrs, false), _vm.$listeners))], 1), _vm._t("middle"), _c("section", { staticClass: "dt-message-input__bottom-section" }, [_c("div", { staticClass: "dt-message-input__bottom-section-left" }, [_vm.showImagePicker ? _c("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip:top-start", value: (_a = _vm.showImagePicker) == null ? void 0 : _a.tooltipLabel, expression: "showImagePicker?.tooltipLabel", arg: "top-start" }], attrs: { "data-qa": "dt-message-input-image-btn", "size": "sm", "circle": "", "kind": _vm.imagePickerFocus ? "default" : "muted", "importance": "clear", "aria-label": _vm.showImagePicker.ariaLabel }, on: { "click": _vm.onSelectImage, "mouseenter": function($event) {
|
|
601
|
+
_vm.imagePickerFocus = true;
|
|
602
|
+
}, "mouseleave": function($event) {
|
|
603
|
+
_vm.imagePickerFocus = false;
|
|
604
|
+
}, "focus": function($event) {
|
|
605
|
+
_vm.imagePickerFocus = true;
|
|
606
|
+
}, "blur": function($event) {
|
|
607
|
+
_vm.imagePickerFocus = false;
|
|
608
|
+
} }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
|
|
609
|
+
return [_c("dt-icon", { attrs: { "name": "image", "size": "300" } })];
|
|
610
|
+
}, proxy: true }], null, false, 2561380377) }) : _vm._e(), _c("dt-input", { ref: "messageInputImageUpload", staticClass: "dt-message-input__image-input", attrs: { "data-qa": "dt-message-input-image-input", "accept": "image/*, video/*", "type": "file", "multiple": "", "hidden": "" }, on: { "input": _vm.onImageUpload } }), _vm.showEmojiPicker ? _c("dt-popover", { attrs: { "data-qa": "dt-message-input-emoji-picker-popover", "open": _vm.emojiPickerOpened, "initial-focus-element": "#searchInput", "padding": "none" }, on: { "update:open": function($event) {
|
|
565
611
|
_vm.emojiPickerOpened = $event;
|
|
566
612
|
} }, scopedSlots: _vm._u([{ key: "anchor", fn: function({ attrs }) {
|
|
567
613
|
return [_c("dt-button", _vm._b({ directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: _vm.emojiTooltipMessage, expression: "emojiTooltipMessage" }], attrs: { "data-qa": "dt-message-input-emoji-picker-btn", "size": "sm", "circle": "", "kind": _vm.emojiPickerHovered ? "default" : "muted", "importance": "clear", "aria-label": _vm.emojiButtonAriaLabel }, on: { "click": _vm.toggleEmojiPicker, "mouseenter": function($event) {
|
|
@@ -580,26 +626,16 @@ var _sfc_render = function render() {
|
|
|
580
626
|
close();
|
|
581
627
|
_vm.onSelectEmoji(emoji);
|
|
582
628
|
} } }, "dt-emoji-picker", _vm.emojiPickerProps, false))];
|
|
583
|
-
} }], null, false, 3336317833) }) : _vm._e(), _vm._t("emojiGiphyPicker")], 2), _c("div", { staticClass: "
|
|
584
|
-
return [_c("p", { directives: [{ name: "show", rawName: "v-show", value: _vm.displayCharacterLimitWarning, expression: "displayCharacterLimitWarning" }], staticClass: "
|
|
585
|
-
}, proxy: true }], null, false,
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
593
|
-
}, "mouseleave": function($event) {
|
|
594
|
-
_vm.sendButtonFocus = false;
|
|
595
|
-
}, "focus": function($event) {
|
|
596
|
-
_vm.sendButtonFocus = true;
|
|
597
|
-
}, "blur": function($event) {
|
|
598
|
-
_vm.sendButtonFocus = false;
|
|
599
|
-
} }, scopedSlots: _vm._u([_vm.showSend.icon ? { key: "icon", fn: function() {
|
|
600
|
-
return [_c("dt-icon", { attrs: { "name": _vm.showSend.icon, "size": "300" } })];
|
|
601
|
-
}, proxy: true } : null], null, true) }, [_vm.showSend.text ? [_c("p", [_vm._v(_vm._s(_vm.showSend.text))])] : _vm._e()], 2)];
|
|
602
|
-
}, proxy: true }], null, false, 2570122596) }) : _vm._e()], 1)])], 2);
|
|
629
|
+
} }], null, false, 3336317833) }) : _vm._e(), _vm._t("emojiGiphyPicker")], 2), _c("div", { staticClass: "dt-message-input__bottom-section-right" }, [Boolean(_vm.showCharacterLimit) ? _c("dt-tooltip", { staticClass: "dt-message-input__remaining-char-tooltip", attrs: { "placement": "top-end", "enabled": _vm.characterLimitTooltipEnabled, "message": _vm.showCharacterLimit.message, "offset": [10, 8] }, scopedSlots: _vm._u([{ key: "anchor", fn: function() {
|
|
630
|
+
return [_c("p", { directives: [{ name: "show", rawName: "v-show", value: _vm.displayCharacterLimitWarning, expression: "displayCharacterLimitWarning" }], staticClass: "dt-message-input__remaining-char", attrs: { "data-qa": "dt-message-input-character-limit" } }, [_vm._v(" " + _vm._s(_vm.showCharacterLimit.count - _vm.inputLength) + " ")])];
|
|
631
|
+
}, proxy: true }], null, false, 3769616566) }) : _vm._e(), _vm.showCancel ? _c("dt-button", { staticClass: "dt-message-input__cancel-button", attrs: { "data-qa": "dt-message-input-cancel-button", "size": "sm", "kind": "muted", "importance": "clear", "aria-label": _vm.showCancel.ariaLabel }, on: { "click": _vm.onCancel } }, [_c("p", [_vm._v(_vm._s(_vm.showCancel.text))])]) : _vm._e(), _vm.showSend ? _c("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip:top-end", value: (_b = _vm.showSend) == null ? void 0 : _b.tooltipLabel, expression: "showSend?.tooltipLabel", arg: "top-end" }], class: [
|
|
632
|
+
{
|
|
633
|
+
"dt-message-input__send-button--disabled": _vm.isSendDisabled,
|
|
634
|
+
"d-btn--circle": _vm.showSend.icon
|
|
635
|
+
}
|
|
636
|
+
], attrs: { "data-qa": "dt-message-input-send-btn", "size": "sm", "kind": "default", "importance": "primary", "aria-label": _vm.showSend.ariaLabel, "aria-disabled": _vm.isSendDisabled }, on: { "click": _vm.onSend }, scopedSlots: _vm._u([_vm.showSend.icon ? { key: "icon", fn: function() {
|
|
637
|
+
return [_c("dt-icon", { attrs: { "name": _vm.showSend.icon, "size": "300" } })];
|
|
638
|
+
}, proxy: true } : null], null, true) }, [_vm.showSend.text ? [_c("p", [_vm._v(_vm._s(_vm.showSend.text))])] : _vm._e()], 2) : _vm._e()], 1)])], 2);
|
|
603
639
|
};
|
|
604
640
|
var _sfc_staticRenderFns = [];
|
|
605
641
|
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
|