KNM.RazorComponents

A comprehensive, highly customizable Razor component library for Blazor and MAUI Hybrid (.NET 10+).

---

Features

Category	Component	Description
Data Entry	KNMInput<T>	21 input types, 7 layouts, password complexity, field compare, input mask, prefix/suffix
	KNMFormGenerator<T>	Auto-generated forms from model attributes, nested objects, conditional visibility
	KNMAutocomplete	Typeahead with async search, multi-select chips, strict mode
	KNMColorPicker	HSB spectrum, preset palette, hex input, alpha channel
	KNMOTP	Multi-digit OTP input with auto-advance, paste, separator
	KNMRating	5 icon types, half-star support, readonly mode
	KNMToggle	9 visual styles (Classic to Liquid), on/off text
	KNMDropzone	Drag-and-drop file upload, preview, progress
	KNMCaptcha	Shape-drawing CAPTCHA ($1 Unistroke), 8 themes
Data Display	KNMDataGrid<T>	DataTables-inspired: sort, filter, CRUD, export, group, inline edit
	KNMChart	Chart.js 4: bar, line, pie, doughnut, radar, mixed
	KNMBadge	Dot/text notification badge, 6 variants, 4 positions
	KNMChip	Selectable/closeable chips for tags and filters
	KNMGauge	SVG gauge: full/semi/quarter arc, color thresholds
	KNMProgressBar	Linear/circular, striped, indeterminate
	KNMSkeleton	Content placeholder: text, rect, circle, wave/pulse
	KNMTimeline	Vertical/horizontal, alternating layout, icons
	KNMCarousel	Slide/fade transitions, autoplay, touch, keyboard
	KNMTooltip	Top/bottom/left/right positioned tooltips
	KNMAvatar	Image/initials, status dot, avatar groups
	KNMAuditFooter	NIS2/GDPR audit trail (CreatedBy/At + UpdatedBy/At)
Feedback	KNMToastContainer	Programmatic toasts, 9 positions, auto-dismiss
	KNMAlert	SweetAlert-style confirm/prompt dialogs
	KNMModal	5 sizes, 11 positions, 3 animations, keyboard, modal stack
	KNMButton	17 variants, loading spinner, confirm mode, icons
	KNMNotification	Inline dismissable notification banners
Layout	KNMTabs	Horizontal/vertical, closeable, keyboard navigation
	KNMAccordion	Single/multi-open collapsible panels
	KNMBreadcrumb	Navigation trail with custom separators, icons and PageHeader RenderFragment
	KNMLanguageSelector	Multi-language switcher with 271 bundled flags (1x1/4x3), 3 modes (Dropdown/Inline/Compact), 3 shapes (Square/Round/Rectangular)
	KNMDrawer	Overlay/push/mini side panel
	KNMMenu	Dropdown menu, 4 positions, auto-close
	KNMStepper	Multi-step wizard with validation
	KNMTreeView	Hierarchical tree with checkboxes
	KNMSplitter	Resizable split panes, drag, collapse
	KNMFAB	Floating action button with speed dial
Scheduling	KNMScheduler	Day/Week/Month/Agenda/Timeline/Year views, RRULE recurrence

All modules use Fluent Builder API and can be selectively enabled/disabled in DI.

---

Installation

dotnet add package KNM.RazorComponents --version 1.1.0

---

What's New in v1.1.0

CSS Bootstrap Migration — Components now use standard Bootstrap 5.3 CSS classes instead of custom knm-* equivalents. This means:

• Better theme compatibility — Components inherit your Bootstrap theme automatically
• Smaller CSS footprint — ~450 lines of redundant CSS removed
• Standard override — Use Bootstrap's documented classes for customization

Components migrated: KNMCard, KNMModal, KNMCarousel, KNMMenu, KNMAccordion, KNMProgressBar, KNMBreadcrumb, KNMBadge.

Zero build warnings — All 495 build warnings resolved (XML documentation, nullable references, async issues).

Breaking change: If you targeted custom knm-card-*, knm-modal-*, knm-carousel__*, knm-menu-*, knm-accordion__*, knm-progress__bar--*, knm-breadcrumb__*, or knm-badge--{color} classes in your CSS, update them to their Bootstrap equivalents. See the migration guide.

---

Quick Start

1. Register services

// Program.cs
builder.Services.AddHttpClient(); // Required for email validation
builder.Services.AddKnmRazorComponents()
    .WithStyle(KnmInputStyle.Default)          // Global input style
    .WithGlobalLayout(LayoutType.Floating)      // Global layout fallback
    .WithPasswordComplexity(o =>                // Password strength rules
    {
        o.RequiredLength = 8;
        o.RequireUpperCase = true;
        o.RequireLowerCase = true;
        o.RequireDigit = true;
        o.RequireSpecialCharacter = true;
    })
    .WithForms()
    .WithGrid()
    .WithModals()
    .WithToast(o => { o.Position = ToastPosition.TopRight; o.MaxVisible = 5; })
    .WithScheduler(o => o.Locale = "it-IT")
    .WithOtp()
    .WithChart()
    .WithCaptcha()
    .WithToggle(o => { o.DefaultStyle = KnmToggleStyle.Classic; });

2. Add asset placeholders

All CSS (including Phosphor Icons) and JS are bundled in the DLL and auto-injected at runtime via <template> placeholders. The placeholder controls exactly where in the DOM the assets are injected, giving you full control over CSS/JS load order:

<!-- App.razor or _Host.cshtml -->

<!-- In <head>, after Bootstrap CSS -->
<link href="lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<template data-knm="css"></template>
<link rel="stylesheet" href="app.css" />

<!-- Before </body>, after Bootstrap JS -->
<script src="lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<template data-knm="js"></template>
<script src="_framework/blazor.web.js"></script>

The <template> element is inert (not rendered by the browser) and survives Blazor SSR rendering. At runtime, each placeholder is replaced in-place with the actual <link> or <script> tag.

Migration from v1.6.14 or earlier: Replace <!--[knm-css]--> and <!--[knm-js]--> HTML comments with the <template> tags above. The old comment syntax is still supported as a fallback but may not work correctly in Blazor Server SSR mode (comments can be stripped during rendering).

No CDN required — Phosphor Bold/Fill icons and all component styles are included.

3. Add imports

All namespaces (Components, Models, Builders, Utilities) are auto-imported via the NuGet .targets file. You only need a single line:

@* _Imports.razor *@
@using KNM.RazorComponents.Components

---

KNMInput

21 input types: Text, Email, Password, Number, Date, DateTime, Time, Select, Checkbox, Switch, TextArea, RadioButtonList, ButtonSelect, Color, Range, File, Tel, Search, Month, Week, Hidden.

Layouts

Layout	Description
Vertical	Label above input (default)
Horizontal	Label left, input right
Floating	Floating/Material-style label
Bordered	Material Design bordered (label floats into top border)
Borderless	Material Design borderless (underline only)
Rounded	Pill-style rounded corners
Filled	Material Design filled (tinted background with underline)

Usage

<KNMInput T="string"
          Value="@model.Name"
          ValueChanged="@(v => model.Name = v ?? "")"
          For="@(() => model.Name)"
          LabelOverride="Full Name"
          InputTypeOverride="KnmInputType.Text"
          Layout="LayoutType.Floating" />

Password with Complexity Check

Enable the inline strength meter to show real-time password requirements:

<KNMInput T="string"
          Value="@model.Password"
          ValueChanged="@(v => model.Password = v ?? "")"
          For="@(() => model.Password)"
          InputTypeOverride="KnmInputType.Password"
          LabelOverride="New Password"
          ComplexityCheck="true" />

Configure requirements globally via DI:

builder.Services.AddKnmRazorComponents()
    .WithPasswordComplexity(o =>
    {
        o.RequiredLength = 10;
        o.RequireUpperCase = true;
        o.RequireLowerCase = true;
        o.RequireDigit = true;
        o.RequireSpecialCharacter = false;
    });

Password Confirmation (Field Compare)

Compare two fields for equality (e.g. password confirmation):

<KNMInput T="string"
          Value="@model.ConfirmPassword"
          ValueChanged="@(v => model.ConfirmPassword = v ?? "")"
          For="@(() => model.ConfirmPassword)"
          InputTypeOverride="KnmInputType.Password"
          LabelOverride="Confirm Password"
          CompareFields="true"
          CompareTo="@model.NewPassword"
          CompareToLabel="New Password" />

Input Mask

Apply format masks to enforce input patterns in real-time:

<KNMInput T="string"
          @bind-Value="phone"
          InputTypeOverride="KnmInputType.Tel"
          LabelOverride="Phone"
          Mask="(###) ###-####" />

Mask characters:

Character	Matches	Example
#	Digit (0-9)	### → 123
A	Letter (a-z, A-Z)	AA → IT
*	Any alphanumeric	*** → A1b
Other	Literal separator (auto-inserted)	(, ), -, /, .

Examples:

Mask	Input	Result
(###) ###-####	1234567890	(123) 456-7890
##/##/####	25031990	25/03/1990
AA-####	IT1234	IT-1234
###.###.###-##	12345678901	123.456.789-01

Prefix & Suffix Adornments

@* Suffix icon *@
<KNMInput T="string" @bind-Value="email"
          SuffixIcon="ph-envelope"
          InputTypeOverride="KnmInputType.Email" />

@* Clickable suffix button *@
<KNMInput T="string" @bind-Value="search"
          SuffixIcon="ph-magnifying-glass"
          SuffixAsButton="true"
          OnSuffixClick="HandleSearch" />

@* Prefix text *@
<KNMInput T="string" @bind-Value="website"
          PrefixText="https://"
          LabelOverride="Website" />

@* Prefix + Suffix *@
<KNMInput T="decimal" @bind-Value="price"
          PrefixText="€"
          SuffixText=".00"
          LabelOverride="Price" />

Parameters

Parameter	Type	Default	Description
Value	T	—	Two-way bound value
InputTypeOverride	KnmInputType?	null	Override auto-detected input type
Layout	LayoutType?	null	Layout variant (falls back to global)
LabelOverride	string?	null	Custom label text
PlaceholderOverride	string?	null	Custom placeholder text
Size	KnmInputSize	Normal	Small, Normal, Large
Disabled	bool	false	Disable the input
HelperText	string?	null	Help text below the input
ComplexityCheck	bool	false	Enable password strength meter
CompareFields	bool	false	Enable field comparison validation
CompareTo	T?	null	Value to compare against
CompareToLabel	string	""	Label of the compared field (for error message)
Mask	string?	null	Input mask pattern (#=digit, A=letter, *=any)
DebounceMs	int	0	Debounce delay in milliseconds
PrefixIcon	string?	null	Phosphor icon class for left adornment
PrefixText	string?	null	Text for left adornment
SuffixIcon	string?	null	Phosphor icon class for right adornment
SuffixText	string?	null	Text for right adornment
SuffixAsButton	bool	false	Make suffix clickable
OnSuffixClick	EventCallback	—	Fired when suffix button is clicked
TextAreaMinRows	int	3	Minimum rows for TextArea
TextAreaMaxRows	int	0 (unlimited)	Maximum rows for TextArea auto-expand
CustomClass	string?	null	Additional CSS class on the input element

CSS Override

Parameter	Scope
CustomClass	Input element

CSS Variables

Variable	Default	Description
--knm-primary	#0d6efd	Primary accent color
--knm-input-border-color	#ced4da	Input border color
--knm-input-focus-color	var(--knm-primary)	Focus ring color
--knm-input-toggle-color	#666	Password eye toggle color
--knm-input-adornment-color	#666	Prefix/suffix adornment color
--knm-input-filled-bg	rgba(0,0,0,0.06)	Filled layout background
--knm-input-filled-bg-focus	rgba(0,0,0,0.09)	Filled layout focus background
--knm-input-filled-placeholder	#333	Filled layout placeholder color
--knm-input-border-width	1px	Border width (Bordered/Borderless)
--knm-input-outline-border-color	var(--bs-primary)	Bordered/Borderless active color

---

KNMSlider

Generic numeric range slider extracted from KNMInput.Range (which now delegates to it). Supports any numeric TValue (int, double, decimal, float, ...).

Usage

<KNMSlider TValue="int" @bind-Value="_volume" Min="0" Max="100"
           Style="KNMSliderStyle.Filled" ShowLabel="true" Unit="%" />

Fluent builder

private readonly KNMSliderOptions<int> _opts =
    KNMSliderBuilder<int>.Create()
        .WithRange(0, 100)
        .WithStep(5)
        .AsFilled()
        .Large()
        .ShowLabel()
        .ShowBubble()
        .WithUnit("%")
        .Build();

<KNMSlider TValue="int" @bind-Value="_value" Options="_opts" />

7 visual styles (KNMSliderStyle)

Style	Description
Default	Standard Bootstrap form-range — neutral grey track + circular thumb
Filled	Material Design — colored progress on the left side of the thumb
Stepped	Discrete steps with visible tick markers under the track
Pill	Chunky pill — thick rounded track + large soft thumb (touch-friendly)
Minimal	Hairline minimal — ultra-thin track, tiny thumb (iOS-like)
Gradient	Full-spectrum gradient track (configurable via GradientFrom / GradientTo)
Neumorphic	Soft inset track with subtle shadow (matches KNMToggle Neumorphic)

3 sizes (KNMSliderSize)

Small · Medium (default) · Large

Parameters

Parameter	Type	Default	Description
Value	TValue	—	Current value (two-way binding)
ValueChanged	EventCallback<TValue>	—	Two-way binding callback
Options	KNMSliderOptions<TValue>?	null	Pre-built options object (overrides individual params)
Label	string?	null	Field label rendered above (Vertical) or aside (Horizontal) the slider
HelperText	string?	null	Helper text displayed below the slider
Layout	LayoutType?	null	Outer layout. Falls back to global. Floating → Vertical
Min	TValue?	0	Minimum value
Max	TValue?	100	Maximum value
Step	TValue?	1	Step increment
Style	KNMSliderStyle?	inferred	Visual style. When null, auto-mapped from Layout
Size	KNMSliderSize	Medium	Size preset
ShowTicks	bool	false	Render tick markers via native <datalist>
ShowLabel	bool	false	Display the current value next to the slider
ShowBubble	bool	false	Floating bubble follows the thumb with the current value
Unit	string?	null	Unit suffix appended to displayed value (e.g. "%", "px")
GradientFrom	string?	null	Gradient start color (used by Gradient style)
GradientTo	string?	null	Gradient end color (used by Gradient style)
Disabled	bool	false	Disables the slider

CSS Override (CssClass parameters)

Parameter	Applied to
CssClass	Outer .knm-slider wrapper
TrackCssClass	Native <input type="range"> track element
BubbleCssClass	Floating value bubble (<output>)
LabelCssClass	Inline value label (<span>)

CSS Variables

All colors and dimensions are exposed via --knm-slider-* custom properties — override on :root, on the wrapper, or via inline style="--knm-slider-...: ...":

Variable	Default	Description
--knm-slider-track-bg	#e9ecef	Track background color
--knm-slider-track-height	6px	Track height
--knm-slider-track-radius	999px	Track border radius
--knm-slider-fill-color	var(--knm-primary)	Fill color (Filled/Stepped/Pill/Neumorphic)
--knm-slider-thumb-size	18px	Thumb diameter
--knm-slider-thumb-bg	var(--knm-primary)	Thumb fill color
--knm-slider-thumb-border	#ffffff	Thumb border color
--knm-slider-thumb-border-width	2px	Thumb border width
--knm-slider-thumb-shadow	0 2px 6px rgba(0,0,0,0.15)	Thumb box-shadow
--knm-slider-bubble-bg	var(--knm-primary)	Bubble background
--knm-slider-bubble-color	#ffffff	Bubble text color
--knm-slider-bubble-radius	6px	Bubble border radius
--knm-slider-bubble-padding	2px 8px	Bubble padding
--knm-slider-bubble-font-size	0.8125rem	Bubble font size
--knm-slider-label-color	var(--bs-body-color)	Inline label text color
--knm-slider-label-font-size	0.875rem	Inline label font size
--knm-slider-label-min-width	3ch	Inline label minimum width
--knm-slider-tick-color	#adb5bd	Tick marker color (Stepped)
--knm-slider-tick-size	4px	Tick marker size (Stepped)
--knm-slider-grad-from	#ef4444	Gradient start (Gradient style)
--knm-slider-grad-to	#22c55e	Gradient end (Gradient style)
--knm-slider-disabled-opacity	0.55	Opacity in disabled state
--knm-slider-progress	0%	(internal — set by component) current thumb position 0–100%

Per-instance override example:

<div style="--knm-slider-fill-color: #8b5cf6; --knm-slider-thumb-bg: #8b5cf6;">
    <KNMSlider TValue="int" @bind-Value="_v" Style="KNMSliderStyle.Filled" />
</div>

Dark mode ([data-bs-theme="dark"]) automatically adjusts track-bg, thumb-border, tick-color, label-color.

---

KNMRadioGroup

Generic radio group extracted from KNMInput.RadioButtonList (which delegates to it). 5 visual styles (Default / Chip / Pill / ButtonGroup / Minimal), Vertical / Horizontal direction, custom item templates.

<KNMRadioGroup TValue="string" @bind-Value="_choice" Items="_items"
               Style="KNMRadioGroupStyle.Chip"
               Direction="RadioGroupDirection.Horizontal" />

See the dedicated wiki page for the full reference.

---

KNMFormGenerator

Auto-generates forms from model attributes with validation, nested objects, and conditional visibility.

Model decoration

public class CustomerModel
{
    [KnmGenerator(Label = "First Name", Order = 1)]
    public string FirstName { get; set; } = "";

    [KnmGenerator(InputType = KnmInputType.Email, Order = 3)]
    public string Email { get; set; } = "";

    [KnmGenerator(VisibleWhen = "Country=IT")]
    public string FiscalCode { get; set; } = "";
}

Usage

<KNMFormGenerator TItem="CustomerModel"
                  Model="@customer"
                  Options="@formOptions"
                  OnValidSubmit="HandleSubmit" />

@code {
    private CustomerModel customer = new();
    private var formOptions = KnmFormBuilder<CustomerModel>.Create()
        .Grid(columnsPerRow: 2).FloatingLabels().ShowRequired().Build();
}

---

KNMDataGrid

DataTables-inspired grid with full CRUD, sorting, filtering, grouping, inline edit, and export.

Model decoration

[KnmGridDecorator(DefaultPageSize = 20)]
public class ProductModel
{
    [KnmColumn(Header = "Product", IsSortable = true, IsFilterable = true)]
    public string Name { get; set; } = "";

    [KnmColumn(Header = "Category", RenderAs = ColumnRenderMode.Badge)]
    public ProductCategory Category { get; set; }

    [KnmColumn(Header = "Price", Format = "C2", Alignment = ColumnAlignment.Right)]
    [KnmSensitive(Level = SensitivityLevel.Financial)]
    public decimal Price { get; set; }
}

Usage

<KNMDataGrid TItem="ProductModel"
             Items="@products"
             Options="@gridOptions"
             ColumnConfig="@columnConfig"
             Delegates="@gridDelegates" />

@code {
    var (gridOptions, columnConfig, gridDelegates) =
        KnmGridBuilder<ProductModel>.Create()
            .WithPagination(20).WithCrud().WithExport()
            .WithGroupBy("Category").WithInlineEdit()
            .Build();
}

Column Freeze (Sticky Columns)

Pin columns to the left or right side so they stay visible during horizontal scroll.

// Via attribute
[KNMColumn(IsFrozen = true)] // left by default
[KNMColumn(IsFrozen = true, FrozenPosition = FrozenPosition.Right)]

// Via builder
.WithFrozenColumn("Name")
.WithFrozenColumn("Actions", FrozenPosition.Right)

Multiple frozen columns are supported — cumulative offset is calculated automatically.

RowDetailTemplate

Custom expandable detail row below each data row. A toggle button appears automatically.

<KNMDataGrid TItem="OrderDto" Items="_orders" Options="opts" ColumnConfig="cols" Delegates="dels"
             RowDetailTemplate="@(order => @<div class="p-3">
                 <h6>Order Items</h6>
                 <KNMDataGrid TItem="OrderItemDto" Items="order.Items" ... />
             </div>)" />

Takes priority over ResponsiveDetail when both are configured.

Sort & Filter State Persistence

When .WithPersistConfig() is enabled, sort state (column + direction, including multi-sort) and filter state (column filters, range filters, advanced filter operators) are automatically saved and restored from localStorage. Columns removed from model are gracefully skipped on restore.

Row Reorder

Enable drag-and-drop row reordering:

.WithRowReorder()

Each row gets a ⠿ drag handle. Fires OnRowReordered with (int FromIndex, int ToIndex). Automatically disabled when sorting is active.

Cell Render Modes

Auto | Text | Badge | Tag | Image | Icon | Boolean | Progress | Custom

CSS Override

Parameter	Scope
CssClass	Table wrapper
HeaderCssClass	Table header

---

KNMModal

Unified modal with stack management, keyboard support, and full ARIA.

<KNMModal Options="@modalOptions"
          @bind-IsVisible="isOpen">
    <p>Modal body content here.</p>
</KNMModal>

@code {
    bool isOpen;
    var (modalOptions, _) = KnmModalBuilder.Create()
        .WithTitle("Confirm Action").Large().Centered().FadeIn()
        .WithConfirmButton("Save").WithCancelButton().Build();
}

Sizes: Small | Medium | Large | ExtraLarge | Fullscreen

Animations: Fade | Slide | Zoom

CSS classes: Uses Bootstrap modal, modal-dialog, modal-content, modal-header, modal-body, modal-footer, modal-sm/lg/xl, modal-fullscreen, modal-dialog-centered, modal-dialog-scrollable. Custom animations: knm-modal-fade, knm-modal-slide, knm-modal-zoom.

Modal Stacking

Multiple modals can be open simultaneously. Each gets z-index +10 for proper layering. Scroll lock is ref-counted: page scroll is only re-enabled when the last modal closes. Escape key only closes the topmost modal.

Return Value API

Await a typed result from a modal without callbacks:

@inject KNMModalService ModalService

// Register before opening
var resultTask = ModalService.AwaitResultAsync<bool>(modal.ModalId);
_isVisible = true;
var confirmed = await resultTask;

// In modal content, before close:
ModalService.SetResult(modal.ModalId, true);

---

KNMScheduler

Full calendar with 9 views (Day, Week, WorkWeek, Month, Agenda, Timeline, TimelineMonth, Year, YearPlanner), RRULE recurrence, drag-and-drop, resize, resources, and server-side data loading.

Basic Usage (Static Events)

<KNMScheduler Events="@events"
              Options="@schedOptions"
              OnEventCreated="HandleCreated"
              OnEventUpdated="HandleUpdated"
              OnEventDeleted="HandleDeleted" />

@code {
    var schedOptions = KnmSchedulerBuilder.Create()
        .WithDefaultView(SchedulerViewType.Week)
        .BusinessHours(new TimeOnly(9, 0), new TimeOnly(18, 0))
        .WithNowIndicator().WithWeekNumbers().With12HourFormat()
        .WithLocale("it-IT").Build();
}

Server-side Data Loading

Replace static Events with an async DataLoader that fetches per visible range:

<KNMScheduler DataLoader="LoadEventsAsync"
              OnEventCreated="HandleCreated"
              OnDataLoaderError="HandleError"
              @ref="_scheduler" />

@code {
    private KNMScheduler? _scheduler;

    private async Task<List<SchedulerEvent>> LoadEventsAsync(DateRange range, CancellationToken ct)
    {
        return await Api.GetEventsAsync(range.Start, range.End, ct);
    }

    private async Task HandleCreated(SchedulerEvent e)
    {
        await Api.CreateAsync(e);
        await _scheduler!.ReloadAsync(); // re-fetch from server
    }
}

Built-in debouncing (150ms), cancellation of stale requests, and in-memory caching (SchedulerCachePolicy.InMemory).

Parameter	Description
DataLoader	Func<DateRange, CancellationToken, Task<List<SchedulerEvent>>>
ShowLoadingOverlay	Spinner overlay during fetch (default: true)
CachePolicy	None or InMemory (default)
DataLoaderDebounceMs	Debounce window in ms (default: 150)
OnDataLoaderError	EventCallback<Exception> for error handling
ReloadAsync()	Forces re-fetch, bypassing cache

Two-way Binding

Sync navigation state with your page:

<KNMScheduler @bind-CurrentDate="_date"
              @bind-CurrentView="_view"
              OnViewChanged="@(e => Console.WriteLine($"{e.OldView} → {e.NewView}"))"
              OnDateChanged="@(e => Console.WriteLine($"{e.OldDate:d} → {e.NewDate:d}"))" />

YearPlanner View

Horizontal 12-month timeline with events as colored bars spanning days. Ideal for vacations, project phases, long-range planning.

var opts = KnmSchedulerBuilder.Create()
    .WithDefaultView(SchedulerViewType.YearPlanner)
    .AllowViews(SchedulerViewType.YearPlanner, SchedulerViewType.Year, SchedulerViewType.Month)
    .Build();

---

KNMToastContainer & KNMAlert

Pure C# toast notifications and SweetAlert-style dialogs.

Toast

@* In MainLayout.razor *@
<KNMToastContainer />

@* In any component *@
@inject IKnmToastService ToastService

<button @onclick='() => ToastService.ShowSuccess("Saved!", "Record saved successfully")'>
    Save
</button>

Alert (SweetAlert replacement)

var confirmed = await ToastService.ConfirmAsync("Are you sure?", "This cannot be undone");
if (confirmed) { /* proceed */ }

var name = await ToastService.PromptAsync("Enter name", "New Record");

---

KNMButton

17 Bootstrap variants, 3 sizes, loading spinner, confirm mode, Phosphor icons.

<KNMButton Text="Save"
           Variant="KnmButtonVariant.Primary"
           Icon="ph-bold ph-floppy-disk"
           OnClick="HandleSave" />

<KNMButton Text="Delete"
           Variant="KnmButtonVariant.Danger"
           ConfirmMode="true"
           OnClick="HandleDelete" />

---

KNMOTP

Multi-digit OTP input with auto-advance, paste distribution, and separator.

<KNMOTP @bind-Value="otpCode"
        Length="6"
        Separator="-"
        SeparatorInterval="3"
        OnCompleted="HandleOtpComplete" />

---

KNMChart

Chart.js 4 wrapper with 9 chart types. Lazy-loads Chart.js CDN on first use.

<KNMChart Data="@chartData" Options="@chartOptions" />

@code {
    var chartOptions = KnmChartBuilder.Create().Bar().WithTitle("Revenue").Stacked().Build();
    var chartData = new ChartData
    {
        Labels = ["Jan", "Feb", "Mar"],
        Datasets = [new ChartDataset
        {
            Label = "2026",
            Data = [12000, 19000, 15000],
            BackgroundColor = ["#4CAF50", "#2196F3", "#FF9800"]
        }]
    };
}

Chart types: Bar | Line | Pie | Doughnut | Radar | PolarArea | Bubble | Scatter | HorizontalBar

---

KNMRichTextEditor

WYSIWYG HTML editor with contentEditable, configurable toolbar, source toggle.

<KNMRichTextEditor @bind-Value="_html" MinHeight="200px" MaxHeight="500px" />

Default toolbar: Bold, Italic, Underline, Strikethrough, Headings, Alignment, Lists, Link, Image, Table Insert, Quote, Code, HR, Undo/Redo.

Table Insert: Visual 8×8 grid picker — hover to preview size, click to insert a Bootstrap-styled table.

---

KNMCaptcha

Shape-drawing CAPTCHA using the $1 Unistroke Recognizer. 14 shapes, 8 themes.

<KNMCaptcha Options="@captchaOptions" OnVerified="HandleVerified" />

@code {
    var captchaOptions = KnmCaptchaBuilder.Create()
        .WithTheme(CaptchaTheme.Blue).WithScoreThreshold(0.7).Build();
}

---

KNMAuditFooter

NIS2/GDPR compliant audit trail display.

<KNMAuditFooter CreatedBy="admin" CreatedAt="@DateTime.Now.AddDays(-30)"
                UpdatedBy="editor" UpdatedAt="@DateTime.Now" />

---

KNMAutocomplete

Typeahead autocomplete with async search, multi-select chips, and strict mode.

@* Async search *@
<KNMAutocomplete @bind-Value="city"
                 SearchFunc="SearchCities"
                 MinChars="2"
                 DebounceMs="300"
                 Placeholder="Search city..." />

@* Multi-select with chips *@
<KNMAutocomplete @bind-Value="tag"
                 Items="allTags"
                 MultiSelect="true"
                 @bind-SelectedItems="selectedTags"
                 Strict="true" />

Parameter	Type	Default	Description
Value	string	—	Two-way bound input value
SearchFunc	Func<string, Task<IEnumerable<string>>>	null	Async search function
Items	IEnumerable<string>	null	Static items for local filtering
MinChars	int	2	Min chars before search triggers
DebounceMs	int	300	Debounce delay in ms
MultiSelect	bool	false	Enable multi-select with chips
Strict	bool	false	Value must match an item
ItemTemplate	RenderFragment<string>	null	Custom suggestion template

---

KNMColorPicker

HSB spectrum color picker with presets, hex input, and optional alpha channel.

<KNMColorPicker @bind-Value="color"
                ShowSpectrum="true"
                ShowPresets="true"
                ShowAlpha="false" />

Parameter	Type	Default	Description
Value	string	#3b82f6	Hex color value
ShowSpectrum	bool	true	Show HSB spectrum picker
ShowPresets	bool	true	Show preset palette grid
ShowHexInput	bool	true	Show hex text input
ShowAlpha	bool	false	Show alpha/opacity slider
Presets	List<string>	12 colors	Custom preset colors

---

KNMRating

Star/icon rating with half-star support and multiple icon types.

<KNMRating @bind-Value="rating"
           MaxValue="5"
           AllowHalf="true"
           Icon="RatingIcon.Star"
           ShowValue="true" />

Parameter	Type	Default	Description
Value	double	0	Current rating value
MaxValue	int	5	Maximum rating value
AllowHalf	bool	false	Allow half-star increments
ReadOnly	bool	false	Non-interactive display mode
ShowValue	bool	false	Show numeric value next to stars
Icon	RatingIcon	Star	Icon type: Star, Heart, ThumbUp, Circle, Flag
Size	string	"md"	Size: "sm", "md", "lg"

---

KNMToggle

Customizable toggle switch with 9 visual styles.

<KNMToggle @bind-Value="isEnabled"
           Style="KnmToggleStyle.Neumorphic"
           Size="KnmToggleSize.Medium"
           OnText="ON"
           OffText="OFF" />

Styles: Classic | Material | Neumorphic | Glassmorphism | Retro | Neon | Minimal | ThreeD | Liquid

Configure defaults globally:

.WithToggle(o => { o.DefaultStyle = KnmToggleStyle.Neumorphic; o.DefaultSize = KnmToggleSize.Small; })

---

KNMDropzone

Drag-and-drop file upload with preview and progress tracking.

<KNMDropzone MaxFileSize="5242880"
             MaxFiles="3"
             Accept="image/*,.pdf"
             OnFileAdded="HandleFile" />

Parameter	Type	Default	Description
MaxFileSize	long	10 MB	Maximum file size in bytes
MaxFiles	int	10	Maximum number of files
Multiple	bool	true	Allow multiple file selection
Accept	string	null	MIME types / extensions filter
ShowProgress	bool	false	Show progress bar during read

---

KNMBadge

Notification badge with dot and text modes.

<KNMBadge Content="3" Variant="KnmBadgeVariant.Danger">
    <KNMButton Text="Inbox" Icon="ph-bold ph-bell" />
</KNMBadge>

<KNMBadge Dot="true" Variant="KnmBadgeVariant.Success">
    <KNMAvatar Initials="JD" />
</KNMBadge>

Variants: Primary	Success	Danger	Warning	Info	Secondary

CSS classes: Uses Bootstrap badge, text-bg-primary/success/danger/warning/info/secondary. Custom positioning: knm-badge-wrapper, knm-badge--dot, knm-badge--top-right/left, knm-badge--bottom-right/left.

---

KNMChip

Selectable and closeable chips for tags, filters, and selections.

<KNMChip Text="Blazor" Icon="ph-bold ph-code"
         Closeable="true" OnClose="RemoveTag" />

<KNMChip Text="Active" Variant="KnmChipVariant.Success"
         @bind-Selected="isActive" />

---

KNMCard

Bootstrap-based card component with optional header, footer, image, and style variants.

<KNMCard Title="Dashboard" Icon="ph-bold ph-chart-bar" Subtitle="Monthly overview">
    <p>Card body content here.</p>
    <FooterContent>
        <KNMButton Text="View Details" Variant="KnmButtonVariant.Primary" />
    </FooterContent>
</KNMCard>

CSS overrides (since v1.6.2): CssClass (root .card), HeaderCssClass (.card-header), BodyCssClass (.card-body), FooterCssClass (.card-footer).

<KNMCard CssClass="position-sticky top-1" BodyCssClass="p-3">
    <ChildContent>...</ChildContent>
</KNMCard>

CSS classes: Uses Bootstrap card, card-header, card-body, card-footer, card-title, card-subtitle, card-img-top/bottom. Style variants: knm-style-rounded, knm-style-borderless, knm-style-underline (applied via GlobalStyleCssClass).

---

KNMGauge

SVG gauge with full, semi, and quarter arc types and color thresholds.

<KNMGauge Value="75" Min="0" Max="100"
          Type="GaugeType.Semi"
          Unit="%" Label="CPU"
          ShowValue="true" ShowMinMax="true" />

Types: Full (360) | Semi (180) | Quarter (90)

---

KNMProgressBar

Linear and circular progress indicators with indeterminate mode.

<KNMProgressBar Value="65" Variant="KnmProgressVariant.Success" ShowLabel="true" />
<KNMProgressBar Mode="KnmProgressMode.Circular" Value="80" />
<KNMProgressBar Indeterminate="true" Striped="true" />

CSS Variables: --knm-progress-height, --knm-progress-circular-size, --knm-progress-circular-stroke

CSS classes: Uses Bootstrap progress, progress-bar, bg-primary/success/danger/warning/info, progress-bar-striped, progress-bar-animated. Custom: knm-progress--indeterminate, knm-progress-circular*.

---

KNMSkeleton

Content placeholder with pulse and wave animations.

<KNMSkeleton Type="KnmSkeletonType.Text" Lines="3" />
<KNMSkeleton Type="KnmSkeletonType.Circle" Width="48px" Height="48px" />
<KNMSkeleton Type="KnmSkeletonType.Rect" Width="100%" Height="200px" Animation="KnmSkeletonAnimation.Wave" />

Types: Text	Rect	Circle	Avatar

---

KNMTimeline

Vertical/horizontal timeline with alternating layout and icons.

<KNMTimeline Alternate="true">
    <KNMTimelineItem Title="Order Placed" Subtitle="2026-03-19"
                     Icon="ph-bold ph-package" Variant="KnmTimelineItemVariant.Success">
        Your order has been confirmed.
    </KNMTimelineItem>
    <KNMTimelineItem Title="Shipped" Subtitle="2026-03-20"
                     Icon="ph-bold ph-truck" Variant="KnmTimelineItemVariant.Info">
        Package is on the way.
    </KNMTimelineItem>
</KNMTimeline>

---

KNMCarousel

Image/content carousel with slide, fade, and autoplay.

<KNMCarousel Items="slides"
             Transition="CarouselTransition.Fade"
             AutoPlay="true"
             IntervalMs="5000"
             Height="400px" />

Parameter	Type	Default	Description
Items	List<CarouselItem>	—	Slides to display
Transition	CarouselTransition	Slide	Slide, Fade, None
AutoPlay	bool	true	Auto-advance slides
IntervalMs	int	5000	Interval between slides (ms)
ShowArrows	bool	true	Show prev/next arrows
ShowIndicators	bool	true	Show dot indicators
ItemTemplate	RenderFragment<CarouselItem>	null	Custom slide template

CSS classes: Uses Bootstrap carousel, carousel-inner, carousel-item, carousel-control-prev/next, carousel-indicators, carousel-caption, carousel-fade.

---

KNMTabs

Horizontal/vertical tabs with closeable tabs and keyboard navigation.

<KNMTabs @bind-ActiveIndex="activeTab" Closeable="true">
    <KNMTab Title="General">General settings content</KNMTab>
    <KNMTab Title="Security" Icon="ph-bold ph-lock">Security content</KNMTab>
    <KNMTab Title="Notifications">Notification preferences</KNMTab>
</KNMTabs>

Orientations: Horizontal | Vertical Keyboard: ArrowLeft/Right (H), ArrowUp/Down (V), Home, End

---

KNMAccordion

Collapsible panel groups with single or multi-open mode, 3 size variants, and per-item CSS overrides.

KNMAccordion Parameters

Parameter	Type	Default	Description
MultiOpen	bool	false	Allow multiple panels open simultaneously
Size	KNMAccordionSize	Default	Visual density: Default, Small, Large
CssClass	string?	null	Additional CSS class on accordion container
ChildContent	RenderFragment?	—	KNMAccordionItem children

KNMAccordionItem Parameters

Parameter	Type	Default	Description
Title	string	""	Header text
Icon	string?	null	Phosphor icon class (e.g. "ph-bold ph-info")
Disabled	bool	false	Prevents toggling
InitiallyExpanded	bool	false	Panel starts expanded
HeaderCssClass	string?	null	CSS class on the header button
BodyCssClass	string?	null	CSS class on the body container
ChildContent	RenderFragment?	—	Panel body content

Size Variants

Size	CSS Class	Description
Default	(none)	Standard Bootstrap sizing
Small	knm-accordion-sm	Compact: 0.5rem padding, 0.875rem font, transparent header
Large	knm-accordion-lg	Prominent: 1.25rem padding, 1.125rem font

Usage

@* Basic *@
<KNMAccordion>
    <KNMAccordionItem Title="Section 1" Icon="ph-bold ph-info" InitiallyExpanded="true">
        Content for section 1
    </KNMAccordionItem>
    <KNMAccordionItem Title="Section 2">Content for section 2</KNMAccordionItem>
</KNMAccordion>

@* Compact for modals/sidebars *@
<KNMAccordion Size="KNMAccordionSize.Small" MultiOpen="true">
    <KNMAccordionItem Title="Permissions" Icon="ph-bold ph-shield-check">
        <p>Read, Write, Delete access.</p>
    </KNMAccordionItem>
</KNMAccordion>

@* Custom CSS classes per item *@
<KNMAccordion>
    <KNMAccordionItem Title="Custom" HeaderCssClass="bg-success bg-opacity-10" BodyCssClass="bg-light">
        Green header, light body.
    </KNMAccordionItem>
</KNMAccordion>

CSS Variables

--knm-accordion-bg, --knm-accordion-color, --knm-accordion-border-color, --knm-accordion-btn-bg, --knm-accordion-btn-color, --knm-accordion-btn-focus-border, --knm-accordion-btn-focus-shadow, --knm-accordion-active-bg, --knm-accordion-active-color, --knm-accordion-transition, --knm-accordion-radius

CSS Class Overrides

Target	Parameter	Applies to
Container	CssClass on KNMAccordion	.accordion div
Header	HeaderCssClass on KNMAccordionItem	.accordion-button
Body	BodyCssClass on KNMAccordionItem	.accordion-body

CSS classes: Uses Bootstrap accordion, accordion-item, accordion-header, accordion-button, accordion-collapse, accordion-body.

---

KNMBreadcrumb

Navigation breadcrumb trail with custom separators and icons.

<KNMBreadcrumb Items="@breadcrumbs" Separator=">" OnItemClick="Navigate" />

@code {
    List<BreadcrumbItem> breadcrumbs =
    [
        new() { Text = "Home", Href = "/", Icon = "ph-bold ph-house" },
        new() { Text = "Products", Href = "/products" },
        new() { Text = "Detail", IsActive = true }
    ];
}

CSS classes: Uses Bootstrap breadcrumb, breadcrumb-item.

---

KNMDrawer

Side panel with overlay, push, and mini modes.

<KNMDrawer @bind-IsOpen="drawerOpen"
           Mode="KnmDrawerMode.Push"
           Position="KnmDrawerPosition.Left"
           Width="280px">
    <nav>Sidebar navigation</nav>
</KNMDrawer>

Modes: Overlay (backdrop + click-outside) | Push (shifts main content) | Mini (collapsed icon bar)

---

KNMMenu

Dropdown menu with configurable position and auto-close.

<KNMMenu @bind-IsOpen="menuOpen" Position="KnmMenuPosition.BottomEnd">
    <ActivatorContent>
        <KNMButton Text="Actions" Icon="ph-bold ph-caret-down" />
    </ActivatorContent>
    <ChildContent>
        <KNMMenuItem Text="Edit" Icon="ph-bold ph-pencil" OnClick="Edit" />
        <KNMMenuItem Text="Delete" Icon="ph-bold ph-trash" OnClick="Delete" />
    </ChildContent>
</KNMMenu>

Positions: BottomStart | BottomEnd | TopStart | TopEnd

CSS classes: Uses Bootstrap dropdown, dropup, dropdown-menu, dropdown-item, dropdown-divider, dropdown-menu-end.

---

KNMStepper

Multi-step wizard with linear mode and per-step validation.

<KNMStepper @bind-ActiveStep="step" Linear="true" OnCompleted="Finish">
    <KNMStep Title="Account" Validation="ValidateAccount">
        <KNMInput T="string" @bind-Value="email" InputTypeOverride="KnmInputType.Email" />
    </KNMStep>
    <KNMStep Title="Profile" Optional="true">
        <KNMInput T="string" @bind-Value="name" />
    </KNMStep>
    <KNMStep Title="Confirm">
        <p>Review and confirm your details.</p>
    </KNMStep>
</KNMStepper>

---

KNMTreeView

Hierarchical tree with checkboxes, expand/collapse, and custom node templates.

<KNMTreeView Items="@treeNodes"
             ShowCheckboxes="true"
             @bind-SelectedItems="selected" />

---

KNMSplitter

Resizable split panes with drag, collapse, and min/max constraints.

<KNMSplitter Orientation="SplitterOrientation.Horizontal"
             InitialPosition="30"
             Collapsible="true"
             MinFirstPane="20"
             MaxFirstPane="80">
    <FirstPane>Left panel</FirstPane>
    <SecondPane>Right panel</SecondPane>
</KNMSplitter>

---

KNMAvatar

User avatar with image, initials fallback, and presence status.

<KNMAvatar Src="/images/user.jpg" Alt="John Doe" Size="KnmAvatarSize.Large" />
<KNMAvatar Initials="JD" Variant="KnmAvatarVariant.Primary" Status="KnmOnlineStatus.Online" />

@* Avatar group with overflow *@
<KNMAvatarGroup Max="3">
    <KNMAvatar Initials="AB" />
    <KNMAvatar Initials="CD" />
    <KNMAvatar Initials="EF" />
    <KNMAvatar Initials="GH" />
</KNMAvatarGroup>

---

KNMBreadcrumb

Hierarchical navigation trail with optional PageHeader slot for the page title and action buttons.

<KNMBreadcrumb Items="_items" />

<KNMBreadcrumb Items="_items">
    <PageHeader>
        <h1 class="knm-page-title">
            <i class="ph-bold ph-users"></i> Users
        </h1>
        <div class="ms-auto">
            <KNMButton Options="NewBtn" OnClick="CreateNew" />
        </div>
    </PageHeader>
</KNMBreadcrumb>

Fluent builder

private readonly KNMBreadcrumbOptions _opts = KNMBreadcrumbBuilder.Create()
    .WithItem("Home", "/", "ph-bold ph-house")
    .WithItem("Admin", "/admin")
    .WithActiveItem("Edit", "ph-bold ph-pencil")
    .WithSeparator("›")
    .Build();

Parameters

Parameter	Type	Description
Items	List<BreadcrumbItem>?	Items to render.
Options	KNMBreadcrumbOptions?	Pre-built options (takes precedence).
Separator	string	Divider character (default /).
PageHeader	RenderFragment?	Optional content rendered below the breadcrumb.
OnItemClick	EventCallback<BreadcrumbItem>	Fired on non-active item click.
CssClass	string?	Extra class on the inner <nav> element.
WrapperCssClass	string?	Extra class on the outer wrapper.

CSS variables

Variable	Default
--knm-breadcrumb-color	var(--knm-primary)
--knm-breadcrumb-hover-color	var(--bs-primary-text-emphasis)
--knm-breadcrumb-active-color	var(--bs-secondary-color)
--knm-breadcrumb-separator-color	var(--bs-secondary-color)
--knm-breadcrumb-page-header-gap	0.25rem
--knm-breadcrumb-page-header-margin-bottom	1.25rem
--knm-breadcrumb-page-title-color	var(--bs-body-color)
--knm-breadcrumb-page-title-font-size	1.5rem
--knm-breadcrumb-page-title-font-weight	600

---

KNMLanguageSelector

Multi-language switcher with 271 bundled flag icons (lipis/flag-icons, MIT) shipped in both 1x1 and 4x3 SVG sets. Three rendering modes and three flag shapes — covers everything from a header strip to a compact icon-only switcher.

<KNMLanguageSelector @bind-Value="_iso" Languages="_languages" />

@code {
    private string? _iso = "it-IT";
    private readonly List<LanguageItem> _languages = [
        new() { Iso = "it-IT", Label = "Italiano" },
        new() { Iso = "en-GB", Label = "English (UK)" },
        new() { Iso = "fr-FR", Label = "Français" }
    ];
}

Modes

Mode	When to use
Dropdown (default)	Standard select with text label, optional flag-in-trigger via ShowFlagInTrigger="true". Inherits the global input layout.
Inline	Renders all languages side-by-side as a strip of buttons.
Compact	Icon-only trigger (no caret, no label) — click to open a small floating popup.

Flag shapes (Shape parameter)

Shape	Description	SVG set used
Square	Flat square	1x1/
Round	Circular icon (border-radius: 50%)	1x1/
Rectangular (default)	Flat 4:3 strip	4x3/

Compact size presets

Size	Pixel width
Small	16 px
Medium (default)	24 px
Large	32 px

Fluent builder

private readonly KNMLanguageSelectorOptions _opts = KNMLanguageSelectorBuilder.Create()
    .WithLanguage("it-IT", "Italiano")
    .WithLanguage("en-GB", "English")
    .WithLanguage("fr-FR", "Français")
    .AsCompact()        // Mode = Compact
    .Round()            // Shape = Round
    .Large()            // Size = Large
    .Build();

<KNMLanguageSelector @bind-Value="_iso" Options="_opts" />

Auto-switch (zero JavaScript)

When AutoSwitch="true", on selection the component navigates to CultureEndpoint?culture=<iso>&redirect=<currentUri> (default /culture/set) with forceLoad. The consumer registers a tiny endpoint that writes the .AspNetCore.Culture cookie:

app.MapGet("/culture/set", (HttpContext ctx, string culture, string? redirect) =>
{
    ctx.Response.Cookies.Append(
        CookieRequestCultureProvider.DefaultCookieName,
        CookieRequestCultureProvider.MakeCookieValue(new RequestCulture(culture)),
        new CookieOptions { Expires = DateTimeOffset.UtcNow.AddYears(1), Path = "/", IsEssential = true });
    return Results.Redirect(redirect ?? "/");
});

Parameters

Parameter	Type	Default	Description
Languages	List<LanguageItem>?	—	Source list.
Options	KNMLanguageSelectorOptions?	null	Pre-built options (takes precedence).
Value	string?	—	Two-way bound ISO code (@bind-Value).
Mode	KNMLanguageSelectorMode	Dropdown	Dropdown / Inline / Compact.
Shape	KNMFlagShape	Rectangular	Square / Round / Rectangular.
Size	KNMLanguageSelectorSize?	null	Compact preset: Small / Medium / Large.
FlagSize	int	24	Explicit flag width (overridden by Size when set).
ShowLabel	bool	true	Show textual label in inline / compact items.
ShowFlagInTrigger	bool	false	Show flag next to label inside the dropdown trigger.
Layout	LayoutType?	null	Override the global input layout for the underlying KNMSelect.
AutoSwitch	bool	false	Navigate to CultureEndpoint and reload after selection.
CultureEndpoint	string	/culture/set	Server endpoint URL.
OnLanguageChanged	EventCallback<LanguageItem>	—	Fires after every selection.
WrapperCssClass / TriggerCssClass / DropdownCssClass / ItemCssClass / FlagCssClass	string?	—	Per-element class overrides.

LanguageItem

public sealed class LanguageItem
{
    public string Iso { get; set; } = "";          // e.g. "it-IT", "en-US", "fr"
    public string Label { get; set; } = "";        // e.g. "Italiano"
    public string? FlagCountryCode { get; set; }   // optional override (e.g. "gb" for "en")
    public string? FlagUrl { get; set; }           // optional explicit URL (skips bundle)
}

CSS variables

Variable	Default
--knm-langsel-gap	0.5rem
--knm-langsel-radius	0.375rem
--knm-langsel-flag-radius	2px
--knm-langsel-item-padding-y / -x	0.375rem / 0.625rem
--knm-langsel-item-bg	transparent
--knm-langsel-item-hover-bg	var(--bs-secondary-bg)
--knm-langsel-item-active-bg	var(--knm-primary)
--knm-langsel-item-active-color	#fff
--knm-langsel-text-color	var(--bs-body-color)
--knm-langsel-border-color	var(--bs-border-color)
--knm-langsel-flag-shadow	0 0 0 1px rgba(0, 0, 0, 0.05)

Bundled flags path

_content/KNM.RazorComponents/flags/{1x1|4x3}/{cc}.svg

Provided by the lipis/flag-icons project (MIT license — see wwwroot/flags/LICENSE-flag-icons.txt).

---

KNMFAB

Floating Action Button with speed dial and configurable direction.

<KNMFAB Icon="ph-bold ph-plus"
        Position="KnmFabPosition.BottomRight"
        Variant="KnmButtonVariant.Primary">
    <KNMFabAction Icon="ph-bold ph-pencil" Label="Edit" OnClick="Edit" />
    <KNMFabAction Icon="ph-bold ph-share" Label="Share" OnClick="Share" />
</KNMFAB>

Positions: TopLeft	TopRight	BottomLeft	BottomRight

---

KNMFieldset

Themed fieldset/legend wrapper with accent stripe, size variants, and full CSS variable theming.

Parameters

Parameter	Type	Default	Description
Title	string?	null	Legend text
Icon	string?	null	Phosphor icon class before title (e.g. "ph-bold ph-desktop")
AccentColor	string?	null	Bootstrap name (primary, success, danger, etc.) or raw CSS color
Disabled	bool	false	Native fieldset disabled state
Size	KNMFieldsetSize	Default	Visual density: Default, Small, Large
CssClass	string?	null	Additional CSS class on root <fieldset> element
ChildContent	RenderFragment	—	Body content
HeaderTemplate	RenderFragment?	null	Custom legend template (overrides Title + Icon)

Usage

@* Basic with accent *@
<KNMFieldset Title="Device Info" Icon="ph-bold ph-desktop" AccentColor="success">
    <p>Device details here.</p>
</KNMFieldset>

@* Small size, disabled *@
<KNMFieldset Title="Read Only" Size="KNMFieldsetSize.Small" Disabled="true">
    <p>This section is disabled.</p>
</KNMFieldset>

@* Custom header template *@
<KNMFieldset AccentColor="primary">
    <HeaderTemplate>
        <span class="fw-bold text-primary">Custom Legend</span>
    </HeaderTemplate>
    <ChildContent>
        <p>Body with a fully custom legend.</p>
    </ChildContent>
</KNMFieldset>

CSS Variables

--knm-fieldset-border-color, --knm-fieldset-border-width, --knm-fieldset-border-radius, --knm-fieldset-padding, --knm-fieldset-legend-font-size, --knm-fieldset-legend-font-weight, --knm-fieldset-legend-color, --knm-fieldset-accent-width, --knm-fieldset-bg, --knm-fieldset-accent-primary, --knm-fieldset-accent-secondary, --knm-fieldset-accent-success, --knm-fieldset-accent-danger, --knm-fieldset-accent-warning, --knm-fieldset-accent-info, --knm-fieldset-accent-light, --knm-fieldset-accent-dark

CSS Class Overrides

Target	Parameter	Applies to
Root	CssClass on KNMFieldset	<fieldset> element

---

Attributes Reference

Attribute	Target	Key Properties
[KnmGenerator]	Property	Label, InputType, Order, Visible, Placeholder, Ignore, VisibleWhen, DependsOn
[KnmFormGroup]	Property	GroupName, GroupOrder
[KnmColumn]	Property	Header, Order, Visible, RenderAs, IsSortable, IsFilterable, Format, Alignment
[KnmGridDecorator]	Class	DefaultPageSize, AllowSorting, AllowFiltering, AllowExport
[KnmSensitive]	Property	Level (Personal/Special/Financial/Credential), MaskInPreview
[KnmInput]	Property	InputType, Label, Order, MaxValue, MinValue, Step
[KnmAudit]	Property	IsUserInsert, IsUserUpdate, IsDateInsert, IsDateUpdate

---

CSS Theming

All colors use CSS custom properties. Override in your app:

:root {
    --knm-primary: #0d6efd;
    --knm-success: #198754;
    --knm-danger: #dc3545;
    --knm-warning: #ffc107;
    --knm-info: #0dcaf0;
}

Dark mode: add data-bs-theme="dark" to the root element. All components adapt automatically.

---

Localization

6 locales supported: it-IT (default), en-US, en-GB, fr-FR, de-DE, es-ES.

Configure via DI:

.WithScheduler(o => o.Locale = "de-DE")

---

Dependencies

Package	Version	Purpose
Microsoft.AspNetCore.Components.Web	10.0.0	Blazor framework
ClosedXML	0.105.0	Excel export
DnsClient	1.8.0	Email MX validation
Bootstrap 5.3	bundled	CSS framework (consumer provides)
Phosphor Icons	bundled	Icon library (included in DLL)
Chart.js 4	bundled	Charts (included in DLL, lazy-loaded)

---

License

MIT © KoNiMa S.r.l.