@dialpad/dialtone-vue 3.220.0-next.5 → 3.220.0

package/dist/lib/toast/toast-constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-constants.cjs","names":["NOTICE_KINDS"],"sources":["../../../components/toast/toast_constants.js"],"sourcesContent":["import { NOTICE_KINDS } from '@/components/notice';\nexport const TOAST_ALTERNATE_KINDS = ['gradient', ...NOTICE_KINDS];\nexport const TOAST_ROLES = ['status', 'alert'];\nexport const TOAST_MIN_DURATION = 6000;\nexport const TOAST_LAYOUTS = ['default', 'alternate'];\n\nexport default {\n  TOAST_ROLES,\n  TOAST_MIN_DURATION,\n  TOAST_LAYOUTS,\n  TOAST_ALTERNATE_KINDS,\n};\n"],"mappings":"+FACA,IAAa,EAAwB,CAAC,WAAY,6CAAGA,aAAa,CACrD,EAAc,CAAC,SAAU,QAAQ,CACjC,EAAqB,IACrB,EAAgB,CAAC,UAAW,YAAY,CAErD,EAAe,CACb,cACA,qBACA,gBACA,wBACD"}

package/dist/lib/toast/toast-constants.js

@@ -0,0 +1,12 @@
+import { NOTICE_KINDS as e } from "../notice/notice-constants.js";
+//#region components/toast/toast_constants.js
+var t = ["gradient", ...e], n = ["status", "alert"], r = 6e3, i = ["default", "alternate"], a = {
+	TOAST_ROLES: n,
+	TOAST_MIN_DURATION: r,
+	TOAST_LAYOUTS: i,
+	TOAST_ALTERNATE_KINDS: t
+};
+//#endregion
+export { t as TOAST_ALTERNATE_KINDS, i as TOAST_LAYOUTS, r as TOAST_MIN_DURATION, n as TOAST_ROLES, a as default };
+
+//# sourceMappingURL=toast-constants.js.map

package/dist/lib/toast/toast-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast-constants.js","names":[],"sources":["../../../components/toast/toast_constants.js"],"sourcesContent":["import { NOTICE_KINDS } from '@/components/notice';\nexport const TOAST_ALTERNATE_KINDS = ['gradient', ...NOTICE_KINDS];\nexport const TOAST_ROLES = ['status', 'alert'];\nexport const TOAST_MIN_DURATION = 6000;\nexport const TOAST_LAYOUTS = ['default', 'alternate'];\n\nexport default {\n  TOAST_ROLES,\n  TOAST_MIN_DURATION,\n  TOAST_LAYOUTS,\n  TOAST_ALTERNATE_KINDS,\n};\n"],"mappings":";;AACA,IAAa,IAAwB,CAAC,YAAY,GAAG,EAAa,EACrD,IAAc,CAAC,UAAU,QAAQ,EACjC,IAAqB,KACrB,IAAgB,CAAC,WAAW,YAAY,EAErD,IAAe;CACb;CACA;CACA;CACA;CACD"}

package/dist/lib/toast/toast.cjs

@@ -1 +1 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../Toast-BtLeYnWL.cjs`);exports.default=e.t;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../toast-d8_zmgkL.cjs`);exports.default=e.t;

package/dist/lib/toast/toast.js

@@ -1,2 +1,2 @@
-import { t as e } from "../../Toast-uu-6tNXS.js";
+import { t as e } from "../../toast-DvPN-bCi.js";
 export { e as default };

package/dist/lib/toggle/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./toggleconstants.cjs`),t=require(`./toggle.cjs`);exports.DtToggle=t.default,exports.TOGGLE_CHECKED_VALUES=e.TOGGLE_CHECKED_VALUES,exports.TOGGLE_SIZE_MODIFIERS=e.TOGGLE_SIZE_MODIFIERS;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./toggle-constants.cjs`),t=require(`./toggle.cjs`);exports.DtToggle=t.default,exports.TOGGLE_CHECKED_VALUES=e.TOGGLE_CHECKED_VALUES,exports.TOGGLE_SIZE_MODIFIERS=e.TOGGLE_SIZE_MODIFIERS;

package/dist/lib/toggle/index.js

@@ -1,3 +1,3 @@
-import { TOGGLE_CHECKED_VALUES as e, TOGGLE_SIZE_MODIFIERS as t } from "./toggleconstants.js";
+import { TOGGLE_CHECKED_VALUES as e, TOGGLE_SIZE_MODIFIERS as t } from "./toggle-constants.js";
 import n from "./toggle.js";
 export { n as DtToggle, e as TOGGLE_CHECKED_VALUES, t as TOGGLE_SIZE_MODIFIERS };

package/dist/lib/toggle/toggle-constants.cjs

@@ -0,0 +1,2 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={sm:`d-toggle--small`,md:``},t=[!1,!0,`mixed`],n={TOGGLE_SIZE_MODIFIERS:e,TOGGLE_CHECKED_VALUES:t};exports.TOGGLE_CHECKED_VALUES=t,exports.TOGGLE_SIZE_MODIFIERS=e,exports.default=n;
+//# sourceMappingURL=toggle-constants.cjs.map

package/dist/lib/toggle/toggle-constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-constants.cjs","names":[],"sources":["../../../components/toggle/toggle_constants.js"],"sourcesContent":["export const TOGGLE_SIZE_MODIFIERS = {\n  sm: 'd-toggle--small',\n  md: '',\n};\n\nexport const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];\n\nexport default {\n  TOGGLE_SIZE_MODIFIERS,\n  TOGGLE_CHECKED_VALUES,\n};\n"],"mappings":"+FAAA,IAAa,EAAwB,CACnC,GAAI,kBACJ,GAAI,GACL,CAEY,EAAwB,CAAC,GAAO,GAAM,QAAQ,CAE3D,EAAe,CACb,wBACA,wBACD"}

package/dist/lib/toggle/toggle-constants.js

@@ -0,0 +1,16 @@
+//#region components/toggle/toggle_constants.js
+var e = {
+	sm: "d-toggle--small",
+	md: ""
+}, t = [
+	!1,
+	!0,
+	"mixed"
+], n = {
+	TOGGLE_SIZE_MODIFIERS: e,
+	TOGGLE_CHECKED_VALUES: t
+};
+//#endregion
+export { t as TOGGLE_CHECKED_VALUES, e as TOGGLE_SIZE_MODIFIERS, n as default };
+
+//# sourceMappingURL=toggle-constants.js.map

package/dist/lib/toggle/toggle-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-constants.js","names":[],"sources":["../../../components/toggle/toggle_constants.js"],"sourcesContent":["export const TOGGLE_SIZE_MODIFIERS = {\n  sm: 'd-toggle--small',\n  md: '',\n};\n\nexport const TOGGLE_CHECKED_VALUES = [false, true, 'mixed'];\n\nexport default {\n  TOGGLE_SIZE_MODIFIERS,\n  TOGGLE_CHECKED_VALUES,\n};\n"],"mappings":";AAAA,IAAa,IAAwB;CACnC,IAAI;CACJ,IAAI;CACL,EAEY,IAAwB;CAAC;CAAO;CAAM;CAAQ,EAE3D,IAAe;CACb;CACA;CACD"}

package/dist/lib/toggle/toggle.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`./toggleconstants.cjs`);let r=require(`vue`);var i={compatConfig:{MODE:3},name:`DtToggle`,inheritAttrs:!1,props:{id:{type:String,default(){return e.getUniqueString()}},disabled:{type:Boolean,default:!1},modelValue:{type:[Boolean,String],default:!1,validator:e=>n.TOGGLE_CHECKED_VALUES.includes(e)},toggleOnClick:{type:Boolean,default:!0},size:{type:[String,Number],default:300,validator:e=>Object.keys(n.TOGGLE_SIZE_MODIFIERS).includes(String(e))},showLabel:{type:Boolean,default:!0},showIcon:{type:Boolean,default:!0},labelClass:{type:[String,Array,Object],default:``},labelChildProps:{type:Object,default:()=>({})}},emits:[`update:modelValue`],data(){return{internalChecked:this.modelValue,hasSlotContent:e.hasSlotContent}},computed:{inputListeners(){return{...e.removeClassStyleAttrs(this.$attrs),onClick:()=>this.toggleCheckedValue()}},isIndeterminate(){return this.internalChecked===`mixed`},toggleRole(){return this.isIndeterminate?`checkbox`:`switch`},toggleClasses(){return[`d-toggle`,n.TOGGLE_SIZE_MODIFIERS[String(this.size)],{"d-toggle--checked":this.internalChecked===!0,"d-toggle--disabled":this.disabled,"d-toggle--indeterminate":this.isIndeterminate}]}},watch:{modelValue(e){this.internalChecked=e}},mounted(){this.runValidations()},methods:{toggleCheckedValue(){this.$emit(`update:modelValue`,!this.internalChecked),this.toggleOnClick&&(this.internalChecked=!this.internalChecked)},hasSlotLabel(){return!!this.$slots.default},runValidations(){!(this.showLabel&&this.hasSlotLabel())&&!this.$attrs[`aria-label`]&&console.info(`[Dialtone] A label is required for accessibility. Provide a label and use show-label="false" to hide it visually.`)}}},a=[`for`],o=[`id`,`role`,`aria-checked`,`disabled`,`aria-disabled`],s={key:0,class:`d-toggle__inner`};function c(e,t,n,i,c,l){return(0,r.openBlock)(),(0,r.createElementBlock)(`div`,{class:(0,r.normalizeClass)([`d-toggle-wrapper`,e.$attrs.class]),style:(0,r.normalizeStyle)(e.$attrs.style)},[n.showLabel&&c.hasSlotContent(e.$slots.default)?((0,r.openBlock)(),(0,r.createElementBlock)(`label`,(0,r.mergeProps)({key:0,class:n.labelClass,for:n.id},n.labelChildProps,{"data-qa":`toggle-label`}),[(0,r.renderSlot)(e.$slots,`default`)],16,a)):(0,r.createCommentVNode)(``,!0),(0,r.createElementVNode)(`button`,(0,r.mergeProps)({id:n.id,role:l.toggleRole,type:`button`,"aria-checked":c.internalChecked.toString(),disabled:n.disabled,"aria-disabled":n.disabled.toString(),class:l.toggleClasses},l.inputListeners),[n.showIcon?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,s)):(0,r.createCommentVNode)(``,!0)],16,o)],6)}var l=t.t(i,[[`render`,c]]);exports.default=l;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`./toggle-constants.cjs`);let r=require(`vue`);var i={compatConfig:{MODE:3},name:`DtToggle`,inheritAttrs:!1,props:{id:{type:String,default(){return e.getUniqueString()}},disabled:{type:Boolean,default:!1},modelValue:{type:[Boolean,String],default:!1,validator:e=>n.TOGGLE_CHECKED_VALUES.includes(e)},toggleOnClick:{type:Boolean,default:!0},size:{type:String,default:`md`,validator:e=>Object.keys(n.TOGGLE_SIZE_MODIFIERS).includes(e)},showIcon:{type:Boolean,default:!0},labelClass:{type:[String,Array,Object],default:``},wrapperClass:{type:[String,Array,Object],default:void 0},labelChildProps:{type:Object,default:()=>({})}},emits:[`change`,`update:modelValue`],data(){return{internalChecked:this.modelValue,hasSlotContent:e.hasSlotContent}},computed:{inputListeners(){return{...e.removeClassStyleAttrs(this.$attrs),onClick:()=>this.toggleCheckedValue()}},isIndeterminate(){return this.internalChecked===`mixed`},toggleRole(){return this.isIndeterminate?`checkbox`:`switch`},toggleClasses(){return[`d-toggle`,n.TOGGLE_SIZE_MODIFIERS[this.size],{"d-toggle--checked":this.internalChecked===!0,"d-toggle--disabled":this.disabled,"d-toggle--indeterminate":this.isIndeterminate}]}},watch:{modelValue(e){this.internalChecked=e}},mounted(){this.runValidations()},methods:{addClassStyleAttrs:e.addClassStyleAttrs,toggleCheckedValue(){this.$emit(`update:modelValue`,!this.internalChecked),this.$emit(`change`,!this.internalChecked),this.toggleOnClick&&(this.internalChecked=!this.internalChecked)},hasSlotLabel(){return!!this.$slots.default},runValidations(){this.validateInputLabels(this.hasSlotLabel(),this.$attrs[`aria-label`])},validateInputLabels(e,t){!e&&!t&&(0,r.warn)(`You must provide an aria-label when there is no label passed`,this)}}},a=[`for`],o=[`id`,`role`,`aria-checked`,`disabled`,`aria-disabled`],s={key:0,class:`d-toggle__inner`};function c(e,t,n,i,c,l){return(0,r.openBlock)(),(0,r.createElementBlock)(`div`,(0,r.mergeProps)({class:[`d-toggle-wrapper`,n.wrapperClass]},l.addClassStyleAttrs(e.$attrs)),[c.hasSlotContent(e.$slots.default)?((0,r.openBlock)(),(0,r.createElementBlock)(`label`,(0,r.mergeProps)({key:0,class:n.labelClass,for:n.id},n.labelChildProps,{"data-qa":`toggle-label`}),[(0,r.renderSlot)(e.$slots,`default`)],16,a)):(0,r.createCommentVNode)(``,!0),(0,r.createElementVNode)(`button`,(0,r.mergeProps)({id:n.id,role:l.toggleRole,type:`button`,"aria-checked":c.internalChecked.toString(),disabled:n.disabled,"aria-disabled":n.disabled.toString(),class:l.toggleClasses},l.inputListeners),[n.showIcon?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,s)):(0,r.createCommentVNode)(``,!0)],16,o)],16)}var l=t.t(i,[[`render`,c]]);exports.default=l;
 //# sourceMappingURL=toggle.cjs.map

package/dist/lib/toggle/toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.cjs","names":[],"sources":["../../../components/Toggle/Toggle.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"['d-toggle-wrapper', $attrs.class]\"\n    :style=\"$attrs.style\"\n  >\n    <label\n      v-if=\"showLabel && hasSlotContent($slots.default)\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport { getUniqueString, hasSlotContent, removeClassStyleAttrs } from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/Toggle/ToggleConstants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @values true, false, 'mixed'\n     */\n    modelValue: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values 200, 300\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(String(s)),\n    },\n\n    /**\n     * Determines visibility of toggle label.\n     * @values true, false\n     */\n    showLabel: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event update:modelValue\n     * @type {Boolean}\n     */\n    'update:modelValue',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.modelValue,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...removeClassStyleAttrs(this.$attrs),\n        onClick: () => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[String(this.size)],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    modelValue (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('update:modelValue', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      const hasVisibleLabel = this.showLabel && this.hasSlotLabel();\n      if (!hasVisibleLabel && !this.$attrs['aria-label']) {\n        console.info(\n          '[Dialtone] A label is required for accessibility. Provide a label and use show-label=\"false\" to hide it visually.',\n        );\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"qSAyCA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CAEzB,KAAM,WAEN,aAAc,GAEd,MAAO,CAKL,GAAI,CACF,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,iBAAiB,EACtC,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,WAAY,CACV,KAAM,CAAC,QAAS,OAAO,CACvB,QAAS,GACT,UAAY,GAAM,EAAA,sBAAsB,SAAS,EAAE,CACpD,CAOD,cAAe,CACb,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAY,GAAM,OAAO,KAAK,EAAA,sBAAsB,CAAC,SAAS,OAAO,EAAE,CAAC,CACzE,CAMD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAKD,WAAY,CACV,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,gBAAiB,CACf,KAAM,OACN,aAAgB,EAAE,EACnB,CACF,CAED,MAAO,CAOL,oBACD,CAED,MAAQ,CACN,MAAO,CACL,gBAAiB,KAAK,WACtB,eAAA,EAAA,eACD,EAGH,SAAU,CACR,gBAAkB,CAChB,MAAO,CACL,GAAG,EAAA,sBAAsB,KAAK,OAAO,CACrC,YAAe,KAAK,oBAAoB,CACzC,EAGH,iBAAmB,CACjB,OAAO,KAAK,kBAAoB,SAGlC,YAAc,CACZ,OAAO,KAAK,gBAAkB,WAAa,UAG7C,eAAiB,CACf,MAAO,CACL,WACA,EAAA,sBAAsB,OAAO,KAAK,KAAK,EACvC,CACE,oBAAqB,KAAK,kBAAoB,GAC9C,qBAAsB,KAAK,SAC3B,0BAA2B,KAAK,gBACjC,CACF,EAEJ,CAED,MAAO,CACL,WAAY,EAAY,CACtB,KAAK,gBAAkB,GAE1B,CAED,SAAW,CACT,KAAK,gBAAgB,EAGvB,QAAS,CACP,oBAAsB,CACpB,KAAK,MAAM,oBAAqB,CAAC,KAAK,gBAAgB,CAElD,KAAK,gBACP,KAAK,gBAAkB,CAAC,KAAK,kBAIjC,cAAgB,CACd,MAAO,CAAC,CAAE,KAAK,OAAO,SAGxB,gBAAkB,CAEZ,EADoB,KAAK,WAAa,KAAK,cAAc,GACrC,CAAC,KAAK,OAAO,eACnC,QAAQ,KACN,oHACD,EAGN,CACF,8EAvLO,MAAM,4FAGN,MAAA,CA5BH,OAAA,EAAA,EAAA,gBAAK,CAAA,mBAAuB,EAAA,OAAO,MAAK,CAAA,CACxC,OAAA,EAAA,EAAA,gBAAO,EAAA,OAAO,MAAK,GAGZ,EAAA,WAAa,EAAA,eAAe,EAAA,OAAO,QAAO,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQ1C,SAAA,EAAA,EAAA,YAAA,OAPL,MAAO,EAAA,WACP,IAAK,EAAA,IACE,EAAA,gBAAe,CACvB,UAAQ,eAAc,CAAA,CAAA,EAAA,EAAA,EAAA,YAGd,EAAA,OAAA,UAAA,CAAA,CAAA,GAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,EAAA,EAAA,EAAA,oBAgBD,UAAA,EAAA,EAAA,YAAA,CAbN,GAAI,EAAA,GACJ,KAAM,EAAA,WACP,KAAK,SACJ,eAAc,EAAA,gBAAgB,UAAQ,CACtC,SAAU,EAAA,SACV,gBAAe,EAAA,SAAS,UAAQ,CAChC,MAAO,EAAA,eACA,EAAA,eAAc,CAAA,CAGd,EAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEN,OAHF,EAGE,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,GAAA,EAAA,CAAA,CAAA,EAAA"}
+{"version":3,"file":"toggle.cjs","names":[],"sources":["../../../components/toggle/toggle.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"['d-toggle-wrapper', wrapperClass]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <label\n      v-if=\"hasSlotContent($slots.default)\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { getUniqueString, hasSlotContent, removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/toggle/toggle_constants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @model modelValue\n     * @values true, false, 'mixed'\n     */\n    modelValue: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional styling for the wrapper element\n     */\n    wrapperClass: {\n      type: [String, Array, Object],\n      default: undefined,\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Toggle change event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'change',\n\n    /**\n     * v-model event event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'update:modelValue',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.modelValue,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...removeClassStyleAttrs(this.$attrs),\n        onClick: () => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[this.size],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    modelValue (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    addClassStyleAttrs,\n    toggleCheckedValue () {\n      this.$emit('update:modelValue', !this.internalChecked);\n      this.$emit('change', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasSlotLabel(), this.$attrs['aria-label']);\n    },\n\n    validateInputLabels (hasLabel, ariaLabel) {\n      if (!hasLabel && !ariaLabel) {\n        warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/toggle/toggle.js

@@ -1,8 +1,8 @@
-import { getUniqueString as e, hasSlotContent as t, removeClassStyleAttrs as n } from "../../common/utils/index.js";
-import { t as r } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { TOGGLE_CHECKED_VALUES as i, TOGGLE_SIZE_MODIFIERS as a } from "./toggleconstants.js";
-import { createCommentVNode as o, createElementBlock as s, createElementVNode as c, mergeProps as l, normalizeClass as u, normalizeStyle as d, openBlock as f, renderSlot as p } from "vue";
-//#region components/Toggle/Toggle.vue
+import { addClassStyleAttrs as e, getUniqueString as t, hasSlotContent as n, removeClassStyleAttrs as r } from "../../common/utils/index.js";
+import { t as i } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { TOGGLE_CHECKED_VALUES as a, TOGGLE_SIZE_MODIFIERS as o } from "./toggle-constants.js";
+import { createCommentVNode as s, createElementBlock as c, createElementVNode as l, mergeProps as u, openBlock as d, renderSlot as f, warn as p } from "vue";
+//#region components/toggle/toggle.vue
 var m = {
 	compatConfig: { MODE: 3 },
 	name: "DtToggle",
@@ -11,7 +11,7 @@ var m = {
 		id: {
 			type: String,
 			default() {
-				return e();
+				return t();
 			}
 		},
 		disabled: {
@@ -21,20 +21,16 @@ var m = {
 		modelValue: {
 			type: [Boolean, String],
 			default: !1,
-			validator: (e) => i.includes(e)
+			validator: (e) => a.includes(e)
 		},
 		toggleOnClick: {
 			type: Boolean,
 			default: !0
 		},
 		size: {
-			type: [String, Number],
-			default: 300,
-			validator: (e) => Object.keys(a).includes(String(e))
-		},
-		showLabel: {
-			type: Boolean,
-			default: !0
+			type: String,
+			default: "md",
+			validator: (e) => Object.keys(o).includes(e)
 		},
 		showIcon: {
 			type: Boolean,
@@ -48,22 +44,30 @@ var m = {
 			],
 			default: ""
 		},
+		wrapperClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: void 0
+		},
 		labelChildProps: {
 			type: Object,
 			default: () => ({})
 		}
 	},
-	emits: ["update:modelValue"],
+	emits: ["change", "update:modelValue"],
 	data() {
 		return {
 			internalChecked: this.modelValue,
-			hasSlotContent: t
+			hasSlotContent: n
 		};
 	},
 	computed: {
 		inputListeners() {
 			return {
-				...n(this.$attrs),
+				...r(this.$attrs),
 				onClick: () => this.toggleCheckedValue()
 			};
 		},
@@ -76,7 +80,7 @@ var m = {
 		toggleClasses() {
 			return [
 				"d-toggle",
-				a[String(this.size)],
+				o[this.size],
 				{
 					"d-toggle--checked": this.internalChecked === !0,
 					"d-toggle--disabled": this.disabled,
@@ -92,14 +96,18 @@ var m = {
 		this.runValidations();
 	},
 	methods: {
+		addClassStyleAttrs: e,
 		toggleCheckedValue() {
-			this.$emit("update:modelValue", !this.internalChecked), this.toggleOnClick && (this.internalChecked = !this.internalChecked);
+			this.$emit("update:modelValue", !this.internalChecked), this.$emit("change", !this.internalChecked), this.toggleOnClick && (this.internalChecked = !this.internalChecked);
 		},
 		hasSlotLabel() {
 			return !!this.$slots.default;
 		},
 		runValidations() {
-			!(this.showLabel && this.hasSlotLabel()) && !this.$attrs["aria-label"] && console.info("[Dialtone] A label is required for accessibility. Provide a label and use show-label=\"false\" to hide it visually.");
+			this.validateInputLabels(this.hasSlotLabel(), this.$attrs["aria-label"]);
+		},
+		validateInputLabels(e, t) {
+			!e && !t && p("You must provide an aria-label when there is no label passed", this);
 		}
 	}
 }, h = ["for"], g = [
@@ -113,14 +121,11 @@ var m = {
 	class: "d-toggle__inner"
 };
 function v(e, t, n, r, i, a) {
-	return f(), s("div", {
-		class: u(["d-toggle-wrapper", e.$attrs.class]),
-		style: d(e.$attrs.style)
-	}, [n.showLabel && i.hasSlotContent(e.$slots.default) ? (f(), s("label", l({
+	return d(), c("div", u({ class: ["d-toggle-wrapper", n.wrapperClass] }, a.addClassStyleAttrs(e.$attrs)), [i.hasSlotContent(e.$slots.default) ? (d(), c("label", u({
 		key: 0,
 		class: n.labelClass,
 		for: n.id
-	}, n.labelChildProps, { "data-qa": "toggle-label" }), [p(e.$slots, "default")], 16, h)) : o("", !0), c("button", l({
+	}, n.labelChildProps, { "data-qa": "toggle-label" }), [f(e.$slots, "default")], 16, h)) : s("", !0), l("button", u({
 		id: n.id,
 		role: a.toggleRole,
 		type: "button",
@@ -128,9 +133,9 @@ function v(e, t, n, r, i, a) {
 		disabled: n.disabled,
 		"aria-disabled": n.disabled.toString(),
 		class: a.toggleClasses
-	}, a.inputListeners), [n.showIcon ? (f(), s("span", _)) : o("", !0)], 16, g)], 6);
+	}, a.inputListeners), [n.showIcon ? (d(), c("span", _)) : s("", !0)], 16, g)], 16);
 }
-var y = /* @__PURE__ */ r(m, [["render", v]]);
+var y = /* @__PURE__ */ i(m, [["render", v]]);
 //#endregion
 export { y as default };
 

package/dist/lib/toggle/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","names":[],"sources":["../../../components/Toggle/Toggle.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"['d-toggle-wrapper', $attrs.class]\"\n    :style=\"$attrs.style\"\n  >\n    <label\n      v-if=\"showLabel && hasSlotContent($slots.default)\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport { getUniqueString, hasSlotContent, removeClassStyleAttrs } from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/Toggle/ToggleConstants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @values true, false, 'mixed'\n     */\n    modelValue: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values 200, 300\n     */\n    size: {\n      type: [String, Number],\n      default: 300,\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(String(s)),\n    },\n\n    /**\n     * Determines visibility of toggle label.\n     * @values true, false\n     */\n    showLabel: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     *\n     * @event update:modelValue\n     * @type {Boolean}\n     */\n    'update:modelValue',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.modelValue,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...removeClassStyleAttrs(this.$attrs),\n        onClick: () => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[String(this.size)],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    modelValue (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    toggleCheckedValue () {\n      this.$emit('update:modelValue', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      const hasVisibleLabel = this.showLabel && this.hasSlotLabel();\n      if (!hasVisibleLabel && !this.$attrs['aria-label']) {\n        console.info(\n          '[Dialtone] A label is required for accessibility. Provide a label and use show-label=\"false\" to hide it visually.',\n        );\n      }\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;AAyCA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CAEzB,MAAM;CAEN,cAAc;CAEd,OAAO;EAKL,IAAI;GACF,MAAM;GACN,UAAW;AAAE,WAAO,GAAiB;;GACtC;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,YAAY;GACV,MAAM,CAAC,SAAS,OAAO;GACvB,SAAS;GACT,YAAY,MAAM,EAAsB,SAAS,EAAE;GACpD;EAOD,eAAe;GACb,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM,CAAC,QAAQ,OAAO;GACtB,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAsB,CAAC,SAAS,OAAO,EAAE,CAAC;GACzE;EAMD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,YAAY;GACV,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,iBAAiB;GACf,MAAM;GACN,gBAAgB,EAAE;GACnB;EACF;CAED,OAAO,CAOL,oBACD;CAED,OAAQ;AACN,SAAO;GACL,iBAAiB,KAAK;GACtB;GACD;;CAGH,UAAU;EACR,iBAAkB;AAChB,UAAO;IACL,GAAG,EAAsB,KAAK,OAAO;IACrC,eAAe,KAAK,oBAAoB;IACzC;;EAGH,kBAAmB;AACjB,UAAO,KAAK,oBAAoB;;EAGlC,aAAc;AACZ,UAAO,KAAK,kBAAkB,aAAa;;EAG7C,gBAAiB;AACf,UAAO;IACL;IACA,EAAsB,OAAO,KAAK,KAAK;IACvC;KACE,qBAAqB,KAAK,oBAAoB;KAC9C,sBAAsB,KAAK;KAC3B,2BAA2B,KAAK;KACjC;IACF;;EAEJ;CAED,OAAO,EACL,WAAY,GAAY;AACtB,OAAK,kBAAkB;IAE1B;CAED,UAAW;AACT,OAAK,gBAAgB;;CAGvB,SAAS;EACP,qBAAsB;AAGpB,GAFA,KAAK,MAAM,qBAAqB,CAAC,KAAK,gBAAgB,EAElD,KAAK,kBACP,KAAK,kBAAkB,CAAC,KAAK;;EAIjC,eAAgB;AACd,UAAO,CAAC,CAAE,KAAK,OAAO;;EAGxB,iBAAkB;AAEhB,GAAI,EADoB,KAAK,aAAa,KAAK,cAAc,KACrC,CAAC,KAAK,OAAO,iBACnC,QAAQ,KACN,sHACD;;EAGN;CACF;;;;;;;;CAvLO,OAAM;;;aA1BZ,EA6BM,OAAA;EA5BH,OAAK,EAAA,CAAA,oBAAuB,EAAA,OAAO,MAAK,CAAA;EACxC,OAAK,EAAE,EAAA,OAAO,MAAK;KAGZ,EAAA,aAAa,EAAA,eAAe,EAAA,OAAO,QAAO,IAAA,GAAA,EADlD,EASQ,SATR,EASQ;;EAPL,OAAO,EAAA;EACP,KAAK,EAAA;IACE,EAAA,iBAAe,EACvB,WAAQ,gBAAc,CAAA,EAAA,CAGtB,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAEV,EAcS,UAdT,EAcS;EAbN,IAAI,EAAA;EACJ,MAAM,EAAA;EACP,MAAK;EACJ,gBAAc,EAAA,gBAAgB,UAAQ;EACtC,UAAU,EAAA;EACV,iBAAe,EAAA,SAAS,UAAQ;EAChC,OAAO,EAAA;IACA,EAAA,eAAc,EAAA,CAGd,EAAA,YAAA,GAAA,EADR,EAGE,QAHF,EAGE,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,EAAA"}
+{"version":3,"file":"toggle.js","names":[],"sources":["../../../components/toggle/toggle.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"['d-toggle-wrapper', wrapperClass]\"\n    v-bind=\"addClassStyleAttrs($attrs)\"\n  >\n    <label\n      v-if=\"hasSlotContent($slots.default)\"\n      :class=\"labelClass\"\n      :for=\"id\"\n      v-bind=\"labelChildProps\"\n      data-qa=\"toggle-label\"\n    >\n      <!-- @slot Slot for the main content -->\n      <slot />\n    </label>\n    <button\n      :id=\"id\"\n      :role=\"toggleRole\"\n      type=\"button\"\n      :aria-checked=\"internalChecked.toString()\"\n      :disabled=\"disabled\"\n      :aria-disabled=\"disabled.toString()\"\n      :class=\"toggleClasses\"\n      v-bind=\"inputListeners\"\n    >\n      <span\n        v-if=\"showIcon\"\n        class=\"d-toggle__inner\"\n      />\n    </button>\n  </div>\n</template>\n\n<script>\nimport { warn } from 'vue';\nimport { getUniqueString, hasSlotContent, removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';\nimport { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/toggle/toggle_constants';\n\n/**\n * A toggle (or \"switch\") is a button control element that allows the user to make a binary (on/off) selection.\n * @see https://dialtone.dialpad.com/components/toggle.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n\n  name: 'DtToggle',\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * The id of the toggle\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Disables the toggle interactions\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Value of the toggle\n     * @model modelValue\n     * @values true, false, 'mixed'\n     */\n    modelValue: {\n      type: [Boolean, String],\n      default: false,\n      validator: (v) => TOGGLE_CHECKED_VALUES.includes(v),\n    },\n\n    /**\n     * Whether the component toggles on click. If you set this to false it means you will handle the toggling manually\n     * via the checked prop or v-model. Change events will still be triggered.\n     * @values true, false\n     */\n    toggleOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The size of the toggle.\n     * @values sm, md\n     */\n    size: {\n      type: String,\n      default: 'md',\n      validator: (s) => Object.keys(TOGGLE_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Shows the icon\n     * @values true, false\n     */\n    showIcon: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Used to customize the label container\n     */\n    labelClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional styling for the wrapper element\n     */\n    wrapperClass: {\n      type: [String, Array, Object],\n      default: undefined,\n    },\n\n    /**\n     * A set of props that are passed into the label container\n     */\n    labelChildProps: {\n      type: Object,\n      default: () => ({}),\n    },\n  },\n\n  emits: [\n    /**\n     * Toggle change event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'change',\n\n    /**\n     * v-model event event\n     *\n     * @event change\n     * @type {Boolean}\n     * @model change\n     */\n    'update:modelValue',\n  ],\n\n  data () {\n    return {\n      internalChecked: this.modelValue,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputListeners () {\n      return {\n        ...removeClassStyleAttrs(this.$attrs),\n        onClick: () => this.toggleCheckedValue(),\n      };\n    },\n\n    isIndeterminate () {\n      return this.internalChecked === 'mixed';\n    },\n\n    toggleRole () {\n      return this.isIndeterminate ? 'checkbox' : 'switch';\n    },\n\n    toggleClasses () {\n      return [\n        'd-toggle',\n        TOGGLE_SIZE_MODIFIERS[this.size],\n        {\n          'd-toggle--checked': this.internalChecked === true,\n          'd-toggle--disabled': this.disabled,\n          'd-toggle--indeterminate': this.isIndeterminate,\n        },\n      ];\n    },\n  },\n\n  watch: {\n    modelValue (newChecked) {\n      this.internalChecked = newChecked;\n    },\n  },\n\n  mounted () {\n    this.runValidations();\n  },\n\n  methods: {\n    addClassStyleAttrs,\n    toggleCheckedValue () {\n      this.$emit('update:modelValue', !this.internalChecked);\n      this.$emit('change', !this.internalChecked);\n\n      if (this.toggleOnClick) {\n        this.internalChecked = !this.internalChecked;\n      }\n    },\n\n    hasSlotLabel () {\n      return !!(this.$slots.default);\n    },\n\n    runValidations () {\n      this.validateInputLabels(this.hasSlotLabel(), this.$attrs['aria-label']);\n    },\n\n    validateInputLabels (hasLabel, ariaLabel) {\n      if (!hasLabel && !ariaLabel) {\n        warn(\n          'You must provide an aria-label when there is no label passed',\n          this,\n        );\n      }\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;AA0CA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CAEzB,MAAM;CAEN,cAAc;CAEd,OAAO;EAKL,IAAI;GACF,MAAM;GACN,UAAW;AAAE,WAAO,GAAiB;;GACtC;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAOD,YAAY;GACV,MAAM,CAAC,SAAS,OAAO;GACvB,SAAS;GACT,YAAY,MAAM,EAAsB,SAAS,EAAE;GACpD;EAOD,eAAe;GACb,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAsB,CAAC,SAAS,EAAE;GACjE;EAMD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,YAAY;GACV,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,cAAc;GACZ,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS,KAAA;GACV;EAKD,iBAAiB;GACf,MAAM;GACN,gBAAgB,EAAE;GACnB;EACF;CAED,OAAO,CAQL,UASA,oBACD;CAED,OAAQ;AACN,SAAO;GACL,iBAAiB,KAAK;GACtB;GACD;;CAGH,UAAU;EACR,iBAAkB;AAChB,UAAO;IACL,GAAG,EAAsB,KAAK,OAAO;IACrC,eAAe,KAAK,oBAAoB;IACzC;;EAGH,kBAAmB;AACjB,UAAO,KAAK,oBAAoB;;EAGlC,aAAc;AACZ,UAAO,KAAK,kBAAkB,aAAa;;EAG7C,gBAAiB;AACf,UAAO;IACL;IACA,EAAsB,KAAK;IAC3B;KACE,qBAAqB,KAAK,oBAAoB;KAC9C,sBAAsB,KAAK;KAC3B,2BAA2B,KAAK;KACjC;IACF;;EAEJ;CAED,OAAO,EACL,WAAY,GAAY;AACtB,OAAK,kBAAkB;IAE1B;CAED,UAAW;AACT,OAAK,gBAAgB;;CAGvB,SAAS;EACP;EACA,qBAAsB;AAIpB,GAHA,KAAK,MAAM,qBAAqB,CAAC,KAAK,gBAAgB,EACtD,KAAK,MAAM,UAAU,CAAC,KAAK,gBAAgB,EAEvC,KAAK,kBACP,KAAK,kBAAkB,CAAC,KAAK;;EAIjC,eAAgB;AACd,UAAO,CAAC,CAAE,KAAK,OAAO;;EAGxB,iBAAkB;AAChB,QAAK,oBAAoB,KAAK,cAAc,EAAE,KAAK,OAAO,cAAc;;EAG1E,oBAAqB,GAAU,GAAW;AACxC,GAAI,CAAC,KAAY,CAAC,KAChB,EACE,gEACA,KACD;;EAGN;CACF;;;;;;;;CAxMO,OAAM;;;aA1BZ,EA6BM,OA7BN,EA6BM,EA5BH,OAAK,CAAA,oBAAuB,EAAA,aAAY,EAAA,EACjC,EAAA,mBAAmB,EAAA,OAAM,CAAA,EAAA,CAGzB,EAAA,eAAe,EAAA,OAAO,QAAO,IAAA,GAAA,EADrC,EASQ,SATR,EASQ;;EAPL,OAAO,EAAA;EACP,KAAK,EAAA;IACE,EAAA,iBAAe,EACvB,WAAQ,gBAAc,CAAA,EAAA,CAGtB,EAAQ,EAAA,QAAA,UAAA,CAAA,EAAA,IAAA,EAAA,IAAA,EAAA,IAAA,GAAA,EAEV,EAcS,UAdT,EAcS;EAbN,IAAI,EAAA;EACJ,MAAM,EAAA;EACP,MAAK;EACJ,gBAAc,EAAA,gBAAgB,UAAQ;EACtC,UAAU,EAAA;EACV,iBAAe,EAAA,SAAS,UAAQ;EAChC,OAAO,EAAA;IACA,EAAA,eAAc,EAAA,CAGd,EAAA,YAAA,GAAA,EADR,EAGE,QAHF,EAGE,IAAA,EAAA,IAAA,GAAA,CAAA,EAAA,IAAA,EAAA,CAAA,EAAA,GAAA"}

package/dist/lib/tooltip/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./tooltipconstants.cjs`),t=require(`./tooltip.cjs`);exports.DtTooltip=t.default,exports.TOOLTIP_DELAY_MS=e.TOOLTIP_DELAY_MS,exports.TOOLTIP_DIRECTIONS=e.TOOLTIP_DIRECTIONS,exports.TOOLTIP_HIDE_ON_CLICK_VARIANTS=e.TOOLTIP_HIDE_ON_CLICK_VARIANTS,exports.TOOLTIP_KIND_MODIFIERS=e.TOOLTIP_KIND_MODIFIERS,exports.TOOLTIP_STICKY_VALUES=e.TOOLTIP_STICKY_VALUES;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./tooltip-constants.cjs`),t=require(`./tooltip.cjs`);exports.DtTooltip=t.default,exports.TOOLTIP_DELAY_MS=e.TOOLTIP_DELAY_MS,exports.TOOLTIP_DIRECTIONS=e.TOOLTIP_DIRECTIONS,exports.TOOLTIP_HIDE_ON_CLICK_VARIANTS=e.TOOLTIP_HIDE_ON_CLICK_VARIANTS,exports.TOOLTIP_KIND_MODIFIERS=e.TOOLTIP_KIND_MODIFIERS,exports.TOOLTIP_STICKY_VALUES=e.TOOLTIP_STICKY_VALUES;

package/dist/lib/tooltip/index.js

@@ -1,3 +1,3 @@
-import { TOOLTIP_DELAY_MS as e, TOOLTIP_DIRECTIONS as t, TOOLTIP_HIDE_ON_CLICK_VARIANTS as n, TOOLTIP_KIND_MODIFIERS as r, TOOLTIP_STICKY_VALUES as i } from "./tooltipconstants.js";
+import { TOOLTIP_DELAY_MS as e, TOOLTIP_DIRECTIONS as t, TOOLTIP_HIDE_ON_CLICK_VARIANTS as n, TOOLTIP_KIND_MODIFIERS as r, TOOLTIP_STICKY_VALUES as i } from "./tooltip-constants.js";
 import a from "./tooltip.js";
 export { a as DtTooltip, e as TOOLTIP_DELAY_MS, t as TOOLTIP_DIRECTIONS, n as TOOLTIP_HIDE_ON_CLICK_VARIANTS, r as TOOLTIP_KIND_MODIFIERS, i as TOOLTIP_STICKY_VALUES };

package/dist/lib/tooltip/tooltip-constants.cjs

@@ -0,0 +1,2 @@
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../popover/tippy-utils.cjs`);var t=[...e.BASE_TIPPY_DIRECTIONS],n=300,r={hover:`d-tooltip--hover`,show:`d-tooltip--show`,inverted:`d-tooltip--inverted`,hide:`d-tooltip--hide`},i=[...e.TIPPY_STICKY_VALUES],a=[!0,!1,`toggle`],o={TOOLTIP_DIRECTIONS:t,TOOLTIP_DELAY_MS:300,TOOLTIP_KIND_MODIFIERS:r,TOOLTIP_STICKY_VALUES:i,TOOLTIP_HIDE_ON_CLICK_VARIANTS:a};exports.TOOLTIP_DELAY_MS=n,exports.TOOLTIP_DIRECTIONS=t,exports.TOOLTIP_HIDE_ON_CLICK_VARIANTS=a,exports.TOOLTIP_KIND_MODIFIERS=r,exports.TOOLTIP_STICKY_VALUES=i,exports.default=o;
+//# sourceMappingURL=tooltip-constants.cjs.map

package/dist/lib/tooltip/tooltip-constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-constants.cjs","names":["BASE_TIPPY_DIRECTIONS","TIPPY_STICKY_VALUES"],"sources":["../../../components/tooltip/tooltip_constants.js"],"sourcesContent":["/*\n* Tippy directions - https://atomiks.github.io/tippyjs/v6/all-props/#placement\n* */\nimport { BASE_TIPPY_DIRECTIONS, TIPPY_STICKY_VALUES } from '@/components/popover/tippy_utils';\n\nexport const TOOLTIP_DIRECTIONS = [\n  ...BASE_TIPPY_DIRECTIONS,\n];\n\nexport const TOOLTIP_DELAY_MS = 300;\n\nexport const TOOLTIP_KIND_MODIFIERS = {\n  hover: `d-tooltip--hover`,\n  show: `d-tooltip--show`,\n  inverted: `d-tooltip--inverted`,\n  hide: `d-tooltip--hide`,\n};\n\nexport const TOOLTIP_STICKY_VALUES = [\n  ...TIPPY_STICKY_VALUES,\n];\n\nexport const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];\n\nexport default {\n  TOOLTIP_DIRECTIONS,\n  TOOLTIP_DELAY_MS,\n  TOOLTIP_KIND_MODIFIERS,\n  TOOLTIP_STICKY_VALUES,\n  TOOLTIP_HIDE_ON_CLICK_VARIANTS,\n};\n"],"mappings":"6IAKA,IAAa,EAAqB,CAChC,GAAGA,EAAAA,sBACJ,CAEY,EAAmB,IAEnB,EAAyB,CACpC,MAAO,mBACP,KAAM,kBACN,SAAU,sBACV,KAAM,kBACP,CAEY,EAAwB,CACnC,GAAGC,EAAAA,oBACJ,CAEY,EAAiC,CAAC,GAAM,GAAO,SAAS,CAErE,EAAe,CACb,qBACA,iBAAA,IACA,yBACA,wBACA,iCACD"}

package/dist/lib/tooltip/tooltip-constants.js

@@ -0,0 +1,22 @@
+import { BASE_TIPPY_DIRECTIONS as e, TIPPY_STICKY_VALUES as t } from "../popover/tippy-utils.js";
+//#region components/tooltip/tooltip_constants.js
+var n = [...e], r = 300, i = {
+	hover: "d-tooltip--hover",
+	show: "d-tooltip--show",
+	inverted: "d-tooltip--inverted",
+	hide: "d-tooltip--hide"
+}, a = [...t], o = [
+	!0,
+	!1,
+	"toggle"
+], s = {
+	TOOLTIP_DIRECTIONS: n,
+	TOOLTIP_DELAY_MS: 300,
+	TOOLTIP_KIND_MODIFIERS: i,
+	TOOLTIP_STICKY_VALUES: a,
+	TOOLTIP_HIDE_ON_CLICK_VARIANTS: o
+};
+//#endregion
+export { r as TOOLTIP_DELAY_MS, n as TOOLTIP_DIRECTIONS, o as TOOLTIP_HIDE_ON_CLICK_VARIANTS, i as TOOLTIP_KIND_MODIFIERS, a as TOOLTIP_STICKY_VALUES, s as default };
+
+//# sourceMappingURL=tooltip-constants.js.map

package/dist/lib/tooltip/tooltip-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip-constants.js","names":[],"sources":["../../../components/tooltip/tooltip_constants.js"],"sourcesContent":["/*\n* Tippy directions - https://atomiks.github.io/tippyjs/v6/all-props/#placement\n* */\nimport { BASE_TIPPY_DIRECTIONS, TIPPY_STICKY_VALUES } from '@/components/popover/tippy_utils';\n\nexport const TOOLTIP_DIRECTIONS = [\n  ...BASE_TIPPY_DIRECTIONS,\n];\n\nexport const TOOLTIP_DELAY_MS = 300;\n\nexport const TOOLTIP_KIND_MODIFIERS = {\n  hover: `d-tooltip--hover`,\n  show: `d-tooltip--show`,\n  inverted: `d-tooltip--inverted`,\n  hide: `d-tooltip--hide`,\n};\n\nexport const TOOLTIP_STICKY_VALUES = [\n  ...TIPPY_STICKY_VALUES,\n];\n\nexport const TOOLTIP_HIDE_ON_CLICK_VARIANTS = [true, false, 'toggle'];\n\nexport default {\n  TOOLTIP_DIRECTIONS,\n  TOOLTIP_DELAY_MS,\n  TOOLTIP_KIND_MODIFIERS,\n  TOOLTIP_STICKY_VALUES,\n  TOOLTIP_HIDE_ON_CLICK_VARIANTS,\n};\n"],"mappings":";;AAKA,IAAa,IAAqB,CAChC,GAAG,EACJ,EAEY,IAAmB,KAEnB,IAAyB;CACpC,OAAO;CACP,MAAM;CACN,UAAU;CACV,MAAM;CACP,EAEY,IAAwB,CACnC,GAAG,EACJ,EAEY,IAAiC;CAAC;CAAM;CAAO;CAAS,EAErE,IAAe;CACb;CACA,kBAAA;CACA;CACA;CACA;CACD"}

package/dist/lib/tooltip/tooltip.cjs

@@ -1,2 +1,5 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../common/mixins/mode.cjs`),r=require(`../popover/tippyutils.cjs`),i=require(`./tooltipconstants.cjs`),a=require(`../popover/popoverconstants.cjs`);let o=require(`vue`);var s={compatConfig:{MODE:3},name:`DtTooltip`,mixins:[n.default],props:{id:{type:String,default(){return e.getUniqueString()}},fallbackPlacements:{type:Array,default:()=>[`auto`]},inverted:{type:Boolean,default:!1},offset:{type:Array,default:()=>[0,12]},placement:{type:String,default:`top`,validator(e){return i.TOOLTIP_DIRECTIONS.includes(e)}},sticky:{type:[Boolean,String],default:!0,validator:e=>i.TOOLTIP_STICKY_VALUES.includes(e)},appendTo:{type:[HTMLElement,String],default:`body`,validator:e=>a.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},contentClass:{type:[String,Object,Array],default:``},anchorClass:{type:[String,Object,Array],default:``},message:{type:String,default:``},enabled:{type:Boolean,default:!0},open:{type:[Boolean,null],default:null},transition:{type:Boolean,default:!0},delay:{type:Boolean,default:!0},theme:{type:String,default:null},externalAnchor:{type:String,default:null},externalAnchorElement:{type:HTMLElement,default:null}},emits:[`shown`,`update:open`],data(){return{TOOLTIP_KIND_MODIFIERS:i.TOOLTIP_KIND_MODIFIERS,hasSlotContent:e.hasSlotContent,tip:null,inTimer:null,internalShow:!1,currentPlacement:this.placement}},computed:{tippyProps(){return{offset:this.offset,delay:this.delay?300:!1,placement:this.placement,sticky:this.sticky,theme:this.inverted?`inverted`:this.theme,animation:this.transition?`fade`:!1,onShown:e=>this.onShow(e,`onShown`),onShow:e=>this.onShow(e,`onShow`),onHidden:this.onHide,popperOptions:r.getPopperOptions({fallbackPlacements:this.fallbackPlacements,hasHideModifierEnabled:!0,onChangePlacement:this.onChangePlacement})}},anchor(){return this.externalAnchorElement?this.externalAnchorElement:this.externalAnchor?document.body.querySelector(this.externalAnchor):r.getAnchor(this.$refs.anchor)}},watch:{tippyProps:{handler:`setProps`,deep:!0},open:{handler:function(e){e!==null&&this.enabled&&(this.internalShow=e)},immediate:!0},internalShow(e){!this.tip||!this.anchor||(e?(this.setProps(),this.tip.show()):this.tip.hide())},sticky(e){this.tip.setProps({sticky:e})}},async mounted(){!this.enabled&&this.open!=null&&(console.warn(`Tooltip: You cannot use both the enabled and open props at the same time.`),console.warn(`The open prop will be ignored.`)),this.tip=r.createTippy(this.anchor,this.initOptions()),(this.externalAnchor||this.externalAnchorElement)&&(await e.flushPromises(),this.addExternalAnchorEventListeners()),e.warnIfUnmounted(e.returnFirstEl(this.$el),this.$options.name)},beforeUnmount(){(this.externalAnchor||this.externalAnchorElement)&&this.removeExternalAnchorEventListeners(),this.anchor?._tippy&&this.tip?.destroy()},methods:{getModeReferenceEl(){return this.anchor},calculateAnchorZindex(){return e.returnFirstEl(this.$el).getRootNode().querySelector(`.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"], .d-modal[open], .d-modal--transparent[open]`)||e.returnFirstEl(this.$el).closest(`.d-zi-drawer`)?651:400},hasVisibleFocus(){return this.anchor.matches(`:focus-visible`)},onEnterAnchor(e){this.enabled&&(this.delay&&this.inTimer===null?this.inTimer=setTimeout(()=>{this.triggerShow(e)},300):this.triggerShow(e))},triggerShow(e){e.type===`focusin`?this.open===null&&this.hasVisibleFocus()&&(this.internalShow=!0):this.open===null&&(this.internalShow=!0)},onLeaveAnchor(e){e.type===`keydown`&&e.code!==`Escape`||(clearTimeout(this.inTimer),this.inTimer=null,this.triggerHide())},triggerHide(){this.open===null&&(this.internalShow=!1)},onChangePlacement(e){this.currentPlacement=e},onHide(){this.tip?.unmount(),this.$emit(`shown`,!1),this.open!==null&&this.$emit(`update:open`,!1)},onShow(e,t){if(!this.tooltipHasContent(e))return!1;this.transition&&t===`onShow`||(this.$emit(`shown`,!0),this.open!==null&&this.$emit(`update:open`,!0))},setProps(){!this.tip||!this.tip.setProps||!this.anchor||this.tip&&this.tip.setProps&&this.tip.setProps({...this.tippyProps,appendTo:this.appendTo===`body`?this.anchor?.getRootNode()?.querySelector(`body`):this.appendTo,zIndex:this.calculateAnchorZindex()})},onMount(){this.setProps()},tooltipHasContent(e){return e.props.content.textContent.trim().length!==0},initOptions(){return{content:this.$refs.content,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>`,duration:180,interactive:!1,trigger:`manual`,hideOnClick:!1,touch:!1,onMount:this.onMount,showOnCreate:this.internalShow,popperOptions:r.getPopperOptions({hasHideModifierEnabled:!0})}},addExternalAnchorEventListeners(){[`focusin`,`mouseenter`].forEach(e=>{this.anchor?.addEventListener(e,e=>this.onEnterAnchor(e))}),[`focusout`,`mouseleave`,`keydown`].forEach(e=>{this.anchor?.addEventListener(e,e=>this.onLeaveAnchor(e))})},removeExternalAnchorEventListeners(){[`focusin`,`mouseenter`].forEach(e=>{this.anchor?.removeEventListener(e,e=>this.onEnterAnchor(e))}),[`focusout`,`mouseleave`,`keydown`].forEach(e=>{this.anchor?.removeEventListener(e,e=>this.onLeaveAnchor(e))})}}},c={"data-qa":`dt-tooltip-container`},l=[`id`];function u(e,t,n,r,i,a){return(0,o.openBlock)(),(0,o.createElementBlock)(`div`,c,[!n.externalAnchor&&!n.externalAnchorElement?((0,o.openBlock)(),(0,o.createElementBlock)(`span`,{key:0,ref:`anchor`,class:(0,o.normalizeClass)(n.anchorClass),"data-qa":`dt-tooltip-anchor`,onFocusin:t[0]||(t[0]=(...e)=>a.onEnterAnchor&&a.onEnterAnchor(...e)),onFocusout:t[1]||(t[1]=(...e)=>a.onLeaveAnchor&&a.onLeaveAnchor(...e)),onMouseenter:t[2]||(t[2]=(...e)=>a.onEnterAnchor&&a.onEnterAnchor(...e)),onMouseleave:t[3]||(t[3]=(...e)=>a.onLeaveAnchor&&a.onLeaveAnchor(...e)),onKeydown:t[4]||(t[4]=(0,o.withKeys)((...e)=>a.onLeaveAnchor&&a.onLeaveAnchor(...e),[`esc`]))},[(0,o.renderSlot)(e.$slots,`anchor`)],34)):(0,o.createCommentVNode)(``,!0),(0,o.createElementVNode)(`div`,(0,o.mergeProps)({id:n.id,ref:`content`,"data-qa":`dt-tooltip`,class:[`d-tooltip`,{[i.TOOLTIP_KIND_MODIFIERS.inverted]:n.inverted},n.contentClass]},e.modeAttrs),[(0,o.renderSlot)(e.$slots,`default`,{},()=>[(0,o.createTextVNode)((0,o.toDisplayString)(n.message),1)])],16,l)])}var d=t.t(s,[[`render`,u]]);exports.default=d;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../popover/tippy-utils.cjs`),r=require(`./tooltip-constants.cjs`),i=require(`../popover/popover-constants.cjs`);let a=require(`vue`);var o={compatConfig:{MODE:3},name:`DtTooltip`,props:{id:{type:String,default(){return e.getUniqueString()}},fallbackPlacements:{type:Array,default:()=>[`auto`]},inverted:{type:Boolean,default:!1},offset:{type:Array,default:()=>[0,12]},placement:{type:String,default:`top`,validator(e){return r.TOOLTIP_DIRECTIONS.includes(e)}},sticky:{type:[Boolean,String],default:!0,validator:e=>r.TOOLTIP_STICKY_VALUES.includes(e)},appendTo:{type:[HTMLElement,String],default:`body`,validator:e=>i.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},contentClass:{type:[String,Object,Array],default:``},message:{type:String,default:``},enabled:{type:Boolean,default:!0},show:{type:Boolean,default:null},transition:{type:Boolean,default:!0},delay:{type:Boolean,default:!0},theme:{type:String,default:null},externalAnchor:{type:String,default:null},externalAnchorElement:{type:HTMLElement,default:null}},emits:[`shown`,`update:show`],data(){return{TOOLTIP_KIND_MODIFIERS:r.TOOLTIP_KIND_MODIFIERS,hasSlotContent:e.hasSlotContent,tip:null,inTimer:null,internalShow:!1,currentPlacement:this.placement}},computed:{tippyProps(){return{offset:this.offset,delay:this.delay?300:!1,placement:this.placement,sticky:this.sticky,theme:this.inverted?`inverted`:this.theme,animation:this.transition?`fade`:!1,onShown:e=>this.onShow(e,`onShown`),onShow:e=>this.onShow(e,`onShow`),onHidden:this.onHide,popperOptions:n.getPopperOptions({fallbackPlacements:this.fallbackPlacements,hasHideModifierEnabled:!0,onChangePlacement:this.onChangePlacement})}},anchor(){return this.externalAnchorElement?this.externalAnchorElement:this.externalAnchor?document.body.querySelector(this.externalAnchor):n.getAnchor(this.$refs.anchor)}},watch:{tippyProps:{handler:`setProps`,deep:!0},show:{handler:function(e){e!==null&&this.enabled&&(this.internalShow=e)},immediate:!0},internalShow(e){!this.tip||!this.anchor||(e?(this.setProps(),this.tip.show()):this.tip.hide())},sticky(e){this.tip.setProps({sticky:e})}},async mounted(){!this.enabled&&this.show!=null&&(console.warn(`Tooltip: You cannot use both the enabled and show props at the same time.`),console.warn(`The show prop will be ignored.`)),this.tip=n.createTippy(this.anchor,this.initOptions()),(this.externalAnchor||this.externalAnchorElement)&&(await e.flushPromises(),this.addExternalAnchorEventListeners()),e.warnIfUnmounted(e.returnFirstEl(this.$el),this.$options.name)},beforeUnmount(){(this.externalAnchor||this.externalAnchorElement)&&this.removeExternalAnchorEventListeners(),this.anchor?._tippy&&this.tip?.destroy()},methods:{calculateAnchorZindex(){return e.returnFirstEl(this.$el).getRootNode().querySelector(`.d-modal[aria-hidden="false"],
+          .d-modal--transparent[aria-hidden="false"],
+          .d-modal:not([aria-hidden]),
+          .d-modal--transparent:not([aria-hidden])`)||e.returnFirstEl(this.$el).closest(`.d-zi-drawer`)?651:400},hasVisibleFocus(){return this.anchor.matches(`:focus-visible`)},onEnterAnchor(e){this.enabled&&(this.delay&&this.inTimer===null?this.inTimer=setTimeout(()=>{this.triggerShow(e)},300):this.triggerShow(e))},triggerShow(e){e.type===`focusin`?this.show===null&&this.hasVisibleFocus()&&(this.internalShow=!0):this.show===null&&(this.internalShow=!0)},onLeaveAnchor(e){e.type===`keydown`&&e.code!==`Escape`||(clearTimeout(this.inTimer),this.inTimer=null,this.triggerHide())},triggerHide(){this.show===null&&(this.internalShow=!1)},onChangePlacement(e){this.currentPlacement=e},onHide(){this.tip?.unmount(),this.$emit(`shown`,!1),this.show!==null&&this.$emit(`update:show`,!1)},onShow(e,t){if(!this.tooltipHasContent(e))return!1;this.transition&&t===`onShow`||(this.$emit(`shown`,!0),this.show!==null&&this.$emit(`update:show`,!0))},setProps(){!this.tip||!this.tip.setProps||!this.anchor||this.tip&&this.tip.setProps&&this.tip.setProps({...this.tippyProps,appendTo:this.appendTo===`body`?this.anchor?.getRootNode()?.querySelector(`body`):this.appendTo,zIndex:this.calculateAnchorZindex()})},onMount(){this.setProps()},tooltipHasContent(e){return e.props.content.textContent.trim().length!==0},initOptions(){return{content:this.$refs.content,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>`,duration:180,interactive:!1,trigger:`manual`,hideOnClick:!1,touch:!1,onMount:this.onMount,showOnCreate:this.internalShow,popperOptions:n.getPopperOptions({hasHideModifierEnabled:!0})}},addExternalAnchorEventListeners(){[`focusin`,`mouseenter`].forEach(e=>{this.anchor?.addEventListener(e,e=>this.onEnterAnchor(e))}),[`focusout`,`mouseleave`,`keydown`].forEach(e=>{this.anchor?.addEventListener(e,e=>this.onLeaveAnchor(e))})},removeExternalAnchorEventListeners(){[`focusin`,`mouseenter`].forEach(e=>{this.anchor?.removeEventListener(e,e=>this.onEnterAnchor(e))}),[`focusout`,`mouseleave`,`keydown`].forEach(e=>{this.anchor?.removeEventListener(e,e=>this.onLeaveAnchor(e))})}}},s={"data-qa":`dt-tooltip-container`},c=[`id`];function l(e,t,n,r,i,o){return(0,a.openBlock)(),(0,a.createElementBlock)(`div`,s,[!n.externalAnchor&&!n.externalAnchorElement?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:0,ref:`anchor`,"data-qa":`dt-tooltip-anchor`,onFocusin:t[0]||(t[0]=(...e)=>o.onEnterAnchor&&o.onEnterAnchor(...e)),onFocusout:t[1]||(t[1]=(...e)=>o.onLeaveAnchor&&o.onLeaveAnchor(...e)),onMouseenter:t[2]||(t[2]=(...e)=>o.onEnterAnchor&&o.onEnterAnchor(...e)),onMouseleave:t[3]||(t[3]=(...e)=>o.onLeaveAnchor&&o.onLeaveAnchor(...e)),onKeydown:t[4]||(t[4]=(0,a.withKeys)((...e)=>o.onLeaveAnchor&&o.onLeaveAnchor(...e),[`esc`]))},[(0,a.renderSlot)(e.$slots,`anchor`)],544)):(0,a.createCommentVNode)(``,!0),(0,a.createElementVNode)(`div`,{id:n.id,ref:`content`,"data-qa":`dt-tooltip`,class:(0,a.normalizeClass)([`d-tooltip`,{[i.TOOLTIP_KIND_MODIFIERS.inverted]:n.inverted},n.contentClass])},[(0,a.renderSlot)(e.$slots,`default`,{},()=>[(0,a.createTextVNode)((0,a.toDisplayString)(n.message),1)])],10,c)])}var u=t.t(o,[[`render`,l]]);exports.default=u;
 //# sourceMappingURL=tooltip.cjs.map

package/dist/lib/tooltip/tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.cjs","names":[],"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 && !externalAnchorElement\"\n      ref=\"anchor\"\n      :class=\"anchorClass\"\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-bind=\"modeAttrs\"\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 './TooltipConstants.js';\nimport {\n  POPOVER_APPEND_TO_VALUES,\n} from '../Popover/PopoverConstants';\nimport { flushPromises, getUniqueString, hasSlotContent, warnIfUnmounted, returnFirstEl } from '@/common/utils';\nimport {\n  createTippy,\n  getAnchor,\n  getPopperOptions,\n} from '@/components/Popover/TippyUtils';\nimport ModeMixin from '@/common/mixins/mode';\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  compatConfig: { MODE: 3 },\n  name: 'DtTooltip',\n\n  mixins: [ModeMixin],\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     * @deprecated Use contentMode=\"invert\"\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     * Additional class name for the anchor wrapper element.\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    anchorClass: {\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 open prop. open 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     * @values null, true, false\n     */\n    open: {\n      type: [Boolean, null],\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     * @deprecated Use externalAnchorElement instead for Shadow DOM compatibility.\n     */\n    externalAnchor: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * External anchor element reference. Use this instead of externalAnchor when\n     * the anchor may be inside a Shadow DOM, as querySelector cannot pierce shadow boundaries.\n     */\n    externalAnchorElement: {\n      type: HTMLElement,\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 open value\n     *\n     * @event update:open\n     */\n    'update:open',\n  ],\n\n  data () {\n    return {\n      TOOLTIP_KIND_MODIFIERS,\n      hasSlotContent,\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\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      if (this.externalAnchorElement) return this.externalAnchorElement;\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    open: {\n      handler: function (open) {\n        if (open !== null && this.enabled) {\n          this.internalShow = open;\n        }\n      },\n\n      immediate: true,\n    },\n\n    internalShow (value) {\n      if (!this.tip || !this.anchor) return;\n\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.open != null) {\n      console.warn('Tooltip: You cannot use both the enabled and open props at the same time.');\n      console.warn('The open prop will be ignored.');\n    }\n\n    this.tip = createTippy(this.anchor, this.initOptions());\n    if (this.externalAnchor || this.externalAnchorElement) {\n      await flushPromises();\n      this.addExternalAnchorEventListeners();\n    }\n    warnIfUnmounted(returnFirstEl(this.$el), this.$options.name);\n  },\n\n  beforeUnmount () {\n    (this.externalAnchor || this.externalAnchorElement) && this.removeExternalAnchorEventListeners();\n\n    if (this.anchor?._tippy) {\n      this.tip?.destroy();\n    }\n  },\n\n  methods: {\n    getModeReferenceEl () {\n      return this.anchor;\n    },\n\n    calculateAnchorZindex () {\n      // if a modal is currently active render at modal-element z-index, otherwise at tooltip z-index\n      if (returnFirstEl(this.$el).getRootNode()\n        .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"], .d-modal[open], .d-modal--transparent[open]') ||\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        returnFirstEl(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.open === null && this.hasVisibleFocus()) {\n          this.internalShow = true;\n        }\n      } else {\n        if (this.open === 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.open === 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.open !== null) {\n        this.$emit('update:open', 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.open !== null) {\n        this.$emit('update:open', true);\n      }\n    },\n\n    setProps () {\n      if (!this.tip || !this.tip.setProps || !this.anchor) return;\n\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"],"mappings":"oaAoEA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,YAEN,OAAQ,CAAC,EAAA,QAAU,CAEnB,MAAO,CAIL,GAAI,CACF,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,iBAAiB,EACtC,CAeD,mBAAoB,CAClB,KAAM,MACN,YAAe,CAAC,OAAO,CACxB,CAMD,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAaD,OAAQ,CACN,KAAM,MACN,YAAe,CAAC,EAAG,GAAG,CACvB,CAiBD,UAAW,CACT,KAAM,OACN,QAAS,MACT,UAAW,EAAW,CACpB,OAAO,EAAA,mBAAmB,SAAS,EAAU,EAEhD,CAiBD,OAAQ,CACN,KAAM,CAAC,QAAS,OAAO,CACvB,QAAS,GACT,UAAY,GACH,EAAA,sBAAsB,SAAS,EAAO,CAEhD,CAQD,SAAU,CACR,KAAM,CAAC,YAAa,OAAO,CAC3B,QAAS,OACT,UAAW,GACF,EAAA,yBAAyB,SAAS,EAAQ,EAC5C,aAAoB,YAE5B,CAOD,aAAc,CACZ,KAAM,CAAC,OAAQ,OAAQ,MAAM,CAC7B,QAAS,GACV,CAOD,YAAa,CACX,KAAM,CAAC,OAAQ,OAAQ,MAAM,CAC7B,QAAS,GACV,CAKD,QAAS,CACP,KAAM,OACN,QAAS,GACV,CAOD,QAAS,CACP,KAAM,QACN,QAAS,GACV,CAOD,KAAM,CACJ,KAAM,CAAC,QAAS,KAAK,CACrB,QAAS,KACV,CAKD,WAAY,CACV,KAAM,QACN,QAAS,GACV,CAMD,MAAO,CACL,KAAM,QACN,QAAS,GACV,CAKD,MAAO,CACL,KAAM,OACN,QAAS,KACV,CAOD,eAAgB,CACd,KAAM,OACN,QAAS,KACV,CAMD,sBAAuB,CACrB,KAAM,YACN,QAAS,KACV,CACF,CAED,MAAO,CAOL,QAOA,cACD,CAED,MAAQ,CACN,MAAO,CACL,uBAAA,EAAA,uBACA,eAAA,EAAA,eACA,IAAK,KAEL,QAAS,KAIT,aAAc,GAKd,iBAAkB,KAAK,UACxB,EAGH,SAAU,CAER,YAAc,CACZ,MAAO,CACL,OAAQ,KAAK,OACb,MAAO,KAAK,MAAA,IAA2B,GACvC,UAAW,KAAK,UAChB,OAAQ,KAAK,OACb,MAAO,KAAK,SAAW,WAAa,KAAK,MACzC,UAAW,KAAK,WAAa,OAAS,GAEtC,QAAU,GAAoB,KAAK,OAAO,EAAiB,UAAU,CAErE,OAAS,GAAoB,KAAK,OAAO,EAAiB,SAAS,CACnE,SAAU,KAAK,OAEf,cAAe,EAAA,iBAAiB,CAC9B,mBAAoB,KAAK,mBACzB,uBAAwB,GACxB,kBAAmB,KAAK,kBACzB,CAAC,CACH,EAGH,QAAU,CAER,OADI,KAAK,sBAA8B,KAAK,sBACrC,KAAK,eAAiB,SAAS,KAAK,cAAc,KAAK,eAAc,CAAI,EAAA,UAAU,KAAK,MAAM,OAAO,EAE/G,CAED,MAAO,CAEL,WAAY,CACV,QAAS,WACT,KAAM,GACP,CAED,KAAM,CACJ,QAAS,SAAU,EAAM,CACnB,IAAS,MAAQ,KAAK,UACxB,KAAK,aAAe,IAIxB,UAAW,GACZ,CAED,aAAc,EAAO,CACf,CAAC,KAAK,KAAO,CAAC,KAAK,SAEnB,GACF,KAAK,UAAU,CACf,KAAK,IAAI,MAAM,EAEf,KAAK,IAAI,MAAM,GAInB,OAAQ,EAAQ,CACd,KAAK,IAAI,SAAS,CAChB,SACD,CAAC,EAEL,CAED,MAAM,SAAW,CACX,CAAC,KAAK,SAAW,KAAK,MAAQ,OAChC,QAAQ,KAAK,4EAA4E,CACzF,QAAQ,KAAK,iCAAiC,EAGhD,KAAK,IAAM,EAAA,YAAY,KAAK,OAAQ,KAAK,aAAa,CAAC,EACnD,KAAK,gBAAkB,KAAK,yBAC9B,MAAM,EAAA,eAAe,CACrB,KAAK,iCAAiC,EAExC,EAAA,gBAAgB,EAAA,cAAc,KAAK,IAAI,CAAE,KAAK,SAAS,KAAK,EAG9D,eAAiB,EACd,KAAK,gBAAkB,KAAK,wBAA0B,KAAK,oCAAoC,CAE5F,KAAK,QAAQ,QACf,KAAK,KAAK,SAAS,EAIvB,QAAS,CACP,oBAAsB,CACpB,OAAO,KAAK,QAGd,uBAAyB,CASrB,OAPE,EAAA,cAAc,KAAK,IAAI,CAAC,aAAY,CACrC,cAAc,yHAAwH,EAGvI,EAAA,cAAc,KAAK,IAAI,CAAC,QAAQ,eAAe,CACxC,IAEA,KAIX,iBAAmB,CACjB,OAAO,KAAK,OAAO,QAAQ,iBAAiB,EAG9C,cAAe,EAAG,CACX,KAAK,UACN,KAAK,OAAS,KAAK,UAAY,KACjC,KAAK,QAAU,eAAiB,CAC9B,KAAK,YAAY,EAAE,MACD,CAEpB,KAAK,YAAY,EAAE,GAIvB,YAAa,EAAG,CACV,EAAE,OAAS,UAQT,KAAK,OAAS,MAAQ,KAAK,iBAAiB,GAC9C,KAAK,aAAe,IAGlB,KAAK,OAAS,OAAM,KAAK,aAAe,KAIhD,cAAe,EAAG,CACZ,EAAE,OAAS,WAAa,EAAE,OAAS,WAEvC,aAAa,KAAK,QAAQ,CAC1B,KAAK,QAAU,KACf,KAAK,aAAa,GAGpB,aAAe,CACT,KAAK,OAAS,OAAM,KAAK,aAAe,KAG9C,kBAAmB,EAAW,CAC5B,KAAK,iBAAmB,GAG1B,QAAU,CACR,KAAK,KAAK,SAAS,CACnB,KAAK,MAAM,QAAS,GAAM,CACtB,KAAK,OAAS,MAChB,KAAK,MAAM,cAAe,GAAM,EAIpC,OAAQ,EAAiB,EAAe,CACtC,GAAI,CAAC,KAAK,kBAAkB,EAAgB,CAC1C,MAAO,GAEL,KAAK,YAAc,IAAkB,WAGzC,KAAK,MAAM,QAAS,GAAK,CACrB,KAAK,OAAS,MAChB,KAAK,MAAM,cAAe,GAAK,GAInC,UAAY,CACN,CAAC,KAAK,KAAO,CAAC,KAAK,IAAI,UAAY,CAAC,KAAK,QAEzC,KAAK,KAAO,KAAK,IAAI,UACvB,KAAK,IAAI,SAAS,CAChB,GAAG,KAAK,WAER,SAAU,KAAK,WAAa,OAAS,KAAK,QAAQ,aAAa,EAAE,cAAc,OAAM,CAAI,KAAK,SAC9F,OAAQ,KAAK,uBAAuB,CACrC,CAAC,EAIN,SAAW,CACT,KAAK,UAAU,EAGjB,kBAAmB,EAAiB,CAKlC,OAHI,EAAgB,MAAM,QAAQ,YAAY,MAAM,CAAC,SAAW,GAQlE,aAAe,CAEb,MAAO,CACL,QAFe,KAAK,MAAM,QAG1B,MAAO,uGAEP,SAAU,IACV,YAAa,GACb,QAAS,SACT,YAAa,GAEb,MAAO,GACP,QAAS,KAAK,QACd,aAAc,KAAK,aACnB,cAAe,EAAA,iBAAiB,CAC9B,uBAAwB,GACzB,CAAC,CACH,EAGH,iCAAmC,CACjC,CAAC,UAAW,aAAa,CAAC,QAAQ,GAAY,CAC5C,KAAK,QAAQ,iBAAiB,EAAW,GAAU,KAAK,cAAc,EAAM,CAAC,EAC7E,CACF,CAAC,WAAY,aAAc,UAAU,CAAC,QAAQ,GAAY,CACxD,KAAK,QAAQ,iBAAiB,EAAW,GAAU,KAAK,cAAc,EAAM,CAAC,EAC7E,EAGJ,oCAAsC,CACpC,CAAC,UAAW,aAAa,CAAC,QAAQ,GAAY,CAC5C,KAAK,QAAQ,oBAAoB,EAAW,GAAU,KAAK,cAAc,EAAM,CAAC,EAChF,CACF,CAAC,WAAY,aAAc,UAAU,CAAC,QAAQ,GAAY,CACxD,KAAK,QAAQ,oBAAoB,EAAW,GAAU,KAAK,cAAc,EAAM,CAAC,EAChF,EAEL,CACF,IA1iBM,UAAQ,uBAAsB,mFAwC7B,MAxCN,EAwCM,CAAA,CAnCK,EAAA,gBAAc,CAAK,EAAA,wBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAcrB,OAAA,OAbL,IAAI,SACH,OAAA,EAAA,EAAA,gBAAO,EAAA,YAAW,CACnB,UAAQ,oBACP,UAAO,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,eAAA,EAAA,cAAA,GAAA,EAAa,EACtB,WAAQ,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,eAAA,EAAA,cAAA,GAAA,EAAa,EACvB,aAAU,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,eAAA,EAAA,cAAA,GAAA,EAAa,EACzB,aAAU,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,eAAA,EAAA,cAAA,GAAA,EAAa,EACzB,UAAO,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,WAAA,GAAA,IAAM,EAAA,eAAA,EAAA,cAAA,GAAA,EAAa,CAAA,CAAA,MAAA,CAAA,qBAKzB,EAAA,OAAA,SAAA,CAAA,CAAA,GAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,EAAA,EAAA,EAAA,oBAqBE,OAAA,EAAA,EAAA,YAAA,CAlBH,GAAI,EAAA,GACL,IAAI,UACJ,UAAQ,aACP,MAAK,eAA+C,EAAA,uBAAuB,UAAY,EAAA,SAAA,CAA6B,EAAA,eAO7G,EAAA,UAAS,CAAA,EAAA,EAAA,EAAA,YAOV,EAAA,OAAA,UAAA,EAAA,KAAA,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBADF,EAAA,QAAO,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,CAAA,CAAA"}
+{"version":3,"file":"tooltip.cjs","names":[],"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 && !externalAnchorElement\"\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    >\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, hasSlotContent, warnIfUnmounted, returnFirstEl } 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  compatConfig: { MODE: 3 },\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     * @deprecated Use externalAnchorElement instead for Shadow DOM compatibility.\n     */\n    externalAnchor: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * External anchor element reference. Use this instead of externalAnchor when\n     * the anchor may be inside a Shadow DOM, as querySelector cannot pierce shadow boundaries.\n     */\n    externalAnchorElement: {\n      type: HTMLElement,\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      hasSlotContent,\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\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      if (this.externalAnchorElement) return this.externalAnchorElement;\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 (!this.tip || !this.anchor) return;\n\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 || this.externalAnchorElement) {\n      await flushPromises();\n      this.addExternalAnchorEventListeners();\n    }\n    warnIfUnmounted(returnFirstEl(this.$el), this.$options.name);\n  },\n\n  beforeUnmount () {\n    (this.externalAnchor || this.externalAnchorElement) && 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 (returnFirstEl(this.$el).getRootNode()\n        .querySelector(\n          `.d-modal[aria-hidden=\"false\"],\n          .d-modal--transparent[aria-hidden=\"false\"],\n          .d-modal:not([aria-hidden]),\n          .d-modal--transparent:not([aria-hidden])`) ||\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        returnFirstEl(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 || !this.anchor) return;\n\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"],"mappings":"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"}