@dialpad/dialtone-vue 3.222.2 → 3.223.0-next.1

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

@@ -1 +1 @@
-{"version":3,"file":"illustration.cjs","names":["$attrs"],"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"],"mappings":"mZAiBA,IAAM,EAAQ,EAWR,GAAA,EAAA,EAAA,cAA8B,EAAA,cAAc,uBAAuB,EAAM,KAAK,OAAO,cAzBjF,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBADD,EAAA,MAAY,CAAA,OAEhB,UAASA,EAAAA,OAAM,YAAA"}
+{"version":3,"file":"illustration.cjs","names":["$attrs"],"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 './IllustrationConstants';\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"],"mappings":"kZAiBA,IAAM,EAAQ,EAWR,GAAA,EAAA,EAAA,cAA8B,EAAA,cAAc,uBAAuB,EAAM,KAAK,OAAO,cAzBjF,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBADD,EAAA,MAAY,CAAA,OAEhB,UAASA,EAAAA,OAAM,YAAA"}

package/dist/lib/illustration/illustration.js

@@ -1,9 +1,9 @@
 import { ILLUSTRATION_NAMES as e } from "./illustration-constants.js";
 import { computed as t, createBlock as n, createCommentVNode as r, openBlock as i, resolveDynamicComponent as a } from "vue";
-import { illustrations as o } from "@dialpad/dialtone-icons/vue3";
-//#region components/illustration/illustration.vue
+import { illustrations as o } from "@dialpad/dialtone-icons/vue";
+//#region components/Illustration/Illustration.vue
 var s = /* @__PURE__ */ Object.assign({ name: "DtIllustration" }, {
-	__name: "illustration",
+	__name: "Illustration",
 	props: { name: {
 		type: String,
 		required: !0,

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

@@ -1 +1 @@
-{"version":3,"file":"illustration.js","names":["$attrs"],"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"],"mappings":";;;;;;;;;;;;EAiBA,IAAM,IAAQ,GAWR,IAAe,QAAe,EAAc,uBAAuB,EAAM,KAAK,OAAO;mBAzBjF,EAAA,SAAA,GAAA,EAFR,EAIE,EAHK,EAAA,MAAY,EAAA;;GAEhB,WAASA,EAAAA,OAAM,cAAA"}
+{"version":3,"file":"illustration.js","names":["$attrs"],"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 './IllustrationConstants';\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"],"mappings":";;;;;;;;;;;;EAiBA,IAAM,IAAQ,GAWR,IAAe,QAAe,EAAc,uBAAuB,EAAM,KAAK,OAAO;mBAzBjF,EAAA,SAAA,GAAA,EAFR,EAIE,EAHK,EAAA,MAAY,EAAA;;GAEhB,WAASA,EAAAA,OAAM,cAAA"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.cjs","names":[],"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"],"mappings":"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"}
+{"version":3,"file":"image-viewer.cjs","names":[],"sources":["../../../components/ImageViewer/ImageViewer.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        v-dt-focustrap=\"{ active: isOpen, initialFocus: false, restoreFocus: false }\"\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 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  name: 'DtImageViewer',\n\n  components: {\n    SrOnlyCloseButton,\n    DtButton,\n    DtIconClose,\n  },\n\n  mixins: [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. When null (default), the image modal\n     * triggers on click. When set to true or false, the default trigger is\n     * disabled and the parent controls visibility via v-model:open.\n     * @values null, true, false\n     */\n    open: {\n      type: [Boolean, null],\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          // Tab focus trapping is handled by the v-dt-focustrap directive on the modal.\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\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};\n</script>\n"],"mappings":"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"}

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

@@ -1,20 +1,19 @@
 import { EVENT_KEYNAMES as e } from "../../common/constants/index.js";
 import { returnFirstEl as t } from "../../common/utils/index.js";
 import { t as n } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import r from "../../common/mixins/modal.js";
+import r from "../../common/mixins/mode.js";
 import { DialtoneLocalization as i } from "../../localization/index.js";
 import a from "../button/button.js";
 import o from "../../shared/sr_only_close_button.js";
-import { Teleport as s, Transition as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, mergeProps as m, normalizeClass as h, openBlock as g, resolveComponent as _, toHandlers as v, withCtx as y } from "vue";
-import { DtIconClose as b } from "@dialpad/dialtone-icons/vue3";
-//#region components/image_viewer/image_viewer.vue
-var x = {
-	compatConfig: { MODE: 3 },
+import { Teleport as s, Transition as c, createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createVNode as p, mergeProps as m, normalizeClass as h, openBlock as g, resolveComponent as _, resolveDirective as v, toHandlers as y, withCtx as b, withDirectives as x } from "vue";
+import { DtIconClose as S } from "@dialpad/dialtone-icons/vue";
+//#region components/ImageViewer/ImageViewer.vue
+var C = {
 	name: "DtImageViewer",
 	components: {
 		SrOnlyCloseButton: o,
 		DtButton: a,
-		DtIconClose: b
+		DtIconClose: S
 	},
 	mixins: [r],
 	props: {
@@ -23,7 +22,7 @@ var x = {
 			default: "body"
 		},
 		open: {
-			type: Boolean,
+			type: [Boolean, null],
 			default: null
 		},
 		imageSrc: {
@@ -64,9 +63,6 @@ var x = {
 						case e.escape:
 							this.close();
 							break;
-						case e.tab:
-							this.trapFocus(t);
-							break;
 					}
 				}
 			};
@@ -100,19 +96,16 @@ var x = {
 		},
 		focusAfterOpen() {
 			t(this.$refs.closeImage?.$el)?.focus();
-		},
-		trapFocus(e) {
-			this.isOpen && this.focusTrappedTabPress(e);
 		}
 	}
-}, S = ["src", "alt"], C = ["aria-hidden"], w = {
+}, w = ["src", "alt"], T = ["aria-hidden"], E = {
 	"data-qa": "dt-image-viewer-full",
 	class: "d-image-viewer__full",
 	role: "dialog",
 	"aria-modal": "true"
-}, T = ["src", "alt"];
-function E(e, t, n, r, i, a) {
-	let o = _("dt-button"), b = _("dt-icon-close"), x = _("sr-only-close-button");
+}, D = ["src", "alt"];
+function O(e, t, n, r, i, a) {
+	let o = _("dt-button"), S = _("dt-icon-close"), C = _("sr-only-close-button"), O = v("dt-focustrap");
 	return g(), d("div", null, [p(o, {
 		"data-qa": "dt-image-viewer-preview",
 		class: "d-image-viewer__preview-button",
@@ -120,43 +113,43 @@ function E(e, t, n, r, i, a) {
 		importance: "clear",
 		onClick: a.openModal
 	}, {
-		default: y(() => [f("img", {
+		default: b(() => [f("img", {
 			class: h(n.imageButtonClass),
 			src: n.imageSrc,
 			alt: n.imageAlt
-		}, null, 10, S)]),
+		}, null, 10, w)]),
 		_: 1
 	}, 8, ["aria-label", "onClick"]), i.isOpen ? (g(), l(s, {
 		key: 0,
 		to: n.appendTo
-	}, [f("div", m({
+	}, [x((g(), d("div", m({
 		"aria-hidden": i.isOpen ? "false" : "true",
 		class: "d-modal",
 		"data-qa": "dt-modal"
-	}, v(a.modalListeners, !0), {
+	}, e.modeAttrs, y(a.modalListeners, !0), {
 		onMouseover: t[0] || (t[0] = (e) => i.showCloseButton = !0),
 		onMouseleave: t[1] || (t[1] = (e) => i.showCloseButton = !1),
 		onFocusin: t[2] || (t[2] = (e) => i.showCloseButton = !0),
 		onFocusout: t[3] || (t[3] = (e) => i.showCloseButton = !1)
-	}), [f("div", w, [f("img", {
+	}), [f("div", E, [f("img", {
 		class: "d-image-viewer__full__image",
 		src: n.imageSrc,
 		alt: n.imageAlt
-	}, null, 8, T)]), p(c, { name: "fade" }, {
-		default: y(() => [i.showCloseButton ? (g(), l(o, {
+	}, null, 8, D)]), p(c, { name: "fade" }, {
+		default: b(() => [i.showCloseButton ? (g(), l(o, {
 			key: 0,
 			ref: "closeImage",
 			"data-qa": "dt-image-viewer-close-btn",
 			class: "d-modal__close",
 			circle: "",
-			size: "lg",
+			size: 400,
 			importance: "clear",
 			kind: "inverted",
 			"aria-label": a.closeButtonTitle,
 			title: a.closeButtonTitle,
 			onClick: a.close
 		}, {
-			icon: y(() => [p(b, {
+			icon: b(() => [p(S, {
 				class: "d-image-viewer__close-button",
 				size: "400"
 			})]),
@@ -165,15 +158,19 @@ function E(e, t, n, r, i, a) {
 			"aria-label",
 			"title",
 			"onClick"
-		])) : (g(), l(x, {
+		])) : (g(), l(C, {
 			key: 1,
 			onClose: a.close
 		}, null, 8, ["onClose"]))]),
 		_: 1
-	})], 16, C)], 8, ["to"])) : u("", !0)]);
+	})], 16, T)), [[O, {
+		active: i.isOpen,
+		initialFocus: !1,
+		restoreFocus: !1
+	}]])], 8, ["to"])) : u("", !0)]);
 }
-var D = /* @__PURE__ */ n(x, [["render", E]]);
+var k = /* @__PURE__ */ n(C, [["render", O]]);
 //#endregion
-export { D as default };
+export { k as default };
 
 //# sourceMappingURL=image-viewer.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.js","names":[],"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"],"mappings":"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"}
+{"version":3,"file":"image-viewer.js","names":[],"sources":["../../../components/ImageViewer/ImageViewer.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        v-dt-focustrap=\"{ active: isOpen, initialFocus: false, restoreFocus: false }\"\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 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  name: 'DtImageViewer',\n\n  components: {\n    SrOnlyCloseButton,\n    DtButton,\n    DtIconClose,\n  },\n\n  mixins: [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. When null (default), the image modal\n     * triggers on click. When set to true or false, the default trigger is\n     * disabled and the parent controls visibility via v-model:open.\n     * @values null, true, false\n     */\n    open: {\n      type: [Boolean, null],\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          // Tab focus trapping is handled by the v-dt-focustrap directive on the modal.\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\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};\n</script>\n"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={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`},n={xs:`100`,sm:`200`,md:`200`,lg:`400`,xl:`500`},r={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`}},i={error:`d-input--error`,warning:`d-input--warning`,success:`d-input--success`},a={lg:`d-description--lg`,xl:`d-description--xl`},o={xs:`d-label--xs`,sm:`d-label--sm`,md:`d-label--md`,lg:`d-label--lg`,xl:`d-label--xl`},s={INPUT_TYPES:e,INPUT_SIZES:t,INPUT_ICON_SIZES:n,INPUT_SIZE_CLASSES:r,INPUT_STATE_CLASSES:i,DESCRIPTION_SIZE_CLASSES:a,LABEL_SIZE_CLASSES:o};exports.DESCRIPTION_SIZE_CLASSES=a,exports.INPUT_ICON_SIZES=n,exports.INPUT_SIZES=t,exports.INPUT_SIZE_CLASSES=r,exports.INPUT_STATE_CLASSES=i,exports.INPUT_TYPES=e,exports.LABEL_SIZE_CLASSES=o,exports.default=s;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e={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`},n={100:`100`,200:`200`,300:`200`,400:`400`,500:`500`,xs:`100`,sm:`200`,md:`200`,lg:`400`,xl:`500`},r={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`}},i={critical:`d-input--critical`,warning:`d-input--warning`,positive:`d-input--positive`},a={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`},o={INPUT_TYPES:e,INPUT_SIZES:t,INPUT_ICON_SIZES:n,INPUT_SIZE_CLASSES:r,INPUT_STATE_CLASSES:i,DESCRIPTION_SIZE_CLASSES:a};exports.DESCRIPTION_SIZE_CLASSES=a,exports.INPUT_ICON_SIZES=n,exports.INPUT_SIZES=t,exports.INPUT_SIZE_CLASSES=r,exports.INPUT_STATE_CLASSES=i,exports.INPUT_TYPES=e,exports.default=o;
 //# sourceMappingURL=input-constants.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-constants.cjs","names":[],"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"],"mappings":"+FAEA,IAAa,EAAc,CACzB,KAAM,OACN,SAAU,WACV,SAAU,WACV,MAAO,QACP,OAAQ,SACR,KAAM,OACN,KAAM,OACN,KAAM,OACN,IAAK,MACL,OAAQ,SACR,MAAO,QACR,CAEY,EAAc,CACzB,YAAa,KACb,MAAO,KACP,QAAS,KACT,MAAO,KACP,YAAa,KACd,CAEY,EAAmB,CAC9B,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACL,CAEY,EAAqB,CAChC,MAAO,CACL,GAAI,cACJ,GAAI,cACJ,GAAI,cACJ,GAAI,cACL,CAED,SAAU,CACR,GAAI,iBACJ,GAAI,iBACJ,GAAI,iBACJ,GAAI,iBACL,CACF,CAEY,EAAsB,CACjC,MAAO,iBACP,QAAS,mBACT,QAAS,mBACV,CAEY,EAA2B,CACtC,GAAI,oBACJ,GAAI,oBACL,CAEY,EAAqB,CAChC,GAAI,cACJ,GAAI,cACJ,GAAI,cACJ,GAAI,cACJ,GAAI,cACL,CAED,EAAe,CACb,cACA,cACA,mBACA,qBACA,sBACA,2BACA,qBACD"}
+{"version":3,"file":"input-constants.cjs","names":[],"sources":["../../../components/Input/InputConstants.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  critical: 'd-input--critical',\n  warning: 'd-input--warning',\n  positive: 'd-input--positive',\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"],"mappings":"+FAEA,IAAa,EAAc,CACzB,KAAM,OACN,SAAU,WACV,SAAU,WACV,MAAO,QACP,OAAQ,SACR,KAAM,OACN,KAAM,OACN,KAAM,OACN,IAAK,MACL,OAAQ,SACR,MAAO,QACR,CAEY,EAAc,CACzB,YAAa,KACb,MAAO,KACP,QAAS,KACT,MAAO,KACP,YAAa,KACd,CAEY,EAAmB,CAE9B,IAAK,MACL,IAAK,MACL,IAAK,MACL,IAAK,MACL,IAAK,MAEL,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACL,CAEY,EAAqB,CAChC,MAAO,CAEL,IAAK,cACL,IAAK,cACL,IAAK,cACL,IAAK,cAEL,GAAI,cACJ,GAAI,cACJ,GAAI,cACJ,GAAI,cACL,CAED,SAAU,CAER,IAAK,iBACL,IAAK,iBACL,IAAK,iBACL,IAAK,iBAEL,GAAI,iBACJ,GAAI,iBACJ,GAAI,iBACJ,GAAI,iBACL,CACF,CAEY,EAAsB,CACjC,SAAU,oBACV,QAAS,mBACT,SAAU,oBACX,CAEY,EAA2B,CAEtC,IAAK,oBACL,IAAK,oBACL,IAAK,GACL,IAAK,oBACL,IAAK,oBAEL,GAAI,oBACJ,GAAI,oBACJ,GAAI,GACJ,GAAI,oBACJ,GAAI,oBACL,CAED,EAAe,CACb,cACA,cACA,mBACA,qBACA,sBACA,2BACD"}

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

@@ -1,4 +1,4 @@
-//#region components/input/input_constants.js
+//#region components/Input/InputConstants.js
 var e = {
 	TEXT: "text",
 	TEXTAREA: "textarea",
@@ -18,6 +18,11 @@ var e = {
 	LARGE: "lg",
 	EXTRA_LARGE: "xl"
 }, n = {
+	100: "100",
+	200: "200",
+	300: "200",
+	400: "400",
+	500: "500",
 	xs: "100",
 	sm: "200",
 	md: "200",
@@ -25,40 +30,49 @@ var e = {
 	xl: "500"
 }, r = {
 	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"
 	}
 }, i = {
-	error: "d-input--error",
+	critical: "d-input--critical",
 	warning: "d-input--warning",
-	success: "d-input--success"
+	positive: "d-input--positive"
 }, a = {
+	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"
 }, o = {
-	xs: "d-label--xs",
-	sm: "d-label--sm",
-	md: "d-label--md",
-	lg: "d-label--lg",
-	xl: "d-label--xl"
-}, s = {
 	INPUT_TYPES: e,
 	INPUT_SIZES: t,
 	INPUT_ICON_SIZES: n,
 	INPUT_SIZE_CLASSES: r,
 	INPUT_STATE_CLASSES: i,
-	DESCRIPTION_SIZE_CLASSES: a,
-	LABEL_SIZE_CLASSES: o
+	DESCRIPTION_SIZE_CLASSES: a
 };
 //#endregion
-export { a as DESCRIPTION_SIZE_CLASSES, n as INPUT_ICON_SIZES, t as INPUT_SIZES, r as INPUT_SIZE_CLASSES, i as INPUT_STATE_CLASSES, e as INPUT_TYPES, o as LABEL_SIZE_CLASSES, s as default };
+export { a as DESCRIPTION_SIZE_CLASSES, n as INPUT_ICON_SIZES, t as INPUT_SIZES, r as INPUT_SIZE_CLASSES, i as INPUT_STATE_CLASSES, e as INPUT_TYPES, o as default };
 
 //# sourceMappingURL=input-constants.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-constants.js","names":[],"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"],"mappings":";AAEA,IAAa,IAAc;CACzB,MAAM;CACN,UAAU;CACV,UAAU;CACV,OAAO;CACP,QAAQ;CACR,MAAM;CACN,MAAM;CACN,MAAM;CACN,KAAK;CACL,QAAQ;CACR,OAAO;CACR,EAEY,IAAc;CACzB,aAAa;CACb,OAAO;CACP,SAAS;CACT,OAAO;CACP,aAAa;CACd,EAEY,IAAmB;CAC9B,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAqB;CAChC,OAAO;EACL,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CAED,UAAU;EACR,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CACF,EAEY,IAAsB;CACjC,OAAO;CACP,SAAS;CACT,SAAS;CACV,EAEY,IAA2B;CACtC,IAAI;CACJ,IAAI;CACL,EAEY,IAAqB;CAChC,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAED,IAAe;CACb;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}
+{"version":3,"file":"input-constants.js","names":[],"sources":["../../../components/Input/InputConstants.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  critical: 'd-input--critical',\n  warning: 'd-input--warning',\n  positive: 'd-input--positive',\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"],"mappings":";AAEA,IAAa,IAAc;CACzB,MAAM;CACN,UAAU;CACV,UAAU;CACV,OAAO;CACP,QAAQ;CACR,MAAM;CACN,MAAM;CACN,MAAM;CACN,KAAK;CACL,QAAQ;CACR,OAAO;CACR,EAEY,IAAc;CACzB,aAAa;CACb,OAAO;CACP,SAAS;CACT,OAAO;CACP,aAAa;CACd,EAEY,IAAmB;CAE9B,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CAEL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAqB;CAChC,OAAO;EAEL,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EAEL,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CAED,UAAU;EAER,KAAK;EACL,KAAK;EACL,KAAK;EACL,KAAK;EAEL,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACL;CACF,EAEY,IAAsB;CACjC,UAAU;CACV,SAAS;CACT,UAAU;CACX,EAEY,IAA2B;CAEtC,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CACL,KAAK;CAEL,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAED,IAAe;CACb;CACA;CACA;CACA;CACA;CACA;CACD"}

package/dist/lib/input/input.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../common/mixins/input.cjs`),r=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),i=require(`../validation-messages/validation-messages.cjs`),a=require(`./input-constants.cjs`);let o=require(`vue`);var s={compatConfig:{MODE:3},name:`DtInput`,components:{DtValidationMessages:i.default},mixins:[n.MessagesMixin],inheritAttrs:!1,props:{name:{type:String,default:``},type:{type:String,default:a.INPUT_TYPES.TEXT,validator:e=>Object.values(a.INPUT_TYPES).includes(e)},modelValue:{type:[String,Number],default:``},disabled:{type:Boolean,default:!1},label:{type:String,default:``},labelVisible:{type:Boolean,default:!0},description:{type:String,default:``},size:{type:String,default:`md`,validator:e=>Object.values(a.INPUT_SIZES).includes(e)},inputClass:{type:[String,Object,Array],default:``},inputWrapperClass:{type:[String,Object,Array],default:``},rootClass:{type:[String,Object,Array],default:``},currentLength:{type:Number,default:null},retainWarning:{type:Boolean,default:!1},validate:{type:Object,default:null},hidden:{type:Boolean,default:!1}},emits:[`input`,`blur`,`clear`,`focus`,`focusin`,`focusout`,`update:modelValue`,`update:length`,`update:invalid`],data(){return{isInputFocused:!1,isInvalid:!1,defaultLength:0,hasSlotContent:t.hasSlotContent,isComposing:!1,justEndedComposition:!1,labelSizeClasses:a.LABEL_SIZE_CLASSES,descriptionSizeClasses:a.DESCRIPTION_SIZE_CLASSES}},computed:{isTextarea(){return this.type===a.INPUT_TYPES.TEXTAREA},isDefaultSize(){return this.size===a.INPUT_SIZES.DEFAULT},iconSize(){return a.INPUT_ICON_SIZES[this.size]},isValidSize(){return Object.values(a.INPUT_SIZES).includes(this.size)},isValidDescriptionSize(){return Object.values(e.DESCRIPTION_SIZE_TYPES).includes(this.size)},inputComponent(){return this.isTextarea?`textarea`:`input`},inputListeners(){return{compositionstart:()=>{this.isComposing=!0},compositionend:()=>{this.isComposing=!1,this.justEndedComposition=!0;let e=this.$refs.input.value;this.$emit(`input`,e),this.$emit(`update:modelValue`,e),Promise.resolve().then(()=>{this.justEndedComposition=!1})},input:async e=>{if(this.isComposing||this.justEndedComposition)return;let t=e.target.value;this.type===a.INPUT_TYPES.FILE&&(t=Array.from(e.target.files).map(e=>e.name)),this.$emit(`input`,t),this.$emit(`update:modelValue`,t)},blur:e=>{this.isInputFocused=!1,this.onBlur(e)},focus:e=>{this.isInputFocused=!0,this.$emit(`focus`,e)},focusin:e=>this.$emit(`focusin`,e),focusout:e=>this.$emit(`focusout`,e)}},descriptionKey(){return`input-description-${t.getUniqueString()}`},inputState(){return t.getValidationState(this.validationMessages)},defaultLengthCalculation(){return this.calculateLength(this.modelValue)},validationProps(){return{length:{description:this?.validate?.length?.description,max:this?.validate?.length?.max,warn:this?.validate?.length?.warn,message:this?.validate?.length?.message,limitMaxLength:this?.validate?.length?.limitMaxLength?this.validate.length.limitMaxLength:!1}}},validationMessages(){return this.showLengthLimitValidation?this.formattedMessages.concat([this.inputLengthErrorMessage()]):this.formattedMessages},showInputState(){return this.showMessages&&this.inputState},inputLength(){return this.currentLength?this.currentLength:this.defaultLengthCalculation},inputLengthState(){return this.inputLength<this.validationProps.length.warn?null:this.inputLength<=this.validationProps.length.max?this.validationProps.length.warn?e.VALIDATION_MESSAGE_TYPES.WARNING:null:e.VALIDATION_MESSAGE_TYPES.ERROR},shouldValidateLength(){return!!(this.validationProps.length.description&&this.validationProps.length.max)},shouldLimitMaxLength(){return this.shouldValidateLength&&this.validationProps.length.limitMaxLength},showLengthLimitValidation(){return this.shouldValidateLength&&this.inputLengthState!==null&&this.validationProps.length.message&&(this.retainWarning||this.isInputFocused||this.isInvalid)},sizeModifierClass(){return this.isDefaultSize||!this.isValidSize?``:a.INPUT_SIZE_CLASSES[this.inputComponent][this.size]},stateClass(){return[a.INPUT_STATE_CLASSES[this.inputState]]}},watch:{isInvalid(e){this.$emit(`update:invalid`,e)},modelValue:{immediate:!0,handler(e){this.shouldValidateLength&&this.validateLength(this.inputLength),this.currentLength??this.$emit(`update:length`,this.calculateLength(e)),this.isTextarea&&!this.isComposing&&this.$refs.input&&this.$refs.input.value!==e&&(this.$refs.input.value=e)}}},beforeMount(){},mounted(){this.isTextarea&&this.$refs.input&&(this.$refs.input.value=this.modelValue)},methods:{removeClassStyleAttrs:t.removeClassStyleAttrs,addClassStyleAttrs:t.addClassStyleAttrs,inputClasses(){return[`d-input__input`,this.inputComponent===`input`?`d-input`:`d-textarea`,{[this.stateClass]:this.showInputState,"d-input-icon--left":this.$slots.leftIcon,"d-input-icon--right":this.$slots.rightIcon},this.sizeModifierClass,this.inputClass]},inputWrapperClasses(){return this.hidden?[]:[`d-input__wrapper`,{[this.stateClass]:this.showInputState},this.inputWrapperClass]},calculateLength(e){return typeof e==`string`?[...e].length:0},inputLengthErrorMessage(){return{message:this.validationProps.length.message,type:this.inputLengthState}},onBlur(e){this.$refs.container?.contains(e.relatedTarget)||this.$emit(`blur`,e)},emitClearEvents(){this.$emit(`input`,``),this.$emit(`clear`),this.$emit(`update:modelValue`,``)},blur(){this.$refs.input.blur()},focus(){this.$refs.input.focus()},select(){this.$refs.input.select()},getMessageKey(e,t){return`message-${e}-${t}`},validateLength(e){this.isInvalid=e>this.validationProps.length.max},clearInput(){this.$refs.input.value=``,this.$refs.input.focus(),this.emitClearEvents()}}},c=[`aria-details`],l=[`id`],u={key:0},d={key:1,"data-qa":`dt-input-length-description`,class:`d-input__length-description`},f=[`read-only`],p=[`name`,`disabled`,`autocomplete`,`maxlength`],m=[`value`,`name`,`type`,`disabled`,`autocomplete`,`maxlength`];function h(e,t,n,r,i,a){let s=(0,o.resolveComponent)(`dt-validation-messages`);return(0,o.openBlock)(),(0,o.createElementBlock)(`div`,(0,o.mergeProps)({ref:`container`,class:[n.rootClass,`d-input__root`,{"d-input--hidden":n.hidden}]},a.addClassStyleAttrs(e.$attrs),{"data-qa":`dt-input`}),[(0,o.createElementVNode)(`label`,{class:`d-input__label`,"aria-details":e.$slots.description||n.description?a.descriptionKey:void 0,"data-qa":`dt-input-label-wrapper`},[(0,o.renderSlot)(e.$slots,`labelSlot`,{},()=>[n.labelVisible&&n.label?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:0,ref:`label`,"data-qa":`dt-input-label`,class:(0,o.normalizeClass)([`d-input__label-text`,`d-label`,i.labelSizeClasses[n.size]])},(0,o.toDisplayString)(n.label),3)):(0,o.createCommentVNode)(``,!0)]),i.hasSlotContent(e.$slots.description)||n.description||a.shouldValidateLength?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:0,id:a.descriptionKey,ref:`description`,class:(0,o.normalizeClass)([`d-input__description`,`d-description`,i.descriptionSizeClasses[n.size]]),"data-qa":`dt-input-description`},[i.hasSlotContent(e.$slots.description)||n.description?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,u,[(0,o.renderSlot)(e.$slots,`description`,{},()=>[(0,o.createTextVNode)((0,o.toDisplayString)(n.description),1)])])):(0,o.createCommentVNode)(``,!0),a.shouldValidateLength?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,d,(0,o.toDisplayString)(a.validationProps.length.description),1)):(0,o.createCommentVNode)(``,!0)],10,l)):(0,o.createCommentVNode)(``,!0),(0,o.createElementVNode)(`div`,{class:(0,o.normalizeClass)(a.inputWrapperClasses()),"read-only":n.disabled===!0?!0:void 0},[(0,o.createElementVNode)(`span`,{class:`d-input-icon d-input-icon--left`,"data-qa":`dt-input-left-icon-wrapper`,onFocusout:t[0]||(t[0]=(...e)=>a.onBlur&&a.onBlur(...e))},[(0,o.renderSlot)(e.$slots,`leftIcon`,{iconSize:a.iconSize})],32),a.isTextarea?((0,o.openBlock)(),(0,o.createElementBlock)(`textarea`,(0,o.mergeProps)({key:0,ref:`input`,name:n.name,disabled:n.disabled,autocomplete:e.$attrs.autocomplete??`off`,class:a.inputClasses(),maxlength:a.shouldLimitMaxLength?a.validationProps.length.max:null,"data-qa":`dt-input-input`},a.removeClassStyleAttrs(e.$attrs),(0,o.toHandlers)(a.inputListeners,!0)),null,16,p)):((0,o.openBlock)(),(0,o.createElementBlock)(`input`,(0,o.mergeProps)({key:1,ref:`input`,value:n.modelValue,name:n.name,type:n.type,disabled:n.disabled,autocomplete:e.$attrs.autocomplete??`off`,class:a.inputClasses(),maxlength:a.shouldLimitMaxLength?a.validationProps.length.max:null,"data-qa":`dt-input-input`},a.removeClassStyleAttrs(e.$attrs),(0,o.toHandlers)(a.inputListeners,!0)),null,16,m)),(0,o.createElementVNode)(`span`,{class:`d-input-icon d-input-icon--right`,"data-qa":`dt-input-right-icon-wrapper`,onFocusout:t[1]||(t[1]=(...e)=>a.onBlur&&a.onBlur(...e))},[(0,o.renderSlot)(e.$slots,`rightIcon`,{iconSize:a.iconSize,clear:a.clearInput})],32)],10,f)],8,c),(0,o.createVNode)(s,(0,o.mergeProps)({"validation-messages":a.validationMessages,"show-messages":e.showMessages,class:e.messagesClass},e.messagesChildProps,{"data-qa":`dt-input-messages`}),null,16,[`validation-messages`,`show-messages`,`class`])],16)}var g=r.t(s,[[`render`,h]]);exports.default=g;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../common/mixins/input.cjs`),r=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),i=require(`../validation-messages/validation-messages.cjs`),a=require(`../text/text-constants.cjs`),o=require(`../text/text.cjs`),s=require(`./input-constants.cjs`);let c=require(`vue`);var l={name:`DtInput`,components:{DtValidationMessages:i.default,DtText:o.default},mixins:[n.MessagesMixin],inheritAttrs:!1,props:{name:{type:String,default:``},type:{type:String,default:s.INPUT_TYPES.TEXT,validator:e=>Object.values(s.INPUT_TYPES).includes(e)},modelValue:{type:[String,Number],default:``},disabled:{type:Boolean,default:!1},label:{type:String,default:``},showLabel:{type:Boolean,default:!0},description:{type:String,default:``},descriptionClass:{type:[String,Array,Object],default:``},size:{type:[String,Number],default:300,validator:e=>Object.keys(s.INPUT_ICON_SIZES).includes(String(e))},inputClass:{type:[String,Object,Array],default:``},inputWrapperClass:{type:[String,Object,Array],default:``},currentLength:{type:Number,default:null},retainWarning:{type:Boolean,default:!1},validate:{type:Object,default:null},hidden:{type:Boolean,default:!1},labelSize:{type:[String,Number],default:null,validator:e=>a.TEXT_SIZE_MODIFIERS.label.includes(String(e))},labelStrength:{type:String,default:null,validator:e=>Object.keys(a.TEXT_STRENGTH_MODIFIERS).includes(e)},labelClass:{type:[String,Array,Object],default:``},startIconClass:{type:[String,Array,Object],default:``},endIconClass:{type:[String,Array,Object],default:``}},emits:[`blur`,`clear`,`focus`,`focusin`,`focusout`,`update:modelValue`,`update:length`,`update:invalid`],data(){return{isInputFocused:!1,isInvalid:!1,defaultLength:0,hasSlotContent:t.hasSlotContent,isComposing:!1,justEndedComposition:!1,messagesId:t.getUniqueString()}},computed:{isTextarea(){return this.type===s.INPUT_TYPES.TEXTAREA},isDefaultSize(){return String(this.size)===s.INPUT_SIZES.DEFAULT||String(this.size)===`300`},iconSize(){return s.INPUT_ICON_SIZES[String(this.size)]},isValidSize(){return Object.keys(s.INPUT_ICON_SIZES).includes(String(this.size))},isValidDescriptionSize(){return Object.values(e.DESCRIPTION_SIZE_TYPES).includes(this.size)},inputComponent(){return this.isTextarea?`textarea`:`input`},inputListeners(){return{compositionstart:()=>{this.isComposing=!0},compositionend:()=>{this.isComposing=!1,this.justEndedComposition=!0;let e=this.$refs.input.value;this.$emit(`update:modelValue`,e),Promise.resolve().then(()=>{this.justEndedComposition=!1})},input:async e=>{if(this.isComposing||this.justEndedComposition)return;let t=e.target.value;this.type===s.INPUT_TYPES.FILE&&(t=Array.from(e.target.files).map(e=>e.name)),this.$emit(`update:modelValue`,t)},blur:e=>{this.isInputFocused=!1,this.onBlur(e)},focus:e=>{this.isInputFocused=!0,this.$emit(`focus`,e)},focusin:e=>this.$emit(`focusin`,e),focusout:e=>this.$emit(`focusout`,e)}},descriptionKey(){return`input-description-${t.getUniqueString()}`},inputState(){return t.getValidationState(this.validationMessages)},ariaInvalid(){return this.inputState===e.VALIDATION_MESSAGE_TYPES.CRITICAL?`true`:void 0},ariaDescribedBy(){return this.showMessages&&this.validationMessages.length>0?this.messagesId:void 0},defaultLengthCalculation(){return this.calculateLength(this.modelValue)},validationProps(){return{length:{description:this?.validate?.length?.description,max:this?.validate?.length?.max,warn:this?.validate?.length?.warn,message:this?.validate?.length?.message,limitMaxLength:this?.validate?.length?.limitMaxLength?this.validate.length.limitMaxLength:!1}}},validationMessages(){return this.showLengthLimitValidation?this.formattedMessages.concat([this.inputLengthErrorMessage()]):this.formattedMessages},showInputState(){return this.showMessages&&this.inputState},inputLength(){return this.currentLength?this.currentLength:this.defaultLengthCalculation},inputLengthState(){return this.inputLength<this.validationProps.length.warn?null:this.inputLength<=this.validationProps.length.max?this.validationProps.length.warn?e.VALIDATION_MESSAGE_TYPES.WARNING:null:e.VALIDATION_MESSAGE_TYPES.CRITICAL},shouldValidateLength(){return!!(this.validationProps.length.description&&this.validationProps.length.max)},shouldLimitMaxLength(){return this.shouldValidateLength&&this.validationProps.length.limitMaxLength},showLengthLimitValidation(){return this.shouldValidateLength&&this.inputLengthState!==null&&this.validationProps.length.message&&(this.retainWarning||this.isInputFocused||this.isInvalid)},resolvedLabelSize(){if(this.labelSize!=null)return this.labelSize;let e=String(this.size);return e===`xl`||e===`500`?e===`500`?`400`:`lg`:this.size},resolvedDescriptionSize(){return{100:`xs`,200:`xs`,300:`sm`,400:`sm`,500:`md`,xs:`xs`,sm:`xs`,md:`sm`,lg:`sm`,xl:`md`}[String(this.size)]||`sm`},resolvedDescriptionDensity(){let e=String(this.size);return e===`xl`||e===`500`?`300`:void 0},sizeModifierClass(){return this.isDefaultSize||!this.isValidSize?``:s.INPUT_SIZE_CLASSES[this.inputComponent][String(this.size)]},stateClass(){return[s.INPUT_STATE_CLASSES[this.inputState]]}},watch:{isInvalid(e){this.$emit(`update:invalid`,e)},modelValue:{immediate:!0,handler(e){this.shouldValidateLength&&this.validateLength(this.inputLength),this.currentLength??this.$emit(`update:length`,this.calculateLength(e)),this.isTextarea&&!this.isComposing&&this.$refs.input&&this.$refs.input.value!==e&&(this.$refs.input.value=e)}}},mounted(){this.isTextarea&&this.$refs.input&&(this.$refs.input.value=this.modelValue),this.runValidations()},methods:{removeClassStyleAttrs:t.removeClassStyleAttrs,inputClasses(){return[`d-input__input`,this.inputComponent===`input`?`d-input`:`d-textarea`,{[this.stateClass]:this.showInputState,"d-input-icon--left":this.$slots.startIcon||this.$slots.leftIcon,"d-input-icon--right":this.$slots.endIcon||this.$slots.rightIcon},this.sizeModifierClass,this.inputClass]},inputWrapperClasses(){return this.hidden?[]:[`d-input__wrapper`,{[this.stateClass]:this.showInputState},this.inputWrapperClass]},calculateLength(e){return typeof e==`string`?[...e].length:0},inputLengthErrorMessage(){return{message:this.validationProps.length.message,type:this.inputLengthState}},onBlur(e){this.$refs.container?.contains(e.relatedTarget)||this.$emit(`blur`,e)},emitClearEvents(){this.$emit(`clear`),this.$emit(`update:modelValue`,``)},blur(){this.$refs.input.blur()},focus(){this.$refs.input.focus()},select(){this.$refs.input.select()},getMessageKey(e,t){return`message-${e}-${t}`},validateLength(e){this.isInvalid=e>this.validationProps.length.max},clearInput(){this.$refs.input.value=``,this.$refs.input.focus(),this.emitClearEvents()},runValidations(){!this.label&&!this.$attrs[`aria-label`]&&console.info(`[Dialtone] A label is required for accessibility. Provide a label prop and use show-label="false" to hide it visually.`)}}},u=[`aria-details`],d={key:0},f={key:1,"data-qa":`dt-input-length-description`,class:`d-input__length-description`},p=[`read-only`],m=[`name`,`disabled`,`autocomplete`,`maxlength`,`aria-label`,`aria-invalid`,`aria-describedby`],h=[`value`,`name`,`type`,`disabled`,`autocomplete`,`maxlength`,`aria-label`,`aria-invalid`,`aria-describedby`];function g(e,t,n,r,i,a){let o=(0,c.resolveComponent)(`dt-text`),s=(0,c.resolveComponent)(`dt-validation-messages`);return(0,c.openBlock)(),(0,c.createElementBlock)(`div`,{ref:`container`,class:(0,c.normalizeClass)([`d-input__root`,{"d-input--hidden":n.hidden},e.$attrs.class]),style:(0,c.normalizeStyle)(e.$attrs.style),"data-qa":`dt-input`},[(0,c.createElementVNode)(`label`,{class:`d-input__label`,"aria-details":e.$slots.description||n.description?a.descriptionKey:void 0,"data-qa":`dt-input-label-wrapper`},[(0,c.renderSlot)(e.$slots,`label`,{},()=>[n.showLabel&&n.label?((0,c.openBlock)(),(0,c.createBlock)(o,{key:0,ref:`label`,"data-qa":`dt-input-label`,kind:`label`,size:a.resolvedLabelSize,strength:n.labelStrength,tone:`secondary`,class:(0,c.normalizeClass)([`d-input__label-text`,n.labelClass])},{default:(0,c.withCtx)(()=>[(0,c.createTextVNode)((0,c.toDisplayString)(n.label),1)]),_:1},8,[`size`,`strength`,`class`])):(0,c.createCommentVNode)(``,!0)]),i.hasSlotContent(e.$slots.description)||n.description||a.shouldValidateLength?((0,c.openBlock)(),(0,c.createBlock)(o,{key:0,id:a.descriptionKey,ref:`description`,kind:`body`,size:a.resolvedDescriptionSize,tone:`tertiary`,density:a.resolvedDescriptionDensity,as:`div`,class:(0,c.normalizeClass)([`d-input__description`,`d-description`,n.descriptionClass]),"data-qa":`dt-input-description`},{default:(0,c.withCtx)(()=>[i.hasSlotContent(e.$slots.description)||n.description?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,d,[(0,c.renderSlot)(e.$slots,`description`,{},()=>[(0,c.createTextVNode)((0,c.toDisplayString)(n.description),1)])])):(0,c.createCommentVNode)(``,!0),a.shouldValidateLength?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,f,(0,c.toDisplayString)(a.validationProps.length.description),1)):(0,c.createCommentVNode)(``,!0)]),_:3},8,[`id`,`size`,`density`,`class`])):(0,c.createCommentVNode)(``,!0),(0,c.createElementVNode)(`div`,{class:(0,c.normalizeClass)(a.inputWrapperClasses()),"read-only":n.disabled===!0?!0:void 0},[(0,c.createElementVNode)(`span`,{class:(0,c.normalizeClass)([`d-input-icon`,`d-input-icon--left`,n.startIconClass]),"data-qa":`dt-input-left-icon-wrapper`,onFocusout:t[0]||(t[0]=(...e)=>a.onBlur&&a.onBlur(...e))},[e.$slots.startIcon?(0,c.renderSlot)(e.$slots,`startIcon`,{key:0,iconSize:a.iconSize}):(0,c.renderSlot)(e.$slots,`leftIcon`,{key:1,iconSize:a.iconSize})],34),a.isTextarea?((0,c.openBlock)(),(0,c.createElementBlock)(`textarea`,(0,c.mergeProps)({key:0,ref:`input`,name:n.name,disabled:n.disabled,autocomplete:e.$attrs.autocomplete??`off`,class:a.inputClasses(),maxlength:a.shouldLimitMaxLength?a.validationProps.length.max:null,"aria-label":!n.showLabel&&n.label?n.label:void 0,"aria-invalid":a.ariaInvalid,"aria-describedby":a.ariaDescribedBy,"data-qa":`dt-input-input`},a.removeClassStyleAttrs(e.$attrs),(0,c.toHandlers)(a.inputListeners,!0)),null,16,m)):((0,c.openBlock)(),(0,c.createElementBlock)(`input`,(0,c.mergeProps)({key:1,ref:`input`,value:n.modelValue,name:n.name,type:n.type,disabled:n.disabled,autocomplete:e.$attrs.autocomplete??`off`,class:a.inputClasses(),maxlength:a.shouldLimitMaxLength?a.validationProps.length.max:null,"aria-label":!n.showLabel&&n.label?n.label:void 0,"aria-invalid":a.ariaInvalid,"aria-describedby":a.ariaDescribedBy,"data-qa":`dt-input-input`},a.removeClassStyleAttrs(e.$attrs),(0,c.toHandlers)(a.inputListeners,!0)),null,16,h)),(0,c.createElementVNode)(`span`,{class:(0,c.normalizeClass)([`d-input-icon`,`d-input-icon--right`,n.endIconClass]),"data-qa":`dt-input-right-icon-wrapper`,onFocusout:t[1]||(t[1]=(...e)=>a.onBlur&&a.onBlur(...e))},[e.$slots.endIcon?(0,c.renderSlot)(e.$slots,`endIcon`,{key:0,iconSize:a.iconSize,clear:a.clearInput}):(0,c.renderSlot)(e.$slots,`rightIcon`,{key:1,iconSize:a.iconSize,clear:a.clearInput})],34)],10,p)],8,u),(0,c.createVNode)(s,(0,c.mergeProps)(e.messagesChildProps,{id:i.messagesId,"validation-messages":a.validationMessages,"show-messages":e.showMessages,class:e.messagesClass,"data-qa":`dt-input-messages`}),null,16,[`id`,`validation-messages`,`show-messages`,`class`])],6)}var _=r.t(l,[[`render`,g]]);exports.default=_;
 //# sourceMappingURL=input.cjs.map