@dialpad/dialtone 9.65.1 → 9.66.0

package/dist/vue3/lib/illustration.js

@@ -1,6 +1,7 @@
 import { computed, openBlock, createBlock, resolveDynamicComponent, createCommentVNode } from "vue";
 import { illustrations } from "@dialpad/dialtone-icons/vue3";
-import illustrationNames from "@dialpad/dialtone-icons/illustrations.json";
+import vitePluginRequire_1723767262026_4180843 from "@dialpad/dialtone-icons/illustrations.json";
+const illustrationNames = vitePluginRequire_1723767262026_4180843;
 const ILLUSTRATION_NAMES = illustrationNames;
 const _sfc_main = {
   __name: "illustration",

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

@@ -1 +1 @@
-{"version":3,"file":"illustration.js","sources":["../../components/illustration/illustration_constants.js","../../components/illustration/illustration.vue"],"sourcesContent":["import illustrationNames from '@dialpad/dialtone-icons/illustrations.json' with { type: 'json' };\n\nexport const ILLUSTRATION_NAMES = illustrationNames;\n\nexport default {\n  ILLUSTRATION_NAMES,\n};\n","<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\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":[],"mappings":";;;AAEY,MAAC,qBAAqB;;;;;;;;;;;;;;ACWlC,UAAM,QAAQ;AAWd,UAAM,eAAe,SAAS,MAAM,cAAc,uBAAuB,MAAM,IAAI,MAAM,CAAC;;;;;;;;;"}
+{"version":3,"file":"illustration.js","sources":["../../components/illustration/illustration_constants.js","../../components/illustration/illustration.vue"],"sourcesContent":["const illustrationNames = require('@dialpad/dialtone-icons/illustrations.json');\n\nexport const ILLUSTRATION_NAMES = illustrationNames;\n\nexport default {\n  ILLUSTRATION_NAMES,\n};\n","<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\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":["illustrationNames","vitePluginRequire_1723767260642_55600728","ILLUSTRATION_NAMES","props","__props","illustration","computed","illustrations","name"],"mappings":";;;AAAA,MAAMA,oBAA4BC;AAE3B,MAAMC,qBAAqBF;;;;;;;;;;;;;;ACWlC,UAAMG,QAAQC;AAWd,UAAMC,eAAeC,SAAS,MAAMC,cAAc,uBAAuBJ,MAAMK,IAAI,MAAM,CAAC;;;;;;;;;"}

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const modal = require("../chunks/modal-VgxXAQFP.js");
+const modal = require("../chunks/modal-OaWxzqNt.js");
 const common_constants = require("../common/constants.cjs");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
@@ -9,7 +9,7 @@ const lib_icon = require("./icon.cjs");
 require("../common/utils.cjs");
 require("../chunks/link_constants-x8NwdqmA.js");
 require("@dialpad/dialtone-icons/vue3");
-require("../chunks/icon_constants-QYpmdE0R.js");
+require("../chunks/icon_constants-bvhFNOPu.js");
 require("@dialpad/dialtone-icons/icons.json");
 const _sfc_main = {
   name: "DtImageViewer",
@@ -19,6 +19,16 @@ const _sfc_main = {
   },
   mixins: [modal.Modal],
   props: {
+    /**
+     * By default the portal appends to the body of the root parent. We can modify
+     * this behaviour by passing an appendTo prop that points to an id or an html tag from the root of the parent.
+     * The appendTo prop expects a CSS selector string or an actual DOM node.
+     * type: string | HTMLElement, default: 'body'
+    */
+    appendTo: {
+      type: String,
+      default: "body"
+    },
     /**
      * Controls whether the image modal is shown. Leaving this null will have the image modal
      * trigger on click by default.
@@ -171,73 +181,59 @@ const _hoisted_4 = ["src", "alt"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_button = vue.resolveComponent("dt-button");
   const _component_dt_icon = vue.resolveComponent("dt-icon");
-  return vue.openBlock(), vue.createElementBlock("div", null, [
-    vue.createVNode(_component_dt_button, {
-      "data-qa": "dt-image-viewer-preview",
-      class: "d-image-viewer__preview-button",
-      "aria-label": $props.ariaLabel,
+  return vue.openBlock(), vue.createElementBlock("div", null, [vue.createVNode(_component_dt_button, {
+    "data-qa": "dt-image-viewer-preview",
+    class: "d-image-viewer__preview-button",
+    "aria-label": $props.ariaLabel,
+    importance: "clear",
+    onClick: $options.openModal
+  }, {
+    default: vue.withCtx(() => [vue.createElementVNode("img", {
+      class: vue.normalizeClass($props.imageButtonClass),
+      src: $props.imageSrc,
+      alt: $props.imageAlt
+    }, null, 10, _hoisted_1)]),
+    _: 1
+  }, 8, ["aria-label", "onClick"]), $data.isOpen ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
+    key: 0,
+    to: $props.appendTo
+  }, [vue.createElementVNode("div", vue.mergeProps({
+    "aria-hidden": !$data.isOpen ? "true" : "false",
+    class: "d-modal",
+    "data-qa": "dt-modal"
+  }, vue.toHandlers($options.modalListeners, true), {
+    onMouseover: _cache[0] || (_cache[0] = ($event) => $data.showCloseButton = true),
+    onMouseleave: _cache[1] || (_cache[1] = ($event) => $data.showCloseButton = false),
+    onFocusin: _cache[2] || (_cache[2] = ($event) => $data.showCloseButton = true),
+    onFocusout: _cache[3] || (_cache[3] = ($event) => $data.showCloseButton = false)
+  }), [vue.createElementVNode("div", _hoisted_3, [vue.createElementVNode("img", {
+    class: "d-image-viewer__full__image",
+    src: $props.imageSrc,
+    alt: $props.imageAlt
+  }, null, 8, _hoisted_4)]), vue.createVNode(vue.Transition, {
+    name: "fade"
+  }, {
+    default: vue.withCtx(() => [$data.showCloseButton ? (vue.openBlock(), vue.createBlock(_component_dt_button, {
+      key: 0,
+      ref: "closeImage",
+      "data-qa": "dt-image-viewer-close-btn",
+      class: "d-modal__close",
+      circle: "",
+      size: "lg",
       importance: "clear",
-      onClick: $options.openModal
+      kind: "inverted",
+      "aria-label": $props.closeAriaLabel,
+      onClick: $options.close
     }, {
-      default: vue.withCtx(() => [
-        vue.createElementVNode("img", {
-          class: vue.normalizeClass($props.imageButtonClass),
-          src: $props.imageSrc,
-          alt: $props.imageAlt
-        }, null, 10, _hoisted_1)
-      ]),
+      icon: vue.withCtx(() => [vue.createVNode(_component_dt_icon, {
+        class: "d-image-viewer__close-button",
+        name: "close",
+        size: "400"
+      })]),
       _: 1
-    }, 8, ["aria-label", "onClick"]),
-    $data.isOpen ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
-      key: 0,
-      to: "body"
-    }, [
-      vue.createElementVNode("div", vue.mergeProps({
-        "aria-hidden": !$data.isOpen ? "true" : "false",
-        class: "d-modal",
-        "data-qa": "dt-modal"
-      }, vue.toHandlers($options.modalListeners, true), {
-        onMouseover: _cache[0] || (_cache[0] = ($event) => $data.showCloseButton = true),
-        onMouseleave: _cache[1] || (_cache[1] = ($event) => $data.showCloseButton = false),
-        onFocusin: _cache[2] || (_cache[2] = ($event) => $data.showCloseButton = true),
-        onFocusout: _cache[3] || (_cache[3] = ($event) => $data.showCloseButton = false)
-      }), [
-        vue.createElementVNode("div", _hoisted_3, [
-          vue.createElementVNode("img", {
-            class: "d-image-viewer__full__image",
-            src: $props.imageSrc,
-            alt: $props.imageAlt
-          }, null, 8, _hoisted_4)
-        ]),
-        vue.createVNode(vue.Transition, { name: "fade" }, {
-          default: vue.withCtx(() => [
-            $data.showCloseButton ? (vue.openBlock(), vue.createBlock(_component_dt_button, {
-              key: 0,
-              ref: "closeImage",
-              "data-qa": "dt-image-viewer-close-btn",
-              class: "d-modal__close",
-              circle: "",
-              size: "lg",
-              importance: "clear",
-              kind: "inverted",
-              "aria-label": $props.closeAriaLabel,
-              onClick: $options.close
-            }, {
-              icon: vue.withCtx(() => [
-                vue.createVNode(_component_dt_icon, {
-                  class: "d-image-viewer__close-button",
-                  name: "close",
-                  size: "400"
-                })
-              ]),
-              _: 1
-            }, 8, ["aria-label", "onClick"])) : vue.createCommentVNode("", true)
-          ]),
-          _: 1
-        })
-      ], 16, _hoisted_2)
-    ])) : vue.createCommentVNode("", true)
-  ]);
+    }, 8, ["aria-label", "onClick"])) : vue.createCommentVNode("", true)]),
+    _: 1
+  })], 16, _hoisted_2)], 8, ["to"])) : vue.createCommentVNode("", true)]);
 }
 const DtImageViewer = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.DtImageViewer = DtImageViewer;

package/dist/vue3/lib/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=\"body\"\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=\"closeAriaLabel\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon\n                class=\"d-image-viewer__close-button\"\n                name=\"close\"\n                size=\"400\"\n              />\n            </template>\n          </dt-button>\n        </transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'DtImageViewer',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  mixins: [Modal],\n\n  props: {\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     * Aria label for close button\n     */\n    closeAriaLabel: {\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    };\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\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      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":["DtButton","DtIcon","Modal","EVENT_KEYNAMES","_createElementBlock","_createVNode","_createElementVNode","_createBlock","_Teleport","_mergeProps","_toHandlers","_Transition"],"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-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=\"closeAriaLabel\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon\n                class=\"d-image-viewer__close-button\"\n                name=\"close\"\n                size=\"400\"\n              />\n            </template>\n          </dt-button>\n        </transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'DtImageViewer',\n\n  components: {\n    DtButton,\n    DtIcon,\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     * 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     * Aria label for close button\n     */\n    closeAriaLabel: {\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    };\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\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      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","name","components","DtButton","DtIcon","mixins","Modal","props","appendTo","type","String","default","open","Boolean","imageSrc","required","imageAlt","imageButtonClass","ariaLabel","closeAriaLabel","emits","data","showCloseButton","isOpen","computed","modalListeners","click","event","target","currentTarget","close","keydown","code","EVENT_KEYNAMES","esc","escape","tab","trapFocus","watch","immediate","handler","isShowing","previousActiveElement","document","activeElement","focus","methods","openModal","$emit","setTimeout","focusAfterOpen","$refs","closeImage","$el","e","focusTrappedTabPress","class","role","_createElementBlock","_createVNode","_component_dt_button","$props","importance","onClick","$options","_createElementVNode","src","alt","$data","_createBlock","_Teleport","to","_mergeProps","_toHandlers","onMouseover","onMouseleave","onFocusin","onFocusout","_hoisted_3","_Transition","ref","circle","size","kind","icon","_component_dt_icon"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import { Modal } from "../chunks/modal-XOr4kiNZ.js";
+import { Modal } from "../chunks/modal-8X6poIZW.js";
 import { EVENT_KEYNAMES } from "../common/constants.js";
 import { resolveComponent, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, normalizeClass, createBlock, Teleport, mergeProps, toHandlers, Transition, createCommentVNode } from "vue";
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
@@ -7,7 +7,7 @@ import { DtIcon } from "./icon.js";
 import "../common/utils.js";
 import "../chunks/link_constants-AfTWrr-n.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-Dy4MEUJL.js";
+import "../chunks/icon_constants-gIQj4mf7.js";
 import "@dialpad/dialtone-icons/icons.json";
 const _sfc_main = {
   name: "DtImageViewer",
@@ -17,6 +17,16 @@ const _sfc_main = {
   },
   mixins: [Modal],
   props: {
+    /**
+     * By default the portal appends to the body of the root parent. We can modify
+     * this behaviour by passing an appendTo prop that points to an id or an html tag from the root of the parent.
+     * The appendTo prop expects a CSS selector string or an actual DOM node.
+     * type: string | HTMLElement, default: 'body'
+    */
+    appendTo: {
+      type: String,
+      default: "body"
+    },
     /**
      * Controls whether the image modal is shown. Leaving this null will have the image modal
      * trigger on click by default.
@@ -169,73 +179,59 @@ const _hoisted_4 = ["src", "alt"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_button = resolveComponent("dt-button");
   const _component_dt_icon = resolveComponent("dt-icon");
-  return openBlock(), createElementBlock("div", null, [
-    createVNode(_component_dt_button, {
-      "data-qa": "dt-image-viewer-preview",
-      class: "d-image-viewer__preview-button",
-      "aria-label": $props.ariaLabel,
+  return openBlock(), createElementBlock("div", null, [createVNode(_component_dt_button, {
+    "data-qa": "dt-image-viewer-preview",
+    class: "d-image-viewer__preview-button",
+    "aria-label": $props.ariaLabel,
+    importance: "clear",
+    onClick: $options.openModal
+  }, {
+    default: withCtx(() => [createElementVNode("img", {
+      class: normalizeClass($props.imageButtonClass),
+      src: $props.imageSrc,
+      alt: $props.imageAlt
+    }, null, 10, _hoisted_1)]),
+    _: 1
+  }, 8, ["aria-label", "onClick"]), $data.isOpen ? (openBlock(), createBlock(Teleport, {
+    key: 0,
+    to: $props.appendTo
+  }, [createElementVNode("div", mergeProps({
+    "aria-hidden": !$data.isOpen ? "true" : "false",
+    class: "d-modal",
+    "data-qa": "dt-modal"
+  }, toHandlers($options.modalListeners, true), {
+    onMouseover: _cache[0] || (_cache[0] = ($event) => $data.showCloseButton = true),
+    onMouseleave: _cache[1] || (_cache[1] = ($event) => $data.showCloseButton = false),
+    onFocusin: _cache[2] || (_cache[2] = ($event) => $data.showCloseButton = true),
+    onFocusout: _cache[3] || (_cache[3] = ($event) => $data.showCloseButton = false)
+  }), [createElementVNode("div", _hoisted_3, [createElementVNode("img", {
+    class: "d-image-viewer__full__image",
+    src: $props.imageSrc,
+    alt: $props.imageAlt
+  }, null, 8, _hoisted_4)]), createVNode(Transition, {
+    name: "fade"
+  }, {
+    default: withCtx(() => [$data.showCloseButton ? (openBlock(), createBlock(_component_dt_button, {
+      key: 0,
+      ref: "closeImage",
+      "data-qa": "dt-image-viewer-close-btn",
+      class: "d-modal__close",
+      circle: "",
+      size: "lg",
       importance: "clear",
-      onClick: $options.openModal
+      kind: "inverted",
+      "aria-label": $props.closeAriaLabel,
+      onClick: $options.close
     }, {
-      default: withCtx(() => [
-        createElementVNode("img", {
-          class: normalizeClass($props.imageButtonClass),
-          src: $props.imageSrc,
-          alt: $props.imageAlt
-        }, null, 10, _hoisted_1)
-      ]),
+      icon: withCtx(() => [createVNode(_component_dt_icon, {
+        class: "d-image-viewer__close-button",
+        name: "close",
+        size: "400"
+      })]),
       _: 1
-    }, 8, ["aria-label", "onClick"]),
-    $data.isOpen ? (openBlock(), createBlock(Teleport, {
-      key: 0,
-      to: "body"
-    }, [
-      createElementVNode("div", mergeProps({
-        "aria-hidden": !$data.isOpen ? "true" : "false",
-        class: "d-modal",
-        "data-qa": "dt-modal"
-      }, toHandlers($options.modalListeners, true), {
-        onMouseover: _cache[0] || (_cache[0] = ($event) => $data.showCloseButton = true),
-        onMouseleave: _cache[1] || (_cache[1] = ($event) => $data.showCloseButton = false),
-        onFocusin: _cache[2] || (_cache[2] = ($event) => $data.showCloseButton = true),
-        onFocusout: _cache[3] || (_cache[3] = ($event) => $data.showCloseButton = false)
-      }), [
-        createElementVNode("div", _hoisted_3, [
-          createElementVNode("img", {
-            class: "d-image-viewer__full__image",
-            src: $props.imageSrc,
-            alt: $props.imageAlt
-          }, null, 8, _hoisted_4)
-        ]),
-        createVNode(Transition, { name: "fade" }, {
-          default: withCtx(() => [
-            $data.showCloseButton ? (openBlock(), createBlock(_component_dt_button, {
-              key: 0,
-              ref: "closeImage",
-              "data-qa": "dt-image-viewer-close-btn",
-              class: "d-modal__close",
-              circle: "",
-              size: "lg",
-              importance: "clear",
-              kind: "inverted",
-              "aria-label": $props.closeAriaLabel,
-              onClick: $options.close
-            }, {
-              icon: withCtx(() => [
-                createVNode(_component_dt_icon, {
-                  class: "d-image-viewer__close-button",
-                  name: "close",
-                  size: "400"
-                })
-              ]),
-              _: 1
-            }, 8, ["aria-label", "onClick"])) : createCommentVNode("", true)
-          ]),
-          _: 1
-        })
-      ], 16, _hoisted_2)
-    ])) : createCommentVNode("", true)
-  ]);
+    }, 8, ["aria-label", "onClick"])) : createCommentVNode("", true)]),
+    _: 1
+  })], 16, _hoisted_2)], 8, ["to"])) : createCommentVNode("", true)]);
 }
 const DtImageViewer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/vue3/lib/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=\"body\"\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=\"closeAriaLabel\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon\n                class=\"d-image-viewer__close-button\"\n                name=\"close\"\n                size=\"400\"\n              />\n            </template>\n          </dt-button>\n        </transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'DtImageViewer',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  mixins: [Modal],\n\n  props: {\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     * Aria label for close button\n     */\n    closeAriaLabel: {\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    };\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\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      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":["_createElementBlock","_createVNode","_createElementVNode","_createBlock","_Teleport","_mergeProps","_toHandlers","_Transition"],"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-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=\"closeAriaLabel\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon\n                class=\"d-image-viewer__close-button\"\n                name=\"close\"\n                size=\"400\"\n              />\n            </template>\n          </dt-button>\n        </transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'DtImageViewer',\n\n  components: {\n    DtButton,\n    DtIcon,\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     * 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     * Aria label for close button\n     */\n    closeAriaLabel: {\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    };\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\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      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","name","components","DtButton","DtIcon","mixins","Modal","props","appendTo","type","String","default","open","Boolean","imageSrc","required","imageAlt","imageButtonClass","ariaLabel","closeAriaLabel","emits","data","showCloseButton","isOpen","computed","modalListeners","click","event","target","currentTarget","close","keydown","code","EVENT_KEYNAMES","esc","escape","tab","trapFocus","watch","immediate","handler","isShowing","previousActiveElement","document","activeElement","focus","methods","openModal","$emit","setTimeout","focusAfterOpen","$refs","closeImage","$el","e","focusTrappedTabPress","class","role","_createElementBlock","_createVNode","_component_dt_button","$props","importance","onClick","$options","_createElementVNode","src","alt","$data","_createBlock","_Teleport","to","_mergeProps","_toHandlers","onMouseover","onMouseleave","onFocusin","onFocusout","_hoisted_3","_Transition","ref","circle","size","kind","icon","_component_dt_icon"],"mappings":"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"}

package/dist/vue3/lib/input-group.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const input_group = require("../chunks/input_group-M-D25pOJ.js");
+const input_group = require("../chunks/input_group-rE6nhye8.js");
 const common_utils = require("../common/utils.cjs");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
@@ -9,7 +9,9 @@ require("../common/validators.cjs");
 require("../common/constants.cjs");
 const _sfc_main = {
   name: "DtInputGroup",
-  components: { DtValidationMessages: lib_validationMessages.DtValidationMessages },
+  components: {
+    DtValidationMessages: lib_validationMessages.DtValidationMessages
+  },
   mixins: [input_group.InputGroupMixin],
   props: {
     /**
@@ -69,23 +71,17 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createElementBlock("fieldset", {
     class: "d-input-group__fieldset",
     "data-qa": $props.dataQaGroup
-  }, [
-    $data.hasSlotContent(_ctx.$slots.legend) || _ctx.legend ? (vue.openBlock(), vue.createElementBlock("legend", vue.mergeProps({
-      key: 0,
-      class: ["d-label", _ctx.legendClass]
-    }, _ctx.legendChildProps, { "data-qa": $props.dataQaGroupLegend }), [
-      vue.renderSlot(_ctx.$slots, "legend", {}, () => [
-        vue.createTextVNode(vue.toDisplayString(_ctx.legend), 1)
-      ])
-    ], 16, _hoisted_2)) : vue.createCommentVNode("", true),
-    vue.renderSlot(_ctx.$slots, "default"),
-    vue.createVNode(_component_dt_validation_messages, vue.mergeProps({
-      "validation-messages": _ctx.formattedMessages,
-      "show-messages": _ctx.showMessages,
-      class: _ctx.messagesClass,
-      "data-qa": $props.dataQaGroupMessages
-    }, _ctx.messagesChildProps), null, 16, ["validation-messages", "show-messages", "class", "data-qa"])
-  ], 8, _hoisted_1);
+  }, [$data.hasSlotContent(_ctx.$slots.legend) || _ctx.legend ? (vue.openBlock(), vue.createElementBlock("legend", vue.mergeProps({
+    key: 0,
+    class: ["d-label", _ctx.legendClass]
+  }, _ctx.legendChildProps, {
+    "data-qa": $props.dataQaGroupLegend
+  }), [vue.renderSlot(_ctx.$slots, "legend", {}, () => [vue.createTextVNode(vue.toDisplayString(_ctx.legend), 1)])], 16, _hoisted_2)) : vue.createCommentVNode("", true), vue.renderSlot(_ctx.$slots, "default"), vue.createVNode(_component_dt_validation_messages, vue.mergeProps({
+    "validation-messages": _ctx.formattedMessages,
+    "show-messages": _ctx.showMessages,
+    class: _ctx.messagesClass,
+    "data-qa": $props.dataQaGroupMessages
+  }, _ctx.messagesChildProps), null, 16, ["validation-messages", "show-messages", "class", "data-qa"])], 8, _hoisted_1);
 }
 const DtInputGroup = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.DtInputGroup = DtInputGroup;

package/dist/vue3/lib/input-group.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.cjs","sources":["../../components/input_group/input_group.vue"],"sourcesContent":["<template>\n  <fieldset\n    class=\"d-input-group__fieldset\"\n    :data-qa=\"dataQaGroup\"\n  >\n    <legend\n      v-if=\"hasSlotContent($slots.legend) || legend\"\n      :class=\"['d-label', legendClass]\"\n      v-bind=\"legendChildProps\"\n      :data-qa=\"dataQaGroupLegend\"\n    >\n      <!-- @slot slot for Input Group Legend -->\n      <slot name=\"legend\">\n        {{ legend }}\n      </slot>\n    </legend>\n    <!-- @slot slot for Input Group Components -->\n    <slot />\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      :data-qa=\"dataQaGroupMessages\"\n      v-bind=\"messagesChildProps\"\n    />\n  </fieldset>\n</template>\n\n<script>\nimport { InputGroupMixin } from '@/common/mixins/input_group';\nimport { DtValidationMessages } from '../validation_messages';\nimport { hasSlotContent } from '@/common/utils';\n\n/**\n * Input Groups are convenience components for a grouping of related inputs.\n * While each input within the group could be independent, the `v-model` on the group\n * provides a convenient interface for determining the current state of the group.\n * @see https://dialtone.dialpad.com/components/input_group.html\n */\nexport default {\n  name: 'DtInputGroup',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputGroupMixin],\n\n  props: {\n    /**\n     * A data qa tag for the input group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'input-group',\n    },\n\n    /**\n     * A data qa tag for the input group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'input-group-legend',\n    },\n\n    /**\n     * A data qa tag for the input group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'input-group-messages',\n    },\n  },\n\n  data () {\n    return {\n      internalValue: this.value,\n      hasSlotContent,\n    };\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalValue = newValue;\n    },\n\n    /*\n     * watching value to support 2 way binding for slotted inputs.\n     * need this to pass value to slotted inputs if modified outside\n     * input group.\n     */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.value = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `input-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["DtValidationMessages","InputGroupMixin","hasSlotContent","_createElementBlock","_openBlock","_mergeProps","_renderSlot","_createVNode"],"mappings":";;;;;;;;;AAuCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY,EAAEA,sBAAAA,uBAAAA,qBAAsB;AAAA,EAEpC,QAAQ,CAACC,YAAAA,eAAe;AAAA,EAExB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA,MACpB,gBAAAC,aAAc;AAAA;EAEjB;AAAA,EAED,OAAO;AAAA,IACL,MAAO,UAAU;AACf,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAAS,kBAAkB;AACzB,aAAK,WAAW,QAAQ;AAAA,MACzB;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,cAAe,MAAM,OAAO;AAC1B,aAAO,uBAAuB,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IACvD;AAAA,EACF;AACH;;;;;0BArGEC,IAwBW,mBAAA,YAAA;AAAA,IAvBT,OAAM;AAAA,IACL,WAAS,OAAW;AAAA;IAGb,MAAA,eAAe,KAAA,OAAO,MAAM,KAAK,KAAM,UAD/CC,IAAAA,aAAAD,IAAAA,mBAUS,UAVTE,eAUS;AAAA;MARN,mBAAmB,KAAW,WAAA;AAAA,OACvB,KAAgB,kBAAA,EACvB,WAAS,OAAiB,kBAAA,CAAA,GAAA;AAAA,MAG3BC,IAAAA,WAEO,2BAFP,MAEO;AAAA,gDADF,KAAM,MAAA,GAAA,CAAA;AAAA;;IAIbA,eAAQ,KAAA,QAAA,SAAA;AAAA,IACRC,IAAA,YAME,mCANFF,eAME;AAAA,MALC,uBAAqB,KAAiB;AAAA,MACtC,iBAAe,KAAY;AAAA,MAC3B,OAAO,KAAa;AAAA,MACpB,WAAS,OAAmB;AAAA,OACrB,KAAkB,kBAAA,GAAA,MAAA,IAAA,CAAA,uBAAA,iBAAA,SAAA,SAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"input-group.cjs","sources":["../../components/input_group/input_group.vue"],"sourcesContent":["<template>\n  <fieldset\n    class=\"d-input-group__fieldset\"\n    :data-qa=\"dataQaGroup\"\n  >\n    <legend\n      v-if=\"hasSlotContent($slots.legend) || legend\"\n      :class=\"['d-label', legendClass]\"\n      v-bind=\"legendChildProps\"\n      :data-qa=\"dataQaGroupLegend\"\n    >\n      <!-- @slot slot for Input Group Legend -->\n      <slot name=\"legend\">\n        {{ legend }}\n      </slot>\n    </legend>\n    <!-- @slot slot for Input Group Components -->\n    <slot />\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      :data-qa=\"dataQaGroupMessages\"\n      v-bind=\"messagesChildProps\"\n    />\n  </fieldset>\n</template>\n\n<script>\nimport { InputGroupMixin } from '@/common/mixins/input_group';\nimport { DtValidationMessages } from '../validation_messages';\nimport { hasSlotContent } from '@/common/utils';\n\n/**\n * Input Groups are convenience components for a grouping of related inputs.\n * While each input within the group could be independent, the `v-model` on the group\n * provides a convenient interface for determining the current state of the group.\n * @see https://dialtone.dialpad.com/components/input_group.html\n */\nexport default {\n  name: 'DtInputGroup',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputGroupMixin],\n\n  props: {\n    /**\n     * A data qa tag for the input group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'input-group',\n    },\n\n    /**\n     * A data qa tag for the input group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'input-group-legend',\n    },\n\n    /**\n     * A data qa tag for the input group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'input-group-messages',\n    },\n  },\n\n  data () {\n    return {\n      internalValue: this.value,\n      hasSlotContent,\n    };\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalValue = newValue;\n    },\n\n    /*\n     * watching value to support 2 way binding for slotted inputs.\n     * need this to pass value to slotted inputs if modified outside\n     * input group.\n     */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.value = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `input-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","components","DtValidationMessages","mixins","InputGroupMixin","props","dataQaGroup","type","String","default","dataQaGroupLegend","dataQaGroupMessages","data","internalValue","value","hasSlotContent","watch","newValue","immediate","handler","newInternalValue","provideObj","methods","getMessageKey","index","id","_createElementBlock","class","$props","$data","_ctx","$slots","legend","_openBlock","_mergeProps","legendClass","legendChildProps","_renderSlot","_createVNode","_component_dt_validation_messages","formattedMessages","showMessages","messagesClass","messagesChildProps"],"mappings":";;;;;;;;;AAuCA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,YAAY;AAAA,IAAEC,sBAAAA,uBAAAA;AAAAA,EAAsB;AAAA,EAEpCC,QAAQ,CAACC,YAAAA,eAAe;AAAA,EAExBC,OAAO;AAAA;AAAA;AAAA;AAAA,IAILC,aAAa;AAAA,MACXC,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDC,mBAAmB;AAAA,MACjBH,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDE,qBAAqB;AAAA,MACnBJ,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACX;AAAA,EACD;AAAA,EAEDG,OAAQ;AACN,WAAO;AAAA,MACLC,eAAe,KAAKC;AAAAA,MACpBC,gBAAAA,aAAAA;AAAAA;EAEH;AAAA,EAEDC,OAAO;AAAA,IACLF,MAAOG,UAAU;AACf,WAAKJ,gBAAgBI;AAAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAODJ,eAAe;AAAA,MACbK,WAAW;AAAA,MACXC,QAASC,kBAAkB;AACzB,aAAKC,WAAWP,QAAQM;AAAAA,MAC1B;AAAA,IACF;AAAA,EACD;AAAA,EAEDE,SAAS;AAAA,IACPC,cAAehB,MAAMiB,OAAO;AAC1B,aAAO,uBAAuBjB,IAAI,IAAIiB,KAAK,IAAI,KAAKC,EAAE;AAAA,IACxD;AAAA,EACF;AACF;;;;;0BArGEC,IAwBW,mBAAA,YAAA;AAAA,IAvBTC,OAAM;AAAA,IACL,WAASC,OAAWtB;AAAAA,MAGbuB,MAAAd,eAAee,KAAAC,OAAOC,MAAM,KAAKF,KAAME,UAD/CC,IAAA,UAAA,GAAAP,IAAAA,mBAUS,UAVTQ,IAAAA,WAUS;AAAA;IARNP,mBAAmBG,KAAWK,WAAA;AAAA,KACvBL,KAAgBM,kBAAA;AAAA,IACvB,WAASR,OAAiBlB;AAAAA,EAAA,CAAA,GAAA,CAG3B2B,IAAA,WAEOP,2BAFP,MAEO,yCADFA,KAAME,MAAA,GAAA,CAAA,CAAA,0DAIbK,IAAAA,WAAQP,KAAAC,QAAA,SAAA,GACRO,IAAAA,YAMEC,mCANFL,IAAAA,WAME;AAAA,IALC,uBAAqBJ,KAAiBU;AAAAA,IACtC,iBAAeV,KAAYW;AAAAA,IAC3Bd,OAAOG,KAAaY;AAAAA,IACpB,WAASd,OAAmBjB;AAAAA,KACrBmB,KAAkBa,kBAAA,GAAA,MAAA,IAAA,CAAA,uBAAA,iBAAA,SAAA,SAAA,CAAA,CAAA;;;;"}

package/dist/vue3/lib/input-group.js

@@ -1,4 +1,4 @@
-import { InputGroupMixin } from "../chunks/input_group-jWnq2DJT.js";
+import { InputGroupMixin } from "../chunks/input_group-hV1WT2it.js";
 import { hasSlotContent } from "../common/utils.js";
 import { resolveComponent, openBlock, createElementBlock, mergeProps, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode } from "vue";
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
@@ -7,7 +7,9 @@ import "../common/validators.js";
 import "../common/constants.js";
 const _sfc_main = {
   name: "DtInputGroup",
-  components: { DtValidationMessages },
+  components: {
+    DtValidationMessages
+  },
   mixins: [InputGroupMixin],
   props: {
     /**
@@ -67,23 +69,17 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("fieldset", {
     class: "d-input-group__fieldset",
     "data-qa": $props.dataQaGroup
-  }, [
-    $data.hasSlotContent(_ctx.$slots.legend) || _ctx.legend ? (openBlock(), createElementBlock("legend", mergeProps({
-      key: 0,
-      class: ["d-label", _ctx.legendClass]
-    }, _ctx.legendChildProps, { "data-qa": $props.dataQaGroupLegend }), [
-      renderSlot(_ctx.$slots, "legend", {}, () => [
-        createTextVNode(toDisplayString(_ctx.legend), 1)
-      ])
-    ], 16, _hoisted_2)) : createCommentVNode("", true),
-    renderSlot(_ctx.$slots, "default"),
-    createVNode(_component_dt_validation_messages, mergeProps({
-      "validation-messages": _ctx.formattedMessages,
-      "show-messages": _ctx.showMessages,
-      class: _ctx.messagesClass,
-      "data-qa": $props.dataQaGroupMessages
-    }, _ctx.messagesChildProps), null, 16, ["validation-messages", "show-messages", "class", "data-qa"])
-  ], 8, _hoisted_1);
+  }, [$data.hasSlotContent(_ctx.$slots.legend) || _ctx.legend ? (openBlock(), createElementBlock("legend", mergeProps({
+    key: 0,
+    class: ["d-label", _ctx.legendClass]
+  }, _ctx.legendChildProps, {
+    "data-qa": $props.dataQaGroupLegend
+  }), [renderSlot(_ctx.$slots, "legend", {}, () => [createTextVNode(toDisplayString(_ctx.legend), 1)])], 16, _hoisted_2)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default"), createVNode(_component_dt_validation_messages, mergeProps({
+    "validation-messages": _ctx.formattedMessages,
+    "show-messages": _ctx.showMessages,
+    class: _ctx.messagesClass,
+    "data-qa": $props.dataQaGroupMessages
+  }, _ctx.messagesChildProps), null, 16, ["validation-messages", "show-messages", "class", "data-qa"])], 8, _hoisted_1);
 }
 const DtInputGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/vue3/lib/input-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group.js","sources":["../../components/input_group/input_group.vue"],"sourcesContent":["<template>\n  <fieldset\n    class=\"d-input-group__fieldset\"\n    :data-qa=\"dataQaGroup\"\n  >\n    <legend\n      v-if=\"hasSlotContent($slots.legend) || legend\"\n      :class=\"['d-label', legendClass]\"\n      v-bind=\"legendChildProps\"\n      :data-qa=\"dataQaGroupLegend\"\n    >\n      <!-- @slot slot for Input Group Legend -->\n      <slot name=\"legend\">\n        {{ legend }}\n      </slot>\n    </legend>\n    <!-- @slot slot for Input Group Components -->\n    <slot />\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      :data-qa=\"dataQaGroupMessages\"\n      v-bind=\"messagesChildProps\"\n    />\n  </fieldset>\n</template>\n\n<script>\nimport { InputGroupMixin } from '@/common/mixins/input_group';\nimport { DtValidationMessages } from '../validation_messages';\nimport { hasSlotContent } from '@/common/utils';\n\n/**\n * Input Groups are convenience components for a grouping of related inputs.\n * While each input within the group could be independent, the `v-model` on the group\n * provides a convenient interface for determining the current state of the group.\n * @see https://dialtone.dialpad.com/components/input_group.html\n */\nexport default {\n  name: 'DtInputGroup',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputGroupMixin],\n\n  props: {\n    /**\n     * A data qa tag for the input group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'input-group',\n    },\n\n    /**\n     * A data qa tag for the input group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'input-group-legend',\n    },\n\n    /**\n     * A data qa tag for the input group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'input-group-messages',\n    },\n  },\n\n  data () {\n    return {\n      internalValue: this.value,\n      hasSlotContent,\n    };\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalValue = newValue;\n    },\n\n    /*\n     * watching value to support 2 way binding for slotted inputs.\n     * need this to pass value to slotted inputs if modified outside\n     * input group.\n     */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.value = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `input-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_openBlock","_mergeProps","_renderSlot","_createVNode"],"mappings":";;;;;;;AAuCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY,EAAE,qBAAsB;AAAA,EAEpC,QAAQ,CAAC,eAAe;AAAA,EAExB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA,MACpB;AAAA;EAEH;AAAA,EAED,OAAO;AAAA,IACL,MAAO,UAAU;AACf,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAAS,kBAAkB;AACzB,aAAK,WAAW,QAAQ;AAAA,MACzB;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,cAAe,MAAM,OAAO;AAC1B,aAAO,uBAAuB,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IACvD;AAAA,EACF;AACH;;;;;sBArGEA,mBAwBW,YAAA;AAAA,IAvBT,OAAM;AAAA,IACL,WAAS,OAAW;AAAA;IAGb,MAAA,eAAe,KAAA,OAAO,MAAM,KAAK,KAAM,UAD/CC,aAAAD,mBAUS,UAVTE,WAUS;AAAA;MARN,mBAAmB,KAAW,WAAA;AAAA,OACvB,KAAgB,kBAAA,EACvB,WAAS,OAAiB,kBAAA,CAAA,GAAA;AAAA,MAG3BC,WAEO,2BAFP,MAEO;AAAA,wCADF,KAAM,MAAA,GAAA,CAAA;AAAA;;IAIbA,WAAQ,KAAA,QAAA,SAAA;AAAA,IACRC,YAME,mCANFF,WAME;AAAA,MALC,uBAAqB,KAAiB;AAAA,MACtC,iBAAe,KAAY;AAAA,MAC3B,OAAO,KAAa;AAAA,MACpB,WAAS,OAAmB;AAAA,OACrB,KAAkB,kBAAA,GAAA,MAAA,IAAA,CAAA,uBAAA,iBAAA,SAAA,SAAA,CAAA;AAAA;;;"}
+{"version":3,"file":"input-group.js","sources":["../../components/input_group/input_group.vue"],"sourcesContent":["<template>\n  <fieldset\n    class=\"d-input-group__fieldset\"\n    :data-qa=\"dataQaGroup\"\n  >\n    <legend\n      v-if=\"hasSlotContent($slots.legend) || legend\"\n      :class=\"['d-label', legendClass]\"\n      v-bind=\"legendChildProps\"\n      :data-qa=\"dataQaGroupLegend\"\n    >\n      <!-- @slot slot for Input Group Legend -->\n      <slot name=\"legend\">\n        {{ legend }}\n      </slot>\n    </legend>\n    <!-- @slot slot for Input Group Components -->\n    <slot />\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      :data-qa=\"dataQaGroupMessages\"\n      v-bind=\"messagesChildProps\"\n    />\n  </fieldset>\n</template>\n\n<script>\nimport { InputGroupMixin } from '@/common/mixins/input_group';\nimport { DtValidationMessages } from '../validation_messages';\nimport { hasSlotContent } from '@/common/utils';\n\n/**\n * Input Groups are convenience components for a grouping of related inputs.\n * While each input within the group could be independent, the `v-model` on the group\n * provides a convenient interface for determining the current state of the group.\n * @see https://dialtone.dialpad.com/components/input_group.html\n */\nexport default {\n  name: 'DtInputGroup',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputGroupMixin],\n\n  props: {\n    /**\n     * A data qa tag for the input group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'input-group',\n    },\n\n    /**\n     * A data qa tag for the input group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'input-group-legend',\n    },\n\n    /**\n     * A data qa tag for the input group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'input-group-messages',\n    },\n  },\n\n  data () {\n    return {\n      internalValue: this.value,\n      hasSlotContent,\n    };\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalValue = newValue;\n    },\n\n    /*\n     * watching value to support 2 way binding for slotted inputs.\n     * need this to pass value to slotted inputs if modified outside\n     * input group.\n     */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.value = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `input-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","name","components","DtValidationMessages","mixins","InputGroupMixin","props","dataQaGroup","type","String","default","dataQaGroupLegend","dataQaGroupMessages","data","internalValue","value","hasSlotContent","watch","newValue","immediate","handler","newInternalValue","provideObj","methods","getMessageKey","index","id","_createElementBlock","class","$props","$data","_ctx","$slots","legend","_openBlock","_mergeProps","legendClass","legendChildProps","_renderSlot","_createVNode","_component_dt_validation_messages","formattedMessages","showMessages","messagesClass","messagesChildProps"],"mappings":";;;;;;;AAuCA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,YAAY;AAAA,IAAEC;AAAAA,EAAsB;AAAA,EAEpCC,QAAQ,CAACC,eAAe;AAAA,EAExBC,OAAO;AAAA;AAAA;AAAA;AAAA,IAILC,aAAa;AAAA,MACXC,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDC,mBAAmB;AAAA,MACjBH,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDE,qBAAqB;AAAA,MACnBJ,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACX;AAAA,EACD;AAAA,EAEDG,OAAQ;AACN,WAAO;AAAA,MACLC,eAAe,KAAKC;AAAAA,MACpBC;AAAAA;EAEH;AAAA,EAEDC,OAAO;AAAA,IACLF,MAAOG,UAAU;AACf,WAAKJ,gBAAgBI;AAAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAODJ,eAAe;AAAA,MACbK,WAAW;AAAA,MACXC,QAASC,kBAAkB;AACzB,aAAKC,WAAWP,QAAQM;AAAAA,MAC1B;AAAA,IACF;AAAA,EACD;AAAA,EAEDE,SAAS;AAAA,IACPC,cAAehB,MAAMiB,OAAO;AAC1B,aAAO,uBAAuBjB,IAAI,IAAIiB,KAAK,IAAI,KAAKC,EAAE;AAAA,IACxD;AAAA,EACF;AACF;;;;;sBArGEC,mBAwBW,YAAA;AAAA,IAvBTC,OAAM;AAAA,IACL,WAASC,OAAWtB;AAAAA,MAGbuB,MAAAd,eAAee,KAAAC,OAAOC,MAAM,KAAKF,KAAME,UAD/CC,UAAA,GAAAP,mBAUS,UAVTQ,WAUS;AAAA;IARNP,mBAAmBG,KAAWK,WAAA;AAAA,KACvBL,KAAgBM,kBAAA;AAAA,IACvB,WAASR,OAAiBlB;AAAAA,EAAA,CAAA,GAAA,CAG3B2B,WAEOP,2BAFP,MAEO,iCADFA,KAAME,MAAA,GAAA,CAAA,CAAA,sDAIbK,WAAQP,KAAAC,QAAA,SAAA,GACRO,YAMEC,mCANFL,WAME;AAAA,IALC,uBAAqBJ,KAAiBU;AAAAA,IACtC,iBAAeV,KAAYW;AAAAA,IAC3Bd,OAAOG,KAAaY;AAAAA,IACpB,WAASd,OAAmBjB;AAAAA,KACrBmB,KAAkBa,kBAAA,GAAA,MAAA,IAAA,CAAA,uBAAA,iBAAA,SAAA,SAAA,CAAA,CAAA;;;"}