@frollo/frollo-web-ui 9.0.1 → 9.0.3

package/esm/fw-media-picker.js

@@ -1,654 +1,11 @@
-import { c as _asyncToGenerator, d as _regeneratorRuntime, a as _slicedToArray } from './_rollupPluginBabelHelpers-DODWUb5N.js';
-import { defineComponent, ref, computed, watch, createElementVNode, resolveComponent, createElementBlock, openBlock, Fragment, createVNode, toDisplayString, withCtx, withModifiers, normalizeClass, createCommentVNode, createTextVNode } from 'vue';
-import { e as render$1, f as render$2, g as render$3, h as render$4, i as render$5, j as render$6 } from './index-BsEH8YYr.js';
-import { FwModal as __default__ } from './fw-modal.js';
+export { s as FwMediaPicker } from './index-eP2GMSdQ.js';
+import './_rollupPluginBabelHelpers-BKlDnZ7n.js';
+import 'vue';
+import './index-DHyRsKsZ.js';
+import './fw-modal.js';
+import './fw-button-DZTHZLjk.js';
+import './style-inject.es-tgCJW-Cu.js';
+import './fw-image-A2lXYs0u.js';
+import './fw-loading-bar-3x4tkF1B.js';
+import './get-root-colours-DCCAnRF4.js';
 import './fw-button.js';
-import { s as script$1 } from './fw-button-YMoW4x4c.js';
-import { s as styleInject } from './style-inject.es-tgCJW-Cu.js';
-import './fw-image-D-OHafdw.js';
-import './fw-loading-bar-DecYSBC_.js';
-import './get-root-colours-DCjlYelc.js';
-
-var script = defineComponent({
-  name: 'MediaPicker',
-  components: {
-    FwModal: __default__,
-    FwButton: script$1,
-    ArrowRotateSvg: render$6,
-    CloudArrowUpSvg: render$5,
-    GuideSvg: render$4,
-    LoadingSvg: render$3,
-    PenSvg: render$2,
-    PlusSvg: render$1
-  },
-  emits: [/** Fired when media is selected */
-  'selected'],
-  props: {
-    /**
-     * The accepted file types for the media picker
-     */
-    acceptedFileTypes: {
-      type: String,
-      "default": 'image/png, image/jpeg'
-    },
-    /**
-     * The maximum file size in bytes
-     */
-    maxFileSize: {
-      type: Number,
-      "default": 8 * 1024 * 1024 // 8 MB
-    },
-    /**
-     * The title of the picker tile
-     */
-    title: {
-      type: String
-    },
-    /**
-     * The image URL to display in the media picker
-     */
-    imageUrl: {
-      type: String
-    },
-    /**
-     * The header text for the upload modal
-     */
-    uploadHeaderText: {
-      type: String,
-      "default": 'Upload Image'
-    },
-    /**
-     * The header text for the edit modal
-     */
-    editHeaderText: {
-      type: String,
-      "default": 'Edit Image'
-    }
-  },
-  setup: function setup(props, ctx) {
-    var initialImageUrl = ref(props.imageUrl);
-    var isSelectMediaModalOpen = ref(false);
-    var isEditMediaModalOpen = ref(false);
-    var fileInput = ref(null);
-    var editorCanvas = ref(null);
-    var selectedFile = ref(null);
-    var dragging = ref(false);
-    var loading = ref(false);
-    var openFilePicker = function openFilePicker() {
-      var _fileInput$value;
-      return (_fileInput$value = fileInput.value) === null || _fileInput$value === void 0 ? void 0 : _fileInput$value.click();
-    };
-    var fileSelected = function fileSelected(event) {
-      var target = event.target;
-      if (target.files && target.files.length > 0) {
-        selectedFile.value = target.files[0];
-        if (!isInvalidFile.value) showEditor();
-      } else {
-        selectedFile.value = null;
-      }
-    };
-    var dragDropFile = function dragDropFile(event) {
-      var target = event.dataTransfer;
-      if (target !== null && target !== void 0 && target.files && target.files.length > 0) {
-        selectedFile.value = target.files[0];
-        fileInput.value.files = target.files;
-        if (!isInvalidFile.value) showEditor();
-      } else {
-        selectedFile.value = null;
-      }
-      dragging.value = false;
-    };
-    var acceptedTypes = computed(function () {
-      return props.acceptedFileTypes.split(',').map(function (type) {
-        return type.trim();
-      });
-    });
-    var isInvalidFile = computed(function () {
-      return selectedFile.value && (selectedFile.value.size > props.maxFileSize || acceptedTypes.value.includes(selectedFile.value.type) === false);
-    });
-    watch(initialImageUrl, /*#__PURE__*/function () {
-      var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(newVal, oldVal) {
-        var response, blob, mimeType;
-        return _regeneratorRuntime().wrap(function _callee$(_context) {
-          while (1) switch (_context.prev = _context.next) {
-            case 0:
-              if (!(newVal === oldVal)) {
-                _context.next = 2;
-                break;
-              }
-              return _context.abrupt("return");
-            case 2:
-              if (!initialImageUrl.value) {
-                _context.next = 21;
-                break;
-              }
-              _context.prev = 3;
-              loading.value = true;
-              _context.next = 7;
-              return fetch(initialImageUrl.value);
-            case 7:
-              response = _context.sent;
-              _context.next = 10;
-              return response.blob();
-            case 10:
-              blob = _context.sent;
-              mimeType = response.headers.get('Content-Type') || blob.type;
-              selectedFile.value = new File([blob], 'image', {
-                type: mimeType
-              });
-              _context.next = 18;
-              break;
-            case 15:
-              _context.prev = 15;
-              _context.t0 = _context["catch"](3);
-              console.error('Error fetching image:', _context.t0);
-            case 18:
-              _context.prev = 18;
-              loading.value = false;
-              return _context.finish(18);
-            case 21:
-            case "end":
-              return _context.stop();
-          }
-        }, _callee, null, [[3, 15, 18, 21]]);
-      }));
-      return function (_x, _x2) {
-        return _ref.apply(this, arguments);
-      };
-    }(), {
-      immediate: true
-    });
-    var previewImageUrl = computed(function () {
-      if (selectedFile.value && selectedFile.value.size < props.maxFileSize) {
-        return URL.createObjectURL(selectedFile.value);
-      }
-      return undefined;
-    });
-    var previewImageBitmap = computed(function () {
-      if (selectedFile.value) {
-        return createImageBitmap(selectedFile.value);
-      }
-      return undefined;
-    });
-    var acceptedFileTypesText = computed(function () {
-      return props.acceptedFileTypes.split(',').map(function (type) {
-        return type.replace('image/', '').toUpperCase().trim();
-      }).join(', ');
-    });
-    var maxFileSizeText = computed(function () {
-      var sizeInMB = Math.floor(props.maxFileSize / (1024 * 1024));
-      return "".concat(sizeInMB, "MB");
-    });
-    var showEditor = function showEditor() {
-      isSelectMediaModalOpen.value = false;
-      isEditMediaModalOpen.value = true;
-      drawImageOnCanvas();
-    };
-    var imageX = ref(0);
-    var imageY = ref(0);
-    var scaledHeight = ref(0);
-    var scaledWidth = ref(0);
-    var interactionOffsetX = ref(0);
-    var interactionOffsetY = ref(0);
-    var interactionImageX = ref(0);
-    var interactionImageY = ref(0);
-    var interactionWidth = ref(0);
-    var interactionHeight = ref(0);
-    var isEditingImage = ref(false);
-    var interactionType = ref(null);
-    var drawImageOnCanvas = /*#__PURE__*/function () {
-      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-        var save,
-          ctx,
-          imageBitmap,
-          imageHeight,
-          imageWidth,
-          _editorCanvas$value,
-          editorHeight,
-          editorWidth,
-          scale,
-          squareSize,
-          halfSquareSize,
-          corners,
-          _args2 = arguments;
-        return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-          while (1) switch (_context2.prev = _context2.next) {
-            case 0:
-              save = _args2.length > 0 && _args2[0] !== undefined ? _args2[0] : false;
-              if (!(!editorCanvas.value || !previewImageBitmap.value)) {
-                _context2.next = 3;
-                break;
-              }
-              return _context2.abrupt("return");
-            case 3:
-              ctx = editorCanvas.value.getContext('2d');
-              if (ctx) {
-                _context2.next = 6;
-                break;
-              }
-              return _context2.abrupt("return");
-            case 6:
-              _context2.next = 8;
-              return previewImageBitmap.value;
-            case 8:
-              imageBitmap = _context2.sent;
-              imageHeight = imageBitmap.height, imageWidth = imageBitmap.width;
-              _editorCanvas$value = editorCanvas.value, editorHeight = _editorCanvas$value.height, editorWidth = _editorCanvas$value.width;
-              ctx.clearRect(0, 0, editorWidth, editorHeight);
-              if (imageX.value === 0 && imageY.value === 0) {
-                scale = Math.min(editorWidth / imageWidth, editorHeight / imageHeight);
-                scaledWidth.value = imageWidth * scale;
-                scaledHeight.value = imageHeight * scale;
-                imageX.value = editorWidth / 2 - scaledWidth.value / 2;
-                imageY.value = editorHeight / 2 - scaledHeight.value / 2;
-              }
-              ctx.drawImage(imageBitmap, imageX.value, imageY.value, scaledWidth.value, scaledHeight.value);
-              if (!save) {
-                ctx.strokeStyle = '#4BF0C8';
-                ctx.lineWidth = 2;
-                ctx.strokeRect(imageX.value, imageY.value, scaledWidth.value, scaledHeight.value);
-                squareSize = 5;
-                halfSquareSize = squareSize / 2;
-                corners = [[imageX.value - halfSquareSize, imageY.value - halfSquareSize], [imageX.value + scaledWidth.value - halfSquareSize, imageY.value - halfSquareSize], [imageX.value - halfSquareSize, imageY.value + scaledHeight.value - halfSquareSize], [imageX.value + scaledWidth.value - halfSquareSize, imageY.value + scaledHeight.value - halfSquareSize]];
-                ctx.fillStyle = '#4BF0C8';
-                corners.forEach(function (_ref3) {
-                  var _ref4 = _slicedToArray(_ref3, 2),
-                    cx = _ref4[0],
-                    cy = _ref4[1];
-                  ctx.fillRect(cx, cy, squareSize, squareSize);
-                });
-              }
-            case 15:
-            case "end":
-              return _context2.stop();
-          }
-        }, _callee2);
-      }));
-      return function drawImageOnCanvas() {
-        return _ref2.apply(this, arguments);
-      };
-    }();
-    var pointerType = {
-      'top-left': 'nwse-resize',
-      'top-right': 'nesw-resize',
-      'bottom-left': 'nesw-resize',
-      'bottom-right': 'nwse-resize',
-      inside: 'move'
-    };
-    var isResizeOrMove = function isResizeOrMove(pointerX, pointerY, imageX, imageY, imageWidth, imageHeight) {
-      var squareSize = 5;
-      if (pointerX < imageX || pointerX > imageX + imageWidth || pointerY < imageY || pointerY > imageY + imageHeight) return null;
-      if (pointerX <= imageX + squareSize && pointerY <= imageY + squareSize) return 'top-left';
-      if (pointerX >= imageX + imageWidth - squareSize && pointerY <= imageY + squareSize) return 'top-right';
-      if (pointerX <= imageX + squareSize && pointerY >= imageY + imageHeight - squareSize) return 'bottom-left';
-      if (pointerX >= imageX + imageWidth - squareSize && pointerY >= imageY + imageHeight - squareSize) return 'bottom-right';
-      return 'inside';
-    };
-    var startEditImage = function startEditImage(_ref5) {
-      var button = _ref5.button,
-        offsetX = _ref5.offsetX,
-        offsetY = _ref5.offsetY;
-      if (button !== 0) return;
-      interactionType.value = isResizeOrMove(offsetX, offsetY, imageX.value, imageY.value, scaledWidth.value, scaledHeight.value);
-      if (!interactionType.value) return;
-      isEditingImage.value = true;
-      if (interactionType.value === 'inside') {
-        interactionOffsetX.value = offsetX - imageX.value;
-        interactionOffsetY.value = offsetY - imageY.value;
-      } else {
-        interactionOffsetX.value = offsetX;
-        interactionOffsetY.value = offsetY;
-        interactionImageX.value = imageX.value;
-        interactionImageY.value = imageY.value;
-        interactionWidth.value = scaledWidth.value;
-        interactionHeight.value = scaledHeight.value;
-      }
-    };
-    var stopEditImage = function stopEditImage() {
-      isEditingImage.value = false;
-      interactionType.value = null;
-      if (editorCanvas.value) {
-        editorCanvas.value.style.cursor = 'default';
-      }
-    };
-    var editImage = function editImage(_ref6) {
-      var offsetX = _ref6.offsetX,
-        offsetY = _ref6.offsetY;
-      if (!editorCanvas.value) return;
-      if (isEditingImage.value) {
-        if (interactionType.value === 'inside') {
-          imageX.value = offsetX - interactionOffsetX.value;
-          imageY.value = offsetY - interactionOffsetY.value;
-        } else {
-          var deltaX = offsetX - interactionOffsetX.value;
-          var deltaY = offsetY - interactionOffsetY.value;
-          switch (interactionType.value) {
-            case 'top-left':
-              imageX.value = interactionImageX.value + deltaX;
-              imageY.value = interactionImageY.value + deltaY;
-              scaledWidth.value = interactionWidth.value - deltaX;
-              scaledHeight.value = interactionHeight.value - deltaY;
-              break;
-            case 'top-right':
-              imageY.value = interactionImageY.value + deltaY;
-              scaledWidth.value = interactionWidth.value + deltaX;
-              scaledHeight.value = interactionHeight.value - deltaY;
-              break;
-            case 'bottom-left':
-              imageX.value = interactionImageX.value + deltaX;
-              scaledWidth.value = interactionWidth.value - deltaX;
-              scaledHeight.value = interactionHeight.value + deltaY;
-              break;
-            case 'bottom-right':
-              scaledWidth.value = interactionWidth.value + deltaX;
-              scaledHeight.value = interactionHeight.value + deltaY;
-              break;
-          }
-          var MIN_SIZE = 10;
-          scaledWidth.value = Math.max(scaledWidth.value, MIN_SIZE);
-          scaledHeight.value = Math.max(scaledHeight.value, MIN_SIZE);
-        }
-        drawImageOnCanvas();
-      } else {
-        interactionType.value = isResizeOrMove(offsetX, offsetY, imageX.value, imageY.value, scaledWidth.value, scaledHeight.value);
-        if (!interactionType.value) editorCanvas.value.style.cursor = 'default';else if (interactionType.value === 'inside') editorCanvas.value.style.cursor = pointerType.inside;else editorCanvas.value.style.cursor = pointerType[interactionType.value];
-      }
-    };
-    var clearEdits = function clearEdits() {
-      imageX.value = 0;
-      imageY.value = 0;
-      scaledWidth.value = 0;
-      scaledHeight.value = 0;
-      interactionOffsetX.value = 0;
-      interactionOffsetY.value = 0;
-      interactionImageX.value = 0;
-      interactionImageY.value = 0;
-      interactionWidth.value = 0;
-      interactionHeight.value = 0;
-    };
-    var change = function change() {
-      clearEdits();
-      selectedFile.value = null;
-      isSelectMediaModalOpen.value = true;
-      isEditMediaModalOpen.value = false;
-    };
-    var reset = function reset() {
-      clearEdits();
-      drawImageOnCanvas();
-    };
-    var save = /*#__PURE__*/function () {
-      var _ref7 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-        return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-          while (1) switch (_context3.prev = _context3.next) {
-            case 0:
-              if (editorCanvas.value) {
-                _context3.next = 2;
-                break;
-              }
-              return _context3.abrupt("return");
-            case 2:
-              _context3.next = 4;
-              return drawImageOnCanvas(true);
-            case 4:
-              editorCanvas.value.toBlob(function (blob) {
-                if (blob) {
-                  selectedFile.value = new File([blob], 'edited-image.png', {
-                    type: 'image/png'
-                  });
-                  ctx.emit('selected', selectedFile.value);
-                  isEditMediaModalOpen.value = false;
-                  imageX.value = 0;
-                  imageY.value = 0;
-                }
-              }, 'image/png');
-            case 5:
-            case "end":
-              return _context3.stop();
-          }
-        }, _callee3);
-      }));
-      return function save() {
-        return _ref7.apply(this, arguments);
-      };
-    }();
-    return {
-      previewImageUrl: previewImageUrl,
-      fileInput: fileInput,
-      editorCanvas: editorCanvas,
-      isSelectMediaModalOpen: isSelectMediaModalOpen,
-      isEditMediaModalOpen: isEditMediaModalOpen,
-      acceptedFileTypesText: acceptedFileTypesText,
-      maxFileSizeText: maxFileSizeText,
-      openFilePicker: openFilePicker,
-      fileSelected: fileSelected,
-      dragging: dragging,
-      loading: loading,
-      dragDropFile: dragDropFile,
-      isInvalidFile: isInvalidFile,
-      showEditor: showEditor,
-      change: change,
-      reset: reset,
-      save: save,
-      startEditImage: startEditImage,
-      stopEditImage: stopEditImage,
-      editImage: editImage
-    };
-  }
-});
-
-var _hoisted_1 = ["accept"];
-var _hoisted_2 = {
-  "class": "cursor-pointer w-[160px] h-[160px] bg-white"
-};
-var _hoisted_3 = ["src"];
-var _hoisted_4 = {
-  key: 1,
-  "class": "flex flex-col w-full h-full items-center justify-center gap-2 border border-grey-100 rounded"
-};
-var _hoisted_5 = {
-  "class": "text-brand-text3 group-hover:text-brand-text2"
-};
-var _hoisted_6 = {
-  "class": "pt-[23px] px-4 pb-2 mb-0 text-left"
-};
-var _hoisted_7 = {
-  "class": "h-[360px] px-10 pb-10"
-};
-var _hoisted_8 = /*#__PURE__*/createElementVNode("br", null, null, -1);
-var _hoisted_9 = /*#__PURE__*/createElementVNode("br", null, null, -1);
-var _hoisted_10 = {
-  key: 0,
-  "class": "text-error"
-};
-var _hoisted_11 = {
-  "class": "pt-[23px] px-4 pb-2 mb-0 text-left"
-};
-var _hoisted_12 = {
-  "class": "flex flex-col items-center justify-center p-10 bg-black gap-1"
-};
-var _hoisted_13 = {
-  "class": "w-[300px] h-[300px] rounded bg-white relative"
-};
-var _hoisted_14 = /*#__PURE__*/createElementVNode("p", {
-  "class": "text-white text-sm"
-}, "Drag to reposition or resize", -1);
-var _hoisted_15 = {
-  "class": "flex px-6 py-4 gap-2 w-full justify-between flex-col sm:flex-row"
-};
-var _hoisted_16 = {
-  "class": "flex justify-start gap-2 flex-col sm:flex-row"
-};
-var _hoisted_17 = {
-  "class": "flex flex-row items-center gap-2"
-};
-var _hoisted_18 = {
-  "class": "flex justify-end flex-col sm:flex-row"
-};
-function render(_ctx, _cache, $props, $setup, $data, $options) {
-  var _component_PenSvg = resolveComponent("PenSvg");
-  var _component_LoadingSvg = resolveComponent("LoadingSvg");
-  var _component_PlusSvg = resolveComponent("PlusSvg");
-  var _component_CloudArrowUpSvg = resolveComponent("CloudArrowUpSvg");
-  var _component_FwButton = resolveComponent("FwButton");
-  var _component_FwModal = resolveComponent("FwModal");
-  var _component_GuideSvg = resolveComponent("GuideSvg");
-  var _component_ArrowRotateSvg = resolveComponent("ArrowRotateSvg");
-  return openBlock(), createElementBlock(Fragment, null, [createElementVNode("input", {
-    ref: "fileInput",
-    type: "file",
-    accept: _ctx.acceptedFileTypes,
-    "class": "hidden",
-    onChange: _cache[0] || (_cache[0] = function () {
-      return _ctx.fileSelected && _ctx.fileSelected.apply(_ctx, arguments);
-    })
-  }, null, 40, _hoisted_1), createElementVNode("div", _hoisted_2, [_ctx.previewImageUrl ? (openBlock(), createElementBlock("div", {
-    key: 0,
-    "class": "w-full h-full relative",
-    onClick: _cache[1] || (_cache[1] = function () {
-      return _ctx.showEditor && _ctx.showEditor.apply(_ctx, arguments);
-    })
-  }, [createVNode(_component_PenSvg, {
-    name: "pen",
-    "class": "absolute bottom-[-8px] right-[-8px] w-8 h-8 p-2 text-white bg-primary rounded-full"
-  }), createElementVNode("img", {
-    src: _ctx.previewImageUrl,
-    "class": "object-cover rounded w-full h-full"
-  }, null, 8, _hoisted_3)])) : _ctx.loading ? (openBlock(), createElementBlock("div", _hoisted_4, [createVNode(_component_LoadingSvg, {
-    name: "loading",
-    "class": "w-8 h-8 text-brand-text2 animate-spin"
-  })])) : (openBlock(), createElementBlock("div", {
-    key: 2,
-    "class": "fw-media-picker--empty group",
-    onClick: _cache[2] || (_cache[2] = function ($event) {
-      return _ctx.isSelectMediaModalOpen = true;
-    })
-  }, [createVNode(_component_PlusSvg, {
-    name: "plus",
-    "class": "w-8 h-8 p-1 text-brand-text3 rounded-full border border-brand-text3 group-hover:border-brand-text2 group-hover:text-brand-text2"
-  }), createElementVNode("p", _hoisted_5, toDisplayString(_ctx.title), 1)]))]), createVNode(_component_FwModal, {
-    modelValue: _ctx.isSelectMediaModalOpen,
-    "onUpdate:modelValue": _cache[7] || (_cache[7] = function ($event) {
-      return _ctx.isSelectMediaModalOpen = $event;
-    }),
-    "show-confirm": false,
-    "show-cancel": false,
-    "show-close-button": true,
-    padding: false,
-    "footer-class": "px-4 pb-8",
-    onCancel: _cache[8] || (_cache[8] = function ($event) {
-      return _ctx.isSelectMediaModalOpen = false;
-    })
-  }, {
-    header: withCtx(function () {
-      return [createElementVNode("h4", _hoisted_6, toDisplayString(_ctx.uploadHeaderText), 1)];
-    }),
-    body: withCtx(function () {
-      return [createElementVNode("div", _hoisted_7, [createElementVNode("div", {
-        "class": normalizeClass(["flex flex-col border border-1 border-dashed border-grey-40 rounded h-full items-center justify-center gap-1 bg-white", {
-          'border-primary !bg-grey-40/60': _ctx.dragging,
-          '!border-error': _ctx.isInvalidFile
-        }]),
-        onDragenter: _cache[3] || (_cache[3] = withModifiers(function ($event) {
-          return _ctx.dragging = true;
-        }, ["prevent"])),
-        onDragover: _cache[4] || (_cache[4] = withModifiers(function ($event) {
-          return _ctx.dragging = true;
-        }, ["prevent"])),
-        onDragleave: _cache[5] || (_cache[5] = withModifiers(function ($event) {
-          return _ctx.dragging = false;
-        }, ["prevent"])),
-        onDrop: _cache[6] || (_cache[6] = withModifiers(function () {
-          return _ctx.dragDropFile && _ctx.dragDropFile.apply(_ctx, arguments);
-        }, ["prevent"]))
-      }, [createVNode(_component_CloudArrowUpSvg, {
-        name: "cloud-arrow-up",
-        "class": "w-12 h-12 p-1 text-grey-80"
-      }), createElementVNode("p", null, [createTextVNode(" Select file to "), createVNode(_component_FwButton, {
-        variant: "link",
-        onClick: withModifiers(_ctx.openFilePicker, ["prevent"])
-      }, {
-        "default": withCtx(function () {
-          return [createTextVNode("upload")];
-        }),
-        _: 1
-      }, 8, ["onClick"]), createTextVNode(" or drag-and-drop a file. "), _hoisted_8, createElementVNode("span", null, toDisplayString(_ctx.acceptedFileTypesText) + " files only", 1), createTextVNode(". "), _hoisted_9, createTextVNode(" Recommended 300 x 300 or larger. Max " + toDisplayString(_ctx.maxFileSizeText) + ". ", 1)]), _ctx.isInvalidFile ? (openBlock(), createElementBlock("p", _hoisted_10, "Please upload a valid file")) : createCommentVNode("", true)], 34)])];
-    }),
-    _: 1
-  }, 8, ["modelValue"]), createVNode(_component_FwModal, {
-    modelValue: _ctx.isEditMediaModalOpen,
-    "onUpdate:modelValue": _cache[12] || (_cache[12] = function ($event) {
-      return _ctx.isEditMediaModalOpen = $event;
-    }),
-    "show-confirm": false,
-    "show-cancel": false,
-    "show-close-button": true,
-    padding: false,
-    "container-class": "!bg-[#F7F7F7] w-full",
-    "footer-class": "px-4 pb-8",
-    onCancel: _cache[13] || (_cache[13] = function ($event) {
-      return _ctx.isEditMediaModalOpen = false;
-    })
-  }, {
-    header: withCtx(function () {
-      return [createElementVNode("h4", _hoisted_11, toDisplayString(_ctx.editHeaderText), 1)];
-    }),
-    body: withCtx(function () {
-      return [createElementVNode("div", _hoisted_12, [createElementVNode("div", _hoisted_13, [createVNode(_component_GuideSvg, {
-        name: "guide",
-        "class": "absolute pointer-events-none"
-      }), createElementVNode("canvas", {
-        ref: "editorCanvas",
-        width: "300",
-        height: "300",
-        onPointerdown: _cache[9] || (_cache[9] = function () {
-          return _ctx.startEditImage && _ctx.startEditImage.apply(_ctx, arguments);
-        }),
-        onPointerup: _cache[10] || (_cache[10] = function () {
-          return _ctx.stopEditImage && _ctx.stopEditImage.apply(_ctx, arguments);
-        }),
-        onPointermove: _cache[11] || (_cache[11] = function () {
-          return _ctx.editImage && _ctx.editImage.apply(_ctx, arguments);
-        })
-      }, null, 544)]), _hoisted_14]), createElementVNode("div", _hoisted_15, [createElementVNode("div", _hoisted_16, [createVNode(_component_FwButton, {
-        variant: "tertiary",
-        size: "md",
-        onClick: _ctx.change
-      }, {
-        "default": withCtx(function () {
-          return [createTextVNode("Change")];
-        }),
-        _: 1
-      }, 8, ["onClick"]), createVNode(_component_FwButton, {
-        variant: "tertiary",
-        size: "md",
-        onClick: _ctx.reset
-      }, {
-        "default": withCtx(function () {
-          return [createElementVNode("div", _hoisted_17, [createTextVNode(" Reset "), createVNode(_component_ArrowRotateSvg, {
-            name: "arrow-rotate",
-            "class": "inline-block ml-1 w-4 h-4"
-          })])];
-        }),
-        _: 1
-      }, 8, ["onClick"])]), createElementVNode("div", _hoisted_18, [createVNode(_component_FwButton, {
-        variant: "primary",
-        size: "md",
-        onClick: _ctx.save
-      }, {
-        "default": withCtx(function () {
-          return [createTextVNode("Save")];
-        }),
-        _: 1
-      }, 8, ["onClick"])])])];
-    }),
-    _: 1
-  }, 8, ["modelValue"])], 64);
-}
-
-var css_248z = ".fw-media-picker--empty{-webkit-box-orient:vertical;-webkit-box-direction:normal;-moz-box-orient:vertical;-moz-box-direction:normal;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;--tw-border-opacity:1;-webkit-align-items:center;align-items:center;border-color:rgb(200 203 208/var(--tw-border-opacity));border-radius:.25rem;border-width:1px;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:.5rem;height:100%;-webkit-justify-content:center;justify-content:center;text-align:center;width:100%}.fw-media-picker--empty:hover{border-color:var(--colorText2);color:var(--colorText2)}";
-var stylesheet = ".fw-media-picker--empty{-webkit-box-orient:vertical;-webkit-box-direction:normal;-moz-box-orient:vertical;-moz-box-direction:normal;-webkit-box-align:center;-moz-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-moz-box-pack:center;-ms-flex-pack:center;--tw-border-opacity:1;-webkit-align-items:center;align-items:center;border-color:rgb(200 203 208/var(--tw-border-opacity));border-radius:.25rem;border-width:1px;display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:.5rem;height:100%;-webkit-justify-content:center;justify-content:center;text-align:center;width:100%}.fw-media-picker--empty:hover{border-color:var(--colorText2);color:var(--colorText2)}";
-styleInject(css_248z);
-
-script.render = render;
-
-export { script as FwMediaPicker };