@crystaldesign/diva-web-planner-react 24.13.0-beta.9 → 24.13.0-rc.1

package/build/umd/7757.diva-web-planner-react.umd.min.js

@@ -1,2 +1,2 @@
 /*! For license information please see 7757.diva-web-planner-react.umd.min.js.LICENSE.txt */
-(self.webpackChunkCrystaldesignDivaWebPlannerReact=self.webpackChunkCrystaldesignDivaWebPlannerReact||[]).push([[7757],{58902:(e,t,n)=>{"use strict";n.d(t,{Z:()=>b});var o=n(80248),r=n(72874),a=n(87363),c=n.n(a),i=n(47514),s=n(34155);!function(){const e={STAGE:"production"};try{if(s)return s.env=Object.assign({},s.env),void Object.assign(s.env,e)}catch(e){}globalThis.process={env:e}}();var u="cube-face-obv-V";function clearTextSelection(){var e,t,n;if(window.getSelection)if(null!==(e=window.getSelection())&&void 0!==e&&e.empty)null===(n=window.getSelection())||void 0===n||n.empty();else if(null!==(t=window.getSelection())&&void 0!==t&&t.removeAllRanges){var o;null===(o=window.getSelection())||void 0===o||o.removeAllRanges()}}function ownKeys$3(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function _objectSpread$3(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ownKeys$3(Object(n),!0).forEach((function(t){(0,o.Z)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ownKeys$3(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function isNumericalObject(e){return"number"==typeof e[Object.keys(e)[0]]}!function styleInject(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(":root {\n  --faceTransparency: 0.7;\n  --size: 120px;\n  --fontSize: 1.4rem;\n}\n\n.control-element-container-SW7qx,\n.control-element-container-SW7qx * {\n  box-sizing: border-box;\n  -moz-user-select: none;\n   -ms-user-select: none;\n       user-select: none;\n  -webkit-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-app-region: no-drag;\n  cursor: default;\n  opacity: 1;\n}\n\n.hidden-Tqm-e {\n  opacity: 0;\n  transition: opacity calc(var(--autoHideDuration) / 2);\n  transition-delay: calc(var(--autoHideDuration) / 2);\n}\n\n.control-element-container-SW7qx {\n  width: 100%;\n  height: 100%;\n  perspective: 400px;\n}\n\n.control-element-WF71u {\n  width: 120px;\n  width: var(--size);\n  height: 120px;\n  height: var(--size);\n  position: relative;\n  transform-style: preserve-3d;\n  transform: scale(var(--zoomFactor)) translateZ(-100px)\n    rotate3d(1, 0, 0, var(--rotX)) rotate3d(0, 1, 0, var(--rotY));\n}\n\n.control-element-WF71u .cube-face-obv-V {\n  outline: 1px solid transparent;\n}\n\n.cube-face-obv-V {\n  position: absolute;\n  width: 120px;\n  width: var(--size);\n  height: 120px;\n  height: var(--size);\n  border: 2px solid black;\n  line-height: 120px;\n  line-height: var(--size);\n  color: rgba(255, 255, 255, 0.4);\n  text-align: center;\n  text-transform: uppercase;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-family: sans-serif;\n  font-size: 1.4rem;\n  font-size: var(--fontSize);\n  transition: background 0.2s;\n}\n\n.cube-face-obv-V:hover {\n  --faceTransparency: 1;\n  cursor: pointer;\n}\n\n.cube-face-front-Frhsh {\n  background: rgba(0, 0, 0, 0.7);\n  background: rgba(0, 0, 0, var(--faceTransparency));\n  transform: rotateY(0deg) translateZ(calc(120px / 2));\n  transform: rotateY(0deg) translateZ(calc(var(--size) / 2));\n}\n.cube-face-right-LeBsy {\n  background: rgba(200, 200, 200, 0.7);\n  background: rgba(200, 200, 200, var(--faceTransparency));\n  transform: rotateY(90deg) translateZ(calc(120px / 2));\n  transform: rotateY(90deg) translateZ(calc(var(--size) / 2));\n}\n.cube-face-back-o1-8s {\n  background: rgba(0, 0, 0, 0.7);\n  background: rgba(0, 0, 0, var(--faceTransparency));\n  transform: rotateY(180deg) translateZ(calc(120px / 2));\n  transform: rotateY(180deg) translateZ(calc(var(--size) / 2));\n}\n.cube-face-left-DFZf- {\n  background: rgba(200, 200, 200, 0.7);\n  background: rgba(200, 200, 200, var(--faceTransparency));\n  transform: rotateY(-90deg) translateZ(calc(120px / 2));\n  transform: rotateY(-90deg) translateZ(calc(var(--size) / 2));\n}\n.cube-face-top-Hw8SM {\n  background: rgba(100, 100, 100, 0.7);\n  background: rgba(100, 100, 100, var(--faceTransparency));\n  transform: rotateX(90deg) translateZ(calc(120px / 2));\n  transform: rotateX(90deg) translateZ(calc(var(--size) / 2));\n}\n.cube-face-bottom-NYTq6 {\n  background: rgba(100, 100, 100, 0.7);\n  background: rgba(100, 100, 100, var(--faceTransparency));\n  transform: rotateX(-90deg) translateZ(calc(120px / 2));\n  transform: rotateX(-90deg) translateZ(calc(var(--size) / 2));\n}\n\n.rotate-icon-8ePmj {\n  --rotateIconSize: calc(var(--size) / 3);\n  position: absolute;\n  width: var(--rotateIconSize);\n}\n\n/* .rotate-icon img {\n  width: 100%;\n  height: auto;\n}\n\n.rotate-icon-horizontal {\n  top: calc(var(--size) / 2 * -1);\n  left: calc(50% - var(--rotateIconSize) / 2);\n  transform: translateZ(-100px) rotate3d(1, 0, 0, 50deg);\n}\n\n.rotate-icon-vertical {\n  top: calc(var(--size) / 2 - var(--rotateIconSize) / 2);\n  left: calc(var(--size) / 2 * -1);\n  transform: translateZ(-100px) rotate3d(0, 1, 0, 80deg);\n} */\n");const l={top:{rotX:-90,rotY:0},back:{rotX:0,rotY:180},left:{rotX:0,rotY:90},right:{rotX:0,rotY:270},front:{rotX:0,rotY:0}};function animateToRotation({targetRotation:e,currentRotation:t,onRotationChange:n,onRotationEnd:o}){!function animateObjectValues({to:e,from:t,duration:n,onAnimate:o,onAnimationEnd:r=()=>{}}){if(!isNumericalObject(e)||!isNumericalObject(t))return;const a=Object.keys(e).reduce(((n,o)=>{const r=e[o]-t[o];return _objectSpread$3(_objectSpread$3({},n),{},{[o]:r})}),{}),c=Object.keys(e).reduce(((e,t)=>{const o=a[t]/n;return _objectSpread$3(_objectSpread$3({},e),{},{[t]:o})}),{});let i=0,s=!1;const animate=(a=Date.now())=>{i||(i=a);const u=a-i,l=Object.keys(e).reduce(((e,n)=>{let o=t[n]+c[n]*u;return _objectSpread$3(_objectSpread$3({},e),{},{[n]:o})}),{});o(l),u<n&&!s?window.setTimeout((()=>animate()),1e3/60):(o(e),r(e))};return animate(),()=>{s=!0}}({from:t,to:e,duration:500,onAnimate:n,onAnimationEnd:o})}function rotateToCubeSide({side:e,currentRotation:t,onRotationChange:n,onRotationEnd:o}){animateToRotation({currentRotation:t,onRotationChange:n,onRotationEnd:o,targetRotation:l[e]})}function ownKeys$2(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function _objectSpread$2(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ownKeys$2(Object(n),!0).forEach((function(t){(0,o.Z)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ownKeys$2(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function normalizeRotationFormat(e){return function isInvertedRotation(e){return void 0!==e.horizontal}(e)?function convertFromInverted(e){return{rotY:e.horizontal,rotX:-1*e.vertical}}(e):e}function toCubeRotation(e){return _objectSpread$2(_objectSpread$2({},e),function convertToInverted(e){return{horizontal:e.rotY,vertical:-1*e.rotX}}(e))}function sanitizeRotation({rotX:e,rotY:t}){let n=e,o=t;return n>0&&(n=0),n<-90&&(n=-90),o>360&&(o-=360),o<0&&(o=360+o),{rotX:n,rotY:o}}function calculateElementRotation({startPos:e,currentPos:t,elemWidth:n}){const o=function calcAngleDegrees({x:e,y:t}){return 180*Math.atan2(t,e)/Math.PI}({x:e.x-t.x,y:e.y-t.y}),r=Math.sqrt((e.x-t.x)**2+(e.y-t.y)**2),a=210/n*r;let c=0,i=0,s="+x";return o<45&&o>=-45&&(i=-1*a,s="-y"),o<-45&&o>=-135&&(c=-1*a,s="-x"),(o<-135&&o>=-180||o>=135&&o<=180)&&(i=a,s="+y"),o>=45&&o<135&&(c=a,s="+x"),{rotX:c,rotY:i,quadrant:s}}function normalizePointerEvent(e){if(function isTouchEvent(e){return!!e.touches}(e)){const t=e.touches.item(0)||e.changedTouches.item(0);return t||{clientX:0,clientY:0,target:null}}return e}function ownKeys$1(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function _objectSpread$1(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ownKeys$1(Object(n),!0).forEach((function(t){(0,o.Z)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ownKeys$1(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function calcTwoFingerDistance(e){return Math.hypot(e.touches[0].pageX-e.touches[1].pageX,e.touches[0].pageY-e.touches[1].pageY)}function usePinch({interactionElement:e,interactionMoveElement:t=document.body,minZoom:n=-10,maxZoom:o=10,onZoomEnd:r=()=>{},zoomFactorResetDelay:c=500,maxCssScale:i=3,minCssScale:s=0,disableDefaultScrollBehaviour:u}){const[l,d]=(0,a.useState)({absoluteZoom:0,relativeZoom:0}),[b,m]=(0,a.useState)(!1),validateZoomFactor=e=>{let t=e;return t=Math.min(o,t),t=Math.max(n,t),t};function resetRelativeZoom(){window.setTimeout((()=>{d((e=>_objectSpread$1(_objectSpread$1({},e),{},{relativeZoom:0})))}),c)}(0,a.useEffect)((()=>{let n=!1;if(!e||!t)return;const pxToZoomFactor=t=>{const{width:n}=e.getBoundingClientRect();return 5/n*t};let o;function onZoomEndEvent(){d((e=>{let t=validateZoomFactor(e.absoluteZoom+e.relativeZoom);return t=function snapZoomValue(e){return.5*Math.round(e/.5)}(t),0!==e.relativeZoom&&window.requestAnimationFrame((()=>{o&&r({relativeZoom:e.relativeZoom,absoluteZoom:t,zoomCenter:o})})),_objectSpread$1(_objectSpread$1({},e),{},{absoluteZoom:t})})),n||resetRelativeZoom()}let a,c=0;function onTouchStart(t){clearTextSelection(),2===t.touches.length?(c=calcTwoFingerDistance(t),e&&(o=function calcTwoFingerCenter(e,t){const{top:n,left:o}=t.getBoundingClientRect();return{x:(e.touches[0].pageX+e.touches[1].pageX)/2-o,y:(e.touches[0].pageY+e.touches[1].pageY)/2-n}}(t,e))):c=0,u&&t.preventDefault()}function onTouchMove(e){if(!c)return;m(!0);const t=calcTwoFingerDistance(e),n=t-c;c=t,d((e=>{const t=validateZoomFactor(e.relativeZoom+pxToZoomFactor(n));return _objectSpread$1(_objectSpread$1({},e),{},{relativeZoom:t})}))}function onTouchEnd(e){e.touches.length<2&&(c=0,m(!1),onZoomEndEvent())}function onMouseWheel(t){if(!e)return;u&&t.preventDefault(),m(!0),void 0!==a&&window.clearTimeout(a),a=window.setTimeout((()=>{n||(m(!1),onZoomEndEvent())}),400);const r=-1*t.deltaY,{top:c,left:i}=e.getBoundingClientRect();o={x:t.pageX-i,y:t.pageY-c},d((e=>{const t=validateZoomFactor(e.relativeZoom+pxToZoomFactor(r));return _objectSpread$1(_objectSpread$1({},e),{},{relativeZoom:t})}))}return t.addEventListener("touchmove",onTouchMove),e.addEventListener("touchstart",onTouchStart),t.addEventListener("touchend",onTouchEnd),e.addEventListener("wheel",onMouseWheel),()=>{n=!0,t.removeEventListener("touchmove",onTouchMove),e.removeEventListener("touchstart",onTouchStart),t.removeEventListener("touchend",onTouchEnd),e.removeEventListener("wheel",onMouseWheel)}}),[e,n,o,t,c,u]);return{zoom:_objectSpread$1(_objectSpread$1({},l),{},{relativeZoomCssScaleFactor:(e=>{let t=1;return t=e<0?1-Math.abs(e/n):e/o*(i-1)+1,Math.max(t,s)})(l.relativeZoom)}),isPinching:b,setAbsoluteZoomFromOutside:function setAbsoluteZoomFromOutside(t){const n=validateZoomFactor(t);d((t=>{const o=null==e?void 0:e.getBoundingClientRect(),a=o?o.width/2:0,c=o?o.height/2:0;return window.requestAnimationFrame((()=>{r({relativeZoom:0,absoluteZoom:n,zoomCenter:{x:a,y:c}}),resetRelativeZoom()})),_objectSpread$1(_objectSpread$1({},t),{},{relativeZoom:n-t.absoluteZoom,absoluteZoom:n})}))}}}const d=["hiddenState","interactionElement","interactionMoveElement","size","onRotationChange","onZoomChange","classnames","initialRotation","cubeFaceChildren","autoHide"];function ownKeys(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(n),!0).forEach((function(t){(0,o.Z)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ownKeys(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}const b=c().forwardRef(((e,t)=>{let{hiddenState:n,interactionElement:o=document.body,interactionMoveElement:c=document.body,size:s="130px",onRotationChange:l=()=>{},onZoomChange:b=()=>{},classnames:m,initialRotation:p={rotX:0,rotY:0},cubeFaceChildren:f={back:"hinten",bottom:"",front:"vorne",left:"links",right:"rechts",top:"oben"},autoHide:v}=e,h=(0,r.Z)(e,d);const[g,y]=(0,a.useState)(sanitizeRotation(normalizeRotationFormat(p))),[j,w]=(0,a.useState)(0),onRotationEndCallback=e=>{y(e),l(toCubeRotation(e))},{zoom:S,isPinching:O,setAbsoluteZoomFromOutside:E}=usePinch(_objectSpread({interactionElement:o,interactionMoveElement:c,onZoomEnd:b},h));(0,a.useImperativeHandle)(t,(()=>({getAbsoluteZoom:()=>S.absoluteZoom,setZoom:E,rotateTo:e=>{const t=normalizeRotationFormat(e);e.smooth?animateToRotation({currentRotation:g,onRotationChange:y,onRotationEnd:onRotationEndCallback,targetRotation:t}):onRotationEndCallback(t)}})),[g,y,S]);const R=void 0!==v,[x,Z]=null!=n?n:(0,a.useState)(R),C=(0,a.useCallback)((()=>{rotateToCubeSide({currentRotation:g,onRotationChange:y,side:"back",onRotationEnd:onRotationEndCallback})}),[g,y]),T=(0,a.useCallback)((()=>{rotateToCubeSide({currentRotation:g,onRotationChange:y,side:"front",onRotationEnd:onRotationEndCallback})}),[g,y]),$=(0,a.useCallback)((()=>{rotateToCubeSide({currentRotation:g,onRotationChange:y,side:"left",onRotationEnd:onRotationEndCallback})}),[g,y]),z=(0,a.useCallback)((()=>{rotateToCubeSide({currentRotation:g,onRotationChange:y,side:"right",onRotationEnd:onRotationEndCallback})}),[g,y]),k=(0,a.useCallback)((()=>{rotateToCubeSide({currentRotation:g,onRotationChange:y,side:"top",onRotationEnd:onRotationEndCallback})}),[g,y]);(0,a.useEffect)((()=>{if(O)return void Z(!1);if(Z(!0),!o||!c)return;let e,t=!1;const{width:n}=o.getBoundingClientRect(),onPointerDown=n=>{clearTextSelection(),t=!0,Z(!1);const o=normalizePointerEvent(n);e=o},onPointerMove=o=>{t&&Z(!1);const r=normalizePointerEvent(o);if(e){const t=calculateElementRotation({startPos:{x:e.clientX,y:e.clientY},currentPos:{x:r.clientX,y:r.clientY},elemWidth:n});e=r,y((e=>{const n=sanitizeRotation({rotX:e.rotX+t.rotX,rotY:e.rotY+t.rotY});return _objectSpread(_objectSpread({},t),n)}))}},onInteractionEnd=n=>{t&&(Z(!0),e=void 0,y((e=>{const t=function snapRotation({rotX:e,rotY:t}){return{rotX:5*Math.round(e/5),rotY:5*Math.round(t/5)}}(e);let n=_objectSpread(_objectSpread({},e),t);return window.requestAnimationFrame((()=>{const e=toCubeRotation(n);l(e)})),n}))),t=!1};return o.addEventListener("touchstart",onPointerDown),o.addEventListener("mousedown",onPointerDown),c.addEventListener("touchmove",onPointerMove),c.addEventListener("mousemove",onPointerMove),c.addEventListener("touchend",onInteractionEnd),c.addEventListener("mouseup",onInteractionEnd),()=>{setTimeout((()=>{o.removeEventListener("touchstart",onPointerDown),o.removeEventListener("mousedown",onPointerDown),c.removeEventListener("touchmove",onPointerMove),c.removeEventListener("touchend",onInteractionEnd),c.removeEventListener("mousemove",onPointerMove),c.removeEventListener("mouseup",onInteractionEnd)}),0)}}),[o,c,O]);const P=(0,a.useCallback)((()=>{Z(!1)}),[Z]),F=(0,a.useCallback)((()=>{Z(!0)}),[Z]);return(0,i.jsx)("div",{className:"control-element-container-SW7qx"+(x&&R?" hidden-Tqm-e":""),style:{"--size":s,"--zoomFactor":S.relativeZoomCssScaleFactor,"--rotY":`${g.rotY}deg`,"--rotX":`${g.rotX}deg`,"--fontSize":j/4.4+"px","--autoHideDuration":(null!=v?v:0)/1e3+"s"},onMouseEnter:P,onMouseLeave:F,children:(0,i.jsxs)("div",{className:"control-element-WF71u",children:[(0,i.jsx)("div",{onClick:T,className:`${u} cube-face-front-Frhsh ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceFront}`,ref:e=>{if(e&&0===j){const{height:t}=e.getBoundingClientRect();w(t)}},children:f.front}),(0,i.jsx)("div",{onClick:C,className:`${u} cube-face-back-o1-8s ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceBack}`,children:f.back}),(0,i.jsx)("div",{onClick:z,className:`${u} cube-face-right-LeBsy ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceRight}`,children:f.right}),(0,i.jsx)("div",{onClick:$,className:`${u} cube-face-left-DFZf- ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceLeft}`,children:f.left}),(0,i.jsx)("div",{onClick:k,className:`${u} cube-face-top-Hw8SM ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceTop}`,children:f.top}),(0,i.jsx)("div",{className:`${u} cube-face-bottom-NYTq6 ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceBottom}`,children:f.bottom})]})})}))},65515:(e,t)=>{var n;!function(){"use strict";var o={}.hasOwnProperty;function classNames(){for(var e="",t=0;t<arguments.length;t++){var n=arguments[t];n&&(e=appendClass(e,parseValue(n)))}return e}function parseValue(e){if("string"==typeof e||"number"==typeof e)return e;if("object"!=typeof e)return"";if(Array.isArray(e))return classNames.apply(null,e);if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]"))return e.toString();var t="";for(var n in e)o.call(e,n)&&e[n]&&(t=appendClass(t,n));return t}function appendClass(e,t){return t?e?e+" "+t:e+t:e}e.exports?(classNames.default=classNames,e.exports=classNames):void 0===(n=function(){return classNames}.apply(t,[]))||(e.exports=n)}()}}]);
+(self.webpackChunkCrystaldesignDivaWebPlannerReact=self.webpackChunkCrystaldesignDivaWebPlannerReact||[]).push([[7757],{58902:(e,t,n)=>{"use strict";n.d(t,{Z:()=>b});var o=n(80248),r=n(72874),a=n(87363),c=n.n(a),i=n(47514),s=n(34155);!function(){const e={STAGE:"production"};try{if(s)return s.env=Object.assign({},s.env),void Object.assign(s.env,e)}catch(e){}globalThis.process={env:e}}();var u="cube-face-obv-V";function clearTextSelection(){var e,t,n;if(window.getSelection)if(null!==(e=window.getSelection())&&void 0!==e&&e.empty)null===(n=window.getSelection())||void 0===n||n.empty();else if(null!==(t=window.getSelection())&&void 0!==t&&t.removeAllRanges){var o;null===(o=window.getSelection())||void 0===o||o.removeAllRanges()}}function ownKeys$3(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function _objectSpread$3(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ownKeys$3(Object(n),!0).forEach((function(t){(0,o.Z)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ownKeys$3(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function isNumericalObject(e){return"number"==typeof e[Object.keys(e)[0]]}!function styleInject(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===n&&o.firstChild?o.insertBefore(r,o.firstChild):o.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(":root {\n  --faceTransparency: 0.7;\n  --size: 120px;\n  --fontSize: 1.4rem;\n}\n\n.control-element-container-SW7qx,\n.control-element-container-SW7qx * {\n  box-sizing: border-box;\n  -moz-user-select: none;\n   -ms-user-select: none;\n       user-select: none;\n  -webkit-user-select: none;\n  -webkit-user-drag: none;\n  -webkit-app-region: no-drag;\n  cursor: default;\n  opacity: 1;\n}\n\n.hidden-Tqm-e {\n  opacity: 0;\n  transition: opacity calc(var(--autoHideDuration) / 2);\n  transition-delay: calc(var(--autoHideDuration) / 2);\n}\n\n.control-element-container-SW7qx {\n  width: 100%;\n  height: 100%;\n  perspective: 400px;\n}\n\n.control-element-WF71u {\n  width: 120px;\n  width: var(--size);\n  height: 120px;\n  height: var(--size);\n  position: relative;\n  transform-style: preserve-3d;\n  transform: scale(var(--zoomFactor)) translateZ(-100px)\n    rotate3d(1, 0, 0, var(--rotX)) rotate3d(0, 1, 0, var(--rotY));\n}\n\n.control-element-WF71u .cube-face-obv-V {\n  outline: 1px solid transparent;\n}\n\n.cube-face-obv-V {\n  position: absolute;\n  width: 120px;\n  width: var(--size);\n  height: 120px;\n  height: var(--size);\n  border: 2px solid black;\n  line-height: 120px;\n  line-height: var(--size);\n  color: rgba(255, 255, 255, 0.4);\n  text-align: center;\n  text-transform: uppercase;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-family: sans-serif;\n  font-size: 1.4rem;\n  font-size: var(--fontSize);\n  transition: background 0.2s;\n}\n\n.cube-face-obv-V:hover {\n  --faceTransparency: 1;\n  cursor: pointer;\n}\n\n.cube-face-front-Frhsh {\n  background: rgba(0, 0, 0, 0.7);\n  background: rgba(0, 0, 0, var(--faceTransparency));\n  transform: rotateY(0deg) translateZ(calc(120px / 2));\n  transform: rotateY(0deg) translateZ(calc(var(--size) / 2));\n}\n.cube-face-right-LeBsy {\n  background: rgba(200, 200, 200, 0.7);\n  background: rgba(200, 200, 200, var(--faceTransparency));\n  transform: rotateY(90deg) translateZ(calc(120px / 2));\n  transform: rotateY(90deg) translateZ(calc(var(--size) / 2));\n}\n.cube-face-back-o1-8s {\n  background: rgba(0, 0, 0, 0.7);\n  background: rgba(0, 0, 0, var(--faceTransparency));\n  transform: rotateY(180deg) translateZ(calc(120px / 2));\n  transform: rotateY(180deg) translateZ(calc(var(--size) / 2));\n}\n.cube-face-left-DFZf- {\n  background: rgba(200, 200, 200, 0.7);\n  background: rgba(200, 200, 200, var(--faceTransparency));\n  transform: rotateY(-90deg) translateZ(calc(120px / 2));\n  transform: rotateY(-90deg) translateZ(calc(var(--size) / 2));\n}\n.cube-face-top-Hw8SM {\n  background: rgba(100, 100, 100, 0.7);\n  background: rgba(100, 100, 100, var(--faceTransparency));\n  transform: rotateX(90deg) translateZ(calc(120px / 2));\n  transform: rotateX(90deg) translateZ(calc(var(--size) / 2));\n}\n.cube-face-bottom-NYTq6 {\n  background: rgba(100, 100, 100, 0.7);\n  background: rgba(100, 100, 100, var(--faceTransparency));\n  transform: rotateX(-90deg) translateZ(calc(120px / 2));\n  transform: rotateX(-90deg) translateZ(calc(var(--size) / 2));\n}\n\n.rotate-icon-8ePmj {\n  --rotateIconSize: calc(var(--size) / 3);\n  position: absolute;\n  width: var(--rotateIconSize);\n}\n\n/* .rotate-icon img {\n  width: 100%;\n  height: auto;\n}\n\n.rotate-icon-horizontal {\n  top: calc(var(--size) / 2 * -1);\n  left: calc(50% - var(--rotateIconSize) / 2);\n  transform: translateZ(-100px) rotate3d(1, 0, 0, 50deg);\n}\n\n.rotate-icon-vertical {\n  top: calc(var(--size) / 2 - var(--rotateIconSize) / 2);\n  left: calc(var(--size) / 2 * -1);\n  transform: translateZ(-100px) rotate3d(0, 1, 0, 80deg);\n} */\n");const l={top:{rotX:-90,rotY:0},back:{rotX:0,rotY:180},left:{rotX:0,rotY:90},right:{rotX:0,rotY:270},front:{rotX:0,rotY:0}};function animateToRotation({targetRotation:e,currentRotation:t,onRotationChange:n,onRotationEnd:o}){!function animateObjectValues({to:e,from:t,duration:n,onAnimate:o,onAnimationEnd:r=(()=>{})}){if(!isNumericalObject(e)||!isNumericalObject(t))return;const a=Object.keys(e).reduce(((n,o)=>{const r=e[o]-t[o];return _objectSpread$3(_objectSpread$3({},n),{},{[o]:r})}),{}),c=Object.keys(e).reduce(((e,t)=>{const o=a[t]/n;return _objectSpread$3(_objectSpread$3({},e),{},{[t]:o})}),{});let i=0,s=!1;const animate=(a=Date.now())=>{i||(i=a);const u=a-i,l=Object.keys(e).reduce(((e,n)=>{let o=t[n]+c[n]*u;return _objectSpread$3(_objectSpread$3({},e),{},{[n]:o})}),{});o(l),u<n&&!s?window.setTimeout((()=>animate()),1e3/60):(o(e),r(e))};return animate(),()=>{s=!0}}({from:t,to:e,duration:500,onAnimate:n,onAnimationEnd:o})}function rotateToCubeSide({side:e,currentRotation:t,onRotationChange:n,onRotationEnd:o}){animateToRotation({currentRotation:t,onRotationChange:n,onRotationEnd:o,targetRotation:l[e]})}function ownKeys$2(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function _objectSpread$2(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ownKeys$2(Object(n),!0).forEach((function(t){(0,o.Z)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ownKeys$2(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function normalizeRotationFormat(e){return function isInvertedRotation(e){return void 0!==e.horizontal}(e)?function convertFromInverted(e){return{rotY:e.horizontal,rotX:-1*e.vertical}}(e):e}function toCubeRotation(e){return _objectSpread$2(_objectSpread$2({},e),function convertToInverted(e){return{horizontal:e.rotY,vertical:-1*e.rotX}}(e))}function sanitizeRotation({rotX:e,rotY:t}){let n=e,o=t;return n>0&&(n=0),n<-90&&(n=-90),o>360&&(o-=360),o<0&&(o=360+o),{rotX:n,rotY:o}}function calculateElementRotation({startPos:e,currentPos:t,elemWidth:n}){const o=function calcAngleDegrees({x:e,y:t}){return 180*Math.atan2(t,e)/Math.PI}({x:e.x-t.x,y:e.y-t.y}),r=Math.sqrt((e.x-t.x)**2+(e.y-t.y)**2),a=210/n*r;let c=0,i=0,s="+x";return o<45&&o>=-45&&(i=-1*a,s="-y"),o<-45&&o>=-135&&(c=-1*a,s="-x"),(o<-135&&o>=-180||o>=135&&o<=180)&&(i=a,s="+y"),o>=45&&o<135&&(c=a,s="+x"),{rotX:c,rotY:i,quadrant:s}}function normalizePointerEvent(e){if(function isTouchEvent(e){return!!e.touches}(e)){const t=e.touches.item(0)||e.changedTouches.item(0);return t||{clientX:0,clientY:0,target:null}}return e}function ownKeys$1(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function _objectSpread$1(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ownKeys$1(Object(n),!0).forEach((function(t){(0,o.Z)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ownKeys$1(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function calcTwoFingerDistance(e){return Math.hypot(e.touches[0].pageX-e.touches[1].pageX,e.touches[0].pageY-e.touches[1].pageY)}function usePinch({interactionElement:e,interactionMoveElement:t=document.body,minZoom:n=-10,maxZoom:o=10,onZoomEnd:r=(()=>{}),zoomFactorResetDelay:c=500,maxCssScale:i=3,minCssScale:s=0,disableDefaultScrollBehaviour:u}){const[l,d]=(0,a.useState)({absoluteZoom:0,relativeZoom:0}),[b,m]=(0,a.useState)(!1),validateZoomFactor=e=>{let t=e;return t=Math.min(o,t),t=Math.max(n,t),t};function resetRelativeZoom(){window.setTimeout((()=>{d((e=>_objectSpread$1(_objectSpread$1({},e),{},{relativeZoom:0})))}),c)}(0,a.useEffect)((()=>{let n=!1;if(!e||!t)return;const pxToZoomFactor=t=>{const{width:n}=e.getBoundingClientRect();return 5/n*t};let o;function onZoomEndEvent(){d((e=>{let t=validateZoomFactor(e.absoluteZoom+e.relativeZoom);return t=function snapZoomValue(e){return.5*Math.round(e/.5)}(t),0!==e.relativeZoom&&window.requestAnimationFrame((()=>{o&&r({relativeZoom:e.relativeZoom,absoluteZoom:t,zoomCenter:o})})),_objectSpread$1(_objectSpread$1({},e),{},{absoluteZoom:t})})),n||resetRelativeZoom()}let a,c=0;function onTouchStart(t){clearTextSelection(),2===t.touches.length?(c=calcTwoFingerDistance(t),e&&(o=function calcTwoFingerCenter(e,t){const{top:n,left:o}=t.getBoundingClientRect();return{x:(e.touches[0].pageX+e.touches[1].pageX)/2-o,y:(e.touches[0].pageY+e.touches[1].pageY)/2-n}}(t,e))):c=0,u&&t.preventDefault()}function onTouchMove(e){if(!c)return;m(!0);const t=calcTwoFingerDistance(e),n=t-c;c=t,d((e=>{const t=validateZoomFactor(e.relativeZoom+pxToZoomFactor(n));return _objectSpread$1(_objectSpread$1({},e),{},{relativeZoom:t})}))}function onTouchEnd(e){e.touches.length<2&&(c=0,m(!1),onZoomEndEvent())}function onMouseWheel(t){if(!e)return;u&&t.preventDefault(),m(!0),void 0!==a&&window.clearTimeout(a),a=window.setTimeout((()=>{n||(m(!1),onZoomEndEvent())}),400);const r=-1*t.deltaY,{top:c,left:i}=e.getBoundingClientRect();o={x:t.pageX-i,y:t.pageY-c},d((e=>{const t=validateZoomFactor(e.relativeZoom+pxToZoomFactor(r));return _objectSpread$1(_objectSpread$1({},e),{},{relativeZoom:t})}))}return t.addEventListener("touchmove",onTouchMove),e.addEventListener("touchstart",onTouchStart),t.addEventListener("touchend",onTouchEnd),e.addEventListener("wheel",onMouseWheel),()=>{n=!0,t.removeEventListener("touchmove",onTouchMove),e.removeEventListener("touchstart",onTouchStart),t.removeEventListener("touchend",onTouchEnd),e.removeEventListener("wheel",onMouseWheel)}}),[e,n,o,t,c,u]);return{zoom:_objectSpread$1(_objectSpread$1({},l),{},{relativeZoomCssScaleFactor:(e=>{let t=1;return t=e<0?1-Math.abs(e/n):e/o*(i-1)+1,Math.max(t,s)})(l.relativeZoom)}),isPinching:b,setAbsoluteZoomFromOutside:function setAbsoluteZoomFromOutside(t){const n=validateZoomFactor(t);d((t=>{const o=null==e?void 0:e.getBoundingClientRect(),a=o?o.width/2:0,c=o?o.height/2:0;return window.requestAnimationFrame((()=>{r({relativeZoom:0,absoluteZoom:n,zoomCenter:{x:a,y:c}}),resetRelativeZoom()})),_objectSpread$1(_objectSpread$1({},t),{},{relativeZoom:n-t.absoluteZoom,absoluteZoom:n})}))}}}const d=["hiddenState","interactionElement","interactionMoveElement","size","onRotationChange","onZoomChange","classnames","initialRotation","cubeFaceChildren","autoHide"];function ownKeys(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);t&&(o=o.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,o)}return n}function _objectSpread(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?ownKeys(Object(n),!0).forEach((function(t){(0,o.Z)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):ownKeys(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}const b=c().forwardRef(((e,t)=>{let{hiddenState:n,interactionElement:o=document.body,interactionMoveElement:c=document.body,size:s="130px",onRotationChange:l=(()=>{}),onZoomChange:b=(()=>{}),classnames:m,initialRotation:p={rotX:0,rotY:0},cubeFaceChildren:f={back:"hinten",bottom:"",front:"vorne",left:"links",right:"rechts",top:"oben"},autoHide:v}=e,h=(0,r.Z)(e,d);const[g,y]=(0,a.useState)(sanitizeRotation(normalizeRotationFormat(p))),[j,w]=(0,a.useState)(0),onRotationEndCallback=e=>{y(e),l(toCubeRotation(e))},{zoom:S,isPinching:O,setAbsoluteZoomFromOutside:E}=usePinch(_objectSpread({interactionElement:o,interactionMoveElement:c,onZoomEnd:b},h));(0,a.useImperativeHandle)(t,(()=>({getAbsoluteZoom:()=>S.absoluteZoom,setZoom:E,rotateTo:e=>{const t=normalizeRotationFormat(e);e.smooth?animateToRotation({currentRotation:g,onRotationChange:y,onRotationEnd:onRotationEndCallback,targetRotation:t}):onRotationEndCallback(t)}})),[g,y,S]);const R=void 0!==v,[x,Z]=null!=n?n:(0,a.useState)(R),C=(0,a.useCallback)((()=>{rotateToCubeSide({currentRotation:g,onRotationChange:y,side:"back",onRotationEnd:onRotationEndCallback})}),[g,y]),T=(0,a.useCallback)((()=>{rotateToCubeSide({currentRotation:g,onRotationChange:y,side:"front",onRotationEnd:onRotationEndCallback})}),[g,y]),$=(0,a.useCallback)((()=>{rotateToCubeSide({currentRotation:g,onRotationChange:y,side:"left",onRotationEnd:onRotationEndCallback})}),[g,y]),z=(0,a.useCallback)((()=>{rotateToCubeSide({currentRotation:g,onRotationChange:y,side:"right",onRotationEnd:onRotationEndCallback})}),[g,y]),k=(0,a.useCallback)((()=>{rotateToCubeSide({currentRotation:g,onRotationChange:y,side:"top",onRotationEnd:onRotationEndCallback})}),[g,y]);(0,a.useEffect)((()=>{if(O)return void Z(!1);if(Z(!0),!o||!c)return;let e,t=!1;const{width:n}=o.getBoundingClientRect(),onPointerDown=n=>{clearTextSelection(),t=!0,Z(!1);const o=normalizePointerEvent(n);e=o},onPointerMove=o=>{t&&Z(!1);const r=normalizePointerEvent(o);if(e){const t=calculateElementRotation({startPos:{x:e.clientX,y:e.clientY},currentPos:{x:r.clientX,y:r.clientY},elemWidth:n});e=r,y((e=>{const n=sanitizeRotation({rotX:e.rotX+t.rotX,rotY:e.rotY+t.rotY});return _objectSpread(_objectSpread({},t),n)}))}},onInteractionEnd=n=>{t&&(Z(!0),e=void 0,y((e=>{const t=function snapRotation({rotX:e,rotY:t}){return{rotX:5*Math.round(e/5),rotY:5*Math.round(t/5)}}(e);let n=_objectSpread(_objectSpread({},e),t);return window.requestAnimationFrame((()=>{const e=toCubeRotation(n);l(e)})),n}))),t=!1};return o.addEventListener("touchstart",onPointerDown),o.addEventListener("mousedown",onPointerDown),c.addEventListener("touchmove",onPointerMove),c.addEventListener("mousemove",onPointerMove),c.addEventListener("touchend",onInteractionEnd),c.addEventListener("mouseup",onInteractionEnd),()=>{setTimeout((()=>{o.removeEventListener("touchstart",onPointerDown),o.removeEventListener("mousedown",onPointerDown),c.removeEventListener("touchmove",onPointerMove),c.removeEventListener("touchend",onInteractionEnd),c.removeEventListener("mousemove",onPointerMove),c.removeEventListener("mouseup",onInteractionEnd)}),0)}}),[o,c,O]);const P=(0,a.useCallback)((()=>{Z(!1)}),[Z]),F=(0,a.useCallback)((()=>{Z(!0)}),[Z]);return(0,i.jsx)("div",{className:"control-element-container-SW7qx"+(x&&R?" hidden-Tqm-e":""),style:{"--size":s,"--zoomFactor":S.relativeZoomCssScaleFactor,"--rotY":`${g.rotY}deg`,"--rotX":`${g.rotX}deg`,"--fontSize":j/4.4+"px","--autoHideDuration":(null!=v?v:0)/1e3+"s"},onMouseEnter:P,onMouseLeave:F,children:(0,i.jsxs)("div",{className:"control-element-WF71u",children:[(0,i.jsx)("div",{onClick:T,className:`${u} cube-face-front-Frhsh ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceFront}`,ref:e=>{if(e&&0===j){const{height:t}=e.getBoundingClientRect();w(t)}},children:f.front}),(0,i.jsx)("div",{onClick:C,className:`${u} cube-face-back-o1-8s ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceBack}`,children:f.back}),(0,i.jsx)("div",{onClick:z,className:`${u} cube-face-right-LeBsy ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceRight}`,children:f.right}),(0,i.jsx)("div",{onClick:$,className:`${u} cube-face-left-DFZf- ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceLeft}`,children:f.left}),(0,i.jsx)("div",{onClick:k,className:`${u} cube-face-top-Hw8SM ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceTop}`,children:f.top}),(0,i.jsx)("div",{className:`${u} cube-face-bottom-NYTq6 ${null==m?void 0:m.cubeFace} ${null==m?void 0:m.cubeFaceBottom}`,children:f.bottom})]})})}))},65515:(e,t)=>{var n;!function(){"use strict";var o={}.hasOwnProperty;function classNames(){for(var e="",t=0;t<arguments.length;t++){var n=arguments[t];n&&(e=appendClass(e,parseValue(n)))}return e}function parseValue(e){if("string"==typeof e||"number"==typeof e)return e;if("object"!=typeof e)return"";if(Array.isArray(e))return classNames.apply(null,e);if(e.toString!==Object.prototype.toString&&!e.toString.toString().includes("[native code]"))return e.toString();var t="";for(var n in e)o.call(e,n)&&e[n]&&(t=appendClass(t,n));return t}function appendClass(e,t){return t?e?e+" "+t:e+t:e}e.exports?(classNames.default=classNames,e.exports=classNames):void 0===(n=function(){return classNames}.apply(t,[]))||(e.exports=n)}()}}]);