diff --git a/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db b/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db index 910bf53b0..846340ceb 100644 Binary files a/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db and b/packages/igniteui-mcp/docs-backend/docs-backend/igniteui-docs.db differ diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db b/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db index 910bf53b0..846340ceb 100644 Binary files a/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db and b/packages/igniteui-mcp/igniteui-doc-mcp/db/igniteui-docs.db differ diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/badge.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/badge.md index 39bf84b43..16eb2559d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/badge.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/badge.md @@ -16,18 +16,61 @@ The Ignite UI for Blazor Badge is a component used in conjunction with avatars, ```razor @using IgniteUI.Blazor.Controls -
-
-
- - -
- Terrance Orta -
+
+
+
+ +
+ 23 +
+
+ + + + +
+
+
+
+ 1 +
+ Orders +
+ +
+
+ 2 + +
+ Payment +
+ +
+
+ 3 +
+ Shipping +
+
@code { - + private const string FavoriteBorderIcon = ""; + private const string CloseIcon = ""; + + private IgbIcon iconRef; + + protected override void OnAfterRender(bool firstRender) + { + if (firstRender && iconRef != null) + { + iconRef.EnsureReady().ContinueWith(_ => + { + iconRef.RegisterIconFromText("favorite_border", FavoriteBorderIcon, "material"); + iconRef.RegisterIconFromText("close", CloseIcon, "material"); + }); + } + } } ``` @@ -74,13 +117,77 @@ The Ignite UI for Blazor badge supports several pre-defined stylistic variants. ```razor @using IgniteUI.Blazor.Controls - -
- +
+
+
+ + + + 2 +
+ Primary +
+
+
+ + + + +
+ Info +
+
+
+ + + + +
+ Success +
+
+
+ + + + 2 +
+ Warn +
+
+
+ + + + +
+ Error +
@code { - + private const string CheckIcon = ""; + private const string CloseIcon = ""; + private const string MailIcon = ""; + private const string NotificationsIcon = ""; + + private IgbIcon iconRef; + + protected override void OnAfterRender(bool firstRender) + { + if (firstRender && iconRef != null) + { + iconRef.EnsureReady().ContinueWith(_ => + { + iconRef.RegisterIconFromText("check", CheckIcon, "material"); + iconRef.RegisterIconFromText("close", CloseIcon, "material"); + iconRef.RegisterIconFromText("mail", MailIcon, "material"); + iconRef.RegisterIconFromText("notifications", NotificationsIcon, "material"); + }); + } + } } ``` @@ -95,13 +202,44 @@ The badge component supports `rounded`(default) and `square` shapes. These value ```razor @using IgniteUI.Blazor.Controls - -
- +
+
+ Rounded + + + + 2 + + + +
+
+ Square + + + + 2 + + + +
@code { - + private const string CheckIcon = ""; + + private IgbIcon checkIconRef; + + protected override void OnAfterRender(bool firstRender) + { + if (firstRender && checkIconRef != null) + { + checkIconRef.EnsureReady().ContinueWith(_ => + { + checkIconRef.RegisterIconFromText("check", CheckIcon, "material"); + }); + } + } } ``` @@ -116,12 +254,81 @@ The Ignite UI for Blazor badge component can also render as a minimal dot indica ```razor @using IgniteUI.Blazor.Controls -
- +
+
+
+ +
+ +
+
+
+ + + + Contract renewal + 09:12 + +
+
+ + Weekly digest + Yesterday + +
+
+
+ + +
+
+
+ + + + Home +
+
+ + + + + Chat +
+
+ + + + Profile +
+
@code { - + private const string NotificationsIcon = ""; + private const string ChevronRightIcon = ""; + private const string HomeIcon = ""; + private const string PersonIcon = ""; + private const string FacebookMessengerIcon = ""; + + private IgbIcon iconRef; + + protected override void OnAfterRender(bool firstRender) + { + if (firstRender && iconRef != null) + { + iconRef.EnsureReady().ContinueWith(_ => + { + iconRef.RegisterIconFromText("notifications", NotificationsIcon, "material"); + iconRef.RegisterIconFromText("chevron_right", ChevronRightIcon, "material"); + iconRef.RegisterIconFromText("home", HomeIcon, "material"); + iconRef.RegisterIconFromText("person", PersonIcon, "material"); + iconRef.RegisterIconFromText("facebookMessenger", FacebookMessengerIcon, "material"); + }); + } + } } ``` @@ -139,13 +346,56 @@ igc-badge::part(base) { ```razor @using IgniteUI.Blazor.Controls - -
- +
+
+ + + + + + +
+
+ + + + +
+
+ + + + 2 +
+
+ + +
@code { - + private const string PersonIcon = ""; + private const string PhotoCameraIcon = ""; + private const string StarBorderIcon = ""; + private const string FavoriteBorderIcon = ""; + + private IgbIcon iconRef; + + protected override void OnAfterRender(bool firstRender) + { + if (firstRender && iconRef != null) + { + iconRef.EnsureReady().ContinueWith(_ => + { + iconRef.RegisterIconFromText("person", PersonIcon, "material"); + iconRef.RegisterIconFromText("photo_camera", PhotoCameraIcon, "material"); + iconRef.RegisterIconFromText("star_border", StarBorderIcon, "material"); + iconRef.RegisterIconFromText("favorite_border", FavoriteBorderIcon, "material"); + }); + } + } } ``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-using-tables.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-using-tables.md index bfecd5f91..49b25b11b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-using-tables.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/excel-library-using-tables.md @@ -14,10 +14,8 @@ The Infragistics Blazor Excel Engine's `WorksheetTable` functionality allows you
diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-data-model.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-data-model.md index bb74b2c5a..7285aee0f 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-data-model.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-data-model.md @@ -115,7 +115,6 @@ The following code shows how to bind the [`IgbGeographicSymbolSeries`](mcp:get_a ```razor @using IgniteUI.Blazor.Controls - @for (int i = 0; i < this.DataSource.Count; i++) { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-shapes.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-shapes.md index 7dcd05cbe..6b058ab19 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-shapes.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-shapes.md @@ -131,7 +131,6 @@ For your convenience, all above code snippets are combined into one code block b ```razor @using IgniteUI.Blazor.Controls - diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-sources.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-sources.md index c9a927400..1b3aeee64 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-sources.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-multiple-sources.md @@ -119,7 +119,6 @@ For your convenience, all above code snippets are combined into one code block b ```razor @using IgniteUI.Blazor.Controls - diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-shp-file.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-shp-file.md index 0b61468a1..f43418b27 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-shp-file.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-binding-shp-file.md @@ -84,7 +84,6 @@ The following code binds [`IgbGeographicPolylineSeries`](mcp:get_api_reference?p ```razor @using IgniteUI.Blazor.Controls - @@ -89,7 +88,6 @@ Alternatively, you can use the [EsriUtility](geo-map-resources-esri.md) which de ```razor @using IgniteUI.Blazor.Controls - diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-area-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-area-series.md index 5073d60ca..ba2611683 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-area-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-scatter-area-series.md @@ -100,7 +100,6 @@ The following code shows how to bind the [`IgbGeographicScatterAreaSeries`](mcp: ```razor @using IgniteUI.Blazor.Controls - diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-shape-polyline-series.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-shape-polyline-series.md index 0a35bf772..cc89ea79d 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-shape-polyline-series.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/geo-map-type-shape-polyline-series.md @@ -69,7 +69,6 @@ The following code shows how to bind the [`IgbGeographicPolylineSeries`](mcp:get ```razor @using IgniteUI.Blazor.Controls - diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-groupby.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-groupby.md index cc65507c7..abdce71ab 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-groupby.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-groupby.md @@ -261,7 +261,6 @@ During runtime the expressions are gettable and settable from the `groupingExpre new IgbGroupingExpression() { FieldName = "ShipCity", Dir= SortingDirection.Asc } }; - private void GroupGrid() { this.grid.GroupBy(GroupingExpression1); @@ -323,7 +322,6 @@ As an example, the following template would make the group rows summary more ver ```razor - //In JavaScript: igRegisterScript("WebGridGroupByRowTemplate", (ctx) => { var html = window.igTemplating.html; diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-lite-filtering.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-lite-filtering.md index 11ec27e1e..d707b1a57 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-lite-filtering.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-lite-filtering.md @@ -124,7 +124,7 @@ await grid.Filter(new IgbGridLiteFilterExpression { Key = "FirstName", Condition await grid.Filter(new IgbGridLiteFilterExpression[] { new IgbGridLiteFilterExpression { Key = "FirstName", Condition = "startsWith", SearchTerm = "a" }, - new IgbGridLiteFilterExpression { Key = "FirstName", Condition = "startsWith", SearchTerm = "g", Criteria = "or" } ``` + new IgbGridLiteFilterExpression { Key = "FirstName", Condition = "startsWith", SearchTerm = "g", Criteria = "or" }``` The `ClearFilter()` method, as the name implies, clears the filter state of a single column or the whole grid component, depending on the passed arguments. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-lite-sorting.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-lite-sorting.md index 835294454..b8797621a 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-lite-sorting.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-lite-sorting.md @@ -187,7 +187,7 @@ await grid.Sort(new IgbGridLiteSortingExpression { Key = "Price", Direction = Gr await grid.Sort(new IgbGridLiteSortingExpression[] { new IgbGridLiteSortingExpression { Key = "Price", Direction = GridLiteSortingDirection.Descending }, - new IgbGridLiteSortingExpression { Key = "Name", Direction = GridLiteSortingDirection.Descending } ``` + new IgbGridLiteSortingExpression { Key = "Name", Direction = GridLiteSortingDirection.Descending }``` The `ClearSort()` method, as the name implies, clears the sort state of a single column or the whole grid component, depending on the passed arguments. diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-selection.md index ec5733a3d..1404260ea 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/grid-selection.md @@ -237,7 +237,6 @@ Basically the main function will look like this: this.MenuY = e.ClientY + "px"; } - public void onMenuShow(IgbGridCellEventArgs e) { IgbGridCellEventArgsDetail detail = e.Detail; @@ -260,7 +259,6 @@ The context menu will have the following functions: StateHasChanged(); } - public async void CopyRowData() { this.ShowMenu = false; diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-pinning.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-pinning.md index b955eedb8..a0d64bcc5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-pinning.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/blazor/tree-grid-column-pinning.md @@ -588,7 +588,6 @@ This can be done by creating a header template for the columns with a custom ico HeaderTemplateScript="WebTreeGridPinHeaderTemplate" Name="column6" @ref="column6"> - // In JavaScript igRegisterScript("WebTreeGridPinHeaderTemplate", (ctx) => { diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/badge.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/badge.md index e2b635b57..9fa0166b5 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/badge.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/badge.md @@ -17,62 +17,203 @@ The Ignite UI for React Badge is a component used in conjunction with avatars, n /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -.wrapper { +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); +} + +.outlined-example igc-avatar igc-icon { + color: var(--ig-gray-50); +} + +.outlined-example:nth-child(2) igc-badge { + inset-block-start: auto; + inset-block-end: -6px; + 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; + inset-inline-end: -10px; +} + +.icon-circle igc-icon { + font-size: 20px; +} + +.badge-outlined { + display: flex; + align-items: center; + justify-content: center; + gap: 60px; + min-height: 7rem; +} + +.outlined-example { position: relative; display: flex; - width: fit-content; +} + +.icon-circle, +.step-circle { + display: flex; align-items: center; - margin-block: 1rem; - gap: 0.5rem; - padding: 0.5rem; - border: 1px solid var(--ig-gray-300); - border-radius: .25rem; + justify-content: center; + border-radius: 50%; } -igc-avatar { - @container style(--ig-theme: indigo) { - --ig-size: var(--ig-size-large); - } +.icon-circle { + width: 36px; + height: 36px; + background: var(--ig-gray-200); + color: var(--ig-gray-800); +} - anchor-name: --avatar; +.badge-info-blue { + --ig-badge-background-color: #0057A9; } -igc-badge { - --size: .75rem; +.badge-info-blue::part(base) { + background-color: #0057A9; +} - position: absolute; - inset-block-end: anchor(--avatar bottom); - inset-inline-end: anchor(--avatar right); +.payment-dot-blue { + --ig-badge-background-color: #0057A9; + --ig-badge-dot-size: 0.5rem; +} + +.payment-dot-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); +} + +.steps { + display: flex; + align-items: flex-start; + gap: 8px; +} + +.step { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +.step-marker { + 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); +} + +.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); } -span { - display: block; - font-weight: 600; +.step-label { + color: var(--ig-gray-700); + font-size: 13px; } ``` ```tsx -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge, IgrAvatar } from 'igniteui-react'; +import { IgrBadge, IgrAvatar, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeOutlined extends React.Component { - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
-
- - -
- Terrance Orta -
- ); - } +const favoriteBorderIcon = + ''; +const closeIcon = + ''; + +const steps = [ + { index: 1, label: 'Orders', current: false, pending: false }, + { index: 2, label: 'Payment', current: true, pending: false }, + { index: 3, label: 'Shipping', current: false, pending: true } +]; + +export default function BadgeOutlined(): JSX.Element { + useEffect(() => { + registerIconFromText('favorite_border', favoriteBorderIcon, 'material'); + registerIconFromText('close', closeIcon, 'material'); + }, []); + + return ( +
+
+
+ +
+ 23 +
+
+ + + + +
+
+ {steps.map((step, i) => ( + + {i > 0 && ( + + )} +
+
+ + {step.index} + + {step.current && ( + + )} +
+ {step.label} +
+ + ))} +
+
+ ); } // rendering above class to the React DOM @@ -122,32 +263,165 @@ The Ignite UI for React badge supports several pre-defined stylistic variants. Y ```css /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-badge { + --ig-size: var(--ig-size-small); + position: absolute; + inset-block-end: -4px; + inset-inline-end: -4px; +} + +igc-avatar { + --ig-size: var(--ig-size-small); + --ig-avatar-background: var(--ig-gray-700); + --ig-avatar-color: var(--ig-gray-50); +} + +.variant-item:first-child igc-avatar igc-icon, +.variant-item:nth-child(4) igc-avatar igc-icon { + color: var(--ig-gray-50); +} + +.badge-variants { + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 7rem; +} + +.variant-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + min-width: 56px; +} + +.variant-item span { + color: var(--ig-gray-700); + font-size: 13px; +} + +.avatar-wrapper { + 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); +} ``` ```tsx -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge } from 'igniteui-react'; +import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeVariants extends React.Component { - - constructor(props: any) { - super(props); - } +const checkIcon = + ''; +const closeIcon = + ''; +const mailIcon = + ''; +const notificationsIcon = + ''; + +export default function BadgeVariants(): JSX.Element { + useEffect(() => { + registerIconFromText('check', checkIcon, 'material'); + registerIconFromText('close', closeIcon, 'material'); + registerIconFromText('mail', mailIcon, 'material'); + registerIconFromText('notifications', notificationsIcon, 'material'); + }, []); - public render(): JSX.Element { - return ( -
- + return ( +
+
+
+ + + + 2 +
+ Primary +
+
+
+ + + + +
+ Info +
+
+
+ + + + +
+ Success
- ); - } +
+
+ + + + 2 +
+ Warn +
+
+
+ + + + +
+ Error +
+
+ ); } // rendering above class to the React DOM const root = ReactDOM.createRoot(document.getElementById('root')); -root.render(); +root.render(); ``` ### Shape @@ -161,27 +435,90 @@ The badge component supports `rounded`(default) and `square` shapes. These value ```css /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.badge-shape { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 7rem; +} + +.badge-shape-row { + display: grid; + grid-template-columns: 80px 40px 40px 40px; + align-items: center; + justify-items: center; + gap: 8px; +} + +.row-label { + justify-self: end; + color: var(--ig-gray-700); + font-size: 14px; +} + +.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); +} ``` ```tsx -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge } from 'igniteui-react'; +import { IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeShape extends React.Component { +const checkIcon = + ''; - constructor(props: any) { - super(props); - } +export default function BadgeShape(): JSX.Element { + useEffect(() => { + registerIconFromText('check', checkIcon, 'material'); + }, []); - public render(): JSX.Element { - return ( -
- + return ( +
+
+ Rounded + + + + 2 + + +
- ); - } +
+ Square + + + + 2 + + + +
+
+ ); } // rendering above class to the React DOM @@ -200,25 +537,228 @@ The Ignite UI for React badge component can also render as a minimal dot indicat ```css /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-badge { + --ig-size: var(--ig-size-small); + --ig-badge-dot-size: 0.5rem; +} + +igc-avatar { + --size: 40px; +} + +.icon-example igc-badge, +.avatar-example igc-badge, +.nav-icon igc-badge { + position: absolute; +} + +.icon-example igc-badge { + inset-block-start: 0; + inset-inline-end: 2px; +} + +.avatar-example igc-badge { + inset-block-start: -0.25rem; + inset-inline-end: -2px; +} + +.nav-icon igc-badge { + inset-block-start: -2px; + inset-inline-end: -6px; +} + +.badge-dot { + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 7rem; +} + +.dot-example { + position: relative; +} + +.icon-example, +.avatar-example, +.icon-circle { + display: flex; + align-items: center; + width: 36px; + height: 36px; +} + +.icon-circle { + justify-content: center; + border-radius: 50%; + background: var(--ig-gray-200); + color: var(--ig-gray-800); +} + +.notifications-card, +.nav-card { + background: var(--ig-surface-500); + border-radius: 4px; + box-shadow: 0 1px 3px hsl(from var(--ig-gray-900) h s l / 0.12); +} + +.notifications-card { + min-width: 272px; + padding: 8px 0; +} + +.notification-row { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + font-size: 14px; + color: var(--ig-gray-900); +} + +.row-indicator { + display: inline-flex; + justify-content: center; + 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; +} + +.row-time { + font-size: 13px; + color: var(--ig-gray-900); +} + +.row-time.unread { + color: #0057A9; + font-weight: 600; +} + +.row-chevron { + --ig-size: 1; + + color: var(--ig-gray-600); + font-size: 18px; +} + +.nav-card { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; +} + +.nav-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + min-width: 56px; + color: var(--ig-gray-700); + font-size: 12px; +} + +.nav-item.active { + color: #0075D2; +} + +.nav-icon { + position: relative; + display: inline-flex; +} ``` ```tsx -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; -import { IgrBadge } from 'igniteui-react'; +import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; +import './index.css'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeDot extends React.Component { - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
- +const notificationsIcon = + ''; +const chevronRightIcon = + ''; +const homeIcon = + ''; +const personIcon = + ''; +const facebookMessengerIcon = + ''; + +const notifications = [ + { title: 'Contract renewal', time: '09:12', unread: true }, + { title: 'Weekly digest', time: 'Yesterday', unread: false } +]; + +const tabs = [ + { label: 'Home', icon: 'home', active: true, hasUpdates: false }, + { label: 'Chat', icon: 'facebookMessenger', active: false, hasUpdates: true }, + { label: 'Profile', icon: 'person', active: false, hasUpdates: false } +]; + +export default function BadgeDot(): JSX.Element { + useEffect(() => { + registerIconFromText('notifications', notificationsIcon, 'material'); + registerIconFromText('chevron_right', chevronRightIcon, 'material'); + registerIconFromText('home', homeIcon, 'material'); + registerIconFromText('person', personIcon, 'material'); + registerIconFromText('facebookMessenger', facebookMessengerIcon, 'material'); + }, []); + + return ( +
+
+
+ +
+
- ); - } +
+ {notifications.map((item) => ( +
+ + {item.unread && } + + {item.title} + {item.time} + +
+ ))} +
+
+ + +
+
+ {tabs.map((tab) => ( +
+ + + {tab.hasUpdates && } + + {tab.label} +
+ ))} +
+
+ ); } // rendering above class to the React DOM @@ -241,31 +781,145 @@ igc-badge::part(base) { /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -igc-badge::part(base) { - --background-color: var(--ig-error-A100); - --border-radius: 2px; +igc-badge { + --ig-size: var(--ig-size-small); +} + +.badge-teal { + --ig-badge-background-color: var(--ig-success-700); + --ig-badge-border-radius: 50%; +} + +.badge-amber { + --ig-badge-background-color: #C97C00; + --ig-badge-border-radius: 50%; +} + +.badge-magenta { + --ig-badge-background-color: #9C27B0; + --ig-badge-text-color: var(--ig-gray-50); + --ig-badge-border-radius: 50%; +} + +.badge-lime { + --ig-badge-background-color: var(--ig-success-700); + --ig-badge-border-radius: 50%; + --ig-badge-dot-size: 0.5rem; +} + +.badge-teal igc-icon, +.badge-amber igc-icon, +.styling-item.pink igc-avatar igc-icon { + color: var(--ig-gray-50); +} + +.badge-teal igc-icon { + position: relative; +} + +.badge-teal igc-icon::after { + content: ""; + position: absolute; + inset: 50% auto auto 50%; + width: 4px; + height: 4px; + border-radius: 50%; + background: var(--ig-success-700); + transform: translate(-50%, -50%); +} + +.styling-item igc-avatar { + --size: 40px; +} + +.styling-item.green igc-avatar { + --icon-color: #248436; + --ig-avatar-background: #A9CEB0; + --ig-avatar-color: #248436; +} + +.styling-item.pink igc-avatar { + --ig-avatar-background: #DA64FF; + --ig-avatar-color: var(--ig-gray-50); +} + +.styling-item igc-badge { + position: absolute; + inset-block-end: -2px; + inset-inline-end: -2px; +} + +.badge-styling { + display: flex; + align-items: center; + justify-content: center; + gap: 60px; + min-height: 7rem; +} + +.styling-item { + position: relative; + display: flex; } ``` ```tsx -import React from 'react'; +import React, { useEffect } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; -import { IgrBadge } from 'igniteui-react'; +import { IgrAvatar, IgrBadge, IgrIcon, registerIconFromText } from 'igniteui-react'; import 'igniteui-webcomponents/themes/light/bootstrap.css'; -export default class BadgeStyling extends React.Component { +const personIcon = + ''; +const photoCameraIcon = + ''; +const starBorderIcon = + ''; +const favoriteBorderIcon = + ''; + +export default function BadgeStyling(): JSX.Element { + useEffect(() => { + registerIconFromText('person', personIcon, 'material'); + registerIconFromText('photo_camera', photoCameraIcon, 'material'); + registerIconFromText('star_border', starBorderIcon, 'material'); + registerIconFromText('favorite_border', favoriteBorderIcon, 'material'); + }, []); - constructor(props: any) { - super(props); - } - - public render(): JSX.Element { - return ( -
- + return ( +
+
+ + + + + + +
+
+ + + +
- ); - } +
+ + + + 2 +
+
+ + +
+
+ ); } // rendering above class to the React DOM diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/excel-library-using-tables.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/excel-library-using-tables.md index a9800eba7..bce9fe6d8 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/excel-library-using-tables.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/excel-library-using-tables.md @@ -14,10 +14,8 @@ The Infragistics React Excel Engine's [`WorksheetTable`](https://www.infragistic
diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/features.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/features.md index 3a623da0b..408473d04 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/features.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/features.md @@ -140,7 +140,6 @@ const [comboDisabled, setComboDisabled] = useState(false); disabled={comboDisabled}> - setDisableFiltering(e.detail.checked)}> Disable Filtering diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-binding.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-binding.md index 5f3198289..236fd82ab 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-binding.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-binding.md @@ -43,7 +43,6 @@ If the grid has `autoGenerate` enabled, it will "_infer_" the new column configu ```tsx const [data, setData] = React.useState([/* initial data */]); - /** After the new binding the grid will infer the column collection from the bound data. */ const updateData = () => { setData([/* new data */]); diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-header-template.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-header-template.md index 2f77ec730..feee3bf29 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-header-template.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/react/grid-lite-header-template.md @@ -48,7 +48,6 @@ const ratingHeaderTemplate = (ctx: IgrHeaderContext) => (

{"⭐ Rating ⭐"}

); - return ( diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/badge.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/badge.md index 27b1fd103..69edd3f0b 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/badge.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/badge.md @@ -17,37 +17,141 @@ The Ignite UI for Web Components Badge is a component used in conjunction with a /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ -.wrapper { +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); +} + +.outlined-example igc-avatar igc-icon { + color: var(--ig-gray-50); +} + +.outlined-example:nth-child(2) igc-badge { + inset-block-start: auto; + inset-block-end: -6px; + 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; + inset-inline-end: -10px; +} + +.icon-circle igc-icon { + font-size: 20px; +} + +.badge-outlined { + display: flex; + align-items: center; + justify-content: center; + gap: 60px; + min-height: 7rem; +} + +.outlined-example { position: relative; display: flex; - width: fit-content; +} + +.icon-circle, +.step-circle { + display: flex; align-items: center; - margin-block: 1rem; - gap: 0.5rem; - padding: 0.5rem; - border: 1px solid var(--ig-gray-300); - border-radius: .25rem; + justify-content: center; + border-radius: 50%; } -igc-avatar { - @container style(--ig-theme: indigo) { - --ig-size: var(--ig-size-large); - } +.icon-circle { + width: 36px; + height: 36px; + background: var(--ig-gray-200); + color: var(--ig-gray-800); +} - anchor-name: --avatar; +.badge-info-blue { + --ig-badge-background-color: #0057A9; } -igc-badge { - --size: .75rem; +.badge-info-blue::part(base) { + background-color: #0057A9; +} - position: absolute; - inset-block-end: anchor(--avatar bottom); - inset-inline-end: anchor(--avatar right); +.payment-dot-blue { + --ig-badge-background-color: #0057A9; + --ig-badge-dot-size: 0.5rem; +} + +.payment-dot-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); +} + +.steps { + display: flex; + align-items: flex-start; + gap: 8px; +} + +.step { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; +} + +.step-marker { + position: relative; + display: flex; } -span { - display: block; - font-weight: 600; +.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); +} + +.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); +} + +.step-label { + color: var(--ig-gray-700); + font-size: 13px; } ``` @@ -97,6 +201,80 @@ The Ignite UI for Web Components badge supports several pre-defined stylistic va ```css /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-badge { + --ig-size: var(--ig-size-small); + position: absolute; + inset-block-end: -4px; + inset-inline-end: -4px; +} + +igc-avatar { + --ig-size: var(--ig-size-small); + --ig-avatar-background: var(--ig-gray-700); + --ig-avatar-color: var(--ig-gray-50); +} + +.variant-item:first-child igc-avatar igc-icon, +.variant-item:nth-child(4) igc-avatar igc-icon { + color: var(--ig-gray-50); +} + +.badge-variants { + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 7rem; +} + +.variant-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 12px; + min-width: 56px; +} + +.variant-item span { + color: var(--ig-gray-700); + font-size: 13px; +} + +.avatar-wrapper { + 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); +} ``` ### Shape @@ -110,6 +288,50 @@ The badge component supports `rounded`(default) and `square` shapes. These value ```css /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +.badge-shape { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 7rem; +} + +.badge-shape-row { + display: grid; + grid-template-columns: 80px 40px 40px 40px; + align-items: center; + justify-items: center; + gap: 8px; +} + +.row-label { + justify-self: end; + color: var(--ig-gray-700); + font-size: 14px; +} + +.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); +} ``` ### Dot @@ -123,6 +345,148 @@ The Ignite UI for Web Components badge component can also render as a minimal do ```css /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-badge { + --ig-size: var(--ig-size-small); + --ig-badge-dot-size: 0.5rem; +} + +igc-avatar { + --size: 40px; +} + +.icon-example igc-badge, +.avatar-example igc-badge, +.nav-icon igc-badge { + position: absolute; +} + +.icon-example igc-badge { + inset-block-start: 0; + inset-inline-end: 2px; +} + +.avatar-example igc-badge { + inset-block-start: -0.25rem; + inset-inline-end: -2px; +} + +.nav-icon igc-badge { + inset-block-start: -2px; + inset-inline-end: -6px; +} + +.badge-dot { + display: flex; + align-items: center; + justify-content: center; + gap: 40px; + min-height: 7rem; +} + +.dot-example { + position: relative; +} + +.icon-example, +.avatar-example, +.icon-circle { + display: flex; + align-items: center; + width: 36px; + height: 36px; +} + +.icon-circle { + justify-content: center; + border-radius: 50%; + background: var(--ig-gray-200); + color: var(--ig-gray-800); +} + +.notifications-card, +.nav-card { + background: var(--ig-surface-500); + border-radius: 4px; + box-shadow: 0 1px 3px hsl(from var(--ig-gray-900) h s l / 0.12); +} + +.notifications-card { + min-width: 272px; + padding: 8px 0; +} + +.notification-row { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + font-size: 14px; + color: var(--ig-gray-900); +} + +.row-indicator { + display: inline-flex; + justify-content: center; + 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; +} + +.row-time { + font-size: 13px; + color: var(--ig-gray-900); +} + +.row-time.unread { + color: #0057A9; + font-weight: 600; +} + +.row-chevron { + --ig-size: 1; + + color: var(--ig-gray-600); + font-size: 18px; +} + +.nav-card { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; +} + +.nav-item { + display: flex; + flex-direction: column; + align-items: center; + gap: 4px; + min-width: 56px; + color: var(--ig-gray-700); + font-size: 12px; +} + +.nav-item.active { + color: #0075D2; +} + +.nav-icon { + position: relative; + display: inline-flex; +} ``` ## Styling @@ -136,15 +500,90 @@ igc-badge::part(base) { } ``` -```css -igc-badge::part(base) { - --background-color: var(--ig-error-A100); - --border-radius: 2px; -} -``` ```css /* shared styles are loaded from: */ /* https://dl.infragistics.com/x/css/samples/shared.v8.css */ + +igc-badge { + --ig-size: var(--ig-size-small); +} + +.badge-teal { + --ig-badge-background-color: var(--ig-success-700); + --ig-badge-border-radius: 50%; +} + +.badge-amber { + --ig-badge-background-color: #C97C00; + --ig-badge-border-radius: 50%; +} + +.badge-magenta { + --ig-badge-background-color: #9C27B0; + --ig-badge-text-color: var(--ig-gray-50); + --ig-badge-border-radius: 50%; +} + +.badge-lime { + --ig-badge-background-color: var(--ig-success-700); + --ig-badge-border-radius: 50%; + --ig-badge-dot-size: 0.5rem; +} + +.badge-teal igc-icon, +.badge-amber igc-icon, +.styling-item.pink igc-avatar igc-icon { + color: var(--ig-gray-50); +} + +.badge-teal igc-icon { + position: relative; +} + +.badge-teal igc-icon::after { + content: ""; + position: absolute; + inset: 50% auto auto 50%; + width: 4px; + height: 4px; + border-radius: 50%; + background: var(--ig-success-700); + transform: translate(-50%, -50%); +} + +.styling-item igc-avatar { + --size: 40px; +} + +.styling-item.green igc-avatar { + --icon-color: #248436; + --ig-avatar-background: #A9CEB0; + --ig-avatar-color: #248436; +} + +.styling-item.pink igc-avatar { + --ig-avatar-background: #DA64FF; + --ig-avatar-color: var(--ig-gray-50); +} + +.styling-item igc-badge { + position: absolute; + inset-block-end: -2px; + inset-inline-end: -2px; +} + +.badge-styling { + display: flex; + align-items: center; + justify-content: center; + gap: 60px; + min-height: 7rem; +} + +.styling-item { + position: relative; + display: flex; +} ```
diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/excel-library-using-tables.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/excel-library-using-tables.md index 6b18c8dbe..ced38d170 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/excel-library-using-tables.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/excel-library-using-tables.md @@ -14,10 +14,8 @@ The Infragistics Web Components Excel Engine's [`WorksheetTable`](https://www.in
diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-cell-editing.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-cell-editing.md index 0ab053c28..55d112b26 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-cell-editing.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-cell-editing.md @@ -117,7 +117,6 @@ constructor() { column3.inlineEditorTemplate = this.webGridCellEditCellTemplate; } - public webGridCellEditCellTemplate = (ctx: IgcCellTemplateContext) => { let cellValues: any = []; let uniqueValues: any = []; diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-lite-header-template.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-lite-header-template.md index e51f23eb0..fc05db80e 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-lite-header-template.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-lite-header-template.md @@ -40,7 +40,6 @@ Similar to the cell template, you can also pass a custom template renderer and c ```typescript import { html } from 'lit'; - const column = document.querySelector('igc-grid-lite-column'); column.headerTemplate = () => html`

⭐ Rating ⭐

`; ``` diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-selection.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-selection.md index 2fa90b1f6..28f85f3cf 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-selection.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/grid-selection.md @@ -143,7 +143,6 @@ The context menu will have the following functions: this.toggleContextMenu(); } - public copySelectedData() { const selectedData = this.grid.getSelectedData(); this.copyData(selectedData); diff --git a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pivot-grid-overview.md b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pivot-grid-overview.md index 95d4997d3..f65f7c5b6 100644 --- a/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pivot-grid-overview.md +++ b/packages/igniteui-mcp/igniteui-doc-mcp/docs_baseline/webcomponents/pivot-grid-overview.md @@ -256,7 +256,6 @@ Let's take a look at a basic pivot configuration: enabled: true } - ], rows: [ {