@dialpad/dialtone 9.66.0 → 9.67.0

package/dist/vue3/dialtone-vue.cjs

@@ -4,10 +4,10 @@ const common_constants = require("./common/constants.cjs");
 const common_validators = require("./common/validators.cjs");
 const common_utils = require("./common/utils.cjs");
 const common_dates = require("./common/dates.cjs");
-const common_emoji = require("./chunks/index-fEp0B-5Z.js");
-const input = require("./chunks/input-dLLo3Wtg.js");
-const input_group = require("./chunks/input_group-rE6nhye8.js");
-const keyboard_list_navigation = require("./chunks/keyboard_list_navigation-x3D6RcC7.js");
+const common_emoji = require("./chunks/index-lu2o2f4r.js");
+const input = require("./chunks/input-ttnte8zB.js");
+const input_group = require("./chunks/input_group-M-D25pOJ.js");
+const keyboard_list_navigation = require("./chunks/keyboard_list_navigation-fJnl_Iox.js");
 const lib_avatar = require("./lib/avatar.cjs");
 const lib_badge = require("./lib/badge.cjs");
 const lib_banner = require("./lib/banner.cjs");
@@ -20,10 +20,10 @@ const lib_checkboxGroup = require("./lib/checkbox-group.cjs");
 const lib_chip = require("./lib/chip.cjs");
 const lib_codeblock = require("./lib/codeblock.cjs");
 const lib_collapsible = require("./lib/collapsible.cjs");
-const lib_combobox = require("./chunks/index-ouh7Bvm-.js");
+const lib_combobox = require("./chunks/index-4qgKeErp.js");
 const lib_datepicker = require("./lib/datepicker.cjs");
 const lib_descriptionList = require("./lib/description-list.cjs");
-const dropdown = require("./chunks/dropdown-QNvAb160.js");
+const dropdown = require("./chunks/dropdown-p-Azgwov.js");
 const lib_dropdown = require("./lib/dropdown.cjs");
 const dropdown_constants = require("./chunks/dropdown_constants-2pGCXy7m.js");
 const lib_emoji = require("./lib/emoji.cjs");
@@ -32,7 +32,7 @@ const lib_emojiTextWrapper = require("./lib/emoji-text-wrapper.cjs");
 const lib_emptyState = require("./lib/empty-state.cjs");
 const lib_hovercard = require("./lib/hovercard.cjs");
 const lib_icon = require("./lib/icon.cjs");
-const icon_constants = require("./chunks/icon_constants-bvhFNOPu.js");
+const icon_constants = require("./chunks/icon_constants-QYpmdE0R.js");
 const lib_illustration = require("./lib/illustration.cjs");
 const lib_imageViewer = require("./lib/image-viewer.cjs");
 const lib_input = require("./lib/input.cjs");
@@ -47,11 +47,11 @@ const list_item_constants = require("./chunks/list_item_constants-EiqkqZvP.js");
 const lib_listItemGroup = require("./lib/list-item-group.cjs");
 const lib_modal = require("./lib/modal.cjs");
 const lib_notice = require("./lib/notice.cjs");
-const notice_action = require("./chunks/notice_action-3ed0uIMN.js");
+const notice_action = require("./chunks/notice_action-WTucGhvr.js");
 const notice_constants = require("./chunks/notice_constants-UXo9e3bS.js");
 const lib_pagination = require("./lib/pagination.cjs");
 const lib_popover = require("./lib/popover.cjs");
-const popover_constants = require("./chunks/popover_constants-h9MD6WUt.js");
+const popover_constants = require("./chunks/popover_constants-XnGWXaxX.js");
 const lib_presence = require("./lib/presence.cjs");
 const lib_radio = require("./lib/radio.cjs");
 const lib_radioGroup = require("./lib/radio-group.cjs");
@@ -63,7 +63,7 @@ const lib_skeleton = require("./lib/skeleton.cjs");
 const lib_splitButton = require("./lib/split-button.cjs");
 const lib_stack = require("./lib/stack.cjs");
 const stack_constants = require("./chunks/stack_constants-SMzMWnAQ.js");
-const tab = require("./chunks/tab-X7IvNGTl.js");
+const tab = require("./chunks/tab-qc3f42Yp.js");
 const lib_tabs = require("./lib/tabs.cjs");
 const lib_toast = require("./lib/toast.cjs");
 const lib_toggle = require("./lib/toggle.cjs");
@@ -98,8 +98,8 @@ require("date-fns");
 require("@dialpad/dialtone-emojis");
 require("@dialpad/dialtone-icons/icons.json");
 require("./chunks/_plugin-vue_export-helper-fhnQq0tA.js");
-require("./chunks/modal-OaWxzqNt.js");
-require("./chunks/sr_only_close_button-gKr0Vlbz.js");
+require("./chunks/modal-VgxXAQFP.js");
+require("./chunks/sr_only_close_button-xGrHFjwA.js");
 require("@dialpad/dialtone-icons/vue3");
 require("@dialpad/dialtone-icons/illustrations.json");
 require("tippy.js");

package/dist/vue3/dialtone-vue.js

@@ -2,10 +2,10 @@ import { DEFAULT_VALIDATION_MESSAGE_TYPE, DESCRIPTION_SIZE_TYPES, VALIDATION_MES
 import { validationMessageValidator } from "./common/validators.js";
 import { filterFormattedMessages, formatMessages, getUniqueString, getValidationState } from "./common/utils.js";
 import { durationInHHMM, getDateMedium, relativeDate, setDateLocale } from "./common/dates.js";
-import { codeToEmojiData, customEmojiAssetUrl, defaultEmojiAssetUrl, emojiFileExtensionLarge, emojiFileExtensionSmall, emojiImageUrlLarge, emojiImageUrlSmall, emojiJson, emojiRegex, emojiShortCodeRegex, emojiVersion, filterValidShortCodes, findEmojis, findShortCodes, getEmojiData, setCustomEmojiJson, setCustomEmojiUrl, setEmojiAssetUrlLarge, setEmojiAssetUrlSmall, shortcodeToEmojiData, stringToUnicode, unicodeToString, validateCustomEmojiJson } from "./chunks/index-dfdrE-3M.js";
-import { CheckableMixin, GroupableMixin, InputMixin } from "./chunks/input-HIysg24t.js";
-import { InputGroupMixin } from "./chunks/input_group-hV1WT2it.js";
-import { KeyboardNavigation } from "./chunks/keyboard_list_navigation-YIqTuw1W.js";
+import { codeToEmojiData, customEmojiAssetUrl, defaultEmojiAssetUrl, emojiFileExtensionLarge, emojiFileExtensionSmall, emojiImageUrlLarge, emojiImageUrlSmall, emojiJson, emojiRegex, emojiShortCodeRegex, emojiVersion, filterValidShortCodes, findEmojis, findShortCodes, getEmojiData, setCustomEmojiJson, setCustomEmojiUrl, setEmojiAssetUrlLarge, setEmojiAssetUrlSmall, shortcodeToEmojiData, stringToUnicode, unicodeToString, validateCustomEmojiJson } from "./chunks/index-GVD15GIB.js";
+import { CheckableMixin, GroupableMixin, InputMixin } from "./chunks/input-NmYDD5bn.js";
+import { InputGroupMixin } from "./chunks/input_group-jWnq2DJT.js";
+import { KeyboardNavigation } from "./chunks/keyboard_list_navigation-ScXhrxya.js";
 import { AVATAR_COLORS, AVATAR_GROUP_VALIDATOR, AVATAR_ICON_SIZES, AVATAR_KIND_MODIFIERS, AVATAR_PRESENCE_SIZE_MODIFIERS, AVATAR_PRESENCE_STATES, AVATAR_RANDOM_COLORS, AVATAR_SIZE_MODIFIERS, DtAvatar } from "./lib/avatar.js";
 import { BADGE_DECORATION_MODIFIERS, BADGE_KIND_MODIFIERS, BADGE_TYPE_MODIFIERS, DtBadge } from "./lib/badge.js";
 import { DtBanner } from "./lib/banner.js";
@@ -18,10 +18,10 @@ import { DtCheckboxGroup } from "./lib/checkbox-group.js";
 import { CHIP_CLOSE_BUTTON_SIZE_MODIFIERS, CHIP_ICON_SIZES, CHIP_SIZE_MODIFIERS, DtChip } from "./lib/chip.js";
 import { DtCodeblock } from "./lib/codeblock.js";
 import { DtCollapsible } from "./lib/collapsible.js";
-import { DtCombobox, LABEL_SIZES } from "./chunks/index-T15rAIdX.js";
+import { DtCombobox, LABEL_SIZES } from "./chunks/index-b_MgDylR.js";
 import { DtDatepicker, formatLong, formatMedium, formatNoYear, formatNumerical, formatShort } from "./lib/datepicker.js";
 import { DT_DESCRIPTION_LIST_DIRECTION, DtDescriptionList } from "./lib/description-list.js";
-import { DtDropdown } from "./chunks/dropdown-6HXkh24e.js";
+import { DtDropdown } from "./chunks/dropdown-oA-_Gotg.js";
 import { DtDropdownSeparator } from "./lib/dropdown.js";
 import { DROPDOWN_PADDING_CLASSES } from "./chunks/dropdown_constants-w1MXGC3Z.js";
 import { DtEmoji } from "./lib/emoji.js";
@@ -30,7 +30,7 @@ import { DtEmojiTextWrapper } from "./lib/emoji-text-wrapper.js";
 import { DtEmptyState, EMPTY_STATE_SIZE_MODIFIERS } from "./lib/empty-state.js";
 import { DtHovercard } from "./lib/hovercard.js";
 import { DtIcon } from "./lib/icon.js";
-import { ICON_NAMES, ICON_SIZE_MODIFIERS } from "./chunks/icon_constants-gIQj4mf7.js";
+import { ICON_NAMES, ICON_SIZE_MODIFIERS } from "./chunks/icon_constants-Dy4MEUJL.js";
 import { DtIllustration, ILLUSTRATION_NAMES } from "./lib/illustration.js";
 import { DtImageViewer } from "./lib/image-viewer.js";
 import { DtInput, INPUT_SIZES, INPUT_TYPES } from "./lib/input.js";
@@ -45,11 +45,11 @@ import { LIST_ITEM_NAVIGATION_TYPES, LIST_ITEM_TYPES } from "./chunks/list_item_
 import { DtListItemGroup } from "./lib/list-item-group.js";
 import { DtModal, MODAL_BANNER_KINDS, MODAL_KIND_MODIFIERS, MODAL_SIZE_MODIFIERS } from "./lib/modal.js";
 import { DtNotice } from "./lib/notice.js";
-import { DtNoticeAction, DtNoticeContent, DtNoticeIcon } from "./chunks/notice_action-e08Lw5W6.js";
+import { DtNoticeAction, DtNoticeContent, DtNoticeIcon } from "./chunks/notice_action-p-ePanW_.js";
 import { NOTICE_KINDS, NOTICE_ROLES } from "./chunks/notice_constants-7Qt2CQEY.js";
 import { DtPagination } from "./lib/pagination.js";
 import { DtPopover } from "./lib/popover.js";
-import { POPOVER_APPEND_TO_VALUES, POPOVER_CONTENT_WIDTHS, POPOVER_DIRECTIONS, POPOVER_HEADER_FOOTER_PADDING_CLASSES, POPOVER_INITIAL_FOCUS_STRINGS, POPOVER_PADDING_CLASSES, POPOVER_ROLES, POPOVER_STICKY_VALUES, TOOLTIP_DELAY_MS, TOOLTIP_DIRECTIONS, TOOLTIP_HIDE_ON_CLICK_VARIANTS, TOOLTIP_KIND_MODIFIERS, TOOLTIP_STICKY_VALUES } from "./chunks/popover_constants-6YkPPbnk.js";
+import { POPOVER_APPEND_TO_VALUES, POPOVER_CONTENT_WIDTHS, POPOVER_DIRECTIONS, POPOVER_HEADER_FOOTER_PADDING_CLASSES, POPOVER_INITIAL_FOCUS_STRINGS, POPOVER_PADDING_CLASSES, POPOVER_ROLES, POPOVER_STICKY_VALUES, TOOLTIP_DELAY_MS, TOOLTIP_DIRECTIONS, TOOLTIP_HIDE_ON_CLICK_VARIANTS, TOOLTIP_KIND_MODIFIERS, TOOLTIP_STICKY_VALUES } from "./chunks/popover_constants-WsOUIY-m.js";
 import { DtPresence, PRESENCE_STATES, PRESENCE_STATES_LIST } from "./lib/presence.js";
 import { DtRadio, RADIO_INPUT_VALIDATION_CLASSES } from "./lib/radio.js";
 import { DtRadioGroup } from "./lib/radio-group.js";
@@ -61,7 +61,7 @@ import { DtSkeleton, DtSkeletonListItem, DtSkeletonParagraph, DtSkeletonShape, D
 import { DtSplitButton, SPLIT_BUTTON_ICON_SIZES } from "./lib/split-button.js";
 import { DtStack } from "./lib/stack.js";
 import { DT_STACK_DIRECTION, DT_STACK_GAP, DT_STACK_RESPONSIVE_BREAKPOINTS } from "./chunks/stack_constants-HraCekPm.js";
-import { DtTab, DtTabGroup, TAB_IMPORTANCE_MODIFIERS, TAB_LIST_IMPORTANCE_MODIFIERS, TAB_LIST_KIND_MODIFIERS, TAB_LIST_SIZES } from "./chunks/tab-aD6t0MNo.js";
+import { DtTab, DtTabGroup, TAB_IMPORTANCE_MODIFIERS, TAB_LIST_IMPORTANCE_MODIFIERS, TAB_LIST_KIND_MODIFIERS, TAB_LIST_SIZES } from "./chunks/tab-RTDgnD9-.js";
 import { DtTabPanel } from "./lib/tabs.js";
 import { DtToast, TOAST_MIN_DURATION, TOAST_ROLES } from "./lib/toast.js";
 import { DtToggle, TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from "./lib/toggle.js";
@@ -96,8 +96,8 @@ import "date-fns";
 import "@dialpad/dialtone-emojis";
 import "@dialpad/dialtone-icons/icons.json";
 import "./chunks/_plugin-vue_export-helper-caHeSgYY.js";
-import "./chunks/modal-8X6poIZW.js";
-import "./chunks/sr_only_close_button-Ji3Zlts6.js";
+import "./chunks/modal-XOr4kiNZ.js";
+import "./chunks/sr_only_close_button-3EdsV-dH.js";
 import "@dialpad/dialtone-icons/vue3";
 import "@dialpad/dialtone-icons/illustrations.json";
 import "tippy.js";

package/dist/vue3/lib/attachment-carousel.cjs

@@ -5,12 +5,12 @@ const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhn
 const lib_imageViewer = require("./image-viewer.cjs");
 const lib_button = require("./button.cjs");
 const lib_icon = require("./icon.cjs");
-require("../chunks/modal-OaWxzqNt.js");
+require("../chunks/modal-VgxXAQFP.js");
 require("../common/constants.cjs");
 require("../common/utils.cjs");
 require("../chunks/link_constants-x8NwdqmA.js");
 require("@dialpad/dialtone-icons/vue3");
-require("../chunks/icon_constants-bvhFNOPu.js");
+require("../chunks/icon_constants-QYpmdE0R.js");
 require("@dialpad/dialtone-icons/icons.json");
 const _sfc_main$2 = {
   name: "DtProgressBar",
@@ -61,10 +61,15 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
     "aria-valuenow": $props.progress,
     "aria-valuemin": "0",
     "aria-valuemax": "100"
-  }, [(vue.openBlock(), vue.createElementBlock("svg", {
-    class: "progress-bar",
-    style: vue.normalizeStyle($options.cssVars)
-  }, [vue.createElementVNode("circle", _hoisted_2$1, null, 512), _hoisted_3], 4))], 8, _hoisted_1$2);
+  }, [
+    (vue.openBlock(), vue.createElementBlock("svg", {
+      class: "progress-bar",
+      style: vue.normalizeStyle($options.cssVars)
+    }, [
+      vue.createElementVNode("circle", _hoisted_2$1, null, 512),
+      _hoisted_3
+    ], 4))
+  ], 8, _hoisted_1$2);
 }
 const DtProgressBar = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$2, [["render", _sfc_render$2]]);
 const _sfc_main$1 = {
@@ -112,44 +117,48 @@ const _sfc_main$1 = {
     }
   }
 };
-const _hoisted_1$1 = {
-  class: "dt-attachment-image"
-};
-const _hoisted_2 = {
-  class: "dt-attachment-image__top-right"
-};
+const _hoisted_1$1 = { class: "dt-attachment-image" };
+const _hoisted_2 = { class: "dt-attachment-image__top-right" };
 function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_image_viewer = vue.resolveComponent("dt-image-viewer");
   const _component_dt_progress_bar = vue.resolveComponent("dt-progress-bar");
   const _component_dt_icon = vue.resolveComponent("dt-icon");
   const _component_dt_button = vue.resolveComponent("dt-button");
-  return vue.openBlock(), vue.createElementBlock("li", _hoisted_1$1, [vue.createVNode(_component_dt_image_viewer, {
-    "image-button-class": "dt-attachment-image__image-viewer",
-    "image-src": $props.mediaItem.path,
-    "image-alt": $props.mediaItem.altText,
-    "close-aria-label": $props.closeAriaLabel,
-    "aria-label": $props.clickToOpenAriaLabel
-  }, null, 8, ["image-src", "image-alt", "close-aria-label", "aria-label"]), vue.createElementVNode("div", _hoisted_2, [$props.mediaItem.isUploading ? (vue.openBlock(), vue.createBlock(_component_dt_progress_bar, {
-    key: 0,
-    class: "dt-attachment-image__progress-bar",
-    progress: $props.mediaItem.progress,
-    "progressbar-aria-label": $props.progressbarAriaLabel
-  }, null, 8, ["progress", "progressbar-aria-label"])) : vue.createCommentVNode("", true), vue.createVNode(_component_dt_button, {
-    id: `closeButton-${$props.index}`,
-    tabindex: "0",
-    class: "dt-attachment-image__close-button",
-    circle: "",
-    size: "xs",
-    importance: "clear",
-    "aria-label": $props.closeAriaLabel,
-    onClick: _cache[0] || (_cache[0] = ($event) => $options.removeMediaItem($props.index))
-  }, {
-    icon: vue.withCtx(() => [vue.createVNode(_component_dt_icon, {
-      name: "close",
-      size: "200"
-    })]),
-    _: 1
-  }, 8, ["id", "aria-label"])])]);
+  return vue.openBlock(), vue.createElementBlock("li", _hoisted_1$1, [
+    vue.createVNode(_component_dt_image_viewer, {
+      "image-button-class": "dt-attachment-image__image-viewer",
+      "image-src": $props.mediaItem.path,
+      "image-alt": $props.mediaItem.altText,
+      "close-aria-label": $props.closeAriaLabel,
+      "aria-label": $props.clickToOpenAriaLabel
+    }, null, 8, ["image-src", "image-alt", "close-aria-label", "aria-label"]),
+    vue.createElementVNode("div", _hoisted_2, [
+      $props.mediaItem.isUploading ? (vue.openBlock(), vue.createBlock(_component_dt_progress_bar, {
+        key: 0,
+        class: "dt-attachment-image__progress-bar",
+        progress: $props.mediaItem.progress,
+        "progressbar-aria-label": $props.progressbarAriaLabel
+      }, null, 8, ["progress", "progressbar-aria-label"])) : vue.createCommentVNode("", true),
+      vue.createVNode(_component_dt_button, {
+        id: `closeButton-${$props.index}`,
+        tabindex: "0",
+        class: "dt-attachment-image__close-button",
+        circle: "",
+        size: "xs",
+        importance: "clear",
+        "aria-label": $props.closeAriaLabel,
+        onClick: _cache[0] || (_cache[0] = ($event) => $options.removeMediaItem($props.index))
+      }, {
+        icon: vue.withCtx(() => [
+          vue.createVNode(_component_dt_icon, {
+            name: "close",
+            size: "200"
+          })
+        ]),
+        _: 1
+      }, 8, ["id", "aria-label"])
+    ])
+  ]);
 }
 const DtImageCarousel = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
 const MEDIA_ITEM_WIDTH = 64;
@@ -229,9 +238,7 @@ const _sfc_main = {
   },
   methods: {
     onItemFocus(e) {
-      e.currentTarget.scrollIntoView({
-        behavior: "smooth"
-      });
+      e.currentTarget.scrollIntoView({ behavior: "smooth" });
     },
     mediaComponent(type) {
       switch (type) {
@@ -274,51 +281,65 @@ const _hoisted_1 = {
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = vue.resolveComponent("dt-icon");
   const _component_dt_button = vue.resolveComponent("dt-button");
-  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, {
-      name: "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, {
-      name: "arrow-right",
-      size: "100"
-    })]),
-    _: 1
-  }, 8, ["aria-label", "onClick"]), [[vue.vShow, $data.showRightArrow]])]);
+  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, {
+          name: "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, {
+          name: "arrow-right",
+          size: "100"
+        })
+      ]),
+      _: 1
+    }, 8, ["aria-label", "onClick"]), [
+      [vue.vShow, $data.showRightArrow]
+    ])
+  ]);
 }
 const attachment_carousel = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.DtRecipeAttachmentCarousel = attachment_carousel;

package/dist/vue3/lib/attachment-carousel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"attachment-carousel.cjs","sources":["../../recipes/conversation_view/attachment_carousel/media_components/progress_bar.vue","../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<script>\nexport default {\n  name: 'DtProgressBar',\n  props: {\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progress: {\n      type: Number,\n      default: 20,\n    },\n  },\n\n  data: () => ({\n    circleCircumference: 50,\n  }),\n\n  computed: {\n    cssVars () {\n      return {\n        '--stroke-dashoffset':\n          (this.circleCircumference - (this.circleCircumference * this.progress / 100)),\n\n        '--stroke-dasharray': this.circleCircumference,\n      };\n    },\n  },\n\n  mounted () {\n    this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();\n  },\n};\n</script>\n\n<template>\n  <div\n    role=\"progressbar\"\n    :aria-label=\"progressbarAriaLabel\"\n    tabindex=\"-1\"\n    :aria-valuenow=\"progress\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <svg\n      class=\"progress-bar\"\n      :style=\"cssVars\"\n    >\n      <circle\n        ref=\"progressbarCircle\"\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"progress-bar__circle\"\n      />\n      <circle\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"progress-bar__circle\"\n      />\n    </svg>\n  </div>\n</template>\n\n<style lang=\"less\">\n.progress-bar {\n  width: var(--dt-size-550);\n  height: var(--dt-size-550);\n}\n\n.progress-bar__circle {\n  fill: none;\n  stroke-width: 2;\n  stroke-dasharray: var(--stroke-dasharray);\n}\n\n.progress-bar__circle:nth-child(1) {\n  stroke-dashoffset: 0;\n  stroke: var(--dt-color-black-100);\n}\n\n.progress-bar__circle:nth-child(2) {\n  stroke-dashoffset: var(--stroke-dashoffset);\n  stroke: var(--dt-color-purple-500);\n  transition: stroke-dashoffset 500ms linear;\n}\n</style>\n","<template>\n  <li\n    class=\"dt-attachment-image\"\n  >\n    <dt-image-viewer\n      image-button-class=\"dt-attachment-image__image-viewer\"\n      :image-src=\"mediaItem.path\"\n      :image-alt=\"mediaItem.altText\"\n      :close-aria-label=\"closeAriaLabel\"\n      :aria-label=\"clickToOpenAriaLabel\"\n    />\n\n    <!-- Loader / Close button -->\n    <div\n      class=\"dt-attachment-image__top-right\"\n    >\n      <dt-progress-bar\n        v-if=\"mediaItem.isUploading\"\n        class=\"dt-attachment-image__progress-bar\"\n        :progress=\"mediaItem.progress\"\n        :progressbar-aria-label=\"progressbarAriaLabel\"\n      />\n      <dt-button\n        :id=\"`closeButton-${index}`\"\n        tabindex=\"0\"\n        class=\"dt-attachment-image__close-button\"\n        circle\n        size=\"xs\"\n        importance=\"clear\"\n        :aria-label=\"closeAriaLabel\"\n        @click=\"removeMediaItem(index)\"\n      >\n        <template #icon>\n          <dt-icon\n            name=\"close\"\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </div>\n  </li>\n</template>\n\n<script>\nimport { DtImageViewer } from '@/components/image_viewer';\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\n\nimport DtProgressBar from './progress_bar.vue';\n\nexport default {\n  name: 'DtImageCarousel',\n\n  components: {\n    DtImageViewer,\n    DtButton,\n    DtIcon,\n    DtProgressBar,\n  },\n\n  props: {\n    mediaItem: {\n      type: Object,\n      required: true,\n    },\n\n    index: {\n      type: Number,\n      required: true,\n    },\n\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    clickToOpenAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when media close button is clicked to remove the image\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  methods: {\n    removeMediaItem (index) {\n      this.$emit('remove-media', index);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-attachment-image {\n  position: relative;\n\n  &:focus-within .dt-attachment-image__close-button, &:hover .dt-attachment-image__close-button {\n    opacity: 1;\n  }\n}\n.dt-attachment-image__image-viewer {\n  height: var(--dt-size-700);\n  width: var(--dt-size-700);\n  border: var(--dt-space-100) solid;\n  border-radius: var(--br4);\n  border-width: var(--dt-size-350);\n  border-color: var(--dt-color-border-subtle);\n  object-fit: cover;\n}\n.dt-attachment-image__top-right {\n  position: absolute;\n  top: var(--dt-size-100);\n  right: var(--dt-size-100);\n}\n.dt-attachment-image__close-button {\n  opacity: 0;\n  position: absolute;\n  top: inherit;\n  right: inherit;\n  color: var(--dt-color-neutral-white);\n  background-color: var(--dt-color-black-400);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-200);\n  border-color: var(--dt-color-neutral-white);\n}\n.dt-attachment-image__progress-bar {\n  position: absolute;\n  top: inherit;\n  right: inherit;\n  background-color: var(--dt-color-neutral-white);\n  border-radius: 50%;\n  display: flex;\n  transform: rotate(-90deg);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-200);\n  border-color: var(--dt-color-border-subtle);\n}\n</style>\n","<template>\n  <div\n    class=\"dt-attachment-carousel\"\n    role=\"presentation\"\n  >\n    <ul\n      v-if=\"mediaList.length > 0\"\n      ref=\"carousel\"\n      class=\"dt-attachment-carousel__media-list\"\n      @scroll=\"handleScroll\"\n    >\n      <!-- media list -->\n      <component\n        :is=\"mediaComponent(mediaItem.type)\"\n        v-for=\"(mediaItem, index) in filteredMediaList\"\n        :key=\"`media-${index}`\"\n        :index=\"index\"\n        :media-item=\"mediaItem\"\n        :close-aria-label=\"closeAriaLabel\"\n        :click-to-open-aria-label=\"clickToOpenAriaLabel\"\n        :progressbar-aria-label=\"progressbarAriaLabel\"\n        @remove-media=\"removeMediaItem(index)\"\n        @focusin=\"onItemFocus\"\n      />\n    </ul>\n\n    <!-- Carousel Arrows -->\n    <dt-button\n      v-show=\"showLeftArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"leftArrowAriaLabel\"\n      class=\"dt-attachment-carousel__arrow dt-attachment-carousel__arrow--left\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"leftScroll\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"arrow-left\"\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n    <dt-button\n      v-show=\"showRightArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"rightArrowAriaLabel\"\n      class=\"dt-attachment-carousel__arrow dt-attachment-carousel__arrow--right\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"rightScroll\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"arrow-right\"\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n  name: 'DtRecipeAttachmentCarousel',\n\n  components: {\n    DtButton,\n    DtIcon,\n    DtImageCarousel,\n  },\n\n  mixins: [],\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * media - object array of media objects\n     * @type {Array}\n     *\n     * Object: {\n     *  path: String,\n     *  altText: String | null,\n     * }\n     */\n    mediaList: {\n      type: Array,\n      default: () => [],\n    },\n\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    clickToOpenAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    leftArrowAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    rightArrowAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  data () {\n    return {\n      showCloseButton: {},\n      showRightArrow: true,\n      showLeftArrow: false,\n      isMounted: false,\n    };\n  },\n\n  computed: {\n    filteredMediaList () {\n      return this.mediaList.filter((mediaItem) => mediaItem.type === 'image' || mediaItem.type === 'video');\n    },\n  },\n\n  mounted: function () {\n    this.showLeftArrow = this.$refs.carousel.scrollLeft > 0;\n    this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;\n  },\n\n  methods: {\n    onItemFocus (e) {\n      e.currentTarget.scrollIntoView({ behavior: 'smooth' });\n    },\n\n    mediaComponent (type) {\n      switch (type) {\n        case 'image':\n          return 'dt-image-carousel';\n        default:\n          // unknown media type\n          return null;\n      }\n    },\n\n    removeMediaItem (index) {\n      // make sure the carousel arrows is updated. 64 is the width of each media item\n      this.showRightArrow = this.$refs.carousel.scrollWidth > (this.$refs.carousel.clientWidth + MEDIA_ITEM_WIDTH);\n      this.$emit('remove-media', index);\n    },\n\n    closeButton (val, index) {\n      this.showCloseButton[index] = val;\n    },\n\n    handleScroll () {\n      const carousel = this.$refs.carousel;\n      this.showLeftArrow = carousel.scrollLeft > 0;\n      this.showRightArrow = !((carousel.scrollLeft + carousel.clientWidth) === carousel.scrollWidth);\n    },\n\n    leftScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft - 100,\n        behavior: 'smooth',\n      });\n    },\n\n    rightScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft + 100,\n        behavior: 'smooth',\n      });\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-attachment-carousel {\n  position: relative;\n  max-height: 100px;\n  width: var(--dt-space-1000);\n}\n\n.dt-attachment-carousel__media-list {\n  display: flex;\n  flex-direction: row;\n  padding-left: 0px;\n  overflow-x: scroll;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n}\n\n.dt-attachment-carousel__arrow {\n  position: absolute;\n  opacity: 0;\n\n  .dt-attachment-carousel:hover & {\n    opacity: 1;\n  }\n  background-color: var(--dt-color-neutral-white);\n  top: var(--dt-space-30-percent);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-100);\n  border-color: var(--bc-default);\n}\n.dt-attachment-carousel__arrow--left {\n  left: var(--dt-space-300);\n}\n.dt-attachment-carousel__arrow--right {\n  right: var(--dt-space-300);\n}\n\n.dt-attachment-carousel__image-viewer {\n  height: var(--dt-size-700);\n  width: var(--dt-size-700);\n  border-radius: var(--br4);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-350);\n  border-color: var(--dt-color-border-subtle);\n}\n</style>\n"],"names":["_sfc_main","name","props","progressbarAriaLabel","type","String","required","progress","Number","default","data","circleCircumference","computed","cssVars","mounted","$refs","progressbarCircle","getTotalLength","ref","r","cx","cy","class","_createElementVNode","_createElementBlock","role","$props","tabindex","style","$options","_hoisted_2","_hoisted_3","components","DtImageViewer","DtButton","DtIcon","DtProgressBar","mediaItem","Object","index","closeAriaLabel","clickToOpenAriaLabel","emits","methods","removeMediaItem","$emit","_hoisted_1","_openBlock","_createVNode","_component_dt_image_viewer","path","altText","isUploading","_createBlock","_component_dt_progress_bar","_component_dt_button","id","circle","size","importance","onClick","_cache","$event","icon","_component_dt_icon","MEDIA_ITEM_WIDTH","DtImageCarousel","mixins","mediaList","Array","leftArrowAriaLabel","rightArrowAriaLabel","showCloseButton","showRightArrow","showLeftArrow","isMounted","filteredMediaList","filter","carousel","scrollLeft","scrollWidth","clientWidth","onItemFocus","e","currentTarget","scrollIntoView","behavior","mediaComponent","closeButton","val","handleScroll","leftScroll","scrollTo","left","rightScroll","length","onScroll","args","_Fragment","_renderList","_resolveDynamicComponent","key","onRemoveMedia","onFocusin","$data"],"mappings":"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"}
+{"version":3,"file":"attachment-carousel.cjs","sources":["../../recipes/conversation_view/attachment_carousel/media_components/progress_bar.vue","../../recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue","../../recipes/conversation_view/attachment_carousel/attachment_carousel.vue"],"sourcesContent":["<script>\nexport default {\n  name: 'DtProgressBar',\n  props: {\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progress: {\n      type: Number,\n      default: 20,\n    },\n  },\n\n  data: () => ({\n    circleCircumference: 50,\n  }),\n\n  computed: {\n    cssVars () {\n      return {\n        '--stroke-dashoffset':\n          (this.circleCircumference - (this.circleCircumference * this.progress / 100)),\n\n        '--stroke-dasharray': this.circleCircumference,\n      };\n    },\n  },\n\n  mounted () {\n    this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();\n  },\n};\n</script>\n\n<template>\n  <div\n    role=\"progressbar\"\n    :aria-label=\"progressbarAriaLabel\"\n    tabindex=\"-1\"\n    :aria-valuenow=\"progress\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <svg\n      class=\"progress-bar\"\n      :style=\"cssVars\"\n    >\n      <circle\n        ref=\"progressbarCircle\"\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"progress-bar__circle\"\n      />\n      <circle\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"progress-bar__circle\"\n      />\n    </svg>\n  </div>\n</template>\n\n<style lang=\"less\">\n.progress-bar {\n  width: var(--dt-size-550);\n  height: var(--dt-size-550);\n}\n\n.progress-bar__circle {\n  fill: none;\n  stroke-width: 2;\n  stroke-dasharray: var(--stroke-dasharray);\n}\n\n.progress-bar__circle:nth-child(1) {\n  stroke-dashoffset: 0;\n  stroke: var(--dt-color-black-100);\n}\n\n.progress-bar__circle:nth-child(2) {\n  stroke-dashoffset: var(--stroke-dashoffset);\n  stroke: var(--dt-color-purple-500);\n  transition: stroke-dashoffset 500ms linear;\n}\n</style>\n","<template>\n  <li\n    class=\"dt-attachment-image\"\n  >\n    <dt-image-viewer\n      image-button-class=\"dt-attachment-image__image-viewer\"\n      :image-src=\"mediaItem.path\"\n      :image-alt=\"mediaItem.altText\"\n      :close-aria-label=\"closeAriaLabel\"\n      :aria-label=\"clickToOpenAriaLabel\"\n    />\n\n    <!-- Loader / Close button -->\n    <div\n      class=\"dt-attachment-image__top-right\"\n    >\n      <dt-progress-bar\n        v-if=\"mediaItem.isUploading\"\n        class=\"dt-attachment-image__progress-bar\"\n        :progress=\"mediaItem.progress\"\n        :progressbar-aria-label=\"progressbarAriaLabel\"\n      />\n      <dt-button\n        :id=\"`closeButton-${index}`\"\n        tabindex=\"0\"\n        class=\"dt-attachment-image__close-button\"\n        circle\n        size=\"xs\"\n        importance=\"clear\"\n        :aria-label=\"closeAriaLabel\"\n        @click=\"removeMediaItem(index)\"\n      >\n        <template #icon>\n          <dt-icon\n            name=\"close\"\n            size=\"200\"\n          />\n        </template>\n      </dt-button>\n    </div>\n  </li>\n</template>\n\n<script>\nimport { DtImageViewer } from '@/components/image_viewer';\nimport { DtButton } from '@/components/button';\nimport { DtIcon } from '@/components/icon';\n\nimport DtProgressBar from './progress_bar.vue';\n\nexport default {\n  name: 'DtImageCarousel',\n\n  components: {\n    DtImageViewer,\n    DtButton,\n    DtIcon,\n    DtProgressBar,\n  },\n\n  props: {\n    mediaItem: {\n      type: Object,\n      required: true,\n    },\n\n    index: {\n      type: Number,\n      required: true,\n    },\n\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    clickToOpenAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when media close button is clicked to remove the image\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  methods: {\n    removeMediaItem (index) {\n      this.$emit('remove-media', index);\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-attachment-image {\n  position: relative;\n\n  &:focus-within .dt-attachment-image__close-button, &:hover .dt-attachment-image__close-button {\n    opacity: 1;\n  }\n}\n.dt-attachment-image__image-viewer {\n  height: var(--dt-size-700);\n  width: var(--dt-size-700);\n  border: var(--dt-space-100) solid;\n  border-radius: var(--br4);\n  border-width: var(--dt-size-350);\n  border-color: var(--dt-color-border-subtle);\n  object-fit: cover;\n}\n.dt-attachment-image__top-right {\n  position: absolute;\n  top: var(--dt-size-100);\n  right: var(--dt-size-100);\n}\n.dt-attachment-image__close-button {\n  opacity: 0;\n  position: absolute;\n  top: inherit;\n  right: inherit;\n  color: var(--dt-color-neutral-white);\n  background-color: var(--dt-color-black-400);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-200);\n  border-color: var(--dt-color-neutral-white);\n}\n.dt-attachment-image__progress-bar {\n  position: absolute;\n  top: inherit;\n  right: inherit;\n  background-color: var(--dt-color-neutral-white);\n  border-radius: 50%;\n  display: flex;\n  transform: rotate(-90deg);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-200);\n  border-color: var(--dt-color-border-subtle);\n}\n</style>\n","<template>\n  <div\n    class=\"dt-attachment-carousel\"\n    role=\"presentation\"\n  >\n    <ul\n      v-if=\"mediaList.length > 0\"\n      ref=\"carousel\"\n      class=\"dt-attachment-carousel__media-list\"\n      @scroll=\"handleScroll\"\n    >\n      <!-- media list -->\n      <component\n        :is=\"mediaComponent(mediaItem.type)\"\n        v-for=\"(mediaItem, index) in filteredMediaList\"\n        :key=\"`media-${index}`\"\n        :index=\"index\"\n        :media-item=\"mediaItem\"\n        :close-aria-label=\"closeAriaLabel\"\n        :click-to-open-aria-label=\"clickToOpenAriaLabel\"\n        :progressbar-aria-label=\"progressbarAriaLabel\"\n        @remove-media=\"removeMediaItem(index)\"\n        @focusin=\"onItemFocus\"\n      />\n    </ul>\n\n    <!-- Carousel Arrows -->\n    <dt-button\n      v-show=\"showLeftArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"leftArrowAriaLabel\"\n      class=\"dt-attachment-carousel__arrow dt-attachment-carousel__arrow--left\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"leftScroll\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"arrow-left\"\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n    <dt-button\n      v-show=\"showRightArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"rightArrowAriaLabel\"\n      class=\"dt-attachment-carousel__arrow dt-attachment-carousel__arrow--right\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"rightScroll\"\n    >\n      <template #icon>\n        <dt-icon\n          name=\"arrow-right\"\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n  name: 'DtRecipeAttachmentCarousel',\n\n  components: {\n    DtButton,\n    DtIcon,\n    DtImageCarousel,\n  },\n\n  mixins: [],\n\n  /* inheritAttrs: false is generally an option we want to set on library\n    components. This allows any attributes passed in that are not recognized\n    as props to be passed down to another element or component using v-bind:$attrs\n    more info: https://vuejs.org/v2/api/#inheritAttrs */\n  // inheritAttrs: false,\n\n  props: {\n    /**\n     * media - object array of media objects\n     * @type {Array}\n     *\n     * Object: {\n     *  path: String,\n     *  altText: String | null,\n     * }\n     */\n    mediaList: {\n      type: Array,\n      default: () => [],\n    },\n\n    closeAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    clickToOpenAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    progressbarAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    leftArrowAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    rightArrowAriaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event remove-media\n     * @type {Number}\n     */\n    'remove-media',\n  ],\n\n  data () {\n    return {\n      showCloseButton: {},\n      showRightArrow: true,\n      showLeftArrow: false,\n      isMounted: false,\n    };\n  },\n\n  computed: {\n    filteredMediaList () {\n      return this.mediaList.filter((mediaItem) => mediaItem.type === 'image' || mediaItem.type === 'video');\n    },\n  },\n\n  mounted: function () {\n    this.showLeftArrow = this.$refs.carousel.scrollLeft > 0;\n    this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;\n  },\n\n  methods: {\n    onItemFocus (e) {\n      e.currentTarget.scrollIntoView({ behavior: 'smooth' });\n    },\n\n    mediaComponent (type) {\n      switch (type) {\n        case 'image':\n          return 'dt-image-carousel';\n        default:\n          // unknown media type\n          return null;\n      }\n    },\n\n    removeMediaItem (index) {\n      // make sure the carousel arrows is updated. 64 is the width of each media item\n      this.showRightArrow = this.$refs.carousel.scrollWidth > (this.$refs.carousel.clientWidth + MEDIA_ITEM_WIDTH);\n      this.$emit('remove-media', index);\n    },\n\n    closeButton (val, index) {\n      this.showCloseButton[index] = val;\n    },\n\n    handleScroll () {\n      const carousel = this.$refs.carousel;\n      this.showLeftArrow = carousel.scrollLeft > 0;\n      this.showRightArrow = !((carousel.scrollLeft + carousel.clientWidth) === carousel.scrollWidth);\n    },\n\n    leftScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft - 100,\n        behavior: 'smooth',\n      });\n    },\n\n    rightScroll () {\n      this.$refs.carousel.scrollTo({\n        left: this.$refs.carousel.scrollLeft + 100,\n        behavior: 'smooth',\n      });\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.dt-attachment-carousel {\n  position: relative;\n  max-height: 100px;\n  width: var(--dt-space-1000);\n}\n\n.dt-attachment-carousel__media-list {\n  display: flex;\n  flex-direction: row;\n  padding-left: 0px;\n  overflow-x: scroll;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n}\n\n.dt-attachment-carousel__arrow {\n  position: absolute;\n  opacity: 0;\n\n  .dt-attachment-carousel:hover & {\n    opacity: 1;\n  }\n  background-color: var(--dt-color-neutral-white);\n  top: var(--dt-space-30-percent);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-100);\n  border-color: var(--bc-default);\n}\n.dt-attachment-carousel__arrow--left {\n  left: var(--dt-space-300);\n}\n.dt-attachment-carousel__arrow--right {\n  right: var(--dt-space-300);\n}\n\n.dt-attachment-carousel__image-viewer {\n  height: var(--dt-size-700);\n  width: var(--dt-size-700);\n  border-radius: var(--br4);\n  border: var(--dt-space-100) solid;\n  border-width: var(--dt-size-350);\n  border-color: var(--dt-color-border-subtle);\n}\n</style>\n"],"names":["_sfc_main","_createElementVNode","_createElementBlock","_hoisted_2","DtImageViewer","DtButton","DtIcon","_hoisted_1","_openBlock","_createVNode","_createBlock","_Fragment","_renderList","_resolveDynamicComponent"],"mappings":"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"}