Merge branch 'master' into mpopov/fix-calendar-date-localization-styles

Author: desig9stein

CHANGELOG.md

@@ -4,23 +4,14 @@ All notable changes for each version of this project will be documented in this
 
 ## 21.0.0
 
-### Themes
-
-- `IgxButton`
-    - **Breaking Change**
-        - The following shadow-related parameters were removed from the `outlined-button-theme` and `flat-button-theme`:
-            - `resting-shadow`
-            - `hover-shadow`
-            - `focus-shadow`
-            - `active-shadow`
-
-## 21.0.0
-
 ### New Features
 
+- **New component** `IgxChat`:
+    - A component that provides complete solution for building conversational interfaces in your applications. Read up more information in the [ReadMe](https://github.com/IgniteUI/igniteui-angular/tree/master/projects/igniteui-angular/chat/README.md)
+
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`
     - Added PDF export functionality to grid components. Grids can now be exported to PDF format alongside the existing Excel and CSV export options.
-    
+
         The new `IgxPdfExporterService` follows the same pattern as Excel and CSV exporters:
 
         ```ts
@@ -60,9 +51,16 @@ All notable changes for each version of this project will be documented in this
         - **Landscape orientation** by default (suitable for wide grids)
         - **Internationalization** support for all 19 supported languages
         - Respects all grid export options (ignoreFiltering, ignoreSorting, ignoreColumnsVisibility, etc.)
-        
+
 ### Breaking Changes
 
+- `IgxButton`
+    - The following shadow-related parameters were removed from the `outlined-button-theme` and `flat-button-theme`:
+        - `resting-shadow`
+        - `hover-shadow`
+        - `focus-shadow`
+        - `active-shadow`
+
 #### Dependency Injection Refactor
 - All internal DI now uses the `inject()` API across `igniteui-angular` (no more constructor DI in library code).
 - If you extend our components/services or call their constructors directly, remove DI params and switch to `inject()` (e.g., `protected foo = inject(FooService);`).

README.md

@@ -335,15 +335,13 @@ Developer support is provided as part of the commercial, paid-for license via [I
 Community support for open source usage of this product is available at [StackOverflow](https://stackoverflow.com/questions/tagged/ignite-ui-angular).
 
 ## License
-This is a commercial product, requiring a valid paid-for license for commercial use.
-This product is free to use for non-commercial educational use for students in K through 12 grades or University programs, and for educators to use in a classroom setting as examples / tools in their curriculum.
-In order for us to verify your eligibility for free usage, please [register for trial](https://Infragistics.com/Angular) and open a support ticket with a request for free license.
+This software package is offered under a dual-license model, which allows for both commercial and permissive open-source use, depending on the components, modules, directives, and services being used.
 
-To acquire a license for commercial usage, please [register for trial](https://Infragistics.com/Angular) and refer to the purchasing options in the pricing section on the product page.
+It is crucial to understand which license applies to which part of the package.
 
 © Copyright 2025 INFRAGISTICS. All Rights Reserved.
 The Infragistics Ultimate license & copyright applies to this distribution.
-For information on that license, please go to our website [https://www.infragistics.com/legal/license](https://www.infragistics.com/legal/license).
+For information on that license, please go to [LICENSE](LICENSE).
 
 
 

projects/igniteui-angular/chat/README.md

@@ -0,0 +1,93 @@
+
+# IgxChat
+
+**IgxChat** is a component that provides a chat interface, wrapping the **IgcChat** web component.
+
+A walkthrough of how to get started can be found [here](https://www.infragistics.com/products/ignite-ui-angular/angular/components/chat)
+
+# Usage
+
+```html
+<igx-chat
+    [messages]="messages"
+    [draftMessage]="draft"
+    [options]="chatOptions"
+    [templates]="chatTemplates"
+    (messageCreated)="onMessageCreated($event)">
+</igx-chat>
+```
+
+# API Summary
+The following tables summarize the **igx-chat** inputs, outputs and directives.
+
+### Inputs
+The following inputs are available in the **igx-chat** component:
+
+| Name | Type | Description |
+| :--- | :--- | :--- |
+| `messages` | `IgcChatMessage[]` | Array of chat messages to display |
+| `draftMessage` | `{ text: string; attachments?: IgcChatMessageAttachment[] } \| undefined` | Draft message with text and optional attachments |
+| `options` | `IgxChatOptions` | Configuration options for the chat component |
+| `templates` | `IgxChatTemplates` | Custom templates for rendering chat elements |
+
+### Outputs
+The following outputs are available in the **igx-chat** component:
+
+| Name | Description | Parameters |
+| :--- | :--- | :--- |
+| `messageCreated` | Emitted when a new message is created | `IgcChatMessage` |
+| `messageReact` | Emitted when a user reacts to a message | `IgcChatMessageReaction` |
+| `attachmentClick` | Emitted when an attachment is clicked | `IgcChatMessageAttachment` |
+| `attachmentDrag` | Emitted when attachment drag starts | `void` |
+| `attachmentDrop` | Emitted when attachment is dropped | `void` |
+| `typingChange` | Emitted when typing indicator state changes | `boolean` |
+| `inputFocus` | Emitted when the input receives focus | `void` |
+| `inputBlur` | Emitted when the input loses focus | `void` |
+| `inputChange` | Emitted when the input value changes | `string` |
+
+### Directives
+The following directives are available for type checking in templates:
+
+| Name | Selector | Description |
+| :--- | :--- | :--- |
+| `IgxChatMessageContextDirective` | `[igxChatMessageContext]` | Provides type information for chat message template contexts |
+| `IgxChatAttachmentContextDirective` | `[igxChatAttachmentContext]` | Provides type information for chat attachment template contexts |
+| `IgxChatInputContextDirective` | `[igxChatInputContext]` | Provides type information for chat input template contexts |
+
+# Chat Extras
+
+The **chat-extras** module provides additional utilities for enhancing chat functionality.
+
+## MarkdownPipe
+
+The `MarkdownPipe` transforms markdown text into HTML, allowing you to render formatted messages in the chat.
+
+### Usage
+
+```typescript
+import { MarkdownPipe } from 'igniteui-angular/chat-extras';
+
+@Component({
+    standalone: true,
+    imports: [IgxChatComponent, MarkdownPipe, AsyncPipe],
+    template: `
+        <igx-chat [messages]="messages" [templates]="templates">
+            <ng-template #renderer igxChatMessageContext let-message>
+                <div [innerHTML]="message.text | fromMarkdown | async"></div>
+            </ng-template>
+        </igx-chat>
+    `
+})
+```
+
+### Supported Markdown Features
+
+The pipe supports common markdown syntax including:
+- **Bold** text (`**text**`)
+- *Italic* text (`*text*`)
+- Headings (`# H1`, `## H2`, etc.)
+- Lists (ordered and unordered)
+- Links (`[text](url)`)
+- Code blocks and inline code
+- Blockquotes
+- And more...

projects/igniteui-angular/directives/src/directives/tooltip/tooltip.common.ts

@@ -185,7 +185,7 @@ export class TooltipPositionStrategy extends AutoPositionStrategy {
             return;
         }
 
-        const arrow = tooltip.querySelector('[data-arrow="true"]') as HTMLElement;
+        const arrow = Array.from(tooltip.children).find(el => el.matches('[data-arrow="true"]')) as HTMLElement;
 
         // If display is none -> tooltipTarget's hasArrow is false
         if (!arrow || arrow.style.display === 'none') {

projects/igniteui-angular/directives/src/directives/tooltip/tooltip.directive.spec.ts

@@ -2,7 +2,7 @@ import { DebugElement } from '@angular/core';
 import { fakeAsync, TestBed, tick, flush, waitForAsync, ComponentFixture } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxTooltipSingleTargetComponent, IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent, IgxTooltipWithToggleActionComponent, IgxTooltipMultipleTooltipsComponent, IgxTooltipWithCloseButtonComponent, IgxTooltipWithNestedContentComponent } from '../../../../test-utils/tooltip-components.spec';
+import { IgxTooltipSingleTargetComponent, IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent, IgxTooltipWithToggleActionComponent, IgxTooltipMultipleTooltipsComponent, IgxTooltipWithCloseButtonComponent, IgxTooltipWithNestedContentComponent, IgxTooltipNestedTooltipsComponent } from '../../../../test-utils/tooltip-components.spec';
 import { UIInteractions } from '../../../../test-utils/ui-interactions.spec';
 import { HorizontalAlignment, VerticalAlignment, AutoPositionStrategy } from '../../../../core/src/services/public_api';
 import { IgxTooltipDirective } from './tooltip.directive';
@@ -29,7 +29,8 @@ describe('IgxTooltip', () => {
                 IgxTooltipPlainStringComponent,
                 IgxTooltipWithToggleActionComponent,
                 IgxTooltipWithCloseButtonComponent,
-                IgxTooltipWithNestedContentComponent
+                IgxTooltipWithNestedContentComponent,
+                IgxTooltipNestedTooltipsComponent
             ]
         }).compileComponents();
         UIInteractions.clearOverlay();
@@ -533,6 +534,69 @@ describe('IgxTooltip', () => {
         }));
     });
 
+    describe('Nested tooltips', () => {
+        let tooltipTarget1: IgxTooltipTargetDirective;
+        let tooltipTarget2: IgxTooltipTargetDirective;
+        let tooltipTarget3: IgxTooltipTargetDirective;
+
+        let tooltip1: IgxTooltipDirective;
+        let tooltip2: IgxTooltipDirective;
+        let tooltip3: IgxTooltipDirective;
+
+        // Handles getting the left offset when tooltip placement is Bottom
+        const getArrowLeftOffset = (tooltip: IgxTooltipDirective) => {
+            const tooltipRect = tooltip.element.getBoundingClientRect();
+            const arrowRect = tooltip.arrow.getBoundingClientRect();
+
+            const offset = tooltipRect.width / 2 - arrowRect.width / 2;
+            return Math.round(offset);
+        };
+
+        const verifyTooltipArrowAlignment = (tooltip: IgxTooltipDirective) => {
+            const arrowClassName = 'igx-tooltip--bottom';
+            const arrowTopOffset = '-4px';
+            const arrowLeftOffset = getArrowLeftOffset(tooltip) + 'px';
+
+            expect(tooltip.arrow.classList.contains(arrowClassName)).toBeTrue();
+            expect(tooltip.arrow.style.top).toBe(arrowTopOffset);
+            expect(tooltip.arrow.style.left).toBe(arrowLeftOffset);
+        };
+
+        beforeEach(waitForAsync(() => {
+            fix = TestBed.createComponent(IgxTooltipNestedTooltipsComponent);
+            fix.detectChanges();
+
+            tooltipTarget1 = fix.componentInstance.targetLevel1;
+            tooltipTarget2 = fix.componentInstance.targetLevel2;
+            tooltipTarget3 = fix.componentInstance.targetLevel3;
+
+            tooltip1 = fix.componentInstance.tooltipLevel1;
+            tooltip2 = fix.componentInstance.tooltipLevel2;
+            tooltip3 = fix.componentInstance.tooltipLevel3;
+        }));
+
+        it('should show arrow for each tooltip', fakeAsync(() => {
+            hoverElement(tooltipTarget1);
+            flush();
+            verifyTooltipVisibility(tooltip1.element, tooltipTarget1, true);
+            expect(tooltipTarget1.hasArrow).toBeTrue();
+            verifyTooltipArrowAlignment(tooltip1);
+
+            hoverElement(tooltipTarget2);
+            flush();
+            verifyTooltipVisibility(tooltip2.element, tooltipTarget2, true);
+            expect(tooltipTarget2.hasArrow).toBeTrue();
+            verifyTooltipArrowAlignment(tooltip2);
+
+            hoverElement(tooltipTarget3);
+            flush();
+            verifyTooltipVisibility(tooltip3.element, tooltipTarget3, true);
+            expect(tooltipTarget3.hasArrow).toBeTrue();
+            verifyTooltipArrowAlignment(tooltip3);
+
+        }));
+    });
+
     describe('Multiple targets with single tooltip', () => {
         let targetOne: IgxTooltipTargetDirective;
         let targetTwo: IgxTooltipTargetDirective;

projects/igniteui-angular/grids/core/src/services/csv/char-separated-value-data.ts

@@ -52,10 +52,7 @@ export class CharSeparatedValueData {
         this._escapeCharacters.push(this._delimiter);
 
         const headers = columns && columns.length ?
-                        /* When column groups are present, always use the field as it indicates the group the column belongs to.
-                        * Otherwise, in PivotGrid scenarios we can end up with many duplicated column names without a hint what they represent.
-                        */
-                        columns.map(c => c.columnGroupParent ? c.field : c.header ?? c.field) :
+                        columns.map(c => c.header ?? c.field) :
                         keys;
 
         this._headerRecord = this.processHeaderRecord(headers, this._data.length);

projects/igniteui-angular/grids/core/src/services/csv/csv-exporter-grid.spec.ts

@@ -21,6 +21,7 @@ import { IgxPivotGridComponent } from 'igniteui-angular/grids/pivot-grid';
 import { IgxGridNavigationService, IgxPivotNumericAggregate } from 'igniteui-angular/grids/core';
 import { DefaultSortingStrategy, FilteringExpressionsTree, FilteringLogic, IgxNumberFilteringOperand, IgxStringFilteringOperand, SortingDirection } from 'igniteui-angular/core';
 import { CSVWrapper } from './csv-verification-wrapper.spec';
+import { OneGroupThreeColsGridComponent } from '../../../../../test-utils/grid-mch-sample.spec';
 
 describe('CSV Grid Exporter', () => {
     let exporter: IgxCsvExporterService;
@@ -388,6 +389,20 @@ describe('CSV Grid Exporter', () => {
         expect(ExportUtilities.saveBlobToFile).toHaveBeenCalledTimes(1);
     });
 
+    it('should print column headers when available when column groups are present.', async () => {
+        const fix = TestBed.createComponent(OneGroupThreeColsGridComponent);
+        fix.componentInstance.data = [];
+        fix.detectChanges();
+
+        fix.componentInstance.grid.getColumnByName('City').header = 'Test Header';
+        fix.detectChanges();
+
+        const grid = fix.componentInstance.grid;
+
+        const wrapper = await getExportedData(grid, options);
+        wrapper.verifyData('Country,Region,Test Header', 'Only headers should be exported.');
+    });
+
     describe('Tree Grid CSV export', () => {
         let fix;
         let treeGrid: IgxTreeGridComponent;

projects/igniteui-angular/test-utils/tooltip-components.spec.ts

@@ -168,3 +168,42 @@ export class IgxTooltipWithNestedContentComponent {
     @ViewChild(IgxTooltipDirective, { static: true }) public tooltip!: IgxTooltipDirective;
     @ViewChild(IgxTooltipTargetDirective, { static: true }) public tooltipTarget!: IgxTooltipTargetDirective;
 }
+
+@Component({
+    template: `
+    <button #targetLevel1 [igxTooltipTarget]="tooltipLevel1" [hasArrow]="true">
+      Parent
+    </button>
+
+    <!-- Level 1 Tooltip -->
+    <div #tooltipLevel1="tooltip" igxTooltip>
+      Parent tooltip
+      <button #targetLevel2 [igxTooltipTarget]="tooltipLevel2" [hasArrow]="true">
+        Child
+      </button>
+
+      <!-- Level 2 Tooltip -->
+      <div #tooltipLevel2="tooltip" igxTooltip>
+        Child tooltip
+        <button #targetLevel3 [igxTooltipTarget]="tooltipLevel3" [hasArrow]="true">
+            Grandchild
+        </button>
+
+        <!-- Level 3 Tooltip -->
+        <div #tooltipLevel3="tooltip" igxTooltip>Grandchild tooltip</div>
+
+      </div>
+    </div>
+    `,
+    imports: [IgxTooltipDirective, IgxTooltipTargetDirective],
+    standalone: true
+})
+export class IgxTooltipNestedTooltipsComponent {
+    @ViewChild('targetLevel1', { read: IgxTooltipTargetDirective, static: true }) public targetLevel1: IgxTooltipTargetDirective;
+    @ViewChild('targetLevel2', { read: IgxTooltipTargetDirective, static: true }) public targetLevel2: IgxTooltipTargetDirective;
+    @ViewChild('targetLevel3', { read: IgxTooltipTargetDirective, static: true }) public targetLevel3: IgxTooltipTargetDirective;
+
+    @ViewChild('tooltipLevel1', { read: IgxTooltipDirective, static: true }) public tooltipLevel1: IgxTooltipDirective;
+    @ViewChild('tooltipLevel2', { read: IgxTooltipDirective, static: true }) public tooltipLevel2: IgxTooltipDirective;
+    @ViewChild('tooltipLevel3', { read: IgxTooltipDirective, static: true }) public tooltipLevel3: IgxTooltipDirective;
+}