Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More

@webreact/webreact-components

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@webreact/webreact-components - npm Package Compare versions

Comparing version 0.4.12 to 0.4.13

@@ -8,3 +8,3 @@ 'use strict';

const wrNavigationCss = ":host{display:block}*{-webkit-box-sizing:border-box;box-sizing:border-box}.navigation{height:100vh;width:100vw;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:fixed;top:0px;right:0px;bottom:0px;left:0px;--tw-bg-opacity:1;background-color:rgba(245, 149, 6, var(--tw-bg-opacity));position:fixed;z-index:40;opacity:0;width:0px;--tw-scale-x:0;-webkit-transform:var(--tw-transform);transform:var(--tw-transform);overflow:hidden;overflow:hidden}.navigation-content{width:100%;margin-right:auto;margin-left:auto;padding-right:1.25rem;padding-left:1.25rem}@media (min-width: 480px){.navigation-content{max-width:480px}}@media (min-width: 768px){.navigation-content{max-width:768px}}@media (min-width: 1024px){.navigation-content{max-width:1024px}}@media (min-width: 1280px){.navigation-content{max-width:1280px}}.navigation-content{margin-left:auto;margin-right:auto;margin-top:5rem}@media (min-width: 1024px){.navigation-content{margin-top:auto}}.navigation-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media (min-width: 1024px){.navigation-content{-ms-flex-direction:row;flex-direction:row}}.navigation-content{overflow-x:hidden;overflow-y:scroll;width:calc(100vw - 2.5rem)}@media (min-width: 1024px){.navigation-sidebar{margin-left:auto}.navigation-sidebar{text-align:right}}.navigation-sidebar{gap:2rem;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:3.5rem}@media (min-width: 1024px){.navigation-sidebar{margin-top:0px}.navigation-sidebar{-ms-flex-direction:column;flex-direction:column}}.navigation-sidebar{--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity))}.navigation-sidebar p{margin-top:0px;margin-bottom:0px}.navigation-footer{width:100%;margin-right:auto;margin-left:auto;padding-right:1.25rem;padding-left:1.25rem}@media (min-width: 480px){.navigation-footer{max-width:480px}}@media (min-width: 768px){.navigation-footer{max-width:768px}}@media (min-width: 1024px){.navigation-footer{max-width:1024px}}@media (min-width: 1280px){.navigation-footer{max-width:1280px}}.navigation-footer{margin-left:auto;margin-right:auto;margin-top:auto;width:100%;margin-bottom:0.5rem}@media (min-width: 1024px){.navigation-footer{margin-bottom:1rem}}.navigation-footer{width:calc(100vw - 2.5rem)}.navigation-footer hr{border-top-width:1px;border-style:solid;border-color:rgba(255, 255, 255, 0.25);margin-top:0px;margin-bottom:0px;border-bottom-width:0px;border-left-width:0px;border-right-width:0px}.navigation-footer__container{padding-top:0.5rem}@media (min-width: 1024px){.navigation-footer__container{padding-top:1rem}}";
const wrNavigationCss = ":host{display:block}*{-webkit-box-sizing:border-box;box-sizing:border-box}.navigation{width:0px;--tw-scale-x:0;-webkit-transform:var(--tw-transform);transform:var(--tw-transform);overflow:hidden;height:100vh;width:100vw;position:fixed;top:0px;right:0px;bottom:0px;left:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(245, 149, 6, var(--tw-bg-opacity));position:fixed;z-index:40;opacity:0;overflow:hidden}.navigation-content{width:100%;margin-right:auto;margin-left:auto;padding-right:1.25rem;padding-left:1.25rem}@media (min-width: 480px){.navigation-content{max-width:480px}}@media (min-width: 768px){.navigation-content{max-width:768px}}@media (min-width: 1024px){.navigation-content{max-width:1024px}}@media (min-width: 1280px){.navigation-content{max-width:1280px}}.navigation-content{margin-left:auto;margin-right:auto;margin-top:5rem}@media (min-width: 1024px){.navigation-content{margin-top:auto}}.navigation-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media (min-width: 1024px){.navigation-content{-ms-flex-direction:row;flex-direction:row}}.navigation-content{overflow-x:hidden;overflow-y:scroll;width:calc(100vw - 2.5rem)}@media (min-width: 1024px){.navigation-sidebar{margin-left:auto}.navigation-sidebar{text-align:right}}.navigation-sidebar{gap:2rem;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:3.5rem}@media (min-width: 1024px){.navigation-sidebar{margin-top:0px}.navigation-sidebar{-ms-flex-direction:column;flex-direction:column}}.navigation-sidebar{--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity))}.navigation-sidebar p{margin-top:0px;margin-bottom:0px}.navigation-footer{width:100%;margin-right:auto;margin-left:auto;padding-right:1.25rem;padding-left:1.25rem}@media (min-width: 480px){.navigation-footer{max-width:480px}}@media (min-width: 768px){.navigation-footer{max-width:768px}}@media (min-width: 1024px){.navigation-footer{max-width:1024px}}@media (min-width: 1280px){.navigation-footer{max-width:1280px}}.navigation-footer{margin-left:auto;margin-right:auto;margin-top:auto;width:100%;margin-bottom:0.5rem}@media (min-width: 1024px){.navigation-footer{margin-bottom:1rem}}.navigation-footer{width:calc(100vw - 2.5rem)}.navigation-footer hr{border-top-width:1px;border-style:solid;border-color:rgba(255, 255, 255, 0.25);margin-top:0px;margin-bottom:0px;border-bottom-width:0px;border-left-width:0px;border-right-width:0px}.navigation-footer__container{padding-top:0.5rem}@media (min-width: 1024px){.navigation-footer__container{padding-top:1rem}}";

@@ -11,0 +11,0 @@ let WrNavigation = class {

@@ -39,3 +39,3 @@ import { Component, Element, h, Prop } from '@stencil/core';

renderImage() {
return h("img", { class: 'case-card__background', src: this.background, alt: '' });
return h("img", { class: 'case-card__background', loading: 'lazy', src: this.background, alt: '' });
}

@@ -42,0 +42,0 @@ renderPlayArrow() {

import { Component, h, Prop } from '@stencil/core';
import chroma from 'chroma-js';
import throttle from '../../utils/utils';
import { Plane } from '../../geometry/Plane';
import { Point } from '../../geometry/Point';
import Atropos from 'atropos/esm/atropos.esm';
/*

@@ -17,28 +15,2 @@ * design will deliver full sized images to fit in this element.

}
/**
* Called when the mouse leaves the card.
*
* @protected
*/
handleMouseLeave() {
const target = this.card;
target.style.setProperty('--rotate-x', `0deg`);
target.style.setProperty('--rotate-y', `0deg`);
}
/**
* Called when the mouse enters and moves over the card.
*
* @param {MouseEvent} event
* @protected
*/
handleMouseOver(event) {
const target = this.card;
const plane = new Plane(target.clientWidth, target.clientHeight);
const point = new Point(event.offsetX, event.offsetY);
const vector = plane.getPointVectorFromCenter(point);
target.style.setProperty('--rotate-x', `${vector.interval(plane.outerEdge).x}deg`);
target.style.setProperty('--translate-x', `${vector.interval(plane.outerEdge).x}%`);
target.style.setProperty('--rotate-y', `${vector.interval(plane.outerEdge).y}deg`);
target.style.setProperty('--translate-y', `${vector.interval(plane.outerEdge).y}%`);
}
checkForDeprecations() {

@@ -50,15 +22,24 @@ }

componentDidLoad() {
this.bindAtropos();
this.calculateCardColors();
this.bindMouseEvents();
this.checkImagesOrRemove();
}
bindAtropos() {
Atropos({
el: this.atroposElement,
});
console.dir(this.atroposElement);
}
render() {
return (h("div", { class: 'perspective-wrapper' },
h("article", { class: ['case-card'].join(' '), ref: el => this.card = el },
this.renderBackgroundImage(),
this.renderBottomLayer(),
this.renderTopLayer(),
h("div", { class: 'case-card__body' },
h("h2", null, this.caseTitle),
h("h5", null, this.caseSubtitle)))));
return (h("div", { class: 'atropos', ref: el => this.atroposElement = el },
h("div", { class: 'atropos-scale' },
h("div", { class: 'atropos-rotate' },
h("div", { class: 'atropos-inner' },
h("article", { class: ['case-card'].join(' '), ref: el => this.card = el },
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))))))));
}

@@ -69,3 +50,3 @@ renderTopLayer() {

}
return (h("figure", { class: 'case-card__accessory', ref: (el) => this.accessoryImageElement = el },
return (h("figure", { class: 'case-card__accessory', "data-atropos-offset": 0, ref: (el) => this.accessoryImageElement = el },
h("img", { src: this.topLayer, alt: '' })));

@@ -77,3 +58,3 @@ }

}
return (h("figure", { class: 'case-card__mockup', ref: (el) => this.mockupImageElement = el },
return (h("figure", { class: 'case-card__mockup', "data-atropos-offset": 2.5, ref: (el) => this.mockupImageElement = el },
h("img", { src: this.bottomLayer, alt: '' })));

@@ -89,14 +70,6 @@ }

}
return (h("figure", { class: 'background-image', ref: (el) => this.backgroundImageElement = el },
return (h("figure", { class: 'background-image', "data-atropos-offset": 2.5, ref: (el) => this.backgroundImageElement = el },
h("img", { src: this.backgroundImage, alt: '' })));
}
/**
* Binds the mouse event listeners
* @private
*/
async bindMouseEvents() {
this.card.addEventListener('mousemove', throttle(this.handleMouseOver.bind(this), 16));
this.card.addEventListener('mouseout', this.handleMouseLeave.bind(this));
}
/**
* Calculates the card colors based on the passed background color.

@@ -103,0 +76,0 @@ *

@@ -1,1 +0,1 @@

import{r as registerInstance,c as createEvent,h,H as Host}from"./index-e41e20bc.js";import{a as anime}from"./anime.es-d8ec8d88.js";var wrNavigationCss=":host{display:block}*{-webkit-box-sizing:border-box;box-sizing:border-box}.navigation{height:100vh;width:100vw;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:fixed;top:0px;right:0px;bottom:0px;left:0px;--tw-bg-opacity:1;background-color:rgba(245, 149, 6, var(--tw-bg-opacity));position:fixed;z-index:40;opacity:0;width:0px;--tw-scale-x:0;-webkit-transform:var(--tw-transform);transform:var(--tw-transform);overflow:hidden;overflow:hidden}.navigation-content{width:100%;margin-right:auto;margin-left:auto;padding-right:1.25rem;padding-left:1.25rem}@media (min-width: 480px){.navigation-content{max-width:480px}}@media (min-width: 768px){.navigation-content{max-width:768px}}@media (min-width: 1024px){.navigation-content{max-width:1024px}}@media (min-width: 1280px){.navigation-content{max-width:1280px}}.navigation-content{margin-left:auto;margin-right:auto;margin-top:5rem}@media (min-width: 1024px){.navigation-content{margin-top:auto}}.navigation-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media (min-width: 1024px){.navigation-content{-ms-flex-direction:row;flex-direction:row}}.navigation-content{overflow-x:hidden;overflow-y:scroll;width:calc(100vw - 2.5rem)}@media (min-width: 1024px){.navigation-sidebar{margin-left:auto}.navigation-sidebar{text-align:right}}.navigation-sidebar{gap:2rem;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:3.5rem}@media (min-width: 1024px){.navigation-sidebar{margin-top:0px}.navigation-sidebar{-ms-flex-direction:column;flex-direction:column}}.navigation-sidebar{--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity))}.navigation-sidebar p{margin-top:0px;margin-bottom:0px}.navigation-footer{width:100%;margin-right:auto;margin-left:auto;padding-right:1.25rem;padding-left:1.25rem}@media (min-width: 480px){.navigation-footer{max-width:480px}}@media (min-width: 768px){.navigation-footer{max-width:768px}}@media (min-width: 1024px){.navigation-footer{max-width:1024px}}@media (min-width: 1280px){.navigation-footer{max-width:1280px}}.navigation-footer{margin-left:auto;margin-right:auto;margin-top:auto;width:100%;margin-bottom:0.5rem}@media (min-width: 1024px){.navigation-footer{margin-bottom:1rem}}.navigation-footer{width:calc(100vw - 2.5rem)}.navigation-footer hr{border-top-width:1px;border-style:solid;border-color:rgba(255, 255, 255, 0.25);margin-top:0px;margin-bottom:0px;border-bottom-width:0px;border-left-width:0px;border-right-width:0px}.navigation-footer__container{padding-top:0.5rem}@media (min-width: 1024px){.navigation-footer__container{padding-top:1rem}}";var WrNavigation=function(){function t(t){registerInstance(this,t);this.navigationToggled=createEvent(this,"navigationToggled",7);this.isOpen=true}t.prototype.componentDidLoad=function(){this.loadAnimation()};t.prototype.loadAnimation=function(){this.tl=anime.timeline({easing:"easeInCubic",duration:300,autoplay:false});this.tl.add({targets:this.navigationElement,opacity:1,duration:0});this.tl.add({targets:this.navigationElement,width:[0,"100vw"]});this.tl.add({targets:this.menuSlotElement.querySelector("slot").assignedElements(),delay:anime.stagger(100),translateX:["-2rem",0],opacity:[0,1]});this.tl.add({targets:this.footerElement,translateY:["2rem",0],opacity:[0,1]},"-=300");this.tl.add({targets:this.sidebarSlotElement.querySelector("slot").assignedElements(),delay:anime.stagger(100),translateX:["2rem",0],opacity:[0,1]},"-=300")};t.prototype.openNavigationListener=function(){if(!this.isOpen){this.tl.reverse()}this.tl.restart();this.isOpen=true;this.navigationToggled.emit("opened")};t.prototype.closeNavigationListener=function(){if(this.isOpen){this.tl.reverse()}this.tl.play();this.isOpen=false;this.navigationToggled.emit("closed")};t.prototype.render=function(){var t=this;return h(Host,null,h("section",{class:"navigation",ref:function(i){return t.navigationElement=i}},h("div",{class:"navigation-content"},h("nav",{class:"navigation-menu",ref:function(i){return t.menuSlotElement=i}},h("slot",{name:"navigation"})),h("aside",{class:"navigation-sidebar",ref:function(i){return t.sidebarSlotElement=i}},h("slot",null))),h("footer",{class:"navigation-footer",ref:function(i){return t.footerElement=i}},h("hr",null),h("div",{class:"navigation-footer__container"},h("slot",{name:"footer"})))))};return t}();WrNavigation.style=wrNavigationCss;export{WrNavigation as wr_navigation};
import{r as registerInstance,c as createEvent,h,H as Host}from"./index-e41e20bc.js";import{a as anime}from"./anime.es-d8ec8d88.js";var wrNavigationCss=":host{display:block}*{-webkit-box-sizing:border-box;box-sizing:border-box}.navigation{width:0px;--tw-scale-x:0;-webkit-transform:var(--tw-transform);transform:var(--tw-transform);overflow:hidden;height:100vh;width:100vw;position:fixed;top:0px;right:0px;bottom:0px;left:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(245, 149, 6, var(--tw-bg-opacity));position:fixed;z-index:40;opacity:0;overflow:hidden}.navigation-content{width:100%;margin-right:auto;margin-left:auto;padding-right:1.25rem;padding-left:1.25rem}@media (min-width: 480px){.navigation-content{max-width:480px}}@media (min-width: 768px){.navigation-content{max-width:768px}}@media (min-width: 1024px){.navigation-content{max-width:1024px}}@media (min-width: 1280px){.navigation-content{max-width:1280px}}.navigation-content{margin-left:auto;margin-right:auto;margin-top:5rem}@media (min-width: 1024px){.navigation-content{margin-top:auto}}.navigation-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media (min-width: 1024px){.navigation-content{-ms-flex-direction:row;flex-direction:row}}.navigation-content{overflow-x:hidden;overflow-y:scroll;width:calc(100vw - 2.5rem)}@media (min-width: 1024px){.navigation-sidebar{margin-left:auto}.navigation-sidebar{text-align:right}}.navigation-sidebar{gap:2rem;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:3.5rem}@media (min-width: 1024px){.navigation-sidebar{margin-top:0px}.navigation-sidebar{-ms-flex-direction:column;flex-direction:column}}.navigation-sidebar{--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity))}.navigation-sidebar p{margin-top:0px;margin-bottom:0px}.navigation-footer{width:100%;margin-right:auto;margin-left:auto;padding-right:1.25rem;padding-left:1.25rem}@media (min-width: 480px){.navigation-footer{max-width:480px}}@media (min-width: 768px){.navigation-footer{max-width:768px}}@media (min-width: 1024px){.navigation-footer{max-width:1024px}}@media (min-width: 1280px){.navigation-footer{max-width:1280px}}.navigation-footer{margin-left:auto;margin-right:auto;margin-top:auto;width:100%;margin-bottom:0.5rem}@media (min-width: 1024px){.navigation-footer{margin-bottom:1rem}}.navigation-footer{width:calc(100vw - 2.5rem)}.navigation-footer hr{border-top-width:1px;border-style:solid;border-color:rgba(255, 255, 255, 0.25);margin-top:0px;margin-bottom:0px;border-bottom-width:0px;border-left-width:0px;border-right-width:0px}.navigation-footer__container{padding-top:0.5rem}@media (min-width: 1024px){.navigation-footer__container{padding-top:1rem}}";var WrNavigation=function(){function t(t){registerInstance(this,t);this.navigationToggled=createEvent(this,"navigationToggled",7);this.isOpen=true}t.prototype.componentDidLoad=function(){this.loadAnimation()};t.prototype.loadAnimation=function(){this.tl=anime.timeline({easing:"easeInCubic",duration:300,autoplay:false});this.tl.add({targets:this.navigationElement,opacity:1,duration:0});this.tl.add({targets:this.navigationElement,width:[0,"100vw"]});this.tl.add({targets:this.menuSlotElement.querySelector("slot").assignedElements(),delay:anime.stagger(100),translateX:["-2rem",0],opacity:[0,1]});this.tl.add({targets:this.footerElement,translateY:["2rem",0],opacity:[0,1]},"-=300");this.tl.add({targets:this.sidebarSlotElement.querySelector("slot").assignedElements(),delay:anime.stagger(100),translateX:["2rem",0],opacity:[0,1]},"-=300")};t.prototype.openNavigationListener=function(){if(!this.isOpen){this.tl.reverse()}this.tl.restart();this.isOpen=true;this.navigationToggled.emit("opened")};t.prototype.closeNavigationListener=function(){if(this.isOpen){this.tl.reverse()}this.tl.play();this.isOpen=false;this.navigationToggled.emit("closed")};t.prototype.render=function(){var t=this;return h(Host,null,h("section",{class:"navigation",ref:function(i){return t.navigationElement=i}},h("div",{class:"navigation-content"},h("nav",{class:"navigation-menu",ref:function(i){return t.menuSlotElement=i}},h("slot",{name:"navigation"})),h("aside",{class:"navigation-sidebar",ref:function(i){return t.sidebarSlotElement=i}},h("slot",null))),h("footer",{class:"navigation-footer",ref:function(i){return t.footerElement=i}},h("hr",null),h("div",{class:"navigation-footer__container"},h("slot",{name:"footer"})))))};return t}();WrNavigation.style=wrNavigationCss;export{WrNavigation as wr_navigation};
import { r as registerInstance, c as createEvent, h, H as Host } from './index-e41e20bc.js';
import { a as anime } from './anime.es-d8ec8d88.js';
const wrNavigationCss = ":host{display:block}*{-webkit-box-sizing:border-box;box-sizing:border-box}.navigation{height:100vh;width:100vw;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;position:fixed;top:0px;right:0px;bottom:0px;left:0px;--tw-bg-opacity:1;background-color:rgba(245, 149, 6, var(--tw-bg-opacity));position:fixed;z-index:40;opacity:0;width:0px;--tw-scale-x:0;-webkit-transform:var(--tw-transform);transform:var(--tw-transform);overflow:hidden;overflow:hidden}.navigation-content{width:100%;margin-right:auto;margin-left:auto;padding-right:1.25rem;padding-left:1.25rem}@media (min-width: 480px){.navigation-content{max-width:480px}}@media (min-width: 768px){.navigation-content{max-width:768px}}@media (min-width: 1024px){.navigation-content{max-width:1024px}}@media (min-width: 1280px){.navigation-content{max-width:1280px}}.navigation-content{margin-left:auto;margin-right:auto;margin-top:5rem}@media (min-width: 1024px){.navigation-content{margin-top:auto}}.navigation-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media (min-width: 1024px){.navigation-content{-ms-flex-direction:row;flex-direction:row}}.navigation-content{overflow-x:hidden;overflow-y:scroll;width:calc(100vw - 2.5rem)}@media (min-width: 1024px){.navigation-sidebar{margin-left:auto}.navigation-sidebar{text-align:right}}.navigation-sidebar{gap:2rem;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:3.5rem}@media (min-width: 1024px){.navigation-sidebar{margin-top:0px}.navigation-sidebar{-ms-flex-direction:column;flex-direction:column}}.navigation-sidebar{--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity))}.navigation-sidebar p{margin-top:0px;margin-bottom:0px}.navigation-footer{width:100%;margin-right:auto;margin-left:auto;padding-right:1.25rem;padding-left:1.25rem}@media (min-width: 480px){.navigation-footer{max-width:480px}}@media (min-width: 768px){.navigation-footer{max-width:768px}}@media (min-width: 1024px){.navigation-footer{max-width:1024px}}@media (min-width: 1280px){.navigation-footer{max-width:1280px}}.navigation-footer{margin-left:auto;margin-right:auto;margin-top:auto;width:100%;margin-bottom:0.5rem}@media (min-width: 1024px){.navigation-footer{margin-bottom:1rem}}.navigation-footer{width:calc(100vw - 2.5rem)}.navigation-footer hr{border-top-width:1px;border-style:solid;border-color:rgba(255, 255, 255, 0.25);margin-top:0px;margin-bottom:0px;border-bottom-width:0px;border-left-width:0px;border-right-width:0px}.navigation-footer__container{padding-top:0.5rem}@media (min-width: 1024px){.navigation-footer__container{padding-top:1rem}}";
const wrNavigationCss = ":host{display:block}*{-webkit-box-sizing:border-box;box-sizing:border-box}.navigation{width:0px;--tw-scale-x:0;-webkit-transform:var(--tw-transform);transform:var(--tw-transform);overflow:hidden;height:100vh;width:100vw;position:fixed;top:0px;right:0px;bottom:0px;left:0px;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;--tw-bg-opacity:1;background-color:rgba(245, 149, 6, var(--tw-bg-opacity));position:fixed;z-index:40;opacity:0;overflow:hidden}.navigation-content{width:100%;margin-right:auto;margin-left:auto;padding-right:1.25rem;padding-left:1.25rem}@media (min-width: 480px){.navigation-content{max-width:480px}}@media (min-width: 768px){.navigation-content{max-width:768px}}@media (min-width: 1024px){.navigation-content{max-width:1024px}}@media (min-width: 1280px){.navigation-content{max-width:1280px}}.navigation-content{margin-left:auto;margin-right:auto;margin-top:5rem}@media (min-width: 1024px){.navigation-content{margin-top:auto}}.navigation-content{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}@media (min-width: 1024px){.navigation-content{-ms-flex-direction:row;flex-direction:row}}.navigation-content{overflow-x:hidden;overflow-y:scroll;width:calc(100vw - 2.5rem)}@media (min-width: 1024px){.navigation-sidebar{margin-left:auto}.navigation-sidebar{text-align:right}}.navigation-sidebar{gap:2rem;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:3.5rem}@media (min-width: 1024px){.navigation-sidebar{margin-top:0px}.navigation-sidebar{-ms-flex-direction:column;flex-direction:column}}.navigation-sidebar{--tw-text-opacity:1;color:rgba(255, 255, 255, var(--tw-text-opacity))}.navigation-sidebar p{margin-top:0px;margin-bottom:0px}.navigation-footer{width:100%;margin-right:auto;margin-left:auto;padding-right:1.25rem;padding-left:1.25rem}@media (min-width: 480px){.navigation-footer{max-width:480px}}@media (min-width: 768px){.navigation-footer{max-width:768px}}@media (min-width: 1024px){.navigation-footer{max-width:1024px}}@media (min-width: 1280px){.navigation-footer{max-width:1280px}}.navigation-footer{margin-left:auto;margin-right:auto;margin-top:auto;width:100%;margin-bottom:0.5rem}@media (min-width: 1024px){.navigation-footer{margin-bottom:1rem}}.navigation-footer{width:calc(100vw - 2.5rem)}.navigation-footer hr{border-top-width:1px;border-style:solid;border-color:rgba(255, 255, 255, 0.25);margin-top:0px;margin-bottom:0px;border-bottom-width:0px;border-left-width:0px;border-right-width:0px}.navigation-footer__container{padding-top:0.5rem}@media (min-width: 1024px){.navigation-footer__container{padding-top:1rem}}";

@@ -6,0 +6,0 @@ let WrNavigation = class {

@@ -48,17 +48,9 @@ export declare class WrCase {

/**
* Called when the mouse leaves the card.
*
* @protected
* Holds the main Atropos instance.
*/
protected handleMouseLeave(): void;
/**
* Called when the mouse enters and moves over the card.
*
* @param {MouseEvent} event
* @protected
*/
protected handleMouseOver(event: MouseEvent): void;
atroposElement: HTMLElement;
private checkForDeprecations;
componentWillLoad(): void;
componentDidLoad(): void;
bindAtropos(): void;
render(): any;

@@ -73,7 +65,2 @@ protected renderTopLayer(): any;

/**
* Binds the mouse event listeners
* @private
*/
private bindMouseEvents;
/**
* Calculates the card colors based on the passed background color.

@@ -80,0 +67,0 @@ *

@@ -1,1 +0,1 @@

System.register(["./p-6e092c3e.system.js"],(function(e,o){"use strict";var r,t;return{setters:[function(e){r=e.p;t=e.b}],execute:function(){var e=function(){var e=o.meta.url;var t={};if(e!==""){t.resourcesUrl=new URL(".",e).href}return r(t)};e().then((function(e){return t([["p-007059ce.system",[[1,"wr-accordion",{accordionTitle:[1,"accordion-title"],background:[1],open:[32],closeMe:[64],openMe:[64]}],[1,"wr-accordion-group",{isCollapse:[4,"is-collapse"],closeChildren:[64]},[[0,"accordionOpened","accordionOpened"]]],[1,"wr-big-quote",{isDark:[4,"is-dark"],quoteColor:[1,"quote-color"],authorName:[1,"author-name"],authorFunction:[1,"author-function"],authorImage:[1,"author-image"]}],[1,"wr-block-meta",{items:[1],innerData:[32]}],[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"]}],[1,"wr-case-highlight",{background:[1],backgroundX:[1,"background-x"],backgroundY:[1,"background-y"],caseTitle:[1,"case-title"],href:[1]}],[1,"wr-highlight",{itemTitle:[1,"item-title"],subTitle:[1,"sub-title"]}],[1,"wr-highlight-grid",null,[[0,"hover","onHover"]]]]],["p-761a1d39.system",[[1,"wr-footer"]]],["p-b4e39a47.system",[[1,"wr-logo-icon"]]],["p-4474e930.system",[[1,"wr-menu-item",{size:[1],badge:[2],href:[1],isLarge:[64]}]]],["p-2408ad46.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 r,t;return{setters:[function(e){r=e.p;t=e.b}],execute:function(){var e=function(){var e=o.meta.url;var t={};if(e!==""){t.resourcesUrl=new URL(".",e).href}return r(t)};e().then((function(e){return t([["p-26dd3d02.system",[[1,"wr-accordion",{accordionTitle:[1,"accordion-title"],background:[1],open:[32],closeMe:[64],openMe:[64]}],[1,"wr-accordion-group",{isCollapse:[4,"is-collapse"],closeChildren:[64]},[[0,"accordionOpened","accordionOpened"]]],[1,"wr-big-quote",{isDark:[4,"is-dark"],quoteColor:[1,"quote-color"],authorName:[1,"author-name"],authorFunction:[1,"author-function"],authorImage:[1,"author-image"]}],[1,"wr-block-meta",{items:[1],innerData:[32]}],[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"]}],[1,"wr-case-highlight",{background:[1],backgroundX:[1,"background-x"],backgroundY:[1,"background-y"],caseTitle:[1,"case-title"],href:[1]}],[1,"wr-highlight",{itemTitle:[1,"item-title"],subTitle:[1,"sub-title"]}],[1,"wr-highlight-grid",null,[[0,"hover","onHover"]]]]],["p-761a1d39.system",[[1,"wr-footer"]]],["p-b4e39a47.system",[[1,"wr-logo-icon"]]],["p-4474e930.system",[[1,"wr-menu-item",{size:[1],badge:[2],href:[1],isLarge:[64]}]]],["p-43ef059b.system",[[1,"wr-navigation",{isOpen:[32]},[[0,"open","openNavigationListener"],[0,"close","closeNavigationListener"]]]]]],e)}))}}}));

@@ -1,1 +0,1 @@

import{p as o,b as e}from"./p-abaf52ff.js";(()=>{const e=import.meta.url,a={};return""!==e&&(a.resourcesUrl=new URL(".",e).href),o(a)})().then((o=>e([["p-d73b86f6",[[1,"wr-accordion",{accordionTitle:[1,"accordion-title"],background:[1],open:[32],closeMe:[64],openMe:[64]}],[1,"wr-accordion-group",{isCollapse:[4,"is-collapse"],closeChildren:[64]},[[0,"accordionOpened","accordionOpened"]]],[1,"wr-big-quote",{isDark:[4,"is-dark"],quoteColor:[1,"quote-color"],authorName:[1,"author-name"],authorFunction:[1,"author-function"],authorImage:[1,"author-image"]}],[1,"wr-block-meta",{items:[1],innerData:[32]}],[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"]}],[1,"wr-case-highlight",{background:[1],backgroundX:[1,"background-x"],backgroundY:[1,"background-y"],caseTitle:[1,"case-title"],href:[1]}],[1,"wr-highlight",{itemTitle:[1,"item-title"],subTitle:[1,"sub-title"]}],[1,"wr-highlight-grid",null,[[0,"hover","onHover"]]]]],["p-1e544dab",[[1,"wr-footer"]]],["p-d0d1a2b9",[[1,"wr-logo-icon"]]],["p-d44158b0",[[1,"wr-menu-item",{size:[1],badge:[2],href:[1],isLarge:[64]}]]],["p-61c5034e",[[1,"wr-navigation",{isOpen:[32]},[[0,"open","openNavigationListener"],[0,"close","closeNavigationListener"]]]]]],o)));
import{p as o,b as e}from"./p-abaf52ff.js";(()=>{const e=import.meta.url,a={};return""!==e&&(a.resourcesUrl=new URL(".",e).href),o(a)})().then((o=>e([["p-968741e4",[[1,"wr-accordion",{accordionTitle:[1,"accordion-title"],background:[1],open:[32],closeMe:[64],openMe:[64]}],[1,"wr-accordion-group",{isCollapse:[4,"is-collapse"],closeChildren:[64]},[[0,"accordionOpened","accordionOpened"]]],[1,"wr-big-quote",{isDark:[4,"is-dark"],quoteColor:[1,"quote-color"],authorName:[1,"author-name"],authorFunction:[1,"author-function"],authorImage:[1,"author-image"]}],[1,"wr-block-meta",{items:[1],innerData:[32]}],[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"]}],[1,"wr-case-highlight",{background:[1],backgroundX:[1,"background-x"],backgroundY:[1,"background-y"],caseTitle:[1,"case-title"],href:[1]}],[1,"wr-highlight",{itemTitle:[1,"item-title"],subTitle:[1,"sub-title"]}],[1,"wr-highlight-grid",null,[[0,"hover","onHover"]]]]],["p-1e544dab",[[1,"wr-footer"]]],["p-d0d1a2b9",[[1,"wr-logo-icon"]]],["p-d44158b0",[[1,"wr-menu-item",{size:[1],badge:[2],href:[1],isLarge:[64]}]]],["p-642d7020",[[1,"wr-navigation",{isOpen:[32]},[[0,"open","openNavigationListener"],[0,"close","closeNavigationListener"]]]]]],o)));
{
"name": "@webreact/webreact-components",
"version": "0.4.12",
"version": "0.4.13",
"description": "Stencil Component Starter",

@@ -36,2 +36,3 @@ "main": "dist/index.cjs.js",

"@types/jest": "^26.0.24",
"atropos": "^0.10.1",
"autoprefixer": "^10.3.3",

@@ -38,0 +39,0 @@ "jarallax": "^1.12.7",

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is too big to display