{"version":3,"sources":["webpack:///./resources/js/src/app/components/item/ItemBackgroundOverlay.vue","webpack:///./resources/js/src/app/components/item/ItemBackgroundOverlay.vue?7765","webpack:///resources/js/src/app/components/item/ItemBackgroundOverlay.vue","webpack:///./resources/js/src/app/components/item/ItemBackgroundOverlay.vue?0f45"],"names":["render","_vm","this","_c","_self","visible","staticClass","on","click","closeBackgroundOverlay","_v","attrs","id","_l","backgroundImages","item","index","key","class","active","activeIndex","src","alt","name","loading","selectedImage","width","height","viewBox","fill","xmlns","d","stroke","_s","image","uploadedImage","length","clearImageData","transform","_e","ref","type","accept","change","handleImageUpload","_withStripped","props","Boolean","default","String","required","data","methods","$emit","event","file","target","files","URL","createObjectURL","push","$","carousel","handleKeyDown","nextImage","prevImage","$refs","imageInput","value","splice","mounted","_this","$nextTick","activeItem","relatedTarget","document","addEventListener","beforeDestroy","removeEventListener","component"],"mappings":"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","file":"chunks/ceres-client-46.min.js","sourcesContent":["var render = function render() {\n  var _vm = this,\n    _c = _vm._self._c\n  return _vm.visible\n    ? _c(\"div\", { staticClass: \"overlay\" }, [\n        _c(\"div\", { staticClass: \"overlay-toolbar\" }, [\n          _c(\n            \"div\",\n            {\n              staticClass: \"overlay-close\",\n              on: { click: _vm.closeBackgroundOverlay },\n            },\n            [_vm._v(\"✕\")]\n          ),\n        ]),\n        _vm._v(\" \"),\n        _c(\"div\", { staticClass: \"overlay-content position-relative\" }, [\n          _c(\"div\", { staticClass: \"overlay-carousel\" }, [\n            _c(\n              \"div\",\n              {\n                staticClass: \"carousel slide\",\n                attrs: {\n                  id: \"overlayItemBackgroundCarousel\",\n                  \"data-ride\": \"carousel\",\n                  \"data-interval\": 0,\n                },\n              },\n              [\n                _c(\n                  \"div\",\n                  { staticClass: \"position-relative mx-auto carousel-wrapper\" },\n                  [\n                    _c(\n                      \"div\",\n                      { staticClass: \"carousel-inner\" },\n                      _vm._l(_vm.backgroundImages, function (item, index) {\n                        return _c(\n                          \"div\",\n                          {\n                            key: index,\n                            class: {\n                              \"carousel-item\": true,\n                              active: index === _vm.activeIndex,\n                            },\n                          },\n                          [\n                            _c(\"img\", {\n                              staticClass: \"img-fluid\",\n                              attrs: {\n                                src: item,\n                                alt: _vm.name,\n                                loading: \"lazy\",\n                              },\n                            }),\n                          ]\n                        )\n                      }),\n                      0\n                    ),\n                    _vm._v(\" \"),\n                    _c(\"div\", { staticClass: \"overlay-item-preview\" }, [\n                      _c(\"img\", {\n                        staticClass: \"img-fluid\",\n                        attrs: {\n                          src: _vm.selectedImage,\n                          alt: _vm.name,\n                          loading: \"lazy\",\n                        },\n                      }),\n                    ]),\n                  ]\n                ),\n                _vm._v(\" \"),\n                _c(\n                  \"button\",\n                  {\n                    staticClass: \"carousel-control carousel-control-prev\",\n                    attrs: {\n                      \"data-target\": \"#overlayItemBackgroundCarousel\",\n                      \"data-slide\": \"prev\",\n                      \"aria-label\": \"Previous\",\n                    },\n                  },\n                  [\n                    _c(\n                      \"svg\",\n                      {\n                        attrs: {\n                          width: \"24\",\n                          height: \"24\",\n                          viewBox: \"0 0 24 24\",\n                          fill: \"none\",\n                          xmlns: \"http://www.w3.org/2000/svg\",\n                        },\n                      },\n                      [\n                        _c(\"path\", {\n                          attrs: {\n                            d: \"M15 18L9 12L15 6\",\n                            stroke: \"#121926\",\n                            \"stroke-width\": \"2\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                          },\n                        }),\n                      ]\n                    ),\n                  ]\n                ),\n                _vm._v(\" \"),\n                _c(\n                  \"button\",\n                  {\n                    staticClass: \"carousel-control carousel-control-next\",\n                    attrs: {\n                      \"data-target\": \"#overlayItemBackgroundCarousel\",\n                      \"data-slide\": \"next\",\n                      \"aria-label\": \"Next\",\n                    },\n                  },\n                  [\n                    _c(\n                      \"svg\",\n                      {\n                        attrs: {\n                          width: \"24\",\n                          height: \"24\",\n                          viewBox: \"0 0 24 24\",\n                          fill: \"none\",\n                          xmlns: \"http://www.w3.org/2000/svg\",\n                        },\n                      },\n                      [\n                        _c(\"path\", {\n                          attrs: {\n                            d: \"M9 18L15 12L9 6\",\n                            stroke: \"#121926\",\n                            \"stroke-width\": \"2\",\n                            \"stroke-linecap\": \"round\",\n                            \"stroke-linejoin\": \"round\",\n                          },\n                        }),\n                      ]\n                    ),\n                  ]\n                ),\n              ]\n            ),\n          ]),\n        ]),\n        _vm._v(\" \"),\n        _c(\"p\", { staticClass: \"text-center px-3\" }, [\n          _vm._v(_vm._s(_vm.name)),\n        ]),\n        _vm._v(\" \"),\n        _c(\n          \"div\",\n          { staticClass: \"overlay-thumbnail-images thumbnail-backgrounds\" },\n          [\n            _vm._l(_vm.backgroundImages, function (image, index) {\n              return _c(\n                \"div\",\n                {\n                  key: index,\n                  staticClass: \"thumbnail-image position-relative\",\n                  class: { active: index === _vm.activeIndex },\n                  attrs: {\n                    \"data-target\": \"#overlayItemBackgroundCarousel\",\n                    \"data-slide-to\": index,\n                  },\n                },\n                [\n                  _c(\"img\", {\n                    staticClass: \"img-fluid\",\n                    attrs: { src: image, alt: _vm.name, loading: \"lazy\" },\n                  }),\n                  _vm._v(\" \"),\n                  _vm.uploadedImage && index === _vm.backgroundImages.length - 1\n                    ? _c(\n                        \"button\",\n                        {\n                          staticClass:\n                            \"position-absolute delete-custom-thumbnail\",\n                          on: { click: _vm.clearImageData },\n                        },\n                        [\n                          _c(\n                            \"svg\",\n                            {\n                              attrs: {\n                                width: \"24px\",\n                                height: \"24px\",\n                                viewBox: \"0 0 24.00 24.00\",\n                                fill: \"none\",\n                                xmlns: \"http://www.w3.org/2000/svg\",\n                                stroke: \"#ff0000\",\n                                transform: \"rotate(0)\",\n                              },\n                            },\n                            [\n                              _c(\"g\", {\n                                attrs: {\n                                  id: \"SVGRepo_bgCarrier\",\n                                  \"stroke-width\": \"0\",\n                                },\n                              }),\n                              _vm._v(\" \"),\n                              _c(\"g\", {\n                                attrs: {\n                                  id: \"SVGRepo_tracerCarrier\",\n                                  \"stroke-linecap\": \"round\",\n                                  \"stroke-linejoin\": \"round\",\n                                },\n                              }),\n                              _vm._v(\" \"),\n                              _c(\n                                \"g\",\n                                { attrs: { id: \"SVGRepo_iconCarrier\" } },\n                                [\n                                  _c(\"path\", {\n                                    attrs: {\n                                      \"fill-rule\": \"evenodd\",\n                                      \"clip-rule\": \"evenodd\",\n                                      d: \"M5.11686 7.7517C5.53016 7.72415 5.88754 8.03685 5.91509 8.45015L6.37503 15.3493C6.46489 16.6971 6.52892 17.6349 6.66948 18.3406C6.80583 19.025 6.99617 19.3873 7.26958 19.6431C7.54299 19.8989 7.91715 20.0647 8.60915 20.1552C9.32255 20.2485 10.2626 20.25 11.6134 20.25H12.3868C13.7376 20.25 14.6776 20.2485 15.391 20.1552C16.083 20.0647 16.4572 19.8989 16.7306 19.6431C17.004 19.3873 17.1943 19.025 17.3307 18.3406C17.4713 17.6349 17.5353 16.6971 17.6251 15.3493L18.0851 8.45015C18.1126 8.03685 18.47 7.72415 18.8833 7.7517C19.2966 7.77925 19.6093 8.13663 19.5818 8.54993L19.1183 15.5017C19.0328 16.7844 18.9638 17.8206 18.8018 18.6336C18.6334 19.4789 18.347 20.185 17.7554 20.7385C17.1638 21.2919 16.4402 21.5308 15.5856 21.6425C14.7635 21.7501 13.7251 21.7501 12.4395 21.75H11.5607C10.2751 21.7501 9.23664 21.7501 8.4146 21.6425C7.55995 21.5308 6.8364 21.2919 6.2448 20.7385C5.65321 20.185 5.36679 19.4789 5.19839 18.6336C5.03642 17.8205 4.96736 16.7844 4.88186 15.5017L4.41841 8.54993C4.39086 8.13663 4.70357 7.77925 5.11686 7.7517Z\",\n                                      fill: \"#ff0000\",\n                                    },\n                                  }),\n                                  _vm._v(\" \"),\n                                  _c(\"path\", {\n                                    attrs: {\n                                      \"fill-rule\": \"evenodd\",\n                                      \"clip-rule\": \"evenodd\",\n                                      d: \"M10.3553 2.25004L10.3094 2.25002C10.093 2.24988 9.90445 2.24976 9.72643 2.27819C9.02313 2.39049 8.41453 2.82915 8.08559 3.46084C8.00232 3.62074 7.94282 3.79964 7.87452 4.00496L7.86 4.04858L7.76291 4.33984C7.74392 4.39681 7.73863 4.41251 7.73402 4.42524C7.55891 4.90936 7.10488 5.23659 6.59023 5.24964C6.5767 5.24998 6.56013 5.25004 6.50008 5.25004H3.5C3.08579 5.25004 2.75 5.58582 2.75 6.00004C2.75 6.41425 3.08579 6.75004 3.5 6.75004L6.50865 6.75004L6.52539 6.75004H17.4748L17.4915 6.75004L20.5001 6.75004C20.9143 6.75004 21.2501 6.41425 21.2501 6.00004C21.2501 5.58582 20.9143 5.25004 20.5001 5.25004H17.5001C17.44 5.25004 17.4235 5.24998 17.4099 5.24964C16.8953 5.23659 16.4413 4.90933 16.2661 4.42522C16.2616 4.41258 16.2562 4.39653 16.2373 4.33984L16.1402 4.04858L16.1256 4.00494C16.0573 3.79961 15.9978 3.62073 15.9146 3.46084C15.5856 2.82915 14.977 2.39049 14.2737 2.27819C14.0957 2.24976 13.9072 2.24988 13.6908 2.25002L13.6448 2.25004H10.3553ZM9.14458 4.93548C9.10531 5.04404 9.05966 5.14902 9.00815 5.25004H14.992C14.9405 5.14902 14.8949 5.04405 14.8556 4.9355L14.8169 4.82216L14.7171 4.52292C14.626 4.2494 14.605 4.19363 14.5842 4.15364C14.4745 3.94307 14.2716 3.79686 14.0372 3.75942C13.9927 3.75231 13.9331 3.75004 13.6448 3.75004H10.3553C10.067 3.75004 10.0075 3.75231 9.96296 3.75942C9.72853 3.79686 9.52566 3.94307 9.41601 4.15364C9.39519 4.19363 9.37419 4.24942 9.28302 4.52292L9.18322 4.82234C9.1682 4.86742 9.1565 4.90251 9.14458 4.93548Z\",\n                                      fill: \"#ff0000\",\n                                    },\n                                  }),\n                                ]\n                              ),\n                            ]\n                          ),\n                        ]\n                      )\n                    : _vm._e(),\n                ]\n              )\n            }),\n            _vm._v(\" \"),\n            !_vm.uploadedImage\n              ? _c(\n                  \"div\",\n                  {\n                    staticClass:\n                      \"thumbnail-image custom-thumbnail d-flex align-items-center justify-content-center position-relative\",\n                    class: {\n                      active:\n                        _vm.backgroundImages.length - 1 === _vm.activeIndex,\n                    },\n                  },\n                  [\n                    _c(\"div\", { staticClass: \"upload-button\" }, [\n                      _c(\n                        \"svg\",\n                        {\n                          attrs: {\n                            width: \"24\",\n                            height: \"24\",\n                            viewBox: \"0 0 24 24\",\n                          },\n                        },\n                        [\n                          _c(\"path\", {\n                            attrs: {\n                              d: \"M12 5v14m-7-7h14\",\n                              stroke: \"currentColor\",\n                              \"stroke-width\": \"2\",\n                              \"stroke-linecap\": \"round\",\n                              \"stroke-linejoin\": \"round\",\n                            },\n                          }),\n                        ]\n                      ),\n                    ]),\n                    _vm._v(\" \"),\n                    _c(\"input\", {\n                      ref: \"imageInput\",\n                      attrs: {\n                        id: \"imageUpload\",\n                        type: \"file\",\n                        accept: \"image/*\",\n                      },\n                      on: { change: _vm.handleImageUpload },\n                    }),\n                  ]\n                )\n              : _vm._e(),\n          ],\n          2\n        ),\n      ])\n    : _vm._e()\n}\nvar staticRenderFns = []\nrender._withStripped = true\n\nexport { render, staticRenderFns }","import mod from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ItemBackgroundOverlay.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../../../node_modules/babel-loader/lib/index.js!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./ItemBackgroundOverlay.vue?vue&type=script&lang=js\"","<template>\n  <div v-if=\"visible\" class=\"overlay\">\n    <div class=\"overlay-toolbar\">\n      <div class=\"overlay-close\" @click=\"closeBackgroundOverlay\">✕</div>\n    </div>\n    <div class=\"overlay-content position-relative\">\n      <div class=\"overlay-carousel\">\n        <div\n          id=\"overlayItemBackgroundCarousel\"\n          class=\"carousel slide\"\n          data-ride=\"carousel\"\n          :data-interval=\"0\"\n        >\n          <div class=\"position-relative mx-auto carousel-wrapper\">\n            <div class=\"carousel-inner\">\n              <div\n                v-for=\"(item, index) in backgroundImages\"\n                :key=\"index\"\n                :class=\"{\n                  'carousel-item': true,\n                  active: index === activeIndex,\n                }\"\n              >\n                <img class=\"img-fluid\" :src=\"item\" :alt=\"name\" loading=\"lazy\" />\n              </div>\n            </div>\n            <div class=\"overlay-item-preview\">\n              <img\n                class=\"img-fluid\"\n                :src=\"selectedImage\"\n                :alt=\"name\"\n                loading=\"lazy\"\n              />\n            </div>\n          </div>\n          <button\n            class=\"carousel-control carousel-control-prev\"\n            data-target=\"#overlayItemBackgroundCarousel\"\n            data-slide=\"prev\"\n            aria-label=\"Previous\"\n          >\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M15 18L9 12L15 6\"\n                stroke=\"#121926\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </button>\n          <button\n            class=\"carousel-control carousel-control-next\"\n            data-target=\"#overlayItemBackgroundCarousel\"\n            data-slide=\"next\"\n            aria-label=\"Next\"\n          >\n            <svg\n              width=\"24\"\n              height=\"24\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              xmlns=\"http://www.w3.org/2000/svg\"\n            >\n              <path\n                d=\"M9 18L15 12L9 6\"\n                stroke=\"#121926\"\n                stroke-width=\"2\"\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n              />\n            </svg>\n          </button>\n        </div>\n      </div>\n    </div>\n    <p class=\"text-center px-3\">{{ name }}</p>\n    <div class=\"overlay-thumbnail-images thumbnail-backgrounds\">\n      <div\n        v-for=\"(image, index) in backgroundImages\"\n        :key=\"index\"\n        class=\"thumbnail-image position-relative\"\n        data-target=\"#overlayItemBackgroundCarousel\"\n        :data-slide-to=\"index\"\n        :class=\"{ active: index === activeIndex }\"\n      >\n        <img class=\"img-fluid\" :src=\"image\" :alt=\"name\" loading=\"lazy\" />\n        <button\n          class=\"position-absolute delete-custom-thumbnail\"\n          v-if=\"uploadedImage && index === backgroundImages.length - 1\"\n          @click=\"clearImageData\"\n        >\n          <svg\n            width=\"24px\"\n            height=\"24px\"\n            viewBox=\"0 0 24.00 24.00\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            stroke=\"#ff0000\"\n            transform=\"rotate(0)\"\n          >\n            <g id=\"SVGRepo_bgCarrier\" stroke-width=\"0\"></g>\n            <g\n              id=\"SVGRepo_tracerCarrier\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            ></g>\n            <g id=\"SVGRepo_iconCarrier\">\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M5.11686 7.7517C5.53016 7.72415 5.88754 8.03685 5.91509 8.45015L6.37503 15.3493C6.46489 16.6971 6.52892 17.6349 6.66948 18.3406C6.80583 19.025 6.99617 19.3873 7.26958 19.6431C7.54299 19.8989 7.91715 20.0647 8.60915 20.1552C9.32255 20.2485 10.2626 20.25 11.6134 20.25H12.3868C13.7376 20.25 14.6776 20.2485 15.391 20.1552C16.083 20.0647 16.4572 19.8989 16.7306 19.6431C17.004 19.3873 17.1943 19.025 17.3307 18.3406C17.4713 17.6349 17.5353 16.6971 17.6251 15.3493L18.0851 8.45015C18.1126 8.03685 18.47 7.72415 18.8833 7.7517C19.2966 7.77925 19.6093 8.13663 19.5818 8.54993L19.1183 15.5017C19.0328 16.7844 18.9638 17.8206 18.8018 18.6336C18.6334 19.4789 18.347 20.185 17.7554 20.7385C17.1638 21.2919 16.4402 21.5308 15.5856 21.6425C14.7635 21.7501 13.7251 21.7501 12.4395 21.75H11.5607C10.2751 21.7501 9.23664 21.7501 8.4146 21.6425C7.55995 21.5308 6.8364 21.2919 6.2448 20.7385C5.65321 20.185 5.36679 19.4789 5.19839 18.6336C5.03642 17.8205 4.96736 16.7844 4.88186 15.5017L4.41841 8.54993C4.39086 8.13663 4.70357 7.77925 5.11686 7.7517Z\"\n                fill=\"#ff0000\"\n              ></path>\n              <path\n                fill-rule=\"evenodd\"\n                clip-rule=\"evenodd\"\n                d=\"M10.3553 2.25004L10.3094 2.25002C10.093 2.24988 9.90445 2.24976 9.72643 2.27819C9.02313 2.39049 8.41453 2.82915 8.08559 3.46084C8.00232 3.62074 7.94282 3.79964 7.87452 4.00496L7.86 4.04858L7.76291 4.33984C7.74392 4.39681 7.73863 4.41251 7.73402 4.42524C7.55891 4.90936 7.10488 5.23659 6.59023 5.24964C6.5767 5.24998 6.56013 5.25004 6.50008 5.25004H3.5C3.08579 5.25004 2.75 5.58582 2.75 6.00004C2.75 6.41425 3.08579 6.75004 3.5 6.75004L6.50865 6.75004L6.52539 6.75004H17.4748L17.4915 6.75004L20.5001 6.75004C20.9143 6.75004 21.2501 6.41425 21.2501 6.00004C21.2501 5.58582 20.9143 5.25004 20.5001 5.25004H17.5001C17.44 5.25004 17.4235 5.24998 17.4099 5.24964C16.8953 5.23659 16.4413 4.90933 16.2661 4.42522C16.2616 4.41258 16.2562 4.39653 16.2373 4.33984L16.1402 4.04858L16.1256 4.00494C16.0573 3.79961 15.9978 3.62073 15.9146 3.46084C15.5856 2.82915 14.977 2.39049 14.2737 2.27819C14.0957 2.24976 13.9072 2.24988 13.6908 2.25002L13.6448 2.25004H10.3553ZM9.14458 4.93548C9.10531 5.04404 9.05966 5.14902 9.00815 5.25004H14.992C14.9405 5.14902 14.8949 5.04405 14.8556 4.9355L14.8169 4.82216L14.7171 4.52292C14.626 4.2494 14.605 4.19363 14.5842 4.15364C14.4745 3.94307 14.2716 3.79686 14.0372 3.75942C13.9927 3.75231 13.9331 3.75004 13.6448 3.75004H10.3553C10.067 3.75004 10.0075 3.75231 9.96296 3.75942C9.72853 3.79686 9.52566 3.94307 9.41601 4.15364C9.39519 4.19363 9.37419 4.24942 9.28302 4.52292L9.18322 4.82234C9.1682 4.86742 9.1565 4.90251 9.14458 4.93548Z\"\n                fill=\"#ff0000\"\n              ></path>\n            </g>\n          </svg>\n        </button>\n      </div>\n      <div\n        v-if=\"!uploadedImage\"\n        class=\"thumbnail-image custom-thumbnail d-flex align-items-center justify-content-center position-relative\"\n        :class=\"{ active: backgroundImages.length - 1 === activeIndex }\"\n      >\n        <div class=\"upload-button\">\n          <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\">\n            <path\n              d=\"M12 5v14m-7-7h14\"\n              stroke=\"currentColor\"\n              stroke-width=\"2\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n            />\n          </svg>\n        </div>\n        <input\n          id=\"imageUpload\"\n          type=\"file\"\n          @change=\"handleImageUpload\"\n          accept=\"image/*\"\n          ref=\"imageInput\"\n        />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  name: \"item-background-overlay\",\n  props: {\n    visible: {\n      type: Boolean,\n      default: false,\n    },\n    selectedImage: {\n      type: String,\n      default: null,\n    },\n    name: {\n      type: String,\n      required: true,\n    },\n  },\n  data() {\n    return {\n      activeIndex: 0,\n      backgroundImages: [\n        \"https://cdn02.plentymarkets.com/6wg68w8zahno/frontend/assets/imgs/banners/backgrounds/Overlay-1.webp\",\n        \"https://cdn02.plentymarkets.com/6wg68w8zahno/frontend/assets/imgs/banners/backgrounds/Overlay-2.webp\",\n        \"https://cdn02.plentymarkets.com/6wg68w8zahno/frontend/assets/imgs/banners/backgrounds/Overlay-3.webp\",\n        \"https://cdn02.plentymarkets.com/6wg68w8zahno/frontend/assets/imgs/banners/backgrounds/Overlay-4.webp\",\n        \"https://cdn02.plentymarkets.com/6wg68w8zahno/frontend/assets/imgs/banners/backgrounds/Overlay-5.webp\",\n        \"https://cdn02.plentymarkets.com/6wg68w8zahno/frontend/assets/imgs/banners/backgrounds/Overlay-6.webp\",\n        \"https://cdn02.plentymarkets.com/6wg68w8zahno/frontend/assets/imgs/banners/backgrounds/Overlay-7.webp\",\n        \"https://cdn02.plentymarkets.com/6wg68w8zahno/frontend/assets/imgs/banners/backgrounds/Overlay-8.webp\",\n        \"https://cdn02.plentymarkets.com/6wg68w8zahno/frontend/assets/imgs/banners/backgrounds/Overlay-9.webp\",\n        \"https://cdn02.plentymarkets.com/6wg68w8zahno/frontend/assets/imgs/banners/backgrounds/Overlay-10.webp\",\n      ],\n      uploadedImage: null,\n    };\n  },\n  methods: {\n    closeBackgroundOverlay() {\n      this.$emit(\"close-background-overlay\");\n    },\n    handleImageUpload(event) {\n      const file = event.target.files[0];\n      if (file) {\n        const uploadedImage = URL.createObjectURL(file);\n        this.backgroundImages.push(uploadedImage);\n        this.uploadedImage = uploadedImage;\n        this.activeIndex = this.backgroundImages.length - 1;\n        $(\"#overlayItemBackgroundCarousel\").carousel(this.activeIndex);\n      }\n    },\n    handleKeyDown(event) {\n      if (event.key === \"ArrowRight\") {\n        this.nextImage();\n      } else if (event.key === \"ArrowLeft\") {\n        this.prevImage();\n      } else if (event.key === \"Escape\") {\n        this.closeBackgroundOverlay();\n      }\n    },\n    nextImage() {\n      $(\"#overlayItemBackgroundCarousel\").carousel(\"next\");\n    },\n    prevImage() {\n      $(\"#overlayItemBackgroundCarousel\").carousel(\"prev\");\n    },\n    clearImageData() {\n      if (this.$refs.imageInput) {\n        this.$refs.imageInput.value = null;\n      }\n\n      if (this.activeIndex === this.backgroundImages.length - 1) {\n        this.activeIndex = 0;\n        $(\"#overlayItemBackgroundCarousel\").carousel(0);\n      }\n\n      this.uploadedImage = null;\n      this.backgroundImages.splice(-1, 1);\n    },\n  },\n  mounted() {\n    this.$nextTick(() => {\n      $(\"#overlayItemBackgroundCarousel\").carousel();\n\n      $(\"#overlayItemBackgroundCarousel\").on(\"slid.bs.carousel\", (event) => {\n        const activeItem = $(event.relatedTarget);\n        this.activeIndex = activeItem.index();\n      });\n\n      document.addEventListener(\"keydown\", this.handleKeyDown);\n    });\n  },\n  beforeDestroy() {\n    document.removeEventListener(\"keydown\", this.handleKeyDown);\n  },\n};\n</script>\n","import { render, staticRenderFns } from \"./ItemBackgroundOverlay.vue?vue&type=template&id=3b12150a\"\nimport script from \"./ItemBackgroundOverlay.vue?vue&type=script&lang=js\"\nexport * from \"./ItemBackgroundOverlay.vue?vue&type=script&lang=js\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}