@dialpad/dialtone-vue/dist/lib/attachment-carousel/attachment-carousel.js

Vue component library for Dialpad's design system Dialtone

import { DtIconClose as n, DtIconArrowLeft as l, DtIconArrowRight as m } from "@dialpad/dialtone-icons/vue2";
import { DialtoneLocalization as i } from "../../localization/index.js";
import { n as o } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import c from "../button/button.js";
import u from "../image-viewer/image-viewer.js";
const _ = {
  name: "DtProgressBar",
  props: {
    ariaLabel: {
      type: String,
      required: !0
    },
    progress: {
      type: Number,
      default: 20
    }
  },
  data: () => ({
    circleCircumference: 50
  }),
  computed: {
    cssVars() {
      return {
        "--stroke-dashoffset": this.circleCircumference - this.circleCircumference * this.progress / 100,
        "--stroke-dasharray": this.circleCircumference
      };
    }
  },
  mounted() {
    this.circleCircumference = this.$refs.progressbarCircle.getTotalLength();
  }
};
var d = function() {
  var e = this, r = e._self._c;
  return r("div", { attrs: { role: "progressbar", "aria-label": e.ariaLabel, tabindex: "-1", "aria-valuenow": e.progress, "aria-valuemin": "0", "aria-valuemax": "100" } }, [r("svg", { staticClass: "d-recipe-attachment-carousel__progress-bar", style: e.cssVars }, [r("circle", { ref: "progressbarCircle", staticClass: "d-recipe-attachment-carousel__progress-bar-circle", attrs: { r: "8", cx: "12", cy: "12" } }), r("circle", { staticClass: "d-recipe-attachment-carousel__progress-bar-circle", attrs: { r: "8", cx: "12", cy: "12" } })])]);
}, h = [], p = /* @__PURE__ */ o(
  _,
  d,
  h
);
const f = p.exports, g = {
  name: "DtImageCarousel",
  components: {
    DtImageViewer: u,
    DtButton: c,
    DtIconClose: n,
    DtProgressBar: f
  },
  props: {
    mediaItem: {
      type: Object,
      required: !0
    },
    index: {
      type: Number,
      required: !0
    }
  },
  emits: [
    /**
     * Emitted when media close button is clicked to remove the image
     *
     * @event remove-media
     * @type {Number}
     */
    "remove-media"
  ],
  data() {
    return {
      i18n: new i()
    };
  },
  computed: {
    closeButtonTitle() {
      return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
    }
  },
  methods: {
    removeMediaItem(t) {
      this.$emit("remove-media", t);
    }
  }
};
var w = function() {
  var e = this, r = e._self._c;
  return r("li", { staticClass: "d-recipe-attachment-carousel__image" }, [r("dt-image-viewer", { attrs: { "image-button-class": "d-recipe-attachment-carousel__image-viewer", "image-src": e.mediaItem.path, "image-alt": e.mediaItem.altText, "aria-label": e.i18n.$t("DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL") } }), r("div", { staticClass: "d-recipe-attachment-carousel__image-top-right" }, [e.mediaItem.isUploading ? r("dt-progress-bar", { staticClass: "d-recipe-attachment-carousel__image-progress-bar", attrs: { progress: e.mediaItem.progress, "aria-label": e.i18n.$t("DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL") } }) : e._e(), r("dt-button", { staticClass: "d-recipe-attachment-carousel__image-close-button", attrs: { id: `closeButton-${e.index}`, tabindex: "0", circle: "", size: "xs", importance: "clear", "aria-label": e.closeButtonTitle, title: e.closeButtonTitle }, on: { click: function(s) {
    return e.removeMediaItem(e.index);
  } }, scopedSlots: e._u([{ key: "icon", fn: function() {
    return [r("dt-icon-close", { attrs: { size: "200" } })];
  }, proxy: !0 }]) })], 1)], 1);
}, A = [], v = /* @__PURE__ */ o(
  g,
  w,
  A
);
const L = v.exports, C = 64, I = {
  name: "DtRecipeAttachmentCarousel",
  components: {
    DtButton: c,
    DtIconArrowRight: m,
    DtIconArrowLeft: l,
    DtImageCarousel: L
  },
  /* inheritAttrs: false is generally an option we want to set on library
    components. This allows any attributes passed in that are not recognized
    as props to be passed down to another element or component using v-bind:$attrs
    more info: https://vuejs.org/v2/api/#inheritAttrs */
  // inheritAttrs: false,
  props: {
    /**
     * media - object array of media objects
     * @type {Array}
     *
     * Object: {
     *  path: String,
     *  altText: String | null,
     * }
     */
    mediaList: {
      type: Array,
      default: () => []
    }
  },
  emits: [
    /**
     * Emitted when popover is shown or hidden
     *
     * @event remove-media
     * @type {Number}
     */
    "remove-media"
  ],
  data() {
    return {
      showCloseButton: {},
      showRightArrow: !0,
      showLeftArrow: !1,
      isMounted: !1,
      i18n: new i()
    };
  },
  computed: {
    filteredMediaList() {
      return this.mediaList.filter((t) => t.type === "image" || t.type === "video");
    }
  },
  mounted: function() {
    this.showLeftArrow = this.$refs.carousel.scrollLeft > 0, this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth;
  },
  methods: {
    onItemFocus(t) {
      t.currentTarget.scrollIntoView({ behavior: "smooth" });
    },
    mediaComponent(t) {
      switch (t) {
        case "image":
          return "dt-image-carousel";
        default:
          return null;
      }
    },
    removeMediaItem(t) {
      this.showRightArrow = this.$refs.carousel.scrollWidth > this.$refs.carousel.clientWidth + C, this.$emit("remove-media", t);
    },
    closeButton(t, e) {
      this.showCloseButton[e] = t;
    },
    handleScroll() {
      const t = this.$refs.carousel;
      this.showLeftArrow = t.scrollLeft > 0, this.showRightArrow = t.scrollLeft + t.clientWidth !== t.scrollWidth;
    },
    leftScroll() {
      this.$refs.carousel.scrollTo({
        left: this.$refs.carousel.scrollLeft - 100,
        behavior: "smooth"
      });
    },
    rightScroll() {
      this.$refs.carousel.scrollTo({
        left: this.$refs.carousel.scrollLeft + 100,
        behavior: "smooth"
      });
    }
  }
};
var b = function() {
  var e = this, r = e._self._c;
  return r("div", { staticClass: "d-recipe-attachment-carousel", attrs: { role: "presentation" } }, [e.mediaList.length > 0 ? r("ul", { ref: "carousel", staticClass: "d-recipe-attachment-carousel__media-list", on: { scroll: e.handleScroll } }, e._l(e.filteredMediaList, function(s, a) {
    return r(e.mediaComponent(s.type), { key: `media-${a}`, tag: "component", attrs: { index: a, "media-item": s }, on: { "remove-media": function(T) {
      return e.removeMediaItem(a);
    }, focusin: e.onItemFocus } });
  }), 1) : e._e(), r("dt-button", { directives: [{ name: "show", rawName: "v-show", value: e.showLeftArrow, expression: "showLeftArrow" }], staticClass: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left", attrs: { tabindex: "-1", "aria-label": e.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL"), circle: "", size: "xs", importance: "clear" }, on: { click: e.leftScroll }, scopedSlots: e._u([{ key: "icon", fn: function() {
    return [r("dt-icon-arrow-left", { attrs: { size: "100" } })];
  }, proxy: !0 }]) }), r("dt-button", { directives: [{ name: "show", rawName: "v-show", value: e.showRightArrow, expression: "showRightArrow" }], staticClass: "d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right", attrs: { tabindex: "-1", "aria-label": e.i18n.$t("DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL"), circle: "", size: "xs", importance: "clear" }, on: { click: e.rightScroll }, scopedSlots: e._u([{ key: "icon", fn: function() {
    return [r("dt-icon-arrow-right", { attrs: { size: "100" } })];
  }, proxy: !0 }]) })], 1);
}, $ = [], R = /* @__PURE__ */ o(
  I,
  b,
  $
);
const S = R.exports;
export {
  S as default
};
//# sourceMappingURL=attachment-carousel.js.map