@dialpad/dialtone 9.65.1 → 9.66.0

package/dist/vue2/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-anN_sx1F.js");
-const input = require("./chunks/input-Axw-wFj2.js");
-const input_group = require("./chunks/input_group-m3cWYUfI.js");
-const keyboard_list_navigation = require("./chunks/keyboard_list_navigation-fJnl_Iox.js");
+const common_emoji = require("./chunks/index-NYFNZeHH.js");
+const input = require("./chunks/input-Hqw33WBe.js");
+const input_group = require("./chunks/input_group-pE6ec9R3.js");
+const keyboard_list_navigation = require("./chunks/keyboard_list_navigation-x3D6RcC7.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-gj1jEXP4.js");
+const lib_combobox = require("./chunks/index-DyqUqjvI.js");
 const lib_datepicker = require("./lib/datepicker.cjs");
 const lib_descriptionList = require("./lib/description-list.cjs");
-const dropdown = require("./chunks/dropdown-pHxnQPzT.js");
+const dropdown = require("./chunks/dropdown-mjrYu_mK.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-QYpmdE0R.js");
+const icon_constants = require("./chunks/icon_constants-VEA0wI5C.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-P6uDyE9x.js");
+const notice_action = require("./chunks/notice_action-tEvvMg7Q.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-XnGWXaxX.js");
+const popover_constants = require("./chunks/popover_constants-h9MD6WUt.js");
 const lib_presence = require("./lib/presence.cjs");
 const lib_radio = require("./lib/radio.cjs");
 const lib_radioGroup = require("./lib/radio-group.cjs");
@@ -62,7 +62,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-FcsV5VmK.js");
+const tab = require("./chunks/tab-79yMX6m6.js");
 const lib_tabs = require("./lib/tabs.cjs");
 const lib_toast = require("./lib/toast.cjs");
 const lib_toggle = require("./lib/toggle.cjs");
@@ -97,8 +97,8 @@ require("date-fns");
 require("emoji-toolkit/emoji_strategy.json");
 require("@dialpad/dialtone-icons/icons.json");
 require("./chunks/_plugin-vue2_normalizer-1aBeR4AK.js");
-require("./chunks/modal-VgxXAQFP.js");
-require("./chunks/sr_only_close_button-ZaGdAHz7.js");
+require("./chunks/modal-OaWxzqNt.js");
+require("./chunks/sr_only_close_button-2Q9Ny1Nc.js");
 require("@dialpad/dialtone-emojis");
 require("@dialpad/dialtone-icons/vue2");
 require("@dialpad/dialtone-icons/illustrations.json");

package/dist/vue2/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-ODod4Oj_.js";
-import { CheckableMixin, GroupableMixin, InputMixin } from "./chunks/input-6kbd8Pju.js";
-import { InputGroupMixin } from "./chunks/input_group-qVZaS5Bb.js";
-import { KeyboardNavigation } from "./chunks/keyboard_list_navigation-ScXhrxya.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-i65YVk-U.js";
+import { CheckableMixin, GroupableMixin, InputMixin } from "./chunks/input-PhJeBN6r.js";
+import { InputGroupMixin } from "./chunks/input_group-ZI7aVGEp.js";
+import { KeyboardNavigation } from "./chunks/keyboard_list_navigation-YIqTuw1W.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-eJ-WWRdf.js";
+import { DtCombobox, LABEL_SIZES } from "./chunks/index-mBWay1Qb.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-6UoczdUY.js";
+import { DtDropdown } from "./chunks/dropdown-YdCyJ5Dq.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-Dy4MEUJL.js";
+import { ICON_NAMES, ICON_SIZE_MODIFIERS } from "./chunks/icon_constants-TdxqLsS2.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-IRUoLX2d.js";
+import { DtNoticeAction, DtNoticeContent, DtNoticeIcon } from "./chunks/notice_action-qQr3K2TC.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-WsOUIY-m.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 { 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";
@@ -60,7 +60,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-V4cb44Ry.js";
+import { DtTab, DtTabGroup, TAB_IMPORTANCE_MODIFIERS, TAB_LIST_IMPORTANCE_MODIFIERS, TAB_LIST_KIND_MODIFIERS, TAB_LIST_SIZES } from "./chunks/tab-muPOS7JE.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";
@@ -95,8 +95,8 @@ import "date-fns";
 import "emoji-toolkit/emoji_strategy.json";
 import "@dialpad/dialtone-icons/icons.json";
 import "./chunks/_plugin-vue2_normalizer-sOSkiPF3.js";
-import "./chunks/modal-XOr4kiNZ.js";
-import "./chunks/sr_only_close_button-81bHIpPu.js";
+import "./chunks/modal-8X6poIZW.js";
+import "./chunks/sr_only_close_button-IjMVfBDE.js";
 import "@dialpad/dialtone-emojis";
 import "@dialpad/dialtone-icons/vue2";
 import "@dialpad/dialtone-icons/illustrations.json";

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

@@ -4,13 +4,13 @@ const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-1aBeR4
 const lib_imageViewer = require("./image-viewer.cjs");
 const lib_button = require("./button.cjs");
 const lib_icon = require("./icon.cjs");
-require("../chunks/modal-VgxXAQFP.js");
+require("../chunks/modal-OaWxzqNt.js");
 require("../common/constants.cjs");
 require("@linusborg/vue-simple-portal");
 require("vue");
 require("../chunks/link_constants-x8NwdqmA.js");
 require("@dialpad/dialtone-icons/vue2");
-require("../chunks/icon_constants-QYpmdE0R.js");
+require("../chunks/icon_constants-VEA0wI5C.js");
 require("@dialpad/dialtone-icons/icons.json");
 const _sfc_main$2 = {
   name: "DtProgressBar",
@@ -41,19 +41,37 @@ const _sfc_main$2 = {
 };
 var _sfc_render$2 = function render() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { attrs: { "role": "progressbar", "aria-label": _vm.progressbarAriaLabel, "tabindex": "-1", "aria-valuenow": _vm.progress, "aria-valuemin": "0", "aria-valuemax": "100" } }, [_c("svg", { staticClass: "progress-bar", style: _vm.cssVars }, [_c("circle", { ref: "progressbarCircle", staticClass: "progress-bar__circle", attrs: { "r": "8", "cx": "12", "cy": "12" } }), _c("circle", { staticClass: "progress-bar__circle", attrs: { "r": "8", "cx": "12", "cy": "12" } })])]);
+  return _c("div", {
+    attrs: {
+      "role": "progressbar",
+      "aria-label": _vm.progressbarAriaLabel,
+      "tabindex": "-1",
+      "aria-valuenow": _vm.progress,
+      "aria-valuemin": "0",
+      "aria-valuemax": "100"
+    }
+  }, [_c("svg", {
+    staticClass: "progress-bar",
+    style: _vm.cssVars
+  }, [_c("circle", {
+    ref: "progressbarCircle",
+    staticClass: "progress-bar__circle",
+    attrs: {
+      "r": "8",
+      "cx": "12",
+      "cy": "12"
+    }
+  }), _c("circle", {
+    staticClass: "progress-bar__circle",
+    attrs: {
+      "r": "8",
+      "cx": "12",
+      "cy": "12"
+    }
+  })])]);
 };
 var _sfc_staticRenderFns$2 = [];
-var __component__$2 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main$2,
-  _sfc_render$2,
-  _sfc_staticRenderFns$2,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__$2 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main$2, _sfc_render$2, _sfc_staticRenderFns$2, false, null, null, null, null);
 const DtProgressBar = __component__$2.exports;
 const _sfc_main$1 = {
   name: "DtImageCarousel",
@@ -102,23 +120,55 @@ const _sfc_main$1 = {
 };
 var _sfc_render$1 = function render2() {
   var _vm = this, _c = _vm._self._c;
-  return _c("li", { staticClass: "dt-attachment-image" }, [_c("dt-image-viewer", { attrs: { "image-button-class": "dt-attachment-image__image-viewer", "image-src": _vm.mediaItem.path, "image-alt": _vm.mediaItem.altText, "close-aria-label": _vm.closeAriaLabel, "aria-label": _vm.clickToOpenAriaLabel } }), _c("div", { staticClass: "dt-attachment-image__top-right" }, [_vm.mediaItem.isUploading ? _c("dt-progress-bar", { staticClass: "dt-attachment-image__progress-bar", attrs: { "progress": _vm.mediaItem.progress, "progressbar-aria-label": _vm.progressbarAriaLabel } }) : _vm._e(), _c("dt-button", { staticClass: "dt-attachment-image__close-button", attrs: { "id": `closeButton-${_vm.index}`, "tabindex": "0", "circle": "", "size": "xs", "importance": "clear", "aria-label": _vm.closeAriaLabel }, on: { "click": function($event) {
-    return _vm.removeMediaItem(_vm.index);
-  } }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_c("dt-icon", { attrs: { "name": "close", "size": "200" } })];
-  }, proxy: true }]) })], 1)], 1);
+  return _c("li", {
+    staticClass: "dt-attachment-image"
+  }, [_c("dt-image-viewer", {
+    attrs: {
+      "image-button-class": "dt-attachment-image__image-viewer",
+      "image-src": _vm.mediaItem.path,
+      "image-alt": _vm.mediaItem.altText,
+      "close-aria-label": _vm.closeAriaLabel,
+      "aria-label": _vm.clickToOpenAriaLabel
+    }
+  }), _c("div", {
+    staticClass: "dt-attachment-image__top-right"
+  }, [_vm.mediaItem.isUploading ? _c("dt-progress-bar", {
+    staticClass: "dt-attachment-image__progress-bar",
+    attrs: {
+      "progress": _vm.mediaItem.progress,
+      "progressbar-aria-label": _vm.progressbarAriaLabel
+    }
+  }) : _vm._e(), _c("dt-button", {
+    staticClass: "dt-attachment-image__close-button",
+    attrs: {
+      "id": `closeButton-${_vm.index}`,
+      "tabindex": "0",
+      "circle": "",
+      "size": "xs",
+      "importance": "clear",
+      "aria-label": _vm.closeAriaLabel
+    },
+    on: {
+      "click": function($event) {
+        return _vm.removeMediaItem(_vm.index);
+      }
+    },
+    scopedSlots: _vm._u([{
+      key: "icon",
+      fn: function() {
+        return [_c("dt-icon", {
+          attrs: {
+            "name": "close",
+            "size": "200"
+          }
+        })];
+      },
+      proxy: true
+    }])
+  })], 1)], 1);
 };
 var _sfc_staticRenderFns$1 = [];
-var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main$1,
-  _sfc_render$1,
-  _sfc_staticRenderFns$1,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__$1 = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main$1, _sfc_render$1, _sfc_staticRenderFns$1, false, null, null, null, null);
 const DtImageCarousel = __component__$1.exports;
 const MEDIA_ITEM_WIDTH = 64;
 const _sfc_main = {
@@ -197,7 +247,9 @@ const _sfc_main = {
   },
   methods: {
     onItemFocus(e) {
-      e.currentTarget.scrollIntoView({ behavior: "smooth" });
+      e.currentTarget.scrollIntoView({
+        behavior: "smooth"
+      });
     },
     mediaComponent(type) {
       switch (type) {
@@ -235,27 +287,99 @@ const _sfc_main = {
 };
 var _sfc_render = function render3() {
   var _vm = this, _c = _vm._self._c;
-  return _c("div", { staticClass: "dt-attachment-carousel", attrs: { "role": "presentation" } }, [_vm.mediaList.length > 0 ? _c("ul", { ref: "carousel", staticClass: "dt-attachment-carousel__media-list", on: { "scroll": _vm.handleScroll } }, _vm._l(_vm.filteredMediaList, function(mediaItem, index) {
-    return _c(_vm.mediaComponent(mediaItem.type), { key: `media-${index}`, tag: "component", attrs: { "index": index, "media-item": mediaItem, "close-aria-label": _vm.closeAriaLabel, "click-to-open-aria-label": _vm.clickToOpenAriaLabel, "progressbar-aria-label": _vm.progressbarAriaLabel }, on: { "remove-media": function($event) {
-      return _vm.removeMediaItem(index);
-    }, "focusin": _vm.onItemFocus } });
-  }), 1) : _vm._e(), _c("dt-button", { directives: [{ name: "show", rawName: "v-show", value: _vm.showLeftArrow, expression: "showLeftArrow" }], staticClass: "dt-attachment-carousel__arrow dt-attachment-carousel__arrow--left", attrs: { "tabindex": "-1", "aria-label": _vm.leftArrowAriaLabel, "circle": "", "size": "xs", "importance": "clear" }, on: { "click": _vm.leftScroll }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_c("dt-icon", { attrs: { "name": "arrow-left", "size": "100" } })];
-  }, proxy: true }]) }), _c("dt-button", { directives: [{ name: "show", rawName: "v-show", value: _vm.showRightArrow, expression: "showRightArrow" }], staticClass: "dt-attachment-carousel__arrow dt-attachment-carousel__arrow--right", attrs: { "tabindex": "-1", "aria-label": _vm.rightArrowAriaLabel, "circle": "", "size": "xs", "importance": "clear" }, on: { "click": _vm.rightScroll }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
-    return [_c("dt-icon", { attrs: { "name": "arrow-right", "size": "100" } })];
-  }, proxy: true }]) })], 1);
+  return _c("div", {
+    staticClass: "dt-attachment-carousel",
+    attrs: {
+      "role": "presentation"
+    }
+  }, [_vm.mediaList.length > 0 ? _c("ul", {
+    ref: "carousel",
+    staticClass: "dt-attachment-carousel__media-list",
+    on: {
+      "scroll": _vm.handleScroll
+    }
+  }, _vm._l(_vm.filteredMediaList, function(mediaItem, index) {
+    return _c(_vm.mediaComponent(mediaItem.type), {
+      key: `media-${index}`,
+      tag: "component",
+      attrs: {
+        "index": index,
+        "media-item": mediaItem,
+        "close-aria-label": _vm.closeAriaLabel,
+        "click-to-open-aria-label": _vm.clickToOpenAriaLabel,
+        "progressbar-aria-label": _vm.progressbarAriaLabel
+      },
+      on: {
+        "remove-media": function($event) {
+          return _vm.removeMediaItem(index);
+        },
+        "focusin": _vm.onItemFocus
+      }
+    });
+  }), 1) : _vm._e(), _c("dt-button", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.showLeftArrow,
+      expression: "showLeftArrow"
+    }],
+    staticClass: "dt-attachment-carousel__arrow dt-attachment-carousel__arrow--left",
+    attrs: {
+      "tabindex": "-1",
+      "aria-label": _vm.leftArrowAriaLabel,
+      "circle": "",
+      "size": "xs",
+      "importance": "clear"
+    },
+    on: {
+      "click": _vm.leftScroll
+    },
+    scopedSlots: _vm._u([{
+      key: "icon",
+      fn: function() {
+        return [_c("dt-icon", {
+          attrs: {
+            "name": "arrow-left",
+            "size": "100"
+          }
+        })];
+      },
+      proxy: true
+    }])
+  }), _c("dt-button", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: _vm.showRightArrow,
+      expression: "showRightArrow"
+    }],
+    staticClass: "dt-attachment-carousel__arrow dt-attachment-carousel__arrow--right",
+    attrs: {
+      "tabindex": "-1",
+      "aria-label": _vm.rightArrowAriaLabel,
+      "circle": "",
+      "size": "xs",
+      "importance": "clear"
+    },
+    on: {
+      "click": _vm.rightScroll
+    },
+    scopedSlots: _vm._u([{
+      key: "icon",
+      fn: function() {
+        return [_c("dt-icon", {
+          attrs: {
+            "name": "arrow-right",
+            "size": "100"
+          }
+        })];
+      },
+      proxy: true
+    }])
+  })], 1);
 };
 var _sfc_staticRenderFns = [];
-var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
-  _sfc_main,
-  _sfc_render,
-  _sfc_staticRenderFns,
-  false,
-  null,
-  null,
-  null,
-  null
-);
+var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(_sfc_main, _sfc_render, _sfc_staticRenderFns, false, null, null, null, null);
 const attachment_carousel = __component__.exports;
 exports.DtRecipeAttachmentCarousel = attachment_carousel;
 //# sourceMappingURL=attachment-carousel.cjs.map

package/dist/vue2/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","DtImageViewer","DtButton","DtIcon"],"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","name","props","progressbarAriaLabel","type","String","required","progress","Number","default","data","circleCircumference","computed","cssVars","mounted","$refs","progressbarCircle","getTotalLength","components","DtImageViewer","DtButton","DtIcon","DtProgressBar","mediaItem","Object","index","closeAriaLabel","clickToOpenAriaLabel","emits","methods","removeMediaItem","$emit","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"],"mappings":"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"}