lib-pixelbuild 0.1.4 → 0.2.0

package/dist/components/SliderComponent.js

@@ -1,14 +1,3 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { useKeenSlider } from 'keen-slider/react.js';
@@ -17,8 +6,8 @@ import { orderBySort } from '../utils/orderBySort.js';
 import 'keen-slider/keen-slider.min.css';
 const elementFactory = new ElementFactory();
 function cleanComponentStyles(styles) {
-    const { minHeight: _m, display: _d, alignItems: _a, justifyContent: _j, flexDirection: _f } = styles, rest = __rest(styles, ["minHeight", "display", "alignItems", "justifyContent", "flexDirection"]);
-    return rest;
+    const exclude = new Set(['minHeight', 'display', 'alignItems', 'justifyContent', 'flexDirection']);
+    return Object.fromEntries(Object.entries(styles).filter(([key]) => !exclude.has(key)));
 }
 function StaticSliderComponent({ component }) {
     const firstSlide = orderBySort(component.elements)[0];
@@ -46,7 +35,7 @@ function InteractiveSliderComponent({ component }) {
         if (!properties.autoplay || slides.length < 2)
             return;
         const interval = Number(properties.interval) > 0 ? Number(properties.interval) : 5000;
-        const timer = window.setInterval(() => { var _b; return (_b = instanceRef.current) === null || _b === void 0 ? void 0 : _b.moveToIdx(instanceRef.current.track.details.rel + 1); }, interval);
+        const timer = window.setInterval(() => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.moveToIdx(instanceRef.current.track.details.rel + 1); }, interval);
         return () => window.clearInterval(timer);
     }, [instanceRef, properties.autoplay, properties.interval, slides.length]);
     const fixedHeight = Number(properties.height) > 0 ? Number(properties.height) : 0;
@@ -56,7 +45,62 @@ function InteractiveSliderComponent({ component }) {
     return (_jsxs("div", { style: Object.assign({ position: 'relative' }, cleanComponentStyles(component.styles)), children: [_jsx("div", { ref: ref, className: "keen-slider", style: fixedHeight ? { height: fixedHeight } : undefined, children: slides.map((element) => (_jsx("div", { className: "keen-slider__slide", style: { overflow: 'hidden' }, children: elementFactory.build(Object.assign(Object.assign({}, element), { styles: element.elementType === 'image' || element.elementType === 'video'
                             ? fixedHeight
                                 ? Object.assign({ width: '100%', height: '100%', objectFit: 'cover' }, element.styles) : Object.assign({ width: '100%' }, element.styles)
-                            : element.styles })) }, element.id))) }), showArrows && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": "Slide anterior", onClick: () => { var _b; return (_b = instanceRef.current) === null || _b === void 0 ? void 0 : _b.moveToIdx(instanceRef.current.track.details.rel - 1); }, style: { position: 'absolute', left: 0, top: '50%', transform: 'translateY(-50%)' }, children: '<' }), _jsx("button", { type: "button", "aria-label": "Proximo slide", onClick: () => { var _b; return (_b = instanceRef.current) === null || _b === void 0 ? void 0 : _b.moveToIdx(instanceRef.current.track.details.rel + 1); }, style: { position: 'absolute', right: 0, top: '50%', transform: 'translateY(-50%)' }, children: '>' })] })), showDots && (_jsx("div", { "aria-label": "Navegacao do slider", style: { display: 'flex', justifyContent: 'center', gap: 4 }, children: slides.map((element, index) => (_jsx("button", { type: "button", "aria-label": `Ir para o slide ${index + 1}`, "aria-current": currentSlide === index ? 'true' : undefined, onClick: () => { var _b; return (_b = instanceRef.current) === null || _b === void 0 ? void 0 : _b.moveToIdx(index); }, children: index + 1 }, element.id))) }))] }));
+                            : element.styles })) }, element.id))) }), showArrows && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", "aria-label": "Slide anterior", onClick: () => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.moveToIdx(instanceRef.current.track.details.rel - 1); }, style: {
+                            position: 'absolute',
+                            left: 8,
+                            top: '50%',
+                            transform: 'translateY(-50%)',
+                            zIndex: 10,
+                            width: 40,
+                            height: 40,
+                            borderRadius: '50%',
+                            border: 'none',
+                            background: 'rgba(0,0,0,0.45)',
+                            color: '#fff',
+                            fontSize: 18,
+                            fontWeight: 700,
+                            lineHeight: 1,
+                            cursor: 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            transition: 'background 0.2s',
+                        }, children: _jsx("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", children: _jsx("path", { d: "M8.5 1L1.5 8L8.5 15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }), _jsx("button", { type: "button", "aria-label": "Proximo slide", onClick: () => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.moveToIdx(instanceRef.current.track.details.rel + 1); }, style: {
+                            position: 'absolute',
+                            right: 8,
+                            top: '50%',
+                            transform: 'translateY(-50%)',
+                            zIndex: 10,
+                            width: 40,
+                            height: 40,
+                            borderRadius: '50%',
+                            border: 'none',
+                            background: 'rgba(0,0,0,0.45)',
+                            color: '#fff',
+                            fontSize: 18,
+                            fontWeight: 700,
+                            lineHeight: 1,
+                            cursor: 'pointer',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            transition: 'background 0.2s',
+                        }, children: _jsx("svg", { width: "10", height: "16", viewBox: "0 0 10 16", fill: "none", children: _jsx("path", { d: "M1.5 1L8.5 8L1.5 15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) })] })), showDots && (_jsx("div", { "aria-label": "Navegacao do slider", style: { display: 'flex', justifyContent: 'center', gap: 6, marginTop: 12 }, children: slides.map((element, index) => (_jsx("button", { type: "button", "aria-label": `Ir para o slide ${index + 1}`, "aria-current": currentSlide === index ? 'true' : undefined, onClick: () => { var _a; return (_a = instanceRef.current) === null || _a === void 0 ? void 0 : _a.moveToIdx(index); }, style: {
+                        width: 28,
+                        height: 28,
+                        borderRadius: '50%',
+                        border: 'none',
+                        background: currentSlide === index ? '#333' : 'rgba(0,0,0,0.15)',
+                        color: currentSlide === index ? '#fff' : '#666',
+                        fontSize: 12,
+                        fontWeight: 600,
+                        lineHeight: 1,
+                        cursor: 'pointer',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        transition: 'all 0.2s',
+                    }, children: index + 1 }, element.id))) }))] }));
 }
 export function SliderComponent({ component, editionMode = false }) {
     if (editionMode)

package/dist/components/SocialIconsComponent.js

@@ -15,5 +15,5 @@ export function SocialIconsComponent({ social }) {
     }
     if (all.length === 0)
         return null;
-    return (_jsx(Row, { children: all.map((element) => (_jsx(Col, { className: "text-center social-icons", style: { color: '#FFCC00' }, children: _jsx("a", { href: element.url, target: "_blank", rel: "noreferrer", "aria-label": element.description, children: _jsx(element.icon, {}) }) }, element.id))) }));
+    return (_jsx(Row, { children: all.map((element) => (_jsx(Col, { className: "text-center social-icons", style: { color: '#FFCC00' }, children: _jsx("a", { href: element.url, target: "_blank", rel: "noopener noreferrer", "aria-label": element.description, children: _jsx(element.icon, {}) }) }, element.id))) }));
 }

package/dist/components/TextComponent.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import type { ComponentType } from '../types/ComponentType.js';
-export declare function TextComponent({ component }: {
+declare const TextComponent: import("react").NamedExoticComponent<{
     readonly component: ComponentType;
-}): React.JSX.Element;
+}>;
+export { TextComponent };

package/dist/components/TextComponent.js

@@ -1,12 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import { memo, useMemo } from 'react';
 import { Row, Container } from 'react-bootstrap';
 import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
 const elementFactory = new ElementFactory();
-export function TextComponent({ component }) {
-    return (_jsx(Container, { style: component.styles, children: _jsx(Row, { id: "element-row", children: orderBySort(component.elements).map((element) => {
-                const e = elementFactory.build(element);
-                return React.cloneElement(e, { key: element.id });
-            }) }) }));
-}
+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)) }) }));
+});
+export { TextComponent };

package/dist/elements/AlertElement.js

@@ -3,20 +3,21 @@ import { useEffect } from 'react';
 import { Alert } from 'react-bootstrap';
 import { UseFormStore } from '../stores/UseFormStore.js';
 import { ElementColWrapper } from './ElementColWrapper.js';
+import { getString, getNumber, getBoolean } from '../utils/propertyUtils.js';
 export function AlertElement({ element, formId }) {
     const properties = element.properties;
-    const resolvedFormId = formId !== null && formId !== void 0 ? formId : properties.componentId;
+    const resolvedFormId = formId !== null && formId !== void 0 ? formId : getNumber(properties, 'componentId');
     const hidden = UseFormStore((state) => { var _a; return (_a = state.elements[element.id]) === null || _a === void 0 ? void 0 : _a.hidden; });
     const registerElement = UseFormStore((state) => state.registerElement);
     const unregisterElement = UseFormStore((state) => state.unregisterElement);
     useEffect(() => {
         registerElement(element.id, resolvedFormId, {
             type: 'alert',
-            hidden: Boolean(properties.startHidden)
+            hidden: getBoolean(properties, 'startHidden')
         });
         return () => unregisterElement(element.id);
     }, [element.id, properties.startHidden, registerElement, resolvedFormId, unregisterElement]);
     if (hidden)
         return null;
-    return (_jsx(ElementColWrapper, { element: element, children: _jsxs(Alert, { hidden: hidden, variant: String(properties.type || 'info'), style: element.styles, children: [_jsx(Alert.Heading, { children: String(properties.title || '') }), _jsx("p", { className: "mb-0", children: String(properties.message || '') })] }) }));
+    return (_jsx(ElementColWrapper, { element: element, children: _jsxs(Alert, { variant: getString(properties, 'type', 'info'), style: element.styles, children: [_jsx(Alert.Heading, { children: getString(properties, 'title') }), _jsx("p", { className: "mb-0", children: getString(properties, 'message') })] }) }));
 }

package/dist/elements/ButtonElement.js

@@ -3,11 +3,11 @@ import { useEffect } from 'react';
 import { Button, Spinner } from 'react-bootstrap';
 import { ElementColWrapper } from './ElementColWrapper.js';
 import { UseFormStore } from '../stores/UseFormStore.js';
-import { ButtonActionFactory } from '../factories/ButtonActionFactory.js';
+import { buttonActionFactory } from '../factories/ButtonActionFactory.js';
+import { getString, getNumber, getBoolean } from '../utils/propertyUtils.js';
 export function ButtonElement({ element, formId }) {
-    var _a;
     const properties = element.properties;
-    const resolvedFormId = formId !== null && formId !== void 0 ? formId : properties.componentId;
+    const resolvedFormId = formId !== null && formId !== void 0 ? formId : getNumber(properties, 'componentId');
     const hidden = UseFormStore((state) => { var _a; return (_a = state.elements[element.id]) === null || _a === void 0 ? void 0 : _a.hidden; });
     const loading = UseFormStore((state) => { var _a; return (_a = state.elements[element.id]) === null || _a === void 0 ? void 0 : _a.loading; });
     const showElement = UseFormStore((state) => state.showElement);
@@ -17,7 +17,7 @@ export function ButtonElement({ element, formId }) {
     useEffect(() => {
         registerElement(element.id, resolvedFormId, {
             type: 'button',
-            hidden: Boolean(properties.startHidden)
+            hidden: getBoolean(properties, 'startHidden')
         });
         return () => unregisterElement(element.id);
     }, [element.id, properties.startHidden, registerElement, resolvedFormId, unregisterElement]);
@@ -35,25 +35,27 @@ export function ButtonElement({ element, formId }) {
             if (hasErrors)
                 return false;
             UseFormStore.getState().setElementState(element.id, { loading: true });
-            if (properties.actionId) {
-                const buttonActionFactory = new ButtonActionFactory();
-                await buttonActionFactory.build(properties.actionId, formData);
+            const actionId = getNumber(properties, 'actionId');
+            if (actionId) {
+                await buttonActionFactory.build(actionId, formData);
             }
+            const loadingTime = (_a = getNumber(properties, 'loadingTime')) !== null && _a !== void 0 ? _a : 0;
             setTimeout(() => {
-                if (properties.hideOnClick)
+                if (getBoolean(properties, 'hideOnClick'))
                     hideElement(element.id);
-                if (properties.successMessageId)
-                    showElement(properties.successMessageId);
-                if (properties.successActionId)
-                    showElement(properties.successActionId);
+                const successMessageId = getNumber(properties, 'successMessageId');
+                const successActionId = getNumber(properties, 'successActionId');
+                if (successMessageId)
+                    showElement(successMessageId);
+                if (successActionId)
+                    showElement(successActionId);
                 UseFormStore.getState().setElementState(element.id, { loading: false });
-            }, (_a = properties.loadingTime) !== null && _a !== void 0 ? _a : 0);
+            }, loadingTime);
         }
     }
     if (hidden)
         return null;
-    return (_jsx(ElementColWrapper, { element: element, children: _jsx(Button, { as: properties.path ? 'a' : 'button', type: properties.type === 'button' || properties.type === 'submit' || properties.type === 'reset'
-                ? properties.type : undefined, variant: String(properties.variant || (properties.type === 'button' || properties.type === 'submit' || properties.type === 'reset'
-                ? 'primary'
-                : properties.type || 'primary')), href: String(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" }) }), ' ' + (String((_a = properties.message) !== null && _a !== void 0 ? _a : ''))] })) : (String(properties.text || properties.title || '')) }) }));
+    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')) }) }));
 }

package/dist/elements/IconElement.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
 import type { ElementType } from '../types/ElementType.js';
 export declare function IconElement({ element }: {
     readonly element: ElementType;
-}): React.JSX.Element;
+}): import("react").JSX.Element;

package/dist/elements/IconElement.js

@@ -1,16 +1,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-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 { Suspense, useMemo } from 'react';
+import { iconMap } from './IconMap.js';
 import { ElementColWrapper } from './ElementColWrapper.js';
-const icons = {
-    FaArrowRight, FaBars, FaCalendar, FaCheck, FaChevronLeft, FaChevronRight, FaClock,
-    FaEnvelope, FaFacebookF, FaGlobe, FaHeart, FaHome, FaInfoCircle, FaInstagram, FaLink,
-    FaMapMarkerAlt, FaPhone, FaQuoteLeft, FaSearch, FaShoppingCart, FaStar, FaTimes,
-    FaTwitter, FaUser, FaWhatsapp, FaYoutube,
-};
+function FallbackIcon({ name }) {
+    const Icon = iconMap[name] || iconMap.FaQuestionCircle;
+    return _jsx(Icon, { size: "1em", "aria-label": name || 'Icon' });
+}
 export function IconElement({ element }) {
     var _a;
     const name = String(element.properties.name || '');
-    const Icon = icons[name] || FaQuestionCircle;
     const iconSize = ((_a = element.styles) === null || _a === void 0 ? void 0 : _a.fontSize) || '1.25rem';
-    return (_jsx(ElementColWrapper, { element: element, children: _jsx("span", { style: { fontSize: iconSize, display: 'inline-flex' }, children: _jsx(Icon, { size: "1em", style: element.styles, "aria-label": name || 'Ícone' }) }) }));
+    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' }) }) }) }));
 }

package/dist/elements/IconMap.d.ts

@@ -0,0 +1,2 @@
+import type { IconType } from 'react-icons';
+export declare const iconMap: Record<string, IconType>;

package/dist/elements/IconMap.js

@@ -0,0 +1,30 @@
+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';
+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,
+};

package/dist/elements/InputElement.js

@@ -5,9 +5,10 @@ import { IMaskInput } from 'react-imask';
 import { ElementColWrapper } from './ElementColWrapper.js';
 import { UseFormStore } from '../stores/UseFormStore.js';
 import { ElementTypeEnum } from '../constants/ElementEnum.js';
+import { getString, getNumber, getBoolean } from '../utils/propertyUtils.js';
 export function InputElement({ element, formId }) {
     const properties = element.properties;
-    const resolvedFormId = formId !== null && formId !== void 0 ? formId : properties.componentId;
+    const resolvedFormId = formId !== null && formId !== void 0 ? formId : getNumber(properties, 'componentId');
     const hidden = UseFormStore((state) => { var _a; return (_a = state.elements[element.id]) === null || _a === void 0 ? void 0 : _a.hidden; });
     const error = UseFormStore((state) => { var _a; return (_a = state.elements[element.id]) === null || _a === void 0 ? void 0 : _a.error; });
     const errorMessage = UseFormStore((state) => { var _a; return (_a = state.elements[element.id]) === null || _a === void 0 ? void 0 : _a.errorMessage; });
@@ -15,12 +16,12 @@ export function InputElement({ element, formId }) {
     const unregisterElement = UseFormStore((state) => state.unregisterElement);
     const validateFormData = UseFormStore((state) => state.validateFormData);
     useEffect(() => {
-        var _a, _b, _c;
+        var _a;
         registerElement(element.id, resolvedFormId, {
-            name: String(properties.name || ''),
+            name: getString(properties, 'name'),
             type: element.elementType,
-            value: properties.checked ? String((_a = properties.value) !== null && _a !== void 0 ? _a : 'on') : String((_b = properties.value) !== null && _b !== void 0 ? _b : ''),
-            inputValidateId: (_c = properties.inputValidateId) !== null && _c !== void 0 ? _c : null
+            value: getBoolean(properties, 'checked') ? getString(properties, 'value', 'on') : getString(properties, 'value'),
+            inputValidateId: (_a = getNumber(properties, 'inputValidateId')) !== null && _a !== void 0 ? _a : null
         });
         return () => unregisterElement(element.id);
     }, [
@@ -37,10 +38,10 @@ export function InputElement({ element, formId }) {
     if (hidden)
         return null;
     const hasMask = element.elementType === ElementTypeEnum.Input && Boolean(properties.mask);
-    const label = String(properties.label || properties.title || '');
-    const name = String(properties.name || '');
+    const label = getString(properties, 'label') || getString(properties, 'title');
+    const name = getString(properties, 'name');
     const controlId = name || `element-${element.id}`;
-    const inputValidateId = properties.inputValidateId;
+    const inputValidateId = getNumber(properties, 'inputValidateId');
     const options = Array.isArray(properties.options) ? properties.options : [];
     const handleAccept = (value) => {
         UseFormStore.getState().setElementState(element.id, { value });
@@ -65,12 +66,11 @@ export function InputElement({ element, formId }) {
         store.setElementState(element.id, { value: checked ? value : '' });
     };
     const renderControl = () => {
-        var _a, _b, _c, _d, _e;
         if (element.elementType === ElementTypeEnum.Textarea) {
-            return (_jsx("textarea", { defaultValue: String((_a = properties.value) !== null && _a !== void 0 ? _a : ''), rows: Number(properties.rows) || 4, onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: Boolean(properties.required), name: name, placeholder: String(properties.placeholder || ''), className: `form-control${error ? ' is-invalid' : ''}`, style: element.styles }));
+            return (_jsx("textarea", { defaultValue: getString(properties, 'value'), rows: getNumber(properties, 'rows') || 4, onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, placeholder: getString(properties, 'placeholder'), className: `form-control${error ? ' is-invalid' : ''}`, style: element.styles }));
         }
         if (element.elementType === ElementTypeEnum.Select) {
-            return (_jsx("select", { defaultValue: String((_b = properties.value) !== null && _b !== void 0 ? _b : ''), onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: Boolean(properties.required), name: name, className: `form-select${error ? ' is-invalid' : ''}`, style: element.styles, children: options.map((option, index) => {
+            return (_jsx("select", { defaultValue: getString(properties, 'value'), onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, className: `form-select${error ? ' is-invalid' : ''}`, style: element.styles, children: options.map((option, index) => {
                     var _a, _b, _c, _d;
                     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);
@@ -79,16 +79,16 @@ export function InputElement({ element, formId }) {
                 }) }));
         }
         if (element.elementType === ElementTypeEnum.Checkbox || element.elementType === ElementTypeEnum.Radio) {
-            const value = String((_c = properties.value) !== null && _c !== void 0 ? _c : 'on');
-            return (_jsxs("div", { className: "form-check", children: [_jsx("input", { id: controlId, type: element.elementType, defaultChecked: Boolean(properties.checked), value: value, onChange: (e) => setCheckedValue(e.target.checked, value), onBlur: handleBlur, required: Boolean(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 })] }));
+            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 })] }));
         }
         if (element.elementType === ElementTypeEnum.File) {
-            return (_jsx("div", { className: "alert alert-secondary", role: "status", style: element.styles, children: "Upload de arquivos n\u00E3o dispon\u00EDvel neste formul\u00E1rio." }));
+            return (_jsx("div", { className: "alert alert-secondary", role: "status", style: element.styles, children: "File upload not available in this form." }));
         }
         if (hasMask) {
-            return (_jsx(IMaskInput, { mask: String(properties.mask), defaultValue: String((_d = properties.value) !== null && _d !== void 0 ? _d : ''), onAccept: handleAccept, onBlur: handleBlur, required: Boolean(properties.required), name: name, placeholder: String(properties.placeholder || ''), className: `form-control${error ? ' is-invalid' : ''}`, style: element.styles }));
+            return (_jsx(IMaskInput, { mask: getString(properties, 'mask'), defaultValue: getString(properties, 'value'), onAccept: handleAccept, onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, placeholder: getString(properties, 'placeholder'), className: `form-control${error ? ' is-invalid' : ''}`, style: element.styles }));
         }
-        return (_jsx("input", { type: String(properties.type || 'text'), defaultValue: String((_e = properties.value) !== null && _e !== void 0 ? _e : ''), onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: Boolean(properties.required), name: name, placeholder: String(properties.placeholder || ''), className: `form-control${error ? ' is-invalid' : ''}`, style: element.styles }));
+        return (_jsx("input", { type: getString(properties, 'type', 'text'), defaultValue: getString(properties, 'value'), onChange: (e) => setValue(e.target.value), onBlur: handleBlur, required: getBoolean(properties, 'required'), name: name, placeholder: getString(properties, 'placeholder'), className: `form-control${error ? ' is-invalid' : ''}`, style: element.styles }));
     };
     return (_jsx(ElementColWrapper, { element: element, children: _jsxs(Form.Group, { className: "mb-3", controlId: controlId, children: [label && element.elementType !== ElementTypeEnum.Checkbox && element.elementType !== ElementTypeEnum.Radio && (_jsx(Form.Label, { children: label })), renderControl(), error && (_jsx("div", { className: "invalid-feedback", style: { display: 'block' }, children: errorMessage }))] }) }));
 }

package/dist/factories/ButtonActionFactory.d.ts

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

package/dist/factories/ButtonActionFactory.js

@@ -1,13 +1,23 @@
 import { EmailService } from '../services/EmailService.js';
 import { ButtonActionEnum } from '../constants/ButtonActionEnum.js';
-export class ButtonActionFactory {
+class ButtonActionFactory {
+    constructor() {
+        this.emailService = null;
+    }
+    configureEmail(config) {
+        this.emailService = new EmailService(config);
+    }
     async build(actionId, data) {
-        const emailService = new EmailService('https://api.example.com');
         switch (actionId) {
-            case ButtonActionEnum.SendMail:
-                return emailService.sendMail(data);
+            case ButtonActionEnum.SendMail: {
+                if (!this.emailService) {
+                    throw new Error('EmailService not configured. Call configureEmail() before using SendMail action.');
+                }
+                return this.emailService.sendMail(data);
+            }
             default:
                 throw new Error('Invalid button action: ' + actionId);
         }
     }
 }
+export const buttonActionFactory = new ButtonActionFactory();

package/dist/index.d.ts

@@ -8,8 +8,6 @@ export type { ComponentType } from './types/ComponentType.js';
 export type { ElementType } from './types/ElementType.js';
 export type { PropertiesType } from './types/PropertiesType.js';
 export type { StylesType } from './types/StylesType.js';
-export type { UserType } from './types/UserType.js';
-export type { AuthenticateResponseType } from './types/AuthenticateResponseType.js';
 export { Header } from './layouts/Header.js';
 export { Footer } from './layouts/Footer.js';
 export { SiteLayout } from './layouts/SiteLayout.js';
@@ -20,8 +18,6 @@ export { ComponentFactory } from './factories/ComponentFactory.js';
 export { ElementFactory } from './factories/ElementFactory.js';
 export { ComponentTypeEnum } from './constants/ComponentEnum.js';
 export { ElementTypeEnum } from './constants/ElementEnum.js';
-export { ApiService } from './services/ApiService.js';
 export { analyticsService } from './services/AnalyticsService.js';
-export { CacheService } from './services/CacheService.js';
-export { ConstructorService } from './services/ConstructorService.js';
-export { EmailService } from './services/EmailService.js';
+export { buttonActionFactory } from './factories/ButtonActionFactory.js';
+export type { EmailServiceConfig } from './services/EmailService.js';

package/dist/index.js

@@ -8,8 +8,5 @@ export { ComponentFactory } from './factories/ComponentFactory.js';
 export { ElementFactory } from './factories/ElementFactory.js';
 export { ComponentTypeEnum } from './constants/ComponentEnum.js';
 export { ElementTypeEnum } from './constants/ElementEnum.js';
-export { ApiService } from './services/ApiService.js';
 export { analyticsService } from './services/AnalyticsService.js';
-export { CacheService } from './services/CacheService.js';
-export { ConstructorService } from './services/ConstructorService.js';
-export { EmailService } from './services/EmailService.js';
+export { buttonActionFactory } from './factories/ButtonActionFactory.js';

package/dist/layouts/Header.d.ts

@@ -1,4 +1,5 @@
 import type { WebsiteType } from '../types/WebsiteType.js';
-export declare function Header({ website }: {
+export declare function Header({ website, imageBaseUrl }: {
     readonly website: WebsiteType;
+    readonly imageBaseUrl?: string;
 }): import("react").JSX.Element;

package/dist/layouts/Header.js

@@ -1,8 +1,36 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Container, Row, Col } from 'react-bootstrap';
-export function Header({ website }) {
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback } from 'react';
+import { useLocation } from 'react-router-dom';
+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('.', '');
-    return (_jsx(Container, { fluid: headerStyles.fluid || undefined, style: { backgroundColor: headerStyles.backgroundColor }, children: _jsx(Row, { id: "header", children: _jsx(Col, { xs: 3, md: 3, lg: 3, style: Object.assign({ display: headerProperties.showLogo ? 'block' : 'none' }, headerStyles), children: _jsx("img", { src: `https://noisdev-website-images.s3.sa-east-1.amazonaws.com/${domain}/${website.logo}`, width: "200", className: "d-inline-block align-top", alt: "Logo", style: { textAlign: headerProperties.logoAlign } }) }) }) }));
+    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 isActive = useCallback((path) => {
+        const currentPath = location.pathname;
+        if (path === '/')
+            return currentPath === '/' || currentPath === '';
+        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 active = isActive(p.path);
+                                    return (_jsx(Nav.Link, { href: p.path, style: {
+                                            color: active ? '#c0ad5b' : '#a4a4a4',
+                                            fontSize: '0.9rem',
+                                            letterSpacing: '0.05em',
+                                            textTransform: 'uppercase',
+                                            margin: '0 12px',
+                                            paddingBottom: '4px',
+                                            borderBottom: active ? '2px solid #c0ad5b' : '2px solid transparent',
+                                            transition: 'color 0.3s, border-color 0.3s',
+                                        }, children: p.title }, p.id));
+                                }) }) })] }))] }) }));
 }

package/dist/layouts/SiteLayout.d.ts

@@ -1,4 +1,5 @@
 import type { WebsiteType } from '../types/WebsiteType.js';
-export declare function SiteLayout({ website }: {
+export declare function SiteLayout({ website, imageBaseUrl }: {
     readonly website: WebsiteType;
+    readonly imageBaseUrl?: string;
 }): import("react").JSX.Element;

package/dist/layouts/SiteLayout.js

@@ -2,6 +2,6 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Outlet } from 'react-router-dom';
 import { Header } from './Header.js';
 import { Footer } from './Footer.js';
-export function SiteLayout({ website }) {
-    return (_jsxs("div", { id: "site-layout", style: { backgroundColor: website.styles.backgroundColor, color: website.styles.color }, children: [_jsx(Header, { website: website }), _jsx(Outlet, {}), _jsx(Footer, { website: website })] }));
+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 })] }));
 }

package/dist/renderers/SectionRenderer.d.ts

@@ -1,6 +1,6 @@
-import React from 'react';
 import type { SectionType } from '../types/SectionType.js';
-export declare function SectionRenderer({ sections, editionMode }: {
+declare const SectionRenderer: import("react").NamedExoticComponent<{
     readonly sections: SectionType[];
     readonly editionMode?: boolean;
-}): React.JSX.Element;
+}>;
+export { SectionRenderer };