@dialpad/dialtone/dist/vue3/lib/attachment-carousel/attachment-carousel.cjs.map

Dialpad's Dialtone design system monorepo

{"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  compatConfig: { MODE: 3 },\n  name: 'DtProgressBar',\n  props: {\n    ariaLabel: {\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=\"ariaLabel\"\n    tabindex=\"-1\"\n    :aria-valuenow=\"progress\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n  >\n    <svg\n      class=\"d-recipe-attachment-carousel__progress-bar\"\n      :style=\"cssVars\"\n    >\n      <circle\n        ref=\"progressbarCircle\"\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"d-recipe-attachment-carousel__progress-bar-circle\"\n      />\n      <circle\n        r=\"8\"\n        cx=\"12\"\n        cy=\"12\"\n        class=\"d-recipe-attachment-carousel__progress-bar-circle\"\n      />\n    </svg>\n  </div>\n</template>\n","<template>\n  <li\n    class=\"d-recipe-attachment-carousel__image\"\n  >\n    <dt-image-viewer\n      image-button-class=\"d-recipe-attachment-carousel__image-viewer\"\n      :image-src=\"mediaItem.path\"\n      :image-alt=\"mediaItem.altText\"\n      :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_CLICK_TO_OPEN_ARIA_LABEL')\"\n    />\n\n    <!-- Loader / Close button -->\n    <div\n      class=\"d-recipe-attachment-carousel__image-top-right\"\n    >\n      <dt-progress-bar\n        v-if=\"mediaItem.isUploading\"\n        class=\"d-recipe-attachment-carousel__image-progress-bar\"\n        :progress=\"mediaItem.progress\"\n        :aria-label=\"i18n.$t('DIALTONE_IMAGE_CAROUSEL_PROGRESS_BAR_ARIA_LABEL')\"\n      />\n      <dt-button\n        :id=\"`closeButton-${index}`\"\n        tabindex=\"0\"\n        class=\"d-recipe-attachment-carousel__image-close-button\"\n        circle\n        size=\"xs\"\n        importance=\"clear\"\n        :aria-label=\"closeButtonTitle\"\n        :title=\"closeButtonTitle\"\n        @click=\"removeMediaItem(index)\"\n      >\n        <template #icon>\n          <dt-icon-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 { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DialtoneLocalization } from '@/localization';\n\nimport DtProgressBar from './progress_bar.vue';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtImageCarousel',\n\n  components: {\n    DtImageViewer,\n    DtButton,\n    DtIconClose,\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\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  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    removeMediaItem (index) {\n      this.$emit('remove-media', index);\n    },\n  },\n};\n</script>\n","<template>\n  <div\n    class=\"d-recipe-attachment-carousel\"\n    role=\"presentation\"\n  >\n    <ul\n      v-if=\"mediaList.length > 0\"\n      ref=\"carousel\"\n      class=\"d-recipe-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        @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=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_LEFT_ARROW_ARIA_LABEL')\"\n      class=\"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--left\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"leftScroll\"\n    >\n      <template #icon>\n        <dt-icon-arrow-left\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n    <dt-button\n      v-show=\"showRightArrow\"\n      tabindex=\"-1\"\n      :aria-label=\"i18n.$t('DIALTONE_ATTACHMENT_CAROUSEL_RIGHT_ARROW_ARIA_LABEL')\"\n      class=\"d-recipe-attachment-carousel__arrow d-recipe-attachment-carousel__arrow--right\"\n      circle\n      size=\"xs\"\n      importance=\"clear\"\n      @click=\"rightScroll\"\n    >\n      <template #icon>\n        <dt-icon-arrow-right\n          size=\"100\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtIconArrowRight, DtIconArrowLeft } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\nimport { DialtoneLocalization } from '@/localization';\n\nimport DtImageCarousel from './media_components/image_carousel.vue';\n\nconst MEDIA_ITEM_WIDTH = 64;\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeAttachmentCarousel',\n\n  components: {\n    DtButton,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtImageCarousel,\n  },\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\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      i18n: new DialtoneLocalization(),\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"],"names":["_sfc_main","_hoisted_1","_createElementVNode","_createElementBlock","$props","_normalizeStyle","$options","_hoisted_2","_hoisted_3","DtImageViewer","DtButton","DtIconClose","DtProgressBar","DialtoneLocalization","index","_openBlock","_createVNode","_component_dt_image_viewer","$data","_createBlock","_component_dt_progress_bar","_createCommentVNode","_component_dt_button","_cache","$event","_component_dt_icon_close","MEDIA_ITEM_WIDTH","DtIconArrowRight","DtIconArrowLeft","DtImageCarousel","mediaItem","e","type","val","carousel","args","_Fragment","_renderList","_resolveDynamicComponent","_component_dt_icon_arrow_left","_component_dt_icon_arrow_right"],"mappings":"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"}