@dialpad/dialtone/dist/vue3/recipes/conversation_view/attachment_carousel/media_components/image_carousel.vue.js

Dialpad's Dialtone design system monorepo

import { DtIconClose } from "@dialpad/dialtone-icons/vue3";
import DtProgressBar from "./progress_bar.vue.js";
import { resolveComponent, openBlock, createElementBlock, createVNode, createElementVNode, createBlock, createCommentVNode, withCtx } from "vue";
import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
import DtImageViewer from "../../../../components/image_viewer/image_viewer.vue.js";
import DtButton from "../../../../components/button/button.vue.js";
const _sfc_main = {
  compatConfig: { MODE: 3 },
  name: "DtImageCarousel",
  components: {
    DtImageViewer,
    DtButton,
    DtIconClose,
    DtProgressBar
  },
  props: {
    mediaItem: {
      type: Object,
      required: true
    },
    index: {
      type: Number,
      required: true
    },
    closeAriaLabel: {
      type: String,
      required: true
    },
    clickToOpenAriaLabel: {
      type: String,
      required: true
    },
    progressbarAriaLabel: {
      type: String,
      required: true
    }
  },
  emits: [
    /**
     * Emitted when media close button is clicked to remove the image
     *
     * @event remove-media
     * @type {Number}
     */
    "remove-media"
  ],
  methods: {
    removeMediaItem(index) {
      this.$emit("remove-media", index);
    }
  }
};
const _hoisted_1 = { class: "d-recipe-attachment-carousel__image" };
const _hoisted_2 = { class: "d-recipe-attachment-carousel__image-top-right" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_dt_image_viewer = resolveComponent("dt-image-viewer");
  const _component_dt_progress_bar = resolveComponent("dt-progress-bar");
  const _component_dt_icon_close = resolveComponent("dt-icon-close");
  const _component_dt_button = resolveComponent("dt-button");
  return openBlock(), createElementBlock("li", _hoisted_1, [
    createVNode(_component_dt_image_viewer, {
      "image-button-class": "d-recipe-attachment-carousel__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"]),
    createElementVNode("div", _hoisted_2, [
      $props.mediaItem.isUploading ? (openBlock(), createBlock(_component_dt_progress_bar, {
        key: 0,
        class: "d-recipe-attachment-carousel__image-progress-bar",
        progress: $props.mediaItem.progress,
        "progressbar-aria-label": $props.progressbarAriaLabel
      }, null, 8, ["progress", "progressbar-aria-label"])) : createCommentVNode("", true),
      createVNode(_component_dt_button, {
        id: `closeButton-${$props.index}`,
        tabindex: "0",
        class: "d-recipe-attachment-carousel__image-close-button",
        circle: "",
        size: "xs",
        importance: "clear",
        "aria-label": $props.closeAriaLabel,
        onClick: _cache[0] || (_cache[0] = ($event) => $options.removeMediaItem($props.index))
      }, {
        icon: withCtx(() => [
          createVNode(_component_dt_icon_close, { size: "200" })
        ]),
        _: 1
      }, 8, ["id", "aria-label"])
    ])
  ]);
}
const DtImageCarousel = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  DtImageCarousel as default
};
//# sourceMappingURL=image_carousel.vue.js.map