Skip to content

Commit 7375199

Browse files
mckaragozmckaragoz
committed
Fix CSP Violation
1 parent 01ba8fe commit 7375199

File tree

7 files changed

+669
-151
lines changed

7 files changed

+669
-151
lines changed

‎CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml‎

Lines changed: 30 additions & 31 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎CodeBeam.MudBlazor.Extensions/Components/StepperExtended/MudStepperExtended.razor‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@
88
}
99

1010
<CascadingValue Value="this" IsFixed="true">
11-
<MudStack Class="@Class" Style="@Style">
11+
<MudStack Class="@Classname" Style="@Style">
1212
<MudStack Class="mud-stepper-header-content-wrapper-extended" Row="@Vertical">
13-
<div class="mud-stepper-inner-header-extended" style="@GetStepperStyle()">
14-
<div class="mud-stepper-sub-inner-header-extended" style=@GetStepperSubStyle()>
13+
<div class="mud-stepper-inner-header-extended [email protected] @(Vertical ? "vertical" : "horizontal")">
14+
<div class="@(Vertical ? "mud-stepper-sub-inner-header-vertical-extended" : "mud-stepper-sub-inner-header-extended")">
1515
@{
1616
MudStepExtended? currentStep = null;
1717
}
@@ -26,7 +26,7 @@
2626
continue;
2727
}
2828

29-
<div class="@GetStepClass()" style="@GetStepPercent()">
29+
<div class="mud-stepper-step [email protected] @(Vertical ? "vertical" : "horizontal") @(Vertical ? "d-flex" : "")">
3030
<div @onclick="@(Linear ? null! : () => GoToStepByReferenceAsync(step))" class="@HeaderClassname">
3131
@{
3232
bool active = IsStepActive(step);
@@ -39,8 +39,8 @@
3939
{
4040
@if (step.Status == StepStatus.Completed)
4141
{
42-
<MudBadge BadgeClass="mud-stepper-badge" Overlap="true" Bordered="true" Color="@Color" Icon="@Icons.Material.Filled.Done">
43-
<MudAvatar Style="@AvatarStylename" Color="@Color" Variant="@Variant" Size="@HeaderSize">
42+
<MudBadge BadgeClass="mud-stepper-badge-extended" Overlap="true" Bordered="true" Color="@Color" Icon="@Icons.Material.Filled.Done">
43+
<MudAvatar Class="@AvatarClassname" Color="@Color" Variant="@Variant" Size="@HeaderSize">
4444
@if (!string.IsNullOrWhiteSpace(step.Icon))
4545
{
4646
<MudIcon Class="pa-1" Icon="@step.Icon" Size="@HeaderSize" />
@@ -51,7 +51,7 @@
5151
else
5252
{
5353
Color incompleteColor = (HeaderBadgeView == HeaderBadgeView.GreyOutIncomplete) && !active ? Color.Transparent : @Color;
54-
<MudAvatar Style="@AvatarStylename" Color="@incompleteColor" Variant="@Variant" Size="@HeaderSize">
54+
<MudAvatar Class="@AvatarClassname" Color="@incompleteColor" Variant="@Variant" Size="@HeaderSize">
5555
<MudIcon Class="pa-1" Icon="@step.Icon" Size="@HeaderSize" />
5656
</MudAvatar>
5757
}
@@ -75,9 +75,9 @@
7575
</div>
7676
@if (MobileView == true)
7777
{
78-
<MudText Style="@GetMobileStyle()" Typo="Typo.body2" Color="@Color">@GetMobileStepPositionText()</MudText>
78+
<MudText Class="@(Vertical ? "mud-stepper-text-mobile-vertical-extended" : "mud-stepper-text-mobile-extended")" Typo="Typo.body2" Color="@Color">@GetMobileStepPositionText()</MudText>
7979
}
80-
<MudProgressLinear Vertical="@Vertical" Color="@Color" Value="@ProgressValue" Min="0" Max="100" Style="@GetProgressLinearStyle()" />
80+
<MudProgressLinear Class="@ProgressClassname" Vertical="@Vertical" Color="@Color" Value="@ProgressValue" Min="0" Max="100" />
8181

8282
</div>
8383
@if (Loading)

‎CodeBeam.MudBlazor.Extensions/Components/StepperExtended/MudStepperExtended.razor.cs‎

Lines changed: 61 additions & 103 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
using MudExtensions.Utilities;
22
using Microsoft.AspNetCore.Components;
33
using MudBlazor;
4-
using MudBlazor.Extensions;
54
using MudBlazor.Utilities;
65

76
namespace MudExtensions
@@ -16,14 +15,27 @@ public partial class MudStepperExtended : MudComponentBase
1615
MudAnimate _animate = new();
1716
Guid _animateGuid = Guid.NewGuid();
1817

18+
/// <summary>
19+
/// Gets the CSS class string that represents the current visual state of the stepper component.
20+
/// </summary>
21+
/// <remarks>The returned class string includes base and orientation-specific classes, as well as
22+
/// any additional classes specified by the user. This property is typically used to apply styling to the
23+
/// stepper element based on its configuration.</remarks>
24+
protected string? Classname => new CssBuilder("mud-stepper-extended")
25+
.AddClass("mud-stepper-horizontal-extended", !Vertical)
26+
.AddClass("mud-stepper-vertical-extended", Vertical)
27+
.AddClass(Class)
28+
.Build();
29+
1930
/// <summary>
2031
///
2132
/// </summary>
22-
protected string? HeaderClassname => new CssBuilder("d-flex align-center mud-stepper-header gap-4 pa-3")
33+
protected string? HeaderClassname => new CssBuilder("d-flex align-center mud-stepper-header-extended gap-4 pa-3")
2334
.AddClass("mud-ripple", Ripple && !Linear)
24-
.AddClass("cursor-pointer mud-stepper-header-non-linear", !Linear)
35+
.AddClass("cursor-pointer mud-stepper-header-non-linear-extended", !Linear)
2536
.AddClass("flex-column", !Vertical)
2637
.AddClass("flex-row", Vertical)
38+
.AddClass(HeaderClass)
2739
.Build();
2840

2941
/// <summary>
@@ -43,78 +55,31 @@ public partial class MudStepperExtended : MudComponentBase
4355
.Build();
4456

4557
/// <summary>
46-
///
58+
/// Gets the CSS class string that represents the current progress state of the stepper component, including
59+
/// orientation, header size, mobile view, and step count.
4760
/// </summary>
48-
protected string? AvatarStylename => new StyleBuilder()
49-
.AddStyle("z-index: 20")
50-
.AddStyle("background-color", "var(--mud-palette-background)", Variant == Variant.Outlined)
61+
/// <remarks>The returned class string reflects the visual configuration of the stepper and can be
62+
/// used to style the progress indicator appropriately. The value updates dynamically based on the component's
63+
/// properties such as orientation and step count.</remarks>
64+
protected string ProgressClassname => new CssBuilder("mud-stepper-progress-extended")
65+
.AddClass("vertical", Vertical)
66+
.AddClass("horizontal", !Vertical)
67+
.AddClass($"header-size-{HeaderSize.ToDescriptionString()}")
68+
.AddClass("mobile", MobileView)
69+
.AddClass($"steps-{Steps.Count}")
5170
.Build();
5271

53-
/// <summary>
54-
///
55-
/// </summary>
56-
/// <returns></returns>
57-
protected string? GetMobileStyle()
58-
{
59-
if(Vertical)
60-
{
61-
return "grid-column:1;margin-inline-start:22px;";
62-
}
63-
else
64-
{
65-
return "grid-row:1;margin-top:22px;";
66-
}
67-
}
6872

6973
/// <summary>
70-
///
74+
/// Gets the CSS class string used to style the stepper avatar based on the current variant.
7175
/// </summary>
72-
/// <returns></returns>
73-
protected string? GetStepperStyle()
74-
{
75-
var count = Steps.Count * 2;
76-
if (Vertical)
77-
{
78-
return $"display:grid;grid-template-rows:repeat({count}, 1fr);";
79-
}
80-
else
81-
{
82-
return $"display:grid;grid-template-columns:repeat({count}, 1fr);";
83-
}
84-
}
76+
/// <remarks>The returned class name reflects the visual style of the avatar, including background
77+
/// styling when the variant is set to outlined. This property is intended for use in rendering the component's
78+
/// HTML and may change if the variant changes.</remarks>
79+
protected string AvatarClassname => new CssBuilder("mud-stepper-avatar-extended")
80+
.AddClass("mud-stepper-avatar-bg-extended", Variant == Variant.Outlined)
81+
.Build();
8582

86-
/// <summary>
87-
///
88-
/// </summary>
89-
/// <returns></returns>
90-
protected string? GetStepperSubStyle()
91-
{
92-
if (Vertical)
93-
{
94-
return "grid-row-start:1;grid-row-end:-1;flex-direction:column;grid-column:1;list-style:none;display:flex;";
95-
}
96-
else
97-
{
98-
return "grid-column-start:1;grid-column-end:-1;flex-direction:row;grid-row:1;list-style:none;display:flex;";
99-
}
100-
}
101-
102-
/// <summary>
103-
///
104-
/// </summary>
105-
/// <returns></returns>
106-
protected string? GetStepPercent()
107-
{
108-
var dPercent = (100.0 / Steps.Count).ToInvariantString();
109-
if (Vertical)
110-
{
111-
return $"height:{dPercent}%";
112-
}
113-
else
114-
{
115-
return $"width:{dPercent}%";
116-
}
117-
}
11883

11984
/// <summary>
12085
/// Returns a formatted string representing the current step position in the mobile step sequence.
@@ -140,40 +105,6 @@ protected internal string GetMobileStepPositionText()
140105
return string.Empty;
141106
}
142107

143-
144-
/// <summary>
145-
///
146-
/// </summary>
147-
/// <returns></returns>
148-
protected string? GetStepClass()
149-
{
150-
if (Vertical)
151-
{
152-
return $"d-flex";
153-
}
154-
else
155-
{
156-
return $"";
157-
}
158-
}
159-
160-
/// <summary>
161-
///
162-
/// </summary>
163-
/// <returns></returns>
164-
protected string? GetProgressLinearStyle()
165-
{
166-
var end = Steps.Count * 2;
167-
if (Vertical)
168-
{
169-
return $"grid-row-start:2;grid-row-end:{end};grid-column:1/-1;display:inline-grid;left:{(HeaderSize == Size.Medium ? 30 : HeaderSize == Size.Large ? 38 : 22)}px;z-index:10;transform:rotateX(180deg);";
170-
}
171-
else
172-
{
173-
return $"grid-column-start:2;grid-column-end:{end};grid-row:1/-1;display:inline-grid;top:{(HeaderSize == Size.Medium ? 30 : HeaderSize == Size.Large ? 38 : 22)}px;{(HeaderSize == Size.Small ? "height:2px;" : HeaderSize == Size.Medium ? "height:3px;" : null)}{(MobileView ? "margin-inline-start:40px;" : null)}z-index:10";
174-
}
175-
}
176-
177108
private int _activeIndex;
178109
internal int ActiveIndex
179110
{
@@ -206,9 +137,36 @@ protected override async Task OnAfterRenderAsync(bool firstRender)
206137
/// </summary>
207138
protected void UpdateProgressValue()
208139
{
209-
ProgressValue = _activeIndex * (100.0 / (Steps.Count - 1));
140+
int total = Steps.Count;
141+
142+
if (ActiveIndex == -1)
143+
{
144+
ProgressValue = 0;
145+
return;
146+
}
147+
148+
if (ActiveIndex == total)
149+
{
150+
ProgressValue = 100;
151+
return;
152+
}
153+
154+
if (total <= 1)
155+
{
156+
ProgressValue = 0;
157+
return;
158+
}
159+
160+
ProgressValue = (ActiveIndex / (double)(total - 1)) * 100.0;
210161
}
211162

163+
164+
/// <summary>
165+
/// Gets or sets the CSS class to apply to the header element.
166+
/// </summary>
167+
[Parameter]
168+
public string? HeaderClass { get; set; }
169+
212170
/// <summary>
213171
/// Provides CSS classes for the step content.
214172
/// </summary>

0 commit comments

Comments
 (0)