New Component: PDWidget - Configurable content widget with type-based rendering and CSS customization

[davidnmbond]

Overview

Create a new PDWidget component that renders a single widget tile within a dashboard. The widget supports multiple content types (HTML, URL content, clock, file preview, custom RenderFragment) with server-side content rendering and per-widget CSS.

This component is needed for the Magic Suite 4.2 Dashboards feature (Jira: MS-23195). It is used inside PDDashboardTile slots within PDDashboard.

Requirements

Content Types

The widget renders different content based on its WidgetType:

Type	Rendering Strategy
Html	Render sanitized HTML content directly
Url	Fetch URL content server-side and render (no iframe)
Clock	Real-time clock display with configurable timezone/format
Image	Display image from byte array or URL
Custom	Render a ChildContent RenderFragment provided by the consumer

Widget Chrome

• Configurable title bar (widget name)
• Optional toolbar with consumer-provided actions
• Optional resize handle (delegates to parent PDDashboard)
• Loading state indicator while content is being fetched
• Error state display when content fetch fails

CSS Customization

• Accept a Css parameter (string) for per-widget CSS
• Support inline style overrides
• Use Bootstrap 5 card as the base container
• Respect dark/light theme

Content Refresh

• Accept a RefreshIntervalSeconds parameter (int)
• When > 0, re-fetch/re-render content at the given interval
• Show a subtle refresh indicator (not a full loading overlay)
• Expose OnRefresh event callback

Parameters

Parameter	Type	Description
Title	string?	Widget title displayed in header
WidgetType	PDWidgetType (enum)	Content type
Content	string?	HTML content or URL depending on type
ContentBytes	�yte[]?	Binary content (images, files)
Configuration	string?	JSON configuration string
Css	string?	Per-widget CSS
RefreshIntervalSeconds	int	Auto-refresh interval (0 = disabled)
IsEditable	�ool	Show edit controls
ShowTitle	�ool	Show/hide title bar
ChildContent	RenderFragment?	Custom content for Custom type
OnRefresh	EventCallback	Fired on content refresh
OnConfigure	EventCallback	Fired when configure button clicked

Enum

\\csharp
public enum PDWidgetType
{
Html,
Url,
Clock,
Image,
Custom
}
\`n

Technical Constraints

• No iframes ├ö├ç├ URL content must be fetched and rendered server-side
• No external JS libraries ├ö├ç├ pure Blazor + Bootstrap 5
• HTML content should be sanitized before rendering (XSS prevention)
• Must work in both Blazor Server and WebAssembly
• Follow existing PD component patterns (.razor + .razor.cs + .razor.css)
• The consuming app provides content-fetching services; PDWidget calls delegates/events to request content

Acceptance Criteria

• Html type renders sanitized HTML content
• Url type renders fetched content (consumer provides fetch delegate)
• Clock type shows real-time clock with configurable format
• Image type renders from byte array or URL
• Custom type renders ChildContent RenderFragment
• Per-widget CSS applies correctly
• Auto-refresh works at configured interval
• Loading and error states display appropriately
• Edit mode shows configuration controls
• No external JavaScript dependencies
• No iframes used
• Component documented in ComponentDocumentation.md
• Demo page added to PanoramicData.Blazor.Demo

Component

PDWidget (new component in PanoramicData.Blazor)

Expected Behavior:

The PDWidget component should be a self-contained Blazor widget renderer that:

• Should render sanitized HTML content for Html widget type
• Must fetch URL content via a consumer-provided delegate (no iframes)
• Should display a real-time clock with configurable timezone for Clock type
• Must render images from byte arrays or URLs for Image type
• Should render ChildContent RenderFragment for Custom type
• Must apply per-widget CSS correctly
• Should auto-refresh content at the configured interval when RefreshIntervalSeconds > 0
• Must display loading and error states appropriately
• Should show configuration controls only in edit mode
• Must not use any external JavaScript libraries
• Must not use iframes for any content type

Documentation

The following documentation updates are required:

• Component documentation in ComponentDocumentation.md
• API reference for all parameters, events, and the PDWidgetType enum
• Demo page in PanoramicData.Blazor.Demo showing each widget type
• User guide for implementing custom widget content providers

UI Consistency

This is a new pattern - no existing widget component exists in PanoramicData.Blazor. The component should follow the existing PD component conventions:

• Consistent with the look and feel of PDCard for card-based rendering
• Similar to PDImage for image display patterns
• Follows the existing pattern used by PDBlockOverlay for loading/error states
• Same style as PDToolbar for widget action buttons