@pixelated-tech/components 3.11.8 → 3.12.0

package/dist/components/shoppingcart/shoppingcart.components.js

@@ -20,7 +20,14 @@ const debug = false;
 /* ================================================ */
 /* ========== SHOPPING CART UI COMPONENT ========== */
 /* ================================================ */
+/**
+ * ShoppingCart — page-level shopping cart UI that handles items, shipping, and checkout flows.
+ *
+ * Props:
+ * @param {string} [props.payPalClientID] - Optional PayPal client ID to enable the PayPal checkout button.
+ */
 ShoppingCart.propTypes = {
+    /** Optional PayPal client ID to enable PayPal checkout */
     payPalClientID: PropTypes.string,
 };
 export function ShoppingCart(props) {
@@ -120,7 +127,13 @@ export function ShoppingCart(props) {
         const formObject = Object.fromEntries(formData);
         setShippingInfo(formObject);
     }
+    /**
+     * handleOnApprove — PayPal approval handler invoked after successful payment.
+     *
+     * @param {object} [props.data] - Payment approval payload returned by PayPal's onApprove.
+     */
     handleOnApprove.propTypes = {
+        /** PayPal onApprove payload */
         data: PropTypes.object.isRequired
     };
     function handleOnApprove(props) {
@@ -160,13 +173,31 @@ export function ShoppingCart(props) {
         return (_jsxs("div", { className: "pixCart", children: [_jsx(CalloutHeader, { title: "Shopping Cart : " }), _jsx("br", {}), _jsx("div", { className: "centered", children: "No items in your shopping cart" }), _jsx("div", { id: "paypal-button-container", className: "paypal-button-container" })] }));
     }
 }
+/**
+ * ShoppingCartItem — Render a single cart line item showing thumbnail, title, quantity and price.
+ *
+ * @param {shape} [props.item] - Shopping cart line item with id, title, image, quantity and cost.
+ * @param {string} [props.itemID] - Unique identifier for the cart item.
+ * @param {string} [props.itemURL] - Optional item detail URL to link the title and image.
+ * @param {string} [props.itemTitle] - Display title for the item.
+ * @param {string} [props.itemImageURL] - Thumbnail image URL for the item.
+ * @param {number} [props.itemQuantity] - Quantity of this line item in the cart.
+ * @param {number} [props.itemCost] - Per-item cost (numeric) used to compute totals.
+ */
 ShoppingCartItem.propTypes = {
+    /** Shopping cart line item object */
     item: PropTypes.shape({
+        /** Unique item id */
         itemID: PropTypes.string.isRequired,
+        /** Optional URL for the item details */
         itemURL: PropTypes.string,
+        /** Item display title */
         itemTitle: PropTypes.string.isRequired,
+        /** Thumbnail image URL */
         itemImageURL: PropTypes.string,
+        /** Line item quantity */
         itemQuantity: PropTypes.number.isRequired,
+        /** Per-item price */
         itemCost: PropTypes.number.isRequired,
     }).isRequired
 };
@@ -182,15 +213,35 @@ export function ShoppingCartItem(props) {
                                 ? _jsx("a", { href: thisItem.itemURL, target: thisItemTarget, rel: "noopener noreferrer", children: _jsx("h2", { className: "", children: thisItem.itemTitle }) })
                                 : _jsx("h2", { className: "", children: thisItem.itemTitle }) }) }), _jsxs("div", { className: "pixCartItemDetails grid12", children: [_jsx("br", {}), _jsxs("div", { children: [_jsx("b", { children: "Item ID: " }), thisItem.itemID] }), _jsxs("div", { children: [_jsx("b", { children: "Quantity: " }), thisItem.itemQuantity] }), _jsx("br", {}), _jsx("div", { children: _jsx(FormButton, { className: "pixCartButton", type: "button", id: `btn-rm-${thisItem.itemID}`, text: "Remove Item From Cart", onClick: () => removeFromShoppingCart(thisItem) }) })] })] }), _jsx("div", { className: "grid-s11-e13", children: _jsx("div", { className: "pixCartItemPrice", children: formatAsUSD(thisItem.itemCost) }) })] }));
 }
+/**
+ * CheckoutItems — Display a checkout summary with itemized lines and shipping information.
+ *
+ * @param {arrayOf} [props.items] - Cart items included in the checkout summary.
+ * @param {shape} [props.shippingTo] - Shipping address object with name, street1, city, state and zip.
+ * @param {number} [props.subtotal_discount] - Discount amount applied to subtotal.
+ * @param {number} [props.subtotal] - Subtotal amount before shipping and taxes.
+ * @param {number} [props.shippingCost] - Shipping cost for the order.
+ * @param {number} [props.handlingFee] - Optional handling fees.
+ * @param {number} [props.salesTax] - Sales tax amount.
+ * @param {number} [props.total] - Final total amount charged.
+ */
 CheckoutItems.propTypes = {
+    /** Array of cart items to summarize */
     items: PropTypes.arrayOf(PropTypes.shape({
+        /** Item identifier */
         itemID: PropTypes.string.isRequired,
+        /** Item detail URL (optional) */
         itemURL: PropTypes.string,
+        /** Item title */
         itemTitle: PropTypes.string.isRequired,
+        /** Item image URL */
         itemImageURL: PropTypes.string,
+        /** Quantity for this item */
         itemQuantity: PropTypes.number.isRequired,
+        /** Per-item price */
         itemCost: PropTypes.number.isRequired,
     })).isRequired,
+    /** Shipping address object */
     shippingTo: PropTypes.shape({
         name: PropTypes.string.isRequired,
         street1: PropTypes.string.isRequired,
@@ -198,11 +249,17 @@ CheckoutItems.propTypes = {
         state: PropTypes.string.isRequired,
         zip: PropTypes.string.isRequired,
     }).isRequired,
+    /** Discount amount applied to subtotal */
     subtotal_discount: PropTypes.number.isRequired,
+    /** Subtotal amount before shipping and taxes */
     subtotal: PropTypes.number.isRequired,
+    /** Shipping cost for the order */
     shippingCost: PropTypes.number.isRequired,
+    /** Handling fee applied to the order */
     handlingFee: PropTypes.number.isRequired,
+    /** Sales tax amount */
     salesTax: PropTypes.number.isRequired,
+    /** Final total amount */
     total: PropTypes.number.isRequired,
 };
 export function CheckoutItems(props) {
@@ -250,7 +307,13 @@ export function CheckoutItems(props) {
     }
     return (_jsx(Table, { id: "pixCheckout", data: checkoutTableData }));
 }
+/**
+ * CartButton — Render a cart button showing the current cart item count and navigates to the cart page when clicked.
+ *
+ * @param {string} [props.href] - Destination URL for the cart page.
+ */
 CartButton.propTypes = {
+    /** Destination URL for viewing the shopping cart */
     href: PropTypes.string.isRequired,
 };
 export function CartButton(props) {
@@ -277,16 +340,34 @@ export function CartButton(props) {
     }, [cartCount]);
     return (_jsx("div", { className: "pixCart", children: _jsxs("button", { className: "pixCartButton", type: "button", id: "pixCartButton", onClick: () => window.location.href = props.href, children: [_jsx(SmartImage, { src: "/images/icons/cart-icon.png", title: "View Shopping Cart", alt: "View Shopping Cart", cloudinaryEnv: config?.cloudinary?.product_env, cloudinaryDomain: config?.cloudinary?.baseUrl, cloudinaryTransforms: config?.cloudinary?.transforms }), _jsxs("span", { children: ["\u00A0", `(${cartCount})`] })] }) }));
 }
+/**
+ * ViewItemDetails — Button to navigate to an item detail page for a given item ID.
+ *
+ * @param {string} [props.href] - Base URL for the item detail page.
+ * @param {string} [props.itemID] - Item identifier appended to the URL when navigating.
+ */
 ViewItemDetails.propTypes = {
+    /** Base URL for item details */
     href: PropTypes.string.isRequired,
+    /** Item identifier to navigate to */
     itemID: PropTypes.string.isRequired,
 };
 export function ViewItemDetails(props) {
     return (_jsx("div", { children: _jsx(FormButton, { className: "pixCartButton", type: "button", id: `btn-item-${props.itemID}`, text: "View Item Details", onClick: () => window.location.href = `${props.href}/${props.itemID}` }) }));
 }
+/**
+ * AddToCartButton — Button that adds an item to the shopping cart and displays a confirmation modal.
+ *
+ * @param {function} [props.handler] - Handler function that performs the add-to-cart action (receives the item object).
+ * @param {object} [props.item] - Shopping cart item object to add.
+ * @param {string} [props.itemID] - Unique identifier for the item used for modal IDs and button IDs.
+ */
 AddToCartButton.propTypes = {
+    /** Handler called to add the item to cart */
     handler: PropTypes.func.isRequired,
+    /** Shopping cart item object */
     item: PropTypes.object.isRequired,
+    /** Unique item identifier */
     itemID: PropTypes.string.isRequired,
 };
 export function AddToCartButton(props) {
@@ -301,8 +382,16 @@ export function AddToCartButton(props) {
     }
     return (_jsxs("div", { children: [_jsx(FormButton, { className: "pixCartButton", type: "button", id: `btn-add-${props.itemID}`, text: "Add to Shopping Cart", onClick: (e) => handleClick(e) }), modalContent && _jsx(Modal, { modalContent: modalContent, modalID: "-" + props.itemID })] }));
 }
+/**
+ * GoToCartButton — Button that navigates the user to the shopping cart page.
+ *
+ * @param {string} [props.href] - Destination URL for the shopping cart.
+ * @param {string} [props.itemID] - ID used to compose button id attributes (not required for navigation).
+ */
 GoToCartButton.propTypes = {
+    /** Cart page URL */
     href: PropTypes.string.isRequired,
+    /** Item ID used for button id attributes */
     itemID: PropTypes.string.isRequired,
 };
 export function GoToCartButton(props) {

package/dist/components/sitebuilder/config/CompoundFontSelector.js

@@ -3,12 +3,28 @@ import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FontSelector } from './FontSelector';
 import './CompoundFontSelector.css';
+/**
+ * CompoundFontSelector — Combined font selector that exposes primary, fallback and generic font fields as one compound value.
+ *
+ * @param {string} [props.id] - Base id used for the internal font inputs.
+ * @param {string} [props.name] - Base name used for the internal font inputs.
+ * @param {string} [props.label] - Label displayed above the compound selector.
+ * @param {boolean} [props.required] - Whether selecting a primary font is required.
+ * @param {string} [props.value] - Current combined font value (comma-separated stack).
+ * @param {function} [props.onChange] - Callback invoked with the combined font stack when any part changes.
+ */
 CompoundFontSelector.propTypes = {
+    /** Base id for internal inputs */
     id: PropTypes.string.isRequired,
+    /** Base name for internal inputs */
     name: PropTypes.string.isRequired,
+    /** Display label for the control */
     label: PropTypes.string.isRequired,
+    /** Required flag for the primary font */
     required: PropTypes.bool,
+    /** Combined font stack value */
     value: PropTypes.string,
+    /** onChange callback receiving combined font string */
     onChange: PropTypes.func,
 };
 export function CompoundFontSelector(props) {
@@ -40,11 +56,27 @@ export function CompoundFontSelector(props) {
     };
     return (_jsxs("div", { className: "compound-font-selector", children: [_jsx("label", { children: label }), _jsxs("div", { className: "compound-container", children: [_jsx(FontSelector, { id: `${id}-primary`, name: `${name}-primary`, label: "Primary Font", fontType: "google", required: !!required, placeholder: "Select Google Font", value: fonts.primary, onChange: (val) => handleFontChange('primary', val) }), _jsx(FontSelector, { id: `${id}-fallback`, name: `${name}-fallback`, label: "Fallback Font", fontType: "websafe", required: false, placeholder: "Select web-safe font", value: fonts.fallback, onChange: (val) => handleFontChange('fallback', val) }), _jsx(FontSelector, { id: `${id}-generic`, name: `${name}-generic`, label: "Generic Family", fontType: "generic", required: false, placeholder: "Select generic family", value: fonts.generic, onChange: (val) => handleFontChange('generic', val) })] })] }));
 }
+/**
+ * CompoundFontSelector — Combined font selector that exposes primary, fallback and generic font fields as one compound value.
+ *
+ * @param {string} [props.id] - Base id used for the internal font inputs.
+ * @param {string} [props.name] - Base name used for the internal font inputs.
+ * @param {string} [props.label] - Label displayed above the compound selector.
+ * @param {boolean} [props.required] - Whether selecting a primary font is required.
+ * @param {string} [props.value] - Current combined font value (comma-separated stack).
+ * @param {function} [props.onChange] - Callback invoked with the combined font stack when any part changes.
+ */
 CompoundFontSelector.propTypes = {
+    /** Base id for internal inputs */
     id: PropTypes.string.isRequired,
+    /** Base name for internal inputs */
     name: PropTypes.string.isRequired,
+    /** Display label for the control */
     label: PropTypes.string.isRequired,
+    /** Required flag for the primary font */
     required: PropTypes.bool,
+    /** Combined font stack value */
     value: PropTypes.string,
+    /** onChange callback receiving combined font string */
     onChange: PropTypes.func,
 };

package/dist/components/sitebuilder/config/ConfigBuilder.js

@@ -103,8 +103,16 @@ const SiteConfigPropTypes = {
     routes: PropTypes.arrayOf(PropTypes.shape(RoutePropTypes).isRequired).isRequired,
     visualdesign: PropTypes.shape(VisualDesignPropTypes).isRequired,
 };
+/**
+ * ConfigBuilder — Interactive configuration editor for site-level settings (siteInfo, routes, visual design) with optional AI-assisted recommendations.
+ *
+ * @param {shape} [props.initialConfig] - Initial configuration object used to prepopulate the editor.
+ * @param {function} [props.onSave] - Callback invoked when the user saves the configuration (receives the full config object).
+ */
 ConfigBuilder.propTypes = {
+    /** Initial site configuration to edit */
     initialConfig: PropTypes.shape(SiteConfigPropTypes),
+    /** Save callback to persist config changes */
     onSave: PropTypes.func,
 };
 export function ConfigBuilder(props) {

package/dist/components/sitebuilder/config/FontSelector.js

@@ -4,14 +4,34 @@ import PropTypes from 'prop-types';
 import { getFontOptions } from './google-fonts';
 import { WEB_SAFE_FONTS, GENERIC_FAMILIES } from './fonts';
 import './FontSelector.css';
+/**
+ * FontSelector — Single-font picker that supports Google Fonts, web-safe fonts, and generic families with autocomplete.
+ *
+ * @param {string} [props.id] - Input id attribute.
+ * @param {string} [props.name] - Input name attribute.
+ * @param {string} [props.label] - Display label for the selector.
+ * @param {oneOf} [props.fontType] - Font source type: 'google' | 'websafe' | 'generic'.
+ * @param {boolean} [props.required] - Whether the field is required.
+ * @param {string} [props.placeholder] - Placeholder text shown when empty.
+ * @param {string} [props.value] - Current selected font value.
+ * @param {function} [props.onChange] - Callback invoked when selection changes (receives the font value).
+ */
 FontSelector.propTypes = {
+    /** Input id attribute */
     id: PropTypes.string.isRequired,
+    /** Input name attribute */
     name: PropTypes.string.isRequired,
+    /** Display label */
     label: PropTypes.string.isRequired,
+    /** Font source type */
     fontType: PropTypes.oneOf(['google', 'websafe', 'generic']).isRequired,
+    /** Required flag */
     required: PropTypes.bool,
+    /** Placeholder text */
     placeholder: PropTypes.string,
+    /** Selected font value */
     value: PropTypes.string,
+    /** Change handler receives new font value */
     onChange: PropTypes.func,
 };
 export function FontSelector(props) {
@@ -85,13 +105,33 @@ export function FontSelector(props) {
                                 }
                             }, tabIndex: 0, role: "option", "aria-selected": inputValue === option.value, children: [_jsx("span", { className: "font-selector-font-name", children: option.label }), option.category && (_jsxs("span", { className: "font-selector-font-category", children: ["(", option.category, ")"] }))] }, option.value)))) }))] })] }));
 }
+/**
+ * FontSelector — Single-font picker that supports Google Fonts, web-safe fonts, and generic families with autocomplete.
+ *
+ * @param {string} [props.id] - Input id attribute.
+ * @param {string} [props.name] - Input name attribute.
+ * @param {string} [props.label] - Display label for the selector.
+ * @param {oneOf} [props.fontType] - Font source type: 'google' | 'websafe' | 'generic'.
+ * @param {boolean} [props.required] - Whether the field is required.
+ * @param {string} [props.placeholder] - Placeholder text shown when empty.
+ * @param {string} [props.value] - Current selected font value.
+ * @param {function} [props.onChange] - Callback invoked when selection changes (receives the font value).
+ */
 FontSelector.propTypes = {
+    /** Input id attribute */
     id: PropTypes.string.isRequired,
+    /** Input name attribute */
     name: PropTypes.string.isRequired,
+    /** Display label */
     label: PropTypes.string.isRequired,
+    /** Font source type */
     fontType: PropTypes.oneOf(['google', 'websafe', 'generic']).isRequired,
+    /** Required flag */
     required: PropTypes.bool,
+    /** Placeholder text */
     placeholder: PropTypes.string,
+    /** Selected font value */
     value: PropTypes.string,
+    /** Change handler receives new font value */
     onChange: PropTypes.func,
 };

package/dist/components/sitebuilder/form/formbuilder.js

@@ -9,7 +9,15 @@ const debug = false;
 /* =====  FORM BUILDER =====
 Display all the components for a Form Builder -
 Element Buttons, Element Details, and the Form */
-FormBuilder.propTypes = {};
+/**
+ * FormBuilder — Visual editor for composing forms via JSON schema. Provides a field editor and a live preview powered by `FormEngine`.
+ *
+ * @param {function} [props.setFormData] - Callback that receives generated field JSON when building a new field (used by the UI to pass schema to the preview).
+ */
+FormBuilder.propTypes = {
+    /** Callback invoked with generated form JSON */
+    setFormData: PropTypes.func,
+};
 export function FormBuilder() {
     const [formData, setFormData] = useState({ fields: [] });
     const [fieldFormData, setFieldFormData] = useState({ fields: [] });
@@ -57,6 +65,7 @@ Dynamically generate, component by component, and prop by prop,
 the JSON to create a form via FormEngine
 */
 FormBuild.propTypes = {
+    /** Callback used to set the generated field JSON in the parent */
     setFormData: PropTypes.func.isRequired,
 };
 export function FormBuild(props) {