@dialpad/dialtone-vue 3.150.0 → 3.150.1

package/dist/components/collapsible/collapsible.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.vue.js","sources":["../../../components/collapsible/collapsible.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    ref=\"collapsible\"\n    v-on=\"collapsibleListeners\"\n  >\n    <!-- Element for capturing keypress events -->\n    <div\n      :id=\"!ariaLabelledBy && labelledBy\"\n      ref=\"anchor\"\n      :class=\"anchorClass\"\n    >\n      <!-- @slot Slot for the anchor element that toggles the collapsible content -->\n      <slot\n        name=\"anchor\"\n        :attrs=\"{\n          'aria-controls': id,\n          'aria-expanded': isOpen.toString(),\n          'role': 'button',\n        }\"\n      >\n        <dt-button\n          importance=\"clear\"\n          kind=\"muted\"\n          :aria-controls=\"id\"\n          :aria-expanded=\"`${isOpen}`\"\n          :style=\"{\n            'width': maxWidth,\n          }\"\n          @click=\"defaultToggleOpen\"\n        >\n          <dt-icon\n            :name=\" isOpen ? 'chevron-down' : 'chevron-right'\"\n            class=\"d-collapsible__icon\"\n            size=\"300\"\n          />\n          <span\n            class=\"d-collapsible__anchor-text\"\n            :title=\"anchorText\"\n          >\n            {{ anchorText }}\n          </span>\n        </dt-button>\n      </slot>\n    </div>\n    <dt-collapsible-lazy-show\n      :id=\"id\"\n      ref=\"contentWrapper\"\n      :aria-hidden=\"`${!isOpen}`\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      :show=\"isOpen\"\n      :element-type=\"contentElementType\"\n      :class=\"contentClass\"\n      :style=\"{\n        'max-height': maxHeight,\n        'max-width': maxWidth,\n      }\"\n      data-qa=\"dt-collapsible--content\"\n      tabindex=\"-1\"\n      appear\n      v-on=\"collapsibleListeners\"\n      @after-leave=\"onLeaveTransitionComplete\"\n      @after-enter=\"onEnterTransitionComplete\"\n    >\n      <!-- @slot Slot for the collapsible element that is expanded by the anchor -->\n      <slot\n        name=\"content\"\n      />\n    </dt-collapsible-lazy-show>\n  </component>\n</template>\n\n<script>\nimport { extractVueListeners, getUniqueString, hasSlotContent } from '@/common/utils';\nimport DtCollapsibleLazyShow from './collapsible_lazy_show.vue';\nimport { DtButton } from '@/components/button';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtIcon } from '@/components/icon';\n\n/**\n * A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.\n * @see https://dialtone.dialpad.com/components/collapsible.html\n */\nexport default {\n  name: 'DtCollapsible',\n\n  components: {\n    DtButton,\n    DtCollapsibleLazyShow,\n    DtLazyShow,\n    DtIcon,\n  },\n\n  props: {\n    /**\n     * Text that is displayed on the anchor if nothing is passed in the slot.\n     * Ignored if the anchor slot is used.\n     */\n    anchorText: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Controls whether the collapsible is shown. Leaving this null will have the collapsible start\n     * expanded and trigger on click by default. If you set this value, the default trigger\n     * 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     * The id of the content wrapper.\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * HTML element type (tag name) of the root element of the component.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    contentElementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Additional class name for the anchor wrapper element.\n     */\n    anchorClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * The maximum width of the anchor and collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The maximum height of the collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Id of the element that labels the collapsible content. Defaults to the anchor element.\n     * Should provide this or ariaLabel but not both.\n     */\n    ariaLabelledBy: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n\n    /**\n     * Event fired when the content is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      isOpen: true,\n    };\n  },\n\n  computed: {\n    labelledBy () {\n      // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if\n      // there is no aria-label and the labelledby should point to the anchor\n      return this.ariaLabelledBy || (!this.ariaLabel && getUniqueString('DtCollapsible__anchor'));\n    },\n\n    collapsibleListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n\n  watch: {\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  created () {\n    this.validateProperAnchor();\n  },\n\n  methods: {\n    onLeaveTransitionComplete () {\n      this.$emit('opened', false);\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    onEnterTransitionComplete () {\n      this.$emit('opened', true, this.$refs.content);\n      if (this.open !== null) {\n        this.$emit('update:open', true);\n      }\n    },\n\n    defaultToggleOpen () {\n      if (this.open === null) {\n        this.toggleOpen();\n      }\n    },\n\n    toggleOpen () {\n      this.isOpen = !this.isOpen;\n    },\n\n    validateProperAnchor () {\n      if (!this.anchorText && !hasSlotContent(this.$slots.anchor)) {\n        console.error('anchor text and anchor slot content cannot both be falsy');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_createElementVNode","_renderSlot","_createVNode","_normalizeStyle"],"mappings":"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"}

package/dist/components/collapsible/collapsible_lazy_show.vue.cjs

@@ -0,0 +1,149 @@
+"use strict";
+const vue = require("vue");
+;/* empty css                             */
+const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
+const _sfc_main = {
+  name: "DtCollapsibleLazyShow",
+  inheritAttrs: false,
+  /******************
+   *     PROPS      *
+   ******************/
+  props: {
+    /**
+     * Whether the child slot is shown.
+     */
+    show: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Enable/Disable transition animation
+     */
+    appear: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * HTML element type (tag name) of the content wrapper element.
+     */
+    elementType: {
+      type: String,
+      default: "div"
+    }
+  },
+  /******************
+   *      DATA      *
+   ******************/
+  data() {
+    return {
+      initialized: !!this.show
+    };
+  },
+  /******************
+   *    COMPUTED    *
+   ******************/
+  computed: {
+    /**
+     * Set the css property to false when running tests only.
+     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about
+     * transition `css` property
+     * @returns {boolean}
+     */
+    isCSSEnabled() {
+      return process.env.NODE_ENV !== "test";
+    }
+  },
+  /******************
+   *      WATCH     *
+   ******************/
+  watch: {
+    show: function(newValue) {
+      if (!newValue || this.initialized) return;
+      this.initialized = true;
+    }
+  },
+  methods: {
+    /**
+     * @param {HTMLElement} element
+     */
+    beforeEnter(element) {
+      requestAnimationFrame(() => {
+        if (!element.style.height) {
+          element.style.height = "0px";
+        }
+      });
+    },
+    /**
+     * @param {HTMLElement} element
+     */
+    enter(element) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          element.style.height = `${element.scrollHeight}px`;
+        });
+      });
+    },
+    /**
+     * @param {HTMLElement} element
+     */
+    afterEnter(element) {
+      element.style.height = null;
+    },
+    /**
+     * @param {HTMLElement} element
+     */
+    beforeLeave(element) {
+      requestAnimationFrame(() => {
+        if (!element.style.height) {
+          element.style.height = `${element.offsetHeight}px`;
+        }
+      });
+    },
+    /**
+     * @param {HTMLElement} element
+     */
+    leave(element) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          element.style.height = "0px";
+        });
+      });
+    },
+    /**
+     * @param {HTMLElement} element
+     */
+    afterLeave(element) {
+      element.style.height = null;
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createBlock(vue.Transition, vue.mergeProps({
+    appear: $props.appear,
+    "enter-active-class": "enter-active",
+    "leave-active-class": "leave-active"
+  }, _ctx.$attrs, {
+    css: $options.isCSSEnabled,
+    onBeforeEnter: $options.beforeEnter,
+    onEnter: $options.enter,
+    onAfterEnter: $options.afterEnter,
+    onBeforeLeave: $options.beforeLeave,
+    onLeave: $options.leave,
+    onAfterLeave: $options.afterLeave
+  }), {
+    default: vue.withCtx(() => [
+      vue.withDirectives((vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.elementType), vue.normalizeProps(vue.guardReactiveProps(_ctx.$attrs)), {
+        default: vue.withCtx(() => [
+          $data.initialized ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : vue.createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16)), [
+        [vue.vShow, $props.show]
+      ])
+    ]),
+    _: 3
+  }, 16, ["appear", "css", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"]);
+}
+const DtCollapsibleLazyShow = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
+module.exports = DtCollapsibleLazyShow;
+//# sourceMappingURL=collapsible_lazy_show.vue.cjs.map

package/dist/components/collapsible/collapsible_lazy_show.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible_lazy_show.vue.cjs","sources":["../../../components/collapsible/collapsible_lazy_show.vue"],"sourcesContent":["<template>\n  <!-- applies the transition on initial render -->\n  <transition\n    :appear=\"appear\"\n    enter-active-class=\"enter-active\"\n    leave-active-class=\"leave-active\"\n    v-bind=\"$attrs\"\n    :css=\"isCSSEnabled\"\n    @before-enter=\"beforeEnter\"\n    @enter=\"enter\"\n    @after-enter=\"afterEnter\"\n    @before-leave=\"beforeLeave\"\n    @leave=\"leave\"\n    @after-leave=\"afterLeave\"\n  >\n    <component\n      :is=\"elementType\"\n      v-show=\"show\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot slot for Content within collapsible -->\n      <slot v-if=\"initialized\" />\n    </component>\n  </transition>\n</template>\n\n<script>\nexport default {\n  name: 'DtCollapsibleLazyShow',\n\n  inheritAttrs: false,\n\n  /******************\n   *     PROPS      *\n   ******************/\n  props: {\n    /**\n     * Whether the child slot is shown.\n     */\n    show: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Enable/Disable transition animation\n     */\n    appear: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n  },\n\n  /******************\n   *      DATA      *\n   ******************/\n  data () {\n    return {\n      initialized: !!this.show,\n    };\n  },\n\n  /******************\n   *    COMPUTED    *\n   ******************/\n  computed: {\n    /**\n     * Set the css property to false when running tests only.\n     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n     * transition `css` property\n     * @returns {boolean}\n     */\n    isCSSEnabled () {\n      return process.env.NODE_ENV !== 'test';\n    },\n  },\n\n  /******************\n   *      WATCH     *\n   ******************/\n  watch: {\n    show: function (newValue) {\n      if (!newValue || this.initialized) return;\n\n      this.initialized = true;\n    },\n  },\n\n  methods: {\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeEnter (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = '0px';\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    enter (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = `${element.scrollHeight}px`;\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterEnter (element) {\n      element.style.height = null;\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeLeave (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = `${element.offsetHeight}px`;\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    leave (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = '0px';\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterLeave (element) {\n      element.style.height = null;\n    },\n  },\n};\n</script>\n\n<style>\n  .enter-active,\n  .leave-active {\n    overflow: hidden;\n    transition: height var(--td300) var(--ttf-out-quint);\n  }\n</style>\n"],"names":["_openBlock","_createBlock","_Transition","_mergeProps","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","_renderSlot"],"mappings":";;;;AA2BA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,cAAc;AAAA;AAAA;AAAA;AAAA,EAKd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKD,OAAQ;AACN,WAAO;AAAA,MACL,aAAa,CAAC,CAAC,KAAK;AAAA;EAEvB;AAAA;AAAA;AAAA;AAAA,EAKD,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOR,eAAgB;AACd,aAAO,QAAQ,IAAI,aAAa;AAAA,IACjC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKD,OAAO;AAAA,IACL,MAAM,SAAU,UAAU;AACxB,UAAI,CAAC,YAAY,KAAK,YAAa;AAEnC,WAAK,cAAc;AAAA,IACpB;AAAA,EACF;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA,IAIP,YAAa,SAAS;AACpB,4BAAsB,MAAM;AAC1B,YAAI,CAAC,QAAQ,MAAM,QAAQ;AACzB,kBAAQ,MAAM,SAAS;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,MAAO,SAAS;AACd,4BAAsB,MAAM;AAC1B,8BAAsB,MAAM;AAC1B,kBAAQ,MAAM,SAAS,GAAG,QAAQ,YAAY;AAAA,QAChD,CAAC;AAAA,MACH,CAAC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,WAAY,SAAS;AACnB,cAAQ,MAAM,SAAS;AAAA,IACxB;AAAA;AAAA;AAAA;AAAA,IAKD,YAAa,SAAS;AACpB,4BAAsB,MAAM;AAC1B,YAAI,CAAC,QAAQ,MAAM,QAAQ;AACzB,kBAAQ,MAAM,SAAS,GAAG,QAAQ,YAAY;AAAA,QAChD;AAAA,MACF,CAAC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,MAAO,SAAS;AACd,4BAAsB,MAAM;AAC1B,8BAAsB,MAAM;AAC1B,kBAAQ,MAAM,SAAS;AAAA,QACzB,CAAC;AAAA,MACH,CAAC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,WAAY,SAAS;AACnB,cAAQ,MAAM,SAAS;AAAA,IACxB;AAAA,EACF;AACH;;AAzJE,SAAAA,cAAA,GAAAC,gBAqBaC,IAAAA,YArBbC,IAAAA,WAqBa;AAAA,IApBV,QAAQ,OAAM;AAAA,IACf,sBAAmB;AAAA,IACnB,sBAAmB;AAAA,KACX,KAAM,QAAA;AAAA,IACb,KAAK,SAAY;AAAA,IACjB,eAAc,SAAW;AAAA,IACzB,SAAO,SAAK;AAAA,IACZ,cAAa,SAAU;AAAA,IACvB,eAAc,SAAW;AAAA,IACzB,SAAO,SAAK;AAAA,IACZ,cAAa,SAAU;AAAA;yBAExB,MAOY;AAAA,2CAPZF,IAOY,YAAAG,IAAA,wBANL,OAAW,WAAA,GAAAC,IAAA,eAAAC,IAAA,mBAER,KAAM,MAAA,CAAA,GAAA;AAAA,6BAGd,MAA2B;AAAA,UAAf,MAAW,cAAvBC,IAA2B,WAAA,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA;;;;oBAJnB,OAAI,IAAA;AAAA;;;;;;;"}

package/dist/components/collapsible/collapsible_lazy_show.vue.js

@@ -0,0 +1,150 @@
+import { openBlock, createBlock, Transition, mergeProps, withCtx, withDirectives, resolveDynamicComponent, normalizeProps, guardReactiveProps, renderSlot, createCommentVNode, vShow } from "vue";
+/* empty css                           */
+import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "DtCollapsibleLazyShow",
+  inheritAttrs: false,
+  /******************
+   *     PROPS      *
+   ******************/
+  props: {
+    /**
+     * Whether the child slot is shown.
+     */
+    show: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Enable/Disable transition animation
+     */
+    appear: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * HTML element type (tag name) of the content wrapper element.
+     */
+    elementType: {
+      type: String,
+      default: "div"
+    }
+  },
+  /******************
+   *      DATA      *
+   ******************/
+  data() {
+    return {
+      initialized: !!this.show
+    };
+  },
+  /******************
+   *    COMPUTED    *
+   ******************/
+  computed: {
+    /**
+     * Set the css property to false when running tests only.
+     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about
+     * transition `css` property
+     * @returns {boolean}
+     */
+    isCSSEnabled() {
+      return process.env.NODE_ENV !== "test";
+    }
+  },
+  /******************
+   *      WATCH     *
+   ******************/
+  watch: {
+    show: function(newValue) {
+      if (!newValue || this.initialized) return;
+      this.initialized = true;
+    }
+  },
+  methods: {
+    /**
+     * @param {HTMLElement} element
+     */
+    beforeEnter(element) {
+      requestAnimationFrame(() => {
+        if (!element.style.height) {
+          element.style.height = "0px";
+        }
+      });
+    },
+    /**
+     * @param {HTMLElement} element
+     */
+    enter(element) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          element.style.height = `${element.scrollHeight}px`;
+        });
+      });
+    },
+    /**
+     * @param {HTMLElement} element
+     */
+    afterEnter(element) {
+      element.style.height = null;
+    },
+    /**
+     * @param {HTMLElement} element
+     */
+    beforeLeave(element) {
+      requestAnimationFrame(() => {
+        if (!element.style.height) {
+          element.style.height = `${element.offsetHeight}px`;
+        }
+      });
+    },
+    /**
+     * @param {HTMLElement} element
+     */
+    leave(element) {
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => {
+          element.style.height = "0px";
+        });
+      });
+    },
+    /**
+     * @param {HTMLElement} element
+     */
+    afterLeave(element) {
+      element.style.height = null;
+    }
+  }
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock(Transition, mergeProps({
+    appear: $props.appear,
+    "enter-active-class": "enter-active",
+    "leave-active-class": "leave-active"
+  }, _ctx.$attrs, {
+    css: $options.isCSSEnabled,
+    onBeforeEnter: $options.beforeEnter,
+    onEnter: $options.enter,
+    onAfterEnter: $options.afterEnter,
+    onBeforeLeave: $options.beforeLeave,
+    onLeave: $options.leave,
+    onAfterLeave: $options.afterLeave
+  }), {
+    default: withCtx(() => [
+      withDirectives((openBlock(), createBlock(resolveDynamicComponent($props.elementType), normalizeProps(guardReactiveProps(_ctx.$attrs)), {
+        default: withCtx(() => [
+          $data.initialized ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 16)), [
+        [vShow, $props.show]
+      ])
+    ]),
+    _: 3
+  }, 16, ["appear", "css", "onBeforeEnter", "onEnter", "onAfterEnter", "onBeforeLeave", "onLeave", "onAfterLeave"]);
+}
+const DtCollapsibleLazyShow = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  DtCollapsibleLazyShow as default
+};
+//# sourceMappingURL=collapsible_lazy_show.vue.js.map

package/dist/components/collapsible/collapsible_lazy_show.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible_lazy_show.vue.js","sources":["../../../components/collapsible/collapsible_lazy_show.vue"],"sourcesContent":["<template>\n  <!-- applies the transition on initial render -->\n  <transition\n    :appear=\"appear\"\n    enter-active-class=\"enter-active\"\n    leave-active-class=\"leave-active\"\n    v-bind=\"$attrs\"\n    :css=\"isCSSEnabled\"\n    @before-enter=\"beforeEnter\"\n    @enter=\"enter\"\n    @after-enter=\"afterEnter\"\n    @before-leave=\"beforeLeave\"\n    @leave=\"leave\"\n    @after-leave=\"afterLeave\"\n  >\n    <component\n      :is=\"elementType\"\n      v-show=\"show\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot slot for Content within collapsible -->\n      <slot v-if=\"initialized\" />\n    </component>\n  </transition>\n</template>\n\n<script>\nexport default {\n  name: 'DtCollapsibleLazyShow',\n\n  inheritAttrs: false,\n\n  /******************\n   *     PROPS      *\n   ******************/\n  props: {\n    /**\n     * Whether the child slot is shown.\n     */\n    show: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Enable/Disable transition animation\n     */\n    appear: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n  },\n\n  /******************\n   *      DATA      *\n   ******************/\n  data () {\n    return {\n      initialized: !!this.show,\n    };\n  },\n\n  /******************\n   *    COMPUTED    *\n   ******************/\n  computed: {\n    /**\n     * Set the css property to false when running tests only.\n     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n     * transition `css` property\n     * @returns {boolean}\n     */\n    isCSSEnabled () {\n      return process.env.NODE_ENV !== 'test';\n    },\n  },\n\n  /******************\n   *      WATCH     *\n   ******************/\n  watch: {\n    show: function (newValue) {\n      if (!newValue || this.initialized) return;\n\n      this.initialized = true;\n    },\n  },\n\n  methods: {\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeEnter (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = '0px';\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    enter (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = `${element.scrollHeight}px`;\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterEnter (element) {\n      element.style.height = null;\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    beforeLeave (element) {\n      requestAnimationFrame(() => {\n        if (!element.style.height) {\n          element.style.height = `${element.offsetHeight}px`;\n        }\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    leave (element) {\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          element.style.height = '0px';\n        });\n      });\n    },\n\n    /**\n     * @param {HTMLElement} element\n     */\n    afterLeave (element) {\n      element.style.height = null;\n    },\n  },\n};\n</script>\n\n<style>\n  .enter-active,\n  .leave-active {\n    overflow: hidden;\n    transition: height var(--td300) var(--ttf-out-quint);\n  }\n</style>\n"],"names":["_openBlock","_createBlock","_Transition","_mergeProps","_resolveDynamicComponent","_normalizeProps","_guardReactiveProps","_renderSlot"],"mappings":";;;AA2BA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,cAAc;AAAA;AAAA;AAAA;AAAA,EAKd,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKD,OAAQ;AACN,WAAO;AAAA,MACL,aAAa,CAAC,CAAC,KAAK;AAAA;EAEvB;AAAA;AAAA;AAAA;AAAA,EAKD,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOR,eAAgB;AACd,aAAO,QAAQ,IAAI,aAAa;AAAA,IACjC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKD,OAAO;AAAA,IACL,MAAM,SAAU,UAAU;AACxB,UAAI,CAAC,YAAY,KAAK,YAAa;AAEnC,WAAK,cAAc;AAAA,IACpB;AAAA,EACF;AAAA,EAED,SAAS;AAAA;AAAA;AAAA;AAAA,IAIP,YAAa,SAAS;AACpB,4BAAsB,MAAM;AAC1B,YAAI,CAAC,QAAQ,MAAM,QAAQ;AACzB,kBAAQ,MAAM,SAAS;AAAA,QACzB;AAAA,MACF,CAAC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,MAAO,SAAS;AACd,4BAAsB,MAAM;AAC1B,8BAAsB,MAAM;AAC1B,kBAAQ,MAAM,SAAS,GAAG,QAAQ,YAAY;AAAA,QAChD,CAAC;AAAA,MACH,CAAC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,WAAY,SAAS;AACnB,cAAQ,MAAM,SAAS;AAAA,IACxB;AAAA;AAAA;AAAA;AAAA,IAKD,YAAa,SAAS;AACpB,4BAAsB,MAAM;AAC1B,YAAI,CAAC,QAAQ,MAAM,QAAQ;AACzB,kBAAQ,MAAM,SAAS,GAAG,QAAQ,YAAY;AAAA,QAChD;AAAA,MACF,CAAC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,MAAO,SAAS;AACd,4BAAsB,MAAM;AAC1B,8BAAsB,MAAM;AAC1B,kBAAQ,MAAM,SAAS;AAAA,QACzB,CAAC;AAAA,MACH,CAAC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,WAAY,SAAS;AACnB,cAAQ,MAAM,SAAS;AAAA,IACxB;AAAA,EACF;AACH;;AAzJE,SAAAA,UAAA,GAAAC,YAqBaC,YArBbC,WAqBa;AAAA,IApBV,QAAQ,OAAM;AAAA,IACf,sBAAmB;AAAA,IACnB,sBAAmB;AAAA,KACX,KAAM,QAAA;AAAA,IACb,KAAK,SAAY;AAAA,IACjB,eAAc,SAAW;AAAA,IACzB,SAAO,SAAK;AAAA,IACZ,cAAa,SAAU;AAAA,IACvB,eAAc,SAAW;AAAA,IACzB,SAAO,SAAK;AAAA,IACZ,cAAa,SAAU;AAAA;qBAExB,MAOY;AAAA,mCAPZF,YAOYG,wBANL,OAAW,WAAA,GAAAC,eAAAC,mBAER,KAAM,MAAA,CAAA,GAAA;AAAA,yBAGd,MAA2B;AAAA,UAAf,MAAW,cAAvBC,WAA2B,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA;;;;gBAJnB,OAAI,IAAA;AAAA;;;;;;"}

package/dist/{chunks/index-4qgKeErp.js → components/combobox/combobox.vue.cjs}

@@ -1,100 +1,19 @@
 "use strict";
-const keyboard_list_navigation = require("./keyboard_list_navigation-fJnl_Iox.js");
-const common_utils = require("../common/utils.cjs");
+const keyboard_list_navigation = require("../../common/mixins/keyboard_list_navigation.cjs");
+const common_utils = require("../../common/utils.cjs");
+const combobox_loadingList = require("./combobox_loading-list.vue.cjs");
+const combobox_emptyList = require("./combobox_empty-list.vue.cjs");
+const combobox_constants = require("./combobox_constants.cjs");
 const vue = require("vue");
-const _pluginVue_exportHelper = require("./_plugin-vue_export-helper-fhnQq0tA.js");
-const lib_listItem = require("../lib/list-item.cjs");
-const lib_skeleton = require("../lib/skeleton.cjs");
-const _sfc_main$2 = {
-  name: "ComboboxLoadingList",
-  components: { DtListItem: lib_listItem.DtListItem, DtSkeleton: lib_skeleton.DtSkeleton }
-};
-const _hoisted_1$2 = {
-  class: "d-combobox__loading-list",
-  "aria-busy": "true"
-};
-function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_skeleton = vue.resolveComponent("dt-skeleton");
-  const _component_dt_list_item = vue.resolveComponent("dt-list-item");
-  return vue.openBlock(), vue.createElementBlock("ol", _hoisted_1$2, [
-    (vue.openBlock(), vue.createElementBlock(vue.Fragment, null, vue.renderList(7, (index) => {
-      return vue.createVNode(_component_dt_list_item, {
-        key: index,
-        role: "option",
-        "navigation-type": "none"
-      }, {
-        default: vue.withCtx(() => [
-          vue.createVNode(_component_dt_skeleton, {
-            "text-option": { type: "body" },
-            offset: 0
-          })
-        ]),
-        _: 2
-      }, 1024);
-    }), 64))
-  ]);
-}
-const ComboboxLoadingList = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
-const _sfc_main$1 = {
-  name: "ComboboxEmptyList",
-  components: { DtListItem: lib_listItem.DtListItem },
-  props: {
-    /**
-     * Message to display when list is empty
-     */
-    message: {
-      type: String,
-      required: true
-    },
-    /**
-     * Additional class name for the empty list element.
-     * Can accept all of String, Object, and Array, i.e. has the
-     * same api as Vue's built-in handling of the class attribute.
-     */
-    itemClass: {
-      type: [String, Object, Array],
-      default: ""
-    }
-  }
-};
-const _hoisted_1$1 = {
-  class: "d-combobox__empty-list",
-  "data-qa": "dt-combobox-empty-list"
-};
-function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_list_item = vue.resolveComponent("dt-list-item");
-  return vue.openBlock(), vue.createElementBlock("ol", _hoisted_1$1, [
-    vue.renderSlot(_ctx.$slots, "default", {}, () => [
-      vue.createVNode(_component_dt_list_item, {
-        role: "option",
-        "navigation-type": "none",
-        type: "custom",
-        class: vue.normalizeClass(["dt-empty-list-item", $props.itemClass])
-      }, {
-        default: vue.withCtx(() => [
-          vue.createElementVNode("span", null, vue.toDisplayString($props.message), 1)
-        ]),
-        _: 1
-      }, 8, ["class"])
-    ])
-  ]);
-}
-const ComboboxEmptyList = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
-const LABEL_SIZES = {
-  EXTRA_SMALL: "xs",
-  SMALL: "sm",
-  DEFAULT: "md",
-  LARGE: "lg",
-  EXTRA_LARGE: "xl"
-};
+const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const _sfc_main = {
   name: "DtCombobox",
   components: {
-    ComboboxLoadingList,
-    ComboboxEmptyList
+    ComboboxLoadingList: combobox_loadingList,
+    ComboboxEmptyList: combobox_emptyList
   },
   mixins: [
-    keyboard_list_navigation.KeyboardNavigation({
+    keyboard_list_navigation({
       indexKey: "highlightIndex",
       idKey: "highlightId",
       listElementKey: "getListElement",
@@ -127,7 +46,7 @@ const _sfc_main = {
     size: {
       type: String,
       default: null,
-      validator: (t) => Object.values(LABEL_SIZES).includes(t)
+      validator: (t) => Object.values(combobox_constants.LABEL_SIZES).includes(t)
     },
     /**
      * Description for the input
@@ -295,8 +214,7 @@ const _sfc_main = {
       return this.highlightId;
     },
     activeItemEl() {
-      if (!this.highlightId)
-        return "";
+      if (!this.highlightId) return "";
       return this.getListElement().querySelector("#" + this.highlightId);
     }
   },
@@ -329,8 +247,7 @@ const _sfc_main = {
   },
   methods: {
     onMouseHighlight(e) {
-      if (this.loading)
-        return;
+      if (this.loading) return;
       const liElement = e.target.closest("li");
       if (liElement && this.highlightId !== liElement.id) {
         this.setHighlightId(liElement.id);
@@ -346,14 +263,12 @@ const _sfc_main = {
       }
     },
     afterHighlight() {
-      if (this.loading)
-        return;
+      if (this.loading) return;
       this.$emit("highlight", this.highlightIndex);
     },
     onEnterKey() {
       var _a;
-      if (this.loading || this.emptyList)
-        return;
+      if (this.loading || this.emptyList) return;
       if (this.highlightIndex >= 0) {
         this.$emit("select", this.highlightIndex);
         if (this.clickOnSelect) {
@@ -374,13 +289,11 @@ const _sfc_main = {
       }
     },
     onKeyValidation(e, eventHandler) {
-      if (!this.showList || !this.getListElement())
-        return;
+      if (!this.showList || !this.getListElement()) return;
       this[eventHandler](e);
     },
     setInitialHighlightIndex() {
-      if (!this.showList)
-        return;
+      if (!this.showList) return;
       this.$nextTick(() => {
         this.setHighlightIndex(this.loading ? -1 : 0);
       });
@@ -438,9 +351,6 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     ], 544)) : vue.createCommentVNode("", true)
   ], 32);
 }
-const DtCombobox = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
-exports.ComboboxEmptyList = ComboboxEmptyList;
-exports.ComboboxLoadingList = ComboboxLoadingList;
-exports.DtCombobox = DtCombobox;
-exports.LABEL_SIZES = LABEL_SIZES;
-//# sourceMappingURL=index-4qgKeErp.js.map
+const DtCombobox = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
+module.exports = DtCombobox;
+//# sourceMappingURL=combobox.vue.cjs.map

package/dist/components/combobox/combobox.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox.vue.cjs","sources":["../../../components/combobox/combobox.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/no-static-element-interactions -->\n<template>\n  <div\n    @keydown.esc.stop=\"onKeyValidation($event, 'onEscapeKey')\"\n    @keydown.enter.exact=\"onKeyValidation($event, 'onEnterKey')\"\n    @keydown.up.stop.prevent=\"onKeyValidation($event, 'onUpKey')\"\n    @keydown.down.stop.prevent=\"onKeyValidation($event, 'onDownKey')\"\n    @keydown.home.stop.prevent=\"onKeyValidation($event, 'onHomeKey')\"\n    @keydown.end.stop.prevent=\"onKeyValidation($event, 'onEndKey')\"\n  >\n    <div data-qa=\"dt-combobox-input-wrapper\">\n      <!-- @slot Slot for the combobox input element -->\n      <slot\n        name=\"input\"\n        :input-props=\"inputProps\"\n      />\n    </div>\n\n    <div\n      v-if=\"showList\"\n      ref=\"listWrapper\"\n      data-qa=\"dt-combobox-list-wrapper\"\n      @mouseleave=\"clearHighlightIndex\"\n      @focusout=\"clearHighlightIndex\"\n      @mousemove.capture=\"onMouseHighlight\"\n    >\n      <combobox-loading-list\n        v-if=\"loading && !listRenderedOutside\"\n        v-bind=\"listProps\"\n      />\n      <combobox-empty-list\n        v-else-if=\"emptyList && (emptyStateMessage || hasSlotContent($slots.emptyListItem)) && !listRenderedOutside\"\n        v-bind=\"listProps\"\n        :message=\"emptyStateMessage\"\n        :item-class=\"emptyStateClass\"\n      >\n        <slot name=\"emptyListItem\" />\n      </combobox-empty-list>\n      <!-- @slot Slot for the combobox list element -->\n      <slot\n        v-else\n        name=\"list\"\n        :list-props=\"listProps\"\n        :opened=\"onOpen\"\n        :clear-highlight-index=\"clearHighlightIndex\"\n      />\n    </div>\n  </div>\n</template>\n\n<script>\nimport KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport ComboboxLoadingList from './combobox_loading-list.vue';\nimport ComboboxEmptyList from './combobox_empty-list.vue';\nimport { LABEL_SIZES } from '@/components/combobox/combobox_constants';\n\n/**\n * A combobox is a semantic component that displays an input element combined with a listbox,\n * which enables the user to select items from the list.\n * @see https://dialtone.dialpad.com/components/combobox.html\n */\nexport default {\n  name: 'DtCombobox',\n\n  components: {\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  mixins: [\n    KeyboardNavigation({\n      indexKey: 'highlightIndex',\n      idKey: 'highlightId',\n      listElementKey: 'getListElement',\n      afterHighlightMethod: 'afterHighlight',\n      beginningOfListMethod: 'beginningOfListMethod',\n      endOfListMethod: 'endOfListMethod',\n      activeItemKey: 'activeItemEl',\n    }),\n  ],\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values null, xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: null,\n      validator: (t) => Object.values(LABEL_SIZES).includes(t),\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets an ID on the list element of the component. Used by several aria attributes\n     * as well as when deriving the IDs for each item.\n     */\n    listId: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * A method that will be called when the selection goes past the beginning of the list.\n     */\n    onBeginningOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * A method that will be called when the selection goes past the end of the list.\n     */\n    onEndOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * @values true, false\n     */\n    showList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * If the list is rendered outside the component, like when using popover as the list wrapper.\n     * @values true, false\n     */\n    listRenderedOutside: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\n     * @values true, false\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.\n     * @values true, false\n     */\n    emptyList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Message to show when the list is empty\n     */\n    emptyStateMessage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class name for the empty list element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    emptyStateClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Programmatically click on the active list item element when a selection\n     * comes from keyboard navigation, i.e. pressing the \"Enter\" key.\n     * @values true, false\n     */\n    clickOnSelect: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when pressing escape\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when the highlight changes\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Event fired when list is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      // If the list is rendered at the root, rather than as a child\n      // of this component, this is the ref to that dom element. Set\n      // by the onOpen method.\n      outsideRenderedListRef: null,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    inputProps () {\n      return {\n        label: this.label,\n        labelVisible: this.labelVisible,\n        size: this.size,\n        description: this.description,\n        role: 'combobox',\n        'aria-label': this.label,\n        'aria-expanded': this.showList.toString(),\n        'aria-owns': this.listId,\n        'aria-haspopup': 'listbox',\n        'aria-activedescendant': this.activeItemId,\n        'aria-controls': this.listId,\n      };\n    },\n\n    listProps () {\n      return {\n        role: 'listbox',\n        id: this.listId,\n        // The list has to be positioned relatively so that the auto-scroll can\n        // calculate the correct offset for the list items.\n        class: 'd-ps-relative',\n        'aria-label': this.label,\n      };\n    },\n\n    beginningOfListMethod () {\n      return this.onBeginningOfList || this.jumpToEnd;\n    },\n\n    endOfListMethod () {\n      return this.onEndOfList || this.jumpToBeginning;\n    },\n\n    activeItemId () {\n      if (!this.showList || this.highlightIndex < 0 || this.loading) {\n        return;\n      }\n      return this.highlightId;\n    },\n\n    activeItemEl () {\n      if (!this.highlightId) return '';\n      return this.getListElement().querySelector('#' + this.highlightId);\n    },\n  },\n\n  watch: {\n    showList (showList) {\n      // When the list's visibility changes reset the highlight index.\n\n      if (!this.listRenderedOutside) {\n        this.setInitialHighlightIndex();\n        this.$emit('opened', showList);\n      }\n\n      if (!showList && this.outsideRenderedListRef) {\n        this.outsideRenderedListRef.removeEventListener('mousemove', this.onMouseHighlight);\n        this.outsideRenderedListRef = null;\n      }\n    },\n\n    loading (loading) {\n      this.$nextTick(() => {\n        this.setInitialHighlightIndex();\n      });\n    },\n\n    $props: {\n      deep: true,\n      immediate: true,\n      handler () {\n        this.validateEmptyListProps();\n      },\n    },\n  },\n\n  created () {\n    this.validateEmptyListProps();\n  },\n\n  methods: {\n    onMouseHighlight (e) {\n      if (this.loading) return;\n\n      const liElement = e.target.closest('li');\n\n      if (liElement && this.highlightId !== liElement.id) {\n        this.setHighlightId(liElement.id);\n      }\n    },\n\n    getListElement () {\n      return this.outsideRenderedListRef ?? this.$refs.listWrapper?.querySelector(`#${this.listId}`);\n    },\n\n    clearHighlightIndex () {\n      if (this.showList) {\n        this.setHighlightIndex(-1);\n      }\n    },\n\n    afterHighlight () {\n      if (this.loading) return;\n      this.$emit('highlight', this.highlightIndex);\n    },\n\n    onEnterKey () {\n      if (this.loading || this.emptyList) return;\n\n      if (this.highlightIndex >= 0) {\n        this.$emit('select', this.highlightIndex);\n\n        if (this.clickOnSelect) {\n          this.activeItemEl?.click();\n        }\n      }\n    },\n\n    onEscapeKey () {\n      this.$emit('escape');\n    },\n\n    onOpen (open, contentRef) {\n      this.outsideRenderedListRef = contentRef;\n      this.outsideRenderedListRef?.addEventListener('mousemove', this.onMouseHighlight);\n      this.$emit('opened', open);\n\n      if (open) {\n        this.setInitialHighlightIndex();\n      }\n    },\n\n    onKeyValidation (e, eventHandler) {\n      if (!this.showList || !this.getListElement()) return;\n\n      this[eventHandler](e);\n    },\n\n    setInitialHighlightIndex () {\n      if (!this.showList) return;\n      this.$nextTick(() => {\n      // When the list's is shown, reset the highlight index.\n      // If the list is loading, set to -1\n        this.setHighlightIndex(this.loading ? -1 : 0);\n      });\n    },\n\n    validateEmptyListProps () {\n      if (this.$slots.emptyListItem) { return; }\n\n      if (this.emptyList && !this.emptyStateMessage) {\n        console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n      empty message.`);\n      }\n    },\n  },\n};\n</script>\n"],"names":["ComboboxLoadingList","ComboboxEmptyList","KeyboardNavigation","LABEL_SIZES","getUniqueString","hasSlotContent","_createElementBlock","_withKeys","_withModifiers","_createElementVNode","_renderSlot","_openBlock","_createBlock","_mergeProps"],"mappings":"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"}