@bigbinary/neeto-site-blocks 1.2.12 → 1.3.1

package/dist/index.cjs.js

@@ -15533,6 +15533,29 @@ var Media = function Media(_ref) {
   }, otherProps));
 };
 
+var PageNavigation = function PageNavigation(_ref) {
+  var Icon = _ref.Icon,
+    isStart = _ref.isStart,
+    onClick = _ref.onClick,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className;
+  var StyledIcon = styled__default["default"](Icon)(function () {
+    return {
+      borderColor: "#1F2433"
+    };
+  });
+  return /*#__PURE__*/React__default["default"].createElement("button", {
+    onClick: onClick,
+    className: classnames("col-span-1", {
+      "col-start-1": isStart,
+      "col-start-12 flex justify-end": !isStart
+    }, className)
+  }, /*#__PURE__*/React__default["default"].createElement(StyledIcon, {
+    fill: "#66C1D4",
+    size: 52
+  }));
+};
+
 var Pagination$1 = function Pagination(_ref) {
   var _classnames, _classnames2;
   var swiper = _ref.swiper,
@@ -16075,6 +16098,20 @@ function createElement(tag, classes) {
   el.classList.add(...(Array.isArray(classes) ? classes : [classes]));
   return el;
 }
+function elementOffset(el) {
+  const window = getWindow();
+  const document = getDocument();
+  const box = el.getBoundingClientRect();
+  const body = document.body;
+  const clientTop = el.clientTop || body.clientTop || 0;
+  const clientLeft = el.clientLeft || body.clientLeft || 0;
+  const scrollTop = el === window ? window.scrollY : el.scrollTop;
+  const scrollLeft = el === window ? window.scrollX : el.scrollLeft;
+  return {
+    top: box.top + scrollTop - clientTop,
+    left: box.left + scrollLeft - clientLeft
+  };
+}
 function elementPrevAll(el, selector) {
   const prevEls = [];
   while (el.previousElementSibling) {
@@ -38849,6 +38886,119 @@ var FooterWithLinks = function FooterWithLinks(_ref) {
   }, copyrightText));
 };
 
+/* eslint-disable consistent-return */
+function Keyboard(_ref) {
+  let {
+    swiper,
+    extendParams,
+    on,
+    emit
+  } = _ref;
+  const document = getDocument();
+  const window = getWindow();
+  swiper.keyboard = {
+    enabled: false
+  };
+  extendParams({
+    keyboard: {
+      enabled: false,
+      onlyInViewport: true,
+      pageUpDown: true
+    }
+  });
+  function handle(event) {
+    if (!swiper.enabled) return;
+    const {
+      rtlTranslate: rtl
+    } = swiper;
+    let e = event;
+    if (e.originalEvent) e = e.originalEvent; // jquery fix
+    const kc = e.keyCode || e.charCode;
+    const pageUpDown = swiper.params.keyboard.pageUpDown;
+    const isPageUp = pageUpDown && kc === 33;
+    const isPageDown = pageUpDown && kc === 34;
+    const isArrowLeft = kc === 37;
+    const isArrowRight = kc === 39;
+    const isArrowUp = kc === 38;
+    const isArrowDown = kc === 40;
+    // Directions locks
+    if (!swiper.allowSlideNext && (swiper.isHorizontal() && isArrowRight || swiper.isVertical() && isArrowDown || isPageDown)) {
+      return false;
+    }
+    if (!swiper.allowSlidePrev && (swiper.isHorizontal() && isArrowLeft || swiper.isVertical() && isArrowUp || isPageUp)) {
+      return false;
+    }
+    if (e.shiftKey || e.altKey || e.ctrlKey || e.metaKey) {
+      return undefined;
+    }
+    if (document.activeElement && document.activeElement.nodeName && (document.activeElement.nodeName.toLowerCase() === 'input' || document.activeElement.nodeName.toLowerCase() === 'textarea')) {
+      return undefined;
+    }
+    if (swiper.params.keyboard.onlyInViewport && (isPageUp || isPageDown || isArrowLeft || isArrowRight || isArrowUp || isArrowDown)) {
+      let inView = false;
+      // Check that swiper should be inside of visible area of window
+      if (elementParents(swiper.el, `.${swiper.params.slideClass}, swiper-slide`).length > 0 && elementParents(swiper.el, `.${swiper.params.slideActiveClass}`).length === 0) {
+        return undefined;
+      }
+      const el = swiper.el;
+      const swiperWidth = el.clientWidth;
+      const swiperHeight = el.clientHeight;
+      const windowWidth = window.innerWidth;
+      const windowHeight = window.innerHeight;
+      const swiperOffset = elementOffset(el);
+      if (rtl) swiperOffset.left -= el.scrollLeft;
+      const swiperCoord = [[swiperOffset.left, swiperOffset.top], [swiperOffset.left + swiperWidth, swiperOffset.top], [swiperOffset.left, swiperOffset.top + swiperHeight], [swiperOffset.left + swiperWidth, swiperOffset.top + swiperHeight]];
+      for (let i = 0; i < swiperCoord.length; i += 1) {
+        const point = swiperCoord[i];
+        if (point[0] >= 0 && point[0] <= windowWidth && point[1] >= 0 && point[1] <= windowHeight) {
+          if (point[0] === 0 && point[1] === 0) continue; // eslint-disable-line
+          inView = true;
+        }
+      }
+      if (!inView) return undefined;
+    }
+    if (swiper.isHorizontal()) {
+      if (isPageUp || isPageDown || isArrowLeft || isArrowRight) {
+        if (e.preventDefault) e.preventDefault();else e.returnValue = false;
+      }
+      if ((isPageDown || isArrowRight) && !rtl || (isPageUp || isArrowLeft) && rtl) swiper.slideNext();
+      if ((isPageUp || isArrowLeft) && !rtl || (isPageDown || isArrowRight) && rtl) swiper.slidePrev();
+    } else {
+      if (isPageUp || isPageDown || isArrowUp || isArrowDown) {
+        if (e.preventDefault) e.preventDefault();else e.returnValue = false;
+      }
+      if (isPageDown || isArrowDown) swiper.slideNext();
+      if (isPageUp || isArrowUp) swiper.slidePrev();
+    }
+    emit('keyPress', kc);
+    return undefined;
+  }
+  function enable() {
+    if (swiper.keyboard.enabled) return;
+    document.addEventListener('keydown', handle);
+    swiper.keyboard.enabled = true;
+  }
+  function disable() {
+    if (!swiper.keyboard.enabled) return;
+    document.removeEventListener('keydown', handle);
+    swiper.keyboard.enabled = false;
+  }
+  on('init', () => {
+    if (swiper.params.keyboard.enabled) {
+      enable();
+    }
+  });
+  on('destroy', () => {
+    if (swiper.keyboard.enabled) {
+      disable();
+    }
+  });
+  Object.assign(swiper.keyboard, {
+    enable,
+    disable
+  });
+}
+
 /* eslint-disable consistent-return */
 function Mousewheel(_ref) {
   let {
@@ -39726,6 +39876,145 @@ function Pagination(_ref) {
   });
 }
 
+function History(_ref) {
+  let {
+    swiper,
+    extendParams,
+    on
+  } = _ref;
+  extendParams({
+    history: {
+      enabled: false,
+      root: '',
+      replaceState: false,
+      key: 'slides',
+      keepQuery: false
+    }
+  });
+  let initialized = false;
+  let paths = {};
+  const slugify = text => {
+    return text.toString().replace(/\s+/g, '-').replace(/[^\w-]+/g, '').replace(/--+/g, '-').replace(/^-+/, '').replace(/-+$/, '');
+  };
+  const getPathValues = urlOverride => {
+    const window = getWindow();
+    let location;
+    if (urlOverride) {
+      location = new URL(urlOverride);
+    } else {
+      location = window.location;
+    }
+    const pathArray = location.pathname.slice(1).split('/').filter(part => part !== '');
+    const total = pathArray.length;
+    const key = pathArray[total - 2];
+    const value = pathArray[total - 1];
+    return {
+      key,
+      value
+    };
+  };
+  const setHistory = (key, index) => {
+    const window = getWindow();
+    if (!initialized || !swiper.params.history.enabled) return;
+    let location;
+    if (swiper.params.url) {
+      location = new URL(swiper.params.url);
+    } else {
+      location = window.location;
+    }
+    const slide = swiper.slides[index];
+    let value = slugify(slide.getAttribute('data-history'));
+    if (swiper.params.history.root.length > 0) {
+      let root = swiper.params.history.root;
+      if (root[root.length - 1] === '/') root = root.slice(0, root.length - 1);
+      value = `${root}/${key ? `${key}/` : ''}${value}`;
+    } else if (!location.pathname.includes(key)) {
+      value = `${key ? `${key}/` : ''}${value}`;
+    }
+    if (swiper.params.history.keepQuery) {
+      value += location.search;
+    }
+    const currentState = window.history.state;
+    if (currentState && currentState.value === value) {
+      return;
+    }
+    if (swiper.params.history.replaceState) {
+      window.history.replaceState({
+        value
+      }, null, value);
+    } else {
+      window.history.pushState({
+        value
+      }, null, value);
+    }
+  };
+  const scrollToSlide = (speed, value, runCallbacks) => {
+    if (value) {
+      for (let i = 0, length = swiper.slides.length; i < length; i += 1) {
+        const slide = swiper.slides[i];
+        const slideHistory = slugify(slide.getAttribute('data-history'));
+        if (slideHistory === value) {
+          const index = swiper.getSlideIndex(slide);
+          swiper.slideTo(index, speed, runCallbacks);
+        }
+      }
+    } else {
+      swiper.slideTo(0, speed, runCallbacks);
+    }
+  };
+  const setHistoryPopState = () => {
+    paths = getPathValues(swiper.params.url);
+    scrollToSlide(swiper.params.speed, paths.value, false);
+  };
+  const init = () => {
+    const window = getWindow();
+    if (!swiper.params.history) return;
+    if (!window.history || !window.history.pushState) {
+      swiper.params.history.enabled = false;
+      swiper.params.hashNavigation.enabled = true;
+      return;
+    }
+    initialized = true;
+    paths = getPathValues(swiper.params.url);
+    if (!paths.key && !paths.value) {
+      if (!swiper.params.history.replaceState) {
+        window.addEventListener('popstate', setHistoryPopState);
+      }
+      return;
+    }
+    scrollToSlide(0, paths.value, swiper.params.runCallbacksOnInit);
+    if (!swiper.params.history.replaceState) {
+      window.addEventListener('popstate', setHistoryPopState);
+    }
+  };
+  const destroy = () => {
+    const window = getWindow();
+    if (!swiper.params.history.replaceState) {
+      window.removeEventListener('popstate', setHistoryPopState);
+    }
+  };
+  on('init', () => {
+    if (swiper.params.history.enabled) {
+      init();
+    }
+  });
+  on('destroy', () => {
+    if (swiper.params.history.enabled) {
+      destroy();
+    }
+  });
+  on('transitionEnd _freeModeNoMomentumRelease', () => {
+    if (initialized) {
+      setHistory(swiper.params.history.key, swiper.activeIndex);
+    }
+  });
+  on('slideChange', () => {
+    if (initialized && swiper.params.cssMode) {
+      setHistory(swiper.params.history.key, swiper.activeIndex);
+    }
+  });
+}
+
 /* eslint no-underscore-dangle: "off" */
 /* eslint no-use-before-define: "off" */
 function Autoplay(_ref) {
@@ -41393,6 +41682,138 @@ var PricingInCardView = function PricingInCardView(_ref) {
   })));
 };
 
+var Slides = function Slides(_ref) {
+  var configurations = _ref.configurations,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    id = _ref.id,
+    disableButtonAndLinks = _ref.disableButtonAndLinks,
+    pageUrl = _ref.pageUrl;
+  var _useState = React.useState(0),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    activeIndex = _useState2[0],
+    setActiveIndex = _useState2[1];
+  var swiperRef = React.useRef(null);
+  var properties = configurations.properties,
+    design = configurations.design;
+  var _properties$content$s = properties.content.slides,
+    slides = _properties$content$s === void 0 ? [] : _properties$content$s,
+    src = properties.backgroundImage.src,
+    enableAnimation = properties.enableAnimation;
+  var baseClasses = "grid grid-cols-12 items-center gap-y-4 sm:gap-x-4 grid-flow-row-dense";
+  var swiperModules = disableButtonAndLinks ? [Keyboard] : [Keyboard, History];
+  var renderSwiperSlide = function renderSwiperSlide(_ref2) {
+    var title = _ref2.title,
+      logoUrl = _ref2.logoUrl,
+      subTitle = _ref2.subTitle,
+      layout = _ref2.layout,
+      imageUrl = _ref2.imageUrl;
+    if (layout === "titleWithSubTitle") {
+      return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledImage$1, {
+        className: "absolute top-8 right-12 w-20",
+        src: logoUrl
+      }), /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "col-span-12"
+      }, /*#__PURE__*/React__default["default"].createElement(Typography$1, {
+        isTitle: true,
+        component: "h1",
+        style: design.title
+      }, title), /*#__PURE__*/React__default["default"].createElement(Typography$1, {
+        isTitle: true,
+        component: "h1",
+        style: design.subTitle
+      }, subTitle)));
+    }
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(StyledImage$1, {
+      className: "absolute top-8 right-12 w-20",
+      src: logoUrl
+    }), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "bottom-0 col-span-12 flex w-full justify-center sm:absolute sm:col-span-10 sm:col-start-2"
+    }, /*#__PURE__*/React__default["default"].createElement(StyledImage$1, {
+      design: design.image,
+      src: imageUrl
+    })));
+  };
+  return /*#__PURE__*/React__default["default"].createElement(MotionWrapper, {
+    enableAnimation: enableAnimation,
+    id: id,
+    backgroundImage: mergeLeft({
+      src: src
+    }, design.backgroundImage),
+    className: "relative flex items-center justify-between",
+    design: mergeDesign(design.body, 80)
+  }, /*#__PURE__*/React__default["default"].createElement(PageNavigation, {
+    activeIndex: activeIndex,
+    slides: slides,
+    swiperRef: swiperRef,
+    isStart: true,
+    Icon: ArrowLeftS$1,
+    className: "absolute left-0 top-1/2 z-20 sm:left-2 lg:left-28",
+    onClick: function onClick() {
+      var _swiperRef$current;
+      return (_swiperRef$current = swiperRef.current) === null || _swiperRef$current === void 0 ? void 0 : _swiperRef$current.slidePrev();
+    }
+  }), /*#__PURE__*/React__default["default"].createElement(Swiper, {
+    loop: true,
+    history: {
+      enabled: true,
+      key: pageUrl !== null && pageUrl !== void 0 ? pageUrl : "slides"
+    },
+    keyboard: {
+      enabled: true,
+      onlyInViewport: true
+    },
+    modules: swiperModules,
+    spaceBetween: 10,
+    onSlideChange: function onSlideChange(swiper) {
+      return setActiveIndex(swiper.activeIndex);
+    },
+    onSwiper: function onSwiper(swiper) {
+      swiperRef.current = swiper;
+    }
+  }, slides.map(function (_ref3, index) {
+    var title = _ref3.title,
+      url = _ref3.url,
+      logoUrl = _ref3.logoUrl,
+      subTitle = _ref3.subTitle,
+      layout = _ref3.layout,
+      imageUrl = _ref3.imageUrl,
+      backgroundImage = _ref3.backgroundImage;
+    return /*#__PURE__*/React__default["default"].createElement(SwiperSlide, {
+      className: classnames("my-auto", className),
+      "data-history": !disableButtonAndLinks ? url : "",
+      key: getUniqueKey(title, index)
+    }, /*#__PURE__*/React__default["default"].createElement(StyledWrapper, {
+      isRootWrapper: true,
+      backgroundImage: mergeLeft({
+        src: backgroundImage.src
+      }, design.backgroundImage),
+      className: classnames("neeto-site-block-wrapper relative lg:w-9/12", baseClasses),
+      design: mergeRight(design.container, {
+        paddingHorizontal: design.body.paddingHorizontal
+      })
+    }, /*#__PURE__*/React__default["default"].createElement(StyledImage$1, {
+      className: "absolute top-8 right-12 w-20",
+      src: logoUrl
+    }), renderSwiperSlide({
+      title: title,
+      logoUrl: logoUrl,
+      subTitle: subTitle,
+      layout: layout,
+      imageUrl: imageUrl
+    })));
+  })), /*#__PURE__*/React__default["default"].createElement(PageNavigation, {
+    activeIndex: activeIndex,
+    swiperRef: swiperRef,
+    Icon: ArrowRightS$1,
+    className: "absolute top-1/2 right-0 z-20 sm:right-2 lg:right-28",
+    onClick: function onClick() {
+      var _swiperRef$current2;
+      return (_swiperRef$current2 = swiperRef.current) === null || _swiperRef$current2 === void 0 ? void 0 : _swiperRef$current2.slideNext();
+    }
+  }));
+};
+
 var _excluded$1 = ["configurations", "className", "id"];
 var TestimonialWithSlider = function TestimonialWithSlider(_ref) {
   var configurations = _ref.configurations,
@@ -41623,6 +42044,7 @@ exports.Icons = index;
 exports.LogoClouds = LogoClouds;
 exports.Paragraph = Paragraph;
 exports.PricingInCardView = PricingInCardView;
+exports.Slides = Slides;
 exports.TestimonialWithSlider = TestimonialWithSlider;
 exports.TestimonialWithVerticalView = TestimonialWithVerticalView;
 //# sourceMappingURL=index.cjs.js.map