v20.1.47 is released

Author: pipeline

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ej2-angular-samples",
-  "version": "19.4.38",
+  "version": "20.1.47",
   "private": true,
   "dependencies": {
     "@angular/animations": "~10.0.0",

sampleOrder.json

@@ -120,6 +120,17 @@
             "tile": "Tile View"
         }
     },
+    "carousel": {
+        "ControlName": "Carousel",
+        "Samples": {
+            "overview": "Overview",
+            "default": "Default Functionalities",
+            "templates": "Templates",
+            "data-binding": "Data Binding",
+            "keyboard-navigation": "Keyboard Navigation",
+            "api": "API"
+        }
+    },
     "chart": {
         "ControlName": "Chart",
         "Samples": {

src/app/accordion/accordion.component.css

@@ -196,4 +196,9 @@
     text-overflow: ellipsis;
     font-weight: bold;
     font-size: 16px;
+}
+
+.key-class {
+    display: inline-block;
+    width: 130px;
 }

src/app/accordion/accordion.module.ts

@@ -6,13 +6,15 @@ import { AccordionModule } from '@syncfusion/ej2-angular-navigations';
 import { DefaultAccordionComponent } from './default.component';
 import { AjaxAccordionComponent } from './ajax.component';
 import { IconAccordionComponent } from './icon.component';
+import { KeyboardAccordionComponent } from './keyboard-interaction.component';
 
 
 import { SharedModule } from '../common/shared.module';
 export const accordionAppRoutes: Object[] = [
     { path: ':theme/accordion/default', component: DefaultAccordionComponent, name: 'Default Functionalities', description: 'The sample demonstrates that default functionalities of the Accordion component which works by expand and collapse action in Angular platform.', category: 'Accordion' },
     { path: ':theme/accordion/ajax', component: AjaxAccordionComponent, name: 'Ajax Content', description: 'The sample demonstrates how to load the content to the Accordion component from external sources using Ajax library in Angular platform.', category: 'Accordion' },
     { path: ':theme/accordion/icon', component: IconAccordionComponent, name: 'Icons', description: 'The sample demonstrates how to represent pane headers with an icon in Accordion component which populates from items collection in Angular platform.', category: 'Accordion' },
+    { path: ':theme/accordion/keyboard-interaction', component: KeyboardAccordionComponent, name: 'Keyboard Interaction', description: 'The sample showcases the keyboard shortcuts applicable on Accordion component in Angular platform.', category: 'Accordion' }
 ];
 
 export const accordionRouter: ModuleWithProviders<any> = RouterModule.forChild(accordionAppRoutes);
@@ -23,6 +25,7 @@ export const accordionRouter: ModuleWithProviders<any> = RouterModule.forChild(a
         DefaultAccordionComponent,
         AjaxAccordionComponent,
         IconAccordionComponent,
+        KeyboardAccordionComponent
     ],
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })

src/app/accordion/ajax-stackb.json

@@ -0,0 +1,16 @@
+import { Component, ViewEncapsulation, Inject } from '@angular/core';
+
+/**
+ * Keyboard Interactions In Accordion Component.
+ */
+@Component({
+    selector: 'control-content',
+    templateUrl: 'keyboard-interaction.html',
+    styleUrls: ['accordion.component.css'],
+    encapsulation: ViewEncapsulation.None
+})
+export class KeyboardAccordionComponent {
+    constructor( @Inject('sourceFiles') private sourceFiles: any) {
+        sourceFiles.files = ['accordion.component.css'];
+    }
+}

src/app/accordion/default-stackb.json

@@ -0,0 +1,98 @@
+<div id="action-description">
+  <p>
+    This demo showcases the keyboard shortcuts applicable on <code>Accordion</code>.
+  </p>
+</div>
+<div class="control-section accordion-control-section">
+  <div class="e-sample-resize-container">
+    <!-- Render the Accoridon Component -->
+    <ejs-accordion>
+      <e-accordionitems>
+        <e-accordionitem expanded='true'>
+          <ng-template #header>
+            <div>ASP.NET</div>
+          </ng-template>
+          <ng-template #content>
+            <div>Microsoft ASP.NET is a set of technologies in the Microsoft .NET Framework for building Web
+              applications and XML Web
+              services. ASP.NET pages execute on the server and generate markup such as HTML, WML, or XML that is sent
+              to a desktop
+              or mobile browser. ASP.NET pages use a compiled,event-driven programming model that improves performance
+              and enables
+              the separation of application logic and user interface.</div>
+          </ng-template>
+        </e-accordionitem>
+        <e-accordionitem>
+          <ng-template #header>
+            <div>ASP.NET MVC</div>
+          </ng-template>
+          <ng-template #content>
+            <div>The Model-View-Controller (MVC) architectural pattern separates an application into three main
+              components: the model,
+              the view, and the controller. The ASP.NET MVC framework provides an alternative to the ASP.NET Web Forms
+              pattern for
+              creating Web applications. The ASP.NET MVC framework is a lightweight, highly testable presentation
+              framework that
+              (as with Web Forms-based applications) is integrated with existing ASP.NET features, such as master pages
+              and membership-based
+              authentication.
+            </div>
+          </ng-template>
+        </e-accordionitem>
+        <e-accordionitem>
+          <ng-template #header>
+            <div>JavaScript</div>
+          </ng-template>
+          <ng-template #content>
+            <div>JavaScript (JS) is an interpreted computer programming language.It was originally implemented as part
+              of web browsers
+              so that client-side scripts could interact with the user, control the browser, communicate asynchronously,
+              and alter
+              the document content that was displayed.More recently, however, it has become common in both game
+              development and
+              the creation of desktop applications.</div>
+          </ng-template>
+        </e-accordionitem>
+      </e-accordionitems>
+    </ejs-accordion>
+  </div>
+</div>
+<div id="description">
+  <i>Below key combinations can be used in Accordion to initiate various actions.</i>
+  <ul>
+    <li>
+      <b>Focus</b>
+      <ul>
+        <li>
+          <span class="key-class"><kbd>Alt</kbd> + <kbd>J</kbd></span>
+          <span> - Focuses on the first component of the demo.</span>
+        </li>
+        <li>
+          <span class="key-class"><kbd>Home</kbd></span>
+          <span> - Focus the first Accordion header.</span>
+        </li>
+        <li>
+          <span class="key-class"><kbd>End</kbd></span>
+          <span> - Focus the last Accordion header.</span>
+        </li>
+        <li>
+          <span class="key-class"><kbd>Down arrow</kbd></span>
+          <span> - Focus the next Accordion header.</span>
+        </li>
+        <li>
+          <span class="key-class"><kbd>Up arrow</kbd></span>
+          <span> - Focus the previous Accordion header.</span>
+        </li>
+      </ul>
+    </li>
+    <li>
+      <b>Expand and Collapse</b>
+      <ul>
+        <li>
+          <span class="key-class"><kbd>Enter</kbd> or <kbd>Space</kbd></span>
+          <span> - Expand and collapse when the focus is on the Accordion header.</span>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>