🔍 Debug Properties System - Test Steps

Quick Test in Browser Console

Open your browser console and run these commands:

1. Check if WidgetRegistryInitService ran:

// Check global property registry
const propertyRegistry = ng.probe(document.body).injector.get(PropertyRegistryService);
const debug = propertyRegistry.debug();

console.log('📊 Property Registry Debug:');
console.log('  Global Groups:', debug.global.length);
console.log('  Button Groups:', debug.byType['button']?.length || 0);
console.log('  All registered types:', Object.keys(debug.byType));

// Expected output:
// Global Groups: 7 (default groups)
// Button Groups: 10 (7 default + 3 button-specific)
// Types: ['text', 'button', 'image', ...]

2. Check what groups are loaded for button:

const widget = { type: 'button', id: 'test-button-123', name: 'Test Button' };
const groups = propertyRegistry.getPropertyGroupsForWidget(widget);

console.log('📋 Property Groups for Button:');
console.log('  Total groups:', groups.length);
console.log('  Group titles:', groups.map(g => g.title));

// Expected output:
// Total groups: 10
// Titles: ['Información básica', 'Posición y tamaño', 'Apariencia', 'Fuente', 'Espaciado', 'Animaciones', 'Acciones', 'Button Content', 'Button Appearance', 'Button Icon']

3. Check current selected widget in editor:

// Get editor service
const editorService = ng.probe(document.body).injector.get(EditorService);
const selectedWidgets = editorService.selectedWidgets();

console.log('✏️ Currently selected widgets:', selectedWidgets);

// If button selected, check its property groups
if (selectedWidgets.length > 0 && selectedWidgets[0].type === 'button') {
  const buttonGroups = propertyRegistry.getPropertyGroupsForWidget(selectedWidgets[0]);
  console.log('📋 Button property groups loaded:', buttonGroups.map(g => g.title));
}

4. Force refresh property panel:

// Get properties panel component
const panelComponent = document.querySelector('lib-properties-panel-new');
if (panelComponent) {
  const component = ng.getComponent(panelComponent);
  component.updatePropertyGroups();
  console.log('✅ Property groups refreshed');
  console.log('📋 Loaded groups:', component.loadedGroups().map(g => g.title));
}

Expected vs Actual

Expected for Button Widget:

✅ Global groups (7): Basic Info, Position, Appearance, Font, Spacing, Animations, Actions ✅ Button-specific (3): Button Content, Button Appearance, Button Icon ✅ Total: 10 groups

If Only Seeing Global Groups:

❌ Button-specific groups not registered ❌ PropertyRegistryService.registerPropertyGroups() not called ❌ WidgetRegistryInitService not initialized

If Groups Collapse Immediately:

❌ Expanded state not persisting ❌ Toggle function not working ❌ CSS issue

Debugging Output to Share

After running these tests, share:

1. Number of groups showing for button
2. Group titles list
3. Any console errors
4. Screenshot of properties panel

This will tell us exactly where the issue is!