@dialpad/dialtone-vue 3.219.0 → 3.220.0-next.2

package/dist/combobox-DgClbLOg.js.map

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

package/dist/combobox-DhjZxfUw.cjs

@@ -1,3 +0,0 @@
-require(`./chunk-Bmb41Sf3.cjs`);const e=require(`./common/utils/index.cjs`),t=require(`./_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`./common/mixins/keyboard-list-navigation.cjs`),r=require(`./lib/combobox/combobox-loading-list.cjs`),i=require(`./lib/combobox/combobox-empty-list.cjs`),a=require(`./lib/combobox/combobox-constants.cjs`);let o=require(`vue`);var s={compatConfig:{MODE:3},name:`DtCombobox`,components:{ComboboxLoadingList:r.default,ComboboxEmptyList:i.default},mixins:[n.default({indexKey:`highlightIndex`,idKey:`highlightId`,listElementKey:`getListElement`,afterHighlightMethod:`afterHighlight`,beginningOfListMethod:`beginningOfListMethod`,endOfListMethod:`endOfListMethod`,activeItemKey:`activeItemEl`})],props:{label:{type:String,required:!0},labelVisible:{type:Boolean,default:!0},size:{type:String,default:null,validator:e=>Object.values(a.COMBOBOX_LABEL_SIZES).includes(e)},description:{type:String,default:``},listId:{type:String,default(){return e.getUniqueString()}},onBeginningOfList:{type:Function,default:null},onEndOfList:{type:Function,default:null},showList:{type:Boolean,default:!1},listRenderedOutside:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},emptyList:{type:Boolean,default:!1},emptyStateMessage:{type:String,default:``},emptyStateClass:{type:[String,Object,Array],default:``},clickOnSelect:{type:Boolean,default:!1}},emits:[`select`,`escape`,`highlight`,`opened`],data(){return{outsideRenderedListRef:null,hasSlotContent:e.hasSlotContent}},computed:{inputProps(){return{label:this.label,labelVisible:this.labelVisible,size:this.size,description:this.description,role:`combobox`,"aria-label":this.label,"aria-expanded":this.showList.toString(),"aria-owns":this.listId,"aria-haspopup":`listbox`,"aria-activedescendant":this.activeItemId,"aria-controls":this.listId}},listProps(){return{role:`listbox`,id:this.listId,class:`d-ps-relative`,"aria-label":this.label}},beginningOfListMethod(){return this.onBeginningOfList||this.jumpToEnd},endOfListMethod(){return this.onEndOfList||this.jumpToBeginning},activeItemId(){if(!(!this.showList||this.highlightIndex<0||this.loading))return this.highlightId},activeItemEl(){return this.highlightId?this.getListElement().querySelector(`#`+this.highlightId):``}},watch:{showList(e){this.listRenderedOutside||(this.setInitialHighlightIndex(),this.$emit(`opened`,e)),!e&&this.outsideRenderedListRef&&(this.outsideRenderedListRef.removeEventListener(`mousemove`,this.onMouseHighlight),this.outsideRenderedListRef=null)},loading(){this.$nextTick(()=>{this.setInitialHighlightIndex()})},$props:{deep:!0,immediate:!0,handler(){this.validateEmptyListProps()}}},created(){this.validateEmptyListProps()},methods:{onMouseHighlight(e){if(this.loading)return;let t=e.target.closest(`li`);t&&this.highlightId!==t.id&&this.setHighlightId(t.id)},getListElement(){return this.outsideRenderedListRef??this.$refs.listWrapper?.querySelector(`#${this.listId}`)},clearHighlightIndex(){this.showList&&this.setHighlightIndex(-1)},afterHighlight(){this.loading||this.$emit(`highlight`,this.highlightIndex)},onEnterKey(){this.loading||this.emptyList||this.highlightIndex>=0&&(this.$emit(`select`,this.highlightIndex),this.clickOnSelect&&this.activeItemEl?.click())},onEscapeKey(){this.$emit(`escape`)},onOpen(e,t){this.outsideRenderedListRef=t,this.outsideRenderedListRef?.addEventListener(`mousemove`,this.onMouseHighlight),this.$emit(`opened`,e),e&&this.setInitialHighlightIndex()},onKeyValidation(e,t){!this.showList||!this.getListElement()||this[t](e)},setInitialHighlightIndex(){this.showList&&this.$nextTick(()=>{this.setHighlightIndex(this.loading?-1:0)})},validateEmptyListProps(){this.$slots.emptyListItem||this.emptyList&&!this.emptyStateMessage&&console.error(`Invalid props: you must pass both props emptyList and emptyStateMessage to show the
-      empty message.`)}}},c={"data-qa":`dt-combobox-input-wrapper`};function l(e,t,n,r,i,a){let s=(0,o.resolveComponent)(`combobox-loading-list`),l=(0,o.resolveComponent)(`combobox-empty-list`);return(0,o.openBlock)(),(0,o.createElementBlock)(`div`,{onKeydown:[t[3]||(t[3]=(0,o.withKeys)((0,o.withModifiers)(e=>a.onKeyValidation(e,`onEscapeKey`),[`stop`]),[`esc`])),t[4]||(t[4]=(0,o.withKeys)((0,o.withModifiers)(e=>a.onKeyValidation(e,`onEnterKey`),[`exact`]),[`enter`])),t[5]||(t[5]=(0,o.withKeys)((0,o.withModifiers)(e=>a.onKeyValidation(e,`onUpKey`),[`stop`,`prevent`]),[`up`])),t[6]||(t[6]=(0,o.withKeys)((0,o.withModifiers)(e=>a.onKeyValidation(e,`onDownKey`),[`stop`,`prevent`]),[`down`])),t[7]||(t[7]=(0,o.withKeys)((0,o.withModifiers)(e=>a.onKeyValidation(e,`onHomeKey`),[`stop`,`prevent`]),[`home`])),t[8]||(t[8]=(0,o.withKeys)((0,o.withModifiers)(e=>a.onKeyValidation(e,`onEndKey`),[`stop`,`prevent`]),[`end`]))]},[(0,o.createElementVNode)(`div`,c,[(0,o.renderSlot)(e.$slots,`input`,{inputProps:a.inputProps})]),n.showList?((0,o.openBlock)(),(0,o.createElementBlock)(`div`,{key:0,ref:`listWrapper`,"data-qa":`dt-combobox-list-wrapper`,onMouseleave:t[0]||(t[0]=(...e)=>a.clearHighlightIndex&&a.clearHighlightIndex(...e)),onFocusout:t[1]||(t[1]=(...e)=>a.clearHighlightIndex&&a.clearHighlightIndex(...e)),onMousemoveCapture:t[2]||(t[2]=(...e)=>a.onMouseHighlight&&a.onMouseHighlight(...e))},[n.loading&&!n.listRenderedOutside?((0,o.openBlock)(),(0,o.createBlock)(s,(0,o.normalizeProps)((0,o.mergeProps)({key:0},a.listProps)),null,16)):n.emptyList&&(n.emptyStateMessage||i.hasSlotContent(e.$slots.emptyListItem))&&!n.listRenderedOutside?((0,o.openBlock)(),(0,o.createBlock)(l,(0,o.mergeProps)({key:1},a.listProps,{message:n.emptyStateMessage,"item-class":n.emptyStateClass}),{default:(0,o.withCtx)(()=>[(0,o.renderSlot)(e.$slots,`emptyListItem`)]),_:3},16,[`message`,`item-class`])):(0,o.renderSlot)(e.$slots,`list`,{key:2,listProps:a.listProps,opened:a.onOpen,clearHighlightIndex:a.clearHighlightIndex})],544)):(0,o.createCommentVNode)(``,!0)],32)}var u=t.t(s,[[`render`,l]]);Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return u}});
-//# sourceMappingURL=combobox-DhjZxfUw.cjs.map

package/dist/combobox-DhjZxfUw.cjs.map

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

package/dist/components/split_button/split_button-alpha.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"split_button-alpha.vue.d.ts","sourceRoot":"","sources":["../../../components/split_button/split_button-alpha.vue"],"names":[],"mappings":"AAyBA;"}

package/dist/datepicker-DprRX9AH.cjs

@@ -1,2 +0,0 @@
-require(`./chunk-Bmb41Sf3.cjs`);const e=require(`./common/utils/index.cjs`),t=require(`./localization/index.cjs`),n=require(`./lib/button/button.cjs`),r=require(`./lib/stack/stack.cjs`),i=require(`./lib/tooltip/tooltip.cjs`),a=require(`./lib/datepicker/datepicker-constants.cjs`),o=require(`./lib/datepicker/utils.cjs`);let s=require(`vue`),c=require(`date-fns`),l=require(`@dialpad/dialtone-icons/vue3`);function u(n,r){let i=(0,s.ref)((0,c.getMonth)(n.selectedDate)),l=(0,s.ref)((0,c.getYear)(n.selectedDate)),u=(0,s.ref)(null),d=(0,s.ref)(0),f=(0,s.ref)([]),p=new t.DialtoneLocalization,m=(0,s.computed)(()=>o.getCalendarDays(i.value,l.value,u.value,n.minDate,n.maxDate,n.weekStartsOn)),h=(0,s.computed)(()=>n.minDate?(0,c.endOfMonth)((0,c.subMonths)(new Date(l.value,i.value,1),1))<(0,c.startOfDay)(n.minDate):!1),g=(0,s.computed)(()=>n.maxDate?(0,c.startOfMonth)((0,c.addMonths)(new Date(l.value,i.value,1),1))>(0,c.startOfDay)(n.maxDate):!1),_=(0,s.computed)(()=>n.minDate?(0,c.endOfMonth)(new Date(l.value-1,i.value,1))<(0,c.startOfDay)(n.minDate):!1),v=(0,s.computed)(()=>n.maxDate?(0,c.startOfMonth)(new Date(l.value+1,i.value,1))>(0,c.startOfDay)(n.maxDate):!1);(0,s.watch)(i,()=>{C(),r(`calendar-days`,m.value)},{immediate:!0}),(0,s.watch)(l,()=>{C(),r(`calendar-days`,m.value)},{immediate:!0}),(0,s.watch)(()=>n.minDate,()=>{r(`calendar-days`,m.value)}),(0,s.watch)(()=>n.maxDate,()=>{r(`calendar-days`,m.value)});function y(e){return o.formatMonth(e,a.INTL_MONTH_FORMAT,p.currentLocale)}function b(e){f.value.includes(e)||f.value.push(e)}function x(){e.returnFirstEl(f.value[0].$el).focus()}function S(t){switch(t.key){case`ArrowLeft`:t.preventDefault(),d.value===0?(d.value=3,e.returnFirstEl(f.value[d.value].$el).focus()):(d.value--,e.returnFirstEl(f.value[d.value].$el).focus());break;case`ArrowRight`:t.preventDefault(),d.value===3?(d.value=0,e.returnFirstEl(f.value[d.value].$el).focus()):(d.value++,e.returnFirstEl(f.value[d.value].$el).focus());break;case`ArrowDown`:t.preventDefault(),r(`focus-first-day`);break;case`Tab`:t.preventDefault(),r(`focus-first-day`);break;case`Escape`:r(`close-datepicker`);break}}function C(){let e=(0,c.getYear)(n.selectedDate),t=(0,c.getMonth)(n.selectedDate);e!==l.value||t!==i.value?u.value=null:u.value=(0,c.getDate)(n.selectedDate)}function w(e){if(e===-1&&h.value||e===1&&g.value)return;(i.value===0&&e===-1||i.value===11&&e===1)&&(l.value+=e);let t=(0,c.set)(n.selectedDate,{month:i.value,year:l.value});i.value=(0,c.getMonth)(e===1?(0,c.addMonths)(t,1):(0,c.subMonths)(t,1))}function T(e){e===-1&&_.value||e===1&&v.value||(l.value+=e)}function E(){w(1)}function D(){w(-1)}function O(){return`${p.$t(`DIALTONE_DATEPICKER_CHANGE_TO`)} ${p.$t(`DIALTONE_DATEPICKER_PREVIOUS_YEAR`)} ${l.value-1}`}function k(){return`${p.$t(`DIALTONE_DATEPICKER_CHANGE_TO`)} ${p.$t(`DIALTONE_DATEPICKER_PREVIOUS_MONTH`)} ${y(i.value-1)}`}function A(){return`${p.$t(`DIALTONE_DATEPICKER_CHANGE_TO`)} ${p.$t(`DIALTONE_DATEPICKER_NEXT_YEAR`)} ${l.value+1}`}function j(){return`${p.$t(`DIALTONE_DATEPICKER_CHANGE_TO`)} ${p.$t(`DIALTONE_DATEPICKER_NEXT_MONTH`)} ${y(i.value+1)}`}return{selectMonth:i,selectYear:l,formattedMonth:y,setDayRef:b,focusMonthYearPicker:x,handleKeyDown:S,changeMonth:w,changeYear:T,goToNextMonth:E,goToPrevMonth:D,isPrevMonthDisabled:h,isNextMonthDisabled:g,isPrevYearDisabled:_,isNextYearDisabled:v,previousYearAriaLabel:O,previousMonthAriaLabel:k,nextYearAriaLabel:A,nextMonthAriaLabel:j}}var d={id:`calendar-heading`,class:`d-datepicker__month-year-title`},f={__name:`month-year-picker`,props:{selectedDate:{type:Date,required:!0},minDate:{type:Date,default:null},maxDate:{type:Date,default:null},weekStartsOn:{type:Number,default:0,validator:e=>Number.isInteger(e)&&e>=0&&e<=6}},emits:[`calendar-days`,`focus-first-day`,`focus-last-day`,`close-datepicker`],setup(e,{expose:a,emit:o}){let c=e,f=o,p=new t.DialtoneLocalization,{selectMonth:m,selectYear:h,formattedMonth:g,setDayRef:_,focusMonthYearPicker:v,handleKeyDown:y,changeMonth:b,changeYear:x,goToNextMonth:S,goToPrevMonth:C,isPrevMonthDisabled:w,isNextMonthDisabled:T,isPrevYearDisabled:E,isNextYearDisabled:D,previousYearAriaLabel:O,previousMonthAriaLabel:k,nextMonthAriaLabel:A,nextYearAriaLabel:j}=u(c,f);return(0,s.onMounted)(()=>{v()}),a({focusMonthYearPicker:v,goToNextMonth:S,goToPrevMonth:C}),(e,t)=>((0,s.openBlock)(),(0,s.createBlock)((0,s.unref)(r.default),{class:`d-datepicker__month-year`,direction:`row`,gap:`300`},{default:(0,s.withCtx)(()=>[(0,s.createVNode)((0,s.unref)(r.default),{as:`nav`,class:`d-datepicker__nav`,direction:`row`,gap:`200`},{default:(0,s.withCtx)(()=>[(0,s.createVNode)((0,s.unref)(i.default),{"fallback-placements":[`top-start`,`auto`],message:(0,s.unref)(p).$t(`DIALTONE_DATEPICKER_PREVIOUS_YEAR`),placement:`top`},{anchor:(0,s.withCtx)(()=>[(0,s.createVNode)((0,s.unref)(n.default),{id:`prevYearButton`,ref:e=>{e&&(0,s.unref)(_)(e)},"aria-label":(0,s.unref)(O)(),circle:!0,disabled:(0,s.unref)(E),class:`d-datepicker__nav-btn`,importance:`clear`,kind:`muted`,size:`xs`,type:`button`,onClick:t[0]||(t[0]=e=>(0,s.unref)(x)(-1)),onKeydown:t[1]||(t[1]=e=>(0,s.unref)(y)(e))},{default:(0,s.withCtx)(()=>[(0,s.createVNode)((0,s.unref)(l.DtIconChevronsLeft),{size:`200`})]),_:1},8,[`aria-label`,`disabled`])]),_:1},8,[`message`]),(0,s.createVNode)((0,s.unref)(i.default),{"fallback-placements":[`top-start`,`auto`],message:(0,s.unref)(p).$t(`DIALTONE_DATEPICKER_PREVIOUS_MONTH`),placement:`top`},{anchor:(0,s.withCtx)(()=>[(0,s.createVNode)((0,s.unref)(n.default),{id:`prevMonthButton`,ref:e=>{e&&(0,s.unref)(_)(e)},"aria-label":(0,s.unref)(k)(),circle:!0,disabled:(0,s.unref)(w),class:`d-datepicker__nav-btn`,importance:`clear`,kind:`muted`,size:`xs`,type:`button`,onClick:t[2]||(t[2]=e=>(0,s.unref)(b)(-1)),onKeydown:t[3]||(t[3]=e=>(0,s.unref)(y)(e))},{default:(0,s.withCtx)(()=>[(0,s.createVNode)((0,s.unref)(l.DtIconChevronLeft),{size:`200`})]),_:1},8,[`aria-label`,`disabled`])]),_:1},8,[`message`])]),_:1}),(0,s.createElementVNode)(`div`,d,(0,s.toDisplayString)((0,s.unref)(g)((0,s.unref)(m)))+` `+(0,s.toDisplayString)((0,s.unref)(h)),1),(0,s.createVNode)((0,s.unref)(r.default),{as:`nav`,class:`d-datepicker__nav`,direction:`row`,gap:`200`},{default:(0,s.withCtx)(()=>[(0,s.createVNode)((0,s.unref)(i.default),{"fallback-placements":[`top-end`,`auto`],message:(0,s.unref)(p).$t(`DIALTONE_DATEPICKER_NEXT_MONTH`),placement:`top`},{anchor:(0,s.withCtx)(()=>[(0,s.createVNode)((0,s.unref)(n.default),{id:`nextMonthButton`,ref:e=>{e&&(0,s.unref)(_)(e)},"aria-label":(0,s.unref)(A)(),circle:!0,disabled:(0,s.unref)(T),class:`d-datepicker__nav-btn`,importance:`clear`,kind:`muted`,size:`xs`,type:`button`,onClick:t[4]||(t[4]=e=>(0,s.unref)(b)(1)),onKeydown:t[5]||(t[5]=e=>(0,s.unref)(y)(e))},{default:(0,s.withCtx)(()=>[(0,s.createVNode)((0,s.unref)(l.DtIconChevronRight),{size:`200`})]),_:1},8,[`aria-label`,`disabled`])]),_:1},8,[`message`]),(0,s.createVNode)((0,s.unref)(i.default),{"fallback-placements":[`top-end`,`auto`],message:(0,s.unref)(p).$t(`DIALTONE_DATEPICKER_NEXT_YEAR`),placement:`top`},{anchor:(0,s.withCtx)(()=>[(0,s.createVNode)((0,s.unref)(n.default),{id:`nextYearButton`,ref:e=>{e&&(0,s.unref)(_)(e)},"aria-label":(0,s.unref)(j)(),circle:!0,disabled:(0,s.unref)(D),class:`d-datepicker__nav-btn`,importance:`clear`,kind:`muted`,size:`xs`,type:`button`,onClick:t[6]||(t[6]=e=>(0,s.unref)(x)(1)),onKeydown:t[7]||(t[7]=e=>(0,s.unref)(y)(e))},{default:(0,s.withCtx)(()=>[(0,s.createVNode)((0,s.unref)(l.DtIconChevronsRight),{size:`200`})]),_:1},8,[`aria-label`,`disabled`])]),_:1},8,[`message`])]),_:1})]),_:1}))}};function p(n,r){let i=(0,s.ref)(null),c=(0,s.ref)(0),l=(0,s.ref)([]),u=new t.DialtoneLocalization,d=(0,s.computed)(()=>o.getWeekDayNames(n.locale,n.weekStartsOn));(0,s.watch)(()=>n.calendarDays,()=>{c.value=0,l.value=[],i.value=null});function f(e){return u.$t(`DIALTONE_DATEPICKER_SELECT_DAY`)+` ${o.formatDate(e.value,a.INTL_MONTH_FORMAT,u.currentLocale)}`}function p(e,t){!l.value.some(t=>t.el===e)&&!t.disabled&&l.value.push({el:e,day:t})}function m(t){switch(t.key){case`ArrowUp`:t.preventDefault(),c.value-=7;try{e.returnFirstEl(l.value[c.value].el.$el).focus()}catch{let t=o.calculatePrevFocusDate(l.value[c.value+7].day.value);r(`go-to-prev-month`),(0,s.nextTick)(()=>{e.returnFirstEl(l.value[t-1].el.$el).focus(),c.value+=t-1})}break;case`ArrowDown`:t.preventDefault(),c.value+=7;try{e.returnFirstEl(l.value[c.value].el.$el).focus()}catch{let t=o.calculateNextFocusDate(l.value[c.value-7].day.value);r(`go-to-next-month`),(0,s.nextTick)(()=>{e.returnFirstEl(l.value[t-1].el.$el).focus(),c.value+=t-1})}break;case`ArrowLeft`:t.preventDefault(),c.value>0?(--c.value,e.returnFirstEl(l.value[c.value].el.$el).focus()):(r(`go-to-prev-month`),g());break;case`ArrowRight`:t.preventDefault(),c.value<l.value.length-1?(c.value+=1,e.returnFirstEl(l.value[c.value].el.$el).focus()):(r(`go-to-next-month`),h());break;case`Tab`:t.preventDefault(),r(`focus-month-year-picker`);break;case`Escape`:r(`close-datepicker`);break}}function h(){c.value=0,(0,s.nextTick)(()=>{e.returnFirstEl(l.value[c.value].el.$el).focus()})}function g(){(0,s.nextTick)(()=>{c.value=l.value.length-1,e.returnFirstEl(l.value[c.value].el.$el).focus()})}function _(e){e.disabled||(i.value=e.text,r(`select-date`,e.value))}return{selectedDay:i,weekDays:d,dayAriaLabel:f,setDayRef:p,handleKeyDown:m,focusFirstDay:h,selectDay:_}}var m={class:`d-datepicker__calendar`,"aria-labelledby":`calendar-heading`},h=[`title`,`aria-label`],g={__name:`calendar`,props:{calendarDays:{type:Array,required:!0},weekStartsOn:{type:Number,default:0,validator:e=>Number.isInteger(e)&&e>=0&&e<=6}},emits:[`select-date`,`focus-month-year-picker`,`close-datepicker`,`go-to-next-month`,`go-to-prev-month`],setup(e,{expose:t,emit:r}){let{selectedDay:i,weekDays:a,dayAriaLabel:o,setDayRef:c,handleKeyDown:l,focusFirstDay:u,selectDay:d}=p(e,r);return t({focusFirstDay:u}),(t,r)=>((0,s.openBlock)(),(0,s.createElementBlock)(`table`,m,[(0,s.createElementVNode)(`thead`,null,[(0,s.createElementVNode)(`tr`,null,[((0,s.openBlock)(!0),(0,s.createElementBlock)(s.Fragment,null,(0,s.renderList)((0,s.unref)(a),e=>((0,s.openBlock)(),(0,s.createElementBlock)(`th`,{key:e,scope:`col`,class:`d-datepicker__cell d-datepicker__cell--header`},[(0,s.createElementVNode)(`span`,{class:`d-datepicker__weekday`,title:e,"aria-label":e},(0,s.toDisplayString)(e),9,h)]))),128))])]),(0,s.createElementVNode)(`tbody`,null,[((0,s.openBlock)(!0),(0,s.createElementBlock)(s.Fragment,null,(0,s.renderList)(e.calendarDays,(e,t)=>((0,s.openBlock)(),(0,s.createElementBlock)(`tr`,{key:t},[((0,s.openBlock)(!0),(0,s.createElementBlock)(s.Fragment,null,(0,s.renderList)(e.days,(e,a)=>((0,s.openBlock)(),(0,s.createElementBlock)(`td`,{key:t+a,class:`d-datepicker__cell`,role:`listbox`},[(0,s.createVNode)((0,s.unref)(n.default),{ref_for:!0,ref:t=>{t&&(0,s.unref)(c)(t,e)},class:(0,s.normalizeClass)([`d-datepicker__day`,{"d-datepicker__day--disabled":e.disabled,"d-datepicker__day--selected":(0,s.unref)(i)?e.text===(0,s.unref)(i)&&!e.disabled:e.selected}]),circle:!0,size:`sm`,importance:`clear`,disabled:e.disabled,type:`button`,"aria-selected":(0,s.unref)(i)?e.text===(0,s.unref)(i)&&!e.disabled:e.selected,"aria-label":(0,s.unref)(o)(e),role:`option`,onClick:t=>(0,s.unref)(d)(e),onKeydown:r[0]||(r[0]=e=>(0,s.unref)(l)(e))},{default:(0,s.withCtx)(()=>[(0,s.createTextVNode)((0,s.toDisplayString)(e.text),1)]),_:2},1032,[`disabled`,`class`,`aria-selected`,`aria-label`,`onClick`])]))),128))]))),128))])]))}},_={class:`d-datepicker__hd`},v={class:`d-datepicker__bd`},y={__name:`datepicker`,props:{selectedDate:{type:Date,default:()=>new Date},minDate:{type:Date,default:null},maxDate:{type:Date,default:null,validator:(e,t)=>e&&t.minDate&&e<t.minDate?(console.warn(`[DtDatepicker]: maxDate must be after or equal to minDate.`),!1):!0},weekStartsOn:{type:Number,default:0,validator:e=>Number.isInteger(e)&&e>=0&&e<=6}},emits:[`selected-date`,`close-datepicker`],setup(t){let n=(0,s.ref)([]);function i(e){n.value=e}return(0,s.onMounted)(()=>{e.warnIfUnmounted(e.returnFirstEl((0,s.getCurrentInstance)().proxy.$el),`datepicker`)}),(e,a)=>((0,s.openBlock)(),(0,s.createBlock)((0,s.unref)(r.default),{class:`d-datepicker`,gap:`400`},{default:(0,s.withCtx)(()=>[(0,s.createElementVNode)(`div`,_,[(0,s.createVNode)(f,{ref:`monthYearPicker`,"selected-date":t.selectedDate,"min-date":t.minDate,"max-date":t.maxDate,"week-starts-on":t.weekStartsOn,onCalendarDays:i,onFocusFirstDay:a[0]||(a[0]=t=>e.$refs.calendar.focusFirstDay()),onFocusLastDay:a[1]||(a[1]=t=>e.$refs.calendar.focusLastDay()),onCloseDatepicker:a[2]||(a[2]=t=>e.$emit(`close-datepicker`))},null,8,[`selected-date`,`min-date`,`max-date`,`week-starts-on`])]),(0,s.createElementVNode)(`div`,v,[(0,s.createVNode)(g,{ref:`calendar`,"calendar-days":n.value,"week-starts-on":t.weekStartsOn,onSelectDate:a[3]||(a[3]=t=>e.$emit(`selected-date`,t)),onFocusMonthYearPicker:a[4]||(a[4]=t=>e.$refs.monthYearPicker.focusMonthYearPicker()),onCloseDatepicker:a[5]||(a[5]=t=>e.$emit(`close-datepicker`)),onGoToNextMonth:a[6]||(a[6]=t=>e.$refs.monthYearPicker.goToNextMonth()),onGoToPrevMonth:a[7]||(a[7]=t=>e.$refs.monthYearPicker.goToPrevMonth())},null,8,[`calendar-days`,`week-starts-on`])])]),_:1}))}};Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return y}});
-//# sourceMappingURL=datepicker-DprRX9AH.cjs.map

package/dist/datepicker-DprRX9AH.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"datepicker-DprRX9AH.cjs","names":["DialtoneLocalization","getCalendarDays","formatMonth","INTL_MONTH_FORMAT","DialtoneLocalization","getWeekDayNames","formatDate","INTL_MONTH_FORMAT","calculatePrevFocusDate","calculateNextFocusDate","$refs","$emit"],"sources":["../components/datepicker/composables/useMonthYearPicker.js","../components/datepicker/modules/month-year-picker.vue","../components/datepicker/composables/useCalendar.js","../components/datepicker/modules/calendar.vue","../components/datepicker/datepicker.vue"],"sourcesContent":["import { computed, ref, watch } from 'vue';\nimport { addMonths, endOfMonth, getDate, getMonth, getYear, set, startOfDay, startOfMonth, subMonths } from 'date-fns';\nimport { formatMonth, getCalendarDays } from '../utils.js';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport { returnFirstEl } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\nexport function useMonthYearPicker (props, emits) {\n  const selectMonth = ref(getMonth(props.selectedDate));\n  const selectYear = ref(getYear(props.selectedDate));\n  const highlightedDay = ref(null);\n  const focusPicker = ref(0);\n  const focusRefs = ref([]);\n  const i18n = new DialtoneLocalization();\n\n  const calendarDays = computed(() => {\n    return getCalendarDays(\n      selectMonth.value, selectYear.value, highlightedDay.value,\n      props.minDate, props.maxDate, props.weekStartsOn,\n    );\n  });\n\n  const isPrevMonthDisabled = computed(() => {\n    if (!props.minDate) return false;\n    const prevMonth = subMonths(new Date(selectYear.value, selectMonth.value, 1), 1);\n    return endOfMonth(prevMonth) < startOfDay(props.minDate);\n  });\n\n  const isNextMonthDisabled = computed(() => {\n    if (!props.maxDate) return false;\n    const nextMonth = addMonths(new Date(selectYear.value, selectMonth.value, 1), 1);\n    return startOfMonth(nextMonth) > startOfDay(props.maxDate);\n  });\n\n  const isPrevYearDisabled = computed(() => {\n    if (!props.minDate) return false;\n    const prevYearMonth = new Date(selectYear.value - 1, selectMonth.value, 1);\n    return endOfMonth(prevYearMonth) < startOfDay(props.minDate);\n  });\n\n  const isNextYearDisabled = computed(() => {\n    if (!props.maxDate) return false;\n    const nextYearMonth = new Date(selectYear.value + 1, selectMonth.value, 1);\n    return startOfMonth(nextYearMonth) > startOfDay(props.maxDate);\n  });\n\n  watch(selectMonth, () => {\n    highlightDay();\n    emits('calendar-days', calendarDays.value);\n  }, { immediate: true });\n\n  watch(selectYear, () => {\n    highlightDay();\n    emits('calendar-days', calendarDays.value);\n  }, { immediate: true });\n\n  watch(() => props.minDate, () => {\n    emits('calendar-days', calendarDays.value);\n  });\n\n  watch(() => props.maxDate, () => {\n    emits('calendar-days', calendarDays.value);\n  });\n\n  function formattedMonth (month) {\n    return formatMonth(month, INTL_MONTH_FORMAT, i18n.currentLocale);\n  }\n\n  function setDayRef (el) {\n    if (!focusRefs.value.includes(el)) {\n      focusRefs.value.push(el);\n    }\n  }\n\n  function focusMonthYearPicker () {\n    returnFirstEl(focusRefs.value[0].$el).focus();\n  }\n\n  function handleKeyDown (event) {\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (focusPicker.value === 0) {\n          focusPicker.value = 3;\n          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        } else {\n          focusPicker.value--;\n          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        }\n        break;\n\n      case 'ArrowRight':\n        event.preventDefault();\n        if (focusPicker.value === 3) {\n          focusPicker.value = 0;\n          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        } else {\n          focusPicker.value++;\n          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        }\n        break;\n\n      case 'ArrowDown':\n        event.preventDefault();\n        emits('focus-first-day');\n        break;\n\n      case 'Tab':\n        event.preventDefault();\n        emits('focus-first-day');\n        break;\n\n      case 'Escape':\n        emits('close-datepicker');\n        break;\n    }\n  }\n\n  function highlightDay () {\n    const year = getYear(props.selectedDate);\n    const month = getMonth(props.selectedDate);\n\n    if (year !== selectYear.value || month !== selectMonth.value) {\n      highlightedDay.value = null;\n    } else {\n      highlightedDay.value = getDate(props.selectedDate);\n    }\n  }\n\n  function changeMonth (value) {\n    if (value === -1 && isPrevMonthDisabled.value) return;\n    if (value === 1 && isNextMonthDisabled.value) return;\n\n    // Adjust year when changing from January to December or vice versa\n    if ((selectMonth.value === 0 && value === -1) || (selectMonth.value === 11 && value === 1)) {\n      selectYear.value += value;\n    }\n\n    // Calculate the new date by adding or subtracting months\n    const initialDate = set(props.selectedDate, { month: selectMonth.value, year: selectYear.value });\n    const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n    // Update the selected month\n    selectMonth.value = getMonth(newDate);\n  }\n\n  function changeYear (value) {\n    if (value === -1 && isPrevYearDisabled.value) return;\n    if (value === 1 && isNextYearDisabled.value) return;\n\n    selectYear.value = selectYear.value + value;\n  }\n\n  function goToNextMonth () {\n    changeMonth(1);\n  }\n\n  function goToPrevMonth () {\n    changeMonth(-1);\n  }\n\n  function previousYearAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_YEAR')} ${selectYear.value - 1}`;\n  }\n\n  function previousMonthAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_MONTH')} ${formattedMonth(selectMonth.value - 1)}`;\n  }\n\n  function nextYearAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_NEXT_YEAR')} ${selectYear.value + 1}`;\n  }\n\n  function nextMonthAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_NEXT_MONTH')} ${formattedMonth(selectMonth.value + 1)}`;\n  }\n\n  return {\n    selectMonth,\n    selectYear,\n    formattedMonth,\n    setDayRef,\n    focusMonthYearPicker,\n    handleKeyDown,\n    changeMonth,\n    changeYear,\n    goToNextMonth,\n    goToPrevMonth,\n    isPrevMonthDisabled,\n    isNextMonthDisabled,\n    isPrevYearDisabled,\n    isNextYearDisabled,\n    previousYearAriaLabel,\n    previousMonthAriaLabel,\n    nextYearAriaLabel,\n    nextMonthAriaLabel,\n  };\n}\n","<template>\n  <dt-stack\n    class=\"d-datepicker__month-year\"\n    direction=\"row\"\n    gap=\"300\"\n  >\n    <dt-stack\n      as=\"nav\"\n      class=\"d-datepicker__nav\"\n      direction=\"row\"\n      gap=\"200\"\n    >\n      <dt-tooltip\n        :fallback-placements=\"['top-start', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_YEAR')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevYearButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"previousYearAriaLabel()\"\n            :circle=\"true\"\n            :disabled=\"isPrevYearDisabled\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeYear(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :fallback-placements=\"['top-start', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_MONTH')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevMonthButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"previousMonthAriaLabel()\"\n            :circle=\"true\"\n            :disabled=\"isPrevMonthDisabled\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeMonth(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n    <div\n      id=\"calendar-heading\"\n      class=\"d-datepicker__month-year-title\"\n    >\n      {{ formattedMonth(selectMonth) }}\n\n      {{ selectYear }}\n    </div>\n    <dt-stack\n      as=\"nav\"\n      class=\"d-datepicker__nav\"\n      direction=\"row\"\n      gap=\"200\"\n    >\n      <dt-tooltip\n        :fallback-placements=\"['top-end', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_NEXT_MONTH')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextMonthButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"nextMonthAriaLabel()\"\n            :circle=\"true\"\n            :disabled=\"isNextMonthDisabled\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeMonth(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :fallback-placements=\"['top-end', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_NEXT_YEAR')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextYearButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"nextYearAriaLabel()\"\n            :circle=\"true\"\n            :disabled=\"isNextYearDisabled\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeYear(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n  </dt-stack>\n</template>\n\n<script setup>\nimport {\n  DtIconChevronLeft,\n  DtIconChevronsLeft,\n  DtIconChevronRight,\n  DtIconChevronsRight,\n} from '@dialpad/dialtone-icons/vue3';\nimport { DtStack } from '@/components/stack';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport { onMounted } from 'vue';\nimport { useMonthYearPicker } from '../composables/useMonthYearPicker.js';\nimport { DialtoneLocalization } from '@/localization';\n\nconst props = defineProps({\n  selectedDate: {\n    type: Date,\n    required: true,\n  },\n\n  minDate: {\n    type: Date,\n    default: null,\n  },\n\n  maxDate: {\n    type: Date,\n    default: null,\n  },\n\n  weekStartsOn: {\n    type: Number,\n    default: 0,\n    validator: (v) => Number.isInteger(v) && v >= 0 && v <= 6,\n  },\n});\n\nconst emits = defineEmits([\n  /**\n     * Will retrieve the calendar days of the given date\n     *\n     * @event calendar-days\n     * @type {Array}\n     */\n  'calendar-days',\n\n  /**\n     * Will focus first day in calendar\n     *\n     * @event focus-first-day\n     */\n  'focus-first-day',\n\n  /**\n     * Will focus last day in calendar\n     *\n     * @event focus-last-day\n     */\n  'focus-last-day',\n\n  /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n  'close-datepicker',\n]);\n\nconst i18n = new DialtoneLocalization();\n\nconst {\n  selectMonth,\n  selectYear,\n  formattedMonth,\n  setDayRef,\n  focusMonthYearPicker,\n  handleKeyDown,\n  changeMonth,\n  changeYear,\n  goToNextMonth,\n  goToPrevMonth,\n  isPrevMonthDisabled,\n  isNextMonthDisabled,\n  isPrevYearDisabled,\n  isNextYearDisabled,\n  previousYearAriaLabel,\n  previousMonthAriaLabel,\n  nextMonthAriaLabel,\n  nextYearAriaLabel,\n} = useMonthYearPicker(props, emits);\n\nonMounted(() => {\n  focusMonthYearPicker();\n});\n\ndefineExpose({\n  focusMonthYearPicker,\n  goToNextMonth,\n  goToPrevMonth,\n});\n</script>\n","import { computed, ref, watch, nextTick } from 'vue';\nimport { getWeekDayNames, calculateNextFocusDate, calculatePrevFocusDate, formatDate } from '../utils.js';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants.js';\nimport { returnFirstEl } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\nexport function useCalendar (props, emits) {\n  const selectedDay = ref(null);\n  const focusDay = ref(0);\n  const daysRef = ref([]);\n  const i18n = new DialtoneLocalization();\n\n  const weekDays = computed(() => {\n    return getWeekDayNames(props.locale, props.weekStartsOn);\n  });\n\n  watch(() => props.calendarDays, () => {\n    focusDay.value = 0;\n    daysRef.value = [];\n    selectedDay.value = null;\n  });\n\n  function dayAriaLabel (day) {\n    return i18n.$t('DIALTONE_DATEPICKER_SELECT_DAY') + ` ${formatDate(day.value, INTL_MONTH_FORMAT, i18n.currentLocale)}`;\n  }\n\n  function setDayRef (el, day) {\n    if (!daysRef.value.some(day => day.el === el) && !day.disabled) {\n      daysRef.value.push({ el, day });\n    }\n  }\n\n  function handleKeyDown (event) {\n    switch (event.key) {\n      case 'ArrowUp':\n        event.preventDefault();\n        focusDay.value -= 7;\n        try {\n          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n        } catch {\n          const prevFocusDate = calculatePrevFocusDate(daysRef.value[focusDay.value + 7].day.value);\n          emits('go-to-prev-month');\n\n          nextTick(() => {\n            returnFirstEl(daysRef.value[prevFocusDate - 1].el.$el).focus();\n            focusDay.value += prevFocusDate - 1;\n          });\n        }\n        break;\n\n      case 'ArrowDown':\n        event.preventDefault();\n        focusDay.value += 7;\n        try {\n          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n        } catch {\n          const nextFocusDate = calculateNextFocusDate(daysRef.value[focusDay.value - 7].day.value);\n          emits('go-to-next-month');\n\n          nextTick(() => {\n            returnFirstEl(daysRef.value[nextFocusDate - 1].el.$el).focus();\n            focusDay.value += nextFocusDate - 1;\n          });\n        }\n        break;\n\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (focusDay.value > 0) {\n          focusDay.value -= 1;\n          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n        } else {\n          // if we are on month first day, jump to last day of prev month\n          emits('go-to-prev-month');\n          focusLastDay();\n        }\n        break;\n\n      case 'ArrowRight':\n        event.preventDefault();\n        if (focusDay.value < daysRef.value.length - 1) {\n          focusDay.value += 1;\n          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n        } else {\n          // if we are on month last day, jump to first day of next month\n          emits('go-to-next-month');\n\n          focusFirstDay();\n        }\n        break;\n\n      case 'Tab':\n        event.preventDefault();\n        emits('focus-month-year-picker');\n        break;\n\n      case 'Escape':\n        emits('close-datepicker');\n        break;\n    }\n  }\n\n  function focusFirstDay () {\n    focusDay.value = 0;\n\n    nextTick(() => {\n      returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n    });\n  }\n\n  function focusLastDay () {\n    nextTick(() => {\n      focusDay.value = daysRef.value.length - 1;\n      returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n    });\n  }\n\n  function selectDay (day) {\n    if (day.disabled) { return; }\n\n    // local selectedDay is updated when a day is selected\n    selectedDay.value = day.text;\n    emits('select-date', day.value);\n  }\n\n  return {\n    selectedDay,\n    weekDays,\n    dayAriaLabel,\n    setDayRef,\n    handleKeyDown,\n    focusFirstDay,\n    selectDay,\n  };\n}\n","<template>\n  <table\n    class=\"d-datepicker__calendar\"\n    aria-labelledby=\"calendar-heading\"\n  >\n    <thead>\n      <tr>\n        <th\n          v-for=\"day in weekDays\"\n          :key=\"day\"\n          scope=\"col\"\n          class=\"d-datepicker__cell d-datepicker__cell--header\"\n        >\n          <span\n            class=\"d-datepicker__weekday\"\n            :title=\"day\"\n            :aria-label=\"day\"\n          > {{ day }}</span>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        v-for=\"(week, indexWeek) in calendarDays\"\n        :key=\"indexWeek\"\n      >\n        <td\n          v-for=\"(day, indexDays) in week.days\"\n          :key=\"indexWeek + indexDays\"\n          class=\"d-datepicker__cell\"\n          role=\"listbox\"\n        >\n          <dt-button\n            :ref=\"el => { if (el) setDayRef(el, day) }\"\n            class=\"d-datepicker__day\"\n            :circle=\"true\"\n            size=\"sm\"\n            importance=\"clear\"\n            :disabled=\"day.disabled\"\n            :class=\"{\n              'd-datepicker__day--disabled': day.disabled,\n              'd-datepicker__day--selected': selectedDay\n                ? ((day.text === selectedDay) && !day.disabled)\n                : day.selected,\n            }\"\n            type=\"button\"\n            :aria-selected=\"!!selectedDay ? ((day.text === selectedDay) && !day.disabled) : day.selected\"\n            :aria-label=\"dayAriaLabel(day)\"\n            role=\"option\"\n            @click=\"selectDay(day)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            {{ day.text }}\n          </dt-button>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script setup>\nimport { useCalendar } from '../composables/useCalendar.js';\nimport { DtButton } from '@/components/button';\n\nconst props = defineProps({\n  calendarDays: {\n    type: Array,\n    required: true,\n  },\n\n  weekStartsOn: {\n    type: Number,\n    default: 0,\n    validator: (v) => Number.isInteger(v) && v >= 0 && v <= 6,\n  },\n});\n\nconst emits = defineEmits([\n  /**\n     * Event fired when a date is selected\n     *\n     * @event select-date\n     * @type {Date}\n     */\n  'select-date',\n\n  /**\n     * Will focus the month and year picker\n     *\n     * @event focus-month-year-picker\n     */\n  'focus-month-year-picker',\n\n  /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n  'close-datepicker',\n\n  /**\n     * Will go to the next month\n     *\n     * @event go-to-next-month\n     */\n  'go-to-next-month',\n\n  /**\n     * Will go to the previous month\n     *\n     * @event go-to-prev-month\n     */\n  'go-to-prev-month',\n]);\n\nconst {\n  selectedDay,\n  weekDays,\n  dayAriaLabel,\n  setDayRef,\n  handleKeyDown,\n  focusFirstDay,\n  selectDay,\n} = useCalendar(props, emits);\n\ndefineExpose({\n  focusFirstDay,\n});\n</script>\n","<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-stack\n    class=\"d-datepicker\"\n    gap=\"400\"\n  >\n    <div class=\"d-datepicker__hd\">\n      <month-year-picker\n        ref=\"monthYearPicker\"\n        :selected-date=\"selectedDate\"\n        :min-date=\"minDate\"\n        :max-date=\"maxDate\"\n        :week-starts-on=\"weekStartsOn\"\n        @calendar-days=\"updateCalendarDays\"\n        @focus-first-day=\"$refs.calendar.focusFirstDay()\"\n        @focus-last-day=\"$refs.calendar.focusLastDay()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n      />\n    </div>\n    <div class=\"d-datepicker__bd\">\n      <calendar\n        ref=\"calendar\"\n        :calendar-days=\"calendarDays\"\n        :week-starts-on=\"weekStartsOn\"\n        @select-date=\"$emit('selected-date', $event)\"\n        @focus-month-year-picker=\"$refs.monthYearPicker.focusMonthYearPicker()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n        @go-to-next-month=\"$refs.monthYearPicker.goToNextMonth()\"\n        @go-to-prev-month=\"$refs.monthYearPicker.goToPrevMonth()\"\n      />\n    </div>\n  </dt-stack>\n</template>\n\n<script setup>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport { DtStack } from '@/components/stack';\nimport { returnFirstEl, warnIfUnmounted } from '@/common/utils';\nimport { onMounted, ref, getCurrentInstance } from 'vue';\n\ndefineProps({\n  /**\n     * Selected date\n     *\n     * @type {Date}\n     */\n  selectedDate: {\n    type: Date,\n    default: () => (new Date()),\n  },\n\n  /**\n     * Minimum selectable date. Days before this date will be disabled.\n     * Must be before or equal to maxDate when both are provided.\n     *\n     * @type {Date}\n     */\n  minDate: {\n    type: Date,\n    default: null,\n  },\n\n  /**\n     * Maximum selectable date. Days after this date will be disabled.\n     * Must be after or equal to minDate when both are provided.\n     *\n     * @type {Date}\n     */\n  maxDate: {\n    type: Date,\n    default: null,\n    validator: (value, props) => {\n      if (value && props.minDate && value < props.minDate) {\n        console.warn('[DtDatepicker]: maxDate must be after or equal to minDate.');\n        return false;\n      }\n      return true;\n    },\n  },\n\n  /**\n     * Day the week starts on. 0 = Sunday, 1 = Monday, ... 6 = Saturday.\n     *\n     * @values 0, 1, 2, 3, 4, 5, 6\n     */\n  weekStartsOn: {\n    type: Number,\n    default: 0,\n    validator: (v) => Number.isInteger(v) && v >= 0 && v <= 6,\n  },\n});\n\ndefineEmits([\n  /**\n     * Event fired when a date is selected\n     *\n     * @event selected-date\n     * @type {Date}\n     */\n  'selected-date',\n\n  /**\n     * Event fired when user presses the esc key\n     *\n     * @event close-datepicker\n     */\n  'close-datepicker',\n]);\n\nconst calendarDays = ref([]);\n\nfunction updateCalendarDays (days) {\n  calendarDays.value = days;\n}\n\nonMounted(() => {\n  const instance = getCurrentInstance();\n  warnIfUnmounted(returnFirstEl(instance.proxy.$el), 'datepicker');\n});\n</script>\n"],"mappings":"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"}

package/dist/datepicker-LVDRC6Lf.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"datepicker-LVDRC6Lf.js","names":["$refs","$emit"],"sources":["../components/datepicker/composables/useMonthYearPicker.js","../components/datepicker/modules/month-year-picker.vue","../components/datepicker/composables/useCalendar.js","../components/datepicker/modules/calendar.vue","../components/datepicker/datepicker.vue"],"sourcesContent":["import { computed, ref, watch } from 'vue';\nimport { addMonths, endOfMonth, getDate, getMonth, getYear, set, startOfDay, startOfMonth, subMonths } from 'date-fns';\nimport { formatMonth, getCalendarDays } from '../utils.js';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants';\nimport { returnFirstEl } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\nexport function useMonthYearPicker (props, emits) {\n  const selectMonth = ref(getMonth(props.selectedDate));\n  const selectYear = ref(getYear(props.selectedDate));\n  const highlightedDay = ref(null);\n  const focusPicker = ref(0);\n  const focusRefs = ref([]);\n  const i18n = new DialtoneLocalization();\n\n  const calendarDays = computed(() => {\n    return getCalendarDays(\n      selectMonth.value, selectYear.value, highlightedDay.value,\n      props.minDate, props.maxDate, props.weekStartsOn,\n    );\n  });\n\n  const isPrevMonthDisabled = computed(() => {\n    if (!props.minDate) return false;\n    const prevMonth = subMonths(new Date(selectYear.value, selectMonth.value, 1), 1);\n    return endOfMonth(prevMonth) < startOfDay(props.minDate);\n  });\n\n  const isNextMonthDisabled = computed(() => {\n    if (!props.maxDate) return false;\n    const nextMonth = addMonths(new Date(selectYear.value, selectMonth.value, 1), 1);\n    return startOfMonth(nextMonth) > startOfDay(props.maxDate);\n  });\n\n  const isPrevYearDisabled = computed(() => {\n    if (!props.minDate) return false;\n    const prevYearMonth = new Date(selectYear.value - 1, selectMonth.value, 1);\n    return endOfMonth(prevYearMonth) < startOfDay(props.minDate);\n  });\n\n  const isNextYearDisabled = computed(() => {\n    if (!props.maxDate) return false;\n    const nextYearMonth = new Date(selectYear.value + 1, selectMonth.value, 1);\n    return startOfMonth(nextYearMonth) > startOfDay(props.maxDate);\n  });\n\n  watch(selectMonth, () => {\n    highlightDay();\n    emits('calendar-days', calendarDays.value);\n  }, { immediate: true });\n\n  watch(selectYear, () => {\n    highlightDay();\n    emits('calendar-days', calendarDays.value);\n  }, { immediate: true });\n\n  watch(() => props.minDate, () => {\n    emits('calendar-days', calendarDays.value);\n  });\n\n  watch(() => props.maxDate, () => {\n    emits('calendar-days', calendarDays.value);\n  });\n\n  function formattedMonth (month) {\n    return formatMonth(month, INTL_MONTH_FORMAT, i18n.currentLocale);\n  }\n\n  function setDayRef (el) {\n    if (!focusRefs.value.includes(el)) {\n      focusRefs.value.push(el);\n    }\n  }\n\n  function focusMonthYearPicker () {\n    returnFirstEl(focusRefs.value[0].$el).focus();\n  }\n\n  function handleKeyDown (event) {\n    switch (event.key) {\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (focusPicker.value === 0) {\n          focusPicker.value = 3;\n          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        } else {\n          focusPicker.value--;\n          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        }\n        break;\n\n      case 'ArrowRight':\n        event.preventDefault();\n        if (focusPicker.value === 3) {\n          focusPicker.value = 0;\n          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        } else {\n          focusPicker.value++;\n          returnFirstEl(focusRefs.value[focusPicker.value].$el).focus();\n        }\n        break;\n\n      case 'ArrowDown':\n        event.preventDefault();\n        emits('focus-first-day');\n        break;\n\n      case 'Tab':\n        event.preventDefault();\n        emits('focus-first-day');\n        break;\n\n      case 'Escape':\n        emits('close-datepicker');\n        break;\n    }\n  }\n\n  function highlightDay () {\n    const year = getYear(props.selectedDate);\n    const month = getMonth(props.selectedDate);\n\n    if (year !== selectYear.value || month !== selectMonth.value) {\n      highlightedDay.value = null;\n    } else {\n      highlightedDay.value = getDate(props.selectedDate);\n    }\n  }\n\n  function changeMonth (value) {\n    if (value === -1 && isPrevMonthDisabled.value) return;\n    if (value === 1 && isNextMonthDisabled.value) return;\n\n    // Adjust year when changing from January to December or vice versa\n    if ((selectMonth.value === 0 && value === -1) || (selectMonth.value === 11 && value === 1)) {\n      selectYear.value += value;\n    }\n\n    // Calculate the new date by adding or subtracting months\n    const initialDate = set(props.selectedDate, { month: selectMonth.value, year: selectYear.value });\n    const newDate = value === 1 ? addMonths(initialDate, 1) : subMonths(initialDate, 1);\n\n    // Update the selected month\n    selectMonth.value = getMonth(newDate);\n  }\n\n  function changeYear (value) {\n    if (value === -1 && isPrevYearDisabled.value) return;\n    if (value === 1 && isNextYearDisabled.value) return;\n\n    selectYear.value = selectYear.value + value;\n  }\n\n  function goToNextMonth () {\n    changeMonth(1);\n  }\n\n  function goToPrevMonth () {\n    changeMonth(-1);\n  }\n\n  function previousYearAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_YEAR')} ${selectYear.value - 1}`;\n  }\n\n  function previousMonthAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_MONTH')} ${formattedMonth(selectMonth.value - 1)}`;\n  }\n\n  function nextYearAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_NEXT_YEAR')} ${selectYear.value + 1}`;\n  }\n\n  function nextMonthAriaLabel () {\n    return `${i18n.$t('DIALTONE_DATEPICKER_CHANGE_TO')} ${i18n.$t('DIALTONE_DATEPICKER_NEXT_MONTH')} ${formattedMonth(selectMonth.value + 1)}`;\n  }\n\n  return {\n    selectMonth,\n    selectYear,\n    formattedMonth,\n    setDayRef,\n    focusMonthYearPicker,\n    handleKeyDown,\n    changeMonth,\n    changeYear,\n    goToNextMonth,\n    goToPrevMonth,\n    isPrevMonthDisabled,\n    isNextMonthDisabled,\n    isPrevYearDisabled,\n    isNextYearDisabled,\n    previousYearAriaLabel,\n    previousMonthAriaLabel,\n    nextYearAriaLabel,\n    nextMonthAriaLabel,\n  };\n}\n","<template>\n  <dt-stack\n    class=\"d-datepicker__month-year\"\n    direction=\"row\"\n    gap=\"300\"\n  >\n    <dt-stack\n      as=\"nav\"\n      class=\"d-datepicker__nav\"\n      direction=\"row\"\n      gap=\"200\"\n    >\n      <dt-tooltip\n        :fallback-placements=\"['top-start', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_YEAR')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevYearButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"previousYearAriaLabel()\"\n            :circle=\"true\"\n            :disabled=\"isPrevYearDisabled\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeYear(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :fallback-placements=\"['top-start', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_PREVIOUS_MONTH')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"prevMonthButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"previousMonthAriaLabel()\"\n            :circle=\"true\"\n            :disabled=\"isPrevMonthDisabled\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeMonth(-1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-left\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n    <div\n      id=\"calendar-heading\"\n      class=\"d-datepicker__month-year-title\"\n    >\n      {{ formattedMonth(selectMonth) }}\n\n      {{ selectYear }}\n    </div>\n    <dt-stack\n      as=\"nav\"\n      class=\"d-datepicker__nav\"\n      direction=\"row\"\n      gap=\"200\"\n    >\n      <dt-tooltip\n        :fallback-placements=\"['top-end', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_NEXT_MONTH')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextMonthButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"nextMonthAriaLabel()\"\n            :circle=\"true\"\n            :disabled=\"isNextMonthDisabled\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeMonth(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevron-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n      <dt-tooltip\n        :fallback-placements=\"['top-end', 'auto']\"\n        :message=\"i18n.$t('DIALTONE_DATEPICKER_NEXT_YEAR')\"\n        placement=\"top\"\n      >\n        <template #anchor>\n          <dt-button\n            id=\"nextYearButton\"\n            :ref=\"el => { if (el) setDayRef(el) }\"\n            :aria-label=\"nextYearAriaLabel()\"\n            :circle=\"true\"\n            :disabled=\"isNextYearDisabled\"\n            class=\"d-datepicker__nav-btn\"\n            importance=\"clear\"\n            kind=\"muted\"\n            size=\"xs\"\n            type=\"button\"\n            @click=\"changeYear(1)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            <dt-icon-chevrons-right\n              size=\"200\"\n            />\n          </dt-button>\n        </template>\n      </dt-tooltip>\n    </dt-stack>\n  </dt-stack>\n</template>\n\n<script setup>\nimport {\n  DtIconChevronLeft,\n  DtIconChevronsLeft,\n  DtIconChevronRight,\n  DtIconChevronsRight,\n} from '@dialpad/dialtone-icons/vue3';\nimport { DtStack } from '@/components/stack';\nimport { DtButton } from '@/components/button';\nimport { DtTooltip } from '@/components/tooltip';\nimport { onMounted } from 'vue';\nimport { useMonthYearPicker } from '../composables/useMonthYearPicker.js';\nimport { DialtoneLocalization } from '@/localization';\n\nconst props = defineProps({\n  selectedDate: {\n    type: Date,\n    required: true,\n  },\n\n  minDate: {\n    type: Date,\n    default: null,\n  },\n\n  maxDate: {\n    type: Date,\n    default: null,\n  },\n\n  weekStartsOn: {\n    type: Number,\n    default: 0,\n    validator: (v) => Number.isInteger(v) && v >= 0 && v <= 6,\n  },\n});\n\nconst emits = defineEmits([\n  /**\n     * Will retrieve the calendar days of the given date\n     *\n     * @event calendar-days\n     * @type {Array}\n     */\n  'calendar-days',\n\n  /**\n     * Will focus first day in calendar\n     *\n     * @event focus-first-day\n     */\n  'focus-first-day',\n\n  /**\n     * Will focus last day in calendar\n     *\n     * @event focus-last-day\n     */\n  'focus-last-day',\n\n  /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n  'close-datepicker',\n]);\n\nconst i18n = new DialtoneLocalization();\n\nconst {\n  selectMonth,\n  selectYear,\n  formattedMonth,\n  setDayRef,\n  focusMonthYearPicker,\n  handleKeyDown,\n  changeMonth,\n  changeYear,\n  goToNextMonth,\n  goToPrevMonth,\n  isPrevMonthDisabled,\n  isNextMonthDisabled,\n  isPrevYearDisabled,\n  isNextYearDisabled,\n  previousYearAriaLabel,\n  previousMonthAriaLabel,\n  nextMonthAriaLabel,\n  nextYearAriaLabel,\n} = useMonthYearPicker(props, emits);\n\nonMounted(() => {\n  focusMonthYearPicker();\n});\n\ndefineExpose({\n  focusMonthYearPicker,\n  goToNextMonth,\n  goToPrevMonth,\n});\n</script>\n","import { computed, ref, watch, nextTick } from 'vue';\nimport { getWeekDayNames, calculateNextFocusDate, calculatePrevFocusDate, formatDate } from '../utils.js';\nimport { INTL_MONTH_FORMAT } from '../datepicker_constants.js';\nimport { returnFirstEl } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\nexport function useCalendar (props, emits) {\n  const selectedDay = ref(null);\n  const focusDay = ref(0);\n  const daysRef = ref([]);\n  const i18n = new DialtoneLocalization();\n\n  const weekDays = computed(() => {\n    return getWeekDayNames(props.locale, props.weekStartsOn);\n  });\n\n  watch(() => props.calendarDays, () => {\n    focusDay.value = 0;\n    daysRef.value = [];\n    selectedDay.value = null;\n  });\n\n  function dayAriaLabel (day) {\n    return i18n.$t('DIALTONE_DATEPICKER_SELECT_DAY') + ` ${formatDate(day.value, INTL_MONTH_FORMAT, i18n.currentLocale)}`;\n  }\n\n  function setDayRef (el, day) {\n    if (!daysRef.value.some(day => day.el === el) && !day.disabled) {\n      daysRef.value.push({ el, day });\n    }\n  }\n\n  function handleKeyDown (event) {\n    switch (event.key) {\n      case 'ArrowUp':\n        event.preventDefault();\n        focusDay.value -= 7;\n        try {\n          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n        } catch {\n          const prevFocusDate = calculatePrevFocusDate(daysRef.value[focusDay.value + 7].day.value);\n          emits('go-to-prev-month');\n\n          nextTick(() => {\n            returnFirstEl(daysRef.value[prevFocusDate - 1].el.$el).focus();\n            focusDay.value += prevFocusDate - 1;\n          });\n        }\n        break;\n\n      case 'ArrowDown':\n        event.preventDefault();\n        focusDay.value += 7;\n        try {\n          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n        } catch {\n          const nextFocusDate = calculateNextFocusDate(daysRef.value[focusDay.value - 7].day.value);\n          emits('go-to-next-month');\n\n          nextTick(() => {\n            returnFirstEl(daysRef.value[nextFocusDate - 1].el.$el).focus();\n            focusDay.value += nextFocusDate - 1;\n          });\n        }\n        break;\n\n      case 'ArrowLeft':\n        event.preventDefault();\n        if (focusDay.value > 0) {\n          focusDay.value -= 1;\n          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n        } else {\n          // if we are on month first day, jump to last day of prev month\n          emits('go-to-prev-month');\n          focusLastDay();\n        }\n        break;\n\n      case 'ArrowRight':\n        event.preventDefault();\n        if (focusDay.value < daysRef.value.length - 1) {\n          focusDay.value += 1;\n          returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n        } else {\n          // if we are on month last day, jump to first day of next month\n          emits('go-to-next-month');\n\n          focusFirstDay();\n        }\n        break;\n\n      case 'Tab':\n        event.preventDefault();\n        emits('focus-month-year-picker');\n        break;\n\n      case 'Escape':\n        emits('close-datepicker');\n        break;\n    }\n  }\n\n  function focusFirstDay () {\n    focusDay.value = 0;\n\n    nextTick(() => {\n      returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n    });\n  }\n\n  function focusLastDay () {\n    nextTick(() => {\n      focusDay.value = daysRef.value.length - 1;\n      returnFirstEl(daysRef.value[focusDay.value].el.$el).focus();\n    });\n  }\n\n  function selectDay (day) {\n    if (day.disabled) { return; }\n\n    // local selectedDay is updated when a day is selected\n    selectedDay.value = day.text;\n    emits('select-date', day.value);\n  }\n\n  return {\n    selectedDay,\n    weekDays,\n    dayAriaLabel,\n    setDayRef,\n    handleKeyDown,\n    focusFirstDay,\n    selectDay,\n  };\n}\n","<template>\n  <table\n    class=\"d-datepicker__calendar\"\n    aria-labelledby=\"calendar-heading\"\n  >\n    <thead>\n      <tr>\n        <th\n          v-for=\"day in weekDays\"\n          :key=\"day\"\n          scope=\"col\"\n          class=\"d-datepicker__cell d-datepicker__cell--header\"\n        >\n          <span\n            class=\"d-datepicker__weekday\"\n            :title=\"day\"\n            :aria-label=\"day\"\n          > {{ day }}</span>\n        </th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr\n        v-for=\"(week, indexWeek) in calendarDays\"\n        :key=\"indexWeek\"\n      >\n        <td\n          v-for=\"(day, indexDays) in week.days\"\n          :key=\"indexWeek + indexDays\"\n          class=\"d-datepicker__cell\"\n          role=\"listbox\"\n        >\n          <dt-button\n            :ref=\"el => { if (el) setDayRef(el, day) }\"\n            class=\"d-datepicker__day\"\n            :circle=\"true\"\n            size=\"sm\"\n            importance=\"clear\"\n            :disabled=\"day.disabled\"\n            :class=\"{\n              'd-datepicker__day--disabled': day.disabled,\n              'd-datepicker__day--selected': selectedDay\n                ? ((day.text === selectedDay) && !day.disabled)\n                : day.selected,\n            }\"\n            type=\"button\"\n            :aria-selected=\"!!selectedDay ? ((day.text === selectedDay) && !day.disabled) : day.selected\"\n            :aria-label=\"dayAriaLabel(day)\"\n            role=\"option\"\n            @click=\"selectDay(day)\"\n            @keydown=\"handleKeyDown($event)\"\n          >\n            {{ day.text }}\n          </dt-button>\n        </td>\n      </tr>\n    </tbody>\n  </table>\n</template>\n\n<script setup>\nimport { useCalendar } from '../composables/useCalendar.js';\nimport { DtButton } from '@/components/button';\n\nconst props = defineProps({\n  calendarDays: {\n    type: Array,\n    required: true,\n  },\n\n  weekStartsOn: {\n    type: Number,\n    default: 0,\n    validator: (v) => Number.isInteger(v) && v >= 0 && v <= 6,\n  },\n});\n\nconst emits = defineEmits([\n  /**\n     * Event fired when a date is selected\n     *\n     * @event select-date\n     * @type {Date}\n     */\n  'select-date',\n\n  /**\n     * Will focus the month and year picker\n     *\n     * @event focus-month-year-picker\n     */\n  'focus-month-year-picker',\n\n  /**\n     * Will close the datepicker\n     *\n     * @event close-datepicker\n     */\n  'close-datepicker',\n\n  /**\n     * Will go to the next month\n     *\n     * @event go-to-next-month\n     */\n  'go-to-next-month',\n\n  /**\n     * Will go to the previous month\n     *\n     * @event go-to-prev-month\n     */\n  'go-to-prev-month',\n]);\n\nconst {\n  selectedDay,\n  weekDays,\n  dayAriaLabel,\n  setDayRef,\n  handleKeyDown,\n  focusFirstDay,\n  selectDay,\n} = useCalendar(props, emits);\n\ndefineExpose({\n  focusFirstDay,\n});\n</script>\n","<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-stack\n    class=\"d-datepicker\"\n    gap=\"400\"\n  >\n    <div class=\"d-datepicker__hd\">\n      <month-year-picker\n        ref=\"monthYearPicker\"\n        :selected-date=\"selectedDate\"\n        :min-date=\"minDate\"\n        :max-date=\"maxDate\"\n        :week-starts-on=\"weekStartsOn\"\n        @calendar-days=\"updateCalendarDays\"\n        @focus-first-day=\"$refs.calendar.focusFirstDay()\"\n        @focus-last-day=\"$refs.calendar.focusLastDay()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n      />\n    </div>\n    <div class=\"d-datepicker__bd\">\n      <calendar\n        ref=\"calendar\"\n        :calendar-days=\"calendarDays\"\n        :week-starts-on=\"weekStartsOn\"\n        @select-date=\"$emit('selected-date', $event)\"\n        @focus-month-year-picker=\"$refs.monthYearPicker.focusMonthYearPicker()\"\n        @close-datepicker=\"$emit('close-datepicker')\"\n        @go-to-next-month=\"$refs.monthYearPicker.goToNextMonth()\"\n        @go-to-prev-month=\"$refs.monthYearPicker.goToPrevMonth()\"\n      />\n    </div>\n  </dt-stack>\n</template>\n\n<script setup>\nimport MonthYearPicker from './modules/month-year-picker.vue';\nimport Calendar from './modules/calendar.vue';\nimport { DtStack } from '@/components/stack';\nimport { returnFirstEl, warnIfUnmounted } from '@/common/utils';\nimport { onMounted, ref, getCurrentInstance } from 'vue';\n\ndefineProps({\n  /**\n     * Selected date\n     *\n     * @type {Date}\n     */\n  selectedDate: {\n    type: Date,\n    default: () => (new Date()),\n  },\n\n  /**\n     * Minimum selectable date. Days before this date will be disabled.\n     * Must be before or equal to maxDate when both are provided.\n     *\n     * @type {Date}\n     */\n  minDate: {\n    type: Date,\n    default: null,\n  },\n\n  /**\n     * Maximum selectable date. Days after this date will be disabled.\n     * Must be after or equal to minDate when both are provided.\n     *\n     * @type {Date}\n     */\n  maxDate: {\n    type: Date,\n    default: null,\n    validator: (value, props) => {\n      if (value && props.minDate && value < props.minDate) {\n        console.warn('[DtDatepicker]: maxDate must be after or equal to minDate.');\n        return false;\n      }\n      return true;\n    },\n  },\n\n  /**\n     * Day the week starts on. 0 = Sunday, 1 = Monday, ... 6 = Saturday.\n     *\n     * @values 0, 1, 2, 3, 4, 5, 6\n     */\n  weekStartsOn: {\n    type: Number,\n    default: 0,\n    validator: (v) => Number.isInteger(v) && v >= 0 && v <= 6,\n  },\n});\n\ndefineEmits([\n  /**\n     * Event fired when a date is selected\n     *\n     * @event selected-date\n     * @type {Date}\n     */\n  'selected-date',\n\n  /**\n     * Event fired when user presses the esc key\n     *\n     * @event close-datepicker\n     */\n  'close-datepicker',\n]);\n\nconst calendarDays = ref([]);\n\nfunction updateCalendarDays (days) {\n  calendarDays.value = days;\n}\n\nonMounted(() => {\n  const instance = getCurrentInstance();\n  warnIfUnmounted(returnFirstEl(instance.proxy.$el), 'datepicker');\n});\n</script>\n"],"mappings":"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"}

package/dist/emoji_picker-Cl-T4BXK.cjs

@@ -1,2 +0,0 @@
-require(`./chunk-Bmb41Sf3.cjs`);const e=require(`./common/utils/index.cjs`),t=require(`./localization/index.cjs`),n=require(`./lib/button/button.cjs`),r=require(`./lib/tooltip/tooltip.cjs`),i=require(`./lib/input/input.cjs`),a=require(`./lib/tab/tab-group.cjs`),o=require(`./lib/tab/tab.cjs`),s=require(`./lib/emoji-picker/emoji-picker-constants.cjs`);let c=require(`vue`),l=require(`@dialpad/dialtone-icons/vue3`),u=require(`@dialpad/dialtone-emojis`);var d={class:`d-emoji-picker__search d-emoji-picker__alignment`},f={__name:`emoji_search`,props:{searchPlaceholderLabel:{type:String,required:!0},modelValue:{type:String,default:``}},emits:[`update:modelValue`,`focus-emoji-selector`,`focus-tabset`,`select-first-emoji`],setup(e,{expose:t,emit:r}){let a=r,o=(0,c.ref)(null);function s(){a(`update:modelValue`,``),u()}function u(){o.value.focus()}return(0,c.onMounted)(()=>{u()}),t({focusSearchInput:u}),(t,r)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,d,[(0,c.createVNode)((0,c.unref)(i.default),{id:`searchInput`,ref_key:`searchInput`,ref:o,placeholder:e.searchPlaceholderLabel,"model-value":e.modelValue,"onUpdate:modelValue":r[0]||(r[0]=e=>t.$emit(`update:modelValue`,e)),onKeydown:[r[1]||(r[1]=(0,c.withKeys)(e=>t.$emit(`focus-tabset`),[`up`])),r[2]||(r[2]=(0,c.withKeys)((0,c.withModifiers)(e=>t.$emit(`focus-emoji-selector`),[`prevent`]),[`down`])),r[3]||(r[3]=(0,c.withKeys)(e=>t.$emit(`select-first-emoji`),[`enter`]))]},(0,c.createSlots)({leftIcon:(0,c.withCtx)(()=>[(0,c.createVNode)((0,c.unref)(l.DtIconSearch),{size:`200`})]),_:2},[e.modelValue.length>0?{name:`rightIcon`,fn:(0,c.withCtx)(()=>[(0,c.createVNode)((0,c.unref)(n.default),{importance:`clear`,size:`xs`,class:`d-emoji-picker__search-x-button`,circle:``,kind:`muted`,onClick:s},{icon:(0,c.withCtx)(()=>[(0,c.createVNode)((0,c.unref)(l.DtIconClose),{size:`200`})]),_:1})]),key:`0`}:void 0]),1032,[`placeholder`,`model-value`])]))}},p={class:`d-emoji-picker__tabset`},m={__name:`emoji_tabset`,props:{showRecentlyUsedTab:{type:Boolean,default:!1},showCustomEmojisTab:{type:Boolean,default:!1},scrollIntoTab:{type:Number,required:!0},emojiFilter:{type:String,default:``},tabSetLabels:{type:Array,required:!0}},emits:[`selected-tabset`,`focus-search-input`,`focus-skin-selector`],setup(t,{expose:n,emit:r}){let i=t,s=r,u=[{label:i.tabSetLabels[0],icon:l.DtIconClock},{label:i.tabSetLabels[1],icon:l.DtIconSatisfied},{label:i.tabSetLabels[2],icon:l.DtIconLivingThing},{label:i.tabSetLabels[3],icon:l.DtIconFood},{label:i.tabSetLabels[4],icon:l.DtIconObject},{label:i.tabSetLabels[5],icon:l.DtIconTransportation},{label:i.tabSetLabels[6],icon:l.DtIconLightbulb},{label:i.tabSetLabels[7],icon:l.DtIconHeart},{label:i.tabSetLabels[8],icon:l.DtIconFlag},{label:i.tabSetLabels[9],icon:l.DtIconDialpadStar}],d=(0,c.computed)(()=>{let e=i.showRecentlyUsedTab?u:u.slice(1);return i.showCustomEmojisTab||e.pop(),e.map((e,t)=>({...e,id:(t+1).toString(),panelId:(t+1).toString()}))}),f=(0,c.computed)(()=>i.emojiFilter.length>0),m=(0,c.ref)(`1`),h=(0,c.ref)([]);(0,c.watch)(()=>i.scrollIntoTab,()=>{f.value||(m.value=(i.scrollIntoTab+1).toString())}),(0,c.watch)(f,()=>{f.value&&(m.value=null)});function g(e){let t=parseInt(e);m.value=e,s(`selected-tabset`,t)}function _(t){h.value.push(e.returnFirstEl(t.$el))}function v(){h.value[0].focus()}function y(e,t){e.key===`Enter`&&(g(t),h.value[t-1].blur()),e.key===`Tab`&&(e.preventDefault(),e.shiftKey?s(`focus-skin-selector`):s(`focus-search-input`)),e.key===`ArrowDown`&&s(`focus-search-input`)}return n({focusTabset:v}),(e,t)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,p,[(0,c.createVNode)((0,c.unref)(a.default),{selected:m.value,size:`sm`,"tab-list-class":`d-emoji-picker__tabset-list`},{tabs:(0,c.withCtx)(()=>[((0,c.openBlock)(!0),(0,c.createElementBlock)(c.Fragment,null,(0,c.renderList)(d.value,(e,t)=>((0,c.openBlock)(),(0,c.createBlock)((0,c.unref)(o.default),{id:e.id,key:e.id,ref_for:!0,ref:e=>{e&&_(e)},label:e.label,"panel-id":e.panelId,tabindex:t+1,"aria-controls":`d-emoji-picker-list`,onKeydown:t=>y(t,e.id),onClickCapture:(0,c.withModifiers)(t=>g(e.id),[`stop`])},{default:(0,c.withCtx)(()=>[((0,c.openBlock)(),(0,c.createBlock)((0,c.resolveDynamicComponent)(e.icon),{size:`400`}))]),_:2},1032,[`id`,`label`,`panel-id`,`tabindex`,`onKeydown`,`onClickCapture`]))),128))]),_:1},8,[`selected`])]))}};function h(){let e=(0,c.ref)([]),t=(0,c.ref)([]),n=(0,c.ref)(!1),r=(0,c.ref)(!0);function i(t,n){d(t,n-1)||(e.value[t-1]?d(t-1,e.value[t-1].length-1):d(e.value.length-1,e.value[e.value.length-1].length-1))}function a(e,t){d(e,t+1)||d(e+1,0)||d(0,0)}function o(e,n){d(0,n-1)||d(0,t.value.length-1)}function l(e,t){d(0,t+1)||d(0,0)}function u(e,t,r){n.value?e===`left`?o(t,r):e===`right`&&l(t,r):e===`left`?i(t,r):e===`right`&&a(t,r)}function d(r,i){let a=n.value?t.value?.[i]:e.value?.[r]?.[i];return a?(a.focus(),!0):!1}function f(t,n,r){e.value[n]||(e.value[n]=[]),e.value[n][r]=t}function p(e,n){t.value[n]=e}function m(e,n){if(r.value=!1,e===s.ARROW_KEYS.ARROW_UP){let e=n%9;if(!d(0,n-9)){let n=t.value.length-t.value.length%9+e;d(0,n),d(0,n)||d(0,t.value.length-1)}}if(e===s.ARROW_KEYS.ARROW_DOWN&&!d(0,n+9)){let e=n%9;t.value?.[n+(9-e)]?d(0,t.value.length-1):d(0,e)}e===s.ARROW_KEYS.ARROW_LEFT&&u(`left`,0,n),e===s.ARROW_KEYS.ARROW_RIGHT&&u(`right`,0,n)}function h(t,n,r){if(t===`ArrowUp`){let t=r%9;if(n===0){let n=9-e.value[e.value.length-1].length%9,r=e.value[e.value.length-1].length+n-(9-t);d(e.value.length-1,r)||d(e.value.length-1,e.value[e.value.length-1].length-1);return}if(!d(n,r-9)){let r=n-1<0?0:n-1,i=e.value[r].length;d(r,i-i%9+t)||d(n-1,e.value[n-1].length-1)}}if(t===`ArrowDown`&&!d(n,r+9)){let t=r%9;e.value?.[n]?.[r+(9-t)]?d(n,e.value[n].length-1):d(n+1,t)||d(0,t)||d(0,e.value[0].length-1)}t===`ArrowLeft`&&u(`left`,n,r),t===`ArrowRight`&&u(`right`,n,r)}return{emojiFilteredRefs:t,isFiltering:n,hoverFirstEmoji:r,setEmojiRef:f,setFilteredRef:p,focusEmoji:d,handleArrowNavigationFiltered:m,handleArrowNavigation:h}}var g={class:`d-emoji-picker__selector`},_={key:0,class:`d-emoji-picker__search-label d-emoji-picker__alignment`},v={key:0},y={class:`d-emoji-picker__tab`},b=[`aria-label`,`onClick`,`onFocusin`,`onMouseover`,`onKeydown`],x=[`alt`,`aria-label`,`title`,`src`],S={key:2,class:`d-emoji-picker__alignment`},C={class:`d-emoji-picker__tab`,"data-qa":`filtered-emojis`},w=[`aria-label`,`onClick`,`onFocusin`,`onMouseover`,`onKeydown`],T=[`alt`,`aria-label`,`title`,`src`],E={__name:`emoji_selector`,props:{emojiFilter:{type:String,default:``},skinTone:{type:String,required:!0},tabsetLabels:{type:Array,required:!0},selectedTabset:{type:Object,required:!0},searchResultsLabel:{type:String,required:!0},searchNoResultsLabel:{type:String,required:!0},recentlyUsedEmojis:{type:Array,default:()=>[]},customEmojis:{type:Array,default:()=>[]}},emits:[`highlighted-emoji`,`selected-emoji`,`scroll-into-tab`,`scroll-bottom-reached`,`focus-skin-selector`,`focus-search-input`],setup(e,{expose:t,emit:n}){let r=e,i=n,{emojiFilteredRefs:a,isFiltering:o,hoverFirstEmoji:l,setEmojiRef:d,setFilteredRef:f,focusEmoji:p,handleArrowNavigationFiltered:m,handleArrowNavigation:E}=h(),D=(0,c.ref)(null),O=(0,c.ref)(null),k=(0,c.ref)(null),A=[`Recently used`,`People`,`Nature`,`Food`,`Activity`,`Travel`,`Objects`,`Symbols`,`Flags`,`Custom`],j=(0,c.computed)(()=>{let e=r.tabsetLabels.map(e=>({label:e,ref:(0,c.ref)(null)}));return r.recentlyUsedEmojis&&!r.recentlyUsedEmojis.length&&(e=r.tabsetLabels.slice(1).map(e=>({label:e,ref:(0,c.ref)(null)}))),r.customEmojis&&!r.customEmojis.length&&e.pop(),e}),M=(0,c.ref)(j.value[0].label),N=(0,c.computed)(()=>{let e=r.recentlyUsedEmojis.length?A.slice():A.slice(1);return r.customEmojis&&!r.customEmojis.length&&e.pop(),e}),P=(0,c.ref)([]),F=(0,c.computed)(()=>[...u.emojisGrouped[`People${r.skinTone}`],...u.emojisGrouped.Nature,...u.emojisGrouped.Food,...u.emojisGrouped[`Activity${r.skinTone}`],...u.emojisGrouped.Travel,...u.emojisGrouped[`Objects${r.skinTone}`],...u.emojisGrouped.Symbols,...u.emojisGrouped.Flags]),I=B(()=>{a.value=[],z()}),L=()=>{let e=O.value;e.scrollTop+e.clientHeight>=e.scrollHeight&&i(`scroll-bottom-reached`)};(0,c.watch)(F,()=>{z()},{immediate:!0}),(0,c.watch)(()=>r.recentlyUsedEmojis,()=>{u.emojisGrouped[`Recently used`]=r.recentlyUsedEmojis},{immediate:!0}),(0,c.watch)(()=>r.customEmojis,()=>{u.emojisGrouped.Custom=r.customEmojis},{immediate:!0}),(0,c.watch)(()=>r.emojiFilter,()=>{W(),r.emojiFilter?o.value=!0:(o.value=!1,X(null)),I()}),(0,c.watch)(()=>r.selectedTabset,e=>{U(e.tabId)},{deep:!0});function R(e,t=!1){l.value=t,i(`highlighted-emoji`,e)}function z(){let e=r.emojiFilter.toLowerCase();P.value=F.value.filter(t=>{let n=t.name.toLowerCase().includes(e),r=t.keywords.some(t=>t.toLowerCase().includes(e));return n||r}),(0,c.nextTick)(()=>{e&&R(P.value[0],!0)})}function B(e,t=300){let n;return(...r)=>{clearTimeout(n),n=setTimeout(()=>e(...r),t)}}function V(e){return e.date_added?e.image:s.CDN_URL+e.unicode_character+`.png`}function H(e){e.target.parentNode.style.display=`none`}function U(e,t=!0){let n=j.value[e-1].ref.value[0];(0,c.nextTick)(()=>{let r=O.value;r.scrollTop=e===1?0:n.offsetTop-15,t&&p(e-1,0)})}function W(){let e=O.value;e.scrollTop=0}function G(){O.value.addEventListener(`scroll`,L)}function K(){k.value=new IntersectionObserver(async e=>{e.forEach(e=>{let{target:t}=e,n=parseInt(t.dataset.index);e.isIntersecting&&t.offsetTop<=D.value.offsetTop+50?(M.value=j.value[n-1]?.label??j.value[0]?.label,i(`scroll-into-tab`,n-1)):e.boundingClientRect.bottom<=D.value?.getBoundingClientRect().bottom?(i(`scroll-into-tab`,n),M.value=j.value[n]?.label):n===1&&(i(`scroll-into-tab`,n),M.value=j.value[0]?.label)})}),k.value.observe(D.value),Array.from(O.value.children).forEach((e,t)=>{k.value.observe(e),e.dataset.index=t})}let q=(e,t,n)=>{if(e.preventDefault(),Object.values(s.ARROW_KEYS).includes(e.key)){m(e.key,t);return}switch(e.key){case`Tab`:i(`focus-skin-selector`);break;case`Enter`:Y(n,e);break;default:break}},J=(e,t,n,r)=>{if(e.preventDefault(),Object.values(s.ARROW_KEYS).includes(e.key)){E(e.key,t,n);return}switch(e.key){case`Tab`:e.shiftKey?p(t,0)&&t>0?U(t,!0):(U(1,!1),i(`focus-search-input`)):p(t+1,0)?U(t+1+1,!1):i(`focus-skin-selector`);break;case`Enter`:Y(r,e);break;default:break}};function Y(e,t){i(`selected-emoji`,{...e,shift_key:t.shiftKey})}function X(e){i(`highlighted-emoji`,e)}function Z(){p(0,0)}function Q(){U(N.value.length,!0)}return(0,c.onMounted)(()=>{K(),G()}),(0,c.onBeforeUnmount)(()=>{k.value.disconnect(),O.value.removeEventListener(`scroll`,L)}),t({focusEmojiSelector:Z,focusLastEmoji:Q}),(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,g,[(0,c.createElementVNode)(`div`,{id:`d-emoji-picker-list`,ref_key:`listRef`,ref:O,class:`d-emoji-picker__list`},[e.emojiFilter?((0,c.openBlock)(),(0,c.createElementBlock)(`p`,_,(0,c.toDisplayString)(P.value.length>0?e.searchResultsLabel:e.searchNoResultsLabel),1)):((0,c.openBlock)(),(0,c.createElementBlock)(`div`,{key:1,ref_key:`tabCategoryRef`,ref:D,class:`d-emoji-picker__category d-emoji-picker__alignment`},[(0,c.createElementVNode)(`p`,null,(0,c.toDisplayString)(M.value),1)],512)),((0,c.openBlock)(!0),(0,c.createElementBlock)(c.Fragment,null,(0,c.renderList)(j.value,(t,r)=>(0,c.withDirectives)(((0,c.openBlock)(),(0,c.createElementBlock)(`div`,{key:r,ref_for:!0,ref:t.ref,class:`d-emoji-picker__alignment`},[r?((0,c.openBlock)(),(0,c.createElementBlock)(`p`,v,(0,c.toDisplayString)(t.label),1)):(0,c.createCommentVNode)(``,!0),(0,c.createElementVNode)(`div`,y,[((0,c.openBlock)(!0),(0,c.createElementBlock)(c.Fragment,null,(0,c.renderList)((0,c.unref)(u.emojisGrouped)[N.value[r]+e.skinTone]?(0,c.unref)(u.emojisGrouped)[N.value[r]+e.skinTone]:(0,c.unref)(u.emojisGrouped)[N.value[r]],(e,t)=>((0,c.openBlock)(),(0,c.createElementBlock)(`button`,{key:e.shortname,ref_for:!0,ref:e=>{e&&(0,c.unref)(d)(e,r,t)},type:`button`,"aria-label":e.name,onClick:t=>Y(e,t),onFocusin:t=>X(e),onFocusout:n[0]||(n[0]=e=>X(null)),onMouseover:t=>X(e),onMouseleave:n[1]||(n[1]=e=>X(null)),onKeydown:n=>J(n,r,t,e)},[(0,c.createElementVNode)(`img`,{class:`d-icon d-icon--size-500`,alt:e.name,"aria-label":e.name,title:e.name,src:V(e),onError:H},null,40,x)],40,b))),128))])])),[[c.vShow,!e.emojiFilter]])),128)),e.emojiFilter?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,S,[(0,c.createElementVNode)(`div`,C,[((0,c.openBlock)(!0),(0,c.createElementBlock)(c.Fragment,null,(0,c.renderList)(P.value,(e,t)=>((0,c.openBlock)(),(0,c.createElementBlock)(`button`,{key:e.shortname,ref_for:!0,ref:e=>{e&&(0,c.unref)(f)(e,t)},type:`button`,"aria-label":e.name,class:(0,c.normalizeClass)({"hover-emoji":t===0&&(0,c.unref)(l)}),onClick:t=>Y(e,t),onFocusin:t=>X(e),onFocusout:n[2]||(n[2]=e=>X(null)),onMouseover:t=>R(e),onMouseleave:n[3]||(n[3]=e=>R(null)),onKeydown:n=>q(n,t,e)},[(0,c.createElementVNode)(`img`,{class:`d-icon d-icon--size-500`,alt:e.name,"aria-label":e.name,title:e.name,src:`${(0,c.unref)(s.CDN_URL)+e.unicode_character}.png`},null,8,T)],42,w))),128))])])):(0,c.createCommentVNode)(``,!0)],512)]))}},D={"data-qa":`skin-selector`},O={class:`d-emoji-picker__skin-list`},k=[`onKeydown`,`onClick`],A=[`alt`,`aria-label`,`title`,`src`],j={class:`d-emoji-picker__skin-selected`},M=[`aria-label`],N=[`alt`,`aria-label`,`title`,`src`],P={__name:`emoji_skin_selector`,props:{skinTone:{type:String,required:!0},isHovering:{type:Boolean,default:!1},skinSelectorButtonTooltipLabel:{type:String,required:!0}},emits:[`skin-tone`,`focus-tabset`,`focus-last-emoji`],setup(e,{expose:t,emit:n}){let i=e,a=n,o=[{name:`:wave_tone1:`,unicode_output:`1f44b-1f3fb`,skinTone:s.EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,skinCode:`_tone1`},{name:`:wave_tone2:`,unicode_output:`1f44b-1f3fc`,skinTone:s.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,skinCode:`_tone2`},{name:`:wave_tone3:`,unicode_output:`1f44b-1f3fd`,skinTone:s.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,skinCode:`_tone3`},{name:`:wave_tone4:`,unicode_output:`1f44b-1f3fe`,skinTone:s.EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,skinCode:`_tone4`},{name:`:wave_tone5:`,unicode_output:`1f44b-1f3ff`,skinTone:s.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,skinCode:`_tone5`},{name:`:wave:`,unicode_output:`1f44b`,skinTone:s.EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,skinCode:``}],l=(0,c.ref)(!1),u=(0,c.ref)(null),d=(0,c.ref)([]);(0,c.watchEffect)(()=>i.isHovering&&(l.value=!1));let f=(0,c.computed)(()=>o.find(e=>e.skinTone===i.skinTone)),p=(0,c.ref)(f.value);(0,c.watchEffect)(()=>f.value&&(p.value=f.value));function m(e){d.value.push(e)}function h(){u.value.focus()}function g(e){p.value=e,l.value=!1,a(`skin-tone`,e.skinTone),(0,c.nextTick)(()=>h())}let _=(e,t,n)=>{e.preventDefault(),e.key===`ArrowLeft`&&(n===0&&d.value[d.value.length-1]?.focus(),d.value[n-1]?.focus()),e.key===`ArrowRight`&&d.value[n+1]?.focus(),e.key===`Enter`&&(t?g(t):v()),e.key===`Tab`&&(e.shiftKey?a(`focus-last-emoji`):a(`focus-tabset`))};function v(){l.value=!l.value,(0,c.nextTick)(()=>d.value[0].focus())}return t({focusSkinSelector:h}),(t,n)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,D,[(0,c.withDirectives)((0,c.createElementVNode)(`div`,O,[((0,c.openBlock)(),(0,c.createElementBlock)(c.Fragment,null,(0,c.renderList)(o,(e,t)=>(0,c.createElementVNode)(`button`,{ref_for:!0,ref:e=>{e&&m(e)},key:e.name,class:(0,c.normalizeClass)({selected:p.value.skinCode===e.skinCode}),onKeydown:n=>_(n,e,t),onClick:t=>g(e)},[(0,c.createElementVNode)(`img`,{class:`d-icon d-icon--size-500`,alt:e.name,"aria-label":e.name,title:e.name,src:`${(0,c.unref)(s.CDN_URL)+e.unicode_output}.png`},null,8,A)],42,k)),64))],512),[[c.vShow,l.value]]),(0,c.withDirectives)((0,c.createElementVNode)(`div`,j,[(0,c.createVNode)((0,c.unref)(r.default),{placement:`top-end`},{anchor:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`button`,{ref_key:`skinSelectorRef`,ref:u,"aria-label":e.skinSelectorButtonTooltipLabel,tabindex:`-1`,onClick:v,onKeydown:n[0]||(n[0]=e=>_(e))},[(0,c.createElementVNode)(`img`,{class:`d-icon d-icon--size-500`,alt:p.value.name,"aria-label":p.value.name,title:p.value.name,src:`${(0,c.unref)(s.CDN_URL)+p.value.unicode_output}.png`},null,8,N)],40,M)]),default:(0,c.withCtx)(()=>[(0,c.createTextVNode)((0,c.toDisplayString)(e.skinSelectorButtonTooltipLabel)+` `,1)]),_:1})],512),[[c.vShow,!l.value]])]))}},F={class:`d-emoji-picker__data`},I=[`alt`,`aria-label`,`title`,`src`],L={__name:`emoji_description`,props:{emoji:{type:Object,default:null}},setup(e){function t(e){return e.date_added?e.image:`${s.CDN_URL+e.unicode_character}.png`}return(n,r)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,F,[e.emoji?((0,c.openBlock)(),(0,c.createElementBlock)(`img`,{key:0,class:`d-icon d-icon--size-500`,alt:e.emoji.name,"aria-label":e.emoji.name,title:e.emoji.name,src:t(e.emoji)},null,8,I)):(0,c.createCommentVNode)(``,!0),(0,c.createElementVNode)(`div`,null,(0,c.toDisplayString)(e.emoji?.name),1)]))}},R={class:`d-emoji-picker`},z={class:`d-emoji-picker--header`},B={class:`d-emoji-picker--body`},V={class:`d-emoji-picker--footer`},H={__name:`emoji_picker`,props:{recentlyUsedEmojis:{type:Array,default:()=>[]},customEmojis:{type:Array},skinTone:{type:String,default:`Default`},searchQuery:{type:String,default:``},showSearch:{type:Boolean,default:!0},showAddEmojiButton:{type:Boolean,default:!1}},emits:[`selected-emoji`,`scroll-bottom-reached`,`skin-tone`,`close`,`add-emoji`],setup(e,{emit:r}){let i=e,a=r,o=(0,c.ref)(i.searchQuery.value),s=(0,c.ref)(null),l=(0,c.ref)({}),u=(0,c.ref)(0),d=(0,c.computed)(()=>i.recentlyUsedEmojis?.length>0),p=(0,c.computed)(()=>i.customEmojis?.length>0),h=new t.DialtoneLocalization,g=[h.$t(`DIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL`),h.$t(`DIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL`),h.$t(`DIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL`),h.$t(`DIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL`),h.$t(`DIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL`),h.$t(`DIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL`),h.$t(`DIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL`),h.$t(`DIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL`),h.$t(`DIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL`),h.$t(`DIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL`)],_=h.$t(`DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL`),v=h.$t(`DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL`),y=h.$t(`DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL`),b=h.$t(`DIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL`),x=h.$t(`DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL`);(0,c.watch)(()=>i.searchQuery,e=>{o.value=e});function S(e){o.value=``,l.value={...l.value,tabId:e}}function C(e){u.value=e}function w(e){s.value=e}return(t,r)=>((0,c.openBlock)(),(0,c.createElementBlock)(`div`,R,[(0,c.createElementVNode)(`div`,z,[(0,c.createVNode)(m,{ref:`tabsetRef`,"emoji-filter":o.value,"show-custom-emojis-tab":p.value,"show-recently-used-tab":d.value,"scroll-into-tab":u.value,"tab-set-labels":g,onFocusSkinSelector:r[0]||(r[0]=e=>t.$refs.skinSelectorRef.focusSkinSelector()),onFocusSearchInput:r[1]||(r[1]=n=>e.showSearch?t.$refs.searchInputRef.focusSearchInput():t.$refs.emojiSelectorRef.focusEmojiSelector()),onSelectedTabset:S,onKeydown:r[2]||(r[2]=(0,c.withKeys)(e=>a(`close`),[`esc`]))},null,8,[`emoji-filter`,`show-custom-emojis-tab`,`show-recently-used-tab`,`scroll-into-tab`])]),(0,c.createElementVNode)(`div`,B,[e.showSearch?((0,c.openBlock)(),(0,c.createBlock)(f,{key:0,ref:`searchInputRef`,modelValue:o.value,"onUpdate:modelValue":r[3]||(r[3]=e=>o.value=e),"search-placeholder-label":(0,c.unref)(_),onSelectFirstEmoji:r[4]||(r[4]=e=>a(`selected-emoji`,s.value)),onFocusTabset:r[5]||(r[5]=e=>t.$refs.tabsetRef.focusTabset()),onFocusEmojiSelector:r[6]||(r[6]=e=>t.$refs.emojiSelectorRef.focusEmojiSelector()),onKeydown:r[7]||(r[7]=(0,c.withKeys)(e=>a(`close`),[`esc`]))},null,8,[`modelValue`,`search-placeholder-label`])):(0,c.createCommentVNode)(``,!0),(0,c.createVNode)(E,{ref:`emojiSelectorRef`,"emoji-filter":o.value,"skin-tone":e.skinTone,"tabset-labels":g,"search-results-label":(0,c.unref)(v),"search-no-results-label":(0,c.unref)(y),"recently-used-emojis":e.recentlyUsedEmojis,"custom-emojis":e.customEmojis,"selected-tabset":l.value,onScrollIntoTab:C,onHighlightedEmoji:w,onSelectedEmoji:r[8]||(r[8]=e=>a(`selected-emoji`,e)),onFocusSkinSelector:r[9]||(r[9]=e=>t.$refs.skinSelectorRef.focusSkinSelector()),onFocusSearchInput:r[10]||(r[10]=n=>e.showSearch?t.$refs.searchInputRef.focusSearchInput():t.$refs.tabsetRef.focusTabset()),onKeydown:r[11]||(r[11]=(0,c.withKeys)(e=>a(`close`),[`esc`])),onScrollBottomReached:r[12]||(r[12]=e=>a(`scroll-bottom-reached`))},null,8,[`emoji-filter`,`skin-tone`,`search-results-label`,`search-no-results-label`,`recently-used-emojis`,`custom-emojis`,`selected-tabset`])]),(0,c.createElementVNode)(`div`,V,[e.showAddEmojiButton&&!s.value?((0,c.openBlock)(),(0,c.createBlock)((0,c.unref)(n.default),{key:0,importance:`outlined`,"aria-label":(0,c.unref)(x),class:`d-emoji-picker__add-emoji`,onClick:r[13]||(r[13]=e=>a(`add-emoji`))},{default:(0,c.withCtx)(()=>[(0,c.createTextVNode)((0,c.toDisplayString)((0,c.unref)(x)),1)]),_:1},8,[`aria-label`])):(0,c.createCommentVNode)(``,!0),(0,c.createVNode)(L,{emoji:s.value},null,8,[`emoji`]),(0,c.createVNode)(P,{ref:`skinSelectorRef`,"is-hovering":!!s.value,"skin-selector-button-tooltip-label":(0,c.unref)(b),"skin-tone":e.skinTone,onSkinTone:r[14]||(r[14]=e=>a(`skin-tone`,e)),onFocusTabset:r[15]||(r[15]=e=>t.$refs.tabsetRef.focusTabset()),onFocusLastEmoji:r[16]||(r[16]=e=>t.$refs.emojiSelectorRef.focusLastEmoji()),onKeydown:r[17]||(r[17]=(0,c.withKeys)(e=>a(`close`),[`esc`]))},null,8,[`is-hovering`,`skin-selector-button-tooltip-label`,`skin-tone`])])]))}};Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return H}});
-//# sourceMappingURL=emoji_picker-Cl-T4BXK.cjs.map

package/dist/emoji_picker-Cl-T4BXK.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"emoji_picker-Cl-T4BXK.cjs","names":["$emit","ARROW_KEYS","$refs"],"sources":["../components/emoji_picker/modules/emoji_search.vue","../components/emoji_picker/modules/emoji_tabset.vue","../components/emoji_picker/composables/useKeyboardNavigation.js","../components/emoji_picker/modules/emoji_selector.vue","../components/emoji_picker/modules/emoji_skin_selector.vue","../components/emoji_picker/modules/emoji_description.vue","../components/emoji_picker/emoji_picker.vue"],"sourcesContent":["<template>\n  <div class=\"d-emoji-picker__search d-emoji-picker__alignment\">\n    <dt-input\n      id=\"searchInput\"\n      ref=\"searchInput\"\n      :placeholder=\"searchPlaceholderLabel\"\n      :model-value=\"modelValue\"\n      @update:model-value=\"$emit('update:modelValue', $event)\"\n      @keydown.up=\"$emit('focus-tabset')\"\n      @keydown.down.prevent=\"$emit('focus-emoji-selector')\"\n      @keydown.enter=\"$emit('select-first-emoji')\"\n    >\n      <template #leftIcon>\n        <dt-icon-search\n          size=\"200\"\n        />\n      </template>\n      <template\n        v-if=\"modelValue.length > 0\"\n        #rightIcon\n      >\n        <dt-button\n          importance=\"clear\"\n          size=\"xs\"\n          class=\"d-emoji-picker__search-x-button\"\n          circle\n          kind=\"muted\"\n          @click=\"clearSearch\"\n        >\n          <template #icon>\n            <dt-icon-close\n              size=\"200\"\n            />\n          </template>\n        </dt-button>\n      </template>\n    </dt-input>\n  </div>\n</template>\n\n<script setup>\nimport { DtIconSearch, DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\nimport { onMounted, ref } from 'vue';\n\ndefineProps({\n  searchPlaceholderLabel: {\n    type: String,\n    required: true,\n  },\n  modelValue: {\n    type: String,\n    default: '',\n  },\n});\n\nconst emits = defineEmits(['update:modelValue', 'focus-emoji-selector', 'focus-tabset', 'select-first-emoji']);\n\nconst searchInput = ref(null);\n\nfunction clearSearch () {\n  emits('update:modelValue', '');\n  focusSearchInput();\n}\n\nfunction focusSearchInput () {\n  searchInput.value.focus();\n}\nonMounted(() => {\n  focusSearchInput();\n});\n\ndefineExpose({\n  focusSearchInput,\n});\n</script>\n","<template>\n  <div class=\"d-emoji-picker__tabset\">\n    <dt-tab-group\n      :selected=\"selectedTab\"\n      size=\"sm\"\n      tab-list-class=\"d-emoji-picker__tabset-list\"\n    >\n      <template #tabs>\n        <dt-tab\n          v-for=\"(tab, index) in tabs\"\n          :id=\"tab.id\"\n          :key=\"tab.id\"\n          :ref=\"el => { if (el) setTabsetRef(el) }\"\n          :label=\"tab.label\"\n          :panel-id=\"tab.panelId\"\n          :tabindex=\"index + 1\"\n          aria-controls=\"d-emoji-picker-list\"\n          @keydown=\"handleKeyDown($event, tab.id)\"\n          @click.capture.stop=\"selectTabset(tab.id)\"\n        >\n          <component\n            :is=\"tab.icon\"\n            size=\"400\"\n          />\n        </dt-tab>\n      </template>\n    </dt-tab-group>\n  </div>\n</template>\n\n<script setup>\nimport { computed, ref, watch } from 'vue';\nimport { DtTab, DtTabGroup } from '@/components/tab';\nimport { returnFirstEl } from '@/common/utils';\nimport {\n  DtIconClock,\n  DtIconSatisfied,\n  DtIconLivingThing,\n  DtIconFood,\n  DtIconObject,\n  DtIconTransportation,\n  DtIconLightbulb,\n  DtIconHeart,\n  DtIconFlag,\n  DtIconDialpadStar,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst props = defineProps({\n  /**\n   * Whether to show the recently used tab or not\n   * @type {Boolean}\n   * @default false\n   */\n  showRecentlyUsedTab: {\n    type: Boolean,\n    default: false,\n  },\n\n  /**\n   * Whether to show the custom emojis tab or not\n   * @type {Boolean}\n   * @default false\n   */\n  showCustomEmojisTab: {\n    type: Boolean,\n    default: false,\n  },\n\n  scrollIntoTab: {\n    type: Number,\n    required: true,\n  },\n\n  emojiFilter: {\n    type: String,\n    default: '',\n  },\n\n  /**\n   * The labels for the aria-label\n   * @type {Array}\n   * @required\n   */\n  tabSetLabels: {\n    type: Array,\n    required: true,\n  },\n});\n\nconst emits = defineEmits([\n  /**\n   * Emitted when a tab is selected\n   * @event selected-tabset\n   * @param {String} tabId - The name of the tab that was selected\n   */\n  'selected-tabset',\n\n  'focus-search-input',\n  'focus-skin-selector',\n]);\n\nconst TABS_DATA = [\n  { label: props.tabSetLabels[0], icon: DtIconClock },\n  { label: props.tabSetLabels[1], icon: DtIconSatisfied },\n  { label: props.tabSetLabels[2], icon: DtIconLivingThing },\n  { label: props.tabSetLabels[3], icon: DtIconFood },\n  { label: props.tabSetLabels[4], icon: DtIconObject },\n  { label: props.tabSetLabels[5], icon: DtIconTransportation },\n  { label: props.tabSetLabels[6], icon: DtIconLightbulb },\n  { label: props.tabSetLabels[7], icon: DtIconHeart },\n  { label: props.tabSetLabels[8], icon: DtIconFlag },\n  { label: props.tabSetLabels[9], icon: DtIconDialpadStar },\n];\n\nconst tabs = computed(() => {\n  const tabsData = props.showRecentlyUsedTab ? TABS_DATA : TABS_DATA.slice(1);\n  // if showCustomEmojisTab is false remove last index of TABS_DATA\n  if (!props.showCustomEmojisTab) {\n    tabsData.pop();\n  }\n\n  return tabsData.map((tab, index) => ({\n    ...tab,\n    // IDs on dt-tab component need to be on string\n    id: (index + 1).toString(),\n    panelId: (index + 1).toString(),\n  }));\n});\n\nconst isSearching = computed(() => props.emojiFilter.length > 0);\n\nconst selectedTab = ref('1');\n\nconst tabsetRef = ref([]);\n\nwatch(() => props.scrollIntoTab,\n  () => {\n    if (!isSearching.value) {\n      selectedTab.value = (props.scrollIntoTab + 1).toString();\n    }\n  });\n\nwatch(isSearching,\n  () => {\n    if (isSearching.value) {\n      selectedTab.value = null;\n    }\n  });\n\n/**\n * We are using .capture.stop modifiers on the click event\n * because we don't want to trigger the click event of the\n * dt-tab component\n */\nfunction selectTabset (id) {\n  // IDs on scrollToTab need to be on number\n  const parseId = parseInt(id);\n  // IDs on dt-tab component need to be on string\n  selectedTab.value = id;\n  emits('selected-tabset', parseId);\n}\n\nfunction setTabsetRef (ref) {\n  // We push the $el, because $el is the button inside the dt-tab component\n  // and we need the button to focus it\n  tabsetRef.value.push(returnFirstEl(ref.$el));\n}\n\nfunction focusTabset () {\n  tabsetRef.value[0].focus();\n}\n\nfunction handleKeyDown (event, tabId) {\n  if (event.key === 'Enter') {\n    selectTabset(tabId);\n    // We blur because seems like the tab component override the selected prop, and it removes the selected style\n    tabsetRef.value[tabId - 1].blur();\n  }\n\n  if (event.key === 'Tab') {\n    event.preventDefault();\n    if (event.shiftKey) {\n      emits('focus-skin-selector');\n    } else {\n      emits('focus-search-input');\n    }\n  }\n\n  if (event.key === 'ArrowDown') {\n    // Jump to search input\n    emits('focus-search-input');\n  }\n}\n\ndefineExpose({\n  focusTabset,\n});\n</script>\n","import { ref } from 'vue';\nimport { EMOJIS_PER_ROW, ARROW_KEYS } from '@/components/emoji_picker/emoji_picker_constants';\n\nexport function useKeyboardNavigation () {\n  const emojiRefs = ref([]);\n  const emojiFilteredRefs = ref([]);\n  const isFiltering = ref(false);\n  const hoverFirstEmoji = ref(true);\n\n  function _handleArrowLeft (indexTab, indexEmoji) {\n    if (!focusEmoji(indexTab, indexEmoji - 1)) {\n      if (emojiRefs.value[indexTab - 1]) {\n        focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);\n      } else {\n        focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);\n      }\n    }\n  }\n\n  function _handleArrowRight (indexTab, indexEmoji) {\n    if (!focusEmoji(indexTab, indexEmoji + 1)) {\n      if (!focusEmoji(indexTab + 1, 0)) {\n        focusEmoji(0, 0);\n      }\n    }\n  }\n\n  function _handleArrowLeftFiltered (indexTab, indexEmoji) {\n    if (!focusEmoji(0, indexEmoji - 1)) {\n      focusEmoji(0, emojiFilteredRefs.value.length - 1);\n    }\n  }\n\n  function _handleArrowRightFiltered (indexTab, indexEmoji) {\n    if (!focusEmoji(0, indexEmoji + 1)) {\n      focusEmoji(0, 0);\n    }\n  }\n\n  function _handleHorizontalNavigation (direction, indexTab, indexEmoji) {\n    if (isFiltering.value) {\n      if (direction === 'left') {\n        _handleArrowLeftFiltered(indexTab, indexEmoji);\n      } else if (direction === 'right') {\n        _handleArrowRightFiltered(indexTab, indexEmoji);\n      }\n    } else {\n      if (direction === 'left') {\n        _handleArrowLeft(indexTab, indexEmoji);\n      } else if (direction === 'right') {\n        _handleArrowRight(indexTab, indexEmoji);\n      }\n    }\n  }\n\n  function focusEmoji (indexTab, indexEmoji) {\n    const emojiRef = isFiltering.value\n      ? emojiFilteredRefs.value?.[indexEmoji]\n      : emojiRefs.value?.[indexTab]?.[indexEmoji];\n\n    if (emojiRef) {\n      emojiRef.focus();\n      return true;\n    }\n\n    return false;\n  }\n\n  function setEmojiRef (el, indexTab, indexEmoji) {\n    if (!emojiRefs.value[indexTab]) {\n      emojiRefs.value[indexTab] = [];\n    }\n    emojiRefs.value[indexTab][indexEmoji] = el;\n  }\n\n  function setFilteredRef (el, index) {\n    emojiFilteredRefs.value[index] = el;\n  }\n\n  function handleArrowNavigationFiltered (key, indexEmoji) {\n    hoverFirstEmoji.value = false;\n\n    if (key === ARROW_KEYS.ARROW_UP) {\n      const position = indexEmoji % EMOJIS_PER_ROW;\n\n      if (!focusEmoji(0, indexEmoji - EMOJIS_PER_ROW)) {\n        const lastEmojiPosition =\n        emojiFilteredRefs.value.length - (emojiFilteredRefs.value.length % EMOJIS_PER_ROW) + position;\n\n        focusEmoji(0, lastEmojiPosition);\n\n        if (!focusEmoji(0, lastEmojiPosition)) {\n          focusEmoji(0, emojiFilteredRefs.value.length - 1);\n        }\n      }\n    }\n\n    if (key === ARROW_KEYS.ARROW_DOWN) {\n      if (!focusEmoji(0, indexEmoji + EMOJIS_PER_ROW)) {\n        const position = indexEmoji % EMOJIS_PER_ROW;\n\n        if (emojiFilteredRefs.value?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n          focusEmoji(0, emojiFilteredRefs.value.length - 1);\n        } else {\n          focusEmoji(0, position);\n        }\n      }\n    }\n\n    if (key === ARROW_KEYS.ARROW_LEFT) {\n      _handleHorizontalNavigation('left', 0, indexEmoji);\n    }\n\n    if (key === ARROW_KEYS.ARROW_RIGHT) {\n      _handleHorizontalNavigation('right', 0, indexEmoji);\n    }\n  }\n\n  function handleArrowNavigation (key, indexTab, indexEmoji) {\n    if (key === 'ArrowUp') {\n      const position = indexEmoji % EMOJIS_PER_ROW;\n\n      if (indexTab === 0) {\n      // we are on the first emoji tab, then we should jump to the last row of the last emoji tab\n        const numberOfMissingEmojis =\n        EMOJIS_PER_ROW - (emojiRefs.value[emojiRefs.value.length - 1].length % EMOJIS_PER_ROW);\n\n        const emojiToJump =\n        emojiRefs.value[emojiRefs.value.length - 1].length + numberOfMissingEmojis - (EMOJIS_PER_ROW - position);\n\n        if (!focusEmoji(emojiRefs.value.length - 1, emojiToJump)) {\n        // if there is no emoji in this position, jump to the last emoji of the row\n          focusEmoji(emojiRefs.value.length - 1, emojiRefs.value[emojiRefs.value.length - 1].length - 1);\n        }\n        return;\n      }\n\n      // if we are not on the first tab, we should jump to the previous row of the current tab\n      if (!focusEmoji(indexTab, indexEmoji - EMOJIS_PER_ROW)) {\n      // if there is no previous row, we should jump to emoji in the sampe position of the previous tab\n        const previousTab = indexTab - 1 < 0 ? 0 : indexTab - 1;\n        const emojisInPreviousTab = emojiRefs.value[previousTab].length;\n        const lastEmojiPosition = emojisInPreviousTab - (emojisInPreviousTab % EMOJIS_PER_ROW) + position;\n\n        if (!focusEmoji(previousTab, lastEmojiPosition)) {\n        // if there is no emoji in this position, jump to the last emoji of the row\n          focusEmoji(indexTab - 1, emojiRefs.value[indexTab - 1].length - 1);\n        }\n      }\n    }\n\n    if (key === 'ArrowDown') {\n      if (!focusEmoji(indexTab, indexEmoji + EMOJIS_PER_ROW)) {\n      // if cannot go down\n\n        // Calculate position from cell 0 to cell 8\n        const position = indexEmoji % EMOJIS_PER_ROW;\n\n        // check if it exists a next row in the current tab\n        if (emojiRefs.value?.[indexTab]?.[indexEmoji + (EMOJIS_PER_ROW - position)]) {\n        // if it exists, we should focus the last emoji of the next row in the current tab\n          focusEmoji(indexTab, emojiRefs.value[indexTab].length - 1);\n        // if we are at the end of the list it will do nothing\n        } else {\n        // We don't have next row, we are in the last of the tab, then jump\n        // to the next tab but in the equal emoji position in row 0.\n\n          if (!focusEmoji(indexTab + 1, position)) {\n          // We are on the bottom!, should jump to the same position emoji in the first row of the first tabset\n          // if it doesn't has, jump to the last\n            if (!focusEmoji(0, position)) {\n              focusEmoji(0, emojiRefs.value[0].length - 1);\n            }\n          }\n        }\n      }\n    }\n\n    if (key === 'ArrowLeft') {\n      _handleHorizontalNavigation('left', indexTab, indexEmoji);\n    }\n\n    if (key === 'ArrowRight') {\n      _handleHorizontalNavigation('right', indexTab, indexEmoji);\n    }\n  }\n\n  return {\n    emojiFilteredRefs,\n    isFiltering,\n    hoverFirstEmoji,\n    setEmojiRef,\n    setFilteredRef,\n    focusEmoji,\n    handleArrowNavigationFiltered,\n    handleArrowNavigation,\n  };\n}\n","<template>\n  <div\n    class=\"d-emoji-picker__selector\"\n  >\n    <div\n      id=\"d-emoji-picker-list\"\n      ref=\"listRef\"\n      class=\"d-emoji-picker__list\"\n    >\n      <p\n        v-if=\"emojiFilter\"\n        class=\"d-emoji-picker__search-label d-emoji-picker__alignment\"\n      >\n        {{ filteredEmojis.length > 0 ? searchResultsLabel : searchNoResultsLabel }}\n      </p>\n      <div\n        v-else\n        ref=\"tabCategoryRef\"\n        class=\"d-emoji-picker__category d-emoji-picker__alignment\"\n      >\n        <p>\n          {{ fixedLabel }}\n        </p>\n      </div>\n      <div\n        v-for=\"(tabLabel, indexTab) in tabLabels\"\n        v-show=\"!emojiFilter\"\n        :key=\"indexTab\"\n        :ref=\"tabLabel.ref\"\n        class=\"d-emoji-picker__alignment\"\n      >\n        <p\n          v-if=\"indexTab\"\n        >\n          {{ tabLabel.label }}\n        </p>\n        <div\n          class=\"d-emoji-picker__tab\"\n        >\n          <button\n            v-for=\"(emoji, indexEmoji) in\n            (emojis[tabs[indexTab] + skinTone] ? emojis[tabs[indexTab] + skinTone] : emojis[tabs[indexTab]])\"\n            :key=\"emoji.shortname\"\n            :ref=\"el => { if (el) setEmojiRef(el, indexTab, indexEmoji) }\"\n            type=\"button\"\n            :aria-label=\"emoji.name\"\n            @click=\"event => selectEmoji(emoji, event)\"\n            @focusin=\"highlightEmoji(emoji)\"\n            @focusout=\"highlightEmoji(null)\"\n            @mouseover=\"highlightEmoji(emoji)\"\n            @mouseleave=\"highlightEmoji(null)\"\n            @keydown=\"event => handleKeyDown(event, indexTab, indexEmoji, emoji)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"emoji.name\"\n              :aria-label=\"emoji.name\"\n              :title=\"emoji.name\"\n              :src=\"getImgSrc(emoji)\"\n              @error=\"handleImageError\"\n            >\n          </button>\n        </div>\n      </div>\n      <div\n        v-if=\"emojiFilter\"\n        class=\"d-emoji-picker__alignment\"\n      >\n        <div\n          class=\"d-emoji-picker__tab \"\n          data-qa=\"filtered-emojis\"\n        >\n          <button\n            v-for=\"(emoji, index) in filteredEmojis\"\n            :key=\"emoji.shortname\"\n            :ref=\"el => { if (el) setFilteredRef(el, index) }\"\n            type=\"button\"\n            :aria-label=\"emoji.name\"\n            :class=\"{\n              'hover-emoji': (index === 0 && hoverFirstEmoji),\n            }\"\n            @click=\"event => selectEmoji(emoji, event)\"\n            @focusin=\"highlightEmoji(emoji)\"\n            @focusout=\"highlightEmoji(null)\"\n            @mouseover=\"hoverEmoji(emoji)\"\n            @mouseleave=\"hoverEmoji(null)\"\n            @keydown=\"event => handleKeyDownFilteredEmojis(event, index, emoji)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"emoji.name\"\n              :aria-label=\"emoji.name\"\n              :title=\"emoji.name\"\n              :src=\"`${CDN_URL + emoji.unicode_character}.png`\"\n            >\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup>\n/* eslint-disable max-lines */\nimport { emojisGrouped as emojis } from '@dialpad/dialtone-emojis';\nimport { computed, onMounted, onBeforeUnmount, ref, watch, nextTick } from 'vue';\nimport { CDN_URL, ARROW_KEYS } from '@/components/emoji_picker/emoji_picker_constants';\nimport { useKeyboardNavigation } from '@/components/emoji_picker/composables/useKeyboardNavigation';\n\nconst props = defineProps({\n  /**\n   * The filter to apply to the emoji list\n   * @type {String}\n   * @default ''\n   */\n  emojiFilter: {\n    type: String,\n    default: '',\n  },\n\n  /**\n   * The skin tone to apply to the emoji list\n   * @type {String}\n   * @required\n   */\n  skinTone: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The labels for the tabset\n   * @type {Array}\n   * @required\n   */\n  tabsetLabels: {\n    type: Array,\n    required: true,\n  },\n\n  selectedTabset: {\n    type: Object,\n    required: true,\n  },\n\n  /**\n   * The label for the search results tab\n   * @type {String}\n   * @required\n   */\n  searchResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  searchNoResultsLabel: {\n    type: String,\n    required: true,\n  },\n\n  /**\n   * The list of recently used emojis\n   * @type {Array}\n   */\n  recentlyUsedEmojis: {\n    type: Array,\n    default: () => [],\n  },\n\n  /**\n   * The list of custom emojis\n   * @type {Array}\n   */\n  customEmojis: {\n    type: Array,\n    default: () => [],\n  },\n});\n\nconst emits = defineEmits([\n  /**\n   * Emitted when the user hover over an emoji\n   * @event highlighted-emoji\n   * @param {Object} emoji - The emoji data that was hovered\n    */\n  'highlighted-emoji',\n\n  /**\n   * Emitted when the user select an emoji\n   * @event selected-emoji\n   * @param {Object} emoji - The emoji data that was selected\n    */\n  'selected-emoji',\n\n  /**\n   * Emitted when the user scroll into an emoji tab\n   * @event scroll-into-tab\n   * @param {Number} tab-index - The tab that was scrolled into\n    */\n  'scroll-into-tab',\n\n  /**\n   * Emitted when the user reach bottom scroll\n   * This event is used on handleScroll method\n   * @event scroll-bottom-reached\n   */\n  'scroll-bottom-reached',\n\n  /**\n   * Emitted when the user reach the end of the emoji list\n   * @event focus-skin-selector\n    */\n  'focus-skin-selector',\n\n  /**\n   * Emitted when the user shift tab in first tab of emoji selector\n   * @event focus-search-input\n    */\n  'focus-search-input',\n]);\n\nconst {\n  emojiFilteredRefs,\n  isFiltering,\n  hoverFirstEmoji,\n  setEmojiRef,\n  setFilteredRef,\n  focusEmoji,\n  handleArrowNavigationFiltered,\n  handleArrowNavigation,\n} = useKeyboardNavigation();\n\n/**\n * The ref for the tab category\n * This is used to display the fixed label\n */\nconst tabCategoryRef = ref(null);\n\n/**\n * The ref for the list\n * This is used to display the tabs\n */\nconst listRef = ref(null);\n\n/**\n * The ref for the tab label observer\n * This is used to update the fixed label\n */\nconst tabLabelObserver = ref(null);\n\n/**\n * The list of tabs\n * This is used to display the tabs\n */\nconst TABS_DATA = ['Recently used', 'People', 'Nature', 'Food', 'Activity', 'Travel', 'Objects', 'Symbols', 'Flags', 'Custom'];\n\n/**\n * The list of tab labels\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis or custom emojis list is empty\n * If it is empty, it will remove it\n */\nconst tabLabels = computed(() => {\n  let updateTabLabels = props.tabsetLabels.map((label) => ({ label, ref: ref(null) }));\n\n  if (props.recentlyUsedEmojis && !props.recentlyUsedEmojis.length) {\n    updateTabLabels = props.tabsetLabels.slice(1).map((label) => ({ label, ref: ref(null) }));\n  }\n\n  if (props.customEmojis && !props.customEmojis.length) {\n    updateTabLabels.pop();\n  }\n\n  return updateTabLabels;\n});\n\n/**\n * The label of the fixed tab\n * This is used to display the fixed label\n */\nconst fixedLabel = ref(tabLabels.value[0].label);\n\n/**\n * The list of tabs\n * This is used to display the tabs\n * This is a computed property because it will check if the recently used emojis list or custom emojis is empty\n * If it is empty, it will remove it\n * The difference between this and the tab labels is that this one will set the structure of tabs\n * and the tab labels will set the labels\n */\nconst tabs = computed(() => {\n  const updateTabsOrder = props.recentlyUsedEmojis.length ? TABS_DATA.slice() : TABS_DATA.slice(1);\n\n  if (props.customEmojis && !props.customEmojis.length) {\n    updateTabsOrder.pop();\n  }\n\n  return updateTabsOrder;\n});\n\n/**\n * The list of current emojis that match the filter\n * This will be updated when the emojiFilter changes\n * This is used to display the search results\n * The difference between this and the current emojis list is that this one will not have the skin tone applied\n */\nconst filteredEmojis = ref([]);\n\n/**\n * The current emojis list we are displaying\n * This will be updated when the skin tone changes\n * The difference between this and the emojis list is that this one will have only the skin tone applied\n */\nconst currentEmojis = computed(() => {\n  return [\n    ...emojis[`People${props.skinTone}`],\n    ...emojis.Nature,\n    ...emojis.Food,\n    ...emojis[`Activity${props.skinTone}`],\n    ...emojis.Travel,\n    ...emojis[`Objects${props.skinTone}`],\n    ...emojis.Symbols,\n    ...emojis.Flags,\n  ];\n});\n\n/**\n * This will trigger the searchByNameAndKeywords function with debounce of 300 milliseconds\n */\nconst debouncedSearch = debounce(() => {\n  // We clean the emojiFilteredRefs to have an updated ref list for the search results\n  emojiFilteredRefs.value = [];\n  searchByNameAndKeywords();\n});\n\n/**\n * handleScroll will be defined when user scroll\n */\nconst handleScroll = () => {\n  const container = listRef.value;\n  // TODO -- this will probably need to be updated if we add more emojis.\n  // because the container height will change.\n  // maybe with a nextTick similar of scrollToTab.\n  if (container.scrollTop + container.clientHeight >= container.scrollHeight) {\n    emits('scroll-bottom-reached');\n  }\n};\n\n/**\n * Update the current emojis list on skin tone changes\n * Also update the filtered emojis list\n * @listens skinTone\n */\nwatch(currentEmojis, () => {\n  searchByNameAndKeywords();\n}, { immediate: true });\n\n/**\n * Update the recently used emojis list on recently used emojis prop changes\n * @listens recentlyUsedEmojis\n */\nwatch(() => props.recentlyUsedEmojis,\n  () => {\n    emojis['Recently used'] = props.recentlyUsedEmojis;\n  }, { immediate: true });\n\n/**\n * Update the custom emojis list on custom emojis prop changes\n * @listens customEmojis\n */\nwatch(() => props.customEmojis,\n  () => {\n    emojis.Custom = props.customEmojis;\n  }, { immediate: true });\n\n/**\n * Search for emojis by name and keywords\n * Will update the filtered emojis list on emojiFilter update\n * @listens emojiFilter\n */\nwatch(() => props.emojiFilter, () => {\n  resetScroll();\n  if (props.emojiFilter) {\n    isFiltering.value = true;\n  } else {\n    isFiltering.value = false;\n    // If the emoji filter is empty, emit null to remove the highlighted emoji\n    // of the previous search\n    highlightEmoji(null);\n  }\n  debouncedSearch();\n});\n\nwatch(\n  () => props.selectedTabset,\n  (tab) => {\n    scrollToTab(tab.tabId);\n  },\n  { deep: true },\n);\n\nfunction hoverEmoji (emoji, isFirst = false) {\n  hoverFirstEmoji.value = isFirst;\n  emits('highlighted-emoji', emoji);\n}\n\n/**\n * Filters an array of emoji objects based on a search string that matches both the name and keywords.\n * Will update the filtered emojis list\n */\nfunction searchByNameAndKeywords () {\n  const searchStr = props.emojiFilter.toLowerCase();\n  filteredEmojis.value = currentEmojis.value.filter(obj => {\n    const nameIncludesSearchStr = obj.name.toLowerCase().includes(searchStr);\n    const keywordsIncludeSearchStr = obj.keywords.some(keyword => keyword.toLowerCase().includes(searchStr));\n    return nameIncludesSearchStr || keywordsIncludeSearchStr;\n  });\n  nextTick(() => {\n    if (searchStr) {\n      hoverEmoji(filteredEmojis.value[0], true);\n    }\n  });\n}\n\nfunction debounce (fn, delay = 300) {\n  let timeout;\n\n  return (...args) => {\n    clearTimeout(timeout);\n    timeout = setTimeout(() => fn(...args), delay);\n  };\n}\n\nfunction getImgSrc (emoji) {\n  // TODO Update json structure to have a property for custom emojis and avoid using date_added\n  if (emoji.date_added) { // if custom emoji\n    return emoji.image;\n  } else { // if regular emoji\n    return CDN_URL + emoji.unicode_character + '.png';\n  }\n}\n\n/**\n * Handle image error - We hide the entire button if the image is not found\n */\nfunction handleImageError (event) {\n  event.target.parentNode.style.display = 'none';\n}\n\n/**\n * Scroll to the selected tab\n */\nfunction scrollToTab (tabIndex, focusFirstEmoji = true) {\n  const tabLabel = tabLabels.value[tabIndex - 1];\n  const tabElement = tabLabel.ref.value[0];\n\n  nextTick(() => {\n    const container = listRef.value;\n    const offsetTop = tabIndex === 1 ? 0 : tabElement.offsetTop - 15;\n\n    container.scrollTop = offsetTop;\n\n    if (focusFirstEmoji) {\n      focusEmoji((tabIndex - 1), 0);\n    }\n  });\n}\n\nfunction resetScroll () {\n  const container = listRef.value;\n\n  container.scrollTop = 0;\n}\n\nfunction setBottomScrollListener () {\n  listRef.value.addEventListener('scroll', handleScroll);\n}\n\n/**\n * This code creates an IntersectionObserver object that monitors the intersection between\n * the root element (tabCategoryRef) and its targets (the child elements of listRef),\n * and updates the value of the fixedLabel variable accordingly.\n */\nfunction setTabLabelObserver () {\n  /**\n   * The code extracts the target element and its index from the IntersectionObserverEntry object,\n   * and checks whether the target intersects with the root and is positioned above or below it.\n   */\n  tabLabelObserver.value = new IntersectionObserver(async (entries) => {\n    // eslint-disable-next-line complexity\n    entries.forEach(entry => {\n      const { target } = entry;\n      const index = parseInt(target.dataset.index);\n\n      /**\n       * If the target is positioned above the root,\n       * the code updates the value of the fixed label to the label of the previous tab,\n       * or the first tab if the current tab is the first one. If the target is positioned below the root, the code\n       * updates the value of the fixed label to the label of the current tab.\n       * If the target stops intersecting with the root and its index is 1 (the second tab),\n       * the code updates the value of the fixed label to the label of the first tab.\n       * NOTES:\n       * This last condition is needed because sometimes it is\n       * not detect the intersection between the root and the target.\n       * We also provide a 50 pixels offset to the root element in the first condition to always get the\n       * first tab if it has fewer emojis, because in some cases if you quickly scroll the observer does not detect it.\n       */\n      if (entry.isIntersecting && target.offsetTop <= tabCategoryRef.value.offsetTop + 50) {\n        fixedLabel.value = tabLabels.value[index - 1]?.label ?? tabLabels.value[0]?.label;\n        emits('scroll-into-tab', index - 1);\n      } else if (entry.boundingClientRect.bottom <= tabCategoryRef.value?.getBoundingClientRect().bottom) {\n        emits('scroll-into-tab', index);\n        fixedLabel.value = tabLabels.value[index]?.label;\n      } else if (index === 1) {\n        emits('scroll-into-tab', index);\n        fixedLabel.value = tabLabels.value[0]?.label;\n      }\n    });\n  });\n\n  /**\n   * The tabLabelObserver is set to observe the root element and all its children elements with\n   * the IntersectionObserver object, and sets their data-index attribute to their index.\n   */\n  tabLabelObserver.value.observe(tabCategoryRef.value);\n\n  Array.from(listRef.value.children).forEach((child, index) => {\n    tabLabelObserver.value.observe(child);\n    child.dataset.index = index;\n  });\n}\n\nconst handleKeyDownFilteredEmojis = (event, indexEmoji, emoji) => {\n  event.preventDefault();\n\n  if (Object.values(ARROW_KEYS).includes(event.key)) {\n    handleArrowNavigationFiltered(event.key, indexEmoji);\n    return;\n  }\n\n  switch (event.key) {\n    case 'Tab':\n      emits('focus-skin-selector');\n      break;\n    case 'Enter':\n      selectEmoji(emoji, event);\n      break;\n    default:\n      break;\n  }\n};\n\n \nconst handleKeyDown = (event, indexTab, indexEmoji, emoji) => {\n  event.preventDefault();\n\n  if (Object.values(ARROW_KEYS).includes(event.key)) {\n    handleArrowNavigation(event.key, indexTab, indexEmoji);\n    return;\n  }\n\n  switch (event.key) {\n    case 'Tab':\n      if (event.shiftKey) {\n        if (focusEmoji(indexTab, 0) && indexTab > 0) {\n          scrollToTab(indexTab, true);\n        } else {\n          scrollToTab(1, false);\n          emits('focus-search-input');\n        }\n      } else {\n        if (focusEmoji(indexTab + 1, 0)) {\n          scrollToTab(indexTab + 1 + 1, false);\n        } else {\n          // We are on the last emoji tabset, jump to the skin selector\n          emits('focus-skin-selector');\n        }\n      }\n      break;\n\n    case 'Enter':\n      selectEmoji(emoji, event);\n      break;\n\n    default:\n      break;\n  }\n};\n\nfunction selectEmoji (emoji, event) {\n  emits('selected-emoji', { ...emoji, shift_key: event.shiftKey });\n}\n\nfunction highlightEmoji (emoji) {\n  emits('highlighted-emoji', emoji);\n}\n\nfunction focusEmojiSelector () {\n  focusEmoji(0, 0);\n}\n\nfunction focusLastEmoji () {\n  scrollToTab(tabs.value.length, true);\n}\n\nonMounted(() => {\n  setTabLabelObserver();\n  setBottomScrollListener();\n});\n\nonBeforeUnmount(() => {\n  tabLabelObserver.value.disconnect();\n  listRef.value.removeEventListener('scroll', handleScroll);\n});\n\ndefineExpose({\n  focusEmojiSelector,\n  focusLastEmoji,\n});\n</script>\n","<template>\n  <div data-qa=\"skin-selector\">\n    <div\n      v-show=\"isOpen\"\n      class=\"d-emoji-picker__skin-list\"\n    >\n      <button\n        v-for=\"(skin, index) in skinList\"\n        :ref=\"el => { if (el) setSkinsRef(el) }\"\n        :key=\"skin.name\"\n        :class=\"{\n          'selected': skinSelected.skinCode === skin.skinCode,\n        }\"\n        @keydown=\"event => handleKeyDown(event, skin, index)\"\n        @click=\"selectSkin(skin)\"\n      >\n        <img\n          class=\"d-icon d-icon--size-500\"\n          :alt=\"skin.name\"\n          :aria-label=\"skin.name\"\n          :title=\"skin.name\"\n          :src=\"`${CDN_URL + skin.unicode_output}.png`\"\n        >\n      </button>\n    </div>\n    <div\n      v-show=\"!isOpen\"\n      class=\"d-emoji-picker__skin-selected\"\n    >\n      <dt-tooltip placement=\"top-end\">\n        {{ skinSelectorButtonTooltipLabel }}\n        <template #anchor>\n          <button\n            ref=\"skinSelectorRef\"\n            :aria-label=\"skinSelectorButtonTooltipLabel\"\n            tabindex=\"-1\"\n            @click=\"toggleSkinList\"\n            @keydown=\"event => handleKeyDown(event)\"\n          >\n            <img\n              class=\"d-icon d-icon--size-500\"\n              :alt=\"skinSelected.name\"\n              :aria-label=\"skinSelected.name\"\n              :title=\"skinSelected.name\"\n              :src=\"`${CDN_URL + skinSelected.unicode_output}.png`\"\n            >\n          </button>\n        </template>\n      </dt-tooltip>\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport { computed, nextTick, ref, watchEffect } from 'vue';\nimport { CDN_URL, EMOJI_PICKER_SKIN_TONE_MODIFIERS } from '@/components/emoji_picker/emoji_picker_constants.js';\nimport { DtTooltip } from '@/components/tooltip';\n\nconst props = defineProps({\n  /**\n   * The skin tone to apply to the emoji list\n   * @type {String}\n   * @required\n   */\n  skinTone: {\n    type: String,\n    required: true,\n  },\n\n  isHovering: {\n    type: Boolean,\n    default: false,\n  },\n\n  skinSelectorButtonTooltipLabel: {\n    type: String,\n    required: true,\n  },\n});\n\nconst emits = defineEmits([\n  /**\n   * The skin tone that was selected\n   * @event skin-tone\n   * @type {Number}\n   */\n  'skin-tone',\n  'focus-tabset',\n  'focus-last-emoji',\n]);\n\nconst skinList = [\n  {\n    name: ':wave_tone1:',\n    unicode_output: '1f44b-1f3fb',\n    skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.LIGHT,\n    skinCode: '_tone1',\n  },\n  {\n    name: ':wave_tone2:',\n    unicode_output: '1f44b-1f3fc',\n    skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_LIGHT,\n    skinCode: '_tone2',\n  },\n  {\n    name: ':wave_tone3:',\n    unicode_output: '1f44b-1f3fd',\n    skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM,\n    skinCode: '_tone3',\n  },\n  {\n    name: ':wave_tone4:',\n    unicode_output: '1f44b-1f3fe',\n    skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.MEDIUM_DARK,\n    skinCode: '_tone4',\n  },\n  {\n    name: ':wave_tone5:',\n    unicode_output: '1f44b-1f3ff',\n    skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DARK,\n    skinCode: '_tone5',\n  },\n  {\n    name: ':wave:',\n    unicode_output: '1f44b',\n    skinTone: EMOJI_PICKER_SKIN_TONE_MODIFIERS.DEFAULT,\n    skinCode: '',\n  },\n];\n\nconst isOpen = ref(false);\n\nconst skinSelectorRef = ref(null);\n\nconst skinsRef = ref([]);\n\n/**\n * It will close the skin selector if the user is hovering over the emoji list\n */\nwatchEffect(\n  () => props.isHovering && (isOpen.value = false),\n);\n\n/**\n * It will initially display props.skinTone. If a new skin tone is selected,\n * it will display that until props.skinTone changes.\n */\nconst skinPassedIn = computed(() => skinList.find((skin) => skin.skinTone === props.skinTone));\nconst skinSelected = ref(skinPassedIn.value);\nwatchEffect(() => skinPassedIn.value && (skinSelected.value = skinPassedIn.value));\n\nfunction setSkinsRef (ref) {\n  skinsRef.value.push(ref);\n}\nfunction focusSkinSelector () {\n  skinSelectorRef.value.focus();\n}\n\nfunction selectSkin (skin) {\n  skinSelected.value = skin;\n  isOpen.value = false;\n  emits('skin-tone', skin.skinTone);\n  nextTick(() => focusSkinSelector());\n}\n\nconst handleKeyDown = (event, skin, index) => {\n  event.preventDefault();\n\n  if (event.key === 'ArrowLeft') {\n    if (index === 0) skinsRef.value[skinsRef.value.length - 1]?.focus();\n    skinsRef.value[index - 1]?.focus();\n  }\n\n  if (event.key === 'ArrowRight') {\n    skinsRef.value[index + 1]?.focus();\n  }\n\n  if (event.key === 'Enter') {\n    if (skin) { selectSkin(skin); } else {\n      toggleSkinList();\n    }\n  }\n\n  if (event.key === 'Tab') {\n    if (event.shiftKey) {\n      emits('focus-last-emoji');\n    } else {\n      emits('focus-tabset');\n    }\n  }\n};\n\nfunction toggleSkinList () {\n  isOpen.value = !isOpen.value;\n  nextTick(() => skinsRef.value[0].focus());\n}\n\ndefineExpose({\n  focusSkinSelector,\n});\n</script>\n","<template>\n  <div class=\"d-emoji-picker__data\">\n    <img\n      v-if=\"emoji\"\n      class=\"d-icon d-icon--size-500\"\n      :alt=\"emoji.name\"\n      :aria-label=\"emoji.name\"\n      :title=\"emoji.name\"\n      :src=\"getImgSrc(emoji)\"\n    >\n    <div>{{ emoji?.name }}</div>\n  </div>\n</template>\n\n<script setup>\nimport { CDN_URL } from '@/components/emoji_picker/emoji_picker_constants';\n\ndefineProps({\n  /**\n   * Emoji data\n   * @type {Object}\n   * @default null\n   */\n  emoji: {\n    type: Object,\n    default: null,\n  },\n});\n\nfunction getImgSrc (emoji) {\n  if (emoji.date_added) { // if custom emoji\n    return emoji.image;\n  } else { // if regular emoji\n    return `${CDN_URL + emoji.unicode_character}.png`;\n  }\n}\n</script>\n","<template>\n  <div\n    class=\"d-emoji-picker\"\n  >\n    <div class=\"d-emoji-picker--header\">\n      <emoji-tabset\n        ref=\"tabsetRef\"\n        :emoji-filter=\"internalSearchQuery\"\n        :show-custom-emojis-tab=\"showCustomEmojisTab\"\n        :show-recently-used-tab=\"showRecentlyUsedTab\"\n        :scroll-into-tab=\"scrollIntoTab\"\n        :tab-set-labels=\"tabSetLabels\"\n        @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n        @focus-search-input=\"showSearch\n          ? $refs.searchInputRef.focusSearchInput()\n          : $refs.emojiSelectorRef.focusEmojiSelector()\"\n        @selected-tabset=\"scrollToSelectedTabset\"\n        @keydown.esc=\"emits('close')\"\n      />\n    </div>\n    <div class=\"d-emoji-picker--body\">\n      <emoji-search\n        v-if=\"showSearch\"\n        ref=\"searchInputRef\"\n        v-model=\"internalSearchQuery\"\n        :search-placeholder-label=\"searchPlaceholderLabel\"\n        @select-first-emoji=\"emits('selected-emoji', highlightedEmoji)\"\n        @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n        @focus-emoji-selector=\"$refs.emojiSelectorRef.focusEmojiSelector()\"\n        @keydown.esc=\"emits('close')\"\n      />\n      <emoji-selector\n        ref=\"emojiSelectorRef\"\n        :emoji-filter=\"internalSearchQuery\"\n        :skin-tone=\"skinTone\"\n        :tabset-labels=\"tabSetLabels\"\n        :search-results-label=\"searchResultsLabel\"\n        :search-no-results-label=\"searchNoResultsLabel\"\n        :recently-used-emojis=\"recentlyUsedEmojis\"\n        :custom-emojis=\"customEmojis\"\n        :selected-tabset=\"selectedTabset\"\n        @scroll-into-tab=\"updateScrollIntoTab\"\n        @highlighted-emoji=\"updateHighlightedEmoji\"\n        @selected-emoji=\"emits('selected-emoji', $event)\"\n        @focus-skin-selector=\"$refs.skinSelectorRef.focusSkinSelector()\"\n        @focus-search-input=\"showSearch ? $refs.searchInputRef.focusSearchInput() : $refs.tabsetRef.focusTabset()\"\n        @keydown.esc=\"emits('close')\"\n        @scroll-bottom-reached=\"emits('scroll-bottom-reached')\"\n      />\n    </div>\n    <div class=\"d-emoji-picker--footer\">\n      <dt-button\n        v-if=\"showAddEmojiButton && !highlightedEmoji\"\n        importance=\"outlined\"\n        :aria-label=\"addEmojiLabel\"\n        class=\"d-emoji-picker__add-emoji\"\n        @click=\"emits('add-emoji')\"\n      >\n        {{ addEmojiLabel }}\n      </dt-button>\n      <emoji-description :emoji=\"highlightedEmoji\" />\n      <emoji-skin-selector\n        ref=\"skinSelectorRef\"\n        :is-hovering=\"!!highlightedEmoji\"\n        :skin-selector-button-tooltip-label=\"skinSelectorButtonTooltipLabel\"\n        :skin-tone=\"skinTone\"\n        @skin-tone=\"emits('skin-tone', $event)\"\n        @focus-tabset=\"$refs.tabsetRef.focusTabset()\"\n        @focus-last-emoji=\"$refs.emojiSelectorRef.focusLastEmoji()\"\n        @keydown.esc=\"emits('close')\"\n      />\n    </div>\n  </div>\n</template>\n\n<script setup>\nimport EmojiSearch from './modules/emoji_search.vue';\nimport EmojiTabset from './modules/emoji_tabset.vue';\nimport EmojiSelector from './modules/emoji_selector.vue';\nimport EmojiSkinSelector from './modules/emoji_skin_selector.vue';\nimport EmojiDescription from './modules/emoji_description.vue';\nimport { DtButton } from '../button';\nimport { computed, ref, watch } from 'vue';\nimport { DialtoneLocalization } from '@/localization';\n\nconst props = defineProps({\n  /**\n   * The array with recently used  emoji object\n   * This list is necessary to fill the recently used tab\n   * @type {Array}\n   * @default []\n   * @example\n   * <dt-emoji-picker :recentlyUsedEmojis=\"[emojiObject, emojiObject]\" />\n   */\n  // TODO try to simplify this to achieve an array of unicode characters and not an entire emoji data object\n  recentlyUsedEmojis: {\n    type: Array,\n    default: () => [],\n  },\n\n  /**\n     * The array with custom emojis object\n     * This list is necessary to fill the custom tab\n     * @type {Array}\n     * @default []\n     * @example\n     * <dt-emoji-picker :customEmojis=\"[emojiObject, emojiObject]\" />\n     */\n  customEmojis: {\n    type: Array,\n  },\n\n  /**\n   * The skin tone to show the emojis\n   * This prop gives the possibility to use the skin tone selected by the user previously\n   * @type {String}\n   * @default 'Default'\n   * @values 'Default', 'Light', 'MediumLight', 'Medium', 'MediumDark', 'Dark'\n   * @example\n   * <dt-emoji-picker :skinTone=\"'Default'\" />\n   */\n  skinTone: {\n    type: String,\n    default: 'Default',\n  },\n\n  /**\n\n   * Sets the search query that filters emojis.\n   * @type {String}\n   * @example\n   * <dt-emoji-picker search-query=\"smile\" />\n   */\n  searchQuery: {\n    type: String,\n    default: '',\n  },\n\n  /**\n   * Shows the search input\n   * @type {Boolean}\n   * @example\n   * <dt-emoji-picker :show-search=\"false\" />\n   */\n  showSearch: {\n    type: Boolean,\n    default: true,\n  },\n\n  /**\n     * Shows the add emoji button in the footer when no emoji is highlighted\n     * @type {Boolean}\n     * @example\n     * <dt-emoji-picker :show-add-emoji-button=\"true\" />\n     */\n    showAddEmojiButton: {\n      type: Boolean,\n      default: false,\n    },\n});\n\nconst emits = defineEmits(\n  [\n    /**\n     * It will emit the selected emoji\n     * @event selected-emoji\n     * @param {Object} emoji - The selected emoji from the emoji selector\n     */\n    'selected-emoji',\n\n    /**\n   * Emitted when the user reach bottom scroll\n   * This is being handled by handleScroll method\n   * @event scroll-bottom-reached\n   */\n    'scroll-bottom-reached',\n\n    /**\n     * It will emit the selected skin tone\n     * @event skin-tone\n     * @param {String} skin - The selected skin tone from the skin selector\n     */\n    'skin-tone',\n\n    /**\n     * Since the keyboard events are encapsulated, we emit this event to close the picker\n     * @event close\n     */\n    'close',\n\n    /**\n     * Emitted when the user clicks on the add emoji button\n     * @event add-emoji\n     */\n    'add-emoji',\n  ],\n);\n\nconst internalSearchQuery = ref(props.searchQuery.value);\nconst highlightedEmoji = ref(null);\nconst selectedTabset = ref({});\n\nconst scrollIntoTab = ref(0);\n\nconst showRecentlyUsedTab = computed(() => props.recentlyUsedEmojis?.length > 0);\nconst showCustomEmojisTab = computed(() => props.customEmojis?.length > 0);\n\nconst i18n = new DialtoneLocalization();\n\nconst tabSetLabels = [\n  i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_RECENTLY_USED_LABEL'),\n  i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_SMILEYS_AND_PEOPLE_LABEL'),\n  i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_NATURE_LABEL'),\n  i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_FOOD_LABEL'),\n  i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_ACTIVITY_LABEL'),\n  i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_TRAVEL_LABEL'),\n  i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_OBJECTS_LABEL'),\n  i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_SYMBOLS_LABEL'),\n  i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_FLAGS_LABEL'),\n  i18n.$t('DIALTONE_EMOJI_PICKER_TABSET_CUSTOM_LABEL'),\n];\n\nconst searchPlaceholderLabel = i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_PLACEHOLDER_LABEL');\nconst searchResultsLabel = i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_RESULTS_LABEL');\nconst searchNoResultsLabel = i18n.$t('DIALTONE_EMOJI_PICKER_SEARCH_NO_RESULTS_LABEL');\nconst skinSelectorButtonTooltipLabel = i18n.$t('DIALTONE_EMOJI_PICKER_SKIN_SELECTOR_BUTTON_TOOLTIP_LABEL');\nconst addEmojiLabel = i18n.$t('DIALTONE_EMOJI_PICKER_ADD_EMOJI_LABEL');\n\nwatch(\n  () => props.searchQuery,\n  (newValue) => {\n    internalSearchQuery.value = newValue;\n  },\n);\n\n/**\n * Handle the selected tabset event\n * We're creating a new object with the same value as selectedTabset and assigning it back to selectedTabset.\n * Vue will see this as a new object and trigger the watcher in the child component.\n * Using this method, we are able to trigger the watcher in the child component even if the value being passed is the\n * same as the previous value.\n * @event selectedTabset\n * @param tabId {String} - The id of the tab that was selected\n */\nfunction scrollToSelectedTabset (tabId) {\n  internalSearchQuery.value = '';\n  selectedTabset.value = { ...selectedTabset.value, tabId };\n}\n\nfunction updateScrollIntoTab (value) {\n  scrollIntoTab.value = value;\n}\n\nfunction updateHighlightedEmoji (emoji) {\n  highlightedEmoji.value = emoji;\n}\n</script>\n"],"mappings":"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"}