{"version":3,"sources":["../src/components/containers/XCarousel/core.tsx"],"names":["React","isEqual","Flicking","ViewportSlot","AutoPlay","Pagination","Arrow","Skeleton","Stack","compareProps","prevProps","nextProps","XCarouselCore","index","props","DynamicXElement","xElement","useXElement","articles","useArticles","height","columns","gap","autoPlay","direction","loop","align","dotMode","dotColor","dotHeight","dotWidth","dotBorder","dotRadius","dotActivedColor","dotActivedHeight","dotActivedWidth","dotActivedBorder","arrowPosition","arrowVisibility","arrowWeight","arrowBgColor","arrowWidth","arrowBorder","arrowRadius","arrowColor","arrowFontSize","arrowHeight","arrowHoverBgColor","arrowHoverBorder","arrowHoverRadius","arrowHoverColor","arrowHoverFontSize","arrowHoverHeight","arrowHoverWidth","plugins","elements","id","p","article","i","XArticleProvider_default","XArticle_default","arrowCircle","arrowOutside","arrowThin","generateBorder","generateRadius","_","core_default"],"mappings":"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","sourcesContent":["import * as React from \"react\";\nimport { isEqual } from \"lodash\";\nimport Flicking, { Plugin, ViewportSlot } from \"@egjs/react-flicking\";\nimport { AutoPlay, Pagination, Arrow } from \"@egjs/flicking-plugins\";\nimport { TUseXElement, useXElement } from \"../../../hooks/useXElement\";\nimport {\n  IXCarouselProps,\n  TXCarouselProps,\n} from \"../../../utils/interfaces/containers/XCarousel.interfaces\";\nimport { Skeleton, Stack } from \"@mui/material\";\nimport { generateBorder } from \"../../../lib/generateBorder\";\nimport { generateRadius } from \"../../../lib/generateRadius\";\nimport XArticleProvider from \"../../../context/XArticleProvider\";\nimport XArticle from \"../../common/XArticle\";\nimport { TCoreXElement } from \"../../../utils/types/core/CoreXelement\";\nimport { useArticles } from \"../../../hooks/useArticles\";\n\nconst compareProps = (prevProps: any, nextProps: any) => {\n  return isEqual(prevProps, nextProps);\n};\n\nconst XCarouselCore: TCoreXElement<IXCarouselProps> = React.memo(\n  ({ index, props, DynamicXElement }) => {\n    // WE TRACK THE BREAK POINTS CHANGES\n\n    // WE ARE GETTING THE CURRENT ELEMENT FROM THE ATOM FAMILY\n    const { xElement } = useXElement<TUseXElement<TXCarouselProps>>(index);\n\n    const { articles } = useArticles({ limit: 8, ...xElement.dataFetching });\n\n    const {\n      height = \"300px\",\n      columns = 1,\n      gap = \"20px\",\n      autoPlay = false,\n      // TODO IMPLEMENT DIRECTION\n      direction = \"horizontal\",\n      loop = false,\n      align = \"prev\",\n\n      // DOTS\n      dotMode = \"bullet\",\n      dotColor,\n      dotHeight,\n      dotWidth,\n      dotBorder,\n      dotRadius,\n      dotActivedColor,\n      dotActivedHeight,\n      dotActivedWidth,\n      dotActivedBorder,\n\n      // ARROW\n      arrowPosition = \"in\",\n      arrowVisibility = \"always\",\n      arrowWeight = \"bold\",\n      arrowBgColor,\n      arrowWidth,\n      arrowBorder,\n      arrowRadius,\n      arrowColor,\n      arrowFontSize,\n      arrowHeight,\n      arrowHoverBgColor,\n      arrowHoverBorder,\n      arrowHoverRadius,\n      arrowHoverColor,\n      arrowHoverFontSize = \"20px\",\n      arrowHoverHeight,\n      arrowHoverWidth,\n    } = props;\n\n    const plugins: Plugin[] = [];\n\n    if (autoPlay) {\n      plugins.push(\n        new AutoPlay({ duration: 5000, direction: \"NEXT\", stopOnHover: true })\n      );\n    }\n\n    if (dotMode !== \"none\") {\n      plugins.push(new Pagination({ type: dotMode }));\n    }\n\n    if (arrowVisibility !== \"none\") {\n      plugins.push(new Arrow({ parentEl: document.body }));\n    }\n\n    let elements = DynamicXElement\n      ? xElement.elementsIndexes.map((id, p) => (\n          <Stack\n            key={id}\n            height=\"100%\"\n            minHeight={height ? height : \"auto\"}\n            width={`calc(100%-${columns !== 1 ? gap : \"0px\"})`}\n            mr={columns !== 1 ? gap : \"0px\"}\n          >\n            {\n              <DynamicXElement\n                key={id}\n                index={id}\n                hierachy={xElement.hierachy}\n                child={null}\n                position={p}\n              />\n            }\n          </Stack>\n        ))\n      : [];\n\n    if (articles && xElement.dataFetching && xElement.dataFetching.enabled) {\n      elements = articles.map((article, i) => {\n        const id = article.id ?? i.toString();\n\n        return (\n          <Stack\n            key={id}\n            height=\"100%\"\n            minHeight={height ? height : \"auto\"}\n            width={`calc(100%-${columns !== 1 ? gap : \"0px\"})`}\n            alignItems=\"center\"\n            justifyContent=\"center\"\n            mr={columns !== 1 ? gap : \"0px\"}\n          >\n            <XArticleProvider data={article}>\n              <XArticle index={id} />\n            </XArticleProvider>\n          </Stack>\n        );\n      });\n    }\n\n    const arrowCircle = arrowBgColor ? \" is-circle\" : \"\";\n\n    const arrowOutside = arrowPosition === \"out\" ? \" is-outside\" : \"\";\n\n    const arrowThin = arrowWeight === \"thin\" ? \" is-thin\" : \"\";\n\n    return (\n      <Stack\n        sx={{\n          height: \"min-content\",\n          width: \"100%\",\n          position: \"relative\",\n\n          \"& .panel\": {\n            width: \"100%\",\n          },\n\n          \"& .flicking-camera\": {\n            // gap: columns !== 1 ? gap : 0,\n          },\n\n          \"& .flicking-pagination\": {\n            // DOT\n            \"& .flicking-pagination-bullet\": {\n              transition: \"linear all 0.2s\",\n              bgcolor: dotColor,\n              height: dotHeight,\n              width: dotWidth,\n              border: generateBorder(dotBorder),\n              borderRadius: generateRadius(dotRadius, \"4px\"),\n\n              \"&.flicking-pagination-bullet-active\": {\n                bgcolor: dotActivedColor,\n                height: dotActivedHeight,\n                width: dotActivedWidth,\n                border: generateBorder(dotActivedBorder),\n              },\n            },\n          },\n\n          // ARROW\n          '& [class*=\"flicking-arrow-\"]': {\n            borderRadius: generateRadius(arrowRadius, \"50%\"),\n            width: arrowWidth,\n            height: arrowHeight,\n\n            \"&:not(.flicking-arrow-disabled)\": {\n              bgcolor: arrowBgColor,\n              border: generateBorder(arrowBorder),\n\n              \"&:before, &:after\": {\n                bgcolor: arrowColor,\n                width: arrowFontSize,\n              },\n            },\n\n            \"&:hover\": {\n              borderRadius: generateRadius(arrowHoverRadius, \"50%\"),\n              width: arrowHoverWidth,\n              height: arrowHoverHeight,\n\n              \"&:not(.flicking-arrow-disabled)\": {\n                bgcolor: arrowHoverBgColor,\n                border: generateBorder(arrowHoverBorder),\n\n                \"&:before, &:after\": {\n                  bgcolor: arrowHoverColor,\n                  width: arrowHoverFontSize,\n                },\n              },\n            },\n          },\n        }}\n      >\n        <Flicking\n          plugins={plugins}\n          align={align}\n          panelsPerView={columns}\n          circular={loop}\n          horizontal={direction === \"horizontal\"}\n        >\n          {elements}\n          {elements.length === 0 && [\n            ...Array(10)\n              .fill(\"col\")\n              .map((_, index) => (\n                <Skeleton width=\"100%\" height={300} key={index.toString()} />\n              )),\n          ]}\n          <ViewportSlot>\n            <div className=\"flicking-pagination\" />\n            <span\n              className={`flicking-arrow-prev${\n                arrowCircle + arrowOutside + arrowThin\n              }`}\n            />\n            <span\n              className={`flicking-arrow-next${\n                arrowCircle + arrowOutside + arrowThin\n              }`}\n            />\n          </ViewportSlot>\n        </Flicking>\n      </Stack>\n    );\n  },\n  compareProps\n);\n\nexport default XCarouselCore;\n"]}