v27.1.48 is released

Author: pipeline

config.json

@@ -5,7 +5,7 @@
     "styleDependency": ["ej2"],
     "github": ["/source/**/*.{css,ts,html,json}", "!/source/**/*.{d.ts,ngfactory.ts,ngstyle.ts,ngsummary.json}", "./styles/images{,/**}", "./styles/{index.css,highlight.css}", "./styles/*.scss", "./dist/zone.min.js", "/source/**/images{,/**}", "/source/common/cldr-data{,/**}", "./index.html", "./favicon.ico", "package.json", "tsconfig-aot.json", "webpack.config.js", "license"],
     "publishSamples": ["./output/**/*.*"],
-    "releaseVersion": "26.1.35",
+    "releaseVersion": "27.1.48",
     "platform": "angular",
     "customNames": [
         "listview",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ej2-angular-samples",
-  "version": "26.1.35",
+  "version": "27.1.48",
   "private": true,
   "dependencies": {
     "@angular/animations": "17.1.2",
@@ -49,6 +49,7 @@
     "@syncfusion/ej2-angular-treegrid": "*",
     "@syncfusion/ej2-angular-treemap": "*",
     "@syncfusion/ej2-angular-image-editor": "*",
+    "@syncfusion/ej2-angular-interactive-chat": "*",
     "marked": "4.0.10",
     "rxjs": "7.8.0"
   },

sampleOrder.json

@@ -794,6 +794,15 @@
             "api": "API"
         }
     },
+    "ai-assistview": {
+        "ControlName": "AI AssistView",
+        "Samples": {
+            "default": "Default Functionalities",
+            "custom-views": "Custom Views",
+            "template": "Template",
+            "dialog": "Dialog"
+        }
+    },
     "pager": {
         "ControlName": "Pager",
         "Samples": {
@@ -805,12 +814,22 @@
     "pdfviewer": {
         "ControlName": "PDF Viewer",
         "Samples": {
-            "default": "Default functionalities",
+            "default": "Default",
+            "read-only": "Read-Only",
+            "document-list": "Document List",
+            "multi-format-viewer": "Multi-Format Viewer",
+            "organize-pdf": "Organize Pages",
+            "redaction": "Redaction",
             "custom-toolbar": "Custom Toolbar",
+            "custom-context-menu":"Context Menu",
             "right-to-left": "Right To Left",
             "form-filling": "Form Filling",
+            "form-designer": "Form Designer",
+            "esigning-form-designer": "eSigning Form Designer",
+            "esigning-pdf-forms": "eSigning PDF Forms",
+            "annotations": "Annotations",
             "hand-written": "Handwritten Signature",
-            "form-designer": "Form Designer"
+            "invisible-signature": "Invisible Signature"
         }
     },
     "pivot-table": {
@@ -931,13 +950,19 @@
             "types": "Type",
             "insert-emoticons": "Insert Emoticons",
             "insert-special-charcters": "Insert Special Characters",
-            "markdown-editor": "Overview",
-            "markdown-editor-preview": "Preview",
-            "markdown-editor-custom-format": "Custom Format",
             "reactive-form": "Reactive Form",
             "template-driven": "Template Driven"
         }
     },
+    "mark-down-editor": {
+        "ControllerName": "Markdown Editor",
+        "Samples":{
+            "overview": "Overview",
+            "default-functionalities": "Default Functionalities",
+            "custom-format": "Custom Format",
+            "mention-integration": "Mention Integration"
+        }
+    },
     "schedule": {
         "ControlName": "Scheduler",
         "Samples": {
@@ -1096,10 +1121,21 @@
         "Samples": {
             "default": "Default Functionalities",
             "formula": "Formula",
+            "protect-sheet": "Protect Sheet",
+            "freeze-panes": "Freeze Panes",
+            "data-validation": "Data Validation",
+            "hyperlink": "Hyperlink",
             "cell-data-binding": "Cell Data Binding",
             "remote-data-binding": "Remote Data Binding",
             "cell-formatting": "Cell Formatting",
-            "number-formatting": "Number Formatting"
+            "number-formatting": "Number Formatting",
+            "conditional-formatting": "Conditional Formatting",
+            "sorting-and-filtering": "Sorting and Filtering",
+            "chart": "Chart",
+            "image": "Image",
+            "cell-template": "Cell Template",
+            "note": "Note",
+            "print": "Print"
         }
     },
     "stock-chart": {

src/app/ai-assistview/aiassistview.module.ts

@@ -0,0 +1,18 @@
+import { NgModule, ModuleWithProviders, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { BrowserModule } from '@angular/platform-browser';
+import { AIAssistDefaultComponent } from './default.component';
+import { AIAssistCustomViewsComponent } from './custom-views.component';
+import { AIAssistDialogComponent } from './dialog.component';
+import { AIAssistTemplateComponent } from './template.component';
+
+export const aiassistviewAppRoutes: Object[] = [
+    { path: ':theme/ai-assistview/default', component: AIAssistDefaultComponent, name: 'Default Functionalities', description: 'Showcases the default combinations of the AiAssistView component.', category: 'AI AssistView', order: '01' },
+    { path: ':theme/ai-assistview/custom-views', component: AIAssistCustomViewsComponent, name: 'Custom Views', description: 'Showcases the views combinations of the AiAssistView component.', category: 'AI AssistView', order: '01' },
+    { path: ':theme/ai-assistview/template', component: AIAssistTemplateComponent, name: 'Template', description: 'Showcases the template properties of the AiAssistView component.', category: 'AI AssistView', order: '01' },
+    { path: ':theme/ai-assistview/dialog', component: AIAssistDialogComponent, name: 'Dialog', description: 'Showcases the default combinations of the AiAssistView component views.', category: 'Integration', order: '02' }
+];
+
+export const AIAssistSampleModule: ModuleWithProviders<any> = RouterModule.forChild(aiassistviewAppRoutes);
+

src/app/ai-assistview/custom-views.component.css

@@ -0,0 +1,84 @@
+
+.views-aiassistview {
+    width: max(50%, 500px);
+    margin: 30px auto;
+}
+
+.views-aiassistview .view-container {
+    margin: 20px auto;
+    width: 80%;
+}
+
+.views-aiassistview .view-container:not(.response-view) {
+    display: flex;
+    flex-direction: column;
+    gap: 15px;
+}
+
+.views-aiassistview .view-container .generate-btn,
+.views-aiassistview .view-container .suggestions li {
+    width: fit-content;
+}
+
+.views-aiassistview .view-container .suggestions {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+.views-aiassistview .view-container .suggestions li {
+    padding: 5px 10px;
+    margin-top: 10px;
+    cursor: pointer;
+}
+
+.views-aiassistview .response-view {
+    flex-direction: column-reverse;
+    max-height: 450px;
+}
+
+.views-aiassistview .view-container .responseItemContent {
+    padding: 10px 10px;
+    margin-top: 10px;
+    display: flex;
+    gap: 10px;
+    font-size: 14px;
+    line-height: 28px;
+}
+
+.views-aiassistview .view-container .responseItemContent .response-header {
+    font-style: italic;
+}
+
+.views-aiassistview .view-container .responseItemContent span {
+    font-size: 20px;
+    margin-top: 3px;
+}
+
+.views-aiassistview .view-container .responseItemContent:hover {
+    background: none;
+}
+
+.views-aiassistview .view-container .default-response {
+    flex-direction: row;
+}
+
+@media only screen and (max-width: 750px) {
+    .views-aiassistview,
+    .views-aiassistview .view-container .generate-btn,
+    .views-aiassistview .view-container .suggestions li {
+        width: 100%;
+    }
+
+    .views-aiassistview .view-container {
+        width: 90%;
+    }
+
+    .views-aiassistview .view-container .suggestions li {
+        padding: 0px 10px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: block;
+    }
+}

src/app/ai-assistview/custom-views.component.ts

@@ -0,0 +1,123 @@
+import { Component, ViewChild, ViewEncapsulation, Inject, AfterViewChecked, ElementRef } from '@angular/core';
+import { AIAssistViewModule, AIAssistViewComponent, AIAssistViewAllModule } from '@syncfusion/ej2-angular-interactive-chat';
+import { SBDescriptionComponent } from '../common/dp.component';
+import { SBActionDescriptionComponent } from '../common/adp.component';
+import { Button } from "@syncfusion/ej2-angular-buttons";
+import { TextArea } from "@syncfusion/ej2-angular-inputs";
+import { defaultPromptResponseData, defaultSuggestions } from './promptResponseData';
+
+@Component({
+    selector: 'control-content',
+    templateUrl: 'custom-views.html',
+    styleUrls: ['custom-views.component.css'],
+    encapsulation: ViewEncapsulation.None,
+    standalone: true,
+    imports: [AIAssistViewModule, AIAssistViewAllModule, SBActionDescriptionComponent, SBDescriptionComponent]
+})
+export class AIAssistCustomViewsComponent{
+    constructor(@Inject('sourceFiles') private sourceFiles: any) {
+        sourceFiles.files = ['custom-views.component.css'];
+    }
+
+    @ViewChild('viewsAIAssistView')
+    public viewsAIAssistView: AIAssistViewComponent;
+
+    public prompts: { [key: string]: string | string[] } [] = defaultPromptResponseData;
+
+    public suggestions: string[] = defaultSuggestions;
+
+    public viewTemplate: string = '<div class="view-container"><h5>Custom view content</h5></div>';
+
+    public promptViewContent = () => {
+        var suggestionsElem = '';
+        this.suggestions.forEach((suggestion) => {
+            suggestionsElem += `<li class="suggestion-item e-card">${suggestion}</li>`;
+        });
+        return `<div class="view-container">
+                   <textarea id="promptTextarea"></textarea>
+                   <button id="generateBtn"></button>
+                   <ul class="suggestions">${suggestionsElem}</ul>
+                </div>`;
+    };
+
+    public responseViewContent = () => {
+        return `<div class="view-container response-view">
+            <div class="responseItemContent default-response e-card">
+            <span class="e-icons e-circle-info"></span>
+            No prompt provided. Please enter a prompt and click 'Generate Prompt' to see the response.</div>
+        </div>`;
+    };
+
+    public onCreate = () => {
+        var textareaObj: TextArea = new TextArea({
+            placeholder: "Enter your prompt...",
+            rows: 5,
+            resizeMode: 'None',
+            input: (e) => {
+                generateBtn.disabled = !e.value;
+            }
+        });
+        textareaObj.appendTo('#promptTextarea');
+
+        var generateBtn: Button = new Button({ cssClass: 'e-primary generate-btn', content:'Generate Prompt', disabled: true });
+        generateBtn.appendTo('#generateBtn');
+        generateBtn.element.addEventListener('click',() => {
+            var promptValue = textareaObj.value;
+            if (promptValue) {
+                textareaObj.value = '';
+                generateBtn.disabled = true;
+                this.viewsAIAssistView.activeView = 1;
+                this.viewsAIAssistView.dataBind();   
+                this.updateResponseView(promptValue);
+            }
+        });
+
+        this.viewsAIAssistView.element.querySelector('.view-container .suggestions').addEventListener('click',(e) => {
+            if ((e.target as any).classList.contains('suggestion-item')) {
+                textareaObj.value = (e.target as any).textContent;
+                generateBtn.disabled = false;
+            }
+        });
+    };
+
+    public updateResponseView = (prompt: string) => {
+        var responseView = this.viewsAIAssistView.element.querySelector('.view-container');
+        var separatorElem = '<hr style="height: 1px;margin: 0;">';
+        var responseItemElem = `<div class="responseItemContent e-card">
+                                    <div class="response-header"><b>Prompt:</b> ${prompt}</div>${separatorElem}
+                                    <div class="content">
+                                        <div class="e-skeleton e-shimmer-wave" style="width: 100%; height: 20px;"></div>
+                                        <div class="e-skeleton e-shimmer-wave" style="width: 80%; height: 20px;"></div>
+                                        <div class="e-skeleton e-shimmer-wave" style="width: 100%; height: 20px;"></div>
+                                    </div>
+                                    ${separatorElem}
+                                    <div class="options">
+                                        <button id="copyBtn" class="e-btn e-normal e-skeleton e-shimmer-wave">Copy</button>
+                                    </div>
+                                </div>`;
+        var defaultResponse = responseView.querySelector('.default-response');
+        if (defaultResponse) {
+            defaultResponse.remove();
+        }
+        responseView.innerHTML = responseItemElem + responseView.innerHTML;
+        setTimeout(() => {
+            var foundPrompt = this.prompts.find((promptObj) => promptObj.prompt === prompt);
+            var defaultResponse = 'For real-time prompt processing, connect the AI AssistView control to your preferred AI service, such as OpenAI or Azure Cognitive Services. Ensure you obtain the necessary API credentials to authenticate and enable seamless integration.';
+
+            var response = foundPrompt ? foundPrompt.response : defaultResponse;
+            responseView.children[0].querySelector('.content').innerHTML = response as string;
+            var copyBtn = responseView.children[0].querySelector('#copyBtn');
+            copyBtn.classList.remove('e-skeleton', 'e-shimmer-wave');
+            copyBtn.addEventListener('click', function(e) {
+                var textToCopy = (e.target as any).parentElement.parentElement.querySelector('.content').textContent;
+                navigator.clipboard.writeText(textToCopy).then(function() {
+                    copyBtn.textContent = 'Copied!';
+                    setTimeout(() => {
+                        copyBtn.textContent = 'Copy';
+                    }, 1000);
+                });                
+            });
+
+        }, 2000);
+    };
+}

src/app/ai-assistview/custom-views.html

@@ -0,0 +1,23 @@
+<div class="control-section">
+    <div class="views-aiassistview">
+        <div id="aiAssistView" ejs-aiassistview #viewsAIAssistView (created)="onCreate()">
+            <e-views>
+                <e-view type="Assist" name="Prompt" [viewTemplate]="promptViewContent()"></e-view>
+                <e-view type="Custom" name="Response" [viewTemplate]="responseViewContent()" iconCss="e-icons e-comment-show"></e-view>
+                <e-view type="Custom" name="Custom" [viewTemplate]="viewTemplate" iconCss="e-icons e-comment-show"></e-view>
+            </e-views>
+        </div>
+    </div>
+</div>
+
+<div id="action-description">
+    <p>This sample demonstrates the different view available for the AI AssistView component.</p>
+</div>
+<div id="description">
+    <p>In this example, the AI AssistView component is configured with three distinct views using the <code>views</code> property. Each view displays its own unique content:</p>
+    <ul>
+        <li>The <code>prompt</code> view includes a textarea with a <code>Generate</code> button and displays a list of suggestions</li>
+        <li>The <code>response</code> view shows the generated response with a copy option.</li>
+        <li>The <code>custom</code> view allows to display the custom content.</li>
+    </ul>
+</div>

src/app/ai-assistview/default.component.css

@@ -0,0 +1,24 @@
+
+.default-aiassistview {
+    height: 600px;
+    width: 60vw;
+    margin: 0 auto;
+}
+
+.default-aiassistview .banner-content .e-assistview-icon:before {
+    font-size: 35px;
+}
+
+.default-aiassistview .banner-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 330px;
+    text-align: center;
+}
+
+@media only screen and (max-width: 750px) {
+    .default-aiassistview {
+        width: 100%;
+    }
+}