https://shop-cdn-prd.christ.de/_ui/dist/christ-de/mixMatchPanel.6cd5008212f835166c46.js

1/*! For license information please see mixMatchPanel.6cd5008212f835166c46.js.LICENSE.txt */
2"use strict";(self.webpackChunkchriststorefront=self.webpackChunkchriststorefront||[]).push([[8280],{83750:function(t,n,e){e.d(n,{A:function(){return c}});var r=e(49347);function o(t,n){(null==n||n>t.length)&&(n=t.length);for(var e=0,r=Array(n);e<n;e++)r[e]=t[e];return r}var i={class:"loading-spinner"},a={name:"LoadingSpinner"},c=(0,e(66262).A)(a,[["render",function(t,n,e,a,c,u){return(0,r.uX)(),(0,r.CE)("div",i,function(t){if(Array.isArray(t))return o(t)}(l=n[0]||(n[0]=[(0,r.Fv)('<div class="loading-spinner__icon"><svg fill="none" height="31" viewBox="0 0 32 31" width="32" xmlns="http://www.w3.org/2000/svg"><path d="M7.38203 1.5H15.9978H24.6135L30.9955 8.16893L15.9978 28.5L1 8.16893L7.38203 1.5Z" stroke="#D8D8D8" stroke-linecap="square" stroke-width="1.5"></path><path d="M24.5 3L15.9999 28.4813L7.28943 3" stroke="#D8D8D8" stroke-linecap="square" stroke-linejoin="bevel" stroke-width="1.5"></path><path d="M1.01208 8.17258L0.74221 7.47282L1.01208 8.92258V8.17258ZM15.7206 2.5L15.9816 1.79689L15.4507 1.80024L15.7206 2.5ZM30.9999 8.17258V8.92258L31.261 7.46947L30.9999 8.17258ZM1.28196 8.87234L15.9905 3.19976L15.4507 1.80024L0.74221 7.47282L1.28196 8.87234ZM15.4596 3.20311L30.7389 8.87569L31.261 7.46947L15.9816 1.79689L15.4596 3.20311ZM1.01208 8.92258H30.9999V7.42258H1.01208V8.92258Z" fill="#D8D8D8"></path></svg></div><div class="loading-spinner__animation"></div>',2)]))||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(l)||function(t,n){if(t){if("string"==typeof t)return o(t,n);var e={}.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,n):void 0}}(l)||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.")}());var l}]])},4948:function(t,n,e){e.r(n),e.d(n,{default:function(){return k}});var r=e(49347);function o(t,n){(null==n||n>t.length)&&(n=t.length);for(var e=0,r=Array(n);e<n;e++)r[e]=t[e];return r}var i={key:0,class:"mix-match-panel__loading"},a={key:0,class:"mix-match-panel__headline-container"},c=["textContent"],u=["src"],l={key:0,"aria-hidden":"true",class:"mix-match-panel__separator"},s={key:1,class:"mix-match-panel__overflow-tile"},d=["src"],f=e(62342),p=e(66193),h=e(83750);function v(){var t,n,e="function"==typeof Symbol?Symbol:{},r=e.iterator||"@@iterator",o=e.toStringTag||"@@toStringTag";function i(e,r,o,i){var u=r&&r.prototype instanceof c?r:c,l=Object.create(u.prototype);return m(l,"_invoke",function(e,r,o){var i,c,u,l=0,s=o||[],d=!1,f={p:0,n:0,v:t,a:p,f:p.bind(t,4),d:function(n,e){return i=n,c=0,u=t,f.n=e,a}};function p(e,r){for(c=e,u=r,n=0;!d&&l&&!o&&n<s.length;n++){var o,i=s[n],p=f.p,h=i[2];e>3?(o=h===r)&&(u=i[(c=i[4])?5:(c=3,3)],i[4]=i[5]=t):i[0]<=p&&((o=e<2&&p<i[1])?(c=0,f.v=r,f.n=i[1]):p<h&&(o=e<3||i[0]>r||r>h)&&(i[4]=e,i[5]=r,f.n=h,c=0))}if(o||e>1)return a;throw d=!0,r}return function(o,s,h){if(l>1)throw TypeError("Generator is already running");for(d&&1===s&&p(s,h),c=s,u=h;(n=c<2?t:u)||!d;){i||(c?c<3?(c>1&&(f.n=-1),p(c,u)):f.n=u:f.v=u);try{if(l=2,i){if(c||(o="next"),n=i[o]){if(!(n=n.call(i,u)))throw TypeError("iterator result is not an object");if(!n.done)return n;u=n.value,c<2&&(c=0)}else 1===c&&(n=i.return)&&n.call(i),c<2&&(u=TypeError("The iterator does not provide a '"+o+"' method"),c=1);i=t}else if((n=(d=f.n<0)?u:e.call(r,f))!==a)break}catch(n){i=t,c=1,u=n}finally{l=1}}return{value:n,done:d}}}(e,o,i),!0),l}var a={};function c(){}function u(){}function l(){}n=Object.getPrototypeOf;var s=[][r]?n(n([][r]())):(m(n={},r,function(){return this}),n),d=l.prototype=c.prototype=Object.create(s);function f(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,l):(t.__proto__=l,m(t,o,"GeneratorFunction")),t.prototype=Object.create(d),t}return u.prototype=l,m(d,"constructor",l),m(l,"constructor",u),u.displayName="GeneratorFunction",m(l,o,"GeneratorFunction"),m(d),m(d,o,"Generator"),m(d,r,function(){return this}),m(d,"toString",function(){return"[object Generator]"}),(v=function(){return{w:i,m:f}})()}function m(t,n,e,r){var o=Object.defineProperty;try{o({},"",{})}catch(t){o=0}

2m=function(t,n,e,r){function i(n,e){m(t,n,function(t){return this._invoke(n,e,t)})}n?o?o(t,n,{value:e,enumerable:!r,configurable:!r,writable:!r}):t[n]=e:(i("next",0),i("throw",1),i("return",2))},m(t,n,e,r)}function y(t,n,e,r,o,i,a){try{var c=t[i](a),u=c.value}catch(t){return void e(t)}c.done?n(u):Promise.resolve(u).then(r,o)}var g="[mix-match-panel]",b={components:{LoadingSpinner:h.A},props:["dataset"],data:function(){return{isVisible:!0,isLoading:!0,mixMatchData:null}},computed:{headline:function(){var t;return(null===(t=this.mixMatchData)||void 0===t?void 0:t.headline)||""},matchedProducts:function(){var t;return(null===(t=this.mixMatchData)||void 0===t?void 0:t.products)||[]},visibleMatchedProducts:function(){return this.matchedProducts.slice(0,3)},overflowCount:function(){return this.matchedProducts.length-2},totalCount:function(){return 1+this.matchedProducts.length}},mounted:function(){var t,n=this;return(t=v().m(function t(){var e,r,o;return v().w(function(t){for(;;)switch(t.p=t.n){case 0:if(p.U.log(g,"Mounted."),null!==(e=n.dataset)&&void 0!==e&&e.productId){t.n=1;break}return n.isVisible=!1,t.a(2);case 1:return t.p=1,t.n=2,(0,f.c$)(n.dataset.productId);case 2:(r=t.v)&&r.products&&r.products.length>=1?(n.mixMatchData=r,n.isLoading=!1):n.isVisible=!1,t.n=4;break;case 3:t.p=3,o=t.v,p.U.warn(g,"Could not load mix & match data:",o),n.isVisible=!1;case 4:return t.a(2)}},t,null,[[1,3]])}),function(){var n=this,e=arguments;return new Promise(function(r,o){var i=t.apply(n,e);function a(t){y(i,r,o,a,c,"next",t)}function c(t){y(i,r,o,a,c,"throw",t)}a(void 0)})})()},methods:{isOverflowTile:function(t){return 2===t&&this.totalCount>3},openLayer:function(){this.mixMatchData&&eventBus.trigger("openMixMatchLayer",this.mixMatchData)}}};const L=(0,e(66262).A)(b,[["render",function(t,n,e,f,p,h){var v=(0,r.g2)("LoadingSpinner");return(0,r.bo)(((0,r.uX)(),(0,r.CE)("div",{class:"mix-match-panel",role:"button",tabindex:"0",onClick:n[0]||(n[0]=function(){return h.openLayer&&h.openLayer.apply(h,arguments)}),onKeydown:[n[1]||(n[1]=(0,r.jR)(function(){return h.openLayer&&h.openLayer.apply(h,arguments)},["enter"])),n[2]||(n[2]=(0,r.jR)((0,r.D$)(function(){return h.openLayer&&h.openLayer.apply(h,arguments)},["prevent"]),["space"]))]},[p.isLoading?((0,r.uX)(),(0,r.CE)("div",i,[(0,r.bF)(v)])):((0,r.uX)(),(0,r.CE)(r.FK,{key:1},[h.headline?((0,r.uX)(),(0,r.CE)("div",a,[(0,r.Lk)("span",{class:"mix-match-panel__headline",textContent:(0,r.v_)(h.headline)},null,8,c),n[3]||(n[3]=(0,r.Lk)("svg",{class:"mix-match-panel__headline-icon icon icon--large"},[(0,r.Lk)("use",{"xlink:href":"#refresh-chevron-right"})],-1))])):(0,r.Q3)("v-if",!0),(0,r.Lk)("div",{class:(0,r.C4)(["mix-match-panel__images",{"mix-match-panel__images--double":1===h.visibleMatchedProducts.length}])},[e.dataset.productPictureUrl?((0,r.uX)(),(0,r.CE)("img",{key:0,alt:"","aria-hidden":"true",class:"mix-match-panel__image",src:e.dataset.productPictureUrl},null,8,u)):(0,r.Q3)("v-if",!0),((0,r.uX)(!0),(0,r.CE)(r.FK,null,(0,r.pI)(h.visibleMatchedProducts,function(t,e){return(0,r.uX)(),(0,r.CE)(r.FK,{key:"item-"+e},[0===e?((0,r.uX)(),(0,r.CE)("span",l,(i=n[4]||(n[4]=[(0,r.Lk)("svg",{class:"icon icon--large"},[(0,r.Lk)("use",{"xlink:href":"#refresh-plus"})],-1)]),function(t){if(Array.isArray(t))return o(t)}(i)||function(t){if("undefined"!=typeof Symbol&&null!=t[Symbol.iterator]||null!=t["@@iterator"])return Array.from(t)}(i)||function(t,n){if(t){if("string"==typeof t)return o(t,n);var e={}.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,n):void 0}}(i)||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.")}()))):(0,r.Q3)("v-if",!0),h.isOverflowTile(e)?((0,r.uX)(),(0,r.CE)("span",s,"+"+(0,r.v_)(h.overflowCount),1)):((0,r.uX)(),(0,r.CE)("img",{key:2,alt:"","aria-hidden":"true",class:"mix-match-panel__image",src:t.pictureUrl},null,8,d))],64);var i}),128))],2)],64))],544)),[[r.aG,p.isVisible]])}]]);var k=L}}]);