🔧 Dashboard Productize: Testing and Storybook

[lpgarzonr]

The dashboard component exists as a working prototype but is not production-ready. It lacks comprehensive tests, has no documentation, incomplete Storybook coverage, and missing accessibility considerations. This story brings the component up to the quality bar expected of a reusable library component, matching the standard set by declarative-table-card and other shipped components.

Acceptance Criteria:

Testing:

• Dashboard component tests cover:
  • Rendering title and description from config input
  • Edit mode lifecycle: enterEditMode() → saveEdit() and enterEditMode() → cancelEdit() (snapshot restore)
  • removeCard(id) removes the card from the model
  • removeSection(id) removes the section AND cascades removal of all cards with matching sectionId
  • onCardsAdded(cards) appends cards with generated IDs
  • Computed signals: looseCards, sectionCards, addedComponents
• DashboardCardComponent tests cover:
  • Dynamic web component rendering when card.component is provided
  • Passing componentInputs as properties on the rendered element
  • Remove button visibility based on editMode
  • Host style bindings (grid-column, grid-row) from colSpan/rowSpan
  • Fallback to ng-content projection when no component is specified
• DashboardSectionComponent tests cover:
  • Section title rendering, card rendering within grid
  • Remove button visibility based on editMode and section.editable
  • Event emission: removeSection, removeCard
• AddCardDialog tests cover:
  • Dialog open/close state, checkbox rendering for available cards
  • Already-added components shown as disabled
  • confirmAdd() emits only newly selected cards
  • Selection state resets on reopen
• All tests follow the existing repo pattern (TestBed, CUSTOM_ELEMENTS_SCHEMA)
• Test pass: npm run test

Storybook:

• The existing Default story is reviewed and kept as the primary demo
• An Empty Dashboard story is added showing a dashboard with no cards (empty state)
• An Edit Mode story is added showing the dashboard pre-set in edit mode with the save/cancel bar visible
• A Sections Only story is added showing cards organized into multiple sections
• Stories have proper argTypes controls for all inputs, allowing interactive property editing in Storybook
• All stories render without console errors or warnings

[lpgarzonr]

Split into 3 focused issues:

• Dashboard: Testing and Storybook coverage #66 — Testing and Storybook coverage
• 🔧 Dashboard Productize: Accessibility #67 — Accessibility improvements
• 🔧 Dashboard Productize: Documentation and code quality #68 — Documentation and code quality