@designcrowd/fe-shared-lib 1.7.0 → 1.7.1

package/src/experiences/components/UploadYourLogoOnBoarding/LogoCropper.vue

@@ -1,473 +1,473 @@
-<template>
-  <div class="c-byo-cropper tw-relative tw-w-full tw-h-full lg:tw-h-auto tw-flex tw-flex-col">
-    <div class="tw-h-full tw-pb-24 lg:tw-pb-0 tw-overflow-scroll">
-      <div class="tw-pb-8">
-        <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
-          {{ progressLabel }}
-        </p>
-        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('cropYourLogo') }}</h2>
-        <p class="tw-mt-0">{{ uploadYourLogoTr('cropDescription') }}</p>
-      </div>
-
-      <div class="c-byo-cropper__container lg:tw-pb-8 tw-mx-auto" :class="{ 'tw-opacity-0': !cropperToolReady }">
-        <vue-cropper
-          v-if="logoData && logoData.logoImageUrl"
-          ref="cropper"
-          :view-mode="2"
-          :zoomable="false"
-          :movable="false"
-          :src="logoData.logoImageUrl"
-          :ready="onCropReady"
-          :auto-crop-area="1"
-        />
-      </div>
-    </div>
-
-    <div
-      class="tw-fixed tw-rounded-b tw-bottom-0 tw-left-0 tw-z-10 tw-bg-grayscale-200 lg:tw-static tw-flex tw-w-full tw-items-center tw-justify-center tw-border-0 tw-border-t tw-border-black/10 tw-border-solid tw-py-4 tw-px-8 tw-box-border"
-    >
-      <Button
-        :label="uploadYourLogoTr('cancel')"
-        size="large"
-        variant="outline"
-        container-classes="tw-mx-2"
-        data-test-cancel-btn
-        @on-click="cancel"
-      />
-      <Button
-        :label="uploadYourLogoTr('continue')"
-        size="large"
-        variant="primary-with-icon"
-        icon="chevron-right-wide"
-        container-classes="tw-mx-2"
-        data-test-continue-btn
-        @on-click="cropImage"
-      />
-    </div>
-  </div>
-</template>
-<script>
-import VueCropper from 'vue-cropperjs';
-import Button from '../../../atoms/components/Button/Button.vue';
-
-import trackEvent from '../../helpers/tracking';
-import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
-
-export default {
-  components: {
-    Button,
-    VueCropper,
-  },
-  props: {
-    logoData: {
-      type: Object,
-      required: true,
-      default: null,
-    },
-    progressLabel: {
-      type: String,
-      required: true,
-    },
-    eventCategory: {
-      type: String,
-      required: true,
-    },
-  },
-  setup() {
-    return {
-      uploadYourLogoTr,
-    };
-  },
-  data() {
-    return {
-      cropperToolReady: false,
-    };
-  },
-  methods: {
-    cropImage() {
-      if (!this.cropperToolReady) return;
-
-      const { x, y, width, height } = this.$refs.cropper.getData(true);
-      const bounds = {
-        left: x,
-        top: y,
-        width,
-        height,
-      };
-      const { naturalHeight, naturalWidth } = this.$refs.cropper.getImageData();
-      const isCropped = x !== 0 || y !== 0 || width !== naturalWidth || height !== naturalHeight;
-      this.$emit('on-image-cropped', {
-        bounds,
-        dataUrl: this.$refs.cropper.getCroppedCanvas().toDataURL(),
-        isCropped,
-      });
-
-      trackEvent({
-        eventCategory: this.eventCategory,
-        eventAction: 'cropLogo',
-        eventLabel: 'Clicked_Continue',
-        event: 'click',
-      });
-    },
-    cancel() {
-      this.$emit('on-cancel');
-    },
-    onCropReady() {
-      this.cropperToolReady = true;
-    },
-  },
-};
-</script>
-<style>
-/*!
- * Cropper.js v1.5.12
- * https://fengyuanchen.github.io/cropperjs
- *
- * Copyright 2015-present Chen Fengyuan
- * Released under the MIT license
- *
- * Date: 2021-06-12T08:00:11.623Z
- */
-
-.cropper-container {
-  direction: ltr;
-  font-size: 0;
-  line-height: 0;
-  position: relative;
-  -ms-touch-action: none;
-  touch-action: none;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.cropper-container img {
-  display: block;
-  height: 100%;
-  image-orientation: 0deg;
-  max-height: none !important;
-  max-width: none !important;
-  min-height: 0 !important;
-  min-width: 0 !important;
-  width: 100%;
-}
-
-.cropper-wrap-box {
-  display: none;
-}
-
-.cropper-wrap-box,
-.cropper-canvas,
-.cropper-drag-box,
-.cropper-crop-box,
-.cropper-modal {
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  right: 0;
-  top: 0;
-}
-
-.cropper-wrap-box,
-.cropper-canvas {
-  overflow: hidden;
-}
-
-.cropper-drag-box {
-  background-color: #fff;
-  opacity: 0;
-}
-
-.cropper-modal {
-  background-color: #000;
-  opacity: 0.5;
-}
-
-.cropper-view-box {
-  display: block;
-  height: 100%;
-  outline: 1px solid #39f;
-  outline-color: rgba(51, 153, 255, 0.75);
-  overflow: hidden;
-  width: 100%;
-}
-
-.cropper-dashed {
-  border: 0 dashed #eee;
-  display: block;
-  opacity: 0.5;
-  position: absolute;
-}
-
-.cropper-dashed.dashed-h {
-  border-bottom-width: 1px;
-  border-top-width: 1px;
-  height: calc(100% / 3);
-  left: 0;
-  top: calc(100% / 3);
-  width: 100%;
-}
-
-.cropper-dashed.dashed-v {
-  border-left-width: 1px;
-  border-right-width: 1px;
-  height: 100%;
-  left: calc(100% / 3);
-  top: 0;
-  width: calc(100% / 3);
-}
-
-.cropper-center {
-  display: block;
-  height: 0;
-  left: 50%;
-  opacity: 0.75;
-  position: absolute;
-  top: 50%;
-  width: 0;
-}
-
-.cropper-center::before,
-.cropper-center::after {
-  background-color: #eee;
-  content: ' ';
-  display: block;
-  position: absolute;
-}
-
-.cropper-center::before {
-  height: 1px;
-  left: -3px;
-  top: 0;
-  width: 7px;
-}
-
-.cropper-center::after {
-  height: 7px;
-  left: 0;
-  top: -3px;
-  width: 1px;
-}
-
-.cropper-face,
-.cropper-line,
-.cropper-point {
-  display: block;
-  height: 100%;
-  opacity: 0.1;
-  position: absolute;
-  width: 100%;
-}
-
-.cropper-face {
-  background-color: #fff;
-  left: 0;
-  top: 0;
-}
-
-.cropper-line {
-  background-color: #39f;
-}
-
-.cropper-line.line-e {
-  cursor: ew-resize;
-  right: -3px;
-  top: 0;
-  width: 5px;
-}
-
-.cropper-line.line-n {
-  cursor: ns-resize;
-  height: 5px;
-  left: 0;
-  top: -3px;
-}
-
-.cropper-line.line-w {
-  cursor: ew-resize;
-  left: -3px;
-  top: 0;
-  width: 5px;
-}
-
-.cropper-line.line-s {
-  bottom: -3px;
-  cursor: ns-resize;
-  height: 5px;
-  left: 0;
-}
-
-.cropper-point {
-  background-color: #39f;
-  height: 5px;
-  opacity: 0.75;
-  width: 5px;
-}
-
-.cropper-point.point-e {
-  cursor: ew-resize;
-  margin-top: -3px;
-  right: -3px;
-  top: 50%;
-}
-
-.cropper-point.point-n {
-  cursor: ns-resize;
-  left: 50%;
-  margin-left: -3px;
-  top: -3px;
-}
-
-.cropper-point.point-w {
-  cursor: ew-resize;
-  left: -3px;
-  margin-top: -3px;
-  top: 50%;
-}
-
-.cropper-point.point-s {
-  bottom: -3px;
-  cursor: s-resize;
-  left: 50%;
-  margin-left: -3px;
-}
-
-.cropper-point.point-ne {
-  cursor: nesw-resize;
-  right: -3px;
-  top: -3px;
-}
-
-.cropper-point.point-nw {
-  cursor: nwse-resize;
-  left: -3px;
-  top: -3px;
-}
-
-.cropper-point.point-sw {
-  bottom: -3px;
-  cursor: nesw-resize;
-  left: -3px;
-}
-
-.cropper-point.point-se {
-  bottom: -3px;
-  cursor: nwse-resize;
-  height: 20px;
-  opacity: 1;
-  right: -3px;
-  width: 20px;
-}
-
-@media (min-width: 768px) {
-  .cropper-point.point-se {
-    height: 15px;
-    width: 15px;
-  }
-}
-
-@media (min-width: 992px) {
-  .cropper-point.point-se {
-    height: 10px;
-    width: 10px;
-  }
-}
-
-@media (min-width: 1200px) {
-  .cropper-point.point-se {
-    height: 5px;
-    opacity: 0.75;
-    width: 5px;
-  }
-}
-
-.cropper-point.point-se::before {
-  background-color: #39f;
-  bottom: -50%;
-  content: ' ';
-  display: block;
-  height: 200%;
-  opacity: 0;
-  position: absolute;
-  right: -50%;
-  width: 200%;
-}
-
-.cropper-invisible {
-  opacity: 0;
-}
-
-.cropper-bg {
-  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
-}
-
-.cropper-hide {
-  display: block;
-  height: 0;
-  position: absolute;
-  width: 0;
-}
-
-.cropper-hidden {
-  display: none !important;
-}
-
-.cropper-move {
-  cursor: move;
-}
-
-.cropper-crop {
-  cursor: crosshair;
-}
-
-.cropper-disabled .cropper-drag-box,
-.cropper-disabled .cropper-face,
-.cropper-disabled .cropper-line,
-.cropper-disabled .cropper-point {
-  cursor: not-allowed;
-}
-
-.c-byo-cropper .cropper-bg {
-  background-image: none;
-}
-
-.c-byo-cropper .cropper-drag-box {
-  background-color: transparent;
-}
-
-.c-byo-cropper .cropper-view-box {
-  outline: 1px solid #fff;
-  border: 1px solid rgba(0, 0, 0, 0.2) !important;
-}
-
-.c-byo-cropper .cropper-center::before,
-.c-byo-cropper .cropper-center::after {
-  background-color: #eee;
-}
-
-.c-byo-cropper .cropper-face {
-  background-color: #fff;
-}
-
-.c-byo-cropper .cropper-line {
-  background-color: #b2b2b2;
-}
-
-.c-byo-cropper .cropper-point {
-  background-color: #7a7a7a;
-  border: 1px solid #fff;
-  height: 10px;
-  width: 10px;
-}
-
-.c-byo-cropper .c-byo-cropper__container {
-  width: 300px;
-  height: 300px;
-}
-
-.c-byo-cropper .c-byo-cropper__container > div {
-  height: 100%;
-  width: 100%;
-}
-</style>
+<template>
+  <div class="c-byo-cropper tw-relative tw-w-full tw-h-full lg:tw-h-auto tw-flex tw-flex-col">
+    <div class="tw-h-full tw-pb-24 lg:tw-pb-0 tw-overflow-scroll">
+      <div class="tw-pb-8">
+        <p class="tw-text-grayscale-600 tw-font-bold tw-text-xs tw-mb-2 tw-uppercase">
+          {{ progressLabel }}
+        </p>
+        <h2 class="tw-mb-4 tw-text-4xl tw-text-black tw-font-bold">{{ uploadYourLogoTr('cropYourLogo') }}</h2>
+        <p class="tw-mt-0">{{ uploadYourLogoTr('cropDescription') }}</p>
+      </div>
+
+      <div class="c-byo-cropper__container lg:tw-pb-8 tw-mx-auto" :class="{ 'tw-opacity-0': !cropperToolReady }">
+        <vue-cropper
+          v-if="logoData && logoData.logoImageUrl"
+          ref="cropper"
+          :view-mode="2"
+          :zoomable="false"
+          :movable="false"
+          :src="logoData.logoImageUrl"
+          :ready="onCropReady"
+          :auto-crop-area="1"
+        />
+      </div>
+    </div>
+
+    <div
+      class="tw-fixed tw-rounded-b tw-bottom-0 tw-left-0 tw-z-10 tw-bg-grayscale-200 lg:tw-static tw-flex tw-w-full tw-items-center tw-justify-center tw-border-0 tw-border-t tw-border-black/10 tw-border-solid tw-py-4 tw-px-8 tw-box-border"
+    >
+      <Button
+        :label="uploadYourLogoTr('cancel')"
+        size="large"
+        variant="outline"
+        container-classes="tw-mx-2"
+        data-test-cancel-btn
+        @on-click="cancel"
+      />
+      <Button
+        :label="uploadYourLogoTr('continue')"
+        size="large"
+        variant="primary-with-icon"
+        icon="chevron-right-wide"
+        container-classes="tw-mx-2"
+        data-test-continue-btn
+        @on-click="cropImage"
+      />
+    </div>
+  </div>
+</template>
+<script>
+import VueCropper from 'vue-cropperjs';
+import Button from '../../../atoms/components/Button/Button.vue';
+
+import trackEvent from '../../helpers/tracking';
+import { uploadYourLogoTr } from '../../../useSharedLibTranslate';
+
+export default {
+  components: {
+    Button,
+    VueCropper,
+  },
+  props: {
+    logoData: {
+      type: Object,
+      required: true,
+      default: null,
+    },
+    progressLabel: {
+      type: String,
+      required: true,
+    },
+    eventCategory: {
+      type: String,
+      required: true,
+    },
+  },
+  setup() {
+    return {
+      uploadYourLogoTr,
+    };
+  },
+  data() {
+    return {
+      cropperToolReady: false,
+    };
+  },
+  methods: {
+    cropImage() {
+      if (!this.cropperToolReady) return;
+
+      const { x, y, width, height } = this.$refs.cropper.getData(true);
+      const bounds = {
+        left: x,
+        top: y,
+        width,
+        height,
+      };
+      const { naturalHeight, naturalWidth } = this.$refs.cropper.getImageData();
+      const isCropped = x !== 0 || y !== 0 || width !== naturalWidth || height !== naturalHeight;
+      this.$emit('on-image-cropped', {
+        bounds,
+        dataUrl: this.$refs.cropper.getCroppedCanvas().toDataURL(),
+        isCropped,
+      });
+
+      trackEvent({
+        eventCategory: this.eventCategory,
+        eventAction: 'cropLogo',
+        eventLabel: 'Clicked_Continue',
+        event: 'click',
+      });
+    },
+    cancel() {
+      this.$emit('on-cancel');
+    },
+    onCropReady() {
+      this.cropperToolReady = true;
+    },
+  },
+};
+</script>
+<style>
+/*!
+ * Cropper.js v1.5.12
+ * https://fengyuanchen.github.io/cropperjs
+ *
+ * Copyright 2015-present Chen Fengyuan
+ * Released under the MIT license
+ *
+ * Date: 2021-06-12T08:00:11.623Z
+ */
+
+.cropper-container {
+  direction: ltr;
+  font-size: 0;
+  line-height: 0;
+  position: relative;
+  -ms-touch-action: none;
+  touch-action: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.cropper-container img {
+  display: block;
+  height: 100%;
+  image-orientation: 0deg;
+  max-height: none !important;
+  max-width: none !important;
+  min-height: 0 !important;
+  min-width: 0 !important;
+  width: 100%;
+}
+
+.cropper-wrap-box {
+  display: none;
+}
+
+.cropper-wrap-box,
+.cropper-canvas,
+.cropper-drag-box,
+.cropper-crop-box,
+.cropper-modal {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+
+.cropper-wrap-box,
+.cropper-canvas {
+  overflow: hidden;
+}
+
+.cropper-drag-box {
+  background-color: #fff;
+  opacity: 0;
+}
+
+.cropper-modal {
+  background-color: #000;
+  opacity: 0.5;
+}
+
+.cropper-view-box {
+  display: block;
+  height: 100%;
+  outline: 1px solid #39f;
+  outline-color: rgba(51, 153, 255, 0.75);
+  overflow: hidden;
+  width: 100%;
+}
+
+.cropper-dashed {
+  border: 0 dashed #eee;
+  display: block;
+  opacity: 0.5;
+  position: absolute;
+}
+
+.cropper-dashed.dashed-h {
+  border-bottom-width: 1px;
+  border-top-width: 1px;
+  height: calc(100% / 3);
+  left: 0;
+  top: calc(100% / 3);
+  width: 100%;
+}
+
+.cropper-dashed.dashed-v {
+  border-left-width: 1px;
+  border-right-width: 1px;
+  height: 100%;
+  left: calc(100% / 3);
+  top: 0;
+  width: calc(100% / 3);
+}
+
+.cropper-center {
+  display: block;
+  height: 0;
+  left: 50%;
+  opacity: 0.75;
+  position: absolute;
+  top: 50%;
+  width: 0;
+}
+
+.cropper-center::before,
+.cropper-center::after {
+  background-color: #eee;
+  content: ' ';
+  display: block;
+  position: absolute;
+}
+
+.cropper-center::before {
+  height: 1px;
+  left: -3px;
+  top: 0;
+  width: 7px;
+}
+
+.cropper-center::after {
+  height: 7px;
+  left: 0;
+  top: -3px;
+  width: 1px;
+}
+
+.cropper-face,
+.cropper-line,
+.cropper-point {
+  display: block;
+  height: 100%;
+  opacity: 0.1;
+  position: absolute;
+  width: 100%;
+}
+
+.cropper-face {
+  background-color: #fff;
+  left: 0;
+  top: 0;
+}
+
+.cropper-line {
+  background-color: #39f;
+}
+
+.cropper-line.line-e {
+  cursor: ew-resize;
+  right: -3px;
+  top: 0;
+  width: 5px;
+}
+
+.cropper-line.line-n {
+  cursor: ns-resize;
+  height: 5px;
+  left: 0;
+  top: -3px;
+}
+
+.cropper-line.line-w {
+  cursor: ew-resize;
+  left: -3px;
+  top: 0;
+  width: 5px;
+}
+
+.cropper-line.line-s {
+  bottom: -3px;
+  cursor: ns-resize;
+  height: 5px;
+  left: 0;
+}
+
+.cropper-point {
+  background-color: #39f;
+  height: 5px;
+  opacity: 0.75;
+  width: 5px;
+}
+
+.cropper-point.point-e {
+  cursor: ew-resize;
+  margin-top: -3px;
+  right: -3px;
+  top: 50%;
+}
+
+.cropper-point.point-n {
+  cursor: ns-resize;
+  left: 50%;
+  margin-left: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-w {
+  cursor: ew-resize;
+  left: -3px;
+  margin-top: -3px;
+  top: 50%;
+}
+
+.cropper-point.point-s {
+  bottom: -3px;
+  cursor: s-resize;
+  left: 50%;
+  margin-left: -3px;
+}
+
+.cropper-point.point-ne {
+  cursor: nesw-resize;
+  right: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-nw {
+  cursor: nwse-resize;
+  left: -3px;
+  top: -3px;
+}
+
+.cropper-point.point-sw {
+  bottom: -3px;
+  cursor: nesw-resize;
+  left: -3px;
+}
+
+.cropper-point.point-se {
+  bottom: -3px;
+  cursor: nwse-resize;
+  height: 20px;
+  opacity: 1;
+  right: -3px;
+  width: 20px;
+}
+
+@media (min-width: 768px) {
+  .cropper-point.point-se {
+    height: 15px;
+    width: 15px;
+  }
+}
+
+@media (min-width: 992px) {
+  .cropper-point.point-se {
+    height: 10px;
+    width: 10px;
+  }
+}
+
+@media (min-width: 1200px) {
+  .cropper-point.point-se {
+    height: 5px;
+    opacity: 0.75;
+    width: 5px;
+  }
+}
+
+.cropper-point.point-se::before {
+  background-color: #39f;
+  bottom: -50%;
+  content: ' ';
+  display: block;
+  height: 200%;
+  opacity: 0;
+  position: absolute;
+  right: -50%;
+  width: 200%;
+}
+
+.cropper-invisible {
+  opacity: 0;
+}
+
+.cropper-bg {
+  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
+}
+
+.cropper-hide {
+  display: block;
+  height: 0;
+  position: absolute;
+  width: 0;
+}
+
+.cropper-hidden {
+  display: none !important;
+}
+
+.cropper-move {
+  cursor: move;
+}
+
+.cropper-crop {
+  cursor: crosshair;
+}
+
+.cropper-disabled .cropper-drag-box,
+.cropper-disabled .cropper-face,
+.cropper-disabled .cropper-line,
+.cropper-disabled .cropper-point {
+  cursor: not-allowed;
+}
+
+.c-byo-cropper .cropper-bg {
+  background-image: none;
+}
+
+.c-byo-cropper .cropper-drag-box {
+  background-color: transparent;
+}
+
+.c-byo-cropper .cropper-view-box {
+  outline: 1px solid #fff;
+  border: 1px solid rgba(0, 0, 0, 0.2) !important;
+}
+
+.c-byo-cropper .cropper-center::before,
+.c-byo-cropper .cropper-center::after {
+  background-color: #eee;
+}
+
+.c-byo-cropper .cropper-face {
+  background-color: #fff;
+}
+
+.c-byo-cropper .cropper-line {
+  background-color: #b2b2b2;
+}
+
+.c-byo-cropper .cropper-point {
+  background-color: #7a7a7a;
+  border: 1px solid #fff;
+  height: 10px;
+  width: 10px;
+}
+
+.c-byo-cropper .c-byo-cropper__container {
+  width: 300px;
+  height: 300px;
+}
+
+.c-byo-cropper .c-byo-cropper__container > div {
+  height: 100%;
+  width: 100%;
+}
+</style>