hero-slider - npm Package Compare versions

Comparing version 3.2.0 to 3.2.1

dist/components/AutoplayButton/index.module.css.js

@@ -5,9 +5,5 @@ 'use strict';
 
-var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = ".index-module_Button__Lw9Oe {\n  z-index: 4;\n  position: absolute;\n  color: inherit;\n  /* Placeholders */\n  width: 62px;\n  height: 62px;\n  /* Disabling default button CSS. */\n  padding: 0;\n  margin: 0;\n  outline: none;\n  background: transparent;\n  border: 0;\n}\n\n.index-module_Button__Lw9Oe svg path {\n  transition: d 200ms;\n}\n";
 var AutoplayButtonModuleCss = {"Button":"index-module_Button__Lw9Oe"};
-styleInject_es["default"](css_248z);
 
 exports["default"] = AutoplayButtonModuleCss;
 //# sourceMappingURL=index.module.css.js.map

dist/components/Buttons/index.module.css.js

@@ -5,9 +5,5 @@ 'use strict';
 
-var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = ".index-module_Wrapper__ZIVLd {\n  position: absolute;\n  z-index: 3;\n}\n\n@media (max-width: 744px) {\n  .index-module_Wrapper__ZIVLd {\n    display: none;\n  }\n}\n\n.index-module_Wrapper__ZIVLd,\n.index-module_Wrapper__ZIVLd * {\n  /* To disable double-tap zoom */\n  touch-action: manipulation;\n  pointer-events: none;\n}\n\n.index-module_Container__mtjRh {\n  position: absolute;\n  display: block;\n  height: 100%;\n  width: 100%;\n  top: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-shadow: none;\n  transition: all 400ms;\n  pointer-events: none;\n  will-change: transform;\n}\n\n/* `pointer-events` manipulation to allow clicking inner children AND children inside the Container. */\n.index-module_Wrapper__ZIVLd *:not(.index-module_Container__mtjRh),\n.index-module_Container__mtjRh * {\n  pointer-events: auto;\n}\n\n.index-module_Button__hkx4Z {\n  width: 100%;\n  /* Disabling button styling */\n  background: none;\n\tcolor: inherit;\n\tborder: none;\n\tpadding: 0;\n\tfont: inherit;\n\tcursor: pointer;\n\toutline: inherit;\n}\n\n.index-module_Button__hkx4Z svg {\n  opacity: 0.5;\n  width: 60px;\n  height: 60px;\n  transition: all 200ms ease-in-out;\n  color: #FFF; \n}\n\n.index-module_Button__hkx4Z:hover svg {\n  opacity: 1;\n  width: 80px;\n  height: 80px;\n  color: #FFF; \n}\n\n/**\n* --------------------------------------\n* -------------HORIZONTAL---------------\n* --------------------------------------\n*/\n\n.index-module_Horizontal__8-P70.index-module_Wrapper__ZIVLd {\n  top: 0;\n  width: 20%;\n  height: 100%;\n  min-width: 45px;\n  max-width: 120px;\n}\n\n.index-module_Horizontal__8-P70.index-module_Previous__TaJVT {\n  left: 0;\n}\n\n.index-module_Horizontal__8-P70.index-module_Next__sFCHR {\n  right: 0;\n}\n\n.index-module_Horizontal__8-P70 .index-module_Container__mtjRh:hover {\n  --shadow: 100%;\n}\n\n.index-module_Horizontal__8-P70.index-module_Previous__TaJVT .index-module_Container__mtjRh {\n  left: 33%;\n  transform: translateX(-50%) scaleX(-1);\n  background: linear-gradient(\n    90deg,\n    var(--c1, transparent) 40%,\n    var(--c2, rgb(37, 37, 37, .05)) 60%,\n    var(--c3, rgb(37, 37, 37, 0.5)) 85%\n  ) var(--shadow, 0) / 200%;\n}\n\n.index-module_Horizontal__8-P70.index-module_Next__sFCHR .index-module_Container__mtjRh {\n  right: 33%;\n  transform: translateX(50%);\n  background: linear-gradient(\n    90deg,\n    var(--c1, transparent) 40%,\n    var(--c2, rgb(37, 37, 37, .05)) 60%,\n    var(--c3, rgb(37, 37, 37, 0.5)) 85%\n  ) var(--shadow, 0) / 200%;\n}\n\n/**\n* ------------------------------------\n* -------------VERTICAL---------------\n* ------------------------------------\n*/\n\n.index-module_Vertical__VyL0Y.index-module_Wrapper__ZIVLd {\n  width: 100%;\n  height: 15%;\n  max-height: 200px;\n}\n\n.index-module_Vertical__VyL0Y.index-module_Previous__TaJVT {\n  top: 0;\n}\n\n.index-module_Vertical__VyL0Y.index-module_Next__sFCHR {\n  bottom: 0;\n}\n\n.index-module_Vertical__VyL0Y .index-module_Container__mtjRh:hover {\n  --shadow: 0;\n}\n\n.index-module_Vertical__VyL0Y.index-module_Previous__TaJVT .index-module_Container__mtjRh {\n  background: linear-gradient(to bottom,\n    rgb(37, 37, 37, 0.66) 0%,\n    rgb(37, 37, 37, 0.33) 50%,\n    rgb(37, 37, 37, 0.15) 75%,\n    rgb(37, 37, 37, 0.01) 100%) no-repeat 0px var(--shadow, -200px);\n}\n\n.index-module_Vertical__VyL0Y.index-module_Previous__TaJVT svg {\n  transform: rotate(-90deg);\n}\n\n.index-module_Vertical__VyL0Y.index-module_Next__sFCHR .index-module_Container__mtjRh {\n  background: linear-gradient(to top,\n    rgb(37, 37, 37, 0.66) 0%,\n    rgb(37, 37, 37, 0.33) 50%,\n    rgb(37, 37, 37, 0.15) 75%,\n    rgb(37, 37, 37, 0.01) 100%) no-repeat 0px var(--shadow, 200px);\n}\n\n.index-module_Vertical__VyL0Y.index-module_Next__sFCHR svg {\n  transform: rotate(90deg);\n}\n";
 var ButtonsModuleCss = {"Wrapper":"index-module_Wrapper__ZIVLd","Container":"index-module_Container__mtjRh","Button":"index-module_Button__hkx4Z","Horizontal":"index-module_Horizontal__8-P70","Previous":"index-module_Previous__TaJVT","Next":"index-module_Next__sFCHR","Vertical":"index-module_Vertical__VyL0Y"};
-styleInject_es["default"](css_248z);
 
 exports["default"] = ButtonsModuleCss;
 //# sourceMappingURL=index.module.css.js.map

dist/components/ButtonsNav/index.module.css.js

@@ -5,9 +5,5 @@ 'use strict';
 
-var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = ".index-module_Wrapper__wU5EB {\n  position: absolute;\n  display: inline-flex;\n  z-index: 4;\n  margin: 0 auto;\n  padding: 0;\n  cursor: pointer;\n  user-select: none;\n  opacity: 0;\n  animation: index-module_fade-in__YcH32 var(--nav-fade-in-duration, 500) ease-in var(--nav-fade-in-delay, 1000) forwards;\n}\n\n@keyframes index-module_fade-in__YcH32 {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.index-module_Container__YnfKU {\n  display: flex;\n  position: relative;\n  max-width: 100%;\n  height: 54px;\n  margin: 0;\n  padding: 0;\n  white-space: nowrap;\n}\n\n.index-module_Button__vb0cm,\n.index-module_ExtraButton__wTZEw {\n  display: inline-flex;\n  align-items: center;\n  position: relative;\n  width: 240px;\n  height: 48px;\n  list-style: none;\n  cursor: pointer;\n  background-color: transparent;\n  color: var(--nav-color, #FFF);\n  flex-basis: 0;\n  flex-grow: 1;\n  transition: all 200ms ease-in-out;\n  outline: 0;\n  padding: 0;\n  font-weight: 600;\n}\n\n.index-module_ExtraButton__wTZEw {\n  align-items: unset;\n}\n\n/* Backgrounds set in :before to allow for opacity */\n.index-module_Button__vb0cm:not(.index-module_Active__5slZ5)::before,\n.index-module_ExtraButton__wTZEw:not(.index-module_Active__5slZ5)::before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0.5;\n  background-color: var(--nav-background-color, rgba(255, 255, 255, 0.8));\n  z-index: -1;\n  transition: all 200ms ease-in-out;\n}\n\n.index-module_Button__vb0cm:hover:not(.index-module_Active__5slZ5),\n.index-module_ExtraButton__wTZEw:hover:not(.index-module_Active__5slZ5) {\n  background-color: var(--nav-color, #FFF);\n  color: var(--nav-active-color, rgb(59, 62, 69));\n}\n\n.index-module_ExtraButton__wTZEw {\n  color: var(--nav-color, #FFF);\n}\n\n.index-module_Button__vb0cm:not(.index-module_Active__5slZ5):not(:first-child),\n.index-module_ExtraButton__wTZEw {\n  box-shadow: -1px 0px 0px 0px var(--nav-background-color, rgba(215, 225, 235, 0.8));\n}\n\n.index-module_Description__ZaqVb {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 0 0.5rem;\n}\n\n.index-module_Text__rKn0C {\n  width: 95%;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  overflow: hidden;\n  text-align: center;\n  text-transform: uppercase;\n  color: inherit;\n  letter-spacing: 0.1rem;\n  font-size: 0.75rem;\n  line-height: 1rem;\n}\n\n.index-module_Active__5slZ5 {\n  height: 54px;\n  cursor: default;\n  color: var(--nav-color, #FFF);\n  background-color: transparent;\n}\n\n/* Backgrounds set in :before to allow for opacity */\n.index-module_Active__5slZ5:before {\n  content: '';\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  opacity: 0.95;\n  box-shadow: -1px 0px 0px 0px var(--nav-active-color, rgb(59, 62, 69));\n  background-color: var(--nav-active-color, rgb(59, 62, 69));\n  z-index: -1;\n  transition: all 200ms ease-in-out;\n}\n\n.index-module_Active__5slZ5 + .index-module_Button__vb0cm,\n.index-module_Active__5slZ5 + .index-module_ExtraButton__wTZEw {\n  box-shadow: -1px 0px 0px 0px transparent !important;\n}\n";
 var ButtonsNavModuleCss = {"Wrapper":"index-module_Wrapper__wU5EB","fade-in":"index-module_fade-in__YcH32","Container":"index-module_Container__YnfKU","Button":"index-module_Button__vb0cm","ExtraButton":"index-module_ExtraButton__wTZEw","Active":"index-module_Active__5slZ5","Description":"index-module_Description__ZaqVb","Text":"index-module_Text__rKn0C"};
-styleInject_es["default"](css_248z);
 
 exports["default"] = ButtonsNavModuleCss;
 //# sourceMappingURL=index.module.css.js.map

dist/components/MenuNav/index.module.css.js

@@ -5,9 +5,5 @@ 'use strict';
 
-var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = ".index-module_Wrapper__-jUiF {\n  position: absolute;\n  display: flex;\n  z-index: 4;\n  width: 90%; /* May be placeholder. */\n  margin: 0 auto;\n  padding: 0;\n  cursor: pointer;\n  user-select: none;\n  opacity: 0;\n  animation: index-module_fade-in__HoAls var(--nav-fade-in-duration, 500) ease-in var(--nav-fade-in-delay, 1000) forwards;\n}\n\n@keyframes index-module_fade-in__HoAls {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.index-module_Container__3Qf2J {\n  display: flex;\n  flex-grow: 1;\n  position: relative;\n  margin: 0;\n  padding: 0;\n  border-top: 1px solid var(--nav-color, rgba(215, 225, 235, 0.6));\n}\n\n.index-module_Extra__1b50U {\n  display: flex;  \n  min-width: 50px;\n  margin: 0;\n  padding: 0;\n  color: var(--nav-active-color, #FFF);\n  border-top: 1px solid var(--nav-color, rgba(215, 225, 235, 0.6));\n  /* border-left: 1px solid var(--nav-color, rgba(215, 225, 235, 0.6));s */\n}\n\n.index-module_Bar__TdlPr {\n  position: absolute;\n  top: 0px;\n  height: 4px;\n  background-color: var(--nav-active-color, #FFF);\n  opacity: 0.75;\n  transition: transform 400ms ease;\n}\n\n.index-module_Button__F3ERg {\n  list-style: none;\n  flex: 1;\n  position: relative;\n  display: flex;\n  align-items: center;\n  color: var(--nav-active-color, #FFF);\n  min-height: 15%;\n  height: auto;\n  margin: 1rem 0;\n  padding: 0.5rem 0.75rem;\n}\n\n.index-module_ExtraButton__j1mUn {\n  flex: 1;\n  color: var(--nav-active-color, #FFF);\n  min-height: 15%;\n  height: auto;\n  margin: 1rem 0;\n  padding: 0;\n}\n\n.index-module_Button__F3ERg:not(:first-child):not(:last-child) {\n  border-left: 1px solid var(--nav-color, rgba(215, 225, 235, 0.6));\n}\n\n.index-module_Description__gzcNp {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  padding: 0 0.5rem;\n}\n\n.index-module_Number__jaqYr {\n  position: relative;\n  display: inline-flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  min-width: 36px;\n  width: 36px;\n  height: 36px;\n  line-height: 36px;\n  backface-visibility: hidden;\n  color: var(--nav-active-color, #FFF);\n  font-size: 12px;\n}\n\n.index-module_Number__jaqYr .index-module_Square__wq3HS {\n  background-color: transparent;\n  border-radius: 5px;\n  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.18);\n  display: block;\n  height: 100%;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: rotate(45deg) translate(-50%, -50%);\n  transform-origin: 0px 0px;\n  width: 24px;\n  height: 24px;\n  z-index: -1;\n  border: 1px solid #fff;\n  opacity: 0.5;\n}\n\n.index-module_Text__d-WKC {\n  width: 80%;\n  padding-left: 1.4rem;\n  font-weight: 700;\n  font-size: 12px;\n}\n";
 var MenuNavModuleCss = {"Wrapper":"index-module_Wrapper__-jUiF","fade-in":"index-module_fade-in__HoAls","Container":"index-module_Container__3Qf2J","Extra":"index-module_Extra__1b50U","Bar":"index-module_Bar__TdlPr","Button":"index-module_Button__F3ERg","ExtraButton":"index-module_ExtraButton__j1mUn","Description":"index-module_Description__gzcNp","Number":"index-module_Number__jaqYr","Square":"index-module_Square__wq3HS","Text":"index-module_Text__d-WKC"};
-styleInject_es["default"](css_248z);
 
 exports["default"] = MenuNavModuleCss;
 //# sourceMappingURL=index.module.css.js.map

dist/components/Nav/index.module.css.js

@@ -5,9 +5,5 @@ 'use strict';
 
-var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = ".index-module_Wrapper__xqqKi {\n  display: inline-flex;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  position: absolute;\n  z-index: 4;\n  opacity: 0;\n  animation: index-module_fade-in__Y7AOI var(--nav-fade-in-duration, 500) ease-in var(--nav-fade-in-delay, 1000) forwards;\n}\n\n@keyframes index-module_fade-in__Y7AOI {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.index-module_Button__Xnq8E {\n  position: relative;\n  color: currentColor;\n  height: 50px;\n  max-width: 60px;\n  min-width: 50px;\n  width: 15%;\n  margin: 0 6px;\n  border-bottom: 2px solid var(--nav-color, rgba(200, 215, 235, 0.6));\n  cursor: pointer;\n  transition: all 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.index-module_Active__l5OO4 {\n  border-color: var(--nav-active-color, rgba(200, 215, 235, 1))\n}\n\n@media (max-width: 744px) {\n  .index-module_Button__Xnq8E {\n    display: block;\n    cursor: pointer;\n    color: currentColor;\n    outline: none;\n    height: 14px;\n    width: 14px;\n    min-width: 14px;\n    max-width: 14px;\n    margin: 0 9px;\n    border: 0;\n    font-size: 0;\n    line-height: 0;\n    background: var(--nav-color, rgba(200, 215, 235, 0.6));\n    border-radius: 50%;\n  }\n\n  .index-module_Active__l5OO4 {\n    background: var(--nav-active-color, rgba(200, 215, 235, 1));\n  }\n}\n";
 var NavModuleCss = {"Wrapper":"index-module_Wrapper__xqqKi","fade-in":"index-module_fade-in__Y7AOI","Button":"index-module_Button__Xnq8E","Active":"index-module_Active__l5OO4"};
-styleInject_es["default"](css_248z);
 
 exports["default"] = NavModuleCss;
 //# sourceMappingURL=index.module.css.js.map

dist/components/Overlay/index.module.css.js

@@ -5,9 +5,5 @@ 'use strict';
 
-var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = ".index-module_Container__uwyVd {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 3;\n  pointer-events: none;\n}\n\n.index-module_Container__uwyVd * {\n  pointer-events: auto;\n}\n";
 var OverlayModuleCss = {"Container":"index-module_Container__uwyVd"};
-styleInject_es["default"](css_248z);
 
 exports["default"] = OverlayModuleCss;
 //# sourceMappingURL=index.module.css.js.map

dist/components/SideNav/index.module.css.js

@@ -5,9 +5,5 @@ 'use strict';
 
-var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = ".index-module_Wrapper__jT-Cn {\n  width: 60px;\n  position: absolute;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  z-index: 4;\n  opacity: 0;\n  animation: index-module_fade-in__5i5FF var(--nav-fade-in-duration, 500) ease-in var(--nav-fade-in-delay, 1000) forwards;\n}\n\n@keyframes index-module_fade-in__5i5FF {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.index-module_Button__rDMSg {\n  display: flex;\n  align-items: center;\n  position: relative;\n  margin: 0 auto;\n  padding: 0.5rem 0;\n  text-align: right;\n  color: var(--nav-color, #C8D7EB);\n  cursor: pointer;\n  transition: all 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);\n}\n\n.index-module_Active__uEbtj {\n  color: var(--nav-active-color, #FFF);\n}\n\n.index-module_Line__btiyM {\n  width: 20px;\n  height: 1px;\n  background-color: currentColor;\n  transition: all ease 200ms;\n}\n\n.index-module_Number__YPUv6 {\n  width: 10px;\n  font-size: 19px;\n  margin: 0;\n  transform: scaleX(0);\n  transition: all ease 200ms;\n}\n\n.index-module_Active__uEbtj .index-module_Line__btiyM {\n  width: 50px;\n}\n\n.index-module_Active__uEbtj .index-module_Number__YPUv6 {\n  margin: 0 0.5ch;\n  transform: scaleX(1);\n}\n";
 var SideNavModuleCss = {"Wrapper":"index-module_Wrapper__jT-Cn","fade-in":"index-module_fade-in__5i5FF","Button":"index-module_Button__rDMSg","Active":"index-module_Active__uEbtj","Line":"index-module_Line__btiyM","Number":"index-module_Number__YPUv6"};
-styleInject_es["default"](css_248z);
 
 exports["default"] = SideNavModuleCss;
 //# sourceMappingURL=index.module.css.js.map

dist/components/Slide/Background/index.module.css.js

@@ -5,9 +5,5 @@ 'use strict';
 
-var styleInject_es = require('../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = ".index-module_Background__hqV3F {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n\n.index-module_Image__-UrHA {\n  object-fit: cover;\n  object-position: center;\n  width: 100%;\n  height: 100%;\n}\n\n.index-module_Loading__jqajH,\n.index-module_Loaded__6nMLk {\n  position: absolute;\n  top: 0;\n  left: 0;\n}\n\n.index-module_Loading__jqajH {\n  visibility: hidden;\n}\n\n/* Animations when loaded */\n\n.index-module_FadeIn__iDwzu {\n  opacity: 0;\n  animation: index-module_fade-in__M3j53 var(--background-animation-duration, 300ms) ease-in-out var(--background-animation-delay, 0ms) forwards;\n}\n\n.index-module_ZoomOut__V4Peh {\n  transform: scale(1.5);\n  animation: \n    index-module_fade-in__M3j53 300ms ease-in-out 0ms forwards, \n    index-module_zoom-out__QDhiM var(--background-animation-duration, 30000ms) ease-in-out var(--background-animation-delay, 100ms) forwards;\n}\n\n@keyframes index-module_fade-in__M3j53 {\n  0% {\n    opacity: 0\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes index-module_zoom-out__QDhiM {\n  0% {\n    transform: scale(1.5);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n";
 var BackgroundModuleCss = {"Background":"index-module_Background__hqV3F","Image":"index-module_Image__-UrHA","Loading":"index-module_Loading__jqajH","Loaded":"index-module_Loaded__6nMLk","FadeIn":"index-module_FadeIn__iDwzu","fade-in":"index-module_fade-in__M3j53","ZoomOut":"index-module_ZoomOut__V4Peh","zoom-out":"index-module_zoom-out__QDhiM"};
-styleInject_es["default"](css_248z);
 
 exports["default"] = BackgroundModuleCss;
 //# sourceMappingURL=index.module.css.js.map

dist/components/Slide/index.module.css.js

@@ -5,9 +5,5 @@ 'use strict';
 
-var styleInject_es = require('../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = ".index-module_Slide__vy4u2,\n.index-module_Container__zFpuF  {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  transform: translate3d(0, 0, 0);\n  overflow: hidden;\n}\n\n.index-module_Wrapper__tE11B {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  overflow: hidden;\n}\n\n.index-module_Active__5-5Mj {\n  z-index: 2; /* NOTE: It is imperative for z-index to be here, do not remove. */\n  transform: translate3d(0, 0, 0);\n  transition-delay: var(--sliding-delay, 0ms);\n}\n\n.index-module_Slide__vy4u2 {\n  /* property name | duration | timing function | delay */\n  transition: transform 0ms ease-in-out var(--sliding-delay, 0ms);\n  will-change: transform;\n}\n\n.index-module_Slide__vy4u2:not(.index-module_Active__5-5Mj) {\n  z-index: 1;\n  transform: translate3d(100%, 0, 0);\n  transition-delay: var(--slide-transition-delay, 600ms);\n  user-select: none;\n}\n\n.index-module_Container__zFpuF {\n  backface-visibility: hidden;\n  /* property name | duration | timing function | delay */\n  transition: all 300ms ease-in-out var(--sliding-delay, 200ms);\n  will-change: transform;\n}\n\n.index-module_Container__zFpuF:not(.index-module_Active__5-5Mj) {\n  z-index: 1;\n  opacity: 0;\n  /* property name | duration | timing function | delay */\n  transition: all 200ms ease-in-out var(--sliding-delay, 200ms);\n}\n";
 var SlideModuleCss = {"Slide":"index-module_Slide__vy4u2","Container":"index-module_Container__zFpuF","Wrapper":"index-module_Wrapper__tE11B","Active":"index-module_Active__5-5Mj"};
-styleInject_es["default"](css_248z);
 
 exports["default"] = SlideModuleCss;
 //# sourceMappingURL=index.module.css.js.map

dist/components/Slide/Mask/index.module.css.js

@@ -5,9 +5,5 @@ 'use strict';
 
-var styleInject_es = require('../../../node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = ".index-module_Mask__i5n4j {\n  overflow: hidden;\n  position: absolute;\n  left: 25%;\n  top: 50%;\n  width: calc(var(--slider-widht, 100vw) * 0.66);\n  height: calc(var(--slider-height, 100vh) * 0.66);\n  max-width: 33%;\n  max-height: 50%;\n  -webkit-clip-path: polygon(0% 0%, 0% 100%, 16% 100%, 15% 15%, 85% 15%, 85% 85%, 15% 85%, 16% 100%, 100% 100%, 100% 0%);\n  clip-path: polygon(0% 0%, 0% 100%, 16% 100%, 15% 15%, 85% 15%, 85% 85%, 15% 85%, 16% 100%, 100% 100%, 100% 0%);\n  transform: translate3d(-33.33%, -50%, 0);\n  transition: all calc(var(--mask-duration, 200ms) * 1.5) ease 0s;\n  will-change: transform;\n}\n\n.index-module_Mask__i5n4j:not(.index-module_Active__1mWg7) {\n  opacity: 0;\n  z-index: 1;\n  transform: translate3d(33.33%, -50%, 0);\n  /* property name | duration | timing function | delay */\n  transition: all var(--mask-duration, 200ms) ease 0s;\n}\n\n.index-module_Inner__FmWan {\n  z-index: -1;\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  width: 200%;\n  height: 200%;\n  transform: translate3d(-50%, -50%, 0);\n  background-size: cover;\n  background-position: center center;\n  -webkit-transform-origin: 50% 16.5vh;\n  transform-origin: 50% 16.5vh;\n  transition: all calc(var(--mask-duration, 200ms) * 1.66) ease 0s;\n  will-change: transform;\n}\n\n.index-module_Inner__FmWan.index-module_Sliding__vU2M1 {\n  transition: all var(--mask-duration, 200ms) ease 0s;\n  transform: translate3d(-85%, -50%, 0);\n}\n\n@media (max-width: 1024px) {\n  .index-module_Mask__i5n4j {\n    max-width: 50% !important;\n  }\n  .index-module_Inner__FmWan {\n    width: calc(var(--slider-width, 100vw) * 0.66);\n    height: calc(var(--slider-height, 100vh) * 0.66);\n  }\n}\n\n/* Mask LazyLoad */\n\n.index-module_Loader__w-3j4 {\n  opacity: 0;\n  z-index: -1;\n}\n\n.index-module_Loading__53rJo {\n  opacity: 0;\n}\n\n.index-module_Loaded__vpiHK {\n  opacity: 0;\n  animation-name: index-module_slide-in__wP0IR;\n  animation-timing-function: cubic-bezier(0.6, -0.28, 0.735, 0.045);\n  animation-fill-mode: forwards;\n  animation-duration: var(--background-fade-in-duration, 1500ms);\n  animation-delay: var(--background-fade-in-delay, 100ms);\n}\n\n@keyframes index-module_slide-in__wP0IR {\n  0% {\n    opacity: 0;\n  }\n  10% {\n    -webkit-clip-path: inset(50% 50% 50% 50%);\n    clip-path: inset(50% 50% 50% 50%);\n  }\n  100% {\n    opacity: 1;\n    -webkit-clip-path: inset(0 0 0 0);\n    clip-path: inset(0 0 0 0);\n  }\n}\n";
 var MaskModuleCss = {"Mask":"index-module_Mask__i5n4j","Active":"index-module_Active__1mWg7","Inner":"index-module_Inner__FmWan","Sliding":"index-module_Sliding__vU2M1","Loader":"index-module_Loader__w-3j4","Loading":"index-module_Loading__53rJo","Loaded":"index-module_Loaded__vpiHK","slide-in":"index-module_slide-in__wP0IR"};
-styleInject_es["default"](css_248z);
 
 exports["default"] = MaskModuleCss;
 //# sourceMappingURL=index.module.css.js.map

dist/HeroSlider.js

@@ -6,8 +6,5 @@ 'use strict';
 var jsxRuntime = require('react/jsx-runtime');
-var index = require('./components/Buttons/index.js');
-var HeroSlider_module = require('./HeroSlider.module.css.js');
 var Accessibility = require('./modules/Accessibility.js');
 var Animations = require('./modules/Animations.js');
 var Autoplay = require('./modules/Autoplay.js');
-var ConsoleLogger = require('./modules/ConsoleLogger.js');
 var Controller = require('./modules/Controller.js');
@@ -18,41 +15,6 @@ var IntersectionObserver = require('./modules/IntersectionObserver.js');
 var Settings = require('./modules/Settings.js');
-var composeCssClasses = require('./utils/composeCssClasses.js');
+var Orchestrator = require('./Orchestrator.js');
 
-const logger = ConsoleLogger["default"].new();
-function Orchestrator({ className, width = '100%', height = '100vh', style, children }) {
-    logger.info('[Orchestrator] rerender');
-    const { shouldDisplayButtons } = Accessibility.useAccessibility();
-    const { sliderFadeInDuration, navbarFadeInDuration, navbarFadeInDelay } = Animations.useAnimations();
-    const { state: layout } = Layout.useLayout();
-    const { slidingDuration, slidingDelay, getSlidingCycleDuration } = Controller.useController();
-    const settings = Settings.useSettings();
-    const { debounce } = Autoplay.useAutoplay();
-    const { onTouchStartHandler, onTouchMoveHandler, onTouchEndHandler } = Accessibility.useAccessibility();
-    const { elementObservedRef } = IntersectionObserver.useIntersectionObserver();
-    /**
-     * CSS variables for the transitions.
-     */
-    const cssVariables = {
-        '--sliding-duration': `${slidingDuration}ms`,
-        '--sliding-delay': `${slidingDelay}ms`,
-        '--slide-transition-delay': `${getSlidingCycleDuration()}ms`,
-        '--slider-width': layout.width ? `${layout.width}px` : undefined,
-        '--slider-height': layout.height ? `${layout.height}px` : undefined,
-        '--slider-color': settings.sliderColor,
-        '--slider-fade-in-duration': `${sliderFadeInDuration}ms`,
-        '--nav-fade-in-duration': `${navbarFadeInDuration}ms`,
-        '--nav-fade-in-delay': `${navbarFadeInDelay}ms`,
-        '--nav-background-color': settings.navbarStyle
-            ? settings.navbarStyle.color
-            : undefined,
-        '--nav-active-color': settings.navbarStyle
-            ? settings.navbarStyle.activeColor
-            : undefined,
-        '--mask-duration': `${getSlidingCycleDuration()}ms`
-    };
-    return (jsxRuntime.jsx("div", Object.assign({ "data-testid": "hero-slider", className: composeCssClasses.composeCssClasses('hero-slider', className), ref: elementObservedRef }, { children: jsxRuntime.jsxs("div", Object.assign({ "data-testid": "hero-slider-wrapper", ref: layout.slider, className: composeCssClasses.composeCssClasses('hero-slider-wrapper', HeroSlider_module["default"].Wrapper), onTouchStart: onTouchStartHandler, onTouchMove: onTouchMoveHandler, onTouchEnd: onTouchEndHandler, onMouseMoveCapture: debounce, style: Object.assign(Object.assign(Object.assign({}, cssVariables), style), { width,
-                height }) }, { children: [children, shouldDisplayButtons && jsxRuntime.jsx(index["default"], {})] })) })));
-}
 function HeroSlider(props) {
-    return (jsxRuntime.jsx(Layout.LayoutProvider, { children: jsxRuntime.jsx(Manager.ManagerProvider, Object.assign({ manager: props.manager }, { children: jsxRuntime.jsx(Settings.SettingsProvider, Object.assign({ settings: props.settings }, { children: jsxRuntime.jsx(Controller.ControllerProvider, Object.assign({ controller: props.controller }, { children: jsxRuntime.jsx(Accessibility.AccessibilityProvider, Object.assign({ accessibility: props.accessibility }, { children: jsxRuntime.jsx(Animations.AnimationsProvider, Object.assign({ animations: props.animations }, { children: jsxRuntime.jsx(IntersectionObserver.IntersectionObserverProvider, { children: jsxRuntime.jsx(Autoplay.AutoplayProvider, Object.assign({ autoplay: props.autoplay }, { children: jsxRuntime.jsx(Orchestrator, Object.assign({ className: props.className, width: props.width, height: props.height, style: props.style }, { children: props.children })) })) }) })) })) })) })) })) }));
+    return (jsxRuntime.jsx(Layout.LayoutProvider, { children: jsxRuntime.jsx(Manager.ManagerProvider, Object.assign({ manager: props.manager }, { children: jsxRuntime.jsx(Settings.SettingsProvider, Object.assign({ settings: props.settings }, { children: jsxRuntime.jsx(Controller.ControllerProvider, Object.assign({ controller: props.controller }, { children: jsxRuntime.jsx(Accessibility.AccessibilityProvider, Object.assign({ accessibility: props.accessibility }, { children: jsxRuntime.jsx(Animations.AnimationsProvider, Object.assign({ animations: props.animations }, { children: jsxRuntime.jsx(IntersectionObserver.IntersectionObserverProvider, { children: jsxRuntime.jsx(Autoplay.AutoplayProvider, Object.assign({ autoplay: props.autoplay }, { children: jsxRuntime.jsx(Orchestrator.Orchestrator, Object.assign({ className: props.className, width: props.width, height: props.height, style: props.style }, { children: props.children })) })) }) })) })) })) })) })) }));
 }
@@ -59,0 +21,0 @@

dist/HeroSlider.module.css.js

@@ -5,9 +5,5 @@ 'use strict';
 
-var styleInject_es = require('./node_modules/.pnpm/style-inject@0.3.0/node_modules/style-inject/dist/style-inject.es.js');
-
-var css_248z = ".HeroSlider-module_Wrapper__TaeBr {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  overflow: hidden;\n  /* Removes gray highlight when clicked on safari/mobile. */\n  -webkit-tap-highlight-color: rgba(0,0,0,0);\n  animation: HeroSlider-module_fade-in__5as8N var(--slider-fade-in-duration, 100) ease-in;\n}\n\n@keyframes HeroSlider-module_fade-in__5as8N {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.HeroSlider-module_Container__EBtOP {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n  pointer-events: none;\n}\n\n/* `pointer-events` manipulation to allow clicking inner children AND children inside the Container. */\n.HeroSlider-module_Container__EBtOP * {\n  pointer-events: auto;\n}\n\n/**\n* ------------------------------------\n* ----------ANIMATIONS----------------\n* ------------------------------------\n*/\n\n.HeroSlider-module_Sliding_Fade_In__mRgKX {\n  /* keyframe name | duration | timing function | delay */\n  animation: HeroSlider-module_slide-fade-in__s5eQJ var(--sliding-duration, 600ms) ease-in-out var(--sliding-delay, 0ms);\n}\n\n@keyframes HeroSlider-module_slide-fade-in__s5eQJ {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n.HeroSlider-module_Sliding_Left_To_Right__XPZWw {\n  /* keyframe name | duration | timing function | delay */\n  animation: HeroSlider-module_slide-left-to-right__mPnzQ var(--sliding-duration, 600ms) ease-in-out var(--sliding-delay, 0ms);\n}\n\n@keyframes HeroSlider-module_slide-left-to-right__mPnzQ {\n  0% {\n    clip-path: inset(0% 100% 0% 0%);\n    -webkit-clip-path: inset(0% 100% 0% 0%);\n  }\n  100% {\n    clip-path: inset(0% 0% 0% 0%);\n    -webkit-clip-path: inset(0% 0% 0% 0%);\n  }\n}\n\n.HeroSlider-module_Sliding_Right_To_Left__62-PD {\n  /* keyframe name | duration | timing function | delay */\n  animation: HeroSlider-module_slide-right-to-left__qlxI2 var(--sliding-duration, 600ms) ease-in-out var(--sliding-delay, 0ms);\n}\n\n@keyframes HeroSlider-module_slide-right-to-left__qlxI2 {\n  0% {\n    clip-path: inset(0% 0% 0% 100%);\n    -webkit-clip-path: inset(0% 0% 0% 100%);\n  }\n  100% {\n    clip-path: inset(0% 0% 0% 0%);\n    -webkit-clip-path: inset(0% 0% 0% 0%);\n  }\n}\n\n.HeroSlider-module_Sliding_Top_To_Bottom__9qXf- {\n  /* keyframe name | duration | timing function | delay */\n  animation: HeroSlider-module_slide-top-to-bottom__2AGIn var(--sliding-duration, 600ms) ease-in-out var(--sliding-delay, 0ms);\n}\n\n@keyframes HeroSlider-module_slide-top-to-bottom__2AGIn {\n  0% {\n    clip-path: inset(0% 0% 100% 0%);\n    -webkit-clip-path: inset(0% 0% 100% 0%);\n  }\n  100% {\n    clip-path: inset(0% 0% 0% 0%);\n    -webkit-clip-path: inset(0% 0% 0% 0%);\n  }\n}\n\n.HeroSlider-module_Sliding_Bottom_To_Top__fuFNk {\n  /* keyframe name | duration | timing function | delay */\n  animation: HeroSlider-module_slide-bottom-to-top__fkZ3m var(--sliding-duration, 600ms) ease-in-out var(--sliding-delay, 0ms);\n}\n\n@keyframes HeroSlider-module_slide-bottom-to-top__fkZ3m {\n  0% {\n    clip-path: inset(100% 0% 0% 0%);\n    -webkit-clip-path: inset(100% 0% 0% 0%);\n  }\n  100% {\n    clip-path: inset(0% 0% 0% 0%);\n    -webkit-clip-path: inset(0% 0% 0% 0%);\n  }\n}\n";
 var HeroSliderModuleCss = {"Wrapper":"HeroSlider-module_Wrapper__TaeBr","fade-in":"HeroSlider-module_fade-in__5as8N","Container":"HeroSlider-module_Container__EBtOP","Sliding_Fade_In":"HeroSlider-module_Sliding_Fade_In__mRgKX","slide-fade-in":"HeroSlider-module_slide-fade-in__s5eQJ","Sliding_Left_To_Right":"HeroSlider-module_Sliding_Left_To_Right__XPZWw","slide-left-to-right":"HeroSlider-module_slide-left-to-right__mPnzQ","Sliding_Right_To_Left":"HeroSlider-module_Sliding_Right_To_Left__62-PD","slide-right-to-left":"HeroSlider-module_slide-right-to-left__qlxI2","Sliding_Top_To_Bottom":"HeroSlider-module_Sliding_Top_To_Bottom__9qXf-","slide-top-to-bottom":"HeroSlider-module_slide-top-to-bottom__2AGIn","Sliding_Bottom_To_Top":"HeroSlider-module_Sliding_Bottom_To_Top__fuFNk","slide-bottom-to-top":"HeroSlider-module_slide-bottom-to-top__fkZ3m"};
-styleInject_es["default"](css_248z);
 
 exports["default"] = HeroSliderModuleCss;
 //# sourceMappingURL=HeroSlider.module.css.js.map

dist/modules/Controller.js

@@ -22,5 +22,9 @@ 'use strict';
         case 'start-sliding': {
+            if (state.isSliding)
+                return state;
             return Object.assign(Object.assign({}, state), { isSliding: true, activeSlide: action.payload.nextSlide, prevActiveSlide: state.activeSlide, slidingDirection: action.payload.slidingDirection });
         }
         case 'finish-sliding': {
+            if (!state.isSliding)
+                return state;
             return Object.assign(Object.assign({}, state), { isSliding: false, slidingDirection: undefined });
@@ -74,8 +78,8 @@ }
         const isNotFirstSlide = aSlide > 1;
-        let nextSlide;
+        let prevSlide;
         if (isNotFirstSlide)
-            nextSlide = aSlide - 1;
+            prevSlide = aSlide - 1;
         else
-            nextSlide = lastSlide;
-        return nextSlide;
+            prevSlide = lastSlide;
+        return prevSlide;
     };
@@ -140,16 +144,18 @@ /**
     React__default["default"].useEffect(() => {
+        const delayTimeout = setTimeout(() => {
+            if (state.isSliding && (controller === null || controller === void 0 ? void 0 : controller.onSliding))
+                controller.onSliding(state.activeSlide, state.prevActiveSlide);
+        }, params.slidingDelay);
+        const slidingTimeout = setTimeout(() => {
+            dispatch({ type: 'finish-sliding' });
+            if (controller === null || controller === void 0 ? void 0 : controller.onAfterSliding)
+                controller.onAfterSliding(state.activeSlide, state.prevActiveSlide);
+        }, getSlidingCycleDuration());
         dispatch({
             type: 'set-delay-timeout',
-            payload: setTimeout(() => {
-                if (state.isSliding && (controller === null || controller === void 0 ? void 0 : controller.onSliding))
-                    controller.onSliding(state.activeSlide, state.prevActiveSlide);
-            }, params.slidingDelay)
+            payload: delayTimeout
         });
         dispatch({
             type: 'set-sliding-timeout',
-            payload: setTimeout(() => {
-                dispatch({ type: 'finish-sliding' });
-                if (!state.isSliding && (controller === null || controller === void 0 ? void 0 : controller.onAfterSliding))
-                    controller.onAfterSliding(state.activeSlide, state.prevActiveSlide);
-            }, getSlidingCycleDuration())
+            payload: slidingTimeout
         });
@@ -160,6 +166,4 @@ /**
         return () => {
-            if (state.delayTimeout)
-                clearTimeout(state.delayTimeout);
-            if (state.slidingTimeout)
-                clearTimeout(state.slidingTimeout);
+            clearTimeout(delayTimeout);
+            clearTimeout(slidingTimeout);
         };
@@ -166,0 +170,0 @@ }, [state.activeSlide]);

dist/modules/Manager.js

@@ -38,2 +38,4 @@ 'use strict';
             const { slides } = state;
+            if (slides.has(action.payload.ref))
+                return Object.assign(Object.assign({}, state), { totalSlides: slides.size });
             slides.set(action.payload.ref, {
@@ -48,2 +50,4 @@ ref: action.payload.ref,
             const { slides } = state;
+            if (!slides.has(action.payload))
+                return state;
             slides.delete(action.payload);
@@ -103,3 +107,8 @@ return { isMobile: state.isMobile, slides, totalSlides: slides.size };
     // Learn more in http://kcd.im/optimize-context
-    const value = { state, getSlide, registerSlide, removeSlide };
+    const value = {
+        state,
+        getSlide,
+        registerSlide,
+        removeSlide
+    };
     return (jsxRuntime.jsx(ManagerStateContext.Provider, Object.assign({ value: value }, { children: children })));
@@ -106,0 +115,0 @@ }

package.json

 {
   "name": "hero-slider",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "private": false,
@@ -24,2 +24,3 @@ "description": "This package contains multiple components with a fair range of options to help developers quickly set up a hero slider.",
     "build": "pnpm rollup -c",
+    "build:watch": "pnpm rollup -c --watch",
     "dev": "pnpm watch",
@@ -26,0 +27,0 @@ "lint:fix": "tsc --noEmit && eslint --fix",

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 4 instances in 1 package

Improved metrics

Number of package files

127

increased by2.42%

Lines of code

3524

increased by23.74%

Number of low quality alerts

0

decreased by-100%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

349422

decreased by-0.78%

No dependency changes