Connected
/
Connected.Components
14
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'features/refactor' into features/nuget_autobuild

Browse Source
features/nuget_autobuild
Matija Koželj 2 years ago
parent 8b48fe5959 c5e97f9600
commit dc49cac63a
304 changed files with 4716 additions and 30906 deletions
Show Stats Download Patch File Download Diff File

17
.gitignore vendored
Unescape View File

@ -412,5 +412,22 @@ FodyWeavers.xsd
# Built Visual Studio Code Extensions # Built Visual Studio Code Extensions
*.vsix *.vsix
# Css files
**.css
# Minified css files # Minified css files
**.min.css **.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

8
Connected.Components.sln
Unescape View File

@ -5,7 +5,9 @@ VisualStudioVersion = 17.4.33020.496
MinimumVisualStudioVersion = 10.0.40219.1 MinimumVisualStudioVersion = 10.0.40219.1
Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components", "src\connected.components\Connected.Components.csproj", "{70BF497D-6519-401B-A0EE-2E9856B13D96}" Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "Connected.Components", "src\connected.components\Connected.Components.csproj", "{70BF497D-6519-401B-A0EE-2E9856B13D96}"
EndProject EndProject
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "Connected.Components.Showcase", "src\Connected.Components.Showcase\Connected.Components.Showcase.csproj", "{EBB24FD8-A554-427C-A93B-B48C047D34CC}" 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 EndProject
Global Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution GlobalSection(SolutionConfigurationPlatforms) = preSolution
@ -21,6 +23,10 @@ Global
{EBB24FD8-A554-427C-A93B-B48C047D34CC}.Debug|Any CPU.Build.0 = 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.ActiveCfg = Release|Any CPU
{EBB24FD8-A554-427C-A93B-B48C047D34CC}.Release|Any CPU.Build.0 = 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 EndGlobalSection
GlobalSection(SolutionProperties) = preSolution GlobalSection(SolutionProperties) = preSolution
HideSolutionNode = FALSE HideSolutionNode = FALSE

1
build/startWatch.ps1
Unescape 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
Unescape View File

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

4
nuget.config
Unescape View File

@ -9,8 +9,10 @@
<add key="automatic" value="True" /> <add key="automatic" value="True" />
</packageRestore> </packageRestore>
<packageSources> <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" /> <add key="NuGet official package source" value="https://api.nuget.org/v3/index.json" />
<add key="Local repository" value="%LOCAL_NUGET%" />
</packageSources> </packageSources>
<disabledPackageSources /> <disabledPackageSources />

4
src/Connected.Components.Showcase/Connected.Components.Showcase.csproj
Unescape View File

@ -41,4 +41,8 @@
<Copy SourceFiles="$(OutputPath)..\$(PackageId).$(PackageVersion).snupkg" DestinationFolder="$([System.Environment]::GetEnvironmentVariable('LOCAL_NUGET'))" /> <Copy SourceFiles="$(OutputPath)..\$(PackageId).$(PackageVersion).snupkg" DestinationFolder="$([System.Environment]::GetEnvironmentVariable('LOCAL_NUGET'))" />
</Target> </Target>
<ItemGroup>
<ProjectReference Include="..\connected.components\Connected.Components.csproj" />
</ItemGroup>
</Project> </Project>

5
src/Connected.Components.Showcase/MainLayout.razor
Unescape View File

@ -1,5 +0,0 @@
@inherits LayoutComponentBase
<main>
@Body
</main>

381
src/Connected.Components.Showcase/Pages/AlertShowcase.razor
Unescape 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>

7
src/Connected.Components.Showcase/Pages/AppBarShowcase.razor
Unescape View File

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

36
src/Connected.Components.Showcase/Pages/DrawerShowcase.razor
Unescape 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;
}
}

3
src/Connected.Components.Showcase/Pages/Index.razor
Unescape View File

@ -1,3 +0,0 @@
@page "/"
<h1>Hello, world!</h1>

12
src/Connected.Components/.config/dotnet-tools.json
Unescape View File

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

8
src/Connected.Components/Components/Alert/Alert.razor
Unescape View File

@ -2,10 +2,10 @@
@inherits UIComponent @inherits UIComponent
<div @attributes="UserAttributes" role="alert" class="@ClassList" Style="@Style" @onclick="OnClick"> <div role="alert" class="@CompiledClassList" @attributes="CustomAttributes" @onclick="Clicked">
<div class="@ClassPosition"> <div name="alert-content" class="alert-content">
@if (!GlyphVisible) @if (GlyphVisible)
{ {
<div class="alert-icon alert-icon-left"> <div class="alert-icon alert-icon-left">
<Icon Glyph="@Glyph" /> <Icon Glyph="@Glyph" />
@ -20,7 +20,7 @@
@if (CloseGlyphVisible) @if (CloseGlyphVisible)
{ {
<div class="alert-close"> <div class="alert-close">
<ToggleIconButton Glyph="@CloseGlyph" @onclick="OnCloseGlyphClick" Size="Size.Small" /> <GlyphButton ClassList="size-small" Glyph="@CloseGlyph" Clicked="OnCloseGlyphClick" />
</div> </div>
} }
</div> </div>

155
src/Connected.Components/Components/Alert/Alert.razor.cs
Unescape View File

@ -1,143 +1,122 @@
using System.Diagnostics.CodeAnalysis; using Connected.Utilities;
using Connected.Extensions;
using Connected.Utilities;
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Components.Web;
namespace Connected.Components; namespace Connected.Components;
public partial class Alert : UIComponent public partial class Alert : UIComponent{
{
[CascadingParameter(Name = "RightToLeft")]
public bool RightToLeft { get; set; }
/// <summary>
/// Sets the position of the text to the start (Left in LTR and right in RTL).
/// </summary>
[Parameter]
public HorizontalAlignment Alignment { get; set; } = HorizontalAlignment.Left;
/// <summary> /// <summary>
/// The callback, when the close button has been clicked. /// Contains the default container classlist and the user defined classes.
/// </summary> /// </summary>
[Parameter] public EventCallback<Alert> CloseGlyphClicked { get; set; } private CssBuilder CompiledClassList
{
get
{
return new CssBuilder("alert")
.AddClass($"alert-{Variant}-{Severity}")
.AddClass(ClassList);
}
}
/// <summary> /// <summary>
/// Define the icon used for the close button. /// Child content of the component.
/// </summary> /// </summary>
[Parameter] [Parameter]
public string CloseGlyph { get; set; } = Icons.Material.Filled.Close; public RenderFragment? ChildContent { get; set; }
#region EventCallbacks
/// <summary> /// <summary>
/// Sets if the alert shows a close icon. /// Raised when the alert is clicked.
/// </summary> /// </summary>
[Parameter] [Parameter]
public bool CloseGlyphVisible { get; set; } public EventCallback<MouseEventArgs> Clicked { get; set; }
/// <summary> /// <summary>
/// The higher the number, the heavier the drop-shadow. 0 for no shadow. /// The callback, when the close glyph has been clicked.
/// </summary> /// </summary>
[Parameter] [Parameter] public EventCallback<Alert> CloseClicked { get; set; }
public int Elevation { set; get; } = 0;
#endregion
#region Content placeholders
/// <summary> /// <summary>
/// If true, rounded corners are disabled. /// Define the glyph used for the close button.
/// </summary> /// </summary>
[Parameter] [Parameter]
public bool Square { get; set; } public string CloseGlyph { get; set; } = Icons.Material.Filled.Close;
/// <summary> /// <summary>
/// If true, compact padding will be used. /// Custom glyph, leave unset to use the standard glyph which depends on the Severity.
/// </summary> /// </summary>
[Parameter] [Parameter]
public bool Dense { get; set; } public string Glyph { get; set; } = default!;
#endregion
#region Styling properties
/// <summary> /// <summary>
/// If true, no alert icon will be used. /// A space separated list of class names, added on top of the default class list.
/// </summary> /// </summary>
[Parameter] [Parameter]
public bool GlyphVisible { get; set; } public string? ClassList { get; set; }
/// <summary> /// <summary>
/// The severity of the alert. This defines the color and icon used. /// Sets if the alert shows a close glyph.
/// </summary> /// </summary>
[Parameter] [Parameter]
public Severity Severity { get; set; } = Severity.Normal; public bool CloseGlyphVisible { get; set; }
/// <summary> /// <summary>
/// The variant to use. /// If true, no alert glyph will be used.
/// </summary> /// </summary>
[Parameter] [Parameter]
public Variant Variant { get; set; } = Variant.Text; public bool GlyphVisible { get; set; }
/// <summary> /// <summary>
/// Child content of the component. /// Specifies the control's display style
/// </summary> /// </summary>
[Parameter] //TODO: Implement in DOM
public RenderFragment? ChildContent { get; set; } [CascadingParameter(Name = "RightToLeft")]
public bool RightToLeft { get; set; }
/// <summary> /// <summary>
/// Custom icon, leave unset to use the standard icon which depends on the Severity /// The severity of the alert. This defines the color and glyph used.
/// </summary> /// </summary>
[Parameter] [Parameter]
public string Glyph { get; set; } = default!; public Severity Severity { get; set; } = Severity.Normal;
/// <summary> /// <summary>
/// Raised when the alert is clicked /// The variant to use.
/// </summary> /// </summary>
[Parameter] [Parameter]
public EventCallback<MouseEventArgs> OnClick { get; set; } public Variant Variant { get; set; } = Variant.Text;
#endregion
protected string ClassList
{
get
{
return new CssBuilder("alert")
.AddClass($"alert-{Variant.ToDescriptionString()}-{Severity.ToDescriptionString()}")
.AddClass($"dense", Dense)
.AddClass($"square", Square)
.AddClass($"elevation-{Elevation}")
.AddClass(Class)
.Build();
}
}
protected string ClassPosition
{
get
{
return new CssBuilder("alert-position")
.AddClass($"justify-sm-{ConvertHorizontalAlignment(Alignment).ToDescriptionString()}")
.Build();
}
}
private HorizontalAlignment ConvertHorizontalAlignment(HorizontalAlignment contentAlignment)
{
return contentAlignment switch
{
HorizontalAlignment.Right => RightToLeft ? HorizontalAlignment.Start : HorizontalAlignment.End,
HorizontalAlignment.Left => RightToLeft ? HorizontalAlignment.End : HorizontalAlignment.Start,
_ => contentAlignment
};
}
internal async Task OnCloseGlyphClick() protected override void OnParametersSet()
{ {
if (CloseGlyphClicked.HasDelegate) if (!string.IsNullOrEmpty(Glyph))
{
await CloseGlyphClicked.InvokeAsync(this);
return; return;
}
await Task.CompletedTask; Glyph = GetGlyphForSeverity(Severity);
} }
//If we can check this exception can include the coverage again private string GetGlyphForSeverity(Severity severity)
[ExcludeFromCodeCoverage]
protected override void OnParametersSet()
{ {
if (!string.IsNullOrEmpty(Glyph)) return Severity switch
return;
Glyph = Severity switch
{ {
Severity.Normal => Icons.Material.Outlined.EventNote, Severity.Normal => Icons.Material.Outlined.EventNote,
Severity.Info => Icons.Material.Outlined.Info, Severity.Info => Icons.Material.Outlined.Info,
Severity.Success => Icons.Custom.Uncategorized.AlertSuccess, Severity.Success => Icons.Custom.Uncategorized.AlertSuccess,
Severity.Warning => Icons.Material.Outlined.ReportProblem, Severity.Warning => Icons.Material.Outlined.ReportProblem,
Severity.Error => Icons.Material.Filled.ErrorOutline, Severity.Error => Icons.Material.Filled.ErrorOutline,
_ => throw new ArgumentOutOfRangeException(nameof(Severity)), _ => throw new ArgumentOutOfRangeException(nameof(severity)),
}; };
} }
}
internal async Task OnCloseGlyphClick()
{
if (!CloseClicked.HasDelegate)
return;
await CloseClicked.InvokeAsync(this);
}
}

8
src/Connected.Components/Components/AppBar/AppBar.razor
Unescape View File

@ -1,10 +1,10 @@
@namespace Connected.Components @namespace Connected.Components
@inherits UIComponent @inherits UIComponent
<header @attributes="UserAttributes" class="@ClassList" style="@Style"> <header @attributes="CustomAttributes" class="@CompiledHeaderClassList">
<ToolBar Dense="@Dense" DisableGutters="@DisableGutters" Class="@ToolBarClassList()"> <ToolBar Class="@CompiledToolbarClassList">
@ChildContent @ChildContent
</ToolBar> </ToolBar>
</header> </header>

72
src/Connected.Components/Components/AppBar/AppBar.razor.cs
Unescape View File

@ -1,75 +1,65 @@
using Connected.Extensions; using Connected.Extensions;
using Connected.Utilities; using Connected.Utilities;
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
using System.Security;
namespace Connected.Components; namespace Connected.Components;
public partial class AppBar : UIComponent public partial class AppBar : UIComponent
{ {
/// <summary> /// <summary>
/// If true, Appbar will be placed at the bottom of the screen. /// The classlist determining the toolbar render.
/// </summary> /// </summary>
[Parameter] private CssBuilder CompiledToolbarClassList
public bool Bottom { get; set; } {
get
/// <summary> {
/// The higher the number, the heavier the drop-shadow. 0 for no shadow. return new CssBuilder("toolbar-appbar")
/// </summary> .AddClass(ToolbarClassList);
[Parameter] }
public int Elevation { set; get; } = 4; }
/// <summary> /// <summary>
/// If true, compact padding will be used. /// The classlist determining the header render.
/// </summary> /// </summary>
[Parameter] private CssBuilder CompiledHeaderClassList
public bool Dense { get; set; } {
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> /// <summary>
/// If true, the left and right padding is removed from from the appbar. /// Child content of the component.
/// </summary> /// </summary>
[Parameter] [Parameter]
public bool DisableGutters { get; set; } public RenderFragment? ChildContent { get; set; }
/// <summary> /// <summary>
/// The color of the component. It supports the theme colors. /// If true, appbar will be fixed.
/// </summary> /// </summary>
[Parameter] [Parameter]
public ThemeColor Color { get; set; } = ThemeColor.Default; public bool Fixed { get; set; } = true;
/// <summary> /// <summary>
/// If true, appbar will be Fixed. /// Class names for the AppBar header. In case of several, separate by spaces.
/// </summary> /// </summary>
[Parameter] [Parameter]
public bool Fixed { get; set; } = true; public string? HeaderClassList { get; set; }
/// <summary> /// <summary>
/// User class names, separated by spaces for the nested toolbar. /// Class names for the nested toolbar. In case of several, separate by spaces.
/// </summary> /// </summary>
[Parameter] [Parameter]
public string? ToolBarClass { get; set; } public string? ToolbarClassList { get; set; }
/// <summary> /// <summary>
/// Child content of the component. /// Determines the vertical alignment of the AppBar.
/// </summary> /// </summary>
[Parameter] [Parameter]
public RenderFragment? ChildContent { get; set; } public VerticalAlignment VerticalAlignment { get; set; }
protected string ClassList()
{
return new CssBuilder("appbar")
.AddClass($"appbar-dense", Dense)
.AddClass($"appbar-fixed-top", Fixed && !Bottom)
.AddClass($"appbar-fixed-bottom", Fixed && Bottom)
.AddClass($"elevation-{Elevation}")
.AddClass($"theme-{Color.ToDescriptionString()}", Color != ThemeColor.Default)
.AddClass(Class)
.Build();
}
protected string ToolBarClassList()
{
return new CssBuilder("toolbar-appbar")
.AddClass(ToolBarClass)
.Build();
}
} }

4
src/Connected.Components/Components/Autocomplete/Autocomplete.razor
Unescape View File

@ -4,7 +4,7 @@
<CascadingValue Name="SubscribeToParentForm" Value="false" IsFixed="true"> <CascadingValue Name="SubscribeToParentForm" Value="false" IsFixed="true">
<div class="@AutocompleteClassList"> <div class="@AutocompleteClassList">
<InputControl Label="@Label" Variant="@Variant" HelperText="@HelperText" HelperTextOnFocus="@HelperTextOnFocus" FullWidth="@FullWidth" Margin="@Margin" Class="@ClassList()" Style="@Style" <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"> Error="@HasError" ErrorText="@ErrorText" Disabled="@Disabled" @onclick="@ToggleMenu" Required="@Required" ForId="@FieldId">
<InputContent> <InputContent>
<Input @ref="_elementReference" @key="_elementKey" InputType="InputType.Text" <Input @ref="_elementReference" @key="_elementKey" InputType="InputType.Text"
@ -15,7 +15,7 @@
Disabled="@Disabled" ReadOnly="@ReadOnly" Error="@HasError" Disabled="@Disabled" ReadOnly="@ReadOnly" Error="@HasError"
OnAdornmentClick="@OnAdornmentClick" AdornmentIcon="@CurrentIcon" Adornment="@Adornment" AdornmentColor="@AdornmentColor" IconSize="@IconSize" AdornmentText="@AdornmentText" OnAdornmentClick="@OnAdornmentClick" AdornmentIcon="@CurrentIcon" Adornment="@Adornment" AdornmentColor="@AdornmentColor" IconSize="@IconSize" AdornmentText="@AdornmentText"
Clearable="@Clearable" OnClearButtonClick="@OnClearButtonClick" Clearable="@Clearable" OnClearButtonClick="@OnClearButtonClick"
@attributes="UserAttributes" @attributes="CustomAttributes"
TextChanged="OnTextChanged" OnBlur="OnInputBlurred" TextChanged="OnTextChanged" OnBlur="OnInputBlurred"
OnKeyDown="@this.OnInputKeyDown" OnKeyDown="@this.OnInputKeyDown"
OnKeyUp="@this.OnInputKeyUp" autocomplete=@("disabled-"+Guid.NewGuid()) KeyUpPreventDefault="KeyUpPreventDefault" OnKeyUp="@this.OnInputKeyUp" autocomplete=@("disabled-"+Guid.NewGuid()) KeyUpPreventDefault="KeyUpPreventDefault"

5
src/Connected.Components/Components/Autocomplete/Autocomplete.razor.cs
Unescape View File

@ -55,12 +55,12 @@ public partial class Autocomplete<T> : InputBase<T>, IDisposable
[Parameter] [Parameter]
public bool Dense { get; set; } public bool Dense { get; set; }
/// <summary> /// <summary>
/// The Open Autocomplete Icon /// The Open Autocomplete Glyph
/// </summary> /// </summary>
[Parameter] [Parameter]
public string OpenIcon { get; set; } = Icons.Material.Filled.ArrowDropDown; public string OpenIcon { get; set; } = Icons.Material.Filled.ArrowDropDown;
/// <summary> /// <summary>
/// The Close Autocomplete Icon /// The Close Autocomplete Glyph
/// </summary> /// </summary>
[Parameter] [Parameter]
public string CloseIcon { get; set; } = Icons.Material.Filled.ArrowDropUp; public string CloseIcon { get; set; } = Icons.Material.Filled.ArrowDropUp;
@ -231,7 +231,6 @@ public partial class Autocomplete<T> : InputBase<T>, IDisposable
protected string ClassList() protected string ClassList()
{ {
return new CssBuilder("select") return new CssBuilder("select")
.AddClass(Class)
.Build(); .Build();
} }

10
src/Connected.Components/Components/Avatar/Avatar.razor
Unescape View File

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

99
src/Connected.Components/Components/Avatar/Avatar.razor.cs
Unescape View File

@ -7,88 +7,87 @@ namespace Connected.Components;
partial class Avatar : UIComponent, IDisposable partial class Avatar : UIComponent, IDisposable
{ {
[CascadingParameter] protected AvatarGroup AvatarGroup { get; set; } [CascadingParameter]
protected string Classname => protected AvatarGroup? AvatarGroup { get; set; }
new CssBuilder("mud-avatar")
.AddClass($"mud-avatar-{Size.ToDescriptionString()}") protected CssBuilder CompiledClassList
.AddClass($"mud-avatar-rounded", Rounded) {
.AddClass($"mud-avatar-square", Square) get
.AddClass($"mud-avatar-{Variant.ToDescriptionString()}") {
.AddClass($"mud-avatar-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}") return new CssBuilder("avatar")
.AddClass($"mud-elevation-{Elevation.ToString()}") .AddClass($"avatar-{Size}")
.AddClass(AvatarGroup?.GetAvatarSpacing() ?? new CssBuilder(), AvatarGroup != null) .AddClass($"avatar-rounded", Kind == AvatarKind.Rounded)
.AddClass(Class) .AddClass($"avatar-square", Kind == AvatarKind.Square)
.Build(); .AddClass($"avatar-{Variant}")
.AddClass($"avatar-{Variant}-{Color}")
protected string Stylesname => .AddClass($"elevation-{Elevation}")
new StyleBuilder() .AddClass(ClassList)
.AddStyle(AvatarGroup?.GetAvatarZindex(this) ?? new StyleBuilder(), AvatarGroup != null) .AddClass(AvatarGroup?.GetAvatarSpacing() ?? new CssBuilder(), AvatarGroup != null);
.AddStyle(Style) }
.Build(); }
protected StyleBuilder CompiledStyles
{
get
{
return new StyleBuilder()
.AddStyle(AvatarGroup?.GetAvatarZindex(this) ?? new StyleBuilder(), AvatarGroup is not null);
}
}
/// <summary> /// <summary>
/// The higher the number, the heavier the drop-shadow. /// A space separated list of class names, added on top of the default class list.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Avatar.Appearance)] public string? ClassList { get; set; }
public int Elevation { set; get; } = 0;
/// <summary> /// <summary>
/// If true, border-radius is set to 0. /// If set (and Image is also set), will add an alt property to the img element
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Avatar.Appearance)] public string? ImageAltText { get; set; }
public bool Square { get; set; }
/// <summary> /// <summary>
/// If true, border-radius is set to the themes default value. /// Child content of the component.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Avatar.Appearance)] public RenderFragment? ChildContent { get; set; }
public bool Rounded { get; set; }
/// <summary> /// <summary>
/// Link to image, if set a image will be displayed instead of text. /// The color of the component. It supports the theme colors.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Avatar.Behavior)] public ThemeColor Color { get; set; } = ThemeColor.Default;
public string Image { get; set; }
/// <summary> /// <summary>
/// If set (and Image is also set), will add an alt property to the img element /// The higher the number, the heavier the drop-shadow.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Avatar.Behavior)] public int Elevation { set; get; } = 0;
public string Alt { get; set; }
/// <summary> /// <summary>
/// The color of the component. It supports the theme colors. /// Link to image, if set a image will be displayed instead of text.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Avatar.Appearance)] public string? Image { get; set; }
public ThemeColor Color { get; set; } = ThemeColor.Default;
/// <summary>
/// Sets the avatar appearance
/// </summary>
public AvatarKind Kind { get; set; }
/// <summary> /// <summary>
/// The Size of the MudAvatar. /// The Size of the MudAvatar.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Avatar.Appearance)]
public Size Size { get; set; } = Size.Medium; public Size Size { get; set; } = Size.Medium;
/// <summary> /// <summary>
/// The variant to use. /// The variant to use.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Avatar.Appearance)]
public Variant Variant { get; set; } = Variant.Filled; public Variant Variant { get; set; } = Variant.Filled;
/// <summary>
/// Child content of the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Avatar.Behavior)]
public RenderFragment ChildContent { get; set; }
protected override void OnInitialized() protected override void OnInitialized()
{ {
base.OnInitialized(); base.OnInitialized();
@ -96,13 +95,7 @@ partial class Avatar : UIComponent, IDisposable
AvatarGroup?.AddAvatar(this); AvatarGroup?.AddAvatar(this);
} }
public void Dispose() public void Dispose() => AvatarGroup?.RemoveAvatar(this);
{
AvatarGroup?.RemoveAvatar(this);
}
internal void ForceRedraw() internal void ForceRedraw() => StateHasChanged();
{
StateHasChanged();
}
} }

4
src/Connected.Components/Components/Avatar/AvatarGroup.razor
Unescape View File

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

43
src/Connected.Components/Components/Avatar/AvatarGroup.razor.cs
Unescape View File

@ -8,27 +8,34 @@ namespace Connected.Components;
partial class AvatarGroup : UIComponent partial class AvatarGroup : UIComponent
{ {
private bool _childrenNeedUpdates = false; private bool _childrenNeedUpdates = false;
private int _spacing = 3;
private List<Avatar> _avatars = new();
protected string Classname => private CssBuilder CompiledClassList
new CssBuilder("mud-avatar-group") {
.AddClass($"mud-avatar-group-outlined", Outlined) get
.AddClass($"mud-avatar-group-outlined-{OutlineColor.ToDescriptionString()}", Outlined) {
.AddClass(Class) return new CssBuilder("avatar-group")
.Build(); .AddClass($"avatar-group-outlined", Outlined)
.AddClass($"avatar-group-outlined-{OutlineColor.ToDescription()}", Outlined)
protected string MaxAvatarClassname => .AddClass(ClassList);
new CssBuilder("mud-avatar-group-max-avatar") }
.AddClass($"ms-n{Spacing}") }
.AddClass(MaxAvatarClass)
.Build();
private int _spacing = 3; private CssBuilder CompiledMaxAvatarClassList
{
get
{
return new CssBuilder("avatar-group-max-avatar")
.AddClass($"ms-n{Spacing}")
.AddClass(MaxAvatarClass);
}
}
/// <summary> /// <summary>
/// Spacing between avatars where 0 is none and 16 max. /// Spacing between avatars where 0 is none and 16 max.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.AvatarGroup.Behavior)]
public int Spacing public int Spacing
{ {
get => _spacing; get => _spacing;
@ -42,6 +49,12 @@ partial class AvatarGroup : UIComponent
} }
} }
/// <summary>
/// A space separated list of class names, added on top of the default class list.
/// </summary>
[Parameter]
public string? ClassList { get; set; }
/// <summary> /// <summary>
/// Outlines the grouped avatars to distinguish them, useful when avatars are the same color or uses images. /// Outlines the grouped avatars to distinguish them, useful when avatars are the same color or uses images.
/// </summary> /// </summary>
@ -132,8 +145,6 @@ partial class AvatarGroup : UIComponent
[Category(CategoryTypes.AvatarGroup.Behavior)] [Category(CategoryTypes.AvatarGroup.Behavior)]
public RenderFragment ChildContent { get; set; } public RenderFragment ChildContent { get; set; }
internal List<Avatar> _avatars = new();
internal void AddAvatar(Avatar avatar) internal void AddAvatar(Avatar avatar)
{ {
_avatars.Add(avatar); _avatars.Add(avatar);

14
src/Connected.Components/Components/Avatar/AvatarKind.cs
Unescape View File

@ -0,0 +1,14 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
namespace Connected.Components;
public enum AvatarKind
{
Undefined = 0,
Unadorned = 1,
Rounded = 2,
Square = 3
}

6
src/Connected.Components/Components/Badge/Badge.razor
Unescape View File

@ -1,8 +1,8 @@
@namespace Connected.Components @namespace Connected.Components
@inherits UIComponent @inherits UIComponent
<span @attributes="UserAttributes" class="@Classname" style="@Style"> <span @attributes="CustomAttributes" class="@CompiledClassList">
@ChildContent @ChildContent
@if (Visible) @if (Visible)
{ {
<span class="@WrapperClass"> <span class="@WrapperClass">
@ -11,7 +11,7 @@
{ {
@if (!String.IsNullOrEmpty(Icon)) @if (!String.IsNullOrEmpty(Icon))
{ {
<Icon Icon="@Icon" Class="mud-icon-badge" /> <Icon Icon="@Icon" Class="icon-badge" />
} }
else else
{ {

30
src/Connected.Components/Components/Badge/Badge.razor.cs
Unescape View File

@ -9,25 +9,25 @@ namespace Connected.Components;
public partial class Badge : UIComponent public partial class Badge : UIComponent
{ {
protected string Classname => protected string CompiledClassList =>
new CssBuilder("mud-badge-root") new CssBuilder("badge-root")
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();
protected string WrapperClass => protected string WrapperClass =>
new CssBuilder("mud-badge-wrapper") new CssBuilder("badge-wrapper")
.AddClass($"mud-badge-{Origin.ToDescriptionString().Replace("-", " ")}") .AddClass($"badge-{Origin.ToDescription().Replace("-", " ")}")
.Build(); .Build();
protected string BadgeClassName => protected string BadgeClassName =>
new CssBuilder("mud-badge") new CssBuilder("badge")
.AddClass("mud-badge-dot", Dot) .AddClass("badge-dot", Dot)
.AddClass("mud-badge-bordered", Bordered) .AddClass("badge-bordered", Bordered)
.AddClass("mud-badge-icon", !string.IsNullOrEmpty(Icon) && !Dot) .AddClass("badge-icon", !string.IsNullOrEmpty(Icon) && !Dot)
.AddClass($"mud-badge-{Origin.ToDescriptionString().Replace("-", " ")}") .AddClass($"badge-{Origin.ToDescription().Replace("-", " ")}")
.AddClass($"mud-elevation-{Elevation.ToString()}") .AddClass($"elevation-{Elevation.ToString()}")
.AddClass("mud-theme-" + Color.ToDescriptionString(), Color != ThemeColor.Default) .AddClass("theme-" + Color.ToDescription(), Color != ThemeColor.Default)
.AddClass("mud-badge-default", Color == ThemeColor.Default) .AddClass("badge-default", Color == ThemeColor.Default)
.AddClass("mud-badge-overlap", Overlap) .AddClass("badge-overlap", Overlap)
.AddClass(BadgeClass) .AddClass(BadgeClass)
.Build(); .Build();
@ -102,7 +102,7 @@ public partial class Badge : UIComponent
public bool Bordered { get; set; } public bool Bordered { get; set; }
/// <summary> /// <summary>
/// Sets the Icon to use in the badge. /// Sets the Glyph to use in the badge.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Badge.Behavior)] [Category(CategoryTypes.Badge.Behavior)]

4
src/Connected.Components/Components/Breadcrumbs/BreadcrumbLink.razor.cs
Unescape View File

@ -10,7 +10,7 @@ public partial class BreadcrumbLink : UIComponent
[CascadingParameter] [CascadingParameter]
public Breadcrumbs Parent { get; set; } public Breadcrumbs Parent { get; set; }
private string Classname => new CssBuilder("mud-breadcrumb-item") private string Classname => new CssBuilder("breadcrumb-item")
.AddClass("mud-disabled", Item?.Disabled) .AddClass("disabled", Item?.Disabled)
.Build(); .Build();
} }

2
src/Connected.Components/Components/Breadcrumbs/BreadcrumbSeparator.razor
Unescape View File

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

4
src/Connected.Components/Components/Breadcrumbs/Breadcrumbs.razor
Unescape View File

@ -7,12 +7,12 @@
} }
<CascadingValue Value="this" IsFixed="true"> <CascadingValue Value="this" IsFixed="true">
<ul @attributes="UserAttributes" class=@Classname style="@Style"> <ul @attributes="CustomAttributes" class=@Classname>
@if (MaxItems is not null && Collapsed && Items.Count > MaxItems) @if (MaxItems is not null && Collapsed && Items.Count > MaxItems)
{ {
<BreadcrumbLink Item="Items[0]"></BreadcrumbLink> <BreadcrumbLink Item="Items[0]"></BreadcrumbLink>
<BreadcrumbSeparator></BreadcrumbSeparator> <BreadcrumbSeparator></BreadcrumbSeparator>
<li class="mud-breadcrumbs-expander" @onclick="Expand"> <li class="breadcrumbs-expander" @onclick="Expand">
<Icon Icon="@ExpanderIcon" Size="Size.Small"></Icon> <Icon Icon="@ExpanderIcon" Size="Size.Small"></Icon>
</li> </li>
<BreadcrumbSeparator></BreadcrumbSeparator> <BreadcrumbSeparator></BreadcrumbSeparator>

10
src/Connected.Components/Components/Breadcrumbs/Breadcrumbs.razor.cs
Unescape View File

@ -49,15 +49,15 @@ public partial class Breadcrumbs : UIComponent
public string ExpanderIcon { get; set; } = Icons.Material.Filled.SettingsEthernet; public string ExpanderIcon { get; set; } = Icons.Material.Filled.SettingsEthernet;
public bool Collapsed { get; private set; } = true; public bool Collapsed { get; private set; } = true;
private string Classname => new CssBuilder("mud-breadcrumbs") private string Classname => new CssBuilder("breadcrumbs")
.AddClass("mud-typography-body1") .AddClass("typography-body1")
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();
internal static string GetItemClassname(BreadcrumbItem item) internal static string GetItemClassname(BreadcrumbItem item)
{ {
return new CssBuilder("mud-breadcrumb-item") return new CssBuilder("breadcrumb-item")
.AddClass("mud-disabled", item.Disabled) .AddClass("disabled", item.Disabled)
.Build(); .Build();
} }

38
src/Connected.Components/Components/Button/Button.razor
Unescape View File

@ -1,31 +1,17 @@
@namespace Connected.Components @namespace Connected.Components
@using Connected.Extensions; @using Connected.Extensions;
@inherits ButtonBase @inherits ButtonBase
<Element @bind-Ref="@_elementReference" <Element type="@ButtonType.ToDescription()"
HtmlTag="@HtmlTag" disabled="@Disabled"
Class="@Classname" HtmlTag="@HtmlTag"
Style="@Style" ClassList="@CompiledClassList.ToString()"
@attributes="UserAttributes" PreventOnClickPropagation="PreventOnClickPropagation"
@onclick="OnClickHandler" @attributes="CustomAttributes"
type="@ButtonType.ToDescriptionString()" @onclick="OnClick">
href="@Href" <span name="button-content" class="button-content">
target="@Target" @ChildContent
rel="@(Target=="_blank"?"noopener":null)" </span>
disabled="@Disabled">
<span class="mud-button-label">
@if (!string.IsNullOrWhiteSpace(StartIcon))
{
<span class="@StartIconClass">
<Icon Icon="@StartIcon" Size="@Size" Color="@IconColor" />
</span>
}
@ChildContent
@if (!string.IsNullOrWhiteSpace(@EndIcon))
{
<span class="@EndIconClass">
<Icon Glyph="@EndIcon" Size="@Size" Color="@IconColor" />
</span>
}
</span>
</Element> </Element>

89
src/Connected.Components/Components/Button/Button.razor.cs
Unescape View File

@ -1,96 +1,41 @@
using Connected.Annotations; using Connected.Utilities;
using Connected.Extensions;
using Connected.Utilities;
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
namespace Connected.Components; namespace Connected.Components;
public partial class Button : ButtonBase public partial class Button : ButtonBase
{ {
protected string Classname =>
new CssBuilder("mud-button-root mud-button")
.AddClass($"mud-button-{Variant.ToDescriptionString()}")
.AddClass($"mud-button-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}")
.AddClass($"mud-button-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}")
.AddClass($"mud-width-full", FullWidth)
.AddClass($"mud-ripple", !DisableRipple)
.AddClass($"mud-button-disable-elevation", DisableElevation)
.AddClass(Class)
.Build();
protected string StartIconClass =>
new CssBuilder("mud-button-icon-start")
.AddClass($"mud-button-icon-size-{Size.ToDescriptionString()}")
.AddClass(IconClass)
.Build();
protected string EndIconClass =>
new CssBuilder("mud-button-icon-end")
.AddClass($"mud-button-icon-size-{Size.ToDescriptionString()}")
.AddClass(IconClass)
.Build();
/// <summary>
/// Icon placed before the text if set.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public string StartIcon { get; set; }
/// <summary>
/// Icon placed after the text if set.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public string EndIcon { get; set; }
/// <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> /// <summary>
/// Icon class names, separated by space /// Contains the default container classlist and the user defined classes.
/// </summary> /// </summary>
[Parameter] private CssBuilder CompiledClassList
[Category(CategoryTypes.Button.Appearance)] {
public string IconClass { get; set; } get
{
return new CssBuilder("button-root mud-button")
.AddClass($"button-{Variant}")
.AddClass(ClassList);
}
}
#region Styling properties
/// <summary> /// <summary>
/// The color of the component. It supports the theme colors. /// Child content of component.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Button.Appearance)] public RenderFragment? ChildContent { get; set; }
public ThemeColor Color { get; set; } = ThemeColor.Default;
/// <summary> /// <summary>
/// The Size of the component. /// A space separated list of class names, added on top of the default class list.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Button.Appearance)] public string? ClassList { get; set; }
public Size Size { get; set; } = Size.Medium;
/// <summary> /// <summary>
/// The variant to use. /// The variant to use.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Button.Appearance)]
public Variant Variant { get; set; } = Variant.Text; public Variant Variant { get; set; } = Variant.Text;
#endregion
/// <summary>
/// If true, the button will take up 100% of available width.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Appearance)]
public bool FullWidth { get; set; }
/// <summary>
/// Child content of component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public RenderFragment ChildContent { get; set; }
} }

140
src/Connected.Components/Components/Button/ButtonBase.cs
Unescape View File

@ -1,143 +1,83 @@
using System.Windows.Input; using System.Windows.Input;
using Connected.Annotations;
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web; using Microsoft.AspNetCore.Components.Web;
using static System.String;
namespace Connected.Components; namespace Connected.Components;
public abstract class ButtonBase : UIComponent public abstract class ButtonBase : UIComponent
{ {
#region EventCallbacks
/// <summary> /// <summary>
/// Potential activation target for this button. This enables RenderFragments with user-defined /// Button click event.
/// 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> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Button.ClickAction)] public EventCallback<MouseEventArgs> Clicked { get; set; }
public string HtmlTag { get; set; } = "button";
/// <summary> protected async Task OnClick(MouseEventArgs e)
/// The button Type (Button, Submit, Refresh) {
/// </summary> if (Disabled)
[Parameter] return;
[Category(CategoryTypes.Button.ClickAction)]
public ButtonType ButtonType { get; set; }
/// <summary> if (Clicked.HasDelegate)
/// If set to a URL, clicking the button will open the referenced document. Use Target to specify where await Clicked.InvokeAsync(e);
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.ClickAction)]
public string Href { 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)] if (Command?.CanExecute(CommandParameters) ?? false)
[Parameter] Command.Execute(CommandParameters);
[Category(CategoryTypes.Button.ClickAction)]
public string Link Activateable?.Activate(this, e);
{
get => Href;
set => Href = value;
} }
/// <summary> #endregion
/// The target attribute specifies where to open the link, if Link is specified. Possible values: _blank | _self | _parent | _top | <i>framename</i>
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.ClickAction)]
public string Target { get; set; }
#region Content placeholders
/// <summary> /// <summary>
/// If true, the button will be disabled. /// Potential activation target for this button. This enables RenderFragments with user-defined
/// buttons which will automatically activate the intended functionality.
/// </summary> /// </summary>
[Parameter] [CascadingParameter]
[Category(CategoryTypes.Button.Behavior)] protected IActivatable? Activateable { get; set; }
public bool Disabled { get; set; } #endregion
/// <summary> #region Styling properties
/// If true, no drop-shadow will be used. #endregion
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Appearance)]
public bool DisableElevation { get; set; }
#region Behavior properties
/// <summary> /// <summary>
/// If true, disables ripple effect. /// The button Type (Button, Submit, Refresh)
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Button.Appearance)] public ButtonType ButtonType { get; set; }
public bool DisableRipple { get; set; }
/// <summary> /// <summary>
/// Command executed when the user clicks on an element. /// Command executed when the user clicks on an element.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Button.ClickAction)] public ICommand? Command { get; set; }
public ICommand Command { get; set; }
/// <summary> /// <summary>
/// Command parameter. /// Command parameter.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Button.ClickAction)] public object? CommandParameters { get; set; }
public object CommandParameter { get; set; }
/// <summary> /// <summary>
/// Button click event. /// If true, the button will be disabled.
/// </summary> /// </summary>
[Parameter] [Parameter]
public EventCallback<MouseEventArgs> OnClick { get; set; } public bool Disabled { get; set; }
#endregion
protected async Task OnClickHandler(MouseEventArgs ev)
{
if (Disabled)
return;
await OnClick.InvokeAsync(ev);
if (Command?.CanExecute(CommandParameter) ?? false)
{
Command.Execute(CommandParameter);
}
Activateable?.Activate(this, ev);
}
protected override void OnInitialized()
{
SetDefaultValues();
}
protected override void OnParametersSet()
{
//if params change, must set default values again
SetDefaultValues();
}
//Set the default value for HtmlTag, Link and Target /// <summary>
private void SetDefaultValues() /// The HTML element that will be rendered in the root by the component
{ /// By default, is a button.
if (Disabled) /// </summary>
{ protected string HtmlTag => ButtonType.ToString().ToLower();
HtmlTag = "button";
Href = null;
Target = null;
return;
}
// Render an anchor element if Link property is set and is not disabled /// <summary>
if (!IsNullOrWhiteSpace(Href)) /// Indicates whether the internal click propagation should be disabled,
{ /// as it is handled in the component itself.
HtmlTag = "a"; /// </summary>
} protected bool PreventOnClickPropagation => string.Compare(HtmlTag, "button", true) == 0;
}
protected ElementReference _elementReference;
public ValueTask FocusAsync() => _elementReference.FocusAsync();
} }

15
src/Connected.Components/Components/Button/Fab.razor
Unescape View File

@ -4,19 +4,14 @@
@using Connected.Extensions; @using Connected.Extensions;
<Element @bind-Ref="@_elementReference" <Element HtmlTag="@HtmlTag"
HtmlTag="@HtmlTag"
Class="@Classname" Class="@Classname"
Style="@Style" @attributes="CustomAttributes"
@attributes="UserAttributes" @onclick="OnClick"
@onclick="OnClickHandler" type="@ButtonType.ToDescription()"
type="@ButtonType.ToDescriptionString()"
href="@Href"
target="@Target"
rel="@(Target=="_blank"?"noopener":null)"
disabled="@Disabled" disabled="@Disabled"
title="@Title"> title="@Title">
<span class="mud-fab-label"> <span class="fab-label">
@if (!string.IsNullOrWhiteSpace(StartIcon)) @if (!string.IsNullOrWhiteSpace(StartIcon))
{ {
<Icon Icon="@StartIcon" Color="@IconColor" Size="@IconSize" /> <Icon Icon="@StartIcon" Color="@IconColor" Size="@IconSize" />

19
src/Connected.Components/Components/Button/Fab.razor.cs
Unescape View File

@ -8,13 +8,10 @@ namespace Connected.Components;
public partial class Fab : ButtonBase public partial class Fab : ButtonBase
{ {
protected string Classname => protected string Classname =>
new CssBuilder("mud-button-root mud-fab") new CssBuilder("button-root mud-fab")
.AddClass($"mud-fab-extended", !string.IsNullOrEmpty(Label)) .AddClass($"fab-extended", !string.IsNullOrEmpty(Label))
.AddClass($"mud-fab-{Color.ToDescriptionString()}") .AddClass($"fab-{Color.ToDescription()}")
.AddClass($"mud-fab-size-{Size.ToDescriptionString()}") .AddClass($"fab-size-{Size.ToDescription()}")
.AddClass($"mud-ripple", !DisableRipple && !Disabled)
.AddClass($"mud-fab-disable-elevation", DisableElevation)
.AddClass(Class)
.Build(); .Build();
/// <summary> /// <summary>
@ -32,19 +29,19 @@ public partial class Fab : ButtonBase
public Size Size { get; set; } = Size.Large; public Size Size { get; set; } = Size.Large;
/// <summary> /// <summary>
/// If applied Icon will be added at the start of the component. /// If applied Glyph will be added at the start of the component.
/// </summary> /// </summary>
[Obsolete("This property is obsolete. Use StartIcon instead.")][Parameter] public string Icon { get => StartIcon; set => StartIcon = value; } [Obsolete("This property is obsolete. Use StartIcon instead.")][Parameter] public string Icon { get => StartIcon; set => StartIcon = value; }
/// <summary> /// <summary>
/// If applied Icon will be added at the start of the component. /// If applied Glyph will be added at the start of the component.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Button.Behavior)] [Category(CategoryTypes.Button.Behavior)]
public string StartIcon { get; set; } public string StartIcon { get; set; }
/// <summary> /// <summary>
/// If applied Icon will be added at the end of the component. /// If applied Glyph will be added at the end of the component.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Button.Behavior)] [Category(CategoryTypes.Button.Behavior)]
@ -72,7 +69,7 @@ public partial class Fab : ButtonBase
public string Label { get; set; } public string Label { get; set; }
/// <summary> /// <summary>
/// Title of the icon used for accessibility. /// GlyphTitle of the icon used for accessibility.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Button.Behavior)] [Category(CategoryTypes.Button.Behavior)]

27
src/Connected.Components/Components/Button/GlyphButton.razor
Unescape View File

@ -0,0 +1,27 @@
@namespace Connected.Components
@inherits ButtonBase
@using Connected.Extensions;
<Element disabled="@Disabled"
title="@GlyphTitle"
type="@ButtonType.ToDescription()"
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>

56
src/Connected.Components/Components/Button/GlyphButton.razor.cs
Unescape View File

@ -0,0 +1,56 @@
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class GlyphButton : ButtonBase
{
/// <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);
}
}
/// <summary>
/// Child content of component, only shows if Glyph is null or Empty.
/// </summary>
[Parameter]
public RenderFragment? ChildContent { get; set; }
#region EventCallbacks
#endregion
#region Content placeholders
/// <summary>
/// The Glyph 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; }
#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>
/// The variant to use.
/// </summary>
[Parameter]
public Variant Variant { get; set; } = Variant.Text;
#endregion
}

29
src/Connected.Components/Components/Button/IconButton.razor
Unescape View File

@ -1,29 +0,0 @@
@namespace Connected.Components
@inherits ButtonBase
@using Connected.Extensions;
<Element @bind-Ref="@_elementReference"
HtmlTag="@HtmlTag"
Class="@Classname"
Style="@Style"
@attributes="UserAttributes"
@onclick="OnClickHandler"
type="@ButtonType.ToDescriptionString()"
href="@Href"
target="@Target"
rel="@(Target=="_blank"?"noopener":null)"
disabled="@Disabled"
title="@Title">
@if (!String.IsNullOrEmpty(Icon))
{
<span class="mud-icon-button-label">
<Icon Glyph="@Icon" Size="@Size" />
</span>
}
else
{
<TextContent Typo="Typo.body2" Color="ThemeColor.Inherit">@ChildContent</TextContent>
}
</Element>

76
src/Connected.Components/Components/Button/IconButton.razor.cs
Unescape View File

@ -1,76 +0,0 @@
using Connected.Annotations;
using Connected.Extensions;
using Connected.Utilities;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class IconButton : ButtonBase
{
protected string Classname =>
new CssBuilder("mud-button-root mud-icon-button")
.AddClass("mud-button", when: AsButton)
.AddClass($"mud-{Color.ToDescriptionString()}-text hover:mud-{Color.ToDescriptionString()}-hover", !AsButton && Color != ThemeColor.Default)
.AddClass($"mud-button-{Variant.ToDescriptionString()}", AsButton)
.AddClass($"mud-button-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}", AsButton)
.AddClass($"mud-button-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}", AsButton)
.AddClass($"mud-ripple", !DisableRipple)
.AddClass($"mud-ripple-icon", !DisableRipple && !AsButton)
.AddClass($"mud-icon-button-size-{Size.ToDescriptionString()}", when: () => Size != Size.Medium)
.AddClass($"mud-icon-button-edge-{Edge.ToDescriptionString()}", when: () => Edge != Edge.False)
.AddClass($"mud-button-disable-elevation", DisableElevation)
.AddClass(Class)
.Build();
protected bool AsButton => Variant != Variant.Text;
/// <summary>
/// The Icon that will be used in the component.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public string Icon { get; set; }
/// <summary>
/// Title of the icon used for accessibility.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public string Title { get; set; }
/// <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.Medium;
/// <summary>
/// If set uses a negative margin.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Appearance)]
public Edge Edge { get; set; }
/// <summary>
/// Child content of component, only shows if Icon is null or Empty.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public RenderFragment ChildContent { get; set; }
/// <summary>
/// The variant to use.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Appearance)]
public Variant Variant { get; set; } = Variant.Text;
}

13
src/Connected.Components/Components/Button/ToggleGlyphButton.razor
Unescape 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"
/>

89
src/Connected.Components/Components/Button/ToggleGlyphButton.razor.cs
Unescape View File

@ -0,0 +1,89 @@
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class ToggleGlyphButton : UIComponent
{
#region EventCallbacks
/// <summary>
/// Fires whenever toggled is changed.
/// </summary>
[Parameter]
public EventCallback<bool> ToggledChanged { get; set; }
#endregion
#region Content placeholders
/// <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 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>
/// The variant to use.
/// </summary>
[Parameter]
public Variant Variant { get; set; } = Variant.Text;
#endregion
#region Behavior properties
/// <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
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);
}
}
}

21
src/Connected.Components/Components/Button/ToggleIconButton.razor
Unescape View File

@ -1,21 +0,0 @@
@namespace Connected.Components
@inherits UIComponent
@{
var ariaPressedValue = @Toggled ? "true" : "false";
}
<IconButton Icon="@(Toggled ? ToggledIcon : Icon)"
Size="(Toggled ? ToggledSize : Size)"
Color="(Toggled ? ToggledColor : Color)"
Title="@(Toggled && ToggledTitle != null ? ToggledTitle : Title)"
Variant="Variant"
Disabled="Disabled"
Edge="Edge"
DisableRipple="DisableRipple"
OnClick="Toggle"
Class="@Class"
Style="@Style"
aria-pressed="@ariaPressedValue"
@attributes="UserAttributes" />

119
src/Connected.Components/Components/Button/ToggleIconButton.razor.cs
Unescape View File

@ -1,119 +0,0 @@
using Connected.Annotations;
using Microsoft.AspNetCore.Components;
namespace Connected.Components;
public partial class ToggleIconButton : UIComponent
{
/// <summary>
/// The toggled value.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public bool Toggled { get; set; }
/// <summary>
/// Fires whenever toggled is changed.
/// </summary>
[Parameter] public EventCallback<bool> ToggledChanged { get; set; }
/// <summary>
/// The Icon that will be used in the untoggled state.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public string Icon { get; set; }
/// <summary>
/// The Icon that will be used in the toggled state.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public string ToggledIcon { get; set; }
/// <summary>
/// Title of the icon used for accessibility.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public string Title { get; set; }
/// <summary>
/// Title used in toggled state, if different.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public string ToggledTitle { get; set; }
/// <summary>
/// The color of the icon in the untoggled state. It supports the theme colors.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Appearance)]
public ThemeColor Color { get; set; } = ThemeColor.Default;
/// <summary>
/// The color of the icon in the toggled state. It supports the theme colors.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Appearance)]
public ThemeColor ToggledColor { get; set; } = ThemeColor.Default;
/// <summary>
/// The Size of the component in the untoggled state.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Appearance)]
public Size Size { get; set; } = Size.Medium;
/// <summary>
/// The Size of the component in the toggled state.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Appearance)]
public Size ToggledSize { get; set; } = Size.Medium;
/// <summary>
/// If set uses a negative margin.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Appearance)]
public Edge Edge { get; set; }
/// <summary>
/// If true, disables ripple effect.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Appearance)]
public bool DisableRipple { get; set; }
/// <summary>
/// If true, the button will be disabled.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Behavior)]
public bool Disabled { get; set; }
/// <summary>
/// The variant to use.
/// </summary>
[Parameter]
[Category(CategoryTypes.Button.Appearance)]
public Variant Variant { get; set; } = Variant.Text;
public Task Toggle()
{
return SetToggledAsync(!Toggled);
}
protected internal async Task SetToggledAsync(bool toggled)
{
if (Disabled)
return;
if (Toggled != toggled)
{
Toggled = toggled;
await ToggledChanged.InvokeAsync(Toggled);
}
}
}

6
src/Connected.Components/Components/ButtonGroup/ButtonGroup.razor
Unescape View File

@ -2,11 +2,11 @@
@inherits UIComponent @inherits UIComponent
<Element HtmlTag="div" Class="@Classname" Style="@Style" Tag="@Tag" UserAttributes="@UserAttributes"> <Element HtmlTag="div" Class="@Classname" Tag="@Tag" UserAttributes="@CustomAttributes">
@ChildContent @ChildContent
</Element> </Element>
@{ @{
if(!UserAttributes.ContainsKey("role")) if(!CustomAttributes.ContainsKey("role"))
UserAttributes.Add("role", "group"); CustomAttributes.Add("role", "group");
} }

20
src/Connected.Components/Components/ButtonGroup/ButtonGroup.razor.cs
Unescape View File

@ -8,16 +8,16 @@ namespace Connected.Components;
public partial class ButtonGroup : UIComponent public partial class ButtonGroup : UIComponent
{ {
protected string Classname => protected string Classname =>
new CssBuilder("mud-button-group-root") new CssBuilder("button-group-root")
.AddClass($"mud-button-group-override-styles", OverrideStyles) .AddClass($"button-group-override-styles", OverrideStyles)
.AddClass($"mud-button-group-{Variant.ToDescriptionString()}") .AddClass($"button-group-{Variant.ToDescription()}")
.AddClass($"mud-button-group-{Variant.ToDescriptionString()}-{Color.ToDescriptionString()}") .AddClass($"button-group-{Variant.ToDescription()}-{Color.ToDescription()}")
.AddClass($"mud-button-group-{Variant.ToDescriptionString()}-size-{Size.ToDescriptionString()}") .AddClass($"button-group-{Variant.ToDescription()}-size-{Size.ToDescription()}")
.AddClass($"mud-button-group-vertical", VerticalAlign) .AddClass($"button-group-vertical", VerticalAlign)
.AddClass($"mud-button-group-horizontal", !VerticalAlign) .AddClass($"button-group-horizontal", !VerticalAlign)
.AddClass($"mud-button-group-disable-elevation", DisableElevation) .AddClass($"button-group-disable-elevation", DisableElevation)
.AddClass($"mud-button-group-rtl", RightToLeft) .AddClass($"button-group-rtl", RightToLeft)
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();

2
src/Connected.Components/Components/Card/Card.razor
Unescape View File

@ -2,6 +2,6 @@
@inherits UIComponent @inherits UIComponent
<Paper @attributes="UserAttributes" Class="@Classname" Style="@Style" Outlined="@Outlined" Square="@Square" Elevation="@Elevation"> <Paper @attributes="CustomAttributes" Class="@Classname" Outlined="@Outlined" Square="@Square" Elevation="@Elevation">
@ChildContent @ChildContent
</Paper> </Paper>

4
src/Connected.Components/Components/Card/Card.razor.cs
Unescape View File

@ -7,8 +7,8 @@ namespace Connected.Components;
public partial class Card : UIComponent public partial class Card : UIComponent
{ {
protected string Classname => protected string Classname =>
new CssBuilder("mud-card") new CssBuilder("card")
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();
/// <summary> /// <summary>

2
src/Connected.Components/Components/Card/CardActions.razor
Unescape View File

@ -2,6 +2,6 @@
@inherits UIComponent @inherits UIComponent
<div @attributes="UserAttributes" class="@Classname" style="@Style"> <div @attributes="CustomAttributes" class="@Classname">
@ChildContent @ChildContent
</div> </div>

4
src/Connected.Components/Components/Card/CardActions.razor.cs
Unescape View File

@ -7,8 +7,8 @@ namespace Connected.Components;
public partial class CardActions : UIComponent public partial class CardActions : UIComponent
{ {
protected string Classname => protected string Classname =>
new CssBuilder("mud-card-actions") new CssBuilder("card-actions")
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();
/// <summary> /// <summary>

2
src/Connected.Components/Components/Card/CardContent.razor
Unescape View File

@ -2,6 +2,6 @@
@inherits UIComponent @inherits UIComponent
<div @attributes="UserAttributes" class="@Classname" style="@Style"> <div @attributes="CustomAttributes" class="@Classname">
@ChildContent @ChildContent
</div> </div>

4
src/Connected.Components/Components/Card/CardContent.razor.cs
Unescape View File

@ -7,8 +7,8 @@ namespace Connected.Components;
public partial class CardContent : UIComponent public partial class CardContent : UIComponent
{ {
protected string Classname => protected string Classname =>
new CssBuilder("mud-card-content") new CssBuilder("card-content")
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();
/// <summary> /// <summary>

8
src/Connected.Components/Components/Card/CardHeader.razor
Unescape View File

@ -2,18 +2,18 @@
@inherits UIComponent @inherits UIComponent
<div @attributes="UserAttributes" class="@Classname" style="@Style"> <div @attributes="CustomAttributes" class="@Classname">
@if (CardHeaderAvatar is not null) @if (CardHeaderAvatar is not null)
{ {
<div class="mud-card-header-avatar">@CardHeaderAvatar</div> <div class="card-header-avatar">@CardHeaderAvatar</div>
} }
@if (CardHeaderContent is not null) @if (CardHeaderContent is not null)
{ {
<div class="mud-card-header-content">@CardHeaderContent</div> <div class="card-header-content">@CardHeaderContent</div>
} }
@if (CardHeaderActions is not null) @if (CardHeaderActions is not null)
{ {
<div class="mud-card-header-actions">@CardHeaderActions</div> <div class="card-header-actions">@CardHeaderActions</div>
} }
@if (ChildContent is not null) @if (ChildContent is not null)
{ {

4
src/Connected.Components/Components/Card/CardHeader.razor.cs
Unescape View File

@ -7,8 +7,8 @@ namespace Connected.Components;
public partial class CardHeader : UIComponent public partial class CardHeader : UIComponent
{ {
protected string Classname => protected string Classname =>
new CssBuilder("mud-card-header") new CssBuilder("card-header")
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();
/// <summary> /// <summary>

2
src/Connected.Components/Components/Card/CardMedia.razor
Unescape View File

@ -2,4 +2,4 @@
@inherits UIComponent @inherits UIComponent
<div @attributes="UserAttributes" title="@Title" class="@Classname" style="@StyleString"></div> <div @attributes="CustomAttributes" title="@Title" class="@Classname" style="@StyleString"></div>

7
src/Connected.Components/Components/Card/CardMedia.razor.cs
Unescape View File

@ -8,16 +8,15 @@ public partial class CardMedia : UIComponent
{ {
protected string StyleString => protected string StyleString =>
StyleBuilder.Default($"background-image:url(\"{Image}\");height: {Height}px;") StyleBuilder.Default($"background-image:url(\"{Image}\");height: {Height}px;")
.AddStyle(this.Style)
.Build(); .Build();
protected string Classname => protected string Classname =>
new CssBuilder("mud-card-media") new CssBuilder("card-media")
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();
/// <summary> /// <summary>
/// Title of the image used for accessibility. /// GlyphTitle of the image used for accessibility.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Card.Behavior)] [Category(CategoryTypes.Card.Behavior)]

6
src/Connected.Components/Components/Carousel/Carousel.razor
Unescape View File

@ -4,10 +4,10 @@
@implements IAsyncDisposable @implements IAsyncDisposable
@typeparam TData @typeparam TData
<section @attributes="UserAttributes" aria-roledescription="carousel" class="@Classname" style="@Style"> <section @attributes="CustomAttributes" aria-roledescription="carousel" class="@Classname">
<CascadingValue Value="this"> <CascadingValue Value="this">
<SwipeArea OnSwipe="OnSwipe" Class="mud-carousel-swipe"> <SwipeArea OnSwipe="OnSwipe" Class="carousel-swipe">
@*Selected Content*@ @*Selected Content*@
@if (ItemsSource == null) @if (ItemsSource == null)
{ {
@ -42,7 +42,7 @@
} }
@*Bullets*@ @*Bullets*@
<div class="@($"flex-grow-1 align-self-{ConvertPosition(BulletsPosition).ToDescriptionString()}")" style="z-index:3"> <div class="@($"flex-grow-1 align-self-{ConvertPosition(BulletsPosition).ToDescription()}")" style="z-index:3">
@if (ShowBullets) @if (ShowBullets)
{ {
<div class="d-flex justify-center"> <div class="d-flex justify-center">

10
src/Connected.Components/Components/Carousel/Carousel.razor.cs
Unescape View File

@ -9,15 +9,15 @@ namespace Connected.Components;
public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TData>, IAsyncDisposable public partial class Carousel<TData> : BindableItemsControlBase<CarouselItem, TData>, IAsyncDisposable
{ {
protected string Classname => protected string Classname =>
new CssBuilder("mud-carousel") new CssBuilder("carousel")
.AddClass($"mud-carousel-{(BulletsColor ?? _currentColor).ToDescriptionString()}") .AddClass($"carousel-{(BulletsColor ?? _currentColor).ToDescription()}")
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();
protected string NavigationButtonsClassName => protected string NavigationButtonsClassName =>
new CssBuilder() new CssBuilder()
.AddClass($"align-self-{ConvertPosition(ArrowsPosition).ToDescriptionString()}", !(NavigationButtonsClass ?? "").Contains("align-self-")) .AddClass($"align-self-{ConvertPosition(ArrowsPosition).ToDescription()}", !(NavigationButtonsClass ?? "").Contains("align-self-"))
.AddClass("mud-carousel-elements-rtl", RightToLeft) .AddClass("carousel-elements-rtl", RightToLeft)
.AddClass(NavigationButtonsClass) .AddClass(NavigationButtonsClass)
.Build(); .Build();

2
src/Connected.Components/Components/Carousel/CarouselItem.razor
Unescape View File

@ -4,7 +4,7 @@
@if (IsVisible) @if (IsVisible)
{ {
<div @attributes="UserAttributes" class="@Classname" style="@Style"> <div @attributes="CustomAttributes" class="@Classname">
@ChildContent @ChildContent
</div> </div>
} }

30
src/Connected.Components/Components/Carousel/CarouselItem.razor.cs
Unescape View File

@ -8,31 +8,31 @@ namespace Connected.Components;
public partial class CarouselItem : UIComponent, IDisposable public partial class CarouselItem : UIComponent, IDisposable
{ {
protected string Classname => protected string Classname =>
new CssBuilder("mud-carousel-item") new CssBuilder("carousel-item")
.AddClass($"mud-carousel-item-{Color.ToDescriptionString()}") .AddClass($"carousel-item-{Color.ToDescription()}")
.AddClass("mud-carousel-item-exit", !_disposed && Parent.LastContainer == this) .AddClass("carousel-item-exit", !_disposed && Parent.LastContainer == this)
.AddClass("mud-carousel-transition-fade-in", !_disposed && Transition == Transition.Fade && Parent.SelectedContainer == this) .AddClass("carousel-transition-fade-in", !_disposed && Transition == Transition.Fade && Parent.SelectedContainer == this)
.AddClass("mud-carousel-transition-fade-out", !_disposed && Transition == Transition.Fade && Parent.LastContainer == this) .AddClass("carousel-transition-fade-out", !_disposed && Transition == Transition.Fade && Parent.LastContainer == this)
.AddClass("mud-carousel-transition-slide-next-enter", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.SelectedContainer == this && Parent._moveNext) .AddClass("carousel-transition-slide-next-enter", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.SelectedContainer == this && Parent._moveNext)
.AddClass("mud-carousel-transition-slide-next-exit", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.LastContainer == this && Parent._moveNext) .AddClass("carousel-transition-slide-next-exit", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.LastContainer == this && Parent._moveNext)
.AddClass("mud-carousel-transition-slide-prev-enter", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.SelectedContainer == this && !Parent._moveNext) .AddClass("carousel-transition-slide-prev-enter", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.SelectedContainer == this && !Parent._moveNext)
.AddClass("mud-carousel-transition-slide-prev-exit", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.LastContainer == this && !Parent._moveNext) .AddClass("carousel-transition-slide-prev-exit", !_disposed && Transition == Transition.Slide && RightToLeft == false && Parent.LastContainer == this && !Parent._moveNext)
.AddClass("mud-carousel-transition-slide-next-rtl-enter", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.SelectedContainer == this && Parent._moveNext) .AddClass("carousel-transition-slide-next-rtl-enter", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.SelectedContainer == this && Parent._moveNext)
.AddClass("mud-carousel-transition-slide-next-rtl-exit", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.LastContainer == this && Parent._moveNext) .AddClass("carousel-transition-slide-next-rtl-exit", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.LastContainer == this && Parent._moveNext)
.AddClass("mud-carousel-transition-slide-prev-rtl-enter", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.SelectedContainer == this && !Parent._moveNext) .AddClass("carousel-transition-slide-prev-rtl-enter", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.SelectedContainer == this && !Parent._moveNext)
.AddClass("mud-carousel-transition-slide-prev-rtl-exit", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.LastContainer == this && !Parent._moveNext) .AddClass("carousel-transition-slide-prev-rtl-exit", !_disposed && Transition == Transition.Slide && RightToLeft == true && Parent.LastContainer == this && !Parent._moveNext)
.AddClass("mud-carousel-transition-none", !_disposed && Transition == Transition.None && Parent.SelectedContainer != this) .AddClass("carousel-transition-none", !_disposed && Transition == Transition.None && Parent.SelectedContainer != this)
.AddClass(CustomTransitionEnter, !_disposed && Transition == Transition.Custom && Parent.SelectedContainer == this && 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(CustomTransitionExit, !_disposed && Transition == Transition.Custom && Parent.LastContainer == this && Parent.LastContainer == this)
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();
[Parameter] [Parameter]

2
src/Connected.Components/Components/Chart/Chart.razor
Unescape View File

@ -3,7 +3,7 @@
@inherits UIComponent @inherits UIComponent
<CascadingValue Value="@this" IsFixed="true"> <CascadingValue Value="@this" IsFixed="true">
<div @attributes="UserAttributes" class="@Classname" style="@Style" dir="ltr"> <div @attributes="CustomAttributes" class="@Classname" dir="ltr">
@if (ChartType == ChartType.Donut) @if (ChartType == ChartType.Donut)
{ {
<Donut InputData="@InputData" @bind-SelectedIndex="@SelectedIndex" InputLabels="@InputLabels"></Donut> <Donut InputData="@InputData" @bind-SelectedIndex="@SelectedIndex" InputLabels="@InputLabels"></Donut>

6
src/Connected.Components/Components/Chart/Chart.razor.cs
Unescape View File

@ -36,9 +36,9 @@ public partial class Chart : UIComponent
public RenderFragment CustomGraphics { get; set; } public RenderFragment CustomGraphics { get; set; }
protected string Classname => protected string Classname =>
new CssBuilder("mud-chart") new CssBuilder("chart")
.AddClass($"mud-chart-legend-{ConvertLegendPosition(LegendPosition).ToDescriptionString()}") .AddClass($"chart-legend-{ConvertLegendPosition(LegendPosition).ToDescription()}")
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();
[CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; } [CascadingParameter(Name = "RightToLeft")] public bool RightToLeft { get; set; }

16
src/Connected.Components/Components/Chart/Charts/Bar.razor
Unescape View File

@ -2,9 +2,9 @@
@using System.Globalization; @using System.Globalization;
@inherits Chart @inherits Chart
<svg @attributes="UserAttributes" class="mud-chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350"> <svg @attributes="CustomAttributes" class="chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
<g class="mud-charts-grid"> <g class="charts-grid">
<g class="mud-charts-gridlines-yaxis"> <g class="charts-gridlines-yaxis">
@foreach (var horizontalLine in _horizontalLines) @foreach (var horizontalLine in _horizontalLines)
{ {
<path stroke="#e0e0e0" stroke-width="0.3" d="@horizontalLine.Data"></path> <path stroke="#e0e0e0" stroke-width="0.3" d="@horizontalLine.Data"></path>
@ -12,7 +12,7 @@
</g> </g>
@if (ChartParent?.ChartOptions.XAxisLines==true) @if (ChartParent?.ChartOptions.XAxisLines==true)
{ {
<g class="mud-charts-gridlines-xaxis-lines"> <g class="charts-gridlines-xaxis-lines">
@foreach (var verticalLine in _verticalLines) @foreach (var verticalLine in _verticalLines)
{ {
<path stroke="gray" stroke-width="0.3" d="@verticalLine.Data"></path> <path stroke="gray" stroke-width="0.3" d="@verticalLine.Data"></path>
@ -20,22 +20,22 @@
</g> </g>
} }
</g> </g>
<g class="mud-charts-yaxis"> <g class="charts-yaxis">
@foreach (var horizontalLineValue in _horizontalValues) @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>") @((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>
<g class="mud-charts-xaxis"> <g class="charts-xaxis">
@foreach (var verticalLineValue in _verticalValues) @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>") @((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>
<g class="mud-charts-bar-series"> <g class="charts-bar-series">
@foreach (var bar in _bars) @foreach (var bar in _bars)
{ {
<path class="mud-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> <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> </g>

8
src/Connected.Components/Components/Chart/Charts/Donut.razor
Unescape View File

@ -2,12 +2,12 @@
@using System.Globalization @using System.Globalization
@inherits Chart @inherits Chart
<svg @attributes="UserAttributes" class="mud-chart-donut" width="@ParentWidth" height="@ParentHeight" viewBox="0 0 42 42"> <svg @attributes="CustomAttributes" class="chart-donut" width="@ParentWidth" height="@ParentHeight" viewBox="0 0 42 42">
<Filters /> <Filters />
<circle class="mud-donut-ring" cx="21" cy="21" r="15.91549430918954"></circle> <circle class="donut-ring" cx="21" cy="21" r="15.91549430918954"></circle>
@foreach (var item in _circles.ToList()) @foreach (var item in _circles.ToList())
{ {
<circle class="mud-chart-serie mud-donut-segment" @onclick="() => SelectedIndex = item.Index" stroke="@(ChartParent.ChartOptions.ChartPalette.GetValue(item.Index % ChartOptions.ChartPalette.Count()))" <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)" cx="@ToS(item.CX)"
cy="@ToS(item.CY)" cy="@ToS(item.CY)"
r="@ToS(item.Radius)" r="@ToS(item.Radius)"
@ -15,7 +15,7 @@
stroke-dashoffset="@ToS(item.StrokeDashOffset)"> stroke-dashoffset="@ToS(item.StrokeDashOffset)">
</circle> </circle>
} }
<circle class="mud-donut-hole" cx="21" cy="21" r="13.4"></circle> <circle class="donut-hole" cx="21" cy="21" r="13.4"></circle>
@ChartParent?.CustomGraphics @ChartParent?.CustomGraphics
</svg> </svg>

16
src/Connected.Components/Components/Chart/Charts/Line.razor
Unescape View File

@ -2,9 +2,9 @@
@using System.Globalization; @using System.Globalization;
@inherits Chart @inherits Chart
<svg @attributes="UserAttributes" class="mud-chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350"> <svg @attributes="CustomAttributes" class="chart-line mud-ltr" width="@ChartParent?.Width" height="@ChartParent?.Height" viewBox="0 0 650 350">
<g class="mud-charts-grid"> <g class="charts-grid">
<g class="mud-charts-gridlines-yaxis"> <g class="charts-gridlines-yaxis">
@foreach (var horizontalLine in _horizontalLines) @foreach (var horizontalLine in _horizontalLines)
{ {
<path stroke="#e0e0e0" stroke-width="0.3" d="@horizontalLine.Data"></path> <path stroke="#e0e0e0" stroke-width="0.3" d="@horizontalLine.Data"></path>
@ -12,7 +12,7 @@
</g> </g>
@if (ChartParent?.ChartOptions.XAxisLines==true) @if (ChartParent?.ChartOptions.XAxisLines==true)
{ {
<g class="mud-charts-gridlines-xaxis-lines"> <g class="charts-gridlines-xaxis-lines">
@foreach (var verticalLine in _verticalLines) @foreach (var verticalLine in _verticalLines)
{ {
<path stroke="gray" stroke-width="0.3" d="@verticalLine.Data"></path> <path stroke="gray" stroke-width="0.3" d="@verticalLine.Data"></path>
@ -20,22 +20,22 @@
</g> </g>
} }
</g> </g>
<g class="mud-charts-yaxis"> <g class="charts-yaxis">
@foreach (var horizontalLineValue in _horizontalValues) @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>") @((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>
<g class="mud-charts-xaxis"> <g class="charts-xaxis">
@foreach (var verticalLineValue in _verticalValues) @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>") @((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>
<g class="mud-charts-line-series"> <g class="charts-line-series">
@foreach (var chartLine in _chartLines) @foreach (var chartLine in _chartLines)
{ {
<path class="mud-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> <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> </g>

4
src/Connected.Components/Components/Chart/Charts/Pie.razor
Unescape View File

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

6
src/Connected.Components/Components/Chart/Parts/Legend.razor
Unescape View File

@ -3,11 +3,11 @@
@if (ChartParent?.ChartOptions.DisableLegend != true) @if (ChartParent?.ChartOptions.DisableLegend != true)
{ {
<div @attributes="UserAttributes" class="mud-chart-legend"> <div @attributes="CustomAttributes" class="chart-legend">
@foreach (var item in Data) @foreach (var item in Data)
{ {
<div class="mud-chart-legend-item" @onclick=@(()=>{ if (ChartParent!=null) { ChartParent.SelectedIndex=item.Index; }}) @onclick:stopPropagation=@(ChartParent!=null)> <div class="chart-legend-item" @onclick=@(()=>{ if (ChartParent!=null) { ChartParent.SelectedIndex=item.Index; }}) @onclick:stopPropagation=@(ChartParent!=null)>
<span class="mud-chart-legend-marker" style="@($"background-color:{ChartParent.ChartOptions.ChartPalette.GetValue(item.Index % ChartOptions.ChartPalette.Count())}")"></span> <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> <TextContent Typo="Typo.body2" Inline="true">@item.Labels</TextContent>
</div> </div>
} }

4
src/Connected.Components/Components/CheckBox/CheckBox.razor
Unescape View File

@ -2,12 +2,12 @@
@inherits BooleanInput<T> @inherits BooleanInput<T>
@typeparam T @typeparam T
<InputControl Class="@Classname" Style="@Style" Error="@HasErrors" ErrorText="@GetErrorText()" Required="@Required"> <InputControl Class="@Classname" Error="@HasErrors" ErrorText="@GetErrorText()" Required="@Required">
<InputContent> <InputContent>
<label class="@LabelClassname" id="@_elementId" @onkeydown="HandleKeyDown" @onclick:stopPropagation="@StopClickPropagation"> <label class="@LabelClassname" id="@_elementId" @onkeydown="HandleKeyDown" @onclick:stopPropagation="@StopClickPropagation">
<span tabindex="0" class="@CheckBoxClassname"> <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*@ @*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="UserAttributes" type="checkbox" class="mud-checkbox-input" checked="@BoolValue" @onchange="@OnChange" disabled="@Disabled" @onclick:preventDefault="@ReadOnly" /> <input tabindex="-1" @attributes="CustomAttributes" type="checkbox" class="checkbox-input" checked="@BoolValue" @onchange="@OnChange" disabled="@Disabled" @onclick:preventDefault="@ReadOnly" />
<Icon Icon="@GetIcon()" Color="HasErrors ? ThemeColor.Error : ThemeColor.Inherit" Size="@Size" /> <Icon Icon="@GetIcon()" Color="HasErrors ? ThemeColor.Error : ThemeColor.Inherit" Size="@Size" />
</span> </span>
@if (!String.IsNullOrEmpty(Label)) @if (!String.IsNullOrEmpty(Label))

28
src/Connected.Components/Components/CheckBox/CheckBox.razor.cs
Unescape View File

@ -10,25 +10,25 @@ namespace Connected.Components;
public partial class CheckBox<T> : BooleanInput<T> public partial class CheckBox<T> : BooleanInput<T>
{ {
protected string Classname => protected string Classname =>
new CssBuilder("mud-input-control-boolean-input") new CssBuilder("input-control-boolean-input")
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();
protected string LabelClassname => protected string LabelClassname =>
new CssBuilder("mud-checkbox") new CssBuilder("checkbox")
.AddClass($"mud-disabled", Disabled) .AddClass($"disabled", Disabled)
.AddClass($"mud-readonly", ReadOnly) .AddClass($"readonly", ReadOnly)
.AddClass(LabelPosition == LabelPosition.End ? "mud-ltr" : "mud-rtl", true) .AddClass(LabelPosition == LabelPosition.End ? "ltr" : "rtl", true)
.Build(); .Build();
protected string CheckBoxClassname => protected string CheckBoxClassname =>
new CssBuilder("mud-button-root mud-icon-button") new CssBuilder("button-root mud-icon-button")
.AddClass($"mud-{Color.ToDescriptionString()}-text hover:mud-{Color.ToDescriptionString()}-hover", UnCheckedColor == null || (UnCheckedColor != null && BoolValue == true)) .AddClass($"{Color.ToDescription()}-text hover:mud-{Color.ToDescription()}-hover", UnCheckedColor == null || (UnCheckedColor != null && BoolValue == true))
.AddClass($"mud-{UnCheckedColor?.ToDescriptionString()}-text hover:mud-{UnCheckedColor?.ToDescriptionString()}-hover", UnCheckedColor != null && BoolValue == false) .AddClass($"{UnCheckedColor?.ToDescription()}-text hover:mud-{UnCheckedColor?.ToDescription()}-hover", UnCheckedColor != null && BoolValue == false)
.AddClass($"mud-checkbox-dense", Dense) .AddClass($"checkbox-dense", Dense)
.AddClass($"mud-ripple mud-ripple-checkbox", !DisableRipple && !ReadOnly && !Disabled) .AddClass($"ripple mud-ripple-checkbox", !DisableRipple && !ReadOnly && !Disabled)
.AddClass($"mud-disabled", Disabled) .AddClass($"disabled", Disabled)
.AddClass($"mud-readonly", ReadOnly) .AddClass($"readonly", ReadOnly)
.Build(); .Build();
/// <summary> /// <summary>
@ -225,7 +225,7 @@ public partial class CheckBox<T> : BooleanInput<T>
await _keyInterceptor.Connect(_elementId, new KeyInterceptorOptions() await _keyInterceptor.Connect(_elementId, new KeyInterceptorOptions()
{ {
//EnableLogging = true, //EnableLogging = true,
TargetClass = "mud-button-root", TargetClass = "button-root",
Keys = { Keys = {
new KeyOptions { Key=" ", PreventDown = "key+none", PreventUp = "key+none" }, // prevent scrolling page new KeyOptions { Key=" ", PreventDown = "key+none", PreventUp = "key+none" }, // prevent scrolling page
new KeyOptions { Key="Enter", PreventDown = "key+none" }, new KeyOptions { Key="Enter", PreventDown = "key+none" },

10
src/Connected.Components/Components/Chip/Chip.razor
Unescape View File

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

24
src/Connected.Components/Components/Chip/Chip.razor.cs
Unescape View File

@ -16,16 +16,16 @@ public partial class Chip : UIComponent, IDisposable
[Inject] public IJsApiService JsApiService { get; set; } [Inject] public IJsApiService JsApiService { get; set; }
protected string Classname => protected string Classname =>
new CssBuilder("mud-chip") new CssBuilder("chip")
.AddClass($"mud-chip-{GetVariant().ToDescriptionString()}") .AddClass($"chip-{GetVariant().ToDescription()}")
.AddClass($"mud-chip-size-{Size.ToDescriptionString()}") .AddClass($"chip-size-{Size.ToDescription()}")
.AddClass($"mud-chip-color-{GetColor().ToDescriptionString()}") .AddClass($"chip-color-{GetColor().ToDescription()}")
.AddClass("mud-clickable", !ChipSet?.ReadOnly ?? OnClick.HasDelegate) .AddClass("clickable", !ChipSet?.ReadOnly ?? OnClick.HasDelegate)
.AddClass("mud-ripple", !ChipSet?.ReadOnly ?? OnClick.HasDelegate && !DisableRipple) .AddClass("ripple", !ChipSet?.ReadOnly ?? OnClick.HasDelegate && !DisableRipple)
.AddClass("mud-chip-label", Label) .AddClass("chip-label", Label)
.AddClass("mud-disabled", Disabled) .AddClass("disabled", Disabled)
.AddClass("mud-chip-selected", IsSelected) .AddClass("chip-selected", IsSelected)
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();
//Cannot test the get variant (last line) //Cannot test the get variant (last line)
@ -88,7 +88,7 @@ public partial class Chip : UIComponent, IDisposable
public ThemeColor SelectedColor { get; set; } = ThemeColor.Inherit; public ThemeColor SelectedColor { get; set; } = ThemeColor.Inherit;
/// <summary> /// <summary>
/// Avatar Icon, Overrides the regular Icon if set. /// Avatar Glyph, Overrides the regular Glyph if set.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Chip.Behavior)] [Category(CategoryTypes.Chip.Behavior)]
@ -116,7 +116,7 @@ public partial class Chip : UIComponent, IDisposable
public bool Disabled { get; set; } public bool Disabled { get; set; }
/// <summary> /// <summary>
/// Sets the Icon to use. /// Sets the Glyph to use.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Chip.Behavior)] [Category(CategoryTypes.Chip.Behavior)]

2
src/Connected.Components/Components/ChipSet/ChipSet.razor
Unescape View File

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

4
src/Connected.Components/Components/ChipSet/ChipSet.razor.cs
Unescape View File

@ -8,8 +8,8 @@ public partial class ChipSet : UIComponent, IDisposable
{ {
protected string Classname => protected string Classname =>
new CssBuilder("mud-chipset") new CssBuilder("chipset")
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();
/// <summary> /// <summary>

6
src/Connected.Components/Components/Collapse/Collapse.razor
Unescape View File

@ -2,9 +2,9 @@
@inherits UIComponent @inherits UIComponent
@using System.Globalization; @using System.Globalization;
<div @onanimationend="EventUtil.AsNonRenderingEventHandler(AnimationEnd)" @attributes="UserAttributes" class="@Classname" style="@Stylename"> <div @onanimationend="EventUtil.AsNonRenderingEventHandler(AnimationEnd)" @attributes="CustomAttributes" class="@Classname" style="@Stylename">
<div @ref="_wrapper" class="mud-collapse-wrapper"> <div @ref="_wrapper" class="collapse-wrapper">
<div class="mud-collapse-wrapper-inner"> <div class="collapse-wrapper-inner">
@ChildContent @ChildContent
</div> </div>
</div> </div>

11
src/Connected.Components/Components/Collapse/Collapse.razor.cs
Unescape View File

@ -23,15 +23,14 @@ public partial class Collapse : UIComponent
.AddStyle("height", "auto", _state == CollapseState.Entered) .AddStyle("height", "auto", _state == CollapseState.Entered)
.AddStyle("height", _height.ToPx(), _state is CollapseState.Entering or CollapseState.Exiting) .AddStyle("height", _height.ToPx(), _state is CollapseState.Entering or CollapseState.Exiting)
.AddStyle("animation-duration", $"{CalculatedAnimationDuration.ToString("#.##", CultureInfo.InvariantCulture)}s", _state == CollapseState.Entering) .AddStyle("animation-duration", $"{CalculatedAnimationDuration.ToString("#.##", CultureInfo.InvariantCulture)}s", _state == CollapseState.Entering)
.AddStyle(Style)
.Build(); .Build();
protected string Classname => protected string Classname =>
new CssBuilder("mud-collapse-container") new CssBuilder("collapse-container")
.AddClass($"mud-collapse-entering", _state == CollapseState.Entering) .AddClass($"collapse-entering", _state == CollapseState.Entering)
.AddClass($"mud-collapse-entered", _state == CollapseState.Entered) .AddClass($"collapse-entered", _state == CollapseState.Entered)
.AddClass($"mud-collapse-exiting", _state == CollapseState.Exiting) .AddClass($"collapse-exiting", _state == CollapseState.Exiting)
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();
/// <summary> /// <summary>

62
src/Connected.Components/Components/ColorPicker/ColorPicker.razor
Unescape View File

@ -9,7 +9,7 @@
protected override RenderFragment PickerContent => protected override RenderFragment PickerContent =>
@<CascadingValue Value="@this" IsFixed="true"> @<CascadingValue Value="@this" IsFixed="true">
<PickerToolbar DisableToolbar="@DisableToolbar" Class="mud-picker-color-toolbar"> <PickerToolbar DisableToolbar="@DisableToolbar" Class="picker-color-toolbar">
@if (PickerVariant != PickerVariant.Static) @if (PickerVariant != PickerVariant.Static)
{ {
<IconButton Class="pa-1 mud-close-picker-button" Size="Size.Small" Color="ThemeColor.Inherit" Icon="@CloseIcon" OnClick="@GetEventCallback()" /> <IconButton Class="pa-1 mud-close-picker-button" Size="Size.Small" Color="ThemeColor.Inherit" Icon="@CloseIcon" OnClick="@GetEventCallback()" />
@ -19,19 +19,19 @@
<IconButton Class="pa-1 mx-1" Size="Size.Small" Color="GetButtonColor(ColorPickerView.Grid)" Icon="@GridIcon" OnClick="(() => ChangeView(ColorPickerView.Grid))" /> <IconButton Class="pa-1 mx-1" Size="Size.Small" Color="GetButtonColor(ColorPickerView.Grid)" Icon="@GridIcon" OnClick="(() => ChangeView(ColorPickerView.Grid))" />
<IconButton Class="pa-1" Size="Size.Small" Color="GetButtonColor(ColorPickerView.Palette)" Icon="@PaletteIcon" OnClick="(() => ChangeView(ColorPickerView.Palette))" /> <IconButton Class="pa-1" Size="Size.Small" Color="GetButtonColor(ColorPickerView.Palette)" Icon="@PaletteIcon" OnClick="(() => ChangeView(ColorPickerView.Palette))" />
</PickerToolbar> </PickerToolbar>
<PickerContent Class="mud-picker-color-content"> <PickerContent Class="picker-color-content">
@if (!DisableColorField) @if (!DisableColorField)
{ {
<div class="mud-picker-color-picker"> <div class="picker-color-picker">
@if (_activeColorPickerView == ColorPickerView.Spectrum) @if (_activeColorPickerView == ColorPickerView.Spectrum)
{ {
<div class="mud-picker-color-overlay" style="@($"background-color: {_baseColor.ToString(ColorOutputFormats.RGB)}")"> <div class="picker-color-overlay" style="@($"background-color: {_baseColor.ToString(ColorOutputFormats.RGB)}")">
<div class="mud-picker-color-overlay mud-picker-color-overlay-white"> <div class="picker-color-overlay mud-picker-color-overlay-white">
<div class="mud-picker-color-overlay mud-picker-color-overlay-black"> <div class="picker-color-overlay mud-picker-color-overlay-black">
<div class="mud-picker-color-overlay" id="@_id" @onclick="OnColorOverlayClick"> <div class="picker-color-overlay" id="@_id" @onclick="OnColorOverlayClick">
<svg class="mud-picker-color-selector" height="26" width="26" style="transform: @GetSelectorLocation()" @onclick="OnSelectorClicked" @onclick:stopPropagation="true"> <svg class="picker-color-selector" height="26" width="26" style="transform: @GetSelectorLocation()" @onclick="OnSelectorClicked" @onclick:stopPropagation="true">
<defs> <defs>
<filter id="mud-picker-color-selector-shadow" x="-50%" y="-50%" width="200%" height="200%"> <filter id="picker-color-selector-shadow" x="-50%" y="-50%" width="200%" height="200%">
<feGaussianBlur in="SourceAlpha" stdDeviation="1" /> <feGaussianBlur in="SourceAlpha" stdDeviation="1" />
<feOffset dx="0" dy="5" result="offsetblur" /> <feOffset dx="0" dy="5" result="offsetblur" />
<feOffset dx="0" dy="-5" result="offsetblur" /> <feOffset dx="0" dy="-5" result="offsetblur" />
@ -48,7 +48,7 @@
} }
@if (_activeColorPickerView is ColorPickerView.Grid or ColorPickerView.GridCompact) @if (_activeColorPickerView is ColorPickerView.Grid or ColorPickerView.GridCompact)
{ {
<div class="mud-picker-color-grid"> <div class="picker-color-grid">
@foreach (var item in _gridList) @foreach (var item in _gridList)
{ {
<div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div> <div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div>
@ -61,32 +61,32 @@
{ {
@if (!DisableSliders || !DisableInputs || !DisablePreview) @if (!DisableSliders || !DisableInputs || !DisablePreview)
{ {
<div class="mud-picker-color-controls"> <div class="picker-color-controls">
@if (!DisableSliders || !DisablePreview) @if (!DisableSliders || !DisablePreview)
{ {
<div class="mud-picker-color-controls-row"> <div class="picker-color-controls-row">
@if (!DisablePreview) @if (!DisablePreview)
{ {
<div class="mud-picker-color-dot mud-picker-color-dot-current mud-ripple" @onclick="ToggleCollection"> <div class="picker-color-dot mud-picker-color-dot-current mud-ripple" @onclick="ToggleCollection">
<div class="mud-picker-color-fill" style="@($"background: {_color.ToString(ColorOutputFormats.RGBA)};")"></div> <div class="picker-color-fill" style="@($"background: {_color.ToString(ColorOutputFormats.RGBA)};")"></div>
</div> </div>
} }
@if (!DisableSliders && !_collectionOpen) @if (!DisableSliders && !_collectionOpen)
{ {
<div class="mud-picker-color-sliders"> <div class="picker-color-sliders">
@if (_activeColorPickerView != ColorPickerView.Grid) @if (_activeColorPickerView != ColorPickerView.Grid)
{ {
<Slider Class="mud-picker-color-slider hue" dir="ltr" T="int" Value="(int)_color.H" ValueChanged="UpdateBaseColorSlider" Step="1" Min="0" Max="360" /> <Slider Class="picker-color-slider hue" dir="ltr" T="int" Value="(int)_color.H" ValueChanged="UpdateBaseColorSlider" Step="1" Min="0" Max="360" />
} }
@if (!DisableAlpha) @if (!DisableAlpha)
{ {
<Slider Class="mud-picker-color-slider alpha" Value="_color.A" ValueChanged="SetAlpha" T="int" Min="0" Max="255" Step="1" Style="@AlphaSliderStyle" /> <Slider Class="picker-color-slider alpha" Value="_color.A" ValueChanged="SetAlpha" T="int" Min="0" Max="255" Step="1" Style="@AlphaSliderStyle" />
} }
</div> </div>
} }
@if (_collectionOpen) @if (_collectionOpen)
{ {
<div class="mud-picker-color-collection"> <div class="picker-color-collection">
@foreach (var item in Palette.Take(5)) @foreach (var item in Palette.Take(5))
{ {
<div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div> <div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div>
@ -97,22 +97,22 @@
} }
@if (!DisableInputs) @if (!DisableInputs)
{ {
<div class="mud-picker-color-controls-row"> <div class="picker-color-controls-row">
<div class="mud-picker-color-inputs"> <div class="picker-color-inputs">
@switch (ColorPickerMode) @switch (ColorPickerMode)
{ {
case ColorPickerMode.RGB: case ColorPickerMode.RGB:
<NumericField Value="_color.R" T="int" ValueChanged="SetR" Class="mud-picker-color-inputfield" HelperText="R" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" /> <NumericField Value="_color.R" T="int" ValueChanged="SetR" Class="picker-color-inputfield" HelperText="R" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
<NumericField Value="_color.G" T="int" ValueChanged="SetG" Class="mud-picker-color-inputfield" HelperText="G" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" /> <NumericField Value="_color.G" T="int" ValueChanged="SetG" Class="picker-color-inputfield" HelperText="G" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
<NumericField Value="_color.B" T="int" ValueChanged="SetB" Class="mud-picker-color-inputfield" HelperText="B" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" /> <NumericField Value="_color.B" T="int" ValueChanged="SetB" Class="picker-color-inputfield" HelperText="B" Min="0" Max="255" Variant="Variant.Outlined" HideSpinButtons="true" />
break; break;
case ColorPickerMode.HSL: case ColorPickerMode.HSL:
<NumericField Value="@_color.H" T="double" ValueChanged="SetH" Class="mud-picker-color-inputfield" HelperText="H" Step="1" Min="0" Max="360" Variant="Variant.Outlined" HideSpinButtons="true" /> <NumericField Value="@_color.H" T="double" ValueChanged="SetH" Class="picker-color-inputfield" HelperText="H" Step="1" Min="0" Max="360" Variant="Variant.Outlined" HideSpinButtons="true" />
<NumericField Value="@_color.S" T="double" ValueChanged="SetS" Class="mud-picker-color-inputfield" HelperText="S" Step="0.01" Min="0" Max="100" Variant="Variant.Outlined" HideSpinButtons="true" /> <NumericField Value="@_color.S" T="double" ValueChanged="SetS" Class="picker-color-inputfield" HelperText="S" Step="0.01" Min="0" Max="100" Variant="Variant.Outlined" HideSpinButtons="true" />
<NumericField Value="@_color.L" T="double" ValueChanged="SetL" Class="mud-picker-color-inputfield" HelperText="L" Step="0.01" Min="0" Max="100" Variant="Variant.Outlined" HideSpinButtons="true" /> <NumericField Value="@_color.L" T="double" ValueChanged="SetL" Class="picker-color-inputfield" HelperText="L" Step="0.01" Min="0" Max="100" Variant="Variant.Outlined" HideSpinButtons="true" />
break; break;
case ColorPickerMode.HEX: case ColorPickerMode.HEX:
<TextField Value="@GetColorTextValue()" ValueChanged="SetInputString" T="string" Class="mud-picker-color-inputfield" Variant="Variant.Outlined" MaxLength="@GetHexColorInputMaxLength()" HelperText="HEX" /> <TextField Value="@GetColorTextValue()" ValueChanged="SetInputString" T="string" Class="picker-color-inputfield" Variant="Variant.Outlined" MaxLength="@GetHexColorInputMaxLength()" HelperText="HEX" />
break; break;
default: default:
break; break;
@ -120,12 +120,12 @@
@if (!DisableAlpha && ColorPickerMode != ColorPickerMode.HEX) @if (!DisableAlpha && ColorPickerMode != ColorPickerMode.HEX)
{ {
<NumericField Value="@( Math.Round(_color.A / 255.0, 2))" T="double" ValueChanged="SetAlpha" Class="mud-picker-color-inputfield input-field-alpha" HelperText="A" Min="0" Max="1" Step="0.01" Variant="Variant.Outlined" HideSpinButtons="true" /> <NumericField Value="@( Math.Round(_color.A / 255.0, 2))" T="double" ValueChanged="SetAlpha" Class="picker-color-inputfield input-field-alpha" HelperText="A" Min="0" Max="1" Step="0.01" Variant="Variant.Outlined" HideSpinButtons="true" />
} }
</div> </div>
@if (!DisableModeSwitch) @if (!DisableModeSwitch)
{ {
<div class="mud-picker-control-switch"> <div class="picker-control-switch">
<IconButton OnClick="ChangeMode" Icon="@ImportExportIcon" Class="pa-1 me-n1"></IconButton> <IconButton OnClick="ChangeMode" Icon="@ImportExportIcon" Class="pa-1 me-n1"></IconButton>
</div> </div>
} }
@ -135,8 +135,8 @@
} }
@if (_activeColorPickerView == ColorPickerView.Palette) @if (_activeColorPickerView == ColorPickerView.Palette)
{ {
<div class="mud-picker-color-view"> <div class="picker-color-view">
<div class="mud-picker-color-view-collection"> <div class="picker-color-view-collection">
@foreach (var item in Palette) @foreach (var item in Palette)
{ {
<div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div> <div class="@GetColorDotClass(item)" style="@($"background: {item.ToString(ColorOutputFormats.RGBA)};")" @onclick="@GetSelectPaletteColorCallback(item)"></div>

2
src/Connected.Components/Components/ColorPicker/ColorPicker.razor.cs
Unescape View File

@ -535,7 +535,7 @@ public partial class ColorPicker : Picker<Color>, IAsyncDisposable
private EventCallback<MouseEventArgs> GetSelectPaletteColorCallback(Color color) => new EventCallbackFactory().Create(this, (MouseEventArgs e) => SelectPaletteColor(color)); private EventCallback<MouseEventArgs> GetSelectPaletteColorCallback(Color color) => new EventCallbackFactory().Create(this, (MouseEventArgs e) => SelectPaletteColor(color));
private ThemeColor GetButtonColor(ColorPickerView view) => _activeColorPickerView == view ? ThemeColor.Primary : ThemeColor.Inherit; private ThemeColor GetButtonColor(ColorPickerView view) => _activeColorPickerView == view ? ThemeColor.Primary : ThemeColor.Inherit;
private string GetColorDotClass(Color color) => new CssBuilder("mud-picker-color-dot").AddClass("selected", color == Value).ToString(); private string GetColorDotClass(Color color) => new CssBuilder("picker-color-dot").AddClass("selected", color == Value).ToString();
private string AlphaSliderStyle => new StyleBuilder().AddStyle($"background-image: linear-gradient(to {(RightToLeft ? "left" : "right")}, transparent, {_color.ToString(ColorOutputFormats.RGB)})").Build(); private string AlphaSliderStyle => new StyleBuilder().AddStyle($"background-image: linear-gradient(to {(RightToLeft ? "left" : "right")}, transparent, {_color.ToString(ColorOutputFormats.RGB)})").Build();
#endregion #endregion

2
src/Connected.Components/Components/Container/Container.razor
Unescape View File

@ -2,6 +2,6 @@
@inherits UIComponent @inherits UIComponent
<div @attributes="UserAttributes" class="@Classname" style="@Style"> <div @attributes="CustomAttributes" class="@CompiledClassList.Build()" style="@CompiledStyleList.Build()">
@ChildContent @ChildContent
</div> </div>

54
src/Connected.Components/Components/Container/Container.razor.cs
Unescape View File

@ -1,36 +1,54 @@
using Connected.Annotations; using Connected.Utilities;
using Connected.Extensions;
using Connected.Utilities;
using Microsoft.AspNetCore.Components; using Microsoft.AspNetCore.Components;
namespace Connected.Components; namespace Connected.Components;
public partial class Container : UIComponent public partial class Container : UIComponent
{ {
protected string Classname =>
new CssBuilder("container") #region Event callbacks
.AddClass($"container-fixed", Fixed) #endregion
.AddClass($"container-maxwidth-{MaxWidth.ToDescriptionString()}", !Fixed)
.AddClass(Class) #region Content placeholders
.Build();
/// <summary> /// <summary>
/// Set the max-width to match the min-width of the current breakpoint. This is useful if you'd prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport. It's fluid by default. /// Child content of component.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Container.Behavior)] public RenderFragment ChildContent { get; set; }
public bool Fixed { get; set; } = false;
#endregion
#region Styling properties
private CssBuilder CompiledClassList
{
get
{
return new CssBuilder("container")
.AddClass(ClassList);
}
}
protected StyleBuilder CompiledStyleList
{
get
{
return new StyleBuilder()
.AddStyle(StyleList);
}
}
/// <summary> /// <summary>
/// Determine the max-width of the container. The container width grows with the size of the screen. Set to false to disable maxWidth. /// A space separated list of class names, added on top of the default class list.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Container.Behavior)] public string? ClassList { get; set; }
public MaxWidth MaxWidth { get; set; } = MaxWidth.Large;
/// <summary> /// <summary>
/// Child content of component. /// A space separated list of class names, added on top of the default class list.
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Container.Behavior)] public string? StyleList { get; set; }
public RenderFragment ChildContent { get; set; }
#endregion
} }

4
src/Connected.Components/Components/DataGrid/Cell.cs
Unescape View File

@ -65,8 +65,8 @@ internal class Cell<T>
{ {
return new CssBuilder(_column.CellClassFunc?.Invoke(_item)) return new CssBuilder(_column.CellClassFunc?.Invoke(_item))
.AddClass(_column.CellClass) .AddClass(_column.CellClass)
.AddClass("mud-table-cell") .AddClass("table-cell")
.AddClass("mud-table-cell-hide", _column.HideSmall) .AddClass("table-cell-hide", _column.HideSmall)
.AddClass("sticky-left", _column.StickyLeft) .AddClass("sticky-left", _column.StickyLeft)
.AddClass("sticky-right", _column.StickyRight) .AddClass("sticky-right", _column.StickyRight)
.AddClass($"edit-mode-cell", _dataGrid.EditMode == DataGridEditMode.Cell && _column.IsEditable) .AddClass($"edit-mode-cell", _dataGrid.EditMode == DataGridEditMode.Cell && _column.IsEditable)

16
src/Connected.Components/Components/DataGrid/Column.cs
Unescape View File

@ -151,25 +151,25 @@ public partial class Column<T> : UIComponent
public Action ColumnStateHasChanged { get; set; } public Action ColumnStateHasChanged { get; set; }
internal string headerClassname => internal string headerClassname =>
new CssBuilder("mud-table-cell") new CssBuilder("table-cell")
.AddClass("mud-table-cell-hide", HideSmall) .AddClass("table-cell-hide", HideSmall)
.AddClass("sticky-left", StickyLeft) .AddClass("sticky-left", StickyLeft)
.AddClass("sticky-right", StickyRight) .AddClass("sticky-right", StickyRight)
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();
internal string cellClassname; internal string cellClassname;
//internal string cellClassname => //internal string cellClassname =>
// new CssBuilder("mud-table-cell") // new CssBuilder("table-cell")
// .AddClass("mud-table-cell-hide", HideSmall) // .AddClass("table-cell-hide", HideSmall)
// .AddClass("sticky-right", StickyRight) // .AddClass("sticky-right", StickyRight)
// .AddClass(Class) // .AddClass(Class)
// .Build(); // .Build();
internal string footerClassname => internal string footerClassname =>
new CssBuilder("mud-table-cell") new CssBuilder("table-cell")
.AddClass("mud-table-cell-hide", HideSmall) .AddClass("table-cell-hide", HideSmall)
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();
internal bool grouping; internal bool grouping;

50
src/Connected.Components/Components/DataGrid/DataGrid.razor
Unescape View File

@ -6,12 +6,12 @@
<CascadingValue IsFixed="true" Value="this">@Columns</CascadingValue> <CascadingValue IsFixed="true" Value="this">@Columns</CascadingValue>
<CascadingValue IsFixed="true" Value="this"> <CascadingValue IsFixed="true" Value="this">
<div @attributes="UserAttributes" class="@_classname" style="@_style"> <div @attributes="CustomAttributes" class="@_classname" style="@_style">
@if (Items != null || ServerData != null) @if (Items != null || ServerData != null)
{ {
@if (ToolBarContent != null) @if (ToolBarContent != null)
{ {
<ToolBar Class="mud-table-toolbar"> <ToolBar Class="table-toolbar">
@ToolBarContent @ToolBarContent
@if (ShowMenuIcon) @if (ShowMenuIcon)
{ {
@ -24,14 +24,14 @@
@if (ShowMenuIcon) @if (ShowMenuIcon)
{ {
@*Add the default toolbar.*@ @*Add the default toolbar.*@
<ToolBar Class="mud-table-toolbar"> <ToolBar Class="table-toolbar">
<Spacer /> <Spacer />
@ToolbarMenu(this) @ToolbarMenu(this)
</ToolBar> </ToolBar>
} }
} }
<div @ref=_gridElement class="@_tableClass" style="@_tableStyle"> <div @ref=_gridElement class="@_tableClass" style="@_tableStyle">
<table class="mud-table-root"> <table class="table-root">
@if (ColGroup != null) @if (ColGroup != null)
{ {
<colgroup> <colgroup>
@ -42,7 +42,7 @@
<CascadingValue Name="IsOnlyHeader" IsFixed="true" Value="true"> <CascadingValue Name="IsOnlyHeader" IsFixed="true" Value="true">
@Header @Header
</CascadingValue> </CascadingValue>
<tr class="mud-table-row"> <tr class="table-row">
@foreach (var column in RenderedColumns) @foreach (var column in RenderedColumns)
{ {
<HeaderCell SortDirection="@(GetColumnSortDirection(column.Field))" T="T" Column="@column"></HeaderCell> <HeaderCell SortDirection="@(GetColumnSortDirection(column.Field))" T="T" Column="@column"></HeaderCell>
@ -60,7 +60,7 @@
@Filter(f, null) @Filter(f, null)
} }
</Grid> </Grid>
<Button Class="mt-2" StartIcon="@Icons.Material.Filled.Add" OnClick="@AddFilter" Color="@ThemeColor.Primary">Add Filter</Button> <Button Class="mt-2" StartIcon="@Icons.Material.Filled.Add" Clicked="@AddFilter" Color="@ThemeColor.Primary">Add Filter</Button>
@if (ServerData != null) @if (ServerData != null)
{ {
<Button Class="mt-2" StartIcon="@Icons.Material.Filled.Add" OnClick="@ApplyFilters" Color="@ThemeColor.Primary">Apply</Button> <Button Class="mt-2" StartIcon="@Icons.Material.Filled.Add" OnClick="@ApplyFilters" Color="@ThemeColor.Primary">Apply</Button>
@ -96,7 +96,7 @@
} }
@if (Filterable && FilterMode == DataGridFilterMode.ColumnFilterRow) @if (Filterable && FilterMode == DataGridFilterMode.ColumnFilterRow)
{ {
<tr class="mud-table-row"> <tr class="table-row">
@foreach (var column in RenderedColumns) @foreach (var column in RenderedColumns)
{ {
<FilterHeaderCell T="T" Column="@column" /> <FilterHeaderCell T="T" Column="@column" />
@ -104,12 +104,12 @@
</tr> </tr>
} }
</thead> </thead>
<tbody class="mud-table-body"> <tbody class="table-body">
@if (Loading) @if (Loading)
{ {
<tr> <tr>
<td colspan="1000" class="mud-table-loading"> <td colspan="1000" class="table-loading">
<ProgressLinear Color="@LoadingProgressColor" Class="mud-table-loading-progress" Indeterminate="true" /> <ProgressLinear Color="@LoadingProgressColor" Class="table-loading-progress" Indeterminate="true" />
</td> </td>
</tr> </tr>
} }
@ -121,13 +121,13 @@
{ {
foreach (var g in _groups) foreach (var g in _groups)
{ {
<tr class="mud-table-row"> <tr class="table-row">
@{ var groupClass = new CssBuilder(GroupClass).AddClass(GroupClassFunc?.Invoke(g)).Build(); } @{ var groupClass = new CssBuilder(GroupClass).AddClass(GroupClassFunc?.Invoke(g)).Build(); }
@{ var groupStyle = new StyleBuilder().AddStyle(GroupStyle).AddStyle(GroupStyleFunc?.Invoke(g)).Build(); } @{ var groupStyle = new StyleBuilder().AddStyle(GroupStyle).AddStyle(GroupStyleFunc?.Invoke(g)).Build(); }
<td class="mud-table-cell @groupClass" colspan="1000" style="background-color:var(--mud-palette-background-grey);@groupStyle"> <td class="table-cell @groupClass" colspan="1000" style="background-color:var(--mud-palette-background-grey);@groupStyle">
<IconButton <IconButton
Class="mud-table-row-expander" Class="table-row-expander"
Icon="@(g.IsExpanded ? Icons.Material.Filled.ExpandMore : Icons.Material.Filled.ChevronRight)" Icon="@(g.IsExpanded ? Icons.Material.Filled.ExpandMore : Icons.Material.Filled.ChevronRight)"
OnClick="@(() => ToggleGroupExpansion(g))" /> OnClick="@(() => ToggleGroupExpansion(g))" />
@ -149,7 +149,7 @@
@{ var rowClass = new CssBuilder(RowClass).AddClass(RowClassFunc?.Invoke(item, rowIndex)).Build(); } @{ var rowClass = new CssBuilder(RowClass).AddClass(RowClassFunc?.Invoke(item, rowIndex)).Build(); }
@{ var rowStyle = new StyleBuilder().AddStyle(RowStyle).AddStyle(RowStyleFunc?.Invoke(item, rowIndex)).Build(); } @{ var rowStyle = new StyleBuilder().AddStyle(RowStyle).AddStyle(RowStyleFunc?.Invoke(item, rowIndex)).Build(); }
@{ var tmpRowIndex = rowIndex; } @{ var tmpRowIndex = rowIndex; }
<tr class="mud-table-row @rowClass" Style="@rowStyle" @key="item" @onclick="@((args) => OnRowClickedAsync(args, item, tmpRowIndex))"> <tr class="table-row @rowClass" Style="@rowStyle" @key="item" @onclick="@((args) => OnRowClickedAsync(args, item, tmpRowIndex))">
<CascadingValue Value="@Validator" IsFixed="true"> <CascadingValue Value="@Validator" IsFixed="true">
@foreach (var column in RenderedColumns) @foreach (var column in RenderedColumns)
{ {
@ -162,8 +162,8 @@
</tr> </tr>
@if (ChildRowContent != null && (_openHierarchies.Contains(item) || !hasHierarchyColumn)) @if (ChildRowContent != null && (_openHierarchies.Contains(item) || !hasHierarchyColumn))
{ {
<tr class="mud-table-row"> <tr class="table-row">
<td class="mud-table-cell" colspan="1000"> <td class="table-cell" colspan="1000">
@ChildRowContent(new CellContext<T>(this, item)) @ChildRowContent(new CellContext<T>(this, item))
</td> </td>
</tr> </tr>
@ -171,7 +171,7 @@
@{ rowIndex++; } @{ rowIndex++; }
</Virtualize> </Virtualize>
@*Group Footer*@ @*Group Footer*@
<tr class="mud-table-row"> <tr class="table-row">
@FooterCells(g.Grouping.ToList()) @FooterCells(g.Grouping.ToList())
</tr> </tr>
} }
@ -184,7 +184,7 @@
@{ var rowClass = new CssBuilder(RowClass).AddClass(RowClassFunc?.Invoke(item, rowIndex)).Build(); } @{ var rowClass = new CssBuilder(RowClass).AddClass(RowClassFunc?.Invoke(item, rowIndex)).Build(); }
@{ var rowStyle = new StyleBuilder().AddStyle(RowStyle).AddStyle(RowStyleFunc?.Invoke(item, rowIndex)).Build(); } @{ var rowStyle = new StyleBuilder().AddStyle(RowStyle).AddStyle(RowStyleFunc?.Invoke(item, rowIndex)).Build(); }
@{ var tmpRowIndex = rowIndex; } @{ var tmpRowIndex = rowIndex; }
<tr class="mud-table-row @rowClass" Style="@rowStyle" @key="item" @onclick="@((args) => OnRowClickedAsync(args, item, tmpRowIndex))"> <tr class="table-row @rowClass" Style="@rowStyle" @key="item" @onclick="@((args) => OnRowClickedAsync(args, item, tmpRowIndex))">
<CascadingValue Value="@Validator" IsFixed="true"> <CascadingValue Value="@Validator" IsFixed="true">
@foreach (var column in RenderedColumns) @foreach (var column in RenderedColumns)
{ {
@ -197,8 +197,8 @@
</tr> </tr>
@if (ChildRowContent != null && (_openHierarchies.Contains(item) || !hasHierarchyColumn)) @if (ChildRowContent != null && (_openHierarchies.Contains(item) || !hasHierarchyColumn))
{ {
<tr class="mud-table-row"> <tr class="table-row">
<td class="mud-table-cell" colspan="1000"> <td class="table-cell" colspan="1000">
@ChildRowContent(new CellContext<T>(this, item)) @ChildRowContent(new CellContext<T>(this, item))
</td> </td>
</tr> </tr>
@ -210,7 +210,7 @@
else if(Loading ? LoadingContent != null : NoRecordsContent != null) else if(Loading ? LoadingContent != null : NoRecordsContent != null)
{ {
<tr> <tr>
<th colspan="1000" class="mud-table-empty-row"> <th colspan="1000" class="table-empty-row">
<div Class="my-3"> <div Class="my-3">
@if(Loading) @if(Loading)
{ {
@ -226,7 +226,7 @@
} }
</tbody> </tbody>
<tfoot class="@_footClassname"> <tfoot class="@_footClassname">
<tr class="mud-table-row"> <tr class="table-row">
@FooterCells(resolvedPageItems) @FooterCells(resolvedPageItems)
</tr> </tr>
</tfoot> </tfoot>
@ -234,7 +234,7 @@
</div> </div>
@if (PagerContent != null) @if (PagerContent != null)
{ {
<div class="mud-table-pagination"> <div class="table-pagination">
@PagerContent @PagerContent
</div> </div>
} }
@ -273,8 +273,8 @@
</Form> </Form>
</DialogContent> </DialogContent>
<DialogActions> <DialogActions>
<Button Variant="Variant.Filled" Color="ThemeColor.Default" OnClick="@CancelEditingItemAsync" Class="px-10">Cancel</Button> <Button Variant="Variant.Filled" Color="ThemeColor.Default" Clicked="@CancelEditingItemAsync" Class="px-10">Cancel</Button>
<Button Variant="Variant.Filled" Color="ThemeColor.Primary" OnClick="@CommitItemChangesAsync" Class="px-10">Save</Button> <Button Variant="Variant.Filled" Color="ThemeColor.Primary" Clicked="@CommitItemChangesAsync" Class="px-10">Save</Button>
</DialogActions> </DialogActions>
</Dialog> </Dialog>
</CascadingValue> </CascadingValue>

41
src/Connected.Components/Components/DataGrid/DataGrid.razor.cs
Unescape View File

@ -29,30 +29,29 @@ public partial class DataGrid<T> : UIComponent
private PropertyInfo[] _properties = typeof(T).GetProperties(); private PropertyInfo[] _properties = typeof(T).GetProperties();
protected string _classname => protected string _classname =>
new CssBuilder("mud-table") new CssBuilder("table")
.AddClass("mud-data-grid") .AddClass("data-grid")
.AddClass("mud-xs-table", Breakpoint == Breakpoint.Xs) .AddClass("xs-table", Breakpoint == Breakpoint.Xs)
.AddClass("mud-sm-table", Breakpoint == Breakpoint.Sm) .AddClass("sm-table", Breakpoint == Breakpoint.Sm)
.AddClass("mud-md-table", Breakpoint == Breakpoint.Md) .AddClass("md-table", Breakpoint == Breakpoint.Md)
.AddClass("mud-lg-table", Breakpoint == Breakpoint.Lg || Breakpoint == Breakpoint.Always) .AddClass("lg-table", Breakpoint == Breakpoint.Lg || Breakpoint == Breakpoint.Always)
.AddClass("mud-xl-table", Breakpoint == Breakpoint.Xl || Breakpoint == Breakpoint.Always) .AddClass("xl-table", Breakpoint == Breakpoint.Xl || Breakpoint == Breakpoint.Always)
.AddClass("mud-table-dense", Dense) .AddClass("table-dense", Dense)
.AddClass("mud-table-hover", Hover) .AddClass("table-hover", Hover)
.AddClass("mud-table-bordered", Bordered) .AddClass("table-bordered", Bordered)
.AddClass("mud-table-striped", Striped) .AddClass("table-striped", Striped)
.AddClass("mud-table-outlined", Outlined) .AddClass("table-outlined", Outlined)
.AddClass("mud-table-square", Square) .AddClass("table-square", Square)
.AddClass("mud-table-sticky-header", FixedHeader) .AddClass("table-sticky-header", FixedHeader)
.AddClass("mud-table-sticky-footer", FixedFooter) .AddClass("table-sticky-footer", FixedFooter)
.AddClass($"mud-elevation-{Elevation}", !Outlined) .AddClass($"elevation-{Elevation}", !Outlined)
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();
protected string _style => protected string _style =>
new StyleBuilder() new StyleBuilder()
.AddStyle("overflow-x", "auto", when: HorizontalScrollbar || ColumnResizeMode == ResizeMode.Container) .AddStyle("overflow-x", "auto", when: HorizontalScrollbar || ColumnResizeMode == ResizeMode.Container)
.AddStyle("position", "relative", when: hasStickyColumns) .AddStyle("position", "relative", when: hasStickyColumns)
.AddStyle(Style)
.Build(); .Build();
protected string _tableStyle => protected string _tableStyle =>
@ -63,14 +62,14 @@ public partial class DataGrid<T> : UIComponent
.Build(); .Build();
protected string _tableClass => protected string _tableClass =>
new CssBuilder("mud-table-container") new CssBuilder("table-container")
.AddClass("cursor-col-resize", when: IsResizing) .AddClass("cursor-col-resize", when: IsResizing)
.Build(); .Build();
protected string _headClassname => new CssBuilder("mud-table-head") protected string _headClassname => new CssBuilder("table-head")
.AddClass(HeaderClass).Build(); .AddClass(HeaderClass).Build();
protected string _footClassname => new CssBuilder("mud-table-foot") protected string _footClassname => new CssBuilder("table-foot")
.AddClass(FooterClass).Build(); .AddClass(FooterClass).Build();
internal SortDirection GetColumnSortDirection(string columnName) internal SortDirection GetColumnSortDirection(string columnName)

20
src/Connected.Components/Components/DataGrid/DataGridPager.razor
Unescape View File

@ -2,28 +2,28 @@
@inherits UIComponent @inherits UIComponent
@typeparam T @typeparam T
<ToolBar @attributes="UserAttributes" Class="@Classname" Style="@Style"> <ToolBar @attributes="CustomAttributes" Class="@Classname">
<div class="mud-table-pagination-spacer"></div> <div class="table-pagination-spacer"></div>
@if (!DisableRowsPerPage) @if (!DisableRowsPerPage)
{ {
<TextContent Typo="Typo.body2" Class="mud-table-pagination-caption"> <TextContent Typo="Typo.body2" Class="table-pagination-caption">
@RowsPerPageString @RowsPerPageString
</TextContent> </TextContent>
<Select T="string" ValueChanged="@SetRowsPerPageAsync" Value="@DataGrid?.RowsPerPage.ToString()" Class="mud-table-pagination-select" DisableUnderLine="true" Dense="true" Disabled="@Disabled"> <Select T="string" ValueChanged="@SetRowsPerPageAsync" Value="@DataGrid?.RowsPerPage.ToString()" Class="table-pagination-select" DisableUnderLine="true" Dense="true" Disabled="@Disabled">
@foreach (int pageSize in PageSizeOptions) @foreach (int pageSize in PageSizeOptions)
{ {
<SelectItem T="string" Value="@pageSize.ToString()">@pageSize.ToString().ToUpper()</SelectItem> <SelectItem T="string" Value="@pageSize.ToString()">@pageSize.ToString().ToUpper()</SelectItem>
} }
</Select> </Select>
} }
<TextContent Typo="Typo.body2" Class="mud-table-pagination-caption"> <TextContent Typo="Typo.body2" Class="table-pagination-caption">
@Info @Info
</TextContent> </TextContent>
<div class="mud-table-pagination-actions"> <div class="table-pagination-actions">
<IconButton Class="mud-flip-x-rtl" Icon="@Icons.Material.Filled.FirstPage" Disabled="@BackButtonsDisabled" @onclick="@(() => DataGrid.NavigateTo(Page.First))"/> <IconButton Class="flip-x-rtl" Icon="@Icons.Material.Filled.FirstPage" Disabled="@BackButtonsDisabled" @onclick="@(() => DataGrid.NavigateTo(Page.First))"/>
<IconButton Class="mud-flip-x-rtl" Icon="@Icons.Material.Filled.NavigateBefore" Disabled="@BackButtonsDisabled" @onclick="@(() => DataGrid.NavigateTo(Page.Previous))"/> <IconButton Class="flip-x-rtl" Icon="@Icons.Material.Filled.NavigateBefore" Disabled="@BackButtonsDisabled" @onclick="@(() => DataGrid.NavigateTo(Page.Previous))"/>
<IconButton Class="mud-flip-x-rtl" Icon="@Icons.Material.Filled.NavigateNext" Disabled="@ForwardButtonsDisabled" @onclick="@(() => DataGrid.NavigateTo(Page.Next))"/> <IconButton Class="flip-x-rtl" Icon="@Icons.Material.Filled.NavigateNext" Disabled="@ForwardButtonsDisabled" @onclick="@(() => DataGrid.NavigateTo(Page.Next))"/>
<IconButton Class="mud-flip-x-rtl" Icon="@Icons.Material.Filled.LastPage" Disabled="@ForwardButtonsDisabled" @onclick="@(() => DataGrid.NavigateTo(Page.Last))"/> <IconButton Class="flip-x-rtl" Icon="@Icons.Material.Filled.LastPage" Disabled="@ForwardButtonsDisabled" @onclick="@(() => DataGrid.NavigateTo(Page.Last))"/>
</div> </div>
</ToolBar> </ToolBar>

4
src/Connected.Components/Components/DataGrid/DataGridPager.razor.cs
Unescape View File

@ -49,8 +49,8 @@ public partial class DataGridPager<T> : UIComponent, IDisposable
private bool ForwardButtonsDisabled => Disabled || (DataGrid == null ? false : (DataGrid.CurrentPage + 1) * DataGrid.RowsPerPage >= DataGrid.GetFilteredItemsCount()); private bool ForwardButtonsDisabled => Disabled || (DataGrid == null ? false : (DataGrid.CurrentPage + 1) * DataGrid.RowsPerPage >= DataGrid.GetFilteredItemsCount());
protected string Classname => protected string Classname =>
new CssBuilder("mud-table-pagination-toolbar") new CssBuilder("table-pagination-toolbar")
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();
private async Task SetRowsPerPageAsync(string size) private async Task SetRowsPerPageAsync(string size)

4
src/Connected.Components/Components/DataGrid/FilterHeaderCell.razor
Unescape View File

@ -2,7 +2,7 @@
@inherits UIComponent @inherits UIComponent
@typeparam T @typeparam T
<th scope="col" class="@_classname" style="@_style" colspan="@Column?.HeaderColSpan" @attributes="@UserAttributes"> <th scope="col" class="@_classname" style="@_style" colspan="@Column?.HeaderColSpan" @attributes="@CustomAttributes">
@if (null != Column && Column.filterable) @if (null != Column && Column.filterable)
{ {
@if (Column.FilterTemplate != null) @if (Column.FilterTemplate != null)
@ -58,7 +58,7 @@
} }
} }
</Menu> </Menu>
<IconButton Class="align-self-center" Icon="@Icons.Material.Filled.FilterAltOff" Size="@Size.Small" OnClick="@ClearFilter"></IconButton> <GlyphButton Class="align-self-center" Icon="@Icons.Material.Filled.FilterAltOff" Size="@Size.Small" Clicked="@ClearFilter"></GlyphButton>
</Stack> </Stack>
} }
} }

3
src/Connected.Components/Components/DataGrid/FilterHeaderCell.razor.cs
Unescape View File

@ -17,14 +17,13 @@ public partial class FilterHeaderCell<T> : UIComponent
private string _classname => private string _classname =>
new CssBuilder(Column?.HeaderClass) new CssBuilder(Column?.HeaderClass)
.AddClass(Column?.headerClassname) .AddClass(Column?.headerClassname)
.AddClass(Class) .AddClass(AdditionalClassList)
.AddClass("filter-header-cell") .AddClass("filter-header-cell")
.Build(); .Build();
private string _style => private string _style =>
new StyleBuilder() new StyleBuilder()
.AddStyle(Column?.HeaderStyle) .AddStyle(Column?.HeaderStyle)
.AddStyle(Style)
.Build(); .Build();
private string _valueString; private string _valueString;

2
src/Connected.Components/Components/DataGrid/FooterCell.razor
Unescape View File

@ -4,7 +4,7 @@
@if (Column is not null) @if (Column is not null)
{ {
<td class="@_classname" style="@_style" colspan="@Column.FooterColSpan" @attributes="@UserAttributes"> <td class="@_classname" style="@_style" colspan="@Column.FooterColSpan" @attributes="@CustomAttributes">
@if (Column.AggregateDefinition != null) @if (Column.AggregateDefinition != null)
{ {
@Column.AggregateDefinition?.GetValue(Column.Field, items) @Column.AggregateDefinition?.GetValue(Column.Field, items)

3
src/Connected.Components/Components/DataGrid/FooterCell.razor.cs
Unescape View File

@ -19,12 +19,11 @@ public partial class FooterCell<T> : UIComponent
new CssBuilder("footer-cell") new CssBuilder("footer-cell")
.AddClass(Column?.FooterClass) .AddClass(Column?.FooterClass)
.AddClass(Column?.footerClassname) .AddClass(Column?.footerClassname)
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();
private string _style => private string _style =>
new StyleBuilder() new StyleBuilder()
.AddStyle(Column?.FooterStyle) .AddStyle(Column?.FooterStyle)
.AddStyle(Style)
.AddStyle("font-weight", "600") .AddStyle("font-weight", "600")
.Build(); .Build();

10
src/Connected.Components/Components/DataGrid/HeaderCell.razor
Unescape View File

@ -4,13 +4,13 @@
@if (IsOnlyHeader) @if (IsOnlyHeader)
{ {
<th scope="col" class="mud-table cell @_classname" style="" @attributes="@UserAttributes"> <th scope="col" class="table cell @_classname" style="" @attributes="@CustomAttributes">
@ChildContent @ChildContent
</th> </th>
} }
else if (Column != null && !Column.Hidden) else if (Column != null && !Column.Hidden)
{ {
<th @ref=@_headerElement scope="col" class="@_classname" style="@_style" colspan="@Column.HeaderColSpan" @attributes="@UserAttributes"> <th @ref=@_headerElement scope="col" class="@_classname" style="@_style" colspan="@Column.HeaderColSpan" @attributes="@CustomAttributes">
<span class="column-header"> <span class="column-header">
@if (sortable) @if (sortable)
{ {
@ -48,7 +48,7 @@ else if (Column != null && !Column.Hidden)
<IconButton Icon="@Column.SortIcon" Class="@sortIconClass" Size="@Size.Small" OnClick="@SortChangedAsync"></IconButton> <IconButton Icon="@Column.SortIcon" Class="@sortIconClass" Size="@Size.Small" OnClick="@SortChangedAsync"></IconButton>
if(DataGrid.SortMode == SortMode.Multiple) if(DataGrid.SortMode == SortMode.Multiple)
{ {
<span class="mud-sort-index mud-text-disabled">@(Column.SortIndex + 1)</span> <span class="sort-index mud-text-disabled">@(Column.SortIndex + 1)</span>
} }
} }
} }
@ -113,8 +113,8 @@ else if (Column != null && !Column.Hidden)
@DataGrid.Filter(Column.filterContext.FilterDefinition, Column) @DataGrid.Filter(Column.filterContext.FilterDefinition, Column)
</Item> </Item>
<Item xs="12" Class="d-flex justify-end"> <Item xs="12" Class="d-flex justify-end">
<Button Class="clear-filter-button" OnClick="@ClearFilter">Clear</Button> <Button Class="clear-filter-button" Clicked="@ClearFilter">Clear</Button>
<Button Class="apply-filter-button" Color="@ThemeColor.Primary" OnClick="@ApplyFilter">Filter</Button> <Button Class="apply-filter-button" Color="@ThemeColor.Primary" Clicked="@ApplyFilter">Filter</Button>
</Item> </Item>
</Grid> </Grid>
} }

8
src/Connected.Components/Components/DataGrid/HeaderCell.razor.cs
Unescape View File

@ -33,26 +33,24 @@ public partial class HeaderCell<T> : UIComponent, IDisposable
private string _classname => private string _classname =>
new CssBuilder(Column?.HeaderClass) new CssBuilder(Column?.HeaderClass)
.AddClass(Column?.headerClassname) .AddClass(Column?.headerClassname)
.AddClass(Class) .AddClass(AdditionalClassList)
.Build(); .Build();
private string _style => private string _style =>
new StyleBuilder() new StyleBuilder()
.AddStyle(Column?.HeaderStyle) .AddStyle(Column?.HeaderStyle)
.AddStyle("width", _width?.ToPx(), when: _width.HasValue) .AddStyle("width", _width?.ToPx(), when: _width.HasValue)
.AddStyle(Style)
.Build(); .Build();
private string _resizerStyle => private string _resizerStyle =>
new StyleBuilder() new StyleBuilder()
.AddStyle("height", _resizerHeight?.ToPx() ?? "100%") .AddStyle("height", _resizerHeight?.ToPx() ?? "100%")
.AddStyle(Style)
.Build(); .Build();
private string _resizerClass => private string _resizerClass =>
new CssBuilder() new CssBuilder()
.AddClass("mud-resizing", when: _isResizing) .AddClass("resizing", when: _isResizing)
.AddClass("mud-resizer") .AddClass("resizer")
.Build(); .Build();
private string _sortHeaderClass => private string _sortHeaderClass =>

2
src/Connected.Components/Components/DataGrid/Row.razor
Unescape View File

@ -1,6 +1,6 @@
@namespace Connected.Components @namespace Connected.Components
@inherits UIComponent @inherits UIComponent
<tr class="@Classname" style="@Style" @attributes="@UserAttributes"> <tr class="@Classname" @attributes="@CustomAttributes">
@ChildContent @ChildContent
</tr> </tr>

4
src/Connected.Components/Components/DataGrid/Row.razor.cs
Unescape View File

@ -11,6 +11,6 @@ public partial class Row : UIComponent
{ {
[Parameter] public RenderFragment ChildContent { get; set; } [Parameter] public RenderFragment ChildContent { get; set; }
protected string Classname => new CssBuilder("mud-table-row") protected string Classname => new CssBuilder("table-row")
.AddClass(Class).Build(); .AddClass(AdditionalClassList).Build();
} }

8
src/Connected.Components/Components/DatePicker/DatePicker.cs
Unescape View File

@ -63,14 +63,14 @@ public class DatePicker : DatePickerBase
protected override string GetDayClasses(int month, DateTime day) protected override string GetDayClasses(int month, DateTime day)
{ {
var b = new CssBuilder("mud-day"); var b = new CssBuilder("day");
b.AddClass(AdditionalDateClassesFunc?.Invoke(day) ?? string.Empty); b.AddClass(AdditionalDateClassesFunc?.Invoke(day) ?? string.Empty);
if (day < GetMonthStart(month) || day > GetMonthEnd(month)) if (day < GetMonthStart(month) || day > GetMonthEnd(month))
return b.AddClass("mud-hidden").Build(); return b.AddClass("hidden").Build();
if ((Date?.Date == day && _selectedDate == null) || _selectedDate?.Date == day) if ((Date?.Date == day && _selectedDate == null) || _selectedDate?.Date == day)
return b.AddClass("mud-selected").AddClass($"mud-theme-{Color.ToDescriptionString()}").Build(); return b.AddClass("selected").AddClass($"theme-{Color.ToDescription()}").Build();
if (day == DateTime.Today) if (day == DateTime.Today)
return b.AddClass("mud-current mud-button-outlined").AddClass($"mud-button-outlined-{Color.ToDescriptionString()} mud-{Color.ToDescriptionString()}-text").Build(); return b.AddClass("current mud-button-outlined").AddClass($"button-outlined-{Color.ToDescription()} mud-{Color.ToDescription()}-text").Build();
return b.Build(); return b.Build();
} }

64
src/Connected.Components/Components/DatePicker/DatePickerBase.razor
Unescape View File

@ -7,12 +7,12 @@
protected override RenderFragment PickerContent => protected override RenderFragment PickerContent =>
@<CascadingValue Value="@this" IsFixed="true"> @<CascadingValue Value="@this" IsFixed="true">
<PickerToolbar Class="mud-picker-datepicker-toolbar" DisableToolbar="@DisableToolbar" Orientation="@Orientation" Color="@Color"> <PickerToolbar Class="picker-datepicker-toolbar" DisableToolbar="@DisableToolbar" Orientation="@Orientation" Color="@Color">
<Button Variant="Variant.Text" Color="ThemeColor.Inherit" Class="mud-button-year" OnClick="OnYearClick">@GetFormattedYearString()</Button> <Button Variant="Variant.Text" Color="ThemeColor.Inherit" Class="button-year" OnClick="OnYearClick">@GetFormattedYearString()</Button>
<Button Variant="Variant.Text" Color="ThemeColor.Inherit" Class="mud-button-date" OnClick="OnFormattedDateClick">@GetTitleDateString()</Button> <Button Variant="Variant.Text" Color="ThemeColor.Inherit" Class="button-date" OnClick="OnFormattedDateClick">@GetTitleDateString()</Button>
</PickerToolbar> </PickerToolbar>
<PickerContent> <PickerContent>
<div class="mud-picker-calendar-content @($"mud-picker-calendar-content-{MaxMonthColumns ?? DisplayMonths}")"> <div class="picker-calendar-content @($"picker-calendar-content-{MaxMonthColumns ?? DisplayMonths}")">
@{ @{
int dayId = 0; int dayId = 0;
@if (_picker_month.HasValue && _picker_month.Value.Year == 1 && _picker_month.Value.Month == 1) @if (_picker_month.HasValue && _picker_month.Value.Year == 1 && _picker_month.Value.Month == 1)
@ -24,14 +24,14 @@
{ {
int tempMonth = displayMonth; //without local variable month names are wrong int tempMonth = displayMonth; //without local variable month names are wrong
<div class="mud-picker-calendar-container"> <div class="picker-calendar-container">
@if (tempMonth == 0 && CurrentView == OpenTo.Year) @if (tempMonth == 0 && CurrentView == OpenTo.Year)
{ {
<div id="pickerYears" class="mud-picker-year-container"> <div id="pickerYears" class="picker-year-container">
@for (int i = GetMinYear(); i <= GetMaxYear(); i++) @for (int i = GetMinYear(); i <= GetMaxYear(); i++)
{ {
var year = i; var year = i;
<div class="mud-picker-year" id="@(_componentId + year)" @onclick="(() => OnYearClicked(year))" @onclick:stopPropagation="true"> <div class="picker-year" id="@(_componentId + year)" @onclick="(() => OnYearClicked(year))" @onclick:stopPropagation="true">
<TextContent Typo="@GetYearTypo(year)" Class="@GetYearClasses(year)">@GetCalendarYear(year)</TextContent> <TextContent Typo="@GetYearTypo(year)" Class="@GetYearClasses(year)">@GetCalendarYear(year)</TextContent>
</div> </div>
} }
@ -43,26 +43,26 @@
var prevLabel = $"Go to previous year {calendarYear - 1}"; var prevLabel = $"Go to previous year {calendarYear - 1}";
var nextLabel = $"Go to next year {calendarYear + 1}"; var nextLabel = $"Go to next year {calendarYear + 1}";
<div class="mud-picker-calendar-header"> <div class="picker-calendar-header">
<div class="mud-picker-calendar-header-switch"> <div class="picker-calendar-header-switch">
@if (!FixYear.HasValue) @if (!FixYear.HasValue)
{ {
<IconButton aria-label="@prevLabel" Icon="@PreviousIcon" OnClick="OnPreviousYearClick" Class="mud-flip-x-rtl" /> <IconButton aria-label="@prevLabel" Icon="@PreviousIcon" OnClick="OnPreviousYearClick" Class="flip-x-rtl" />
<button type="button" class="mud-picker-slide-transition mud-picker-calendar-header-transition" @onclick="OnYearClick" @onclick:stopPropagation="true"> <button type="button" class="picker-slide-transition mud-picker-calendar-header-transition" @onclick="OnYearClick" @onclick:stopPropagation="true">
<TextContent Typo="Typo.body1" Align="Align.Center">@calendarYear</TextContent> <TextContent Typo="Typo.body1" Align="Align.Center">@calendarYear</TextContent>
</button> </button>
<IconButton aria-label="@nextLabel" Icon="@NextIcon" OnClick="OnNextYearClick" Class="mud-flip-x-rtl" /> <IconButton aria-label="@nextLabel" Icon="@NextIcon" OnClick="OnNextYearClick" Class="flip-x-rtl" />
} }
else else
{ {
<TextContent Class="mud-picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">@calendarYear</TextContent> <TextContent Class="picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">@calendarYear</TextContent>
} }
</div> </div>
</div> </div>
<div class="mud-picker-month-container"> <div class="picker-month-container">
@foreach (var month in GetAllMonths()) @foreach (var month in GetAllMonths())
{ {
<button type="button" aria-label="@GetMonthName(month)" class="mud-picker-month" @onclick="(() => OnMonthSelected(month))" @onclick:stopPropagation="true"> <button type="button" aria-label="@GetMonthName(month)" class="picker-month" @onclick="(() => OnMonthSelected(month))" @onclick:stopPropagation="true">
<TextContent Typo="@GetMonthTypo(month)" Class="@GetMonthClasses(month)">@GetAbbreviatedMonthName(month)</TextContent> <TextContent Typo="@GetMonthTypo(month)" Class="@GetMonthClasses(month)">@GetAbbreviatedMonthName(month)</TextContent>
</button> </button>
} }
@ -74,35 +74,35 @@
var nextLabel = $"Go to next month {GetMonthName((tempMonth + 1) % 12)}"; var nextLabel = $"Go to next month {GetMonthName((tempMonth + 1) % 12)}";
<div class="@GetCalendarHeaderClasses(tempMonth)"> <div class="@GetCalendarHeaderClasses(tempMonth)">
<div class="mud-picker-calendar-header-switch"> <div class="picker-calendar-header-switch">
@if (!FixMonth.HasValue) @if (!FixMonth.HasValue)
{ {
<IconButton aria-label="@prevLabel" Class="mud-picker-nav-button-prev mud-flip-x-rtl" Icon="@PreviousIcon" OnClick="OnPreviousMonthClick" /> <IconButton aria-label="@prevLabel" Class="picker-nav-button-prev mud-flip-x-rtl" Icon="@PreviousIcon" OnClick="OnPreviousMonthClick" />
<button type="button" class="mud-picker-slide-transition mud-picker-calendar-header-transition mud-button-month" @onclick="(() => OnMonthClicked(tempMonth))" @onclick:stopPropagation="true"> <button type="button" class="picker-slide-transition mud-picker-calendar-header-transition mud-button-month" @onclick="(() => OnMonthClicked(tempMonth))" @onclick:stopPropagation="true">
<TextContent Typo="Typo.body1" Align="Align.Center">@GetMonthName(tempMonth)</TextContent> <TextContent Typo="Typo.body1" Align="Align.Center">@GetMonthName(tempMonth)</TextContent>
</button> </button>
<IconButton aria-label="@nextLabel" Class="mud-picker-nav-button-next mud-flip-x-rtl" Icon="@NextIcon" OnClick="OnNextMonthClick" /> <IconButton aria-label="@nextLabel" Class="picker-nav-button-next mud-flip-x-rtl" Icon="@NextIcon" OnClick="OnNextMonthClick" />
} }
else else
{ {
<TextContent Class="mud-picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">@GetMonthName(tempMonth)</TextContent> <TextContent Class="picker-calendar-header-transition" Typo="Typo.body1" Align="Align.Center">@GetMonthName(tempMonth)</TextContent>
} }
</div> </div>
<div class="mud-picker-calendar-header-day"> <div class="picker-calendar-header-day">
@if (ShowWeekNumbers) @if (ShowWeekNumbers)
{ {
<div class="mud-picker-calendar-week"> <div class="picker-calendar-week">
<Text Typo="Typo.caption" Class="mud-picker-calendar-week-text"></Text> <Text Typo="Typo.caption" Class="picker-calendar-week-text"></Text>
</div> </div>
} }
@foreach (var dayname in GetAbbreviatedDayNames()) @foreach (var dayname in GetAbbreviatedDayNames())
{ {
<TextContent Typo="Typo.caption" Class="mud-day-label">@dayname</TextContent> <TextContent Typo="Typo.caption" Class="day-label">@dayname</TextContent>
} }
</div> </div>
</div> </div>
<div class="mud-picker-calendar-transition mud-picker-slide-transition"> <div class="picker-calendar-transition mud-picker-slide-transition">
<div class="mud-picker-calendar"> <div class="picker-calendar">
@for (int week = 0; week < 6; week++) @for (int week = 0; week < 6; week++)
{ {
int tempWeek = week; int tempWeek = week;
@ -110,8 +110,8 @@
@if (ShowWeekNumbers) @if (ShowWeekNumbers)
{ {
<div class="mud-picker-calendar-week"> <div class="picker-calendar-week">
<Text class="mud-picker-calendar-week-text" Typo="Typo.caption">@GetWeekNumber(tempMonth, tempWeek)</Text> <Text class="picker-calendar-week-text" Typo="Typo.caption">@GetWeekNumber(tempMonth, tempWeek)</Text>
</div> </div>
} }
@foreach (var day in GetWeek(tempMonth, tempWeek)) @foreach (var day in GetWeek(tempMonth, tempWeek))
@ -122,21 +122,21 @@
{ {
var selectedDay = !firstMonthFirstYear ? day : day.AddDays(-1); var selectedDay = !firstMonthFirstYear ? day : day.AddDays(-1);
<button @key="@(!firstMonthFirstYear ? selectedDay : tempId)" type="button" style="--day-id: @(!firstMonthFirstYear ? tempId: tempId + 1);" <button @key="@(!firstMonthFirstYear ? selectedDay : tempId)" type="button" style="--day-id: @(!firstMonthFirstYear ? tempId: tempId + 1);"
class="mud-button-root mud-icon-button mud-ripple mud-ripple-icon mud-picker-calendar-day @(!firstMonthFirstYear || day.Day == _picker_month.Value.Day? GetDayClasses(tempMonth, day) : GetDayClasses(tempMonth, selectedDay))" class="button-root mud-icon-button mud-ripple mud-ripple-icon mud-picker-calendar-day @(!firstMonthFirstYear || day.Day == _picker_month.Value.Day? GetDayClasses(tempMonth, day) : GetDayClasses(tempMonth, selectedDay))"
@onclick="(() => { var d = selectedDay; OnDayClicked(d); })" @onclick="(() => { var d = selectedDay; OnDayClicked(d); })"
@onclick:stopPropagation="true" @onclick:stopPropagation="true"
aria-label='@selectedDay.ToString("dddd, dd MMMM yyyy")' aria-label='@selectedDay.ToString("dddd, dd MMMM yyyy")'
onmouseover="this.closest('.mud-picker-calendar-content').style.setProperty('--selected-day', @(!firstMonthFirstYear ? tempId: tempId + 1));" onmouseover="this.closest('.mud-picker-calendar-content').style.setProperty('--selected-day', @(!firstMonthFirstYear ? tempId: tempId + 1));"
disabled="@((selectedDay < MinDate) || (selectedDay > MaxDate) || IsDateDisabledFunc(selectedDay))"> disabled="@((selectedDay < MinDate) || (selectedDay > MaxDate) || IsDateDisabledFunc(selectedDay))">
<p class="mud-typography mud-typography-body2 mud-inherit-text">@GetCalendarDayOfMonth(selectedDay)</p> <p class="typography mud-typography-body2 mud-inherit-text">@GetCalendarDayOfMonth(selectedDay)</p>
</button> </button>
} }
else else
{ {
<button @key="0" type="button" style="--day-id: 1;" <button @key="0" type="button" style="--day-id: 1;"
class="mud-button-root mud-icon-button mud-ripple mud-ripple-icon mud-picker-calendar-day mud-day" class="button-root mud-icon-button mud-ripple mud-ripple-icon mud-picker-calendar-day mud-day"
aria-label='' disabled> aria-label='' disabled>
<p class="mud-typography mud-typography-body2 mud-inherit-text"></p> <p class="typography mud-typography-body2 mud-inherit-text"></p>
</button> </button>
} }
} }

10
src/Connected.Components/Components/DatePicker/DatePickerBase.razor.cs
Unescape View File

@ -497,15 +497,15 @@ public abstract partial class DatePickerBase : Picker<DateTime?>
private string GetYearClasses(int year) private string GetYearClasses(int year)
{ {
if (year == GetMonthStart(0).Year) if (year == GetMonthStart(0).Year)
return $"mud-picker-year-selected mud-{Color.ToDescriptionString()}-text"; return $"picker-year-selected mud-{Color.ToDescription()}-text";
return null; return null;
} }
private string GetCalendarHeaderClasses(int month) private string GetCalendarHeaderClasses(int month)
{ {
return new CssBuilder("mud-picker-calendar-header") return new CssBuilder("picker-calendar-header")
.AddClass($"mud-picker-calendar-header-{month + 1}") .AddClass($"picker-calendar-header-{month + 1}")
.AddClass($"mud-picker-calendar-header-last", month == DisplayMonths - 1) .AddClass($"picker-calendar-header-last", month == DisplayMonths - 1)
.Build(); .Build();
} }
@ -546,7 +546,7 @@ public abstract partial class DatePickerBase : Picker<DateTime?>
private string GetMonthClasses(DateTime month) private string GetMonthClasses(DateTime month)
{ {
if (GetMonthStart(0) == month) if (GetMonthStart(0) == month)
return $"mud-picker-month-selected mud-{Color.ToDescriptionString()}-text"; return $"picker-month-selected mud-{Color.ToDescription()}-text";
return null; return null;
} }

2
src/Connected.Components/Components/DatePicker/DateRangePicker.razor
Unescape View File

@ -10,7 +10,7 @@
ErrorText="@ErrorText" Disabled="@Disabled" Margin="@Margin" Required="@Required" ErrorText="@ErrorText" Disabled="@Disabled" Margin="@Margin" Required="@Required"
@onclick="() => { if (!Editable) ToggleState(); }" ForId="@FieldId"> @onclick="() => { if (!Editable) ToggleState(); }" ForId="@FieldId">
<InputContent> <InputContent>
<RangeInput @ref="_rangeInput" @attributes="UserAttributes" InputType="@InputType.Text" Class="@PickerInputClass" Style="@Style" Variant="@Variant" ReadOnly="@(!Editable)" <RangeInput @ref="_rangeInput" @attributes="CustomAttributes" InputType="@InputType.Text" Class="@PickerInputClass" Variant="@Variant" ReadOnly="@(!Editable)"
@bind-Value="@RangeText" Disabled="@Disabled" Adornment="@Adornment" AdornmentIcon="@AdornmentIcon" AdornmentColor="@AdornmentColor" IconSize="@IconSize" OnAdornmentClick="ToggleState" @bind-Value="@RangeText" Disabled="@Disabled" Adornment="@Adornment" AdornmentIcon="@AdornmentIcon" AdornmentColor="@AdornmentColor" IconSize="@IconSize" OnAdornmentClick="ToggleState"
Required="@Required" RequiredError="@RequiredError" Error="@HasError" ErrorText="@ErrorText" Margin="@Margin" AdornmentAriaLabel="@AdornmentAriaLabel"/> Required="@Required" RequiredError="@RequiredError" Error="@HasError" ErrorText="@ErrorText" Margin="@Margin" AdornmentAriaLabel="@AdornmentAriaLabel"/>
</InputContent> </InputContent>

44
src/Connected.Components/Components/DatePicker/DateRangePicker.razor.cs
Unescape View File

@ -168,61 +168,61 @@ public partial class DateRangePicker : DatePickerBase
protected override string GetDayClasses(int month, DateTime day) protected override string GetDayClasses(int month, DateTime day)
{ {
var b = new CssBuilder("mud-day"); var b = new CssBuilder("day");
if (day < GetMonthStart(month) || day > GetMonthEnd(month)) if (day < GetMonthStart(month) || day > GetMonthEnd(month))
{ {
return b.AddClass("mud-hidden").Build(); return b.AddClass("hidden").Build();
} }
if ((_firstDate != null && _secondDate != null && _firstDate < day && _secondDate > day) || if ((_firstDate != null && _secondDate != null && _firstDate < day && _secondDate > day) ||
(_firstDate == null && _dateRange != null && _dateRange.Start < day && _dateRange.End > day)) (_firstDate == null && _dateRange != null && _dateRange.Start < day && _dateRange.End > day))
{ {
return b return b
.AddClass("mud-range") .AddClass("range")
.AddClass("mud-range-between") .AddClass("range-between")
.Build(); .Build();
} }
if ((_firstDate != null && day == _firstDate) || if ((_firstDate != null && day == _firstDate) ||
(_firstDate == null && _dateRange != null && _dateRange.Start == day && DateRange.End != day)) (_firstDate == null && _dateRange != null && _dateRange.Start == day && DateRange.End != day))
{ {
return b.AddClass("mud-selected") return b.AddClass("selected")
.AddClass("mud-range") .AddClass("range")
.AddClass("mud-range-start-selected") .AddClass("range-start-selected")
.AddClass("mud-range-selection", _firstDate != null) .AddClass("range-selection", _firstDate != null)
.AddClass($"mud-theme-{Color.ToDescriptionString()}") .AddClass($"theme-{Color.ToDescription()}")
.Build(); .Build();
} }
if ((_firstDate != null && _secondDate != null && day == _secondDate) || if ((_firstDate != null && _secondDate != null && day == _secondDate) ||
(_firstDate == null && _dateRange != null && _dateRange.Start != day && _dateRange.End == day)) (_firstDate == null && _dateRange != null && _dateRange.Start != day && _dateRange.End == day))
{ {
return b.AddClass("mud-selected") return b.AddClass("selected")
.AddClass("mud-range") .AddClass("range")
.AddClass("mud-range-end-selected") .AddClass("range-end-selected")
.AddClass($"mud-theme-{Color.ToDescriptionString()}") .AddClass($"theme-{Color.ToDescription()}")
.Build(); .Build();
} }
if (_firstDate == null && _dateRange != null && _dateRange.Start == _dateRange.End && _dateRange.Start == day) if (_firstDate == null && _dateRange != null && _dateRange.Start == _dateRange.End && _dateRange.Start == day)
{ {
return b.AddClass("mud-selected").AddClass($"mud-theme-{Color.ToDescriptionString()}").Build(); return b.AddClass("selected").AddClass($"theme-{Color.ToDescription()}").Build();
} }
else if (_firstDate != null && day > _firstDate) else if (_firstDate != null && day > _firstDate)
{ {
return b.AddClass("mud-range") return b.AddClass("range")
.AddClass("mud-range-selection", _secondDate == null) .AddClass("range-selection", _secondDate == null)
.AddClass($"mud-range-selection-{Color.ToDescriptionString()}", _firstDate != null) .AddClass($"range-selection-{Color.ToDescription()}", _firstDate != null)
.Build(); .Build();
} }
if (day == DateTime.Today) if (day == DateTime.Today)
{ {
return b.AddClass("mud-current") return b.AddClass("current")
.AddClass("mud-range", _firstDate != null && day > _firstDate) .AddClass("range", _firstDate != null && day > _firstDate)
.AddClass("mud-range-selection", _firstDate != null && day > _firstDate) .AddClass("range-selection", _firstDate != null && day > _firstDate)
.AddClass($"mud-range-selection-{Color.ToDescriptionString()}", _firstDate != null && day > _firstDate) .AddClass($"range-selection-{Color.ToDescription()}", _firstDate != null && day > _firstDate)
.AddClass($"mud-{Color.ToDescriptionString()}-text") .AddClass($"{Color.ToDescription()}-text")
.Build(); .Build();
} }

2
src/Connected.Components/Components/Dialog/Dialog.razor
Unescape View File

@ -7,7 +7,7 @@
{ {
<FocusTrap DefaultFocus="DefaultFocus"> <FocusTrap DefaultFocus="DefaultFocus">
<div @attributes="UserAttributes" class="@ContentClass" style="@ContentStyle"> <div @attributes="CustomAttributes" class="@ContentClass" style="@ContentStyle">
@DialogContent @DialogContent
</div> </div>

13
src/Connected.Components/Components/Dialog/Dialog.razor.cs
Unescape View File

@ -10,12 +10,12 @@ namespace Connected.Components;
public partial class Dialog : UIComponent public partial class Dialog : UIComponent
{ {
protected string ContentClass => new CssBuilder("mud-dialog-content") protected string ContentClass => new CssBuilder("dialog-content")
.AddClass($"mud-dialog-no-side-padding", DisableSidePadding) .AddClass($"dialog-no-side-padding", DisableSidePadding)
.AddClass(ClassContent) .AddClass(ClassContent)
.Build(); .Build();
protected string ActionClass => new CssBuilder("mud-dialog-actions") protected string ActionClass => new CssBuilder("dialog-actions")
.AddClass(ClassActions) .AddClass(ClassActions)
.Build(); .Build();
@ -24,7 +24,7 @@ public partial class Dialog : UIComponent
[Inject] public IDialogService DialogService { get; set; } [Inject] public IDialogService DialogService { get; set; }
/// <summary> /// <summary>
/// Define the dialog title as a renderfragment (overrides Title) /// Define the dialog title as a renderfragment (overrides GlyphTitle)
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Dialog.Behavior)] [Category(CategoryTypes.Dialog.Behavior)]
@ -109,7 +109,7 @@ public partial class Dialog : UIComponent
/// <summary> /// <summary>
/// Define the dialog title as a renderfragment (overrides Title) /// Define the dialog title as a renderfragment (overrides GlyphTitle)
/// </summary> /// </summary>
[Parameter] [Parameter]
[Category(CategoryTypes.Dialog.Behavior)] [Category(CategoryTypes.Dialog.Behavior)]
@ -133,8 +133,7 @@ public partial class Dialog : UIComponent
Close(); Close();
var parameters = new DialogParameters() var parameters = new DialogParameters()
{ {
[nameof(Class)] = Class, [nameof(AdditionalClassList)] = AdditionalClassList,
[nameof(Style)] = Style,
[nameof(Tag)] = Tag, [nameof(Tag)] = Tag,
[nameof(TitleContent)] = TitleContent, [nameof(TitleContent)] = TitleContent,
[nameof(DialogContent)] = DialogContent, [nameof(DialogContent)] = DialogContent,

8
src/Connected.Components/Components/Dialog/DialogInstance.razor
Unescape View File

@ -1,12 +1,12 @@
@namespace Connected.Components @namespace Connected.Components
@inherits UIComponent @inherits UIComponent
<div @attributes="UserAttributes" id="@_elementId" class="mud-dialog-container @Position"> <div @attributes="CustomAttributes" id="@_elementId" class="dialog-container @Position">
<Overlay Visible="true" OnClick="HandleBackgroundClick" Class="mud-overlay-dialog" DarkBackground="true" /> <Overlay Visible="true" OnClick="HandleBackgroundClick" Class="overlay-dialog" DarkBackground="true" />
<div id="_@Id.ToString("N")" role="dialog" class="@Classname" style="@Style"> <div id="_@Id.ToString("N")" role="dialog" class="@Classname">
@if (!NoHeader) @if (!NoHeader)
{ {
<div class="mud-dialog-title"> <div class="dialog-title">
@if (TitleContent == null) @if (TitleContent == null)
{ {
<TextContent Typo="Typo.h6">@Title</TextContent> <TextContent Typo="Typo.h6">@Title</TextContent>

21
src/Connected.Components/Components/Dialog/DialogInstance.razor.cs
Unescape View File

@ -84,7 +84,7 @@ public partial class DialogInstance : UIComponent, IDisposable
await _keyInterceptor.Connect(_elementId, new KeyInterceptorOptions() await _keyInterceptor.Connect(_elementId, new KeyInterceptorOptions()
{ {
TargetClass = "mud-dialog", TargetClass = "dialog",
Keys = { Keys = {
new KeyOptions { Key="Escape", SubscribeDown = true }, new KeyOptions { Key="Escape", SubscribeDown = true },
}, },
@ -172,7 +172,7 @@ public partial class DialogInstance : UIComponent, IDisposable
FullScreen = SetFulScreen(); FullScreen = SetFulScreen();
DisableBackdropClick = SetDisableBackdropClick(); DisableBackdropClick = SetDisableBackdropClick();
CloseOnEscapeKey = SetCloseOnEscapeKey(); CloseOnEscapeKey = SetCloseOnEscapeKey();
Class = Classname; //AdditionalClassList = Classname;
} }
private string SetPosition() private string SetPosition()
@ -191,7 +191,7 @@ public partial class DialogInstance : UIComponent, IDisposable
{ {
position = DialogPosition.Center; position = DialogPosition.Center;
} }
return $"mud-dialog-{position.ToDescriptionString()}"; return $"dialog-{position.ToDescription()}";
} }
private string SetMaxWidth() private string SetMaxWidth()
@ -210,7 +210,7 @@ public partial class DialogInstance : UIComponent, IDisposable
{ {
maxWidth = MaxWidth.Small; maxWidth = MaxWidth.Small;
} }
return $"mud-dialog-width-{maxWidth.ToDescriptionString()}"; return $"dialog-width-{maxWidth.ToDescription()}";
} }
private bool SetFullWidth() private bool SetFullWidth()
@ -236,12 +236,12 @@ public partial class DialogInstance : UIComponent, IDisposable
} }
protected string Classname => protected string Classname =>
new CssBuilder("mud-dialog") new CssBuilder("dialog")
.AddClass(DialogMaxWidth, !FullScreen) .AddClass(DialogMaxWidth, !FullScreen)
.AddClass("mud-dialog-width-full", FullWidth && !FullScreen) .AddClass("dialog-width-full", FullWidth && !FullScreen)
.AddClass("mud-dialog-fullscreen", FullScreen) .AddClass("dialog-fullscreen", FullScreen)
.AddClass("mud-dialog-rtl", RightToLeft) .AddClass("dialog-rtl", RightToLeft)
.AddClass(_dialog?.Class) .AddClass(_dialog?.AdditionalClassList)
.Build(); .Build();
private bool SetHideHeader() private bool SetHideHeader()
@ -310,8 +310,7 @@ public partial class DialogInstance : UIComponent, IDisposable
if (dialog == null) if (dialog == null)
return; return;
_dialog = dialog; _dialog = dialog;
Class = dialog.Class; //AdditionalClassList = dialog.AdditionalClassList;
Style = dialog.Style;
TitleContent = dialog.TitleContent; TitleContent = dialog.TitleContent;
StateHasChanged(); StateHasChanged();
} }

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

Write Preview
Loading…
Cancel
Save