@dialpad/dialtone-vue 3.218.3 → 3.219.0-next.2

package/dist/lib/hovercard/hovercard.js

@@ -1,11 +1,19 @@
-import { ref as n, onMounted as E, nextTick as S, onBeforeUnmount as A, watch as D, openBlock as M, createBlock as L, unref as k, withCtx as s, renderSlot as i, createElementVNode as I, normalizeProps as N, guardReactiveProps as $ } from "vue";
-import { getUniqueString as j } from "../../common/utils/index.js";
-import { TOOLTIP_DELAY_MS as C, TOOLTIP_DIRECTIONS as B } from "../tooltip/tooltip-constants.js";
-import F from "../popover/popover.js";
-import { POPOVER_APPEND_TO_VALUES as w, POPOVER_PADDING_CLASSES as x } from "../popover/popover-constants.js";
-const z = {
+import { ref as n, onMounted as E, nextTick as S, onBeforeUnmount as A, watch as M, openBlock as D, createBlock as L, unref as k, withCtx as s, renderSlot as c, createElementVNode as N, normalizeProps as I, guardReactiveProps as j } from "vue";
+import { getUniqueString as $ } from "../../common/utils/index.js";
+import { C as B } from "../../mode_constants-C1GFodVj.js";
+import { TOOLTIP_DELAY_MS as C, TOOLTIP_DIRECTIONS as F } from "../tooltip/tooltip-constants.js";
+import H from "../popover/popover.js";
+import { POPOVER_APPEND_TO_VALUES as R, POPOVER_PADDING_CLASSES as w } from "../popover/popover-constants.js";
+const Y = /* @__PURE__ */ Object.assign({
+  name: "DtHovercard"
+}, {
   __name: "hovercard",
   props: {
+    /**
+       * Applies a color mode to the positioned content element.
+       * @values light, dark, invert
+       */
+    contentMode: B,
     /**
        * Fade transition when the content display is toggled.
        * @type boolean
@@ -47,7 +55,7 @@ const z = {
       type: String,
       default: "top-start",
       validator(e) {
-        return B.includes(e);
+        return F.includes(e);
       }
     },
     /**
@@ -57,7 +65,7 @@ const z = {
     padding: {
       type: String,
       default: "large",
-      validator: (e) => Object.keys(x).some((c) => c === e)
+      validator: (e) => Object.keys(w).some((i) => i === e)
     },
     /**
        * Displaces the content box from its anchor element
@@ -74,7 +82,7 @@ const z = {
     id: {
       type: String,
       default() {
-        return j();
+        return $();
       }
     },
     /**
@@ -113,7 +121,7 @@ const z = {
     appendTo: {
       type: [HTMLElement, String],
       default: "body",
-      validator: (e) => w.includes(e) || e instanceof HTMLElement
+      validator: (e) => R.includes(e) || e instanceof HTMLElement
     },
     /**
      * The enter delay in milliseconds before the hovercard is shown.
@@ -149,12 +157,12 @@ const z = {
      */
     "opened"
   ],
-  setup(e, { expose: c }) {
-    const a = e, l = n(a.open), d = n(!1), f = n(!1), m = n(null), v = n(null), p = n(null), u = n(null), O = n(null);
+  setup(e, { expose: i }) {
+    const a = e, l = n(a.open), d = n(!1), f = n(!1), m = n(null), v = n(null), p = n(null), u = n(null), h = n(null);
     E(() => {
       S(() => {
         var t, r, o;
-        p.value = (o = (r = (t = O.value) == null ? void 0 : t.$refs) == null ? void 0 : r.anchor) == null ? void 0 : o.firstElementChild, u.value = new MutationObserver(() => {
+        p.value = (o = (r = (t = h.value) == null ? void 0 : t.$refs) == null ? void 0 : r.anchor) == null ? void 0 : o.firstElementChild, u.value = new MutationObserver(() => {
           p.value && !p.value.isConnected && (l.value = !1);
         }), u.value.observe(document.body, {
           childList: !0,
@@ -163,9 +171,9 @@ const z = {
       });
     }), A(() => {
       u.value && u.value.disconnect(), clearTimeout(m), clearTimeout(v);
-    }), D(() => a.open, (t) => {
+    }), M(() => a.open, (t) => {
       l.value = t;
-    }, { immediate: !0 }), c({ show: y, hide: h });
+    }, { immediate: !0 }), i({ show: y, hide: O });
     function T() {
       a.open === null && (clearTimeout(v.value), m.value = setTimeout(() => {
         l.value = !0;
@@ -179,7 +187,7 @@ const z = {
     function y() {
       f.value = !0, T();
     }
-    function h() {
+    function O() {
       f.value = !1, !d.value && g();
     }
     function P() {
@@ -188,13 +196,14 @@ const z = {
     function b() {
       d.value = !1, f.value || g();
     }
-    return (t, r) => (M(), L(k(F), {
+    return (t, r) => (D(), L(k(H), {
       id: e.id,
       ref_key: "popover",
-      ref: O,
+      ref: h,
       open: l.value,
       placement: e.placement,
       "content-class": e.contentClass,
+      "content-mode": e.contentMode,
       "dialog-class": e.dialogClass,
       "fallback-placements": e.fallbackPlacements,
       padding: e.padding,
@@ -211,32 +220,32 @@ const z = {
       "leave-delay": e.leaveDelay,
       onOpened: r[0] || (r[0] = (o) => t.$emit("opened", o)),
       onMouseenterPopover: y,
-      onMouseleavePopover: h,
+      onMouseleavePopover: O,
       onMouseenterPopoverAnchor: y,
-      onMouseleavePopoverAnchor: h
+      onMouseleavePopoverAnchor: O
     }, {
       anchor: s(({ attrs: o }) => [
-        i(t.$slots, "anchor", N($(o)))
+        c(t.$slots, "anchor", I(j(o)))
       ]),
       content: s(() => [
-        I("div", {
+        N("div", {
           onFocusin: P,
           onFocusout: b
         }, [
-          i(t.$slots, "content")
+          c(t.$slots, "content")
         ], 32)
       ]),
       headerContent: s(() => [
-        i(t.$slots, "headerContent")
+        c(t.$slots, "headerContent")
       ]),
       footerContent: s(() => [
-        i(t.$slots, "footerContent")
+        c(t.$slots, "footerContent")
       ]),
       _: 3
-    }, 8, ["id", "open", "placement", "content-class", "dialog-class", "fallback-placements", "padding", "transition", "offset", "header-class", "footer-class", "append-to", "external-anchor-element", "enter-delay", "leave-delay"]));
+    }, 8, ["id", "open", "placement", "content-class", "content-mode", "dialog-class", "fallback-placements", "padding", "transition", "offset", "header-class", "footer-class", "append-to", "external-anchor-element", "enter-delay", "leave-delay"]));
   }
-};
+});
 export {
-  z as default
+  Y as default
 };
 //# sourceMappingURL=hovercard.js.map

package/dist/lib/hovercard/hovercard.js.map

@@ -1 +1 @@
-{"version":3,"file":"hovercard.js","sources":["../../../components/hovercard/hovercard.vue"],"sourcesContent":["<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-popover\n    :id=\"id\"\n    ref=\"popover\"\n    :open=\"hovercardOpen\"\n    :placement=\"placement\"\n    :content-class=\"contentClass\"\n    :dialog-class=\"dialogClass\"\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    :external-anchor-element=\"externalAnchorElement\"\n    data-qa=\"dt-hovercard\"\n    :enter-delay=\"enterDelay\"\n    :leave-delay=\"leaveDelay\"\n    @opened=\"(e) => ($emit('opened', e))\"\n    @mouseenter-popover=\"onMouseEnter\"\n    @mouseleave-popover=\"onMouseLeave\"\n    @mouseenter-popover-anchor=\"onMouseEnter\"\n    @mouseleave-popover-anchor=\"onMouseLeave\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <!-- @slot Anchor element that activates the hovercard. Usually a button. -->\n      <slot\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content>\n      <div\n        @focusin=\"onContentFocusIn\"\n        @focusout=\"onContentFocusOut\"\n      >\n        <!-- @slot Slot for the content that is displayed in the hovercard. -->\n        <slot name=\"content\" />\n      </div>\n    </template>\n    <template #headerContent>\n      <!-- @slot Slot for hovercard header content -->\n      <slot name=\"headerContent\" />\n    </template>\n\n    <template #footerContent>\n      <!-- @slot Slot for the footer content. -->\n      <slot name=\"footerContent\" />\n    </template>\n  </dt-popover>\n</template>\n\n<script setup>\nimport { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';\nimport { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';\nimport { TOOLTIP_DIRECTIONS, TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';\nimport { getUniqueString } from '@/common/utils';\n\nconst props = defineProps({\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     * Controls whether the hovercard is shown. Leaving this null will have the hovercard trigger on hover by default.\n     * If you set this value, the default trigger behavior will be disabled, and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n  open: {\n    type: Boolean,\n    default: null,\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  /**\n   * The enter delay in milliseconds before the hovercard is shown.\n   * @type number\n   */\n  enterDelay: {\n    type: Number,\n    default: TOOLTIP_DELAY_MS,\n  },\n\n  /**\n   * The leave delay in milliseconds before the hovercard is hidden.\n   * @type number\n   */\n  leaveDelay: {\n    type: Number,\n    default: TOOLTIP_DELAY_MS,\n  },\n\n  /**\n   * External anchor element reference. Use this instead of the anchor slot 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\ndefineEmits([\n  /**\n   * Emitted when hovercard is shown or hidden\n   *\n   * @event opened\n   * @type {Boolean | Array}\n   */\n  'opened',\n]);\n\nconst hovercardOpen = ref(props.open);\nconst contentFocused = ref(false);\nconst mouseOverHovercard = ref(false);\nconst inTimer = ref(null);\nconst outTimer = ref(null);\nconst anchorEl = ref(null);\nconst observer = ref(null);\nconst popover = ref(null);\n\nonMounted(() => {\n  nextTick(() => {\n    anchorEl.value = popover.value?.$refs?.anchor?.firstElementChild;\n\n    observer.value = new MutationObserver(() => {\n      if (anchorEl.value && !anchorEl.value.isConnected) {\n        hovercardOpen.value = false;\n      }\n    });\n\n    observer.value.observe(document.body, {\n      childList: true,\n      subtree: true,\n    });\n  });\n});\n\nonBeforeUnmount(() => {\n  if (observer.value) {\n    observer.value.disconnect();\n  }\n  clearTimeout(inTimer);\n  clearTimeout(outTimer);\n});\n\nwatch(() => props.open, (open) => {\n  hovercardOpen.value = open;\n}, { immediate: true });\n\ndefineExpose({ show: onMouseEnter, hide: onMouseLeave });\n\nfunction setInTimer () {\n  if (props.open === null) {\n    clearTimeout(outTimer.value);\n    inTimer.value = setTimeout(() => {\n      hovercardOpen.value = true;\n    }, props.enterDelay);\n  }\n}\n\nfunction setOutTimer () {\n  if (props.open === null) {\n    clearTimeout(inTimer.value);\n    outTimer.value = setTimeout(() => {\n      hovercardOpen.value = false;\n    }, props.leaveDelay);\n  }\n}\n\nfunction onMouseEnter () {\n  mouseOverHovercard.value = true;\n  setInTimer();\n}\n\nfunction onMouseLeave () {\n  mouseOverHovercard.value = false;\n  if (contentFocused.value) {\n    return;\n  }\n  setOutTimer();\n}\n\nfunction onContentFocusIn () {\n  contentFocused.value = true;\n  setInTimer();\n}\n\nfunction onContentFocusOut () {\n  contentFocused.value = false;\n\n  // If mouse is not over the hovercard, close it\n  if (!mouseOverHovercard.value) {\n    setOutTimer();\n  }\n}\n</script>\n"],"names":["props","__props","hovercardOpen","ref","contentFocused","mouseOverHovercard","inTimer","outTimer","anchorEl","observer","popover","onMounted","nextTick","_c","_b","_a","onBeforeUnmount","watch","open","__expose","onMouseEnter","onMouseLeave","setInTimer","setOutTimer","onContentFocusIn","onContentFocusOut","_createBlock","_unref","DtPopover","_cache","e","$emit","_withCtx","attrs","_renderSlot","_ctx","_createElementVNode"],"mappings":"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"}
+{"version":3,"file":"hovercard.js","sources":["../../../components/hovercard/hovercard.vue"],"sourcesContent":["<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-popover\n    :id=\"id\"\n    ref=\"popover\"\n    :open=\"hovercardOpen\"\n    :placement=\"placement\"\n    :content-class=\"contentClass\"\n    :content-mode=\"contentMode\"\n    :dialog-class=\"dialogClass\"\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    :external-anchor-element=\"externalAnchorElement\"\n    data-qa=\"dt-hovercard\"\n    :enter-delay=\"enterDelay\"\n    :leave-delay=\"leaveDelay\"\n    @opened=\"(e) => ($emit('opened', e))\"\n    @mouseenter-popover=\"onMouseEnter\"\n    @mouseleave-popover=\"onMouseLeave\"\n    @mouseenter-popover-anchor=\"onMouseEnter\"\n    @mouseleave-popover-anchor=\"onMouseLeave\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <!-- @slot Anchor element that activates the hovercard. Usually a button. -->\n      <slot\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content>\n      <div\n        @focusin=\"onContentFocusIn\"\n        @focusout=\"onContentFocusOut\"\n      >\n        <!-- @slot Slot for the content that is displayed in the hovercard. -->\n        <slot name=\"content\" />\n      </div>\n    </template>\n    <template #headerContent>\n      <!-- @slot Slot for hovercard header content -->\n      <slot name=\"headerContent\" />\n    </template>\n\n    <template #footerContent>\n      <!-- @slot Slot for the footer content. -->\n      <slot name=\"footerContent\" />\n    </template>\n  </dt-popover>\n</template>\n\n<script setup>\nimport { ref, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';\nimport { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';\nimport { TOOLTIP_DIRECTIONS, TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';\nimport { getUniqueString } from '@/common/utils';\nimport { CONTENT_MODE_PROP } from '@/common/mode_constants';\n\ndefineOptions({\n  name: 'DtHovercard',\n});\n\nconst props = defineProps({\n  /**\n     * Applies a color mode to the positioned content element.\n     * @values light, dark, invert\n     */\n  contentMode: CONTENT_MODE_PROP,\n\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     * Controls whether the hovercard is shown. Leaving this null will have the hovercard trigger on hover by default.\n     * If you set this value, the default trigger behavior will be disabled, and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n  open: {\n    type: Boolean,\n    default: null,\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  /**\n   * The enter delay in milliseconds before the hovercard is shown.\n   * @type number\n   */\n  enterDelay: {\n    type: Number,\n    default: TOOLTIP_DELAY_MS,\n  },\n\n  /**\n   * The leave delay in milliseconds before the hovercard is hidden.\n   * @type number\n   */\n  leaveDelay: {\n    type: Number,\n    default: TOOLTIP_DELAY_MS,\n  },\n\n  /**\n   * External anchor element reference. Use this instead of the anchor slot 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\ndefineEmits([\n  /**\n   * Emitted when hovercard is shown or hidden\n   *\n   * @event opened\n   * @type {Boolean | Array}\n   */\n  'opened',\n]);\n\nconst hovercardOpen = ref(props.open);\nconst contentFocused = ref(false);\nconst mouseOverHovercard = ref(false);\nconst inTimer = ref(null);\nconst outTimer = ref(null);\nconst anchorEl = ref(null);\nconst observer = ref(null);\nconst popover = ref(null);\n\nonMounted(() => {\n  nextTick(() => {\n    anchorEl.value = popover.value?.$refs?.anchor?.firstElementChild;\n\n    observer.value = new MutationObserver(() => {\n      if (anchorEl.value && !anchorEl.value.isConnected) {\n        hovercardOpen.value = false;\n      }\n    });\n\n    observer.value.observe(document.body, {\n      childList: true,\n      subtree: true,\n    });\n  });\n});\n\nonBeforeUnmount(() => {\n  if (observer.value) {\n    observer.value.disconnect();\n  }\n  clearTimeout(inTimer);\n  clearTimeout(outTimer);\n});\n\nwatch(() => props.open, (open) => {\n  hovercardOpen.value = open;\n}, { immediate: true });\n\ndefineExpose({ show: onMouseEnter, hide: onMouseLeave });\n\nfunction setInTimer () {\n  if (props.open === null) {\n    clearTimeout(outTimer.value);\n    inTimer.value = setTimeout(() => {\n      hovercardOpen.value = true;\n    }, props.enterDelay);\n  }\n}\n\nfunction setOutTimer () {\n  if (props.open === null) {\n    clearTimeout(inTimer.value);\n    outTimer.value = setTimeout(() => {\n      hovercardOpen.value = false;\n    }, props.leaveDelay);\n  }\n}\n\nfunction onMouseEnter () {\n  mouseOverHovercard.value = true;\n  setInTimer();\n}\n\nfunction onMouseLeave () {\n  mouseOverHovercard.value = false;\n  if (contentFocused.value) {\n    return;\n  }\n  setOutTimer();\n}\n\nfunction onContentFocusIn () {\n  contentFocused.value = true;\n  setInTimer();\n}\n\nfunction onContentFocusOut () {\n  contentFocused.value = false;\n\n  // If mouse is not over the hovercard, close it\n  if (!mouseOverHovercard.value) {\n    setOutTimer();\n  }\n}\n</script>\n"],"names":["props","__props","hovercardOpen","ref","contentFocused","mouseOverHovercard","inTimer","outTimer","anchorEl","observer","popover","onMounted","nextTick","_c","_b","_a","onBeforeUnmount","watch","open","__expose","onMouseEnter","onMouseLeave","setInTimer","setOutTimer","onContentFocusIn","onContentFocusOut","_createBlock","_unref","DtPopover","_cache","e","$emit","_withCtx","attrs","_renderSlot","_ctx","_createElementVNode"],"mappings":"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"}

package/dist/lib/icon/icon.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@dialpad/dialtone-icons/vue3"),r=require("./icon-constants.cjs"),t=require("vue"),c=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),o={compatConfig:{MODE:3},name:"DtIcon",props:{size:{type:String,default:"500",validator:e=>Object.keys(r.ICON_SIZE_MODIFIERS).includes(e)},name:{type:String,required:!0,validator:e=>r.ICON_NAMES.includes(e)},ariaLabel:{type:String,default:void 0}},data(){return{}},computed:{icon(){return i.icons[`./src/icons/${this.name}.vue`]},iconAriaLabel(){return this.ariaLabel}}};function u(e,s,n,d,_,a){return a.icon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(a.icon),{key:0,size:n.size,"aria-label":a.iconAriaLabel,"data-qa":e.$attrs["data-qa"]??"dt-icon"},null,8,["size","aria-label","data-qa"])):t.createCommentVNode("",!0)}const l=c._(o,[["render",u]]);exports.default=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@dialpad/dialtone-icons/vue"),r=require("./icon-constants.cjs"),t=require("vue"),c=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),o={compatConfig:{MODE:3},name:"DtIcon",props:{size:{type:String,default:"500",validator:e=>Object.keys(r.ICON_SIZE_MODIFIERS).includes(e)},name:{type:String,required:!0,validator:e=>r.ICON_NAMES.includes(e)},ariaLabel:{type:String,default:void 0}},data(){return{}},computed:{icon(){return i.icons[`./src/icons/${this.name}.vue`]},iconAriaLabel(){return this.ariaLabel}}};function u(e,s,n,d,_,a){return a.icon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(a.icon),{key:0,size:n.size,"aria-label":a.iconAriaLabel,"data-qa":e.$attrs["data-qa"]??"dt-icon"},null,8,["size","aria-label","data-qa"])):t.createCommentVNode("",!0)}const l=c._(o,[["render",u]]);exports.default=l;
 //# sourceMappingURL=icon.cjs.map

package/dist/lib/icon/icon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"icon.cjs","sources":["../../../components/icon/icon.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"icon\"\n    v-if=\"icon\"\n    :size=\"size\"\n    :aria-label=\"iconAriaLabel\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-icon'\"\n  />\n</template>\n\n<script>\nimport { icons } from '@dialpad/dialtone-icons/vue3';\nimport { ICON_SIZE_MODIFIERS, ICON_NAMES } from './icon_constants';\n// import { DialtoneLocalization } from '@/localization';\n// import { toFluentKeyString } from '@/common/utils';\n\n/**\n * The Icon component provides a set of glyphs and sizes to provide context your application.\n * @see https://dialtone.dialpad.com/components/icon.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtIcon',\n\n  props: {\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The icon name in kebab-case\n     */\n    name: {\n      type: String,\n      required: true,\n      validator: (name) => ICON_NAMES.includes(name),\n    },\n\n    /**\n     * The label of the icon as read out by a screen-reader. Leave this unset if your icon is purely presentational\n     */\n    ariaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  data () {\n    return {\n      // i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    icon () {\n      return icons[`./src/icons/${this.name}.vue`];\n    },\n\n    iconAriaLabel () {\n      // const fluentKey = toFluentKeyString(this.name);\n      // return this.ariaLabel || this.i18n.$t(`DIALTONE_ICON_${fluentKey}`);\n      return this.ariaLabel;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","s","ICON_SIZE_MODIFIERS","name","ICON_NAMES","icons","$options","_openBlock","_createBlock","_resolveDynamicComponent","$props","_ctx"],"mappings":"yQAoBKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,SAEN,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,QAAS,MACT,UAAYC,GAAM,OAAO,KAAKC,qBAAmB,EAAE,SAASD,CAAC,GAM/D,KAAM,CACJ,KAAM,OACN,SAAU,GACV,UAAYE,GAASC,aAAW,SAASD,CAAI,GAM/C,UAAW,CACT,KAAM,OACN,QAAS,SAIb,MAAQ,CACN,MAAO,EAGT,EAEA,SAAU,CACR,MAAQ,CACN,OAAOE,EAAAA,MAAM,eAAe,KAAK,IAAI,MAAM,CAC7C,EAEA,eAAiB,CAGf,OAAO,KAAK,SACd,EAEJ,iCAnEUC,EAAA,MAFRC,EAAAA,UAAA,EAAAC,EAAAA,YAMEC,EAAAA,wBALKH,EAAA,IAAI,EAAA,OAER,KAAMI,EAAA,KACN,aAAYJ,EAAA,cACZ,UAASK,EAAA,OAAM,SAAA,GAAA"}
+{"version":3,"file":"icon.cjs","sources":["../../../components/icon/icon.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"icon\"\n    v-if=\"icon\"\n    :size=\"size\"\n    :aria-label=\"iconAriaLabel\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-icon'\"\n  />\n</template>\n\n<script>\nimport { icons } from '@dialpad/dialtone-icons/vue';\nimport { ICON_SIZE_MODIFIERS, ICON_NAMES } from './icon_constants';\n// import { DialtoneLocalization } from '@/localization';\n// import { toFluentKeyString } from '@/common/utils';\n\n/**\n * The Icon component provides a set of glyphs and sizes to provide context your application.\n * @see https://dialtone.dialpad.com/components/icon.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtIcon',\n\n  props: {\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The icon name in kebab-case\n     */\n    name: {\n      type: String,\n      required: true,\n      validator: (name) => ICON_NAMES.includes(name),\n    },\n\n    /**\n     * The label of the icon as read out by a screen-reader. Leave this unset if your icon is purely presentational\n     */\n    ariaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  data () {\n    return {\n      // i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    icon () {\n      return icons[`./src/icons/${this.name}.vue`];\n    },\n\n    iconAriaLabel () {\n      // const fluentKey = toFluentKeyString(this.name);\n      // return this.ariaLabel || this.i18n.$t(`DIALTONE_ICON_${fluentKey}`);\n      return this.ariaLabel;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","s","ICON_SIZE_MODIFIERS","name","ICON_NAMES","icons","$options","_openBlock","_createBlock","_resolveDynamicComponent","$props","_ctx"],"mappings":"wQAoBKA,EAAU,CACb,aAAc,CAAE,KAAM,GACtB,KAAM,SAEN,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,QAAS,MACT,UAAYC,GAAM,OAAO,KAAKC,qBAAmB,EAAE,SAASD,CAAC,GAM/D,KAAM,CACJ,KAAM,OACN,SAAU,GACV,UAAYE,GAASC,aAAW,SAASD,CAAI,GAM/C,UAAW,CACT,KAAM,OACN,QAAS,SAIb,MAAQ,CACN,MAAO,EAGT,EAEA,SAAU,CACR,MAAQ,CACN,OAAOE,EAAAA,MAAM,eAAe,KAAK,IAAI,MAAM,CAC7C,EAEA,eAAiB,CAGf,OAAO,KAAK,SACd,EAEJ,iCAnEUC,EAAA,MAFRC,EAAAA,UAAA,EAAAC,EAAAA,YAMEC,EAAAA,wBALKH,EAAA,IAAI,EAAA,OAER,KAAMI,EAAA,KACN,aAAYJ,EAAA,cACZ,UAASK,EAAA,OAAM,SAAA,GAAA"}

package/dist/lib/icon/icon.js

@@ -1,4 +1,4 @@
-import { icons as t } from "@dialpad/dialtone-icons/vue3";
+import { icons as t } from "@dialpad/dialtone-icons/vue";
 import { ICON_NAMES as i, ICON_SIZE_MODIFIERS as n } from "./icon-constants.js";
 import { openBlock as o, createBlock as c, resolveDynamicComponent as s, createCommentVNode as d } from "vue";
 import { _ as l } from "../../_plugin-vue_export-helper-CHgC5LLL.js";

package/dist/lib/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../../components/icon/icon.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"icon\"\n    v-if=\"icon\"\n    :size=\"size\"\n    :aria-label=\"iconAriaLabel\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-icon'\"\n  />\n</template>\n\n<script>\nimport { icons } from '@dialpad/dialtone-icons/vue3';\nimport { ICON_SIZE_MODIFIERS, ICON_NAMES } from './icon_constants';\n// import { DialtoneLocalization } from '@/localization';\n// import { toFluentKeyString } from '@/common/utils';\n\n/**\n * The Icon component provides a set of glyphs and sizes to provide context your application.\n * @see https://dialtone.dialpad.com/components/icon.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtIcon',\n\n  props: {\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The icon name in kebab-case\n     */\n    name: {\n      type: String,\n      required: true,\n      validator: (name) => ICON_NAMES.includes(name),\n    },\n\n    /**\n     * The label of the icon as read out by a screen-reader. Leave this unset if your icon is purely presentational\n     */\n    ariaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  data () {\n    return {\n      // i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    icon () {\n      return icons[`./src/icons/${this.name}.vue`];\n    },\n\n    iconAriaLabel () {\n      // const fluentKey = toFluentKeyString(this.name);\n      // return this.ariaLabel || this.i18n.$t(`DIALTONE_ICON_${fluentKey}`);\n      return this.ariaLabel;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","s","ICON_SIZE_MODIFIERS","name","ICON_NAMES","icons","$options","_openBlock","_createBlock","_resolveDynamicComponent","$props","_ctx"],"mappings":";;;;AAoBA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACC,MAAM,OAAO,KAAKC,CAAmB,EAAE,SAASD,CAAC;AAAA;;;;IAM/D,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAACE,MAASC,EAAW,SAASD,CAAI;AAAA;;;;IAM/C,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA;AAAA;EAGT;AAAA,EAEA,UAAU;AAAA,IACR,OAAQ;AACN,aAAOE,EAAM,eAAe,KAAK,IAAI,MAAM;AAAA,IAC7C;AAAA,IAEA,gBAAiB;AAGf,aAAO,KAAK;AAAA,IACd;AAAA;AAEJ;;SAnEUC,EAAA,QAFRC,EAAA,GAAAC,EAMEC,EALKH,EAAA,IAAI,GAAA;AAAA;IAER,MAAMI,EAAA;AAAA,IACN,cAAYJ,EAAA;AAAA,IACZ,WAASK,EAAA,OAAM,SAAA,KAAA;AAAA;;;"}
+{"version":3,"file":"icon.js","sources":["../../../components/icon/icon.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"icon\"\n    v-if=\"icon\"\n    :size=\"size\"\n    :aria-label=\"iconAriaLabel\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-icon'\"\n  />\n</template>\n\n<script>\nimport { icons } from '@dialpad/dialtone-icons/vue';\nimport { ICON_SIZE_MODIFIERS, ICON_NAMES } from './icon_constants';\n// import { DialtoneLocalization } from '@/localization';\n// import { toFluentKeyString } from '@/common/utils';\n\n/**\n * The Icon component provides a set of glyphs and sizes to provide context your application.\n * @see https://dialtone.dialpad.com/components/icon.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtIcon',\n\n  props: {\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The icon name in kebab-case\n     */\n    name: {\n      type: String,\n      required: true,\n      validator: (name) => ICON_NAMES.includes(name),\n    },\n\n    /**\n     * The label of the icon as read out by a screen-reader. Leave this unset if your icon is purely presentational\n     */\n    ariaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  data () {\n    return {\n      // i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    icon () {\n      return icons[`./src/icons/${this.name}.vue`];\n    },\n\n    iconAriaLabel () {\n      // const fluentKey = toFluentKeyString(this.name);\n      // return this.ariaLabel || this.i18n.$t(`DIALTONE_ICON_${fluentKey}`);\n      return this.ariaLabel;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","s","ICON_SIZE_MODIFIERS","name","ICON_NAMES","icons","$options","_openBlock","_createBlock","_resolveDynamicComponent","$props","_ctx"],"mappings":";;;;AAoBA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACC,MAAM,OAAO,KAAKC,CAAmB,EAAE,SAASD,CAAC;AAAA;;;;IAM/D,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAACE,MAASC,EAAW,SAASD,CAAI;AAAA;;;;IAM/C,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA;AAAA;EAGT;AAAA,EAEA,UAAU;AAAA,IACR,OAAQ;AACN,aAAOE,EAAM,eAAe,KAAK,IAAI,MAAM;AAAA,IAC7C;AAAA,IAEA,gBAAiB;AAGf,aAAO,KAAK;AAAA,IACd;AAAA;AAEJ;;SAnEUC,EAAA,QAFRC,EAAA,GAAAC,EAMEC,EALKH,EAAA,IAAI,GAAA;AAAA;IAER,MAAMI,EAAA;AAAA,IACN,cAAYJ,EAAA;AAAA,IACZ,WAASK,EAAA,OAAM,SAAA,KAAA;AAAA;;;"}

package/dist/lib/illustration/illustration.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),l=require("@dialpad/dialtone-icons/vue3"),o=require("./illustration-constants.cjs"),s=Object.assign({name:"DtIllustration"},{__name:"illustration",props:{name:{type:String,required:!0,validator:e=>o.ILLUSTRATION_NAMES.includes(e)}},setup(e){const r=e,a=t.computed(()=>l.illustrations[`./src/illustrations/${r.name}.vue`]);return(n,u)=>a.value?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(a.value),{key:0,"data-qa":n.$attrs["data-qa"]??"dt-illustration"},null,8,["data-qa"])):t.createCommentVNode("",!0)}});exports.default=s;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),l=require("@dialpad/dialtone-icons/vue"),o=require("./illustration-constants.cjs"),s=Object.assign({name:"DtIllustration"},{__name:"illustration",props:{name:{type:String,required:!0,validator:e=>o.ILLUSTRATION_NAMES.includes(e)}},setup(e){const r=e,a=t.computed(()=>l.illustrations[`./src/illustrations/${r.name}.vue`]);return(n,u)=>a.value?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(a.value),{key:0,"data-qa":n.$attrs["data-qa"]??"dt-illustration"},null,8,["data-qa"])):t.createCommentVNode("",!0)}});exports.default=s;
 //# sourceMappingURL=illustration.cjs.map

package/dist/lib/illustration/illustration.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"illustration.cjs","sources":["../../../components/illustration/illustration.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"illustration\"\n    v-if=\"illustration\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-illustration'\"\n  />\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { illustrations } from '@dialpad/dialtone-icons/vue3';\nimport { ILLUSTRATION_NAMES } from './illustration_constants';\n\ndefineOptions({\n  name: 'DtIllustration',\n});\n\nconst props = defineProps({\n  /**\n     * The illustration name in kebab-case\n     */\n  name: {\n    type: String,\n    required: true,\n    validator: (name) => ILLUSTRATION_NAMES.includes(name),\n  },\n});\n\nconst illustration = computed(() => illustrations[`./src/illustrations/${props.name}.vue`]);\n</script>\n"],"names":["props","__props","illustration","computed","illustrations","_openBlock","_createBlock","_resolveDynamicComponent","$attrs"],"mappings":"oXAiBA,MAAMA,EAAQC,EAWRC,EAAeC,EAAAA,SAAS,IAAMC,gBAAc,uBAAuBJ,EAAM,IAAI,MAAM,CAAC,eAzBhFE,EAAA,OAFRG,EAAAA,UAAA,EAAAC,EAAAA,YAIEC,EAAAA,wBAHKL,EAAA,KAAY,EAAA,OAEhB,UAASM,EAAAA,OAAM,SAAA,GAAA"}
+{"version":3,"file":"illustration.cjs","sources":["../../../components/illustration/illustration.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"illustration\"\n    v-if=\"illustration\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-illustration'\"\n  />\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { illustrations } from '@dialpad/dialtone-icons/vue';\nimport { ILLUSTRATION_NAMES } from './illustration_constants';\n\ndefineOptions({\n  name: 'DtIllustration',\n});\n\nconst props = defineProps({\n  /**\n     * The illustration name in kebab-case\n     */\n  name: {\n    type: String,\n    required: true,\n    validator: (name) => ILLUSTRATION_NAMES.includes(name),\n  },\n});\n\nconst illustration = computed(() => illustrations[`./src/illustrations/${props.name}.vue`]);\n</script>\n"],"names":["props","__props","illustration","computed","illustrations","_openBlock","_createBlock","_resolveDynamicComponent","$attrs"],"mappings":"mXAiBA,MAAMA,EAAQC,EAWRC,EAAeC,EAAAA,SAAS,IAAMC,gBAAc,uBAAuBJ,EAAM,IAAI,MAAM,CAAC,eAzBhFE,EAAA,OAFRG,EAAAA,UAAA,EAAAC,EAAAA,YAIEC,EAAAA,wBAHKL,EAAA,KAAY,EAAA,OAEhB,UAASM,EAAAA,OAAM,SAAA,GAAA"}

package/dist/lib/illustration/illustration.js

@@ -1,5 +1,5 @@
 import { computed as o, openBlock as n, createBlock as l, resolveDynamicComponent as s, createCommentVNode as i } from "vue";
-import { illustrations as u } from "@dialpad/dialtone-icons/vue3";
+import { illustrations as u } from "@dialpad/dialtone-icons/vue";
 import { ILLUSTRATION_NAMES as m } from "./illustration-constants.js";
 const f = /* @__PURE__ */ Object.assign({
   name: "DtIllustration"

package/dist/lib/illustration/illustration.js.map

@@ -1 +1 @@
-{"version":3,"file":"illustration.js","sources":["../../../components/illustration/illustration.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"illustration\"\n    v-if=\"illustration\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-illustration'\"\n  />\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { illustrations } from '@dialpad/dialtone-icons/vue3';\nimport { ILLUSTRATION_NAMES } from './illustration_constants';\n\ndefineOptions({\n  name: 'DtIllustration',\n});\n\nconst props = defineProps({\n  /**\n     * The illustration name in kebab-case\n     */\n  name: {\n    type: String,\n    required: true,\n    validator: (name) => ILLUSTRATION_NAMES.includes(name),\n  },\n});\n\nconst illustration = computed(() => illustrations[`./src/illustrations/${props.name}.vue`]);\n</script>\n"],"names":["props","__props","illustration","computed","illustrations","_openBlock","_createBlock","_resolveDynamicComponent","$attrs"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,UAAMA,IAAQC,GAWRC,IAAeC,EAAS,MAAMC,EAAc,uBAAuBJ,EAAM,IAAI,MAAM,CAAC;qBAzBhFE,EAAA,SAFRG,EAAA,GAAAC,EAIEC,EAHKL,EAAA,KAAY,GAAA;AAAA;MAEhB,WAASM,EAAAA,OAAM,SAAA,KAAA;AAAA;;;"}
+{"version":3,"file":"illustration.js","sources":["../../../components/illustration/illustration.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"illustration\"\n    v-if=\"illustration\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-illustration'\"\n  />\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { illustrations } from '@dialpad/dialtone-icons/vue';\nimport { ILLUSTRATION_NAMES } from './illustration_constants';\n\ndefineOptions({\n  name: 'DtIllustration',\n});\n\nconst props = defineProps({\n  /**\n     * The illustration name in kebab-case\n     */\n  name: {\n    type: String,\n    required: true,\n    validator: (name) => ILLUSTRATION_NAMES.includes(name),\n  },\n});\n\nconst illustration = computed(() => illustrations[`./src/illustrations/${props.name}.vue`]);\n</script>\n"],"names":["props","__props","illustration","computed","illustrations","_openBlock","_createBlock","_resolveDynamicComponent","$attrs"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,UAAMA,IAAQC,GAWRC,IAAeC,EAAS,MAAMC,EAAc,uBAAuBJ,EAAM,IAAI,MAAM,CAAC;qBAzBhFE,EAAA,SAFRG,EAAA,GAAAC,EAIEC,EAHKL,EAAA,KAAY,GAAA;AAAA;MAEhB,WAASM,EAAAA,OAAM,SAAA,KAAA;AAAA;;;"}

package/dist/lib/image-viewer/image-viewer.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("../../common/mixins/modal.cjs"),m=require("../../common/utils/index.cjs"),r=require("../../common/constants/index.cjs"),_=require("@dialpad/dialtone-icons/vue3"),p=require("../../shared/sr_only_close_button.cjs"),f=require("../../localization/index.cjs"),e=require("vue"),g=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),h=require("../button/button.cjs"),v={compatConfig:{MODE:3},name:"DtImageViewer",components:{SrOnlyCloseButton:p.default,DtButton:h.default,DtIconClose:_.DtIconClose},mixins:[d.default],props:{appendTo:{type:String,default:"body"},open:{type:Boolean,default:null},imageSrc:{type:String,required:!0},imageAlt:{type:String,required:!0},imageButtonClass:{type:String,required:!1,default:""},ariaLabel:{type:String,required:!0}},emits:["opened","update:open"],data(){return{showCloseButton:!0,isOpen:!1,i18n:new f.DialtoneLocalization}},computed:{modalListeners(){return{click:t=>{t.target===t.currentTarget&&this.close()},keydown:t=>{switch(t.code){case r.EVENT_KEYNAMES.esc:case r.EVENT_KEYNAMES.escape:this.close();break;case r.EVENT_KEYNAMES.tab:this.trapFocus(t);break}}}},closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},watch:{isOpen:{immediate:!0,handler(t){var o;t?this.previousActiveElement=document.activeElement:((o=this.previousActiveElement)==null||o.focus(),this.previousActiveElement=null)}},open:{handler:function(t){t!==null&&(this.isOpen=t)},immediate:!0}},methods:{openModal(){this.open===null&&(this.isOpen=!0,this.showCloseButton=!0,this.$emit("opened",!0),setTimeout(()=>{this.focusAfterOpen()}))},close(){this.isOpen=!1,this.$emit("opened",!1),this.open!==null&&this.$emit("update:open",!1)},focusAfterOpen(){var t,o;(o=m.returnFirstEl((t=this.$refs.closeImage)==null?void 0:t.$el))==null||o.focus()},trapFocus(t){this.isOpen&&this.focusTrappedTabPress(t)}}},C=["src","alt"],w=["aria-hidden"],E={"data-qa":"dt-image-viewer-full",class:"d-image-viewer__full",role:"dialog","aria-modal":"true"},b=["src","alt"];function B(t,o,n,T,l,i){const a=e.resolveComponent("dt-button"),c=e.resolveComponent("dt-icon-close"),u=e.resolveComponent("sr-only-close-button");return e.openBlock(),e.createElementBlock("div",null,[e.createVNode(a,{"data-qa":"dt-image-viewer-preview",class:"d-image-viewer__preview-button","aria-label":n.ariaLabel,importance:"clear",onClick:i.openModal},{default:e.withCtx(()=>[e.createElementVNode("img",{class:e.normalizeClass(n.imageButtonClass),src:n.imageSrc,alt:n.imageAlt},null,10,C)]),_:1},8,["aria-label","onClick"]),l.isOpen?(e.openBlock(),e.createBlock(e.Teleport,{key:0,to:n.appendTo},[e.createElementVNode("div",e.mergeProps({"aria-hidden":l.isOpen?"false":"true",class:"d-modal","data-qa":"dt-modal"},e.toHandlers(i.modalListeners,!0),{onMouseover:o[0]||(o[0]=s=>l.showCloseButton=!0),onMouseleave:o[1]||(o[1]=s=>l.showCloseButton=!1),onFocusin:o[2]||(o[2]=s=>l.showCloseButton=!0),onFocusout:o[3]||(o[3]=s=>l.showCloseButton=!1)}),[e.createElementVNode("div",E,[e.createElementVNode("img",{class:"d-image-viewer__full__image",src:n.imageSrc,alt:n.imageAlt},null,8,b)]),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[l.showCloseButton?(e.openBlock(),e.createBlock(a,{key:0,ref:"closeImage","data-qa":"dt-image-viewer-close-btn",class:"d-modal__close",circle:"",size:"lg",importance:"clear",kind:"inverted","aria-label":i.closeButtonTitle,title:i.closeButtonTitle,onClick:i.close},{icon:e.withCtx(()=>[e.createVNode(c,{class:"d-image-viewer__close-button",size:"400"})]),_:1},8,["aria-label","title","onClick"])):(e.openBlock(),e.createBlock(u,{key:1,onClose:i.close},null,8,["onClose"]))]),_:1})],16,w)],8,["to"])):e.createCommentVNode("",!0)])}const k=g._(v,[["render",B]]);exports.default=k;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("../../common/mixins/modal.cjs"),m=require("../../common/mixins/mode.cjs"),_=require("../../common/utils/index.cjs"),r=require("../../common/constants/index.cjs"),p=require("@dialpad/dialtone-icons/vue"),f=require("../../shared/sr_only_close_button.cjs"),g=require("../../localization/index.cjs"),e=require("vue"),h=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),v=require("../button/button.cjs"),C={compatConfig:{MODE:3},name:"DtImageViewer",components:{SrOnlyCloseButton:f.default,DtButton:v.default,DtIconClose:p.DtIconClose},mixins:[d.default,m.default],props:{appendTo:{type:String,default:"body"},open:{type:Boolean,default:null},imageSrc:{type:String,required:!0},imageAlt:{type:String,required:!0},imageButtonClass:{type:String,required:!1,default:""},ariaLabel:{type:String,required:!0}},emits:["opened","update:open"],data(){return{showCloseButton:!0,isOpen:!1,i18n:new g.DialtoneLocalization}},computed:{modalListeners(){return{click:t=>{t.target===t.currentTarget&&this.close()},keydown:t=>{switch(t.code){case r.EVENT_KEYNAMES.esc:case r.EVENT_KEYNAMES.escape:this.close();break;case r.EVENT_KEYNAMES.tab:this.trapFocus(t);break}}}},closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},watch:{isOpen:{immediate:!0,handler(t){var o;t?this.previousActiveElement=document.activeElement:((o=this.previousActiveElement)==null||o.focus(),this.previousActiveElement=null)}},open:{handler:function(t){t!==null&&(this.isOpen=t)},immediate:!0}},methods:{openModal(){this.open===null&&(this.isOpen=!0,this.showCloseButton=!0,this.$emit("opened",!0),setTimeout(()=>{this.focusAfterOpen()}))},close(){this.isOpen=!1,this.$emit("opened",!1),this.open!==null&&this.$emit("update:open",!1)},focusAfterOpen(){var t,o;(o=_.returnFirstEl((t=this.$refs.closeImage)==null?void 0:t.$el))==null||o.focus()},trapFocus(t){this.isOpen&&this.focusTrappedTabPress(t)}}},w=["src","alt"],E=["aria-hidden"],b={"data-qa":"dt-image-viewer-full",class:"d-image-viewer__full",role:"dialog","aria-modal":"true"},B=["src","alt"];function k(t,o,n,T,l,i){const a=e.resolveComponent("dt-button"),c=e.resolveComponent("dt-icon-close"),u=e.resolveComponent("sr-only-close-button");return e.openBlock(),e.createElementBlock("div",null,[e.createVNode(a,{"data-qa":"dt-image-viewer-preview",class:"d-image-viewer__preview-button","aria-label":n.ariaLabel,importance:"clear",onClick:i.openModal},{default:e.withCtx(()=>[e.createElementVNode("img",{class:e.normalizeClass(n.imageButtonClass),src:n.imageSrc,alt:n.imageAlt},null,10,w)]),_:1},8,["aria-label","onClick"]),l.isOpen?(e.openBlock(),e.createBlock(e.Teleport,{key:0,to:n.appendTo},[e.createElementVNode("div",e.mergeProps({"aria-hidden":l.isOpen?"false":"true",class:"d-modal","data-qa":"dt-modal"},t.modeAttrs,e.toHandlers(i.modalListeners,!0),{onMouseover:o[0]||(o[0]=s=>l.showCloseButton=!0),onMouseleave:o[1]||(o[1]=s=>l.showCloseButton=!1),onFocusin:o[2]||(o[2]=s=>l.showCloseButton=!0),onFocusout:o[3]||(o[3]=s=>l.showCloseButton=!1)}),[e.createElementVNode("div",b,[e.createElementVNode("img",{class:"d-image-viewer__full__image",src:n.imageSrc,alt:n.imageAlt},null,8,B)]),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[l.showCloseButton?(e.openBlock(),e.createBlock(a,{key:0,ref:"closeImage","data-qa":"dt-image-viewer-close-btn",class:"d-modal__close",circle:"",size:400,importance:"clear",kind:"inverted","aria-label":i.closeButtonTitle,title:i.closeButtonTitle,onClick:i.close},{icon:e.withCtx(()=>[e.createVNode(c,{class:"d-image-viewer__close-button",size:"400"})]),_:1},8,["aria-label","title","onClick"])):(e.openBlock(),e.createBlock(u,{key:1,onClose:i.close},null,8,["onClose"]))]),_:1})],16,E)],8,["to"])):e.createCommentVNode("",!0)])}const q=h._(C,[["render",k]]);exports.default=q;
 //# sourceMappingURL=image-viewer.cjs.map

package/dist/lib/image-viewer/image-viewer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.cjs","sources":["../../../components/image_viewer/image_viewer.vue"],"sourcesContent":["<template>\n  <div>\n    <dt-button\n      data-qa=\"dt-image-viewer-preview\"\n      class=\"d-image-viewer__preview-button\"\n      :aria-label=\"ariaLabel\"\n      importance=\"clear\"\n      @click=\"openModal\"\n    >\n      <img\n        :class=\"imageButtonClass\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n    </dt-button>\n    <Teleport\n      v-if=\"isOpen\"\n      :to=\"appendTo\"\n    >\n      <div\n        :aria-hidden=\"!isOpen ? 'true' : 'false'\"\n        class=\"d-modal\"\n        data-qa=\"dt-modal\"\n        v-on=\"modalListeners\"\n        @mouseover=\"showCloseButton = true\"\n        @mouseleave=\"showCloseButton = false\"\n        @focusin=\" showCloseButton = true\"\n        @focusout=\" showCloseButton = false\"\n      >\n        <div\n          data-qa=\"dt-image-viewer-full\"\n          class=\"d-image-viewer__full\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <img\n            class=\"d-image-viewer__full__image\"\n            :src=\"imageSrc\"\n            :alt=\"imageAlt\"\n          >\n        </div>\n        <transition name=\"fade\">\n          <dt-button\n            v-if=\"showCloseButton\"\n            ref=\"closeImage\"\n            data-qa=\"dt-image-viewer-close-btn\"\n            class=\"d-modal__close\"\n            circle\n            size=\"lg\"\n            importance=\"clear\"\n            kind=\"inverted\"\n            :aria-label=\"closeButtonTitle\"\n            :title=\"closeButtonTitle\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon-close\n                class=\"d-image-viewer__close-button\"\n                size=\"400\"\n              />\n            </template>\n          </dt-button>\n          <sr-only-close-button\n            v-else\n            @close=\"close\"\n          />\n        </transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { returnFirstEl } from '@/common/utils';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtImageViewer',\n\n  components: {\n    SrOnlyCloseButton,\n    DtButton,\n    DtIconClose,\n  },\n\n  mixins: [Modal],\n\n  props: {\n    /**\n     * By default the portal appends to the body of the root parent. We can modify\n     * this behaviour by passing an appendTo prop that points to an id or an html tag from the root of the parent.\n     * The appendTo prop expects a CSS selector string or an actual DOM node.\n     * type: string | HTMLElement, default: 'body'\n     */\n    appendTo: {\n      type: String,\n      default: 'body',\n    },\n\n    /**\n     * Controls whether the image modal is shown. Leaving this null will have the image modal\n     * trigger on click by default.\n     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * URL of the image to be shown\n     */\n    imageSrc: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Alt text of image\n     */\n    imageAlt: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Image Class\n     */\n    imageButtonClass: {\n      type: String,\n      required: false,\n      default: '',\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n  ],\n\n  data () {\n    return {\n      showCloseButton: true,\n      isOpen: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          (event.target === event.currentTarget) && this.close();\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n        },\n      };\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  watch: {\n    isOpen: {\n      immediate: true,\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n        } else {\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    openModal () {\n      // Has custom control passed in\n      if (this.open !== null) {\n        return;\n      }\n      this.isOpen = true;\n      this.showCloseButton = true;\n      this.$emit('opened', true);\n\n      setTimeout(() => {\n        this.focusAfterOpen();\n      });\n    },\n\n    close () {\n      this.isOpen = false;\n      this.$emit('opened', false);\n\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    focusAfterOpen () {\n      returnFirstEl(this.$refs.closeImage?.$el)?.focus();\n    },\n\n    trapFocus (e) {\n      if (this.isOpen) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","SrOnlyCloseButton","DtButton","DtIconClose","Modal","DialtoneLocalization","event","EVENT_KEYNAMES","isShowing","_a","open","returnFirstEl","e","_createElementBlock","_createVNode","_component_dt_button","$props","$options","_createElementVNode","$data","_createBlock","_Teleport","_mergeProps","_toHandlers","_hoisted_3","_Transition","_component_dt_icon_close","_component_sr_only_close_button"],"mappings":"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"}
+{"version":3,"file":"image-viewer.cjs","sources":["../../../components/image_viewer/image_viewer.vue"],"sourcesContent":["<template>\n  <div>\n    <dt-button\n      data-qa=\"dt-image-viewer-preview\"\n      class=\"d-image-viewer__preview-button\"\n      :aria-label=\"ariaLabel\"\n      importance=\"clear\"\n      @click=\"openModal\"\n    >\n      <img\n        :class=\"imageButtonClass\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n    </dt-button>\n    <Teleport\n      v-if=\"isOpen\"\n      :to=\"appendTo\"\n    >\n      <div\n        :aria-hidden=\"!isOpen ? 'true' : 'false'\"\n        class=\"d-modal\"\n        data-qa=\"dt-modal\"\n        v-bind=\"modeAttrs\"\n        v-on=\"modalListeners\"\n        @mouseover=\"showCloseButton = true\"\n        @mouseleave=\"showCloseButton = false\"\n        @focusin=\" showCloseButton = true\"\n        @focusout=\" showCloseButton = false\"\n      >\n        <div\n          data-qa=\"dt-image-viewer-full\"\n          class=\"d-image-viewer__full\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <img\n            class=\"d-image-viewer__full__image\"\n            :src=\"imageSrc\"\n            :alt=\"imageAlt\"\n          >\n        </div>\n        <transition name=\"fade\">\n          <dt-button\n            v-if=\"showCloseButton\"\n            ref=\"closeImage\"\n            data-qa=\"dt-image-viewer-close-btn\"\n            class=\"d-modal__close\"\n            circle\n            :size=\"400\"\n            importance=\"clear\"\n            kind=\"inverted\"\n            :aria-label=\"closeButtonTitle\"\n            :title=\"closeButtonTitle\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon-close\n                class=\"d-image-viewer__close-button\"\n                size=\"400\"\n              />\n            </template>\n          </dt-button>\n          <sr-only-close-button\n            v-else\n            @close=\"close\"\n          />\n        </transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport ModeMixin from '@/common/mixins/mode';\nimport { returnFirstEl } from '@/common/utils';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtImageViewer',\n\n  components: {\n    SrOnlyCloseButton,\n    DtButton,\n    DtIconClose,\n  },\n\n  mixins: [Modal, ModeMixin],\n\n  props: {\n    /**\n     * By default the portal appends to the body of the root parent. We can modify\n     * this behaviour by passing an appendTo prop that points to an id or an html tag from the root of the parent.\n     * The appendTo prop expects a CSS selector string or an actual DOM node.\n     * type: string | HTMLElement, default: 'body'\n     */\n    appendTo: {\n      type: String,\n      default: 'body',\n    },\n\n    /**\n     * Controls whether the image modal is shown. Leaving this null will have the image modal\n     * trigger on click by default.\n     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * URL of the image to be shown\n     */\n    imageSrc: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Alt text of image\n     */\n    imageAlt: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Image Class\n     */\n    imageButtonClass: {\n      type: String,\n      required: false,\n      default: '',\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n  ],\n\n  data () {\n    return {\n      showCloseButton: true,\n      isOpen: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          (event.target === event.currentTarget) && this.close();\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n        },\n      };\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  watch: {\n    isOpen: {\n      immediate: true,\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n        } else {\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    openModal () {\n      // Has custom control passed in\n      if (this.open !== null) {\n        return;\n      }\n      this.isOpen = true;\n      this.showCloseButton = true;\n      this.$emit('opened', true);\n\n      setTimeout(() => {\n        this.focusAfterOpen();\n      });\n    },\n\n    close () {\n      this.isOpen = false;\n      this.$emit('opened', false);\n\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    focusAfterOpen () {\n      returnFirstEl(this.$refs.closeImage?.$el)?.focus();\n    },\n\n    trapFocus (e) {\n      if (this.isOpen) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","SrOnlyCloseButton","DtButton","DtIconClose","Modal","ModeMixin","DialtoneLocalization","event","EVENT_KEYNAMES","isShowing","_a","open","returnFirstEl","e","_createElementBlock","_createVNode","_component_dt_button","$props","$options","_createElementVNode","$data","_createBlock","_Teleport","_mergeProps","_ctx","_toHandlers","_hoisted_3","_Transition","_component_dt_icon_close","_component_sr_only_close_button"],"mappings":"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"}

package/dist/lib/image-viewer/image-viewer.js

@@ -1,21 +1,22 @@
 import g from "../../common/mixins/modal.js";
-import { returnFirstEl as h } from "../../common/utils/index.js";
+import h from "../../common/mixins/mode.js";
+import { returnFirstEl as v } from "../../common/utils/index.js";
 import { EVENT_KEYNAMES as a } from "../../common/constants/index.js";
-import { DtIconClose as v } from "@dialpad/dialtone-icons/vue3";
-import w from "../../shared/sr_only_close_button.js";
-import { DialtoneLocalization as C } from "../../localization/index.js";
-import { resolveComponent as u, openBlock as l, createElementBlock as B, createVNode as c, withCtx as m, createElementVNode as n, normalizeClass as b, createBlock as d, Teleport as k, mergeProps as O, toHandlers as T, Transition as y, createCommentVNode as E } from "vue";
+import { DtIconClose as w } from "@dialpad/dialtone-icons/vue";
+import C from "../../shared/sr_only_close_button.js";
+import { DialtoneLocalization as B } from "../../localization/index.js";
+import { resolveComponent as u, openBlock as l, createElementBlock as b, createVNode as c, withCtx as m, createElementVNode as n, normalizeClass as k, createBlock as d, Teleport as O, mergeProps as T, toHandlers as y, Transition as E, createCommentVNode as A } from "vue";
 import { _ as S } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import A from "../button/button.js";
+import M from "../button/button.js";
 const q = {
   compatConfig: { MODE: 3 },
   name: "DtImageViewer",
   components: {
-    SrOnlyCloseButton: w,
-    DtButton: A,
-    DtIconClose: v
+    SrOnlyCloseButton: C,
+    DtButton: M,
+    DtIconClose: w
   },
-  mixins: [g],
+  mixins: [g, h],
   props: {
     /**
      * By default the portal appends to the body of the root parent. We can modify
@@ -86,7 +87,7 @@ const q = {
     return {
       showCloseButton: !0,
       isOpen: !1,
-      i18n: new C()
+      i18n: new B()
     };
   },
   computed: {
@@ -138,21 +139,21 @@ const q = {
     },
     focusAfterOpen() {
       var e, t;
-      (t = h((e = this.$refs.closeImage) == null ? void 0 : e.$el)) == null || t.focus();
+      (t = v((e = this.$refs.closeImage) == null ? void 0 : e.$el)) == null || t.focus();
     },
     trapFocus(e) {
       this.isOpen && this.focusTrappedTabPress(e);
     }
   }
-}, D = ["src", "alt"], L = ["aria-hidden"], M = {
+}, D = ["src", "alt"], L = ["aria-hidden"], N = {
   "data-qa": "dt-image-viewer-full",
   class: "d-image-viewer__full",
   role: "dialog",
   "aria-modal": "true"
-}, N = ["src", "alt"];
-function I(e, t, o, V, i, s) {
+}, I = ["src", "alt"];
+function V(e, t, o, x, i, s) {
   const p = u("dt-button"), f = u("dt-icon-close"), _ = u("sr-only-close-button");
-  return l(), B("div", null, [
+  return l(), b("div", null, [
     c(p, {
       "data-qa": "dt-image-viewer-preview",
       class: "d-image-viewer__preview-button",
@@ -162,35 +163,35 @@ function I(e, t, o, V, i, s) {
     }, {
       default: m(() => [
         n("img", {
-          class: b(o.imageButtonClass),
+          class: k(o.imageButtonClass),
           src: o.imageSrc,
           alt: o.imageAlt
         }, null, 10, D)
       ]),
       _: 1
     }, 8, ["aria-label", "onClick"]),
-    i.isOpen ? (l(), d(k, {
+    i.isOpen ? (l(), d(O, {
       key: 0,
       to: o.appendTo
     }, [
-      n("div", O({
+      n("div", T({
         "aria-hidden": i.isOpen ? "false" : "true",
         class: "d-modal",
         "data-qa": "dt-modal"
-      }, T(s.modalListeners, !0), {
+      }, e.modeAttrs, y(s.modalListeners, !0), {
         onMouseover: t[0] || (t[0] = (r) => i.showCloseButton = !0),
         onMouseleave: t[1] || (t[1] = (r) => i.showCloseButton = !1),
         onFocusin: t[2] || (t[2] = (r) => i.showCloseButton = !0),
         onFocusout: t[3] || (t[3] = (r) => i.showCloseButton = !1)
       }), [
-        n("div", M, [
+        n("div", N, [
           n("img", {
             class: "d-image-viewer__full__image",
             src: o.imageSrc,
             alt: o.imageAlt
-          }, null, 8, N)
+          }, null, 8, I)
         ]),
-        c(y, { name: "fade" }, {
+        c(E, { name: "fade" }, {
           default: m(() => [
             i.showCloseButton ? (l(), d(p, {
               key: 0,
@@ -198,7 +199,7 @@ function I(e, t, o, V, i, s) {
               "data-qa": "dt-image-viewer-close-btn",
               class: "d-modal__close",
               circle: "",
-              size: "lg",
+              size: 400,
               importance: "clear",
               kind: "inverted",
               "aria-label": s.closeButtonTitle,
@@ -220,11 +221,11 @@ function I(e, t, o, V, i, s) {
           _: 1
         })
       ], 16, L)
-    ], 8, ["to"])) : E("", !0)
+    ], 8, ["to"])) : A("", !0)
   ]);
 }
-const G = /* @__PURE__ */ S(q, [["render", I]]);
+const Q = /* @__PURE__ */ S(q, [["render", V]]);
 export {
-  G as default
+  Q as default
 };
 //# sourceMappingURL=image-viewer.js.map

package/dist/lib/image-viewer/image-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.js","sources":["../../../components/image_viewer/image_viewer.vue"],"sourcesContent":["<template>\n  <div>\n    <dt-button\n      data-qa=\"dt-image-viewer-preview\"\n      class=\"d-image-viewer__preview-button\"\n      :aria-label=\"ariaLabel\"\n      importance=\"clear\"\n      @click=\"openModal\"\n    >\n      <img\n        :class=\"imageButtonClass\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n    </dt-button>\n    <Teleport\n      v-if=\"isOpen\"\n      :to=\"appendTo\"\n    >\n      <div\n        :aria-hidden=\"!isOpen ? 'true' : 'false'\"\n        class=\"d-modal\"\n        data-qa=\"dt-modal\"\n        v-on=\"modalListeners\"\n        @mouseover=\"showCloseButton = true\"\n        @mouseleave=\"showCloseButton = false\"\n        @focusin=\" showCloseButton = true\"\n        @focusout=\" showCloseButton = false\"\n      >\n        <div\n          data-qa=\"dt-image-viewer-full\"\n          class=\"d-image-viewer__full\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <img\n            class=\"d-image-viewer__full__image\"\n            :src=\"imageSrc\"\n            :alt=\"imageAlt\"\n          >\n        </div>\n        <transition name=\"fade\">\n          <dt-button\n            v-if=\"showCloseButton\"\n            ref=\"closeImage\"\n            data-qa=\"dt-image-viewer-close-btn\"\n            class=\"d-modal__close\"\n            circle\n            size=\"lg\"\n            importance=\"clear\"\n            kind=\"inverted\"\n            :aria-label=\"closeButtonTitle\"\n            :title=\"closeButtonTitle\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon-close\n                class=\"d-image-viewer__close-button\"\n                size=\"400\"\n              />\n            </template>\n          </dt-button>\n          <sr-only-close-button\n            v-else\n            @close=\"close\"\n          />\n        </transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { returnFirstEl } from '@/common/utils';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtImageViewer',\n\n  components: {\n    SrOnlyCloseButton,\n    DtButton,\n    DtIconClose,\n  },\n\n  mixins: [Modal],\n\n  props: {\n    /**\n     * By default the portal appends to the body of the root parent. We can modify\n     * this behaviour by passing an appendTo prop that points to an id or an html tag from the root of the parent.\n     * The appendTo prop expects a CSS selector string or an actual DOM node.\n     * type: string | HTMLElement, default: 'body'\n     */\n    appendTo: {\n      type: String,\n      default: 'body',\n    },\n\n    /**\n     * Controls whether the image modal is shown. Leaving this null will have the image modal\n     * trigger on click by default.\n     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * URL of the image to be shown\n     */\n    imageSrc: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Alt text of image\n     */\n    imageAlt: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Image Class\n     */\n    imageButtonClass: {\n      type: String,\n      required: false,\n      default: '',\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n  ],\n\n  data () {\n    return {\n      showCloseButton: true,\n      isOpen: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          (event.target === event.currentTarget) && this.close();\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n        },\n      };\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  watch: {\n    isOpen: {\n      immediate: true,\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n        } else {\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    openModal () {\n      // Has custom control passed in\n      if (this.open !== null) {\n        return;\n      }\n      this.isOpen = true;\n      this.showCloseButton = true;\n      this.$emit('opened', true);\n\n      setTimeout(() => {\n        this.focusAfterOpen();\n      });\n    },\n\n    close () {\n      this.isOpen = false;\n      this.$emit('opened', false);\n\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    focusAfterOpen () {\n      returnFirstEl(this.$refs.closeImage?.$el)?.focus();\n    },\n\n    trapFocus (e) {\n      if (this.isOpen) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","SrOnlyCloseButton","DtButton","DtIconClose","Modal","DialtoneLocalization","event","EVENT_KEYNAMES","isShowing","_a","open","_b","returnFirstEl","_createElementBlock","_createVNode","_component_dt_button","$props","$options","_createElementVNode","$data","_createBlock","_Teleport","_mergeProps","_toHandlers","_hoisted_3","_Transition","_component_dt_icon_close","_component_sr_only_close_button"],"mappings":"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"}
+{"version":3,"file":"image-viewer.js","sources":["../../../components/image_viewer/image_viewer.vue"],"sourcesContent":["<template>\n  <div>\n    <dt-button\n      data-qa=\"dt-image-viewer-preview\"\n      class=\"d-image-viewer__preview-button\"\n      :aria-label=\"ariaLabel\"\n      importance=\"clear\"\n      @click=\"openModal\"\n    >\n      <img\n        :class=\"imageButtonClass\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n    </dt-button>\n    <Teleport\n      v-if=\"isOpen\"\n      :to=\"appendTo\"\n    >\n      <div\n        :aria-hidden=\"!isOpen ? 'true' : 'false'\"\n        class=\"d-modal\"\n        data-qa=\"dt-modal\"\n        v-bind=\"modeAttrs\"\n        v-on=\"modalListeners\"\n        @mouseover=\"showCloseButton = true\"\n        @mouseleave=\"showCloseButton = false\"\n        @focusin=\" showCloseButton = true\"\n        @focusout=\" showCloseButton = false\"\n      >\n        <div\n          data-qa=\"dt-image-viewer-full\"\n          class=\"d-image-viewer__full\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <img\n            class=\"d-image-viewer__full__image\"\n            :src=\"imageSrc\"\n            :alt=\"imageAlt\"\n          >\n        </div>\n        <transition name=\"fade\">\n          <dt-button\n            v-if=\"showCloseButton\"\n            ref=\"closeImage\"\n            data-qa=\"dt-image-viewer-close-btn\"\n            class=\"d-modal__close\"\n            circle\n            :size=\"400\"\n            importance=\"clear\"\n            kind=\"inverted\"\n            :aria-label=\"closeButtonTitle\"\n            :title=\"closeButtonTitle\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon-close\n                class=\"d-image-viewer__close-button\"\n                size=\"400\"\n              />\n            </template>\n          </dt-button>\n          <sr-only-close-button\n            v-else\n            @close=\"close\"\n          />\n        </transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport ModeMixin from '@/common/mixins/mode';\nimport { returnFirstEl } from '@/common/utils';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtImageViewer',\n\n  components: {\n    SrOnlyCloseButton,\n    DtButton,\n    DtIconClose,\n  },\n\n  mixins: [Modal, ModeMixin],\n\n  props: {\n    /**\n     * By default the portal appends to the body of the root parent. We can modify\n     * this behaviour by passing an appendTo prop that points to an id or an html tag from the root of the parent.\n     * The appendTo prop expects a CSS selector string or an actual DOM node.\n     * type: string | HTMLElement, default: 'body'\n     */\n    appendTo: {\n      type: String,\n      default: 'body',\n    },\n\n    /**\n     * Controls whether the image modal is shown. Leaving this null will have the image modal\n     * trigger on click by default.\n     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * URL of the image to be shown\n     */\n    imageSrc: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Alt text of image\n     */\n    imageAlt: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Image Class\n     */\n    imageButtonClass: {\n      type: String,\n      required: false,\n      default: '',\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n  ],\n\n  data () {\n    return {\n      showCloseButton: true,\n      isOpen: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          (event.target === event.currentTarget) && this.close();\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n        },\n      };\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  watch: {\n    isOpen: {\n      immediate: true,\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n        } else {\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    openModal () {\n      // Has custom control passed in\n      if (this.open !== null) {\n        return;\n      }\n      this.isOpen = true;\n      this.showCloseButton = true;\n      this.$emit('opened', true);\n\n      setTimeout(() => {\n        this.focusAfterOpen();\n      });\n    },\n\n    close () {\n      this.isOpen = false;\n      this.$emit('opened', false);\n\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    focusAfterOpen () {\n      returnFirstEl(this.$refs.closeImage?.$el)?.focus();\n    },\n\n    trapFocus (e) {\n      if (this.isOpen) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","SrOnlyCloseButton","DtButton","DtIconClose","Modal","ModeMixin","DialtoneLocalization","event","EVENT_KEYNAMES","isShowing","_a","open","_b","returnFirstEl","_createElementBlock","_createVNode","_component_dt_button","$props","$options","_createElementVNode","$data","_createBlock","_Teleport","_mergeProps","_ctx","_toHandlers","_hoisted_3","_Transition","_component_dt_icon_close","_component_sr_only_close_button"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S={TEXT:"text",TEXTAREA:"textarea",PASSWORD:"password",EMAIL:"email",NUMBER:"number",DATE:"date",TIME:"time",FILE:"file",TEL:"tel",SEARCH:"search",COLOR:"color"},t={EXTRA_SMALL:"xs",SMALL:"sm",DEFAULT:"md",LARGE:"lg",EXTRA_LARGE:"xl"},e={xs:"100",sm:"200",md:"200",lg:"400",xl:"500"},s={input:{xs:"d-input--xs",sm:"d-input--sm",lg:"d-input--lg",xl:"d-input--xl"},textarea:{xs:"d-textarea--xs",sm:"d-textarea--sm",lg:"d-textarea--lg",xl:"d-textarea--xl"}},E={error:"d-input--error",warning:"d-input--warning",success:"d-input--success"},l={lg:"d-description--lg",xl:"d-description--xl"},d={xs:"d-label--xs",sm:"d-label--sm",md:"d-label--md",lg:"d-label--lg",xl:"d-label--xl"},I={INPUT_TYPES:S,INPUT_SIZES:t,INPUT_ICON_SIZES:e,INPUT_SIZE_CLASSES:s,INPUT_STATE_CLASSES:E,DESCRIPTION_SIZE_CLASSES:l,LABEL_SIZE_CLASSES:d};exports.DESCRIPTION_SIZE_CLASSES=l;exports.INPUT_ICON_SIZES=e;exports.INPUT_SIZES=t;exports.INPUT_SIZE_CLASSES=s;exports.INPUT_STATE_CLASSES=E;exports.INPUT_TYPES=S;exports.LABEL_SIZE_CLASSES=d;exports.default=I;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t={TEXT:"text",TEXTAREA:"textarea",PASSWORD:"password",EMAIL:"email",NUMBER:"number",DATE:"date",TIME:"time",FILE:"file",TEL:"tel",SEARCH:"search",COLOR:"color"},e={EXTRA_SMALL:"xs",SMALL:"sm",DEFAULT:"md",LARGE:"lg",EXTRA_LARGE:"xl"},s={100:"100",200:"200",300:"200",400:"400",500:"500",xs:"100",sm:"200",md:"200",lg:"400",xl:"500"},d={input:{100:"d-input--xs",200:"d-input--sm",400:"d-input--lg",500:"d-input--xl",xs:"d-input--xs",sm:"d-input--sm",lg:"d-input--lg",xl:"d-input--xl"},textarea:{100:"d-textarea--xs",200:"d-textarea--sm",400:"d-textarea--lg",500:"d-textarea--xl",xs:"d-textarea--xs",sm:"d-textarea--sm",lg:"d-textarea--lg",xl:"d-textarea--xl"}},S={error:"d-input--error",warning:"d-input--warning",success:"d-input--success"},i={100:"d-description--xs",200:"d-description--sm",300:"",400:"d-description--lg",500:"d-description--xl",xs:"d-description--xs",sm:"d-description--sm",md:"",lg:"d-description--lg",xl:"d-description--xl"},n={INPUT_TYPES:t,INPUT_SIZES:e,INPUT_ICON_SIZES:s,INPUT_SIZE_CLASSES:d,INPUT_STATE_CLASSES:S,DESCRIPTION_SIZE_CLASSES:i};exports.DESCRIPTION_SIZE_CLASSES=i;exports.INPUT_ICON_SIZES=s;exports.INPUT_SIZES=e;exports.INPUT_SIZE_CLASSES=d;exports.INPUT_STATE_CLASSES=S;exports.INPUT_TYPES=t;exports.default=n;
 //# sourceMappingURL=input-constants.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-constants.cjs","sources":["../../../components/input/input_constants.js"],"sourcesContent":["// Valid input types, any other input types (for example: 'radio' or 'checkbox') should\n// use the respective base vue components (radio.vue and checkout.vue).\nexport const INPUT_TYPES = {\n  TEXT: 'text',\n  TEXTAREA: 'textarea',\n  PASSWORD: 'password',\n  EMAIL: 'email',\n  NUMBER: 'number',\n  DATE: 'date',\n  TIME: 'time',\n  FILE: 'file',\n  TEL: 'tel',\n  SEARCH: 'search',\n  COLOR: 'color',\n};\n\nexport const INPUT_SIZES = {\n  EXTRA_SMALL: 'xs',\n  SMALL: 'sm',\n  DEFAULT: 'md',\n  LARGE: 'lg',\n  EXTRA_LARGE: 'xl',\n};\n\nexport const INPUT_ICON_SIZES = {\n  xs: '100',\n  sm: '200',\n  md: '200',\n  lg: '400',\n  xl: '500',\n};\n\nexport const INPUT_SIZE_CLASSES = {\n  input: {\n    xs: 'd-input--xs',\n    sm: 'd-input--sm',\n    lg: 'd-input--lg',\n    xl: 'd-input--xl',\n  },\n\n  textarea: {\n    xs: 'd-textarea--xs',\n    sm: 'd-textarea--sm',\n    lg: 'd-textarea--lg',\n    xl: 'd-textarea--xl',\n  },\n};\n\nexport const INPUT_STATE_CLASSES = {\n  error: 'd-input--error',\n  warning: 'd-input--warning',\n  success: 'd-input--success',\n};\n\nexport const DESCRIPTION_SIZE_CLASSES = {\n  lg: 'd-description--lg',\n  xl: 'd-description--xl',\n};\n\nexport const LABEL_SIZE_CLASSES = {\n  xs: 'd-label--xs',\n  sm: 'd-label--sm',\n  md: 'd-label--md',\n  lg: 'd-label--lg',\n  xl: 'd-label--xl',\n};\n\nexport default {\n  INPUT_TYPES,\n  INPUT_SIZES,\n  INPUT_ICON_SIZES,\n  INPUT_SIZE_CLASSES,\n  INPUT_STATE_CLASSES,\n  DESCRIPTION_SIZE_CLASSES,\n  LABEL_SIZE_CLASSES,\n};\n"],"names":["INPUT_TYPES","INPUT_SIZES","INPUT_ICON_SIZES","INPUT_SIZE_CLASSES","INPUT_STATE_CLASSES","DESCRIPTION_SIZE_CLASSES","LABEL_SIZE_CLASSES","input_constants"],"mappings":"4GAEY,MAACA,EAAc,CACzB,KAAM,OACN,SAAU,WACV,SAAU,WACV,MAAO,QACP,OAAQ,SACR,KAAM,OACN,KAAM,OACN,KAAM,OACN,IAAK,MACL,OAAQ,SACR,MAAO,OACT,EAEaC,EAAc,CACzB,YAAa,KACb,MAAO,KACP,QAAS,KACT,MAAO,KACP,YAAa,IACf,EAEaC,EAAmB,CAC9B,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,KACN,EAEaC,EAAqB,CAChC,MAAO,CACL,GAAI,cACJ,GAAI,cACJ,GAAI,cACJ,GAAI,aACR,EAEE,SAAU,CACR,GAAI,iBACJ,GAAI,iBACJ,GAAI,iBACJ,GAAI,gBACR,CACA,EAEaC,EAAsB,CACjC,MAAO,iBACP,QAAS,mBACT,QAAS,kBACX,EAEaC,EAA2B,CACtC,GAAI,oBACJ,GAAI,mBACN,EAEaC,EAAqB,CAChC,GAAI,cACJ,GAAI,cACJ,GAAI,cACJ,GAAI,cACJ,GAAI,aACN,EAEAC,EAAe,CACb,YAAAP,EACA,YAAAC,EACA,iBAAAC,EACA,mBAAAC,EACA,oBAAAC,EACA,yBAAAC,EACA,mBAAAC,CACF"}
+{"version":3,"file":"input-constants.cjs","sources":["../../../components/input/input_constants.js"],"sourcesContent":["// Valid input types, any other input types (for example: 'radio' or 'checkbox') should\n// use the respective base vue components (radio.vue and checkout.vue).\nexport const INPUT_TYPES = {\n  TEXT: 'text',\n  TEXTAREA: 'textarea',\n  PASSWORD: 'password',\n  EMAIL: 'email',\n  NUMBER: 'number',\n  DATE: 'date',\n  TIME: 'time',\n  FILE: 'file',\n  TEL: 'tel',\n  SEARCH: 'search',\n  COLOR: 'color',\n};\n\nexport const INPUT_SIZES = {\n  EXTRA_SMALL: 'xs',\n  SMALL: 'sm',\n  DEFAULT: 'md',\n  LARGE: 'lg',\n  EXTRA_LARGE: 'xl',\n};\n\nexport const INPUT_ICON_SIZES = {\n  // Numeric (preferred)\n  100: '100',\n  200: '200',\n  300: '200',\n  400: '400',\n  500: '500',\n  // T-shirt aliases (deprecated)\n  xs: '100',\n  sm: '200',\n  md: '200',\n  lg: '400',\n  xl: '500',\n};\n\nexport const INPUT_SIZE_CLASSES = {\n  input: {\n    // Numeric (preferred)\n    100: 'd-input--xs',\n    200: 'd-input--sm',\n    400: 'd-input--lg',\n    500: 'd-input--xl',\n    // T-shirt aliases (deprecated)\n    xs: 'd-input--xs',\n    sm: 'd-input--sm',\n    lg: 'd-input--lg',\n    xl: 'd-input--xl',\n  },\n\n  textarea: {\n    // Numeric (preferred)\n    100: 'd-textarea--xs',\n    200: 'd-textarea--sm',\n    400: 'd-textarea--lg',\n    500: 'd-textarea--xl',\n    // T-shirt aliases (deprecated)\n    xs: 'd-textarea--xs',\n    sm: 'd-textarea--sm',\n    lg: 'd-textarea--lg',\n    xl: 'd-textarea--xl',\n  },\n};\n\nexport const INPUT_STATE_CLASSES = {\n  error: 'd-input--error',\n  warning: 'd-input--warning',\n  success: 'd-input--success',\n};\n\nexport const DESCRIPTION_SIZE_CLASSES = {\n  // Numeric (preferred)\n  100: 'd-description--xs',\n  200: 'd-description--sm',\n  300: '',\n  400: 'd-description--lg',\n  500: 'd-description--xl',\n  // T-shirt aliases (deprecated)\n  xs: 'd-description--xs',\n  sm: 'd-description--sm',\n  md: '',\n  lg: 'd-description--lg',\n  xl: 'd-description--xl',\n};\n\nexport default {\n  INPUT_TYPES,\n  INPUT_SIZES,\n  INPUT_ICON_SIZES,\n  INPUT_SIZE_CLASSES,\n  INPUT_STATE_CLASSES,\n  DESCRIPTION_SIZE_CLASSES,\n};\n"],"names":["INPUT_TYPES","INPUT_SIZES","INPUT_ICON_SIZES","INPUT_SIZE_CLASSES","INPUT_STATE_CLASSES","DESCRIPTION_SIZE_CLASSES","input_constants"],"mappings":"4GAEY,MAACA,EAAc,CACzB,KAAM,OACN,SAAU,WACV,SAAU,WACV,MAAO,QACP,OAAQ,SACR,KAAM,OACN,KAAM,OACN,KAAM,OACN,IAAK,MACL,OAAQ,SACR,MAAO,OACT,EAEaC,EAAc,CACzB,YAAa,KACb,MAAO,KACP,QAAS,KACT,MAAO,KACP,YAAa,IACf,EAEaC,EAAmB,CAE9B,IAAK,MACL,IAAK,MACL,IAAK,MACL,IAAK,MACL,IAAK,MAEL,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,KACN,EAEaC,EAAqB,CAChC,MAAO,CAEL,IAAK,cACL,IAAK,cACL,IAAK,cACL,IAAK,cAEL,GAAI,cACJ,GAAI,cACJ,GAAI,cACJ,GAAI,aACR,EAEE,SAAU,CAER,IAAK,iBACL,IAAK,iBACL,IAAK,iBACL,IAAK,iBAEL,GAAI,iBACJ,GAAI,iBACJ,GAAI,iBACJ,GAAI,gBACR,CACA,EAEaC,EAAsB,CACjC,MAAO,iBACP,QAAS,mBACT,QAAS,kBACX,EAEaC,EAA2B,CAEtC,IAAK,oBACL,IAAK,oBACL,IAAK,GACL,IAAK,oBACL,IAAK,oBAEL,GAAI,oBACJ,GAAI,oBACJ,GAAI,GACJ,GAAI,oBACJ,GAAI,mBACN,EAEAC,EAAe,CACb,YAAAN,EACA,YAAAC,EACA,iBAAAC,EACA,mBAAAC,EACA,oBAAAC,EACA,yBAAAC,CACF"}