@syncfusion/ej2-base 24.2.8 → 25.1.35-579988

package/dist/ts/observer.ts

@@ -0,0 +1,236 @@
+import { isNullOrUndefined, getValue, extend, isBlazor } from './util';
+/**
+ * Observer is used to perform event handling based the object.
+ * ```
+ * //Creating observer instance.
+ * let observer:Observer = Observer(this);
+ * let handler: Function = (a:number, b: number): number => {return a + b; }
+ * //add handler to event.
+ * observe.on('eventname', handler);
+ * //remove handler from event.
+ * observe.off('eventname', handler);
+ * //notify the handlers in event.
+ * observe.notify('eventname');
+ * ```
+ *
+ */
+export interface BoundOptions {
+    handler?: Function;
+    context?: Object;
+    event?: string;
+    id?: string;
+}
+export class Observer {
+    private context: Object;
+    private ranArray: string[] = [];
+    private boundedEvents: { [key: string]: [BoundOptions] } = {};
+    constructor(context?: Object) {
+        if (isNullOrUndefined(context)) {
+            return;
+        }
+        this.context = context;
+    }
+    /**
+     * To attach handler for given property in current context.
+     *
+     * @param {string} property - specifies the name of the event.
+     * @param {Function} handler - Specifies the handler function to be called while event notified.
+     * @param {Object} context - Specifies the context binded to the handler.
+     * @param {string} id - specifies the random generated id.
+     * @returns {void}
+     */
+    public on(property: string, handler: Function, context?: Object, id?: string): void {
+        if (isNullOrUndefined(handler)) {
+            return;
+        }
+        const cntxt: Object = context || this.context;
+        if (this.notExist(property)) {
+            this.boundedEvents[`${property}`] = [{ handler: handler, context: cntxt, id: id }];
+            return;
+        }
+        if (!isNullOrUndefined(id)) {
+            if (this.ranArray.indexOf(id) === -1) {
+                this.ranArray.push(id);
+                this.boundedEvents[`${property}`].push({ handler: handler, context: cntxt, id: id });
+            }
+        } else if (!this.isHandlerPresent(this.boundedEvents[`${property}`], handler)) {
+            this.boundedEvents[`${property}`].push({ handler: handler, context: cntxt });
+        }
+    }
+
+    /**
+     * To remove handlers from a event attached using on() function.
+     *
+     * @param {string} property - specifies the name of the event.
+     * @param {Function} handler - Optional argument specifies the handler function to be called while event notified.
+     * @param {string} id - specifies the random generated id.
+     * @returns {void} ?
+     */
+    public off(property: string, handler?: Function, id?: string): void {
+        if (this.notExist(property)) {
+            return;
+        }
+        const curObject: BoundOptions[] = getValue(property, this.boundedEvents);
+        if (handler) {
+            for (let i: number = 0; i < curObject.length; i++) {
+                if (id) {
+                    if (curObject[parseInt(i.toString(), 10)].id === id) {
+                        curObject.splice(i, 1);
+                        const indexLocation: number = this.ranArray.indexOf(id);
+                        if (indexLocation !== -1) {
+                            this.ranArray.splice(indexLocation, 1);
+                        }
+                        break;
+                    }
+                } else if (handler === curObject[parseInt(i.toString(), 10)].handler) {
+                    curObject.splice(i, 1);
+                    break;
+                }
+            }
+        } else {
+            delete this.boundedEvents[`${property}`];
+        }
+    }
+
+    /**
+     * To notify the handlers in the specified event.
+     *
+     * @param {string} property - Specifies the event to be notify.
+     * @param {Object} argument - Additional parameters to pass while calling the handler.
+     * @param {Function} successHandler - this function will invoke after event successfully triggered
+     * @param {Function} errorHandler - this function will invoke after event if it was failure to call.
+     * @returns {void} ?
+     */
+    public notify(property: string, argument?: Object, successHandler?: Function, errorHandler?: Function): void | Object {
+        if (this.notExist(property)) {
+            if (successHandler) {
+                successHandler.call(this, argument);
+            }
+            return;
+        }
+        if (argument) {
+            (<{ name: string }>argument).name = property;
+        }
+        const blazor: string = 'Blazor';
+        const curObject: BoundOptions[] = getValue(property, this.boundedEvents).slice(0);
+        if (window[`${blazor}`]) {
+            return this.blazorCallback(curObject, argument, successHandler, errorHandler, 0);
+        } else {
+            for (const cur of curObject) {
+                cur.handler.call(cur.context, argument);
+            }
+            if (successHandler) {
+                successHandler.call(this, argument);
+            }
+        }
+    }
+
+    private blazorCallback(
+        objs: BoundOptions[],
+        argument: object,
+        successHandler: Function,
+        errorHandler: Function,
+        index: number): void | object {
+        const isTrigger: boolean = index === objs.length - 1;
+        if (index < objs.length) {
+            const obj: BoundOptions = objs[parseInt(index.toString(), 10)];
+            const promise: Promise<object> = obj.handler.call(obj.context, argument);
+            if (promise && typeof promise.then === 'function') {
+                if (!successHandler) {
+                    return promise;
+                }
+                promise.then((data: object) => {
+                    data = typeof data === 'string' && this.isJson(data) ? JSON.parse(data as string, this.dateReviver) : data;
+                    extend(argument, argument, data, true);
+                    if (successHandler && isTrigger) {
+                        successHandler.call(obj.context, argument);
+                    } else {
+                        return this.blazorCallback(objs, argument, successHandler, errorHandler, index + 1);
+                    }
+                }).catch((data: object) => {
+                    if (errorHandler) {
+                        errorHandler.call(obj.context, typeof data === 'string' &&
+                            this.isJson(data) ? JSON.parse(data, this.dateReviver) : data);
+                    }
+                });
+            } else if (successHandler && isTrigger) {
+                successHandler.call(obj.context, argument);
+            } else {
+                return this.blazorCallback(objs, argument, successHandler, errorHandler, index + 1);
+            }
+        }
+    }
+
+    // eslint-disable-next-line
+    public dateReviver(key: any, value: any): void | object {
+        const dPattern: RegExp = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/;
+        if (isBlazor && typeof value === 'string' && value.match(dPattern) !== null) {
+            return (new Date(value));
+        }
+        return (value);
+    }
+
+    public isJson(value: string): boolean {
+        try {
+            JSON.parse(value);
+        } catch (e) {
+            return false;
+        }
+        return true;
+    }
+    /**
+     * To destroy handlers in the event
+     *
+     * @returns {void} ?
+     */
+    public destroy(): void {
+        this.boundedEvents = this.context = undefined;
+    }
+    /**
+     * To remove internationalization events
+     *
+     * @returns {void} ?
+     */
+    public offIntlEvents(): void {
+        // eslint-disable-next-line
+        const eventsArr: any = this.boundedEvents['notifyExternalChange'];
+        if (eventsArr) {
+            for (let i: number = 0; i < eventsArr.length; i++) {
+                // eslint-disable-next-line
+                const curContext: any = eventsArr[`${i}`].context;
+                if (curContext && curContext.detectFunction && curContext.randomId && !curContext.isRendered) {
+                    this.off('notifyExternalChange', curContext.detectFunction, curContext.randomId);
+                    i--;
+                }
+            }
+            if (!this.boundedEvents['notifyExternalChange'].length) {
+                delete this.boundedEvents['notifyExternalChange'];
+            }
+        }
+    }
+    /**
+     * Returns if the property exists.
+     *
+     * @param {string} prop ?
+     * @returns {boolean} ?
+     */
+    private notExist(prop: string): boolean {
+        // eslint-disable-next-line
+        return this.boundedEvents.hasOwnProperty(prop) === false || this.boundedEvents[prop].length <= 0;
+    }
+    /**
+     * Returns if the handler is present.
+     *
+     * @param {BoundOptions[]} boundedEvents ?
+     * @param {Function} handler ?
+     * @returns {boolean} ?
+     */
+    private isHandlerPresent(boundedEvents: BoundOptions[], handler: Function): boolean {
+        for (const cur of boundedEvents) {
+            if (cur.handler === handler) {
+                return true;
+            }
+        }
+        return false;
+    }
+}

package/dist/ts/sanitize-helper.ts

@@ -0,0 +1,224 @@
+/**
+ * SanitizeHtmlHelper for sanitize the value.
+ */
+import { detach } from './dom';
+import { isNullOrUndefined } from './util';
+
+interface BeforeSanitizeHtml {
+    /** Illustrates whether the current action needs to be prevented or not. */
+    cancel?: boolean;
+    /** It is a callback function and executed it before our inbuilt action. It should return HTML as a string.
+     *
+     * @function
+     * @param {string} value - Returns the value.
+     * @returns {string}
+     */
+    /** Returns the selectors object which carrying both tags and attributes selectors to block list of cross-site scripting attack.
+     *  Also possible to modify the block list in this event.
+     */
+    selectors?: SanitizeSelectors;
+}
+
+interface SanitizeSelectors {
+    /** Returns the tags. */
+    tags?: string[];
+    /** Returns the attributes. */
+    attributes?: SanitizeRemoveAttrs[];
+}
+
+interface SanitizeRemoveAttrs {
+    /** Defines the attribute name to sanitize */
+    attribute?: string;
+    /** Defines the selector that sanitize the specified attributes within the selector */
+    selector?: string;
+}
+
+const removeTags: string[] = [
+    'script',
+    'style',
+    'iframe[src]',
+    'link[href*="javascript:"]',
+    'object[type="text/x-scriptlet"]',
+    'object[data^="data:text/html;base64"]',
+    'img[src^="data:text/html;base64"]',
+    '[src^="javascript:"]',
+    '[dynsrc^="javascript:"]',
+    '[lowsrc^="javascript:"]',
+    '[type^="application/x-shockwave-flash"]'
+];
+
+const removeAttrs: SanitizeRemoveAttrs[] = [
+    { attribute: 'href', selector: '[href*="javascript:"]' },
+    { attribute: 'background', selector: '[background^="javascript:"]' },
+    { attribute: 'style', selector: '[style*="javascript:"]' },
+    { attribute: 'style', selector: '[style*="expression("]' },
+    { attribute: 'href', selector: 'a[href^="data:text/html;base64"]' }];
+
+const jsEvents: string[] = ['onchange',
+    'onclick',
+    'onmouseover',
+    'onmouseout',
+    'onkeydown',
+    'onload',
+    'onerror',
+    'onblur',
+    'onfocus',
+    'onbeforeload',
+    'onbeforeunload',
+    'onkeyup',
+    'onsubmit',
+    'onafterprint',
+    'onbeforeonload',
+    'onbeforeprint',
+    'oncanplay',
+    'oncanplaythrough',
+    'oncontextmenu',
+    'ondblclick',
+    'ondrag',
+    'ondragend',
+    'ondragenter',
+    'ondragleave',
+    'ondragover',
+    'ondragstart',
+    'ondrop',
+    'ondurationchange',
+    'onemptied',
+    'onended',
+    'onformchange',
+    'onforminput',
+    'onhaschange',
+    'oninput',
+    'oninvalid',
+    'onkeypress',
+    'onloadeddata',
+    'onloadedmetadata',
+    'onloadstart',
+    'onmessage',
+    'onmousedown',
+    'onmousemove',
+    'onmouseup',
+    'onmousewheel',
+    'onoffline',
+    'onoine',
+    'ononline',
+    'onpagehide',
+    'onpageshow',
+    'onpause',
+    'onplay',
+    'onplaying',
+    'onpopstate',
+    'onprogress',
+    'onratechange',
+    'onreadystatechange',
+    'onredo',
+    'onresize',
+    'onscroll',
+    'onseeked',
+    'onseeking',
+    'onselect',
+    'onstalled',
+    'onstorage',
+    'onsuspend',
+    'ontimeupdate',
+    'onundo',
+    'onunload',
+    'onvolumechange',
+    'onwaiting',
+    'onmouseenter',
+    'onmouseleave',
+    'onstart',
+    'onpropertychange',
+    'oncopy',
+    'ontoggle',
+    'onpointerout',
+    'onpointermove',
+    'onpointerleave',
+    'onpointerenter',
+    'onpointerrawupdate',
+    'onpointerover',
+    'onbeforecopy',
+    'onbeforecut',
+    'onbeforeinput'
+];
+export class SanitizeHtmlHelper {
+    public static removeAttrs: SanitizeRemoveAttrs[];
+    public static removeTags: string[];
+    public static wrapElement: HTMLElement;
+    public static beforeSanitize(): BeforeSanitizeHtml {
+        return {
+            selectors: {
+                tags: removeTags,
+                attributes: removeAttrs
+            }
+        };
+    }
+    public static sanitize(value: string): string {
+        if (isNullOrUndefined(value)) { return value; }
+        const item: BeforeSanitizeHtml = this.beforeSanitize();
+        const output: string = this.serializeValue(item, value);
+        return output;
+    }
+
+    public static serializeValue(item: BeforeSanitizeHtml, value: string): string {
+        this.removeAttrs = item.selectors.attributes;
+        this.removeTags = item.selectors.tags;
+        this.wrapElement = document.createElement('div');
+        this.wrapElement.innerHTML = value;
+        this.removeXssTags();
+        this.removeJsEvents();
+        this.removeXssAttrs();
+        const tempEleValue: string = this.wrapElement.innerHTML;
+        this.removeElement();
+        this.wrapElement = null;
+        return tempEleValue.replace(/&/g, '&');
+    }
+
+    private static removeElement(): void {
+        // Removes an element's attibute to avoid html tag validation
+        const nodes: HTMLCollection = this.wrapElement.children;
+        for (let j: number = 0; j < nodes.length; j++) {
+            const attribute: NamedNodeMap = nodes[parseInt(j.toString(), 10)].attributes;
+            for (let i: number = 0; i < attribute.length; i++) {
+                this.wrapElement.children[parseInt(j.toString(), 10)].removeAttribute(attribute[parseInt(i.toString(), 10)].localName);
+            }
+        }
+    }
+
+    private static removeXssTags(): void {
+        const elements: NodeListOf<HTMLElement> = this.wrapElement.querySelectorAll(this.removeTags.join(','));
+        if (elements.length > 0) {
+            elements.forEach((element: Element) => {
+                detach(element);
+            });
+        } else {
+            return;
+        }
+    }
+
+    private static removeJsEvents(): void {
+        const elements: NodeListOf<HTMLElement> = this.wrapElement.querySelectorAll('[' + jsEvents.join('],[') + ']');
+        if (elements.length > 0) {
+            elements.forEach((element: Element) => {
+                jsEvents.forEach((attr: string) => {
+                    if (element.hasAttribute(attr)) {
+                        element.removeAttribute(attr);
+                    }
+                });
+            });
+        } else {
+            return;
+        }
+    }
+
+    private static removeXssAttrs(): void {
+        // eslint-disable-next-line
+        this.removeAttrs.forEach((item: { [key: string]: string }, index: number) => {
+            const elements: NodeListOf<HTMLElement> = this.wrapElement.querySelectorAll(item.selector);
+            if (elements.length > 0) {
+                elements.forEach((element: Element) => {
+                    element.removeAttribute(item.attribute);
+                });
+            }
+        });
+    }
+}

package/dist/ts/template-engine.ts

@@ -0,0 +1,191 @@
+/**
+ * Template Engine Bridge
+ */
+import { compile as render } from './template';
+import { createElement } from './dom';
+import { isNullOrUndefined, isBlazor } from './util';
+
+const HAS_ROW: RegExp = /^[\n\r.]+<tr|^<tr/;
+const HAS_SVG: RegExp = /^[\n\r.]+<svg|^<path|^<g/;
+export const blazorTemplates: object = {};
+
+/**
+ *
+ * @returns {string} ?
+ */
+export function getRandomId(): string {
+
+    return '-' + Math.random().toString(36).substr(2, 5);
+}
+
+/**
+ * Interface for Template Engine.
+ */
+export interface ITemplateEngine {
+    compile: (templateString: string | Function, helper?: Object, ignorePrefix?: boolean) => (data: Object | JSON) => string;
+}
+
+/**
+ * Compile the template string into template function.
+ *
+ * @param {string | Function} templateString - The template string which is going to convert.
+ * @param {Object} helper - Helper functions as an object.
+ * @param {boolean} ignorePrefix ?
+ * @returns {NodeList} ?
+ * @private
+ */
+// eslint-disable-next-line
+export function compile(templateString: string | Function, helper?: Object, ignorePrefix?:boolean): (data: Object | JSON, component?: any, propName?: any) => NodeList {
+    const compiler: Function = engineObj.compile(templateString, helper, ignorePrefix);
+    // eslint-disable-next-line
+    return (data: Object, component?: any, propName?: any, templateId?: any, isStringTemplate?: boolean, index?: number, element?: any, root?: any): NodeList => {
+        const result: object = compiler(data, component, propName, element, root);
+        const blazorTemplateId: string = 'BlazorTemplateId';
+        if (isBlazor() && !isStringTemplate) {
+            const randomId: string = getRandomId();
+            let blazorId: string = templateId + randomId;
+            if (!blazorTemplates[`${templateId}`]) {
+                blazorTemplates[`${templateId}`] = [];
+            }
+            if (!isNullOrUndefined(index)) {
+                const keys: string[] = Object.keys(blazorTemplates[`${templateId}`][parseInt(index.toString(), 10)]);
+                for (const key of keys) {
+                    if (key !== blazorTemplateId && data[`${key}`]) {
+                        blazorTemplates[`${templateId}`][parseInt(index.toString(), 10)][`${key}`] = data[`${key}`];
+                    }
+                    if (key === blazorTemplateId) {
+                        blazorId = blazorTemplates[`${templateId}`][parseInt(index.toString(), 10)][`${key}`];
+                    }
+                }
+            } else {
+                data[`${blazorTemplateId}`] = blazorId;
+                blazorTemplates[`${templateId}`].push(data);
+            }
+            // eslint-disable-next-line
+            return propName === 'rowTemplate' ? [createElement('tr', { id: blazorId, className: 'e-blazor-template' })] as any :
+                // eslint-disable-next-line
+                [createElement('div', { id: blazorId, className: 'e-blazor-template' })] as any;
+
+        }
+        if (typeof result === 'string') {
+            if (HAS_SVG.test(result)) {
+                const ele: HTMLElement = createElement('svg', { innerHTML: result });
+                return <NodeList>ele.childNodes;
+            } else {
+                const ele: HTMLElement = createElement((HAS_ROW.test(result) ? 'table' : 'div'), { innerHTML: result });
+                return <NodeList>ele.childNodes;
+            }
+        } else {
+            return <NodeList>result;
+        }
+    };
+}
+
+/**
+ *
+ * @param {string} templateId ?
+ * @param {string} templateName ?
+ * @param {string} comp ?
+ * @param {boolean} isEmpty ?
+ * @param {Function} callBack ?
+ * @returns {void} ?
+ */
+export function updateBlazorTemplate(
+    templateId?: string, templateName?: string, comp?: object,
+    isEmpty?: boolean, callBack?: Function): void {
+    if (isBlazor()) {
+        const ejsIntrop: string = 'sfBlazor';
+        window[`${ejsIntrop}`].updateTemplate(templateName, blazorTemplates[`${templateId}`], templateId, comp, callBack);
+        if (isEmpty !== false) {
+            blazorTemplates[`${templateId}`] = [];
+        }
+    }
+}
+
+/**
+ *
+ * @param {string} templateId ?
+ * @param {string} templateName ?
+ * @param {number} index ?
+ * @returns {void} ?
+ */
+export function resetBlazorTemplate(templateId?: string, templateName?: string, index?: number): void {
+    const templateDiv: HTMLElement = document.getElementById(templateId);
+    if (templateDiv) {
+        // eslint-disable-next-line
+        const innerTemplates: HTMLElement[] = templateDiv.getElementsByClassName('blazor-inner-template') as any;
+        for (let i: number = 0; i < innerTemplates.length; i++) {
+            let tempId: string = ' ';
+            if (!isNullOrUndefined(index)) {
+                tempId = innerTemplates[parseInt(index.toString(), 10)].getAttribute('data-templateId');
+            } else {
+                tempId = innerTemplates[parseInt(i.toString(), 10)].getAttribute('data-templateId');
+            }
+            const tempElement: HTMLElement = document.getElementById(tempId);
+            if (tempElement) {
+                const length: number = tempElement.childNodes.length;
+                for (let j: number = 0; j < length; j++) {
+                    if (!isNullOrUndefined(index)) {
+                        innerTemplates[parseInt(index.toString(), 10)].appendChild(tempElement.childNodes[0]);
+                        i = innerTemplates.length;
+                    } else {
+                        innerTemplates[parseInt(i.toString(), 10)].appendChild(tempElement.childNodes[0]);
+                    }
+                }
+
+            }
+        }
+    }
+}
+
+/**
+ * Set your custom template engine for template rendering.
+ *
+ * @param  {ITemplateEngine} classObj - Class object for custom template.
+ * @returns {void} ?
+ * @private
+ */
+export function setTemplateEngine(classObj: ITemplateEngine): void {
+    engineObj.compile = classObj.compile;
+}
+
+/**
+ * Get current template engine for template rendering
+ *
+ * @returns {string} ?
+ * @private
+ */
+export function getTemplateEngine(): (template: string, helper?: Object) => (data: Object | JSON) => string {
+    return engineObj.compile;
+}
+
+/**
+ * Set the current template function to support Content Security Policy.
+ *
+ * @param {Function} template - The template function that is going to render.
+ * @param {any} helper - The data utilized by the template from the helper.
+ * @returns {Function} ?
+ * @private
+ */
+// eslint-disable-next-line
+export function initializeCSPTemplate (template : Function, helper?: any): Function {
+    let boundFunc : Function;
+    template.prototype.CSPTemplate =  true;
+    if (!isNullOrUndefined(helper)) {
+        boundFunc = template.bind(helper);
+        boundFunc.prototype = Object.create(template.prototype);
+    } else {
+        boundFunc = template;
+    }
+    return boundFunc;
+}
+
+//Default Engine Class
+class Engine implements ITemplateEngine {
+    // eslint-disable-next-line
+    public compile(templateString: string, helper: Object = {}, ignorePrefix?:boolean): (data: Object | JSON) => string {
+        return render(templateString, helper);
+    }
+}
+
+const engineObj: ITemplateEngine = { compile: new Engine().compile };