@syncfusion/ej2-angular-lists 34.2.8 → 35.1.37

package/schematics/generators/listview-virtualization/index.ts

@@ -0,0 +1,8 @@
+import { Rule } from '@angular-devkit/schematics';
+import { componentBuilder } from "@syncfusion/ej2-angular-base/schematics";
+import { Schema } from './schema';
+import * as sampleDetails from './sample-details';
+
+export default function (options: Schema): Rule {
+  return componentBuilder(options, sampleDetails);
+}

package/schematics/generators/listview-virtualization/sample-details.d.ts

@@ -0,0 +1,5 @@
+export declare const componentName: string;
+export declare const sampleName: string;
+export declare const diModules: string | null;
+export declare const packageName: string;
+export declare const libModules: string;

package/schematics/generators/listview-virtualization/sample-details.js

@@ -0,0 +1,5 @@
+export const componentName = 'listview';
+export const sampleName = 'virtualization';
+export const diModules = 'VirtualizationService';
+export const packageName = '@syncfusion/ej2-angular-lists';
+export const libModules = 'ListViewModule';

package/schematics/generators/listview-virtualization/sample-details.ts

@@ -0,0 +1,5 @@
+export const componentName: string = 'listview';
+export const sampleName: string = 'virtualization';
+export const diModules: string | null =  'VirtualizationService';
+export const packageName: string = '@syncfusion/ej2-angular-lists';
+export const libModules: string = 'ListViewModule';

package/schematics/generators/listview-virtualization/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.css

@@ -0,0 +1,83 @@
+.control-section {
+  overflow: auto;
+}
+
+.content-wrapper {
+  width: 52%;
+  margin: 0 auto;
+  min-width: 185px;
+}
+
+/* ListView position alignment */
+
+#ui-list.e-listview {
+  margin: auto;
+  max-width: 325px;
+  line-height: initial;
+  border: 1px solid lightgray;
+}
+
+/* ListView header alignment */
+
+#ui-list.e-listview .e-list-header {
+  height: 50px
+}
+
+#ui-list.e-listview .e-list-header .e-text {
+  line-height: 18px
+}
+
+/* ListView template customization */
+
+#ui-list.e-listview .showUI {
+  display: flex;
+}
+
+#ui-list.e-listview .hideUI {
+  display: none;
+}
+
+#ui-list.e-listview .e-list-item {
+  padding: 3px 0;
+}
+
+#ui-list.e-listview .R {
+  background: lightgrey;
+}
+
+#ui-list.e-listview .M {
+  background: pink;
+}
+
+#ui-list.e-listview .A {
+  background: lightgreen;
+}
+
+#ui-list.e-listview .S {
+  background: lightskyblue;
+}
+
+#ui-list.e-listview .J {
+  background: orange;
+}
+
+#ui-list.e-listview .N {
+  background: lightblue;
+}
+
+/* ListView theme customization */
+
+.highcontrast #ui-list.e-listview .e-list-item,
+.highcontrast #ui-list.e-listview .e-list-header {
+  background: rgb(0, 0, 0);
+}
+
+.highcontrast #ui-list.e-listview .e-list-item.e-active {
+  background: #ffd939;
+  color: #000000;
+}
+
+.inline {
+  display: inline-block;
+  vertical-align: top;
+}

package/schematics/generators/listview-virtualization/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html

@@ -0,0 +1,37 @@
+<div class="col-lg-8  control-section inline">
+  <!-- ListView element -->
+  <ejs-listview id='ui-list' #listviewInstance [dataSource]='dataSource.data1' [cssClass]='cssClass'
+    [enableVirtualization]=true headerTitle='Contacts' [fields]='fields' height=500 width=350 [template]='template'
+    (actionComplete)='onActionComplete()' (actionBegin)='onActionBegin()' [showHeader]='true'></ejs-listview>
+</div>
+<div class="col-lg-4 property-section ui-list inline">
+  <table id="property" title="Properties">
+    <tbody>
+      <tr>
+        <td style="width: 50%">
+          <div class="userselect">Load data</div>
+        </td>
+        <td style="width: 50%;padding-right: 10px">
+          <div>
+            <select (change)='onChange($event)'>
+              <option>1k</option>
+              <option>5k</option>
+              <option>10k</option>
+              <option>25k</option>
+            </select>
+          </div>
+        </td>
+      </tr>
+      <tr>
+        <td style="width: 50%;padding-top: 30px">
+          <div class="userselect">Time taken</div>
+        </td>
+        <td style="width: 50%;padding-right: 10px;padding-top: 30px;">
+          <div style="padding-left: 10px;padding-top: 0">
+            <span id="time">0 ms</span>
+          </div>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>

package/schematics/generators/listview-virtualization/samples/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts

@@ -0,0 +1,94 @@
+/**
+ * ListView Virtualization Sample
+ */
+import { Component, Inject, ViewChild, ViewEncapsulation, OnInit } from '@angular/core';
+import { Browser } from '@syncfusion/ej2-base';
+import { ListView } from '@syncfusion/ej2-lists';
+
+@Component({
+    selector: '<%=dasherize(selector)%>',
+    templateUrl: '<%=dasherize(name)%>.component.html',
+    styleUrls: ['<%=dasherize(name)%>.component.css'],
+    encapsulation: ViewEncapsulation.None
+})
+
+export class <%= classify(name) %>Component implements OnInit {
+    @ViewChild('listviewInstance')
+    public listviewInstance: ListView;
+    public commonData: { [key: string]: string | object }[] = [];
+    public dataSource: { [key: string]: { [key: string]: string | object }[] } = {};
+    public startTime: Date;
+    public endTime: Date;
+    public liElement: HTMLElement;
+    public cssClass = 'e-list-template';
+
+    public template: string = '<div class="e-list-wrapper e-list-avatar">' +
+        '<span class="e-avatar e-avatar-circle ${icon} ${$imgUrl ? \'hideUI\' : \'showUI\' }">' +
+        '${icon}</span> <img class="e-avatar e-avatar-circle ${$imgUrl ? \'showUI\' : \'hideUI\' }" ' +
+        'src="${$imgUrl ?  $imgUrl : \' \' }" />' +
+        '<span class="e-list-content">${name}</span></div>';
+
+    public ddlDatasource: Object[] = [
+        { value: '1', text: '1k' },
+        { value: '5', text: '5k' },
+        { value: '10', text: '10k' },
+        { value: '25', text: '25k' }
+    ];
+    public ddlFields: Object = { text: 'text', value: 'value' };
+
+    public fields: Object = { text: 'name' };
+
+    public ngOnInit() {
+        this.commonData = [
+            { name: 'Nancy', icon: 'N', id: '0', },
+            { name: 'Andrew', icon: 'A', id: '1' },
+            { name: 'Janet', icon: 'J', id: '2' },
+            { name: 'Margaret', imgUrl: '/assets/listview/virtualization/margaret.png', id: '3' },
+            { name: 'Steven', icon: 'S', id: '4' },
+            { name: 'Laura', imgUrl: '/assets/listview/virtualization/laura.png', id: '5' },
+            { name: 'Robert', icon: 'R', id: '6' },
+            { name: 'Michael', icon: 'M', id: '7' },
+            { name: 'Albert', imgUrl: '/assets/listview/virtualization/albert.png', id: '8' },
+            { name: 'Nolan', icon: 'N', id: '9' }
+        ];
+
+        this.liElement = document.getElementById('ui-list');
+
+        if (Browser.isDevice) {
+            this.liElement.classList.add('ui-mobile');
+        }
+        let dsArray: ((string | number)[])[] = [[1010, 'data1'], [5010, 'data5'], [10010, 'data10'], [25010, 'data25']];
+        for (let i: number; i < dsArray.length; i++) {
+            let ds: (string | number)[] = dsArray[i];
+            const data: { [key: string]: string | object }[] = this.commonData.slice();
+            let index: number;
+            let spyIndex: number;
+            for (let i = 10; i <= ds[0]; i++) {
+                while (index === spyIndex) {
+                    index = parseInt((Math.random() * 10).toString(), 10);
+                }
+                data.push({ name: data[index].name, icon: data[index].icon, imgUrl: data[index].imgUrl, id: i.toString() });
+                spyIndex = index;
+            }
+            this.dataSource[ds[1]] = data;
+        }
+    }
+
+    public onActionComplete() {
+        this.endTime = new Date();
+        document.getElementById('time').innerText = (this.endTime.getTime() - this.startTime.getTime()) + ' ms';
+    }
+
+    public onActionBegin() {
+        this.startTime = new Date();
+    }
+
+    public onChange(e) {
+        this.startTime = new Date();
+        this.listviewInstance.dataSource = this.dataSource['data' +
+            (this.ddlDatasource[e.target.options.selectedIndex] as any).value];
+        this.listviewInstance.dataBind();
+        this.endTime = new Date();
+        document.getElementById('time').innerText = (this.endTime.getTime() - this.startTime.getTime()) + ' ms';
+    }
+}

package/schematics/generators/listview-virtualization/schema.d.ts

@@ -0,0 +1,3 @@
+import { Schema as ComponentSchema } from '@schematics/angular/component/schema';
+export interface Schema extends ComponentSchema {
+}

package/schematics/generators/listview-virtualization/schema.js

@@ -0,0 +1 @@
+export {};

package/schematics/generators/listview-virtualization/schema.json

@@ -0,0 +1,125 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "EJ2SchemaTemplateID",
+  "title": "listview-virtualization",
+  "type": "object",
+  "properties": {
+    "path": {
+      "type": "string",
+      "format": "path",
+      "description": "The path to create the component.",
+      "visible": false
+    },
+    "project": {
+      "type": "string",
+      "description": "The name of the project.",
+      "$default": {
+        "$source": "projectName"
+      }
+    },
+    "name": {
+      "type": "string",
+      "description": "The name of the component.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      }
+    },
+    "inlineStyle": {
+      "description": "Specifies if the style will be in the ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "s"
+    },
+    "inlineTemplate": {
+      "description": "Specifies if the template will be in the ts file.",
+      "type": "boolean",
+      "default": false,
+      "alias": "t"
+    },
+    "viewEncapsulation": {
+      "description": "Specifies the view encapsulation strategy.",
+      "enum": [
+        "Emulated",
+        "Native",
+        "None",
+        "ShadowDom"
+      ],
+      "type": "string",
+      "alias": "v"
+    },
+    "changeDetection": {
+      "description": "Specifies the change detection strategy.",
+      "enum": [
+        "Default",
+        "OnPush"
+      ],
+      "type": "string",
+      "default": "Default",
+      "alias": "c"
+    },
+    "prefix": {
+      "type": "string",
+      "description": "The prefix to apply to generated selectors.",
+      "alias": "p",
+      "oneOf": [
+        {
+          "maxLength": 0
+        },
+        {
+          "minLength": 1,
+          "format": "html-selector"
+        }
+      ]
+    },
+    "styleext": {
+      "description": "The file extension to be used for style files.",
+      "type": "string",
+      "default": "css"
+    },
+    "spec": {
+      "type": "boolean",
+      "description": "Specifies if a spec file is generated.",
+      "default": true
+    },
+    "flat": {
+      "type": "boolean",
+      "description": "Flag to indicate if a dir is created.",
+      "default": false
+    },
+    "skipImport": {
+      "type": "boolean",
+      "description": "Flag to skip the module import.",
+      "default": false
+    },
+    "selector": {
+      "type": "string",
+      "format": "html-selector",
+      "description": "The selector to use for the component."
+    },
+    "module": {
+      "type": "string",
+      "description": "Allows specification of the declaring module.",
+      "alias": "m"
+    },
+    "export": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies if declaring module exports the component."
+    },
+    "entryComponent": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies if the component is an entry component of declaring module."
+    },
+    "lintFix": {
+      "type": "boolean",
+      "default": false,
+      "description": "Specifies whether to apply lint fixes after generating the component."
+    }
+  },
+  "required": [
+    "name"
+  ],
+  "id": "listview-virtualization"
+}

package/schematics/generators/listview-virtualization/schema.ts

@@ -0,0 +1,3 @@
+import { Schema as ComponentSchema } from '@schematics/angular/component/schema';
+
+export interface Schema extends ComponentSchema { }

package/schematics/ng-add/index.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const lib_details_1 = require("./../utils/lib-details");
-const schematics_1 = require("@syncfusion/ej2-angular-base/schematics");
-function default_1(options) {
-    const libOptions = Object.assign({}, { 'pkgName': lib_details_1.pkgName, 'pkgVer': lib_details_1.pkgVer, 'moduleName': lib_details_1.moduleName, 'themeVer': lib_details_1.themeVer });
-    return schematics_1.install(options, libOptions);
+import { pkgName, pkgVer, moduleName, themeVer } from './../utils/lib-details';
+import { install } from '@syncfusion/ej2-angular-base/schematics';
+export default function (options) {
+    const libOptions = Object.assign({}, { 'pkgName': pkgName, 'pkgVer': pkgVer, 'moduleName': moduleName, 'themeVer': themeVer });
+    return install(options, libOptions);
 }
-exports.default = default_1;

package/schematics/ng-add/index.ts

@@ -1,10 +1,10 @@
-import { pkgName, pkgVer, moduleName, themeVer } from './../utils/lib-details';
-import { install } from '@syncfusion/ej2-angular-base/schematics';
-import { OptionsSchema, LibOptionsSchema } from './schema';
-import { Rule } from '@angular-devkit/schematics';
-
-export default function (options: OptionsSchema): Rule {
-	const libOptions: LibOptionsSchema = Object.assign({},
-		{ 'pkgName': pkgName, 'pkgVer': pkgVer, 'moduleName': moduleName, 'themeVer': themeVer });
-	return install(options, libOptions);
-}
+import { pkgName, pkgVer, moduleName, themeVer } from './../utils/lib-details';
+import { install } from '@syncfusion/ej2-angular-base/schematics';
+import { OptionsSchema, LibOptionsSchema } from './schema';
+import { Rule } from '@angular-devkit/schematics';
+
+export default function (options: OptionsSchema): Rule {
+	const libOptions: LibOptionsSchema = Object.assign({},
+		{ 'pkgName': pkgName, 'pkgVer': pkgVer, 'moduleName': moduleName, 'themeVer': themeVer });
+	return install(options, libOptions);
+}

package/schematics/ng-add/schema.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/schematics/ng-add/schema.json

@@ -1,34 +1,34 @@
-{
-  "$schema": "http://json-schema.org/schema",
-  "$id": "ngAdd",
-  "title": "Add Essential JS 2 Angular packages",
-  "type": "object",
-  "properties": {
-    "skipPackageJson": {
-      "type": "boolean",
-      "default": false,
-      "description": "Do not add add Essential JS 2 Angular packages dependencies to package.json (e.g., --skipPackageJson)"
-    },
-    "modules": {
-      "type": "string",
-      "default": "",
-      "description": "Add only specific Essential JS 2 modules to the app.module file (eg: --modules=slider, grid)"
-    },
-    "modulePath": {
-      "type": "string",
-      "default": "",
-      "description": "Used to specify the path of the module file where the EJ2 module needs to be imported"
-    },
-    "theme": {
-      "enum": [
-        "material",
-        "fabric",
-        "bootstrap",
-        "highcontrast"
-      ],
-      "default": "material",
-      "description": "Used to change the theme that needs to be imported"
-    }
-  },
-  "required": []
-}
+{
+  "$schema": "http://json-schema.org/schema",
+  "$id": "ngAdd",
+  "title": "Add Essential JS 2 Angular packages",
+  "type": "object",
+  "properties": {
+    "skipPackageJson": {
+      "type": "boolean",
+      "default": false,
+      "description": "Do not add add Essential JS 2 Angular packages dependencies to package.json (e.g., --skipPackageJson)"
+    },
+    "modules": {
+      "type": "string",
+      "default": "",
+      "description": "Add only specific Essential JS 2 modules to the app.module file (eg: --modules=slider, grid)"
+    },
+    "modulePath": {
+      "type": "string",
+      "default": "",
+      "description": "Used to specify the path of the module file where the EJ2 module needs to be imported"
+    },
+    "theme": {
+      "enum": [
+        "material",
+        "fabric",
+        "bootstrap",
+        "highcontrast"
+      ],
+      "default": "material",
+      "description": "Used to change the theme that needs to be imported"
+    }
+  },
+  "required": []
+}

package/schematics/ng-add/schema.ts

@@ -1,30 +1,30 @@
-export interface OptionsSchema {
-    // Whether to skip package.json install.
-    skipPackageJson: boolean;
-
-    // Used to specify required module names
-    modules: string;
-
-    // Used to specify custom module path
-    modulePath: string;
-
-    // Used to specify theme name
-    theme:  'material' | 'fabric' | 'bootstrap' | 'highcontrast';
-
-    // Name of the project to target.
-    project?: string;
-}
-
-export interface LibOptionsSchema {
-    // Package name
-    pkgName: string;
-
-    // Package version
-    pkgVer: string;
-
-    // Library base module name
-    moduleName: string;
-
-    // Theme version
-    themeVer: string;
-}
+export interface OptionsSchema {
+    // Whether to skip package.json install.
+    skipPackageJson: boolean;
+
+    // Used to specify required module names
+    modules: string;
+
+    // Used to specify custom module path
+    modulePath: string;
+
+    // Used to specify theme name
+    theme:  'material' | 'fabric' | 'bootstrap' | 'highcontrast';
+
+    // Name of the project to target.
+    project?: string;
+}
+
+export interface LibOptionsSchema {
+    // Package name
+    pkgName: string;
+
+    // Package version
+    pkgVer: string;
+
+    // Library base module name
+    moduleName: string;
+
+    // Theme version
+    themeVer: string;
+}

package/schematics/tsconfig.json

@@ -1,25 +1,33 @@
-{
-    "compilerOptions": {
-        "lib": ["es2017", "dom"],
-        "module": "commonjs",
-        "moduleResolution": "node",
-        "noEmitOnError": false,
-        "skipDefaultLibCheck": true,
-        "skipLibCheck": true,
-        "sourceMap": true,
-        "target": "es6",
-        "declaration": true,
-        "types": [
-            "jasmine",
-            "node"
-        ]
-    },
-    "exclude": [
-        "node_modules",
-        "src",
-        "src/**/*.ts",
-        "spec",
-        "spec/**/*.ts",
-        "@typings"
-    ]
-}
+{
+    "compilerOptions": {
+        "target": "ES2022",
+        "module": "ES2022",
+        "moduleResolution": "bundler",
+        "lib": [
+            "ES2022",
+            "dom"
+        ],
+        "noEmitOnError": false,
+        "skipLibCheck": true,
+        "sourceMap": true,
+        "declaration": true,
+        "strict": true,
+        "noImplicitAny": true,
+        "noImplicitOverride": true,
+        "esModuleInterop": true,
+        "useDefineForClassFields": false,
+        "forceConsistentCasingInFileNames": true,
+        "types": [
+            "jasmine",
+            "node"
+        ]
+    },
+    "exclude": [
+        "node_modules",
+        "src",
+        "src/**/*.ts",
+        "spec",
+        "spec/**/*.ts",
+        "@typings"
+    ]
+}

package/schematics/utils/lib-details.js

@@ -1,6 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.pkgName = '@syncfusion/ej2-angular-lists';
-exports.pkgVer = '^34.2.8';
-exports.moduleName = 'ListViewModule';
-exports.themeVer = '~34.2.8';
+export const pkgName = '@syncfusion/ej2-angular-lists';
+export const pkgVer = '^18.23.1';
+export const moduleName = 'ListViewModule';
+export const themeVer = '~18.23.1';

package/schematics/utils/lib-details.ts

@@ -1,4 +1,4 @@
-export const pkgName = '@syncfusion/ej2-angular-lists';
-export const pkgVer = '^34.2.8';
-export const moduleName = 'ListViewModule';
-export const themeVer = '~34.2.8';
+export const pkgName = '@syncfusion/ej2-angular-lists';
+export const pkgVer = '^18.23.1';
+export const moduleName = 'ListViewModule';
+export const themeVer = '~18.23.1';