@axos-web-dev/shared-components 1.0.10 → 1.0.12

package/dist/assets/utils/optimizeImage/optimizeImage.css.css

@@ -0,0 +1,48 @@
+@keyframes _shimmer_1vfu4_1 {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+._loader_1vfu4_19 {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  inset: 0;
+}
+
+._loading_1vfu4_33 {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: #1e3860;
+}
+
+._1es6o1h0 ._loading_1vfu4_33 {
+  background-color: #1e262f;
+}
+
+.fl2fv50 ._loading_1vfu4_33 {
+  background-color: #28587d;
+}
+
+._loading_1vfu4_33::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 190%;
+  height: 100%;
+  background: linear-gradient(
+    65deg,
+    rgba(255, 255, 255, 0) 20%,
+    rgba(255, 255, 255, 0.5) 50%,
+    rgba(255, 255, 255, 0) 80%
+  );
+  animation: _shimmer_1vfu4_1 1.3s infinite linear;
+  z-index: 1;
+}

package/dist/main.js

@@ -82,7 +82,7 @@ import { SuccesFormWrapper } from "./Forms/SuccesForm.js";
 import { VendorQuestionnaire } from "./Forms/VendorQuestionnaire.js";
 import { WCPLSurvey } from "./Forms/WcplSurvey.js";
 import { HeroBanner } from "./HeroBanner/HeroBanner.js";
-import { headline_text, heroSupertag, hero_banner, hero_btns, hero_content, hero_embedded_image, hero_img, hero_text, hero_wrapper, img_contents, logout, reversed, reversed_lg_image } from "./HeroBanner/HeroBanner.css.js";
+import { headline_text, heroSupertag, hero_banner, hero_btns, hero_content, hero_embedded_image, hero_img, hero_text, hero_wrapper, logout, reversed, reversed_lg_image } from "./HeroBanner/HeroBanner.css.js";
 import { selection_headline_text, selection_section, selection_section_bg, selection_section_content, selection_section_icon, selection_section_icon_img } from "./HeroBanner/SelectionBanner.css.js";
 import { Hyperlink } from "./Hyperlink/index.js";
 import { Icon, IconBillboard } from "./IconBillboard/IconBillboard.js";
@@ -515,7 +515,6 @@ export {
   imagePlacement,
   image_background,
   img_area,
-  img_contents,
   inline_container,
   input,
   insight_header,

package/dist/utils/optimizeImage/OptimizeImage.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+
+export interface OptimizeImageProps {
+    src: string;
+    alt?: string;
+    height?: number;
+    width?: number;
+    className?: string;
+    priority?: boolean;
+    fill?: boolean;
+    unoptimized?: boolean;
+    rootMargin?: string;
+}
+export declare const OptimizeImage: FC<OptimizeImageProps>;

package/dist/utils/optimizeImage/OptimizeImage.js

@@ -0,0 +1,53 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import css from "./optimizeImage.module.js";
+import Image from "next/image.js";
+const OptimizeImage = ({
+  src,
+  alt = "",
+  height,
+  width,
+  className,
+  priority = false,
+  fill = false,
+  unoptimized = true,
+  rootMargin = "550px"
+}) => {
+  const [isVisible, setIsVisible] = useState(priority);
+  useEffect(() => {
+    if (priority) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setIsVisible(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin }
+    );
+    const imgElement = document.getElementById(src);
+    if (imgElement) observer.observe(imgElement);
+    return () => observer.disconnect();
+  }, [src, priority, rootMargin]);
+  return isVisible ? /* @__PURE__ */ jsxs("picture", { children: [
+    /* @__PURE__ */ jsx("source", { srcSet: `https:${src}?fm=avif`, type: "image/avif" }),
+    /* @__PURE__ */ jsx("source", { srcSet: `https:${src}?fm=webp`, type: "image/webp" }),
+    /* @__PURE__ */ jsx(
+      Image,
+      {
+        src: `https:${src}`,
+        alt,
+        className,
+        width: fill ? void 0 : width,
+        height: fill ? void 0 : height,
+        fill,
+        priority,
+        unoptimized
+      }
+    )
+  ] }) : /* @__PURE__ */ jsx("div", { className: css.loader, children: /* @__PURE__ */ jsx("div", { id: src, className: css.loading, style: { width, height } }) });
+};
+export {
+  OptimizeImage
+};

package/dist/utils/optimizeImage/index.d.ts

@@ -0,0 +1 @@
+export * from './OptimizeImage';

package/dist/utils/optimizeImage/index.js

@@ -0,0 +1,4 @@
+import { OptimizeImage } from "./OptimizeImage.js";
+export {
+  OptimizeImage
+};

package/dist/utils/optimizeImage/optimizeImage.module.js

@@ -0,0 +1,14 @@
+import '../../assets/utils/optimizeImage/optimizeImage.css.css';const loader = "_loader_1vfu4_19";
+const loading = "_loading_1vfu4_33";
+const shimmer = "_shimmer_1vfu4_1";
+const css = {
+  loader,
+  loading,
+  shimmer
+};
+export {
+  css as default,
+  loader,
+  loading,
+  shimmer
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@axos-web-dev/shared-components",
   "description": "Axos shared components library for web.",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",

package/dist/utils/lazyImage/imageObserver.d.ts

@@ -1,9 +0,0 @@
-export interface UseLazyImageProps {
-    src: string;
-    rootMargin?: string;
-    threshold?: number | number[];
-}
-export declare const useLazyImage: ({ src, rootMargin, threshold, }: UseLazyImageProps) => {
-    imageSrc: string;
-    imgRef: import('react').MutableRefObject<HTMLImageElement | null>;
-};

package/dist/utils/lazyImage/imageObserver.js

@@ -1,29 +0,0 @@
-"use client";
-import { useState, useRef, useEffect } from "react";
-const useLazyImage = ({
-  src,
-  rootMargin = "200px",
-  threshold = 0
-}) => {
-  const [imageSrc, setImageSrc] = useState("");
-  const imgRef = useRef(null);
-  useEffect(() => {
-    const imgElement = imgRef.current;
-    if (!imgElement) return;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setImageSrc(src);
-          observer.disconnect();
-        }
-      },
-      { rootMargin, threshold }
-    );
-    observer.observe(imgElement);
-    return () => observer.disconnect();
-  }, [src, rootMargin, threshold]);
-  return { imageSrc, imgRef };
-};
-export {
-  useLazyImage
-};

package/dist/utils/lazyImage/index.d.ts

@@ -1,2 +0,0 @@
-export * from './imageObserver';
-export * from './lazyImage';

package/dist/utils/lazyImage/index.js

@@ -1,7 +0,0 @@
-"use client";
-import { useLazyImage } from "./imageObserver.js";
-import { LazyImage } from "./lazyImage.js";
-export {
-  LazyImage,
-  useLazyImage
-};

package/dist/utils/lazyImage/lazyImage.d.ts

@@ -1,10 +0,0 @@
-import { FC } from 'react';
-
-export interface LazyImageProps {
-    src: string;
-    alt?: string;
-    height?: string | number;
-    width?: string | number;
-    className?: string;
-}
-export declare const LazyImage: FC<LazyImageProps>;

package/dist/utils/lazyImage/lazyImage.js

@@ -1,26 +0,0 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { useLazyImage } from "./imageObserver.js";
-const LazyImage = ({
-  src,
-  alt = "",
-  height,
-  width,
-  className
-}) => {
-  const { imageSrc, imgRef } = useLazyImage({ src });
-  return /* @__PURE__ */ jsx(
-    "img",
-    {
-      ref: imgRef,
-      src: imageSrc,
-      alt,
-      className,
-      height,
-      width
-    }
-  );
-};
-export {
-  LazyImage
-};