@pixelated-tech/components 3.2.1 → 3.2.4

package/dist/components/carousel/carousel.css

@@ -146,6 +146,11 @@
     background-color: transparent;
 }
 
+.carousel-container .carousel-buttons button.carousel-button {
+	/* fix for buttonring microinteraction */
+	outline: none !important;
+}
+
 .carousel-arrow,
 .carousel-arrow-left, 
 .carousel-arrow-right {

package/dist/components/cms/contentful.items.components.js

@@ -215,7 +215,7 @@ export function ContentfulItemDetail(props) {
             }
         }
         fetchStuff();
-    }, []);
+    }, [props.entry_id, apiProps]);
     if (item && Object.keys(item) && Object.keys(item).length > 0) {
         const thisItem = { ...item };
         if (debug)

package/dist/components/cms/google.reviews.components.js

@@ -1,7 +1,14 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
 import { getGoogleReviewsByPlaceId } from './google.reviews.functions';
+GoogleReviewsCard.propTypes = {
+    placeID: PropTypes.string.isRequired,
+    language: PropTypes.string,
+    maxReviews: PropTypes.number,
+    proxyBase: PropTypes.string,
+};
 export function GoogleReviewsCard(props) {
     const [place, setPlace] = useState();
     const [reviews, setReviews] = useState([]);

package/dist/components/cms/hubspot.components.js

@@ -1,5 +1,5 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import PropTypes from 'prop-types';
 export function initializeHubSpotScript(region, portalId) {
@@ -43,3 +43,35 @@ export function HubSpotForm({ region, portalId, formId, target, containerId = 'h
     }, [region, portalId, formId, formTarget]);
     return _jsx("div", { className: "hs-form-frame", "data-region": region, "data-form-id": formId, "data-portal-id": portalId });
 }
+HubspotTrackingCode.propTypes = {
+    hubID: PropTypes.string.isRequired,
+};
+export function HubspotTrackingCode(props) {
+    return (_jsx(_Fragment, { children: _jsx("script", { type: "text/javascript", id: "hs-script-loader", async: true, defer: true, src: `//js-na2.hs-scripts.com/${props.hubID}.js` }) }));
+}
+getHubspotFormSubmissions.propTypes = {
+    proxyURL: PropTypes.string.isRequired,
+    formGUID: PropTypes.string.isRequired,
+    apiToken: PropTypes.string.isRequired,
+};
+export async function getHubspotFormSubmissions(props) {
+    const url = `${props.proxyURL}https://api.hubapi.com/form-integrations/v1/submissions/forms/${props.formGUID}`;
+    const headers = {
+        Authorization: "Bearer " + props.apiToken,
+    };
+    try {
+        const response = await fetch(url, {
+            method: 'GET',
+            headers: headers,
+        });
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+        return data;
+    }
+    catch (error) {
+        console.error('Error fetching HubSpot form submissions:', error);
+        return null;
+    }
+}

package/dist/components/cms/wordpress.functions.js

@@ -1,8 +1,13 @@
+import PropTypes from "prop-types";
 // const wpSite = "pixelatedviews.wordpress.com";
 // const wpSite = "19824045";
 // const wpSite = "blog.pixelated.tech";
 const wpApiURL = "https://public-api.wordpress.com/rest/v1/sites/";
 const wpCategoriesPath = "/categories";
+getWordPressItems.propTypes = {
+    site: PropTypes.string.isRequired,
+    count: PropTypes.number,
+};
 export async function getWordPressItems(props) {
     const requested = props.count; // undefined means fetch all available
     const posts = [];
@@ -31,6 +36,53 @@ export async function getWordPressItems(props) {
     }
     return posts;
 }
+getWordPressItemImages.propTypes = {
+    item: PropTypes.object.isRequired,
+};
+export function getWordPressItemImages(item) {
+    const images = [];
+    const seen = new Set();
+    // Helper to swap image origin with post origin
+    const swapOrigin = (url) => {
+        try {
+            const postOrigin = new URL(item.URL).origin;
+            const urlObj = new URL(url);
+            return `${postOrigin}${urlObj.pathname}`;
+        }
+        catch (error) {
+            console.log("Error: ", error);
+            return url;
+        }
+    };
+    // Featured image
+    if (item.featured_image && !seen.has(item.featured_image)) {
+        seen.add(item.featured_image);
+        images.push({
+            url: swapOrigin(item.featured_image),
+            title: item.title,
+            caption: item.excerpt,
+            thumbnail_loc: item.post_thumbnail?.URL,
+        });
+    }
+    // Attachments
+    if (item.attachments) {
+        for (const key in item.attachments) {
+            const att = item.attachments[key];
+            if (att.URL && !seen.has(att.URL)) {
+                seen.add(att.URL);
+                images.push({
+                    url: swapOrigin(att.URL),
+                    title: att.title,
+                    caption: att.caption || att.description,
+                });
+            }
+        }
+    }
+    return images;
+}
+getWordPressCategories.propTypes = {
+    site: PropTypes.string.isRequired,
+};
 export async function getWordPressCategories(props) {
     const wpCategoriesURL = wpApiURL + props.site + wpCategoriesPath;
     const categories = [];

package/dist/components/general/loading.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import "./loading.scss";
@@ -13,24 +14,24 @@ ToggleLoading.propTypes = {
     show: PropTypes.bool,
 };
 export function ToggleLoading(props) {
-    if (typeof window !== "undefined" && typeof document !== "undefined") {
-        const loadingElem = document.getElementById("loadingSpinner");
-        if (!loadingElem)
-            return;
-        if (props.show && props.show === true) {
+    if (typeof window === 'undefined' || typeof document === 'undefined')
+        return;
+    const loadingElem = document.getElementById("loadingSpinner");
+    if (!loadingElem)
+        return;
+    if (props.show === true) {
+        loadingElem.style.display = "inline-block";
+    }
+    else if (props.show === false) {
+        loadingElem.style.display = "none";
+    }
+    else {
+        // Toggle behavior
+        if (loadingElem.style.display === "none" || !loadingElem.style.display) {
             loadingElem.style.display = "inline-block";
-            return;
-        } // Show content
-        if (props.show && props.show === false) {
-            loadingElem.style.display = "none";
-            return;
-        } // Hide content
-        if (loadingElem && loadingElem.style.display === "none") {
-            loadingElem.style.display = "inline-block"; // Show content
         }
         else {
-            if (loadingElem)
-                loadingElem.style.display = "none"; // Hide content
+            loadingElem.style.display = "none";
         }
     }
 }

package/dist/components/menu/menu-accordion.js

@@ -140,7 +140,7 @@ export function MenuAccordion(props) {
             document.removeEventListener('click', handleMenuClick);
         };
     }, []);
-    return (_jsx("div", { className: "accordionMenuWrapper accordionUp", children: _jsx("div", { className: "accordionMenu", id: "accordionMenu", children: _jsx(MenuAccordionGroup, { menuItems: menuItems, state: undefined }, "accordionRoot") }) }));
+    return (_jsx("div", { className: "accordionMenuWrapper accordionUp", suppressHydrationWarning: true, children: _jsx("div", { className: "accordionMenu", id: "accordionMenu", children: _jsx(MenuAccordionGroup, { menuItems: menuItems, state: undefined }, "accordionRoot") }) }));
 }
 /* ========== MENU GROUP ========== */
 MenuAccordionGroup.propTypes = {
@@ -158,17 +158,9 @@ MenuAccordionItem.propTypes = {
     target: PropTypes.string,
 };
 export function MenuAccordionItem(props) {
-    if (props.href && props.href.length > 0) {
-        if (props.target && props.target.length > 0) {
-            return (_jsx("li", { children: _jsx("a", { href: props.href, target: props.target, children: props.name }) }, "menu-item-" + props.name));
-        }
-        else {
-            return (_jsx("li", { children: _jsx("a", { href: props.href, children: props.name }) }, "menu-item-" + props.name));
-        }
-    }
-    else {
-        return (_jsx("li", { children: _jsx("a", { children: props.name }) }, "menu-item-" + props.name));
-    }
+    // Always render the same JSX structure to avoid hydration mismatch
+    // href will be undefined or an empty string, target might be undefined
+    return (_jsx("li", { children: _jsx("a", { href: props.href || undefined, target: props.target || undefined, children: props.name }) }, "menu-item-" + props.name));
 }
 /* ========== MENU BUTTON ========== */
 /*
@@ -177,7 +169,10 @@ https://www.unclebigbay.com/blog/building-the-world-simplest-hamburger-with-html
 MenuAccordionButton.propTypes = {};
 export function MenuAccordionButton() {
     function slideMobilePanel() {
-        window.moveMenu();
+        if (typeof window !== 'undefined' && window.moveMenu) {
+            window.moveMenu();
+        }
     }
-    return (_jsx("button", { className: "panelMenuButton", id: "panelMenuButton", onClick: slideMobilePanel, children: _jsx("span", { className: "hamburger text-outline", children: "|||" }) }));
+    // suppressHydrationWarning suppresses hydration mismatch warnings for this button
+    return (_jsx("button", { className: "panelMenuButton", id: "panelMenuButton", onClick: slideMobilePanel, suppressHydrationWarning: true, children: _jsx("span", { className: "hamburger text-outline", children: "|||" }) }));
 }

package/dist/components/menu/menu-expando.css

@@ -1,127 +1,134 @@
 
+
 /* ========================================
-=====      SLIDING PANEL MENU         =====
+=====    MENU EXPANDO COMPONENT       =====
 ======================================== */
 
-.menuExpandoButton {
-	/* background-color: rgba(255,255,255,0.7); */
-	/* display: none; */
-	/* display: inline; */
-	margin: 0px 10px 0px 0px;
-	padding: 5px;
-	text-align: center;
-	width: 35px;
+.menuExpando {
+	display: inline-block;
+}
 
-	/* .rounded; */
-	-moz-border-radius: 5px;
-	-webkit-border-radius: 5px;
-	border-radius: 5px;
+details.menuExpandoWrapper {
+	display: inline-block;
 }
 
-@media screen and (max-width: 480px) {
-	.menuExpandoButton {
-		display: inline;
-	}
+details.menuExpandoWrapper > summary {
+	cursor: pointer;
+	user-select: none;
+	background: #336699;
+	color: white;
+	padding: 10px 15px;
+	border-radius: 4px;
+	font-weight: bold;
+	display: inline-block;
+	transition: background 0.3s ease;
 }
 
-.menuExpandoButtonHeader {
-	background-color: #336699;
-	/* background-image: url(/images/pix/pix-bg.gif); */
-	color: #FFFFFF;
-	padding: 15px;
+details.menuExpandoWrapper > summary:hover {
+	background: #2d5a8a;
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
 
-	/* .rounded; */
-	-moz-border-radius: 5px;
-	-webkit-border-radius: 5px;
-	border-radius: 5px;
+details.menuExpandoWrapper > summary::marker,
+details.menuExpandoWrapper > summary::-webkit-details-marker {
+	display: none;
 }
 
+details.menuExpandoWrapper > summary::before {
+	content: '▼';
+	display: inline-block;
+}
 
-/* ========================================
-============  ACCORDION MENU   ============
-======================================== */
+details.menuExpandoWrapper[open] > summary::before {
+	content: '▲';
+}
 
-details.menuExpandoWrapper {
-	/* background: #FFF; */
-	background: rgba(150, 190, 250, 0.7);
-	border-right: 1px solid #ccc;
-	/* height: auto; */
-	position: fixed;
-	left: 0px;
-	top: 60px;
-	/* height: 100%; */
-	width: 220px;
-	z-index: 1000;
-    /* padding: 5px; */
+details.menuExpandoWrapper ul {
+	margin-top: 10px;
+	padding-left: 20px;
+	list-style: none;
+	overflow: visible;
+	max-height: 1000px;
 }
 
-details.menuExpandoWrapper > summary {
-    /* display: none; */
-    list-style: none;
-    height: 0px;
-    width: 0px;
+details.menuExpandoWrapper li {
+	margin: 5px 0;
 }
 
-details.menuExpandoWrapper[open] > summary {
-    --do-nothing: true;
+details.menuExpandoWrapper a {
+	color: #333;
+	text-decoration: none;
+	transition: color 0.2s ease;
 }
 
-details.menuExpandoWrapper:not([open]) { 
-    --do-nothing: true;
+details.menuExpandoWrapper a:hover {
+	color: #336699;
+	text-decoration: underline;
 }
 
-details.menuExpandoWrapper > *,
-details.menuExpandoWrapper[open] > *,
-details.menuExpandoWrapper:not([open]) > * {
-    animation: sweep 1s ease-out;
+/* ========== NESTED MENU STYLING ========== */
+details.menuExpandoNested {
+	display: block;
 }
 
-@keyframes sweep {
-    0% { opacity: 0; margin-left: -220px }
-    100% { opacity: 1; margin-left: 0px }
+details.menuExpandoNested > summary {
+	cursor: pointer;
+	user-select: none;
+	padding: 5px 0;
+	font-weight: 500;
+	display: list-item;
+	color: #333;
+	transition: color 0.2s ease;
 }
 
-details.menuExpandoWrapper > summary::marker, 
-details.menuExpandoWrapper > summary::-webkit-details-marker {
-    display:none;
+details.menuExpandoNested > summary:hover {
+	color: #336699;
 }
 
-.menuExpando,
-.menuExpando ul {
-	/* ALL LIST LEVELS */
-	display: inline-block;
-	list-style-type: none;
-	padding: 0;
-	width: 200px;
-    margin: 10px;
+details.menuExpandoNested > summary a {
+	color: inherit;
+	text-decoration: none;
 }
 
-.menuExpando ul > li {
-	/* ALL LIST ITEM LEVELS */
-	border-bottom: 1px solid #FFF;
+details.menuExpandoNested > summary a:hover {
+	text-decoration: underline;
 }
 
-.menuExpando ul > li:first-child {
-	/* ALL LIST ITEM LEVELS */
-	border-top: 1px solid #FFF;
+details.menuExpandoNested > summary::marker,
+details.menuExpandoNested > summary::-webkit-details-marker {
+	color: #666;
 }
 
-.menuExpando ul > li > a {
-	/* this is the button */
-	color: black;
-	background: #CCC;
-    /* background-image: url(/images/pix/pix-bg-lite.jpg); */
-	display: block;
-	font-weight: bold;
-	height: 30px;
-	line-height:30px;
-	text-decoration: none;
-	text-indent: 10px;
+details.menuExpandoNested > ul {
+    margin: 0px;
+	padding-left: 20px;
+	list-style: none;
+	max-height: 0px;
+	opacity: 0;
+	overflow: hidden;
+}
+
+details.menuExpandoNested li {
+	margin: 3px 0;
 }
 
-.menuExpando ul > li > a:hover {
-	background: #EDD;
-    /* background-image: url(/images/pix/pix-bg-sm-bw.gif); */
-	text-indent: 5px;
-	border-left: 5px #000 solid;
+/* ========== ANIMATIONS ========== */
+@keyframes menuExpandoSlideDown {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
 }
+
+@keyframes menuExpandoSlideUp {
+	from {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+	}
+}
+
+

package/dist/components/menu/menu-expando.js

@@ -1,28 +1,131 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './menu-expando.css';
-/*
-NOTE :
-Stopped development on details / summary for now.
-Not enough css control for animation.
-*/
-/* ========== MENU ========== */
 export function MenuExpando(props) {
-    // const debug = false;
+    const detailsRef = useRef(null);
+    const ulRef = useRef(null);
+    useEffect(() => {
+        const details = detailsRef.current;
+        const ul = ulRef.current;
+        if (!details || !ul)
+            return;
+        const summary = details.querySelector('summary');
+        if (!summary)
+            return;
+        // Initialize nested menus to be closed
+        const nestedDetails = details.querySelectorAll('details.menuExpandoNested');
+        nestedDetails.forEach((nested) => {
+            const nestedUl = nested.querySelector('ul');
+            if (nestedUl) {
+                nestedUl.style.maxHeight = '0px';
+                nestedUl.style.opacity = '0';
+                nestedUl.style.overflow = 'hidden';
+            }
+        });
+        let isAnimating = false;
+        summary.addEventListener('click', (e) => {
+            if (isAnimating) {
+                e.preventDefault();
+                return;
+            }
+            e.preventDefault();
+            isAnimating = true;
+            if (details.open) {
+                // Closing animation
+                ul.style.animation = 'menuExpandoSlideUp 0.3s ease-out forwards';
+                setTimeout(() => {
+                    details.open = false;
+                    ul.style.animation = '';
+                    isAnimating = false;
+                }, 300);
+            }
+            else {
+                // Opening animation
+                details.open = true;
+                ul.style.animation = 'menuExpandoSlideDown 0.3s ease-out forwards';
+                setTimeout(() => {
+                    ul.style.animation = '';
+                    isAnimating = false;
+                }, 300);
+            }
+        });
+        // Handle nested menu animations
+        const nestedDetailsForAnimation = details.querySelectorAll('details.menuExpandoNested');
+        nestedDetailsForAnimation.forEach((nested) => {
+            nested.addEventListener('toggle', (e) => {
+                const nestedUl = nested.querySelector('ul');
+                if (nestedUl) {
+                    if (nested.open) {
+                        nestedUl.style.maxHeight = '0px';
+                        nestedUl.style.opacity = '0';
+                        nestedUl.style.overflow = 'hidden';
+                        // Force reflow
+                        void nestedUl.offsetHeight;
+                        nestedUl.style.transition = 'max-height 0.3s ease-out, opacity 0.3s ease-out';
+                        nestedUl.style.maxHeight = '500px';
+                        nestedUl.style.opacity = '1';
+                        setTimeout(() => {
+                            nestedUl.style.overflow = 'visible';
+                            nestedUl.style.transition = '';
+                        }, 300);
+                    }
+                    else {
+                        nestedUl.style.overflow = 'hidden';
+                        nestedUl.style.transition = 'max-height 0.3s ease-out, opacity 0.3s ease-out';
+                        nestedUl.style.maxHeight = '0px';
+                        nestedUl.style.opacity = '0';
+                        setTimeout(() => {
+                            nestedUl.style.transition = '';
+                        }, 300);
+                    }
+                }
+            });
+        });
+    }, []);
     function generateMenuItems() {
         const myItems = [];
-        for (const itemKey in props.menuItems) {
-            myItems.push(_jsx(MenuExpandoItem, { name: itemKey, href: props.menuItems[itemKey] }, itemKey));
+        console.log('MenuExpando props.menuItems:', props.menuItems);
+        console.log('Is array?', Array.isArray(props.menuItems));
+        // Handle both object format (name: href) and array format (with name/path properties)
+        if (Array.isArray(props.menuItems)) {
+            // Array format like MenuAccordion
+            console.log('Processing as array, length:', props.menuItems.length);
+            for (const item of props.menuItems) {
+                console.log('Item:', item);
+                if (item.routes && item.routes.length > 0) {
+                    // Item has nested routes - create expandable submenu
+                    myItems.push(_jsx("li", { children: _jsxs("details", { className: "menuExpandoNested", children: [_jsx("summary", { children: _jsx("a", { href: item.path, children: item.name }) }), _jsx("ul", { children: item.routes.map((route) => (_jsx(MenuExpandoItem, { name: route.name, href: route.path }, route.name))) })] }) }, item.name));
+                }
+                else {
+                    // Regular item without nested routes
+                    myItems.push(_jsx(MenuExpandoItem, { name: item.name, href: item.path }, item.name));
+                }
+            }
         }
+        else {
+            // Object format
+            console.log('Processing as object');
+            for (const itemKey in props.menuItems) {
+                myItems.push(_jsx(MenuExpandoItem, { name: itemKey, href: props.menuItems[itemKey] }, itemKey));
+            }
+        }
+        console.log('Generated items count:', myItems.length);
         return myItems;
     }
-    return (_jsx("div", { className: "menuExpando", id: "menuExpando", children: _jsxs("details", { className: "menuExpandoWrapper", id: "menuExpandoWrapper", children: [_jsx("summary", {}), _jsx("ul", { children: generateMenuItems() })] }) }));
+    return (_jsx("div", { className: "menuExpando", id: "menuExpando", children: _jsxs("details", { className: "menuExpandoWrapper", id: "menuExpandoWrapper", ref: detailsRef, children: [_jsx("summary", {}), _jsx("ul", { ref: ulRef, children: generateMenuItems() })] }) }));
 }
 MenuExpando.propTypes = {
-    menuItems: PropTypes.object.isRequired
+    menuItems: PropTypes.oneOfType([
+        PropTypes.object,
+        PropTypes.arrayOf(PropTypes.shape({
+            name: PropTypes.string.isRequired,
+            path: PropTypes.string.isRequired,
+            routes: PropTypes.array,
+        }))
+    ]).isRequired
 };
-/* ========== MENU ITEM ========== */
 export function MenuExpandoItem(props) {
     return (_jsx("li", { children: _jsx("a", { href: props.href, children: props.name }) }));
 }
@@ -30,15 +133,10 @@ MenuExpandoItem.propTypes = {
     name: PropTypes.string.isRequired,
     href: PropTypes.string.isRequired
 };
-/* ========== MENU BUTTON ========== */
 export function MenuExpandoButton() {
     function handleMenuExpandoButtonClick(event) {
-        const debug = false;
-        if (debug)
-            console.log("MenuExpandoButton clicked");
         event.preventDefault();
         event.stopPropagation();
-        // const button = document.getElementById('menuExpandoButton');
         const details = document.getElementById('menuExpandoWrapper');
         if (details)
             details.open = !details.open;

package/dist/components/menu/menu-simple.css

@@ -50,6 +50,10 @@
 	flex-basis: content; /* each item is its own size instead of auto */
 }
 
+.menu-item-hidden {
+	display: none;
+}
+
 .menu-item:hover {
 	background-color: var(--accent1-color);
 }

package/dist/components/menu/menu-simple.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from 'react';
 import PropTypes from "prop-types";
@@ -26,6 +27,8 @@ export function MenuSimple(props) {
         return myItems;
     }
     function styleSelectedMenuItem() {
+        if (typeof window === 'undefined')
+            return;
         const menuitems = document.querySelectorAll('.menu-item a');
         const currentURL = window.location.href;
         menuitems.forEach((menuitem) => {
@@ -48,9 +51,11 @@ MenuSimpleItem.propTypes = {
     routes: PropTypes.array,
 };
 export function MenuSimpleItem(props) {
-    if (props.hidden)
-        return null;
-    return (_jsx("li", { className: 'menu-item', children: props.target
+    const classNames = ['menu-item'];
+    if (props.hidden) {
+        classNames.push('menu-item-hidden');
+    }
+    return (_jsx("li", { className: classNames.join(' '), children: props.target
             ? _jsx("a", { href: props.path || undefined, target: props.target, children: props.name })
             : _jsx("a", { href: props.path || undefined, children: props.name }) }));
 }