@dialpad/dialtone-vue 2.157.1-beta.1 → 2.157.1

package/dist/components/description_list/description_list_constants.js

@@ -0,0 +1,5 @@
+const DT_DESCRIPTION_LIST_DIRECTION = ["row", "column"];
+export {
+  DT_DESCRIPTION_LIST_DIRECTION
+};
+//# sourceMappingURL=description_list_constants.js.map

package/dist/components/description_list/description_list_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"description_list_constants.js","sources":["../../../components/description_list/description_list_constants.js"],"sourcesContent":["export const DT_DESCRIPTION_LIST_DIRECTION = ['row', 'column'];\n"],"names":[],"mappings":"AAAY,MAAC,gCAAgC,CAAC,OAAO,QAAQ;"}

package/dist/components/description_list/description_list_validators.cjs

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const hasValidTerm = (item) => {
+  if (!item.term) {
+    return false;
+  }
+  return typeof item.term === "string";
+};
+const hasValidDescription = (item) => {
+  if (!item.description) {
+    return false;
+  }
+  return typeof item.description === "string";
+};
+const itemsValidator = (items) => {
+  if (!Array.isArray(items)) {
+    return false;
+  }
+  return items.every((item) => {
+    if (typeof item !== "object") {
+      return false;
+    }
+    if (!hasValidTerm(item)) {
+      return false;
+    }
+    if (!hasValidDescription(item)) {
+      return false;
+    }
+    return true;
+  });
+};
+exports.itemsValidator = itemsValidator;
+//# sourceMappingURL=description_list_validators.cjs.map

package/dist/components/description_list/description_list_validators.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"description_list_validators.cjs","sources":["../../../components/description_list/description_list_validators.js"],"sourcesContent":["const hasValidTerm = item => {\n  if (!item.term) {\n    return false;\n  }\n\n  return typeof item.term === 'string';\n};\n\nconst hasValidDescription = item => {\n  if (!item.description) {\n    return false;\n  }\n\n  return typeof item.description === 'string';\n};\n\nexport const itemsValidator = items => {\n  if (!Array.isArray(items)) {\n    return false;\n  }\n\n  return items.every(item => {\n    if (typeof item !== 'object') {\n      return false;\n    }\n\n    if (!hasValidTerm(item)) {\n      return false;\n    }\n\n    if (!hasValidDescription(item)) {\n      return false;\n    }\n\n    return true;\n  });\n};\n"],"names":[],"mappings":";;AAAA,MAAM,eAAe,UAAQ;AAC3B,MAAI,CAAC,KAAK,MAAM;AACd,WAAO;AAAA,EACR;AAED,SAAO,OAAO,KAAK,SAAS;AAC9B;AAEA,MAAM,sBAAsB,UAAQ;AAClC,MAAI,CAAC,KAAK,aAAa;AACrB,WAAO;AAAA,EACR;AAED,SAAO,OAAO,KAAK,gBAAgB;AACrC;AAEY,MAAC,iBAAiB,WAAS;AACrC,MAAI,CAAC,MAAM,QAAQ,KAAK,GAAG;AACzB,WAAO;AAAA,EACR;AAED,SAAO,MAAM,MAAM,UAAQ;AACzB,QAAI,OAAO,SAAS,UAAU;AAC5B,aAAO;AAAA,IACR;AAED,QAAI,CAAC,aAAa,IAAI,GAAG;AACvB,aAAO;AAAA,IACR;AAED,QAAI,CAAC,oBAAoB,IAAI,GAAG;AAC9B,aAAO;AAAA,IACR;AAED,WAAO;AAAA,EACX,CAAG;AACH;;"}

package/dist/components/description_list/description_list_validators.js

@@ -0,0 +1,33 @@
+const hasValidTerm = (item) => {
+  if (!item.term) {
+    return false;
+  }
+  return typeof item.term === "string";
+};
+const hasValidDescription = (item) => {
+  if (!item.description) {
+    return false;
+  }
+  return typeof item.description === "string";
+};
+const itemsValidator = (items) => {
+  if (!Array.isArray(items)) {
+    return false;
+  }
+  return items.every((item) => {
+    if (typeof item !== "object") {
+      return false;
+    }
+    if (!hasValidTerm(item)) {
+      return false;
+    }
+    if (!hasValidDescription(item)) {
+      return false;
+    }
+    return true;
+  });
+};
+export {
+  itemsValidator
+};
+//# sourceMappingURL=description_list_validators.js.map

package/dist/components/description_list/description_list_validators.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"description_list_validators.js","sources":["../../../components/description_list/description_list_validators.js"],"sourcesContent":["const hasValidTerm = item => {\n  if (!item.term) {\n    return false;\n  }\n\n  return typeof item.term === 'string';\n};\n\nconst hasValidDescription = item => {\n  if (!item.description) {\n    return false;\n  }\n\n  return typeof item.description === 'string';\n};\n\nexport const itemsValidator = items => {\n  if (!Array.isArray(items)) {\n    return false;\n  }\n\n  return items.every(item => {\n    if (typeof item !== 'object') {\n      return false;\n    }\n\n    if (!hasValidTerm(item)) {\n      return false;\n    }\n\n    if (!hasValidDescription(item)) {\n      return false;\n    }\n\n    return true;\n  });\n};\n"],"names":[],"mappings":"AAAA,MAAM,eAAe,UAAQ;AAC3B,MAAI,CAAC,KAAK,MAAM;AACd,WAAO;AAAA,EACR;AAED,SAAO,OAAO,KAAK,SAAS;AAC9B;AAEA,MAAM,sBAAsB,UAAQ;AAClC,MAAI,CAAC,KAAK,aAAa;AACrB,WAAO;AAAA,EACR;AAED,SAAO,OAAO,KAAK,gBAAgB;AACrC;AAEY,MAAC,iBAAiB,WAAS;AACrC,MAAI,CAAC,MAAM,QAAQ,KAAK,GAAG;AACzB,WAAO;AAAA,EACR;AAED,SAAO,MAAM,MAAM,UAAQ;AACzB,QAAI,OAAO,SAAS,UAAU;AAC5B,aAAO;AAAA,IACR;AAED,QAAI,CAAC,aAAa,IAAI,GAAG;AACvB,aAAO;AAAA,IACR;AAED,QAAI,CAAC,oBAAoB,IAAI,GAAG;AAC9B,aAAO;AAAA,IACR;AAED,WAAO;AAAA,EACX,CAAG;AACH;"}

package/dist/{chunks/dropdown-pHxnQPzT.js → components/dropdown/dropdown.vue.cjs}

@@ -1,21 +1,23 @@
 "use strict";
-const keyboard_list_navigation = require("./keyboard_list_navigation-fJnl_Iox.js");
-const dropdown_constants = require("./dropdown_constants-2pGCXy7m.js");
-const common_utils = require("../common/utils.cjs");
-const common_constants = require("../common/constants.cjs");
-const sr_only_close_button = require("./sr_only_close_button-ZaGdAHz7.js");
-const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-1aBeR4AK.js");
-const lib_popover = require("../lib/popover.cjs");
-const list_item_constants = require("./list_item_constants-EiqkqZvP.js");
-const popover_constants = require("./popover_constants-XnGWXaxX.js");
+const keyboard_list_navigation = require("../../common/mixins/keyboard_list_navigation.cjs");
+const dropdown_constants = require("./dropdown_constants.cjs");
+const common_utils = require("../../common/utils.cjs");
+const common_constants = require("../../common/constants.cjs");
+const sr_only_close_button$1 = require("../../common/mixins/sr_only_close_button.cjs");
+const sr_only_close_button = require("../../common/sr_only_close_button.vue.cjs");
+;/* empty css                */
+const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
+const popover = require("../popover/popover.vue.cjs");
+const list_item_constants = require("../list_item/list_item_constants.cjs");
+const popover_constants = require("../popover/popover_constants.cjs");
 const _sfc_main = {
   name: "DtDropdown",
   components: {
-    DtPopover: lib_popover.DtPopover,
-    SrOnlyCloseButton: sr_only_close_button.SrOnlyCloseButton
+    DtPopover: popover,
+    SrOnlyCloseButton: sr_only_close_button
   },
   mixins: [
-    keyboard_list_navigation.KeyboardNavigation({
+    keyboard_list_navigation({
       indexKey: "highlightIndex",
       idKey: "highlightId",
       listElementKey: "getListElement",
@@ -26,7 +28,7 @@ const _sfc_main = {
       activeItemKey: "activeItemEl",
       focusOnKeyboardNavigation: true
     }),
-    sr_only_close_button.SrOnlyCloseButtonMixin
+    sr_only_close_button$1
   ],
   props: {
     /**
@@ -388,16 +390,14 @@ var _sfc_render = function render() {
   } }], null, true) }, _vm.dropdownListeners));
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
   _sfc_main,
   _sfc_render,
   _sfc_staticRenderFns,
   false,
   null,
-  null,
-  null,
   null
 );
 const DtDropdown = __component__.exports;
-exports.DtDropdown = DtDropdown;
-//# sourceMappingURL=dropdown-pHxnQPzT.js.map
+module.exports = DtDropdown;
+//# sourceMappingURL=dropdown.vue.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.vue.cjs","sources":["../../../components/dropdown/dropdown.vue"],"sourcesContent":["<!-- eslint-disable max-lines -->\n<template>\n  <dt-popover\n    ref=\"popover\"\n    :content-width=\"contentWidth\"\n    :open=\"open\"\n    :placement=\"placement\"\n    :initial-focus-element=\"openedWithKeyboard ? 'first' : 'dialog'\"\n    :fallback-placements=\"fallbackPlacements\"\n    padding=\"none\"\n    role=\"menu\"\n    :append-to=\"appendTo\"\n    :modal=\"modal\"\n    :max-height=\"maxHeight\"\n    :max-width=\"maxWidth\"\n    :open-with-arrow-keys=\"shouldOpenWithArrowKeys\"\n    :open-on-context=\"openOnContext\"\n    :tether=\"tether\"\n    :transition=\"transition\"\n    v-on=\"dropdownListeners\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <!-- @slot Anchor element that activates the dropdown -->\n      <slot\n        ref=\"anchor\"\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content=\"{ close }\">\n      <!-- eslint-disable-next-line max-len -->\n      <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->\n      <ul\n        :id=\"listId\"\n        ref=\"listWrapper\"\n        :class=\"listClasses\"\n        data-qa=\"dt-dropdown-list-wrapper\"\n        @mouseleave=\"clearHighlightIndex\"\n        @mousemove.capture=\"onMouseHighlight\"\n      >\n        <!-- @slot Slot for the list component -->\n        <slot\n          name=\"list\"\n          :close=\"close\"\n        />\n        <sr-only-close-button\n          v-if=\"showVisuallyHiddenClose\"\n          :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n          :tabindex=\"isArrowKeyNav ? -1 : 0\"\n          @close=\"close\"\n        />\n      </ul>\n    </template>\n  </dt-popover>\n</template>\n\n<script>\nimport KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES } from '@/components/popover';\nimport { LIST_ITEM_NAVIGATION_TYPES } from '@/components/list_item';\nimport { DROPDOWN_PADDING_CLASSES } from './dropdown_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\n\nexport default {\n  name: 'DtDropdown',\n\n  components: {\n    DtPopover,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [\n    KeyboardNavigation({\n      indexKey: 'highlightIndex',\n      idKey: 'highlightId',\n      listElementKey: 'getListElement',\n      listItemRole: 'menuitem',\n      afterHighlightMethod: 'afterHighlight',\n      beginningOfListMethod: 'beginningOfListMethod',\n      endOfListMethod: 'endOfListMethod',\n      activeItemKey: 'activeItemEl',\n      focusOnKeyboardNavigation: true,\n    }),\n    SrOnlyCloseButtonMixin,\n  ],\n\n  props: {\n    /**\n     * Controls whether the dropdown is shown. Leaving this null will have the dropdown 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     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Opens the dropdown on right click (context menu). If you set this value to `true`,\n     * the default trigger behavior will be disabled.\n     */\n    openOnContext: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Vertical padding size around the list element.\n     * @values none, small, large\n     */\n    padding: {\n      type: String,\n      default: 'small',\n      validator: (padding) => {\n        return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Determines modal state, dropdown has a modal overlay preventing interaction with elements\n     * below it, but it is invisible.\n     */\n    modal: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Width configuration for the popover content. When its value is 'anchor',\n     * the popover content will have the same width as the anchor.\n     * @values null, anchor\n     */\n    contentWidth: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    maxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\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     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * If the dropdown does not fit in the direction described by \"placement\",\n     * it will attempt to change it's direction to the \"fallbackPlacements\".\n     *\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     * */\n    fallbackPlacements: {\n      type: Array,\n      default: () => {\n        return ['auto'];\n      },\n    },\n\n    /**\n     * The direction the dropdown displays relative to the anchor.\n     */\n    placement: {\n      type: String,\n      default: 'bottom',\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     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * If set to false the dialog will display over top of the anchor when there is insufficient space.\n     * If set to true it will never move from its position relative to the anchor and will clip instead.\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * @values true, false\n     */\n    tether: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when the highlight changes\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Event fired when dropdown is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\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      LIST_ITEM_NAVIGATION_TYPES,\n      DROPDOWN_PADDING_CLASSES,\n      EVENT_KEYNAMES,\n      openedWithKeyboard: false,\n      isOpen: null,\n    };\n  },\n\n  computed: {\n    dropdownListeners () {\n      return {\n        ...this.$listeners,\n\n        opened: isPopoverOpen => {\n          this.updateInitialHighlightIndex(isPopoverOpen);\n        },\n\n        keydown: event => {\n          const eventCode = event.code;\n\n          switch (eventCode) {\n            case EVENT_KEYNAMES.up:\n            case EVENT_KEYNAMES.arrowup:\n              this.onUpKeyPress(event);\n              event.stopPropagation();\n              event.preventDefault();\n              break;\n            case EVENT_KEYNAMES.down:\n            case EVENT_KEYNAMES.arrowdown:\n              this.onDownKeyPress(event);\n              event.stopPropagation();\n              event.preventDefault();\n              break;\n            case EVENT_KEYNAMES.space:\n            case EVENT_KEYNAMES.spacebar:\n              this.onSpaceKey();\n              break;\n            case EVENT_KEYNAMES.enter:\n              this.onEnterKey();\n              break;\n            case EVENT_KEYNAMES.home:\n              this.onHomeKeyPress(event);\n              event.stopPropagation();\n              event.preventDefault();\n              break;\n            case EVENT_KEYNAMES.end:\n              this.onEndKeyPress(event);\n              event.stopPropagation();\n              event.preventDefault();\n              break;\n            default:\n              this.onKeyPress(event);\n              break;\n          }\n\n          this.$emit('keydown', event);\n        },\n      };\n    },\n\n    beginningOfListMethod () {\n      return this.onBeginningOfList || this.jumpToEnd;\n    },\n\n    endOfListMethod () {\n      return this.onEndOfList || this.jumpToBeginning;\n    },\n\n    activeItemEl () {\n      return this.getListElement().querySelector('#' + this.highlightId);\n    },\n\n    isArrowKeyNav () {\n      return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;\n    },\n\n    listClasses () {\n      return [\n        'd-dropdown-list',\n        DROPDOWN_PADDING_CLASSES[this.padding],\n        this.listClass,\n        { 'd-context-menu-list': this.openOnContext },\n      ];\n    },\n\n    shouldOpenWithArrowKeys () {\n      return !this.openOnContext;\n    },\n  },\n\n  methods: {\n    onMouseHighlight (e) {\n      const liElement = e.target.closest('li');\n\n      if (liElement && liElement.role && this.highlightId !== liElement.id) {\n        this.setHighlightId(liElement.id);\n        liElement.focus();\n      }\n    },\n\n    getListElement () {\n      return this.$refs.listWrapper;\n    },\n\n    clearHighlightIndex () {\n      this.setHighlightIndex(-1);\n    },\n\n    afterHighlight () {\n      if (this.visuallyHiddenClose && this.highlightIndex === this._itemsLength() - 1) {\n        return;\n      }\n\n      this.$emit('highlight', this.highlightIndex);\n    },\n\n    updateInitialHighlightIndex (isPopoverOpen) {\n      this.isOpen = isPopoverOpen;\n\n      if (isPopoverOpen) {\n        if (this.openedWithKeyboard && this.isArrowKeyNav) {\n          this.setHighlightIndex(0);\n        }\n        this.$emit('opened', true);\n      } else {\n        this.clearHighlightIndex();\n        this.openedWithKeyboard = false;\n        this.$emit('opened', false);\n      }\n    },\n\n    onSpaceKey () {\n      if (!this.open) {\n        this.openedWithKeyboard = true;\n      }\n    },\n\n    onEnterKey () {\n      if (!this.open) {\n        this.openedWithKeyboard = true;\n      }\n    },\n\n    onUpKeyPress () {\n      if (!this.isOpen) {\n        this.openedWithKeyboard = true;\n        return;\n      }\n      if (this.isArrowKeyNav) {\n        return this.onUpKey();\n      }\n    },\n\n    onDownKeyPress () {\n      if (!this.isOpen) {\n        this.openedWithKeyboard = true;\n        return;\n      }\n      if (this.isArrowKeyNav) {\n        return this.onDownKey();\n      }\n    },\n\n    onHomeKeyPress () {\n      if (!this.isOpen || !this.isArrowKeyNav) {\n        return;\n      }\n\n      return this.onHomeKey();\n    },\n\n    onEndKeyPress () {\n      if (!this.isOpen || !this.isArrowKeyNav) {\n        return;\n      }\n\n      return this.onEndKey();\n    },\n\n    onKeyPress (e) {\n      if (!this.isOpen || !this.isArrowKeyNav || !this.isValidLetter(e.key)) {\n        return;\n      }\n\n      e.stopPropagation();\n      e.preventDefault();\n\n      return this.onNavigationKey(e.key);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.d-context-menu-list {\n  width: var(--dt-size-850);\n}\n.d-dropdown-list {\n  position: relative;\n  margin: var(--dt-space-300);\n  padding-left: var(--dt-space-0);\n  padding-right: var(--dt-space-0);\n  >.dt-list-item {\n    margin-top: var(--dt-space-200);\n  }\n}\n</style>\n"],"names":["DtPopover","SrOnlyCloseButton","KeyboardNavigation","SrOnlyCloseButtonMixin","DROPDOWN_PADDING_CLASSES","getUniqueString","LIST_ITEM_NAVIGATION_TYPES","POPOVER_APPEND_TO_VALUES","EVENT_KEYNAMES"],"mappings":"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"}

package/dist/{chunks/dropdown-6UoczdUY.js → components/dropdown/dropdown.vue.js}

@@ -1,12 +1,14 @@
-import { KeyboardNavigation } from "./keyboard_list_navigation-ScXhrxya.js";
-import { DROPDOWN_PADDING_CLASSES } from "./dropdown_constants-w1MXGC3Z.js";
-import { getUniqueString } from "../common/utils.js";
-import { EVENT_KEYNAMES } from "../common/constants.js";
-import { SrOnlyCloseButton, SrOnlyCloseButtonMixin } from "./sr_only_close_button-81bHIpPu.js";
-import { normalizeComponent } from "./_plugin-vue2_normalizer-sOSkiPF3.js";
-import { DtPopover } from "../lib/popover.js";
-import { LIST_ITEM_NAVIGATION_TYPES } from "./list_item_constants-u1xcN9Dd.js";
-import { POPOVER_APPEND_TO_VALUES } from "./popover_constants-WsOUIY-m.js";
+import KeyboardNavigation from "../../common/mixins/keyboard_list_navigation.js";
+import { DROPDOWN_PADDING_CLASSES } from "./dropdown_constants.js";
+import { getUniqueString } from "../../common/utils.js";
+import { EVENT_KEYNAMES } from "../../common/constants.js";
+import SrOnlyCloseButtonMixin from "../../common/mixins/sr_only_close_button.js";
+import SrOnlyCloseButton from "../../common/sr_only_close_button.vue.js";
+/* empty css              */
+import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
+import DtPopover from "../popover/popover.vue.js";
+import { LIST_ITEM_NAVIGATION_TYPES } from "../list_item/list_item_constants.js";
+import { POPOVER_APPEND_TO_VALUES } from "../popover/popover_constants.js";
 const _sfc_main = {
   name: "DtDropdown",
   components: {
@@ -393,12 +395,10 @@ var __component__ = /* @__PURE__ */ normalizeComponent(
   _sfc_staticRenderFns,
   false,
   null,
-  null,
-  null,
   null
 );
 const DtDropdown = __component__.exports;
 export {
-  DtDropdown
+  DtDropdown as default
 };
-//# sourceMappingURL=dropdown-6UoczdUY.js.map
+//# sourceMappingURL=dropdown.vue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.vue.js","sources":["../../../components/dropdown/dropdown.vue"],"sourcesContent":["<!-- eslint-disable max-lines -->\n<template>\n  <dt-popover\n    ref=\"popover\"\n    :content-width=\"contentWidth\"\n    :open=\"open\"\n    :placement=\"placement\"\n    :initial-focus-element=\"openedWithKeyboard ? 'first' : 'dialog'\"\n    :fallback-placements=\"fallbackPlacements\"\n    padding=\"none\"\n    role=\"menu\"\n    :append-to=\"appendTo\"\n    :modal=\"modal\"\n    :max-height=\"maxHeight\"\n    :max-width=\"maxWidth\"\n    :open-with-arrow-keys=\"shouldOpenWithArrowKeys\"\n    :open-on-context=\"openOnContext\"\n    :tether=\"tether\"\n    :transition=\"transition\"\n    v-on=\"dropdownListeners\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <!-- @slot Anchor element that activates the dropdown -->\n      <slot\n        ref=\"anchor\"\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content=\"{ close }\">\n      <!-- eslint-disable-next-line max-len -->\n      <!-- eslint-disable-next-line vuejs-accessibility/mouse-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->\n      <ul\n        :id=\"listId\"\n        ref=\"listWrapper\"\n        :class=\"listClasses\"\n        data-qa=\"dt-dropdown-list-wrapper\"\n        @mouseleave=\"clearHighlightIndex\"\n        @mousemove.capture=\"onMouseHighlight\"\n      >\n        <!-- @slot Slot for the list component -->\n        <slot\n          name=\"list\"\n          :close=\"close\"\n        />\n        <sr-only-close-button\n          v-if=\"showVisuallyHiddenClose\"\n          :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n          :tabindex=\"isArrowKeyNav ? -1 : 0\"\n          @close=\"close\"\n        />\n      </ul>\n    </template>\n  </dt-popover>\n</template>\n\n<script>\nimport KeyboardNavigation from '@/common/mixins/keyboard_list_navigation';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES } from '@/components/popover';\nimport { LIST_ITEM_NAVIGATION_TYPES } from '@/components/list_item';\nimport { DROPDOWN_PADDING_CLASSES } from './dropdown_constants';\nimport { getUniqueString } from '@/common/utils';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\n\nexport default {\n  name: 'DtDropdown',\n\n  components: {\n    DtPopover,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [\n    KeyboardNavigation({\n      indexKey: 'highlightIndex',\n      idKey: 'highlightId',\n      listElementKey: 'getListElement',\n      listItemRole: 'menuitem',\n      afterHighlightMethod: 'afterHighlight',\n      beginningOfListMethod: 'beginningOfListMethod',\n      endOfListMethod: 'endOfListMethod',\n      activeItemKey: 'activeItemEl',\n      focusOnKeyboardNavigation: true,\n    }),\n    SrOnlyCloseButtonMixin,\n  ],\n\n  props: {\n    /**\n     * Controls whether the dropdown is shown. Leaving this null will have the dropdown 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     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Opens the dropdown on right click (context menu). If you set this value to `true`,\n     * the default trigger behavior will be disabled.\n     */\n    openOnContext: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Vertical padding size around the list element.\n     * @values none, small, large\n     */\n    padding: {\n      type: String,\n      default: 'small',\n      validator: (padding) => {\n        return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Determines modal state, dropdown has a modal overlay preventing interaction with elements\n     * below it, but it is invisible.\n     */\n    modal: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Width configuration for the popover content. When its value is 'anchor',\n     * the popover content will have the same width as the anchor.\n     * @values null, anchor\n     */\n    contentWidth: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    maxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\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     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * If the dropdown does not fit in the direction described by \"placement\",\n     * it will attempt to change it's direction to the \"fallbackPlacements\".\n     *\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     * */\n    fallbackPlacements: {\n      type: Array,\n      default: () => {\n        return ['auto'];\n      },\n    },\n\n    /**\n     * The direction the dropdown displays relative to the anchor.\n     */\n    placement: {\n      type: String,\n      default: 'bottom',\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     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * If set to false the dialog will display over top of the anchor when there is insufficient space.\n     * If set to true it will never move from its position relative to the anchor and will clip instead.\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * @values true, false\n     */\n    tether: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when the highlight changes\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Event fired when dropdown is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\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      LIST_ITEM_NAVIGATION_TYPES,\n      DROPDOWN_PADDING_CLASSES,\n      EVENT_KEYNAMES,\n      openedWithKeyboard: false,\n      isOpen: null,\n    };\n  },\n\n  computed: {\n    dropdownListeners () {\n      return {\n        ...this.$listeners,\n\n        opened: isPopoverOpen => {\n          this.updateInitialHighlightIndex(isPopoverOpen);\n        },\n\n        keydown: event => {\n          const eventCode = event.code;\n\n          switch (eventCode) {\n            case EVENT_KEYNAMES.up:\n            case EVENT_KEYNAMES.arrowup:\n              this.onUpKeyPress(event);\n              event.stopPropagation();\n              event.preventDefault();\n              break;\n            case EVENT_KEYNAMES.down:\n            case EVENT_KEYNAMES.arrowdown:\n              this.onDownKeyPress(event);\n              event.stopPropagation();\n              event.preventDefault();\n              break;\n            case EVENT_KEYNAMES.space:\n            case EVENT_KEYNAMES.spacebar:\n              this.onSpaceKey();\n              break;\n            case EVENT_KEYNAMES.enter:\n              this.onEnterKey();\n              break;\n            case EVENT_KEYNAMES.home:\n              this.onHomeKeyPress(event);\n              event.stopPropagation();\n              event.preventDefault();\n              break;\n            case EVENT_KEYNAMES.end:\n              this.onEndKeyPress(event);\n              event.stopPropagation();\n              event.preventDefault();\n              break;\n            default:\n              this.onKeyPress(event);\n              break;\n          }\n\n          this.$emit('keydown', event);\n        },\n      };\n    },\n\n    beginningOfListMethod () {\n      return this.onBeginningOfList || this.jumpToEnd;\n    },\n\n    endOfListMethod () {\n      return this.onEndOfList || this.jumpToBeginning;\n    },\n\n    activeItemEl () {\n      return this.getListElement().querySelector('#' + this.highlightId);\n    },\n\n    isArrowKeyNav () {\n      return this.navigationType === this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS;\n    },\n\n    listClasses () {\n      return [\n        'd-dropdown-list',\n        DROPDOWN_PADDING_CLASSES[this.padding],\n        this.listClass,\n        { 'd-context-menu-list': this.openOnContext },\n      ];\n    },\n\n    shouldOpenWithArrowKeys () {\n      return !this.openOnContext;\n    },\n  },\n\n  methods: {\n    onMouseHighlight (e) {\n      const liElement = e.target.closest('li');\n\n      if (liElement && liElement.role && this.highlightId !== liElement.id) {\n        this.setHighlightId(liElement.id);\n        liElement.focus();\n      }\n    },\n\n    getListElement () {\n      return this.$refs.listWrapper;\n    },\n\n    clearHighlightIndex () {\n      this.setHighlightIndex(-1);\n    },\n\n    afterHighlight () {\n      if (this.visuallyHiddenClose && this.highlightIndex === this._itemsLength() - 1) {\n        return;\n      }\n\n      this.$emit('highlight', this.highlightIndex);\n    },\n\n    updateInitialHighlightIndex (isPopoverOpen) {\n      this.isOpen = isPopoverOpen;\n\n      if (isPopoverOpen) {\n        if (this.openedWithKeyboard && this.isArrowKeyNav) {\n          this.setHighlightIndex(0);\n        }\n        this.$emit('opened', true);\n      } else {\n        this.clearHighlightIndex();\n        this.openedWithKeyboard = false;\n        this.$emit('opened', false);\n      }\n    },\n\n    onSpaceKey () {\n      if (!this.open) {\n        this.openedWithKeyboard = true;\n      }\n    },\n\n    onEnterKey () {\n      if (!this.open) {\n        this.openedWithKeyboard = true;\n      }\n    },\n\n    onUpKeyPress () {\n      if (!this.isOpen) {\n        this.openedWithKeyboard = true;\n        return;\n      }\n      if (this.isArrowKeyNav) {\n        return this.onUpKey();\n      }\n    },\n\n    onDownKeyPress () {\n      if (!this.isOpen) {\n        this.openedWithKeyboard = true;\n        return;\n      }\n      if (this.isArrowKeyNav) {\n        return this.onDownKey();\n      }\n    },\n\n    onHomeKeyPress () {\n      if (!this.isOpen || !this.isArrowKeyNav) {\n        return;\n      }\n\n      return this.onHomeKey();\n    },\n\n    onEndKeyPress () {\n      if (!this.isOpen || !this.isArrowKeyNav) {\n        return;\n      }\n\n      return this.onEndKey();\n    },\n\n    onKeyPress (e) {\n      if (!this.isOpen || !this.isArrowKeyNav || !this.isValidLetter(e.key)) {\n        return;\n      }\n\n      e.stopPropagation();\n      e.preventDefault();\n\n      return this.onNavigationKey(e.key);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.d-context-menu-list {\n  width: var(--dt-size-850);\n}\n.d-dropdown-list {\n  position: relative;\n  margin: var(--dt-space-300);\n  padding-left: var(--dt-space-0);\n  padding-right: var(--dt-space-0);\n  >.dt-list-item {\n    margin-top: var(--dt-space-200);\n  }\n}\n</style>\n"],"names":[],"mappings":";;;;;;;;;;;AAkEA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,QAAA;AAAA,IACA,mBAAA;AAAA,MACA,UAAA;AAAA,MACA,OAAA;AAAA,MACA,gBAAA;AAAA,MACA,cAAA;AAAA,MACA,sBAAA;AAAA,MACA,uBAAA;AAAA,MACA,iBAAA;AAAA,MACA,eAAA;AAAA,MACA,2BAAA;AAAA,IACA,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,YAAA;AACA,eAAA,OAAA,KAAA,wBAAA,EAAA,KAAA,CAAA,SAAA,SAAA,OAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,2BAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,OAAA,0BAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAYA,oBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AACA,eAAA,CAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA,CAAA,aAAA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,cAAA;AACA,eAAA,yBAAA,SAAA,QAAA,KACA,oBAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAcA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,oBAAA;AAAA,MACA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,oBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QAEA,QAAA,mBAAA;AACA,eAAA,4BAAA,aAAA;AAAA,QACA;AAAA,QAEA,SAAA,WAAA;AACA,gBAAA,YAAA,MAAA;AAEA,kBAAA,WAAA;AAAA,YACA,KAAA,eAAA;AAAA,YACA,KAAA,eAAA;AACA,mBAAA,aAAA,KAAA;AACA,oBAAA,gBAAA;AACA,oBAAA,eAAA;AACA;AAAA,YACA,KAAA,eAAA;AAAA,YACA,KAAA,eAAA;AACA,mBAAA,eAAA,KAAA;AACA,oBAAA,gBAAA;AACA,oBAAA,eAAA;AACA;AAAA,YACA,KAAA,eAAA;AAAA,YACA,KAAA,eAAA;AACA,mBAAA,WAAA;AACA;AAAA,YACA,KAAA,eAAA;AACA,mBAAA,WAAA;AACA;AAAA,YACA,KAAA,eAAA;AACA,mBAAA,eAAA,KAAA;AACA,oBAAA,gBAAA;AACA,oBAAA,eAAA;AACA;AAAA,YACA,KAAA,eAAA;AACA,mBAAA,cAAA,KAAA;AACA,oBAAA,gBAAA;AACA,oBAAA,eAAA;AACA;AAAA,YACA;AACA,mBAAA,WAAA,KAAA;AACA;AAAA,UACA;AAEA,eAAA,MAAA,WAAA,KAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,aAAA,KAAA,qBAAA,KAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,eAAA,KAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAA,KAAA,iBAAA,cAAA,MAAA,KAAA,WAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAA,KAAA,mBAAA,KAAA,2BAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA,yBAAA,KAAA,OAAA;AAAA,QACA,KAAA;AAAA,QACA,EAAA,uBAAA,KAAA,cAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,0BAAA;AACA,aAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,iBAAA,GAAA;AACA,YAAA,YAAA,EAAA,OAAA,QAAA,IAAA;AAEA,UAAA,aAAA,UAAA,QAAA,KAAA,gBAAA,UAAA,IAAA;AACA,aAAA,eAAA,UAAA,EAAA;AACA,kBAAA,MAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,aAAA,KAAA,MAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,WAAA,kBAAA,EAAA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,UAAA,KAAA,uBAAA,KAAA,mBAAA,KAAA,aAAA,IAAA,GAAA;AACA;AAAA,MACA;AAEA,WAAA,MAAA,aAAA,KAAA,cAAA;AAAA,IACA;AAAA,IAEA,4BAAA,eAAA;AACA,WAAA,SAAA;AAEA,UAAA,eAAA;AACA,YAAA,KAAA,sBAAA,KAAA,eAAA;AACA,eAAA,kBAAA,CAAA;AAAA,QACA;AACA,aAAA,MAAA,UAAA,IAAA;AAAA,MACA,OAAA;AACA,aAAA,oBAAA;AACA,aAAA,qBAAA;AACA,aAAA,MAAA,UAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,UAAA,CAAA,KAAA,MAAA;AACA,aAAA,qBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,UAAA,CAAA,KAAA,MAAA;AACA,aAAA,qBAAA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,UAAA,CAAA,KAAA,QAAA;AACA,aAAA,qBAAA;AACA;AAAA,MACA;AACA,UAAA,KAAA,eAAA;AACA,eAAA,KAAA;MACA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,UAAA,CAAA,KAAA,QAAA;AACA,aAAA,qBAAA;AACA;AAAA,MACA;AACA,UAAA,KAAA,eAAA;AACA,eAAA,KAAA;MACA;AAAA,IACA;AAAA,IAEA,iBAAA;AACA,UAAA,CAAA,KAAA,UAAA,CAAA,KAAA,eAAA;AACA;AAAA,MACA;AAEA,aAAA,KAAA;IACA;AAAA,IAEA,gBAAA;AACA,UAAA,CAAA,KAAA,UAAA,CAAA,KAAA,eAAA;AACA;AAAA,MACA;AAEA,aAAA,KAAA;IACA;AAAA,IAEA,WAAA,GAAA;AACA,UAAA,CAAA,KAAA,UAAA,CAAA,KAAA,iBAAA,CAAA,KAAA,cAAA,EAAA,GAAA,GAAA;AACA;AAAA,MACA;AAEA,QAAA,gBAAA;AACA,QAAA,eAAA;AAEA,aAAA,KAAA,gBAAA,EAAA,GAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;"}

package/dist/{chunks/dropdown_constants-2pGCXy7m.js → components/dropdown/dropdown_constants.cjs}

@@ -1,8 +1,9 @@
 "use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const DROPDOWN_PADDING_CLASSES = {
   none: void 0,
   small: "d-py0",
   large: "d-py4"
 };
 exports.DROPDOWN_PADDING_CLASSES = DROPDOWN_PADDING_CLASSES;
-//# sourceMappingURL=dropdown_constants-2pGCXy7m.js.map
+//# sourceMappingURL=dropdown_constants.cjs.map

package/dist/components/dropdown/dropdown_constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown_constants.cjs","sources":["../../../components/dropdown/dropdown_constants.js"],"sourcesContent":["export const DROPDOWN_PADDING_CLASSES = {\n  none: undefined,\n  small: 'd-py0',\n  large: 'd-py4',\n};\n\nexport default {\n  DROPDOWN_PADDING_CLASSES,\n};\n"],"names":[],"mappings":";;AAAY,MAAC,2BAA2B;AAAA,EACtC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AACT;;"}

package/dist/{chunks/dropdown_constants-w1MXGC3Z.js → components/dropdown/dropdown_constants.js}

@@ -6,4 +6,4 @@ const DROPDOWN_PADDING_CLASSES = {
 export {
   DROPDOWN_PADDING_CLASSES
 };
-//# sourceMappingURL=dropdown_constants-w1MXGC3Z.js.map
+//# sourceMappingURL=dropdown_constants.js.map

package/dist/components/dropdown/dropdown_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown_constants.js","sources":["../../../components/dropdown/dropdown_constants.js"],"sourcesContent":["export const DROPDOWN_PADDING_CLASSES = {\n  none: undefined,\n  small: 'd-py0',\n  large: 'd-py4',\n};\n\nexport default {\n  DROPDOWN_PADDING_CLASSES,\n};\n"],"names":[],"mappings":"AAAY,MAAC,2BAA2B;AAAA,EACtC,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO;AACT;"}

package/dist/components/dropdown/dropdown_separator.vue.cjs

@@ -0,0 +1,22 @@
+"use strict";
+;/* empty css                          */
+const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
+const _sfc_main = {
+  name: "DtDropdownSeparator"
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("li", { staticClass: "dt-list-separator", attrs: { "aria-hidden": "true" } });
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const dropdown_separator = __component__.exports;
+module.exports = dropdown_separator;
+//# sourceMappingURL=dropdown_separator.vue.cjs.map

package/dist/components/dropdown/dropdown_separator.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown_separator.vue.cjs","sources":["../../../components/dropdown/dropdown_separator.vue"],"sourcesContent":["<template>\n  <li\n    aria-hidden=\"true\"\n    class=\"dt-list-separator\"\n  />\n</template>\n\n<script>\nexport default {\n  name: 'DtDropdownSeparator',\n};\n</script>\n\n<style lang=\"less\">\n.dt-list-item[role=\"menuitem\"] {\n  border-radius: var(--dt-size-300);\n}\n.dt-list-separator {\n  border-top: var(--dt-size-100) solid var(--dt-color-border-default);\n  list-style: none;\n  margin: var(--dt-space-300) var(--dt-space-300-negative);\n}\n</style>\n"],"names":[],"mappings":";;;AAQA,MAAA,YAAA;AAAA,EACA,MAAA;AACA;;;;;;;;;;;;;;;;"}

package/dist/components/dropdown/dropdown_separator.vue.js

@@ -0,0 +1,23 @@
+/* empty css                        */
+import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
+const _sfc_main = {
+  name: "DtDropdownSeparator"
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("li", { staticClass: "dt-list-separator", attrs: { "aria-hidden": "true" } });
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const dropdown_separator = __component__.exports;
+export {
+  dropdown_separator as default
+};
+//# sourceMappingURL=dropdown_separator.vue.js.map

package/dist/components/dropdown/dropdown_separator.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown_separator.vue.js","sources":["../../../components/dropdown/dropdown_separator.vue"],"sourcesContent":["<template>\n  <li\n    aria-hidden=\"true\"\n    class=\"dt-list-separator\"\n  />\n</template>\n\n<script>\nexport default {\n  name: 'DtDropdownSeparator',\n};\n</script>\n\n<style lang=\"less\">\n.dt-list-item[role=\"menuitem\"] {\n  border-radius: var(--dt-size-300);\n}\n.dt-list-separator {\n  border-top: var(--dt-size-100) solid var(--dt-color-border-default);\n  list-style: none;\n  margin: var(--dt-space-300) var(--dt-space-300-negative);\n}\n</style>\n"],"names":[],"mappings":";;AAQA,MAAA,YAAA;AAAA,EACA,MAAA;AACA;;;;;;;;;;;;;;;"}

package/dist/components/emoji/emoji.vue.cjs

@@ -0,0 +1,140 @@
+"use strict";
+const common_emoji = require("../../common/emoji.cjs");
+const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
+const skeleton = require("../skeleton/skeleton.vue.cjs");
+const icon_constants = require("../icon/icon_constants.cjs");
+const _sfc_main = {
+  name: "DtEmoji",
+  components: {
+    DtSkeleton: skeleton
+  },
+  props: {
+    /**
+     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.
+     * <a class="d-link" href="https://emojipedia.org/joypixels/" target="_blank">JoyPixels</a>
+     * for all supported shortcode/unicode or the docs for setting up custom emojis.
+     */
+    code: {
+      type: String,
+      required: true
+    },
+    /**
+     * The size of the emoji. Can be any of the icon size utility classes from
+     * <a class="d-link" href="https://dialtone.dialpad.com/components/icon.html" target="_blank"> Dialpad Icon Size</a>
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    size: {
+      type: String,
+      default: "500",
+      validator: (t) => Object.keys(icon_constants.ICON_SIZE_MODIFIERS).includes(t)
+    },
+    /**
+     * Additional class name for the emoji img element.
+     * Can accept String, Object, and Array, i.e. has the
+     * same API as Vue's built-in handling of the class attribute.
+     */
+    imgClass: {
+      type: [String, Object, Array],
+      default: ""
+    },
+    /**
+     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n
+     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will
+     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the
+     * getEmojiData() function
+     */
+    ariaLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * Shows a skeleton loader while the emoji asset is loading.
+     * @values true, false
+     */
+    showSkeleton: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      emojiData: null,
+      imgLoading: false
+    };
+  },
+  computed: {
+    emojiDataValid() {
+      return !!this.emojiData;
+    },
+    emojiSrc() {
+      var _a;
+      if (!this.emojiDataValid) {
+        return "invalid";
+      }
+      if ((_a = this.emojiData) == null ? void 0 : _a.custom) {
+        return common_emoji.customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;
+      }
+      if (["100", "200"].includes(this.size)) {
+        return common_emoji.emojiImageUrlSmall + this.emojiData.key + common_emoji.emojiFileExtensionSmall;
+      } else {
+        return common_emoji.emojiImageUrlLarge + this.emojiData.key + common_emoji.emojiFileExtensionLarge;
+      }
+    },
+    emojiAlt() {
+      if (!this.emojiDataValid) {
+        return void 0;
+      }
+      return this.emojiData.unicode_output ? common_emoji.stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;
+    },
+    emojiLabel() {
+      if (!this.emojiDataValid) {
+        return "Invalid Emoji";
+      }
+      return this.ariaLabel ? this.ariaLabel : this.emojiData.name;
+    },
+    emojiSize() {
+      return icon_constants.ICON_SIZE_MODIFIERS[this.size];
+    }
+  },
+  watch: {
+    code: {
+      handler: function() {
+        this.getEmojiData();
+      },
+      immediate: true
+    },
+    emojiSrc: {
+      handler: async function() {
+        this.imgLoading = true;
+      },
+      immediate: true
+    }
+  },
+  methods: {
+    getEmojiData() {
+      this.emojiData = common_emoji.codeToEmojiData(this.code);
+    },
+    imageLoaded() {
+      this.imgLoading = false;
+    },
+    imageErrored() {
+      this.imgLoading = false;
+    }
+  }
+};
+var _sfc_render = function render() {
+  var _vm = this, _c = _vm._self._c;
+  return _c("span", { class: ["d-emoji d-icon", _vm.emojiSize] }, [_c("dt-skeleton", { directives: [{ name: "show", rawName: "v-show", value: _vm.imgLoading && _vm.showSkeleton, expression: "imgLoading && showSkeleton" }], class: ["d-icon", _vm.emojiSize], attrs: { "offset": 0, "shape-option": { shape: "circle", size: "100%" } } }), _c("img", { directives: [{ name: "show", rawName: "v-show", value: !_vm.imgLoading, expression: "!imgLoading" }], ref: "emojiImg", class: ["d-icon", _vm.emojiSize, _vm.imgClass], attrs: { "aria-label": _vm.emojiLabel, "alt": _vm.emojiAlt, "title": _vm.emojiLabel, "src": _vm.emojiSrc }, on: { "load": _vm.imageLoaded, "error": _vm.imageErrored } })], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns,
+  false,
+  null,
+  null
+);
+const DtEmoji = __component__.exports;
+module.exports = DtEmoji;
+//# sourceMappingURL=emoji.vue.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"emoji.vue.cjs","sources":["../../../components/emoji/emoji.vue"],"sourcesContent":["<template>\n  <span :class=\"['d-emoji d-icon', emojiSize]\">\n    <dt-skeleton\n      v-show=\"imgLoading && showSkeleton\"\n      :offset=\"0\"\n      :class=\"['d-icon', emojiSize]\"\n      :shape-option=\"{ shape: 'circle', size: '100%' }\"\n    />\n    <img\n      v-show=\"!imgLoading\"\n      ref=\"emojiImg\"\n      :class=\"['d-icon', emojiSize, imgClass]\"\n      :aria-label=\"emojiLabel\"\n      :alt=\"emojiAlt\"\n      :title=\"emojiLabel\"\n      :src=\"emojiSrc\"\n      @load=\"imageLoaded\"\n      @error=\"imageErrored\"\n    >\n  </span>\n</template>\n\n<script>\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport {\n  codeToEmojiData,\n  stringToUnicode,\n  emojiImageUrlSmall,\n  emojiFileExtensionSmall,\n  emojiImageUrlLarge,\n  emojiFileExtensionLarge,\n  customEmojiAssetUrl,\n} from '@/common/emoji';\nimport { DtSkeleton } from '@/components/skeleton';\n\n/**\n * Renders an emoji from a shortcode such as :smile: or unicode character such as 😄\n * @see https://dialtone.dialpad.com/components/emoji.html\n */\nexport default {\n  name: 'DtEmoji',\n\n  components: {\n    DtSkeleton,\n  },\n\n  props: {\n    /**\n     * Supports shortcode ex: :smile: or unicode ex: 😄. Will display the resulting emoji.\n     * <a class=\"d-link\" href=\"https://emojipedia.org/joypixels/\" target=\"_blank\">JoyPixels</a>\n     * for all supported shortcode/unicode or the docs for setting up custom emojis.\n     */\n    code: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * The size of the emoji. Can be any of the icon size utility classes from\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/icon.html\" target=\"_blank\"> Dialpad Icon Size</a>\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (t) => Object.keys(ICON_SIZE_MODIFIERS).includes(t),\n    },\n\n    /**\n     * Additional class name for the emoji img element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    imgClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Will be read out on a screen reader for this emoji. You must use this prop if you want your emoji to be i18n\n     * Compatible as Dialtone Vue will not translate it by itself. If you do not set this prop the aria-label will\n     * be set to the english description of the emoji. You can retrieve the description for an emoji yourself via the\n     * getEmojiData() function\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Shows a skeleton loader while the emoji asset is loading.\n     * @values true, false\n     */\n    showSkeleton: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  data () {\n    return {\n      emojiData: null,\n      imgLoading: false,\n    };\n  },\n\n  computed: {\n    emojiDataValid () {\n      return !!this.emojiData;\n    },\n\n    emojiSrc () {\n      if (!this.emojiDataValid) { return 'invalid'; }\n\n      // custom emoji\n      if (this.emojiData?.custom) {\n        return customEmojiAssetUrl + this.emojiData.key + this.emojiData.extension;\n      }\n\n      if (['100', '200'].includes(this.size)) {\n        return emojiImageUrlSmall + this.emojiData.key + emojiFileExtensionSmall;\n      } else {\n        return emojiImageUrlLarge + this.emojiData.key + emojiFileExtensionLarge;\n      }\n    },\n\n    emojiAlt () {\n      if (!this.emojiDataValid) { return undefined; }\n      return this.emojiData.unicode_output ? stringToUnicode(this.emojiData.unicode_output) : this.emojiData.name;\n    },\n\n    emojiLabel () {\n      if (!this.emojiDataValid) { return 'Invalid Emoji'; }\n      return this.ariaLabel ? this.ariaLabel : this.emojiData.name;\n    },\n\n    emojiSize () {\n      return ICON_SIZE_MODIFIERS[this.size];\n    },\n  },\n\n  watch: {\n    code: {\n      handler: function () {\n        this.getEmojiData();\n      },\n\n      immediate: true,\n    },\n\n    emojiSrc: {\n      handler: async function () {\n        this.imgLoading = true;\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    getEmojiData () {\n      this.emojiData = codeToEmojiData(this.code);\n    },\n\n    imageLoaded () {\n      this.imgLoading = false;\n    },\n\n    imageErrored () {\n      this.imgLoading = false;\n    },\n  },\n};\n</script>\n"],"names":["DtSkeleton","ICON_SIZE_MODIFIERS","customEmojiAssetUrl","emojiImageUrlSmall","emojiFileExtensionSmall","emojiImageUrlLarge","emojiFileExtensionLarge","stringToUnicode","codeToEmojiData"],"mappings":";;;;;AAuCA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,YAAAA;AAAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,KAAAC,kCAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,cAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,iBAAA;AACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,WAAA;;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AAGA,WAAA,UAAA,cAAA,mBAAA,QAAA;AACA,eAAAC,aAAAA,sBAAA,KAAA,UAAA,MAAA,KAAA,UAAA;AAAA,MACA;AAEA,UAAA,CAAA,OAAA,KAAA,EAAA,SAAA,KAAA,IAAA,GAAA;AACA,eAAAC,aAAA,qBAAA,KAAA,UAAA,MAAAC,aAAAA;AAAAA,MACA,OAAA;AACA,eAAAC,aAAA,qBAAA,KAAA,UAAA,MAAAC,aAAAA;AAAAA,MACA;AAAA,IACA;AAAA,IAEA,WAAA;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AACA,aAAA,KAAA,UAAA,iBAAAC,6BAAA,KAAA,UAAA,cAAA,IAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,aAAA;AACA,UAAA,CAAA,KAAA,gBAAA;AAAA,eAAA;AAAA,MAAA;AACA,aAAA,KAAA,YAAA,KAAA,YAAA,KAAA,UAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAAN,eAAA,oBAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAA;AAAA,MACA,SAAA,WAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,IAEA,UAAA;AAAA,MACA,SAAA,iBAAA;AACA,aAAA,aAAA;AAAA,MACA;AAAA,MAEA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,eAAA;AACA,WAAA,YAAAO,aAAAA,gBAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,WAAA,aAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;"}