https://www.faber-castell.fr/dist/FC.Ecom/modules/ProductConfigurator-components-ColorFilter.f411d5fc.js

1"use strict";(self["FC.EcomwebpackJsonp"]=self["FC.EcomwebpackJsonp"]||[]).push([[6042,6314,6881,5491],{41535:(e,t)=>{var n=Symbol.for("react.element"),r=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),i=Symbol.for("react.strict_mode"),a=Symbol.for("react.profiler"),l=Symbol.for("react.provider"),c=Symbol.for("react.context"),u=Symbol.for("react.forward_ref"),s=Symbol.for("react.suspense"),f=Symbol.for("react.memo"),d=Symbol.for("react.lazy"),p=Symbol.iterator;var y={isMounted:function(){return!1},enqueueForceUpdate:function(){},enqueueReplaceState:function(){},enqueueSetState:function(){}},m=Object.assign,h={};function v(e,t,n){this.props=e,this.context=t,this.refs=h,this.updater=n||y}function b(){}function _(e,t,n){this.props=e,this.context=t,this.refs=h,this.updater=n||y}v.prototype.isReactComponent={},v.prototype.setState=function(e,t){if("object"!=typeof e&&"function"!=typeof e&&null!=e)throw Error("setState(...): takes an object of state variables to update or a function which returns an object of state variables.");this.updater.enqueueSetState(this,e,t,"setState")},v.prototype.forceUpdate=function(e){this.updater.enqueueForceUpdate(this,e,"forceUpdate")},b.prototype=v.prototype;var w=_.prototype=new b;w.constructor=_,m(w,v.prototype),w.isPureReactComponent=!0;var S=Array.isArray,g=Object.prototype.hasOwnProperty,E={current:null},C={key:!0,ref:!0,__self:!0,__source:!0};function L(e,t,r){var o,i={},a=null,l=null;if(null!=t)for(o in void 0!==t.ref&&(l=t.ref),void 0!==t.key&&(a=""+t.key),t)g.call(t,o)&&!C.hasOwnProperty(o)&&(i[o]=t[o]);var c=arguments.length-2;if(1===c)i.children=r;else if(1<c){for(var u=Array(c),s=0;s<c;s++)u[s]=arguments[s+2];i.children=u}if(e&&e.defaultProps)for(o in c=e.defaultProps)void 0===i[o]&&(i[o]=c[o]);return{$$typeof:n,type:e,key:a,ref:l,props:i,_owner:E.current}}function k(e){return"object"==typeof e&&null!==e&&e.$$typeof===n}var O=/\/+/g;function x(e,t){return"object"==typeof e&&null!==e&&null!=e.key?function(e){var t={"=":"=0",":":"=2"};return"$"+e.replace(/[=:]/g,(function(e){return t[e]}))}(""+e.key):t.toString(36)}function $(e,t,o,i,a){var l=typeof e;"undefined"!==l&&"boolean"!==l||(e=null);var c=!1;if(null===e)c=!0;else switch(l){case"string":case"number":c=!0;break;case"object":switch(e.$$typeof){case n:case r:c=!0}}if(c)return a=a(c=e),e=""===i?"."+x(c,0):i,S(a)?(o="",null!=e&&(o=e.replace(O,"$&/")+"/"),$(a,t,o,"",(function(e){return e}))):null!=a&&(k(a)&&(a=function(e,t){return{$$typeof:n,type:e.type,key:t,ref:e.ref,props:e.props,_owner:e._owner}}(a,o+(!a.key||c&&c.key===a.key?"":(""+a.key).replace(O,"$&/")+"/")+e)),t.push(a)),1;if(c=0,i=""===i?".":i+":",S(e))for(var u=0;u<e.length;u++){var s=i+x(l=e[u],u);c+=$(l,t,o,s,a)}else if(s=function(e){return null===e||"object"!=typeof e?null:"function"==typeof(e=p&&e[p]||e["@@iterator"])?e:null}(e),"function"==typeof s)for(e=s.call(e),u=0;!(l=e.next()).done;)c+=$(l=l.value,t,o,s=i+x(l,u++),a);else if("object"===l)throw t=String(e),Error("Objects are not valid as a React child (found: "+("[object Object]"===t?"object with keys {"+Object.keys(e).join(", ")+"}":t)+"). If you meant to render a collection of children, use an array instead.");return c}function R(e,t,n){if(null==e)return e;var r=[],o=0;return $(e,r,"","",(function(e){return t.call(n,e,o++)})),r}function j(e){if(-1===e._status){var t=e._result;(t=t()).then((function(t){0!==e._status&&-1!==e._status||(e._status=1,e._result=t)}),(function(t){0!==e._status&&-1!==e._status||(e._status=2,e._result=t)})),-1===e._status&&(e._status=0,e._result=t)}if(1===e._status)return e._result.default;throw e._result}var I={current:null},T={transition:null},A={ReactCurrentDispatcher:I,ReactCurrentBatchConfig:T,ReactCurrentOwner:E};t.Children={map:R,forEach:function(e,t,n){R(e,(function(){t.apply(this,arguments)}),n)},count:function(e){var t=0;return R(e,(function(){t++})),t},toArray:function(e){return R(e,(function(e){return e}))||[]},only:function(e){if(!k(e))throw Error("React.Children.only expected to receive a single React element child.");return e}},t.Component=v,t.Fragment=o,t.Profiler=a,t.PureComponent=_,t.StrictMode=i,t.Suspense=s,t.__SECRET_INT

1ERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED=A,t.cloneElement=function(e,t,r){if(null==e)throw Error("React.cloneElement(...): The argument must be a React element, but you passed "+e+".");var o=m({},e.props),i=e.key,a=e.ref,l=e._owner;if(null!=t){if(void 0!==t.ref&&(a=t.ref,l=E.current),void 0!==t.key&&(i=""+t.key),e.type&&e.type.defaultProps)var c=e.type.defaultProps;for(u in t)g.call(t,u)&&!C.hasOwnProperty(u)&&(o[u]=void 0===t[u]&&void 0!==c?c[u]:t[u])}var u=arguments.length-2;if(1===u)o.children=r;else if(1<u){c=Array(u);for(var s=0;s<u;s++)c[s]=arguments[s+2];o.children=c}return{$$typeof:n,type:e.type,key:i,ref:a,props:o,_owner:l}},t.createContext=function(e){return(e={$$typeof:c,_currentValue:e,_currentValue2:e,_threadCount:0,Provider:null,Consumer:null,_defaultValue:null,_globalName:null}).Provider={$$typeof:l,_context:e},e.Consumer=e},t.createElement=L,t.createFactory=function(e){var t=L.bind(null,e);return t.type=e,t},t.createRef=function(){return{current:null}},t.forwardRef=function(e){return{$$typeof:u,render:e}},t.isValidElement=k,t.lazy=function(e){return{$$typeof:d,_payload:{_status:-1,_result:e},_init:j}},t.memo=function(e,t){return{$$typeof:f,type:e,compare:void 0===t?null:t}},t.startTransition=function(e){var t=T.transition;T.transition={};try{e()}finally{T.transition=t}},t.unstable_act=function(){throw Error("act(...) is not supported in production builds of React.")},t.useCallback=function(e,t){return I.current.useCallback(e,t)},t.useContext=function(e){return I.current.useContext(e)},t.useDebugValue=function(){},t.useDeferredValue=function(e){return I.current.useDeferredValue(e)},t.useEffect=function(e,t){return I.current.useEffect(e,t)},t.useId=function(){return I.current.useId()},t.useImperativeHandle=function(e,t,n){return I.current.useImperativeHandle(e,t,n)},t.useInsertionEffect=function(e,t){return I.current.useInsertionEffect(e,t)},t.useLayoutEffect=function(e,t){return I.current.useLayoutEffect(e,t)},t.useMemo=function(e,t){return I.current.useMemo(e,t)},t.useReducer=function(e,t,n){return I.current.useReducer(e,t,n)},t.useRef=function(e){return I.current.useRef(e)},t.useState=function(e){return I.current.useState(e)},t.useSyncExternalStore=function(e,t,n){return I.current.useSyncExternalStore(e,t,n)},t.useTransition=function(){return I.current.useTransition()},t.version="18.2.0"},27378:(e,t,n)=>{e.exports=n(41535)},77640:(e,t,n)=>{n.r(t),n.d(t,{default:()=>a});var r=n(49964),o=n(47012),i=function(){function e(e,t){this.element=e,this.commonTexts=t,this.showSpinner=!0,this.isOpen=!1,this.html=document.querySelector("html"),this.body=document.body,this.isColorSelectorButton=this.element.classList.contains("color-selector-button"),this.isOpen=!1,this.owner=e;var n=this.isColorSelectorButton?this.element.closest(".color"):this.element;this.ajaxUrl=null==n?void 0:n.getAttribute("data-ajax-url"),this.init()}return e.setup=function(t){void 0===t&&(t='[data-module="CanvasOverlay"]'),Array.from(document.querySelectorAll(t)).filter((function(e){return!e.dataset.moduleInitialized})).forEach((function(t){var n,r={};if(t.classList.contains("color-selector-button")){var i=document.getElementById("rc-mini-cart");r.closeLabel=null===(n=(0,o.getCommonTexts)(i))||void 0===n?void 0:n.closeColorVariantSelectorLabel}e.setupSpecific(t,r,!1)}))},e.setupSpecific=function(t,n,r){var o=new e(t,n);t.dataset.moduleInitialized="true",r&&o.open()},e.setupSpecificWithCustomContent=function(t,n,r,o){var i=new e(t,n);return i.customContent=r,t.dataset.moduleInitialized="true",i.showSpinner=!1,o&&i.open(),i},e.prototype.init=function(){this.onClick(),this.onClose()},e.prototype.onClick=function(){this.element.addEventListener("click",this.open.bind(this))},e.prototype.onClose=function(){var e,t=this;null===(e=document.querySelector(".overlay__close"))||void 0===e||e.addEventListener("click",this.close.bind(this)),document.addEventListener("click",(function(e){!t.element.contains(e.target)&&t.isOpen&&t.close()}))},e.prototype.close=function(){this.isOpen=!1},e.prototype.open=function(){var e=this;this.isOpen=!0,this.createEmptyOverlay();var t=document.querySelector(".off-canvas__slide");this.showSpinner&&t.classList.add("spinner-loading"),setTimeout((function(){t&&t.classList.add("animated"),e.html.classList.add("lock-screen"),e.body.classList.add("lock-screen","off-canvas__opened")}),100),window.FaberCastell.initModules()},e.prototype.createEmptyOverlay=function(){var e,t=document.querySelector(".canvas-overlay"),n=this.owner.getAttribute("data-controls"),o=this.owner.getAttribute("data-dialog-label"),i=(0,r.AQ)("\n                <section".concat(o?' aria-label="'.concat(o,'"'):"",' class="empty off-canvas__slide ').concat(this.isColorSelectorButton&&"color-selector",'" data-module="CanvasOverlayEvents"').

1concat(n?' id="'.concat(n,'"'):"",' role="dialog">\n                    <button class="overlay__close" aria-label="').concat(null===(e=this.commonTexts)||void 0===e?void 0:e.closeLabel,'" type="button">\n                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">\n                            <path fill-rule="evenodd" clip-rule="evenodd" d="M18.364 7.05024L16.9497 5.63603L12 10.5858L7.05025 5.63603L5.63604 7.05024L10.5858 12L5.63604 16.9497L7.05025 18.3639L12 13.4142L16.9497 18.3639L18.364 16.9497L13.4142 12L18.364 7.05024Z" fill="#222222"/>\n                            <mask id="mask0_322_39177" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="5" y="5" width="14" height="14">\n                              <path fill-rule="evenodd" clip-rule="evenodd" d="M18.364 7.05024L16.9497 5.63603L12 10.5858L7.05025 5.63603L5.63604 7.05024L10.5858 12L5.63604 16.9497L7.05025 18.3639L12 13.4142L16.9497 18.3639L18.364 16.9497L13.4142 12L18.364 7.05024Z" fill="white"/>\n                            </mask>\n                            <g mask="url(#mask0_322_39177)">\n                              <rect width="24" height="24" fill="#222222"/>\n                            </g>\n                        </svg> \n                    </button>\n\n                    <div class="canvas-overlay__content" aria-live="polite">\n                        <div class="spinner lazy-spinner">\n                        </div>\n                    </div>\n                </section>\n            '));t&&(this.body.prepend(i),n&&this.owner.setAttribute("aria-controls",n),this.owner.setAttribute("aria-expanded","true")),this.customContent?(this.customContent(document.querySelector(".canvas-overlay__content")),this.initModules()):this.fetchDataOnClick()},e.prototype.fetchDataOnClick=function(){var e=this,t="".concat(window.location.origin+"/"+this.ajaxUrl);fetch(t,{credentials:"include"}).then((function(e){return e.text()})).then((function(t){document.querySelector(".canvas-overlay__content").innerHTML=t,e.initModules()})).catch((function(e){return console.error(e)}))},e.prototype.initModules=function(){var e=document.querySelector(".off-canvas__slide");this.showSpinner&&e.classList.remove("spinner-loading");var t=e.querySelector("#color-table-headline");t&&e.setAttribute("aria-labelledby",t.id),window.FaberCastell.initModules()},e}();const a=i;new i.setup}

1,56243:(e,t,n)=>{n.r(t),n.d(t,{default:()=>l});var r=n(27378),o=n(15211),i=n(77640),a=n(47012);const l=function(e){var t,n=e.colorFilterProps,l=n.colors.find((function(e){return e.isSelected})),c=document.getElementById("rc-mini-cart"),u=null===(t=(0,a.getCommonTexts)(c))||void 0===t?void 0:t.closeColorVariantSelectorLabel;return(0,r.useEffect)((function(){window.FaberCastell.addModules(["CanvasOverlay"])}),[]),r.createElement(r.Fragment,null,r.createElement("svg",null),r.createElement("div",{id:"color-filter-label",className:"color-filter__label"}," ",n.label," "),r.createElement("button",{"aria-describedby":"color-filter-label","data-controls":"color-variant-selector",onClick:function(e){var t=e.currentTarget;i.default.setupSpecific(t,{closeLabel:u},!0)},type:"button",className:"color-selector-button custom-select canvas-overlay"},r.createElement(o.default,{showWhen:(n.colorTextureImageUrl.length||0)>0},r.createElement("img",{className:"color-filter__img",alt:l.name,src:n.colorTextureImageUrl,width:"80",height:"40"})),r.createElement("div",{className:"color-filter__title"}," ",n.title," "),r.createElement("svg",{className:"custom-select__dropdown-handle"})," //TODO",r.createElement("div",{className:"color-filter__content"},r.createElement("span",null,l.name))))}},15211:(e,t,n)=>{n.r(t),n.d(t,{default:()=>o});var r=n(27378);const o=function(e){var t=e.showWhen,n=e.children;return t?r.createElement(r.Fragment,null,n):r.createElement(r.Fragment,null)}}}]);