@vodafone_de/brix-components 3.1.8 → 3.1.9

package/components/Carousel/index.js

@@ -1,496 +0,0 @@
-"use client";
-"use strict";
-const jsxRuntime = require("react/jsx-runtime");
-require("@af-utils/scrollend-polyfill");
-const react = require("react");
-const hooks_useFocusWithin = require("../../hooks/useFocusWithin/index.js");
-const tags = require("../../tags-CTaUxoCi.cjs");
-const Spacing = require("../../Spacing-Cu_j2b83.cjs");
-const styled = require("styled-components");
-const styled$1 = require("../../styled-D36Jj6J7.cjs");
-const styled$2 = require("../../styled-C83gSQcc.cjs");
-const styled$3 = require("../../styled-B_Yb1i3j.cjs");
-const foundations_mediaQuery_viewport = require("../../index-DuE6C2cO.cjs");
-const foundations_token_getBorderRadius = require("../../foundations/token/getBorderRadius/index.js");
-const foundations_token_getBottomSpacing = require("../../foundations/token/getBottomSpacing/index.js");
-const foundations_token_getObjectColor = require("../../foundations/token/getObjectColor/index.js");
-const foundations_token_getSpacing = require("../../foundations/token/getSpacing/index.js");
-const BorderRadius = require("../../BorderRadius-tg_0N_aM.cjs");
-const ObjectColor = require("../../ObjectColor-BrtIOUrJ.cjs");
-const filterProps = require("../../filterProps-D3K8rtOg.cjs");
-const components_IconButton = require("../IconButton/index.js");
-const components_ScreenreaderOnly = require("../../index-DVXE2AnG.cjs");
-const getItems = (items, loop) => {
-  const normalizedItems = [...items].map((item, index) => ({
-    ...item,
-    index,
-    ghost: false,
-    interactive: true
-  }));
-  for (const index in normalizedItems) {
-    normalizedItems[index].index = parseInt(index, 10);
-    normalizedItems[index].ghost = false;
-  }
-  if (!loop) {
-    return normalizedItems;
-  }
-  const front = [...normalizedItems].map((item) => {
-    const ghost = {
-      ...item
-    };
-    ghost.uid = `front-ghost${ghost.uid}`;
-    ghost.ghost = true;
-    return ghost;
-  });
-  const back = [...normalizedItems].map((item) => {
-    const ghost = {
-      ...item
-    };
-    ghost.uid = `back-ghost${ghost.uid}`;
-    ghost.ghost = true;
-    return ghost;
-  });
-  return front.concat(normalizedItems).concat(back);
-};
-const getItemByScroll = (scroll, itemWidth, items) => {
-  if (0 > scroll) {
-    scroll = 0;
-  }
-  if (scroll > itemWidth * items.length) {
-    scroll = itemWidth * items.length;
-  }
-  let visibleItem = Math.ceil(scroll / itemWidth);
-  if (!visibleItem) {
-    visibleItem = 0;
-  }
-  if (visibleItem >= items.length) {
-    visibleItem = items.length - 1;
-  }
-  if (!items[visibleItem]) {
-    return 0;
-  }
-  return visibleItem;
-};
-const scrollTo = (element, left, behavior = "smooth") => {
-  element.scrollTo({
-    left,
-    behavior
-  });
-};
-const initialState = {
-  ref: void 0,
-  visibleItems: 1,
-  interactive: [0],
-  goPrev: false,
-  goNext: false,
-  numberOfIndicators: 0,
-  activeIndicator: 0
-};
-const CarouselContext = react.createContext({
-  state: initialState
-});
-const CarouselProvider = ({
-  children,
-  loop,
-  ...props
-}) => {
-  const ref = react.useRef(null);
-  const focus = hooks_useFocusWithin.useFocusWithin(ref);
-  const [activeIndex, setActiveIndex] = react.useState(props.activeIndex);
-  const [scrollSpyIndex, setScrollSpyIndex] = react.useState(void 0);
-  const [interactive, setInteractive] = react.useState([]);
-  const [needsFirstPosition, setNeedsFirstPosition] = react.useState(activeIndex !== 0);
-  const [itemWidth, setItemWidth] = react.useState(0);
-  const [visibleItems, setVisibleItems] = react.useState(1);
-  const [goPrev, setGoPrev] = react.useState(false);
-  const [goNext, setGoNext] = react.useState(false);
-  const [numberOfIndicators, setNumberOfIndicators] = react.useState(0);
-  const [activeIndicator, setActiveIndicator] = react.useState(props.items[props.activeIndex].index);
-  react.useEffect(() => {
-    if (loop) {
-      const update = props.items.filter((item) => !item.ghost).length;
-      setNumberOfIndicators(update);
-    } else {
-      const update = props.items.filter((item) => !item.ghost).length - visibleItems + 1;
-      setNumberOfIndicators(update);
-    }
-  }, [loop, visibleItems, props.items]);
-  react.useEffect(() => {
-    if (!(ref == null ? void 0 : ref.current)) {
-      return;
-    }
-    if (!itemWidth) {
-      return;
-    }
-    const track = ref == null ? void 0 : ref.current.offsetWidth;
-    setVisibleItems(Math.floor(track / itemWidth));
-  }, [itemWidth]);
-  react.useEffect(() => {
-    let updateInteractive = [...Array(visibleItems).keys()].map((i) => activeIndex + i);
-    if (focus) {
-      updateInteractive = [...Array(props.items.length).keys()];
-    }
-    setInteractive(updateInteractive);
-  }, [focus, activeIndex, visibleItems, props.items]);
-  react.useEffect(() => {
-    if (!(ref == null ? void 0 : ref.current)) {
-      return;
-    }
-    const handleResize = () => {
-      if (!window) {
-        return;
-      }
-      if (!(ref == null ? void 0 : ref.current)) {
-        return;
-      }
-      const itemWidth2 = ref.current.querySelector("[data-carousel-item]").offsetWidth;
-      setItemWidth(itemWidth2);
-    };
-    window.addEventListener("resize", handleResize);
-    handleResize();
-    return () => {
-      window.removeEventListener("resize", handleResize);
-    };
-  }, [ref.current]);
-  react.useEffect(() => {
-    var _a, _b;
-    if (!(ref == null ? void 0 : ref.current)) {
-      return;
-    }
-    if (!itemWidth) {
-      return;
-    }
-    const handleScroll = (event) => {
-      const left = event.target.scrollLeft;
-      const ucurrent = getItemByScroll(left - itemWidth / 2, itemWidth, props.items);
-      setScrollSpyIndex(ucurrent);
-    };
-    const handleScrollend = (event) => {
-      const left = event.target.scrollLeft;
-      let updateActiveIndex = getItemByScroll(left - itemWidth / 2, itemWidth, props.items);
-      if (loop) {
-        const ghosts = [];
-        for (let i = 0, x = visibleItems; i < x; i += 1) {
-          ghosts.push(props.items[i + updateActiveIndex].ghost);
-        }
-        if (!ghosts.includes(false)) {
-          updateActiveIndex = props.items.findIndex((item) => item.index === props.items[updateActiveIndex].index && !item.ghost);
-          const left2 = updateActiveIndex * itemWidth;
-          const behavior = "instant";
-          scrollTo(ref.current, left2, behavior);
-        }
-      }
-      if (needsFirstPosition) {
-        setNeedsFirstPosition(false);
-      }
-      setActiveIndex(updateActiveIndex);
-      setScrollSpyIndex(void 0);
-    };
-    (_a = ref.current) == null ? void 0 : _a.addEventListener("scroll", handleScroll);
-    (_b = ref.current) == null ? void 0 : _b.addEventListener("scrollend", handleScrollend);
-    return () => {
-      var _a2, _b2;
-      (_a2 = ref.current) == null ? void 0 : _a2.removeEventListener("scroll", handleScroll);
-      (_b2 = ref.current) == null ? void 0 : _b2.removeEventListener("scrollend", handleScrollend);
-    };
-  }, [ref.current, itemWidth, visibleItems, props.items]);
-  react.useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-    if (scrollSpyIndex) {
-      return;
-    }
-    if (activeIndex === scrollSpyIndex) {
-      return;
-    }
-    const left = activeIndex * itemWidth;
-    const behavior = needsFirstPosition ? "instant" : "smooth";
-    scrollTo(ref.current, left, behavior);
-  }, [activeIndex, scrollSpyIndex, ref.current, itemWidth]);
-  react.useEffect(() => {
-    if (!props.onUpdate) {
-      return;
-    }
-    const visibleIndexes = [];
-    for (let i = 0, x = visibleItems; i < x; i += 1) {
-      visibleIndexes.push(props.items[i + activeIndex].index);
-    }
-    props.onUpdate(visibleIndexes);
-  }, [activeIndex]);
-  const movePrev = () => {
-    const prev = activeIndex > 0 ? activeIndex - 1 : props.items.length - 1;
-    setActiveIndex(prev);
-  };
-  const moveNext = () => {
-    const next = activeIndex < props.items.length ? activeIndex + 1 : 0;
-    setActiveIndex(next);
-  };
-  react.useEffect(() => {
-    if (loop) {
-      setGoPrev(() => movePrev);
-      setGoNext(() => moveNext);
-    } else {
-      setGoPrev(activeIndex === 0 ? false : () => movePrev);
-      setGoNext(activeIndex + 1 >= numberOfIndicators ? false : () => moveNext);
-    }
-  }, [loop, activeIndex, numberOfIndicators]);
-  react.useEffect(() => {
-    const index = scrollSpyIndex || activeIndex;
-    setActiveIndicator(props.items[index].index);
-  }, [activeIndex, scrollSpyIndex]);
-  return /* @__PURE__ */ jsxRuntime.jsx(CarouselContext.Provider, { value: {
-    state: {
-      ref,
-      visibleItems,
-      interactive,
-      goPrev,
-      goNext,
-      numberOfIndicators,
-      activeIndicator
-    }
-  }, children });
-};
-const offsetHorizontal = 8;
-const offsetVertical = 8;
-const CarouselStyled = styled.section.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CarouselStyled",
-  componentId: "sc-14nqzsr-0"
-})({
-  paddingBottom: "44px"
-}, foundations_token_getBottomSpacing.getBottomSpacing);
-const CarouselViewportStyled = styled.div.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CarouselViewportStyled",
-  componentId: "sc-14nqzsr-1"
-})({
-  overflowX: "scroll",
-  scrollBehavior: "smooth",
-  scrollSnapType: "x mandatory",
-  scrollbarWidth: "none",
-  width: `calc(100% + ${2 * offsetHorizontal}px)`,
-  "&::-webkit-scrollbar": {
-    width: 0,
-    height: 0
-  }
-}, () => {
-  const nestedStyles = {};
-  const cardSelector = `&:has(${styled$1.CardStyled.toString()})`;
-  nestedStyles[cardSelector] = {
-    paddingLeft: `${offsetHorizontal}px`,
-    paddingRight: `${offsetHorizontal}px`,
-    marginLeft: `${-1 * offsetHorizontal}px`,
-    paddingTop: `${offsetVertical}px`,
-    paddingBottom: `${offsetVertical}px`,
-    width: `calc(100% + ${2 * offsetHorizontal}px)`,
-    scrollPaddingLeft: `calc(${foundations_token_getSpacing.getSpacing(Spacing.spacingMd)} - 6px)`,
-    ...foundations_mediaQuery_viewport.viewport.md({
-      scrollPaddingLeft: `calc(${foundations_token_getSpacing.getSpacing(Spacing.spacingMd)} - 12px)`
-    })
-  };
-  return nestedStyles;
-});
-const CarouselTrackStyled = styled(styled$2.GridStyled).withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CarouselTrackStyled",
-  componentId: "sc-14nqzsr-2"
-})({
-  flexWrap: "nowrap",
-  paddingBottom: foundations_token_getSpacing.getSpacing(Spacing.spacingMd)
-}, () => {
-  const nestedStyles = {};
-  const cardSelector = `&:has(${styled$1.CardStyled.toString()})`;
-  nestedStyles[cardSelector] = {
-    paddingBottom: `calc(${foundations_token_getSpacing.getSpacing(Spacing.spacingMd)} - ${offsetVertical}px)`
-  };
-  return nestedStyles;
-});
-const CarouselItemStyled = styled(styled$3.GridItemStyled).withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CarouselItemStyled",
-  componentId: "sc-14nqzsr-3"
-})({});
-const CarouselTrackEndStyled = styled(styled$3.GridItemStyled).withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CarouselTrackEndStyled",
-  componentId: "sc-14nqzsr-4"
-})({
-  flexBasis: `${foundations_token_getSpacing.getSpacing(Spacing.spacingMd)}px`
-});
-const CarouselSnapperStyled = styled.div.withConfig({
-  displayName: "CarouselSnapperStyled",
-  componentId: "sc-14nqzsr-5"
-})({
-  scrollSnapAlign: "start",
-  height: "100%"
-});
-const CarouselControlStyled = styled.aside.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CarouselControlStyled",
-  componentId: "sc-14nqzsr-6"
-})({
-  position: "relative"
-});
-const CarouselNavigationPrevButtonStyled = styled.div.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CarouselNavigationPrevButtonStyled",
-  componentId: "sc-14nqzsr-7"
-})({
-  position: "absolute",
-  top: "0px",
-  left: "0px"
-});
-const CarouselNavigationNextButtonStyled = styled.div.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CarouselNavigationNextButtonStyled",
-  componentId: "sc-14nqzsr-8"
-})({
-  position: "absolute",
-  top: "0px",
-  right: "0px"
-});
-const CarouselIndicatorsStyled = styled.ol.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CarouselIndicatorsStyled",
-  componentId: "sc-14nqzsr-9"
-})({
-  position: "absolute",
-  right: "0",
-  left: "0",
-  textAlign: "center",
-  height: "24px",
-  paddingTop: "10px",
-  display: "inline-block"
-});
-const CarouselIndicatorItemStyled = styled.li.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CarouselIndicatorItemStyled",
-  componentId: "sc-14nqzsr-10"
-})({
-  display: "inline-block",
-  width: "24px",
-  height: "24px",
-  position: "relative"
-}, {
-  "& div": {
-    position: "absolute",
-    top: "50%",
-    left: "50%",
-    transform: "translateY(-50%) translateX(-50%)"
-  }
-});
-const CarouselIndicatorStyled = styled.div.withConfig({
-  shouldForwardProp: filterProps.filterProps(),
-  displayName: "CarouselIndicatorStyled",
-  componentId: "sc-14nqzsr-11"
-})({
-  display: "inline-block",
-  borderRadius: foundations_token_getBorderRadius.getBorderRadius(BorderRadius.borderRadiusFull),
-  transition: "background-color 0.6s ease , width 0.6s ease,height 0.6s ease"
-}, ({
-  isActive = false
-}) => {
-  return {
-    backgroundColor: isActive ? foundations_token_getObjectColor.getObjectColor(ObjectColor.colorObjectBrand) : foundations_token_getObjectColor.getObjectColor(ObjectColor.colorObjectUnselected),
-    width: isActive ? "16px" : "10px",
-    height: isActive ? "16px" : "10px"
-  };
-});
-const CarouselIndicator = () => {
-  const {
-    state: {
-      numberOfIndicators,
-      activeIndicator
-    }
-  } = react.useContext(CarouselContext);
-  if (!numberOfIndicators) {
-    return null;
-  }
-  const indicators = [...Array(numberOfIndicators).keys()];
-  return /* @__PURE__ */ jsxRuntime.jsx(CarouselIndicatorsStyled, { children: indicators.map((indicator) => /* @__PURE__ */ jsxRuntime.jsx(CarouselIndicatorItemStyled, { isActive: indicator === activeIndicator, children: /* @__PURE__ */ jsxRuntime.jsx(CarouselIndicatorStyled, { isActive: indicator === activeIndicator }) }, indicator)) });
-};
-const CarouselItem = ({
-  uid,
-  gridConfig,
-  interactive = true,
-  children,
-  ...props
-}) => {
-  return /* @__PURE__ */ react.createElement(CarouselItemStyled, { ...props, component: "GridItem", key: uid, uid, ...gridConfig, as: tags.liTagName, ...{
-    inert: !interactive ? true : void 0
-  } }, children);
-};
-const CarouselNavigation = ({
-  uid,
-  screenReaderInstruction,
-  prevAriaLabel,
-  nextAriaLabel
-}) => {
-  const {
-    state: {
-      goPrev,
-      goNext
-    }
-  } = react.useContext(CarouselContext);
-  const getPrevButton = () => {
-    if (false === goPrev) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(CarouselNavigationPrevButtonStyled, { children: /* @__PURE__ */ jsxRuntime.jsx(components_IconButton.default, { label: prevAriaLabel, iconName: "ChevronLeft", appearance: "tertiary", tabIndex: -1, "aria-disabled": "true", "aria-describedby": `${uid}-carousel-instruction`, onClick: goPrev }) });
-  };
-  const getNextButton = () => {
-    if (false === goNext) {
-      return null;
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(CarouselNavigationNextButtonStyled, { children: /* @__PURE__ */ jsxRuntime.jsx(components_IconButton.default, { label: nextAriaLabel, iconName: "ChevronRight", appearance: "tertiary", tabIndex: -1, "aria-disabled": "true", "aria-describedby": `${uid}-carousel-instruction`, onClick: goNext }) });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(components_ScreenreaderOnly.ScreenreaderOnly, { id: `${uid}-carousel-instruction`, children: screenReaderInstruction }),
-    getPrevButton(),
-    getNextButton()
-  ] });
-};
-const CarouselInner = ({
-  gridConfig,
-  items,
-  ...props
-}) => {
-  const {
-    state: {
-      ref,
-      interactive
-    }
-  } = react.useContext(CarouselContext);
-  return /* @__PURE__ */ jsxRuntime.jsxs(CarouselStyled, { ...props, bottomSpacing: Spacing.spacingMd, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(CarouselViewportStyled, { ref, children: /* @__PURE__ */ jsxRuntime.jsxs(CarouselTrackStyled, { as: tags.ulTagName, stretch: true, children: [
-      items.map(({
-        uid,
-        ...item
-      }, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselItem, { uid, gridConfig, interactive: interactive.includes(index), "data-carousel-item": item.index, "data-carousel-ghost": true === item.ghost, children: /* @__PURE__ */ jsxRuntime.jsx(CarouselSnapperStyled, { children: item.children }) }, uid)),
-      /* @__PURE__ */ jsxRuntime.jsx(CarouselTrackEndStyled, { ...gridConfig, as: tags.liTagName })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs(CarouselControlStyled, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx(CarouselIndicator, {}),
-      /* @__PURE__ */ jsxRuntime.jsx(CarouselNavigation, { uid: props.uid, screenReaderInstruction: props.screenReaderInstruction, prevAriaLabel: props.prevAriaLabel, nextAriaLabel: props.nextAriaLabel })
-    ] })
-  ] });
-};
-const carouselDefaultGridConfig = {
-  sm: 12,
-  md: 6,
-  lg: 4
-};
-const Carousel = ({
-  items,
-  activeIndex,
-  loop = false,
-  gridConfig = carouselDefaultGridConfig,
-  ...props
-}) => {
-  activeIndex = activeIndex ? activeIndex : 0;
-  activeIndex = loop ? activeIndex + items.length : activeIndex;
-  const loopableItems = getItems(items, loop);
-  return /* @__PURE__ */ jsxRuntime.jsx(CarouselProvider, { ...props, loop, gridConfig, items: loopableItems, activeIndex, children: /* @__PURE__ */ jsxRuntime.jsx(CarouselInner, { ...props, loop, gridConfig, items: loopableItems, activeIndex }) });
-};
-module.exports = Carousel;