lib-pixelbuild 0.1.3 → 0.1.4

package/dist/components/CardComponent.js

@@ -5,8 +5,43 @@ import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
 const elementFactory = new ElementFactory();
 export function CardComponent({ component }) {
-    return (_jsx(Container, { style: component.styles, children: _jsx(Row, { id: "element-row", children: orderBySort(component.elements).map((element) => {
-                const e = elementFactory.build(element);
+    const props = component.properties || {};
+    const cardOrder = [
+        props.cardElement1,
+        props.cardElement2,
+        props.cardElement3,
+        props.cardElement4,
+    ].filter(Boolean);
+    const orderedElements = cardOrder.length > 0
+        ? cardOrder
+            .map((type) => component.elements.find((el) => el.elementType === String(type)))
+            .filter(Boolean)
+        : orderBySort(component.elements);
+    const applyCardStyles = (element) => {
+        const overrides = {};
+        if (element.elementType === 'icon') {
+            if (props.cardIconColor)
+                overrides.color = props.cardIconColor;
+            if (props.cardIconSize)
+                overrides.fontSize = props.cardIconSize;
+        }
+        else if (element.elementType === 'title') {
+            if (props.cardTitleColor)
+                overrides.color = props.cardTitleColor;
+            if (props.cardTitleSize)
+                overrides.fontSize = props.cardTitleSize;
+        }
+        else if (element.elementType === 'text') {
+            if (props.cardTextColor)
+                overrides.color = props.cardTextColor;
+            if (props.cardTextSize)
+                overrides.fontSize = props.cardTextSize;
+        }
+        return Object.assign(Object.assign({}, element), { styles: Object.assign(Object.assign({}, element.styles), overrides) });
+    };
+    return (_jsx(Container, { style: component.styles, children: _jsx(Row, { id: "element-row", children: orderedElements.map((element) => {
+                const enhanced = applyCardStyles(element);
+                const e = elementFactory.build(enhanced);
                 return React.cloneElement(e, { key: element.id });
             }) }) }));
 }

package/dist/components/SliderComponent.js

@@ -16,28 +16,25 @@ import { ElementFactory } from '../factories/ElementFactory.js';
 import { orderBySort } from '../utils/orderBySort.js';
 import 'keen-slider/keen-slider.min.css';
 const elementFactory = new ElementFactory();
-function cleanSlideStyles(element) {
-    const _b = element.styles, { height: _h, objectFit: _o } = _b, rest = __rest(_b, ["height", "objectFit"]);
-    return Object.assign(Object.assign({}, element), { styles: rest });
-}
 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;
 }
 function StaticSliderComponent({ component }) {
     const firstSlide = orderBySort(component.elements)[0];
-    const slide = firstSlide ? cleanSlideStyles(firstSlide) : null;
-    return (_jsx("div", { style: Object.assign({ position: 'relative', overflow: 'hidden' }, cleanComponentStyles(component.styles)), children: slide && elementFactory.build(slide) }));
+    if (!firstSlide)
+        return null;
+    return (_jsx("div", { style: Object.assign({ position: 'relative', overflow: 'hidden' }, cleanComponentStyles(component.styles)), children: elementFactory.build(firstSlide) }));
 }
 function InteractiveSliderComponent({ component }) {
-    const properties = component.properties;
+    const properties = component.properties || {};
     const slides = orderBySort(component.elements);
     const [currentSlide, setCurrentSlide] = useState(0);
     const [loaded, setLoaded] = useState(false);
     const [ref, instanceRef] = useKeenSlider({
         loop: slides.length > 1,
         mode: 'snap',
-        slides: { perView: 1, spacing: 10 },
+        slides: { perView: Number(properties.perView) || 1, spacing: 10 },
         created() {
             setLoaded(true);
         },
@@ -49,22 +46,17 @@ 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.next(); }, interval);
+        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);
         return () => window.clearInterval(timer);
     }, [instanceRef, properties.autoplay, properties.interval, slides.length]);
     const fixedHeight = Number(properties.height) > 0 ? Number(properties.height) : 0;
-    const showArrows = Boolean(properties.showArrows) && loaded && slides.length > 1;
+    const perView = Number(properties.perView) || 1;
+    const showArrows = Boolean(properties.showArrows) && loaded && slides.length > perView;
     const showDots = Boolean(properties.showDots) && loaded && slides.length > 1;
-    const sliderStyle = fixedHeight
-        ? { height: fixedHeight }
-        : { alignItems: 'flex-start' };
-    const slideStyle = fixedHeight
-        ? { minHeight: '100%', height: '100%' }
-        : { minHeight: 'auto' };
-    return (_jsxs("div", { style: Object.assign({ position: 'relative' }, cleanComponentStyles(component.styles)), children: [_jsx("div", { ref: ref, className: "keen-slider", style: sliderStyle, children: slides.map((element) => {
-                    const sanitized = fixedHeight ? element : cleanSlideStyles(element);
-                    return (_jsx("div", { className: "keen-slider__slide", style: slideStyle, children: elementFactory.build(sanitized) }, 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.prev(); }, 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.next(); }, 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))) }))] }));
+    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))) }))] }));
 }
 export function SliderComponent({ component, editionMode = false }) {
     if (editionMode)

package/dist/elements/IconElement.js

@@ -8,7 +8,9 @@ const icons = {
     FaTwitter, FaUser, FaWhatsapp, FaYoutube,
 };
 export function IconElement({ element }) {
+    var _a;
     const name = String(element.properties.name || '');
     const Icon = icons[name] || FaQuestionCircle;
-    return (_jsx(ElementColWrapper, { element: element, children: _jsx(Icon, { size: 20, style: element.styles, "aria-label": name || 'Ícone' }) }));
+    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' }) }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lib-pixelbuild",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "engines": {
     "node": "^24.18.0",
     "npm": ">=10"