@dialpad/dialtone-vue 3.156.1 → 3.156.3

package/dist/packages/dialtone-vue3/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.js

@@ -1,438 +0,0 @@
-import ComboboxLoadingList from "../../../components/combobox/combobox_loading-list.vue.js";
-import ComboboxEmptyList from "../../../components/combobox/combobox_empty-list.vue.js";
-import { getUniqueString, hasSlotContent } from "../../../../../common/utils.js";
-import SrOnlyCloseButtonMixin from "../../../common/mixins/sr_only_close_button.js";
-import { resolveComponent, openBlock, createBlock, mergeProps, withCtx, createElementVNode, withKeys, renderSlot, createVNode, createSlots, normalizeClass, normalizeProps } from "vue";
-import _export_sfc from "../../../../../_virtual/_plugin-vue_export-helper.js";
-import DtCombobox from "../../../components/combobox/combobox.vue.js";
-import DtPopover from "../../../components/popover/popover.vue.js";
-import { LABEL_SIZES } from "../../../components/combobox/combobox_constants.js";
-import { DROPDOWN_PADDING_CLASSES } from "../../../components/dropdown/dropdown_constants.js";
-import { POPOVER_CONTENT_WIDTHS, POPOVER_APPEND_TO_VALUES } from "../../../components/popover/popover_constants.js";
-const _sfc_main = {
-  name: "DtRecipeComboboxWithPopover",
-  components: {
-    DtCombobox,
-    DtPopover,
-    ComboboxLoadingList,
-    ComboboxEmptyList
-  },
-  mixins: [SrOnlyCloseButtonMixin],
-  props: {
-    /**
-     * String to use for the input label.
-     */
-    label: {
-      type: String,
-      required: true
-    },
-    /**
-     * Determines visibility of input label.
-     * @values true, false
-     */
-    labelVisible: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`
-     * @values null, xs, sm, md, lg, xl
-     */
-    size: {
-      type: String,
-      default: null,
-      validator: (t) => Object.values(LABEL_SIZES).includes(t)
-    },
-    /**
-     * Description for the input
-     */
-    description: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Determines when to show the list element and also controls the aria-expanded attribute.
-     * Leaving this null will have the combobox trigger on input focus by default.
-     * If you set this value, the default trigger behavior will be disabled and you can
-     * control it as you need.
-     */
-    showList: {
-      type: Boolean,
-      default: null
-    },
-    /**
-     * Sets an ID on the list element of the component. Used by several aria attributes
-     * as well as when deriving the IDs for each item.
-     */
-    listId: {
-      type: String,
-      default() {
-        return getUniqueString();
-      }
-    },
-    /**
-     * Additional class for the wrapper list element.
-     */
-    listClass: {
-      type: [String, Array, Object],
-      default: ""
-    },
-    /**
-     * A method that will be called when the selection goes past the beginning of the list.
-     */
-    onBeginningOfList: {
-      type: Function,
-      default: null
-    },
-    /**
-     * A method that will be called when the selection goes past the end of the list.
-     */
-    onEndOfList: {
-      type: Function,
-      default: null
-    },
-    /**
-     * Determines maximum height for the popover before overflow.
-     * Possible units rem|px|em
-     */
-    maxHeight: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Determines maximum width for the popover before overflow.
-     * Possible units rem|px|%|em
-     */
-    maxWidth: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Vertical padding size around the list element.
-     */
-    padding: {
-      type: String,
-      default: "small",
-      validator: (padding) => {
-        return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);
-      }
-    },
-    /**
-     * Width configuration for the popover content. When its value is 'anchor',
-     * the popover content will have the same width as the anchor.
-     */
-    contentWidth: {
-      type: String,
-      default: null,
-      validator: (contentWidth) => POPOVER_CONTENT_WIDTHS.includes(contentWidth)
-    },
-    /**
-     * If the list should be shown by pressing up or down arrow key on the input element.
-     * This can be set when not passing showList prop.
-     */
-    openWithArrowKeys: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     *  Displaces the popover content box from its anchor element
-     *  by the specified number of pixels.
-     */
-    popoverOffset: {
-      type: Array,
-      default: () => [0, 4]
-    },
-    /**
-     * If the popover sticks to the input.
-     */
-    popoverSticky: {
-      type: [Boolean, String],
-      default: false
-    },
-    /**
-     * Displays the list when the combobox is focused, before the user has typed anything.
-     * When this is enabled the list will not close after selection.
-     */
-    hasSuggestionList: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * Determines when to show the skeletons and also controls aria-busy attribute.
-     */
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.
-     */
-    emptyList: {
-      type: Boolean,
-      default: false
-    },
-    /**
-     * Message to show when the list is empty
-     */
-    emptyStateMessage: {
-      type: String,
-      default: ""
-    },
-    /**
-     * Sets the element to which the popover is going to append to.
-     * 'body' will append to the nearest body (supports shadow DOM).
-     * @values 'body', 'parent', HTMLElement,
-     */
-    appendTo: {
-      type: [HTMLElement, String],
-      default: "body",
-      validator: (appendTo) => {
-        return POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
-      }
-    },
-    /**
-     * Named transition when the content display is toggled.
-     * @see DtLazyShow
-     */
-    transition: {
-      type: String,
-      default: "fade"
-    }
-  },
-  emits: [
-    /**
-     * Event fired when item selected
-     *
-     * @event select
-     * @type {Number}
-     */
-    "select",
-    /**
-     * Event fired when 'escape' key is pressed
-     *
-     * @event escape
-     */
-    "escape",
-    /**
-     * Event fired when an item is highlighted
-     *
-     * @event highlight
-     * @type {Number}
-     */
-    "highlight",
-    /**
-     * Emitted when items are shown or hidden
-     *
-     * @event opened
-     * @type {Boolean | Array}
-     */
-    "opened"
-  ],
-  data() {
-    return {
-      DROPDOWN_PADDING_CLASSES,
-      isListShown: false,
-      isInputFocused: false,
-      isListFocused: false,
-      externalAnchor: getUniqueString(),
-      hasSlotContent
-    };
-  },
-  computed: {
-    comboboxListeners() {
-      return {
-        ...this.$attrs,
-        onSelect: this.onSelect,
-        onEscape: this.onEscape,
-        onHighlight: this.onHighlight
-      };
-    }
-  },
-  watch: {
-    showList: {
-      handler: function(show) {
-        if (show !== null) {
-          this.isListShown = show;
-        }
-      },
-      immediate: true
-    },
-    isListShown(val) {
-      if (val) {
-        window.addEventListener("mousedown", this.onFocusOut);
-      } else {
-        window.removeEventListener("mousedown", this.onFocusOut);
-      }
-      this.onOpened(val);
-    }
-  },
-  methods: {
-    handleDisplayList(value) {
-      if (!this.hasSuggestionList && value) {
-        this.showComboboxList();
-      }
-      if (!this.hasSuggestionList && !value) {
-        this.closeComboboxList();
-      }
-    },
-    showComboboxList() {
-      if (this.showList != null) {
-        return;
-      }
-      this.isListShown = true;
-    },
-    closeComboboxList() {
-      if (this.showList != null) {
-        return;
-      }
-      this.isListShown = false;
-    },
-    onSelect(highlightIndex) {
-      if (this.loading) return;
-      this.$emit("select", highlightIndex);
-      if (!this.hasSuggestionList) {
-        this.closeComboboxList();
-      }
-    },
-    onEscape() {
-      this.$emit("escape");
-      this.closeComboboxList();
-    },
-    onHighlight(highlightIndex) {
-      if (this.loading) return;
-      this.$emit("highlight", highlightIndex);
-    },
-    onOpened(opened) {
-      this.$emit("opened", opened);
-    },
-    onFocusIn(e) {
-      var _a;
-      if (this.hasSuggestionList && e && ((_a = this.$refs.input) == null ? void 0 : _a.querySelector("input")) === e.target) {
-        this.showComboboxList();
-      }
-    },
-    onFocusOut(e) {
-      var _a, _b, _c;
-      const popoverEl = (_b = (_a = this.$refs.popover) == null ? void 0 : _a.tip) == null ? void 0 : _b.popper;
-      const comboboxEl = this.$refs.input;
-      if ((_c = e.composedPath()) == null ? void 0 : _c.some((el) => [popoverEl, comboboxEl].includes(el))) return;
-      this.closeComboboxList();
-    },
-    openOnArrowKeyPress() {
-      if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) {
-        return;
-      }
-      this.showComboboxList();
-    }
-  }
-};
-const _hoisted_1 = ["id"];
-const _hoisted_2 = { ref: "header" };
-const _hoisted_3 = ["onMouseleave", "onFocusout"];
-const _hoisted_4 = { ref: "footer" };
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_combobox_loading_list = resolveComponent("combobox-loading-list");
-  const _component_combobox_empty_list = resolveComponent("combobox-empty-list");
-  const _component_dt_popover = resolveComponent("dt-popover");
-  const _component_dt_combobox = resolveComponent("dt-combobox");
-  return openBlock(), createBlock(_component_dt_combobox, mergeProps({
-    ref: "combobox",
-    loading: $props.loading,
-    label: $props.label,
-    "label-visible": $props.labelVisible,
-    size: $props.size,
-    description: $props.description,
-    "empty-list": $props.emptyList,
-    "empty-state-message": $props.emptyStateMessage,
-    "show-list": $data.isListShown,
-    "on-beginning-of-list": $props.onBeginningOfList,
-    "on-end-of-list": $props.onEndOfList,
-    "list-rendered-outside": true,
-    "list-id": $props.listId,
-    "data-qa": "dt-combobox"
-  }, $options.comboboxListeners), {
-    input: withCtx(({ inputProps }) => [
-      createElementVNode("div", {
-        id: $data.externalAnchor,
-        ref: "input",
-        onFocusin: _cache[0] || (_cache[0] = (...args) => $options.onFocusIn && $options.onFocusIn(...args)),
-        onKeydown: [
-          _cache[1] || (_cache[1] = withKeys(($event) => $options.openOnArrowKeyPress($event), ["up"])),
-          _cache[2] || (_cache[2] = withKeys(($event) => $options.openOnArrowKeyPress($event), ["down"]))
-        ]
-      }, [
-        renderSlot(_ctx.$slots, "input", {
-          inputProps,
-          onInput: $options.handleDisplayList
-        })
-      ], 40, _hoisted_1)
-    ]),
-    list: withCtx(({ opened, listProps, clearHighlightIndex }) => [
-      createVNode(_component_dt_popover, {
-        ref: "popover",
-        open: $data.isListShown,
-        "onUpdate:open": _cache[3] || (_cache[3] = ($event) => $data.isListShown = $event),
-        "hide-on-click": false,
-        "max-height": $props.maxHeight,
-        "max-width": $props.maxWidth,
-        offset: $props.popoverOffset,
-        sticky: $props.popoverSticky,
-        placement: "bottom-start",
-        "initial-focus-element": "none",
-        padding: "none",
-        role: "listbox",
-        "external-anchor": $data.externalAnchor,
-        "content-width": $props.contentWidth,
-        "content-appear": true,
-        "content-tabindex": null,
-        modal: false,
-        "auto-focus": false,
-        "append-to": $props.appendTo,
-        transition: $props.transition,
-        "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
-        "visually-hidden-close": _ctx.visuallyHiddenClose,
-        onOpened: opened
-      }, createSlots({
-        content: withCtx(() => [
-          createElementVNode("div", {
-            ref: "listWrapper",
-            class: normalizeClass([$data.DROPDOWN_PADDING_CLASSES[$props.padding], $props.listClass]),
-            onMouseleave: clearHighlightIndex,
-            onFocusout: clearHighlightIndex
-          }, [
-            $props.loading ? (openBlock(), createBlock(_component_combobox_loading_list, normalizeProps(mergeProps({ key: 0 }, listProps)), null, 16)) : $props.emptyList && $props.emptyStateMessage ? (openBlock(), createBlock(_component_combobox_empty_list, mergeProps({ key: 1 }, listProps, { message: $props.emptyStateMessage }), null, 16, ["message"])) : renderSlot(_ctx.$slots, "list", {
-              key: 2,
-              listProps
-            })
-          ], 42, _hoisted_3)
-        ]),
-        _: 2
-      }, [
-        $data.hasSlotContent(_ctx.$slots.header) ? {
-          name: "headerContent",
-          fn: withCtx(() => [
-            createElementVNode("div", _hoisted_2, [
-              renderSlot(_ctx.$slots, "header")
-            ], 512)
-          ]),
-          key: "0"
-        } : void 0,
-        $data.hasSlotContent(_ctx.$slots.footer) ? {
-          name: "footerContent",
-          fn: withCtx(() => [
-            createElementVNode("div", _hoisted_4, [
-              renderSlot(_ctx.$slots, "footer")
-            ], 512)
-          ]),
-          key: "1"
-        } : void 0
-      ]), 1032, ["open", "max-height", "max-width", "offset", "sticky", "external-anchor", "content-width", "append-to", "transition", "visually-hidden-close-label", "visually-hidden-close", "onOpened"])
-    ]),
-    _: 3
-  }, 16, ["loading", "label", "label-visible", "size", "description", "empty-list", "empty-state-message", "show-list", "on-beginning-of-list", "on-end-of-list", "list-id"]);
-}
-const DtRecipeComboboxWithPopover = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
-export {
-  DtRecipeComboboxWithPopover as default
-};
-//# sourceMappingURL=combobox_with_popover.vue.js.map

package/dist/packages/dialtone-vue3/recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"combobox_with_popover.vue.js","sources":["../../../../../../recipes/comboboxes/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        :transition=\"transition\"\n        :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n        :visually-hidden-close=\"visuallyHiddenClose\"\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=\"[DROPDOWN_PADDING_CLASSES[padding], listClass]\"\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, 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';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\n\nexport default {\n  name: 'DtRecipeComboboxWithPopover',\n\n  components: {\n    DtCombobox,\n    DtPopover,\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  mixins: [SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values null, xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: null,\n      validator: (t) => Object.values(LABEL_SIZES).includes(t),\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * 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     * 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"],"names":["_openBlock","_createBlock","_mergeProps","_withCtx","_createElementVNode","_withKeys","_renderSlot","_createVNode","_createSlots","_normalizeClass","_normalizeProps"],"mappings":"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"}

package/dist/packages/dialtone-vue3/recipes/conversation_view/attachment_carousel/attachment_carousel.vue.cjs

@@ -1,186 +0,0 @@
-"use strict";
-const vue3 = require("@dialpad/dialtone-icons/vue3");
-const image_carousel = require("./media_components/image_carousel.vue.cjs");
-const vue = require("vue");
-;/* empty css                           */
-const _pluginVue_exportHelper = require("../../../../../_virtual/_plugin-vue_export-helper.cjs");
-const button = require("../../../components/button/button.vue.cjs");
-const MEDIA_ITEM_WIDTH = 64;
-const _sfc_main = {
-  name: "DtRecipeAttachmentCarousel",
-  components: {
-    DtButton: button,
-    DtIconArrowRight: vue3.DtIconArrowRight,
-    DtIconArrowLeft: vue3.DtIconArrowLeft,
-    DtImageCarousel: image_carousel
-  },
-  mixins: [],
-  /* inheritAttrs: false is generally an option we want to set on library
-    components. This allows any attributes passed in that are not recognized
-    as props to be passed down to another element or component using v-bind:$attrs
-    more info: https://vuejs.org/v2/api/#inheritAttrs */
-  // inheritAttrs: false,
-  props: {
-    /**
-     * media - object array of media objects
-     * @type {Array}
-     *
-     * Object: {
-     *  path: String,
-     *  altText: String | null,
-     * }
-     */
-    mediaList: {
-      type: Array,
-      default: () => []
-    },
-    closeAriaLabel: {
-      type: String,
-      required: true
-    },
-    clickToOpenAriaLabel: {
-      type: String,
-      required: true
-    },
-    progressbarAriaLabel: {
-      type: String,
-      required: true
-    },
-    leftArrowAriaLabel: {
-      type: String,
-      required: true
-    },
-    rightArrowAriaLabel: {
-      type: String,
-      required: true
-    }
-  },
-  emits: [
-    /**
-     * Emitted when popover is shown or hidden
-     *
-     * @event remove-media
-     * @type {Number}
-     */
-    "remove-media"
-  ],
-  data() {
-    return {
-      showCloseButton: {},
-      showRightArrow: true,
-      showLeftArrow: false,
-      isMounted: false
-    };
-  },
-  computed: {
-    filteredMediaList() {
-      return this.mediaList.filter((mediaItem) => mediaItem.type === "image" || mediaItem.type === "video");
-    }
-  },
-  mounted: function() {
-    this.showLeftArrow = this.$refs.carousel.scrollLeft > 0;
-    this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;
-  },
-  methods: {
-    onItemFocus(e) {
-      e.currentTarget.scrollIntoView({ behavior: "smooth" });
-    },
-    mediaComponent(type) {
-      switch (type) {
-        case "image":
-          return "dt-image-carousel";
-        default:
-          return null;
-      }
-    },
-    removeMediaItem(index) {
-      this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth + MEDIA_ITEM_WIDTH;
-      this.$emit("remove-media", index);
-    },
-    closeButton(val, index) {
-      this.showCloseButton[index] = val;
-    },
-    handleScroll() {
-      const carousel = this.$refs.carousel;
-      this.showLeftArrow = carousel.scrollLeft > 0;
-      this.showRightArrow = !(carousel.scrollLeft + carousel.clientWidth === carousel.scrollWidth);
-    },
-    leftScroll() {
-      this.$refs.carousel.scrollTo({
-        left: this.$refs.carousel.scrollLeft - 100,
-        behavior: "smooth"
-      });
-    },
-    rightScroll() {
-      this.$refs.carousel.scrollTo({
-        left: this.$refs.carousel.scrollLeft + 100,
-        behavior: "smooth"
-      });
-    }
-  }
-};
-const _hoisted_1 = {
-  class: "dt-attachment-carousel",
-  role: "presentation"
-};
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_dt_icon_arrow_left = vue.resolveComponent("dt-icon-arrow-left");
-  const _component_dt_button = vue.resolveComponent("dt-button");
-  const _component_dt_icon_arrow_right = vue.resolveComponent("dt-icon-arrow-right");
-  return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
-    $props.mediaList.length > 0 ? (vue.openBlock(), vue.createElementBlock("ul", {
-      key: 0,
-      ref: "carousel",
-      class: "dt-attachment-carousel__media-list",
-      onScroll: _cache[0] || (_cache[0] = (...args) => $options.handleScroll && $options.handleScroll(...args))
-    }, [
-      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.filteredMediaList, (mediaItem, index) => {
-        return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($options.mediaComponent(mediaItem.type)), {
-          key: `media-${index}`,
-          index,
-          "media-item": mediaItem,
-          "close-aria-label": $props.closeAriaLabel,
-          "click-to-open-aria-label": $props.clickToOpenAriaLabel,
-          "progressbar-aria-label": $props.progressbarAriaLabel,
-          onRemoveMedia: ($event) => $options.removeMediaItem(index),
-          onFocusin: $options.onItemFocus
-        }, null, 40, ["index", "media-item", "close-aria-label", "click-to-open-aria-label", "progressbar-aria-label", "onRemoveMedia", "onFocusin"]);
-      }), 128))
-    ], 544)) : vue.createCommentVNode("", true),
-    vue.withDirectives(vue.createVNode(_component_dt_button, {
-      tabindex: "-1",
-      "aria-label": $props.leftArrowAriaLabel,
-      class: "dt-attachment-carousel__arrow dt-attachment-carousel__arrow--left",
-      circle: "",
-      size: "xs",
-      importance: "clear",
-      onClick: $options.leftScroll
-    }, {
-      icon: vue.withCtx(() => [
-        vue.createVNode(_component_dt_icon_arrow_left, { size: "100" })
-      ]),
-      _: 1
-    }, 8, ["aria-label", "onClick"]), [
-      [vue.vShow, $data.showLeftArrow]
-    ]),
-    vue.withDirectives(vue.createVNode(_component_dt_button, {
-      tabindex: "-1",
-      "aria-label": $props.rightArrowAriaLabel,
-      class: "dt-attachment-carousel__arrow dt-attachment-carousel__arrow--right",
-      circle: "",
-      size: "xs",
-      importance: "clear",
-      onClick: $options.rightScroll
-    }, {
-      icon: vue.withCtx(() => [
-        vue.createVNode(_component_dt_icon_arrow_right, { size: "100" })
-      ]),
-      _: 1
-    }, 8, ["aria-label", "onClick"]), [
-      [vue.vShow, $data.showRightArrow]
-    ])
-  ]);
-}
-const attachment_carousel = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["render", _sfc_render]]);
-module.exports = attachment_carousel;
-//# sourceMappingURL=attachment_carousel.vue.cjs.map