@syncfusion/ej2-angular-base 25.2.6 → 26.1.35

package/schematics/ng-add/index.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.install = void 0;
 const core_1 = require("@angular-devkit/core");
 const schematics_1 = require("@angular-devkit/schematics");
 const tasks_1 = require("@angular-devkit/schematics/tasks");
@@ -10,7 +11,7 @@ const theme_1 = require("./theme");
 const package_1 = require("./../utils/package");
 function addEJ2ToPackageJson(libOptions) {
     return (host) => {
-        package_1.addEJ2PackageToPackageJson(host, 'dependencies', libOptions.pkgName, libOptions.pkgVer);
+        (0, package_1.addEJ2PackageToPackageJson)(host, 'dependencies', libOptions.pkgName, libOptions.pkgVer);
         return host;
     };
 }
@@ -28,12 +29,12 @@ function installNodePackages() {
  */
 function install(options, libOptions) {
     const theme = options.theme || 'material';
-    return schematics_1.chain([
-        options && options.skipPackageJson ? schematics_1.noop() : addEJ2ToPackageJson(libOptions),
-        theme_1.addEJ2ThemeToPackageJson(options, libOptions),
-        (options && !options.skipPackageJson) ? installNodePackages() : schematics_1.noop(),
+    return (0, schematics_1.chain)([
+        options && options.skipPackageJson ? (0, schematics_1.noop)() : addEJ2ToPackageJson(libOptions),
+        (0, theme_1.addEJ2ThemeToPackageJson)(options, libOptions),
+        (options && !options.skipPackageJson) ? installNodePackages() : (0, schematics_1.noop)(),
         addEJ2PackageRootConfig(options, libOptions),
-        theme_1.addEJ2Theme(options, theme)
+        (0, theme_1.addEJ2Theme)(options, theme)
     ]);
 }
 exports.install = install;
@@ -44,7 +45,7 @@ function validateEJ2Modules(moduleName, libOptions) {
 }
 function addModuleImportToCustomModule(host, options, validModules, libOptions) {
     if (host.exists(options.modulePath.toString())) {
-        ast_1.addModuleImportToModule(host, core_1.normalize(options.modulePath.toString()), validModules, libOptions.pkgName);
+        (0, ast_1.addModuleImportToModule)(host, (0, core_1.normalize)(options.modulePath.toString()), validModules, libOptions.pkgName);
     }
     else {
         throw new schematics_1.SchematicsException(`Could not find the module file. The given path \'${options.modulePath}\' is invalid. ` +
@@ -57,8 +58,9 @@ function addModuleImportToCustomModule(host, options, validModules, libOptions)
  */
 function addEJ2PackageRootConfig(options, libOptions) {
     return (host) => {
-        const workspace = helpers_1.getWorkspace(host);
-        const project = get_project_1.getProjectFromWorkspace(workspace, options.project);
+        const workspace = (0, helpers_1.getWorkspace)(host);
+        const project = (0, get_project_1.getProjectFromWorkspace)(workspace, options.project);
+        const architect = project.architect;
         let validModules;
         let availableModules = libOptions.moduleName.replace(/Module/g, '').trim();
         if (options.modules !== '') {
@@ -78,13 +80,13 @@ function addEJ2PackageRootConfig(options, libOptions) {
         else {
             validModules = libOptions.moduleName;
         }
-        if (project.architect.build.options.main) {
+        if (architect.build.options.main) {
             (options.modulePath !== undefined && options.modulePath !== "") ? addModuleImportToCustomModule(host, options, validModules, libOptions) :
-                ast_1.addModuleImportToRootModule(host, validModules, libOptions.pkgName, project);
+                (0, ast_1.addModuleImportToModule)(host, validModules, libOptions.pkgName, options.project);
         }
         else {
             const modulePath = '/src/app/app.component.ts';
-            ast_1.addModuleImportToModule(host, modulePath, validModules, libOptions.pkgName);
+            (0, ast_1.addModuleImportToModule)(host, modulePath, validModules, libOptions.pkgName);
         }
         return host;
     };

package/schematics/ng-add/theme.d.ts

@@ -1,4 +1,7 @@
 import { Tree } from "@angular-devkit/schematics";
+import { workspaces } from '@angular-devkit/core';
 import { LibOptionsSchema, OptionsSchema } from "../ng-add/schema";
+export type WorkspaceDefinition = workspaces.WorkspaceDefinition;
+export type ProjectDefinition = workspaces.ProjectDefinition;
 export declare function addEJ2ThemeToPackageJson(options: OptionsSchema, libOptions: LibOptionsSchema): (host: Tree) => Tree;
 export declare function addEJ2Theme(options: OptionsSchema, theme: string): (host: Tree) => Tree;

package/schematics/ng-add/theme.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.addEJ2Theme = exports.addEJ2ThemeToPackageJson = void 0;
 const change_1 = require("@schematics/angular/utility/change");
 const helpers_1 = require("../utils/helpers/helpers");
 const get_project_1 = require("../utils/get-project");
@@ -11,7 +12,7 @@ const project_style_file_1 = require("../utils/project-style-file");
 function addEJ2ThemeToPackageJson(options, libOptions) {
     const themeVer = libOptions.themeVer ? libOptions.themeVer : 'latest';
     return (host) => {
-        package_1.addEJ2PackageToPackageJson(host, 'dependencies', `@syncfusion/ej2-${options.theme || 'material'}-theme`, themeVer);
+        (0, package_1.addEJ2PackageToPackageJson)(host, 'dependencies', `@syncfusion/ej2-${options.theme || 'material'}-theme`, themeVer);
         return host;
     };
 }
@@ -23,14 +24,15 @@ function addEJ2Theme(options, theme) {
     return (host) => {
         let themePath = `@import \'..\/node_modules/@syncfusion/ej2-${theme}-theme/styles/${theme}.css\'`;
         const strippedThemePath = `./node_modules/@syncfusion/ej2-${theme}-theme/styles/${theme}.css`;
-        const workspace = helpers_1.getWorkspace(host);
-        const project = get_project_1.getProjectFromWorkspace(workspace, options.project);
-        const stylesPath = project_style_file_1.getProjectStyleFile(project);
+        const workspace = (0, helpers_1.getWorkspace)(host);
+        const project = (0, get_project_1.getProjectFromWorkspace)(workspace, options.project);
+        const architect = project.architect;
+        const stylesPath = (0, project_style_file_1.getProjectStyleFile)(workspace);
         const stylesBuffer = host.read(stylesPath);
         themePath += stylesPath.includes("sass") ? `\n` : `;\n`;
         // Because the build setup for the Angular CLI can be changed so dramatically, we can't know
         // where to generate anything if the project is not using the default config for build and test.
-        project_style_file_1.assertDefaultBuildersConfigured(project);
+        (0, project_style_file_1.assertDefaultBuildersConfigured)(project);
         options.skipPackageJson ? console.log('\x1b[33m%s\x1b[0m', `WARNING: You skipped the dependency installation. ` +
             `You must manually install the \'@syncfusion/ej2-${theme}-theme\' package. ` +
             `If you have already done this, you can ignore this message.`) :
@@ -47,9 +49,9 @@ function addEJ2Theme(options, theme) {
         else {
             console.log('\x1b[31m%s\x1b[0m', `Cannot import theme file. The file \'/src/styles.css\' is missing.`);
         }
-        project.architect ? [
-            addStyleToTarget(project.architect['build'], host, strippedThemePath, workspace),
-            addStyleToTarget(project.architect['test'], host, strippedThemePath, workspace)
+        architect ? [
+            addStyleToTarget(architect['build'], host, strippedThemePath, workspace),
+            addStyleToTarget(architect['test'], host, strippedThemePath, workspace)
         ] :
             console.log('\x1b[31m%s\x1b[0m', `The project does not have an architect configuration. `
                 + `Cannot add entry theme file in \'angular.json\'.`);

package/schematics/utils/ast.d.ts

@@ -8,7 +8,9 @@
 import { Tree } from '@angular-devkit/schematics';
 import * as ts from 'typescript';
 import { Change } from '@schematics/angular/utility/change';
-import { WorkspaceProject } from '@schematics/angular/utility/config';
+import { workspaces } from '@angular-devkit/core';
+export type WorkspaceDefinition = workspaces.WorkspaceDefinition;
+export type ProjectDefinition = workspaces.ProjectDefinition;
 /**
  * Reads file given path and returns TypeScript source file.
  */
@@ -16,7 +18,6 @@ export declare function getSourceFile(host: Tree, path: string): ts.SourceFile;
 /**
  * Import and add module to root app module.
  */
-export declare function addModuleImportToRootModule(host: Tree, moduleName: string, src: string, project: WorkspaceProject): void;
 /**
  * Import and add module to specific module path.
  * @param host the tree we are updating

package/schematics/utils/ast.js

@@ -7,11 +7,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateChanges = exports.addModuleImportToModule = exports.getSourceFile = void 0;
 const schematics_1 = require("@angular-devkit/schematics");
 const ts = require("typescript");
 const ast_utils_1 = require("@schematics/angular/utility/ast-utils");
 const change_1 = require("@schematics/angular/utility/change");
-const ng_ast_utils_1 = require("@schematics/angular/utility/ng-ast-utils");
 /**
  * Reads file given path and returns TypeScript source file.
  */
@@ -27,11 +27,11 @@ exports.getSourceFile = getSourceFile;
 /**
  * Import and add module to root app module.
  */
-function addModuleImportToRootModule(host, moduleName, src, project) {
-    const modulePath = ng_ast_utils_1.getAppModulePath(host, project.architect.build.options.main);
-    addModuleImportToModule(host, modulePath, moduleName, src);
-}
-exports.addModuleImportToRootModule = addModuleImportToRootModule;
+// export function addModuleImportToRootModule(host: Tree, moduleName: string, src: string,
+//     project: WorkspaceDefinition) {
+//     const modulePath: string = getAppModulePath(host, project.architect.build.options.main);
+//     addModuleImportToModule(host, modulePath, moduleName, src);
+// }
 /**
  * Import and add module to specific module path.
  * @param host the tree we are updating
@@ -46,12 +46,12 @@ function addModuleImportToModule(host, modulePath, moduleName, src) {
         throw new schematics_1.SchematicsException(`Module not found: ${modulePath}`);
     }
     moduleName.split(',').forEach((module) => {
-        if (!ast_utils_1.isImported(moduleSource, module.trim(), src) && module !== '') {
+        if (!(0, ast_utils_1.isImported)(moduleSource, module.trim(), src) && module !== '') {
             modulesToBeAdded.push(module);
         }
     });
     if (modulesToBeAdded.length) {
-        let changes = ast_utils_1.addImportToModule(moduleSource, modulePath, modulesToBeAdded.toString().trim(), src);
+        let changes = (0, ast_utils_1.addImportToModule)(moduleSource, modulePath, modulesToBeAdded.toString().trim(), src);
         if (!changes[0] && modulePath.includes("component.ts")) {
             changes = updateChanges(changes, modulePath, moduleSource, moduleName, src);
         }

package/schematics/utils/get-project.d.ts

@@ -5,5 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import { WorkspaceProject, WorkspaceSchema } from '@schematics/angular/utility/config';
-export declare function getProjectFromWorkspace(workspace: WorkspaceSchema, projectName?: string): WorkspaceProject;
+import { workspaces } from '@angular-devkit/core';
+export type WorkspaceDefinition = workspaces.WorkspaceDefinition;
+export type ProjectDefinition = workspaces.ProjectDefinition;
+export declare function getProjectFromWorkspace(workspace: WorkspaceDefinition, projectName?: string): ProjectDefinition;

package/schematics/utils/get-project.js

@@ -7,9 +7,10 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getProjectFromWorkspace = void 0;
 function getProjectFromWorkspace(workspace, projectName) {
-    let project = workspace.projects[projectName || workspace.defaultProject];
-    if (workspace.defaultProject === undefined) {
+    let project = workspace.projects[projectName];
+    if (projectName === undefined) {
         project = workspace.projects[projectName || Object.keys(workspace.projects)[0]];
     }
     if (!project) {

package/schematics/utils/helpers/helpers.js

@@ -7,6 +7,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.validateHtmlSelector = exports.htmlSelectorRe = exports.validateName = exports.insertImport = exports.parseName = exports.getAppModulePath = exports.findBootstrapModulePath = exports.findBootstrapModuleCall = exports.isImported = exports.addBootstrapToModule = exports.addExportToModule = exports.addProviderToModule = exports.addImportToModule = exports.addDeclarationToModule = exports.addSymbolToNgModuleMetadata = exports.getFirstNgModuleName = exports.getDecoratorMetadata = exports.getContentOfKeyLiteral = exports.insertAfterLastOccurrence = exports.findNode = exports.getSourceNodes = exports.findNodes = exports.ReplaceChange = exports.RemoveChange = exports.InsertChange = exports.NoopChange = exports.getProjectFromWorkspace = exports.getWorkspace = exports.ANGULAR_CLI_WORKSPACE_PATH = exports.buildRelativePath = exports.findModule = exports.findModuleFromOptions = void 0;
 const core_1 = require("@angular-devkit/core");
 const schematics_1 = require("@angular-devkit/schematics");
 const ts = require("typescript");
@@ -25,19 +26,19 @@ function findModuleFromOptions(host, options) {
     if (!options.module) {
         const pathToCheck = (options.path || '')
             + (options.flat ? '' : '/' + core_1.strings.dasherize(options.name));
-        return core_1.normalize(findModule(host, pathToCheck, moduleExt, routingModuleExt));
+        return (0, core_1.normalize)(findModule(host, pathToCheck, moduleExt, routingModuleExt));
     }
     else {
-        const modulePath = core_1.normalize(`/${options.path}/${options.module}`);
-        const componentPath = core_1.normalize(`/${options.path}/${options.name}`);
-        const moduleBaseName = core_1.normalize(modulePath).split('/').pop();
+        const modulePath = (0, core_1.normalize)(`/${options.path}/${options.module}`);
+        const componentPath = (0, core_1.normalize)(`/${options.path}/${options.name}`);
+        const moduleBaseName = (0, core_1.normalize)(modulePath).split('/').pop();
         const candidateSet = new Set([
-            core_1.normalize(options.path || '/'),
+            (0, core_1.normalize)(options.path || '/'),
         ]);
-        for (let dir = modulePath; dir != core_1.NormalizedRoot; dir = core_1.dirname(dir)) {
+        for (let dir = modulePath; dir != core_1.NormalizedRoot; dir = (0, core_1.dirname)(dir)) {
             candidateSet.add(dir);
         }
-        for (let dir = componentPath; dir != core_1.NormalizedRoot; dir = core_1.dirname(dir)) {
+        for (let dir = componentPath; dir != core_1.NormalizedRoot; dir = (0, core_1.dirname)(dir)) {
             candidateSet.add(dir);
         }
         const candidatesDirs = [...candidateSet].sort((a, b) => b.length - a.length);
@@ -46,10 +47,10 @@ function findModuleFromOptions(host, options) {
                 '',
                 `${moduleBaseName}.ts`,
                 `${moduleBaseName}${moduleExt}`,
-            ].map(x => core_1.join(c, x));
+            ].map(x => (0, core_1.join)(c, x));
             for (const sc of candidateFiles) {
                 if (host.exists(sc)) {
-                    return core_1.normalize(sc);
+                    return (0, core_1.normalize)(sc);
                 }
             }
         }
@@ -69,7 +70,7 @@ function findModule(host, generateDir, moduleExt = MODULE_EXT, routingModuleExt
         const filteredMatches = allMatches.filter(p => !p.endsWith(routingModuleExt));
         foundRoutingModule = foundRoutingModule || allMatches.length !== filteredMatches.length;
         if (filteredMatches.length == 1) {
-            return core_1.join(dir.path, filteredMatches[0]);
+            return (0, core_1.join)(dir.path, filteredMatches[0]);
         }
         else if (filteredMatches.length > 1) {
             throw new Error('More than one module matches. Use skip-import option to skip importing '
@@ -88,15 +89,15 @@ exports.findModule = findModule;
  * Build a relative path from one file path to another file path.
  */
 function buildRelativePath(from, to) {
-    from = core_1.normalize(from);
-    to = core_1.normalize(to);
+    from = (0, core_1.normalize)(from);
+    to = (0, core_1.normalize)(to);
     // Convert to arrays.
     const fromParts = from.split('/');
     const toParts = to.split('/');
     // Remove file names (preserving destination)
     fromParts.pop();
     const toFileName = toParts.pop();
-    const relativePath = core_1.relative(core_1.normalize(fromParts.join('/')), core_1.normalize(toParts.join('/')));
+    const relativePath = (0, core_1.relative)((0, core_1.normalize)(fromParts.join('/')), (0, core_1.normalize)(toParts.join('/')));
     let pathPrefix = '';
     // Set the path prefix for same dir or child dir, parent dir starts with `..`
     if (!relativePath) {
@@ -707,17 +708,17 @@ function findBootstrapModulePath(host, mainPath) {
 exports.findBootstrapModulePath = findBootstrapModulePath;
 function getAppModulePath(host, mainPath) {
     const moduleRelativePath = findBootstrapModulePath(host, mainPath);
-    const mainDir = path_1.dirname(mainPath);
-    const modulePath = core_1.normalize(`/${mainDir}/${moduleRelativePath}.ts`);
+    const mainDir = (0, path_1.dirname)(mainPath);
+    const modulePath = (0, core_1.normalize)(`/${mainDir}/${moduleRelativePath}.ts`);
     return modulePath;
 }
 exports.getAppModulePath = getAppModulePath;
 function parseName(path, name) {
-    const nameWithoutPath = core_1.basename(name);
-    const namePath = core_1.dirname((path + '/' + name));
+    const nameWithoutPath = (0, core_1.basename)(name);
+    const namePath = (0, core_1.dirname)((path + '/' + name));
     return {
         name: nameWithoutPath,
-        path: core_1.normalize('/' + namePath),
+        path: (0, core_1.normalize)('/' + namePath),
     };
 }
 exports.parseName = parseName;

package/schematics/utils/package.js

@@ -7,6 +7,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.addEJ2PackageToPackageJson = void 0;
 /**
  * Adds Essential JS 2 package to the package.json
  */

package/schematics/utils/project-style-file.d.ts

@@ -5,11 +5,13 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import { WorkspaceProject } from '@schematics/angular/utility/config';
+import { workspaces } from '@angular-devkit/core';
+export type WorkspaceDefinition = workspaces.WorkspaceDefinition;
+export type ProjectDefinition = workspaces.ProjectDefinition;
 /**
  * Gets a style file with the given extension in a project and returns its path. If no
  * extension is specified, any style file with a valid extension will be returned.
  */
-export declare function getProjectStyleFile(project: WorkspaceProject, extension?: string): string | null;
+export declare function getProjectStyleFile(project: WorkspaceDefinition, extension?: string): string | null;
 /** Throws if the project is not using the default Angular devkit builders. */
-export declare function assertDefaultBuildersConfigured(project: WorkspaceProject): void;
+export declare function assertDefaultBuildersConfigured(project: any): void;

package/schematics/utils/project-style-file.js

@@ -7,6 +7,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.assertDefaultBuildersConfigured = exports.getProjectStyleFile = void 0;
 const core_1 = require("@angular-devkit/core");
 const schematics_1 = require("@angular-devkit/schematics");
 /** Regular expression that matches all possible Angular CLI default style files. */
@@ -18,7 +19,7 @@ const validStyleFileRegex = /\.(c|le|sa|sc)ss/;
  * extension is specified, any style file with a valid extension will be returned.
  */
 function getProjectStyleFile(project, extension) {
-    const buildTarget = project.architect['build'];
+    const buildTarget = project.projects['build'];
     if (buildTarget.options && buildTarget.options.styles && buildTarget.options.styles.length) {
         const styles = buildTarget.options.styles.map(s => typeof s === 'string' ? s : s.input);
         // Look for the default style file that is generated for new projects by the Angular CLI. This
@@ -26,7 +27,7 @@ function getProjectStyleFile(project, extension) {
         const defaultMainStylePath = styles
             .find(file => extension ? file === `styles.${extension}` : defaultStyleFileRegex.test(file));
         if (defaultMainStylePath) {
-            return core_1.normalize(defaultMainStylePath);
+            return (0, core_1.normalize)(defaultMainStylePath);
         }
         // If no default style file could be found, use the first style file that matches the given
         // extension. If no extension specified explicitly, we look for any file with a valid style
@@ -34,7 +35,7 @@ function getProjectStyleFile(project, extension) {
         const fallbackStylePath = styles
             .find(file => extension ? file.endsWith(`.${extension}`) : validStyleFileRegex.test(file));
         if (fallbackStylePath) {
-            return core_1.normalize(fallbackStylePath);
+            return (0, core_1.normalize)(fallbackStylePath);
         }
     }
     return null;

package/src/complex-array-base.d.ts

@@ -21,6 +21,7 @@ export declare class ComplexBase<T> {
     isInitChanges: boolean;
     private tagObjects?;
     private registeredTemplate;
+    private componentType;
     directivePropList: any;
     ngOnInit(): void;
     protected registerEvents(eventList: string[]): void;

package/src/complex-array-base.js

@@ -20,14 +20,14 @@ var ComplexBase = /** @class */ (function () {
         }
         var templateProperties = Object.keys(this);
         for (var i = 0; i < templateProperties.length; i++) {
-            var tempProp = getValue(templateProperties[i], this);
+            var tempProp = getValue(templateProperties[parseInt(i.toString(), 10)], this);
             if (typeof tempProp === 'object' && tempProp && tempProp.elementRef) {
-                if (!getValue(templateProperties[i].indexOf('Ref') !== -1 ? templateProperties[i] : templateProperties[i] + 'Ref', this)) {
-                    setValue(templateProperties[i].indexOf('Ref') !== -1 ? templateProperties[i] : templateProperties[i] + 'Ref', tempProp, this);
+                if (!getValue(templateProperties[parseInt(i.toString(), 10)].indexOf('Ref') !== -1 ? templateProperties[parseInt(i.toString(), 10)] : templateProperties[parseInt(i.toString(), 10)] + 'Ref', this)) {
+                    setValue(templateProperties[parseInt(i.toString(), 10)].indexOf('Ref') !== -1 ? templateProperties[parseInt(i.toString(), 10)] : templateProperties[parseInt(i.toString(), 10)] + 'Ref', tempProp, this);
                 }
-                if (getValue("viewContainerRef", this) && !getValue("_viewContainerRef", tempProp.elementRef.nativeElement) && !getValue("propName", tempProp.elementRef.nativeElement)) {
-                    setValue("_viewContainerRef", getValue("viewContainerRef", this), tempProp.elementRef.nativeElement);
-                    setValue("propName", templateProperties[i].replace("Ref", ''), tempProp.elementRef.nativeElement);
+                if (getValue('viewContainerRef', this) && !getValue('_viewContainerRef', tempProp.elementRef.nativeElement) && !getValue('propName', tempProp.elementRef.nativeElement)) {
+                    setValue('_viewContainerRef', getValue('viewContainerRef', this), tempProp.elementRef.nativeElement);
+                    setValue('propName', templateProperties[parseInt(i.toString(), 10)].replace('Ref', ''), tempProp.elementRef.nativeElement);
                 }
             }
         }
@@ -46,7 +46,7 @@ var ComplexBase = /** @class */ (function () {
         /* istanbul ignore next */
         if (this.directivePropList) {
             for (var k = 0; k < this.directivePropList.length; k++) {
-                var dirPropName = this.directivePropList[k];
+                var dirPropName = this.directivePropList[parseInt(k.toString(), 10)];
                 if (propList.indexOf(dirPropName) !== -1 && (getValue(dirPropName, this) === false || getValue(dirPropName, this))) {
                     setValue(dirPropName, getValue(dirPropName, this), this.propCollection);
                 }
@@ -61,8 +61,8 @@ var ComplexBase = /** @class */ (function () {
     ComplexBase.prototype.ngOnChanges = function (changes) {
         for (var _i = 0, _a = Object.keys(changes); _i < _a.length; _i++) {
             var propName = _a[_i];
-            var changedVal = changes[propName];
-            this.propCollection[propName] = changedVal.currentValue;
+            var changedVal = changes["".concat(propName)];
+            this.propCollection["".concat(propName)] = changedVal.currentValue;
         }
         this.isUpdated = false;
         this.hasChanges = true;
@@ -85,13 +85,13 @@ var ComplexBase = /** @class */ (function () {
             var tempProps = this.propCollection[this.property];
             var props = Object.keys(tempProps[0]);
             for (var d = 0; d < props.length; d++) {
-                if (!isNullOrUndefined(this.propCollection[props[d]])) {
-                    var val = getValue(props[d], this);
-                    var propVal = this.propCollection[this.property][0][props[d]];
-                    if (!isNullOrUndefined(val) && this.propCollection[props[d]] !== val
+                if (!isNullOrUndefined(this.propCollection[props[parseInt(d.toString(), 10)]])) {
+                    var val = getValue(props[parseInt(d.toString(), 10)], this);
+                    var propVal = this.propCollection[this.property][0][props[parseInt(d.toString(), 10)]];
+                    if (!isNullOrUndefined(val) && this.propCollection[props[parseInt(d.toString(), 10)]] !== val
                         && propVal !== val) {
-                        setValue(props[d], val, this.propCollection[this.property][0]);
-                        setValue(props[d], val, this.propCollection);
+                        setValue(props[parseInt(d.toString(), 10)], val, this.propCollection[this.property][0]);
+                        setValue(props[parseInt(d.toString(), 10)], val, this.propCollection);
                         this.hasChanges = true;
                         this.isUpdated = false;
                     }
@@ -169,24 +169,26 @@ var ArrayBase = /** @class */ (function () {
         var result = false;
         var index = 0;
         var isSourceChanged = false;
-        // tslint:disable-next-line
         var childrenDataSource = this.children.map(function (child) {
             return child;
         });
         /* istanbul ignore next */
         if (this.list.length === this.children.length) {
             for (var i = 0; i < this.list.length; i++) {
-                if (this.list[i].propCollection.dataSource) {
-                    if (this.list[i].dataSource && this.list[i].propCollection.dataSource !== this.list[i].dataSource) {
-                        this.list[i].propCollection.dataSource = this.list[i].dataSource;
-                        this.list[i].hasChanges = true;
+                if (this.list[parseInt(i.toString(), 10)].propCollection.dataSource) {
+                    if (this.list[parseInt(i.toString(), 10)].dataSource &&
+                        this.list[parseInt(i.toString(), 10)].propCollection.dataSource
+                            !== this.list[parseInt(i.toString(), 10)].dataSource) {
+                        this.list[parseInt(i.toString(), 10)].propCollection.dataSource = this.list[parseInt(i.toString(), 10)].dataSource;
+                        this.list[parseInt(i.toString(), 10)].hasChanges = true;
                     }
-                    if (this.list[i].property !== "series") {
-                        isSourceChanged = (JSON.stringify(this.list[i].propCollection.dataSource) !==
-                            JSON.stringify(childrenDataSource[i].propCollection.dataSource));
+                    if (this.list[parseInt(i.toString(), 10)].property !== 'series') {
+                        isSourceChanged = (JSON.stringify(this.list[parseInt(i.toString(), 10)].propCollection.dataSource) !==
+                            JSON.stringify(childrenDataSource[parseInt(i.toString(), 10)].propCollection.dataSource));
                     }
                 }
-                isSourceChanged = this.list[i].hasChanges !== childrenDataSource[i].hasChanges;
+                isSourceChanged = this.list[parseInt(i.toString(), 10)].hasChanges
+                    !== childrenDataSource[parseInt(i.toString(), 10)].hasChanges;
             }
         }
         this.hasNewChildren = (this.list.length !== this.children.length || isSourceChanged) ? true : null;
@@ -210,17 +212,18 @@ var ArrayBase = /** @class */ (function () {
         for (var _i = 0, _a = this.list; _i < _a.length; _i++) {
             var item = _a[_i];
             item.clearTemplate(templateNames && templateNames.map(function (val) {
-                return new RegExp(_this.propertyName).test(val) ? val.replace(_this.propertyName + '.', '') : val;
+                var regExp = RegExp;
+                return new regExp(_this.propertyName).test(val) ? val.replace(_this.propertyName + '.', '') : val;
             }));
         }
     };
     ArrayBase.prototype.ngAfterContentChecked = function () {
         this.hasChanges = this.isChanged();
         for (var i = 0; i < this.list.length; i++) {
-            if (getValue('childColumns', this.list[i]) && getValue('property', this.list[i]) === 'columns') {
-                setValue('columns', getValue('childColumns', this.list[i]).getProperties(), this.list[i].propCollection);
+            if (getValue('childColumns', this.list[parseInt(i.toString(), 10)]) && getValue('property', this.list[parseInt(i.toString(), 10)]) === 'columns') {
+                setValue('columns', getValue('childColumns', this.list[parseInt(i.toString(), 10)]).getProperties(), this.list[parseInt(i.toString(), 10)].propCollection);
             }
-            this.list[i].isUpdated = true;
+            this.list[parseInt(i.toString(), 10)].isUpdated = true;
         }
     };
     ArrayBase.prototype.ngAfterViewInit = function () {

package/src/component-base.d.ts

@@ -11,6 +11,7 @@ export declare class ComponentBase<T> {
     protected isProtectedOnChange: boolean;
     private isAngular;
     private isFormInit;
+    private componentType;
     preventChange: boolean;
     isPreventChange: boolean;
     protected oldProperties: {