/// <inheritdoc />
protected override void BuildRenderInput(RenderTreeBuilder builder)
{
LabelType labelTypeEffective = (this as IInputWithLabelType).LabelTypeEffective;
builder.OpenComponent <HxInputTagsInternal>(1);
builder.AddAttribute(1000, nameof(HxInputTagsInternal.Value), Value);
builder.AddAttribute(1001, nameof(HxInputTagsInternal.ValueChanged), EventCallback.Factory.Create <List <string> >(this, HandleValueChanged));
builder.AddAttribute(1002, nameof(HxInputTagsInternal.DataProvider), DataProvider);
builder.AddAttribute(1005, nameof(HxInputTagsInternal.SuggestMinimumLengthEffective), SuggestMinimumLengthEffective);
builder.AddAttribute(1006, nameof(HxInputTagsInternal.SuggestDelayEffective), SuggestDelayEffective);
builder.AddAttribute(1007, nameof(HxInputTagsInternal.InputId), InputId);
builder.AddAttribute(1008, nameof(HxInputTagsInternal.CoreFormControlCssClass), GetInputCssClassToRender()); // we want to shift original input-classes to the wrapping .form-control container
builder.AddAttribute(1009, nameof(HxInputTagsInternal.EnabledEffective), EnabledEffective);
builder.AddAttribute(1011, nameof(HxInputTagsInternal.Placeholder), (labelTypeEffective == Havit.Blazor.Components.Web.Bootstrap.LabelType.Floating) ? "placeholder" : Placeholder);
builder.AddAttribute(1012, nameof(HxInputTagsInternal.LabelTypeEffective), labelTypeEffective);
builder.AddAttribute(1013, nameof(HxInputTagsInternal.AllowCustomTags), AllowCustomTags);
builder.AddAttribute(1014, nameof(HxInputTagsInternal.DelimitersEffective), DelimitersEffective);
builder.AddAttribute(1015, nameof(HxInputTagsInternal.InputSizeEffective), ((IInputWithSize)this).InputSizeEffective);
builder.AddAttribute(1016, nameof(HxInputTagsInternal.ShowAddButtonEffective), ShowAddButtonEffective);
builder.AddAttribute(1017, nameof(HxInputTagsInternal.Naked), Naked);
builder.AddAttribute(1018, nameof(HxInputTagsInternal.CssClass), CssClassHelper.Combine(this.CssClass, IsValueInvalid() ? InvalidCssClass : null));
builder.AddAttribute(1019, nameof(HxInputTagsInternal.AddButtonText), this.AddButtonText);
builder.AddAttribute(1020, nameof(HxInputTagsInternal.TagBadgeSettingsEffective), this.TagBadgeSettingsEffective);
builder.AddAttribute(1021, nameof(HxInputTagsInternal.InputGroupStartText), this.InputGroupStartText);
builder.AddAttribute(1022, nameof(HxInputTagsInternal.InputGroupEndText), this.InputGroupEndText);
builder.AddAttribute(1023, nameof(HxInputTagsInternal.InputGroupStartTemplate), this.InputGroupStartTemplate);
builder.AddAttribute(1024, nameof(HxInputTagsInternal.InputGroupEndTemplate), this.InputGroupEndTemplate);
builder.AddAttribute(1025, nameof(HxInputTagsInternal.InputGroupCssClass), this.InputGroupCssClass);
builder.AddMultipleAttributes(1090, this.AdditionalAttributes);
builder.AddComponentReferenceCapture(1100, component => hxInputTagsInternalComponent = (HxInputTagsInternal)component);
builder.CloseComponent();
}
protected virtual string GetCssClass()
{
return(CssClassHelper.Combine(
"collapse",
this.CollapseDirection == CollapseDirection.Horizontal ? "collapse-horizontal" : null,
this.CssClass));
}
protected override string GetButtonCssClass()
{
return(CssClassHelper.Combine(
base.GetButtonCssClass(),
"placeholder",
this.GetColumnsCssClasses()));
}
public void CssClassHelper_Combine_StandaloneNull()
{
// act
var result = CssClassHelper.Combine(null);
// assert
Assert.AreEqual(String.Empty, result);
}
private void BuildRenderTree_CloseButton(RenderTreeBuilder builder, string cssClass = null)
{
builder.OpenElement(100, "button");
builder.AddAttribute(101, "type", "button");
builder.AddAttribute(102, "class", CssClassHelper.Combine("btn-close", cssClass));
builder.AddAttribute(103, "data-bs-dismiss", "toast");
builder.CloseElement(); // button
}
public void CssClassHelper_Combine_MultipleNulls()
{
// act
var result = CssClassHelper.Combine(null, null);
// assert
Assert.AreEqual(String.Empty, result);
}
public void CssClassHelper_Combine_IgnoresNull()
{
// act
var result = CssClassHelper.Combine("btn btn-primary", null, "bt-lrg");
// assert
Assert.AreEqual("btn btn-primary bt-lrg", result);
}
/// <inheritdoc />
public void RenderValue(RenderTreeBuilder builder)
{
builder.OpenElement(0, "div");
builder.AddAttribute(1, "class", CssClassHelper.Combine("form-control", ((IInputWithSize)this).GetInputSizeCssClass(), ValueCssClass));
builder.AddContent(2, Value);
builder.AddContent(3, ValueTemplate);
builder.CloseElement();
}
protected virtual string GetClasses()
{
return(CssClassHelper.Combine(
"list-group",
this.Flush ? "list-group-flush" : null,
this.Numbered ? "list-group-numbered" : null,
GetHorizontalCssClass(),
this.CssClass));
}
protected virtual string GetCssClass()
{
return(CssClassHelper.Combine(
"placeholder",
this.GetColumnsCssClasses(),
ThemeColorExtensions.ToBackgroundColorCss(ColorEffective),
GetSizeCssClass(),
this.CssClassEffective));
}
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
builder.OpenElement(1, HtmlElement);
builder.AddAttribute(2, "class", CssClassHelper.Combine("card-title", this.CssClass));
builder.AddMultipleAttributes(3, AdditionalAttributes);
builder.AddContent(4, ChildContent);
builder.CloseElement();
}
private string GetClasses()
{
return(CssClassHelper.Combine(
"list-group-item",
Active ? "active" : null,
Enabled ? null : "disabled",
OnClick.HasDelegate ? "list-group-item-action" : null,
GetColorCssClass(),
this.CssClass));
}
/// <summary>
/// Returns CSS classes representing column layout of the component.
/// </summary>
public static string GetColumnsCssClasses(this ILayoutColumnComponent columnComponent)
{
return(CssClassHelper.Combine(
GetColumnCssClass(columnComponent.Columns, String.Empty),
GetColumnCssClass(columnComponent.ColumnsSmallUp, "sm"),
GetColumnCssClass(columnComponent.ColumnsMediumUp, "md"),
GetColumnCssClass(columnComponent.ColumnsLargeUp, "lg"),
GetColumnCssClass(columnComponent.ColumnsExtraLargeUp, "xl"),
GetColumnCssClass(columnComponent.ColumnsXxlUp, "xxl")));
}
/// <inheritdoc />
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
// no base call
builder.OpenElement(0, "i");
builder.AddAttribute(1, "class", CssClassHelper.Combine("hx-icon", "bi-" + Icon.Name, CssClass));
builder.AddMultipleAttributes(2, AdditionalAttributes);
builder.CloseElement(); // i
}
protected void BuildRenderInput_RenderRadioItem(RenderTreeBuilder builder, int index)
{
var item = itemsToRender[index];
if (item != null)
{
bool selected = (index == selectedItemIndex);
if (selected)
{
chipValue = SelectorHelpers.GetText(TextSelectorImpl, item);
}
string inputId = GroupName + "_" + index.ToString();
builder.OpenElement(100, "div");
// TODO CoreCssClass
builder.AddAttribute(101, "class", CssClassHelper.Combine("form-check", this.Inline ? "form-check-inline" : null));
builder.OpenElement(200, "input");
builder.AddAttribute(201, "class", "form-check-input");
builder.AddAttribute(202, "type", "radio");
builder.AddAttribute(203, "name", GroupName);
builder.AddAttribute(204, "id", inputId);
builder.AddAttribute(205, "value", index.ToString());
builder.AddAttribute(206, "checked", selected);
builder.AddAttribute(207, "disabled", !CascadeEnabledComponent.EnabledEffective(this));
int j = index;
builder.AddAttribute(208, "onclick", EventCallback.Factory.Create(this, () => HandleInputClick(j)));
builder.AddEventStopPropagationAttribute(209, "onclick", true);
builder.AddMultipleAttributes(250, this.AdditionalAttributes);
builder.CloseElement(); // input
builder.OpenElement(300, "label");
builder.AddAttribute(301, "class", "form-check-label");
builder.AddAttribute(302, "for", inputId);
if (ItemTemplateImpl != null)
{
builder.AddContent(303, ItemTemplateImpl(item));
}
else
{
builder.AddContent(304, SelectorHelpers.GetText(TextSelectorImpl, item));
}
builder.CloseElement(); // label
builder.CloseElement(); // div
}
}
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
if (!String.IsNullOrEmpty(FormValueComponent.Label) || (FormValueComponent.LabelTemplate != null))
{
builder.OpenElement(1, "label");
builder.AddAttribute(2, "for", FormValueComponent.LabelFor);
builder.AddAttribute(3, "class", CssClassHelper.Combine(FormValueComponent.CoreLabelCssClass, FormValueComponent.LabelCssClass));
builder.AddEventStopPropagationAttribute(4, "onclick", true);
if (FormValueComponent.LabelTemplate == null)
{
builder.AddContent(5, FormValueComponent.Label);
}
builder.AddContent(6, FormValueComponent.LabelTemplate);
builder.CloseElement();
}
}
/// <summary>
/// Renders input groups (with content).
/// </summary>
protected virtual void BuildRenderInputGroups(RenderTreeBuilder builder, RenderFragment content)
{
IFormValueComponentWithInputGroups formValueComponentWithInputGroups = FormValueComponent as IFormValueComponentWithInputGroups;
bool shouldRenderInputGroups = FormValueComponent.ShouldRenderInputGroups();
if (shouldRenderInputGroups)
{
builder.OpenElement(100, "span");
builder.AddAttribute(101, "class", CssClassHelper.Combine("input-group", formValueComponentWithInputGroups.InputGroupCssClass, GetInputGroupSizeCssClass(formValueComponentWithInputGroups.InputGroupSize)));
if (!String.IsNullOrEmpty(formValueComponentWithInputGroups.InputGroupStartText))
{
builder.OpenElement(200, "span");
builder.AddAttribute(201, "class", "input-group-text");
builder.AddContent(202, formValueComponentWithInputGroups.InputGroupStartText);
builder.CloseElement(); // span.input-group-text
}
if (formValueComponentWithInputGroups.InputGroupStartTemplate is not null)
{
builder.AddContent(300, formValueComponentWithInputGroups.InputGroupStartTemplate);
}
}
builder.OpenRegion(400);
content(builder);
builder.CloseRegion();
if (shouldRenderInputGroups)
{
if (!String.IsNullOrEmpty(formValueComponentWithInputGroups.InputGroupEndText))
{
builder.OpenElement(500, "span");
builder.AddAttribute(501, "class", "input-group-text");
builder.AddContent(600, formValueComponentWithInputGroups.InputGroupEndText);
builder.CloseElement(); // span.input-group-text
}
if (formValueComponentWithInputGroups.InputGroupEndTemplate is not null)
{
builder.AddContent(700, formValueComponentWithInputGroups.InputGroupEndTemplate);
}
builder.CloseElement(); // span.input-group
}
}
protected override string GetCssClass()
{
return(CssClassHelper.Combine("navbar-collapse", base.GetCssClass()));
}
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
// no base call
builder.AddMarkupContent(0, "<!--googleoff: index-->"); // source: https://perishablepress.com/tell-google-to-not-index-certain-parts-of-your-page/
builder.OpenElement(100, "div");
builder.AddAttribute(101, "class", "card card-demo my-3");
if (Tabs)
{
builder.OpenElement(200, "div");
builder.AddAttribute(201, "class", "card-header");
builder.OpenComponent <HxTabPanel>(300);
builder.AddAttribute(301, nameof(HxTabPanel.CssClass), "card-header-tabs");
builder.AddAttribute(302, "ChildContent", (RenderFragment)((builder2) =>
{
builder2.OpenComponent <HxTab>(303);
builder2.AddAttribute(304, "Id", "demo");
builder2.AddAttribute(305, "Title", "Demo");
builder2.AddAttribute(306, "OnTabActivated", EventCallback.Factory.Create(this, () => { showingDemo = true; }));
builder2.CloseComponent();
builder2.OpenComponent <HxTab>(354);
builder2.AddAttribute(356, "Id", "source");
builder2.AddAttribute(357, "Title", "Source");
builder2.AddAttribute(358, "OnTabActivated", EventCallback.Factory.Create(this, () => { showingDemo = false; }));
builder2.CloseComponent();
}));
builder.CloseComponent();
builder.CloseElement(); // card-header
}
builder.OpenElement(400, "div");
builder.AddAttribute(401, "class", "card-body p-0");
if (showingDemo || !Tabs)
{
builder.OpenElement(500, "div");
builder.AddAttribute(501, "class", CssClassHelper.Combine("p-3", this.DemoCardCssClass));
builder.OpenComponent(504, Type);
builder.CloseComponent();
builder.CloseElement();
}
if (!showingDemo || !Tabs)
{
builder.OpenElement(600, "pre");
if (!Tabs)
{
builder.AddAttribute(601, "class", "gray-background");
}
builder.OpenElement(602, "code");
builder.AddAttribute(603, "class", "language-cshtml");
builder.AddContent(604, code.Trim());
builder.CloseElement();
builder.CloseElement();
}
builder.CloseElement(); // card-body
builder.CloseElement(); // card
builder.AddMarkupContent(700, "<!--googleon: index-->"); // source: https://perishablepress.com/tell-google-to-not-index-certain-parts-of-your-page/
}
/// <inheritdoc />
protected override sealed void BuildRenderTree(RenderTreeBuilder builder)
{
// no base call
string cssClass = CssClassHelper.Combine(FormValueComponent.CoreCssClass, FormValueComponent.CssClass);
// Without any CssClass, Label, not Hint, we will render just the "Value"
// TODO ValidationMessage rendering is dependant on wrapping div with.position-relative!?
bool renderDiv = !String.IsNullOrEmpty(cssClass) ||
!String.IsNullOrEmpty(FormValueComponent.Label) ||
(FormValueComponent.LabelTemplate != null) ||
!String.IsNullOrEmpty(FormValueComponent.Hint) ||
(FormValueComponent.HintTemplate != null);
if (renderDiv)
{
builder.OpenElement(1, "div");
if (!String.IsNullOrEmpty(cssClass))
{
builder.AddAttribute(2, "class", cssClass);
}
}
switch (FormValueComponent.RenderOrder)
{
case LabelValueRenderOrder.LabelValue:
// majority component
builder.OpenRegion(3);
BuildRenderLabel(builder);
builder.CloseRegion();
builder.OpenRegion(4);
BuildRenderInputGroups(builder, BuildRenderValue);
builder.CloseRegion();
break;
case LabelValueRenderOrder.ValueLabel:
// checkbox, etc.
if (FormValueComponent.ShouldRenderInputGroups())
{
throw new InvalidOperationException($"Cannot use Input Groups when {nameof(FormValueComponent.RenderOrder)} is {nameof(LabelValueRenderOrder.ValueLabel)}.");
}
builder.OpenRegion(5);
BuildRenderInputGroups(builder, BuildRenderValue);
builder.CloseRegion();
builder.OpenRegion(6);
BuildRenderLabel(builder);
builder.CloseRegion();
break;
case LabelValueRenderOrder.ValueOnly:
// autosuggest with floating label
builder.OpenRegion(7);
BuildRenderInputGroups(builder, BuildRenderValue);
builder.CloseRegion();
break;
default: throw new InvalidOperationException($"Unknown RenderOrder: {FormValueComponent.RenderOrder}");
}
builder.OpenRegion(8);
BuildRenderValidationMessage(builder);
builder.CloseRegion();
builder.OpenRegion(9);
BuildRenderHint(builder);
builder.CloseRegion();
if (renderDiv)
{
builder.CloseElement();
}
}
protected virtual string GetCssClass()
{
return(CssClassHelper.Combine(
GetAnimationCssClass(),
this.CssClassEffective));
}
private void UpdateRenderData()
{
renderData = new RenderData();
renderData.DaysOfWeek = new List <string>(7);
string[] dayNames = Culture.DateTimeFormat.AbbreviatedDayNames;
DayOfWeek firstDayOfWeek = this.FirstDayOfWeek;
DateTime minDateEffective = MinDateEffective;
DateTime maxDateEffective = MaxDateEffective;
int minYear = minDateEffective.Year;
int maxYear = maxDateEffective.Year;
renderData.Years = Enumerable.Range(minYear, maxYear - minYear + 1).Reverse().ToList();
for (int i = 0; i < 7; i++)
{
renderData.DaysOfWeek.Add(dayNames[((int)firstDayOfWeek + i) % 7]);
}
renderData.Months = Culture.DateTimeFormat.MonthNames.Take(12) // returns 13 items, see https://docs.microsoft.com/en-us/dotnet/api/system.globalization.datetimeformatinfo.monthnames?view=net-5.0
.Select((name, index) => new MonthData
{
Index = index,
Name = name,
Enabled = (new DateTime(DisplayMonth.Year, index + 1, DateTime.DaysInMonth(DisplayMonth.Year, index + 1)) >= minDateEffective) && (new DateTime(DisplayMonth.Year, index + 1, 1) <= maxDateEffective)
})
.ToList();
renderData.Weeks = new List <WeekData>(6);
DateTime currentDay = FirstDayToDisplay;
DateTime valueDay = Value?.Date ?? default;
DateTime today = DateTime.Today;
for (var week = 0; week < 6; week++)
{
WeekData weekData = new WeekData();
weekData.Days = new List <DayData>(7);
for (int day = 0; day < 7; day++)
{
CalendarDateCustomizationResult customization = GetDateCustomization(DateCustomizationProviderEffective, currentDay);
bool clickEnabled = (currentDay >= minDateEffective) && // can click only days starting MinDate
(currentDay <= maxDateEffective) && (customization?.Enabled ?? true); // can click only days ending MaxDate
string cssClass = CssClassHelper.Combine(
clickEnabled ? "active" : "disabled",
(currentDay == valueDay) ? "selected" : null, // currently selected day has "selected" class
((currentDay.Month == DisplayMonth.Month) && (currentDay.Year == DisplayMonth.Year)) ? "in" : "out",
(currentDay == today) ? "hx-calendar-today" : null,
((currentDay.DayOfWeek == DayOfWeek.Saturday) || (currentDay.DayOfWeek == DayOfWeek.Sunday)) ? "weekend" : null,
customization?.CssClass
);
DayData dayData = new DayData
{
Date = currentDay,
DayInMonth = currentDay.Day.ToString("d", Culture.DateTimeFormat),
CssClass = cssClass,
ClickEnabled = clickEnabled
};
weekData.Days.Add(dayData);
currentDay = currentDay.AddDays(1);
}
renderData.Weeks.Add(weekData);
}
renderData.PreviousMonthEnabled = minDateEffective < DisplayMonth; // DisplayMonth is always the first fay of month
renderData.NextMonthEnabled = maxDateEffective > new DateTime(DisplayMonth.Year, DisplayMonth.Month, DateTime.DaysInMonth(DisplayMonth.Year, DisplayMonth.Month));
}
/// <inheritdoc />
protected override void BuildRenderTree(RenderTreeBuilder builder)
{
builder.OpenRegion(0);
base.BuildRenderTree(builder);
builder.CloseRegion();
bool renderHeader = !String.IsNullOrEmpty(HeaderText) || (HeaderTemplate != null) || (HeaderIcon != null);
bool renderContent = !String.IsNullOrEmpty(ContentText) || (ContentTemplate != null) || (ShowCloseButton && !renderHeader);
builder.OpenElement(100, "div");
builder.AddAttribute(101, "role", "alert");
builder.AddAttribute(102, "aria-live", "assertive");
builder.AddAttribute(103, "aria-atomic", "true");
builder.AddAttribute(104, "class", CssClassHelper.Combine("toast", CssClass));
if (AutohideDelay != null)
{
builder.AddAttribute(110, "data-bs-delay", AutohideDelay);
}
else
{
builder.AddAttribute(111, "data-bs-autohide", "false");
}
builder.AddElementReferenceCapture(120, referenceCapture => toastElement = referenceCapture);
if (renderHeader)
{
builder.OpenElement(200, "div");
builder.AddAttribute(201, "class", "toast-header");
if (HeaderIcon != null)
{
builder.OpenComponent(202, typeof(HxIcon));
builder.AddAttribute(203, nameof(HxIcon.Icon), HeaderIcon);
builder.AddAttribute(204, nameof(HxIcon.CssClass), "me-2");
builder.CloseComponent();
}
if (!String.IsNullOrWhiteSpace(HeaderText))
{
builder.OpenElement(205, "strong");
builder.AddAttribute(206, "class", "me-auto");
builder.AddContent(207, HeaderText);
builder.CloseElement(); // strong
}
builder.AddContent(208, HeaderTemplate);
if (ShowCloseButton)
{
builder.OpenRegion(209);
BuildRenderTree_CloseButton(builder, "ms-auto");
builder.CloseRegion();
}
builder.CloseElement(); // toast-header
}
if (renderContent)
{
builder.OpenElement(300, "div");
if (!renderHeader && ShowCloseButton)
{
builder.AddAttribute(301, "class", "d-flex");
}
builder.OpenElement(302, "div");
builder.AddAttribute(303, "class", "toast-body");
builder.AddContent(304, ContentText);
builder.AddContent(305, ContentTemplate);
builder.CloseElement(); // toast-body
if (!renderHeader && ShowCloseButton)
{
builder.OpenRegion(306);
builder.OpenElement(307, "div");
builder.AddAttribute(308, "class", "me-2 m-auto");
BuildRenderTree_CloseButton(builder, null);
builder.CloseElement();
builder.CloseRegion();
}
builder.CloseElement();
}
builder.CloseElement(); // toast
}
protected string GetCssClass() =>
CssClassHelper.Combine(
"dropdown-menu",
((DropdownContainer as IDropdownContainer)?.IsOpen ?? false) ? "show" : null,
this.CssClass
);