@dialpad/dialtone-vue 3.222.0 → 3.222.2

package/dist/lib/combobox-with-popover/combobox-with-popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-with-popover.cjs","names":[],"sources":["../../../components/combobox_with_popover/combobox_with_popover.vue"],"sourcesContent":["<template>\n  <dt-combobox\n    ref=\"combobox\"\n    :loading=\"loading\"\n    :label=\"label\"\n    :label-visible=\"labelVisible\"\n    :size=\"size\"\n    :description=\"description\"\n    :empty-list=\"emptyList\"\n    :empty-state-message=\"emptyStateMessage\"\n    :show-list=\"isListShown\"\n    :on-beginning-of-list=\"onBeginningOfList\"\n    :on-end-of-list=\"onEndOfList\"\n    :list-rendered-outside=\"true\"\n    :list-id=\"listId\"\n    data-qa=\"dt-combobox\"\n    v-bind=\"comboboxListeners\"\n  >\n    <template\n      #input=\"{ inputProps }\"\n    >\n      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n      <div\n        :id=\"externalAnchor\"\n        ref=\"input\"\n        @focusin=\"onFocusIn\"\n        @keydown.up=\"openOnArrowKeyPress($event)\"\n        @keydown.down=\"openOnArrowKeyPress($event)\"\n      >\n        <slot\n          name=\"input\"\n          :input-props=\"inputProps\"\n          :on-input=\"handleDisplayList\"\n        />\n      </div>\n    </template>\n    <template #list=\"{ opened, listProps, clearHighlightIndex }\">\n      <dt-popover\n        ref=\"popover\"\n        v-model:open=\"isListShown\"\n        :hide-on-click=\"false\"\n        :max-height=\"maxHeight\"\n        :max-width=\"maxWidth\"\n        :offset=\"popoverOffset\"\n        :sticky=\"popoverSticky\"\n        placement=\"bottom-start\"\n        initial-focus-element=\"none\"\n        padding=\"none\"\n        role=\"listbox\"\n        :external-anchor=\"externalAnchor\"\n        :content-width=\"contentWidth\"\n        :content-appear=\"true\"\n        :content-tabindex=\"null\"\n        :modal=\"false\"\n        :auto-focus=\"false\"\n        :append-to=\"appendTo\"\n        :dialog-class=\"dialogClass\"\n        :transition=\"transition\"\n        @opened=\"opened\"\n      >\n        <template\n          v-if=\"hasSlotContent($slots.header)\"\n          #headerContent\n        >\n          <div\n            ref=\"header\"\n          >\n            <slot name=\"header\" />\n          </div>\n        </template>\n\n        <template #content>\n          <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n          <div\n            ref=\"listWrapper\"\n            :class=\"[\n              'd-recipe-combobox-with-popover__list',\n              DROPDOWN_PADDING_CLASSES[padding],\n              listClass,\n            ]\"\n            @mouseleave=\"clearHighlightIndex\"\n            @focusout=\"clearHighlightIndex\"\n          >\n            <combobox-loading-list\n              v-if=\"loading\"\n              v-bind=\"listProps\"\n            />\n            <combobox-empty-list\n              v-else-if=\"emptyList && emptyStateMessage\"\n              v-bind=\"listProps\"\n              :message=\"emptyStateMessage\"\n            />\n            <slot\n              v-else\n              name=\"list\"\n              :list-props=\"listProps\"\n            />\n          </div>\n        </template>\n\n        <template\n          v-if=\"hasSlotContent($slots.footer)\"\n          #footerContent\n        >\n          <div\n            ref=\"footer\"\n          >\n            <slot name=\"footer\" />\n          </div>\n        </template>\n      </dt-popover>\n    </template>\n  </dt-combobox>\n</template>\n\n<script>\nimport ComboboxLoadingList from '@/components/combobox/combobox_loading-list.vue';\nimport ComboboxEmptyList from '@/components/combobox/combobox_empty-list.vue';\nimport { DtCombobox, COMBOBOX_LABEL_SIZES } from '@/components/combobox';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_CONTENT_WIDTHS } from '@/components/popover';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DROPDOWN_PADDING_CLASSES } from '@/components/dropdown';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtComboboxWithPopover',\n\n  components: {\n    DtCombobox,\n    DtPopover,\n    ComboboxLoadingList,\n    ComboboxEmptyList,\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     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\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     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class for the popover dialog element.\n     */\n    dialogClass: {\n      type: [String, Array, Object],\n      default: '',\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 maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    maxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Vertical padding size around the list element.\n     */\n    padding: {\n      type: String,\n      default: 'small',\n      validator: (padding) => {\n        return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Width configuration for the popover content. When its value is 'anchor',\n     * the popover content will have the same width as the anchor.\n     */\n    contentWidth: {\n      type: String,\n      default: null,\n      validator: contentWidth => POPOVER_CONTENT_WIDTHS.includes(contentWidth),\n    },\n\n    /**\n     * If the list should be shown by pressing up or down arrow key on the input element.\n     * This can be set when not passing showList prop.\n     */\n    openWithArrowKeys: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the popover content box from its anchor element\n     *  by the specified number of pixels.\n     */\n    popoverOffset: {\n      type: Array,\n      default: () => [0, 4],\n    },\n\n    /**\n     * If the popover sticks to the input.\n     */\n    popoverSticky: {\n      type: [Boolean, String],\n      default: false,\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\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     */\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     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when 'escape' key is pressed\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when an item is highlighted\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Emitted when items are shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      DROPDOWN_PADDING_CLASSES,\n      isListShown: false,\n      isInputFocused: false,\n      isListFocused: false,\n      externalAnchor: getUniqueString(),\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    comboboxListeners () {\n      return {\n        ...this.$attrs,\n\n        onSelect: this.onSelect,\n\n        onEscape: this.onEscape,\n\n        onHighlight: this.onHighlight,\n      };\n    },\n  },\n\n  watch: {\n    showList: {\n      handler: function (show) {\n        if (show !== null) {\n          this.isListShown = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isListShown (val) {\n      if (val) {\n        window.addEventListener('mousedown', this.onFocusOut);\n      } else {\n        window.removeEventListener('mousedown', this.onFocusOut);\n      }\n      this.onOpened(val);\n    },\n  },\n\n  methods: {\n    handleDisplayList (value) {\n      if (!this.hasSuggestionList && value) { this.showComboboxList(); }\n      if (!this.hasSuggestionList && !value) { this.closeComboboxList(); }\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = true;\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = false;\n    },\n\n    onSelect (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('select', highlightIndex);\n      if (!this.hasSuggestionList) {\n        // we don't display the list before the user has typed anything\n        this.closeComboboxList();\n      }\n    },\n\n    onEscape () {\n      this.$emit('escape');\n      this.closeComboboxList();\n    },\n\n    onHighlight (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('highlight', highlightIndex);\n    },\n\n    onOpened (opened) {\n      this.$emit('opened', opened);\n    },\n\n    onFocusIn (e) {\n      if (this.hasSuggestionList && e && this.$refs.input?.querySelector('input') === e.target) {\n        // only trigger if we show suggestion list when focused, and\n        // it's the input specifically that was focused\n        this.showComboboxList();\n      }\n    },\n\n    onFocusOut (e) {\n      // Check if the focus change was to another target within the combobox component\n      const popoverEl = this.$refs.popover?.tip?.popper;\n      const comboboxEl = this.$refs.input;\n\n      if (e.composedPath()?.some(el => [popoverEl, comboboxEl].includes(el))) return;\n\n      // If outside the combobox then close\n      this.closeComboboxList();\n    },\n\n    openOnArrowKeyPress () {\n      if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) { return; }\n\n      this.showComboboxList();\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"combobox-with-popover.cjs","names":[],"sources":["../../../components/combobox_with_popover/combobox_with_popover.vue"],"sourcesContent":["<template>\n  <dt-combobox\n    ref=\"combobox\"\n    :loading=\"loading\"\n    :label=\"label\"\n    :label-visible=\"labelVisible\"\n    :size=\"size\"\n    :description=\"description\"\n    :empty-list=\"emptyList\"\n    :empty-state-message=\"emptyStateMessage\"\n    :show-list=\"isListShown\"\n    :on-beginning-of-list=\"onBeginningOfList\"\n    :on-end-of-list=\"onEndOfList\"\n    :list-rendered-outside=\"true\"\n    :list-id=\"listId\"\n    data-qa=\"dt-combobox\"\n    v-bind=\"comboboxListeners\"\n  >\n    <template\n      #input=\"{ inputProps }\"\n    >\n      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n      <div\n        :id=\"externalAnchor\"\n        ref=\"input\"\n        @focusin=\"onFocusIn\"\n        @keydown.up=\"openOnArrowKeyPress($event)\"\n        @keydown.down=\"openOnArrowKeyPress($event)\"\n      >\n        <slot\n          name=\"input\"\n          :input-props=\"inputProps\"\n          :on-input=\"handleDisplayList\"\n        />\n      </div>\n    </template>\n    <template #list=\"{ opened, listProps, clearHighlightIndex }\">\n      <dt-popover\n        ref=\"popover\"\n        v-model:open=\"isListShown\"\n        :hide-on-click=\"false\"\n        :max-height=\"maxHeight\"\n        :max-width=\"maxWidth\"\n        :offset=\"popoverOffset\"\n        :sticky=\"popoverSticky\"\n        placement=\"bottom-start\"\n        initial-focus-element=\"none\"\n        padding=\"none\"\n        role=\"listbox\"\n        :external-anchor=\"externalAnchor\"\n        :content-width=\"contentWidth\"\n        :content-appear=\"true\"\n        :content-tabindex=\"null\"\n        :modal=\"false\"\n        :auto-focus=\"false\"\n        :append-to=\"appendTo\"\n        :dialog-class=\"dialogClass\"\n        :transition=\"transition\"\n        @opened=\"opened\"\n      >\n        <template\n          v-if=\"hasSlotContent($slots.header)\"\n          #headerContent\n        >\n          <div\n            ref=\"header\"\n          >\n            <slot name=\"header\" />\n          </div>\n        </template>\n\n        <template #content>\n          <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n          <div\n            ref=\"listWrapper\"\n            :class=\"[\n              'd-recipe-combobox-with-popover__list',\n              DROPDOWN_PADDING_CLASSES[padding],\n              listClass,\n            ]\"\n            @mouseleave=\"clearHighlightIndex\"\n            @focusout=\"clearHighlightIndex\"\n          >\n            <combobox-loading-list\n              v-if=\"loading\"\n              v-bind=\"listProps\"\n            />\n            <combobox-empty-list\n              v-else-if=\"emptyList && emptyStateMessage\"\n              v-bind=\"listProps\"\n              :message=\"emptyStateMessage\"\n            />\n            <slot\n              v-else\n              name=\"list\"\n              :list-props=\"listProps\"\n            />\n          </div>\n        </template>\n\n        <template\n          v-if=\"hasSlotContent($slots.footer)\"\n          #footerContent\n        >\n          <div\n            ref=\"footer\"\n          >\n            <slot name=\"footer\" />\n          </div>\n        </template>\n      </dt-popover>\n    </template>\n  </dt-combobox>\n</template>\n\n<script>\nimport ComboboxLoadingList from '@/components/combobox/combobox_loading-list.vue';\nimport ComboboxEmptyList from '@/components/combobox/combobox_empty-list.vue';\nimport { DtCombobox, COMBOBOX_LABEL_SIZES } from '@/components/combobox';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_CONTENT_WIDTHS } from '@/components/popover';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { HTML_ELEMENT_TYPE } from '@/common/constants';\nimport { DROPDOWN_PADDING_CLASSES } from '@/components/dropdown';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtComboboxWithPopover',\n\n  components: {\n    DtCombobox,\n    DtPopover,\n    ComboboxLoadingList,\n    ComboboxEmptyList,\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     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\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     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class for the popover dialog element.\n     */\n    dialogClass: {\n      type: [String, Array, Object],\n      default: '',\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 maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    maxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Vertical padding size around the list element.\n     */\n    padding: {\n      type: String,\n      default: 'small',\n      validator: (padding) => {\n        return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Width configuration for the popover content. When its value is 'anchor',\n     * the popover content will have the same width as the anchor.\n     */\n    contentWidth: {\n      type: String,\n      default: null,\n      validator: contentWidth => POPOVER_CONTENT_WIDTHS.includes(contentWidth),\n    },\n\n    /**\n     * If the list should be shown by pressing up or down arrow key on the input element.\n     * This can be set when not passing showList prop.\n     */\n    openWithArrowKeys: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the popover content box from its anchor element\n     *  by the specified number of pixels.\n     */\n    popoverOffset: {\n      type: Array,\n      default: () => [0, 4],\n    },\n\n    /**\n     * If the popover sticks to the input.\n     */\n    popoverSticky: {\n      type: [Boolean, String],\n      default: false,\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\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     */\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     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTML_ELEMENT_TYPE, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when 'escape' key is pressed\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when an item is highlighted\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Emitted when items are shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      DROPDOWN_PADDING_CLASSES,\n      isListShown: false,\n      isInputFocused: false,\n      isListFocused: false,\n      externalAnchor: getUniqueString(),\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    comboboxListeners () {\n      return {\n        ...this.$attrs,\n\n        onSelect: this.onSelect,\n\n        onEscape: this.onEscape,\n\n        onHighlight: this.onHighlight,\n      };\n    },\n  },\n\n  watch: {\n    showList: {\n      handler: function (show) {\n        if (show !== null) {\n          this.isListShown = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isListShown (val) {\n      if (val) {\n        window.addEventListener('mousedown', this.onFocusOut);\n      } else {\n        window.removeEventListener('mousedown', this.onFocusOut);\n      }\n      this.onOpened(val);\n    },\n  },\n\n  methods: {\n    handleDisplayList (value) {\n      if (!this.hasSuggestionList && value) { this.showComboboxList(); }\n      if (!this.hasSuggestionList && !value) { this.closeComboboxList(); }\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = true;\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = false;\n    },\n\n    onSelect (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('select', highlightIndex);\n      if (!this.hasSuggestionList) {\n        // we don't display the list before the user has typed anything\n        this.closeComboboxList();\n      }\n    },\n\n    onEscape () {\n      this.$emit('escape');\n      this.closeComboboxList();\n    },\n\n    onHighlight (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('highlight', highlightIndex);\n    },\n\n    onOpened (opened) {\n      this.$emit('opened', opened);\n    },\n\n    onFocusIn (e) {\n      if (this.hasSuggestionList && e && this.$refs.input?.querySelector('input') === e.target) {\n        // only trigger if we show suggestion list when focused, and\n        // it's the input specifically that was focused\n        this.showComboboxList();\n      }\n    },\n\n    onFocusOut (e) {\n      // Check if the focus change was to another target within the combobox component\n      const popoverEl = this.$refs.popover?.tip?.popper;\n      const comboboxEl = this.$refs.input;\n\n      if (e.composedPath()?.some(el => [popoverEl, comboboxEl].includes(el))) return;\n\n      // If outside the combobox then close\n      this.closeComboboxList();\n    },\n\n    openOnArrowKeyPress () {\n      if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) { return; }\n\n      this.showComboboxList();\n    },\n  },\n};\n</script>\n"],"mappings":"+mBA4HA,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,wBAEN,WAAY,CACV,WAAA,EAAA,EACA,UAAA,EAAA,QACA,oBAAA,EAAA,QACA,kBAAA,EAAA,QACD,CAED,MAAO,CAIL,MAAO,CACL,KAAM,OACN,SAAU,GACX,CAMD,aAAc,CACZ,KAAM,QACN,QAAS,GACV,CAMD,KAAM,CACJ,KAAM,OACN,QAAS,KACT,UAAY,GAAM,OAAO,OAAO,EAAA,qBAAqB,CAAC,SAAS,EAAE,CAClE,CAKD,YAAa,CACX,KAAM,OACN,QAAS,GACV,CAQD,SAAU,CACR,KAAM,QACN,QAAS,KACV,CAMD,OAAQ,CACN,KAAM,OACN,SAAW,CAAE,OAAO,EAAA,iBAAiB,EACtC,CAKD,UAAW,CACT,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,kBAAmB,CACjB,KAAM,SACN,QAAS,KACV,CAKD,YAAa,CACX,KAAM,SACN,QAAS,KACV,CAMD,UAAW,CACT,KAAM,OACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,OACN,QAAS,GACV,CAKD,QAAS,CACP,KAAM,OACN,QAAS,QACT,UAAY,GACH,OAAO,KAAK,EAAA,yBAAyB,CAAC,KAAM,GAAS,IAAS,EAAQ,CAEhF,CAMD,aAAc,CACZ,KAAM,OACN,QAAS,KACT,UAAW,GAAgB,EAAA,uBAAuB,SAAS,EAAa,CACzE,CAMD,kBAAmB,CACjB,KAAM,QACN,QAAS,GACV,CAMD,cAAe,CACb,KAAM,MACN,YAAe,CAAC,EAAG,EAAE,CACtB,CAKD,cAAe,CACb,KAAM,CAAC,QAAS,OAAO,CACvB,QAAS,GACV,CAMD,kBAAmB,CACjB,KAAM,QACN,QAAS,GACV,CAKD,QAAS,CACP,KAAM,QACN,QAAS,GACV,CAKD,UAAW,CACT,KAAM,QACN,QAAS,GACV,CAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,GACV,CAOD,SAAU,CACR,KAAM,CAAC,EAAA,kBAAmB,OAAO,CACjC,QAAS,OACT,UAAW,GACF,EAAA,yBAAyB,SAAS,EAAQ,EAC5C,aAAoB,YAE5B,CAMD,WAAY,CACV,KAAM,OACN,QAAS,OACV,CACF,CAED,MAAO,CAOL,SAOA,SAQA,YAQA,SACD,CAED,MAAQ,CACN,MAAO,CACL,yBAAA,EAAA,yBACA,YAAa,GACb,eAAgB,GAChB,cAAe,GACf,eAAgB,EAAA,iBAAiB,CACjC,eAAA,EAAA,eACD,EAGH,SAAU,CACR,mBAAqB,CACnB,MAAO,CACL,GAAG,KAAK,OAER,SAAU,KAAK,SAEf,SAAU,KAAK,SAEf,YAAa,KAAK,YACnB,EAEJ,CAED,MAAO,CACL,SAAU,CACR,QAAS,SAAU,EAAM,CACnB,IAAS,OACX,KAAK,YAAc,IAIvB,UAAW,GACZ,CAED,YAAa,EAAK,CACZ,EACF,OAAO,iBAAiB,YAAa,KAAK,WAAW,CAErD,OAAO,oBAAoB,YAAa,KAAK,WAAW,CAE1D,KAAK,SAAS,EAAI,EAErB,CAED,QAAS,CACP,kBAAmB,EAAO,CACpB,CAAC,KAAK,mBAAqB,GAAS,KAAK,kBAAkB,CAC3D,CAAC,KAAK,mBAAqB,CAAC,GAAS,KAAK,mBAAmB,EAGnE,kBAAoB,CACd,KAAK,WACT,KAAK,YAAc,KAGrB,mBAAqB,CACf,KAAK,WACT,KAAK,YAAc,KAGrB,SAAU,EAAgB,CACpB,KAAK,UAET,KAAK,MAAM,SAAU,EAAe,CAC/B,KAAK,mBAER,KAAK,mBAAmB,GAI5B,UAAY,CACV,KAAK,MAAM,SAAS,CACpB,KAAK,mBAAmB,EAG1B,YAAa,EAAgB,CACvB,KAAK,SAET,KAAK,MAAM,YAAa,EAAe,EAGzC,SAAU,EAAQ,CAChB,KAAK,MAAM,SAAU,EAAO,EAG9B,UAAW,EAAG,CACR,KAAK,mBAAqB,GAAK,KAAK,MAAM,OAAO,cAAc,QAAO,GAAM,EAAE,QAGhF,KAAK,kBAAkB,EAI3B,WAAY,EAAG,CAEb,IAAM,EAAY,KAAK,MAAM,SAAS,KAAK,OACrC,EAAa,KAAK,MAAM,MAE1B,EAAE,cAAc,EAAE,KAAK,GAAM,CAAC,EAAW,EAAW,CAAC,SAAS,EAAG,CAAC,EAGtE,KAAK,mBAAmB,EAG1B,qBAAuB,CACjB,KAAK,WAAa,MAAQ,KAAK,aAAe,CAAC,KAAK,mBAExD,KAAK,kBAAkB,EAE1B,CACF,aAzaW,IAAI,SAAQ,oCAwCZ,IAAI,SAAQ,wPAOR,GAAA,EAAA,EAAA,YAAA,CA9GZ,IAAI,WACH,QAAS,EAAA,QACT,MAAO,EAAA,MACP,gBAAe,EAAA,aACf,KAAM,EAAA,KACN,YAAa,EAAA,YACb,aAAY,EAAA,UACZ,sBAAqB,EAAA,kBACrB,YAAW,EAAA,YACX,uBAAsB,EAAA,kBACtB,iBAAgB,EAAA,YAChB,wBAAuB,GACvB,UAAS,EAAA,OACV,UAAQ,eACA,EAAA,kBAAiB,CAAA,CAGtB,OAAA,EAAA,EAAA,UAeK,CAfI,gBAAU,EAAA,EAAA,EAAA,oBAed,MAAA,CAXH,GAAI,EAAA,eACL,IAAI,QACH,UAAO,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,WAAA,EAAA,UAAA,GAAA,EAAS,EAClB,UAAO,CAAA,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,UAAA,GAAK,EAAA,oBAAoB,EAAM,CAAA,CAAA,KAAA,CAAA,EAAA,EAAA,KAAA,EAAA,IAAA,EAAA,EAAA,UAAA,GACxB,EAAA,oBAAoB,EAAM,CAAA,CAAA,OAAA,CAAA,EAAA,oBAMvC,EAAA,OAAA,QAAA,CAFc,aACb,QAAU,EAAA,6BAIN,MAAA,EAAA,EAAA,UA0EI,CA1EI,SAAQ,YAAW,yBAAmB,EAAA,EAAA,EAAA,aA0E1C,EAAA,CAxEX,IAAI,UACI,KAAM,EAAA,2CAAA,EAAA,YAAW,GACxB,gBAAe,GACf,aAAY,EAAA,UACZ,YAAW,EAAA,SACX,OAAQ,EAAA,cACR,OAAQ,EAAA,cACT,UAAU,eACV,wBAAsB,OACtB,QAAQ,OACR,KAAK,UACJ,kBAAiB,EAAA,eACjB,gBAAe,EAAA,aACf,iBAAgB,GAChB,mBAAkB,KAClB,MAAO,GACP,aAAY,GACZ,YAAW,EAAA,SACX,eAAc,EAAA,YACd,WAAY,EAAA,WACZ,SAAQ,sBAaE,SAAA,EAAA,EAAA,aA0BH,EAAA,EAAA,EAAA,oBAAA,MAAA,CAvBJ,IAAI,cACH,OAAA,EAAA,EAAA,gBAAK,wCAAwE,EAAA,yBAAyB,EAAA,SAAwB,EAAA,YAK9H,aAAY,EACZ,WAAU,IAGH,EAAA,UAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAEN,GAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,YAAA,CAAA,IAAA,EAAA,CADQ,EAAS,CAAA,CAAA,KAAA,GAAA,EAGN,EAAA,WAAa,EAAA,oBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,aAGxB,GAAA,EAAA,EAAA,YAAA,CAAA,IAAA,EAAA,CAFQ,EAAS,CAChB,QAAS,EAAA,kBAAiB,CAAA,CAAA,KAAA,GAAA,CAAA,UAAA,CAAA,GAAA,EAAA,EAAA,YAM3B,EAAA,OAAA,OAAA,OADa,6BAlCX,EAAA,eAAe,EAAA,OAAO,OAAM,CAAA,MACjC,qCAMK,EAAA,EAAA,EAAA,oBAAA,MAJN,EAIM,EAAA,EAAA,EAAA,YADkB,EAAA,OAAA,SAAA,CAAA,CAAA,IAAA,CAAA,CAAA,iBAkClB,EAAA,eAAe,EAAA,OAAO,OAAM,CAAA,MACjC,qCAMK,EAAA,EAAA,EAAA,oBAAA,MAJN,EAIM,EAAA,EAAA,EAAA,YADkB,EAAA,OAAA,SAAA,CAAA,CAAA,IAAA,CAAA,CAAA"}

package/dist/lib/combobox-with-popover/combobox-with-popover.js

@@ -1,22 +1,23 @@
-import { getUniqueString as e, hasSlotContent as t } from "../../common/utils/index.js";
-import { t as n } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import r from "../combobox/combobox-loading-list.js";
-import i from "../combobox/combobox-empty-list.js";
-import { t as a } from "../../combobox-DgClbLOg.js";
-import { COMBOBOX_LABEL_SIZES as o } from "../combobox/combobox-constants.js";
-import { POPOVER_APPEND_TO_VALUES as s, POPOVER_CONTENT_WIDTHS as c } from "../popover/popover-constants.js";
-import l from "../popover/popover.js";
-import { DROPDOWN_PADDING_CLASSES as u } from "../dropdown/dropdown-constants.js";
-import { createBlock as d, createElementVNode as f, createSlots as p, createVNode as m, mergeProps as h, normalizeClass as g, normalizeProps as _, openBlock as v, renderSlot as y, resolveComponent as b, withCtx as x, withKeys as S } from "vue";
+import { HTML_ELEMENT_TYPE as e } from "../../common/constants/index.js";
+import { getUniqueString as t, hasSlotContent as n } from "../../common/utils/index.js";
+import { t as r } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import i from "../combobox/combobox-loading-list.js";
+import a from "../combobox/combobox-empty-list.js";
+import { t as o } from "../../combobox-DgClbLOg.js";
+import { COMBOBOX_LABEL_SIZES as s } from "../combobox/combobox-constants.js";
+import { POPOVER_APPEND_TO_VALUES as c, POPOVER_CONTENT_WIDTHS as l } from "../popover/popover-constants.js";
+import u from "../popover/popover.js";
+import { DROPDOWN_PADDING_CLASSES as d } from "../dropdown/dropdown-constants.js";
+import { createBlock as f, createElementVNode as p, createSlots as m, createVNode as h, mergeProps as g, normalizeClass as _, normalizeProps as v, openBlock as y, renderSlot as b, resolveComponent as x, withCtx as S, withKeys as C } from "vue";
 //#region components/combobox_with_popover/combobox_with_popover.vue
-var C = {
+var w = {
 	compatConfig: { MODE: 3 },
 	name: "DtComboboxWithPopover",
 	components: {
-		DtCombobox: a,
-		DtPopover: l,
-		ComboboxLoadingList: r,
-		ComboboxEmptyList: i
+		DtCombobox: o,
+		DtPopover: u,
+		ComboboxLoadingList: i,
+		ComboboxEmptyList: a
 	},
 	props: {
 		label: {
@@ -30,7 +31,7 @@ var C = {
 		size: {
 			type: String,
 			default: null,
-			validator: (e) => Object.values(o).includes(e)
+			validator: (e) => Object.values(s).includes(e)
 		},
 		description: {
 			type: String,
@@ -43,7 +44,7 @@ var C = {
 		listId: {
 			type: String,
 			default() {
-				return e();
+				return t();
 			}
 		},
 		listClass: {
@@ -81,12 +82,12 @@ var C = {
 		padding: {
 			type: String,
 			default: "small",
-			validator: (e) => Object.keys(u).some((t) => t === e)
+			validator: (e) => Object.keys(d).some((t) => t === e)
 		},
 		contentWidth: {
 			type: String,
 			default: null,
-			validator: (e) => c.includes(e)
+			validator: (e) => l.includes(e)
 		},
 		openWithArrowKeys: {
 			type: Boolean,
@@ -117,9 +118,9 @@ var C = {
 			default: ""
 		},
 		appendTo: {
-			type: [HTMLElement, String],
+			type: [e, String],
 			default: "body",
-			validator: (e) => s.includes(e) || e instanceof HTMLElement
+			validator: (e) => c.includes(e) || e instanceof HTMLElement
 		},
 		transition: {
 			type: String,
@@ -134,12 +135,12 @@ var C = {
 	],
 	data() {
 		return {
-			DROPDOWN_PADDING_CLASSES: u,
+			DROPDOWN_PADDING_CLASSES: d,
 			isListShown: !1,
 			isInputFocused: !1,
 			isListFocused: !1,
-			externalAnchor: e(),
-			hasSlotContent: t
+			externalAnchor: t(),
+			hasSlotContent: n
 		};
 	},
 	computed: { comboboxListeners() {
@@ -194,10 +195,10 @@ var C = {
 			this.showList !== null || this.isListShown || !this.openWithArrowKeys || this.showComboboxList();
 		}
 	}
-}, w = ["id"], T = { ref: "header" }, E = ["onMouseleave", "onFocusout"], D = { ref: "footer" };
-function O(e, t, n, r, i, a) {
-	let o = b("combobox-loading-list"), s = b("combobox-empty-list"), c = b("dt-popover"), l = b("dt-combobox");
-	return v(), d(l, h({
+}, T = ["id"], E = { ref: "header" }, D = ["onMouseleave", "onFocusout"], O = { ref: "footer" };
+function k(e, t, n, r, i, a) {
+	let o = x("combobox-loading-list"), s = x("combobox-empty-list"), c = x("dt-popover"), l = x("dt-combobox");
+	return y(), f(l, g({
 		ref: "combobox",
 		loading: n.loading,
 		label: n.label,
@@ -213,16 +214,16 @@ function O(e, t, n, r, i, a) {
 		"list-id": n.listId,
 		"data-qa": "dt-combobox"
 	}, a.comboboxListeners), {
-		input: x(({ inputProps: n }) => [f("div", {
+		input: S(({ inputProps: n }) => [p("div", {
 			id: i.externalAnchor,
 			ref: "input",
 			onFocusin: t[0] || (t[0] = (...e) => a.onFocusIn && a.onFocusIn(...e)),
-			onKeydown: [t[1] || (t[1] = S((e) => a.openOnArrowKeyPress(e), ["up"])), t[2] || (t[2] = S((e) => a.openOnArrowKeyPress(e), ["down"]))]
-		}, [y(e.$slots, "input", {
+			onKeydown: [t[1] || (t[1] = C((e) => a.openOnArrowKeyPress(e), ["up"])), t[2] || (t[2] = C((e) => a.openOnArrowKeyPress(e), ["down"]))]
+		}, [b(e.$slots, "input", {
 			inputProps: n,
 			onInput: a.handleDisplayList
-		})], 40, w)]),
-		list: x(({ opened: r, listProps: a, clearHighlightIndex: l }) => [m(c, {
+		})], 40, T)]),
+		list: S(({ opened: r, listProps: a, clearHighlightIndex: l }) => [h(c, {
 			ref: "popover",
 			open: i.isListShown,
 			"onUpdate:open": t[3] || (t[3] = (e) => i.isListShown = e),
@@ -245,28 +246,28 @@ function O(e, t, n, r, i, a) {
 			"dialog-class": n.dialogClass,
 			transition: n.transition,
 			onOpened: r
-		}, p({
-			content: x(() => [f("div", {
+		}, m({
+			content: S(() => [p("div", {
 				ref: "listWrapper",
-				class: g([
+				class: _([
 					"d-recipe-combobox-with-popover__list",
 					i.DROPDOWN_PADDING_CLASSES[n.padding],
 					n.listClass
 				]),
 				onMouseleave: l,
 				onFocusout: l
-			}, [n.loading ? (v(), d(o, _(h({ key: 0 }, a)), null, 16)) : n.emptyList && n.emptyStateMessage ? (v(), d(s, h({ key: 1 }, a, { message: n.emptyStateMessage }), null, 16, ["message"])) : y(e.$slots, "list", {
+			}, [n.loading ? (y(), f(o, v(g({ key: 0 }, a)), null, 16)) : n.emptyList && n.emptyStateMessage ? (y(), f(s, g({ key: 1 }, a, { message: n.emptyStateMessage }), null, 16, ["message"])) : b(e.$slots, "list", {
 				key: 2,
 				listProps: a
-			})], 42, E)]),
+			})], 42, D)]),
 			_: 2
 		}, [i.hasSlotContent(e.$slots.header) ? {
 			name: "headerContent",
-			fn: x(() => [f("div", T, [y(e.$slots, "header")], 512)]),
+			fn: S(() => [p("div", E, [b(e.$slots, "header")], 512)]),
 			key: "0"
 		} : void 0, i.hasSlotContent(e.$slots.footer) ? {
 			name: "footerContent",
-			fn: x(() => [f("div", D, [y(e.$slots, "footer")], 512)]),
+			fn: S(() => [p("div", O, [b(e.$slots, "footer")], 512)]),
 			key: "1"
 		} : void 0]), 1032, [
 			"open",
@@ -296,8 +297,8 @@ function O(e, t, n, r, i, a) {
 		"list-id"
 	]);
 }
-var k = /* @__PURE__ */ n(C, [["render", O]]);
+var A = /* @__PURE__ */ r(w, [["render", k]]);
 //#endregion
-export { k as default };
+export { A as default };
 
 //# sourceMappingURL=combobox-with-popover.js.map

package/dist/lib/combobox-with-popover/combobox-with-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-with-popover.js","names":[],"sources":["../../../components/combobox_with_popover/combobox_with_popover.vue"],"sourcesContent":["<template>\n  <dt-combobox\n    ref=\"combobox\"\n    :loading=\"loading\"\n    :label=\"label\"\n    :label-visible=\"labelVisible\"\n    :size=\"size\"\n    :description=\"description\"\n    :empty-list=\"emptyList\"\n    :empty-state-message=\"emptyStateMessage\"\n    :show-list=\"isListShown\"\n    :on-beginning-of-list=\"onBeginningOfList\"\n    :on-end-of-list=\"onEndOfList\"\n    :list-rendered-outside=\"true\"\n    :list-id=\"listId\"\n    data-qa=\"dt-combobox\"\n    v-bind=\"comboboxListeners\"\n  >\n    <template\n      #input=\"{ inputProps }\"\n    >\n      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n      <div\n        :id=\"externalAnchor\"\n        ref=\"input\"\n        @focusin=\"onFocusIn\"\n        @keydown.up=\"openOnArrowKeyPress($event)\"\n        @keydown.down=\"openOnArrowKeyPress($event)\"\n      >\n        <slot\n          name=\"input\"\n          :input-props=\"inputProps\"\n          :on-input=\"handleDisplayList\"\n        />\n      </div>\n    </template>\n    <template #list=\"{ opened, listProps, clearHighlightIndex }\">\n      <dt-popover\n        ref=\"popover\"\n        v-model:open=\"isListShown\"\n        :hide-on-click=\"false\"\n        :max-height=\"maxHeight\"\n        :max-width=\"maxWidth\"\n        :offset=\"popoverOffset\"\n        :sticky=\"popoverSticky\"\n        placement=\"bottom-start\"\n        initial-focus-element=\"none\"\n        padding=\"none\"\n        role=\"listbox\"\n        :external-anchor=\"externalAnchor\"\n        :content-width=\"contentWidth\"\n        :content-appear=\"true\"\n        :content-tabindex=\"null\"\n        :modal=\"false\"\n        :auto-focus=\"false\"\n        :append-to=\"appendTo\"\n        :dialog-class=\"dialogClass\"\n        :transition=\"transition\"\n        @opened=\"opened\"\n      >\n        <template\n          v-if=\"hasSlotContent($slots.header)\"\n          #headerContent\n        >\n          <div\n            ref=\"header\"\n          >\n            <slot name=\"header\" />\n          </div>\n        </template>\n\n        <template #content>\n          <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n          <div\n            ref=\"listWrapper\"\n            :class=\"[\n              'd-recipe-combobox-with-popover__list',\n              DROPDOWN_PADDING_CLASSES[padding],\n              listClass,\n            ]\"\n            @mouseleave=\"clearHighlightIndex\"\n            @focusout=\"clearHighlightIndex\"\n          >\n            <combobox-loading-list\n              v-if=\"loading\"\n              v-bind=\"listProps\"\n            />\n            <combobox-empty-list\n              v-else-if=\"emptyList && emptyStateMessage\"\n              v-bind=\"listProps\"\n              :message=\"emptyStateMessage\"\n            />\n            <slot\n              v-else\n              name=\"list\"\n              :list-props=\"listProps\"\n            />\n          </div>\n        </template>\n\n        <template\n          v-if=\"hasSlotContent($slots.footer)\"\n          #footerContent\n        >\n          <div\n            ref=\"footer\"\n          >\n            <slot name=\"footer\" />\n          </div>\n        </template>\n      </dt-popover>\n    </template>\n  </dt-combobox>\n</template>\n\n<script>\nimport ComboboxLoadingList from '@/components/combobox/combobox_loading-list.vue';\nimport ComboboxEmptyList from '@/components/combobox/combobox_empty-list.vue';\nimport { DtCombobox, COMBOBOX_LABEL_SIZES } from '@/components/combobox';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_CONTENT_WIDTHS } from '@/components/popover';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DROPDOWN_PADDING_CLASSES } from '@/components/dropdown';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtComboboxWithPopover',\n\n  components: {\n    DtCombobox,\n    DtPopover,\n    ComboboxLoadingList,\n    ComboboxEmptyList,\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     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\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     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class for the popover dialog element.\n     */\n    dialogClass: {\n      type: [String, Array, Object],\n      default: '',\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 maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    maxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Vertical padding size around the list element.\n     */\n    padding: {\n      type: String,\n      default: 'small',\n      validator: (padding) => {\n        return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Width configuration for the popover content. When its value is 'anchor',\n     * the popover content will have the same width as the anchor.\n     */\n    contentWidth: {\n      type: String,\n      default: null,\n      validator: contentWidth => POPOVER_CONTENT_WIDTHS.includes(contentWidth),\n    },\n\n    /**\n     * If the list should be shown by pressing up or down arrow key on the input element.\n     * This can be set when not passing showList prop.\n     */\n    openWithArrowKeys: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the popover content box from its anchor element\n     *  by the specified number of pixels.\n     */\n    popoverOffset: {\n      type: Array,\n      default: () => [0, 4],\n    },\n\n    /**\n     * If the popover sticks to the input.\n     */\n    popoverSticky: {\n      type: [Boolean, String],\n      default: false,\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\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     */\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     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when 'escape' key is pressed\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when an item is highlighted\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Emitted when items are shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      DROPDOWN_PADDING_CLASSES,\n      isListShown: false,\n      isInputFocused: false,\n      isListFocused: false,\n      externalAnchor: getUniqueString(),\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    comboboxListeners () {\n      return {\n        ...this.$attrs,\n\n        onSelect: this.onSelect,\n\n        onEscape: this.onEscape,\n\n        onHighlight: this.onHighlight,\n      };\n    },\n  },\n\n  watch: {\n    showList: {\n      handler: function (show) {\n        if (show !== null) {\n          this.isListShown = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isListShown (val) {\n      if (val) {\n        window.addEventListener('mousedown', this.onFocusOut);\n      } else {\n        window.removeEventListener('mousedown', this.onFocusOut);\n      }\n      this.onOpened(val);\n    },\n  },\n\n  methods: {\n    handleDisplayList (value) {\n      if (!this.hasSuggestionList && value) { this.showComboboxList(); }\n      if (!this.hasSuggestionList && !value) { this.closeComboboxList(); }\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = true;\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = false;\n    },\n\n    onSelect (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('select', highlightIndex);\n      if (!this.hasSuggestionList) {\n        // we don't display the list before the user has typed anything\n        this.closeComboboxList();\n      }\n    },\n\n    onEscape () {\n      this.$emit('escape');\n      this.closeComboboxList();\n    },\n\n    onHighlight (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('highlight', highlightIndex);\n    },\n\n    onOpened (opened) {\n      this.$emit('opened', opened);\n    },\n\n    onFocusIn (e) {\n      if (this.hasSuggestionList && e && this.$refs.input?.querySelector('input') === e.target) {\n        // only trigger if we show suggestion list when focused, and\n        // it's the input specifically that was focused\n        this.showComboboxList();\n      }\n    },\n\n    onFocusOut (e) {\n      // Check if the focus change was to another target within the combobox component\n      const popoverEl = this.$refs.popover?.tip?.popper;\n      const comboboxEl = this.$refs.input;\n\n      if (e.composedPath()?.some(el => [popoverEl, comboboxEl].includes(el))) return;\n\n      // If outside the combobox then close\n      this.closeComboboxList();\n    },\n\n    openOnArrowKeyPress () {\n      if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) { return; }\n\n      this.showComboboxList();\n    },\n  },\n};\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"combobox-with-popover.js","names":[],"sources":["../../../components/combobox_with_popover/combobox_with_popover.vue"],"sourcesContent":["<template>\n  <dt-combobox\n    ref=\"combobox\"\n    :loading=\"loading\"\n    :label=\"label\"\n    :label-visible=\"labelVisible\"\n    :size=\"size\"\n    :description=\"description\"\n    :empty-list=\"emptyList\"\n    :empty-state-message=\"emptyStateMessage\"\n    :show-list=\"isListShown\"\n    :on-beginning-of-list=\"onBeginningOfList\"\n    :on-end-of-list=\"onEndOfList\"\n    :list-rendered-outside=\"true\"\n    :list-id=\"listId\"\n    data-qa=\"dt-combobox\"\n    v-bind=\"comboboxListeners\"\n  >\n    <template\n      #input=\"{ inputProps }\"\n    >\n      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n      <div\n        :id=\"externalAnchor\"\n        ref=\"input\"\n        @focusin=\"onFocusIn\"\n        @keydown.up=\"openOnArrowKeyPress($event)\"\n        @keydown.down=\"openOnArrowKeyPress($event)\"\n      >\n        <slot\n          name=\"input\"\n          :input-props=\"inputProps\"\n          :on-input=\"handleDisplayList\"\n        />\n      </div>\n    </template>\n    <template #list=\"{ opened, listProps, clearHighlightIndex }\">\n      <dt-popover\n        ref=\"popover\"\n        v-model:open=\"isListShown\"\n        :hide-on-click=\"false\"\n        :max-height=\"maxHeight\"\n        :max-width=\"maxWidth\"\n        :offset=\"popoverOffset\"\n        :sticky=\"popoverSticky\"\n        placement=\"bottom-start\"\n        initial-focus-element=\"none\"\n        padding=\"none\"\n        role=\"listbox\"\n        :external-anchor=\"externalAnchor\"\n        :content-width=\"contentWidth\"\n        :content-appear=\"true\"\n        :content-tabindex=\"null\"\n        :modal=\"false\"\n        :auto-focus=\"false\"\n        :append-to=\"appendTo\"\n        :dialog-class=\"dialogClass\"\n        :transition=\"transition\"\n        @opened=\"opened\"\n      >\n        <template\n          v-if=\"hasSlotContent($slots.header)\"\n          #headerContent\n        >\n          <div\n            ref=\"header\"\n          >\n            <slot name=\"header\" />\n          </div>\n        </template>\n\n        <template #content>\n          <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n          <div\n            ref=\"listWrapper\"\n            :class=\"[\n              'd-recipe-combobox-with-popover__list',\n              DROPDOWN_PADDING_CLASSES[padding],\n              listClass,\n            ]\"\n            @mouseleave=\"clearHighlightIndex\"\n            @focusout=\"clearHighlightIndex\"\n          >\n            <combobox-loading-list\n              v-if=\"loading\"\n              v-bind=\"listProps\"\n            />\n            <combobox-empty-list\n              v-else-if=\"emptyList && emptyStateMessage\"\n              v-bind=\"listProps\"\n              :message=\"emptyStateMessage\"\n            />\n            <slot\n              v-else\n              name=\"list\"\n              :list-props=\"listProps\"\n            />\n          </div>\n        </template>\n\n        <template\n          v-if=\"hasSlotContent($slots.footer)\"\n          #footerContent\n        >\n          <div\n            ref=\"footer\"\n          >\n            <slot name=\"footer\" />\n          </div>\n        </template>\n      </dt-popover>\n    </template>\n  </dt-combobox>\n</template>\n\n<script>\nimport ComboboxLoadingList from '@/components/combobox/combobox_loading-list.vue';\nimport ComboboxEmptyList from '@/components/combobox/combobox_empty-list.vue';\nimport { DtCombobox, COMBOBOX_LABEL_SIZES } from '@/components/combobox';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_CONTENT_WIDTHS } from '@/components/popover';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { HTML_ELEMENT_TYPE } from '@/common/constants';\nimport { DROPDOWN_PADDING_CLASSES } from '@/components/dropdown';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtComboboxWithPopover',\n\n  components: {\n    DtCombobox,\n    DtPopover,\n    ComboboxLoadingList,\n    ComboboxEmptyList,\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     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\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     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class for the popover dialog element.\n     */\n    dialogClass: {\n      type: [String, Array, Object],\n      default: '',\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 maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    maxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Vertical padding size around the list element.\n     */\n    padding: {\n      type: String,\n      default: 'small',\n      validator: (padding) => {\n        return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Width configuration for the popover content. When its value is 'anchor',\n     * the popover content will have the same width as the anchor.\n     */\n    contentWidth: {\n      type: String,\n      default: null,\n      validator: contentWidth => POPOVER_CONTENT_WIDTHS.includes(contentWidth),\n    },\n\n    /**\n     * If the list should be shown by pressing up or down arrow key on the input element.\n     * This can be set when not passing showList prop.\n     */\n    openWithArrowKeys: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the popover content box from its anchor element\n     *  by the specified number of pixels.\n     */\n    popoverOffset: {\n      type: Array,\n      default: () => [0, 4],\n    },\n\n    /**\n     * If the popover sticks to the input.\n     */\n    popoverSticky: {\n      type: [Boolean, String],\n      default: false,\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\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     */\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     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTML_ELEMENT_TYPE, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when 'escape' key is pressed\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when an item is highlighted\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Emitted when items are shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      DROPDOWN_PADDING_CLASSES,\n      isListShown: false,\n      isInputFocused: false,\n      isListFocused: false,\n      externalAnchor: getUniqueString(),\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    comboboxListeners () {\n      return {\n        ...this.$attrs,\n\n        onSelect: this.onSelect,\n\n        onEscape: this.onEscape,\n\n        onHighlight: this.onHighlight,\n      };\n    },\n  },\n\n  watch: {\n    showList: {\n      handler: function (show) {\n        if (show !== null) {\n          this.isListShown = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isListShown (val) {\n      if (val) {\n        window.addEventListener('mousedown', this.onFocusOut);\n      } else {\n        window.removeEventListener('mousedown', this.onFocusOut);\n      }\n      this.onOpened(val);\n    },\n  },\n\n  methods: {\n    handleDisplayList (value) {\n      if (!this.hasSuggestionList && value) { this.showComboboxList(); }\n      if (!this.hasSuggestionList && !value) { this.closeComboboxList(); }\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = true;\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = false;\n    },\n\n    onSelect (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('select', highlightIndex);\n      if (!this.hasSuggestionList) {\n        // we don't display the list before the user has typed anything\n        this.closeComboboxList();\n      }\n    },\n\n    onEscape () {\n      this.$emit('escape');\n      this.closeComboboxList();\n    },\n\n    onHighlight (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('highlight', highlightIndex);\n    },\n\n    onOpened (opened) {\n      this.$emit('opened', opened);\n    },\n\n    onFocusIn (e) {\n      if (this.hasSuggestionList && e && this.$refs.input?.querySelector('input') === e.target) {\n        // only trigger if we show suggestion list when focused, and\n        // it's the input specifically that was focused\n        this.showComboboxList();\n      }\n    },\n\n    onFocusOut (e) {\n      // Check if the focus change was to another target within the combobox component\n      const popoverEl = this.$refs.popover?.tip?.popper;\n      const comboboxEl = this.$refs.input;\n\n      if (e.composedPath()?.some(el => [popoverEl, comboboxEl].includes(el))) return;\n\n      // If outside the combobox then close\n      this.closeComboboxList();\n    },\n\n    openOnArrowKeyPress () {\n      if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) { return; }\n\n      this.showComboboxList();\n    },\n  },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/dropdown/dropdown.cjs

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

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

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

package/dist/lib/dropdown/dropdown.js

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