igniteui-angular 21.0.2 → 21.0.4

package/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...

package/fesm2022/igniteui-angular-calendar.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, ElementRef, EventEmitter, HostListener, Output, Input, Directive, HostBinding, TemplateRef, NgZone, booleanAttribute, ViewChildren, Component, ChangeDetectionStrategy, Injectable, LOCALE_ID, ChangeDetectorRef, DestroyRef, Pipe, forwardRef, ContentChild, ViewChild, NgModule } from '@angular/core';
+import { InjectionToken, inject, ElementRef, EventEmitter, HostListener, Output, Input, Directive, HostBinding, TemplateRef, NgZone, booleanAttribute, ViewChildren, Component, ChangeDetectionStrategy, Injectable, LOCALE_ID, ChangeDetectorRef, Pipe, DestroyRef, forwardRef, ContentChild, ViewChild, NgModule } from '@angular/core';
 import { TitleCasePipe, getLocaleFirstDayOfWeek, NgTemplateOutlet, DatePipe } from '@angular/common';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject, fromEvent, interval, noop } from 'rxjs';
@@ -2011,6 +2011,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                 args: ['pointerdown', ['$event']]
             }] } });
 
+class DayDigitPipe {
+    transform(value, formatViews) {
+        if (!value) {
+            return '';
+        }
+        // strip non-numeric characters that might have been added by the locale formatter (e.g., "25日" -> "25").
+        if (formatViews.day) {
+            // Use regex to extract the numeric day value.
+            // This handles locales that include non-numeric characters (e.g. '25日' in zh-CN).
+            // match(/\d+/) is preferred over parseInt() as it robustly finds the digits regardless
+            // of their position (prefix/suffix) in the localized string.
+            const match = value.match(/\d+/);
+            return match ? match[0] : value;
+        }
+        return value;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DayDigitPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.0.2", ngImport: i0, type: DayDigitPipe, isStandalone: true, name: "dayDigit" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: DayDigitPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'dayDigit',
+                    standalone: true
+                }]
+        }] });
+
 let NEXT_ID$2 = 0;
 class IgxDaysViewComponent extends IgxCalendarBaseDirective {
     #standalone;
@@ -2456,7 +2483,7 @@ class IgxDaysViewComponent extends IgxCalendarBaseDirective {
                 useExisting: IgxDaysViewComponent
             },
             KeyboardNavigationService
-        ], viewQueries: [{ propertyName: "dates", predicate: IgxDayItemComponent, descendants: true, read: IgxDayItemComponent }], usesInheritance: true, ngImport: i0, template: "<div\n    role=\"row\"\n    class=\"igx-days-view__row\"\n    [title]=\"weekNumberHeader.long | titlecase\"\n>\n    @if (showWeekNumbers) {\n        <div\n            role=\"columnheader\"\n            class=\"igx-days-view__label igx-days-view__label--week-number\"\n        >\n            <span>\n                <i>{{ weekNumberHeader.short | titlecase }}</i>\n            </span>\n        </div>\n    }\n    @for (dayName of weekHeaderLabels; track dayName.long) {\n        <span\n            role=\"columnheader\"\n            [attr.aria-label]=\"dayName.long\"\n            class=\"igx-days-view__label\"\n        >\n            <span class=\"igx-days-view__label-inner\">\n                {{ dayName.formatted | titlecase }}\n            </span>\n        </span>\n    }\n</div>\n\n@for (\n    week of monthWeeks; track rowTracker(i, week);\n    let isLast = $last; let i = $index\n) {\n    <div\n        class=\"igx-days-view__row\"\n        role=\"row\"\n    >\n        @if (showWeekNumbers) {\n            <div class=\"igx-days-view__date igx-days-view__date--week-number\">\n                <span\n                    role=\"rowheader\"\n                    class=\"igx-days-view__date-inner igx-days-view__date-inner--week-number\"\n                >\n                    {{ getWeekNumber(week[0]) }}\n                </span>\n            </div>\n        }\n        @for (day of week; track dateTracker($index, day)) {\n            <igx-day-item\n                #item\n                class=\"igx-days-view__date\"\n                role=\"gridcell\"\n                [attr.id]=\"item.isCurrentMonth && day.timestamp\"\n                [attr.aria-selected]=\"isSelected(day)\"\n                [attr.aria-disabled]=\"isDateDisabled(day.native)\"\n                [attr.aria-label]=\"\n                    isFirstInRange(day)\n                        ? day.native.toDateString() +\n                          ', ' +\n                          resourceStrings.igx_calendar_range_start\n                        : isLastInRange(day)\n                          ? day.native.toDateString() +\n                            ', ' +\n                            resourceStrings.igx_calendar_range_end\n                          : day.native.toDateString()\n                \"\n                [date]=\"day\"\n                [viewDate]=\"viewDate\"\n                [selection]=\"selection\"\n                [selected]=\"isSelected(day)\"\n                [isActive]=\"isActiveDate(day)\"\n                [isLastInRange]=\"isLastInRange(day)\"\n                [isFirstInRange]=\"isFirstInRange(day)\"\n                [isWithinRange]=\"isWithinRange(day.native, true)\"\n                [isWithinPreviewRange]=\"isWithinPreviewRange(day.native)\"\n                [disabledDates]=\"disabledDates\"\n                [specialDates]=\"specialDates\"\n                [hideLeadingDays]=\"hideLeadingDays\"\n                [hideTrailingDays]=\"hideTrailingDays\"\n                [attr.tabindex]=\"-1\"\n                (click)=\"handleDateClick(item)\"\n                (mouseEnter)=\"changePreviewRange(day.native)\"\n                (mouseLeave)=\"clearPreviewRange()\"\n            >\n                {{ formattedDate(day.native) }}\n            </igx-day-item>\n        }\n    </div>\n}\n", dependencies: [{ kind: "component", type: IgxDayItemComponent, selector: "igx-day-item", inputs: ["date", "viewDate", "selection", "selected", "disabledDates", "specialDates", "hideOutsideDays", "isLastInRange", "isFirstInRange", "isWithinRange", "isWithinPreviewRange", "hideLeadingDays", "hideTrailingDays", "isActive"], outputs: ["dateSelection", "mouseEnter", "mouseLeave", "mouseDown"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], viewQueries: [{ propertyName: "dates", predicate: IgxDayItemComponent, descendants: true, read: IgxDayItemComponent }], usesInheritance: true, ngImport: i0, template: "<div\n    role=\"row\"\n    class=\"igx-days-view__row\"\n    [title]=\"weekNumberHeader.long | titlecase\"\n>\n    @if (showWeekNumbers) {\n        <div\n            role=\"columnheader\"\n            class=\"igx-days-view__label igx-days-view__label--week-number\"\n        >\n            <span>\n                <i>{{ weekNumberHeader.short | titlecase }}</i>\n            </span>\n        </div>\n    }\n    @for (dayName of weekHeaderLabels; track dayName.long) {\n        <span\n            role=\"columnheader\"\n            [attr.aria-label]=\"dayName.long\"\n            class=\"igx-days-view__label\"\n        >\n            <span class=\"igx-days-view__label-inner\">\n                {{ dayName.formatted | titlecase }}\n            </span>\n        </span>\n    }\n</div>\n\n@for (\n    week of monthWeeks; track rowTracker(i, week);\n    let isLast = $last; let i = $index\n) {\n    <div\n        class=\"igx-days-view__row\"\n        role=\"row\"\n    >\n        @if (showWeekNumbers) {\n            <div class=\"igx-days-view__date igx-days-view__date--week-number\">\n                <span\n                    role=\"rowheader\"\n                    class=\"igx-days-view__date-inner igx-days-view__date-inner--week-number\"\n                >\n                    {{ getWeekNumber(week[0]) }}\n                </span>\n            </div>\n        }\n        @for (day of week; track dateTracker($index, day)) {\n            <igx-day-item\n                #item\n                class=\"igx-days-view__date\"\n                role=\"gridcell\"\n                [attr.id]=\"item.isCurrentMonth && day.timestamp\"\n                [attr.aria-selected]=\"isSelected(day)\"\n                [attr.aria-disabled]=\"isDateDisabled(day.native)\"\n                [attr.aria-label]=\"\n                    isFirstInRange(day)\n                        ? day.native.toDateString() +\n                          ', ' +\n                          resourceStrings.igx_calendar_range_start\n                        : isLastInRange(day)\n                          ? day.native.toDateString() +\n                            ', ' +\n                            resourceStrings.igx_calendar_range_end\n                          : day.native.toDateString()\n                \"\n                [date]=\"day\"\n                [viewDate]=\"viewDate\"\n                [selection]=\"selection\"\n                [selected]=\"isSelected(day)\"\n                [isActive]=\"isActiveDate(day)\"\n                [isLastInRange]=\"isLastInRange(day)\"\n                [isFirstInRange]=\"isFirstInRange(day)\"\n                [isWithinRange]=\"isWithinRange(day.native, true)\"\n                [isWithinPreviewRange]=\"isWithinPreviewRange(day.native)\"\n                [disabledDates]=\"disabledDates\"\n                [specialDates]=\"specialDates\"\n                [hideLeadingDays]=\"hideLeadingDays\"\n                [hideTrailingDays]=\"hideTrailingDays\"\n                [attr.tabindex]=\"-1\"\n                (click)=\"handleDateClick(item)\"\n                (mouseEnter)=\"changePreviewRange(day.native)\"\n                (mouseLeave)=\"clearPreviewRange()\"\n            >\n                {{ formattedDate(day.native) | dayDigit:formatViews }}\n            </igx-day-item>\n        }\n    </div>\n}\n", dependencies: [{ kind: "component", type: IgxDayItemComponent, selector: "igx-day-item", inputs: ["date", "viewDate", "selection", "selected", "disabledDates", "specialDates", "hideOutsideDays", "isLastInRange", "isFirstInRange", "isWithinRange", "isWithinPreviewRange", "hideLeadingDays", "hideTrailingDays", "isActive"], outputs: ["dateSelection", "mouseEnter", "mouseLeave", "mouseDown"] }, { kind: "pipe", type: TitleCasePipe, name: "titlecase" }, { kind: "pipe", type: DayDigitPipe, name: "dayDigit" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImport: i0, type: IgxDaysViewComponent, decorators: [{
             type: Component,
@@ -2467,7 +2494,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.2", ngImpor
                             useExisting: IgxDaysViewComponent
                         },
                         KeyboardNavigationService
-                    ], selector: 'igx-days-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IgxDayItemComponent, TitleCasePipe], template: "<div\n    role=\"row\"\n    class=\"igx-days-view__row\"\n    [title]=\"weekNumberHeader.long | titlecase\"\n>\n    @if (showWeekNumbers) {\n        <div\n            role=\"columnheader\"\n            class=\"igx-days-view__label igx-days-view__label--week-number\"\n        >\n            <span>\n                <i>{{ weekNumberHeader.short | titlecase }}</i>\n            </span>\n        </div>\n    }\n    @for (dayName of weekHeaderLabels; track dayName.long) {\n        <span\n            role=\"columnheader\"\n            [attr.aria-label]=\"dayName.long\"\n            class=\"igx-days-view__label\"\n        >\n            <span class=\"igx-days-view__label-inner\">\n                {{ dayName.formatted | titlecase }}\n            </span>\n        </span>\n    }\n</div>\n\n@for (\n    week of monthWeeks; track rowTracker(i, week);\n    let isLast = $last; let i = $index\n) {\n    <div\n        class=\"igx-days-view__row\"\n        role=\"row\"\n    >\n        @if (showWeekNumbers) {\n            <div class=\"igx-days-view__date igx-days-view__date--week-number\">\n                <span\n                    role=\"rowheader\"\n                    class=\"igx-days-view__date-inner igx-days-view__date-inner--week-number\"\n                >\n                    {{ getWeekNumber(week[0]) }}\n                </span>\n            </div>\n        }\n        @for (day of week; track dateTracker($index, day)) {\n            <igx-day-item\n                #item\n                class=\"igx-days-view__date\"\n                role=\"gridcell\"\n                [attr.id]=\"item.isCurrentMonth && day.timestamp\"\n                [attr.aria-selected]=\"isSelected(day)\"\n                [attr.aria-disabled]=\"isDateDisabled(day.native)\"\n                [attr.aria-label]=\"\n                    isFirstInRange(day)\n                        ? day.native.toDateString() +\n                          ', ' +\n                          resourceStrings.igx_calendar_range_start\n                        : isLastInRange(day)\n                          ? day.native.toDateString() +\n                            ', ' +\n                            resourceStrings.igx_calendar_range_end\n                          : day.native.toDateString()\n                \"\n                [date]=\"day\"\n                [viewDate]=\"viewDate\"\n                [selection]=\"selection\"\n                [selected]=\"isSelected(day)\"\n                [isActive]=\"isActiveDate(day)\"\n                [isLastInRange]=\"isLastInRange(day)\"\n                [isFirstInRange]=\"isFirstInRange(day)\"\n                [isWithinRange]=\"isWithinRange(day.native, true)\"\n                [isWithinPreviewRange]=\"isWithinPreviewRange(day.native)\"\n                [disabledDates]=\"disabledDates\"\n                [specialDates]=\"specialDates\"\n                [hideLeadingDays]=\"hideLeadingDays\"\n                [hideTrailingDays]=\"hideTrailingDays\"\n                [attr.tabindex]=\"-1\"\n                (click)=\"handleDateClick(item)\"\n                (mouseEnter)=\"changePreviewRange(day.native)\"\n                (mouseLeave)=\"clearPreviewRange()\"\n            >\n                {{ formattedDate(day.native) }}\n            </igx-day-item>\n        }\n    </div>\n}\n" }]
+                    ], selector: 'igx-days-view', changeDetection: ChangeDetectionStrategy.OnPush, imports: [IgxDayItemComponent, TitleCasePipe, DayDigitPipe], template: "<div\n    role=\"row\"\n    class=\"igx-days-view__row\"\n    [title]=\"weekNumberHeader.long | titlecase\"\n>\n    @if (showWeekNumbers) {\n        <div\n            role=\"columnheader\"\n            class=\"igx-days-view__label igx-days-view__label--week-number\"\n        >\n            <span>\n                <i>{{ weekNumberHeader.short | titlecase }}</i>\n            </span>\n        </div>\n    }\n    @for (dayName of weekHeaderLabels; track dayName.long) {\n        <span\n            role=\"columnheader\"\n            [attr.aria-label]=\"dayName.long\"\n            class=\"igx-days-view__label\"\n        >\n            <span class=\"igx-days-view__label-inner\">\n                {{ dayName.formatted | titlecase }}\n            </span>\n        </span>\n    }\n</div>\n\n@for (\n    week of monthWeeks; track rowTracker(i, week);\n    let isLast = $last; let i = $index\n) {\n    <div\n        class=\"igx-days-view__row\"\n        role=\"row\"\n    >\n        @if (showWeekNumbers) {\n            <div class=\"igx-days-view__date igx-days-view__date--week-number\">\n                <span\n                    role=\"rowheader\"\n                    class=\"igx-days-view__date-inner igx-days-view__date-inner--week-number\"\n                >\n                    {{ getWeekNumber(week[0]) }}\n                </span>\n            </div>\n        }\n        @for (day of week; track dateTracker($index, day)) {\n            <igx-day-item\n                #item\n                class=\"igx-days-view__date\"\n                role=\"gridcell\"\n                [attr.id]=\"item.isCurrentMonth && day.timestamp\"\n                [attr.aria-selected]=\"isSelected(day)\"\n                [attr.aria-disabled]=\"isDateDisabled(day.native)\"\n                [attr.aria-label]=\"\n                    isFirstInRange(day)\n                        ? day.native.toDateString() +\n                          ', ' +\n                          resourceStrings.igx_calendar_range_start\n                        : isLastInRange(day)\n                          ? day.native.toDateString() +\n                            ', ' +\n                            resourceStrings.igx_calendar_range_end\n                          : day.native.toDateString()\n                \"\n                [date]=\"day\"\n                [viewDate]=\"viewDate\"\n                [selection]=\"selection\"\n                [selected]=\"isSelected(day)\"\n                [isActive]=\"isActiveDate(day)\"\n                [isLastInRange]=\"isLastInRange(day)\"\n                [isFirstInRange]=\"isFirstInRange(day)\"\n                [isWithinRange]=\"isWithinRange(day.native, true)\"\n                [isWithinPreviewRange]=\"isWithinPreviewRange(day.native)\"\n                [disabledDates]=\"disabledDates\"\n                [specialDates]=\"specialDates\"\n                [hideLeadingDays]=\"hideLeadingDays\"\n                [hideTrailingDays]=\"hideTrailingDays\"\n                [attr.tabindex]=\"-1\"\n                (click)=\"handleDateClick(item)\"\n                (mouseEnter)=\"changePreviewRange(day.native)\"\n                (mouseLeave)=\"clearPreviewRange()\"\n            >\n                {{ formattedDate(day.native) | dayDigit:formatViews }}\n            </igx-day-item>\n        }\n    </div>\n}\n" }]
         }], ctorParameters: () => [], propDecorators: { id: [{
                 type: HostBinding,
                 args: ['attr.id']