diff --git a/BlazorGridExamples/Program.cs b/BlazorGridExamples/Program.cs index 7b86b79..f006a7a 100644 --- a/BlazorGridExamples/Program.cs +++ b/BlazorGridExamples/Program.cs @@ -27,6 +27,8 @@ typeof(IgbCategoryChartModule), typeof(IgbPieChartModule), typeof(IgbSelectModule), + typeof(IgbLinearProgressModule), + typeof(IgbInputModule), typeof(IgbDropdownModule), typeof(IgbPivotGridModule), typeof(IgbPivotDataSelectorModule)); diff --git a/BlazorGridExamples/wwwroot/index.html b/BlazorGridExamples/wwwroot/index.html index 7a1618a..ce52e4e 100644 --- a/BlazorGridExamples/wwwroot/index.html +++ b/BlazorGridExamples/wwwroot/index.html @@ -17,6 +17,7 @@ + diff --git a/samples/FinanceGrid/ExampleJsInterop.cs b/samples/FinanceGrid/ExampleJsInterop.cs deleted file mode 100644 index 6beb434..0000000 --- a/samples/FinanceGrid/ExampleJsInterop.cs +++ /dev/null @@ -1,32 +0,0 @@ -using Microsoft.JSInterop; - -namespace FinanceGrid -{ - // This class provides an example of how JavaScript functionality can be wrapped - // in a .NET class for easy consumption. The associated JavaScript module is - // loaded on demand when first needed. - // - // This class can be registered as scoped DI service and then injected into Blazor - // components for use. - - public class ExampleJsInterop(IJSRuntime jsRuntime) : IAsyncDisposable - { - private readonly Lazy> moduleTask = new(() => jsRuntime.InvokeAsync( - "import", "./_content/FinanceGrid/exampleJsInterop.js").AsTask()); - - public async ValueTask Prompt(string message) - { - var module = await moduleTask.Value; - return await module.InvokeAsync("showPrompt", message); - } - - public async ValueTask DisposeAsync() - { - if (moduleTask.IsValueCreated) - { - var module = await moduleTask.Value; - await module.DisposeAsync(); - } - } - } -} diff --git a/samples/FinanceGrid/FinanceGridComponent.razor b/samples/FinanceGrid/FinanceGridComponent.razor index 8f33a21..5e912ae 100644 --- a/samples/FinanceGrid/FinanceGridComponent.razor +++ b/samples/FinanceGrid/FinanceGridComponent.razor @@ -1,79 +1,115 @@ -@using FinanceGrid.Services +@using FinanceGrid.Services @using FinanceGrid.Models @using IgniteUI.Blazor.Controls +@using Microsoft.JSInterop @inject FinancialService FinancialService +@inject IJSRuntime JS @implements IDisposable -
- @if (isLoading) - { -
- -

Loading financial data...

-
- } - else if (!FinancialService.Data.Any()) - { - - } - else - { - - - - - - - - - - -
- - Data updates every 3 seconds to simulate live market data - -
- } -
+ - + + + + + + + + + + + + + } + + @code { private bool isLoading = true; - private System.Timers.Timer? updateTimer; + private PeriodicTimer? updateTimer; private IgbGrid? grid; + private string searchTerm = ""; + private IgbColumnPipeArgs currencyDigitsFormat = new IgbColumnPipeArgs { DigitsInfo = "1.2-2" }; + + private List FilteredData => + string.IsNullOrWhiteSpace(searchTerm) + ? FinancialService.Data + : FinancialService.Data.Where(d => + (d.Id != null && d.Id.Contains(searchTerm, StringComparison.OrdinalIgnoreCase)) || + (d.HoldingName != null && d.HoldingName.Contains(searchTerm, StringComparison.OrdinalIgnoreCase))) + .ToList(); + protected override async Task OnInitializedAsync() { FinancialService.OnDataChanged += OnDataChanged; await FinancialService.LoadDataAsync(); isLoading = false; + _ = RunLiveUpdatesAsync(); + } + + protected override async Task OnAfterRenderAsync(bool firstRender) + { + if (firstRender) + { + // Re-theme this sample to Bootstrap at the component level (full=true) by re-scoping + // the whole stock theme under #finance-section, so buttons/checkboxes/headers match + // Bootstrap exactly. The scopeThemeToElement helper dedupes, so remounts won't re-inject. + await JS.InvokeVoidAsync("scopeThemeToElement", + "_content/IgniteUI.Blazor/themes/light/bootstrap.css", "#finance-section", true); + await JS.InvokeVoidAsync("scopeThemeToElement", + "_content/IgniteUI.Blazor/themes/grid/light/bootstrap.css", "#finance-section", true); + } + } - // Start auto-update timer (every 3 seconds) - updateTimer = new System.Timers.Timer(3000); - updateTimer.Elapsed += (sender, args) => + private async Task RunLiveUpdatesAsync() + { + updateTimer = new PeriodicTimer(TimeSpan.FromSeconds(3)); + while (await updateTimer.WaitForNextTickAsync()) { FinancialService.UpdateAllPrices(); - }; - updateTimer.Start(); + } } private void OnDataChanged() @@ -81,17 +117,12 @@ InvokeAsync(() => { StateHasChanged(); - // Trigger grid change detection to refresh with updated data - if (grid != null) - { - grid.MarkForCheck(); - } + grid?.MarkForCheck(); }); } public void Dispose() { - updateTimer?.Stop(); updateTimer?.Dispose(); FinancialService.OnDataChanged -= OnDataChanged; } diff --git a/samples/FinanceGrid/FinanceGridComponent.razor.css b/samples/FinanceGrid/FinanceGridComponent.razor.css deleted file mode 100644 index c6afca4..0000000 --- a/samples/FinanceGrid/FinanceGridComponent.razor.css +++ /dev/null @@ -1,6 +0,0 @@ -.my-component { - border: 2px dashed red; - padding: 1em; - margin: 1em 0; - background-image: url('background.png'); -} diff --git a/samples/FinanceGrid/Models/FinancialData.cs b/samples/FinanceGrid/Models/FinancialData.cs index 42289e4..0d07a1a 100644 --- a/samples/FinanceGrid/Models/FinancialData.cs +++ b/samples/FinanceGrid/Models/FinancialData.cs @@ -33,6 +33,9 @@ public class FinancialData [JsonPropertyName("dailyPercentageChange")] public double DailyPercentageChange { get; set; } + + [JsonPropertyName("holdingPeriod")] + public int HoldingPeriod { get; set; } } public class PriceValue diff --git a/samples/FinanceGrid/Services/FinancialService.cs b/samples/FinanceGrid/Services/FinancialService.cs index 457f5e5..f31cad1 100644 --- a/samples/FinanceGrid/Services/FinancialService.cs +++ b/samples/FinanceGrid/Services/FinancialService.cs @@ -75,6 +75,8 @@ public void UpdateAllPrices() dataRow.DailyPercentageChange = randomizedData.DailyPercentageChange; } + // New list reference so the Blazor grid re-syncs the mutated rows to the web component. + Data = new List(Data); OnDataChanged?.Invoke(); } @@ -93,8 +95,7 @@ private double CalculateProfitLossPercentage(double profitLossValue, double boug private double CalculateDailyPercentageChange(double initialPrice, double finalPrice) { - var priceDifference = finalPrice - initialPrice; - return (priceDifference / initialPrice) * 100; + return (finalPrice - initialPrice) / initialPrice; } private (double NewPrice, double ProfitLossValue, double ProfitLossPercentage, double MarketValue, double DailyPercentageChange) diff --git a/samples/FinanceGrid/wwwroot/background.png b/samples/FinanceGrid/wwwroot/background.png deleted file mode 100644 index e15a3bd..0000000 Binary files a/samples/FinanceGrid/wwwroot/background.png and /dev/null differ diff --git a/samples/FinanceGrid/wwwroot/companies/3M.png b/samples/FinanceGrid/wwwroot/companies/3M.png new file mode 100644 index 0000000..459eb05 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/3M.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Adobe.png b/samples/FinanceGrid/wwwroot/companies/Adobe.png new file mode 100644 index 0000000..faeb8c6 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Adobe.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Advanced.png b/samples/FinanceGrid/wwwroot/companies/Advanced.png new file mode 100644 index 0000000..aaeaaa9 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Advanced.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Airbnb.png b/samples/FinanceGrid/wwwroot/companies/Airbnb.png new file mode 100644 index 0000000..3948673 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Airbnb.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Alibaba.png b/samples/FinanceGrid/wwwroot/companies/Alibaba.png new file mode 100644 index 0000000..3ca2aa9 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Alibaba.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Alphabet.png b/samples/FinanceGrid/wwwroot/companies/Alphabet.png new file mode 100644 index 0000000..d76a483 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Alphabet.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Amazon.com.png b/samples/FinanceGrid/wwwroot/companies/Amazon.com.png new file mode 100644 index 0000000..d56cf46 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Amazon.com.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/American.png b/samples/FinanceGrid/wwwroot/companies/American.png new file mode 100644 index 0000000..6fd8aeb Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/American.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Apple.png b/samples/FinanceGrid/wwwroot/companies/Apple.png new file mode 100644 index 0000000..4962775 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Apple.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Bitcoin.png b/samples/FinanceGrid/wwwroot/companies/Bitcoin.png new file mode 100644 index 0000000..dc6d97d Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Bitcoin.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Boeing.png b/samples/FinanceGrid/wwwroot/companies/Boeing.png new file mode 100644 index 0000000..fb3eb84 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Boeing.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Booking.png b/samples/FinanceGrid/wwwroot/companies/Booking.png new file mode 100644 index 0000000..9953e70 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Booking.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Caterpillar.png b/samples/FinanceGrid/wwwroot/companies/Caterpillar.png new file mode 100644 index 0000000..45e35ce Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Caterpillar.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Chevron.png b/samples/FinanceGrid/wwwroot/companies/Chevron.png new file mode 100644 index 0000000..4c97dbd Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Chevron.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Cisco.png b/samples/FinanceGrid/wwwroot/companies/Cisco.png new file mode 100644 index 0000000..2e2c553 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Cisco.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Coca-Cola.png b/samples/FinanceGrid/wwwroot/companies/Coca-Cola.png new file mode 100644 index 0000000..e8e11e6 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Coca-Cola.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Costco.png b/samples/FinanceGrid/wwwroot/companies/Costco.png new file mode 100644 index 0000000..dbba209 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Costco.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Dominos.png b/samples/FinanceGrid/wwwroot/companies/Dominos.png new file mode 100644 index 0000000..b23e21e Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Dominos.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Ethereum.png b/samples/FinanceGrid/wwwroot/companies/Ethereum.png new file mode 100644 index 0000000..96ba8c4 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Ethereum.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Exxon.png b/samples/FinanceGrid/wwwroot/companies/Exxon.png new file mode 100644 index 0000000..5649014 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Exxon.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/FedEx.png b/samples/FinanceGrid/wwwroot/companies/FedEx.png new file mode 100644 index 0000000..61b23ac Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/FedEx.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Ford.png b/samples/FinanceGrid/wwwroot/companies/Ford.png new file mode 100644 index 0000000..78f1a00d Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Ford.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/General.png b/samples/FinanceGrid/wwwroot/companies/General.png new file mode 100644 index 0000000..53442e5 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/General.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Honeywell.png b/samples/FinanceGrid/wwwroot/companies/Honeywell.png new file mode 100644 index 0000000..f51ba37 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Honeywell.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/IBM.png b/samples/FinanceGrid/wwwroot/companies/IBM.png new file mode 100644 index 0000000..9695845 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/IBM.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Intel.png b/samples/FinanceGrid/wwwroot/companies/Intel.png new file mode 100644 index 0000000..f56839b Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Intel.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/JPMorgan.png b/samples/FinanceGrid/wwwroot/companies/JPMorgan.png new file mode 100644 index 0000000..d086d15 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/JPMorgan.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Johnson.png b/samples/FinanceGrid/wwwroot/companies/Johnson.png new file mode 100644 index 0000000..8c7bee8 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Johnson.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Kellogg.png b/samples/FinanceGrid/wwwroot/companies/Kellogg.png new file mode 100644 index 0000000..bc8d451 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Kellogg.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/McDonalds.png b/samples/FinanceGrid/wwwroot/companies/McDonalds.png new file mode 100644 index 0000000..77f9109 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/McDonalds.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Microsoft.png b/samples/FinanceGrid/wwwroot/companies/Microsoft.png new file mode 100644 index 0000000..fb4711b Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Microsoft.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Mondelez.png b/samples/FinanceGrid/wwwroot/companies/Mondelez.png new file mode 100644 index 0000000..3d0e611 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Mondelez.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Morgan.png b/samples/FinanceGrid/wwwroot/companies/Morgan.png new file mode 100644 index 0000000..044c16c Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Morgan.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/NVIDIA.png b/samples/FinanceGrid/wwwroot/companies/NVIDIA.png new file mode 100644 index 0000000..39ee3a0 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/NVIDIA.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Netflix.png b/samples/FinanceGrid/wwwroot/companies/Netflix.png new file mode 100644 index 0000000..f1c93fb Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Netflix.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/PayPal.png b/samples/FinanceGrid/wwwroot/companies/PayPal.png new file mode 100644 index 0000000..069ca17 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/PayPal.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/PepsiCo.png b/samples/FinanceGrid/wwwroot/companies/PepsiCo.png new file mode 100644 index 0000000..8be0a30 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/PepsiCo.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Pfizer.png b/samples/FinanceGrid/wwwroot/companies/Pfizer.png new file mode 100644 index 0000000..ffecb04 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Pfizer.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Procter.png b/samples/FinanceGrid/wwwroot/companies/Procter.png new file mode 100644 index 0000000..aed1027 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Procter.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Salesforce.png b/samples/FinanceGrid/wwwroot/companies/Salesforce.png new file mode 100644 index 0000000..316712c Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Salesforce.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Spotify.png b/samples/FinanceGrid/wwwroot/companies/Spotify.png new file mode 100644 index 0000000..8f15517 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Spotify.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Starbucks.png b/samples/FinanceGrid/wwwroot/companies/Starbucks.png new file mode 100644 index 0000000..d3b3d8f Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Starbucks.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Tesla.png b/samples/FinanceGrid/wwwroot/companies/Tesla.png new file mode 100644 index 0000000..56856ff Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Tesla.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/The.png b/samples/FinanceGrid/wwwroot/companies/The.png new file mode 100644 index 0000000..2ab44f2 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/The.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Uber.png b/samples/FinanceGrid/wwwroot/companies/Uber.png new file mode 100644 index 0000000..82f26bf Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Uber.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Visa.png b/samples/FinanceGrid/wwwroot/companies/Visa.png new file mode 100644 index 0000000..a3ebd79 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Visa.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Walmart.png b/samples/FinanceGrid/wwwroot/companies/Walmart.png new file mode 100644 index 0000000..c7d6038 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Walmart.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Walt.png b/samples/FinanceGrid/wwwroot/companies/Walt.png new file mode 100644 index 0000000..9846ac5 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Walt.png differ diff --git a/samples/FinanceGrid/wwwroot/companies/Zoom.png b/samples/FinanceGrid/wwwroot/companies/Zoom.png new file mode 100644 index 0000000..4aa2bc7 Binary files /dev/null and b/samples/FinanceGrid/wwwroot/companies/Zoom.png differ diff --git a/samples/FinanceGrid/wwwroot/exampleJsInterop.js b/samples/FinanceGrid/wwwroot/exampleJsInterop.js deleted file mode 100644 index ea8d76a..0000000 --- a/samples/FinanceGrid/wwwroot/exampleJsInterop.js +++ /dev/null @@ -1,6 +0,0 @@ -// This is a JavaScript module that is loaded on demand. It can export any number of -// functions, and may import other JavaScript modules if required. - -export function showPrompt(message) { - return prompt(message, 'Type anything here'); -} diff --git a/samples/FinanceGrid/wwwroot/scripts/finance-grid-templates.js b/samples/FinanceGrid/wwwroot/scripts/finance-grid-templates.js new file mode 100644 index 0000000..0417ad6 --- /dev/null +++ b/samples/FinanceGrid/wwwroot/scripts/finance-grid-templates.js @@ -0,0 +1,39 @@ +(function registerFinanceGridTemplates() { + if (!window.igRegisterScript || !window.igTemplating || !window.igTemplating.html) { + setTimeout(registerFinanceGridTemplates, 50); + return; + } + const html = window.igTemplating.html; + const icons = { + up: html``, + down: html`` + }; + const trend = (v) => (v >= 0 ? icons.up : icons.down); + const sign = (v) => (v >= 0 ? "profit" : "loss"); + + window.igRegisterScript("financeAssetCell", (ctx) => { + const name = ctx.cell.value || ""; + const logo = "_content/FinanceGrid/companies/" + name.split(" ")[0] + ".png"; + return html`
${name}
`; + }, false); + + window.igRegisterScript("financePercentCell", (ctx) => { + const v = ctx.cell.value || 0; + return html`
${(v * 100).toFixed(2)}%${trend(v)}
`; + }, false); + + window.igRegisterScript("financeProfitValueCell", (ctx) => { + const v = ctx.cell.value || 0; + const formatted = (v < 0 ? "-$" : "$") + Math.abs(v).toFixed(2); + return html`
${formatted}${trend(v)}
`; + }, false); + + window.igRegisterScript("financeAllocationCell", (ctx) => { + const pct = ((ctx.cell.value || 0) * 100).toFixed(2); + return html`
${pct}%
`; + }, false); + + window.igRegisterScript("financeHoldingPeriodCell", (ctx) => { + return html`${ctx.cell.value} days`; + }, false); +})(); diff --git a/samples/FinanceGrid/wwwroot/styles/finance.css b/samples/FinanceGrid/wwwroot/styles/finance.css new file mode 100644 index 0000000..df868ed --- /dev/null +++ b/samples/FinanceGrid/wwwroot/styles/finance.css @@ -0,0 +1,97 @@ +#finance-section { + height: 100%; + display: flex; + flex-direction: column; + --ig-size: var(--ig-size-small); +} + +#finance-section .finance-container { + flex: 1; + min-height: 0; + width: 100%; +} + +/* Title on the left, search on the right (matches the web-components layout). The toolbar + title, buttons and column-header typography are driven by the scoped Bootstrap theme + (full-scope), so no manual color/weight overrides are needed here. */ +#finance-section .igx-grid-toolbar__title { + flex: 0 0 auto; +} + +#finance-section .igx-grid-toolbar__custom-content { + flex: 1 1 auto; + justify-content: flex-start; +} + +#finance-section .finance-search { + width: 240px; + height: 32px; + margin-left: auto; + margin-right: 8px; + padding: 4px 10px; + /* Match the WC filter input: Bootstrap system font at 16px, gray text/placeholder. */ + font-family: var(--ig-font-family); + font-size: 1rem; + color: var(--ig-gray-700); + background-color: #fff; + border: 1px solid var(--ig-gray-400); + border-radius: 4px; + box-sizing: border-box; +} + +#finance-section .finance-search::placeholder { + color: var(--ig-gray-700); +} + +#finance-section .finance-search:focus { + outline: 0; + border-color: var(--ig-primary-300); + box-shadow: 0 0 0 0.2rem hsl(from var(--ig-primary-500) h s l / 0.25); +} + +#finance-section .cell-flex { + display: flex; + align-items: center; + gap: 0.4rem; +} + +#finance-section .asset-avatar { + --size: 24px; + --ig-size: var(--ig-size-small); +} + +#finance-section .cell-flex svg { + width: 16px; + height: 16px; + flex-shrink: 0; +} + +#finance-section .profit { + color: var(--ig-success-500); + font-weight: 600; +} + +#finance-section .loss { + color: var(--ig-error-500); + font-weight: 600; +} + +#finance-section .alloc-cell { + display: flex; + align-items: center; + gap: 0.5rem; + width: 100%; +} + +#finance-section .alloc-cell igc-linear-progress { + flex: 1; + min-width: 60px; + height: 12px; +} + +#finance-section .alloc-cell igc-linear-progress::part(base), +#finance-section .alloc-cell igc-linear-progress::part(track), +#finance-section .alloc-cell igc-linear-progress::part(fill) { + height: 12px; + border-radius: 4px; +}