From 8c5e7e4d08216b1c43a231baf49891e0e74b2390 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Mon, 20 Jul 2026 14:04:09 +0300 Subject: [PATCH 01/10] feat(accordion): add programmatic expansion sample --- .../programmatic-expansion/App.razor | 36 ++++++++++ .../BlazorClientApp.csproj | 19 ++++++ .../BlazorClientApp.sln | 25 +++++++ .../programmatic-expansion/Program.cs | 23 +++++++ .../Properties/launchSettings.json | 30 ++++++++ .../programmatic-expansion/ReadMe.md | 68 +++++++++++++++++++ .../programmatic-expansion/_Imports.razor | 9 +++ .../programmatic-expansion/wwwroot/index.css | 13 ++++ .../programmatic-expansion/wwwroot/index.html | 31 +++++++++ 9 files changed, 254 insertions(+) create mode 100644 samples/layouts/accordion/programmatic-expansion/App.razor create mode 100644 samples/layouts/accordion/programmatic-expansion/BlazorClientApp.csproj create mode 100644 samples/layouts/accordion/programmatic-expansion/BlazorClientApp.sln create mode 100644 samples/layouts/accordion/programmatic-expansion/Program.cs create mode 100644 samples/layouts/accordion/programmatic-expansion/Properties/launchSettings.json create mode 100644 samples/layouts/accordion/programmatic-expansion/ReadMe.md create mode 100644 samples/layouts/accordion/programmatic-expansion/_Imports.razor create mode 100644 samples/layouts/accordion/programmatic-expansion/wwwroot/index.css create mode 100644 samples/layouts/accordion/programmatic-expansion/wwwroot/index.html diff --git a/samples/layouts/accordion/programmatic-expansion/App.razor b/samples/layouts/accordion/programmatic-expansion/App.razor new file mode 100644 index 0000000000..e379d14a55 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/App.razor @@ -0,0 +1,36 @@ +@using IgniteUI.Blazor.Controls + +
+
+ Show All + Hide All +
+ + + Billing + Review invoices, update payment methods, and manage billing contacts. + + + Security + Configure password rules, multi-factor authentication, and recovery options. + + + Notifications + Choose which product updates and account alerts are sent to your team. + + +
+ +@code { + private IgbAccordion Accordion { get; set; } + + private void ShowAll() + { + Accordion.ShowAll(); + } + + private void HideAll() + { + Accordion.HideAll(); + } +} diff --git a/samples/layouts/accordion/programmatic-expansion/BlazorClientApp.csproj b/samples/layouts/accordion/programmatic-expansion/BlazorClientApp.csproj new file mode 100644 index 0000000000..39e821af4a --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/BlazorClientApp.csproj @@ -0,0 +1,19 @@ + + + + net10.0 + 3.0 + + + + 1701;1702,IDE0028,BL0005,0219,CS1998 + + + + + + + + + + diff --git a/samples/layouts/accordion/programmatic-expansion/BlazorClientApp.sln b/samples/layouts/accordion/programmatic-expansion/BlazorClientApp.sln new file mode 100644 index 0000000000..9f319ff965 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/BlazorClientApp.sln @@ -0,0 +1,25 @@ + +Microsoft Visual Studio Solution File, Format Version 12.00 +# Visual Studio Version 17 +VisualStudioVersion = 17.3.32825.248 +MinimumVisualStudioVersion = 10.0.40219.1 +Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorClientApp", "BlazorClientApp.csproj", "{47E2F422-9146-427E-972B-344EB0E390C2}" +EndProject +Global + GlobalSection(SolutionConfigurationPlatforms) = preSolution + Debug|Any CPU = Debug|Any CPU + Release|Any CPU = Release|Any CPU + EndGlobalSection + GlobalSection(ProjectConfigurationPlatforms) = postSolution + {47E2F422-9146-427E-972B-344EB0E390C2}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {47E2F422-9146-427E-972B-344EB0E390C2}.Debug|Any CPU.Build.0 = Debug|Any CPU + {47E2F422-9146-427E-972B-344EB0E390C2}.Release|Any CPU.ActiveCfg = Release|Any CPU + {47E2F422-9146-427E-972B-344EB0E390C2}.Release|Any CPU.Build.0 = Release|Any CPU + EndGlobalSection + GlobalSection(SolutionProperties) = preSolution + HideSolutionNode = FALSE + EndGlobalSection + GlobalSection(ExtensibilityGlobals) = postSolution + SolutionGuid = {91F177DD-7323-42A5-96EA-C5A1F111499C} + EndGlobalSection +EndGlobal diff --git a/samples/layouts/accordion/programmatic-expansion/Program.cs b/samples/layouts/accordion/programmatic-expansion/Program.cs new file mode 100644 index 0000000000..29a693f117 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/Program.cs @@ -0,0 +1,23 @@ +using System; +using System.Net.Http; +using Microsoft.AspNetCore.Components.Web; +using Microsoft.AspNetCore.Components.WebAssembly.Hosting; +using Microsoft.Extensions.Configuration; +using Microsoft.Extensions.DependencyInjection; +using Microsoft.Extensions.Logging; +using IgniteUI.Blazor.Controls; // for registering Ignite UI modules +using BlazorClientApp; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.RootComponents.Add("app"); +builder.RootComponents.Add("head::after"); + +builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); + +builder.Services.AddIgniteUIBlazor( + typeof(IgbButtonModule), + typeof(IgbAccordionModule), + typeof(IgbExpansionPanelModule) +); + +await builder.Build().RunAsync(); diff --git a/samples/layouts/accordion/programmatic-expansion/Properties/launchSettings.json b/samples/layouts/accordion/programmatic-expansion/Properties/launchSettings.json new file mode 100644 index 0000000000..8b2f6eade3 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/Properties/launchSettings.json @@ -0,0 +1,30 @@ +{ + "iisSettings": { + "windowsAuthentication": false, + "anonymousAuthentication": true, + "iisExpress": { + "applicationUrl": "http://localhost:4200", + "sslPort": 44359 + } + }, + "profiles": { + "IIS Express": { + "commandName": "IISExpress", + "launchBrowser": true, + "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + }, + "BlazorClientApp": { + "commandName": "Project", + "dotnetRunMessages": true, + "launchBrowser": true, + "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", + "applicationUrl": "https://localhost:5001;http://localhost:4200", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + } + } +} diff --git a/samples/layouts/accordion/programmatic-expansion/ReadMe.md b/samples/layouts/accordion/programmatic-expansion/ReadMe.md new file mode 100644 index 0000000000..e27271e664 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/ReadMe.md @@ -0,0 +1,68 @@ + + + +This folder contains implementation of Blazor application with example of Programmatic Expansion feature using [Accordion](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component. + + + + + View Docs + + + View Code + + + Run Sample + + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Setup + +- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install) + +## Running App in Visual Studio 2022 + +NOTE: VS 2022 has better code highlighting and error detection than VS Code does. + +- open **Visual Studio 2022** as an administrator + +- open the **BlazorClientApp.sln** solution + +- right click solution and select **Restore NuGet Packages** menu item + +- click **Debug** menu and select **Start Debugging** or press **F5** key + + +## Running App in VS Code + +- open **VS Code** as an administrator + +- open this folder in **VS Code** + +- open a terminal window + +- to restore assemblies, run this command: +```dotnet restore``` + +- to run samples, run this command: +```dotnet watch run``` + +- wait for for message: +**Now listening on: http://localhost:4200** + +- open **http://localhost:4200** in your browser + + +## Resources + +- [Razor Component Models](https://www.codemag.com/article/1911052) +- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax) +- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components) diff --git a/samples/layouts/accordion/programmatic-expansion/_Imports.razor b/samples/layouts/accordion/programmatic-expansion/_Imports.razor new file mode 100644 index 0000000000..12e44a94fc --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/_Imports.razor @@ -0,0 +1,9 @@ +@using System.Net.Http +@using System.Net.Http.Json +@using Microsoft.AspNetCore.Components.Forms +@using Microsoft.AspNetCore.Components.Routing +@using Microsoft.AspNetCore.Components.Web +@using Microsoft.AspNetCore.Components.Web.Virtualization +@using Microsoft.AspNetCore.Components.WebAssembly.Http +@using Microsoft.JSInterop +@using BlazorClientApp diff --git a/samples/layouts/accordion/programmatic-expansion/wwwroot/index.css b/samples/layouts/accordion/programmatic-expansion/wwwroot/index.css new file mode 100644 index 0000000000..c8647c73b2 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/wwwroot/index.css @@ -0,0 +1,13 @@ +.scrollable { + overflow: auto; +} + +.button-group { + display: flex; + gap: 8px; + padding: 16px; +} + +.button-group igc-button { + min-width: 96px; +} diff --git a/samples/layouts/accordion/programmatic-expansion/wwwroot/index.html b/samples/layouts/accordion/programmatic-expansion/wwwroot/index.html new file mode 100644 index 0000000000..d05ad3c174 --- /dev/null +++ b/samples/layouts/accordion/programmatic-expansion/wwwroot/index.html @@ -0,0 +1,31 @@ + + + + + + + + + + Samples | IgniteUI for Blazor | Infragistics + + + + + + + + + + +
+ An unhandled error has occurred. + Reload + 🗙 +
+ + + + + + From 4d0e2ee78c8ba263ecc283b8a69764a370426a04 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Thu, 27 Aug 2026 13:49:00 +0300 Subject: [PATCH 02/10] feat(accordion): update accordion layout and styling --- .../IgBlazorSamples.Client/wwwroot/index.html | 2 +- .../layouts/accordion/customization/App.razor | 273 ++--- .../accordion/customization/wwwroot/index.css | 65 +- .../accordion/nested-scenario/App.razor | 107 +- .../nested-scenario/wwwroot/index.css | 19 +- samples/layouts/accordion/overview/App.razor | 77 +- .../accordion/overview/wwwroot/index.css | 19 +- .../programmatic-expansion/App.razor | 48 +- .../programmatic-expansion/wwwroot/index.css | 20 +- samples/layouts/accordion/styling/App.razor | 25 + .../accordion/styling/BlazorClientApp.csproj | 19 + .../accordion/styling/BlazorClientApp.sln | 25 + samples/layouts/accordion/styling/Program.cs | 30 + .../styling/Properties/launchSettings.json | 30 + samples/layouts/accordion/styling/ReadMe.md | 68 ++ .../layouts/accordion/styling/_Imports.razor | 9 + .../accordion/styling/wwwroot/index.css | 44 + .../accordion/styling/wwwroot/index.html | 31 + .../accordion/tailwind-styling/App.razor | 29 + .../tailwind-styling/BlazorClientApp.csproj | 27 + .../tailwind-styling/BlazorClientApp.sln | 25 + .../accordion/tailwind-styling/Program.cs | 30 + .../Properties/launchSettings.json | 30 + .../accordion/tailwind-styling/ReadMe.md | 68 ++ .../accordion/tailwind-styling/_Imports.razor | 9 + .../tailwind-styling/package-lock.json | 1015 +++++++++++++++++ .../accordion/tailwind-styling/package.json | 12 + .../accordion/tailwind-styling/src/index.css | 7 + .../tailwind-styling/tailwind.config.cjs | 6 + .../tailwind-styling/wwwroot/index.css | 1 + .../tailwind-styling/wwwroot/index.html | 31 + 31 files changed, 1908 insertions(+), 293 deletions(-) create mode 100644 samples/layouts/accordion/styling/App.razor create mode 100644 samples/layouts/accordion/styling/BlazorClientApp.csproj create mode 100644 samples/layouts/accordion/styling/BlazorClientApp.sln create mode 100644 samples/layouts/accordion/styling/Program.cs create mode 100644 samples/layouts/accordion/styling/Properties/launchSettings.json create mode 100644 samples/layouts/accordion/styling/ReadMe.md create mode 100644 samples/layouts/accordion/styling/_Imports.razor create mode 100644 samples/layouts/accordion/styling/wwwroot/index.css create mode 100644 samples/layouts/accordion/styling/wwwroot/index.html create mode 100644 samples/layouts/accordion/tailwind-styling/App.razor create mode 100644 samples/layouts/accordion/tailwind-styling/BlazorClientApp.csproj create mode 100644 samples/layouts/accordion/tailwind-styling/BlazorClientApp.sln create mode 100644 samples/layouts/accordion/tailwind-styling/Program.cs create mode 100644 samples/layouts/accordion/tailwind-styling/Properties/launchSettings.json create mode 100644 samples/layouts/accordion/tailwind-styling/ReadMe.md create mode 100644 samples/layouts/accordion/tailwind-styling/_Imports.razor create mode 100644 samples/layouts/accordion/tailwind-styling/package-lock.json create mode 100644 samples/layouts/accordion/tailwind-styling/package.json create mode 100644 samples/layouts/accordion/tailwind-styling/src/index.css create mode 100644 samples/layouts/accordion/tailwind-styling/tailwind.config.cjs create mode 100644 samples/layouts/accordion/tailwind-styling/wwwroot/index.css create mode 100644 samples/layouts/accordion/tailwind-styling/wwwroot/index.html diff --git a/browser/IgBlazorSamples.Client/wwwroot/index.html b/browser/IgBlazorSamples.Client/wwwroot/index.html index dfb2463b08..cb9b08c4b7 100644 --- a/browser/IgBlazorSamples.Client/wwwroot/index.html +++ b/browser/IgBlazorSamples.Client/wwwroot/index.html @@ -50,7 +50,7 @@ - +
An unhandled error has occurred. diff --git a/samples/layouts/accordion/customization/App.razor b/samples/layouts/accordion/customization/App.razor index d79e4ac740..c26c957fb1 100644 --- a/samples/layouts/accordion/customization/App.razor +++ b/samples/layouts/accordion/customization/App.razor @@ -1,194 +1,167 @@ -@using IgniteUI.Blazor.Controls - - - - -
- - - @CategoryTitle -
- @foreach (var category in Categories) - { - @category.Label - } -
- - - Cost: $@SliderLower to $@SliderUpper - - - - @RatingTitle - - @foreach (var rating in Ratings) - { - - - - } - - - - @TimeTitle - - - - - - - - +@using IgniteUI.Blazor.Controls + +
+
+ + + @TransportationTitle + Choose how you want to travel + +

Select one or more transportation options for your trip.

+
+ @foreach (var category in Categories) + { + @category.Label + } +
+ + + + + Budget: $@SliderLower - $@SliderUpper + Set the price range + +

Adjust the minimum and maximum cost for available options.

+
+ $@SliderLower + $@SliderUpper +
+ + + + + + @RatingTitle + Filter by review score + +

Choose the lowest rating you want to include in the results.

+ + @foreach (var rating in Ratings) + { + + + + } + + + + + + @ArrivalTimeTitle + Set the latest arrival time + +

Pick the latest acceptable arrival time for your trip.

+ + + + + + + + + +
@code { - IgbIcon? RegisterIconRef; - - IgbDateTimeInput? DateTimeInputRef; - - double SliderLower = 200; - double SliderUpper = 800; - - string CategoryTitle = "Categories"; - List Categories = new List(); - - string RatingTitle = "Rating"; - List Ratings = new List(); - - string TimeTitle = "Time"; - - protected override async Task OnInitializedAsync() - { - Categories.Add(new Category { Id = "0", Label = "Bike" }); - Categories.Add(new Category { Id = "1", Label = "Motorcycle" }); - Categories.Add(new Category { Id = "2", Label = "Car" }); - Categories.Add(new Category { Id = "3", Label = "Taxi" }); - Categories.Add(new Category { Id = "4", Label = "Public Transport" }); - - Ratings.Add(new Rating { Id = "0", Label = "1 star or more", Value = 1.5 }); - Ratings.Add(new Rating { Id = "1", Label = "2 star or more", Value = 2.5 }); - Ratings.Add(new Rating { Id = "2", Label = "3 star or more", Value = 3.5 }); - Ratings.Add(new Rating { Id = "3", Label = "4 star or more", Value = 4.5 }); - } + private IgbIcon? RegisterIconRef; + private IgbDateTimeInput? DateTimeInputRef; + private double SliderLower = 200; + private double SliderUpper = 800; + private string SelectedRating = string.Empty; + private string ArrivalTime = "Any time"; + + private List Categories { get; } = [ + new() { Id = "0", Label = "Bike" }, + new() { Id = "1", Label = "Motorcycle" }, + new() { Id = "2", Label = "Car" }, + new() { Id = "3", Label = "Taxi" }, + new() { Id = "4", Label = "Public Transport" } + ]; + + private List Ratings { get; } = [ + new() { Id = "2", Label = "2 stars or more", Value = 2 }, + new() { Id = "3", Label = "3 stars or more", Value = 3 }, + new() { Id = "4", Label = "4 stars or more", Value = 4 }, + new() { Id = "5", Label = "5 stars or more", Value = 5 } + ]; + + private string TransportationTitle => Categories.Where(category => category.Selected).Select(category => category.Label) is var selected && selected.Any() + ? $"Transportation: {string.Join(", ", selected)}" + : "Transportation"; + + private string RatingTitle => string.IsNullOrEmpty(SelectedRating) ? "Minimum Rating" : $"Minimum Rating: {SelectedRating}"; + + private string ArrivalTimeTitle => ArrivalTime == "Any time" ? "Arrival Time" : $"Arrival Time: {ArrivalTime}"; protected override async Task OnAfterRenderAsync(bool firstRender) { - if (firstRender && this.RegisterIconRef != null) + if (firstRender && RegisterIconRef is not null) { - await this.RegisterIconRef.EnsureReady(); - string clearIcon = ""; - string clockIcon = ""; - await this.RegisterIconRef.RegisterIconFromTextAsync("clear", clearIcon, "material"); - await this.RegisterIconRef.RegisterIconFromTextAsync("clock", clockIcon, "material"); + await RegisterIconRef.EnsureReady(); + const string clearIcon = ""; + const string clockIcon = ""; + await RegisterIconRef.RegisterIconFromTextAsync("clear", clearIcon, "material"); + await RegisterIconRef.RegisterIconFromTextAsync("clock", clockIcon, "material"); } } - public void OnCategoryChange(IgbCheckboxChangeEventArgs args) - { - var id = (args.Parent as IgbCheckbox).Value; - var category = Categories.Where(x => x.Id == id).FirstOrDefault(); - if (category != null) - category.Selected = args.Detail.Checked; - - UpdateCheckedCategories(); - } - - private void UpdateCheckedCategories() + private void OnCategoryChange(IgbCheckboxChangeEventArgs args) { - string checkedItems = ""; - Categories.ForEach(category => + var id = (args.Parent as IgbCheckbox)?.Value; + var category = Categories.FirstOrDefault(item => item.Id == id); + if (category is not null) { - if (category.Selected) - { - checkedItems += checkedItems != "" ? ", " + category.Label : "Categories: " + category.Label; - } - }); - CategoryTitle = checkedItems == "" ? "Categories" : checkedItems; - StateHasChanged(); + category.Selected = args.Detail.Checked; + } } private void OnSliderChange(IgbRangeSliderValueEventArgs args) { - if (args.Detail != null) + if (args.Detail is not null) { SliderLower = args.Detail.Lower; SliderUpper = args.Detail.Upper; - StateHasChanged(); } } private void OnRadioChange(IgbRadioChangeEventArgs args) { - var id = (args.Parent as IgbRadio).Value; - var rating = Ratings.Where(x => x.Id == id).FirstOrDefault(); - if (rating != null) + var id = (args.Parent as IgbRadio)?.Value; + var rating = Ratings.FirstOrDefault(item => item.Id == id); + if (rating is not null) { - RatingTitle = "Rating: " + rating.Label; - StateHasChanged(); + SelectedRating = rating.Label; } } - private async Task OnTimeChange(IgbComponentDateValueChangedEventArgs args) + private Task OnTimeChange(IgbComponentDateValueChangedEventArgs args) { - TimeTitle = "Time: " + (args.Parent as IgbDateTimeInput).Label + " " + args.Detail.ToShortTimeString(); - StateHasChanged(); - - + ArrivalTime = args.Detail.ToShortTimeString(); + return Task.CompletedTask; } private async Task OnTimeClear() { - if (DateTimeInputRef != null) + if (DateTimeInputRef is not null) { await DateTimeInputRef.ClearAsync(); } - TimeTitle = "Time"; - StateHasChanged(); + + ArrivalTime = "Any time"; } - public class Category + private sealed class Category { - public string Id { get; set; } + public string Id { get; init; } = string.Empty; public bool Selected { get; set; } - public string Label { get; set; } + public string Label { get; init; } = string.Empty; } - public class Rating + private sealed class Rating { - public string Id { get; set; } - public string Label { get; set; } - public double Value { get; set; } + public string Id { get; init; } = string.Empty; + public string Label { get; init; } = string.Empty; + public double Value { get; init; } } -} \ No newline at end of file +} diff --git a/samples/layouts/accordion/customization/wwwroot/index.css b/samples/layouts/accordion/customization/wwwroot/index.css index dac5181bea..02ab94dc33 100644 --- a/samples/layouts/accordion/customization/wwwroot/index.css +++ b/samples/layouts/accordion/customization/wwwroot/index.css @@ -1,11 +1,60 @@ -/* -CSS styles are loaded from the shared CSS file located at: -https://dl.infragistics.com/x/css//samples/ -*/ +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} + +.accordion-content { + width: min(760px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.panel-description { + margin: 0 0 16px; + color: var(--ig-gray-700); +} + +.categories-container { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 8px 24px; + max-width: 520px; +} + +.category-option, +.rating-option { + margin: 4px 0; +} + +.range-summary { + display: flex; + justify-content: space-between; + max-width: 560px; + margin-bottom: 4px; + font-weight: 600; +} + +.cost-slider { + max-width: 560px; + margin: 8px 0 0; +} + +.rating-options { + display: grid; + gap: 8px; + max-width: 360px; +} + +.rating-control { + flex-direction: row; +} + +.time-input { + max-width: 260px; +} + .size-small { --ig-size: var(--ig-size-small); } - -.scrollable { - overflow: auto; -} \ No newline at end of file diff --git a/samples/layouts/accordion/nested-scenario/App.razor b/samples/layouts/accordion/nested-scenario/App.razor index e637d0319f..e2063cda68 100644 --- a/samples/layouts/accordion/nested-scenario/App.razor +++ b/samples/layouts/accordion/nested-scenario/App.razor @@ -1,66 +1,59 @@ -@using IgniteUI.Blazor.Controls +@using IgniteUI.Blazor.Controls +
+
+
+ + Single Expand + +
-
- Single Expand - - - Common questions about renewal. - - - What happens if I don't renew my subscription? - Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include this watermark. - - - If I don't renew my subscription will I still have access to previous versions of Infragistics products? - - Any version of Infragistics software which you have downloaded can continue to be used perpetually. Access to download any new or - previous versions through our customer portal and package feeds will require maintaining an active subscription by continuing - to renew it. - - - - Will I be automatically charged for my renewal/ Can I be automatically charged for renewal? - - Any new subscriptions purchased online, via our eCommerce system, will renew automatically. Subscription renewal can be canceled, - at any time, before the next automatic renewal date. Subscriptions purchased directly from Infragistics or Infragistics' partners are - subject to the renewal terms that were agreed upon as part of that purchase. - - - - - - What has changed about subscription and pricing model? - - We have moved to a subscription-based pricing model for all our developer tools. This makes it easier - for you to manage your license subscriptions and allows us to provide a better level of service for you. We - updated our pricing and packages to provide you with flexible options and the best value. This includes Ignite UI - (formerly Ignite UI for JavaScript) which includes all of our JavaScript framework components for web development, - including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and Web Components), as well as Infragistics Professional, - Infragistics Ultimate, our Ultimate UI products. We also offer multi-year subscriptions options with a built-in discount, - so you can see the value up front. With these updates we are confident that we are providing the best platforms and the best - price. - - - - Who will the updated changes impact? - - The license updates will impact all new and current customers using Ignite UI, Infragistics Professional and - Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for Ignite UI for JavaScript, - Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. For more information, please refer to this - blog: Announcement: Changes to Ignite UI Product & Packaging The pricing has been updated for all products and packages. - So, all new or additional licenses will be sold based on our new pricing and packages. All existing license agreements will - be honored and renewed based upon the current agreement. - - - + + + Workspace Settings + Nested account, access, and billing options + + + + Profile + Name, photo, and contact details +

Update the public information shown to other workspace members.

+ + + + Security + Password and sign-in preferences +

Review active sessions, change your password, and configure sign-in requirements.

+ + + + Notifications + Email and product updates +

Choose the messages you receive for comments, assignments, and releases.

+ + + + + + Team Access + Members, roles, and permissions +

Invite teammates, assign roles, and review workspace permissions.

+ + + + Billing + Plan, invoices, and payment method +

Manage subscription details, billing contacts, and invoice delivery.

+ + +
@code { - public bool SingleExpand { get; set; } + private bool SingleExpand { get; set; } - public void OnSwitchChange(IgbCheckboxChangeEventArgs args) + private void OnSwitchChange(IgbCheckboxChangeEventArgs args) { SingleExpand = args.Detail.Checked; } -} \ No newline at end of file +} diff --git a/samples/layouts/accordion/nested-scenario/wwwroot/index.css b/samples/layouts/accordion/nested-scenario/wwwroot/index.css index d6897189ed..a18c6d1ffb 100644 --- a/samples/layouts/accordion/nested-scenario/wwwroot/index.css +++ b/samples/layouts/accordion/nested-scenario/wwwroot/index.css @@ -1,3 +1,18 @@ -.scrollable { - overflow: auto; +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} + +.accordion-content { + width: min(760px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.accordion-toolbar { + display: flex; + justify-content: flex-end; + margin-bottom: 12px; } diff --git a/samples/layouts/accordion/overview/App.razor b/samples/layouts/accordion/overview/App.razor index 2ba2daf738..098e5bf79c 100644 --- a/samples/layouts/accordion/overview/App.razor +++ b/samples/layouts/accordion/overview/App.razor @@ -1,54 +1,31 @@ -@using IgniteUI.Blazor.Controls +@using IgniteUI.Blazor.Controls +
+
+
+ + Single Expand + +
-
- Single Expand - - - What has changed about subscription and pricing model? - - We have moved to a subscription-based pricing model for all our developer tools. This makes it easier - for you to manage your license subscriptions and allows us to provide a better level of service for you. We - updated our pricing and packages to provide you with flexible options and the best value. This includes Ignite UI - (formerly Ignite UI for JavaScript) which includes all of our JavaScript framework components for web development, - including: Angular, ASP.NET (Core and MVC), Blazor, JQuery, React and Web Components), as well as Infragistics Professional, - Infragistics Ultimate, our Ultimate UI products. We also offer multi-year subscriptions options with a built-in discount, - so you can see the value up front. With these updates we are confident that we are providing the best platforms and the best - price. - - - - Who will the updated changes impact? - - The license updates will impact all new and current customers using Ignite UI, Infragistics Professional and - Infragistics Ultimate. Specifically, we have also made updates to our product and packaging for Ignite UI for JavaScript, - Ignite UI for Angular, Ignite UI for React and Ignite UI for Web components. For more information, please refer to this - blog: Announcement: Changes to Ignite UI Product & Packaging The pricing has been updated for all products and packages. - So, all new or additional licenses will be sold based on our new pricing and packages. All existing license agreements will - be honored and renewed based upon the current agreement. - - - - What is the difference between your old model and your current subscription model for Ignite UI? - - For Ignite UI customers, we are moving away from NPM for licensed packages. The current NPM packages will be replaced with - packages that include a “Trial Version” watermark. Licensed packages for Ignite UI will be available from our cloud hosted ProGet - server. For more information, please refer to this article: Moving from Trial to Licensed Ignite UI NPM Packages - - - - What happens if I don't renew my subscription? - Any unlicensed or trial versions of Ignite UI for Angular, React and Web Components will now include this watermark. - - - If I don't renew my subscription will I still have access to previous versions of Infragistics products? - - Any version of Infragistics software which you have downloaded can continue to be used perpetually. Access to download any new or - previous versions through our customer portal and package feeds will require maintaining an active subscription by continuing - to renew it. - - - + + + Account + Profile and security settings +

Update your profile details, password, and sign-in preferences.

+ + + Notifications + Email and product updates +

Choose which notifications you receive and how often they are delivered.

+ + + Billing + Payment and invoice settings +

Manage payment methods, billing contacts, and invoice delivery options.

+ + +
@code { @@ -58,4 +35,4 @@ { SingleExpand = args.Detail.Checked; } -} \ No newline at end of file +} diff --git a/samples/layouts/accordion/overview/wwwroot/index.css b/samples/layouts/accordion/overview/wwwroot/index.css index d6897189ed..ba0bbdd4d1 100644 --- a/samples/layouts/accordion/overview/wwwroot/index.css +++ b/samples/layouts/accordion/overview/wwwroot/index.css @@ -1,3 +1,18 @@ -.scrollable { - overflow: auto; +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} + +.accordion-content { + width: min(720px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.accordion-toolbar { + display: flex; + justify-content: flex-end; + margin-bottom: 12px; } diff --git a/samples/layouts/accordion/programmatic-expansion/App.razor b/samples/layouts/accordion/programmatic-expansion/App.razor index e379d14a55..ca4eb3c491 100644 --- a/samples/layouts/accordion/programmatic-expansion/App.razor +++ b/samples/layouts/accordion/programmatic-expansion/App.razor @@ -1,24 +1,36 @@ @using IgniteUI.Blazor.Controls -
-
- Show All - Hide All +
+
+
+ + Show All + + + Hide All + +
+ + + + Billing + Invoices and payment settings +

Review invoices, update payment methods, and manage billing contacts.

+ + + + Security + Password and access controls +

Configure password rules, multi-factor authentication, and recovery options.

+ + + + Notifications + Product updates and account alerts +

Choose which product updates and account alerts are sent to your team.

+ +
- - - Billing - Review invoices, update payment methods, and manage billing contacts. - - - Security - Configure password rules, multi-factor authentication, and recovery options. - - - Notifications - Choose which product updates and account alerts are sent to your team. - -
@code { diff --git a/samples/layouts/accordion/programmatic-expansion/wwwroot/index.css b/samples/layouts/accordion/programmatic-expansion/wwwroot/index.css index c8647c73b2..6245c0186f 100644 --- a/samples/layouts/accordion/programmatic-expansion/wwwroot/index.css +++ b/samples/layouts/accordion/programmatic-expansion/wwwroot/index.css @@ -1,13 +1,23 @@ -.scrollable { - overflow: auto; +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; } -.button-group { +.accordion-content { + width: min(720px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.accordion-toolbar { display: flex; + justify-content: flex-end; gap: 8px; - padding: 16px; + margin-bottom: 12px; } -.button-group igc-button { +.action-button { min-width: 96px; } diff --git a/samples/layouts/accordion/styling/App.razor b/samples/layouts/accordion/styling/App.razor new file mode 100644 index 0000000000..3ada641cbc --- /dev/null +++ b/samples/layouts/accordion/styling/App.razor @@ -0,0 +1,25 @@ +@using IgniteUI.Blazor.Controls + +
+
+ + + Getting Started + Setup and onboarding +

Find installation steps, project setup guidance, and resources for building your first application.

+ + + + Billing + Invoices and payment methods +

Review invoices, update payment methods, and manage billing contacts for your account.

+ + + + Security + Access and authentication +

Configure password rules, multi-factor authentication, and recovery options for your team.

+ + +
+
diff --git a/samples/layouts/accordion/styling/BlazorClientApp.csproj b/samples/layouts/accordion/styling/BlazorClientApp.csproj new file mode 100644 index 0000000000..39e821af4a --- /dev/null +++ b/samples/layouts/accordion/styling/BlazorClientApp.csproj @@ -0,0 +1,19 @@ + + + + net10.0 + 3.0 + + + + 1701;1702,IDE0028,BL0005,0219,CS1998 + + + + + + + + + + diff --git a/samples/layouts/accordion/styling/BlazorClientApp.sln b/samples/layouts/accordion/styling/BlazorClientApp.sln new file mode 100644 index 0000000000..9f319ff965 --- /dev/null +++ b/samples/layouts/accordion/styling/BlazorClientApp.sln @@ -0,0 +1,25 @@ + +Microsoft Visual Studio Solution File, Format Version 12.00 +# Visual Studio Version 17 +VisualStudioVersion = 17.3.32825.248 +MinimumVisualStudioVersion = 10.0.40219.1 +Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorClientApp", "BlazorClientApp.csproj", "{47E2F422-9146-427E-972B-344EB0E390C2}" +EndProject +Global + GlobalSection(SolutionConfigurationPlatforms) = preSolution + Debug|Any CPU = Debug|Any CPU + Release|Any CPU = Release|Any CPU + EndGlobalSection + GlobalSection(ProjectConfigurationPlatforms) = postSolution + {47E2F422-9146-427E-972B-344EB0E390C2}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {47E2F422-9146-427E-972B-344EB0E390C2}.Debug|Any CPU.Build.0 = Debug|Any CPU + {47E2F422-9146-427E-972B-344EB0E390C2}.Release|Any CPU.ActiveCfg = Release|Any CPU + {47E2F422-9146-427E-972B-344EB0E390C2}.Release|Any CPU.Build.0 = Release|Any CPU + EndGlobalSection + GlobalSection(SolutionProperties) = preSolution + HideSolutionNode = FALSE + EndGlobalSection + GlobalSection(ExtensibilityGlobals) = postSolution + SolutionGuid = {91F177DD-7323-42A5-96EA-C5A1F111499C} + EndGlobalSection +EndGlobal diff --git a/samples/layouts/accordion/styling/Program.cs b/samples/layouts/accordion/styling/Program.cs new file mode 100644 index 0000000000..56430a961c --- /dev/null +++ b/samples/layouts/accordion/styling/Program.cs @@ -0,0 +1,30 @@ +using System; +using System.Net.Http; +using Microsoft.AspNetCore.Components.Web; +using Microsoft.AspNetCore.Components.WebAssembly.Hosting; +using Microsoft.Extensions.Configuration; +using Microsoft.Extensions.DependencyInjection; +using Microsoft.Extensions.Logging; +using IgniteUI.Blazor.Controls; // for registering Ignite UI modules +using BlazorClientApp; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.RootComponents.Add("app"); +builder.RootComponents.Add("head::after"); + +builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); + +builder.Services.AddIgniteUIBlazor( + typeof(IgbIconModule), + typeof(IgbDateTimeInputModule), + typeof(IgbRadioGroupModule), + typeof(IgbRadioModule), + typeof(IgbRatingModule), + typeof(IgbAccordionModule), + typeof(IgbExpansionPanelModule), + typeof(IgbCheckboxModule), + typeof(IgbSliderModule), + typeof(IgbRangeSliderModule) +); + +await builder.Build().RunAsync(); diff --git a/samples/layouts/accordion/styling/Properties/launchSettings.json b/samples/layouts/accordion/styling/Properties/launchSettings.json new file mode 100644 index 0000000000..8b2f6eade3 --- /dev/null +++ b/samples/layouts/accordion/styling/Properties/launchSettings.json @@ -0,0 +1,30 @@ +{ + "iisSettings": { + "windowsAuthentication": false, + "anonymousAuthentication": true, + "iisExpress": { + "applicationUrl": "http://localhost:4200", + "sslPort": 44359 + } + }, + "profiles": { + "IIS Express": { + "commandName": "IISExpress", + "launchBrowser": true, + "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + }, + "BlazorClientApp": { + "commandName": "Project", + "dotnetRunMessages": true, + "launchBrowser": true, + "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", + "applicationUrl": "https://localhost:5001;http://localhost:4200", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + } + } +} diff --git a/samples/layouts/accordion/styling/ReadMe.md b/samples/layouts/accordion/styling/ReadMe.md new file mode 100644 index 0000000000..8c2345026e --- /dev/null +++ b/samples/layouts/accordion/styling/ReadMe.md @@ -0,0 +1,68 @@ + + + +This folder contains implementation of Blazor application with example of Styling feature using [Accordion](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component. + + + + + View Docs + + + View Code + + + Run Sample + + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Setup + +- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install) + +## Running App in Visual Studio 2022 + +NOTE: VS 2022 has better code highlighting and error detection than VS Code does. + +- open **Visual Studio 2022** as an administrator + +- open the **BlazorClientApp.sln** solution + +- right click solution and select **Restore NuGet Packages** menu item + +- click **Debug** menu and select **Start Debugging** or press **F5** key + + +## Running App in VS Code + +- open **VS Code** as an administrator + +- open this folder in **VS Code** + +- open a terminal window + +- to restore assemblies, run this command: +```dotnet restore``` + +- to run samples, run this command: +```dotnet watch run``` + +- wait for for message: +**Now listening on: http://localhost:4200** + +- open **http://localhost:4200** in your browser + + +## Resources + +- [Razor Component Models](https://www.codemag.com/article/1911052) +- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax) +- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components) diff --git a/samples/layouts/accordion/styling/_Imports.razor b/samples/layouts/accordion/styling/_Imports.razor new file mode 100644 index 0000000000..12e44a94fc --- /dev/null +++ b/samples/layouts/accordion/styling/_Imports.razor @@ -0,0 +1,9 @@ +@using System.Net.Http +@using System.Net.Http.Json +@using Microsoft.AspNetCore.Components.Forms +@using Microsoft.AspNetCore.Components.Routing +@using Microsoft.AspNetCore.Components.Web +@using Microsoft.AspNetCore.Components.Web.Virtualization +@using Microsoft.AspNetCore.Components.WebAssembly.Http +@using Microsoft.JSInterop +@using BlazorClientApp diff --git a/samples/layouts/accordion/styling/wwwroot/index.css b/samples/layouts/accordion/styling/wwwroot/index.css new file mode 100644 index 0000000000..e13f3a298b --- /dev/null +++ b/samples/layouts/accordion/styling/wwwroot/index.css @@ -0,0 +1,44 @@ +.accordion-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} + +.accordion-content { + width: min(720px, 100%); + margin: 0 auto; + padding: 24px; + box-sizing: border-box; +} + +.accordion-sample igc-expansion-panel { + background-color: var(--ig-gray-50); + color: var(--ig-gray-900); + border-radius: 4px; +} + +.accordion-sample igc-expansion-panel::part(header) { + background-color: var(--ig-gray-100); +} + +.accordion-sample igc-expansion-panel[open]::part(header) { + background-color: var(--ig-primary-50); +} + +.accordion-sample igc-expansion-panel::part(indicator) { + color: var(--ig-primary-500); +} + +.accordion-sample igc-expansion-panel::part(title) { + color: var(--ig-gray-900); + font-weight: 600; +} + +.accordion-sample igc-expansion-panel[open]::part(title), +.accordion-sample igc-expansion-panel[open]::part(subtitle) { + color: var(--ig-primary-700); +} + +.accordion-sample igc-expansion-panel::part(content) { + color: var(--ig-gray-700); +} diff --git a/samples/layouts/accordion/styling/wwwroot/index.html b/samples/layouts/accordion/styling/wwwroot/index.html new file mode 100644 index 0000000000..d05ad3c174 --- /dev/null +++ b/samples/layouts/accordion/styling/wwwroot/index.html @@ -0,0 +1,31 @@ + + + + + + + + + + Samples | IgniteUI for Blazor | Infragistics + + + + + + + + + + +
+ An unhandled error has occurred. + Reload + 🗙 +
+ + + + + + diff --git a/samples/layouts/accordion/tailwind-styling/App.razor b/samples/layouts/accordion/tailwind-styling/App.razor new file mode 100644 index 0000000000..6b0e4d2eb5 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/App.razor @@ -0,0 +1,29 @@ +@using IgniteUI.Blazor.Controls + +
+
+ + + Getting Started + Setup and onboarding +

Find installation steps, project setup guidance, and resources for building your first application.

+ + + + Billing + Invoices and payment methods +

Review invoices, update payment methods, and manage billing contacts for your account.

+ + + + Security + Access and authentication +

Configure password rules, multi-factor authentication, and recovery options for your team.

+ + +
+
+ +@code { + private const string PanelClass = "rounded bg-[var(--ig-gray-50)] text-[var(--ig-gray-900)] [&::part(header)]:bg-[var(--ig-gray-100)] [&[open]::part(header)]:bg-[var(--ig-primary-50)] [&::part(indicator)]:text-[var(--ig-primary-500)] [&::part(title)]:font-semibold [&::part(title)]:text-[var(--ig-gray-900)] [&[open]::part(title)]:text-[var(--ig-primary-700)] [&[open]::part(subtitle)]:text-[var(--ig-primary-700)] [&::part(content)]:text-[var(--ig-gray-700)]"; +} diff --git a/samples/layouts/accordion/tailwind-styling/BlazorClientApp.csproj b/samples/layouts/accordion/tailwind-styling/BlazorClientApp.csproj new file mode 100644 index 0000000000..61c70a2c84 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/BlazorClientApp.csproj @@ -0,0 +1,27 @@ + + + + net10.0 + 3.0 + + + + 1701;1702,IDE0028,BL0005,0219,CS1998 + + + + + + + + + + + + + + + + + + diff --git a/samples/layouts/accordion/tailwind-styling/BlazorClientApp.sln b/samples/layouts/accordion/tailwind-styling/BlazorClientApp.sln new file mode 100644 index 0000000000..9f319ff965 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/BlazorClientApp.sln @@ -0,0 +1,25 @@ + +Microsoft Visual Studio Solution File, Format Version 12.00 +# Visual Studio Version 17 +VisualStudioVersion = 17.3.32825.248 +MinimumVisualStudioVersion = 10.0.40219.1 +Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorClientApp", "BlazorClientApp.csproj", "{47E2F422-9146-427E-972B-344EB0E390C2}" +EndProject +Global + GlobalSection(SolutionConfigurationPlatforms) = preSolution + Debug|Any CPU = Debug|Any CPU + Release|Any CPU = Release|Any CPU + EndGlobalSection + GlobalSection(ProjectConfigurationPlatforms) = postSolution + {47E2F422-9146-427E-972B-344EB0E390C2}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {47E2F422-9146-427E-972B-344EB0E390C2}.Debug|Any CPU.Build.0 = Debug|Any CPU + {47E2F422-9146-427E-972B-344EB0E390C2}.Release|Any CPU.ActiveCfg = Release|Any CPU + {47E2F422-9146-427E-972B-344EB0E390C2}.Release|Any CPU.Build.0 = Release|Any CPU + EndGlobalSection + GlobalSection(SolutionProperties) = preSolution + HideSolutionNode = FALSE + EndGlobalSection + GlobalSection(ExtensibilityGlobals) = postSolution + SolutionGuid = {91F177DD-7323-42A5-96EA-C5A1F111499C} + EndGlobalSection +EndGlobal diff --git a/samples/layouts/accordion/tailwind-styling/Program.cs b/samples/layouts/accordion/tailwind-styling/Program.cs new file mode 100644 index 0000000000..56430a961c --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/Program.cs @@ -0,0 +1,30 @@ +using System; +using System.Net.Http; +using Microsoft.AspNetCore.Components.Web; +using Microsoft.AspNetCore.Components.WebAssembly.Hosting; +using Microsoft.Extensions.Configuration; +using Microsoft.Extensions.DependencyInjection; +using Microsoft.Extensions.Logging; +using IgniteUI.Blazor.Controls; // for registering Ignite UI modules +using BlazorClientApp; + +var builder = WebAssemblyHostBuilder.CreateDefault(args); +builder.RootComponents.Add("app"); +builder.RootComponents.Add("head::after"); + +builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); + +builder.Services.AddIgniteUIBlazor( + typeof(IgbIconModule), + typeof(IgbDateTimeInputModule), + typeof(IgbRadioGroupModule), + typeof(IgbRadioModule), + typeof(IgbRatingModule), + typeof(IgbAccordionModule), + typeof(IgbExpansionPanelModule), + typeof(IgbCheckboxModule), + typeof(IgbSliderModule), + typeof(IgbRangeSliderModule) +); + +await builder.Build().RunAsync(); diff --git a/samples/layouts/accordion/tailwind-styling/Properties/launchSettings.json b/samples/layouts/accordion/tailwind-styling/Properties/launchSettings.json new file mode 100644 index 0000000000..8b2f6eade3 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/Properties/launchSettings.json @@ -0,0 +1,30 @@ +{ + "iisSettings": { + "windowsAuthentication": false, + "anonymousAuthentication": true, + "iisExpress": { + "applicationUrl": "http://localhost:4200", + "sslPort": 44359 + } + }, + "profiles": { + "IIS Express": { + "commandName": "IISExpress", + "launchBrowser": true, + "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + }, + "BlazorClientApp": { + "commandName": "Project", + "dotnetRunMessages": true, + "launchBrowser": true, + "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", + "applicationUrl": "https://localhost:5001;http://localhost:4200", + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + } + } +} diff --git a/samples/layouts/accordion/tailwind-styling/ReadMe.md b/samples/layouts/accordion/tailwind-styling/ReadMe.md new file mode 100644 index 0000000000..335f01a5a1 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/ReadMe.md @@ -0,0 +1,68 @@ + + + +This folder contains implementation of Blazor application with example of Tailwind Styling feature using [Accordion](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component. + + + + + View Docs + + + View Code + + + Run Sample + + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Setup + +- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install) + +## Running App in Visual Studio 2022 + +NOTE: VS 2022 has better code highlighting and error detection than VS Code does. + +- open **Visual Studio 2022** as an administrator + +- open the **BlazorClientApp.sln** solution + +- right click solution and select **Restore NuGet Packages** menu item + +- click **Debug** menu and select **Start Debugging** or press **F5** key + + +## Running App in VS Code + +- open **VS Code** as an administrator + +- open this folder in **VS Code** + +- open a terminal window + +- to restore assemblies, run this command: +```dotnet restore``` + +- to run samples, run this command: +```dotnet watch run``` + +- wait for for message: +**Now listening on: http://localhost:4200** + +- open **http://localhost:4200** in your browser + + +## Resources + +- [Razor Component Models](https://www.codemag.com/article/1911052) +- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax) +- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components) diff --git a/samples/layouts/accordion/tailwind-styling/_Imports.razor b/samples/layouts/accordion/tailwind-styling/_Imports.razor new file mode 100644 index 0000000000..12e44a94fc --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/_Imports.razor @@ -0,0 +1,9 @@ +@using System.Net.Http +@using System.Net.Http.Json +@using Microsoft.AspNetCore.Components.Forms +@using Microsoft.AspNetCore.Components.Routing +@using Microsoft.AspNetCore.Components.Web +@using Microsoft.AspNetCore.Components.Web.Virtualization +@using Microsoft.AspNetCore.Components.WebAssembly.Http +@using Microsoft.JSInterop +@using BlazorClientApp diff --git a/samples/layouts/accordion/tailwind-styling/package-lock.json b/samples/layouts/accordion/tailwind-styling/package-lock.json new file mode 100644 index 0000000000..cfe4c0d683 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/package-lock.json @@ -0,0 +1,1015 @@ +{ + "name": "blazor-accordion-tailwind-styling", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "blazor-accordion-tailwind-styling", + "version": "1.0.0", + "devDependencies": { + "tailwindcss": "^3.4.19" + } + }, + "node_modules/@alloc/quick-lru": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz", + "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.13", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", + "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.5.5", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", + "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==", + "dev": true, + "license": "MIT" + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.31", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz", + "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, + "node_modules/@nodelib/fs.scandir": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", + "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@nodelib/fs.stat": "2.0.5", + "run-parallel": "^1.1.9" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.stat": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", + "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.walk": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", + "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@nodelib/fs.scandir": "2.1.5", + "fastq": "^1.6.0" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/any-promise": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", + "dev": true, + "license": "MIT" + }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dev": true, + "license": "ISC", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/arg": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", + "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", + "dev": true, + "license": "MIT" + }, + "node_modules/binary-extensions": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", + "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/braces": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "dev": true, + "license": "MIT", + "dependencies": { + "fill-range": "^7.1.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/camelcase-css": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", + "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, + "node_modules/chokidar": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "dev": true, + "license": "MIT", + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/chokidar/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/commander": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, + "node_modules/cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true, + "license": "MIT", + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/didyoumean": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", + "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", + "dev": true, + "license": "Apache-2.0" + }, + "node_modules/dlv": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", + "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", + "dev": true, + "license": "MIT" + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/fast-glob": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz", + "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@nodelib/fs.stat": "^2.0.2", + "@nodelib/fs.walk": "^1.2.3", + "glob-parent": "^5.1.2", + "merge2": "^1.3.0", + "micromatch": "^4.0.8" + }, + "engines": { + "node": ">=8.6.0" + } + }, + "node_modules/fast-glob/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/fastq": { + "version": "1.20.1", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz", + "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==", + "dev": true, + "license": "ISC", + "dependencies": { + "reusify": "^1.0.4" + } + }, + "node_modules/fill-range": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "dev": true, + "license": "MIT", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/function-bind": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/hasown": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz", + "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==", + "dev": true, + "license": "MIT", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "license": "MIT", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-core-module": { + "version": "2.16.2", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz", + "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==", + "dev": true, + "license": "MIT", + "dependencies": { + "hasown": "^2.0.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/jiti": { + "version": "1.21.7", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz", + "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==", + "dev": true, + "license": "MIT", + "bin": { + "jiti": "bin/jiti.js" + } + }, + "node_modules/lilconfig": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", + "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/antonk52" + } + }, + "node_modules/lines-and-columns": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", + "dev": true, + "license": "MIT" + }, + "node_modules/merge2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 8" + } + }, + "node_modules/micromatch": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", + "dev": true, + "license": "MIT", + "dependencies": { + "braces": "^3.0.3", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=8.6" + } + }, + "node_modules/mz": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", + "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "any-promise": "^1.0.0", + "object-assign": "^4.0.1", + "thenify-all": "^1.0.0" + } + }, + "node_modules/nanoid": { + "version": "3.3.18", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz", + "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/object-hash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", + "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true, + "license": "MIT" + }, + "node_modules/picocolors": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", + "dev": true, + "license": "ISC" + }, + "node_modules/picomatch": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz", + "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/pirates": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz", + "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, + "node_modules/postcss": { + "version": "8.5.26", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz", + "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.17", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/postcss-import": { + "version": "15.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", + "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.0.0", + "read-cache": "^1.0.0", + "resolve": "^1.1.7" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, + "node_modules/postcss-js": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz", + "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "camelcase-css": "^2.0.1" + }, + "engines": { + "node": "^12 || ^14 || >= 16" + }, + "peerDependencies": { + "postcss": "^8.4.21" + } + }, + "node_modules/postcss-load-config": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz", + "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "lilconfig": "^3.1.1" + }, + "engines": { + "node": ">= 18" + }, + "peerDependencies": { + "jiti": ">=1.21.0", + "postcss": ">=8.0.9", + "tsx": "^4.8.1", + "yaml": "^2.4.2" + }, + "peerDependenciesMeta": { + "jiti": { + "optional": true + }, + "postcss": { + "optional": true + }, + "tsx": { + "optional": true + }, + "yaml": { + "optional": true + } + } + }, + "node_modules/postcss-nested": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz", + "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "postcss-selector-parser": "^6.1.1" + }, + "engines": { + "node": ">=12.0" + }, + "peerDependencies": { + "postcss": "^8.2.14" + } + }, + "node_modules/postcss-selector-parser": { + "version": "6.1.4", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.4.tgz", + "integrity": "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/queue-microtask": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", + "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT" + }, + "node_modules/read-cache": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.2.tgz", + "integrity": "sha512-/peqiBB/n07gQGLsWaHho3WfvUyRscw0gYTsEFMhrIe/nWLkYaf5SbKYjGYqtRV3aPwykJgF2VEMo1ac4bnsGA==", + "dev": true, + "license": "MIT" + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "license": "MIT", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/resolve": { + "version": "1.22.12", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz", + "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==", + "dev": true, + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "is-core-module": "^2.16.1", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/reusify": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz", + "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==", + "dev": true, + "license": "MIT", + "engines": { + "iojs": ">=1.0.0", + "node": ">=0.10.0" + } + }, + "node_modules/run-parallel": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", + "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT", + "dependencies": { + "queue-microtask": "^1.2.2" + } + }, + "node_modules/source-map-js": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/sucrase": { + "version": "3.35.1", + "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz", + "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.2", + "commander": "^4.0.0", + "lines-and-columns": "^1.1.6", + "mz": "^2.7.0", + "pirates": "^4.0.1", + "tinyglobby": "^0.2.11", + "ts-interface-checker": "^0.1.9" + }, + "bin": { + "sucrase": "bin/sucrase", + "sucrase-node": "bin/sucrase-node" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/tailwindcss": { + "version": "3.4.19", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz", + "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@alloc/quick-lru": "^5.2.0", + "arg": "^5.0.2", + "chokidar": "^3.6.0", + "didyoumean": "^1.2.2", + "dlv": "^1.1.3", + "fast-glob": "^3.3.2", + "glob-parent": "^6.0.2", + "is-glob": "^4.0.3", + "jiti": "^1.21.7", + "lilconfig": "^3.1.3", + "micromatch": "^4.0.8", + "normalize-path": "^3.0.0", + "object-hash": "^3.0.0", + "picocolors": "^1.1.1", + "postcss": "^8.4.47", + "postcss-import": "^15.1.0", + "postcss-js": "^4.0.1", + "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0", + "postcss-nested": "^6.2.0", + "postcss-selector-parser": "^6.1.2", + "resolve": "^1.22.8", + "sucrase": "^3.35.0" + }, + "bin": { + "tailwind": "lib/cli.js", + "tailwindcss": "lib/cli.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/thenify": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", + "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", + "dev": true, + "license": "MIT", + "dependencies": { + "any-promise": "^1.0.0" + } + }, + "node_modules/thenify-all": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", + "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", + "dev": true, + "license": "MIT", + "dependencies": { + "thenify": ">= 3.1.0 < 4" + }, + "engines": { + "node": ">=0.8" + } + }, + "node_modules/tinyglobby": { + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz", + "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==", + "dev": true, + "license": "MIT", + "dependencies": { + "fdir": "^6.5.0", + "picomatch": "^4.0.4" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/SuperchupuDev" + } + }, + "node_modules/tinyglobby/node_modules/fdir": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", + "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/tinyglobby/node_modules/picomatch": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.7.tgz", + "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/ts-interface-checker": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", + "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", + "dev": true, + "license": "Apache-2.0" + }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", + "dev": true, + "license": "MIT" + } + } +} diff --git a/samples/layouts/accordion/tailwind-styling/package.json b/samples/layouts/accordion/tailwind-styling/package.json new file mode 100644 index 0000000000..b50e882176 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/package.json @@ -0,0 +1,12 @@ +{ + "name": "blazor-accordion-tailwind-styling", + "version": "1.0.0", + "private": true, + "scripts": { + "build:css": "tailwindcss -i ./src/index.css -o ./wwwroot/index.css --minify", + "watch:css": "tailwindcss -i ./src/index.css -o ./wwwroot/index.css --watch" + }, + "devDependencies": { + "tailwindcss": "^3.4.19" + } +} diff --git a/samples/layouts/accordion/tailwind-styling/src/index.css b/samples/layouts/accordion/tailwind-styling/src/index.css new file mode 100644 index 0000000000..4549ed151e --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/src/index.css @@ -0,0 +1,7 @@ +@tailwind utilities; + +.accordion-tailwind-sample { + width: 100%; + height: 100%; + overflow-y: auto; +} diff --git a/samples/layouts/accordion/tailwind-styling/tailwind.config.cjs b/samples/layouts/accordion/tailwind-styling/tailwind.config.cjs new file mode 100644 index 0000000000..df9ea88a01 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/tailwind.config.cjs @@ -0,0 +1,6 @@ +module.exports = { + content: ["./App.razor"], + corePlugins: { + preflight: false, + }, +}; diff --git a/samples/layouts/accordion/tailwind-styling/wwwroot/index.css b/samples/layouts/accordion/tailwind-styling/wwwroot/index.css new file mode 100644 index 0000000000..24e04e62dd --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/wwwroot/index.css @@ -0,0 +1 @@ +.mx-auto{margin-left:auto;margin-right:auto}.box-border{box-sizing:border-box}.w-\[min\(720px\2c 100\%\)\]{width:min(720px,100%)}.rounded{border-radius:.25rem}.bg-\[var\(--ig-gray-50\)\]{background-color:var(--ig-gray-50)}.p-6{padding:1.5rem}.text-\[var\(--ig-gray-900\)\]{color:var(--ig-gray-900)}.accordion-tailwind-sample{width:100%;height:100%;overflow-y:auto}.\[\&\:\:part\(content\)\]\:text-\[var\(--ig-gray-700\)\]::part(content){color:var(--ig-gray-700)}.\[\&\:\:part\(header\)\]\:bg-\[var\(--ig-gray-100\)\]::part(header){background-color:var(--ig-gray-100)}.\[\&\:\:part\(indicator\)\]\:text-\[var\(--ig-primary-500\)\]::part(indicator){color:var(--ig-primary-500)}.\[\&\:\:part\(title\)\]\:font-semibold::part(title){font-weight:600}.\[\&\:\:part\(title\)\]\:text-\[var\(--ig-gray-900\)\]::part(title){color:var(--ig-gray-900)}.\[\&\[open\]\:\:part\(header\)\]\:bg-\[var\(--ig-primary-50\)\][open]::part(header){background-color:var(--ig-primary-50)}.\[\&\[open\]\:\:part\(subtitle\)\]\:text-\[var\(--ig-primary-700\)\][open]::part(subtitle){color:var(--ig-primary-700)}.\[\&\[open\]\:\:part\(title\)\]\:text-\[var\(--ig-primary-700\)\][open]::part(title){color:var(--ig-primary-700)} \ No newline at end of file diff --git a/samples/layouts/accordion/tailwind-styling/wwwroot/index.html b/samples/layouts/accordion/tailwind-styling/wwwroot/index.html new file mode 100644 index 0000000000..d05ad3c174 --- /dev/null +++ b/samples/layouts/accordion/tailwind-styling/wwwroot/index.html @@ -0,0 +1,31 @@ + + + + + + + + + + Samples | IgniteUI for Blazor | Infragistics + + + + + + + + + + +
+ An unhandled error has occurred. + Reload + 🗙 +
+ + + + + + From 4b1677d836fd0788648ff982c1fd24f7b206df16 Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Fri, 28 Aug 2026 15:27:00 +0300 Subject: [PATCH 03/10] fix(browser): remove sample container padding --- browser/IgBlazorSamples.Core/wwwroot/css/browser.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/browser/IgBlazorSamples.Core/wwwroot/css/browser.css b/browser/IgBlazorSamples.Core/wwwroot/css/browser.css index c9a0890b94..ca40c4bd85 100644 --- a/browser/IgBlazorSamples.Core/wwwroot/css/browser.css +++ b/browser/IgBlazorSamples.Core/wwwroot/css/browser.css @@ -89,7 +89,7 @@ height: 100%; width: 100%; - padding: 0.5rem; + /* padding: 0.5rem; */ display: flex; flex-direction: column; justify-content: stretch; From 671d5400a57ba925da7a3a7ca1e5aa3538eba839 Mon Sep 17 00:00:00 2001 From: Hristo Hristov <57346540+Hristo313@users.noreply.github.com> Date: Wed, 9 Sep 2026 11:34:11 +0300 Subject: [PATCH 04/10] feat(button): update button samples (#1297) --- samples/inputs/button/contained/App.razor | 23 +++--- samples/inputs/button/contained/Program.cs | 1 + .../inputs/button/contained/wwwroot/index.css | 7 +- samples/inputs/button/download/App.razor | 8 +-- .../inputs/button/download/wwwroot/index.css | 7 +- samples/inputs/button/fab/App.razor | 22 +++--- samples/inputs/button/fab/Program.cs | 1 + samples/inputs/button/fab/wwwroot/index.css | 7 +- samples/inputs/button/flat/App.razor | 28 ++++---- samples/inputs/button/flat/Program.cs | 1 + samples/inputs/button/flat/wwwroot/index.css | 7 +- .../button/interaction-states/App.razor | 54 ++++++++++++++ .../interaction-states/BlazorClientApp.csproj | 21 ++++++ .../button/interaction-states/Program.cs | 27 +++++++ .../button/interaction-states/ReadMe.md | 68 ++++++++++++++++++ .../button/interaction-states/_Imports.razor | 3 + .../interaction-states/wwwroot/index.css | 41 +++++++++++ .../interaction-states/wwwroot/index.html | 31 ++++++++ samples/inputs/button/layout/App.razor | 51 ++++++++++++++ .../button/layout/BlazorClientApp.csproj | 21 ++++++ samples/inputs/button/layout/Program.cs | 26 +++++++ samples/inputs/button/layout/ReadMe.md | 68 ++++++++++++++++++ samples/inputs/button/layout/_Imports.razor | 3 + .../inputs/button/layout/wwwroot/index.css | 27 +++++++ .../inputs/button/layout/wwwroot/index.html | 31 ++++++++ samples/inputs/button/outlined/App.razor | 23 +++--- samples/inputs/button/outlined/Program.cs | 1 + .../inputs/button/outlined/wwwroot/index.css | 7 +- samples/inputs/button/overview/App.razor | 25 +++---- .../inputs/button/overview/wwwroot/index.css | 33 ++++++++- samples/inputs/button/size/App.razor | 57 +++++++-------- samples/inputs/button/size/Program.cs | 1 + samples/inputs/button/size/wwwroot/index.css | 50 +++++++++++++ samples/inputs/button/states/App.razor | 45 ++++++++++++ .../button/states/BlazorClientApp.csproj | 21 ++++++ samples/inputs/button/states/Program.cs | 27 +++++++ samples/inputs/button/states/ReadMe.md | 68 ++++++++++++++++++ samples/inputs/button/states/_Imports.razor | 3 + .../inputs/button/states/wwwroot/index.css | 11 +++ .../inputs/button/states/wwwroot/index.html | 31 ++++++++ samples/inputs/button/styling/App.razor | 38 ++++++---- samples/inputs/button/styling/Program.cs | 1 + .../inputs/button/styling/wwwroot/index.css | 66 +++++++++++++++++ .../inputs/button/tailwind-styling/App.razor | 39 +++++++++++ .../tailwind-styling/BlazorClientApp.csproj | 21 ++++++ .../inputs/button/tailwind-styling/Program.cs | 27 +++++++ .../inputs/button/tailwind-styling/ReadMe.md | 68 ++++++++++++++++++ .../button/tailwind-styling/_Imports.razor | 3 + .../button/tailwind-styling/wwwroot/index.css | 70 +++++++++++++++++++ .../tailwind-styling/wwwroot/index.html | 31 ++++++++ 50 files changed, 1238 insertions(+), 113 deletions(-) create mode 100644 samples/inputs/button/interaction-states/App.razor create mode 100644 samples/inputs/button/interaction-states/BlazorClientApp.csproj create mode 100644 samples/inputs/button/interaction-states/Program.cs create mode 100644 samples/inputs/button/interaction-states/ReadMe.md create mode 100644 samples/inputs/button/interaction-states/_Imports.razor create mode 100644 samples/inputs/button/interaction-states/wwwroot/index.css create mode 100644 samples/inputs/button/interaction-states/wwwroot/index.html create mode 100644 samples/inputs/button/layout/App.razor create mode 100644 samples/inputs/button/layout/BlazorClientApp.csproj create mode 100644 samples/inputs/button/layout/Program.cs create mode 100644 samples/inputs/button/layout/ReadMe.md create mode 100644 samples/inputs/button/layout/_Imports.razor create mode 100644 samples/inputs/button/layout/wwwroot/index.css create mode 100644 samples/inputs/button/layout/wwwroot/index.html create mode 100644 samples/inputs/button/states/App.razor create mode 100644 samples/inputs/button/states/BlazorClientApp.csproj create mode 100644 samples/inputs/button/states/Program.cs create mode 100644 samples/inputs/button/states/ReadMe.md create mode 100644 samples/inputs/button/states/_Imports.razor create mode 100644 samples/inputs/button/states/wwwroot/index.css create mode 100644 samples/inputs/button/states/wwwroot/index.html create mode 100644 samples/inputs/button/tailwind-styling/App.razor create mode 100644 samples/inputs/button/tailwind-styling/BlazorClientApp.csproj create mode 100644 samples/inputs/button/tailwind-styling/Program.cs create mode 100644 samples/inputs/button/tailwind-styling/ReadMe.md create mode 100644 samples/inputs/button/tailwind-styling/_Imports.razor create mode 100644 samples/inputs/button/tailwind-styling/wwwroot/index.css create mode 100644 samples/inputs/button/tailwind-styling/wwwroot/index.html diff --git a/samples/inputs/button/contained/App.razor b/samples/inputs/button/contained/App.razor index c1dedf43cf..48a8412815 100644 --- a/samples/inputs/button/contained/App.razor +++ b/samples/inputs/button/contained/App.razor @@ -2,17 +2,24 @@ @using IgniteUI.Blazor.Controls -
- - Contained +
+ + + Contained + +
@code { + private IgbIcon NotificationsIcon { get; set; } + protected override void OnAfterRender(bool firstRender) + { + if (firstRender && NotificationsIcon != null) + { + string notificationsIcon = ""; + NotificationsIcon.EnsureReady().ContinueWith(_ => NotificationsIcon.RegisterIconFromText("notifications", notificationsIcon, "material")); + } + } } \ No newline at end of file diff --git a/samples/inputs/button/contained/Program.cs b/samples/inputs/button/contained/Program.cs index 912a65e70f..c44ca0071b 100644 --- a/samples/inputs/button/contained/Program.cs +++ b/samples/inputs/button/contained/Program.cs @@ -20,6 +20,7 @@ public static async Task Main(string[] args) builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); // registering Ignite UI modules builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule)); + builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule)); await builder.Build().RunAsync(); } } diff --git a/samples/inputs/button/contained/wwwroot/index.css b/samples/inputs/button/contained/wwwroot/index.css index 82faeec427..dec0e8c77c 100644 --- a/samples/inputs/button/contained/wwwroot/index.css +++ b/samples/inputs/button/contained/wwwroot/index.css @@ -1,4 +1,9 @@ /* CSS styles are loaded from the shared CSS file located at: https://dl.infragistics.com/x/css//samples/ -*/ \ No newline at end of file +*/ + +igc-button { + width: 41%; + margin: auto; +} \ No newline at end of file diff --git a/samples/inputs/button/download/App.razor b/samples/inputs/button/download/App.razor index 45ea2fb744..b0cc621c9f 100644 --- a/samples/inputs/button/download/App.razor +++ b/samples/inputs/button/download/App.razor @@ -2,13 +2,7 @@ @using IgniteUI.Blazor.Controls -
- +
Download diff --git a/samples/inputs/button/download/wwwroot/index.css b/samples/inputs/button/download/wwwroot/index.css index 82faeec427..dec0e8c77c 100644 --- a/samples/inputs/button/download/wwwroot/index.css +++ b/samples/inputs/button/download/wwwroot/index.css @@ -1,4 +1,9 @@ /* CSS styles are loaded from the shared CSS file located at: https://dl.infragistics.com/x/css//samples/ -*/ \ No newline at end of file +*/ + +igc-button { + width: 41%; + margin: auto; +} \ No newline at end of file diff --git a/samples/inputs/button/fab/App.razor b/samples/inputs/button/fab/App.razor index 1172ed9044..8211de00fa 100644 --- a/samples/inputs/button/fab/App.razor +++ b/samples/inputs/button/fab/App.razor @@ -2,19 +2,23 @@ @using IgniteUI.Blazor.Controls -
- +
- + - Add + + Floating Action +
@code { + private IgbIcon AddIcon { get; set; } + protected override void OnAfterRender(bool firstRender) + { + if (firstRender && AddIcon != null) + { + string addIcon = ""; + AddIcon.EnsureReady().ContinueWith(_ => AddIcon.RegisterIconFromText("add", addIcon, "material")); + } + } } \ No newline at end of file diff --git a/samples/inputs/button/fab/Program.cs b/samples/inputs/button/fab/Program.cs index 912a65e70f..c44ca0071b 100644 --- a/samples/inputs/button/fab/Program.cs +++ b/samples/inputs/button/fab/Program.cs @@ -20,6 +20,7 @@ public static async Task Main(string[] args) builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); // registering Ignite UI modules builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule)); + builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule)); await builder.Build().RunAsync(); } } diff --git a/samples/inputs/button/fab/wwwroot/index.css b/samples/inputs/button/fab/wwwroot/index.css index 82faeec427..dec0e8c77c 100644 --- a/samples/inputs/button/fab/wwwroot/index.css +++ b/samples/inputs/button/fab/wwwroot/index.css @@ -1,4 +1,9 @@ /* CSS styles are loaded from the shared CSS file located at: https://dl.infragistics.com/x/css//samples/ -*/ \ No newline at end of file +*/ + +igc-button { + width: 41%; + margin: auto; +} \ No newline at end of file diff --git a/samples/inputs/button/flat/App.razor b/samples/inputs/button/flat/App.razor index 9193257138..3a8e3f21e5 100644 --- a/samples/inputs/button/flat/App.razor +++ b/samples/inputs/button/flat/App.razor @@ -2,22 +2,24 @@ @using IgniteUI.Blazor.Controls -
- - Flat +
+ + + Flat + +
@code { + private IgbIcon NotificationsIcon { get; set; } + protected override void OnAfterRender(bool firstRender) + { + if (firstRender && NotificationsIcon != null) + { + string notificationsIcon = ""; + NotificationsIcon.EnsureReady().ContinueWith(_ => NotificationsIcon.RegisterIconFromText("notifications", notificationsIcon, "material")); + } + } } \ No newline at end of file diff --git a/samples/inputs/button/flat/Program.cs b/samples/inputs/button/flat/Program.cs index 912a65e70f..c44ca0071b 100644 --- a/samples/inputs/button/flat/Program.cs +++ b/samples/inputs/button/flat/Program.cs @@ -20,6 +20,7 @@ public static async Task Main(string[] args) builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); // registering Ignite UI modules builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule)); + builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule)); await builder.Build().RunAsync(); } } diff --git a/samples/inputs/button/flat/wwwroot/index.css b/samples/inputs/button/flat/wwwroot/index.css index 82faeec427..dec0e8c77c 100644 --- a/samples/inputs/button/flat/wwwroot/index.css +++ b/samples/inputs/button/flat/wwwroot/index.css @@ -1,4 +1,9 @@ /* CSS styles are loaded from the shared CSS file located at: https://dl.infragistics.com/x/css//samples/ -*/ \ No newline at end of file +*/ + +igc-button { + width: 41%; + margin: auto; +} \ No newline at end of file diff --git a/samples/inputs/button/interaction-states/App.razor b/samples/inputs/button/interaction-states/App.razor new file mode 100644 index 0000000000..62b4705e80 --- /dev/null +++ b/samples/inputs/button/interaction-states/App.razor @@ -0,0 +1,54 @@ +@using IgniteUI.Blazor.Controls + + +
+
+
+ Idle + + + Contained + + +
+
+ Hover + + + Contained + + +
+
+ Focused + + + Contained + + +
+
+ Focused & Hover + + + Contained + + +
+
+
+ +@code { + + private IgbIcon NotificationsIcon { get; set; } + + protected override void OnAfterRender(bool firstRender) + { + if (firstRender && NotificationsIcon != null) + { + string notificationsIcon = ""; + NotificationsIcon.EnsureReady().ContinueWith(_ => NotificationsIcon.RegisterIconFromText("notifications", notificationsIcon, "material")); + } + } + +} diff --git a/samples/inputs/button/interaction-states/BlazorClientApp.csproj b/samples/inputs/button/interaction-states/BlazorClientApp.csproj new file mode 100644 index 0000000000..61790a5e50 --- /dev/null +++ b/samples/inputs/button/interaction-states/BlazorClientApp.csproj @@ -0,0 +1,21 @@ + + + + net10.0 + 3.0 + Infragistics.Samples + Infragistics.Samples + + + + 1701;1702,IDE0028,BL0005,0219,CS1998 + + + + + + + + + + diff --git a/samples/inputs/button/interaction-states/Program.cs b/samples/inputs/button/interaction-states/Program.cs new file mode 100644 index 0000000000..c44ca0071b --- /dev/null +++ b/samples/inputs/button/interaction-states/Program.cs @@ -0,0 +1,27 @@ +using System; +using System.Net.Http; +using System.Collections.Generic; +using System.Threading.Tasks; +using System.Text; +using Microsoft.AspNetCore.Components.WebAssembly.Hosting; +using Microsoft.Extensions.Configuration; +using Microsoft.Extensions.DependencyInjection; +using Microsoft.Extensions.Logging; +using IgniteUI.Blazor.Controls; // for registering Ignite UI modules + +namespace Infragistics.Samples +{ + public class Program + { + public static async Task Main(string[] args) + { + var builder = WebAssemblyHostBuilder.CreateDefault(args); + builder.RootComponents.Add("app"); + builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); + // registering Ignite UI modules + builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule)); + builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule)); + await builder.Build().RunAsync(); + } + } +} diff --git a/samples/inputs/button/interaction-states/ReadMe.md b/samples/inputs/button/interaction-states/ReadMe.md new file mode 100644 index 0000000000..4e4ee92738 --- /dev/null +++ b/samples/inputs/button/interaction-states/ReadMe.md @@ -0,0 +1,68 @@ + + + +This folder contains implementation of Blazor application with example of Interaction States feature using [Button](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component. + + + + + View Docs + + + View Code + + + Run Sample + + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Setup + +- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install) + +## Running App in Visual Studio 2022 + +NOTE: VS 2022 has better code highlighting and error detection than VS Code does. + +- open **Visual Studio 2022** as an administrator + +- open the **BlazorClientApp.sln** solution + +- right click solution and select **Restore NuGet Packages** menu item + +- click **Debug** menu and select **Start Debugging** or press **F5** key + + +## Running App in VS Code + +- open **VS Code** as an administrator + +- open this folder in **VS Code** + +- open a terminal window + +- to restore assemblies, run this command: +```dotnet restore``` + +- to run samples, run this command: +```dotnet watch run``` + +- wait for for message: +**Now listening on: http://localhost:4200** + +- open **http://localhost:4200** in your browser + + +## Resources + +- [Razor Component Models](https://www.codemag.com/article/1911052) +- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax) +- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components) diff --git a/samples/inputs/button/interaction-states/_Imports.razor b/samples/inputs/button/interaction-states/_Imports.razor new file mode 100644 index 0000000000..4ba65d38fa --- /dev/null +++ b/samples/inputs/button/interaction-states/_Imports.razor @@ -0,0 +1,3 @@ +@using System.Net.Http +@using Microsoft.AspNetCore.Components +@using IgniteUI.Blazor.Controls diff --git a/samples/inputs/button/interaction-states/wwwroot/index.css b/samples/inputs/button/interaction-states/wwwroot/index.css new file mode 100644 index 0000000000..4220fdea22 --- /dev/null +++ b/samples/inputs/button/interaction-states/wwwroot/index.css @@ -0,0 +1,41 @@ +/* +CSS styles are loaded from the shared CSS file located at: +https://dl.infragistics.com/x/css//samples/ +*/ + +.button-container { + display: flex; + justify-content: space-evenly; + align-items: center; + height: 100%; +} + +.button-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; +} + +.button-label { + color: var(--ig-gray-600); + font-size: 13px; + line-height: 20px; + letter-spacing: 0.3px; +} + +.state-hover::part(base) { + background: var(--hover-background); + color: var(--hover-foreground); +} + +.state-focused::part(base), +.state-focused-hover::part(base) { + background: var(--focus-background); + color: var(--focus-foreground); +} + +.state-focused-hover::part(base) { + background: var(--focus-hover-background); + color: var(--focus-hover-foreground); +} diff --git a/samples/inputs/button/interaction-states/wwwroot/index.html b/samples/inputs/button/interaction-states/wwwroot/index.html new file mode 100644 index 0000000000..1ffff3a52a --- /dev/null +++ b/samples/inputs/button/interaction-states/wwwroot/index.html @@ -0,0 +1,31 @@ + + + + + + + + + + Samples | IgniteUI for Blazor | Infragistics + + + + + + + + + +
+ An unhandled error has occurred. + Reload + 🗙 +
+ + + + + + + diff --git a/samples/inputs/button/layout/App.razor b/samples/inputs/button/layout/App.razor new file mode 100644 index 0000000000..3cc1a12010 --- /dev/null +++ b/samples/inputs/button/layout/App.razor @@ -0,0 +1,51 @@ +@using IgniteUI.Blazor.Controls + + +
+
+
+ Add +
+
Buy Now
+
+ Add +
+
+ Floating Action +
+
+
Floating Action
+ @* Legacy selector layout retained below for reference. +
+
+ Left + + + Add + +
+
+ Right + + Add + + +
+
*@ +
+
+ +@code { + + private IgbIcon AddIcon { get; set; } + + protected override void OnAfterRender(bool firstRender) + { + if (firstRender && AddIcon != null) + { + string addIcon = ""; + AddIcon.EnsureReady().ContinueWith(_ => AddIcon.RegisterIconFromText("add", addIcon, "material")); + } + } + +} diff --git a/samples/inputs/button/layout/BlazorClientApp.csproj b/samples/inputs/button/layout/BlazorClientApp.csproj new file mode 100644 index 0000000000..61790a5e50 --- /dev/null +++ b/samples/inputs/button/layout/BlazorClientApp.csproj @@ -0,0 +1,21 @@ + + + + net10.0 + 3.0 + Infragistics.Samples + Infragistics.Samples + + + + 1701;1702,IDE0028,BL0005,0219,CS1998 + + + + + + + + + + diff --git a/samples/inputs/button/layout/Program.cs b/samples/inputs/button/layout/Program.cs new file mode 100644 index 0000000000..912a65e70f --- /dev/null +++ b/samples/inputs/button/layout/Program.cs @@ -0,0 +1,26 @@ +using System; +using System.Net.Http; +using System.Collections.Generic; +using System.Threading.Tasks; +using System.Text; +using Microsoft.AspNetCore.Components.WebAssembly.Hosting; +using Microsoft.Extensions.Configuration; +using Microsoft.Extensions.DependencyInjection; +using Microsoft.Extensions.Logging; +using IgniteUI.Blazor.Controls; // for registering Ignite UI modules + +namespace Infragistics.Samples +{ + public class Program + { + public static async Task Main(string[] args) + { + var builder = WebAssemblyHostBuilder.CreateDefault(args); + builder.RootComponents.Add("app"); + builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); + // registering Ignite UI modules + builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule)); + await builder.Build().RunAsync(); + } + } +} diff --git a/samples/inputs/button/layout/ReadMe.md b/samples/inputs/button/layout/ReadMe.md new file mode 100644 index 0000000000..20fdc813b5 --- /dev/null +++ b/samples/inputs/button/layout/ReadMe.md @@ -0,0 +1,68 @@ + + + +This folder contains implementation of Blazor application with example of Layout feature using [Button](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component. + + + + + View Docs + + + View Code + + + Run Sample + + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Setup + +- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install) + +## Running App in Visual Studio 2022 + +NOTE: VS 2022 has better code highlighting and error detection than VS Code does. + +- open **Visual Studio 2022** as an administrator + +- open the **BlazorClientApp.sln** solution + +- right click solution and select **Restore NuGet Packages** menu item + +- click **Debug** menu and select **Start Debugging** or press **F5** key + + +## Running App in VS Code + +- open **VS Code** as an administrator + +- open this folder in **VS Code** + +- open a terminal window + +- to restore assemblies, run this command: +```dotnet restore``` + +- to run samples, run this command: +```dotnet watch run``` + +- wait for for message: +**Now listening on: http://localhost:4200** + +- open **http://localhost:4200** in your browser + + +## Resources + +- [Razor Component Models](https://www.codemag.com/article/1911052) +- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax) +- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components) diff --git a/samples/inputs/button/layout/_Imports.razor b/samples/inputs/button/layout/_Imports.razor new file mode 100644 index 0000000000..4ba65d38fa --- /dev/null +++ b/samples/inputs/button/layout/_Imports.razor @@ -0,0 +1,3 @@ +@using System.Net.Http +@using Microsoft.AspNetCore.Components +@using IgniteUI.Blazor.Controls diff --git a/samples/inputs/button/layout/wwwroot/index.css b/samples/inputs/button/layout/wwwroot/index.css new file mode 100644 index 0000000000..dd087e11a2 --- /dev/null +++ b/samples/inputs/button/layout/wwwroot/index.css @@ -0,0 +1,27 @@ +/* +CSS styles are loaded from the shared CSS file located at: +https://dl.infragistics.com/x/css//samples/ +*/ + +.button-container { + display: flex; + align-items: center; + justify-content: center; + gap: 1rem; + width: 100%; + box-sizing: border-box; + padding: 2rem; +} + +.button-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.75rem; +} + +igc-button::part(base) { + font-size: 0.85rem; + text-transform: uppercase; + letter-spacing: 1px; +} diff --git a/samples/inputs/button/layout/wwwroot/index.html b/samples/inputs/button/layout/wwwroot/index.html new file mode 100644 index 0000000000..1ffff3a52a --- /dev/null +++ b/samples/inputs/button/layout/wwwroot/index.html @@ -0,0 +1,31 @@ + + + + + + + + + + Samples | IgniteUI for Blazor | Infragistics + + + + + + + + + +
+ An unhandled error has occurred. + Reload + 🗙 +
+ + + + + + + diff --git a/samples/inputs/button/outlined/App.razor b/samples/inputs/button/outlined/App.razor index 51ed8b79c0..16fedb7a04 100644 --- a/samples/inputs/button/outlined/App.razor +++ b/samples/inputs/button/outlined/App.razor @@ -2,16 +2,23 @@ @using IgniteUI.Blazor.Controls -
- - Outlined +
+ + + Outlined + +
@code { + private IgbIcon NotificationsIcon { get; set; } + protected override void OnAfterRender(bool firstRender) + { + if (firstRender && NotificationsIcon != null) + { + string notificationsIcon = ""; + NotificationsIcon.EnsureReady().ContinueWith(_ => NotificationsIcon.RegisterIconFromText("notifications", notificationsIcon, "material")); + } + } } \ No newline at end of file diff --git a/samples/inputs/button/outlined/Program.cs b/samples/inputs/button/outlined/Program.cs index 912a65e70f..c44ca0071b 100644 --- a/samples/inputs/button/outlined/Program.cs +++ b/samples/inputs/button/outlined/Program.cs @@ -20,6 +20,7 @@ public static async Task Main(string[] args) builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); // registering Ignite UI modules builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule)); + builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule)); await builder.Build().RunAsync(); } } diff --git a/samples/inputs/button/outlined/wwwroot/index.css b/samples/inputs/button/outlined/wwwroot/index.css index 82faeec427..dec0e8c77c 100644 --- a/samples/inputs/button/outlined/wwwroot/index.css +++ b/samples/inputs/button/outlined/wwwroot/index.css @@ -1,4 +1,9 @@ /* CSS styles are loaded from the shared CSS file located at: https://dl.infragistics.com/x/css//samples/ -*/ \ No newline at end of file +*/ + +igc-button { + width: 41%; + margin: auto; +} \ No newline at end of file diff --git a/samples/inputs/button/overview/App.razor b/samples/inputs/button/overview/App.razor index 2aea338ae4..ebb5399cab 100644 --- a/samples/inputs/button/overview/App.razor +++ b/samples/inputs/button/overview/App.razor @@ -1,20 +1,17 @@ @using IgniteUI.Blazor.Controls -
- - -
- Flat - Contained - Outlined +
+
+ +
+ + +
+ Cancel + Save +
+
diff --git a/samples/inputs/button/overview/wwwroot/index.css b/samples/inputs/button/overview/wwwroot/index.css index 82faeec427..cf04f5057a 100644 --- a/samples/inputs/button/overview/wwwroot/index.css +++ b/samples/inputs/button/overview/wwwroot/index.css @@ -1,4 +1,35 @@ /* CSS styles are loaded from the shared CSS file located at: https://dl.infragistics.com/x/css//samples/ -*/ \ No newline at end of file +*/ + +.form { + display: flex; + justify-content: center; + gap: 1.25rem; + padding: 1.5rem; +} + +.form igc-avatar { + --ig-size: var(--ig-size-large); +} + +.fields { + display: flex; + flex-direction: column; + gap: 1rem; + max-width: 260px; + width: 100%; +} + +.fields igc-input::part(container), +.fields igc-input::part(input) { + background-color: var(--ig-gray-50); +} + +.actions { + display: flex; + justify-content: flex-end; + gap: 1rem; + margin-top: 0.5rem; +} \ No newline at end of file diff --git a/samples/inputs/button/size/App.razor b/samples/inputs/button/size/App.razor index bbbaf61e7a..f3190e29af 100644 --- a/samples/inputs/button/size/App.razor +++ b/samples/inputs/button/size/App.razor @@ -1,45 +1,36 @@ @using IgniteUI.Blazor.Controls - - -
- - Small - Medium - Large - - -
- Flat - Contained - Outlined - Like +
+
+
ContainedOutlinedFlatFab
+ @Button("size-large") + @Button("size-medium") + @Button("size-small")
@code { - private string ButtonsSize = "size-medium"; + private RenderFragment Button(string size) => @
+ @char.ToUpperInvariant(size[5])@size[6..] + Contained + Outlined + Flat + Floating Action +
; + + private IgbIcon NotificationsIcon { get; set; } + private IgbIcon AddIcon { get; set; } - public void OnRadioSizeClick(IgbRadioChangeEventArgs e) + protected override void OnAfterRender(bool firstRender) { - this.ButtonsSize = $"size-{e.Detail.Value.ToLower()}"; + if (firstRender && NotificationsIcon != null && AddIcon != null) + { + string notificationsIcon = ""; + string addIcon = ""; + NotificationsIcon.EnsureReady().ContinueWith(_ => NotificationsIcon.RegisterIconFromText("notifications", notificationsIcon, "material")); + AddIcon.EnsureReady().ContinueWith(_ => AddIcon.RegisterIconFromText("add", addIcon, "material")); + } } } \ No newline at end of file diff --git a/samples/inputs/button/size/Program.cs b/samples/inputs/button/size/Program.cs index 912a65e70f..c44ca0071b 100644 --- a/samples/inputs/button/size/Program.cs +++ b/samples/inputs/button/size/Program.cs @@ -20,6 +20,7 @@ public static async Task Main(string[] args) builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); // registering Ignite UI modules builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule)); + builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule)); await builder.Build().RunAsync(); } } diff --git a/samples/inputs/button/size/wwwroot/index.css b/samples/inputs/button/size/wwwroot/index.css index dba4584331..8ff6e57138 100644 --- a/samples/inputs/button/size/wwwroot/index.css +++ b/samples/inputs/button/size/wwwroot/index.css @@ -2,6 +2,56 @@ CSS styles are loaded from the shared CSS file located at: https://dl.infragistics.com/x/css//samples/ */ + +.size-grid { + display: flex; + flex-direction: column; + gap: 1.25rem; + padding: 0.5rem; + width: 100%; + box-sizing: border-box; +} + +.size-row { + display: grid; + grid-template-columns: 70px repeat(4, minmax(0, 1fr)); + align-items: center; + justify-items: center; + column-gap: 1rem; + row-gap: 0.5rem; + width: 100%; +} + +.size-header { + display: grid; + grid-template-columns: 70px repeat(4, minmax(0, 1fr)); + align-items: center; + justify-items: center; + column-gap: 1rem; + width: 100%; + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + line-height: 20px; + letter-spacing: 0.3px; +} + +.size-row igc-button { + width: auto; + transform: scale(0.9); +} + +.size-label { + justify-self: start; + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + line-height: 20px; + letter-spacing: 0.3px; + display: inline-flex; + align-items: center; +} + .size-small { --ig-size: var(--ig-size-small); } diff --git a/samples/inputs/button/states/App.razor b/samples/inputs/button/states/App.razor new file mode 100644 index 0000000000..c87fded0fc --- /dev/null +++ b/samples/inputs/button/states/App.razor @@ -0,0 +1,45 @@ +@using IgniteUI.Blazor.Controls + + +
+
+ + + Contained + + + + + Outlined + + + + + Flat + + + + + Floating Action + + +
+
+ +@code { + + private IgbIcon NotificationsIcon { get; set; } + private IgbIcon AddIcon { get; set; } + + protected override void OnAfterRender(bool firstRender) + { + if (firstRender && NotificationsIcon != null && AddIcon != null) + { + string notificationsIcon = ""; + string addIcon = ""; + NotificationsIcon.EnsureReady().ContinueWith(_ => NotificationsIcon.RegisterIconFromText("notifications", notificationsIcon, "material")); + AddIcon.EnsureReady().ContinueWith(_ => AddIcon.RegisterIconFromText("add", addIcon, "material")); + } + } + +} diff --git a/samples/inputs/button/states/BlazorClientApp.csproj b/samples/inputs/button/states/BlazorClientApp.csproj new file mode 100644 index 0000000000..61790a5e50 --- /dev/null +++ b/samples/inputs/button/states/BlazorClientApp.csproj @@ -0,0 +1,21 @@ + + + + net10.0 + 3.0 + Infragistics.Samples + Infragistics.Samples + + + + 1701;1702,IDE0028,BL0005,0219,CS1998 + + + + + + + + + + diff --git a/samples/inputs/button/states/Program.cs b/samples/inputs/button/states/Program.cs new file mode 100644 index 0000000000..c44ca0071b --- /dev/null +++ b/samples/inputs/button/states/Program.cs @@ -0,0 +1,27 @@ +using System; +using System.Net.Http; +using System.Collections.Generic; +using System.Threading.Tasks; +using System.Text; +using Microsoft.AspNetCore.Components.WebAssembly.Hosting; +using Microsoft.Extensions.Configuration; +using Microsoft.Extensions.DependencyInjection; +using Microsoft.Extensions.Logging; +using IgniteUI.Blazor.Controls; // for registering Ignite UI modules + +namespace Infragistics.Samples +{ + public class Program + { + public static async Task Main(string[] args) + { + var builder = WebAssemblyHostBuilder.CreateDefault(args); + builder.RootComponents.Add("app"); + builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); + // registering Ignite UI modules + builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule)); + builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule)); + await builder.Build().RunAsync(); + } + } +} diff --git a/samples/inputs/button/states/ReadMe.md b/samples/inputs/button/states/ReadMe.md new file mode 100644 index 0000000000..84d5a4b3c7 --- /dev/null +++ b/samples/inputs/button/states/ReadMe.md @@ -0,0 +1,68 @@ + + + +This folder contains implementation of Blazor application with example of States feature using [Button](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component. + + + + + View Docs + + + View Code + + + Run Sample + + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Setup + +- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install) + +## Running App in Visual Studio 2022 + +NOTE: VS 2022 has better code highlighting and error detection than VS Code does. + +- open **Visual Studio 2022** as an administrator + +- open the **BlazorClientApp.sln** solution + +- right click solution and select **Restore NuGet Packages** menu item + +- click **Debug** menu and select **Start Debugging** or press **F5** key + + +## Running App in VS Code + +- open **VS Code** as an administrator + +- open this folder in **VS Code** + +- open a terminal window + +- to restore assemblies, run this command: +```dotnet restore``` + +- to run samples, run this command: +```dotnet watch run``` + +- wait for for message: +**Now listening on: http://localhost:4200** + +- open **http://localhost:4200** in your browser + + +## Resources + +- [Razor Component Models](https://www.codemag.com/article/1911052) +- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax) +- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components) diff --git a/samples/inputs/button/states/_Imports.razor b/samples/inputs/button/states/_Imports.razor new file mode 100644 index 0000000000..4ba65d38fa --- /dev/null +++ b/samples/inputs/button/states/_Imports.razor @@ -0,0 +1,3 @@ +@using System.Net.Http +@using Microsoft.AspNetCore.Components +@using IgniteUI.Blazor.Controls diff --git a/samples/inputs/button/states/wwwroot/index.css b/samples/inputs/button/states/wwwroot/index.css new file mode 100644 index 0000000000..c7b964142f --- /dev/null +++ b/samples/inputs/button/states/wwwroot/index.css @@ -0,0 +1,11 @@ +/* +CSS styles are loaded from the shared CSS file located at: +https://dl.infragistics.com/x/css//samples/ +*/ + +.button-container { + display: flex; + justify-content: space-evenly; + align-items: center; + height: 100%; +} diff --git a/samples/inputs/button/states/wwwroot/index.html b/samples/inputs/button/states/wwwroot/index.html new file mode 100644 index 0000000000..1ffff3a52a --- /dev/null +++ b/samples/inputs/button/states/wwwroot/index.html @@ -0,0 +1,31 @@ + + + + + + + + + + Samples | IgniteUI for Blazor | Infragistics + + + + + + + + + +
+ An unhandled error has occurred. + Reload + 🗙 +
+ + + + + + + diff --git a/samples/inputs/button/styling/App.razor b/samples/inputs/button/styling/App.razor index 813585058f..be6a3f67a0 100644 --- a/samples/inputs/button/styling/App.razor +++ b/samples/inputs/button/styling/App.razor @@ -2,23 +2,31 @@ @using IgniteUI.Blazor.Controls -
- - Contained - +
+
+
+ Confirm + Send + Cancel + Add +
+
@code { + private IgbIcon SendIcon { get; set; } + private IgbIcon AddIcon { get; set; } + + protected override void OnAfterRender(bool firstRender) + { + if (firstRender && SendIcon != null && AddIcon != null) + { + string sendIcon = ""; + string addIcon = ""; + SendIcon.EnsureReady().ContinueWith(_ => SendIcon.RegisterIconFromText("send", sendIcon, "material")); + AddIcon.EnsureReady().ContinueWith(_ => AddIcon.RegisterIconFromText("add", addIcon, "material")); + } + } + } \ No newline at end of file diff --git a/samples/inputs/button/styling/Program.cs b/samples/inputs/button/styling/Program.cs index 912a65e70f..c44ca0071b 100644 --- a/samples/inputs/button/styling/Program.cs +++ b/samples/inputs/button/styling/Program.cs @@ -20,6 +20,7 @@ public static async Task Main(string[] args) builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); // registering Ignite UI modules builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule)); + builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule)); await builder.Build().RunAsync(); } } diff --git a/samples/inputs/button/styling/wwwroot/index.css b/samples/inputs/button/styling/wwwroot/index.css index c59082e7af..b39c9d1c1b 100644 --- a/samples/inputs/button/styling/wwwroot/index.css +++ b/samples/inputs/button/styling/wwwroot/index.css @@ -2,3 +2,69 @@ CSS styles are loaded from the shared CSS file located at: https://dl.infragistics.com/x/css//samples/ */ + +.button-grid { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + gap: 1.5rem; + padding: 1rem; +} + +.button-row { + display: grid; + grid-template-columns: repeat(4, 7rem); + align-items: center; + justify-items: center; + gap: 1.5rem; +} + +igc-button.confirm-button::part(base) { + background-color: #1275c4; + color: #ffffff; +} +igc-button.confirm-button:hover::part(base) { + background-color: #0b4f8a; + color: #ffffff; +} + +igc-button.send-button::part(base) { + border-color: #8a2be2; + color: #8a2be2; +} +igc-button.send-button:hover::part(base) { + background-color: #8a2be2; + border-color: #6a1bb1; + color: #ffffff; +} + +igc-button.send-button igc-icon { + color: #8a2be2; +} +igc-button.send-button:hover igc-icon { + color: #ffffff; +} + +igc-button.cancel-button::part(base) { + color: #1275c4; +} +igc-button.cancel-button:hover::part(base) { + background-color: #dbeeff; + color: #063b68; +} + +igc-button.add-button::part(base) { + background-color: #4caf50; + color: #000000; + border-radius: 999px; +} +igc-button.add-button:hover::part(base) { + background-color: #257a2b; + color: #ffffff; +} + +igc-button.add-button igc-icon { + color: #000000; +} diff --git a/samples/inputs/button/tailwind-styling/App.razor b/samples/inputs/button/tailwind-styling/App.razor new file mode 100644 index 0000000000..fd1b02d863 --- /dev/null +++ b/samples/inputs/button/tailwind-styling/App.razor @@ -0,0 +1,39 @@ +@using IgniteUI.Blazor.Controls + + +
+
+ + Confirm + + + + Send + + + Cancel + + + Add + + +
+
+ +@code { + + private IgbIcon SendIcon { get; set; } + private IgbIcon AddIcon { get; set; } + + protected override void OnAfterRender(bool firstRender) + { + if (firstRender && SendIcon != null && AddIcon != null) + { + string sendIcon = ""; + string addIcon = ""; + SendIcon.EnsureReady().ContinueWith(_ => SendIcon.RegisterIconFromText("send", sendIcon, "material")); + AddIcon.EnsureReady().ContinueWith(_ => AddIcon.RegisterIconFromText("add", addIcon, "material")); + } + } + +} diff --git a/samples/inputs/button/tailwind-styling/BlazorClientApp.csproj b/samples/inputs/button/tailwind-styling/BlazorClientApp.csproj new file mode 100644 index 0000000000..61790a5e50 --- /dev/null +++ b/samples/inputs/button/tailwind-styling/BlazorClientApp.csproj @@ -0,0 +1,21 @@ + + + + net10.0 + 3.0 + Infragistics.Samples + Infragistics.Samples + + + + 1701;1702,IDE0028,BL0005,0219,CS1998 + + + + + + + + + + diff --git a/samples/inputs/button/tailwind-styling/Program.cs b/samples/inputs/button/tailwind-styling/Program.cs new file mode 100644 index 0000000000..c44ca0071b --- /dev/null +++ b/samples/inputs/button/tailwind-styling/Program.cs @@ -0,0 +1,27 @@ +using System; +using System.Net.Http; +using System.Collections.Generic; +using System.Threading.Tasks; +using System.Text; +using Microsoft.AspNetCore.Components.WebAssembly.Hosting; +using Microsoft.Extensions.Configuration; +using Microsoft.Extensions.DependencyInjection; +using Microsoft.Extensions.Logging; +using IgniteUI.Blazor.Controls; // for registering Ignite UI modules + +namespace Infragistics.Samples +{ + public class Program + { + public static async Task Main(string[] args) + { + var builder = WebAssemblyHostBuilder.CreateDefault(args); + builder.RootComponents.Add("app"); + builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); + // registering Ignite UI modules + builder.Services.AddIgniteUIBlazor(typeof(IgbButtonModule)); + builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule)); + await builder.Build().RunAsync(); + } + } +} diff --git a/samples/inputs/button/tailwind-styling/ReadMe.md b/samples/inputs/button/tailwind-styling/ReadMe.md new file mode 100644 index 0000000000..92a8abf46b --- /dev/null +++ b/samples/inputs/button/tailwind-styling/ReadMe.md @@ -0,0 +1,68 @@ + + + +This folder contains implementation of Blazor application with example of Tailwind Styling feature using [Button](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component. + + + + + View Docs + + + View Code + + + Run Sample + + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Setup + +- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install) + +## Running App in Visual Studio 2022 + +NOTE: VS 2022 has better code highlighting and error detection than VS Code does. + +- open **Visual Studio 2022** as an administrator + +- open the **BlazorClientApp.sln** solution + +- right click solution and select **Restore NuGet Packages** menu item + +- click **Debug** menu and select **Start Debugging** or press **F5** key + + +## Running App in VS Code + +- open **VS Code** as an administrator + +- open this folder in **VS Code** + +- open a terminal window + +- to restore assemblies, run this command: +```dotnet restore``` + +- to run samples, run this command: +```dotnet watch run``` + +- wait for for message: +**Now listening on: http://localhost:4200** + +- open **http://localhost:4200** in your browser + + +## Resources + +- [Razor Component Models](https://www.codemag.com/article/1911052) +- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax) +- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components) diff --git a/samples/inputs/button/tailwind-styling/_Imports.razor b/samples/inputs/button/tailwind-styling/_Imports.razor new file mode 100644 index 0000000000..4ba65d38fa --- /dev/null +++ b/samples/inputs/button/tailwind-styling/_Imports.razor @@ -0,0 +1,3 @@ +@using System.Net.Http +@using Microsoft.AspNetCore.Components +@using IgniteUI.Blazor.Controls diff --git a/samples/inputs/button/tailwind-styling/wwwroot/index.css b/samples/inputs/button/tailwind-styling/wwwroot/index.css new file mode 100644 index 0000000000..968d3427d2 --- /dev/null +++ b/samples/inputs/button/tailwind-styling/wwwroot/index.css @@ -0,0 +1,70 @@ +/* +CSS styles are loaded from the shared CSS file located at: +https://dl.infragistics.com/x/css//samples/ +*/ + +.button-grid { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 100%; + gap: 1.5rem; + padding: 1rem; +} + +.button-row { + display: grid; + grid-template-columns: repeat(4, 7rem); + align-items: center; + justify-items: center; + gap: 1.5rem; +} + +.confirm-button::part(base) { + background: #4338ca; + color: #ffffff; +} +.confirm-button:hover::part(base) { + background-color: #3730a3; + color: #ffffff; +} + +.send-button::part(base) { + border-color: #db2777; + color: #db2777; +} +.send-button:hover::part(base) { + background-color: #db2777; + border-color: #be185d; + color: #ffffff; +} + +.send-button igc-icon { + color: #db2777; +} +.send-button:hover igc-icon { + color: #ffffff; +} + +.cancel-button::part(base) { + color: #b45309; +} +.cancel-button:hover::part(base) { + background-color: #fef3c7; + color: #78350f; +} + +.add-button::part(base) { + background: #14b8a6; + color: #000000; + border-radius: 9999px; +} +.add-button:hover::part(base) { + background-color: #115e59; + color: #ffffff; +} + +.add-button igc-icon { + color: #ffffff; +} diff --git a/samples/inputs/button/tailwind-styling/wwwroot/index.html b/samples/inputs/button/tailwind-styling/wwwroot/index.html new file mode 100644 index 0000000000..1ffff3a52a --- /dev/null +++ b/samples/inputs/button/tailwind-styling/wwwroot/index.html @@ -0,0 +1,31 @@ + + + + + + + + + + Samples | IgniteUI for Blazor | Infragistics + + + + + + + + + +
+ An unhandled error has occurred. + Reload + 🗙 +
+ + + + + + + From c1bee35e9f1a0282fcbb83033f978a261252dcda Mon Sep 17 00:00:00 2001 From: Hristo Hristov <57346540+Hristo313@users.noreply.github.com> Date: Tue, 15 Sep 2026 17:05:20 +0300 Subject: [PATCH 05/10] feat(switch): update samples content (#1302) * feat(switch): update samples content * fix(switch): update styling hover * fix(switch): update theme to bootstrap * fix(switch): update styling sample --- samples/inputs/switches/checking/App.razor | 11 - .../switches/checking/wwwroot/index.css | 4 - samples/inputs/switches/disabled/App.razor | 21 +- .../switches/disabled/wwwroot/index.css | 33 +- .../switches/disabled/wwwroot/index.html | 6 +- samples/inputs/switches/enabled/App.razor | 36 + .../BlazorClientApp.csproj | 0 .../{checking => enabled}/BlazorClientApp.sln | 0 .../switches/{checking => enabled}/Program.cs | 0 .../Properties/launchSettings.json | 0 samples/inputs/switches/enabled/README.md | 68 ++ .../{checking => enabled}/_Imports.razor | 0 .../inputs/switches/enabled/wwwroot/index.css | 33 + .../switches/enabled/wwwroot/index.html | 32 + samples/inputs/switches/label/App.razor | 15 - .../inputs/switches/label/wwwroot/index.css | 4 - samples/inputs/switches/layout/App.razor | 22 + .../{label => layout}/BlazorClientApp.csproj | 0 .../{label => layout}/BlazorClientApp.sln | 0 .../switches/{label => layout}/Program.cs | 0 .../Properties/launchSettings.json | 0 .../switches/{label => layout}/README.md | 6 +- .../switches/{label => layout}/_Imports.razor | 0 .../inputs/switches/layout/wwwroot/index.css | 29 + .../{label => layout}/wwwroot/index.html | 6 +- samples/inputs/switches/overview/App.razor | 32 +- .../switches/overview/wwwroot/index.css | 63 +- .../switches/overview/wwwroot/index.html | 6 +- samples/inputs/switches/selected/App.razor | 25 + .../switches/selected/BlazorClientApp.csproj | 25 + .../switches/selected/BlazorClientApp.sln | 24 + samples/inputs/switches/selected/Program.cs | 26 + .../selected/Properties/launchSettings.json | 27 + .../switches/{checking => selected}/README.md | 6 +- .../inputs/switches/selected/_Imports.razor | 8 + .../switches/selected/wwwroot/index.css | 26 + .../{checking => selected}/wwwroot/index.html | 6 +- samples/inputs/switches/styling/App.razor | 34 +- samples/inputs/switches/styling/Program.cs | 5 +- .../inputs/switches/styling/wwwroot/index.css | 112 +- .../switches/styling/wwwroot/index.html | 6 +- .../switches/tailwind-styling/App.razor | 47 + .../tailwind-styling/BlazorClientApp.csproj | 25 + .../tailwind-styling/BlazorClientApp.sln | 24 + .../switches/tailwind-styling/Program.cs | 27 + .../Properties/launchSettings.json | 27 + .../switches/tailwind-styling/README.md | 68 ++ .../switches/tailwind-styling/_Imports.razor | 8 + .../tailwind-styling/package-lock.json | 1015 +++++++++++++++++ .../switches/tailwind-styling/package.json | 12 + .../switches/tailwind-styling/src/index.css | 15 + .../tailwind-styling/tailwind.config.cjs | 8 + .../tailwind-styling/wwwroot/index.css | 1 + .../tailwind-styling/wwwroot/index.html | 32 + 54 files changed, 1976 insertions(+), 90 deletions(-) delete mode 100644 samples/inputs/switches/checking/App.razor delete mode 100644 samples/inputs/switches/checking/wwwroot/index.css create mode 100644 samples/inputs/switches/enabled/App.razor rename samples/inputs/switches/{checking => enabled}/BlazorClientApp.csproj (100%) rename samples/inputs/switches/{checking => enabled}/BlazorClientApp.sln (100%) rename samples/inputs/switches/{checking => enabled}/Program.cs (100%) rename samples/inputs/switches/{checking => enabled}/Properties/launchSettings.json (100%) create mode 100644 samples/inputs/switches/enabled/README.md rename samples/inputs/switches/{checking => enabled}/_Imports.razor (100%) create mode 100644 samples/inputs/switches/enabled/wwwroot/index.css create mode 100644 samples/inputs/switches/enabled/wwwroot/index.html delete mode 100644 samples/inputs/switches/label/App.razor delete mode 100644 samples/inputs/switches/label/wwwroot/index.css create mode 100644 samples/inputs/switches/layout/App.razor rename samples/inputs/switches/{label => layout}/BlazorClientApp.csproj (100%) rename samples/inputs/switches/{label => layout}/BlazorClientApp.sln (100%) rename samples/inputs/switches/{label => layout}/Program.cs (100%) rename samples/inputs/switches/{label => layout}/Properties/launchSettings.json (100%) rename samples/inputs/switches/{label => layout}/README.md (89%) rename samples/inputs/switches/{label => layout}/_Imports.razor (100%) create mode 100644 samples/inputs/switches/layout/wwwroot/index.css rename samples/inputs/switches/{label => layout}/wwwroot/index.html (92%) create mode 100644 samples/inputs/switches/selected/App.razor create mode 100644 samples/inputs/switches/selected/BlazorClientApp.csproj create mode 100644 samples/inputs/switches/selected/BlazorClientApp.sln create mode 100644 samples/inputs/switches/selected/Program.cs create mode 100644 samples/inputs/switches/selected/Properties/launchSettings.json rename samples/inputs/switches/{checking => selected}/README.md (94%) create mode 100644 samples/inputs/switches/selected/_Imports.razor create mode 100644 samples/inputs/switches/selected/wwwroot/index.css rename samples/inputs/switches/{checking => selected}/wwwroot/index.html (92%) create mode 100644 samples/inputs/switches/tailwind-styling/App.razor create mode 100644 samples/inputs/switches/tailwind-styling/BlazorClientApp.csproj create mode 100644 samples/inputs/switches/tailwind-styling/BlazorClientApp.sln create mode 100644 samples/inputs/switches/tailwind-styling/Program.cs create mode 100644 samples/inputs/switches/tailwind-styling/Properties/launchSettings.json create mode 100644 samples/inputs/switches/tailwind-styling/README.md create mode 100644 samples/inputs/switches/tailwind-styling/_Imports.razor create mode 100644 samples/inputs/switches/tailwind-styling/package-lock.json create mode 100644 samples/inputs/switches/tailwind-styling/package.json create mode 100644 samples/inputs/switches/tailwind-styling/src/index.css create mode 100644 samples/inputs/switches/tailwind-styling/tailwind.config.cjs create mode 100644 samples/inputs/switches/tailwind-styling/wwwroot/index.css create mode 100644 samples/inputs/switches/tailwind-styling/wwwroot/index.html diff --git a/samples/inputs/switches/checking/App.razor b/samples/inputs/switches/checking/App.razor deleted file mode 100644 index 18910e85e2..0000000000 --- a/samples/inputs/switches/checking/App.razor +++ /dev/null @@ -1,11 +0,0 @@ - -@using IgniteUI.Blazor.Controls - - -
- Label -
- -@code { - -} \ No newline at end of file diff --git a/samples/inputs/switches/checking/wwwroot/index.css b/samples/inputs/switches/checking/wwwroot/index.css deleted file mode 100644 index 82faeec427..0000000000 --- a/samples/inputs/switches/checking/wwwroot/index.css +++ /dev/null @@ -1,4 +0,0 @@ -/* -CSS styles are loaded from the shared CSS file located at: -https://dl.infragistics.com/x/css//samples/ -*/ \ No newline at end of file diff --git a/samples/inputs/switches/disabled/App.razor b/samples/inputs/switches/disabled/App.razor index 0502b0e63b..1bd754b3fa 100644 --- a/samples/inputs/switches/disabled/App.razor +++ b/samples/inputs/switches/disabled/App.razor @@ -1,11 +1,22 @@ - @using IgniteUI.Blazor.Controls - -
- Label +
+
+
+ Disabled Checked + + Power + +
+
+ Disabled Unchecked + + Power + +
+
@code { -} \ No newline at end of file +} diff --git a/samples/inputs/switches/disabled/wwwroot/index.css b/samples/inputs/switches/disabled/wwwroot/index.css index 82faeec427..f07ee6a2a0 100644 --- a/samples/inputs/switches/disabled/wwwroot/index.css +++ b/samples/inputs/switches/disabled/wwwroot/index.css @@ -1,4 +1,29 @@ -/* -CSS styles are loaded from the shared CSS file located at: -https://dl.infragistics.com/x/css//samples/ -*/ \ No newline at end of file +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.container.sample { + display: flex; + place-content: center; + place-items: center; +} + +.states { + --variant-gap: 60px; + --label-gap: 30px; + + display: flex; + align-items: center; + gap: var(--variant-gap); + + & .states__variant { + display: flex; + align-items: center; + gap: var(--label-gap); + } + + & .states__label { + font: 500 14px / 24px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.1px; + color: var(--ig-gray-600); + } +} diff --git a/samples/inputs/switches/disabled/wwwroot/index.html b/samples/inputs/switches/disabled/wwwroot/index.html index 61d40ad005..52c7f4054f 100644 --- a/samples/inputs/switches/disabled/wwwroot/index.html +++ b/samples/inputs/switches/disabled/wwwroot/index.html @@ -1,4 +1,4 @@ - + @@ -10,7 +10,7 @@ Samples | IgniteUI for Blazor | Infragistics - + @@ -20,7 +20,7 @@
An unhandled error has occurred. Reload - 🗙 + 🗙
diff --git a/samples/inputs/switches/enabled/App.razor b/samples/inputs/switches/enabled/App.razor new file mode 100644 index 0000000000..e52dda8098 --- /dev/null +++ b/samples/inputs/switches/enabled/App.razor @@ -0,0 +1,36 @@ +@using IgniteUI.Blazor.Controls + +
+
+ + Hover + Focused + Focused & Hover + + Enabled / On + + Power + + + Power + + + Power + + + Enabled / Off + + Power + + + Power + + + Power + +
+
+ +@code { + +} diff --git a/samples/inputs/switches/checking/BlazorClientApp.csproj b/samples/inputs/switches/enabled/BlazorClientApp.csproj similarity index 100% rename from samples/inputs/switches/checking/BlazorClientApp.csproj rename to samples/inputs/switches/enabled/BlazorClientApp.csproj diff --git a/samples/inputs/switches/checking/BlazorClientApp.sln b/samples/inputs/switches/enabled/BlazorClientApp.sln similarity index 100% rename from samples/inputs/switches/checking/BlazorClientApp.sln rename to samples/inputs/switches/enabled/BlazorClientApp.sln diff --git a/samples/inputs/switches/checking/Program.cs b/samples/inputs/switches/enabled/Program.cs similarity index 100% rename from samples/inputs/switches/checking/Program.cs rename to samples/inputs/switches/enabled/Program.cs diff --git a/samples/inputs/switches/checking/Properties/launchSettings.json b/samples/inputs/switches/enabled/Properties/launchSettings.json similarity index 100% rename from samples/inputs/switches/checking/Properties/launchSettings.json rename to samples/inputs/switches/enabled/Properties/launchSettings.json diff --git a/samples/inputs/switches/enabled/README.md b/samples/inputs/switches/enabled/README.md new file mode 100644 index 0000000000..bd657668f6 --- /dev/null +++ b/samples/inputs/switches/enabled/README.md @@ -0,0 +1,68 @@ + + + +This folder contains implementation of Blazor application with example of Enabled feature using [Switches](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component. + + + + + View Docs + + + View Code + + + Run Sample + + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Setup + +- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install) + +## Running App in Visual Studio 2022 + +NOTE: VS 2022 has better code highlighting and error detection than VS Code does. + +- open **Visual Studio 2022** as an administrator + +- open the **BlazorClientApp.sln** solution + +- right click solution and select **Restore NuGet Packages** menu item + +- click **Debug** menu and select **Start Debugging** or press **F5** key + + +## Running App in VS Code + +- open **VS Code** as an administrator + +- open this folder in **VS Code** + +- open a terminal window + +- to restore assemblies, run this command: +```dotnet restore``` + +- to run samples, run this command: +```dotnet watch run``` + +- wait for for message: +**Now listening on: http://localhost:4200** + +- open **http://localhost:4200** in your browser + + +## Resources + +- [Razor Component Models](https://www.codemag.com/article/1911052) +- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax) +- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components) diff --git a/samples/inputs/switches/checking/_Imports.razor b/samples/inputs/switches/enabled/_Imports.razor similarity index 100% rename from samples/inputs/switches/checking/_Imports.razor rename to samples/inputs/switches/enabled/_Imports.razor diff --git a/samples/inputs/switches/enabled/wwwroot/index.css b/samples/inputs/switches/enabled/wwwroot/index.css new file mode 100644 index 0000000000..379ecd447f --- /dev/null +++ b/samples/inputs/switches/enabled/wwwroot/index.css @@ -0,0 +1,33 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.container.sample { + display: flex; + place-content: center; + place-items: center; +} + +.states { + display: grid; + grid-template-columns: repeat(4, auto); + align-items: center; + gap: 32px; + + & :is(.states__column, .states__row) { + font: 500 14px / 24px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.1px; + color: var(--ig-gray-600); + } + + & .states__column { + text-align: center; + } + + & .states__row { + text-align: end; + } + + & igc-switch { + justify-self: center; + } +} diff --git a/samples/inputs/switches/enabled/wwwroot/index.html b/samples/inputs/switches/enabled/wwwroot/index.html new file mode 100644 index 0000000000..0e7269758a --- /dev/null +++ b/samples/inputs/switches/enabled/wwwroot/index.html @@ -0,0 +1,32 @@ + + + + + + + + + + Samples | IgniteUI for Blazor | Infragistics + + + + + + + + + + +
+ An unhandled error has occurred. + Reload + 🗙 +
+ + + + + + + diff --git a/samples/inputs/switches/label/App.razor b/samples/inputs/switches/label/App.razor deleted file mode 100644 index aa0d462284..0000000000 --- a/samples/inputs/switches/label/App.razor +++ /dev/null @@ -1,15 +0,0 @@ -@using IgniteUI.Blazor.Controls - - -
- Label -
- Label - -
-
- -@code { - - -} diff --git a/samples/inputs/switches/label/wwwroot/index.css b/samples/inputs/switches/label/wwwroot/index.css deleted file mode 100644 index 82faeec427..0000000000 --- a/samples/inputs/switches/label/wwwroot/index.css +++ /dev/null @@ -1,4 +0,0 @@ -/* -CSS styles are loaded from the shared CSS file located at: -https://dl.infragistics.com/x/css//samples/ -*/ \ No newline at end of file diff --git a/samples/inputs/switches/layout/App.razor b/samples/inputs/switches/layout/App.razor new file mode 100644 index 0000000000..36d8f0d77d --- /dev/null +++ b/samples/inputs/switches/layout/App.razor @@ -0,0 +1,22 @@ +@using IgniteUI.Blazor.Controls + +
+
+
+ Label Before + + Power + +
+
+ Label After + + Power + +
+
+
+ +@code { + +} diff --git a/samples/inputs/switches/label/BlazorClientApp.csproj b/samples/inputs/switches/layout/BlazorClientApp.csproj similarity index 100% rename from samples/inputs/switches/label/BlazorClientApp.csproj rename to samples/inputs/switches/layout/BlazorClientApp.csproj diff --git a/samples/inputs/switches/label/BlazorClientApp.sln b/samples/inputs/switches/layout/BlazorClientApp.sln similarity index 100% rename from samples/inputs/switches/label/BlazorClientApp.sln rename to samples/inputs/switches/layout/BlazorClientApp.sln diff --git a/samples/inputs/switches/label/Program.cs b/samples/inputs/switches/layout/Program.cs similarity index 100% rename from samples/inputs/switches/label/Program.cs rename to samples/inputs/switches/layout/Program.cs diff --git a/samples/inputs/switches/label/Properties/launchSettings.json b/samples/inputs/switches/layout/Properties/launchSettings.json similarity index 100% rename from samples/inputs/switches/label/Properties/launchSettings.json rename to samples/inputs/switches/layout/Properties/launchSettings.json diff --git a/samples/inputs/switches/label/README.md b/samples/inputs/switches/layout/README.md similarity index 89% rename from samples/inputs/switches/label/README.md rename to samples/inputs/switches/layout/README.md index 16ba85cef9..aa165eb783 100644 --- a/samples/inputs/switches/label/README.md +++ b/samples/inputs/switches/layout/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of Blazor application with example of Label feature using [Switches](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component. +This folder contains implementation of Blazor application with example of Layout feature using [Switches](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component. @@ -11,10 +11,10 @@ This folder contains implementation of Blazor application with example of Label View Code - + Run Sample - diff --git a/samples/inputs/switches/label/_Imports.razor b/samples/inputs/switches/layout/_Imports.razor similarity index 100% rename from samples/inputs/switches/label/_Imports.razor rename to samples/inputs/switches/layout/_Imports.razor diff --git a/samples/inputs/switches/layout/wwwroot/index.css b/samples/inputs/switches/layout/wwwroot/index.css new file mode 100644 index 0000000000..3b71591b7c --- /dev/null +++ b/samples/inputs/switches/layout/wwwroot/index.css @@ -0,0 +1,29 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.container.sample { + display: flex; + place-content: center; + place-items: center; +} + +.variants { + --variant-gap: 60px; + --label-gap: 30px; + + display: flex; + align-items: center; + gap: var(--variant-gap); + + & .variants__item { + display: flex; + align-items: center; + gap: var(--label-gap); + } + + & .variants__label { + font: 500 14px / 24px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.1px; + color: var(--ig-gray-600); + } +} diff --git a/samples/inputs/switches/label/wwwroot/index.html b/samples/inputs/switches/layout/wwwroot/index.html similarity index 92% rename from samples/inputs/switches/label/wwwroot/index.html rename to samples/inputs/switches/layout/wwwroot/index.html index 61d40ad005..52c7f4054f 100644 --- a/samples/inputs/switches/label/wwwroot/index.html +++ b/samples/inputs/switches/layout/wwwroot/index.html @@ -1,4 +1,4 @@ - + @@ -10,7 +10,7 @@ Samples | IgniteUI for Blazor | Infragistics - + @@ -20,7 +20,7 @@
An unhandled error has occurred. Reload - 🗙 + 🗙
diff --git a/samples/inputs/switches/overview/App.razor b/samples/inputs/switches/overview/App.razor index 5d1929b253..3a3d0dd285 100644 --- a/samples/inputs/switches/overview/App.razor +++ b/samples/inputs/switches/overview/App.razor @@ -1,11 +1,35 @@ @using IgniteUI.Blazor.Controls - -
- Switch +
+
+
Notifications
+
+ + + Push notifications + Deliver alerts to this device + + +
+
+ + + Weekly digest + Summary email every Monday + + +
+
+ + + SMS alerts + Unavailable on your plan + + +
+
@code { - } diff --git a/samples/inputs/switches/overview/wwwroot/index.css b/samples/inputs/switches/overview/wwwroot/index.css index 82faeec427..27ad3b9ae8 100644 --- a/samples/inputs/switches/overview/wwwroot/index.css +++ b/samples/inputs/switches/overview/wwwroot/index.css @@ -1,4 +1,59 @@ -/* -CSS styles are loaded from the shared CSS file located at: -https://dl.infragistics.com/x/css//samples/ -*/ \ No newline at end of file +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.container.sample { + display: flex; + place-content: center; + place-items: center; +} + +.notifications { + inline-size: 100%; + max-inline-size: 384px; + background: var(--ig-surface-500); + border-radius: 4px; + overflow: hidden; + + & .notifications__title { + margin: 0; + padding: 16px; + font: 400 10px / 16px "Titillium Web", sans-serif; + letter-spacing: 1.5px; + text-transform: uppercase; + color: var(--ig-primary-500); + } + + & .notifications__row { + padding-block: 12px; + padding-inline: 16px; + + & igc-switch { + display: block; + inline-size: 100%; + + &::part(base) { + inline-size: 100%; + justify-content: space-between; + gap: 16px; + } + } + } +} + +.option { + display: flex; + flex-direction: column; + gap: 2px; + text-align: start; + white-space: normal; + + & .option__label { + font-size: 16px; + color: var(--ig-gray-900); + } + + & .option__hint { + font-size: 13px; + color: var(--ig-gray-700); + } +} diff --git a/samples/inputs/switches/overview/wwwroot/index.html b/samples/inputs/switches/overview/wwwroot/index.html index 744d60f0a8..0e7269758a 100644 --- a/samples/inputs/switches/overview/wwwroot/index.html +++ b/samples/inputs/switches/overview/wwwroot/index.html @@ -1,4 +1,4 @@ - + @@ -10,7 +10,7 @@ Samples | IgniteUI for Blazor | Infragistics - + @@ -21,7 +21,7 @@
An unhandled error has occurred. Reload - 🗙 + 🗙
diff --git a/samples/inputs/switches/selected/App.razor b/samples/inputs/switches/selected/App.razor new file mode 100644 index 0000000000..a5e13a3c75 --- /dev/null +++ b/samples/inputs/switches/selected/App.razor @@ -0,0 +1,25 @@ +@using IgniteUI.Blazor.Controls + +
+
+ On + + Power + + + Power + + + Off + + Power + + + Power + +
+
+ +@code { + +} diff --git a/samples/inputs/switches/selected/BlazorClientApp.csproj b/samples/inputs/switches/selected/BlazorClientApp.csproj new file mode 100644 index 0000000000..25da28fb9a --- /dev/null +++ b/samples/inputs/switches/selected/BlazorClientApp.csproj @@ -0,0 +1,25 @@ + + + + net10.0 + 3.0 + Infragistics.Samples + Infragistics.Samples + + + + 1701;1702,IDE0028,BL0005,0219,CS1998 + + + + + + + + + + + + + + diff --git a/samples/inputs/switches/selected/BlazorClientApp.sln b/samples/inputs/switches/selected/BlazorClientApp.sln new file mode 100644 index 0000000000..8e75057474 --- /dev/null +++ b/samples/inputs/switches/selected/BlazorClientApp.sln @@ -0,0 +1,24 @@ +Microsoft Visual Studio Solution File, Format Version 12.00 +# Visual Studio Version 16 +VisualStudioVersion = 16.0.29613.14 +MinimumVisualStudioVersion = 10.0.40219.1 +Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorClientApp", "BlazorClientApp.csproj", "{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}" +EndProject +Global + GlobalSection(SolutionConfigurationPlatforms) = preSolution + Debug|Any CPU = Debug|Any CPU + Release|Any CPU = Release|Any CPU + EndGlobalSection + GlobalSection(ProjectConfigurationPlatforms) = postSolution + {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.Build.0 = Debug|Any CPU + {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.ActiveCfg = Release|Any CPU + {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.Build.0 = Release|Any CPU + EndGlobalSection + GlobalSection(SolutionProperties) = preSolution + HideSolutionNode = FALSE + EndGlobalSection + GlobalSection(ExtensibilityGlobals) = postSolution + SolutionGuid = {FC52AAC8-4488-40AE-9621-75F6BA744B18} + EndGlobalSection +EndGlobal diff --git a/samples/inputs/switches/selected/Program.cs b/samples/inputs/switches/selected/Program.cs new file mode 100644 index 0000000000..fdc54005c5 --- /dev/null +++ b/samples/inputs/switches/selected/Program.cs @@ -0,0 +1,26 @@ +using System; +using System.Net.Http; +using System.Collections.Generic; +using System.Threading.Tasks; +using System.Text; +using Microsoft.AspNetCore.Components.WebAssembly.Hosting; +using Microsoft.Extensions.Configuration; +using Microsoft.Extensions.DependencyInjection; +using Microsoft.Extensions.Logging; +using IgniteUI.Blazor.Controls; // for registering Ignite UI modules + +namespace Infragistics.Samples +{ + public class Program + { + public static async Task Main(string[] args) + { + var builder = WebAssemblyHostBuilder.CreateDefault(args); + builder.RootComponents.Add("app"); + builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); + // registering Ignite UI modules + builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule)); + await builder.Build().RunAsync(); + } + } +} diff --git a/samples/inputs/switches/selected/Properties/launchSettings.json b/samples/inputs/switches/selected/Properties/launchSettings.json new file mode 100644 index 0000000000..468407d277 --- /dev/null +++ b/samples/inputs/switches/selected/Properties/launchSettings.json @@ -0,0 +1,27 @@ +{ + "iisSettings": { + "windowsAuthentication": false, + "anonymousAuthentication": true, + "iisExpress": { + "applicationUrl": "http://localhost:4200", + "sslPort": 44385 + } + }, + "profiles": { + "IIS Express": { + "commandName": "IISExpress", + "launchBrowser": true, + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + }, + "BlazorClientApp": { + "commandName": "Project", + "launchBrowser": true, + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + }, + "applicationUrl": "https://localhost:5001;http://localhost:4200" + } + } +} diff --git a/samples/inputs/switches/checking/README.md b/samples/inputs/switches/selected/README.md similarity index 94% rename from samples/inputs/switches/checking/README.md rename to samples/inputs/switches/selected/README.md index 11a59d969e..ac5922e656 100644 --- a/samples/inputs/switches/checking/README.md +++ b/samples/inputs/switches/selected/README.md @@ -1,7 +1,7 @@ -This folder contains implementation of Blazor application with example of Checking feature using [Switches](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component. +This folder contains implementation of Blazor application with example of Selected feature using [Switches](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component. @@ -11,10 +11,10 @@ This folder contains implementation of Blazor application with example of Checki View Code - + Run Sample - diff --git a/samples/inputs/switches/selected/_Imports.razor b/samples/inputs/switches/selected/_Imports.razor new file mode 100644 index 0000000000..b4bad03986 --- /dev/null +++ b/samples/inputs/switches/selected/_Imports.razor @@ -0,0 +1,8 @@ +@using System.Net.Http +@using System.Net.Http.Json +@using Microsoft.AspNetCore.Components.Forms +@using Microsoft.AspNetCore.Components.Routing +@using Microsoft.AspNetCore.Components.Web +@using Microsoft.AspNetCore.Components.WebAssembly.Http +@using Microsoft.JSInterop +@using Infragistics.Samples diff --git a/samples/inputs/switches/selected/wwwroot/index.css b/samples/inputs/switches/selected/wwwroot/index.css new file mode 100644 index 0000000000..32f67af851 --- /dev/null +++ b/samples/inputs/switches/selected/wwwroot/index.css @@ -0,0 +1,26 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.container.sample { + display: flex; + place-content: center; + place-items: center; +} + +.states { + display: grid; + grid-template-columns: repeat(3, auto); + align-items: center; + gap: 32px; + + & .states__row { + text-align: end; + font: 500 14px / 24px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.1px; + color: var(--ig-gray-600); + } + + & .states__disabled { + margin-inline-start: 16px; + } +} diff --git a/samples/inputs/switches/checking/wwwroot/index.html b/samples/inputs/switches/selected/wwwroot/index.html similarity index 92% rename from samples/inputs/switches/checking/wwwroot/index.html rename to samples/inputs/switches/selected/wwwroot/index.html index 61d40ad005..52c7f4054f 100644 --- a/samples/inputs/switches/checking/wwwroot/index.html +++ b/samples/inputs/switches/selected/wwwroot/index.html @@ -1,4 +1,4 @@ - + @@ -10,7 +10,7 @@ Samples | IgniteUI for Blazor | Infragistics - + @@ -20,7 +20,7 @@
An unhandled error has occurred. Reload - 🗙 + 🗙
diff --git a/samples/inputs/switches/styling/App.razor b/samples/inputs/switches/styling/App.razor index 18910e85e2..83e9f9ddf4 100644 --- a/samples/inputs/switches/styling/App.razor +++ b/samples/inputs/switches/styling/App.razor @@ -1,11 +1,35 @@ - @using IgniteUI.Blazor.Controls - -
- Label +
+ @* a click on the switch bubbles up to the panel header, so only the open state has to be mirrored back *@ + +
+ Two-factor authentication + Extra sign-in verification +
+ + + Authenticator app + Security key + Backup codes + +
@code { + private bool IsOpen { get; set; } = true; + + private void OnOpened(IgbExpansionPanelComponentEventArgs args) + { + this.IsOpen = true; + } -} \ No newline at end of file + private void OnClosed(IgbExpansionPanelComponentEventArgs args) + { + this.IsOpen = false; + } +} diff --git a/samples/inputs/switches/styling/Program.cs b/samples/inputs/switches/styling/Program.cs index fdc54005c5..34ffa10228 100644 --- a/samples/inputs/switches/styling/Program.cs +++ b/samples/inputs/switches/styling/Program.cs @@ -19,7 +19,10 @@ public static async Task Main(string[] args) builder.RootComponents.Add("app"); builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); // registering Ignite UI modules - builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule)); + builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule), + typeof(IgbRadioModule), + typeof(IgbRadioGroupModule), + typeof(IgbExpansionPanelModule)); await builder.Build().RunAsync(); } } diff --git a/samples/inputs/switches/styling/wwwroot/index.css b/samples/inputs/switches/styling/wwwroot/index.css index 40f27bee5c..66e5527723 100644 --- a/samples/inputs/switches/styling/wwwroot/index.css +++ b/samples/inputs/switches/styling/wwwroot/index.css @@ -1,12 +1,100 @@ -/* -CSS styles are loaded from the shared CSS file located at: -https://dl.infragistics.com/x/css//samples/ -*/ - -igc-switch { - --thumb-on-color: white; - --thumb-off-color: var(--ig-success-500); - --track-on-color: var(--ig-success-500); /* Background color when checked */ - --track-off-color: white; /* Background color when unchecked */ - --track-on-hover-color: var(--ig-success-500); /* Background hover color when checked */ -} \ No newline at end of file +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.container.sample { + display: flex; + place-content: center; + place-items: center; +} + +.security { + display: block; + inline-size: 100%; + max-inline-size: 348px; + background: var(--ig-surface-500); + border: 1px solid var(--ig-gray-300); + border-radius: 16px; + box-shadow: 0 1px 3px rgb(0 0 0 / 12%); + overflow: hidden; + + &::part(header) { + padding: 16px; + padding-inline-end: 6px; + gap: 16px; + } + + &[open]::part(header) { + border-block-end: 1px solid var(--ig-gray-300); + } + + &::part(indicator) { + transform: none; + } + + &::part(content) { + padding-left: 5px; + } + + & igc-switch { + display: block; + inline-size: 60px; + block-size: 40px; + + &::part(base) { + inline-size: 60px; + block-size: 40px; + justify-content: center; + align-items: center; + overflow: visible; + } + + &::part(control) { + overflow: visible; + } + } + + & igc-radio-group { + display: flex; + flex-direction: column; + gap: 24px; + margin-inline-start: 0; + } + + & igc-radio { + font: 600 12px / 16px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.15px; + color: var(--ig-primary-900); + + &::part(label) { + padding-inline-start: 4px; + } + + &::part(control) { + transform: translateX(-4px); + --fill-color: var(--ig-primary-500); + --fill-color-border: var(--ig-primary-500); + --fill-color-hover: var(--ig-primary-500); + --fill-hover-border-color: var(--ig-primary-500); + } + } +} + +.option { + display: flex; + flex-direction: column; + gap: 2px; + text-align: start; + white-space: normal; + + & .option__label { + font: 600 16px / 24px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.15px; + color: var(--ig-gray-700); + } + + & .option__hint { + font: 500 14px / 24px "Aktiv Grotesk", sans-serif; + letter-spacing: 0.1px; + color: var(--ig-gray-600); + } +} diff --git a/samples/inputs/switches/styling/wwwroot/index.html b/samples/inputs/switches/styling/wwwroot/index.html index 744d60f0a8..0e7269758a 100644 --- a/samples/inputs/switches/styling/wwwroot/index.html +++ b/samples/inputs/switches/styling/wwwroot/index.html @@ -1,4 +1,4 @@ - + @@ -10,7 +10,7 @@ Samples | IgniteUI for Blazor | Infragistics - + @@ -21,7 +21,7 @@
An unhandled error has occurred. Reload - 🗙 + 🗙
diff --git a/samples/inputs/switches/tailwind-styling/App.razor b/samples/inputs/switches/tailwind-styling/App.razor new file mode 100644 index 0000000000..b94987078d --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/App.razor @@ -0,0 +1,47 @@ +@using IgniteUI.Blazor.Controls + +
+
+
+ Dashboard + + + + Dark mode + + +
+
+
Revenue overview
+

+ $84,290 this month, up 12% from July.
+ Your top-performing channel is Direct, driving 41% of total revenue. +

+
+
+
+ +@code { + private const string DarkModeIcon = ""; + + private IgbIcon iconRef; + + private bool IsDarkMode { get; set; } = true; + + protected override void OnAfterRender(bool firstRender) + { + if (firstRender && iconRef != null) + { + iconRef.EnsureReady().ContinueWith(_ => + { + iconRef.RegisterIconFromText("dark_mode", DarkModeIcon, "material"); + }); + } + } + + private void OnDarkModeChange() + { + this.IsDarkMode = !this.IsDarkMode; + } +} diff --git a/samples/inputs/switches/tailwind-styling/BlazorClientApp.csproj b/samples/inputs/switches/tailwind-styling/BlazorClientApp.csproj new file mode 100644 index 0000000000..25da28fb9a --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/BlazorClientApp.csproj @@ -0,0 +1,25 @@ + + + + net10.0 + 3.0 + Infragistics.Samples + Infragistics.Samples + + + + 1701;1702,IDE0028,BL0005,0219,CS1998 + + + + + + + + + + + + + + diff --git a/samples/inputs/switches/tailwind-styling/BlazorClientApp.sln b/samples/inputs/switches/tailwind-styling/BlazorClientApp.sln new file mode 100644 index 0000000000..8e75057474 --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/BlazorClientApp.sln @@ -0,0 +1,24 @@ +Microsoft Visual Studio Solution File, Format Version 12.00 +# Visual Studio Version 16 +VisualStudioVersion = 16.0.29613.14 +MinimumVisualStudioVersion = 10.0.40219.1 +Project("{9A19103F-16F7-4668-BE54-9A1E7A4F7556}") = "BlazorClientApp", "BlazorClientApp.csproj", "{F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}" +EndProject +Global + GlobalSection(SolutionConfigurationPlatforms) = preSolution + Debug|Any CPU = Debug|Any CPU + Release|Any CPU = Release|Any CPU + EndGlobalSection + GlobalSection(ProjectConfigurationPlatforms) = postSolution + {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.ActiveCfg = Debug|Any CPU + {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Debug|Any CPU.Build.0 = Debug|Any CPU + {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.ActiveCfg = Release|Any CPU + {F69CC3F0-BCD1-4CE6-9F39-CBED14E7FA78}.Release|Any CPU.Build.0 = Release|Any CPU + EndGlobalSection + GlobalSection(SolutionProperties) = preSolution + HideSolutionNode = FALSE + EndGlobalSection + GlobalSection(ExtensibilityGlobals) = postSolution + SolutionGuid = {FC52AAC8-4488-40AE-9621-75F6BA744B18} + EndGlobalSection +EndGlobal diff --git a/samples/inputs/switches/tailwind-styling/Program.cs b/samples/inputs/switches/tailwind-styling/Program.cs new file mode 100644 index 0000000000..3ff50f5c20 --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/Program.cs @@ -0,0 +1,27 @@ +using System; +using System.Net.Http; +using System.Collections.Generic; +using System.Threading.Tasks; +using System.Text; +using Microsoft.AspNetCore.Components.WebAssembly.Hosting; +using Microsoft.Extensions.Configuration; +using Microsoft.Extensions.DependencyInjection; +using Microsoft.Extensions.Logging; +using IgniteUI.Blazor.Controls; // for registering Ignite UI modules + +namespace Infragistics.Samples +{ + public class Program + { + public static async Task Main(string[] args) + { + var builder = WebAssemblyHostBuilder.CreateDefault(args); + builder.RootComponents.Add("app"); + builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); + // registering Ignite UI modules + builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule), + typeof(IgbIconModule)); + await builder.Build().RunAsync(); + } + } +} diff --git a/samples/inputs/switches/tailwind-styling/Properties/launchSettings.json b/samples/inputs/switches/tailwind-styling/Properties/launchSettings.json new file mode 100644 index 0000000000..468407d277 --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/Properties/launchSettings.json @@ -0,0 +1,27 @@ +{ + "iisSettings": { + "windowsAuthentication": false, + "anonymousAuthentication": true, + "iisExpress": { + "applicationUrl": "http://localhost:4200", + "sslPort": 44385 + } + }, + "profiles": { + "IIS Express": { + "commandName": "IISExpress", + "launchBrowser": true, + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + } + }, + "BlazorClientApp": { + "commandName": "Project", + "launchBrowser": true, + "environmentVariables": { + "ASPNETCORE_ENVIRONMENT": "Development" + }, + "applicationUrl": "https://localhost:5001;http://localhost:4200" + } + } +} diff --git a/samples/inputs/switches/tailwind-styling/README.md b/samples/inputs/switches/tailwind-styling/README.md new file mode 100644 index 0000000000..d8c33ee935 --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/README.md @@ -0,0 +1,68 @@ + + + +This folder contains implementation of Blazor application with example of Tailwind Styling feature using [Switches](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/general-getting-started.html) component. + + + + + View Docs + + + View Code + + + Run Sample + + + + + +## Branches + +> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-blazor-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-blazor-examples/tree/vnext) branch only when you want to contribute new samples to this repository. + +## Setup + +- instal **.NET SDK** from this [website](https://dotnet.microsoft.com/learn/aspnet/blazor-tutorial/install) + +## Running App in Visual Studio 2022 + +NOTE: VS 2022 has better code highlighting and error detection than VS Code does. + +- open **Visual Studio 2022** as an administrator + +- open the **BlazorClientApp.sln** solution + +- right click solution and select **Restore NuGet Packages** menu item + +- click **Debug** menu and select **Start Debugging** or press **F5** key + + +## Running App in VS Code + +- open **VS Code** as an administrator + +- open this folder in **VS Code** + +- open a terminal window + +- to restore assemblies, run this command: +```dotnet restore``` + +- to run samples, run this command: +```dotnet watch run``` + +- wait for for message: +**Now listening on: http://localhost:4200** + +- open **http://localhost:4200** in your browser + + +## Resources + +- [Razor Component Models](https://www.codemag.com/article/1911052) +- [Razor Syntax](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#razor-syntax) +- [Getting reference to components](https://docs.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-3.1#capture-references-to-components) diff --git a/samples/inputs/switches/tailwind-styling/_Imports.razor b/samples/inputs/switches/tailwind-styling/_Imports.razor new file mode 100644 index 0000000000..b4bad03986 --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/_Imports.razor @@ -0,0 +1,8 @@ +@using System.Net.Http +@using System.Net.Http.Json +@using Microsoft.AspNetCore.Components.Forms +@using Microsoft.AspNetCore.Components.Routing +@using Microsoft.AspNetCore.Components.Web +@using Microsoft.AspNetCore.Components.WebAssembly.Http +@using Microsoft.JSInterop +@using Infragistics.Samples diff --git a/samples/inputs/switches/tailwind-styling/package-lock.json b/samples/inputs/switches/tailwind-styling/package-lock.json new file mode 100644 index 0000000000..ec0bb677e2 --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/package-lock.json @@ -0,0 +1,1015 @@ +{ + "name": "blazor-switch-tailwind-styling", + "version": "1.0.0", + "lockfileVersion": 3, + "requires": true, + "packages": { + "": { + "name": "blazor-switch-tailwind-styling", + "version": "1.0.0", + "devDependencies": { + "tailwindcss": "^3.4.19" + } + }, + "node_modules/@alloc/quick-lru": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.3.0.tgz", + "integrity": "sha512-U4+70Pc5ZS9osnCBCE5Jha/ciHM+Yp+CNMNC/7HvYbNRk1Ldd+f7qO65W5qfhu/TCv+/ozljlXXe9Nj8419DMA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=10" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.3.13", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz", + "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/sourcemap-codec": "^1.5.0", + "@jridgewell/trace-mapping": "^0.3.24" + } + }, + "node_modules/@jridgewell/resolve-uri": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", + "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/sourcemap-codec": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.6.0.tgz", + "integrity": "sha512-T7jf+5zgsZHwNJ4lvQ7/aezbyk0nNX+zJVWpmHA7VYsEx7a7qr5Rg5IbtJFqkgze5Y2sruq1RUY8Q837Od7iFw==", + "dev": true, + "license": "MIT" + }, + "node_modules/@jridgewell/trace-mapping": { + "version": "0.3.31", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz", + "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/resolve-uri": "^3.1.0", + "@jridgewell/sourcemap-codec": "^1.4.14" + } + }, + "node_modules/@nodelib/fs.scandir": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", + "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==", + "dev": true, + "license": "MIT", + "dependencies": { + "@nodelib/fs.stat": "2.0.5", + "run-parallel": "^1.1.9" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.stat": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz", + "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 8" + } + }, + "node_modules/@nodelib/fs.walk": { + "version": "1.2.8", + "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz", + "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@nodelib/fs.scandir": "2.1.5", + "fastq": "^1.6.0" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/any-promise": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz", + "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==", + "dev": true, + "license": "MIT" + }, + "node_modules/anymatch": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz", + "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==", + "dev": true, + "license": "ISC", + "dependencies": { + "normalize-path": "^3.0.0", + "picomatch": "^2.0.4" + }, + "engines": { + "node": ">= 8" + } + }, + "node_modules/arg": { + "version": "5.0.2", + "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz", + "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==", + "dev": true, + "license": "MIT" + }, + "node_modules/binary-extensions": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz", + "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, + "node_modules/braces": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz", + "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==", + "dev": true, + "license": "MIT", + "dependencies": { + "fill-range": "^7.1.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/camelcase-css": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", + "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, + "node_modules/chokidar": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", + "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==", + "dev": true, + "license": "MIT", + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, + "node_modules/chokidar/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/commander": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, + "node_modules/cssesc": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", + "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==", + "dev": true, + "license": "MIT", + "bin": { + "cssesc": "bin/cssesc" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/didyoumean": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz", + "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==", + "dev": true, + "license": "Apache-2.0" + }, + "node_modules/dlv": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz", + "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==", + "dev": true, + "license": "MIT" + }, + "node_modules/es-errors": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz", + "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/fast-glob": { + "version": "3.3.3", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz", + "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==", + "dev": true, + "license": "MIT", + "dependencies": { + "@nodelib/fs.stat": "^2.0.2", + "@nodelib/fs.walk": "^1.2.3", + "glob-parent": "^5.1.2", + "merge2": "^1.3.0", + "micromatch": "^4.0.8" + }, + "engines": { + "node": ">=8.6.0" + } + }, + "node_modules/fast-glob/node_modules/glob-parent": { + "version": "5.1.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz", + "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/fastq": { + "version": "1.20.3", + "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.3.tgz", + "integrity": "sha512-XKv5nnLs6nLF71NgiKJLIZFLkPyIEuOselLG7ujZnGrRfQK8HpvY+WqKhAJUAdLomwVHErVS4LfxFlPq0/FTAw==", + "dev": true, + "license": "ISC", + "dependencies": { + "reusify": "^1.0.4" + } + }, + "node_modules/fill-range": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz", + "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==", + "dev": true, + "license": "MIT", + "dependencies": { + "to-regex-range": "^5.0.1" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, + "node_modules/function-bind": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", + "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==", + "dev": true, + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/glob-parent": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz", + "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==", + "dev": true, + "license": "ISC", + "dependencies": { + "is-glob": "^4.0.3" + }, + "engines": { + "node": ">=10.13.0" + } + }, + "node_modules/hasown": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.4.tgz", + "integrity": "sha512-T2UbfbBEF32wiepXIsMlTW9+dDYC6wMh/t/vYA4tuOMKqWz/n3vr1NFSxQiyP+zk2mXsoMA/i/7qV6LKut1t1A==", + "dev": true, + "license": "MIT", + "dependencies": { + "function-bind": "^1.1.2" + }, + "engines": { + "node": ">= 0.4" + } + }, + "node_modules/is-binary-path": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz", + "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==", + "dev": true, + "license": "MIT", + "dependencies": { + "binary-extensions": "^2.0.0" + }, + "engines": { + "node": ">=8" + } + }, + "node_modules/is-core-module": { + "version": "2.16.2", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.2.tgz", + "integrity": "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA==", + "dev": true, + "license": "MIT", + "dependencies": { + "hasown": "^2.0.3" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/is-extglob": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz", + "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-glob": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz", + "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-extglob": "^2.1.1" + }, + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/is-number": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", + "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.12.0" + } + }, + "node_modules/jiti": { + "version": "1.21.7", + "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz", + "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==", + "dev": true, + "license": "MIT", + "bin": { + "jiti": "bin/jiti.js" + } + }, + "node_modules/lilconfig": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz", + "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/sponsors/antonk52" + } + }, + "node_modules/lines-and-columns": { + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz", + "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==", + "dev": true, + "license": "MIT" + }, + "node_modules/merge2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz", + "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 8" + } + }, + "node_modules/micromatch": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz", + "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==", + "dev": true, + "license": "MIT", + "dependencies": { + "braces": "^3.0.3", + "picomatch": "^2.3.1" + }, + "engines": { + "node": ">=8.6" + } + }, + "node_modules/mz": { + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz", + "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==", + "dev": true, + "license": "MIT", + "dependencies": { + "any-promise": "^1.0.0", + "object-assign": "^4.0.1", + "thenify-all": "^1.0.0" + } + }, + "node_modules/nanoid": { + "version": "3.3.18", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.18.tgz", + "integrity": "sha512-DTg4MJbGMWkfi6VZFdNt2/caMbQy4Ou+Op/hJQvGEWcnVfoA1QA+xzRKAzw9jD6+GVOOeYr/mIcuDSdug6F6+w==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "bin": { + "nanoid": "bin/nanoid.cjs" + }, + "engines": { + "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1" + } + }, + "node_modules/normalize-path": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz", + "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/object-hash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz", + "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, + "node_modules/path-parse": { + "version": "1.0.7", + "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz", + "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==", + "dev": true, + "license": "MIT" + }, + "node_modules/picocolors": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz", + "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==", + "dev": true, + "license": "ISC" + }, + "node_modules/picomatch": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.2.tgz", + "integrity": "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=8.6" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/pirates": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz", + "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 6" + } + }, + "node_modules/postcss": { + "version": "8.5.26", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.26.tgz", + "integrity": "sha512-u82N74LFzG8ca+dD8puPnplTXoGH4fTPpVGuIbt36G3qvNlkvfD0lEAZSxaly3KX8TS/L1A1gsCEmvKmBcVbkQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "tidelift", + "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "nanoid": "^3.3.17", + "picocolors": "^1.1.1", + "source-map-js": "^1.2.1" + }, + "engines": { + "node": "^10 || ^12 || >=14" + } + }, + "node_modules/postcss-import": { + "version": "15.1.0", + "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz", + "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==", + "dev": true, + "license": "MIT", + "dependencies": { + "postcss-value-parser": "^4.0.0", + "read-cache": "^1.0.0", + "resolve": "^1.1.7" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "postcss": "^8.0.0" + } + }, + "node_modules/postcss-js": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz", + "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "camelcase-css": "^2.0.1" + }, + "engines": { + "node": "^12 || ^14 || >= 16" + }, + "peerDependencies": { + "postcss": "^8.4.21" + } + }, + "node_modules/postcss-load-config": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz", + "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "lilconfig": "^3.1.1" + }, + "engines": { + "node": ">= 18" + }, + "peerDependencies": { + "jiti": ">=1.21.0", + "postcss": ">=8.0.9", + "tsx": "^4.8.1", + "yaml": "^2.4.2" + }, + "peerDependenciesMeta": { + "jiti": { + "optional": true + }, + "postcss": { + "optional": true + }, + "tsx": { + "optional": true + }, + "yaml": { + "optional": true + } + } + }, + "node_modules/postcss-nested": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz", + "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==", + "dev": true, + "funding": [ + { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], + "license": "MIT", + "dependencies": { + "postcss-selector-parser": "^6.1.1" + }, + "engines": { + "node": ">=12.0" + }, + "peerDependencies": { + "postcss": "^8.2.14" + } + }, + "node_modules/postcss-selector-parser": { + "version": "6.1.4", + "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.4.tgz", + "integrity": "sha512-bIoJLOmjCO1S9XdY/DcnR5hJxvrDir1PbGChrzXG3vw0/FOliy/fA3dmdhQ441kah4gKv+TwckGzex6wNS5cnQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "cssesc": "^3.0.0", + "util-deprecate": "^1.0.2" + }, + "engines": { + "node": ">=4" + } + }, + "node_modules/postcss-value-parser": { + "version": "4.2.0", + "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz", + "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==", + "dev": true, + "license": "MIT" + }, + "node_modules/queue-microtask": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz", + "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT" + }, + "node_modules/read-cache": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.2.tgz", + "integrity": "sha512-/peqiBB/n07gQGLsWaHho3WfvUyRscw0gYTsEFMhrIe/nWLkYaf5SbKYjGYqtRV3aPwykJgF2VEMo1ac4bnsGA==", + "dev": true, + "license": "MIT" + }, + "node_modules/readdirp": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz", + "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==", + "dev": true, + "license": "MIT", + "dependencies": { + "picomatch": "^2.2.1" + }, + "engines": { + "node": ">=8.10.0" + } + }, + "node_modules/resolve": { + "version": "1.22.12", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.12.tgz", + "integrity": "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA==", + "dev": true, + "license": "MIT", + "dependencies": { + "es-errors": "^1.3.0", + "is-core-module": "^2.16.1", + "path-parse": "^1.0.7", + "supports-preserve-symlinks-flag": "^1.0.0" + }, + "bin": { + "resolve": "bin/resolve" + }, + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/reusify": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz", + "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==", + "dev": true, + "license": "MIT", + "engines": { + "iojs": ">=1.0.0", + "node": ">=0.10.0" + } + }, + "node_modules/run-parallel": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", + "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==", + "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/feross" + }, + { + "type": "patreon", + "url": "https://www.patreon.com/feross" + }, + { + "type": "consulting", + "url": "https://feross.org/support" + } + ], + "license": "MIT", + "dependencies": { + "queue-microtask": "^1.2.2" + } + }, + "node_modules/source-map-js": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz", + "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==", + "dev": true, + "license": "BSD-3-Clause", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/sucrase": { + "version": "3.35.1", + "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz", + "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==", + "dev": true, + "license": "MIT", + "dependencies": { + "@jridgewell/gen-mapping": "^0.3.2", + "commander": "^4.0.0", + "lines-and-columns": "^1.1.6", + "mz": "^2.7.0", + "pirates": "^4.0.1", + "tinyglobby": "^0.2.11", + "ts-interface-checker": "^0.1.9" + }, + "bin": { + "sucrase": "bin/sucrase", + "sucrase-node": "bin/sucrase-node" + }, + "engines": { + "node": ">=16 || 14 >=14.17" + } + }, + "node_modules/supports-preserve-symlinks-flag": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz", + "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">= 0.4" + }, + "funding": { + "url": "https://github.com/sponsors/ljharb" + } + }, + "node_modules/tailwindcss": { + "version": "3.4.19", + "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz", + "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "@alloc/quick-lru": "^5.2.0", + "arg": "^5.0.2", + "chokidar": "^3.6.0", + "didyoumean": "^1.2.2", + "dlv": "^1.1.3", + "fast-glob": "^3.3.2", + "glob-parent": "^6.0.2", + "is-glob": "^4.0.3", + "jiti": "^1.21.7", + "lilconfig": "^3.1.3", + "micromatch": "^4.0.8", + "normalize-path": "^3.0.0", + "object-hash": "^3.0.0", + "picocolors": "^1.1.1", + "postcss": "^8.4.47", + "postcss-import": "^15.1.0", + "postcss-js": "^4.0.1", + "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0", + "postcss-nested": "^6.2.0", + "postcss-selector-parser": "^6.1.2", + "resolve": "^1.22.8", + "sucrase": "^3.35.0" + }, + "bin": { + "tailwind": "lib/cli.js", + "tailwindcss": "lib/cli.js" + }, + "engines": { + "node": ">=14.0.0" + } + }, + "node_modules/thenify": { + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz", + "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==", + "dev": true, + "license": "MIT", + "dependencies": { + "any-promise": "^1.0.0" + } + }, + "node_modules/thenify-all": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz", + "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==", + "dev": true, + "license": "MIT", + "dependencies": { + "thenify": ">= 3.1.0 < 4" + }, + "engines": { + "node": ">=0.8" + } + }, + "node_modules/tinyglobby": { + "version": "0.2.17", + "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.17.tgz", + "integrity": "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g==", + "dev": true, + "license": "MIT", + "dependencies": { + "fdir": "^6.5.0", + "picomatch": "^4.0.4" + }, + "engines": { + "node": ">=12.0.0" + }, + "funding": { + "url": "https://github.com/sponsors/SuperchupuDev" + } + }, + "node_modules/tinyglobby/node_modules/fdir": { + "version": "6.5.0", + "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz", + "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12.0.0" + }, + "peerDependencies": { + "picomatch": "^3 || ^4" + }, + "peerDependenciesMeta": { + "picomatch": { + "optional": true + } + } + }, + "node_modules/tinyglobby/node_modules/picomatch": { + "version": "4.0.7", + "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.7.tgz", + "integrity": "sha512-qcJu88Q2IWqJsDD529JKMdwGm/dvInW4HvQnRwiH9JtihJvzGOscDtHE3x1pBKeUOTysQ8kVmLnJ2kJu7yhcGA==", + "dev": true, + "license": "MIT", + "engines": { + "node": ">=12" + }, + "funding": { + "url": "https://github.com/sponsors/jonschlinkert" + } + }, + "node_modules/to-regex-range": { + "version": "5.0.1", + "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz", + "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==", + "dev": true, + "license": "MIT", + "dependencies": { + "is-number": "^7.0.0" + }, + "engines": { + "node": ">=8.0" + } + }, + "node_modules/ts-interface-checker": { + "version": "0.1.13", + "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz", + "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==", + "dev": true, + "license": "Apache-2.0" + }, + "node_modules/util-deprecate": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", + "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==", + "dev": true, + "license": "MIT" + } + } +} diff --git a/samples/inputs/switches/tailwind-styling/package.json b/samples/inputs/switches/tailwind-styling/package.json new file mode 100644 index 0000000000..27f48c8698 --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/package.json @@ -0,0 +1,12 @@ +{ + "name": "blazor-switch-tailwind-styling", + "version": "1.0.0", + "private": true, + "scripts": { + "build:css": "tailwindcss -i ./src/index.css -o ./wwwroot/index.css --minify", + "watch:css": "tailwindcss -i ./src/index.css -o ./wwwroot/index.css --watch" + }, + "devDependencies": { + "tailwindcss": "^3.4.19" + } +} diff --git a/samples/inputs/switches/tailwind-styling/src/index.css b/samples/inputs/switches/tailwind-styling/src/index.css new file mode 100644 index 0000000000..8b8ffbfcfb --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/src/index.css @@ -0,0 +1,15 @@ +/* shared styles are loaded from: */ +/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +@tailwind utilities; + +.container.sample { + display: flex; + place-content: center; + place-items: center; +} + +.dashboard-card { + border-radius: 8px; + overflow: hidden; +} diff --git a/samples/inputs/switches/tailwind-styling/tailwind.config.cjs b/samples/inputs/switches/tailwind-styling/tailwind.config.cjs new file mode 100644 index 0000000000..b84753e4fc --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/tailwind.config.cjs @@ -0,0 +1,8 @@ +module.exports = { + content: ["./App.razor"], + safelist: ["bg-white", "bg-[#1A314A]"], + darkMode: "class", + corePlugins: { + preflight: false, + }, +}; diff --git a/samples/inputs/switches/tailwind-styling/wwwroot/index.css b/samples/inputs/switches/tailwind-styling/wwwroot/index.css new file mode 100644 index 0000000000..ac9660f251 --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/wwwroot/index.css @@ -0,0 +1 @@ +.m-0{margin:0}.mt-2{margin-top:.5rem}.flex{display:flex}.w-full{width:100%}.max-w-\[384px\]{max-width:384px}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:.5rem}.gap-4{gap:1rem}.border-b{border-bottom-width:1px}.border-gray-700{--tw-border-opacity:1;border-color:rgb(55 65 81/var(--tw-border-opacity,1))}.bg-\[\#1A314A\]{--tw-bg-opacity:1;background-color:rgb(26 49 74/var(--tw-bg-opacity,1))}.bg-gray-900{background-color:rgb(17 24 39/var(--tw-bg-opacity,1))}.bg-gray-900,.bg-white{--tw-bg-opacity:1}.bg-white{background-color:rgb(255 255 255/var(--tw-bg-opacity,1))}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.font-sans{font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji}.text-\[14px\]{font-size:14px}.text-\[16px\]{font-size:16px}.font-medium{font-weight:500}.font-semibold{font-weight:600}.leading-5{line-height:1.25rem}.leading-6{line-height:1.5rem}.tracking-\[0\.1px\]{letter-spacing:.1px}.tracking-\[0\.25px\]{letter-spacing:.25px}.text-\[\#E6F2FF\]{--tw-text-opacity:1;color:rgb(230 242 255/var(--tw-text-opacity,1))}.text-\[\#FFD08A\]{--tw-text-opacity:1;color:rgb(255 208 138/var(--tw-text-opacity,1))}.text-gray-700{--tw-text-opacity:1;color:rgb(55 65 81/var(--tw-text-opacity,1))}.text-gray-800{--tw-text-opacity:1;color:rgb(31 41 55/var(--tw-text-opacity,1))}.shadow-\[0_2px_6px_rgba\(0\2c 0\2c 0\2c 0\.18\)\]{--tw-shadow:0 2px 6px rgba(0,0,0,.18);--tw-shadow-colored:0 2px 6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.\[--size\:20px\]{--size:20px}.\[--thumb-off-color\:\#CBD5E1\]{--thumb-off-color:#cbd5e1}.\[--thumb-on-color\:\#FFFFFF\]{--thumb-on-color:#fff}.\[--track-off-color\:\#475569\]{--track-off-color:#475569}.\[--track-on-color\:\#3B82F6\]{--track-on-color:#3b82f6}.\[--track-on-hover-color\:\#2563EB\]{--track-on-hover-color:#2563eb}.container.sample{display:flex;place-content:center;place-items:center}.dashboard-card{border-radius:12px;overflow:hidden}.dark\:bg-\[\#1A314A\]:is(.dark *){--tw-bg-opacity:1;background-color:rgb(26 49 74/var(--tw-bg-opacity,1))}.dark\:text-gray-400:is(.dark *){--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.dark\:text-gray-50:is(.dark *){--tw-text-opacity:1;color:rgb(249 250 251/var(--tw-text-opacity,1))} \ No newline at end of file diff --git a/samples/inputs/switches/tailwind-styling/wwwroot/index.html b/samples/inputs/switches/tailwind-styling/wwwroot/index.html new file mode 100644 index 0000000000..0e7269758a --- /dev/null +++ b/samples/inputs/switches/tailwind-styling/wwwroot/index.html @@ -0,0 +1,32 @@ + + + + + + + + + + Samples | IgniteUI for Blazor | Infragistics + + + + + + + + + + +
+ An unhandled error has occurred. + Reload + 🗙 +
+ + + + + + + From e63f4c94244ed2ca99d67218244e2b45ae4e4e82 Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Fri, 18 Sep 2026 17:04:35 +0300 Subject: [PATCH 06/10] feat(*): adding handler for theming widget (#1294) * feat(*): adding handler for theming widget * fix(sample-theme): use configureTheme() for proper theme change * Potential fix for pull request finding 'CodeQL / Incorrect suffix check' Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> --------- Co-authored-by: Ivan Minchev Co-authored-by: Copilot Autofix powered by AI <62310815+github-advanced-security[bot]@users.noreply.github.com> --- .gitignore | 2 + .../IgBlazorSamples.Client/wwwroot/index.html | 9 +- .../wwwroot/sample-theme.js | 186 ++++++++++++++++++ 3 files changed, 195 insertions(+), 2 deletions(-) create mode 100644 browser/IgBlazorSamples.Client/wwwroot/sample-theme.js diff --git a/.gitignore b/.gitignore index 55126a438c..e59bc8a0f3 100644 --- a/.gitignore +++ b/.gitignore @@ -38,6 +38,8 @@ /browser/IgBlazorSamples.Server/Components/** /browser/IgBlazorSamples.Client/wwwroot/*.js /browser/IgBlazorSamples.Server/wwwroot/*.js +# Hand-written, unlike the generated sample scripts the rule above targets. +!/browser/IgBlazorSamples.Client/wwwroot/sample-theme.js /browser/IgBlazorSamples.Client/wwwroot/sb/*.js /browser/IgBlazorSamples.Server/wwwroot/sb/*.js /browser/IgBlazorSamples.Client/wwwroot/js/*bundle.js diff --git a/browser/IgBlazorSamples.Client/wwwroot/index.html b/browser/IgBlazorSamples.Client/wwwroot/index.html index dfb2463b08..7e37200185 100644 --- a/browser/IgBlazorSamples.Client/wwwroot/index.html +++ b/browser/IgBlazorSamples.Client/wwwroot/index.html @@ -47,8 +47,10 @@ - - + + + + @@ -243,6 +245,9 @@ + + + diff --git a/browser/IgBlazorSamples.Client/wwwroot/sample-theme.js b/browser/IgBlazorSamples.Client/wwwroot/sample-theme.js new file mode 100644 index 0000000000..06c720b235 --- /dev/null +++ b/browser/IgBlazorSamples.Client/wwwroot/sample-theme.js @@ -0,0 +1,186 @@ +/** + * sample-theme.js + * + * Lets the docs site re-theme this samples browser while it is embedded in a + * docs iframe. + * + * The docs ThemingWidget dispatches `igd-theme-change`; the Sample widget + * bridges that to `postMessage({ type: 'igd-sample-theme', theme, mode })` on + * the frame, and re-posts the current selection on every iframe `load`. Here we + * validate the sender and repoint the Ignite UI theme elements. + * + * Dormant unless a trusted docs host asks for a theme. + */ +(function () { + 'use strict'; + + var MESSAGE_TYPE = 'igd-sample-theme'; + var LINK_ATTR = 'data-igd-theme-link'; + var DARK_QUERY = '(prefers-color-scheme: dark)'; + + // igniteui-webcomponents' configureTheme() re-adopts each Shadow DOM + // component's theme stylesheet; it's just a wrapper around this global + // event, which is what we dispatch directly since this script has no + // module import into that package. + var THEME_CHANGE_EVENT = 'igc-change-theme'; + + var THEMES = ['material', 'fluent', 'bootstrap', 'indigo']; + + // Keyed by the LINK_ATTR value on each stylesheet in index.html. Hrefs stay + // relative so they keep resolving against the deployed . + var HREFS = { + components: function (mode, theme) { + return '_content/IgniteUI.Blazor/themes/' + mode + '/' + theme + '.css'; + }, + grid: function (mode, theme) { + return '_content/IgniteUI.Blazor/themes/grid/' + mode + '/' + theme + '.css'; + } + }; + + // Newest per key; swaps chain from here so rapid switching stays ordered. + var links = {}; + var selected = null; + + function isTrustedOrigin(origin) { + if (origin === window.location.origin) { + return true; + } + + var hostname; + try { + hostname = new URL(origin).hostname; + } catch (e) { + return false; + } + + if (hostname === 'localhost' || hostname === '127.0.0.1') { + return true; + } + return hostname === 'infragistics.com' || + hostname.endsWith('.infragistics.com'); + } + + function parseMessage(data) { + if (!data || typeof data !== 'object') { + return null; + } + if (data.type !== MESSAGE_TYPE && data.event !== MESSAGE_TYPE) { + return null; + } + + var theme = String(data.theme || data.themeName || '').toLowerCase(); + if (THEMES.indexOf(theme) === -1) { + return null; + } + + var rawMode = String(data.mode || 'light').toLowerCase(); + var mode = (rawMode === 'dark' || rawMode === 'system') ? rawMode : 'light'; + + return { theme: theme, mode: mode }; + } + + function resolveMode(mode) { + if (mode === 'light' || mode === 'dark') { + return mode; + } + return window.matchMedia && window.matchMedia(DARK_QUERY).matches ? 'dark' : 'light'; + } + + // Drops every stylesheet for this key except the newest, so an interrupted + // swap can't leave a stale theme behind. + function prune(key) { + var all = document.head.querySelectorAll('link[' + LINK_ATTR + '="' + key + '"]'); + for (var i = 0; i < all.length; i++) { + if (all[i] !== links[key] && all[i].parentNode) { + all[i].parentNode.removeChild(all[i]); + } + } + } + + function swap(key, href) { + var current = links[key]; + if (!current || current.getAttribute('href') === href) { + return; + } + + // The replacement is loaded alongside the outgoing sheet and only takes + // over once ready, so the sample never renders unstyled mid-swap. + var next = current.cloneNode(false); + next.setAttribute('href', href); + + var done = function () { + next.removeEventListener('load', done); + next.removeEventListener('error', done); + prune(key); + }; + next.addEventListener('load', done); + next.addEventListener('error', done); + + current.parentNode.insertBefore(next, current.nextSibling); + links[key] = next; + } + + function applyTheme(theme, mode) { + var resolved = resolveMode(mode); + + for (var key in HREFS) { + if (Object.prototype.hasOwnProperty.call(HREFS, key)) { + swap(key, HREFS[key](resolved, theme)); + } + } + + var root = document.documentElement; + root.setAttribute('data-igd-theme', theme); + root.setAttribute('data-igd-mode', resolved); + root.style.colorScheme = resolved; + + // Tell the Shadow DOM / Lit components to re-adopt their per-theme + // stylesheet now that the global CSS is in place. + window.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, { + detail: { theme: theme, themeVariant: resolved } + })); + } + + function onMessage(event) { + // Only the embedding docs page may drive the theme. + if (event.source !== window.parent || !isTrustedOrigin(event.origin)) { + return; + } + + var next = parseMessage(event.data); + if (!next) { + return; + } + if (selected && selected.theme === next.theme && selected.mode === next.mode) { + return; + } + + selected = next; + applyTheme(next.theme, next.mode); + } + + function watchSystemMode() { + var query = window.matchMedia && window.matchMedia(DARK_QUERY); + if (!query || !query.addEventListener) { + return; + } + query.addEventListener('change', function () { + if (selected && selected.mode === 'system') { + applyTheme(selected.theme, selected.mode); + } + }); + } + + if (window.parent === window) { + return; + } + + for (var key in HREFS) { + if (Object.prototype.hasOwnProperty.call(HREFS, key)) { + links[key] = document.head.querySelector('link[' + LINK_ATTR + '="' + key + '"]'); + } + } + + window.addEventListener('message', onMessage); + watchSystemMode(); +})(); From c5539ff1cfb2a14b41c5ee530c58268773080f5c Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Wed, 23 Sep 2026 12:33:55 +0300 Subject: [PATCH 07/10] fix(accordion): add border to accordion for better visibility --- samples/layouts/accordion/customization/wwwroot/index.css | 6 ++++++ samples/layouts/accordion/nested-scenario/wwwroot/index.css | 6 ++++++ samples/layouts/accordion/overview/wwwroot/index.css | 6 ++++++ .../accordion/programmatic-expansion/wwwroot/index.css | 6 ++++++ samples/layouts/accordion/styling/wwwroot/index.css | 6 ++++++ samples/layouts/accordion/tailwind-styling/App.razor | 2 +- .../layouts/accordion/tailwind-styling/wwwroot/index.css | 2 +- 7 files changed, 32 insertions(+), 2 deletions(-) diff --git a/samples/layouts/accordion/customization/wwwroot/index.css b/samples/layouts/accordion/customization/wwwroot/index.css index 02ab94dc33..af3552c32b 100644 --- a/samples/layouts/accordion/customization/wwwroot/index.css +++ b/samples/layouts/accordion/customization/wwwroot/index.css @@ -11,6 +11,12 @@ box-sizing: border-box; } +.accordion-sample igc-accordion { + display: block; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; +} + .panel-description { margin: 0 0 16px; color: var(--ig-gray-700); diff --git a/samples/layouts/accordion/nested-scenario/wwwroot/index.css b/samples/layouts/accordion/nested-scenario/wwwroot/index.css index a18c6d1ffb..091f1b043c 100644 --- a/samples/layouts/accordion/nested-scenario/wwwroot/index.css +++ b/samples/layouts/accordion/nested-scenario/wwwroot/index.css @@ -16,3 +16,9 @@ justify-content: flex-end; margin-bottom: 12px; } + +.accordion-sample igc-accordion { + display: block; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; +} diff --git a/samples/layouts/accordion/overview/wwwroot/index.css b/samples/layouts/accordion/overview/wwwroot/index.css index ba0bbdd4d1..f6a5352f94 100644 --- a/samples/layouts/accordion/overview/wwwroot/index.css +++ b/samples/layouts/accordion/overview/wwwroot/index.css @@ -16,3 +16,9 @@ justify-content: flex-end; margin-bottom: 12px; } + +.accordion-sample igc-accordion { + display: block; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; +} diff --git a/samples/layouts/accordion/programmatic-expansion/wwwroot/index.css b/samples/layouts/accordion/programmatic-expansion/wwwroot/index.css index 6245c0186f..0d434aede3 100644 --- a/samples/layouts/accordion/programmatic-expansion/wwwroot/index.css +++ b/samples/layouts/accordion/programmatic-expansion/wwwroot/index.css @@ -21,3 +21,9 @@ .action-button { min-width: 96px; } + +.accordion-sample igc-accordion { + display: block; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; +} diff --git a/samples/layouts/accordion/styling/wwwroot/index.css b/samples/layouts/accordion/styling/wwwroot/index.css index e13f3a298b..543269784c 100644 --- a/samples/layouts/accordion/styling/wwwroot/index.css +++ b/samples/layouts/accordion/styling/wwwroot/index.css @@ -11,6 +11,12 @@ box-sizing: border-box; } +.accordion-sample igc-accordion { + display: block; + border: 1px solid var(--ig-gray-300); + border-radius: 4px; +} + .accordion-sample igc-expansion-panel { background-color: var(--ig-gray-50); color: var(--ig-gray-900); diff --git a/samples/layouts/accordion/tailwind-styling/App.razor b/samples/layouts/accordion/tailwind-styling/App.razor index 6b0e4d2eb5..68f32d4072 100644 --- a/samples/layouts/accordion/tailwind-styling/App.razor +++ b/samples/layouts/accordion/tailwind-styling/App.razor @@ -2,7 +2,7 @@
- + Getting Started Setup and onboarding diff --git a/samples/layouts/accordion/tailwind-styling/wwwroot/index.css b/samples/layouts/accordion/tailwind-styling/wwwroot/index.css index 24e04e62dd..87e6754272 100644 --- a/samples/layouts/accordion/tailwind-styling/wwwroot/index.css +++ b/samples/layouts/accordion/tailwind-styling/wwwroot/index.css @@ -1 +1 @@ -.mx-auto{margin-left:auto;margin-right:auto}.box-border{box-sizing:border-box}.w-\[min\(720px\2c 100\%\)\]{width:min(720px,100%)}.rounded{border-radius:.25rem}.bg-\[var\(--ig-gray-50\)\]{background-color:var(--ig-gray-50)}.p-6{padding:1.5rem}.text-\[var\(--ig-gray-900\)\]{color:var(--ig-gray-900)}.accordion-tailwind-sample{width:100%;height:100%;overflow-y:auto}.\[\&\:\:part\(content\)\]\:text-\[var\(--ig-gray-700\)\]::part(content){color:var(--ig-gray-700)}.\[\&\:\:part\(header\)\]\:bg-\[var\(--ig-gray-100\)\]::part(header){background-color:var(--ig-gray-100)}.\[\&\:\:part\(indicator\)\]\:text-\[var\(--ig-primary-500\)\]::part(indicator){color:var(--ig-primary-500)}.\[\&\:\:part\(title\)\]\:font-semibold::part(title){font-weight:600}.\[\&\:\:part\(title\)\]\:text-\[var\(--ig-gray-900\)\]::part(title){color:var(--ig-gray-900)}.\[\&\[open\]\:\:part\(header\)\]\:bg-\[var\(--ig-primary-50\)\][open]::part(header){background-color:var(--ig-primary-50)}.\[\&\[open\]\:\:part\(subtitle\)\]\:text-\[var\(--ig-primary-700\)\][open]::part(subtitle){color:var(--ig-primary-700)}.\[\&\[open\]\:\:part\(title\)\]\:text-\[var\(--ig-primary-700\)\][open]::part(title){color:var(--ig-primary-700)} \ No newline at end of file +.mx-auto{margin-left:auto;margin-right:auto}.box-border{box-sizing:border-box}.block{display:block}.w-\[min\(720px\2c 100\%\)\]{width:min(720px,100%)}.rounded{border-radius:.25rem}.border{border-width:1px}.border-\[var\(--ig-gray-300\)\]{border-color:var(--ig-gray-300)}.bg-\[var\(--ig-gray-50\)\]{background-color:var(--ig-gray-50)}.p-6{padding:1.5rem}.text-\[var\(--ig-gray-900\)\]{color:var(--ig-gray-900)}.accordion-tailwind-sample{width:100%;height:100%;overflow-y:auto}.\[\&\:\:part\(content\)\]\:text-\[var\(--ig-gray-700\)\]::part(content){color:var(--ig-gray-700)}.\[\&\:\:part\(header\)\]\:bg-\[var\(--ig-gray-100\)\]::part(header){background-color:var(--ig-gray-100)}.\[\&\:\:part\(indicator\)\]\:text-\[var\(--ig-primary-500\)\]::part(indicator){color:var(--ig-primary-500)}.\[\&\:\:part\(title\)\]\:font-semibold::part(title){font-weight:600}.\[\&\:\:part\(title\)\]\:text-\[var\(--ig-gray-900\)\]::part(title){color:var(--ig-gray-900)}.\[\&\[open\]\:\:part\(header\)\]\:bg-\[var\(--ig-primary-50\)\][open]::part(header){background-color:var(--ig-primary-50)}.\[\&\[open\]\:\:part\(subtitle\)\]\:text-\[var\(--ig-primary-700\)\][open]::part(subtitle){color:var(--ig-primary-700)}.\[\&\[open\]\:\:part\(title\)\]\:text-\[var\(--ig-primary-700\)\][open]::part(title){color:var(--ig-primary-700)} \ No newline at end of file From 7c5dc4c491c5bf819f6b4d0580d9f6f30d80f3f4 Mon Sep 17 00:00:00 2001 From: Hristo Hristov <57346540+Hristo313@users.noreply.github.com> Date: Thu, 24 Sep 2026 17:11:40 +0300 Subject: [PATCH 08/10] fix(button-group): update styling content (#1301) * fix(button-group): update styling content * fix(samples): update styling * fix(button-group): update samples to use bootstrap theme * fix(badge): update badge samples to bootstrap and fix css * fix(button): update overview style for material --- samples/inputs/badge/dot/App.razor | 1 + samples/inputs/badge/dot/wwwroot/index.css | 20 +-- samples/inputs/badge/icon/App.razor | 1 + samples/inputs/badge/icon/wwwroot/index.css | 22 +-- samples/inputs/badge/outlined/App.razor | 52 +++---- samples/inputs/badge/outlined/Program.cs | 2 + .../inputs/badge/outlined/wwwroot/index.css | 131 ++++++++---------- samples/inputs/badge/overview/App.razor | 1 + .../inputs/badge/overview/wwwroot/index.css | 7 +- samples/inputs/badge/shape/App.razor | 7 +- samples/inputs/badge/shape/wwwroot/index.css | 28 ++-- samples/inputs/badge/size/App.razor | 7 +- samples/inputs/badge/size/wwwroot/index.css | 28 ++-- samples/inputs/badge/styling/App.razor | 1 + .../inputs/badge/styling/wwwroot/index.css | 6 +- .../inputs/badge/tailwind-styling/App.razor | 1 + .../badge/tailwind-styling/wwwroot/index.css | 4 +- samples/inputs/badge/type/App.razor | 1 + samples/inputs/badge/type/wwwroot/index.css | 2 +- samples/inputs/badge/variants/App.razor | 7 +- .../inputs/badge/variants/wwwroot/index.css | 47 ++----- .../inputs/button-group/alignment/App.razor | 6 +- .../button-group/alignment/wwwroot/index.css | 44 +++--- .../button-group/alignment/wwwroot/index.html | 2 +- .../button-group/custom-toggle/App.razor | 4 +- .../custom-toggle/wwwroot/index.css | 16 +-- .../button-group/interaction-states/App.razor | 19 +-- .../interaction-states/wwwroot/index.css | 100 ++++++++----- samples/inputs/button-group/layout/App.razor | 4 +- .../button-group/layout/wwwroot/index.css | 26 ++-- .../inputs/button-group/overview/App.razor | 28 ++-- .../button-group/overview/wwwroot/index.css | 47 +++---- .../button-group/overview/wwwroot/index.html | 2 +- .../inputs/button-group/selection/App.razor | 66 ++------- .../button-group/selection/wwwroot/index.css | 65 +++++---- .../button-group/selection/wwwroot/index.html | 2 +- samples/inputs/button-group/size/App.razor | 42 +++--- .../button-group/size/wwwroot/index.css | 67 +++++---- .../button-group/size/wwwroot/index.html | 2 +- samples/inputs/button-group/states/App.razor | 40 +++--- .../button-group/states/wwwroot/index.css | 88 +++++++++--- samples/inputs/button-group/styling/App.razor | 4 +- .../button-group/styling/wwwroot/index.css | 51 +++---- .../button-group/styling/wwwroot/index.html | 2 +- .../button-group/tailwind-styling/App.razor | 4 +- .../tailwind-styling/wwwroot/index.css | 26 ++-- .../inputs/button/overview/wwwroot/index.css | 15 +- 47 files changed, 565 insertions(+), 583 deletions(-) diff --git a/samples/inputs/badge/dot/App.razor b/samples/inputs/badge/dot/App.razor index 45bebcd5d1..07cb06375e 100644 --- a/samples/inputs/badge/dot/App.razor +++ b/samples/inputs/badge/dot/App.razor @@ -1,5 +1,6 @@ @using IgniteUI.Blazor.Controls +
diff --git a/samples/inputs/badge/dot/wwwroot/index.css b/samples/inputs/badge/dot/wwwroot/index.css index be8cfd5503..892fc2ebb6 100644 --- a/samples/inputs/badge/dot/wwwroot/index.css +++ b/samples/inputs/badge/dot/wwwroot/index.css @@ -89,16 +89,6 @@ igc-avatar { width: 12px; } -.row-indicator igc-badge, -.nav-icon igc-badge { - --ig-badge-background-color: #0057A9; -} - -.row-indicator igc-badge::part(base), -.nav-icon igc-badge::part(base) { - background-color: #0057A9; -} - .row-title { flex: 1; } @@ -109,7 +99,7 @@ igc-avatar { } .row-time.unread { - color: #0057A9; + color: var(--ig-gray-900); font-weight: 600; } @@ -133,7 +123,7 @@ igc-avatar { align-items: center; gap: 4px; min-width: 56px; - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; @@ -143,12 +133,12 @@ igc-avatar { } .nav-item.active { - color: #0057A9; + color: var(--ig-primary-800); } .nav-item.active igc-icon { - color: #0057A9; - fill: #0057A9; + color: var(--ig-primary-800);; + fill: var(--ig-primary-800); } .nav-icon { diff --git a/samples/inputs/badge/icon/App.razor b/samples/inputs/badge/icon/App.razor index 86a106336b..d9aff48e7a 100644 --- a/samples/inputs/badge/icon/App.razor +++ b/samples/inputs/badge/icon/App.razor @@ -1,5 +1,6 @@ @using IgniteUI.Blazor.Controls +
@foreach (var item in Badges) { diff --git a/samples/inputs/badge/icon/wwwroot/index.css b/samples/inputs/badge/icon/wwwroot/index.css index 291aabb8d3..ab331c561e 100644 --- a/samples/inputs/badge/icon/wwwroot/index.css +++ b/samples/inputs/badge/icon/wwwroot/index.css @@ -5,30 +5,14 @@ https://dl.infragistics.com/x/css//samples/ igc-avatar { --size: 40px; - --ig-avatar-background: var(--ig-gray-700); - --ig-avatar-color: var(--ig-gray-50); -} - -igc-badge[variant="info"] { - --ig-badge-background-color: #0057A9; -} - -igc-badge[variant="info"]::part(base) { - background-color: #0057A9; + --ig-avatar-background: var(--ig-gray-400); + --ig-avatar-color: var(--ig-gray-800); } igc-badge igc-icon { color: var(--ig-gray-50); } -igc-badge.badge-settings[variant="info"] { - --ig-badge-background-color: #0070BA; -} - -igc-badge.badge-settings[variant="info"]::part(base) { - background-color: #0070BA; -} - .badge-star igc-icon { color: var(--ig-gray-900); } @@ -73,7 +57,7 @@ igc-badge.badge-settings[variant="info"]::part(base) { } .badge-icon-item span { - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; diff --git a/samples/inputs/badge/outlined/App.razor b/samples/inputs/badge/outlined/App.razor index 37b0bf61b1..69aa796f91 100644 --- a/samples/inputs/badge/outlined/App.razor +++ b/samples/inputs/badge/outlined/App.razor @@ -1,11 +1,12 @@ @using IgniteUI.Blazor.Controls +
- 23 + 23
@@ -13,28 +14,19 @@
-
-
-
- 1 -
- Orders -
- -
-
- 2 - -
- Payment -
- -
-
- 3 -
- Shipping -
+
+ + + Orders + + + Payment + + + Shipping + + +
@@ -43,16 +35,18 @@ private const string CloseIcon = ""; private IgbIcon iconRef; - protected override void OnAfterRender(bool firstRender) { - if (firstRender && iconRef != null) + if (firstRender) { - iconRef.EnsureReady().ContinueWith(_ => + if (iconRef != null) { - iconRef.RegisterIconFromText("favorite_border", FavoriteBorderIcon, "material"); - iconRef.RegisterIconFromText("close", CloseIcon, "material"); - }); + iconRef.EnsureReady().ContinueWith(_ => + { + iconRef.RegisterIconFromText("favorite_border", FavoriteBorderIcon, "material"); + iconRef.RegisterIconFromText("close", CloseIcon, "material"); + }); + } } } } diff --git a/samples/inputs/badge/outlined/Program.cs b/samples/inputs/badge/outlined/Program.cs index be32994226..9962699cbb 100644 --- a/samples/inputs/badge/outlined/Program.cs +++ b/samples/inputs/badge/outlined/Program.cs @@ -22,6 +22,8 @@ public static async Task Main(string[] args) builder.Services.AddIgniteUIBlazor(typeof(IgbBadgeModule)); builder.Services.AddIgniteUIBlazor(typeof(IgbAvatarModule)); builder.Services.AddIgniteUIBlazor(typeof(IgbIconModule)); + builder.Services.AddIgniteUIBlazor(typeof(IgbStepperModule)); + builder.Services.AddIgniteUIBlazor(typeof(IgbStepModule)); await builder.Build().RunAsync(); } } diff --git a/samples/inputs/badge/outlined/wwwroot/index.css b/samples/inputs/badge/outlined/wwwroot/index.css index 6e9bc4fb97..bff9636622 100644 --- a/samples/inputs/badge/outlined/wwwroot/index.css +++ b/samples/inputs/badge/outlined/wwwroot/index.css @@ -5,12 +5,18 @@ https://dl.infragistics.com/x/css//samples/ igc-badge { --ig-size: var(--ig-size-small); + --ig-badge-text-color: var(--ig-gray-50); +} + +igc-badge igc-icon { + color: var(--ig-gray-50); + fill: var(--ig-gray-50); } igc-avatar { --size: 40px; - --ig-avatar-background: var(--ig-gray-700); - --ig-avatar-color: var(--ig-gray-50); + --ig-avatar-background: var(--ig-gray-400); + --ig-avatar-color: var(--ig-gray-800); } .outlined-example igc-avatar igc-icon { @@ -23,12 +29,6 @@ igc-avatar { inset-inline-end: -6px; } -.step-marker igc-badge { - position: absolute; - inset-block-start: -1px; - inset-inline-end: -2px; -} - .outlined-example igc-badge { position: absolute; inset-block-start: -6px; @@ -43,9 +43,12 @@ igc-avatar { display: flex; align-items: center; justify-content: center; - flex-wrap: wrap; + flex-wrap: nowrap; gap: 60px; - min-height: 6rem; + overflow: hidden; + padding-block-start: 15px; + min-height: 0; + box-sizing: border-box; } .outlined-example { @@ -68,80 +71,68 @@ igc-avatar { color: var(--ig-gray-800); } -.badge-info-blue { - --ig-badge-background-color: #0057A9; -} - -.badge-info-blue::part(base) { - background-color: #0057A9; -} - -.payment-dot-blue { - --ig-badge-background-color: #0057A9; - --ig-badge-dot-size: 0.5rem; -} - -.payment-dot-blue::part(base) { - background-color: #0057A9; +.steps { + width: 316px; +} + +.steps, +.steps igc-step { + --indicator-size: 24px; + --ig-stepper-step-separator-style: dashed; + --ig-stepper-step-separator-color: var(--ig-gray-400); + --border-radius-indicator: 50%; + --indicator-background: var(--ig-gray-200); + --indicator-color: var(--ig-gray-800); + --indicator-outline: var(--ig-gray-200); + --separator-size: 1px; + --separator-type: solid; + --step-separator-style: dashed; + --complete-indicator-background: var(--ig-gray-900); + --complete-indicator-color: var(--ig-gray-50); + --complete-step-separator-style: solid; + --complete-step-separator-color: var(--ig-gray-900); +} + +.steps igc-step::part(indicator) { + border-radius: 50%; + background-color: var(--ig-gray-200); + color: var(--ig-gray-800); } -igc-badge::part(base), -igc-badge igc-icon { +.steps igc-step[complete]::part(indicator) { + background-color: var(--ig-gray-900); color: var(--ig-gray-50); } -igc-badge igc-icon { - fill: var(--ig-gray-50); +.steps igc-step[active]::part(indicator) { + background-color: var(--ig-primary-500); + color: var(--ig-gray-50); } -.steps { - display: flex; - align-items: flex-start; - gap: 8px; +.steps igc-step::part(separator) { + border-block-start-style: dashed; + border-block-start-color: var(--ig-gray-400); } -.step { - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; +.steps igc-step[complete]::part(separator) { + border-block-start-style: solid; + border-block-start-color: var(--ig-gray-900); } -.step-marker { +.stepper-wrapper { position: relative; - display: flex; -} - -.step-circle { - width: 26px; - height: 26px; - background: var(--ig-gray-900); - color: var(--ig-gray-50); - font-size: 12px; -} - -.step-circle.pending { - background: var(--ig-gray-200); - color: var(--ig-gray-800); + align-self: center; + top: 18px } -.step-connector { - width: 56px; - margin-block-start: 13px; - border-block-start: 1px solid var(--ig-gray-900); -} - -.step-connector.pending { - border-block-start-style: dashed; - border-block-start-color: var(--ig-gray-400); +.flagged-badge { + position: absolute; + inset-block-start: 8px; + inset-inline-start: calc(50% - 1px); + transform: scale(1.20); + transform-origin: center; } -.step-label { - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; +.steps::part(content) { + display: none; } diff --git a/samples/inputs/badge/overview/App.razor b/samples/inputs/badge/overview/App.razor index 748b93d304..aea536d91c 100644 --- a/samples/inputs/badge/overview/App.razor +++ b/samples/inputs/badge/overview/App.razor @@ -1,5 +1,6 @@ @using IgniteUI.Blazor.Controls +
Rounded @@ -13,11 +14,11 @@
Square - + - 2 - + 2 +
diff --git a/samples/inputs/badge/shape/wwwroot/index.css b/samples/inputs/badge/shape/wwwroot/index.css index 848568fea2..21acd9054d 100644 --- a/samples/inputs/badge/shape/wwwroot/index.css +++ b/samples/inputs/badge/shape/wwwroot/index.css @@ -12,6 +12,15 @@ https://dl.infragistics.com/x/css//samples/ min-height: 6rem; } +igc-badge { + --ig-badge-text-color: var(--ig-gray-50); +} + +igc-badge igc-icon { + color: var(--ig-gray-50); + fill: var(--ig-gray-50); +} + .badge-shape-row { display: grid; grid-template-columns: 80px 40px 40px 40px; @@ -22,7 +31,7 @@ https://dl.infragistics.com/x/css//samples/ .row-label { justify-self: end; - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; @@ -34,20 +43,3 @@ https://dl.infragistics.com/x/css//samples/ .badge-small { --ig-size: var(--ig-size-small); } - -.badge-info-blue { - --ig-badge-background-color: #0057A9; -} - -.badge-info-blue::part(base) { - background-color: #0057A9; -} - -igc-badge::part(base), -igc-badge igc-icon { - color: var(--ig-gray-50); -} - -igc-badge igc-icon { - fill: var(--ig-gray-50); -} \ No newline at end of file diff --git a/samples/inputs/badge/size/App.razor b/samples/inputs/badge/size/App.razor index 8aa29c3c27..e663d4c582 100644 --- a/samples/inputs/badge/size/App.razor +++ b/samples/inputs/badge/size/App.razor @@ -1,10 +1,11 @@ @using IgniteUI.Blazor.Controls +
Small - 2 + 2 @@ -12,7 +13,7 @@
Medium - 2 + 2 @@ -20,7 +21,7 @@
Large - 2 + 2 diff --git a/samples/inputs/badge/size/wwwroot/index.css b/samples/inputs/badge/size/wwwroot/index.css index 6007fa025a..76149c02bf 100644 --- a/samples/inputs/badge/size/wwwroot/index.css +++ b/samples/inputs/badge/size/wwwroot/index.css @@ -13,6 +13,15 @@ https://dl.infragistics.com/x/css//samples/ min-height: 7rem; } +igc-badge { + --ig-badge-text-color: var(--ig-gray-50); +} + +igc-badge igc-icon { + color: var(--ig-gray-50); + fill: var(--ig-gray-50); +} + .badge-size-row { display: grid; grid-template-columns: 80px 32px 40px 40px; @@ -23,7 +32,7 @@ https://dl.infragistics.com/x/css//samples/ .row-label { justify-self: end; - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; @@ -32,23 +41,6 @@ https://dl.infragistics.com/x/css//samples/ letter-spacing: 0.3px; } -.badge-info-blue { - --ig-badge-background-color: #0057A9; -} - -.badge-info-blue::part(base) { - background-color: #0057A9; -} - -igc-badge::part(base), -igc-badge igc-icon { - color: var(--ig-gray-50); -} - -igc-badge igc-icon { - fill: var(--ig-gray-50); -} - .badge-large { --ig-size: var(--ig-size-large); } .badge-medium { --ig-size: var(--ig-size-medium); } .badge-small { --ig-size: var(--ig-size-small); } diff --git a/samples/inputs/badge/styling/App.razor b/samples/inputs/badge/styling/App.razor index 5c332265b5..c54ae7ddb1 100644 --- a/samples/inputs/badge/styling/App.razor +++ b/samples/inputs/badge/styling/App.razor @@ -1,5 +1,6 @@ @using IgniteUI.Blazor.Controls +
diff --git a/samples/inputs/badge/styling/wwwroot/index.css b/samples/inputs/badge/styling/wwwroot/index.css index 1e95a64f31..3a697578c7 100644 --- a/samples/inputs/badge/styling/wwwroot/index.css +++ b/samples/inputs/badge/styling/wwwroot/index.css @@ -55,9 +55,9 @@ igc-badge { } .styling-item.green igc-avatar { - --icon-color: #248436; - --ig-avatar-background: #A9CEB0; - --ig-avatar-color: #248436; + --icon-color: var(--ig-success-900); + --ig-avatar-background: var(--ig-success-200); + --ig-avatar-color: var(--ig-success-900); } .styling-item.pink igc-avatar { diff --git a/samples/inputs/badge/tailwind-styling/App.razor b/samples/inputs/badge/tailwind-styling/App.razor index 1746c5a627..561f5e8edd 100644 --- a/samples/inputs/badge/tailwind-styling/App.razor +++ b/samples/inputs/badge/tailwind-styling/App.razor @@ -1,5 +1,6 @@ @using IgniteUI.Blazor.Controls +
diff --git a/samples/inputs/badge/tailwind-styling/wwwroot/index.css b/samples/inputs/badge/tailwind-styling/wwwroot/index.css index 3fd7ecc600..81fcea0f38 100644 --- a/samples/inputs/badge/tailwind-styling/wwwroot/index.css +++ b/samples/inputs/badge/tailwind-styling/wwwroot/index.css @@ -1,8 +1,8 @@ @layer theme, base, components, utilities; igc-badge { --ig-size: var(--ig-size-small); } -igc-avatar { --size: 40px; --ig-avatar-background: var(--ig-gray-700); --ig-avatar-color: var(--ig-gray-50); } -igc-avatar igc-icon { color: var(--ig-gray-50); } +igc-avatar { --size: 40px; --ig-avatar-background: var(--ig-gray-400); --ig-avatar-color: var(--ig-gray-800); } +igc-avatar igc-icon { color: var(--ig-gray-800); } .badge-close { --ig-badge-background-color: var(--ig-error-500); } .badge-volume { --ig-badge-background-color: #8B5BB1; } .badge-remove { --ig-badge-background-color: var(--ig-gray-900); } diff --git a/samples/inputs/badge/type/App.razor b/samples/inputs/badge/type/App.razor index 05ff9d1b9a..b1a7c8c545 100644 --- a/samples/inputs/badge/type/App.razor +++ b/samples/inputs/badge/type/App.razor @@ -1,5 +1,6 @@ @using IgniteUI.Blazor.Controls +
diff --git a/samples/inputs/badge/type/wwwroot/index.css b/samples/inputs/badge/type/wwwroot/index.css index 947bf12313..d27c20c289 100644 --- a/samples/inputs/badge/type/wwwroot/index.css +++ b/samples/inputs/badge/type/wwwroot/index.css @@ -54,7 +54,7 @@ igc-badge { } .badge-type-item span { - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; diff --git a/samples/inputs/badge/variants/App.razor b/samples/inputs/badge/variants/App.razor index 95453d8f65..08a868e60e 100644 --- a/samples/inputs/badge/variants/App.razor +++ b/samples/inputs/badge/variants/App.razor @@ -1,19 +1,20 @@ @using IgniteUI.Blazor.Controls +
- 2 + 2
Primary
- +
@@ -34,7 +35,7 @@ - 2 + 2
Warn
diff --git a/samples/inputs/badge/variants/wwwroot/index.css b/samples/inputs/badge/variants/wwwroot/index.css index d98cdaf116..eb36fc331a 100644 --- a/samples/inputs/badge/variants/wwwroot/index.css +++ b/samples/inputs/badge/variants/wwwroot/index.css @@ -10,15 +10,24 @@ igc-badge { inset-inline-end: -4px; } +.variant-item:not(:nth-child(4)) igc-badge { + --ig-badge-text-color: var(--ig-gray-50); +} + +.variant-item:not(:nth-child(4)) igc-badge igc-icon { + color: var(--ig-gray-50); + fill: var(--ig-gray-50); +} + igc-avatar { --ig-size: var(--ig-size-small); - --ig-avatar-background: var(--ig-gray-700); - --ig-avatar-color: var(--ig-gray-50); + --ig-avatar-background: var(--ig-gray-400); + --ig-avatar-color: var(--ig-gray-800); } .variant-item:first-child igc-avatar igc-icon, .variant-item:nth-child(4) igc-avatar igc-icon { - color: var(--ig-gray-50); + color: var(--ig-gray-800); } .badge-variants { @@ -39,7 +48,7 @@ igc-avatar { } .variant-item span { - color: #556c86; + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; @@ -52,33 +61,3 @@ igc-avatar { position: relative; display: flex; } - -.badge-info-blue { - --ig-badge-background-color: #0057A9; -} - -.badge-info-blue::part(base) { - background-color: #0057A9; -} - -.badge-primary-blue { - --ig-badge-background-color: #0070BA; -} - -.badge-primary-blue::part(base) { - background-color: #0070BA; -} - -.badge-warning-black::part(base) { - background-color: #FAA419; - color: #000; -} - -igc-badge::part(base), -igc-badge igc-icon { - color: var(--ig-gray-50); -} - -igc-badge igc-icon { - fill: var(--ig-gray-50); -} diff --git a/samples/inputs/button-group/alignment/App.razor b/samples/inputs/button-group/alignment/App.razor index 8710d6828a..0cab3d5734 100644 --- a/samples/inputs/button-group/alignment/App.razor +++ b/samples/inputs/button-group/alignment/App.razor @@ -1,11 +1,9 @@ @using IgniteUI.Blazor.Controls - - -
+
@foreach (var alignment in Alignments) { -
+
@(alignment == ContentOrientation.Horizontal ? "Horizontal" : "Vertical") @foreach (var city in Cities) diff --git a/samples/inputs/button-group/alignment/wwwroot/index.css b/samples/inputs/button-group/alignment/wwwroot/index.css index 1fd57b2c22..7c6fd3ed98 100644 --- a/samples/inputs/button-group/alignment/wwwroot/index.css +++ b/samples/inputs/button-group/alignment/wwwroot/index.css @@ -1,42 +1,34 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ - -igc-ripple { - --color: gray; +.states-container { + display: grid; + place-items: center; + height: 100vh; } -.button-group-alignment { +.sample-layout { display: flex; - align-items: flex-start; + gap: 2rem; + align-items: start; justify-content: center; - gap: 60px; - padding: 13px; -} - -.button-group-alignment-item { - display: flex; - flex-direction: column; - align-items: center; - justify-content: flex-start; - gap: 16px; + flex-wrap: wrap; } -.button-group-alignment-item igc-button-group { - width: 240px; +.sample-inner-layout { + display: grid; + gap: 0.5rem; + align-items: start; } -.button-group-alignment-item:first-child igc-button-group { - width: 320px; +igc-button-group { + width: 17.5rem; } -.button-group-alignment-item span { - width: 100%; - text-align: center; - color: #556c86; +.sample-layout span { + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; - font-style: normal; line-height: 20px; letter-spacing: 0.3px; + margin: 0.5rem; + text-align: center; } diff --git a/samples/inputs/button-group/alignment/wwwroot/index.html b/samples/inputs/button-group/alignment/wwwroot/index.html index f367362794..61d40ad005 100644 --- a/samples/inputs/button-group/alignment/wwwroot/index.html +++ b/samples/inputs/button-group/alignment/wwwroot/index.html @@ -12,7 +12,7 @@ - + diff --git a/samples/inputs/button-group/custom-toggle/App.razor b/samples/inputs/button-group/custom-toggle/App.razor index 12890a18ae..0a28d4fce9 100644 --- a/samples/inputs/button-group/custom-toggle/App.razor +++ b/samples/inputs/button-group/custom-toggle/App.razor @@ -1,8 +1,6 @@ @using IgniteUI.Blazor.Controls - - -
+
diff --git a/samples/inputs/button-group/custom-toggle/wwwroot/index.css b/samples/inputs/button-group/custom-toggle/wwwroot/index.css index 8ff03a4204..b2149d9d62 100644 --- a/samples/inputs/button-group/custom-toggle/wwwroot/index.css +++ b/samples/inputs/button-group/custom-toggle/wwwroot/index.css @@ -1,13 +1,9 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ - -igc-button-group { - display: inline-block; - width: 300px; +.states-container { + display: grid; + place-items: center; + height: 100vh; } -.container.sample { - display: flex; - justify-content: center; - align-items: center; +igc-button-group { + max-width: 18.75rem; } diff --git a/samples/inputs/button-group/interaction-states/App.razor b/samples/inputs/button-group/interaction-states/App.razor index 5b3ce595ab..58de6f3f80 100644 --- a/samples/inputs/button-group/interaction-states/App.razor +++ b/samples/inputs/button-group/interaction-states/App.razor @@ -1,31 +1,32 @@ @using IgniteUI.Blazor.Controls - - -
-
+
+
@foreach (var state in States) { @(char.ToUpperInvariant(state[0]) + state.Substring(1)) } -
+ @foreach (var row in Rows) { -
+
@row.Label @foreach (var state in States) { - +
+ @(char.ToUpperInvariant(state[0]) + state.Substring(1)) + Button - + +
} -
+ }
diff --git a/samples/inputs/button-group/interaction-states/wwwroot/index.css b/samples/inputs/button-group/interaction-states/wwwroot/index.css index e0463cc63d..f0c69bfcbd 100644 --- a/samples/inputs/button-group/interaction-states/wwwroot/index.css +++ b/samples/inputs/button-group/interaction-states/wwwroot/index.css @@ -1,79 +1,117 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ - -igc-ripple { - --color: gray; +.states-container { + container-type: inline-size; + display: grid; + grid-template-columns: minmax(0, 1fr); + align-content: center; + height: 100vh; } -.button-group-states { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - gap: 20px; - padding: 16px; +.states-matrix { + display: grid; + grid-template-columns: auto repeat(3, minmax(7.75rem, 1fr)); + gap: 1rem; + inline-size: 100%; + max-inline-size: 42.5rem; + margin-inline: auto; } -.button-group-states-row { +.states-row { display: grid; - grid-template-columns: 120px 164px 164px 164px; + grid-column: 1 / -1; + grid-template-columns: subgrid; align-items: center; - gap: 16px; } -.button-group-states .row-label, -.button-group-states .column-label { - color: #556c86; +.row-label, +.column-label, +.cell-label { + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; - font-style: normal; line-height: 20px; letter-spacing: 0.3px; } -.button-group-states .column-label { +.column-label, +.cell-label { text-align: center; } -.button-group-states igc-button-group { - width: 164px; +.cell-label { + display: none; +} + +.state-cell { + display: grid; + gap: 0.25rem; +} + +igc-icon { + --ig-icon-size: 1rem; } -.button-group-states igc-toggle-button { - width: 100%; +@container not (width >= 34rem) { + .states-matrix { + grid-template-columns: minmax(0, 1fr); + } + + .states-row { + grid-template-columns: repeat(auto-fit, minmax(9.375rem, 1fr)); + } + + header.states-row { + display: none; + } + + .row-label { + grid-column: 1 / -1; + } + + .cell-label { + display: block; + text-align: start; + margin-block-start: 1rem; + } + + .state-cell { + margin-inline-end: 0.5rem; + } } -.button-group-states igc-icon { - font-size: 16px; +/* WARNING START: Demo overrides only. Do not copy to production. */ +/* Forced state classes are used here solely to present all component states visually. */ +igc-button-group { + pointer-events: none; } -.button-group-states igc-toggle-button[selected]::part(toggle) { +igc-toggle-button[selected]::part(toggle) { background: var(--item-active-background); border-color: var(--item-active-border-color); color: var(--item-hover-text-color); } -.button-group-states igc-toggle-button.state-hover:not([selected])::part(toggle) { +.states-row igc-toggle-button.state-hover:not([selected])::part(toggle) { background: var(--item-hover-background); border-color: var(--item-hover-border-color); color: var(--item-hover-text-color); } -.button-group-states igc-toggle-button.state-focused:not([selected])::part(toggle) { +.states-row igc-toggle-button.state-focused:not([selected])::part(toggle) { background: var(--item-focused-hover-background); border-color: var(--item-focused-hover-border-color); color: var(--item-focused-hover-text-color); } -.button-group-states igc-toggle-button.state-hover[selected]::part(toggle) { +.states-row igc-toggle-button.state-hover[selected]::part(toggle) { background: var(--item-selected-active-background); border-color: var(--item-selected-active-border-color); color: var(--item-selected-hover-text-color); } -.button-group-states igc-toggle-button.state-focused[selected]::part(toggle) { +.states-row igc-toggle-button.state-focused[selected]::part(toggle) { background: var(--item-selected-active-background); border-color: var(--item-selected-active-border-color); color: var(--item-focused-hover-text-color); } +/* WARNING END */ diff --git a/samples/inputs/button-group/layout/App.razor b/samples/inputs/button-group/layout/App.razor index 2adb0a876a..e94fb8e3ab 100644 --- a/samples/inputs/button-group/layout/App.razor +++ b/samples/inputs/button-group/layout/App.razor @@ -1,8 +1,6 @@ @using IgniteUI.Blazor.Controls - - -
+
Left Center diff --git a/samples/inputs/button-group/layout/wwwroot/index.css b/samples/inputs/button-group/layout/wwwroot/index.css index cfc3d9fe59..87b64d4e53 100644 --- a/samples/inputs/button-group/layout/wwwroot/index.css +++ b/samples/inputs/button-group/layout/wwwroot/index.css @@ -1,22 +1,28 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ - -igc-ripple { - --color: gray; +.states-container { + display: grid; + place-items: center; + height: 100vh; } -.button-group-layout { +.sample-layout { display: flex; + flex-direction: row; align-items: center; justify-content: center; gap: 80px; - min-height: 6rem; + min-height: 5.5rem; +} + +igc-button-group { + display: inline-block; + max-width: 400px; } -.button-group-layout igc-toggle-button { +.sample-layout igc-toggle-button { min-width: 100px; } -.button-group-layout igc-icon { - --size: 20px; +.sample-layout igc-icon { + --ig-size: 20px; + --igc-icon-size: 20px; } diff --git a/samples/inputs/button-group/overview/App.razor b/samples/inputs/button-group/overview/App.razor index b7ee244682..c97a3fafdb 100644 --- a/samples/inputs/button-group/overview/App.razor +++ b/samples/inputs/button-group/overview/App.razor @@ -1,20 +1,20 @@ @using IgniteUI.Blazor.Controls - +
+
+ + Device + Cloud + -
- - Device - Cloud - - -
- Trip around the world -
- @foreach (var photo in Photos) - { - Trip around the world - } +
+

Trip around the world

+
+ @foreach (var photo in Photos) + { + Trip around the world + } +
diff --git a/samples/inputs/button-group/overview/wwwroot/index.css b/samples/inputs/button-group/overview/wwwroot/index.css index ba9fa9f23a..28e680c297 100644 --- a/samples/inputs/button-group/overview/wwwroot/index.css +++ b/samples/inputs/button-group/overview/wwwroot/index.css @@ -1,39 +1,36 @@ -.container.sample { - display: flex; - flex-direction: column; - align-items: center; +.states-container { + display: grid; + place-items: center; + height: 100vh; } -igc-button-group { - display: block; - width: 280px; - max-width: 100%; -} - -igc-ripple { - --color: gray; +.sample-layout { + display: grid; + width: 17.5rem; + gap: 0.5rem; } -.album { - margin-top: 8px; - width: 280px; - max-width: 100%; +igc-button-group { + max-width: 17.5rem; } .album-title { - display: inline-block; - margin-bottom: 8px; - color: #1f89d4; + font-size: 0.875rem; + font-weight: 400; + line-height: 1.429; + letter-spacing: 0.0178571em; + margin-block: 0 0.5rem; + color: var(--ig-primary-500); } .album-photos { - display: grid; - grid-template-columns: repeat(2, 1fr); - gap: 4px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: 0.25rem; } .album-photos img { - width: 100%; - object-fit: cover; - display: block; + width: 100%; + object-fit: cover; + display: block; } \ No newline at end of file diff --git a/samples/inputs/button-group/overview/wwwroot/index.html b/samples/inputs/button-group/overview/wwwroot/index.html index f367362794..61d40ad005 100644 --- a/samples/inputs/button-group/overview/wwwroot/index.html +++ b/samples/inputs/button-group/overview/wwwroot/index.html @@ -12,7 +12,7 @@ - + diff --git a/samples/inputs/button-group/selection/App.razor b/samples/inputs/button-group/selection/App.razor index 0ad30e1074..4f27323538 100644 --- a/samples/inputs/button-group/selection/App.razor +++ b/samples/inputs/button-group/selection/App.razor @@ -1,61 +1,23 @@ @using IgniteUI.Blazor.Controls - - - - -
+
@foreach (var selection in modes) { -
- @(selection == ButtonGroupSelection.SingleRequired ? "Single-Required" : selection.ToString()) + @(selection == ButtonGroupSelection.SingleRequired ? "Single-Required" : selection.ToString()) - - - - - - - - - - - - + + + + + + + + + + + + -
}
diff --git a/samples/inputs/button-group/selection/wwwroot/index.css b/samples/inputs/button-group/selection/wwwroot/index.css index ee6fdfb0f1..352a14cc37 100644 --- a/samples/inputs/button-group/selection/wwwroot/index.css +++ b/samples/inputs/button-group/selection/wwwroot/index.css @@ -1,39 +1,46 @@ -/* -CSS styles are loaded from the shared CSS file located at: -https://dl.infragistics.com/x/css//samples/ -*/ +.states-container { + container-type: inline-size; + display: grid; + grid-template-columns: minmax(0, 1fr); + align-content: center; + height: 100vh; +} .selection-samples { - display: flex; - justify-content: center; - flex-direction: column; - align-items: flex-start; - gap: 28px; - padding-left: 32px; + display: grid; + grid-template-columns: auto minmax(11.25rem, 1fr); + align-items: center; + gap: 1.5rem 2rem; + inline-size: 100%; + max-inline-size: 23.75rem; + margin-inline: auto; } -.selection-sample { - display: flex; - align-items: center; - gap: 30px; +.sample-label { + color: var(--ig-gray-600); + font-family: "Aktiv Grotesk", sans-serif; + font-size: 13px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0.3px; + text-align: end; } -.selection-sample > span { - width: 120px; - text-align: right; - color: #556c86; - font-family: "Aktiv Grotesk", sans-serif; - font-size: 13px; - font-weight: 400; - font-style: normal; - line-height: 20px; - letter-spacing: 0.3px; +igc-button-group { + inline-size: 100%; } -.selection-sample igc-button-group { - width: 200px; -} +@container not (width >= 22rem) { + .selection-samples { + grid-template-columns: minmax(0, 1fr); + gap: 0.25rem; + } + + .sample-label { + text-align: start; + } -igc-ripple { - --color: gray; + .sample-label:not(:first-of-type) { + margin-block-start: 1rem; + } } \ No newline at end of file diff --git a/samples/inputs/button-group/selection/wwwroot/index.html b/samples/inputs/button-group/selection/wwwroot/index.html index f367362794..61d40ad005 100644 --- a/samples/inputs/button-group/selection/wwwroot/index.html +++ b/samples/inputs/button-group/selection/wwwroot/index.html @@ -12,7 +12,7 @@ - + diff --git a/samples/inputs/button-group/size/App.razor b/samples/inputs/button-group/size/App.razor index 930e37368a..e7887e8832 100644 --- a/samples/inputs/button-group/size/App.razor +++ b/samples/inputs/button-group/size/App.razor @@ -1,27 +1,27 @@ @using IgniteUI.Blazor.Controls - - -
- @foreach (var size in Sizes) - { -
- @(char.ToUpperInvariant(size[0]) + size.Substring(1)) - - @foreach (var city in Cities) - { - - @city - - - } - -
- } +
+
+ Small + + Sofia + London + New York + + Medium + + Sofia + London + New York + + Large + + Sofia + London + New York + +
@code { - private static readonly string[] Cities = { "Sofia", "London", "New York" }; - - private static readonly string[] Sizes = { "small", "medium", "large" }; } \ No newline at end of file diff --git a/samples/inputs/button-group/size/wwwroot/index.css b/samples/inputs/button-group/size/wwwroot/index.css index dd52721dd4..75e7fe2e62 100644 --- a/samples/inputs/button-group/size/wwwroot/index.css +++ b/samples/inputs/button-group/size/wwwroot/index.css @@ -1,36 +1,55 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ - -igc-ripple { - --color: gray; +.states-container { + container-type: inline-size; + display: grid; + grid-template-columns: minmax(0, 1fr); + place-items: center; + height: 100vh; } .button-group-size { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: center; - gap: 32px; - padding: 7px; - padding-left: 4rem; -} - -.button-group-size-item { - display: flex; - flex-direction: row; + display: grid; + grid-template-columns: auto minmax(15rem, 1fr); align-items: center; - justify-content: flex-start; - gap: 32px; + gap: 1.5rem 2rem; + inline-size: 100%; + max-inline-size: 30rem; + margin-inline: auto; } -.button-group-size-item span { - width: 52px; - text-align: right; - color: #556c86; +.sample-label { + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; - font-style: normal; line-height: 20px; letter-spacing: 0.3px; + text-align: end; +} + +igc-button-group:nth-of-type(1n) { + --ig-size: var(--ig-size-small); +} + +igc-button-group:nth-of-type(2n) { + --ig-size: var(--ig-size-medium); } + +igc-button-group:nth-of-type(3n) { + --ig-size: var(--ig-size-large); +} + +@container not (width >= 22rem) { + .button-group-size { + grid-template-columns: minmax(0, 1fr); + gap: 0.25rem; + } + + .sample-label { + text-align: start; + } + + .sample-label:not(:first-of-type) { + margin-block-start: 1rem; + } +} + diff --git a/samples/inputs/button-group/size/wwwroot/index.html b/samples/inputs/button-group/size/wwwroot/index.html index 995f14d770..356acc00a1 100644 --- a/samples/inputs/button-group/size/wwwroot/index.html +++ b/samples/inputs/button-group/size/wwwroot/index.html @@ -12,7 +12,7 @@ - + diff --git a/samples/inputs/button-group/states/App.razor b/samples/inputs/button-group/states/App.razor index 3c24567a56..7e49c9dc50 100644 --- a/samples/inputs/button-group/states/App.razor +++ b/samples/inputs/button-group/states/App.razor @@ -1,29 +1,33 @@ @using IgniteUI.Blazor.Controls - - -
-
+
+
Enabled Disabled -
+ @foreach (var row in Rows) { -
+
@row.Label - - - Device - - - - - - Cloud - - -
+
+ Enabled + + + Device + + + +
+
+ Disabled + + + Cloud + + +
+ }
diff --git a/samples/inputs/button-group/states/wwwroot/index.css b/samples/inputs/button-group/states/wwwroot/index.css index df90471ba0..8db28eb84a 100644 --- a/samples/inputs/button-group/states/wwwroot/index.css +++ b/samples/inputs/button-group/states/wwwroot/index.css @@ -1,40 +1,88 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ - -igc-ripple { - --color: gray; +.states-container { + container-type: inline-size; + display: grid; + grid-template-columns: minmax(0, 1fr); + align-content: center; + height: 100vh; } -.button-group-interaction-states { - display: flex; - align-items: center; - justify-content: center; - flex-direction: column; - gap: 20px; - padding: 18px; +.states-matrix { + --state-columns: 2; + + display: grid; + grid-template-columns: auto repeat(var(--state-columns), minmax(7.5rem, 1fr)); + gap: 1rem; + inline-size: 100%; + max-inline-size: 32.5rem; + margin-inline: auto; } -.button-group-interaction-states-row { +.states-row { display: grid; - grid-template-columns: 120px 160px 160px; + grid-column: 1 / -1; + grid-template-columns: subgrid; align-items: center; - gap: 16px; } -.button-group-interaction-states .row-label, -.button-group-interaction-states .column-label { - color: #556c86; +.row-label, +.column-label, +.cell-label { + color: var(--ig-gray-600); font-family: "Aktiv Grotesk", sans-serif; font-size: 13px; font-weight: 400; - font-style: normal; line-height: 20px; letter-spacing: 0.3px; +} + +.column-label, +.cell-label { text-align: center; } -.button-group-interaction-states-row igc-button-group:not([disabled]) igc-toggle-button[selected]::part(toggle) { +.cell-label { + display: none; +} + +.state-cell { + display: grid; + gap: 0.25rem; +} + +@container not (width >= 24rem) { + .states-matrix { + grid-template-columns: minmax(0, 1fr); + } + + .states-row { + grid-template-columns: repeat(auto-fit, minmax(8.75rem, 1fr)); + column-gap: 0.5rem; + } + + header.states-row { + display: none; + } + + .row-label { + grid-column: 1 / -1; + } + + .cell-label { + display: block; + text-align: start; + margin-block-start: 1rem; + } +} + +/* WARNING START: Demo overrides only. Do not copy to production. */ +/* Forced state classes are used here solely to present all component states visually. */ +igc-button-group { + pointer-events: none; +} + +igc-toggle-button:not([disabled])[selected]::part(toggle) { background: var(--item-active-background); border-color: var(--item-active-border-color); color: var(--item-selected-text-color); } +/* WARNING END */ diff --git a/samples/inputs/button-group/styling/App.razor b/samples/inputs/button-group/styling/App.razor index bc5c1ceb43..6e2ece41b4 100644 --- a/samples/inputs/button-group/styling/App.razor +++ b/samples/inputs/button-group/styling/App.razor @@ -1,8 +1,6 @@ @using IgniteUI.Blazor.Controls - - -
+
@foreach (var alignmentOption in Layouts) { diff --git a/samples/inputs/button-group/styling/wwwroot/index.css b/samples/inputs/button-group/styling/wwwroot/index.css index e4063eab94..2f6c88624f 100644 --- a/samples/inputs/button-group/styling/wwwroot/index.css +++ b/samples/inputs/button-group/styling/wwwroot/index.css @@ -1,35 +1,24 @@ -/* shared styles are loaded from: */ -/* https://dl.infragistics.com/x/css/samples/shared.v8.css */ - -igc-ripple { - --color: gray; -} - -.button-group-styling { - display: flex; - align-items: center; - justify-content: center; - min-height: 6rem; -} - -.button-group-styling igc-button-group { - width: 420px; - border: 2px solid #4da3e8; - border-radius: 4px; - overflow: hidden; -} - -.button-group-styling igc-toggle-button::part(toggle) { - color: #4a5a66; - background: #cfe8fb; - border-color: #4da3e8; +igc-button-group { + display: inline-block; + width: 100%; + max-width: 25rem; } -.button-group-styling igc-toggle-button::part(toggle):hover { - background: #b3daf8; -} +.states-container { + display: grid; + place-items: center; + height: 100vh; -.button-group-styling igc-toggle-button[selected]::part(toggle) { - color: #2f4d6a; - background: #6db3ea; + --ig-button-group-border-radius: 4px; + --ig-button-group-item-text-color: #4a5a66; + --ig-button-group-item-background: #cfe8fb; + --ig-button-group-item-border-color: #4da3e8; + --ig-button-group-item-hover-text-color: #4a5a66; + --ig-button-group-item-hover-background: #b3daf8; + --ig-button-group-item-hover-border-color: #4da3e8; + --ig-button-group-item-selected-text-color: #2f4d6a; + --ig-button-group-item-selected-background: #6db3ea; + --ig-button-group-item-selected-border-color: #4da3e8; + --ig-button-group-item-selected-hover-text-color: #2f4d6a; + --ig-button-group-item-selected-hover-background: #6db3ea; } diff --git a/samples/inputs/button-group/styling/wwwroot/index.html b/samples/inputs/button-group/styling/wwwroot/index.html index f367362794..61d40ad005 100644 --- a/samples/inputs/button-group/styling/wwwroot/index.html +++ b/samples/inputs/button-group/styling/wwwroot/index.html @@ -12,7 +12,7 @@ - + diff --git a/samples/inputs/button-group/tailwind-styling/App.razor b/samples/inputs/button-group/tailwind-styling/App.razor index 730b97887e..1d05c82514 100644 --- a/samples/inputs/button-group/tailwind-styling/App.razor +++ b/samples/inputs/button-group/tailwind-styling/App.razor @@ -1,8 +1,6 @@ @using IgniteUI.Blazor.Controls - - -
+
@foreach (var view in Views) { diff --git a/samples/inputs/button-group/tailwind-styling/wwwroot/index.css b/samples/inputs/button-group/tailwind-styling/wwwroot/index.css index c30037c77f..a4d26d740c 100644 --- a/samples/inputs/button-group/tailwind-styling/wwwroot/index.css +++ b/samples/inputs/button-group/tailwind-styling/wwwroot/index.css @@ -1,23 +1,17 @@ -@layer theme, base, components, utilities; +@layer theme, utilities; +@import "tailwindcss/theme.css" layer(theme); +@import "tailwindcss/utilities.css" layer(utilities); -igc-ripple { - --color: gray; +.states-container { + display: grid; + place-items: center; + height: 100vh; } -.button-group-center { - display: flex; - align-items: center; - justify-content: center; - min-height: 6rem; - box-sizing: border-box; +igc-button-group { + display: inline-block; width: 100%; - background: var(--color-violet-50, #f5f3ff); -} - -.button-group-style { - width: 420px; - max-width: 100%; - overflow: hidden; + max-width: 25rem; } .button-group-style igc-toggle-button::part(toggle) { diff --git a/samples/inputs/button/overview/wwwroot/index.css b/samples/inputs/button/overview/wwwroot/index.css index cf04f5057a..2b7af37f6a 100644 --- a/samples/inputs/button/overview/wwwroot/index.css +++ b/samples/inputs/button/overview/wwwroot/index.css @@ -22,8 +22,11 @@ https://dl.infragistics.com/x/css//samples/ width: 100%; } -.fields igc-input::part(container), -.fields igc-input::part(input) { +html:not([data-igd-theme="material"]) .fields igc-input::part(container) { + background-color: var(--ig-gray-50); +} + +[data-igd-theme="material"] .fields igc-input::part(input) { background-color: var(--ig-gray-50); } @@ -32,4 +35,12 @@ https://dl.infragistics.com/x/css//samples/ justify-content: flex-end; gap: 1rem; margin-top: 0.5rem; +} + +[data-igd-theme="material"] .actions { + margin-top: 2.2rem; +} + +[data-igd-theme="material"] .fields { + margin-top: -1.7rem; } \ No newline at end of file From 7425a85b5dd23b191b0e82254e967a6a60d61d5a Mon Sep 17 00:00:00 2001 From: Ivan Minchev Date: Fri, 25 Sep 2026 12:29:25 +0300 Subject: [PATCH 09/10] fix(avatar): fix overview sample styling to work with Indigo theme --- samples/layouts/avatar/overview/wwwroot/index.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/samples/layouts/avatar/overview/wwwroot/index.css b/samples/layouts/avatar/overview/wwwroot/index.css index a4e9c15679..b3021ebc6f 100644 --- a/samples/layouts/avatar/overview/wwwroot/index.css +++ b/samples/layouts/avatar/overview/wwwroot/index.css @@ -30,11 +30,14 @@ } .avatar-stack .profile-avatar + .profile-avatar { - margin-inline-start: -1.5rem; + /* Proportional to the avatar's own rendered size (--size, set internally + by the theme) rather than a fixed length, since themes disagree widely + on how big a "large" avatar actually is. */ + margin-inline-start: calc(var(--size) * -0.27); } .avatar-stack .profile-avatar::part(base) { - box-shadow: 0 0 0 0.375rem var(--ig-surface-500); + box-shadow: 0 0 0 calc(var(--size) * 0.07) var(--ig-surface-500); } .avatar-stack .profile-avatar:last-child { From 953e53fee59eff6e8971b87ba2bd5b275cf525a6 Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Fri, 25 Sep 2026 16:25:50 +0300 Subject: [PATCH 10/10] fix(theming): retheme web components through a window-level theme context (#1308) --- .../wwwroot/sample-theme.js | 173 +++++++++++++----- 1 file changed, 126 insertions(+), 47 deletions(-) diff --git a/browser/IgBlazorSamples.Client/wwwroot/sample-theme.js b/browser/IgBlazorSamples.Client/wwwroot/sample-theme.js index 06c720b235..532e4cb2d8 100644 --- a/browser/IgBlazorSamples.Client/wwwroot/sample-theme.js +++ b/browser/IgBlazorSamples.Client/wwwroot/sample-theme.js @@ -7,7 +7,8 @@ * The docs ThemingWidget dispatches `igd-theme-change`; the Sample widget * bridges that to `postMessage({ type: 'igd-sample-theme', theme, mode })` on * the frame, and re-posts the current selection on every iframe `load`. Here we - * validate the sender and repoint the Ignite UI theme elements. + * validate the sender, repoint the Ignite UI theme elements and provide + * the selection to the web components as their theme context. * * Dormant unless a trusted docs host asks for a theme. */ @@ -18,11 +19,15 @@ var LINK_ATTR = 'data-igd-theme-link'; var DARK_QUERY = '(prefers-color-scheme: dark)'; - // igniteui-webcomponents' configureTheme() re-adopts each Shadow DOM - // component's theme stylesheet; it's just a wrapper around this global - // event, which is what we dispatch directly since this script has no - // module import into that package. - var THEME_CHANGE_EVENT = 'igc-change-theme'; + // The theme stylesheets only carry the palette, typography and other global + // variables; each Shadow DOM component adopts its own per-theme styles from + // the nearest theme provider, which it looks up with a bubbling, composed + // `context-request` event for this key (the Lit context protocol that + // answers). Answering it on the window makes this script + // the provider for every component on the page, including ones rendered + // outside the app root (tile drag ghosts) and ones from separately bundled + // packages (GridLite), with no wrapper element and nothing extra to load. + var THEME_CONTEXT = 'ig-theme-context'; var THEMES = ['material', 'fluent', 'bootstrap', 'indigo']; @@ -37,9 +42,20 @@ } }; - // Newest per key; swaps chain from here so rapid switching stays ordered. - var links = {}; + // The in effect per key, and the replacements a pending selection is loading. + var activeLinks = {}; + var stagedLinks = []; + // The newest selection, and the one whose stylesheets are in effect. var selected = null; + var applied = null; + // Bumped per applied selection, so only the newest one can take effect. + var latestRequest = 0; + + // Handed to the components; undefined until a docs theme is applied, which + // they ignore, keeping the global theme they would have without this script. + var themeContext; + // Each subscribed component's context callback, mapped to its unsubscribe. + var subscribers = new Map(); function isTrustedOrigin(origin) { if (origin === window.location.origin) { @@ -86,59 +102,119 @@ return window.matchMedia && window.matchMedia(DARK_QUERY).matches ? 'dark' : 'light'; } - // Drops every stylesheet for this key except the newest, so an interrupted - // swap can't leave a stale theme behind. - function prune(key) { - var all = document.head.querySelectorAll('link[' + LINK_ATTR + '="' + key + '"]'); - for (var i = 0; i < all.length; i++) { - if (all[i] !== links[key] && all[i].parentNode) { - all[i].parentNode.removeChild(all[i]); - } + function onContextRequest(event) { + if (event.context !== THEME_CONTEXT) { + return; } - } + event.stopPropagation(); - function swap(key, href) { - var current = links[key]; - if (!current || current.getAttribute('href') === href) { + var callback = event.callback; + if (!event.subscribe) { + callback(themeContext); return; } + // Components unsubscribe when they disconnect, so this only ever holds + // the ones on the page. + if (!subscribers.has(callback)) { + subscribers.set(callback, function () { + subscribers.delete(callback); + }); + } + callback(themeContext, subscribers.get(callback)); + } - // The replacement is loaded alongside the outgoing sheet and only takes - // over once ready, so the sample never renders unstyled mid-swap. - var next = current.cloneNode(false); - next.setAttribute('href', href); - - var done = function () { - next.removeEventListener('load', done); - next.removeEventListener('error', done); - prune(key); - }; - next.addEventListener('load', done); - next.addEventListener('error', done); + function provideTheme(theme, variant) { + if (themeContext && themeContext.theme === theme && themeContext.variant === variant) { + return; + } + themeContext = { theme: theme, variant: variant }; + subscribers.forEach(function (unsubscribe, callback) { + callback(themeContext, unsubscribe); + }); + } - current.parentNode.insertBefore(next, current.nextSibling); - links[key] = next; + // Drops the stylesheets a superseded or failed selection was loading; they + // never applied, so this can't leave the page unstyled. + function removeStaged() { + stagedLinks.forEach(function (link) { + if (link.parentNode) { + link.parentNode.removeChild(link); + } + }); + stagedLinks = []; } function applyTheme(theme, mode) { var resolved = resolveMode(mode); + var request = ++latestRequest; + var selection = { theme: theme, mode: mode }; + var incoming = {}; + var pending = 0; + var failed = false; + + removeStaged(); + + // Everything switches in one step once every new stylesheet is in: the + // palette, the root attributes sample CSS keys on, and the components' + // own styles, so no frame mixes the old theme with the new one. + var commit = function () { + for (var key in incoming) { + var outgoing = activeLinks[key]; + incoming[key].removeAttribute('media'); + outgoing.parentNode.removeChild(outgoing); + activeLinks[key] = incoming[key]; + } + stagedLinks = []; + applied = selection; + + var root = document.documentElement; + root.setAttribute('data-igd-theme', theme); + root.setAttribute('data-igd-mode', resolved); + root.style.colorScheme = resolved; + + provideTheme(theme, resolved); + }; + + var onLoad = function () { + if (!failed && request === latestRequest && --pending === 0) { + commit(); + } + }; + + // Keeps the current theme and forgets the failed selection, so choosing + // it again retries instead of being skipped as a repeat. + var onError = function () { + if (!failed && request === latestRequest) { + failed = true; + removeStaged(); + selected = applied; + } + }; for (var key in HREFS) { - if (Object.prototype.hasOwnProperty.call(HREFS, key)) { - swap(key, HREFS[key](resolved, theme)); + if (!Object.prototype.hasOwnProperty.call(HREFS, key) || !activeLinks[key]) { + continue; + } + var href = HREFS[key](resolved, theme); + if (activeLinks[key].getAttribute('href') === href) { + continue; } - } - var root = document.documentElement; - root.setAttribute('data-igd-theme', theme); - root.setAttribute('data-igd-mode', resolved); - root.style.colorScheme = resolved; + // media="print" fetches the stylesheet without applying it before commit. + var link = activeLinks[key].cloneNode(false); + link.setAttribute('href', href); + link.setAttribute('media', 'print'); + link.addEventListener('load', onLoad); + link.addEventListener('error', onError); + activeLinks[key].parentNode.insertBefore(link, activeLinks[key].nextSibling); + stagedLinks.push(link); + incoming[key] = link; + pending++; + } - // Tell the Shadow DOM / Lit components to re-adopt their per-theme - // stylesheet now that the global CSS is in place. - window.dispatchEvent(new CustomEvent(THEME_CHANGE_EVENT, { - detail: { theme: theme, themeVariant: resolved } - })); + if (pending === 0) { + commit(); + } } function onMessage(event) { @@ -177,10 +253,13 @@ for (var key in HREFS) { if (Object.prototype.hasOwnProperty.call(HREFS, key)) { - links[key] = document.head.querySelector('link[' + LINK_ATTR + '="' + key + '"]'); + activeLinks[key] = document.head.querySelector('link[' + LINK_ATTR + '="' + key + '"]'); } } + // index.html loads this script before any component bundle, so every + // component's theme request reaches this listener. + window.addEventListener('context-request', onContextRequest); window.addEventListener('message', onMessage); watchSystemMode(); })();