### ClearSettings Usage Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/services.md

Example demonstrating the use of ILocalStorageSettingsService.ClearSettings to reset all user preferences to their default values.

```csharp
await LocalStorageSettings.ClearSettings();
```

--------------------------------

### HUIAppBar with Actions Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-core.md

Provides an example of HUIAppBar, including how to set logo sources and add action buttons like help and settings to the toolbar.

```razor
<HUIAppBar LogoSrc="images/logo.png" 
          LogoBrandSrc="images/brand.png"
          @ref="appBar">
    <MudSpacer />
    <MudIconButton Icon="@Icons.Material.Filled.Help" />
    <MudIconButton Icon="@Icons.Material.Filled.Settings" />
</HUIAppBar>

@code {
    private void OnMenuClick()
    {
        // Handle menu toggle
    }
}
```

--------------------------------

### Register TitleService with Configuration

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/services.md

Example of registering the TitleService with dependency injection in Program.cs, using configuration settings from appsettings.json. This is part of the UI configuration setup.

```csharp
// In Program.cs
services.Configure<TitleService>(configuration.GetSection("HedinUI"));
```

--------------------------------

### ResetAsync Usage Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/services.md

Example of using IHUISettingsService.ResetAsync to reset all application settings to defaults. It shows how to bind this action to a button click event.

```csharp
@inject IHUISettingsService HUISettings

<button @onclick="ResetSettings">Reset to Defaults</button>

@code {
    private async Task ResetSettings()
    {
        await HUISettings.ResetAsync();
    }
}
```

--------------------------------

### Tooltip Configuration Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/configuration.md

Shows how to apply a HUITooltip to a MudIconButton, with a note on the default instant display duration.

```razor
<HUITooltip Text="@tooltipText">
    <MudIconButton Icon="@Icons.Material.Filled.Info" />
</HUITooltip>
```

--------------------------------

### GetSettings Usage Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/services.md

Example of using the ILocalStorageSettingsService.GetSettings method to retrieve and use user settings, such as the current theme. It injects the service and calls GetSettings.

```csharp
@inject ILocalStorageSettingsService LocalStorageSettings

@code {
    protected override async Task OnInitializedAsync()
    {
        var settings = await LocalStorageSettings.GetSettings();
        CurrentTheme = settings.Theme;
    }
}
```

--------------------------------

### Stored Settings Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/configuration.md

Demonstrates the structure of stored settings for UI components, including table configurations and theme preferences.

```json
{
  "TableSettings": [
    {
      "TableId": "users-grid",
      "ColumnOrder": {
        "Name": 0,
        "Email": 1,
        "Created": 2
      },
      "ColumnVisibility": {
        "Name": false,
        "Email": false,
        "Created": false
      }
    }
  ],
  "Theme": 1  // 0 = Light, 1 = Dark
}
```

--------------------------------

### HUIStatusChip Example Usage

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-content.md

Demonstrates the usage of HUIStatusChip with different severities and icons to display status information.

```razor
<HUIStatusChip Text="Active" Severity="Severity.Success" Icon="@Icons.Material.Filled.CheckCircle" />
<HUIStatusChip Text="Pending" Severity="Severity.Warning" />
<HUIStatusChip Text="Failed" Severity="Severity.Error" />
```

--------------------------------

### HUIDataGrid Example Usage

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-data.md

Example of how to use the HUIDataGrid component with server-side data loading, search, and column configuration.

```razor
@page "/users"
@inject HttpClient Http

<HUIDataGrid T="UserModel" 
            ServerData="@LoadData"
            ShowColumnOptions="true"
            DragDropColumnReordering="true"
            Loading="@isLoading"
            @ref="grid">
    <ToolBarContent>
        <MudTextField @bind-Value="@searchTerm" 
                     Placeholder="Search..."
                     Variant="Variant.Outlined"
                     Margin="Margin.Dense"
                     Class="mt-0" />
    </ToolBarContent>
    <Columns>
        <PropertyColumn Property="x => x.Name" Title="Name" />
        <PropertyColumn Property="x => x.Email" Title="Email" />
        <PropertyColumn Property="x => x.CreatedDate" Title="Created" />
    </Columns>
</HUIDataGrid>

@code {
    private HUIDataGrid<UserModel> grid;
    private bool isLoading;
    private string searchTerm = "";

    private async Task<GridData<UserModel>> LoadData(GridState<UserModel> state)
    {
        isLoading = true;
        try
        {
            var response = await Http.PostAsJsonAsync("api/users/grid", new {
                Page = state.Page,
                PageSize = state.PageSize,
                SortBy = state.SortDefinitions?.FirstOrDefault()?.SortBy,
                Search = searchTerm
            });
            
            var result = await response.Content.ReadAsAsync<GridData<UserModel>>();
            return result;
        }
        finally
        {
            isLoading = false;
        }
    }

    private class UserModel
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Email { get; set; }
        public DateTime CreatedDate { get; set; }
    }
}
```

--------------------------------

### SetSettings Usage Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/services.md

Example of how to modify and persist user settings using ILocalStorageSettingsService.SetSettings. It first retrieves settings, modifies a property (Theme), and then saves the updated settings.

```csharp
var settings = await LocalStorageSettings.GetSettings();
settings.Theme = ThemeMode.Light;
await LocalStorageSettings.SetSettings(settings);
```

--------------------------------

### Basic Setup in Program.cs

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/README.md

Configure your Blazor application to use Hedin.UI services. This involves registering the UI configuration with the service collection.

```csharp
using Hedin.UI;

var builder = WebAssemblyBuilder.CreateDefault(args);
builder.RootComponents.Add<App>("#app");

// Register Hedin.UI services
builder.Services.AddUIConfiguration(builder.Configuration);

await builder.Build().RunAsync();
```

--------------------------------

### HUIButton Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-core.md

Demonstrates the usage of HUIButton, showing how to display a loading indicator and disable the button when an operation is in progress.

```razor
<HUIButton Loading="@isSaving" 
          Color="Color.Primary" 
          OnClick="@HandleSave">
    Save Changes
</HUIButton>

@code {
    private bool isSaving;

    private async Task HandleSave()
    {
        isSaving = true;
        await ApiClient.SaveUser(user);
        isSaving = false;
    }
}
```

--------------------------------

### HUINavMenu Example Usage

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-content.md

Demonstrates how to use the HUINavMenu component, either by auto-generating menu items from assemblies or by creating them manually.

```razor
@inject IHUIPageHelper PageHelper

<HUINavMenu Items="@menuItems" RequireAuthorization="true">
    <HUINavMenuDrawer />
</HUINavMenu>

@code {
    private List<HUIMenuItem> menuItems = new();

    protected override async Task OnInitializedAsync()
    {
        // Auto-generate menu from components
        var appAssembly = typeof(Program).Assembly;
        menuItems = await PageHelper.GetMenuItems(new[] { appAssembly });

        // Or create manually
        menuItems = new()
        {
            new HUIMenuItem(
                displayName: "Dashboard",
                url: "/dashboard",
                parentUrl: null,
                order: 1,
                icon: Icons.Material.Filled.Dashboard
            ),
            new HUIMenuItem(
                displayName: "Users",
                url: "/users",
                parentUrl: null,
                order: 2,
                icon: Icons.Material.Filled.People,
                policy: "AdminOnly"
            ),
            new HUIMenuItem(
                displayName: "Add User",
                url: "/users/add",
                parentUrl: "/users",
                order: 1
            )
        };
    }
}
```

--------------------------------

### HUITooltip Example Usage

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-content.md

Shows how to use the HUITooltip component to add a tooltip to a MudIconButton.

```razor
<HUITooltip Text="Click to edit">
    <MudIconButton Icon="@Icons.Material.Filled.Edit" />
</HUITooltip>
```

--------------------------------

### StatefulComponentBase<TState> Example Usage

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/services.md

Example of using the generic StatefulComponentBase to manage state for a component. The Model property is automatically managed.

```csharp
@page "/filters"
@inherits StatefulComponentBase<FilterModel>

<button @onclick="ApplyFilters">Apply</button>

@code {
    private class FilterModel
    {
        public string SearchTerm { get; set; }
        public bool Active { get; set; }
    }

    private void ApplyFilters()
    {
        Model.SearchTerm = searchInput;
        Model.Active = activeToggle;
    }
}
```

--------------------------------

### GetMenuItems Usage Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/services.md

Example of how to use the IHUIPageHelper.GetMenuItems method to retrieve menu items for the application. It injects the service and calls GetMenuItems with the application's assembly.

```csharp
@inject IHUIPageHelper PageHelper

@code {
    private List<HUIMenuItem> menuItems;

    protected override async Task OnInitializedAsync()
    {
        var appAssembly = typeof(Program).Assembly;
        menuItems = await PageHelper.GetMenuItems(new[] { appAssembly });
    }
}
```

--------------------------------

### HUIThemeProvider Theme Management Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-core.md

Illustrates how to wrap the application with HUIThemeProvider to manage theme switching and persistence, ensuring consistent theming across components.

```razor
<HUIThemeProvider>
    <HUIMainContainer>
        @Body
    </HUIMainContainer>
</HUIThemeProvider>
```

--------------------------------

### OrderModel Implementation of IHUIGridItem

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/types.md

Example implementation of the IHUIGridItem interface. Demonstrates how to map order status to severity levels for row styling in data grids.

```csharp
public class OrderModel : IHUIGridItem
{
    public int Id { get; set; }
    public string OrderNumber { get; set; }
    public OrderStatus Status { get; set; }

    public Severity Severity => Status switch
    {
        OrderStatus.Completed => Severity.Success,
        OrderStatus.Pending => Severity.Info,
        OrderStatus.Cancelled => Severity.Error,
        _ => Severity.Normal
    };
}
```

--------------------------------

### Install Hedin.UI Package

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/README.md

Add the Hedin.UI NuGet package to your Blazor project.

```bash
dotnet add package Hedin.UI
```

--------------------------------

### HUIBreadcrumbs Example Usage

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-content.md

Shows how to implement HUIBreadcrumbs with a list of BreadcrumbItem objects to provide navigation context.

```razor
<HUIPage Header="Edit User">
    <HUIBreadcrumbs Breadcrumbs="@(new List<BreadcrumbItem>
    {
        new BreadcrumbItem { Text = "Dashboard", Href = "/dashboard" },
        new BreadcrumbItem { Text = "Users", Href = "/users" },
        new BreadcrumbItem { Text = "Edit John Doe" }
    })" />
</HUIPage>
```

--------------------------------

### HUIChatLine Conversation Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/types.md

Example of creating a list of HUIChatLine objects to represent a conversation. Used with HUIChatPanel to display chat messages.

```csharp
var conversation = new List<HUIChatLine>
{
    new HUIChatLine { Role = HUIChatRole.User, Text = "Hello", Timestamp = DateTime.Now },
    new HUIChatLine { Role = HUIChatRole.Assistant, Text = "Hi there!", Timestamp = DateTime.Now }
};
```

--------------------------------

### Page Content with HUIPage and HUIPageTable

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/README.md

Structure a page using `HUIPage` for layout and `HUIPageTable` for displaying data. This example shows how to define columns for a product list and handle a button click to open an add dialog.

```razor
@inherits ProductsPage

<HUIPage Header="Product Catalog"
        PageDescription="Manage your product inventory"
        AddButtonText="Add Product"
        OnAddClick="@OpenAddDialog">
    
    <HUIPageTable Items="@products" TItem="ProductModel">
        <Columns>
            <PropertyColumn Property="x => x.Name" Title="Product Name" />
            <PropertyColumn Property="x => x.Sku" Title="SKU" />
            <PropertyColumn Property="x => x.Price" Title="Price" Format="C" />
        </Columns>
    </HUIPageTable>

</HUIPage>

@code {
    private List<ProductModel> products;

    protected override async Task OnInitializedAsync()
    {
        products = await ApiClient.GetProducts();
    }

    private async Task OpenAddDialog()
    {
        // Open add product dialog
    }
}
```

--------------------------------

### OrderModel with Severity Property

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-data.md

Example C# model implementing IHUIGridItem, demonstrating how to derive a MudBlazor Severity level from an OrderStatus.

```csharp
public class OrderModel : IHUIGridItem
{
    public int Id { get; set; }
    public string OrderNumber { get; set; }
    public DateTime OrderDate { get; set; }
    
    public Severity Severity 
    {
        get => Status switch
        {
            OrderStatus.Completed => Severity.Success,
            OrderStatus.Pending => Severity.Info,
            OrderStatus.Cancelled => Severity.Error,
            _ => Severity.Normal
        };
    }
}
```

--------------------------------

### Register Hedin.UI Services Extension Method

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/services.md

Example of registering all Hedin.UI services in Program.cs using the AddUIConfiguration extension method. This simplifies service registration for the UI components.

```csharp
// In Program.cs
builder.Services.AddUIConfiguration(builder.Configuration);
```

--------------------------------

### HUIMainContainer Layout Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-core.md

Shows how to structure an application layout using HUIMainContainer, including slots for app bar, navigation menu, and main content.

```razor
<HUIMainContainer>
    <AppBarContent>
        <MudSpacer />
        <MudIconButton Icon="@Icons.Material.Filled.Settings" />
    </AppBarContent>
    <NavMenuContent>
        <HUINavMenu Items="@menuItems" />
    </NavMenuContent>
    <ChildContent>
        @Body
    </ChildContent>
</HUIMainContainer>
```

--------------------------------

### Configure ShowDevEnvWarning in appsettings.json

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/services.md

Example of how to configure the ShowDevEnvWarning setting in the application's appsettings.json file. This setting is part of the HedinUI configuration section.

```json
// In appsettings.json
{
  "HedinUI": {
    "AppTitle": "My Application",
    "ShowDevEnvWarning": true
  }
}
```

--------------------------------

### Stateful Component Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/README.md

Shows how to create a stateful component that preserves its model across navigation using StatefulComponentBase. The UserFilterModel is automatically persisted and restored.

```csharp
@page "/users"
@inherits StatefulComponentBase<UserFilterModel>

@code {
    private class UserFilterModel
    {
        public string SearchTerm { get; set; }
        public bool ActiveOnly { get; set; }
    }
    
    // Model is automatically persisted and restored
}
```

--------------------------------

### HUIPageHelper Usage Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/helpers-extensions.md

Injects the IHUIPageHelper service to retrieve menu items by scanning assemblies. Used for building navigation menus dynamically.

```csharp
@inject IHUIPageHelper PageHelper

@code {
    private List<HUIMenuItem> menuItems;

    protected override async Task OnInitializedAsync()
    {
        var assembly = typeof(Program).Assembly;
        menuItems = await PageHelper.GetMenuItems(new[] { assembly });
    }
}
```

--------------------------------

### Register Hedin.UI Services

Source: https://github.com/hedinbil/hedin-ui/blob/main/docs/getting-started.md

Add this to your Program.cs file to register Hedin.UI services. Ensure you have the Hedin.UI NuGet package installed.

```csharp
using Hedin.UI;
builder.Services.AddUIConfiguration(builder.Configuration);
```

--------------------------------

### HUIChatPanel Example Usage

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-content.md

Demonstrates how to use the HUIChatPanel component to display and manage a conversation, including sending messages and handling loading states.

```razor
<HUIChatPanel @ref="chatPanel"
             Title="AI Assistant"
             Conversation="@messages"
             OnSendMessage="@HandleSendMessage"
             IsLoading="@isWaitingForResponse">
    <AssistantTemplate>
        <div class="d-flex flex-column gap-1">
            <MudText Typo="Typo.body2">@context.Text</MudText>
            <MudText Typo="Typo.caption" Class="mud-text-secondary">
                @context.Timestamp.ToString("HH:mm")
            </MudText>
        </div>
    </AssistantTemplate>
</HUIChatPanel>

@code {
    private HUIChatPanel chatPanel;
    private List<HUIChatLine> messages = new();
    private bool isWaitingForResponse;

    private async Task HandleSendMessage(string message)
    {
        messages.Add(new HUIChatLine 
        {
            Role = HUIChatRole.User, 
            Text = message,
            Timestamp = DateTime.Now
        });

        isWaitingForResponse = true;
        var response = await ApiClient.GetAiResponse(message);
        
        messages.Add(new HUIChatLine
        {
            Role = HUIChatRole.Assistant,
            Text = response,
            Timestamp = DateTime.Now
        });
        isWaitingForResponse = false;
    }
}
```

--------------------------------

### HUIBlogPost Usage Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-specialized.md

Demonstrates how to use the HUIBlogPost component to display a blog post with a title, author, date, content, and attachments. Includes handling attachment downloads.

```razor
<HUIBlogPost Title="Announcing Version 2.0"
            Author="John Developer"
            PublishDate="@(new DateTime(2024, 6, 1))"
            Attachments="@attachments"
            OnAttachmentDownload="@HandleDownload">
    <p>Today we're excited to announce major new features...</p>
    <h3>Key Features</h3>
    <ul>
        <li>Improved performance</li>
        <li>New themes</li>
    </ul>
</HUIBlogPost>

@code {
    private List<HUIAttachmentModel> attachments = new()
    {
        new HUIAttachmentModel 
        {
            Id = 1,
            Filename = "release-notes.pdf",
            BlobPath = "files/release-notes.pdf",
            UploadDate = DateTimeOffset.Now,
            UploadedBy = "admin"
        }
    };

    private async Task HandleDownload(HUIAttachmentModel attachment)
    {
        // Download file
        await JsRuntime.InvokeAsync<object>(
            "open", attachment.BlobPath, "_blank");
    }
}
```

--------------------------------

### HUIInformationMessage Usage Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-content.md

Demonstrates how to use the HUIInformationMessage component to display a list of system messages. Includes handling read and archive actions.

```razor
@inject ISnackbar Snackbar

<div class="d-flex flex-column gap-2">
    @foreach (var message in Messages)
    {
        <HUIInformationMessage Model="@message"
                              OnReadClick="@HandleMarkRead"
                              OnArchiveClick="@HandleArchive"
                              ShowEdit="true"
                              OnEditClick="@HandleEdit" />
    }
</div>

@code {
    private List<HUIInformationMessageModel> Messages { get; set; } = new();

    protected override void OnInitialized()
    {
        Messages.Add(new HUIInformationMessageModel(
            id: 1,
            severity: Severity.Warning,
            date: DateTime.Now,
            header: "System Maintenance",
            message: "The system will be down for maintenance\nTuesday 2-4 PM EST",
            read: false,
            pinned: true,
            requireReadVerification: true,
            archived: false
        ));
    }

    private async Task HandleMarkRead(HUIInformationMessageModel message)
    {
        message.MarkAsRead();
        Snackbar.Add("Message marked as read", Severity.Success);
    }

    private async Task HandleArchive(HUIInformationMessageModel message)
    {
        message.Archive();
    }

    private async Task HandleEdit(HUIInformationMessageModel message)
    {
        // Open edit dialog
    }
}
```

--------------------------------

### HUIDialog Usage Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-core.md

Shows how to implement the HUIDialog component for creating modal dialogs. It supports managing unsaved changes and includes custom content and action buttons.

```razor
<HUIDialog OnCancelClick="@HandleCancel" 
          ShowUnsavedChanges="@hasUnsavedChanges">
    <DialogContent>
        <MudTextField @bind-Value="user.Name" Label="Name" />
        <MudTextField @bind-Value="user.Email" Label="Email" />
    </DialogContent>
    <DialogActions>
        <MudButton Color="Color.Default" OnClick="@HandleCancel">Cancel</MudButton>
        <MudButton Color="Color.Primary" OnClick="@HandleSave">Save</MudButton>
    </DialogActions>
</HUIDialog>

@code {
    private UserModel user;
    private bool hasUnsavedChanges;

    private void HandleCancel()
    {
        // Handle cancellation
    }

    private async Task HandleSave()
    {
        // Save and close dialog
    }
}
```

--------------------------------

### HUIFrame Content Organization Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-core.md

Demonstrates the use of HUIFrame to create distinct sections within a page, complete with customizable titles, subtitles, and content areas.

```razor
<HUIFrame Title="User Details" Subtitle="Account Information">
    <MudGrid>
        <MudItem xs="12">
            <MudTextField Label="Username" />
        </MudItem>
    </MudGrid>
</HUIFrame>
```

--------------------------------

### HUIPage Usage Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-core.md

Demonstrates how to use the HUIPage component for structuring application pages. It includes setting the header, description, and an add button, along with embedding a table component.

```razor
<HUIPage Header="User Management" 
         PageDescription="Manage application users and permissions"
         PageInfo="Users control who can access the system"
         AddButtonText="Add User"
         OnAddClick="@OpenAddDialog">
    <HUIPageTable Items="users" TItem="UserModel">
        <Columns>
            <PropertyColumn Property="x => x.Name" />
            <PropertyColumn Property="x => x.Email" />
        </Columns>
    </HUIPageTable>
</HUIPage>

@code {
    private List<UserModel> users;

    private async Task OpenAddDialog()
    {
        // Handle add user action
    }
}
```

--------------------------------

### HUIModule Usage Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-specialized.md

Demonstrates using the HUIModule component to create a container for organizing content, with a title and nested MudBlazor grid items for input fields.

```razor
<HUIModule Title="Customer Information">
    <MudGrid>
        <MudItem xs="12" sm="6">
            <MudTextField Label="Name" />
        </MudItem>
        <MudItem xs="12" sm="6">
            <MudTextField Label="Email" />
        </MudItem>
    </MudGrid>
</HUIModule>
```

--------------------------------

### Main Layout with Hedin.UI Components

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/README.md

Implement the main layout of your Blazor application using Hedin.UI components like HUIThemeProvider, HUIMainContainer, HUIAppBar, and HUINavMenu. This example demonstrates how to set up the navigation menu dynamically.

```razor
@inherits LayoutComponentBase
@namespace MyApp

<HUIThemeProvider>
    <HUIMainContainer>
        <AppBarContent>
            <HUIAppBar LogoSrc="images/logo.png" LogoBrandSrc="images/brand.png" />
        </AppBarContent>
        <NavMenuContent>
            <HUINavMenu Items="@menuItems" />
        </NavMenuContent>
        <ChildContent>
            @Body
        </ChildContent>
    </HUIMainContainer>
</HUIThemeProvider>

@code {
    private List<HUIMenuItem> menuItems;

    protected override async Task OnInitializedAsync()
    {
        var assembly = typeof(Program).Assembly;
        var pageHelper = ScopedServices.GetRequiredService<IHUIPageHelper>();
        menuItems = await pageHelper.GetMenuItems(new[] { assembly });
    }
}
```

--------------------------------

### HUIModuleSection Usage Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-specialized.md

Illustrates nesting HUIModuleSection components within an HUIModule to create distinct sections for related fields, such as basic information and address.

```razor
<HUIModule Title="User Profile">
    <HUIModuleSection Title="Basic Information">
        <MudTextField Label="Full Name" />
        <MudTextField Label="Email" />
    </HUIModuleSection>
    
    <HUIModuleSection Title="Address">
        <MudTextField Label="Street" />
        <MudTextField Label="City" />
    </HUIModuleSection>
</HUIModule>
```

--------------------------------

### Registering a Page Component with HUIPageSettingsAttribute

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/types.md

Decorates page components to register them in the navigation menu. This example shows how to set the display name, order, and icon for a user management page.

```csharp
[Route("/users")]
[HUIPageSettings(
    displayName: "User Management",
    order: 10,
    icon: Icons.Material.Filled.People
)]
public class UsersPage : ComponentBase
{
}
```

--------------------------------

### HUIPageFilter Example Usage

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-data.md

Example of using HUIPageFilter within a HUIPage to create custom filter controls.

```razor
<HUIPage Header="Products">
    <HUIPageFilter OnFilterChanged="@OnFiltersChanged">
        <MudTextField @bind-Value="@search" 
                     Label="Product Name"
                     Variant="Variant.Outlined" />
        <MudSelect @bind-Value="@selectedCategory" 
                  Label="Category"
                  Variant="Variant.Outlined">
            <MudSelectItem Value="@("All")">All Categories</MudSelectItem>
            <MudSelectItem Value="@("Electronics")">Electronics</MudSelectItem>
        </MudSelect>
    </HUIPageFilter>
</HUIPage>
```

--------------------------------

### HUIPageTable Example Usage

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-data.md

Example of using HUIPageTable within a HUIPage for displaying items with custom columns and actions.

```razor
<HUIPage Header="Users">
    <HUIPageTable Items="@users" TItem="UserModel">
        <Columns>
            <PropertyColumn Property="x => x.Name" />
            <PropertyColumn Property="x => x.Email" />
            <TemplateColumn Title="Actions">
                <MudButton Size="Size.Small" OnClick="@(() => EditUser(context))">Edit</MudButton>
            </TemplateColumn>
        </Columns>
    </HUIPageTable>
</HUIPage>
```

--------------------------------

### HUILocalStorageSetting Constructor

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/types.md

Initializes a new instance of the HUILocalStorageSetting class. Auto-initializes with an empty table settings list and the dark theme as default.

```csharp
public HUILocalStorageSetting()
{
}
```

--------------------------------

### HUIIconButton Usage

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-core.md

Example of how to use the HUIIconButton component with an icon, tooltip, and click handler.

```razor
<HUIIconButton Icon="@Icons.Material.Filled.Edit" 
              Tooltip="Edit user" 
              Color="Color.Primary"
              OnClick="@HandleEdit" />
```

--------------------------------

### Blog Post Data Model and Initialization

Source: https://github.com/hedinbil/hedin-ui/blob/main/src/Hedin.UI.Demo/Pages/Components/BlogPost/BlogPost.razor.txt

Defines the data structure for a blog post, including properties for header, subheader, body text, image, publication details, and attachments. Also includes the initialization of sample blog data.

```csharp
@code {
    private bool isAdmin = true;
    private static readonly string veryLongText = @"Lorem ipsum dolor sit amet consectetur. asdasd asdasdad Leo commodo potenti mattis interdum feugiat scelerisque. Arcu etiam cursus netus morbi netus augue et. Amet tortor fermentum vel laoreet commodo pellentesque sit. Vel nullam nunc ac metus eleifend non feugiat eros. Et sem molestie congue ut turpis imperdiet eu sit leo. Arcu ut a amet blandit accumsan vitae. Id commodo vitae arcu in ac eget. Fermentum aliquam sed erat aliquet nisi sit urna erat. Ut vitae facilisis volutpat etiam commodo egestas. Dictumst scelerisque cras faucibus volutpat. Posuere purus rhoncus elementum id eget eros eleifend ornare lacus. Mauris sagittis auctor tincidunt id enim. Tristique lobortis at nulla nibh.";
    private static readonly List<HUIAttachmentModel> attachments = new() {
    new() { BlobPath = "BlogPathTest", Filename = "Testfile.txt", Id = 0, UploadDate = DateTime.Now, UploadedBy = "Mr.Goodshow" },
    new () { BlobPath = "BlogPathTest2", Filename = "Testfile2.txt", Id = 0, UploadDate = DateTime.Now, UploadedBy = "Mr.Goodshow again" }
    };

    private List<Blog> blogs = new() 
    {
        new Blog("Test Header", "Test SubHeader", veryLongText, "./blog.png", "Demo Alt Text", DateTime.Now, "Hedin IT", null),
        new Blog("Test Header", "Test SubHeader", veryLongText, "./blog.png", "Demo Alt Text", DateTime.Now, "Hedin IT", attachments),
        new Blog("Test Header", "Test SubHeader", veryLongText, null, null, DateTime.Now, "Hedin IT", null),
        new Blog("Test Header", "Test SubHeader", veryLongText, "./blog.png", "Demo Alt Text", DateTime.Now, "Hedin IT", attachments),
        new Blog("Test Header", "Test SubHeader", veryLongText, "./blog.png", "Demo Alt Text", DateTime.Now, "Hedin IT", null)
    };
    private record Blog(string Header, string SubHeader, string bodyText, string? ImgSrc, string? ImgAlt, DateTime PublishedDate, string PublisherName, List<HUIAttachmentModel>? Attchments);
}

```

--------------------------------

### HUIReconnectModal Usage

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-core.md

Example of how to use the HUIReconnectModal component. This modal is automatically displayed when a WebSocket connection is lost.

```razor
<HUIReconnectModal />
```

--------------------------------

### HUIMenuItem Constructor

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/types.md

Initializes a new instance of the HUIMenuItem class with specified display name, URL, and optional parameters for parent URL, policy, order, icon, tooltip, badge data, badge color, dot indicator, disabled state, and ID.

```csharp
public HUIMenuItem(
    string displayName,
    string url,
    string? parentUrl,
    string policy = "",
    int order = 0,
    string? icon = null,
    string? tooltip = null,
    string? badgeData = null,
    Color badgeColor = Color.Default,
    Severity? dot = null,
    bool disabled = false,
    string? id = null
)
```

--------------------------------

### Open a Simple Dialog

Source: https://github.com/hedinbil/hedin-ui/blob/main/src/Hedin.UI.Demo/Pages/Components/Dialog/Dialog.razor.txt

Demonstrates how to open a simple dialog using the IDialogService. It shows how to set dialog parameters, options, and handle the dialog result. The Snackbar is used to display a message based on whether the dialog was canceled.

```razor
@inject IDialogService DialogService
@inject ISnackbar Snackbar

<HUIButton Color="Color.Primary" Variant="Variant.Filled" OnClick="HandleDialogClick">Open Dialog</HUIButton>

@code {
    private async void HandleDialogClick()
    {
        var parameters = new DialogParameters<VehicelInfoDialog>();
        var options = new DialogOptions { MaxWidth = MaxWidth.Large };
        var dialog = DialogService.Show<VehicelInfoDialog>("Simple Dialog", parameters, options);
        var dialogResult = await dialog.Result;
        Snackbar.Add("Dialog was closed.", dialogResult.Canceled ? Severity.Error : Severity.Success);
    }
}
```

--------------------------------

### HUIInputRow Usage

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-forms.md

Example of using HUIInputRow to group related form controls like text fields.

```razor
<HUIInputRow Label="Contact Information">
    <MudTextField Label="Email" @bind-Value="@email" />
    <MudTextField Label="Phone" @bind-Value="@phone" />
</HUIInputRow>
```

--------------------------------

### Customizing Theme

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/README.md

Demonstrates how to customize an existing theme by overriding specific palette colors. This allows for fine-grained control over the application's appearance.

```csharp
var customTheme = HUITheme.Dark.Override(palette =>
{
    palette.Primary = "#1E7194";
    palette.Success = "#52FF00";
});
```

--------------------------------

### InvokeDelayedAsync Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/helpers-extensions.md

Ensures a minimum execution time for an EventCallback, useful for UI animations or displaying loading states.

```csharp
public static async Task InvokeDelayedAsync(
    this EventCallback func,
    int milliseconds)
{
    // ... implementation details ...
}
```

```csharp
@inject IJSRuntime JsRuntime

<HUIButton OnClick="@HandleSaveWithDelay">Save</HUIButton>

@code {
    private EventCallback SaveCallback => 
        EventCallback.Factory.Create(this, SaveAsync);

    private async Task HandleSaveWithDelay()
    {
        // Ensures minimum 500ms display of loading state
        await SaveCallback.InvokeDelayedAsync(500);
    }

    private async Task SaveAsync()
    {
        await ApiClient.SaveData(model);
    }
}
```

--------------------------------

### Page Authorization with HUIPageSettings

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/configuration.md

Demonstrates how to use the [Authorize] attribute and HUIPageSettings to restrict access to a page and configure its display in menus.

```csharp
[Route("/admin")]
[Authorize(Policy = "AdminOnly")]
[HUIPageSettings(DisplayName = "Admin Panel", Order = 100)]
public class AdminPage : ComponentBase
{
}
```

--------------------------------

### HUILocalStorageSettingsService.GetSettings

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/services.md

Retrieves user settings from browser local storage. If no settings are found, it initializes with default values.

```APIDOC
## HUILocalStorageSettingsService.GetSettings

### Description
Retrieves user settings from local storage, initializing with defaults if not found.

### Method
`GetSettings`

### Returns
`Task<HUILocalStorageSetting>` - Current settings object (never null)

### Example
```csharp
@inject ILocalStorageSettingsService LocalStorageSettings

@code {
    protected override async Task OnInitializedAsync()
    {
        var settings = await LocalStorageSettings.GetSettings();
        CurrentTheme = settings.Theme;
    }
}
```
```

--------------------------------

### HUIMultiSelect Usage

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-forms.md

Example of using HUIMultiSelect for selecting multiple items from a list with a label and placeholder. Includes a callback for when the selection changes.

```razor
<HUIMultiSelect T="CategoryModel"
               Items="@allCategories"
               SelectedItems="@selectedCategories"
               SelectedItemsChanged="@HandleSelectionChanged"
               Label="Select Categories"
               Placeholder="Choose categories..." />

@code {
    private HashSet<CategoryModel> selectedCategories = new();
    private List<CategoryModel> allCategories;

    private async Task HandleSelectionChanged(HashSet<CategoryModel> items)
    {
        selectedCategories = items;
        await SaveSelection();
    }
}
```

--------------------------------

### Use HUIButton Component

Source: https://github.com/hedinbil/hedin-ui/blob/main/docs/getting-started.md

Example of how to use the custom HUIButton component from Hedin.UI. This button is configured with primary color and filled variant.

```html
<HUIButton Color="Color.Primary" Variant="Variant.Filled">I'm a HUI button</HUIButton>
```

--------------------------------

### HUISuggestionBox Usage

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-forms.md

Demonstrates how to use the HUISuggestionBox component for user input with suggestions. It includes handling search queries and item selection callbacks.

```razor
<HUISuggestionBox T="UserModel"
                 Items="@availableUsers"
                 Value="@searchText"
                 ValueChanged="@HandleSearchChanged"
                 OnItemSelected="@HandleUserSelected"
                 Label="Find User"
                 Placeholder="Type to search..." />

@code {
    private string searchText;
    private List<UserModel> availableUsers;

    private async Task HandleSearchChanged(string query)
    {
        searchText = query;
        if (query.Length >= 2)
        {
            availableUsers = await UserApi.Search(query);
        }
    }

    private void HandleUserSelected(UserModel user)
    {
        SelectedUser = user;
    }
}
```

--------------------------------

### Use MudBlazor Button Component

Source: https://github.com/hedinbil/hedin-ui/blob/main/docs/getting-started.md

Example of how to use the original MudBlazor MudButton component. This button is configured with primary color and filled variant.

```html
<MudButton Color="Color.Primary" Variant="Variant.Filled">I'm a MudBlazor button</MudButton>
```

--------------------------------

### Configure Hedin.UI Settings

Source: https://github.com/hedinbil/hedin-ui/blob/main/docs/getting-started.md

Add these settings to your appsettings.json file to configure Hedin.UI. Key settings include AppTitle, ShowDevEnvWarning, and GoogleMapsApiKey.

```json
{
  "HedinUI": {
    "AppTitle": "Hedin UI",
    "ShowDevEnvWarning":  true,
    "GoogleMapsApiKey": ""
  }
}
```

--------------------------------

### Session State Management with IStateService

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/README.md

Demonstrates how to save and retrieve in-memory state using the IStateService. This is useful for temporary UI state within a browser tab.

```csharp
@inject IStateService StateService

@code {
    protected override void OnInitialized()
    {
        // Save state
        StateService.SaveState("FilterState", new { Term = "search" });
        
        // Retrieve state
        var saved = StateService.GetState<dynamic>("FilterState");
    }
}
```

--------------------------------

### HUIAttachmentCard Usage Example

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/components-specialized.md

Shows how to iterate through a list of attachments and render each one using the HUIAttachmentCard component. Allows for conditional display of a delete button.

```razor
@foreach (var file in attachments)
{
    <HUIAttachmentCard Attachment="@file"
                     CanDelete="@isOwner"
                     OnDownload="@HandleDownload"
                     OnDelete="@HandleDelete" />
}
```

--------------------------------

### DataGrid Extensions for Paging and Sorting

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/configuration.md

Shows how to use extension methods to apply paging and sorting to a query based on GridState for DataGrid components.

```csharp
using Hedin.UI.Extensions.Helpers;

var query = GetUsersQuery();
var gridState = /* GridState<User> */;

// Apply paging and sorting
var paged = query.ApplyPaging(gridState);
var sorted = paged.ApplySorting(gridState);
```

--------------------------------

### Add Font and Style References

Source: https://github.com/hedinbil/hedin-ui/blob/main/docs/getting-started.md

Include these HTML tags in your index.html or _Layout.cshtml/_Host.cshtml to reference necessary fonts and Hedin.UI/MudBlazor CSS files.

```html
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link href="_content/MudBlazor/MudBlazor.min.css" rel="stylesheet" />
<link href="_content/Hedin.UI/Hedin.UI.bundle.scp.css" rel="stylesheet" />
<link href="_content/Hedin.UI/css/hedin-ui.css" rel="stylesheet" />
```

--------------------------------

### Register Hedin.UI Theme Provider

Source: https://github.com/hedinbil/hedin-ui/blob/main/docs/getting-started.md

Add these components to the top of your MainLayout.razor file to set up the Hedin.UI theme provider, MudPopoverProvider, MudDialogProvider, and MudSnackbarProvider.

```razor
<HUIThemeProvider Theme="HUITheme.Dark" />
<MudPopoverProvider/>
<MudDialogProvider CloseOnEscapeKey="false" BackdropClick="true" FullWidth="true" CloseButton="false" />
<MudSnackbarProvider />
```

--------------------------------

### Main Namespace Imports

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/components-index.md

Import the main Hedin UI namespace and its services and helpers.

```csharp
@using Hedin.UI
@using Hedin.UI.Services
@using Hedin.UI.Extensions.Helpers
```

--------------------------------

### HUIPageHelper.GetMenuItems

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/services.md

Scans provided assemblies to discover components with route and page settings, then constructs a hierarchical menu structure for navigation.

```APIDOC
## HUIPageHelper.GetMenuItems

### Description
Scans assemblies for components with route and page settings attributes, building a hierarchical menu structure.

### Method
`GetMenuItems`

### Parameters
#### Path Parameters
- **assemblies** (Assembly[]) - Required - Array of assemblies to scan for components

### Returns
`Task<List<HUIMenuItem>>` - Root-level menu items with nested children

### Example
```csharp
@inject IHUIPageHelper PageHelper

@code {
    private List<HUIMenuItem> menuItems;

    protected override async Task OnInitializedAsync()
    {
        var appAssembly = typeof(Program).Assembly;
        menuItems = await PageHelper.GetMenuItems(new[] { appAssembly });
    }
}
```
```

--------------------------------

### Configuring a Data Grid

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/configuration.md

Shows how to configure a HUIDataGrid with common properties like column options, drag-and-drop reordering, resizing, hover effects, and striped rows.

```razor
<HUIDataGrid T="UserModel" 
            Items="@users"
            ShowColumnOptions="true"
            DragDropColumnReordering="true"
            ColumnResizeMode="ResizeMode.Container"
            Hover="true"
            Striped="true"
            Dense="false">
    <Columns>
        <PropertyColumn Property="x => x.Name" Title="Full Name" />
        <PropertyColumn Property="x => x.Email" Title="Email Address" />
    </Columns>
</HUIDataGrid>
```

--------------------------------

### HUIPageSettingsAttribute Constructor

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/types.md

Initializes a new instance of the HUIPageSettingsAttribute class with a display name and optional parameters for order, icon, disabled state, and ID.

```csharp
public HUIPageSettingsAttribute(
    string displayName,
    int order = 99999,
    string? icon = "",
    bool disabled = false,
    string id = ""
)
```

--------------------------------

### HUILocalStorageSettingsService.ClearSettings

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/services.md

Resets all user settings to their default values and saves them to local storage.

```APIDOC
## HUILocalStorageSettingsService.ClearSettings

### Description
Resets all settings to defaults and persists to local storage.

### Method
`ClearSettings`

### Returns
`Task`

### Example
```csharp
await LocalStorageSettings.ClearSettings();
```
```

--------------------------------

### Configure App Title and Environment Warnings

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/configuration.md

Configure application title and environment warnings via appsettings.json. The 'HedinUI' section allows setting 'AppTitle' and 'ShowDevEnvWarning'.

```json
{
  "HedinUI": {
    "AppTitle": "My Application",
    "ShowDevEnvWarning": true
  }
}
```

```json
{
  "HedinUI": {
    "AppTitle": "My Application [DEV]",
    "ShowDevEnvWarning": true
  }
}
```

```json
{
  "HedinUI": {
    "AppTitle": "My Application",
    "ShowDevEnvWarning": false
  }
}
```

--------------------------------

### HUISettingsService.ResetAsync

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/services.md

Resets all application settings to their default values.

```APIDOC
## HUISettingsService.ResetAsync

### Description
Resets all settings to default values.

### Method
`ResetAsync`

### Returns
`Task`

### Example
```csharp
@inject IHUISettingsService HUISettings

<button @onclick="ResetSettings">Reset to Defaults</button>

@code {
    private async Task ResetSettings()
    {
        await HUISettings.ResetAsync();
    }
}
```
```

--------------------------------

### Accessing Default HUI Themes

Source: https://github.com/hedinbil/hedin-ui/blob/main/_autodocs/api-reference/helpers-extensions.md

Shows how to access the predefined dark theme from the HUITheme static class. This is useful for applying a default dark theme to your application.

```csharp
var theme = HUITheme.Dark;  // Use dark theme
```