@syncfusion/ej2-angular-base - npm Package Compare versions

Comparing version 30.2.4 to 31.1.17

dist/ts/complex-array-base.d.ts

+import { QueryList, SimpleChanges } from '@angular/core';
+/**
+ * Complex Array Base module
+ */
+export interface IChildChange {
+    dirIndex: number;
+    change: Object;
+}
+export declare class ComplexBase<T> {
+    isUpdated: boolean;
+    hasChanges?: boolean;
+    dirIndex?: number;
+    propCollection?: {
+        [key: string]: Object;
+    };
+    dataSource?: {
+        [key: string]: Object;
+    };
+    property?: string;
+    tags?: string[];
+    isInitChanges: boolean;
+    private tagObjects?;
+    private registeredTemplate;
+    private componentType;
+    directivePropList: any;
+    ngOnInit(): void;
+    protected registerEvents(eventList: string[]): void;
+    ngOnChanges(changes: SimpleChanges): void;
+    clearTemplate(templateNames: string[]): void;
+    getProperties(): {
+        [key: string]: Object;
+    };
+    isChanged(): boolean;
+    ngAfterContentChecked(): void;
+    ngAfterViewChecked(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+}
+export declare class ArrayBase<T> {
+    isInitChanges: boolean;
+    list: T[] & ComplexBase<T>[];
+    children: QueryList<T>;
+    hasChanges: boolean;
+    private propertyName;
+    hasNewChildren: boolean;
+    constructor(propertyName: string);
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    getProperties(): Object[];
+    isChanged(): boolean;
+    clearTemplate(templateNames: string[]): void;
+    ngAfterContentChecked(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+}

dist/ts/complex-array-base.ts

+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { QueryList, SimpleChanges, SimpleChange, EmbeddedViewRef } from '@angular/core';
+import { getValue, setValue, isNullOrUndefined } from '@syncfusion/ej2-base';
+import { clearTemplate, registerEvents } from './util';
+
+const refRegex: RegExp = /Ref$/;
+
+/**
+ * Complex Array Base module
+ */
+
+export interface IChildChange {
+    dirIndex: number;
+    change: Object;
+}
+
+interface Tag {
+    hasChanges: boolean;
+    getProperties: Function;
+    isInitChanges: boolean;
+    clearTemplate?: (args: string[]) => void;
+}
+
+export class ComplexBase<T> {
+    public isUpdated: boolean;
+    public hasChanges?: boolean = false;
+    public dirIndex?: number;
+    public propCollection?: { [key: string]: Object } = {};
+    public dataSource?: { [key: string]: Object } = {};
+    public property?: string;
+    public tags?: string[] = [];
+    public isInitChanges: boolean;
+    private tagObjects?: { name: string, instance: Tag }[] = [];
+    private registeredTemplate: { [key: string]: EmbeddedViewRef<Object>[] };
+    private componentType: T;
+    public directivePropList: any;
+    public ngOnInit(): void {
+        this.registeredTemplate = {};
+        for (const tag of this.tags) {
+            const objInstance: Tag = getValue('child' + tag.substring(0, 1).toUpperCase() + tag.substring(1), this);
+            if (objInstance) {
+                this.tagObjects.push({ instance: objInstance, name: tag });
+            }
+        }
+        let templateProperties: string[] = Object.keys(this);
+        for (let i: number = 0; i < templateProperties.length; i++) {
+            const tempProp: any = getValue(templateProperties[parseInt(i.toString(), 10)], this);
+            if (typeof tempProp === 'object' && tempProp && tempProp.elementRef) {
+                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[parseInt(i.toString(), 10)].replace('Ref', ''), tempProp.elementRef.nativeElement);
+                }
+            }
+        }
+        templateProperties = Object.keys(this);
+        templateProperties = templateProperties.filter((val: string): boolean => {
+            return /Ref$/i.test(val);
+        });
+        for (const tempName of templateProperties) {
+            const propName: string = tempName.replace('Ref', '');
+            setValue(propName.replace('_', '.'), getValue(propName, this), this.propCollection);
+        }
+
+        // Angular 9 compatibility to overcome ngOnchange not get triggered issue
+        // To Update properties to "this.propCollection"
+        const propList: string[] = Object.keys(this);
+        /* istanbul ignore next */
+        if (this.directivePropList) {
+            for (let k: number = 0; k < this.directivePropList.length; k++) {
+                const dirPropName: string = 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);
+                }
+            }
+            this.hasChanges = true;
+        }
+        this.isInitChanges = true;
+    }
+
+    protected registerEvents(eventList: string[]): void {
+        registerEvents(eventList, this, true);
+    }
+
+    public ngOnChanges(changes: SimpleChanges): void {
+        for (const propName of Object.keys(changes)) {
+            const changedVal: SimpleChange = changes[`${propName}`];
+            this.propCollection[`${propName}`] = changedVal.currentValue;
+        }
+        this.isUpdated = false;
+        this.hasChanges = true;
+    }
+    /* istanbul ignore next */
+    public clearTemplate(templateNames: string[]): void {
+        clearTemplate(this, templateNames);
+    }
+
+    public getProperties(): { [key: string]: Object } {
+        /* istanbul ignore next */
+        for (const tagObject of this.tagObjects) {
+            this.propCollection[tagObject.name] = tagObject.instance.getProperties();
+        }
+        return this.propCollection;
+    }
+
+    public isChanged(): boolean {
+        let result: boolean = this.hasChanges;
+        if (!isNullOrUndefined(this.propCollection[this.property])) {
+            const tempProps: any = this.propCollection[this.property];
+            const props: string[] = Object.keys(tempProps[0]);
+            for (let d: number = 0; d < props.length; d++) {
+                if (!isNullOrUndefined(this.propCollection[props[parseInt(d.toString(), 10)]])) {
+                    const val: any = getValue(props[parseInt(d.toString(), 10)], this);
+                    const propVal: any = (this.propCollection[this.property] as any)[0][props[parseInt(d.toString(), 10)]];
+                    if (!isNullOrUndefined(val) && this.propCollection[props[parseInt(d.toString(), 10)]] !== val
+                    && propVal !== val) {
+                        setValue(props[parseInt(d.toString(), 10)], val, (this.propCollection[this.property] as any)[0]);
+                        setValue(props[parseInt(d.toString(), 10)], val, this.propCollection);
+                        this.hasChanges = true;
+                        this.isUpdated = false;
+                    }
+
+                }
+            }
+        }
+        /* istanbul ignore next */
+        for (const item of this.tagObjects) {
+            result = result || item.instance.hasChanges;
+        }
+        return result || this.hasChanges;
+    }
+
+    public ngAfterContentChecked(): void {
+        this.hasChanges = this.isChanged();
+        if (this.isInitChanges || this.hasChanges){
+            let templateProperties: string[] = Object.keys(this);
+            templateProperties = templateProperties.filter((val: string) => {
+                return refRegex.test(val);
+            });
+            for (const tempName of templateProperties) {
+                const propName: string = tempName.replace('Ref', '');
+                setValue(propName.replace('_', '.'), getValue(propName, this), this.propCollection);
+            }
+        }
+    }
+
+    public ngAfterViewChecked(): void {
+        /* istanbul ignore next */
+        if (this.isUpdated) {
+            this.hasChanges = false;
+        }
+    }
+
+    public ngAfterViewInit(): void {
+        /* istanbul ignore next */
+        this.isInitChanges = false;
+    }
+
+    public ngOnDestroy(): void {
+        /* istanbul ignore next */
+        this.directivePropList = [];
+    }
+
+}
+
+export class ArrayBase<T> {
+    public isInitChanges: boolean;
+    public list: T[] & ComplexBase<T>[] = [];
+    public children: QueryList<T>;
+    public hasChanges: boolean = false;
+    private propertyName: string;
+    public hasNewChildren: boolean;
+
+    constructor(propertyName: string) {
+        this.propertyName = propertyName;
+    }
+
+    public ngOnInit(): void {
+        this.isInitChanges = true;
+    }
+
+    public ngAfterContentInit(): void {
+        let index: number = 0;
+        /* istanbul ignore next */
+        this.list = this.children.map((child: T & ComplexBase<T>) => {
+            child.dirIndex = index++;
+            child.property = this.propertyName;
+            return child;
+        });
+        this.hasChanges = true;
+    }
+
+    public getProperties(): Object[] {
+        const onlyProp: Object[] = [];
+        for (const item of this.list) {
+            onlyProp.push((<{ getProperties: Function }>item).getProperties());
+        }
+        return onlyProp;
+    }
+
+    public isChanged(): boolean {
+        let result: boolean = false;
+        let index: number = 0;
+        let isSourceChanged: boolean = false;
+        const childrenDataSource: any = this.children.map(
+            (child: T & ComplexBase<T>) => {
+                return child;
+            }
+        );
+        /* istanbul ignore next */
+        if (this.list.length === this.children.length) {
+            for (let i: number = 0; i < this.list.length; i++) {
+                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[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[parseInt(i.toString(), 10)].hasChanges
+                                    !== childrenDataSource[parseInt(i.toString(), 10)].hasChanges;
+            }
+        }
+
+        this.hasNewChildren = (this.list.length !== this.children.length || isSourceChanged) ? true : null;
+        if (this.hasNewChildren) {
+            this.list = this.children.map((child: T & ComplexBase<T>) => {
+                child.dirIndex = index++;
+                child.property = this.propertyName;
+                return child;
+            });
+        }
+        /* istanbul ignore end */
+        for (const item of this.list) {
+            result = result || (<{ hasChanges: boolean }>item).hasChanges;
+        }
+        return !!this.list.length && result;
+    }
+
+    public clearTemplate(templateNames: string[]): void {
+        /* istanbul ignore next */
+        for (const item of this.list) {
+            (<{ clearTemplate: Function }>item).clearTemplate(templateNames && templateNames.map((val: string): string => {
+                const regExp: RegExpConstructor = RegExp;
+                return new regExp(this.propertyName).test(val) ? val.replace(this.propertyName + '.', '') : val;
+            }));
+        }
+    }
+
+    public ngAfterContentChecked(): void {
+        this.hasChanges = this.isChanged();
+        for (let i: number = 0; i < this.list.length; i++) {
+            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[parseInt(i.toString(), 10)].isUpdated = true;
+        }
+    }
+
+    public ngAfterViewInit(): void {
+        this.isInitChanges = false;
+    }
+
+    public ngOnDestroy(): void {
+        this.list = [];
+    }
+
+}

dist/ts/component-base.d.ts

+import { ElementRef } from '@angular/core';
+export interface IComponentBase {
+    registerEvents: (eventList: string[]) => void;
+    addTwoWay: (propList: string[]) => void;
+}
+export declare class ComponentBase<T> {
+    element: HTMLElement;
+    tags: string[];
+    private ngAttr;
+    private srenderer;
+    protected isProtectedOnChange: boolean;
+    private isAngular;
+    private isFormInit;
+    private componentType;
+    preventChange: boolean;
+    isPreventChange: boolean;
+    protected oldProperties: {
+        [key: string]: Object;
+    };
+    protected changedProperties: {
+        [key: string]: Object;
+    };
+    protected finalUpdate: Function;
+    protected isUpdated: boolean;
+    ngEle: ElementRef;
+    private tagObjects;
+    onPropertyChanged: (newProp: Object, oldProp: Object) => void;
+    appendTo: (ele: string | HTMLElement) => void;
+    setProperties: (obj: Object, muteOnChange: boolean) => void;
+    properties: Object;
+    dataBind: Function;
+    private createElement;
+    protected saveChanges(key: string, newValue: Object, oldValue: Object): void;
+    destroy: Function;
+    private registeredTemplate;
+    private complexTemplate;
+    private ngBoundedEvents;
+    ngOnInit(isTempRef?: any): void;
+    getAngularAttr(ele: Element): string;
+    ngAfterViewInit(isTempRef?: any): void;
+    ngOnDestroy(isTempRef?: any): void;
+    clearTemplate(templateNames?: string[], index?: any): void;
+    ngAfterContentChecked(isTempRef?: any): void;
+    protected registerEvents(eventList: string[]): void;
+    protected twoWaySetter(newVal: Object, prop: string): void;
+    protected addTwoWay(propList: string[]): void;
+    addEventListener(eventName: string, handler: Function): void;
+    removeEventListener(eventName: string, handler: Function): void;
+    trigger(eventName: string, eventArgs: Object, success?: Function): void;
+}

dist/ts/component-base.ts

+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types */
+/**
+ * Angular Component Base Module
+ */
+import { getValue, isUndefined, setValue, isNullOrUndefined, attributes, createElement } from '@syncfusion/ej2-base';
+import { EventEmitter, EmbeddedViewRef, Renderer2, ElementRef } from '@angular/core';
+import { clearTemplate, registerEvents } from './util';
+
+export interface IComponentBase {
+    registerEvents: (eventList: string[]) => void;
+    addTwoWay: (propList: string[]) => void;
+}
+
+interface Tag {
+    hasChanges: boolean;
+    getProperties?: Function;
+    isInitChanges: boolean;
+    hasNewChildren: boolean;
+    list: TagList[];
+    clearTemplate?: (arg: string[]) => void;
+}
+
+interface TagList {
+    getProperties: Function;
+    hasChanges: boolean;
+    isUpdated: boolean;
+}
+
+export class ComponentBase<T> {
+    public element: HTMLElement;
+    public tags: string[];
+    private ngAttr: string;
+    private srenderer: Renderer2;
+    protected isProtectedOnChange: boolean = true;
+    private isAngular: boolean;
+    private isFormInit: boolean = true;
+    private componentType: T;
+    public preventChange: boolean;
+    public isPreventChange: boolean;
+    protected oldProperties: { [key: string]: Object };
+    protected changedProperties: { [key: string]: Object };
+    protected finalUpdate: Function;
+    protected isUpdated: boolean;
+    public ngEle: ElementRef;
+
+    private tagObjects: { name: string, instance: Tag }[];
+    public onPropertyChanged: (newProp: Object, oldProp: Object) => void;
+    public appendTo: (ele: string | HTMLElement) => void;
+    public setProperties: (obj: Object, muteOnChange: boolean) => void;
+    public properties: Object;
+    public dataBind: Function;
+    private createElement: Function;
+    protected saveChanges(key: string, newValue: Object, oldValue: Object): void {
+        if (this.isProtectedOnChange) { return; }
+        this.oldProperties[`${key}`] = oldValue;
+        this.changedProperties[`${key}`] = newValue;
+        this.finalUpdate();
+        const changeTime: any = setTimeout(this.dataBind.bind(this));
+        const clearUpdate: Function = () => {
+            clearTimeout(changeTime);
+        };
+        this.finalUpdate = clearUpdate;
+    }
+
+    public destroy: Function;
+    private registeredTemplate: { [key: string]: EmbeddedViewRef<Object>[] };
+    private complexTemplate: string[];
+
+    private ngBoundedEvents: { [key: string]: Map<object, object> };
+    public ngOnInit(isTempRef?: any): void {
+        const tempOnThis: any = isTempRef || this;
+        tempOnThis.registeredTemplate = {};
+        tempOnThis.ngBoundedEvents = {};
+        tempOnThis.isAngular = true;
+        tempOnThis.isFormInit = true;
+        /* istanbul ignore next */
+        if (isTempRef) {
+            this.tags = isTempRef.tags;
+        }
+        tempOnThis.tags = this.tags || [];
+        tempOnThis.complexTemplate = this.complexTemplate || [];
+        tempOnThis.tagObjects = [];
+        tempOnThis.ngAttr = this.getAngularAttr(tempOnThis.element);
+        /* istanbul ignore next */
+        tempOnThis.createElement = (tagName: string, prop?:
+        { id?: string, className?: string, innerHTML?: string, styles?: string, attrs?: { [key: string]: string } }) => {
+            const ele: Element = tempOnThis.srenderer ? tempOnThis.srenderer.createElement(tagName) : createElement(tagName);
+            if (typeof (prop) === 'undefined') {
+                return <HTMLElement>ele;
+            }
+            ele.innerHTML = (prop.innerHTML ? prop.innerHTML : '');
+
+            if (prop.className !== undefined) {
+                ele.className = prop.className;
+            }
+            if (prop.id !== undefined) {
+                ele.id = prop.id;
+            }
+            if (prop.styles !== undefined) {
+                ele.setAttribute('style', prop.styles);
+            }
+            if (tempOnThis.ngAttr !== undefined) {
+                ele.setAttribute(tempOnThis.ngAttr, '');
+            }
+            if (prop.attrs !== undefined) {
+                attributes(ele, prop.attrs);
+            }
+            return <HTMLElement>ele;
+        };
+        for (const tag of tempOnThis.tags) {
+            const tagObject: { name: string, instance: Tag } = {
+                instance: getValue('child' + tag.substring(0, 1).toUpperCase() + tag.substring(1), tempOnThis),
+                name: tag
+            };
+            tempOnThis.tagObjects.push(tagObject);
+        }
+
+        let complexTemplates: string[] = Object.keys(tempOnThis);
+        for (let i: number = 0; i < complexTemplates.length; i++) {
+            const compProp: any = getValue(complexTemplates[parseInt(i.toString(), 10)], tempOnThis);
+            if (typeof compProp === 'object' && compProp && compProp.elementRef) {
+                if (typeof compProp === 'object' && compProp && compProp.elementRef && complexTemplates[parseInt(i.toString(), 10)].indexOf('_') !== -1 && complexTemplates[parseInt(i.toString(), 10)].indexOf('Ref') === -1) {
+                    setValue(complexTemplates[parseInt(i.toString(), 10)] + 'Ref', compProp, tempOnThis);
+                }
+                if (tempOnThis.viewContainerRef && !getValue('_viewContainerRef', compProp.elementRef.nativeElement) && !getValue('propName', compProp.elementRef.nativeElement)) {
+                    setValue('_viewContainerRef', tempOnThis.viewContainerRef, compProp.elementRef.nativeElement);
+                    setValue('propName', complexTemplates[parseInt(i.toString(), 10)].replace('Ref', ''), compProp.elementRef.nativeElement);
+                }
+            }
+        }
+        complexTemplates = Object.keys(tempOnThis);
+        complexTemplates = complexTemplates.filter((val: string): boolean => {
+            return /Ref$/i.test(val) && /_/i.test(val);
+        });
+        for (const tempName of complexTemplates) {
+            const propName: string = tempName.replace('Ref', '');
+            const val: Object = {};
+            setValue(propName.replace('_', '.'), getValue(propName, tempOnThis), val);
+            tempOnThis.setProperties(val, true);
+        }
+    }
+
+    public getAngularAttr(ele: Element): string {
+        const attributes: NamedNodeMap = ele.attributes;
+        const length: number = attributes.length;
+        let ngAr: string;
+        for (let i: number = 0; i < length; i++) {
+            /* istanbul ignore next */
+            if (/_ngcontent/g.test(attributes[parseInt(i.toString(), 10)].name)) {
+                ngAr = attributes[parseInt(i.toString(), 10)].name;
+            }
+        }
+        return ngAr;
+    }
+
+    public ngAfterViewInit(isTempRef?: any): void {
+        const tempAfterViewThis: any = isTempRef || this;
+        const regExp: RegExp = /ejs-tab|ejs-accordion/g;
+        /* istanbul ignore next */
+        if (regExp.test(tempAfterViewThis.ngEle.nativeElement.outerHTML)) {
+            tempAfterViewThis.ngEle.nativeElement.style.visibility = 'hidden';
+        }
+
+        /**
+         * Root level template properties are not getting rendered,
+         * Due to ngonchanges not get triggered.
+         * so that we have set template value for root level template properties,
+         * for example: refer below syntax
+         * ```html
+         * <ejs-grid>
+         * <e-column></e-column>
+         * <ng-template #editSettingsTemplate></ng-template>
+         * </ejs-grid>
+         * ```
+         */
+        let templateProperties: string[] = Object.keys(tempAfterViewThis);
+        templateProperties = templateProperties.filter((val: string): boolean => {
+            return /Ref$/i.test(val);
+        });
+        const ngtempRef: boolean = tempAfterViewThis.getModuleName() === 'DocumentEditor';
+        for (const tempName of templateProperties) {
+            const propName: string = tempName.replace('Ref', '');
+            setValue(propName.replace('_', '.'), getValue(propName + 'Ref', tempAfterViewThis), tempAfterViewThis);
+        }
+        // Used setTimeout for template binding
+        // Refer Link: https://github.com/angular/angular/issues/6005
+        const appendToComponent: any = (tempAfterViewThis: any) => {
+            /* istanbul ignore else  */
+            if (typeof window !== 'undefined' && tempAfterViewThis.element) {
+                tempAfterViewThis.appendTo(tempAfterViewThis.element);
+                tempAfterViewThis.ngEle.nativeElement.style.visibility = '';
+            }
+        };
+        if (!ngtempRef && !tempAfterViewThis.getModuleName().includes('btn')) {
+            setTimeout(() => {
+                appendToComponent(tempAfterViewThis);
+            });
+        } else {
+            appendToComponent(tempAfterViewThis);
+        }
+    }
+
+    public ngOnDestroy(isTempRef?: any): void {
+        const tempOnDestroyThis: any = isTempRef || this;
+        /* istanbul ignore else  */
+        setTimeout(() => {
+            if (typeof window !== 'undefined' && (tempOnDestroyThis.element.classList.contains('e-control'))) {
+                if (tempOnDestroyThis.ngOnFocus !== undefined && tempOnDestroyThis.ngOnBlur !== undefined) {
+                    const ele: HTMLElement = tempOnDestroyThis.inputElement || tempOnDestroyThis.element;
+                    ele.removeEventListener('focus', tempOnDestroyThis.ngOnFocusBound);
+                    ele.removeEventListener('blur', tempOnDestroyThis.ngOnBlurBound);
+                    tempOnDestroyThis.ngOnFocusBound = null;
+                    tempOnDestroyThis.ngOnBlurBound = null;
+                }
+                tempOnDestroyThis.destroy();
+                tempOnDestroyThis.clearTemplate(null);
+                // removing bounded events and tagobjects from component after destroy
+                setTimeout(function (): any {
+                    for (const key of Object.keys(tempOnDestroyThis)) {
+                        const value: any = tempOnDestroyThis[`${key}`];
+                        if (value && /object/.test(typeof value) && Object.keys(value).length !== 0) {
+                            if (/properties|changedProperties|childChangedProperties|oldProperties|moduleLoader/.test(key)) {
+                                for (const propKey of Object.keys(tempOnDestroyThis[`${key}`])) {
+                                    const propValue: any = value[`${propKey}`];
+                                    if (propValue && /object/.test(typeof propValue) && Object.keys(propValue).length !== 0 && (propValue.parent || propValue.parentObj)) {
+                                        tempOnDestroyThis[`${key}`][`${propKey}`] = null;
+                                    }
+                                }
+                            }
+                            else {
+                                if (value.parent || value.parentObj) {
+                                    tempOnDestroyThis[`${key}`] = null;
+                                }
+                            }
+                        }
+                    }
+                });
+            }
+        });
+    }
+
+    public clearTemplate(templateNames?: string[], index?: any): void {
+        clearTemplate(this, templateNames, index);
+    }
+
+    public ngAfterContentChecked(isTempRef?: any): void {
+        const tempAfterContentThis: any = isTempRef || this;
+        for (const tagObject of tempAfterContentThis.tagObjects) {
+            if (!isUndefined(tagObject.instance) &&
+                (tagObject.instance.isInitChanges || tagObject.instance.hasChanges || tagObject.instance.hasNewChildren)) {
+                const propObj: { [key: string]: Object } = {};
+                if (tagObject.instance.isInitChanges) {
+                    // For angular 9 compatibility
+                    // Not able to get complex directive properties reference ni Onint hook
+                    // So we have constructed property here and used
+                    let complexDirProps: any;
+                    const list: any = getValue('instance.list', tagObject);
+                    if (list && list.length) {
+                        complexDirProps = list[0].directivePropList;
+                    }
+                    let skip: any = true;
+                    if ((tempAfterContentThis as any).getModuleName && (tempAfterContentThis as any).getModuleName() === 'gantt') {
+                        skip = false;
+                    }
+                    if (complexDirProps && skip && complexDirProps.indexOf(tagObject.instance.propertyName) === -1) {
+                        const compDirPropList: any = Object.keys(tagObject.instance.list[0].propCollection);
+                        for (let h: number = 0; h < tagObject.instance.list.length; h++) {
+                            tagObject.instance.list[`${h}`].propCollection[tagObject.instance.propertyName] = [];
+                            const obj: any = {};
+                            for (let k: number = 0; k < compDirPropList.length; k++) {
+                                const complexPropName: any = compDirPropList[parseInt(k.toString(), 10)];
+                                obj[`${complexPropName}`] = tagObject.instance.list[`${h}`].propCollection[`${complexPropName}`];
+                            }
+                            for (let i: number = 0; i < tagObject.instance.list[`${h}`].tags.length; i++) {
+                                const tag: any = tagObject.instance.list[`${h}`].tags[parseInt(i.toString(), 10)];
+                                const childObj: any = getValue('child' + tag.substring(0, 1).toUpperCase() + tag.substring(1), tagObject.instance.list[`${h}`]);
+                                if (childObj) {
+                                    const innerchildObj: any = tagObject.instance.list[`${h}`]['child' + tag.substring(0, 1).toUpperCase() + tag.substring(1)];
+                                    // Update the inner child tag objects
+                                    const updateChildTag: any = (innerchild: any) => {
+                                        const innerLevelTag: any = [];
+                                        if (innerchild) {
+                                            for (let j: number = 0; j < innerchild.list.length; j++) {
+                                                const innerTag: any = innerchild.list[0].tags[0];
+                                                if (innerTag) {
+                                                    const innerchildTag: any = getValue('child' + innerTag.substring(0, 1).toUpperCase() + innerTag.substring(1), innerchild.list[parseInt(j.toString(), 10)]);
+                                                    if (innerchildTag) {
+                                                        innerchild.list[parseInt(j.toString(), 10)].tagObjects
+                                                            .push({ instance: innerchildTag, name: innerTag });
+                                                        innerLevelTag.push(innerchildTag);
+                                                    }
+                                                }
+                                            }
+                                        }
+                                        // check for inner level tag
+                                        if (innerLevelTag.length !== 0) {
+                                            for (let l: number = 0; l < innerLevelTag.length; l++) {
+                                                updateChildTag(innerLevelTag[parseInt(l.toString(), 10)]);
+                                            }
+                                        }
+                                    };
+                                    updateChildTag(innerchildObj);
+                                    tagObject.instance.list[`${h}`].tagObjects.push({ instance: childObj, name: tag });
+                                }
+                            }
+                            tagObject.instance.list[`${h}`].propCollection[tagObject.instance.propertyName].push(obj);
+                        }
+                    }
+                    // End angular 9 compatibility
+                    propObj[tagObject.name] = tagObject.instance.getProperties();
+                    tempAfterContentThis.setProperties(propObj, tagObject.instance.isInitChanges);
+                } else {
+                    /* istanbul ignore next */
+                    let hasDiffLength: boolean = false;
+                    if ((tempAfterContentThis[tagObject.name].length !== tagObject.instance.list.length) || (/diagram|DashboardLayout/.test(tempAfterContentThis.getModuleName()))) {
+                        tempAfterContentThis[tagObject.name] = tagObject.instance.list;
+                        hasDiffLength = true;
+                    }
+                    for (const list of tagObject.instance.list) {
+                        if (list.tags) {
+                            for (const tag of list.tags) {
+                                const innerChild: any = getValue('child' + tag.substring(0, 1).toUpperCase() + tag.substring(1), list);
+                                if (innerChild) {
+                                    list.tagObjects.push({ instance: innerChild, name: tag });
+                                }
+                            }
+                        }
+                        const curIndex: number = tagObject.instance.list.indexOf(list);
+                        const curChild: any = getValue(tagObject.name, tempAfterContentThis)[`${curIndex}`];
+                        let complexTemplates: string[] = Object.keys(curChild);
+                        complexTemplates = complexTemplates.filter((val: string): boolean => {
+                            return /Ref$/i.test(val);
+                        });
+                        if (curChild.properties && Object.keys(curChild.properties).length !== 0){
+                            for (let complexPropName of complexTemplates) {
+                                complexPropName = complexPropName.replace(/Ref/, '');
+                                curChild.properties[`${complexPropName}`] = !curChild.properties[`${complexPropName}`] ?
+                                    curChild.propCollection[`${complexPropName}`] : curChild.properties[`${complexPropName}`];
+                            }
+                        }
+                        if (!isUndefined(curChild) && !isUndefined(curChild.setProperties)) {
+                            if (/diagram|DashboardLayout/.test(tempAfterContentThis.getModuleName())) {
+                                curChild.setProperties(list.getProperties(), true);
+                            } else {
+                                curChild.setProperties(list.getProperties());
+                            }
+                        }
+                        list.isUpdated = true;
+                    }
+                    if ((/grid/.test(tempAfterContentThis.getModuleName()) && hasDiffLength) || /chart/.test(tempAfterContentThis.getModuleName())) {
+                        propObj[tagObject.name] = tagObject.instance.getProperties();
+                        tempAfterContentThis.setProperties(propObj, tagObject.instance.isInitChanges);
+                    }
+                }
+            }
+        }
+    }
+
+    protected registerEvents(eventList: string[]): void {
+        registerEvents(eventList, this);
+    }
+
+    protected twoWaySetter(newVal: Object, prop: string): void {
+        const oldVal: Object = getValue(prop, this.properties);
+        if (oldVal === newVal) {
+            return;
+        }
+        this.saveChanges(prop, newVal, oldVal);
+        setValue(prop, (isNullOrUndefined(newVal) ? null : newVal), this.properties);
+        getValue(prop + 'Change', this).emit(newVal);
+    }
+
+    protected addTwoWay(propList: string[]): void {
+        for (const prop of propList) {
+            getValue(prop, this);
+            Object.defineProperty(this, prop, {
+                get: () => {
+                    return getValue(prop, this.properties);
+                },
+                set: (newVal: Object) => this.twoWaySetter(newVal, prop)
+            });
+            setValue(prop + 'Change', new EventEmitter(), this);
+        }
+    }
+
+    public addEventListener(eventName: string, handler: Function): void {
+        const eventObj: EventEmitter<Object> = getValue(eventName, this);
+        if (!isUndefined(eventObj)) {
+            if (!this.ngBoundedEvents[`${eventName}`]) {
+                this.ngBoundedEvents[`${eventName}`] = new Map();
+            }
+            this.ngBoundedEvents[`${eventName}`].set(handler, eventObj.subscribe(handler));
+        }
+    }
+
+    public removeEventListener(eventName: string, handler: Function): void {
+        const eventObj: EventEmitter<Object> = getValue(eventName, this);
+        if (!isUndefined(eventObj)) {
+            (<EventEmitter<object>>this.ngBoundedEvents[`${eventName}`].get(handler)).unsubscribe();
+        }
+    }
+
+    public trigger(eventName: string, eventArgs: Object, success?: Function): void {
+
+        const eventObj: { next: Function } = getValue(eventName, this);
+
+        const prevDetection: boolean = this.isProtectedOnChange;
+        this.isProtectedOnChange = false;
+
+        if (eventArgs) {
+            (<{ name: string }>eventArgs).name = eventName;
+        }
+
+        if (!isUndefined(eventObj)) {
+            eventObj.next(eventArgs);
+        }
+        const localEventObj: Function = getValue('local' + eventName.charAt(0).toUpperCase() + eventName.slice(1), this);
+        if (!isUndefined(localEventObj)) {
+            localEventObj.call(this, eventArgs);
+        }
+
+        this.isProtectedOnChange = prevDetection;
+        /* istanbul ignore else  */
+        if (success) {
+            this.preventChange = this.isPreventChange;
+            success.call(this, eventArgs);
+        }
+        this.isPreventChange = false;
+
+    }
+
+}

dist/ts/form-base.d.ts

+import { EventEmitter, ChangeDetectorRef } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+/**
+ * Angular Form Base Module
+ */
+export declare class FormBase<T> implements ControlValueAccessor {
+    value: T;
+    checked: boolean;
+    private skipFromEvent;
+    static readonly isFormBase: boolean;
+    propagateChange(_?: T): void;
+    propagateTouch(): void;
+    enabled: Object;
+    disabled: Object;
+    angularValue: T;
+    private isFormInit;
+    objCheck: boolean;
+    duplicateValue: string;
+    duplicateAngularValue: string;
+    element: HTMLElement;
+    inputElement: HTMLInputElement;
+    private ngEle;
+    appendTo: (ele: string | HTMLElement) => void;
+    focus: EventEmitter<Object>;
+    blur: EventEmitter<Object>;
+    preventChange: boolean;
+    isUpdated: boolean;
+    oldValue: any;
+    cdr: ChangeDetectorRef;
+    ngOnBlurBound: () => void;
+    ngOnFocusBound: () => void;
+    localChange(e: {
+        value?: T;
+        checked?: T;
+    }): void;
+    properties: Object;
+    saveChanges: Function;
+    registerOnChange(registerFunction: (_: T) => void): void;
+    registerOnTouched(registerFunction: () => void): void;
+    twoWaySetter(newVal: Object, prop: string): void;
+    ngAfterViewInit(isTempRef?: any): void;
+    setDisabledState(disabled: boolean): void;
+    writeValue(value: T): void;
+    ngOnFocus(e: Event): void;
+    ngOnBlur(e: Event): void;
+}

dist/ts/form-base.ts

+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types */
+import { EventEmitter, ElementRef, ChangeDetectorRef } from '@angular/core';
+import { getValue, setValue, isNullOrUndefined, isObject } from '@syncfusion/ej2-base';
+import { ControlValueAccessor } from '@angular/forms';
+/**
+ * Angular Form Base Module
+ */
+export class FormBase<T> implements ControlValueAccessor {
+    public value: T;
+    public checked: boolean;
+    private skipFromEvent: boolean;
+    static readonly isFormBase: boolean = true;
+
+    public propagateChange(_?: T): void { return; }
+    public propagateTouch(): void { return; }
+    public enabled: Object;
+    public disabled: Object;
+    public angularValue: T;
+    private isFormInit: boolean;
+    public objCheck: boolean;
+    public duplicateValue: string;
+    public duplicateAngularValue: string;
+
+    public element: HTMLElement;
+    public inputElement: HTMLInputElement;
+    private ngEle: ElementRef;
+    public appendTo: (ele: string | HTMLElement) => void;
+
+    public focus: EventEmitter<Object>;
+    public blur: EventEmitter<Object>;
+    public preventChange: boolean;
+    public isUpdated: boolean;
+    public oldValue: any;
+    public cdr: ChangeDetectorRef;
+    public ngOnBlurBound: () => void;
+    public ngOnFocusBound: () => void;
+    public localChange(e: { value?: T, checked?: T }): void {
+        const value: T | any = (e.checked === undefined ? e.value : e.checked);
+        this.objCheck = isObject(value);
+        if (this.isUpdated === true) {
+            this.angularValue = this.oldValue;
+        }
+        if (this.objCheck === true) {
+            this.duplicateValue = JSON.stringify(value);
+            this.duplicateAngularValue = JSON.stringify(this.angularValue);
+            if (this.duplicateValue !== this.duplicateAngularValue && this.propagateChange !== undefined && value !== undefined) {
+                // Update angular from our control
+                this.propagateChange(value);
+                this.angularValue = value;
+            }
+        } else {
+            if (value !== this.angularValue && this.propagateChange !== undefined && value !== undefined) {
+                // While reset form using reset() method ng-dirty not get updated, so while value is empty just update angularValue only
+                if (value !== '' && value !== null) {
+                    // Update angular from our control
+                    this.propagateChange(value);
+                    this.angularValue = value;
+                } else {
+                    const optionalValue: any = value;
+                    this.propagateChange(optionalValue);
+                    this.angularValue = value;
+                }
+            }
+        }
+        this.cdr.markForCheck();
+    }
+
+    public properties: Object;
+    public saveChanges: Function;
+
+
+    public registerOnChange(registerFunction: (_: T) => void): void {
+        this.propagateChange = registerFunction;
+    }
+
+    public registerOnTouched(registerFunction: () => void): void {
+        this.propagateTouch = registerFunction;
+    }
+    public twoWaySetter(newVal: Object, prop: string): void {
+        const oldVal: Object = this.oldValue || getValue(prop, this.properties);
+        const ele: HTMLElement = this.inputElement || this.element;
+        if (ele && oldVal === newVal && this.value === newVal &&
+            ((<HTMLInputElement>ele).value === undefined || (<HTMLInputElement>ele).value === '')) {
+            return;
+        }
+        this.saveChanges(prop, newVal, oldVal);
+        setValue(prop, (isNullOrUndefined(newVal) ? null : newVal), this.properties);
+        getValue(prop + 'Change', this).emit(newVal);
+    }
+
+    public ngAfterViewInit(isTempRef?: any): void {
+        const tempFormAfterViewThis: any = isTempRef || this;
+        // Used setTimeout for template binding
+        // Refer Link: https://github.com/angular/angular/issues/6005
+        // Removed setTimeout, Because we have called markForCheck() method in Angular Template Compiler
+        /* istanbul ignore else */
+        tempFormAfterViewThis.ngOnBlurBound = this.ngOnBlur.bind(this);
+        tempFormAfterViewThis.ngOnFocusBound = this.ngOnFocus.bind(this);
+        if (typeof window !== 'undefined') {
+            if ((tempFormAfterViewThis.getModuleName()).includes('dropdowntree')) {
+                setTimeout(function (): any {
+                    tempFormAfterViewThis.appendTo(tempFormAfterViewThis.element);
+                });
+            }
+            else {
+                tempFormAfterViewThis.appendTo(tempFormAfterViewThis.element);
+            }
+            const ele: HTMLElement = tempFormAfterViewThis.inputElement || tempFormAfterViewThis.element;
+            ele.addEventListener('focus', tempFormAfterViewThis.ngOnFocusBound);
+            ele.addEventListener('blur', tempFormAfterViewThis.ngOnBlurBound);
+        }
+        this.isFormInit = false;
+    }
+    public setDisabledState(disabled: boolean): void {
+        this.enabled = !disabled;
+        this.disabled = disabled;
+    }
+
+    public writeValue(value: T): void {
+        const regExp: RegExp = /ejs-radiobutton/g;
+        //update control value from angular
+        if (this.checked === undefined) {
+            this.value = value;
+        } else {
+            // To resolve boolean type formControl value is not working for radio button control.
+            /* istanbul ignore next */
+            if (this.ngEle) {
+                if (typeof value === 'boolean') {
+                    if (regExp.test(this.ngEle.nativeElement.outerHTML)) {
+                        this.checked = value === this.value;
+                    } else {
+                        this.checked = value;
+                    }
+                } else {
+                    this.checked = value === this.value;
+                }
+            }
+        }
+        const isNullValue: boolean = this.angularValue == null;
+        this.angularValue = value;
+        this.isUpdated = true;
+        // When binding Html textbox value to syncfusion textbox, change event triggered dynamically.
+        // To prevent change event, trigger change in component side based on `preventChange` value
+        this.preventChange = this.isFormInit ? false : true;
+        this.cdr.markForCheck();
+        if (value === null) {
+            if (isNullValue) {
+                this.preventChange = false;
+            }
+            return;
+        }
+
+    }
+
+    public ngOnFocus(e: Event): void {
+        /* istanbul ignore else */
+        if (this.skipFromEvent !== true) {
+            this.focus.emit(e);
+        }
+        this.cdr.markForCheck();
+    }
+
+    public ngOnBlur(e: Event): void {
+        this.propagateTouch();
+        /* istanbul ignore else */
+        if (this.skipFromEvent !== true) {
+            this.blur.emit(e);
+        }
+        this.cdr.markForCheck();
+    }
+}

dist/ts/index.d.ts

+/**
+ * Index
+ */
+export * from './complex-array-base';
+export * from './component-base';
+export * from './form-base';
+export * from './util';
+export * from './template';

dist/ts/index.ts

+/**
+ * Index
+ */
+export * from './complex-array-base';
+export * from './component-base';
+export * from './form-base';
+export * from './util';
+export * from './template';

dist/ts/template.d.ts

+import { ElementRef } from '@angular/core';
+/**
+ * Angular Template Compiler
+ *
+ * @param {AngularElementType} templateEle - The element representing the template.
+ * @param {Object} [helper] - Optional helper object.
+ * @returns {Function} A function that compiles the template.
+ */
+export declare function compile(templateEle: AngularElementType, helper?: Object): (data: Object | JSON, component?: any, propName?: any) => Object;
+/**
+ * Property decorator for angular.
+ *
+ * @param {Object} [defaultValue] - Default value for the property.
+ * @returns {PropertyDecorator} The decorator function.
+ */
+export declare function Template(defaultValue?: Object): PropertyDecorator;
+export interface AngularElementType {
+    elementRef: ElementRef;
+}

dist/ts/template.ts

+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ViewContainerRef, EmbeddedViewRef, ElementRef, TemplateRef } from '@angular/core';
+import { setTemplateEngine, getTemplateEngine } from '@syncfusion/ej2-base';
+import { setValue, getValue } from '@syncfusion/ej2-base';
+
+const stringCompiler: (template: string | Function, helper?: object) => (data: Object | JSON) => string = getTemplateEngine();
+
+/**
+ * Angular Template Compiler
+ *
+ * @param {AngularElementType} templateEle - The element representing the template.
+ * @param {Object} [helper] - Optional helper object.
+ * @returns {Function} A function that compiles the template.
+ */
+export function compile(templateEle: AngularElementType, helper?: Object):
+
+(data: Object | JSON, component?: any, propName?: any) => Object {
+    if (typeof templateEle === 'string' || (typeof templateEle === 'function' && (templateEle as Function).prototype && (templateEle as Function).prototype.CSPTemplate)) {
+        return stringCompiler(templateEle, helper);
+    } else {
+        const contRef: ViewContainerRef = templateEle.elementRef.nativeElement._viewContainerRef;
+        const pName: string = templateEle.elementRef.nativeElement.propName;
+        return (data: Object, component?: any, propName?: any): Object => {
+            const context: Object = { $implicit: data };
+            /* istanbul ignore next */
+            const conRef: ViewContainerRef = contRef ? contRef : component.viewContainerRef;
+            const viewRef: EmbeddedViewRef<Object> = conRef.createEmbeddedView(templateEle as TemplateRef<Object>, context);
+            if (/EJS-MENTION|EJS-DROPDOWNLIST/.test(getValue('currentInstance.element.nodeName', conRef)) ||
+            (/E-TABITEM/.test(getValue('element.nativeElement.nodeName', conRef)) &&
+            getValue('currentInstance.headerTemplateRef', conRef))) {
+                viewRef.detectChanges();
+            } else {
+                viewRef.markForCheck();
+            }
+            /* istanbul ignore next */
+            const viewCollection: { [key: string]: EmbeddedViewRef<Object>[] } = (component && component.registeredTemplate) ?
+                component.registeredTemplate : getValue('currentInstance.registeredTemplate', conRef);
+            propName = (propName && component.registeredTemplate) ? propName : pName;
+            if (typeof viewCollection[`${propName}`] === 'undefined') {
+                viewCollection[`${propName}`] = [];
+            }
+            viewCollection[`${propName}`].push(viewRef);
+            return viewRef.rootNodes;
+        };
+    }
+}
+
+/**
+ * Property decorator for angular.
+ *
+ * @param {Object} [defaultValue] - Default value for the property.
+ * @returns {PropertyDecorator} The decorator function.
+ */
+export function Template(defaultValue?: Object): PropertyDecorator {
+    return (target: Object, key: string) => {
+        const propertyDescriptor: Object = {
+            set: setter(key),
+            get: getter(key, defaultValue),
+            enumerable: true,
+            configurable: true
+        };
+        Object.defineProperty(target, key, propertyDescriptor);
+    };
+}
+
+/**
+ * Creates a setter function for a given property key.
+ *
+ * @param {string} key - The property key.
+ * @returns {Function} The setter function.
+ */
+function setter(key: string): Function {
+    return function (val: AngularElementType): void {
+        if (val === undefined) { return; }
+        setValue(key + 'Ref', val, this);
+        if (typeof val !== 'string') {
+            val.elementRef.nativeElement._viewContainerRef = this.viewContainerRef;
+            val.elementRef.nativeElement.propName = key;
+        } else {
+            if (this.saveChanges) {
+                this.saveChanges(key, val, undefined);
+                this.dataBind();
+            }
+        }
+    };
+}
+
+/**
+ * Returns a getter function for the specified key and default value.
+ *
+ * @param {string} key - The key for the property.
+ * @param {Object} defaultValue - The default value for the property.
+ * @returns {Function} The getter function.
+ */
+function getter(key: string, defaultValue: Object): Function {
+    return function (): Object {
+        /* istanbul ignore next */
+        return getValue(key + 'Ref', this) || defaultValue;
+    };
+}
+
+export interface AngularElementType {
+    elementRef: ElementRef;
+}
+
+
+setTemplateEngine({ compile: (compile as any) });

dist/ts/util.d.ts

+/**
+ * Angular Utility Module
+ *
+ * @param {Function} derivedClass The derived class to which mixins are applied.
+ * @param {Function[]} baseClass An array of base classes whose methods are applied as mixins.
+ * @returns {void}
+ */
+export declare function applyMixins(derivedClass: any, baseClass: any[]): void;
+/**
+ * Decorator function to apply mixins to a derived class.
+ *
+ * @param {Function[]} baseClass - An array of mixin classes to be applied to the derived class.
+ * @returns {ClassDecorator} The decorator function.
+ */
+export declare function ComponentMixins(baseClass: Function[]): ClassDecorator;
+/**
+ * Registers events.
+ *
+ * @private
+ * @param {string[]} eventList - The list of events to register.
+ * @param {any} obj - The object on which to register the events.
+ * @param {boolean} [direct] - Whether to register events directly on the object or not.
+ * @returns {void}
+ */
+export declare function registerEvents(eventList: string[], obj: any, direct?: boolean): void;
+/**
+ * Clears registered templates.
+ *
+ * @private
+ * @param {any} _this - The context object.
+ * @param {string[]} [templateNames] - Optional. An array of template names to clear.
+ * @param {any[]} [index] - Optional. An array of indices specifying templates to clear.
+ * @returns {void}
+ */
+export declare function clearTemplate(_this: any, templateNames?: string[], index?: any): void;
+/**
+ * To set value for the nameSpace in desired object.
+ *
+ * @param {string} nameSpace - String value to get the inner object.
+ * @param {any} value - Value that you need to set.
+ * @param {any} object - Object to get the inner object value.
+ * @returns {void}
+ * @private
+ */
+export declare function setValue(nameSpace: string, value: any, object: any): any;
+export interface PropertyCollectionInfo {
+    props: PropertyDetails[];
+    complexProps: PropertyDetails[];
+    colProps: PropertyDetails[];
+    events: PropertyDetails[];
+    propNames: string[];
+    complexPropNames: string[];
+    colPropNames: string[];
+    eventNames: string[];
+}
+export interface PropertyDetails {
+    propertyName: string;
+    type: FunctionConstructor | Object;
+    defaultValue: Object;
+}

dist/ts/util.ts

+/* eslint-disable @typescript-eslint/no-explicit-any, @typescript-eslint/explicit-module-boundary-types */
+import { EventEmitter } from '@angular/core';
+import { isNullOrUndefined } from '@syncfusion/ej2-base';
+
+/**
+ * Angular Utility Module
+ *
+ * @param {Function} derivedClass The derived class to which mixins are applied.
+ * @param {Function[]} baseClass An array of base classes whose methods are applied as mixins.
+ * @returns {void}
+ */
+export function applyMixins(derivedClass: any, baseClass: any[]): void {
+    baseClass.forEach((baseClass: any) => {
+        Object.getOwnPropertyNames(baseClass.prototype).forEach((name: string) => {
+            if (!Object.prototype.hasOwnProperty.call(derivedClass.prototype, name) || (baseClass.isFormBase && name !== 'constructor')) {
+                derivedClass.prototype[`${name}`] = baseClass.prototype[`${name}`];
+            }
+        });
+    });
+}
+
+/**
+ * Decorator function to apply mixins to a derived class.
+ *
+ * @param {Function[]} baseClass - An array of mixin classes to be applied to the derived class.
+ * @returns {ClassDecorator} The decorator function.
+ */
+export function ComponentMixins(baseClass: Function[]): ClassDecorator {
+    return function (derivedClass: Function): void {
+        applyMixins(derivedClass, baseClass);
+    };
+}
+
+/**
+ * Registers events.
+ *
+ * @private
+ * @param {string[]} eventList - The list of events to register.
+ * @param {any} obj - The object on which to register the events.
+ * @param {boolean} [direct] - Whether to register events directly on the object or not.
+ * @returns {void}
+ */
+export function registerEvents(eventList: string[], obj: any, direct?: boolean): void {
+    const ngEventsEmitter: { [key: string]: Object } = {};
+    if (eventList && eventList.length) {
+        for (const event of eventList) {
+            if (direct === true) {
+                obj.propCollection[`${event}`] = new EventEmitter(false);
+                obj[`${event}`] = obj.propCollection[`${event}`];
+            } else {
+                ngEventsEmitter[`${event}`] = new EventEmitter(false);
+            }
+        }
+        if (direct !== true) {
+            obj.setProperties(ngEventsEmitter, true);
+        }
+    }
+}
+
+/**
+ * Clears registered templates.
+ *
+ * @private
+ * @param {any} _this - The context object.
+ * @param {string[]} [templateNames] - Optional. An array of template names to clear.
+ * @param {any[]} [index] - Optional. An array of indices specifying templates to clear.
+ * @returns {void}
+ */
+export function clearTemplate(_this: any, templateNames?: string[], index?: any): void {
+    const regTemplates: string[] = Object.keys(_this.registeredTemplate);
+    if (regTemplates.length) {
+        /* istanbul ignore next */
+        const regProperties: string[] = templateNames && templateNames.filter(
+            (val: string) => {
+                return (/\./g.test(val) ? false : true);
+            });
+        const tabaccordionTemp: boolean = /tab|accordion|toolbar/.test(_this.getModuleName?.());
+        for (const registeredTemplate of (regProperties && regProperties || regTemplates)) {
+            /* istanbul ignore next */
+            if (index && index.length) {
+                for (let e: number = 0; e < index.length; e++) {
+                    if (tabaccordionTemp) {
+                        for (let m: number = 0; m < _this.registeredTemplate[`${registeredTemplate}`].length; m++) {
+                            const value: any = _this.registeredTemplate[`${registeredTemplate}`][parseInt(m.toString(), 10)];
+                            if (value && value === index[`${e}`]) {
+                                value.destroy();
+                                _this.registeredTemplate[`${registeredTemplate}`].splice(m, 1);
+                            }
+                        }
+                    } else {
+                        for (let m: number = 0; m < _this.registeredTemplate.template.length; m++) {
+                            const value: any = _this.registeredTemplate.template[parseInt(m.toString(), 10)].rootNodes[0];
+                            if (value === index[`${e}`]) {
+                                const rt: any = _this.registeredTemplate[`${registeredTemplate}`];
+                                rt[parseInt(m.toString(), 10)].destroy();
+                            }
+                        }
+                    }
+                }
+            } else {
+                if (_this.registeredTemplate[`${registeredTemplate}`]) {
+                    for (const rt of _this.registeredTemplate[`${registeredTemplate}`]) {
+                        if (!rt.destroyed) {
+                            if (rt._view) {
+                                const pNode: any = rt._view.renderer.parentNode(rt.rootNodes[0]);
+                                if (!isNullOrUndefined(pNode)) {
+                                    for (let m: number = 0; m < rt.rootNodes.length; m++) {
+                                        pNode.appendChild(rt.rootNodes[parseInt(m.toString(), 10)]);
+                                    }
+                                }
+                            }
+                            rt.destroy();
+                        }
+                    }
+                }
+            }
+            if (!tabaccordionTemp || !index) {
+                delete _this.registeredTemplate[`${registeredTemplate}`];
+            }
+        }
+    }
+    for (const tagObject of _this.tagObjects) {
+        if (tagObject.instance) {
+            /* istanbul ignore next */
+            tagObject.instance.clearTemplate((templateNames && templateNames.filter(
+                (val: string) => {
+                    const regExp: RegExpConstructor = RegExp;
+                    return (new regExp(tagObject.name).test(val) ? true : false);
+                })));
+        }
+    }
+}
+
+/**
+ * To set value for the nameSpace in desired object.
+ *
+ * @param {string} nameSpace - String value to get the inner object.
+ * @param {any} value - Value that you need to set.
+ * @param {any} object - Object to get the inner object value.
+ * @returns {void}
+ * @private
+ */
+export function setValue(nameSpace: string, value: any, object: any): any {
+    const keys: string[] = nameSpace.replace(/\[/g, '.').replace(/\]/g, '').split('.');
+    /* istanbul ignore next */
+    let fromObj: any = object || {};
+    for (let i: number = 0; i < keys.length; i++) {
+        const key: string = keys[parseInt(i.toString(), 10)];
+        if (i + 1 === keys.length) {
+            fromObj[`${key}`] = value === undefined ? {} : value;
+        } else if (fromObj[`${key}`] === undefined) {
+            fromObj[`${key}`] = {};
+        }
+        fromObj = fromObj[`${key}`];
+    }
+    return fromObj;
+}
+
+
+
+
+export interface PropertyCollectionInfo {
+    props: PropertyDetails[];
+    complexProps: PropertyDetails[];
+    colProps: PropertyDetails[];
+    events: PropertyDetails[];
+    propNames: string[];
+    complexPropNames: string[];
+    colPropNames: string[];
+    eventNames: string[];
+}
+
+export interface PropertyDetails {
+    propertyName: string;
+    type: FunctionConstructor | Object;
+    defaultValue: Object;
+}

dist/ej2-angular-base.umd.min.js

 /*!
 *  filename: ej2-angular-base.umd.min.js
-*  version : 30.2.4
+*  version : 31.1.17
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

dist/global/ej2-angular-base.min.js

 /*!
 *  filename: ej2-angular-base.min.js
-*  version : 30.2.4
+*  version : 31.1.17
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

dist/global/index.d.ts

 /*!
 *  filename: index.d.ts
-*  version : 30.2.4
+*  version : 31.1.17
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
@@ -5,0 +5,0 @@ *  Use of this code is subject to the terms of our license.

package.json

 {
-  "name": "@syncfusion/ej2-angular-base",
-  "version": "30.2.4",
+  "_from": "@syncfusion/ej2-angular-base@*",
+  "_id": "@syncfusion/ej2-angular-base@30.2.0",
+  "_inBundle": false,
+  "_integrity": "sha512-vyWMzxNDMPCRt4XWjBWN+52t3lT7N2PGuB/vu+7PDuDqfKSuLtNZjhD0o2ln6mJrVcr5LZ19Wxw0y8NY2g3dow==",
+  "_location": "/@syncfusion/ej2-angular-base",
+  "_phantomChildren": {},
+  "_requested": {
+    "type": "range",
+    "registry": true,
+    "raw": "@syncfusion/ej2-angular-base@*",
+    "name": "@syncfusion/ej2-angular-base",
+    "escapedName": "@syncfusion%2fej2-angular-base",
+    "scope": "@syncfusion",
+    "rawSpec": "*",
+    "saveSpec": null,
+    "fetchSpec": "*"
+  },
+  "_requiredBy": [
+    "/",
+    "/@syncfusion/ej2-angular-barcode-generator",
+    "/@syncfusion/ej2-angular-blockeditor",
+    "/@syncfusion/ej2-angular-buttons",
+    "/@syncfusion/ej2-angular-calendars",
+    "/@syncfusion/ej2-angular-charts",
+    "/@syncfusion/ej2-angular-circulargauge",
+    "/@syncfusion/ej2-angular-diagrams",
+    "/@syncfusion/ej2-angular-documenteditor",
+    "/@syncfusion/ej2-angular-dropdowns",
+    "/@syncfusion/ej2-angular-filemanager",
+    "/@syncfusion/ej2-angular-gantt",
+    "/@syncfusion/ej2-angular-grids",
+    "/@syncfusion/ej2-angular-heatmap",
+    "/@syncfusion/ej2-angular-image-editor",
+    "/@syncfusion/ej2-angular-inplace-editor",
+    "/@syncfusion/ej2-angular-inputs",
+    "/@syncfusion/ej2-angular-interactive-chat",
+    "/@syncfusion/ej2-angular-kanban",
+    "/@syncfusion/ej2-angular-layouts",
+    "/@syncfusion/ej2-angular-lineargauge",
+    "/@syncfusion/ej2-angular-lists",
+    "/@syncfusion/ej2-angular-maps",
+    "/@syncfusion/ej2-angular-multicolumn-combobox",
+    "/@syncfusion/ej2-angular-navigations",
+    "/@syncfusion/ej2-angular-notifications",
+    "/@syncfusion/ej2-angular-pdfviewer",
+    "/@syncfusion/ej2-angular-pivotview",
+    "/@syncfusion/ej2-angular-popups",
+    "/@syncfusion/ej2-angular-progressbar",
+    "/@syncfusion/ej2-angular-querybuilder",
+    "/@syncfusion/ej2-angular-ribbon",
+    "/@syncfusion/ej2-angular-richtexteditor",
+    "/@syncfusion/ej2-angular-schedule",
+    "/@syncfusion/ej2-angular-splitbuttons",
+    "/@syncfusion/ej2-angular-spreadsheet",
+    "/@syncfusion/ej2-angular-treegrid",
+    "/@syncfusion/ej2-angular-treemap"
+  ],
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-development/@syncfusion/ej2-angular-base/-/ej2-angular-base-30.2.0.tgz",
+  "_shasum": "b7ce9b1fe2d4451425e077a6cc2f52832d2ccb95",
+  "_spec": "@syncfusion/ej2-angular-base@*",
+  "_where": "D:\\SF3992\\WFH\\Nexus\\release",
+  "author": {
+    "name": "Syncfusion Inc."
+  },
+  "bugs": {
+    "url": "https://github.com/syncfusion/ej2-angular-ui-components/issues"
+  },
+  "bundleDependencies": false,
+  "dependencies": {
+    "@syncfusion/ej2-base": "~31.1.17",
+    "@syncfusion/ej2-icons": "~31.1.17"
+  },
+  "deprecated": false,
   "description": "A common package of Essential JS 2 base Angular libraries, methods and class definitions",
-  "author": "Syncfusion Inc.",
-  "license": "SEE LICENSE IN license",
-  "main": "./dist/ej2-angular-base.umd.min.js",
-  "module": "./index.js",
-  "schematics": "./schematics/collection.json",
+  "devDependencies": {},
+  "homepage": "https://www.syncfusion.com/angular-components",
   "keywords": [
@@ -19,12 +87,11 @@ "ej2",
   ],
-  "dependencies": {
-    "@syncfusion/ej2-base": "~30.2.4",
-    "@syncfusion/ej2-icons": "~30.2.4"
-  },
-  "devDependencies": {},
+  "license": "SEE LICENSE IN license",
+  "main": "./dist/ej2-angular-base.umd.min.js",
+  "module": "./index.js",
+  "name": "@syncfusion/ej2-angular-base",
   "repository": {
     "type": "git",
-    "url": "https://github.com/syncfusion/ej2-angular-ui-components"
+    "url": "git+https://github.com/syncfusion/ej2-angular-ui-components.git"
   },
-  "homepage": "https://www.syncfusion.com/angular-components",
+  "schematics": "./schematics/collection.json",
   "scripts": {
@@ -34,3 +101,4 @@ "postinstall": "node ./postinstall.js"
   "typings": "index.d.ts",
+  "version": "31.1.17",
   "sideEffects": true
 }

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 2 instances in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

689255

9.96%

Number of package files

111

12.12%

Lines of code

7118

22.79%

Number of low maintenance alerts

0

-100%

Dependency changes

• + Added

  @syncfusion/ej2-base@31.1.22
  (transitive)

• + Added

  @syncfusion/ej2-icons@31.1.17
  (transitive)

• - Removed

  @syncfusion/ej2-base@30.2.6
  (transitive)

• - Removed

  @syncfusion/ej2-icons@30.2.4
  (transitive)

• Updated

  @syncfusion/ej2-base@~31.1.17

• Updated

  @syncfusion/ej2-icons@~31.1.17