| | | 1 | | namespace Allyaria.Components.Blazor; |
| | | 2 | | |
| | | 3 | | /// <summary> |
| | | 4 | | /// Provides a common base implementation for Allyaria Blazor components, including support for ARIA accessibility |
| | | 5 | | /// attributes, theming, and additional HTML attributes. |
| | | 6 | | /// </summary> |
| | | 7 | | public abstract class AryComponentBase : ComponentBase |
| | | 8 | | { |
| | | 9 | | /// <summary> |
| | | 10 | | /// Gets or sets additional arbitrary HTML attributes to be applied to the rendered element. Attributes that conflic |
| | | 11 | | /// component-managed values (such as <c>class</c>, <c>id</c>, or ARIA attributes) may be filtered out via |
| | | 12 | | /// <see cref="GetFilteredAttributes(string[])" />. |
| | | 13 | | /// </summary> |
| | | 14 | | [Parameter(CaptureUnmatchedValues = true)] |
| | 42 | 15 | | public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; } |
| | | 16 | | |
| | | 17 | | /// <summary> |
| | | 18 | | /// Gets or sets the value for the <c>aria-describedby</c> attribute on the rendered element. This identifies one or |
| | | 19 | | /// elements that provide descriptive text for the component. |
| | | 20 | | /// </summary> |
| | | 21 | | [Parameter] |
| | 20 | 22 | | public string? AriaDescribedBy { get; set; } |
| | | 23 | | |
| | | 24 | | /// <summary> |
| | | 25 | | /// Gets or sets a value indicating whether the rendered element should be hidden from assistive technologies. When |
| | | 26 | | /// <see langword="true" />, the resolved <c>aria-hidden</c> attribute will be <c>"true"</c>. |
| | | 27 | | /// </summary> |
| | | 28 | | [Parameter] |
| | 32 | 29 | | public bool? AriaHidden { get; set; } |
| | | 30 | | |
| | | 31 | | /// <summary> |
| | | 32 | | /// Gets or sets the value for the <c>aria-label</c> attribute on the rendered element. This provides an accessible |
| | | 33 | | /// when no visible label is present. |
| | | 34 | | /// </summary> |
| | | 35 | | [Parameter] |
| | 20 | 36 | | public string? AriaLabel { get; set; } |
| | | 37 | | |
| | | 38 | | /// <summary> |
| | | 39 | | /// Gets or sets the value for the <c>aria-labelledby</c> attribute on the rendered element. This references one or |
| | | 40 | | /// elements that label the component. |
| | | 41 | | /// </summary> |
| | | 42 | | [Parameter] |
| | 20 | 43 | | public string? AriaLabelledBy { get; set; } |
| | | 44 | | |
| | | 45 | | /// <summary> |
| | | 46 | | /// Gets or sets the explicit ARIA role for the rendered element. When specified, this value is applied to the <c>ro |
| | | 47 | | /// attribute. |
| | | 48 | | /// </summary> |
| | | 49 | | [Parameter] |
| | 20 | 50 | | public string? AriaRole { get; set; } |
| | | 51 | | |
| | | 52 | | /// <summary> |
| | | 53 | | /// Gets the base CSS class name used by the component before any additional classes are applied. Derived components |
| | | 54 | | /// provide a stable, non-localized base class string. |
| | | 55 | | /// </summary> |
| | | 56 | | protected abstract string BaseClass { get; } |
| | | 57 | | |
| | | 58 | | /// <summary> |
| | | 59 | | /// Gets or sets the child content to be rendered inside the component. This content is typically the primary UI bod |
| | | 60 | | /// the component. |
| | | 61 | | /// </summary> |
| | | 62 | | [Parameter] |
| | | 63 | | [EditorRequired] |
| | 34 | 64 | | public RenderFragment? ChildContent { get; set; } |
| | | 65 | | |
| | | 66 | | /// <summary> |
| | | 67 | | /// Gets or sets additional CSS classes to apply to the rendered element. These classes are combined with |
| | | 68 | | /// <see cref="BaseClass" /> when constructing <see cref="DerivedClass" />. |
| | | 69 | | /// </summary> |
| | | 70 | | [Parameter] |
| | 20 | 71 | | public string? Class { get; set; } |
| | | 72 | | |
| | | 73 | | /// <summary> |
| | | 74 | | /// Gets or sets the current visual and interactive state of the component. The state influences the resolved themin |
| | | 75 | | /// information for the component. |
| | | 76 | | /// </summary> |
| | | 77 | | [Parameter] |
| | 66 | 78 | | public ComponentState ComponentState { get; set; } = ComponentState.Default; |
| | | 79 | | |
| | | 80 | | /// <summary> |
| | | 81 | | /// Gets the logical component type used when resolving theming information. Derived components must indicate which |
| | | 82 | | /// configuration should be applied. |
| | | 83 | | /// </summary> |
| | | 84 | | protected abstract ComponentType ComponentType { get; } |
| | | 85 | | |
| | | 86 | | /// <summary> |
| | | 87 | | /// Gets the combined CSS class string derived from <see cref="BaseClass" /> and <see cref="Class" />. Values are |
| | | 88 | | /// normalized for CSS naming and collapsed to <see langword="null" /> when empty. |
| | | 89 | | /// </summary> |
| | 18 | 90 | | protected string? DerivedClass => $"{BaseClass.ToCssName()} {Class.ToCssName()}".Trim().OrNull(); |
| | | 91 | | |
| | | 92 | | /// <summary> |
| | | 93 | | /// Gets the effective inline style string for the component based on the current theme and any user-provided |
| | | 94 | | /// <see cref="Style" /> overrides. Returns <see langword="null" /> when no styles should be applied. |
| | | 95 | | /// </summary> |
| | | 96 | | protected string? DerivedStyle |
| | | 97 | | { |
| | | 98 | | get |
| | | 99 | | { |
| | 24 | 100 | | var localThemeType = ThemeType is ThemeType.System || ThemeType == EffectiveThemeType |
| | 24 | 101 | | ? ThemeType.System |
| | 24 | 102 | | : ThemeType; |
| | | 103 | | |
| | 24 | 104 | | var effectiveTheme = ThemingService.GetComponentCssVars( |
| | 24 | 105 | | themeType: localThemeType, componentType: ComponentType, componentState: ComponentState |
| | 24 | 106 | | ); |
| | | 107 | | |
| | 24 | 108 | | var effectiveStyle = string.IsNullOrWhiteSpace(value: Style) |
| | 24 | 109 | | ? effectiveTheme |
| | 24 | 110 | | : new CssBuilder().AddRange(cssList: Style).AddRange(cssList: effectiveTheme).ToString(); |
| | | 111 | | |
| | 24 | 112 | | return effectiveStyle.OrNull(); |
| | | 113 | | } |
| | | 114 | | } |
| | | 115 | | |
| | | 116 | | /// <summary> |
| | | 117 | | /// Gets or sets the effective theme type cascaded from a parent component or application-level theme. This value is |
| | | 118 | | /// typically used when <see cref="ThemeType" /> is set to <see cref="ThemeType.System" />. |
| | | 119 | | /// </summary> |
| | | 120 | | [CascadingParameter] |
| | 14 | 121 | | public ThemeType EffectiveThemeType { get; set; } |
| | | 122 | | |
| | | 123 | | /// <summary> |
| | | 124 | | /// Gets or sets the HTML <c>id</c> attribute for the rendered element. When not specified, the component may render |
| | | 125 | | /// without an explicit identifier. |
| | | 126 | | /// </summary> |
| | | 127 | | [Parameter] |
| | 20 | 128 | | public string? Id { get; set; } |
| | | 129 | | |
| | | 130 | | /// <summary> |
| | | 131 | | /// Gets the resolved string value for the <c>aria-hidden</c> attribute, or <see langword="null" /> when no attribut |
| | | 132 | | /// should be rendered. Returns <c>"true"</c> when <see cref="AriaHidden" /> is explicitly set to <see langword="tru |
| | | 133 | | /// </summary> |
| | | 134 | | protected string? ResolvedAriaHidden |
| | 24 | 135 | | => AriaHidden is true |
| | 24 | 136 | | ? "true" |
| | 24 | 137 | | : null; |
| | | 138 | | |
| | | 139 | | /// <summary> |
| | | 140 | | /// Gets the resolved string value for the <c>tabindex</c> attribute, or <see langword="null" /> when no attribute s |
| | | 141 | | /// be rendered. |
| | | 142 | | /// </summary> |
| | | 143 | | protected string? ResolvedTabIndex |
| | 22 | 144 | | => TabIndex is null |
| | 22 | 145 | | ? null |
| | 22 | 146 | | : TabIndex.ToString(); |
| | | 147 | | |
| | | 148 | | /// <summary> |
| | | 149 | | /// Gets the effective theme type that should be used when resolving theming information for the component. When |
| | | 150 | | /// <see cref="ThemeType" /> is <see cref="ThemeType.System" />, this returns <see cref="EffectiveThemeType" />; oth |
| | | 151 | | /// it returns the explicitly set <see cref="ThemeType" />. |
| | | 152 | | /// </summary> |
| | | 153 | | protected ThemeType ResolvedThemeType |
| | 4 | 154 | | => ThemeType is ThemeType.System |
| | 4 | 155 | | ? EffectiveThemeType |
| | 4 | 156 | | : ThemeType; |
| | | 157 | | |
| | | 158 | | /// <summary> |
| | | 159 | | /// Gets or sets additional inline CSS style declarations to be merged with theme-generated styles. When combined wi |
| | | 160 | | /// theme values, user styles take precedence where declarations overlap. |
| | | 161 | | /// </summary> |
| | | 162 | | [Parameter] |
| | 32 | 163 | | public string? Style { get; set; } |
| | | 164 | | |
| | | 165 | | /// <summary> |
| | | 166 | | /// Gets or sets the logical tab index applied to the rendered element. When specified, the value is converted to a |
| | | 167 | | /// for the <c>tabindex</c> attribute. |
| | | 168 | | /// </summary> |
| | | 169 | | [Parameter] |
| | 32 | 170 | | public int? TabIndex { get; set; } |
| | | 171 | | |
| | | 172 | | /// <summary> |
| | | 173 | | /// Gets or sets the requested theme type for the component. When set to <see cref="ThemeType.System" />, the compon |
| | | 174 | | /// will defer to <see cref="EffectiveThemeType" />. |
| | | 175 | | /// </summary> |
| | | 176 | | [Parameter] |
| | 44 | 177 | | public ThemeType ThemeType { get; set; } = ThemeType.System; |
| | | 178 | | |
| | | 179 | | /// <summary> |
| | | 180 | | /// Gets or sets the theming service used to resolve CSS variables and styles for the component based on |
| | | 181 | | /// <see cref="ThemeType" />, <see cref="ComponentType" />, and <see cref="ComponentState" />. |
| | | 182 | | /// </summary> |
| | | 183 | | [Inject] |
| | 72 | 184 | | public required IThemingService ThemingService { get; set; } |
| | | 185 | | |
| | | 186 | | /// <summary> |
| | | 187 | | /// Filters the <see cref="AdditionalAttributes" /> collection by removing attributes that are managed directly by t |
| | | 188 | | /// component, such as ARIA attributes, <c>class</c>, <c>id</c>, <c>style</c>, and <c>tabindex</c>, as well as any |
| | | 189 | | /// explicitly provided disallowed names. |
| | | 190 | | /// </summary> |
| | | 191 | | /// <param name="additionalDisallowed"> |
| | | 192 | | /// An optional set of additional attribute names to exclude from the returned dictionary. Names are compared using |
| | | 193 | | /// <see cref="StringComparer.OrdinalIgnoreCase" />. |
| | | 194 | | /// </param> |
| | | 195 | | /// <returns> |
| | | 196 | | /// A new read-only dictionary containing only allowed attributes, or <see langword="null" /> when there are no attr |
| | | 197 | | /// to apply. |
| | | 198 | | /// </returns> |
| | | 199 | | protected IReadOnlyDictionary<string, object>? GetFilteredAttributes(params string[] additionalDisallowed) |
| | | 200 | | { |
| | 26 | 201 | | if (AdditionalAttributes?.Count is null or 0) |
| | | 202 | | { |
| | 20 | 203 | | return null; |
| | | 204 | | } |
| | | 205 | | |
| | 6 | 206 | | string[] disallowedKeys = |
| | 6 | 207 | | [ |
| | 6 | 208 | | "aria-describedby", |
| | 6 | 209 | | "aria-hidden", |
| | 6 | 210 | | "aria-label", |
| | 6 | 211 | | "aria-labelledby", |
| | 6 | 212 | | "class", |
| | 6 | 213 | | "id", |
| | 6 | 214 | | "role", |
| | 6 | 215 | | "style", |
| | 6 | 216 | | "tabindex" |
| | 6 | 217 | | ]; |
| | | 218 | | |
| | 6 | 219 | | var disallowed = new HashSet<string>(collection: disallowedKeys, comparer: StringComparer.OrdinalIgnoreCase); |
| | | 220 | | |
| | 6 | 221 | | if (additionalDisallowed.Length > 0) |
| | | 222 | | { |
| | 12 | 223 | | foreach (var name in additionalDisallowed) |
| | | 224 | | { |
| | 4 | 225 | | if (string.IsNullOrWhiteSpace(value: name)) |
| | | 226 | | { |
| | | 227 | | continue; |
| | | 228 | | } |
| | | 229 | | |
| | 2 | 230 | | disallowed.Add(item: name.Trim()); |
| | | 231 | | } |
| | | 232 | | } |
| | | 233 | | |
| | 6 | 234 | | var filtered = new Dictionary<string, object>(comparer: StringComparer.OrdinalIgnoreCase); |
| | | 235 | | |
| | 68 | 236 | | foreach (var kvp in AdditionalAttributes) |
| | | 237 | | { |
| | 28 | 238 | | if (disallowed.Contains(item: kvp.Key)) |
| | | 239 | | { |
| | | 240 | | continue; |
| | | 241 | | } |
| | | 242 | | |
| | 6 | 243 | | filtered.TryAdd(key: kvp.Key, value: kvp.Value); |
| | | 244 | | } |
| | | 245 | | |
| | 6 | 246 | | return filtered.Count is 0 |
| | 6 | 247 | | ? null |
| | 6 | 248 | | : filtered; |
| | | 249 | | } |
| | | 250 | | |
| | | 251 | | /// <summary> |
| | | 252 | | /// Requests a synchronous UI refresh for the component by scheduling <see cref="RefreshAsync" /> on the Blazor rend |
| | | 253 | | /// queue. This is a convenience wrapper for triggering <see cref="ComponentBase.StateHasChanged" />. |
| | | 254 | | /// </summary> |
| | 2 | 255 | | protected void Refresh() => _ = RefreshAsync(); |
| | | 256 | | |
| | | 257 | | /// <summary> |
| | | 258 | | /// Asynchronously requests a UI refresh for the component by invoking <see cref="ComponentBase.StateHasChanged" /> |
| | | 259 | | /// correct synchronization context. |
| | | 260 | | /// </summary> |
| | | 261 | | /// <returns>A <see cref="Task" /> that completes when the render request has been queued.</returns> |
| | 4 | 262 | | protected Task RefreshAsync() => InvokeAsync(workItem: StateHasChanged); |
| | | 263 | | } |