igniteui-cli 15.2.2 → 15.3.1-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (134) hide show
  1. package/lib/commands/build.js +7 -12
  2. package/package.json +7 -7
  3. package/templates/blazor/igb/projects/ai-config/files/skills/AGENTS.md +0 -5
  4. package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/SKILL.md +2 -0
  5. package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/references/charts.md +7 -35
  6. package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/references/data-display.md +0 -54
  7. package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/references/feedback.md +0 -38
  8. package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/references/form-controls.md +0 -68
  9. package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/references/layout-manager.md +1 -124
  10. package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-components/references/layout.md +0 -62
  11. package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-grids/references/grid-migration.md +322 -0
  12. package/templates/blazor/igb/projects/ai-config/files/skills/igniteui-blazor-theming/SKILL.md +1 -1
  13. package/templates/react/igr-ts/projects/_base/files/package.json +1 -0
  14. package/templates/react/igr-ts/projects/_base/files/src/app/app.tsx +4 -2
  15. package/templates/react/igr-ts/projects/_base/files/src/setupTests.ts +12 -0
  16. package/templates/react/igr-ts/projects/_base/files/styles.css +6 -0
  17. package/templates/react/igr-ts/projects/_base_with_home/files/index.html +2 -1
  18. package/templates/react/igr-ts/projects/_base_with_home/files/src/app/home/home.tsx +60 -10
  19. package/templates/react/igr-ts/projects/_base_with_home/files/src/app/home/style.module.css +79 -20
  20. package/templates/react/igr-ts/projects/ai-config/files/skills/grid-lite-to-igr-grid-migration/SKILL.md +274 -0
  21. package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-components/SKILL.md +0 -8
  22. package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-components/reference/CHARTS-GRIDS.md +6 -36
  23. package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md +8 -142
  24. package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-components/reference/EVENT-HANDLING.md +2 -0
  25. package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-customize-theme/SKILL.md +7 -14
  26. package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-customize-theme/reference/CSS-THEMING.md +2 -0
  27. package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-customize-theme/reference/MCP-SERVER.md +0 -8
  28. package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-generate-from-image-design/SKILL.md +2 -2
  29. package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-generate-from-image-design/reference/component-mapping.md +60 -74
  30. package/templates/react/igr-ts/projects/ai-config/files/skills/igniteui-react-generate-from-image-design/reference/gotchas.md +2 -2
  31. package/templates/react/igr-ts/projects/empty/index.js +2 -2
  32. package/templates/react/igr-ts/projects/side-nav/files/src/app/app-routes.tsx +5 -0
  33. package/templates/react/igr-ts/projects/side-nav/files/src/app/app.css +82 -0
  34. package/templates/react/igr-ts/projects/side-nav/files/src/app/app.tsx +104 -0
  35. package/templates/react/igr-ts/projects/side-nav/files/src/app/home/home.tsx +69 -0
  36. package/templates/react/igr-ts/projects/side-nav/files/src/app/home/style.module.css +105 -0
  37. package/templates/react/igr-ts/projects/{top-nav → side-nav}/index.d.ts +2 -2
  38. package/templates/react/igr-ts/projects/{top-nav → side-nav}/index.js +7 -7
  39. package/templates/react/igr-ts/projects/side-nav-auth/files/index.html +19 -0
  40. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/app-routes.tsx +24 -0
  41. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/app.css +84 -0
  42. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/app.tsx +124 -0
  43. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/AuthContext.tsx +73 -0
  44. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/AuthGuard.tsx +14 -0
  45. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Login.module.css +93 -0
  46. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Login.tsx +69 -0
  47. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginBar.module.css +42 -0
  48. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginBar.tsx +44 -0
  49. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginDialog.module.css +14 -0
  50. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/LoginDialog.tsx +49 -0
  51. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Register.module.css +74 -0
  52. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/components/Register.tsx +67 -0
  53. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/models/external-login.ts +10 -0
  54. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/models/login.ts +4 -0
  55. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/models/register-info.ts +6 -0
  56. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/models/user.ts +19 -0
  57. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/Profile.module.css +87 -0
  58. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/Profile.tsx +42 -0
  59. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/RedirectFacebook.tsx +44 -0
  60. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/RedirectGoogle.tsx +40 -0
  61. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/pages/RedirectMicrosoft.tsx +40 -0
  62. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/services/authentication.ts +37 -0
  63. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/services/external-auth-config.ts +44 -0
  64. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/services/externalAuth.ts +272 -0
  65. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/services/fakeBackend.ts +88 -0
  66. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/services/jwtUtil.ts +10 -0
  67. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/services/pkce.ts +29 -0
  68. package/templates/react/igr-ts/projects/side-nav-auth/files/src/app/authentication/services/userStore.ts +39 -0
  69. package/templates/react/igr-ts/projects/side-nav-auth/index.d.ts +15 -0
  70. package/templates/react/igr-ts/projects/side-nav-auth/index.js +46 -0
  71. package/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app-routes.tsx +5 -0
  72. package/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app.css +109 -0
  73. package/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app.test.tsx +20 -0
  74. package/templates/react/igr-ts/projects/side-nav-mini/files/src/app/app.tsx +81 -0
  75. package/templates/react/igr-ts/projects/side-nav-mini/files/src/app/home/home.tsx +69 -0
  76. package/templates/react/igr-ts/projects/side-nav-mini/files/src/app/home/style.module.css +105 -0
  77. package/templates/react/igr-ts/projects/side-nav-mini/index.d.ts +15 -0
  78. package/templates/react/igr-ts/projects/side-nav-mini/index.js +46 -0
  79. package/templates/react/igr-ts/projects/side-nav-mini-auth/files/src/app/app.css +106 -0
  80. package/templates/react/igr-ts/projects/side-nav-mini-auth/files/src/app/app.tsx +101 -0
  81. package/templates/react/igr-ts/projects/side-nav-mini-auth/index.d.ts +15 -0
  82. package/templates/react/igr-ts/projects/side-nav-mini-auth/index.js +50 -0
  83. package/templates/webcomponents/igc-ts/projects/_base/files/src/app/app.ts +6 -1
  84. package/templates/webcomponents/igc-ts/projects/_base/files/styles.css +1 -0
  85. package/templates/webcomponents/igc-ts/projects/_base_with_home/files/index.html +2 -0
  86. package/templates/webcomponents/igc-ts/projects/_base_with_home/files/src/app/home/home.ts +103 -9
  87. package/templates/webcomponents/igc-ts/projects/_base_with_home/files/src/assets/wc.png +0 -0
  88. package/templates/webcomponents/igc-ts/projects/ai-config/files/skills/igniteui-wc-choose-components/SKILL.md +122 -160
  89. package/templates/webcomponents/igc-ts/projects/ai-config/files/skills/igniteui-wc-customize-component-theme/SKILL.md +83 -311
  90. package/templates/webcomponents/igc-ts/projects/ai-config/files/skills/igniteui-wc-customize-component-theme/references/mcp-setup.md +69 -0
  91. package/templates/webcomponents/igc-ts/projects/ai-config/files/skills/igniteui-wc-generate-from-image-design/SKILL.md +4 -1
  92. package/templates/webcomponents/igc-ts/projects/ai-config/files/skills/igniteui-wc-generate-from-image-design/references/component-mapping.md +60 -61
  93. package/templates/webcomponents/igc-ts/projects/ai-config/files/skills/igniteui-wc-generate-from-image-design/references/gotchas.md +15 -11
  94. package/templates/webcomponents/igc-ts/projects/ai-config/files/skills/igniteui-wc-migrate-grid-lite-to-premium/SKILL.md +446 -0
  95. package/templates/webcomponents/igc-ts/projects/ai-config/files/skills/igniteui-wc-optimize-bundle-size/SKILL.md +23 -274
  96. package/templates/webcomponents/igc-ts/projects/empty/index.js +1 -1
  97. package/templates/webcomponents/igc-ts/projects/side-nav/files/index.html +21 -0
  98. package/templates/webcomponents/igc-ts/projects/side-nav/files/src/app/app-routing.ts +9 -0
  99. package/templates/webcomponents/igc-ts/projects/side-nav/files/src/app/app.ts +192 -22
  100. package/templates/webcomponents/igc-ts/projects/side-nav/files/src/app/home/home.ts +175 -0
  101. package/templates/webcomponents/igc-ts/projects/side-nav/index.js +1 -1
  102. package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/index.html +25 -0
  103. package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/app-routing.ts +37 -0
  104. package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/app.ts +251 -0
  105. package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.ts +124 -0
  106. package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.ts +253 -0
  107. package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/models/external-login.ts +10 -0
  108. package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/models/login.ts +4 -0
  109. package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/models/register-info.ts +6 -0
  110. package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/models/user.ts +19 -0
  111. package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/services/authentication.ts +37 -0
  112. package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/services/external-auth-config.ts +44 -0
  113. package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/services/externalAuth.ts +272 -0
  114. package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/services/fakeBackend.ts +88 -0
  115. package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/services/jwtUtil.ts +10 -0
  116. package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/services/pkce.ts +29 -0
  117. package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/authentication/services/userStore.ts +39 -0
  118. package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/profile/profile.ts +142 -0
  119. package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/redirect/redirect-facebook.ts +57 -0
  120. package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/redirect/redirect-google.ts +53 -0
  121. package/templates/webcomponents/igc-ts/projects/side-nav-auth/files/src/app/redirect/redirect-microsoft.ts +53 -0
  122. package/templates/webcomponents/igc-ts/projects/side-nav-auth/index.d.ts +15 -0
  123. package/templates/webcomponents/igc-ts/projects/side-nav-auth/index.js +46 -0
  124. package/templates/webcomponents/igc-ts/projects/side-nav-mini/files/src/app/app-routing.ts +13 -0
  125. package/templates/webcomponents/igc-ts/projects/side-nav-mini/files/src/app/app.ts +238 -0
  126. package/templates/webcomponents/igc-ts/projects/side-nav-mini/index.d.ts +14 -0
  127. package/templates/webcomponents/igc-ts/projects/side-nav-mini/index.js +45 -0
  128. package/templates/webcomponents/igc-ts/projects/side-nav-mini-auth/files/src/app/app.ts +258 -0
  129. package/templates/webcomponents/igc-ts/projects/side-nav-mini-auth/index.d.ts +15 -0
  130. package/templates/webcomponents/igc-ts/projects/side-nav-mini-auth/index.js +50 -0
  131. package/templates/react/igr-ts/projects/top-nav/files/src/app/app.css +0 -62
  132. package/templates/react/igr-ts/projects/top-nav/files/src/app/app.tsx +0 -18
  133. package/templates/react/igr-ts/projects/top-nav/files/src/components/navigation-header/index.tsx +0 -19
  134. /package/templates/react/igr-ts/projects/{top-nav → side-nav}/files/src/app/app.test.tsx +0 -0
@@ -28,8 +28,6 @@ This reference gives high-level guidance on form controls, their key features, a
28
28
 
29
29
  ## Input
30
30
 
31
- > **Docs:** [Input](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/input)
32
-
33
31
  ```csharp
34
32
  // Program.cs
35
33
  builder.Services.AddIgniteUIBlazor(typeof(IgbInputModule));
@@ -45,10 +43,6 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbInputModule));
45
43
  }
46
44
  ```
47
45
 
48
- Key attributes: `Label`, `Placeholder`, `DisplayType` (`InputType.Text / Email / Password / Tel / Number`), `Required`, `Disabled`, `ReadOnly`, `MinLength`, `MaxLength`.
49
-
50
- Slots: `prefix`, `suffix`, `helper-text`.
51
-
52
46
  > **AGENT INSTRUCTION - Icons in slots:** Always use `IgbIcon` in `prefix`/`suffix` slots, never `<span class="material-icons">`. Font spans are `display: inline` so `vertical-align` is ignored inside the slot's flex context - the icon floats to the top. `IgbIcon` (`igc-icon`) is `display: inline-flex; align-items: center` and self-centers automatically. Register the icon in `OnAfterRenderAsync(firstRender)` after `EnsureReady()`.
53
47
 
54
48
  Events: `InputOcurred` (fires while typing), `Change` (fires on commit/blur).
@@ -59,8 +53,6 @@ Events: `InputOcurred` (fires while typing), `Change` (fires on commit/blur).
59
53
 
60
54
  ## Combo Box
61
55
 
62
- > **Docs:** [Combo Box](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/combo/overview)
63
-
64
56
  ```csharp
65
57
  builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule));
66
58
  ```
@@ -80,18 +72,12 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbComboModule));
80
72
  }
81
73
  ```
82
74
 
83
- Key attributes: `Data`, `ValueKey` (required for complex objects), `DisplayKey`, `T` (type parameter - must match `ValueKey` property type or `"object"` if no `ValueKey`), `Label`, `Placeholder`, `SingleSelect` (for single-selection mode), `Disabled`, `Required`.
84
-
85
- Events: `Opening`, `Opened`, `Closing`, `Closed`, `Change` (IgbComboChangeEventArgs).
86
-
87
75
  > **AGENT INSTRUCTION:** `IgbCombo` does **not** work inside a standard HTML `<form>`. Use `<EditForm>` with `@bind-Value` instead.
88
76
 
89
77
  ---
90
78
 
91
79
  ## Select
92
80
 
93
- > **Docs:** [Select](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/select)
94
-
95
81
  ```csharp
96
82
  builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule));
97
83
  ```
@@ -104,16 +90,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSelectModule));
104
90
  </IgbSelect>
105
91
  ```
106
92
 
107
- For grouped options use `IgbSelectHeader` and `IgbSelectGroup`. Key attributes on `IgbSelect`: `Label`, `Placeholder`, `Outlined`, `Disabled`, `Required`, `Name`. On `IgbSelectItem`: `Value`, `Selected`, `Disabled`.
108
-
109
- Slots on `IgbSelect`: `header`, `footer`, `helper-text`, `prefix`, `suffix`, `toggle-icon`.
110
-
111
93
  ---
112
94
 
113
95
  ## Date Picker
114
96
 
115
- > **Docs:** [Date Picker](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/date-picker)
116
-
117
97
  ```csharp
118
98
  builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule));
119
99
  ```
@@ -127,18 +107,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDatePickerModule));
127
107
  }
128
108
  ```
129
109
 
130
- Key attributes: `Value` (DateTime), `Min`, `Max`, `InputFormat`, `DisplayFormat`, `Locale`, `Mode` (`PickerMode.Dropdown` / `PickerMode.Dialog`), `ShowWeekNumbers`, `WeekStart`, `Disabled`, `Required`.
131
-
132
- Slots: `calendar`, `clear`, `prefix`, `suffix`, `actions` (custom footer buttons).
133
-
134
- Methods: `StepUp(DatePart)`, `StepDown(DatePart)`, `Clear()`.
135
-
136
110
  ---
137
111
 
138
112
  ## Date Range Picker
139
113
 
140
- > **Docs:** [Date Range Picker](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/date-range-picker)
141
-
142
114
  ```csharp
143
115
  builder.Services.AddIgniteUIBlazor(typeof(IgbDateRangePickerModule));
144
116
  ```
@@ -151,14 +123,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDateRangePickerModule));
151
123
  }
152
124
  ```
153
125
 
154
- Returns a start and end `DateTime`. Key attributes: `Min`, `Max`, `InputFormat`, `Locale`, `Mode`.
155
-
156
126
  ---
157
127
 
158
128
  ## Calendar
159
129
 
160
- > **Docs:** [Calendar](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/scheduling/calendar)
161
-
162
130
  ```csharp
163
131
  builder.Services.AddIgniteUIBlazor(typeof(IgbCalendarModule));
164
132
  ```
@@ -173,8 +141,6 @@ Use Calendar when the UI needs an always-visible date picker rather than an inpu
173
141
 
174
142
  ## Date Time Input
175
143
 
176
- > **Docs:** [Date Time Input](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/date-time-input)
177
-
178
144
  ```csharp
179
145
  builder.Services.AddIgniteUIBlazor(typeof(IgbDateTimeInputModule));
180
146
  ```
@@ -189,16 +155,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbDateTimeInputModule));
189
155
  }
190
156
  ```
191
157
 
192
- Key attributes: `Value` (DateTime?), `InputFormat`, `DisplayFormat`, `Min`, `Max`, `SpinLoop`.
193
-
194
- Methods: `StepUp()`, `StepDown()`, `Clear()`.
195
-
196
158
  ---
197
159
 
198
160
  ## Mask Input
199
161
 
200
- > **Docs:** [Mask Input](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/mask-input)
201
-
202
162
  ```csharp
203
163
  builder.Services.AddIgniteUIBlazor(typeof(IgbMaskInputModule));
204
164
  ```
@@ -209,14 +169,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbMaskInputModule));
209
169
  Placeholder="(555) 123-4567" />
210
170
  ```
211
171
 
212
- Key attributes: `Mask` (pattern string: `0` = digit, `L` = letter, `A` = alphanumeric), `Placeholder`, `Prompt` (fill character, default `_`), `ValueMode` (`MaskInputValueMode.Raw` or `MaskInputValueMode.WithFormatting`).
213
-
214
172
  ---
215
173
 
216
174
  ## Checkbox
217
175
 
218
- > **Docs:** [Checkbox](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/checkbox)
219
-
220
176
  ```csharp
221
177
  builder.Services.AddIgniteUIBlazor(typeof(IgbCheckboxModule));
222
178
  ```
@@ -229,16 +185,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbCheckboxModule));
229
185
  }
230
186
  ```
231
187
 
232
- Key attributes: `Checked`, `Indeterminate`, `Disabled`, `Required`, `Invalid`, `LabelPosition` (`ToggleLabelPosition.After` / `Before`), `Name`, `Value`.
233
-
234
- CSS parts: `base`, `control`, `indicator`, `label`.
235
-
236
188
  ---
237
189
 
238
190
  ## Radio / Radio Group
239
191
 
240
- > **Docs:** [Radio & Radio Group](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/radio)
241
-
242
192
  ```csharp
243
193
  builder.Services.AddIgniteUIBlazor(typeof(IgbRadioModule), typeof(IgbRadioGroupModule));
244
194
  ```
@@ -251,14 +201,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbRadioModule), typeof(IgbRadioGroupM
251
201
  </IgbRadioGroup>
252
202
  ```
253
203
 
254
- Key attributes on `IgbRadioGroup`: `Alignment` (`ContentOrientation.Horizontal` / `ContentOrientation.Vertical`), `Name`. On `IgbRadio`: `Value`, `Checked`, `Disabled`, `Invalid`, `LabelPosition`.
255
-
256
204
  ---
257
205
 
258
206
  ## Switch
259
207
 
260
- > **Docs:** [Switch](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/switch)
261
-
262
208
  ```csharp
263
209
  builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));
264
210
  ```
@@ -271,14 +217,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSwitchModule));
271
217
  }
272
218
  ```
273
219
 
274
- Key attributes: `Checked`, `Disabled`, `Required`, `LabelPosition`.
275
-
276
220
  ---
277
221
 
278
222
  ## Slider / Range Slider
279
223
 
280
- > **Docs:** [Slider & Range Slider](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/slider)
281
-
282
224
  ```csharp
283
225
  builder.Services.AddIgniteUIBlazor(typeof(IgbSliderModule), typeof(IgbRangeSliderModule));
284
226
  ```
@@ -300,16 +242,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbSliderModule), typeof(IgbRangeSlide
300
242
  }
301
243
  ```
302
244
 
303
- Key attributes on `IgbSlider`: `Value`, `Min`, `Max`, `Step`, `Disabled`, `HideTooltip`. On `IgbRangeSlider`: `Lower`, `Upper`, `Min`, `Max`, `Step`.
304
-
305
- Events (both): `Input` (fires while dragging), `Change` (fires on commit).
306
-
307
245
  ---
308
246
 
309
247
  ## Rating
310
248
 
311
- > **Docs:** [Rating](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/inputs/rating)
312
-
313
249
  ```csharp
314
250
  builder.Services.AddIgniteUIBlazor(typeof(IgbRatingModule));
315
251
  ```
@@ -322,10 +258,6 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbRatingModule));
322
258
  }
323
259
  ```
324
260
 
325
- Key attributes: `Value`, `Max`, `Step` (for half-star: `0.5`), `Disabled`, `ReadOnly`, `Label`, `ValueFormat`.
326
-
327
- Events: `Change`, `Hover`.
328
-
329
261
  ---
330
262
 
331
263
  ## Form & Binding Notes
@@ -7,9 +7,7 @@
7
7
 
8
8
  - [Dock Manager](#dock-manager)
9
9
  - [Basic Setup](#basic-setup)
10
- - [Pane Types](#pane-types)
11
10
  - [Layout Serialization](#layout-serialization)
12
- - [Events](#events)
13
11
  - [Tile Manager](#tile-manager)
14
12
  - [Key Rules](#key-rules)
15
13
 
@@ -20,40 +18,13 @@ This reference gives high-level guidance on when to use each layout manager comp
20
18
 
21
19
  ## Dock Manager
22
20
 
23
- > **Docs:** [Dock Manager](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/dock-manager)
24
-
25
21
  Dock Manager provides an IDE-like dockable pane layout. Users can drag panes to dock, float, pin/unpin, and close them at runtime.
26
22
 
27
23
  ```csharp
24
+ // In Program.cs or Startup.cs
28
25
  builder.Services.AddIgniteUIBlazor(typeof(IgbDockManagerModule));
29
26
  ```
30
27
 
31
- Key properties on `IgbDockManager`:
32
-
33
- | Property | Type | Description |
34
- |---|---|---|
35
- | `Layout` | `IgbDockManagerLayout` | Gets/sets the layout configuration |
36
- | `ActivePane` | `IgbContentPane` | Gets/sets the currently active (focused) pane |
37
- | `MaximizedPane` | `IgbDockManagerPane` | Gets/sets the maximized pane |
38
- | `AllowFloatingPanesResize` | `bool` | Allows resizing floating panes (default: `true`) |
39
- | `AllowInnerDock` | `bool` | Allows inner-docking panes (default: `true`) |
40
- | `AllowMaximize` | `bool` | Allows maximizing panes (default: `true`) |
41
- | `AllowSplitterDock` | `bool` | Allows docking by dragging over a splitter (default: `false`) |
42
- | `CloseBehavior` | `PaneActionBehavior` | `AllPanes` or `SelectedPane` — which pane(s) close when clicking close in a TabGroup (default: `AllPanes`) |
43
- | `UnpinBehavior` | `PaneActionBehavior` | `AllPanes` or `SelectedPane` — which pane(s) unpin when clicking unpin (default: `AllPanes`) |
44
- | `ContainedInBoundaries` | `bool` | Keeps floating panes inside the Dock Manager bounds (default: `false`) |
45
- | `ProximityDock` | `bool` | Enables docking by proximity instead of indicators (default: `false`) |
46
- | `ShowPaneHeaders` | `DockManagerShowPaneHeaders` | `Always` or `OnHoverOnly` (default: `Always`) |
47
- | `ShowHeaderIconOnHover` | `DockManagerShowHeaderIconOnHover` | Which tab icons show on hover: `None`, `All`, `CloseOnly`, `MoreOptionsOnly` (default: `None`) |
48
- | `DisableKeyboardNavigation` | `bool` | Disables built-in keyboard shortcuts (default: `false`) |
49
-
50
- Key methods on `IgbDockManager`:
51
-
52
- | Method | Returns | Description |
53
- |---|---|---|
54
- | `FocusPane(string contentId)` | `void` | Programmatically focuses a pane by its content ID |
55
- | `GetCurrentLayout()` | `IgbDockManagerLayout` | Returns the current layout object reflecting runtime state |
56
-
57
28
  ### Basic Setup
58
29
 
59
30
  Dock Manager uses a C# layout object graph to define pane structure. Pane content is projected via named slots.
@@ -112,102 +83,16 @@ Dock Manager uses a C# layout object graph to define pane structure. Pane conten
112
83
  }
113
84
  ```
114
85
 
115
- ### Pane Types
116
-
117
- | Class | Description |
118
- |---|---|
119
- | `IgbSplitPane` | Container that splits horizontally or vertically into child panes |
120
- | `IgbTabGroupPane` | Container that groups content panes into tabs |
121
- | `IgbContentPane` | Leaf pane with actual content (maps to a named slot) |
122
- | `IgbDocumentHost` | Special container for document-style tabbed panes (like an IDE editor area). Contains a `RootPane` (`IgbSplitPane`) |
123
-
124
- Key properties on `IgbContentPane`:
125
-
126
- | Property | Type | Description |
127
- |---|---|---|
128
- | `ContentId` | `string` | Must match the `slot` name on the projected content element |
129
- | `Header` | `string` | Pane tab header title |
130
- | `HeaderId` | `string` | Slot name for a custom header template element. Falls back to `Header` text if not set |
131
- | `Size` | `double` | Size relative to sibling panes (default: `100`) |
132
- | `AllowClose` | `bool` | Shows/hides the close button (default: `true`) |
133
- | `AllowPinning` | `bool` | Allows pin/unpin (default: `true`) |
134
- | `AllowMaximize` | `bool` | Allows maximize |
135
- | `AllowFloating` | `bool` | Allows tearing off into a floating window (default: `true`) |
136
- | `AllowDocking` | `bool` | Allows the user to dock the pane (default: `true`) |
137
- | `IsPinned` | `bool` | Set to `false` to start as an unpinned (collapsed to edge) pane |
138
- | `IsMaximized` | `bool` | Whether the pane is maximized (default: `false`) |
139
- | `Hidden` | `bool` | Hides the pane from the UI (default: `false`) |
140
- | `Disabled` | `bool` | Disables the pane (default: `false`) |
141
- | `DocumentOnly` | `bool` | Restricts the pane so it can only be docked inside a document host |
142
- | `UnpinnedLocation` | `UnpinnedLocation` | Edge where the unpinned flyout appears. Auto-calculated from document host if not set |
143
- | `UnpinnedSize` | `double` | Absolute size of the pane when unpinned (default: `200`) |
144
- | `Id` | `string` | Pane identifier. Auto-generated if not set |
145
-
146
- Key properties on `IgbSplitPane`:
147
-
148
- | Property | Type | Description |
149
- |---|---|---|
150
- | `Orientation` | `SplitPaneOrientation` | `Horizontal` or `Vertical` |
151
- | `Panes` | `IgbDockManagerPaneCollection` | Child panes |
152
- | `Size` | `double` | Size relative to sibling panes (default: `100`) |
153
- | `FloatingLocation` | `IgbDockManagerPoint` | Absolute position of a floating pane |
154
- | `FloatingWidth` | `double` | Absolute width of a floating pane (default: `100`) |
155
- | `FloatingHeight` | `double` | Absolute height of a floating pane (default: `100`) |
156
- | `FloatingResizable` | `bool` | Whether floating pane resizing is allowed |
157
- | `AllowEmpty` | `bool` | Whether the pane stays in the UI when it has no children |
158
- | `IsMaximized` | `bool` | Whether the split pane is maximized (default: `false`) |
159
- | `UseFixedSize` | `bool` | Sizes children in pixels instead of relative; allows scrollable overflow (default: `false`) |
160
- | `Id` | `string` | Pane identifier. Auto-generated if not set |
161
-
162
- Key properties on `IgbTabGroupPane`:
163
-
164
- | Property | Type | Description |
165
- |---|---|---|
166
- | `Panes` | `IgbContentPaneCollection` | Child content panes displayed as tabs |
167
- | `SelectedIndex` | `double` | Index of the initially selected tab |
168
- | `Size` | `double` | Size relative to sibling panes (default: `100`) |
169
- | `AllowEmpty` | `bool` | Whether the tab group stays in the UI when it has no children |
170
- | `IsMaximized` | `bool` | Whether the tab group is maximized (default: `false`) |
171
- | `Id` | `string` | Pane identifier. Auto-generated if not set |
172
-
173
- Key properties on `IgbDocumentHost`:
174
-
175
- | Property | Type | Description |
176
- |---|---|---|
177
- | `RootPane` | `IgbSplitPane` | The root split pane inside the document host |
178
- | `Size` | `double` | Size relative to sibling panes (default: `100`) |
179
- | `Id` | `string` | Pane identifier. Auto-generated if not set |
180
-
181
86
  ### Layout Serialization
182
87
 
183
88
  Persisting a Dock Manager layout is version-sensitive. The current `dock-manager` MCP overview documents the layout object graph, pane content slots, styling, and keyboard behavior; it does not show a verified Blazor serialization sample in this reference. Before generating persistence code, inspect the current installed API and use only the documented event signatures and methods for that version.
184
89
 
185
90
  > **AGENT INSTRUCTION - Layout serialization:** The serialized JSON contains only pane structure and positions. It does **not** serialize the slot content. The slot content markup must remain static in the Razor template; only pane arrangement changes at runtime.
186
91
 
187
- ### Events
188
-
189
- **Blazor EventCallbacks** (direct Blazor binding):
190
-
191
- | Event | Type | Description |
192
- |---|---|---|
193
- | `LayoutChange` | `EventCallback<IgbLayoutChangeEventArgs>` | Fires when the layout is modified by user interaction (drag, close, resize) |
194
- | `LayoutChanged` | `EventCallback<IgbDockManagerLayout>` | Fires after the layout has changed; provides the updated layout object |
195
-
196
- **Web-component-level events** (accessible via JavaScript interop, not as Blazor EventCallbacks):
197
-
198
- | Event | Description |
199
- |---|---|
200
- | `paneClose` | Fires when a pane is closed; detail contains the closed pane(s) |
201
- | `activePaneChanged` | Fires when the active (focused) pane changes |
202
- | `splitterResizeStart` | Fires when a splitter drag begins |
203
- | `splitterResizeEnd` | Fires when a splitter drag ends |
204
-
205
92
  ---
206
93
 
207
94
  ## Tile Manager
208
95
 
209
- > **Docs:** [Tile Manager](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/tile-manager)
210
-
211
96
  Tile Manager provides a resizable, draggable tile/widget dashboard layout.
212
97
 
213
98
  ```csharp
@@ -231,14 +116,6 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbTileManagerModule));
231
116
  </IgbTileManager>
232
117
  ```
233
118
 
234
- Key attributes on `IgbTileManager`: `ColumnCount`, `Gap` (CSS length string such as `"8px"`), `MinColumnWidth`, `MinRowHeight`, `ResizeMode` (`TileManagerResizeMode.*`), `DragMode` (`TileManagerDragMode.*`).
235
-
236
- Key attributes on `IgbTile`: `ColSpan`, `RowSpan`, `ColStart`, `RowStart`, `Maximized`, `Position`, `DisableFullscreen`, `DisableMaximize`, `DisableResize`.
237
-
238
- Slots on `IgbTile`: `title` (header), `actions` (header action buttons), `fullscreen-action`, `maximize-action`, `side-adorner`, `corner-adorner`, `bottom-adorner`. Default slot = tile body content.
239
-
240
- Methods on `IgbTileManager`: `SaveLayout()` and `LoadLayout(string)` persist tile order, size, and position. `GetTiles()` returns the current `IgbTile[]` array. Tile content is not serialized.
241
-
242
119
  ---
243
120
 
244
121
  ## Key Rules
@@ -20,8 +20,6 @@ This reference gives high-level guidance on layout and navigation components, th
20
20
 
21
21
  ## Tabs
22
22
 
23
- > **Docs:** [Tabs](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/tabs)
24
-
25
23
  ```csharp
26
24
  builder.Services.AddIgniteUIBlazor(typeof(IgbTabsModule));
27
25
  ```
@@ -51,20 +49,10 @@ For icon tabs, use the `label` slot inside `IgbTab`:
51
49
  </IgbTab>
52
50
  ```
53
51
 
54
- Key attributes on `IgbTabs`: `Alignment` (`TabsAlignment.Start` / `End` / `Center` / `Justify`), `Activation` (`TabsActivation.Auto` / `Manual`). On `IgbTab`: `Label`, `Disabled`, `Selected`.
55
-
56
- Events on `IgbTabs`: `Change` (`EventCallback<IgbTabComponentEventArgs>`) - fires when the selected tab changes.
57
-
58
- Methods on `IgbTabs`: `Select(string id)` — selects a tab by id; `GetSelected()` — returns the id of the currently selected tab.
59
-
60
- CSS parts: `headers`, `headers-content`, `headers-wrapper`, `header`, `selected-indicator`, `content`.
61
-
62
52
  ---
63
53
 
64
54
  ## Stepper
65
55
 
66
- > **Docs:** [Stepper](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/stepper)
67
-
68
56
  ```csharp
69
57
  builder.Services.AddIgniteUIBlazor(typeof(IgbStepperModule));
70
58
  ```
@@ -94,22 +82,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbStepperModule));
94
82
  }
95
83
  ```
96
84
 
97
- Key attributes on `IgbStepper`: `Linear` (prevents skipping steps), `Orientation` (`StepperOrientation.Horizontal` / `Vertical`), `StepType` (`StepperStepType.Indicator` / `Title` / `Full`), `TitlePosition` (`StepperTitlePosition.Auto` / `Bottom` / `Top` / `End` / `Start`), `ContentTop` (renders step content above the header), `HorizontalAnimation` (`HorizontalTransitionAnimation.Slide` / `Fade` / `None`), `VerticalAnimation` (`StepperVerticalAnimation.Grow` / `Fade` / `None`), `AnimationDuration`.
98
-
99
- Key attributes on `IgbStep`: `Complete`, `Optional`, `Disabled`, `Invalid`, `Active`.
100
-
101
- Slots on `IgbStep`: `indicator` (custom icon/number), `title`, `subtitle`.
102
-
103
- Methods on `IgbStepper`: `Next()`, `Prev()`, `NavigateTo(index)`, `Reset()`.
104
-
105
- Events: `ActiveStepChanging` (cancellable), `ActiveStepChanged`.
106
-
107
85
  ---
108
86
 
109
87
  ## Accordion & Expansion Panel
110
88
 
111
- > **Docs:** [Accordion](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/accordion), [Expansion Panel](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/layouts/expansion-panel)
112
-
113
89
  ```csharp
114
90
  builder.Services.AddIgniteUIBlazor(typeof(IgbAccordionModule));
115
91
  // IgbExpansionPanel is included in IgbAccordionModule
@@ -141,20 +117,10 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbAccordionModule));
141
117
  }
142
118
  ```
143
119
 
144
- Key attributes on `IgbAccordion`: `SingleExpand` (only one panel open at a time). On `IgbExpansionPanel`: `Open`, `Disabled`, `IndicatorPosition` (`ExpansionPanelIndicatorPosition.Start` / `End` / `None`).
145
-
146
- Slots on `IgbExpansionPanel`: `title`, `subtitle`, `indicator` (custom expand icon).
147
-
148
- Events on `IgbExpansionPanel`: `Opening` (cancellable), `Opened`, `Closing` (cancellable), `Closed`. These same events also fire on `IgbAccordion` at the accordion level.
149
-
150
- Methods on `IgbExpansionPanel`: `Show()`, `Hide()`, `Toggle()`. Methods on `IgbAccordion`: `ShowAll()`, `HideAll()`.
151
-
152
120
  ---
153
121
 
154
122
  ## Navbar
155
123
 
156
- > **Docs:** [Navbar](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/menus/navbar)
157
-
158
124
  ```csharp
159
125
  builder.Services.AddIgniteUIBlazor(typeof(IgbNavbarModule));
160
126
  ```
@@ -168,24 +134,12 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbNavbarModule));
168
134
  </IgbNavbar>
169
135
  ```
170
136
 
171
- Slots: `start` (left content, e.g., menu button), `end` (right content, e.g., action icons). The default slot is used for the title.
172
-
173
- CSS parts: `base`, `start`, `middle`, `end`.
174
-
175
- Required theme CSS:
176
-
177
- ```html
178
- <link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
179
- ```
180
-
181
137
  > **AGENT INSTRUCTION:** Register icons used by `IgbNavbar` and `IgbIconButton` before relying on them in samples. Call `await iconRef.EnsureReady()` before `RegisterIconAsync()` or `RegisterIconFromTextAsync()`.
182
138
 
183
139
  ---
184
140
 
185
141
  ## Navigation Drawer
186
142
 
187
- > **Docs:** [Navigation Drawer](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/menus/navigation-drawer)
188
-
189
143
  ```csharp
190
144
  builder.Services.AddIgniteUIBlazor(
191
145
  typeof(IgbNavDrawerModule),
@@ -268,12 +222,6 @@ Mini variant:
268
222
  </IgbNavDrawer>
269
223
  ```
270
224
 
271
- Key attributes on `IgbNavDrawer`: `Open`, `Position` (`NavDrawerPosition.Start` / `End` / `Top` / `Bottom` / `Relative`). On `IgbNavDrawerItem`: `Active`, `Disabled`. Use the `mini` slot to provide collapsed icon-only content.
272
-
273
- Methods: `Show()`, `Hide()`, `Toggle()`.
274
-
275
- CSS parts: `base`, `main`, `mini`.
276
-
277
225
  > **AGENT INSTRUCTION - IgbNavDrawer shadow DOM mechanics:**
278
226
  >
279
227
  > Regardless of `Open` state or `style` on the host, `::part(base)` is always rendered as `position: fixed; transform: translateX(-Npx)`. When the component considers itself closed it also sets `inert` on `::part(base)`. The host element itself contributes `width: 0` to the layout because the fixed part takes no space.
@@ -289,8 +237,6 @@ CSS parts: `base`, `main`, `mini`.
289
237
 
290
238
  ## Tree
291
239
 
292
- > **Docs:** [Tree](https://www.infragistics.com/products/ignite-ui-blazor/blazor/components/grids/tree)
293
-
294
240
  ```csharp
295
241
  builder.Services.AddIgniteUIBlazor(typeof(IgbTreeModule), typeof(IgbTreeItemModule));
296
242
  ```
@@ -307,14 +253,6 @@ builder.Services.AddIgniteUIBlazor(typeof(IgbTreeModule), typeof(IgbTreeItemModu
307
253
  </IgbTree>
308
254
  ```
309
255
 
310
- Key attributes on `IgbTree`: `Selection` (`TreeSelection.None` / `Multiple` / `Cascade`), `SingleBranchExpand` (only one branch expanded at a time), `ToggleNodeOnClick` (toggle expand on click). On `IgbTreeItem`: `Label`, `Value`, `Expanded`, `Selected`, `Disabled`, `Active`, `Loading`.
311
-
312
- Slots on `IgbTreeItem`: `label` (custom label content), `indicator` (expand/collapse icon override). Nest `IgbTreeItem` children directly inside a parent `IgbTreeItem`.
313
-
314
- Methods on `IgbTree`: `ExpandToItem(IgbTreeItem)`. Methods on `IgbTreeItem`: `Expand()`, `Collapse()`, `Toggle()`, `GetPath()` (returns ancestor chain).
315
-
316
- Events on `IgbTree`: `SelectionChanged` (`EventCallback<IgbTreeSelectionEventArgs>`), `ItemExpanding` (cancellable), `ItemExpanded`, `ItemCollapsing` (cancellable), `ItemCollapsed`, `ActiveItem`.
317
-
318
256
  ---
319
257
 
320
258
  ## Key Rules