@webreact/webreact-components
Advanced tools
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
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
1299005
18379
14