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

Dialpad's Dialtone design system monorepo

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue3 = require("@dialpad/dialtone-icons/vue3");
const progress_bar = require("./progress_bar.vue.cjs");
const vue = require("vue");
const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.cjs");
const image_viewer = require("../../../../components/image_viewer/image_viewer.vue.cjs");
const button = require("../../../../components/button/button.vue.cjs");
const _sfc_main = {
  compatConfig: { MODE: 3 },
  name: "DtImageCarousel",
  components: {
    DtImageViewer: image_viewer.default,
    DtButton: button.default,
    DtIconClose: vue3.DtIconClose,
    DtProgressBar: progress_bar.default
  },
  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 = vue.resolveComponent("dt-image-viewer");
  const _component_dt_progress_bar = vue.resolveComponent("dt-progress-bar");
  const _component_dt_icon_close = vue.resolveComponent("dt-icon-close");
  const _component_dt_button = vue.resolveComponent("dt-button");
  return vue.openBlock(), vue.createElementBlock("li", _hoisted_1, [
    vue.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"]),
    vue.createElementVNode("div", _hoisted_2, [
      $props.mediaItem.isUploading ? (vue.openBlock(), vue.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"])) : vue.createCommentVNode("", true),
      vue.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: vue.withCtx(() => [
          vue.createVNode(_component_dt_icon_close, { size: "200" })
        ]),
        _: 1
      }, 8, ["id", "aria-label"])
    ])
  ]);
}
const DtImageCarousel = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = DtImageCarousel;
//# sourceMappingURL=image_carousel.vue.cjs.map