lib-pixelbuild 0.2.0 → 0.2.2

package/dist/components/TextComponent.js

@@ -3,9 +3,10 @@ import { memo, useMemo } from 'react';
 import { Row, Container } from 'react-bootstrap';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
+import { resolveImageElement } from '../utils/imageCustomization.js';
 const elementFactory = new ElementFactory();
 const TextComponent = memo(function TextComponent({ component }) {
-    const elements = useMemo(() => orderBySort(component.elements), [component.elements]);
-    return (_jsx(Container, { style: component.styles, children: _jsx(Row, { id: "element-row", children: elements.map((element) => elementFactory.build(element)) }) }));
+    const elements = useMemo(() => orderBySort(component.elements).map((element) => resolveImageElement(component, element)), [component.elements, component.properties]);
+    return (_jsx(Container, { "data-pb-component": component.id, style: component.styles, children: _jsx(Row, { id: "element-row", children: elements.map((element) => elementFactory.build(element)) }) }));
 });
 export { TextComponent };

package/dist/constants/ComponentEnum.d.ts

@@ -13,5 +13,6 @@ export declare const ComponentTypeEnum: {
     readonly SocialIcons: "social-icons";
     readonly Map: "map";
     readonly List: "list";
+    readonly Buttons: "buttons";
 };
 export type ComponentTypeSlug = (typeof ComponentTypeEnum)[keyof typeof ComponentTypeEnum];

package/dist/constants/ComponentEnum.js

@@ -13,4 +13,5 @@ export const ComponentTypeEnum = {
     SocialIcons: 'social-icons',
     Map: 'map',
     List: 'list',
+    Buttons: 'buttons',
 };

package/dist/elements/ButtonElement.js

@@ -4,6 +4,7 @@ import { Button, Spinner } from 'react-bootstrap';
 import { ElementColWrapper } from './ElementColWrapper.js';
 import { UseFormStore } from '../stores/UseFormStore.js';
 import { buttonActionFactory } from '../factories/ButtonActionFactory.js';
+import { ButtonActionEnum } from '../constants/ButtonActionEnum.js';
 import { getString, getNumber, getBoolean } from '../utils/propertyUtils.js';
 export function ButtonElement({ element, formId }) {
     const properties = element.properties;
@@ -22,7 +23,7 @@ export function ButtonElement({ element, formId }) {
         return () => unregisterElement(element.id);
     }, [element.id, properties.startHidden, registerElement, resolvedFormId, unregisterElement]);
     async function handleClick(event) {
-        var _a;
+        var _a, _b, _c;
         if (!properties.path) {
             event.preventDefault();
             const form = event.currentTarget instanceof HTMLButtonElement ? event.currentTarget.form : null;
@@ -35,11 +36,21 @@ export function ButtonElement({ element, formId }) {
             if (hasErrors)
                 return false;
             UseFormStore.getState().setElementState(element.id, { loading: true });
-            const actionId = getNumber(properties, 'actionId');
+            const actionId = (_a = getNumber(properties, 'actionId')) !== null && _a !== void 0 ? _a : (properties.type === 'submit' ? ButtonActionEnum.SendMail : undefined);
             if (actionId) {
-                await buttonActionFactory.build(actionId, formData);
+                const formConfig = resolvedFormId !== undefined ? (_b = UseFormStore.getState().forms[resolvedFormId]) === null || _b === void 0 ? void 0 : _b.email : undefined;
+                try {
+                    await buttonActionFactory.build(actionId, formData, {
+                        recipient: formConfig === null || formConfig === void 0 ? void 0 : formConfig.recipient,
+                        subject: formConfig === null || formConfig === void 0 ? void 0 : formConfig.subject,
+                        formId: resolvedFormId
+                    });
+                }
+                catch (error) {
+                    console.warn('Não foi possível enviar o formulário:', error);
+                }
             }
-            const loadingTime = (_a = getNumber(properties, 'loadingTime')) !== null && _a !== void 0 ? _a : 0;
+            const loadingTime = (_c = getNumber(properties, 'loadingTime')) !== null && _c !== void 0 ? _c : 0;
             setTimeout(() => {
                 if (getBoolean(properties, 'hideOnClick'))
                     hideElement(element.id);
@@ -56,6 +67,8 @@ export function ButtonElement({ element, formId }) {
     if (hidden)
         return null;
     const buttonType = properties.type === 'button' || properties.type === 'submit' || properties.type === 'reset'
-        ? properties.type : undefined;
-    return (_jsx(ElementColWrapper, { element: element, children: _jsx(Button, { as: properties.path ? 'a' : 'button', type: buttonType, variant: getString(properties, 'variant', buttonType ? 'primary' : getString(properties, 'type', 'primary')), href: getString(properties, 'path'), target: properties.path ? '_blank' : undefined, rel: properties.path ? 'noopener noreferrer' : undefined, disabled: loading, onClick: handleClick, style: element.styles, children: loading ? (_jsxs(_Fragment, { children: [_jsx("output", { "aria-busy": "true", children: _jsx(Spinner, { as: "span", animation: "border", size: "sm", "aria-hidden": "true" }) }), ' ' + getString(properties, 'message')] })) : (getString(properties, 'text') || getString(properties, 'title')) }) }));
+        ? properties.type
+        : undefined;
+    const size = getString(properties, 'size');
+    return (_jsx(ElementColWrapper, { element: element, children: _jsx(Button, { as: properties.path ? 'a' : 'button', type: buttonType, variant: getString(properties, 'variant', buttonType ? 'primary' : getString(properties, 'type', 'primary')), size: size === 'sm' || size === 'lg' ? size : undefined, href: getString(properties, 'path'), target: properties.path ? getString(properties, 'target', '_self') : undefined, rel: properties.path ? 'noopener noreferrer' : undefined, disabled: loading, onClick: handleClick, style: element.styles, children: loading ? (_jsxs(_Fragment, { children: [_jsx("output", { "aria-busy": "true", children: _jsx(Spinner, { as: "span", animation: "border", size: "sm", "aria-hidden": "true" }) }), ' ' + getString(properties, 'message')] })) : (getString(properties, 'text') || getString(properties, 'title')) }) }));
 }

package/dist/elements/ElementColWrapper.js

@@ -1,5 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Col } from 'react-bootstrap';
 export function ElementColWrapper({ element, children }) {
-    return (_jsx(Col, { xs: element.width.xs, sm: element.width.sm, md: element.width.md, lg: element.width.lg, xl: element.width.xl, style: element.styles, children: children }, element.id));
+    var _a;
+    const style = {};
+    if (element.fullBleed) {
+        style.paddingLeft = '0';
+        style.paddingRight = '0';
+    }
+    if ((_a = element.styles) === null || _a === void 0 ? void 0 : _a.textAlign) {
+        style.textAlign = element.styles.textAlign;
+    }
+    return (_jsx(Col, { "data-pb-element": element.id, xs: element.width.xs, sm: element.width.sm, md: element.width.md, lg: element.width.lg, xl: element.width.xl, style: style, children: children }, element.id));
 }

package/dist/elements/IconElement.js

@@ -3,13 +3,13 @@ import { Suspense, useMemo } from 'react';
 import { iconMap } from './IconMap.js';
 import { ElementColWrapper } from './ElementColWrapper.js';
 function FallbackIcon({ name }) {
-    const Icon = iconMap[name] || iconMap.FaQuestionCircle;
+    const Icon = iconMap[name] || iconMap.question;
     return _jsx(Icon, { size: "1em", "aria-label": name || 'Icon' });
 }
 export function IconElement({ element }) {
-    var _a;
     const name = String(element.properties.name || '');
-    const iconSize = ((_a = element.styles) === null || _a === void 0 ? void 0 : _a.fontSize) || '1.25rem';
-    const Icon = useMemo(() => iconMap[name] || iconMap.FaQuestionCircle, [name]);
-    return (_jsx(ElementColWrapper, { element: element, children: _jsx("span", { style: { fontSize: iconSize, display: 'inline-flex' }, children: _jsx(Suspense, { fallback: _jsx(FallbackIcon, { name: name }), children: _jsx(Icon, { size: "1em", style: element.styles, "aria-label": name || 'Icon' }) }) }) }));
+    const styles = element.styles || {};
+    const iconSize = styles.fontSize || '1.25rem';
+    const Icon = useMemo(() => iconMap[name] || iconMap.question, [name]);
+    return (_jsx(ElementColWrapper, { element: element, children: _jsx("span", { style: { fontSize: iconSize, display: 'inline-flex', color: styles.color }, children: _jsx(Suspense, { fallback: _jsx(FallbackIcon, { name: name }), children: _jsx(Icon, { size: "1em", color: styles.color, style: styles, "aria-label": name || 'Icon' }) }) }) }));
 }

package/dist/elements/IconMap.js

@@ -1,30 +1,103 @@
-import { FaArrowRight, FaBars, FaCalendar, FaCheck, FaChevronLeft, FaChevronRight, FaClock, FaEnvelope, FaFacebookF, FaGlobe, FaHeart, FaHome, FaInfoCircle, FaInstagram, FaLink, FaMapMarkerAlt, FaPhone, FaQuestionCircle, FaQuoteLeft, FaSearch, FaShoppingCart, FaStar, FaTimes, FaTwitter, FaUser, FaWhatsapp, FaYoutube, } from 'react-icons/fa';
+import { FaArrowRight, FaArrowLeft, FaArrowUp, FaArrowDown, FaChevronRight, FaChevronLeft, FaChevronUp, FaChevronDown, FaLongArrowAltRight, FaLongArrowAltLeft, FaBars, FaTimes, FaCheck, FaPlus, FaMinus, FaSearch, FaHome, FaUser, FaUsers, FaCog, FaInfoCircle, FaQuestionCircle, FaExclamationTriangle, FaCheckCircle, FaTimesCircle, FaExternalLinkAlt, FaDownload, FaUpload, FaSync, FaLock, FaUnlock, FaEye, FaEyeSlash, FaBell, FaStar, FaHeart, FaList, FaTh, FaThLarge, FaFilter, FaPhone, FaEnvelope, FaEnvelopeOpen, FaComment, FaComments, FaQuoteLeft, FaQuoteRight, FaPaperPlane, FaFacebookF, FaInstagram, FaWhatsapp, FaYoutube, FaTwitter, FaLinkedinIn, FaPinterestP, FaShoppingCart, FaShoppingBag, FaCreditCard, FaMoneyBillWave, FaTag, FaTags, FaGift, FaTruck, FaMapMarkerAlt, FaMap, FaMapPin, FaGlobe, FaCompass, FaLocationArrow, FaClock, FaCalendar, FaCalendarAlt, FaHourglassHalf, FaImage, FaImages, FaCamera, FaVideo, FaFilm, FaMusic, FaHeadphones, FaPlay, FaBriefcase, FaBuilding, FaChartBar, FaChartLine, FaChartPie, FaRocket, FaLightbulb, FaTrophy, FaMedal, FaFlag, FaFile, FaFolder, FaLink, FaPencilAlt, FaTrashAlt, FaCopy, FaCloud, FaWifi, FaMobileAlt, } from 'react-icons/fa';
 export const iconMap = {
-    FaArrowRight,
-    FaBars,
-    FaCalendar,
-    FaCheck,
-    FaChevronLeft,
-    FaChevronRight,
-    FaClock,
-    FaEnvelope,
-    FaFacebookF,
-    FaGlobe,
-    FaHeart,
-    FaHome,
-    FaInfoCircle,
-    FaInstagram,
-    FaLink,
-    FaMapMarkerAlt,
-    FaPhone,
-    FaQuestionCircle,
-    FaQuoteLeft,
-    FaSearch,
-    FaShoppingCart,
-    FaStar,
-    FaTimes,
-    FaTwitter,
-    FaUser,
-    FaWhatsapp,
-    FaYoutube,
+    'arrow-right': FaArrowRight,
+    'arrow-left': FaArrowLeft,
+    'arrow-up': FaArrowUp,
+    'arrow-down': FaArrowDown,
+    'chevron-right': FaChevronRight,
+    'chevron-left': FaChevronLeft,
+    'chevron-up': FaChevronUp,
+    'chevron-down': FaChevronDown,
+    'long-arrow-right': FaLongArrowAltRight,
+    'long-arrow-left': FaLongArrowAltLeft,
+    bars: FaBars,
+    times: FaTimes,
+    check: FaCheck,
+    plus: FaPlus,
+    minus: FaMinus,
+    search: FaSearch,
+    home: FaHome,
+    user: FaUser,
+    users: FaUsers,
+    cog: FaCog,
+    info: FaInfoCircle,
+    question: FaQuestionCircle,
+    exclamation: FaExclamationTriangle,
+    'check-circle': FaCheckCircle,
+    'times-circle': FaTimesCircle,
+    'external-link': FaExternalLinkAlt,
+    download: FaDownload,
+    upload: FaUpload,
+    sync: FaSync,
+    lock: FaLock,
+    unlock: FaUnlock,
+    eye: FaEye,
+    'eye-slash': FaEyeSlash,
+    bell: FaBell,
+    star: FaStar,
+    heart: FaHeart,
+    list: FaList,
+    grid: FaTh,
+    'grid-large': FaThLarge,
+    filter: FaFilter,
+    phone: FaPhone,
+    envelope: FaEnvelope,
+    'envelope-open': FaEnvelopeOpen,
+    comment: FaComment,
+    comments: FaComments,
+    'quote-left': FaQuoteLeft,
+    'quote-right': FaQuoteRight,
+    'paper-plane': FaPaperPlane,
+    facebook: FaFacebookF,
+    instagram: FaInstagram,
+    whatsapp: FaWhatsapp,
+    youtube: FaYoutube,
+    twitter: FaTwitter,
+    linkedin: FaLinkedinIn,
+    pinterest: FaPinterestP,
+    'shopping-cart': FaShoppingCart,
+    'shopping-bag': FaShoppingBag,
+    'credit-card': FaCreditCard,
+    money: FaMoneyBillWave,
+    tag: FaTag,
+    tags: FaTags,
+    gift: FaGift,
+    truck: FaTruck,
+    'map-marker': FaMapMarkerAlt,
+    map: FaMap,
+    'map-pin': FaMapPin,
+    globe: FaGlobe,
+    compass: FaCompass,
+    'location-arrow': FaLocationArrow,
+    clock: FaClock,
+    calendar: FaCalendar,
+    'calendar-alt': FaCalendarAlt,
+    hourglass: FaHourglassHalf,
+    image: FaImage,
+    images: FaImages,
+    camera: FaCamera,
+    video: FaVideo,
+    film: FaFilm,
+    music: FaMusic,
+    headphones: FaHeadphones,
+    play: FaPlay,
+    briefcase: FaBriefcase,
+    building: FaBuilding,
+    'chart-bar': FaChartBar,
+    'chart-line': FaChartLine,
+    'chart-pie': FaChartPie,
+    rocket: FaRocket,
+    lightbulb: FaLightbulb,
+    trophy: FaTrophy,
+    medal: FaMedal,
+    flag: FaFlag,
+    file: FaFile,
+    folder: FaFolder,
+    link: FaLink,
+    pencil: FaPencilAlt,
+    trash: FaTrashAlt,
+    copy: FaCopy,
+    cloud: FaCloud,
+    wifi: FaWifi,
+    mobile: FaMobileAlt,
 };

package/dist/elements/InputElement.js

@@ -59,7 +59,8 @@ export function InputElement({ element, formId }) {
     const setCheckedValue = (checked, value) => {
         const store = UseFormStore.getState();
         if (checked && element.elementType === ElementTypeEnum.Radio && name && resolvedFormId !== undefined) {
-            store.getElementsByForm(resolvedFormId)
+            store
+                .getElementsByForm(resolvedFormId)
                 .filter((field) => field.id !== element.id && field.type === ElementTypeEnum.Radio && field.name === name)
                 .forEach((field) => store.setElementState(field.id, { value: '' }));
         }
@@ -75,12 +76,12 @@ export function InputElement({ element, formId }) {
                     const data = typeof option === 'object' && option !== null ? option : null;
                     const value = String((_a = data === null || data === void 0 ? void 0 : data.value) !== null && _a !== void 0 ? _a : option);
                     const text = String((_d = (_c = (_b = data === null || data === void 0 ? void 0 : data.label) !== null && _b !== void 0 ? _b : data === null || data === void 0 ? void 0 : data.text) !== null && _c !== void 0 ? _c : data === null || data === void 0 ? void 0 : data.title) !== null && _d !== void 0 ? _d : value);
-                    return _jsx("option", { value: value, children: text }, `${value}-${index}`);
+                    return (_jsx("option", { value: value, children: text }, `${value}-${index}`));
                 }) }));
         }
         if (element.elementType === ElementTypeEnum.Checkbox || element.elementType === ElementTypeEnum.Radio) {
             const value = getString(properties, 'value', 'on');
-            return (_jsxs("div", { className: "form-check", children: [_jsx("input", { id: controlId, type: element.elementType, defaultChecked: getBoolean(properties, 'checked'), value: value, onChange: (e) => setCheckedValue(e.target.checked, value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, className: `form-check-input${error ? ' is-invalid' : ''}`, style: element.styles }), label && _jsx("label", { className: "form-check-label", htmlFor: controlId, children: label })] }));
+            return (_jsxs("div", { className: "form-check", children: [_jsx("input", { id: controlId, type: element.elementType, defaultChecked: getBoolean(properties, 'checked'), value: value, onChange: (e) => setCheckedValue(e.target.checked, value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, className: `form-check-input${error ? ' is-invalid' : ''}`, style: element.styles }), label && (_jsx("label", { className: "form-check-label", htmlFor: controlId, children: label }))] }));
         }
         if (element.elementType === ElementTypeEnum.File) {
             return (_jsx("div", { className: "alert alert-secondary", role: "status", style: element.styles, children: "File upload not available in this form." }));

package/dist/elements/TextElement.js

@@ -7,7 +7,7 @@ export function TextElement({ element }) {
     if (element.elementType === 'title') {
         const tag = String(properties.tag || 'h2');
         const TitleTag = tag;
-        return (_jsx(ElementColWrapper, { element: element, children: _jsx(TitleTag, { style: element.styles, children: text }) }));
+        return (_jsx(ElementColWrapper, { element: element, children: _jsx(TitleTag, { style: Object.assign({ margin: 0 }, element.styles), children: text }) }));
     }
     return (_jsx(ElementColWrapper, { element: element, children: _jsx("div", { dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(text) }, style: element.styles }) }));
 }

package/dist/factories/ButtonActionFactory.d.ts

@@ -1,10 +1,9 @@
-import { type EmailServiceConfig } from '../services/EmailService.js';
+import { type EmailServiceConfig, type EmailSendOptions } from '../services/EmailService.js';
 import type { FormFieldsType } from '../types/FormFieldsType.js';
-import type { MailBodyType } from '../types/MailBodyType.js';
 declare class ButtonActionFactory {
     private emailService;
     configureEmail(config: EmailServiceConfig): void;
-    build(actionId: number, data: FormFieldsType[]): Promise<MailBodyType | boolean>;
+    build(actionId: number, data: FormFieldsType[], options?: EmailSendOptions): Promise<boolean>;
 }
 export declare const buttonActionFactory: ButtonActionFactory;
-export type { EmailServiceConfig } from '../services/EmailService.js';
+export type { EmailServiceConfig, EmailSendOptions } from '../services/EmailService.js';

package/dist/factories/ButtonActionFactory.js

@@ -7,13 +7,13 @@ class ButtonActionFactory {
     configureEmail(config) {
         this.emailService = new EmailService(config);
     }
-    async build(actionId, data) {
+    async build(actionId, data, options) {
         switch (actionId) {
             case ButtonActionEnum.SendMail: {
                 if (!this.emailService) {
                     throw new Error('EmailService not configured. Call configureEmail() before using SendMail action.');
                 }
-                return this.emailService.sendMail(data);
+                return this.emailService.sendMail(data, options);
             }
             default:
                 throw new Error('Invalid button action: ' + actionId);

package/dist/factories/ComponentFactory.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ComponentTypeEnum } from '../constants/ComponentEnum.js';
 import { TextComponent } from '../components/TextComponent.js';
+import { ImageComponent } from '../components/ImageComponent.js';
 import { ListComponent } from '../components/ListComponent.js';
-import { CarouselComponent } from '../components/CarouselComponent.js';
 import { FormComponent } from '../components/FormComponent.js';
 import { SliderComponent } from '../components/SliderComponent.js';
 import { CardComponent } from '../components/CardComponent.js';
 import { MapComponent } from '../components/MapComponent.js';
+import { ButtonsComponent } from '../components/ButtonsComponent.js';
 export class ComponentFactory {
     build(component, editionMode = false) {
         switch (component.componentType) {
@@ -14,6 +15,8 @@ export class ComponentFactory {
             case ComponentTypeEnum.TextWithImage:
             case ComponentTypeEnum.HeroBanner:
                 return _jsx(TextComponent, { component: component }, component.id);
+            case ComponentTypeEnum.Image:
+                return _jsx(ImageComponent, { component: component }, component.id);
             case ComponentTypeEnum.List:
                 return _jsx(ListComponent, { component: component }, component.id);
             case ComponentTypeEnum.Slider:
@@ -25,10 +28,10 @@ export class ComponentFactory {
             case ComponentTypeEnum.Card:
             case ComponentTypeEnum.Faq:
                 return _jsx(CardComponent, { component: component }, component.id);
-            case ComponentTypeEnum.Image:
-                return _jsx(CarouselComponent, { component: component }, component.id);
             case ComponentTypeEnum.Map:
                 return _jsx(MapComponent, { component: component }, component.id);
+            case ComponentTypeEnum.Buttons:
+                return _jsx(ButtonsComponent, { component: component }, component.id);
             default:
                 throw new Error('Invalid component type: ' + component.componentType);
         }

package/dist/index.d.ts

@@ -10,14 +10,17 @@ export type { PropertiesType } from './types/PropertiesType.js';
 export type { StylesType } from './types/StylesType.js';
 export { Header } from './layouts/Header.js';
 export { Footer } from './layouts/Footer.js';
-export { SiteLayout } from './layouts/SiteLayout.js';
+export { SiteLayout, type EmailApiConfig } from './layouts/SiteLayout.js';
 export { PageBuilder } from './builders/PageBuilder.js';
 export { SectionRenderer } from './renderers/SectionRenderer.js';
 export { LoadingComponent } from './components/LoadingComponent.js';
 export { ComponentFactory } from './factories/ComponentFactory.js';
 export { ElementFactory } from './factories/ElementFactory.js';
+export { iconMap } from './elements/IconMap.js';
 export { ComponentTypeEnum } from './constants/ComponentEnum.js';
 export { ElementTypeEnum } from './constants/ElementEnum.js';
+export { ButtonActionEnum } from './constants/ButtonActionEnum.js';
 export { analyticsService } from './services/AnalyticsService.js';
 export { buttonActionFactory } from './factories/ButtonActionFactory.js';
-export type { EmailServiceConfig } from './services/EmailService.js';
+export type { EmailServiceConfig, EmailSendOptions } from './services/EmailService.js';
+export type { EmailSettingsType } from './types/EmailSettingsType.js';

package/dist/index.js

@@ -6,7 +6,9 @@ export { SectionRenderer } from './renderers/SectionRenderer.js';
 export { LoadingComponent } from './components/LoadingComponent.js';
 export { ComponentFactory } from './factories/ComponentFactory.js';
 export { ElementFactory } from './factories/ElementFactory.js';
+export { iconMap } from './elements/IconMap.js';
 export { ComponentTypeEnum } from './constants/ComponentEnum.js';
 export { ElementTypeEnum } from './constants/ElementEnum.js';
+export { ButtonActionEnum } from './constants/ButtonActionEnum.js';
 export { analyticsService } from './services/AnalyticsService.js';
 export { buttonActionFactory } from './factories/ButtonActionFactory.js';

package/dist/layouts/Footer.js

@@ -7,5 +7,5 @@ export function Footer({ website }) {
     const social = (_a = website.properties) === null || _a === void 0 ? void 0 : _a.social;
     const footer = website.footer.properties;
     const styles = website.footer.styles;
-    return (_jsx(Container, { fluid: styles.fluid || undefined, style: { backgroundColor: styles.backgroundColor }, children: _jsxs(Row, { id: 'footer', style: styles, children: [_jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex justify-content-center", style: { marginBottom: '30px' }, children: social && (_jsx(SocialIconsComponent, { social: social })) }), _jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex flex-column align-items-center", dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text1) } }), _jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex flex-column align-items-center", dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text2) } }), _jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex justify-content-center", dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text3) } }), _jsxs(Col, { xs: 12, sm: 12, md: 12, lg: 12, children: [_jsx("hr", { className: "footer-divider" }), _jsxs("p", { className: "text-center mb-0", children: ["\u00A9 ", new Date().getFullYear(), " ", website.name] })] })] }) }));
+    return (_jsx(Container, { fluid: styles.fluid || undefined, style: { backgroundColor: styles.backgroundColor }, children: _jsxs(Row, { id: 'footer', style: styles, children: [_jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex justify-content-center", style: { marginBottom: '30px' }, children: social && (_jsx(SocialIconsComponent, { social: social, color: styles.socialIconColor || styles.color })) }), _jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex flex-column align-items-center", dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text1) } }), _jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex flex-column align-items-center", dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text2) } }), _jsx(Col, { xs: 12, sm: 12, md: 12, lg: 12, className: "d-flex justify-content-center", dangerouslySetInnerHTML: { __html: DOMPurify.sanitize(footer.text3) } }), _jsxs(Col, { xs: 12, sm: 12, md: 12, lg: 12, children: [_jsx("hr", { className: "footer-divider" }), _jsxs("p", { className: "text-center mb-0", children: ["\u00A9 ", new Date().getFullYear(), " ", website.name] })] })] }) }));
 }

package/dist/layouts/Header.js

@@ -5,11 +5,8 @@ import { Container, Navbar, Nav } from 'react-bootstrap';
 export function Header({ website, imageBaseUrl }) {
     const headerProperties = website.header.properties;
     const headerStyles = website.header.styles;
-    const domain = (website.domain || '').replaceAll('.', '');
     const location = useLocation();
-    const menuPages = useMemo(() => (website.pages || [])
-        .filter((p) => p.menu === true)
-        .sort((a, b) => (a.menuOrder || 0) - (b.menuOrder || 0)), [website.pages]);
+    const menuPages = useMemo(() => (website.pages || []).filter((p) => p.menu === true).sort((a, b) => (a.menuOrder || 0) - (b.menuOrder || 0)), [website.pages]);
     const isActive = useCallback((path) => {
         const currentPath = location.pathname;
         if (path === '/')
@@ -17,19 +14,38 @@ export function Header({ website, imageBaseUrl }) {
         return currentPath === path || currentPath.startsWith(path + '/');
     }, [location.pathname]);
     const showMenu = headerProperties.showMenu !== false && menuPages.length > 0;
-    const logoUrl = useMemo(() => imageBaseUrl
-        ? `${imageBaseUrl.replace(/\/+$/, '')}/${domain}/${website.logo}`
-        : `https://noisdev-website-images.s3.sa-east-1.amazonaws.com/${domain}/${website.logo}`, [imageBaseUrl, domain, website.logo]);
-    return (_jsx(Navbar, { expand: "lg", collapseOnSelect: true, className: "py-3", style: { backgroundColor: headerStyles.backgroundColor || undefined, width: '100%' }, children: _jsxs(Container, { fluid: headerStyles.fluid || undefined, children: [headerProperties.showLogo && (_jsx(Navbar.Brand, { style: { marginRight: showMenu ? 'auto' : 0, padding: 0 }, children: _jsx("img", { src: logoUrl, width: "200", className: "d-inline-block align-top", alt: "Logo" }) })), showMenu && (_jsxs(_Fragment, { children: [_jsx(Navbar.Toggle, { "aria-controls": "header-navbar-nav" }), _jsx(Navbar.Collapse, { id: "header-navbar-nav", children: _jsx(Nav, { className: `mx-auto ${headerProperties.showLogo ? '' : 'w-100 justify-content-center'}`, children: menuPages.map((p) => {
+    const logoUrl = useMemo(() => (imageBaseUrl && website.logo ? `${imageBaseUrl.replace(/\/+$/, '')}/${website.logo}` : undefined), [imageBaseUrl, website.logo]);
+    const logoAlign = headerProperties.logoAlign || 'center';
+    const menuLinkColor = headerStyles.menuLinkColor || headerStyles.color || undefined;
+    const menuActiveLinkColor = headerStyles.menuActiveLinkColor || headerStyles.menuLinkColor || headerStyles.color || undefined;
+    const brandStyle = { padding: 0 };
+    if (showMenu) {
+        if (logoAlign === 'right')
+            brandStyle.marginLeft = 'auto';
+        else if (logoAlign === 'center') {
+            brandStyle.marginRight = 'auto';
+            brandStyle.marginLeft = 'auto';
+        }
+        else {
+            brandStyle.marginRight = 'auto';
+        }
+    }
+    else if (logoAlign === 'center') {
+        brandStyle.margin = '0 auto';
+    }
+    else if (logoAlign === 'right') {
+        brandStyle.marginLeft = 'auto';
+    }
+    return (_jsx(Navbar, { expand: "lg", collapseOnSelect: true, className: "py-3", style: { backgroundColor: headerStyles.backgroundColor || undefined, color: headerStyles.color || undefined, width: '100%' }, children: _jsxs(Container, { fluid: headerStyles.fluid || undefined, style: { textAlign: headerStyles.textAlign || undefined }, children: [headerProperties.showLogo && logoUrl && (_jsx(Navbar.Brand, { style: brandStyle, children: _jsx("img", { src: logoUrl, width: headerProperties.logoWidth || 200, className: "d-inline-block align-top", alt: "Logo" }) })), showMenu && (_jsxs(_Fragment, { children: [_jsx(Navbar.Toggle, { "aria-controls": "header-navbar-nav" }), _jsx(Navbar.Collapse, { id: "header-navbar-nav", children: _jsx(Nav, { className: `mx-auto ${headerProperties.showLogo ? '' : 'w-100 justify-content-center'}`, children: menuPages.map((p) => {
                                     const active = isActive(p.path);
                                     return (_jsx(Nav.Link, { href: p.path, style: {
-                                            color: active ? '#c0ad5b' : '#a4a4a4',
-                                            fontSize: '0.9rem',
-                                            letterSpacing: '0.05em',
-                                            textTransform: 'uppercase',
+                                            color: active ? menuActiveLinkColor : menuLinkColor,
+                                            fontSize: headerStyles.menuFontSize || undefined,
+                                            letterSpacing: headerStyles.menuLetterSpacing || undefined,
+                                            textTransform: headerStyles.menuTextTransform || undefined,
                                             margin: '0 12px',
                                             paddingBottom: '4px',
-                                            borderBottom: active ? '2px solid #c0ad5b' : '2px solid transparent',
+                                            borderBottom: active && menuActiveLinkColor ? `2px solid ${menuActiveLinkColor}` : '2px solid transparent',
                                             transition: 'color 0.3s, border-color 0.3s',
                                         }, children: p.title }, p.id));
                                 }) }) })] }))] }) }));

package/dist/layouts/SiteLayout.d.ts

@@ -1,5 +1,12 @@
 import type { WebsiteType } from '../types/WebsiteType.js';
-export declare function SiteLayout({ website, imageBaseUrl }: {
+export interface EmailApiConfig {
+    apiUrl?: string;
+    authToken?: string;
+    sender?: string;
+    senderName?: string;
+}
+export declare function SiteLayout({ website, imageBaseUrl, emailApi }: {
     readonly website: WebsiteType;
     readonly imageBaseUrl?: string;
+    readonly emailApi?: EmailApiConfig;
 }): import("react").JSX.Element;

package/dist/layouts/SiteLayout.js

@@ -1,7 +1,39 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect } from 'react';
 import { Outlet } from 'react-router-dom';
+import { Helmet } from 'react-helmet-async';
 import { Header } from './Header.js';
 import { Footer } from './Footer.js';
-export function SiteLayout({ website, imageBaseUrl }) {
-    return (_jsxs("div", { id: "site-layout", style: { backgroundColor: website.styles.backgroundColor, color: website.styles.color }, children: [_jsx(Header, { website: website, imageBaseUrl: imageBaseUrl }), _jsx(Outlet, {}), _jsx(Footer, { website: website })] }));
+import { buildFontFamily, buildGoogleFontsHref } from '../utils/fonts.js';
+import { buttonActionFactory } from '../factories/ButtonActionFactory.js';
+export function SiteLayout({ website, imageBaseUrl, emailApi }) {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const fontFamily = buildFontFamily((_a = website.styles) === null || _a === void 0 ? void 0 : _a.fontFamily);
+    const fontHref = buildGoogleFontsHref((_b = website.styles) === null || _b === void 0 ? void 0 : _b.fontFamily);
+    useEffect(() => {
+        var _a, _b, _c, _d, _e, _f;
+        if (!(emailApi === null || emailApi === void 0 ? void 0 : emailApi.apiUrl) || !emailApi.authToken)
+            return;
+        buttonActionFactory.configureEmail({
+            apiUrl: emailApi.apiUrl,
+            authToken: emailApi.authToken,
+            websiteId: website.id,
+            sender: emailApi.sender || 'contato@pixelbuild.com.br',
+            senderName: emailApi.senderName || website.name,
+            defaultRecipient: (_b = (_a = website.properties) === null || _a === void 0 ? void 0 : _a.email) === null || _b === void 0 ? void 0 : _b.recipient,
+            defaultRecipientName: (_d = (_c = website.properties) === null || _c === void 0 ? void 0 : _c.email) === null || _d === void 0 ? void 0 : _d.recipientName,
+            defaultSubject: (_f = (_e = website.properties) === null || _e === void 0 ? void 0 : _e.email) === null || _f === void 0 ? void 0 : _f.subject
+        });
+    }, [
+        emailApi === null || emailApi === void 0 ? void 0 : emailApi.apiUrl,
+        emailApi === null || emailApi === void 0 ? void 0 : emailApi.authToken,
+        emailApi === null || emailApi === void 0 ? void 0 : emailApi.sender,
+        emailApi === null || emailApi === void 0 ? void 0 : emailApi.senderName,
+        website.id,
+        website.name,
+        (_d = (_c = website.properties) === null || _c === void 0 ? void 0 : _c.email) === null || _d === void 0 ? void 0 : _d.recipient,
+        (_f = (_e = website.properties) === null || _e === void 0 ? void 0 : _e.email) === null || _f === void 0 ? void 0 : _f.recipientName,
+        (_h = (_g = website.properties) === null || _g === void 0 ? void 0 : _g.email) === null || _h === void 0 ? void 0 : _h.subject
+    ]);
+    return (_jsxs(_Fragment, { children: [fontHref && (_jsxs(Helmet, { children: [_jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "" }), _jsx("link", { href: fontHref, rel: "stylesheet" })] })), _jsxs("div", { id: "site-layout", style: { backgroundColor: website.styles.backgroundColor, color: website.styles.color, fontFamily }, children: [_jsx(Header, { website: website, imageBaseUrl: imageBaseUrl }), _jsx(Outlet, {}), _jsx(Footer, { website: website })] })] }));
 }

package/dist/renderers/SectionRenderer.js

@@ -1,8 +1,9 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { memo, useMemo } from 'react';
 import { Container, Row, Col } from 'react-bootstrap';
 import { ComponentFactory } from '../factories/ComponentFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
+import { buildResponsiveCss } from '../utils/responsiveStyles.js';
 const componentFactory = new ComponentFactory();
 function colWidthValue(width, offset) {
     if (width === undefined && offset === undefined)
@@ -15,6 +16,20 @@ function colWidthValue(width, offset) {
 const ColumnContent = memo(function ColumnContent({ column, editionMode }) {
     const components = useMemo(() => orderBySort(column.components.filter((c) => c.enabled)), [column.components]);
     const childSections = useMemo(() => orderBySort(column.childSections), [column.childSections]);
+    if (editionMode && components.length === 0 && childSections.length === 0) {
+        return (_jsxs("div", { "data-pixelbuild-empty-column": column.id, style: {
+                minHeight: 80,
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 6,
+                border: '1.5px dashed #c4d0dc',
+                color: '#94a3b8',
+                fontSize: 13,
+                cursor: 'pointer',
+                textAlign: 'center',
+            }, children: [_jsx("span", { style: { fontSize: 18, lineHeight: 1 }, children: "+" }), "Adicionar componente"] }));
+    }
     return (_jsxs(_Fragment, { children: [components.map((component) => componentFactory.build(component, editionMode)), childSections.map((childSection) => (_jsx(SectionContent, { section: childSection, editionMode: editionMode }, childSection.id)))] }));
 });
 function gridClass(id) {
@@ -22,9 +37,10 @@ function gridClass(id) {
 }
 const GridRenderer = memo(function GridRenderer({ section, editionMode }) {
     const grid = gridClass(section.id);
-    const columns = useMemo(() => section.columns.filter((col) => col.components.some((c) => c.enabled) || col.childSections.length > 0), [section.columns]);
+    const columns = section.columns;
     const css = useMemo(() => {
-        const rules = columns.map((column) => {
+        const rules = columns
+            .map((column) => {
             const properties = column.properties || {};
             const row = Math.max(0, Number(properties.row) || 0);
             const rowSpan = Math.max(1, Number(properties.rowSpan) || 1);
@@ -37,10 +53,11 @@ const GridRenderer = memo(function GridRenderer({ section, editionMode }) {
                 `@media (min-width:576px){.${grid} .${columnClass}{grid-column:span ${sm}}}`,
                 `@media (min-width:768px){.${grid} .${columnClass}{grid-column:span ${md};grid-row:${row + 1}/span ${rowSpan}}}`
             ].join('');
-        }).join('');
+        })
+            .join('');
         return `.${grid}{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem}${rules}`;
     }, [grid, columns]);
-    return (_jsxs(_Fragment, { children: [_jsx("style", { children: css }), _jsx("div", { id: `section-${section.id}`, className: grid, style: section.sectionType === 'row' ? section.styles : undefined, children: columns.map((column) => (_jsx("div", { id: `column-${column.id}`, className: gridClass(column.id), style: column.styles, children: _jsx(ColumnContent, { column: column, editionMode: editionMode }) }, column.id))) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: css }), _jsx("div", { id: `section-${section.id}`, "data-pb-section": section.sectionType === 'row' ? section.id : undefined, className: grid, style: section.sectionType === 'row' ? section.styles : undefined, children: columns.map((column) => (_jsx("div", { id: `column-${column.id}`, className: gridClass(column.id), style: column.styles, children: _jsx(ColumnContent, { column: column, editionMode: editionMode }) }, column.id))) })] }));
 });
 const SectionContent = memo(function SectionContent({ section, editionMode }) {
     const usesGrid = useMemo(() => section.columns.some((column) => { var _a, _b; return ((_a = column.properties) === null || _a === void 0 ? void 0 : _a.row) !== undefined || Number((_b = column.properties) === null || _b === void 0 ? void 0 : _b.rowSpan) > 1; }), [section.columns]);
@@ -48,13 +65,13 @@ const SectionContent = memo(function SectionContent({ section, editionMode }) {
         if (usesGrid) {
             return _jsx(GridRenderer, { section: section, editionMode: editionMode });
         }
-        return (_jsx(Row, { id: `section-${section.id}`, style: section.sectionType === 'row' ? section.styles : undefined, children: section.columns.map((column) => (_jsx(ColumnRenderer, { column: column, editionMode: editionMode }, column.id))) }));
+        return (_jsx(Row, { id: `section-${section.id}`, "data-pb-section": section.sectionType === 'row' ? section.id : undefined, style: section.sectionType === 'row' ? section.styles : undefined, children: section.columns.map((column) => (_jsx(ColumnRenderer, { column: column, editionMode: editionMode }, column.id))) }));
     }, [usesGrid, section, editionMode]);
     if (section.sectionType === 'container-fluid') {
-        return _jsx(Container, { fluid: true, style: section.styles, children: content });
+        return (_jsx(Container, { fluid: true, "data-pb-section": section.id, style: section.styles, children: content }));
     }
     if (section.sectionType === 'container') {
-        return _jsx(Container, { style: section.styles, children: content });
+        return (_jsx(Container, { "data-pb-section": section.id, style: section.styles, children: content }));
     }
     return _jsx(Container, { fluid: true, children: content });
 });
@@ -66,6 +83,6 @@ const SectionRenderer = memo(function SectionRenderer({ sections, editionMode =
     if (sorted.length === 0) {
         return null;
     }
-    return (_jsx(_Fragment, { children: sorted.map((section) => (_jsx(SectionContent, { section: section, editionMode: editionMode }, section.id))) }));
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: buildResponsiveCss(sorted) }), sorted.map((section) => (_jsx(SectionContent, { section: section, editionMode: editionMode }, section.id)))] }));
 });
 export { SectionRenderer };