npm - @dialpad/dialtone - Versions diffs - 9.84.2 → 9.86.0 - Mend

@dialpad/dialtone 9.84.2 → 9.86.0

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 (215) hide show

package/dist/vue2/components/skeleton/skeleton-text.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton-text.vue.cjs","sources":["../../../components/skeleton/skeleton-text.vue"],"sourcesContent":["<template>\n <div\n v-if=\"type === 'body'\"\n ref=\"skeleton\"\n data-qa=\"skeleton-text-body\"\n :class=\"[\n 'd-skeleton-text',\n 'skeleton-placeholder',\n {\n 'skeleton-placeholder--animate': animate,\n },\n contentClass,\n ]\"\n :style=\"{\n width,\n ...skeletonStyle,\n }\"\n />\n <div\n v-else-if=\"type === 'heading'\"\n ref=\"skeleton\"\n data-qa=\"skeleton-text-heading\"\n :class=\"[\n SKELETON_HEADING_HEIGHTS[headingHeight],\n 'd-skeleton-text--heading',\n 'skeleton-placeholder',\n {\n 'skeleton-placeholder--animate': animate,\n },\n contentClass,\n ]\"\n :style=\"{\n width,\n ...skeletonStyle,\n }\"\n />\n</template>\n\n<script>\nimport { SKELETON_HEADING_HEIGHTS, SKELETON_TEXT_TYPES } from './skeleton_constants';\nimport SkeletonAnimation from '@/common/mixins/skeleton';\n\nexport default {\n name: 'DtSkeletonText',\n\n mixins: [SkeletonAnimation],\n\n props: {\n /*\n Skeleton type\n * @values body, heading\n /\n type: {\n type: String,\n default: 'body',\n validator: type => SKELETON_TEXT_TYPES.includes(type),\n },\n\n /\n Heading height\n * @values sm, md, lg\n /\n headingHeight: {\n type: String,\n default: 'md',\n validator: headingHeight => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight),\n },\n\n /\n Width of the skeleton\n /\n width: {\n type: String,\n default: '100%',\n },\n\n /\n Duration time of the animation (ms), set -1 for an infinite animation.\n /\n animationDuration: {\n type: Number,\n default: -1,\n },\n\n /\n This property has higher priority than \"option.animate\"\n * @values true, false\n /\n animate: {\n type: Boolean,\n default: false,\n },\n\n /\n RippleDuration controls how long the delay is for the animation of a\n * placeholder 1000 pixels from the top of the page. Each placeholder\n * from the top down will have a delay duration from 0 to this offset.\n * The delay of each placeholder animation is based on how far down the page\n * the placeholder is rendered. This is a linear relationship. The unit\n * is milliseconds.\n /\n offset: {\n type: Number,\n default: 1,\n },\n\n /\n Additional class name for the content.\n */\n contentClass: {\n type: String,\n default: '',\n },\n },\n\n data () {\n return {\n SKELETON_HEADING_HEIGHTS,\n };\n },\n};\n</script>\n"],"names":["SkeletonAnimation","SKELETON_TEXT_TYPES","SKELETON_HEADING_HEIGHTS"],"mappings":";;;;;AA0CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAAA,SAAAA,OAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,UAAAC,uCAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,mBAAA,OAAA,KAAAC,mBAAAA,wBAAA,EAAA,SAAA,aAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,0BAAAA,mBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"skeleton-text.vue.cjs","sources":["../../../components/skeleton/skeleton-text.vue"],"sourcesContent":["<template>\n <div\n v-if=\"type === 'body'\"\n ref=\"skeleton\"\n data-qa=\"skeleton-text-body\"\n :class=\"[\n 'd-skeleton-text',\n 'd-skeleton-placeholder',\n {\n 'd-skeleton-placeholder--animate': animate,\n },\n contentClass,\n ]\"\n :style=\"{\n width,\n ...skeletonStyle,\n }\"\n />\n <div\n v-else-if=\"type === 'heading'\"\n ref=\"skeleton\"\n data-qa=\"skeleton-text-heading\"\n :class=\"[\n SKELETON_HEADING_HEIGHTS[headingHeight],\n 'd-skeleton-text--heading',\n 'd-skeleton-placeholder',\n {\n 'd-skeleton-placeholder--animate': animate,\n },\n contentClass,\n ]\"\n :style=\"{\n width,\n ...skeletonStyle,\n }\"\n />\n</template>\n\n<script>\nimport { SKELETON_HEADING_HEIGHTS, SKELETON_TEXT_TYPES } from './skeleton_constants';\nimport SkeletonAnimation from '@/common/mixins/skeleton';\n\nexport default {\n name: 'DtSkeletonText',\n\n mixins: [SkeletonAnimation],\n\n props: {\n /*\n Skeleton type\n * @values body, heading\n /\n type: {\n type: String,\n default: 'body',\n validator: type => SKELETON_TEXT_TYPES.includes(type),\n },\n\n /\n Heading height\n * @values sm, md, lg\n /\n headingHeight: {\n type: String,\n default: 'md',\n validator: headingHeight => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight),\n },\n\n /\n Width of the skeleton\n /\n width: {\n type: String,\n default: '100%',\n },\n\n /\n Duration time of the animation (ms), set -1 for an infinite animation.\n /\n animationDuration: {\n type: Number,\n default: -1,\n },\n\n /\n This property has higher priority than \"option.animate\"\n * @values true, false\n /\n animate: {\n type: Boolean,\n default: false,\n },\n\n /\n RippleDuration controls how long the delay is for the animation of a\n * placeholder 1000 pixels from the top of the page. Each placeholder\n * from the top down will have a delay duration from 0 to this offset.\n * The delay of each placeholder animation is based on how far down the page\n * the placeholder is rendered. This is a linear relationship. The unit\n * is milliseconds.\n /\n offset: {\n type: Number,\n default: 1,\n },\n\n /\n Additional class name for the content.\n */\n contentClass: {\n type: String,\n default: '',\n },\n },\n\n data () {\n return {\n SKELETON_HEADING_HEIGHTS,\n };\n },\n};\n</script>\n"],"names":["SkeletonAnimation","SKELETON_TEXT_TYPES","SKELETON_HEADING_HEIGHTS"],"mappings":";;;;;AA0CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAAA,SAAAA,OAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,UAAAC,uCAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,mBAAA,OAAA,KAAAC,mBAAAA,wBAAA,EAAA,SAAA,aAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,0BAAAA,mBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/skeleton/skeleton-text.vue.js CHANGED Viewed

@@ -75,9 +75,9 @@ var _sfc_render = function render() {
   var _vm = this, _c = _vm._self._c;
   return _vm.type === "body" ? _c("div", { ref: "skeleton", class: [
     "d-skeleton-text",
-    "skeleton-placeholder",
+    "d-skeleton-placeholder",
     {
-      "skeleton-placeholder--animate": _vm.animate
+      "d-skeleton-placeholder--animate": _vm.animate
     },
     _vm.contentClass
   ], style: {
@@ -86,9 +86,9 @@ var _sfc_render = function render() {
   }, attrs: { "data-qa": "skeleton-text-body" } }) : _vm.type === "heading" ? _c("div", { ref: "skeleton", class: [
     _vm.SKELETON_HEADING_HEIGHTS[_vm.headingHeight],
     "d-skeleton-text--heading",
-    "skeleton-placeholder",
+    "d-skeleton-placeholder",
     {
-      "skeleton-placeholder--animate": _vm.animate
+      "d-skeleton-placeholder--animate": _vm.animate
     },
     _vm.contentClass
   ], style: {

package/dist/vue2/components/skeleton/skeleton-text.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton-text.vue.js","sources":["../../../components/skeleton/skeleton-text.vue"],"sourcesContent":["<template>\n <div\n v-if=\"type === 'body'\"\n ref=\"skeleton\"\n data-qa=\"skeleton-text-body\"\n :class=\"[\n 'd-skeleton-text',\n 'skeleton-placeholder',\n {\n 'skeleton-placeholder--animate': animate,\n },\n contentClass,\n ]\"\n :style=\"{\n width,\n ...skeletonStyle,\n }\"\n />\n <div\n v-else-if=\"type === 'heading'\"\n ref=\"skeleton\"\n data-qa=\"skeleton-text-heading\"\n :class=\"[\n SKELETON_HEADING_HEIGHTS[headingHeight],\n 'd-skeleton-text--heading',\n 'skeleton-placeholder',\n {\n 'skeleton-placeholder--animate': animate,\n },\n contentClass,\n ]\"\n :style=\"{\n width,\n ...skeletonStyle,\n }\"\n />\n</template>\n\n<script>\nimport { SKELETON_HEADING_HEIGHTS, SKELETON_TEXT_TYPES } from './skeleton_constants';\nimport SkeletonAnimation from '@/common/mixins/skeleton';\n\nexport default {\n name: 'DtSkeletonText',\n\n mixins: [SkeletonAnimation],\n\n props: {\n /*\n Skeleton type\n * @values body, heading\n /\n type: {\n type: String,\n default: 'body',\n validator: type => SKELETON_TEXT_TYPES.includes(type),\n },\n\n /\n Heading height\n * @values sm, md, lg\n /\n headingHeight: {\n type: String,\n default: 'md',\n validator: headingHeight => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight),\n },\n\n /\n Width of the skeleton\n /\n width: {\n type: String,\n default: '100%',\n },\n\n /\n Duration time of the animation (ms), set -1 for an infinite animation.\n /\n animationDuration: {\n type: Number,\n default: -1,\n },\n\n /\n This property has higher priority than \"option.animate\"\n * @values true, false\n /\n animate: {\n type: Boolean,\n default: false,\n },\n\n /\n RippleDuration controls how long the delay is for the animation of a\n * placeholder 1000 pixels from the top of the page. Each placeholder\n * from the top down will have a delay duration from 0 to this offset.\n * The delay of each placeholder animation is based on how far down the page\n * the placeholder is rendered. This is a linear relationship. The unit\n * is milliseconds.\n /\n offset: {\n type: Number,\n default: 1,\n },\n\n /\n Additional class name for the content.\n */\n contentClass: {\n type: String,\n default: '',\n },\n },\n\n data () {\n return {\n SKELETON_HEADING_HEIGHTS,\n };\n },\n};\n</script>\n"],"names":[],"mappings":";;;AA0CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAA,iBAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,UAAA,oBAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,mBAAA,OAAA,KAAA,wBAAA,EAAA,SAAA,aAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"skeleton-text.vue.js","sources":["../../../components/skeleton/skeleton-text.vue"],"sourcesContent":["<template>\n <div\n v-if=\"type === 'body'\"\n ref=\"skeleton\"\n data-qa=\"skeleton-text-body\"\n :class=\"[\n 'd-skeleton-text',\n 'd-skeleton-placeholder',\n {\n 'd-skeleton-placeholder--animate': animate,\n },\n contentClass,\n ]\"\n :style=\"{\n width,\n ...skeletonStyle,\n }\"\n />\n <div\n v-else-if=\"type === 'heading'\"\n ref=\"skeleton\"\n data-qa=\"skeleton-text-heading\"\n :class=\"[\n SKELETON_HEADING_HEIGHTS[headingHeight],\n 'd-skeleton-text--heading',\n 'd-skeleton-placeholder',\n {\n 'd-skeleton-placeholder--animate': animate,\n },\n contentClass,\n ]\"\n :style=\"{\n width,\n ...skeletonStyle,\n }\"\n />\n</template>\n\n<script>\nimport { SKELETON_HEADING_HEIGHTS, SKELETON_TEXT_TYPES } from './skeleton_constants';\nimport SkeletonAnimation from '@/common/mixins/skeleton';\n\nexport default {\n name: 'DtSkeletonText',\n\n mixins: [SkeletonAnimation],\n\n props: {\n /*\n Skeleton type\n * @values body, heading\n /\n type: {\n type: String,\n default: 'body',\n validator: type => SKELETON_TEXT_TYPES.includes(type),\n },\n\n /\n Heading height\n * @values sm, md, lg\n /\n headingHeight: {\n type: String,\n default: 'md',\n validator: headingHeight => Object.keys(SKELETON_HEADING_HEIGHTS).includes(headingHeight),\n },\n\n /\n Width of the skeleton\n /\n width: {\n type: String,\n default: '100%',\n },\n\n /\n Duration time of the animation (ms), set -1 for an infinite animation.\n /\n animationDuration: {\n type: Number,\n default: -1,\n },\n\n /\n This property has higher priority than \"option.animate\"\n * @values true, false\n /\n animate: {\n type: Boolean,\n default: false,\n },\n\n /\n RippleDuration controls how long the delay is for the animation of a\n * placeholder 1000 pixels from the top of the page. Each placeholder\n * from the top down will have a delay duration from 0 to this offset.\n * The delay of each placeholder animation is based on how far down the page\n * the placeholder is rendered. This is a linear relationship. The unit\n * is milliseconds.\n /\n offset: {\n type: Number,\n default: 1,\n },\n\n /\n Additional class name for the content.\n */\n contentClass: {\n type: String,\n default: '',\n },\n },\n\n data () {\n return {\n SKELETON_HEADING_HEIGHTS,\n };\n },\n};\n</script>\n"],"names":[],"mappings":";;;AA0CA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,QAAA,CAAA,iBAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,UAAA,oBAAA,SAAA,IAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,mBAAA,OAAA,KAAA,wBAAA,EAAA,SAAA,aAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/skeleton/skeleton.vue.cjs CHANGED Viewed

@@ -4,7 +4,6 @@ const skeletonShape = require("./skeleton-shape.vue.cjs");
 const skeletonListItem = require("./skeleton-list-item.vue.cjs");
 const skeletonParagraph = require("./skeleton-paragraph.vue.cjs");
 const skeletonText = require("./skeleton-text.vue.cjs");
-;/* empty css                */
 const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
 const _sfc_main = {
   name: "DtSkeleton",

package/dist/vue2/components/skeleton/skeleton.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton.vue.cjs","sources":["../../../components/skeleton/skeleton.vue"],"sourcesContent":["<template>\n <div\n aria-busy=\"true\"\n role=\"status\"\n :aria-label=\"ariaLabel\"\n >\n <dt-skeleton-list-item\n v-if=\"listItemOption\"\n v-bind=\"listItemOption === true ? {} : listItemOption\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n <dt-skeleton-shape\n v-else-if=\"shapeOption\"\n v-bind=\"shapeOption === true ? {} : shapeOption\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n <dt-skeleton-paragraph\n v-else-if=\"paragraphOption\"\n v-bind=\"paragraphOption === true ? {} : paragraphOption\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n <dt-skeleton-text\n v-else\n v-bind=\"textOption \|\| {}\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n </div>\n</template>\n\n<script>\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonListItem from './skeleton-list-item.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\nimport DtSkeletonText from './skeleton-text.vue';\n\n/*\n Skeleton loader is a non-interactive placeholder that displays a preview of the UI to visually communicate\n * that content is in the process of loading. Skeleton is used to provide a low fidelity\n * representation of the user interface (UI) before content appears on the page.\n * @see https://dialtone.dialpad.com/components/skeleton.html\n /\nexport default {\n name: 'DtSkeleton',\n components: {\n DtSkeletonText,\n DtSkeletonShape,\n DtSkeletonListItem,\n DtSkeletonParagraph,\n },\n\n props: {\n /\n Set this prop to have the skeleton render as multiple lines of text.\n * Set only one option prop at a time.\n /\n paragraphOption: {\n type: [Object, Boolean],\n default: null,\n },\n\n /\n Set this prop to have the skeleton render as a list item with an avatar and wrapping text.\n * Set only one option prop at a time.\n /\n listItemOption: {\n type: [Object, Boolean],\n default: null,\n },\n\n /\n Set this prop to have the skeleton render as a single line of text.\n * Set only one option prop at a time.\n /\n textOption: {\n type: Object,\n default: null,\n },\n\n /\n Set this prop to have the skeleton render as a specific shape.\n * Set only one option prop at a time.\n /\n shapeOption: {\n type: [Object, Boolean],\n default: null,\n },\n\n /\n Duration time of the animation (ms), set -1 for an infinite animation.\n /\n animationDuration: {\n type: Number,\n default: -1,\n },\n\n /\n Descriptive label for the content.\n /\n ariaLabel: {\n type: String,\n default: '',\n },\n\n /\n This property has higher priority than \"option.animate\"\n * @values true, false\n /\n animate: {\n type: Boolean,\n default: true,\n },\n\n /\n RippleDuration controls how long the delay is for the animation of a\n * placeholder 1000 pixels from the top of the page. Each placeholder\n * from the top down will have a delay duration from 0 to this offset.\n * The delay of each placeholder animation is based on how far down the page\n * the placeholder is rendered. This is a linear relationship. The unit\n * is milliseconds.\n */\n offset: {\n type: Number,\n default: 1,\n },\n },\n\n computed: {\n validationOptions () {\n return {\n paragraphOption: this.paragraphOption,\n listItemOption: this.listItemOption,\n textOption: this.textOption,\n shapeOption: this.shapeOption,\n };\n },\n },\n\n watch: {\n $props: {\n immediate: true,\n handler: 'validator',\n },\n },\n\n methods: {\n validator () {\n const filtered = Object.entries(this.validationOptions)\n .filter(([_, option]) => option);\n if (filtered.length >= 2) {\n const errorMessage = `Use only one of ${filtered.map(([key]) => key).join(' \| ')} options at the same time`;\n console.error(errorMessage);\n }\n },\n },\n};\n</script>\n~~\n<style lang=\~~"less\">\n// The --placeholder-from-color and --placeholder-to-color\n// custom properties can be set on the parent class of the\n// placeholder to control the animation colors.\n.skeleton-placeholder {\n display: flex;\n stroke: none;\n fill: var(--placeholder-from-color, var(--dt-color-black-300));\n background: var(--placeholder-from-color, var(--dt-color-black-300));\n\n &--animate {\n animation-name: placeholder-throb;\n animation-iteration-count: infinite;\n }\n}\n\n// the animation is used by the skeleton component\n@keyframes placeholder-throb {\n 10% {\n fill: var(--placeholder-from-color, var(--dt-color-black-300));\n background: var(--placeholder-from-color, var(--dt-color-black-300));\n }\n 50% {\n fill: var(--placeholder-to-color, var(--dt-color-black-100));\n background: var(--placeholder-to-color, var(--dt-color-black-100));\n }\n 90% {\n fill: var(--placeholder-from-color, var(--dt-color-black-300));\n background: var(--placeholder-from-color, var(--dt-color-black-300));\n }\n}\n</style>\n"],"names":["DtSkeletonText","DtSkeletonShape","DtSkeletonListItem","DtSkeletonParagraph"],"mappings":"~~;;;;;;;;~~AAiDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,gBAAAA,aAAA;AAAA,IACA,iBAAAC,cAAA;AAAA,IACA,oBAAAC,iBAAA;AAAA,IACA,qBAAAC,kBAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,oBAAA;AACA,aAAA;AAAA,QACA,iBAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,YAAA,KAAA;AAAA,QACA,aAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA;AACA,YAAA,WAAA,OAAA,QAAA,KAAA,iBAAA,EACA,OAAA,CAAA,CAAA,GAAA,MAAA,MAAA,MAAA;AACA,UAAA,SAAA,UAAA,GAAA;AACA,cAAA,eAAA,mBAAA,SAAA,IAAA,CAAA,CAAA,GAAA,MAAA,GAAA,EAAA,KAAA,KAAA,CAAA;AACA,gBAAA,MAAA,YAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"skeleton.vue.cjs","sources":["../../../components/skeleton/skeleton.vue"],"sourcesContent":["<template>\n <div\n aria-busy=\"true\"\n role=\"status\"\n :aria-label=\"ariaLabel\"\n >\n <dt-skeleton-list-item\n v-if=\"listItemOption\"\n v-bind=\"listItemOption === true ? {} : listItemOption\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n <dt-skeleton-shape\n v-else-if=\"shapeOption\"\n v-bind=\"shapeOption === true ? {} : shapeOption\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n <dt-skeleton-paragraph\n v-else-if=\"paragraphOption\"\n v-bind=\"paragraphOption === true ? {} : paragraphOption\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n <dt-skeleton-text\n v-else\n v-bind=\"textOption \|\| {}\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n </div>\n</template>\n\n<script>\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonListItem from './skeleton-list-item.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\nimport DtSkeletonText from './skeleton-text.vue';\n\n/*\n Skeleton loader is a non-interactive placeholder that displays a preview of the UI to visually communicate\n * that content is in the process of loading. Skeleton is used to provide a low fidelity\n * representation of the user interface (UI) before content appears on the page.\n * @see https://dialtone.dialpad.com/components/skeleton.html\n /\nexport default {\n name: 'DtSkeleton',\n components: {\n DtSkeletonText,\n DtSkeletonShape,\n DtSkeletonListItem,\n DtSkeletonParagraph,\n },\n\n props: {\n /\n Set this prop to have the skeleton render as multiple lines of text.\n * Set only one option prop at a time.\n /\n paragraphOption: {\n type: [Object, Boolean],\n default: null,\n },\n\n /\n Set this prop to have the skeleton render as a list item with an avatar and wrapping text.\n * Set only one option prop at a time.\n /\n listItemOption: {\n type: [Object, Boolean],\n default: null,\n },\n\n /\n Set this prop to have the skeleton render as a single line of text.\n * Set only one option prop at a time.\n /\n textOption: {\n type: Object,\n default: null,\n },\n\n /\n Set this prop to have the skeleton render as a specific shape.\n * Set only one option prop at a time.\n /\n shapeOption: {\n type: [Object, Boolean],\n default: null,\n },\n\n /\n Duration time of the animation (ms), set -1 for an infinite animation.\n /\n animationDuration: {\n type: Number,\n default: -1,\n },\n\n /\n Descriptive label for the content.\n /\n ariaLabel: {\n type: String,\n default: '',\n },\n\n /\n This property has higher priority than \"option.animate\"\n * @values true, false\n /\n animate: {\n type: Boolean,\n default: true,\n },\n\n /\n RippleDuration controls how long the delay is for the animation of a\n * placeholder 1000 pixels from the top of the page. Each placeholder\n * from the top down will have a delay duration from 0 to this offset.\n * The delay of each placeholder animation is based on how far down the page\n * the placeholder is rendered. This is a linear relationship. The unit\n * is milliseconds.\n */\n offset: {\n type: Number,\n default: 1,\n },\n },\n\n computed: {\n validationOptions () {\n return {\n paragraphOption: this.paragraphOption,\n listItemOption: this.listItemOption,\n textOption: this.textOption,\n shapeOption: this.shapeOption,\n };\n },\n },\n\n watch: {\n $props: {\n immediate: true,\n handler: 'validator',\n },\n },\n\n methods: {\n validator () {\n const filtered = Object.entries(this.validationOptions)\n .filter(([_, option]) => option);\n if (filtered.length >= 2) {\n const errorMessage = `Use only one of ${filtered.map(([key]) => key).join(' \| ')} options at the same time`;\n console.error(errorMessage);\n }\n },\n },\n};\n</script>\n"],"names":["DtSkeletonText","DtSkeletonShape","DtSkeletonListItem","DtSkeletonParagraph"],"mappings":";;;;;;;AAiDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,gBAAAA,aAAA;AAAA,IACA,iBAAAC,cAAA;AAAA,IACA,oBAAAC,iBAAA;AAAA,IACA,qBAAAC,kBAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,oBAAA;AACA,aAAA;AAAA,QACA,iBAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,YAAA,KAAA;AAAA,QACA,aAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA;AACA,YAAA,WAAA,OAAA,QAAA,KAAA,iBAAA,EACA,OAAA,CAAA,CAAA,GAAA,MAAA,MAAA,MAAA;AACA,UAAA,SAAA,UAAA,GAAA;AACA,cAAA,eAAA,mBAAA,SAAA,IAAA,CAAA,CAAA,GAAA,MAAA,GAAA,EAAA,KAAA,KAAA,CAAA;AACA,gBAAA,MAAA,YAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/skeleton/skeleton.vue.js CHANGED Viewed

@@ -2,7 +2,6 @@ import DtSkeletonShape from "./skeleton-shape.vue.js";
 import DtSkeletonListItem from "./skeleton-list-item.vue.js";
 import DtSkeletonParagraph from "./skeleton-paragraph.vue.js";
 import DtSkeletonText from "./skeleton-text.vue.js";
-/* empty css              */
 import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
 const _sfc_main = {
   name: "DtSkeleton",

package/dist/vue2/components/skeleton/skeleton.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"skeleton.vue.js","sources":["../../../components/skeleton/skeleton.vue"],"sourcesContent":["<template>\n <div\n aria-busy=\"true\"\n role=\"status\"\n :aria-label=\"ariaLabel\"\n >\n <dt-skeleton-list-item\n v-if=\"listItemOption\"\n v-bind=\"listItemOption === true ? {} : listItemOption\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n <dt-skeleton-shape\n v-else-if=\"shapeOption\"\n v-bind=\"shapeOption === true ? {} : shapeOption\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n <dt-skeleton-paragraph\n v-else-if=\"paragraphOption\"\n v-bind=\"paragraphOption === true ? {} : paragraphOption\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n <dt-skeleton-text\n v-else\n v-bind=\"textOption \|\| {}\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n </div>\n</template>\n\n<script>\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonListItem from './skeleton-list-item.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\nimport DtSkeletonText from './skeleton-text.vue';\n\n/*\n Skeleton loader is a non-interactive placeholder that displays a preview of the UI to visually communicate\n * that content is in the process of loading. Skeleton is used to provide a low fidelity\n * representation of the user interface (UI) before content appears on the page.\n * @see https://dialtone.dialpad.com/components/skeleton.html\n /\nexport default {\n name: 'DtSkeleton',\n components: {\n DtSkeletonText,\n DtSkeletonShape,\n DtSkeletonListItem,\n DtSkeletonParagraph,\n },\n\n props: {\n /\n Set this prop to have the skeleton render as multiple lines of text.\n * Set only one option prop at a time.\n /\n paragraphOption: {\n type: [Object, Boolean],\n default: null,\n },\n\n /\n Set this prop to have the skeleton render as a list item with an avatar and wrapping text.\n * Set only one option prop at a time.\n /\n listItemOption: {\n type: [Object, Boolean],\n default: null,\n },\n\n /\n Set this prop to have the skeleton render as a single line of text.\n * Set only one option prop at a time.\n /\n textOption: {\n type: Object,\n default: null,\n },\n\n /\n Set this prop to have the skeleton render as a specific shape.\n * Set only one option prop at a time.\n /\n shapeOption: {\n type: [Object, Boolean],\n default: null,\n },\n\n /\n Duration time of the animation (ms), set -1 for an infinite animation.\n /\n animationDuration: {\n type: Number,\n default: -1,\n },\n\n /\n Descriptive label for the content.\n /\n ariaLabel: {\n type: String,\n default: '',\n },\n\n /\n This property has higher priority than \"option.animate\"\n * @values true, false\n /\n animate: {\n type: Boolean,\n default: true,\n },\n\n /\n RippleDuration controls how long the delay is for the animation of a\n * placeholder 1000 pixels from the top of the page. Each placeholder\n * from the top down will have a delay duration from 0 to this offset.\n * The delay of each placeholder animation is based on how far down the page\n * the placeholder is rendered. This is a linear relationship. The unit\n * is milliseconds.\n */\n offset: {\n type: Number,\n default: 1,\n },\n },\n\n computed: {\n validationOptions () {\n return {\n paragraphOption: this.paragraphOption,\n listItemOption: this.listItemOption,\n textOption: this.textOption,\n shapeOption: this.shapeOption,\n };\n },\n },\n\n watch: {\n $props: {\n immediate: true,\n handler: 'validator',\n },\n },\n\n methods: {\n validator () {\n const filtered = Object.entries(this.validationOptions)\n .filter(([_, option]) => option);\n if (filtered.length >= 2) {\n const errorMessage = `Use only one of ${filtered.map(([key]) => key).join(' \| ')} options at the same time`;\n console.error(errorMessage);\n }\n },\n },\n};\n</script>\n~~\n<style lang=\~~"less\">\n// The --placeholder-from-color and --placeholder-to-color\n// custom properties can be set on the parent class of the\n// placeholder to control the animation colors.\n.skeleton-placeholder {\n display: flex;\n stroke: none;\n fill: var(--placeholder-from-color, var(--dt-color-black-300));\n background: var(--placeholder-from-color, var(--dt-color-black-300));\n\n &--animate {\n animation-name: placeholder-throb;\n animation-iteration-count: infinite;\n }\n}\n\n// the animation is used by the skeleton component\n@keyframes placeholder-throb {\n 10% {\n fill: var(--placeholder-from-color, var(--dt-color-black-300));\n background: var(--placeholder-from-color, var(--dt-color-black-300));\n }\n 50% {\n fill: var(--placeholder-to-color, var(--dt-color-black-100));\n background: var(--placeholder-to-color, var(--dt-color-black-100));\n }\n 90% {\n fill: var(--placeholder-from-color, var(--dt-color-black-300));\n background: var(--placeholder-from-color, var(--dt-color-black-300));\n }\n}\n</style>\n"],"names":[],"mappings":"~~;;;;;;~~AAiDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,oBAAA;AACA,aAAA;AAAA,QACA,iBAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,YAAA,KAAA;AAAA,QACA,aAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA;AACA,YAAA,WAAA,OAAA,QAAA,KAAA,iBAAA,EACA,OAAA,CAAA,CAAA,GAAA,MAAA,MAAA,MAAA;AACA,UAAA,SAAA,UAAA,GAAA;AACA,cAAA,eAAA,mBAAA,SAAA,IAAA,CAAA,CAAA,GAAA,MAAA,GAAA,EAAA,KAAA,KAAA,CAAA;AACA,gBAAA,MAAA,YAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"skeleton.vue.js","sources":["../../../components/skeleton/skeleton.vue"],"sourcesContent":["<template>\n <div\n aria-busy=\"true\"\n role=\"status\"\n :aria-label=\"ariaLabel\"\n >\n <dt-skeleton-list-item\n v-if=\"listItemOption\"\n v-bind=\"listItemOption === true ? {} : listItemOption\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n <dt-skeleton-shape\n v-else-if=\"shapeOption\"\n v-bind=\"shapeOption === true ? {} : shapeOption\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n <dt-skeleton-paragraph\n v-else-if=\"paragraphOption\"\n v-bind=\"paragraphOption === true ? {} : paragraphOption\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n <dt-skeleton-text\n v-else\n v-bind=\"textOption \|\| {}\"\n :animation-duration=\"animationDuration\"\n :animate=\"animate\"\n :offset=\"offset\"\n />\n </div>\n</template>\n\n<script>\nimport DtSkeletonShape from './skeleton-shape.vue';\nimport DtSkeletonListItem from './skeleton-list-item.vue';\nimport DtSkeletonParagraph from './skeleton-paragraph.vue';\nimport DtSkeletonText from './skeleton-text.vue';\n\n/*\n Skeleton loader is a non-interactive placeholder that displays a preview of the UI to visually communicate\n * that content is in the process of loading. Skeleton is used to provide a low fidelity\n * representation of the user interface (UI) before content appears on the page.\n * @see https://dialtone.dialpad.com/components/skeleton.html\n /\nexport default {\n name: 'DtSkeleton',\n components: {\n DtSkeletonText,\n DtSkeletonShape,\n DtSkeletonListItem,\n DtSkeletonParagraph,\n },\n\n props: {\n /\n Set this prop to have the skeleton render as multiple lines of text.\n * Set only one option prop at a time.\n /\n paragraphOption: {\n type: [Object, Boolean],\n default: null,\n },\n\n /\n Set this prop to have the skeleton render as a list item with an avatar and wrapping text.\n * Set only one option prop at a time.\n /\n listItemOption: {\n type: [Object, Boolean],\n default: null,\n },\n\n /\n Set this prop to have the skeleton render as a single line of text.\n * Set only one option prop at a time.\n /\n textOption: {\n type: Object,\n default: null,\n },\n\n /\n Set this prop to have the skeleton render as a specific shape.\n * Set only one option prop at a time.\n /\n shapeOption: {\n type: [Object, Boolean],\n default: null,\n },\n\n /\n Duration time of the animation (ms), set -1 for an infinite animation.\n /\n animationDuration: {\n type: Number,\n default: -1,\n },\n\n /\n Descriptive label for the content.\n /\n ariaLabel: {\n type: String,\n default: '',\n },\n\n /\n This property has higher priority than \"option.animate\"\n * @values true, false\n /\n animate: {\n type: Boolean,\n default: true,\n },\n\n /\n RippleDuration controls how long the delay is for the animation of a\n * placeholder 1000 pixels from the top of the page. Each placeholder\n * from the top down will have a delay duration from 0 to this offset.\n * The delay of each placeholder animation is based on how far down the page\n * the placeholder is rendered. This is a linear relationship. The unit\n * is milliseconds.\n */\n offset: {\n type: Number,\n default: 1,\n },\n },\n\n computed: {\n validationOptions () {\n return {\n paragraphOption: this.paragraphOption,\n listItemOption: this.listItemOption,\n textOption: this.textOption,\n shapeOption: this.shapeOption,\n };\n },\n },\n\n watch: {\n $props: {\n immediate: true,\n handler: 'validator',\n },\n },\n\n methods: {\n validator () {\n const filtered = Object.entries(this.validationOptions)\n .filter(([_, option]) => option);\n if (filtered.length >= 2) {\n const errorMessage = `Use only one of ${filtered.map(([key]) => key).join(' \| ')} options at the same time`;\n console.error(errorMessage);\n }\n },\n },\n};\n</script>\n"],"names":[],"mappings":";;;;;AAiDA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAUA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,oBAAA;AACA,aAAA;AAAA,QACA,iBAAA,KAAA;AAAA,QACA,gBAAA,KAAA;AAAA,QACA,YAAA,KAAA;AAAA,QACA,aAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,YAAA;AACA,YAAA,WAAA,OAAA,QAAA,KAAA,iBAAA,EACA,OAAA,CAAA,CAAA,GAAA,MAAA,MAAA,MAAA;AACA,UAAA,SAAA,UAAA,GAAA;AACA,cAAA,eAAA,mBAAA,SAAA,IAAA,CAAA,CAAA,GAAA,MAAA,GAAA,EAAA,KAAA,KAAA,CAAA;AACA,gBAAA,MAAA,YAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/vue2/components/tooltip/tooltip.vue.cjs CHANGED Viewed

@@ -4,7 +4,6 @@ const tooltip_constants = require("./tooltip_constants.cjs");
 const popover_constants = require("../popover/popover_constants.cjs");
 const common_utils = require("../../common/utils.cjs");
 const tippy_utils = require("../popover/tippy_utils.cjs");
-;/* empty css               */
 const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
 const _sfc_main = {
   name: "DtTooltip",

package/dist/vue2/components/tooltip/tooltip.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip.vue.cjs","sources":["../../../components/tooltip/tooltip.vue"],"sourcesContent":["<template>\n <div data-qa=\"dt-tooltip-container\">\n <!-- disabling as the below events are for capturing events from interactive\n elements within the span rather than on the span itself -->\n <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n <span\n v-if=\"!externalAnchor\"\n ref=\"anchor\"\n data-qa=\"dt-tooltip-anchor\"\n @focusin=\"onEnterAnchor\"\n @focusout=\"onLeaveAnchor\"\n @mouseenter=\"onEnterAnchor\"\n @mouseleave=\"onLeaveAnchor\"\n @keydown.esc=\"onLeaveAnchor\"\n >\n <!-- @slot Slot for the anchor element -->\n <slot\n name=\"anchor\"\n />\n </span>\n <div\n :id=\"id\"\n ref=\"content\"\n data-qa=\"dt-tooltip\"\n :class=\"[\n 'd-tooltip',\n {\n [ TOOLTIP_KIND_MODIFIERS.inverted ]: inverted,\n },\n contentClass,\n ]\"\n v-on=\"$listeners\"\n >\n <!-- In case when transitionend event doesn't work correct (for ex. tooltip component with custom trigger) -->\n <!-- after-leave event can be used instead of transitionend -->\n <!-- @slot Slot for the content, defaults to message prop -->\n <slot>\n {{ message }}\n </slot>\n </div>\n </div>\n</template>\n\n<script>\nimport {\n TOOLTIP_KIND_MODIFIERS,\n TOOLTIP_DIRECTIONS,\n TOOLTIP_STICKY_VALUES,\n TOOLTIP_DELAY_MS,\n} from './tooltip_constants.js';\nimport {\n POPOVER_APPEND_TO_VALUES,\n} from '../popover/popover_constants';\nimport { flushPromises, getUniqueString } from '@/common/utils';\nimport {\n createTippy,\n getAnchor,\n getPopperOptions,\n} from '@/components/popover/tippy_utils';\n\n/*\n A tooltip is a floating label that briefly explains an action, function, or an element.\n * Its content is exclusively text and shouldn't be vital information for users.\n * If richer media is desired, consider using a popover instead.\n * @see https://dialtone.dialpad.com/components/tooltip.html\n /\nexport default {\n name: 'DtTooltip',\n\n props: {\n /\n The id of the tooltip\n /\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /\n If the popover does not fit in the direction described by \"placement\",\n * it will attempt to change its direction to the \"fallbackPlacements\"\n * if defined, otherwise it will automatically position to a new location\n * as it sees best fit. See\n * <a\n * class=\"d-link\"\n * href=\"https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n * target=\"_blank\"\n * >\n * Popper.js docs\n * </a>\n * /\n fallbackPlacements: {\n type: Array,\n default: () => ['auto'],\n },\n\n /\n If true, applies inverted styles to the tooltip\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n Displaces the tooltip from its reference element\n * by the specified number of pixels. See\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n /\n offset: {\n type: Array,\n default: () => [0, 12],\n },\n\n /\n The direction the popover displays relative to the anchor. See\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n * @values top, top-start, top-end,\n * right, right-start, right-end,\n * left, left-start, left-end,\n * bottom, bottom-start, bottom-end,\n * auto, auto-start, auto-end\n /\n placement: {\n type: String,\n default: 'top',\n validator (placement) {\n return TOOLTIP_DIRECTIONS.includes(placement);\n },\n },\n\n /\n If the tooltip sticks to the anchor. This is usually not needed, but can be needed\n * if the reference element's position is animating, or to automatically update the popover\n * position in those cases the DOM layout changes the reference element's position.\n * `true` enables it, `reference` only checks the \"reference\" rect for changes and `popper` only\n * checks the \"popper\" rect for changes. See\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#sticky\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n * @values true, false, reference, popper\n /\n sticky: {\n type: [Boolean, String],\n default: true,\n validator: (sticky) => {\n return TOOLTIP_STICKY_VALUES.includes(sticky);\n },\n },\n\n /\n Sets the element to which the tooltip is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * This prop is not reactive, must be set on initial render.\n * @values 'body', 'parent', HTMLElement,\n /\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) \|\|\n (appendTo instanceof HTMLElement);\n },\n },\n\n /\n Additional css classes for the tooltip content 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 contentClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n A provided message for the tooltip content\n /\n message: {\n type: String,\n default: '',\n },\n\n /\n Controls whether hover/focus causes the tooltip to appear.\n * Cannot be combined with the show prop. show value will be ignored.\n * by default this is true, if you override with false, the tooltip will never show up.\n /\n enabled: {\n type: Boolean,\n default: true,\n },\n\n /\n Controls whether the tooltip is shown. Leaving this null will have the tooltip trigger on mouseover by default.\n * If you set this value, the default mouseover behavior will be disabled and you can control it as you need.\n * Supports .sync modifier\n * @values null, true, false\n /\n show: {\n type: Boolean,\n default: null,\n },\n\n /\n Whether the tooltip should have a transition effect (fade).\n /\n transition: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the tooltip will have a delay when being focused or moused over.\n * @values true, false\n /\n delay: {\n type: Boolean,\n default: true,\n },\n\n /\n Set a custom theme on the tooltip. See https://atomiks.github.io/tippyjs/v6/themes/\n /\n theme: {\n type: String,\n default: null,\n },\n\n /\n External anchor id to use in those cases the anchor can't be provided via the slot.\n * For instance, using the combobox's input as the anchor for the popover.\n /\n externalAnchor: {\n type: String,\n default: null,\n },\n },\n\n emits: [\n /\n Emitted when tooltip is shown or hidden\n \n @event shown\n * @type {Boolean}\n /\n 'shown',\n\n /\n Sync show value\n \n @event update:show\n */\n 'update:show',\n ],\n\n data () {\n return {\n TOOLTIP_KIND_MODIFIERS,\n tip: null,\n\n inTimer: null,\n\n // Internal state for whether the tooltip is shown. Changing the prop\n // will update this.\n internalShow: false,\n\n // this is where the placement currently is, this can be different than\n // the placement prop when there is not enough available room for the tip\n // to display and it uses a fallback placement.\n currentPlacement: this.placement,\n };\n },\n\n computed: {\n // eslint-disable-next-line complexity\n tippyProps () {\n return {\n offset: this.offset,\n delay: this.delay ? TOOLTIP_DELAY_MS : false,\n placement: this.placement,\n sticky: this.sticky,\n theme: this.inverted ? 'inverted' : this.theme,\n animation: this.transition ? 'fade' : false,\n // onShown only triggers when transition is truthy\n onShown: (tooltipInstance) => this.onShow(tooltipInstance, 'onShown'),\n // onShown will always be called, but it will be called before the animation is complete\n onShow: (tooltipInstance) => this.onShow(tooltipInstance, 'onShow'),\n onHidden: this.onHide,\n\n popperOptions: getPopperOptions({\n fallbackPlacements: this.fallbackPlacements,\n hasHideModifierEnabled: true,\n onChangePlacement: this.onChangePlacement,\n }),\n };\n },\n\n anchor () {\n return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : getAnchor(this.$refs.anchor);\n },\n },\n\n watch: {\n\n tippyProps: {\n handler: 'setProps',\n deep: true,\n },\n\n show: {\n handler: function (show) {\n if (show !== null && this.enabled) {\n this.internalShow = show;\n }\n },\n\n immediate: true,\n },\n\n internalShow (value) {\n if (value) {\n this.setProps();\n this.tip.show();\n } else {\n this.tip.hide();\n }\n },\n\n sticky (sticky) {\n this.tip.setProps({\n sticky,\n });\n },\n },\n\n async mounted () {\n if (!this.enabled && this.show != null) {\n console.warn('Tooltip: You cannot use both the enabled and show props at the same time.');\n console.warn('The show prop will be ignored.');\n }\n\n this.tip = createTippy(this.anchor, this.initOptions());\n if (this.externalAnchor) {\n await flushPromises();\n this.addExternalAnchorEventListeners();\n }\n },\n\n beforeDestroy () {\n this.externalAnchor && this.removeExternalAnchorEventListeners();\n\n if (this.anchor?._tippy) {\n this.tip?.destroy();\n }\n },\n\n methods: {\n calculateAnchorZindex () {\n // if a modal is currently active render at modal-element z-index, otherwise at tooltip z-index\n if (this.$el.getRootNode()\n .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"]') \|\|\n // Special case because we don't have any dialtone drawer component yet. Render at 651 when\n // anchor of popover is within a drawer.\n this.$el.closest('.d-zi-drawer')) {\n return 651;\n } else {\n return 400;\n }\n },\n\n hasVisibleFocus () {\n return this.anchor.matches(':focus-visible');\n },\n\n onEnterAnchor (e) {\n if (!this.enabled) return;\n if (this.delay && this.inTimer === null) {\n this.inTimer = setTimeout(() => {\n this.triggerShow(e);\n }, TOOLTIP_DELAY_MS);\n } else {\n this.triggerShow(e);\n }\n },\n\n triggerShow (e) {\n if (e.type === 'focusin') {\n // only show tooltips on visible focus when triggered via focus.\n // when the user is using the mouse they only want tooltips to display\n // on mouseover.\n //\n // Example: anchor of a popover is a button with tooltip.\n // closing it with the mouse would trigger the tooltip to display as\n // the anchor is focused on close. Not what we want.\n if (this.show === null && this.hasVisibleFocus()) {\n this.internalShow = true;\n }\n } else {\n if (this.show === null) this.internalShow = true;\n }\n },\n\n onLeaveAnchor (e) {\n if (e.type === 'keydown' && e.code !== 'Escape') return;\n\n clearTimeout(this.inTimer);\n this.inTimer = null;\n this.triggerHide();\n },\n\n triggerHide () {\n if (this.show === null) this.internalShow = false;\n },\n\n onChangePlacement (placement) {\n this.currentPlacement = placement;\n },\n\n onHide () {\n this.tip?.unmount();\n this.$emit('shown', false);\n if (this.show !== null) {\n this.$emit('update:show', false);\n }\n },\n\n onShow (tooltipInstance, callingMethod) {\n if (!this.tooltipHasContent(tooltipInstance)) {\n return false;\n }\n if (this.transition && callingMethod === 'onShow') {\n return;\n }\n this.$emit('shown', true);\n if (this.show !== null) {\n this.$emit('update:show', true);\n }\n },\n\n setProps () {\n if (this.tip && this.tip.setProps) {\n this.tip.setProps({\n ...this.tippyProps,\n // these need to be set here rather than in tippyProps because they are non-reactive\n appendTo: this.appendTo === 'body' ? this.anchor?.getRootNode()?.querySelector('body') : this.appendTo,\n zIndex: this.calculateAnchorZindex(),\n });\n }\n },\n\n onMount () {\n this.setProps();\n },\n\n tooltipHasContent (tooltipInstance) {\n // don't show tooltip when no content\n if (tooltipInstance.props.content.textContent.trim().length === 0) {\n return false;\n }\n return true;\n },\n\n // set initial options here. If any of the options need to dynamically change, they should be put in\n // tippyProps instead.\n initOptions () {\n const template = this.$refs.content;\n return {\n content: template,\n arrow: '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"7\"><path d=\"M 14.5,7 8,0 1.5,7 Z\"/></svg>',\n // transition duration - same as our custom fade delay in dialtone-globals.less\n duration: 180,\n interactive: false,\n trigger: 'manual',\n hideOnClick: false,\n // disable tooltip from displaying on touch devices\n touch: false,\n onMount: this.onMount,\n showOnCreate: this.internalShow,\n popperOptions: getPopperOptions({\n hasHideModifierEnabled: true,\n }),\n };\n },\n\n addExternalAnchorEventListeners () {\n ['focusin', 'mouseenter'].forEach(listener => {\n this.anchor?.addEventListener(listener, (event) => this.onEnterAnchor(event));\n });\n ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n this.anchor?.addEventListener(listener, (event) => this.onLeaveAnchor(event));\n });\n },\n\n removeExternalAnchorEventListeners () {\n ['focusin', 'mouseenter'].forEach(listener => {\n this.anchor?.removeEventListener(listener, (event) => this.onEnterAnchor(event));\n });\n ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n this.anchor?.removeEventListener(listener, (event) => this.onLeaveAnchor(event));\n });\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n@import 'tippy.js/dist/svg-arrow.css';\n\n.tippy-box[data-reference-hidden] {\n visibility: hidden;\n pointer-events: none;\n}\n\n.tippy-box > .tippy-svg-arrow {\n fill: var(--dt-color-surface-contrast);\n}\n\n.tippy-box[data-theme~='inverted'] > .tippy-svg-arrow {\n fill: var(--dt-color-surface-moderate);\n}\n\n.tippy-box[data-animation='fade'][data-state='hidden'] {\n opacity: 0;\n}\n</style>\n"],"names":["getUniqueString","TOOLTIP_DIRECTIONS","TOOLTIP_STICKY_VALUES","POPOVER_APPEND_TO_VALUES","TOOLTIP_KIND_MODIFIERS","TOOLTIP_DELAY_MS","getPopperOptions","getAnchor","createTippy","flushPromises"],"mappings":"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"}
1	+ {"version":3,"file":"tooltip.vue.cjs","sources":["../../../components/tooltip/tooltip.vue"],"sourcesContent":["<template>\n <div data-qa=\"dt-tooltip-container\">\n <!-- disabling as the below events are for capturing events from interactive\n elements within the span rather than on the span itself -->\n <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n <span\n v-if=\"!externalAnchor\"\n ref=\"anchor\"\n data-qa=\"dt-tooltip-anchor\"\n @focusin=\"onEnterAnchor\"\n @focusout=\"onLeaveAnchor\"\n @mouseenter=\"onEnterAnchor\"\n @mouseleave=\"onLeaveAnchor\"\n @keydown.esc=\"onLeaveAnchor\"\n >\n <!-- @slot Slot for the anchor element -->\n <slot\n name=\"anchor\"\n />\n </span>\n <div\n :id=\"id\"\n ref=\"content\"\n data-qa=\"dt-tooltip\"\n :class=\"[\n 'd-tooltip',\n {\n [ TOOLTIP_KIND_MODIFIERS.inverted ]: inverted,\n },\n contentClass,\n ]\"\n v-on=\"$listeners\"\n >\n <!-- In case when transitionend event doesn't work correct (for ex. tooltip component with custom trigger) -->\n <!-- after-leave event can be used instead of transitionend -->\n <!-- @slot Slot for the content, defaults to message prop -->\n <slot>\n {{ message }}\n </slot>\n </div>\n </div>\n</template>\n\n<script>\nimport {\n TOOLTIP_KIND_MODIFIERS,\n TOOLTIP_DIRECTIONS,\n TOOLTIP_STICKY_VALUES,\n TOOLTIP_DELAY_MS,\n} from './tooltip_constants.js';\nimport {\n POPOVER_APPEND_TO_VALUES,\n} from '../popover/popover_constants';\nimport { flushPromises, getUniqueString } from '@/common/utils';\nimport {\n createTippy,\n getAnchor,\n getPopperOptions,\n} from '@/components/popover/tippy_utils';\n\n/*\n A tooltip is a floating label that briefly explains an action, function, or an element.\n * Its content is exclusively text and shouldn't be vital information for users.\n * If richer media is desired, consider using a popover instead.\n * @see https://dialtone.dialpad.com/components/tooltip.html\n /\nexport default {\n name: 'DtTooltip',\n\n props: {\n /\n The id of the tooltip\n /\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /\n If the popover does not fit in the direction described by \"placement\",\n * it will attempt to change its direction to the \"fallbackPlacements\"\n * if defined, otherwise it will automatically position to a new location\n * as it sees best fit. See\n * <a\n * class=\"d-link\"\n * href=\"https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n * target=\"_blank\"\n * >\n * Popper.js docs\n * </a>\n * /\n fallbackPlacements: {\n type: Array,\n default: () => ['auto'],\n },\n\n /\n If true, applies inverted styles to the tooltip\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n Displaces the tooltip from its reference element\n * by the specified number of pixels. See\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n /\n offset: {\n type: Array,\n default: () => [0, 12],\n },\n\n /\n The direction the popover displays relative to the anchor. See\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n * @values top, top-start, top-end,\n * right, right-start, right-end,\n * left, left-start, left-end,\n * bottom, bottom-start, bottom-end,\n * auto, auto-start, auto-end\n /\n placement: {\n type: String,\n default: 'top',\n validator (placement) {\n return TOOLTIP_DIRECTIONS.includes(placement);\n },\n },\n\n /\n If the tooltip sticks to the anchor. This is usually not needed, but can be needed\n * if the reference element's position is animating, or to automatically update the popover\n * position in those cases the DOM layout changes the reference element's position.\n * `true` enables it, `reference` only checks the \"reference\" rect for changes and `popper` only\n * checks the \"popper\" rect for changes. See\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#sticky\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n * @values true, false, reference, popper\n /\n sticky: {\n type: [Boolean, String],\n default: true,\n validator: (sticky) => {\n return TOOLTIP_STICKY_VALUES.includes(sticky);\n },\n },\n\n /\n Sets the element to which the tooltip is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * This prop is not reactive, must be set on initial render.\n * @values 'body', 'parent', HTMLElement,\n /\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) \|\|\n (appendTo instanceof HTMLElement);\n },\n },\n\n /\n Additional css classes for the tooltip content 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 contentClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n A provided message for the tooltip content\n /\n message: {\n type: String,\n default: '',\n },\n\n /\n Controls whether hover/focus causes the tooltip to appear.\n * Cannot be combined with the show prop. show value will be ignored.\n * by default this is true, if you override with false, the tooltip will never show up.\n /\n enabled: {\n type: Boolean,\n default: true,\n },\n\n /\n Controls whether the tooltip is shown. Leaving this null will have the tooltip trigger on mouseover by default.\n * If you set this value, the default mouseover behavior will be disabled and you can control it as you need.\n * Supports .sync modifier\n * @values null, true, false\n /\n show: {\n type: Boolean,\n default: null,\n },\n\n /\n Whether the tooltip should have a transition effect (fade).\n /\n transition: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the tooltip will have a delay when being focused or moused over.\n * @values true, false\n /\n delay: {\n type: Boolean,\n default: true,\n },\n\n /\n Set a custom theme on the tooltip. See https://atomiks.github.io/tippyjs/v6/themes/\n /\n theme: {\n type: String,\n default: null,\n },\n\n /\n External anchor id to use in those cases the anchor can't be provided via the slot.\n * For instance, using the combobox's input as the anchor for the popover.\n /\n externalAnchor: {\n type: String,\n default: null,\n },\n },\n\n emits: [\n /\n Emitted when tooltip is shown or hidden\n \n @event shown\n * @type {Boolean}\n /\n 'shown',\n\n /\n Sync show value\n \n @event update:show\n */\n 'update:show',\n ],\n\n data () {\n return {\n TOOLTIP_KIND_MODIFIERS,\n tip: null,\n\n inTimer: null,\n\n // Internal state for whether the tooltip is shown. Changing the prop\n // will update this.\n internalShow: false,\n\n // this is where the placement currently is, this can be different than\n // the placement prop when there is not enough available room for the tip\n // to display and it uses a fallback placement.\n currentPlacement: this.placement,\n };\n },\n\n computed: {\n // eslint-disable-next-line complexity\n tippyProps () {\n return {\n offset: this.offset,\n delay: this.delay ? TOOLTIP_DELAY_MS : false,\n placement: this.placement,\n sticky: this.sticky,\n theme: this.inverted ? 'inverted' : this.theme,\n animation: this.transition ? 'fade' : false,\n // onShown only triggers when transition is truthy\n onShown: (tooltipInstance) => this.onShow(tooltipInstance, 'onShown'),\n // onShown will always be called, but it will be called before the animation is complete\n onShow: (tooltipInstance) => this.onShow(tooltipInstance, 'onShow'),\n onHidden: this.onHide,\n\n popperOptions: getPopperOptions({\n fallbackPlacements: this.fallbackPlacements,\n hasHideModifierEnabled: true,\n onChangePlacement: this.onChangePlacement,\n }),\n };\n },\n\n anchor () {\n return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : getAnchor(this.$refs.anchor);\n },\n },\n\n watch: {\n\n tippyProps: {\n handler: 'setProps',\n deep: true,\n },\n\n show: {\n handler: function (show) {\n if (show !== null && this.enabled) {\n this.internalShow = show;\n }\n },\n\n immediate: true,\n },\n\n internalShow (value) {\n if (value) {\n this.setProps();\n this.tip.show();\n } else {\n this.tip.hide();\n }\n },\n\n sticky (sticky) {\n this.tip.setProps({\n sticky,\n });\n },\n },\n\n async mounted () {\n if (!this.enabled && this.show != null) {\n console.warn('Tooltip: You cannot use both the enabled and show props at the same time.');\n console.warn('The show prop will be ignored.');\n }\n\n this.tip = createTippy(this.anchor, this.initOptions());\n if (this.externalAnchor) {\n await flushPromises();\n this.addExternalAnchorEventListeners();\n }\n },\n\n beforeDestroy () {\n this.externalAnchor && this.removeExternalAnchorEventListeners();\n\n if (this.anchor?._tippy) {\n this.tip?.destroy();\n }\n },\n\n methods: {\n calculateAnchorZindex () {\n // if a modal is currently active render at modal-element z-index, otherwise at tooltip z-index\n if (this.$el.getRootNode()\n .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"]') \|\|\n // Special case because we don't have any dialtone drawer component yet. Render at 651 when\n // anchor of popover is within a drawer.\n this.$el.closest('.d-zi-drawer')) {\n return 651;\n } else {\n return 400;\n }\n },\n\n hasVisibleFocus () {\n return this.anchor.matches(':focus-visible');\n },\n\n onEnterAnchor (e) {\n if (!this.enabled) return;\n if (this.delay && this.inTimer === null) {\n this.inTimer = setTimeout(() => {\n this.triggerShow(e);\n }, TOOLTIP_DELAY_MS);\n } else {\n this.triggerShow(e);\n }\n },\n\n triggerShow (e) {\n if (e.type === 'focusin') {\n // only show tooltips on visible focus when triggered via focus.\n // when the user is using the mouse they only want tooltips to display\n // on mouseover.\n //\n // Example: anchor of a popover is a button with tooltip.\n // closing it with the mouse would trigger the tooltip to display as\n // the anchor is focused on close. Not what we want.\n if (this.show === null && this.hasVisibleFocus()) {\n this.internalShow = true;\n }\n } else {\n if (this.show === null) this.internalShow = true;\n }\n },\n\n onLeaveAnchor (e) {\n if (e.type === 'keydown' && e.code !== 'Escape') return;\n\n clearTimeout(this.inTimer);\n this.inTimer = null;\n this.triggerHide();\n },\n\n triggerHide () {\n if (this.show === null) this.internalShow = false;\n },\n\n onChangePlacement (placement) {\n this.currentPlacement = placement;\n },\n\n onHide () {\n this.tip?.unmount();\n this.$emit('shown', false);\n if (this.show !== null) {\n this.$emit('update:show', false);\n }\n },\n\n onShow (tooltipInstance, callingMethod) {\n if (!this.tooltipHasContent(tooltipInstance)) {\n return false;\n }\n if (this.transition && callingMethod === 'onShow') {\n return;\n }\n this.$emit('shown', true);\n if (this.show !== null) {\n this.$emit('update:show', true);\n }\n },\n\n setProps () {\n if (this.tip && this.tip.setProps) {\n this.tip.setProps({\n ...this.tippyProps,\n // these need to be set here rather than in tippyProps because they are non-reactive\n appendTo: this.appendTo === 'body' ? this.anchor?.getRootNode()?.querySelector('body') : this.appendTo,\n zIndex: this.calculateAnchorZindex(),\n });\n }\n },\n\n onMount () {\n this.setProps();\n },\n\n tooltipHasContent (tooltipInstance) {\n // don't show tooltip when no content\n if (tooltipInstance.props.content.textContent.trim().length === 0) {\n return false;\n }\n return true;\n },\n\n // set initial options here. If any of the options need to dynamically change, they should be put in\n // tippyProps instead.\n initOptions () {\n const template = this.$refs.content;\n return {\n content: template,\n arrow: '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"7\"><path d=\"M 14.5,7 8,0 1.5,7 Z\"/></svg>',\n // transition duration - same as our custom fade delay in dialtone-globals.less\n duration: 180,\n interactive: false,\n trigger: 'manual',\n hideOnClick: false,\n // disable tooltip from displaying on touch devices\n touch: false,\n onMount: this.onMount,\n showOnCreate: this.internalShow,\n popperOptions: getPopperOptions({\n hasHideModifierEnabled: true,\n }),\n };\n },\n\n addExternalAnchorEventListeners () {\n ['focusin', 'mouseenter'].forEach(listener => {\n this.anchor?.addEventListener(listener, (event) => this.onEnterAnchor(event));\n });\n ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n this.anchor?.addEventListener(listener, (event) => this.onLeaveAnchor(event));\n });\n },\n\n removeExternalAnchorEventListeners () {\n ['focusin', 'mouseenter'].forEach(listener => {\n this.anchor?.removeEventListener(listener, (event) => this.onEnterAnchor(event));\n });\n ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n this.anchor?.removeEventListener(listener, (event) => this.onLeaveAnchor(event));\n });\n },\n },\n};\n</script>\n"],"names":["getUniqueString","TOOLTIP_DIRECTIONS","TOOLTIP_STICKY_VALUES","POPOVER_APPEND_TO_VALUES","TOOLTIP_KIND_MODIFIERS","TOOLTIP_DELAY_MS","getPopperOptions","getAnchor","createTippy","flushPromises"],"mappings":";;;;;;;AAkEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAA,aAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAeA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA,GAAA,EAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiBA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,WAAA;AACA,eAAAC,kBAAA,mBAAA,SAAA,SAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiBA,QAAA;AAAA,MACA,MAAA,CAAA,SAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,WAAA;AACA,eAAAC,kBAAA,sBAAA,SAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,UAAA;AAAA,MACA,MAAA,CAAA,aAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,cAAA;AACA,eAAAC,kBAAA,yBAAA,SAAA,QAAA,KACA,oBAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,wBAAAC,kBAAA;AAAA,MACA,KAAA;AAAA,MAEA,SAAA;AAAA;AAAA;AAAA,MAIA,cAAA;AAAA;AAAA;AAAA;AAAA,MAKA,kBAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,aAAA;AACA,aAAA;AAAA,QACA,QAAA,KAAA;AAAA,QACA,OAAA,KAAA,QAAAC,kBAAAA,mBAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,QAAA,KAAA;AAAA,QACA,OAAA,KAAA,WAAA,aAAA,KAAA;AAAA,QACA,WAAA,KAAA,aAAA,SAAA;AAAA;AAAA,QAEA,SAAA,CAAA,oBAAA,KAAA,OAAA,iBAAA,SAAA;AAAA;AAAA,QAEA,QAAA,CAAA,oBAAA,KAAA,OAAA,iBAAA,QAAA;AAAA,QACA,UAAA,KAAA;AAAA,QAEA,eAAAC,YAAAA,iBAAA;AAAA,UACA,oBAAA,KAAA;AAAA,UACA,wBAAA;AAAA,UACA,mBAAA,KAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,SAAA;AACA,aAAA,KAAA,iBAAA,SAAA,KAAA,cAAA,KAAA,cAAA,IAAAC,YAAAA,UAAA,KAAA,MAAA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IAEA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IAEA,MAAA;AAAA,MACA,SAAA,SAAA,MAAA;AACA,YAAA,SAAA,QAAA,KAAA,SAAA;AACA,eAAA,eAAA;AAAA,QACA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,IAEA,aAAA,OAAA;AACA,UAAA,OAAA;AACA,aAAA,SAAA;AACA,aAAA,IAAA;MACA,OAAA;AACA,aAAA,IAAA;MACA;AAAA,IACA;AAAA,IAEA,OAAA,QAAA;AACA,WAAA,IAAA,SAAA;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,QAAA,CAAA,KAAA,WAAA,KAAA,QAAA,MAAA;AACA,cAAA,KAAA,2EAAA;AACA,cAAA,KAAA,gCAAA;AAAA,IACA;AAEA,SAAA,MAAAC,wBAAA,KAAA,QAAA,KAAA,YAAA,CAAA;AACA,QAAA,KAAA,gBAAA;AACA,YAAAC,aAAA,cAAA;AACA,WAAA,gCAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,gBAAA;;AACA,SAAA,kBAAA,KAAA;AAEA,SAAA,UAAA,WAAA,mBAAA,QAAA;AACA,iBAAA,QAAA,mBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,wBAAA;AAEA,UAAA,KAAA,IAAA,YAAA,EACA,cAAA,2EAAA;AAAA;AAAA,MAGA,KAAA,IAAA,QAAA,cAAA,GAAA;AACA,eAAA;AAAA,MACA,OAAA;AACA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,OAAA,QAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA,GAAA;AACA,UAAA,CAAA,KAAA,QAAA;AACA,UAAA,KAAA,SAAA,KAAA,YAAA,MAAA;AACA,aAAA,UAAA,WAAA,MAAA;AACA,eAAA,YAAA,CAAA;AAAA,QACA,GAAAJ,kBAAA,gBAAA;AAAA,MACA,OAAA;AACA,aAAA,YAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,YAAA,GAAA;AACA,UAAA,EAAA,SAAA,WAAA;AAQA,YAAA,KAAA,SAAA,QAAA,KAAA,gBAAA,GAAA;AACA,eAAA,eAAA;AAAA,QACA;AAAA,MACA,OAAA;AACA,YAAA,KAAA,SAAA,KAAA,MAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,cAAA,GAAA;AACA,UAAA,EAAA,SAAA,aAAA,EAAA,SAAA,SAAA;AAEA,mBAAA,KAAA,OAAA;AACA,WAAA,UAAA;AACA,WAAA,YAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,UAAA,KAAA,SAAA,KAAA,MAAA,eAAA;AAAA,IACA;AAAA,IAEA,kBAAA,WAAA;AACA,WAAA,mBAAA;AAAA,IACA;AAAA,IAEA,SAAA;;AACA,iBAAA,QAAA,mBAAA;AACA,WAAA,MAAA,SAAA,KAAA;AACA,UAAA,KAAA,SAAA,MAAA;AACA,aAAA,MAAA,eAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,OAAA,iBAAA,eAAA;AACA,UAAA,CAAA,KAAA,kBAAA,eAAA,GAAA;AACA,eAAA;AAAA,MACA;AACA,UAAA,KAAA,cAAA,kBAAA,UAAA;AACA;AAAA,MACA;AACA,WAAA,MAAA,SAAA,IAAA;AACA,UAAA,KAAA,SAAA,MAAA;AACA,aAAA,MAAA,eAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,WAAA;;AACA,UAAA,KAAA,OAAA,KAAA,IAAA,UAAA;AACA,aAAA,IAAA,SAAA;AAAA,UACA,GAAA,KAAA;AAAA;AAAA,UAEA,UAAA,KAAA,aAAA,UAAA,gBAAA,WAAA,mBAAA,kBAAA,mBAAA,cAAA,UAAA,KAAA;AAAA,UACA,QAAA,KAAA,sBAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,UAAA;AACA,WAAA,SAAA;AAAA,IACA;AAAA,IAEA,kBAAA,iBAAA;AAEA,UAAA,gBAAA,MAAA,QAAA,YAAA,KAAA,EAAA,WAAA,GAAA;AACA,eAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA;AAAA;AAAA,IAIA,cAAA;AACA,YAAA,WAAA,KAAA,MAAA;AACA,aAAA;AAAA,QACA,SAAA;AAAA,QACA,OAAA;AAAA;AAAA,QAEA,UAAA;AAAA,QACA,aAAA;AAAA,QACA,SAAA;AAAA,QACA,aAAA;AAAA;AAAA,QAEA,OAAA;AAAA,QACA,SAAA,KAAA;AAAA,QACA,cAAA,KAAA;AAAA,QACA,eAAAC,YAAAA,iBAAA;AAAA,UACA,wBAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,kCAAA;AACA,OAAA,WAAA,YAAA,EAAA,QAAA,cAAA;;AACA,mBAAA,WAAA,mBAAA,iBAAA,UAAA,CAAA,UAAA,KAAA,cAAA,KAAA;AAAA,MACA,CAAA;AACA,OAAA,YAAA,cAAA,SAAA,EAAA,QAAA,cAAA;;AACA,mBAAA,WAAA,mBAAA,iBAAA,UAAA,CAAA,UAAA,KAAA,cAAA,KAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IAEA,qCAAA;AACA,OAAA,WAAA,YAAA,EAAA,QAAA,cAAA;;AACA,mBAAA,WAAA,mBAAA,oBAAA,UAAA,CAAA,UAAA,KAAA,cAAA,KAAA;AAAA,MACA,CAAA;AACA,OAAA,YAAA,cAAA,SAAA,EAAA,QAAA,cAAA;;AACA,mBAAA,WAAA,mBAAA,oBAAA,UAAA,CAAA,UAAA,KAAA,cAAA,KAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/components/tooltip/tooltip.vue.js CHANGED Viewed

@@ -2,7 +2,6 @@ import { TOOLTIP_DIRECTIONS, TOOLTIP_STICKY_VALUES, TOOLTIP_KIND_MODIFIERS, TOOL
 import { POPOVER_APPEND_TO_VALUES } from "../popover/popover_constants.js";
 import { getUniqueString, flushPromises } from "../../common/utils.js";
 import { getPopperOptions, getAnchor, createTippy } from "../popover/tippy_utils.js";
-/* empty css             */
 import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
 const _sfc_main = {
   name: "DtTooltip",

package/dist/vue2/components/tooltip/tooltip.vue.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip.vue.js","sources":["../../../components/tooltip/tooltip.vue"],"sourcesContent":["<template>\n <div data-qa=\"dt-tooltip-container\">\n <!-- disabling as the below events are for capturing events from interactive\n elements within the span rather than on the span itself -->\n <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n <span\n v-if=\"!externalAnchor\"\n ref=\"anchor\"\n data-qa=\"dt-tooltip-anchor\"\n @focusin=\"onEnterAnchor\"\n @focusout=\"onLeaveAnchor\"\n @mouseenter=\"onEnterAnchor\"\n @mouseleave=\"onLeaveAnchor\"\n @keydown.esc=\"onLeaveAnchor\"\n >\n <!-- @slot Slot for the anchor element -->\n <slot\n name=\"anchor\"\n />\n </span>\n <div\n :id=\"id\"\n ref=\"content\"\n data-qa=\"dt-tooltip\"\n :class=\"[\n 'd-tooltip',\n {\n [ TOOLTIP_KIND_MODIFIERS.inverted ]: inverted,\n },\n contentClass,\n ]\"\n v-on=\"$listeners\"\n >\n <!-- In case when transitionend event doesn't work correct (for ex. tooltip component with custom trigger) -->\n <!-- after-leave event can be used instead of transitionend -->\n <!-- @slot Slot for the content, defaults to message prop -->\n <slot>\n {{ message }}\n </slot>\n </div>\n </div>\n</template>\n\n<script>\nimport {\n TOOLTIP_KIND_MODIFIERS,\n TOOLTIP_DIRECTIONS,\n TOOLTIP_STICKY_VALUES,\n TOOLTIP_DELAY_MS,\n} from './tooltip_constants.js';\nimport {\n POPOVER_APPEND_TO_VALUES,\n} from '../popover/popover_constants';\nimport { flushPromises, getUniqueString } from '@/common/utils';\nimport {\n createTippy,\n getAnchor,\n getPopperOptions,\n} from '@/components/popover/tippy_utils';\n\n/*\n A tooltip is a floating label that briefly explains an action, function, or an element.\n * Its content is exclusively text and shouldn't be vital information for users.\n * If richer media is desired, consider using a popover instead.\n * @see https://dialtone.dialpad.com/components/tooltip.html\n /\nexport default {\n name: 'DtTooltip',\n\n props: {\n /\n The id of the tooltip\n /\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /\n If the popover does not fit in the direction described by \"placement\",\n * it will attempt to change its direction to the \"fallbackPlacements\"\n * if defined, otherwise it will automatically position to a new location\n * as it sees best fit. See\n * <a\n * class=\"d-link\"\n * href=\"https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n * target=\"_blank\"\n * >\n * Popper.js docs\n * </a>\n * /\n fallbackPlacements: {\n type: Array,\n default: () => ['auto'],\n },\n\n /\n If true, applies inverted styles to the tooltip\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n Displaces the tooltip from its reference element\n * by the specified number of pixels. See\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n /\n offset: {\n type: Array,\n default: () => [0, 12],\n },\n\n /\n The direction the popover displays relative to the anchor. See\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n * @values top, top-start, top-end,\n * right, right-start, right-end,\n * left, left-start, left-end,\n * bottom, bottom-start, bottom-end,\n * auto, auto-start, auto-end\n /\n placement: {\n type: String,\n default: 'top',\n validator (placement) {\n return TOOLTIP_DIRECTIONS.includes(placement);\n },\n },\n\n /\n If the tooltip sticks to the anchor. This is usually not needed, but can be needed\n * if the reference element's position is animating, or to automatically update the popover\n * position in those cases the DOM layout changes the reference element's position.\n * `true` enables it, `reference` only checks the \"reference\" rect for changes and `popper` only\n * checks the \"popper\" rect for changes. See\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#sticky\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n * @values true, false, reference, popper\n /\n sticky: {\n type: [Boolean, String],\n default: true,\n validator: (sticky) => {\n return TOOLTIP_STICKY_VALUES.includes(sticky);\n },\n },\n\n /\n Sets the element to which the tooltip is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * This prop is not reactive, must be set on initial render.\n * @values 'body', 'parent', HTMLElement,\n /\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) \|\|\n (appendTo instanceof HTMLElement);\n },\n },\n\n /\n Additional css classes for the tooltip content 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 contentClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n A provided message for the tooltip content\n /\n message: {\n type: String,\n default: '',\n },\n\n /\n Controls whether hover/focus causes the tooltip to appear.\n * Cannot be combined with the show prop. show value will be ignored.\n * by default this is true, if you override with false, the tooltip will never show up.\n /\n enabled: {\n type: Boolean,\n default: true,\n },\n\n /\n Controls whether the tooltip is shown. Leaving this null will have the tooltip trigger on mouseover by default.\n * If you set this value, the default mouseover behavior will be disabled and you can control it as you need.\n * Supports .sync modifier\n * @values null, true, false\n /\n show: {\n type: Boolean,\n default: null,\n },\n\n /\n Whether the tooltip should have a transition effect (fade).\n /\n transition: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the tooltip will have a delay when being focused or moused over.\n * @values true, false\n /\n delay: {\n type: Boolean,\n default: true,\n },\n\n /\n Set a custom theme on the tooltip. See https://atomiks.github.io/tippyjs/v6/themes/\n /\n theme: {\n type: String,\n default: null,\n },\n\n /\n External anchor id to use in those cases the anchor can't be provided via the slot.\n * For instance, using the combobox's input as the anchor for the popover.\n /\n externalAnchor: {\n type: String,\n default: null,\n },\n },\n\n emits: [\n /\n Emitted when tooltip is shown or hidden\n \n @event shown\n * @type {Boolean}\n /\n 'shown',\n\n /\n Sync show value\n \n @event update:show\n */\n 'update:show',\n ],\n\n data () {\n return {\n TOOLTIP_KIND_MODIFIERS,\n tip: null,\n\n inTimer: null,\n\n // Internal state for whether the tooltip is shown. Changing the prop\n // will update this.\n internalShow: false,\n\n // this is where the placement currently is, this can be different than\n // the placement prop when there is not enough available room for the tip\n // to display and it uses a fallback placement.\n currentPlacement: this.placement,\n };\n },\n\n computed: {\n // eslint-disable-next-line complexity\n tippyProps () {\n return {\n offset: this.offset,\n delay: this.delay ? TOOLTIP_DELAY_MS : false,\n placement: this.placement,\n sticky: this.sticky,\n theme: this.inverted ? 'inverted' : this.theme,\n animation: this.transition ? 'fade' : false,\n // onShown only triggers when transition is truthy\n onShown: (tooltipInstance) => this.onShow(tooltipInstance, 'onShown'),\n // onShown will always be called, but it will be called before the animation is complete\n onShow: (tooltipInstance) => this.onShow(tooltipInstance, 'onShow'),\n onHidden: this.onHide,\n\n popperOptions: getPopperOptions({\n fallbackPlacements: this.fallbackPlacements,\n hasHideModifierEnabled: true,\n onChangePlacement: this.onChangePlacement,\n }),\n };\n },\n\n anchor () {\n return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : getAnchor(this.$refs.anchor);\n },\n },\n\n watch: {\n\n tippyProps: {\n handler: 'setProps',\n deep: true,\n },\n\n show: {\n handler: function (show) {\n if (show !== null && this.enabled) {\n this.internalShow = show;\n }\n },\n\n immediate: true,\n },\n\n internalShow (value) {\n if (value) {\n this.setProps();\n this.tip.show();\n } else {\n this.tip.hide();\n }\n },\n\n sticky (sticky) {\n this.tip.setProps({\n sticky,\n });\n },\n },\n\n async mounted () {\n if (!this.enabled && this.show != null) {\n console.warn('Tooltip: You cannot use both the enabled and show props at the same time.');\n console.warn('The show prop will be ignored.');\n }\n\n this.tip = createTippy(this.anchor, this.initOptions());\n if (this.externalAnchor) {\n await flushPromises();\n this.addExternalAnchorEventListeners();\n }\n },\n\n beforeDestroy () {\n this.externalAnchor && this.removeExternalAnchorEventListeners();\n\n if (this.anchor?._tippy) {\n this.tip?.destroy();\n }\n },\n\n methods: {\n calculateAnchorZindex () {\n // if a modal is currently active render at modal-element z-index, otherwise at tooltip z-index\n if (this.$el.getRootNode()\n .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"]') \|\|\n // Special case because we don't have any dialtone drawer component yet. Render at 651 when\n // anchor of popover is within a drawer.\n this.$el.closest('.d-zi-drawer')) {\n return 651;\n } else {\n return 400;\n }\n },\n\n hasVisibleFocus () {\n return this.anchor.matches(':focus-visible');\n },\n\n onEnterAnchor (e) {\n if (!this.enabled) return;\n if (this.delay && this.inTimer === null) {\n this.inTimer = setTimeout(() => {\n this.triggerShow(e);\n }, TOOLTIP_DELAY_MS);\n } else {\n this.triggerShow(e);\n }\n },\n\n triggerShow (e) {\n if (e.type === 'focusin') {\n // only show tooltips on visible focus when triggered via focus.\n // when the user is using the mouse they only want tooltips to display\n // on mouseover.\n //\n // Example: anchor of a popover is a button with tooltip.\n // closing it with the mouse would trigger the tooltip to display as\n // the anchor is focused on close. Not what we want.\n if (this.show === null && this.hasVisibleFocus()) {\n this.internalShow = true;\n }\n } else {\n if (this.show === null) this.internalShow = true;\n }\n },\n\n onLeaveAnchor (e) {\n if (e.type === 'keydown' && e.code !== 'Escape') return;\n\n clearTimeout(this.inTimer);\n this.inTimer = null;\n this.triggerHide();\n },\n\n triggerHide () {\n if (this.show === null) this.internalShow = false;\n },\n\n onChangePlacement (placement) {\n this.currentPlacement = placement;\n },\n\n onHide () {\n this.tip?.unmount();\n this.$emit('shown', false);\n if (this.show !== null) {\n this.$emit('update:show', false);\n }\n },\n\n onShow (tooltipInstance, callingMethod) {\n if (!this.tooltipHasContent(tooltipInstance)) {\n return false;\n }\n if (this.transition && callingMethod === 'onShow') {\n return;\n }\n this.$emit('shown', true);\n if (this.show !== null) {\n this.$emit('update:show', true);\n }\n },\n\n setProps () {\n if (this.tip && this.tip.setProps) {\n this.tip.setProps({\n ...this.tippyProps,\n // these need to be set here rather than in tippyProps because they are non-reactive\n appendTo: this.appendTo === 'body' ? this.anchor?.getRootNode()?.querySelector('body') : this.appendTo,\n zIndex: this.calculateAnchorZindex(),\n });\n }\n },\n\n onMount () {\n this.setProps();\n },\n\n tooltipHasContent (tooltipInstance) {\n // don't show tooltip when no content\n if (tooltipInstance.props.content.textContent.trim().length === 0) {\n return false;\n }\n return true;\n },\n\n // set initial options here. If any of the options need to dynamically change, they should be put in\n // tippyProps instead.\n initOptions () {\n const template = this.$refs.content;\n return {\n content: template,\n arrow: '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"7\"><path d=\"M 14.5,7 8,0 1.5,7 Z\"/></svg>',\n // transition duration - same as our custom fade delay in dialtone-globals.less\n duration: 180,\n interactive: false,\n trigger: 'manual',\n hideOnClick: false,\n // disable tooltip from displaying on touch devices\n touch: false,\n onMount: this.onMount,\n showOnCreate: this.internalShow,\n popperOptions: getPopperOptions({\n hasHideModifierEnabled: true,\n }),\n };\n },\n\n addExternalAnchorEventListeners () {\n ['focusin', 'mouseenter'].forEach(listener => {\n this.anchor?.addEventListener(listener, (event) => this.onEnterAnchor(event));\n });\n ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n this.anchor?.addEventListener(listener, (event) => this.onLeaveAnchor(event));\n });\n },\n\n removeExternalAnchorEventListeners () {\n ['focusin', 'mouseenter'].forEach(listener => {\n this.anchor?.removeEventListener(listener, (event) => this.onEnterAnchor(event));\n });\n ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n this.anchor?.removeEventListener(listener, (event) => this.onLeaveAnchor(event));\n });\n },\n },\n};\n</script>\n\n<style lang=\"less\">\n@import 'tippy.js/dist/svg-arrow.css';\n\n.tippy-box[data-reference-hidden] {\n visibility: hidden;\n pointer-events: none;\n}\n\n.tippy-box > .tippy-svg-arrow {\n fill: var(--dt-color-surface-contrast);\n}\n\n.tippy-box[data-theme~='inverted'] > .tippy-svg-arrow {\n fill: var(--dt-color-surface-moderate);\n}\n\n.tippy-box[data-animation='fade'][data-state='hidden'] {\n opacity: 0;\n}\n</style>\n"],"names":[],"mappings":"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"}
1	+ {"version":3,"file":"tooltip.vue.js","sources":["../../../components/tooltip/tooltip.vue"],"sourcesContent":["<template>\n <div data-qa=\"dt-tooltip-container\">\n <!-- disabling as the below events are for capturing events from interactive\n elements within the span rather than on the span itself -->\n <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n <span\n v-if=\"!externalAnchor\"\n ref=\"anchor\"\n data-qa=\"dt-tooltip-anchor\"\n @focusin=\"onEnterAnchor\"\n @focusout=\"onLeaveAnchor\"\n @mouseenter=\"onEnterAnchor\"\n @mouseleave=\"onLeaveAnchor\"\n @keydown.esc=\"onLeaveAnchor\"\n >\n <!-- @slot Slot for the anchor element -->\n <slot\n name=\"anchor\"\n />\n </span>\n <div\n :id=\"id\"\n ref=\"content\"\n data-qa=\"dt-tooltip\"\n :class=\"[\n 'd-tooltip',\n {\n [ TOOLTIP_KIND_MODIFIERS.inverted ]: inverted,\n },\n contentClass,\n ]\"\n v-on=\"$listeners\"\n >\n <!-- In case when transitionend event doesn't work correct (for ex. tooltip component with custom trigger) -->\n <!-- after-leave event can be used instead of transitionend -->\n <!-- @slot Slot for the content, defaults to message prop -->\n <slot>\n {{ message }}\n </slot>\n </div>\n </div>\n</template>\n\n<script>\nimport {\n TOOLTIP_KIND_MODIFIERS,\n TOOLTIP_DIRECTIONS,\n TOOLTIP_STICKY_VALUES,\n TOOLTIP_DELAY_MS,\n} from './tooltip_constants.js';\nimport {\n POPOVER_APPEND_TO_VALUES,\n} from '../popover/popover_constants';\nimport { flushPromises, getUniqueString } from '@/common/utils';\nimport {\n createTippy,\n getAnchor,\n getPopperOptions,\n} from '@/components/popover/tippy_utils';\n\n/*\n A tooltip is a floating label that briefly explains an action, function, or an element.\n * Its content is exclusively text and shouldn't be vital information for users.\n * If richer media is desired, consider using a popover instead.\n * @see https://dialtone.dialpad.com/components/tooltip.html\n /\nexport default {\n name: 'DtTooltip',\n\n props: {\n /\n The id of the tooltip\n /\n id: {\n type: String,\n default () { return getUniqueString(); },\n },\n\n /\n If the popover does not fit in the direction described by \"placement\",\n * it will attempt to change its direction to the \"fallbackPlacements\"\n * if defined, otherwise it will automatically position to a new location\n * as it sees best fit. See\n * <a\n * class=\"d-link\"\n * href=\"https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n * target=\"_blank\"\n * >\n * Popper.js docs\n * </a>\n * /\n fallbackPlacements: {\n type: Array,\n default: () => ['auto'],\n },\n\n /\n If true, applies inverted styles to the tooltip\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n Displaces the tooltip from its reference element\n * by the specified number of pixels. See\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n /\n offset: {\n type: Array,\n default: () => [0, 12],\n },\n\n /\n The direction the popover displays relative to the anchor. See\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n * @values top, top-start, top-end,\n * right, right-start, right-end,\n * left, left-start, left-end,\n * bottom, bottom-start, bottom-end,\n * auto, auto-start, auto-end\n /\n placement: {\n type: String,\n default: 'top',\n validator (placement) {\n return TOOLTIP_DIRECTIONS.includes(placement);\n },\n },\n\n /\n If the tooltip sticks to the anchor. This is usually not needed, but can be needed\n * if the reference element's position is animating, or to automatically update the popover\n * position in those cases the DOM layout changes the reference element's position.\n * `true` enables it, `reference` only checks the \"reference\" rect for changes and `popper` only\n * checks the \"popper\" rect for changes. See\n * <a\n * class=\"d-link\"\n * href=\"https://atomiks.github.io/tippyjs/v6/all-props/#sticky\"\n * target=\"_blank\"\n * >\n * Tippy.js docs\n * </a>\n * @values true, false, reference, popper\n /\n sticky: {\n type: [Boolean, String],\n default: true,\n validator: (sticky) => {\n return TOOLTIP_STICKY_VALUES.includes(sticky);\n },\n },\n\n /\n Sets the element to which the tooltip is going to append to.\n * 'body' will append to the nearest body (supports shadow DOM).\n * This prop is not reactive, must be set on initial render.\n * @values 'body', 'parent', HTMLElement,\n /\n appendTo: {\n type: [HTMLElement, String],\n default: 'body',\n validator: appendTo => {\n return POPOVER_APPEND_TO_VALUES.includes(appendTo) \|\|\n (appendTo instanceof HTMLElement);\n },\n },\n\n /\n Additional css classes for the tooltip content 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 contentClass: {\n type: [String, Object, Array],\n default: '',\n },\n\n /\n A provided message for the tooltip content\n /\n message: {\n type: String,\n default: '',\n },\n\n /\n Controls whether hover/focus causes the tooltip to appear.\n * Cannot be combined with the show prop. show value will be ignored.\n * by default this is true, if you override with false, the tooltip will never show up.\n /\n enabled: {\n type: Boolean,\n default: true,\n },\n\n /\n Controls whether the tooltip is shown. Leaving this null will have the tooltip trigger on mouseover by default.\n * If you set this value, the default mouseover behavior will be disabled and you can control it as you need.\n * Supports .sync modifier\n * @values null, true, false\n /\n show: {\n type: Boolean,\n default: null,\n },\n\n /\n Whether the tooltip should have a transition effect (fade).\n /\n transition: {\n type: Boolean,\n default: true,\n },\n\n /\n Whether the tooltip will have a delay when being focused or moused over.\n * @values true, false\n /\n delay: {\n type: Boolean,\n default: true,\n },\n\n /\n Set a custom theme on the tooltip. See https://atomiks.github.io/tippyjs/v6/themes/\n /\n theme: {\n type: String,\n default: null,\n },\n\n /\n External anchor id to use in those cases the anchor can't be provided via the slot.\n * For instance, using the combobox's input as the anchor for the popover.\n /\n externalAnchor: {\n type: String,\n default: null,\n },\n },\n\n emits: [\n /\n Emitted when tooltip is shown or hidden\n \n @event shown\n * @type {Boolean}\n /\n 'shown',\n\n /\n Sync show value\n \n @event update:show\n */\n 'update:show',\n ],\n\n data () {\n return {\n TOOLTIP_KIND_MODIFIERS,\n tip: null,\n\n inTimer: null,\n\n // Internal state for whether the tooltip is shown. Changing the prop\n // will update this.\n internalShow: false,\n\n // this is where the placement currently is, this can be different than\n // the placement prop when there is not enough available room for the tip\n // to display and it uses a fallback placement.\n currentPlacement: this.placement,\n };\n },\n\n computed: {\n // eslint-disable-next-line complexity\n tippyProps () {\n return {\n offset: this.offset,\n delay: this.delay ? TOOLTIP_DELAY_MS : false,\n placement: this.placement,\n sticky: this.sticky,\n theme: this.inverted ? 'inverted' : this.theme,\n animation: this.transition ? 'fade' : false,\n // onShown only triggers when transition is truthy\n onShown: (tooltipInstance) => this.onShow(tooltipInstance, 'onShown'),\n // onShown will always be called, but it will be called before the animation is complete\n onShow: (tooltipInstance) => this.onShow(tooltipInstance, 'onShow'),\n onHidden: this.onHide,\n\n popperOptions: getPopperOptions({\n fallbackPlacements: this.fallbackPlacements,\n hasHideModifierEnabled: true,\n onChangePlacement: this.onChangePlacement,\n }),\n };\n },\n\n anchor () {\n return this.externalAnchor ? document.body.querySelector(this.externalAnchor) : getAnchor(this.$refs.anchor);\n },\n },\n\n watch: {\n\n tippyProps: {\n handler: 'setProps',\n deep: true,\n },\n\n show: {\n handler: function (show) {\n if (show !== null && this.enabled) {\n this.internalShow = show;\n }\n },\n\n immediate: true,\n },\n\n internalShow (value) {\n if (value) {\n this.setProps();\n this.tip.show();\n } else {\n this.tip.hide();\n }\n },\n\n sticky (sticky) {\n this.tip.setProps({\n sticky,\n });\n },\n },\n\n async mounted () {\n if (!this.enabled && this.show != null) {\n console.warn('Tooltip: You cannot use both the enabled and show props at the same time.');\n console.warn('The show prop will be ignored.');\n }\n\n this.tip = createTippy(this.anchor, this.initOptions());\n if (this.externalAnchor) {\n await flushPromises();\n this.addExternalAnchorEventListeners();\n }\n },\n\n beforeDestroy () {\n this.externalAnchor && this.removeExternalAnchorEventListeners();\n\n if (this.anchor?._tippy) {\n this.tip?.destroy();\n }\n },\n\n methods: {\n calculateAnchorZindex () {\n // if a modal is currently active render at modal-element z-index, otherwise at tooltip z-index\n if (this.$el.getRootNode()\n .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"]') \|\|\n // Special case because we don't have any dialtone drawer component yet. Render at 651 when\n // anchor of popover is within a drawer.\n this.$el.closest('.d-zi-drawer')) {\n return 651;\n } else {\n return 400;\n }\n },\n\n hasVisibleFocus () {\n return this.anchor.matches(':focus-visible');\n },\n\n onEnterAnchor (e) {\n if (!this.enabled) return;\n if (this.delay && this.inTimer === null) {\n this.inTimer = setTimeout(() => {\n this.triggerShow(e);\n }, TOOLTIP_DELAY_MS);\n } else {\n this.triggerShow(e);\n }\n },\n\n triggerShow (e) {\n if (e.type === 'focusin') {\n // only show tooltips on visible focus when triggered via focus.\n // when the user is using the mouse they only want tooltips to display\n // on mouseover.\n //\n // Example: anchor of a popover is a button with tooltip.\n // closing it with the mouse would trigger the tooltip to display as\n // the anchor is focused on close. Not what we want.\n if (this.show === null && this.hasVisibleFocus()) {\n this.internalShow = true;\n }\n } else {\n if (this.show === null) this.internalShow = true;\n }\n },\n\n onLeaveAnchor (e) {\n if (e.type === 'keydown' && e.code !== 'Escape') return;\n\n clearTimeout(this.inTimer);\n this.inTimer = null;\n this.triggerHide();\n },\n\n triggerHide () {\n if (this.show === null) this.internalShow = false;\n },\n\n onChangePlacement (placement) {\n this.currentPlacement = placement;\n },\n\n onHide () {\n this.tip?.unmount();\n this.$emit('shown', false);\n if (this.show !== null) {\n this.$emit('update:show', false);\n }\n },\n\n onShow (tooltipInstance, callingMethod) {\n if (!this.tooltipHasContent(tooltipInstance)) {\n return false;\n }\n if (this.transition && callingMethod === 'onShow') {\n return;\n }\n this.$emit('shown', true);\n if (this.show !== null) {\n this.$emit('update:show', true);\n }\n },\n\n setProps () {\n if (this.tip && this.tip.setProps) {\n this.tip.setProps({\n ...this.tippyProps,\n // these need to be set here rather than in tippyProps because they are non-reactive\n appendTo: this.appendTo === 'body' ? this.anchor?.getRootNode()?.querySelector('body') : this.appendTo,\n zIndex: this.calculateAnchorZindex(),\n });\n }\n },\n\n onMount () {\n this.setProps();\n },\n\n tooltipHasContent (tooltipInstance) {\n // don't show tooltip when no content\n if (tooltipInstance.props.content.textContent.trim().length === 0) {\n return false;\n }\n return true;\n },\n\n // set initial options here. If any of the options need to dynamically change, they should be put in\n // tippyProps instead.\n initOptions () {\n const template = this.$refs.content;\n return {\n content: template,\n arrow: '<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"7\"><path d=\"M 14.5,7 8,0 1.5,7 Z\"/></svg>',\n // transition duration - same as our custom fade delay in dialtone-globals.less\n duration: 180,\n interactive: false,\n trigger: 'manual',\n hideOnClick: false,\n // disable tooltip from displaying on touch devices\n touch: false,\n onMount: this.onMount,\n showOnCreate: this.internalShow,\n popperOptions: getPopperOptions({\n hasHideModifierEnabled: true,\n }),\n };\n },\n\n addExternalAnchorEventListeners () {\n ['focusin', 'mouseenter'].forEach(listener => {\n this.anchor?.addEventListener(listener, (event) => this.onEnterAnchor(event));\n });\n ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n this.anchor?.addEventListener(listener, (event) => this.onLeaveAnchor(event));\n });\n },\n\n removeExternalAnchorEventListeners () {\n ['focusin', 'mouseenter'].forEach(listener => {\n this.anchor?.removeEventListener(listener, (event) => this.onEnterAnchor(event));\n });\n ['focusout', 'mouseleave', 'keydown'].forEach(listener => {\n this.anchor?.removeEventListener(listener, (event) => this.onLeaveAnchor(event));\n });\n },\n },\n};\n</script>\n"],"names":[],"mappings":";;;;;AAkEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAeA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA,GAAA,EAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiBA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,WAAA;AACA,eAAA,mBAAA,SAAA,SAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAiBA,QAAA;AAAA,MACA,MAAA,CAAA,SAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,WAAA;AACA,eAAA,sBAAA,SAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,UAAA;AAAA,MACA,MAAA,CAAA,aAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,cAAA;AACA,eAAA,yBAAA,SAAA,QAAA,KACA,oBAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA;AAAA,MACA,KAAA;AAAA,MAEA,SAAA;AAAA;AAAA;AAAA,MAIA,cAAA;AAAA;AAAA;AAAA;AAAA,MAKA,kBAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA,IAEA,aAAA;AACA,aAAA;AAAA,QACA,QAAA,KAAA;AAAA,QACA,OAAA,KAAA,QAAA,mBAAA;AAAA,QACA,WAAA,KAAA;AAAA,QACA,QAAA,KAAA;AAAA,QACA,OAAA,KAAA,WAAA,aAAA,KAAA;AAAA,QACA,WAAA,KAAA,aAAA,SAAA;AAAA;AAAA,QAEA,SAAA,CAAA,oBAAA,KAAA,OAAA,iBAAA,SAAA;AAAA;AAAA,QAEA,QAAA,CAAA,oBAAA,KAAA,OAAA,iBAAA,QAAA;AAAA,QACA,UAAA,KAAA;AAAA,QAEA,eAAA,iBAAA;AAAA,UACA,oBAAA,KAAA;AAAA,UACA,wBAAA;AAAA,UACA,mBAAA,KAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,SAAA;AACA,aAAA,KAAA,iBAAA,SAAA,KAAA,cAAA,KAAA,cAAA,IAAA,UAAA,KAAA,MAAA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IAEA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,IACA;AAAA,IAEA,MAAA;AAAA,MACA,SAAA,SAAA,MAAA;AACA,YAAA,SAAA,QAAA,KAAA,SAAA;AACA,eAAA,eAAA;AAAA,QACA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,IAEA,aAAA,OAAA;AACA,UAAA,OAAA;AACA,aAAA,SAAA;AACA,aAAA,IAAA;MACA,OAAA;AACA,aAAA,IAAA;MACA;AAAA,IACA;AAAA,IAEA,OAAA,QAAA;AACA,WAAA,IAAA,SAAA;AAAA,QACA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,MAAA,UAAA;AACA,QAAA,CAAA,KAAA,WAAA,KAAA,QAAA,MAAA;AACA,cAAA,KAAA,2EAAA;AACA,cAAA,KAAA,gCAAA;AAAA,IACA;AAEA,SAAA,MAAA,YAAA,KAAA,QAAA,KAAA,YAAA,CAAA;AACA,QAAA,KAAA,gBAAA;AACA,YAAA,cAAA;AACA,WAAA,gCAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,gBAAA;;AACA,SAAA,kBAAA,KAAA;AAEA,SAAA,UAAA,WAAA,mBAAA,QAAA;AACA,iBAAA,QAAA,mBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,wBAAA;AAEA,UAAA,KAAA,IAAA,YAAA,EACA,cAAA,2EAAA;AAAA;AAAA,MAGA,KAAA,IAAA,QAAA,cAAA,GAAA;AACA,eAAA;AAAA,MACA,OAAA;AACA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,OAAA,QAAA,gBAAA;AAAA,IACA;AAAA,IAEA,cAAA,GAAA;AACA,UAAA,CAAA,KAAA,QAAA;AACA,UAAA,KAAA,SAAA,KAAA,YAAA,MAAA;AACA,aAAA,UAAA,WAAA,MAAA;AACA,eAAA,YAAA,CAAA;AAAA,QACA,GAAA,gBAAA;AAAA,MACA,OAAA;AACA,aAAA,YAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,YAAA,GAAA;AACA,UAAA,EAAA,SAAA,WAAA;AAQA,YAAA,KAAA,SAAA,QAAA,KAAA,gBAAA,GAAA;AACA,eAAA,eAAA;AAAA,QACA;AAAA,MACA,OAAA;AACA,YAAA,KAAA,SAAA,KAAA,MAAA,eAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,cAAA,GAAA;AACA,UAAA,EAAA,SAAA,aAAA,EAAA,SAAA,SAAA;AAEA,mBAAA,KAAA,OAAA;AACA,WAAA,UAAA;AACA,WAAA,YAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,UAAA,KAAA,SAAA,KAAA,MAAA,eAAA;AAAA,IACA;AAAA,IAEA,kBAAA,WAAA;AACA,WAAA,mBAAA;AAAA,IACA;AAAA,IAEA,SAAA;;AACA,iBAAA,QAAA,mBAAA;AACA,WAAA,MAAA,SAAA,KAAA;AACA,UAAA,KAAA,SAAA,MAAA;AACA,aAAA,MAAA,eAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,OAAA,iBAAA,eAAA;AACA,UAAA,CAAA,KAAA,kBAAA,eAAA,GAAA;AACA,eAAA;AAAA,MACA;AACA,UAAA,KAAA,cAAA,kBAAA,UAAA;AACA;AAAA,MACA;AACA,WAAA,MAAA,SAAA,IAAA;AACA,UAAA,KAAA,SAAA,MAAA;AACA,aAAA,MAAA,eAAA,IAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,WAAA;;AACA,UAAA,KAAA,OAAA,KAAA,IAAA,UAAA;AACA,aAAA,IAAA,SAAA;AAAA,UACA,GAAA,KAAA;AAAA;AAAA,UAEA,UAAA,KAAA,aAAA,UAAA,gBAAA,WAAA,mBAAA,kBAAA,mBAAA,cAAA,UAAA,KAAA;AAAA,UACA,QAAA,KAAA,sBAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,UAAA;AACA,WAAA,SAAA;AAAA,IACA;AAAA,IAEA,kBAAA,iBAAA;AAEA,UAAA,gBAAA,MAAA,QAAA,YAAA,KAAA,EAAA,WAAA,GAAA;AACA,eAAA;AAAA,MACA;AACA,aAAA;AAAA,IACA;AAAA;AAAA;AAAA,IAIA,cAAA;AACA,YAAA,WAAA,KAAA,MAAA;AACA,aAAA;AAAA,QACA,SAAA;AAAA,QACA,OAAA;AAAA;AAAA,QAEA,UAAA;AAAA,QACA,aAAA;AAAA,QACA,SAAA;AAAA,QACA,aAAA;AAAA;AAAA,QAEA,OAAA;AAAA,QACA,SAAA,KAAA;AAAA,QACA,cAAA,KAAA;AAAA,QACA,eAAA,iBAAA;AAAA,UACA,wBAAA;AAAA,QACA,CAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,kCAAA;AACA,OAAA,WAAA,YAAA,EAAA,QAAA,cAAA;;AACA,mBAAA,WAAA,mBAAA,iBAAA,UAAA,CAAA,UAAA,KAAA,cAAA,KAAA;AAAA,MACA,CAAA;AACA,OAAA,YAAA,cAAA,SAAA,EAAA,QAAA,cAAA;;AACA,mBAAA,WAAA,mBAAA,iBAAA,UAAA,CAAA,UAAA,KAAA,cAAA,KAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,IAEA,qCAAA;AACA,OAAA,WAAA,YAAA,EAAA,QAAA,cAAA;;AACA,mBAAA,WAAA,mBAAA,oBAAA,UAAA,CAAA,UAAA,KAAA,cAAA,KAAA;AAAA,MACA,CAAA;AACA,OAAA,YAAA,cAAA,SAAA,EAAA,QAAA,cAAA;;AACA,mBAAA,WAAA,mBAAA,oBAAA,UAAA,CAAA,UAAA,KAAA,cAAA,KAAA;AAAA,MACA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/recipes/conversation_view/editor/editor.vue.cjs CHANGED Viewed

@@ -234,13 +234,6 @@ const _sfc_main = {
         setLinkTitle: "Add a link",
         setLinkInputAriaLabel: "Input field to add link"
       })
-    },
-    /**
-     * Use default paste handler.
-     */
-    useDefaultPasteHandler: {
-      type: Boolean,
-      default: false
     }
   },
   emits: [
@@ -497,7 +490,7 @@ var _sfc_render = function render() {
     }, expression: "linkInput" } })];
   }, proxy: true }, { key: "footerContent", fn: function() {
     return [_c("div", { staticClass: "d-ml8 d-mr12" }, [_c("dt-button", { staticClass: "d-mx2", attrs: { "aria-label": _vm.removeLinkButton.ariaLabel, "importance": "clear", "kind": "muted", "size": "sm", "data-qa": "dt-editor-remove-link-btn" }, on: { "click": _vm.removeLink } }, [_vm._v(" " + _vm._s(_vm.removeLinkButton.label) + " ")]), _c("dt-button", { staticClass: "d-mx2", attrs: { "aria-label": _vm.cancelSetLinkButton.ariaLabel, "importance": "clear", "kind": "muted", "size": "sm", "data-qa": "dt-editor-set-link-cancel-btn" }, on: { "click": _vm.closeLinkInput } }, [_vm._v(" " + _vm._s(_vm.cancelSetLinkButton.label) + " ")]), _c("dt-button", { staticClass: "d-mx2", attrs: { "size": "sm", "aria-label": _vm.confirmSetLinkButton.ariaLabel, "data-qa": "dt-editor-set-link-confirm-btn" }, on: { "click": _vm.setLink } }, [_vm._v(" " + _vm._s(_vm.confirmSetLinkButton.label) + " ")])], 1)];
-  }, proxy: true }], null, false, 1583743996) })], 1) : _vm._e()], 2), _c("div", { staticClass: "d-of-auto d-mx16 d-mt8 d-mb16 d-c-text", style: { "max-height": _vm.maxHeight } }, [_c("dt-rich-text-editor", _vm._b({ ref: "richTextEditor", attrs: { "data-qa": "dt-rich-text-editor", "editable": _vm.editable, "input-aria-label": _vm.inputAriaLabel, "input-class": `d-ml16 d-ol-none d-my6 ${_vm.inputClass}`, "output-format": _vm.htmlOutputFormat, "auto-focus": _vm.autoFocus, "placeholder": _vm.placeholder, "use-default-paste-handler": _vm.useDefaultPasteHandler, "allow-line-breaks": true, "link": true }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "input": function($event) {
+  }, proxy: true }], null, false, 1583743996) })], 1) : _vm._e()], 2), _c("div", { staticClass: "d-of-auto d-mx16 d-mt8 d-mb16 d-c-text", style: { "max-height": _vm.maxHeight } }, [_c("dt-rich-text-editor", _vm._b({ ref: "richTextEditor", attrs: { "data-qa": "dt-rich-text-editor", "editable": _vm.editable, "input-aria-label": _vm.inputAriaLabel, "input-class": `d-ml16 d-ol-none d-my6 ${_vm.inputClass}`, "output-format": _vm.htmlOutputFormat, "auto-focus": _vm.autoFocus, "placeholder": _vm.placeholder, "allow-line-breaks": true, "link": true }, on: { "focus": _vm.onFocus, "blur": _vm.onBlur, "input": function($event) {
     return _vm.onInput($event);
   } }, model: { value: _vm.internalInputValue, callback: function($$v) {
     _vm.internalInputValue = $$v;

package/dist/vue2/recipes/conversation_view/editor/editor.vue.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"editor.vue.cjs","sources":["../../../../recipes/conversation_view/editor/editor.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n <div\n data-qa=\"dt-editor\"\n role=\"presentation\"\n class=\"d-d-flex d-fd-column\"\n @click=\"$refs.richTextEditor.focusEditor()\"\n >\n <!-- Section for the top UI -->\n <dt-stack\n direction=\"row\"\n gap=\"450\"\n class=\"d-p8 dt-editor--top-bar-background\"\n >\n <dt-stack\n v-for=\"buttonGroup in buttonGroups\"\n :key=\"buttonGroup.key\"\n direction=\"row\"\n gap=\"300\"\n >\n <dt-tooltip\n v-for=\"button in buttonGroup.buttonGroup\"\n :key=\"`${buttonGroup.key}-${JSON.stringify(button.selector)}`\"\n :message=\"button.tooltipMessage\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n :data-qa=\"button.dataQA\"\n importance=\"clear\"\n kind=\"muted\"\n :active=\"$refs.richTextEditor?.editor?.isActive(button.selector)\"\n size=\"xs\"\n :aria-label=\"button.tooltipMessage\"\n @click=\"button.onClick()\"\n >\n <template #icon>\n <component\n :is=\"button.icon\"\n size=\"200\"\n />\n </template>\n <span v-if=\"button.label\">{{ button.label }}</span>\n </dt-button>\n </template>\n </dt-tooltip>\n <div class=\"dt-editor--button-group-divider\" />\n </dt-stack>\n <dt-stack\n v-if=\"linkButton.showBtn\"\n direction=\"row\"\n gap=\"300\"\n >\n <dt-popover\n :open.sync=\"showLinkInput\"\n placement=\"bottom-start\"\n :visually-hidden-close=\"true\"\n :visually-hidden-close-label=\"'Close link input popover'\"\n data-qa=\"dt-editor-link-input-popover\"\n :show-close-button=\"false\"\n @click=\"onInputFocus\"\n @click.native.stop=\"onInputFocus\"\n @opened=\"updateInput\"\n >\n <template #anchor>\n <dt-tooltip\n :key=\"linkButton.key\"\n :message=\"linkButton.tooltipMessage\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n :data-qa=\"linkButton.dataQA\"\n importance=\"clear\"\n kind=\"muted\"\n class=\"d-ol-none\"\n :active=\"$refs.richTextEditor?.editor?.isActive(linkButton.selector)\"\n size=\"xs\"\n :aria-label=\"linkButton.tooltipMessage\"\n @click=\"linkButton.onClick()\"\n >\n <template #icon>\n <component\n :is=\"linkButton.icon\"\n size=\"200\"\n class=\"d-fw-bold\"\n />\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </template>\n\n <template #content>\n <span\n v-if=\"showAddLink.setLinkTitle.length > 0\"\n >\n {{ showAddLink.setLinkTitle }}\n </span>\n <dt-input\n v-model=\"linkInput\"\n :input-aria-label=\"showAddLink.setLinkInputAriaLabel\"\n data-qa=\"dt-editor-link-input\"\n :placeholder=\"setLinkPlaceholder\"\n input-wrapper-class=\"d-bgc-secondary d-mt6 d-bar5 d-ba d-baw1 d-bc-default d-py2 d-ol-none\"\n @click=\"onInputFocus\"\n @click.native.stop=\"onInputFocus\"\n @focus=\"onInputFocus\"\n @keydown.enter=\"setLink\"\n />\n </template>\n <template #footerContent>\n <div class=\"d-ml8 d-mr12\">\n <dt-button\n class=\"d-mx2\"\n :aria-label=\"removeLinkButton.ariaLabel\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"sm\"\n data-qa=\"dt-editor-remove-link-btn\"\n @click=\"removeLink\"\n >\n {{ removeLinkButton.label }}\n </dt-button>\n <dt-button\n class=\"d-mx2\"\n :aria-label=\"cancelSetLinkButton.ariaLabel\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"sm\"\n data-qa=\"dt-editor-set-link-cancel-btn\"\n @click=\"closeLinkInput\"\n >\n {{ cancelSetLinkButton.label }}\n </dt-button>\n <dt-button\n class=\"d-mx2\"\n size=\"sm\"\n :aria-label=\"confirmSetLinkButton.ariaLabel\"\n data-qa=\"dt-editor-set-link-confirm-btn\"\n @click=\"setLink\"\n >\n {{ confirmSetLinkButton.label }}\n </dt-button>\n </div>\n </template>\n </dt-popover>\n </dt-stack>\n </dt-stack>\n\n <!-- Some wrapper to restrict the height and show the scrollbar -->\n <div\n class=\"d-of-auto d-mx16 d-mt8 d-mb16 d-c-text\"\n :style=\"{ 'max-height': maxHeight }\"\n >\n <dt-rich-text-editor\n ref=\"richTextEditor\"\n v-model=\"internalInputValue\"\n data-qa=\"dt-rich-text-editor\"\n :editable=\"editable\"\n :input-aria-label=\"inputAriaLabel\"\n :input-class=\"`d-ml16 d-ol-none d-my6 ${inputClass}`\"\n :output-format=\"htmlOutputFormat\"\n :auto-focus=\"autoFocus\"\n :placeholder=\"placeholder\"\n :use-default-paste-handler=\"useDefaultPasteHandler\"\n :allow-line-breaks=\"true\"\n :link=\"true\"\n v-bind=\"$attrs\"\n @focus=\"onFocus\"\n @blur=\"onBlur\"\n @input=\"onInput($event)\"\n />\n </div>\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines /\nimport {\n DtRichTextEditor,\n RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport {\n EDITOR_SUPPORTED_LINK_PROTOCOLS,\n EDITOR_DEFAULT_LINK_PREFIX,\n} from './editor_constants.js';\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtStack } from '@/components/stack';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\nimport {\n DtIconAlignCenter,\n DtIconAlignJustify,\n DtIconAlignLeft,\n DtIconAlignRight,\n DtIconBold,\n DtIconCodeBlock,\n DtIconItalic,\n DtIconLightningBolt,\n DtIconLink2,\n DtIconListBullet,\n DtIconListOrdered,\n DtIconQuote,\n DtIconStrikethrough,\n DtIconUnderline,\n} from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'DtRecipeEditor',\n\n components: {\n DtRichTextEditor,\n DtButton,\n DtPopover,\n DtStack,\n DtInput,\n DtTooltip,\n DtIconLightningBolt,\n DtIconBold,\n DtIconItalic,\n DtIconUnderline,\n DtIconStrikethrough,\n DtIconListBullet,\n DtIconListOrdered,\n DtIconAlignLeft,\n DtIconAlignCenter,\n DtIconAlignRight,\n DtIconAlignJustify,\n DtIconQuote,\n DtIconCodeBlock,\n DtIconLink2,\n },\n\n inheritAttrs: false,\n\n props: {\n /\n Value of the input. The object format should match TipTap's JSON\n * document structure: https://tiptap.dev/guide/output#option-1-json\n /\n value: {\n type: [Object, String],\n default: '',\n },\n\n /\n Whether the input is editable\n /\n editable: {\n type: Boolean,\n default: true,\n },\n\n /\n Descriptive label for the input element\n /\n inputAriaLabel: {\n type: String,\n required: true,\n default: '',\n },\n\n /\n Additional class name for the input element. Only accepts a String value\n * because this is passed to the editor via options. For multiple classes,\n * join them into one string, e.g. \"d-p8 d-hmx96\"\n /\n inputClass: {\n type: String,\n default: '',\n },\n\n /\n Whether the input should receive focus after the component has been\n * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n * - `start` Sets the focus to the beginning of the input\n * - `end` Sets the focus to the end of the input\n * - `all` Selects the whole contents of the input\n * - `Number` Sets the focus to a specific position in the input\n * - `true` Defaults to `start`\n * - `false` Disables autofocus\n * @values true, false, start, end, all, number\n /\n autoFocus: {\n type: [Boolean, String, Number],\n default: false,\n validator (autoFocus) {\n if (typeof autoFocus === 'string') {\n return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n }\n return true;\n },\n },\n\n /\n Placeholder text\n /\n placeholder: {\n type: String,\n default: '',\n },\n\n /\n Content area needs to dynamically adjust height based on the conversation area height.\n * can be vh\|px\|rem\|em\|%\n /\n maxHeight: {\n type: String,\n default: 'unset',\n },\n\n /\n Confirm set link button defaults.\n /\n confirmSetLinkButton: {\n type: Object,\n default: () => ({ label: 'Confirm', ariaLabel: 'Confirm set link' }),\n },\n\n /\n Remove link button defaults.\n /\n removeLinkButton: {\n type: Object,\n default: () => ({ label: 'Remove', ariaLabel: 'Remove link' }),\n },\n\n /\n Cancel set link button defaults.\n /\n cancelSetLinkButton: {\n type: Object,\n default: () => ({ label: 'Cancel', ariaLabel: 'Cancel set link' }),\n },\n\n /\n Placeholder text for the set link input field\n /\n setLinkPlaceholder: {\n type: String,\n default: '',\n },\n\n /\n Show button to render text as bold\n /\n showBoldButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to render text in italics\n /\n showItalicsButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to underline text\n /\n showUnderlineButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to strike text\n /\n showStrikeButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to render list items\n /\n showListItemsButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to render ordered list items\n /\n showOrderedListButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to align text to the left\n /\n showAlignLeftButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to align text to the center\n /\n showAlignCenterButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to align text to the right\n /\n showAlignRightButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to justify text\n /\n showAlignJustifyButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to add quote format to text\n /\n showQuoteButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to add code block\n /\n showCodeBlockButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to handle quick replies\n /\n showQuickRepliesButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show add link default config.\n /\n showAddLink: {\n type: Object,\n default: () => ({\n showAddLinkButton: true,\n setLinkTitle: 'Add a link',\n setLinkInputAriaLabel: 'Input field to add link',\n }),\n },\n\n /\n Use default paste handler.\n /\n useDefaultPasteHandler: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /\n Native focus event\n * @event input\n * @type {String\|JSON}\n /\n 'focus',\n\n /\n Native blur event\n * @event input\n * @type {String\|JSON}\n /\n 'blur',\n\n /\n Native input event\n * @event input\n * @type {String\|JSON}\n /\n 'input',\n\n /\n Quick replies button\n * pressed event\n * @event quick-replies-click\n */\n 'quick-replies-click',\n ],\n\n data () {\n return {\n internalInputValue: this.value, // internal input content\n hasFocus: false,\n\n linkOptions: {\n class: 'd-link d-c-text d-d-inline-block',\n },\n\n showLinkInput: false,\n linkInput: '',\n };\n },\n\n computed: {\n inputLength () {\n return this.internalInputValue.length;\n },\n\n htmlOutputFormat () {\n return RICH_TEXT_EDITOR_OUTPUT_FORMATS[2];\n },\n\n showingTextFormatButtons () {\n return this.showBoldButton \|\| this.showItalicsButton \|\| this.showStrikeButton \|\| this.showUnderlineButton;\n },\n\n showingAlignmentButtons () {\n return this.showAlignLeftButton \|\| this.showAlignCenterButton \|\|\n this.showAlignRightButton \|\| this.showAlignJustifyButton;\n },\n\n showingListButtons () {\n return this.showListItemsButton \|\| this.showOrderedListButton;\n },\n\n buttonGroups () {\n const individualButtonStacks = this.individualButtons.map(buttonData => ({\n key: buttonData.selector,\n buttonGroup: [buttonData],\n }));\n return [\n { key: 'new', buttonGroup: this.newButtons },\n { key: 'format', buttonGroup: this.textFormatButtons },\n { key: 'alignment', buttonGroup: this.alignmentButtons },\n { key: 'list', buttonGroup: this.listButtons },\n ...individualButtonStacks,\n ].filter(buttonGroupData => buttonGroupData.buttonGroup.length > 0);\n },\n\n newButtons () {\n return [\n { showBtn: this.showQuickRepliesButton, label: 'Quick reply', selector: 'quickReplies', icon: DtIconLightningBolt, dataQA: 'dt-editor-quick-replies-btn', tooltipMessage: 'Quick Reply', onClick: this.onQuickRepliesClick },\n ].filter(button => button.showBtn);\n },\n\n textFormatButtons () {\n return [\n { showBtn: this.showBoldButton, selector: 'bold', icon: DtIconBold, dataQA: 'dt-editor-bold-btn', tooltipMessage: 'Bold', onClick: this.onBoldTextToggle },\n { showBtn: this.showItalicsButton, selector: 'italic', icon: DtIconItalic, dataQA: 'dt-editor-italics-btn', tooltipMessage: 'Italics', onClick: this.onItalicTextToggle },\n { showBtn: this.showUnderlineButton, selector: 'underline', icon: DtIconUnderline, dataQA: 'dt-editor-underline-btn', tooltipMessage: 'Underline', onClick: this.onUnderlineTextToggle },\n { showBtn: this.showStrikeButton, selector: 'strike', icon: DtIconStrikethrough, dataQA: 'dt-editor-strike-btn', tooltipMessage: 'Strike', onClick: this.onStrikethroughTextToggle },\n ].filter(button => button.showBtn);\n },\n\n alignmentButtons () {\n return [\n { showBtn: this.showAlignLeftButton, selector: { textAlign: 'left' }, icon: DtIconAlignLeft, dataQA: 'dt-editor-align-left-btn', tooltipMessage: 'Align Left', onClick: () => this.onTextAlign('left') },\n { showBtn: this.showAlignCenterButton, selector: { textAlign: 'center' }, icon: DtIconAlignCenter, dataQA: 'dt-editor-align-center-btn', tooltipMessage: 'Align Center', onClick: () => this.onTextAlign('center') },\n { showBtn: this.showAlignRightButton, selector: { textAlign: 'right' }, icon: DtIconAlignRight, dataQA: 'dt-editor-align-right-btn', tooltipMessage: 'Align Right', onClick: () => this.onTextAlign('right') },\n { showBtn: this.showAlignJustifyButton, selector: { textAlign: 'justify' }, icon: DtIconAlignJustify, dataQA: 'dt-editor-align-justify-btn', tooltipMessage: 'Align Justify', onClick: () => this.onTextAlign('justify') },\n ].filter(button => button.showBtn);\n },\n\n listButtons () {\n return [\n { showBtn: this.showListItemsButton, selector: 'bulletList', icon: DtIconListBullet, dataQA: 'dt-editor-list-items-btn', tooltipMessage: 'Bullet List', onClick: this.onBulletListToggle },\n { showBtn: this.showOrderedListButton, selector: 'orderedList', icon: DtIconListOrdered, dataQA: 'dt-editor-ordered-list-items-btn', tooltipMessage: 'Ordered List', onClick: this.onOrderedListToggle },\n ].filter(button => button.showBtn);\n },\n\n individualButtons () {\n return [\n { showBtn: this.showQuoteButton, selector: 'blockquote', icon: DtIconQuote, dataQA: 'dt-editor-blockquote-btn', tooltipMessage: 'Quote', onClick: this.onBlockquoteToggle },\n { showBtn: this.showCodeBlockButton, selector: 'codeBlock', icon: DtIconCodeBlock, dataQA: 'dt-editor-code-block-btn', tooltipMessage: 'Code', onClick: this.onCodeBlockToggle },\n ].filter(button => button.showBtn);\n },\n\n linkButton () {\n return { showBtn: this.showAddLink.showAddLinkButton, selector: 'link', icon: DtIconLink2, dataQA: 'dt-editor-add-link-btn', tooltipMessage: 'Link', onClick: this.openLinkInput };\n },\n },\n\n watch: {\n value (newValue) {\n this.internalInputValue = newValue;\n },\n },\n\n methods: {\n onInputFocus (event) {\n event?.stopPropagation();\n },\n\n removeLink () {\n this.$refs.richTextEditor?.editor?.chain()?.focus()?.unsetLink()?.run();\n this.closeLinkInput();\n },\n\n setLink (event) {\n const editor = this.$refs.richTextEditor?.editor;\n event?.preventDefault();\n event?.stopPropagation();\n\n if (!this.linkInput) {\n // If link text is set to empty string,\n // remove any existing links.\n this.removeLink();\n return;\n }\n\n // Check if input matches any of the supported link formats\n const prefix = EDITOR_SUPPORTED_LINK_PROTOCOLS.find(prefixRegex => prefixRegex.test(this.linkInput));\n\n if (!prefix) {\n // If no matching pattern is found, prepend default prefix\n this.linkInput = `${EDITOR_DEFAULT_LINK_PREFIX}${this.linkInput}`;\n }\n\n const selection = editor?.view?.state?.selection;\n\n if (selection.anchor === selection.head) {\n // If no text has been selected, manually insert the link text.\n // Do not rely on link options set through DtRichTextEditor\n // component, because they clash with these and cause issues.\n editor\n .chain()\n .focus()\n .insertContentAt(\n selection.anchor,\n `<a class=\"${this.linkOptions.class}\" href=${this.linkInput}>${this.linkInput}</a>`,\n )\n .run();\n } else {\n // Set or edit the link\n editor\n .chain()\n .focus()\n .extendMarkRange('link')\n .setLink({ href: this.linkInput, class: this.linkOptions.class })\n .run();\n }\n\n this.closeLinkInput();\n },\n\n openLinkInput () {\n this.showLinkInput = true;\n },\n\n updateInput (openedInput) {\n if (!openedInput) {\n return this.closeLinkInput();\n }\n this.linkInput = this.$refs.richTextEditor?.editor?.getAttributes('link')?.href;\n },\n\n closeLinkInput () {\n this.showLinkInput = false;\n this.linkInput = '';\n this.$refs.richTextEditor.editor?.chain().focus();\n },\n\n onBoldTextToggle () {\n this.$refs.richTextEditor?.editor?.chain().focus().toggleBold().run();\n },\n\n onItalicTextToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleItalic().run();\n },\n\n onUnderlineTextToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleUnderline().run();\n },\n\n onStrikethroughTextToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleStrike().run();\n },\n\n onTextAlign (alignment) {\n if (this.$refs.richTextEditor?.editor?.isActive({ textAlign: alignment })) {\n // If this alignment type is already set here, unset it\n return this.$refs.richTextEditor?.editor.chain().focus().unsetTextAlign().run();\n }\n this.$refs.richTextEditor?.editor.chain().focus().setTextAlign(alignment).run();\n },\n\n onBulletListToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleBulletList().run();\n },\n\n onOrderedListToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleOrderedList().run();\n },\n\n onCodeBlockToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleCodeBlock().run();\n },\n\n onQuickRepliesClick () {\n this.$emit('quick-replies-click');\n },\n\n onBlockquoteToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().run();\n },\n\n onFocus (event) {\n this.hasFocus = true;\n this.$emit('focus', event);\n },\n\n onBlur (event) {\n this.hasFocus = false;\n this.$emit('blur', event);\n },\n\n onInput (event) {\n this.$emit('input', event);\n },\n\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-editor--top-bar-background {\n background-color: var(--dt-color-surface-secondary);\n}\n\n.dt-editor--button-group-divider {\n margin-left: var(--dt-space-400);\n height: calc(var(--dt-size-550) + var(--dt-size-300));\n width: var(--dt-size-100);\n background: var(--dt-color-border-subtle);\n}\n</style>\n"],"names":["DtRichTextEditor","DtButton","DtPopover","DtStack","DtInput","DtTooltip","DtIconLightningBolt","DtIconBold","DtIconItalic","DtIconUnderline","DtIconStrikethrough","DtIconListBullet","DtIconListOrdered","DtIconAlignLeft","DtIconAlignCenter","DtIconAlignRight","DtIconAlignJustify","DtIconQuote","DtIconCodeBlock","DtIconLink2","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","RICH_TEXT_EDITOR_OUTPUT_FORMATS","button","editor","EDITOR_SUPPORTED_LINK_PROTOCOLS","EDITOR_DEFAULT_LINK_PREFIX"],"mappings":";;;;;;;;;;;;;AAkNA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAA,iBAAA;AAAA,IACA,UAAAC,OAAA;AAAA,IACA,WAAAC,QAAA;AAAA,IACA,SAAAC,MAAA;AAAA,IACA,SAAAC,MAAA;AAAA,IACA,WAAAC,QAAA;AAAA,IACA,qBAAAC,KAAA;AAAA,IACA,YAAAC,KAAA;AAAA,IACA,cAAAC,KAAA;AAAA,IACA,iBAAAC,KAAA;AAAA,IACA,qBAAAC,KAAA;AAAA,IACA,kBAAAC,KAAA;AAAA,IACA,mBAAAC,KAAA;AAAA,IACA,iBAAAC,KAAA;AAAA,IACA,mBAAAC,KAAA;AAAA,IACA,kBAAAC,KAAA;AAAA,IACA,oBAAAC,KAAA;AAAA,IACA,aAAAC,KAAA;AAAA,IACA,iBAAAC,KAAA;AAAA,IACA,aAAAC,KAAA;AAAA,EACA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA,CAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAaA,WAAA;AAAA,MACA,MAAA,CAAA,SAAA,QAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAA,WAAA;AACA,YAAA,OAAA,cAAA,UAAA;AACA,iBAAAC,2BAAA,iCAAA,SAAA,SAAA;AAAA,QACA;AACA,eAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,EAAA,OAAA,WAAA,WAAA,mBAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,EAAA,OAAA,UAAA,WAAA,cAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA,EAAA,OAAA,UAAA,WAAA,kBAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,uBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,uBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,sBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,OAAA;AAAA,QACA,mBAAA;AAAA,QACA,cAAA;AAAA,QACA,uBAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,wBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,oBAAA,KAAA;AAAA;AAAA,MACA,UAAA;AAAA,MAEA,aAAA;AAAA,QACA,OAAA;AAAA,MACA;AAAA,MAEA,eAAA;AAAA,MACA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,cAAA;AACA,aAAA,KAAA,mBAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAAC,2BAAAA,gCAAA,CAAA;AAAA,IACA;AAAA,IAEA,2BAAA;AACA,aAAA,KAAA,kBAAA,KAAA,qBAAA,KAAA,oBAAA,KAAA;AAAA,IACA;AAAA,IAEA,0BAAA;AACA,aAAA,KAAA,uBAAA,KAAA,yBACA,KAAA,wBAAA,KAAA;AAAA,IACA;AAAA,IAEA,qBAAA;AACA,aAAA,KAAA,uBAAA,KAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,YAAA,yBAAA,KAAA,kBAAA,IAAA,iBAAA;AAAA,QACA,KAAA,WAAA;AAAA,QACA,aAAA,CAAA,UAAA;AAAA,MACA,EAAA;AACA,aAAA;AAAA,QACA,EAAA,KAAA,OAAA,aAAA,KAAA,WAAA;AAAA,QACA,EAAA,KAAA,UAAA,aAAA,KAAA,kBAAA;AAAA,QACA,EAAA,KAAA,aAAA,aAAA,KAAA,iBAAA;AAAA,QACA,EAAA,KAAA,QAAA,aAAA,KAAA,YAAA;AAAA,QACA,GAAA;AAAA,MACA,EAAA,OAAA,qBAAA,gBAAA,YAAA,SAAA,CAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA;AAAA,QACA,EAAA,SAAA,KAAA,wBAAA,OAAA,eAAA,UAAA,gBAAA,MAAAf,KAAAA,qBAAA,QAAA,+BAAA,gBAAA,eAAA,SAAA,KAAA,oBAAA;AAAA,MACA,EAAA,OAAA,CAAAgB,YAAAA,QAAA,OAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA;AAAA,QACA,EAAA,SAAA,KAAA,gBAAA,UAAA,QAAA,MAAAf,KAAAA,YAAA,QAAA,sBAAA,gBAAA,QAAA,SAAA,KAAA,iBAAA;AAAA,QACA,EAAA,SAAA,KAAA,mBAAA,UAAA,UAAA,MAAAC,KAAAA,cAAA,QAAA,yBAAA,gBAAA,WAAA,SAAA,KAAA,mBAAA;AAAA,QACA,EAAA,SAAA,KAAA,qBAAA,UAAA,aAAA,MAAAC,KAAAA,iBAAA,QAAA,2BAAA,gBAAA,aAAA,SAAA,KAAA,sBAAA;AAAA,QACA,EAAA,SAAA,KAAA,kBAAA,UAAA,UAAA,MAAAC,KAAAA,qBAAA,QAAA,wBAAA,gBAAA,UAAA,SAAA,KAAA,0BAAA;AAAA,MACA,EAAA,OAAA,CAAAY,YAAAA,QAAA,OAAA;AAAA,IACA;AAAA,IAEA,mBAAA;AACA,aAAA;AAAA,QACA,EAAA,SAAA,KAAA,qBAAA,UAAA,EAAA,WAAA,OAAA,GAAA,MAAAT,KAAAA,iBAAA,QAAA,4BAAA,gBAAA,cAAA,SAAA,MAAA,KAAA,YAAA,MAAA,EAAA;AAAA,QACA,EAAA,SAAA,KAAA,uBAAA,UAAA,EAAA,WAAA,SAAA,GAAA,MAAAC,KAAAA,mBAAA,QAAA,8BAAA,gBAAA,gBAAA,SAAA,MAAA,KAAA,YAAA,QAAA,EAAA;AAAA,QACA,EAAA,SAAA,KAAA,sBAAA,UAAA,EAAA,WAAA,QAAA,GAAA,MAAAC,KAAAA,kBAAA,QAAA,6BAAA,gBAAA,eAAA,SAAA,MAAA,KAAA,YAAA,OAAA,EAAA;AAAA,QACA,EAAA,SAAA,KAAA,wBAAA,UAAA,EAAA,WAAA,UAAA,GAAA,MAAAC,KAAAA,oBAAA,QAAA,+BAAA,gBAAA,iBAAA,SAAA,MAAA,KAAA,YAAA,SAAA,EAAA;AAAA,MACA,EAAA,OAAA,CAAAM,YAAAA,QAAA,OAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA;AAAA,QACA,EAAA,SAAA,KAAA,qBAAA,UAAA,cAAA,MAAAX,KAAAA,kBAAA,QAAA,4BAAA,gBAAA,eAAA,SAAA,KAAA,mBAAA;AAAA,QACA,EAAA,SAAA,KAAA,uBAAA,UAAA,eAAA,MAAAC,KAAAA,mBAAA,QAAA,oCAAA,gBAAA,gBAAA,SAAA,KAAA,oBAAA;AAAA,MACA,EAAA,OAAA,CAAAU,YAAAA,QAAA,OAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA;AAAA,QACA,EAAA,SAAA,KAAA,iBAAA,UAAA,cAAA,MAAAL,KAAAA,aAAA,QAAA,4BAAA,gBAAA,SAAA,SAAA,KAAA,mBAAA;AAAA,QACA,EAAA,SAAA,KAAA,qBAAA,UAAA,aAAA,MAAAC,KAAAA,iBAAA,QAAA,4BAAA,gBAAA,QAAA,SAAA,KAAA,kBAAA;AAAA,MACA,EAAA,OAAA,CAAAI,YAAAA,QAAA,OAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,EAAA,SAAA,KAAA,YAAA,mBAAA,UAAA,QAAA,MAAAH,KAAA,aAAA,QAAA,0BAAA,gBAAA,QAAA,SAAA,KAAA;IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA,UAAA;AACA,WAAA,qBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,aAAA,OAAA;AACA,qCAAA;AAAA,IACA;AAAA,IAEA,aAAA;;AACA,yCAAA,MAAA,mBAAA,mBAAA,WAAA,mBAAA,YAAA,mBAAA,YAAA,mBAAA,gBAAA,mBAAA;AACA,WAAA,eAAA;AAAA,IACA;AAAA,IAEA,QAAA,OAAA;;AACA,YAAAI,WAAA,UAAA,MAAA,mBAAA,mBAAA;AACA,qCAAA;AACA,qCAAA;AAEA,UAAA,CAAA,KAAA,WAAA;AAGA,aAAA,WAAA;AACA;AAAA,MACA;AAGA,YAAA,SAAAC,iDAAA,KAAA,iBAAA,YAAA,KAAA,KAAA,SAAA,CAAA;AAEA,UAAA,CAAA,QAAA;AAEA,aAAA,YAAA,GAAAC,iBAAAA,0BAAA,GAAA,KAAA,SAAA;AAAA,MACA;AAEA,YAAA,aAAA,WAAAF,WAAA,gBAAAA,QAAA,SAAA,mBAAA,UAAA,mBAAA;AAEA,UAAA,UAAA,WAAA,UAAA,MAAA;AAIA,QAAAA,QACA,MAAA,EACA,MAAA,EACA;AAAA,UACA,UAAA;AAAA,UACA,aAAA,KAAA,YAAA,KAAA,UAAA,KAAA,SAAA,IAAA,KAAA,SAAA;AAAA,QACA,EACA;MACA,OAAA;AAEA,QAAAA,QACA,MAAA,EACA,MAAA,EACA,gBAAA,MAAA,EACA,QAAA,EAAA,MAAA,KAAA,WAAA,OAAA,KAAA,YAAA,OAAA,EACA;MACA;AAEA,WAAA,eAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,WAAA,gBAAA;AAAA,IACA;AAAA,IAEA,YAAA,aAAA;;AACA,UAAA,CAAA,aAAA;AACA,eAAA,KAAA;MACA;AACA,WAAA,aAAA,sBAAA,MAAA,mBAAA,mBAAA,WAAA,mBAAA,cAAA,YAAA,mBAAA;AAAA,IACA;AAAA,IAEA,iBAAA;;AACA,WAAA,gBAAA;AACA,WAAA,YAAA;AACA,iBAAA,MAAA,eAAA,WAAA,mBAAA,QAAA;AAAA,IACA;AAAA,IAEA,mBAAA;;AACA,uBAAA,MAAA,mBAAA,mBAAA,WAAA,mBAAA,QAAA,QAAA,aAAA;AAAA,IACA;AAAA,IAEA,qBAAA;;AACA,iBAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,QAAA,eAAA;AAAA,IACA;AAAA,IAEA,wBAAA;;AACA,iBAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,QAAA,kBAAA;AAAA,IACA;AAAA,IAEA,4BAAA;;AACA,iBAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,QAAA,eAAA;AAAA,IACA;AAAA,IAEA,YAAA,WAAA;;AACA,WAAA,gBAAA,MAAA,mBAAA,mBAAA,WAAA,mBAAA,SAAA,EAAA,WAAA,UAAA,IAAA;AAEA,gBAAA,UAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,QAAA,iBAAA;AAAA,MACA;AACA,iBAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,QAAA,aAAA,WAAA;AAAA,IACA;AAAA,IAEA,qBAAA;;AACA,iBAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,QAAA,mBAAA;AAAA,IACA;AAAA,IAEA,sBAAA;;AACA,iBAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,QAAA,oBAAA;AAAA,IACA;AAAA,IAEA,oBAAA;;AACA,iBAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,QAAA,kBAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,WAAA,MAAA,qBAAA;AAAA,IACA;AAAA,IAEA,qBAAA;;AACA,iBAAA,MAAA,mBAAA,mBAAA,OAAA,QAAA,QAAA,mBAAA;AAAA,IACA;AAAA,IAEA,QAAA,OAAA;AACA,WAAA,WAAA;AACA,WAAA,MAAA,SAAA,KAAA;AAAA,IACA;AAAA,IAEA,OAAA,OAAA;AACA,WAAA,WAAA;AACA,WAAA,MAAA,QAAA,KAAA;AAAA,IACA;AAAA,IAEA,QAAA,OAAA;AACA,WAAA,MAAA,SAAA,KAAA;AAAA,IACA;AAAA,EAEA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"editor.vue.cjs","sources":["../../../../recipes/conversation_view/editor/editor.vue"],"sourcesContent":["<!-- eslint-disable vue/no-restricted-class -->\n<template>\n <div\n data-qa=\"dt-editor\"\n role=\"presentation\"\n class=\"d-d-flex d-fd-column\"\n @click=\"$refs.richTextEditor.focusEditor()\"\n >\n <!-- Section for the top UI -->\n <dt-stack\n direction=\"row\"\n gap=\"450\"\n class=\"d-p8 dt-editor--top-bar-background\"\n >\n <dt-stack\n v-for=\"buttonGroup in buttonGroups\"\n :key=\"buttonGroup.key\"\n direction=\"row\"\n gap=\"300\"\n >\n <dt-tooltip\n v-for=\"button in buttonGroup.buttonGroup\"\n :key=\"`${buttonGroup.key}-${JSON.stringify(button.selector)}`\"\n :message=\"button.tooltipMessage\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n :data-qa=\"button.dataQA\"\n importance=\"clear\"\n kind=\"muted\"\n :active=\"$refs.richTextEditor?.editor?.isActive(button.selector)\"\n size=\"xs\"\n :aria-label=\"button.tooltipMessage\"\n @click=\"button.onClick()\"\n >\n <template #icon>\n <component\n :is=\"button.icon\"\n size=\"200\"\n />\n </template>\n <span v-if=\"button.label\">{{ button.label }}</span>\n </dt-button>\n </template>\n </dt-tooltip>\n <div class=\"dt-editor--button-group-divider\" />\n </dt-stack>\n <dt-stack\n v-if=\"linkButton.showBtn\"\n direction=\"row\"\n gap=\"300\"\n >\n <dt-popover\n :open.sync=\"showLinkInput\"\n placement=\"bottom-start\"\n :visually-hidden-close=\"true\"\n :visually-hidden-close-label=\"'Close link input popover'\"\n data-qa=\"dt-editor-link-input-popover\"\n :show-close-button=\"false\"\n @click=\"onInputFocus\"\n @click.native.stop=\"onInputFocus\"\n @opened=\"updateInput\"\n >\n <template #anchor>\n <dt-tooltip\n :key=\"linkButton.key\"\n :message=\"linkButton.tooltipMessage\"\n placement=\"top\"\n >\n <template #anchor>\n <dt-button\n :data-qa=\"linkButton.dataQA\"\n importance=\"clear\"\n kind=\"muted\"\n class=\"d-ol-none\"\n :active=\"$refs.richTextEditor?.editor?.isActive(linkButton.selector)\"\n size=\"xs\"\n :aria-label=\"linkButton.tooltipMessage\"\n @click=\"linkButton.onClick()\"\n >\n <template #icon>\n <component\n :is=\"linkButton.icon\"\n size=\"200\"\n class=\"d-fw-bold\"\n />\n </template>\n </dt-button>\n </template>\n </dt-tooltip>\n </template>\n\n <template #content>\n <span\n v-if=\"showAddLink.setLinkTitle.length > 0\"\n >\n {{ showAddLink.setLinkTitle }}\n </span>\n <dt-input\n v-model=\"linkInput\"\n :input-aria-label=\"showAddLink.setLinkInputAriaLabel\"\n data-qa=\"dt-editor-link-input\"\n :placeholder=\"setLinkPlaceholder\"\n input-wrapper-class=\"d-bgc-secondary d-mt6 d-bar5 d-ba d-baw1 d-bc-default d-py2 d-ol-none\"\n @click=\"onInputFocus\"\n @click.native.stop=\"onInputFocus\"\n @focus=\"onInputFocus\"\n @keydown.enter=\"setLink\"\n />\n </template>\n <template #footerContent>\n <div class=\"d-ml8 d-mr12\">\n <dt-button\n class=\"d-mx2\"\n :aria-label=\"removeLinkButton.ariaLabel\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"sm\"\n data-qa=\"dt-editor-remove-link-btn\"\n @click=\"removeLink\"\n >\n {{ removeLinkButton.label }}\n </dt-button>\n <dt-button\n class=\"d-mx2\"\n :aria-label=\"cancelSetLinkButton.ariaLabel\"\n importance=\"clear\"\n kind=\"muted\"\n size=\"sm\"\n data-qa=\"dt-editor-set-link-cancel-btn\"\n @click=\"closeLinkInput\"\n >\n {{ cancelSetLinkButton.label }}\n </dt-button>\n <dt-button\n class=\"d-mx2\"\n size=\"sm\"\n :aria-label=\"confirmSetLinkButton.ariaLabel\"\n data-qa=\"dt-editor-set-link-confirm-btn\"\n @click=\"setLink\"\n >\n {{ confirmSetLinkButton.label }}\n </dt-button>\n </div>\n </template>\n </dt-popover>\n </dt-stack>\n </dt-stack>\n\n <!-- Some wrapper to restrict the height and show the scrollbar -->\n <div\n class=\"d-of-auto d-mx16 d-mt8 d-mb16 d-c-text\"\n :style=\"{ 'max-height': maxHeight }\"\n >\n <dt-rich-text-editor\n ref=\"richTextEditor\"\n v-model=\"internalInputValue\"\n data-qa=\"dt-rich-text-editor\"\n :editable=\"editable\"\n :input-aria-label=\"inputAriaLabel\"\n :input-class=\"`d-ml16 d-ol-none d-my6 ${inputClass}`\"\n :output-format=\"htmlOutputFormat\"\n :auto-focus=\"autoFocus\"\n :placeholder=\"placeholder\"\n :allow-line-breaks=\"true\"\n :link=\"true\"\n v-bind=\"$attrs\"\n @focus=\"onFocus\"\n @blur=\"onBlur\"\n @input=\"onInput($event)\"\n />\n </div>\n </div>\n</template>\n\n<script>\n/* eslint-disable max-lines /\nimport {\n DtRichTextEditor,\n RICH_TEXT_EDITOR_OUTPUT_FORMATS,\n RICH_TEXT_EDITOR_AUTOFOCUS_TYPES,\n} from '@/components/rich_text_editor';\nimport {\n EDITOR_SUPPORTED_LINK_PROTOCOLS,\n EDITOR_DEFAULT_LINK_PREFIX,\n} from './editor_constants.js';\nimport { DtButton } from '@/components/button';\nimport { DtPopover } from '@/components/popover';\nimport { DtStack } from '@/components/stack';\nimport { DtInput } from '@/components/input';\nimport { DtTooltip } from '@/components/tooltip';\nimport {\n DtIconAlignCenter,\n DtIconAlignJustify,\n DtIconAlignLeft,\n DtIconAlignRight,\n DtIconBold,\n DtIconCodeBlock,\n DtIconItalic,\n DtIconLightningBolt,\n DtIconLink2,\n DtIconListBullet,\n DtIconListOrdered,\n DtIconQuote,\n DtIconStrikethrough,\n DtIconUnderline,\n} from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n name: 'DtRecipeEditor',\n\n components: {\n DtRichTextEditor,\n DtButton,\n DtPopover,\n DtStack,\n DtInput,\n DtTooltip,\n DtIconLightningBolt,\n DtIconBold,\n DtIconItalic,\n DtIconUnderline,\n DtIconStrikethrough,\n DtIconListBullet,\n DtIconListOrdered,\n DtIconAlignLeft,\n DtIconAlignCenter,\n DtIconAlignRight,\n DtIconAlignJustify,\n DtIconQuote,\n DtIconCodeBlock,\n DtIconLink2,\n },\n\n inheritAttrs: false,\n\n props: {\n /\n Value of the input. The object format should match TipTap's JSON\n * document structure: https://tiptap.dev/guide/output#option-1-json\n /\n value: {\n type: [Object, String],\n default: '',\n },\n\n /\n Whether the input is editable\n /\n editable: {\n type: Boolean,\n default: true,\n },\n\n /\n Descriptive label for the input element\n /\n inputAriaLabel: {\n type: String,\n required: true,\n default: '',\n },\n\n /\n Additional class name for the input element. Only accepts a String value\n * because this is passed to the editor via options. For multiple classes,\n * join them into one string, e.g. \"d-p8 d-hmx96\"\n /\n inputClass: {\n type: String,\n default: '',\n },\n\n /\n Whether the input should receive focus after the component has been\n * mounted. Either one of `start`, `end`, `all` or a Boolean or a Number.\n * - `start` Sets the focus to the beginning of the input\n * - `end` Sets the focus to the end of the input\n * - `all` Selects the whole contents of the input\n * - `Number` Sets the focus to a specific position in the input\n * - `true` Defaults to `start`\n * - `false` Disables autofocus\n * @values true, false, start, end, all, number\n /\n autoFocus: {\n type: [Boolean, String, Number],\n default: false,\n validator (autoFocus) {\n if (typeof autoFocus === 'string') {\n return RICH_TEXT_EDITOR_AUTOFOCUS_TYPES.includes(autoFocus);\n }\n return true;\n },\n },\n\n /\n Placeholder text\n /\n placeholder: {\n type: String,\n default: '',\n },\n\n /\n Content area needs to dynamically adjust height based on the conversation area height.\n * can be vh\|px\|rem\|em\|%\n /\n maxHeight: {\n type: String,\n default: 'unset',\n },\n\n /\n Confirm set link button defaults.\n /\n confirmSetLinkButton: {\n type: Object,\n default: () => ({ label: 'Confirm', ariaLabel: 'Confirm set link' }),\n },\n\n /\n Remove link button defaults.\n /\n removeLinkButton: {\n type: Object,\n default: () => ({ label: 'Remove', ariaLabel: 'Remove link' }),\n },\n\n /\n Cancel set link button defaults.\n /\n cancelSetLinkButton: {\n type: Object,\n default: () => ({ label: 'Cancel', ariaLabel: 'Cancel set link' }),\n },\n\n /\n Placeholder text for the set link input field\n /\n setLinkPlaceholder: {\n type: String,\n default: '',\n },\n\n /\n Show button to render text as bold\n /\n showBoldButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to render text in italics\n /\n showItalicsButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to underline text\n /\n showUnderlineButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to strike text\n /\n showStrikeButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to render list items\n /\n showListItemsButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to render ordered list items\n /\n showOrderedListButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to align text to the left\n /\n showAlignLeftButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to align text to the center\n /\n showAlignCenterButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to align text to the right\n /\n showAlignRightButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to justify text\n /\n showAlignJustifyButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to add quote format to text\n /\n showQuoteButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to add code block\n /\n showCodeBlockButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show button to handle quick replies\n /\n showQuickRepliesButton: {\n type: Boolean,\n default: true,\n },\n\n /\n Show add link default config.\n /\n showAddLink: {\n type: Object,\n default: () => ({\n showAddLinkButton: true,\n setLinkTitle: 'Add a link',\n setLinkInputAriaLabel: 'Input field to add link',\n }),\n },\n },\n\n emits: [\n /\n Native focus event\n * @event input\n * @type {String\|JSON}\n /\n 'focus',\n\n /\n Native blur event\n * @event input\n * @type {String\|JSON}\n /\n 'blur',\n\n /\n Native input event\n * @event input\n * @type {String\|JSON}\n /\n 'input',\n\n /\n Quick replies button\n * pressed event\n * @event quick-replies-click\n */\n 'quick-replies-click',\n ],\n\n data () {\n return {\n internalInputValue: this.value, // internal input content\n hasFocus: false,\n\n linkOptions: {\n class: 'd-link d-c-text d-d-inline-block',\n },\n\n showLinkInput: false,\n linkInput: '',\n };\n },\n\n computed: {\n inputLength () {\n return this.internalInputValue.length;\n },\n\n htmlOutputFormat () {\n return RICH_TEXT_EDITOR_OUTPUT_FORMATS[2];\n },\n\n showingTextFormatButtons () {\n return this.showBoldButton \|\| this.showItalicsButton \|\| this.showStrikeButton \|\| this.showUnderlineButton;\n },\n\n showingAlignmentButtons () {\n return this.showAlignLeftButton \|\| this.showAlignCenterButton \|\|\n this.showAlignRightButton \|\| this.showAlignJustifyButton;\n },\n\n showingListButtons () {\n return this.showListItemsButton \|\| this.showOrderedListButton;\n },\n\n buttonGroups () {\n const individualButtonStacks = this.individualButtons.map(buttonData => ({\n key: buttonData.selector,\n buttonGroup: [buttonData],\n }));\n return [\n { key: 'new', buttonGroup: this.newButtons },\n { key: 'format', buttonGroup: this.textFormatButtons },\n { key: 'alignment', buttonGroup: this.alignmentButtons },\n { key: 'list', buttonGroup: this.listButtons },\n ...individualButtonStacks,\n ].filter(buttonGroupData => buttonGroupData.buttonGroup.length > 0);\n },\n\n newButtons () {\n return [\n { showBtn: this.showQuickRepliesButton, label: 'Quick reply', selector: 'quickReplies', icon: DtIconLightningBolt, dataQA: 'dt-editor-quick-replies-btn', tooltipMessage: 'Quick Reply', onClick: this.onQuickRepliesClick },\n ].filter(button => button.showBtn);\n },\n\n textFormatButtons () {\n return [\n { showBtn: this.showBoldButton, selector: 'bold', icon: DtIconBold, dataQA: 'dt-editor-bold-btn', tooltipMessage: 'Bold', onClick: this.onBoldTextToggle },\n { showBtn: this.showItalicsButton, selector: 'italic', icon: DtIconItalic, dataQA: 'dt-editor-italics-btn', tooltipMessage: 'Italics', onClick: this.onItalicTextToggle },\n { showBtn: this.showUnderlineButton, selector: 'underline', icon: DtIconUnderline, dataQA: 'dt-editor-underline-btn', tooltipMessage: 'Underline', onClick: this.onUnderlineTextToggle },\n { showBtn: this.showStrikeButton, selector: 'strike', icon: DtIconStrikethrough, dataQA: 'dt-editor-strike-btn', tooltipMessage: 'Strike', onClick: this.onStrikethroughTextToggle },\n ].filter(button => button.showBtn);\n },\n\n alignmentButtons () {\n return [\n { showBtn: this.showAlignLeftButton, selector: { textAlign: 'left' }, icon: DtIconAlignLeft, dataQA: 'dt-editor-align-left-btn', tooltipMessage: 'Align Left', onClick: () => this.onTextAlign('left') },\n { showBtn: this.showAlignCenterButton, selector: { textAlign: 'center' }, icon: DtIconAlignCenter, dataQA: 'dt-editor-align-center-btn', tooltipMessage: 'Align Center', onClick: () => this.onTextAlign('center') },\n { showBtn: this.showAlignRightButton, selector: { textAlign: 'right' }, icon: DtIconAlignRight, dataQA: 'dt-editor-align-right-btn', tooltipMessage: 'Align Right', onClick: () => this.onTextAlign('right') },\n { showBtn: this.showAlignJustifyButton, selector: { textAlign: 'justify' }, icon: DtIconAlignJustify, dataQA: 'dt-editor-align-justify-btn', tooltipMessage: 'Align Justify', onClick: () => this.onTextAlign('justify') },\n ].filter(button => button.showBtn);\n },\n\n listButtons () {\n return [\n { showBtn: this.showListItemsButton, selector: 'bulletList', icon: DtIconListBullet, dataQA: 'dt-editor-list-items-btn', tooltipMessage: 'Bullet List', onClick: this.onBulletListToggle },\n { showBtn: this.showOrderedListButton, selector: 'orderedList', icon: DtIconListOrdered, dataQA: 'dt-editor-ordered-list-items-btn', tooltipMessage: 'Ordered List', onClick: this.onOrderedListToggle },\n ].filter(button => button.showBtn);\n },\n\n individualButtons () {\n return [\n { showBtn: this.showQuoteButton, selector: 'blockquote', icon: DtIconQuote, dataQA: 'dt-editor-blockquote-btn', tooltipMessage: 'Quote', onClick: this.onBlockquoteToggle },\n { showBtn: this.showCodeBlockButton, selector: 'codeBlock', icon: DtIconCodeBlock, dataQA: 'dt-editor-code-block-btn', tooltipMessage: 'Code', onClick: this.onCodeBlockToggle },\n ].filter(button => button.showBtn);\n },\n\n linkButton () {\n return { showBtn: this.showAddLink.showAddLinkButton, selector: 'link', icon: DtIconLink2, dataQA: 'dt-editor-add-link-btn', tooltipMessage: 'Link', onClick: this.openLinkInput };\n },\n },\n\n watch: {\n value (newValue) {\n this.internalInputValue = newValue;\n },\n },\n\n methods: {\n onInputFocus (event) {\n event?.stopPropagation();\n },\n\n removeLink () {\n this.$refs.richTextEditor?.editor?.chain()?.focus()?.unsetLink()?.run();\n this.closeLinkInput();\n },\n\n setLink (event) {\n const editor = this.$refs.richTextEditor?.editor;\n event?.preventDefault();\n event?.stopPropagation();\n\n if (!this.linkInput) {\n // If link text is set to empty string,\n // remove any existing links.\n this.removeLink();\n return;\n }\n\n // Check if input matches any of the supported link formats\n const prefix = EDITOR_SUPPORTED_LINK_PROTOCOLS.find(prefixRegex => prefixRegex.test(this.linkInput));\n\n if (!prefix) {\n // If no matching pattern is found, prepend default prefix\n this.linkInput = `${EDITOR_DEFAULT_LINK_PREFIX}${this.linkInput}`;\n }\n\n const selection = editor?.view?.state?.selection;\n\n if (selection.anchor === selection.head) {\n // If no text has been selected, manually insert the link text.\n // Do not rely on link options set through DtRichTextEditor\n // component, because they clash with these and cause issues.\n editor\n .chain()\n .focus()\n .insertContentAt(\n selection.anchor,\n `<a class=\"${this.linkOptions.class}\" href=${this.linkInput}>${this.linkInput}</a>`,\n )\n .run();\n } else {\n // Set or edit the link\n editor\n .chain()\n .focus()\n .extendMarkRange('link')\n .setLink({ href: this.linkInput, class: this.linkOptions.class })\n .run();\n }\n\n this.closeLinkInput();\n },\n\n openLinkInput () {\n this.showLinkInput = true;\n },\n\n updateInput (openedInput) {\n if (!openedInput) {\n return this.closeLinkInput();\n }\n this.linkInput = this.$refs.richTextEditor?.editor?.getAttributes('link')?.href;\n },\n\n closeLinkInput () {\n this.showLinkInput = false;\n this.linkInput = '';\n this.$refs.richTextEditor.editor?.chain().focus();\n },\n\n onBoldTextToggle () {\n this.$refs.richTextEditor?.editor?.chain().focus().toggleBold().run();\n },\n\n onItalicTextToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleItalic().run();\n },\n\n onUnderlineTextToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleUnderline().run();\n },\n\n onStrikethroughTextToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleStrike().run();\n },\n\n onTextAlign (alignment) {\n if (this.$refs.richTextEditor?.editor?.isActive({ textAlign: alignment })) {\n // If this alignment type is already set here, unset it\n return this.$refs.richTextEditor?.editor.chain().focus().unsetTextAlign().run();\n }\n this.$refs.richTextEditor?.editor.chain().focus().setTextAlign(alignment).run();\n },\n\n onBulletListToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleBulletList().run();\n },\n\n onOrderedListToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleOrderedList().run();\n },\n\n onCodeBlockToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleCodeBlock().run();\n },\n\n onQuickRepliesClick () {\n this.$emit('quick-replies-click');\n },\n\n onBlockquoteToggle () {\n this.$refs.richTextEditor?.editor.chain().focus().toggleBlockquote().run();\n },\n\n onFocus (event) {\n this.hasFocus = true;\n this.$emit('focus', event);\n },\n\n onBlur (event) {\n this.hasFocus = false;\n this.$emit('blur', event);\n },\n\n onInput (event) {\n this.$emit('input', event);\n },\n\n },\n};\n</script>\n\n<style lang=\"less\">\n.dt-editor--top-bar-background {\n background-color: var(--dt-color-surface-secondary);\n}\n\n.dt-editor--button-group-divider {\n margin-left: var(--dt-space-400);\n height: calc(var(--dt-size-550) + var(--dt-size-300));\n width: var(--dt-size-100);\n background: var(--dt-color-border-subtle);\n}\n</style>\n"],"names":["DtRichTextEditor","DtButton","DtPopover","DtStack","DtInput","DtTooltip","DtIconLightningBolt","DtIconBold","DtIconItalic","DtIconUnderline","DtIconStrikethrough","DtIconListBullet","DtIconListOrdered","DtIconAlignLeft","DtIconAlignCenter","DtIconAlignRight","DtIconAlignJustify","DtIconQuote","DtIconCodeBlock","DtIconLink2","RICH_TEXT_EDITOR_AUTOFOCUS_TYPES","RICH_TEXT_EDITOR_OUTPUT_FORMATS","button","editor","EDITOR_SUPPORTED_LINK_PROTOCOLS","EDITOR_DEFAULT_LINK_PREFIX"],"mappings":"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"}