Changes: Drawer, Tabs, Layout

src/Connected.Components/Components/Alert/Alert.razor.cs

@@ -37,6 +37,7 @@ public partial class Alert : UIComponent{
 	[Parameter] public EventCallback<Alert> CloseClicked { get; set; }
 
 	#endregion
+
 	#region Content placeholders
 	/// <summary>
 	/// Define the glyph used for the close button.

src/Connected.Components/Components/Drawer/Drawer.razor.cs

@@ -1,9 +1,7 @@
-using Connected.Annotations;
+using Connected.Extensions;
-using Connected.Extensions;
 using Connected.Services;
 using Connected.Utilities;
 using Microsoft.AspNetCore.Components;
-using System.ComponentModel;
 
 namespace Connected.Components;
 
@@ -101,7 +99,6 @@ public partial class Drawer : UIComponent, IDisposable, INavigationEventReceiver
 		return Anchor.ToDescription();
 	}
 
-
 	private bool closeOnMouseLeave = false;
 
 	public async void OnMouseEnter()
@@ -122,69 +119,6 @@ public partial class Drawer : UIComponent, IDisposable, INavigationEventReceiver
 		}
 	}
 
-	protected override void OnInitialized()
-	{
-		if (Variant != DrawerVariant.Temporary)
-		{
-			DrawerContainer?.Add(this);
-		}
-		base.OnInitialized();
-	}
-
-	protected override async Task OnAfterRenderAsync(bool firstRender)
-	{
-		if (firstRender)
-		{
-			//await UpdateHeight();
-			var result = await Breakpointistener.Subscribe(UpdateBreakpointState);
-			//var currentBreakpoint = result.Breakpoint;
-
-			_breakpointListenerSubscriptionId = result.SubscriptionId;
-
-			var refresh = false;
-
-			if (_screenBreakpoint != result.Breakpoint) refresh = true;
-			_screenBreakpoint = result.Breakpoint;
-			if (_screenBreakpoint < Breakpoint && _open)
-			{
-				_keepInitialState = true;
-				await OpenChanged.InvokeAsync(false);
-			}
-
-			_isRendered = true;
-			if (Anchor == Anchor.Bottom || Anchor == Anchor.Top || _screenBreakpoint == Breakpoint.None)
-			{
-				refresh = true;
-			}
-			if (refresh) StateHasChanged();
-		}
-
-		await base.OnAfterRenderAsync(firstRender);
-	}
-
-	public void Dispose()
-	{
-		Dispose(true);
-		GC.SuppressFinalize(this);
-	}
-
-	int _disposeCount;
-	public virtual void Dispose(bool disposing)
-	{
-		if (Interlocked.Increment(ref _disposeCount) == 1)
-		{
-			if (disposing)
-			{
-				DrawerContainer?.Remove(this);
-
-				if (_breakpointListenerSubscriptionId != default)
-				{
-					Breakpointistener.Unsubscribe(_breakpointListenerSubscriptionId).AndForget();
-				}
-			}
-		}
-	}
-
 	#endregion
 
 	#region Content placeholders
@@ -427,4 +361,71 @@ public partial class Drawer : UIComponent, IDisposable, INavigationEventReceiver
 
 	#endregion
 
+	#region Lifecycle
+
+	protected override void OnInitialized()
+	{
+		if (Variant != DrawerVariant.Temporary)
+		{
+			DrawerContainer?.Add(this);
+		}
+		base.OnInitialized();
+	}
+
+	protected override async Task OnAfterRenderAsync(bool firstRender)
+	{
+		if (firstRender)
+		{
+			//await UpdateHeight();
+			var result = await Breakpointistener.Subscribe(UpdateBreakpointState);
+			//var currentBreakpoint = result.Breakpoint;
+
+			_breakpointListenerSubscriptionId = result.SubscriptionId;
+
+			var refresh = false;
+
+			if (_screenBreakpoint != result.Breakpoint) refresh = true;
+			_screenBreakpoint = result.Breakpoint;
+			if (_screenBreakpoint < Breakpoint && _open)
+			{
+				_keepInitialState = true;
+				await OpenChanged.InvokeAsync(false);
+			}
+
+			_isRendered = true;
+			if (Anchor == Anchor.Bottom || Anchor == Anchor.Top || _screenBreakpoint == Breakpoint.None)
+			{
+				refresh = true;
+			}
+			if (refresh) StateHasChanged();
+		}
+
+		await base.OnAfterRenderAsync(firstRender);
+	}
+
+	public void Dispose()
+	{
+		Dispose(true);
+		GC.SuppressFinalize(this);
+	}
+
+	int _disposeCount;
+	public virtual void Dispose(bool disposing)
+	{
+		if (Interlocked.Increment(ref _disposeCount) == 1)
+		{
+			if (disposing)
+			{
+				DrawerContainer?.Remove(this);
+
+				if (_breakpointListenerSubscriptionId != default)
+				{
+					Breakpointistener.Unsubscribe(_breakpointListenerSubscriptionId).AndForget();
+				}
+			}
+		}
+	}
+
+	#endregion
+
 }

src/Connected.Components/Components/Drawer/DrawerHeader.razor.cs

@@ -43,8 +43,6 @@ public partial class DrawerHeader : UIComponent
 	[Parameter]
 	public string? StyleList { get; set; }
 
-	#endregion
-
 	protected virtual CssBuilder CompiledClassList
 	{
 		get
@@ -55,4 +53,8 @@ public partial class DrawerHeader : UIComponent
 		}
 	}
 
+	#endregion
+
+
+
 }

src/Connected.Components/Components/Layout/Layout.razor.cs

@@ -1,5 +1,4 @@
 using Connected.Utilities;
-using System.Net;
 
 namespace Connected.Components;
 
@@ -20,12 +19,6 @@ public partial class Layout : DrawerContainer
 		{
 			return new StyleBuilder()
 				.AddStyle(base.StyleList);
-			//.AddStyle("width", Width, !string.IsNullOrWhiteSpace(Width) && !Fixed)
-			//.AddStyle("--mud-drawer-width", Width, !string.IsNullOrWhiteSpace(Width) && (!Fixed || Variant == DrawerVariant.Temporary))
-			//.AddStyle("height", Height, !string.IsNullOrWhiteSpace(Height))
-			//.AddStyle("--mud-drawer-content-height",string.IsNullOrWhiteSpace(Height) ? _height.ToPx() : Height,Anchor == Anchor.Bottom || Anchor == Anchor.Top)
-			//.AddStyle("visibility", "hidden", string.IsNullOrWhiteSpace(Height) && _height == 0 && (Anchor == Anchor.Bottom || Anchor == Anchor.Top));
-
 		}
 	}
 

src/Connected.Components/Components/Tabs/DynamicTabs.razor.cs

@@ -1,23 +1,11 @@
-using Connected.Annotations;
+using Microsoft.AspNetCore.Components;
-using Microsoft.AspNetCore.Components;
 
 namespace Connected.Components;
 
 public partial class DynamicTabs : Tabs
 {
-	/// <summary>
-	/// The icon used for the add button
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Tabs.Appearance)]
-	public string AddTabIcon { get; set; } = Icons.Material.Filled.Add;
 
-	/// <summary>
+	#region Event callbacks
-	/// the icon used of the close button
-	/// </summary>
-	[Parameter]
-	[Category(CategoryTypes.Tabs.Appearance)]
-	public string CloseTabIcon { get; set; } = Icons.Material.Filled.Close;
 
 	/// <summary>
 	/// The callback, when the add button has been clicked
@@ -29,47 +17,68 @@ public partial class DynamicTabs : Tabs
 	/// </summary>
 	[Parameter] public EventCallback<TabPanel> CloseTab { get; set; }
 
+	#endregion
+
+	#region Content placeholders
+	#endregion
+
+	#region Styling properties
+
+	protected override string InternalClassName { get; } = "dynamic-tabs";
+
+	/// <summary>
+	/// The icon used for the add button
+	/// </summary>
+	[Parameter]
+	public string AddTabIcon { get; set; } = Icons.Material.Filled.Add;
+
+	/// <summary>
+	/// the icon used of the close button
+	/// </summary>
+	[Parameter]
+	public string CloseTabIcon { get; set; } = Icons.Material.Filled.Close;
+
 	/// <summary>
 	/// Classes that are applied to the icon button of the add button
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Tabs.Appearance)]
 	public string AddIconClass { get; set; } = string.Empty;
 
 	/// <summary>
 	/// Styles that are applied to the icon button of the add button
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Tabs.Appearance)]
 	public string AddIconStyle { get; set; } = string.Empty;
 
 	/// <summary>
 	/// Classes that are applied to the icon button of the close button
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Tabs.Appearance)]
 	public string CloseIconClass { get; set; } = string.Empty;
 
 	/// <summary>
 	/// Styles that are applied to the icon button of the close button
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Tabs.Appearance)]
 	public string CloseIconStyle { get; set; } = string.Empty;
 
 	/// <summary>
 	/// Tooltip that shown when a user hovers of the add button. Empty or null, if no tooltip should be visible
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Tabs.Behavior)]
 	public string AddIconToolTip { get; set; } = string.Empty;
 
 	/// <summary>
 	/// Tooltip that shown when a user hovers of the close button. Empty or null, if no tooltip should be visible
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.Tabs.Behavior)]
 	public string CloseIconToolTip { get; set; } = string.Empty;
 
-	protected override string InternalClassName { get; } = "dynamic-tabs";
+
+	#endregion
+
+	#region Lifecycle
+	#endregion
+
+
 }

src/Connected.Components/Components/Tabs/TabPanel.razor

@@ -1,6 +1,6 @@
 @namespace Connected.Components
-@using Connected.Annotations;
 @inherits UIComponent
+
 @implements IAsyncDisposable
 
 @if (Parent?.KeepPanelsAlive == true)
@@ -16,125 +16,3 @@ else
         @ChildContent
     }
 }
-
-@code {
-
-    private Boolean _disposed;
-
-    [CascadingParameter] private Tabs Parent { get; set; }
-
-    public ElementReference PanelRef;
-
-
-    /// <summary>
-    /// Text will be displayed in the TabPanel as TabTitle.
-    /// </summary>
-    [Parameter] 
-    [Category(CategoryTypes.Tabs.Behavior)]
-    public string Text { get; set; }
-
-    /// <summary>
-    /// Glyph placed before the text if set.
-    /// </summary>
-    [Parameter] 
-    [Category(CategoryTypes.Tabs.Behavior)]
-    public string Icon { get; set; }
-
-    /// <summary>
-    /// If true, the tabpanel will be disabled.
-    /// </summary>
-    [Parameter]
-    [Category(CategoryTypes.Tabs.Behavior)]
-    public bool Disabled { get; set; }
-
-    /// <summary>
-    /// Optional information to be showed into a badge
-    /// </summary>
-    [Parameter] 
-    [Category(CategoryTypes.Tabs.Behavior)]
-    public object BadgeData { get; set; }
-
-    /// <summary>
-    /// Optional information to show the badge as a dot.
-    /// </summary>
-    [Parameter]
-    [Category(CategoryTypes.Tabs.Behavior)]
-    public bool BadgeDot { get; set; }
-
-    /// <summary>
-    /// The color of the badge.
-    /// </summary>
-    [Parameter]
-    [Category(CategoryTypes.Tabs.Appearance)]
-    public ThemeColor BadgeColor { get; set; } = ThemeColor.Primary;
-
-    /// <summary>
-    /// Unique TabPanel ID. Useful for activation when Panels are dynamically generated.
-    /// </summary>
-    [Parameter] 
-    [Category(CategoryTypes.Tabs.Behavior)]
-    public object ID { get; set; }
-
-    /// <summary>
-    /// Raised when tab is clicked
-    /// </summary>
-    [Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
-
-    /// <summary>
-    /// Child content of component.
-    /// </summary>
-    [Parameter] 
-    [Category(CategoryTypes.Tabs.Behavior)]
-    public RenderFragment ChildContent { get; set; }
-
-    /// <summary>
-    /// Tab content of component.
-    /// </summary>
-    [Parameter] 
-    [Category(CategoryTypes.Tabs.Behavior)]
-    public RenderFragment TabContent { get; set; }
-
-    /// <summary>
-    /// Tab content wrapper of component. It is used to wrap the content of a tab heading in a user supplied div or component. 
-    /// Use @context in the TabWrapperContent to render the tab header within your custom wrapper. 
-    /// This is most useful with tooltips, which must wrap the entire content they refer to.
-    /// </summary>
-    [Parameter] 
-    [Category(CategoryTypes.Tabs.Behavior)]
-    public RenderFragment<RenderFragment> TabWrapperContent { get; set; }
-
-    /// <summary>
-    /// TabPanel Tooltip. It will be ignored if TabContent is provided.
-    /// </summary>
-    [Parameter]
-    [Category(CategoryTypes.Tabs.Behavior)]
-    public string ToolTip { get; set; }
-
-    protected override async Task OnAfterRenderAsync(bool firstRender)
-    {
-        await base.OnAfterRenderAsync(firstRender);
-        if(firstRender == true && Parent != null)
-        {
-            await Parent.SetPanelRef(PanelRef);
-        }
-    }
-
-    protected override void OnInitialized()
-    {
-        // NOTE: we must not throw here because we need the component to be able to live for the API docs to be able to infer default values
-        //if (Parent == null)
-        //    throw new ArgumentNullException(nameof(Parent), "TabPanel must exist within a Tabs component");
-        base.OnInitialized();
-
-        Parent?.AddPanel(this);
-    }
-
-    public async ValueTask DisposeAsync()
-    {
-        if(_disposed == true) { return;  }
-
-        _disposed = true;
-        await Parent?.RemovePanel(this);
-
-    }
-}

src/Connected.Components/Components/Tabs/TabPanel.razor.cs

@@ -0,0 +1,111 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Web;
+
+namespace Connected.Components;
+public partial class TabPanel : UIComponent
+{
+	#region Event callbacks
+
+	/// <summary>
+	/// Raised when tab is clicked
+	/// </summary>
+	[Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
+
+	#endregion
+
+	#region Content placeholders
+
+	/// <summary>
+	/// Child content of component.
+	/// </summary>
+	[Parameter]
+	public RenderFragment ChildContent { get; set; }
+
+	/// <summary>
+	/// Tab content of component.
+	/// </summary>
+	[Parameter]
+	public RenderFragment TabContent { get; set; }
+
+	/// <summary>
+	/// Tab content wrapper of component. It is used to wrap the content of a tab heading in a user supplied div or component. 
+	/// Use @context in the TabWrapperContent to render the tab header within your custom wrapper. 
+	/// This is most useful with tooltips, which must wrap the entire content they refer to.
+	/// </summary>
+	[Parameter]
+	public RenderFragment<RenderFragment> TabWrapperContent { get; set; }
+
+	/// <summary>
+	/// TabPanel Tooltip. It will be ignored if TabContent is provided.
+	/// </summary>
+	[Parameter]
+	public string ToolTip { get; set; }
+
+	private bool _disposed;
+
+	[CascadingParameter] private Tabs Parent { get; set; }
+
+	public ElementReference PanelRef;
+
+	#endregion
+
+	#region Styling properties
+
+	/// <summary>
+	/// Text will be displayed in the TabPanel as TabTitle.
+	/// </summary>
+	[Parameter]
+	public string Text { get; set; }
+
+	/// <summary>
+	/// Glyph placed before the text if set.
+	/// </summary>
+	[Parameter]
+	public string Icon { get; set; }
+
+	/// <summary>
+	/// If true, the tabpanel will be disabled.
+	/// </summary>
+	[Parameter]
+	public bool Disabled { get; set; }
+
+	/// <summary>
+	/// Unique TabPanel ID. Useful for activation when Panels are dynamically generated.
+	/// </summary>
+	[Parameter]
+	public object ID { get; set; }
+	#endregion
+
+	#region Lifecycle
+
+	protected override async Task OnAfterRenderAsync(bool firstRender)
+	{
+		await base.OnAfterRenderAsync(firstRender);
+		if (firstRender == true && Parent != null)
+		{
+			await Parent.SetPanelRef(PanelRef);
+		}
+	}
+
+	protected override void OnInitialized()
+	{
+		// NOTE: we must not throw here because we need the component to be able to live for the API docs to be able to infer default values
+		//if (Parent == null)
+		//    throw new ArgumentNullException(nameof(Parent), "TabPanel must exist within a Tabs component");
+		base.OnInitialized();
+
+		Parent?.AddPanel(this);
+	}
+
+	public async ValueTask DisposeAsync()
+	{
+		if (_disposed == true) { return; }
+
+		_disposed = true;
+		await Parent?.RemovePanel(this);
+
+
+	#endregion
+	
+	}
+}

src/Connected.Components/Components/Tabs/Tabs.razor

@@ -98,10 +98,6 @@
                 <Icon Icon="@panel.Icon" Color="@IconColor" Class="tab-icon-text" />
                 @((MarkupString)panel.Text)
             }
-            @if (panel.BadgeData != null || panel.BadgeDot)
-            {
-                <Badge Dot="@panel.BadgeDot" Content="@panel.BadgeData" Color="@panel.BadgeColor" Class="tab-badge" />
-            }
             @if (TabPanelHeaderPosition == TabHeaderPosition.After && TabPanelHeader != null)
             {
                 <div class="tabs-panel-header mud-tabs-panel-header-after">

src/Connected.Components/Components/TextField/TextField.razor.cs

@@ -15,7 +15,6 @@ public partial class TextField<T> : DebouncedInput<T>
 	/// Type of the input element. It should be a valid HTML5 input type.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.FormComponent.Behavior)]
 	public InputType InputType { get; set; } = InputType.Text;
 
 	internal override InputType GetInputType() => InputType;
@@ -26,7 +25,6 @@ public partial class TextField<T> : DebouncedInput<T>
 	/// Show clear button.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.FormComponent.Behavior)]
 	public bool Clearable { get; set; } = false;
 
 	/// <summary>
@@ -117,7 +115,6 @@ public partial class TextField<T> : DebouncedInput<T>
 	/// Note: when Mask is set, TextField will ignore some properties such as Lines, Pattern or HideSpinButtons, OnKeyDown and OnKeyUp, etc.
 	/// </summary>
 	[Parameter]
-	[Category(CategoryTypes.General.Data)]
 	public IMask Mask
 	{
 		get => _maskReference?.MaskKind ?? _mask; // this might look strange, but it is absolutely necessary due to how Mask works.