@dialpad/dialtone 9.110.2 → 9.111.0

package/dist/vue3/lib/icon/icon.js

@@ -0,0 +1,57 @@
+import { icons as r } from "@dialpad/dialtone-icons/vue3";
+import { ICON_SIZE_MODIFIERS as n, ICON_NAMES as o } from "./icon-constants.js";
+import { openBlock as i, createBlock as c, resolveDynamicComponent as d, createCommentVNode as s } from "vue";
+import { _ as l } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+const m = {
+  compatConfig: { MODE: 3 },
+  name: "DtIcon",
+  props: {
+    /**
+     * The size of the icon.
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    size: {
+      type: String,
+      default: "500",
+      validator: (e) => Object.keys(n).includes(e)
+    },
+    /**
+     * The icon name in kebab-case
+     */
+    name: {
+      type: String,
+      required: !0,
+      validator: (e) => o.includes(e)
+    },
+    /**
+     * The label of the icon as read out by a screenreader. Leave this unset if your icon is purely presentational
+     */
+    ariaLabel: {
+      type: String,
+      default: void 0
+    }
+  },
+  data() {
+    return {
+      iconLoaded: !1
+    };
+  },
+  computed: {
+    icon() {
+      return r[`./src/icons/${this.name}.vue`];
+    }
+  }
+};
+function u(e, f, a, p, _, t) {
+  return t.icon ? (i(), c(d(t.icon), {
+    key: 0,
+    size: a.size,
+    "aria-label": a.ariaLabel,
+    "data-qa": e.$attrs["data-qa"] ?? "dt-icon"
+  }, null, 8, ["size", "aria-label", "data-qa"])) : s("", !0);
+}
+const C = /* @__PURE__ */ l(m, [["render", u]]);
+export {
+  C as default
+};
+//# sourceMappingURL=icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon.js","sources":["../../../components/icon/icon.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"icon\"\n    v-if=\"icon\"\n    :size=\"size\"\n    :aria-label=\"ariaLabel\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-icon'\"\n  />\n</template>\n\n<script>\nimport { icons } from '@dialpad/dialtone-icons/vue3';\nimport { ICON_SIZE_MODIFIERS, ICON_NAMES } from './icon_constants';\n\n/**\n * The Icon component provides a set of glyphs and sizes to provide context your application.\n * @see https://dialtone.dialpad.com/components/icon.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtIcon',\n\n  props: {\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The icon name in kebab-case\n     */\n    name: {\n      type: String,\n      required: true,\n      validator: (name) => ICON_NAMES.includes(name),\n    },\n\n    /**\n     * The label of the icon as read out by a screenreader. Leave this unset if your icon is purely presentational\n     */\n    ariaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  data () {\n    return {\n      iconLoaded: false,\n    };\n  },\n\n  computed: {\n    icon () {\n      return icons[`./src/icons/${this.name}.vue`];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","s","ICON_SIZE_MODIFIERS","name","ICON_NAMES","icons","$options","_createBlock","_resolveDynamicComponent","$props","_ctx","_createCommentVNode"],"mappings":";;;;AAkBA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACC,MAAM,OAAO,KAAKC,CAAmB,EAAE,SAASD,CAAC;AAAA,IAC9D;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAACE,MAASC,EAAW,SAASD,CAAI;AAAA,IAC9C;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,YAAY;AAAA;EAEf;AAAA,EAED,UAAU;AAAA,IACR,OAAQ;AACN,aAAOE,EAAM,eAAe,KAAK,IAAI,MAAM;AAAA,IAC5C;AAAA,EACF;AACH;;SA3DUC,EAAI,aAFZC,EADFC,EAESF,EAAI,IAAA,GAAA;AAAA,IAFb,KAAA;AAAA,IAIK,MAAMG,EAAI;AAAA,IACV,cAAYA,EAAS;AAAA,IACrB,WAASC,EAAM,OAAA,SAAA,KAAA;AAAA,oDANpBC,EAAA,IAAA,EAAA;;;"}

package/dist/vue3/lib/icon/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./icon.cjs"),e=require("./icon-constants.cjs");exports.DtIcon=o.default;exports.ICON_NAMES=e.ICON_NAMES;exports.ICON_SIZE_MODIFIERS=e.ICON_SIZE_MODIFIERS;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/vue3/lib/icon/index.js

@@ -0,0 +1,8 @@
+import { default as r } from "./icon.js";
+import { ICON_NAMES as e, ICON_SIZE_MODIFIERS as f } from "./icon-constants.js";
+export {
+  r as DtIcon,
+  e as ICON_NAMES,
+  f as ICON_SIZE_MODIFIERS
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/vue3/lib/illustration/illustration-constants.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@dialpad/dialtone-icons/illustrations.js"),t=e,s={ILLUSTRATION_NAMES:t};exports.ILLUSTRATION_NAMES=t;exports.default=s;
+//# sourceMappingURL=illustration-constants.cjs.map

package/dist/vue3/lib/illustration/illustration-constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"illustration-constants.cjs","sources":["../../../components/illustration/illustration_constants.js"],"sourcesContent":["import illustrationNames from '@dialpad/dialtone-icons/illustrations.js';\n\nexport const ILLUSTRATION_NAMES = illustrationNames;\n\nexport default {\n  ILLUSTRATION_NAMES,\n};\n"],"names":["ILLUSTRATION_NAMES","illustrationNames","illustration_constants"],"mappings":"wKAEaA,EAAqBC,EAEnBC,EAAA,CACb,mBAAAF,CACF"}

package/dist/vue3/lib/illustration/illustration-constants.js

@@ -0,0 +1,9 @@
+import t from "@dialpad/dialtone-icons/illustrations.js";
+const o = t, a = {
+  ILLUSTRATION_NAMES: o
+};
+export {
+  o as ILLUSTRATION_NAMES,
+  a as default
+};
+//# sourceMappingURL=illustration-constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"illustration-constants.js","sources":["../../../components/illustration/illustration_constants.js"],"sourcesContent":["import illustrationNames from '@dialpad/dialtone-icons/illustrations.js';\n\nexport const ILLUSTRATION_NAMES = illustrationNames;\n\nexport default {\n  ILLUSTRATION_NAMES,\n};\n"],"names":["ILLUSTRATION_NAMES","illustrationNames","illustration_constants"],"mappings":";AAEY,MAACA,IAAqBC,GAEnBC,IAAA;AAAA,EACb,oBAAAF;AACF;"}

package/dist/vue3/lib/illustration/illustration.cjs

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

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

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

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

@@ -0,0 +1,29 @@
+import { computed as o, openBlock as n, createBlock as l, resolveDynamicComponent as s, createCommentVNode as i } from "vue";
+import { illustrations as u } from "@dialpad/dialtone-icons/vue3";
+import { ILLUSTRATION_NAMES as m } from "./illustration-constants.js";
+const f = /* @__PURE__ */ Object.assign({
+  name: "DtIllustration"
+}, {
+  __name: "illustration",
+  props: {
+    /**
+       * The illustration name in kebab-case
+       */
+    name: {
+      type: String,
+      required: !0,
+      validator: (t) => m.includes(t)
+    }
+  },
+  setup(t) {
+    const e = t, a = o(() => u[`./src/illustrations/${e.name}.vue`]);
+    return (r, c) => a.value ? (n(), l(s(a.value), {
+      key: 0,
+      "data-qa": r.$attrs["data-qa"] ?? "dt-illustration"
+    }, null, 8, ["data-qa"])) : i("", !0);
+  }
+});
+export {
+  f as default
+};
+//# sourceMappingURL=illustration.js.map

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

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

package/dist/vue3/lib/illustration/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./illustration.cjs"),i=require("./illustration-constants.cjs");exports.DtIllustration=t.default;exports.ILLUSTRATION_NAMES=i.ILLUSTRATION_NAMES;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,7 @@
+import { default as r } from "./illustration.js";
+import { ILLUSTRATION_NAMES as e } from "./illustration-constants.js";
+export {
+  r as DtIllustration,
+  e as ILLUSTRATION_NAMES
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"image-viewer.cjs","sources":["../../../components/image_viewer/image_viewer.vue"],"sourcesContent":["<template>\n  <div>\n    <dt-button\n      data-qa=\"dt-image-viewer-preview\"\n      class=\"d-image-viewer__preview-button\"\n      :aria-label=\"ariaLabel\"\n      importance=\"clear\"\n      @click=\"openModal\"\n    >\n      <img\n        :class=\"imageButtonClass\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n    </dt-button>\n    <Teleport\n      v-if=\"isOpen\"\n      :to=\"appendTo\"\n    >\n      <div\n        :aria-hidden=\"!isOpen ? 'true' : 'false'\"\n        class=\"d-modal\"\n        data-qa=\"dt-modal\"\n        v-on=\"modalListeners\"\n        @mouseover=\"showCloseButton = true\"\n        @mouseleave=\"showCloseButton = false\"\n        @focusin=\" showCloseButton = true\"\n        @focusout=\" showCloseButton = false\"\n      >\n        <div\n          data-qa=\"dt-image-viewer-full\"\n          class=\"d-image-viewer__full\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <img\n            class=\"d-image-viewer__full__image\"\n            :src=\"imageSrc\"\n            :alt=\"imageAlt\"\n          >\n        </div>\n        <transition name=\"fade\">\n          <dt-button\n            v-if=\"showCloseButton\"\n            ref=\"closeImage\"\n            data-qa=\"dt-image-viewer-close-btn\"\n            class=\"d-modal__close\"\n            circle\n            size=\"lg\"\n            importance=\"clear\"\n            kind=\"inverted\"\n            :aria-label=\"closeAriaLabel\"\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        </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';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtImageViewer',\n\n  components: {\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     * 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      returnFirstEl(this.$refs.closeImage?.$el)?.focus();\n    },\n\n    trapFocus (e) {\n      if (this.isOpen) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconClose","Modal","event","EVENT_KEYNAMES","isShowing","_a","open","returnFirstEl","e","_hoisted_1","_hoisted_2","_hoisted_4","_createElementBlock","_createVNode","_component_dt_button","$props","$options","_withCtx","_createElementVNode","_normalizeClass","$data","_createBlock","_Teleport","_mergeProps","_toHandlers","_hoisted_3","_Transition","_component_dt_icon_close","_createCommentVNode"],"mappings":"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"}

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

@@ -0,0 +1,226 @@
+import _ from "../../common/mixins/modal.js";
+import { returnFirstEl as h } from "../../common/utils/index.js";
+import { EVENT_KEYNAMES as a } from "../../common/constants/index.js";
+import { DtIconClose as v } from "@dialpad/dialtone-icons/vue3";
+import { resolveComponent as d, openBlock as n, createElementBlock as w, createVNode as u, withCtx as c, createElementVNode as s, normalizeClass as C, createBlock as p, Teleport as b, mergeProps as k, toHandlers as B, Transition as E, createCommentVNode as f } from "vue";
+import { _ as y } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import A from "../button/button.js";
+const O = {
+  compatConfig: { MODE: 3 },
+  name: "DtImageViewer",
+  components: {
+    DtButton: A,
+    DtIconClose: v
+  },
+  mixins: [_],
+  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.
+     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.
+     * Supports .sync modifier
+     * @values null, true, false
+     */
+    open: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * URL of the image to be shown
+     */
+    imageSrc: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Alt text of image
+     */
+    imageAlt: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Image Class
+     */
+    imageButtonClass: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    /**
+     * Aria label
+     */
+    ariaLabel: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Aria label for close button
+     */
+    closeAriaLabel: {
+      type: String,
+      required: !0
+    }
+  },
+  emits: [
+    /**
+     * Emitted when popover is shown or hidden
+     *
+     * @event opened
+     * @type {Boolean}
+     */
+    "opened",
+    /**
+     * Event fired to sync the open prop with the parent component
+     * @event update:open
+     */
+    "update:open"
+  ],
+  data() {
+    return {
+      showCloseButton: !0,
+      isOpen: !1
+    };
+  },
+  computed: {
+    modalListeners() {
+      return {
+        click: (e) => {
+          e.target === e.currentTarget && this.close();
+        },
+        keydown: (e) => {
+          switch (e.code) {
+            case a.esc:
+            case a.escape:
+              this.close();
+              break;
+            case a.tab:
+              this.trapFocus(e);
+              break;
+          }
+        }
+      };
+    }
+  },
+  watch: {
+    isOpen: {
+      immediate: !0,
+      handler(e) {
+        var t;
+        e ? this.previousActiveElement = document.activeElement : ((t = this.previousActiveElement) == null || t.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() {
+      var e, t;
+      (t = h((e = this.$refs.closeImage) == null ? void 0 : e.$el)) == null || t.focus();
+    },
+    trapFocus(e) {
+      this.isOpen && this.focusTrappedTabPress(e);
+    }
+  }
+}, S = ["src", "alt"], q = ["aria-hidden"], T = {
+  "data-qa": "dt-image-viewer-full",
+  class: "d-image-viewer__full",
+  role: "dialog",
+  "aria-modal": "true"
+}, M = ["src", "alt"];
+function L(e, t, o, V, i, r) {
+  const m = d("dt-button"), g = d("dt-icon-close");
+  return n(), w("div", null, [
+    u(m, {
+      "data-qa": "dt-image-viewer-preview",
+      class: "d-image-viewer__preview-button",
+      "aria-label": o.ariaLabel,
+      importance: "clear",
+      onClick: r.openModal
+    }, {
+      default: c(() => [
+        s("img", {
+          class: C(o.imageButtonClass),
+          src: o.imageSrc,
+          alt: o.imageAlt
+        }, null, 10, S)
+      ]),
+      _: 1
+    }, 8, ["aria-label", "onClick"]),
+    i.isOpen ? (n(), p(b, {
+      key: 0,
+      to: o.appendTo
+    }, [
+      s("div", k({
+        "aria-hidden": i.isOpen ? "false" : "true",
+        class: "d-modal",
+        "data-qa": "dt-modal"
+      }, B(r.modalListeners, !0), {
+        onMouseover: t[0] || (t[0] = (l) => i.showCloseButton = !0),
+        onMouseleave: t[1] || (t[1] = (l) => i.showCloseButton = !1),
+        onFocusin: t[2] || (t[2] = (l) => i.showCloseButton = !0),
+        onFocusout: t[3] || (t[3] = (l) => i.showCloseButton = !1)
+      }), [
+        s("div", T, [
+          s("img", {
+            class: "d-image-viewer__full__image",
+            src: o.imageSrc,
+            alt: o.imageAlt
+          }, null, 8, M)
+        ]),
+        u(E, { name: "fade" }, {
+          default: c(() => [
+            i.showCloseButton ? (n(), p(m, {
+              key: 0,
+              ref: "closeImage",
+              "data-qa": "dt-image-viewer-close-btn",
+              class: "d-modal__close",
+              circle: "",
+              size: "lg",
+              importance: "clear",
+              kind: "inverted",
+              "aria-label": o.closeAriaLabel,
+              onClick: r.close
+            }, {
+              icon: c(() => [
+                u(g, {
+                  class: "d-image-viewer__close-button",
+                  size: "400"
+                })
+              ]),
+              _: 1
+            }, 8, ["aria-label", "onClick"])) : f("", !0)
+          ]),
+          _: 1
+        })
+      ], 16, q)
+    ], 8, ["to"])) : f("", !0)
+  ]);
+}
+const H = /* @__PURE__ */ y(O, [["render", L]]);
+export {
+  H as default
+};
+//# sourceMappingURL=image-viewer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image-viewer.js","sources":["../../../components/image_viewer/image_viewer.vue"],"sourcesContent":["<template>\n  <div>\n    <dt-button\n      data-qa=\"dt-image-viewer-preview\"\n      class=\"d-image-viewer__preview-button\"\n      :aria-label=\"ariaLabel\"\n      importance=\"clear\"\n      @click=\"openModal\"\n    >\n      <img\n        :class=\"imageButtonClass\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n    </dt-button>\n    <Teleport\n      v-if=\"isOpen\"\n      :to=\"appendTo\"\n    >\n      <div\n        :aria-hidden=\"!isOpen ? 'true' : 'false'\"\n        class=\"d-modal\"\n        data-qa=\"dt-modal\"\n        v-on=\"modalListeners\"\n        @mouseover=\"showCloseButton = true\"\n        @mouseleave=\"showCloseButton = false\"\n        @focusin=\" showCloseButton = true\"\n        @focusout=\" showCloseButton = false\"\n      >\n        <div\n          data-qa=\"dt-image-viewer-full\"\n          class=\"d-image-viewer__full\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <img\n            class=\"d-image-viewer__full__image\"\n            :src=\"imageSrc\"\n            :alt=\"imageAlt\"\n          >\n        </div>\n        <transition name=\"fade\">\n          <dt-button\n            v-if=\"showCloseButton\"\n            ref=\"closeImage\"\n            data-qa=\"dt-image-viewer-close-btn\"\n            class=\"d-modal__close\"\n            circle\n            size=\"lg\"\n            importance=\"clear\"\n            kind=\"inverted\"\n            :aria-label=\"closeAriaLabel\"\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        </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';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtImageViewer',\n\n  components: {\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     * 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      returnFirstEl(this.$refs.closeImage?.$el)?.focus();\n    },\n\n    trapFocus (e) {\n      if (this.isOpen) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconClose","Modal","event","EVENT_KEYNAMES","isShowing","_a","open","_b","returnFirstEl","_hoisted_1","_hoisted_2","_hoisted_4","_createElementBlock","_createVNode","_component_dt_button","$props","$options","_withCtx","_createElementVNode","_normalizeClass","$data","_createBlock","_Teleport","_mergeProps","_toHandlers","_hoisted_3","_Transition","_component_dt_icon_close","_createCommentVNode"],"mappings":";;;;;;;AA0EA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,UAAAC;AAAA,IACA,aAAAC;AAAA,EACD;AAAA,EAED,QAAQ,CAACC,CAAK;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,UAAU;AAAA,MACV,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,iBAAiB;AAAA,MACjB,QAAQ;AAAA;EAEX;AAAA,EAED,UAAU;AAAA,IACR,iBAAkB;AAChB,aAAO;AAAA,QACL,OAAO,CAAAC,MAAS;AACd,UAACA,EAAM,WAAWA,EAAM,iBAAkB,KAAK;QAChD;AAAA,QAED,SAAS,CAAAA,MAAS;AAChB,kBAAQA,EAAM,MAAI;AAAA,YAChB,KAAKC,EAAe;AAAA,YACpB,KAAKA,EAAe;AAClB,mBAAK,MAAK;AACV;AAAA,YACF,KAAKA,EAAe;AAClB,mBAAK,UAAUD,CAAK;AACpB;AAAA,UACJ;AAAA,QACD;AAAA;IAEJ;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,QAASE,GAAW;;AAClB,QAAIA,IAEF,KAAK,wBAAwB,SAAS,kBAGtCC,IAAA,KAAK,0BAAL,QAAAA,EAA4B,SAC5B,KAAK,wBAAwB;AAAA,MAEhC;AAAA,IACF;AAAA,IAED,MAAM;AAAA,MACJ,SAAS,SAAUC,GAAM;AACvB,QAAIA,MAAS,SACX,KAAK,SAASA;AAAA,MAEjB;AAAA,MAED,WAAW;AAAA,IACZ;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,YAAa;AAEX,MAAI,KAAK,SAAS,SAGlB,KAAK,SAAS,IACd,KAAK,kBAAkB,IACvB,KAAK,MAAM,UAAU,EAAI,GAEzB,WAAW,MAAM;AACf,aAAK,eAAc;AAAA,MACrB,CAAC;AAAA,IACF;AAAA,IAED,QAAS;AACP,WAAK,SAAS,IACd,KAAK,MAAM,UAAU,EAAK,GAEtB,KAAK,SAAS,QAChB,KAAK,MAAM,eAAe,EAAK;AAAA,IAElC;AAAA,IAED,iBAAkB;;AAChB,OAAAC,IAAAC,GAAcH,IAAA,KAAK,MAAM,eAAX,gBAAAA,EAAuB,GAAG,MAAxC,QAAAE,EAA2C;AAAA,IAC5C;AAAA,IAED,UAAW,GAAG;AACZ,MAAI,KAAK,UACP,KAAK,qBAAqB,CAAC;AAAA,IAE9B;AAAA,EACF;AACH,GAhQAE,IAAA,CAAA,OAAA,KAAA,GAAAC,IAAA,CAAA,aAAA;EA8BU,WAAQ;AAAA,EACR,OAAM;AAAA,EACN,MAAK;AAAA,EACL,cAAW;GAjCrBC,IAAA,CAAA,OAAA,KAAA;;;cACEC,EA+DM,OAAA,MAAA;AAAA,IA9DJC,EAYYC,GAAA;AAAA,MAXV,WAAQ;AAAA,MACR,OAAM;AAAA,MACL,cAAYC,EAAS;AAAA,MACtB,YAAW;AAAA,MACV,SAAOC,EAAS;AAAA;MAPvB,SAAAC,EASM,MAIC;AAAA,QAJDC,EAIC,OAAA;AAAA,UAHE,OAVTC,EAUgBJ,EAAgB,gBAAA;AAAA,UACvB,KAAKA,EAAQ;AAAA,UACb,KAAKA,EAAQ;AAAA,QAZtB,GAAA,MAAA,IAAAN,CAAA;AAAA;MAAA,GAAA;AAAA;IAgBYW,EAAM,eADdC,EAgDWC,GAAA;AAAA,MA/Df,KAAA;AAAA,MAiBO,IAAIP,EAAQ;AAAA;MAEbG,EA2CM,OA3CNK,EA2CM;AAAA,QA1CH,eAAcH,EAAM,SAAA,UAAA;AAAA,QACrB,OAAM;AAAA,QACN,WAAQ;AAAA,MACR,GAAAI,EAAqBR,EAAD,gBAAA,EAAA,GAAA;AAAA,QACnB,oCAAWI,EAAe,kBAAA;AAAA,QAC1B,qCAAYA,EAAe,kBAAA;AAAA,QAC3B,kCAAUA,EAAe,kBAAA;AAAA,QACzB,mCAAWA,EAAe,kBAAA;AAAA;QAE3BF,EAWM,OAXNO,GAWM;AAAA,UALJP,EAIC,OAAA;AAAA,YAHC,OAAM;AAAA,YACL,KAAKH,EAAQ;AAAA,YACb,KAAKA,EAAQ;AAAA,UAtC1B,GAAA,MAAA,GAAAJ,CAAA;AAAA;QAyCQE,EAoBaa,GAAA,EApBD,MAAK,OAAM,GAAA;AAAA,UAzC/B,SAAAT,EA0CU,MAkBY;AAAA,YAjBJG,EAAe,wBADvBC,EAkBYP,GAAA;AAAA,cA5DtB,KAAA;AAAA,cA4CY,KAAI;AAAA,cACJ,WAAQ;AAAA,cACR,OAAM;AAAA,cACN,QAAA;AAAA,cACA,MAAK;AAAA,cACL,YAAW;AAAA,cACX,MAAK;AAAA,cACJ,cAAYC,EAAc;AAAA,cAC1B,SAAOC,EAAK;AAAA;cAEF,QACT,MAGE;AAAA,gBAHFH,EAGEc,GAAA;AAAA,kBAFA,OAAM;AAAA,kBACN,MAAK;AAAA;;cAzDrB,GAAA;AAAA,gDAAAC,EAAA,IAAA,EAAA;AAAA;UAAA,GAAA;AAAA;MAAA,GAAA,IAAAlB,CAAA;AAAA,qBAAAkB,EAAA,IAAA,EAAA;AAAA;;;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./image-viewer.cjs");exports.DtImageViewer=e.default;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,5 @@
+import { default as r } from "./image-viewer.js";
+export {
+  r as DtImageViewer
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/vue3/lib/input/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./input.cjs"),t=require("./input-constants.cjs");exports.DtInput=e.default;exports.INPUT_SIZES=t.INPUT_SIZES;exports.INPUT_TYPES=t.INPUT_TYPES;
+//# sourceMappingURL=index.cjs.map

package/dist/vue3/lib/input/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/vue3/lib/input/index.js

@@ -0,0 +1,8 @@
+import { default as r } from "./input.js";
+import { INPUT_SIZES as e, INPUT_TYPES as f } from "./input-constants.js";
+export {
+  r as DtInput,
+  e as INPUT_SIZES,
+  f as INPUT_TYPES
+};
+//# sourceMappingURL=index.js.map

package/dist/vue3/lib/input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-constants.cjs","sources":["../../../components/input/input_constants.js"],"sourcesContent":["// Valid input types, any other input types (for example: 'radio' or 'checkbox') should\n// use the respective base vue components (radio.vue and checkout.vue).\nexport const INPUT_TYPES = {\n  TEXT: 'text',\n  TEXTAREA: 'textarea',\n  PASSWORD: 'password',\n  EMAIL: 'email',\n  NUMBER: 'number',\n  DATE: 'date',\n  TIME: 'time',\n  FILE: 'file',\n  TEL: 'tel',\n  SEARCH: 'search',\n};\n\nexport const INPUT_SIZES = {\n  EXTRA_SMALL: 'xs',\n  SMALL: 'sm',\n  DEFAULT: 'md',\n  LARGE: 'lg',\n  EXTRA_LARGE: 'xl',\n};\n\nexport const INPUT_ICON_SIZES = {\n  xs: '100',\n  sm: '200',\n  md: '200',\n  lg: '400',\n  xl: '500',\n};\n\nexport const INPUT_SIZE_CLASSES = {\n  input: {\n    xs: 'd-input--xs',\n    sm: 'd-input--sm',\n    lg: 'd-input--lg',\n    xl: 'd-input--xl',\n  },\n\n  textarea: {\n    xs: 'd-textarea--xs',\n    sm: 'd-textarea--sm',\n    lg: 'd-textarea--lg',\n    xl: 'd-textarea--xl',\n  },\n};\n\nexport const INPUT_STATE_CLASSES = {\n  error: 'd-input--error',\n  warning: 'd-input--warning',\n  success: 'd-input--success',\n};\n\nexport const DESCRIPTION_SIZE_CLASSES = {\n  lg: 'd-description--lg',\n  xl: 'd-description--xl',\n};\n\nexport const LABEL_SIZE_CLASSES = {\n  xs: 'd-label--xs',\n  sm: 'd-label--sm',\n  md: 'd-label--md',\n  lg: 'd-label--lg',\n  xl: 'd-label--xl',\n};\n\nexport default {\n  INPUT_TYPES,\n  INPUT_SIZES,\n  INPUT_ICON_SIZES,\n  INPUT_SIZE_CLASSES,\n  INPUT_STATE_CLASSES,\n  DESCRIPTION_SIZE_CLASSES,\n  LABEL_SIZE_CLASSES,\n};\n"],"names":["INPUT_TYPES","INPUT_SIZES","INPUT_ICON_SIZES","INPUT_SIZE_CLASSES","INPUT_STATE_CLASSES","DESCRIPTION_SIZE_CLASSES","LABEL_SIZE_CLASSES","input_constants"],"mappings":"4GAEY,MAACA,EAAc,CACzB,KAAM,OACN,SAAU,WACV,SAAU,WACV,MAAO,QACP,OAAQ,SACR,KAAM,OACN,KAAM,OACN,KAAM,OACN,IAAK,MACL,OAAQ,QACV,EAEaC,EAAc,CACzB,YAAa,KACb,MAAO,KACP,QAAS,KACT,MAAO,KACP,YAAa,IACf,EAEaC,EAAmB,CAC9B,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,MACJ,GAAI,KACN,EAEaC,EAAqB,CAChC,MAAO,CACL,GAAI,cACJ,GAAI,cACJ,GAAI,cACJ,GAAI,aACL,EAED,SAAU,CACR,GAAI,iBACJ,GAAI,iBACJ,GAAI,iBACJ,GAAI,gBACL,CACH,EAEaC,EAAsB,CACjC,MAAO,iBACP,QAAS,mBACT,QAAS,kBACX,EAEaC,EAA2B,CACtC,GAAI,oBACJ,GAAI,mBACN,EAEaC,EAAqB,CAChC,GAAI,cACJ,GAAI,cACJ,GAAI,cACJ,GAAI,cACJ,GAAI,aACN,EAEeC,EAAA,CACb,YAAAP,EACA,YAAAC,EACA,iBAAAC,EACA,mBAAAC,EACA,oBAAAC,EACA,yBAAAC,EACA,mBAAAC,CACF"}

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

@@ -0,0 +1,69 @@
+const t = {
+  TEXT: "text",
+  TEXTAREA: "textarea",
+  PASSWORD: "password",
+  EMAIL: "email",
+  NUMBER: "number",
+  DATE: "date",
+  TIME: "time",
+  FILE: "file",
+  TEL: "tel",
+  SEARCH: "search"
+}, s = {
+  EXTRA_SMALL: "xs",
+  SMALL: "sm",
+  DEFAULT: "md",
+  LARGE: "lg",
+  EXTRA_LARGE: "xl"
+}, l = {
+  xs: "100",
+  sm: "200",
+  md: "200",
+  lg: "400",
+  xl: "500"
+}, e = {
+  input: {
+    xs: "d-input--xs",
+    sm: "d-input--sm",
+    lg: "d-input--lg",
+    xl: "d-input--xl"
+  },
+  textarea: {
+    xs: "d-textarea--xs",
+    sm: "d-textarea--sm",
+    lg: "d-textarea--lg",
+    xl: "d-textarea--xl"
+  }
+}, E = {
+  error: "d-input--error",
+  warning: "d-input--warning",
+  success: "d-input--success"
+}, d = {
+  lg: "d-description--lg",
+  xl: "d-description--xl"
+}, S = {
+  xs: "d-label--xs",
+  sm: "d-label--sm",
+  md: "d-label--md",
+  lg: "d-label--lg",
+  xl: "d-label--xl"
+}, a = {
+  INPUT_TYPES: t,
+  INPUT_SIZES: s,
+  INPUT_ICON_SIZES: l,
+  INPUT_SIZE_CLASSES: e,
+  INPUT_STATE_CLASSES: E,
+  DESCRIPTION_SIZE_CLASSES: d,
+  LABEL_SIZE_CLASSES: S
+};
+export {
+  d as DESCRIPTION_SIZE_CLASSES,
+  l as INPUT_ICON_SIZES,
+  s as INPUT_SIZES,
+  e as INPUT_SIZE_CLASSES,
+  E as INPUT_STATE_CLASSES,
+  t as INPUT_TYPES,
+  S as LABEL_SIZE_CLASSES,
+  a as default
+};
+//# sourceMappingURL=input-constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input-constants.js","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};\n\nexport const INPUT_SIZES = {\n  EXTRA_SMALL: 'xs',\n  SMALL: 'sm',\n  DEFAULT: 'md',\n  LARGE: 'lg',\n  EXTRA_LARGE: 'xl',\n};\n\nexport const INPUT_ICON_SIZES = {\n  xs: '100',\n  sm: '200',\n  md: '200',\n  lg: '400',\n  xl: '500',\n};\n\nexport const INPUT_SIZE_CLASSES = {\n  input: {\n    xs: 'd-input--xs',\n    sm: 'd-input--sm',\n    lg: 'd-input--lg',\n    xl: 'd-input--xl',\n  },\n\n  textarea: {\n    xs: 'd-textarea--xs',\n    sm: 'd-textarea--sm',\n    lg: 'd-textarea--lg',\n    xl: 'd-textarea--xl',\n  },\n};\n\nexport const INPUT_STATE_CLASSES = {\n  error: 'd-input--error',\n  warning: 'd-input--warning',\n  success: 'd-input--success',\n};\n\nexport const DESCRIPTION_SIZE_CLASSES = {\n  lg: 'd-description--lg',\n  xl: 'd-description--xl',\n};\n\nexport const LABEL_SIZE_CLASSES = {\n  xs: 'd-label--xs',\n  sm: 'd-label--sm',\n  md: 'd-label--md',\n  lg: 'd-label--lg',\n  xl: 'd-label--xl',\n};\n\nexport default {\n  INPUT_TYPES,\n  INPUT_SIZES,\n  INPUT_ICON_SIZES,\n  INPUT_SIZE_CLASSES,\n  INPUT_STATE_CLASSES,\n  DESCRIPTION_SIZE_CLASSES,\n  LABEL_SIZE_CLASSES,\n};\n"],"names":["INPUT_TYPES","INPUT_SIZES","INPUT_ICON_SIZES","INPUT_SIZE_CLASSES","INPUT_STATE_CLASSES","DESCRIPTION_SIZE_CLASSES","LABEL_SIZE_CLASSES","input_constants"],"mappings":"AAEY,MAACA,IAAc;AAAA,EACzB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,UAAU;AAAA,EACV,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,KAAK;AAAA,EACL,QAAQ;AACV,GAEaC,IAAc;AAAA,EACzB,aAAa;AAAA,EACb,OAAO;AAAA,EACP,SAAS;AAAA,EACT,OAAO;AAAA,EACP,aAAa;AACf,GAEaC,IAAmB;AAAA,EAC9B,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAqB;AAAA,EAChC,OAAO;AAAA,IACL,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACL;AAAA,EAED,UAAU;AAAA,IACR,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACL;AACH,GAEaC,IAAsB;AAAA,EACjC,OAAO;AAAA,EACP,SAAS;AAAA,EACT,SAAS;AACX,GAEaC,IAA2B;AAAA,EACtC,IAAI;AAAA,EACJ,IAAI;AACN,GAEaC,IAAqB;AAAA,EAChC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN,GAEeC,IAAA;AAAA,EACb,aAAAP;AAAA,EACA,aAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,0BAAAC;AAAA,EACA,oBAAAC;AACF;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("../../common/constants/index.cjs"),n=require("./input-constants.cjs"),d=require("../../common/utils/index.cjs"),m=require("../../common/mixins/input.cjs"),t=require("vue"),g=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),S=require("../validation-messages/validation-messages.cjs"),f={compatConfig:{MODE:3},name:"DtInput",components:{DtValidationMessages:S.default},mixins:[m.MessagesMixin],inheritAttrs:!1,props:{name:{type:String,default:""},type:{type:String,default:n.INPUT_TYPES.TEXT,validator:e=>Object.values(n.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(n.INPUT_SIZES).includes(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}},emits:["input","blur","clear","focus","focusin","focusout","update:modelValue","update:length","update:invalid"],data(){return{isInputFocused:!1,isInvalid:!1,defaultLength:0,hasSlotContent:d.hasSlotContent}},computed:{isTextarea(){return this.type===n.INPUT_TYPES.TEXTAREA},isDefaultSize(){return this.size===n.INPUT_SIZES.DEFAULT},iconSize(){return n.INPUT_ICON_SIZES[this.size]},isValidSize(){return Object.values(n.INPUT_SIZES).includes(this.size)},isValidDescriptionSize(){return Object.values(h.DESCRIPTION_SIZE_TYPES).includes(this.size)},inputComponent(){return this.isTextarea?"textarea":"input"},inputListeners(){return{input:async e=>{let a=e.target.value;this.type===n.INPUT_TYPES.FILE&&(a=Array.from(e.target.files).map(r=>r.name)),this.$emit("input",a),this.$emit("update:modelValue",a)},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-${d.getUniqueString()}`},inputState(){return d.getValidationState(this.validationMessages)},defaultLengthCalculation(){return this.calculateLength(this.modelValue)},validationProps(){var e,a,s,r,u,i,o,l,c,p;return{length:{description:(a=(e=this==null?void 0:this.validate)==null?void 0:e.length)==null?void 0:a.description,max:(r=(s=this==null?void 0:this.validate)==null?void 0:s.length)==null?void 0:r.max,warn:(i=(u=this==null?void 0:this.validate)==null?void 0:u.length)==null?void 0:i.warn,message:(l=(o=this==null?void 0:this.validate)==null?void 0:o.length)==null?void 0:l.message,limitMaxLength:(p=(c=this==null?void 0:this.validate)==null?void 0:c.length)!=null&&p.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?h.VALIDATION_MESSAGE_TYPES.WARNING:null:h.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?"":n.INPUT_SIZE_CLASSES[this.inputComponent][this.size]},stateClass(){return[n.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==null&&this.$emit("update:length",this.calculateLength(e))}}},beforeMount(){this.descriptionSizeClasses=n.DESCRIPTION_SIZE_CLASSES,this.labelSizeClasses=n.LABEL_SIZE_CLASSES},methods:{removeClassStyleAttrs:d.removeClassStyleAttrs,addClassStyleAttrs:d.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"?0:[...e].length},inputLengthErrorMessage(){return{message:this.validationProps.length.message,type:this.inputLengthState}},onBlur(e){var a;(a=this.$refs.container)!=null&&a.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,a){return`message-${e}-${a}`},validateLength(e){this.isInvalid=e>this.validationProps.length.max},clearInput(){this.$refs.input.value="",this.$refs.input.focus(),this.emitClearEvents()}}},v=["aria-details"],C=["id"],_={key:0},L={key:1,"data-qa":"dt-input-length-description",class:"d-input__length-description"},y=["read-only"],E=["value","name","disabled","autocomplete","maxlength"],I=["value","name","type","disabled","autocomplete","maxlength"];function b(e,a,s,r,u,i){const o=t.resolveComponent("dt-validation-messages");return t.openBlock(),t.createElementBlock("div",t.mergeProps({ref:"container",class:["d-input__root",{"d-input--hidden":s.hidden}]},i.addClassStyleAttrs(e.$attrs),{"data-qa":"dt-input"}),[t.createElementVNode("label",{class:"d-input__label","aria-details":e.$slots.description||s.description?i.descriptionKey:void 0,"data-qa":"dt-input-label-wrapper"},[t.renderSlot(e.$slots,"labelSlot",{},()=>[s.labelVisible&&s.label?(t.openBlock(),t.createElementBlock("div",{key:0,ref:"label","data-qa":"dt-input-label",class:t.normalizeClass(["d-input__label-text","d-label",e.labelSizeClasses[s.size]])},t.toDisplayString(s.label),3)):t.createCommentVNode("",!0)]),u.hasSlotContent(e.$slots.description)||s.description||i.shouldValidateLength?(t.openBlock(),t.createElementBlock("div",{key:0,id:i.descriptionKey,ref:"description",class:t.normalizeClass(["d-input__description","d-description",e.descriptionSizeClasses[s.size]]),"data-qa":"dt-input-description"},[u.hasSlotContent(e.$slots.description)||s.description?(t.openBlock(),t.createElementBlock("div",_,[t.renderSlot(e.$slots,"description",{},()=>[t.createTextVNode(t.toDisplayString(s.description),1)])])):t.createCommentVNode("",!0),i.shouldValidateLength?(t.openBlock(),t.createElementBlock("div",L,t.toDisplayString(i.validationProps.length.description),1)):t.createCommentVNode("",!0)],10,C)):t.createCommentVNode("",!0),t.createElementVNode("div",{class:t.normalizeClass(i.inputWrapperClasses()),"read-only":s.disabled===!0?!0:void 0},[t.createElementVNode("span",{class:"d-input-icon d-input-icon--left","data-qa":"dt-input-left-icon-wrapper",onFocusout:a[0]||(a[0]=(...l)=>i.onBlur&&i.onBlur(...l))},[t.renderSlot(e.$slots,"leftIcon",{iconSize:i.iconSize})],32),i.isTextarea?(t.openBlock(),t.createElementBlock("textarea",t.mergeProps({key:0,ref:"input",value:s.modelValue,name:s.name,disabled:s.disabled,autocomplete:e.$attrs.autocomplete??"off",class:i.inputClasses(),maxlength:i.shouldLimitMaxLength?i.validationProps.length.max:null,"data-qa":"dt-input-input"},i.removeClassStyleAttrs(e.$attrs),t.toHandlers(i.inputListeners,!0)),null,16,E)):(t.openBlock(),t.createElementBlock("input",t.mergeProps({key:1,ref:"input",value:s.modelValue,name:s.name,type:s.type,disabled:s.disabled,autocomplete:e.$attrs.autocomplete??"off",class:i.inputClasses(),maxlength:i.shouldLimitMaxLength?i.validationProps.length.max:null,"data-qa":"dt-input-input"},i.removeClassStyleAttrs(e.$attrs),t.toHandlers(i.inputListeners,!0)),null,16,I)),t.createElementVNode("span",{class:"d-input-icon d-input-icon--right","data-qa":"dt-input-right-icon-wrapper",onFocusout:a[1]||(a[1]=(...l)=>i.onBlur&&i.onBlur(...l))},[t.renderSlot(e.$slots,"rightIcon",{iconSize:i.iconSize,clear:i.clearInput})],32)],10,y)],8,v),t.createVNode(o,t.mergeProps({"validation-messages":i.validationMessages,"show-messages":e.showMessages,class:e.messagesClass},e.messagesChildProps,{"data-qa":"dt-input-messages"}),null,16,["validation-messages","show-messages","class"])],16)}const P=g._(f,[["render",b]]);exports.default=P;
+//# sourceMappingURL=input.cjs.map