@webreact/webreact-components - npm Package Compare versions

Comparing version 0.4.29 to 0.4.30

dist/cjs/wr-case.cjs.entry.js

@@ -8,3 +8,3 @@ 'use strict';
 /**
- * Atropos 0.10.1
+ * Atropos 1.0.1
  * Touch-friendly 3D parallax hover effects
@@ -17,3 +17,3 @@ * https://atroposjs.com
  *
- * Released on: October 12, 2021
+ * Released on: October 18, 2021
  */
@@ -48,22 +48,2 @@
 
-var $setDuration = function $setDuration(el, duration) {
-  el.style.transitionDuration = duration;
-};
-
-var $setTransform = function $setTransform(el, transform) {
-  el.style.transform = transform;
-};
-
-var $setOpacity = function $setOpacity(el, opacity) {
-  el.style.opacity = opacity;
-};
-
-var $on = function $on(el, event, handler, props) {
-  return el.addEventListener(event, handler, props);
-};
-
-var $off = function $off(el, event, handler, props) {
-  return el.removeEventListener(event, handler, props);
-};
-
 var removeUndefinedProps = function removeUndefinedProps(obj) {
@@ -92,8 +72,7 @@ if (obj === void 0) {
     params: _extends({
+      alwaysActive: false,
       activeOffset: 50,
       shadowOffset: 50,
       shadowScale: 1,
-      durationEnter: 300,
-      durationLeave: 600,
-      rotateLock: true,
+      duration: 300,
       rotate: true,
@@ -105,2 +84,6 @@ rotateTouch: true,
       rotateYInvert: false,
+      stretchX: 0,
+      stretchY: 0,
+      stretchZ: 0,
+      commonOrigin: true,
       shadow: true,
@@ -117,13 +100,81 @@ highlight: true,
   var rotateEl;
-  var rotated;
   var scaleEl;
   var innerEl;
-  var enterRotateX;
-  var enterRotateY;
   var elBoundingClientRect;
-  var rotateXLock = true;
-  var rotateYLock = true;
+  var eventsElBoundingClientRect;
   var shadowEl;
   var highlightEl;
+  var isScrolling;
+  var clientXStart;
+  var clientYStart;
+  var queue = [];
+  var queueFrameId;
 
+  var purgeQueue = function purgeQueue() {
+    queueFrameId = requestAnimationFrame(function () {
+      queue.forEach(function (data) {
+        if (typeof data === 'function') {
+          data();
+        } else {
+          var element = data.element,
+              prop = data.prop,
+              value = data.value;
+          element.style[prop] = value;
+        }
+      });
+      queue.splice(0, queue.length);
+      purgeQueue();
+    });
+  };
+
+  purgeQueue();
+
+  var $setDuration = function $setDuration(element, value) {
+    queue.push({
+      element: element,
+      prop: 'transitionDuration',
+      value: value
+    });
+  };
+
+  var $setEasing = function $setEasing(element, value) {
+    queue.push({
+      element: element,
+      prop: 'transitionTimingFunction',
+      value: value
+    });
+  };
+
+  var $setTransform = function $setTransform(element, value) {
+    queue.push({
+      element: element,
+      prop: 'transform',
+      value: value
+    });
+  };
+
+  var $setOpacity = function $setOpacity(element, value) {
+    queue.push({
+      element: element,
+      prop: 'opacity',
+      value: value
+    });
+  };
+
+  var $setOrigin = function $setOrigin(element, value) {
+    queue.push({
+      element: element,
+      prop: 'transformOrigin',
+      value: value
+    });
+  };
+
+  var $on = function $on(element, event, handler, props) {
+    return element.addEventListener(event, handler, props);
+  };
+
+  var $off = function $off(element, event, handler, props) {
+    return element.removeEventListener(event, handler, props);
+  };
+
   var createShadow = function createShadow() {
@@ -169,3 +220,4 @@ var created;
         duration = _ref.duration,
-        opacityOnly = _ref.opacityOnly;
+        opacityOnly = _ref.opacityOnly,
+        easeOut = _ref.easeOut;
 
@@ -184,2 +236,3 @@ var getOpacity = function getOpacity(element) {
       $setDuration(childEl, duration);
+      $setEasing(childEl, easeOut ? 'ease-out' : '');
       var elementOpacity = getOpacity(childEl);
@@ -207,3 +260,108 @@
 
+  var setElements = function setElements(clientX, clientY) {
+    var isMultiple = el !== eventsEl;
+
+    if (!elBoundingClientRect) {
+      elBoundingClientRect = el.getBoundingClientRect();
+    }
+
+    if (isMultiple && !eventsElBoundingClientRect) {
+      eventsElBoundingClientRect = eventsEl.getBoundingClientRect();
+    }
+
+    if (typeof clientX === 'undefined' && typeof clientY === 'undefined') {
+      var rect = isMultiple ? eventsElBoundingClientRect : elBoundingClientRect;
+      clientX = rect.left + rect.width / 2;
+      clientY = rect.top + rect.height / 2;
+    }
+
+    var rotateX = 0;
+    var rotateY = 0;
+    var _elBoundingClientRect = elBoundingClientRect,
+        top = _elBoundingClientRect.top,
+        left = _elBoundingClientRect.left,
+        width = _elBoundingClientRect.width,
+        height = _elBoundingClientRect.height;
+    var transformOrigin;
+
+    if (!isMultiple) {
+      var centerX = width / 2;
+      var centerY = height / 2;
+      var coordX = clientX - left;
+      var coordY = clientY - top;
+      rotateY = params.rotateYMax * (coordX - centerX) / (width / 2) * -1;
+      rotateX = params.rotateXMax * (coordY - centerY) / (height / 2);
+    } else {
+      var _eventsElBoundingClie = eventsElBoundingClientRect,
+          parentTop = _eventsElBoundingClie.top,
+          parentLeft = _eventsElBoundingClie.left,
+          parentWidth = _eventsElBoundingClie.width,
+          parentHeight = _eventsElBoundingClie.height;
+      var offsetLeft = left - parentLeft;
+      var offsetTop = top - parentTop;
+
+      var _centerX = width / 2 + offsetLeft;
+
+      var _centerY = height / 2 + offsetTop;
+
+      var _coordX = clientX - parentLeft;
+
+      var _coordY = clientY - parentTop;
+
+      rotateY = params.rotateYMax * (_coordX - _centerX) / (parentWidth - width / 2) * -1;
+      rotateX = params.rotateXMax * (_coordY - _centerY) / (parentHeight - height / 2);
+      transformOrigin = clientX - left + "px " + (clientY - top) + "px";
+    }
+
+    rotateX = Math.min(Math.max(-rotateX, -params.rotateXMax), params.rotateXMax);
+    if (params.rotateXInvert) rotateX = -rotateX;
+    rotateY = Math.min(Math.max(-rotateY, -params.rotateYMax), params.rotateYMax);
+    if (params.rotateYInvert) rotateY = -rotateY;
+    var rotateXPercentage = rotateX / params.rotateXMax * 100;
+    var rotateYPercentage = rotateY / params.rotateYMax * 100;
+    var stretchX = (isMultiple ? rotateYPercentage / 100 * params.stretchX : 0) * (params.rotateYInvert ? -1 : 1);
+    var stretchY = (isMultiple ? rotateXPercentage / 100 * params.stretchY : 0) * (params.rotateXInvert ? -1 : 1);
+    var stretchZ = isMultiple ? Math.max(Math.abs(rotateXPercentage), Math.abs(rotateYPercentage)) / 100 * params.stretchZ : 0;
+    $setTransform(rotateEl, "translate3d(" + stretchX + "%, " + -stretchY + "%, " + -stretchZ + "px) rotateX(" + rotateX + "deg) rotateY(" + rotateY + "deg)");
+
+    if (transformOrigin && params.commonOrigin) {
+      $setOrigin(rotateEl, transformOrigin);
+    }
+
+    if (highlightEl) {
+      $setDuration(highlightEl, params.duration + "ms");
+      $setEasing(highlightEl, 'ease-out');
+      $setTransform(highlightEl, "translate3d(" + -rotateYPercentage * 0.25 + "%, " + rotateXPercentage * 0.25 + "%, 0)");
+      $setOpacity(highlightEl, Math.max(Math.abs(rotateXPercentage), Math.abs(rotateYPercentage)) / 100);
+    }
+
+    setChildrenOffset({
+      rotateXPercentage: rotateXPercentage,
+      rotateYPercentage: rotateYPercentage,
+      duration: params.duration + "ms",
+      easeOut: true
+    });
+    if (typeof params.onRotate === 'function') params.onRotate(rotateX, rotateY);
+  };
+
+  var activate = function activate() {
+    queue.push(function () {
+      return el.classList.add('atropos-active');
+    });
+    $setDuration(rotateEl, params.duration + "ms");
+    $setEasing(rotateEl, 'ease-out');
+    $setTransform(scaleEl, "translate3d(0,0, " + params.activeOffset + "px)");
+    $setDuration(scaleEl, params.duration + "ms");
+    $setEasing(scaleEl, 'ease-out');
+
+    if (shadowEl) {
+      $setDuration(shadowEl, params.duration + "ms");
+      $setEasing(shadowEl, 'ease-out');
+    }
+
+    self.isActive = true;
+  };
+
   var onPointerEnter = function onPointerEnter(e) {
+    isScrolling = undefined;
     if (e.type === 'pointerdown' && e.pointerType === 'mouse') return;
@@ -216,17 +374,12 @@ if (e.type === 'pointerenter' && e.pointerType !== 'mouse') return;
 
-    el.classList.add('atropos-active');
-    $setDuration(rotateEl, '0ms');
-    rotated = false;
-    enterRotateX = undefined;
-    enterRotateY = undefined;
-    rotateXLock = true;
-    rotateYLock = true;
-    $setTransform(scaleEl, "translate3d(0,0, " + params.activeOffset + "px)");
-    $setDuration(scaleEl, (params.rotateLock ? params.durationEnter : 0) + "ms");
+    clientXStart = e.clientX;
+    clientYStart = e.clientY;
 
-    if (shadowEl) {
-      $setDuration(shadowEl, (params.rotateLock ? params.durationEnter : 0) + "ms");
+    if (params.alwaysActive) {
+      elBoundingClientRect = undefined;
+      eventsElBoundingClientRect = undefined;
+      return;
     }
 
-    self.isActive = true;
+    activate();
     if (typeof params.onEnter === 'function') params.onEnter();
@@ -236,3 +389,3 @@ };
   var onTouchMove = function onTouchMove(e) {
-    if (rotated && e.cancelable) {
+    if (isScrolling === false && e.cancelable) {
       e.preventDefault();
@@ -252,87 +405,25 @@ }
         clientY = e.clientY;
+    var diffX = clientX - clientXStart;
+    var diffY = clientY - clientYStart;
 
-    if (!elBoundingClientRect) {
-      elBoundingClientRect = el.getBoundingClientRect();
-    }
-
-    var _elBoundingClientRect = elBoundingClientRect,
-        top = _elBoundingClientRect.top,
-        left = _elBoundingClientRect.left,
-        width = _elBoundingClientRect.width,
-        height = _elBoundingClientRect.height;
-    var centerX = width / 2;
-    var centerY = height / 2;
-    var coordX = clientX - left;
-    var coordY = clientY - top;
-    var rotateY = params.rotateYMax * (coordX - centerX) / (width / 2) * -1;
-    var rotateX = params.rotateXMax * (coordY - centerY) / (height / 2);
-
-    if (params.rotateLock) {
-      if (typeof enterRotateY === 'undefined') {
-        enterRotateY = rotateY;
-        rotateYLock = true;
+    if (typeof params.rotateTouch === 'string' && (diffX !== 0 || diffY !== 0) && typeof isScrolling === 'undefined') {
+      if (diffX * diffX + diffY * diffY >= 25) {
+        var touchAngle = Math.atan2(Math.abs(diffY), Math.abs(diffX)) * 180 / Math.PI;
+        isScrolling = params.rotateTouch === 'scroll-y' ? touchAngle > 45 : 90 - touchAngle > 45;
       }
 
-      if (typeof enterRotateX === 'undefined') {
-        enterRotateX = rotateX;
-        rotateXLock = true;
-      }
+      if (isScrolling === false) {
+        el.classList.add('atropos-rotate-touch');
 
-      if (rotateYLock) {
-        if (enterRotateY < 0) {
-          if (rotateY < 0) rotateY = 0;
-          if (rotateY > 0) rotateYLock = false;
+        if (e.cancelable) {
+          e.preventDefault();
         }
-
-        if (enterRotateY > 0) {
-          if (rotateY > 0) rotateY = 0;
-          if (rotateY < 0) rotateYLock = false;
-        }
       }
-
-      if (rotateXLock) {
-        if (enterRotateX < 0) {
-          if (rotateX < 0) rotateX = 0;
-          if (rotateX > 0) rotateXLock = false;
-        }
-
-        if (enterRotateX > 0) {
-          if (rotateX > 0) rotateX = 0;
-          if (rotateX < 0) rotateXLock = false;
-        }
-      }
     }
 
-    rotateX = Math.min(Math.max(-rotateX, -params.rotateXMax), params.rotateXMax);
-    if (params.rotateXInvert) rotateX = -rotateX;
-    rotateY = Math.min(Math.max(-rotateY, -params.rotateYMax), params.rotateYMax);
-    if (params.rotateYInvert) rotateY = -rotateY;
-
-    if (typeof params.rotateTouch === 'string' && (rotateX !== 0 || rotateY !== 0)) {
-      if (!rotated) {
-        rotated = true;
-        el.classList.add('atropos-rotate-touch');
-      }
-
-      if (e.cancelable) {
-        e.preventDefault();
-      }
+    if (e.pointerType !== 'mouse' && isScrolling) {
+      return;
     }
 
-    $setTransform(rotateEl, "translate3d(0,0,0) rotateX(" + rotateX + "deg) rotateY(" + rotateY + "deg)");
-    var rotateXPercentage = rotateX / params.rotateXMax * 100;
-    var rotateYPercentage = rotateY / params.rotateYMax * 100;
-
-    if (highlightEl) {
-      $setDuration(highlightEl, '0ms');
-      $setTransform(highlightEl, "translate3d(" + -rotateYPercentage * 0.25 + "%, " + rotateXPercentage * 0.25 + "%, 0)");
-      highlightEl.style.opacity = Math.max(Math.abs(rotateXPercentage), Math.abs(rotateYPercentage)) / 100;
-    }
-
-    setChildrenOffset({
-      rotateXPercentage: rotateXPercentage,
-      rotateYPercentage: rotateYPercentage,
-      duration: '0ms'
-    });
-    if (typeof params.onRotate === 'function') params.onRotate(rotateX, rotateY);
+    setElements(clientX, clientY);
   };
@@ -342,2 +433,3 @@
     elBoundingClientRect = undefined;
+    eventsElBoundingClientRect = undefined;
     if (!self.isActive) return;
@@ -347,24 +439,37 @@ if (e && e.type === 'pointerup' && e.pointerType === 'mouse') return;
 
-    if (typeof params.rotateTouch === 'string' && rotated) {
+    if (typeof params.rotateTouch === 'string' && isScrolling) {
       el.classList.remove('atropos-rotate-touch');
     }
 
-    el.classList.remove('atropos-active');
+    if (params.alwaysActive) {
+      setElements();
+      if (typeof params.onRotate === 'function') params.onRotate(0, 0);
+      if (typeof params.onLeave === 'function') params.onLeave();
+      return;
+    }
+
+    queue.push(function () {
+      return el.classList.remove('atropos-active');
+    });
+    $setDuration(scaleEl, params.duration + "ms");
+    $setEasing(scaleEl, '');
     $setTransform(scaleEl, "translate3d(0,0, " + 0 + "px)");
-    $setDuration(scaleEl, params.durationLeave + "ms");
 
     if (shadowEl) {
-      $setDuration(shadowEl, params.durationLeave + "ms");
+      $setDuration(shadowEl, params.duration + "ms");
+      $setEasing(shadowEl, '');
     }
 
     if (highlightEl) {
-      $setDuration(highlightEl, params.durationLeave + "ms");
+      $setDuration(highlightEl, params.duration + "ms");
+      $setEasing(highlightEl, '');
       $setTransform(highlightEl, "translate3d(0, 0, 0)");
-      highlightEl.style.opacity = 0;
+      $setOpacity(highlightEl, 0);
     }
 
-    $setDuration(rotateEl, params.durationLeave + "ms");
+    $setDuration(rotateEl, params.duration + "ms");
+    $setEasing(rotateEl, '');
     $setTransform(rotateEl, "translate3d(0,0,0) rotateX(0deg) rotateY(0deg)");
     setChildrenOffset({
-      duration: params.durationLeave + "ms"
+      duration: params.duration + "ms"
     });
@@ -379,3 +484,3 @@ self.isActive = false;
 
-    if (!el.contains(clickTarget) && clickTarget !== el && self.isActive) {
+    if (!eventsEl.contains(clickTarget) && clickTarget !== eventsEl && self.isActive) {
       onPointerLeave();
@@ -446,2 +551,7 @@ }
     $on(eventsEl, 'lostpointercapture', onPointerLeave);
+
+    if (params.alwaysActive) {
+      activate();
+      setElements();
+    }
   };
@@ -451,2 +561,3 @@
     self.destroyed = true;
+    cancelAnimationFrame(queueFrameId);
     $off(document, 'click', onDocumentClick);
@@ -500,2 +611,3 @@ $off(eventsEl, 'pointerdown', onPointerEnter);
       highlight: false,
+      rotateTouch: false,
     });
@@ -502,0 +614,0 @@ }

dist/collection/components/wr-case/wr-case.js

@@ -34,2 +34,3 @@ import { Component, h, Prop } from '@stencil/core';
       highlight: false,
+      rotateTouch: false,
     });
@@ -36,0 +37,0 @@ }

dist/esm-es5/wr-case.entry.js

@@ -1,1 +0,1 @@
-import{r as registerInstance,h}from"./index-e41e20bc.js";function _extends(){_extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var o in r){if(Object.prototype.hasOwnProperty.call(r,o)){t[o]=r[o]}}}return t};return _extends.apply(this,arguments)}var $=function t(e,r){return e.querySelector(r)};var $$=function t(e,r){return e.querySelectorAll(r)};var $setDuration=function t(e,r){e.style.transitionDuration=r};var $setTransform=function t(e,r){e.style.transform=r};var $setOpacity=function t(e,r){e.style.opacity=r};var $on=function t(e,r,o,a){return e.addEventListener(r,o,a)};var $off=function t(e,r,o,a){return e.removeEventListener(r,o,a)};var removeUndefinedProps=function t(e){if(e===void 0){e={}}var r={};Object.keys(e).forEach((function(t){if(typeof e[t]!=="undefined")r[t]=e[t]}));return r};function Atropos(t){if(t===void 0){t={}}var e=t,r=e.el,o=e.eventsEl;var a={__atropos__:true,params:_extends({activeOffset:50,shadowOffset:50,shadowScale:1,durationEnter:300,durationLeave:600,rotateLock:true,rotate:true,rotateTouch:true,rotateXMax:15,rotateYMax:15,rotateXInvert:false,rotateYInvert:false,shadow:true,highlight:true,onEnter:null,onLeave:null,onRotate:null},removeUndefinedProps(t||{})),destroyed:false,isActive:false};var i=a.params;var n;var s;var c;var p;var f;var d;var u;var l=true;var m=true;var h;var v;var y=function t(){var e;h=$(r,".atropos-shadow");if(!h){h=document.createElement("span");h.classList.add("atropos-shadow");e=true}$setTransform(h,"translate3d(0,0,-"+i.shadowOffset+"px) scale("+i.shadowScale+")");if(e){n.appendChild(h)}};var g=function t(){var e;v=$(r,".atropos-highlight");if(!v){v=document.createElement("span");v.classList.add("atropos-highlight");e=true}$setTransform(v,"translate3d(0,0,0)");if(e){p.appendChild(v)}};var b=function t(e){var o=e.rotateXPercentage,a=o===void 0?0:o,i=e.rotateYPercentage,n=i===void 0?0:i,s=e.duration,c=e.opacityOnly;var p=function t(e){if(e.dataset.atroposOpacity&&typeof e.dataset.atroposOpacity==="string"){return e.dataset.atroposOpacity.split(";").map((function(t){return parseFloat(t)}))}return undefined};$$(r,"[data-atropos-offset], [data-atropos-opacity]").forEach((function(t){$setDuration(t,s);var e=p(t);if(a===0&&n===0){if(!c)$setTransform(t,"translate3d(0, 0, 0)");if(e)$setOpacity(t,e[0])}else{var r=parseFloat(t.dataset.atroposOffset)/100;if(!Number.isNaN(r)&&!c){$setTransform(t,"translate3d("+-n*-r+"%, "+a*-r+"%, 0)")}if(e){var o=e[0],i=e[1];var f=Math.max(Math.abs(a),Math.abs(n));$setOpacity(t,o+(i-o)*f/100)}}}))};var w=function t(e){if(e.type==="pointerdown"&&e.pointerType==="mouse")return;if(e.type==="pointerenter"&&e.pointerType!=="mouse")return;if(e.type==="pointerdown"){e.preventDefault()}r.classList.add("atropos-active");$setDuration(n,"0ms");s=false;f=undefined;d=undefined;l=true;m=true;$setTransform(c,"translate3d(0,0, "+i.activeOffset+"px)");$setDuration(c,(i.rotateLock?i.durationEnter:0)+"ms");if(h){$setDuration(h,(i.rotateLock?i.durationEnter:0)+"ms")}a.isActive=true;if(typeof i.onEnter==="function")i.onEnter()};var k=function t(e){if(s&&e.cancelable){e.preventDefault()}};var x=function t(e){if(!i.rotate||!a.isActive)return;if(e.pointerType!=="mouse"){if(!i.rotateTouch)return;e.preventDefault()}var o=e.clientX,c=e.clientY;if(!u){u=r.getBoundingClientRect()}var p=u,h=p.top,y=p.left,g=p.width,w=p.height;var k=g/2;var x=w/2;var _=o-y;var $=c-h;var L=i.rotateYMax*(_-k)/(g/2)*-1;var T=i.rotateXMax*($-x)/(w/2);if(i.rotateLock){if(typeof d==="undefined"){d=L;m=true}if(typeof f==="undefined"){f=T;l=true}if(m){if(d<0){if(L<0)L=0;if(L>0)m=false}if(d>0){if(L>0)L=0;if(L<0)m=false}}if(l){if(f<0){if(T<0)T=0;if(T>0)l=false}if(f>0){if(T>0)T=0;if(T<0)l=false}}}T=Math.min(Math.max(-T,-i.rotateXMax),i.rotateXMax);if(i.rotateXInvert)T=-T;L=Math.min(Math.max(-L,-i.rotateYMax),i.rotateYMax);if(i.rotateYInvert)L=-L;if(typeof i.rotateTouch==="string"&&(T!==0||L!==0)){if(!s){s=true;r.classList.add("atropos-rotate-touch")}if(e.cancelable){e.preventDefault()}}$setTransform(n,"translate3d(0,0,0) rotateX("+T+"deg) rotateY("+L+"deg)");var E=T/i.rotateXMax*100;var O=L/i.rotateYMax*100;if(v){$setDuration(v,"0ms");$setTransform(v,"translate3d("+-O*.25+"%, "+E*.25+"%, 0)");v.style.opacity=Math.max(Math.abs(E),Math.abs(O))/100}b({rotateXPercentage:E,rotateYPercentage:O,duration:"0ms"});if(typeof i.onRotate==="function")i.onRotate(T,L)};var _=function t(e){u=undefined;if(!a.isActive)return;if(e&&e.type==="pointerup"&&e.pointerType==="mouse")return;if(e&&e.type==="pointerleave"&&e.pointerType!=="mouse")return;if(typeof i.rotateTouch==="string"&&s){r.classList.remove("atropos-rotate-touch")}r.classList.remove("atropos-active");$setTransform(c,"translate3d(0,0, "+0+"px)");$setDuration(c,i.durationLeave+"ms");if(h){$setDuration(h,i.durationLeave+"ms")}if(v){$setDuration(v,i.durationLeave+"ms");$setTransform(v,"translate3d(0, 0, 0)");v.style.opacity=0}$setDuration(n,i.durationLeave+"ms");$setTransform(n,"translate3d(0,0,0) rotateX(0deg) rotateY(0deg)");b({duration:i.durationLeave+"ms"});a.isActive=false;if(typeof i.onRotate==="function")i.onRotate(0,0);if(typeof i.onLeave==="function")i.onLeave()};var L=function t(e){var o=e.target;if(!r.contains(o)&&o!==r&&a.isActive){_()}};var T=function t(){if(typeof r==="string"){r=$(document,r)}if(!r)return;if(r.__atropos__)return;if(typeof o!=="undefined"){if(typeof o==="string"){o=$(document,o)}}else{o=r}Object.assign(a,{el:r});n=$(r,".atropos-rotate");c=$(r,".atropos-scale");p=$(r,".atropos-inner");r.__atropos__=a};var E=function t(){T();if(!r||!o)return;if(i.shadow){y()}if(i.highlight){g()}if(i.rotateTouch){if(typeof i.rotateTouch==="string"){r.classList.add("atropos-rotate-touch-"+i.rotateTouch)}else{r.classList.add("atropos-rotate-touch")}}if($(r,"[data-atropos-opacity]")){b({opacityOnly:true})}$on(document,"click",L);$on(o,"pointerdown",w);$on(o,"pointerenter",w);$on(o,"pointermove",x);$on(o,"touchmove",k);$on(o,"pointerleave",_);$on(o,"pointerup",_);$on(o,"lostpointercapture",_)};var O=function t(){a.destroyed=true;$off(document,"click",L);$off(o,"pointerdown",w);$off(o,"pointerenter",w);$off(o,"pointermove",x);$off(o,"touchmove",k);$off(o,"pointerleave",_);$off(o,"pointerup",_);$off(o,"lostpointercapture",_);delete r.__atropos__};a.destroy=O;E();return a}var wrCaseCss=".atropos{position:relative;display:block;-webkit-perspective:1200px;perspective:1200px;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.atropos-rotate-touch,.atropos-rotate-scroll-x,.atropos-rotate-scroll-y{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.atropos-rotate-touch-scroll-y{-ms-touch-action:pan-y;touch-action:pan-y}.atropos-rotate-touch-scroll-x{-ms-touch-action:pan-x;touch-action:pan-x}.atropos-rotate-touch{-ms-touch-action:none;touch-action:none}.atropos-scale,.atropos-rotate{width:100%;height:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;display:block}.atropos-shadow,.atropos-highlight{position:absolute;pointer-events:none;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:transform, opacity;transition-property:transform, opacity, -webkit-transform;display:block;opacity:0}.atropos-shadow{z-index:-1;background:#000;left:0;top:0;width:100%;height:100%;-webkit-filter:blur(30px);filter:blur(30px)}.atropos-highlight{left:-50%;top:-50%;width:200%;height:200%;background-image:radial-gradient(circle at 50%, rgba(255, 255, 255, 0.25), transparent 50%);z-index:0}.atropos-rotate{position:relative}.atropos-inner{width:100%;height:100%;position:relative;overflow:hidden;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);display:block}.atropos-active{z-index:1}.atropos-active .atropos-shadow{opacity:1 !important}[data-atropos-offset]{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform}[data-atropos-opacity]{-webkit-transition-property:opacity;transition-property:opacity}[data-atropos-offset][data-atropos-opacity]{-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:transform, opacity;transition-property:transform, opacity, -webkit-transform}.perspective-wrapper{-webkit-perspective:500px;perspective:500px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.case-card{-webkit-transition-property:all;transition-property:all;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 1, 1);transition-timing-function:cubic-bezier(0.4, 0, 1, 1);position:relative}@media (min-width: 768px){.case-card{padding-left:3rem;padding-right:3rem}}.case-card{overflow:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100vw}.case-card.mockup-front .case-card__accessory{z-index:0}.case-card__accessory,.case-card__mockup{position:absolute;top:0px;right:0px;bottom:0px;left:0px;z-index:1;margin:0px}.case-card__accessory img,.case-card__mockup img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}@media (min-width: 768px){.case-card__accessory img,.case-card__mockup img{-o-object-fit:none;object-fit:none}}.case-card__accessory img,.case-card__mockup img{position:absolute;top:0px;right:0px;bottom:0px;left:0px}.case-card .background-image{position:relative;top:0px;right:0px;bottom:0px;left:0px;margin:0px}.case-card .background-image img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;border-radius:.25rem}.case-card .case-card__body{bottom:1rem;padding-top:1.25rem}@media (min-width: 375px){.case-card .case-card__body{bottom:1.75rem}}@media (min-width: 768px){.case-card .case-card__body{bottom:2.5rem}}.case-card .case-card__body{position:absolute;z-index:50;left:2.5rem;right:2.5rem}@media (min-width: 375px){.case-card .case-card__body{left:3.5rem;right:3.5rem}}@media (min-width: 768px){.case-card .case-card__body{left:8.5rem;right:8.5rem}}.case-card h2,.case-card h5{margin:0px;color:var(--text-color)}.case-card h2{font-size:1.25rem;line-height:2rem}@media (min-width: 768px){.case-card h2{font-size:2.5rem;line-height:3.5rem}}.case-card h5{font-size:0.9375rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.case-card h5{font-size:1.25rem;line-height:2rem}}";var WrCase=function(){function t(t){registerInstance(this,t);this.backgroundOpacity=.2;this.href="#"}t.prototype.checkForDeprecations=function(){};t.prototype.componentWillLoad=function(){this.checkForDeprecations()};t.prototype.componentDidLoad=function(){this.bindAtropos();this.calculateCardColors();this.checkImagesOrRemove()};t.prototype.bindAtropos=function(){Atropos({el:this.atroposElement,shadow:false,highlight:false})};t.prototype.render=function(){var t=this;return h("a",{class:"atropos",href:this.href,ref:function(e){return t.atroposElement=e}},h("div",{class:"atropos-scale"},h("div",{class:"atropos-rotate"},h("div",{class:"atropos-inner"},h("article",{class:["case-card"].join(" "),ref:function(e){return t.card=e}},this.renderBackgroundImage(),this.renderBottomLayer(),this.renderTopLayer(),h("div",{class:"case-card__body"},h("h2",{"data-atropos-offset":5},this.caseTitle),h("h5",{"data-atropos-offset":5},this.caseSubtitle)))))))};t.prototype.renderTopLayer=function(){var t=this;if(!this.topLayer){return}return h("figure",{class:"case-card__accessory","data-atropos-offset":2.5,ref:function(e){return t.accessoryImageElement=e}},h("img",{src:this.topLayer,alt:""}))};t.prototype.renderBottomLayer=function(){var t=this;if(!this.bottomLayer){return}return h("figure",{class:"case-card__mockup","data-atropos-offset":1.5,ref:function(e){return t.mockupImageElement=e}},h("img",{src:this.bottomLayer,alt:""}))};t.prototype.renderBackgroundImage=function(){var t=this;if(!this.backgroundImage){return}return h("figure",{class:"background-image","data-atropos-offset":1,ref:function(e){return t.backgroundImageElement=e}},h("img",{src:this.backgroundImage,alt:""}))};t.prototype.calculateCardColors=function(){};t.prototype.checkImagesOrRemove=function(){[this.backgroundImageElement,this.mockupImageElement,this.accessoryImageElement].forEach((function(t){t.querySelector("img").addEventListener("error",(function(){t.parentElement.removeChild(t)}))}))};return t}();WrCase.style=wrCaseCss;export{WrCase as wr_case};
+import{r as registerInstance,h}from"./index-e41e20bc.js";function _extends(){_extends=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var a in r){if(Object.prototype.hasOwnProperty.call(r,a)){t[a]=r[a]}}}return t};return _extends.apply(this,arguments)}var $=function t(e,r){return e.querySelector(r)};var $$=function t(e,r){return e.querySelectorAll(r)};var removeUndefinedProps=function t(e){if(e===void 0){e={}}var r={};Object.keys(e).forEach((function(t){if(typeof e[t]!=="undefined")r[t]=e[t]}));return r};function Atropos(t){if(t===void 0){t={}}var e=t,r=e.el,a=e.eventsEl;var o={__atropos__:true,params:_extends({alwaysActive:false,activeOffset:50,shadowOffset:50,shadowScale:1,duration:300,rotate:true,rotateTouch:true,rotateXMax:15,rotateYMax:15,rotateXInvert:false,rotateYInvert:false,stretchX:0,stretchY:0,stretchZ:0,commonOrigin:true,shadow:true,highlight:true,onEnter:null,onLeave:null,onRotate:null},removeUndefinedProps(t||{})),destroyed:false,isActive:false};var i=o.params;var n;var s;var c;var p;var f;var d;var u;var l;var h;var m;var v=[];var y;var g=function t(){y=requestAnimationFrame((function(){v.forEach((function(t){if(typeof t==="function"){t()}else{var e=t.element,r=t.prop,a=t.value;e.style[r]=a}}));v.splice(0,v.length);t()}))};g();var b=function t(e,r){v.push({element:e,prop:"transitionDuration",value:r})};var w=function t(e,r){v.push({element:e,prop:"transitionTimingFunction",value:r})};var x=function t(e,r){v.push({element:e,prop:"transform",value:r})};var k=function t(e,r){v.push({element:e,prop:"opacity",value:r})};var _=function t(e,r){v.push({element:e,prop:"transformOrigin",value:r})};var M=function t(e,r,a,o){return e.addEventListener(r,a,o)};var L=function t(e,r,a,o){return e.removeEventListener(r,a,o)};var O=function t(){var e;d=$(r,".atropos-shadow");if(!d){d=document.createElement("span");d.classList.add("atropos-shadow");e=true}x(d,"translate3d(0,0,-"+i.shadowOffset+"px) scale("+i.shadowScale+")");if(e){n.appendChild(d)}};var E=function t(){var e;u=$(r,".atropos-highlight");if(!u){u=document.createElement("span");u.classList.add("atropos-highlight");e=true}x(u,"translate3d(0,0,0)");if(e){c.appendChild(u)}};var I=function t(e){var a=e.rotateXPercentage,o=a===void 0?0:a,i=e.rotateYPercentage,n=i===void 0?0:i,s=e.duration,c=e.opacityOnly,p=e.easeOut;var f=function t(e){if(e.dataset.atroposOpacity&&typeof e.dataset.atroposOpacity==="string"){return e.dataset.atroposOpacity.split(";").map((function(t){return parseFloat(t)}))}return undefined};$$(r,"[data-atropos-offset], [data-atropos-opacity]").forEach((function(t){b(t,s);w(t,p?"ease-out":"");var e=f(t);if(o===0&&n===0){if(!c)x(t,"translate3d(0, 0, 0)");if(e)k(t,e[0])}else{var r=parseFloat(t.dataset.atroposOffset)/100;if(!Number.isNaN(r)&&!c){x(t,"translate3d("+-n*-r+"%, "+o*-r+"%, 0)")}if(e){var a=e[0],i=e[1];var d=Math.max(Math.abs(o),Math.abs(n));k(t,a+(i-a)*d/100)}}}))};var T=function t(e,o){var s=r!==a;if(!p){p=r.getBoundingClientRect()}if(s&&!f){f=a.getBoundingClientRect()}if(typeof e==="undefined"&&typeof o==="undefined"){var c=s?f:p;e=c.left+c.width/2;o=c.top+c.height/2}var d=0;var l=0;var h=p,m=h.top,v=h.left,y=h.width,g=h.height;var M;if(!s){var L=y/2;var O=g/2;var E=e-v;var T=o-m;l=i.rotateYMax*(E-L)/(y/2)*-1;d=i.rotateXMax*(T-O)/(g/2)}else{var A=f,X=A.top,Y=A.left,z=A.width,C=A.height;var $=v-Y;var j=m-X;var R=y/2+$;var D=g/2+j;var P=e-Y;var F=o-X;l=i.rotateYMax*(P-R)/(z-y/2)*-1;d=i.rotateXMax*(F-D)/(C-g/2);M=e-v+"px "+(o-m)+"px"}d=Math.min(Math.max(-d,-i.rotateXMax),i.rotateXMax);if(i.rotateXInvert)d=-d;l=Math.min(Math.max(-l,-i.rotateYMax),i.rotateYMax);if(i.rotateYInvert)l=-l;var B=d/i.rotateXMax*100;var S=l/i.rotateYMax*100;var q=(s?S/100*i.stretchX:0)*(i.rotateYInvert?-1:1);var W=(s?B/100*i.stretchY:0)*(i.rotateXInvert?-1:1);var N=s?Math.max(Math.abs(B),Math.abs(S))/100*i.stretchZ:0;x(n,"translate3d("+q+"%, "+-W+"%, "+-N+"px) rotateX("+d+"deg) rotateY("+l+"deg)");if(M&&i.commonOrigin){_(n,M)}if(u){b(u,i.duration+"ms");w(u,"ease-out");x(u,"translate3d("+-S*.25+"%, "+B*.25+"%, 0)");k(u,Math.max(Math.abs(B),Math.abs(S))/100)}I({rotateXPercentage:B,rotateYPercentage:S,duration:i.duration+"ms",easeOut:true});if(typeof i.onRotate==="function")i.onRotate(d,l)};var A=function t(){v.push((function(){return r.classList.add("atropos-active")}));b(n,i.duration+"ms");w(n,"ease-out");x(s,"translate3d(0,0, "+i.activeOffset+"px)");b(s,i.duration+"ms");w(s,"ease-out");if(d){b(d,i.duration+"ms");w(d,"ease-out")}o.isActive=true};var X=function t(e){l=undefined;if(e.type==="pointerdown"&&e.pointerType==="mouse")return;if(e.type==="pointerenter"&&e.pointerType!=="mouse")return;if(e.type==="pointerdown"){e.preventDefault()}h=e.clientX;m=e.clientY;if(i.alwaysActive){p=undefined;f=undefined;return}A();if(typeof i.onEnter==="function")i.onEnter()};var Y=function t(e){if(l===false&&e.cancelable){e.preventDefault()}};var z=function t(e){if(!i.rotate||!o.isActive)return;if(e.pointerType!=="mouse"){if(!i.rotateTouch)return;e.preventDefault()}var a=e.clientX,n=e.clientY;var s=a-h;var c=n-m;if(typeof i.rotateTouch==="string"&&(s!==0||c!==0)&&typeof l==="undefined"){if(s*s+c*c>=25){var p=Math.atan2(Math.abs(c),Math.abs(s))*180/Math.PI;l=i.rotateTouch==="scroll-y"?p>45:90-p>45}if(l===false){r.classList.add("atropos-rotate-touch");if(e.cancelable){e.preventDefault()}}}if(e.pointerType!=="mouse"&&l){return}T(a,n)};var C=function t(e){p=undefined;f=undefined;if(!o.isActive)return;if(e&&e.type==="pointerup"&&e.pointerType==="mouse")return;if(e&&e.type==="pointerleave"&&e.pointerType!=="mouse")return;if(typeof i.rotateTouch==="string"&&l){r.classList.remove("atropos-rotate-touch")}if(i.alwaysActive){T();if(typeof i.onRotate==="function")i.onRotate(0,0);if(typeof i.onLeave==="function")i.onLeave();return}v.push((function(){return r.classList.remove("atropos-active")}));b(s,i.duration+"ms");w(s,"");x(s,"translate3d(0,0, "+0+"px)");if(d){b(d,i.duration+"ms");w(d,"")}if(u){b(u,i.duration+"ms");w(u,"");x(u,"translate3d(0, 0, 0)");k(u,0)}b(n,i.duration+"ms");w(n,"");x(n,"translate3d(0,0,0) rotateX(0deg) rotateY(0deg)");I({duration:i.duration+"ms"});o.isActive=false;if(typeof i.onRotate==="function")i.onRotate(0,0);if(typeof i.onLeave==="function")i.onLeave()};var j=function t(e){var r=e.target;if(!a.contains(r)&&r!==a&&o.isActive){C()}};var R=function t(){if(typeof r==="string"){r=$(document,r)}if(!r)return;if(r.__atropos__)return;if(typeof a!=="undefined"){if(typeof a==="string"){a=$(document,a)}}else{a=r}Object.assign(o,{el:r});n=$(r,".atropos-rotate");s=$(r,".atropos-scale");c=$(r,".atropos-inner");r.__atropos__=o};var D=function t(){R();if(!r||!a)return;if(i.shadow){O()}if(i.highlight){E()}if(i.rotateTouch){if(typeof i.rotateTouch==="string"){r.classList.add("atropos-rotate-touch-"+i.rotateTouch)}else{r.classList.add("atropos-rotate-touch")}}if($(r,"[data-atropos-opacity]")){I({opacityOnly:true})}M(document,"click",j);M(a,"pointerdown",X);M(a,"pointerenter",X);M(a,"pointermove",z);M(a,"touchmove",Y);M(a,"pointerleave",C);M(a,"pointerup",C);M(a,"lostpointercapture",C);if(i.alwaysActive){A();T()}};var P=function t(){o.destroyed=true;cancelAnimationFrame(y);L(document,"click",j);L(a,"pointerdown",X);L(a,"pointerenter",X);L(a,"pointermove",z);L(a,"touchmove",Y);L(a,"pointerleave",C);L(a,"pointerup",C);L(a,"lostpointercapture",C);delete r.__atropos__};o.destroy=P;D();return o}var wrCaseCss=".atropos{position:relative;display:block;-webkit-perspective:1200px;perspective:1200px;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.atropos-rotate-touch,.atropos-rotate-scroll-x,.atropos-rotate-scroll-y{-webkit-tap-highlight-color:rgba(0, 0, 0, 0);-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.atropos-rotate-touch-scroll-y{-ms-touch-action:pan-y;touch-action:pan-y}.atropos-rotate-touch-scroll-x{-ms-touch-action:pan-x;touch-action:pan-x}.atropos-rotate-touch{-ms-touch-action:none;touch-action:none}.atropos-scale,.atropos-rotate{width:100%;height:100%;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform;display:block}.atropos-shadow,.atropos-highlight{position:absolute;pointer-events:none;-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:transform, opacity;transition-property:transform, opacity, -webkit-transform;display:block;opacity:0}.atropos-shadow{z-index:-1;background:#000;left:0;top:0;width:100%;height:100%;-webkit-filter:blur(30px);filter:blur(30px)}.atropos-highlight{left:-50%;top:-50%;width:200%;height:200%;background-image:radial-gradient(circle at 50%, rgba(255, 255, 255, 0.25), transparent 50%);z-index:0}.atropos-rotate{position:relative}.atropos-inner{width:100%;height:100%;position:relative;overflow:hidden;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);display:block}.atropos-active{z-index:1}.atropos-active .atropos-shadow{opacity:1 !important}[data-atropos-offset]{-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform, -webkit-transform}[data-atropos-opacity]{-webkit-transition-property:opacity;transition-property:opacity}[data-atropos-offset][data-atropos-opacity]{-webkit-transition-property:opacity, -webkit-transform;transition-property:opacity, -webkit-transform;transition-property:transform, opacity;transition-property:transform, opacity, -webkit-transform}.perspective-wrapper{-webkit-perspective:500px;perspective:500px;-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.case-card{-webkit-transition-property:all;transition-property:all;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);-webkit-transition-duration:150ms;transition-duration:150ms;transition-duration:150ms;-webkit-transition-timing-function:cubic-bezier(0.4, 0, 1, 1);transition-timing-function:cubic-bezier(0.4, 0, 1, 1);position:relative}@media (min-width: 768px){.case-card{padding-left:3rem;padding-right:3rem}}.case-card{overflow:hidden;width:-webkit-max-content;width:-moz-max-content;width:max-content;max-width:100vw}.case-card.mockup-front .case-card__accessory{z-index:0}.case-card__accessory,.case-card__mockup{position:absolute;top:0px;right:0px;bottom:0px;left:0px;z-index:1;margin:0px}.case-card__accessory img,.case-card__mockup img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover}@media (min-width: 768px){.case-card__accessory img,.case-card__mockup img{-o-object-fit:none;object-fit:none}}.case-card__accessory img,.case-card__mockup img{position:absolute;top:0px;right:0px;bottom:0px;left:0px}.case-card .background-image{position:relative;top:0px;right:0px;bottom:0px;left:0px;margin:0px}.case-card .background-image img{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;border-radius:.25rem}.case-card .case-card__body{bottom:1rem;padding-top:1.25rem}@media (min-width: 375px){.case-card .case-card__body{bottom:1.75rem}}@media (min-width: 768px){.case-card .case-card__body{bottom:2.5rem}}.case-card .case-card__body{position:absolute;z-index:50;left:2.5rem;right:2.5rem}@media (min-width: 375px){.case-card .case-card__body{left:3.5rem;right:3.5rem}}@media (min-width: 768px){.case-card .case-card__body{left:8.5rem;right:8.5rem}}.case-card h2,.case-card h5{margin:0px;color:var(--text-color)}.case-card h2{font-size:1.25rem;line-height:2rem}@media (min-width: 768px){.case-card h2{font-size:2.5rem;line-height:3.5rem}}.case-card h5{font-size:0.9375rem;line-height:1.5rem;font-weight:400}@media (min-width: 768px){.case-card h5{font-size:1.25rem;line-height:2rem}}";var WrCase=function(){function t(t){registerInstance(this,t);this.backgroundOpacity=.2;this.href="#"}t.prototype.checkForDeprecations=function(){};t.prototype.componentWillLoad=function(){this.checkForDeprecations()};t.prototype.componentDidLoad=function(){this.bindAtropos();this.calculateCardColors();this.checkImagesOrRemove()};t.prototype.bindAtropos=function(){Atropos({el:this.atroposElement,shadow:false,highlight:false,rotateTouch:false})};t.prototype.render=function(){var t=this;return h("a",{class:"atropos",href:this.href,ref:function(e){return t.atroposElement=e}},h("div",{class:"atropos-scale"},h("div",{class:"atropos-rotate"},h("div",{class:"atropos-inner"},h("article",{class:["case-card"].join(" "),ref:function(e){return t.card=e}},this.renderBackgroundImage(),this.renderBottomLayer(),this.renderTopLayer(),h("div",{class:"case-card__body"},h("h2",{"data-atropos-offset":5},this.caseTitle),h("h5",{"data-atropos-offset":5},this.caseSubtitle)))))))};t.prototype.renderTopLayer=function(){var t=this;if(!this.topLayer){return}return h("figure",{class:"case-card__accessory","data-atropos-offset":2.5,ref:function(e){return t.accessoryImageElement=e}},h("img",{src:this.topLayer,alt:""}))};t.prototype.renderBottomLayer=function(){var t=this;if(!this.bottomLayer){return}return h("figure",{class:"case-card__mockup","data-atropos-offset":1.5,ref:function(e){return t.mockupImageElement=e}},h("img",{src:this.bottomLayer,alt:""}))};t.prototype.renderBackgroundImage=function(){var t=this;if(!this.backgroundImage){return}return h("figure",{class:"background-image","data-atropos-offset":1,ref:function(e){return t.backgroundImageElement=e}},h("img",{src:this.backgroundImage,alt:""}))};t.prototype.calculateCardColors=function(){};t.prototype.checkImagesOrRemove=function(){[this.backgroundImageElement,this.mockupImageElement,this.accessoryImageElement].forEach((function(t){t.querySelector("img").addEventListener("error",(function(){t.parentElement.removeChild(t)}))}))};return t}();WrCase.style=wrCaseCss;export{WrCase as wr_case};

dist/esm/wr-case.entry.js

 import { r as registerInstance, h } from './index-e41e20bc.js';
 
 /**
- * Atropos 0.10.1
+ * Atropos 1.0.1
  * Touch-friendly 3D parallax hover effects
@@ -12,3 +12,3 @@ * https://atroposjs.com
  *
- * Released on: October 12, 2021
+ * Released on: October 18, 2021
  */
@@ -43,22 +43,2 @@
 
-var $setDuration = function $setDuration(el, duration) {
-  el.style.transitionDuration = duration;
-};
-
-var $setTransform = function $setTransform(el, transform) {
-  el.style.transform = transform;
-};
-
-var $setOpacity = function $setOpacity(el, opacity) {
-  el.style.opacity = opacity;
-};
-
-var $on = function $on(el, event, handler, props) {
-  return el.addEventListener(event, handler, props);
-};
-
-var $off = function $off(el, event, handler, props) {
-  return el.removeEventListener(event, handler, props);
-};
-
 var removeUndefinedProps = function removeUndefinedProps(obj) {
@@ -87,8 +67,7 @@ if (obj === void 0) {
     params: _extends({
+      alwaysActive: false,
       activeOffset: 50,
       shadowOffset: 50,
       shadowScale: 1,
-      durationEnter: 300,
-      durationLeave: 600,
-      rotateLock: true,
+      duration: 300,
       rotate: true,
@@ -100,2 +79,6 @@ rotateTouch: true,
       rotateYInvert: false,
+      stretchX: 0,
+      stretchY: 0,
+      stretchZ: 0,
+      commonOrigin: true,
       shadow: true,
@@ -112,13 +95,81 @@ highlight: true,
   var rotateEl;
-  var rotated;
   var scaleEl;
   var innerEl;
-  var enterRotateX;
-  var enterRotateY;
   var elBoundingClientRect;
-  var rotateXLock = true;
-  var rotateYLock = true;
+  var eventsElBoundingClientRect;
   var shadowEl;
   var highlightEl;
+  var isScrolling;
+  var clientXStart;
+  var clientYStart;
+  var queue = [];
+  var queueFrameId;
 
+  var purgeQueue = function purgeQueue() {
+    queueFrameId = requestAnimationFrame(function () {
+      queue.forEach(function (data) {
+        if (typeof data === 'function') {
+          data();
+        } else {
+          var element = data.element,
+              prop = data.prop,
+              value = data.value;
+          element.style[prop] = value;
+        }
+      });
+      queue.splice(0, queue.length);
+      purgeQueue();
+    });
+  };
+
+  purgeQueue();
+
+  var $setDuration = function $setDuration(element, value) {
+    queue.push({
+      element: element,
+      prop: 'transitionDuration',
+      value: value
+    });
+  };
+
+  var $setEasing = function $setEasing(element, value) {
+    queue.push({
+      element: element,
+      prop: 'transitionTimingFunction',
+      value: value
+    });
+  };
+
+  var $setTransform = function $setTransform(element, value) {
+    queue.push({
+      element: element,
+      prop: 'transform',
+      value: value
+    });
+  };
+
+  var $setOpacity = function $setOpacity(element, value) {
+    queue.push({
+      element: element,
+      prop: 'opacity',
+      value: value
+    });
+  };
+
+  var $setOrigin = function $setOrigin(element, value) {
+    queue.push({
+      element: element,
+      prop: 'transformOrigin',
+      value: value
+    });
+  };
+
+  var $on = function $on(element, event, handler, props) {
+    return element.addEventListener(event, handler, props);
+  };
+
+  var $off = function $off(element, event, handler, props) {
+    return element.removeEventListener(event, handler, props);
+  };
+
   var createShadow = function createShadow() {
@@ -164,3 +215,4 @@ var created;
         duration = _ref.duration,
-        opacityOnly = _ref.opacityOnly;
+        opacityOnly = _ref.opacityOnly,
+        easeOut = _ref.easeOut;
 
@@ -179,2 +231,3 @@ var getOpacity = function getOpacity(element) {
       $setDuration(childEl, duration);
+      $setEasing(childEl, easeOut ? 'ease-out' : '');
       var elementOpacity = getOpacity(childEl);
@@ -202,3 +255,108 @@
 
+  var setElements = function setElements(clientX, clientY) {
+    var isMultiple = el !== eventsEl;
+
+    if (!elBoundingClientRect) {
+      elBoundingClientRect = el.getBoundingClientRect();
+    }
+
+    if (isMultiple && !eventsElBoundingClientRect) {
+      eventsElBoundingClientRect = eventsEl.getBoundingClientRect();
+    }
+
+    if (typeof clientX === 'undefined' && typeof clientY === 'undefined') {
+      var rect = isMultiple ? eventsElBoundingClientRect : elBoundingClientRect;
+      clientX = rect.left + rect.width / 2;
+      clientY = rect.top + rect.height / 2;
+    }
+
+    var rotateX = 0;
+    var rotateY = 0;
+    var _elBoundingClientRect = elBoundingClientRect,
+        top = _elBoundingClientRect.top,
+        left = _elBoundingClientRect.left,
+        width = _elBoundingClientRect.width,
+        height = _elBoundingClientRect.height;
+    var transformOrigin;
+
+    if (!isMultiple) {
+      var centerX = width / 2;
+      var centerY = height / 2;
+      var coordX = clientX - left;
+      var coordY = clientY - top;
+      rotateY = params.rotateYMax * (coordX - centerX) / (width / 2) * -1;
+      rotateX = params.rotateXMax * (coordY - centerY) / (height / 2);
+    } else {
+      var _eventsElBoundingClie = eventsElBoundingClientRect,
+          parentTop = _eventsElBoundingClie.top,
+          parentLeft = _eventsElBoundingClie.left,
+          parentWidth = _eventsElBoundingClie.width,
+          parentHeight = _eventsElBoundingClie.height;
+      var offsetLeft = left - parentLeft;
+      var offsetTop = top - parentTop;
+
+      var _centerX = width / 2 + offsetLeft;
+
+      var _centerY = height / 2 + offsetTop;
+
+      var _coordX = clientX - parentLeft;
+
+      var _coordY = clientY - parentTop;
+
+      rotateY = params.rotateYMax * (_coordX - _centerX) / (parentWidth - width / 2) * -1;
+      rotateX = params.rotateXMax * (_coordY - _centerY) / (parentHeight - height / 2);
+      transformOrigin = clientX - left + "px " + (clientY - top) + "px";
+    }
+
+    rotateX = Math.min(Math.max(-rotateX, -params.rotateXMax), params.rotateXMax);
+    if (params.rotateXInvert) rotateX = -rotateX;
+    rotateY = Math.min(Math.max(-rotateY, -params.rotateYMax), params.rotateYMax);
+    if (params.rotateYInvert) rotateY = -rotateY;
+    var rotateXPercentage = rotateX / params.rotateXMax * 100;
+    var rotateYPercentage = rotateY / params.rotateYMax * 100;
+    var stretchX = (isMultiple ? rotateYPercentage / 100 * params.stretchX : 0) * (params.rotateYInvert ? -1 : 1);
+    var stretchY = (isMultiple ? rotateXPercentage / 100 * params.stretchY : 0) * (params.rotateXInvert ? -1 : 1);
+    var stretchZ = isMultiple ? Math.max(Math.abs(rotateXPercentage), Math.abs(rotateYPercentage)) / 100 * params.stretchZ : 0;
+    $setTransform(rotateEl, "translate3d(" + stretchX + "%, " + -stretchY + "%, " + -stretchZ + "px) rotateX(" + rotateX + "deg) rotateY(" + rotateY + "deg)");
+
+    if (transformOrigin && params.commonOrigin) {
+      $setOrigin(rotateEl, transformOrigin);
+    }
+
+    if (highlightEl) {
+      $setDuration(highlightEl, params.duration + "ms");
+      $setEasing(highlightEl, 'ease-out');
+      $setTransform(highlightEl, "translate3d(" + -rotateYPercentage * 0.25 + "%, " + rotateXPercentage * 0.25 + "%, 0)");
+      $setOpacity(highlightEl, Math.max(Math.abs(rotateXPercentage), Math.abs(rotateYPercentage)) / 100);
+    }
+
+    setChildrenOffset({
+      rotateXPercentage: rotateXPercentage,
+      rotateYPercentage: rotateYPercentage,
+      duration: params.duration + "ms",
+      easeOut: true
+    });
+    if (typeof params.onRotate === 'function') params.onRotate(rotateX, rotateY);
+  };
+
+  var activate = function activate() {
+    queue.push(function () {
+      return el.classList.add('atropos-active');
+    });
+    $setDuration(rotateEl, params.duration + "ms");
+    $setEasing(rotateEl, 'ease-out');
+    $setTransform(scaleEl, "translate3d(0,0, " + params.activeOffset + "px)");
+    $setDuration(scaleEl, params.duration + "ms");
+    $setEasing(scaleEl, 'ease-out');
+
+    if (shadowEl) {
+      $setDuration(shadowEl, params.duration + "ms");
+      $setEasing(shadowEl, 'ease-out');
+    }
+
+    self.isActive = true;
+  };
+
   var onPointerEnter = function onPointerEnter(e) {
+    isScrolling = undefined;
     if (e.type === 'pointerdown' && e.pointerType === 'mouse') return;
@@ -211,17 +369,12 @@ if (e.type === 'pointerenter' && e.pointerType !== 'mouse') return;
 
-    el.classList.add('atropos-active');
-    $setDuration(rotateEl, '0ms');
-    rotated = false;
-    enterRotateX = undefined;
-    enterRotateY = undefined;
-    rotateXLock = true;
-    rotateYLock = true;
-    $setTransform(scaleEl, "translate3d(0,0, " + params.activeOffset + "px)");
-    $setDuration(scaleEl, (params.rotateLock ? params.durationEnter : 0) + "ms");
+    clientXStart = e.clientX;
+    clientYStart = e.clientY;
 
-    if (shadowEl) {
-      $setDuration(shadowEl, (params.rotateLock ? params.durationEnter : 0) + "ms");
+    if (params.alwaysActive) {
+      elBoundingClientRect = undefined;
+      eventsElBoundingClientRect = undefined;
+      return;
     }
 
-    self.isActive = true;
+    activate();
     if (typeof params.onEnter === 'function') params.onEnter();
@@ -231,3 +384,3 @@ };
   var onTouchMove = function onTouchMove(e) {
-    if (rotated && e.cancelable) {
+    if (isScrolling === false && e.cancelable) {
       e.preventDefault();
@@ -247,87 +400,25 @@ }
         clientY = e.clientY;
+    var diffX = clientX - clientXStart;
+    var diffY = clientY - clientYStart;
 
-    if (!elBoundingClientRect) {
-      elBoundingClientRect = el.getBoundingClientRect();
-    }
-
-    var _elBoundingClientRect = elBoundingClientRect,
-        top = _elBoundingClientRect.top,
-        left = _elBoundingClientRect.left,
-        width = _elBoundingClientRect.width,
-        height = _elBoundingClientRect.height;
-    var centerX = width / 2;
-    var centerY = height / 2;
-    var coordX = clientX - left;
-    var coordY = clientY - top;
-    var rotateY = params.rotateYMax * (coordX - centerX) / (width / 2) * -1;
-    var rotateX = params.rotateXMax * (coordY - centerY) / (height / 2);
-
-    if (params.rotateLock) {
-      if (typeof enterRotateY === 'undefined') {
-        enterRotateY = rotateY;
-        rotateYLock = true;
+    if (typeof params.rotateTouch === 'string' && (diffX !== 0 || diffY !== 0) && typeof isScrolling === 'undefined') {
+      if (diffX * diffX + diffY * diffY >= 25) {
+        var touchAngle = Math.atan2(Math.abs(diffY), Math.abs(diffX)) * 180 / Math.PI;
+        isScrolling = params.rotateTouch === 'scroll-y' ? touchAngle > 45 : 90 - touchAngle > 45;
       }
 
-      if (typeof enterRotateX === 'undefined') {
-        enterRotateX = rotateX;
-        rotateXLock = true;
-      }
+      if (isScrolling === false) {
+        el.classList.add('atropos-rotate-touch');
 
-      if (rotateYLock) {
-        if (enterRotateY < 0) {
-          if (rotateY < 0) rotateY = 0;
-          if (rotateY > 0) rotateYLock = false;
+        if (e.cancelable) {
+          e.preventDefault();
         }
-
-        if (enterRotateY > 0) {
-          if (rotateY > 0) rotateY = 0;
-          if (rotateY < 0) rotateYLock = false;
-        }
       }
-
-      if (rotateXLock) {
-        if (enterRotateX < 0) {
-          if (rotateX < 0) rotateX = 0;
-          if (rotateX > 0) rotateXLock = false;
-        }
-
-        if (enterRotateX > 0) {
-          if (rotateX > 0) rotateX = 0;
-          if (rotateX < 0) rotateXLock = false;
-        }
-      }
     }
 
-    rotateX = Math.min(Math.max(-rotateX, -params.rotateXMax), params.rotateXMax);
-    if (params.rotateXInvert) rotateX = -rotateX;
-    rotateY = Math.min(Math.max(-rotateY, -params.rotateYMax), params.rotateYMax);
-    if (params.rotateYInvert) rotateY = -rotateY;
-
-    if (typeof params.rotateTouch === 'string' && (rotateX !== 0 || rotateY !== 0)) {
-      if (!rotated) {
-        rotated = true;
-        el.classList.add('atropos-rotate-touch');
-      }
-
-      if (e.cancelable) {
-        e.preventDefault();
-      }
+    if (e.pointerType !== 'mouse' && isScrolling) {
+      return;
     }
 
-    $setTransform(rotateEl, "translate3d(0,0,0) rotateX(" + rotateX + "deg) rotateY(" + rotateY + "deg)");
-    var rotateXPercentage = rotateX / params.rotateXMax * 100;
-    var rotateYPercentage = rotateY / params.rotateYMax * 100;
-
-    if (highlightEl) {
-      $setDuration(highlightEl, '0ms');
-      $setTransform(highlightEl, "translate3d(" + -rotateYPercentage * 0.25 + "%, " + rotateXPercentage * 0.25 + "%, 0)");
-      highlightEl.style.opacity = Math.max(Math.abs(rotateXPercentage), Math.abs(rotateYPercentage)) / 100;
-    }
-
-    setChildrenOffset({
-      rotateXPercentage: rotateXPercentage,
-      rotateYPercentage: rotateYPercentage,
-      duration: '0ms'
-    });
-    if (typeof params.onRotate === 'function') params.onRotate(rotateX, rotateY);
+    setElements(clientX, clientY);
   };
@@ -337,2 +428,3 @@
     elBoundingClientRect = undefined;
+    eventsElBoundingClientRect = undefined;
     if (!self.isActive) return;
@@ -342,24 +434,37 @@ if (e && e.type === 'pointerup' && e.pointerType === 'mouse') return;
 
-    if (typeof params.rotateTouch === 'string' && rotated) {
+    if (typeof params.rotateTouch === 'string' && isScrolling) {
       el.classList.remove('atropos-rotate-touch');
     }
 
-    el.classList.remove('atropos-active');
+    if (params.alwaysActive) {
+      setElements();
+      if (typeof params.onRotate === 'function') params.onRotate(0, 0);
+      if (typeof params.onLeave === 'function') params.onLeave();
+      return;
+    }
+
+    queue.push(function () {
+      return el.classList.remove('atropos-active');
+    });
+    $setDuration(scaleEl, params.duration + "ms");
+    $setEasing(scaleEl, '');
     $setTransform(scaleEl, "translate3d(0,0, " + 0 + "px)");
-    $setDuration(scaleEl, params.durationLeave + "ms");
 
     if (shadowEl) {
-      $setDuration(shadowEl, params.durationLeave + "ms");
+      $setDuration(shadowEl, params.duration + "ms");
+      $setEasing(shadowEl, '');
     }
 
     if (highlightEl) {
-      $setDuration(highlightEl, params.durationLeave + "ms");
+      $setDuration(highlightEl, params.duration + "ms");
+      $setEasing(highlightEl, '');
       $setTransform(highlightEl, "translate3d(0, 0, 0)");
-      highlightEl.style.opacity = 0;
+      $setOpacity(highlightEl, 0);
     }
 
-    $setDuration(rotateEl, params.durationLeave + "ms");
+    $setDuration(rotateEl, params.duration + "ms");
+    $setEasing(rotateEl, '');
     $setTransform(rotateEl, "translate3d(0,0,0) rotateX(0deg) rotateY(0deg)");
     setChildrenOffset({
-      duration: params.durationLeave + "ms"
+      duration: params.duration + "ms"
     });
@@ -374,3 +479,3 @@ self.isActive = false;
 
-    if (!el.contains(clickTarget) && clickTarget !== el && self.isActive) {
+    if (!eventsEl.contains(clickTarget) && clickTarget !== eventsEl && self.isActive) {
       onPointerLeave();
@@ -441,2 +546,7 @@ }
     $on(eventsEl, 'lostpointercapture', onPointerLeave);
+
+    if (params.alwaysActive) {
+      activate();
+      setElements();
+    }
   };
@@ -446,2 +556,3 @@
     self.destroyed = true;
+    cancelAnimationFrame(queueFrameId);
     $off(document, 'click', onDocumentClick);
@@ -495,2 +606,3 @@ $off(eventsEl, 'pointerdown', onPointerEnter);
       highlight: false,
+      rotateTouch: false,
     });
@@ -497,0 +609,0 @@ }

dist/webreact/p-a7e464d1.system.js

@@ -1,1 +0,1 @@
-System.register(["./p-6e092c3e.system.js"],(function(e,o){"use strict";var t,r;return{setters:[function(e){t=e.p;r=e.b}],execute:function(){var e=function(){var e=o.meta.url;var r={};if(e!==""){r.resourcesUrl=new URL(".",e).href}return t(r)};e().then((function(e){return r([["p-90a2baf6.system",[[1,"wr-block-meta",{items:[1],innerData:[32]}],[1,"wr-highlight",{itemTitle:[1,"item-title"],subTitle:[1,"sub-title"]}],[1,"wr-highlight-grid",null,[[0,"hover","onHover"]]],[0,"wr-logo-icon"],[1,"wr-scroll-animation",{once:[4],noTranslate:[4,"no-translate"],noFade:[4,"no-fade"],direction:[1],duration:[2]}]]],["p-1c90b39f.system",[[1,"wr-accordion",{accordionTitle:[1,"accordion-title"],background:[1025],open:[32],closeMe:[64],openMe:[64],calculateSizes:[64]}]]],["p-8fcb6475.system",[[1,"wr-accordion-group",{isCollapse:[4,"is-collapse"],closeChildren:[64]},[[0,"accordionOpened","accordionOpened"]]]]],["p-0c2af3cc.system",[[1,"wr-big-quote",{isDark:[4,"is-dark"],quoteColor:[1,"quote-color"],authorName:[1,"author-name"],authorFunction:[1,"author-function"],authorImage:[1,"author-image"]}]]],["p-3e0dcab5.system",[[1,"wr-case",{caseTitle:[1,"case-title"],caseSubtitle:[1,"case-subtitle"],backgroundColor:[1,"background-color"],backgroundOpacity:[2,"background-opacity"],backgroundImage:[1,"background-image"],topLayer:[1025,"top-layer"],bottomLayer:[1025,"bottom-layer"],href:[1]}]]],["p-9e007e28.system",[[1,"wr-case-highlight",{background:[1],backgroundX:[1,"background-x"],backgroundY:[1,"background-y"],caseTitle:[1,"case-title"],href:[1]}]]],["p-761a1d39.system",[[1,"wr-footer"]]],["p-9a31c56f.system",[[1,"wr-logo"]]],["p-4474e930.system",[[1,"wr-menu-item",{size:[1],badge:[2],href:[1],isLarge:[64]}]]],["p-01754466.system",[[1,"wr-navigation",{isOpen:[32]},[[0,"open","openNavigationListener"],[0,"close","closeNavigationListener"]]]]]],e)}))}}}));
+System.register(["./p-6e092c3e.system.js"],(function(e,o){"use strict";var t,r;return{setters:[function(e){t=e.p;r=e.b}],execute:function(){var e=function(){var e=o.meta.url;var r={};if(e!==""){r.resourcesUrl=new URL(".",e).href}return t(r)};e().then((function(e){return r([["p-90a2baf6.system",[[1,"wr-block-meta",{items:[1],innerData:[32]}],[1,"wr-highlight",{itemTitle:[1,"item-title"],subTitle:[1,"sub-title"]}],[1,"wr-highlight-grid",null,[[0,"hover","onHover"]]],[0,"wr-logo-icon"],[1,"wr-scroll-animation",{once:[4],noTranslate:[4,"no-translate"],noFade:[4,"no-fade"],direction:[1],duration:[2]}]]],["p-1c90b39f.system",[[1,"wr-accordion",{accordionTitle:[1,"accordion-title"],background:[1025],open:[32],closeMe:[64],openMe:[64],calculateSizes:[64]}]]],["p-8fcb6475.system",[[1,"wr-accordion-group",{isCollapse:[4,"is-collapse"],closeChildren:[64]},[[0,"accordionOpened","accordionOpened"]]]]],["p-0c2af3cc.system",[[1,"wr-big-quote",{isDark:[4,"is-dark"],quoteColor:[1,"quote-color"],authorName:[1,"author-name"],authorFunction:[1,"author-function"],authorImage:[1,"author-image"]}]]],["p-ef2edef6.system",[[1,"wr-case",{caseTitle:[1,"case-title"],caseSubtitle:[1,"case-subtitle"],backgroundColor:[1,"background-color"],backgroundOpacity:[2,"background-opacity"],backgroundImage:[1,"background-image"],topLayer:[1025,"top-layer"],bottomLayer:[1025,"bottom-layer"],href:[1]}]]],["p-9e007e28.system",[[1,"wr-case-highlight",{background:[1],backgroundX:[1,"background-x"],backgroundY:[1,"background-y"],caseTitle:[1,"case-title"],href:[1]}]]],["p-761a1d39.system",[[1,"wr-footer"]]],["p-9a31c56f.system",[[1,"wr-logo"]]],["p-4474e930.system",[[1,"wr-menu-item",{size:[1],badge:[2],href:[1],isLarge:[64]}]]],["p-01754466.system",[[1,"wr-navigation",{isOpen:[32]},[[0,"open","openNavigationListener"],[0,"close","closeNavigationListener"]]]]]],e)}))}}}));

dist/webreact/webreact.esm.js

@@ -1,1 +0,1 @@
-import{p as e,b as o}from"./p-abaf52ff.js";(()=>{const o=import.meta.url,a={};return""!==o&&(a.resourcesUrl=new URL(".",o).href),e(a)})().then((e=>o([["p-0ec16f4f",[[1,"wr-block-meta",{items:[1],innerData:[32]}],[1,"wr-highlight",{itemTitle:[1,"item-title"],subTitle:[1,"sub-title"]}],[1,"wr-highlight-grid",null,[[0,"hover","onHover"]]],[0,"wr-logo-icon"],[1,"wr-scroll-animation",{once:[4],noTranslate:[4,"no-translate"],noFade:[4,"no-fade"],direction:[1],duration:[2]}]]],["p-33e36473",[[1,"wr-accordion",{accordionTitle:[1,"accordion-title"],background:[1025],open:[32],closeMe:[64],openMe:[64],calculateSizes:[64]}]]],["p-50aee4b6",[[1,"wr-accordion-group",{isCollapse:[4,"is-collapse"],closeChildren:[64]},[[0,"accordionOpened","accordionOpened"]]]]],["p-e4e616ac",[[1,"wr-big-quote",{isDark:[4,"is-dark"],quoteColor:[1,"quote-color"],authorName:[1,"author-name"],authorFunction:[1,"author-function"],authorImage:[1,"author-image"]}]]],["p-e29c636f",[[1,"wr-case",{caseTitle:[1,"case-title"],caseSubtitle:[1,"case-subtitle"],backgroundColor:[1,"background-color"],backgroundOpacity:[2,"background-opacity"],backgroundImage:[1,"background-image"],topLayer:[1025,"top-layer"],bottomLayer:[1025,"bottom-layer"],href:[1]}]]],["p-2c19f455",[[1,"wr-case-highlight",{background:[1],backgroundX:[1,"background-x"],backgroundY:[1,"background-y"],caseTitle:[1,"case-title"],href:[1]}]]],["p-1e544dab",[[1,"wr-footer"]]],["p-b488d30a",[[1,"wr-logo"]]],["p-d44158b0",[[1,"wr-menu-item",{size:[1],badge:[2],href:[1],isLarge:[64]}]]],["p-f1291929",[[1,"wr-navigation",{isOpen:[32]},[[0,"open","openNavigationListener"],[0,"close","closeNavigationListener"]]]]]],e)));
+import{p as e,b as o}from"./p-abaf52ff.js";(()=>{const o=import.meta.url,a={};return""!==o&&(a.resourcesUrl=new URL(".",o).href),e(a)})().then((e=>o([["p-0ec16f4f",[[1,"wr-block-meta",{items:[1],innerData:[32]}],[1,"wr-highlight",{itemTitle:[1,"item-title"],subTitle:[1,"sub-title"]}],[1,"wr-highlight-grid",null,[[0,"hover","onHover"]]],[0,"wr-logo-icon"],[1,"wr-scroll-animation",{once:[4],noTranslate:[4,"no-translate"],noFade:[4,"no-fade"],direction:[1],duration:[2]}]]],["p-33e36473",[[1,"wr-accordion",{accordionTitle:[1,"accordion-title"],background:[1025],open:[32],closeMe:[64],openMe:[64],calculateSizes:[64]}]]],["p-50aee4b6",[[1,"wr-accordion-group",{isCollapse:[4,"is-collapse"],closeChildren:[64]},[[0,"accordionOpened","accordionOpened"]]]]],["p-e4e616ac",[[1,"wr-big-quote",{isDark:[4,"is-dark"],quoteColor:[1,"quote-color"],authorName:[1,"author-name"],authorFunction:[1,"author-function"],authorImage:[1,"author-image"]}]]],["p-1ae15869",[[1,"wr-case",{caseTitle:[1,"case-title"],caseSubtitle:[1,"case-subtitle"],backgroundColor:[1,"background-color"],backgroundOpacity:[2,"background-opacity"],backgroundImage:[1,"background-image"],topLayer:[1025,"top-layer"],bottomLayer:[1025,"bottom-layer"],href:[1]}]]],["p-2c19f455",[[1,"wr-case-highlight",{background:[1],backgroundX:[1,"background-x"],backgroundY:[1,"background-y"],caseTitle:[1,"case-title"],href:[1]}]]],["p-1e544dab",[[1,"wr-footer"]]],["p-b488d30a",[[1,"wr-logo"]]],["p-d44158b0",[[1,"wr-menu-item",{size:[1],badge:[2],href:[1],isLarge:[64]}]]],["p-f1291929",[[1,"wr-navigation",{isOpen:[32]},[[0,"open","openNavigationListener"],[0,"close","closeNavigationListener"]]]]]],e)));

package.json

 {
   "name": "@webreact/webreact-components",
-  "version": "0.4.29",
+  "version": "0.4.30",
   "description": "Stencil Component Starter",
@@ -37,3 +37,3 @@ "main": "dist/index.cjs.js",
     "@types/jest": "^26.0.24",
-    "atropos": "^0.10.1",
+    "atropos": "^1.0.1",
     "autoprefixer": "^10.3.3",
@@ -40,0 +40,0 @@ "jarallax": "^1.12.7",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1637215

increased by0.69%

Lines of code

24326

increased by0.81%

No dependency changes