@pixelated-tech/components 3.1.4

package/dist/components/general/loading.scss

@@ -0,0 +1,80 @@
+.loading {
+	display: none;
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	width: 55px;
+	height: 55px;
+	margin: -14px 0 0 -14px;
+}
+
+div.spinner {
+	position: relative;
+	width: 54px;
+	height: 54px;
+	display: inline-block;
+}
+    
+div.spinner div {
+	width: 12%;
+	height: 26%;
+	// background: #000;
+	background: #369;
+	position: absolute;
+	left: 44.5%;
+	top: 37%;
+	opacity: 0;
+
+	animation: fade 1s linear infinite;
+	border-radius: 50px;
+	box-shadow: 0 0 3px rgba(0,0,0,0.2);
+
+	-webkit-animation: fade 1s linear infinite;
+	-webkit-border-radius: 50px;
+	-webkit-box-shadow: 0 0 3px rgba(0,0,0,0.2);
+}
+
+/* 
+div.spinner div.bar1 {-webkit-transform:rotate(0deg) translate(0, -142%); -webkit-animation-delay: 0s;}    
+div.spinner div.bar2 {-webkit-transform:rotate(30deg) translate(0, -142%); -webkit-animation-delay: -0.9167s;}
+div.spinner div.bar3 {-webkit-transform:rotate(60deg) translate(0, -142%); -webkit-animation-delay: -0.833s;}
+div.spinner div.bar4 {-webkit-transform:rotate(90deg) translate(0, -142%); -webkit-animation-delay: -0.75s;}
+div.spinner div.bar5 {-webkit-transform:rotate(120deg) translate(0, -142%); -webkit-animation-delay: -0.667s;}
+div.spinner div.bar6 {-webkit-transform:rotate(150deg) translate(0, -142%); -webkit-animation-delay: -0.5833s;}
+div.spinner div.bar7 {-webkit-transform:rotate(180deg) translate(0, -142%); -webkit-animation-delay: -0.5s;}
+div.spinner div.bar8 {-webkit-transform:rotate(210deg) translate(0, -142%); -webkit-animation-delay: -0.41667s;}
+div.spinner div.bar9 {-webkit-transform:rotate(240deg) translate(0, -142%); -webkit-animation-delay: -0.333s;}
+div.spinner div.bar10 {-webkit-transform:rotate(270deg) translate(0, -142%); -webkit-animation-delay: -0.25s;}
+div.spinner div.bar11 {-webkit-transform:rotate(300deg) translate(0, -142%); -webkit-animation-delay: -0.1667s;}
+div.spinner div.bar12 {-webkit-transform:rotate(330deg) translate(0, -142%); -webkit-animation-delay: -0.0833s;}
+*/
+
+.spinner {
+  div {
+    @for $i from 1 through 12 {
+      &.bar#{$i} {
+        // Calculate rotation angle: (i - 1) * 30 degrees
+        $rotation: 360deg - ( ($i - 1) * 30deg);
+        // Calculate animation delay: -((i - 1) / 12) * 1 second
+        $delay: -( calc( ($i - 1) / 12) * 1s );
+        transform: rotate($rotation) translate(0, -142%);
+        -webkit-transform: rotate($rotation) translate(0, -142%);
+        animation-delay: $delay;
+        -webkit-animation-delay: $delay;
+      }
+    }
+  }
+}
+
+@-webkit-keyframes fade {
+	from {opacity: 1;}
+	to {opacity: 0.10;}
+}
+
+@keyframes fade {
+	from {opacity: 1;}
+	to {opacity: 0.10;}
+}
+
+	

package/dist/components/general/microinteractions.css

@@ -0,0 +1,229 @@
+
+/* ========================================
+==========  MICRO ANIMATIONS    ===========
+======================================== */
+
+
+
+
+/* ========== BUTTON RING ON HOVER ========== */
+body.buttonring {
+  button,
+  .button,
+  .centeredbutton {
+    /* ALSO USE CLASS = BUTTON */
+    outline: 0px solid transparent !important; /* Initial transparent outline */
+    outline-offset: 3px; /* Optional: Adjusts the distance of the outline from the border */
+    transition: outline-width 0.25s ease-in-out, outline-color 0.3s ease-in-out;
+    /* cursor: pointer; */
+  }
+  button:hover,
+  .button:hover,
+  .centeredbutton:hover {
+    outline-width: 5px !important; /* Outline animates out 5px */
+    outline-color: #369 !important; /* Or a different color for the outline */
+  }
+}
+
+
+
+
+/* ========== SHOPPING CART BUTTON PULSE GLOW ========== */
+@keyframes pulse-glow {
+    0% {
+        transform: scale(1);
+        /* box-shadow: 0 0 0 0 rgba(52, 152, 219, 0.7); */
+        box-shadow: 0 0 0 0 rgba(0, 0, 0, 1.0);
+    }
+    50% {
+        transform: scale(1.1);
+    }
+    100% {
+        transform: scale(1.0);
+        box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
+    }
+}
+body.cartpulse .pixCart #pixCartButton {
+    animation: pulse-glow 2s infinite;
+}
+
+
+
+
+/* ========== FORM GLOW ON HOVER AND FOCUS ========== */
+body.formglow {
+
+	form div {
+		padding: 5px
+	}
+	form button, input, select, textarea {
+		transition: all 0.25s ease-in-out, 
+			all 0.25s ease-in-out;
+		outline: 5px solid transparent !important;
+	}
+	form input:hover, 
+	select:hover, 
+	textarea:hover {
+		outline: 5px solid rgba(0, 208, 0, 0.2) !important;
+		outline-offset: 3px;
+	}
+	form button:hover, 
+	input:focus, input:focus:hover, 
+	select:focus, select:focus:hover, 
+	textarea:focus, textarea:focus:hover {
+		outline: 5px solid rgba(0, 208, 0, 1) !important;
+		outline-offset: 3px;
+	}
+
+}
+
+
+
+
+/* ========== IMG GREYSCALE HOVER ========== */
+body.grayscalehover {
+
+	img {
+		filter: grayscale(100%);
+		transition: filter 0.25s ease-in-out; /* Optional: for a smooth transition */
+	}
+	img:hover {
+		filter: grayscale(0%);
+	}
+
+}
+
+
+
+/* ========== IMG HUE ROTATE ON HOVER ========== */
+@keyframes RotateHue {
+    from { filter: hue-rotate(0deg); }
+    to { filter: hue-rotate(360deg); }
+}
+body.imghue img {
+  --do-nothing: true;
+}
+body.imghue img:hover {
+    animation: RotateHue 1.5s linear infinite alternate;
+}
+
+
+
+
+/* ========== IMG ZOOM AND ROTATE ON HOVER ========== */
+body.imgscale {
+	img:not(.imgContain, .imgCover) {
+		/* text-align: center;
+		max-width: 100%;
+		height: auto; */
+		transition: transform 125ms linear;
+	}
+	img:hover:not(.imgContain, .imgCover) {
+		transform: scale(1.1) ;
+	}
+}
+
+
+
+
+
+/* ========== IMG ZOOM AND ROTATE ON HOVER ========== */
+body.imgtwist {
+	img:not(.imgContain, .imgCover) {
+		/* text-align: center;
+		max-width: 100%;
+		height: auto; */
+		transition: transform 125ms linear;
+	}
+	img:hover:not(.imgContain, .imgCover) {
+		transform: scale(1.1) rotate(-5deg);
+	}
+}
+
+
+
+
+
+/* 
+/* ========== SIMPLE MENU BUTTON LEFT FILL HOVER ==========
+.menuItem a:before {
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  width: 0;
+  height: 100%;
+  background: #1d93da;
+  transition: all .25s;
+  z-index: -1;
+}
+.menuItem a:hover {
+  border-left: 0px solid transparent !important;
+  text-indent: 0px !important;
+  color: #fff;
+}
+.menuItem a:hover:before {
+  width: 100%;
+}
+*/
+
+
+
+
+/* ========== SIMPLE MENU BUTTON CENTER FILL HOVER ========== */
+body.simplemenubutton .menu .menuItem {
+  	--do-nothing: true;
+}
+body.simplemenubutton .menu .menuItem {
+	a {
+		text-align: center;
+		position: relative;
+		text-indent: 0px !important;
+		z-index: 10;
+	}
+	a:before,
+	a:after {
+		content: "";
+		position: absolute;
+		background-color: #1d93da;
+		width: 0%;
+		height: 100%;
+		top: 0;
+		transition: all 0.25s ease-in-out;
+		z-index: -1;
+	}
+	a:before {
+		left: 50%;
+		transform: translateX(-50%);
+	}
+	a:after {
+		right: 50%;
+		transform: translateX(50%);
+	}
+	a:hover {
+		border-left: 0px solid transparent !important;
+		text-indent: 0px !important;
+		color: #fff;
+	}
+	a:hover:before,
+	a:hover:after {
+		width: 100%;
+	}
+}
+
+
+
+
+/* ========== SCROLL UP FADE ========== */
+@keyframes slideInFromBottom {
+  0% { transform: translateY(50%); opacity: 0; }
+  100% { transform: translateY(0); opacity: 1; }
+}
+.scrollfade {
+  animation: slideInFromBottom 0.5s ease-out forwards;
+  /* 'forwards' ensures the animation stays at its end state */
+}
+.hidden {
+  opacity: 0;
+  transform: translateY(50%); /* Or other initial state */
+}

package/dist/components/general/microinteractions.js

@@ -0,0 +1,87 @@
+// import React, { useState, useEffect } from 'react';
+import PropTypes from "prop-types";
+import './microinteractions.css';
+/* ========== MICRO ANIMATIONS ========== */
+MicroInteractions.propTypes = {
+    buttonring: PropTypes.bool,
+    cartpulse: PropTypes.bool,
+    formglow: PropTypes.bool,
+    grayscalehover: PropTypes.bool,
+    imgscale: PropTypes.bool,
+    imgtwist: PropTypes.bool,
+    imghue: PropTypes.bool,
+    simplemenubutton: PropTypes.bool,
+    scrollfadeElements: PropTypes.string,
+};
+export function MicroInteractions(props) {
+    // const debug = true ;
+    const body = document.body;
+    for (const propName in props) {
+        if (Object.prototype.hasOwnProperty.call(props, propName)) {
+            if (props[propName] === true) {
+                body.classList.add(propName);
+            }
+            else if (props[propName] === false) {
+                body.classList.remove(propName);
+            }
+        }
+    }
+    if (props.scrollfadeElements)
+        ScrollFade(props.scrollfadeElements);
+}
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function isElementInViewport(el) {
+    const rect = el.getBoundingClientRect();
+    return (rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth));
+}
+function isElementPartiallyInViewport(el) {
+    const rect = el.getBoundingClientRect();
+    return (rect.top < (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.left < (window.innerWidth || document.documentElement.clientWidth) &&
+        rect.bottom > 0 &&
+        rect.right > 0);
+}
+function ScrollFade(elements) {
+    const options = {
+        root: null, // Observes intersection with the viewport
+        rootMargin: "0px 0px -100px 0px", // Shrinks the top of the root by 200px
+        threshold: 0 // Triggers when any part of the element intersects the adjusted root
+    };
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            if (entry.isIntersecting) {
+                // if (entry.intersectionRatio > 0.5) {
+                // Add the animation class when the element enters the viewport
+                entry.target.classList.add('scrollfade');
+                entry.target.classList.remove('hidden');
+                // Optionally, stop observing once animated if you only want it to animate once
+                observer.unobserve(entry.target);
+            }
+            else {
+                // Optionally, remove the animation class if you want it to re-animate on re-entry
+                // entry.target.classList.remove('hidden');
+                // entry.target.classList.remove('scrollfade');
+            }
+        });
+    }, options);
+    // Select the elements you want to observe and initially hide them
+    const elementsToAnimate = document.querySelectorAll(elements);
+    elementsToAnimate.forEach((element) => {
+        if (isElementPartiallyInViewport(element)) {
+            if (element.classList.contains('hidden')) {
+                element.classList.remove('hidden');
+            }
+            if (element.classList.contains('scrollfade')) {
+                element.classList.remove('scrollfade');
+            }
+        }
+        else {
+            // Apply initial hidden state to elements NOT on the screen
+            element.classList.add('hidden'); // Apply initial hidden state
+            observer.observe(element); // Start observing each element
+        }
+    });
+}

package/dist/components/general/modal.css

@@ -0,0 +1,65 @@
+
+.modal {
+
+    position: fixed; /* Stay in place */
+    z-index: 1000; /* Sit on top */
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+  
+  /* Modal Content/Box */
+  .modalContent {
+    background-color: #fefefe;
+    margin: 15% auto; /* 15% from the top and centered */
+    padding: 20px;
+    border: 1px solid #888;
+    max-width: 80%;
+    width: fit-content;
+    position: relative;
+  }
+
+  .modalContent img {
+    border: 2px solid #aaa;
+  }
+  
+  /* The Close Button */
+  .modalClose {
+    color: #aaa;
+    font-size: 28px;
+    line-height: 26px;
+    font-weight: bold;
+    text-align: center;
+    position: absolute;
+    float: right;
+    right: 10px;
+    top: 10px;
+    width: 30px;
+    height:30px;
+    background-color: white;
+    border: 1px solid #999;
+    -moz-border-radius: 5px;
+	  -webkit-border-radius: 5px;
+	  border-radius: 5px;
+    z-index: 10;
+  }
+  
+  .modalClose:hover,
+  .modalClose:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+  }
+  
+  .show {
+    display: block;
+  }
+
+  .hide{
+    display: none;
+  }

package/dist/components/general/modal.js

@@ -0,0 +1,52 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import './modal.css';
+/*
+https://www.w3schools.com/howto/howto_css_modals.asp
+*/
+export function Modal(props) {
+    const myModalID = "myModal" + (props.modalID ?? '');
+    const myModalCloseID = "myModalClose" + (props.modalID ?? '');
+    useEffect(() => {
+        const handleModalClose = (event) => {
+            event.preventDefault();
+            const myModal = document.getElementById(myModalID);
+            if (myModal) {
+                myModal.style.display = 'none';
+            }
+        };
+        const myModalClose = document.getElementById(myModalCloseID);
+        if (myModalClose) {
+            myModalClose.addEventListener('click', handleModalClose);
+        }
+        ;
+        const handleWindowOnClick = (event) => {
+            const myModal = document.getElementById(myModalID);
+            if (event.target == myModal) {
+                if (myModal) {
+                    myModal.style.display = "none";
+                }
+                ;
+            }
+        };
+        window.addEventListener('click', handleWindowOnClick);
+        return () => {
+            window.removeEventListener('click', handleWindowOnClick);
+            if (myModalClose) {
+                myModalClose.removeEventListener('click', handleModalClose);
+            }
+            ;
+        };
+    }, []);
+    return (_jsx("div", { id: myModalID, className: "modal", style: { display: 'none' }, children: _jsxs("div", { className: "modalContent", children: [_jsx("span", { id: myModalCloseID, className: "modalClose", "aria-hidden": "true", children: "\u00D7" }), props.modalContent] }) }));
+}
+export const handleModalOpen = (event, modalID) => {
+    const myModalID = "myModal" + (modalID ?? '');
+    event.preventDefault();
+    const myModal = document.getElementById(myModalID);
+    if (myModal) {
+        myModal.style.display = 'block';
+    }
+    ;
+};

package/dist/components/general/table.css

@@ -0,0 +1,73 @@
+table.pixTable, .pixTable th, .pixTable tr, .pixTable td {
+	border : 1px solid #ccc ;
+	text-align: left;
+}
+
+table.pixTable {
+	width: 100%
+}
+
+table.pixTable {
+	th {
+		text-transform: uppercase;
+		font-size: 1.2em;
+		padding: 5px;
+		color: #369;
+		text-decoration: none;
+		white-space: nowrap;
+	}
+	th:hover {
+		text-decoration: underline;
+	}
+	td {
+		padding: 5px;
+	}
+} 
+
+button#showDialog, 
+button#saveDialog, 
+button#closeDialog {
+	font-size: 1.1em;
+    padding: 2px 5px;
+    margin: 5px !important;
+    vertical-align: middle;
+    outline: none;
+    border: 1px solid #CCC;
+    border-radius: 5px;
+
+	padding: 5px 20px;
+	-webkit-box-shadow: 0 0 5px 2px #CCC;
+	-moz-box-shadow: 0 0 5px 2px #CCC;
+    box-shadow: 0 0 5px 2px #CCC;
+}
+
+button#showDialog:hover,
+button#saveDialog:hover, 
+button#closeDialog:hover {
+    outline: none;
+	border: 1px solid #0C0;
+	-webkit-box-shadow: 0 0 5px 2px #CCC;
+	-moz-box-shadow: 0 0 5px 2px #CCC;
+    box-shadow: 0 0 5px 2px #CCC;
+}
+
+dialog {
+	padding: 20px;
+	position: absolute;
+  	top: 50%;
+  	left: 50%;
+  	transform: translate(-50%, -50%);
+}
+
+
+.sortArrow {
+	display: inline-block;
+	margin-left: 5px;
+	font-size: 0.8em;
+}
+.sortArrow.asc::before {
+	content: '▲'; /* Up arrow for ascending */
+}
+.sortArrow.desc::before {
+	content: '▼'; /* Down arrow for descending */
+}

package/dist/components/general/table.js

@@ -0,0 +1,108 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { SmartImage } from '../cms/cloudinary.image';
+import './table.css';
+function isImageURL(url) {
+    const isImage = /\.(jpeg|jpg|gif|png|webp|svg|bmp)$/i.test(url);
+    const isURL = () => { try {
+        new URL(url);
+        return true;
+    }
+    catch {
+        return false;
+    } };
+    return isImage && isURL;
+}
+Table.propTypes = {
+    data: PropTypes.array.isRequired,
+    id: PropTypes.string.isRequired,
+    sortable: PropTypes.bool,
+};
+export function Table(props) {
+    const [tableData, setTableData] = useState(props.data);
+    function getHeadings(data) {
+        const headings = Object.keys(data[0]).map((key, i) => {
+            return (props.sortable && props.sortable == true)
+                ? _jsxs("th", { onClick: () => { sortTable(key); }, children: [key, " ", _jsx("span", { className: "sortArrow" })] }, i)
+                : _jsx("th", { children: key }, i);
+        });
+        return _jsx("tr", { children: headings });
+    }
+    function getRows(data) {
+        return data.map((obj, i) => {
+            return _jsx("tr", { children: getCells(obj) }, i);
+        });
+    }
+    function getCells(obj) {
+        return Object.values(obj).map((value, i) => {
+            const myValue = (isImageURL(value)) ? _jsx(SmartImage, { src: value, title: value, alt: value }) : value;
+            return _jsx("td", { children: myValue }, i);
+        });
+    }
+    /* ========== SORT FUNCTIONS ========== */
+    function getHeader(column) {
+        const table = document.getElementById(props.id);
+        const headers = table.querySelectorAll('th');
+        let myHeader = undefined;
+        headers.forEach(header => {
+            if (header.innerText.trim().toUpperCase() === column.trim().toUpperCase()) {
+                myHeader = header;
+            }
+        });
+        return (myHeader);
+    }
+    function getDirection(header) {
+        const arrow = header.querySelector('.sortArrow');
+        let oldDirection = '';
+        if (arrow) {
+            const oldClassList = arrow.classList;
+            if (oldClassList.contains('asc')) {
+                oldDirection = 'asc';
+            }
+            else if (oldClassList.contains('desc')) {
+                oldDirection = 'desc';
+            }
+        }
+        return (oldDirection);
+    }
+    function clearAllArrows() {
+        const table = document.getElementById(props.id);
+        const headers = table.querySelectorAll('th');
+        headers.forEach(header => {
+            const arrow = header.querySelector('.sortArrow');
+            if (arrow) {
+                arrow.classList.remove('asc', 'desc');
+            }
+        });
+    }
+    function updateArrow(column, oldDirection) {
+        const header = getHeader(column);
+        const arrow = header.querySelector('.sortArrow');
+        if (arrow) {
+            if (oldDirection == 'asc') {
+                arrow.classList.add('desc');
+            }
+            else {
+                arrow.classList.add('asc');
+            }
+        }
+    }
+    function sortTable(column) {
+        const oldTableData = [...tableData];
+        const myHeader = getHeader(column);
+        if (myHeader && getDirection(myHeader) === 'asc') {
+            setTableData(oldTableData.sort((a, b) => b[column].localeCompare(a[column])));
+        }
+        else {
+            setTableData(oldTableData.sort((a, b) => a[column].localeCompare(b[column])));
+        }
+        if (myHeader) {
+            const oldDirection = getDirection(myHeader);
+            clearAllArrows();
+            updateArrow(column, oldDirection);
+        }
+    }
+    return (_jsx("div", { children: _jsxs("table", { id: props.id ?? undefined, className: "pixTable", children: [_jsx("thead", { children: getHeadings(tableData) }), _jsx("tbody", { children: getRows(tableData) })] }) }));
+}
+;