Compare commits

..

62 Commits

Author SHA1 Message Date
stm
d8a7e0c5cd Revert "Progress - select"
This reverts commit d0370a6be479c03517fa76345cef1d4d7bd63ee2.
2023-02-01 14:57:49 +01:00
stm
d0370a6be4 Progress - select 2023-01-30 14:25:39 +01:00
stm
1dabf54e39 Merge branch 'features/refactor' of https://git.tompit.com/Connected/Connected.Components into features/refactor 2023-01-30 07:55:55 +01:00
stm
3c256f989f ComponentsN - new components 2023-01-30 07:55:53 +01:00
stm
1a424571ad Progress 2023-01-25 09:35:20 +01:00
stm
b178bbb9b0 Progress 2023-01-20 14:53:32 +01:00
stm
c3b267dfc4 Progress - Categorizing variables and methods 2023-01-20 11:10:16 +01:00
stm
46c396e33f Progress 2023-01-18 13:32:25 +01:00
stm
3ea88592ce Prograss - Input field 2023-01-18 10:27:39 +01:00
stm
c5e97f9600 Progress 2023-01-17 10:15:49 +01:00
stm
272d19fe8a Progress 2023-01-13 14:49:37 +01:00
stm
1b35631693 Progress input 2023-01-13 12:27:18 +01:00
stm
cbdd376e91 progress input 2023-01-13 12:27:06 +01:00
stm
edcc8661e3 Merge branch 'features/refactor' of https://git.tompit.com/Connected/Connected.Components into features/refactor 2023-01-13 12:26:05 +01:00
stm
b7db83fe15 Input progress 2023-01-13 12:25:51 +01:00
stm
a04a0f07e2 Progress 2023-01-13 12:19:02 +01:00
25606b926b Drawer showcase page 2023-01-12 15:38:39 +01:00
stm
9f1214fd9f DrawerContainer - Clipping fix 2023-01-11 14:15:10 +01:00
stm
b01b4e42df MainContent - rework 2023-01-11 13:31:29 +01:00
stm
56cef22d26 Layout - Class apply fix 2023-01-11 13:15:30 +01:00
stm
f4c89aed85 Drawer - class fix 2023-01-11 10:43:32 +01:00
stm
f79cc037a8 Drawer 2023-01-11 10:36:20 +01:00
stm
366f2bae6c Merge branch 'features/refactor' of https://git.tompit.com/Connected/Connected.Components into features/refactor 2023-01-11 10:34:44 +01:00
stm
51bbce3407 Drawer - classes, Grid, Item - rework 2023-01-11 10:34:27 +01:00
e190dc9ddf Create sample page for Alerts 2023-01-10 14:46:26 +01:00
cfddc25b1c Test border radius 2023-01-10 14:13:54 +01:00
a0b6b82efd Test colors 2023-01-10 14:13:54 +01:00
5ab2444fbc Update classes 2023-01-10 14:13:54 +01:00
5e4b7e2028 Add class 2023-01-10 14:13:54 +01:00
Matija Koželj
9a1a62537e Update nuget.config and tools to use custom scss compiler 2023-01-10 13:52:01 +01:00
stm
cdff1f4ec4 Minor fixes 2023-01-10 13:22:49 +01:00
stm
8c61578623 Changes: Drawer, Tabs, Layout 2023-01-10 13:03:51 +01:00
stm
8d5445a509 Drawer - fixes
Container - rework
2023-01-10 07:57:54 +01:00
stm
7c8ca6fc47 Drawer - changes, removed tags used for testing 2023-01-10 07:50:16 +01:00
stm
63a84810f5 Drawer, DrwerContainer, DrawerHeader - rework 2023-01-09 14:51:00 +01:00
Matija Koželj
d042b55ac6 [WIP]: Transfer commit 2023-01-03 14:16:28 +01:00
Matija Koželj
c33820a8a7 Refactor ButtonBase, remove styling properties and rename per specs 2022-12-27 11:00:20 +01:00
Matija Koželj
52a577df0d Refactor the ButtonType enum 2022-12-27 10:49:52 +01:00
a32c588e82 WIP: Add more examples of Alerts 2022-12-21 16:14:17 +01:00
f2bbe04eb5 Change Alert justification 2022-12-21 16:14:17 +01:00
f5bfb347af Add ds store to git ignore 2022-12-21 16:14:17 +01:00
Matija Koželj
88710e4e3b Refactor the alert component
All styling properties and classes have been removed in favor of named
subcomponents. Any and all component styling should be through classes.
2022-12-21 15:51:12 +01:00
Matija Koželj
3b6045c3e1 Add regular .css files to .gitignore
As the projects should depend only on sass files, this should prevent
compilation and cache problems in the future as well as reduce commit loads.
2022-12-21 15:50:06 +01:00
Matija Koželj
663103f1d7 Add scripts to start watch of scss files during runtime 2022-12-20 14:32:12 +01:00
Matija Koželj
1110bbf850 Add nuget.config to point to the connected public package repository 2022-12-20 13:47:59 +01:00
Matija Koželj
580161eb25 Fix compiler settings to match new version of webcompiler 2022-12-20 13:47:42 +01:00
Matija Koželj
12798c20f7 Increase version of webcompiler tool 2022-12-20 13:47:20 +01:00
Matija Koželj
fe1ef0fbc9 [WIP]: Save semi-refactored state for transfer 2022-12-19 14:44:52 +01:00
Matija Koželj
53dd3bec33 [WIP]
Fix styles and js not loading
Replace all mud-* styles with non-mud alternatives
Add css/js artifacts to ignore list in .gitignore

Required steps for successful build were missing critical pieces:
- Required the excubo web compiler for js/css compilation (https://github.com/excubo-ag/WebCompiler)
- Required .csproj modification to include js/css compilation at build
- Required minified files added to the final index.html page as styles/scripts
2022-12-12 19:39:25 +01:00
2630b4eddd Merge pull request 'moved to src folder' (#3) from NamespaceRenaming into develop
Reviewed-on: http://207.154.223.116:3000/Connected/connected.components/pulls/3
2022-12-12 16:00:24 +00:00
d261bc0a4e Merge branch 'develop' into NamespaceRenaming 2022-12-12 16:00:04 +00:00
Tom Pipinic
dfe628ffce moved to src folder 2022-12-11 22:03:02 +01:00
2126cb7644 Merge pull request 'Refacoring namespaces' (#2) from NamespaceRenaming into develop
Reviewed-on: http://207.154.223.116:3000/Connected/connected.components/pulls/2
2022-12-08 14:09:31 +00:00
Tom Pipinic
4d44867ff4 Refacoring namespaces 2022-12-08 14:43:36 +01:00
Matija Koželj
c4ece6e9b7 [WIP] Add showcase and solution. Refactor base files. 2022-12-07 17:16:31 +01:00
Matija Koželj
be914e4b2e [WIP] Refactor converters and dependant components. 2022-12-07 17:12:28 +01:00
Matija Koželj
6f91dacb0c [WIP] Refactor components to match converter refactor 2022-12-06 19:18:32 +01:00
Matija Koželj
f3ae953772 Remove reference to unused project 2022-12-06 19:18:01 +01:00
Matija Koželj
2daf5b6c1e [WIP] Refactor default converters 2022-12-06 19:17:23 +01:00
Matija Koželj
82594cff34 Remove connected specific files 2022-12-06 19:16:52 +01:00
Matija Koželj
f62c1f267e Refactor UIComponent
Removed unnecessary Category tags.
Removed Tag property as it usually leads to component abuse.
Refactored class format.
2022-12-06 15:23:41 +01:00
Matija Koželj
08a8a5338f Initial commit 2022-12-02 14:54:26 +01:00
695 changed files with 84604 additions and 0 deletions

226
.editorconfig Normal file
View File

@ -0,0 +1,226 @@
# Remove the line below if you want to inherit .editorconfig settings from higher directories
root = true
# C# files
[*.cs]
#### Core EditorConfig Options ####
# Indentation and spacing
indent_size = 3
indent_style = tab
tab_width = 3
# New line preferences
end_of_line = crlf
insert_final_newline = false
#### .NET Coding Conventions ####
# Organize usings
dotnet_separate_import_directive_groups = false
dotnet_sort_system_directives_first = false
file_header_template = unset
# this. and Me. preferences
dotnet_style_qualification_for_event = false:suggestion
dotnet_style_qualification_for_field = false:suggestion
dotnet_style_qualification_for_method = false:suggestion
dotnet_style_qualification_for_property = false:suggestion
# Language keywords vs BCL types preferences
dotnet_style_predefined_type_for_locals_parameters_members = true:suggestion
dotnet_style_predefined_type_for_member_access = true:suggestion
# Parentheses preferences
dotnet_style_parentheses_in_arithmetic_binary_operators = always_for_clarity:suggestion
dotnet_style_parentheses_in_other_binary_operators = always_for_clarity:suggestion
dotnet_style_parentheses_in_other_operators = never_if_unnecessary:suggestion
dotnet_style_parentheses_in_relational_binary_operators = always_for_clarity:suggestion
# Modifier preferences
dotnet_style_require_accessibility_modifiers = for_non_interface_members
# Expression-level preferences
dotnet_style_coalesce_expression = true
dotnet_style_collection_initializer = true
dotnet_style_explicit_tuple_names = true
dotnet_style_namespace_match_folder = true
dotnet_style_null_propagation = true
dotnet_style_object_initializer = true
dotnet_style_operator_placement_when_wrapping = beginning_of_line
dotnet_style_prefer_auto_properties = true:suggestion
dotnet_style_prefer_compound_assignment = true
dotnet_style_prefer_conditional_expression_over_assignment = true:suggestion
dotnet_style_prefer_conditional_expression_over_return = true:suggestion
dotnet_style_prefer_foreach_explicit_cast_in_source = when_strongly_typed
dotnet_style_prefer_inferred_anonymous_type_member_names = true
dotnet_style_prefer_inferred_tuple_names = false
dotnet_style_prefer_is_null_check_over_reference_equality_method = true
dotnet_style_prefer_simplified_boolean_expressions = true
dotnet_style_prefer_simplified_interpolation = true
# Field preferences
dotnet_style_readonly_field = true
# Parameter preferences
dotnet_code_quality_unused_parameters = all
# Suppression preferences
dotnet_remove_unnecessary_suppression_exclusions = 0
# New line preferences
dotnet_style_allow_multiple_blank_lines_experimental = false:suggestion
dotnet_style_allow_statement_immediately_after_block_experimental = false:suggestion
#### C# Coding Conventions ####
# var preferences
csharp_style_var_elsewhere = true:warning
csharp_style_var_for_built_in_types = true:warning
csharp_style_var_when_type_is_apparent = true:warning
# Expression-bodied members
csharp_style_expression_bodied_accessors = when_on_single_line:suggestion
csharp_style_expression_bodied_constructors = when_on_single_line:suggestion
csharp_style_expression_bodied_indexers = when_on_single_line:suggestion
csharp_style_expression_bodied_lambdas = when_on_single_line:suggestion
csharp_style_expression_bodied_local_functions = when_on_single_line:suggestion
csharp_style_expression_bodied_methods = when_on_single_line:suggestion
csharp_style_expression_bodied_operators = when_on_single_line:suggestion
csharp_style_expression_bodied_properties = when_on_single_line:suggestion
# Pattern matching preferences
csharp_style_pattern_matching_over_as_with_null_check = true
csharp_style_pattern_matching_over_is_with_cast_check = true
csharp_style_prefer_extended_property_pattern = true
csharp_style_prefer_not_pattern = true
csharp_style_prefer_pattern_matching = true:suggestion
csharp_style_prefer_switch_expression = true
# Null-checking preferences
csharp_style_conditional_delegate_call = true
# Modifier preferences
csharp_prefer_static_local_function = true
csharp_preferred_modifier_order = public,private,protected,internal,static,extern,new,virtual,abstract,sealed,override,readonly,unsafe,volatile,async
csharp_style_prefer_readonly_struct = true
# Code-block preferences
csharp_prefer_braces = when_multiline:suggestion
csharp_prefer_simple_using_statement = true
csharp_style_namespace_declarations = file_scoped:warning
csharp_style_prefer_method_group_conversion = true:suggestion
csharp_style_prefer_top_level_statements = false:suggestion
# Expression-level preferences
csharp_prefer_simple_default_expression = true
csharp_style_deconstructed_variable_declaration = true
csharp_style_implicit_object_creation_when_type_is_apparent = true
csharp_style_inlined_variable_declaration = true
csharp_style_prefer_index_operator = true
csharp_style_prefer_local_over_anonymous_function = true
csharp_style_prefer_null_check_over_type_check = true
csharp_style_prefer_range_operator = true
csharp_style_prefer_tuple_swap = true
csharp_style_prefer_utf8_string_literals = true
csharp_style_throw_expression = true
csharp_style_unused_value_assignment_preference = discard_variable
csharp_style_unused_value_expression_statement_preference = discard_variable:suggestion
# 'using' directive preferences
csharp_using_directive_placement = outside_namespace:suggestion
# New line preferences
csharp_style_allow_blank_line_after_colon_in_constructor_initializer_experimental = true:suggestion
csharp_style_allow_blank_lines_between_consecutive_braces_experimental = false:suggestion
csharp_style_allow_embedded_statements_on_same_line_experimental = false:suggestion
#### C# Formatting Rules ####
# New line preferences
csharp_new_line_before_catch = true
csharp_new_line_before_else = true
csharp_new_line_before_finally = true
csharp_new_line_before_members_in_anonymous_types = true
csharp_new_line_before_members_in_object_initializers = true
csharp_new_line_before_open_brace = all
csharp_new_line_between_query_expression_clauses = true
# Indentation preferences
csharp_indent_block_contents = true
csharp_indent_braces = false
csharp_indent_case_contents = true
csharp_indent_case_contents_when_block = true
csharp_indent_labels = no_change
csharp_indent_switch_labels = true
# Space preferences
csharp_space_after_cast = false
csharp_space_after_colon_in_inheritance_clause = true
csharp_space_after_comma = true
csharp_space_after_dot = false
csharp_space_after_keywords_in_control_flow_statements = true
csharp_space_after_semicolon_in_for_statement = true
csharp_space_around_binary_operators = before_and_after
csharp_space_around_declaration_statements = false
csharp_space_before_colon_in_inheritance_clause = true
csharp_space_before_comma = false
csharp_space_before_dot = false
csharp_space_before_open_square_brackets = false
csharp_space_before_semicolon_in_for_statement = false
csharp_space_between_empty_square_brackets = false
csharp_space_between_method_call_empty_parameter_list_parentheses = false
csharp_space_between_method_call_name_and_opening_parenthesis = false
csharp_space_between_method_call_parameter_list_parentheses = false
csharp_space_between_method_declaration_empty_parameter_list_parentheses = false
csharp_space_between_method_declaration_name_and_open_parenthesis = false
csharp_space_between_method_declaration_parameter_list_parentheses = false
csharp_space_between_parentheses = false
csharp_space_between_square_brackets = false
# Wrapping preferences
csharp_preserve_single_line_blocks = true
csharp_preserve_single_line_statements = true
#### Naming styles ####
# Naming rules
dotnet_naming_rule.interface_should_be_begins_with_i.severity = suggestion
dotnet_naming_rule.interface_should_be_begins_with_i.symbols = interface
dotnet_naming_rule.interface_should_be_begins_with_i.style = begins_with_i
dotnet_naming_rule.types_should_be_pascal_case.severity = suggestion
dotnet_naming_rule.types_should_be_pascal_case.symbols = types
dotnet_naming_rule.types_should_be_pascal_case.style = pascal_case
dotnet_naming_rule.non_field_members_should_be_pascal_case.severity = suggestion
dotnet_naming_rule.non_field_members_should_be_pascal_case.symbols = non_field_members
dotnet_naming_rule.non_field_members_should_be_pascal_case.style = pascal_case
# Symbol specifications
dotnet_naming_symbols.interface.applicable_kinds = interface
dotnet_naming_symbols.interface.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected
dotnet_naming_symbols.interface.required_modifiers =
dotnet_naming_symbols.types.applicable_kinds = class, struct, interface, enum
dotnet_naming_symbols.types.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected
dotnet_naming_symbols.types.required_modifiers =
dotnet_naming_symbols.non_field_members.applicable_kinds = property, event, method
dotnet_naming_symbols.non_field_members.applicable_accessibilities = public, internal, private, protected, protected_internal, private_protected
dotnet_naming_symbols.non_field_members.required_modifiers =
# Naming styles
dotnet_naming_style.pascal_case.required_prefix =
dotnet_naming_style.pascal_case.required_suffix =
dotnet_naming_style.pascal_case.word_separator =
dotnet_naming_style.pascal_case.capitalization = pascal_case
dotnet_naming_style.begins_with_i.required_prefix = I
dotnet_naming_style.begins_with_i.required_suffix =
dotnet_naming_style.begins_with_i.word_separator =
dotnet_naming_style.begins_with_i.capitalization = pascal_case

19
.gitignore vendored
View File

@ -412,3 +412,22 @@ FodyWeavers.xsd
# Built Visual Studio Code Extensions # Built Visual Studio Code Extensions
*.vsix *.vsix
# Css files
**.css
# Minified css files
**.min.css
# css files directly in the wwwroot folder
**/wwwroot/**.css
# Minified js files
**.min.js
# js files directly in the wwwroot folder
**/wwwroot/**.js
# any project with runner in its name
**.Runner/**
**.DS_Store

37
Connected.Components.sln Normal file
View File

@ -0,0 +1,37 @@

Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio Version 17
VisualStudioVersion = 17.4.33020.496
MinimumVisualStudioVersion = 10.0.40219.1
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components", "src\connected.components\Connected.Components.csproj", "{70BF497D-6519-401B-A0EE-2E9856B13D96}"
EndProject
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components.Showcase", "src\Connected.Components.Showcase\Connected.Components.Showcase.csproj", "{EBB24FD8-A554-427C-A93B-B48C047D34CC}"
EndProject
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components.Showcase.Runner", "Connected.Components.Showcase.Runner\Connected.Components.Showcase.Runner.csproj", "{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}"
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|Any CPU = Debug|Any CPU
Release|Any CPU = Release|Any CPU
EndGlobalSection
GlobalSection(ProjectConfigurationPlatforms) = postSolution
{70BF497D-6519-401B-A0EE-2E9856B13D96}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{70BF497D-6519-401B-A0EE-2E9856B13D96}.Debug|Any CPU.Build.0 = Debug|Any CPU
{70BF497D-6519-401B-A0EE-2E9856B13D96}.Release|Any CPU.ActiveCfg = Release|Any CPU
{70BF497D-6519-401B-A0EE-2E9856B13D96}.Release|Any CPU.Build.0 = Release|Any CPU
{EBB24FD8-A554-427C-A93B-B48C047D34CC}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{EBB24FD8-A554-427C-A93B-B48C047D34CC}.Debug|Any CPU.Build.0 = Debug|Any CPU
{EBB24FD8-A554-427C-A93B-B48C047D34CC}.Release|Any CPU.ActiveCfg = Release|Any CPU
{EBB24FD8-A554-427C-A93B-B48C047D34CC}.Release|Any CPU.Build.0 = Release|Any CPU
{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}.Debug|Any CPU.Build.0 = Debug|Any CPU
{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}.Release|Any CPU.ActiveCfg = Release|Any CPU
{B8E7BCC3-3F99-4222-B65E-9ABD3B18DAF7}.Release|Any CPU.Build.0 = Release|Any CPU
EndGlobalSection
GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE
EndGlobalSection
GlobalSection(ExtensibilityGlobals) = postSolution
SolutionGuid = {CBDD97EC-4855-4005-97A7-29FE298FB057}
EndGlobalSection
EndGlobal

1
build/startWatch.ps1 Normal file
View File

@ -0,0 +1 @@
dotnet watch webcompiler ./Styles/Connected.Components.scss -c ./excubowebcompiler.json --project ../src/Connected.Components/Connected.Components.csproj

1
build/startWatch.sh Normal file
View File

@ -0,0 +1 @@
dotnet watch webcompiler ./Styles/Connected.Components.scss -c ./excubowebcompiler.json --project ../src/Connected.Components/Connected.Components.csproj

19
nuget.config Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<config>
<add key="repositoryPath" value="%PACKAGEHOME%/External" />
</config>
<packageRestore>
<add key="enabled" value="True" />
<add key="automatic" value="True" />
</packageRestore>
<packageSources>
<add key="Local repository" value="%LOCAL_NUGET%" />
<add key="TomPITGit" value="https://git.tompit.com/api/packages/Tom-PIT/nuget/index.json" />
<add key="ConnectedGit" value="https://git.tompit.com/api/packages/Connected/nuget/index.json" />
<add key="NuGet official package source" value="https://api.nuget.org/v3/index.json" />
</packageSources>
<disabledPackageSources />
</configuration>

View File

@ -0,0 +1,18 @@
<Project Sdk="Microsoft.NET.Sdk.Razor">
<PropertyGroup>
<TargetFramework>net7.0</TargetFramework>
<Nullable>enable</Nullable>
<ImplicitUsings>enable</ImplicitUsings>
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="7.0.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="7.0.0" PrivateAssets="all" />
</ItemGroup>
<ItemGroup>
<ProjectReference Include="..\connected.components\Connected.Components.csproj" />
</ItemGroup>
</Project>

View File

@ -0,0 +1,381 @@
@page "/components/alert"
@using Connected.Components;
<ThemeProvider></ThemeProvider>
<ThemeProvider Theme="MyCustomTheme" />
@code {
Theme MyCustomTheme = new Theme()
{
Palette = new Palette()
{
Error = "#ffd8e4",
ErrorContrastText = "#31111d",
//ErrorDarken = Colors.Green.Accent4,
},
LayoutProperties = new LayoutProperties()
{
DefaultBorderRadius = "1rem",
}
};
}
<Container>
<Text Typo="Typo.h3" Align="Align.Left" GutterBottom="true">Alert</Text>
<Text Align="Align.Left" GutterBottom="true">An alert is used to notify the user about an important message without interrupting the ongoing task.</Text>
</Container>
<Container ClassList="mt-12">
<Grid>
<Item xs="12">
<Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Simple alert</Text>
<Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2">The reactor type is RBMK-1000</Alert>
<Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2">The reactor was fired up successfully</Alert>
<Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2">The reactor is running at optimum temperature</Alert>
<Alert Severity="Severity.Warning" GlyphVisible="true" ClassList="my-2">The reactor temperature exceeds the optimal range</Alert>
<Alert Severity="Severity.Error" GlyphVisible="true" ClassList="my-2">Meltdown is imminent</Alert>
</Item>
</Grid>
</Container>
<Container>
<pre>
<code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor type is RBMK-1000<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor was fired up successfully<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor is running at optimum temperature<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor temperature exceeds the optimal range<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>Meltdown is imminent<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span></code></pre>
</Container>
<Container ClassList="mt-12">
<Grid>
<Item xs="12">
<Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Outlined alert</Text>
<Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">The reactor type is RBMK-1000</Alert>
<Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">The reactor was fired up successfully</Alert>
<Alert Severity="Severity.Success" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">The reactor is running at optimum temperature</Alert>
<Alert Severity="Severity.Warning" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">The reactor temperature exceeds the optimal range</Alert>
<Alert Severity="Severity.Error" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2">Meltdown is imminent</Alert>
</Item>
</Grid>
</Container>
<Container>
<pre>
<code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: 1rem;"><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor type is RBMK-1000<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor was fired up successfully<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor is running at optimum temperature<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor temperature exceeds the optimal range<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>Meltdown is imminent<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span></code></pre>
</Container>
<Container ClassList="mt-12">
<Grid>
<Item xs="12">
<Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Outlined alert</Text>
<Alert Severity="Severity.Normal" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">The reactor type is RBMK-1000</Alert>
<Alert Severity="Severity.Info" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">The reactor was fired up successfully</Alert>
<Alert Severity="Severity.Success" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">The reactor is running at optimum temperature</Alert>
<Alert Severity="Severity.Warning" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">The reactor temperature exceeds the optimal range</Alert>
<Alert Severity="Severity.Error" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2">Meltdown is imminent</Alert>
</Item>
</Grid>
</Container>
<Container>
<pre>
<code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor type is RBMK-1000<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor was fired up successfully<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor is running at optimum temperature<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>The reactor temperature exceeds the optimal range<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>Meltdown is imminent<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span></code></pre>
</Container>
<Container ClassList="mt-12">
<div>
<Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Dense</Text>
<Text Align="Align.Left" GutterBottom="true">Taking up too much space? Insert dense class in ClassList. It removes the vertical padding and lowers the horizontal.
</Text>
</div>
<Grid>
<Item md="4" xs="12">
<Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 dense">Dense Default</Alert>
<Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2 dense">Dense Info</Alert>
<Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2 dense">Dense Success</Alert>
<Alert Severity="Severity.Warning" GlyphVisible="true" ClassList="my-2 dense">Dense Warning</Alert>
<Alert Severity="Severity.Error" GlyphVisible="true" ClassList="my-2 dense">Dense Errorr</Alert>
</Item>
<Item md="4" xs="12">
<Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Default</Alert>
<Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Info</Alert>
<Alert Severity="Severity.Success" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Success</Alert>
<Alert Severity="Severity.Warning" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Warning</Alert>
<Alert Severity="Severity.Error" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 dense">Dense Error</Alert>
</Item>
<Item md="4" xs="12">
<Alert Severity="Severity.Normal" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Default</Alert>
<Alert Severity="Severity.Info" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Info</Alert>
<Alert Severity="Severity.Success" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Success</Alert>
<Alert Severity="Severity.Warning" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Warning</Alert>
<Alert Severity="Severity.Error" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 dense">Dense Error</Alert>
</Item>
</Grid>
</Container>
<Container>
<pre>
<code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Errorr<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Error<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 dense&quot;</span>&gt;</span>Dense Error<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span></code></pre>
</Container>
<Container ClassList="mt-12">
<div>
<Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">No Icons</Text>
<Text Align="Align.Left" GutterBottom="true">You can disable the alert icons with the bool GlyphVisible set to false.</Text>
</div>
<Grid>
<Item md="4" xs="12">
<Alert Severity="Severity.Normal" GlyphVisible="false" ClassList="my-2">No Icon Default</Alert>
<Alert Severity="Severity.Info" GlyphVisible="false" ClassList="my-2 ">No Icon Info</Alert>
<Alert Severity="Severity.Success" GlyphVisible="false" ClassList="my-2">No Icon Success</Alert>
<Alert Severity="Severity.Warning" GlyphVisible="false" ClassList="my-2">No Icon Warning</Alert>
<Alert Severity="Severity.Error" GlyphVisible="false" ClassList="my-2">No Icon Error</Alert>
</Item>
<Item md="4" xs="12">
<Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2">No Icon Default</Alert>
<Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2">No Icon Info</Alert>
<Alert Severity="Severity.Success" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2">No Icon Success</Alert>
<Alert Severity="Severity.Warning" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2">No Icon Warning</Alert>
<Alert Severity="Severity.Error" Variant="Variant.Outlined" GlyphVisible="false" ClassList="my-2 ">No Icon Error</Alert>
</Item>
<Item md="4" xs="12">
<Alert Severity="Severity.Normal" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Default</Alert>
<Alert Severity="Severity.Info" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Info</Alert>
<Alert Severity="Severity.Success" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Success</Alert>
<Alert Severity="Severity.Warning" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Warning</Alert>
<Alert Severity="Severity.Error" Variant="Variant.Filled" GlyphVisible="false" ClassList="my-2 ">No Icon Error</Alert>
</Item>
</Grid>
</Container>
<Container>
<pre>
<code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>No Icon Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 &quot;</span>&gt;</span>No Icon Info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>No Icon Success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>No Icon Warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>No Icon Error<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>No Icon Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>No Icon Info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>No Icon Success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>No Icon Warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 &quot;</span>&gt;</span>No Icon Error<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 &quot;</span>&gt;</span>No Icon Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 &quot;</span>&gt;</span>No Icon Info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 &quot;</span>&gt;</span>No Icon Success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 &quot;</span>&gt;</span>No Icon Warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;false&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 &quot;</span>&gt;</span>No Icon Error<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span></code></pre>
</Container>
<Container ClassList="mt-12">
<div>
<Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Rounded and Square</Text>
<Text Align="Align.Left" GutterBottom="true">By default, the alert is set to rounded corners by your theme's
default value. If you need a square Alert but don't want to change the theme, insert class rounded-0 in
ClassList or change the default radius width classes rounded-sm, rounded-lg, rounded-xl.</Text>
</div>
<Grid>
<Item md="4" xs="12">
<Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 rounded-0">Rounded-0 Default</Alert>
<Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2 rounded">Rounded Info</Alert>
<Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2 rounded-sm">Rounded-sm Success</Alert>
<Alert Severity="Severity.Warning" GlyphVisible="true" ClassList="my-2 rounded-lg">Rounded-lg Warning</Alert>
<Alert Severity="Severity.Error" GlyphVisible="true" ClassList="my-2 rounded-xl">Rounded-xl Error</Alert>
</Item>
<Item md="4" xs="12">
<Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded-0">Rounded-0 Default</Alert>
<Alert Severity="Severity.Info" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded">Rounded Info</Alert>
<Alert Severity="Severity.Success" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded-sm">Rounded-sm Success</Alert>
<Alert Severity="Severity.Warning" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded-lg">Rounded-lg Warning</Alert>
<Alert Severity="Severity.Error" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 rounded-xl">Rounded-xl Error</Alert>
</Item>
<Item md="4" xs="12">
<Alert Severity="Severity.Normal" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded-0">Rounded-0 Default</Alert>
<Alert Severity="Severity.Info" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded">Rounded Info</Alert>
<Alert Severity="Severity.Success" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded-sm">Rounded-sm Success</Alert>
<Alert Severity="Severity.Warning" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded-lg">Rounded-lg Warning</Alert>
<Alert Severity="Severity.Error" Variant="Variant.Filled" GlyphVisible="true" ClassList="my-2 rounded-xl">Rounded-xl Error</Alert>
</Item>
</Grid>
</Container>
<Container>
<pre>
<code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-0&quot;</span>&gt;</span>Rounded-0 Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded&quot;</span>&gt;</span>Rounded Info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-sm&quot;</span>&gt;</span>Rounded-sm Success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-lg&quot;</span>&gt;</span>Rounded-lg Warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-xl&quot;</span>&gt;</span>Rounded-xl Error<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-0&quot;</span>&gt;</span>Rounded-0 Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded&quot;</span>&gt;</span>Rounded Info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-sm&quot;</span>&gt;</span>Rounded-sm Success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-lg&quot;</span>&gt;</span>Rounded-lg Warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Outlined&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-xl&quot;</span>&gt;</span>Rounded-xl Error<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-0&quot;</span>&gt;</span>Rounded-0 Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded&quot;</span>&gt;</span>Rounded Info<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-sm&quot;</span>&gt;</span>Rounded-sm Success<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Warning&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-lg&quot;</span>&gt;</span>Rounded-lg Warning<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Error&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Variant</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Variant.Filled&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 rounded-xl&quot;</span>&gt;</span>Rounded-xl Error<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span></code></pre>
</Container>
<Container ClassList="mt-12">
<div>
<Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Elevation</Text>
<Text Align="Align.Left" GutterBottom="true">The component also accepts the Elevation class set a scale from elevation-1 to elevation-24 in ClassList.</Text>
</div>
<Grid>
<Item md="4" xs="12">
<Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2 elevation-8">elevation-8</Alert>
</Item>
<Item md="4" xs="12">
<Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2 elevation-16">elevation-16</Alert>
</Item>
<Item md="4" xs="12">
<Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2 elevation-24">elevation-24</Alert>
</Item>
</Grid>
</Container>
<Container>
<pre>
<code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 elevation-8&quot;</span>&gt;</span>elevation-8 Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 elevation-16&quot;</span>&gt;</span>elevation-16 Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 elevation-24&quot;</span>&gt;</span>elevation-24 Default<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span></code></pre>
</Container>
<Container ClassList="mt-12">
<div>
<Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Content Alignment</Text>
<Text Align="Align.Left" GutterBottom="true">Insert Utility class for the Alignment property in ClassList to define the content alignment - justify-center or justify-end</Text>
</div>
<Grid>
<Item md="4" xs="12">
<Alert Severity="Severity.Normal" GlyphVisible="true" ClassList="my-2">Default Alignment</Alert>
</Item>
<Item md="4" xs="12">
<Alert Severity="Severity.Info" GlyphVisible="true" ClassList="my-2 justify-center">Center Alignment</Alert>
</Item>
<Item md="4" xs="12">
<Alert Severity="Severity.Success" GlyphVisible="true" ClassList="my-2 justify-end">Right Alignment</Alert>
</Item>
</Grid>
</Container>
<Container>
<pre>
<code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>Default Alignment<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 justify-center&quot;</span>&gt;</span>Center Alignment<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 justify-end&quot;</span>&gt;</span>Right Alignment<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span></code></pre>
</Container>
<Container ClassList="mt-12">
<div>
<Text Typo="Typo.h5" Align="Align.Left" GutterBottom="true">Close Icon and Event</Text>
<Text Align="Align.Left" GutterBottom="true">Set the CloseGlyphVisible property to True to display a Close icon.
CloseIconClicked provides the EventCallback when clicking on the Close icon of the alert</Text>
</div>
<Grid>
<Item md="4" xs="12">
<Alert Severity="Severity.Normal" GlyphVisible="true" CloseGlyphVisible="true" ClassList="my-2">Time to leave. Please close me!</Alert>
</Item>
<Item md="4" xs="12">
<Alert Severity="Severity.Info" GlyphVisible="true" CloseGlyphVisible="true" ClassList="my-2 justify-center">Time to leave. Please close me!</Alert>
</Item>
<Item md="4" xs="12">
<Alert Severity="Severity.Success" GlyphVisible="true" CloseGlyphVisible="true" ClassList="my-2 justify-end">RTime to leave. Please close me!</Alert>
</Item>
</Grid>
</Container>
<Container>
<pre>
<code id="htmlViewer" style="color:rgb(51, 51, 51); font-weight:400;background-color:rgb(248, 248, 248);background:rgb(248, 248, 248);display:block;padding: .5em;"><span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Normal&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">CloseGlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2&quot;</span>&gt;</span>Time to leave. Please close me!<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Info&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">CloseGlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 justify-center&quot;</span>&gt;</span>Time to leave. Please close me!<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span> <span style="color:rgb(0, 128, 128); font-weight:400;">md</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;4&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">xs</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;12&quot;</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span> <span style="color:rgb(0, 128, 128); font-weight:400;">Severity</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;Severity.Success&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">GlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">CloseGlyphVisible</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;true&quot;</span> <span style="color:rgb(0, 128, 128); font-weight:400;">ClassList</span>=<span style="color:rgb(221, 17, 68); font-weight:400;">&quot;my-2 justify-end&quot;</span>&gt;</span>RTime to leave. Please close me!<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Alert</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Item</span>&gt;</span>
<span style="color:rgb(0, 0, 128); font-weight:400;">&lt;/<span style="color:rgb(0, 0, 128); font-weight:400;">Grid</span>&gt;</span></code></pre>
</Container>

View File

@ -0,0 +1,7 @@
@page "/components/app-bar"
@using Connected.Components;
<ThemeProvider></ThemeProvider>
<AppBar Dense="true">This is an alert</AppBar>

View File

@ -0,0 +1,36 @@
@page "/components/drawer"
@using Connected.Components;
<ThemeProvider></ThemeProvider>
<Layout>
<AppBar Elevation="1">
<Button Icon="Icons.Material.Filled.Menu" Edge="Edge.Start" OnClick="ToggleDrawer">aa</Button>
</AppBar>
<Drawer @bind-Open="_drawerOpen" Elevation="2" Variant="DrawerVariant.Mini" ClassList="info">
<DrawerHeader>
<Text Typo="Typo.h5" Class="mt-1">Application</Text>
</DrawerHeader>
<NavMenu>
<Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 border-0">Production</Alert>
<Alert Severity="Severity.Normal" Variant="Variant.Outlined" GlyphVisible="true" ClassList="my-2 border-0">Production</Alert>
</NavMenu>
</Drawer>
<MainContent>
<Container>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam fuga necessitatibus illum non earum aperiam consequuntur odit odio a laborum!
<Button OnClick="_ToggleDrawer" Color="Color.Primary">Toggle</Button>
</Container>
</MainContent>
</Layout>
@code {
bool _drawerOpen = true;
void DrawerToggle()
{
_drawerOpen = !_drawerOpen;
}
}

View File

@ -0,0 +1,5 @@
<h3>TextBox</h3>
@code {
}

View File

@ -0,0 +1,38 @@
{
"iisSettings": {
"iisExpress": {
"applicationUrl": "http://localhost:30375",
"sslPort": 44321
}
},
"profiles": {
"http": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": true,
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
"applicationUrl": "http://localhost:5035",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"https": {
"commandName": "Project",
"dotnetRunMessages": true,
"launchBrowser": true,
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
"applicationUrl": "https://localhost:0;http://localhost:5035",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
},
"IIS Express": {
"commandName": "IISExpress",
"launchBrowser": true,
"inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}
}
}

View File

@ -0,0 +1,7 @@
@using System.Net.Http
@using System.Net.Http.Json
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using Connected.Components.Showcase

View File

@ -0,0 +1,32 @@
h1:focus {
outline: none;
}
#blazor-error-ui {
background: lightyellow;
bottom: 0;
box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
display: none;
left: 0;
padding: 0.6rem 1.25rem 0.7rem 1.25rem;
position: fixed;
width: 100%;
z-index: 1000;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}

View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="/" />
<link href="css/app.css" rel="stylesheet" />
</head>
<body>
<div id="app">Loading...</div>
<div id="blazor-error-ui">
An unhandled error has occurred.
<a href="" class="reload">Reload</a>
<a class="dismiss">🗙</a>
</div>
<script src="_framework/blazor.webassembly.js"></script>
</body>
</html>

View File

@ -0,0 +1,12 @@
{
"version": 1,
"isRoot": true,
"tools": {
"connected.webcompiler": {
"version": "1.0.7-prerelease.g67169cf2c5",
"commands": [
"webcompiler"
]
}
}
}

View File

@ -0,0 +1,538 @@
namespace Connected.Annotations;
/// <summary>
/// Specifies the name of the category in which to group the property of a MudBlazor component when displayed in the API documentation.
/// </summary>
/// <remarks>
/// Use this attribute together with the <see cref="Microsoft.AspNetCore.Components.ParameterAttribute"/>. <br/>
/// This attribute is similar to <see cref="System.ComponentModel.CategoryAttribute"/>. <br/>
/// The name of the category can be specified by using a constant defined in the <see cref="CategoryTypes"/> class.
/// </remarks>
[AttributeUsage(AttributeTargets.Property, AllowMultiple = false, Inherited = true)]
public class CategoryAttribute : Attribute
{
public CategoryAttribute(string name)
{
if (string.IsNullOrEmpty(name))
throw new ArgumentException("The category name cannot be null nor empty.");
if (!categoryOrder.ContainsKey(name))
throw new ArgumentException($"The given category name '{name}' isn't in the categoryOrder field.");
Name = name;
}
/// <summary> The name of the category. </summary>
public string Name { get; }
/// <summary> The order of the category - the greater the number the lower the category will be displayed in the API documentation. </summary>
public int Order => categoryOrder[Name];
// Possible categories of component properties and the order in which they are displayed in the API documentation.
private static readonly Dictionary<string, int> categoryOrder = new()
{
["Data"] = 0, // general category
["Validation"] = 1, // general category
// specific categories associated with data
["Validated data"] = 2,
["Validation result"] = 3,
["Behavior"] = 100, // general category
["Header"] = 101,
["Rows"] = 102,
["Footer"] = 103,
// specific behaviors of a component
["Filtering"] = 200,
["Grouping"] = 201,
["Expanding"] = 202,
["Sorting"] = 203,
["Pagination"] = 204,
["Selecting"] = 205,
["Editing"] = 206,
["Click action"] = 207,
["Items"] = 208,
["Disable"] = 209,
["DraggingClass"] = 210,
["DropRules"] = 211,
["Appearance"] = 300, // general category
// specific parts of a component together with their behavior and appearance
["Popup behavior"] = 400,
["Popup appearance"] = 401,
["List behavior"] = 402,
["List appearance"] = 403,
["Picker behavior"] = 404,
["Picker appearance"] = 405,
["Dot"] = 406,
// "Miscellaneous" category. In classes inheriting from MudComponentBase it can be used only exceptionally -
// - only when the property can define behavior or appearance depending on value of the property.
["Misc"] = int.MaxValue - 1,
["Common"] = int.MaxValue // general category
};
}
/// <summary>
/// Possible categories of MudBlazor components properties.
/// </summary>
/// <remarks>
/// <b>General categories</b>
/// <para>
/// - <i>Data</i> - Used e.g. in form fields, pickers, <see cref="MudRating"/>, <see cref="MudTable{T}"/>, <see cref="MudTreeView{T}"/>,
/// <see cref="MudTreeViewItem{T}"/>, and <see cref="MudCarousel{TData}"/>. Containers have this group when their items can be defined
/// not only in markup language, but also programmatically in the Items property and by specifying ItemTemplate.<br/>
/// - <i>Validation</i> - Used in form fields and pickers.<br/>
/// - <i>Behavior</i> - Changing these properties changes behavior of the component and behavior of the application. So in some way they are or may be more
/// important than the "Appearance" category. Example properties are: a) the <c>Disabled</c> property, b) icons (or avatars) without default value
/// (because setting their value can pass additional information).<br/>
/// - <i>Appearance</i> - Changing these properties doesn't change behavior of the component and behavior of the application, but only changes the appearance
/// of the component irrelevant to the understanding of the application by a user. So in some way they are less important than the "Behavior"
/// category, because they are only used to adjust the look of the application. Example properties are: a) <c>Elevation</c>, <c>Outlined</c>,
/// <c>Square</c>, <c>Rounded</c>, <c>DisableGutters</c>, <c>Dense</c>, <c>DisableRipple</c>; b) size, color, and typography of the item
/// and its subelements; c) CSS classes and styles of subelements; d) icons with the default value already set (because most often changing its value
/// doesn't change passed information).<br/>
/// - <i>Common</i> - Properties defined in <see cref="UIComponent"/>.
/// </para>
/// <para>
/// Note: The following properties belong to the "Behavior" group, not to the "Appearance" group:<br/>
/// - <see cref="IconButton.Icon"/> - because it describes meaning of the button, since MudIconButton doesn't have text,<br/>
/// - <see cref="InputBase{T}.Label"/> - because it describes meaning of the field,<br/>
/// - <see cref="InputBase{T}.AdornmentText"/> - because it can describe information important to a user, e.g. a numeric field unit such as kilograms.<br/>
/// Sometimes choosing a category can be difficult - in such case choose a category that makes the most sense.
/// </para>
///
/// <b>Categories for specific behaviors or specific parts of components</b>
/// <para>If some elements or behaviors can be distinguished in a component, then their properties are included in separate groups.</para>
///
/// <para>Note: If a property qualifies for both the "Appearance" or "Behavior" group, and for some special group, then this special group takes precedence.
/// For example, <see cref="MudTableBase.CommitEditIcon"/> could belong to the "Appearance" group, but belongs to the "Editing" group.</para>
///
/// <b>Additional information</b>
/// <para>The list of categories is inspired by the categories displayed for Windows Forms and Web Forms components in the Visual Studio "Properties" window.</para>
/// </remarks>
public static class CategoryTypes
{
/* Implementation note:
* Almost all components use the "Behavior" and "Appearance" categories. We could simplify the code
* by inheriting these constants, but C# doesn't allow to inherit static members of a class.
*/
/// <summary>Used in <see cref="UIComponent"/>.</summary>
public static class ComponentBase
{
public const string Common = "Common";
}
/// <summary>Used in: <see cref="ButtonBase"/>, all components inheriting from it, and <see cref="ToggleIconButton"/>.</summary>
public static class Button
{
public const string Behavior = "Behavior";
public const string ClickAction = "Click action";
public const string Appearance = "Appearance";
}
/// <summary>Used in <see cref="FormComponent{T, U}"/> and all components inheriting from it.</summary>
public static class FormComponent
{
public const string Data = "Data";
public const string Validation = "Validation";
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
public const string ListBehavior = "List behavior";
public const string ListAppearance = "List appearance";
public const string PickerBehavior = "Picker behavior";
public const string PickerAppearance = "Picker appearance";
}
/// <summary>Used in all charts, that is in <see cref="MudChartBase"/> and all components inheriting from it.</summary>
public static class Chart
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
/// <summary>Used in other base classes.</summary>
public static class General
{
public const string Data = "Data";
public const string Behavior = "Behavior";
public const string ClickAction = "Click action";
public const string Appearance = "Appearance";
}
public static class Alert
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class AppBar
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Avatar
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class AvatarGroup
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Badge
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Breadcrumbs
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class BreakpointProvider
{
public const string Behavior = "Behavior";
}
public static class ButtonGroup
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Card
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Carousel
{
public const string Data = "Data";
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Chip
{
public const string Behavior = "Behavior";
public const string ClickAction = "Click action";
public const string Appearance = "Appearance";
}
public static class ChipSet
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Container
{
public const string Behavior = "Behavior";
}
public static class Dialog
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
public const string Misc = "Misc";
}
public static class Divider
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Drawer
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class DropZone
{
public const string Appearance = "Appearance";
public const string Behavior = "Behavior";
public const string Disabled = "Disable";
public const string Sorting = "Sorting";
public const string DraggingClass = "DraggingClass";
public const string DropRules = "DropRules";
public const string Items = "Items";
}
public static class Element
{
public const string Misc = "Misc";
}
public static class ExpansionPanel
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Field
{
public const string Data = "Data";
public const string Validation = "Validation";
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class FileUpload
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class FocusTrap
{
public const string Behavior = "Behavior";
}
public static class Form
{
public const string ValidatedData = "Validated data";
public const string ValidationResult = "Validation result";
public const string Behavior = "Behavior";
}
public static class Grid
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Highlighter
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Image
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Item
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Hidden
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Icon
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Link
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class List
{
public const string Behavior = "Behavior";
public const string Expanding = "Expanding";
public const string Selecting = "Selecting";
public const string ClickAction = "Click action";
public const string Appearance = "Appearance";
}
public static class MainContent
{
public const string Behavior = "Behavior";
}
public static class Menu
{
public const string Behavior = "Behavior";
public const string ClickAction = "Click action";
public const string Appearance = "Appearance";
public const string PopupBehavior = "Popup behavior";
public const string PopupAppearance = "Popup appearance";
}
public static class MessageBox
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class NavMenu
{
public const string Behavior = "Behavior";
public const string ClickAction = "Click action";
public const string Appearance = "Appearance";
}
public static class Overlay
{
public const string Behavior = "Behavior";
public const string ClickAction = "Click action";
}
public static class Pagination
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Paper
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Popover
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class ProgressLinear
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class ProgressCircular
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Radio
{
public const string Data = "Data";
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Rating
{
public const string Data = "Data";
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class RTLProvider
{
public const string Behavior = "Behavior";
}
public static class ScrollToTop
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Skeleton
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Stack
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Slider
{
public const string Data = "Data";
public const string Validation = "Validation";
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class SwipeArea
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Table
{
public const string Data = "Data";
public const string Behavior = "Behavior";
public const string Header = "Header";
public const string Rows = "Rows";
public const string Footer = "Footer";
public const string Filtering = "Filtering";
public const string Grouping = "Grouping";
public const string Sorting = "Sorting";
public const string Pagination = "Pagination";
public const string Selecting = "Selecting";
public const string Editing = "Editing";
public const string Appearance = "Appearance";
}
public static class SimpleTable
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Tabs
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Timeline
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
public const string Dot = "Dot";
}
public static class ToolBar
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class Tooltip
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
public static class TreeView
{
public const string Data = "Data";
public const string Behavior = "Behavior";
public const string Expanding = "Expanding";
public const string Selecting = "Selecting";
public const string ClickAction = "Click action";
public const string Appearance = "Appearance";
}
public static class Text
{
public const string Behavior = "Behavior";
public const string Appearance = "Appearance";
}
}

View File

@ -0,0 +1,12 @@
namespace Connected.Annotations;
[AttributeUsage(AttributeTargets.Property | AttributeTargets.Field, AllowMultiple = false)]
public class LabelAttribute : Attribute
{
public LabelAttribute(string name)
{
Name = name;
}
public string Name { get; }
}

View File

@ -0,0 +1,343 @@
using System.Diagnostics.CodeAnalysis;
namespace Connected;
[ExcludeFromCodeCoverage]
public static class Colors
{
public static partial class Red
{
public static string Default { get; } = "#F44336";
public static string Lighten5 { get; } = "#FFEBEE";
public static string Lighten4 { get; } = "#FFCDD2";
public static string Lighten3 { get; } = "#EF9A9A";
public static string Lighten2 { get; } = "#E57373";
public static string Lighten1 { get; } = "#EF5350";
public static string Darken1 { get; } = "#E53935";
public static string Darken2 { get; } = "#D32F2F";
public static string Darken3 { get; } = "#C62828";
public static string Darken4 { get; } = "#B71C1C";
public static string Accent1 { get; } = "#FF8A80";
public static string Accent2 { get; } = "#FF5252";
public static string Accent3 { get; } = "#FF1744";
public static string Accent4 { get; } = "#D50000";
}
public static class Pink
{
public static string Default { get; } = "#E91E63";
public static string Lighten5 { get; } = "#FCE4EC";
public static string Lighten4 { get; } = "#F8BBD0";
public static string Lighten3 { get; } = "#F48FB1";
public static string Lighten2 { get; } = "#F06292";
public static string Lighten1 { get; } = "#EC407A";
public static string Darken1 { get; } = "#D81B60";
public static string Darken2 { get; } = "#C2185B";
public static string Darken3 { get; } = "#AD1457";
public static string Darken4 { get; } = "#880E4F";
public static string Accent1 { get; } = "#FF80AB";
public static string Accent2 { get; } = "#FF4081";
public static string Accent3 { get; } = "#F50057";
public static string Accent4 { get; } = "#C51162";
}
public static class Purple
{
public static string Default { get; } = "#9C27B0";
public static string Lighten5 { get; } = "#F3E5F5";
public static string Lighten4 { get; } = "#E1BEE7";
public static string Lighten3 { get; } = "#CE93D8";
public static string Lighten2 { get; } = "#BA68C8";
public static string Lighten1 { get; } = "#AB47BC";
public static string Darken1 { get; } = "#8E24AA";
public static string Darken2 { get; } = "#7B1FA2";
public static string Darken3 { get; } = "#6A1B9A";
public static string Darken4 { get; } = "#4A148C";
public static string Accent1 { get; } = "#EA80FC";
public static string Accent2 { get; } = "#E040FB";
public static string Accent3 { get; } = "#D500F9";
public static string Accent4 { get; } = "#AA00FF";
}
public static class DeepPurple
{
public static string Default { get; } = "#673AB7";
public static string Lighten5 { get; } = "#EDE7F6";
public static string Lighten4 { get; } = "#D1C4E9";
public static string Lighten3 { get; } = "#B39DDB";
public static string Lighten2 { get; } = "#9575CD";
public static string Lighten1 { get; } = "#7E57C2";
public static string Darken1 { get; } = "#5E35B1";
public static string Darken2 { get; } = "#512DA8";
public static string Darken3 { get; } = "#4527A0";
public static string Darken4 { get; } = "#311B92";
public static string Accent1 { get; } = "#B388FF";
public static string Accent2 { get; } = "#7C4DFF";
public static string Accent3 { get; } = "#651FFF";
public static string Accent4 { get; } = "#6200EA";
}
public static class Indigo
{
public static string Default { get; } = "#3F51B5";
public static string Lighten5 { get; } = "#E8EAF6";
public static string Lighten4 { get; } = "#C5CAE9";
public static string Lighten3 { get; } = "#9FA8DA";
public static string Lighten2 { get; } = "#7986CB";
public static string Lighten1 { get; } = "#5C6BC0";
public static string Darken1 { get; } = "#3949AB";
public static string Darken2 { get; } = "#303F9F";
public static string Darken3 { get; } = "#283593";
public static string Darken4 { get; } = "#1A237E";
public static string Accent1 { get; } = "#8C9EFF";
public static string Accent2 { get; } = "#536DFE";
public static string Accent3 { get; } = "#3D5AFE";
public static string Accent4 { get; } = "#304FFE";
}
public static class Blue
{
public static string Default { get; } = "#2196F3";
public static string Lighten5 { get; } = "#E3F2FD";
public static string Lighten4 { get; } = "#BBDEFB";
public static string Lighten3 { get; } = "#90CAF9";
public static string Lighten2 { get; } = "#64B5F6";
public static string Lighten1 { get; } = "#42A5F5";
public static string Darken1 { get; } = "#1E88E5";
public static string Darken2 { get; } = "#1976D2";
public static string Darken3 { get; } = "#1565C0";
public static string Darken4 { get; } = "#0D47A1";
public static string Accent1 { get; } = "#82B1FF";
public static string Accent2 { get; } = "#448AFF";
public static string Accent3 { get; } = "#2979FF";
public static string Accent4 { get; } = "#2962FF";
}
public static class LightBlue
{
public static string Default { get; } = "#03A9F4";
public static string Lighten5 { get; } = "#E1F5FE";
public static string Lighten4 { get; } = "#B3E5FC";
public static string Lighten3 { get; } = "#81D4FA";
public static string Lighten2 { get; } = "#4FC3F7";
public static string Lighten1 { get; } = "#29B6F6";
public static string Darken1 { get; } = "#039BE5";
public static string Darken2 { get; } = "#0288D1";
public static string Darken3 { get; } = "#0277BD";
public static string Darken4 { get; } = "#01579B";
public static string Accent1 { get; } = "#80D8FF";
public static string Accent2 { get; } = "#40C4FF";
public static string Accent3 { get; } = "#00B0FF";
public static string Accent4 { get; } = "#0091EA";
}
public static class Cyan
{
public static string Default { get; } = "#00BCD4";
public static string Lighten5 { get; } = "#E0F7FA";
public static string Lighten4 { get; } = "#B2EBF2";
public static string Lighten3 { get; } = "#80DEEA";
public static string Lighten2 { get; } = "#4DD0E1";
public static string Lighten1 { get; } = "#26C6DA";
public static string Darken1 { get; } = "#00ACC1";
public static string Darken2 { get; } = "#0097A7";
public static string Darken3 { get; } = "#00838F";
public static string Darken4 { get; } = "#006064";
public static string Accent1 { get; } = "#84FFFF";
public static string Accent2 { get; } = "#18FFFF";
public static string Accent3 { get; } = "#00E5FF";
public static string Accent4 { get; } = "#00B8D4";
}
public static class Teal
{
public static string Default { get; } = "#009688";
public static string Lighten5 { get; } = "#E0F2F1";
public static string Lighten4 { get; } = "#B2DFDB";
public static string Lighten3 { get; } = "#80CBC4";
public static string Lighten2 { get; } = "#4DB6AC";
public static string Lighten1 { get; } = "#26A69A";
public static string Darken1 { get; } = "#00897B";
public static string Darken2 { get; } = "#00796B";
public static string Darken3 { get; } = "#00695C";
public static string Darken4 { get; } = "#004D40";
public static string Accent1 { get; } = "#A7FFEB";
public static string Accent2 { get; } = "#64FFDA";
public static string Accent3 { get; } = "#1DE9B6";
public static string Accent4 { get; } = "#00BFA5";
}
public static class Green
{
public static string Default { get; } = "#4CAF50";
public static string Lighten5 { get; } = "#E8F5E9";
public static string Lighten4 { get; } = "#C8E6C9";
public static string Lighten3 { get; } = "#A5D6A7";
public static string Lighten2 { get; } = "#81C784";
public static string Lighten1 { get; } = "#66BB6A";
public static string Darken1 { get; } = "#43A047";
public static string Darken2 { get; } = "#388E3C";
public static string Darken3 { get; } = "#2E7D32";
public static string Darken4 { get; } = "#1B5E20";
public static string Accent1 { get; } = "#B9F6CA";
public static string Accent2 { get; } = "#69F0AE";
public static string Accent3 { get; } = "#00E676";
public static string Accent4 { get; } = "#00C853";
}
public static class LightGreen
{
public static string Default { get; } = "#8BC34A";
public static string Lighten5 { get; } = "#F1F8E9";
public static string Lighten4 { get; } = "#DCEDC8";
public static string Lighten3 { get; } = "#C5E1A5";
public static string Lighten2 { get; } = "#AED581";
public static string Lighten1 { get; } = "#9CCC65";
public static string Darken1 { get; } = "#7CB342";
public static string Darken2 { get; } = "#689F38";
public static string Darken3 { get; } = "#558B2F";
public static string Darken4 { get; } = "#33691E";
public static string Accent1 { get; } = "#CCFF90";
public static string Accent2 { get; } = "#B2FF59";
public static string Accent3 { get; } = "#76FF03";
public static string Accent4 { get; } = "#64DD17";
}
public static class Lime
{
public static string Default { get; } = "#CDDC39";
public static string Lighten5 { get; } = "#F9FBE7";
public static string Lighten4 { get; } = "#F0F4C3";
public static string Lighten3 { get; } = "#E6EE9C";
public static string Lighten2 { get; } = "#DCE775";
public static string Lighten1 { get; } = "#D4E157";
public static string Darken1 { get; } = "#C0CA33";
public static string Darken2 { get; } = "#AFB42B";
public static string Darken3 { get; } = "#9E9D24";
public static string Darken4 { get; } = "#827717";
public static string Accent1 { get; } = "#F4FF81";
public static string Accent2 { get; } = "#EEFF41";
public static string Accent3 { get; } = "#C6FF00";
public static string Accent4 { get; } = "#AEEA00";
}
public static class Yellow
{
public static string Default { get; } = "#FFEB3B";
public static string Lighten5 { get; } = "#FFFDE7";
public static string Lighten4 { get; } = "#FFF9C4";
public static string Lighten3 { get; } = "#FFF59D";
public static string Lighten2 { get; } = "#FFF176";
public static string Lighten1 { get; } = "#FFEE58";
public static string Darken1 { get; } = "#FDD835";
public static string Darken2 { get; } = "#FBC02D";
public static string Darken3 { get; } = "#F9A825";
public static string Darken4 { get; } = "#F57F17";
public static string Accent1 { get; } = "#FFFF8D";
public static string Accent2 { get; } = "#FFFF00";
public static string Accent3 { get; } = "#FFEA00";
public static string Accent4 { get; } = "#FFD600";
}
public static class Amber
{
public static string Default { get; } = "#FFC107";
public static string Lighten5 { get; } = "#FFF8E1";
public static string Lighten4 { get; } = "#FFECB3";
public static string Lighten3 { get; } = "#FFE082";
public static string Lighten2 { get; } = "#FFD54F";
public static string Lighten1 { get; } = "#FFCA28";
public static string Darken1 { get; } = "#FFB300";
public static string Darken2 { get; } = "#FFA000";
public static string Darken3 { get; } = "#FF8F00";
public static string Darken4 { get; } = "#FF6F00";
public static string Accent1 { get; } = "#FFE57F";
public static string Accent2 { get; } = "#FFD740";
public static string Accent3 { get; } = "#FFC400";
public static string Accent4 { get; } = "#FFAB00";
}
public static class Orange
{
public static string Default { get; } = "#FF9800";
public static string Lighten5 { get; } = "#FFF3E0";
public static string Lighten4 { get; } = "#FFE0B2";
public static string Lighten3 { get; } = "#FFCC80";
public static string Lighten2 { get; } = "#FFB74D";
public static string Lighten1 { get; } = "#FFA726";
public static string Darken1 { get; } = "#FB8C00";
public static string Darken2 { get; } = "#F57C00";
public static string Darken3 { get; } = "#EF6C00";
public static string Darken4 { get; } = "#E65100";
public static string Accent1 { get; } = "#FFD180";
public static string Accent2 { get; } = "#FFAB40";
public static string Accent3 { get; } = "#FF9100";
public static string Accent4 { get; } = "#FF6D00";
}
public static class DeepOrange
{
public static string Default { get; } = "#FF5722";
public static string Lighten5 { get; } = "#FBE9E7";
public static string Lighten4 { get; } = "#FFCCBC";
public static string Lighten3 { get; } = "#FFAB91";
public static string Lighten2 { get; } = "#FF8A65";
public static string Lighten1 { get; } = "#FF7043";
public static string Darken1 { get; } = "#F4511E";
public static string Darken2 { get; } = "#E64A19";
public static string Darken3 { get; } = "#D84315";
public static string Darken4 { get; } = "#BF360C";
public static string Accent1 { get; } = "#FF9E80";
public static string Accent2 { get; } = "#FF6E40";
public static string Accent3 { get; } = "#FF3D00";
public static string Accent4 { get; } = "#DD2C00";
}
public static class Brown
{
public static string Default { get; } = "#795548";
public static string Lighten5 { get; } = "#EFEBE9";
public static string Lighten4 { get; } = "#D7CCC8";
public static string Lighten3 { get; } = "#BCAAA4";
public static string Lighten2 { get; } = "#A1887F";
public static string Lighten1 { get; } = "#8D6E63";
public static string Darken1 { get; } = "#6D4C41";
public static string Darken2 { get; } = "#5D4037";
public static string Darken3 { get; } = "#4E342E";
public static string Darken4 { get; } = "#3E2723";
}
public static class BlueGrey
{
public static string Default { get; } = "#607D8B";
public static string Lighten5 { get; } = "#ECEFF1";
public static string Lighten4 { get; } = "#CFD8DC";
public static string Lighten3 { get; } = "#B0BEC5";
public static string Lighten2 { get; } = "#90A4AE";
public static string Lighten1 { get; } = "#78909C";
public static string Darken1 { get; } = "#546E7A";
public static string Darken2 { get; } = "#455A64";
public static string Darken3 { get; } = "#37474F";
public static string Darken4 { get; } = "#263238";
}
public static class Grey
{
public static string Default { get; } = "#9E9E9E";
public static string Lighten5 { get; } = "#FAFAFA";
public static string Lighten4 { get; } = "#F5F5F5";
public static string Lighten3 { get; } = "#EEEEEE";
public static string Lighten2 { get; } = "#E0E0E0";
public static string Lighten1 { get; } = "#BDBDBD";
public static string Darken1 { get; } = "#757575";
public static string Darken2 { get; } = "#616161";
public static string Darken3 { get; } = "#424242";
public static string Darken4 { get; } = "#212121";
}
public static class Shades
{
public static string Black { get; } = "#000000";
public static string White { get; } = "#FFFFFF";
public static string Transparent { get; } = "transparent";
}
}

View File

@ -0,0 +1,27 @@
@namespace Connected.Components
@inherits UIComponent
<div role="alert" class="@CompiledClassList" @attributes="CustomAttributes" @onclick="Clicked">
<div name="alert-content" class="alert-content">
@if (GlyphVisible)
{
<div class="alert-icon alert-icon-left">
<Icon Glyph="@Glyph" />
</div>
}
<div class="alert-message">
@ChildContent
</div>
</div>
@if (CloseGlyphVisible)
{
<div class="alert-close">
<GlyphButton ClassList="size-small" Glyph="@CloseGlyph" Clicked="OnCloseGlyphClick" />
</div>
}
</div>

View File

@ -0,0 +1,122 @@
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
namespace Connected.Components;
public partial class Alert : UIComponent{
/// <summary>
/// Contains the default container classlist and the user defined classes.
/// </summary>
private CssBuilder CompiledClassList
{
get
{
return new CssBuilder("alert")
.AddClass($"alert-{Variant}-{Severity}")
.AddClass(ClassList);
}
}
/// <summary>
/// Child content of the component.
/// </summary>
[Parameter]
public RenderFragment? ChildContent { get; set; }
#region EventCallbacks
/// <summary>
/// Raised when the alert is clicked.
/// </summary>
[Parameter]
public EventCallback<MouseEventArgs> Clicked { get; set; }
/// <summary>
/// The callback, when the close glyph has been clicked.
/// </summary>
[Parameter] public EventCallback<Alert> CloseClicked { get; set; }
#endregion
#region Content placeholders
/// <summary>
/// Define the glyph used for the close button.
/// </summary>
[Parameter]
public string CloseGlyph { get; set; } = Icons.Material.Filled.Close;
/// <summary>
/// Custom glyph, leave unset to use the standard glyph which depends on the Severity.
/// </summary>
[Parameter]
public string Glyph { get; set; } = default!;
#endregion
#region Styling properties
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? ClassList { get; set; }
/// <summary>
/// Sets if the alert shows a close glyph.
/// </summary>
[Parameter]
public bool CloseGlyphVisible { get; set; }
/// <summary>
/// If true, no alert glyph will be used.
/// </summary>
[Parameter]
public bool GlyphVisible { get; set; }
/// <summary>
/// Specifies the control's display style
/// </summary>
//TODO: Implement in DOM
[CascadingParameter(Name = "RightToLeft")]
public bool RightToLeft { get; set; }
/// <summary>
/// The severity of the alert. This defines the color and glyph used.
/// </summary>
[Parameter]
public Severity Severity { get; set; } = Severity.Normal;
/// <summary>
/// The variant to use.
/// </summary>
[Parameter]
public Variant Variant { get; set; } = Variant.Text;
#endregion
protected override void OnParametersSet()
{
if (!string.IsNullOrEmpty(Glyph))
return;
Glyph = GetGlyphForSeverity(Severity);
}
private string GetGlyphForSeverity(Severity severity)
{
return Severity switch
{
Severity.Normal => Icons.Material.Outlined.EventNote,
Severity.Info => Icons.Material.Outlined.Info,
Severity.Success => Icons.Custom.Uncategorized.AlertSuccess,
Severity.Warning => Icons.Material.Outlined.ReportProblem,
Severity.Error => Icons.Material.Filled.ErrorOutline,
_ => throw new ArgumentOutOfRangeException(nameof(severity)),
};
}
internal async Task OnCloseGlyphClick()
{
if (!CloseClicked.HasDelegate)
return;
await CloseClicked.InvokeAsync(this);
}
}

View File

@ -0,0 +1,10 @@
@namespace Connected.Components
@inherits UIComponent
<header @attributes="CustomAttributes" class="@CompiledHeaderClassList">
<ToolBar Class="@CompiledToolbarClassList">
@ChildContent
</ToolBar>
</header>

View File

@ -0,0 +1,86 @@
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class AppBar : UIComponent
{
#region Event callbacks
#endregion
#region Content placeholders
/// <summary>
/// Child content of the component.
/// </summary>
[Parameter]
public RenderFragment? ChildContent { get; set; }
#endregion
#region Styling properties
/// <summary>
/// The classlist determining the toolbar render.
/// </summary>
private CssBuilder CompiledToolbarClassList
{
get
{
return new CssBuilder("toolbar-appbar")
.AddClass(ToolbarClassList);
}
}
/// <summary>
/// Class names for the nested toolbar. In case of several, separate by spaces.
/// </summary>
[Parameter]
public string? ToolbarClassList { get; set; }
/// <summary>
/// The classlist determining the header render.
/// </summary>
private CssBuilder CompiledHeaderClassList
{
get
{
return new CssBuilder("app-bar")
.AddClass($"appbar-fixed-top", Fixed && VerticalAlignment == VerticalAlignment.Top)
.AddClass($"appbar-fixed-bottom", Fixed && VerticalAlignment == VerticalAlignment.Bottom)
.AddClass(HeaderClassList);
}
}
/// <summary>
/// Class names for the AppBar header. In case of several, separate by spaces.
/// </summary>
[Parameter]
public string? HeaderClassList { get; set; }
/// <summary>
/// Determines the vertical alignment of the AppBar.
/// </summary>
[Parameter]
public VerticalAlignment VerticalAlignment { get; set; }
/// <summary>
/// If true, appbar will be fixed.
/// </summary>
[Parameter]
public bool Fixed { get; set; } = true;
#endregion
#region Lifecycle
#endregion
}

View File

@ -0,0 +1,96 @@
@namespace Connected.Components
@inherits InputBase<T>
@typeparam T
<CascadingValue Name="SubscribeToParentForm" Value="false" IsFixed="true">
<div class="@AutocompleteClassList">
<InputControl Label="@Label" Variant="@Variant" HelperText="@HelperText" HelperTextOnFocus="@HelperTextOnFocus" FullWidth="@FullWidth" Margin="@Margin" Class="@ClassList()"
Error="@HasError" ErrorText="@ErrorText" Disabled="@Disabled" @onclick="@ToggleMenu" Required="@Required" ForId="@FieldId">
<InputContent>
<Input @ref="_elementReference" @key="_elementKey" InputType="InputType.Text"
Class="select-input" Margin="@Margin"
Variant="@Variant"
TextUpdateSuppression="@TextUpdateSuppression"
Value="@Text" DisableUnderLine="@DisableUnderLine"
Disabled="@Disabled" ReadOnly="@ReadOnly" Error="@HasError"
OnAdornmentClick="@OnAdornmentClick" AdornmentIcon="@CurrentIcon" Adornment="@Adornment" AdornmentColor="@AdornmentColor" IconSize="@IconSize" AdornmentText="@AdornmentText"
Clearable="@Clearable" OnClearButtonClick="@OnClearButtonClick"
@attributes="CustomAttributes"
TextChanged="OnTextChanged" OnBlur="OnInputBlurred"
OnKeyDown="@this.OnInputKeyDown"
OnKeyUp="@this.OnInputKeyUp" autocomplete=@("disabled-"+Guid.NewGuid()) KeyUpPreventDefault="KeyUpPreventDefault"
Placeholder="@Placeholder" ChangeTextImmediately="true"
InputMode="@InputMode" Pattern="@Pattern"
T="string" />
@if (ShowProgressIndicator && IsLoading)
{
@if (ProgressIndicatorTemplate is not null)
{
@ProgressIndicatorTemplate
}
else
{
<div class="@CircularProgressClassList">
<ProgressCircular Color="ProgressIndicatorColor" Indeterminate="true" Size="Size.Small"/>
</div>
}
}
<Popover Open="@IsOpen" MaxHeight="@MaxHeight" AnchorOrigin="@AnchorOrigin" TransformOrigin="@TransformOrigin" Class="@PopoverClass" RelativeWidth="true">
@if(ProgressIndicatorInPopoverTemplate != null && IsLoading)
{
@ProgressIndicatorInPopoverTemplate
}
else if (_items != null && _items.Length != 0)
{
<List Clickable="true" Dense="@Dense">
@for (var index = 0; index < _items.Length; index++)
{
var item = _items[index];
bool is_selected = index == _selectedListItemIndex;
bool is_disabled = !_enabledItemIndices.Contains(index);
<ListItem @key="@item" id="@GetListItemId(index)" Disabled="@(is_disabled)" OnClick="@(async() => await ListItemOnClick(item))" OnClickHandlerPreventDefault="true" Class="@(is_selected ? "selected-item primary-text primary-hover" : "")">
@if (ItemTemplate == null)
{
@GetItemString(item)
}
else if (is_disabled && ItemDisabledTemplate is not null)
{
@ItemDisabledTemplate(item)
}
else if (is_selected)
{
@if (ItemSelectedTemplate is null)
@ItemTemplate(item)
else
@ItemSelectedTemplate(item)
}
else
{
@ItemTemplate(item)
}
</ListItem>
}
@if (MoreItemsTemplate is not null && _itemsReturned > MaxItems)
{
<div class="pa-1">
@MoreItemsTemplate
</div>
}
</List>
}
else if (NoItemsTemplate is not null)
{
<div class="pa-1">
@NoItemsTemplate
</div>
}
</Popover>
</InputContent>
</InputControl>
</div>
</CascadingValue>
<Overlay Visible="IsOpen" OnClick="@ToggleMenu" @ontouchstart="@ToggleMenu" LockScroll="false" />

View File

@ -0,0 +1,732 @@
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
namespace Connected.Components;
public partial class Autocomplete<T> : InputBase<T>, IDisposable
{
#region Variables
[Inject]
IScrollManager ScrollManager { get; set; }
private Func<T, string>? _toStringFunc;
private Task _currentSearchTask;
private CancellationTokenSource _cancellationTokenSrc;
private bool _isOpen;
private Timer _timer;
private T[] _items;
private int _selectedListItemIndex = 0;
private IList<int> _enabledItemIndices = new List<int>();
private int _itemsReturned; //the number of items returned by the search function
int _elementKey = 0;
/// <summary>
/// This boolean will keep track if the clear function is called too keep the set text function to be called.
/// </summary>
private bool _isCleared;
private Input<string> _elementReference;
/// <summary>
/// We need a random id for the year items in the year list so we can scroll to the item safely in every DatePicker.
/// </summary>
private readonly string _componentId = Guid.NewGuid().ToString();
#endregion
#region Event callbacks
/// <summary>
/// Function to be invoked when checking whether an item should be disabled or not
/// </summary>
[Parameter]
public Func<T, bool> ItemDisabledFunc { get; set; }
/// <summary>
/// If true, the currently selected item from the drop-down (if it is open) is selected.
/// </summary>
[Parameter]
public bool SelectValueOnTab { get; set; } = false;
/// <summary>
/// Func that returns a list of items matching the typed text. Provides a cancellation token that
/// is marked as cancelled when the user changes the search text or selects a value from the list.
/// This can be used to cancel expensive asynchronous work occuring within the SearchFunc itself.
/// </summary>
[Parameter]
public Func<string, CancellationToken, Task<IEnumerable<T>>> SearchFuncWithCancel { get; set; }
/// <summary>
/// The SearchFunc returns a list of items matching the typed text
/// </summary>
[Parameter]
public Func<string, Task<IEnumerable<T>>> SearchFunc { get; set; }
// <summary>
/// An event triggered when the state of IsOpen has changed
/// </summary>
[Parameter]
public EventCallback<bool> IsOpenChanged { get; set; }
/// <summary>
/// Button click event for clear button. Called after text and value has been cleared.
/// </summary>
[Parameter]
public EventCallback<MouseEventArgs> OnClearButtonClick { get; set; }
internal virtual async Task OnInputKeyUp(KeyboardEventArgs args)
{
switch (args.Key)
{
case "Enter":
case "NumpadEnter":
if (!IsOpen)
await ToggleMenu();
else
await OnEnterKey();
break;
case "ArrowDown":
if (!IsOpen)
await ToggleMenu();
else
{
var increment = _enabledItemIndices.ElementAtOrDefault(_enabledItemIndices.IndexOf(_selectedListItemIndex) + 1) - _selectedListItemIndex;
await SelectNextItem(increment < 0 ? 1 : increment);
}
break;
case "ArrowUp":
if (args.AltKey)
await ChangeMenu(false);
else if (!IsOpen)
await ToggleMenu();
else
{
var decrement = _selectedListItemIndex - _enabledItemIndices.ElementAtOrDefault(_enabledItemIndices.IndexOf(_selectedListItemIndex) - 1);
await SelectNextItem(-(decrement < 0 ? 1 : decrement));
}
break;
case "Escape":
await ChangeMenu(false);
break;
case "Tab":
await Task.Delay(1);
if (!IsOpen)
return;
if (SelectValueOnTab)
await OnEnterKey();
else
await ToggleMenu();
break;
case "Backspace":
if (args.CtrlKey && args.ShiftKey)
Reset();
break;
}
base.InvokeKeyUp(args);
}
internal virtual async Task OnInputKeyDown(KeyboardEventArgs args)
{
switch (args.Key)
{
case "Tab":
// NOTE: We need to catch Tab in Keydown because a tab will move focus to the next element and thus
// in OnInputKeyUp we'd never get the tab key
if (!IsOpen)
return;
if (SelectValueOnTab)
await OnEnterKey();
else
IsOpen = false;
break;
}
}
public async Task SelectOption(T value)
{
await SetValueAsync(value);
if (_items is not null)
_selectedListItemIndex = Array.IndexOf(_items, value);
var optionText = GetItemString(value);
if (!_isCleared)
await SetTextAsync(optionText, false);
_timer?.Dispose();
IsOpen = false;
BeginValidate();
if (!_isCleared)
_elementReference?.SetText(optionText);
_elementReference?.FocusAsync().AndForget();
StateHasChanged();
}
/// <summary>
/// Toggle the menu (if not disabled or not readonly, and is opened).
/// </summary>
public async Task ToggleMenu()
{
if ((Disabled || ReadOnly) && !IsOpen)
return;
await ChangeMenu(!IsOpen);
}
private async Task ChangeMenu(bool open)
{
if (open)
{
if (SelectOnClick)
await _elementReference.SelectAsync();
await OnSearchAsync();
}
else
{
_timer?.Dispose();
RestoreScrollPosition();
await CoerceTextToValue();
IsOpen = false;
StateHasChanged();
}
}
protected override Task UpdateTextPropertyAsync(bool updateValue)
{
_timer?.Dispose();
// This keeps the text from being set when clear() was called
if (_isCleared)
return Task.CompletedTask;
return base.UpdateTextPropertyAsync(updateValue);
}
protected override async Task UpdateValuePropertyAsync(bool updateText)
{
_timer?.Dispose();
if (ResetValueOnEmptyText && string.IsNullOrWhiteSpace(Text))
await SetValueAsync(default, updateText);
if (DebounceInterval <= 0)
await OnSearchAsync();
else
_timer = new Timer(OnTimerComplete, null, DebounceInterval, Timeout.Infinite);
}
private void OnTimerComplete(object stateInfo)
{
InvokeAsync(OnSearchAsync);
}
private void CancelToken()
{
try
{
_cancellationTokenSrc?.Cancel();
}
catch
{
}
_cancellationTokenSrc = new CancellationTokenSource();
}
/// <remarks>
/// This async method needs to return a task and be awaited in order for
/// unit tests that trigger this method to work correctly.
/// </remarks>
private async Task OnSearchAsync()
{
if (MinCharacters > 0 && (string.IsNullOrWhiteSpace(Text) || Text.Length < MinCharacters))
{
IsOpen = false;
StateHasChanged();
return;
}
IEnumerable<T> searchedItems = Array.Empty<T>();
CancelToken();
try
{
if (ProgressIndicatorInPopoverTemplate is not null)
IsOpen = true;
var searchTask = SearchFuncWithCancel is not null ? SearchFuncWithCancel(Text, _cancellationTokenSrc.Token) : SearchFunc(Text);
_currentSearchTask = searchTask;
StateHasChanged();
searchedItems = await searchTask ?? Array.Empty<T>();
}
catch (TaskCanceledException)
{
}
catch (OperationCanceledException)
{
}
catch (Exception e)
{
Console.WriteLine($"The search function failed to return results: {e.Message}");
}
_itemsReturned = searchedItems.Count();
if (MaxItems.HasValue)
searchedItems = searchedItems.Take(MaxItems.Value);
_items = searchedItems.ToArray();
_enabledItemIndices = _items.Select((item, idx) => (item, idx)).Where(tuple => ItemDisabledFunc?.Invoke(tuple.item) != true).Select(tuple => tuple.idx).ToList();
_selectedListItemIndex = _enabledItemIndices.Any() ? _enabledItemIndices.First() : -1;
IsOpen = true;
if (_items?.Length == 0)
{
await CoerceValueToText();
StateHasChanged();
return;
}
StateHasChanged();
}
/// <summary>
/// Clears the autocomplete's text
/// </summary>
public async Task Clear()
{
_isCleared = true;
IsOpen = false;
await SetTextAsync(string.Empty, updateValue: false);
await CoerceValueToText();
if (_elementReference is not null)
await _elementReference.SetText(string.Empty);
_timer?.Dispose();
StateHasChanged();
}
protected override async void ResetValue()
{
await Clear();
base.ResetValue();
}
private string GetItemString(T item)
{
if (item is null)
return string.Empty;
try
{
return Converter.Convert(item);
}
catch (NullReferenceException) { }
return "null";
}
private ValueTask SelectNextItem(int increment)
{
if (increment == 0 || _items is null || !_items.Any() || !_enabledItemIndices.Any())
return ValueTask.CompletedTask;
// if we are at the end, or the beginning we just do an rollover
_selectedListItemIndex = Math.Clamp(value: (10 * _items.Length + _selectedListItemIndex + increment) % _items.Length, min: 0, max: _items.Length - 1);
return ScrollToListItem(_selectedListItemIndex);
}
/// <summary>
/// Scroll to a specific item index in the Autocomplete list of items.
/// </summary>
/// <param name="index">the index to scroll to</param>
public ValueTask ScrollToListItem(int index)
{
var id = GetListItemId(index);
//id of the scrolled element
return ScrollManager.ScrollToListItemAsync(id);
}
/*
* This restores the scroll position after closing the menu and element being 0
*/
private void RestoreScrollPosition()
{
if (_selectedListItemIndex != 0)
return;
ScrollManager.ScrollToListItemAsync(GetListItemId(0));
}
private string GetListItemId(in int index)
{
return $"{_componentId}_item{index}";
}
internal Task OnEnterKey()
{
if (!IsOpen)
return Task.CompletedTask;
if (_items is null || !_items.Any())
return Task.CompletedTask;
if (_selectedListItemIndex >= 0 && _selectedListItemIndex < _items.Length)
return SelectOption(_items[_selectedListItemIndex]);
return Task.CompletedTask;
}
private Task OnInputBlurred(FocusEventArgs args)
{
OnBlur.InvokeAsync(args);
return Task.CompletedTask;
// we should not validate on blur in autocomplete, because the user needs to click out of the input to select a value,
// resulting in a premature validation. thus, don't call base
//base.OnBlurred(args);
}
private Task CoerceTextToValue()
{
if (!CoerceText)
return Task.CompletedTask;
_timer?.Dispose();
var text = Value is null ? null : GetItemString(Value);
/*
* Don't update the value to prevent the popover from opening again after coercion
*/
if (text != Text)
return SetTextAsync(text, updateValue: false);
return Task.CompletedTask;
}
private Task CoerceValueToText()
{
if (!CoerceValue)
return Task.CompletedTask;
_timer?.Dispose();
var value = Converter.ConvertBack(Text);
return SetValueAsync(value, updateText: false);
}
/// <summary>
/// Focus the input in the Autocomplete component.
/// </summary>
public override ValueTask FocusAsync()
{
return _elementReference.FocusAsync();
}
/// <summary>
/// Blur from the input in the Autocomplete component.
/// </summary>
public override ValueTask BlurAsync()
{
return _elementReference.BlurAsync();
}
/// <summary>
/// Select all text within the Autocomplete input.
/// </summary>
public override ValueTask SelectAsync()
{
return _elementReference.SelectAsync();
}
/// <summary>
/// Select all text within the Autocomplete input and aligns its start and end points to the text content of the current input.
/// </summary>
public override ValueTask SelectRangeAsync(int pos1, int pos2)
{
return _elementReference.SelectRangeAsync(pos1, pos2);
}
private async Task OnTextChanged(string text)
{
await TextChanged.InvokeAsync();
if (text is null)
return;
await SetTextAsync(text, true);
}
private async Task ListItemOnClick(T item)
{
await SelectOption(item);
}
#endregion
#region Content placeholders
#endregion
#region Styling properties
/// <summary>
/// Show clear button.
/// </summary>
[Parameter]
public bool Clearable { get; set; } = false;
private string CurrentIcon => !string.IsNullOrWhiteSpace(AdornmentIcon) ? AdornmentIcon : _isOpen ? CloseIcon : OpenIcon;
/// <summary>
/// Returns the open state of the drop-down.
/// </summary>
public bool IsOpen
{
get => _isOpen;
// Note: the setter is protected because it was needed by a user who derived his own autocomplete from this class.
// Note: setting IsOpen will not open or close it. Use ToggleMenu() for that.
protected set
{
if (value == _isOpen)
return;
_isOpen = value;
IsOpenChanged.InvokeAsync(_isOpen).AndForget();
}
}
/// <summary>
/// User class names for the popover, separated by space
/// </summary>
[Parameter]
public string PopoverClass { get; set; }
/// <summary>
/// Set the anchor origin point to determen where the popover will open from.
/// </summary>
[Parameter]
public Origin AnchorOrigin { get; set; } = Origin.BottomCenter;
/// <summary>
/// Sets the transform origin point for the popover.
/// </summary>
[Parameter]
public Origin TransformOrigin { get; set; } = Origin.TopCenter;
/// <summary>
/// If true, compact vertical padding will be applied to all Autocomplete items.
/// </summary>
[Parameter]
public bool Dense { get; set; }
/// <summary>
/// The Open Autocomplete Glyph
/// </summary>
[Parameter]
public string OpenIcon { get; set; } = Icons.Material.Filled.ArrowDropDown;
/// <summary>
/// The Close Autocomplete Glyph
/// </summary>
[Parameter]
public string CloseIcon { get; set; } = Icons.Material.Filled.ArrowDropUp;
/// <summary>
/// The maximum height of the Autocomplete when it is open.
/// </summary>
[Parameter]
public int MaxHeight { get; set; } = 300;
/// <summary>
/// Defines how values are displayed in the drop-down list
/// </summary>
[Parameter]
public Func<T, string>? ToStringFunc
{
get => _toStringFunc;
set
{
if (_toStringFunc == value)
return;
_toStringFunc = value;
SetConverter(new LambdaConverter<T, string>(_toStringFunc ?? (x => x?.ToString()), null));
}
}
/// <summary>
/// Whether to show the progress indicator.
/// </summary>
[Parameter]
public bool ShowProgressIndicator { get; set; } = false;
/// <summary>
/// The color of the progress indicator.
/// </summary>
[Parameter]
public ThemeColor ProgressIndicatorColor { get; set; } = ThemeColor.Default;
private bool IsLoading => _currentSearchTask is not null && !_currentSearchTask.IsCompleted;
/// <summary>
/// Maximum items to display, defaults to 10.
/// A null value will display all items.
/// </summary>
[Parameter]
public int? MaxItems { get; set; } = 10;
/// <summary>
/// Minimum characters to initiate a search
/// </summary>
[Parameter]
public int MinCharacters { get; set; } = 0;
/// <summary>
/// Reset value if user deletes the text
/// </summary>
[Parameter]
public bool ResetValueOnEmptyText { get; set; } = false;
/// <summary>
/// If true, clicking the text field will select (highlight) its contents.
/// </summary>
[Parameter]
public bool SelectOnClick { get; set; } = true;
protected string ClassList()
{
return new CssBuilder("select")
.Build();
}
protected string AutocompleteClassList()
{
return new CssBuilder("select")
.AddClass("autocomplete")
.AddClass("width-full", FullWidth)
.AddClass("autocomplete--with-progress", ShowProgressIndicator && IsLoading)
.Build();
}
protected string CircularProgressClassList()
{
return new CssBuilder("progress-indicator-circular")
.AddClass("progress-indicator-circular--with-adornment", Adornment == Adornment.End)
.Build();
}
/// <summary>
/// Debounce interval in milliseconds.
/// </summary>
[Parameter]
public int DebounceInterval { get; set; } = 100;
/// <summary>
/// Optional presentation template for unselected items
/// </summary>
[Parameter]
public RenderFragment<T> ItemTemplate { get; set; }
/// <summary>
/// Optional presentation template for the selected item
/// </summary>
[Parameter]
public RenderFragment<T> ItemSelectedTemplate { get; set; }
/// <summary>
/// Optional presentation template for disabled item
/// </summary>
[Parameter]
public RenderFragment<T> ItemDisabledTemplate { get; set; }
/// <summary>
/// Optional presentation template for when more items were returned from the Search function than the MaxItems limit
/// </summary>
[Parameter]
public RenderFragment MoreItemsTemplate { get; set; }
/// <summary>
/// Optional presentation template for when no items were returned from the Search function
/// </summary>
[Parameter]
public RenderFragment NoItemsTemplate { get; set; }
/// <summary>
/// Optional template for progress indicator
/// </summary>
[Parameter]
public RenderFragment ProgressIndicatorTemplate { get; set; }
/// <summary>
/// Optional template for showing progress indicator inside the popover
/// </summary>
[Parameter]
public RenderFragment ProgressIndicatorInPopoverTemplate { get; set; }
/// <summary>
/// On drop-down close override Text with selected Value. This makes it clear to the user
/// which list value is currently selected and disallows incomplete values in Text.
/// </summary>
[Parameter]
public bool CoerceText { get; set; } = true;
/// <summary>
/// If user input is not found by the search func and CoerceValue is set to true the user input
/// will be applied to the Value which allows to validate it and display an error message.
/// </summary>
[Parameter]
public bool CoerceValue { get; set; }
#endregion Styling
#region Lifecycle
/// <summary>
/// Constructor
/// </summary>
public Autocomplete()
{
Adornment = Adornment.End;
IconSize = Size.Medium;
}
protected override void OnInitialized()
{
var text = GetItemString(Value);
if (!string.IsNullOrWhiteSpace(text))
Text = text;
}
protected override void OnAfterRender(bool firstRender)
{
_isCleared = false;
base.OnAfterRender(firstRender);
}
protected override void Dispose(bool disposing)
{
_timer?.Dispose();
if (_cancellationTokenSrc is not null)
{
try
{
_cancellationTokenSrc.Dispose();
}
catch { }
}
base.Dispose(disposing);
}
#endregion
}

View File

@ -0,0 +1,23 @@
@namespace Connected.Components
@inherits UIComponent
@if(AvatarGroup is null || AvatarGroup.MaxGroupReached(this))
{
<div @attributes="CustomAttributes" class="@CompiledClassList" style="@CompiledStyles">
@if (!String.IsNullOrEmpty(Image))
{
if (!String.IsNullOrEmpty(ImageAltText))
{
<img src="@Image" alt="@ImageAltText" class="avatar-img" />
}
else
{
<img src="@Image" class="avatar-img" />
}
}
else
{
@ChildContent
}
</div>
}

View File

@ -0,0 +1,122 @@
using Connected.Annotations;
using Connected.Extensions;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
partial class Avatar : UIComponent, IDisposable
{
#region Variables
#endregion
#region Events
internal void ForceRedraw() => StateHasChanged();
#endregion
#region Content
/// <summary>
/// Child content of the component.
/// </summary>
[Parameter]
public RenderFragment? ChildContent { get; set; }
/// <summary>
/// Link to image, if set a image will be displayed instead of text.
/// </summary>
[Parameter]
public string? Image { get; set; }
/// <summary>
/// If set (and Image is also set), will add an alt property to the img element
/// </summary>
[Parameter]
public string? ImageAltText { get; set; }
[CascadingParameter]
protected AvatarGroup? AvatarGroup { get; set; }
#endregion
#region Styling
protected CssBuilder CompiledClassList
{
get
{
return new CssBuilder("avatar")
.AddClass($"avatar-{Size}")
.AddClass($"avatar-rounded", Kind == AvatarKind.Rounded)
.AddClass($"avatar-square", Kind == AvatarKind.Square)
.AddClass($"avatar-{Variant}")
.AddClass($"avatar-{Variant}-{Color}")
.AddClass($"elevation-{Elevation}")
.AddClass(ClassList)
.AddClass(AvatarGroup?.GetAvatarSpacing() ?? new CssBuilder(), AvatarGroup != null);
}
}
protected StyleBuilder CompiledStyles
{
get
{
return new StyleBuilder()
.AddStyle(AvatarGroup?.GetAvatarZindex(this) ?? new StyleBuilder(), AvatarGroup is not null);
}
}
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? ClassList { get; set; }
/// <summary>
/// The color of the component. It supports the theme colors.
/// </summary>
[Parameter]
public ThemeColor Color { get; set; } = ThemeColor.Default;
/// <summary>
/// The higher the number, the heavier the drop-shadow.
/// </summary>
[Parameter]
public int Elevation { set; get; } = 0;
/// <summary>
/// Sets the avatar appearance
/// </summary>
public AvatarKind Kind { get; set; }
/// <summary>
/// The Size of the MudAvatar.
/// </summary>
[Parameter]
public Size Size { get; set; } = Size.Medium;
/// <summary>
/// The variant to use.
/// </summary>
[Parameter]
public Variant Variant { get; set; } = Variant.Filled;
#endregion
#region Lifecycle
protected override void OnInitialized()
{
base.OnInitialized();
AvatarGroup?.AddAvatar(this);
}
public void Dispose() => AvatarGroup?.RemoveAvatar(this);
#endregion
}

View File

@ -0,0 +1,14 @@
@namespace Connected.Components
@inherits UIComponent
<div @attributes="CustomAttributes" class="@CompiledClassList">
<CascadingValue Value="this" IsFixed="true">
@ChildContent
</CascadingValue>
@if(_avatars.Count > Max)
{
<Avatar Class="@CompiledMaxAvatarClassList" Color="@MaxColor" Size="@MaxSize" Variant="@MaxVariant" Rounded="@MaxRounded" Square="@MaxSquare" Elevation="@MaxElevation">
@($"+{_avatars.Count - Max}")
</Avatar>
}
</div>

View File

@ -0,0 +1,205 @@
using Connected.Annotations;
using Connected.Extensions;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
partial class AvatarGroup : UIComponent
{
#region Variables
private bool _childrenNeedUpdates = false;
private int _spacing = 3;
private List<Avatar> _avatars = new();
#endregion
#region Event callbacks
#endregion
#region Content
/// <summary>
/// Child content of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.AvatarGroup.Behavior)]
public RenderFragment ChildContent { get; set; }
internal void AddAvatar(Avatar avatar)
{
_avatars.Add(avatar);
StateHasChanged();
}
internal void RemoveAvatar(Avatar avatar)
{
_avatars.Remove(avatar);
}
internal bool MaxGroupReached(Avatar avatar)
{
if (_avatars.IndexOf(avatar) < Max)
return true;
else
return false;
}
#endregion
#region Styling properties
internal CssBuilder GetAvatarSpacing() => new CssBuilder()
.AddClass($"ms-n{Spacing}");
internal StyleBuilder GetAvatarZindex(Avatar avatar) => new StyleBuilder()
.AddStyle("z-index", $"{_avatars.Count - _avatars.IndexOf(avatar)}");
private CssBuilder CompiledClassList
{
get
{
return new CssBuilder("avatar-group")
.AddClass($"avatar-group-outlined", Outlined)
.AddClass($"avatar-group-outlined-{OutlineColor.ToDescription()}", Outlined)
.AddClass(ClassList);
}
}
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? ClassList { get; set; }
private CssBuilder CompiledMaxAvatarClassList
{
get
{
return new CssBuilder("avatar-group-max-avatar")
.AddClass($"ms-n{Spacing}")
.AddClass(MaxAvatarClass);
}
}
/// <summary>
/// Custom class/classes for MaxAvatar
/// </summary>
[Parameter]
[Category(CategoryTypes.AvatarGroup.Appearance)]
public string MaxAvatarClass { get; set; }
/// <summary>
/// Outlines the grouped avatars to distinguish them, useful when avatars are the same color or uses images.
/// </summary>
[Parameter]
[Category(CategoryTypes.AvatarGroup.Appearance)]
public bool Outlined { get; set; } = true;
/// <summary>
/// Sets the color of the outline if its used.
/// </summary>
[Parameter]
[Category(CategoryTypes.AvatarGroup.Appearance)]
public ThemeColor OutlineColor { get; set; } = ThemeColor.Surface;
/// <summary>
/// Elevation of the MaxAvatar the higher the number, the heavier the drop-shadow.
/// </summary>
[Parameter]
[Category(CategoryTypes.AvatarGroup.Appearance)]
public int MaxElevation { set; get; } = 0;
/// <summary>
/// If true, MaxAvatar border-radius is set to 0.
/// </summary>
[Parameter]
[Category(CategoryTypes.AvatarGroup.Appearance)]
public bool MaxSquare { get; set; }
/// <summary>
/// If true, MaxAvatar will be rounded.
/// </summary>
[Parameter]
[Category(CategoryTypes.AvatarGroup.Appearance)]
public bool MaxRounded { get; set; }
/// <summary>
/// Color for the MaxAvatar.
/// </summary>
[Parameter]
[Category(CategoryTypes.AvatarGroup.Appearance)]
public ThemeColor MaxColor { get; set; } = ThemeColor.Default;
/// <summary>
/// Size of the MaxAvatar.
/// </summary>
[Parameter]
[Category(CategoryTypes.AvatarGroup.Appearance)]
public Size MaxSize { get; set; } = Size.Medium;
/// <summary>
/// Variant of the MaxAvatar.
/// </summary>
[Parameter]
[Category(CategoryTypes.AvatarGroup.Appearance)]
public Variant MaxVariant { get; set; } = Variant.Filled;
private int _max = 3;
/// <summary>
/// Max avatars to show before showing +x avatar, default value 0 has no max.
/// </summary>
[Parameter]
[Category(CategoryTypes.AvatarGroup.Behavior)]
public int Max
{
get => _max;
set
{
if (value != _max)
{
_max = value;
_childrenNeedUpdates = true;
}
}
}
/// <summary>
/// Spacing between avatars where 0 is none and 16 max.
/// </summary>
[Parameter]
public int Spacing
{
get => _spacing;
set
{
if (value != _spacing)
{
_spacing = value;
_childrenNeedUpdates = true;
}
}
}
#endregion
#region Lifecycle
protected override void OnParametersSet()
{
base.OnParametersSet();
if (_childrenNeedUpdates == true)
{
foreach (var avatar in _avatars)
{
avatar.ForceRedraw();
}
_childrenNeedUpdates = false;
}
}
#endregion
}

View File

@ -0,0 +1,8 @@
namespace Connected.Components;
public enum AvatarKind
{
Undefined = 0,
Unadorned = 1,
Rounded = 2,
Square = 3
}

View File

@ -0,0 +1,24 @@
@namespace Connected.Components
@inherits UIComponent
<span @attributes="CustomAttributes" class="@CompiledClassList">
@ChildContent
@if (Visible)
{
<span class="@WrapperClass">
<span class="@BadgeClassName" @onclick="HandleBadgeClick">
@if (!Dot)
{
@if (!String.IsNullOrEmpty(Icon))
{
<Icon Glyph="@Icon" Class="icon-badge" />
}
else
{
@_content
}
}
</span>
</span>
}
</span>

View File

@ -0,0 +1,177 @@
using System.Diagnostics.CodeAnalysis;
using Connected.Annotations;
using Connected.Extensions;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
namespace Connected.Components;
public partial class Badge : UIComponent
{
#region Variables
#endregion
#region Events
/// <summary>
/// Button click event if set.
/// </summary>
[Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
internal Task HandleBadgeClick(MouseEventArgs e)
{
if (OnClick.HasDelegate)
return OnClick.InvokeAsync(e);
return Task.CompletedTask;
}
#endregion
#region Content
private string _content;
/// <summary>
/// Sets the Glyph to use in the badge.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Behavior)]
public string Icon { get; set; }
/// <summary>
/// Max value to show when content is integer type.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Behavior)]
public int Max { get; set; } = 99;
/// <summary>
/// Content you want inside the badge. Supported types are string and integer.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Behavior)]
public object Content { get; set; }
/// <summary>
/// Child content of component, the content that the badge will apply to.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Behavior)]
public RenderFragment ChildContent { get; set; }
#endregion
#region Styling
/// <summary>
/// Badge class names, separated by space.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Appearance)]
public string BadgeClass { get; set; }
protected string CompiledClassList =>
new CssBuilder("badge-root")
.AddClass(AdditionalClassList)
.Build();
protected string WrapperClass =>
new CssBuilder("badge-wrapper")
.AddClass($"badge-{Origin.ToDescription().Replace("-", " ")}")
.Build();
protected string BadgeClassName =>
new CssBuilder("badge")
.AddClass("badge-dot", Dot)
.AddClass("badge-bordered", Bordered)
.AddClass("badge-icon", !string.IsNullOrEmpty(Icon) && !Dot)
.AddClass($"badge-{Origin.ToDescription().Replace("-", " ")}")
.AddClass($"elevation-{Elevation.ToString()}")
.AddClass("theme-" + Color.ToDescription(), Color != ThemeColor.Default)
.AddClass("badge-default", Color == ThemeColor.Default)
.AddClass("badge-overlap", Overlap)
.AddClass(BadgeClass)
.Build();
/// <summary>
/// The placement of the badge.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Appearance)]
public Origin Origin { get; set; } = Origin.TopRight;
/// <summary>
/// The higher the number, the heavier the drop-shadow.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Appearance)]
public int Elevation { set; get; } = 0;
/// <summary>
/// The visibility of the badge.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Behavior)]
public bool Visible { get; set; } = true;
/// <summary>
/// The color of the badge.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Appearance)]
public ThemeColor Color { get; set; } = ThemeColor.Default;
/// <summary>
/// Reduces the size of the badge and hide any of its content.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Behavior)]
public bool Dot { get; set; }
/// <summary>
/// Overlaps the childcontent on top of the content.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Appearance)]
public bool Overlap { get; set; }
/// <summary>
/// Applies a border around the badge.
/// </summary>
[Parameter]
[Category(CategoryTypes.Badge.Appearance)]
public bool Bordered { get; set; }
#endregion
#region Lifecycle
protected override void OnParametersSet()
{
if (Content is string stringContent)
{
_content = stringContent;
}
else if (Content is int numberContent)
{
if (numberContent > Max)
{
_content = Max + "+";
}
else
{
_content = numberContent.ToString();
}
}
else
{
_content = null;
}
}
#endregion
}

View File

@ -0,0 +1,31 @@
using Connected.Annotations;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public abstract class BindableItemsControlBase<TChildComponent, TData> : ItemsControlBase<TChildComponent>
where TChildComponent : UIComponent
{
/// <summary>
/// Items Collection - For databinding usage
/// </summary>
[Parameter]
[Category(CategoryTypes.General.Data)]
public IEnumerable<TData> ItemsSource { get; set; }
/// <summary>
/// Template for each Item in ItemsSource collection
/// </summary>
[Parameter]
[Category(CategoryTypes.General.Appearance)]
public RenderFragment<TData> ItemTemplate { get; set; }
/// <summary>
/// Gets the Selected Item from ItemsSource, or Selected TChildComponent, when it's null
/// </summary>
public object SelectedItem
{
get => ItemsSource == null ? Items[SelectedIndex] : ItemsSource.ElementAtOrDefault(SelectedIndex);
}
}

View File

@ -0,0 +1,89 @@
using Connected.Annotations;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public class BooleanInput<T> : FormComponent<T, bool?>
{
public BooleanInput() : base(new BoolConverter<T>()) { }
/// <summary>
/// If true, the input will be disabled.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Behavior)]
public bool Disabled { get; set; }
/// <summary>
/// If true, the input will be read-only.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Behavior)]
public bool ReadOnly { get; set; }
/// <summary>
/// The state of the component
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Data)]
public T Checked
{
get => _value;
set => _value = value;
}
/// <summary>
/// If true will prevent the click from bubbling up the event tree.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Behavior)]
public bool StopClickPropagation { get; set; } = true;
/// <summary>
/// Fired when Checked changes.
/// </summary>
[Parameter] public EventCallback<T> CheckedChanged { get; set; }
protected bool? BoolValue => Converter.Convert(Checked);
protected virtual Task OnChange(ChangeEventArgs args)
{
Modified = true;
return SetBoolValueAsync((bool?)args.Value);
}
protected Task SetBoolValueAsync(bool? value)
{
return SetCheckedAsync(Converter.ConvertBack(value));
}
protected async Task SetCheckedAsync(T value)
{
if (Disabled)
return;
if (!EqualityComparer<T>.Default.Equals(Checked, value))
{
Checked = value;
await CheckedChanged.InvokeAsync(value);
BeginValidate();
FieldChanged(Checked);
}
}
protected override bool SetConverter(Converter<T, bool?> value)
{
var changed = base.SetConverter(value);
if (changed)
SetBoolValueAsync(Converter.Convert(Checked)).AndForget();
return changed;
}
/// <summary>
/// A value is required, so if not checked we return ERROR.
/// </summary>
protected override bool HasValue(T value)
{
return (BoolValue == true);
}
}

View File

@ -0,0 +1,17 @@
namespace Connected.Components;
public class BreadcrumbItem
{
public string Text { get; }
public string Href { get; }
public bool Disabled { get; }
public string Icon { get; }
public BreadcrumbItem(string text, string href, bool disabled = false, string icon = null)
{
Text = text;
Disabled = disabled;
Href = href;
Icon = icon;
}
}

View File

@ -0,0 +1,19 @@
@namespace Connected.Components
@inherits UIComponent
<li class="@Classname">
@if (Parent?.ItemTemplate is null)
{
<a href="@(Item?.Href ?? "#")">
@if (Item?.Icon != null)
{
<Icon Glyph="@Item?.Icon" Size="Size.Small" />
}
@Item?.Text
</a>
}
else
{
@Parent?.ItemTemplate(Item);
}
</li>

View File

@ -0,0 +1,23 @@
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class BreadcrumbLink : UIComponent
{
#region Content
[Parameter]
public BreadcrumbItem Item { get; set; }
[CascadingParameter]
public Breadcrumbs Parent { get; set; }
#endregion
#region Style
private string Classname => new CssBuilder("breadcrumb-item")
.AddClass("disabled", Item?.Disabled)
.Build();
#endregion
}

View File

@ -0,0 +1,13 @@
@namespace Connected.Components
@inherits UIComponent
<li aria-hidden="true" class="breadcrumb-separator mud-ltr mud-flip-x-rtl">
@if (Parent?.SeparatorTemplate is null)
{
<span>@Parent?.Separator</span>
}
else
{
@Parent?.SeparatorTemplate
}
</li>

View File

@ -0,0 +1,10 @@
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class BreadcrumbSeparator : UIComponent
{
#region Content
[CascadingParameter]
public Breadcrumbs Parent { get; set; }
#endregion
}

View File

@ -0,0 +1,35 @@
@namespace Connected.Components
@inherits UIComponent
@if (Items is null || !Items.Any())
{
return;
}
<CascadingValue Value="this" IsFixed="true">
<ul @attributes="CustomAttributes" class=@Classname>
@if (MaxItems is not null && Collapsed && Items.Count > MaxItems)
{
<BreadcrumbLink Item="Items[0]"></BreadcrumbLink>
<BreadcrumbSeparator></BreadcrumbSeparator>
<li class="breadcrumbs-expander" @onclick="Expand">
<Icon Glyph="@ExpanderIcon" Size="Size.Small"></Icon>
</li>
<BreadcrumbSeparator></BreadcrumbSeparator>
<BreadcrumbLink Item="Items[Items.Count - 1]"></BreadcrumbLink>
}
else
{
@for (var i = 0; i < Items.Count; i++)
{
var item = Items[i];
<BreadcrumbLink Item="item"></BreadcrumbLink>
if (i != Items.Count - 1)
{
<BreadcrumbSeparator></BreadcrumbSeparator>
}
}
}
</ul>
</CascadingValue>

View File

@ -0,0 +1,88 @@
using Connected.Annotations;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class Breadcrumbs : UIComponent
{
#region Events
internal void Expand()
{
if (!Collapsed)
return;
Collapsed = false;
StateHasChanged();
}
#endregion
#region Content
/// <summary>
/// A list of breadcrumb items/links.
/// </summary>
[Parameter]
[Category(CategoryTypes.Breadcrumbs.Behavior)]
public List<BreadcrumbItem> Items { get; set; }
/// <summary>
/// Specifies the separator between the items.
/// </summary>
[Parameter]
[Category(CategoryTypes.Breadcrumbs.Appearance)]
public string Separator { get; set; } = "/";
/// <summary>
/// Custom expander icon.
/// </summary>
[Parameter]
[Category(CategoryTypes.Breadcrumbs.Appearance)]
public string ExpanderIcon { get; set; } = Icons.Material.Filled.SettingsEthernet;
#endregion
#region Styling
[Parameter]
public string ClassList { get; set; } = string.Empty;
private string Classname => new CssBuilder("breadcrumbs")
.AddClass("typography-body1")
.AddClass(ClassList)
.Build();
internal static string GetItemClassname(BreadcrumbItem item)
{
return new CssBuilder("breadcrumb-item")
.AddClass("disabled", item.Disabled)
.Build();
}
/// <summary>
/// Specifies a RenderFragment to use as the separator.
/// </summary>
[Parameter]
[Category(CategoryTypes.Breadcrumbs.Appearance)]
public RenderFragment SeparatorTemplate { get; set; }
/// <summary>
/// Specifies a RenderFragment to use as the items' contents.
/// </summary>
[Parameter]
[Category(CategoryTypes.Breadcrumbs.Behavior)]
public RenderFragment<BreadcrumbItem> ItemTemplate { get; set; }
public bool Collapsed { get; private set; } = true;
/// <summary>
/// Controls when (and if) the breadcrumbs will automatically collapse.
/// </summary>
[Parameter]
[Category(CategoryTypes.Breadcrumbs.Behavior)]
public byte? MaxItems { get; set; }
#endregion
}

View File

@ -0,0 +1,6 @@
@namespace Connected.Components
@inherits UIComponent
<CascadingValue Value="Breakpoint">
@ChildContent
</CascadingValue>

View File

@ -0,0 +1,59 @@
using Connected.Annotations;
using Connected.Services;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class BreakpointProvider : UIComponent, IAsyncDisposable
{
#region Variables
private Guid _breakPointListenerSubscriptionId;
public Breakpoint Breakpoint { get; private set; } = Breakpoint.Always;
[Inject] public IBreakpointService Service { get; set; }
#endregion
#region Events
private void SetBreakpointCallback(Breakpoint breakpoint)
{
InvokeAsync(() =>
{
Breakpoint = breakpoint;
OnBreakpointChanged.InvokeAsync(breakpoint);
StateHasChanged();
}).AndForget();
}
[Parameter] public EventCallback<Breakpoint> OnBreakpointChanged { get; set; }
#endregion
#region Content
[Parameter]
[Category(CategoryTypes.BreakpointProvider.Behavior)]
public RenderFragment ChildContent { get; set; }
#endregion
#region Lifecycle
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await base.OnAfterRenderAsync(firstRender);
if (firstRender == true)
{
var attachResult = await Service.Subscribe(SetBreakpointCallback);
_breakPointListenerSubscriptionId = attachResult.SubscriptionId;
Breakpoint = attachResult.Breakpoint;
await OnBreakpointChanged.InvokeAsync(Breakpoint);
StateHasChanged();
}
}
public async ValueTask DisposeAsync() => await Service.Unsubscribe(_breakPointListenerSubscriptionId);
#endregion
}

View File

@ -0,0 +1,17 @@
@namespace Connected.Components
@using Connected.Extensions;
@inherits ButtonBase
<Element type="@ButtonType.ToDescription()"
disabled="@Disabled"
HtmlTag="@HtmlTag"
ClassList="@CompiledClassList.ToString()"
PreventOnClickPropagation="PreventOnClickPropagation"
@attributes="CustomAttributes"
@onclick="OnClick">
<span name="button-content" class="button-content">
@ChildContent
</span>
</Element>

View File

@ -0,0 +1,43 @@
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class Button : ButtonBase
{
#region Content
/// <summary>
/// Child content of component.
/// </summary>
[Parameter]
public RenderFragment? ChildContent { get; set; }
#endregion
#region Styling
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? ClassList { get; set; }
/// <summary>
/// The variant to use.
/// </summary>
[Parameter]
public Variant Variant { get; set; } = Variant.Text;
/// <summary>
/// Contains the default container classlist and the user defined classes.
/// </summary>
private CssBuilder CompiledClassList
{
get
{
return new CssBuilder("button-root mud-button")
.AddClass($"button-{Variant}")
.AddClass(ClassList);
}
}
#endregion
}

View File

@ -0,0 +1,81 @@
using System.Windows.Input;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
namespace Connected.Components;
public abstract class ButtonBase : UIComponent
{
#region EventCallbacks
/// <summary>
/// Button click event.
/// </summary>
[Parameter]
public EventCallback<MouseEventArgs> Clicked { get; set; }
protected async Task OnClick(MouseEventArgs e)
{
if (Disabled)
return;
if (Clicked.HasDelegate)
await Clicked.InvokeAsync(e);
if (Command?.CanExecute(CommandParameters) ?? false)
Command.Execute(CommandParameters);
Activateable?.Activate(this, e);
}
#endregion
#region Content placeholders
/// <summary>
/// Potential activation target for this button. This enables RenderFragments with user-defined
/// buttons which will automatically activate the intended functionality.
/// </summary>
[CascadingParameter]
protected IActivatable? Activateable { get; set; }
/// <summary>
/// The HTML element that will be rendered in the root by the component
/// By default, is a button.
/// </summary>
protected string HtmlTag => ButtonType.ToString().ToLower();
#endregion
#region Behavior properties
/// <summary>
/// The button Type (Button, Submit, Refresh)
/// </summary>
[Parameter]
public ButtonType ButtonType { get; set; }
/// <summary>
/// Command executed when the user clicks on an element.
/// </summary>
[Parameter]
public ICommand? Command { get; set; }
/// <summary>
/// Command parameter.
/// </summary>
[Parameter]
public object? CommandParameters { get; set; }
/// <summary>
/// If true, the button will be disabled.
/// </summary>
[Parameter]
public bool Disabled { get; set; }
/// <summary>
/// Indicates whether the internal click propagation should be disabled,
/// as it is handled in the component itself.
/// </summary>
protected bool PreventOnClickPropagation => string.Compare(HtmlTag, "button", true) == 0;
#endregion
}

View File

@ -0,0 +1,25 @@
@namespace Connected.Components
@inherits ButtonBase
@using Connected.Extensions;
<Element HtmlTag="@HtmlTag"
Class="@Classname"
@attributes="CustomAttributes"
@onclick="OnClick"
type="@ButtonType.ToDescription()"
disabled="@Disabled"
title="@Title">
<span class="fab-label">
@if (!string.IsNullOrWhiteSpace(StartIcon))
{
<Icon Glyph="@StartIcon" Color="@IconColor" Size="@IconSize" />
}
@Label
@if (!string.IsNullOrWhiteSpace(EndIcon))
{
<Icon Glyph="@EndIcon" Color="@IconColor" Size="@IconSize" />
}
</span>
</Element>

View File

@ -0,0 +1,78 @@
using Connected.Annotations;
using Connected.Extensions;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class Fab : ButtonBase
{
#region Content
/// <summary>
/// If applied Glyph will be added at the start of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public string StartIcon { get; set; }
/// <summary>
/// If applied Glyph will be added at the end of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public string EndIcon { get; set; }
/// <summary>
/// If applied the text will be added to the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public string Label { get; set; }
/// <summary>
/// GlyphTitle of the icon used for accessibility.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public string Title { get; set; }
#endregion
#region Styling
protected string Classname =>
new CssBuilder("button-root mud-fab")
.AddClass($"fab-extended", !string.IsNullOrEmpty(Label))
.AddClass($"fab-{Color.ToDescription()}")
.AddClass($"fab-size-{Size.ToDescription()}")
.Build();
/// <summary>
/// The color of the component. It supports the theme colors.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Appearance)]
public ThemeColor Color { get; set; } = ThemeColor.Default;
/// <summary>
/// The Size of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Appearance)]
public Size Size { get; set; } = Size.Large;
/// <summary>
/// The color of the icon. It supports the theme colors.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Appearance)]
public ThemeColor IconColor { get; set; } = ThemeColor.Inherit;
/// <summary>
/// The size of the icon.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Appearance)]
public Size IconSize { get; set; } = Size.Medium;
#endregion
}

View File

@ -0,0 +1,27 @@
@namespace Connected.Components
@inherits ButtonBase
@using Connected.Components;
<Element disabled="@Disabled"
title="@GlyphTitle"
type="@ButtonType.ToString()"
ClassList="@CompiledClassList.ToString()"
HtmlTag="@HtmlTag"
PreventOnClickPropagation="PreventOnClickPropagation"
@attributes="CustomAttributes"
@onclick="OnClick">
@if (!String.IsNullOrEmpty(Glyph))
{
<span name="glyph-container" class="glyph-button-label">
<Icon Glyph="@Glyph" />
</span>
}
else
{
<TextContent Typo="Typo.body2">
@ChildContent
</TextContent>
}
</Element>

View File

@ -0,0 +1,54 @@
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class GlyphButton : ButtonBase
{
#region Content
/// <summary>
/// The Icon that will be used in the component.
/// </summary>
[Parameter]
public string? Glyph { get; set; }
/// <summary>
/// GlyphTitle of the icon used for accessibility.
/// </summary>
[Parameter]
public string? GlyphTitle { get; set; }
/// <summary>
/// Child content of component, only shows if Glyph is null or Empty.
/// </summary>
[Parameter]
public RenderFragment? ChildContent { get; set; }
#endregion
#region Styling
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? ClassList { get; set; }
/// <summary>
/// The variant to use.
/// </summary>
[Parameter]
public Variant Variant { get; set; } = Variant.Text;
/// <summary>
/// Contains the default container classlist and the user defined classes.
/// </summary>
private CssBuilder CompiledClassList
{
get
{
return new CssBuilder("button-root glyph-button")
.AddClass(ClassList);
}
}
#endregion
}

View File

@ -0,0 +1,13 @@
@namespace Connected.Components
@inherits UIComponent
<GlyphButton aria-pressed="@Toggled.ToString()"
ClassList="@ClassList"
Clicked="Toggle"
Disabled="Disabled"
Glyph="@(Toggled ? ToggledGlyph : Glyph)"
GlyphTitle="@(Toggled && ToggledGlyphTitle != null ? ToggledGlyphTitle : GlyphTitle)"
Variant="Variant"
@attributes="CustomAttributes"
/>

View File

@ -0,0 +1,89 @@
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class ToggleGlyphButton : UIComponent
{
#region Events
/// <summary>
/// Fires whenever toggled is changed.
/// </summary>
[Parameter]
public EventCallback<bool> ToggledChanged { get; set; }
public async Task Toggle()
{
await SetToggledAsync(!Toggled);
}
protected internal async Task SetToggledAsync(bool toggled)
{
if (Disabled)
return;
if (Toggled != toggled)
{
Toggled = toggled;
if (!ToggledChanged.HasDelegate)
return;
await ToggledChanged.InvokeAsync(Toggled);
}
}
#endregion
#region Content
/// <summary>
/// The glyph that will be used in the untoggled state.
/// </summary>
[Parameter]
public string? Glyph { get; set; }
/// <summary>
/// GlyphTitle of the icon used for accessibility.
/// </summary>
[Parameter]
public string? GlyphTitle { get; set; }
/// <summary>
/// The glyph that will be used in the toggled state.
/// </summary>
[Parameter]
public string? ToggledGlyph { get; set; }
/// <summary>
/// GlyphTitle used in toggled state, if different.
/// </summary>
[Parameter]
public string? ToggledGlyphTitle { get; set; }
#endregion
#region Styling
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? ClassList { get; set; }
/// <summary>
/// The variant to use.
/// </summary>
[Parameter]
public Variant Variant { get; set; } = Variant.Text;
/// <summary>
/// If true, the button will be disabled.
/// </summary>
[Parameter]
public bool Disabled { get; set; }
/// <summary>
/// The button toggled state.
/// </summary>
[Parameter]
public bool Toggled { get; set; }
#endregion
}

View File

@ -0,0 +1,12 @@
@namespace Connected.Components
@inherits UIComponent
<Element HtmlTag="div" Class="@Classname" Tag="@Tag" UserAttributes="@CustomAttributes">
@ChildContent
</Element>
@{
if(!CustomAttributes.ContainsKey("role"))
CustomAttributes.Add("role", "group");
}

View File

@ -0,0 +1,81 @@
using Connected.Annotations;
using Connected.Extensions;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class ButtonGroup : UIComponent
{
#region Content
/// <summary>
/// Child content of component.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Behavior)]
public RenderFragment ChildContent { get; set; }
#endregion
#region Styling
/// <summary>
/// If true, the button group will be displayed vertically.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Appearance)]
public bool VerticalAlign { get; set; } = false;
/// <summary>
/// If true, no drop-shadow will be used.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Appearance)]
public bool DisableElevation { get; set; } = false;
/// <summary>
/// The color of the component. It supports the theme colors.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Appearance)]
public ThemeColor Color { get; set; } = ThemeColor.Default;
/// <summary>
/// The size of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Appearance)]
public Size Size { get; set; } = Size.Medium;
/// <summary>
/// The variant to use.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Appearance)]
public Variant Variant { get; set; } = Variant.Text;
protected string Classname =>
new CssBuilder("button-group-root")
.AddClass($"button-group-override-styles", OverrideStyles)
.AddClass($"button-group-{Variant.ToDescription()}")
.AddClass($"button-group-{Variant.ToDescription()}-{Color.ToDescription()}")
.AddClass($"button-group-{Variant.ToDescription()}-size-{Size.ToDescription()}")
.AddClass($"button-group-vertical", VerticalAlign)
.AddClass($"button-group-horizontal", !VerticalAlign)
.AddClass($"button-group-disable-elevation", DisableElevation)
.AddClass($"button-group-rtl", RightToLeft)
.AddClass(AdditionalClassList)
.Build();
[CascadingParameter(Name = "RightToLeft")]
public bool RightToLeft { get; set; }
/// <summary>
/// If true, the button group will override the styles of the individual buttons.
/// </summary>
[Parameter]
[Category(CategoryTypes.ButtonGroup.Appearance)]
public bool OverrideStyles { get; set; } = true;
#endregion
}

View File

@ -0,0 +1,7 @@
@namespace Connected.Components
@inherits UIComponent
<Paper @attributes="CustomAttributes" Class="@Classname" Outlined="@Outlined" Square="@Square" Elevation="@Elevation">
@ChildContent
</Paper>

View File

@ -0,0 +1,46 @@
using Connected.Annotations;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class Card : UIComponent
{
#region Content
/// <summary>
/// Child content of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Card.Behavior)]
public RenderFragment ChildContent { get; set; }
#endregion
#region Styling
protected string Classname =>
new CssBuilder("card")
.AddClass(AdditionalClassList)
.Build();
/// <summary>
/// The higher the number, the heavier the drop-shadow. 0 for no shadow.
/// </summary>
[Parameter]
[Category(CategoryTypes.Card.Appearance)]
public int Elevation { set; get; } = 1;
/// <summary>
/// If true, border-radius is set to 0.
/// </summary>
[Parameter]
[Category(CategoryTypes.Card.Appearance)]
public bool Square { get; set; }
/// <summary>
/// If true, card will be outlined.
/// </summary>
[Parameter]
[Category(CategoryTypes.Card.Appearance)]
public bool Outlined { get; set; }
#endregion
}

View File

@ -0,0 +1,7 @@
@namespace Connected.Components
@inherits UIComponent
<div @attributes="CustomAttributes" class="@Classname">
@ChildContent
</div>

View File

@ -0,0 +1,27 @@
using Connected.Annotations;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class CardActions : UIComponent
{
#region Style
protected string Classname =>
new CssBuilder("card-actions")
.AddClass(AdditionalClassList)
.Build();
#endregion
#region Content
/// <summary>
/// Child content of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Card.Behavior)]
public RenderFragment ChildContent { get; set; }
#endregion
}

View File

@ -0,0 +1,7 @@
@namespace Connected.Components
@inherits UIComponent
<div @attributes="CustomAttributes" class="@Classname">
@ChildContent
</div>

View File

@ -0,0 +1,27 @@
using Connected.Annotations;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class CardContent : UIComponent
{
#region Style
protected string Classname =>
new CssBuilder("card-content")
.AddClass(AdditionalClassList)
.Build();
#endregion
#region Content
/// <summary>
/// Child content of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Card.Behavior)]
public RenderFragment ChildContent { get; set; }
#endregion
}

View File

@ -0,0 +1,22 @@
@namespace Connected.Components
@inherits UIComponent
<div @attributes="CustomAttributes" class="@Classname">
@if (CardHeaderAvatar is not null)
{
<div class="card-header-avatar">@CardHeaderAvatar</div>
}
@if (CardHeaderContent is not null)
{
<div class="card-header-content">@CardHeaderContent</div>
}
@if (CardHeaderActions is not null)
{
<div class="card-header-actions">@CardHeaderActions</div>
}
@if (ChildContent is not null)
{
@ChildContent
}
</div>

View File

@ -0,0 +1,48 @@
using Connected.Annotations;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class CardHeader : UIComponent
{
#region Style
protected string Classname =>
new CssBuilder("card-header")
.AddClass(AdditionalClassList)
.Build();
/// <summary>
/// If used renders child content of the CardHeaderAvatar.
/// </summary>
[Parameter]
[Category(CategoryTypes.Card.Behavior)]
public RenderFragment CardHeaderAvatar { get; set; }
/// <summary>
/// If used renders child content of the CardHeaderContent.
/// </summary>
[Parameter]
[Category(CategoryTypes.Card.Behavior)]
public RenderFragment CardHeaderContent { get; set; }
/// <summary>
/// If used renders child content of the CardHeaderActions.
/// </summary>
[Parameter]
[Category(CategoryTypes.Card.Behavior)]
public RenderFragment CardHeaderActions { get; set; }
#endregion
#region Content
/// <summary>
/// Optional child content
/// </summary>
[Parameter]
[Category(CategoryTypes.Card.Behavior)]
public RenderFragment ChildContent { get; set; }
#endregion
}

View File

@ -0,0 +1,5 @@
@namespace Connected.Components
@inherits UIComponent
<div @attributes="CustomAttributes" title="@Title" class="@Classname" style="@StyleString"></div>

View File

@ -0,0 +1,46 @@
using Connected.Annotations;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class CardMedia : UIComponent
{
#region Style
protected string StyleString =>
StyleBuilder.Default($"background-image:url(\"{Image}\");height: {Height}px;")
.Build();
protected string Classname =>
new CssBuilder("card-media")
.AddClass(AdditionalClassList)
.Build();
/// <summary>
/// Specifies the height of the image in px.
/// </summary>
[Parameter]
[Category(CategoryTypes.Card.Behavior)]
public int Height { get; set; } = 300;
#endregion
#region Content
/// <summary>
/// GlyphTitle of the image used for accessibility.
/// </summary>
[Parameter]
[Category(CategoryTypes.Card.Behavior)]
public string Title { get; set; }
/// <summary>
/// Specifies the path to the image.
/// </summary>
[Parameter]
[Category(CategoryTypes.Card.Behavior)]
public string Image { get; set; }
#endregion
}

View File

@ -0,0 +1,84 @@
@namespace Connected.Components
@inherits BindableItemsControlBase<CarouselItem, TData>
@using Connected.Extensions
@implements IAsyncDisposable
@typeparam TData
<section @attributes="CustomAttributes" aria-roledescription="carousel" class="@Classname">
<CascadingValue Value="this">
<SwipeArea OnSwipe="OnSwipe" Class="carousel-swipe">
@*Selected Content*@
@if (ItemsSource == null)
{
@ChildContent
}
else
{
foreach (TData item in ItemsSource)
{
<CarouselItem>
@ItemTemplate(item)
</CarouselItem>
}
}
</SwipeArea>
@*Controls*@
<div class="d-flex flex-grow-1 align-self-auto">
@*Left Arrow*@
@if (ShowArrows)
{
@if (PreviousButtonTemplate == null)
{
<GlyphButton tabindex="1" aria-label="Go to previous" Class="@NavigationButtonsClassName" Style="z-index:3;opacity:0.75" Glyph="@PreviousIcon" Clicked="Previous" Color="ThemeColor.Inherit" />
}
else
{
<div @onclick="Previous" tabindex="1" aria-label="Go to previous" class="@NavigationButtonsClassName" style="z-index:3">
@PreviousButtonTemplate
</div>
}
}
@*Bullets*@
<div class="@($"flex-grow-1 align-self-{ConvertPosition(BulletsPosition).ToDescription()}")" style="z-index:3">
@if (ShowBullets)
{
<div class="d-flex justify-center">
@for (int i = 0; i < Items.Count; i++)
{
int current = i;
if (BulletTemplate == null)
{
<GlyphButton tabindex="@(i+3)" aria-label="@(i+1)" Class="@BulletsButtonsClassName" Style="z-index:3;opacity:0.75" Glyph="@(current == SelectedIndex ? CheckedIcon : UncheckedIcon)" Clicked="(() => MoveTo(current))" Color="ThemeColor.Inherit" />
}
else
{
<div @onclick="() => MoveTo(current)" class="@BulletsButtonsClassName" style="z-index:3">
@BulletTemplate(current == SelectedIndex)
</div>
}
}
</div>
}
</div>
@*Right Arrow*@
@if (ShowArrows)
{
@if (NextButtonTemplate == null)
{
<GlyphButton tabindex="2" aria-label="Go to next" Class="@NavigationButtonsClassName" Style="z-index:3;opacity:0.75" Glyph="@NextIcon" Clicked="Next" Color="ThemeColor.Inherit" />
}
else
{
<div @onclick="Next" tabindex="2" aria-label="Go to next" class="@NavigationButtonsClassName" style="z-index:3">
@NextButtonTemplate
</div>
}
}
</div>
</CascadingValue>
</section>

View File

@ -0,0 +1,363 @@
using System.Diagnostics.CodeAnalysis;
using Connected.Annotations;
using Connected.Extensions;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TData>, IAsyncDisposable
{
#region Variables
private Timer _timer;
private bool _autoCycle = true;
private ThemeColor _currentColor = ThemeColor.Inherit;
private TimeSpan _cycleTimeout = TimeSpan.FromSeconds(5);
private void TimerElapsed(object stateInfo) => InvokeAsync(async () => await TimerTickAsync());
#endregion
#region Events
/// <summary>
/// Called when selected Index changed on base class
/// </summary>
protected override void SelectionChanged()
{
InvokeAsync(async () => await ResetTimerAsync());
_currentColor = SelectedContainer?.Color ?? ThemeColor.Inherit;
}
//When an item is added, it automatically checks the color
public override void AddItem(CarouselItem item)
{
Items.Add(item);
if (Items.Count - 1 == SelectedIndex)
{
_currentColor = item.Color;
StateHasChanged();
}
}
/// <summary>
/// Provides Selection changes by horizontal swipe gesture
/// </summary>
private void OnSwipe(SwipeDirection direction)
{
if (!EnableSwipeGesture)
{
return;
}
switch (direction)
{
case SwipeDirection.LeftToRight:
if (RightToLeft) Next();
else Previous();
break;
case SwipeDirection.RightToLeft:
if (RightToLeft) Previous();
else Next();
break;
}
}
/// <summary>
/// Immediately starts the AutoCycle timer
/// </summary>
private ValueTask StartTimerAsync()
{
if (AutoCycle)
_timer?.Change(AutoCycleTime, TimeSpan.Zero);
return ValueTask.CompletedTask;
}
/// <summary>
/// Immediately stops the AutoCycle timer
/// </summary>
private ValueTask StopTimerAsync()
{
_timer?.Change(Timeout.Infinite, Timeout.Infinite);
return ValueTask.CompletedTask;
}
/// <summary>
/// Stops and restart the AutoCycle timer
/// </summary>
private async ValueTask ResetTimerAsync()
{
await StopTimerAsync();
await StartTimerAsync();
}
/// <summary>
/// Changes the SelectedIndex to a next one (or restart on 0)
/// </summary>
private async ValueTask TimerTickAsync()
{
await InvokeAsync(Next);
}
#endregion
#region Styling
protected string Classname =>
new CssBuilder("carousel")
.AddClass($"carousel-{(BulletsColor ?? _currentColor).ToDescription()}")
.AddClass(AdditionalClassList)
.Build();
protected string NavigationButtonsClassName =>
new CssBuilder()
.AddClass($"align-self-{ConvertPosition(ArrowsPosition).ToDescription()}", !(NavigationButtonsClass ?? "").Contains("align-self-"))
.AddClass("carousel-elements-rtl", RightToLeft)
.AddClass(NavigationButtonsClass)
.Build();
protected string BulletsButtonsClassName =>
new CssBuilder()
.AddClass(BulletsClass)
.Build();
private static Position ConvertPosition(Position position)
{
return position switch
{
Position.Top => Position.Start,
Position.Start => Position.Start,
Position.Bottom => Position.End,
Position.End => Position.End,
_ => position
};
}
[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
/// <summary>
/// Gets or Sets if 'Next' and 'Previous' arrows must be visible
/// </summary>
[Parameter]
[Category(CategoryTypes.Carousel.Behavior)]
public bool ShowArrows { get; set; } = true;
/// <summary>
/// Sets the position of the arrows. By default, the position is the Center position
/// </summary>
[Parameter]
[Category(CategoryTypes.Carousel.Appearance)]
public Position ArrowsPosition { get; set; } = Position.Center;
/// <summary>
/// Sets the position of the bullets. By default, the position is the Bottom position
/// </summary>
[Category(CategoryTypes.Carousel.Appearance)]
[Parameter] public Position BulletsPosition { get; set; } = Position.Bottom;
/// <summary>
/// Gets or Sets the Bullets color.
/// If not set, the color is determined based on the <see cref="MudCarouselItem.Color"/> property of the active child.
/// </summary>
[Category(CategoryTypes.Carousel.Appearance)]
[Parameter] public ThemeColor? BulletsColor { get; set; }
/// <summary>
/// Gets or Sets the Delimiters color.
/// If not set, the color is determined based on the <see cref="MudCarouselItem.Color"/> property of the active child.
/// Deprecated, use BulletsColor instead.
/// </summary>
[Obsolete($"Use {nameof(BulletsColor)} instead", false)]
[Category(CategoryTypes.Carousel.Appearance)]
[ExcludeFromCodeCoverage]
[Parameter] public ThemeColor? DelimitersColor { get => BulletsColor; set => BulletsColor = value; }
/// <summary>
/// Gets or Sets custom class(es) for 'Next' and 'Previous' arrows
/// </summary>
[Parameter]
[Category(CategoryTypes.Carousel.Appearance)]
public string NavigationButtonsClass { get; set; }
/// <summary>
/// Gets or Sets custom class(es) for Bullets buttons
/// </summary>
[Category(CategoryTypes.Carousel.Appearance)]
[Parameter] public string BulletsClass { get; set; }
/// <summary>
/// Gets or Sets custom class(es) for Delimiters buttons.
/// Deprecated, use BulletsClass instead.
/// </summary>
[Category(CategoryTypes.Carousel.Appearance)]
[Obsolete($"Use {nameof(BulletsClass)} instead", false)]
[ExcludeFromCodeCoverage]
[Parameter] public string DelimitersClass { get => BulletsClass; set => BulletsClass = value; }
/// <summary>
/// Custom previous navigation icon.
/// </summary>
[Parameter]
[Category(CategoryTypes.Carousel.Appearance)]
public string PreviousIcon { get; set; } = Icons.Material.Filled.NavigateBefore;
/// <summary>
/// Custom selected bullet icon.
/// </summary>
[Parameter]
[Category(CategoryTypes.Carousel.Appearance)]
public string CheckedIcon { get; set; } = Icons.Material.Filled.RadioButtonChecked;
/// <summary>
/// Custom unselected bullet icon.
/// </summary>
[Parameter]
[Category(CategoryTypes.Carousel.Appearance)]
public string UncheckedIcon { get; set; } = Icons.Material.Filled.RadioButtonUnchecked;
/// <summary>
/// Custom next navigation icon.
/// </summary>
[Parameter]
[Category(CategoryTypes.Carousel.Appearance)]
public string NextIcon { get; set; } = Icons.Material.Filled.NavigateNext;
/// <summary>
/// Gets or Sets the Template for the Left Arrow
/// </summary>
[Parameter]
[Category(CategoryTypes.Carousel.Appearance)]
public RenderFragment NextButtonTemplate { get; set; }
/// <summary>
/// Gets or Sets the Template for the Right Arrow
/// </summary>
[Parameter]
[Category(CategoryTypes.Carousel.Appearance)]
public RenderFragment PreviousButtonTemplate { get; set; }
/// <summary>
/// Gets or Sets the Template for Bullets
/// </summary>
[Category(CategoryTypes.Carousel.Appearance)]
[Parameter] public RenderFragment<bool> BulletTemplate { get; set; }
/// <summary>
/// Gets or Sets the Template for Delimiters.
/// Deprecated, use BulletsTemplate instead.
/// </summary>
[Category(CategoryTypes.Carousel.Appearance)]
[Obsolete($"Use {nameof(BulletTemplate)} instead", false)]
[ExcludeFromCodeCoverage]
[Parameter] public RenderFragment<bool> DelimiterTemplate { get => BulletTemplate; set => BulletTemplate = value; }
#endregion
#region Behavior
/// <summary>
/// Gets or Sets if bar with Bullets must be visible
/// </summary>
[Category(CategoryTypes.Carousel.Behavior)]
[Parameter] public bool ShowBullets { get; set; } = true;
/// <summary>
/// Gets or Sets if bottom bar with Delimiters must be visible.
/// Deprecated, use ShowBullets instead.
/// </summary>
[Category(CategoryTypes.Carousel.Behavior)]
[Obsolete($"Use {nameof(ShowBullets)} instead", false)]
[ExcludeFromCodeCoverage]
[Parameter] public bool ShowDelimiters { get => ShowBullets; set => ShowBullets = value; }
/// <summary>
/// Gets or Sets automatic cycle on item collection.
/// </summary>
[Parameter]
[Category(CategoryTypes.Carousel.Behavior)]
public bool AutoCycle
{
get => _autoCycle;
set
{
_autoCycle = value;
if (_autoCycle)
InvokeAsync(async () => await ResetTimerAsync());
else
InvokeAsync(async () => await StopTimerAsync());
}
}
/// <summary>
/// Gets or Sets the Auto Cycle time
/// </summary>
[Parameter]
[Category(CategoryTypes.Carousel.Behavior)]
public TimeSpan AutoCycleTime
{
get => _cycleTimeout;
set
{
_cycleTimeout = value;
if (_autoCycle == true)
InvokeAsync(async () => await ResetTimerAsync());
else
InvokeAsync(async () => await StopTimerAsync());
}
}
/// <summary>
/// Gets or Sets if swipe gestures are allowed for touch devices.
/// </summary>
[Category(CategoryTypes.Carousel.Behavior)]
[Parameter]
public bool EnableSwipeGesture { get; set; } = true;
#endregion
#region Lifecycle
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await base.OnAfterRenderAsync(firstRender);
if (firstRender)
{
_timer = new Timer(TimerElapsed, null, AutoCycle ? AutoCycleTime : Timeout.InfiniteTimeSpan, AutoCycleTime);
}
}
public async ValueTask DisposeAsync()
{
await DisposeAsync(true);
GC.SuppressFinalize(this);
}
protected virtual async ValueTask DisposeAsync(bool disposing)
{
if (disposing)
{
await StopTimerAsync();
var timer = _timer;
if (timer != null)
{
_timer = null;
await timer.DisposeAsync();
}
}
}
#endregion
}

View File

@ -0,0 +1,10 @@
@namespace Connected.Components
@inherits UIComponent
@if (IsVisible)
{
<div @attributes="CustomAttributes" class="@Classname">
@ChildContent
</div>
}

View File

@ -0,0 +1,99 @@
using Connected.Annotations;
using Connected.Extensions;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class CarouselItem : UIComponent, IDisposable
{
#region Variables
private bool _disposed = false;
#endregion
#region Content
[Parameter]
[Category(CategoryTypes.Carousel.Behavior)]
public RenderFragment ChildContent { get; set; }
[CascadingParameter] protected internal ItemsControlBase<CarouselItem> Parent { get; set; }
#endregion
#region Styling
protected string Classname =>
new CssBuilder("carousel-item")
.AddClass($"carousel-item-{Color.ToDescription()}")
.AddClass("carousel-item-exit", !_disposed && Parent.LastContainer == this)
.AddClass("carousel-transition-fade-in", !_disposed && Transition == Transition.Fade && Parent.SelectedContainer == this)
.AddClass("carousel-transition-fade-out", !_disposed && Transition == Transition.Fade && Parent.LastContainer == this)
.AddClass("carousel-transition-slide-next-enter", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.SelectedContainer == this && Parent._moveNext)
.AddClass("carousel-transition-slide-next-exit", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.LastContainer == this && Parent._moveNext)
.AddClass("carousel-transition-slide-prev-enter", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.SelectedContainer == this && !Parent._moveNext)
.AddClass("carousel-transition-slide-prev-exit", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.LastContainer == this && !Parent._moveNext)
.AddClass("carousel-transition-slide-next-rtl-enter", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.SelectedContainer == this && Parent._moveNext)
.AddClass("carousel-transition-slide-next-rtl-exit", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.LastContainer == this && Parent._moveNext)
.AddClass("carousel-transition-slide-prev-rtl-enter", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.SelectedContainer == this && !Parent._moveNext)
.AddClass("carousel-transition-slide-prev-rtl-exit", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.LastContainer == this && !Parent._moveNext)
.AddClass("carousel-transition-none", !_disposed && Transition == Transition.None && Parent.SelectedContainer != this)
.AddClass(CustomTransitionEnter, !_disposed && Transition == Transition.Custom && Parent.SelectedContainer == this && Parent.SelectedContainer == this)
.AddClass(CustomTransitionExit, !_disposed && Transition == Transition.Custom && Parent.LastContainer == this && Parent.LastContainer == this)
.AddClass(AdditionalClassList)
.Build();
/// <summary>
/// The color of the component. It supports the theme colors.
/// </summary>
[Parameter]
[Category(CategoryTypes.Carousel.Appearance)]
public ThemeColor Color { get; set; } = ThemeColor.Default;
/// <summary>
/// The transition effect of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Carousel.Appearance)]
public Transition Transition { get; set; } = Transition.Slide;
/// <summary>
/// The name of custom transition on entrance time
/// </summary>
[Parameter]
[Category(CategoryTypes.Carousel.Appearance)]
public string CustomTransitionEnter { get; set; }
/// <summary>
/// The name of custom transition on exiting time
/// </summary>
[Parameter]
[Category(CategoryTypes.Carousel.Appearance)]
public string CustomTransitionExit { get; set; }
[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
public bool IsVisible => Parent != null && (Parent.LastContainer == this || Parent.SelectedIndex == Parent.Items.IndexOf(this));
#endregion
#region Lifecycle
protected override Task OnInitializedAsync()
{
Parent?.AddItem(this);
return Task.CompletedTask;
}
public void Dispose()
{
_disposed = true;
Parent?.Items.Remove(this);
}
#endregion
}

View File

@ -0,0 +1,25 @@
@namespace Connected.Components
@inherits UIComponent
<CascadingValue Value="@this" IsFixed="true">
<div @attributes="CustomAttributes" class="@Classname" dir="ltr">
@if (ChartType == ChartType.Donut)
{
<Donut InputData="@InputData" @bind-SelectedIndex="@SelectedIndex" InputLabels="@InputLabels"></Donut>
}
@if (ChartType == ChartType.Pie)
{
<Pie InputData="@InputData" @bind-SelectedIndex="@SelectedIndex" InputLabels="@InputLabels"></Pie>
}
@if (ChartType == ChartType.Line)
{
<Line ChartSeries="@ChartSeries" @bind-SelectedIndex="@SelectedIndex" XAxisLabels="@XAxisLabels"></Line>
}
@if (ChartType == ChartType.Bar)
{
<Bar ChartSeries="@ChartSeries" @bind-SelectedIndex="@SelectedIndex" XAxisLabels="@XAxisLabels"></Bar>
}
</div>
</CascadingValue>

View File

@ -0,0 +1,145 @@
using System.Globalization;
using Connected.Annotations;
using Connected.Extensions;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class Chart : UIComponent
{
#region Variables
private int _selectedIndex;
#endregion
#region Events
/// <summary>
/// Selected index of a portion of the chart.
/// </summary>
[Parameter] public EventCallback<int> SelectedIndexChanged { get; set; }
/// <summary>
/// Scales the input data to the range between 0 and 1
/// </summary>
protected double[] GetNormalizedData()
{
if (InputData == null)
return Array.Empty<double>();
var total = InputData.Sum();
return InputData.Select(x => Math.Abs(x) / total).ToArray();
}
protected string ToS(double d, string format = null)
{
if (string.IsNullOrEmpty(format))
return d.ToString(CultureInfo.InvariantCulture);
return d.ToString(format);
}
private Position ConvertLegendPosition(Position position)
{
return position switch
{
Position.Start => RightToLeft ? Position.Right : Position.Left,
Position.End => RightToLeft ? Position.Left : Position.Right,
_ => position
};
}
#endregion
#region Styling
[Parameter]
[Category(CategoryTypes.Chart.Appearance)]
public ChartOptions ChartOptions { get; set; } = new();
/// <summary>
/// RenderFragment for costumization inside the chart's svg.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chart.Appearance)]
public RenderFragment CustomGraphics { get; set; }
protected string Classname =>
new CssBuilder("chart")
.AddClass($"chart-legend-{ConvertLegendPosition(LegendPosition).ToDescription()}")
.AddClass(AdditionalClassList)
.Build();
[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }
/// <summary>
/// The Width of the chart, end with % or px.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chart.Appearance)]
public string Width { get; set; } = "80%";
/// <summary>
/// The Height of the chart, end with % or px.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chart.Appearance)]
public string Height { get; set; } = "80%";
/// <summary>
/// The placement direction of the legend if used.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chart.Appearance)]
public Position LegendPosition { get; set; } = Position.Bottom;
#endregion
#region Behavior
[Parameter]
[Category(CategoryTypes.Chart.Behavior)]
public double[] InputData { get; set; } = Array.Empty<double>();
[Parameter]
[Category(CategoryTypes.Chart.Behavior)]
public string[] InputLabels { get; set; } = Array.Empty<string>();
[Parameter]
[Category(CategoryTypes.Chart.Behavior)]
public string[] XAxisLabels { get; set; } = Array.Empty<string>();
[Parameter]
[Category(CategoryTypes.Chart.Behavior)]
public List<ChartSeries> ChartSeries { get; set; } = new();
/// <summary>
/// The Type of the chart.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chart.Behavior)]
public ChartType ChartType { get; set; }
/// <summary>
/// Selected index of a portion of the chart.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chart.Behavior)]
public int SelectedIndex
{
get => _selectedIndex;
set
{
if (value != _selectedIndex)
{
_selectedIndex = value;
SelectedIndexChanged.InvokeAsync(value);
}
}
}
#endregion
}
public enum ChartType
{
Donut,
Line,
Pie,
Bar
}

View File

@ -0,0 +1,45 @@
@namespace Connected.Components
@using System.Globalization;
@inherits Chart
<svg @attributes="CustomAttributes" class="chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
<g class="charts-grid">
<g class="charts-gridlines-yaxis">
@foreach (var horizontalLine in _horizontalLines)
{
<path stroke="#e0e0e0" stroke-width="0.3" d="@horizontalLine.Data"></path>
}
</g>
@if (ChartParent?.ChartOptions.XAxisLines==true)
{
<g class="charts-gridlines-xaxis-lines">
@foreach (var verticalLine in _verticalLines)
{
<path stroke="gray" stroke-width="0.3" d="@verticalLine.Data"></path>
}
</g>
}
</g>
<g class="charts-yaxis">
@foreach (var horizontalLineValue in _horizontalValues)
{
@((MarkupString)$"<text x='{horizontalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{horizontalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='end' dominant-baseline='auto'>{horizontalLineValue.Value.ToString(CultureInfo.InvariantCulture)}</text>")
}
</g>
<g class="charts-xaxis">
@foreach (var verticalLineValue in _verticalValues)
{
@((MarkupString)$"<text x='{verticalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{verticalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='middle'>{verticalLineValue.Value.ToString(CultureInfo.InvariantCulture)}</text>")
}
</g>
<g class="charts-bar-series">
@foreach (var bar in _bars)
{
<path class="chart-bar" @onclick="() => SelectedIndex = bar.Index" fill="@(ChartParent.ChartOptions.ChartPalette.GetValue(bar.Index % ChartOptions.ChartPalette.Count()))" stroke="@(ChartParent.ChartOptions.ChartPalette.GetValue(bar.Index % ChartOptions.ChartPalette.Count()))" stroke-width="8" d="@bar.Data"></path>
}
</g>
@ChartParent?.CustomGraphics
</svg>
<Legend Data="@_legends" />

View File

@ -0,0 +1,155 @@
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
partial class Bar : Chart
{
#region Variables
[CascadingParameter] public Chart ChartParent { get; set; }
private List<SvgPath> _horizontalLines = new();
private List<SvgText> _horizontalValues = new();
private List<SvgPath> _verticalLines = new();
private List<SvgText> _verticalValues = new();
private List<SvgLegend> _legends = new();
private List<ChartSeries> _series = new();
private List<SvgPath> _bars = new();
#endregion
#region Lifecycle
protected override void OnParametersSet()
{
base.OnParametersSet();
_horizontalLines.Clear();
_verticalLines.Clear();
_horizontalValues.Clear();
_verticalValues.Clear();
_legends.Clear();
_bars.Clear();
if (ChartParent != null)
_series = ChartParent.ChartSeries;
var maxY = 0.0;
var numValues = 0;
var numXLabels = XAxisLabels.Length;
foreach (var item in _series)
{
if (numValues < item.Data.Length)
{
numValues = item.Data.Length;
}
foreach (int i in item.Data)
{
if (maxY < i)
{
maxY = i;
}
}
}
var boundHeight = 350.0;
var boundWidth = 650.0;
double gridYUnits = ChartParent?.ChartOptions.YAxisTicks ?? 20;
double gridXUnits = 30;
var numVerticalLines = numValues - 1;
var numHorizontalLines = ((int)(maxY / gridYUnits)) + 1;
var verticalStartSpace = 25.0;
var horizontalStartSpace = 30.0;
var verticalEndSpace = 25.0;
var horizontalEndSpace = 30.0;
var verticalSpace = (boundHeight - verticalStartSpace - verticalEndSpace) / (numHorizontalLines);
var horizontalSpace = (boundWidth - horizontalStartSpace - horizontalEndSpace) / (numVerticalLines);
//Horizontal Grid Lines
var y = verticalStartSpace;
double startGridY = 0;
for (var counter = 0; counter <= numHorizontalLines; counter++)
{
var line = new SvgPath()
{
Index = counter,
Data = $"M {ToS(horizontalStartSpace)} {ToS((boundHeight - y))} L {ToS((boundWidth - horizontalEndSpace))} {ToS((boundHeight - y))}"
};
_horizontalLines.Add(line);
var lineValue = new SvgText() { X = (horizontalStartSpace - 10), Y = (boundHeight - y + 5), Value = ToS(startGridY, ChartParent?.ChartOptions.YAxisFormat) };
_horizontalValues.Add(lineValue);
startGridY += gridYUnits;
y += verticalSpace;
}
//Vertical Grid Lines
var x = horizontalStartSpace;
double startGridX = 0;
for (var counter = 0; counter <= numVerticalLines; counter++)
{
var line = new SvgPath()
{
Index = counter,
Data = $"M {ToS(x)} {ToS((boundHeight - verticalStartSpace))} L {ToS(x)} {ToS(verticalEndSpace)}"
};
_verticalLines.Add(line);
var xLabels = "";
if (counter < numXLabels)
{
xLabels = XAxisLabels[counter];
}
var lineValue = new SvgText() { X = x, Y = boundHeight - 2, Value = xLabels };
_verticalValues.Add(lineValue);
startGridX += gridXUnits;
x += horizontalSpace;
}
//Bars
var colorcounter = 0;
double barsPerSeries = 0;
foreach (var item in _series)
{
double gridValueX = horizontalStartSpace + barsPerSeries;
double gridValueY = boundHeight - verticalStartSpace;
foreach (var dataLine in item.Data)
{
var dataValue = dataLine * verticalSpace / gridYUnits;
var gridValue = gridValueY - dataValue;
var bar = $"M {ToS(gridValueX)} {ToS(gridValueY)} L {ToS(gridValueX)} {ToS(gridValue)}";
gridValueX += horizontalSpace;
var line = new SvgPath()
{
Index = colorcounter,
Data = bar
};
_bars.Add(line);
}
barsPerSeries += 10;
var legend = new SvgLegend()
{
Index = colorcounter,
Labels = item.Name
};
colorcounter++;
_legends.Add(legend);
}
}
#endregion
}

View File

@ -0,0 +1,22 @@
@namespace Connected.Components
@using System.Globalization
@inherits Chart
<svg @attributes="CustomAttributes" class="chart-donut" width="@ParentWidth" height="@ParentHeight" viewBox="0 0 42 42">
<Filters />
<circle class="donut-ring" cx="21" cy="21" r="15.91549430918954"></circle>
@foreach (var item in _circles.ToList())
{
<circle class="chart-serie mud-donut-segment" @onclick="() => SelectedIndex = item.Index" stroke="@(ChartParent.ChartOptions.ChartPalette.GetValue(item.Index % ChartOptions.ChartPalette.Count()))"
cx="@ToS(item.CX)"
cy="@ToS(item.CY)"
r="@ToS(item.Radius)"
stroke-dasharray="@item.StrokeDashArray"
stroke-dashoffset="@ToS(item.StrokeDashOffset)">
</circle>
}
<circle class="donut-hole" cx="21" cy="21" r="13.4"></circle>
@ChartParent?.CustomGraphics
</svg>
<Legend Data="@_legends" />

View File

@ -0,0 +1,67 @@
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
partial class Donut : Chart
{
#region Variables
[CascadingParameter] public Chart ChartParent { get; set; }
private List<SvgCircle> _circles = new();
private List<SvgLegend> _legends = new();
protected string ParentWidth => ChartParent?.Width;
protected string ParentHeight => ChartParent?.Height;
#endregion
#region Lifecycle
protected override void OnParametersSet()
{
_circles.Clear();
_legends.Clear();
double counterClockwiseOffset = 25;
double totalPercent = 0;
double offset;
var counter = 0;
foreach (var data in GetNormalizedData())
{
var percent = data * 100;
var reversePercent = 100 - percent;
offset = 100 - totalPercent + counterClockwiseOffset;
totalPercent += percent;
var circle = new SvgCircle()
{
Index = counter,
CX = 21,
CY = 21,
Radius = 15.91549430918954,
StrokeDashArray = $"{ToS(percent)} {ToS(reversePercent)}",
StrokeDashOffset = offset
};
_circles.Add(circle);
var labels = "";
if (counter < InputLabels.Length)
{
labels = InputLabels[counter];
}
var legend = new SvgLegend()
{
Index = counter,
Labels = labels,
Data = data.ToString()
};
_legends.Add(legend);
counter += 1;
}
}
#endregion
}

View File

@ -0,0 +1,44 @@
@namespace Connected.Components
@using System.Globalization;
@inherits Chart
<svg @attributes="CustomAttributes" class="chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
<g class="charts-grid">
<g class="charts-gridlines-yaxis">
@foreach (var horizontalLine in _horizontalLines)
{
<path stroke="#e0e0e0" stroke-width="0.3" d="@horizontalLine.Data"></path>
}
</g>
@if (ChartParent?.ChartOptions.XAxisLines==true)
{
<g class="charts-gridlines-xaxis-lines">
@foreach (var verticalLine in _verticalLines)
{
<path stroke="gray" stroke-width="0.3" d="@verticalLine.Data"></path>
}
</g>
}
</g>
<g class="charts-yaxis">
@foreach (var horizontalLineValue in _horizontalValues)
{
@((MarkupString)$"<text x='{horizontalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{horizontalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='end' dominant-baseline='auto'>{horizontalLineValue.Value.ToString(CultureInfo.InvariantCulture)}</text>")
}
</g>
<g class="charts-xaxis">
@foreach (var verticalLineValue in _verticalValues)
{
@((MarkupString)$"<text x='{verticalLineValue.X.ToString(CultureInfo.InvariantCulture)}' y='{verticalLineValue.Y.ToString(CultureInfo.InvariantCulture)}' font-size='12px' text-anchor='middle'>{verticalLineValue.Value.ToString(CultureInfo.InvariantCulture)}</text>")
}
</g>
<g class="charts-line-series">
@foreach (var chartLine in _chartLines)
{
<path class="chart-line" @onclick="() => SelectedIndex = chartLine.Index" fill="none" stroke="@(ChartParent.ChartOptions.ChartPalette.GetValue(chartLine.Index % ChartOptions.ChartPalette.Count()))" stroke-width="@(ChartParent.ChartOptions.LineStrokeWidth)" d="@chartLine.Data"></path>
}
</g>
@ChartParent?.CustomGraphics
</svg>
<Legend Data="@_legends" />

View File

@ -0,0 +1,239 @@
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
partial class Line : Chart
{
#region Variables
private const int MaxHorizontalGridLines = 100;
[CascadingParameter] public Chart ChartParent { get; set; }
private List<SvgPath> _horizontalLines = new();
private List<SvgText> _horizontalValues = new();
private List<SvgPath> _verticalLines = new();
private List<SvgText> _verticalValues = new();
private List<SvgLegend> _legends = new();
private List<ChartSeries> _series = new();
private List<SvgPath> _chartLines = new();
#endregion
#region Lifecycle
protected override void OnParametersSet()
{
base.OnParametersSet();
_horizontalLines.Clear();
_verticalLines.Clear();
_horizontalValues.Clear();
_verticalValues.Clear();
_legends.Clear();
_chartLines.Clear();
if (ChartParent != null)
_series = ChartParent.ChartSeries;
var maxY = 0.0;
var numValues = 0;
var numXLabels = XAxisLabels.Length;
foreach (var item in _series)
{
if (numValues < item.Data.Length)
{
numValues = item.Data.Length;
}
foreach (int i in item.Data)
{
if (maxY < i)
{
maxY = i;
}
}
}
var boundHeight = 350.0;
var boundWidth = 650.0;
double gridYUnits = ChartParent?.ChartOptions.YAxisTicks ?? 20;
if (gridYUnits <= 0)
gridYUnits = 20;
int maxYTicks = ChartParent?.ChartOptions.MaxNumYAxisTicks ?? 100;
double gridXUnits = 30;
var numVerticalLines = numValues - 1;
var numHorizontalLines = ((int)(maxY / gridYUnits)) + 1;
// this is a safeguard against millions of gridlines which might arise with very high values
while (numHorizontalLines > maxYTicks)
{
gridYUnits *= 2;
numHorizontalLines = ((int)(maxY / gridYUnits)) + 1;
}
var verticalStartSpace = 25.0;
var horizontalStartSpace = 30.0;
var verticalEndSpace = 25.0;
var horizontalEndSpace = 30.0;
var verticalSpace = (boundHeight - verticalStartSpace - verticalEndSpace) / (numHorizontalLines);
var horizontalSpace = (boundWidth - horizontalStartSpace - horizontalEndSpace) / (numVerticalLines);
var interpolationOption = ChartParent?.ChartOptions.InterpolationOption ?? InterpolationOption.Straight;
//Horizontal Grid Lines
var y = verticalStartSpace;
double startGridY = 0;
for (var counter = 0; counter <= numHorizontalLines; counter++)
{
var line = new SvgPath()
{
Index = counter,
Data = $"M {ToS(horizontalStartSpace)} {ToS((boundHeight - y))} L {ToS((boundWidth - horizontalEndSpace))} {ToS((boundHeight - y))}"
};
_horizontalLines.Add(line);
var lineValue = new SvgText() { X = (horizontalStartSpace - 10), Y = (boundHeight - y + 5), Value = ToS(startGridY, ChartParent?.ChartOptions.YAxisFormat) };
_horizontalValues.Add(lineValue);
startGridY += gridYUnits;
y += verticalSpace;
}
//Vertical Grid Lines
var x = horizontalStartSpace;
double startGridX = 0;
for (var counter = 0; counter <= numVerticalLines; counter++)
{
var line = new SvgPath()
{
Index = counter,
Data = $"M {ToS(x)} {ToS((boundHeight - verticalStartSpace))} L {ToS(x)} {ToS(verticalEndSpace)}"
};
_verticalLines.Add(line);
var xLabels = "";
if (counter < numXLabels)
{
xLabels = XAxisLabels[counter];
}
var lineValue = new SvgText() { X = x, Y = boundHeight - 2, Value = xLabels };
_verticalValues.Add(lineValue);
startGridX += gridXUnits;
x += horizontalSpace;
}
//Chart Lines
var colorcounter = 0;
foreach (var item in _series)
{
var chartLine = "";
double gridValueX = 0;
double gridValueY = 0;
var firstTime = true;
double[] XValues = new double[item.Data.Length];
double[] YValues = new double[item.Data.Length];
ILineInterpolator interpolator;
for (var i = 0; i <= item.Data.Length - 1; i++)
{
if (i == 0)
XValues[i] = 30;
else
XValues[i] = XValues[i - 1] + horizontalSpace;
var gridValue = (item.Data[i]) * verticalSpace / gridYUnits;
YValues[i] = boundHeight - (verticalStartSpace + gridValue);
}
switch (interpolationOption)
{
case InterpolationOption.NaturalSpline:
interpolator = new NaturalSpline(XValues, YValues);
break;
case InterpolationOption.EndSlope:
interpolator = new EndSlopeSpline(XValues, YValues);
break;
case InterpolationOption.Periodic:
interpolator = new PeriodicSpline(XValues, YValues);
break;
case InterpolationOption.Straight:
default:
interpolator = new NoInterpolation();
break;
}
if (interpolator?.InterpolationRequired == true)
{
horizontalSpace = (boundWidth - horizontalStartSpace - horizontalEndSpace) / interpolator.InterpolatedXs.Length;
foreach (var yValue in interpolator.InterpolatedYs)
{
if (firstTime)
{
chartLine += "M ";
firstTime = false;
gridValueX = horizontalStartSpace;
gridValueY = verticalStartSpace;
}
else
{
chartLine += " L ";
gridValueX += horizontalSpace;
gridValueY = verticalStartSpace;
}
gridValueY = yValue;
chartLine = chartLine + ToS(gridValueX) + " " + ToS(gridValueY);
}
}
else
{
foreach (var dataLine in item.Data)
{
if (firstTime)
{
chartLine += "M ";
firstTime = false;
gridValueX = horizontalStartSpace;
gridValueY = verticalStartSpace;
}
else
{
chartLine += " L ";
gridValueX += horizontalSpace;
gridValueY = verticalStartSpace;
}
var gridValue = ((double)dataLine) * verticalSpace / gridYUnits;
gridValueY = boundHeight - (gridValueY + gridValue);
chartLine = chartLine + ToS(gridValueX) + " " + ToS(gridValueY);
}
}
var line = new SvgPath()
{
Index = colorcounter,
Data = chartLine
};
var legend = new SvgLegend()
{
Index = colorcounter,
Labels = item.Name
};
colorcounter++;
_chartLines.Add(line);
_legends.Add(legend);
}
}
#endregion
}

View File

@ -0,0 +1,14 @@
@namespace Connected.Components
@using System.Globalization
@inherits Chart
<svg @attributes="CustomAttributes" class="chart-pie" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="-1 -1 2 2" style="transform: rotate(-90deg);">
<Filters />
@foreach (var item in _paths.ToList())
{
<path @onclick="() => SelectedIndex = item.Index" class="chart-serie" fill="@(ChartParent.ChartOptions.ChartPalette.GetValue(item.Index % ChartOptions.ChartPalette.Count()))" d="@item.Data"></path>
}
@ChartParent?.CustomGraphics
</svg>
<Legend Data="@_legends" />

View File

@ -0,0 +1,61 @@
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
partial class Pie : Chart
{
#region Variables
[CascadingParameter] public Chart ChartParent { get; set; }
private List<SvgPath> _paths = new();
private List<SvgLegend> _legends = new();
#endregion
#region Lifecycle
protected override void OnParametersSet()
{
_paths.Clear();
_legends.Clear();
double startx, starty, endx, endy;
var ndata = GetNormalizedData();
double cumulativeRadians = 0;
for (var i = 0; i < ndata.Length; i++)
{
var data = ndata[i];
startx = Math.Cos(cumulativeRadians);
starty = Math.Sin(cumulativeRadians);
cumulativeRadians += 2 * Math.PI * data;
endx = Math.Cos(cumulativeRadians);
endy = Math.Sin(cumulativeRadians);
var largeArcFlag = data > 0.5 ? 1 : 0;
var path = new SvgPath()
{
Index = i,
Data = $"M {ToS(startx)} {ToS(starty)} A 1 1 0 {ToS(largeArcFlag)} 1 {ToS(endx)} {ToS(endy)} L 0 0"
};
_paths.Add(path);
}
var counter = 0;
foreach (var data in ndata)
{
var percent = data * 100;
var labels = "";
if (counter < InputLabels.Length)
{
labels = InputLabels[counter];
}
var legend = new SvgLegend()
{
Index = counter,
Labels = labels,
Data = ToS(Math.Round(percent, 1))
};
_legends.Add(legend);
counter += 1;
}
}
#endregion
}

View File

@ -0,0 +1,75 @@
/*
* Work in this file is derived from code originally written by Hans-Peter Moser:
* http://www.mosismath.com/AngleSplines/EndSlopeSplines.html
*/
namespace Connected.Components;
public class EndSlopeSpline : SplineInterpolator
{
public EndSlopeSpline(double[] xs, double[] ys,
int resolution = 10, double firstSlopeDegrees = 0, double lastSlopeDegrees = 0) :
base(xs, ys, resolution)
{
m = new Matrix(n);
gauss = new MatrixSolver(n, m);
a = new double[n];
b = new double[n];
c = new double[n];
d = new double[n];
h = new double[n];
CalcParameters(firstSlopeDegrees, lastSlopeDegrees);
Integrate();
Interpolate();
}
public void CalcParameters(double alpha, double beta)
{
for (int i = 0; i < n; i++)
a[i] = GivenYs[i];
for (int i = 0; i < n - 1; i++)
h[i] = GivenXs[i + 1] - GivenXs[i];
m.a[0, 0] = 2.0 * h[0];
m.a[0, 1] = h[0];
m.y[0] = 3 * ((a[1] - a[0]) / h[0] - Math.Tan(alpha * Math.PI / 180));
for (int i = 0; i < n - 2; i++)
{
m.a[i + 1, i] = h[i];
m.a[i + 1, i + 1] = 2.0 * (h[i] + h[i + 1]);
if (i < n - 2)
m.a[i + 1, i + 2] = h[i + 1];
if ((h[i] != 0.0) && (h[i + 1] != 0.0))
m.y[i + 1] = ((a[i + 2] - a[i + 1]) / h[i + 1] - (a[i + 1] - a[i]) / h[i]) * 3.0;
else
m.y[i + 1] = 0.0;
}
m.a[n - 1, n - 2] = h[n - 2];
m.a[n - 1, n - 1] = 2.0 * h[n - 2];
m.y[n - 1] = 3.0 * (Math.Tan(beta * Math.PI / 180) - (a[n - 1] - a[n - 2]) / h[n - 2]);
if (gauss.Eliminate() == false)
throw new InvalidOperationException();
gauss.Solve();
for (int i = 0; i < n; i++)
{
c[i] = m.x[i];
}
for (int i = 0; i < n; i++)
{
if (h[i] != 0.0)
{
d[i] = 1.0 / 3.0 / h[i] * (c[i + 1] - c[i]);
b[i] = 1.0 / h[i] * (a[i + 1] - a[i]) - h[i] / 3.0 * (c[i + 1] + 2 * c[i]);
}
}
}
}

View File

@ -0,0 +1,11 @@
namespace Connected.Components;
public interface ILineInterpolator
{
public double[] GivenYs { get; set; }
public double[] GivenXs { get; set; }
public double[] InterpolatedXs { get; set; }
public double[] InterpolatedYs { get; set; }
public bool InterpolationRequired { get; set; }
}

View File

@ -0,0 +1,15 @@
namespace Connected.Components;
public class Matrix
{
public double[,] a;
public double[] y;
public double[] x;
public Matrix(int size)
{
a = new double[size, size];
y = new double[size];
x = new double[size];
}
}

View File

@ -0,0 +1,89 @@
/*
* Work in this file is derived from code originally written by Hans-Peter Moser:
* http://www.mosismath.com/Basics/Basics.html
* http://www.mosismath.com/Matrix_Gauss/MatrixGauss.html
*/
namespace Connected.Components;
// Matrix equation solver using the Gaussian elimination algorithm
public class MatrixSolver
{
public readonly Matrix m;
public readonly int maxOrder;
public bool calcError;
public MatrixSolver(int size, Matrix mi)
{
maxOrder = size;
m = mi;
}
void SwitchRows(int n)
{
double tempD;
int i, j;
for (i = n; i <= maxOrder - 2; i++)
{
for (j = 0; j <= maxOrder - 1; j++)
{
tempD = m.a[i, j];
m.a[i, j] = m.a[i + 1, j];
m.a[i + 1, j] = tempD;
}
tempD = m.y[i];
m.y[i] = m.y[i + 1];
m.y[i + 1] = tempD;
}
}
public bool Eliminate()
{
int i, k, l;
calcError = false;
for (k = 0; k <= maxOrder - 2; k++)
{
for (i = k; i <= maxOrder - 2; i++)
{
if (Math.Abs(m.a[i + 1, i]) < 1e-8)
{
SwitchRows(i + 1);
}
if (m.a[i + 1, k] != 0.0)
{
for (l = k + 1; l <= maxOrder - 1; l++)
{
if (!calcError)
{
m.a[i + 1, l] = m.a[i + 1, l] * m.a[k, k] - m.a[k, l] * m.a[i + 1, k];
if (m.a[i + 1, l] > 10E260)
{
m.a[i + 1, k] = 0;
calcError = true;
}
}
}
m.y[i + 1] = m.y[i + 1] * m.a[k, k] - m.y[k] * m.a[i + 1, k];
m.a[i + 1, k] = 0;
}
}
}
return !calcError;
}
public void Solve()
{
int k, l;
for (k = maxOrder - 1; k >= 0; k--)
{
for (l = maxOrder - 1; l >= k; l--)
{
m.y[k] = m.y[k] - m.x[l] * m.a[k, l];
}
if (m.a[k, k] != 0)
m.x[k] = m.y[k] / m.a[k, k];
else
m.x[k] = 0;
}
}
}

View File

@ -0,0 +1,87 @@
/*
* Work in this file is derived from code originally written by Hans-Peter Moser:
* http://www.mosismath.com/NaturalSplines/NaturalSplines.html
*/
namespace Connected.Components;
public class NaturalSpline : SplineInterpolator
{
/// <summary>
/// Natural Spline data interpolator
/// </summary>
public NaturalSpline(double[] xs, double[] ys, int resolution = 10) : base(xs, ys, resolution)
{
m = new Matrix(n - 2);
gauss = new MatrixSolver(n - 2, m);
a = new double[n];
b = new double[n];
c = new double[n];
d = new double[n];
h = new double[n - 1];
CalcParameters();
Integrate();
Interpolate();
}
public void CalcParameters()
{
for (int i = 0; i < n; i++)
a[i] = GivenYs[i];
for (int i = 0; i < n - 1; i++)
h[i] = GivenXs[i + 1] - GivenXs[i];
for (int i = 0; i < n - 2; i++)
{
for (int k = 0; k < n - 2; k++)
{
m.a[i, k] = 0.0;
m.y[i] = 0.0;
m.x[i] = 0.0;
}
}
for (int i = 0; i < n - 2; i++)
{
if (i == 0)
{
m.a[i, 0] = 2.0 * (h[0] + h[1]);
m.a[i, 1] = h[1];
}
else
{
m.a[i, i - 1] = h[i];
m.a[i, i] = 2.0 * (h[i] + h[i + 1]);
if (i < n - 3)
m.a[i, i + 1] = h[i + 1];
}
if ((h[i] != 0.0) && (h[i + 1] != 0.0))
m.y[i] = ((a[i + 2] - a[i + 1]) / h[i + 1] - (a[i + 1] - a[i]) / h[i]) * 3.0;
else
m.y[i] = 0.0;
}
if (gauss.Eliminate() == false)
throw new InvalidOperationException("error in matrix calculation");
gauss.Solve();
c[0] = 0.0;
c[n - 1] = 0.0;
for (int i = 1; i < n - 1; i++)
c[i] = m.x[i - 1];
for (int i = 0; i < n - 1; i++)
{
if (h[i] != 0.0)
{
d[i] = 1.0 / 3.0 / h[i] * (c[i + 1] - c[i]);
b[i] = 1.0 / h[i] * (a[i + 1] - a[i]) - h[i] / 3.0 * (c[i + 1] + 2 * c[i]);
}
}
}
}

View File

@ -0,0 +1,10 @@
namespace Connected.Components;
public class NoInterpolation : ILineInterpolator
{
public double[] GivenYs { get; set; }
public double[] GivenXs { get; set; }
public double[] InterpolatedXs { get; set; }
public double[] InterpolatedYs { get; set; }
public bool InterpolationRequired { get; set; } = false;
}

View File

@ -0,0 +1,86 @@
/*
* Work in this file is derived from code originally written by Hans-Peter Moser:
* http://www.mosismath.com/PeriodicSplines/PeriodicSplines.html
*/
namespace Connected.Components;
public class PeriodicSpline : SplineInterpolator
{
public PeriodicSpline(double[] xs, double[] ys, int resolution = 10) : base(xs, ys, resolution)
{
m = new Matrix(n - 1);
gauss = new MatrixSolver(n - 1, m);
a = new double[n + 1];
b = new double[n + 1];
c = new double[n + 1];
d = new double[n + 1];
h = new double[n];
CalcParameters();
Integrate();
Interpolate();
}
public void CalcParameters()
{
for (int i = 0; i < n; i++)
a[i] = GivenYs[i];
for (int i = 0; i < n - 1; i++)
h[i] = GivenXs[i + 1] - GivenXs[i];
a[n] = GivenYs[1];
h[n - 1] = h[0];
for (int i = 0; i < n - 1; i++)
for (int k = 0; k < n - 1; k++)
{
m.a[i, k] = 0.0;
m.y[i] = 0.0;
m.x[i] = 0.0;
}
for (int i = 0; i < n - 1; i++)
{
if (i == 0)
{
m.a[i, 0] = 2.0 * (h[0] + h[1]);
m.a[i, 1] = h[1];
}
else
{
m.a[i, i - 1] = h[i];
m.a[i, i] = 2.0 * (h[i] + h[i + 1]);
if (i < n - 2)
m.a[i, i + 1] = h[i + 1];
}
if ((h[i] != 0.0) && (h[i + 1] != 0.0))
m.y[i] = ((a[i + 2] - a[i + 1]) / h[i + 1] - (a[i + 1] - a[i]) / h[i]) * 3.0;
else
m.y[i] = 0.0;
}
m.a[0, n - 2] = h[0];
m.a[n - 2, 0] = h[0];
if (gauss.Eliminate() == false)
throw new InvalidOperationException();
gauss.Solve();
for (int i = 1; i < n; i++)
c[i] = m.x[i - 1];
c[0] = c[n - 1];
for (int i = 0; i < n; i++)
{
if (h[i] != 0.0)
{
d[i] = 1.0 / 3.0 / h[i] * (c[i + 1] - c[i]);
b[i] = 1.0 / h[i] * (a[i + 1] - a[i]) - h[i] / 3.0 * (c[i + 1] + 2 * c[i]);
}
}
}
}

View File

@ -0,0 +1,83 @@
namespace Connected.Components;
public abstract class SplineInterpolator : ILineInterpolator
{
protected Matrix m;
protected MatrixSolver gauss;
protected readonly int n;
protected double[] a, b, c, d, h;
public double[] GivenYs { get; set; }
public double[] GivenXs { get; set; }
public double[] InterpolatedXs { get; set; }
public double[] InterpolatedYs { get; set; }
public bool InterpolationRequired { get; set; } = true;
public SplineInterpolator(double[] xs, double[] ys, int resolution = 10)
{
if (xs is null || ys is null)
throw new ArgumentException("xs and ys cannot be null");
if (xs.Length != ys.Length)
throw new ArgumentException("xs and ys must have the same length");
if (xs.Length < 4)
throw new ArgumentException("xs and ys must have a length of 4 or greater");
if (resolution < 1)
throw new ArgumentException("resolution must be 1 or greater");
GivenXs = xs;
GivenYs = ys;
n = xs.Length;
InterpolatedXs = new double[n * resolution];
InterpolatedYs = new double[n * resolution];
}
public void Interpolate()
{
int resolution = InterpolatedXs.Length / n;
for (int i = 0; i < h.Length; i++)
{
for (int k = 0; k < resolution; k++)
{
double deltaX = (double)k / resolution * h[i];
double termA = a[i];
double termB = b[i] * deltaX;
double termC = c[i] * deltaX * deltaX;
double termD = d[i] * deltaX * deltaX * deltaX;
int interpolatedIndex = i * resolution + k;
InterpolatedXs[interpolatedIndex] = deltaX + GivenXs[i];
InterpolatedYs[interpolatedIndex] = termA + termB + termC + termD;
}
}
// After interpolation the last several values of the interpolated arrays
// contain uninitialized data. This section identifies the values which are
// populated with values and copies just the useful data into new arrays.
int pointsToKeep = resolution * (n - 1) + 1;
double[] interpolatedXsCopy = new double[pointsToKeep];
double[] interpolatedYsCopy = new double[pointsToKeep];
Array.Copy(InterpolatedXs, 0, interpolatedXsCopy, 0, pointsToKeep - 1);
Array.Copy(InterpolatedYs, 0, interpolatedYsCopy, 0, pointsToKeep - 1);
InterpolatedXs = interpolatedXsCopy;
InterpolatedYs = interpolatedYsCopy;
InterpolatedXs[pointsToKeep - 1] = GivenXs[n - 1];
InterpolatedYs[pointsToKeep - 1] = GivenYs[n - 1];
}
public double Integrate()
{
double integral = 0;
for (int i = 0; i < h.Length; i++)
{
double termA = a[i] * h[i];
double termB = b[i] * Math.Pow(h[i], 2) / 2.0;
double termC = c[i] * Math.Pow(h[i], 3) / 3.0;
double termD = d[i] * Math.Pow(h[i], 4) / 4.0;
integral += termA + termB + termC + termD;
}
return integral;
}
}

View File

@ -0,0 +1,40 @@
namespace Connected.Components;
public class ChartOptions
{
/// <summary>
/// Spacing of Y-axis ticks.
/// </summary>
public int YAxisTicks { get; set; } = 20;
/// <summary>
/// Maximum number of Y-axis ticks. The ticks will be thinned out if the value range is leading to too many ticks.
/// </summary>
public int MaxNumYAxisTicks { get; set; } = 20;
public string YAxisFormat { get; set; }
public bool YAxisLines { get; set; } = true;
public bool XAxisLines { get; set; }
/// <summary>
/// If true, legend will not be displayed.
/// </summary>
public bool DisableLegend { get; set; }
public string[] ChartPalette { get; set; } = { Colors.Blue.Accent3, Colors.Teal.Accent3, Colors.Amber.Accent3, Colors.Orange.Accent3, Colors.Red.Accent3, Colors.DeepPurple.Accent3,
Colors.Green.Accent3, Colors.LightBlue.Accent3, Colors.Teal.Lighten1, Colors.Amber.Lighten1, Colors.Orange.Lighten1, Colors.Red.Lighten1,
Colors.DeepPurple.Lighten1, Colors.Green.Lighten1, Colors.LightBlue.Lighten1, Colors.Amber.Darken2, Colors.Orange.Darken2,
Colors.Red.Darken2, Colors.DeepPurple.Darken2, Colors.Grey.Darken2 };
public InterpolationOption InterpolationOption { get; set; } = InterpolationOption.Straight;
/// <summary>
/// Line width of series in px
/// </summary>
public double LineStrokeWidth { get; set; } = 3;
}
public enum InterpolationOption
{
NaturalSpline,
EndSlope,
Periodic,
Straight
}

View File

@ -0,0 +1,8 @@
namespace Connected.Components;
public class ChartSeries
{
public string Name { get; set; }
public double[] Data { get; set; }
}

View File

@ -0,0 +1,5 @@
@namespace Connected.Components
<filter id="lighten">
<feColorMatrix type="matrix" values="1.5 0 0 0 0 0 1.5 0 0 0 0 0 1.5 0 0 0 0 0 1 0" />
</filter>

View File

@ -0,0 +1,15 @@
@namespace Connected.Components
@inherits Chart
@if (ChartParent?.ChartOptions.DisableLegend != true)
{
<div @attributes="CustomAttributes" class="chart-legend">
@foreach (var item in Data)
{
<div class="chart-legend-item" @onclick=@(()=>{ if (ChartParent!=null) { ChartParent.SelectedIndex=item.Index; }}) @onclick:stopPropagation=@(ChartParent!=null)>
<span class="chart-legend-marker" style="@($"background-color:{ChartParent.ChartOptions.ChartPalette.GetValue(item.Index % ChartOptions.ChartPalette.Count())}")"></span>
<TextContent Typo="Typo.body2" Inline="true">@item.Labels</TextContent>
</div>
}
</div>
}

View File

@ -0,0 +1,9 @@
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class Legend : Chart
{
[CascadingParameter] public Chart ChartParent { get; set; }
[Parameter] public List<SvgLegend> Data { get; set; } = new List<SvgLegend>();
}

View File

@ -0,0 +1,11 @@
namespace Connected.Components;
public class SvgCircle
{
public int Index { get; set; }
public double CX { get; set; }
public double CY { get; set; }
public double Radius { get; set; }
public string StrokeDashArray { get; set; }
public double StrokeDashOffset { get; set; }
}

View File

@ -0,0 +1,8 @@
namespace Connected.Components;
public class SvgLegend
{
public int Index { get; set; }
public string Labels { get; set; }
public string Data { get; set; }
}

View File

@ -0,0 +1,7 @@
namespace Connected.Components;
public class SvgPath
{
public int Index { get; set; }
public string Data { get; set; }
}

View File

@ -0,0 +1,8 @@
namespace Connected.Components;
public class SvgText
{
public double X { get; set; }
public double Y { get; set; }
public string Value { get; set; }
}

View File

@ -0,0 +1,25 @@
@namespace Connected.Components
@inherits BooleanInput<T>
@typeparam T
<InputControl Class="@Classname" Error="@HasErrors" ErrorText="@GetErrorText()" Required="@Required">
<InputContent>
<label class="@LabelClassname" id="@_elementId" @onkeydown="HandleKeyDown" @onclick:stopPropagation="@StopClickPropagation">
<span tabindex="0" class="@CheckBoxClassname">
@*note: stopping the click propagation is important here. otherwise checking the checkbox results in click events on its parent (i.e. table row), which is generally not what you would want*@
<input tabindex="-1" @attributes="CustomAttributes" type="checkbox" class="checkbox-input" checked="@BoolValue" @onchange="@OnChange" disabled="@Disabled" @onclick:preventDefault="@ReadOnly" />
<Icon Glyph="@GetIcon()" Color="HasErrors ? ThemeColor.Error : ThemeColor.Inherit" Size="@Size" />
</span>
@if (!String.IsNullOrEmpty(Label))
{
<TextContent Color="HasErrors ? ThemeColor.Error : ThemeColor.Inherit">@Label</TextContent>
}
@if (ChildContent != null)
{
<TextContent Color="HasErrors ? ThemeColor.Error : ThemeColor.Inherit">
@ChildContent
</TextContent>
}
</label>
</InputContent>
</InputControl>

View File

@ -0,0 +1,267 @@
using Connected.Annotations;
using Connected.Extensions;
using Connected.Services;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
namespace Connected.Components;
public partial class CheckBox<T> : BooleanInput<T>
{
#region Variables
private IKeyInterceptor _keyInterceptor;
[Inject] private IKeyInterceptorFactory _keyInterceptorFactory { get; set; }
private string _elementId = "checkbox" + Guid.NewGuid().ToString().Substring(0, 8);
#endregion
#region Events
protected override Task OnChange(ChangeEventArgs args)
{
Modified = true;
// Apply only when TriState parameter is set to true and T is bool?
if (TriState && typeof(T) == typeof(bool?))
{
// The cycle is forced with the following steps: true, false, indeterminate, true, false, indeterminate...
if (!((bool?)(object)_value).HasValue)
{
return SetBoolValueAsync(true);
}
else
{
return ((bool?)(object)_value).Value ? SetBoolValueAsync(false) : SetBoolValueAsync(default);
}
}
else
{
return SetBoolValueAsync((bool?)args.Value);
}
}
protected void HandleKeyDown(KeyboardEventArgs obj)
{
if (Disabled || ReadOnly || !KeyboardEnabled)
return;
switch (obj.Key)
{
case "Delete":
SetBoolValueAsync(false);
break;
case "Enter":
case "NumpadEnter":
SetBoolValueAsync(true);
break;
case "Backspace":
if (TriState)
{
SetBoolValueAsync(null);
}
break;
case " ":
if (BoolValue == null)
{
SetBoolValueAsync(true);
}
else if (BoolValue == true)
{
SetBoolValueAsync(false);
}
else if (BoolValue == false)
{
if (TriState == true)
{
SetBoolValueAsync(null);
}
else
{
SetBoolValueAsync(true);
}
}
break;
}
}
#endregion
#region Content
/// <summary>
/// Child content of component.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Behavior)]
public RenderFragment ChildContent { get; set; }
#endregion
#region Styling
protected string Classname =>
new CssBuilder("input-control-boolean-input")
.AddClass(AdditionalClassList)
.Build();
protected string LabelClassname =>
new CssBuilder("checkbox")
.AddClass($"disabled", Disabled)
.AddClass($"readonly", ReadOnly)
.AddClass(LabelPosition == LabelPosition.End ? "ltr" : "rtl", true)
.Build();
protected string CheckBoxClassname =>
new CssBuilder("button-root mud-icon-button")
.AddClass($"{Color.ToDescription()}-text hover:mud-{Color.ToDescription()}-hover", UnCheckedColor == null || (UnCheckedColor != null && BoolValue == true))
.AddClass($"{UnCheckedColor?.ToDescription()}-text hover:mud-{UnCheckedColor?.ToDescription()}-hover", UnCheckedColor != null && BoolValue == false)
.AddClass($"checkbox-dense", Dense)
.AddClass($"ripple mud-ripple-checkbox", !DisableRipple && !ReadOnly && !Disabled)
.AddClass($"disabled", Disabled)
.AddClass($"readonly", ReadOnly)
.Build();
/// <summary>
/// The color of the component. It supports the theme colors.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public ThemeColor Color { get; set; } = ThemeColor.Default;
/// <summary>
/// The base color of the component in its none active/unchecked state. It supports the theme colors.
/// </summary>
[Parameter]
[Category(CategoryTypes.Radio.Appearance)]
public ThemeColor? UnCheckedColor { get; set; } = null;
/// <summary>
/// If true, disables ripple effect.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public bool DisableRipple { get; set; }
/// <summary>
/// If true, compact padding will be applied.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public bool Dense { get; set; }
/// <summary>
/// The Size of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public Size Size { get; set; } = Size.Medium;
/// <summary>
/// Custom checked icon, leave null for default.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public string CheckedIcon { get; set; } = Icons.Material.Filled.CheckBox;
/// <summary>
/// Custom unchecked icon, leave null for default.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public string UncheckedIcon { get; set; } = Icons.Material.Filled.CheckBoxOutlineBlank;
/// <summary>
/// Custom indeterminate icon, leave null for default.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Appearance)]
public string IndeterminateIcon { get; set; } = Icons.Material.Filled.IndeterminateCheckBox;
private string GetIcon()
{
if (BoolValue == true)
{
return CheckedIcon;
}
if (BoolValue == false)
{
return UncheckedIcon;
}
return IndeterminateIcon;
}
#endregion
#region Behavior
/// <summary>
/// The text/label will be displayed next to the checkbox if set.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Behavior)]
public string Label { get; set; }
/// <summary>
/// The position of the text/label.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Behavior)]
public LabelPosition LabelPosition { get; set; } = LabelPosition.End;
/// <summary>
/// If true, the checkbox can be controlled with the keyboard.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Behavior)]
public bool KeyboardEnabled { get; set; } = true;
/// <summary>
/// Define if the checkbox can cycle again through indeterminate status.
/// </summary>
[Parameter]
[Category(CategoryTypes.FormComponent.Validation)]
public bool TriState { get; set; }
#endregion
#region Lifecycle
protected override void OnInitialized()
{
base.OnInitialized();
if (Label == null && For != null)
Label = For.GetLabelString();
}
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
{
_keyInterceptor = _keyInterceptorFactory.Create();
await _keyInterceptor.Connect(_elementId, new KeyInterceptorOptions()
{
//EnableLogging = true,
TargetClass = "button-root",
Keys = {
new KeyOptions { Key=" ", PreventDown = "key+none", PreventUp = "key+none" }, // prevent scrolling page
new KeyOptions { Key="Enter", PreventDown = "key+none" },
new KeyOptions { Key="NumpadEnter", PreventDown = "key+none" },
new KeyOptions { Key="Backspace", PreventDown = "key+none" },
},
});
_keyInterceptor.KeyDown += HandleKeyDown;
}
await base.OnAfterRenderAsync(firstRender);
}
protected override void Dispose(bool disposing)
{
base.Dispose(disposing);
if (disposing == true)
{
if (_keyInterceptor != null)
{
_keyInterceptor.KeyDown -= HandleKeyDown;
_keyInterceptor.Dispose();
}
}
}
#endregion
}

View File

@ -0,0 +1,33 @@
@namespace Connected.Components
@inherits UIComponent
<div tabindex="0" @attributes="CustomAttributes" class="@Classname" @onclick="@OnClickHandler">
@if (!String.IsNullOrEmpty(Avatar))
{
<Avatar Class="@AvatarClass" Color="@Color">
<MudIcon Icon="@Avatar" />
</Avatar>
}
else if (!String.IsNullOrEmpty(Icon) && !IsChecked)
{
<Icon Glyph="@Icon" Class="chip-icon" Size="Size.Small" Color="@IconColor" />
}
else if (IsChecked)
{
<Icon Glyph="@CheckedIcon" Class="chip-icon" Size="Size.Small" />
}
<span class="chip-content">
@if (ChildContent == null)
{
@Text
}
else
{
@ChildContent
}
@if (OnClose.HasDelegate || ChipSet?.AllClosable==true)
{
<GlyphButton Class="chip-close-button" Glyph="@(String.IsNullOrEmpty(CloseIcon) ? $"{Icons.Material.Filled.Cancel}" : $"{CloseIcon}")" Clicked="OnCloseHandler" Size="Size.Small"/>
}
</span>
</div>

View File

@ -0,0 +1,355 @@
using System.Diagnostics.CodeAnalysis;
using System.Windows.Input;
using Connected.Annotations;
using Connected.Extensions;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
namespace Connected.Components;
public partial class Chip : UIComponent, IDisposable
{
#region Variables
private bool _isSelected;
[Inject] public NavigationManager UriHelper { get; set; }
[Inject] public IJsApiService JsApiService { get; set; }
#endregion
#region Events
internal void ForceRerender() => StateHasChanged();
protected internal async Task OnClickHandler(MouseEventArgs ev)
{
if (ChipSet?.ReadOnly == true)
{
return;
}
if (ChipSet != null)
{
_ = ChipSet.OnChipClicked(this);
}
if (Href != null)
{
// TODO: use MudElement to render <a> and this code can be removed. we know that it has potential problems on iOS
if (string.IsNullOrWhiteSpace(Target))
UriHelper.NavigateTo(Href, ForceLoad);
else
await JsApiService.Open(Href, Target);
}
else
{
await OnClick.InvokeAsync(ev);
if (Command?.CanExecute(CommandParameter) ?? false)
{
Command.Execute(CommandParameter);
}
}
}
protected async Task OnCloseHandler(MouseEventArgs ev)
{
if (ChipSet?.ReadOnly == true)
{
return;
}
await OnClose.InvokeAsync(this);
ChipSet?.OnChipDeleted(this);
StateHasChanged();
}
/// <summary>
/// Chip click event, if set the chip focus, hover and click effects are applied.
/// </summary>
[Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
/// <summary>
/// Chip delete event, if set the delete icon will be visible.
/// </summary>
[Parameter] public EventCallback<Chip> OnClose { get; set; }
#endregion
#region Content
[CascadingParameter] ChipSet ChipSet { get; set; }
/// <summary>
/// If set to a URL, clicking the button will open the referenced document. Use Target to specify where
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.ClickAction)]
public string Href { get; set; }
/// <summary>
/// The target attribute specifies where to open the link, if Href is specified. Possible values: _blank | _self | _parent | _top | <i>framename</i>
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.ClickAction)]
public string Target { get; set; }
/// <summary>
/// Command executed when the user clicks on an element.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.ClickAction)]
public ICommand Command { get; set; }
/// <summary>
/// Command parameter.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.ClickAction)]
public object CommandParameter { get; set; }
#endregion
#region Styling
protected string Classname =>
new CssBuilder("chip")
.AddClass($"chip-{GetVariant().ToDescription()}")
.AddClass($"chip-size-{Size.ToDescription()}")
.AddClass($"chip-color-{GetColor().ToDescription()}")
.AddClass("clickable", !ChipSet?.ReadOnly ?? OnClick.HasDelegate)
.AddClass("ripple", !ChipSet?.ReadOnly ?? OnClick.HasDelegate && !DisableRipple)
.AddClass("chip-label", Label)
.AddClass("disabled", Disabled)
.AddClass("chip-selected", IsSelected)
.AddClass(AdditionalClassList)
.Build();
//Cannot test the get variant (last line)
[ExcludeFromCodeCoverage]
private Variant GetVariant()
{
return Variant switch
{
Variant.Text => IsSelected ? Variant.Filled : Variant.Text,
Variant.Filled => IsSelected ? Variant.Text : Variant.Filled,
Variant.Outlined => Variant.Outlined,
_ => Variant
};
}
private ThemeColor GetColor()
{
if (IsSelected && SelectedColor != ThemeColor.Inherit)
{
return SelectedColor;
}
else if (IsSelected && SelectedColor == ThemeColor.Inherit)
{
return Color;
}
else
{
return Color;
}
}
/// <summary>
/// The color of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Appearance)]
public ThemeColor Color { get; set; } = ThemeColor.Default;
/// <summary>
/// The size of the button. small is equivalent to the dense button styling.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Appearance)]
public Size Size { get; set; } = Size.Medium;
/// <summary>
/// The variant to use.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Appearance)]
public Variant Variant { get; set; } = Variant.Filled;
/// <summary>
/// The selected color to use when selected, only works together with ChipSet, Color.Inherit for default value.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Appearance)]
public ThemeColor SelectedColor { get; set; } = ThemeColor.Inherit;
/// <summary>
/// Avatar CSS Class, appends to Chips default avatar classes.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Appearance)]
public string AvatarClass { get; set; }
/// <summary>
/// Removes circle edges and applies theme default.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Appearance)]
public bool Label { get; set; }
/// <summary>
/// Custom checked icon.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Appearance)]
public string CheckedIcon { get; set; } = Icons.Material.Filled.Check;
/// <summary>
/// The color of the icon.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Appearance)]
public ThemeColor IconColor { get; set; } = ThemeColor.Inherit;
/// <summary>
/// Overrides the default close icon, only shown if OnClose is set.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Appearance)]
public string CloseIcon { get; set; }
/// <summary>
/// If true, disables ripple effect, ripple effect is only applied to clickable chips.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Appearance)]
public bool DisableRipple { get; set; }
#endregion
#region Behavior
/// <summary>
/// Set by MudChipSet
/// </summary>
public bool IsSelected
{
get => _isSelected;
set
{
if (_isSelected == value)
return;
_isSelected = value;
StateHasChanged();
}
}
/// <summary>
/// If false, this chip has not been seen before
/// </summary>
public bool DefaultProcessed { get; set; }
/// <summary>
/// Set by MudChipSet
/// </summary>
public bool IsChecked
{
get => _isSelected && ChipSet?.Filter == true;
}
/// <summary>
/// If true, force browser to redirect outside component router-space.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.ClickAction)]
public bool ForceLoad { get; set; }
/// <summary>
/// If true, this chip is selected by default if used in a ChipSet.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Behavior)]
public bool? Default { get; set; }
/// <summary>
/// A string you want to associate with the chip. If the ChildContent is not set this will be shown as chip text.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Behavior)]
public string Text { get; set; }
/// <summary>
/// A value that should be managed in the SelectedValues collection.
/// Note: do not change the value during the chip's lifetime
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Behavior)]
public object Value { get; set; }
/// <summary>
/// Avatar Glyph, Overrides the regular Glyph if set.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Behavior)]
public string Avatar { get; set; }
/// <summary>
/// If true, the chip will be displayed in disabled state and no events possible.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Behavior)]
public bool Disabled { get; set; }
/// <summary>
/// Sets the Glyph to use.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Behavior)]
public string Icon { get; set; }
/// <summary>
/// Child content of component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Chip.Behavior)]
public RenderFragment ChildContent { get; set; }
/// <summary>
/// If set to a URL, clicking the button will open the referenced document. Use Target to specify where (Obsolete replaced by Href)
/// </summary>
[Obsolete("Use Href Instead.", false)]
[Parameter]
[Category(CategoryTypes.Chip.ClickAction)]
public string Link
{
get => Href;
set => Href = value;
}
#endregion
#region Lifecycle
protected override void OnInitialized()
{
base.OnInitialized();
if (Value == null)
Value = this;
}
protected override Task OnInitializedAsync()
{
ChipSet?.Add(this);
return base.OnInitializedAsync();
}
//Exclude because we don't test to catching exception yet
[ExcludeFromCodeCoverage]
public void Dispose()
{
try
{
ChipSet?.Remove(this);
}
catch (Exception)
{
/* ignore! */
}
}
#endregion
}

View File

@ -0,0 +1,8 @@
@namespace Connected.Components
@inherits UIComponent
<div @attributes="CustomAttributes" class="@Classname">
<CascadingValue IsFixed="true" Value="this">
@ChildContent
</CascadingValue>
</div>

Some files were not shown because too many files have changed in this diff Show More