diff --git a/AppBar/src/AppBar.csproj b/AppBar/src/AppBar.csproj
index fd61bd2..e516356 100644
--- a/AppBar/src/AppBar.csproj
+++ b/AppBar/src/AppBar.csproj
@@ -1,10 +1,9 @@
- 2.0.1
+ 5.0.0
$(VersionSuffix)
- netstandard2.1
- 3.0
+ net5.0
Skclusive.Material.AppBar
Skclusive.Material.AppBar
Skclusive.Material.AppBar
@@ -17,8 +16,7 @@
-
-
+
diff --git a/AppBar/src/AppBar/AppBar.razor b/AppBar/src/AppBar/AppBar.razor
index d124ee9..998385e 100644
--- a/AppBar/src/AppBar/AppBar.razor
+++ b/AppBar/src/AppBar/AppBar.razor
@@ -1,5 +1,5 @@
@namespace Skclusive.Material.AppBar
-@inherits AppBarComponent
+@inherits MaterialComponent
-
- .AppBar-Root {
- width: 100%;
- display: flex;
- z-index: var(--theme-zindex-appbar, 1100);
- box-sizing: border-box;
- flex-shrink: 0;
- flex-direction: column;
- }
-
- .AppBar-Position-Fixed {
- top: 0;
- left: auto;
- right: 0;
- position: fixed;
- }
-
- .AppBar-Position-Absolute {
- top: 0;
- left: auto;
- right: 0;
- position: absolute;
- }
-
- .AppBar-Position-Sticky {
- top: 0;
- left: auto;
- right: 0;
- position: sticky;
- }
-
- .AppBar-Position-Static {
- position: static;
- transform: translateZ(0);
- }
-
- .AppBar-Position-Relative {
- position: relative;
- }
-
- .AppBar-Color-Default {
- color: var(--theme-palette-grey300-contrast-text, rgba(0, 0, 0, 0.87));
- background-color: var(--theme-palette-grey-background-default, #f5f5f5);
- }
-
- .AppBar-Color-Primary {
- color: var(--theme-palette-primary-contrast-text, #fff);
- background-color: var(--theme-palette-primary-main, #1976d2);
- }
-
- .AppBar-Color-Secondary {
- color: var(--theme-palette-secondary-contrast-text, #fff);
- background-color: var(--theme-palette-secondary-main, rgb(220, 0, 78));
- }
-
- .AppBar-Color-Custom {
- color: var(--theme-custom-palette-primary-contrast-text, #fff);
- background-color: var(--theme-custom-palette-primary-main, #1976d2);
- }
-
-
\ No newline at end of file
+.AppBar-Root {
+ width: 100%;
+ display: flex;
+ z-index: var(--theme-zindex-appbar);
+ box-sizing: border-box;
+ flex-shrink: 0;
+ flex-direction: column;
+}
+
+.AppBar-Position-Fixed {
+ top: 0;
+ left: auto;
+ right: 0;
+ position: fixed;
+}
+
+.AppBar-Position-Absolute {
+ top: 0;
+ left: auto;
+ right: 0;
+ position: absolute;
+}
+
+.AppBar-Position-Sticky {
+ top: 0;
+ left: auto;
+ right: 0;
+ position: sticky;
+}
+
+.AppBar-Position-Static {
+ position: static;
+ transform: translateZ(0);
+}
+
+.AppBar-Position-Relative {
+ position: relative;
+}
+
+.AppBar-Color-Default {
+ color: var(--theme-palette-grey-contrast-text-default);
+ background-color: var(--theme-palette-grey-background-default);
+}
+
+.AppBar-Color-Primary {
+ color: var(--theme-palette-primary-contrast-text);
+ background-color: var(--theme-palette-primary-main);
+}
+
+.AppBar-Color-Secondary {
+ color: var(--theme-palette-secondary-contrast-text);
+ background-color: var(--theme-palette-secondary-main);
+}
+
+.AppBar-Color-Custom {
+ color: var(--theme-custom-palette-primary-contrast-text);
+ background-color: var(--theme-custom-palette-primary-main);
+}
\ No newline at end of file
diff --git a/AppBar/src/Extension/AppBarExtension.cs b/AppBar/src/Extension/AppBarExtension.cs
new file mode 100644
index 0000000..122f83f
--- /dev/null
+++ b/AppBar/src/Extension/AppBarExtension.cs
@@ -0,0 +1,18 @@
+using Microsoft.Extensions.DependencyInjection;
+using Skclusive.Core.Component;
+using Skclusive.Material.Core;
+using Skclusive.Material.Paper;
+
+namespace Skclusive.Material.AppBar
+{
+ public static class AppBarExtension
+ {
+ public static void TryAddAppBarServices(this IServiceCollection services, IMaterialConfig config)
+ {
+ // Theme service would be added by Paper
+ services.TryAddPaperServices(config);
+
+ services.TryAddStyleTypeProvider();
+ }
+ }
+}
diff --git a/AppBar/src/Provider/AppBarStyleProvider.cs b/AppBar/src/Provider/AppBarStyleProvider.cs
new file mode 100644
index 0000000..1db2915
--- /dev/null
+++ b/AppBar/src/Provider/AppBarStyleProvider.cs
@@ -0,0 +1,11 @@
+using Skclusive.Core.Component;
+
+namespace Skclusive.Material.AppBar
+{
+ public class AppBarStyleProvider : StyleTypeProvider
+ {
+ public AppBarStyleProvider() : base(typeof(AppBarStyle))
+ {
+ }
+ }
+}
\ No newline at end of file
diff --git a/Avatar/src/Avatar.csproj b/Avatar/src/Avatar.csproj
index 0bd8ca4..7696e7a 100644
--- a/Avatar/src/Avatar.csproj
+++ b/Avatar/src/Avatar.csproj
@@ -1,10 +1,9 @@
- 2.0.1
+ 5.0.0
$(VersionSuffix)
- netstandard2.1
- 3.0
+ net5.0
Skclusive.Material.Avatar
Skclusive.Material.Avatar
Skclusive.Material.Avatar
@@ -17,7 +16,7 @@
-
+
diff --git a/Avatar/src/Avatar/Avatar.razor b/Avatar/src/Avatar/Avatar.razor
index 58fec6e..dee29d5 100644
--- a/Avatar/src/Avatar/Avatar.razor
+++ b/Avatar/src/Avatar/Avatar.razor
@@ -1,11 +1,14 @@
@namespace Skclusive.Material.Avatar
-@inherits AvatarComponent
+@inherits MaterialComponent
@if (IsImage)
{
diff --git a/Avatar/src/Avatar/Avatar.cs b/Avatar/src/Avatar/Avatar.razor.cs
similarity index 91%
rename from Avatar/src/Avatar/Avatar.cs
rename to Avatar/src/Avatar/Avatar.razor.cs
index f9cbbfd..ad48afe 100644
--- a/Avatar/src/Avatar/Avatar.cs
+++ b/Avatar/src/Avatar/Avatar.razor.cs
@@ -7,9 +7,9 @@
namespace Skclusive.Material.Avatar
{
- public class AvatarComponent : MaterialComponent
+ public partial class Avatar : MaterialComponent
{
- public AvatarComponent() : base("Avatar")
+ public Avatar() : base("Avatar")
{
}
@@ -98,5 +98,10 @@ protected virtual IEnumerable ImageClasses
yield return "Image";
}
}
+
+ [CascadingParameter]
+ public IAvatarContext AvatarContext { set; get; }
+
+ protected override IComponentContext _Context => AvatarContext;
}
}
diff --git a/Avatar/src/Avatar/AvatarStyle.razor b/Avatar/src/Avatar/AvatarStyle.razor
index e903b5e..3947757 100644
--- a/Avatar/src/Avatar/AvatarStyle.razor
+++ b/Avatar/src/Avatar/AvatarStyle.razor
@@ -1,35 +1,30 @@
@namespace Skclusive.Material.Avatar
@inherits StyleComponentBase
-
+.Avatar-Root {
+ font-family: var(--theme-typography-font-family);
+ font-size: var(--theme-typography-font-size-medium);
+ width: 40px;
+ height: 40px;
+ display: flex;
+ position: relative;
+ overflow: hidden;
+ flex-shrink: 0;
+ align-items: center;
+ user-select: none;
+ border-radius: 50%;
+ line-height: 1;
+ justify-content: center;
+}
- .Avatar-Root {
- font-family: var(--theme-typography-font-family, "Roboto", "Helvetica", "Arial", sans-serif);
- font-size: var(--theme-typography-font-size-medium, 1.25rem);
- width: 40px;
- height: 40px;
- display: flex;
- position: relative;
- overflow: hidden;
- flex-shrink: 0;
- align-items: center;
- user-select: none;
- border-radius: 50%;
- line-height: 1;
- justify-content: center;
- }
+.Avatar-Color-Default {
+ color: var(--theme-palette-background-default);
+ background-color: var(--theme-component-avatar-background);
+}
- .Avatar-Color-Default {
- color: var(--theme-palette-background-default, #fff);
- background-color: var(--theme-palette-grey, #bdbdbd);
- }
-
- .Avatar-Image {
- width: 100%;
- height: 100%;
- text-align: center;
- object-fit: cover;
- }
-
-
\ No newline at end of file
+.Avatar-Image {
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ object-fit: cover;
+}
\ No newline at end of file
diff --git a/Avatar/src/Avatar/IAvatarContext.cs b/Avatar/src/Avatar/IAvatarContext.cs
new file mode 100644
index 0000000..f871d3c
--- /dev/null
+++ b/Avatar/src/Avatar/IAvatarContext.cs
@@ -0,0 +1,24 @@
+using Skclusive.Core.Component;
+
+namespace Skclusive.Material.Avatar
+{
+ public interface IAvatarContext : IComponentContext
+ {
+ }
+
+ public class AvatarContextBuilder : ComponentContextBuilder
+ {
+ protected class AvatarContext : ComponentContext, IAvatarContext
+ {
+ }
+
+ public AvatarContextBuilder() : base(new AvatarContext())
+ {
+ }
+
+ protected override AvatarContextBuilder This()
+ {
+ return this;
+ }
+ }
+}
\ No newline at end of file
diff --git a/Avatar/src/Extension/AvatarExtension.cs b/Avatar/src/Extension/AvatarExtension.cs
new file mode 100644
index 0000000..ca77200
--- /dev/null
+++ b/Avatar/src/Extension/AvatarExtension.cs
@@ -0,0 +1,19 @@
+using Microsoft.Extensions.DependencyInjection;
+using Skclusive.Core.Component;
+using Skclusive.Material.Core;
+using Skclusive.Material.Theme;
+
+namespace Skclusive.Material.Avatar
+{
+ public static class AvatarExtension
+ {
+ public static void TryAddAvatarServices(this IServiceCollection services, IMaterialConfig config)
+ {
+ services.TryAddThemeServices(config);
+
+ services.TryAddStyleTypeProvider();
+
+ services.TryAddStyleProducer();
+ }
+ }
+}
diff --git a/Avatar/src/Producer/AvatarStyleProducer.cs b/Avatar/src/Producer/AvatarStyleProducer.cs
new file mode 100644
index 0000000..7054927
--- /dev/null
+++ b/Avatar/src/Producer/AvatarStyleProducer.cs
@@ -0,0 +1,22 @@
+using System.Collections.Generic;
+using System.Globalization;
+using Skclusive.Core.Component;
+using Skclusive.Material.Theme;
+
+namespace Skclusive.Material.Avatar
+{
+ public class AvatarStyleProducer : IStyleProducer
+ {
+ public IDictionary Variables(ThemeValue theme)
+ {
+ var isDark = theme.IsDark();
+
+ var palette = theme.Palette;
+
+ return new Dictionary
+ {
+ { "--theme-component-avatar-background", (isDark ? palette.Grey.X600 : palette.Grey.X400).ToString(CultureInfo.InvariantCulture) }
+ };
+ }
+ }
+}
\ No newline at end of file
diff --git a/Avatar/src/Provider/AvatarStyleProvider.cs b/Avatar/src/Provider/AvatarStyleProvider.cs
new file mode 100644
index 0000000..190fc00
--- /dev/null
+++ b/Avatar/src/Provider/AvatarStyleProvider.cs
@@ -0,0 +1,11 @@
+using Skclusive.Core.Component;
+
+namespace Skclusive.Material.Avatar
+{
+ public class AvatarStyleProvider : StyleTypeProvider
+ {
+ public AvatarStyleProvider() : base(typeof(AvatarStyle))
+ {
+ }
+ }
+}
\ No newline at end of file
diff --git a/Badge/src/Badge.csproj b/Badge/src/Badge.csproj
index aaee754..7c443b7 100644
--- a/Badge/src/Badge.csproj
+++ b/Badge/src/Badge.csproj
@@ -1,10 +1,9 @@
- 2.0.1
+ 5.0.0
$(VersionSuffix)
- netstandard2.1
- 3.0
+ net5.0
Skclusive.Material.Badge
Skclusive.Material.Badge
Skclusive.Material.Badge
@@ -17,7 +16,7 @@
-
+
diff --git a/Badge/src/Badge/Badge.razor b/Badge/src/Badge/Badge.razor
index 51a7fb4..c1ddde4 100644
--- a/Badge/src/Badge/Badge.razor
+++ b/Badge/src/Badge/Badge.razor
@@ -1,11 +1,14 @@
@namespace Skclusive.Material.Badge
-@inherits BadgeComponent
+@inherits MaterialComponent
@ChildContent
[Parameter]
- public string Badge { set; get; }
+ public string BadgeText { set; get; }
///
/// If the badge value is component use BadgeContent
@@ -95,7 +95,7 @@ public BadgeComponent() : base("Badge")
protected int? BadgeNumber
{
- get => int.TryParse(Badge, out int result) ? (int?)result : null;
+ get => int.TryParse(BadgeText, out int result) ? (int?)result : null;
}
protected bool BadgeInvisible
@@ -114,7 +114,7 @@ protected bool BadgeInvisible
return true;
}
- if (string.IsNullOrEmpty(Badge) && BadgeContent == null && Variant != BadgeVariant.Dot)
+ if (string.IsNullOrEmpty(BadgeText) && BadgeContent == null && Variant != BadgeVariant.Dot)
{
return true;
}
@@ -139,7 +139,7 @@ protected string BadgeDisplay
return $"{Max}+";
}
- return Badge;
+ return BadgeText;
}
}
diff --git a/Badge/src/Badge/BadgeStyle.razor b/Badge/src/Badge/BadgeStyle.razor
index 404a9b7..98c5709 100644
--- a/Badge/src/Badge/BadgeStyle.razor
+++ b/Badge/src/Badge/BadgeStyle.razor
@@ -1,150 +1,143 @@
@namespace Skclusive.Material.Badge
@inherits StyleComponentBase
-
-
- .Badge-Root {
- display: inline-flex;
- position: relative;
- vertical-align: middle;
- flex-shrink: 0;
- }
-
- .Badge-Badge {
- font-family: var(--theme-typography-font-family, "Roboto", "Helvetica", "Arial", sans-serif);
- font-size: var(--theme-typography-font-size-normal, 0.75rem);
- font-weight: var(--theme-typography-font-weight-medium, 500);
- /* color: var(--theme-palette-text-color, ''); */
- /* background-color: var(--theme-palette-color, ''); */
- height: 20px;
- display: flex;
- padding: 0 6px;
- z-index: 1;
- position: absolute;
- flex-wrap: wrap;
- min-width: 20px;
- box-sizing: border-box;
- transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
- align-items: center;
- line-height: 1;
- align-content: center;
- border-radius: 10px;
- flex-direction: row;
- justify-content: center;
- }
-
- .Badge-Color-Primary {
- color: var(--theme-palette-primary-contrast-text, #fff);
- background-color: var(--theme-palette-primary-main, #1976d2);
- }
-
- .Badge-Color-Secondary {
- color: var(--theme-palette-secondary-contrast-text, #fff);
- background-color: var(--theme-palette-secondary-main, rgb(220, 0, 78));
- }
-
- .Badge-Color-Error {
- color: var(--theme-palette-error-contrast-text, #fff);
- background-color: var(--theme-palette-error-main, #f44336);
- }
-
- .Badge-Dot {
- height: 6px;
- padding: 0;
- min-width: 6px;
- }
-
- .Badge-Top-Right-Rectangle {
- top: 0;
- right: 0;
- transform: scale(1) translate(50%, -50%);
- transform-origin: 100% 0%;
- }
-
- .Badge-Top-Right-Rectangle.Badge-Invisible {
- transform: scale(0) translate(50%, -50%);
- }
-
- .Badge-Bottom-Right-Rectangle {
- right: 0;
- bottom: 0;
- transform: scale(1) translate(50%, 50%);
- transform-origin: 100% 100%;
- }
-
- .Badge-Bottom-Right-Rectangle.Badge-Invisible {
- transform: scale(0) translate(50%, 50%);
- }
-
- .Badge-Top-Left-Rectangle {
- top: 0;
- left: 0;
- transform: scale(1) translate(-50%, -50%);
- transform-origin: 0% 0%;
- }
-
- .Badge-Top-Left-Rectangle.Badge-Invisible {
- transform: scale(0) translate(-50%, -50%);
- }
-
- .Badge-Bottom-Left-Rectangle {
- left: 0;
- bottom: 0;
- transform: scale(1) translate(-50%, 50%);
- transform-origin: 0% 100%;
- }
-
- .Badge-Bottom-Left-Rectangle.Badge-Invisible {
- transform: scale(0) translate(-50%, 50%);
- }
-
- .Badge-Top-Right-Circle {
- top: 14%;
- right: 14%;
- transform: scale(1) translate(50%, -50%);
- transform-origin: 100% 0%;
- }
-
- .Badge-Top-Right-Circle.Badge-Invisible {
- transform: scale(0) translate(50%, -50%);
- }
-
- .Badge-Bottom-Right-Circle {
- right: 14%;
- bottom: 14%;
- transform: scale(1) translate(50%, 50%);
- transform-origin: 100% 100%;
- }
-
- .Badge-Bottom-Right-Circle.Badge-Invisible {
- transform: scale(0) translate(50%, 50%);
- }
-
- .Badge-Top-Left-Circle {
- top: 14%;
- left: 14%;
- transform: scale(1) translate(-50%, -50%);
- transform-origin: 0% 0%;
- }
-
- .Badge-Top-Left-Circle.Badge-Invisible {
- transform: scale(0) translate(-50%, -50%);
- }
-
- .Badge-Bottom-Left-Circle {
- left: 14%;
- bottom: 14%;
- transform: scale(1) translate(-50%, 50%);
- transform-origin: 0% 100%;
- }
-
- .Badge-Bottom-Left-Circle.Badge-Invisible {
- transform: scale(0) translate(-50%, 50%);
- }
-
- .Badge-Invisible {
- transition: transform 195ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
- }
-
-
\ No newline at end of file
+.Badge-Root {
+ display: inline-flex;
+ position: relative;
+ vertical-align: middle;
+ flex-shrink: 0;
+}
+
+.Badge-Badge {
+ font-family: var(--theme-typography-font-family);
+ font-size: var(--theme-typography-font-size-normal);
+ font-weight: var(--theme-typography-font-weight-medium);
+ height: 20px;
+ display: flex;
+ padding: 0 6px;
+ z-index: 1;
+ position: absolute;
+ flex-wrap: wrap;
+ min-width: 20px;
+ box-sizing: border-box;
+ transition: transform 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+ align-items: center;
+ line-height: 1;
+ align-content: center;
+ border-radius: 10px;
+ flex-direction: row;
+ justify-content: center;
+}
+
+.Badge-Color-Primary {
+ color: var(--theme-palette-primary-contrast-text);
+ background-color: var(--theme-palette-primary-main);
+}
+
+.Badge-Color-Secondary {
+ color: var(--theme-palette-secondary-contrast-text);
+ background-color: var(--theme-palette-secondary-main);
+}
+
+.Badge-Color-Error {
+ color: var(--theme-palette-error-contrast-text);
+ background-color: var(--theme-palette-error-main);
+}
+
+.Badge-Dot {
+ height: 6px;
+ padding: 0;
+ min-width: 6px;
+}
+
+.Badge-Top-Right-Rectangle {
+ top: 0;
+ right: 0;
+ transform: scale(1) translate(50%, -50%);
+ transform-origin: 100% 0%;
+}
+
+.Badge-Top-Right-Rectangle.Badge-Invisible {
+ transform: scale(0) translate(50%, -50%);
+}
+
+.Badge-Bottom-Right-Rectangle {
+ right: 0;
+ bottom: 0;
+ transform: scale(1) translate(50%, 50%);
+ transform-origin: 100% 100%;
+}
+
+.Badge-Bottom-Right-Rectangle.Badge-Invisible {
+ transform: scale(0) translate(50%, 50%);
+}
+
+.Badge-Top-Left-Rectangle {
+ top: 0;
+ left: 0;
+ transform: scale(1) translate(-50%, -50%);
+ transform-origin: 0% 0%;
+}
+
+.Badge-Top-Left-Rectangle.Badge-Invisible {
+ transform: scale(0) translate(-50%, -50%);
+}
+
+.Badge-Bottom-Left-Rectangle {
+ left: 0;
+ bottom: 0;
+ transform: scale(1) translate(-50%, 50%);
+ transform-origin: 0% 100%;
+}
+
+.Badge-Bottom-Left-Rectangle.Badge-Invisible {
+ transform: scale(0) translate(-50%, 50%);
+}
+
+.Badge-Top-Right-Circle {
+ top: 14%;
+ right: 14%;
+ transform: scale(1) translate(50%, -50%);
+ transform-origin: 100% 0%;
+}
+
+.Badge-Top-Right-Circle.Badge-Invisible {
+ transform: scale(0) translate(50%, -50%);
+}
+
+.Badge-Bottom-Right-Circle {
+ right: 14%;
+ bottom: 14%;
+ transform: scale(1) translate(50%, 50%);
+ transform-origin: 100% 100%;
+}
+
+.Badge-Bottom-Right-Circle.Badge-Invisible {
+ transform: scale(0) translate(50%, 50%);
+}
+
+.Badge-Top-Left-Circle {
+ top: 14%;
+ left: 14%;
+ transform: scale(1) translate(-50%, -50%);
+ transform-origin: 0% 0%;
+}
+
+.Badge-Top-Left-Circle.Badge-Invisible {
+ transform: scale(0) translate(-50%, -50%);
+}
+
+.Badge-Bottom-Left-Circle {
+ left: 14%;
+ bottom: 14%;
+ transform: scale(1) translate(-50%, 50%);
+ transform-origin: 0% 100%;
+}
+
+.Badge-Bottom-Left-Circle.Badge-Invisible {
+ transform: scale(0) translate(-50%, 50%);
+}
+
+.Badge-Invisible {
+ transition: transform 195ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+}
\ No newline at end of file
diff --git a/Badge/src/Extension/BadgeExtension.cs b/Badge/src/Extension/BadgeExtension.cs
new file mode 100644
index 0000000..1506793
--- /dev/null
+++ b/Badge/src/Extension/BadgeExtension.cs
@@ -0,0 +1,17 @@
+using Microsoft.Extensions.DependencyInjection;
+using Skclusive.Core.Component;
+using Skclusive.Material.Core;
+using Skclusive.Material.Theme;
+
+namespace Skclusive.Material.Badge
+{
+ public static class BadgeExtension
+ {
+ public static void TryAddBadgeServices(this IServiceCollection services, IMaterialConfig config)
+ {
+ services.TryAddThemeServices(config);
+
+ services.TryAddStyleTypeProvider();
+ }
+ }
+}
diff --git a/Badge/src/Provider/BadgeStyleProvider.cs b/Badge/src/Provider/BadgeStyleProvider.cs
new file mode 100644
index 0000000..201d568
--- /dev/null
+++ b/Badge/src/Provider/BadgeStyleProvider.cs
@@ -0,0 +1,11 @@
+using Skclusive.Core.Component;
+
+namespace Skclusive.Material.Badge
+{
+ public class BadgeStyleProvider : StyleTypeProvider
+ {
+ public BadgeStyleProvider() : base(typeof(BadgeStyle))
+ {
+ }
+ }
+}
\ No newline at end of file
diff --git a/Baseline/src/Baseline.csproj b/Baseline/src/Baseline.csproj
index fefb943..2696a84 100644
--- a/Baseline/src/Baseline.csproj
+++ b/Baseline/src/Baseline.csproj
@@ -1,10 +1,9 @@
- 2.0.1
+ 5.0.0
$(VersionSuffix)
- netstandard2.1
- 3.0
+ net5.0
Skclusive.Material.Baseline
Skclusive.Material.Baseline
Skclusive.Material.Baseline
@@ -17,7 +16,7 @@
-
+
diff --git a/Baseline/src/Baseline/Baseline.razor b/Baseline/src/Baseline/Baseline.razor
index fb9c844..fbf9253 100644
--- a/Baseline/src/Baseline/Baseline.razor
+++ b/Baseline/src/Baseline/Baseline.razor
@@ -1,4 +1,4 @@
@namespace Skclusive.Material.Baseline
-@inherits BaselineComponent
+@inherits MaterialComponent
@ChildContent
diff --git a/Baseline/src/Baseline/Baseline.cs b/Baseline/src/Baseline/Baseline.razor.cs
similarity index 50%
rename from Baseline/src/Baseline/Baseline.cs
rename to Baseline/src/Baseline/Baseline.razor.cs
index 5006bdc..e573a6a 100644
--- a/Baseline/src/Baseline/Baseline.cs
+++ b/Baseline/src/Baseline/Baseline.razor.cs
@@ -2,9 +2,9 @@
namespace Skclusive.Material.Baseline
{
- public class BaselineComponent : MaterialComponent
+ public partial class Baseline : MaterialComponent
{
- public BaselineComponent() : base("Baseline")
+ public Baseline() : base("Baseline")
{
}
}
diff --git a/Baseline/src/Baseline/BaselineStyle.razor b/Baseline/src/Baseline/BaselineStyle.razor
index c049ede..ce03742 100644
--- a/Baseline/src/Baseline/BaselineStyle.razor
+++ b/Baseline/src/Baseline/BaselineStyle.razor
@@ -1,42 +1,37 @@
@namespace Skclusive.Material.Baseline
@inherits StyleComponentBase
-
-
- html {
- box-sizing: border-box;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- }
-
- *, *::before, *::after {
- box-sizing: inherit;
- }
-
- strong, b {
- font-weight: bolder;
- }
-
+html {
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+*, *::before, *::after {
+ box-sizing: inherit;
+}
+
+strong, b {
+ font-weight: bolder;
+}
+
+body {
+ color: var(--theme-palette-text-primary);
+ margin: 0;
+ font-size: var(--theme-typography-body2-font-size);
+ font-family: var(--theme-typography-body2-font-family);
+ font-weight: var(--theme-typography-body2-font-weight);
+ line-height: var(--theme-typography-body2-line-height);
+ letter-spacing: var(--theme-typography-body2-letter-spacing);
+ background-color: var(--theme-palette-background-default);
+}
+
+@media print {
body {
- color: var(--theme-palette-text-primary, rgba(0, 0, 0, 0.87));
- margin: 0;
- font-size: var(--theme-typography-body2-font-size, 0.875rem);
- font-family: var(--theme-typography-body2-font-family, "Roboto", "Helvetica", "Arial", sans-serif);
- font-weight: var(--theme-typography-body2-font-weight, 400);
- line-height: var(--theme-typography-body2-line-height, 1.43);
- letter-spacing: var(--theme-typography-body2-letter-spacing, 0.01071em);
- background-color: var(--theme-palette-background-default, #fff);
- }
-
- @media print {
- body {
- background-color: var(--theme-palette-common-white, #fff);
- }
- }
-
- body::backdrop {
- background-color: var(--theme-palette-background-default, #fff);
+ background-color: var(--theme-palette-common-white);
}
+}
-
\ No newline at end of file
+body::backdrop {
+ background-color: var(--theme-palette-background-default);
+}
\ No newline at end of file
diff --git a/Baseline/src/Extension/BaselineExtension.cs b/Baseline/src/Extension/BaselineExtension.cs
new file mode 100644
index 0000000..636a201
--- /dev/null
+++ b/Baseline/src/Extension/BaselineExtension.cs
@@ -0,0 +1,17 @@
+using Microsoft.Extensions.DependencyInjection;
+using Skclusive.Core.Component;
+using Skclusive.Material.Core;
+using Skclusive.Material.Theme;
+
+namespace Skclusive.Material.Baseline
+{
+ public static class BaselineExtension
+ {
+ public static void TryAddBaselineServices(this IServiceCollection services, IMaterialConfig config)
+ {
+ services.TryAddThemeServices(config);
+
+ services.TryAddStyleTypeProvider();
+ }
+ }
+}
diff --git a/Baseline/src/Provider/BaselineStyleProvider.cs b/Baseline/src/Provider/BaselineStyleProvider.cs
new file mode 100644
index 0000000..94f572b
--- /dev/null
+++ b/Baseline/src/Provider/BaselineStyleProvider.cs
@@ -0,0 +1,11 @@
+using Skclusive.Core.Component;
+
+namespace Skclusive.Material.Baseline
+{
+ public class BaselineStyleProvider : StyleTypeProvider
+ {
+ public BaselineStyleProvider() : base(typeof(BaselineStyle))
+ {
+ }
+ }
+}
\ No newline at end of file
diff --git a/Button/src/Button.csproj b/Button/src/Button.csproj
index b1cc2b4..94bcc59 100644
--- a/Button/src/Button.csproj
+++ b/Button/src/Button.csproj
@@ -1,10 +1,9 @@
- 2.0.1
+ 5.0.0
$(VersionSuffix)
- netstandard2.1
- 3.0
+ net5.0
Skclusive.Material.Button
Skclusive.Material.Button
Skclusive.Material.Button
@@ -17,8 +16,7 @@
-
-
+
diff --git a/Button/src/Button/Button.razor b/Button/src/Button/Button.razor
index 6227414..ad8b234 100644
--- a/Button/src/Button/Button.razor
+++ b/Button/src/Button/Button.razor
@@ -1,5 +1,5 @@
@namespace Skclusive.Material.Button
-@inherits ButtonComponent
+@inherits ButtonCommon
/// The of the button.
///
diff --git a/Button/src/Button/ButtonStyle.razor b/Button/src/Button/ButtonStyle.razor
index 95dda44..fd726e8 100644
--- a/Button/src/Button/ButtonStyle.razor
+++ b/Button/src/Button/ButtonStyle.razor
@@ -1,310 +1,251 @@
@namespace Skclusive.Material.Button
@inherits StyleComponentBase
-
-
- .Button-Root {
- color: var(--theme-palette-text-primary, rgba(0, 0, 0, 0.87));
- border-radius: calc(var(--theme-shape-border-radius, 4) * 1px);
- padding: 6px 16px;
- min-width: 64px;
- box-sizing: border-box;
- transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
- box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
- border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
- font-size: var(--theme-typography-button-font-size, 0.875rem);
- font-family: var(
- --theme-typography-button-font-family,
- "Roboto",
- "Helvetica",
- "Arial",
- sans-serif
- );
- font-weight: var(--theme-typography-button-font-weight, 500);
- line-height: var(--theme-typography-button-line-height, 1.75);
- letter-spacing: var(--theme-typography-button-letter-spacing, 0.02857em);
- text-transform: var(--theme-typography-button-text-transform, uppercase);
- }
-
+.Button-Root {
+ color: var(--theme-palette-text-primary);
+ border-radius: calc(var(--theme-shape-border-radius) * 1px);
+ padding: 6px 16px;
+ min-width: 64px;
+ box-sizing: border-box;
+ transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+ box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+ border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+ font-size: var(--theme-typography-button-font-size);
+ font-family: var(--theme-typography-button-font-family);
+ font-weight: var(--theme-typography-button-font-weight);
+ line-height: var(--theme-typography-button-line-height);
+ letter-spacing: var(--theme-typography-button-letter-spacing);
+ text-transform: var(--theme-typography-button-text-transform);
+}
+
+.Button-Root:hover {
+ text-decoration: none;
+ background-color: var(--theme-palette-primary-hover);
+}
+
+.Button-Root.Button-Disabled {
+ color: var(--theme-palette-action-disabled);
+}
+
+@media (hover: none) {
.Button-Root:hover {
- text-decoration: none;
- background-color: var(
- --theme-palette-text-primary-hover,
- rgba(0, 0, 0, 0.08)
- );
+ background-color: transparent;
}
+}
- .Button-Root.Button-Disabled {
- color: var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26));
- }
+.Button-Root:hover.Button-Disabled {
+ background-color: transparent;
+}
- @media (hover: none) {
- .Button-Root:hover {
- background-color: transparent;
- }
- }
+.Button-Label {
+ width: 100%;
+ display: inherit;
+ align-items: inherit;
+ justify-content: inherit;
+}
- .Button-Root:hover.Button-Disabled {
- background-color: transparent;
- }
+.Button-Text {
+ padding: 6px 8px;
+}
- .Button-Label {
- width: 100%;
- display: inherit;
- align-items: inherit;
- justify-content: inherit;
- }
+.Button-Text-Primary {
+ color: var(--theme-palette-primary-main);
+}
- .Button-Text {
- padding: 6px 8px;
- }
-
- .Button-Text-Primary {
- color: var(--theme-palette-primary-main, #1976d2);
- }
+.Button-Text-Primary:hover {
+ background-color: var(--theme-palette-primary-hover);
+}
+@media (hover: none) {
.Button-Text-Primary:hover {
- background-color: var(
- --theme-palette-primary-main-hover,
- rgba(25, 118, 210, 0.08)
- );
+ background-color: transparent;
}
+}
- @media (hover: none) {
- .Button-Text-Primary:hover {
- background-color: transparent;
- }
- }
+.Button-Text-Secondary {
+ color: var(--theme-palette-secondary-main);
+}
- .Button-Text-Secondary {
- color: var(--theme-palette-secondary-main, rgb(220, 0, 78));
- }
+.Button-Text-Secondary:hover {
+ background-color: var(--theme-palette-secondary-hover);
+}
+@media (hover: none) {
.Button-Text-Secondary:hover {
- background-color: var(
- --theme-palette-secondary-main-hover,
- var(--theme-palette-secondary-main-hover, rgba(220, 0, 78, 0.08))
- );
+ background-color: transparent;
}
+}
- @media (hover: none) {
- .Button-Text-Secondary:hover {
- background-color: transparent;
- }
- }
+.Button-Outlined {
+ border: 1px solid var(--theme-component-button-border-outlined);
+ padding: 5px 15px;
+}
- .Button-Outlined {
- border: 1px solid var(--theme-palette-border-outlined, rgba(0, 0, 0, 0.23));
- padding: 5px 15px;
- }
+.Button-Outlined.Button-Disabled {
+ border: 1px solid var(--theme-palette-action-disabled);
+}
- .Button-Outlined.Button-Disabled {
- border: 1px solid var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26));
- }
+.Button-Outlined-Primary {
+ color: var(--theme-palette-primary-main);
+ border: 1px solid var(--theme-component-button-border-outlined);
+}
- .Button-Outlined-Primary {
- color: var(--theme-palette-primary-main, #1976d2);
- border: 1px solid
- var(--theme-palette-primary-main-border, rgba(25, 118, 210, 0.5));
- }
+.Button-Outlined-Primary:hover {
+ border: 1px solid var(--theme-palette-primary-main);
+ background-color: var(--theme-palette-primary-hover);
+}
+@media (hover: none) {
.Button-Outlined-Primary:hover {
- border: 1px solid var(--theme-palette-primary-main, #1976d2);
- background-color: var(
- --theme-palette-primary-main-hover,
- rgba(25, 118, 210, 0.08)
- );
+ background-color: transparent;
}
+}
- @media (hover: none) {
- .Button-Outlined-Primary:hover {
- background-color: transparent;
- }
- }
+.Button-Outlined-Secondary {
+ color: var(--theme-palette-secondary-main);
+ border: 1px solid var(--theme-palette-secondary-border);
+}
- .Button-Outlined-Secondary {
- color: var(--theme-palette-secondary-main, rgb(220, 0, 78));
- border: 1px solid
- var(--theme-palette-secondary-main-border, rgba(220, 0, 78, 0.5));
- }
+.Button-Outlined-Secondary:hover {
+ border: 1px solid var(--theme-palette-secondary-main);
+ background-color: var(--theme-palette-secondary-hover);
+}
+.Button-Outlined-Secondary.Button-Disabled {
+ border: 1px solid var(--theme-palette-action-disabled);
+}
+
+@media (hover: none) {
.Button-Outlined-Secondary:hover {
- border: 1px solid var(--theme-palette-secondary-main, rgb(220, 0, 78));
- background-color: var(
- --theme-palette-secondary-main-hover,
- rgba(220, 0, 78, 0.08)
- );
+ background-color: transparent;
}
+}
- .Button-Outlined-Secondary.Button-Disabled {
- border: 1px solid var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26));
- }
+.Button-Contained {
+ color: var(--theme-palette-grey300-contrast-text);
+ box-shadow: var(--theme-shadow2);
+ background-color: var(--theme-palette-grey300);
+}
- @media (hover: none) {
- .Button-Outlined-Secondary:hover {
- background-color: transparent;
- }
- }
+.Button-Contained:hover {
+ box-shadow: var(--theme-shadow4);
+ background-color: var(--theme-palette-greyA100);
+}
- .Button-Contained {
- color: var(--theme-palette-grey300-contrast-text, rgba(0, 0, 0, 0.87));
- box-shadow: var(
- --theme-shadow2,
- 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
- 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
- 0px 1px 5px 0px rgba(0, 0, 0, 0.12)
- );
- background-color: var(--theme-palette-grey300, #e0e0e0);
- }
-
- .Button-Contained:hover {
- box-shadow: var(
- --theme-shadow4,
- 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
- 0px 4px 5px 0px rgba(0, 0, 0, 0.14),
- 0px 1px 10px 0px rgba(0, 0, 0, 0.12)
- );
- background-color: var(--theme-palette-grey-A100, #d5d5d5);
- }
+.Button-Contained.Button-FocusVisible {
+ box-shadow: var(--theme-shadow6);
+}
- .Button-Contained.Button-FocusVisible {
- box-shadow: var(
- --theme-shadow6,
- 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
- 0px 6px 10px 0px rgba(0, 0, 0, 0.14),
- 0px 1px 18px 0px rgba(0, 0, 0, 0.12)
- );
- }
+.Button-Contained:active {
+ box-shadow: var(--theme-shadow8);
+}
- .Button-Contained:active {
- box-shadow: var(
- --theme-shadow8,
- 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
- 0px 8px 10px 1px rgba(0, 0, 0, 0.14),
- 0px 3px 14px 2px rgba(0, 0, 0, 0.12)
- );
- }
+.Button-Contained.Button-Disabled {
+ color: var(--theme-palette-action-disabled);
+ box-shadow: none;
+ background-color: var(--theme-palette-action-disabled-background);
+}
- .Button-Contained.Button-Disabled {
- color: var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26));
- box-shadow: none;
- background-color: var(
- --theme-palette-action-disabled-background,
- rgba(0, 0, 0, 0.12)
- );
+@media (hover: none) {
+ .Button-Contained:hover {
+ box-shadow: var(--theme-shadow2);
+ background-color: var(--theme-palette-greyA100);
}
+}
- @media (hover: none) {
- .Button-Contained:hover {
- box-shadow: var(
- --theme-shadow2,
- 0px 3px 1px -2px rgba(0, 0, 0, 0.2),
- 0px 2px 2px 0px rgba(0, 0, 0, 0.14),
- 0px 1px 5px 0px rgba(0, 0, 0, 0.12)
- );
- background-color: #e0e0e0;
- }
- }
+.Button-Contained:hover.Button-Disabled {
+ background-color: var(--theme-palette-action-disabled-background);
+}
- .Button-Contained:hover.Button-Disabled {
- background-color: var(
- --theme-palette-action-disabled-background,
- rgba(0, 0, 0, 0.12)
- );
- }
+.Button-Contained-Primary {
+ color: var(--theme-palette-primary-contrast-text);
+ background-color: var(--theme-palette-primary-main);
+}
- .Button-Contained-Primary {
- color: var(--theme-palette-primary-contrast-text, #fff);
- background-color: var(--theme-palette-primary-main, #1976d2);
- }
+.Button-Contained-Primary:hover {
+ background-color: var(--theme-palette-primary-dark);
+}
+@media (hover: none) {
.Button-Contained-Primary:hover {
- background-color: var(--theme-palette-primary-current, rgb(17, 82, 147));
+ background-color: var(--theme-palette-primary-main);
}
+}
- @media (hover: none) {
- .Button-Contained-Primary:hover {
- background-color: var(--theme-palette-primary-main, #1976d2);
- }
- }
+.Button-Contained-Secondary {
+ color: var(--theme-palette-secondary-contrast-text);
+ background-color: var(--theme-palette-secondary-main);
+}
- .Button-Contained-Secondary {
- color: var(--theme-palette-secondary-contrast-text, #fff);
- background-color: var(--theme-palette-secondary-main, rgb(220, 0, 78));
- }
+.Button-Contained-Secondary:hover {
+ background-color: var(--theme-palette-secondary-dark);
+}
+@media (hover: none) {
.Button-Contained-Secondary:hover {
- background-color: var(--theme-palette-secondary-dark, rgb(154, 0, 54));
- }
-
- @media (hover: none) {
- .Button-Contained-Secondary:hover {
- background-color: var(--theme-palette-secondary-main, rgb(220, 0, 78));
- }
- }
-
- .Button-Color-Inherit {
- color: inherit;
- border-color: currentColor;
- }
-
- .Button-Text-Size-Small {
- padding: 4px 5px;
- font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 13rem);
- }
-
- .Button-Text-Size-Large {
- padding: 8px 11px;
- font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 15rem);
- }
-
- .Button-Outlined-Size-Small {
- padding: 3px 9px;
- font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 13rem);
- }
-
- .Button-Outlined-Size-Large {
- padding: 7px 21px;
- font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 15rem);
- }
-
- .Button-Contained-Size-Small {
- padding: 4px 10px;
- font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 13rem);
- }
-
- .Button-Contained-Size-Large {
- padding: 8px 22px;
- font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 15rem);
- }
-
- .Button-FullWidth {
- width: 100%;
- }
-
- .Button-StartIcon {
- display: inherit;
- margin-left: -4px;
- margin-right: 8px;
- }
-
- .Button-EndIcon {
- display: inherit;
- margin-left: 8px;
- margin-right: -4px;
- }
-
- .Button-Icon-Size-Small > *:first-child {
- font-size: 18px;
- }
-
- .Button-Icon-Size-Medium > *:first-child {
- font-size: 20px;
- }
-
- .Button-Icon-Size-Large > *:first-child {
- font-size: 22px;
- }
-
-
\ No newline at end of file
+ background-color: var(--theme-palette-secondary-main);
+ }
+}
+
+.Button-Color-Inherit {
+ color: inherit;
+ border-color: currentColor;
+}
+
+.Button-Text-Size-Small {
+ padding: 4px 5px;
+ font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 13rem);
+}
+
+.Button-Text-Size-Large {
+ padding: 8px 11px;
+ font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 15rem);
+}
+
+.Button-Outlined-Size-Small {
+ padding: 3px 9px;
+ font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 13rem);
+}
+
+.Button-Outlined-Size-Large {
+ padding: 7px 21px;
+ font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 15rem);
+}
+
+.Button-Contained-Size-Small {
+ padding: 4px 10px;
+ font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 13rem);
+}
+
+.Button-Contained-Size-Large {
+ padding: 8px 22px;
+ font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 15rem);
+}
+
+.Button-FullWidth {
+ width: 100%;
+}
+
+.Button-StartIcon {
+ display: inherit;
+ margin-left: -4px;
+ margin-right: 8px;
+}
+
+.Button-EndIcon {
+ display: inherit;
+ margin-left: 8px;
+ margin-right: -4px;
+}
+
+.Button-Icon-Size-Small > *:first-child {
+ font-size: 18px;
+}
+
+.Button-Icon-Size-Medium > *:first-child {
+ font-size: 20px;
+}
+
+.Button-Icon-Size-Large > *:first-child {
+ font-size: 22px;
+}
\ No newline at end of file
diff --git a/Button/src/ButtonBase/ButtonBase.razor b/Button/src/ButtonBase/ButtonBase.razor
index f67726a..434da8d 100644
--- a/Button/src/ButtonBase/ButtonBase.razor
+++ b/Button/src/ButtonBase/ButtonBase.razor
@@ -1,5 +1,5 @@
@namespace Skclusive.Material.Button
-@inherits ButtonBaseComponent
+@inherits ButtonCommon
@if (Navigation)
{
@@ -16,6 +16,8 @@
Role="@Role"
Disabled="@Disabled"
Tabindex="@((Disabled.HasValue && Disabled.Value) ? -1 : TabIndex)"
+ OnClickStop="@OnClickStop"
+ OnClickPrevent="@OnClickPrevent"
@attributes="Attributes">
@ChildContent(context)
@if(!DisableRipple && !(Disabled.HasValue && Disabled.Value))
@@ -51,6 +53,8 @@ else
OnTouchEnd="@HandleTouchEndAsync"
OnDragLeave="@HandleDragLeaveAsync"
OnClick="@HandleClick"
+ OnClickStop="@OnClickStop"
+ OnClickPrevent="@OnClickPrevent"
@attributes="Attributes">
@ChildContent(context)
@if(!DisableRipple && !(Disabled.HasValue && Disabled.Value))
diff --git a/Button/src/ButtonBase/ButtonBase.cs b/Button/src/ButtonBase/ButtonBase.razor.cs
similarity index 96%
rename from Button/src/ButtonBase/ButtonBase.cs
rename to Button/src/ButtonBase/ButtonBase.razor.cs
index d597674..28ed3d6 100644
--- a/Button/src/ButtonBase/ButtonBase.cs
+++ b/Button/src/ButtonBase/ButtonBase.razor.cs
@@ -8,9 +8,9 @@
namespace Skclusive.Material.Button
{
- public class ButtonBaseComponent : ButtonCommonComponent
+ public partial class ButtonBase : ButtonCommon
{
- public ButtonBaseComponent() : base("ButtonBase")
+ public ButtonBase() : base("ButtonBase")
{
}
@@ -120,12 +120,14 @@ public void MakeFocusVisible()
// return base.SetParametersAsync(parameters);
//}
- protected override void HandleFocus(FocusEventArgs args)
+ protected override Task HandleFocus(FocusEventArgs args)
{
if (!(Disabled.HasValue && Disabled.Value))
{
- base.HandleFocus(args);
+ return base.HandleFocus(args);
}
+
+ return Task.CompletedTask;
}
protected override async Task HandleBlurAsync(FocusEventArgs args)
diff --git a/Button/src/ButtonBase/ButtonBaseStyle.razor b/Button/src/ButtonBase/ButtonBaseStyle.razor
index 1c42341..5a9bb09 100644
--- a/Button/src/ButtonBase/ButtonBaseStyle.razor
+++ b/Button/src/ButtonBase/ButtonBaseStyle.razor
@@ -1,37 +1,32 @@
@namespace Skclusive.Material.Button
@inherits StyleComponentBase
-
+.ButtonBase-Root {
+ color: inherit;
+ border: 0;
+ margin: 0;
+ cursor: pointer;
+ display: inline-flex;
+ outline: 0;
+ padding: 0;
+ position: relative;
+ align-items: center;
+ user-select: none;
+ border-radius: 0;
+ vertical-align: middle;
+ justify-content: center;
+ -moz-appearance: none;
+ text-decoration: none;
+ background-color: transparent;
+ -webkit-appearance: none;
+ -webkit-tap-highlight-color: transparent;
+}
- .ButtonBase-Root {
- color: inherit;
- border: 0;
- margin: 0;
- cursor: pointer;
- display: inline-flex;
- outline: 0;
- padding: 0;
- position: relative;
- align-items: center;
- user-select: none;
- border-radius: 0;
- vertical-align: middle;
- justify-content: center;
- -moz-appearance: none;
- text-decoration: none;
- background-color: transparent;
- -webkit-appearance: none;
- -webkit-tap-highlight-color: transparent;
- }
+.ButtonBase-Root::-moz-focus-inner {
+ border-style: none;
+}
- .ButtonBase-Root::-moz-focus-inner {
- border-style: none;
- }
-
- .ButtonBase-Root.ButtonBase-Disabled {
- cursor: default;
- pointer-events: none;
- }
-
-
\ No newline at end of file
+.ButtonBase-Root.ButtonBase-Disabled {
+ cursor: default;
+ pointer-events: none;
+}
\ No newline at end of file
diff --git a/Button/src/ButtonStyles/ButtonStyles.razor b/Button/src/ButtonStyles/ButtonStyles.razor
deleted file mode 100644
index 50a22a8..0000000
--- a/Button/src/ButtonStyles/ButtonStyles.razor
+++ /dev/null
@@ -1,9 +0,0 @@
-@namespace Skclusive.Material.Button
-@inherits StaticComponentBase
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/Button/src/Common/ButtonCommon.cs b/Button/src/Common/ButtonCommon.cs
index 6038fff..92aa505 100644
--- a/Button/src/Common/ButtonCommon.cs
+++ b/Button/src/Common/ButtonCommon.cs
@@ -7,9 +7,9 @@
namespace Skclusive.Material.Button
{
- public abstract class ButtonCommonComponent : MaterialComponentBase
+ public abstract class ButtonCommon : MaterialComponentBase
{
- protected ButtonCommonComponent(string selector) : base(selector)
+ protected ButtonCommon(string selector) : base(selector)
{
}
diff --git a/Button/src/Extension/ButtonExtension.cs b/Button/src/Extension/ButtonExtension.cs
new file mode 100644
index 0000000..b40b5a4
--- /dev/null
+++ b/Button/src/Extension/ButtonExtension.cs
@@ -0,0 +1,20 @@
+using Microsoft.Extensions.DependencyInjection;
+using Skclusive.Core.Component;
+using Skclusive.Material.Core;
+using Skclusive.Material.Theme;
+using Skclusive.Material.Transition;
+
+namespace Skclusive.Material.Button
+{
+ public static class ButtonExtension
+ {
+ public static void TryAddButtonServices(this IServiceCollection services, IMaterialConfig config)
+ {
+ services.TryAddMaterialTransitionServices(config);
+
+ services.TryAddStyleTypeProvider();
+
+ services.TryAddStyleProducer();
+ }
+ }
+}
diff --git a/Button/src/Fab/Fab.razor b/Button/src/Fab/Fab.razor
index 12cf2ff..71537df 100644
--- a/Button/src/Fab/Fab.razor
+++ b/Button/src/Fab/Fab.razor
@@ -1,5 +1,5 @@
@namespace Skclusive.Material.Button
-@inherits FabComponent
+@inherits ButtonCommon
-
- .Fab-Root {
- color: var(--theme-palette-grey300-contrast-text, rgba(0, 0, 0, 0.87));
- width: 56px;
- height: 56px;
- padding: 0;
- min-width: 0;
- box-shadow: var(--theme-shadow6, 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
- 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12));
- box-sizing: border-box;
- min-height: 36px;
- transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
- font-size: var(--theme-typography-button-font-size, 0.875rem);
- font-family: var(
- --theme-typography-button-font-family,
- "Roboto",
- "Helvetica",
- "Arial",
- sans-serif
- );
- font-weight: var(--theme-typography-button-font-weight, 500);
- line-height: var(--theme-typography-button-line-height, 1.75);
- letter-spacing: var(--theme-typography-button-letter-spacing, 0.02857em);
- text-transform: var(--theme-typography-button-text-transform, uppercase);
- border-radius: 50%;
- background-color: var(--theme-palette-grey300, #e0e0e0);
- }
-
- .Fab-Root:active {
- box-shadow: var(--theme-shadow12, 0px 7px 8px -4px rgba(0, 0, 0, 0.2),
- 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12));
- }
-
- .Fab-Root.Fab-FocusVisible {
- box-shadow: var(--theme-shadow6, 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
- 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12));
- }
-
+.Fab-Root {
+ color: var(--theme-palette-grey300-contrast-text);
+ width: 56px;
+ height: 56px;
+ padding: 0;
+ min-width: 0;
+ box-shadow: var(--theme-shadow6);
+ box-sizing: border-box;
+ min-height: 36px;
+ transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,border 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+ font-size: var(--theme-typography-button-font-size);
+ font-family: var(--theme-typography-button-font-family);
+ font-weight: var(--theme-typography-button-font-weight);
+ line-height: var(--theme-typography-button-line-height);
+ letter-spacing: var(--theme-typography-button-letter-spacing);
+ text-transform: var(--theme-typography-button-text-transform);
+ border-radius: 50%;
+ background-color: var(--theme-palette-grey300);
+}
+
+.Fab-Root:active {
+ box-shadow: var(--theme-shadow12);
+}
+
+.Fab-Root.Fab-FocusVisible {
+ box-shadow: var(--theme-shadow6);
+}
+
+.Fab-Root:hover {
+ text-decoration: none;
+ background-color: var(--theme-palette-greyA100);
+}
+
+.Fab-Root.Fab-Disabled {
+ color: var(--theme-palette-action-disabled);
+ box-shadow: var(--theme-shadow0, none);
+ background-color: var(--theme-palette-action-disabled-background);
+}
+
+@media (hover: none) {
.Fab-Root:hover {
- text-decoration: none;
- background-color: var(--theme-palette-grey-A100, #d5d5d5);
+ background-color: var(--theme-palette-grey300);
}
+}
- .Fab-Root.Fab-Disabled {
- color: var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26));
- box-shadow: var(--theme-shadow0, none);
- background-color: var(--theme-palette-action-disabled-background, rgba(0, 0, 0, 0.12));
- }
+.Fab-Root:hover.Fab-Disabled {
+ background-color: var(--theme-palette-action-disabled-background);
+}
- @media (hover: none) {
- .Fab-Root:hover {
- background-color: var(--theme-palette-grey300, #e0e0e0);
- }
- }
+.Fab-Label {
+ width: 100%;
+ display: inherit;
+ align-items: inherit;
+ justify-content: inherit;
+}
- .Fab-Root:hover.Fab-Disabled {
- background-color: var(--theme-palette-action-disabled-background, rgba(0, 0, 0, 0.12));
- }
-
- .Fab-Label {
- width: 100%;
- display: inherit;
- align-items: inherit;
- justify-content: inherit;
- }
+.Fab-Primary {
+ color: var(--theme-palette-primary-contrast-text);
+ background-color: var(--theme-palette-primary-main);
+}
- .Fab-Primary {
- color: var(--theme-palette-primary-contrast-text, #fff);
- background-color: var(--theme-palette-primary-main, #1976d2);
- }
+.Fab-Primary:hover {
+ background-color: var(--theme-palette-primary-dark);
+}
+@media (hover: none) {
.Fab-Primary:hover {
- background-color: var(--theme-palette-primary-current, rgb(17, 82, 147));
+ background-color: var(--theme-palette-primary-main);
}
+}
- @media (hover: none) {
- .Fab-Primary:hover {
- background-color: var(--theme-palette-primary-main, #1976d2);
- }
- }
+.Fab-Secondary {
+ color: var(--theme-palette-secondary-contrast-text);
+ background-color: var(--theme-palette-secondary-main);
+}
- .Fab-Secondary {
- color: var(--theme-palette-secondary-contrast-text, #fff);
- background-color: var(--theme-palette-secondary-main, rgb(220, 0, 78));
- }
+.Fab-Secondary:hover {
+ background-color: var(--theme-palette-secondary-dark);
+}
+@media (hover: none) {
.Fab-Secondary:hover {
- background-color: var(--theme-palette-secondary-dark, rgb(154, 0, 54));
- }
-
- @media (hover: none) {
- .Fab-Secondary:hover {
- background-color: var(--theme-palette-secondary-main, rgb(220, 0, 78));
- }
- }
-
- .Fab-Extended {
- width: auto;
- height: 48px;
- padding: 0 16px;
- min-width: 48px;
- min-height: auto;
- border-radius: 24px;
- }
-
- .Fab-Extended.Fab-Size-Small {
- width: auto;
- height: 34px;
- padding: 0 8px;
- min-width: 34px;
- border-radius: 17px;
- }
-
- .Fab-Extended.Fab-Size-Medium {
- width: auto;
- height: 40px;
- padding: 0 16px;
- min-width: 40px;
- border-radius: 20px;
- }
-
- .Fab-Color-Inherit {
- color: inherit;
- }
-
- .Fab-Size-Small {
- width: 40px;
- height: 40px;
- }
-
- .Fab-Size-Medium {
- width: 48px;
- height: 48px;
- }
-
-
\ No newline at end of file
+ background-color: var(--theme-palette-secondary-main);
+ }
+}
+
+.Fab-Extended {
+ width: auto;
+ height: 48px;
+ padding: 0 16px;
+ min-width: 48px;
+ min-height: auto;
+ border-radius: 24px;
+}
+
+.Fab-Extended.Fab-Size-Small {
+ width: auto;
+ height: 34px;
+ padding: 0 8px;
+ min-width: 34px;
+ border-radius: 17px;
+}
+
+.Fab-Extended.Fab-Size-Medium {
+ width: auto;
+ height: 40px;
+ padding: 0 16px;
+ min-width: 40px;
+ border-radius: 20px;
+}
+
+.Fab-Color-Inherit {
+ color: inherit;
+}
+
+.Fab-Size-Small {
+ width: 40px;
+ height: 40px;
+}
+
+.Fab-Size-Medium {
+ width: 48px;
+ height: 48px;
+}
\ No newline at end of file
diff --git a/Button/src/IconButton/IconButton.razor b/Button/src/IconButton/IconButton.razor
index 18d1a57..ab35b7f 100644
--- a/Button/src/IconButton/IconButton.razor
+++ b/Button/src/IconButton/IconButton.razor
@@ -1,5 +1,5 @@
@namespace Skclusive.Material.Button
-@inherits IconButtonComponent
+@inherits ButtonCommon
-
- .IconButton-Root {
- flex: 0 0 auto;
- color: var(--theme-palette-action-active, rgba(0, 0, 0, 0.54));
- padding: 12px;
- overflow: visible;
- font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 1.5rem);
- text-align: center;
- transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
- border-radius: 50%;
- }
-
+.IconButton-Root {
+ flex: 0 0 auto;
+ color: var(--theme-palette-action-active);
+ padding: 12px;
+ overflow: visible;
+ font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 1.5rem);
+ text-align: center;
+ transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+ border-radius: 50%;
+}
+
+.IconButton-Root:hover {
+ background-color: var(--theme-palette-primary-hover);
+}
+
+.IconButton-Root.IconButton-Disabled {
+ color: var(--theme-palette-action-disabled);
+ background-color: transparent;
+}
+
+@media (hover: none) {
.IconButton-Root:hover {
- background-color: var(
- --theme-palette-primary-main-hover,
- rgba(25, 118, 210, 0.08)
- );
- }
-
- .IconButton-Root.IconButton-Disabled {
- color: var(--theme-palette-action-disabled, rgba(0, 0, 0, 0.26));
background-color: transparent;
}
+}
- @media (hover: none) {
- .IconButton-Root:hover {
- background-color: transparent;
- }
- }
+.IconButton-Edge-Start {
+ margin-left: -12px;
+}
- .IconButton-Edge-Start {
- margin-left: -12px;
- }
+.IconButton-Size-Small.IconButton-Edge-Start {
+ margin-left: -3px;
+}
- .IconButton-Size-Small.IconButton-Edge-Start {
- margin-left: -3px;
- }
+.IconButton-Edge-End {
+ margin-right: -12px;
+}
- .IconButton-Edge-End {
- margin-right: -12px;
- }
+.IconButton-Size-Small.IconButton-Edge-End {
+ margin-right: -3px;
+}
- .IconButton-Size-Small.IconButton-Edge-End {
- margin-right: -3px;
- }
+.IconButton-Color-Inherit {
+ color: inherit;
+}
- .IconButton-Color-Inherit {
- color: inherit;
- }
+.IconButton-Color-Primary {
+ color: var(--theme-palette-primary-main);
+}
- .IconButton-Color-Primary {
- color: var(--theme-palette-primary-main, #1976d2);
- }
+.IconButton-Color-Primary:hover {
+ background-color: var(--theme-palette-primary-hover);
+}
+@media (hover: none) {
.IconButton-Color-Primary:hover {
- background-color: var(
- --theme-palette-primary-main-hover,
- rgba(25, 118, 210, 0.08)
- );
+ background-color: transparent;
}
+}
- @media (hover: none) {
- .IconButton-Color-Primary:hover {
- background-color: transparent;
- }
- }
+.IconButton-Color-Secondary {
+ color: var(--theme-palette-secondary-main);
+}
- .IconButton-Color-Secondary {
- color: var(--theme-palette-secondary-main, rgb(220, 0, 78));
- }
+.IconButton-Color-Secondary:hover {
+ background-color: var(--theme-palette-secondary-hover);
+}
+@media (hover: none) {
.IconButton-Color-Secondary:hover {
- background-color: var(
- --theme-palette-secondary-main-hover,
- rgba(220, 0, 78, 0.08)
- );
- }
-
- @media (hover: none) {
- .IconButton-Color-Secondary:hover {
- background-color: transparent;
- }
- }
-
- .IconButton-Size-Small {
- padding: 3px;
- font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 18rem);
+ background-color: transparent;
}
+}
- .IconButton-Label {
- width: 100%;
- display: flex;
- align-items: inherit;
- justify-content: inherit;
- }
+.IconButton-Size-Small {
+ padding: 3px;
+ font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 18rem);
+}
-
+.IconButton-Label {
+ width: 100%;
+ display: flex;
+ align-items: inherit;
+ justify-content: inherit;
+}
diff --git a/Button/src/Producer/ButtonStyleProducer.cs b/Button/src/Producer/ButtonStyleProducer.cs
new file mode 100644
index 0000000..deb3e5b
--- /dev/null
+++ b/Button/src/Producer/ButtonStyleProducer.cs
@@ -0,0 +1,22 @@
+using System.Collections.Generic;
+using System.Globalization;
+using Skclusive.Core.Component;
+using Skclusive.Material.Theme;
+
+namespace Skclusive.Material.Button
+{
+ public class ButtonStyleProducer : IStyleProducer
+ {
+ public IDictionary Variables(ThemeValue theme)
+ {
+ var palette = theme.Palette;
+
+ var isDark = theme.IsDark();
+
+ return new Dictionary
+ {
+ { "--theme-component-button-border-outlined", (isDark ? "rgba(255, 255, 255, 0.23)" : "rgba(0, 0, 0, 0.23)").ToString(CultureInfo.InvariantCulture) },
+ };
+ }
+ }
+}
\ No newline at end of file
diff --git a/Button/src/Provider/ButtonStyleProvider.cs b/Button/src/Provider/ButtonStyleProvider.cs
new file mode 100644
index 0000000..e718330
--- /dev/null
+++ b/Button/src/Provider/ButtonStyleProvider.cs
@@ -0,0 +1,19 @@
+using Skclusive.Core.Component;
+
+namespace Skclusive.Material.Button
+{
+ public class ButtonStyleProvider : StyleTypeProvider
+ {
+ public ButtonStyleProvider() : base
+ (
+ typeof(ButtonBaseStyle),
+ typeof(FabStyle),
+ typeof(IconButtonStyle),
+ typeof(RippleStyle),
+ typeof(TouchRippleStyle),
+ typeof(ButtonStyle)
+ )
+ {
+ }
+ }
+}
\ No newline at end of file
diff --git a/Button/src/Ripple/Ripple.razor b/Button/src/Ripple/Ripple.razor
index 9b74a07..5079c32 100644
--- a/Button/src/Ripple/Ripple.razor
+++ b/Button/src/Ripple/Ripple.razor
@@ -1,5 +1,5 @@
@namespace Skclusive.Material.Button
-@inherits RippleComponent
+@inherits MaterialComponentBase
OnExited { set; get; }
+ public EventCallback OnExited { set; get; }
///
/// class applied on the child element.
@@ -141,9 +141,9 @@ protected override void OnParametersSet()
{
Leaving = true;
- if (OnExited != null)
+ if (OnExited.HasDelegate)
{
- RunTimeout(() => OnExited(Reference.Empty), Timeout);
+ RunTimeout(() => OnExited.InvokeAsync(Reference.Empty), Timeout);
}
}
}
diff --git a/Button/src/Ripple/RippleStyle.razor b/Button/src/Ripple/RippleStyle.razor
index 5ead24f..5edc697 100644
--- a/Button/src/Ripple/RippleStyle.razor
+++ b/Button/src/Ripple/RippleStyle.razor
@@ -1,75 +1,71 @@
@namespace Skclusive.Material.Button
@inherits StyleComponentBase
-
+.Ripple-Root {
+ opacity: 0;
+ position: absolute;
+}
- .Ripple-Root {
- opacity: 0;
- position: absolute;
- }
+.Ripple-Visible {
+ opacity: 0.3;
+ transform: scale(1);
+ animation: Ripple-Keyframes-Enter 550ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.Ripple-Pulsate {
+ animation-duration: 200ms;
+}
+
+.Ripple-Child {
+ width: 100%;
+ height: 100%;
+ opacity: 1;
+ display: block;
+ border-radius: 50%;
+ background-color: currentColor;
+}
- .Ripple-Visible {
+.Ripple-Child-Leaving {
+ opacity: 0;
+ animation: Ripple-Keyframes-Exit 550ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.Ripple-Child-Pulsate {
+ top: 0;
+ left: 0;
+ position: absolute;
+ animation: Ripple-Keyframes-Pulsate 2500ms cubic-bezier(0.4, 0, 0.2, 1) 200ms
+ infinite;
+}
+
+@keyframes Ripple-Keyframes-Enter {
+ 0% {
+ opacity: 0.1;
+ transform: scale(0);
+ }
+ 100% {
opacity: 0.3;
transform: scale(1);
- animation: Ripple-Keyframes-Enter 550ms cubic-bezier(0.4, 0, 0.2, 1);
- }
-
- .Ripple-Pulsate {
- animation-duration: 200ms;
}
+}
- .Ripple-Child {
- width: 100%;
- height: 100%;
+@keyframes Ripple-Keyframes-Exit {
+ 0% {
opacity: 1;
- display: block;
- border-radius: 50%;
- background-color: currentColor;
}
-
- .Ripple-Child-Leaving {
+ 100% {
opacity: 0;
- animation: Ripple-Keyframes-Exit 550ms cubic-bezier(0.4, 0, 0.2, 1);
- }
-
- .Ripple-Child-Pulsate {
- top: 0;
- left: 0;
- position: absolute;
- animation: Ripple-Keyframes-Pulsate 2500ms cubic-bezier(0.4, 0, 0.2, 1) 200ms
- infinite;
}
+}
- @keyframes Ripple-Keyframes-Enter {
- 0% {
- opacity: 0.1;
- transform: scale(0);
- }
- 100% {
- opacity: 0.3;
- transform: scale(1);
- }
+@keyframes Ripple-Keyframes-Pulsate {
+ 0% {
+ transform: scale(1);
}
-
- @keyframes Ripple-Keyframes-Exit {
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
+ 50% {
+ transform: scale(0.92);
}
-
- @keyframes Ripple-Keyframes-Pulsate {
- 0% {
- transform: scale(1);
- }
- 50% {
- transform: scale(0.92);
- }
- 100% {
- transform: scale(1);
- }
+ 100% {
+ transform: scale(1);
}
-
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/Button/src/TouchRipple/TouchPoint.cs b/Button/src/TouchRipple/TouchPoint.cs
new file mode 100644
index 0000000..a4c9878
--- /dev/null
+++ b/Button/src/TouchRipple/TouchPoint.cs
@@ -0,0 +1,11 @@
+namespace Skclusive.Material.Button
+{
+ public class TouchPoint
+ {
+ public bool IsTouch { set; get; }
+
+ public double? ClientX { set; get; }
+
+ public double? ClientY { set; get; }
+ }
+}
\ No newline at end of file
diff --git a/Button/src/TouchRipple/TouchRipple.razor b/Button/src/TouchRipple/TouchRipple.razor
index 8598e86..5e9835f 100644
--- a/Button/src/TouchRipple/TouchRipple.razor
+++ b/Button/src/TouchRipple/TouchRipple.razor
@@ -1,5 +1,5 @@
@namespace Skclusive.Material.Button
-@inherits TouchRippleComponent
+@inherits MaterialComponentBase
CreateRipple(bool pulsate, double
builder.OpenRegion(context.Key);
builder.OpenComponent(context.Key + 1);
builder.AddAttribute(context.Key + 2, "In", context.In);
- builder.AddAttribute(context.Key + 3, "OnExited", context.OnExited);
+ builder.AddAttribute(context.Key + 3, "OnExited", EventCallback.Factory.Create(this, context.OnExited));
builder.AddAttribute(context.Key + 4, "Timeout", DURATION);
builder.AddAttribute(context.Key + 5, "Pulsate", pulsate);
builder.AddAttribute(context.Key + 6, "RippleX", rippleX);
diff --git a/Button/src/TouchRipple/TouchRippleStyle.razor b/Button/src/TouchRipple/TouchRippleStyle.razor
index c981bd5..d72459e 100644
--- a/Button/src/TouchRipple/TouchRippleStyle.razor
+++ b/Button/src/TouchRipple/TouchRippleStyle.razor
@@ -1,20 +1,15 @@
@namespace Skclusive.Material.Button
@inherits StyleComponentBase
-
-
- .TouchRipple-Root {
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- display: block;
- z-index: 0;
- position: absolute;
- overflow: hidden;
- border-radius: inherit;
- pointer-events: none;
- }
-
-
\ No newline at end of file
+.TouchRipple-Root {
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: block;
+ z-index: 0;
+ position: absolute;
+ overflow: hidden;
+ border-radius: inherit;
+ pointer-events: none;
+}
\ No newline at end of file
diff --git a/Card/src/Card.csproj b/Card/src/Card.csproj
index f7d640b..cbe3996 100644
--- a/Card/src/Card.csproj
+++ b/Card/src/Card.csproj
@@ -1,10 +1,9 @@
- 2.0.1
+ 5.0.0
$(VersionSuffix)
- netstandard2.1
- 3.0
+ net5.0
Skclusive.Material.Card
Skclusive.Material.Card
Skclusive.Material.Card
@@ -17,11 +16,10 @@
-
-
-
-
-
+
+
+
+
diff --git a/Card/src/Card/Card.razor b/Card/src/Card/Card.razor
index ffbfc07..e30785d 100644
--- a/Card/src/Card/Card.razor
+++ b/Card/src/Card/Card.razor
@@ -1,5 +1,5 @@
@namespace Skclusive.Material.Card
-@inherits CardComponent
+@inherits MaterialComponent
@ChildContent
diff --git a/Card/src/Card/Card.cs b/Card/src/Card/Card.razor.cs
similarity index 90%
rename from Card/src/Card/Card.cs
rename to Card/src/Card/Card.razor.cs
index 33b84d9..2b80686 100644
--- a/Card/src/Card/Card.cs
+++ b/Card/src/Card/Card.razor.cs
@@ -3,9 +3,9 @@
namespace Skclusive.Material.Card
{
- public class CardComponent : MaterialComponent
+ public partial class Card : MaterialComponent
{
- public CardComponent() : base("Card")
+ public Card() : base("Card")
{
}
diff --git a/Card/src/Card/CardStyle.razor b/Card/src/Card/CardStyle.razor
index c00cbf0..b7e6b03 100644
--- a/Card/src/Card/CardStyle.razor
+++ b/Card/src/Card/CardStyle.razor
@@ -1,11 +1,6 @@
@namespace Skclusive.Material.Card
@inherits StyleComponentBase
-
-
- .Card-Root {
- overflow: hidden;
- }
-
-
\ No newline at end of file
+.Card-Root {
+ overflow: hidden;
+}
\ No newline at end of file
diff --git a/Card/src/CardActionArea/CardActionArea.razor b/Card/src/CardActionArea/CardActionArea.razor
index 24567f2..5aa4854 100644
--- a/Card/src/CardActionArea/CardActionArea.razor
+++ b/Card/src/CardActionArea/CardActionArea.razor
@@ -1,5 +1,5 @@
@namespace Skclusive.Material.Card
-@inherits CardActionAreaComponent
+@inherits MaterialComponent
+.CardActionArea-Root {
+ width: 100%;
+ display: block;
+ text-align: inherit;
+}
- .CardActionArea-Root {
- width: 100%;
- display: block;
- text-align: inherit;
- }
+.CardActionArea-Root:hover .CardActionArea-Highlight {
+ opacity: var(--theme-palette-action-hover-opacity);
+}
- .CardActionArea-Root:hover .CardActionArea-Highlight {
- opacity: var(--theme-palette-action-hover-opacity, 0.08);
- }
+.CardActionArea-Root.CardActionArea-FocusVisible .CardActionArea-Highlight {
+ opacity: 0.12;
+}
- .CardActionArea-Root.CardActionArea-FocusVisible .CardActionArea-Highlight {
- opacity: 0.12;
- }
-
- .CardActionArea-Highlight {
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- opacity: 0;
- overflow: hidden;
- position: absolute;
- transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
- border-radius: inherit;
- pointer-events: none;
- background-color: currentcolor;
- }
-
-
\ No newline at end of file
+.CardActionArea-Highlight {
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ opacity: 0;
+ overflow: hidden;
+ position: absolute;
+ transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+ border-radius: inherit;
+ pointer-events: none;
+ background-color: currentcolor;
+}
\ No newline at end of file
diff --git a/Card/src/CardActions/CardActions.razor b/Card/src/CardActions/CardActions.razor
index 7e22a87..8d10a27 100644
--- a/Card/src/CardActions/CardActions.razor
+++ b/Card/src/CardActions/CardActions.razor
@@ -1,5 +1,5 @@
@namespace Skclusive.Material.Card
-@inherits CardActionsComponent
+@inherits MaterialComponent
-
- .CardActions-Root {
- display: flex;
- padding: 8px;
- align-items: center;
- }
-
- .CardActions-Spacing > * + * {
- margin-left: 8px;
- }
-
-
\ No newline at end of file
+.CardActions-Root {
+ display: flex;
+ padding: 8px;
+ align-items: center;
+}
+
+.CardActions-Spacing > * + * {
+ margin-left: 8px;
+}
\ No newline at end of file
diff --git a/Card/src/CardContent/CardContent.razor b/Card/src/CardContent/CardContent.razor
index 77f1155..8d10a27 100644
--- a/Card/src/CardContent/CardContent.razor
+++ b/Card/src/CardContent/CardContent.razor
@@ -1,5 +1,5 @@
@namespace Skclusive.Material.Card
-@inherits CardContentComponent
+@inherits MaterialComponent
+.CardContent-Root {
+ padding: 16px;
+}
- .CardContent-Root {
- padding: 16px;
- }
-
- .CardContent-Root:last-child {
- padding-bottom: 24px;
- }
-
-
\ No newline at end of file
+.CardContent-Root:last-child {
+ padding-bottom: 24px;
+}
\ No newline at end of file
diff --git a/Card/src/CardHeader/CardHeader.razor b/Card/src/CardHeader/CardHeader.razor
index dd63e38..d1e8048 100644
--- a/Card/src/CardHeader/CardHeader.razor
+++ b/Card/src/CardHeader/CardHeader.razor
@@ -1,5 +1,5 @@
@namespace Skclusive.Material.Card
-@inherits CardHeaderComponent
+@inherits MaterialComponent
-
- .CardHeader-Root {
- display: flex;
- padding: 16px;
- align-items: center;
- }
-
- .CardHeader-Avatar {
- flex: 0 0 auto;
- margin-right: 16px;
- }
-
- .CardHeader-Action {
- flex: 0 0 auto;
- align-self: flex-start;
- margin-top: -8px;
- margin-right: -8px;
- }
-
- .CardHeader-Content {
- flex: 1 1 auto;
- }
-
- .CardHeader-Title {
- }
-
- .CardHeader-SubHeader {
- }
-
-
\ No newline at end of file
+.CardHeader-Root {
+ display: flex;
+ padding: 16px;
+ align-items: center;
+}
+
+.CardHeader-Avatar {
+ flex: 0 0 auto;
+ margin-right: 16px;
+}
+
+.CardHeader-Action {
+ flex: 0 0 auto;
+ align-self: flex-start;
+ margin-top: -8px;
+ margin-right: -8px;
+}
+
+.CardHeader-Content {
+ flex: 1 1 auto;
+}
+
+.CardHeader-Title {
+}
+
+.CardHeader-SubHeader {
+}
\ No newline at end of file
diff --git a/Card/src/CardMedia/CardMedia.razor b/Card/src/CardMedia/CardMedia.razor
index 0a685aa..f8edc64 100644
--- a/Card/src/CardMedia/CardMedia.razor
+++ b/Card/src/CardMedia/CardMedia.razor
@@ -1,5 +1,5 @@
@namespace Skclusive.Material.Card
-@inherits CardMediaComponent
+@inherits MaterialComponent
MEDIAS = new List()
{
@@ -23,7 +23,7 @@ public class CardMediaComponent : MaterialComponent
"img"
};
- public CardMediaComponent() : base("CardMedia")
+ public CardMedia() : base("CardMedia")
{
}
diff --git a/Card/src/CardMedia/CardMediaStyle.razor b/Card/src/CardMedia/CardMediaStyle.razor
index 10c1d4a..a44f2ff 100644
--- a/Card/src/CardMedia/CardMediaStyle.razor
+++ b/Card/src/CardMedia/CardMediaStyle.razor
@@ -1,22 +1,17 @@
@namespace Skclusive.Material.Card
@inherits StyleComponentBase
-
+.CardMedia-Root {
+ display: block;
+ background-size: cover;
+ background-repeat: no-repeat;
+ background-position: center;
+}
- .CardMedia-Root {
- display: block;
- background-size: cover;
- background-repeat: no-repeat;
- background-position: center;
- }
+.CardMedia-Media {
+ width: 100%;
+}
- .CardMedia-Media {
- width: 100%;
- }
-
- .CardMedia-Imgage {
- object-fit: cover;
- }
-
-
\ No newline at end of file
+.CardMedia-Imgage {
+ object-fit: cover;
+}
\ No newline at end of file
diff --git a/Card/src/CardStyles/CardStyles.razor b/Card/src/CardStyles/CardStyles.razor
deleted file mode 100644
index 006c3c0..0000000
--- a/Card/src/CardStyles/CardStyles.razor
+++ /dev/null
@@ -1,9 +0,0 @@
-@namespace Skclusive.Material.Card
-@inherits StaticComponentBase
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/Card/src/Extension/CardExtension.cs b/Card/src/Extension/CardExtension.cs
new file mode 100644
index 0000000..6aaf33d
--- /dev/null
+++ b/Card/src/Extension/CardExtension.cs
@@ -0,0 +1,26 @@
+using Microsoft.Extensions.DependencyInjection;
+using Skclusive.Core.Component;
+using Skclusive.Material.Core;
+using Skclusive.Material.Paper;
+using Skclusive.Material.Button;
+using Skclusive.Material.Avatar;
+using Skclusive.Material.Typography;
+
+namespace Skclusive.Material.Card
+{
+ public static class CardExtension
+ {
+ public static void TryAddCardServices(this IServiceCollection services, IMaterialConfig config)
+ {
+ services.TryAddPaperServices(config);
+
+ services.TryAddAvatarServices(config);
+
+ services.TryAddTypographyServices(config);
+
+ services.TryAddButtonServices(config);
+
+ services.TryAddStyleTypeProvider();
+ }
+ }
+}
diff --git a/Card/src/Provider/CardStyleProvider.cs b/Card/src/Provider/CardStyleProvider.cs
new file mode 100644
index 0000000..a89aa2c
--- /dev/null
+++ b/Card/src/Provider/CardStyleProvider.cs
@@ -0,0 +1,19 @@
+using Skclusive.Core.Component;
+
+namespace Skclusive.Material.Card
+{
+ public class CardStyleProvider : StyleTypeProvider
+ {
+ public CardStyleProvider() : base
+ (
+ typeof(CardStyle),
+ typeof(CardContentStyle),
+ typeof(CardHeaderStyle),
+ typeof(CardMediaStyle),
+ typeof(CardActionsStyle),
+ typeof(CardActionAreaStyle)
+ )
+ {
+ }
+ }
+}
\ No newline at end of file
diff --git a/Chip/src/Chip.csproj b/Chip/src/Chip.csproj
new file mode 100644
index 0000000..3339e68
--- /dev/null
+++ b/Chip/src/Chip.csproj
@@ -0,0 +1,31 @@
+
+
+
+ 5.0.0
+ $(VersionSuffix)
+ net5.0
+ Skclusive.Material.Chip
+ Skclusive.Material.Chip
+ Skclusive.Material.Chip
+ Skclusive
+ Skclusive
+ Skclusive
+ blazor material ui Chip
+ https://github.com/skclusive/Skclusive.Material.Component
+ https://github.com/skclusive/Skclusive.Material.Component
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Chip/src/Chip/Chip.razor b/Chip/src/Chip/Chip.razor
new file mode 100644
index 0000000..8beed27
--- /dev/null
+++ b/Chip/src/Chip/Chip.razor
@@ -0,0 +1,65 @@
+@namespace Skclusive.Material.Chip
+@inherits MaterialComponentBase
+
+
+ @if (HasAvatarContent)
+ {
+
+ @AvatarContent
+
+ }
+ else if (HasIconContent)
+ {
+
+ @IconContent
+
+ }
+
+ @if (HasLabelContent)
+ {
+ @LabelContent
+ }
+ else
+ {
+ @Label
+ }
+
+ @if (Deletable)
+ {
+
+ @if (HasDeleteIconContent)
+ {
+
+ @DeleteIconContent
+
+ }
+ else
+ {
+
+ }
+
+ }
+
diff --git a/Chip/src/Chip/Chip.razor.cs b/Chip/src/Chip/Chip.razor.cs
new file mode 100644
index 0000000..2868a6d
--- /dev/null
+++ b/Chip/src/Chip/Chip.razor.cs
@@ -0,0 +1,390 @@
+using Microsoft.AspNetCore.Components;
+using Skclusive.Core.Component;
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Components.Web;
+using Skclusive.Material.Core;
+using Skclusive.Material.Icon;
+using Skclusive.Material.Avatar;
+using Skclusive.Script.DomHelpers;
+
+namespace Skclusive.Material.Chip
+{
+ public partial class Chip : MaterialComponentBase
+ {
+ public Chip() : base("Chip")
+ {
+ }
+
+ ///
+ /// html component tag to be used as container.
+ ///
+ [Parameter]
+ public string Component { set; get; } = "div";
+
+ ///
+ /// If `true`, the chip will hover on mouse over and ripple on click.
+ ///
+ [Parameter]
+ public bool? Clickable { get; set; }
+
+ [Parameter]
+ public string Label { get; set; }
+
+ [Parameter]
+ public RenderFragment LabelContent { get; set; }
+
+ ///
+ /// Avatar placed before the children instead of DeleteIcon.
+ ///
+ [Parameter]
+ public RenderFragment AvatarContent { set; get; }
+
+ ///
+ /// The defines the look of the chip.
+ ///
+ [Parameter]
+ public ChipVariant Variant { set; get; } = ChipVariant.Default;
+
+ ///
+ /// The of the button.
+ ///
+ [Parameter]
+ public Size Size { set; get; } = Size.Medium;
+
+ ///
+ /// Element placed before the children.
+ ///
+ [Parameter]
+ public RenderFragment IconContent { set; get; }
+
+ ///
+ /// Element placed after the children.
+ ///
+ [Parameter]
+ public RenderFragment DeleteIconContent { set; get; }
+
+ ///
+ /// The URL to link to when the button is clicked.
+ /// If defined, an a element will be used as the root node.
+ ///
+ [Parameter]
+ public string Href { set; get; }
+
+ ///
+ /// The of the component. It supports those theme colors that make sense for this component.
+ ///
+ [Parameter]
+ public Color Color { set; get; } = Color.Default;
+
+ [Parameter]
+ public EventCallback OnDelete { get; set; }
+
+ [Inject]
+ public DomHelpers DomHelpers { set; get; }
+
+ protected bool Deletable => OnDelete.HasDelegate;
+
+ protected bool HasIcon => IsClickable || Deletable;
+
+ protected string _Role => HasIcon ? "button" : Role;
+
+ protected int? _TabIndex => HasIcon ? 0 : TabIndex;
+
+ protected bool HasLabelContent => LabelContent != null;
+
+ protected bool HasAvatarContent => AvatarContent != null;
+
+ protected bool HasIconContent => IconContent != null;
+
+ protected bool HasDeleteIconContent => DeleteIconContent != null;
+
+ protected bool IsClickable => (!Clickable.HasValue || Clickable.Value) && OnClick.HasDelegate ? true : Clickable.HasValue && Clickable.Value;
+
+ protected ISvgIconContext IconContext => new SvgIconContextBuilder()
+ .WithClass(_IconClass)
+ .WithStyle(_IconStyle)
+ .Build();
+
+ protected ISvgIconContext DeleteIconContext => new SvgIconContextBuilder()
+ .WithClass(_DeleteIconClass)
+ .WithStyle(_DeleteIconStyle)
+ .Build();
+
+ protected IAvatarContext AvatarContext => new AvatarContextBuilder()
+ .WithClass(_AvatarClass)
+ .WithStyle(_AvatarStyle)
+ .Build();
+
+ protected override async Task HandleKeyUpAsync(KeyboardEventArgs args)
+ {
+ await base.HandleKeyUpAsync(args);
+
+ var key = args.Key;
+
+ if (key == " " || key == "Enter")
+ {
+ await HandleClickAsync(args);
+ }
+ else if (Deletable && (key == "Backspace" || key == "Delete"))
+ {
+ await OnDelete.InvokeAsync(args);
+ }
+ else if (key == "Escape")
+ {
+ await DomHelpers.BlurAsync(RootRef.Current);
+ }
+ }
+
+ protected async Task HandleDeleteClickAsync(EventArgs args)
+ {
+ await OnDelete.InvokeAsync(args);
+ }
+
+ protected override IEnumerable Classes
+ {
+ get
+ {
+ foreach (var item in base.Classes)
+ yield return item;
+
+ if (Size == Size.Small)
+ yield return $"{nameof(Size)}-{nameof(Size.Small)}";
+
+ if (Color != Color.Default)
+ yield return $"{nameof(Color)}-{Color}";
+
+ if (IsClickable)
+ {
+ yield return $"{nameof(Clickable)}";
+
+ if (Color != Color.Default)
+ yield return $"{nameof(Clickable)}-{nameof(Color)}-{Color}";
+ }
+
+ if (Deletable)
+ {
+ yield return $"{nameof(Deletable)}";
+
+ if (Color != Color.Default)
+ yield return $"{nameof(Deletable)}-{nameof(Color)}-{Color}";
+ }
+
+ if (Variant == ChipVariant.Outlined)
+ {
+ yield return $"{nameof(ChipVariant.Outlined)}";
+
+ if (Color == Color.Primary)
+ yield return $"{nameof(ChipVariant.Outlined)}-{nameof(Color.Primary)}";
+
+ if (Color == Color.Secondary)
+ yield return $"{nameof(ChipVariant.Outlined)}-{nameof(Color.Secondary)}";
+ }
+ }
+ }
+
+ ///
+ /// The style applied on the end icon.
+ ///
+ [Parameter]
+ public string IconStyle { set; get; }
+
+ ///
+ /// The class applied on the end icon.
+ ///
+ [Parameter]
+ public string IconClass { set; get; }
+
+ protected virtual string _IconStyle
+ {
+ get => CssUtil.ToStyle(IconStyles, IconStyle);
+ }
+
+ protected virtual IEnumerable> IconStyles
+ {
+ get => Enumerable.Empty>();
+ }
+
+ protected virtual string _IconClass
+ {
+ get => CssUtil.ToClass($"{Selector}-Icon", IconClasses, IconClass);
+ }
+
+ protected virtual IEnumerable IconClasses
+ {
+ get
+ {
+ yield return string.Empty;
+
+ if (Size == Size.Small)
+ yield return $"{nameof(Size.Small)}";
+
+ if (Color != Color.Default)
+ yield return $"{nameof(Color)}-{Color}";
+ }
+ }
+
+ ///
+ /// The style applied on the start icon.
+ ///
+ [Parameter]
+ public string DeleteIconStyle { set; get; }
+
+ ///
+ /// The class applied on the start icon.
+ ///
+ [Parameter]
+ public string DeleteIconClass { set; get; }
+
+ protected virtual string _DeleteIconStyle
+ {
+ get => CssUtil.ToStyle(DeleteIconStyles, DeleteIconStyle);
+ }
+
+ protected virtual IEnumerable> DeleteIconStyles
+ {
+ get => Enumerable.Empty>();
+ }
+
+ protected virtual string _DeleteIconClass
+ {
+ get => CssUtil.ToClass($"{Selector}-DeleteIcon", DeleteIconClasses, DeleteIconClass);
+ }
+
+ protected virtual IEnumerable DeleteIconClasses
+ {
+ get
+ {
+ yield return string.Empty;
+
+ if (Size == Size.Small)
+ yield return $"{nameof(Size.Small)}";
+
+ if (Color != Color.Default)
+ {
+ if (Variant != ChipVariant.Outlined)
+ yield return $"{nameof(Color)}-{Color}";
+
+ if (Variant == ChipVariant.Outlined)
+ yield return $"{nameof(ChipVariant.Outlined)}-{nameof(Color)}-{Color}";
+ }
+ }
+ }
+
+ ///
+ /// The style applied on the end icon.
+ ///
+ [Parameter]
+ public string AvatarStyle { set; get; }
+
+ ///
+ /// The class applied on the end icon.
+ ///
+ [Parameter]
+ public string AvatarClass { set; get; }
+
+ protected virtual string _AvatarStyle
+ {
+ get => CssUtil.ToStyle(AvatarStyles, AvatarStyle);
+ }
+
+ protected virtual IEnumerable> AvatarStyles
+ {
+ get => Enumerable.Empty>();
+ }
+
+ protected virtual string _AvatarClass
+ {
+ get => CssUtil.ToClass($"{Selector}-Avatar", AvatarClasses, AvatarClass);
+ }
+
+ protected virtual IEnumerable AvatarClasses
+ {
+ get
+ {
+ yield return string.Empty;
+
+ if (Size == Size.Small)
+ yield return $"{nameof(Size.Small)}";
+
+ if (Color != Color.Default)
+ yield return $"{nameof(Color)}-{Color}";
+ }
+ }
+
+ ///
+ /// The class applied to the label.
+ ///
+ [Parameter]
+ public string LabelClass { set; get; }
+
+ ///
+ /// style applied on the label.
+ ///
+ [Parameter]
+ public string LabelStyle { set; get; }
+
+ protected virtual string _LabelClass
+ {
+ get => CssUtil.ToClass($"{Selector}-Label", LabelClasses, LabelClass);
+ }
+
+ protected virtual IEnumerable LabelClasses
+ {
+ get
+ {
+ yield return string.Empty;
+
+ if (Size == Size.Small)
+ yield return $"{nameof(Size.Small)}";
+ }
+ }
+
+ protected virtual string _LabelStyle
+ {
+ get => CssUtil.ToStyle(LabelStyles, LabelStyle);
+ }
+
+ protected virtual IEnumerable> LabelStyles
+ {
+ get => Enumerable.Empty>();
+ }
+
+ ///
+ /// The style applied on the end icon.
+ ///
+ [Parameter]
+ public string DeleteContainerStyle { set; get; }
+
+ ///
+ /// The class applied on the end icon.
+ ///
+ [Parameter]
+ public string DeleteContainerClass { set; get; }
+
+ protected virtual string _DeleteContainerStyle
+ {
+ get => CssUtil.ToStyle(DeleteContainerStyles, DeleteContainerStyle);
+ }
+
+ protected virtual IEnumerable> DeleteContainerStyles
+ {
+ get => Enumerable.Empty>();
+ }
+
+ protected virtual string _DeleteContainerClass
+ {
+ get => CssUtil.ToClass($"{Selector}-DeleteContainer", DeleteContainerClasses, DeleteContainerClass);
+ }
+
+ protected virtual IEnumerable DeleteContainerClasses
+ {
+ get
+ {
+ yield return $"{Size}";
+ }
+ }
+ }
+}
diff --git a/Chip/src/Chip/ChipStyle.razor b/Chip/src/Chip/ChipStyle.razor
new file mode 100644
index 0000000..5abe75a
--- /dev/null
+++ b/Chip/src/Chip/ChipStyle.razor
@@ -0,0 +1,260 @@
+@namespace Skclusive.Material.Chip
+@inherits StyleComponentBase
+
+.Chip-Root {
+ color: var(--theme-component-chip-color);
+ border: none;
+ cursor: default;
+ height: 32px;
+ display: inline-flex;
+ outline: 0;
+ padding: 0;
+ font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 13rem);
+ box-sizing: border-box;
+ transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+ align-items: center;
+ font-family: var(--theme-typography-font-family);
+ white-space: nowrap;
+ border-radius: 16px;
+ vertical-align: middle;
+ justify-content: center;
+ text-decoration: none;
+ background-color: var(--theme-component-chip-background-color);
+}
+
+.Chip-Root.Chip-Disabled {
+ opacity: 0.5;
+ pointer-events: none;
+}
+
+.Chip-Size-Small {
+ height: 24px;
+}
+
+.Chip-Color-Primary {
+ color: var(--theme-palette-primary-contrast-text);
+ background-color: var(--theme-palette-primary-main);
+}
+
+.Chip-Color-Secondary {
+ color: var(--theme-palette-secondary-contrast-text);
+ background-color: var(--theme-palette-secondary-main);
+}
+
+.Chip-Clickable {
+ cursor: pointer;
+ -webkit-tap-highlight-color: transparent;
+}
+
+.Chip-Clickable:hover, .Chip-Clickable:focus {
+ background-color: var(--theme-component-chip-clickable-focus);
+}
+
+.Chip-Clickable:active {
+ box-shadow: var(--theme-shadow1);
+ background-color: var(--theme-component-chip-clickable-active);
+}
+
+.Chip-Clickable-Color-Primary:hover, .Chip-Clickable-Color-Primary:focus {
+ background-color: var(--theme-component-chip-clickable-primary-focus);
+}
+
+.Chip-Clickable-Color-Primary:active {
+ background-color: var(--theme-component-chip-clickable-primary-active);
+}
+
+.Chip-Clickable-Color-Secondary:hover, .Chip-Clickable-Color-Secondary:focus {
+ background-color: var(--theme-component-chip-clickable-secondary-focus);
+}
+
+.Chip-Clickable-Color-Secondary:active {
+ background-color: var(--theme-component-chip-clickable-secondary-active);
+}
+
+.Chip-Deletable:focus {
+ background-color: var(--theme-component-chip-deletable-focus);
+}
+
+.Chip-Deletable-Color-Primary:focus {
+ background-color: var(--theme-component-chip-deletable-primary-focus);
+}
+
+.Chip-Deletable-Color-Secondary:focus {
+ background-color: var(--theme-component-chip-deletable-secondary-focus);
+}
+
+.Chip-Outlined {
+ border: 1px solid var(--theme-component-chip-border-outlined);
+ background-color: transparent;
+}
+
+.Chip-Clickable.Chip-Outlined:hover, .Chip-Clickable.Chip-Outlined:focus, .Chip-Deletable.Chip-Outlined:focus {
+ background-color: var(--theme-component-chip-outlined-focus);
+}
+
+.Chip-Outlined .Chip-Avatar {
+ margin-left: 4px;
+}
+
+.Chip-Outlined .Chip-Avatar-Small {
+ margin-left: 2px;
+}
+
+.Chip-Outlined .Chip-Icon {
+ margin-left: 4px;
+}
+
+.Chip-Outlined .Chip-Icon-Small {
+ margin-left: 2px;
+}
+
+.Chip-Outlined .Chip-DeleteIcon {
+ margin-right: 5px;
+}
+
+.Chip-Outlined .Chip-DeleteIcon-Small {
+ margin-right: 3px;
+}
+
+.Chip-Outlined-Primary {
+ color: var(--theme-palette-primary-main);
+ border: 1px solid var(--theme-palette-primary-main);
+}
+
+.Chip-Clickable.Chip-Outlined-Primary:hover, .Chip-Clickable.Chip-Outlined-Primary:focus, .Chip-Deletable.Chip-Outlined-Primary:focus {
+ background-color: var(--theme-component-chip-outlined-primary-focus);
+}
+
+.Chip-Outlined-Secondary {
+ color: var(--theme-palette-secondary-main);
+ border: 1px solid var(--theme-palette-secondary-main);
+}
+
+.Chip-Clickable.Chip-Outlined-Secondary:hover, .Chip-Clickable.Chip-Outlined-Secondary:focus, .Chip-Deletable.Chip-Outlined-Secondary:focus {
+ background-color: var(--theme-component-chip-outlined-secondary-focus);
+}
+
+.Chip-Avatar {
+ color: var(--theme-component-chip-avatar-color);
+ width: 24px;
+ height: 24px;
+ font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 12rem);
+ margin-left: 5px;
+ margin-right: -6px;
+}
+
+.Chip-Avatar-Small {
+ width: 18px;
+ height: 18px;
+ font-size: calc(var(--theme-font-size-rem-factor, 0.0625) * 10rem);
+ margin-left: 4px;
+ margin-right: -4px;
+}
+
+.Chip-Avatar-Color-Primary {
+ color: var(--theme-palette-primary-contrast-text);
+ background-color: var(--theme-palette-primary-dark);
+}
+
+.Chip-Avatar-Color-Secondary {
+ color: var(--theme-palette-secondary-contrast-text);
+ background-color: var(--theme-palette-secondary-dark);
+}
+
+.Chip-Icon {
+ color: var(--theme-component-chip-icon-color);
+ margin-left: 5px;
+ margin-right: -6px;
+}
+
+.Chip-Icon-Small {
+ width: 18px;
+ height: 18px;
+ margin-left: 4px;
+ margin-right: -4px;
+}
+
+.Chip-Icon-Color-Primary {
+ color: inherit;
+}
+
+.Chip-Icon-Color-Secondary {
+ color: inherit;
+}
+
+.Chip-Label {
+ cursor: inherit;
+ display: flex;
+ align-items: center;
+ user-select: none;
+ white-space: nowrap;
+ padding-left: 12px;
+ padding-right: 12px;
+}
+
+.Chip-Label-Small {
+ padding-left: 8px;
+ padding-right: 8px;
+}
+
+.Chip-DeleteIcon {
+ color: var(--theme-component-chip-delete-icon-color);
+ width: 22px;
+ cursor: pointer;
+ height: 22px;
+ margin: 0 5px 0 -6px;
+ -webkit-tap-highlight-color: transparent;
+}
+
+.Chip-DeleteIcon:hover {
+ color: var(--theme-component-chip-delete-icon-color-hover);
+}
+
+.Chip-DeleteIcon-Small {
+ width: 16px;
+ height: 16px;
+ margin-left: -4px;
+ margin-right: 4px;
+}
+
+.Chip-DeleteIcon-Color-Primary {
+ color: var(--theme-component-chip-delete-icon-primary-color);
+}
+
+.Chip-DeleteIcon-Color-Primary:hover, .Chip-DeleteIcon-Color-Primary:active {
+ color: var(--theme-palette-primary-contrast-text);
+}
+
+.Chip-DeleteIcon-Color-Secondary {
+ color: var(--theme-component-chip-delete-icon-secondary-color);
+}
+
+.Chip-DeleteIcon-Color-Secondary:hover, .Chip-DeleteIcon-Color-Secondary:active {
+ color: var(--theme-palette-secondary-contrast-text);
+}
+
+.Chip-DeleteIcon-Outlined-Color-Primary {
+ color: var(--theme-component-chip-delete-icon-outlined-primary-color);
+}
+
+.Chip-DeleteIcon-Outlined-Color-Primary:hover, .Chip-DeleteIcon-Outlined-Color-Primary:active {
+ color: var(--theme-palette-primary-main);
+}
+
+.Chip-DeleteIcon-Outlined-Color-Secondary {
+ color: var(--theme-component-chip-delete-icon-outlined-secondary-color);
+}
+
+.Chip-DeleteIcon-Outlined-Color-Secondary:hover, .Chip-DeleteIcon-Outlined-Color-Secondary:active {
+ color: var(--theme-palette-secondary-main);
+}
+
+.Chip-DeleteContainer-Medium {
+ width: 22px;
+ height: 22px;
+}
+
+.Chip-DeleteContainer-Small {
+ width: 16px;
+ height: 16px;
+}
\ No newline at end of file
diff --git a/Chip/src/Chip/ChipVariant.cs b/Chip/src/Chip/ChipVariant.cs
new file mode 100644
index 0000000..7e32a3a
--- /dev/null
+++ b/Chip/src/Chip/ChipVariant.cs
@@ -0,0 +1,9 @@
+namespace Skclusive.Material.Chip
+{
+ public enum ChipVariant
+ {
+ Default,
+
+ Outlined,
+ }
+}
diff --git a/Chip/src/Extension/ChipExtension.cs b/Chip/src/Extension/ChipExtension.cs
new file mode 100644
index 0000000..78c66d7
--- /dev/null
+++ b/Chip/src/Extension/ChipExtension.cs
@@ -0,0 +1,26 @@
+using Microsoft.Extensions.DependencyInjection;
+using Skclusive.Core.Component;
+using Skclusive.Material.Core;
+using Skclusive.Material.Theme;
+using Skclusive.Material.Avatar;
+using Skclusive.Material.Icon;
+using Skclusive.Script.DomHelpers;
+
+namespace Skclusive.Material.Chip
+{
+ public static class ChipExtension
+ {
+ public static void TryAddChipServices(this IServiceCollection services, IMaterialConfig config)
+ {
+ services.TryAddDomHelpersServices(config);
+
+ services.TryAddAvatarServices(config);
+
+ services.TryAddIconServices(config);
+
+ services.TryAddStyleTypeProvider();
+
+ services.TryAddStyleProducer();
+ }
+ }
+}
diff --git a/Chip/src/Producer/ChipStyleProducer.cs b/Chip/src/Producer/ChipStyleProducer.cs
new file mode 100644
index 0000000..2409b22
--- /dev/null
+++ b/Chip/src/Producer/ChipStyleProducer.cs
@@ -0,0 +1,49 @@
+using System.Collections.Generic;
+using System.Globalization;
+using Skclusive.Core.Component;
+using Skclusive.Material.Theme;
+
+namespace Skclusive.Material.Chip
+{
+ public class ChipStyleProducer : IStyleProducer
+ {
+ public IDictionary Variables(ThemeValue theme)
+ {
+ var palette = theme.Palette;
+
+ string ToContrastText(string color)
+ {
+ return color.ToContrastText(palette.ContrastThreshold);
+ }
+
+ var isDark = theme.IsDark();
+
+ return new Dictionary
+ {
+ { "--theme-component-chip-color", ToContrastText(isDark ? palette.Grey.X700 : palette.Grey.X300).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-background-color", (isDark ? palette.Grey.X700 : palette.Grey.X300).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-clickable-focus", (isDark ? palette.Grey.X700 : palette.Grey.X300).Emphasize(0.08m).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-clickable-active", (isDark ? palette.Grey.X700 : palette.Grey.X300).Emphasize(0.12m).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-clickable-primary-focus", palette.Primary.Main.Emphasize(0.08m).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-clickable-primary-active", palette.Primary.Main.Emphasize(0.12m).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-clickable-secondary-focus", palette.Secondary.Main.Emphasize(0.08m).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-clickable-secondary-active", palette.Secondary.Main.Emphasize(0.12m).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-deletable-focus", (isDark ? palette.Grey.X700 : palette.Grey.X300).Emphasize(0.08m).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-deletable-primary-focus", palette.Primary.Main.Emphasize(0.2m).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-deletable-secondary-focus", palette.Secondary.Main.Emphasize(0.2m).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-outlined-focus", palette.Text.Primary.Fade(palette.Action.HoverOpacity).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-outlined-primary-focus", palette.Primary.Main.Fade(palette.Action.HoverOpacity).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-outlined-secondary-focus", palette.Secondary.Main.Fade(palette.Action.HoverOpacity).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-avatar-color", (isDark ? palette.Grey.X300 : palette.Grey.X700).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-icon-color", (isDark ? palette.Grey.X300 : palette.Grey.X700).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-delete-icon-color", palette.Text.Primary.Fade(0.26m).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-delete-icon-color-hover", palette.Text.Primary.Fade(0.26m).Fade(0.4m).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-delete-icon-primary-color", palette.Primary.ContrastText.Fade(0.7m).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-delete-icon-secondary-color", palette.Secondary.ContrastText.Fade(0.7m).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-delete-icon-outlined-primary-color", palette.Primary.Main.Fade(0.7m).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-delete-icon-outlined-secondary-color", palette.Secondary.Main.Fade(0.7m).ToString(CultureInfo.InvariantCulture) },
+ { "--theme-component-chip-border-outlined", (isDark ? "rgba(255, 255, 255, 0.23)" : "rgba(0, 0, 0, 0.23)").ToString(CultureInfo.InvariantCulture) },
+ };
+ }
+ }
+}
\ No newline at end of file
diff --git a/Chip/src/Provider/ChipStyleProvider.cs b/Chip/src/Provider/ChipStyleProvider.cs
new file mode 100644
index 0000000..0d90aa6
--- /dev/null
+++ b/Chip/src/Provider/ChipStyleProvider.cs
@@ -0,0 +1,11 @@
+using Skclusive.Core.Component;
+
+namespace Skclusive.Material.Chip
+{
+ public class ChipStyleProvider : StyleTypeProvider
+ {
+ public ChipStyleProvider() : base(typeof(ChipStyle))
+ {
+ }
+ }
+}
\ No newline at end of file
diff --git a/Chip/src/_Imports.razor b/Chip/src/_Imports.razor
new file mode 100644
index 0000000..baff502
--- /dev/null
+++ b/Chip/src/_Imports.razor
@@ -0,0 +1,5 @@
+@using Microsoft.AspNetCore.Components.Web
+@using Skclusive.Core.Component
+@using Skclusive.Material.Core
+@using Skclusive.Material.Icon
+@using Skclusive.Material.Avatar
\ No newline at end of file
diff --git a/Container/src/Container.csproj b/Container/src/Container.csproj
index 9ef3fd0..b88aeca 100644
--- a/Container/src/Container.csproj
+++ b/Container/src/Container.csproj
@@ -1,10 +1,9 @@
- 2.0.1
+ 5.0.0
$(VersionSuffix)
- netstandard2.1
- 3.0
+ net5.0
Skclusive.Material.Container
Skclusive.Material.Container
Skclusive.Material.Container
@@ -17,7 +16,7 @@
-
+
diff --git a/Container/src/Container/Container.razor b/Container/src/Container/Container.razor
index 8e3dd1e..1376d71 100644
--- a/Container/src/Container/Container.razor
+++ b/Container/src/Container/Container.razor
@@ -1,11 +1,14 @@
@namespace Skclusive.Material.Container
-@inherits ContainerComponent
+@inherits MaterialComponent
@ChildContent
diff --git a/Container/src/Container/Container.cs b/Container/src/Container/Container.razor.cs
similarity index 94%
rename from Container/src/Container/Container.cs
rename to Container/src/Container/Container.razor.cs
index 9b15302..33365fe 100644
--- a/Container/src/Container/Container.cs
+++ b/Container/src/Container/Container.razor.cs
@@ -5,9 +5,9 @@
namespace Skclusive.Material.Container
{
- public class ContainerComponent : MaterialComponent
+ public partial class Container : MaterialComponent
{
- public ContainerComponent() : base("Container")
+ public Container() : base("Container")
{
}
diff --git a/Container/src/Container/ContainerStyle.razor b/Container/src/Container/ContainerStyle.razor
index 8552cb5..2623cd1 100644
--- a/Container/src/Container/ContainerStyle.razor
+++ b/Container/src/Container/ContainerStyle.razor
@@ -1,83 +1,85 @@
@namespace Skclusive.Material.Container
@inherits StyleComponentBase
-
+.Container-Root {
+ width: 100%;
+ display: block;
+ box-sizing: border-box;
+ margin-left: auto;
+ margin-right: auto;
+ padding-left: calc(var(--theme-spacing) * 2px);
+ padding-right: calc(var(--theme-spacing) * 2px);
+}
+@media (min-width:600px) {
.Container-Root {
- width: 100%;
- display: block;
- box-sizing: border-box;
- margin-left: auto;
- margin-right: auto;
- padding-left: 16px;
- padding-right: 16px;
+ padding-left: calc(var(--theme-spacing) * 3px);
+ padding-right: calc(var(--theme-spacing) * 3px);
}
+}
- @media (min-width:600px) {
- .Container-Root {
- padding-left: 24px;
- padding-right: 24px;
- }
+@media (min-width:960px) {
+ .Container-Root {
+ padding-left: calc(var(--theme-spacing) * 4px);
+ padding-right: calc(var(--theme-spacing) * 4px);
}
+}
- .Container-DisableGutters {
- padding-left: 0;
- padding-right: 0;
- }
+.Container-DisableGutters {
+ padding-left: 0;
+ padding-right: 0;
+}
- @media (min-width:600px) {
- .Container-Fixed {
- max-width: 600px;
- }
+@media (min-width:600px) {
+ .Container-Fixed {
+ max-width: calc(var(--theme-breakpoints-values-sm) * 1px);
}
+}
- @media (min-width:960px) {
- .Container-Fixed {
- max-width: 960px;
- }
+@media (min-width:960px) {
+ .Container-Fixed {
+ max-width: calc(var(--theme-breakpoints-values-md) * 1px);
}
+}
- @media (min-width:1280px) {
- .Container-Fixed {
- max-width: 1280px;
- }
+@media (min-width:1280px) {
+ .Container-Fixed {
+ max-width: calc(var(--theme-breakpoints-values-lg) * 1px);
}
+}
- @media (min-width:1920px) {
- .Container-Fixed {
- max-width: 1920px;
- }
+@media (min-width:1920px) {
+ .Container-Fixed {
+ max-width: calc(var(--theme-breakpoints-values-xl) * 1px);
}
+}
- @media (min-width:0px) {
- .Container-MaxWidth-ExtraSmall {
- max-width: 444px;
- }
+@media (min-width:0px) {
+ .Container-MaxWidth-ExtraSmall {
+ max-width: 444px;
}
+}
- @media (min-width:600px) {
- .Container-MaxWidth-Small {
- max-width: 600px;
- }
+@media (min-width:600px) {
+ .Container-MaxWidth-Small {
+ max-width: calc(var(--theme-breakpoints-values-sm) * 1px);
}
+}
- @media (min-width:960px) {
- .Container-MaxWidth-Medium {
- max-width: 960px;
- }
+@media (min-width:960px) {
+ .Container-MaxWidth-Medium {
+ max-width: calc(var(--theme-breakpoints-values-md) * 1px);
}
+}
- @media (min-width:1280px) {
- .Container-MaxWidth-Large {
- max-width: 1280px;
- }
+@media (min-width:1280px) {
+ .Container-MaxWidth-Large {
+ max-width: calc(var(--theme-breakpoints-values-lg) * 1px);
}
+}
- @media (min-width:1920px) {
- .Container-MaxWidth-ExtraLarge {
- max-width: 1920px;
- }
+@media (min-width:1920px) {
+ .Container-MaxWidth-ExtraLarge {
+ max-width: calc(var(--theme-breakpoints-values-xl) * 1px);
}
-
-
\ No newline at end of file
+}
\ No newline at end of file
diff --git a/Container/src/Extension/ContainerExtension.cs b/Container/src/Extension/ContainerExtension.cs
new file mode 100644
index 0000000..298c324
--- /dev/null
+++ b/Container/src/Extension/ContainerExtension.cs
@@ -0,0 +1,17 @@
+using Microsoft.Extensions.DependencyInjection;
+using Skclusive.Core.Component;
+using Skclusive.Material.Core;
+using Skclusive.Material.Theme;
+
+namespace Skclusive.Material.Container
+{
+ public static class ContainerExtension
+ {
+ public static void TryAddContainerServices(this IServiceCollection services, IMaterialConfig config)
+ {
+ services.TryAddThemeServices(config);
+
+ services.TryAddStyleTypeProvider();
+ }
+ }
+}
diff --git a/Container/src/Provider/ContainerStyleProvider.cs b/Container/src/Provider/ContainerStyleProvider.cs
new file mode 100644
index 0000000..b5edd46
--- /dev/null
+++ b/Container/src/Provider/ContainerStyleProvider.cs
@@ -0,0 +1,11 @@
+using Skclusive.Core.Component;
+
+namespace Skclusive.Material.Container
+{
+ public class ContainerStyleProvider : StyleTypeProvider
+ {
+ public ContainerStyleProvider() : base(typeof(ContainerStyle))
+ {
+ }
+ }
+}
\ No newline at end of file
diff --git a/Material/src/Extension/MaterialConfig.cs b/Core/src/Config/MaterialConfig.cs
similarity index 95%
rename from Material/src/Extension/MaterialConfig.cs
rename to Core/src/Config/MaterialConfig.cs
index 4a519dc..6c36c6c 100644
--- a/Material/src/Extension/MaterialConfig.cs
+++ b/Core/src/Config/MaterialConfig.cs
@@ -1,6 +1,6 @@
using Skclusive.Core.Component;
-namespace Skclusive.Material.Component
+namespace Skclusive.Material.Core
{
public interface IMaterialConfig : ICoreConfig
{
diff --git a/Core/src/Core.csproj b/Core/src/Core.csproj
index e3ceefa..13f9fc7 100644
--- a/Core/src/Core.csproj
+++ b/Core/src/Core.csproj
@@ -1,10 +1,9 @@
- 2.0.1
+ 5.0.0
$(VersionSuffix)
- netstandard2.1
- 3.0
+ net5.0
Skclusive.Material.Core
Skclusive.Material.Core
Skclusive.Material.Core
@@ -17,12 +16,10 @@
-
-
+
diff --git a/Core/src/Core/MaterialContextComponent.cs b/Core/src/Core/MaterialContextComponent.cs
index 86d4eae..3bece79 100644
--- a/Core/src/Core/MaterialContextComponent.cs
+++ b/Core/src/Core/MaterialContextComponent.cs
@@ -23,7 +23,7 @@ public MaterialContextComponent(string selector = ""): base(selector)
public bool HasContent => ChildContent != null;
- protected IComponentContext Context => new ComponentContextBuilder()
+ protected virtual IComponentContext Context => new ComponentContextBuilder()
.WithClass(Class)
.WithStyle(Style)
.WithRefBack(ChildRef)
diff --git a/Core/src/Core/MaterialLayoutComponent.cs b/Core/src/Core/MaterialLayoutComponent.cs
new file mode 100644
index 0000000..f88c052
--- /dev/null
+++ b/Core/src/Core/MaterialLayoutComponent.cs
@@ -0,0 +1,19 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Skclusive.Material.Core
+{
+ public class MaterialLayoutComponent : MaterialComponentBase
+ {
+ ///
+ /// Body of the current component.
+ ///
+ [Parameter]
+ public RenderFragment Body { get; set; }
+
+ public MaterialLayoutComponent(string selector = ""): base(selector)
+ {
+ }
+
+ public bool HasBody => Body != null;
+ }
+}
\ No newline at end of file
diff --git a/Core/src/Core/Portal.cs b/Core/src/Core/Portal.cs
deleted file mode 100644
index 39e03e4..0000000
--- a/Core/src/Core/Portal.cs
+++ /dev/null
@@ -1,88 +0,0 @@
-using System;
-using System.Threading.Tasks;
-using Microsoft.AspNetCore.Components;
-using Microsoft.AspNetCore.Components.Rendering;
-using Skclusive.Core.Component;
-using Skclusive.Script.DomHelpers;
-
-namespace Skclusive.Material.Core
-{
- public class Portal : MaterialContextComponent, IDisposable
- {
- [Inject]
- public DomHelpers DomHelpers { set; get; }
-
- ///
- /// html component tag to be used as container.
- ///
- [Parameter]
- public string Component { get; set; } = "div";
-
- ///
- /// Reference attached to the target.
- ///
- [Parameter]
- public IReference TargetRef { get; set; }
-
- ///
- /// Reference attached to the target body.
- ///
- [Parameter]
- public IReference TargetBodyRef { get; set; }
-
- ///
- /// Disable the portal behavior.
- /// The children stay within it's parent DOM hierarchy.
- ///
- [Parameter]
- public bool DisablePortal { get; set; } = false;
-
- protected IReference SourceRef { get; set; } = new Reference();
-
- protected override void BuildRenderTree(RenderTreeBuilder builder)
- {
- base.BuildRenderTree(builder);
-
- if (!DisablePortal)
- {
- builder.OpenElement(0, Component);
- builder.AddAttribute(1, "style", "display: none;");
- builder.AddContent(2, ChildContent.Invoke(Context));
- builder.AddElementReferenceCapture(3, (refx) =>
- {
- SourceRef.Current = refx;
- });
- builder.CloseElement();
- }
- else
- {
- builder.AddContent(4, ChildContent.Invoke(Context));
- }
- }
-
- protected override async Task OnAfterRenderAsync()
- {
- await base.OnAfterRenderAsync();
-
- if (!DisablePortal)
- {
- // await Task.Delay(2000);
-
- await DomHelpers.MoveContentAsync(SourceRef.Current, TargetRef?.Current, TargetBodyRef?.Current);
- }
- }
-
- protected override void Dispose()
- {
- base.Dispose();
-
- if (!DisablePortal)
- {
- if (ChildRef.Current != null)
- {
- _ = DomHelpers.RemoveNodeAsync(ChildRef.Current);
- }
- }
- }
- }
-}
\ No newline at end of file
diff --git a/Core/src/Core/CoreHelpersExtension.cs b/Core/src/Extension/CoreExtensions.cs
similarity index 54%
rename from Core/src/Core/CoreHelpersExtension.cs
rename to Core/src/Extension/CoreExtensions.cs
index 81b2a05..39ad6c4 100644
--- a/Core/src/Core/CoreHelpersExtension.cs
+++ b/Core/src/Extension/CoreExtensions.cs
@@ -1,14 +1,13 @@
using Microsoft.Extensions.DependencyInjection;
-using Skclusive.Script.DomHelpers;
using Skclusive.Core.Component;
namespace Skclusive.Material.Core
{
- public static class CoreHelpersExtension
+ public static class CoreExtensions
{
- public static void TryAddMaterialCoreServices(this IServiceCollection services, ICoreConfig config)
+ public static void TryAddMaterialCoreServices(this IServiceCollection services, IMaterialConfig config)
{
- services.TryAddDomHelpersServices(config);
+ services.TryAddCoreServices(config);
}
}
}
diff --git a/Core/src/Responesive/Responesive.razor b/Core/src/Responsive/Responsive.razor
similarity index 98%
rename from Core/src/Responesive/Responesive.razor
rename to Core/src/Responsive/Responsive.razor
index cd11bad..8683825 100644
--- a/Core/src/Responesive/Responesive.razor
+++ b/Core/src/Responsive/Responsive.razor
@@ -1,5 +1,5 @@
@namespace Skclusive.Material.Core
-@inherits ResponsiveComponent
+@inherits MaterialComponentBase
+
+@ChildContent?.Invoke(Context)
\ No newline at end of file
diff --git a/Responsive/src/Responsive/Responsive.razor.cs b/Responsive/src/Responsive/Responsive.razor.cs
new file mode 100644
index 0000000..c514196
--- /dev/null
+++ b/Responsive/src/Responsive/Responsive.razor.cs
@@ -0,0 +1,179 @@
+using Microsoft.AspNetCore.Components;
+using Skclusive.Core.Component;
+using Skclusive.Material.Core;
+using System.Collections.Generic;
+
+namespace Skclusive.Material.Responsive
+{
+ public partial class Responsive : MaterialComponentBase
+ {
+ public Responsive() : base("Responsive")
+ {
+ }
+
+ protected string Prefix => $"{Selector}-{Name}";
+
+ ///
+ /// unique name to be used in class names.
+ ///
+ [Parameter]
+ public string Name { set; get; }
+
+ ///
+ /// If true, screens this size and down will be hidden.
+ ///
+ [Parameter]
+ public string ExtraSmallDown { set; get; }
+
+ ///
+ /// If true, screens this size and up will be hidden.
+ ///
+ [Parameter]
+ public string ExtraSmallUp { set; get; }
+
+ ///
+ /// If true, screens this size and up will be hidden.
+ ///
+ [Parameter]
+ public string ExtraSmallOnly { set; get; }
+
+ ///
+ /// If true, screens this size and up will be hidden.
+ ///
+ [Parameter]
+ public string SmallUp { set; get; }
+
+ ///
+ /// If true, screens this size and down will be hidden.
+ ///
+ [Parameter]
+ public string SmallDown { set; get; }
+
+ ///
+ /// If true, screens this size and down will be hidden.
+ ///
+ [Parameter]
+ public string SmallOnly { set; get; }
+
+ ///
+ /// If true, screens this size and down will be hidden.
+ ///
+ [Parameter]
+ public string MediumDown { set; get; }
+
+ ///
+ /// If true, screens this size and up will be hidden.
+ ///
+ [Parameter]
+ public string MediumUp { set; get; }
+
+ ///
+ /// If true, screens this size and up will be hidden.
+ ///
+ [Parameter]
+ public string MediumOnly { set; get; }
+
+ ///
+ /// If true, screens this size and down will be hidden.
+ ///
+ [Parameter]
+ public string LargeDown { set; get; }
+
+ ///
+ /// If true, screens this size and up will be hidden.
+ ///
+ [Parameter]
+ public string LargeUp { set; get; }
+
+ ///
+ /// If true, screens this size and up will be hidden.
+ ///
+ [Parameter]
+ public string LargeOnly { set; get; }
+
+ ///
+ /// If true, screens this size and down will be hidden.
+ ///
+ [Parameter]
+ public string ExtraLargeDown { set; get; }
+
+ ///
+ /// If true, screens this size and up will be hidden.
+ ///
+ [Parameter]
+ public string ExtraLargeUp { set; get; }
+
+ ///
+ /// If true, screens this size and up will be hidden.
+ ///
+ [Parameter]
+ public string ExtraLargeOnly { set; get; }
+
+ ///
+ /// ChildContent of the current component which gets component .
+ ///
+ [Parameter]
+ public RenderFragment ChildContent { set; get; }
+
+ protected IComponentContext Context => new ComponentContextBuilder()
+ .WithClass(_Class)
+ .WithStyle(_Style)
+ .WithRefBack(RootRef)
+ .WithDisabled(Disabled)
+ .Build();
+
+ protected override IEnumerable Classes
+ {
+ get
+ {
+ foreach (var item in base.Classes)
+ yield return item;
+
+ if (!string.IsNullOrWhiteSpace(ExtraSmallUp))
+ yield return nameof(ExtraSmallUp);
+
+ if (!string.IsNullOrWhiteSpace(ExtraSmallDown))
+ yield return nameof(ExtraSmallDown);
+
+ if (!string.IsNullOrWhiteSpace(ExtraSmallOnly))
+ yield return nameof(ExtraSmallOnly);
+
+ if (!string.IsNullOrWhiteSpace(SmallUp))
+ yield return nameof(SmallUp);
+
+ if (!string.IsNullOrWhiteSpace(SmallDown))
+ yield return nameof(SmallDown);
+
+ if (!string.IsNullOrWhiteSpace(SmallOnly))
+ yield return nameof(SmallOnly);
+
+ if (!string.IsNullOrWhiteSpace(MediumUp))
+ yield return nameof(MediumUp);
+
+ if (!string.IsNullOrWhiteSpace(MediumDown))
+ yield return nameof(MediumDown);
+
+ if (!string.IsNullOrWhiteSpace(MediumOnly))
+ yield return nameof(MediumOnly);
+
+ if (!string.IsNullOrWhiteSpace(LargeUp))
+ yield return nameof(LargeUp);
+
+ if (!string.IsNullOrWhiteSpace(LargeDown))
+ yield return nameof(LargeDown);
+
+ if (!string.IsNullOrWhiteSpace(LargeOnly))
+ yield return nameof(LargeOnly);
+
+ if (!string.IsNullOrWhiteSpace(ExtraLargeUp))
+ yield return nameof(ExtraLargeUp);
+
+ if (!string.IsNullOrWhiteSpace(ExtraLargeDown))
+ yield return nameof(ExtraLargeDown);
+
+ if (!string.IsNullOrWhiteSpace(ExtraLargeOnly))
+ yield return nameof(ExtraLargeOnly);
+ }
+ }
+ }
+}
diff --git a/Responsive/src/_Imports.razor b/Responsive/src/_Imports.razor
new file mode 100644
index 0000000..6c76534
--- /dev/null
+++ b/Responsive/src/_Imports.razor
@@ -0,0 +1,3 @@
+@using Microsoft.AspNetCore.Components.Web
+@using Skclusive.Core.Component
+@using Skclusive.Material.Core
\ No newline at end of file
diff --git a/Script/src/DetectThemeHelper/DetectThemeHelper.cs b/Script/src/DetectThemeHelper/DetectThemeHelper.cs
deleted file mode 100644
index 54b3ad3..0000000
--- a/Script/src/DetectThemeHelper/DetectThemeHelper.cs
+++ /dev/null
@@ -1,54 +0,0 @@
-using System;
-using System.Collections.Generic;
-using System.Threading.Tasks;
-using Microsoft.JSInterop;
-using Skclusive.Core.Component;
-
-namespace Skclusive.Material.Script
-{
- public class DetectThemeHelper
- {
- public DetectThemeHelper(IJSRuntime jsruntime)
- {
- JSRuntime = jsruntime;
- }
-
- private object Id;
-
- private IJSRuntime JSRuntime { get; }
-
- public event EventHandler OnChange;
-
- private static IDictionary THEME_MAPPING = new Dictionary
- {
- { "Dark", Theme.Dark },
- { "Light", Theme.Light },
- { "None", Theme.None }
- };
-
- private readonly static EventArgs EVENT_ARGS = new EventArgs();
-
- [JSInvokable]
- public Task OnChangeAsync(string theme)
- {
- OnChange?.Invoke(EVENT_ARGS, THEME_MAPPING[theme]);
-
- return Task.CompletedTask;
- }
-
- public async Task RegisterAsync()
- {
- Id = await JSRuntime.InvokeAsync