buildHeader($componentId); $html .= '
'; $html .= '
'; $html .= $this->buildVisibilityGroup($componentId); $html .= $this->buildContentGroup($componentId); $html .= $this->buildEffectsGroup($componentId); $html .= '
'; $html .= '
'; $html .= $this->buildColorsGroup($componentId); $html .= $this->buildTypographyGroup($componentId); $html .= $this->buildSpacingGroup($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 .= '
'; $showOnDesktop = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_desktop', true); $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $showOnMobile = $this->renderer->getFieldValue($componentId, 'visibility', 'show_on_mobile', true); $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; // ============================================= // Checkboxes de visibilidad por tipo de página // Grupo especial: _page_visibility // ============================================= $html .= '
'; $html .= '

'; $html .= ' '; $html .= ' Mostrar en tipos de pagina'; $html .= '

'; $showOnHome = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_home', false); $showOnPosts = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_posts', true); $showOnPages = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_pages', true); $showOnArchives = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_archives', false); $showOnSearch = $this->renderer->getFieldValue($componentId, '_page_visibility', 'show_on_search', false); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('heroVisibilityHome', 'Home', 'bi-house', $showOnHome); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('heroVisibilityPosts', 'Posts', 'bi-file-earmark-text', $showOnPosts); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('heroVisibilityPages', 'Paginas', 'bi-file-earmark', $showOnPages); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('heroVisibilityArchives', 'Archivos', 'bi-archive', $showOnArchives); $html .= '
'; $html .= '
'; $html .= $this->buildPageVisibilityCheckbox('heroVisibilitySearch', 'Busqueda', 'bi-search', $showOnSearch); $html .= '
'; $html .= '
'; // ============================================= // Reglas de exclusion avanzadas // Grupo especial: _exclusions (Plan 99.11) // ============================================= $exclusionPartial = new ExclusionFormPartial($this->renderer); $html .= $exclusionPartial->render($componentId, 'hero'); // 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 .= '
'; $showCategories = $this->renderer->getFieldValue($componentId, 'content', 'show_categories', true); $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $showBadgeIcon = $this->renderer->getFieldValue($componentId, 'content', 'show_badge_icon', true); $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $badgeIconClass = $this->renderer->getFieldValue($componentId, 'content', 'badge_icon_class', 'bi-folder-fill'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= ' Usa clases de Bootstrap Icons'; $html .= '
'; $titleTag = $this->renderer->getFieldValue($componentId, 'content', 'title_tag', 'h1'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildColorsGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Colores'; $html .= '
'; $html .= '
'; $gradientStart = $this->renderer->getFieldValue($componentId, 'colors', 'gradient_start', '#1e3a5f'); $html .= $this->buildColorPicker('heroGradientStart', 'Degradado (inicio)', 'circle-half', $gradientStart); $gradientEnd = $this->renderer->getFieldValue($componentId, 'colors', 'gradient_end', '#2c5282'); $html .= $this->buildColorPicker('heroGradientEnd', 'Degradado (fin)', 'circle-fill', $gradientEnd); $titleColor = $this->renderer->getFieldValue($componentId, 'colors', 'title_color', '#FFFFFF'); $html .= $this->buildColorPicker('heroTitleColor', 'Color título', 'fonts', $titleColor); $badgeBgColor = $this->renderer->getFieldValue($componentId, 'colors', 'badge_bg_color', '#FFFFFF'); $html .= $this->buildColorPicker('heroBadgeBgColor', 'Fondo badges', 'badge', $badgeBgColor); $html .= '
'; $html .= '
'; $badgeTextColor = $this->renderer->getFieldValue($componentId, 'colors', 'badge_text_color', '#FFFFFF'); $html .= $this->buildColorPicker('heroBadgeTextColor', 'Texto badges', 'card-text', $badgeTextColor); $badgeIconColor = $this->renderer->getFieldValue($componentId, 'colors', 'badge_icon_color', '#FFB800'); $html .= $this->buildColorPicker('heroBadgeIconColor', 'Ícono badges', 'star-fill', $badgeIconColor); $badgeHoverBg = $this->renderer->getFieldValue($componentId, 'colors', 'badge_hover_bg', '#FF8600'); $html .= $this->buildColorPicker('heroBadgeHoverBg', 'Badges (hover)', 'hand-index', $badgeHoverBg); $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildTypographyGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Tipografía'; $html .= '
'; $html .= '
'; $titleFontSize = $this->renderer->getFieldValue($componentId, 'typography', 'title_font_size', '2.5rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $titleFontSizeMobile = $this->renderer->getFieldValue($componentId, 'typography', 'title_font_size_mobile', '1.75rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $titleFontWeight = $this->renderer->getFieldValue($componentId, 'typography', 'title_font_weight', '700'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $titleLineHeight = $this->renderer->getFieldValue($componentId, 'typography', 'title_line_height', '1.4'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $badgeFontSize = $this->renderer->getFieldValue($componentId, 'typography', 'badge_font_size', '0.813rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildSpacingGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Espaciado'; $html .= '
'; $html .= '
'; $paddingVertical = $this->renderer->getFieldValue($componentId, 'spacing', 'padding_vertical', '3rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $marginBottom = $this->renderer->getFieldValue($componentId, 'spacing', 'margin_bottom', '1.5rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $badgePadding = $this->renderer->getFieldValue($componentId, 'spacing', 'badge_padding', '0.375rem 0.875rem'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $badgeBorderRadius = $this->renderer->getFieldValue($componentId, 'spacing', 'badge_border_radius', '20px'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $html .= '
'; $html .= '
'; $html .= '
'; return $html; } private function buildEffectsGroup(string $componentId): string { $html = '
'; $html .= '
'; $html .= '
'; $html .= ' '; $html .= ' Efectos'; $html .= '
'; $boxShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'box_shadow', '0 4px 16px rgba(30, 58, 95, 0.25)'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $titleTextShadow = $this->renderer->getFieldValue($componentId, 'visual_effects', 'title_text_shadow', '1px 1px 2px rgba(0, 0, 0, 0.2)'); $html .= '
'; $html .= ' '; $html .= ' '; $html .= '
'; $badgeBackdropBlur = $this->renderer->getFieldValue($componentId, 'visual_effects', 'badge_backdrop_blur', '10px'); $html .= '
'; $html .= ' '; $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; } private function buildPageVisibilityCheckbox(string $id, string $label, string $icon, mixed $checked): string { $checked = $checked === true || $checked === '1' || $checked === 1; $html = '
'; $html .= sprintf( ' ', esc_attr($id), $checked ? 'checked' : '' ); $html .= sprintf( ' '; $html .= '
'; return $html; } }