buildHeader($componentId); // Layout 2 columnas $html .= '
'; $html .= '
'; $html .= $this->buildVisibilityGroup($componentId); $html .= $this->buildContentGroup($componentId); $html .= '
'; $html .= '
'; $html .= $this->buildColorsGroup($componentId); $html .= $this->buildTypographyAndSpacingGroup($componentId); $html .= '
'; $html .= '
'; return $html; } private function buildHeader(string $componentId): string { $html = '
renderer->getFieldValue($componentId, 'visibility', 'is_enabled', true); $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; // Switch: Show on Mobile $showOnMobile = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_mobile', true); $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; // Switch: Show on Desktop $showOnDesktop = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_desktop', true); $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; // Select: Show on Pages $showOnPages = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_pages', 'all'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; // Switch: CSS Crítico $isCritical = $this->renderer->getFieldValue($componentId, 'visibility', 'is_critical', true); $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $html .= ''; return $html; } private function buildContentGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Contenido'; $html .= '
'; // icon_class + label_text (row) $html .= '
'; $html .= '
'; $html .= ' '; $iconClass = $this->renderer->getFieldValue($componentId, 'content', 'icon_class', 'bi-megaphone-fill'); $html .= ' '; $html .= '
'; $html .= '
'; $html .= ' '; $labelText = $this->renderer->getFieldValue($componentId, 'content', 'label_text', 'Nuevo:'); $html .= ' '; $html .= '
'; $html .= '
'; // message_text (textarea) $messageText = $this->renderer->getFieldValue($componentId, 'content', 'message_text', 'Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025.'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= ' Máximo 200 caracteres'; $html .= '
'; // link_text + link_url (row) $html .= '
'; $html .= '
'; $html .= ' '; $linkText = $this->renderer->getFieldValue($componentId, 'content', 'link_text', 'Ver Catálogo'); $html .= ' '; $html .= '
'; $html .= '
'; $html .= ' '; $linkUrl = $this->renderer->getFieldValue($componentId, 'content', 'link_url', '#'); $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildColorsGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Colores'; $html .= '
'; // Grid 2x3 de color pickers $html .= '
'; // Background Color $bgColor = $this->renderer->getFieldValue($componentId, 'colors', 'background_color', '#0E2337'); $html .= $this->buildColorPicker('topBarBackgroundColor', 'Color de fondo', 'paint-bucket', $bgColor); // Text Color $textColor = $this->renderer->getFieldValue($componentId, 'colors', 'text_color', '#FFFFFF'); $html .= $this->buildColorPicker('topBarTextColor', 'Color de texto', 'fonts', $textColor); // Label Color $labelColor = $this->renderer->getFieldValue($componentId, 'colors', 'label_color', '#FF8600'); $html .= $this->buildColorPicker('topBarLabelColor', 'Color etiqueta', 'tag-fill', $labelColor); // Icon Color $iconColor = $this->renderer->getFieldValue($componentId, 'colors', 'icon_color', '#FF8600'); $html .= $this->buildColorPicker('topBarIconColor', 'Color ícono', 'star', $iconColor); $html .= '
'; // Row 2 de color pickers $html .= '
'; // Link Color $linkColor = $this->renderer->getFieldValue($componentId, 'colors', 'link_color', '#FFFFFF'); $html .= $this->buildColorPicker('topBarLinkColor', 'Color enlace', 'link', $linkColor); // Link Hover Color $linkHoverColor = $this->renderer->getFieldValue($componentId, 'colors', 'link_hover_color', '#FF8600'); $html .= $this->buildColorPicker('topBarLinkHoverColor', 'Color enlace (hover)', 'hand-index', $linkHoverColor); $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildTypographyAndSpacingGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Tipografía y Espaciado'; $html .= '
'; $html .= '
'; // Font Size $html .= '
'; $html .= ' '; $fontSize = $this->renderer->getFieldValue($componentId, 'spacing', 'font_size', '0.9rem'); $html .= ' '; $html .= ' Ej: 0.9rem, 14px'; $html .= '
'; // Padding $html .= '
'; $html .= ' '; $padding = $this->renderer->getFieldValue($componentId, 'spacing', 'padding', '0.5rem 0'); $html .= ' '; $html .= ' Ej: 0.5rem 0'; $html .= '
'; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildColorPicker(string $id, string $label, string $icon, string $value): string { $html = '
'; $html .= ' '; $html .= ' '; $html .= ' ' . esc_html(strtoupper($value)) . ''; $html .= '
'; return $html; } }