@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/grouped-chip.js

@@ -1,92 +1,97 @@
-import { hasSlotContent as d } from "./utils.js";
-import { resolveComponent as h, openBlock as o, createElementBlock as n, createVNode as p, createSlots as l, withCtx as s, renderSlot as i, createCommentVNode as r } from "vue";
-import { _ as a } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import { DtChip as u } from "./chip.js";
-import "./constants.js";
+import { hasSlotContent } from "../common/utils.js";
+import { resolveComponent, openBlock, createElementBlock, createVNode, createSlots, withCtx, renderSlot, createCommentVNode } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import { DtChip } from "./chip.js";
+import "../common/constants.js";
 import "./button.js";
-import "../chunks/link_constants-vIUB92L4.js";
+import "../chunks/link_constants-nWVlXQBs.js";
 import "./icon.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
-const f = {
+const _sfc_main = {
   name: "DtRecipeGroupedChip",
   components: {
-    DtChip: u
+    DtChip
   },
   data() {
     return {
-      hasSlotContent: d
+      hasSlotContent
     };
   }
-}, m = {
+};
+const _hoisted_1 = {
   "data-qa": "grouped-chip",
   class: "dt-grouped-chip"
-}, g = {
+};
+const _hoisted_2 = {
   key: 0,
   "data-qa": "left-grouped-chip-icon"
-}, C = {
+};
+const _hoisted_3 = {
   key: 0,
   "data-qa": "left-grouped-chip-content"
-}, _ = {
+};
+const _hoisted_4 = {
   key: 0,
   "data-qa": "right-grouped-chip-icon"
-}, v = {
+};
+const _hoisted_5 = {
   key: 0,
   "data-qa": "right-grouped-chip-content"
 };
-function S(t, $, k, q, e, y) {
-  const c = h("dt-chip");
-  return o(), n("div", m, [
-    p(c, {
-      "hide-close": !0,
-      interactive: !1,
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_chip = resolveComponent("dt-chip");
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createVNode(_component_dt_chip, {
+      "hide-close": true,
+      interactive: false,
       "content-class": "d-fs100",
       size: "xs",
-      "grouped-chip": !0,
+      "grouped-chip": true,
       class: "dt-chip-content dt-chip-content--left"
-    }, l({
-      default: s(() => [
-        e.hasSlotContent(t.$slots.leftContent) ? (o(), n("div", C, [
-          i(t.$slots, "leftContent")
-        ])) : r("", !0)
+    }, createSlots({
+      default: withCtx(() => [
+        $data.hasSlotContent(_ctx.$slots.leftContent) ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          renderSlot(_ctx.$slots, "leftContent")
+        ])) : createCommentVNode("", true)
       ]),
       _: 2
     }, [
-      e.hasSlotContent(t.$slots.leftIcon) ? {
+      $data.hasSlotContent(_ctx.$slots.leftIcon) ? {
         name: "icon",
-        fn: s(() => [
-          e.hasSlotContent(t.$slots.leftIcon) ? (o(), n("div", g, [
-            i(t.$slots, "leftIcon")
-          ])) : r("", !0)
+        fn: withCtx(() => [
+          $data.hasSlotContent(_ctx.$slots.leftIcon) ? (openBlock(), createElementBlock("div", _hoisted_2, [
+            renderSlot(_ctx.$slots, "leftIcon")
+          ])) : createCommentVNode("", true)
         ]),
         key: "0"
       } : void 0
     ]), 1024),
-    p(c, {
-      "hide-close": !0,
-      interactive: !1,
+    createVNode(_component_dt_chip, {
+      "hide-close": true,
+      interactive: false,
       "content-class": "d-fs100",
       size: "xs",
-      "grouped-chip": !0,
+      "grouped-chip": true,
       class: "dt-chip-content dt-chip-content--right"
     }, {
-      icon: s(() => [
-        e.hasSlotContent(t.$slots.rightIcon) ? (o(), n("div", _, [
-          i(t.$slots, "rightIcon")
-        ])) : r("", !0)
+      icon: withCtx(() => [
+        $data.hasSlotContent(_ctx.$slots.rightIcon) ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          renderSlot(_ctx.$slots, "rightIcon")
+        ])) : createCommentVNode("", true)
       ]),
-      default: s(() => [
-        e.hasSlotContent(t.$slots.rightContent) ? (o(), n("div", v, [
-          i(t.$slots, "rightContent")
-        ])) : r("", !0)
+      default: withCtx(() => [
+        $data.hasSlotContent(_ctx.$slots.rightContent) ? (openBlock(), createElementBlock("div", _hoisted_5, [
+          renderSlot(_ctx.$slots, "rightContent")
+        ])) : createCommentVNode("", true)
       ]),
       _: 3
     })
   ]);
 }
-const j = /* @__PURE__ */ a(f, [["render", S]]);
+const grouped_chip = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  j as DtRecipeGroupedChip
+  grouped_chip as DtRecipeGroupedChip
 };
 //# sourceMappingURL=grouped-chip.js.map

package/dist/lib/grouped-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"grouped-chip.js","sources":["../../recipes/chips/grouped_chip/grouped_chip.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"grouped-chip\"\n    class=\"dt-grouped-chip\"\n  >\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      content-class=\"d-fs100\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"dt-chip-content dt-chip-content--left\"\n    >\n      <template\n        v-if=\"hasSlotContent($slots.leftIcon)\"\n        #icon\n      >\n        <!-- @slot Slot for left chip icon information -->\n        <div\n          v-if=\"hasSlotContent($slots.leftIcon)\"\n          data-qa=\"left-grouped-chip-icon\"\n        >\n          <slot name=\"leftIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.leftContent)\"\n          data-qa=\"left-grouped-chip-content\"\n        >\n          <!-- @slot Slot for left chip content information -->\n          <slot name=\"leftContent\" />\n        </div>\n      </template>\n    </dt-chip>\n\n    <!-- Right side split chip -->\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      content-class=\"d-fs100\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"dt-chip-content dt-chip-content--right\"\n    >\n      <template #icon>\n        <div\n          v-if=\"hasSlotContent($slots.rightIcon)\"\n          data-qa=\"right-grouped-chip-icon\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.rightContent)\"\n          data-qa=\"right-grouped-chip-content\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightContent\" />\n        </div>\n      </template>\n    </dt-chip>\n  </div>\n</template>\n\n<script>\nimport { DtChip } from '@/components/chip';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGroupedChip',\n\n  components: {\n    DtChip,\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-grouped-chip {\n  display: inline-flex;\n  white-space: nowrap;\n  background-color: unset;\n  background-image: unset;\n}\n\n.dt-chip-content {\n  font-variant-numeric: tabular-nums;\n\n  &--left {\n    border-top-left-radius: var(--dt-size-radius-pill);\n    border-bottom-left-radius: var(--dt-size-radius-pill);\n    background-color: var(--dt-color-surface-moderate-opaque);\n    max-width: var(--dt-size-730);\n  }\n\n  &--right {\n    border-top-right-radius: var(--dt-size-radius-pill);\n    border-bottom-right-radius: var(--dt-size-radius-pill);\n    background-color: var(--dt-color-purple-200);\n    max-width: var(--dt-size-730);\n  }\n}\n</style>\n"],"names":["_sfc_main","DtChip","hasSlotContent","_openBlock","_createElementBlock","_hoisted_1","_createVNode","_component_dt_chip","$data","_ctx","_hoisted_3","_renderSlot","_hoisted_2","_hoisted_4","_hoisted_5"],"mappings":";;;;;;;;;;;AAuEA,MAAKA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAC;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,gBAAAC;AAAA;EAEH;AACH;EAjFI,WAAQ;AAAA,EACR,OAAM;;;EAiBA,WAAQ;;;EAQR,WAAQ;;;EAoBR,WAAQ;;;EASR,WAAQ;;;;AAxDhB,SAAAC,EAAA,GAAAC,EA+DM,OA/DNC,GA+DM;AAAA,IA3DJC,EA6BUC,GAAA;AAAA,MA5BP,cAAY;AAAA,MACZ,aAAa;AAAA,MACd,iBAAc;AAAA,MACd,MAAK;AAAA,MACJ,gBAAc;AAAA,MACf,OAAM;AAAA;MAcK,WACT,MAMM;AAAA,QALEC,EAAc,eAACC,EAAM,OAAC,WAAW,KADzCN,KAAAC,EAMM,OANNM,GAMM;AAAA,UADJC,EAA2BF,EAAA,QAAA,aAAA;AAAA;;;;MAjBvBD,EAAc,eAACC,EAAM,OAAC,QAAQ;cACnC;AAAA,cAGD,MAKM;AAAA,UAJED,EAAc,eAACC,EAAM,OAAC,QAAQ,KADtCN,KAAAC,EAKM,OALNQ,GAKM;AAAA,YADJD,EAAwBF,EAAA,QAAA,UAAA;AAAA;;;;;IAe9BH,EA0BUC,GAAA;AAAA,MAzBP,cAAY;AAAA,MACZ,aAAa;AAAA,MACd,iBAAc;AAAA,MACd,MAAK;AAAA,MACJ,gBAAc;AAAA,MACf,OAAM;AAAA;MAEK,QACT,MAMM;AAAA,QALEC,EAAc,eAACC,EAAM,OAAC,SAAS,KADvCN,KAAAC,EAMM,OANNS,GAMM;AAAA,UADJF,EAAyBF,EAAA,QAAA,WAAA;AAAA;;MAGlB,WACT,MAMM;AAAA,QALED,EAAc,eAACC,EAAM,OAAC,YAAY,KAD1CN,KAAAC,EAMM,OANNU,GAMM;AAAA,UADJH,EAA4BF,EAAA,QAAA,cAAA;AAAA;;;;;;;"}
+{"version":3,"file":"grouped-chip.js","sources":["../../recipes/chips/grouped_chip/grouped_chip.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"grouped-chip\"\n    class=\"dt-grouped-chip\"\n  >\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      content-class=\"d-fs100\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"dt-chip-content dt-chip-content--left\"\n    >\n      <template\n        v-if=\"hasSlotContent($slots.leftIcon)\"\n        #icon\n      >\n        <!-- @slot Slot for left chip icon information -->\n        <div\n          v-if=\"hasSlotContent($slots.leftIcon)\"\n          data-qa=\"left-grouped-chip-icon\"\n        >\n          <slot name=\"leftIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.leftContent)\"\n          data-qa=\"left-grouped-chip-content\"\n        >\n          <!-- @slot Slot for left chip content information -->\n          <slot name=\"leftContent\" />\n        </div>\n      </template>\n    </dt-chip>\n\n    <!-- Right side split chip -->\n    <dt-chip\n      :hide-close=\"true\"\n      :interactive=\"false\"\n      content-class=\"d-fs100\"\n      size=\"xs\"\n      :grouped-chip=\"true\"\n      class=\"dt-chip-content dt-chip-content--right\"\n    >\n      <template #icon>\n        <div\n          v-if=\"hasSlotContent($slots.rightIcon)\"\n          data-qa=\"right-grouped-chip-icon\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightIcon\" />\n        </div>\n      </template>\n      <template #default>\n        <div\n          v-if=\"hasSlotContent($slots.rightContent)\"\n          data-qa=\"right-grouped-chip-content\"\n        >\n          <!-- @slot Slot for right chip content information -->\n          <slot name=\"rightContent\" />\n        </div>\n      </template>\n    </dt-chip>\n  </div>\n</template>\n\n<script>\nimport { DtChip } from '@/components/chip';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'DtRecipeGroupedChip',\n\n  components: {\n    DtChip,\n  },\n\n  data () {\n    return {\n      hasSlotContent,\n    };\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-grouped-chip {\n  display: inline-flex;\n  white-space: nowrap;\n  background-color: unset;\n  background-image: unset;\n}\n\n.dt-chip-content {\n  font-variant-numeric: tabular-nums;\n\n  &--left {\n    border-top-left-radius: var(--dt-size-radius-pill);\n    border-bottom-left-radius: var(--dt-size-radius-pill);\n    background-color: var(--dt-color-surface-moderate-opaque);\n    max-width: var(--dt-size-730);\n  }\n\n  &--right {\n    border-top-right-radius: var(--dt-size-radius-pill);\n    border-bottom-right-radius: var(--dt-size-radius-pill);\n    background-color: var(--dt-color-purple-200);\n    max-width: var(--dt-size-730);\n  }\n}\n</style>\n"],"names":["_openBlock","_createElementBlock","_createVNode","_renderSlot"],"mappings":";;;;;;;;;;;AAuEA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AACH;;EAjFI,WAAQ;AAAA,EACR,OAAM;;;;EAiBA,WAAQ;;;;EAQR,WAAQ;;;;EAoBR,WAAQ;;;;EASR,WAAQ;;;;AAxDhB,SAAAA,UAAA,GAAAC,mBA+DM,OA/DN,YA+DM;AAAA,IA3DJC,YA6BU,oBAAA;AAAA,MA5BP,cAAY;AAAA,MACZ,aAAa;AAAA,MACd,iBAAc;AAAA,MACd,MAAK;AAAA,MACJ,gBAAc;AAAA,MACf,OAAM;AAAA;MAcK,iBACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,WAAW,KADzCF,aAAAC,mBAMM,OANN,YAMM;AAAA,UADJE,WAA2B,KAAA,QAAA,aAAA;AAAA;;;;MAjBvB,MAAc,eAAC,KAAM,OAAC,QAAQ;cACnC;AAAA,oBAGD,MAKM;AAAA,UAJE,MAAc,eAAC,KAAM,OAAC,QAAQ,KADtCH,aAAAC,mBAKM,OALN,YAKM;AAAA,YADJE,WAAwB,KAAA,QAAA,UAAA;AAAA;;;;;IAe9BD,YA0BU,oBAAA;AAAA,MAzBP,cAAY;AAAA,MACZ,aAAa;AAAA,MACd,iBAAc;AAAA,MACd,MAAK;AAAA,MACJ,gBAAc;AAAA,MACf,OAAM;AAAA;MAEK,cACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,SAAS,KADvCF,aAAAC,mBAMM,OANN,YAMM;AAAA,UADJE,WAAyB,KAAA,QAAA,WAAA;AAAA;;MAGlB,iBACT,MAMM;AAAA,QALE,MAAc,eAAC,KAAM,OAAC,YAAY,KAD1CH,aAAAC,mBAMM,OANN,YAMM;AAAA,UADJE,WAA4B,KAAA,QAAA,cAAA;AAAA;;;;;;;"}

package/dist/lib/hovercard.cjs

@@ -1,2 +1,224 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("vue"),f=require("./utils.cjs"),i=require("../chunks/popover_constants-hOEhklvr.js"),m=require("./popover.cjs");require("./constants.cjs");require("tippy.js");require("../chunks/modal-qEzlo0Sj.js");require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");require("./button.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("./icon.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("../chunks/sr_only_close_button-iD7s1Pbj.js");require("./lazy-show.cjs");const p=function(){const e=t.ref(null);let a,r,l=null,n=null;function c(o){if(n){const s=Date.now()-l+100;a&&clearTimeout(a),n!==o&&(a=setTimeout(()=>{e.value!==null&&(l=Date.now()),e.value=null},s),r&&clearTimeout(r),r=setTimeout(()=>{e.value=o,n=o},s))}else r=setTimeout(()=>{e.value=o,n=o},i.h)}function d(){r&&(clearTimeout(r),r=null),l=Date.now(),a=setTimeout(()=>{e.value=null,n=null},i.h)}let u=null;return()=>(u===null&&(u={current:e,enter:c,leave:d}),u)}(),v={__name:"hovercard",props:{transition:{type:Boolean,default:!1},fallbackPlacements:{type:Array,default:()=>["auto"]},placement:{type:String,default:"top-start",validator(e){return i.T.includes(e)}},padding:{type:String,default:"large",validator:e=>Object.keys(i.P).some(a=>a===e)},offset:{type:Array,default:()=>[0,16]},id:{type:String,default(){return f.getUniqueString()}},headerClass:{type:[String,Array,Object],default:""},footerClass:{type:[String,Array,Object],default:""},dialogClass:{type:[String,Array,Object],default:""},contentClass:{type:[String,Array,Object],default:""},appendTo:{type:[HTMLElement,String],default:"body",validator:e=>i.e.includes(e)||e instanceof HTMLElement}},emits:["opened"],setup(e){const a=t.reactive(p());return(r,l)=>(t.openBlock(),t.createBlock(t.unref(m.DtPopover),{id:e.id,placement:e.placement,"content-class":e.contentClass,"fallback-placements":e.fallbackPlacements,padding:e.padding,transition:e.transition?"fade":null,offset:e.offset,modal:!1,"initial-focus-element":"none","header-class":e.headerClass,"footer-class":e.footerClass,"append-to":e.appendTo,hovercard:!0,timer:a,"data-qa":"dt-hovercard",onOpened:l[0]||(l[0]=n=>r.$emit("opened",n))},{anchor:t.withCtx(({attrs:n})=>[t.renderSlot(r.$slots,"anchor",t.normalizeProps(t.guardReactiveProps(n)))]),content:t.withCtx(()=>[t.renderSlot(r.$slots,"content")]),headerContent:t.withCtx(()=>[t.renderSlot(r.$slots,"headerContent")]),footerContent:t.withCtx(()=>[t.renderSlot(r.$slots,"footerContent")]),_:3},8,["id","placement","content-class","fallback-placements","padding","transition","offset","header-class","footer-class","append-to","timer"]))}};exports.DtHovercard=v;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const common_utils = require("../common/utils.cjs");
+const popover_constants = require("../chunks/popover_constants-JwBF9h1Z.js");
+const lib_popover = require("./popover.cjs");
+require("../common/constants.cjs");
+require("tippy.js");
+require("../chunks/modal-VgxXAQFP.js");
+require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+require("./button.cjs");
+require("../chunks/link_constants-Huj7D_hm.js");
+require("./icon.cjs");
+require("@dialpad/dialtone-icons/vue3");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+require("../chunks/sr_only_close_button-xGrHFjwA.js");
+require("./lazy-show.cjs");
+const useTimer = function() {
+  const current = vue.ref(null);
+  let timerLeave, timerEnter;
+  let start = null;
+  let prevCard = null;
+  function enter(id) {
+    if (prevCard) {
+      const time = Date.now() - start + 100;
+      if (timerLeave)
+        clearTimeout(timerLeave);
+      if (prevCard !== id) {
+        timerLeave = setTimeout(
+          () => {
+            if (current.value !== null) {
+              start = Date.now();
+            }
+            current.value = null;
+          },
+          time
+        );
+        if (timerEnter)
+          clearTimeout(timerEnter);
+        timerEnter = setTimeout(
+          () => {
+            current.value = id;
+            prevCard = id;
+          },
+          time
+        );
+      }
+    } else {
+      timerEnter = setTimeout(() => {
+        current.value = id;
+        prevCard = id;
+      }, popover_constants.TOOLTIP_DELAY_MS);
+    }
+  }
+  function leave() {
+    if (timerEnter) {
+      clearTimeout(timerEnter);
+      timerEnter = null;
+    }
+    start = Date.now();
+    timerLeave = setTimeout(() => {
+      current.value = null;
+      prevCard = null;
+    }, popover_constants.TOOLTIP_DELAY_MS);
+  }
+  let instance = null;
+  return () => {
+    if (instance === null) {
+      instance = { current, enter, leave };
+    }
+    return instance;
+  };
+}();
+const _sfc_main = {
+  __name: "hovercard",
+  props: {
+    /**
+       * Fade transition when the content display is toggled.
+       * @type boolean
+       * @values true, false
+       */
+    transition: {
+      type: Boolean,
+      default: false
+    },
+    /**
+        * If the popover does not fit in the direction described by "placement",
+       * it will attempt to change its direction to the "fallbackPlacements".
+       * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements"
+       */
+    fallbackPlacements: {
+      type: Array,
+      default: () => {
+        return ["auto"];
+      }
+    },
+    /**
+       * The direction the popover displays relative to the anchor.
+       * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement"
+       * @values top, top-start, top-end,
+       * right, right-start, right-end,
+       * left, left-start, left-end,
+       * bottom, bottom-start, bottom-end,
+       * auto, auto-start, auto-end
+       */
+    placement: {
+      type: String,
+      default: "top-start",
+      validator(placement) {
+        return popover_constants.TOOLTIP_DIRECTIONS.includes(placement);
+      }
+    },
+    /**
+       * Padding size class for the popover content.
+       * @values none, small, medium, large
+       */
+    padding: {
+      type: String,
+      default: "large",
+      validator: (padding) => {
+        return Object.keys(popover_constants.POPOVER_PADDING_CLASSES).some((item) => item === padding);
+      }
+    },
+    /**
+       * Displaces the content box from its anchor element
+       * by the specified number of pixels.
+       * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset"
+       */
+    offset: {
+      type: Array,
+      default: () => [0, 16]
+    },
+    /**
+       * The id of the tooltip
+       */
+    id: {
+      type: String,
+      default() {
+        return common_utils.getUniqueString();
+      }
+    },
+    /**
+       * Additional class name for the header content wrapper element.
+       */
+    headerClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+       * Additional class name for the footer content wrapper element.
+       */
+    footerClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+       * Additional class name for the dialog element.
+       */
+    dialogClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+       * Additional class name for the content wrapper element.
+       */
+    contentClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+       * Sets the element to which the popover is going to append to.
+       * 'body' will append to the nearest body (supports shadow DOM).
+       * @values 'body', 'parent', HTMLElement,
+       */
+    appendTo: {
+      type: [HTMLElement, String],
+      default: "body",
+      validator: (appendTo) => {
+        return popover_constants.POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
+      }
+    }
+  },
+  emits: ["opened"],
+  setup(__props) {
+    const timer = vue.reactive(useTimer());
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createBlock(vue.unref(lib_popover.DtPopover), {
+        id: __props.id,
+        placement: __props.placement,
+        "content-class": __props.contentClass,
+        "fallback-placements": __props.fallbackPlacements,
+        padding: __props.padding,
+        transition: __props.transition ? "fade" : null,
+        offset: __props.offset,
+        modal: false,
+        "initial-focus-element": "none",
+        "header-class": __props.headerClass,
+        "footer-class": __props.footerClass,
+        "append-to": __props.appendTo,
+        hovercard: true,
+        timer,
+        "data-qa": "dt-hovercard",
+        onOpened: _cache[0] || (_cache[0] = (e) => _ctx.$emit("opened", e))
+      }, {
+        anchor: vue.withCtx(({ attrs }) => [
+          vue.renderSlot(_ctx.$slots, "anchor", vue.normalizeProps(vue.guardReactiveProps(attrs)))
+        ]),
+        content: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "content")
+        ]),
+        headerContent: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "headerContent")
+        ]),
+        footerContent: vue.withCtx(() => [
+          vue.renderSlot(_ctx.$slots, "footerContent")
+        ]),
+        _: 3
+      }, 8, ["id", "placement", "content-class", "fallback-placements", "padding", "transition", "offset", "header-class", "footer-class", "append-to", "timer"]);
+    };
+  }
+};
+exports.DtHovercard = _sfc_main;
 //# sourceMappingURL=hovercard.cjs.map

package/dist/lib/hovercard.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"hovercard.cjs","sources":["../../components/hovercard/timer.js","../../components/hovercard/hovercard.vue"],"sourcesContent":["import { ref } from 'vue';\nimport { TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';\n\nexport default (function () {\n  const current = ref(null);\n  let timerLeave, timerEnter;\n  let start = null;\n  let prevCard = null;\n\n  // Handles the timer for when the event that opens the hovercard\n  // is triggered.\n  // If no hovercard is active, it sets a delay of TOOLTIP_DELAY_MS.\n  // If there was an active hovercard, the delay depends on the time it takes\n  // to move from one anchor to the other.\n  function enter (id) {\n    if (prevCard) {\n      const time = Date.now() - start + 100;\n      if (timerLeave) clearTimeout(timerLeave);\n      if (prevCard !== id) {\n        timerLeave = setTimeout(\n          () => {\n            if (current.value !== null) {\n              start = Date.now();\n            }\n            current.value = null;\n          },\n          time,\n        );\n        if (timerEnter) clearTimeout(timerEnter);\n        timerEnter = setTimeout(\n          () => {\n            current.value = id;\n            prevCard = id;\n          },\n          time,\n        );\n      }\n    } else {\n      timerEnter = setTimeout(() => {\n        current.value = id;\n        prevCard = id;\n      }, TOOLTIP_DELAY_MS);\n    }\n  }\n\n  // Handles the timer for when the event that closes the hovercard\n  // is triggered.\n  function leave () {\n    if (timerEnter) {\n      clearTimeout(timerEnter);\n      timerEnter = null;\n    }\n    start = Date.now();\n    timerLeave = setTimeout(() => {\n      current.value = null;\n      prevCard = null;\n    }, TOOLTIP_DELAY_MS);\n  }\n\n  let instance = null;\n\n  return () => {\n    if (instance === null) {\n      instance = { current, enter, leave };\n    }\n    return instance;\n  };\n})();\n","<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-popover\n    :id=\"id\"\n    :placement=\"placement\"\n    :content-class=\"contentClass\"\n    :fallback-placements=\"fallbackPlacements\"\n    :padding=\"padding\"\n    :transition=\"transition ? 'fade' : null\"\n    :offset=\"offset\"\n    :modal=\"false\"\n    initial-focus-element=\"none\"\n    :header-class=\"headerClass\"\n    :footer-class=\"footerClass\"\n    :append-to=\"appendTo\"\n    :hovercard=\"true\"\n    :timer=\"timer\"\n    data-qa=\"dt-hovercard\"\n    @opened=\"(e) => ($emit('opened', e))\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <slot\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content>\n      <slot name=\"content\" />\n    </template>\n    <template #headerContent>\n      <slot name=\"headerContent\" />\n    </template>\n\n    <template #footerContent>\n      <slot name=\"footerContent\" />\n    </template>\n  </dt-popover>\n</template>\n\n<script setup>\nimport { reactive } from 'vue';\nimport { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';\nimport { TOOLTIP_DIRECTIONS } from '@/components/tooltip/index.js';\nimport { getUniqueString } from '@/common/utils';\nimport useTimer from './timer';\n\nconst timer = reactive(useTimer());\n\ndefineProps({\n  /**\n     * Fade transition when the content display is toggled.\n     * @type boolean\n     * @values true, false\n     */\n  transition: {\n    type: Boolean,\n    default: false,\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     * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     */\n  fallbackPlacements: {\n    type: Array,\n    default: () => {\n      return ['auto'];\n    },\n  },\n\n  /**\n     * The direction the popover displays relative to the anchor.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\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-start',\n    validator (placement) {\n      return TOOLTIP_DIRECTIONS.includes(placement);\n    },\n  },\n\n  /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n  padding: {\n    type: String,\n    default: 'large',\n    validator: (padding) => {\n      return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n    },\n  },\n\n  /**\n     * Displaces the content box from its anchor element\n     * by the specified number of pixels.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     */\n  offset: {\n    type: Array,\n    default: () => [0, 16],\n  },\n\n  /**\n     * The id of the tooltip\n     */\n  id: {\n    type: String,\n    default () { return getUniqueString(); },\n  },\n\n  /**\n     * Additional class name for the header content wrapper element.\n     */\n  headerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the footer content wrapper element.\n     */\n  footerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the dialog element.\n     */\n  dialogClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the content wrapper element.\n     */\n  contentClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\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\ndefineEmits(['opened']);\n</script>\n"],"names":["useTimer","current","ref","timerLeave","timerEnter","start","prevCard","enter","id","time","TOOLTIP_DELAY_MS","leave","instance","timer","reactive"],"mappings":"spBAGA,MAAAA,EAAgB,UAAY,CAC1B,MAAMC,EAAUC,MAAI,IAAI,EACxB,IAAIC,EAAYC,EACZC,EAAQ,KACRC,EAAW,KAOf,SAASC,EAAOC,EAAI,CAClB,GAAIF,EAAU,CACZ,MAAMG,EAAO,KAAK,IAAG,EAAKJ,EAAQ,IAC9BF,GAAY,aAAaA,CAAU,EACnCG,IAAaE,IACfL,EAAa,WACX,IAAM,CACAF,EAAQ,QAAU,OACpBI,EAAQ,KAAK,OAEfJ,EAAQ,MAAQ,IACjB,EACDQ,CACV,EACYL,GAAY,aAAaA,CAAU,EACvCA,EAAa,WACX,IAAM,CACJH,EAAQ,MAAQO,EAChBF,EAAWE,CACZ,EACDC,CACV,EAEA,MACML,EAAa,WAAW,IAAM,CAC5BH,EAAQ,MAAQO,EAChBF,EAAWE,CACZ,EAAEE,EAAgB,CAAA,CAEtB,CAID,SAASC,GAAS,CACZP,IACF,aAAaA,CAAU,EACvBA,EAAa,MAEfC,EAAQ,KAAK,MACbF,EAAa,WAAW,IAAM,CAC5BF,EAAQ,MAAQ,KAChBK,EAAW,IACZ,EAAEI,EAAgB,CAAA,CACpB,CAED,IAAIE,EAAW,KAEf,MAAO,KACDA,IAAa,OACfA,EAAW,CAAE,QAAAX,EAAS,MAAAM,EAAO,MAAAI,CAAK,GAE7BC,EAEX,EAAI,ktBCrBJ,MAAMC,EAAQC,EAAAA,SAASd,EAAQ,CAAE"}
+{"version":3,"file":"hovercard.cjs","sources":["../../components/hovercard/timer.js","../../components/hovercard/hovercard.vue"],"sourcesContent":["import { ref } from 'vue';\nimport { TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';\n\nexport default (function () {\n  const current = ref(null);\n  let timerLeave, timerEnter;\n  let start = null;\n  let prevCard = null;\n\n  // Handles the timer for when the event that opens the hovercard\n  // is triggered.\n  // If no hovercard is active, it sets a delay of TOOLTIP_DELAY_MS.\n  // If there was an active hovercard, the delay depends on the time it takes\n  // to move from one anchor to the other.\n  function enter (id) {\n    if (prevCard) {\n      const time = Date.now() - start + 100;\n      if (timerLeave) clearTimeout(timerLeave);\n      if (prevCard !== id) {\n        timerLeave = setTimeout(\n          () => {\n            if (current.value !== null) {\n              start = Date.now();\n            }\n            current.value = null;\n          },\n          time,\n        );\n        if (timerEnter) clearTimeout(timerEnter);\n        timerEnter = setTimeout(\n          () => {\n            current.value = id;\n            prevCard = id;\n          },\n          time,\n        );\n      }\n    } else {\n      timerEnter = setTimeout(() => {\n        current.value = id;\n        prevCard = id;\n      }, TOOLTIP_DELAY_MS);\n    }\n  }\n\n  // Handles the timer for when the event that closes the hovercard\n  // is triggered.\n  function leave () {\n    if (timerEnter) {\n      clearTimeout(timerEnter);\n      timerEnter = null;\n    }\n    start = Date.now();\n    timerLeave = setTimeout(() => {\n      current.value = null;\n      prevCard = null;\n    }, TOOLTIP_DELAY_MS);\n  }\n\n  let instance = null;\n\n  return () => {\n    if (instance === null) {\n      instance = { current, enter, leave };\n    }\n    return instance;\n  };\n})();\n","<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-popover\n    :id=\"id\"\n    :placement=\"placement\"\n    :content-class=\"contentClass\"\n    :fallback-placements=\"fallbackPlacements\"\n    :padding=\"padding\"\n    :transition=\"transition ? 'fade' : null\"\n    :offset=\"offset\"\n    :modal=\"false\"\n    initial-focus-element=\"none\"\n    :header-class=\"headerClass\"\n    :footer-class=\"footerClass\"\n    :append-to=\"appendTo\"\n    :hovercard=\"true\"\n    :timer=\"timer\"\n    data-qa=\"dt-hovercard\"\n    @opened=\"(e) => ($emit('opened', e))\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <slot\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content>\n      <slot name=\"content\" />\n    </template>\n    <template #headerContent>\n      <slot name=\"headerContent\" />\n    </template>\n\n    <template #footerContent>\n      <slot name=\"footerContent\" />\n    </template>\n  </dt-popover>\n</template>\n\n<script setup>\nimport { reactive } from 'vue';\nimport { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';\nimport { TOOLTIP_DIRECTIONS } from '@/components/tooltip/index.js';\nimport { getUniqueString } from '@/common/utils';\nimport useTimer from './timer';\n\nconst timer = reactive(useTimer());\n\ndefineProps({\n  /**\n     * Fade transition when the content display is toggled.\n     * @type boolean\n     * @values true, false\n     */\n  transition: {\n    type: Boolean,\n    default: false,\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     * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     */\n  fallbackPlacements: {\n    type: Array,\n    default: () => {\n      return ['auto'];\n    },\n  },\n\n  /**\n     * The direction the popover displays relative to the anchor.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\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-start',\n    validator (placement) {\n      return TOOLTIP_DIRECTIONS.includes(placement);\n    },\n  },\n\n  /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n  padding: {\n    type: String,\n    default: 'large',\n    validator: (padding) => {\n      return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n    },\n  },\n\n  /**\n     * Displaces the content box from its anchor element\n     * by the specified number of pixels.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     */\n  offset: {\n    type: Array,\n    default: () => [0, 16],\n  },\n\n  /**\n     * The id of the tooltip\n     */\n  id: {\n    type: String,\n    default () { return getUniqueString(); },\n  },\n\n  /**\n     * Additional class name for the header content wrapper element.\n     */\n  headerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the footer content wrapper element.\n     */\n  footerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the dialog element.\n     */\n  dialogClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the content wrapper element.\n     */\n  contentClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\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\ndefineEmits(['opened']);\n</script>\n"],"names":["ref","TOOLTIP_DELAY_MS","reactive"],"mappings":";;;;;;;;;;;;;;;;;;AAGA,MAAA,WAAgB,WAAY;AAC1B,QAAM,UAAUA,QAAI,IAAI;AACxB,MAAI,YAAY;AAChB,MAAI,QAAQ;AACZ,MAAI,WAAW;AAOf,WAAS,MAAO,IAAI;AAClB,QAAI,UAAU;AACZ,YAAM,OAAO,KAAK,IAAG,IAAK,QAAQ;AAClC,UAAI;AAAY,qBAAa,UAAU;AACvC,UAAI,aAAa,IAAI;AACnB,qBAAa;AAAA,UACX,MAAM;AACJ,gBAAI,QAAQ,UAAU,MAAM;AAC1B,sBAAQ,KAAK;YACd;AACD,oBAAQ,QAAQ;AAAA,UACjB;AAAA,UACD;AAAA,QACV;AACQ,YAAI;AAAY,uBAAa,UAAU;AACvC,qBAAa;AAAA,UACX,MAAM;AACJ,oBAAQ,QAAQ;AAChB,uBAAW;AAAA,UACZ;AAAA,UACD;AAAA,QACV;AAAA,MACO;AAAA,IACP,OAAW;AACL,mBAAa,WAAW,MAAM;AAC5B,gBAAQ,QAAQ;AAChB,mBAAW;AAAA,MACZ,GAAEC,kBAAgB,gBAAA;AAAA,IACpB;AAAA,EACF;AAID,WAAS,QAAS;AAChB,QAAI,YAAY;AACd,mBAAa,UAAU;AACvB,mBAAa;AAAA,IACd;AACD,YAAQ,KAAK;AACb,iBAAa,WAAW,MAAM;AAC5B,cAAQ,QAAQ;AAChB,iBAAW;AAAA,IACZ,GAAEA,kBAAgB,gBAAA;AAAA,EACpB;AAED,MAAI,WAAW;AAEf,SAAO,MAAM;AACX,QAAI,aAAa,MAAM;AACrB,iBAAW,EAAE,SAAS,OAAO,MAAK;AAAA,IACnC;AACD,WAAO;AAAA,EACX;AACA,EAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACrBJ,UAAM,QAAQC,IAAAA,SAAS,SAAQ,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}