@websolutespa/bom-mixer-ui 0.0.1

package/dist/chunk-QSN3F243.mjs

@@ -0,0 +1,33 @@
+import {
+  Container,
+  Section,
+  Text
+} from "./chunk-2NOCZCBX.mjs";
+import {
+  __toESM,
+  require_dynamic
+} from "./chunk-4GP5DTTM.mjs";
+
+// src/lazy/not-found/not-found.tsx
+var import_dynamic = __toESM(require_dynamic());
+import { jsx, jsxs } from "react/jsx-runtime";
+var NotFound = ({ item }) => {
+  return /* @__PURE__ */ jsx(Section, { borderBottom: "1px solid var(--color-neutral-300)", children: /* @__PURE__ */ jsxs(Container, { textAlign: "center", children: [
+    /* @__PURE__ */ jsxs(Text, { size: "5", marginBottom: "1rem", children: [
+      "not found ",
+      item.schema
+    ] }),
+    item.title && /* @__PURE__ */ jsx(Text, { size: "3", marginBottom: "1rem", children: item.title }),
+    /* @__PURE__ */ jsx("code", { children: JSON.stringify(item, null, 2) })
+  ] }) });
+};
+var NotFoundExport = {
+  "not-found": (0, import_dynamic.default)(() => Promise.resolve().then(() => require_not_found()).then(
+    (module) => module.NotFound
+  ))
+};
+
+export {
+  NotFound,
+  NotFoundExport
+};

package/dist/chunk-QXUK3J2W.mjs

@@ -0,0 +1,199 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  getCssResponsive
+} from "./chunk-4GP5DTTM.mjs";
+
+// src/components/flex/flex-row.tsx
+import styled from "styled-components";
+var FlexRow = styled.div`
+  display: flex;
+  align-items: center;
+  // width: 100%;
+  // flex-wrap: wrap;
+  // margin: 0 auto;
+  gap: 0.5rem;
+  ${(props) => getCssResponsive(props)}
+`;
+
+// src/components/flex/flex.tsx
+import { withSchema } from "@websolutespa/bom-mixer-core";
+import styled5 from "styled-components";
+
+// src/components/flex/flex-col.tsx
+import styled2 from "styled-components";
+var FlexCol = styled2.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  // margin: 0 auto;
+  ${(props) => getCssResponsive(props)}
+`;
+
+// src/components/flex/flex-flow.tsx
+import { getClassNames } from "@websolutespa/bom-mixer-core";
+import React, { forwardRef, useEffect, useImperativeHandle } from "react";
+import styled3, { css } from "styled-components";
+import { jsx } from "react/jsx-runtime";
+function getFlexColumn(columns = 2) {
+  const cols = parseInt(columns.toString());
+  if (cols === 1) {
+    return "width: 100%;";
+  }
+  const calc = `calc(${100 / cols}% - (var(--grid-column-gap) * ${cols - 1} / ${cols}))`;
+  return `
+    flex: 1 0 ${calc};
+    max-width: ${calc};
+  `;
+}
+function getCssResponsiveColumn(props, defaultValue = {}) {
+  props = __spreadValues(__spreadValues({}, defaultValue), props);
+  const columnsProps = ["columns", "columnsSm", "columnsMd", "columnsLg", "columnsXl"];
+  let rules = "";
+  for (const [key, value] of Object.entries(props)) {
+    const rule = key.replace(/(.+?)(Sm|Md|Lg|Xl)?$/, function(m, g1, g2) {
+      const prop = g1;
+      if (columnsProps.includes(key)) {
+        const rule2 = getFlexColumn(value);
+        if (g2) {
+          const size = g2.toLowerCase();
+          return `@media(min-width: ${props.theme.mediaQuery[size]}px) {
+              ${rule2}
+            }`;
+        } else {
+          return rule2;
+        }
+      } else {
+        return "";
+      }
+    });
+    rules += rule + "\n";
+  }
+  return rules;
+}
+var StyledFlexFlow = styled3.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: var(--grid-column-gap);
+  ${(props) => css`
+    &>div {
+      position: relative;
+      ${getCssResponsiveColumn(props)}
+    }
+    ${getCssResponsive(props)}
+  `}
+`;
+var FlexFlow = forwardRef((_a, ref) => {
+  var _b = _a, { children, className, as = "div" } = _b, props = __objRest(_b, ["children", "className", "as"]);
+  const innerRef = React.createRef();
+  useImperativeHandle(ref, () => innerRef.current);
+  useEffect(() => {
+    if (!(window && window.addEventListener)) {
+      return;
+    }
+    if (!innerRef.current) {
+      return;
+    }
+    const element = innerRef.current;
+    const imagesLoaded = Array.from(element.querySelectorAll("img"));
+    if (imagesLoaded.length === 0) {
+      return;
+    }
+    imagesLoaded.forEach((image) => {
+      image.addEventListener("load", () => reposChildElements(element), {
+        once: true
+      });
+      image.addEventListener("error", () => reposChildElements(element), {
+        once: true
+      });
+    });
+    reposChildElements(element);
+    const onResize = () => {
+      reposChildElements(element);
+    };
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("resize", onResize);
+    };
+  }, [children]);
+  const classNames = getClassNames("flex-flow", className);
+  return /* @__PURE__ */ jsx(StyledFlexFlow, __spreadProps(__spreadValues({ className: classNames, ref: innerRef, as }, props), { children }));
+});
+FlexFlow.displayName = "FlexFlow";
+function reposChildElements(node) {
+  node.style.height = "";
+  const nodeRect = node.getBoundingClientRect();
+  const items = Array.prototype.slice.call(node.children);
+  items.forEach((x) => x.style.top = null);
+  const itemStyles = items.map((item) => getComputedStyle(item));
+  let itemRect = items[0].getBoundingClientRect();
+  let itemStyle = itemStyles[0];
+  const itemOuterWidth = itemRect.width + parseFloat(itemStyle.marginLeft) + parseFloat(itemStyle.marginRight);
+  const cols = Math.round(1 / (itemOuterWidth / nodeRect.width));
+  const heights = {};
+  items.forEach((item, i) => {
+    itemRect = item.getBoundingClientRect();
+    itemStyle = itemStyles[i];
+    const c = i % cols;
+    if (typeof heights[c] == "undefined") {
+      heights[c] = 0;
+    }
+    heights[c] += itemRect.height + parseFloat(itemStyle.marginBottom);
+    if (i - cols >= 0) {
+      const previousIndex = i - cols;
+      const previousItem = items[previousIndex];
+      const previousRect = previousItem.getBoundingClientRect();
+      const previousBottom = previousRect.bottom;
+      const top = itemRect.top - parseFloat(itemStyle.marginBottom);
+      item.style.top = `-${top - previousBottom}px`;
+    }
+  });
+  const maxHeight = Math.max(...Object.values(heights));
+  node.style.height = `${maxHeight}px`;
+}
+
+// src/components/flex/flex-responsive.tsx
+import styled4 from "styled-components";
+var FlexResponsive = styled4.div`
+  display: flex;
+  width: 100%;
+  margin: 0 auto;
+  gap: 0.5rem;
+
+  @media (max-width: 399.9px) {
+    flex-direction: column;
+    justify-content: stretch;
+  }
+
+  @media (min-width: 400px) {
+    flex-direction: row;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+
+  ${(props) => getCssResponsive(props)}
+`;
+
+// src/components/flex/flex.tsx
+var FlexBase = styled5.div`
+  display: flex;
+  // flex-direction: column;
+  // justify-content: center;
+  align-items: center;
+  ${(props) => getCssResponsive(props)}
+`;
+var Flex = withSchema(FlexBase, {
+  Row: FlexRow,
+  Col: FlexCol,
+  Responsive: FlexResponsive,
+  Flow: FlexFlow,
+  displayName: "Flex"
+});
+
+export {
+  FlexRow,
+  Flex
+};

package/dist/chunk-RU2KB7XM.mjs

@@ -0,0 +1,51 @@
+import {
+  NavLink
+} from "./chunk-U4CLZOPI.mjs";
+import {
+  Flex
+} from "./chunk-QXUK3J2W.mjs";
+import {
+  Button
+} from "./chunk-VTNTTQXM.mjs";
+import {
+  Container,
+  Section,
+  Text
+} from "./chunk-2NOCZCBX.mjs";
+import {
+  __toESM,
+  require_dynamic
+} from "./chunk-4GP5DTTM.mjs";
+
+// src/sections/products-detail-download/products-detail-download.tsx
+var import_dynamic = __toESM(require_dynamic());
+import { getClassNames } from "@websolutespa/bom-mixer-core";
+import { Lock } from "@websolutespa/bom-mixer-icons";
+import { jsx, jsxs } from "react/jsx-runtime";
+var ProductsDetailDownload = ({ id, item }) => {
+  const classNames = getClassNames(item.schema);
+  if (!item) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Section, { id, className: classNames, padding: "6rem 0", children: /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs(Flex.Col, { children: [
+    item.title && /* @__PURE__ */ jsx(Text, { size: "3", marginBottom: "3rem", textAlign: "center", children: item.title }),
+    item.links && item.links.map((link, l) => /* @__PURE__ */ jsx(NavLink, { href: link.href, passHref: true, children: /* @__PURE__ */ jsx(Button, { as: "a", variant: "secondary", children: /* @__PURE__ */ jsxs(Flex.Row, { width: "100%", children: [
+      link.secure && /* @__PURE__ */ jsx(Lock, {}),
+      /* @__PURE__ */ jsx(Text, { flexGrow: 1, children: link.title }),
+      /* @__PURE__ */ jsxs(Text, { flexBasis: "20%", children: [
+        "Download ",
+        link.type
+      ] })
+    ] }) }) }, l))
+  ] }) }) });
+};
+var ProductsDetailDownloadExport = {
+  "products-detail-download": (0, import_dynamic.default)(() => Promise.resolve().then(() => require_products_detail_download()).then(
+    (module) => module.ProductsDetailDownload
+  ))
+};
+
+export {
+  ProductsDetailDownload,
+  ProductsDetailDownloadExport
+};

package/dist/chunk-SBQY6FWU.mjs

@@ -0,0 +1,77 @@
+import {
+  Card
+} from "./chunk-LEHIZSHR.mjs";
+import {
+  Button
+} from "./chunk-A7SAZJPB.mjs";
+import {
+  Media
+} from "./chunk-GNG6WR62.mjs";
+import {
+  Container,
+  Section,
+  Text
+} from "./chunk-GGXSEAD2.mjs";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-B5WDQW62.mjs";
+
+// src/lazy/carousel-1/carousel-1.tsx
+import { getClassNames } from "@websolutespa/bom-mixer-core";
+import dynamic from "next/dynamic";
+import Link from "next/link";
+import styled from "styled-components";
+import { Swiper, SwiperSlide } from "swiper/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var StyledSection = styled(Section)`
+  .swiper-slide {
+    width: 60vw;
+    overflow: hidden;
+  }
+`;
+var StyledCard = styled(Card)`
+  .media>.image {
+    transform: scale(1.1);
+    transition: all ease-in-out 350ms 200ms;
+  }
+  .button {
+    opacity: 0;
+    transform: translateY(30%);
+  }
+  .button {
+    transition: all ease-out 350ms 200ms;
+  }
+  .swiper-slide-active & {
+    .media>.image {
+      transform: scale(1);
+    }
+    .button {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+`;
+var Carousel1 = (_a) => {
+  var _b = _a, { item } = _b, props = __objRest(_b, ["item"]);
+  const items = item.items;
+  const classNames = getClassNames(item.schema);
+  return /* @__PURE__ */ jsxs(StyledSection, { className: classNames, padding: "7rem 0", children: [
+    /* @__PURE__ */ jsx(Container, { textAlign: "center", children: item.title && /* @__PURE__ */ jsx(Text, { size: "2", marginBottom: "4rem", children: item.title }) }),
+    items && /* @__PURE__ */ jsx(Swiper, __spreadProps(__spreadValues({}, props), { spaceBetween: 60, slidesPerView: "auto", centeredSlides: true, style: { width: "100%" }, children: items.map((item2, i) => /* @__PURE__ */ jsx(SwiperSlide, { virtualIndex: i, style: { width: "60vw" }, children: /* @__PURE__ */ jsxs(StyledCard, { width: "60vw", hoverable: true, children: [
+      /* @__PURE__ */ jsx(Link, { href: item2.href, passHref: true, children: /* @__PURE__ */ jsx(Media, { as: "a", aspectRatio: 16 / 9, item: item2.media }) }),
+      item2.title && /* @__PURE__ */ jsx(Card.Content, { children: /* @__PURE__ */ jsx(Button, { variant: "nav", children: /* @__PURE__ */ jsx(Text, { size: "8", marginTop: "1rem", dangerouslySetInnerHTML: { __html: item2.title } }) }) })
+    ] }) }, i)) }))
+  ] });
+};
+var Carousel1Export = {
+  "carousel-1": dynamic(() => Promise.resolve().then(() => require_carousel_1()).then(
+    (module) => module.Carousel1
+  ))
+};
+
+export {
+  Carousel1,
+  Carousel1Export
+};

package/dist/chunk-TNJCCH5V.mjs

@@ -0,0 +1,220 @@
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues,
+  getAspectResponsive,
+  getCssResponsive
+} from "./chunk-4GP5DTTM.mjs";
+
+// src/components/media/media-image.tsx
+import { getClassNames } from "@websolutespa/bom-mixer-core";
+import styled from "styled-components";
+import { jsx } from "react/jsx-runtime";
+var StyledMediaImage = styled.img`
+  max-width: 100%;
+  // height: auto;
+  user-select: none;
+`;
+var MediaImage = (_a) => {
+  var _b = _a, { alt = "", className, type } = _b, props = __objRest(_b, ["alt", "className", "type"]);
+  const classNames = getClassNames(className, "image", { "image-svg": isSVG(props.src) });
+  const imageProps = getImageProps(props);
+  return /* @__PURE__ */ jsx(StyledMediaImage, __spreadValues({ className: classNames, alt, loading: "lazy" }, imageProps));
+};
+function getImageProps(_a) {
+  var _b = _a, { src } = _b, props = __objRest(_b, ["src"]);
+  const ratio = props.width && props.height ? parseInt(props.width.toString()) / parseInt(props.height.toString()) : 0;
+  const sizes = [640, 828, 1080, 1200, 1920];
+  return __spreadValues({
+    src: getImageSrc(src, ratio, sizes[0]),
+    srcSet: getImageSrcset(src, ratio, sizes),
+    sizes: ratio !== 0 ? getImageSizes(sizes) : "100vw"
+  }, props);
+}
+function getImageSrc(src, ratio, width, quality = 75) {
+  if (isSVG(src)) {
+    return src;
+  }
+  return ratio !== 0 ? `/_next/image?url=${encodeURIComponent(src)}&w=${width}&h=${width / ratio}&q=${quality}` : `/_next/image?url=${encodeURIComponent(src)}&w=${width}&q=${quality}`;
+}
+function getImageSrcset(src, ratio, widths, quality = 75) {
+  if (isSVG(src)) {
+    return void 0;
+  }
+  return widths.map((width) => getImageSrc(src, ratio, width, quality) + ` ${width}w`).join(", ");
+}
+function getImageSizes(widths) {
+  return widths.map((width, i) => `${i < widths.length - 1 ? `(max-width: ${width}px) ` : ""}${width}px`).join(", ");
+}
+function isSVG(src) {
+  return src.indexOf(".svg") !== -1;
+}
+
+// src/components/media/media.tsx
+import { getClassNames as getClassNames2, withSchema } from "@websolutespa/bom-mixer-core";
+import { forwardRef } from "react";
+import styled2, { css } from "styled-components";
+
+// src/components/media-gallery/media-gallery-context.tsx
+import { createContext, useContext } from "react";
+var MediaGalleryContext = createContext({});
+function useMediaGalleryContext() {
+  return useContext(MediaGalleryContext);
+}
+
+// src/components/media/media.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var StyledMediaInfo = styled2.div`
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  color: var(--color-neutral-100);
+
+  ${(props) => getCssResponsive(props)}
+`;
+var MediaInfo = (_a) => {
+  var _b = _a, { children, className } = _b, props = __objRest(_b, ["children", "className"]);
+  const classNames = getClassNames2(className, "media-info");
+  return /* @__PURE__ */ jsx2(StyledMediaInfo, __spreadProps(__spreadValues({ className: classNames }, props), { children }));
+};
+var StyledMedia = styled2.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  // color: var(--color-neutral-100);
+
+  ${(props) => getCssResponsive(props)}
+
+  &>:not(.media-info) {
+    width: 100%;
+    height: 100%;
+  }
+
+  &>.image:not(.image-svg),
+  &>video,
+  &>.video {
+    object-fit: cover;
+    background: var(--color-neutral-200);
+  }
+
+  &>svg {
+    height: 100%;
+  }
+
+  &.media--gallery {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    cursor: pointer;
+
+    &>:not(.media-info) {
+      transition: ease-in-out 200ms;
+      transition-property: transform, opacity;
+    }
+
+    &:hover {
+      &>:not(.media-info) {
+        transform: scale(1.05);
+      }
+    }
+  }
+
+  ${(props) => props.circle ? css`
+      aspect-ratio: 1;
+      overflow: hidden;
+      border-radius: 50%;
+      &>* {
+        top: 0;
+        left: 0;
+        height: 100%;
+      }
+    ` : ""};
+
+    ${(props) => props.rounded ? css`
+      overflow: hidden;
+      border-radius: var(--border-radius);
+    ` : ""};
+
+  ${(props) => getAspectResponsive(props, props.circle ? { aspectRatio: 1 } : void 0)};
+
+  ${(props) => props.overlay ? css`
+    position: relative;
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      ${typeof props.overlay === "number" ? css`background: rgba(0,0,0,${props.overlay})` : css`background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 15.9%, rgba(0, 0, 0, 0) 41.67%, rgba(0, 0, 0, 0.1) 61.79%, rgba(0, 0, 0, 0.6) 100%)`};
+    }
+  ` : ""}
+`;
+var MediaBase = forwardRef((_a, ref) => {
+  var _b = _a, { children, item, onClick, className, as = "div" } = _b, props = __objRest(_b, ["children", "item", "onClick", "className", "as"]);
+  const { id, open } = useMediaGalleryContext();
+  const classNames = getClassNames2(className, "media", { "media--gallery": id });
+  const mediaChildren = item && !children ? getMediaItems(item, {
+    aspectRatio: props.aspectRatio,
+    eager: props.eager,
+    galleryId: id,
+    open
+  }) : children;
+  return /* @__PURE__ */ jsx2(StyledMedia, __spreadProps(__spreadValues({ className: classNames, ref, as }, props), { children: mediaChildren }));
+});
+MediaBase.displayName = "Media";
+var Media = withSchema(MediaBase, {
+  Info: MediaInfo
+});
+function getMediaItems(itemOrItems, options = {}) {
+  const items = (Array.isArray(itemOrItems) ? itemOrItems : [itemOrItems]).map((x) => {
+    if (typeof x["media"] === "object") {
+      x = x["media"];
+    }
+    if (typeof x.url === "string") {
+      x.src = x.url;
+    }
+    return x;
+  });
+  const hasGallery = options.galleryId != null && typeof options.open === "function";
+  const getMediaItemProps = (media) => {
+    const props = {};
+    if (hasGallery) {
+      props["data-gallery"] = JSON.stringify({ galleryId: options.galleryId, media });
+      props.onClick = (event) => {
+        if (options.open) {
+          options.open(media);
+        }
+      };
+    }
+    if (media.type === "image") {
+      const aspectRatio = typeof options.aspectRatio === "string" ? parseFloat(options.aspectRatio) : options.aspectRatio;
+      if (aspectRatio != null) {
+        props.width = 800;
+        props.height = 800 / aspectRatio;
+      }
+      if (options.eager) {
+        props.loading = "eager";
+      }
+    }
+    return props;
+  };
+  return items.map(
+    (media, m) => media.type === "video" ? /* @__PURE__ */ jsx2("video", __spreadProps(__spreadValues({ playsInline: true, autoPlay: true, muted: true, loop: true }, getMediaItemProps(media)), { children: /* @__PURE__ */ jsx2("source", { src: media.src, type: "video/mp4" }) }), m) : /* @__PURE__ */ jsx2(MediaImage, __spreadValues(__spreadProps(__spreadValues({}, media), { alt: media.alt, draggable: false }), getMediaItemProps(media)), m)
+  );
+}
+
+export {
+  MediaGalleryContext,
+  MediaImage,
+  Media
+};