@webreact/webreact-components - npm Package Compare versions

Comparing version 0.4.37 to 0.4.38

dist/webreact/p-1dcc5dda.system.entry.js

dist/webreact/p-b15c4843.entry.js

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

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

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

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

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

		@@ -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 {\n display: block;\n}\n\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.navigation {\n width: 0px;\n --tw-scale-x: 0;\n -webkit-transform: var(--tw-transform);\n transform: var(--tw-transform);\n overflow: hidden;\n height: 100vh;\n width: 100vw;\n position: fixed;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n --tw-bg-opacity: 1;\n background-color: rgba(245, 149, 6, var(--tw-bg-opacity));\n position: fixed;\n z-index: 40;\n opacity: 0;\n overflow: hidden;\n}\n\n.navigation-content {\n width: 100%;\n margin-right: auto;\n margin-left: auto;\n padding-right: 1.25rem;\n padding-left: 1.25rem;\n}\n\n@media (min-width: 375px) {\n\n .navigation-content {\n max-width: 375px;\n }\n}\n\n@media (min-width: 480px) {\n\n .navigation-content {\n max-width: 480px;\n }\n}\n\n@media (min-width: 768px) {\n\n .navigation-content {\n max-width: 768px;\n }\n}\n\n@media (min-width: 1024px) {\n\n .navigation-content {\n max-width: 1024px;\n }\n}\n\n@media (min-width: 1280px) {\n\n .navigation-content {\n max-width: 1280px;\n }\n}\n\n.navigation-content {\n margin-left: auto;\n margin-right: auto;\n margin-top: 5rem;\n}\n\n@media (min-width: 768px) {\n\n .navigation-content {\n margin-top: 10rem;\n }\n}\n\n@media (min-width: 1024px) {\n\n .navigation-content {\n margin-top: auto;\n }\n}\n\n.navigation-content {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n@media (min-width: 1024px) {\n\n .navigation-content {\n -ms-flex-direction: row;\n flex-direction: row;\n }\n}\n\n.navigation-content {\n overflow-x: hidden;\n overflow-y: scroll;\n\n @media (min-width: 1024px) {\n width: calc(100vw - 2.5rem);\n }\n}\n\n@media (min-width: 1024px) {\n\n .navigation-sidebar {\n margin-left: auto;\n }\n\n .navigation-sidebar {\n text-align: right;\n }\n}\n\n.navigation-sidebar {\n gap: 2rem;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n margin-top: 3.5rem;\n}\n\n@media (min-width: 1024px) {\n\n .navigation-sidebar {\n margin-top: 0px;\n }\n\n .navigation-sidebar {\n -ms-flex-direction: column;\n flex-direction: column;\n }\n}\n\n.navigation-sidebar {\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n@media (min-width: 768px) {\n\n .navigation-sidebar {\n max-width: 350px;\n }\n}\n\n.navigation-sidebar p {\n margin-top: 0px;\n margin-bottom: 0px;\n}\n\n.navigation-footer {\n width: 100%;\n margin-right: auto;\n margin-left: auto;\n padding-right: 1.25rem;\n padding-left: 1.25rem;\n}\n\n@media (min-width: 375px) {\n\n .navigation-footer {\n max-width: 375px;\n }\n}\n\n@media (min-width: 480px) {\n\n .navigation-footer {\n max-width: 480px;\n }\n}\n\n@media (min-width: 768px) {\n\n .navigation-footer {\n max-width: 768px;\n }\n}\n\n@media (min-width: 1024px) {\n\n .navigation-footer {\n max-width: 1024px;\n }\n}\n\n@media (min-width: 1280px) {\n\n .navigation-footer {\n max-width: 1280px;\n }\n}\n\n.navigation-footer {\n margin-left: auto;\n margin-right: auto;\n margin-top: auto;\n width: 100%;\n margin-bottom: 0.5rem;\n}\n\n@media (min-width: 1024px) {\n\n .navigation-footer {\n margin-bottom: 1rem;\n }\n}\n\n.navigation-footer {\n\n @media (min-width: 1024px) {\n width: calc(100vw - 2.5rem);\n }\n }\n\n.navigation-footer hr {\n border-top-width: 1px;\n border-style: solid;\n border-color: rgba(255, 255, 255, 0.25);\n margin-top: 0px;\n margin-bottom: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-right-width: 0px;\n}\n\n.navigation-footer__container {\n padding-top: 0.5rem;\n}\n\n@media (min-width: 1024px) {\n\n .navigation-footer__container {\n padding-top: 1rem;\n }\n}\n";var WrNavigation=function(){function n(n){registerInstance(this,n);this.navigationToggled=createEvent(this,"navigationToggled",7);this.isOpen=true}n.prototype.componentDidLoad=function(){this.loadAnimation()};n.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")};n.prototype.openNavigationListener=function(){if(!this.isOpen){this.tl.reverse()}this.tl.restart();this.isOpen=true;this.navigationToggled.emit("opened")};n.prototype.closeNavigationListener=function(){if(this.isOpen){this.tl.reverse()}this.tl.play();this.isOpen=false;this.navigationToggled.emit("closed")};n.prototype.render=function(){var n=this;return h(Host,null,h("section",{class:"navigation",ref:function(t){return n.navigationElement=t}},h("div",{class:"navigation-content"},h("nav",{class:"navigation-menu",ref:function(t){return n.menuSlotElement=t}},h("slot",{name:"navigation"})),h("aside",{class:"navigation-sidebar",ref:function(t){return n.sidebarSlotElement=t}},h("slot",null))),h("footer",{class:"navigation-footer",ref:function(t){return n.footerElement=t}},h("hr",null),h("div",{class:"navigation-footer__container"},h("slot",{name:"footer"})))))};return n}();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 {\n display: block;\n}\n\n* {\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n}\n\n.navigation {\n width: 0px;\n --tw-scale-x: 0;\n -webkit-transform: var(--tw-transform);\n transform: var(--tw-transform);\n overflow: hidden;\n height: 100vh;\n width: 100vw;\n position: fixed;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n --tw-bg-opacity: 1;\n background-color: rgba(245, 149, 6, var(--tw-bg-opacity));\n position: fixed;\n z-index: 40;\n opacity: 0;\n overflow: hidden;\n}\n\n.navigation-content {\n width: 100%;\n margin-right: auto;\n margin-left: auto;\n padding-right: 1.25rem;\n padding-left: 1.25rem;\n}\n\n@media (min-width: 375px) {\n\n .navigation-content {\n max-width: 375px;\n }\n}\n\n@media (min-width: 480px) {\n\n .navigation-content {\n max-width: 480px;\n }\n}\n\n@media (min-width: 768px) {\n\n .navigation-content {\n max-width: 768px;\n }\n}\n\n@media (min-width: 1024px) {\n\n .navigation-content {\n max-width: 1024px;\n }\n}\n\n@media (min-width: 1280px) {\n\n .navigation-content {\n max-width: 1280px;\n }\n}\n\n.navigation-content {\n margin-left: auto;\n margin-right: auto;\n margin-top: 5rem;\n}\n\n@media (min-width: 768px) {\n\n .navigation-content {\n margin-top: 10rem;\n }\n}\n\n@media (min-width: 1024px) {\n\n .navigation-content {\n margin-top: auto;\n }\n}\n\n.navigation-content {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n}\n\n@media (min-width: 1024px) {\n\n .navigation-content {\n -ms-flex-direction: row;\n flex-direction: row;\n }\n}\n\n.navigation-content {\n overflow-x: hidden;\n overflow-y: scroll;\n\n scrollbar-width: none;\n}\n\n.navigation-content::-webkit-scrollbar {\n display: none;\n}\n\n.navigation-content {\n\n @media (min-width: 1024px) {\n width: calc(100vw - 2.5rem);\n }\n }\n\n@media (min-width: 1024px) {\n\n .navigation-sidebar {\n margin-left: auto;\n }\n\n .navigation-sidebar {\n text-align: right;\n }\n}\n\n.navigation-sidebar {\n gap: 2rem;\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n margin-top: 3.5rem;\n}\n\n@media (min-width: 1024px) {\n\n .navigation-sidebar {\n margin-top: 0px;\n }\n\n .navigation-sidebar {\n -ms-flex-direction: column;\n flex-direction: column;\n }\n}\n\n.navigation-sidebar {\n --tw-text-opacity: 1;\n color: rgba(255, 255, 255, var(--tw-text-opacity));\n}\n\n@media (min-width: 768px) {\n\n .navigation-sidebar {\n max-width: 350px;\n }\n}\n\n.navigation-sidebar p {\n margin-top: 0px;\n margin-bottom: 0px;\n}\n\n.navigation-footer {\n width: 100%;\n margin-right: auto;\n margin-left: auto;\n padding-right: 1.25rem;\n padding-left: 1.25rem;\n}\n\n@media (min-width: 375px) {\n\n .navigation-footer {\n max-width: 375px;\n }\n}\n\n@media (min-width: 480px) {\n\n .navigation-footer {\n max-width: 480px;\n }\n}\n\n@media (min-width: 768px) {\n\n .navigation-footer {\n max-width: 768px;\n }\n}\n\n@media (min-width: 1024px) {\n\n .navigation-footer {\n max-width: 1024px;\n }\n}\n\n@media (min-width: 1280px) {\n\n .navigation-footer {\n max-width: 1280px;\n }\n}\n\n.navigation-footer {\n margin-left: auto;\n margin-right: auto;\n margin-top: auto;\n width: 100%;\n margin-bottom: 0.5rem;\n}\n\n@media (min-width: 1024px) {\n\n .navigation-footer {\n margin-bottom: 1rem;\n }\n}\n\n.navigation-footer {\n\n @media (min-width: 1024px) {\n width: calc(100vw - 2.5rem);\n }\n }\n\n.navigation-footer hr {\n border-top-width: 1px;\n border-style: solid;\n border-color: rgba(255, 255, 255, 0.25);\n margin-top: 0px;\n margin-bottom: 0px;\n border-bottom-width: 0px;\n border-left-width: 0px;\n border-right-width: 0px;\n}\n\n.navigation-footer__container {\n padding-top: 0.5rem;\n}\n\n@media (min-width: 1024px) {\n\n .navigation-footer__container {\n padding-top: 1rem;\n }\n}\n";var WrNavigation=function(){function n(n){registerInstance(this,n);this.navigationToggled=createEvent(this,"navigationToggled",7);this.isOpen=true}n.prototype.componentDidLoad=function(){this.loadAnimation()};n.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")};n.prototype.openNavigationListener=function(){if(!this.isOpen){this.tl.reverse()}this.tl.restart();this.isOpen=true;this.navigationToggled.emit("opened")};n.prototype.closeNavigationListener=function(){if(this.isOpen){this.tl.reverse()}this.tl.play();this.isOpen=false;this.navigationToggled.emit("closed")};n.prototype.render=function(){var n=this;return h(Host,null,h("section",{class:"navigation",ref:function(t){return n.navigationElement=t}},h("div",{class:"navigation-content"},h("nav",{class:"navigation-menu",ref:function(t){return n.menuSlotElement=t}},h("slot",{name:"navigation"})),h("aside",{class:"navigation-sidebar",ref:function(t){return n.sidebarSlotElement=t}},h("slot",null))),h("footer",{class:"navigation-footer",ref:function(t){return n.footerElement=t}},h("hr",null),h("div",{class:"navigation-footer__container"},h("slot",{name:"footer"})))))};return n}();WrNavigation.style=wrNavigationCss;export{WrNavigation as wr_navigation};

dist/esm/wr-navigation.entry.js

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

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

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-e92a7846.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-c35c1b26.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-c600e39a.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-6bd4b539.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-6f07e99e.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-e92a7846.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-c35c1b26.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-c600e39a.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-6bd4b539.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-1dcc5dda.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 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-9d85a079",[[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-8fb1a509",[[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-4c47c760",[[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-696b5b85",[[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-8dc81057",[[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-9d85a079",[[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-8fb1a509",[[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-4c47c760",[[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-696b5b85",[[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-b15c4843",[[1,"wr-navigation",{isOpen:[32]},[[0,"open","openNavigationListener"],[0,"close","closeNavigationListener"]]]]]],o)));

package.json

		{
		"name": "@webreact/webreact-components",
		"version": "0.4.37",
		"version": "0.4.38",
		"description": "Stencil Component Starter",
		@@ -5,0 +5,0 @@ "main": "dist/index.cjs.js",

dist/webreact/p-6f07e99e.system.entry.js

dist/webreact/p-8dc81057.entry.js

dist/collection/components/wr-navigation/wr-navigation.css

Sorry, the diff of this file is not supported yet

@webreact/webreact-components - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics