vviinn-widgets 2.44.0 → 2.44.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/{package-9e48dffa.js → package-5912f89d.js} +1 -1
- package/dist/cjs/{search-filters_15.cjs.entry.js → search-filters_16.cjs.entry.js} +56 -14
- package/dist/cjs/vviinn-carousel_4.cjs.entry.js +1 -1
- package/dist/cjs/vviinn-vpr-button.cjs.entry.js +1 -1
- package/dist/cjs/vviinn-vps-button.cjs.entry.js +1 -1
- package/dist/cjs/vviinn-vps-widget.cjs.entry.js +25 -5
- package/dist/cjs/vviinn-widgets.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/image-search/search-filters/search-filters.css +8 -3
- package/dist/collection/components/vviinn-error/vviinn-wrong-aspect-ratio/vviinn-wrong-aspect-ratio.js +36 -0
- package/dist/collection/components/vviinn-example-image/vviinn-example-image.js +10 -3
- package/dist/collection/components/vviinn-image-view/vviinn-detected-object/vviinn-detected-object.css +1 -0
- package/dist/collection/components/vviinn-image-view/vviinn-image-view.css +66 -24
- package/dist/collection/components/vviinn-image-view/vviinn-image-view.js +66 -9
- package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.css +17 -11
- package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.js +17 -4
- package/dist/collection/locale/resources-vps.js +8 -0
- package/dist/esm/loader.js +1 -1
- package/dist/esm/{package-fb112b84.js → package-b2424850.js} +1 -1
- package/dist/esm/{search-filters_15.entry.js → search-filters_16.entry.js} +56 -15
- package/dist/esm/vviinn-carousel_4.entry.js +1 -1
- package/dist/esm/vviinn-vpr-button.entry.js +1 -1
- package/dist/esm/vviinn-vps-button.entry.js +1 -1
- package/dist/esm/vviinn-vps-widget.entry.js +25 -5
- package/dist/esm/vviinn-widgets.js +1 -1
- package/dist/types/components/vviinn-error/vviinn-wrong-aspect-ratio/vviinn-wrong-aspect-ratio.d.ts +4 -0
- package/dist/types/components/vviinn-image-view/vviinn-image-view.d.ts +3 -0
- package/dist/types/components/vviinn-vps-widget/vviinn-vps-widget.d.ts +2 -0
- package/dist/types/components.d.ts +19 -0
- package/dist/vviinn-widgets/p-044c5f45.entry.js +1 -0
- package/dist/vviinn-widgets/p-726774f9.js +1 -0
- package/dist/vviinn-widgets/{p-0d37441f.entry.js → p-a7cc44b3.entry.js} +1 -1
- package/dist/vviinn-widgets/{p-32938807.entry.js → p-b1e9dd46.entry.js} +1 -1
- package/dist/vviinn-widgets/{p-da0b001f.entry.js → p-ecd1c141.entry.js} +2 -2
- package/dist/vviinn-widgets/{p-40e2fb73.entry.js → p-ed082ecf.entry.js} +1 -1
- package/dist/vviinn-widgets/vviinn-widgets.esm.js +1 -1
- package/package.json +1 -1
- package/www/build/p-044c5f45.entry.js +1 -0
- package/www/build/p-726774f9.js +1 -0
- package/www/build/{p-0d37441f.entry.js → p-a7cc44b3.entry.js} +1 -1
- package/www/build/{p-32938807.entry.js → p-b1e9dd46.entry.js} +1 -1
- package/www/build/{p-da0b001f.entry.js → p-ecd1c141.entry.js} +2 -2
- package/www/build/{p-40e2fb73.entry.js → p-ed082ecf.entry.js} +1 -1
- package/www/build/vviinn-widgets.esm.js +1 -1
- package/dist/vviinn-widgets/p-8b0f06e7.js +0 -1
- package/dist/vviinn-widgets/p-8c681088.entry.js +0 -1
- package/www/build/p-8b0f06e7.js +0 -1
- package/www/build/p-8c681088.entry.js +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as t,h as i,H as s,g as e,c as n,F as r}from"./p-1e83e6ba.js";import{_ as o,O as a,S as h,a as c,h as d,t as l,E as u,i as p,s as v,p as g,c as m,m as b,f,g as w,b as y,A as x,d as k,e as C,j as I,k as T,T as P,l as R}from"./p-987a8e9f.js";import{C as E,U as _}from"./p-7f19baa1.js";import{i as S}from"./p-2e76a5c3.js";import{s as A,c as V,f as j,a as O,S as W}from"./p-c8ef8d6c.js";import{v as $}from"./p-8b0f06e7.js";import{v as z,c as L,a as B,b as N,d as D,e as M,f as F,g as U,h as G,i as q}from"./p-da7273ce.js";const H="--vviinn-carousel-image-width",Z="items-group",K=class{constructor(i){t(this,i),this.columns=0,this.resizeObserver=new ResizeObserver((()=>this.handleResize())),this.defaultAnimationInterval=2e3,this.mutationObserver=new MutationObserver((()=>this.cloneSlottedContent())),this.isLastGroup=()=>this.activeContentGroup===this.getContentGroups().length-1&&this.isGridMode,this.isFirstGroup=()=>0===this.activeContentGroup&&this.isGridMode,this.updateCard=(t,i,s)=>{let e=this.crossSellingRecommendations.find((i=>i.productId===t));const n=this.crossSellingRecommendations.indexOf(e),r=this.recommendations.indexOf(e),o=this.crossSellingRecommendations;if(r+i<this.recommendations.length){o[n]=this.recommendations[r+i];const e=this.el.querySelector(`[data-id="${t}"]`).shadowRoot.querySelector(".update-button");e.classList.add("hidden"),this.crossSellingRecommendations=[...o];const a=setTimeout((()=>{r+2*i<=this.recommendations.length-1&&e.classList.remove("hidden"),clearTimeout(a)}),s)}},this.moveDirection="right",this.contentGroups=[],this.activeContentGroup=0,this.isRTL=!1,this.crossSellingRecommendations=[],this.mode="continuity",this.imageWidth=140,this.showScroll=!0,this.campaignTypeId=void 0,this.widgetElementId=void 0,this.gridArrowsDynamic=void 0,this.recommendations=[],this.widgetVersion=void 0,this.addToBasketShow=void 0,this.updatingAllCards=void 0,this.updateButtonLocation=void 0}componentWillLoad(){this.isRTL="rtl"===document.dir}connectedCallback(){this.setItemWidth(),this.isSetMode="set"===this.mode,this.isGridMode="grid"===this.mode,this.isContinuityMode="continuity"===this.mode,this.isGridLike=this.isGridMode||this.isSetMode;const t=this.getColumnsNumber();this.isSetMode&&this.recommendations.length>=t&&(this.crossSellingRecommendations=this.recommendations.slice(0,t))}disconnectedCallback(){this.resizeObserver.disconnect()}componentDidLoad(){this.setWidth(),this.processScrollbarWidth(),this.columns=this.getColumnsNumber();const t=this.el.querySelector(".content");this.mutationObserver.observe(t,{subtree:!0,childList:!0}),this.resizeObserver.observe(this.getHostParent())}updatingAllCardsWatcher(){if(!this.updatingAllCards)return;const t=this.getColumnsNumber();this.crossSellingRecommendations.forEach((i=>{this.updateCard(i.productId,t,this.defaultAnimationInterval)}))}crossSellingClickListener({detail:t}){const i=this.getColumnsNumber(),{animationInterval:s,productData:e}=t;this.updateCard(e.productId,i,s)}getItemWidthFromDocument(){return parseInt(getComputedStyle(document.body).getPropertyValue(H))}setItemWidth(){const t=this.getItemWidthFromDocument(),i=isNaN(t)?this.imageWidth:t;this.el.style.setProperty(H,`${i}px`)}getContentClassMap(){return{content:!0,[this.moveDirection]:!0,[this.isSetMode?"grid":this.mode]:!0,"show-scrollbar":this.showScroll}}handleResize(){this.setWidth(),this.processScrollbarWidth(),this.setItemWidth();const t=this.getColumnsNumber();t!==this.columns&&(this.columns=t)}calculateMoveStep(){const t=this.getContent().map((t=>t.getBoundingClientRect().width));return t.reduce(((t,i)=>t+i),0)/t.length}getHostParent(){return this.el.parentNode.host.parentElement}setWidth(){const t=this.getHostParent();if(!t)return;const i=getComputedStyle(t),s=t.getBoundingClientRect().width-(parseInt(i["padding-right"])+parseInt(i["padding-left"]));this.el.style.setProperty("--vviinn-carousel-content-width",`${s}px`)}getParent(){return this.el.parentNode.host.parentElement}cloneSlottedContent(){this.setWidth()}getActiveGroupIndex(){var t,i;if(!(null===(i=null===(t=this.getContentNode())||void 0===t?void 0:t.getBoundingClientRect())||void 0===i?void 0:i.left))return 0;const s=this.getContentGroups().map((t=>t.getBoundingClientRect().left)).map(((t,i)=>[t,i])).filter((t=>t[0]>=0));return s.length>0?this.isRTL?s[s.length-1][1]:s[0][1]:0}getContentNode(){return this.el.querySelector(".content")}getContent(){const t=this.getContentNode().children;return Array.from(t).map((t=>t))}getColumnsNumber(){const t=getComputedStyle(this.el).getPropertyValue("--vviinn-carousel-columns-internal"),i=parseInt(t);return i&&!isNaN(i)?i:4}getContentGroups(){return Array.from(this.el.querySelectorAll(`.${Z}`))}showNext(){this.moveDirection="right";const t=this.getContentNode();requestAnimationFrame((()=>{t.scrollTo({top:0,left:t.scrollLeft+this.calculateMoveStep(),behavior:"smooth"})}))}showPrev(){this.moveDirection="left";const t=this.getContentNode();requestAnimationFrame((()=>{t.scrollTo({top:0,left:t.scrollLeft-this.calculateMoveStep(),behavior:"smooth"})}))}scroll(t){const i=this.getContentNode();requestAnimationFrame((()=>{i.scrollTo({top:0,left:this.calculateMoveStep()*t,behavior:"smooth"})}))}processScrollbarWidth(){const t=this.getContentNode();t&&(this.el.style.setProperty("--vviinn-progressbar-width",t.clientWidth*((t.scrollLeft+t.clientWidth)/t.scrollWidth)+"px"),this.activeContentGroup=this.getActiveGroupIndex())}showBullets(){return this.isGridMode&&this.showScroll}showScrollbar(){return this.isContinuityMode&&this.showScroll}getClassMap(){return{[this.isSetMode?"grid":this.mode]:!0,"show-scrollbar":this.showScrollbar()}}renderRecommendation(t,s){return i("vviinn-product-card",{part:"product-part",productId:t.productId,productTitle:t.title,productType:t.productType,deeplink:t.deeplink,image:t.image.thumbnail,brand:t.brand,imageWidth:this.imageWidth,imageRatio:1,price:t.price.actual,salePrice:t.price.sale,responsive:this.isGridLike,dimmedBackground:this.isContinuityMode,campaignTypeId:this.campaignTypeId,index:s,widgetElementId:this.widgetElementId,widgetVersion:this.widgetVersion,addToBasketShow:this.addToBasketShow,mode:this.mode,"data-id":t.productId,updatingAllCards:this.updatingAllCards,defaultAnimationInterval:this.defaultAnimationInterval,updateButtonLocation:this.updateButtonLocation})}renderRecommendationGroup(t){return i("div",{class:Z,part:"items-group"},...t)}renderRecommendationGroups(t){return t.map((t=>this.renderRecommendationGroup(t)))}renderRecommendations(){return this.isGridLike?this.renderGrid():this.renderRecommendationsElements()}renderRecommendationsElements(){return(this.isSetMode?this.crossSellingRecommendations:this.recommendations).map(((t,i)=>this.renderRecommendation(t,i)))}renderGrid(){const t=this.renderRecommendationsElements(),i=o.chunksOf(this.getColumnsNumber())(t);return this.renderRecommendationGroups(i)}renderBullets(){const t=Math.ceil(this.recommendations.length/this.getColumnsNumber());return Array.from(Array(t).keys()).map((t=>i("div",{class:{bullet:!0,active:this.activeContentGroup===t},onClick:()=>this.scroll(t)})))}render(){return i(s,{class:this.getClassMap()},i("div",{class:Object.assign({body:!0},this.getClassMap())},!this.isSetMode&&i("button",{class:"prev",onClick:()=>this.showPrev(),part:"carousel-button",disabled:this.gridArrowsDynamic&&this.isFirstGroup()},i(E,null)),i("div",{class:this.getContentClassMap(),onScroll:()=>this.processScrollbarWidth()},this.renderRecommendations()),!this.isSetMode&&i("button",{class:"next",onClick:()=>this.showNext(),part:"carousel-button",disabled:this.gridArrowsDynamic&&this.isLastGroup()},i(E,null))),this.showBullets()&&i("div",{class:"bullets"},this.renderBullets()))}get el(){return e(this)}static get watchers(){return{updatingAllCards:["updatingAllCardsWatcher"]}}};K.style=":host{--vviinn-progressbar-width:0;--vviinn-carousel-item-width:150px;--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4);--vviinn-carousel-image-width-system:140px}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.content-wrapper *{box-sizing:border-box}.content-wrapper{overflow-y:hidden;overflow-x:auto;flex-grow:1}.bullets{margin-top:16px;display:flex;flex-direction:row;grid-gap:24px;justify-content:center}.bullet{width:10px;height:10px;background:#e0e0e0;border-radius:50%;cursor:pointer}.bullet.active{background:#161616}.content:not(.show-scrollbar),.content.grid{scrollbar-color:#fff0 #fff0}.content:not(.show-scrollbar)::-webkit-scrollbar,.content.grid::-webkit-scrollbar{opacity:0}.content{display:flex;flex-direction:row;grid-gap:8px;overflow-y:hidden;overflow-x:auto;flex-grow:1;padding-bottom:16px}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.continuity) .prev,:host(.continuity) .next{border-radius:2px}:host(.grid) .prev,:host(.grid) .next{border-radius:50%}.prev,.next{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);fill:#525252;cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0}.next:disabled,.prev:disabled{display:none}.prev svg{transform:rotate(180deg);margin-left:-5px}.prev{left:0}.next{right:0}.items-group{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--vviinn-carousel-columns-internal), 1fr);min-width:100%}vviinn-product-card::part(price-container){text-align:center}:host(.classic) vviinn-product-card::part(title),:host(.classic) vviinn-product-card::part(brand),:host(.classic) vviinn-product-card::part(type){text-align:center}@media (max-width: 480px){:host(.modern) button{display:none}.items-group{grid-template-columns:repeat(2, 1fr)}}";class J{sendImpression(t){var i,s,e;gtag("event","view_item_list",{items:[{id:t.productId,name:t.title,brand:null!==(i=t.brand)&&void 0!==i?i:"",category:null!==(s=t.productType)&&void 0!==s?s:"",list_name:"VI VPR View",price:Math.min(t.price.actual,null!==(e=t.price.sale)&&void 0!==e?e:1/0)}]})}sendClick(t){var i,s,e;gtag("event","select_content",{content_type:"product",items:[{id:t.productId,name:t.title,brand:null!==(i=t.brand)&&void 0!==i?i:"",category:null!==(s=t.productType)&&void 0!==s?s:"",list_name:"VI VPR View",price:Math.min(t.price.actual,null!==(e=t.price.sale)&&void 0!==e?e:1/0)}]})}}class Q{constructor(){ga("require","ec")}convertProduct(t){var i,s,e;return{id:t.productId,name:t.title,brand:null!==(i=t.brand)&&void 0!==i?i:"",category:null!==(s=t.productType)&&void 0!==s?s:"",list:"VI VPR View",price:Math.min(t.price.actual,null!==(e=t.price.sale)&&void 0!==e?e:1/0)}}sendImpression(t){ga("ec:addImpression",this.convertProduct(t))}sendClick(t){var i,s,e;ga("ec:addProduct",{id:t.productId,name:t.title,brand:null!==(i=t.brand)&&void 0!==i?i:"",category:null!==(s=t.productType)&&void 0!==s?s:"",price:Math.min(t.price.actual,null!==(e=t.price.sale)&&void 0!==e?e:1/0)}),ga("ec:setAction","click",{list:"VI VPR View"})}}const X=a.getMonoid(h.first()).concat(c.pipe(a.fromNullable(window.gtag),a.map((()=>new J))),c.pipe(a.fromNullable(window.ga),a.map((()=>new Q))));function Y(t,i,s){return function(e){for(var n=Array(s.length+1),r=0;r<s.length;r++)n[r]=s[r];return n[s.length]=e,0===i?t.apply(null,n):Y(t,i-1,n)}}var tt={1:function(t){return[t]},2:function(t){return function(i){return[t,i]}},3:function(t){return function(i){return function(s){return[t,i,s]}}},4:function(t){return function(i){return function(s){return function(e){return[t,i,s,e]}}}},5:function(t){return function(i){return function(s){return function(e){return function(n){return[t,i,s,e,n]}}}}}};function it(t){return d.call(tt,t)||(tt[t]=Y(l,t-1,[])),tt[t]}const st=/fit\/\d+\//,et=(t,i)=>c.pipe((t=>c.pipe(t.match(st),u.fromNullable(t),u.map((()=>t))))(t),u.map((t=>t.replace(st,`fit/${i}/`))),u.getOrElse((()=>t))),nt=(t,s)=>t.deeplink?i("a",{class:t.part,part:t.part,href:t.deeplink},s):s,rt=t=>{const s=t.priceType,e=new Intl.NumberFormat(t.locale,{minimumFractionDigits:2}).format(t.price),n=t.prefix?i("span",{part:"price-prefix"},t.prefix+" "):null,r=t.currency?i("span",{part:"currency"}," "+t.currency):null;return i("span",{class:"price-amount",part:"price-amount"+(s?"-"+s:"")},n,e,r)},ot=t=>i("span",{class:"price-container",part:"price-container"},t.salePrice?[i("span",{class:"price-sale",part:"price-sale"},i(rt,{prefix:t.prefix,currency:t.currency,price:t.salePrice,locale:t.locale,priceType:"sale"})),i("span",{class:"price-outdated",part:"price-outdated"},i(rt,{prefix:t.prefix,currency:t.currency,price:t.price,locale:t.locale,priceType:"outdated"}))]:i("span",{class:"price-regular",part:"price-regular"},i(rt,{prefix:t.prefix,currency:t.currency,price:t.price,locale:t.locale,priceType:"regular"}))),at=class{constructor(i){t(this,i),this.vviinnProductLoad=n(this,"vviinnProductLoad",7),this.vviinnProductView=n(this,"vviinnProductView",7),this.vviinnProductClick=n(this,"vviinnProductClick",7),this.vviinnAddToBasket=n(this,"vviinnAddToBasket",7),this.vviinnAuxClick=n(this,"vviinnAuxClick",7),this.vviinnCrossSellingClick=n(this,"vviinnCrossSellingClick",7),this.vviinnUpdatingAllCardsFinished=n(this,"vviinnUpdatingAllCardsFinished",7),this.productData=null,this.intersectionCallback=t=>{t.some((t=>t.isIntersecting))&&(c.pipe(X,a.map((t=>t.sendImpression(this.getProduct())))),this.vviinnProductView.emit(this.productData),this.intersectionObserver.disconnect())},this.brand=void 0,this.currency=void 0,this.deeplink=void 0,this.image=void 0,this.imageRatio=1,this.imageWidth=200,this.locale=void 0,this.price=void 0,this.pricePrefix=void 0,this.productId=void 0,this.productTitle=void 0,this.productType=void 0,this.salePrice=void 0,this.responsive=!1,this.dimmedBackground=!1,this.mode=void 0,this.addToBasketShow=void 0,this.updateButtonLocation=void 0,this.campaignTypeId=void 0,this.widgetElementId=void 0,this.buttonElementId=void 0,this.widgetVersion=void 0,this.index=0,this.updatingAllCards=void 0,this.defaultAnimationInterval=void 0,this.imageLoaded=!1,this.isTransitioning=!1}connectedCallback(){this.productData=this.getProductData()}componentWillLoad(){A(this,this.el)}crossSellingClickListener({detail:t}){const{animationInterval:i}=t;this.isTransitioning=!0;const s=setTimeout((()=>{this.isTransitioning=!1,clearTimeout(s)}),i)}updatingAllCardsWatcher(){if(!this.updatingAllCards)return;this.isTransitioning=!0;const t=setTimeout((()=>{this.vviinnUpdatingAllCardsFinished.emit(),this.isTransitioning=!1,clearTimeout(t)}),this.defaultAnimationInterval)}productIdWatcher(){this.productData=this.getProductData()}getWidgetType(){return"VPR"===this.campaignTypeId||"VCS"===this.campaignTypeId?"VPR":"VPS"}getProductData(){var t;return{productId:this.productId,productRank:this.index,productName:this.productTitle,productType:this.productType,widgetType:this.getWidgetType(),campaignTypeId:this.campaignTypeId,campaignTypeName:V[this.campaignTypeId],widgetId:null!==(t=this.buttonElementId)&&void 0!==t?t:this.widgetElementId,widgetVersion:this.widgetVersion}}componentDidLoad(){this.vviinnProductLoad.emit(this.productData),this.intersectionObserver=new IntersectionObserver(this.intersectionCallback.bind(this.imageElement),{threshold:1}),this.intersectionObserver.observe(this.imageElement),this.el.shadowRoot.querySelectorAll("a").forEach((t=>{t.addEventListener("click",(t=>{t.preventDefault(),t.stopImmediatePropagation(),this.vviinnProductClick.emit(Object.assign(Object.assign({},this.productData),{clickEvent:t})),c.pipe(X,a.match((()=>null),(t=>t.sendClick(this.getProduct()))))})),t.addEventListener("auxclick",(()=>{this.vviinnAuxClick.emit(Object.assign({},this.productData))}))}))}getProduct(){return p.results.find((t=>t.productId===this.productId))}renderImage(){const t={width:this.imageWidth,height:this.imageWidth*this.imageRatio,src:this.image,title:this.productTitle,lazy:!1,ref:t=>{this.imageElement=t}};return this.responsive?((t,s=(()=>{}))=>i("picture",null,i("img",{loading:t.lazy?"lazy":"eager",part:"image",class:"image responsive",src:et(t.src,t.width),alt:t.title,ref:t.ref,onLoad:s})))(t):((t,s=(()=>{}))=>i("picture",null,i("img",{loading:t.lazy?"lazy":"eager",part:"image",class:"image",width:t.width,height:t.height,src:et(t.src,t.width),alt:t.title,ref:t.ref,onLoad:s})))(t)}generateRandomNumber(t,i){return Math.floor(Math.random()*(i-t+1))+t}render(){var t,e,n;return i(s,{part:"product-card",class:{dimmed:this.dimmedBackground,animated:this.isTransitioning},exportparts:"brand, currency, deeplink, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, basket-button, update-button-item"},i(nt,{deeplink:this.deeplink,part:"image-link"},this.renderImage()),this.isTransitioning?i(r,null,i("vviinn-skeleton",{height:20}),i("vviinn-skeleton",{height:20,halfWidth:!0})):i(r,null,i(nt,{deeplink:this.deeplink,part:"deeplink"},i("span",{class:"title",part:"title"},this.productTitle)),i("span",{class:"brand",part:"brand"},this.brand),i("span",{class:"type",part:"type"},this.productType),i(ot,{prefix:null!==(t=this.pricePrefix)&&void 0!==t?t:v.pricePrefix,currency:null!==(e=this.currency)&&void 0!==e?e:v.currencySign,price:this.price,salePrice:this.salePrice,locale:null!==(n=this.locale)&&void 0!==n?n:v.locale})),this.addToBasketShow&&i("div",{class:"basket-button-container"},this.isTransitioning?i("vviinn-skeleton",{height:40}):i("button",{class:{"basket-button":!0,"basket-button-grid":"grid"===this.mode||"set"===this.mode,"basket-button-continuity ":"continuity"===this.mode},part:"basket-button",onClick:()=>{this.vviinnAddToBasket.emit(this.productData)}},i("slot",{name:"vviinn-basket-button-text"},i("span",null,S.t("basketButtonText"))))),"set"===this.mode?i("button",{class:{"update-button":!0,hidden:"onTop"===this.updateButtonLocation},part:"update-button-item",onClick:()=>{this.vviinnCrossSellingClick.emit({animationInterval:this.generateRandomNumber(800,1400),productData:this.productData})}},i("slot",{name:"vviinn-update-icon-item"},i(_,null))):null)}get el(){return e(this)}static get watchers(){return{updatingAllCards:["updatingAllCardsWatcher"],productId:["productIdWatcher"]}}};at.style=":host{align-items:center;display:flex;flex-direction:column;position:relative;gap:8px;height:100%}.price-container{display:flex;flex-direction:column}.price-sale,.price-regular{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#161616}.price-outdated{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#757575;text-decoration:line-through}.product-type{word-wrap:anywhere}.image{display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;-o-object-fit:contain;object-fit:contain;text-align:center;box-sizing:border-box}img.responsive{width:100%;height:auto;aspect-ratio:1}.brand,.type{display:none}.title{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#161616;display:-webkit-box;font-size:16px;font-style:normal;font-weight:500;line-height:24px;overflow:hidden}.deeplink{text-decoration:none;max-width:100%}.image-link{display:contents}picture{position:relative;width:100%}picture::before{content:\"\";opacity:0;width:100%;height:100%;box-sizing:border-box;display:block;top:0;left:0;position:absolute}.update-button{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;z-index:1;background:rgba(127, 127, 127, 0.4);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:none;color:white;cursor:pointer}.update-button::after{content:\"\";position:absolute;top:-4px;right:-4px;width:calc(100% + 8px);height:calc(100% + 8px)}.update-button:hover{background:rgba(127, 127, 127, 0.5)}.update-button.hidden{display:none}.basket-button-container{margin-top:auto;width:100%}.basket-button{border:none;cursor:pointer;font-size:16px;padding:10px 12px}.basket-button.basket-button-grid{width:100%;background:none;border:1px solid #dddddd}.basket-button.basket-button-continuity{align-self:start;background:#f7f7f7}.basket-button-continuity:hover{background:#eaeaea}.basket-button-grid:hover{background:#f7f7f7}:host(.dimmed) picture::after{content:\"\";width:100%;height:100%;box-sizing:border-box;background:#f7f7f7;display:block;top:0;left:0;position:absolute;mix-blend-mode:multiply}:host(.animated) picture::before{opacity:1;animation:pulse 1.2s infinite}:host(.animated) picture::after{content:\"\";position:absolute;width:80px;height:80px;left:calc(50% - 40px);top:calc(50% - 40px);background-image:url(\"data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_810_154)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M64.7332 1.23333C66.2665 12.2667 67.9665 13.9667 78.6665 15.2333C79.4332 15.3333 79.9999 15.9333 79.9999 16.6667C79.9999 17.4 79.4665 17.9333 78.6665 18.0667C67.9665 19.3667 66.2999 21.0333 64.7332 32.0667C64.6332 32.8 64.0665 33.3333 63.3665 33.3333C62.6665 33.3333 62.0999 32.8 61.9665 32.0667C60.4665 21.0333 58.7665 19.3667 48.0332 18.0667C47.2332 17.9667 46.6999 17.4333 46.6999 16.6667C46.6999 15.9 47.2332 15.3667 48.0332 15.2333C58.7665 13.7667 60.3999 12.2 61.9665 1.23333C62.0999 0.5 62.6665 0 63.3665 0C64.0665 0 64.5999 0.5 64.7332 1.23333ZM38.5665 71.5667C38.3665 72.6 37.6665 73.3333 36.6665 73.3333C35.6665 73.3333 34.9665 72.6 34.7998 71.5667C31.9332 50.7 29.0998 47.9 8.49984 45.2C7.39984 45.1 6.6665 44.3 6.6665 43.3C6.6665 42.3 7.39984 41.5333 8.49984 41.4333C29.1332 39.1333 32.0998 35.9333 34.7998 15.0333C34.9665 14.0333 35.6665 13.3333 36.6665 13.3333C37.6665 13.3333 38.3665 14 38.5665 15.0333C41.2665 35.9333 44.1998 39.1333 64.8665 41.4333C65.9332 41.5333 66.6665 42.2667 66.6665 43.3C66.6665 44.3333 65.9332 45.1 64.8665 45.2C44.1998 47.5 41.2665 50.7 38.5665 71.5667Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_810_154'%3E%3Crect width='80' height='80' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E \")}@keyframes pulse{0%{background-color:rgb(244, 244, 244)}50%{background-color:rgb(232, 232, 232)}100%{background-color:rgba(244, 244, 244)}}";const ht=class{constructor(i){t(this,i),this.height=void 0,this.halfWidth=!1}render(){return i(s,null,i("div",{class:{"vviinn-skeleton":!0},style:{height:`${this.height.toString()}px`,width:this.halfWidth?"50%":"100%"}}))}get el(){return e(this)}};function ct(t){return"function"==typeof t}function dt(t){const i=t((t=>{Error.call(t),t.stack=(new Error).stack}));return i.prototype=Object.create(Error.prototype),i.prototype.constructor=i,i}ht.style=":host{display:block;width:100%;height:100%}.vviinn-skeleton{animation:pulse 1.2s infinite}@keyframes pulse{0%{background-color:rgb(244, 244, 244)}50%{background-color:rgb(232, 232, 232)}100%{background-color:rgba(244, 244, 244)}}";const lt=dt((t=>function(i){t(this),this.message=i?`${i.length} errors occurred during unsubscription:\n${i.map(((t,i)=>`${i+1}) ${t.toString()}`)).join("\n ")}`:"",this.name="UnsubscriptionError",this.errors=i}));function ut(t,i){if(t){const s=t.indexOf(i);0<=s&&t.splice(s,1)}}class pt{constructor(t){this.initialTeardown=t,this.closed=!1,this._parentage=null,this._finalizers=null}unsubscribe(){let t;if(!this.closed){this.closed=!0;const{_parentage:i}=this;if(i)if(this._parentage=null,Array.isArray(i))for(const t of i)t.remove(this);else i.remove(this);const{initialTeardown:s}=this;if(ct(s))try{s()}catch(i){t=i instanceof lt?i.errors:[i]}const{_finalizers:e}=this;if(e){this._finalizers=null;for(const i of e)try{mt(i)}catch(i){t=null!=t?t:[],i instanceof lt?t=[...t,...i.errors]:t.push(i)}}if(t)throw new lt(t)}}add(t){var i;if(t&&t!==this)if(this.closed)mt(t);else{if(t instanceof pt){if(t.closed||t._hasParent(this))return;t._addParent(this)}(this._finalizers=null!==(i=this._finalizers)&&void 0!==i?i:[]).push(t)}}_hasParent(t){const{_parentage:i}=this;return i===t||Array.isArray(i)&&i.includes(t)}_addParent(t){const{_parentage:i}=this;this._parentage=Array.isArray(i)?(i.push(t),i):i?[i,t]:t}_removeParent(t){const{_parentage:i}=this;i===t?this._parentage=null:Array.isArray(i)&&ut(i,t)}remove(t){const{_finalizers:i}=this;i&&ut(i,t),t instanceof pt&&t._removeParent(this)}}pt.EMPTY=(()=>{const t=new pt;return t.closed=!0,t})();const vt=pt.EMPTY;function gt(t){return t instanceof pt||t&&"closed"in t&&ct(t.remove)&&ct(t.add)&&ct(t.unsubscribe)}function mt(t){ct(t)?t():t.unsubscribe()}const bt={onUnhandledError:null,onStoppedNotification:null,Promise:void 0,useDeprecatedSynchronousErrorHandling:!1,useDeprecatedNextContext:!1},ft={setTimeout(t,i,...s){const{delegate:e}=ft;return(null==e?void 0:e.setTimeout)?e.setTimeout(t,i,...s):setTimeout(t,i,...s)},clearTimeout(t){const{delegate:i}=ft;return((null==i?void 0:i.clearTimeout)||clearTimeout)(t)},delegate:void 0};function wt(){}const yt=xt("C",void 0,void 0);function xt(t,i,s){return{kind:t,value:i,error:s}}function kt(t){t()}class Ct extends pt{constructor(t){super(),this.isStopped=!1,t?(this.destination=t,gt(t)&&t.add(this)):this.destination=St}static create(t,i,s){return new Rt(t,i,s)}next(t){this.isStopped?_t(function(t){return xt("N",t,void 0)}(t),this):this._next(t)}error(t){this.isStopped?_t(xt("E",void 0,t),this):(this.isStopped=!0,this._error(t))}complete(){this.isStopped?_t(yt,this):(this.isStopped=!0,this._complete())}unsubscribe(){this.closed||(this.isStopped=!0,super.unsubscribe(),this.destination=null)}_next(t){this.destination.next(t)}_error(t){try{this.destination.error(t)}finally{this.unsubscribe()}}_complete(){try{this.destination.complete()}finally{this.unsubscribe()}}}const It=Function.prototype.bind;function Tt(t,i){return It.call(t,i)}class Pt{constructor(t){this.partialObserver=t}next(t){const{partialObserver:i}=this;if(i.next)try{i.next(t)}catch(t){Et(t)}}error(t){const{partialObserver:i}=this;if(i.error)try{i.error(t)}catch(t){Et(t)}else Et(t)}complete(){const{partialObserver:t}=this;if(t.complete)try{t.complete()}catch(t){Et(t)}}}class Rt extends Ct{constructor(t,i,s){let e;if(super(),ct(t)||!t)e={next:null!=t?t:void 0,error:null!=i?i:void 0,complete:null!=s?s:void 0};else{let i;this&&bt.useDeprecatedNextContext?(i=Object.create(t),i.unsubscribe=()=>this.unsubscribe(),e={next:t.next&&Tt(t.next,i),error:t.error&&Tt(t.error,i),complete:t.complete&&Tt(t.complete,i)}):e=t}this.destination=new Pt(e)}}function Et(t){var i;i=t,ft.setTimeout((()=>{const{onUnhandledError:t}=bt;if(!t)throw i;t(i)}))}function _t(t,i){const{onStoppedNotification:s}=bt;s&&ft.setTimeout((()=>s(t,i)))}const St={closed:!0,next:wt,error:function(t){throw t},complete:wt},At="function"==typeof Symbol&&Symbol.observable||"@@observable";function Vt(t){return t}class jt{constructor(t){t&&(this._subscribe=t)}lift(t){const i=new jt;return i.source=this,i.operator=t,i}subscribe(t,i,s){const e=(n=t)&&n instanceof Ct||function(t){return t&&ct(t.next)&&ct(t.error)&&ct(t.complete)}(n)&>(n)?t:new Rt(t,i,s);var n;return kt((()=>{const{operator:t,source:i}=this;e.add(t?t.call(e,i):i?this._subscribe(e):this._trySubscribe(e))})),e}_trySubscribe(t){try{return this._subscribe(t)}catch(i){t.error(i)}}forEach(t,i){return new(i=Ot(i))(((i,s)=>{const e=new Rt({next:i=>{try{t(i)}catch(t){s(t),e.unsubscribe()}},error:s,complete:i});this.subscribe(e)}))}_subscribe(t){var i;return null===(i=this.source)||void 0===i?void 0:i.subscribe(t)}[At](){return this}pipe(...t){return(0===(i=t).length?Vt:1===i.length?i[0]:function(t){return i.reduce(((t,i)=>i(t)),t)})(this);var i}toPromise(t){return new(t=Ot(t))(((t,i)=>{let s;this.subscribe((t=>s=t),(t=>i(t)),(()=>t(s)))}))}}function Ot(t){var i;return null!==(i=null!=t?t:bt.Promise)&&void 0!==i?i:Promise}jt.create=t=>new jt(t);const Wt=dt((t=>function(){t(this),this.name="ObjectUnsubscribedError",this.message="object unsubscribed"}));class $t extends jt{constructor(){super(),this.closed=!1,this.currentObservers=null,this.observers=[],this.isStopped=!1,this.hasError=!1,this.thrownError=null}lift(t){const i=new zt(this,this);return i.operator=t,i}_throwIfClosed(){if(this.closed)throw new Wt}next(t){kt((()=>{if(this._throwIfClosed(),!this.isStopped){this.currentObservers||(this.currentObservers=Array.from(this.observers));for(const i of this.currentObservers)i.next(t)}}))}error(t){kt((()=>{if(this._throwIfClosed(),!this.isStopped){this.hasError=this.isStopped=!0,this.thrownError=t;const{observers:i}=this;for(;i.length;)i.shift().error(t)}}))}complete(){kt((()=>{if(this._throwIfClosed(),!this.isStopped){this.isStopped=!0;const{observers:t}=this;for(;t.length;)t.shift().complete()}}))}unsubscribe(){this.isStopped=this.closed=!0,this.observers=this.currentObservers=null}get observed(){var t;return(null===(t=this.observers)||void 0===t?void 0:t.length)>0}_trySubscribe(t){return this._throwIfClosed(),super._trySubscribe(t)}_subscribe(t){return this._throwIfClosed(),this._checkFinalizedStatuses(t),this._innerSubscribe(t)}_innerSubscribe(t){const{hasError:i,isStopped:s,observers:e}=this;return i||s?vt:(this.currentObservers=null,e.push(t),new pt((()=>{this.currentObservers=null,ut(e,t)})))}_checkFinalizedStatuses(t){const{hasError:i,thrownError:s,isStopped:e}=this;i?t.error(s):e&&t.complete()}asObservable(){const t=new jt;return t.source=this,t}}$t.create=(t,i)=>new zt(t,i);class zt extends $t{constructor(t,i){super(),this.destination=t,this.source=i}next(t){var i,s;null===(s=null===(i=this.destination)||void 0===i?void 0:i.next)||void 0===s||s.call(i,t)}error(t){var i,s;null===(s=null===(i=this.destination)||void 0===i?void 0:i.error)||void 0===s||s.call(i,t)}complete(){var t,i;null===(i=null===(t=this.destination)||void 0===t?void 0:t.complete)||void 0===i||i.call(t)}_subscribe(t){var i,s;return null!==(s=null===(i=this.source)||void 0===i?void 0:i.subscribe(t))&&void 0!==s?s:vt}}const Lt=c.flow((t=>`Bearer ${t}`),(t=>new Headers({Authorization:t})),(t=>({headers:t}))),Bt=(Nt=x,function(){for(var t=[],i=0;i<arguments.length;i++)t[i]=arguments[i];for(var s=t.length,e=it(s),n=Nt.map(t[0],e),r=1;r<s;r++)n=Nt.ap(n,t[r]);return n});var Nt;const Dt=(t,i={})=>g(Bt(w(),y),f,m(b(t,i))),Mt=t=>i=>s=>e=>n=>{const r=c.pipe(e,k(encodeURIComponent),C((()=>{const e=[];i&&e.push(`color=${i}`),s&&e.push(s);const n=I(e);return`product/${t}/similar-products${n}`}),(e=>{const n=[];e&&n.push(`campaigns=${e}`),i&&n.push(`color=${i}`),s&&n.push(s);const r=I(n);return`product/${t}/similar-products${r}`})));return Dt(r,n)},Ft=t=>i=>s=>e=>n=>{const r=c.pipe(e,k(encodeURIComponent),C((()=>{const e=[];i&&e.push(`color=${i}`),s&&e.push(s);const n=I(e);return`product/${t}/cross-selling-products${n}`}),(e=>{const n=[];e&&n.push(`campaigns=${e}`),i&&n.push(`color=${i}`),s&&n.push(s);const r=I(n);return`product/${t}/cross-selling-products${r}`})));return Dt(r,n)},Ut={de:{translation:{noResultText:"Keine Ergebnisse! Versuche es bitte später erneut.",basketButtonText:"In den Warenkorb"}},en:{translation:{noResultText:"No results! Please, try again later.",basketButtonText:"Add to Basket"}}};var Gt=function(t,i){var s={};for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&i.indexOf(e)<0&&(s[e]=t[e]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(e=Object.getOwnPropertySymbols(t);n<e.length;n++)i.indexOf(e[n])<0&&Object.prototype.propertyIsEnumerable.call(t,e[n])&&(s[e[n]]=t[e[n]])}return s};const qt=class{constructor(i){t(this,i),this.vviinnWidgetLoad=n(this,"vviinnWidgetLoad",7),this.vviinnProductLoad=n(this,"vviinnProductLoad",7),this.vviinnProductView=n(this,"vviinnProductView",7),this.vviinnProductClick=n(this,"vviinnProductClick",7),this.vviinnResultLoad=n(this,"vviinnResultLoad",7),this.vviinnResultView=n(this,"vviinnResultView",7),this.vviinnNoResult=n(this,"vviinnNoResult",7),this.vviinnAddToBasket=n(this,"vviinnAddToBasket",7),this.globalSlotsChanged=n(this,"globalSlotsChanged",7),this.vviinnRecommendationsLoaded=n(this,"vviinnRecommendationsLoaded",7),this.vviinnWidgetOpen=n(this,"vviinnWidgetOpen",7),this.vviinnWidgetClose=n(this,"vviinnWidgetClose",7),this.productImageLoadedSubject=new $t,this.resultViewed=!1,this.setTrackingDeactivated=t=>{"rejected"===t.status&&(this.trackingDeactivated=!0)},this.blockTitle="Recommended products",this.imageRatio=1,this.imageWidth=300,this.productId=void 0,this.token=void 0,this.currencySign="€",this.pricePrefix="",this.mode="continuity",this.campaignType="VPR",this.locale="de-DE",this.campaigns="",this.color="",this.gridArrowsDynamic=!1,this.noResultText="",this.noResultShow=!0,this.showScroll=!0,this.cssUrl=null,this.excluded="",this.productDetailNewTab=!1,this.addToBasketShow=!1,this.updateButtonLocation="topAndItem",this.apiPath="https://api.vviinn.com",this.useCarousel=!0,this.showingInButton=!1,this.buttonElementId=void 0,this.closed=void 0,this.opened=void 0,this.recommendations=[],this.trackingDeactivated=!1,this.hasErrorOnLoad=!1,this.updatingAllCards=!1}getBasicEventData(){return{widgetType:"VPR",campaignTypeId:this.campaignType,campaignTypeName:V[this.campaignType],widgetId:this.id,widgetVersion:$}}handleOpenLink(t,i){if(this.productDetailNewTab||i.ctrlKey||i.metaKey){let i=window.open();i?i.location.href=t:window.location.href=t}else window.location.href=t}handleProductIdChange(){this.getRecommendations()}handleCampaignTypeChange(){this.getRecommendations()}handleCampaignsChange(){this.getRecommendations()}handleApiPathChange(t){v.apiPath=t,this.getRecommendations()}trackWidgetOpen(){this.opened&&(this.vviinnWidgetOpen.emit(this.getBasicEventData()),this.trackWidgetEvent("open"))}trackWidgetClose(){this.closed&&(this.vviinnWidgetClose.emit(this.getBasicEventData()),this.trackWidgetEvent("close"))}componentDidRender(){if(this.showingInButton&&this.closed)return;const t=this.el.querySelectorAll("[slot]");this.globalSlotsChanged.emit(Array.from(t))}connectedCallback(){var t;v.apiPath=this.apiPath,v.pricePrefix=this.pricePrefix,v.currencySign=this.currencySign,v.locale=this.locale,this.id=null!==(t=this.buttonElementId)&&void 0!==t?t:this.el.id,this.uiSessionId=z(),this.trackingApi=L(this.apiPath,this.token),this.getRecommendations(),this.vviinnWidgetLoad.emit(this.getBasicEventData()),this.trackWidgetEvent("load")}async componentWillLoad(){await S.init({lng:this.locale,fallbackLng:"de-DE",resources:Ut}),this.excluded&&(this.excluded=T(this.excluded))}trackProductLoad({detail:t}){this.productImageLoadedSubject.next(t.productId);const i=this.getProductTrackEvent(t,"load");i&&this.trackingApi.trackEvent(i).then(this.setTrackingDeactivated)}trackProductView({detail:t}){this.resultViewed||(this.resultViewed=!0,this.vviinnResultView.emit(this.getBasicEventData()),this.trackResultEvent("view"));const i=this.getProductTrackEvent(t,"view");i&&this.trackingApi.trackEvent(i).then(this.setTrackingDeactivated)}async trackProductClick({detail:t}){const{productId:i,clickEvent:s}=t,e=this.recommendations.find((t=>t.productId===i));if(!e||!e.deeplink)return;const n=this.getProductTrackEvent(t,"click");this.trackingDeactivated?this.handleOpenLink(e.deeplink,s):await this.trackingApi.trackEvent(n).then(this.setTrackingDeactivated).finally((()=>{this.handleOpenLink(e.deeplink,s)}))}async trackAuxClick({detail:t}){const{productId:i}=t,s=this.recommendations.find((t=>t.productId===i));if(!s||!s.deeplink)return;const e=this.getProductTrackEvent(t,"click");this.trackingDeactivated||await this.trackingApi.trackEvent(e).then(this.setTrackingDeactivated)}async trackAddToBasket({detail:t}){const{productRank:i,productId:s}=t,e=Gt(t,["productRank","productId","campaignTypeId","widgetType"]);let n;const r=Object.assign({session_id:this.uiSessionId,rank:i,product:s},e);"VCS"===this.campaignType?n=B(r):"VPR"===this.campaignType&&(n=N(r)),this.trackingApi.trackEvent(n).then(this.setTrackingDeactivated)}updatingAllCardsFinishedListener(){this.updatingAllCards&&(this.updatingAllCards=!1)}trackWidgetEvent(t){if(this.trackingDeactivated)return;const i=this.getBasicEventData(),s=Gt(i,["campaignTypeId","widgetType"]);let e;const n=Object.assign({action:t,session_id:this.uiSessionId},s);"VCS"===this.campaignType?e=D(n):"VPR"===this.campaignType&&(e=M(n)),this.trackingApi.trackEvent(e).then(this.setTrackingDeactivated)}trackResultEvent(t){if(this.trackingDeactivated)return;const i=this.getBasicEventData(),s=Gt(i,["campaignTypeId","widgetType"]);let e;const n=Object.assign({session_id:this.uiSessionId},s);"VCS"===this.campaignType?e=F(t)(n):"VPR"===this.campaignType&&(e=U(t)(n)),this.trackingApi.trackEvent(e).then(this.setTrackingDeactivated)}getProductTrackEvent(t,i){if(this.trackingDeactivated)return null;const{productRank:s,productId:e,campaignTypeId:n}=t,r=Gt(t,["productRank","productId","campaignTypeId","widgetType","clickEvent"]);let o;const a=Object.assign({session_id:this.uiSessionId,rank:s,product:e},r);return"VCS"===n?o=G(i)(a):"VPR"===n&&(o=q(i)(a)),o}async getRecommendations(){if(void 0===this.productId||void 0===this.token)return;const t=this.campaignType.length>0?this.campaignType:"VPR",i=Lt(this.token),s=c.pipe(P.of((t=>c.pipe(j(t),O((()=>Mt),(()=>Ft))))(t)),P.ap(P.of(this.productId)),P.ap(P.of(this.color)),P.ap(P.of(this.excluded)),P.ap(P.of(R(this.campaigns))),P.ap(P.of(i)),P.flatten),e=await s();c.pipe(e,u.fold((t=>{this.handleError(t),this.vviinnNoResult.emit(this.getBasicEventData()),this.vviinnRecommendationsLoaded.emit()}),(t=>this.handleRecommendationsSuccess(t))))}handleError(t){this.hasErrorOnLoad=!0}handleRecommendationsSuccess(t){var i;this.vviinnResultLoad.emit(this.getBasicEventData()),this.trackResultEvent("load"),this.recommendations=null!==(i=null==t?void 0:t.extended)&&void 0!==i?i:t,p.results=this.recommendations,this.productIds=this.recommendations.map((t=>t.productId)),this.productImageLoadedSubject.subscribe((t=>{this.productIds=this.productIds.filter((i=>i!==t)),0===this.productIds.length&&this.vviinnRecommendationsLoaded.emit()}))}isExternalCSS(){return this.cssUrl&&this.cssUrl.length>0}renderExternalCSS(){return this.isExternalCSS()?i("link",{href:this.cssUrl,rel:"stylesheet"}):""}render(){return 0===this.recommendations.length&&!1===this.noResultShow?null:i(s,{class:{loaded:!0,empty:0==this.recommendations.length,["set"===this.mode?"grid":this.mode]:!0},"aria-hidden":"false"},this.addToBasketShow&&i(W,null),i(r,null,this.renderExternalCSS(),i("style",null,v.fallbackStyles),i("div",{class:"title-container"},i("h2",{part:"recommendations-title"},this.blockTitle),"set"===this.mode&&"onItem"!==this.updateButtonLocation?i("button",{class:"update-button",part:"update-button-top",onClick:()=>this.updatingAllCards=!0},i("slot",{name:"vviinn-update-icon-top"},i(_,null))):null),this.recommendations.length>0&&(this.useCarousel?this.renderCarousel():this.renderResults()),0===this.recommendations.length&&this.hasErrorOnLoad&&i("p",{class:"no-result-text"},this.noResultText.length?this.noResultText:S.t("noResultText"))))}renderRecommendation(t,s){return i("vviinn-product-card",{part:"product-part",productId:t.productId,productTitle:t.title,productType:t.productType,deeplink:t.deeplink,image:t.image.thumbnail,brand:t.brand,imageWidth:this.imageWidth,imageRatio:1,price:t.price.actual,salePrice:t.price.sale,responsive:"grid"===this.mode||"set"===this.mode,addToBasketShow:this.addToBasketShow,mode:this.mode,dimmedBackground:this.useDimmedBackgroundInCard(),campaignTypeId:this.campaignType,index:s,widgetElementId:this.id,widgetVersion:$})}useDimmedBackgroundInCard(){return"continuity"===this.mode||!this.useCarousel}renderResults(){return i("div",{class:"recommendations-grid",part:"recommendations-grid"},this.recommendations.map(((t,i)=>this.renderRecommendation(t,i))))}renderCarousel(){return i("vviinn-carousel",{mode:this.mode,campaignTypeId:this.campaignType,imageWidth:this.imageWidth,showScroll:this.showScroll,recommendations:this.recommendations,widgetElementId:this.id,widgetVersion:$,gridArrowsDynamic:this.gridArrowsDynamic,addToBasketShow:this.addToBasketShow,updatingAllCards:this.updatingAllCards,updateButtonLocation:this.updateButtonLocation})}get el(){return e(this)}static get watchers(){return{productId:["handleProductIdChange"],campaignType:["handleCampaignTypeChange"],campaigns:["handleCampaignsChange"],apiPath:["handleApiPathChange"],opened:["trackWidgetOpen"],closed:["trackWidgetClose"]}}};qt.style=":host{display:grid;grid-gap:1rem;width:100%}:host(:not(.loaded)){position:absolute;visibility:hidden}:host(.grid) vviinn-product-card::part(image){border:1px solid #dddddd;width:100%}.title-container{display:flex;justify-content:space-between;align-items:center}.update-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgb(244, 244, 244);border:none;color:white;cursor:pointer}.update-button:hover{background:rgb(234, 234, 234)}.update-button svg{color:#6f6f6f}h2{margin:0}vviinn-product-card::part(price-container){align-self:flex-start;text-align:left;display:flex}.results{display:grid;grid-gap:1rem}.no-result-text{font-size:20px}.visually-hidden{position:absolute;top:0;left:0;z-index:-1;height:0;width:0}h2{margin:0}:host(.grid) h2{justify-content:center}:host(.grid) vviinn-product-card::part(image){min-width:100%}:host(.grid) vviinn-product-card::part(image-link){width:100%}:host(.grid) vviinn-product-card::part(title),:host(.grid) vviinn-product-card::part(brand),:host(.grid) vviinn-product-card::part(type){text-align:center}:host(.grid) vviinn-product-card::part(price-container){align-self:center}:host(.continuity) vviinn-product-card::part(title),:host(.continuity) vviinn-product-card::part(brand),:host(.continuity) vviinn-product-card::part(type),:host(.continuity) vviinn-product-card::part(deeplink){text-align:left;max-width:unset;align-self:start}";export{K as vviinn_carousel,at as vviinn_product_card,ht as vviinn_skeleton,qt as vviinn_vpr_widget}
|
|
1
|
+
import{r as t,h as i,H as s,g as e,c as n,F as r}from"./p-1e83e6ba.js";import{_ as o,O as a,S as h,a as c,h as d,t as l,E as u,i as p,s as v,p as g,c as m,m as b,f,g as w,b as y,A as x,d as k,e as C,j as I,k as T,T as P,l as R}from"./p-987a8e9f.js";import{C as E,U as _}from"./p-7f19baa1.js";import{i as S}from"./p-2e76a5c3.js";import{s as A,c as V,f as j,a as O,S as W}from"./p-c8ef8d6c.js";import{v as $}from"./p-726774f9.js";import{v as z,c as L,a as B,b as N,d as D,e as M,f as F,g as U,h as G,i as q}from"./p-da7273ce.js";const H="--vviinn-carousel-image-width",Z="items-group",K=class{constructor(i){t(this,i),this.columns=0,this.resizeObserver=new ResizeObserver((()=>this.handleResize())),this.defaultAnimationInterval=2e3,this.mutationObserver=new MutationObserver((()=>this.cloneSlottedContent())),this.isLastGroup=()=>this.activeContentGroup===this.getContentGroups().length-1&&this.isGridMode,this.isFirstGroup=()=>0===this.activeContentGroup&&this.isGridMode,this.updateCard=(t,i,s)=>{let e=this.crossSellingRecommendations.find((i=>i.productId===t));const n=this.crossSellingRecommendations.indexOf(e),r=this.recommendations.indexOf(e),o=this.crossSellingRecommendations;if(r+i<this.recommendations.length){o[n]=this.recommendations[r+i];const e=this.el.querySelector(`[data-id="${t}"]`).shadowRoot.querySelector(".update-button");e.classList.add("hidden"),this.crossSellingRecommendations=[...o];const a=setTimeout((()=>{r+2*i<=this.recommendations.length-1&&e.classList.remove("hidden"),clearTimeout(a)}),s)}},this.moveDirection="right",this.contentGroups=[],this.activeContentGroup=0,this.isRTL=!1,this.crossSellingRecommendations=[],this.mode="continuity",this.imageWidth=140,this.showScroll=!0,this.campaignTypeId=void 0,this.widgetElementId=void 0,this.gridArrowsDynamic=void 0,this.recommendations=[],this.widgetVersion=void 0,this.addToBasketShow=void 0,this.updatingAllCards=void 0,this.updateButtonLocation=void 0}componentWillLoad(){this.isRTL="rtl"===document.dir}connectedCallback(){this.setItemWidth(),this.isSetMode="set"===this.mode,this.isGridMode="grid"===this.mode,this.isContinuityMode="continuity"===this.mode,this.isGridLike=this.isGridMode||this.isSetMode;const t=this.getColumnsNumber();this.isSetMode&&this.recommendations.length>=t&&(this.crossSellingRecommendations=this.recommendations.slice(0,t))}disconnectedCallback(){this.resizeObserver.disconnect()}componentDidLoad(){this.setWidth(),this.processScrollbarWidth(),this.columns=this.getColumnsNumber();const t=this.el.querySelector(".content");this.mutationObserver.observe(t,{subtree:!0,childList:!0}),this.resizeObserver.observe(this.getHostParent())}updatingAllCardsWatcher(){if(!this.updatingAllCards)return;const t=this.getColumnsNumber();this.crossSellingRecommendations.forEach((i=>{this.updateCard(i.productId,t,this.defaultAnimationInterval)}))}crossSellingClickListener({detail:t}){const i=this.getColumnsNumber(),{animationInterval:s,productData:e}=t;this.updateCard(e.productId,i,s)}getItemWidthFromDocument(){return parseInt(getComputedStyle(document.body).getPropertyValue(H))}setItemWidth(){const t=this.getItemWidthFromDocument(),i=isNaN(t)?this.imageWidth:t;this.el.style.setProperty(H,`${i}px`)}getContentClassMap(){return{content:!0,[this.moveDirection]:!0,[this.isSetMode?"grid":this.mode]:!0,"show-scrollbar":this.showScroll}}handleResize(){this.setWidth(),this.processScrollbarWidth(),this.setItemWidth();const t=this.getColumnsNumber();t!==this.columns&&(this.columns=t)}calculateMoveStep(){const t=this.getContent().map((t=>t.getBoundingClientRect().width));return t.reduce(((t,i)=>t+i),0)/t.length}getHostParent(){return this.el.parentNode.host.parentElement}setWidth(){const t=this.getHostParent();if(!t)return;const i=getComputedStyle(t),s=t.getBoundingClientRect().width-(parseInt(i["padding-right"])+parseInt(i["padding-left"]));this.el.style.setProperty("--vviinn-carousel-content-width",`${s}px`)}getParent(){return this.el.parentNode.host.parentElement}cloneSlottedContent(){this.setWidth()}getActiveGroupIndex(){var t,i;if(!(null===(i=null===(t=this.getContentNode())||void 0===t?void 0:t.getBoundingClientRect())||void 0===i?void 0:i.left))return 0;const s=this.getContentGroups().map((t=>t.getBoundingClientRect().left)).map(((t,i)=>[t,i])).filter((t=>t[0]>=0));return s.length>0?this.isRTL?s[s.length-1][1]:s[0][1]:0}getContentNode(){return this.el.querySelector(".content")}getContent(){const t=this.getContentNode().children;return Array.from(t).map((t=>t))}getColumnsNumber(){const t=getComputedStyle(this.el).getPropertyValue("--vviinn-carousel-columns-internal"),i=parseInt(t);return i&&!isNaN(i)?i:4}getContentGroups(){return Array.from(this.el.querySelectorAll(`.${Z}`))}showNext(){this.moveDirection="right";const t=this.getContentNode();requestAnimationFrame((()=>{t.scrollTo({top:0,left:t.scrollLeft+this.calculateMoveStep(),behavior:"smooth"})}))}showPrev(){this.moveDirection="left";const t=this.getContentNode();requestAnimationFrame((()=>{t.scrollTo({top:0,left:t.scrollLeft-this.calculateMoveStep(),behavior:"smooth"})}))}scroll(t){const i=this.getContentNode();requestAnimationFrame((()=>{i.scrollTo({top:0,left:this.calculateMoveStep()*t,behavior:"smooth"})}))}processScrollbarWidth(){const t=this.getContentNode();t&&(this.el.style.setProperty("--vviinn-progressbar-width",t.clientWidth*((t.scrollLeft+t.clientWidth)/t.scrollWidth)+"px"),this.activeContentGroup=this.getActiveGroupIndex())}showBullets(){return this.isGridMode&&this.showScroll}showScrollbar(){return this.isContinuityMode&&this.showScroll}getClassMap(){return{[this.isSetMode?"grid":this.mode]:!0,"show-scrollbar":this.showScrollbar()}}renderRecommendation(t,s){return i("vviinn-product-card",{part:"product-part",productId:t.productId,productTitle:t.title,productType:t.productType,deeplink:t.deeplink,image:t.image.thumbnail,brand:t.brand,imageWidth:this.imageWidth,imageRatio:1,price:t.price.actual,salePrice:t.price.sale,responsive:this.isGridLike,dimmedBackground:this.isContinuityMode,campaignTypeId:this.campaignTypeId,index:s,widgetElementId:this.widgetElementId,widgetVersion:this.widgetVersion,addToBasketShow:this.addToBasketShow,mode:this.mode,"data-id":t.productId,updatingAllCards:this.updatingAllCards,defaultAnimationInterval:this.defaultAnimationInterval,updateButtonLocation:this.updateButtonLocation})}renderRecommendationGroup(t){return i("div",{class:Z,part:"items-group"},...t)}renderRecommendationGroups(t){return t.map((t=>this.renderRecommendationGroup(t)))}renderRecommendations(){return this.isGridLike?this.renderGrid():this.renderRecommendationsElements()}renderRecommendationsElements(){return(this.isSetMode?this.crossSellingRecommendations:this.recommendations).map(((t,i)=>this.renderRecommendation(t,i)))}renderGrid(){const t=this.renderRecommendationsElements(),i=o.chunksOf(this.getColumnsNumber())(t);return this.renderRecommendationGroups(i)}renderBullets(){const t=Math.ceil(this.recommendations.length/this.getColumnsNumber());return Array.from(Array(t).keys()).map((t=>i("div",{class:{bullet:!0,active:this.activeContentGroup===t},onClick:()=>this.scroll(t)})))}render(){return i(s,{class:this.getClassMap()},i("div",{class:Object.assign({body:!0},this.getClassMap())},!this.isSetMode&&i("button",{class:"prev",onClick:()=>this.showPrev(),part:"carousel-button",disabled:this.gridArrowsDynamic&&this.isFirstGroup()},i(E,null)),i("div",{class:this.getContentClassMap(),onScroll:()=>this.processScrollbarWidth()},this.renderRecommendations()),!this.isSetMode&&i("button",{class:"next",onClick:()=>this.showNext(),part:"carousel-button",disabled:this.gridArrowsDynamic&&this.isLastGroup()},i(E,null))),this.showBullets()&&i("div",{class:"bullets"},this.renderBullets()))}get el(){return e(this)}static get watchers(){return{updatingAllCards:["updatingAllCardsWatcher"]}}};K.style=":host{--vviinn-progressbar-width:0;--vviinn-carousel-item-width:150px;--vviinn-carousel-columns-internal:var(--vviinn-carousel-columns, 4);--vviinn-carousel-image-width-system:140px}.body{display:flex;position:relative;width:var(--vviinn-carousel-content-width);flex-direction:column}.content-wrapper *{box-sizing:border-box}.content-wrapper{overflow-y:hidden;overflow-x:auto;flex-grow:1}.bullets{margin-top:16px;display:flex;flex-direction:row;grid-gap:24px;justify-content:center}.bullet{width:10px;height:10px;background:#e0e0e0;border-radius:50%;cursor:pointer}.bullet.active{background:#161616}.content:not(.show-scrollbar),.content.grid{scrollbar-color:#fff0 #fff0}.content:not(.show-scrollbar)::-webkit-scrollbar,.content.grid::-webkit-scrollbar{opacity:0}.content{display:flex;flex-direction:row;grid-gap:8px;overflow-y:hidden;overflow-x:auto;flex-grow:1;padding-bottom:16px}.content.left>*{scroll-snap-align:start}.content.right>*{scroll-snap-align:end}:host(.continuity) .prev,:host(.continuity) .next{border-radius:2px}:host(.grid) .prev,:host(.grid) .next{border-radius:50%}.prev,.next{align-items:center;background-color:white;border:none;box-shadow:0px 2px 6px rgba(0, 0, 0, 0.15);fill:#525252;cursor:pointer;display:grid;height:40px;justify-items:center;position:absolute;top:calc(50% - 20px);width:40px;z-index:1;padding:0;margin:0}.next:disabled,.prev:disabled{display:none}.prev svg{transform:rotate(180deg);margin-left:-5px}.prev{left:0}.next{right:0}.items-group{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--vviinn-carousel-columns-internal), 1fr);min-width:100%}vviinn-product-card::part(price-container){text-align:center}:host(.classic) vviinn-product-card::part(title),:host(.classic) vviinn-product-card::part(brand),:host(.classic) vviinn-product-card::part(type){text-align:center}@media (max-width: 480px){:host(.modern) button{display:none}.items-group{grid-template-columns:repeat(2, 1fr)}}";class J{sendImpression(t){var i,s,e;gtag("event","view_item_list",{items:[{id:t.productId,name:t.title,brand:null!==(i=t.brand)&&void 0!==i?i:"",category:null!==(s=t.productType)&&void 0!==s?s:"",list_name:"VI VPR View",price:Math.min(t.price.actual,null!==(e=t.price.sale)&&void 0!==e?e:1/0)}]})}sendClick(t){var i,s,e;gtag("event","select_content",{content_type:"product",items:[{id:t.productId,name:t.title,brand:null!==(i=t.brand)&&void 0!==i?i:"",category:null!==(s=t.productType)&&void 0!==s?s:"",list_name:"VI VPR View",price:Math.min(t.price.actual,null!==(e=t.price.sale)&&void 0!==e?e:1/0)}]})}}class Q{constructor(){ga("require","ec")}convertProduct(t){var i,s,e;return{id:t.productId,name:t.title,brand:null!==(i=t.brand)&&void 0!==i?i:"",category:null!==(s=t.productType)&&void 0!==s?s:"",list:"VI VPR View",price:Math.min(t.price.actual,null!==(e=t.price.sale)&&void 0!==e?e:1/0)}}sendImpression(t){ga("ec:addImpression",this.convertProduct(t))}sendClick(t){var i,s,e;ga("ec:addProduct",{id:t.productId,name:t.title,brand:null!==(i=t.brand)&&void 0!==i?i:"",category:null!==(s=t.productType)&&void 0!==s?s:"",price:Math.min(t.price.actual,null!==(e=t.price.sale)&&void 0!==e?e:1/0)}),ga("ec:setAction","click",{list:"VI VPR View"})}}const X=a.getMonoid(h.first()).concat(c.pipe(a.fromNullable(window.gtag),a.map((()=>new J))),c.pipe(a.fromNullable(window.ga),a.map((()=>new Q))));function Y(t,i,s){return function(e){for(var n=Array(s.length+1),r=0;r<s.length;r++)n[r]=s[r];return n[s.length]=e,0===i?t.apply(null,n):Y(t,i-1,n)}}var tt={1:function(t){return[t]},2:function(t){return function(i){return[t,i]}},3:function(t){return function(i){return function(s){return[t,i,s]}}},4:function(t){return function(i){return function(s){return function(e){return[t,i,s,e]}}}},5:function(t){return function(i){return function(s){return function(e){return function(n){return[t,i,s,e,n]}}}}}};function it(t){return d.call(tt,t)||(tt[t]=Y(l,t-1,[])),tt[t]}const st=/fit\/\d+\//,et=(t,i)=>c.pipe((t=>c.pipe(t.match(st),u.fromNullable(t),u.map((()=>t))))(t),u.map((t=>t.replace(st,`fit/${i}/`))),u.getOrElse((()=>t))),nt=(t,s)=>t.deeplink?i("a",{class:t.part,part:t.part,href:t.deeplink},s):s,rt=t=>{const s=t.priceType,e=new Intl.NumberFormat(t.locale,{minimumFractionDigits:2}).format(t.price),n=t.prefix?i("span",{part:"price-prefix"},t.prefix+" "):null,r=t.currency?i("span",{part:"currency"}," "+t.currency):null;return i("span",{class:"price-amount",part:"price-amount"+(s?"-"+s:"")},n,e,r)},ot=t=>i("span",{class:"price-container",part:"price-container"},t.salePrice?[i("span",{class:"price-sale",part:"price-sale"},i(rt,{prefix:t.prefix,currency:t.currency,price:t.salePrice,locale:t.locale,priceType:"sale"})),i("span",{class:"price-outdated",part:"price-outdated"},i(rt,{prefix:t.prefix,currency:t.currency,price:t.price,locale:t.locale,priceType:"outdated"}))]:i("span",{class:"price-regular",part:"price-regular"},i(rt,{prefix:t.prefix,currency:t.currency,price:t.price,locale:t.locale,priceType:"regular"}))),at=class{constructor(i){t(this,i),this.vviinnProductLoad=n(this,"vviinnProductLoad",7),this.vviinnProductView=n(this,"vviinnProductView",7),this.vviinnProductClick=n(this,"vviinnProductClick",7),this.vviinnAddToBasket=n(this,"vviinnAddToBasket",7),this.vviinnAuxClick=n(this,"vviinnAuxClick",7),this.vviinnCrossSellingClick=n(this,"vviinnCrossSellingClick",7),this.vviinnUpdatingAllCardsFinished=n(this,"vviinnUpdatingAllCardsFinished",7),this.productData=null,this.intersectionCallback=t=>{t.some((t=>t.isIntersecting))&&(c.pipe(X,a.map((t=>t.sendImpression(this.getProduct())))),this.vviinnProductView.emit(this.productData),this.intersectionObserver.disconnect())},this.brand=void 0,this.currency=void 0,this.deeplink=void 0,this.image=void 0,this.imageRatio=1,this.imageWidth=200,this.locale=void 0,this.price=void 0,this.pricePrefix=void 0,this.productId=void 0,this.productTitle=void 0,this.productType=void 0,this.salePrice=void 0,this.responsive=!1,this.dimmedBackground=!1,this.mode=void 0,this.addToBasketShow=void 0,this.updateButtonLocation=void 0,this.campaignTypeId=void 0,this.widgetElementId=void 0,this.buttonElementId=void 0,this.widgetVersion=void 0,this.index=0,this.updatingAllCards=void 0,this.defaultAnimationInterval=void 0,this.imageLoaded=!1,this.isTransitioning=!1}connectedCallback(){this.productData=this.getProductData()}componentWillLoad(){A(this,this.el)}crossSellingClickListener({detail:t}){const{animationInterval:i}=t;this.isTransitioning=!0;const s=setTimeout((()=>{this.isTransitioning=!1,clearTimeout(s)}),i)}updatingAllCardsWatcher(){if(!this.updatingAllCards)return;this.isTransitioning=!0;const t=setTimeout((()=>{this.vviinnUpdatingAllCardsFinished.emit(),this.isTransitioning=!1,clearTimeout(t)}),this.defaultAnimationInterval)}productIdWatcher(){this.productData=this.getProductData()}getWidgetType(){return"VPR"===this.campaignTypeId||"VCS"===this.campaignTypeId?"VPR":"VPS"}getProductData(){var t;return{productId:this.productId,productRank:this.index,productName:this.productTitle,productType:this.productType,widgetType:this.getWidgetType(),campaignTypeId:this.campaignTypeId,campaignTypeName:V[this.campaignTypeId],widgetId:null!==(t=this.buttonElementId)&&void 0!==t?t:this.widgetElementId,widgetVersion:this.widgetVersion}}componentDidLoad(){this.vviinnProductLoad.emit(this.productData),this.intersectionObserver=new IntersectionObserver(this.intersectionCallback.bind(this.imageElement),{threshold:1}),this.intersectionObserver.observe(this.imageElement),this.el.shadowRoot.querySelectorAll("a").forEach((t=>{t.addEventListener("click",(t=>{t.preventDefault(),t.stopImmediatePropagation(),this.vviinnProductClick.emit(Object.assign(Object.assign({},this.productData),{clickEvent:t})),c.pipe(X,a.match((()=>null),(t=>t.sendClick(this.getProduct()))))})),t.addEventListener("auxclick",(()=>{this.vviinnAuxClick.emit(Object.assign({},this.productData))}))}))}getProduct(){return p.results.find((t=>t.productId===this.productId))}renderImage(){const t={width:this.imageWidth,height:this.imageWidth*this.imageRatio,src:this.image,title:this.productTitle,lazy:!1,ref:t=>{this.imageElement=t}};return this.responsive?((t,s=(()=>{}))=>i("picture",null,i("img",{loading:t.lazy?"lazy":"eager",part:"image",class:"image responsive",src:et(t.src,t.width),alt:t.title,ref:t.ref,onLoad:s})))(t):((t,s=(()=>{}))=>i("picture",null,i("img",{loading:t.lazy?"lazy":"eager",part:"image",class:"image",width:t.width,height:t.height,src:et(t.src,t.width),alt:t.title,ref:t.ref,onLoad:s})))(t)}generateRandomNumber(t,i){return Math.floor(Math.random()*(i-t+1))+t}render(){var t,e,n;return i(s,{part:"product-card",class:{dimmed:this.dimmedBackground,animated:this.isTransitioning},exportparts:"brand, currency, deeplink, image, image-link, price-amount-sale, price-amount-outdated, price-amount-regular, price-container, price-outdated, price-regular, price-sale, price-prefix, title, basket-button, update-button-item"},i(nt,{deeplink:this.deeplink,part:"image-link"},this.renderImage()),this.isTransitioning?i(r,null,i("vviinn-skeleton",{height:20}),i("vviinn-skeleton",{height:20,halfWidth:!0})):i(r,null,i(nt,{deeplink:this.deeplink,part:"deeplink"},i("span",{class:"title",part:"title"},this.productTitle)),i("span",{class:"brand",part:"brand"},this.brand),i("span",{class:"type",part:"type"},this.productType),i(ot,{prefix:null!==(t=this.pricePrefix)&&void 0!==t?t:v.pricePrefix,currency:null!==(e=this.currency)&&void 0!==e?e:v.currencySign,price:this.price,salePrice:this.salePrice,locale:null!==(n=this.locale)&&void 0!==n?n:v.locale})),this.addToBasketShow&&i("div",{class:"basket-button-container"},this.isTransitioning?i("vviinn-skeleton",{height:40}):i("button",{class:{"basket-button":!0,"basket-button-grid":"grid"===this.mode||"set"===this.mode,"basket-button-continuity ":"continuity"===this.mode},part:"basket-button",onClick:()=>{this.vviinnAddToBasket.emit(this.productData)}},i("slot",{name:"vviinn-basket-button-text"},i("span",null,S.t("basketButtonText"))))),"set"===this.mode?i("button",{class:{"update-button":!0,hidden:"onTop"===this.updateButtonLocation},part:"update-button-item",onClick:()=>{this.vviinnCrossSellingClick.emit({animationInterval:this.generateRandomNumber(800,1400),productData:this.productData})}},i("slot",{name:"vviinn-update-icon-item"},i(_,null))):null)}get el(){return e(this)}static get watchers(){return{updatingAllCards:["updatingAllCardsWatcher"],productId:["productIdWatcher"]}}};at.style=":host{align-items:center;display:flex;flex-direction:column;position:relative;gap:8px;height:100%}.price-container{display:flex;flex-direction:column}.price-sale,.price-regular{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#161616}.price-outdated{font-style:normal;font-weight:normal;font-size:16px;line-height:24px;color:#757575;text-decoration:line-through}.product-type{word-wrap:anywhere}.image{display:grid;align-content:center;-o-object-position:50% 50%;object-position:50% 50%;-o-object-fit:contain;object-fit:contain;text-align:center;box-sizing:border-box}img.responsive{width:100%;height:auto;aspect-ratio:1}.brand,.type{display:none}.title{-webkit-box-orient:vertical;-webkit-line-clamp:2;color:#161616;display:-webkit-box;font-size:16px;font-style:normal;font-weight:500;line-height:24px;overflow:hidden}.deeplink{text-decoration:none;max-width:100%}.image-link{display:contents}picture{position:relative;width:100%}picture::before{content:\"\";opacity:0;width:100%;height:100%;box-sizing:border-box;display:block;top:0;left:0;position:absolute}.update-button{position:absolute;top:8px;right:8px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;z-index:1;background:rgba(127, 127, 127, 0.4);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border:none;color:white;cursor:pointer}.update-button::after{content:\"\";position:absolute;top:-4px;right:-4px;width:calc(100% + 8px);height:calc(100% + 8px)}.update-button:hover{background:rgba(127, 127, 127, 0.5)}.update-button.hidden{display:none}.basket-button-container{margin-top:auto;width:100%}.basket-button{border:none;cursor:pointer;font-size:16px;padding:10px 12px}.basket-button.basket-button-grid{width:100%;background:none;border:1px solid #dddddd}.basket-button.basket-button-continuity{align-self:start;background:#f7f7f7}.basket-button-continuity:hover{background:#eaeaea}.basket-button-grid:hover{background:#f7f7f7}:host(.dimmed) picture::after{content:\"\";width:100%;height:100%;box-sizing:border-box;background:#f7f7f7;display:block;top:0;left:0;position:absolute;mix-blend-mode:multiply}:host(.animated) picture::before{opacity:1;animation:pulse 1.2s infinite}:host(.animated) picture::after{content:\"\";position:absolute;width:80px;height:80px;left:calc(50% - 40px);top:calc(50% - 40px);background-image:url(\"data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_810_154)'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M64.7332 1.23333C66.2665 12.2667 67.9665 13.9667 78.6665 15.2333C79.4332 15.3333 79.9999 15.9333 79.9999 16.6667C79.9999 17.4 79.4665 17.9333 78.6665 18.0667C67.9665 19.3667 66.2999 21.0333 64.7332 32.0667C64.6332 32.8 64.0665 33.3333 63.3665 33.3333C62.6665 33.3333 62.0999 32.8 61.9665 32.0667C60.4665 21.0333 58.7665 19.3667 48.0332 18.0667C47.2332 17.9667 46.6999 17.4333 46.6999 16.6667C46.6999 15.9 47.2332 15.3667 48.0332 15.2333C58.7665 13.7667 60.3999 12.2 61.9665 1.23333C62.0999 0.5 62.6665 0 63.3665 0C64.0665 0 64.5999 0.5 64.7332 1.23333ZM38.5665 71.5667C38.3665 72.6 37.6665 73.3333 36.6665 73.3333C35.6665 73.3333 34.9665 72.6 34.7998 71.5667C31.9332 50.7 29.0998 47.9 8.49984 45.2C7.39984 45.1 6.6665 44.3 6.6665 43.3C6.6665 42.3 7.39984 41.5333 8.49984 41.4333C29.1332 39.1333 32.0998 35.9333 34.7998 15.0333C34.9665 14.0333 35.6665 13.3333 36.6665 13.3333C37.6665 13.3333 38.3665 14 38.5665 15.0333C41.2665 35.9333 44.1998 39.1333 64.8665 41.4333C65.9332 41.5333 66.6665 42.2667 66.6665 43.3C66.6665 44.3333 65.9332 45.1 64.8665 45.2C44.1998 47.5 41.2665 50.7 38.5665 71.5667Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_810_154'%3E%3Crect width='80' height='80' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E \")}@keyframes pulse{0%{background-color:rgb(244, 244, 244)}50%{background-color:rgb(232, 232, 232)}100%{background-color:rgba(244, 244, 244)}}";const ht=class{constructor(i){t(this,i),this.height=void 0,this.halfWidth=!1}render(){return i(s,null,i("div",{class:{"vviinn-skeleton":!0},style:{height:`${this.height.toString()}px`,width:this.halfWidth?"50%":"100%"}}))}get el(){return e(this)}};function ct(t){return"function"==typeof t}function dt(t){const i=t((t=>{Error.call(t),t.stack=(new Error).stack}));return i.prototype=Object.create(Error.prototype),i.prototype.constructor=i,i}ht.style=":host{display:block;width:100%;height:100%}.vviinn-skeleton{animation:pulse 1.2s infinite}@keyframes pulse{0%{background-color:rgb(244, 244, 244)}50%{background-color:rgb(232, 232, 232)}100%{background-color:rgba(244, 244, 244)}}";const lt=dt((t=>function(i){t(this),this.message=i?`${i.length} errors occurred during unsubscription:\n${i.map(((t,i)=>`${i+1}) ${t.toString()}`)).join("\n ")}`:"",this.name="UnsubscriptionError",this.errors=i}));function ut(t,i){if(t){const s=t.indexOf(i);0<=s&&t.splice(s,1)}}class pt{constructor(t){this.initialTeardown=t,this.closed=!1,this._parentage=null,this._finalizers=null}unsubscribe(){let t;if(!this.closed){this.closed=!0;const{_parentage:i}=this;if(i)if(this._parentage=null,Array.isArray(i))for(const t of i)t.remove(this);else i.remove(this);const{initialTeardown:s}=this;if(ct(s))try{s()}catch(i){t=i instanceof lt?i.errors:[i]}const{_finalizers:e}=this;if(e){this._finalizers=null;for(const i of e)try{mt(i)}catch(i){t=null!=t?t:[],i instanceof lt?t=[...t,...i.errors]:t.push(i)}}if(t)throw new lt(t)}}add(t){var i;if(t&&t!==this)if(this.closed)mt(t);else{if(t instanceof pt){if(t.closed||t._hasParent(this))return;t._addParent(this)}(this._finalizers=null!==(i=this._finalizers)&&void 0!==i?i:[]).push(t)}}_hasParent(t){const{_parentage:i}=this;return i===t||Array.isArray(i)&&i.includes(t)}_addParent(t){const{_parentage:i}=this;this._parentage=Array.isArray(i)?(i.push(t),i):i?[i,t]:t}_removeParent(t){const{_parentage:i}=this;i===t?this._parentage=null:Array.isArray(i)&&ut(i,t)}remove(t){const{_finalizers:i}=this;i&&ut(i,t),t instanceof pt&&t._removeParent(this)}}pt.EMPTY=(()=>{const t=new pt;return t.closed=!0,t})();const vt=pt.EMPTY;function gt(t){return t instanceof pt||t&&"closed"in t&&ct(t.remove)&&ct(t.add)&&ct(t.unsubscribe)}function mt(t){ct(t)?t():t.unsubscribe()}const bt={onUnhandledError:null,onStoppedNotification:null,Promise:void 0,useDeprecatedSynchronousErrorHandling:!1,useDeprecatedNextContext:!1},ft={setTimeout(t,i,...s){const{delegate:e}=ft;return(null==e?void 0:e.setTimeout)?e.setTimeout(t,i,...s):setTimeout(t,i,...s)},clearTimeout(t){const{delegate:i}=ft;return((null==i?void 0:i.clearTimeout)||clearTimeout)(t)},delegate:void 0};function wt(){}const yt=xt("C",void 0,void 0);function xt(t,i,s){return{kind:t,value:i,error:s}}function kt(t){t()}class Ct extends pt{constructor(t){super(),this.isStopped=!1,t?(this.destination=t,gt(t)&&t.add(this)):this.destination=St}static create(t,i,s){return new Rt(t,i,s)}next(t){this.isStopped?_t(function(t){return xt("N",t,void 0)}(t),this):this._next(t)}error(t){this.isStopped?_t(xt("E",void 0,t),this):(this.isStopped=!0,this._error(t))}complete(){this.isStopped?_t(yt,this):(this.isStopped=!0,this._complete())}unsubscribe(){this.closed||(this.isStopped=!0,super.unsubscribe(),this.destination=null)}_next(t){this.destination.next(t)}_error(t){try{this.destination.error(t)}finally{this.unsubscribe()}}_complete(){try{this.destination.complete()}finally{this.unsubscribe()}}}const It=Function.prototype.bind;function Tt(t,i){return It.call(t,i)}class Pt{constructor(t){this.partialObserver=t}next(t){const{partialObserver:i}=this;if(i.next)try{i.next(t)}catch(t){Et(t)}}error(t){const{partialObserver:i}=this;if(i.error)try{i.error(t)}catch(t){Et(t)}else Et(t)}complete(){const{partialObserver:t}=this;if(t.complete)try{t.complete()}catch(t){Et(t)}}}class Rt extends Ct{constructor(t,i,s){let e;if(super(),ct(t)||!t)e={next:null!=t?t:void 0,error:null!=i?i:void 0,complete:null!=s?s:void 0};else{let i;this&&bt.useDeprecatedNextContext?(i=Object.create(t),i.unsubscribe=()=>this.unsubscribe(),e={next:t.next&&Tt(t.next,i),error:t.error&&Tt(t.error,i),complete:t.complete&&Tt(t.complete,i)}):e=t}this.destination=new Pt(e)}}function Et(t){var i;i=t,ft.setTimeout((()=>{const{onUnhandledError:t}=bt;if(!t)throw i;t(i)}))}function _t(t,i){const{onStoppedNotification:s}=bt;s&&ft.setTimeout((()=>s(t,i)))}const St={closed:!0,next:wt,error:function(t){throw t},complete:wt},At="function"==typeof Symbol&&Symbol.observable||"@@observable";function Vt(t){return t}class jt{constructor(t){t&&(this._subscribe=t)}lift(t){const i=new jt;return i.source=this,i.operator=t,i}subscribe(t,i,s){const e=(n=t)&&n instanceof Ct||function(t){return t&&ct(t.next)&&ct(t.error)&&ct(t.complete)}(n)&>(n)?t:new Rt(t,i,s);var n;return kt((()=>{const{operator:t,source:i}=this;e.add(t?t.call(e,i):i?this._subscribe(e):this._trySubscribe(e))})),e}_trySubscribe(t){try{return this._subscribe(t)}catch(i){t.error(i)}}forEach(t,i){return new(i=Ot(i))(((i,s)=>{const e=new Rt({next:i=>{try{t(i)}catch(t){s(t),e.unsubscribe()}},error:s,complete:i});this.subscribe(e)}))}_subscribe(t){var i;return null===(i=this.source)||void 0===i?void 0:i.subscribe(t)}[At](){return this}pipe(...t){return(0===(i=t).length?Vt:1===i.length?i[0]:function(t){return i.reduce(((t,i)=>i(t)),t)})(this);var i}toPromise(t){return new(t=Ot(t))(((t,i)=>{let s;this.subscribe((t=>s=t),(t=>i(t)),(()=>t(s)))}))}}function Ot(t){var i;return null!==(i=null!=t?t:bt.Promise)&&void 0!==i?i:Promise}jt.create=t=>new jt(t);const Wt=dt((t=>function(){t(this),this.name="ObjectUnsubscribedError",this.message="object unsubscribed"}));class $t extends jt{constructor(){super(),this.closed=!1,this.currentObservers=null,this.observers=[],this.isStopped=!1,this.hasError=!1,this.thrownError=null}lift(t){const i=new zt(this,this);return i.operator=t,i}_throwIfClosed(){if(this.closed)throw new Wt}next(t){kt((()=>{if(this._throwIfClosed(),!this.isStopped){this.currentObservers||(this.currentObservers=Array.from(this.observers));for(const i of this.currentObservers)i.next(t)}}))}error(t){kt((()=>{if(this._throwIfClosed(),!this.isStopped){this.hasError=this.isStopped=!0,this.thrownError=t;const{observers:i}=this;for(;i.length;)i.shift().error(t)}}))}complete(){kt((()=>{if(this._throwIfClosed(),!this.isStopped){this.isStopped=!0;const{observers:t}=this;for(;t.length;)t.shift().complete()}}))}unsubscribe(){this.isStopped=this.closed=!0,this.observers=this.currentObservers=null}get observed(){var t;return(null===(t=this.observers)||void 0===t?void 0:t.length)>0}_trySubscribe(t){return this._throwIfClosed(),super._trySubscribe(t)}_subscribe(t){return this._throwIfClosed(),this._checkFinalizedStatuses(t),this._innerSubscribe(t)}_innerSubscribe(t){const{hasError:i,isStopped:s,observers:e}=this;return i||s?vt:(this.currentObservers=null,e.push(t),new pt((()=>{this.currentObservers=null,ut(e,t)})))}_checkFinalizedStatuses(t){const{hasError:i,thrownError:s,isStopped:e}=this;i?t.error(s):e&&t.complete()}asObservable(){const t=new jt;return t.source=this,t}}$t.create=(t,i)=>new zt(t,i);class zt extends $t{constructor(t,i){super(),this.destination=t,this.source=i}next(t){var i,s;null===(s=null===(i=this.destination)||void 0===i?void 0:i.next)||void 0===s||s.call(i,t)}error(t){var i,s;null===(s=null===(i=this.destination)||void 0===i?void 0:i.error)||void 0===s||s.call(i,t)}complete(){var t,i;null===(i=null===(t=this.destination)||void 0===t?void 0:t.complete)||void 0===i||i.call(t)}_subscribe(t){var i,s;return null!==(s=null===(i=this.source)||void 0===i?void 0:i.subscribe(t))&&void 0!==s?s:vt}}const Lt=c.flow((t=>`Bearer ${t}`),(t=>new Headers({Authorization:t})),(t=>({headers:t}))),Bt=(Nt=x,function(){for(var t=[],i=0;i<arguments.length;i++)t[i]=arguments[i];for(var s=t.length,e=it(s),n=Nt.map(t[0],e),r=1;r<s;r++)n=Nt.ap(n,t[r]);return n});var Nt;const Dt=(t,i={})=>g(Bt(w(),y),f,m(b(t,i))),Mt=t=>i=>s=>e=>n=>{const r=c.pipe(e,k(encodeURIComponent),C((()=>{const e=[];i&&e.push(`color=${i}`),s&&e.push(s);const n=I(e);return`product/${t}/similar-products${n}`}),(e=>{const n=[];e&&n.push(`campaigns=${e}`),i&&n.push(`color=${i}`),s&&n.push(s);const r=I(n);return`product/${t}/similar-products${r}`})));return Dt(r,n)},Ft=t=>i=>s=>e=>n=>{const r=c.pipe(e,k(encodeURIComponent),C((()=>{const e=[];i&&e.push(`color=${i}`),s&&e.push(s);const n=I(e);return`product/${t}/cross-selling-products${n}`}),(e=>{const n=[];e&&n.push(`campaigns=${e}`),i&&n.push(`color=${i}`),s&&n.push(s);const r=I(n);return`product/${t}/cross-selling-products${r}`})));return Dt(r,n)},Ut={de:{translation:{noResultText:"Keine Ergebnisse! Versuche es bitte später erneut.",basketButtonText:"In den Warenkorb"}},en:{translation:{noResultText:"No results! Please, try again later.",basketButtonText:"Add to Basket"}}};var Gt=function(t,i){var s={};for(var e in t)Object.prototype.hasOwnProperty.call(t,e)&&i.indexOf(e)<0&&(s[e]=t[e]);if(null!=t&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(e=Object.getOwnPropertySymbols(t);n<e.length;n++)i.indexOf(e[n])<0&&Object.prototype.propertyIsEnumerable.call(t,e[n])&&(s[e[n]]=t[e[n]])}return s};const qt=class{constructor(i){t(this,i),this.vviinnWidgetLoad=n(this,"vviinnWidgetLoad",7),this.vviinnProductLoad=n(this,"vviinnProductLoad",7),this.vviinnProductView=n(this,"vviinnProductView",7),this.vviinnProductClick=n(this,"vviinnProductClick",7),this.vviinnResultLoad=n(this,"vviinnResultLoad",7),this.vviinnResultView=n(this,"vviinnResultView",7),this.vviinnNoResult=n(this,"vviinnNoResult",7),this.vviinnAddToBasket=n(this,"vviinnAddToBasket",7),this.globalSlotsChanged=n(this,"globalSlotsChanged",7),this.vviinnRecommendationsLoaded=n(this,"vviinnRecommendationsLoaded",7),this.vviinnWidgetOpen=n(this,"vviinnWidgetOpen",7),this.vviinnWidgetClose=n(this,"vviinnWidgetClose",7),this.productImageLoadedSubject=new $t,this.resultViewed=!1,this.setTrackingDeactivated=t=>{"rejected"===t.status&&(this.trackingDeactivated=!0)},this.blockTitle="Recommended products",this.imageRatio=1,this.imageWidth=300,this.productId=void 0,this.token=void 0,this.currencySign="€",this.pricePrefix="",this.mode="continuity",this.campaignType="VPR",this.locale="de-DE",this.campaigns="",this.color="",this.gridArrowsDynamic=!1,this.noResultText="",this.noResultShow=!0,this.showScroll=!0,this.cssUrl=null,this.excluded="",this.productDetailNewTab=!1,this.addToBasketShow=!1,this.updateButtonLocation="topAndItem",this.apiPath="https://api.vviinn.com",this.useCarousel=!0,this.showingInButton=!1,this.buttonElementId=void 0,this.closed=void 0,this.opened=void 0,this.recommendations=[],this.trackingDeactivated=!1,this.hasErrorOnLoad=!1,this.updatingAllCards=!1}getBasicEventData(){return{widgetType:"VPR",campaignTypeId:this.campaignType,campaignTypeName:V[this.campaignType],widgetId:this.id,widgetVersion:$}}handleOpenLink(t,i){if(this.productDetailNewTab||i.ctrlKey||i.metaKey){let i=window.open();i?i.location.href=t:window.location.href=t}else window.location.href=t}handleProductIdChange(){this.getRecommendations()}handleCampaignTypeChange(){this.getRecommendations()}handleCampaignsChange(){this.getRecommendations()}handleApiPathChange(t){v.apiPath=t,this.getRecommendations()}trackWidgetOpen(){this.opened&&(this.vviinnWidgetOpen.emit(this.getBasicEventData()),this.trackWidgetEvent("open"))}trackWidgetClose(){this.closed&&(this.vviinnWidgetClose.emit(this.getBasicEventData()),this.trackWidgetEvent("close"))}componentDidRender(){if(this.showingInButton&&this.closed)return;const t=this.el.querySelectorAll("[slot]");this.globalSlotsChanged.emit(Array.from(t))}connectedCallback(){var t;v.apiPath=this.apiPath,v.pricePrefix=this.pricePrefix,v.currencySign=this.currencySign,v.locale=this.locale,this.id=null!==(t=this.buttonElementId)&&void 0!==t?t:this.el.id,this.uiSessionId=z(),this.trackingApi=L(this.apiPath,this.token),this.getRecommendations(),this.vviinnWidgetLoad.emit(this.getBasicEventData()),this.trackWidgetEvent("load")}async componentWillLoad(){await S.init({lng:this.locale,fallbackLng:"de-DE",resources:Ut}),this.excluded&&(this.excluded=T(this.excluded))}trackProductLoad({detail:t}){this.productImageLoadedSubject.next(t.productId);const i=this.getProductTrackEvent(t,"load");i&&this.trackingApi.trackEvent(i).then(this.setTrackingDeactivated)}trackProductView({detail:t}){this.resultViewed||(this.resultViewed=!0,this.vviinnResultView.emit(this.getBasicEventData()),this.trackResultEvent("view"));const i=this.getProductTrackEvent(t,"view");i&&this.trackingApi.trackEvent(i).then(this.setTrackingDeactivated)}async trackProductClick({detail:t}){const{productId:i,clickEvent:s}=t,e=this.recommendations.find((t=>t.productId===i));if(!e||!e.deeplink)return;const n=this.getProductTrackEvent(t,"click");this.trackingDeactivated?this.handleOpenLink(e.deeplink,s):await this.trackingApi.trackEvent(n).then(this.setTrackingDeactivated).finally((()=>{this.handleOpenLink(e.deeplink,s)}))}async trackAuxClick({detail:t}){const{productId:i}=t,s=this.recommendations.find((t=>t.productId===i));if(!s||!s.deeplink)return;const e=this.getProductTrackEvent(t,"click");this.trackingDeactivated||await this.trackingApi.trackEvent(e).then(this.setTrackingDeactivated)}async trackAddToBasket({detail:t}){const{productRank:i,productId:s}=t,e=Gt(t,["productRank","productId","campaignTypeId","widgetType"]);let n;const r=Object.assign({session_id:this.uiSessionId,rank:i,product:s},e);"VCS"===this.campaignType?n=B(r):"VPR"===this.campaignType&&(n=N(r)),this.trackingApi.trackEvent(n).then(this.setTrackingDeactivated)}updatingAllCardsFinishedListener(){this.updatingAllCards&&(this.updatingAllCards=!1)}trackWidgetEvent(t){if(this.trackingDeactivated)return;const i=this.getBasicEventData(),s=Gt(i,["campaignTypeId","widgetType"]);let e;const n=Object.assign({action:t,session_id:this.uiSessionId},s);"VCS"===this.campaignType?e=D(n):"VPR"===this.campaignType&&(e=M(n)),this.trackingApi.trackEvent(e).then(this.setTrackingDeactivated)}trackResultEvent(t){if(this.trackingDeactivated)return;const i=this.getBasicEventData(),s=Gt(i,["campaignTypeId","widgetType"]);let e;const n=Object.assign({session_id:this.uiSessionId},s);"VCS"===this.campaignType?e=F(t)(n):"VPR"===this.campaignType&&(e=U(t)(n)),this.trackingApi.trackEvent(e).then(this.setTrackingDeactivated)}getProductTrackEvent(t,i){if(this.trackingDeactivated)return null;const{productRank:s,productId:e,campaignTypeId:n}=t,r=Gt(t,["productRank","productId","campaignTypeId","widgetType","clickEvent"]);let o;const a=Object.assign({session_id:this.uiSessionId,rank:s,product:e},r);return"VCS"===n?o=G(i)(a):"VPR"===n&&(o=q(i)(a)),o}async getRecommendations(){if(void 0===this.productId||void 0===this.token)return;const t=this.campaignType.length>0?this.campaignType:"VPR",i=Lt(this.token),s=c.pipe(P.of((t=>c.pipe(j(t),O((()=>Mt),(()=>Ft))))(t)),P.ap(P.of(this.productId)),P.ap(P.of(this.color)),P.ap(P.of(this.excluded)),P.ap(P.of(R(this.campaigns))),P.ap(P.of(i)),P.flatten),e=await s();c.pipe(e,u.fold((t=>{this.handleError(t),this.vviinnNoResult.emit(this.getBasicEventData()),this.vviinnRecommendationsLoaded.emit()}),(t=>this.handleRecommendationsSuccess(t))))}handleError(t){this.hasErrorOnLoad=!0}handleRecommendationsSuccess(t){var i;this.vviinnResultLoad.emit(this.getBasicEventData()),this.trackResultEvent("load"),this.recommendations=null!==(i=null==t?void 0:t.extended)&&void 0!==i?i:t,p.results=this.recommendations,this.productIds=this.recommendations.map((t=>t.productId)),this.productImageLoadedSubject.subscribe((t=>{this.productIds=this.productIds.filter((i=>i!==t)),0===this.productIds.length&&this.vviinnRecommendationsLoaded.emit()}))}isExternalCSS(){return this.cssUrl&&this.cssUrl.length>0}renderExternalCSS(){return this.isExternalCSS()?i("link",{href:this.cssUrl,rel:"stylesheet"}):""}render(){return 0===this.recommendations.length&&!1===this.noResultShow?null:i(s,{class:{loaded:!0,empty:0==this.recommendations.length,["set"===this.mode?"grid":this.mode]:!0},"aria-hidden":"false"},this.addToBasketShow&&i(W,null),i(r,null,this.renderExternalCSS(),i("style",null,v.fallbackStyles),i("div",{class:"title-container"},i("h2",{part:"recommendations-title"},this.blockTitle),"set"===this.mode&&"onItem"!==this.updateButtonLocation?i("button",{class:"update-button",part:"update-button-top",onClick:()=>this.updatingAllCards=!0},i("slot",{name:"vviinn-update-icon-top"},i(_,null))):null),this.recommendations.length>0&&(this.useCarousel?this.renderCarousel():this.renderResults()),0===this.recommendations.length&&this.hasErrorOnLoad&&i("p",{class:"no-result-text"},this.noResultText.length?this.noResultText:S.t("noResultText"))))}renderRecommendation(t,s){return i("vviinn-product-card",{part:"product-part",productId:t.productId,productTitle:t.title,productType:t.productType,deeplink:t.deeplink,image:t.image.thumbnail,brand:t.brand,imageWidth:this.imageWidth,imageRatio:1,price:t.price.actual,salePrice:t.price.sale,responsive:"grid"===this.mode||"set"===this.mode,addToBasketShow:this.addToBasketShow,mode:this.mode,dimmedBackground:this.useDimmedBackgroundInCard(),campaignTypeId:this.campaignType,index:s,widgetElementId:this.id,widgetVersion:$})}useDimmedBackgroundInCard(){return"continuity"===this.mode||!this.useCarousel}renderResults(){return i("div",{class:"recommendations-grid",part:"recommendations-grid"},this.recommendations.map(((t,i)=>this.renderRecommendation(t,i))))}renderCarousel(){return i("vviinn-carousel",{mode:this.mode,campaignTypeId:this.campaignType,imageWidth:this.imageWidth,showScroll:this.showScroll,recommendations:this.recommendations,widgetElementId:this.id,widgetVersion:$,gridArrowsDynamic:this.gridArrowsDynamic,addToBasketShow:this.addToBasketShow,updatingAllCards:this.updatingAllCards,updateButtonLocation:this.updateButtonLocation})}get el(){return e(this)}static get watchers(){return{productId:["handleProductIdChange"],campaignType:["handleCampaignTypeChange"],campaigns:["handleCampaignsChange"],apiPath:["handleApiPathChange"],opened:["trackWidgetOpen"],closed:["trackWidgetClose"]}}};qt.style=":host{display:grid;grid-gap:1rem;width:100%}:host(:not(.loaded)){position:absolute;visibility:hidden}:host(.grid) vviinn-product-card::part(image){border:1px solid #dddddd;width:100%}.title-container{display:flex;justify-content:space-between;align-items:center}.update-button{display:flex;align-items:center;justify-content:center;width:40px;height:40px;background:rgb(244, 244, 244);border:none;color:white;cursor:pointer}.update-button:hover{background:rgb(234, 234, 234)}.update-button svg{color:#6f6f6f}h2{margin:0}vviinn-product-card::part(price-container){align-self:flex-start;text-align:left;display:flex}.results{display:grid;grid-gap:1rem}.no-result-text{font-size:20px}.visually-hidden{position:absolute;top:0;left:0;z-index:-1;height:0;width:0}h2{margin:0}:host(.grid) h2{justify-content:center}:host(.grid) vviinn-product-card::part(image){min-width:100%}:host(.grid) vviinn-product-card::part(image-link){width:100%}:host(.grid) vviinn-product-card::part(title),:host(.grid) vviinn-product-card::part(brand),:host(.grid) vviinn-product-card::part(type){text-align:center}:host(.grid) vviinn-product-card::part(price-container){align-self:center}:host(.continuity) vviinn-product-card::part(title),:host(.continuity) vviinn-product-card::part(brand),:host(.continuity) vviinn-product-card::part(type),:host(.continuity) vviinn-product-card::part(deeplink){text-align:left;max-width:unset;align-self:start}";export{K as vviinn_carousel,at as vviinn_product_card,ht as vviinn_skeleton,qt as vviinn_vpr_widget}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{r as t,c as i,h as e,H as n,g as s}from"./p-1e83e6ba.js";import{i as r,a as o,O as a,r as h,u as c,v as l,w as d,x as p,y as u,z as v,B as f,E as m,C as b,o as g,n as w,D as x,F as y,G as k,H as M,N as C}from"./p-987a8e9f.js";import{i as j}from"./p-2e76a5c3.js";import{W as z,M as O,P as E,R as N,S as D,A as S}from"./p-7f19baa1.js";import{s as T,c as A}from"./p-c8ef8d6c.js";const B=(t,i)=>{var e;if(!t)return"";const n={};return t.href.split("?")[1].split("included[]=").join("").split("&").forEach((t=>{const[i,e]=t.split("%3A");n[i]=e})),"categories"===i?null!==(e=n.product_type)&&void 0!==e?e:n.google_product_category:n[i]},F=class{constructor(e){t(this,e),this.vviinnSelectFilter=i(this,"vviinnSelectFilter",7),this.filterType=this.filter.name,this.filter=null,this.basicEventData=void 0,this.selectedFilter="",this.hideFilters=!0}isCategoriesFilterType(){return"categories"===this.filterType}getFilterKind(){return this.isCategoriesFilterType()?"category":this.filterType}handleFilterSelection(t){return this.isFilterSelected(t)?this.clearSelectedFilter(t):this.selectFilter(t)}selectFilter(t){r.activeIonLink=t,this.selectedFilter=B(t,this.filterType),this.vviinnSelectFilter.emit(Object.assign(Object.assign({},this.basicEventData),{action:"select",kind:this.getFilterKind()}))}clearSelectedFilter(t){r.activeIonLink=t.clear,this.selectedFilter=B(t.clear,this.filterType),this.vviinnSelectFilter.emit(Object.assign(Object.assign({},this.basicEventData),{action:"deselect",kind:this.getFilterKind()}))}toggleFilters(){this.hideFilters=!this.hideFilters}handleEnter(t,i){"Enter"===t.key&&this.handleFilterSelection(i)}isFilterSelected(t){return this.isCategoriesFilterType()?this.selectedFilter===B(t,"categories"):this.selectedFilter===t.name}render(){if(!this.filter)return null;const{name:t,filters:i}=this.filter;return e(n,{exportparts:"filter, show-more-filters"},e("div",{class:{filters:!0,"no-scrollbar-mobile":this.isCategoriesFilterType(),"no-scrollbar":!this.isCategoriesFilterType()}},i.filter(((t,i)=>!this.hideFilters||i<5)).map(((i,n)=>{const s="categories"===t?this.selectedFilter===B(i,"categories"):this.selectedFilter===i.name;return e("div",{role:"button",tabindex:"0",key:n,part:s?"filter active":"filter",class:{filter:!0,active:s},style:{"animation-delay":10*n+"ms"},onPointerUp:t=>{r.loading||(t.stopPropagation(),this.handleFilterSelection(i))},onKeyPress:t=>{r.loading||this.handleEnter(t,i)}},i.name)})),this.hideFilters&&e("div",{class:{"show-more":!0,hidden:i.length<=5,active:!this.hideFilters},role:"button",tabindex:"0","aria-role":"button",onClick:()=>{setTimeout((()=>this.toggleFilters()),300)},onKeyPress:t=>{"Enter"===t.key&&this.toggleFilters()},part:"show-more-filters"})))}get el(){return s(this)}};F.style=".filters{display:flex;flex-direction:row;overflow-x:auto;padding-left:24px;padding-right:12px;margin-bottom:12px}.filter{align-items:center;color:#525252;cursor:pointer;display:flex;margin-right:12px;height:-moz-max-content;height:max-content;min-width:-moz-max-content;min-width:max-content;transition-property:background;transition-duration:0.5s;transition-timing-function:ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:10px 12px}.show-more{display:flex}.show-more.hidden{display:none !important}.show-more::after{position:relative;content:url(\"data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 12.2l-6-6L3.2 5 8 9.8 12.8 5 14 6.2l-6 6z' fill='%23525252'/%3E%3C/svg%3E\");display:block;transform:rotate(-90deg);left:2px}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}@media (max-width: 640px){.no-scrollbar-mobile{-ms-overflow-style:none;scrollbar-width:none}.no-scrollbar-mobile::-webkit-scrollbar{display:none}}";const W=class{constructor(e){t(this,e),this.vviinnSelectObject=i(this,"vviinnSelectObject",7),this.detectedObject=void 0,this.basicEventData=void 0,this.position=["0","0"]}getObjectPosition(){return o.pipe(r.imageBounds,a.map((t=>{const i=h(c(this.detectedObject).rectangle),{x:e,y:n}=o.pipe(i,l(t),d);return[`${e}px`,`${n}px`]})),a.getOrElse((()=>["0","0"])))}selectDetectedObject(){o.pipe(r.imageBounds,a.map((t=>{const i=c(this.detectedObject).rectangle,e=h(i),n=l(t)(e);r.detectedObject=this.detectedObject,r.searchArea=a.some(n)}))),p(),this.vviinnSelectObject.emit(Object.assign(Object.assign({},this.basicEventData),{detectedObject:this.detectedObject}))}isActive(){if(!this.detectedObject)return!1;if(!r.detectedObject)return!1;const t=c(this.detectedObject),i=c(r.detectedObject);return u.equals(t,i)}render(){return e(n,{class:{active:this.isActive()},onClick:()=>this.selectDetectedObject(),style:{"--x-position":this.getObjectPosition()[0],"--y-position":this.getObjectPosition()[1]}})}};W.style=':host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{display:block;position:absolute;left:calc(var(--x-position));top:calc(var(--y-position))}:host::before,:host::after{content:"";cursor:pointer;position:absolute;height:var(--size);width:var(--size);left:calc(-1 * var(--size) / 2);top:calc(-1 * var(--size) / 2)}:host::before{--size:36px;border-radius:50%;z-index:0;background:rgba(0, 0, 0, 0.16);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform 0.07s ease-in-out}:host::after{--size:13px;border-radius:50%;z-index:1;background:white;box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.15);transition:transform 0.07s ease-in-out}:host(.active)::before{transform:scale(0.88);background:rgba(0, 0, 0, 0.4)}:host(.active)::after{transform:scale(0.67)}@media (min-width: 768px){:host(:not(.active):hover)::before{transform:scale(1.08);background:rgba(0, 0, 0, 0.32)}}';const _=class{constructor(i){t(this,i),this.handler=void 0}render(){return e(n,null,e("vviinn-error",null,e(z,null),e("h4",{slot:"title"},j.t("emptyResultsBlock.title")),e("button",{slot:"action",onClick:this.handler},j.t("emptyResultsBlock.button"))))}},R=class{constructor(e){t(this,e),this.vviinnImageUpload=i(this,"vviinnImageUpload",7),this.vviinnNoResult=i(this,"vviinnNoResult",7),this.vviinnImageUploadFinished=i(this,"vviinnImageUploadFinished",7),this.vviinnCameraEnabled=i(this,"vviinnCameraEnabled",7),this.videoTrack=null,this.initializeZoom=async()=>{if(!this.videoTrack)return;const t=this.videoTrack.getCapabilities();"zoom"in t&&(this.zoomCapabilities=t.zoom,await this.videoTrack.applyConstraints({advanced:[{zoom:this.zoomCapabilities.min}]}))},this.onZoom=async t=>{var i;if(!this.videoTrack||!this.zoomCapabilities)return;const e=null!==(i=this.videoTrack.getSettings().zoom)&&void 0!==i?i:this.zoomCapabilities.min,n=(this.zoomCapabilities.max-this.zoomCapabilities.min)/3;let s;s="in"===t?e+n:e-n,await this.videoTrack.applyConstraints({advanced:[{zoom:s}]})},this.exampleImageSource=void 0,this.width=0,this.height=0,this.basicEventData=void 0,this.srcObject=void 0,this.cameraButtonClicked=!1,this.selected=!1,this.videoInitialized=!1,this.zoomCapabilities=null}componentDidLoad(){this.videoElement=this.el.shadowRoot.getElementById("camera-preview")}createPlaceholderImageCanvas(){const t=this.el.shadowRoot.getElementById("captured-image-placeholder"),i=this.videoElement,{videoWidth:e,videoHeight:n}=i,s=document.createElement("canvas");s.width=e,s.height=n,s.getContext("2d").drawImage(i,0,0,s.width,s.height);const r=s.toDataURL("image/jpeg");t.src=r}async selectImage(){if(!this.srcObject)return;let t;this.vviinnImageUpload.emit(this.basicEventData);const i=this.el.shadowRoot.getElementById("photo-frame"),e=this.videoElement,n=i.getBoundingClientRect(),s=e.getBoundingClientRect(),{videoWidth:r,videoHeight:a}=e,h=document.createElement("canvas");this.selected=!0,this.videoElement.pause(),this.createPlaceholderImageCanvas();const c=r/s.width,l=a/s.height,d=Math.min(n.width*c,n.height*l);h.width=d,h.height=d;const p=(n.left-s.left+(n.width-d/c)/2)*c,u=(n.top-s.top+(n.height-d/l)/2)*l;h.getContext("2d").drawImage(e,p,u,d,d,0,0,h.width,h.height);const b=h.toDataURL("image/jpeg");t=await v(b),o.pipe(await f(t),m.match((()=>this.vviinnNoResult.emit(this.basicEventData)),(()=>this.vviinnImageUploadFinished.emit()))),this.selected=!1,this.videoInitialized=!1,this.vviinnCameraEnabled.emit(!1)}handleKeyPress({key:t}){"Enter"!==t&&" "!==t||this.selectImage()}handleSrcObjectChange(){this.srcObject?(this.videoElement.srcObject=this.srcObject,this.videoTrack=this.srcObject.getVideoTracks()[0],this.initializeZoom(),this.videoElement.onloadedmetadata=()=>{this.vviinnCameraEnabled.emit(!0),this.videoInitialized=!0}):this.videoInitialized=!1}render(){return e(n,{onKeyUp:t=>this.handleKeyPress(t),class:{"video-expanded":this.cameraButtonClicked}},e("video",{id:"camera-preview",class:{hidden:!this.videoInitialized||this.selected},autoplay:!0,playsinline:!0,muted:!0}),e("img",{src:this.exampleImageSource,width:this.width,height:this.height,tabindex:1,class:{hidden:this.videoInitialized||this.selected}}),e("img",{id:"captured-image-placeholder",class:{hidden:!this.selected}}),e("div",{class:"container",id:"container"},e("div",{class:{hidden:!this.videoInitialized},id:"photo-frame"}),this.zoomCapabilities&&this.videoInitialized&&e("div",{class:"buttons-group zoom-buttons"},e("button",{onClick:()=>this.onZoom("out")},e(O,null)),e("button",{onClick:()=>this.onZoom("in")},e(E,null))),e("div",{class:"buttons-group"},e("button",{class:{"photo-button":!0,visible:this.videoInitialized},onClick:()=>this.selectImage()},e(N,null)))))}get el(){return s(this)}static get watchers(){return{srcObject:["handleSrcObjectChange"]}}};R.style=":host{display:block;width:100%;height:100%;min-height:0;position:relative;overflow:hidden;flex-grow:1;transition:min-height 1s}:host(.video-expanded){min-height:100%;transition:min-height 0.8s}img{width:100%;height:100%;min-height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}#camera-preview{width:100%;min-height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;position:relative}#captured-image-placeholder{height:auto}.container{position:absolute;width:100%;height:96%;left:0;top:0;display:flex;flex-direction:column;padding:56px 25px 0 25px;justify-content:space-around;align-content:center;box-sizing:border-box}@media (min-width: 768px){.container{padding:56px 40px 0 40px}}#photo-frame{position:relative;aspect-ratio:1/1;border:1px solid white;border-radius:10px;background-color:transparent;box-shadow:0 0 0 100vmax rgba(0, 0, 0, 0.32);width:100%;max-width:580px;margin:0 auto}.buttons-group{width:100%;left:0;display:flex;align-items:center}.photo-button{display:none;cursor:pointer;border:none;position:relative;z-index:1;padding:0;color:#6f6f6f;background-color:transparent;-webkit-tap-highlight-color:transparent;line-height:0;margin:0 auto}.zoom-buttons{bottom:168px;justify-content:center;gap:12px}.zoom-buttons button{display:flex;width:48px;height:48px;padding:8px;justify-content:center;align-items:center;border-radius:var(--radius-radius-md, 8px);background:rgba(0, 0, 0, 0.25);border:none;cursor:pointer}.hidden{display:none}.visible{display:flex}";const I=class{constructor(e){t(this,e),this.vviinnImageUpload=i(this,"vviinnImageUpload",7),this.vviinnNoResult=i(this,"vviinnNoResult",7),this.vviinnImageUploadFinished=i(this,"vviinnImageUploadFinished",7),this.basicEventData=void 0,this.startUpload=void 0,this.loading=!1,this.accept="image",this.resetVpsButton=void 0,this.capture=void 0}async handleInputChange(t){this.vviinnImageUpload.emit(this.basicEventData);const i=t.target,e=await f(i.files[0]);o.pipe(e,b((({kind:t})=>this.vviinnNoResult.emit(Object.assign(Object.assign({},this.basicEventData),{reason:t}))),(()=>this.vviinnImageUploadFinished.emit()))),i.value=null}startUploadWatcher(t){t&&(this.fileInput.click(),this.resetVpsButton())}render(){return e(n,{exportparts:"button"},this.loading?e("vviinn-preloader",null):e("label",{htmlFor:"fileInput",part:"button"},e("slot",{name:"upload-button-text"},"Upload image")),e("input",{id:"fileInput",class:"visually-hidden",type:"file",capture:this.capture,accept:"image"===this.accept?"image/*":"application/octet-stream",onChange:t=>this.handleInputChange(t),ref:t=>this.fileInput=t}))}static get watchers(){return{startUpload:["startUploadWatcher"]}}};I.style=".visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}label{cursor:pointer;display:grid;width:100%;height:100%;transition:background 0.1s ease-in-out}";var P=g((function(t){
|
|
1
|
+
import{r as t,c as i,h as e,H as n,g as s}from"./p-1e83e6ba.js";import{i as r,a as o,O as a,r as h,u as c,v as l,w as d,x as p,y as u,z as v,B as f,E as m,C as b,o as g,n as w,D as x,F as y,G as k,H as M,N as C}from"./p-987a8e9f.js";import{i as j}from"./p-2e76a5c3.js";import{W as z,M as O,P as E,R as N,S as A,A as D}from"./p-7f19baa1.js";import{s as S,c as T}from"./p-c8ef8d6c.js";const B=(t,i)=>{var e;if(!t)return"";const n={};return t.href.split("?")[1].split("included[]=").join("").split("&").forEach((t=>{const[i,e]=t.split("%3A");n[i]=e})),"categories"===i?null!==(e=n.product_type)&&void 0!==e?e:n.google_product_category:n[i]},_=class{constructor(e){t(this,e),this.vviinnSelectFilter=i(this,"vviinnSelectFilter",7),this.filterType=this.filter.name,this.filter=null,this.basicEventData=void 0,this.selectedFilter="",this.hideFilters=!0}isCategoriesFilterType(){return"categories"===this.filterType}getFilterKind(){return this.isCategoriesFilterType()?"category":this.filterType}handleFilterSelection(t){return this.isFilterSelected(t)?this.clearSelectedFilter(t):this.selectFilter(t)}selectFilter(t){r.activeIonLink=t,this.selectedFilter=B(t,this.filterType),this.vviinnSelectFilter.emit(Object.assign(Object.assign({},this.basicEventData),{action:"select",kind:this.getFilterKind()}))}clearSelectedFilter(t){r.activeIonLink=t.clear,this.selectedFilter=B(t.clear,this.filterType),this.vviinnSelectFilter.emit(Object.assign(Object.assign({},this.basicEventData),{action:"deselect",kind:this.getFilterKind()}))}toggleFilters(){this.hideFilters=!this.hideFilters}handleEnter(t,i){"Enter"===t.key&&this.handleFilterSelection(i)}isFilterSelected(t){return this.isCategoriesFilterType()?this.selectedFilter===B(t,"categories"):this.selectedFilter===t.name}render(){if(!this.filter)return null;const{name:t,filters:i}=this.filter;return e(n,{exportparts:"filter, show-more-filters"},e("div",{class:{filters:!0,"no-scrollbar-mobile":this.isCategoriesFilterType(),"no-scrollbar":!this.isCategoriesFilterType()}},i.filter(((t,i)=>!this.hideFilters||i<5)).map(((i,n)=>{const s="categories"===t?this.selectedFilter===B(i,"categories"):this.selectedFilter===i.name;return e("div",{role:"button",tabindex:"0",key:n,part:s?"filter active":"filter",class:{filter:!0,active:s},style:{"animation-delay":10*n+"ms"},onPointerUp:t=>{r.loading||(t.stopPropagation(),this.handleFilterSelection(i))},onKeyPress:t=>{r.loading||this.handleEnter(t,i)}},i.name)})),this.hideFilters&&e("div",{class:{"show-more":!0,hidden:i.length<=5,active:!this.hideFilters},role:"button",tabindex:"0","aria-role":"button",onClick:()=>{setTimeout((()=>this.toggleFilters()),300)},onKeyPress:t=>{"Enter"===t.key&&this.toggleFilters()},part:"show-more-filters"})))}get el(){return s(this)}};_.style=".filters{display:flex;flex-direction:row;overflow-x:auto;padding:0 12px 12px 24px}.filter{align-items:center;color:#525252;cursor:pointer;display:flex;margin-right:12px;height:-moz-max-content;height:max-content;min-width:-moz-max-content;min-width:max-content;transition-property:background;transition-duration:0.5s;transition-timing-function:ease-in-out;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:10px 12px}.show-more{display:flex}.show-more.hidden{display:none !important}.show-more::after{position:relative;content:url(\"data:image/svg+xml,%3Csvg width='16' height='16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 12.2l-6-6L3.2 5 8 9.8 12.8 5 14 6.2l-6 6z' fill='%23525252'/%3E%3C/svg%3E\");display:block;transform:rotate(-90deg);left:2px}.no-scrollbar::-webkit-scrollbar{display:none}.no-scrollbar{-ms-overflow-style:none;scrollbar-width:none}@media (max-width: 768px){.filters{padding-right:54px;padding-bottom:0}}@media (max-width: 640px){.no-scrollbar-mobile{-ms-overflow-style:none;scrollbar-width:none}.no-scrollbar-mobile::-webkit-scrollbar{display:none}}";const F=class{constructor(e){t(this,e),this.vviinnSelectObject=i(this,"vviinnSelectObject",7),this.detectedObject=void 0,this.basicEventData=void 0,this.position=["0","0"]}getObjectPosition(){return o.pipe(r.imageBounds,a.map((t=>{const i=h(c(this.detectedObject).rectangle),{x:e,y:n}=o.pipe(i,l(t),d);return[`${e}px`,`${n}px`]})),a.getOrElse((()=>["0","0"])))}selectDetectedObject(){o.pipe(r.imageBounds,a.map((t=>{const i=c(this.detectedObject).rectangle,e=h(i),n=l(t)(e);r.detectedObject=this.detectedObject,r.searchArea=a.some(n)}))),p(),this.vviinnSelectObject.emit(Object.assign(Object.assign({},this.basicEventData),{detectedObject:this.detectedObject}))}isActive(){if(!this.detectedObject)return!1;if(!r.detectedObject)return!1;const t=c(this.detectedObject),i=c(r.detectedObject);return u.equals(t,i)}render(){return e(n,{class:{active:this.isActive()},onClick:()=>this.selectDetectedObject(),style:{"--x-position":this.getObjectPosition()[0],"--y-position":this.getObjectPosition()[1]}})}};F.style=':host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{display:block;position:absolute;left:calc(var(--x-position));top:calc(var(--y-position));z-index:2}:host::before,:host::after{content:"";cursor:pointer;position:absolute;height:var(--size);width:var(--size);left:calc(-1 * var(--size) / 2);top:calc(-1 * var(--size) / 2)}:host::before{--size:36px;border-radius:50%;z-index:0;background:rgba(0, 0, 0, 0.16);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);transition:transform 0.07s ease-in-out}:host::after{--size:13px;border-radius:50%;z-index:1;background:white;box-shadow:0px 2px 2px 0px rgba(0, 0, 0, 0.15);transition:transform 0.07s ease-in-out}:host(.active)::before{transform:scale(0.88);background:rgba(0, 0, 0, 0.4)}:host(.active)::after{transform:scale(0.67)}@media (min-width: 768px){:host(:not(.active):hover)::before{transform:scale(1.08);background:rgba(0, 0, 0, 0.32)}}';const W=class{constructor(i){t(this,i),this.handler=void 0}render(){return e(n,null,e("vviinn-error",null,e(z,null),e("h4",{slot:"title"},j.t("emptyResultsBlock.title")),e("button",{slot:"action",onClick:this.handler},j.t("emptyResultsBlock.button"))))}},R=class{constructor(e){t(this,e),this.vviinnImageUpload=i(this,"vviinnImageUpload",7),this.vviinnNoResult=i(this,"vviinnNoResult",7),this.vviinnImageUploadFinished=i(this,"vviinnImageUploadFinished",7),this.vviinnCameraEnabled=i(this,"vviinnCameraEnabled",7),this.videoTrack=null,this.initializeZoom=async()=>{if(!this.videoTrack)return;const t=this.videoTrack.getCapabilities();"zoom"in t&&(this.zoomCapabilities=t.zoom,await this.videoTrack.applyConstraints({advanced:[{zoom:this.zoomCapabilities.min}]}))},this.onZoom=async t=>{var i;if(!this.videoTrack||!this.zoomCapabilities)return;const{max:e,min:n}=this.zoomCapabilities,s=null!==(i=this.videoTrack.getSettings().zoom)&&void 0!==i?i:n,r=Math.round((e-n)/3*10)/10;let o;o="in"===t?s+r:s-r,o<n&&(o=n),o>e&&(o=e),await this.videoTrack.applyConstraints({advanced:[{zoom:o}]})},this.exampleImageSource=void 0,this.width=0,this.height=0,this.basicEventData=void 0,this.srcObject=void 0,this.cameraButtonClicked=!1,this.selected=!1,this.videoInitialized=!1,this.zoomCapabilities=null}componentDidLoad(){this.videoElement=this.el.shadowRoot.getElementById("camera-preview")}createPlaceholderImageCanvas(){const t=this.el.shadowRoot.getElementById("captured-image-placeholder"),i=this.videoElement,{videoWidth:e,videoHeight:n}=i,s=document.createElement("canvas");s.width=e,s.height=n,s.getContext("2d").drawImage(i,0,0,s.width,s.height);const r=s.toDataURL("image/jpeg");t.src=r}async selectImage(){if(!this.srcObject)return;let t;this.vviinnImageUpload.emit(this.basicEventData);const i=this.el.shadowRoot.getElementById("photo-frame"),e=this.videoElement,n=i.getBoundingClientRect(),s=e.getBoundingClientRect(),{videoWidth:r,videoHeight:a}=e,h=document.createElement("canvas");this.selected=!0,this.videoElement.pause(),this.createPlaceholderImageCanvas();const c=r/s.width,l=a/s.height,d=Math.min(n.width*c,n.height*l);h.width=d,h.height=d;const p=(n.left-s.left+(n.width-d/c)/2)*c,u=(n.top-s.top+(n.height-d/l)/2)*l;h.getContext("2d").drawImage(e,p,u,d,d,0,0,h.width,h.height);const b=h.toDataURL("image/jpeg");t=await v(b),o.pipe(await f(t),m.match((()=>this.vviinnNoResult.emit(this.basicEventData)),(()=>this.vviinnImageUploadFinished.emit()))),this.selected=!1,this.videoInitialized=!1,this.vviinnCameraEnabled.emit(!1)}handleKeyPress({key:t}){"Enter"!==t&&" "!==t||this.selectImage()}handleSrcObjectChange(){this.srcObject?(this.videoElement.srcObject=this.srcObject,this.videoTrack=this.srcObject.getVideoTracks()[0],this.initializeZoom(),this.videoElement.onloadedmetadata=()=>{this.vviinnCameraEnabled.emit(!0),this.videoInitialized=!0}):this.videoInitialized=!1}render(){return e(n,{onKeyUp:t=>this.handleKeyPress(t),class:{"video-expanded":this.cameraButtonClicked}},e("video",{id:"camera-preview",class:{hidden:!this.videoInitialized||this.selected},autoplay:!0,playsinline:!0,muted:!0}),e("img",{src:this.exampleImageSource,width:this.width,height:this.height,tabindex:1,class:{hidden:this.videoInitialized||this.selected}}),e("img",{id:"captured-image-placeholder",class:{hidden:!this.selected}}),e("div",{class:"container",id:"container"},e("div",{class:{hidden:!this.videoInitialized},id:"photo-frame"}),this.zoomCapabilities&&this.videoInitialized&&e("div",{class:"buttons-group zoom-buttons"},e("button",{onClick:()=>this.onZoom("out")},e(O,null)),e("button",{onClick:()=>this.onZoom("in")},e(E,null))),e("div",{class:"buttons-group"},e("button",{class:{"photo-button":!0,visible:this.videoInitialized},onClick:()=>this.selectImage()},e(N,null)))))}get el(){return s(this)}static get watchers(){return{srcObject:["handleSrcObjectChange"]}}};R.style=":host{display:block;width:100%;height:100%;min-height:0;position:relative;overflow:hidden;flex-grow:1;transition:min-height 1s}:host(.video-expanded){min-height:100%;transition:min-height 0.8s}img{width:100%;height:100%;min-height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center}#camera-preview{width:100%;min-height:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;position:relative}#captured-image-placeholder{height:auto}.container{position:absolute;width:100%;height:96%;left:0;top:0;display:flex;flex-direction:column;padding:56px 25px 0 25px;justify-content:space-around;align-content:center;box-sizing:border-box}@media (min-width: 768px){.container{padding:56px 40px 0 40px}}#photo-frame{position:relative;aspect-ratio:1/1;border:1px solid white;border-radius:10px;background-color:transparent;box-shadow:0 0 0 100vmax rgba(0, 0, 0, 0.32);width:100%;max-width:580px;margin:0 auto}.buttons-group{width:100%;left:0;display:flex;align-items:center}.photo-button{display:none;cursor:pointer;border:none;position:relative;z-index:1;padding:0;color:#6f6f6f;background-color:transparent;-webkit-tap-highlight-color:transparent;line-height:0;margin:0 auto}.zoom-buttons{bottom:168px;justify-content:center;gap:12px}.zoom-buttons button{display:flex;width:48px;height:48px;padding:8px;justify-content:center;align-items:center;border-radius:var(--radius-radius-md, 8px);background:rgba(0, 0, 0, 0.25);border:none;cursor:pointer}.hidden{display:none}.visible{display:flex}";const I=class{constructor(e){t(this,e),this.vviinnImageUpload=i(this,"vviinnImageUpload",7),this.vviinnNoResult=i(this,"vviinnNoResult",7),this.vviinnImageUploadFinished=i(this,"vviinnImageUploadFinished",7),this.basicEventData=void 0,this.startUpload=void 0,this.loading=!1,this.accept="image",this.resetVpsButton=void 0,this.capture=void 0}async handleInputChange(t){this.vviinnImageUpload.emit(this.basicEventData);const i=t.target,e=await f(i.files[0]);o.pipe(e,b((({kind:t})=>this.vviinnNoResult.emit(Object.assign(Object.assign({},this.basicEventData),{reason:t}))),(()=>this.vviinnImageUploadFinished.emit()))),i.value=null}startUploadWatcher(t){t&&(this.fileInput.click(),this.resetVpsButton())}render(){return e(n,{exportparts:"button"},this.loading?e("vviinn-preloader",null):e("label",{htmlFor:"fileInput",part:"button"},e("slot",{name:"upload-button-text"},"Upload image")),e("input",{id:"fileInput",class:"visually-hidden",type:"file",capture:this.capture,accept:"image"===this.accept?"image/*":"application/octet-stream",onChange:t=>this.handleInputChange(t),ref:t=>this.fileInput=t}))}static get watchers(){return{startUpload:["startUploadWatcher"]}}};I.style=".visually-hidden{clip:rect(0 0 0 0);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}label{cursor:pointer;display:grid;width:100%;height:100%;transition:background 0.1s ease-in-out}";var P=g((function(t){
|
|
2
2
|
/*!
|
|
3
3
|
* Cropper.js v1.5.13
|
|
4
4
|
* https://fengyuanchen.github.io/cropperjs
|
|
@@ -8,4 +8,4 @@ import{r as t,c as i,h as e,H as n,g as s}from"./p-1e83e6ba.js";import{i as r,a
|
|
|
8
8
|
*
|
|
9
9
|
* Date: 2022-11-20T05:30:46.114Z
|
|
10
10
|
*/
|
|
11
|
-
t.exports=function(){function t(t,i){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);i&&(n=n.filter((function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable}))),e.push.apply(e,n)}return e}function i(i){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?t(Object(n),!0).forEach((function(t){s(i,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(n)):t(Object(n)).forEach((function(t){Object.defineProperty(i,t,Object.getOwnPropertyDescriptor(n,t))}))}return i}function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},e(t)}function n(t,i){for(var e=0;e<i.length;e++){var n=i[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function s(t,i,e){return i in t?Object.defineProperty(t,i,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[i]=e,t}function r(t){return function(t){if(Array.isArray(t))return o(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,i){if(t){if("string"==typeof t)return o(t,i);var e=Object.prototype.toString.call(t).slice(8,-1);return"Object"===e&&t.constructor&&(e=t.constructor.name),"Map"===e||"Set"===e?Array.from(t):"Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)?o(t,i):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(t,i){(null==i||i>t.length)&&(i=t.length);for(var e=0,n=new Array(i);e<i;e++)n[e]=t[e];return n}var a="undefined"!=typeof window&&void 0!==window.document,h=a?window:{},c=!(!a||!h.document.documentElement)&&"ontouchstart"in h.document.documentElement,l=!!a&&"PointerEvent"in h,d="cropper",p="all",u="crop",v="move",f="zoom",m="e",b="w",g="s",w="n",x="ne",y="nw",k="se",M="sw",C="".concat(d,"-crop"),j="".concat(d,"-disabled"),z="".concat(d,"-hidden"),O="".concat(d,"-hide"),E="".concat(d,"-invisible"),N="".concat(d,"-modal"),D="".concat(d,"-move"),S="".concat(d,"Action"),T="".concat(d,"Preview"),A="crop",B="move",F="none",W="crop",_="cropend",R="cropmove",I="cropstart",P="dblclick",Y=l?"pointerdown":c?"touchstart":"mousedown",L=l?"pointermove":c?"touchmove":"mousemove",X=l?"pointerup pointercancel":c?"touchend touchcancel":"mouseup",H="ready",U="resize",$="wheel",K="zoom",V="image/jpeg",q=/^e|w|s|n|se|sw|ne|nw|all|crop|move|zoom$/,Z=/^data:/,G=/^data:image\/jpeg;base64,/,J=/^img|canvas$/i,Q={viewMode:0,dragMode:A,initialAspectRatio:NaN,aspectRatio:NaN,data:null,preview:"",responsive:!0,restore:!0,checkCrossOrigin:!0,checkOrientation:!0,modal:!0,guides:!0,center:!0,highlight:!0,background:!0,autoCrop:!0,autoCropArea:.8,movable:!0,rotatable:!0,scalable:!0,zoomable:!0,zoomOnTouch:!0,zoomOnWheel:!0,wheelZoomRatio:.1,cropBoxMovable:!0,cropBoxResizable:!0,toggleDragModeOnDblclick:!0,minCanvasWidth:0,minCanvasHeight:0,minCropBoxWidth:0,minCropBoxHeight:0,minContainerWidth:200,minContainerHeight:100,ready:null,cropstart:null,cropmove:null,cropend:null,crop:null,zoom:null},tt=Number.isNaN||h.isNaN;function it(t){return"number"==typeof t&&!tt(t)}var et=function(t){return t>0&&t<1/0};function nt(t){return void 0===t}function st(t){return"object"===e(t)&&null!==t}var rt=Object.prototype.hasOwnProperty;function ot(t){if(!st(t))return!1;try{var i=t.constructor,e=i.prototype;return i&&e&&rt.call(e,"isPrototypeOf")}catch(t){return!1}}function at(t){return"function"==typeof t}var ht=Array.prototype.slice;function ct(t){return Array.from?Array.from(t):ht.call(t)}function lt(t,i){return t&&at(i)&&(Array.isArray(t)||it(t.length)?ct(t).forEach((function(e,n){i.call(t,e,n,t)})):st(t)&&Object.keys(t).forEach((function(e){i.call(t,t[e],e,t)}))),t}var dt=Object.assign||function(t){for(var i=arguments.length,e=new Array(i>1?i-1:0),n=1;n<i;n++)e[n-1]=arguments[n];return st(t)&&e.length>0&&e.forEach((function(i){st(i)&&Object.keys(i).forEach((function(e){t[e]=i[e]}))})),t},pt=/\.\d*(?:0|9){12}\d*$/;function ut(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1e11;return pt.test(t)?Math.round(t*i)/i:t}var vt=/^width|height|left|top|marginLeft|marginTop$/;function ft(t,i){var e=t.style;lt(i,(function(t,i){vt.test(i)&&it(t)&&(t="".concat(t,"px")),e[i]=t}))}function mt(t,i){if(i)if(it(t.length))lt(t,(function(t){mt(t,i)}));else if(t.classList)t.classList.add(i);else{var e=t.className.trim();e?e.indexOf(i)<0&&(t.className="".concat(e," ").concat(i)):t.className=i}}function bt(t,i){i&&(it(t.length)?lt(t,(function(t){bt(t,i)})):t.classList?t.classList.remove(i):t.className.indexOf(i)>=0&&(t.className=t.className.replace(i,"")))}function gt(t,i,e){i&&(it(t.length)?lt(t,(function(t){gt(t,i,e)})):e?mt(t,i):bt(t,i))}var wt=/([a-z\d])([A-Z])/g;function xt(t){return t.replace(wt,"$1-$2").toLowerCase()}function yt(t,i){return st(t[i])?t[i]:t.dataset?t.dataset[i]:t.getAttribute("data-".concat(xt(i)))}function kt(t,i,e){st(e)?t[i]=e:t.dataset?t.dataset[i]=e:t.setAttribute("data-".concat(xt(i)),e)}var Mt=/\s\s*/,Ct=function(){var t=!1;if(a){var i=!1,e=function(){},n=Object.defineProperty({},"once",{get:function(){return t=!0,i},set:function(t){i=t}});h.addEventListener("test",e,n),h.removeEventListener("test",e,n)}return t}();function jt(t,i,e){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},s=e;i.trim().split(Mt).forEach((function(i){if(!Ct){var r=t.listeners;r&&r[i]&&r[i][e]&&(s=r[i][e],delete r[i][e],0===Object.keys(r[i]).length&&delete r[i],0===Object.keys(r).length&&delete t.listeners)}t.removeEventListener(i,s,n)}))}function zt(t,i,e){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},s=e;i.trim().split(Mt).forEach((function(i){if(n.once&&!Ct){var r=t.listeners,o=void 0===r?{}:r;s=function(){delete o[i][e],t.removeEventListener(i,s,n);for(var r=arguments.length,a=new Array(r),h=0;h<r;h++)a[h]=arguments[h];e.apply(t,a)},o[i]||(o[i]={}),o[i][e]&&t.removeEventListener(i,o[i][e],n),o[i][e]=s,t.listeners=o}t.addEventListener(i,s,n)}))}function Ot(t,i,e){var n;return at(Event)&&at(CustomEvent)?n=new CustomEvent(i,{detail:e,bubbles:!0,cancelable:!0}):(n=document.createEvent("CustomEvent")).initCustomEvent(i,!0,!0,e),t.dispatchEvent(n)}function Et(t){var i=t.getBoundingClientRect();return{left:i.left+(window.pageXOffset-document.documentElement.clientLeft),top:i.top+(window.pageYOffset-document.documentElement.clientTop)}}var Nt=h.location,Dt=/^(\w+:)\/\/([^:/?#]*):?(\d*)/i;function St(t){var i=t.match(Dt);return null!==i&&(i[1]!==Nt.protocol||i[2]!==Nt.hostname||i[3]!==Nt.port)}function Tt(t){var i="timestamp=".concat((new Date).getTime());return t+(-1===t.indexOf("?")?"?":"&")+i}function At(t){var i=t.rotate,e=t.scaleX,n=t.scaleY,s=t.translateX,r=t.translateY,o=[];it(s)&&0!==s&&o.push("translateX(".concat(s,"px)")),it(r)&&0!==r&&o.push("translateY(".concat(r,"px)")),it(i)&&0!==i&&o.push("rotate(".concat(i,"deg)")),it(e)&&1!==e&&o.push("scaleX(".concat(e,")")),it(n)&&1!==n&&o.push("scaleY(".concat(n,")"));var a=o.length?o.join(" "):"none";return{WebkitTransform:a,msTransform:a,transform:a}}function Bt(t,e){var n=t.pageX,s=t.pageY,r={endX:n,endY:s};return e?r:i({startX:n,startY:s},r)}function Ft(t){var i=t.aspectRatio,e=t.height,n=t.width,s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"contain",r=et(n),o=et(e);if(r&&o){var a=e*i;"contain"===s&&a>n||"cover"===s&&a<n?e=n/i:n=e*i}else r?e=n/i:o&&(n=e*i);return{width:n,height:e}}var Wt=String.fromCharCode;var _t=/^data:.*,/;function Rt(t){var i,e=new DataView(t);try{var n,s,r;if(255===e.getUint8(0)&&216===e.getUint8(1))for(var o=e.byteLength,a=2;a+1<o;){if(255===e.getUint8(a)&&225===e.getUint8(a+1)){s=a;break}a+=1}if(s){var h=s+10;if("Exif"===function(t,i,e){var n="";e+=i;for(var s=i;s<e;s+=1)n+=Wt(t.getUint8(s));return n}(e,s+4,4)){var c=e.getUint16(h);if(((n=18761===c)||19789===c)&&42===e.getUint16(h+2,n)){var l=e.getUint32(h+4,n);l>=8&&(r=h+l)}}}if(r){var d,p,u=e.getUint16(r,n);for(p=0;p<u;p+=1)if(274===e.getUint16(d=r+12*p+2,n)){i=e.getUint16(d+=8,n),e.setUint16(d,1,n);break}}}catch(t){i=1}return i}var It={render:function(){this.initContainer(),this.initCanvas(),this.initCropBox(),this.renderCanvas(),this.cropped&&this.renderCropBox()},initContainer:function(){var t=this.element,i=this.options,e=this.container,n=this.cropper,s=Number(i.minContainerWidth),r=Number(i.minContainerHeight);mt(n,z),bt(t,z);var o={width:Math.max(e.offsetWidth,s>=0?s:200),height:Math.max(e.offsetHeight,r>=0?r:100)};this.containerData=o,ft(n,{width:o.width,height:o.height}),mt(t,z),bt(n,z)},initCanvas:function(){var t=this.containerData,i=this.imageData,e=this.options.viewMode,n=Math.abs(i.rotate)%180==90,s=n?i.naturalHeight:i.naturalWidth,r=n?i.naturalWidth:i.naturalHeight,o=s/r,a=t.width,h=t.height;t.height*o>t.width?3===e?a=t.height*o:h=t.width/o:3===e?h=t.width/o:a=t.height*o;var c={aspectRatio:o,naturalWidth:s,naturalHeight:r,width:a,height:h};this.canvasData=c,this.limited=1===e||2===e,this.limitCanvas(!0,!0),c.width=Math.min(Math.max(c.width,c.minWidth),c.maxWidth),c.height=Math.min(Math.max(c.height,c.minHeight),c.maxHeight),c.left=(t.width-c.width)/2,c.top=(t.height-c.height)/2,c.oldLeft=c.left,c.oldTop=c.top,this.initialCanvasData=dt({},c)},limitCanvas:function(t,i){var e=this.options,n=this.containerData,s=this.canvasData,r=this.cropBoxData,o=e.viewMode,a=s.aspectRatio,h=this.cropped&&r;if(t){var c=Number(e.minCanvasWidth)||0,l=Number(e.minCanvasHeight)||0;o>1?(c=Math.max(c,n.width),l=Math.max(l,n.height),3===o&&(l*a>c?c=l*a:l=c/a)):o>0&&(c?c=Math.max(c,h?r.width:0):l?l=Math.max(l,h?r.height:0):h&&((l=r.height)*a>(c=r.width)?c=l*a:l=c/a));var d=Ft({aspectRatio:a,width:c,height:l});l=d.height,s.minWidth=c=d.width,s.minHeight=l,s.maxWidth=1/0,s.maxHeight=1/0}if(i)if(o>(h?0:1)){var p=n.width-s.width,u=n.height-s.height;s.minLeft=Math.min(0,p),s.minTop=Math.min(0,u),s.maxLeft=Math.max(0,p),s.maxTop=Math.max(0,u),h&&this.limited&&(s.minLeft=Math.min(r.left,r.left+(r.width-s.width)),s.minTop=Math.min(r.top,r.top+(r.height-s.height)),s.maxLeft=r.left,s.maxTop=r.top,2===o&&(s.width>=n.width&&(s.minLeft=Math.min(0,p),s.maxLeft=Math.max(0,p)),s.height>=n.height&&(s.minTop=Math.min(0,u),s.maxTop=Math.max(0,u))))}else s.minLeft=-s.width,s.minTop=-s.height,s.maxLeft=n.width,s.maxTop=n.height},renderCanvas:function(t,i){var e=this.canvasData,n=this.imageData;if(i){var s=function(t){var i=t.width,e=t.height,n=t.degree;if(90==(n=Math.abs(n)%180))return{width:e,height:i};var s=n%90*Math.PI/180,r=Math.sin(s),o=Math.cos(s),a=i*o+e*r,h=i*r+e*o;return n>90?{width:h,height:a}:{width:a,height:h}}({width:n.naturalWidth*Math.abs(n.scaleX||1),height:n.naturalHeight*Math.abs(n.scaleY||1),degree:n.rotate||0}),r=s.width,o=s.height,a=e.width*(r/e.naturalWidth),h=e.height*(o/e.naturalHeight);e.left-=(a-e.width)/2,e.top-=(h-e.height)/2,e.width=a,e.height=h,e.aspectRatio=r/o,e.naturalWidth=r,e.naturalHeight=o,this.limitCanvas(!0,!1)}(e.width>e.maxWidth||e.width<e.minWidth)&&(e.left=e.oldLeft),(e.height>e.maxHeight||e.height<e.minHeight)&&(e.top=e.oldTop),e.width=Math.min(Math.max(e.width,e.minWidth),e.maxWidth),e.height=Math.min(Math.max(e.height,e.minHeight),e.maxHeight),this.limitCanvas(!1,!0),e.left=Math.min(Math.max(e.left,e.minLeft),e.maxLeft),e.top=Math.min(Math.max(e.top,e.minTop),e.maxTop),e.oldLeft=e.left,e.oldTop=e.top,ft(this.canvas,dt({width:e.width,height:e.height},At({translateX:e.left,translateY:e.top}))),this.renderImage(t),this.cropped&&this.limited&&this.limitCropBox(!0,!0)},renderImage:function(t){var i=this.canvasData,e=this.imageData,n=e.naturalWidth*(i.width/i.naturalWidth),s=e.naturalHeight*(i.height/i.naturalHeight);dt(e,{width:n,height:s,left:(i.width-n)/2,top:(i.height-s)/2}),ft(this.image,dt({width:e.width,height:e.height},At(dt({translateX:e.left,translateY:e.top},e)))),t&&this.output()},initCropBox:function(){var t=this.options,i=this.canvasData,e=t.aspectRatio||t.initialAspectRatio,n=Number(t.autoCropArea)||.8,s={width:i.width,height:i.height};e&&(i.height*e>i.width?s.height=s.width/e:s.width=s.height*e),this.cropBoxData=s,this.limitCropBox(!0,!0),s.width=Math.min(Math.max(s.width,s.minWidth),s.maxWidth),s.height=Math.min(Math.max(s.height,s.minHeight),s.maxHeight),s.width=Math.max(s.minWidth,s.width*n),s.height=Math.max(s.minHeight,s.height*n),s.left=i.left+(i.width-s.width)/2,s.top=i.top+(i.height-s.height)/2,s.oldLeft=s.left,s.oldTop=s.top,this.initialCropBoxData=dt({},s)},limitCropBox:function(t,i){var e=this.options,n=this.containerData,s=this.canvasData,r=this.cropBoxData,o=this.limited,a=e.aspectRatio;if(t){var h=Number(e.minCropBoxWidth)||0,c=Number(e.minCropBoxHeight)||0,l=o?Math.min(n.width,s.width,s.width+s.left,n.width-s.left):n.width,d=o?Math.min(n.height,s.height,s.height+s.top,n.height-s.top):n.height;h=Math.min(h,n.width),c=Math.min(c,n.height),a&&(h&&c?c*a>h?c=h/a:h=c*a:h?c=h/a:c&&(h=c*a),d*a>l?d=l/a:l=d*a),r.minWidth=Math.min(h,l),r.minHeight=Math.min(c,d),r.maxWidth=l,r.maxHeight=d}i&&(o?(r.minLeft=Math.max(0,s.left),r.minTop=Math.max(0,s.top),r.maxLeft=Math.min(n.width,s.left+s.width)-r.width,r.maxTop=Math.min(n.height,s.top+s.height)-r.height):(r.minLeft=0,r.minTop=0,r.maxLeft=n.width-r.width,r.maxTop=n.height-r.height))},renderCropBox:function(){var t=this.options,i=this.containerData,e=this.cropBoxData;(e.width>e.maxWidth||e.width<e.minWidth)&&(e.left=e.oldLeft),(e.height>e.maxHeight||e.height<e.minHeight)&&(e.top=e.oldTop),e.width=Math.min(Math.max(e.width,e.minWidth),e.maxWidth),e.height=Math.min(Math.max(e.height,e.minHeight),e.maxHeight),this.limitCropBox(!1,!0),e.left=Math.min(Math.max(e.left,e.minLeft),e.maxLeft),e.top=Math.min(Math.max(e.top,e.minTop),e.maxTop),e.oldLeft=e.left,e.oldTop=e.top,t.movable&&t.cropBoxMovable&&kt(this.face,S,e.width>=i.width&&e.height>=i.height?v:p),ft(this.cropBox,dt({width:e.width,height:e.height},At({translateX:e.left,translateY:e.top}))),this.cropped&&this.limited&&this.limitCanvas(!0,!0),this.disabled||this.output()},output:function(){this.preview(),Ot(this.element,W,this.getData())}},Pt={initPreview:function(){var t=this.element,i=this.crossOrigin,e=this.options.preview,n=i?this.crossOriginUrl:this.url,s=t.alt||"The image to preview",r=document.createElement("img");if(i&&(r.crossOrigin=i),r.src=n,r.alt=s,this.viewBox.appendChild(r),this.viewBoxImage=r,e){var o=e;"string"==typeof e?o=t.ownerDocument.querySelectorAll(e):e.querySelector&&(o=[e]),this.previews=o,lt(o,(function(t){var e=document.createElement("img");kt(t,T,{width:t.offsetWidth,height:t.offsetHeight,html:t.innerHTML}),i&&(e.crossOrigin=i),e.src=n,e.alt=s,e.style.cssText='display:block;width:100%;height:auto;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;image-orientation:0deg!important;"',t.innerHTML="",t.appendChild(e)}))}},resetPreview:function(){lt(this.previews,(function(t){var i=yt(t,T);ft(t,{width:i.width,height:i.height}),t.innerHTML=i.html,function(t,i){if(st(t[i]))try{delete t[i]}catch(e){t[i]=void 0}else if(t.dataset)try{delete t.dataset[i]}catch(e){t.dataset[i]=void 0}else t.removeAttribute("data-".concat(xt(i)))}(t,T)}))},preview:function(){var t=this.imageData,i=this.canvasData,e=this.cropBoxData,n=e.width,s=e.height,r=t.width,o=t.height,a=e.left-i.left-t.left,h=e.top-i.top-t.top;this.cropped&&!this.disabled&&(ft(this.viewBoxImage,dt({width:r,height:o},At(dt({translateX:-a,translateY:-h},t)))),lt(this.previews,(function(i){var e=yt(i,T),c=e.width,l=e.height,d=c,p=l,u=1;n&&(p=s*(u=c/n)),s&&p>l&&(d=n*(u=l/s),p=l),ft(i,{width:d,height:p}),ft(i.getElementsByTagName("img")[0],dt({width:r*u,height:o*u},At(dt({translateX:-a*u,translateY:-h*u},t))))})))}},Yt={bind:function(){var t=this.element,i=this.options,e=this.cropper;at(i.cropstart)&&zt(t,I,i.cropstart),at(i.cropmove)&&zt(t,R,i.cropmove),at(i.cropend)&&zt(t,_,i.cropend),at(i.crop)&&zt(t,W,i.crop),at(i.zoom)&&zt(t,K,i.zoom),zt(e,Y,this.onCropStart=this.cropStart.bind(this)),i.zoomable&&i.zoomOnWheel&&zt(e,$,this.onWheel=this.wheel.bind(this),{passive:!1,capture:!0}),i.toggleDragModeOnDblclick&&zt(e,P,this.onDblclick=this.dblclick.bind(this)),zt(t.ownerDocument,L,this.onCropMove=this.cropMove.bind(this)),zt(t.ownerDocument,X,this.onCropEnd=this.cropEnd.bind(this)),i.responsive&&zt(window,U,this.onResize=this.resize.bind(this))},unbind:function(){var t=this.element,i=this.options,e=this.cropper;at(i.cropstart)&&jt(t,I,i.cropstart),at(i.cropmove)&&jt(t,R,i.cropmove),at(i.cropend)&&jt(t,_,i.cropend),at(i.crop)&&jt(t,W,i.crop),at(i.zoom)&&jt(t,K,i.zoom),jt(e,Y,this.onCropStart),i.zoomable&&i.zoomOnWheel&&jt(e,$,this.onWheel,{passive:!1,capture:!0}),i.toggleDragModeOnDblclick&&jt(e,P,this.onDblclick),jt(t.ownerDocument,L,this.onCropMove),jt(t.ownerDocument,X,this.onCropEnd),i.responsive&&jt(window,U,this.onResize)}},Lt={resize:function(){if(!this.disabled){var t,i,e=this.options,n=this.container,s=this.containerData,r=n.offsetWidth/s.width,o=n.offsetHeight/s.height,a=Math.abs(r-1)>Math.abs(o-1)?r:o;1!==a&&(e.restore&&(t=this.getCanvasData(),i=this.getCropBoxData()),this.render(),e.restore&&(this.setCanvasData(lt(t,(function(i,e){t[e]=i*a}))),this.setCropBoxData(lt(i,(function(t,e){i[e]=t*a})))))}},dblclick:function(){var t,i;this.disabled||this.options.dragMode===F||this.setDragMode((i=C,((t=this.dragBox).classList?t.classList.contains(i):t.className.indexOf(i)>-1)?B:A))},wheel:function(t){var i=this,e=Number(this.options.wheelZoomRatio)||.1,n=1;this.disabled||(t.preventDefault(),this.wheeling||(this.wheeling=!0,setTimeout((function(){i.wheeling=!1}),50),t.deltaY?n=t.deltaY>0?1:-1:t.wheelDelta?n=-t.wheelDelta/120:t.detail&&(n=t.detail>0?1:-1),this.zoom(-n*e,t)))},cropStart:function(t){var i=t.buttons,e=t.button;if(!(this.disabled||("mousedown"===t.type||"pointerdown"===t.type&&"mouse"===t.pointerType)&&(it(i)&&1!==i||it(e)&&0!==e||t.ctrlKey))){var n,s=this.options,r=this.pointers;t.changedTouches?lt(t.changedTouches,(function(t){r[t.identifier]=Bt(t)})):r[t.pointerId||0]=Bt(t),n=Object.keys(r).length>1&&s.zoomable&&s.zoomOnTouch?f:yt(t.target,S),q.test(n)&&!1!==Ot(this.element,I,{originalEvent:t,action:n})&&(t.preventDefault(),this.action=n,this.cropping=!1,n===u&&(this.cropping=!0,mt(this.dragBox,N)))}},cropMove:function(t){var i=this.action;if(!this.disabled&&i){var e=this.pointers;t.preventDefault(),!1!==Ot(this.element,R,{originalEvent:t,action:i})&&(t.changedTouches?lt(t.changedTouches,(function(t){dt(e[t.identifier]||{},Bt(t,!0))})):dt(e[t.pointerId||0]||{},Bt(t,!0)),this.change(t))}},cropEnd:function(t){if(!this.disabled){var i=this.action,e=this.pointers;t.changedTouches?lt(t.changedTouches,(function(t){delete e[t.identifier]})):delete e[t.pointerId||0],i&&(t.preventDefault(),Object.keys(e).length||(this.action=""),this.cropping&&(this.cropping=!1,gt(this.dragBox,N,this.cropped&&this.options.modal)),Ot(this.element,_,{originalEvent:t,action:i}))}}},Xt={change:function(t){var e,n=this.canvasData,s=this.containerData,r=this.cropBoxData,o=this.pointers,a=this.action,h=this.options.aspectRatio,c=r.left,l=r.top,d=r.width,C=r.height,j=c+d,O=l+C,E=0,N=0,D=s.width,S=s.height,T=!0;!h&&t.shiftKey&&(h=d&&C?d/C:1),this.limited&&(N=r.minTop,D=(E=r.minLeft)+Math.min(s.width,n.width,n.left+n.width),S=N+Math.min(s.height,n.height,n.top+n.height));var A=o[Object.keys(o)[0]],B={x:A.endX-A.startX,y:A.endY-A.startY},F=function(t){switch(t){case m:j+B.x>D&&(B.x=D-j);break;case b:c+B.x<E&&(B.x=E-c);break;case w:l+B.y<N&&(B.y=N-l);break;case g:O+B.y>S&&(B.y=S-O)}};switch(a){case p:c+=B.x,l+=B.y;break;case m:if(B.x>=0&&(j>=D||h&&(l<=N||O>=S))){T=!1;break}F(m),(d+=B.x)<0&&(a=b,c-=d=-d),h&&(l+=(r.height-(C=d/h))/2);break;case w:if(B.y<=0&&(l<=N||h&&(c<=E||j>=D))){T=!1;break}F(w),l+=B.y,(C-=B.y)<0&&(a=g,l-=C=-C),h&&(c+=(r.width-(d=C*h))/2);break;case b:if(B.x<=0&&(c<=E||h&&(l<=N||O>=S))){T=!1;break}F(b),c+=B.x,(d-=B.x)<0&&(a=m,c-=d=-d),h&&(l+=(r.height-(C=d/h))/2);break;case g:if(B.y>=0&&(O>=S||h&&(c<=E||j>=D))){T=!1;break}F(g),(C+=B.y)<0&&(a=w,l-=C=-C),h&&(c+=(r.width-(d=C*h))/2);break;case x:if(h){if(B.y<=0&&(l<=N||j>=D)){T=!1;break}F(w),l+=B.y,d=(C-=B.y)*h}else F(w),F(m),B.x>=0?j<D?d+=B.x:B.y<=0&&l<=N&&(T=!1):d+=B.x,B.y<=0?l>N&&(C-=B.y,l+=B.y):(C-=B.y,l+=B.y);d<0&&C<0?(a=M,l-=C=-C,c-=d=-d):d<0?(a=y,c-=d=-d):C<0&&(a=k,l-=C=-C);break;case y:if(h){if(B.y<=0&&(l<=N||c<=E)){T=!1;break}F(w),l+=B.y,c+=r.width-(d=(C-=B.y)*h)}else F(w),F(b),B.x<=0?c>E?(d-=B.x,c+=B.x):B.y<=0&&l<=N&&(T=!1):(d-=B.x,c+=B.x),B.y<=0?l>N&&(C-=B.y,l+=B.y):(C-=B.y,l+=B.y);d<0&&C<0?(a=k,l-=C=-C,c-=d=-d):d<0?(a=x,c-=d=-d):C<0&&(a=M,l-=C=-C);break;case M:if(h){if(B.x<=0&&(c<=E||O>=S)){T=!1;break}F(b),c+=B.x,C=(d-=B.x)/h}else F(g),F(b),B.x<=0?c>E?(d-=B.x,c+=B.x):B.y>=0&&O>=S&&(T=!1):(d-=B.x,c+=B.x),B.y>=0?O<S&&(C+=B.y):C+=B.y;d<0&&C<0?(a=x,l-=C=-C,c-=d=-d):d<0?(a=k,c-=d=-d):C<0&&(a=y,l-=C=-C);break;case k:if(h){if(B.x>=0&&(j>=D||O>=S)){T=!1;break}F(m),C=(d+=B.x)/h}else F(g),F(m),B.x>=0?j<D?d+=B.x:B.y>=0&&O>=S&&(T=!1):d+=B.x,B.y>=0?O<S&&(C+=B.y):C+=B.y;d<0&&C<0?(a=y,l-=C=-C,c-=d=-d):d<0?(a=M,c-=d=-d):C<0&&(a=x,l-=C=-C);break;case v:this.move(B.x,B.y),T=!1;break;case f:this.zoom(function(t){var e=i({},t),n=0;return lt(t,(function(t,i){delete e[i],lt(e,(function(i){var e=Math.abs(t.startX-i.startX),s=Math.abs(t.startY-i.startY),r=Math.abs(t.endX-i.endX),o=Math.abs(t.endY-i.endY),a=Math.sqrt(e*e+s*s),h=(Math.sqrt(r*r+o*o)-a)/a;Math.abs(h)>Math.abs(n)&&(n=h)}))})),n}(o),t),T=!1;break;case u:if(!B.x||!B.y){T=!1;break}e=Et(this.cropper),c=A.startX-e.left,l=A.startY-e.top,d=r.minWidth,C=r.minHeight,B.x>0?a=B.y>0?k:x:B.x<0&&(c-=d,a=B.y>0?M:y),B.y<0&&(l-=C),this.cropped||(bt(this.cropBox,z),this.cropped=!0,this.limited&&this.limitCropBox(!0,!0))}T&&(r.width=d,r.height=C,r.left=c,r.top=l,this.action=a,this.renderCropBox()),lt(o,(function(t){t.startX=t.endX,t.startY=t.endY}))}},Ht={crop:function(){return!this.ready||this.cropped||this.disabled||(this.cropped=!0,this.limitCropBox(!0,!0),this.options.modal&&mt(this.dragBox,N),bt(this.cropBox,z),this.setCropBoxData(this.initialCropBoxData)),this},reset:function(){return this.ready&&!this.disabled&&(this.imageData=dt({},this.initialImageData),this.canvasData=dt({},this.initialCanvasData),this.cropBoxData=dt({},this.initialCropBoxData),this.renderCanvas(),this.cropped&&this.renderCropBox()),this},clear:function(){return this.cropped&&!this.disabled&&(dt(this.cropBoxData,{left:0,top:0,width:0,height:0}),this.cropped=!1,this.renderCropBox(),this.limitCanvas(!0,!0),this.renderCanvas(),bt(this.dragBox,N),mt(this.cropBox,z)),this},replace:function(t){var i=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return!this.disabled&&t&&(this.isImg&&(this.element.src=t),i?(this.url=t,this.image.src=t,this.ready&&(this.viewBoxImage.src=t,lt(this.previews,(function(i){i.getElementsByTagName("img")[0].src=t})))):(this.isImg&&(this.replaced=!0),this.options.data=null,this.uncreate(),this.load(t))),this},enable:function(){return this.ready&&this.disabled&&(this.disabled=!1,bt(this.cropper,j)),this},disable:function(){return this.ready&&!this.disabled&&(this.disabled=!0,mt(this.cropper,j)),this},destroy:function(){var t=this.element;return t[d]?(t[d]=void 0,this.isImg&&this.replaced&&(t.src=this.originalUrl),this.uncreate(),this):this},move:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t,e=this.canvasData,n=e.left,s=e.top;return this.moveTo(nt(t)?t:n+Number(t),nt(i)?i:s+Number(i))},moveTo:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t,e=this.canvasData,n=!1;return t=Number(t),i=Number(i),this.ready&&!this.disabled&&this.options.movable&&(it(t)&&(e.left=t,n=!0),it(i)&&(e.top=i,n=!0),n&&this.renderCanvas(!0)),this},zoom:function(t,i){var e=this.canvasData;return t=Number(t),this.zoomTo(e.width*(t=t<0?1/(1-t):1+t)/e.naturalWidth,null,i)},zoomTo:function(t,i,e){var n=this.options,s=this.canvasData,r=s.width,o=s.height,a=s.naturalWidth,h=s.naturalHeight;if((t=Number(t))>=0&&this.ready&&!this.disabled&&n.zoomable){var c=a*t,l=h*t;if(!1===Ot(this.element,K,{ratio:t,oldRatio:r/a,originalEvent:e}))return this;if(e){var d=this.pointers,p=Et(this.cropper),u=d&&Object.keys(d).length?function(t){var i=0,e=0,n=0;return lt(t,(function(t){i+=t.startX,e+=t.startY,n+=1})),{pageX:i/=n,pageY:e/=n}}(d):{pageX:e.pageX,pageY:e.pageY};s.left-=(u.pageX-p.left-s.left)/r*(c-r),s.top-=(u.pageY-p.top-s.top)/o*(l-o)}else ot(i)&&it(i.x)&&it(i.y)?(s.left-=(i.x-s.left)/r*(c-r),s.top-=(i.y-s.top)/o*(l-o)):(s.left-=(c-r)/2,s.top-=(l-o)/2);s.width=c,s.height=l,this.renderCanvas(!0)}return this},rotate:function(t){return this.rotateTo((this.imageData.rotate||0)+Number(t))},rotateTo:function(t){return it(t=Number(t))&&this.ready&&!this.disabled&&this.options.rotatable&&(this.imageData.rotate=t%360,this.renderCanvas(!0,!0)),this},scaleX:function(t){var i=this.imageData.scaleY;return this.scale(t,it(i)?i:1)},scaleY:function(t){var i=this.imageData.scaleX;return this.scale(it(i)?i:1,t)},scale:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t,e=this.imageData,n=!1;return t=Number(t),i=Number(i),this.ready&&!this.disabled&&this.options.scalable&&(it(t)&&(e.scaleX=t,n=!0),it(i)&&(e.scaleY=i,n=!0),n&&this.renderCanvas(!0,!0)),this},getData:function(){var t,i=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this.options,n=this.imageData,s=this.canvasData,r=this.cropBoxData;if(this.ready&&this.cropped){var o=n.width/n.naturalWidth;if(lt(t={x:r.left-s.left,y:r.top-s.top,width:r.width,height:r.height},(function(i,e){t[e]=i/o})),i){var a=Math.round(t.y+t.height),h=Math.round(t.x+t.width);t.x=Math.round(t.x),t.y=Math.round(t.y),t.width=h-t.x,t.height=a-t.y}}else t={x:0,y:0,width:0,height:0};return e.rotatable&&(t.rotate=n.rotate||0),e.scalable&&(t.scaleX=n.scaleX||1,t.scaleY=n.scaleY||1),t},setData:function(t){var i=this.options,e=this.imageData,n=this.canvasData,s={};if(this.ready&&!this.disabled&&ot(t)){var r=!1;i.rotatable&&it(t.rotate)&&t.rotate!==e.rotate&&(e.rotate=t.rotate,r=!0),i.scalable&&(it(t.scaleX)&&t.scaleX!==e.scaleX&&(e.scaleX=t.scaleX,r=!0),it(t.scaleY)&&t.scaleY!==e.scaleY&&(e.scaleY=t.scaleY,r=!0)),r&&this.renderCanvas(!0,!0);var o=e.width/e.naturalWidth;it(t.x)&&(s.left=t.x*o+n.left),it(t.y)&&(s.top=t.y*o+n.top),it(t.width)&&(s.width=t.width*o),it(t.height)&&(s.height=t.height*o),this.setCropBoxData(s)}return this},getContainerData:function(){return this.ready?dt({},this.containerData):{}},getImageData:function(){return this.sized?dt({},this.imageData):{}},getCanvasData:function(){var t=this.canvasData,i={};return this.ready&<(["left","top","width","height","naturalWidth","naturalHeight"],(function(e){i[e]=t[e]})),i},setCanvasData:function(t){var i=this.canvasData,e=i.aspectRatio;return this.ready&&!this.disabled&&ot(t)&&(it(t.left)&&(i.left=t.left),it(t.top)&&(i.top=t.top),it(t.width)?(i.width=t.width,i.height=t.width/e):it(t.height)&&(i.height=t.height,i.width=t.height*e),this.renderCanvas(!0)),this},getCropBoxData:function(){var t,i=this.cropBoxData;return this.ready&&this.cropped&&(t={left:i.left,top:i.top,width:i.width,height:i.height}),t||{}},setCropBoxData:function(t){var i,e,n=this.cropBoxData,s=this.options.aspectRatio;return this.ready&&this.cropped&&!this.disabled&&ot(t)&&(it(t.left)&&(n.left=t.left),it(t.top)&&(n.top=t.top),it(t.width)&&t.width!==n.width&&(i=!0,n.width=t.width),it(t.height)&&t.height!==n.height&&(e=!0,n.height=t.height),s&&(i?n.height=n.width/s:e&&(n.width=n.height*s)),this.renderCropBox()),this},getCroppedCanvas:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!this.ready||!window.HTMLCanvasElement)return null;var i=this.canvasData,e=function(t,i,e,n){var s=i.aspectRatio,o=i.naturalWidth,a=i.naturalHeight,h=i.rotate,c=void 0===h?0:h,l=i.scaleX,d=void 0===l?1:l,p=i.scaleY,u=void 0===p?1:p,v=e.aspectRatio,f=e.naturalWidth,m=e.naturalHeight,b=n.fillColor,g=void 0===b?"transparent":b,w=n.imageSmoothingEnabled,x=void 0===w||w,y=n.imageSmoothingQuality,k=void 0===y?"low":y,M=n.maxWidth,C=void 0===M?1/0:M,j=n.maxHeight,z=void 0===j?1/0:j,O=n.minWidth,E=void 0===O?0:O,N=n.minHeight,D=void 0===N?0:N,S=document.createElement("canvas"),T=S.getContext("2d"),A=Ft({aspectRatio:v,width:C,height:z}),B=Ft({aspectRatio:v,width:E,height:D},"cover"),F=Math.min(A.width,Math.max(B.width,f)),W=Math.min(A.height,Math.max(B.height,m)),_=Ft({aspectRatio:s,width:C,height:z}),R=Ft({aspectRatio:s,width:E,height:D},"cover"),I=Math.min(_.width,Math.max(R.width,o)),P=Math.min(_.height,Math.max(R.height,a)),Y=[-I/2,-P/2,I,P];return S.width=ut(F),S.height=ut(W),T.fillStyle=g,T.fillRect(0,0,F,W),T.save(),T.translate(F/2,W/2),T.rotate(c*Math.PI/180),T.scale(d,u),T.imageSmoothingEnabled=x,T.imageSmoothingQuality=k,T.drawImage.apply(T,[t].concat(r(Y.map((function(t){return Math.floor(ut(t))}))))),T.restore(),S}(this.image,this.imageData,i,t);if(!this.cropped)return e;var n=this.getData(),s=n.x,o=n.y,a=n.width,h=n.height,c=e.width/Math.floor(i.naturalWidth);1!==c&&(s*=c,o*=c,a*=c,h*=c);var l=a/h,d=Ft({aspectRatio:l,width:t.maxWidth||1/0,height:t.maxHeight||1/0}),p=Ft({aspectRatio:l,width:t.minWidth||0,height:t.minHeight||0},"cover"),u=Ft({aspectRatio:l,width:t.width||(1!==c?e.width:a),height:t.height||(1!==c?e.height:h)}),v=u.width,f=u.height;v=Math.min(d.width,Math.max(p.width,v)),f=Math.min(d.height,Math.max(p.height,f));var m=document.createElement("canvas"),b=m.getContext("2d");m.width=ut(v),m.height=ut(f),b.fillStyle=t.fillColor||"transparent",b.fillRect(0,0,v,f);var g=t.imageSmoothingEnabled,w=t.imageSmoothingQuality;b.imageSmoothingEnabled=void 0===g||g,w&&(b.imageSmoothingQuality=w);var x,y,k,M,C,j,z=e.width,O=e.height,E=s,N=o;E<=-a||E>z?(E=0,x=0,k=0,C=0):E<=0?(k=-E,E=0,C=x=Math.min(z,a+E)):E<=z&&(k=0,C=x=Math.min(a,z-E)),x<=0||N<=-h||N>O?(N=0,y=0,M=0,j=0):N<=0?(M=-N,N=0,j=y=Math.min(O,h+N)):N<=O&&(M=0,j=y=Math.min(h,O-N));var D=[E,N,x,y];if(C>0&&j>0){var S=v/a;D.push(k*S,M*S,C*S,j*S)}return b.drawImage.apply(b,[e].concat(r(D.map((function(t){return Math.floor(ut(t))}))))),m},setAspectRatio:function(t){var i=this.options;return this.disabled||nt(t)||(i.aspectRatio=Math.max(0,t)||NaN,this.ready&&(this.initCropBox(),this.cropped&&this.renderCropBox())),this},setDragMode:function(t){var i=this.options,e=this.dragBox,n=this.face;if(this.ready&&!this.disabled){var s=t===A,r=i.movable&&t===B;i.dragMode=t=s||r?t:F,kt(e,S,t),gt(e,C,s),gt(e,D,r),i.cropBoxMovable||(kt(n,S,t),gt(n,C,s),gt(n,D,r))}return this}},Ut=h.Cropper,$t=function(){function t(i){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(function(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}(this,t),!i||!J.test(i.tagName))throw new Error("The first argument is required and must be an <img> or <canvas> element.");this.element=i,this.options=dt({},Q,ot(e)&&e),this.cropped=!1,this.disabled=!1,this.pointers={},this.ready=!1,this.reloading=!1,this.replaced=!1,this.sized=!1,this.sizing=!1,this.init()}return i=t,e=[{key:"init",value:function(){var t,i=this.element,e=i.tagName.toLowerCase();if(!i[d]){if(i[d]=this,"img"===e){if(this.isImg=!0,t=i.getAttribute("src")||"",this.originalUrl=t,!t)return;t=i.src}else"canvas"===e&&window.HTMLCanvasElement&&(t=i.toDataURL());this.load(t)}}},{key:"load",value:function(t){var i,e,n,s,r=this;if(t){this.url=t,this.imageData={};var o=this.element,a=this.options;if(a.rotatable||a.scalable||(a.checkOrientation=!1),a.checkOrientation&&window.ArrayBuffer)if(Z.test(t))G.test(t)?this.read((i=t.replace(_t,""),e=atob(i),n=new ArrayBuffer(e.length),lt(s=new Uint8Array(n),(function(t,i){s[i]=e.charCodeAt(i)})),n)):this.clone();else{var h=new XMLHttpRequest,c=this.clone.bind(this);this.reloading=!0,this.xhr=h,h.onabort=c,h.onerror=c,h.ontimeout=c,h.onprogress=function(){h.getResponseHeader("content-type")!==V&&h.abort()},h.onload=function(){r.read(h.response)},h.onloadend=function(){r.reloading=!1,r.xhr=null},a.checkCrossOrigin&&St(t)&&o.crossOrigin&&(t=Tt(t)),h.open("GET",t,!0),h.responseType="arraybuffer",h.withCredentials="use-credentials"===o.crossOrigin,h.send()}else this.clone()}}},{key:"read",value:function(t){var i=this.options,e=this.imageData,n=Rt(t),s=0,r=1,o=1;if(n>1){this.url=function(t,i){for(var e=[],n=new Uint8Array(t);n.length>0;)e.push(Wt.apply(null,ct(n.subarray(0,8192)))),n=n.subarray(8192);return"data:".concat(i,";base64,").concat(btoa(e.join("")))}(t,V);var a=function(t){var i=0,e=1,n=1;switch(t){case 2:e=-1;break;case 3:i=-180;break;case 4:n=-1;break;case 5:i=90,n=-1;break;case 6:i=90;break;case 7:i=90,e=-1;break;case 8:i=-90}return{rotate:i,scaleX:e,scaleY:n}}(n);s=a.rotate,r=a.scaleX,o=a.scaleY}i.rotatable&&(e.rotate=s),i.scalable&&(e.scaleX=r,e.scaleY=o),this.clone()}},{key:"clone",value:function(){var t=this.element,i=this.url,e=t.crossOrigin,n=i;this.options.checkCrossOrigin&&St(i)&&(e||(e="anonymous"),n=Tt(i)),this.crossOrigin=e,this.crossOriginUrl=n;var s=document.createElement("img");e&&(s.crossOrigin=e),s.src=n||i,s.alt=t.alt||"The image to crop",this.image=s,s.onload=this.start.bind(this),s.onerror=this.stop.bind(this),mt(s,O),t.parentNode.insertBefore(s,t.nextSibling)}},{key:"start",value:function(){var t=this,i=this.image;i.onload=null,i.onerror=null,this.sizing=!0;var e=h.navigator&&/(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(h.navigator.userAgent),n=function(i,e){dt(t.imageData,{naturalWidth:i,naturalHeight:e,aspectRatio:i/e}),t.initialImageData=dt({},t.imageData),t.sizing=!1,t.sized=!0,t.build()};if(!i.naturalWidth||e){var s=document.createElement("img"),r=document.body||document.documentElement;this.sizingImage=s,s.onload=function(){n(s.width,s.height),e||r.removeChild(s)},s.src=i.src,e||(s.style.cssText="left:0;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;opacity:0;position:absolute;top:0;z-index:-1;",r.appendChild(s))}else n(i.naturalWidth,i.naturalHeight)}},{key:"stop",value:function(){var t=this.image;t.onload=null,t.onerror=null,t.parentNode.removeChild(t),this.image=null}},{key:"build",value:function(){if(this.sized&&!this.ready){var t=this.element,i=this.options,e=this.image,n=t.parentNode,s=document.createElement("div");s.innerHTML='<div class="cropper-container" touch-action="none"><div class="cropper-wrap-box"><div class="cropper-canvas"></div></div><div class="cropper-drag-box"></div><div class="cropper-crop-box"><span class="cropper-view-box"></span><span class="cropper-dashed dashed-h"></span><span class="cropper-dashed dashed-v"></span><span class="cropper-center"></span><span class="cropper-face"></span><span class="cropper-line line-e" data-cropper-action="e"></span><span class="cropper-line line-n" data-cropper-action="n"></span><span class="cropper-line line-w" data-cropper-action="w"></span><span class="cropper-line line-s" data-cropper-action="s"></span><span class="cropper-point point-e" data-cropper-action="e"></span><span class="cropper-point point-n" data-cropper-action="n"></span><span class="cropper-point point-w" data-cropper-action="w"></span><span class="cropper-point point-s" data-cropper-action="s"></span><span class="cropper-point point-ne" data-cropper-action="ne"></span><span class="cropper-point point-nw" data-cropper-action="nw"></span><span class="cropper-point point-sw" data-cropper-action="sw"></span><span class="cropper-point point-se" data-cropper-action="se"></span></div></div>';var r=s.querySelector(".".concat(d,"-container")),o=r.querySelector(".".concat(d,"-canvas")),a=r.querySelector(".".concat(d,"-drag-box")),h=r.querySelector(".".concat(d,"-crop-box")),c=h.querySelector(".".concat(d,"-face"));this.container=n,this.cropper=r,this.canvas=o,this.dragBox=a,this.cropBox=h,this.viewBox=r.querySelector(".".concat(d,"-view-box")),this.face=c,o.appendChild(e),mt(t,z),n.insertBefore(r,t.nextSibling),bt(e,O),this.initPreview(),this.bind(),i.initialAspectRatio=Math.max(0,i.initialAspectRatio)||NaN,i.aspectRatio=Math.max(0,i.aspectRatio)||NaN,i.viewMode=Math.max(0,Math.min(3,Math.round(i.viewMode)))||0,mt(h,z),i.guides||mt(h.getElementsByClassName("".concat(d,"-dashed")),z),i.center||mt(h.getElementsByClassName("".concat(d,"-center")),z),i.background&&mt(r,"".concat(d,"-bg")),i.highlight||mt(c,E),i.cropBoxMovable&&(mt(c,D),kt(c,S,p)),i.cropBoxResizable||(mt(h.getElementsByClassName("".concat(d,"-line")),z),mt(h.getElementsByClassName("".concat(d,"-point")),z)),this.render(),this.ready=!0,this.setDragMode(i.dragMode),i.autoCrop&&this.crop(),this.setData(i.data),at(i.ready)&&zt(t,H,i.ready,{once:!0}),Ot(t,H)}}},{key:"unbuild",value:function(){if(this.ready){this.ready=!1,this.unbind(),this.resetPreview();var t=this.cropper.parentNode;t&&t.removeChild(this.cropper),bt(this.element,z)}}},{key:"uncreate",value:function(){this.ready?(this.unbuild(),this.ready=!1,this.cropped=!1):this.sizing?(this.sizingImage.onload=null,this.sizing=!1,this.sized=!1):this.reloading?(this.xhr.onabort=null,this.xhr.abort()):this.image&&this.stop()}}],s=[{key:"noConflict",value:function(){return window.Cropper=Ut,t}},{key:"setDefaults",value:function(t){dt(Q,ot(t)&&t)}}],e&&n(i.prototype,e),s&&n(i,s),Object.defineProperty(i,"prototype",{writable:!1}),t;var i,e,s}();return dt($t.prototype,It,Pt,Yt,Lt,Xt,Ht),$t}()}));const Y=1-.91,L={autoCropArea:.91,minCropBoxHeight:82,minCropBoxWidth:82,movable:!1,zoomable:!1,rotatable:!1,scalable:!1,zoomOnTouch:!1,zoomOnWheel:!1,toggleDragModeOnDblclick:!1},X=class{constructor(e){t(this,e),this.vviinnImageCrop=i(this,"vviinnImageCrop",7),this.cropEnd=()=>{r.searchArea=a.some(this.getCropboxData()),p(),r.detectedObject=void 0,this.vviinnImageCrop.emit(this.basicEventData)},this.basicEventData=void 0,this.cropper=null}disconnectedCallback(){this.cropper.destroy()}selectDetectedObject({detail:t}){const{top:i,left:e,width:n,height:s}=t.detectedObject.value.rectangle,r=this.cropper.getImageData();this.cropper.setCropBoxData((t=>{const{width:i,height:e,left:n,top:s}=t,r=82;let o={width:i,height:e,left:n,top:s};return i<r&&(o.width=r,o.left=n-(r-i)/2),e<r&&(o.height=r,o.top=s-(r-e)/2),o})({left:e*r.width,top:i*r.height,width:n*r.width,height:s*r.height}))}getCropboxData(){const{left:t,top:i,width:e,height:n}=this.cropper.getCropBoxData();return{x:t,y:i,width:e,height:n}}loadImage(){const t=this.el.shadowRoot.querySelector("img");if(t){let i={};this.cropper&&(i=this.cropper.getData(!0),this.cropper.destroy());const e=y(t),{x:n,y:s}=e,o={x:n,y:s,width:e.width-e.width*Y,height:e.height-e.height*Y};r.imageBounds=a.some(e),r.searchArea=a.some(o),this.cropper=new P(t,Object.assign(Object.assign({},L),{cropend:this.cropEnd,data:i}))}}renderDetectedObject(t){return e("vviinn-detected-object",{detectedObject:t,basicEventData:this.basicEventData})}renderImage(){return o.pipe(x(r.imageUrl,r.image),a.map((([t,i])=>{const[n,s]=(t=>{const i=k(t),e=M(288)(i).map((t=>t.size));return[e[0],e[1]]})(i);return e("img",{decoding:"async",width:n,height:s,src:t,draggable:!1,onLoad:()=>this.loadImage()})})),a.getOrElse((()=>null)))}render(){return e(n,null,e("div",{class:"image-container"},r.loading||r.objectDetectionInProgress?e("div",{class:"image-preloader"},e("vviinn-preloader",null)):null,this.renderImage()),r.detectedObjects.map((t=>this.renderDetectedObject(t))))}get el(){return s(this)}};X.style=":host {\n display: grid;\n position: relative;\n justify-self: center;\n direction: ltr;\n}\n\n.image-container > img {\n display: block;\n max-width: 100%;\n}\n\n.image-preloader {\n background: rgba(0, 0, 0, 0.25);\n border-radius: 4px;\n bottom: 18px;\n padding: 4px 6px;\n pointer-events: none;\n color: white;\n position: absolute;\n right: 18px;\n z-index: 4;\n}\n\nvviinn-preloader {\n --preloader-size: 12px;\n}\n\n.cropper-container {\n direction: ltr;\n font-size: 0;\n line-height: 0;\n position: relative;\n touch-action: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n\n & img {\n backface-visibility: hidden;\n display: block;\n height: 100%;\n image-orientation: 0deg;\n max-height: none !important;\n max-width: none !important;\n min-height: 0 !important;\n min-width: 0 !important;\n width: 100%;\n }\n}\n\n.cropper-wrap-box,\n.cropper-canvas,\n.cropper-drag-box,\n.cropper-crop-box,\n.cropper-modal {\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n}\n\n.cropper-wrap-box,\n.cropper-canvas {\n overflow: hidden;\n}\n\n.cropper-drag-box {\n background-color: #fff;\n opacity: 0;\n}\n\n.cropper-modal {\n background-color: #000;\n opacity: 0.4;\n}\n\n.cropper-view-box {\n display: block;\n height: 100%;\n overflow: hidden;\n width: 100%;\n}\n\n.cropper-view-box,\n.cropper-face {\n border-radius: 5px;\n}\n\n.cropper-face,\n.cropper-point {\n display: block;\n height: 100%;\n opacity: 0.1;\n position: absolute;\n width: 100%;\n}\n\n.cropper-face {\n left: 0;\n top: 0;\n}\n\n.cropper-point {\n height: 30px;\n width: 30px;\n opacity: 1;\n}\n\n.point-e,\n.point-s,\n.point-w,\n.point-n {\n display: none;\n}\n\n.point-ne {\n cursor: nesw-resize;\n right: -15px;\n top: -15px;\n}\n\n.point-nw {\n cursor: nwse-resize;\n left: -15px;\n top: -15px;\n}\n\n.point-sw {\n cursor: nesw-resize;\n bottom: -15px;\n left: -15px;\n}\n\n.point-se {\n cursor: nwse-resize;\n bottom: -15px;\n right: -15px;\n}\n\n.cropper-point::before {\n position: absolute;\n content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' fill='none'%3E%3Cpath d='M3 35H23C29.6274 35 35 29.6274 35 23V3' stroke='white' stroke-width='6' stroke-linecap='square'/%3E%3C/svg%3E\");\n display: block;\n poiter-events: none;\n}\n\n.point-ne::before {\n transform: rotate(-90deg);\n left: -20px;\n top: 12px;\n}\n\n.point-nw::before {\n transform: rotate(180deg);\n left: 12px;\n top: 12px;\n}\n\n.point-sw::before {\n transform: rotate(90deg);\n left: 12px;\n top: -20px;\n}\n\n.point-se::before {\n left: -20px;\n top: -20px;\n}\n\n.cropper-invisible {\n opacity: 0;\n}\n\n.cropper-hide {\n display: block;\n height: 0;\n position: absolute;\n width: 0;\n}\n\n.cropper-hidden {\n display: none !important;\n}\n\n.cropper-move {\n cursor: move;\n}\n\n.cropper-crop {\n cursor: crosshair;\n}\n\n.cropper-disabled .cropper-drag-box,\n.cropper-disabled .cropper-face,\n.cropper-disabled .cropper-line,\n.cropper-disabled .cropper-point {\n cursor: not-allowed;\n}\n";const H=class{constructor(e){t(this,e),this.vviinnWidgetClose=i(this,"vviinnWidgetClose",7),this.active=!1,this.resetState=void 0,this.buttonElementId=void 0,this.widgetVersion=void 0,this.hideBackButton=!1,this.isFirstScreen=void 0,this.slider=!1}componentWillLoad(){T(this,this.el)}resetTopScroll(){this.el.shadowRoot.querySelector(".body").scroll({top:0})}close(){this.active=!1,setTimeout((()=>{this.vviinnWidgetClose.emit({widgetType:"VPS",campaignTypeId:"VPS",campaignTypeName:A.VPS,widgetId:this.buttonElementId,widgetVersion:this.widgetVersion})}),this.slider?500:0)}handleAnimationEnd(t){"fade-in"===t.animationName&&(this.slider=!0)}renderImage(){return o.pipe(x(r.imageUrl,r.image),a.map((([t])=>e("img",{width:"28",height:"28",src:t,class:"title-image"}))),a.getOrElse((()=>null)))}render(){return e(n,{exportparts:"secondary-action, title, close-button",class:{closed:!this.active,"first-screen":this.isFirstScreen},onAnimationEnd:t=>this.handleAnimationEnd(t)},e("div",{class:"head"},!this.hideBackButton&&e("button",{part:"secondary-action",onClick:()=>{this.resetState(),this.resetTopScroll()}},e(D,null)),e("div",{class:"title",part:"title"},this.renderImage(),e("slot",{name:"vviinn-image-search-modal-title"},j.t("imageSearchModalTitle"))),e("button",{onClick:()=>this.close(),class:"close-button",part:"close-button"},e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none"},e("path",{d:"M12 13.3892L6.91958 18.4696C6.72248 18.6667 6.49095 18.7653 6.225 18.7653C5.95905 18.7653 5.72753 18.6667 5.53043 18.4696C5.33333 18.2725 5.23478 18.041 5.23478 17.775C5.23478 17.5091 5.33333 17.2776 5.53043 17.0805L10.6109 12L5.53043 6.9196C5.33333 6.7225 5.23478 6.49098 5.23478 6.22503C5.23478 5.95908 5.33333 5.72755 5.53043 5.53045C5.72753 5.33335 5.95905 5.2348 6.225 5.2348C6.49095 5.2348 6.72248 5.33335 6.91958 5.53045L12 10.6109L17.0804 5.53045C17.2775 5.33335 17.5091 5.2348 17.775 5.2348C18.041 5.2348 18.2725 5.33335 18.4696 5.53045C18.6667 5.72755 18.7652 5.95908 18.7652 6.22503C18.7652 6.49098 18.6667 6.7225 18.4696 6.9196L13.3892 12L18.4696 17.0805C18.6667 17.2776 18.7652 17.5091 18.7652 17.775C18.7652 18.041 18.6667 18.2725 18.4696 18.4696C18.2725 18.6667 18.041 18.7653 17.775 18.7653C17.5091 18.7653 17.2775 18.6667 17.0804 18.4696L12 13.3892Z",fill:"currentColor"})))),e("div",{class:"body"},e("slot",null)))}get el(){return s(this)}};H.style=":host{background:white;border-radius:24px;box-sizing:border-box;display:grid;grid-template-rows:min-content auto;max-width:960px;overflow:auto;position:relative}.head{position:absolute;width:100%;box-sizing:border-box;display:flex;align-items:center;z-index:1;padding:16px}.title{display:flex;align-items:center;transform:translateX(-6px);font-weight:600;font-size:18px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;padding:6px;color:#8d8d8d}button:hover{color:#000}@media (max-width: 768px){:host{animation-name:fade-in;animation-duration:0.5s;animation-fill-mode:forwards;border-radius:24px 24px 0 0}:host(.closed){animation-name:fade-out;animation-fill-mode:none}.head{z-index:1}:host(:not(.first-screen)) .head{position:sticky;background:#ffffff}.body{overflow-y:auto}:host(:not(.first-screen)) .body{padding-bottom:64px}.title{color:#161616;display:flex;align-items:center;font-weight:500;font-size:16px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;color:#6f6f6f;padding:0}button:hover{color:#000}:host(.first-screen) button,:host(.first-screen) button:hover{color:white}}@keyframes fade-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fade-out{from{transform:translateY(0)}to{transform:translateY(100%)}}";const U=class{constructor(i){t(this,i)}render(){return e(n,null,e("slot",null))}};U.style=":host{animation:fade-in 0.5s ease-in-out;background:rgba(0, 0, 0, 0.5);display:block;height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100vw;z-index:9999}@keyframes fade-in{from{opacity:0.1}to{opacity:1}}";const $=class{constructor(e){t(this,e),this.vviinnWidgetClose=i(this,"vviinnWidgetClose",7),this.active=!1,this.resetState=void 0,this.buttonElementId=void 0,this.hideBackButton=!1,this.widgetVersion=void 0,this.isFirstScreen=void 0}render(){return e(n,{class:{active:this.active}},e("vviinn-overlay",null,e("vviinn-modal",{resetState:this.resetState,active:this.active,buttonElementId:this.buttonElementId,hideBackButton:this.hideBackButton,widgetVersion:this.widgetVersion,isFirstScreen:this.isFirstScreen},e("slot",null,"CONTENT"))))}};$.style=":host{display:none}:host(.active){display:block}vviinn-overlay{align-items:center;display:grid;justify-items:center;cursor:default}vviinn-modal{margin-left:24px;margin-right:24px}@media (max-width: 768px){vviinn-modal{height:100vh;height:100svh;margin-top:64px;transform:translateY(100%);width:100vw;margin-left:0;margin-right:0}vviinn-overlay{align-items:end;display:grid;justify-items:center}}";const K=class{constructor(i){t(this,i),this.privacyBadgeText=void 0}componentWillLoad(){T(this,this.el)}render(){return e(n,null,e("slot",{name:"vviinn-privacy-badge-text"},e("div",null,this.privacyBadgeText)))}get el(){return s(this)}};K.style=":host{color:#525252;font-size:12px;line-height:16px;text-align:center}:host(.invisible){color:transparent}@media (max-width: 768px){:host(.invisible){display:none}}";const V=class{constructor(i){t(this,i),this.handler=void 0}render(){return e(n,null,e("vviinn-error",null,e(z,null),e("h4",{slot:"title"},j.t("serverErrorBlock.title")),e("button",{slot:"action",onClick:this.handler},j.t("serverErrorBlock.button"))))}},q=class{constructor(i){t(this,i)}render(){return e(n,null,e("slot",null))}};q.style=":host{display:grid;justify-items:center}";const Z=({kind:t,tabindex:i,disabled:n,onClick:s,onKeyDown:r})=>{return e("div",{class:(o={kind:t,disabled:n},{"arrow-wrapper":!0,[o.kind]:!0,disabled:o.disabled}),onClick:s,tabindex:i,onKeyDown:r},e(S,null));var o},G=class{constructor(i){t(this,i),this.elementsCount=0,this.internalPosition=0,this.swipeStartPosition=a.none,this.isRTL=!1,this.showBullets=!0,this.position=0,this.showArrows=!1}positionWatchHandler(t){this.internalPosition=t,this.el.style.setProperty("--position",`${this.calculatePosition(t)}`),this.setActiveCssClassToSlide(t)}componentWillLoad(){this.isRTL="rtl"===document.dir}connectedCallback(){this.handleDomContentChanges()}handleDomContentChanges(){const t=this.el.querySelectorAll("vviinn-slide");this.elementsCount=t.length,this.el.style.setProperty("--num-items",`${this.elementsCount}`),this.setActiveCssClassToSlide(0)}setActiveCssClassToSlide(t){const i=this.el.querySelectorAll("vviinn-slide");i.forEach((t=>t.classList.remove("active"))),i[t].classList.add("active")}goToSlide(t){this.internalPosition=t,this.el.style.setProperty("--position",`${t}`),this.setActiveCssClassToSlide(t)}renderBullets(){return this.showBullets?e("div",{class:"controls"},C.range(0,this.elementsCount-1).map((t=>e("div",{class:{bullet:!0,active:t==Math.abs(this.internalPosition)%this.elementsCount},onClick:()=>this.goToSlide(t)})))):null}nextSlide(){this.internalPosition++,this.renderSlidePosition()}prevSlide(){const t=this.internalPosition-1;this.internalPosition=t>-1?t:this.elementsCount-1,this.renderSlidePosition()}renderSlidePosition(){const t=this.internalPosition%this.elementsCount;requestAnimationFrame((()=>{this.el.style.setProperty("--position",`${this.calculatePosition(t)}`)}))}calculatePosition(t){return this.isRTL?-1*t:t}handleKeyDown(t){if("Space"===t.key||"Enter"===t.key)switch(t.target.className.includes("prev")?"prev":"next"){case"prev":this.prevSlide();break;case"next":this.nextSlide()}}handleTouchStart(t){this.showBullets&&(this.swipeStartPosition=o.pipe(t.touches[0],a.fromNullable,a.map((t=>t.clientX))))}handleTouchEnd(t){if(!this.showBullets)return;const i=o.pipe(t.changedTouches[0],a.fromNullable,a.map((t=>t.clientX)));o.pipe(x(this.swipeStartPosition,i),a.map((([t,i])=>{return(e=t)<(n=i)?-1:e>n?1:0;var e,n})),a.map((t=>{switch(t){case 1:return this.nextSlide();case-1:return this.prevSlide()}})))}render(){return e(n,null,e("div",{class:"items-wrapper"},e("div",{class:"items",onTouchStart:t=>this.handleTouchStart(t),onTouchEnd:t=>this.handleTouchEnd(t)},e("slot",null))),this.showArrows?[e(Z,{kind:"prev",onClick:()=>this.isRTL?this.nextSlide():this.prevSlide(),onKeyDown:t=>this.handleKeyDown(t),tabindex:1,disabled:!1}),e(Z,{kind:"next",onClick:()=>this.isRTL?this.prevSlide():this.nextSlide(),onKeyDown:t=>this.handleKeyDown(t),tabindex:0,disabled:!1})]:null,this.renderBullets())}get el(){return s(this)}static get watchers(){return{position:["positionWatchHandler"]}}};G.style=":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{--num-items:0;--position:0;display:grid;grid-gap:20px;justify-items:center;position:relative}.items-wrapper{overflow:hidden;width:100%}.items{box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--num-items), 100%);transform:translateX(calc(-100% * var(--position)));transition:transform 0.33s ease-in-out}.controls{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--num-items), min-content)}.bullet{background:#e0e0e0;border-radius:50%;box-sizing:border-box;cursor:pointer;height:8px;width:8px;transition:background 0.1s ease-in-out}.bullet:hover{background:#c6c6c6}.bullet.active{background:var(--color-primary, var(--color-primary-system))}.bullet:active{background:transparent;border:2px solid var(--color-primary, var(--color-primary-system))}.arrow-wrapper{align-items:center;cursor:pointer;background:white;border:2px solid white;bottom:0;box-sizing:border-box;display:grid;height:calc(var(--spacer) * 6);justify-items:center;margin:auto;position:absolute;top:0;transform:translate3d(0, -50%, 0);transition:border 0.25ms ease-in-out;width:calc(var(--spacer) * 4)}.arrow-wrapper:active{border-color:var(--color-primary, var(--color-primary-system));opacity:0.75}.arrow-wrapper:focus{border-color:var(--color-primary, var(--color-primary-system));opacity:0.5;outline:none}.prev{left:0}.next{right:0}.next>svg{transform:rotate3d(0, 1, 0, 180deg)}.arrow-wrapper>svg{transition:fill 0.25ms ease-in-out;fill:#a8a8a8}.arrow-wrapper:hover>svg{fill:#8d8d8d}";const J=class{constructor(i){t(this,i)}componentWillLoad(){T(this,this.el)}render(){return e(n,null,e("slot",null,e("span",{class:"vviinn-teaser-text"},e("slot",{name:"vviinn-teaser-text"},j.t("teaserText")))))}get el(){return s(this)}};J.style=":host{align-items:center;display:grid;justify-items:center;grid-gap:16px}.vviinn-teaser-text{font-size:22px;font-weight:600;line-height:28px;text-align:center;white-space:pre-line}";const Q=class{constructor(i){t(this,i),this.handler=void 0}render(){return e(n,null,e("vviinn-error",null,e(z,null),e("h4",{slot:"title"},j.t("wrongFormatBlock.title")),e("span",{slot:"text"},j.t("wrongFormatBlock.text")),e("button",{slot:"action",onClick:this.handler},j.t("wrongFormatBlock.button"))))}};export{F as search_filters,W as vviinn_detected_object,_ as vviinn_empty_results,R as vviinn_example_image,I as vviinn_image_selector,X as vviinn_image_view,H as vviinn_modal,U as vviinn_overlay,$ as vviinn_overlayed_modal,K as vviinn_privacy_badge,V as vviinn_server_error,q as vviinn_slide,G as vviinn_slider,J as vviinn_teaser,Q as vviinn_wrong_format}
|
|
11
|
+
t.exports=function(){function t(t,i){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);i&&(n=n.filter((function(i){return Object.getOwnPropertyDescriptor(t,i).enumerable}))),e.push.apply(e,n)}return e}function i(i){for(var e=1;e<arguments.length;e++){var n=null!=arguments[e]?arguments[e]:{};e%2?t(Object(n),!0).forEach((function(t){s(i,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(i,Object.getOwnPropertyDescriptors(n)):t(Object(n)).forEach((function(t){Object.defineProperty(i,t,Object.getOwnPropertyDescriptor(n,t))}))}return i}function e(t){return e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},e(t)}function n(t,i){for(var e=0;e<i.length;e++){var n=i[e];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(t,n.key,n)}}function s(t,i,e){return i in t?Object.defineProperty(t,i,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[i]=e,t}function r(t){return function(t){if(Array.isArray(t))return o(t)}(t)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(t)||function(t,i){if(t){if("string"==typeof t)return o(t,i);var e=Object.prototype.toString.call(t).slice(8,-1);return"Object"===e&&t.constructor&&(e=t.constructor.name),"Map"===e||"Set"===e?Array.from(t):"Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e)?o(t,i):void 0}}(t)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function o(t,i){(null==i||i>t.length)&&(i=t.length);for(var e=0,n=new Array(i);e<i;e++)n[e]=t[e];return n}var a="undefined"!=typeof window&&void 0!==window.document,h=a?window:{},c=!(!a||!h.document.documentElement)&&"ontouchstart"in h.document.documentElement,l=!!a&&"PointerEvent"in h,d="cropper",p="all",u="crop",v="move",f="zoom",m="e",b="w",g="s",w="n",x="ne",y="nw",k="se",M="sw",C="".concat(d,"-crop"),j="".concat(d,"-disabled"),z="".concat(d,"-hidden"),O="".concat(d,"-hide"),E="".concat(d,"-invisible"),N="".concat(d,"-modal"),A="".concat(d,"-move"),D="".concat(d,"Action"),S="".concat(d,"Preview"),T="crop",B="move",_="none",F="crop",W="cropend",R="cropmove",I="cropstart",P="dblclick",Y=l?"pointerdown":c?"touchstart":"mousedown",L=l?"pointermove":c?"touchmove":"mousemove",H=l?"pointerup pointercancel":c?"touchend touchcancel":"mouseup",X="ready",U="resize",$="wheel",K="zoom",V="image/jpeg",q=/^e|w|s|n|se|sw|ne|nw|all|crop|move|zoom$/,Z=/^data:/,G=/^data:image\/jpeg;base64,/,J=/^img|canvas$/i,Q={viewMode:0,dragMode:T,initialAspectRatio:NaN,aspectRatio:NaN,data:null,preview:"",responsive:!0,restore:!0,checkCrossOrigin:!0,checkOrientation:!0,modal:!0,guides:!0,center:!0,highlight:!0,background:!0,autoCrop:!0,autoCropArea:.8,movable:!0,rotatable:!0,scalable:!0,zoomable:!0,zoomOnTouch:!0,zoomOnWheel:!0,wheelZoomRatio:.1,cropBoxMovable:!0,cropBoxResizable:!0,toggleDragModeOnDblclick:!0,minCanvasWidth:0,minCanvasHeight:0,minCropBoxWidth:0,minCropBoxHeight:0,minContainerWidth:200,minContainerHeight:100,ready:null,cropstart:null,cropmove:null,cropend:null,crop:null,zoom:null},tt=Number.isNaN||h.isNaN;function it(t){return"number"==typeof t&&!tt(t)}var et=function(t){return t>0&&t<1/0};function nt(t){return void 0===t}function st(t){return"object"===e(t)&&null!==t}var rt=Object.prototype.hasOwnProperty;function ot(t){if(!st(t))return!1;try{var i=t.constructor,e=i.prototype;return i&&e&&rt.call(e,"isPrototypeOf")}catch(t){return!1}}function at(t){return"function"==typeof t}var ht=Array.prototype.slice;function ct(t){return Array.from?Array.from(t):ht.call(t)}function lt(t,i){return t&&at(i)&&(Array.isArray(t)||it(t.length)?ct(t).forEach((function(e,n){i.call(t,e,n,t)})):st(t)&&Object.keys(t).forEach((function(e){i.call(t,t[e],e,t)}))),t}var dt=Object.assign||function(t){for(var i=arguments.length,e=new Array(i>1?i-1:0),n=1;n<i;n++)e[n-1]=arguments[n];return st(t)&&e.length>0&&e.forEach((function(i){st(i)&&Object.keys(i).forEach((function(e){t[e]=i[e]}))})),t},pt=/\.\d*(?:0|9){12}\d*$/;function ut(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1e11;return pt.test(t)?Math.round(t*i)/i:t}var vt=/^width|height|left|top|marginLeft|marginTop$/;function ft(t,i){var e=t.style;lt(i,(function(t,i){vt.test(i)&&it(t)&&(t="".concat(t,"px")),e[i]=t}))}function mt(t,i){if(i)if(it(t.length))lt(t,(function(t){mt(t,i)}));else if(t.classList)t.classList.add(i);else{var e=t.className.trim();e?e.indexOf(i)<0&&(t.className="".concat(e," ").concat(i)):t.className=i}}function bt(t,i){i&&(it(t.length)?lt(t,(function(t){bt(t,i)})):t.classList?t.classList.remove(i):t.className.indexOf(i)>=0&&(t.className=t.className.replace(i,"")))}function gt(t,i,e){i&&(it(t.length)?lt(t,(function(t){gt(t,i,e)})):e?mt(t,i):bt(t,i))}var wt=/([a-z\d])([A-Z])/g;function xt(t){return t.replace(wt,"$1-$2").toLowerCase()}function yt(t,i){return st(t[i])?t[i]:t.dataset?t.dataset[i]:t.getAttribute("data-".concat(xt(i)))}function kt(t,i,e){st(e)?t[i]=e:t.dataset?t.dataset[i]=e:t.setAttribute("data-".concat(xt(i)),e)}var Mt=/\s\s*/,Ct=function(){var t=!1;if(a){var i=!1,e=function(){},n=Object.defineProperty({},"once",{get:function(){return t=!0,i},set:function(t){i=t}});h.addEventListener("test",e,n),h.removeEventListener("test",e,n)}return t}();function jt(t,i,e){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},s=e;i.trim().split(Mt).forEach((function(i){if(!Ct){var r=t.listeners;r&&r[i]&&r[i][e]&&(s=r[i][e],delete r[i][e],0===Object.keys(r[i]).length&&delete r[i],0===Object.keys(r).length&&delete t.listeners)}t.removeEventListener(i,s,n)}))}function zt(t,i,e){var n=arguments.length>3&&void 0!==arguments[3]?arguments[3]:{},s=e;i.trim().split(Mt).forEach((function(i){if(n.once&&!Ct){var r=t.listeners,o=void 0===r?{}:r;s=function(){delete o[i][e],t.removeEventListener(i,s,n);for(var r=arguments.length,a=new Array(r),h=0;h<r;h++)a[h]=arguments[h];e.apply(t,a)},o[i]||(o[i]={}),o[i][e]&&t.removeEventListener(i,o[i][e],n),o[i][e]=s,t.listeners=o}t.addEventListener(i,s,n)}))}function Ot(t,i,e){var n;return at(Event)&&at(CustomEvent)?n=new CustomEvent(i,{detail:e,bubbles:!0,cancelable:!0}):(n=document.createEvent("CustomEvent")).initCustomEvent(i,!0,!0,e),t.dispatchEvent(n)}function Et(t){var i=t.getBoundingClientRect();return{left:i.left+(window.pageXOffset-document.documentElement.clientLeft),top:i.top+(window.pageYOffset-document.documentElement.clientTop)}}var Nt=h.location,At=/^(\w+:)\/\/([^:/?#]*):?(\d*)/i;function Dt(t){var i=t.match(At);return null!==i&&(i[1]!==Nt.protocol||i[2]!==Nt.hostname||i[3]!==Nt.port)}function St(t){var i="timestamp=".concat((new Date).getTime());return t+(-1===t.indexOf("?")?"?":"&")+i}function Tt(t){var i=t.rotate,e=t.scaleX,n=t.scaleY,s=t.translateX,r=t.translateY,o=[];it(s)&&0!==s&&o.push("translateX(".concat(s,"px)")),it(r)&&0!==r&&o.push("translateY(".concat(r,"px)")),it(i)&&0!==i&&o.push("rotate(".concat(i,"deg)")),it(e)&&1!==e&&o.push("scaleX(".concat(e,")")),it(n)&&1!==n&&o.push("scaleY(".concat(n,")"));var a=o.length?o.join(" "):"none";return{WebkitTransform:a,msTransform:a,transform:a}}function Bt(t,e){var n=t.pageX,s=t.pageY,r={endX:n,endY:s};return e?r:i({startX:n,startY:s},r)}function _t(t){var i=t.aspectRatio,e=t.height,n=t.width,s=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"contain",r=et(n),o=et(e);if(r&&o){var a=e*i;"contain"===s&&a>n||"cover"===s&&a<n?e=n/i:n=e*i}else r?e=n/i:o&&(n=e*i);return{width:n,height:e}}var Ft=String.fromCharCode;var Wt=/^data:.*,/;function Rt(t){var i,e=new DataView(t);try{var n,s,r;if(255===e.getUint8(0)&&216===e.getUint8(1))for(var o=e.byteLength,a=2;a+1<o;){if(255===e.getUint8(a)&&225===e.getUint8(a+1)){s=a;break}a+=1}if(s){var h=s+10;if("Exif"===function(t,i,e){var n="";e+=i;for(var s=i;s<e;s+=1)n+=Ft(t.getUint8(s));return n}(e,s+4,4)){var c=e.getUint16(h);if(((n=18761===c)||19789===c)&&42===e.getUint16(h+2,n)){var l=e.getUint32(h+4,n);l>=8&&(r=h+l)}}}if(r){var d,p,u=e.getUint16(r,n);for(p=0;p<u;p+=1)if(274===e.getUint16(d=r+12*p+2,n)){i=e.getUint16(d+=8,n),e.setUint16(d,1,n);break}}}catch(t){i=1}return i}var It={render:function(){this.initContainer(),this.initCanvas(),this.initCropBox(),this.renderCanvas(),this.cropped&&this.renderCropBox()},initContainer:function(){var t=this.element,i=this.options,e=this.container,n=this.cropper,s=Number(i.minContainerWidth),r=Number(i.minContainerHeight);mt(n,z),bt(t,z);var o={width:Math.max(e.offsetWidth,s>=0?s:200),height:Math.max(e.offsetHeight,r>=0?r:100)};this.containerData=o,ft(n,{width:o.width,height:o.height}),mt(t,z),bt(n,z)},initCanvas:function(){var t=this.containerData,i=this.imageData,e=this.options.viewMode,n=Math.abs(i.rotate)%180==90,s=n?i.naturalHeight:i.naturalWidth,r=n?i.naturalWidth:i.naturalHeight,o=s/r,a=t.width,h=t.height;t.height*o>t.width?3===e?a=t.height*o:h=t.width/o:3===e?h=t.width/o:a=t.height*o;var c={aspectRatio:o,naturalWidth:s,naturalHeight:r,width:a,height:h};this.canvasData=c,this.limited=1===e||2===e,this.limitCanvas(!0,!0),c.width=Math.min(Math.max(c.width,c.minWidth),c.maxWidth),c.height=Math.min(Math.max(c.height,c.minHeight),c.maxHeight),c.left=(t.width-c.width)/2,c.top=(t.height-c.height)/2,c.oldLeft=c.left,c.oldTop=c.top,this.initialCanvasData=dt({},c)},limitCanvas:function(t,i){var e=this.options,n=this.containerData,s=this.canvasData,r=this.cropBoxData,o=e.viewMode,a=s.aspectRatio,h=this.cropped&&r;if(t){var c=Number(e.minCanvasWidth)||0,l=Number(e.minCanvasHeight)||0;o>1?(c=Math.max(c,n.width),l=Math.max(l,n.height),3===o&&(l*a>c?c=l*a:l=c/a)):o>0&&(c?c=Math.max(c,h?r.width:0):l?l=Math.max(l,h?r.height:0):h&&((l=r.height)*a>(c=r.width)?c=l*a:l=c/a));var d=_t({aspectRatio:a,width:c,height:l});l=d.height,s.minWidth=c=d.width,s.minHeight=l,s.maxWidth=1/0,s.maxHeight=1/0}if(i)if(o>(h?0:1)){var p=n.width-s.width,u=n.height-s.height;s.minLeft=Math.min(0,p),s.minTop=Math.min(0,u),s.maxLeft=Math.max(0,p),s.maxTop=Math.max(0,u),h&&this.limited&&(s.minLeft=Math.min(r.left,r.left+(r.width-s.width)),s.minTop=Math.min(r.top,r.top+(r.height-s.height)),s.maxLeft=r.left,s.maxTop=r.top,2===o&&(s.width>=n.width&&(s.minLeft=Math.min(0,p),s.maxLeft=Math.max(0,p)),s.height>=n.height&&(s.minTop=Math.min(0,u),s.maxTop=Math.max(0,u))))}else s.minLeft=-s.width,s.minTop=-s.height,s.maxLeft=n.width,s.maxTop=n.height},renderCanvas:function(t,i){var e=this.canvasData,n=this.imageData;if(i){var s=function(t){var i=t.width,e=t.height,n=t.degree;if(90==(n=Math.abs(n)%180))return{width:e,height:i};var s=n%90*Math.PI/180,r=Math.sin(s),o=Math.cos(s),a=i*o+e*r,h=i*r+e*o;return n>90?{width:h,height:a}:{width:a,height:h}}({width:n.naturalWidth*Math.abs(n.scaleX||1),height:n.naturalHeight*Math.abs(n.scaleY||1),degree:n.rotate||0}),r=s.width,o=s.height,a=e.width*(r/e.naturalWidth),h=e.height*(o/e.naturalHeight);e.left-=(a-e.width)/2,e.top-=(h-e.height)/2,e.width=a,e.height=h,e.aspectRatio=r/o,e.naturalWidth=r,e.naturalHeight=o,this.limitCanvas(!0,!1)}(e.width>e.maxWidth||e.width<e.minWidth)&&(e.left=e.oldLeft),(e.height>e.maxHeight||e.height<e.minHeight)&&(e.top=e.oldTop),e.width=Math.min(Math.max(e.width,e.minWidth),e.maxWidth),e.height=Math.min(Math.max(e.height,e.minHeight),e.maxHeight),this.limitCanvas(!1,!0),e.left=Math.min(Math.max(e.left,e.minLeft),e.maxLeft),e.top=Math.min(Math.max(e.top,e.minTop),e.maxTop),e.oldLeft=e.left,e.oldTop=e.top,ft(this.canvas,dt({width:e.width,height:e.height},Tt({translateX:e.left,translateY:e.top}))),this.renderImage(t),this.cropped&&this.limited&&this.limitCropBox(!0,!0)},renderImage:function(t){var i=this.canvasData,e=this.imageData,n=e.naturalWidth*(i.width/i.naturalWidth),s=e.naturalHeight*(i.height/i.naturalHeight);dt(e,{width:n,height:s,left:(i.width-n)/2,top:(i.height-s)/2}),ft(this.image,dt({width:e.width,height:e.height},Tt(dt({translateX:e.left,translateY:e.top},e)))),t&&this.output()},initCropBox:function(){var t=this.options,i=this.canvasData,e=t.aspectRatio||t.initialAspectRatio,n=Number(t.autoCropArea)||.8,s={width:i.width,height:i.height};e&&(i.height*e>i.width?s.height=s.width/e:s.width=s.height*e),this.cropBoxData=s,this.limitCropBox(!0,!0),s.width=Math.min(Math.max(s.width,s.minWidth),s.maxWidth),s.height=Math.min(Math.max(s.height,s.minHeight),s.maxHeight),s.width=Math.max(s.minWidth,s.width*n),s.height=Math.max(s.minHeight,s.height*n),s.left=i.left+(i.width-s.width)/2,s.top=i.top+(i.height-s.height)/2,s.oldLeft=s.left,s.oldTop=s.top,this.initialCropBoxData=dt({},s)},limitCropBox:function(t,i){var e=this.options,n=this.containerData,s=this.canvasData,r=this.cropBoxData,o=this.limited,a=e.aspectRatio;if(t){var h=Number(e.minCropBoxWidth)||0,c=Number(e.minCropBoxHeight)||0,l=o?Math.min(n.width,s.width,s.width+s.left,n.width-s.left):n.width,d=o?Math.min(n.height,s.height,s.height+s.top,n.height-s.top):n.height;h=Math.min(h,n.width),c=Math.min(c,n.height),a&&(h&&c?c*a>h?c=h/a:h=c*a:h?c=h/a:c&&(h=c*a),d*a>l?d=l/a:l=d*a),r.minWidth=Math.min(h,l),r.minHeight=Math.min(c,d),r.maxWidth=l,r.maxHeight=d}i&&(o?(r.minLeft=Math.max(0,s.left),r.minTop=Math.max(0,s.top),r.maxLeft=Math.min(n.width,s.left+s.width)-r.width,r.maxTop=Math.min(n.height,s.top+s.height)-r.height):(r.minLeft=0,r.minTop=0,r.maxLeft=n.width-r.width,r.maxTop=n.height-r.height))},renderCropBox:function(){var t=this.options,i=this.containerData,e=this.cropBoxData;(e.width>e.maxWidth||e.width<e.minWidth)&&(e.left=e.oldLeft),(e.height>e.maxHeight||e.height<e.minHeight)&&(e.top=e.oldTop),e.width=Math.min(Math.max(e.width,e.minWidth),e.maxWidth),e.height=Math.min(Math.max(e.height,e.minHeight),e.maxHeight),this.limitCropBox(!1,!0),e.left=Math.min(Math.max(e.left,e.minLeft),e.maxLeft),e.top=Math.min(Math.max(e.top,e.minTop),e.maxTop),e.oldLeft=e.left,e.oldTop=e.top,t.movable&&t.cropBoxMovable&&kt(this.face,D,e.width>=i.width&&e.height>=i.height?v:p),ft(this.cropBox,dt({width:e.width,height:e.height},Tt({translateX:e.left,translateY:e.top}))),this.cropped&&this.limited&&this.limitCanvas(!0,!0),this.disabled||this.output()},output:function(){this.preview(),Ot(this.element,F,this.getData())}},Pt={initPreview:function(){var t=this.element,i=this.crossOrigin,e=this.options.preview,n=i?this.crossOriginUrl:this.url,s=t.alt||"The image to preview",r=document.createElement("img");if(i&&(r.crossOrigin=i),r.src=n,r.alt=s,this.viewBox.appendChild(r),this.viewBoxImage=r,e){var o=e;"string"==typeof e?o=t.ownerDocument.querySelectorAll(e):e.querySelector&&(o=[e]),this.previews=o,lt(o,(function(t){var e=document.createElement("img");kt(t,S,{width:t.offsetWidth,height:t.offsetHeight,html:t.innerHTML}),i&&(e.crossOrigin=i),e.src=n,e.alt=s,e.style.cssText='display:block;width:100%;height:auto;min-width:0!important;min-height:0!important;max-width:none!important;max-height:none!important;image-orientation:0deg!important;"',t.innerHTML="",t.appendChild(e)}))}},resetPreview:function(){lt(this.previews,(function(t){var i=yt(t,S);ft(t,{width:i.width,height:i.height}),t.innerHTML=i.html,function(t,i){if(st(t[i]))try{delete t[i]}catch(e){t[i]=void 0}else if(t.dataset)try{delete t.dataset[i]}catch(e){t.dataset[i]=void 0}else t.removeAttribute("data-".concat(xt(i)))}(t,S)}))},preview:function(){var t=this.imageData,i=this.canvasData,e=this.cropBoxData,n=e.width,s=e.height,r=t.width,o=t.height,a=e.left-i.left-t.left,h=e.top-i.top-t.top;this.cropped&&!this.disabled&&(ft(this.viewBoxImage,dt({width:r,height:o},Tt(dt({translateX:-a,translateY:-h},t)))),lt(this.previews,(function(i){var e=yt(i,S),c=e.width,l=e.height,d=c,p=l,u=1;n&&(p=s*(u=c/n)),s&&p>l&&(d=n*(u=l/s),p=l),ft(i,{width:d,height:p}),ft(i.getElementsByTagName("img")[0],dt({width:r*u,height:o*u},Tt(dt({translateX:-a*u,translateY:-h*u},t))))})))}},Yt={bind:function(){var t=this.element,i=this.options,e=this.cropper;at(i.cropstart)&&zt(t,I,i.cropstart),at(i.cropmove)&&zt(t,R,i.cropmove),at(i.cropend)&&zt(t,W,i.cropend),at(i.crop)&&zt(t,F,i.crop),at(i.zoom)&&zt(t,K,i.zoom),zt(e,Y,this.onCropStart=this.cropStart.bind(this)),i.zoomable&&i.zoomOnWheel&&zt(e,$,this.onWheel=this.wheel.bind(this),{passive:!1,capture:!0}),i.toggleDragModeOnDblclick&&zt(e,P,this.onDblclick=this.dblclick.bind(this)),zt(t.ownerDocument,L,this.onCropMove=this.cropMove.bind(this)),zt(t.ownerDocument,H,this.onCropEnd=this.cropEnd.bind(this)),i.responsive&&zt(window,U,this.onResize=this.resize.bind(this))},unbind:function(){var t=this.element,i=this.options,e=this.cropper;at(i.cropstart)&&jt(t,I,i.cropstart),at(i.cropmove)&&jt(t,R,i.cropmove),at(i.cropend)&&jt(t,W,i.cropend),at(i.crop)&&jt(t,F,i.crop),at(i.zoom)&&jt(t,K,i.zoom),jt(e,Y,this.onCropStart),i.zoomable&&i.zoomOnWheel&&jt(e,$,this.onWheel,{passive:!1,capture:!0}),i.toggleDragModeOnDblclick&&jt(e,P,this.onDblclick),jt(t.ownerDocument,L,this.onCropMove),jt(t.ownerDocument,H,this.onCropEnd),i.responsive&&jt(window,U,this.onResize)}},Lt={resize:function(){if(!this.disabled){var t,i,e=this.options,n=this.container,s=this.containerData,r=n.offsetWidth/s.width,o=n.offsetHeight/s.height,a=Math.abs(r-1)>Math.abs(o-1)?r:o;1!==a&&(e.restore&&(t=this.getCanvasData(),i=this.getCropBoxData()),this.render(),e.restore&&(this.setCanvasData(lt(t,(function(i,e){t[e]=i*a}))),this.setCropBoxData(lt(i,(function(t,e){i[e]=t*a})))))}},dblclick:function(){var t,i;this.disabled||this.options.dragMode===_||this.setDragMode((i=C,((t=this.dragBox).classList?t.classList.contains(i):t.className.indexOf(i)>-1)?B:T))},wheel:function(t){var i=this,e=Number(this.options.wheelZoomRatio)||.1,n=1;this.disabled||(t.preventDefault(),this.wheeling||(this.wheeling=!0,setTimeout((function(){i.wheeling=!1}),50),t.deltaY?n=t.deltaY>0?1:-1:t.wheelDelta?n=-t.wheelDelta/120:t.detail&&(n=t.detail>0?1:-1),this.zoom(-n*e,t)))},cropStart:function(t){var i=t.buttons,e=t.button;if(!(this.disabled||("mousedown"===t.type||"pointerdown"===t.type&&"mouse"===t.pointerType)&&(it(i)&&1!==i||it(e)&&0!==e||t.ctrlKey))){var n,s=this.options,r=this.pointers;t.changedTouches?lt(t.changedTouches,(function(t){r[t.identifier]=Bt(t)})):r[t.pointerId||0]=Bt(t),n=Object.keys(r).length>1&&s.zoomable&&s.zoomOnTouch?f:yt(t.target,D),q.test(n)&&!1!==Ot(this.element,I,{originalEvent:t,action:n})&&(t.preventDefault(),this.action=n,this.cropping=!1,n===u&&(this.cropping=!0,mt(this.dragBox,N)))}},cropMove:function(t){var i=this.action;if(!this.disabled&&i){var e=this.pointers;t.preventDefault(),!1!==Ot(this.element,R,{originalEvent:t,action:i})&&(t.changedTouches?lt(t.changedTouches,(function(t){dt(e[t.identifier]||{},Bt(t,!0))})):dt(e[t.pointerId||0]||{},Bt(t,!0)),this.change(t))}},cropEnd:function(t){if(!this.disabled){var i=this.action,e=this.pointers;t.changedTouches?lt(t.changedTouches,(function(t){delete e[t.identifier]})):delete e[t.pointerId||0],i&&(t.preventDefault(),Object.keys(e).length||(this.action=""),this.cropping&&(this.cropping=!1,gt(this.dragBox,N,this.cropped&&this.options.modal)),Ot(this.element,W,{originalEvent:t,action:i}))}}},Ht={change:function(t){var e,n=this.canvasData,s=this.containerData,r=this.cropBoxData,o=this.pointers,a=this.action,h=this.options.aspectRatio,c=r.left,l=r.top,d=r.width,C=r.height,j=c+d,O=l+C,E=0,N=0,A=s.width,D=s.height,S=!0;!h&&t.shiftKey&&(h=d&&C?d/C:1),this.limited&&(N=r.minTop,A=(E=r.minLeft)+Math.min(s.width,n.width,n.left+n.width),D=N+Math.min(s.height,n.height,n.top+n.height));var T=o[Object.keys(o)[0]],B={x:T.endX-T.startX,y:T.endY-T.startY},_=function(t){switch(t){case m:j+B.x>A&&(B.x=A-j);break;case b:c+B.x<E&&(B.x=E-c);break;case w:l+B.y<N&&(B.y=N-l);break;case g:O+B.y>D&&(B.y=D-O)}};switch(a){case p:c+=B.x,l+=B.y;break;case m:if(B.x>=0&&(j>=A||h&&(l<=N||O>=D))){S=!1;break}_(m),(d+=B.x)<0&&(a=b,c-=d=-d),h&&(l+=(r.height-(C=d/h))/2);break;case w:if(B.y<=0&&(l<=N||h&&(c<=E||j>=A))){S=!1;break}_(w),l+=B.y,(C-=B.y)<0&&(a=g,l-=C=-C),h&&(c+=(r.width-(d=C*h))/2);break;case b:if(B.x<=0&&(c<=E||h&&(l<=N||O>=D))){S=!1;break}_(b),c+=B.x,(d-=B.x)<0&&(a=m,c-=d=-d),h&&(l+=(r.height-(C=d/h))/2);break;case g:if(B.y>=0&&(O>=D||h&&(c<=E||j>=A))){S=!1;break}_(g),(C+=B.y)<0&&(a=w,l-=C=-C),h&&(c+=(r.width-(d=C*h))/2);break;case x:if(h){if(B.y<=0&&(l<=N||j>=A)){S=!1;break}_(w),l+=B.y,d=(C-=B.y)*h}else _(w),_(m),B.x>=0?j<A?d+=B.x:B.y<=0&&l<=N&&(S=!1):d+=B.x,B.y<=0?l>N&&(C-=B.y,l+=B.y):(C-=B.y,l+=B.y);d<0&&C<0?(a=M,l-=C=-C,c-=d=-d):d<0?(a=y,c-=d=-d):C<0&&(a=k,l-=C=-C);break;case y:if(h){if(B.y<=0&&(l<=N||c<=E)){S=!1;break}_(w),l+=B.y,c+=r.width-(d=(C-=B.y)*h)}else _(w),_(b),B.x<=0?c>E?(d-=B.x,c+=B.x):B.y<=0&&l<=N&&(S=!1):(d-=B.x,c+=B.x),B.y<=0?l>N&&(C-=B.y,l+=B.y):(C-=B.y,l+=B.y);d<0&&C<0?(a=k,l-=C=-C,c-=d=-d):d<0?(a=x,c-=d=-d):C<0&&(a=M,l-=C=-C);break;case M:if(h){if(B.x<=0&&(c<=E||O>=D)){S=!1;break}_(b),c+=B.x,C=(d-=B.x)/h}else _(g),_(b),B.x<=0?c>E?(d-=B.x,c+=B.x):B.y>=0&&O>=D&&(S=!1):(d-=B.x,c+=B.x),B.y>=0?O<D&&(C+=B.y):C+=B.y;d<0&&C<0?(a=x,l-=C=-C,c-=d=-d):d<0?(a=k,c-=d=-d):C<0&&(a=y,l-=C=-C);break;case k:if(h){if(B.x>=0&&(j>=A||O>=D)){S=!1;break}_(m),C=(d+=B.x)/h}else _(g),_(m),B.x>=0?j<A?d+=B.x:B.y>=0&&O>=D&&(S=!1):d+=B.x,B.y>=0?O<D&&(C+=B.y):C+=B.y;d<0&&C<0?(a=y,l-=C=-C,c-=d=-d):d<0?(a=M,c-=d=-d):C<0&&(a=x,l-=C=-C);break;case v:this.move(B.x,B.y),S=!1;break;case f:this.zoom(function(t){var e=i({},t),n=0;return lt(t,(function(t,i){delete e[i],lt(e,(function(i){var e=Math.abs(t.startX-i.startX),s=Math.abs(t.startY-i.startY),r=Math.abs(t.endX-i.endX),o=Math.abs(t.endY-i.endY),a=Math.sqrt(e*e+s*s),h=(Math.sqrt(r*r+o*o)-a)/a;Math.abs(h)>Math.abs(n)&&(n=h)}))})),n}(o),t),S=!1;break;case u:if(!B.x||!B.y){S=!1;break}e=Et(this.cropper),c=T.startX-e.left,l=T.startY-e.top,d=r.minWidth,C=r.minHeight,B.x>0?a=B.y>0?k:x:B.x<0&&(c-=d,a=B.y>0?M:y),B.y<0&&(l-=C),this.cropped||(bt(this.cropBox,z),this.cropped=!0,this.limited&&this.limitCropBox(!0,!0))}S&&(r.width=d,r.height=C,r.left=c,r.top=l,this.action=a,this.renderCropBox()),lt(o,(function(t){t.startX=t.endX,t.startY=t.endY}))}},Xt={crop:function(){return!this.ready||this.cropped||this.disabled||(this.cropped=!0,this.limitCropBox(!0,!0),this.options.modal&&mt(this.dragBox,N),bt(this.cropBox,z),this.setCropBoxData(this.initialCropBoxData)),this},reset:function(){return this.ready&&!this.disabled&&(this.imageData=dt({},this.initialImageData),this.canvasData=dt({},this.initialCanvasData),this.cropBoxData=dt({},this.initialCropBoxData),this.renderCanvas(),this.cropped&&this.renderCropBox()),this},clear:function(){return this.cropped&&!this.disabled&&(dt(this.cropBoxData,{left:0,top:0,width:0,height:0}),this.cropped=!1,this.renderCropBox(),this.limitCanvas(!0,!0),this.renderCanvas(),bt(this.dragBox,N),mt(this.cropBox,z)),this},replace:function(t){var i=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return!this.disabled&&t&&(this.isImg&&(this.element.src=t),i?(this.url=t,this.image.src=t,this.ready&&(this.viewBoxImage.src=t,lt(this.previews,(function(i){i.getElementsByTagName("img")[0].src=t})))):(this.isImg&&(this.replaced=!0),this.options.data=null,this.uncreate(),this.load(t))),this},enable:function(){return this.ready&&this.disabled&&(this.disabled=!1,bt(this.cropper,j)),this},disable:function(){return this.ready&&!this.disabled&&(this.disabled=!0,mt(this.cropper,j)),this},destroy:function(){var t=this.element;return t[d]?(t[d]=void 0,this.isImg&&this.replaced&&(t.src=this.originalUrl),this.uncreate(),this):this},move:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t,e=this.canvasData,n=e.left,s=e.top;return this.moveTo(nt(t)?t:n+Number(t),nt(i)?i:s+Number(i))},moveTo:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t,e=this.canvasData,n=!1;return t=Number(t),i=Number(i),this.ready&&!this.disabled&&this.options.movable&&(it(t)&&(e.left=t,n=!0),it(i)&&(e.top=i,n=!0),n&&this.renderCanvas(!0)),this},zoom:function(t,i){var e=this.canvasData;return t=Number(t),this.zoomTo(e.width*(t=t<0?1/(1-t):1+t)/e.naturalWidth,null,i)},zoomTo:function(t,i,e){var n=this.options,s=this.canvasData,r=s.width,o=s.height,a=s.naturalWidth,h=s.naturalHeight;if((t=Number(t))>=0&&this.ready&&!this.disabled&&n.zoomable){var c=a*t,l=h*t;if(!1===Ot(this.element,K,{ratio:t,oldRatio:r/a,originalEvent:e}))return this;if(e){var d=this.pointers,p=Et(this.cropper),u=d&&Object.keys(d).length?function(t){var i=0,e=0,n=0;return lt(t,(function(t){i+=t.startX,e+=t.startY,n+=1})),{pageX:i/=n,pageY:e/=n}}(d):{pageX:e.pageX,pageY:e.pageY};s.left-=(u.pageX-p.left-s.left)/r*(c-r),s.top-=(u.pageY-p.top-s.top)/o*(l-o)}else ot(i)&&it(i.x)&&it(i.y)?(s.left-=(i.x-s.left)/r*(c-r),s.top-=(i.y-s.top)/o*(l-o)):(s.left-=(c-r)/2,s.top-=(l-o)/2);s.width=c,s.height=l,this.renderCanvas(!0)}return this},rotate:function(t){return this.rotateTo((this.imageData.rotate||0)+Number(t))},rotateTo:function(t){return it(t=Number(t))&&this.ready&&!this.disabled&&this.options.rotatable&&(this.imageData.rotate=t%360,this.renderCanvas(!0,!0)),this},scaleX:function(t){var i=this.imageData.scaleY;return this.scale(t,it(i)?i:1)},scaleY:function(t){var i=this.imageData.scaleX;return this.scale(it(i)?i:1,t)},scale:function(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:t,e=this.imageData,n=!1;return t=Number(t),i=Number(i),this.ready&&!this.disabled&&this.options.scalable&&(it(t)&&(e.scaleX=t,n=!0),it(i)&&(e.scaleY=i,n=!0),n&&this.renderCanvas(!0,!0)),this},getData:function(){var t,i=arguments.length>0&&void 0!==arguments[0]&&arguments[0],e=this.options,n=this.imageData,s=this.canvasData,r=this.cropBoxData;if(this.ready&&this.cropped){var o=n.width/n.naturalWidth;if(lt(t={x:r.left-s.left,y:r.top-s.top,width:r.width,height:r.height},(function(i,e){t[e]=i/o})),i){var a=Math.round(t.y+t.height),h=Math.round(t.x+t.width);t.x=Math.round(t.x),t.y=Math.round(t.y),t.width=h-t.x,t.height=a-t.y}}else t={x:0,y:0,width:0,height:0};return e.rotatable&&(t.rotate=n.rotate||0),e.scalable&&(t.scaleX=n.scaleX||1,t.scaleY=n.scaleY||1),t},setData:function(t){var i=this.options,e=this.imageData,n=this.canvasData,s={};if(this.ready&&!this.disabled&&ot(t)){var r=!1;i.rotatable&&it(t.rotate)&&t.rotate!==e.rotate&&(e.rotate=t.rotate,r=!0),i.scalable&&(it(t.scaleX)&&t.scaleX!==e.scaleX&&(e.scaleX=t.scaleX,r=!0),it(t.scaleY)&&t.scaleY!==e.scaleY&&(e.scaleY=t.scaleY,r=!0)),r&&this.renderCanvas(!0,!0);var o=e.width/e.naturalWidth;it(t.x)&&(s.left=t.x*o+n.left),it(t.y)&&(s.top=t.y*o+n.top),it(t.width)&&(s.width=t.width*o),it(t.height)&&(s.height=t.height*o),this.setCropBoxData(s)}return this},getContainerData:function(){return this.ready?dt({},this.containerData):{}},getImageData:function(){return this.sized?dt({},this.imageData):{}},getCanvasData:function(){var t=this.canvasData,i={};return this.ready&<(["left","top","width","height","naturalWidth","naturalHeight"],(function(e){i[e]=t[e]})),i},setCanvasData:function(t){var i=this.canvasData,e=i.aspectRatio;return this.ready&&!this.disabled&&ot(t)&&(it(t.left)&&(i.left=t.left),it(t.top)&&(i.top=t.top),it(t.width)?(i.width=t.width,i.height=t.width/e):it(t.height)&&(i.height=t.height,i.width=t.height*e),this.renderCanvas(!0)),this},getCropBoxData:function(){var t,i=this.cropBoxData;return this.ready&&this.cropped&&(t={left:i.left,top:i.top,width:i.width,height:i.height}),t||{}},setCropBoxData:function(t){var i,e,n=this.cropBoxData,s=this.options.aspectRatio;return this.ready&&this.cropped&&!this.disabled&&ot(t)&&(it(t.left)&&(n.left=t.left),it(t.top)&&(n.top=t.top),it(t.width)&&t.width!==n.width&&(i=!0,n.width=t.width),it(t.height)&&t.height!==n.height&&(e=!0,n.height=t.height),s&&(i?n.height=n.width/s:e&&(n.width=n.height*s)),this.renderCropBox()),this},getCroppedCanvas:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!this.ready||!window.HTMLCanvasElement)return null;var i=this.canvasData,e=function(t,i,e,n){var s=i.aspectRatio,o=i.naturalWidth,a=i.naturalHeight,h=i.rotate,c=void 0===h?0:h,l=i.scaleX,d=void 0===l?1:l,p=i.scaleY,u=void 0===p?1:p,v=e.aspectRatio,f=e.naturalWidth,m=e.naturalHeight,b=n.fillColor,g=void 0===b?"transparent":b,w=n.imageSmoothingEnabled,x=void 0===w||w,y=n.imageSmoothingQuality,k=void 0===y?"low":y,M=n.maxWidth,C=void 0===M?1/0:M,j=n.maxHeight,z=void 0===j?1/0:j,O=n.minWidth,E=void 0===O?0:O,N=n.minHeight,A=void 0===N?0:N,D=document.createElement("canvas"),S=D.getContext("2d"),T=_t({aspectRatio:v,width:C,height:z}),B=_t({aspectRatio:v,width:E,height:A},"cover"),_=Math.min(T.width,Math.max(B.width,f)),F=Math.min(T.height,Math.max(B.height,m)),W=_t({aspectRatio:s,width:C,height:z}),R=_t({aspectRatio:s,width:E,height:A},"cover"),I=Math.min(W.width,Math.max(R.width,o)),P=Math.min(W.height,Math.max(R.height,a)),Y=[-I/2,-P/2,I,P];return D.width=ut(_),D.height=ut(F),S.fillStyle=g,S.fillRect(0,0,_,F),S.save(),S.translate(_/2,F/2),S.rotate(c*Math.PI/180),S.scale(d,u),S.imageSmoothingEnabled=x,S.imageSmoothingQuality=k,S.drawImage.apply(S,[t].concat(r(Y.map((function(t){return Math.floor(ut(t))}))))),S.restore(),D}(this.image,this.imageData,i,t);if(!this.cropped)return e;var n=this.getData(),s=n.x,o=n.y,a=n.width,h=n.height,c=e.width/Math.floor(i.naturalWidth);1!==c&&(s*=c,o*=c,a*=c,h*=c);var l=a/h,d=_t({aspectRatio:l,width:t.maxWidth||1/0,height:t.maxHeight||1/0}),p=_t({aspectRatio:l,width:t.minWidth||0,height:t.minHeight||0},"cover"),u=_t({aspectRatio:l,width:t.width||(1!==c?e.width:a),height:t.height||(1!==c?e.height:h)}),v=u.width,f=u.height;v=Math.min(d.width,Math.max(p.width,v)),f=Math.min(d.height,Math.max(p.height,f));var m=document.createElement("canvas"),b=m.getContext("2d");m.width=ut(v),m.height=ut(f),b.fillStyle=t.fillColor||"transparent",b.fillRect(0,0,v,f);var g=t.imageSmoothingEnabled,w=t.imageSmoothingQuality;b.imageSmoothingEnabled=void 0===g||g,w&&(b.imageSmoothingQuality=w);var x,y,k,M,C,j,z=e.width,O=e.height,E=s,N=o;E<=-a||E>z?(E=0,x=0,k=0,C=0):E<=0?(k=-E,E=0,C=x=Math.min(z,a+E)):E<=z&&(k=0,C=x=Math.min(a,z-E)),x<=0||N<=-h||N>O?(N=0,y=0,M=0,j=0):N<=0?(M=-N,N=0,j=y=Math.min(O,h+N)):N<=O&&(M=0,j=y=Math.min(h,O-N));var A=[E,N,x,y];if(C>0&&j>0){var D=v/a;A.push(k*D,M*D,C*D,j*D)}return b.drawImage.apply(b,[e].concat(r(A.map((function(t){return Math.floor(ut(t))}))))),m},setAspectRatio:function(t){var i=this.options;return this.disabled||nt(t)||(i.aspectRatio=Math.max(0,t)||NaN,this.ready&&(this.initCropBox(),this.cropped&&this.renderCropBox())),this},setDragMode:function(t){var i=this.options,e=this.dragBox,n=this.face;if(this.ready&&!this.disabled){var s=t===T,r=i.movable&&t===B;i.dragMode=t=s||r?t:_,kt(e,D,t),gt(e,C,s),gt(e,A,r),i.cropBoxMovable||(kt(n,D,t),gt(n,C,s),gt(n,A,r))}return this}},Ut=h.Cropper,$t=function(){function t(i){var e=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(function(t,i){if(!(t instanceof i))throw new TypeError("Cannot call a class as a function")}(this,t),!i||!J.test(i.tagName))throw new Error("The first argument is required and must be an <img> or <canvas> element.");this.element=i,this.options=dt({},Q,ot(e)&&e),this.cropped=!1,this.disabled=!1,this.pointers={},this.ready=!1,this.reloading=!1,this.replaced=!1,this.sized=!1,this.sizing=!1,this.init()}return i=t,e=[{key:"init",value:function(){var t,i=this.element,e=i.tagName.toLowerCase();if(!i[d]){if(i[d]=this,"img"===e){if(this.isImg=!0,t=i.getAttribute("src")||"",this.originalUrl=t,!t)return;t=i.src}else"canvas"===e&&window.HTMLCanvasElement&&(t=i.toDataURL());this.load(t)}}},{key:"load",value:function(t){var i,e,n,s,r=this;if(t){this.url=t,this.imageData={};var o=this.element,a=this.options;if(a.rotatable||a.scalable||(a.checkOrientation=!1),a.checkOrientation&&window.ArrayBuffer)if(Z.test(t))G.test(t)?this.read((i=t.replace(Wt,""),e=atob(i),n=new ArrayBuffer(e.length),lt(s=new Uint8Array(n),(function(t,i){s[i]=e.charCodeAt(i)})),n)):this.clone();else{var h=new XMLHttpRequest,c=this.clone.bind(this);this.reloading=!0,this.xhr=h,h.onabort=c,h.onerror=c,h.ontimeout=c,h.onprogress=function(){h.getResponseHeader("content-type")!==V&&h.abort()},h.onload=function(){r.read(h.response)},h.onloadend=function(){r.reloading=!1,r.xhr=null},a.checkCrossOrigin&&Dt(t)&&o.crossOrigin&&(t=St(t)),h.open("GET",t,!0),h.responseType="arraybuffer",h.withCredentials="use-credentials"===o.crossOrigin,h.send()}else this.clone()}}},{key:"read",value:function(t){var i=this.options,e=this.imageData,n=Rt(t),s=0,r=1,o=1;if(n>1){this.url=function(t,i){for(var e=[],n=new Uint8Array(t);n.length>0;)e.push(Ft.apply(null,ct(n.subarray(0,8192)))),n=n.subarray(8192);return"data:".concat(i,";base64,").concat(btoa(e.join("")))}(t,V);var a=function(t){var i=0,e=1,n=1;switch(t){case 2:e=-1;break;case 3:i=-180;break;case 4:n=-1;break;case 5:i=90,n=-1;break;case 6:i=90;break;case 7:i=90,e=-1;break;case 8:i=-90}return{rotate:i,scaleX:e,scaleY:n}}(n);s=a.rotate,r=a.scaleX,o=a.scaleY}i.rotatable&&(e.rotate=s),i.scalable&&(e.scaleX=r,e.scaleY=o),this.clone()}},{key:"clone",value:function(){var t=this.element,i=this.url,e=t.crossOrigin,n=i;this.options.checkCrossOrigin&&Dt(i)&&(e||(e="anonymous"),n=St(i)),this.crossOrigin=e,this.crossOriginUrl=n;var s=document.createElement("img");e&&(s.crossOrigin=e),s.src=n||i,s.alt=t.alt||"The image to crop",this.image=s,s.onload=this.start.bind(this),s.onerror=this.stop.bind(this),mt(s,O),t.parentNode.insertBefore(s,t.nextSibling)}},{key:"start",value:function(){var t=this,i=this.image;i.onload=null,i.onerror=null,this.sizing=!0;var e=h.navigator&&/(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(h.navigator.userAgent),n=function(i,e){dt(t.imageData,{naturalWidth:i,naturalHeight:e,aspectRatio:i/e}),t.initialImageData=dt({},t.imageData),t.sizing=!1,t.sized=!0,t.build()};if(!i.naturalWidth||e){var s=document.createElement("img"),r=document.body||document.documentElement;this.sizingImage=s,s.onload=function(){n(s.width,s.height),e||r.removeChild(s)},s.src=i.src,e||(s.style.cssText="left:0;max-height:none!important;max-width:none!important;min-height:0!important;min-width:0!important;opacity:0;position:absolute;top:0;z-index:-1;",r.appendChild(s))}else n(i.naturalWidth,i.naturalHeight)}},{key:"stop",value:function(){var t=this.image;t.onload=null,t.onerror=null,t.parentNode.removeChild(t),this.image=null}},{key:"build",value:function(){if(this.sized&&!this.ready){var t=this.element,i=this.options,e=this.image,n=t.parentNode,s=document.createElement("div");s.innerHTML='<div class="cropper-container" touch-action="none"><div class="cropper-wrap-box"><div class="cropper-canvas"></div></div><div class="cropper-drag-box"></div><div class="cropper-crop-box"><span class="cropper-view-box"></span><span class="cropper-dashed dashed-h"></span><span class="cropper-dashed dashed-v"></span><span class="cropper-center"></span><span class="cropper-face"></span><span class="cropper-line line-e" data-cropper-action="e"></span><span class="cropper-line line-n" data-cropper-action="n"></span><span class="cropper-line line-w" data-cropper-action="w"></span><span class="cropper-line line-s" data-cropper-action="s"></span><span class="cropper-point point-e" data-cropper-action="e"></span><span class="cropper-point point-n" data-cropper-action="n"></span><span class="cropper-point point-w" data-cropper-action="w"></span><span class="cropper-point point-s" data-cropper-action="s"></span><span class="cropper-point point-ne" data-cropper-action="ne"></span><span class="cropper-point point-nw" data-cropper-action="nw"></span><span class="cropper-point point-sw" data-cropper-action="sw"></span><span class="cropper-point point-se" data-cropper-action="se"></span></div></div>';var r=s.querySelector(".".concat(d,"-container")),o=r.querySelector(".".concat(d,"-canvas")),a=r.querySelector(".".concat(d,"-drag-box")),h=r.querySelector(".".concat(d,"-crop-box")),c=h.querySelector(".".concat(d,"-face"));this.container=n,this.cropper=r,this.canvas=o,this.dragBox=a,this.cropBox=h,this.viewBox=r.querySelector(".".concat(d,"-view-box")),this.face=c,o.appendChild(e),mt(t,z),n.insertBefore(r,t.nextSibling),bt(e,O),this.initPreview(),this.bind(),i.initialAspectRatio=Math.max(0,i.initialAspectRatio)||NaN,i.aspectRatio=Math.max(0,i.aspectRatio)||NaN,i.viewMode=Math.max(0,Math.min(3,Math.round(i.viewMode)))||0,mt(h,z),i.guides||mt(h.getElementsByClassName("".concat(d,"-dashed")),z),i.center||mt(h.getElementsByClassName("".concat(d,"-center")),z),i.background&&mt(r,"".concat(d,"-bg")),i.highlight||mt(c,E),i.cropBoxMovable&&(mt(c,A),kt(c,D,p)),i.cropBoxResizable||(mt(h.getElementsByClassName("".concat(d,"-line")),z),mt(h.getElementsByClassName("".concat(d,"-point")),z)),this.render(),this.ready=!0,this.setDragMode(i.dragMode),i.autoCrop&&this.crop(),this.setData(i.data),at(i.ready)&&zt(t,X,i.ready,{once:!0}),Ot(t,X)}}},{key:"unbuild",value:function(){if(this.ready){this.ready=!1,this.unbind(),this.resetPreview();var t=this.cropper.parentNode;t&&t.removeChild(this.cropper),bt(this.element,z)}}},{key:"uncreate",value:function(){this.ready?(this.unbuild(),this.ready=!1,this.cropped=!1):this.sizing?(this.sizingImage.onload=null,this.sizing=!1,this.sized=!1):this.reloading?(this.xhr.onabort=null,this.xhr.abort()):this.image&&this.stop()}}],s=[{key:"noConflict",value:function(){return window.Cropper=Ut,t}},{key:"setDefaults",value:function(t){dt(Q,ot(t)&&t)}}],e&&n(i.prototype,e),s&&n(i,s),Object.defineProperty(i,"prototype",{writable:!1}),t;var i,e,s}();return dt($t.prototype,It,Pt,Yt,Lt,Ht,Xt),$t}()}));const Y=1-.9,L={autoCropArea:.9,minCropBoxHeight:82,minCropBoxWidth:82,minContainerWidth:90,minContainerHeight:90,movable:!1,zoomable:!1,rotatable:!1,scalable:!1,zoomOnTouch:!1,zoomOnWheel:!1,toggleDragModeOnDblclick:!1,viewMode:1},H=class{constructor(e){t(this,e),this.vviinnImageCrop=i(this,"vviinnImageCrop",7),this.cropEnd=()=>{r.searchArea=a.some(this.getCropboxData()),p(),r.detectedObject=void 0,this.vviinnImageCrop.emit(this.basicEventData)},this.basicEventData=void 0,this.setShowAspectRatioError=void 0,this.showAspectRatioError=void 0,this.cropper=null,this.hidePreloader=!1}disconnectedCallback(){this.cropper&&this.cropper.destroy()}selectDetectedObject({detail:t}){const{top:i,left:e,width:n,height:s}=t.detectedObject.value.rectangle,r=this.cropper.getImageData();this.cropper.setCropBoxData((t=>{const{width:i,height:e,left:n,top:s}=t,r=82;let o={width:i,height:e,left:n,top:s};return i<r&&(o.width=r,o.left=n-(r-i)/2),e<r&&(o.height=r,o.top=s-(r-e)/2),o})({left:e*r.width,top:i*r.height,width:n*r.width,height:s*r.height}))}getCropboxData(){const{left:t,top:i,width:e,height:n}=this.cropper.getCropBoxData();return{x:t,y:i,width:e,height:n}}loadImage(){const t=this.el.shadowRoot.querySelector("img");if(t){let i={};this.cropper&&(i=this.cropper.getData(!0),this.cropper.destroy());const e=y(t),{x:n,y:s,width:o,height:h}=e,c={x:n,y:s,width:o-o*Y,height:h-h*Y};if(r.imageBounds=a.some(e),r.searchArea=a.some(c),o/h<.1||h/o<.1)return this.setShowAspectRatioError(!0),void this.el.classList.add("bordered");if(o<90||h<90)return this.el.classList.add("bordered"),void(this.hidePreloader=!0);this.cropper=new P(t,Object.assign(Object.assign({},L),{cropend:this.cropEnd,data:i}))}}renderDetectedObject(t){return e("vviinn-detected-object",{detectedObject:t,basicEventData:this.basicEventData})}renderImage(){return o.pipe(x(r.imageUrl,r.image),a.map((([t,i])=>{const[n,s]=(t=>{const i=k(t),e=M(288)(i).map((t=>t.size));return[e[0],e[1]]})(i);return e("img",{decoding:"async",width:n,height:s,src:t,draggable:!1,onLoad:()=>this.loadImage()})})),a.getOrElse((()=>null)))}render(){return e(n,null,e("div",{class:"container"},e("div",{class:"image-container"},this.renderImage(),r.detectedObjects.map((t=>this.renderDetectedObject(t)))),!r.loading&&!r.objectDetectionInProgress||this.showAspectRatioError||this.hidePreloader?null:e("div",{class:"image-preloader"},e("vviinn-preloader",null))))}get el(){return s(this)}};H.style=":host {\n min-height: 160px;\n display: flex;\n justify-content: center;\n background-color: rgba(0, 0, 0, 0.32);\n}\n\n:host(.bordered) {\n background-color: transparent;\n border: 1px solid #eaeaea;\n margin-top: 40px;\n}\n\n@media (max-width: 768px) {\n :host {\n min-height: unset;\n }\n\n :host(.bordered) {\n border: none;\n margin-top: 48px;\n }\n}\n\n.container {\n max-width: 100%;\n height: 100%;\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n}\n\n.image-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n position: relative;\n}\n\n.image-container > img {\n display: block;\n max-width: 100%;\n}\n\n.image-preloader {\n background: rgba(0, 0, 0, 0.25);\n border-radius: 4px;\n bottom: 18px;\n right: 18px;\n padding: 4px;\n pointer-events: none;\n color: white;\n position: absolute;\n z-index: 4;\n}\n\nvviinn-preloader {\n --preloader-size: 12px;\n}\n\n.cropper-container {\n direction: ltr;\n font-size: 0;\n line-height: 0;\n position: relative;\n touch-action: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n\n & img {\n backface-visibility: hidden;\n display: block;\n height: 100%;\n image-orientation: 0deg;\n max-height: none !important;\n max-width: none !important;\n min-height: 0 !important;\n min-width: 0 !important;\n width: 100%;\n }\n}\n\n.cropper-wrap-box,\n.cropper-canvas,\n.cropper-drag-box,\n.cropper-crop-box,\n.cropper-modal {\n bottom: 0;\n left: 0;\n position: absolute;\n right: 0;\n top: 0;\n}\n\n.cropper-wrap-box,\n.cropper-canvas {\n overflow: hidden;\n}\n\n.cropper-drag-box {\n background-color: #fff;\n opacity: 0;\n}\n\n.cropper-modal {\n background-color: #000;\n opacity: 0.4;\n}\n\n.cropper-view-box {\n display: block;\n height: 100%;\n overflow: hidden;\n width: 100%;\n}\n\n.cropper-view-box,\n.cropper-face {\n border-radius: 5px;\n}\n\n.cropper-face,\n.cropper-point {\n display: block;\n height: 100%;\n opacity: 0.1;\n position: absolute;\n width: 100%;\n}\n\n.cropper-face {\n left: 0;\n top: 0;\n}\n\n.cropper-point {\n --cropper-point-width: 44px;\n height: var(--cropper-point-width);\n width: var(--cropper-point-width);\n opacity: 1;\n}\n\n.point-e,\n.point-s,\n.point-w,\n.point-n {\n display: none;\n}\n\n.point-ne,\n.point-nw,\n.point-sw,\n.point-se {\n --delta: -9px;\n}\n\n.point-ne {\n cursor: nesw-resize;\n right: var(--delta);\n top: var(--delta);\n}\n\n.point-nw {\n cursor: nwse-resize;\n left: var(--delta);\n top: var(--delta);\n}\n\n.point-sw {\n cursor: nesw-resize;\n bottom: var(--delta);\n left: var(--delta);\n}\n\n.point-se {\n cursor: nwse-resize;\n bottom: var(--delta);\n right: var(--delta);\n}\n\n.cropper-point::before {\n position: absolute;\n content: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38' fill='none'%3E%3Cpath d='M3 35H23C29.6274 35 35 29.6274 35 23V3' stroke='white' stroke-width='6' stroke-linecap='square'/%3E%3C/svg%3E\");\n display: block;\n pointer-events: none;\n}\n\n.point-ne::before {\n transform: rotate(-90deg);\n left: 0px;\n top: 6px;\n}\n\n.point-nw::before {\n transform: rotate(180deg);\n left: 6px;\n top: 6px;\n}\n\n.point-sw::before {\n transform: rotate(90deg);\n left: 6px;\n top: 0px;\n}\n\n.point-se::before {\n left: 0px;\n top: 0px;\n}\n\n.cropper-invisible {\n opacity: 0;\n}\n\n.cropper-hide {\n display: block;\n height: 0;\n position: absolute;\n width: 0;\n}\n\n.cropper-hidden {\n display: none !important;\n}\n\n.cropper-move {\n cursor: move;\n}\n\n.cropper-crop {\n cursor: crosshair;\n}\n\n.cropper-disabled .cropper-drag-box,\n.cropper-disabled .cropper-face,\n.cropper-disabled .cropper-line,\n.cropper-disabled .cropper-point {\n cursor: not-allowed;\n}\n";const X=class{constructor(e){t(this,e),this.vviinnWidgetClose=i(this,"vviinnWidgetClose",7),this.active=!1,this.resetState=void 0,this.buttonElementId=void 0,this.widgetVersion=void 0,this.hideBackButton=!1,this.isFirstScreen=void 0,this.slider=!1}componentWillLoad(){S(this,this.el)}resetTopScroll(){this.el.shadowRoot.querySelector(".body").scroll({top:0})}close(){this.active=!1,setTimeout((()=>{this.vviinnWidgetClose.emit({widgetType:"VPS",campaignTypeId:"VPS",campaignTypeName:T.VPS,widgetId:this.buttonElementId,widgetVersion:this.widgetVersion})}),this.slider?500:0)}handleAnimationEnd(t){"fade-in"===t.animationName&&(this.slider=!0)}renderImage(){return o.pipe(x(r.imageUrl,r.image),a.map((([t])=>e("img",{width:"28",height:"28",src:t,class:"title-image"}))),a.getOrElse((()=>null)))}render(){return e(n,{exportparts:"secondary-action, title, close-button",class:{closed:!this.active,"first-screen":this.isFirstScreen},onAnimationEnd:t=>this.handleAnimationEnd(t)},e("div",{class:"head"},!this.hideBackButton&&e("button",{part:"secondary-action",onClick:()=>{this.resetState(),this.resetTopScroll()}},e(A,null)),e("div",{class:"title",part:"title"},this.renderImage(),e("slot",{name:"vviinn-image-search-modal-title"},j.t("imageSearchModalTitle"))),e("button",{onClick:()=>this.close(),class:"close-button",part:"close-button"},e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",viewBox:"0 0 24 24",fill:"none"},e("path",{d:"M12 13.3892L6.91958 18.4696C6.72248 18.6667 6.49095 18.7653 6.225 18.7653C5.95905 18.7653 5.72753 18.6667 5.53043 18.4696C5.33333 18.2725 5.23478 18.041 5.23478 17.775C5.23478 17.5091 5.33333 17.2776 5.53043 17.0805L10.6109 12L5.53043 6.9196C5.33333 6.7225 5.23478 6.49098 5.23478 6.22503C5.23478 5.95908 5.33333 5.72755 5.53043 5.53045C5.72753 5.33335 5.95905 5.2348 6.225 5.2348C6.49095 5.2348 6.72248 5.33335 6.91958 5.53045L12 10.6109L17.0804 5.53045C17.2775 5.33335 17.5091 5.2348 17.775 5.2348C18.041 5.2348 18.2725 5.33335 18.4696 5.53045C18.6667 5.72755 18.7652 5.95908 18.7652 6.22503C18.7652 6.49098 18.6667 6.7225 18.4696 6.9196L13.3892 12L18.4696 17.0805C18.6667 17.2776 18.7652 17.5091 18.7652 17.775C18.7652 18.041 18.6667 18.2725 18.4696 18.4696C18.2725 18.6667 18.041 18.7653 17.775 18.7653C17.5091 18.7653 17.2775 18.6667 17.0804 18.4696L12 13.3892Z",fill:"currentColor"})))),e("div",{class:"body"},e("slot",null)))}get el(){return s(this)}};X.style=":host{background:white;border-radius:24px;box-sizing:border-box;display:grid;grid-template-rows:min-content auto;max-width:960px;overflow:auto;position:relative}.head{position:absolute;width:100%;box-sizing:border-box;display:flex;align-items:center;z-index:1;padding:16px}.title{display:flex;align-items:center;transform:translateX(-6px);font-weight:600;font-size:18px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;padding:6px;color:#8d8d8d}button:hover{color:#000}@media (max-width: 768px){:host{animation-name:fade-in;animation-duration:0.5s;animation-fill-mode:forwards;border-radius:24px 24px 0 0}:host(.closed){animation-name:fade-out;animation-fill-mode:none}.head{z-index:1}:host(:not(.first-screen)) .head{position:sticky;background:#ffffff}.body{overflow-y:auto}:host(:not(.first-screen)) .body{padding-bottom:64px}.title{color:#161616;display:flex;align-items:center;font-weight:500;font-size:16px;line-height:24px;margin:0 auto}.title-image{border-radius:50%;border:1px solid rgb(244, 244, 244);-o-object-fit:cover;object-fit:cover;-o-object-position:center;object-position:center;margin-right:8px}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:none;border:none;cursor:pointer;display:grid;color:#6f6f6f;padding:0}button:hover{color:#000}:host(.first-screen) button,:host(.first-screen) button:hover{color:white}}@keyframes fade-in{from{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes fade-out{from{transform:translateY(0)}to{transform:translateY(100%)}}";const U=class{constructor(i){t(this,i)}render(){return e(n,null,e("slot",null))}};U.style=":host{animation:fade-in 0.5s ease-in-out;background:rgba(0, 0, 0, 0.5);display:block;height:100vh;left:0;overflow:hidden;position:fixed;top:0;width:100vw;z-index:9999}@keyframes fade-in{from{opacity:0.1}to{opacity:1}}";const $=class{constructor(e){t(this,e),this.vviinnWidgetClose=i(this,"vviinnWidgetClose",7),this.active=!1,this.resetState=void 0,this.buttonElementId=void 0,this.hideBackButton=!1,this.widgetVersion=void 0,this.isFirstScreen=void 0}render(){return e(n,{class:{active:this.active}},e("vviinn-overlay",null,e("vviinn-modal",{resetState:this.resetState,active:this.active,buttonElementId:this.buttonElementId,hideBackButton:this.hideBackButton,widgetVersion:this.widgetVersion,isFirstScreen:this.isFirstScreen},e("slot",null,"CONTENT"))))}};$.style=":host{display:none}:host(.active){display:block}vviinn-overlay{align-items:center;display:grid;justify-items:center;cursor:default}vviinn-modal{margin-left:24px;margin-right:24px}@media (max-width: 768px){vviinn-modal{height:100vh;height:100svh;margin-top:64px;transform:translateY(100%);width:100vw;margin-left:0;margin-right:0}vviinn-overlay{align-items:end;display:grid;justify-items:center}}";const K=class{constructor(i){t(this,i),this.privacyBadgeText=void 0}componentWillLoad(){S(this,this.el)}render(){return e(n,null,e("slot",{name:"vviinn-privacy-badge-text"},e("div",null,this.privacyBadgeText)))}get el(){return s(this)}};K.style=":host{color:#525252;font-size:12px;line-height:16px;text-align:center}:host(.invisible){color:transparent}@media (max-width: 768px){:host(.invisible){display:none}}";const V=class{constructor(i){t(this,i),this.handler=void 0}render(){return e(n,null,e("vviinn-error",null,e(z,null),e("h4",{slot:"title"},j.t("serverErrorBlock.title")),e("button",{slot:"action",onClick:this.handler},j.t("serverErrorBlock.button"))))}},q=class{constructor(i){t(this,i)}render(){return e(n,null,e("slot",null))}};q.style=":host{display:grid;justify-items:center}";const Z=({kind:t,tabindex:i,disabled:n,onClick:s,onKeyDown:r})=>{return e("div",{class:(o={kind:t,disabled:n},{"arrow-wrapper":!0,[o.kind]:!0,disabled:o.disabled}),onClick:s,tabindex:i,onKeyDown:r},e(D,null));var o},G=class{constructor(i){t(this,i),this.elementsCount=0,this.internalPosition=0,this.swipeStartPosition=a.none,this.isRTL=!1,this.showBullets=!0,this.position=0,this.showArrows=!1}positionWatchHandler(t){this.internalPosition=t,this.el.style.setProperty("--position",`${this.calculatePosition(t)}`),this.setActiveCssClassToSlide(t)}componentWillLoad(){this.isRTL="rtl"===document.dir}connectedCallback(){this.handleDomContentChanges()}handleDomContentChanges(){const t=this.el.querySelectorAll("vviinn-slide");this.elementsCount=t.length,this.el.style.setProperty("--num-items",`${this.elementsCount}`),this.setActiveCssClassToSlide(0)}setActiveCssClassToSlide(t){const i=this.el.querySelectorAll("vviinn-slide");i.forEach((t=>t.classList.remove("active"))),i[t].classList.add("active")}goToSlide(t){this.internalPosition=t,this.el.style.setProperty("--position",`${t}`),this.setActiveCssClassToSlide(t)}renderBullets(){return this.showBullets?e("div",{class:"controls"},C.range(0,this.elementsCount-1).map((t=>e("div",{class:{bullet:!0,active:t==Math.abs(this.internalPosition)%this.elementsCount},onClick:()=>this.goToSlide(t)})))):null}nextSlide(){this.internalPosition++,this.renderSlidePosition()}prevSlide(){const t=this.internalPosition-1;this.internalPosition=t>-1?t:this.elementsCount-1,this.renderSlidePosition()}renderSlidePosition(){const t=this.internalPosition%this.elementsCount;requestAnimationFrame((()=>{this.el.style.setProperty("--position",`${this.calculatePosition(t)}`)}))}calculatePosition(t){return this.isRTL?-1*t:t}handleKeyDown(t){if("Space"===t.key||"Enter"===t.key)switch(t.target.className.includes("prev")?"prev":"next"){case"prev":this.prevSlide();break;case"next":this.nextSlide()}}handleTouchStart(t){this.showBullets&&(this.swipeStartPosition=o.pipe(t.touches[0],a.fromNullable,a.map((t=>t.clientX))))}handleTouchEnd(t){if(!this.showBullets)return;const i=o.pipe(t.changedTouches[0],a.fromNullable,a.map((t=>t.clientX)));o.pipe(x(this.swipeStartPosition,i),a.map((([t,i])=>{return(e=t)<(n=i)?-1:e>n?1:0;var e,n})),a.map((t=>{switch(t){case 1:return this.nextSlide();case-1:return this.prevSlide()}})))}render(){return e(n,null,e("div",{class:"items-wrapper"},e("div",{class:"items",onTouchStart:t=>this.handleTouchStart(t),onTouchEnd:t=>this.handleTouchEnd(t)},e("slot",null))),this.showArrows?[e(Z,{kind:"prev",onClick:()=>this.isRTL?this.nextSlide():this.prevSlide(),onKeyDown:t=>this.handleKeyDown(t),tabindex:1,disabled:!1}),e(Z,{kind:"next",onClick:()=>this.isRTL?this.prevSlide():this.nextSlide(),onKeyDown:t=>this.handleKeyDown(t),tabindex:0,disabled:!1})]:null,this.renderBullets())}get el(){return s(this)}static get watchers(){return{position:["positionWatchHandler"]}}};G.style=":host{--color-primary-system:#0F62FE;--color-primary-hover-system:#014CDA;--color-icons-system:#2F8EDF;--spacer:8px}:host{--num-items:0;--position:0;display:grid;grid-gap:20px;justify-items:center;position:relative}.items-wrapper{overflow:hidden;width:100%}.items{box-sizing:border-box;display:grid;grid-auto-flow:column;grid-template-columns:repeat(var(--num-items), 100%);transform:translateX(calc(-100% * var(--position)));transition:transform 0.33s ease-in-out}.controls{display:grid;grid-gap:16px;grid-template-columns:repeat(var(--num-items), min-content)}.bullet{background:#e0e0e0;border-radius:50%;box-sizing:border-box;cursor:pointer;height:8px;width:8px;transition:background 0.1s ease-in-out}.bullet:hover{background:#c6c6c6}.bullet.active{background:var(--color-primary, var(--color-primary-system))}.bullet:active{background:transparent;border:2px solid var(--color-primary, var(--color-primary-system))}.arrow-wrapper{align-items:center;cursor:pointer;background:white;border:2px solid white;bottom:0;box-sizing:border-box;display:grid;height:calc(var(--spacer) * 6);justify-items:center;margin:auto;position:absolute;top:0;transform:translate3d(0, -50%, 0);transition:border 0.25ms ease-in-out;width:calc(var(--spacer) * 4)}.arrow-wrapper:active{border-color:var(--color-primary, var(--color-primary-system));opacity:0.75}.arrow-wrapper:focus{border-color:var(--color-primary, var(--color-primary-system));opacity:0.5;outline:none}.prev{left:0}.next{right:0}.next>svg{transform:rotate3d(0, 1, 0, 180deg)}.arrow-wrapper>svg{transition:fill 0.25ms ease-in-out;fill:#a8a8a8}.arrow-wrapper:hover>svg{fill:#8d8d8d}";const J=class{constructor(i){t(this,i)}componentWillLoad(){S(this,this.el)}render(){return e(n,null,e("slot",null,e("span",{class:"vviinn-teaser-text"},e("slot",{name:"vviinn-teaser-text"},j.t("teaserText")))))}get el(){return s(this)}};J.style=":host{align-items:center;display:grid;justify-items:center;grid-gap:16px}.vviinn-teaser-text{font-size:22px;font-weight:600;line-height:28px;text-align:center;white-space:pre-line}";const Q=class{constructor(i){t(this,i),this.handler=void 0}render(){return e(n,null,e("vviinn-error",null,e(z,null),e("h4",{slot:"title"},j.t("wrongAspectRatioBlock.title")),e("button",{slot:"action",onClick:this.handler},j.t("wrongAspectRatioBlock.button"))))}},tt=class{constructor(i){t(this,i),this.handler=void 0}render(){return e(n,null,e("vviinn-error",null,e(z,null),e("h4",{slot:"title"},j.t("wrongFormatBlock.title")),e("span",{slot:"text"},j.t("wrongFormatBlock.text")),e("button",{slot:"action",onClick:this.handler},j.t("wrongFormatBlock.button"))))}};export{_ as search_filters,F as vviinn_detected_object,W as vviinn_empty_results,R as vviinn_example_image,I as vviinn_image_selector,H as vviinn_image_view,X as vviinn_modal,U as vviinn_overlay,$ as vviinn_overlayed_modal,K as vviinn_privacy_badge,V as vviinn_server_error,q as vviinn_slide,G as vviinn_slider,J as vviinn_teaser,Q as vviinn_wrong_aspect_ratio,tt as vviinn_wrong_format}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{r as i,c as t,h as s,H as h,g as n}from"./p-1e83e6ba.js";import{v as o}from"./p-
|
|
1
|
+
import{r as i,c as t,h as s,H as h,g as n}from"./p-1e83e6ba.js";import{v as o}from"./p-726774f9.js";import{V as v}from"./p-7f19baa1.js";const e=class{constructor(s){i(this,s),this.vviinnWidgetLoad=t(this,"vviinnWidgetLoad",7),this.vviinnWidgetOpen=t(this,"vviinnWidgetOpen",7),this.vviinnWidgetClose=t(this,"vviinnWidgetClose",7),this.vviinnProductLoad=t(this,"vviinnProductLoad",7),this.vviinnProductClick=t(this,"vviinnProductClick",7),this.vviinnProductView=t(this,"vviinnProductView",7),this.vviinnResultLoad=t(this,"vviinnResultLoad",7),this.vviinnResultView=t(this,"vviinnResultView",7),this.vviinnNoResult=t(this,"vviinnNoResult",7),this.vviinnAddToBasket=t(this,"vviinnAddToBasket",7),this.sidebar=null,this.sidebarCloseListener=()=>{document.body.removeChild(this.sidebar)},this.token=void 0,this.productId=void 0,this.position="bottom",this.sourceImage=null,this.sidebarTitle="Visually similar products",this.modalScrollbar=!1,this.campaigns="",this.campaignType="VPR",this.locale="de-DE",this.color="",this.addStyle=!0,this.mode="continuity",this.imageWidth=300,this.currencySign="€",this.noResultText="",this.noResultShow=!0,this.gridArrowsDynamic=!1,this.excluded="",this.productDetailNewTab=!1,this.addToBasketShow=!1,this.apiPath="https://api.vviinn.com"}render(){return s(h,{onClick:()=>{this.handleClick()},role:"button",tabindex:"0"},s("vviinn-button",{addStyle:this.addStyle,part:"vviinn-button"},s("slot",null,s(v,null))))}handleClick(){const i=document.createElement("vviinn-recommendations-sidebar");i.sidebarTitle=this.sidebarTitle,i.productId=this.productId,i.token=this.token,i.position=this.position,i.sourceImage=this.sourceImage,i.widgetScrollbar=this.modalScrollbar,i.campaigns=this.campaigns,i.campaignType=this.campaignType,i.color=this.color,i.locale=this.locale,i.mode="right"===this.position?"grid":this.mode,i.imageWidth=this.imageWidth,i.currencySign=this.currencySign,i.apiPath=this.apiPath,i.buttonElementId=this.el.id,i.noResultText=this.noResultText,i.noResultShow=this.noResultShow,i.gridArrowsDynamic=this.gridArrowsDynamic,i.productDetailNewTab=this.productDetailNewTab,i.widgetVersion=o,i.showingInButton=!0,i.excluded=this.excluded,i.addToBasketShow=this.addToBasketShow,i.buttonChildren=this.el.children,this.sidebar=i,i.addEventListener("vviinnWidgetClose",this.sidebarCloseListener),document.body.append(this.sidebar)}disconnectedCallback(){this.sidebar&&this.sidebar.removeEventListener("vviinnWidgetClose",this.sidebarCloseListener)}get el(){return n(this)}};e.style=":host{display:block}";export{e as vviinn_vpr_button}
|