@dialpad/dialtone-vue 3.223.1 → 3.224.0-next.2

package/dist/lib/dropdown/dropdown-separator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-separator.cjs","names":[],"sources":["../../../components/dropdown/dropdown_separator.vue"],"sourcesContent":["<template>\n  <li\n    aria-hidden=\"true\"\n    class=\"d-list-item-separator\"\n  />\n</template>\n\n<script>\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtDropdownSeparator',\n};\n</script>\n"],"mappings":"wNAQA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,sBACP,IATG,cAAY,OACZ,MAAM,kGACN,KAHF,EAGE"}
+{"version":3,"file":"dropdown-separator.cjs","names":[],"sources":["../../../components/Dropdown/DropdownSeparator.vue"],"sourcesContent":["<template>\n  <li\n    aria-hidden=\"true\"\n    class=\"d-list-item-separator\"\n  />\n</template>\n\n<script>\nexport default {\n  name: 'DtDropdownSeparator',\n};\n</script>\n"],"mappings":"wNAQA,IAAK,EAAU,CACb,KAAM,sBACP,IARG,cAAY,OACZ,MAAM,kGACN,KAHF,EAGE"}

package/dist/lib/dropdown/dropdown-separator.js

@@ -1,10 +1,7 @@
 import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
 import { createElementBlock as t, openBlock as n } from "vue";
-//#region components/dropdown/dropdown_separator.vue
-var r = {
-	compatConfig: { MODE: 3 },
-	name: "DtDropdownSeparator"
-}, i = {
+//#region components/Dropdown/DropdownSeparator.vue
+var r = { name: "DtDropdownSeparator" }, i = {
 	"aria-hidden": "true",
 	class: "d-list-item-separator"
 };

package/dist/lib/dropdown/dropdown-separator.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-separator.js","names":[],"sources":["../../../components/dropdown/dropdown_separator.vue"],"sourcesContent":["<template>\n  <li\n    aria-hidden=\"true\"\n    class=\"d-list-item-separator\"\n  />\n</template>\n\n<script>\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtDropdownSeparator',\n};\n</script>\n"],"mappings":";;;AAQA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CACP;CATG,eAAY;CACZ,OAAM;;;aAFR,EAGE,MAHF,EAGE"}
+{"version":3,"file":"dropdown-separator.js","names":[],"sources":["../../../components/Dropdown/DropdownSeparator.vue"],"sourcesContent":["<template>\n  <li\n    aria-hidden=\"true\"\n    class=\"d-list-item-separator\"\n  />\n</template>\n\n<script>\nexport default {\n  name: 'DtDropdownSeparator',\n};\n</script>\n"],"mappings":";;;AAQA,IAAK,IAAU,EACb,MAAM,uBACP;CARG,eAAY;CACZ,OAAM;;;aAFR,EAGE,MAHF,EAGE"}

package/dist/lib/dropdown/dropdown-story-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-story-constants.cjs","names":[],"sources":["../../../components/dropdown/dropdown_story_constants.js"],"sourcesContent":["export const DROPDOWN_STORY_ITEMS = [\n  { name: 'Menu item 1', id: 1 },\n  { name: 'Menu item 2', id: 2 },\n  { name: 'Another menu item 1', id: 3 },\n  { name: 'Menu item 3', id: 4 },\n  { name: 'Another menu item 2', id: 5 },\n];\n"],"mappings":"mEAAA,IAAa,EAAuB,CAClC,CAAE,KAAM,cAAe,GAAI,EAAG,CAC9B,CAAE,KAAM,cAAe,GAAI,EAAG,CAC9B,CAAE,KAAM,sBAAuB,GAAI,EAAG,CACtC,CAAE,KAAM,cAAe,GAAI,EAAG,CAC9B,CAAE,KAAM,sBAAuB,GAAI,EAAG,CACvC"}
+{"version":3,"file":"dropdown-story-constants.cjs","names":[],"sources":["../../../components/Dropdown/DropdownStoryConstants.js"],"sourcesContent":["export const DROPDOWN_STORY_ITEMS = [\n  { name: 'Menu item 1', id: 1 },\n  { name: 'Menu item 2', id: 2 },\n  { name: 'Another menu item 1', id: 3 },\n  { name: 'Menu item 3', id: 4 },\n  { name: 'Another menu item 2', id: 5 },\n];\n"],"mappings":"mEAAA,IAAa,EAAuB,CAClC,CAAE,KAAM,cAAe,GAAI,EAAG,CAC9B,CAAE,KAAM,cAAe,GAAI,EAAG,CAC9B,CAAE,KAAM,sBAAuB,GAAI,EAAG,CACtC,CAAE,KAAM,cAAe,GAAI,EAAG,CAC9B,CAAE,KAAM,sBAAuB,GAAI,EAAG,CACvC"}

package/dist/lib/dropdown/dropdown-story-constants.js

@@ -1,4 +1,4 @@
-//#region components/dropdown/dropdown_story_constants.js
+//#region components/Dropdown/DropdownStoryConstants.js
 var e = [
 	{
 		name: "Menu item 1",

package/dist/lib/dropdown/dropdown-story-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-story-constants.js","names":[],"sources":["../../../components/dropdown/dropdown_story_constants.js"],"sourcesContent":["export const DROPDOWN_STORY_ITEMS = [\n  { name: 'Menu item 1', id: 1 },\n  { name: 'Menu item 2', id: 2 },\n  { name: 'Another menu item 1', id: 3 },\n  { name: 'Menu item 3', id: 4 },\n  { name: 'Another menu item 2', id: 5 },\n];\n"],"mappings":";AAAA,IAAa,IAAuB;CAClC;EAAE,MAAM;EAAe,IAAI;EAAG;CAC9B;EAAE,MAAM;EAAe,IAAI;EAAG;CAC9B;EAAE,MAAM;EAAuB,IAAI;EAAG;CACtC;EAAE,MAAM;EAAe,IAAI;EAAG;CAC9B;EAAE,MAAM;EAAuB,IAAI;EAAG;CACvC"}
+{"version":3,"file":"dropdown-story-constants.js","names":[],"sources":["../../../components/Dropdown/DropdownStoryConstants.js"],"sourcesContent":["export const DROPDOWN_STORY_ITEMS = [\n  { name: 'Menu item 1', id: 1 },\n  { name: 'Menu item 2', id: 2 },\n  { name: 'Another menu item 1', id: 3 },\n  { name: 'Menu item 3', id: 4 },\n  { name: 'Another menu item 2', id: 5 },\n];\n"],"mappings":";AAAA,IAAa,IAAuB;CAClC;EAAE,MAAM;EAAe,IAAI;EAAG;CAC9B;EAAE,MAAM;EAAe,IAAI;EAAG;CAC9B;EAAE,MAAM;EAAuB,IAAI;EAAG;CACtC;EAAE,MAAM;EAAe,IAAI;EAAG;CAC9B;EAAE,MAAM;EAAuB,IAAI;EAAG;CACvC"}

package/dist/lib/dropdown/dropdown.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../../common/mixins/keyboard-list-navigation.cjs`),i=require(`../list-item/list-item-constants.cjs`),a=require(`../popover/popover-constants.cjs`),o=require(`../popover/popover.cjs`),s=require(`./dropdown-constants.cjs`);let c=require(`vue`);var l={compatConfig:{MODE:3},name:`DtDropdown`,components:{DtPopover:o.default},mixins:[r.default({indexKey:`highlightIndex`,idKey:`highlightId`,listElementKey:`getListElement`,listItemRole:`menuitem`,afterHighlightMethod:`afterHighlight`,beginningOfListMethod:`beginningOfListMethod`,endOfListMethod:`endOfListMethod`,activeItemKey:`activeItemEl`,focusOnKeyboardNavigation:!0})],inheritAttrs:!1,props:{open:{type:Boolean,default:null},openOnContext:{type:Boolean,default:!1},padding:{type:String,default:`small`,validator:e=>Object.keys(s.DROPDOWN_PADDING_CLASSES).some(t=>t===e)},modal:{type:Boolean,default:!0},contentWidth:{type:String,default:null},maxHeight:{type:String,default:``},maxWidth:{type:String,default:``},listId:{type:String,default(){return t.getUniqueString()}},navigationType:{type:String,default:i.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS,validator:e=>Object.values(i.LIST_ITEM_NAVIGATION_TYPES).includes(e)},fallbackPlacements:{type:Array,default:()=>[`auto`]},placement:{type:String,default:`bottom`},onBeginningOfList:{type:Function,default:null},onEndOfList:{type:Function,default:null},listClass:{type:[String,Array,Object],default:``},appendTo:{type:[e.HTML_ELEMENT_TYPE,String],default:`body`,validator:e=>a.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},tether:{type:Boolean,default:!0},transition:{type:String,default:`fade`}},emits:[`keydown`,`highlight`,`update:open`,`opened`],data(){return{LIST_ITEM_NAVIGATION_TYPES:i.LIST_ITEM_NAVIGATION_TYPES,DROPDOWN_PADDING_CLASSES:s.DROPDOWN_PADDING_CLASSES,EVENT_KEYNAMES:e.EVENT_KEYNAMES,openedWithKeyboard:!1,isOpen:null}},computed:{dropdownListeners(){return{"update:open":e=>{this.$emit(`update:open`,e)},opened:e=>{this.updateInitialHighlightIndex(e)},keydown:t=>{switch(t.code){case e.EVENT_KEYNAMES.up:case e.EVENT_KEYNAMES.arrowup:this.onUpKeyPress(t),t.stopPropagation(),t.preventDefault();break;case e.EVENT_KEYNAMES.down:case e.EVENT_KEYNAMES.arrowdown:this.onDownKeyPress(t),t.stopPropagation(),t.preventDefault();break;case e.EVENT_KEYNAMES.space:case e.EVENT_KEYNAMES.spacebar:this.onSpaceKey();break;case e.EVENT_KEYNAMES.enter:this.onEnterKey();break;case e.EVENT_KEYNAMES.home:this.onHomeKeyPress(t),t.stopPropagation(),t.preventDefault();break;case e.EVENT_KEYNAMES.end:this.onEndKeyPress(t),t.stopPropagation(),t.preventDefault();break;default:this.onKeyPress(t);break}this.$emit(`keydown`,t)}}},beginningOfListMethod(){return this.onBeginningOfList||this.jumpToEnd},endOfListMethod(){return this.onEndOfList||this.jumpToBeginning},activeItemEl(){return this.getListElement().querySelector(`#`+this.highlightId)},isArrowKeyNav(){return this.navigationType===this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS},listClasses(){return[`d-dropdown-list`,s.DROPDOWN_PADDING_CLASSES[this.padding],this.listClass,{"d-context-menu-list":this.openOnContext}]},shouldOpenWithArrowKeys(){return!this.openOnContext}},methods:{onMouseHighlight(e){let t=e.target.closest(`li`);t&&t.role&&this.highlightId!==t.id&&(this.setHighlightId(t.id),t.focus())},getListElement(){return this.$refs.listWrapper},clearHighlightIndex(){this.setHighlightIndex(-1)},afterHighlight(){this.highlightIndex!==this._itemsLength()-1&&this.$emit(`highlight`,this.highlightIndex)},updateInitialHighlightIndex(e){this.isOpen=e,e?(this.openedWithKeyboard&&this.isArrowKeyNav&&this.setHighlightIndex(0),this.$emit(`opened`,!0)):(this.clearHighlightIndex(),this.openedWithKeyboard=!1,this.$emit(`opened`,!1))},onSpaceKey(){this.open||(this.openedWithKeyboard=!0)},onEnterKey(){this.open||(this.openedWithKeyboard=!0)},onUpKeyPress(){if(!this.isOpen){this.openedWithKeyboard=!0;return}if(this.isArrowKeyNav)return this.onUpKey()},onDownKeyPress(){if(!this.isOpen){this.openedWithKeyboard=!0;return}if(this.isArrowKeyNav)return this.onDownKey()},onHomeKeyPress(){if(!(!this.isOpen||!this.isArrowKeyNav))return this.onHomeKey()},onEndKeyPress(){if(!(!this.isOpen||!this.isArrowKeyNav))return this.onEndKey()},onKeyPress(e){if(!(!this.isOpen||!this.isArrowKeyNav||!this.isValidLetter(e.key)))return e.stopPropagation(),e.preventDefault(),this.onNavigationKey(e.key)}}},u=[`id`];function d(e,t,n,r,i,a){let o=(0,c.resolveComponent)(`dt-popover`);return(0,c.openBlock)(),(0,c.createBlock)(o,(0,c.mergeProps)({ref:`popover`,"content-width":n.contentWidth,open:n.open,placement:n.placement,"initial-focus-element":i.openedWithKeyboard?`first`:`dialog`,"fallback-placements":n.fallbackPlacements,padding:`none`,role:`menu`,"append-to":n.appendTo,modal:n.modal,"max-height":n.maxHeight,"max-width":n.maxWidth,"open-with-arrow-keys":a.shouldOpenWithArrowKeys,"open-on-context":n.openOnContext},e.$attrs,{tether:n.tether,transition:n.transition},(0,c.toHandlers)(a.dropdownListeners)),{anchor:(0,c.withCtx)(({attrs:t})=>[(0,c.renderSlot)(e.$slots,`anchor`,(0,c.mergeProps)({ref:`anchor`},t))]),content:(0,c.withCtx)(({close:r})=>[(0,c.createElementVNode)(`ul`,{id:n.listId,ref:`listWrapper`,class:(0,c.normalizeClass)(a.listClasses),"data-qa":`dt-dropdown-list-wrapper`,onMouseleave:t[0]||(t[0]=(...e)=>a.clearHighlightIndex&&a.clearHighlightIndex(...e)),onMousemoveCapture:t[1]||(t[1]=(...e)=>a.onMouseHighlight&&a.onMouseHighlight(...e))},[(0,c.renderSlot)(e.$slots,`list`,{close:r})],42,u)]),footerContent:(0,c.withCtx)(({close:t})=>[(0,c.renderSlot)(e.$slots,`footer`,{close:t})]),_:3},16,[`content-width`,`open`,`placement`,`initial-focus-element`,`fallback-placements`,`append-to`,`modal`,`max-height`,`max-width`,`open-with-arrow-keys`,`open-on-context`,`tether`,`transition`])}var f=n.t(l,[[`render`,d]]);exports.default=f;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../../common/mixins/keyboard-list-navigation.cjs`),i=require(`../../mode_constants-CzYJW9ua.cjs`),a=require(`../list-item/list-item-constants.cjs`),o=require(`../popover/popover-constants.cjs`),s=require(`../popover/popover.cjs`),c=require(`./dropdown-constants.cjs`);let l=require(`vue`);var u={name:`DtDropdown`,components:{DtPopover:s.default},mixins:[r.default({indexKey:`highlightIndex`,idKey:`highlightId`,listElementKey:`getListElement`,listItemRole:`menuitem`,afterHighlightMethod:`afterHighlight`,beginningOfListMethod:`beginningOfListMethod`,endOfListMethod:`endOfListMethod`,activeItemKey:`activeItemEl`,focusOnKeyboardNavigation:!0})],inheritAttrs:!1,props:{contentMode:i.t,open:{type:[Boolean,null],default:null},openOnContext:{type:Boolean,default:!1},padding:{type:String,default:`small`,validator:e=>Object.keys(c.DROPDOWN_PADDING_CLASSES).some(t=>t===e)},modal:{type:Boolean,default:!0},contentWidth:{type:String,default:null},maxHeight:{type:String,default:``},maxWidth:{type:String,default:``},listId:{type:String,default(){return t.getUniqueString()}},navigationType:{type:String,default:a.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS,validator:e=>Object.values(a.LIST_ITEM_NAVIGATION_TYPES).includes(e)},fallbackPlacements:{type:Array,default:()=>[`auto`]},placement:{type:String,default:`bottom`},onBeginningOfList:{type:Function,default:null},onEndOfList:{type:Function,default:null},listClass:{type:[String,Array,Object],default:``},footerClass:{type:[String,Array,Object],default:``},appendTo:{type:[e.HTML_ELEMENT_TYPE,String],default:`body`,validator:e=>o.POPOVER_APPEND_TO_VALUES.includes(e)||e instanceof HTMLElement},tether:{type:Boolean,default:!0},transition:{type:String,default:`fade`}},emits:[`keydown`,`highlight`,`update:open`,`opened`],data(){return{LIST_ITEM_NAVIGATION_TYPES:a.LIST_ITEM_NAVIGATION_TYPES,DROPDOWN_PADDING_CLASSES:c.DROPDOWN_PADDING_CLASSES,EVENT_KEYNAMES:e.EVENT_KEYNAMES,openedWithKeyboard:!1,isOpen:null}},computed:{dropdownListeners(){return{"update:open":e=>{this.$emit(`update:open`,e)},opened:e=>{this.updateInitialHighlightIndex(e)},keydown:t=>{switch(t.code){case e.EVENT_KEYNAMES.up:case e.EVENT_KEYNAMES.arrowup:this.onUpKeyPress(t),t.stopPropagation(),t.preventDefault();break;case e.EVENT_KEYNAMES.down:case e.EVENT_KEYNAMES.arrowdown:this.onDownKeyPress(t),t.stopPropagation(),t.preventDefault();break;case e.EVENT_KEYNAMES.space:case e.EVENT_KEYNAMES.spacebar:this.onSpaceKey();break;case e.EVENT_KEYNAMES.enter:this.onEnterKey();break;case e.EVENT_KEYNAMES.home:this.onHomeKeyPress(t),t.stopPropagation(),t.preventDefault();break;case e.EVENT_KEYNAMES.end:this.onEndKeyPress(t),t.stopPropagation(),t.preventDefault();break;default:this.onKeyPress(t);break}this.$emit(`keydown`,t)}}},beginningOfListMethod(){return this.onBeginningOfList||this.jumpToEnd},endOfListMethod(){return this.onEndOfList||this.jumpToBeginning},activeItemEl(){return this.getListElement().querySelector(`#`+this.highlightId)},isArrowKeyNav(){return this.navigationType===this.LIST_ITEM_NAVIGATION_TYPES.ARROW_KEYS},listClasses(){return[`d-dropdown-list`,c.DROPDOWN_PADDING_CLASSES[this.padding],this.listClass,{"d-context-menu-list":this.openOnContext}]},shouldOpenWithArrowKeys(){return!this.openOnContext}},methods:{onMouseHighlight(e){let t=e.target.closest(`li`);t&&t.role&&this.highlightId!==t.id&&(this.setHighlightId(t.id),t.focus())},getListElement(){return this.$refs.listWrapper},clearHighlightIndex(){this.setHighlightIndex(-1)},afterHighlight(){this.highlightIndex!==this._itemsLength()-1&&this.$emit(`highlight`,this.highlightIndex)},updateInitialHighlightIndex(e){this.isOpen=e,e?(this.openedWithKeyboard&&this.isArrowKeyNav&&this.setHighlightIndex(0),this.$emit(`opened`,!0)):(this.clearHighlightIndex(),this.openedWithKeyboard=!1,this.$emit(`opened`,!1))},onSpaceKey(){this.open||(this.openedWithKeyboard=!0)},onEnterKey(){this.open||(this.openedWithKeyboard=!0)},onUpKeyPress(){if(!this.isOpen){this.openedWithKeyboard=!0;return}if(this.isArrowKeyNav)return this.onUpKey()},onDownKeyPress(){if(!this.isOpen){this.openedWithKeyboard=!0;return}if(this.isArrowKeyNav)return this.onDownKey()},onHomeKeyPress(){if(!(!this.isOpen||!this.isArrowKeyNav))return this.onHomeKey()},onEndKeyPress(){if(!(!this.isOpen||!this.isArrowKeyNav))return this.onEndKey()},onKeyPress(e){if(!(!this.isOpen||!this.isArrowKeyNav||!this.isValidLetter(e.key)))return e.stopPropagation(),e.preventDefault(),this.onNavigationKey(e.key)}}},d=[`id`];function f(e,t,n,r,i,a){let o=(0,l.resolveComponent)(`dt-popover`);return(0,l.openBlock)(),(0,l.createBlock)(o,(0,l.mergeProps)({ref:`popover`,"content-width":n.contentWidth,"content-mode":n.contentMode,open:n.open,placement:n.placement,"initial-focus-element":i.openedWithKeyboard?`first`:`dialog`,"fallback-placements":n.fallbackPlacements,padding:`none`,role:`menu`,"append-to":n.appendTo,modal:n.modal,"max-height":n.maxHeight,"max-width":n.maxWidth,"open-with-arrow-keys":a.shouldOpenWithArrowKeys,"open-on-context":n.openOnContext},e.$attrs,{tether:n.tether,transition:n.transition,"footer-class":n.footerClass},(0,l.toHandlers)(a.dropdownListeners)),{anchor:(0,l.withCtx)(({attrs:t})=>[(0,l.renderSlot)(e.$slots,`anchor`,(0,l.mergeProps)({ref:`anchor`},t))]),content:(0,l.withCtx)(({close:r})=>[(0,l.createElementVNode)(`ul`,{id:n.listId,ref:`listWrapper`,class:(0,l.normalizeClass)(a.listClasses),"data-qa":`dt-dropdown-list-wrapper`,onMouseleave:t[0]||(t[0]=(...e)=>a.clearHighlightIndex&&a.clearHighlightIndex(...e)),onMousemoveCapture:t[1]||(t[1]=(...e)=>a.onMouseHighlight&&a.onMouseHighlight(...e))},[(0,l.renderSlot)(e.$slots,`list`,{close:r})],42,d)]),footerContent:(0,l.withCtx)(({close:t})=>[(0,l.renderSlot)(e.$slots,`footer`,{close:t})]),_:3},16,[`content-width`,`content-mode`,`open`,`placement`,`initial-focus-element`,`fallback-placements`,`append-to`,`modal`,`max-height`,`max-width`,`open-with-arrow-keys`,`open-on-context`,`tether`,`transition`,`footer-class`])}var p=n.t(u,[[`render`,f]]);exports.default=p;
 //# sourceMappingURL=dropdown.cjs.map

package/dist/lib/dropdown/dropdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.cjs","names":[],"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    v-bind=\"$attrs\"\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      </ul>\n    </template>\n    <template #footerContent=\"{ close }\">\n      <!-- @slot Slot for the footer content -->\n      <slot\n        name=\"footer\"\n        :close=\"close\"\n      />\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, HTML_ELEMENT_TYPE } from '@/common/constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtDropdown',\n\n  components: {\n    DtPopover,\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  ],\n\n  inheritAttrs: false,\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 v-model\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: [HTML_ELEMENT_TYPE, 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     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Event fired when the highlight changes\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\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     * Event fired when dropdown is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\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\n        'update:open': value => {\n          this.$emit('update:open', value);\n        },\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.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"],"mappings":"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"}
+{"version":3,"file":"dropdown.cjs","names":[],"sources":["../../../components/Dropdown/Dropdown.vue"],"sourcesContent":["<!-- eslint-disable max-lines -->\n<template>\n  <dt-popover\n    ref=\"popover\"\n    :content-width=\"contentWidth\"\n    :content-mode=\"contentMode\"\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    v-bind=\"$attrs\"\n    :tether=\"tether\"\n    :transition=\"transition\"\n    :footer-class=\"footerClass\"\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      </ul>\n    </template>\n    <template #footerContent=\"{ close }\">\n      <!-- @slot Slot for the footer content -->\n      <slot\n        name=\"footer\"\n        :close=\"close\"\n      />\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/ListItem';\nimport { DROPDOWN_PADDING_CLASSES } from './DropdownConstants';\nimport { getUniqueString } from '@/common/utils';\nimport { EVENT_KEYNAMES, HTML_ELEMENT_TYPE } from '@/common/constants';\nimport { CONTENT_MODE_PROP } from '@/common/mode_constants';\n\nexport default {\n  name: 'DtDropdown',\n\n  components: {\n    DtPopover,\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  ],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Applies a color mode to the positioned content element.\n     * @values light, dark, invert\n     */\n    contentMode: CONTENT_MODE_PROP,\n\n    /**\n     * Controls whether the dropdown is shown. When null (default), the dropdown\n     * toggles on click. When set to true or false, the default trigger is\n     * disabled and the parent controls visibility via v-model:open.\n     * @values null, true, false\n     */\n    open: {\n      type: [Boolean, null],\n      default: null,\n    },\n\n    /**\n     * 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     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\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     * Additional class for the footer wrapper element.\n     */\n    footerClass: {\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: [HTML_ELEMENT_TYPE, 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     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Event fired when the highlight changes\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\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     * Event fired when dropdown is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\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\n        'update:open': value => {\n          this.$emit('update:open', value);\n        },\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.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"],"mappings":"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"}

package/dist/lib/dropdown/dropdown.js

@@ -2,16 +2,16 @@ import { EVENT_KEYNAMES as e, HTML_ELEMENT_TYPE as t } from "../../common/consta
 import { getUniqueString as n } from "../../common/utils/index.js";
 import { t as r } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
 import i from "../../common/mixins/keyboard-list-navigation.js";
-import { LIST_ITEM_NAVIGATION_TYPES as a } from "../list-item/list-item-constants.js";
-import { POPOVER_APPEND_TO_VALUES as o } from "../popover/popover-constants.js";
-import s from "../popover/popover.js";
-import { DROPDOWN_PADDING_CLASSES as c } from "./dropdown-constants.js";
-import { createBlock as l, createElementVNode as u, mergeProps as d, normalizeClass as f, openBlock as p, renderSlot as m, resolveComponent as h, toHandlers as g, withCtx as _ } from "vue";
-//#region components/dropdown/dropdown.vue
-var v = {
-	compatConfig: { MODE: 3 },
+import { t as a } from "../../mode_constants-tb7TL85q.js";
+import { LIST_ITEM_NAVIGATION_TYPES as o } from "../list-item/list-item-constants.js";
+import { POPOVER_APPEND_TO_VALUES as s } from "../popover/popover-constants.js";
+import c from "../popover/popover.js";
+import { DROPDOWN_PADDING_CLASSES as l } from "./dropdown-constants.js";
+import { createBlock as u, createElementVNode as d, mergeProps as f, normalizeClass as p, openBlock as m, renderSlot as h, resolveComponent as g, toHandlers as _, withCtx as v } from "vue";
+//#region components/Dropdown/Dropdown.vue
+var y = {
 	name: "DtDropdown",
-	components: { DtPopover: s },
+	components: { DtPopover: c },
 	mixins: [i({
 		indexKey: "highlightIndex",
 		idKey: "highlightId",
@@ -25,8 +25,9 @@ var v = {
 	})],
 	inheritAttrs: !1,
 	props: {
+		contentMode: a,
 		open: {
-			type: Boolean,
+			type: [Boolean, null],
 			default: null
 		},
 		openOnContext: {
@@ -36,7 +37,7 @@ var v = {
 		padding: {
 			type: String,
 			default: "small",
-			validator: (e) => Object.keys(c).some((t) => t === e)
+			validator: (e) => Object.keys(l).some((t) => t === e)
 		},
 		modal: {
 			type: Boolean,
@@ -62,8 +63,8 @@ var v = {
 		},
 		navigationType: {
 			type: String,
-			default: a.ARROW_KEYS,
-			validator: (e) => Object.values(a).includes(e)
+			default: o.ARROW_KEYS,
+			validator: (e) => Object.values(o).includes(e)
 		},
 		fallbackPlacements: {
 			type: Array,
@@ -89,10 +90,18 @@ var v = {
 			],
 			default: ""
 		},
+		footerClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: ""
+		},
 		appendTo: {
 			type: [t, String],
 			default: "body",
-			validator: (e) => o.includes(e) || e instanceof HTMLElement
+			validator: (e) => s.includes(e) || e instanceof HTMLElement
 		},
 		tether: {
 			type: Boolean,
@@ -111,8 +120,8 @@ var v = {
 	],
 	data() {
 		return {
-			LIST_ITEM_NAVIGATION_TYPES: a,
-			DROPDOWN_PADDING_CLASSES: c,
+			LIST_ITEM_NAVIGATION_TYPES: o,
+			DROPDOWN_PADDING_CLASSES: l,
 			EVENT_KEYNAMES: e,
 			openedWithKeyboard: !1,
 			isOpen: null
@@ -173,7 +182,7 @@ var v = {
 		listClasses() {
 			return [
 				"d-dropdown-list",
-				c[this.padding],
+				l[this.padding],
 				this.listClass,
 				{ "d-context-menu-list": this.openOnContext }
 			];
@@ -229,12 +238,13 @@ var v = {
 			if (!(!this.isOpen || !this.isArrowKeyNav || !this.isValidLetter(e.key))) return e.stopPropagation(), e.preventDefault(), this.onNavigationKey(e.key);
 		}
 	}
-}, y = ["id"];
-function b(e, t, n, r, i, a) {
-	let o = h("dt-popover");
-	return p(), l(o, d({
+}, b = ["id"];
+function x(e, t, n, r, i, a) {
+	let o = g("dt-popover");
+	return m(), u(o, f({
 		ref: "popover",
 		"content-width": n.contentWidth,
+		"content-mode": n.contentMode,
 		open: n.open,
 		placement: n.placement,
 		"initial-focus-element": i.openedWithKeyboard ? "first" : "dialog",
@@ -249,21 +259,23 @@ function b(e, t, n, r, i, a) {
 		"open-on-context": n.openOnContext
 	}, e.$attrs, {
 		tether: n.tether,
-		transition: n.transition
-	}, g(a.dropdownListeners)), {
-		anchor: _(({ attrs: t }) => [m(e.$slots, "anchor", d({ ref: "anchor" }, t))]),
-		content: _(({ close: r }) => [u("ul", {
+		transition: n.transition,
+		"footer-class": n.footerClass
+	}, _(a.dropdownListeners)), {
+		anchor: v(({ attrs: t }) => [h(e.$slots, "anchor", f({ ref: "anchor" }, t))]),
+		content: v(({ close: r }) => [d("ul", {
 			id: n.listId,
 			ref: "listWrapper",
-			class: f(a.listClasses),
+			class: p(a.listClasses),
 			"data-qa": "dt-dropdown-list-wrapper",
 			onMouseleave: t[0] || (t[0] = (...e) => a.clearHighlightIndex && a.clearHighlightIndex(...e)),
 			onMousemoveCapture: t[1] || (t[1] = (...e) => a.onMouseHighlight && a.onMouseHighlight(...e))
-		}, [m(e.$slots, "list", { close: r })], 42, y)]),
-		footerContent: _(({ close: t }) => [m(e.$slots, "footer", { close: t })]),
+		}, [h(e.$slots, "list", { close: r })], 42, b)]),
+		footerContent: v(({ close: t }) => [h(e.$slots, "footer", { close: t })]),
 		_: 3
 	}, 16, [
 		"content-width",
+		"content-mode",
 		"open",
 		"placement",
 		"initial-focus-element",
@@ -275,11 +287,12 @@ function b(e, t, n, r, i, a) {
 		"open-with-arrow-keys",
 		"open-on-context",
 		"tether",
-		"transition"
+		"transition",
+		"footer-class"
 	]);
 }
-var x = /* @__PURE__ */ r(v, [["render", b]]);
+var S = /* @__PURE__ */ r(y, [["render", x]]);
 //#endregion
-export { x as default };
+export { S as default };
 
 //# sourceMappingURL=dropdown.js.map

package/dist/lib/dropdown/dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown.js","names":[],"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    v-bind=\"$attrs\"\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      </ul>\n    </template>\n    <template #footerContent=\"{ close }\">\n      <!-- @slot Slot for the footer content -->\n      <slot\n        name=\"footer\"\n        :close=\"close\"\n      />\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, HTML_ELEMENT_TYPE } from '@/common/constants';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtDropdown',\n\n  components: {\n    DtPopover,\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  ],\n\n  inheritAttrs: false,\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 v-model\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: [HTML_ELEMENT_TYPE, 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     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Event fired when the highlight changes\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\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     * Event fired when dropdown is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\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\n        'update:open': value => {\n          this.$emit('update:open', value);\n        },\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.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"],"mappings":"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"}
+{"version":3,"file":"dropdown.js","names":[],"sources":["../../../components/Dropdown/Dropdown.vue"],"sourcesContent":["<!-- eslint-disable max-lines -->\n<template>\n  <dt-popover\n    ref=\"popover\"\n    :content-width=\"contentWidth\"\n    :content-mode=\"contentMode\"\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    v-bind=\"$attrs\"\n    :tether=\"tether\"\n    :transition=\"transition\"\n    :footer-class=\"footerClass\"\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      </ul>\n    </template>\n    <template #footerContent=\"{ close }\">\n      <!-- @slot Slot for the footer content -->\n      <slot\n        name=\"footer\"\n        :close=\"close\"\n      />\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/ListItem';\nimport { DROPDOWN_PADDING_CLASSES } from './DropdownConstants';\nimport { getUniqueString } from '@/common/utils';\nimport { EVENT_KEYNAMES, HTML_ELEMENT_TYPE } from '@/common/constants';\nimport { CONTENT_MODE_PROP } from '@/common/mode_constants';\n\nexport default {\n  name: 'DtDropdown',\n\n  components: {\n    DtPopover,\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  ],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Applies a color mode to the positioned content element.\n     * @values light, dark, invert\n     */\n    contentMode: CONTENT_MODE_PROP,\n\n    /**\n     * Controls whether the dropdown is shown. When null (default), the dropdown\n     * toggles on click. When set to true or false, the default trigger is\n     * disabled and the parent controls visibility via v-model:open.\n     * @values null, true, false\n     */\n    open: {\n      type: [Boolean, null],\n      default: null,\n    },\n\n    /**\n     * 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     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\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     * Additional class for the footer wrapper element.\n     */\n    footerClass: {\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: [HTML_ELEMENT_TYPE, 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     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Event fired when the highlight changes\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\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     * Event fired when dropdown is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\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\n        'update:open': value => {\n          this.$emit('update:open', value);\n        },\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.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"],"mappings":"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"}

package/dist/lib/emoji/emoji.cjs

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../../common/emoji/index.cjs`),n=require(`../icon/icon-constants.cjs`),r=require(`../skeleton/skeleton.cjs`);let i=require(`vue`);var a={compatConfig:{MODE:3},name:`DtEmoji`,components:{DtSkeleton:r.default},props:{code:{type:String,required:!0},size:{type:String,default:`500`,validator:e=>Object.keys(n.ICON_SIZE_MODIFIERS).includes(e)},imgClass:{type:[String,Object,Array],default:``},ariaLabel:{type:String,default:null},showSkeleton:{type:Boolean,default:!0}},data(){return{emojiData:null,imgLoading:!1}},computed:{emojiDataValid(){return!!this.emojiData},emojiSrc(){return this.emojiDataValid?this.emojiData?.custom?this.emojiData.image:[`100`,`200`].includes(this.size)?t.emojiImageUrlSmall+this.emojiData.key+t.emojiFileExtensionSmall:t.emojiImageUrlLarge+this.emojiData.key+t.emojiFileExtensionLarge:`invalid`},emojiAlt(){if(this.emojiDataValid)return this.emojiData.unicode_output?t.stringToUnicode(this.emojiData.unicode_output):this.emojiData.name},emojiLabel(){return this.emojiDataValid?this.ariaLabel?this.ariaLabel:this.emojiData.name:`Invalid Emoji`},emojiSize(){return n.ICON_SIZE_MODIFIERS[this.size]}},watch:{code:{handler:function(){this.getEmojiData()},immediate:!0},emojiSrc:{handler:async function(){this.imgLoading=!0},immediate:!0}},methods:{getEmojiData(){this.emojiData=t.codeToEmojiData(this.code)},imageLoaded(){this.imgLoading=!1},imageErrored(){this.imgLoading=!1}}},o=[`aria-label`,`alt`,`title`,`src`];function s(e,t,n,r,a,s){let c=(0,i.resolveComponent)(`dt-skeleton`);return(0,i.openBlock)(),(0,i.createElementBlock)(`span`,{class:(0,i.normalizeClass)([`d-emoji d-icon`,s.emojiSize])},[(0,i.withDirectives)((0,i.createVNode)(c,{offset:0,class:(0,i.normalizeClass)([`d-icon`,s.emojiSize]),"shape-option":{shape:`circle`,size:`100%`}},null,8,[`class`]),[[i.vShow,a.imgLoading&&n.showSkeleton]]),(0,i.withDirectives)((0,i.createElementVNode)(`img`,{ref:`emojiImg`,class:(0,i.normalizeClass)([`d-icon`,s.emojiSize,n.imgClass]),"aria-label":s.emojiLabel,alt:s.emojiAlt,title:s.emojiLabel,src:s.emojiSrc,onLoad:t[0]||(t[0]=(...e)=>s.imageLoaded&&s.imageLoaded(...e)),onError:t[1]||(t[1]=(...e)=>s.imageErrored&&s.imageErrored(...e))},null,42,o),[[i.vShow,!a.imgLoading]])],2)}var c=e.t(a,[[`render`,s]]);exports.default=c;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../common/emoji/index.cjs`),r=require(`../icon/icon-constants.cjs`),i=require(`../skeleton/skeleton.cjs`);let a=require(`vue`);var o={name:`DtEmoji`,components:{DtSkeleton:i.default},props:{code:{type:String,required:!0},size:{type:[String,Number],default:500,validator:e.ordinalSizeValidator(r.ICON_SIZE_MODIFIERS)},imgClass:{type:[String,Object,Array],default:``},ariaLabel:{type:String,default:null},showSkeleton:{type:Boolean,default:!0}},data(){return{emojiData:null,imgLoading:!1}},computed:{emojiDataValid(){return!!this.emojiData},emojiSrc(){return this.emojiDataValid?this.emojiData?.custom?this.emojiData.image:[`100`,`200`].includes(String(this.size))?n.emojiImageUrlSmall+this.emojiData.key+n.emojiFileExtensionSmall:n.emojiImageUrlLarge+this.emojiData.key+n.emojiFileExtensionLarge:`invalid`},emojiAlt(){if(this.emojiDataValid)return this.emojiData.unicode_output?n.stringToUnicode(this.emojiData.unicode_output):this.emojiData.name},emojiLabel(){return this.emojiDataValid?this.ariaLabel?this.ariaLabel:this.emojiData.name:`Invalid Emoji`},emojiSize(){return r.ICON_SIZE_MODIFIERS[this.size]}},watch:{code:{handler:function(){this.getEmojiData()},immediate:!0},emojiSrc:{handler:async function(){this.imgLoading=!0},immediate:!0}},methods:{getEmojiData(){this.emojiData=n.codeToEmojiData(this.code)},imageLoaded(){this.imgLoading=!1},imageErrored(){this.imgLoading=!1}}},s=[`aria-label`,`alt`,`title`,`src`];function c(e,t,n,r,i,o){let c=(0,a.resolveComponent)(`dt-skeleton`);return(0,a.openBlock)(),(0,a.createElementBlock)(`span`,{class:(0,a.normalizeClass)([`d-emoji d-icon`,o.emojiSize])},[(0,a.withDirectives)((0,a.createVNode)(c,{offset:0,class:(0,a.normalizeClass)([`d-icon`,o.emojiSize]),"shape-option":{shape:`circle`,size:`100%`}},null,8,[`class`]),[[a.vShow,i.imgLoading&&n.showSkeleton]]),(0,a.withDirectives)((0,a.createElementVNode)(`img`,{ref:`emojiImg`,class:(0,a.normalizeClass)([`d-icon`,o.emojiSize,n.imgClass]),"aria-label":o.emojiLabel,alt:o.emojiAlt,title:o.emojiLabel,src:o.emojiSrc,onLoad:t[0]||(t[0]=(...e)=>o.imageLoaded&&o.imageLoaded(...e)),onError:t[1]||(t[1]=(...e)=>o.imageErrored&&o.imageErrored(...e))},null,42,s),[[a.vShow,!i.imgLoading]])],2)}var l=t.t(o,[[`render`,c]]);exports.default=l;
 //# sourceMappingURL=emoji.cjs.map

package/dist/lib/emoji/emoji.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"emoji.cjs","names":[],"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} 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  compatConfig: { MODE: 3 },\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 this.emojiData.image;\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"],"mappings":"gVAsCA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,UAEN,WAAY,CACV,WAAA,EAAA,QACD,CAED,MAAO,CAML,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CAOD,KAAM,CACJ,KAAM,OACN,QAAS,MACT,UAAY,GAAM,OAAO,KAAK,EAAA,oBAAoB,CAAC,SAAS,EAAE,CAC/D,CAOD,SAAU,CACR,KAAM,CAAC,OAAQ,OAAQ,MAAM,CAC7B,QAAS,GACV,CAQD,UAAW,CACT,KAAM,OACN,QAAS,KACV,CAMD,aAAc,CACZ,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,UAAW,KACX,WAAY,GACb,EAGH,SAAU,CACR,gBAAkB,CAChB,MAAO,CAAC,CAAC,KAAK,WAGhB,UAAY,CAWR,OAVG,KAAK,eAGN,KAAK,WAAW,OACX,KAAK,UAAU,MAGpB,CAAC,MAAO,MAAM,CAAC,SAAS,KAAK,KAAK,CAC7B,EAAA,mBAAqB,KAAK,UAAU,IAAM,EAAA,wBAE1C,EAAA,mBAAqB,KAAK,UAAU,IAAM,EAAA,wBAVhB,WAcrC,UAAY,CACL,QAAK,eACV,OAAO,KAAK,UAAU,eAAiB,EAAA,gBAAgB,KAAK,UAAU,eAAc,CAAI,KAAK,UAAU,MAGzG,YAAc,CAEZ,OADK,KAAK,eACH,KAAK,UAAY,KAAK,UAAY,KAAK,UAAU,KADrB,iBAIrC,WAAa,CACX,OAAO,EAAA,oBAAoB,KAAK,OAEnC,CAED,MAAO,CACL,KAAM,CACJ,QAAS,UAAY,CACnB,KAAK,cAAc,EAGrB,UAAW,GACZ,CAED,SAAU,CACR,QAAS,gBAAkB,CACzB,KAAK,WAAa,IAGpB,UAAW,GACZ,CACF,CAED,QAAS,CACP,cAAgB,CACd,KAAK,UAAY,EAAA,gBAAgB,KAAK,KAAK,EAG7C,aAAe,CACb,KAAK,WAAa,IAGpB,cAAgB,CACd,KAAK,WAAa,IAErB,CACF,2JAzJQ,OAAA,CAlBA,OAAA,EAAA,EAAA,gBAAK,CAAA,iBAAqB,EAAA,UAAS,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,aAMtC,EAAA,CAHC,OAAQ,EACR,OAAA,EAAA,EAAA,gBAAK,CAAA,SAAa,EAAA,UAAS,CAAA,CAC3B,eAAc,CAAA,MAAA,SAAA,KAAA,OAAiC,8BAHxC,EAAA,YAAc,EAAA,aAAY,CAAA,CAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,oBAenC,MAAA,CARC,IAAI,WACH,OAAA,EAAA,EAAA,gBAAK,CAAA,SAAa,EAAA,UAAW,EAAA,SAAQ,CAAA,CACrC,aAAY,EAAA,WACZ,IAAK,EAAA,SACL,MAAO,EAAA,WACP,IAAK,EAAA,SACL,OAAI,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,aAAA,EAAA,YAAA,GAAA,EAAW,EACjB,QAAK,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,cAAA,EAAA,aAAA,GAAA,EAAY,yBARX,EAAA,WAAU,CAAA,CAAA,CAAA,CAAA,EAAA"}
+{"version":3,"file":"emoji.cjs","names":[],"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 { ordinalSizeValidator } from '@/common/validators';\nimport {\n  codeToEmojiData,\n  stringToUnicode,\n  emojiImageUrlSmall,\n  emojiFileExtensionSmall,\n  emojiImageUrlLarge,\n  emojiFileExtensionLarge,\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, Number],\n      default: 500,\n      validator: ordinalSizeValidator(ICON_SIZE_MODIFIERS),\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 this.emojiData.image;\n      }\n\n      if (['100', '200'].includes(String(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"],"mappings":"+XAuCA,IAAK,EAAU,CACb,KAAM,UAEN,WAAY,CACV,WAAA,EAAA,QACD,CAED,MAAO,CAML,KAAM,CACJ,KAAM,OACN,SAAU,GACX,CAOD,KAAM,CACJ,KAAM,CAAC,OAAQ,OAAO,CACtB,QAAS,IACT,UAAW,EAAA,qBAAqB,EAAA,oBAAoB,CACrD,CAOD,SAAU,CACR,KAAM,CAAC,OAAQ,OAAQ,MAAM,CAC7B,QAAS,GACV,CAQD,UAAW,CACT,KAAM,OACN,QAAS,KACV,CAMD,aAAc,CACZ,KAAM,QACN,QAAS,GACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,UAAW,KACX,WAAY,GACb,EAGH,SAAU,CACR,gBAAkB,CAChB,MAAO,CAAC,CAAC,KAAK,WAGhB,UAAY,CAWR,OAVG,KAAK,eAGN,KAAK,WAAW,OACX,KAAK,UAAU,MAGpB,CAAC,MAAO,MAAM,CAAC,SAAS,OAAO,KAAK,KAAK,CAAC,CACrC,EAAA,mBAAqB,KAAK,UAAU,IAAM,EAAA,wBAE1C,EAAA,mBAAqB,KAAK,UAAU,IAAM,EAAA,wBAVhB,WAcrC,UAAY,CACL,QAAK,eACV,OAAO,KAAK,UAAU,eAAiB,EAAA,gBAAgB,KAAK,UAAU,eAAc,CAAI,KAAK,UAAU,MAGzG,YAAc,CAEZ,OADK,KAAK,eACH,KAAK,UAAY,KAAK,UAAY,KAAK,UAAU,KADrB,iBAIrC,WAAa,CACX,OAAO,EAAA,oBAAoB,KAAK,OAEnC,CAED,MAAO,CACL,KAAM,CACJ,QAAS,UAAY,CACnB,KAAK,cAAc,EAGrB,UAAW,GACZ,CAED,SAAU,CACR,QAAS,gBAAkB,CACzB,KAAK,WAAa,IAGpB,UAAW,GACZ,CACF,CAED,QAAS,CACP,cAAgB,CACd,KAAK,UAAY,EAAA,gBAAgB,KAAK,KAAK,EAG7C,aAAe,CACb,KAAK,WAAa,IAGpB,cAAgB,CACd,KAAK,WAAa,IAErB,CACF,2JAzJQ,OAAA,CAlBA,OAAA,EAAA,EAAA,gBAAK,CAAA,iBAAqB,EAAA,UAAS,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,aAMtC,EAAA,CAHC,OAAQ,EACR,OAAA,EAAA,EAAA,gBAAK,CAAA,SAAa,EAAA,UAAS,CAAA,CAC3B,eAAc,CAAA,MAAA,SAAA,KAAA,OAAiC,8BAHxC,EAAA,YAAc,EAAA,aAAY,CAAA,CAAA,EAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,oBAenC,MAAA,CARC,IAAI,WACH,OAAA,EAAA,EAAA,gBAAK,CAAA,SAAa,EAAA,UAAW,EAAA,SAAQ,CAAA,CACrC,aAAY,EAAA,WACZ,IAAK,EAAA,SACL,MAAO,EAAA,WACP,IAAK,EAAA,SACL,OAAI,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,aAAA,EAAA,YAAA,GAAA,EAAW,EACjB,QAAK,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,cAAA,EAAA,aAAA,GAAA,EAAY,yBARX,EAAA,WAAU,CAAA,CAAA,CAAA,CAAA,EAAA"}

package/dist/lib/emoji/emoji.js

@@ -1,22 +1,22 @@
-import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { codeToEmojiData as t, emojiFileExtensionLarge as n, emojiFileExtensionSmall as r, emojiImageUrlLarge as i, emojiImageUrlSmall as a, stringToUnicode as o } from "../../common/emoji/index.js";
-import { ICON_SIZE_MODIFIERS as s } from "../icon/icon-constants.js";
-import c from "../skeleton/skeleton.js";
-import { createElementBlock as l, createElementVNode as u, createVNode as d, normalizeClass as f, openBlock as p, resolveComponent as m, vShow as h, withDirectives as g } from "vue";
-//#region components/emoji/emoji.vue
-var _ = {
-	compatConfig: { MODE: 3 },
+import { ordinalSizeValidator as e } from "../../common/validators/index.js";
+import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { codeToEmojiData as n, emojiFileExtensionLarge as r, emojiFileExtensionSmall as i, emojiImageUrlLarge as a, emojiImageUrlSmall as o, stringToUnicode as s } from "../../common/emoji/index.js";
+import { ICON_SIZE_MODIFIERS as c } from "../icon/icon-constants.js";
+import l from "../skeleton/skeleton.js";
+import { createElementBlock as u, createElementVNode as d, createVNode as f, normalizeClass as p, openBlock as m, resolveComponent as h, vShow as g, withDirectives as _ } from "vue";
+//#region components/Emoji/Emoji.vue
+var v = {
 	name: "DtEmoji",
-	components: { DtSkeleton: c },
+	components: { DtSkeleton: l },
 	props: {
 		code: {
 			type: String,
 			required: !0
 		},
 		size: {
-			type: String,
-			default: "500",
-			validator: (e) => Object.keys(s).includes(e)
+			type: [String, Number],
+			default: 500,
+			validator: e(c)
 		},
 		imgClass: {
 			type: [
@@ -46,16 +46,16 @@ var _ = {
 			return !!this.emojiData;
 		},
 		emojiSrc() {
-			return this.emojiDataValid ? this.emojiData?.custom ? this.emojiData.image : ["100", "200"].includes(this.size) ? a + this.emojiData.key + r : i + this.emojiData.key + n : "invalid";
+			return this.emojiDataValid ? this.emojiData?.custom ? this.emojiData.image : ["100", "200"].includes(String(this.size)) ? o + this.emojiData.key + i : a + this.emojiData.key + r : "invalid";
 		},
 		emojiAlt() {
-			if (this.emojiDataValid) return this.emojiData.unicode_output ? o(this.emojiData.unicode_output) : this.emojiData.name;
+			if (this.emojiDataValid) return this.emojiData.unicode_output ? s(this.emojiData.unicode_output) : this.emojiData.name;
 		},
 		emojiLabel() {
 			return this.emojiDataValid ? this.ariaLabel ? this.ariaLabel : this.emojiData.name : "Invalid Emoji";
 		},
 		emojiSize() {
-			return s[this.size];
+			return c[this.size];
 		}
 	},
 	watch: {
@@ -74,7 +74,7 @@ var _ = {
 	},
 	methods: {
 		getEmojiData() {
-			this.emojiData = t(this.code);
+			this.emojiData = n(this.code);
 		},
 		imageLoaded() {
 			this.imgLoading = !1;
@@ -83,24 +83,24 @@ var _ = {
 			this.imgLoading = !1;
 		}
 	}
-}, v = [
+}, y = [
 	"aria-label",
 	"alt",
 	"title",
 	"src"
 ];
-function y(e, t, n, r, i, a) {
-	let o = m("dt-skeleton");
-	return p(), l("span", { class: f(["d-emoji d-icon", a.emojiSize]) }, [g(d(o, {
+function b(e, t, n, r, i, a) {
+	let o = h("dt-skeleton");
+	return m(), u("span", { class: p(["d-emoji d-icon", a.emojiSize]) }, [_(f(o, {
 		offset: 0,
-		class: f(["d-icon", a.emojiSize]),
+		class: p(["d-icon", a.emojiSize]),
 		"shape-option": {
 			shape: "circle",
 			size: "100%"
 		}
-	}, null, 8, ["class"]), [[h, i.imgLoading && n.showSkeleton]]), g(u("img", {
+	}, null, 8, ["class"]), [[g, i.imgLoading && n.showSkeleton]]), _(d("img", {
 		ref: "emojiImg",
-		class: f([
+		class: p([
 			"d-icon",
 			a.emojiSize,
 			n.imgClass
@@ -111,10 +111,10 @@ function y(e, t, n, r, i, a) {
 		src: a.emojiSrc,
 		onLoad: t[0] || (t[0] = (...e) => a.imageLoaded && a.imageLoaded(...e)),
 		onError: t[1] || (t[1] = (...e) => a.imageErrored && a.imageErrored(...e))
-	}, null, 42, v), [[h, !i.imgLoading]])], 2);
+	}, null, 42, y), [[g, !i.imgLoading]])], 2);
 }
-var b = /* @__PURE__ */ e(_, [["render", y]]);
+var x = /* @__PURE__ */ t(v, [["render", b]]);
 //#endregion
-export { b as default };
+export { x as default };
 
 //# sourceMappingURL=emoji.js.map